:root {
  --ink:       #0B1B2B;
  --ink-2:     #15293D;
  --ink-soft:  #46586E;
  --muted:     #6A7A90;
  --paper:     #EDF1F7;
  --paper-2:   #E2E8F1;
  --bg:        #FAFCFE;
  --white:     #FFFFFF;
  --line:      rgba(13, 33, 64, 0.145);
  --line-2:    rgba(13, 33, 64, 0.08);

  --lime:       #D4F542;   
  --accent:     #D4F542;   
  --accent-2:   #C2E832;   
  --accent-ink: #0B1B2B;

  --ok:        #1F8A5B;  --ok-tint:     #DDF1E7;
  --warn:      #B8860B;  --warn-tint:   #FBF0CF;
  --danger:    #C2410C;  --danger-tint: #FBE1D5;
  --info:      #2563EB;  --info-tint:   #E6EDFD;

  --tint-mint: #D6F3E4;  --tint-sky: #DCEBFB;   --tint-lavender: #E5DFFA;
  --tint-peach:#FBE3D2;  --tint-citron:#ECF5B4; --tint-rose: #F7DDE3;
  --tint-sand: #EDE8D8;  --tint-stone: #E6E7E3;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px;

  --container: 1320px;
  --container-wide: 1560px;
  --container-narrow: 860px;
  --pad-x: clamp(16px, 3.4vw, 40px);
  --section-y: clamp(48px, 5.5vw, 88px);

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shadow-sm: 0 8px 22px -14px rgba(11,27,43,0.30);
  --shadow:    0 20px 44px -22px rgba(11,27,43,0.26);
  --shadow-lg: 0 34px 76px -28px rgba(11,27,43,0.32);

  --z-header: 60; --z-menu: 70; --z-drawer: 80; --z-modal: 90; --z-toast: 100;

  --brand:      #0B1B2B;
  --brand-ink:  #15293D;
  --brand-tint: #E7EAEF;
  --brand-soft: rgba(11,27,43,0.08);
  --brand-on:   #FFFFFF;             
  --brand-on-soft: rgba(255,255,255,0.72);
  --brand-hover: var(--brand-ink);   
  --font-num: var(--font);
}


