/* brand.css - direction G, "the quiet search" (Nov 2026). Loaded last, after site.css, landing.css and app.css:
   it gives the tokens of site.css their new values and reshapes the shared controls. The rules of G:
   - a pale stone ground, white cards, navy ink; brass only as the full stop and one thin rule;
   - the serif (Cormorant Garamond) for headline words, numbers of 40px and up and a posting's quoted words,
     always with lining figures: its default figures are old-style, where the 1 reads as a capital I;
   - the sans (Figtree) for everything read or pressed, in sentence case, never in spaced capitals;
   - main actions are filled navy pills, second actions outlined pills;
   - at night the same brand in E's colours: a navy ground, ivory ink, a lighter brass. */

/* the two typefaces, latin and latin-ext, served from here (static/fonts/LICENSE.md); each file holds every weight */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-garamond-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-garamond-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-garamond-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/figtree-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/figtree-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --brand: #8A6A2B;
  --color-bg: #F4F5F2; --color-surface: #FFFFFF; --color-surface-2: #E6EAE4; --color-text: #14213A;
  --color-accent: #14213A; --color-accent-100: #E6EAE4; --color-accent-600: #26375A; --color-accent-700: #0E182C; --color-accent-800: #14213A;
  --color-accent-2: #A63244; --color-accent-2-100: #F6E7E9; --color-accent-2-800: #7A1F2E;
  --color-divider: rgba(20,33,58,.13); --rule-strong: rgba(20,33,58,.3); --link-underline: rgba(20,33,58,.4); --color-border: rgba(20,33,58,.16);
  --color-neutral-100: #EEF0EC; --color-neutral-200: #E6EAE4; --color-neutral-300: #D9DED7; --color-neutral-500: #9AA3B5;
  --color-neutral-600: #7A859B; --color-neutral-700: #56627A; --color-neutral-800: #33405A; --color-neutral-900: #1C2A45;
  --color-ok: #2F6B4F; --color-ok-100: #E3EEE7; --color-ok-ink: #26593F; --color-warn: #9A6B15; --color-warn-100: #F3EBD9; --color-warn-ink: #7A5410; --color-process-yellow: #9A6B15;
  --font-heading: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading-weight: 600;
  --font-display: "Cormorant Garamond", "Newsreader", Georgia, "Times New Roman", serif;
  --font-label: var(--font-heading); --font-body: var(--font-heading);
  --font-num: var(--font-heading);
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20,33,58,.06); --shadow-md: 0 6px 20px -8px rgba(20,33,58,.18);
  /* the signed-in screens */
  --fw-ground: #F4F5F2; --fw-surface: #FFFFFF; --fw-sunken: #EEF0EC; --fw-ink: #14213A; --fw-ink-2: #33405A; --fw-muted: #56627A;
  --fw-line: #E2E5E0; --fw-line-soft: #EBEEE9; --fw-line-strong: #B9C0CC; --fw-track: #E2E5E0; --fw-chip: #E6EAE4;
  --fw-teal: #14213A; --fw-teal-tint: #E6EAE4; --fw-on-teal: #FFFFFF;
  --fw-red: #A63244; --fw-red-tint: #F6E7E9; --fw-green: #2F6B4F; --fw-green-tint: #E3EEE7;
  --fw-amber: #9A6B15; --fw-amber-ink: #7A5410; --fw-amber-tint: #F3EBD9;
  --fw-panel: #14213A; --fw-panel-edge: #14213A; --fw-panel-ink: #F4F5F2; --fw-panel-muted: #A9B4C8; --fw-panel-line: #2B3A58;
  --fw-panel-teal: #D9BE86; --fw-panel-red: #F0A0A8; --fw-panel-red-soft: rgba(240,160,168,.5); --fw-panel-amber: #E3BE77; --fw-panel-green: #8FD0AC;
  --fw-panel-ring: #7F8BA3; --fw-panel-band: rgba(217,190,134,.09); --fw-panel-shadow: none;
  --fw-h1: 54px; --fw-news: 46px; --fw-big: 36px; --fw-fit-xl: 104px; --fw-role-xl: 22px;
  --fw-caps-ls: 0;
}
:root[data-theme="dark"] {
  --brand: #C2A46B;
  --color-bg: #101A2B; --color-surface: #18243A; --color-surface-2: #1F2D47; --color-text: #F3EEE3;
  --color-accent: #F3EEE3; --color-accent-100: #1F2D47; --color-accent-600: #FFFFFF; --color-accent-700: #FFFFFF; --color-accent-800: #F3EEE3;
  --color-accent-2: #F0A0A8; --color-accent-2-100: #3A1F2B; --color-accent-2-800: #F7C9CE;
  --color-divider: rgba(243,238,227,.14); --rule-strong: rgba(243,238,227,.32); --link-underline: rgba(243,238,227,.4); --color-border: rgba(243,238,227,.18);
  --color-neutral-100: #18243A; --color-neutral-200: #1F2D47; --color-neutral-300: #2A3A57; --color-neutral-500: #6F7C94;
  --color-neutral-600: #8E9AB0; --color-neutral-700: #A9B4C8; --color-neutral-800: #CBD3E0; --color-neutral-900: #F3EEE3;
  --color-ok: #8FD0AC; --color-ok-100: #1B3229; --color-ok-ink: #8FD0AC; --color-warn: #E3BE77; --color-warn-100: #3A2E14; --color-warn-ink: #E3BE77; --color-process-yellow: #E3BE77;
  --shadow-sm: none; --shadow-md: none;
  --fw-ground: #101A2B; --fw-surface: #18243A; --fw-sunken: #142036; --fw-ink: #F3EEE3; --fw-ink-2: #CBD3E0; --fw-muted: #A9B4C8;
  --fw-line: #2A3A57; --fw-line-soft: #223049; --fw-line-strong: #4A5A78; --fw-track: #2A3A57; --fw-chip: #1F2D47;
  --fw-teal: #F3EEE3; --fw-teal-tint: rgba(243,238,227,.1); --fw-on-teal: #101A2B;
  --fw-red: #F0A0A8; --fw-red-tint: rgba(240,160,168,.13); --fw-green: #8FD0AC; --fw-green-tint: rgba(143,208,172,.13);
  --fw-amber: #E3BE77; --fw-amber-ink: #E9C98A; --fw-amber-tint: rgba(227,190,119,.13);
  --fw-panel: #0B1322; --fw-panel-edge: #2A3A57; --fw-panel-ink: #F3EEE3; --fw-panel-muted: #A9B4C8; --fw-panel-line: #26344F;
  --fw-panel-teal: #D9BE86; --fw-panel-red-soft: rgba(240,160,168,.45);
  --fw-panel-ring: #7F8BA3; --fw-panel-band: rgba(217,190,134,.08); --fw-panel-shadow: none;
}
@media (max-width: 700px) {
  :root { --fw-h1: 38px; --fw-news: 34px; --fw-big: 28px; --fw-fit-xl: 64px; --fw-role-xl: 18px; }
}
/* lining figures wherever the serif sets a number; a no-op in the sans, whose figures are lining already.
   On every element and marked important, because the `font` shorthand, which many rules here use, resets
   font-feature-settings: an inherited value would be lost at each of them. Nothing else on the site sets this property. */
