/*
 * FutureNotSet public site — tokens, base, layout and shared components.
 *
 * Source of truth: doc/design/artboards/NN-name/source.html (<style> blocks and
 * inline styles). Class names follow the artboards (.tn .ov .sr .b .b-ok .btn
 * .lnk .seg .cite .pop .sec .h2 .sub .card .ban .c-dn/.c-wi/.c-up …) so markup
 * can be pasted from a board with its inline styles lifted into classes.
 *
 * Page-area CSS lives in public/css/front/<area>.css and must use the custom
 * properties below — never hard-coded colours.
 *
 * Breakpoints (handoff board 18): 1440/1024 desktop · ≤1023 tablet ·
 * ≤767 mobile (16px gutters, compact header) · ≤359 small mobile.
 */

/* ---------------------------------------------------------------- tokens */

:root,.th-light{--bg:#ffffff;--s2:#f8f8f8;--s3:#eef0f3;--line:#e3e5ea;--line2:#c9cdd5;--ctl:#8a8f9b;--hatch2:#c3c6cd;--ink:#0a0b0d;--ink2:#5b616e;--ink3:#3f4450;--ink4:#22252b;--brand:#0052ff;--brand-h:#0040cc;--wash:#e9efff;--up:#067a46;--up-w:#e6f9f0;--dn:#df2c3a;--dn-g:#c42532;--dn-w:#feebeb;--wn-w:#fdf3e1;--wn:#7a4f08;--wn2:#4d3305;--inv2:#d6d9df}
.th-light{color-scheme:light}
.th-dark{--bg:#0a0b0d;--s2:#141519;--s3:#1e2025;--line:#282b31;--line2:#3a3e46;--ctl:#6b717d;--hatch2:#30333a;--ink:#f5f5f5;--ink2:#8a919e;--ink3:#b4b9c3;--ink4:#dfe2e7;--brand:#588cf5;--brand-h:#6d9df7;--wash:#1a2340;--up:#00d67e;--up-w:#0d2e1e;--dn:#ff616e;--dn-g:#ff616e;--dn-w:#3a1416;--wn-w:#33250c;--wn:#ffb340;--wn2:#f3d39a;--inv2:#3f4450;color-scheme:dark}
@media (prefers-color-scheme:dark){.th-system{--bg:#0a0b0d;--s2:#141519;--s3:#1e2025;--line:#282b31;--line2:#3a3e46;--ctl:#6b717d;--hatch2:#30333a;--ink:#f5f5f5;--ink2:#8a919e;--ink3:#b4b9c3;--ink4:#dfe2e7;--brand:#588cf5;--brand-h:#6d9df7;--wash:#1a2340;--up:#00d67e;--up-w:#0d2e1e;--dn:#ff616e;--dn-g:#ff616e;--dn-w:#3a1416;--wn-w:#33250c;--wn:#ffb340;--wn2:#f3d39a;--inv2:#3f4450;color-scheme:dark}}

/* Non-colour tokens (artboard 17: 8px spacing, radii, shadows). */
:root{--r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:9999px;--sh-sm:0 1px 3px rgba(0,0,0,0.06);--sh-lg:0 8px 24px rgba(0,0,0,0.12);--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--gutter:24px;--content:1200px}

/* ------------------------------------------------------------------ base */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:24px;overflow-x:clip;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
a{color:var(--brand);text-underline-offset:2px}
a:hover{color:var(--brand-h)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset,blockquote{margin:0}
h1,h2,h3,h4{font-weight:400}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
img,svg,video{max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
code,kbd,samp{font-family:var(--mono);font-size:.9em;overflow-wrap:anywhere}
[hidden]{display:none!important}

/* Progressive enhancement: the head script adds `js` to <html> before first paint. */
html:not(.js) .js-only{display:none!important}
html.js .no-js{display:none!important}

/* --------------------------------------------------------------- utilities */

.tn{font-variant-numeric:tabular-nums}
.ov{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink2)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{text-align:right}
.t{font-size:14px;line-height:20px;color:var(--ink3)}
.muted{color:var(--ink2)}
.mono{font-family:var(--mono);font-size:12.5px;line-height:18px}
.nowrap{white-space:nowrap}

/* Type scale (artboard 17). */
.h1{font-size:36px;line-height:40px;font-weight:400;letter-spacing:-0.01em;text-wrap:balance}
.h1-hero{font-size:52px;line-height:56px;font-weight:400;letter-spacing:-0.02em;text-wrap:balance}
.h2{font-size:24px;line-height:30px;font-weight:400}
.h3{font-size:18px;line-height:24px;font-weight:600}
.prob{font-size:40px;line-height:48px;font-weight:400;font-variant-numeric:tabular-nums}
.sub{font-size:16px;line-height:24px;color:var(--ink2);margin-top:8px;max-width:76ch}

/* ---------------------------------------------------------------- layout */

.wrap{width:100%;max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.page{padding-top:20px;padding-bottom:72px}
.page-home{padding-top:48px}
.page-editorial{padding-top:32px}
.sec{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column}

/* Main column + aside (date page, settled page). Aside drops below under ~1004px of content. */
.split{display:flex;flex-wrap:wrap;gap:24px 32px;align-items:flex-start}
.split-main{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:16px}
.split-aside{flex:1 1 340px;min-width:0}

.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stack{display:flex;flex-direction:column;gap:16px}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:var(--r-sm);font-weight:600;text-decoration:none}
.skip:focus{top:8px;color:var(--bg)}

/* ---------------------------------------------------------------- header */

.site-h{position:relative;background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.site-h-in{min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink);font-size:18px;line-height:24px;font-weight:600}
.logo:hover{color:var(--ink)}
.logo-mark{color:var(--ink);flex:0 0 auto}.logo-mark-a{fill:var(--brand)}
.site-h .b-demo{margin-left:-20px}
.nav{flex:1 1 auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:20px;font-weight:600;text-decoration:none;color:var(--ink2)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)}
.srch{position:relative;display:flex;align-items:center;flex:0 1 280px;min-width:0}
.srch-ic{position:absolute;left:12px;color:var(--ink2);pointer-events:none}
.srch input{width:100%;height:40px;padding:0 12px 0 38px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--s3);color:var(--ink);font-size:14px}
.srch input::placeholder{color:var(--ink2)}
.srch input:focus-visible{outline-offset:0}
.pair-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-lg);padding:6px;background:var(--bg);display:flex;flex-direction:column;max-height:min(60vh,420px);overflow-y:auto}
.pair-results:empty{display:none}
.pair-results a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:6px 10px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:14px;line-height:20px}
.pair-results a:hover,.pair-results a[aria-selected="true"]{background:var(--s2)}
.th-tg{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg);color:var(--ink);cursor:pointer}
.th-tg:hover{background:var(--s2)}
.th-tg .i-sun{display:none}
.th-dark .th-tg .i-sun{display:block}
.th-dark .th-tg .i-moon{display:none}
@media (prefers-color-scheme:dark){.th-system .th-tg .i-sun{display:block}.th-system .th-tg .i-moon{display:none}}

/* Compact (mobile) header: <details class="nav-menu"> — no JS needed. */
.nav-menu{display:none}
.nav-menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-pill);cursor:pointer;color:var(--ink)}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary:hover{background:var(--s2)}
.nav-menu .i-close{display:none}
.nav-menu[open] .i-close{display:block}
.nav-menu[open] .i-menu{display:none}
.nav-menu-p{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 16px 16px}
.nav-menu-p ul{list-style:none;margin:0;padding:0}
.nav-menu-p li a{display:flex;align-items:center;min-height:48px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--s3)}
.nav-menu-p li:last-child a{border-bottom:0}
.nav-menu-p li a[aria-current="page"]{color:var(--brand-h)}
.nav-menu-p .srch{margin-top:12px;flex:none}
.nav-menu-p .srch input{height:48px;font-size:16px}

/* ---------------------------------------------------------------- footer */

.site-f{background:var(--s2);color:var(--ink);border-top:1px solid var(--line)}
.site-f-in{padding-top:48px;padding-bottom:32px;display:flex;flex-direction:column;gap:32px}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:32px 24px}
.f-col{display:flex;flex-direction:column;gap:4px}
.f-brand{display:flex;flex-direction:column;gap:12px}
.f-name{display:flex;align-items:center;gap:8px}
.f-name{font-size:16px;line-height:20px;font-weight:600}
.f-note{font-size:14px;line-height:20px;color:var(--ink2);max-width:34ch}
.f-h{margin:0 0 4px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink2)}
.f-col a{color:var(--ink);font-size:14px;line-height:20px;padding:6px 0}
.f-col a:hover{color:var(--brand-h)}
.f-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:16px;color:var(--ink2)}

/* ------------------------------------------------------------ breadcrumbs */

.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--ink2)}
.crumbs [aria-current="page"]{color:var(--ink)}
.crumbs+*{margin-top:16px}

/* ----------------------------------------------------------------- badges */

