/* Self-hosted Geist and Geist Mono (SIL Open Font License 1.1, see /assets/fonts/LICENSE.txt), latin and latin-ext. */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/geist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   DomoDomu · Console Blend design system
   --------------------------------------------------------------------------
   Loaded by pages stamped with <!-- dd:head {"console":true} -->.
   Porting guide, page skeleton and component catalogue: tools/DESIGN.md.

   How tone works
   - Everything is light by default. Any element with class .dark (a section,
     the nav, the footer, the drawer) re-declares the dark token set, and every
     component below reads tokens, so it renders correctly in either tone.
   - Components whose look changes in more than colour (shadows, gradients)
     carry a ".dark .x" override right next to their light rule.
   - Accent: --a is the AA-safe accent TEXT colour for the current tone,
     --a-deep is the AA-safe FILL behind white text, --hue is the raw product
     hue for glows and decoration. Set them with a product theme class
     (t-ll, t-hoa, t-px, t-pp) on <body> or on any element.

   Contents
    1. Tokens (light, dark)          12. Steps
    2. Product themes                13. Plans & pricing
    3. Base, layout, utilities       14. Tables (comparison, simple)
    4. Type                          15. Limits ("doesn't do yet")
    5. Buttons                       16. FAQ
    6. Sections, bands & tone edges  17. Related links & family cards
    7. Hero                          18. Final CTA
    8. Shell: nav, menu, drawer,     19. App-window mock kit
       footer                        20. Homepage parts (tabs, products,
    9. Cards, bento, feature rows        platform layers)
   10. Key facts                     21. Prose (long-form pages)
   11. Number strip, banner          22. Motion & print
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  color-scheme:light;
  /* surfaces */
  --bg:#FAFBFC; --bg1:#FFFFFF; --panel:#FFFFFF; --sub:#F7F8FA;
  --line:rgba(15,30,50,.08); --line2:rgba(15,30,50,.13); --grid:rgba(15,30,50,.055);
  --tint:rgba(15,30,50,.05);           /* neutral fill: muted pills, tracks */
  --tint2:rgba(15,30,50,.035);         /* fainter neutral fill */
  /* text: all AA on --bg/--bg1/--sub */
  --text:#0B1220; --muted:#475467; --dim:#5F6B7C;
  --navy:#0D2D52;
  /* product palette, tone-aware text colours (AA) and fills (AA behind white text) */
  --ll:#1767B8;  --ll-deep:#1A6FC4;
  --hoa:#1C727B; --hoa-deep:#23808A;
  --px:#4F6290;  --px-deep:#4F6290;
  --pp:#9A5C0E;  --pp-deep:#A0620F;
  /* status */
  --ok:#0B7A4B; --warn:#9A5C0E; --bad:#C2352F;
  --ok-bg:rgba(11,122,75,.08); --warn-bg:rgba(194,122,26,.10); --bad-bg:rgba(194,53,47,.08);
  /* elevation (flat in dark) */
  --sh-sm:0 1px 2px rgba(15,30,50,.05);
  --sh-md:0 1px 2px rgba(15,30,50,.04),0 6px 16px -8px rgba(15,30,50,.10);
  /* component surfaces that differ by tone */
  --nav-bg:rgba(250,251,252,.82);
  --chip-bg:#FFFFFF;                   /* ghost buttons, pills, menu button */
  --chip-hover:#F3F5F8;
  --btn-p-bg:#0B1220; --btn-p-fg:#FFFFFF; --btn-p-hover:#1E293B;
  --win-bg:#FFFFFF;
  --side-bg:#F8F9FB; --stat-bg:#FFFFFF; --mock-bg:#FFFFFF;
  --av-fg:#33465E; --av-bg:linear-gradient(135deg,#EEF2F7,#DFE6EE);
  --paper:#FFFFFF; --paper-rule:#E1E6ED; --paper-ln:#E6EAF0;
  --plan-bg:#FFFFFF;
  /* type */
  --sans:"Geist","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* layout */
  --wrap:1200px; --gutter:32px;
  --straddle:clamp(110px,15vw,210px);  /* how far a hero window hangs into the next section */
}