*, ::before, ::after { font-feature-settings: "lnum" !important; }
/* the serif reaches Cyrillic and Vietnamese, the sans does not: these keep today's sans and take the serif headline.
   Hausa keeps both of today's faces, for its hooked letters. Every other script keeps the faces site.css gives it. */
html:lang(ru), html:lang(uk), html:lang(vi) { --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Cormorant Garamond", "Noto Serif", "Newsreader", Georgia, serif; }
html:lang(ha) { --font-heading: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Newsreader", Georgia, serif; }

/* ---------------------------------------------------------------- type */
h1 { font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
a { color: var(--color-text); }
a:hover { color: var(--color-neutral-700); }
/* no spaced capitals: every small label is a plain sentence-case line */
h6, .k, .kc, .res-line .chip, .fw-label, .fw-co, .sys-dir thead th, .table th, .res .k, .res-inner .k, .res-hd, .res-row .co, .res-inner .co,
.board-col > header, .table-admin td[data-l]::before, .fw-panel__label, .fw-past__k, .fw-past__co, .fw-rrow--head, .fw-receipt__k, .ld-k,
.stage-deck:not(.has)::before { text-transform: none; letter-spacing: 0; font-size: 13px; }
.k, .kc, .ld-k { font-weight: 600; color: var(--color-neutral-700); }
.fw-past__k { color: var(--fw-muted); }

/* ---------------------------------------------------------------- the top bar and the wordmark */
.nav { gap: 28px; padding: 14px clamp(16px, 4vw, 56px); }
.nav a { font-size: 16px; font-weight: 500; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-neutral-700); }
.nav .nav-brand { font-family: "Cormorant Garamond", var(--font-display); font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: -.02em; color: var(--color-text); }
.nav-brand span::after { content: "."; color: var(--brand); }
@media (max-width: 700px) { .nav .nav-brand { font-size: 30px; } .nav a { font-size: 15px; } }
/* the four signed-in screens: one white pill bar, the current screen in navy */
@media (min-width: 701px) {
  .nav-app .nav-tabs { gap: 4px; padding: 5px; border-radius: 999px; background: var(--color-surface); }
  .nav-app .nav-tabs a { padding: 8px 20px; border: 0; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--color-text); }
  .nav-app .nav-tabs a:hover { background: var(--color-surface-2); color: var(--color-text); }
  .nav-app .nav-tabs a[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
}
@media (max-width: 700px) { .nav-app .nav-tabs a[aria-current="page"] { color: var(--color-text); font-weight: 700; } }

/* ---------------------------------------------------------------- buttons, fields, chips, cards */
.btn, .fw-btn, .btn-outline, .btn-ink { border-radius: 999px; }
.btn { padding: 10px 20px; font-size: 15px; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-secondary { border-color: var(--color-text); }
.btn-secondary:hover { background: var(--color-surface-2); }
.btn-ghost { color: var(--color-text); }
.btn-ghost:hover { background: var(--color-surface-2); }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.nav .btn-primary.btn-sm { min-height: 42px; padding: 0 20px; font-size: 15px; font-weight: 600; }
.nav .btn-primary, .nav .btn-primary:hover { color: var(--color-bg); }
.input, .fw-input { border-radius: 14px; }
.input { min-height: 44px; padding: 8px 14px; font-size: 15px; }
.input:hover { border-color: var(--color-neutral-700); }
.input:focus { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(20,33,58,.12); }
:root[data-theme="dark"] .input:focus { box-shadow: 0 0 0 3px rgba(243,238,227,.16); }
.tag, .chip, .fw-chip, .plans-wrap .tag, .fw-status, .chip-run, .tracking { border-radius: 999px; }
.card, .share-card, .guide-card, .ld-look-card, .ld-vs-col, main:has(.table-admin) .card { border-radius: 20px; }
.plans-wrap .card, .fw-open { border-radius: 24px; }
.note, .tool-error, .tool-wait, .board-hit, .tool-cta, .langs-list, .stage-yours, .since, .problems, .flash { border-radius: 14px; }
/* the signed-in screens' own blocks */
.fw-card, .fw-box, .fw-filter .res-filters, .fw-empty--block, .fw-board .board-col, .board-col, .rb-near, .tr-write, .set .card, .set > form.row, .fw-past, .fw-receipt__line { border-radius: 20px; }
.fw-panel { border-radius: 24px; }
.fw-receipt[open] > .fw-receipt__line { border-radius: 20px 20px 0 0; }
.fw-receipt[open] > .fw-panel { border-radius: 0 0 24px 24px; }
.fw-board .card, .fw-empty, .fw-note, .res-running, .col-empty { border-radius: 14px; }
.rule > summary { border-radius: 12px; }
.fw-segmented, .fw-open__x { border-radius: 999px; }

/* ---------------------------------------------------------------- the home page's first screen */
.poster-eyebrow { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--color-neutral-700); }
.poster { padding-top: clamp(24px, 3.2vw, 48px); }
.poster h1 { font-size: clamp(60px, 6.9vw, 116px); line-height: .9; letter-spacing: -.025em; font-weight: 500; }
@media (max-width: 600px) { .poster h1 { font-size: clamp(46px, 15.4vw, 64px); } }
.poster h1 .stop { color: var(--brand); }
.poster-row p { color: var(--color-neutral-800); }
.ld-cta { border-radius: 999px; padding: 14px 28px; font-size: 16px; }
.ld-cta:hover { background: var(--color-accent-600); color: var(--color-bg); }
.ld-cta.teal, .ld-cta.teal:hover { color: var(--color-bg); }
.ld-cta.ghost { background: transparent; color: var(--color-text); border: 1px solid var(--color-text); }
.ld-cta.ghost:hover { background: var(--color-surface-2); color: var(--color-text); }
:root[data-theme="dark"] .ld-cta.teal, :root[data-theme="dark"] .ld-cta:hover { color: var(--color-bg); }
:root[data-theme="dark"] .ld-cta.ghost, :root[data-theme="dark"] .ld-cta.ghost:hover { color: var(--color-text); }
/* the count box is the page's one white card */
.poster-row--count .poster-try { padding: 22px 24px 24px; border-radius: 24px; background: var(--color-surface); }
.poster-row--count .poster-try-label { margin-bottom: 12px; font-size: 16px; color: var(--color-text); }
.poster-row--count .poster-try-row { gap: 10px; }
.poster-row--count .poster-try-row .input { min-height: 54px; padding: 0 18px; border-radius: 14px; font-size: 16px; }
.poster-row--count .poster-try-row .btn { min-height: 54px; padding: 0 30px; border-radius: 999px; font-size: 16px; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.poster-row--count .poster-try-row .btn:hover { background: var(--color-accent-600); }
@media (max-width: 600px) { .poster-row--count .poster-try { padding: 18px 16px 20px; } .poster-row--count .poster-try-row .input { padding: 0 14px; font-size: 15px; } }
:root[data-theme="dark"] .poster-row--count .poster-try-row .btn { color: var(--color-bg); }
.poster-try-out { border: 0; border-radius: 16px; background: var(--color-surface-2); }
.poster-try-out a { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }

/* the replayed search: one navy block on the pale ground; what is kept is shown in light brass */
#stage { background: #14213A; border: 0; border-radius: 24px; padding: 22px 26px 24px; box-shadow: none; color: #F4F5F2; }
#stage::before { display: none; }
:root[data-theme="dark"] #stage { background: #0B1322; border: 1px solid rgba(243,238,227,.12); }
.stage-head, .card-co { font-size: 13px; letter-spacing: 0; text-transform: none; color: #A9B4C8; }
.stage-head #stage-clock, .stage-ledger .hit b, .card-fit, .card-tag { color: #D9BE86; }
/* a column widens for a long count (931,518 postings), so one number never runs into the next */
.stage-ledger { grid-template-columns: repeat(5, minmax(min-content, 1fr)); }
.stage-ledger .lg b { font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: .85; letter-spacing: -.01em; white-space: nowrap; }
.stage-ledger .lg span { font-size: 13px; color: #A9B4C8; }
.stage-ledger .hit.on { border-top-color: #D9BE86; }
.p-kept .dot.s3 { background: #D9BE86; box-shadow: 0 0 0 5px rgba(217,190,134,.18), 0 0 22px rgba(217,190,134,.5); }
.stage-deck { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); border-radius: 16px; }
.card-fit { font-family: var(--font-display); font-weight: 600; font-size: 60px; line-height: .78; letter-spacing: -.01em; }
.card-title { font-size: 19px; }
.card-tag { border-color: rgba(217,190,134,.5); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }
.cl .mark { border-radius: 999px; padding: 3px 9px; font-size: 11.5px; letter-spacing: 0; text-transform: none; }
.cl { padding: 8px 0; }
.cl i { font-family: var(--font-display); font-size: 17.5px; line-height: 1.3; }
.cl .ev { font-size: 13px; color: #A9B4C8; }
.card-foot { font-size: 13px; color: #A9B4C8; }

/* ---------------------------------------------------------------- numbers and quoted lines
   a number of 40px and up is set in the serif; a posting's own words are the serif's italic */
.fw-fit, .fw-stat b, .fw-path__big, .stat b, .card .fit, .res-row .fitn, .res-row .would, .res-score b, .co-stats b, .spark-card b,
.rb-near__group > summary b, .ready-num b { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
.fw-fit { font-size: 44px; line-height: .85; }
.fw-fit--xl { font-size: var(--fw-fit-xl); line-height: .8; }
.fw-card--wide .fw-fit { font-size: 48px; }
.rb-near__row .fw-fit { font-size: 40px; line-height: .9; }
.fw-stat b, .fw-path__big { font-size: 44px; line-height: .9; }
.stat b, .co-stats b, .spark-card b, .card .fit, .res-row .fitn, .res-row .would, .rb-near__group > summary b { font-size: 40px; line-height: .9; }
.res-score b { font-size: 64px; line-height: .85; }
.fw-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.3; }
.fw-past__h { font-size: 30px; font-weight: 500; }

/* ---------------------------------------------------------------- leftovers of the old teal */
.seg.kept, .sw.kept { box-shadow: 0 0 0 3px rgba(20,33,58,.16); }
:root[data-theme="dark"] .seg.kept, :root[data-theme="dark"] .sw.kept { box-shadow: 0 0 0 3px rgba(243,238,227,.2); }
.stage-result a { border-radius: 999px; background: #F4F5F2; color: #14213A; text-align: center; font-weight: 600; }
.stage-result a:hover { background: #FFFFFF; color: #14213A; }

/* ---------------------------------------------------------------- other scripts
   the scripts that keep their own faces have no italic: the headline's second phrase stays upright there;
   Chinese, Japanese and Korean fill the whole square of a letter, so their headline is smaller with room between the lines */
:is(html:lang(ja), html:lang(zh), html:lang(ko), html:lang(ar), html:lang(he), html:lang(hi), html:lang(mr), html:lang(bho), html:lang(bn), html:lang(gu),
    html:lang(ta), html:lang(te), html:lang(kn), html:lang(ml), html:lang(th), html:lang(am)) .poster h1 i { font-style: normal; }
:is(html:lang(ja), html:lang(zh), html:lang(ko)) .poster h1 { font-size: clamp(44px, 5.2vw, 92px); line-height: 1.14; letter-spacing: 0; }
/* the wordmark is always read left to right, its full stop last */
.nav-brand span { display: inline-block; direction: ltr; unicode-bidi: isolate; }

/* ---------------------------------------------------------------- prices: the number in the serif, its words in the sans */
.plan-card .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--color-neutral-700); }
.plan-card .plan-price .ld-mono { font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: .85; letter-spacing: -.01em; color: var(--color-text); }
.ld-price .ld-mono { font-family: var(--font-display); font-weight: 600; font-size: 1.7em; line-height: .8; letter-spacing: -.01em; }

/* a long mark ("Соответствует") gets the room it needs, and every line of the card keeps the same two columns */
.card-lines { display: grid; grid-template-columns: minmax(72px, max-content) minmax(0, 1fr); column-gap: 14px; }
.card-lines > .cl { grid-column: 1 / -1; grid-template-columns: subgrid; }