.b{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:16px;font-weight:600;padding:4px 8px;border-radius:var(--r-xs);white-space:nowrap}
.b-ok{background:var(--up-w);color:var(--up)}
.b-warn{background:var(--wn-w);color:var(--wn)}
.b-n{background:var(--s3);color:var(--ink3)}
.b-brand{background:var(--wash);color:var(--brand-h)}
.b-demo{background:var(--ink);color:var(--bg)}
.b-line{background:var(--bg);color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line2)}
.b-dn{background:var(--dn-w);color:var(--dn-g)}
/* Status pill: same palette, pill shape with a leading dot. */
.b-pill{border-radius:var(--r-pill);padding:4px 10px 4px 8px}
.b-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ---------------------------------------------------------------- buttons */

.btn,.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);font-family:inherit;font-size:14px;line-height:20px;font-weight:600;cursor:pointer;text-decoration:none;border:1px solid var(--line2);background:var(--bg);color:var(--ink)}
.btn:hover{background:var(--s2);color:var(--ink)}
.btn-p{padding:0 20px;border-color:var(--brand);background:var(--brand);color:var(--bg)}
.btn-p:hover{background:var(--brand-h);border-color:var(--brand-h);color:var(--bg)}
.btn-lg{min-height:48px;padding:0 24px;font-size:16px}
.btn[disabled],.btn-p[disabled],.btn[aria-disabled="true"],.btn-p[aria-disabled="true"]{border-color:var(--line);background:var(--s2);color:var(--ctl);cursor:not-allowed}
.lnk{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--brand);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lnk:hover{color:var(--brand-h)}

/* ------------------------------------------------------------ form fields */

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-l,.legend{font-size:14px;line-height:20px;font-weight:600}
.legend{margin-bottom:6px}
.in,.sel{width:100%;height:48px;padding:0 14px;border:1px solid var(--ctl);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font-size:16px}
.sel{padding:0 12px}
.ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:48px;padding:0 14px;border:1px solid var(--ctl);border-radius:var(--r-sm);background:var(--bg);color:var(--ink);font-size:16px;line-height:20px;text-align:left;cursor:pointer}
.ctl>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ------------------------------------------- threshold segmented control */

.seg{display:flex;gap:4px;padding:2px;border-radius:var(--r-pill);background:var(--s3);width:max-content;max-width:100%}
.seg-o{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:44px;padding:0 14px;border-radius:var(--r-pill);font-size:14px;line-height:20px;font-weight:600;cursor:pointer;color:var(--ink);text-decoration:none;background:transparent}
a.seg-o:hover{color:var(--ink);background:var(--line)}
.seg-o.is-on,.seg-o:has(input:checked){background:var(--brand);color:var(--bg)}
.seg:has(input:checked) .seg-o.is-on:not(:has(input:checked)){background:transparent;color:var(--ink)}
.seg label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.seg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.seg-grid .seg-o{min-width:0;padding:0 8px}

/* Threshold state: the page root carries data-threshold, blocks carry data-th. */
[data-threshold="1"] [data-th]:not([data-th="1"]){display:none}
[data-threshold="5"] [data-th]:not([data-th="5"]){display:none}
[data-threshold="10"] [data-th]:not([data-th="10"]){display:none}
[data-threshold="50"] [data-th]:not([data-th="50"]){display:none}

/* ------------------------------------------------------- cards and panels */

.card{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--bg);min-width:0}
.panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.box{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tile{background:var(--s2);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 16px}
.card-t{font-size:18px;line-height:24px;font-weight:600}

/* Banners: info (wash), warn, inverse (stored version / forecast issued). */
.ban{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-md);padding:14px 16px;font-size:14px;line-height:20px}
.ban>svg{flex:0 0 auto;margin-top:1px}
.ban-warn{background:var(--wn-w);color:var(--wn2)}
.ban-info{background:var(--wash);color:var(--ink)}
.ban-inv{background:var(--ink);color:var(--bg)}
.ban-inv a{color:var(--bg)}

/* Reference metadata: dl grid with hairline dividers. */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.meta>div{background:var(--bg);padding:12px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}

/* ------------------------------------------------------- outcome display */

.c-up{background:var(--up)}
.c-dn{background:var(--dn)}
.c-wi{background:repeating-linear-gradient(135deg,var(--ctl) 0 4px,var(--hatch2) 4px 8px)}

/* ProbabilityBar: Down / Within / Up, widths via flex-grow; slivers keep 3px. */
.obar{display:flex;gap:2px;height:16px;border-radius:var(--r-pill);overflow:hidden}
.obar>span{display:block;flex-basis:0;flex-shrink:1}
.obar>.sliver{min-width:3px}
.obar-sm{height:8px}
.olegend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-size:13px;line-height:16px;font-weight:600;color:var(--ink3)}
.olegend>span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:12px;height:12px;border-radius:2px;flex:0 0 auto}
.sw-sm{width:10px;height:10px}