.dark{
  color-scheme:dark;
  --bg:#04090F; --bg1:#060D17; --panel:#0A1522; --sub:rgba(255,255,255,.02);
  --line:rgba(150,185,225,.10); --line2:rgba(150,185,225,.18); --grid:rgba(150,185,225,.10);
  --tint:rgba(255,255,255,.05); --tint2:rgba(255,255,255,.03);
  --text:#EAF0F7; --muted:#A3B1C2; --dim:#8191A6;
  --ll:#5AA6F2; --hoa:#43C3CC; --px:#9AACDA; --pp:#EBA94F;
  --ok:#55DFA2; --warn:#F3BC6A; --bad:#F58A8A;
  --ok-bg:rgba(85,223,162,.08); --warn-bg:rgba(243,188,106,.08); --bad-bg:rgba(245,138,138,.08);
  --sh-sm:0 0 #0000; --sh-md:0 0 #0000;
  --nav-bg:rgba(4,9,15,.76);
  --chip-bg:rgba(255,255,255,.03); --chip-hover:rgba(255,255,255,.07);
  --btn-p-bg:#F2F6FB; --btn-p-fg:#04090F; --btn-p-hover:#FFFFFF;
  --win-bg:linear-gradient(180deg,#0B1725,#070F1A);
  --side-bg:rgba(0,0,0,.18); --stat-bg:rgba(255,255,255,.015); --mock-bg:rgba(2,6,11,.55);
  --av-fg:#DCE7F4; --av-bg:linear-gradient(135deg,#1E3A5C,#0F2238);
  --paper:#E9EEF4; --paper-rule:#C5CFDB; --paper-ln:#CDD6E1;
  --plan-bg:linear-gradient(180deg,#0A1522,#070F1A);
  color:var(--text);
}


/* ==========================================================================
   2. PRODUCT THEMES
   Put one on <body> (the shell also puts it on the nav and drawer).
   --a-l / --a-d are the light/dark accent text colours; --a picks the right
   one for the tone it lands in. Default (no theme) is LandlordOS blue, which
   the multi-product pages (homepage, platform, company) use as the brand accent.
   ========================================================================== */
:root,.t-ll{--a-l:#1767B8;--a-d:#5AA6F2;--a-deep:#1A6FC4;--hue:#1A6FC4}
.t-hoa{--a-l:#1C727B;--a-d:#43C3CC;--a-deep:#23808A;--hue:#23808A}
.t-px {--a-l:#4F6290;--a-d:#9AACDA;--a-deep:#4F6290;--hue:#4F6290}
.t-pp {--a-l:#9A5C0E;--a-d:#EBA94F;--a-deep:#A0620F;--hue:#C27A1A}
:root,.t-ll,.t-hoa,.t-px,.t-pp{--a:var(--a-l)}
.dark,.dark.t-ll,.dark.t-hoa,.dark.t-px,.dark.t-pp,
.dark .t-ll,.dark .t-hoa,.dark .t-px,.dark .t-pp{--a:var(--a-d)}


/* ==========================================================================
   3. BASE, LAYOUT, UTILITIES
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;background:#04090F}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--a);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:820px}                      /* reading width, e.g. .wrap.narrow */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.c-dim{color:var(--dim)}
.c-muted{color:var(--muted)}
.center{text-align:center}
/* generic responsive grids: <div class="grid c3"> */
.grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:minmax(0,1fr)}}
/* hide-at-width helpers, used inside mocks */
@media (max-width:560px){.hide-xs{display:none!important}}
@media (max-width:400px){.hide-xxs{display:none!important}}

/* inline links in running text */
.lede a:not(.btn),.card p a,.qa a,.facts dd a,.subnote a,.ticks a,.rel a,.limit a,.banner a:not(.btn),.inl{
  color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--a) 55%,transparent);transition:text-decoration-color .15s}
.lede a:not(.btn):hover,.card p a:hover,.qa a:hover,.facts dd a:hover,.subnote a:hover,.ticks a:hover,.rel a:hover,.limit a:hover,.banner a:not(.btn):hover,.inl:hover{text-decoration-color:currentColor}
.lede strong,.card p strong,.qa strong,.limit strong{color:var(--text);font-weight:500}


/* ==========================================================================
   4. TYPE
   Headlines: Geist 600, tight negative tracking. Micro-labels: Geist Mono
   uppercase. One <h1> per page.
   ========================================================================== */
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--text)}
h1{font-size:clamp(2.75rem,7.2vw,5.6rem);line-height:.98;letter-spacing:-.052em}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.03;letter-spacing:-.045em}
h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.15;letter-spacing:-.035em}
.h2-sm{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.04em;line-height:1.08}
/* gradient headline text: .grad is neutral, .grad-a runs into the accent */
.grad{background:linear-gradient(180deg,#0B1220 35%,#3B4759);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-a{background:linear-gradient(95deg,#0B1220 0%,var(--a-deep) 72%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dark .grad{background-image:linear-gradient(180deg,#F7FAFD 25%,#A9B9CC)}
.dark .grad-a{background-image:linear-gradient(95deg,#F7FAFD 0%,color-mix(in srgb,var(--a) 85%,#fff) 70%)}
/* micro-label above a heading */
.kicker{display:flex;align-items:center;gap:10px;font:500 12px/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--a);margin:0 0 18px}
.kicker::before{content:"";width:18px;height:1px;background:currentColor;flex:none}
.dark .kicker::before{box-shadow:0 0 8px currentColor}
.kicker.warn{color:var(--warn)}
/* lead paragraph; .answer is the answer-first paragraph under the h1 (same look) */
.lede,.answer{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;max-width:640px;margin-top:20px}
.lede.sm{font-size:16.5px}
/* small mono label for blocks inside mocks and asides */
.mini-h{margin:0 0 10px;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
/* pill: label chip above a hero h1 */
.pill{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-sm);font-size:13.5px;color:var(--muted);max-width:100%;margin:0}
.pill b{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--a);background:color-mix(in srgb,var(--a) 9%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 26%,transparent);padding:6px 9px;border-radius:999px;white-space:nowrap}
.dark .pill b{color:#fff;background:color-mix(in srgb,var(--a-deep) 70%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 60%,transparent)}
/* chips: short mono facts under hero CTAs */
.chips{display:flex;flex-wrap:wrap;gap:8px 22px;margin:28px 0 0;padding:0;list-style:none;font:500 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.chips li{display:flex;align-items:center;gap:8px}
.chips li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 15%,transparent)}
.dark .chips li::before{box-shadow:0 0 8px var(--a)}
.subnote{margin-top:22px;font-size:14px;color:var(--dim)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 16%,transparent);flex:none;display:inline-block}
.dark .dot{box-shadow:0 0 12px var(--a)}


/* ==========================================================================
   5. BUTTONS
   .btn + one of: .btn-primary (ink, flips per tone), .btn-accent (product
   fill), .btn-ghost (outline). Size: .btn-lg. Arrow: <span class="arrow">→</span>
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:10px;font:500 14px/1.2 var(--sans);letter-spacing:-.01em;white-space:nowrap;transition:background .2s,box-shadow .2s,transform .2s;cursor:pointer;border:0;text-align:center}
.btn-lg{min-height:48px;padding:0 22px;font-size:15px}
.btn-primary{background:var(--btn-p-bg);color:var(--btn-p-fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px #0B1220,0 8px 22px -10px color-mix(in srgb,var(--hue) 70%,transparent)}
.btn-primary:hover{background:var(--btn-p-hover);transform:translateY(-1px)}
.dark .btn-primary{box-shadow:0 0 0 1px rgba(255,255,255,.25),0 10px 34px -10px color-mix(in srgb,var(--a) 80%,transparent)}
.btn-ghost{color:var(--text);background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-sm)}
.btn-ghost:hover{background:var(--chip-hover)}
.btn-accent{background:var(--a-deep);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px var(--a-deep),0 8px 22px -10px var(--a-deep)}
.btn-accent:hover{background:color-mix(in srgb,var(--a-deep) 86%,#000)}
.dark .btn-accent{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px color-mix(in srgb,var(--a) 55%,transparent),0 10px 30px -12px var(--a)}
.btn-block{width:100%}
.arrow{transition:transform .2s;display:inline-block}
a:hover>.arrow{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.center .cta-row,.cta-row.center{justify-content:center}


/* ==========================================================================
   6. SECTIONS, BANDS & TONE EDGES
   <section class="sec [alt]">  content section (120px padding): white, or off-white with .alt
   <section class="band [alt]">  shorter band that only carries a demo/table
   Only the hero, the final CTA and the footer are dark. Content sections between them alternate
   white and off-white (.alt); a .tight-top/.tight-bottom pair shares one colour.
   ========================================================================== */
main>section,main>hr.rule{background-color:var(--bg)}
.sec{padding:120px 0;position:relative}
.band{padding:96px 0;position:relative}
.sec.tight-top,.band.tight-top{padding-top:24px}         /* continue the section above */
.sec.tight-bottom,.band.tight-bottom{padding-bottom:24px}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .kicker{justify-content:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}
.sec-foot{margin-top:28px;font-size:14.5px;color:var(--muted)}
/* white / off-white rhythm, with a hairline where the two meet */
main>section:not(.dark){background-color:#FFFFFF}
main>section.alt{background-color:#F3F5F8}
main>section.alt+section:not(.alt):not(.dark),
main>section:not(.alt):not(.dark)+section.alt{box-shadow:inset 0 1px 0 var(--line)}
/* hairline between two sections of the same tone */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent);border:0;margin:0}
/* light -> dark edge: an accent hairline and a lit top edge on the dark section */
main>section:not(.dark)+section.dark{
  background-image:linear-gradient(90deg,transparent 4%,color-mix(in srgb,var(--a) 55%,transparent) 50%,transparent 96%),radial-gradient(50% 200px at 50% 0,color-mix(in srgb,var(--hue) 26%,transparent),transparent 100%);
  background-size:100% 1px,100% 100%;background-repeat:no-repeat}
/* dark -> light edge: the glow bleeds across the boundary */
main>section.dark:has(+section:not(.dark)):not(.hero){
  background-image:radial-gradient(46% 220px at 50% 100%,color-mix(in srgb,var(--hue) 24%,transparent),transparent 100%)}
main>section.dark+section:not(.dark){
  background-image:linear-gradient(90deg,transparent 4%,color-mix(in srgb,var(--a) 34%,transparent) 50%,transparent 96%),radial-gradient(46% 180px at 50% 0,color-mix(in srgb,var(--hue) 9%,transparent),transparent 100%);
  background-size:100% 1px,100% 100%;background-repeat:no-repeat}
@media (max-width:640px){
  :root{--gutter:16px}
  .sec{padding:88px 0}.band{padding:72px 0}
  .sec-head{margin-bottom:40px}
}


/* ==========================================================================
   7. HERO
   <section class="hero dark [straddle] [home|compact]"> with .hero-glow and
   .gridbg as its first children. .hero-split puts copy left, window right.
   .straddle lets the hero's .stage window hang into the next section, which
   gets the extra top padding automatically.
   ========================================================================== */
.hero{position:relative;padding:88px 0;isolation:isolate;overflow-x:clip}
.hero-glow{position:absolute;inset:-64px 0 auto;height:min(1000px,calc(100% + 64px));z-index:-1;pointer-events:none;
  background:radial-gradient(48% 42% at 50% 0%,color-mix(in srgb,var(--hue) 26%,transparent),transparent 72%),radial-gradient(28% 30% at 82% 18%,color-mix(in srgb,var(--a) 12%,transparent),transparent 70%),radial-gradient(30% 30% at 12% 30%,color-mix(in srgb,var(--hue) 9%,transparent),transparent 70%);
  animation:drift 16s ease-in-out infinite alternate}
.dark .hero-glow,.hero.dark .hero-glow{background:radial-gradient(48% 42% at 50% 0%,color-mix(in srgb,var(--hue) 55%,transparent),transparent 72%),radial-gradient(28% 30% at 82% 18%,color-mix(in srgb,var(--a) 18%,transparent),transparent 70%),radial-gradient(30% 30% at 12% 30%,rgba(13,45,82,.65),transparent 70%)}
/* the four-product glow (homepage and other multi-product pages) */
.hero-glow.family{background:radial-gradient(40% 40% at 50% 0%,rgba(26,111,196,.24),transparent 72%),radial-gradient(26% 30% at 22% 22%,rgba(35,128,138,.17),transparent 70%),radial-gradient(26% 30% at 80% 24%,rgba(79,98,144,.18),transparent 70%),radial-gradient(18% 20% at 64% 6%,rgba(194,122,26,.14),transparent 70%)}
.dark .hero-glow.family,.hero.dark .hero-glow.family{background:radial-gradient(40% 40% at 50% 0%,rgba(26,111,196,.5),transparent 72%),radial-gradient(26% 30% at 22% 22%,rgba(35,128,138,.32),transparent 70%),radial-gradient(26% 30% at 80% 24%,rgba(79,98,144,.38),transparent 70%),radial-gradient(18% 20% at 64% 6%,rgba(194,122,26,.16),transparent 70%)}
@keyframes drift{to{transform:translate3d(0,24px,0) scale(1.04)}}
/* blueprint grid, also used behind the final CTA */
.gridbg{position:absolute;inset:-64px 0 0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px;background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 75% 50% at 50% 0%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 75% 50% at 50% 0%,#000 25%,transparent 78%)}
.hero h1{margin-top:28px;max-width:960px}
.hero .pill+h1{margin-top:28px}
/* centred variant (homepage) */
.hero.home{text-align:center;padding-top:104px}
.hero.home h1{margin-left:auto;margin-right:auto;max-width:1136px;font-size:clamp(2.4rem,5vw,4.5rem)}
.hero.home .lede,.hero.home .answer{margin-left:auto;margin-right:auto}
.hero.home .cta-row,.hero.home .chips{justify-content:center}
/* smaller headline for long titles and long-form pages (policies, resources) */
.hero.compact h1{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.02}
/* copy left, window right */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.hero-split h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
.hero-split .stage{margin-top:0}
.hero-split .lede,.hero-split .answer{font-size:clamp(1rem,1.4vw,1.12rem)}
@media (max-width:960px){.hero-split{grid-template-columns:minmax(0,1fr);gap:40px}}
/* straddle: window hangs over the dark/light boundary */
.hero.straddle{z-index:2;padding-bottom:0;display:flow-root}
.hero.straddle .stage{margin-bottom:calc(var(--straddle) * -1)}
.hero.straddle .win{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 60px 120px -50px color-mix(in srgb,var(--hue) 55%,transparent),0 40px 80px -40px rgba(4,9,15,.55)}
main>.hero.straddle+section{padding-top:calc(var(--straddle) + 88px)}
/* load-in animation for hero content (CSS only, skipped with reduced motion) */
.rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.rise.d1{animation-delay:.06s}.rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.18s}.rise.d4{animation-delay:.28s}
/* starts partly visible, so the hero text counts as painted at once (LCP) while still easing in */
@keyframes rise{from{opacity:.35;transform:translateY(14px)}}
@media (max-width:640px){.hero{padding:56px 0 72px}.hero.home{padding-top:64px}.hero.straddle{padding-bottom:0}}


/* ==========================================================================
   8. SHELL: NAV, PRODUCTS MENU, DRAWER, FOOTER
   Generated by tools/build-shell.mjs on console pages; don't hand-write.
   The nav carries .dark while it sits over a dark section (console.js).
   ========================================================================== */
.nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid var(--line);color:var(--text);transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.nav .wrap{max-width:1360px}
.nav-in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:12px;flex:none;min-width:0;color:var(--text)}
.brand-logo{display:flex;align-items:center;color:var(--text)}
.dd-logo{display:block;height:26px;width:auto}
.brand .prod{display:inline-flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--line2);font-size:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;color:var(--text)}
.nav-links{display:flex;align-items:center;gap:2px;margin-right:auto}
.nav-links>a,.nav-drop-btn{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;font:400 14px/1.3 var(--sans);color:var(--muted);white-space:nowrap;background:none;border:0;cursor:pointer;transition:color .15s,background .15s}
.nav-links>a:hover,.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn{color:var(--text);background:var(--tint2)}
.nav-links>a[aria-current=page]{color:var(--text);background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-sm)}
.nav.dark .nav-links>a[aria-current=page]{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line)}
.nav-drop-btn svg{transition:transform .2s}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.menu-btn{display:none;width:40px;height:40px;border-radius:10px;border:0;background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-sm);color:var(--text);cursor:pointer;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
/* product pages carry six links: tighter spacing */
.nav-many .nav-links>a,.nav-many .nav-drop-btn{padding:7px 7px;font-size:13.5px}
/* every nav, global or product, collapses to the drawer at the same width */
@media (max-width:1060px){.nav-links,.nav-signin{display:none}.menu-btn{display:inline-flex}}
@media (max-width:480px){.nav-in{gap:10px}.nav-actions .btn{padding:0 12px;font-size:13px}.brand .prod{display:none}}
@media (max-width:360px){.nav-cta{display:none!important}}