[data-product="dr"], .p-dr { --brand:#0B1B2B; --brand-ink:#15293D; --brand-tint:#E7EAEF; --brand-soft:rgba(11,27,43,0.08);   --brand-on:#fff; --accent:#D4F542; --accent-2:#C2E832; /* lime */ }
[data-product="dh"], .p-dh { --brand:#1F1B1A; --brand-ink:#302928; --brand-tint:#E6E6E6; --brand-soft:rgba(31,27,26,0.12);   --brand-on:#fff; --accent:#D4F542; --accent-2:#C2E832; /* lime */ }
[data-product="ct"], .p-ct { --brand:#2563EB; --brand-ink:#1B4ED0; --brand-tint:#E6EDFD; --brand-soft:rgba(37,99,235,0.10);  --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="td"], .p-td { --brand:#0B7AB9; --brand-ink:#096192; --brand-tint:#DCEEF8; --brand-soft:rgba(11,122,185,0.12);  --brand-on:#fff; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
[data-product="ch"], .p-ch { --brand:#7145D6; --brand-ink:#5F35C1; --brand-tint:#EAE3FB; --brand-soft:rgba(113,69,214,0.10); --brand-on:#fff; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
[data-product="pt"], .p-pt { --brand:#3730A3; --brand-ink:#2A2483; --brand-tint:#E5E4F6; --brand-soft:rgba(55,48,163,0.12);   --brand-on:#fff; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
[data-product="rt"], .p-rt { --brand:#EA6316; --brand-ink:#C24E08; --brand-tint:#FDE9DD; --brand-soft:rgba(234,99,22,0.16);  --brand-on:#fff; --brand-hover:#D55810; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
[data-product="sm"], .p-sm { --brand:#F2B705; --brand-ink:#916D00; --brand-tint:#FDF5DC; --brand-soft:rgba(242,183,5,0.16);  --brand-on:#0B1B2B; --brand-on-soft:rgba(11,27,43,0.72); --brand-hover:#E0A800; --accent:#FFF0A8; --accent-2:#F7E68C; /* cream */ }
[data-product="ad"], .p-ad { --brand:#6A7A0D; --brand-ink:#4A5509; --brand-tint:#EDF0D4; --brand-soft:rgba(106,122,13,0.12);  --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }
[data-product="es"], .p-es { --brand:#0D5C63; --brand-ink:#0B4B51; --brand-tint:#E4EDEE; --brand-soft:rgba(13,92,99,0.12);    --brand-on:#fff; --accent:#7FF0C8; --accent-2:#66E3B7; /* mint */ }
[data-product="st"], .p-st { --brand:#0E8181; --brand-ink:#0A5C5C; --brand-tint:#D8EEEE; --brand-soft:rgba(14,134,134,0.10); --brand-on:#fff; --accent:#7FF0C8; --accent-2:#66E3B7; /* mint */ }
[data-product="tl"], .p-tl { --brand:#4B8117; --brand-ink:#375E11; --brand-tint:#E6F2D3; --brand-soft:rgba(85,146,26,0.10);  --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }
[data-product="db"], .p-db { --brand:#1C8229; --brand-ink:#166A21; --brand-tint:#DDF3DA; --brand-soft:rgba(28,130,41,0.10); --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }
[data-product="ap"], .p-ap { --brand:#0899B8; --brand-ink:#04728A; --brand-tint:#DCF2F8; --brand-soft:rgba(8,153,184,0.16);  --brand-on:#fff; --brand-hover:#0787A3; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
[data-product="ib"], .p-ib { --brand:#2B3FBF; --brand-ink:#2333A0; --brand-tint:#E4E7F8; --brand-soft:rgba(43,63,191,0.12);  --brand-on:#fff; --brand-hover:#2536AD; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="pd"], .p-pd { --brand:#4B5563; --brand-ink:#374151; --brand-tint:#E7E9ED; --brand-soft:rgba(75,85,99,0.12);   --brand-on:#fff; --brand-hover:#3F4856; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
[data-product="cb"], .p-cb { --brand:#A2BD00; --brand-ink:#6E8000; --brand-tint:#F1F6CC; --brand-soft:rgba(162,189,0,0.18);  --brand-on:#0B1B2B; --brand-on-soft:rgba(11,27,43,0.72); --brand-hover:#93AB00; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="sa"], .p-sa { --brand:#26C6B3; --brand-ink:#0C7F71; --brand-tint:#D9F5F0; --brand-soft:rgba(38,198,179,0.16); --brand-on:#0B1B2B; --brand-on-soft:rgba(11,27,43,0.72); --brand-hover:#1FB5A3; --accent:#FFF0A8; --accent-2:#F7E68C; /* cream */ }
[data-product="ph"], .p-ph { --brand:#0D8555; --brand-ink:#09603D; --brand-tint:#D9F1E5; --brand-soft:rgba(13,133,85,0.12);   --brand-on:#fff; --accent:#7FF0C8; --accent-2:#66E3B7; /* mint */ }
[data-product="wm"], .p-wm { --brand:#D53375; --brand-ink:#B92662; --brand-tint:#FADFEA; --brand-soft:rgba(213,51,117,0.12);  --brand-on:#fff; --accent:#FFB3C7; --accent-2:#F99DB6; /* blush */ }
[data-product="am"], .p-am { --brand:#3D5A80; --brand-ink:#304764; --brand-tint:#E4E9F1; --brand-soft:rgba(61,90,128,0.12);   --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="re"], .p-re { --brand:#365314; --brand-ink:#2C4410; --brand-tint:#E9ECE5; --brand-soft:rgba(54,83,20,0.12);    --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }
[data-product="tr"], .p-tr { --brand:#0E7490; --brand-ink:#0B5F76; --brand-tint:#E4F0F3; --brand-soft:rgba(14,116,144,0.12);  --brand-on:#fff; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
[data-product="ho"], .p-ho { --brand:#F0603B; --brand-ink:#C93E1B; --brand-tint:#FDE8E2; --brand-soft:rgba(240,96,59,0.16);  --brand-on:#fff; --brand-hover:#DF5230; --accent:#FFC79A; --accent-2:#F9B784; /* peach */ }
[data-product="lm"], .p-lm { --brand:#1E3A8A; --brand-ink:#193071; --brand-tint:#E6E9F2; --brand-soft:rgba(30,58,138,0.12);   --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="sp"], .p-sp { --brand:#D62828; --brand-ink:#B01F1F; --brand-tint:#FBE1E1; --brand-soft:rgba(214,40,40,0.12);  --brand-on:#fff; --brand-hover:#C42323; --accent:#FFC79A; --accent-2:#F9B784; /* peach */ }
[data-product="mu"], .p-mu { --brand:#451C86; --brand-ink:#38166E; --brand-tint:#E8E0F5; --brand-soft:rgba(69,28,134,0.12);  --brand-on:#fff; --brand-hover:#3B1774; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
[data-product="fi"], .p-fi { --brand:#0B3C5D; --brand-ink:#082E48; --brand-tint:#DFE8EF; --brand-soft:rgba(11,60,93,0.12);   --brand-on:#fff; --brand-hover:#0A3350; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
[data-product="mm"], .p-mm { --brand:#B8202F; --brand-ink:#951A26; --brand-tint:#F9DEE1; --brand-soft:rgba(184,32,47,0.12);   --brand-on:#fff; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
[data-product="ab"], .p-ab { --brand:#7B2144; --brand-ink:#651B38; --brand-tint:#F0E7EA; --brand-soft:rgba(123,33,68,0.12);   --brand-on:#fff; --accent:#FFC79A; --accent-2:#F9B784; /* peach */ }
[data-product="ds"], .p-ds { --brand:#7A1FA2; --brand-ink:#641985; --brand-tint:#F0E6F5; --brand-soft:rgba(122,31,162,0.12);  --brand-on:#fff; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
[data-product="rv"], .p-rv { --brand:#B0299F; --brand-ink:#8F2181; --brand-tint:#F5DDF2; --brand-soft:rgba(176,41,159,0.12);  --brand-on:#fff; --accent:#FFB3C7; --accent-2:#F99DB6; /* blush */ }
[data-product="zk"], .p-zk { --brand:#1D4FA8; --brand-ink:#173F85; --brand-tint:#E4EAF5; --brand-soft:rgba(29,79,168,0.12);   --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="to"], .p-to { --brand:#A11D45; --brand-ink:#7E1736; --brand-tint:#F4E4E9; --brand-soft:rgba(161,29,69,0.12);   --brand-on:#fff; --accent:#FFD166; --accent-2:#F7C24A; /* amber */ }
[data-product="bk"], .p-bk { --brand:#5B7085; --brand-ink:#4A5C6D; --brand-tint:#EBEEF0; --brand-soft:rgba(91,112,133,0.14);  --brand-on:#fff; --accent:#FFF0A8; --accent-2:#F7E68C; /* cream */ }
[data-product="vd"], .p-vd { --brand:#1B5E3F; --brand-ink:#123E2A; --brand-tint:#E4ECE8; --brand-soft:rgba(27,94,63,0.12);    --brand-on:#fff; --accent:#7FF0C8; --accent-2:#66E3B7; /* mint */ }
[data-product="dk"], .p-dk { --brand:#155E75; --brand-ink:#0F4252; --brand-tint:#E3ECEE; --brand-soft:rgba(21,94,117,0.12);   --brand-on:#fff; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
[data-product="pa"], .p-pa { --brand:#5B21B6; --brand-ink:#4A1B93; --brand-tint:#EBE4F6; --brand-soft:rgba(91,33,182,0.12);   --brand-on:#fff; --accent:#CDB8FF; --accent-2:#BBA3FA; /* lavender */ }
[data-product="fp"], .p-fp { --brand:#456F73; --brand-ink:#30575A; --brand-tint:#E7ECED; --brand-soft:rgba(69,111,115,0.14);  --brand-on:#fff; --accent:#86EDF5; --accent-2:#6BE0EA; /* aqua */ }
[data-product="mp"], .p-mp { --brand:#8A4257; --brand-ink:#702E41; --brand-tint:#F0E6E9; --brand-soft:rgba(138,66,87,0.14);  --brand-on:#fff; --accent:#FFC79A; --accent-2:#F9B784; /* peach */ }
[data-product="mt"], .p-mt { --brand:#394360; --brand-ink:#252D46; --brand-tint:#E5E7EA; --brand-soft:rgba(57,67,96,0.14);   --brand-on:#fff; --accent:#8FD9FF; --accent-2:#74CCFA; /* sky */ }
[data-product="ag"], .p-ag { --brand:#5D7345; --brand-ink:#465A30; --brand-tint:#EAEDE7; --brand-soft:rgba(93,115,69,0.14);  --brand-on:#fff; --accent:#DDF56B; --accent-2:#CDEB52; /* chartreuse */ }


*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.5; letter-spacing: -0.005em;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line-2); margin: var(--sp-6) 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
svg.ic { display: inline-block; vertical-align: -0.16em; width: 1.1em; height: 1.1em; flex-shrink: 0; }  

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); text-wrap: balance; }
p { margin: 0; }
.h-display { font-size: clamp(36px, 5.2vw, 68px); font-weight: 800; letter-spacing: -0.038em; line-height: 1.02; }
.h1 { font-size: clamp(29px, 3.6vw, 46px); letter-spacing: -0.032em; }
.h2 { font-size: clamp(23px, 2.6vw, 34px); letter-spacing: -0.028em; }
.h3 { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.018em; }
.h4 { font-size: 16px; letter-spacing: -0.012em; }
.h5 { font-size: 14px; letter-spacing: -0.01em; }
.lead { font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-soft); max-width: 62ch; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12.5px; }
.text-muted { color: var(--muted); }
.text-soft { color: var(--ink-soft); }
.text-brand { color: var(--brand-ink); }
.text-ink { color: var(--ink); }   
.text-ok { color: var(--ok); } .text-warn { color: var(--warn); } .text-danger { color: var(--danger); }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1em; }
.prose a { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.prose { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.prose--lg { font-size: 18px; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: 26px; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); margin-top: 1.9em; scroll-margin-top: 96px; }
.prose h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin-top: 1.6em; scroll-margin-top: 96px; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose p + p { margin-top: 1.05em; }
.prose ul { list-style: disc; padding-left: 1.35em; }
.prose ol { list-style: decimal; padding-left: 1.35em; }  
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--brand); font-weight: 700; }
.prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); font-size: 1.12em; line-height: 1.5; color: var(--ink); letter-spacing: -0.01em; }
.prose blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: 13.5px; color: var(--muted); }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.prose img { display: block; max-width: 100%; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1.4em 0; }
.prose th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.prose code { font-family: var(--mono); font-size: .88em; padding: 2px 6px; background: var(--paper); color: var(--ink); }
.prose pre code { padding: 0; background: none; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line-2); margin: 2em 0; }
@media (max-width: 640px) { .prose table { display: block; overflow-x: auto; white-space: nowrap; } }
.prose .lead { font-size: 1.18em; color: var(--ink-soft); }
.callout { display: flex; gap: 14px; padding: 18px 20px; background: var(--brand-tint); color: var(--ink); font-size: 15px; line-height: 1.55; }
.callout svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand-ink); margin-top: 2px; }
.callout b { display: block; margin-bottom: 4px; }
.callout--muted { background: var(--paper); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 16px; height: 2px; background: var(--brand); flex-shrink: 0; }
.eyebrow--plain::before { display: none; }
.eyebrow--flush { margin: 0; }
.eyebrow--on-dark { color: rgba(255,255,255,0.55); }
.eyebrow--on-dark::before { background: var(--accent); }
.eyebrow--num::before { display: none; }
.eyebrow--num i { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--brand); font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--brand-ink); letter-spacing: 0; }

.mark { position: relative; z-index: 0; display: inline; white-space: nowrap; }
.mark::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.24em; right: -0.24em; top: 0.08em; bottom: 0.1em;
  background: var(--accent);
}
.mark--brand::before { background: var(--brand-tint); }

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(26px, 3.4vw, 48px); }
.sec-head__t { max-width: 720px; }
.sec-head__t p { color: var(--ink-soft); margin-top: 14px; }
.sec-head__aside { flex-shrink: 0; display: flex; gap: 10px; align-items: center; }
.sec-head--center { justify-content: center; text-align: center; }
.sec-head--center .sec-head__t { margin: 0 auto; }
.sec-head--tight { margin-bottom: 18px; gap: 20px; }
.sec-head--tight .sec-head__t p { margin-top: 6px; font-size: 14.5px; }
@media (max-width: 720px) { .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; } }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding: var(--section-y) 0; }
.section--tight { padding: clamp(28px, 3vw, 44px) 0; }
.section--soft { background: var(--paper); }
.section--line-b { border-bottom: 1px solid var(--line-2); }
.section--flush-b { padding-bottom: 0; }
.section--dark { background: var(--ink); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead, .section--dark p { color: rgba(255,255,255,0.68); }
.section--dark .eyebrow { color: rgba(255,255,255,0.55); }
.section--dark .eyebrow::before { background: var(--accent); }
.section--dark .sec-head__t p { color: rgba(255,255,255,0.66); }
.section--dark .logos__item { color: rgba(255,255,255,0.62); }
.section--brand { background: var(--brand); color: var(--brand-on); }
.section--brand h1, .section--brand h2, .section--brand h3 { color: var(--brand-on); }
.section--brand p, .section--brand .lead { color: var(--brand-on-soft); }
.section--brand .eyebrow { color: var(--brand-on-soft); }
.section--brand .eyebrow::before { background: var(--brand-on); }
.band { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.band__t { font-size: clamp(19px, 2.1vw, 26px); font-weight: 750; letter-spacing: -0.022em; line-height: 1.25; max-width: 38ch; }
.band__t small { display: block; font-size: 15px; font-weight: 450; color: rgba(255,255,255,0.62); margin-top: 8px; letter-spacing: 0; line-height: 1.5; }
.band__a { display: flex; gap: 10px; flex-wrap: wrap; }
.band__marks { display: flex; gap: 6px; flex-wrap: wrap; }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}
.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}
.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
@media (max-width: 1000px) { .grid > [class*="col-"] { grid-column: span 6; } .col-12 { grid-column: span 12; } }
@media (max-width: 600px)  { .grid > [class*="col-"] { grid-column: span 12; } }

.cols { display: grid; gap: var(--sp-4); }
.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 1000px) { .cols--3, .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .cols--2, .cols--3, .cols--4 { grid-template-columns: minmax(0, 1fr); } }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--xs { gap: 6px; } .stack--sm { gap: var(--sp-2); } .stack--lg { gap: var(--sp-6); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--xs { gap: var(--sp-1); } .row--sm { gap: var(--sp-2); } .row--lg { gap: var(--sp-5); } .row--xl { gap: var(--sp-6); }
.row--center { justify-content: center; } .row--baseline { align-items: baseline; }
.grow { flex: 1; min-width: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.split--wide-left { grid-template-columns: 1.4fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.6fr; }
.split--stretch { align-items: stretch; }  
.page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; margin-bottom: clamp(40px, 6vw, 80px); }
.page--left { grid-template-columns: 320px minmax(0, 1fr); }
.page--left .page__aside { order: -1; }
.page--single { grid-template-columns: minmax(0, 1fr); }
.page--single .page__aside { display: none; }
.page__main { min-width: 0; }
.page__main.prose { max-width: none; }
.page__main.prose > p, .page__main.prose > ul, .page__main.prose > ol, .page__main.prose > .lead { max-width: 74ch; }
.page__aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
.page__aside--flow { position: static; }
.pagehead { padding: 30px 0 26px; }
.pagehead .crumbs { margin-bottom: 18px; }
.pagehead h1 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.035em; line-height: 1.08; }  
.pagehead__lead { font-size: 18px; color: var(--ink-soft); max-width: 60ch; margin-top: 14px; line-height: 1.5; }
.pagehead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.toc { display: flex; flex-direction: column; border-left: 2px solid var(--line-2); }
.toc__label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 0 16px 8px; margin-left: -2px; }
.toc a { display: block; padding: 6px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); transition: color .12s ease, border-color .12s ease; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--brand-ink); border-left-color: var(--brand); font-weight: 600; }
.toc a.toc__sub { padding-left: 28px; font-size: 13px; }
.asidecard { background: #fff; border: 1px solid var(--line); padding: 20px; }
.asidecard--tint { background: var(--brand-tint); border-color: transparent; }
.asidecard--dark { background: var(--ink); color: #fff; border-color: transparent; }
.asidecard p:not([class]) { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }   
.asidecard--dark p:not([class]) { color: rgba(255,255,255,.7); }
.asidecard__label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.asidecard--dark .asidecard__label { color: rgba(255,255,255,.55); }
.asidecard__price { font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.asidecard__price small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.asidecard__list { display: flex; flex-direction: column; gap: 9px; margin: 16px 0; font-size: 14px; }
.asidecard__list li { display: flex; gap: 9px; align-items: flex-start; }
.asidecard__list svg { width: 16px; height: 16px; color: var(--brand-ink); flex-shrink: 0; margin-top: 2px; }
.asidecard--dark .asidecard__list svg { color: var(--accent); }
.asidecard > .btn { width: 100%; }
.asidecard__note { font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; }
.asidecard--dark .asidecard__note { color: rgba(255,255,255,.55); }
.asidecard__person { display: flex; align-items: center; gap: 12px; }
.asidecard__person b { display: block; font-size: 14.5px; }
.asidecard__person small { display: block; font-size: 12.5px; color: var(--muted); }
.sidelist { display: flex; flex-direction: column; }
.sidelist a { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line-2); font-size: 14px; color: var(--ink); transition: color .12s ease; }
.sidelist a:last-child { border-bottom: 0; }
.sidelist a:hover { color: var(--brand-ink); }
.sidelist a.is-active { color: var(--brand-ink); font-weight: 650; }
.sidelist .n { margin-left: auto; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); }
.sidelist .el { --el: 24px; }
.sidelist .rank { width: 30px; font-size: 13px; color: var(--muted); }
.sidelist a.is-active .rank { color: var(--brand-ink); }
.asidecard .sidelist a { padding-left: 0; padding-right: 0; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.podium__i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); position: relative; min-width: 0; }
.podium__i > div:not(.num) { min-width: 0; }
.podium__i > div:not(.num) b, .podium__i > div:not(.num) small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium--wrap .podium__i > div:not(.num) b { white-space: normal; line-height: 1.2; }  
.podium__i:has(> .avatar) { grid-template-columns: auto auto minmax(0, 1fr) auto; }  
@media (max-width: 1100px) { .podium__i > .avatar { --av: 36px; } .podium__i:has(> .avatar) .place { font-size: 24px; min-width: 32px; } }  
@media (max-width: 720px) { .podium { grid-template-columns: 1fr; } .podium__i { padding: 14px 16px; } }
.podium__i .place { font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: -0.05em; color: var(--brand-ink); line-height: 1; min-width: 38px; }
.podium__i b { display: block; font-size: 16px; font-weight: 750; letter-spacing: -0.015em; }
.podium__i small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.podium__i .num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; white-space: nowrap; }
.podium__i .num small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.podium__i--1 { border-color: var(--brand); background: var(--brand-tint); }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who b { display: block; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; }
.who small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.who b a:hover { text-decoration: underline; }
.who small .mono { font-size: 11.5px; } .who small .tag { vertical-align: 1px; margin-left: 4px; }   
.rank { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink); width: 64px; white-space: nowrap; }
.rank .delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; margin-left: 6px; color: var(--muted); vertical-align: 1px; }
.rank .delta svg { width: 10px; height: 10px; }
.rank .delta--up { color: var(--ok); } .rank .delta--down { color: var(--danger); }
.rank--top { color: var(--brand); }
.rbar { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.rbar .progress { flex: 1; }
.rbar .num { font-weight: 700; min-width: 64px; text-align: right; }
.cc { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.flag { display: inline-block; width: 20px; height: 15px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(11,27,43,0.1); flex-shrink: 0; }
.flag--lg { width: 40px; height: 30px; }
.flag--xl { width: 64px; height: 48px; }
.who .flag { width: 24px; height: 18px; }
.share { display: inline-flex; align-items: center; gap: 6px; }
.share__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); margin-right: 6px; }
.share .soc { width: 36px; height: 36px; background: var(--brand-tint); color: var(--brand-ink); }
.share .soc svg { width: 16px; height: 16px; }
.share .soc:hover { background: var(--brand); color: var(--brand-on); transform: none; }
.keyval { display: flex; flex-direction: column; }
.keyval__row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.keyval__row:last-child { border-bottom: 0; }
.keyval__k { color: var(--muted); }
.keyval__v { font-weight: 650; text-align: right; }
.spark { display: inline-block; width: 96px; height: 28px; vertical-align: middle; }
.spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spark path { fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spark .area { fill: var(--brand); opacity: .12; stroke: none; }
.spark circle { fill: var(--brand); }
.spark--wide { width: 100%; height: 36px; }
.spark--muted path { stroke: var(--muted); } .spark--muted circle { fill: var(--muted); } .spark--muted .area { fill: var(--muted); }
.spark--ok path { stroke: var(--ok); } .spark--ok circle, .spark--ok .area { fill: var(--ok); }
.spark--danger path { stroke: var(--danger); } .spark--danger circle, .spark--danger .area { fill: var(--danger); }
.tile { background: #fff; border: 1px solid var(--line); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 4px; }
.tile__l { font-size: 12.5px; color: var(--muted); }
.tile__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.tile__f { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.tile .spark { width: 100%; height: 32px; margin-top: 6px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.profile { display: flex; flex-direction: column; min-width: 0; }
.profile__head { display: flex; align-items: center; gap: 18px; min-width: 0; }
.profile__head h1, .profile__head .h1 { margin: 0; }
.profile__facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.profile__facts b { color: var(--ink); font-weight: 650; }
.avail { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.avail__head { display: flex; justify-content: space-between; font-size: 13px; }
.avail__head b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.chartframe { background: #fff; border: 1px solid var(--line); padding: 16px 18px 14px; }
.chartframe__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.chartframe__t { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.chartframe__s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.chartframe .chart { width: 100%; height: auto; }
.cc .el { --el: 22px; }
@media (max-width: 860px) { .podium { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .page, .page--left, .page--single { grid-template-columns: minmax(0, 1fr); } .page__aside { position: static; } .page--left .page__aside { order: -1; } }
@media (max-width: 860px) { .split, .split--wide-left { grid-template-columns: 1fr; } }

.appshell { display: grid; grid-template-columns: 272px 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 1080px) { .appshell { grid-template-columns: 1fr; } }

.el {
  --el: 36px;
  position: relative; display: inline-grid; place-items: center;
  width: var(--el); height: var(--el); flex-shrink: 0;
  background: var(--brand); color: var(--brand-on);
  font-family: var(--font); font-weight: 800;
  letter-spacing: -0.05em; line-height: 1;
  font-size: calc(var(--el) * 0.44);
  user-select: none;
}
.el__sym { display: block; transform: translateY(0.02em); }
.el > svg { width: 60%; height: 60%; display: block; }
.el--xs > svg { width: 70%; height: 70%; }
.el--xs { --el: 20px; letter-spacing: -0.04em; }
.el--sm { --el: 28px; }
.el--md { --el: 36px; }
.el--lg { --el: 48px; }
.el--xl { --el: 64px; }
.el--2x { --el: 96px; }
.el--tint    { background: var(--brand-tint); color: var(--brand-ink); }
.el--outline { background: transparent; color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--brand); }
.el--on-dark { background: rgba(255,255,255,0.12); color: #fff; }
.el--accent  { background: var(--lime); color: var(--accent-ink); }  

.el--cell {
  --el: 112px;
  display: grid; grid-template-rows: auto 1fr auto; place-items: stretch;
  padding: 10px 12px; text-align: left;
}
.el--cell .el__num { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; opacity: .7; }
.el--cell .el__sym { font-size: 40px; align-self: center; transform: none; }
.el--cell .el__nm  { font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lockup { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; color: var(--ink); }
.lockup__nm { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.lockup--sm .lockup__nm { font-size: 16px; }
.lockup__sub { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.topbar { background: var(--ink); color: rgba(255,255,255,0.72); font-size: 12.5px; }
.topbar__in { display: flex; align-items: center; gap: 24px; height: 36px; }
.topbar__stats { display: flex; align-items: center; min-width: 0; flex: 1; overflow: hidden; }
.topbar__track { display: flex; align-items: center; flex-shrink: 0; }
.topbar__stat { display: inline-flex; align-items: center; gap: 7px; padding-right: 16px; margin-right: 16px; border-right: 1px solid rgba(255,255,255,0.14); white-space: nowrap; }
.topbar__stats > .topbar__stat:last-child { border-right: 0; margin-right: 0; }
.topbar__stat b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; color: #fff; letter-spacing: -0.01em; }
.topbar__stat .trend { font-size: 11.5px; }
.topbar .live { display: inline-block; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 0 3px rgba(212,245,66,0.22); }
.topbar__links { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: auto; }
.topbar__links a { color: rgba(255,255,255,0.72); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar__links a:hover { color: #fff; }
.topbar__links svg { width: 14px; height: 14px; }
.topbar__links .sep { width: 1px; height: 14px; background: rgba(255,255,255,0.16); }
.topbar__links .badge { transform: translateY(-0.5px); }
.topbar--light { background: var(--paper); color: var(--ink-soft); border-bottom: 1px solid var(--line-2); }
.topbar--light .topbar__stat { border-right-color: var(--line); }
.topbar--light .topbar__stat b { color: var(--ink); }
.topbar--light .topbar__links a { color: var(--ink-soft); }
.topbar--light .topbar__links a:hover { color: var(--ink); }
.topbar--light .topbar__links .sep { background: var(--line); }
.topbar--brand { background: var(--brand); color: var(--brand-on-soft); }
.topbar--brand .topbar__stat { border-right-color: rgba(127,127,127,0.35); }
.topbar--brand .topbar__stat b, .topbar--brand .topbar__links a:hover { color: var(--brand-on); }
.topbar--brand .topbar__links a { color: var(--brand-on-soft); }
.topbar--brand .live { background: var(--brand-on); box-shadow: 0 0 0 3px rgba(127,127,127,0.25); }
.topbar--light .live { background: var(--ok); box-shadow: 0 0 0 3px rgba(31,138,91,0.18); }
.topbar--ticker .topbar__stats { mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.topbar--ticker .topbar__track { animation: topbar-run 46s linear infinite; }
.topbar--ticker:hover .topbar__track { animation-play-state: paused; }
@keyframes topbar-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .topbar__stats { overflow-x: auto; scrollbar-width: none; }
  .topbar__stats::-webkit-scrollbar { display: none; }
  .topbar__links .hide-mobile { display: none; }
}

.hdr {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(250,252,254,0.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  container-type: inline-size;
}
.hdr::before { content: ""; display: block; height: 3px; background: var(--brand); }
.hdr__in { display: flex; align-items: center; gap: 20px; height: 66px; }
.hdr__brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; color: var(--ink); position: relative; }
.hdr__name { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.hdr__brand .chev {
  width: 15px; height: 15px; padding: 3px; flex-shrink: 0;
  color: var(--brand); background: var(--brand-soft); transition: transform .22s ease;
}
.hdr__item:hover > .hdr__brand .chev { transform: rotate(180deg); }
.hdr__actions .search, .hdr__search { width: clamp(150px, 14vw, 240px); width: clamp(150px, 14cqw, 240px); flex-shrink: 1; }
.hdr__nav { display: flex; align-items: center; gap: 2px; flex: 1; margin-left: 6px; }
.hdr__item { position: relative; }
.hdr__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  font-size: 14.5px; font-weight: 550; color: var(--ink); white-space: nowrap; position: relative;
  transition: background .15s ease;
}
.hdr__link:hover { background: rgba(11,27,43,0.05); }
.hdr__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--brand); opacity: 0; transform: scaleX(0.3); transition: opacity .18s ease, transform .18s ease;
}
.hdr__link.is-active { font-weight: 700; }
.hdr__link.is-active::after, .hdr__item:hover > .hdr__link::after { opacity: 1; transform: scaleX(1); }
.hdr__link .chev {
  width: 15px; height: 15px; padding: 3px; margin-left: -1px; flex-shrink: 0;
  color: var(--brand); background: var(--brand-soft); transition: transform .22s ease;
}
.hdr__item:hover > .hdr__link .chev { transform: rotate(180deg); }
.hdr__item > .menu { top: 100%; left: 0; margin-top: 6px; }
.hdr__item:hover > .menu { opacity: 1; visibility: visible; transform: none; }
.hdr__actions { display: flex; align-items: center; gap: 9px; margin-left: auto; flex-shrink: 0; }
.hdr__burger { display: none; width: 42px; height: 42px; background: rgba(11,27,43,0.05); align-items: center; justify-content: center; }
.hdr__burger svg { width: 20px; height: 20px; }

.hdr--dark { background: var(--ink); border-bottom-color: rgba(255,255,255,0.08); }
.hdr--dark .hdr__brand, .hdr--dark .hdr__link { color: #fff; }
.hdr--dark .hdr__link:hover { background: rgba(255,255,255,0.08); }
.hdr--dark .hdr__link .chev { background: rgba(255,255,255,0.14); color: #fff; }
.hdr--dark .hdr__burger { background: rgba(255,255,255,0.1); color: #fff; }
.hdr--tint { background: var(--brand-tint); }
.hdr--tint::before { display: none; }
.hdr--static { position: static; }

@container (max-width: 900px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: inline-flex; }
  .hdr__in { height: 60px; }
  .hdr .hide-mobile { display: none !important; }
}
@container (max-width: 1120px) { .hdr .hide-tablet { display: none !important; } }
@container (max-width: 560px) {
  .hdr__in { gap: 12px; }
  .hdr__actions { gap: 6px; }
  .hdr__actions .btn:not(.keep-mobile) { display: none; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .hdr__nav { display: none; }
    .hdr__burger { display: inline-flex; }
    .hdr__in { height: 60px; }
    .hdr .hide-mobile { display: none !important; }
  }
  @media (max-width: 560px) {
    .hdr__in { gap: 12px; }
    .hdr__actions { gap: 6px; }
    .hdr__actions .btn:not(.keep-mobile) { display: none; }
  }
}

.drawer-nav { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.drawer-nav.is-open { display: block; }
.drawer-nav__veil { position: absolute; inset: 0; background: rgba(11,27,43,0.55); }
.drawer-nav__panel {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(400px, 92vw);
  background: var(--bg); display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.drawer-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.drawer-nav__body { flex: 1; overflow-y: auto; padding: 14px; }
.drawer-nav__body a { display: block; padding: 13px 12px; font-size: 16px; font-weight: 600; }
.drawer-nav__body a:hover { background: rgba(11,27,43,0.05); }
.drawer-nav__body a.is-active { background: var(--brand-tint); color: var(--brand-ink); }
.drawer-nav__foot { padding: 14px 18px; border-top: 1px solid var(--line-2); display: grid; gap: 8px; }   

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.008em; line-height: 1;
  white-space: nowrap; border: 1px solid transparent; position: relative;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:disabled, .btn.is-disabled { opacity: .45; pointer-events: none; }

.btn--brand   { background: var(--brand); color: var(--brand-on); }
.btn--brand:hover { background: var(--brand-hover); }
.btn--dark    { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); }
.btn--accent  { background: var(--accent); color: var(--accent-ink); border-color: var(--ink); }
.btn--accent:hover { background: var(--accent-2); }
.btn--soft    { background: var(--brand-tint); color: var(--brand-ink); }
.btn--soft:hover { background: var(--brand-soft); }
.btn--ghost   { background: rgba(11,27,43,0.05); color: var(--ink); }
.btn--ghost:hover { background: rgba(11,27,43,0.09); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--ink); }
.btn--danger  { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #A63608; }
.btn--danger-soft { background: var(--danger-tint); color: var(--danger); }
.btn--link    { background: none; color: var(--brand-ink); padding: 0 4px; height: auto; }
.btn--link:hover { text-decoration: underline; transform: none; }
.btn--on-dark { background: #fff; color: var(--ink); }
.btn--on-dark:hover { background: rgba(255,255,255,0.88); }
.btn--on-dark-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.28); }
.btn--on-dark-outline:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.btn--xs { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
.btn--xs svg { width: 13px; height: 13px; }
.btn--sm { height: 36px; padding: 0 15px; font-size: 13.5px; gap: 6px; }
.btn--sm svg { width: 15px; height: 15px; }
.btn .chev { width: 14px; height: 14px; margin-left: -3px; opacity: .75; transition: transform .2s ease; }
.btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn--lg svg { width: 19px; height: 19px; }
.btn--block { width: 100%; }

.btn--icon { padding: 0; width: 44px; }
.btn--icon.btn--xs { width: 28px; } .btn--icon.btn--sm { width: 36px; } .btn--icon.btn--lg { width: 52px; }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  color: var(--brand-on); animation: spin .7s linear infinite;
}
.btn--outline.is-loading::after, .btn--ghost.is-loading::after, .btn--soft.is-loading::after { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-group { display: inline-flex; }
.btn-group .btn--outline + .btn--outline { margin-left: -1px; }
.btn-group .btn:hover { transform: none; z-index: 1; }
.btn-group .btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.field { display: grid; gap: 6px; }
.field__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; color: var(--ink); letter-spacing: -0.01em;
}
.field__label .req { color: var(--danger); }
.field__label--mono { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field__hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.field__error { display: none; font-size: 12.5px; color: var(--danger); line-height: 1.4; }
.field.is-error .field__error { display: block; }
.field.is-error .input, .field.is-error .textarea, .field.is-error .select { border-color: var(--danger); }
.field.is-error .input:focus { box-shadow: 0 0 0 3px var(--danger-tint); }
.form--fill { display: flex; flex-direction: column; }
.form--fill .field--grow { flex: 1; display: flex; flex-direction: column; }
.form--fill .field--grow .textarea { flex: 1; min-height: 140px; }
.form--fill > .row:last-of-type { margin-top: auto; }
.field.is-ok .input { border-color: var(--ok); }
.field--inline { grid-template-columns: 180px 1fr; align-items: center; gap: 12px; }
@media (max-width: 600px) { .field--inline { grid-template-columns: 1fr; } }

.input, .textarea, .select {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 15px; outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:hover, .textarea:hover, .select:hover { border-color: rgba(13,33,64,0.28); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.input:disabled, .textarea:disabled, .select:disabled { background: var(--paper); color: var(--muted); cursor: not-allowed; }
.input[readonly] { background: var(--bg); }
.input--sm { height: 36px; padding: 0 12px; font-size: 14px; }
.input--lg { height: 52px; padding: 0 18px; font-size: 16px; }
.input--mono { font-family: var(--mono); font-size: 14px; }
.textarea { height: auto; min-height: 112px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.textarea--sm { min-height: 72px; }

.select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A7A90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.select--sm { height: 36px; padding: 0 36px 0 12px; font-size: 14px; }

.igroup { display: flex; align-items: stretch; }
.igroup .input { flex: 1; min-width: 0; }
.igroup__add {
  display: inline-flex; align-items: center; padding: 0 13px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 14px; color: var(--muted); white-space: nowrap;
}
.igroup__add + .input, .input + .igroup__add { margin-left: -1px; }
.igroup .btn { height: auto; }

.search {
  display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 14px; width: 100%;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.search svg { width: 17px; height: 17px; flex-shrink: 0; }
.search input { border: 0; outline: 0; background: none; width: 100%; font-size: 15px; color: var(--ink); }
.search input::placeholder { color: var(--muted); }
.search kbd { font-family: var(--mono); font-size: 10.5px; padding: 2px 6px; background: var(--paper-2); color: var(--muted); flex-shrink: 0; }
.search--sm { height: 36px; padding: 0 12px; }
.search--sm input { font-size: 14px; }
.search--lg { height: 56px; padding: 0 18px; }
.search--lg input { font-size: 16.5px; }
.search--lg svg { width: 20px; height: 20px; }

.range { display: flex; align-items: center; gap: 8px; }
.range .input { font-family: var(--mono); font-size: 14px; }
.range span { color: var(--muted); flex-shrink: 0; }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: linear-gradient(90deg, var(--brand) var(--fill, 100%), var(--paper-2) var(--fill, 100%)); outline: none; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: #fff; border: 2px solid var(--brand); box-shadow: var(--shadow-sm); cursor: grab; }
.slider::-moz-range-thumb { width: 18px; height: 18px; background: #fff; border: 2px solid var(--brand); box-shadow: var(--shadow-sm); cursor: grab; }
.slider:focus-visible { box-shadow: 0 0 0 4px var(--brand-soft); }
.slider-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.slider-wrap__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--muted); }
.slider-wrap__head b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 800; color: var(--ink); }
.slider-wrap__scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

.check, .radio {
  display: inline-flex; align-items: flex-start; gap: 10px;
  cursor: pointer; font-size: 14.5px; line-height: 1.35; position: relative; user-select: none;
}
.check input, .radio input, .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box, .radio__box {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--line); background: #fff;
  display: grid; place-items: center;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.radio__box { border-radius: 999px; }  
.check__box svg { width: 12px; height: 12px; color: var(--brand-on); opacity: 0; transition: opacity .12s ease; }
.radio__box::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--brand-on); transform: scale(0); transition: transform .14s ease; }
.check:hover .check__box, .radio:hover .radio__box { border-color: rgba(13,33,64,0.35); }
.check input:checked + .check__box, .check input.is-indeterminate + .check__box { background: var(--brand); border-color: var(--brand); }
.check input:checked + .check__box svg { opacity: 1; }
.check input.is-indeterminate + .check__box svg { opacity: 0; }
.check input.is-indeterminate + .check__box::after { content: ""; width: 9px; height: 2px; background: var(--brand-on); position: absolute; }
.radio input:checked + .radio__box { background: var(--brand); border-color: var(--brand); }
.radio input:checked + .radio__box::after { transform: scale(1); }
.check input:focus-visible + .check__box, .radio input:focus-visible + .radio__box { box-shadow: 0 0 0 3px var(--brand-soft); border-color: var(--brand); }
.check input:disabled ~ *, .radio input:disabled ~ * { opacity: .5; cursor: not-allowed; }
.check__t small, .radio__t small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.check--card, .radio--card {
  padding: 13px 14px; border: 1px solid var(--line); background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.check--card:has(input:checked), .radio--card:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; position: relative; user-select: none; }
.switch__track {
  width: 40px; height: 22px; background: var(--paper-2);
  position: relative; flex-shrink: 0; transition: background .18s ease;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #fff; box-shadow: 0 1px 3px rgba(11,27,43,0.3); transition: transform .18s ease;
}
.switch input:checked + .switch__track { background: var(--brand); box-shadow: none; }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--brand-soft); }
.switch input:disabled ~ * { opacity: .5; cursor: not-allowed; }
.switch--sm .switch__track { width: 32px; height: 18px; }
.switch--sm .switch__track::after { width: 12px; height: 12px; }
.switch--sm input:checked + .switch__track::after { transform: translateX(14px); }

.seg { display: inline-flex; padding: 3px; background: var(--paper); gap: 2px; }
.seg__btn {
  height: 32px; padding: 0 14px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.seg__btn svg { width: 15px; height: 15px; }
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.seg--sm .seg__btn { height: 28px; padding: 0 10px; font-size: 12.5px; }

.sel { position: relative; width: 100%; }
.sel__btn {
  width: 100%; height: 44px; padding: 0 40px 0 14px; text-align: left;
  border: 1px solid var(--line); background: #fff;
  font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sel__btn::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.sel__btn.is-placeholder { color: var(--muted); }
.sel__val { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel__btn:hover { border-color: rgba(13,33,64,0.28); }
.sel.is-open .sel__btn { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sel.is-open .sel__btn::after { transform: translateY(-20%) rotate(225deg); }
.sel__btn .badge { margin-left: auto; }
.sel__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-menu);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: 6px; max-height: 280px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.sel.is-open .sel__menu { opacity: 1; visibility: visible; transform: none; }
.sel__search { margin: 2px 2px 6px; }
.sel__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; font-size: 14.5px; cursor: pointer;
  transition: background .12s ease;
}
.sel__opt:hover, .sel__opt.is-focus { background: var(--paper); }
.sel__opt.is-selected { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.sel__opt .n { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sel__opt .check__box { margin: 0; }
.sel__opt .flag { flex-shrink: 0; }
.sel__val .flag { margin-right: 8px; }
.sel__val .n { margin-left: 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.sel__group { padding: 8px 10px 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sel__empty { padding: 14px 10px; color: var(--muted); font-size: 14px; text-align: center; }
.sel--sm .sel__btn { height: 36px; font-size: 14px; padding-left: 12px; }
.sel__tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }

.file {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 28px 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line); background: var(--bg);
  transition: border-color .15s ease, background .15s ease;
}
.file:hover, .file.is-drag { border-color: var(--brand); background: var(--brand-tint); }
.file svg { width: 26px; height: 26px; color: var(--brand); }
.file b { font-size: 14.5px; }
.file small { font-size: 12.5px; color: var(--muted); }
.file input { display: none; }

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.form__actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: var(--sp-2); }
.fieldset { border: 1px solid var(--line); padding: 18px 20px 20px; margin: 0; }
.fieldset legend { padding: 0 8px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  background: var(--brand-tint); color: var(--brand-ink);
}
.badge--ok     { background: var(--ok-tint); color: var(--ok); }
.badge--warn   { background: var(--warn-tint); color: var(--warn); }
.badge--danger { background: var(--danger-tint); color: var(--danger); }
.badge--info   { background: var(--info-tint); color: var(--info); }
.badge--muted  { background: rgba(11,27,43,0.07); color: var(--muted); }
.badge--accent { background: var(--accent); color: var(--accent-ink); }
.badge--solid  { background: var(--brand); color: var(--brand-on); }
.badge--pro    { background: var(--ink); color: var(--accent); }
.badge--outline { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.stamp { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.03em; color: var(--muted); padding: 4px 9px; border: 1px dashed var(--line); }
.stamp b { color: var(--ink-soft); font-weight: 600; }
.stamp .live { width: 6px; height: 6px; background: var(--ok); }
.stamp--solid { border-style: solid; background: var(--bg); }
.badge--dot::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.badge--lg { padding: 5px 11px; font-size: 11.5px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: rgba(11,27,43,0.06); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.tag--xs { padding: 2px 7px; font-size: 11px; }
.tag--brand { background: var(--brand-tint); color: var(--brand-ink); }
.tag--outline { background: transparent; border: 1px solid var(--line); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 12px;
  background: var(--brand-tint); color: var(--brand-ink);
  font-size: 13px; font-weight: 650; line-height: 1.2;
}
.chip button { display: grid; place-items: center; width: 18px; height: 18px; opacity: .6; }
.chip button:hover { opacity: 1; background: rgba(255,255,255,0.6); }
.chip svg { width: 11px; height: 11px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.chips__clear { font-size: 12.5px; font-weight: 650; color: var(--muted); padding: 0 6px; }
.chips__clear:hover { color: var(--ink); text-decoration: underline; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line); background: #fff;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill--brand.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.pill .n { font-family: var(--mono); font-size: 11.5px; opacity: .7; }
.pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pills--center { justify-content: center; }

.dot { display: inline-block; width: 7px; height: 7px; background: var(--ok); flex-shrink: 0; }
.dot--warn { background: var(--warn); } .dot--danger { background: var(--danger); }
.dot--muted { background: var(--muted); }
.dot--pulse { box-shadow: 0 0 0 0 rgba(31,138,91,0.5); animation: dotPulse 2.4s infinite; }
@keyframes dotPulse { 70% { box-shadow: 0 0 0 7px rgba(31,138,91,0); } 100% { box-shadow: 0 0 0 0 rgba(31,138,91,0); } }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }

.trend { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-weight: 700; font-size: 13px; }
.trend svg { width: 13px; height: 13px; }
.trend--up { color: var(--ok); } .trend--down { color: var(--danger); } .trend--flat { color: var(--muted); }
.trend--price-down { color: var(--ok); } .trend--price-up { color: var(--danger); }

.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--brand); color: var(--brand-on); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.count--muted { background: rgba(11,27,43,0.1); color: var(--ink-soft); }
.tablewrap { background: #fff; border: 1px solid var(--line); overflow: hidden; }
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablescroll--y { max-height: 420px; overflow-y: auto; }
.tablescroll--sm { max-height: 220px; }
.tablewrap--locked { position: relative; }
.table tr.is-locked td { filter: blur(4px); user-select: none; pointer-events: none; }
.paywall { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 22px; display: flex; justify-content: center; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 55%); pointer-events: none; }
.paywall__card { pointer-events: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 640px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.paywall__card .tile-ic { flex-shrink: 0; }
.paywall__card b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.paywall__card small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.paywall__card .btn { margin-left: auto; }
.table__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.srcline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--muted); }
.srcline b { color: var(--ink); font-weight: 600; }
.srcline .lock { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--paper); color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.srcline .lock svg { width: 12px; height: 12px; }
.lockbox { position: relative; min-height: 104px; display: flex; flex-direction: column; }
.lockbox > .code, .lockbox > pre { flex: 1; }
.lockbox__veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; background: rgba(255,255,255,0.55); backdrop-filter: blur(3px); }
.lockbox__veil > * { flex-shrink: 0; }
.lockbox__veil p { font-size: 13px; font-weight: 600; color: var(--ink); }
.lockbox > .code, .lockbox > pre { filter: blur(1.5px); user-select: none; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead th {
  text-align: left; position: sticky; top: 0; z-index: 2;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
  padding: 11px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: var(--bg); }
.table tr.is-hl td { background: var(--brand-tint); }  
.table tr.is-hl td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-selected { background: var(--brand-tint); }
.table tbody tr.is-muted td { color: var(--muted); }
.table .num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }
.table .chk { width: 40px; padding-right: 0; }
.table .actions { width: 1%; white-space: nowrap; text-align: right; }
.table--dense td { padding: 8px 12px; font-size: 13.5px; }
.table--dense thead th { padding: 9px 12px; }
.table--striped tbody tr:nth-child(even) { background: var(--bg); }
.table--lined td, .table--lined th { border-right: 1px solid var(--line-2); }
.table--lined td:last-child, .table--lined th:last-child { border-right: 0; }
.table--plain thead th { background: transparent; }

.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--ink); }
.table th .sarr { display: inline-block; width: 9px; margin-left: 5px; opacity: .35; font-family: var(--mono); }
.table th.is-sorted .sarr { opacity: 1; color: var(--brand); }

.cell-contact { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cell-contact span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.cell-contact svg { width: 13px; height: 13px; color: var(--muted); }
.cell-contact .locked { filter: blur(3.4px); user-select: none; color: var(--muted); }
.cell-geo { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 13.5px; }
.cell-geo svg { width: 14px; height: 14px; color: var(--muted); }

.rowact { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .14s ease; }
tr:hover .rowact, tr:focus-within .rowact, .rowact.is-visible { opacity: 1; }


.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: #fff; border: 1px solid var(--line); }
.toolbar__count { font-size: 14.5px; color: var(--ink-soft); }
.toolbar__count b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.toolbar__spacer { margin-left: auto; }
.toolbar--stack { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
.toolbar--sticky { position: sticky; top: 74px; z-index: 5; }
.toolbar--attached { border-bottom: 0; }
.toolbar--flush { border: 0; border-bottom: 1px solid var(--line-2); }
.toolbar__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar__row + .toolbar__row { padding-top: 10px; border-top: 1px solid var(--line-2); }
.toolbar__group { display: flex; align-items: center; gap: 8px; }
.toolbar__label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.toolbar .search { width: clamp(180px, 22vw, 280px); }

.actionbar { position: sticky; top: 70px; z-index: 6; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.actionbar__in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 58px; padding-top: 9px; padding-bottom: 9px; }
.actionbar__title { display: none; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; font-size: 14.5px; margin-right: 8px; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actionbar.is-stuck { box-shadow: 0 10px 28px -14px rgba(11,27,43,0.22); }
.actionbar.is-stuck .actionbar__title { display: inline-flex; }
.actionbar .share { margin-left: auto; }
.actionbar__sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
@media (max-width: 720px) { .actionbar { position: static; } .actionbar .share { margin-left: 0; width: 100%; } }

.filterbar { background: var(--brand-tint); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 16px 0 18px; }
.filterbar__row { display: flex; align-items: flex-end; gap: 12px 14px; flex-wrap: wrap; }
.filterbar__row + .filterbar__row { margin-top: 12px; }
.filterbar__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filterbar__label { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.filterbar__field--grow { flex: 1 1 240px; }
.filterbar__field--sm { width: 132px; } .filterbar__field--md { width: 224px; }
.filterbar .search, .filterbar .sel__btn, .filterbar .select { background: #fff; }
.filterbar .search, .filterbar .sel { width: 100%; }
.filterbar__end { margin-left: auto; display: flex; align-items: flex-end; gap: 10px; }
.filterbar__result { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(11,27,43,0.12); font-size: 13.5px; color: var(--ink-soft); }
.filterbar__result b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.filterbar__result a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11,27,43,0.25); }
.filterbar__result a:hover { text-decoration-color: currentColor; }
.filterbar__result .filterbar__dot { color: var(--muted); }
.filterbar__result-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.filterbar .slider-wrap { min-width: 240px; }
.filterbar .seg { background: rgba(255,255,255,0.7); }
@media (max-width: 720px) { .filterbar__field--sm, .filterbar__field--md { width: 100%; } .filterbar__end { margin-left: 0; width: 100%; } }

.selbar {
  position: sticky; bottom: 16px; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
}
.selbar--inline { position: static; margin: 12px; }
.selbar b { font-family: var(--mono); font-size: 15px; }
.selbar > svg { width: 19px; height: 19px; color: var(--accent); }
.selbar__hint { color: rgba(255,255,255,0.6); font-size: 13.5px; }
.selbar__sp { margin-left: auto; display: flex; gap: 9px; }

.frail { background: #fff; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.frail--sticky { position: sticky; top: 84px; }
.frail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line-2); flex-shrink: 0; }
.frail__head h2, .frail__head h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.015em; }
.frail__reset { font-size: 12.5px; font-weight: 650; color: var(--brand-ink); }
.frail__reset:hover { text-decoration: underline; }
.frail__body { padding: 6px 0 10px; }
.frail__foot { padding: 13px 15px; border-top: 1px solid var(--line-2); background: var(--bg); }
.fgroup { border-bottom: 1px solid var(--line-2); }
.fgroup:last-child { border-bottom: 0; }
.fgroup__sum { list-style: none; cursor: pointer; padding: 13px 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 700; }
.fgroup__sum::-webkit-details-marker { display: none; }
.fgroup__sum:hover { background: var(--bg); }
.fgroup__sum::after { content: ""; width: 8px; height: 8px; flex-shrink: 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s ease; }
.fgroup[open] > .fgroup__sum::after { transform: rotate(225deg) translate(-1px,-1px); }
.fgroup__n { font-family: var(--mono); font-size: 10.5px; font-weight: 600; background: var(--brand-tint); color: var(--brand-ink); padding: 2px 6px; margin-left: auto; margin-right: 4px; }
.fgroup__n:empty { display: none; }
.fgroup__body { padding: 2px 13px 14px; display: grid; gap: 1px; }
.fopt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; cursor: pointer; font-size: 13.5px; transition: background .12s ease; }
.fopt:hover { background: var(--bg); }
.fopt .check__box { margin: 0; width: 17px; height: 17px; }
.fopt.check { display: flex; font-size: 13.5px; line-height: 1.3; }
.frail__search { margin: 6px 12px 8px; width: auto; }
.frail .range { padding: 4px 8px 8px; }
.frail--w { width: 272px; }
.fopt__t { flex: 1; min-width: 0; line-height: 1.3; }
.fopt__n { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

.card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.card__head h3, .card__head h4 { font-size: 15.5px; font-weight: 750; letter-spacing: -0.015em; }
.card__body { padding: 20px; }
.card__foot { padding: 14px 20px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); }
.card--pad { padding: 20px; }
.card--tint { background: var(--brand-tint); border-color: transparent; }
.card--dark { background: var(--ink); color: #fff; border-color: rgba(255,255,255,0.12); }
.card--product { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.card__stats { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); }
.card--dark .card__head, .card--dark .card__foot { border-color: rgba(255,255,255,0.1); background: transparent; }
.card--dark h3, .card--dark h4, .card--dark .h2, .card--dark .h3, .card--dark .h4 { color: #fff; }
.card--dark p { color: rgba(255,255,255,0.65); }
.card--link { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.card--stripe { position: relative; overflow: hidden; }
.card--stripe::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.card--pastel { border-color: transparent; }
.card--pastel.mint { background: var(--tint-mint); } .card--pastel.sky { background: var(--tint-sky); }
.card--pastel.lavender { background: var(--tint-lavender); } .card--pastel.peach { background: var(--tint-peach); }
.card--pastel.citron { background: var(--tint-citron); } .card--pastel.rose { background: var(--tint-rose); }

.tile-ic { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.tile-ic svg { width: 23px; height: 23px; }
.tile-ic--dark { background: var(--ink); color: var(--accent); }
.tile-ic--glass { background: rgba(255,255,255,0.1); color: #fff; } 
.tile-ic--sm { width: 34px; height: 34px; } .tile-ic--sm svg { width: 18px; height: 18px; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
.kpis--3 { grid-template-columns: repeat(3, 1fr); }
.kpi { background: #fff; padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 6px; }
.kpi__n { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.kpi__n .u { font-size: .52em; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.kpi__l { color: var(--ink-soft); font-size: 13.5px; }
.kpi__d { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
@media (max-width: 860px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi--card { border: 1px solid var(--line); }
.kpis--dark { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); }
.kpis--dark .kpi { background: var(--ink); }
.kpis--dark .kpi__n { color: #fff; }
.kpis--dark .kpi__n .u { color: rgba(255,255,255,0.45); }
.kpis--dark .kpi__l { color: rgba(255,255,255,0.6); }
.kpis--dark .kpi__d { color: rgba(255,255,255,0.45); }
.kpis--accent .kpi__n { color: var(--accent); }

.tier { padding: 24px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; position: relative; }
.tier--hl { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tier__tag { position: absolute; top: -11px; left: 24px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: var(--brand); color: var(--brand-on); padding: 4px 10px; }
.tier__nm { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: space-between; gap: 8px; }   
.tier__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: -4px; }   
.tier__p { display: flex; align-items: baseline; gap: 6px; }
.tier__p b { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; }
.tier__p span { font-size: 13.5px; color: var(--muted); }
.tier__l { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--ink-soft); }
.tier__l li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.45; }
.tier__l svg { width: 16px; height: 16px; color: var(--brand-ink); flex-shrink: 0; margin-top: 2px; }
.tier .btn { margin-top: auto; }

.cta { background: var(--ink); color: #fff; padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta::before { content: ""; position: absolute; left: -8%; bottom: -60%; width: 46%; aspect-ratio: 1; background: radial-gradient(circle at center, var(--accent) 0%, transparent 62%); opacity: .16; pointer-events: none; }
.cta__t { position: relative; z-index: 1; max-width: 620px; }
.cta__t h2, .cta__t h3, .cta__t h4 { color: #fff; }
.cta__t p { color: rgba(255,255,255,0.68); margin-top: 12px; }
.cta__a { position: relative; z-index: 1; display: flex; gap: 11px; flex-wrap: wrap; }
.cta--brand { background: var(--brand); color: var(--brand-on); }
.cta--brand .cta__t h2 { color: var(--brand-on); }
.cta--brand .cta__t p { color: var(--brand-on-soft); }
.cta--brand .btn--on-dark { background: #fff; color: var(--brand-ink); }  
.cta--brand .btn--on-dark:hover { background: rgba(255,255,255,0.9); }
.cta--brand::before { background: radial-gradient(circle at center, #fff 0%, transparent 62%); opacity: .14; }

.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: "/"; color: var(--line); font-weight: 600; }
.crumbs .is-current { color: var(--ink); font-weight: 600; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs__tab {
  padding: 11px 14px; font-size: 14.5px; font-weight: 600; color: var(--muted);
  position: relative; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: color .15s ease;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); opacity: 0; }
.tabs__tab.is-active { color: var(--ink); }
.tabs__tab.is-active::after { opacity: 1; }
.tabs__tab .count { margin-left: 2px; }
.tabs--pill { border: 0; gap: 4px; }
.tabs--pill .tabs__tab { padding: 8px 14px; }
.tabs--pill .tabs__tab::after { display: none; }
.tabs--pill .tabs__tab.is-active { background: var(--ink); color: #fff; }
.tabs--scroll { overflow-x: auto; scrollbar-width: none; }
.tab-panel { display: none; padding-top: var(--sp-5); }
.tab-panel.is-active { display: block; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pager__info { font-size: 13.5px; color: var(--muted); font-family: var(--mono); }
.pager__list { display: flex; gap: 5px; align-items: center; }
.pager__list a, .pager__list span {
  min-width: 36px; height: 36px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.pager__list a:hover { border-color: var(--ink); }
.pager__list .is-current { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.pager__list .gap { border: 0; background: none; color: var(--muted); min-width: 20px; padding: 0; }
.pager__list a svg { width: 15px; height: 15px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: step; }
.step { position: relative; padding: 14px 14px 14px 0; border-top: 2px solid var(--line); }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--muted); display: block; margin-bottom: 8px; }
.step.is-done { border-top-color: var(--ok); }
.step.is-done::before { color: var(--ok); }
.step.is-active { border-top-color: var(--brand); }
.step.is-active::before { color: var(--brand-ink); }
.step__t { font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em; }
.step__d { font-size: 13px; color: var(--muted); margin-top: 3px; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr 1fr; } }

.menu-wrap { position: relative; display: inline-block; }
.menu {
  position: absolute; z-index: var(--z-menu); min-width: 220px; padding: 6px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu--right { right: 0; }
.menu--wide { min-width: 300px; }
.menu__label { padding: 8px 10px 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; font-size: 14px; color: var(--ink); cursor: pointer;
  transition: background .12s ease;
}
.menu__item:hover { background: var(--paper); }
.menu__item.is-active { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.menu__item svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.menu__item.is-active svg { color: var(--brand); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger svg { color: var(--danger); }
.menu__item kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.menu__item small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.menu__sep { height: 1px; background: var(--line-2); margin: 6px 4px; }
.menu__rich { display: flex; align-items: center; gap: 11px; padding: 9px 10px; }
.menu__rich:hover { background: var(--brand-tint); }
.menu__rich b { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; }
.menu__rich small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }

.menu--inline { position: static; opacity: 1; visibility: visible; transform: none; }
.menu--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; min-width: 520px; }
.menu--cols .menu__label, .menu--cols .menu__sep, .menu--cols .menu__foot { grid-column: 1 / -1; }
.menu__col { display: grid; gap: 2px; align-content: start; }
.menu__col .menu__label { grid-column: auto; }
.menu--promo { display: grid; grid-template-columns: 1fr 232px; gap: 6px 10px; min-width: 580px; }
.menu__promo {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--brand-tint); color: var(--ink);
}
.menu__promo b { font-size: 14px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; }
.menu__promo p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.menu__promo .btn { margin-top: auto; align-self: flex-start; }
.menu__promo--dark { background: var(--ink); color: #fff; }
.menu__promo--dark p { color: rgba(255,255,255,0.66); }
.menu__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding: 10px 4px 2px; border-top: 1px solid var(--line-2); }
.menu__foot a { font-size: 13px; font-weight: 650; color: var(--brand-ink); display: inline-flex; align-items: center; gap: 5px; }
.menu__foot a svg { width: 13px; height: 13px; }
.menu__foot .spacer { margin-left: auto; }
.menu__foot .text-muted { color: var(--muted); font-weight: 500; }
.menu__rich .tile-ic { width: 34px; height: 34px; }
.menu__rich .tile-ic svg { width: 18px; height: 18px; }
.menu__rich .badge { margin-left: auto; align-self: flex-start; }
.menu__rich--el .el { flex-shrink: 0; }

.hdr__item--mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-menu);
  padding: 0 var(--pad-x);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hdr__item--mega:hover > .mega, .mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega--inline { position: static; opacity: 1; visibility: visible; transform: none; padding: 0 0 4px; }
.mega__panel {
  max-width: calc(var(--container) - 2 * var(--pad-x)); margin: 8px auto 0;
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); overflow: hidden; display: grid;
}
.mega--rail .mega__panel { grid-template-columns: 296px 1fr; max-height: calc(100vh - 110px); }
.mega__rail { padding: 12px; background: var(--bg); border-right: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.mega__cat {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; color: var(--ink);
  transition: background .14s ease, box-shadow .14s ease;
}
.mega__cat:hover, .mega__cat.is-active { background: #fff; box-shadow: var(--shadow-sm); }
.mega__cat b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.15; }
.mega__cat small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.mega__cat .tile-ic { width: 36px; height: 36px; }
.mega__cat .tile-ic svg { width: 19px; height: 19px; }
.mega__cat .go { margin-left: auto; width: 12px; height: 12px; color: var(--brand); opacity: 0; transform: translateX(-3px); transition: opacity .15s ease, transform .15s ease; }
.mega__cat:hover .go, .mega__cat.is-active .go { opacity: 1; transform: none; }
.mega__panes { display: grid; padding: 24px 26px; overflow-y: auto; }
.mega__pane { grid-area: 1 / 1; opacity: 0; pointer-events: none; }
.mega__pane.is-active { opacity: 1; pointer-events: auto; transition: opacity .15s ease; }
.mega__head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.mega__head h3 { font-size: 17px; font-weight: 750; letter-spacing: -0.018em; }
.mega__head p { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; max-width: 64ch; line-height: 1.4; }
.mega__head .dot { width: 10px; height: 10px; background: var(--brand); margin-top: 6px; }
.mega__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; }
.mega__link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; color: var(--ink); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; transition: background .12s ease; }
.mega__link:hover { background: var(--brand-tint); }
.mega__link .tile-ic { width: 30px; height: 30px; }
.mega__link .tile-ic svg { width: 16px; height: 16px; }
.mega__link small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.mega__links--desc { grid-template-columns: repeat(2, 1fr); gap: 4px 12px; }
.mega__links--desc .mega__link { align-items: flex-start; padding: 10px; }
.mega__links--desc .mega__link .tile-ic { margin-top: 1px; }
.mega__link b { display: block; font-weight: 650; }
.mega__link small { line-height: 1.35; }
.mega__group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.mega__group .menu__label { padding-left: 2px; }
.mega__foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.mega__foot .spacer { margin-left: auto; }

.mega--grid .mega__panel { display: block; padding: 22px 24px; max-width: 980px; }
.mega__gridhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mega__gridhead h3 { font-size: 17px; font-weight: 750; letter-spacing: -0.018em; }
.mega__gridhead p { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mega__card {
  display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mega__card:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.mega__card b { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
.mega__card small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.mega__card .badge { margin-left: auto; }
.mega__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }

.mega--products .mega__panel { grid-template-columns: 1fr 272px; }
.mega__aside { background: var(--paper); border-left: 1px solid var(--line-2); padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 3px; }
.mega__aside .menu__label { padding-left: 2px; }
.mega__aside .menu__item { background: transparent; }
.mega__aside .menu__item:hover { background: #fff; }
.mega__note { margin-top: auto; padding: 12px 13px; background: #fff; border: 1px solid var(--line-2); font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.mega__card.is-current { border-color: var(--brand); background: var(--brand-tint); }
.mega__cur { margin-left: auto; width: 18px; height: 18px; color: var(--brand); flex-shrink: 0; }
.mega--rail.mega--products .mega__panel { grid-template-columns: 272px minmax(0, 1fr) 248px; }
.mega__rail .menu__label { padding-left: 12px; }
.mega--rail.mega--products .mega__rail .menu__label { padding-bottom: 6px; }
.mega--rail.mega--products .mega__cat small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega__grid--2 { grid-template-columns: repeat(2, 1fr); }
.mega--products .mega__card { align-items: center; }
.mega--products .mega__card small { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1100px) {
  .mega--rail .mega__panel { grid-template-columns: 260px 1fr; }
  .mega__links { grid-template-columns: repeat(2, 1fr); }
  .mega--products .mega__panel { grid-template-columns: 1fr; }
  .mega--rail.mega--products .mega__panel { grid-template-columns: 240px minmax(0, 1fr); }
  .mega__aside { border-left: 0; border-top: 1px solid var(--line-2); grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .menu--cols, .menu--promo { min-width: 0; width: 100%; grid-template-columns: 1fr; }
  .mega--rail .mega__panel, .mega--rail.mega--products .mega__panel { grid-template-columns: 1fr; max-height: none; }
  .mega__grid--2 { grid-template-columns: 1fr; }
  .mega__rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .mega__cat { flex-shrink: 0; width: auto; }
  .mega__cat small, .mega__cat .go { display: none; }
  .mega__panes { padding: 18px 16px; }
  .mega__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .mega__links, .mega__links--desc, .mega__grid { grid-template-columns: 1fr; }
}

.modal__eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 8px; }
.modal__list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; font-size: 14.5px; }
.modal__list li { display: flex; gap: 10px; align-items: flex-start; }
.modal__list svg { width: 16px; height: 16px; color: var(--brand-ink); flex-shrink: 0; margin-top: 3px; }
.modal__price { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 18px; }
.modal__price b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.modal__price span { font-size: 13.5px; color: var(--muted); }
.modal__fine { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.is-open { display: flex; }
.modal__veil { position: absolute; inset: 0; background: rgba(11,27,43,0.55); backdrop-filter: blur(2px); }
.modal__box {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px);
  background: #fff; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: modalIn .18s ease;
}
.modal__box--sm { max-width: 400px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 0; }
.modal__head h3 { font-size: 18px; letter-spacing: -0.02em; }
.modal__head p { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.modal__x { width: 34px; height: 34px; display: grid; place-items: center; background: rgba(11,27,43,0.05); flex-shrink: 0; }
.modal__x:hover { background: rgba(11,27,43,0.1); }
.modal__x svg { width: 16px; height: 16px; }
.modal__body { padding: 18px 22px; overflow-y: auto; }
.modal__foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px 20px; border-top: 1px solid var(--line-2); }

.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.drawer.is-open { display: block; }
.drawer__veil { position: absolute; inset: 0; background: rgba(11,27,43,0.45); }
.drawer__box {
  position: absolute; top: 0; right: 0; height: 100dvh; width: min(520px, 94vw);
  background: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: drawerIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes drawerIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-2); }
.drawer__head h3 { font-size: 16px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer__foot { padding: 14px 20px; border-top: 1px solid var(--line-2); display: flex; gap: 10px; justify-content: flex-end; background: var(--bg); }
.drawer__box--sm { width: min(440px, 94vw); }
.drawer__foot--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.drawer__head .badge { margin-left: 2px; }

.cartbtn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(11,27,43,0.05); color: var(--ink); flex-shrink: 0; transition: background .15s ease; }
.cartbtn:hover { background: rgba(11,27,43,0.09); }
.cartbtn svg { width: 20px; height: 20px; }
.cartbtn__n { position: absolute; top: -6px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; background: var(--brand); color: var(--brand-on); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 800; line-height: 1; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.cartbtn__n.is-zero { display: none; }
.cartbtn.is-bump .cartbtn__n { animation: cart-bump .4s ease; }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
.cartline { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.cartline:first-child { padding-top: 0; }
.cartline:last-child { border-bottom: 0; }
.cartline__body { flex: 1; min-width: 0; }
.cartline__cat { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.cartline__t { font-size: 15px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.3; }
.cartline__t a { color: inherit; } .cartline__t a:hover { color: var(--brand-ink); }
.cartline__meta { font-size: 13px; color: var(--ink-soft); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartline__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.cartline__p { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.cartsum { display: flex; flex-direction: column; gap: 8px; }
.cartsum__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-soft); }
.cartsum__row b { color: var(--ink); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.cartsum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 15px; font-weight: 700; }
.cartsum__total b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.cartsum__note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cartsum__note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--ok); }

.dsets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dsets--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dset { background: #fff; border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.dset:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: transparent; }
.dset__head { display: flex; align-items: center; gap: 12px; }
.dset__cat { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dset__t { font-size: 17px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dset__t a { color: inherit; } .dset__t a:hover { color: var(--brand-ink); }
.dset__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dset__stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.dset__stats b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 750; color: var(--ink); }
.dset__stats .live { display: inline-block; width: 6px; height: 6px; background: var(--ok); margin-right: 5px; vertical-align: 1px; }
.dset__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dset__price b { display: block; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.dset__price small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.dset__foot .btn { flex-shrink: 0; }
.is-in-cart.btn { background: var(--brand-tint); color: var(--brand-ink); pointer-events: none; }
@media (max-width: 1100px) { .dsets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dsets, .dsets--2 { grid-template-columns: minmax(0, 1fr); } }

.mask { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; white-space: nowrap; }
.th-lock { width: 12px; height: 12px; vertical-align: -1px; margin-left: 4px; color: var(--muted); }
.lockline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.lockline svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.lockline b { color: var(--ink); }

.pricer-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--tint-citron); color: var(--ink); font-size: 13px; line-height: 1.45; margin: 14px 0; }
.pricer-hint svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: #9A7400; }
.pricer-hint button, .pricer-hint a { font-weight: 700; color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
.asidecard__price-note { display: block; font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; }
.asidecard .btn + .btn { margin-top: 8px; }
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; align-items: start; }
.pdp__main { min-width: 0; }
.pdp__side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1100px) { .pdp { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; } }
@media (max-width: 960px) { .pdp { grid-template-columns: minmax(0, 1fr); } }

.buybox { background: #fff; border: 1px solid var(--line); padding: 22px 24px; }
.buybox__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.buybox__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0; margin-top: 12px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.buybox__sum span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.buybox__sum b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybox__price { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 16px 0 14px; }
.buybox__price .asidecard__price { font-size: 34px; }
.buybox__price .asidecard__price-note { margin: 6px 0 0; }
.buybox__actions { display: flex; gap: 10px; }
.buybox__actions .btn { flex: 1; }
.buybox .pricer-hint { margin: 12px 0 0; }
.buybox .asidecard__list { margin-bottom: 0; }
@media (max-width: 480px) { .buybox { padding: 18px; } .buybox__actions { flex-direction: column; } }

.picklist { display: flex; flex-direction: column; }
.picklist__body { max-height: 400px; overflow-y: scroll; padding: 4px 8px 4px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.picklist__body::-webkit-scrollbar { width: 10px; -webkit-appearance: none; }  
.picklist__body::-webkit-scrollbar-track { background: var(--paper-2); margin: 6px 2px; }
.picklist__body::-webkit-scrollbar-thumb { background: rgba(13,33,64,0.34); border: 2px solid var(--paper-2); min-height: 36px; }
.picklist__body::-webkit-scrollbar-thumb:hover { background: rgba(13,33,64,0.5); }
@supports not selector(::-webkit-scrollbar) { .picklist__body { scrollbar-width: thin; scrollbar-color: rgba(11,27,43,0.4) rgba(11,27,43,0.07); } }
.picklist__search { width: auto; margin-bottom: 6px; }
.picklist__head, .picklist__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; }
.picklist__head { padding-top: 6px; padding-bottom: 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.picklist__head .num { text-align: right; }
.picklist__row { position: relative; width: 100%; cursor: pointer; font-size: 14px; color: var(--ink); text-align: left; transition: background .12s ease; }
.picklist__row:hover { background: var(--bg); }
.picklist__row input { position: absolute; opacity: 0; width: 0; height: 0; }
.picklist__chk { width: 18px; height: 18px; border: 1.5px solid rgba(13,33,64,0.25); background: #fff; display: grid; place-items: center; transition: background .12s ease, border-color .12s ease; }
.picklist__chk svg { width: 11px; height: 11px; color: var(--brand-on); opacity: 0; }
.picklist__row:has(input:checked), .picklist__row.is-active { background: var(--brand-tint); }
.picklist__row:has(input:checked) .picklist__chk, .picklist__row.is-active .picklist__chk { background: var(--brand); border-color: var(--brand); }
.picklist__row:has(input:checked) .picklist__chk svg, .picklist__row.is-active .picklist__chk svg { opacity: 1; }
.picklist__row input:focus-visible ~ .picklist__chk { box-shadow: 0 0 0 3px var(--brand-soft); }
.picklist__nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picklist__row--all .picklist__nm { font-weight: 750; }
.picklist__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-soft); }
.picklist__p { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 750; min-width: 64px; text-align: right; }
.picklist__row--all { margin-bottom: 6px; }
.picklist.is-searching .picklist__row:not(.picklist__row--all) { display: none; }
.picklist.is-searching .picklist__row.is-match { display: grid; }
.picklist .picklist__row:has(input:checked) { display: grid; }
.picklist__empty { display: none; padding: 12px 10px; font-size: 13px; color: var(--muted); text-align: center; }
.picklist.is-searching.is-empty .picklist__empty { display: block; }
.picklist__foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px 0; font-size: 12px; color: var(--muted); }
.picklist__head { padding-right: 28px; }
.picklist__row--all { width: calc(100% - 18px); }
.actionbar .stuck-only { display: none; }
.actionbar.is-stuck .stuck-only { display: inline-flex; }

.tip { position: relative; }
.tip::after {
  content: attr(data-tip); position: absolute; z-index: var(--z-menu);
  left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.35;
  padding: 6px 10px; white-space: nowrap; pointer-events: none;
  display: none; 
}
.tip::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink); display: none;
}
.tip:hover::after, .tip:focus-visible::after, .tip:hover::before, .tip:focus-visible::before { display: block; animation: tip-in .15s ease both; }
@keyframes tip-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
.tip--b::after { bottom: auto; top: calc(100% + 8px); }
.tip--b::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom-color: var(--ink); }
.tip--b:hover::after, .tip--b:hover::before { animation-name: tip-in-b; }
@keyframes tip-in-b { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
.tip--r::after { left: auto; right: 0; transform: none; }
.tip--l::after { left: 0; transform: none; }
.tip--wrap::after { white-space: normal; width: max-content; max-width: 240px; }
.footer .tip::after, .hero--dark .tip::after { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.footer .tip::before, .hero--dark .tip::before { border-top-color: #fff; }
.footer .tip--b::before { border-top-color: transparent; border-bottom-color: #fff; }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 40px)); }
.toast {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
  font-size: 14px; line-height: 1.4; animation: toastIn .2s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast.is-leaving { opacity: 0; transition: opacity .2s ease; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }
.toast--ok svg { color: #6FD39A; } .toast--warn svg { color: #F1C453; } .toast--danger svg { color: #FF8A5C; }
.toast b { display: block; font-weight: 700; }
.toast__x { margin-left: auto; opacity: .55; flex-shrink: 0; }
.toast__x:hover { opacity: 1; }
.toast__x svg { width: 14px; height: 14px; color: #fff; margin: 0; }

.alert { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; background: var(--info-tint); color: var(--ink); border: 1px solid transparent; font-size: 14px; line-height: 1.45; }
.alert svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; color: var(--info); }
.alert b { display: block; font-weight: 700; margin-bottom: 2px; }
.alert p { color: var(--ink-soft); }
.alert__x { margin-left: auto; opacity: .5; flex-shrink: 0; }
.alert__x:hover { opacity: 1; }
.alert__x svg { width: 15px; height: 15px; color: var(--ink); margin: 0; }
.alert--ok { background: var(--ok-tint); } .alert--ok svg { color: var(--ok); }
.alert--warn { background: var(--warn-tint); } .alert--warn svg { color: var(--warn); }
.alert--danger { background: var(--danger-tint); } .alert--danger svg { color: var(--danger); }
.alert--brand { background: var(--brand-tint); } .alert--brand svg { color: var(--brand); }
.alert--outline { background: #fff; border-color: var(--line); }
.alert--dark { background: var(--ink); color: #fff; } .alert--dark p { color: rgba(255,255,255,0.7); } .alert--dark svg { color: var(--accent); }
.alert .btn { margin-left: auto; flex-shrink: 0; }

.banner { display: flex; align-items: center; gap: 12px; padding: 10px var(--pad-x); background: var(--brand); color: var(--brand-on); font-size: 14px; }
.banner svg { width: 17px; height: 17px; }
.banner a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.banner__x { margin-left: auto; opacity: .7; }
.banner__x svg { width: 15px; height: 15px; }
.banner--accent { background: var(--accent); color: var(--accent-ink); }

.empty { padding: 48px 24px; text-align: center; }
.empty__ic { width: 52px; height: 52px; margin: 0 auto 16px; background: var(--paper); color: var(--muted); display: grid; place-items: center; }
.empty__ic svg { width: 26px; height: 26px; }
.empty h3 { font-size: 17px; margin-bottom: 7px; }
.empty p { color: var(--ink-soft); font-size: 14.5px; margin: 0 auto 18px; max-width: 42ch; }

.skeleton { position: relative; overflow: hidden; background: var(--paper); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton--text { height: 14px; width: 100%; }
.skeleton--text.w-60 { width: 60%; } .skeleton--text.w-40 { width: 40%; } .skeleton--text.w-80 { width: 80%; }
.skeleton--title { height: 22px; width: 50%; }
.skeleton--block { height: 120px; }
.skeleton--avatar { width: 40px; height: 40px; }
.skeleton--btn { height: 44px; width: 140px; }

.progress { height: 8px; background: var(--paper-2); overflow: hidden; }
.progress__bar { height: 100%; background: var(--brand); transition: width .4s ease; }
.progress--sm { height: 4px; }
.progress--lg { height: 12px; }
.progress--ok .progress__bar { background: var(--ok); } .progress--warn .progress__bar { background: var(--warn); } .progress--danger .progress__bar { background: var(--danger); }
.progress-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.progress-row .progress { flex: 1; }
.progress-row .num { color: var(--ink-soft); min-width: 40px; text-align: right; }
.meter { display: flex; gap: 3px; }
.meter i { flex: 1; height: 6px; background: var(--paper-2); }
.meter i.is-on { background: var(--brand); }

.acc { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
.acc details { background: var(--bg); }
.acc details[open] { background: #fff; }
.acc summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; width: 10px; height: 10px; flex-shrink: 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-3px,-3px); transition: transform .2s ease; }
.acc details[open] summary::after { transform: rotate(225deg) translate(-2px,-2px); }
.acc__body { padding: 0 20px 18px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; max-width: 78ch; }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; text-align: left; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); cursor: pointer; transition: color .15s ease; }
.faq__q:hover { color: var(--brand-ink); }
.faq__ic { width: 28px; height: 28px; background: var(--paper); color: var(--ink); flex-shrink: 0; display: grid; place-items: center; transition: transform .2s ease, background .2s ease, color .2s ease; }
.faq__ic svg { width: 14px; height: 14px; }
.faq__item.is-open .faq__ic { background: var(--brand); color: var(--brand-on); transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 64ch; padding-bottom: 20px; }
.faq__a p + p { margin-top: -8px; }
.faq__a a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.section--dark .faq, .section--dark .faq__item { border-color: rgba(255,255,255,0.12); }
.section--dark .faq__q { color: #fff; } .section--dark .faq__a p { color: rgba(255,255,255,0.66); }

.code { background: var(--ink); color: rgba(255,255,255,0.86); padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.65; margin: 0; }
.code--sm { font-size: 11.5px; padding: 12px 14px; }
.code .c { color: rgba(255,255,255,0.42); } .code .k { color: var(--accent); } .code .s { color: #9BD1FF; } .code .n { color: #F6B26B; }
.code--light { background: var(--paper); color: var(--ink); }
.code--light .k { color: #1B4ED0; } .code--light .s { color: #0A7070; } .code--light .c { color: var(--muted); }
code.inline { font-family: var(--mono); font-size: .88em; padding: 2px 6px; background: var(--paper-2); color: var(--ink); }
kbd.key { font-family: var(--mono); font-size: 11.5px; padding: 3px 7px; border: 1px solid var(--line); border-bottom-width: 2px; background: #fff; color: var(--ink-soft); }

.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin: var(--sp-5) 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

.avatar { --av: 36px; width: var(--av); height: var(--av); flex-shrink: 0; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-ink); font-weight: 800; font-size: calc(var(--av) * .36); letter-spacing: -0.02em; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar > svg { width: 100%; height: 100%; display: block; }        
.avatar--xs { --av: 24px; } .avatar--sm { --av: 30px; } .avatar--lg { --av: 48px; } .avatar--xl { --av: 64px; }
.avatar--solid { background: var(--brand); color: var(--brand-on); }
.avatar--dark { background: var(--ink); color: var(--accent); }
.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid #fff; margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group .avatar--more { background: var(--paper-2); color: var(--ink-soft); font-size: 12px; }

.list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
.list__row { display: flex; align-items: flex-start; gap: 13px; padding: 15px 18px; background: var(--bg); }
.list__row > svg { width: 19px; height: 19px; color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.list__row b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.012em; }
.list__row small { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 3px; }
.list__row .grow { flex: 1; }
.list--plain { border: 0; background: transparent; gap: 0; }
.list--plain .list__row { background: transparent; padding: 10px 0; border-bottom: 1px solid var(--line-2); }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 14px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; font-weight: 600; }

.srcs { display: flex; flex-wrap: wrap; gap: 9px; }
.src { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.src i { width: 7px; height: 7px; background: var(--brand); }

.chart { width: 100%; height: auto; display: block; }
.chart__area { fill: var(--brand); opacity: .12; }
.chart__line { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--dashed { stroke-dasharray: 6 6; }
.chart--card { width: 100%; height: auto; background: var(--paper); padding: 12px; }
.chart__line--2 { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1.6; }
.chart__line--3 { stroke: var(--ink); stroke-width: 1.6; opacity: .6; }
.chart__grid { stroke: rgba(11,27,43,0.08); stroke-width: 1; }
.chart__ax { fill: var(--muted); font-size: 10px; font-family: var(--mono); }
.chart__dot { fill: #fff; stroke: var(--brand); stroke-width: 2.4; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; }
.bars i { flex: 1; background: var(--brand); opacity: .28; transition: opacity .15s ease; }
.bars i:last-child, .bars i.is-hl { opacity: 1; }
.bars i:hover { opacity: .7; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; background: var(--brand); }
.legend i.is-muted { background: var(--muted); } .legend i.is-accent { background: var(--accent); } .legend i.is-ink { background: var(--ink); }


.hero { padding: clamp(34px, 4.4vw, 68px) 0 clamp(30px, 4vw, 56px); position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(30px, 4.5vw, 64px); align-items: center; }
.hero__left { max-width: 640px; }
.hero__right { min-width: 0; }   
.hero__title { font-size: clamp(32px, 4.2vw, 54px); font-weight: 800; letter-spacing: -0.038em; line-height: 1.04; margin-bottom: 18px; }
.hero__lead { margin-bottom: 26px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 26px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; padding-top: 22px; border-top: 1px solid var(--line); }
.hero__trust div { font-size: 13px; color: var(--muted); line-height: 1.3; }
.hero__trust b { display: block; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.025em; }
.hero--center { text-align: center; }
.hero--center .hero__left { max-width: 760px; margin: 0 auto; }
.hero--center .hero__ctas, .hero--center .hero__trust { justify-content: center; }
.hero--center .lead { margin-left: auto; margin-right: auto; }
.hero--center .search { margin: 0 auto 22px; max-width: 620px; }
.hero--dark { background: var(--ink); color: #fff; }
.hero--dark .hero__title, .hero--dark .hero__trust b { color: #fff; }
.hero--dark .lead, .hero--dark .hero__trust div { color: rgba(255,255,255,0.66); }
.hero--dark .hero__trust { border-top-color: rgba(255,255,255,0.14); }
.hero--dark .eyebrow { color: rgba(255,255,255,0.55); }
.hero--tint { background: var(--brand-tint); }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 34px; } .hero__left { max-width: none; } }

.apphead { padding: 22px 0 0; }
.apphead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.apphead h1 { font-size: clamp(24px, 2.6vw, 33px); letter-spacing: -0.032em; }
.apphead p { margin-top: 9px; color: var(--ink-soft); font-size: 15px; max-width: 68ch; }
.apphead__aside { display: flex; gap: 9px; align-items: center; flex-shrink: 0; }

.demo { overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.demo__bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.demo__dots { display: flex; gap: 6px; }
.demo__dots i { width: 10px; height: 10px; background: var(--paper-2); }
.demo__url { flex: 1; max-width: 380px; margin: 0 auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); background: #fff; border: 1px solid var(--line-2); padding: 5px 12px; text-align: center; }
.demo__body { padding: clamp(18px, 2.2vw, 26px); }

.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ptile { grid-column: span 3; position: relative; overflow: hidden; padding: 18px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; background: var(--brand-tint); color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.ptile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ptile--wide { grid-column: span 6; min-height: 128px; flex-direction: row; align-items: center; }
.ptile--sm { grid-column: span 2; min-height: 118px; padding: 15px; }
.ptile--dark { background: var(--ink); color: #fff; }
.ptile__nm { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.ptile--sm .ptile__nm { font-size: 13.5px; }
.ptile__dm { font-family: var(--mono); font-size: 10.5px; color: var(--brand-ink); opacity: .75; margin-top: 3px; display: block; }
.ptile--dark .ptile__dm { color: rgba(255,255,255,0.6); }
.ptile__body { flex: 1; min-width: 0; }
.ptile__ds { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.4; }
.ptile__go { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; background: rgba(11,27,43,0.08); transition: background .16s ease, color .16s ease, transform .16s ease; }
.ptile__go svg { width: 15px; height: 15px; }
.ptile:hover .ptile__go { background: var(--brand); color: var(--brand-on); transform: translate(2px,-2px); }
@media (max-width: 560px) { .mosaic { grid-template-columns: repeat(2, 1fr); } .ptile, .ptile--wide, .ptile--sm { grid-column: span 1; } .ptile--wide { flex-direction: column; align-items: flex-start; } }

.prods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.prod { grid-column: span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.prod:hover { transform: translateY(-3px); border-color: transparent; box-shadow: var(--shadow); }
.prod--hero { grid-column: span 3; }
.prod::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.prod__top { display: flex; align-items: flex-start; gap: 12px; }
.prod__top .badge { margin-left: auto; }
.prod__ttl { font-size: 19px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; }
.prod__dm { display: inline-block; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--brand-ink); background: var(--brand-tint); padding: 2px 7px; }
.prod__ds { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.prod__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prod__stat { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.prod__stat b { color: var(--ink); font-weight: 700; }
.prod__go { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--brand-ink); }
.prod__go svg { width: 14px; height: 14px; transition: transform .16s ease; }
.prod:hover .prod__go svg { transform: translateX(3px); }
@media (max-width: 1100px) { .prods { grid-template-columns: repeat(4, 1fr); } .prod, .prod--hero { grid-column: span 2; } }
@media (max-width: 720px) { .prods { grid-template-columns: 1fr; } .prod, .prod--hero { grid-column: span 1; } }

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.features--3 { grid-template-columns: repeat(3, 1fr); }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid var(--ink); }
.spec--1 { grid-template-columns: 1fr; }
.spec--soft { border-top-color: var(--line); }
.spec__row { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.spec__k { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.spec__v { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.spec__v .num { font-size: 18px; font-weight: 800; }
.spec__v small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }
.spec__v .badge { margin-left: 6px; vertical-align: 2px; }
@media (max-width: 860px) { .spec { grid-template-columns: 1fr; } .spec__row { grid-template-columns: 130px 1fr; } }
.calc { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; border: 1px solid var(--line); overflow: hidden; background: #fff; }
.calc__in { padding: 28px 30px; }
.calc__out { padding: 28px 30px; background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 6px; }
.calc__price { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(38px, 4.4vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--accent); }
.calc__price small { font-size: 16px; color: rgba(255,255,255,0.6); letter-spacing: 0; margin-left: 6px; }
.calc__note { font-size: 13.5px; color: rgba(255,255,255,0.62); line-height: 1.5; }
.calc__rows { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 20px; font-size: 14px; }
.calc__rows div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed rgba(255,255,255,0.14); padding-bottom: 8px; }
.calc__rows b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.calc__in .slider-wrap { min-width: 0; margin-top: 18px; }
.calc__in .slider-wrap__head b { font-size: 26px; letter-spacing: -0.03em; }
.calc__tiers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.calc__tiers .tag.is-active { background: var(--brand-tint); color: var(--brand-ink); }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } }
.hero--board .hero__title { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.05em; font-size: clamp(40px, 6.4vw, 100px); line-height: 0.95; white-space: nowrap; }
.hero--board .hero__title small { display: block; white-space: normal; font-family: var(--font); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -0.025em; margin-top: 14px; color: var(--ink-soft); max-width: 22ch; }
.hero--board .hero__title .tick { color: var(--brand-ink); font-size: 0.42em; vertical-align: top; margin-left: 4px; letter-spacing: -0.03em; }
@media (max-width: 940px) { .hero--board .hero__title { white-space: normal; } }
.feature { padding: 26px 24px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-height: 220px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.section--soft .feature { background: #fff; }
.feature:hover { transform: none; border-color: var(--brand); box-shadow: none; }
.feature__t { font-size: 17px; font-weight: 700; letter-spacing: -0.018em; }
.feature__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.feature__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.feature--row { flex-direction: row; align-items: flex-start; min-height: 0; }
.feature--row .feature__body { display: flex; flex-direction: column; gap: 6px; }
.feature--plain { border: 0; background: transparent; padding: 0; min-height: 0; }
.feature--plain:hover { transform: none; box-shadow: none; }
@media (max-width: 980px) { .features, .features--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .features, .features--3 { grid-template-columns: 1fr; } }

.howto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.howto--3 { grid-template-columns: repeat(3, 1fr); }
.howto__step { padding: 24px 22px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.howto__n { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--brand-ink); background: var(--brand-tint); padding: 4px 9px; align-self: flex-start; margin-bottom: 8px; }
.howto__t { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 14px; }
.howto__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.howto--dark .howto__step { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }
.howto--dark .howto__n { background: var(--accent); color: var(--ink); }
.howto--dark .howto__d { color: rgba(255,255,255,0.62); }
@media (max-width: 980px) { .howto, .howto--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .howto, .howto--3 { grid-template-columns: 1fr; } }

.usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.usecase { padding: 22px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.usecase__r { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.usecase__t { font-size: 16.5px; font-weight: 700; letter-spacing: -0.018em; }
.usecase__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.usecase__p { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
@media (max-width: 940px) { .usecases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .usecases { grid-template-columns: 1fr; } }

.feed { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); overflow: hidden; }
.fitem { display: grid; grid-template-columns: 168px 1fr auto; gap: 20px; align-items: center; padding: 18px 22px; background: var(--bg); transition: background .15s ease; }
.fitem:hover { background: #fff; }
.fitem__prod { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--brand-ink); }
.fitem__ttl { font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.fitem:hover .fitem__ttl { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
.fitem__ds { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
.fitem__meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fitem__date { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 860px) { .fitem { grid-template-columns: 1fr; gap: 10px; } .fitem__meta { order: -1; } }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote { padding: 24px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.quote__t { font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.quote__t::before { content: "«"; color: var(--brand); font-weight: 800; margin-right: 2px; }
.quote__t::after { content: "»"; color: var(--brand); font-weight: 800; margin-left: 2px; }
.quote__a { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); }
.quote__a b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.quote__a small { display: block; font-size: 12.5px; color: var(--muted); }
.quote__a .el { margin-left: auto; }
.quote__num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--brand-ink); }
.quote__num small { display: block; font-family: var(--font); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); margin-top: 6px; }
.quote--result { gap: 12px; }
.quote--result .quote__t { font-size: 14.5px; color: var(--ink-soft); }
.quotes--rows { grid-template-columns: 1fr; }
.quotes--rows .quote { flex-direction: row; align-items: flex-start; gap: 24px; }
.quotes--rows .quote__t { flex: 1; font-size: 16.5px; }
.quotes--rows .quote__a { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--line-2); padding-left: 24px; min-width: 260px; }
@media (max-width: 940px) { .quotes { grid-template-columns: 1fr 1fr; } .quotes--rows { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .quotes { grid-template-columns: 1fr; } .quotes--rows .quote { flex-direction: column; } .quotes--rows .quote__a { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 14px; min-width: 0; } }

.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; }
.logos--spread { justify-content: space-between; flex: 1; }
.logos__item { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; }
.logos__item svg { width: 18px; height: 18px; }
.logos--grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.logos--grid .logos__item { justify-content: center; padding: 18px 12px; border: 1px solid var(--line-2); background: #fff; }
@media (max-width: 900px) { .logos--grid { grid-template-columns: repeat(3, 1fr); } }

.pricing__switch { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 28px; font-size: 14px; color: var(--ink-soft); }
.pricing__switch .badge { margin-left: 4px; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; } }
.compare th:first-child, .compare td:first-child { width: 36%; }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; }
.compare td svg { width: 18px; height: 18px; margin: 0 auto; color: var(--brand); }
.compare td .no { color: var(--line); }
.compare tr.group td, .table tr.group td { background: var(--paper); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 8px 14px; }
.compare th.is-hl { color: var(--brand-ink); }

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.person { padding: 22px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.person__nm { font-size: 16px; font-weight: 700; letter-spacing: -0.018em; }
.person__role { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.person__bio { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.person__links { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
@media (max-width: 980px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post { background: #fff; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.post:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow); }
.post__cover { aspect-ratio: 16 / 9; contain: size; overflow: hidden; background: var(--brand-tint); display: grid; place-items: center; color: var(--brand); position: relative; }
.post__cover svg { width: clamp(44px, 24%, 76px); height: auto; aspect-ratio: 1; }
.post__cover .badge { position: absolute; top: 12px; left: 12px; }
.post__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.post__t { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post__d { font-size: 14px; color: var(--ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post__a { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.post--wide { grid-column: span 2; flex-direction: row; }
.post--wide .post__cover { aspect-ratio: auto; width: 44%; }
.post__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post__cover--bars { display: flex; align-items: flex-end; justify-content: center; gap: 4%; padding: 16% 14% 0; }
.post__cover--bars i { display: block; flex: 1; max-width: 11%; height: var(--h, 50%); background: var(--brand); opacity: .9; }
.post__cover--bars i:nth-child(even) { opacity: .5; }
.post__cover--rows { display: flex; flex-direction: column; justify-content: center; gap: 9%; padding: 0 16%; }
.post__cover--rows i { display: block; height: 7%; background: var(--brand); opacity: .32; width: var(--w, 80%); }
.post__cover--rows i:first-child { opacity: .9; }
.post__cover--line { padding: 12% 12%; }
.post__cover--line svg { width: 100%; height: 100%; }
.post__cover--line path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.post__cover--line .area { fill: var(--brand); opacity: .14; stroke: none; }
.post__cover--num { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: var(--mono); }
.post__cover--num b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--brand-ink); }
.post__cover--num small { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.posts--2 { grid-template-columns: repeat(2, 1fr); }
.posts--4 { grid-template-columns: repeat(4, 1fr); }
.posts--rows { grid-template-columns: 1fr; gap: 12px; }
.post--row { flex-direction: row; }
.post--row .post__cover { aspect-ratio: auto; width: 240px; flex-shrink: 0; }
.post--row .post__body { padding: 16px 22px 18px; }
.post--row .post__t { font-size: 19px; }
.post--row .post__d { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.posts--compact { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-2); }
.posts--flush { border-top: 0; }
.posts--side .post--compact { padding: 10px 0; }
.posts--side .post--compact:last-child { border-bottom: 0; }
.posts--side .post__t { font-size: 14.5px; }
.post--compact { flex-direction: row; align-items: flex-start; gap: 18px; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; }
.post--compact:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
.post--compact:hover .post__t { color: var(--brand-ink); }
.post--compact .post__date { font-family: var(--mono); font-size: 11.5px; color: var(--muted); width: 72px; flex-shrink: 0; padding-top: 4px; }
.post--compact .post__body { padding: 0; gap: 5px; }
.post--compact .post__t { font-size: 16px; transition: color .15s ease; }
.post--compact .post__d { font-size: 13.5px; }
.post--compact .post__meta { margin-left: auto; flex-shrink: 0; padding-top: 4px; }
.post--compact .post__body .post__meta { margin-left: 0; padding-top: 0; }
.posts--mag { grid-template-columns: 1.35fr 1fr; align-items: start; gap: 24px; }
.posts--mag .post--lead .post__cover { aspect-ratio: 3 / 2; }
.posts--mag .post--lead .post__t { font-size: 24px; }
.posts--mag .post--lead .post__body { padding: 22px 24px 24px; }
.post--overlay { position: relative; min-height: 340px; justify-content: flex-end; border: 0; color: #fff; }
.post--overlay .post__cover { position: absolute; inset: 0; aspect-ratio: auto; background: linear-gradient(160deg, var(--brand) 0%, var(--brand-ink) 100%); color: rgba(255,255,255,0.35); align-items: start; justify-items: end; padding: 24px; }
.post--overlay .post__cover svg { width: 96px; height: 96px; opacity: .35; }
.post--overlay .post__cover .badge { top: 16px; left: 16px; }
.post--overlay .post__body { position: relative; z-index: 1; flex: 0; padding: 72px 22px 22px; background: linear-gradient(180deg, rgba(11,27,43,0) 0%, rgba(11,27,43,0.62) 100%); }
.post--overlay .post__meta, .post--overlay .post__d, .post--overlay .post__a { color: rgba(255,255,255,0.8); }
.post--overlay .post__t { color: #fff; font-size: 21px; }
.post--overlay:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
@media (max-width: 940px) { .posts, .posts--4, .posts--mag { grid-template-columns: 1fr 1fr; } .post--wide { grid-column: span 2; } .post--row .post__cover { width: 180px; } }
@media (max-width: 620px) { .posts, .posts--2, .posts--4, .posts--mag { grid-template-columns: 1fr; } .post--wide { grid-column: span 1; flex-direction: column; } .post--wide .post__cover { width: auto; aspect-ratio: 16/9; } .post--row { flex-direction: column; } .post--row .post__cover { width: auto; aspect-ratio: 16/9; } .post--compact { flex-wrap: wrap; } .post--compact .post__meta { margin-left: 0; width: 100%; } }

.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.method { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); }
.method b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.method small { display: block; font-size: 12.5px; color: var(--muted); }
.method .btn { margin-left: auto; }
.methods { display: grid; gap: 12px; }
a.method { color: var(--ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a.method:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); }
.method__ic { width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0; background: var(--paper); color: var(--ink); }
.method__ic svg { width: 22px; height: 22px; }
.method__ic--tg { background: var(--tint-sky); color: #229ED9; }
.method__ic--mail { background: var(--tint-citron); color: #9A7400; }
.method__ic--wa { background: var(--tint-mint); color: #1FA35A; }
.method__ic--phone { background: var(--tint-lavender); color: #6B4FD6; }
.method__ic--brand { background: var(--brand-tint); color: var(--brand-ink); }
.method__body { flex: 1; min-width: 0; }
.method__l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.method__v { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.method__arrow { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; transition: transform .15s ease, color .15s ease; }
a.method:hover .method__arrow { transform: translateX(3px); color: var(--brand-ink); }
.section--dark .method { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }
.section--dark .method__l { color: rgba(255,255,255,0.5); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.newsletter { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3vw, 36px); background: var(--brand-tint); }
.newsletter__t { max-width: 460px; }
.newsletter__t h3 { font-size: 20px; letter-spacing: -0.024em; }
.newsletter__t p { color: var(--ink-soft); font-size: 14.5px; margin-top: 6px; }
.newsletter .igroup { flex: 1; min-width: 300px; max-width: 460px; }
.newsletter--dark { background: var(--ink); color: #fff; }
.newsletter--dark h3 { color: #fff; }
.newsletter--dark p { color: rgba(255,255,255,0.66); }

.timeline { display: grid; gap: 0; position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 0 0 26px; }
.tl-item::before { content: ""; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; background: var(--brand); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); }
.tl-item__d { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; }
.tl-item__t { font-size: 16px; font-weight: 700; letter-spacing: -0.018em; }
.tl-item__b { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: 4px; max-width: 68ch; }

.footer { background: var(--ink); color: #fff; padding: clamp(52px, 6vw, 84px) 0 30px; margin-top: clamp(48px, 6vw, 90px); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 44px; }
.footer__about p { color: rgba(255,255,255,0.6); font-size: 14px; margin: 14px 0 20px; max-width: 320px; line-height: 1.55; }
.footer__products { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.footer__products .el { transition: box-shadow .15s ease, transform .15s ease; }
.footer__products .el:hover { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; z-index: 2; transform: translateY(-2px); }
.footer--light .footer__products .el:hover { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.soc {
  position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center;
  background: rgba(255,255,255,0.08); color: #fff; transition: background .15s ease, color .15s ease, transform .15s ease;
}
.soc svg { width: 18px; height: 18px; }
.soc--text { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
.soc:hover { background: var(--accent); color: var(--ink); transform: translateY(-2px); z-index: 2; }
.footer--light .soc { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.footer--light .soc:hover { background: var(--brand); color: var(--brand-on); border-color: transparent; }
.footer__col h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0 0 15px; }
.footer__col ul { display: flex; flex-direction: column; gap: 9px; }
.footer__col a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color .15s ease; }
.footer__col a:hover { color: #fff; }
.footer__col .badge { margin-left: 6px; transform: translateY(-1px); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: 13px; color: rgba(255,255,255,0.62); }
.footer__bottom a { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; }
.footer__links, .footer__copy { display: flex; flex-wrap: wrap; gap: 8px 24px; }   
.footer__bottom .row--sm { gap: 8px; }
.footer__bottom a:hover { color: #fff; }
.footer--light { background: var(--paper); color: var(--ink); }
.footer--light .footer__about p, .footer--light .footer__col a, .footer--light .footer__bottom { color: var(--ink-soft); }
.footer--light .footer__col h4 { color: var(--muted); }
.footer--light .footer__grid { margin-bottom: 28px; }
.footer--flush { margin-top: 0; }
.footer__mail { color: var(--accent); font-weight: 600; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.35); border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent); }  
.footer__mail:hover { border-color: var(--accent); }
.footer--light .footer__mail { color: var(--ink); border-bottom-color: rgba(11,27,43,0.3); }
.footer .lockup { color: #fff; }
[data-product="dr"] .footer .lockup .el { background: var(--lime); color: var(--accent-ink); }
.footer .el.p-dh, [data-product="dh"] .footer .lockup .el { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.3); }
.footer--light .lockup { color: var(--ink); }
.footer--light .footer__bottom { border-top-color: var(--line); }
.footer--slim .footer__grid { display: none; }
.footer--slim { padding: 28px 0; margin-top: 0; }
.footer--slim .footer__bottom { border-top: 0; padding-top: 0; }
main:has(> .section:last-child) + .footer { margin-top: 0; } 
main:has(> .section--soft:last-child) + .footer--light { margin-top: 0; border-top: 1px solid var(--line); }
@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } .footer__about { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

.p404 { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.p404__code { font-family: var(--mono); font-size: clamp(64px, 12vw, 140px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--brand-tint); -webkit-text-stroke: 2px var(--brand); }
.p404 h1 { font-size: clamp(22px, 2.6vw, 32px); margin-top: 8px; }
.p404--flat { min-height: 0; }
.p404 p { color: var(--ink-soft); margin: 12px auto 22px; max-width: 46ch; }

.hidden, [hidden] { display: none !important; }  
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-0{margin-top:0}.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}
.mb-0{margin-bottom:0}.mb-7{margin-bottom:var(--sp-7)}.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.p-0{padding:0}.p-3{padding:var(--sp-3)}.p-4{padding:var(--sp-4)}.p-5{padding:var(--sp-5)}.p-6{padding:var(--sp-6)}
.w-full{width:100%}.w-40{width:10rem}.w-44{width:11rem}.w-48{width:12rem}.w-56{width:14rem}.w-64{width:16rem}
.max-w-xs{max-width:320px}.max-w-sm{max-width:420px}.max-w-md{max-width:640px}.max-w-lg{max-width:860px}
.text-right{text-align:right}
.flex{display:flex}
.min-w-0{min-width:0}.min-w-28{min-width:7rem}.min-w-xs{min-width:280px}.w-auto{width:auto}.wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.items-baseline{align-items:baseline}.justify-between{justify-content:space-between}.self-start{align-self:flex-start}.self-center{align-self:center}
.gap-0{gap:0}.gap-1{gap:var(--sp-1)}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.gap-5{gap:var(--sp-5)}.gap-6{gap:var(--sp-6)}
.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}
.pt-0{padding-top:0}.pt-1{padding-top:var(--sp-1)}.pt-2{padding-top:var(--sp-2)}.pt-3{padding-top:var(--sp-3)}.pt-4{padding-top:var(--sp-4)}.pt-5{padding-top:var(--sp-5)}.pt-6{padding-top:var(--sp-6)}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--sp-1)}.pb-2{padding-bottom:var(--sp-2)}.pb-3{padding-bottom:var(--sp-3)}.pb-4{padding-bottom:var(--sp-4)}.pb-5{padding-bottom:var(--sp-5)}.pb-6{padding-bottom:var(--sp-6)}
.text-on-dark{color:#fff}.text-on-dark-soft{color:rgba(255,255,255,.7)}.text-on-dark-muted{color:rgba(255,255,255,.55)}.is-dim{opacity:.55}.strike{text-decoration:line-through}
.num-xl{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:30px;font-weight:800;letter-spacing:-.03em}
.nowrap{white-space:nowrap}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-600{font-weight:600}.underline{text-decoration:underline}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow)}.shadow-lg{box-shadow:var(--shadow-lg)}
.bg-paper{background:var(--paper)}.bg-white{background:#fff}.bg-ink{background:var(--ink);color:#fff}.bg-tint{background:var(--brand-tint)}.border{border:1px solid var(--line)}