/* Direction glyph: round chip with arrow; always next to a text label. */
.glyph{display:inline-flex;flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-pill);align-items:center;justify-content:center}
.glyph-lg{width:32px;height:32px}
.glyph-dn{background:var(--dn-w);color:var(--dn-g)}
.glyph-wi{background:var(--line);color:var(--ink3)}
.glyph-up{background:var(--up-w);color:var(--up)}

/* OutcomeTile (desktop) and OutcomeRow (mobile). */
.otiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.ot-h{display:flex;align-items:center;gap:8px;font-size:16px;line-height:20px;font-weight:600}
.ot-b{font-size:14px;line-height:20px;color:var(--ink2)}
.orow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--s3)}
.orow:first-child{border-top:1px solid var(--s3)}
.orow-l{flex:1 1 auto;min-width:0}
.orow-l p:first-child{font-weight:600}
.orow-p{font-size:32px;line-height:36px;font-variant-numeric:tabular-nums}

/* Small meter bar used in tables. */
.mb{display:block;margin:6px 0 0 auto;width:100%;max-width:140px;height:6px;border-radius:var(--r-pill);background:var(--s3);overflow:hidden}
.mb>span{display:block;height:100%;min-width:2px;border-radius:var(--r-pill)}

/* Distribution fan chart fills (SVG). */
.fan80{fill:#fcefc2}
.fan50{fill:#d4e2ff}
.th-dark .fan80{fill:#3b3214}
.th-dark .fan50{fill:#1b2b52}
@media (prefers-color-scheme:dark){.th-system .fan80{fill:#3b3214}.th-system .fan50{fill:#1b2b52}}

/* ----------------------------------------------------------------- tables */

table{border-collapse:collapse;width:100%}
th{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink2);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
td{font-size:16px;line-height:24px;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
tbody th{text-transform:none;letter-spacing:0;font-size:16px;line-height:24px;font-weight:600;color:var(--ink);padding:14px 16px;vertical-align:top;white-space:normal}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
th.num{text-align:right}
caption{caption-side:top;text-align:left;font-size:14px;line-height:20px;color:var(--ink2);padding:0 0 8px}
/* Only table boxes may scroll horizontally — never the page. */
.tbl{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl:focus-visible{outline-offset:0}
.tc th,.tc td{padding:8px 10px;font-size:14px;line-height:20px}
tr.is-sel,tr.is-sel td,tr.is-sel th{background:var(--wash)}

/* -------------------------------------------------- citations and popover */

.cite{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;margin-left:2px;border-radius:var(--r-xs);border:1px solid var(--line2);background:var(--bg);color:var(--brand-h);font-family:inherit;font-size:12px;line-height:1;font-weight:700;cursor:pointer;vertical-align:2px;text-decoration:none}
.cite:hover{color:var(--brand-h);background:var(--s2)}
.pop{margin-top:4px;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;background:var(--bg);box-shadow:var(--sh-sm);font-size:14px;line-height:20px;display:flex;flex-direction:column;gap:4px}
:target{scroll-margin-top:16px}

/* ------------------------------------------------------------- responsive */

@media (max-width:1023px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:767px){
  :root{--gutter:16px}
  .page{padding-top:16px;padding-bottom:48px}
  .page-home{padding-top:28px}
  .page-editorial{padding-top:24px}
  .sec{margin-top:40px;padding-top:32px}
  .h1{font-size:28px;line-height:34px}
  .h1-hero{font-size:32px;line-height:38px;letter-spacing:-0.01em}
  .h2{font-size:22px;line-height:28px}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .panel{padding:16px;gap:16px}
  .card{padding:16px}

  /* Compact header: logo · theme toggle · menu. */
  .site-h-in{gap:8px;min-height:56px;padding-left:16px;padding-right:8px}
  .site-h-in>.nav,.site-h-in>.srch{display:none}
  .logo{font-size:17px;gap:8px}
  .site-h .b-demo{margin-left:0}
  .th-tg{margin-left:auto;width:44px;height:44px;border:0;background:none}
  .nav-menu{display:block}

  .site-f-in{padding-top:32px;padding-bottom:24px;gap:24px}
  .seg-m{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
  .seg-m .seg-o{min-width:0;padding:0 8px}
}

@media (max-width:359px){
  .h1{font-size:26px;line-height:32px}
  .h1-hero{font-size:28px;line-height:34px}
  .prob{font-size:28px;line-height:34px}
  .orow-p{font-size:28px;line-height:32px}
  .seg-o{font-size:13px}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}