/* Products mega menu */
.nav-drop{position:relative}
.nav-menu{position:absolute;top:100%;left:-12px;padding-top:10px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility 0s .15s}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu,.nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav-drop.closed .nav-menu{opacity:0;visibility:hidden}
.mega{width:min(580px,calc(100vw - 32px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:10px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 30px 60px -24px rgba(15,30,50,.25)}
.nav.dark .mega{box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.mega-item{display:flex;gap:12px;padding:12px;border-radius:11px;transition:background .15s}
.mega-item:hover{background:var(--tint2)}
.mega-item b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;font-size:14.5px;letter-spacing:-.02em;color:var(--text)}
.mega-item small{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:2px}
/* industry menus: one column per industry (hub link, then its products) */
.mega.one{width:min(360px,calc(100vw - 32px));grid-template-columns:minmax(0,1fr)}
.mega:not(.one){column-gap:0}
.mega-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega:not(.one) .mega-col:first-child{padding-right:8px}
.mega:not(.one) .mega-col+.mega-col{border-left:1px solid var(--line);padding-left:8px}
.mega-hub{display:block;padding:10px 12px 12px;margin-bottom:2px;border-bottom:1px solid var(--line);border-radius:11px 11px 0 0;transition:background .15s}
.mega-hub small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega-hub:hover{background:var(--tint2)}
.mega-hub b{display:block;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.mega-hub b::after{content:" \2192";color:var(--dim)}
.mega-hub small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.mega-foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 12px 6px;margin-top:4px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.mega-foot a{color:var(--text);font-weight:500}

/* mobile drawer (always dark) */
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none;background:transparent}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer-bg{position:absolute;inset:0;background:rgba(2,6,11,.6);opacity:0;transition:opacity .25s}
.drawer.open .drawer-bg{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,100vw);background:var(--bg1);border-left:1px solid var(--line2);padding:16px 22px 28px;overflow-y:auto;transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.drawer.open .drawer-panel{transform:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--text)}
.drawer-x{width:40px;height:40px;border-radius:10px;border:0;background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.drawer-h{margin:22px 0 4px;font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.drawer-link{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--text)}
.drawer-link[aria-current=page]{color:var(--a)}
.drawer-actions{display:grid;gap:10px;margin-top:26px}

/* footer (always dark) */
.footer{border-top:1px solid var(--line);padding:72px 0 40px;font-size:14px;background:#04090F linear-gradient(180deg,#04090F,#06101C)}
.f-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(5,minmax(0,1fr));gap:32px}
.f-h{margin:0 0 14px;font:500 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-grid a{color:var(--muted);transition:color .15s}
.f-grid a:hover{color:var(--text)}
.f-tag{color:var(--muted);margin-top:16px;max-width:300px}
.f-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font:12px/1.5 var(--mono);color:var(--dim)}
.f-base nav{display:flex;gap:18px;flex-wrap:wrap}
.f-base a:hover{color:var(--text)}
@media (max-width:980px){.f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.f-grid>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ==========================================================================
   9. CARDS, BENTO, FEATURE ROWS
   .card works in both tones. .bento is a 6-column grid; span with .s2/.s3/.s4/.s6.
   .feat-row is a copy + window row (add .rev to flip). .split is a 5/7 inner split.
   ========================================================================== */
.card{position:relative;border-radius:20px;padding:28px;border:1px solid transparent;min-width:0;display:flex;flex-direction:column;gap:16px;overflow:hidden;
  background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--hue) 6%,transparent),transparent 50%) padding-box,linear-gradient(180deg,#fff,#fff) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--a) 34%,transparent),var(--line2) 40%,var(--line2)) border-box;
  box-shadow:var(--sh-md)}
.dark .card{background:radial-gradient(120% 80% at 0% 0%,color-mix(in srgb,var(--hue) 12%,transparent),transparent 50%) padding-box,linear-gradient(180deg,#0A1522,#070F1A) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--a) 38%,transparent),var(--line) 38%,var(--line)) border-box}
a.card{transition:transform .2s,box-shadow .2s}
a.card:hover{transform:translateY(-2px)}
.card h3{font-size:clamp(1.3rem,2vw,1.6rem)}
.card.sm{padding:24px;gap:10px}
.card.sm h3{font-size:18px;letter-spacing:-.025em}
.card :where(p){color:var(--muted);font-size:15px;line-height:1.6}
.card.sm :where(p){font-size:14px}
.card .go{margin-top:auto;font-size:14px;font-weight:500;color:var(--a)}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.s2,.s3,.s4,.s6{grid-column:span 2}}
@media (max-width:560px){.card{padding:20px;border-radius:16px}}
/* card header line: mono label left, tag right */
.meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font:500 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
/* tags: plan badges and statuses. .prem = neutral, .off = not launched / roadmap (amber) */
.tag{display:inline-block;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;color:var(--a);background:color-mix(in srgb,var(--a) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 28%,transparent);white-space:nowrap;vertical-align:1px}
.tag.prem{color:var(--muted);background:var(--tint2);box-shadow:inset 0 0 0 1px var(--line2)}
.tag.off{color:color-mix(in srgb,var(--pp) 80%,var(--text));background:color-mix(in srgb,var(--pp) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pp) 34%,transparent)}
/* tick list */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14px;color:var(--muted)}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks li::before{content:"";flex:none;width:9px;height:5px;margin-top:7px;border-left:1.5px solid var(--a);border-bottom:1.5px solid var(--a);transform:rotate(-45deg)}
.ticks .tag{margin-left:6px;padding:3px 6px;font-size:9.5px}
.ticks.lg{font-size:15px;margin-top:24px}
/* 5/7 split inside a card or section */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;align-items:stretch}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.split>div:first-child{display:flex;flex-direction:column;gap:16px}
@media (max-width:980px){.split,.split.even{grid-template-columns:minmax(0,1fr);gap:24px}}
/* feature row: copy beside a window */
.feat-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.feat-row.rev>:first-child{order:2}
.feat-row p+p{margin-top:14px}
@media (max-width:960px){.feat-row{grid-template-columns:minmax(0,1fr);gap:40px}.feat-row.rev>:first-child{order:0}}
/* callout / note box, accent-tinted */
.callout{margin-top:24px;padding:18px 20px;border-radius:14px;background:color-mix(in srgb,var(--a) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 25%,transparent);font-size:14.5px;line-height:1.6;color:var(--muted)}
.callout b,.callout strong{color:var(--text);font-weight:500}
.callout .mono{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--a);margin-bottom:6px}
/* points: two-column list of short label + one line, inside a card
   <dl class="points"><div><dt>Owner portal</dt><dd>Read-only login per owner</dd></div>…</dl> */
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;margin:4px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.points dt{font-weight:500;font-size:14.5px;letter-spacing:-.01em;color:var(--text)}
.points dd{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
@media (max-width:560px){.points{grid-template-columns:minmax(0,1fr)}}


/* ==========================================================================
   10. KEY FACTS  (AEO: short quotable facts)
   <dl class="facts"><div><dt>Price</dt><dd><span class="big">From $10/mo</span><small>…</small></dd></div>…</dl>
   3 columns; fill every row (use .wide on an item to span 2 when the count is odd).
   ========================================================================== */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);box-shadow:var(--sh-md);border-radius:18px;overflow:hidden;margin:0}
.dark .facts{background:var(--line);border-color:var(--line)}
.facts>div{background:var(--bg1);padding:24px 26px;min-width:0}
.facts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts .wide{grid-column:span 2}
.facts dt{font:500 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.facts dd{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:var(--text)}
.facts dd small{display:block;color:var(--muted);font-size:13.5px;margin-top:4px}
.facts .big{font-size:26px;letter-spacing:-.035em;font-weight:600}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.facts,.facts.two{grid-template-columns:minmax(0,1fr)}.facts .wide{grid-column:auto}}


/* ==========================================================================
   11. NUMBER STRIP, BANNER
   ========================================================================== */
/* full-bleed row of figures: <div class="strip"><div><strong>3 products</strong><span>…</span></div>…</div> */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.strip.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.strip>div{background:var(--bg);padding:28px 24px;min-width:0}
.strip strong{display:block;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.045em;font-weight:600;line-height:1.15}
.strip.sm strong{font-size:clamp(1.1rem,1.6vw,1.3rem);letter-spacing:-.025em}
.strip span{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.strip.boxed{border:1px solid var(--line);border-radius:18px;overflow:hidden}
@media (max-width:820px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.strip.three{grid-template-columns:minmax(0,1fr)}}
/* banner: one-line card with text left and an action right */
.banner{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:20px 24px;border-radius:16px;border:1px solid var(--line2);background:var(--bg1);box-shadow:var(--sh-sm)}
.banner+.banner{margin-top:12px}
.banner .l{display:flex;gap:14px;align-items:center;min-width:0;flex:1 1 320px}
.banner b{display:block;font-weight:600;letter-spacing:-.02em}
.banner p{color:var(--muted);font-size:14.5px;margin-top:2px}


/* ==========================================================================
   12. STEPS  <ol class="steps [four]"><li class="step"><span class="mono">01</span><h3>…</h3><p>…</p></li></ol>
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line2);list-style:none;margin:0;padding:0}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{padding:28px 28px 0 0;position:relative;min-width:0}
.step::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--a);box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 16%,var(--bg))}
.dark .step::before{box-shadow:0 0 12px var(--a)}
.step .mono{font-size:12px;color:var(--a);letter-spacing:.08em}
.step h3{font-size:20px;letter-spacing:-.03em;margin:10px 0 8px}
.step p{color:var(--muted);font-size:15px}
@media (max-width:960px){.steps.four{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
@media (max-width:820px){.steps,.steps.four{grid-template-columns:minmax(0,1fr);border-top:0;border-left:1px solid var(--line2);gap:8px}.step{padding:0 0 24px 26px}.step::before{top:6px;left:-4px}}


/* ==========================================================================
   13. PLANS & PRICING
   .plans > .plan (.feat = highlighted). .price strong = amount. .fee = footer
   line (also usable on its own inside a .card). .fine = small print.
   ========================================================================== */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;border-radius:20px;padding:30px 28px;border:1px solid var(--line2);background:var(--plan-bg);box-shadow:var(--sh-md);display:flex;flex-direction:column;gap:18px;min-width:0}
.plan.feat{border-color:transparent;
  background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--hue) 9%,transparent),transparent 70%) padding-box,linear-gradient(180deg,#fff,#fff) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--a) 70%,transparent),color-mix(in srgb,var(--a) 18%,transparent) 60%) border-box;
  box-shadow:0 1px 2px rgba(15,30,50,.04),0 30px 60px -30px color-mix(in srgb,var(--hue) 40%,transparent)}
.dark .plan.feat{background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--hue) 28%,transparent),transparent 70%) padding-box,linear-gradient(180deg,#0B1828,#070F1A) padding-box,linear-gradient(180deg,var(--a),color-mix(in srgb,var(--a) 20%,transparent) 60%) border-box;box-shadow:0 30px 80px -40px var(--a)}
.plan-name{display:flex;justify-content:space-between;align-items:center;gap:10px;font:500 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price strong{font-size:56px;font-weight:600;letter-spacing:-.06em;line-height:1}
.price span{color:var(--muted);font-size:15px}
.plan>p:not(.plan-name){color:var(--muted);font-size:14.5px}
.plan .btn{width:100%}
.fee{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;font:12px/1.5 var(--mono);color:var(--dim)}
.fee b{color:var(--text);font-weight:500;text-align:right}
.fine{margin-top:20px;font:12px/1.6 var(--mono);color:var(--dim);text-align:center}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}


/* ==========================================================================
   14. TABLES
   .cmp = plan comparison (centered marks, .grp group rows, .featc highlighted
   column, .yes/.no marks with .sr text). Put it in a .win for the framed look.
   .tbl = simple left-aligned data table; wrap in .tbl-wrap (scrolls inside on
   narrow screens instead of widening the page).
   ========================================================================== */
.cmp{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}
.cmp th,.cmp td{padding:12px 16px;border-top:1px solid var(--line);text-align:center;vertical-align:middle}
.cmp thead th{border-top:0;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:16px;padding-bottom:16px}
.cmp thead th small{display:block;margin-top:6px;font:400 13px/1.2 var(--sans);color:var(--muted);letter-spacing:0;text-transform:none}
/* plan price in the header: <small><b>$25</b>/mo</small> */
.cmp thead th small b{font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--text)}
.cmp th[scope=row],.cmp thead th:first-child{text-align:left;width:46%;font:400 14px/1.45 var(--sans);color:var(--text);text-transform:none;letter-spacing:0}
.cmp .grp th{font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--a);background:var(--sub);padding-top:10px;padding-bottom:10px;text-align:left}
.cmp .featc{background:color-mix(in srgb,var(--a) 4%,transparent)}
.yes,.no{display:inline-block}
.yes{width:10px;height:6px;border-left:1.6px solid var(--a);border-bottom:1.6px solid var(--a);transform:rotate(-45deg) translateY(-2px)}
.dark .yes{filter:drop-shadow(0 0 4px var(--a))}
.no{width:10px;height:1.5px;background:var(--dim);opacity:.6}
@media (max-width:600px){.cmp{font-size:12.5px}.cmp th,.cmp td{padding:10px 4px}.cmp th[scope=row],.cmp thead th:first-child{width:46%;font-size:12.5px;padding-left:12px}.cmp thead th{font-size:10px}.cmp thead th small{font-size:11px}.cmp thead th small b{font-size:17px}}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line2);border-radius:16px;background:var(--bg1);box-shadow:var(--sh-sm)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
.tbl thead th{border-top:0;font:500 11px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim);background:var(--sub)}
.tbl tbody th{font-weight:500;color:var(--text);width:30%}
.tbl td{color:var(--muted)}


/* ==========================================================================
   15. LIMITS  (what the product doesn't do yet)
   <div class="limits"><div class="limit"><span class="code">Not yet</span><h3>…</h3><p>…</p></div></div>
   ========================================================================== */
.limits{border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:var(--bg1);box-shadow:var(--sh-md)}
.limit{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.6fr);gap:24px;padding:22px 26px;border-top:1px solid var(--line);align-items:baseline}
.limit:first-child{border-top:0}
.limit .code{font:500 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--warn)}
.limit .code::before{content:"○ "}
.limit h3{font-size:17px;letter-spacing:-.02em;line-height:1.3}
.limit p{color:var(--muted);font-size:15px}
@media (max-width:800px){.limit{grid-template-columns:minmax(0,1fr);gap:6px;padding:20px}}


/* ==========================================================================
   16. FAQ
   Markup is parsed by build-shell for FAQPage JSON-LD; keep it exactly:
   <details class="qa"><summary>Question?<span>+</span></summary><p>Answer.</p></details>
   Layout: <div class="faq-grid"><div>heading</div><div class="faq">…qa…</div></div>
   ========================================================================== */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px}
@media (max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr);gap:24px}}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font-size:17px;font-weight:500;letter-spacing:-.02em;line-height:1.4;color:var(--text)}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{flex:none;width:11px;height:11px;font-size:0;color:transparent;transition:transform .25s;
  background:linear-gradient(var(--a),var(--a)) center/100% 1.5px no-repeat,linear-gradient(var(--a),var(--a)) center/1.5px 100% no-repeat}
.qa[open] summary span{transform:rotate(45deg)}
.qa>:not(summary){color:var(--muted);padding:0 40px 24px 2px;font-size:15.5px;line-height:1.65}
.qa>p+p{margin-top:-12px}


/* ==========================================================================
   17. RELATED LINKS & FAMILY CARDS
   <div class="fam"><a href="…" style="--c:var(--hoa)"><span class="mono">Feature</span><b>Title</b><p>…</p></a></div>
   .related is an alias. --c defaults to the page accent.
   ========================================================================== */
.fam,.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fam.two,.related.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fam.four,.related.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.fam.stack,.related.stack{grid-template-columns:minmax(0,1fr)!important}   /* one column, e.g. beside a card in a .bento */
.fam>a,.related>a{--c:var(--a);border-radius:16px;padding:22px;border:1px solid var(--line);background:var(--bg1);display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-sm);transition:border-color .2s,background .2s,box-shadow .2s;min-width:0}
.fam>a:hover,.related>a:hover{border-color:color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 4%,var(--bg1));box-shadow:var(--sh-md)}
.fam .mono,.related .mono{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.fam b,.related b{font-size:18px;letter-spacing:-.025em;font-weight:600;line-height:1.3}
.fam p,.related p{color:var(--muted);font-size:14px}
.fam .go,.related .go{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:500;color:var(--c)}
@media (max-width:980px){.fam.four,.related.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.fam,.related{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px) and (min-width:561px){.fam.four,.related.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fam.four,.related.four,.fam.two,.related.two{grid-template-columns:minmax(0,1fr)}}


/* ==========================================================================
   18. FINAL CTA  <section class="cta dark"><div class="gridbg"></div><div class="wrap">…</div></section>
   ========================================================================== */
.cta{position:relative;isolation:isolate;text-align:center;padding:140px 0;overflow:hidden;border-top:1px solid var(--line)}
.cta::before{content:"";position:absolute;inset:auto 0 -40% 0;height:120%;z-index:-1;background:radial-gradient(45% 50% at 50% 100%,color-mix(in srgb,var(--hue) 18%,transparent),transparent 70%)}
.cta.dark::before,.dark .cta::before{background:radial-gradient(45% 50% at 50% 100%,color-mix(in srgb,var(--hue) 55%,transparent),transparent 70%)}
.cta .gridbg{inset:0;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 100%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 60% 60% at 50% 100%,#000 10%,transparent 70%)}
.cta .kicker{justify-content:center}
.cta h2{max-width:820px;margin:0 auto}
.cta .lede{margin-left:auto;margin-right:auto}
.cta .cta-row{justify-content:center}
@media (max-width:640px){.cta{padding:100px 0}}


/* ==========================================================================
   19. APP-WINDOW MOCK KIT
   Everything here is illustration: wrap it in aria-hidden="true", label it
   "Example", and give screen readers a one-line .sr summary next to it.

   .stage               spacing + under-glow around a hero window
   .win                 rounded panel, no window chrome; .win-bar > .ex = the "Example" tag row
   .win-foot            footnote line ("Figures are examples.")
   .app/.side/.si/.main/.aside   three-pane app shell (.app.two = no aside)
   .stats > .stat (+ .bar)       KPI tiles
   .table > .tr (.th)            data table rows (5 cols; override with style)
   .who + .av                    avatar + name; .st.ok|warn|bad|info|mute pills
   .li                           label/value list rows (asides)
   .mock + .mock-h + .row        small framed list inside a card
   .signer, .kan/.tk, .board/.prog, .portal/.bal/.tiles, .reader/.paper/.fields,
   .ledger-h/.lg, .pay/.amt/.methods/.auto/.switch, .timeline/.tl, .bars/.bl,
   .fake-btn, .hint, .phone      specialised pieces
   ========================================================================== */
.stage{position:relative;margin-top:72px}
.stage::before{content:"";position:absolute;left:8%;right:8%;top:-40px;height:160px;z-index:-1;background:radial-gradient(50% 60% at 50% 100%,color-mix(in srgb,var(--a) 16%,transparent),transparent 70%);filter:blur(24px)}
.dark .stage::before{background:radial-gradient(50% 60% at 50% 100%,color-mix(in srgb,var(--a) 35%,transparent),transparent 70%);filter:blur(20px)}
@media (max-width:640px){.stage{margin-top:48px}}

.win{position:relative;border-radius:16px;background:var(--win-bg);border:1px solid var(--line2);overflow:hidden;font-size:13px;line-height:1.45;min-width:0;
  box-shadow:0 1px 2px rgba(15,30,50,.04),0 14px 32px -16px rgba(15,30,50,.16),0 60px 120px -50px color-mix(in srgb,var(--hue) 32%,transparent)}
.dark .win{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 60px 140px -50px color-mix(in srgb,var(--hue) 80%,transparent),0 30px 60px -30px rgba(0,0,0,.9)}
.win::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a) 55%,transparent),transparent);z-index:2}
.dark .win::before{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a) 90%,#fff),transparent)}
.win.flat{box-shadow:none}
/* windows and mocks are size containers: their insides respond to the window's own width, so a
   window in a half-width column (feature rows) compacts the same way a full-width one does on a phone */
.win,.mock{container-type:inline-size}
/* no title bar or traffic lights: a mock's only header is its "Example" tag, right-aligned above the content */
.win-bar{display:flex;justify-content:flex-end;padding:12px 14px 0}
.ex{flex:none;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--a);border:1px solid color-mix(in srgb,var(--a) 40%,transparent);padding:4px 7px;border-radius:999px}
.win-foot{padding:10px 18px;border-top:1px solid var(--line);font:11px/1.4 var(--mono);color:var(--dim)}

/* three-pane app shell */
.app{display:grid;grid-template-columns:196px minmax(0,1fr) 250px;min-height:470px}
.app.two{grid-template-columns:196px minmax(0,1fr)}
.side{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px;background:var(--side-bg)}
.ws{display:flex;gap:9px;align-items:center;padding:6px 8px 14px;font-weight:600;font-size:13px}
.ws i{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--a-deep),var(--navy));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.si{display:flex;gap:10px;align-items:center;padding:7px 9px;border-radius:7px;color:var(--muted)}
.si::before{content:"";width:13px;height:13px;border-radius:4px;border:1.5px solid currentColor;opacity:.55;flex:none}
.si.on{background:var(--chip-bg);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-sm)}
.si.on::before{border-color:var(--a);opacity:1;background:color-mix(in srgb,var(--a) 14%,transparent)}
.dark .si.on{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line)}
.dark .si.on::before{background:none;box-shadow:0 0 8px var(--a)}
.si em{margin-left:auto;font:500 10.5px var(--mono);font-style:normal;color:var(--dim)}
.side .grow{flex:1}
.main{padding:20px 22px;min-width:0}
.main-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.main-h strong{font-size:16px;letter-spacing:-.02em;font-weight:600}
.seg{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--sub);box-shadow:inset 0 0 0 1px var(--line);font:500 11px var(--mono);color:var(--dim)}
.seg span{padding:4px 8px;border-radius:6px}
.seg .on{background:var(--chip-bg);color:var(--text);box-shadow:var(--sh-sm)}
.dark .seg .on{background:rgba(255,255,255,.07)}
.aside{border-left:1px solid var(--line);padding:20px 18px;min-width:0}
.aside .block+.block{margin-top:22px}
@media (max-width:980px){.app,.app.two{grid-template-columns:minmax(0,1fr)}.side,.aside{display:none}}
@media (max-width:560px){.main{padding:14px}.seg{display:none}}
@container (max-width:680px){
  .app,.app.two{grid-template-columns:150px minmax(0,1fr)}.aside{display:none}
  .side{padding:12px 8px}.ws{font-size:12px;padding:6px 6px 12px}.si{gap:8px;padding:6px 7px;font-size:12px}
  .main{padding:16px}}
@container (max-width:540px){.app,.app.two{grid-template-columns:minmax(0,1fr)}.side{display:none}.main{padding:14px}.seg{display:none}}

/* KPI tiles */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--stat-bg);box-shadow:var(--sh-sm);min-width:0}
.stat small{display:block;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat strong{display:block;font-size:22px;letter-spacing:-.035em;font-weight:600;margin-top:4px}
.stat span{font-size:12px;color:var(--muted)}
.bar{height:4px;border-radius:4px;background:var(--tint);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,color-mix(in srgb,var(--hue) 60%,#fff),var(--hue))}
.dark .bar i{background:linear-gradient(90deg,var(--a-deep),var(--a));box-shadow:0 0 10px var(--a)}
@media (max-width:560px){.stats{gap:6px}.stat{padding:10px}.stat strong{font-size:17px}.stat span{font-size:11px}}
/* narrow tiles: labels wrap to two lines instead of truncating to "REN…" */
@container (max-width:620px){.stat small{white-space:normal;line-height:1.3;min-height:2.6em}}

/* data table built from divs (keeps mocks out of the accessibility tree's table semantics) */
.table{margin-top:14px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tr{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.6fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.9fr);gap:10px;padding:9px 14px;border-top:1px solid var(--line);align-items:center}
.tr:first-child{border-top:0}
.tr.th{font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:var(--sub)}
.tr.c3{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
.tr .r{text-align:right}
@media (max-width:560px){.tr:not(.c3){grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1fr);padding:9px 11px}}
.who{display:flex;align-items:center;gap:9px;min-width:0}
.who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;font:600 9.5px var(--sans);font-style:normal;color:var(--av-fg);background:var(--av-bg);box-shadow:inset 0 0 0 1px rgba(15,30,50,.08)}
.av.av-a{background:color-mix(in srgb,var(--a) 12%,#fff);color:var(--a);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 30%,transparent)}
.dark .av{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.dark .av.av-a{background:linear-gradient(135deg,#17507F,#0D2D52);color:#DCE7F4}
/* status pills */
.st{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);font-style:normal;padding:4px 8px;border-radius:999px;white-space:nowrap}
.st::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.st.ok{color:var(--ok);background:var(--ok-bg)}
.st.warn{color:var(--warn);background:var(--warn-bg)}
.st.bad{color:var(--bad);background:var(--bad-bg)}
.st.info{color:color-mix(in srgb,var(--a) 82%,var(--text));background:color-mix(in srgb,var(--a) 10%,transparent)}
.st.mute{color:var(--muted);background:var(--tint)}
/* label/value rows */
.li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px}
.li:first-of-type{border-top:0}
.li span:last-child{font-family:var(--mono);color:var(--dim);font-size:11.5px;white-space:nowrap}

/* small framed list inside a card */
.mock{margin-top:auto;border:1px solid var(--line);border-radius:14px;background:var(--mock-bg);font-size:13px;line-height:1.45;overflow:hidden;box-shadow:0 1px 2px rgba(15,30,50,.04),0 8px 20px -12px rgba(15,30,50,.12)}
.dark .mock{box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.mock-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--sub);font:500 11px var(--mono);color:var(--dim)}
.dark .mock-h{background:none}
.mock-h b{font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .l{min-width:0}
.row .l b{display:block;font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .l small{display:block;color:var(--dim);font-size:11.5px}
.row .v{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.row.total{background:color-mix(in srgb,var(--a) 7%,transparent)}
.row.total .v{color:var(--text);font-size:15px;font-weight:500}
.mock .foot-note{padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}

/* signers (e-sign order) */
.signer{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line)}
.signer:first-child{border-top:0}
.signer .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:500 11px var(--mono);background:var(--sub);box-shadow:inset 0 0 0 1px var(--line2);flex:none}
.signer .l{flex:1;min-width:0}
.signer .l b{display:block;font-weight:500;font-size:12.5px}
.signer .l small{display:block;color:var(--dim);font-size:11px}

/* kanban columns and tickets */
.kan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}
.col .col-h{margin:0 0 8px;display:flex;justify-content:space-between;font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.tk{border-radius:9px;padding:10px;background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-sm);font-size:12px;line-height:1.4}
.tk+.tk{margin-top:8px}
.tk b{display:block;font-weight:500;margin-bottom:6px}
.tk small{display:block;color:var(--dim);font-size:11px;margin-bottom:8px}
.tk.hot{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 35%,transparent),var(--sh-sm)}
@media (max-width:520px){.kan{grid-template-columns:minmax(0,1fr)}}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.board .col{border-radius:10px;padding:10px;background:var(--sub);box-shadow:inset 0 0 0 1px var(--line)}
.own{display:flex;justify-content:space-between;align-items:center;gap:8px}
.own .av{width:20px;height:20px;font-size:8.5px}
.prog{height:4px;border-radius:4px;background:var(--tint);margin:8px 0 6px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--a-deep)}
.dark .prog i{background:var(--a);box-shadow:0 0 8px var(--a)}
@media (max-width:560px){.board{grid-template-columns:minmax(0,1fr)}.board .col:nth-child(n+3){display:none}}
@container (max-width:680px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}.board .col:nth-child(n+3){display:none}}
@container (max-width:400px){.board{grid-template-columns:minmax(0,1fr)}}

/* resident / tenant portal */
.portal{padding:16px;display:grid;gap:12px}
.bal{border-radius:12px;padding:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--hue) 10%,#fff),#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 26%,transparent)}
.dark .bal{background:linear-gradient(135deg,color-mix(in srgb,var(--hue) 32%,transparent),rgba(255,255,255,.02))}
.bal small{font:500 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.bal strong{display:block;font-size:30px;letter-spacing:-.04em;font-weight:600;margin:2px 0}
.bal span{font-size:12px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tiles div{padding:10px;border-radius:9px;background:var(--sub);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;min-width:0}
.tiles div small{display:block;color:var(--dim);font-size:10.5px;font-family:var(--mono)}

/* document reader: inbox list, scanned paper, extracted fields */
.reader{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:330px}
.inbox{border-right:1px solid var(--line)}
.bill{display:flex;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.bill:first-child{border-top:0}
.bill.sel{background:color-mix(in srgb,var(--a) 8%,transparent);box-shadow:inset 2px 0 0 var(--a)}
.bill .l{min-width:0;flex:1}
.bill .l b{display:block;font-weight:500;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bill .l small{display:block;font:11px var(--mono);color:var(--dim)}
.paper-wrap{padding:16px;border-top:1px solid var(--line);background:var(--sub)}
.dark .paper-wrap{background:none}
.paper{position:relative;border-radius:6px;background:var(--paper);color:#152234;padding:14px 14px 16px;font-size:10.5px;line-height:1.5;overflow:hidden;box-shadow:0 0 0 1px var(--line2),0 10px 24px -12px rgba(15,30,50,.22)}
.dark .paper{box-shadow:0 10px 30px -10px rgba(0,0,0,.7)}
.paper .ph{display:flex;justify-content:space-between;font-weight:700;font-size:11px;letter-spacing:.02em;border-bottom:1px solid var(--paper-rule);padding-bottom:7px;margin-bottom:7px}
.paper .pl{display:flex;justify-content:space-between;gap:8px;padding:2px 4px;margin:0 -4px;border-radius:3px}
.paper .pl.hl{background:color-mix(in srgb,var(--a-deep) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a-deep) 60%,transparent)}
.paper .ln{height:5px;border-radius:3px;background:var(--paper-ln);margin:6px 0}
.scan{position:absolute;left:0;right:0;top:0;height:28px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--a) 20%,transparent));border-bottom:1.5px solid var(--a-deep);animation:scan 3.6s cubic-bezier(.5,0,.5,1) infinite;pointer-events:none}
@keyframes scan{0%{transform:translateY(-30px);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(190px);opacity:0}}
.fields{padding:14px;display:flex;flex-direction:column;gap:8px}
.fld{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2)}
.dark .fld{background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line)}
.fld small{font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.fld span{display:flex;justify-content:space-between;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.fld i{font:500 9.5px var(--mono);font-style:normal;color:var(--a);letter-spacing:.06em}
@media (max-width:760px){.reader{grid-template-columns:minmax(0,1fr)}.inbox{border-right:0;border-bottom:1px solid var(--line)}}
@container (max-width:560px){.reader{grid-template-columns:minmax(0,1fr)}.inbox{border-right:0;border-bottom:1px solid var(--line)}}
/* a button drawn inside a mock (not a real control) */
.fake-btn{margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:9px;background:var(--a-deep);color:#fff;font-weight:500;font-size:12.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 16px -8px var(--a-deep)}
.fake-btn small{font:11px var(--mono)}
.hint{font-size:11.5px;color:var(--dim)}

/* ledger header + list */
.ledger-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:18px 18px 14px}
.ledger-h b{display:block;font-size:17px;letter-spacing:-.02em;font-weight:600}
.ledger-h small{color:var(--dim);font-size:12px}
.lg{border-top:1px solid var(--line)}
.lg.flush{border-top:0}
.lg .row{padding:12px 18px}
.lg .row.total{padding:16px 18px}
.lg .row.total .v{font-size:20px;letter-spacing:-.02em}
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--a);animation:ping 2.4s ease-out infinite}
@keyframes ping{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(1.8)}}

/* checkout / payment pieces */
.pay{padding:18px;display:grid;gap:12px}
.pay.ruled{border-top:1px solid var(--line)}
.amt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;border-radius:10px;background:var(--sub);box-shadow:inset 0 0 0 1px var(--line)}
.amt small{font:500 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.amt strong{font-size:28px;letter-spacing:-.04em;font-weight:600}
.methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.method{padding:12px 14px;border-radius:10px;background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2);font-size:12.5px;min-width:0}
.method.on{background:color-mix(in srgb,var(--a) 9%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 50%,transparent)}
.method b{display:block;font-weight:500;font-size:13px;margin-bottom:2px}
.method small{color:var(--dim);font-size:11.5px}
.auto{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2);font-size:12.5px}
.switch{width:30px;height:18px;border-radius:999px;background:var(--a-deep);position:relative;flex:none}
.dark .switch{box-shadow:0 0 10px -2px var(--a)}
.switch::after{content:"";position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;background:#fff}

/* vertical timeline */
.timeline{padding:18px 18px 8px;position:relative}
.tl{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;padding-bottom:18px;position:relative}
.tl::before{content:"";position:absolute;left:10px;top:20px;bottom:0;width:1px;background:var(--line2)}
.tl:last-child::before{display:none}
.tl i{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font:500 10px var(--mono);font-style:normal;background:var(--bg1);box-shadow:inset 0 0 0 1px var(--line2);color:var(--dim)}
.tl.done i{box-shadow:inset 0 0 0 1px var(--a);color:var(--a)}
.tl.now i{background:var(--a-deep);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--a) 16%,transparent)}
.dark .tl.now i{box-shadow:0 0 14px var(--a)}
.tl b{display:block;font-weight:500;font-size:13px}
.tl small{display:block;color:var(--dim);font-size:11.5px}
.tl .d{font:11.5px var(--mono);color:var(--dim);white-space:nowrap}

/* bar chart (5 buckets; later buckets turn warn then bad) */
.chart{padding:14px 18px 18px;border-top:1px solid var(--line)}
.bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end;height:96px;margin-top:6px}
.bars div{border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 55%,#fff),var(--hue));opacity:.9}
.bars div:nth-child(n+3){background:linear-gradient(180deg,#E9B868,#C27A1A)}
.bars div:nth-child(n+4){background:linear-gradient(180deg,#EE8E88,#C2352F)}
.dark .bars div{background:linear-gradient(180deg,color-mix(in srgb,var(--a) 80%,#fff 0%),var(--a-deep));opacity:.85}
.dark .bars div:nth-child(n+3){background:linear-gradient(180deg,var(--warn),#8A5A1A)}
.dark .bars div:nth-child(n+4){background:linear-gradient(180deg,var(--bad),#7A2E2E)}
.bl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:8px;font:10.5px var(--mono);color:var(--dim);text-align:center}

/* phone frame: <div class="phone" aria-hidden="true"><div class="phone-screen">…</div></div> */
.phone{position:relative;width:min(300px,100%);margin:0 auto;padding:10px;border-radius:40px;background:linear-gradient(180deg,#1A2433,#0B1220);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px color-mix(in srgb,var(--hue) 55%,transparent),0 24px 48px -24px rgba(4,9,15,.6)}
.phone::before{content:"";position:absolute;top:18px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:999px;background:#05080D;z-index:2}
.phone-screen{border-radius:31px;overflow:hidden;background:var(--bg);color:var(--text);min-height:520px;padding:52px 14px 18px;font-size:13px;line-height:1.45;display:grid;gap:12px;align-content:start}
.phone-screen.dark{background:var(--bg1)}
/* Real app screenshots (demo data): <figure class="shot"><div class="win flat"><img></div><figcaption></figure>.
   .shots lays them out two up, .wide spans the row; .shot.on-phone puts a phone capture in the .phone frame. */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.shots .wide{grid-column:1/-1}
.shot{margin:0;min-width:0}
.shot img{display:block;width:100%;height:auto}
.shot .win{box-shadow:var(--sh-md)}
.shot figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--muted)}
.shot figcaption b{color:var(--text);font-weight:500}
.shot.on-phone .phone{padding:10px}
.shot.on-phone .phone img{border-radius:31px}
.shot.on-phone figcaption{text-align:center}
.shots-note{margin-top:22px;font:12px/1.5 var(--mono);color:var(--dim)}
@media (max-width:760px){.shots{grid-template-columns:minmax(0,1fr)}}
/* Screenshot carousel (one "Inside <product>" section per product page; console.js wires it up):
   .carousel > .car-track > div.car-slide[role=group] > figure.car-fig (a .win.flat frame, .car-img holding the image, a figcaption),
   then .car-nav (prev, generated dots, next). Every screen sits in the same 16:10 frame; without JS the
   track still scrolls and snaps. */
.carousel{max-width:1040px;margin:0 auto}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:16px}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--a);outline-offset:4px}
.car-slide{margin:0;min-width:0;scroll-snap-align:start}
.car-fig{margin:0}
.car-slide .win{box-shadow:var(--sh-md)}
.car-img{aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background:var(--sub)}
.car-img img{display:block;width:100%;height:100%;object-fit:contain}
.car-slide figcaption{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--muted);text-align:center}
.car-slide figcaption b{color:var(--text);font-weight:500}
.car-nav{display:none;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.dd-js .car-nav{display:flex}
.car-btn{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:999px;cursor:pointer;color:var(--text);
  background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-sm);font:500 18px/1 var(--sans)}
.car-btn:hover{background:var(--chip-hover)}
.car-btn:disabled{opacity:.35;cursor:default}
.car-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
/* 24px tap targets around small dots */
.car-dots button{position:relative;width:24px;height:24px;padding:0;border:0;cursor:pointer;background:none}
.car-dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:999px;background:var(--line2);transition:width .2s,background .2s}
.car-dots button[aria-current="true"]{width:32px}
.car-dots button[aria-current="true"]::before{width:22px;background:var(--a)}

/* placeholder screen for an unlaunched product */
.soon{position:relative;min-height:470px;display:grid;place-items:center;padding:32px;overflow:hidden}
.soon .ghost{position:absolute;inset:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse at center,transparent 25%,#000 75%);mask-image:radial-gradient(ellipse at center,transparent 25%,#000 75%)}
.soon .ghost div{border-radius:12px;border:1px dashed var(--line2)}
.soon .ghost .wide{grid-column:span 2}
.soon .msg{position:relative;text-align:center;max-width:440px}
.soon .msg b{display:block;font-size:26px;letter-spacing:-.035em;margin:14px 0 8px;font-weight:600}
.soon .msg p{color:var(--muted);font-size:14.5px}
.soon .fake-btn{display:inline-flex;margin-top:18px}
@media (max-width:560px){.soon{min-height:380px}}


/* ==========================================================================
   20. HOMEPAGE PARTS
   Product tabs (behaviour in console.js), product cards, platform layers.
   ========================================================================== */
/* tabs: <div class="tabs" role="tablist"><button role="tab" style="--c:var(--ll)" data-vars="--a:…"><i></i>Name</button>… */
.showcase{position:relative;margin-top:64px;text-align:left}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;border-radius:12px;background:var(--tint2);box-shadow:inset 0 0 0 1px var(--line);width:max-content;max-width:100%;margin:0 auto 22px}
.dark .tabs{box-shadow:inset 0 0 0 1px var(--line2)}
.tabs button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;color:var(--muted);font:500 13px/1 var(--sans);letter-spacing:-.01em;padding:9px 14px;border-radius:9px;transition:background .2s,color .2s}
.tabs button i{width:7px;height:7px;border-radius:50%;background:var(--c);opacity:.6}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected=true]{background:var(--chip-bg);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-md)}
.dark .tabs button[aria-selected=true]{background:rgba(255,255,255,.07)}
.tabs button[aria-selected=true] i{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.dark .tabs button[aria-selected=true] i{box-shadow:0 0 10px var(--c)}
.tabs small{font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.panel{animation:fade .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.unit-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.unit-h b{display:block;font-size:16px;letter-spacing:-.02em;font-weight:600}
.unit-h small{color:var(--dim);font-size:12px}
@media (max-width:560px){.tabs button{padding:8px 10px;font-size:12.5px}.tabs small{display:none}}

/* product cards */
.prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.prod{gap:18px}
.prod-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.prod-name{display:flex;align-items:center;gap:14px;min-width:0}
.glyph{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;font:600 13px var(--mono);color:#fff;background:linear-gradient(135deg,var(--a-deep),color-mix(in srgb,var(--a-deep) 75%,#0B1220));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px -10px var(--a-deep)}
.dark .glyph{background:linear-gradient(135deg,var(--a-deep),color-mix(in srgb,var(--a-deep) 40%,#04090F));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 50%,transparent),0 10px 30px -10px var(--a)}
.glyph.sm{width:34px;height:34px;border-radius:9px;font-size:11px}
/* real product marks (img.glyph.mark) replace the lettered tile */
.glyph.mark,.dark .glyph.mark{background:none;box-shadow:none;border-radius:0;object-fit:contain}
.prod-mark{width:18px;height:18px;flex:none;object-fit:contain}
.prod h3{font-size:clamp(1.6rem,2.6vw,2rem);letter-spacing:-.045em}
.prod .aud{font-size:14px;color:var(--a);margin-top:2px}
.prod-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line)}
.prod-foot .p{font-size:14px;color:var(--muted);flex:1 1 13ch;min-width:0;line-height:1.35}
.prod-foot .p b{font-size:22px;color:var(--text);letter-spacing:-.03em;font-weight:600}
.prod.off{background:repeating-linear-gradient(135deg,rgba(15,30,50,.022) 0 10px,transparent 10px 20px) padding-box,linear-gradient(180deg,#FCFCFD,#FCFCFD) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--a) 30%,transparent),var(--line2) 40%) border-box}
.dark .prod.off{background:repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 10px,transparent 10px 20px) padding-box,linear-gradient(180deg,#0A1522,#070F1A) padding-box,linear-gradient(180deg,color-mix(in srgb,var(--a) 32%,transparent),var(--line) 40%) border-box}
@media (max-width:900px){.prods{grid-template-columns:minmax(0,1fr)}}

/* platform: copy beside a layer diagram window */
.plat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.layers{padding:22px;display:grid;gap:10px}
.prod-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.prod-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.prod-row span{--c:var(--muted);text-align:center;padding:10px 6px;border-radius:9px;font:500 12px var(--mono);background:color-mix(in srgb,var(--c) 10%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-row span.dash{background:none;outline:1px dashed color-mix(in srgb,var(--c) 50%,transparent);outline-offset:-1px;box-shadow:none;color:var(--muted)}
.wires{height:28px;background:linear-gradient(90deg,transparent 12%,var(--line2) 12%,var(--line2) calc(12% + 1px),transparent calc(12% + 1px),transparent 37%,var(--line2) 37%,var(--line2) calc(37% + 1px),transparent calc(37% + 1px),transparent 62.5%,var(--line2) 62.5%,var(--line2) calc(62.5% + 1px),transparent calc(62.5% + 1px),transparent 87.5%,var(--line2) 87.5%,var(--line2) calc(87.5% + 1px),transparent calc(87.5% + 1px))}
.layer{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 16px;border-radius:10px;background:var(--bg1);box-shadow:inset 0 0 0 1px var(--line2),var(--sh-sm)}
.dark .layer{background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--line)}
.layer .mono{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--a)}
.layer b{display:block;font-weight:500;font-size:14px}
.layer small{display:block;color:var(--muted);font-size:13px}
.layer.base{display:block;text-align:center;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#0D2D52,#17497F);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -12px rgba(13,45,82,.6)}
.dark .layer.base{color:var(--text);background:linear-gradient(90deg,rgba(13,45,82,.6),rgba(13,45,82,.2));box-shadow:inset 0 0 0 1px rgba(90,166,242,.3)}
/* relationship list: tag left, text right */
.rel{margin-top:32px;display:grid;gap:10px}
.rel>div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.rel .tag{justify-self:start;align-self:start}
.rel b{display:block;font-weight:500}
.rel p{color:var(--muted);font-size:14.5px}
@media (max-width:960px){.plat{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:520px){.layer{grid-template-columns:minmax(0,1fr);gap:4px}.prod-row span{font-size:10.5px}.prod-row:not(.three){grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ==========================================================================
   21. PROSE  (policies, resources, templates, checklists)
   <article class="prose"> … </article> inside a light .sec with .wrap.narrow
   ========================================================================== */
.prose{font-size:16.5px;line-height:1.75;color:var(--muted);max-width:720px}
.prose>*+*{margin-top:1em}
.prose h2{font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:-.035em;line-height:1.2;margin-top:2.2em;color:var(--text)}
.prose h3{font-size:1.2rem;letter-spacing:-.02em;line-height:1.3;margin-top:1.8em;color:var(--text)}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--a) 55%,transparent)}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--a)}
.prose blockquote{margin-left:0;padding:4px 0 4px 18px;border-left:2px solid var(--a);color:var(--text)}
.prose hr{border:0;height:1px;background:var(--line2);margin:2.5em 0}
.prose code{font:.9em var(--mono);background:var(--tint);padding:.1em .35em;border-radius:5px}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.prose thead th{font:500 11px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim);border-top:0}
.prose .updated,.updated{font:12px/1.5 var(--mono);color:var(--dim);letter-spacing:.02em}
/* Blog: a post's byline (stamped by build-shell), pill links between tags, and an empty listing */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:22px;font:12.5px/1.5 var(--mono);color:var(--dim);letter-spacing:.01em}
.byline a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.byline a:hover{color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.chips a{display:inline-block;font:500 13px/1.2 var(--sans);color:var(--muted);padding:8px 12px;border-radius:999px;background:var(--tint2);box-shadow:inset 0 0 0 1px var(--line2);transition:color .15s,box-shadow .15s}
.chips a:hover,.chips a[aria-current]{color:var(--text);box-shadow:inset 0 0 0 1px var(--a)}
.empty-list{max-width:560px;margin:0 auto;text-align:center;color:var(--muted)}
.empty-list a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
/* note box inside prose */
.note{padding:16px 18px;border-radius:12px;background:color-mix(in srgb,var(--a) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 22%,transparent);font-size:14.5px;line-height:1.65;color:var(--muted)}
.note strong{color:var(--text)}
/* printable checklist */
.checklist{list-style:none;padding:0!important;border:1px solid var(--line2);border-radius:14px;background:var(--bg1);overflow:hidden}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--line);margin:0!important;font-size:15.5px;color:var(--text)}
.checklist li:first-child{border-top:0}
.checklist li::before{content:"";flex:none;width:16px;height:16px;border:1.5px solid var(--dim);border-radius:4px;margin-top:.3em}
/* copyable template text */
.template{position:relative;background:var(--bg1);border:1px solid var(--line2);border-radius:14px;padding:20px 22px;padding-top:48px;font:14.5px/1.75 var(--sans);white-space:pre-wrap;color:var(--text);overflow-wrap:anywhere}
.copy-btn{position:absolute;top:10px;right:10px;font:500 12px/1 var(--sans);padding:8px 11px;border-radius:8px;border:0;cursor:pointer;color:var(--text);background:var(--chip-bg);box-shadow:inset 0 0 0 1px var(--line2)}
.copy-btn:hover{background:var(--chip-hover)}
.copy-btn.ok{color:var(--a);box-shadow:inset 0 0 0 1px var(--a)}   /* set by the page's copy script after copying */
/* visible breadcrumb trail (the JSON-LD one comes from the shell) */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--dim);margin:0 0 20px;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line2)}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--text)}


/* ==========================================================================
   22. MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}
@media print{
  html,body{background:#fff}
  .nav,.drawer,.footer,.hero-glow,.gridbg,.no-print{display:none!important}
  .dark{--bg:#fff;--bg1:#fff;--text:#0B1220;--muted:#475467;--dim:#5F6B7C;--line:rgba(15,30,50,.12);--line2:rgba(15,30,50,.18);color-scheme:light}
  .grad,.grad-a{background:none!important;color:#0B1220!important}
  .sec,.hero{padding:24px 0}
}

/* "Key terms" glossary links under an FAQ heading */
.chips.terms{margin-top:20px}
.chips.terms::before{content:"Key terms";display:block;width:100%;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

.faq-read{margin-top:16px;font-size:14px;color:var(--muted)}
.faq-read a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}