/* UNDERHOOK skin. Loaded last on every page (demo/demo.js), so these rules win over each page's own styles.
   A grappling academy with the feel of a product catalogue: black, white type, colour only in the photographs. Bold tight
   lowercase headings, small plain labels, outlined buttons in a pixel face, 1px gaps and no borders on cards, nothing rounded.
   The pages' colours were already moved to black and white by demo/config.json colorMap; this file sets the type and the shapes. */

:root {
  --f-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --f-label: var(--f-body); --f-pixel: 'Public Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --bebas: var(--f-display); --display: var(--f-display); --latin: var(--f-body); --inter: var(--f-body); --sans: var(--f-body); --jp: var(--f-body); --mono: var(--f-body);
  --black: #f6f5f2; --surface: #ffffff; --line: #dedcd6; --acid: #17171a;
  --w: #f6f5f2; --off: #f6f5f2; --paper: #f6f5f2; --paper-2: #ffffff;
  --b: #17171a; --ink: #17171a; --ink-2: #6b6b73; --ink-3: #77777f;
  --r: #17171a; --red: #17171a; --accent: #17171a; --accent-light: #dedcd6; --accent-dark: #33333a; --accent-glow: rgba(0,0,0,.05);
  --g: #dedcd6; --border: #dedcd6; --dim: #77777f; --mid: #6b6b73;
  --radius: 4px; --radius-sm: 4px; --card-border: 0; --card-radius: 4px;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
}
html { background: #f6f5f2; scrollbar-gutter: stable; color-scheme: light; }
body { font-family: var(--f-body) !important; color: #17171a; background: #f6f5f2 !important; }
a { color: inherit; }
::selection { background: #17171a; color: #f6f5f2; }

/* ---- type: headings bold, tight and in sentence case; labels small and plain ---- */
h1, h2, .greeting-name, .sec-title, .page-title, .coll-title, .cur-hero-title, .coll-hero-title, .coll-card-title, .plm-hero-name, .nm-vtitle, .plm-vtitle,
.head h1, .step, .shop-hero h1, .section-header h2, .plan-name, .f-title, .td-title, .notes-main-title, .pc-title-bar h1, .mode b, .card.big b, .tree .root .nm,
.row.method .nm, .curtrack, .shop-coll-info h3, .sub-cta-title, .hero-brand, .final h2, .s h2, .intro-block h2.q {
  font-family: var(--f-display) !important; text-transform: none !important; letter-spacing: -.025em !important; font-weight: 700 !important; line-height: 1.02 !important; color: #17171a;
}
.head h1, .greeting-name, .page-title, .shop-hero h1, .forum-main h1 { font-size: 44px !important; }
.sec-title, .section-header h2, .step { font-size: 26px !important; }
.s h2, .intro-block h2.q, .final h2 { font-size: clamp(34px, 4.4vw, 60px) !important; }
.mode b, .card.big b, .tree .root .nm, .row.method .nm, .coll-card-title { font-size: 18px !important; letter-spacing: -.01em !important; font-weight: 600 !important; }
.s h3, .engine h3, .voice h3, .feature h3, .prose h3 { font-family: var(--f-display) !important; text-transform: none; letter-spacing: -.01em; font-weight: 600 !important; font-size: 20px !important; }
.mono-label, .eyebrow, .coll-eyebrow, .stat-l, .vm, .vtag, .vd, .c-sub, .cp-badge, .sec-link, .tech-card-meta, .greeting-sub, .greeting-date, .streak-l, .resbar,
.card small, .row .ct, .tree .ct, .vid .dur, .vid .th small, .pill small, .cta-sub, .final p, .ch-title, .acct-plan, .plan-badge, .shop-coll-meta, .section-header span,
.note-vid, .note-time, .acct-email, .acct-row-val, .nav-label, .footer-copy, .footer-links a, .cur-hero-label, .coll-hero-label, .cur-hero-stat-l, .coll-hero-stat-l,
.coll-card-ct, .tech-thumb-dur, .lib-pill, .lib-sub-pill, .fgroup h3 {
  font-family: var(--f-body) !important; font-weight: 500 !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none; color: #6b6b73;
}
.eyebrow { color: #17171a !important; } .eyebrow.light { color: #17171a !important; }
p, li, td, .desc, .lead, .sub, .greeting-sub { color: #3a3a40; }

/* ---- header: thin, black, the mark; text links small and plain ---- */
.top-bar, .hd { border-bottom: 1px solid #dedcd6 !important; background: #f6f5f2 !important; }
.hd .logo span, .hd .logo-text { font-family: var(--f-display) !important; font-weight: 800 !important; font-style: italic; font-size: 24px !important; letter-spacing: -.04em !important; color: #17171a !important; text-transform: lowercase !important; }
.hd .logo img, .hd .mark img { height: 34px !important; width: 34px !important; object-fit: contain; border-radius: 4px !important; }
.top-nav-brand .logo-matrix { height: 34px !important; gap: 12px !important; }
.top-nav-brand .logo-matrix::before, .mm-brand .logo-matrix::before { aspect-ratio: 1 / 1 !important; border-radius: 4px !important; background-size: contain !important; }
.top-nav-brand .logo-matrix::after, .mm-brand .logo-matrix::after { font-family: var(--f-display) !important; font-weight: 800 !important; font-style: italic; font-size: 24px !important; letter-spacing: -.04em !important; color: #17171a !important; text-transform: lowercase !important; }
.top-nav { gap: 2px !important; }
.top-nav a.tn { font-family: var(--f-body) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none;
  padding: 8px 10px !important; border-radius: 4px !important; background: transparent !important; color: #33333a !important; border-bottom: 1px solid transparent !important; }
.top-nav a.tn:hover { color: #17171a !important; background: transparent !important; }
.top-nav a.tn.on { color: #17171a !important; background: transparent !important; border-bottom-color: #17171a !important; }
.top-nav a.tn.on::after { display: none !important; }
.btn-trial, .nav-trial, .site-nav .nav-trial { background: #17171a !important; color: #f6f5f2 !important; border-radius: 4px !important; box-shadow: none !important; font-weight: 700 !important; padding: 8px 14px !important; text-transform: uppercase; font-family: var(--f-pixel) !important; font-size: 11px !important; letter-spacing: .04em; }
.nav-login, .top-bar .nav-login { border: 1px solid #17171a; color: #17171a !important; padding: 7px 12px; border-radius: 0; font-weight: 400; font-size: 11px !important; letter-spacing: .04em; text-transform: uppercase; background: transparent; font-family: var(--f-pixel) !important; }
#nav-avatar-pc, #nav-avatar-m, .top-avatar, .nav-avatar, .sidebar-avatar, .acct-avatar, .f-avatar[data-belt="black"] { background: #17171a !important; color: #f6f5f2 !important; border-color: #17171a !important; box-shadow: none !important; border-radius: 4px !important; text-shadow: none !important; }
.mm-burger span { background: #17171a !important; }
.mm-panel { background: #f6f5f2 !important; } .mm-panel a.mm-link, .mm-panel a.mm-join { color: #17171a !important; } .mm-panel a.mm-link.on { background: #ffffff !important; color: #17171a !important; }
.to-top { border-color: #d2d0ca !important; color: #17171a !important; background: #f6f5f2 !important; box-shadow: none !important; border-radius: 4px !important; }
.to-top:hover { background: #17171a !important; color: #f6f5f2 !important; }
@media (min-width: 768px) {
  body.topnav-mode .top-bar { padding-left: max(32px, calc((100% - 1240px) / 2 + 32px)) !important; padding-right: max(32px, calc((100% - 1240px) / 2 + 32px)) !important; padding-top: 12px !important; min-height: 64px !important; }
  .top-bar-left .top-nav-brand { margin: 0 0 8px !important; }
  body.topnav-mode .top-bar-right { top: 14px !important; }
}

/* ---- surfaces: panels a shade lighter than the page, no borders, no corners ---- */
.sp-card, .mode, .card, .vid, .filters, .row, .row.method, .tree .root, .tree .kid, .tech-card, .cp-card, .coll-card, .shop-coll-card, .cur-hero, .coll-hero, .thread-item, .td-card, .acct-card,
.nm-box, .plm-box, .lib-search, .lib-pos-search, .cr-box, .card.big.jcard, .guest, .voice, .engine, .demo-box, .plan-card, .product-card, .m-card, .plans .plan, .terms, .pl-card-cover, .note-items {
  background: #ffffff !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; color: #17171a;
}
.searchrow input, .searchrow select, .searchrow .more, input, select, textarea, .lib-search input, .more, .sort button, .btn, .btn-primary, .f-btn, .f-btn-outline, .pill, .trail button, .trail .cur,
.lib-pill, .lib-sub-pill, .chip, .tag, .vtab, .cur-back, .coll-back, .acct-plan, .thread-video-badge, .thread-replies, .hd .btn, #invert-switch, .row img, .row .ph, .fig, .cur-hero-photo, .coll-card-cover, .tech-thumb, .loop li, .plan .tag {
  border-radius: 4px !important; box-shadow: none !important;
}
input, select, textarea, .searchrow input, .searchrow select { background: #ffffff !important; color: #17171a !important; border: 1px solid #d2d0ca !important; }
input::placeholder, textarea::placeholder { color: #9a9aa2 !important; }
input:focus, select:focus, textarea:focus { border-color: #17171a !important; outline: none !important; box-shadow: none !important; }
.mode:hover, .card:hover, .vid:hover, .tree .root:hover, .tree .kid:hover, .tech-card:hover, .thread-item:hover, .coll-card:hover, .shop-coll-card:hover, .guest:hover, .row:hover {
  transform: none !important; box-shadow: none !important; background: #efede8 !important;
}
.mode.on { outline: 1px solid #17171a !important; } .mode.on b { color: #17171a !important; }
.pill.on, .trail .cur, .lib-pill.on, .lib-sub-pill.on, .card.all, .vrow.on { background: #17171a !important; border-color: #17171a !important; color: #f6f5f2 !important; }
.card.all b, .card.all small, .pill.on small, .trail .cur { color: #f6f5f2 !important; }
.pill, .trail button, .lib-pill, .lib-sub-pill, .sort button, .chip, .tag, .vtab { background: transparent !important; color: #2a2a30 !important; border: 1px solid #d2d0ca !important; }
.sublinks a, .clear, .row.all .nm, .acc .cur, .f-back, .sec-link { color: #17171a !important; text-decoration: underline; text-underline-offset: 3px; }
.loop li { border-left-color: #17171a !important; } .statement { border-left-color: #17171a !important; }
hr, .divider { border-color: #dedcd6 !important; }
.news-type, .news-type.t-tech { background: transparent !important; color: #6b6b73 !important; border: 1px solid #d2d0ca !important; font-family: var(--f-body) !important; font-size: 11px !important; letter-spacing: 0 !important; padding: 2px 6px !important; border-radius: 4px !important; }

/* ---- buttons: the site's small outlined buttons in a pixel face; the main one filled white ---- */
.btn-red, .btn-primary, .plan-cta, .sub-cta-btn, .cr-upload-btn, .f-btn, .join-btn, button.more, .searchrow .more, .nm-note-add-btn, .pl-create-btn, .pl-list-add, .note-add-btn {
  background: #17171a !important; color: #f6f5f2 !important; border: 1px solid #17171a !important; box-shadow: none !important;
}
.btn-red:hover, .btn-primary:hover, .plan-cta:hover, button.more:hover { background: #33333a !important; transform: none !important; box-shadow: none !important; }
.btn-line, .f-btn-outline, .cur-back, .coll-back { border: 1px solid #17171a !important; color: #17171a !important; background: transparent !important; }
.btn-line:hover, .f-btn-outline:hover { background: #17171a !important; color: #f6f5f2 !important; }
.btn, .btn-red, .btn-primary, .btn-line, .plan-cta, .sub-cta-btn, .f-btn, .f-btn-outline, .join-btn, button.more, .cur-back, .coll-back { font-family: var(--f-body) !important; text-transform: none; letter-spacing: .02em; font-weight: 400 !important; font-size: 14px !important; }
.btn:focus-visible { outline: 1px solid #17171a !important; outline-offset: 2px; }

/* ---- the library's video tiles: the photograph edge to edge, the title under it, 1px gaps ---- */
.vids { gap: 1px !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; background: #f6f5f2; }
.vid { border: 0 !important; background: #ffffff !important; overflow: hidden !important; }
.vid:hover { background: #efede8 !important; }
.vid .th {
  height: auto !important; aspect-ratio: 16 / 9; border-top: 0 !important; border-radius: 4px !important; padding: 12px 14px 10px !important; color: #17171a !important;
  background-color: #ffffff !important; background-image: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%), var(--photo, url('/demo-thumbs/art-tile.svg')) !important; background-size: cover !important; background-position: center !important;
  display: flex !important; flex-direction: column !important; justify-content: flex-end !important; position: relative; overflow: hidden;
}
.vid .th b { font-family: var(--f-display) !important; font-weight: 600 !important; font-size: 16px !important; letter-spacing: -.01em !important; line-height: 1.15 !important; text-transform: none; color: #17171a !important; max-width: 92%; -webkit-line-clamp: 3 !important; }
.vid .meta { position: static !important; display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin-top: 6px; }
.vid .th small { color: #6b6b73 !important; font-size: 12px !important; letter-spacing: 0 !important; text-transform: none; font-weight: 500 !important; }
.vid .dur { background: transparent; color: #17171a !important; padding: 0; border-radius: 4px !important; font-size: 12px !important; font-weight: 500 !important; margin: 0 !important; font-family: var(--f-body) !important; }
@media (max-width: 767px) { .vids { gap: 1px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .vid .th b { font-size: 13px !important; } }

/* ---- the member library ---- */
.lib-tab { font-family: var(--f-body) !important; font-size: 14px !important; color: #6b6b73 !important; text-transform: none !important; letter-spacing: 0 !important; }
.lib-tab.on { color: #17171a !important; border-bottom-color: #17171a !important; }
.tech-card { border: 0 !important; background: #ffffff !important; }
.tech-thumb, .c-thumb, .cp-cover, .coll-card-cover, .shop-coll-thumb { background: #ffffff !important; }
.tech-card-title { font-family: var(--f-display) !important; text-transform: none; font-size: 15px !important; letter-spacing: -.01em; padding: 10px 12px 0 !important; font-weight: 600 !important; color: #17171a !important; }
.tech-card-meta { padding: 4px 12px 12px !important; }

/* ---- content pages (guide, faq, join …) ---- */
.hero-art { background-color: #ffffff !important; }
section.s.dark, .final { background: #ffffff !important; }
.engine { background: #ffffff !important; border: 0 !important; }
.demo-play .tri { background: #17171a !important; color: #f6f5f2 !important; box-shadow: none !important; border-radius: 4px !important; }
.quote { color: #17171a !important; }
.statement, .quote, blockquote, .theory-line { font-family: var(--f-display) !important; text-transform: none !important; color: #17171a !important; border-left: 2px solid #17171a !important; }
.thread-pin, .forum-main h1, .forum-main .f-title, .notes-empty, .pl-empty, .f-empty, .dash-empty, .lib-empty, .empty-state { color: #17171a !important; }
.thread-video-badge, .thread-replies { background: #ffffff !important; color: #17171a !important; }
footer, .ft, .site-footer { background: #f6f5f2 !important; border-top: 1px solid #dedcd6 !important; color: #6b6b73 !important; }

/* ---- status colours stay: an error is red, success is green ---- */
.err, .error-msg, .msg.err, .err-msg, #reset-error, .field-error, .form-error { color: #ff6b6b !important; }
.toast-err { border-left-color: #ff6b6b !important; }
.ok, .success, .msg.ok, .toast-ok, .badge-ok, .status-on { color: #3fd36b !important; }

/* no invert switch here: the site is black only */

/* ---- text that was navy on white in the source (the colour map turned it black on black): white here ---- */
.sidebar-logo-text,
.sidebar-link:hover,
.sidebar-user-name,
.acct-row-label,
.acct-row-val,
.acct-pay-btn,
.acct-bill-item,
.acct-bill-st,
.card-modal-title,
.card-btn-cancel,
.acct-confirm-hint,
.acct-name,
.logo-word::after,
.btn-google,
.legal-body p,
.legal-body ul li,
.form-input,
.form-select,
.form-textarea,
.form-select option,
.report-trigger a:hover,
.nm-note-input-row textarea,
.nm-note-input-row textarea::placeholder,
.nm-tl-body,
.nm-tl-btn:hover,
.nm-tl-input,
.pl-new-form input,
.pl-new-form input::placeholder,
.pl-list-name,
.plm-video-item:hover,
.plm-video-dur,
.sub-cta-title,
.pl-card,
.pl-card .pl-card-name,
.dash-guide-link,
.push-card .push-text,
.nm-vtitle,
.plm-vtitle,
.pl-list-add:hover,
.pl-header-title,
.plm-hero-name,
.plm-sidebar-title,
.plm-video-item.active,
.nm-bar-controls button:hover,
.plm-bar-controls button:hover,
.ip-act.on,
.ip-act.on:hover,
.vid-report-form .vr-type.on,
.vid-report-form .vr-type.on:hover,
.news-item,
.curtrack,
.wsec .txt,
.legal-body h3,
.step-text,
.plan ul,
.terms,
.jn-kind-btn b,
.jn-badge.kind,
.jn-badge.kind.question,
.jn-badge.kind.discovery,
.jn-check,
.jn-picker-item,
.jn-picker-chip,
.jn-pos,
.jn-problem,
.jn-row,
.jn-btn,
.jn-update,
.sub-overlay span,
.note-input-row textarea,
.note-input-row textarea::placeholder,
.note-date,
.note-text,
.note-empty,
.pl-list-count,
.pl-detail-remove,
.pl-empty,
.minibar-title,
.minibar-sub,
.mm-bar-title,
.lpm-video-item:hover,
.lpm-video-dur,
.lpm-next-prompt span,
.ip-header,
.ip-link-btn:hover,
.ip-title,
.dir-more,
.dir-more:hover,
.dir-chip,
.dir-chip.on,
.dir-dd-item,
.dir-chip.dir-chip-reset:hover,
.lf-group-h:hover,
.lf-item,
.lib-search input,
#tech-sort,
#lib-total-count,
.tech-card-tag,
.tech-tag,
.tech-card-title,
.mm-title,
pl-new-btn:hover,
.pl-detail-play:hover,
.minibar-expand:hover,
.note-toast,
.vthumb-dur,
.lpm-hero-name,
.lpm-vtitle,
.lpm-video-item.active,
.lpm-bar-controls button.on,
.lpm-bar-controls button.on:hover,
.nm-bar-title,
.qi .cm,
.plan-card.featured .save-badge { color: #17171a !important; }
.news-item .news-name, .dash-guide-link, .greeting-streak, .stats-bar, .acct-row-val, .pl-card-name, .c-card .c-title { color: #17171a !important; }
.dash-guide-link { border-color: #d2d0ca !important; }
/* the admin: unselected tabs and small buttons were black on black */
.btn.dash-sub:not(.on), .btn.growth-tab:not(.on), .btn-s:not(.on), .shop-subtab:not(.on) { color: #6b6b73 !important; background: #ffffff !important; border-color: #dedcd6 !important; }
/* text that sits on the white accent stays dark */
.pill.on, .pill.on small, .trail .cur, .lib-pill.on, .lib-sub-pill.on, .card.all, .card.all b, .card.all small, .btn-red, .btn-primary, .plan-cta, .sub-cta-btn, .f-btn, .join-btn, button.more, .btn-trial, .nav-trial, .vid .dur { color: #f6f5f2 !important; }
.vid .dur, .vid .th b, .vid .th small { color: #17171a !important; }

/* ---- the inner pages: the same bar, compact (the brand on its row, the links under it, the way the base site lays it out) ---- */
@media (min-width: 768px) {
  body.topnav-mode .top-bar { padding-top: 8px !important; min-height: 64px !important; }
  .top-bar-left .top-nav-brand { margin: 0 0 4px !important; }
  body.topnav-mode .top-bar-right { top: 10px !important; }
  .top-nav a.tn { padding: 4px 8px !important; }
}
.top-nav-brand .logo-matrix { height: 24px !important; gap: 8px !important; }
.hd .logo img, .hd .mark img { height: 24px !important; width: 24px !important; }
.top-nav-brand .logo-matrix::after, .mm-brand .logo-matrix::after, .hd .logo span, .hd .logo-text { font-size: 18px !important; }
.nav-login, .top-bar .nav-login, .btn-trial, .nav-trial { padding: 5px 10px !important; height: 28px; display: inline-flex; align-items: center; }
#nav-avatar-pc, #nav-avatar-m, .top-avatar, .nav-avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; }
/* every small control is the same outlined pixel button */
.pill, .trail button, .lib-pill, .lib-sub-pill, .sort button, .gsort button, .chip, .tag, .vtab, .mode-btn, .seg button, .f-pager-btn, .jn-tab, .qtab, .qtag, .partnav a, .lf-item, .dir-chip {
  font-family: var(--f-pixel) !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .04em !important; border: 1px solid #17171a !important; border-radius: 4px !important; background: transparent !important; color: #17171a !important; padding: 6px 10px !important;
}
.pill.on, .lib-pill.on, .lib-sub-pill.on, .gsort button.on, .vtab.on, .jn-tab.on, .qtab.on, .qtag.on, .partnav a.on, .lf-item.on, .dir-chip.on, .f-pager-btn.on { background: #17171a !important; color: #f6f5f2 !important; }
.sublinks a, .clear { font-family: var(--f-pixel) !important; font-size: 10px !important; text-transform: uppercase; text-decoration: none !important; border: 1px solid #17171a; padding: 6px 10px; display: inline-block; margin: 0 6px 6px 0; }
/* the guest, theory and match pages: cards with no corners, no borders, 1px apart */
.works { gap: 1px !important; background: #f6f5f2 !important; }
.work, .wcard, .whero, .whero img, .work img, .wsec, .wsec .txt, .cp-card, .cp-cover, .coll-card, .coll-card-cover { border-radius: 4px !important; }
.work { border: 0 !important; background: #ffffff !important; box-shadow: none !important; }
.work:hover { transform: none !important; box-shadow: none !important; background: #efede8 !important; }
.work .wt small { color: #6b6b73 !important; font-weight: 500 !important; } .work .wt .rel { font-family: var(--f-body) !important; color: #77777f !important; }
.whero img, .work img, .coll-card-cover, .cp-cover, .shop-coll-thumb { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* nothing on any page is rounded */
button, a, input, select, textarea, img, .sp-card, .card, [class*="pill"], [class*="chip"], [class*="badge"], [class*="tag"], [class*="btn"], [class*="card"], .avatar, .f-avatar, .m-greeting-wrap *, .gw-sort *, .sort * { border-radius: 4px !important; }

/* ---- the inner pages run the full width, like the top page ---- */
.page { max-width: 1600px !important; }

.works { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 767px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }