/* ============================================================================
   ASL Design System v2 — the shared visual language for autosecurelogin.com.
   Brand: Obsidian #05090F · Deep Navy #09111B · Signal Cyan #4C9AFF (used
   sparingly, like an active signal) · Ice Cyan #9CC8FF · Steel White #EDF7FF ·
   Muted Steel #9FB2C2 · Trust Green #6CE5B1 · Inter.
   CSP-safe: no remote fonts, no external assets, no inline styles needed.
   v2 (2026-09): long-form reading styles, product sub-nav, FAQ, comparison
   tables, timelines, galleries, pricing, CSS-only mobile menu. Every v1 class
   is preserved so migrated Insights/Solutions/Platform pages keep rendering.
   ========================================================================== */
:root{
  color-scheme: dark;
  --obsidian:#05090F; --navy:#09111B; --panel:#0c1622; --panel-2:#101f2e;
  --line:#1c3346; --line-soft:#16283a;
  --text:#EDF7FF; --muted:#9FB2C2; --dim:#8798aa;
  /* The brand accent is lime as of 2026-09-04. The tokens keep the names --cyan/--ice
     because pages outside this build (the migrated insights and solutions pages, and
     assets/redesign.css) reference them by name; renaming would silently un-style those.
     --green stays a separate MINT: it is the semantic success colour (checkmarks, "yes"
     in the comparison table, the Live badge) and must not collapse into the brand accent. */
  --cyan:#4C9AFF; --ice:#9CC8FF; --green:#6CE5B1; --amber:#FFCE7A; --red:#FF8D9B; --violet:#b79bff;
  --radius:16px; --radius-lg:22px; --radius-sm:10px;
  --shell:1200px;
  --shadow:0 24px 70px -24px rgba(0,0,0,.7);
  --glow:0 0 0 1px rgba(76,154,255,.14), 0 20px 60px -20px rgba(76,154,255,.18);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  margin:0;min-height:100vh;color:var(--text);font-family:var(--font);
  font-size:16px;line-height:1.6;letter-spacing:-.005em;
  background:
    radial-gradient(1100px 620px at 82% -6%, rgba(76,154,255,.10), transparent 60%),
    radial-gradient(900px 560px at 6% 4%, rgba(108,229,177,.06), transparent 55%),
    var(--obsidian);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.1;letter-spacing:-.02em;font-weight:800}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.shell{width:min(var(--shell),calc(100% - 2.4rem));margin-inline:auto}
.eyebrow{margin:0 0 .7rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:800}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--cyan);color:#03151d;padding:.6rem 1rem;border-radius:0 0 10px 0;font-weight:800}
.skip-link:focus{left:0}

/* ---- header / nav ---- */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);
  background:rgba(5,9,15,.78);border-bottom:1px solid rgba(76,154,255,.12)}
.topbar-inner{display:flex;align-items:center;gap:1.2rem;min-height:68px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:800}
.brand img{width:32px;height:32px}
.brand b{font-size:1.02rem;letter-spacing:-.02em}
.brand span{color:var(--muted);font-weight:600;font-size:.86rem}
.nav{margin-left:auto;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.nav a{padding:.5rem .8rem;border-radius:999px;color:var(--muted);font-weight:650;font-size:.92rem;transition:color .15s,background .15s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);background:rgba(255,255,255,.05)}
.nav a.cta{color:var(--obsidian);background:var(--cyan);font-weight:750}
.nav a.cta:hover{background:var(--ice)}
/* CSS-only mobile menu (no script): checkbox + label */
.nav-toggle-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.nav-toggle{display:none;margin-left:auto;align-items:center;gap:.45rem;padding:.5rem .85rem;border:1px solid var(--line);border-radius:999px;color:var(--text);font-weight:700;font-size:.9rem;cursor:pointer;user-select:none}
.nav-toggle::before{content:"";width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor;display:inline-block}
.nav-toggle-input:focus-visible + .nav-toggle{outline:2px solid var(--cyan);outline-offset:3px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.72rem 1.25rem;border:0;border-radius:999px;cursor:pointer;
  font-family:inherit;font-weight:750;font-size:.98rem;text-decoration:none;transition:transform .12s,background .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cyan);color:#03151d;box-shadow:0 10px 30px -10px rgba(76,154,255,.55)}
.btn-primary:hover{background:var(--ice)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--ice)}
.btn-green{background:var(--green);color:#052416}
.btn-green:hover{filter:brightness(1.06)}
.btn-sm{min-height:38px;padding:.5rem .9rem;font-size:.9rem}
/* Buttons are self-contained controls: any container rule that styles descendant links
   (.prose a, .article-content a, the migrated-page rules) ties or beats .btn-primary on
   specificity and would repaint the label to a link colour on a light fill. These
   element-qualified rules restore the button's own contrast in every context. */
a.btn-primary{color:#03151d}
a.btn-primary:hover{color:#03151d}
a.btn-ghost{color:var(--text)}
a.btn-ghost:hover{color:var(--ice)}
a.btn-green{color:#052416}
a.btn{text-decoration:none}
.btn-lg{min-height:54px;padding:.9rem 1.6rem;font-size:1.06rem}

/* ---- hero ---- */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3.5rem)}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.6rem);font-weight:850;letter-spacing:-.035em;max-width:16ch}
.hero h1 .accent{color:var(--cyan)}
.hero .lede{max-width:60ch;color:#c3d6e4;font-size:clamp(1.05rem,2vw,1.32rem);margin-top:1rem}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hero-metrics{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line-soft)}
.hero-metric b{display:block;font-size:1.9rem;font-weight:850;color:var(--text);letter-spacing:-.02em}
.hero-metric span{color:var(--muted);font-size:.9rem}
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
.hero-split .shot{transform:rotate(-1deg)}
.hero-note{margin-top:1rem;color:var(--dim);font-size:.88rem}

/* ---- section ---- */
.section{padding:clamp(3rem,6vw,5rem) 0}
.section-tight{padding:clamp(1.6rem,3vw,2.6rem) 0}
.section-head{max-width:64ch;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.section-head h2{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.03em}
.section-head p{color:var(--muted);font-size:1.1rem;margin:0}
.section-head.left{margin-inline:0;text-align:left}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}
.band{background:linear-gradient(180deg,rgba(9,17,27,.0),rgba(9,17,27,.9) 20%,rgba(9,17,27,.9) 80%,rgba(9,17,27,0));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* ---- panels & grid ---- */
.grid{display:grid;gap:1.1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-align{align-items:center}
.panel{background:linear-gradient(160deg,rgba(16,31,46,.9),rgba(9,17,27,.92));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow)}
.panel h3{font-size:1.15rem}
.panel p{color:var(--muted);margin:0}
.panel p + p{margin-top:.8rem}
.panel-cyan{border-color:rgba(76,154,255,.35)}
.panel-flat{box-shadow:none;background:rgba(12,22,34,.55)}

/* ---- pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.3rem .7rem;
  font-weight:750;font-size:.76rem;letter-spacing:.02em;border:1px solid transparent;white-space:nowrap}
.pill-cyan{background:rgba(76,154,255,.12);color:var(--ice);border-color:rgba(76,154,255,.28)}
.pill-green{background:rgba(108,229,177,.12);color:var(--green);border-color:rgba(108,229,177,.28)}
.pill-amber{background:rgba(255,206,122,.12);color:var(--amber);border-color:rgba(255,206,122,.28)}
.pill-violet{background:rgba(183,155,255,.12);color:var(--violet);border-color:rgba(183,155,255,.28)}
.pill-muted{background:rgba(159,178,194,.1);color:var(--muted);border-color:rgba(159,178,194,.22)}
.badge-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.chip-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}

/* ---- product cards (hub) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.1rem}
.card{position:relative;display:flex;flex-direction:column;gap:.7rem;
  background:linear-gradient(160deg,rgba(16,31,46,.7),rgba(9,17,27,.85));
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.3rem;
  transition:transform .16s,border-color .16s,box-shadow .16s}
.card:hover{transform:translateY(-4px);border-color:rgba(76,154,255,.4);box-shadow:var(--glow)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.card-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(76,154,255,.1);border:1px solid rgba(76,154,255,.25);color:var(--cyan);font-weight:900;font-size:1.05rem}
.card h3{font-size:1.16rem;margin:0}
.card .tag{color:var(--cyan);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.card p{color:var(--muted);font-size:.94rem;margin:0;flex:1}
.card .card-foot{display:flex;align-items:center;gap:.5rem;margin-top:.3rem;color:var(--ice);font-weight:700;font-size:.9rem}
.card .card-foot .arrow{transition:transform .16s}
.card:hover .card-foot .arrow{transform:translateX(4px)}
.card-who{color:var(--dim);font-size:.82rem;margin:0}
.card-feature{grid-column:span 2}
.card-feature .shot{margin-top:.4rem}

/* category header */
.cathead{display:flex;align-items:baseline;gap:.8rem;margin:2.4rem 0 1.1rem}
.cathead h3{font-size:1.35rem;margin:0}
.cathead .rule{flex:1;height:1px;background:var(--line-soft)}
.cathead .count{color:var(--dim);font-size:.85rem;font-weight:700}
.catintro{color:var(--muted);max-width:70ch;margin:-.4rem 0 1.2rem;font-size:.98rem}

/* ---- feature list ---- */
.features{display:grid;gap:.85rem;padding:0;margin:0;list-style:none}
.features li{position:relative;padding-left:1.7rem;color:#cddced}
.features li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;
  background:var(--cyan);box-shadow:0 0 10px rgba(76,154,255,.6)}
.features li b{color:var(--text)}
.features.check li::before{content:"✓";top:0;width:auto;height:auto;background:none;box-shadow:none;color:var(--green);font-weight:900}
.features.block li::before{content:"×";top:0;width:auto;height:auto;background:none;box-shadow:none;color:var(--red);font-weight:900}
.features.two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- feature blocks (icon + title + body) ---- */
.feature{display:grid;grid-template-columns:44px 1fr;gap:.9rem;align-items:start}
.feature .fic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(76,154,255,.1);border:1px solid rgba(76,154,255,.22);color:var(--cyan);font-weight:900}
.feature h4{margin:0 0 .25rem;font-size:1.02rem}
.feature p{margin:0;color:var(--muted);font-size:.94rem}
.feature-list{display:grid;gap:1.1rem}
.feature-list .feature{padding:1.1rem 1.2rem;border:1px solid var(--line-soft);border-radius:var(--radius);background:rgba(12,22,34,.45)}
.feature-list .feature h4{font-size:1.08rem}
.feature-list .feature p{font-size:.97rem;line-height:1.65}
.feature-num{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(76,154,255,.1);border:1px solid rgba(76,154,255,.22);color:var(--cyan);font-weight:900;font-family:var(--mono);font-size:.9rem}

/* ---- screenshot frame ---- */
.shot{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}
.shot img{width:100%;display:block}
.shot-cap{padding:.7rem 1rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line-soft)}
.shot-mock{aspect-ratio:16/10;display:grid;place-items:center;color:var(--dim);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px),var(--navy)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.gallery .shot{transform:none}
.gallery-phone{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.gallery-phone .shot img{aspect-ratio:9/19.5;object-fit:cover;object-position:top}

/* ---- stat / proof band ---- */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;
  padding:1.6rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(9,17,27,.6)}
.proof .stat b{display:block;font-size:1.7rem;font-weight:850;color:var(--cyan)}
.proof .stat span{color:var(--muted);font-size:.88rem}
.proof .stat small{display:block;color:var(--dim);font-size:.74rem;margin-top:.2rem}

/* ---- callout ---- */
.callout{border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:var(--radius);
  padding:1.1rem 1.3rem;background:rgba(76,154,255,.05);color:#cddced}
.callout.green{border-left-color:var(--green);background:rgba(108,229,177,.05)}
.callout.amber{border-left-color:var(--amber);background:rgba(255,206,122,.05)}
.callout b{color:var(--text)}
.callout p:last-child{margin-bottom:0}

/* ---- spec table ---- */
.spec{width:100%;border-collapse:collapse;font-size:.95rem}
.spec td{padding:.7rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.spec td:first-child{color:var(--muted);white-space:nowrap;width:1%;font-weight:650}
.spec tr:last-child td{border-bottom:0}

/* ---- comparison table ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:rgba(9,17,27,.6)}
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem;min-width:720px}
.compare th,.compare td{padding:.8rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:top;text-align:left}
.compare thead th{position:sticky;top:0;background:var(--panel);color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;z-index:1}
.compare tbody th{font-weight:750;color:var(--text);white-space:nowrap;background:rgba(12,22,34,.6);position:sticky;left:0}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0}
.compare td a{color:var(--ice);font-weight:650}
.compare .yes{color:var(--green);font-weight:800}
.compare .no{color:var(--dim)}

/* ---- CTA band ---- */
.ctaband{position:relative;overflow:hidden;border:1px solid rgba(76,154,255,.28);border-radius:var(--radius-lg);
  padding:clamp(2rem,4vw,3.2rem);text-align:center;
  background:radial-gradient(600px 300px at 50% -20%,rgba(76,154,255,.16),transparent),linear-gradient(160deg,rgba(16,31,46,.9),rgba(9,17,27,.95))}
.ctaband h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.ctaband p{color:var(--muted);max-width:52ch;margin:0 auto 1.6rem}
.cta-inline{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius);background:rgba(12,22,34,.6)}
.cta-inline p{margin:0;color:var(--muted)}
.cta-inline b{color:var(--text)}

/* ---- product hero (per-page) ---- */
.phero{padding:clamp(2.4rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem)}
.phero .kicker{display:inline-flex;gap:.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.phero h1{font-size:clamp(2.1rem,5vw,3.8rem);letter-spacing:-.035em;max-width:18ch}
.phero h1 .accent{color:var(--cyan)}
.phero .lede{max-width:58ch;color:#c3d6e4;font-size:clamp(1.05rem,1.8vw,1.28rem);margin-top:.9rem}
.phero .who{margin-top:1.2rem;color:var(--muted);font-size:.95rem}
.phero .who b{color:var(--text)}
.breadcrumb{color:var(--dim);font-size:.85rem;margin-bottom:1.4rem}
.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--cyan)}

/* ---- product sub-navigation (sticky, under topbar) ---- */
.subnav{position:sticky;top:68px;z-index:40;background:rgba(5,9,15,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.subnav-inner{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none;padding:.35rem 0}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav a{flex:0 0 auto;padding:.45rem .8rem;border-radius:999px;color:var(--muted);font-size:.86rem;font-weight:650;white-space:nowrap}
.subnav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.subnav a.cta{color:var(--obsidian);background:var(--cyan);margin-left:auto}

/* ---- long-form prose ---- */
.prose{max-width:74ch;color:#cddced;font-size:1.04rem;line-height:1.75}
.prose p{margin:0 0 1.1em}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.2rem 0 .7rem;color:var(--text)}
.prose h3{font-size:1.22rem;margin:1.8rem 0 .5rem;color:var(--text)}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1.1em}
.prose li{margin:.35rem 0}
.prose b,.prose strong{color:var(--text)}
/* :not(.btn) matters. A descendant link rule beats .btn-primary on specificity, so a
   button placed inside prose was rendering ice-cyan text on a cyan fill — 1.3:1, which
   is effectively invisible. Buttons keep their own colours everywhere. */
.prose a:not(.btn){color:var(--ice);text-decoration:underline;text-decoration-color:rgba(156,200,255,.35);text-underline-offset:3px}
.prose a:not(.btn):hover{text-decoration-color:var(--ice)}
.prose blockquote{margin:1.4rem 0;padding:.9rem 1.2rem;border-left:3px solid var(--cyan);background:rgba(76,154,255,.05);border-radius:0 var(--radius) var(--radius) 0;color:var(--text)}
.prose-wide{max-width:none}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.lead-in{font-size:1.16rem;color:var(--ice);line-height:1.65;max-width:70ch}

/* ---- FAQ (native details, no script) ---- */
.faq{display:grid;gap:.6rem}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:rgba(12,22,34,.55);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1rem 3rem 1rem 1.2rem;font-weight:750;font-size:1.02rem;position:relative;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:.85rem;color:var(--cyan);font-size:1.4rem;font-weight:400;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq .faq-a{padding:.9rem 1.2rem 1.1rem;color:var(--muted);line-height:1.7}
.faq .faq-a p:last-child{margin-bottom:0}

/* ---- timeline ---- */
.timeline{list-style:none;margin:0;padding:0 0 0 1.4rem;border-left:2px solid var(--line);display:grid;gap:1.1rem}
.timeline li{position:relative;padding-left:.6rem}
.timeline li::before{content:"";position:absolute;left:-1.85rem;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--obsidian);border:2px solid var(--cyan);box-shadow:0 0 10px rgba(76,154,255,.5)}
.timeline time{display:block;color:var(--cyan);font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;margin-bottom:.15rem}
.timeline p{margin:0;color:var(--muted)}
.timeline b{color:var(--text)}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;counter-reset:step}
.step{position:relative;padding:1.3rem 1.2rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:rgba(12,22,34,.55)}
.step::before{counter-increment:step;content:"0" counter(step);display:block;font-family:var(--mono);color:var(--cyan);font-size:.8rem;letter-spacing:.1em;margin-bottom:.5rem}
.step h4{margin:0 0 .35rem;font-size:1.04rem}
.step p{margin:0;color:var(--muted);font-size:.94rem}

/* ---- maturity ---- */
.mat{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.3rem .7rem;font-weight:750;font-size:.76rem;border:1px solid transparent;white-space:nowrap}
.mat-live{background:rgba(108,229,177,.12);color:var(--green);border-color:rgba(108,229,177,.28)}
.mat-available{background:rgba(76,154,255,.12);color:var(--ice);border-color:rgba(76,154,255,.28)}
.mat-early{background:rgba(255,206,122,.12);color:var(--amber);border-color:rgba(255,206,122,.28)}
.mat-dev{background:rgba(159,178,194,.1);color:var(--muted);border-color:rgba(159,178,194,.22)}
.mat-internal{background:rgba(135,152,170,.14);color:var(--dim);border-color:rgba(135,152,170,.32)}
.mat-research{background:rgba(183,155,255,.12);color:var(--violet);border-color:rgba(183,155,255,.28)}

/* ---- surfaces (where it runs) ---- */
.surfaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem}
.surface{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 1rem;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:rgba(12,22,34,.5)}
.surface .sic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(76,154,255,.1);color:var(--cyan);font-weight:900;font-size:.72rem;letter-spacing:.06em;flex:0 0 36px}
.surface b{display:block;font-size:.95rem}
.surface span{display:block;color:var(--muted);font-size:.84rem}
.surface a{color:var(--ice);font-size:.84rem;font-weight:650}

/* ---- audience / solutions ---- */
.audience-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem}
.audience{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(160deg,rgba(16,31,46,.7),rgba(9,17,27,.85));transition:transform .16s,border-color .16s,box-shadow .16s}
.audience:hover{transform:translateY(-3px);border-color:rgba(76,154,255,.4);box-shadow:var(--glow)}
.audience .for{color:var(--cyan);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.audience h3{margin:0;font-size:1.2rem}
.audience p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.audience .products{color:var(--dim);font-size:.84rem}
.audience .products b{color:var(--muted);font-weight:650}

/* ---- pricing ---- */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem;align-items:stretch}
.price{display:flex;flex-direction:column;gap:.7rem;padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(160deg,rgba(16,31,46,.9),rgba(9,17,27,.92))}
.price.featured{border-color:rgba(76,154,255,.45);box-shadow:var(--glow)}
.price .tier{color:var(--cyan);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.price .amount{font-size:2rem;font-weight:850;letter-spacing:-.02em}
.price .amount small{font-size:.9rem;color:var(--muted);font-weight:600}
.price p{color:var(--muted);margin:0;font-size:.94rem}
.price ul{margin:.4rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem;color:#cddced;font-size:.92rem}
.price li::before{content:"✓ ";color:var(--green);font-weight:900}
.price .btn{margin-top:auto}

/* ---- notice (honest limits) ---- */
.notice{display:grid;gap:.5rem;padding:1.1rem 1.3rem;border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted);font-size:.94rem}
.notice h4{margin:0;color:var(--text);font-size:.95rem}
.notice ul{margin:0;padding-left:1.2rem}
.notice li{margin:.25rem 0}

/* ---- key-value strip ---- */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}
.kv div{padding:.9rem 1rem;border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:rgba(12,22,34,.5)}
.kv dt{color:var(--dim);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;font-weight:750;margin:0 0 .3rem}
.kv dd{margin:0;color:var(--text);font-weight:650;font-size:.95rem}

/* ---- quote ---- */
.quote{padding:1.6rem 1.8rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:rgba(12,22,34,.55);font-size:1.15rem;line-height:1.6;color:var(--text)}
.quote footer{margin-top:.8rem;color:var(--muted);font-size:.9rem}

/* ---- forms ---- */
.form{display:grid;gap:1rem}
.form label{display:grid;gap:.35rem;font-weight:650;font-size:.92rem;color:var(--text)}
.form input,.form select,.form textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--navy);color:var(--text);font-family:var(--font);font-size:.98rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(76,154,255,.15)}
.form textarea{min-height:150px;resize:vertical}
.form .hint{color:var(--dim);font-size:.82rem;font-weight:500}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-status{margin-top:.6rem;color:var(--muted);font-size:.92rem;min-height:1.4em}
.form-status.ok{color:var(--green)}
.form-status.err{color:var(--red)}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line-soft);padding:2.6rem 0;margin-top:3rem;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:1.6rem 1.4rem}
.foot h5{color:var(--text);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 .8rem}
.foot a{display:block;color:var(--muted);padding:.22rem 0;font-size:.92rem}
.foot a:hover{color:var(--cyan)}
.foot-note{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line-soft);font-size:.85rem;color:var(--dim);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.15rem;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line)}
.foot-legal a{color:var(--muted);font-size:.85rem;text-decoration:none;white-space:nowrap}
.foot-legal a:hover{color:var(--ice)}
.foot-compliance{color:var(--muted);font-size:.8rem;line-height:1.5;max-width:80ch;margin-top:.9rem}
.foot-compliance a{display:inline;color:var(--ice);padding:0}

/* ---- utilities ---- */
.mt-0{margin-top:0}.mt-1{margin-top:.6rem}.mt-2{margin-top:1.2rem}.mt-3{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:1.2rem}
.pt-0{padding-top:0}.pb-0{padding-bottom:0}
.justify-center{justify-content:center}
.maxw{max-width:70ch}
.text-ice{color:var(--ice)}.text-green{color:var(--green)}.text-amber{color:var(--amber)}
.h2-lg{font-size:2rem}
.small{font-size:.88rem}
.list-plain{list-style:none;margin:0;padding:0}
.inline-links a{color:var(--ice);font-weight:650}
.inline-links a + a::before{content:" · ";color:var(--dim);font-weight:400}

/* ---- responsive ---- */
@media(max-width:900px){
  .grid-2,.grid-3,.grid-4,.two-col,.features.two{grid-template-columns:1fr}
  .hero-split{grid-template-columns:1fr}
  .hero-split .shot{transform:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .card-feature{grid-column:span 1}
  .form .row{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:.1rem;padding:.4rem 0 .8rem;margin-left:0}
  .nav a{padding:.7rem .8rem;border-radius:10px}
  .nav a.cta{text-align:center;margin-top:.3rem}
  .nav-toggle-input:checked ~ .nav{display:flex}
  .subnav{top:68px}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .hero-metrics{gap:1.2rem}
  .compare{min-width:640px}
}

/* ============ Migrated content compatibility (Insights / Solutions / Platform) ============ */
.article-shell,.guide-content,.narrow{max-width:880px;margin-inline:auto}
.page-hero,.article-hero{padding:2.6rem 0 1rem}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:820px){.hero-grid,.split{grid-template-columns:1fr}}
.hero-copy{min-width:0}
.action-row,.related-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.section.alt{background:var(--navy)}
.section.compact{padding:2.4rem 0}
.section-tint{background:var(--panel)}
.breadcrumbs{display:flex;gap:.5rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin-bottom:1rem}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--ice)}
.article-page h1,.guide-content h1{font-size:2.25rem;line-height:1.15;margin:.4rem 0}
.article-content h2,.guide-content h2,.guide-section h2{font-size:1.5rem;margin:1.9rem 0 .6rem}
.article-content h3,.guide-content h3{font-size:1.15rem;margin:1.4rem 0 .5rem}
.lead,.article-page .lede{font-size:1.14rem;color:var(--ice);line-height:1.6;max-width:72ch}
.byline{color:var(--muted);font-size:.9rem;margin-top:.5rem}
.editorial-note{color:var(--muted);font-size:.88rem;border-left:2px solid var(--line);padding-left:1rem;margin:1.2rem 0}
.article-content p,.guide-content p,.guide-section p,.hero-copy p{color:var(--muted);line-height:1.75;margin:.75rem 0;max-width:76ch}
.article-content ul,.article-content ol,.guide-content ul{color:var(--muted);line-height:1.7;padding-left:1.2rem;max-width:76ch}
.article-content li,.guide-content li{margin:.35rem 0}
.text-link{color:var(--cyan);text-decoration:none}
.text-link:hover{text-decoration:underline}
.article-page time,.guide-content time{color:var(--ice)}
.product-card,.outcome-card,.problem-card,.quote-card,.numbered-card,.hero-panel,.related-panel,.cta-panel,.decision-box,.answer-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.4rem}
.card-grid,.product-grid,.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1.2rem}
.product-card h3,.outcome-card h3,.problem-card h3{margin-bottom:.4rem;font-size:1.1rem}
.product-card p,.outcome-card p,.problem-card p{color:var(--muted);line-height:1.6;font-size:.94rem}
.card-topline,.kicker{color:var(--cyan);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem;display:block}
.phero .kicker{display:inline-flex;text-transform:none;letter-spacing:0;font-size:inherit;color:inherit}
.answer-box>span,.decision-box>span{display:block;color:var(--cyan);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.signal-number,.guide-number{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 .4rem;border-radius:8px;background:rgba(76,154,255,.12);color:var(--cyan);font-weight:800;font-size:.9rem;margin-bottom:.5rem}
.badge,.status{display:inline-flex;align-items:center;gap:.4rem;padding:.15rem .6rem;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ice);font-size:.72rem;font-weight:700}
.button{display:inline-flex;align-items:center;gap:.4rem;padding:.72rem 1.15rem;border-radius:12px;font-weight:700;font-size:.92rem;text-decoration:none;border:1px solid var(--line);color:var(--text)}
.button.primary{background:var(--cyan);color:#04121b;border-color:transparent}
.button.secondary{background:transparent;color:var(--ice)}
.button:hover{border-color:var(--cyan)}
/* Same protection as .btn: the migrated pages use .button, and a container link rule
   would otherwise repaint a filled button's label to a link colour. */
a.button.primary,a.button.primary:hover{color:#04121b}
a.button.secondary{color:var(--ice)}
.screenshot-frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:1.2rem 0}
.screenshot-frame img{width:100%;display:block}
.screen-label{color:var(--muted);font-size:.85rem;padding:.6rem .9rem}
.cta-band,.cta-panel{background:linear-gradient(120deg,var(--panel),var(--navy));border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;text-align:center;margin-top:1.5rem}
.check-list{list-style:none;padding-left:0;color:var(--muted);line-height:1.7}
.check-list li{position:relative;padding-left:1.6rem;margin:.5rem 0}
.check-list li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;margin-top:1.5rem}
.post-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;text-decoration:none;transition:border-color .15s,transform .15s}
.post-card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.post-card .post-date{color:var(--cyan);font-size:.78rem;font-weight:700;letter-spacing:.04em}
.post-card h3{color:var(--text);font-size:1.06rem;margin:.4rem 0 .3rem;line-height:1.3}
.post-card p{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0}

/* ============ Grounded product-help assistant widget ============ */
.asl-assist-launch{position:fixed;right:20px;bottom:20px;z-index:9998;display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border:1px solid var(--line);border-radius:999px;background:var(--cyan);color:#04121b;font-family:var(--font);font-weight:800;font-size:.92rem;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.asl-assist-launch:hover{filter:brightness(1.06)}
.asl-assist-launch.asl-assist-hidden{display:none}
.asl-assist-launch svg{display:block}
.asl-assist-panel{position:fixed;right:20px;bottom:20px;z-index:9999;width:min(400px,calc(100vw - 40px));height:min(600px,calc(100vh - 40px));display:none;flex-direction:column;background:var(--navy);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,.5);font-family:var(--font)}
.asl-assist-panel.asl-assist-open{display:flex}
.asl-assist-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid var(--line);background:var(--panel)}
.asl-assist-title{color:var(--text);font-weight:800;font-size:.95rem}
.asl-assist-close{background:none;border:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem}
.asl-assist-close:hover{color:var(--ice)}
.asl-assist-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem}
.asl-assist-msg{display:flex}
.asl-assist-msg.user{justify-content:flex-end}
.asl-assist-col{display:flex;flex-direction:column;max-width:88%;gap:.4rem}
.asl-assist-msg.user .asl-assist-col{align-items:flex-end}
.asl-assist-bubble{max-width:100%;padding:.65rem .85rem;border-radius:12px;font-size:.92rem;line-height:1.55;white-space:pre-wrap}
.asl-assist-msg.bot .asl-assist-bubble{background:var(--panel);color:var(--text);border:1px solid var(--line);border-top-left-radius:3px}
.asl-assist-msg.user .asl-assist-bubble{background:var(--cyan);color:#04121b;border-top-right-radius:3px;font-weight:600}
.asl-assist-loading{color:var(--muted);letter-spacing:3px}
.asl-assist-cites{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.asl-assist-cites-label{color:var(--muted);font-size:.75rem}
.asl-assist-cite{display:inline-block;padding:.2rem .55rem;border:1px solid var(--line);border-radius:999px;color:var(--cyan);font-size:.76rem;text-decoration:none}
.asl-assist-cite:hover{border-color:var(--cyan)}
.asl-assist-hint{margin-top:.5rem;font-size:.82rem;color:var(--muted)}
.asl-assist-link{color:var(--cyan);text-decoration:none}
.asl-assist-suggest{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 1rem .6rem}
.asl-assist-chip{padding:.3rem .65rem;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ice);font-family:var(--font);font-size:.78rem;cursor:pointer}
.asl-assist-chip:hover{border-color:var(--cyan)}
.asl-assist-form{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--line);background:var(--panel)}
.asl-assist-input{flex:1;padding:.6rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--navy);color:var(--text);font-family:var(--font);font-size:.9rem}
.asl-assist-input:focus{outline:none;border-color:var(--cyan)}
.asl-assist-send{padding:.6rem .9rem;border:none;border-radius:10px;background:var(--cyan);color:#04121b;font-weight:800;font-size:.85rem;cursor:pointer}
.asl-assist-send:disabled{opacity:.5;cursor:default}
.asl-assist-feedback{margin-top:.5rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.asl-assist-fb-q{color:var(--muted)}
.asl-assist-fb-btn{padding:.15rem .55rem;border:1px solid var(--line);border-radius:999px;background:none;color:var(--cyan);font-size:.75rem;cursor:pointer;font-family:var(--font)}
.asl-assist-fb-btn:hover{border-color:var(--cyan)}
.asl-assist-fb-btn:disabled{opacity:.5;cursor:default}
@media(max-width:520px){.asl-assist-panel{right:10px;bottom:10px;width:calc(100vw - 20px);height:calc(100vh - 20px)}}

/* Feature, step and notice headings are h3 for document structure (they sit under an h2)
   but keep the smaller visual weight the layout was designed around. */
.feature h3.fh,.panel .feature h3.fh{margin:0 0 .25rem;font-size:1.02rem;font-weight:800}
.feature-list .feature h3.fh{font-size:1.08rem}
.step h3.sh{margin:0 0 .35rem;font-size:1.04rem;font-weight:800}
.notice h3.nh{margin:0;color:var(--text);font-size:.95rem;font-weight:800}
.foot .foot-h{color:var(--text);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 .8rem;font-weight:800}
.card-who b{color:var(--muted);font-weight:750}

/* SMS consent row on the contact form: a real checkbox beside its disclosure, links kept
   readable, never pre-checked. Twilio's A2P review screenshots this element. */
.consent-check{display:flex;gap:.65rem;align-items:flex-start;margin:.35rem 0 .75rem;font-size:.92rem;line-height:1.5}
.consent-check input[type="checkbox"]{flex:0 0 auto;width:1.05rem;height:1.05rem;margin:.2rem 0 0;accent-color:#4c9aff}
.consent-check label{margin:0;font-weight:400;cursor:pointer}
.consent-check a{text-decoration:underline}

/* ==== ASL v3 theme — navy / brushed silver / electric blue (2026-09-08) ====
   Visual layer only. Every class name, id and layout hook defined above is kept; this
   block re-skins those components to match the brand art (assets/og.png and the ASL
   logo): a deep navy ground, brushed-silver display type, a glowing blue shield.
   Mint #6ce5b1 stays the semantic success colour. Text content is untouched.
   Applied by build/apply-theme.mjs from build/theme/design-system.v3.css. */
:root{
  --obsidian:#040914; --navy:#071328; --panel:#0b1a35; --panel-2:#10234a;
  --line:#1e3a66; --line-soft:#152c52;
  --text:#eef3ff; --muted:#a9b9d8; --dim:#7f90b3;
  --cyan:#4c9aff; --ice:#9cc8ff; --blue-deep:#1f5fc9;
  --silver-a:#ffffff; --silver-b:#dfe7f5; --silver-c:#a3b3cc;
  --glow:0 0 0 1px rgba(76,154,255,.18), 0 24px 70px -24px rgba(76,154,255,.38);
  --shadow:0 28px 80px -30px rgba(0,0,0,.85);
}
::selection{background:rgba(76,154,255,.45);color:#fff}
:focus-visible{outline:2px solid #9cc8ff;outline-offset:3px}

/* ---- ground: navy gradient, a soft blue nebula from the brand render, faint grid ---- */
body{
  background:
    radial-gradient(1300px 760px at 82% -8%, rgba(53,128,255,.26), transparent 62%),
    radial-gradient(760px 520px at 8% 6%, rgba(53,128,255,.10), transparent 58%),
    linear-gradient(180deg,#081a3d 0%,#050d21 30rem,#03070f 100%);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(130,170,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,170,255,.05) 1px,transparent 1px);
  background-size:4.5rem 4.5rem;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72vh);
  mask-image:linear-gradient(to bottom,#000,transparent 72vh);
}

/* ---- brushed-silver display type (h1/h2); descendants paint solid so links and the
   accent span never go transparent) ---- */
h1,h2{
  color:#eef3ff;
  background:linear-gradient(180deg,#ffffff 0%,#e7edf8 42%,#aebdd4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
h1 *,h2 *{-webkit-text-fill-color:currentColor}
h1 .accent,.hero h1 .accent,.phero h1 .accent{color:#6fb1ff;-webkit-text-fill-color:#6fb1ff}
.hero h1{filter:drop-shadow(0 12px 40px rgba(76,154,255,.22))}

/* ---- header ---- */
.topbar{background:rgba(4,9,20,.66);border-bottom:1px solid rgba(76,154,255,.16);box-shadow:0 10px 40px -24px rgba(0,0,0,.8)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(76,154,255,.6),transparent)}
.brand b{
  font-weight:900;font-size:.95rem;letter-spacing:.07em;text-transform:uppercase;color:#eef3ff;
  background:linear-gradient(180deg,#ffffff 0%,#e2e9f5 48%,#9fb0c9 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.brand span{color:var(--dim);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.brand img{filter:drop-shadow(0 0 10px rgba(76,154,255,.55))}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;background:rgba(76,154,255,.12);box-shadow:inset 0 0 0 1px rgba(76,154,255,.22)}
.nav a.cta,.subnav a.cta{color:#061229;background-image:linear-gradient(180deg,#ffffff 0%,#dbe5f5 55%,#b9c8e0 100%);background-color:#c9d6e9;box-shadow:0 10px 26px -12px rgba(76,154,255,.8),inset 0 1px 0 #fff}
.nav a.cta:hover,.subnav a.cta:hover{color:#061229;background-image:linear-gradient(180deg,#ffffff 0%,#eef3fb 55%,#ccd9ec 100%);background-color:#d8e2f0}
.nav-toggle{border-color:rgba(76,154,255,.35)}
.subnav{background:rgba(4,9,20,.8);border-bottom-color:rgba(76,154,255,.14)}

/* ---- buttons: brushed silver primary, glass ghost ---- */
.btn-primary,a.btn-primary,.button.primary,a.button.primary{
  color:#061229;background-image:linear-gradient(180deg,#ffffff 0%,#dbe5f5 55%,#b6c6df 100%);background-color:#c9d6e9;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 14px 36px -14px rgba(76,154,255,.75),0 0 0 1px rgba(76,154,255,.25),inset 0 1px 0 #fff;
}
.btn-primary:hover,a.btn-primary:hover,.button.primary:hover,a.button.primary:hover{
  color:#061229;background-image:linear-gradient(180deg,#ffffff 0%,#eef3fb 55%,#ccd9ec 100%);background-color:#d8e2f0;
  box-shadow:0 18px 44px -14px rgba(76,154,255,.95),0 0 0 1px rgba(120,180,255,.5),inset 0 1px 0 #fff;
  transform:translateY(-1px);
}
.btn-ghost,a.btn-ghost,.button.secondary,a.button.secondary{
  color:var(--text);background:rgba(8,20,44,.55);border:1px solid rgba(76,154,255,.32);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.btn-ghost:hover,a.btn-ghost:hover,.button.secondary:hover{
  color:#fff;border-color:rgba(120,180,255,.75);background:rgba(76,154,255,.12);
  box-shadow:0 0 0 1px rgba(76,154,255,.2),0 12px 30px -16px rgba(76,154,255,.6);
}
.button{border-color:rgba(76,154,255,.3)}
.button:hover{border-color:#9cc8ff}

/* ---- hero: copy on the left, the brand shield on the right (decorative, no text) ---- */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero .shell{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero .shell>*{grid-column:1;min-width:0}
.hero .shell::after{
  content:"";grid-column:2;grid-row:1/span 9;justify-self:end;align-self:center;
  width:100%;max-width:400px;aspect-ratio:669/909;
  background:url(/assets/art/hero-shield.webp) center/contain no-repeat;
  filter:drop-shadow(0 30px 60px rgba(30,100,255,.35));
  animation:aslFloat 7s ease-in-out infinite;
}
.hero .shell:has(.hero-metrics)::after{max-width:560px}
@keyframes aslFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-metrics{border-top-color:rgba(76,154,255,.2)}
.hero-metric b{color:#fff;text-shadow:0 0 18px rgba(76,154,255,.35)}
@media(max-width:900px){
  .hero .shell{grid-template-columns:1fr}
  .hero .shell::after{grid-column:1;grid-row:1;justify-self:center;max-width:min(58vw,300px);margin-bottom:.4rem}
  .hero .shell:has(.hero-metrics)::after{max-width:min(58vw,300px)}
}

/* ---- product hero: the shield as a faint watermark behind the title ---- */
.phero{position:relative;isolation:isolate;overflow:hidden}
.phero::before{
  content:"";position:absolute;z-index:-1;right:-3%;top:-8%;width:min(44%,540px);aspect-ratio:1;pointer-events:none;
  background:url(/assets/art/shield-square.webp) center/contain no-repeat;opacity:.36;
}
@media(max-width:900px){.phero::before{opacity:.2;width:70%;right:-25%}}

/* ---- sections and surfaces: glass panels on navy ---- */
.band{background:linear-gradient(180deg,rgba(9,23,48,0),rgba(9,23,48,.85) 18%,rgba(9,23,48,.85) 82%,rgba(9,23,48,0));border-top:1px solid rgba(76,154,255,.12);border-bottom:1px solid rgba(76,154,255,.12)}
.section.alt,.section-tint{background:linear-gradient(180deg,rgba(9,23,48,.6),rgba(6,15,32,.6))}
.divider{background:linear-gradient(90deg,transparent,rgba(76,154,255,.45),transparent)}
.panel,.card,.audience,.price,.post-card,.step,.feature-list .feature,.faq details,.surface,.kv div,.proof,.quote,.cta-inline,.table-wrap,.notice,.product-card,.outcome-card,.problem-card,.quote-card,.numbered-card,.hero-panel,.related-panel,.cta-panel,.decision-box,.answer-box,.screenshot-frame,.shot{
  background:linear-gradient(160deg,rgba(15,35,74,.72),rgba(6,17,38,.88));
  border-color:rgba(76,154,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 70px -34px rgba(0,0,0,.9);
}
.callout{background:linear-gradient(160deg,rgba(15,35,74,.6),rgba(6,17,38,.8));border-color:rgba(76,154,255,.18);border-left-color:var(--cyan)}
.callout.green{border-left-color:var(--green)}
.callout.amber{border-left-color:var(--amber)}
.card:hover,.audience:hover,.post-card:hover{
  border-color:rgba(120,180,255,.6);
  background:linear-gradient(160deg,rgba(20,44,90,.82),rgba(8,20,44,.92));
  box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.08);
}
.panel-cyan{border-color:rgba(76,154,255,.45);box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.06)}
.panel-flat{background:rgba(9,22,46,.5);box-shadow:none}
.price.featured{border-color:rgba(120,180,255,.6);box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.06)}
.card-ic,.fic,.feature-num,.sic,.signal-number,.guide-number{
  color:#bfe0ff;background:linear-gradient(160deg,rgba(76,154,255,.24),rgba(31,95,201,.14));
  border:1px solid rgba(120,180,255,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -10px rgba(76,154,255,.6);
  text-shadow:0 0 12px rgba(76,154,255,.55);
}
.features li::before{background:#4c9aff;box-shadow:0 0 10px rgba(76,154,255,.8)}
.timeline li::before{border-color:#4c9aff;box-shadow:0 0 12px rgba(76,154,255,.7)}
.compare thead th{background:#0b1a35}
.compare tbody th{background:rgba(11,26,53,.9)}
.faq details[open] summary{border-bottom-color:rgba(76,154,255,.18)}
.shot-cap{border-top-color:rgba(76,154,255,.16)}

/* ---- call-to-action band: glow plus the render's base strip along the floor ---- */
.ctaband{
  border-color:rgba(76,154,255,.35);
  background:
    linear-gradient(180deg,rgba(11,26,53,.55),rgba(6,17,38,.55)),
    url(/assets/art/band.webp) center bottom / 100% auto no-repeat,
    radial-gradient(700px 320px at 50% -30%,rgba(76,154,255,.3),transparent 70%),
    linear-gradient(160deg,#0f2349,#071328);
  box-shadow:var(--glow),inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- forms ---- */
.form input,.form select,.form textarea{background:#061127;border-color:rgba(76,154,255,.28)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#4c9aff;box-shadow:0 0 0 3px rgba(76,154,255,.22)}
.consent-check input[type="checkbox"]{accent-color:#4c9aff}

/* ---- footer ---- */
.foot{border-top:1px solid rgba(76,154,255,.14);background:linear-gradient(180deg,rgba(4,9,20,0),rgba(3,7,15,.92) 30%)}
.foot-legal{border-bottom-color:rgba(76,154,255,.16)}
.foot-note{border-top-color:rgba(76,154,255,.12)}

/* ---- grounded assistant widget (same classes; navy glass, blue accents) ---- */
.asl-assist-launch{
  color:#dbe9ff;background:linear-gradient(180deg,rgba(15,35,74,.96),rgba(7,19,40,.98));
  border:1px solid rgba(120,180,255,.5);
  box-shadow:0 0 0 1px rgba(76,154,255,.25),0 14px 36px -12px rgba(76,154,255,.7);
}
.asl-assist-launch:hover{filter:none;border-color:#9cc8ff;box-shadow:0 0 0 1px rgba(120,180,255,.5),0 18px 44px -12px rgba(76,154,255,.9)}
.asl-assist-panel{background:#071328;border-color:rgba(76,154,255,.3);box-shadow:0 0 0 1px rgba(76,154,255,.15),0 24px 70px rgba(0,0,0,.6)}
.asl-assist-head,.asl-assist-form{background:#0b1a35;border-color:rgba(76,154,255,.2)}
.asl-assist-msg.bot .asl-assist-bubble{background:#0b1a35;border-color:rgba(76,154,255,.2)}
.asl-assist-msg.user .asl-assist-bubble{background-image:linear-gradient(180deg,#3f8dff,#2563d8);background-color:#2563d8;color:#fff}
.asl-assist-send{color:#061229;background-image:linear-gradient(180deg,#ffffff 0%,#dbe5f5 55%,#b6c6df 100%);background-color:#c9d6e9}
.asl-assist-chip,.asl-assist-cite,.asl-assist-fb-btn{color:#bfe0ff;border-color:rgba(76,154,255,.35)}
.asl-assist-chip:hover,.asl-assist-cite:hover,.asl-assist-fb-btn:hover{border-color:#9cc8ff}
.asl-assist-input{background:#061127;border-color:rgba(76,154,255,.28)}
.asl-assist-input:focus{border-color:#4c9aff}
.asl-assist-link,.asl-assist-close:hover{color:#9cc8ff}

@media print{
  h1,h2,.brand b{background:none;-webkit-text-fill-color:#111;color:#111}
  body::before,.hero .shell::after,.phero::before{display:none}
}
/* ==== end ASL v3 theme ==== */

/* BizManager console, on the AutoSecureLogin design system. Shell and
   controls copied from Rochelle's Treasures admin.css; phone first: bottom
   tab bar, big touch targets, sticky save bar. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2")}

:root{
  --display:"Inter",system-ui,sans-serif;
  --side:252px;
  --top:64px;
  --hair:rgba(76,154,255,.18);
  --hair-2:rgba(76,154,255,.28);
  --glass:linear-gradient(160deg,rgba(15,35,74,.72),rgba(6,17,38,.9));
  --field:#061127;
  /* charts: validated against the chart surface below (dataviz validator, dark mode) */
  --chart-surface:#0b1a35;
  --series-1:#4089f0;
  --series-2:#d95926;
  --grid:#172a4f;
  --axis:#2a4270;
  --ink-2:#c7d4ec;
  scrollbar-color:#1e3a66 transparent;
}
body.adm{min-height:100vh;background-attachment:fixed}
.adm .ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.adm h1,.adm h2{background:none;-webkit-text-fill-color:currentColor;color:var(--text)}
.adm h1{font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:780;letter-spacing:-.02em;margin:0}
.adm h2{font-size:1.12rem;font-weight:760;letter-spacing:-.01em;margin:0 0 .8rem}
.adm h3{font-size:1rem;font-weight:720;margin:0 0 .5rem}
.adm p{margin:0 0 .8em}
.adm .link{color:#9cc8ff;font-weight:650}
.adm .link:hover{text-decoration:underline}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.small{font-size:.86rem}
.tiny{font-size:.76rem}
.num{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.row.between{justify-content:space-between}
/* `hidden` must win over any display a class sets (badges, dialog fields). */
[hidden]{display:none!important}
.stack{display:grid;gap:1rem}
/* A grid child may shrink below its content, so one long line can't widen a screen. */
.stack>*{min-width:0}
.stack-sm{display:grid;gap:.55rem}
.grow{flex:1 1 auto;min-width:0}
.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.adm-noscript{padding:2rem;text-align:center;color:var(--muted)}

/* ---- boot + auth ---- */
/* The splash: the whole ASL platform artwork fills the screen while the app
   loads (letterboxed on portrait phones so the lock and lettering stay whole),
   with a slow glow and no text. app.js holds it about a second on the first
   open of a session so it reads as a splash, not a flicker. */
.adm-boot{position:fixed;inset:0;display:grid;place-items:center;background:#040914;overflow:hidden}
.adm-boot .adm-splash{width:100vw;height:100vh;object-fit:contain;object-position:center;animation:admSplash 2.4s ease-in-out infinite}
@keyframes admSplash{0%,100%{filter:brightness(.92) saturate(.95)}50%{filter:brightness(1.08) saturate(1.1)}}
.adm-auth{min-height:100vh;display:grid;place-items:center;align-content:center;gap:1rem;padding:1.2rem}
.adm-auth-card{width:min(420px,100%);padding:2rem 1.8rem}
.adm-auth-card .brand-lock{display:flex;align-items:center;gap:.7rem;margin-bottom:1.6rem}
.adm-auth-card h1{font-size:1.6rem;margin-bottom:.3rem}
.adm-auth-card form{display:grid;gap:1rem;margin-top:1.4rem}
.adm-auth-card button[type=submit]{width:100%}
.adm-auth-foot{margin-top:1.2rem;text-align:center}

/* ---- wordmark: BIZ over MANAGER, both capitals, in the ASL chrome ---- */
.adm-wordmark{display:flex;flex-direction:column;line-height:.92}
.adm-wordmark b{font-family:var(--font);font-style:normal;font-weight:900;font-size:1.5rem;letter-spacing:.3em;text-transform:uppercase;color:#eef3ff;background:linear-gradient(180deg,#ffffff 0%,#e3ebf6 42%,#8ea3bf 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.05em}
.adm-wordmark span{font-size:.9rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#4c9aff;margin-top:.22rem;padding-left:.04em}

/* ---- Lockups are contained: every word sits inside the same box as its
   artwork. The BizManager badge holds the icon and BIZ / MANAGER; the ASL
   badge holds "by" and the ASL logo (which is the ASL lettering itself). ---- */
.brand-box{display:inline-flex;align-items:center;gap:.7rem;padding:.5rem .95rem .5rem .6rem;border:1px solid rgba(76,154,255,.42);border-radius:14px;background:linear-gradient(160deg,rgba(18,42,86,.82),rgba(7,19,40,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px -18px rgba(76,154,255,.6);text-decoration:none}
.asl-lockup{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem .45rem .8rem;border:1px solid rgba(76,154,255,.42);border-radius:14px;background:linear-gradient(160deg,rgba(18,42,86,.82),rgba(7,19,40,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.07);color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.asl-lockup:hover{color:var(--text);border-color:rgba(76,154,255,.7)}
.asl-lockup img{height:40px;width:auto;filter:drop-shadow(0 0 12px rgba(76,154,255,.4))}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:1.4rem;flex-wrap:wrap}
.brand-row .brand-lock{margin:0}
/* Sidebar: the ASL badge spans the sidebar, logo on top, the full name inside beneath it. */
.asl-lockup-side{display:flex;justify-content:center;margin:.6rem .1rem .1rem;padding:.6rem .5rem}
.asl-lockup-side img{height:36px}

/* ---- sign-in screens: the ASL platform splash art behind the card, with the
   readability gradient the website's hero uses; on phones the art is a band
   above the card ---- */
.adm-auth{position:relative;isolation:isolate}
.adm-auth::before{content:"";position:fixed;inset:0;z-index:-2;background:#040914 url(/assets/brand/asl-splash.webp) center 42%/cover no-repeat;opacity:.62}
.adm-auth::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,9,20,.22) 0%,rgba(4,9,20,.52) 48%,rgba(4,9,20,.9) 100%)}
.adm-auth-card{background:linear-gradient(160deg,rgba(11,26,53,.88),rgba(5,13,30,.94));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(76,154,255,.18)}
@media (min-width:1100px){
  /* Wide screens: the card sits on the right and the lock + ASL lettering stay in view on the left. */
  .adm-auth{justify-items:end;padding-right:7vw}
  .adm-auth::before{right:34%;opacity:.82;background-position:center 46%}
  .adm-auth::after{background:linear-gradient(90deg,rgba(4,9,20,.12) 0%,rgba(4,9,20,.22) 44%,rgba(4,9,20,.9) 66%,rgba(4,9,20,.96) 100%)}
}
@media (max-width:640px){
  .adm-auth{align-content:start;padding-top:13rem}
  .adm-auth::before{background-size:auto 15.5rem;background-position:center top;opacity:.95}
  .adm-auth::after{background:linear-gradient(180deg,rgba(4,9,20,.05) 0,rgba(4,9,20,.05) 9rem,rgba(4,9,20,.86) 14rem,rgba(4,9,20,.96) 100%)}
  .brand-row{flex-wrap:wrap}
}

/* ---- shell ---- */
.adm-shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.adm-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1.2rem;padding:1.2rem .9rem;border-right:1px solid var(--hair);background:linear-gradient(180deg,rgba(4,9,20,.82),rgba(4,9,20,.7));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:40}
.adm-side .brand-lock{display:flex;align-items:center;gap:.65rem;padding:.2rem .5rem .6rem}
/* The nav scrolls between the wordmark and the footer, so the account, sign-out
   and ASL lockup stay in view on short screens. */
.adm-side{overflow:hidden}
.adm-nav{display:grid;gap:.15rem;align-content:start;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;padding-right:.1rem}
.adm-nav a{display:flex;align-items:center;gap:.75rem;padding:.62rem .75rem;border-radius:12px;color:var(--muted);font-weight:650;font-size:.95rem;transition:background .15s,color .15s}
.adm-nav a .ico{width:1.2rem;height:1.2rem}
.adm-nav a:hover{color:var(--text);background:rgba(76,154,255,.08)}
.adm-nav a[aria-current="page"]{color:#fff;background:rgba(76,154,255,.14);box-shadow:inset 0 0 0 1px rgba(76,154,255,.26)}
.adm-nav .adm-badge{margin-left:auto;min-width:22px;height:22px;padding:0 .4rem;display:inline-grid;place-items:center;border-radius:999px;background:#4c9aff;color:#04121b;font-size:.74rem;font-weight:850}
.adm-side-foot{margin-top:auto;display:grid;gap:.15rem;padding-top:.8rem;border-top:1px solid var(--hair)}
.adm-side-foot a,.adm-side-foot button{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:10px;border:0;background:none;color:var(--muted);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;text-align:left}
.adm-side-foot a:hover,.adm-side-foot button:hover{color:var(--text);background:rgba(76,154,255,.08)}
.adm-who{padding:.3rem .75rem;color:var(--dim);font-size:.8rem}
/* English / Spanish language switch */
.adm-lang{display:inline-flex;gap:.2rem;padding:.2rem;border:1px solid var(--hair);border-radius:999px;background:rgba(6,15,32,.55)}
.adm-lang .adm-lang-btn{padding:.34rem .8rem;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:.82rem;font-weight:650;cursor:pointer}
.adm-lang .adm-lang-btn[aria-pressed="true"]{background:rgba(76,154,255,.2);color:#fff;cursor:default}
.adm-lang .adm-lang-btn:not([aria-pressed="true"]):hover{color:var(--text);background:rgba(76,154,255,.08)}
.adm-side-foot .adm-lang{justify-self:start;margin:.45rem .55rem .1rem}
/* Email: what went out, one collapsible row each */
.adm-mail{border:1px solid var(--hair);border-radius:14px;background:rgba(6,15,32,.45)}
.adm-mail summary{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem .9rem;cursor:pointer;list-style:none}
.adm-mail summary::-webkit-details-marker{display:none}
.adm-mail-main{display:grid;gap:.1rem;min-width:0}
.adm-mail-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-mail-meta{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.adm-mail-body{padding:0 .9rem .9rem}
.adm-mail-text{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:.9rem;color:#cfdbef}
@media (max-width:560px){.adm-mail summary{flex-direction:column;align-items:flex-start}}
.adm-main{min-width:0;display:flex;flex-direction:column}
.adm-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;min-height:var(--top);padding:.7rem clamp(1rem,3vw,2rem);border-bottom:1px solid var(--hair);background:rgba(4,9,20,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.adm-top{flex-wrap:wrap;row-gap:.45rem}
/* The page title is never cut ("Fe..." beside three action buttons): it keeps at least 14rem and
   the actions that do not fit next to it wrap onto their own row. */
.adm-top-title{flex:1 1 14rem;min-width:0;display:flex;align-items:center;gap:.7rem}
.adm-top-title h1{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
.adm-back{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--hair);color:var(--muted);flex:none}
.adm-back:hover{color:#fff;border-color:#9cc8ff}
.adm-top-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.adm-top .adm-mobile-brand{display:none}
.adm-content{padding:clamp(1rem,3vw,2rem);padding-bottom:6rem;width:100%;max-width:1320px}
.adm-tabs{display:none}
.adm-scrim{display:none}

/* ---- buttons ---- */
.adm .btn{min-height:42px;padding:.6rem 1.05rem;font-size:.93rem}
.adm .btn-sm{min-height:34px;padding:.4rem .8rem;font-size:.85rem}
.adm .btn-lg{min-height:50px;font-size:1rem}
.btn-danger{background:rgba(255,141,155,.1);color:#ffb3bd;border:1px solid rgba(255,141,155,.35)}
.btn-danger:hover{background:rgba(255,141,155,.2);color:#fff}
.btn-quiet{background:none;border:0;color:var(--muted);min-height:34px;padding:.35rem .6rem}
.btn-quiet:hover{color:#fff;background:rgba(76,154,255,.1)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.55;cursor:default;pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--hair);background:rgba(8,20,44,.55);color:var(--ink-2);cursor:pointer;flex:none}
.icon-btn:hover{color:#fff;border-color:#9cc8ff;background:rgba(76,154,255,.14)}
.icon-btn.danger:hover{border-color:#ff8d9b;color:#ffb3bd;background:rgba(255,141,155,.12)}
.icon-btn[disabled]{opacity:.35;pointer-events:none}

/* ---- cards ---- */
.card-x{position:relative;border:1px solid var(--hair);border-radius:18px;background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px -34px rgba(0,0,0,.9);padding:1.2rem 1.25rem}
.card-x>h2:first-child,.card-x>.card-head:first-child{margin-top:0}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
.card-head h2{margin:0}
.card-flat{background:rgba(9,22,46,.5);box-shadow:none}
.card-accent{border-color:rgba(76,154,255,.42);box-shadow:var(--glow)}
.card-warn{border-color:rgba(255,206,122,.4);background:linear-gradient(160deg,rgba(60,44,10,.35),rgba(6,17,38,.9))}
.grid-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:1.2rem;align-items:start}
.grid-2x{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.grid-3x{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}

/* ---- stat tiles ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.9rem}
.kpi{padding:1rem 1.1rem;border:1px solid var(--hair);border-radius:16px;background:var(--glass)}
.kpi a{display:block}
.kpi-label{color:var(--muted);font-size:.8rem;font-weight:650;margin:0 0 .35rem}
.kpi-value{font-size:1.75rem;font-weight:720;letter-spacing:-.02em;line-height:1.1;color:#fff}
.kpi-sub{margin:.35rem 0 0;color:var(--dim);font-size:.8rem}
.delta{display:inline-flex;align-items:center;gap:.2rem;font-weight:750;font-size:.78rem}
.delta.up{color:#6ce5b1}
.delta.down{color:#ffb3bd}
.delta.flat{color:var(--dim)}

/* ---- chips ---- */
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:999px;border:1px solid transparent;font-size:.74rem;font-weight:750;white-space:nowrap;line-height:1.5}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.plain::before{display:none}
.chip-draft{color:#b9c6dc;background:rgba(159,178,194,.1);border-color:rgba(159,178,194,.24)}
.chip-available{color:#6ce5b1;background:rgba(108,229,177,.1);border-color:rgba(108,229,177,.3)}
.chip-on_hold{color:#ffce7a;background:rgba(255,206,122,.1);border-color:rgba(255,206,122,.32)}
.chip-sold{color:#ffb3bd;background:rgba(255,141,155,.1);border-color:rgba(255,141,155,.3)}
.chip-archived{color:#8798aa;background:rgba(135,152,170,.1);border-color:rgba(135,152,170,.25)}
.chip-blue{color:#9cc8ff;background:rgba(76,154,255,.12);border-color:rgba(76,154,255,.3)}
.chip-amber{color:#ffce7a;background:rgba(255,206,122,.1);border-color:rgba(255,206,122,.32)}
.chip-red{color:#ffb3bd;background:rgba(255,141,155,.1);border-color:rgba(255,141,155,.3)}
.chip-green{color:#6ce5b1;background:rgba(108,229,177,.1);border-color:rgba(108,229,177,.3)}
.chip-muted{color:#a9b9d8;background:rgba(159,178,194,.08);border-color:rgba(159,178,194,.2)}

/* ---- segmented tabs ---- */
/* Segmented tabs wrap onto a second row rather than scrolling: a hidden scrollbar hid whole
   tabs (Settings > Plan, PHI mode) with nothing to show they were there. */
.seg{display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;border:1px solid var(--hair);border-radius:14px;background:rgba(4,9,20,.5);max-width:100%}
.seg a,.seg button{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:10px;border:0;background:none;color:var(--muted);font:inherit;font-size:.87rem;font-weight:650;cursor:pointer;white-space:nowrap}
.seg a:hover,.seg button:hover{color:#fff}
.seg [aria-current="true"],.seg [aria-pressed="true"]{color:#061229;background:linear-gradient(180deg,#fff,#d4dfef);box-shadow:0 6px 16px -8px rgba(76,154,255,.7)}
.seg [aria-current="true"]:hover,.seg [aria-pressed="true"]:hover{color:#061229}
.seg .count{font-size:.72rem;font-weight:800;opacity:.75}
.toolbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}

/* ---- fields ---- */
.fld{display:grid;gap:.35rem;min-width:0}
.fld>label,.fld>.fld-label{font-weight:650;font-size:.9rem;color:var(--text)}
.fld .hint{color:var(--dim);font-size:.8rem;font-weight:500}
.fld .err-msg{color:#ffb3bd;font-size:.82rem;font-weight:600}
.fld input:not([type=checkbox]):not([type=radio]):not([type=file]),.fld select,.fld textarea,.inp{
  width:100%;min-height:44px;padding:.62rem .85rem;border:1px solid var(--hair-2);border-radius:12px;background:var(--field);color:var(--text);font:inherit;font-size:.96rem;transition:border-color .15s,box-shadow .15s}
.fld textarea{min-height:110px;resize:vertical;line-height:1.55}
.fld select,.inp-select{appearance:none;-webkit-appearance:none;padding-right:2.2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239cc8ff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:15px}
.fld select option,.inp-select option{background:#071328}
.fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{outline:none;border-color:#4c9aff;box-shadow:0 0 0 3px rgba(76,154,255,.22)}
.fld.has-err input,.fld.has-err select,.fld.has-err textarea{border-color:#ff8d9b;box-shadow:0 0 0 3px rgba(255,141,155,.15)}
.fld .affix{position:relative;display:flex;align-items:center}
.fld .affix>span{position:absolute;left:.85rem;color:var(--dim);font-weight:650;pointer-events:none}
.fld .affix input{padding-left:1.8rem!important}
.fld-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.fld-row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.fld-count{justify-self:end;color:var(--dim);font-size:.75rem}
.inp{min-height:40px}
textarea.inp{min-height:180px;line-height:1.55;resize:vertical;font-size:.92rem}
.inp-select{min-height:40px;padding:.5rem 2.2rem .5rem .8rem;border:1px solid var(--hair-2);border-radius:12px;background-color:var(--field);color:var(--text);font:inherit;font-size:.9rem}
.search-inp{position:relative;flex:1 1 220px;display:flex;align-items:center;min-width:180px}
.search-inp .ico{position:absolute;left:.8rem;color:var(--dim)}
.search-inp input{padding-left:2.4rem}

/* switch */
.switch{display:flex;align-items:flex-start;gap:.8rem;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{position:relative;flex:none;width:44px;height:26px;margin-top:.05rem;border-radius:999px;background:#13264a;border:1px solid var(--hair-2);transition:background .2s,border-color .2s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#a9b9d8;transition:transform .2s,background .2s}
.switch input:checked+.track{background:#2563d8;border-color:#4c9aff}
.switch input:checked+.track::after{transform:translateX(18px);background:#fff}
.switch input:focus-visible+.track{outline:2px solid #9cc8ff;outline-offset:2px}
.switch .switch-text{display:grid;gap:.1rem}
.switch .switch-text b{font-weight:650;font-size:.93rem}
.switch .switch-text span{color:var(--dim);font-size:.8rem}

/* copy field */
.copy{display:flex;align-items:stretch;gap:.4rem;min-width:0}
.copy code,.copy .copy-val{flex:1;min-width:0;padding:.55rem .75rem;border:1px solid var(--hair);border-radius:10px;background:rgba(4,9,20,.6);font-family:var(--mono);font-size:.82rem;color:#cfe0ff;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.copy-block{white-space:pre-wrap!important;font-family:var(--font)!important;font-size:.9rem!important;max-height:260px;overflow:auto}

/* ---- lists & tables ---- */
.list{display:grid;gap:.5rem}
.item-row{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.7rem .8rem;border:1px solid var(--hair);border-radius:16px;background:var(--glass);transition:border-color .15s,background .15s;cursor:pointer}
.item-row:hover{border-color:rgba(156,200,255,.45);background:linear-gradient(160deg,rgba(20,44,90,.78),rgba(8,20,44,.92))}
.thumb{width:60px;height:60px;border-radius:12px;object-fit:cover;background:#0b1a35;border:1px solid var(--hair);display:grid;place-items:center;color:#4c7fd0;overflow:hidden}
.thumb-sm{width:44px;height:44px;border-radius:10px}
.item-row .title{font-weight:680;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-row .meta{display:flex;flex-wrap:wrap;gap:.3rem .7rem;margin-top:.25rem;color:var(--dim);font-size:.8rem}
.item-row .side{display:flex;align-items:center;gap:.8rem}
.item-row .row-price{font-weight:750;font-size:1.02rem;color:#fff;text-align:right}
.item-row .row-price s{display:block;font-size:.74rem;color:var(--dim);font-weight:600}
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:16px;background:rgba(6,15,32,.6)}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{padding:.7rem .85rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:middle}
.tbl th{color:var(--dim);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:rgba(11,26,53,.85);position:sticky;top:0;white-space:nowrap}
.tbl td.r,.tbl th.r{text-align:right}
.tbl td{font-variant-numeric:tabular-nums}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr.click{cursor:pointer}
.tbl tbody tr.click:hover td{background:rgba(76,154,255,.06)}
.tbl .t-title{font-weight:650;color:var(--text);font-variant-numeric:normal}
.minibar{display:block;height:6px;border-radius:0 4px 4px 0;background:var(--series-1);min-width:2px}

/* ---- empty ---- */
.empty{text-align:center;padding:2.4rem 1rem;color:var(--muted)}
.empty .ico-big{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:20px;margin-bottom:.9rem;color:#cfe4ff;background:linear-gradient(160deg,rgba(76,154,255,.24),rgba(31,95,201,.12));border:1px solid rgba(120,180,255,.36)}
.empty .ico-big .ico{width:1.8rem;height:1.8rem}
.empty h2,.empty h3{color:var(--text)}
.empty p{max-width:46ch;margin:0 auto 1rem}

/* ---- attention list ---- */
.attn{display:grid;gap:.5rem}
.attn-row{display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;border-radius:14px;border:1px solid var(--hair);background:rgba(6,15,32,.55)}
.attn-row .dot{width:9px;height:9px;border-radius:50%;flex:none;background:#4c9aff;box-shadow:0 0 10px rgba(76,154,255,.7)}
.attn-row.tone-amber .dot{background:#ffce7a;box-shadow:0 0 10px rgba(255,206,122,.6)}
.attn-row.tone-muted .dot{background:#8798aa;box-shadow:none}
.attn-row .txt{flex:1;min-width:0;font-size:.92rem}
.setup-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.setup-list li a,.setup-list li>span{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:12px;font-size:.92rem}
.setup-list li a:hover{background:rgba(76,154,255,.08)}
.setup-list .box{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--hair-2);display:grid;place-items:center;color:#04121b}
.setup-list .done .box{background:#6ce5b1;border-color:#6ce5b1}
.setup-list .done .lbl{color:var(--dim);text-decoration:line-through}
.meter{height:8px;border-radius:999px;background:rgba(76,154,255,.16);overflow:hidden}
.meter span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563d8,#4c9aff)}

/* ---- photo uploader ---- */
.drop{display:grid;place-items:center;gap:.6rem;padding:1.4rem 1rem;border:1.5px dashed rgba(120,180,255,.4);border-radius:18px;background:rgba(6,17,38,.5);text-align:center;transition:border-color .15s,background .15s}
.drop.is-over{border-color:#9cc8ff;background:rgba(76,154,255,.1)}
.drop .row{justify-content:center}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.7rem;margin-top:.9rem}
.photo{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:#0b1a35;cursor:grab}
.photo img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.photo.is-drag{opacity:.4}
.photo.is-target{outline:2px solid #9cc8ff;outline-offset:2px}
.photo .cover-tag{position:absolute;top:6px;left:6px;padding:.15rem .5rem;border-radius:999px;background:rgba(4,9,20,.78);border:1px solid rgba(156,200,255,.4);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#dbe9ff}
.photo .tools{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:.25rem;padding:.35rem;background:linear-gradient(180deg,transparent,rgba(3,8,18,.9))}
.photo .tools .icon-btn{width:30px;height:30px;border-radius:9px;background:rgba(4,9,20,.75)}
.photo .busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,9,20,.72);color:#dbe9ff;font-size:.78rem;font-weight:700;text-align:center;padding:.5rem}
.photo .busy .bar{position:absolute;left:10%;right:10%;bottom:14%;height:4px;border-radius:999px;background:rgba(76,154,255,.2);overflow:hidden}
.photo .busy .bar span{display:block;height:100%;width:0;background:#4c9aff;transition:width .15s}
.photo.failed .busy{color:#ffb3bd}

/* ---- save bar ---- */
.savebar{position:sticky;bottom:0;z-index:25;display:flex;align-items:center;justify-content:flex-end;gap:.6rem;flex-wrap:wrap;margin:1.2rem calc(-1 * clamp(1rem,3vw,2rem)) -6rem;padding:.8rem clamp(1rem,3vw,2rem) calc(.8rem + env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:rgba(4,9,20,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.savebar .state{margin-right:auto;color:var(--dim);font-size:.86rem;font-weight:600}
.savebar .state.dirty{color:#ffce7a}

/* ---- dialogs ---- */
.dlg{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);padding:0;border:1px solid rgba(120,180,255,.35);border-radius:20px;background:#071328;color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.dlg.wide{width:min(900px,calc(100vw - 24px))}
.dlg::backdrop{background:rgba(2,5,12,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dlg-inner{display:flex;flex-direction:column;max-height:calc(100vh - 26px)}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--hair)}
.dlg-head h2{margin:0;font-size:1.1rem}
.dlg-body{padding:1.1rem 1.2rem;overflow:auto;display:grid;gap:1rem}
.dlg-foot{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;padding:.9rem 1.2rem;border-top:1px solid var(--hair);background:rgba(11,26,53,.6)}
.menu{position:absolute;z-index:70;min-width:210px;padding:.35rem;border:1px solid rgba(120,180,255,.35);border-radius:14px;background:#0b1a35;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.menu button,.menu a{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;border:0;border-radius:9px;background:none;color:var(--ink-2);font:inherit;font-size:.9rem;text-align:left;cursor:pointer}
.menu button:hover,.menu a:hover{background:rgba(76,154,255,.14);color:#fff}
.menu .danger{color:#ffb3bd}
.menu hr{border:0;border-top:1px solid var(--hair);margin:.3rem 0}

/* ---- toasts ---- */
.toasts{position:fixed;z-index:100;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));translate:-50% 0;display:grid;gap:.5rem;width:min(460px,calc(100vw - 24px));pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:.6rem;padding:.8rem 1rem;border-radius:14px;border:1px solid rgba(120,180,255,.35);background:rgba(16,35,74,.97);color:#e4efff;font-weight:600;font-size:.92rem;box-shadow:0 18px 50px rgba(0,0,0,.55);pointer-events:auto;animation:toastIn .2s ease-out}
.toast.ok{border-color:rgba(108,229,177,.45)}
.toast.ok .ico{color:#6ce5b1}
.toast.err{border-color:rgba(255,141,155,.5);background:rgba(58,16,26,.97);color:#ffd2d8}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- charts (dark surface, one series; validated palette) ---- */
.chart{position:relative;background:var(--chart-surface);border:1px solid var(--hair);border-radius:14px;padding:.8rem .6rem .4rem}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .gridlines line{stroke:var(--grid);stroke-width:1}
.chart .baseline{stroke:var(--axis);stroke-width:1}
.chart .tick{fill:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.chart .area{fill:var(--series-1);fill-opacity:.1}
.chart .line{fill:none;stroke:var(--series-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .end{fill:var(--series-1);stroke:var(--chart-surface);stroke-width:2}
.chart .bar{fill:var(--series-1)}
.chart .bar.is-hot{fill:#6aa5ff}
.chart .xhair{stroke:#9cc8ff;stroke-width:1;opacity:0}
.chart .hover-dot{fill:var(--series-1);stroke:var(--chart-surface);stroke-width:2;opacity:0}
.chart.is-hover .xhair,.chart.is-hover .hover-dot{opacity:1}
.chart .end-label{fill:var(--text);font-size:12px;font-weight:700}
.chart-tip{position:absolute;z-index:5;pointer-events:none;min-width:120px;padding:.5rem .65rem;border-radius:10px;border:1px solid rgba(120,180,255,.35);background:rgba(4,9,20,.95);box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:.8rem;opacity:0;transition:opacity .1s}
.chart.is-hover .chart-tip{opacity:1}
.chart-tip .v{display:flex;align-items:center;gap:.45rem;font-size:1rem;font-weight:750;color:#fff}
.chart-tip .v::before{content:"";width:12px;height:2px;border-radius:2px;background:var(--series-1)}
.chart-tip .k{color:var(--muted);margin-top:.1rem}
.chart-tip.bar-tip .v::before{height:10px;width:10px;border-radius:3px}
.hbars{display:grid;gap:.55rem}
.hbar{display:grid;grid-template-columns:minmax(100px,190px) minmax(0,1fr) auto;align-items:center;gap:.7rem;font-size:.88rem;border-radius:8px;padding:.1rem .2rem}
.hbar:hover,.hbar:focus-visible{background:rgba(76,154,255,.06);outline:none}
.hbar .lbl{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .track{height:14px;display:flex;align-items:center}
.hbar .fill{height:14px;border-radius:0 4px 4px 0;background:var(--series-1);min-width:2px}
.hbar .val{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.tbl-toggle{margin-top:.6rem}
.tbl-toggle summary{cursor:pointer;color:#9cc8ff;font-size:.82rem;font-weight:650;list-style:none}
.tbl-toggle summary::-webkit-details-marker{display:none}
.tbl-toggle[open] summary{margin-bottom:.6rem}

/* ---- kit (Marketplace) ---- */
.kit-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.5rem}
.kit-photo{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--hair);cursor:pointer}
.kit-photo img{width:100%;height:100%;object-fit:cover}
.kit-photo input{position:absolute;top:6px;left:6px;width:18px;height:18px;accent-color:#4c9aff}
.kit-photo:has(input:not(:checked)) img{opacity:.35}
.kit-steps{margin:0;padding-left:1.2rem;color:var(--ink-2);display:grid;gap:.3rem;font-size:.92rem}
.kv-line{display:grid;grid-template-columns:120px minmax(0,1fr);gap:.6rem;align-items:center}
.kv-line>span{color:var(--dim);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ---- inbox ---- */
.inbox{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.3fr);gap:1.2rem;align-items:start}
.msg-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;padding:.8rem .9rem;border:1px solid var(--hair);border-radius:14px;background:rgba(6,15,32,.55);cursor:pointer}
.msg-row:hover{border-color:rgba(156,200,255,.4)}
.msg-row[aria-current="true"]{border-color:#9cc8ff;background:rgba(76,154,255,.1)}
.msg-row .who{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.msg-row .who b{font-weight:720}
.msg-row .excerpt{color:var(--muted);font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.15rem}
.msg-row.is-new .who b::after{content:"";display:inline-block;width:8px;height:8px;margin-left:.45rem;border-radius:50%;background:#4c9aff;box-shadow:0 0 8px #4c9aff;vertical-align:.1em}
.msg-body{white-space:pre-wrap;line-height:1.6;padding:1rem;border-radius:14px;background:rgba(4,9,20,.55);border:1px solid var(--hair)}
.msg-product{display:flex;align-items:center;gap:.8rem;padding:.6rem;border:1px solid var(--hair);border-radius:14px;background:rgba(6,15,32,.55)}

/* ---- settings ---- */
.settings{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.4rem;align-items:start}
.subnav-v{position:sticky;top:calc(var(--top) + 1rem);display:grid;gap:.15rem}
.subnav-v a{padding:.55rem .8rem;border-radius:10px;color:var(--muted);font-weight:650;font-size:.92rem}
.subnav-v a:hover{color:#fff;background:rgba(76,154,255,.08)}
.subnav-v a[aria-current="page"]{color:#fff;background:rgba(76,154,255,.14);box-shadow:inset 0 0 0 1px rgba(76,154,255,.26)}
.faq-edit{display:grid;gap:.8rem}
.faq-edit .faq-item{display:grid;gap:.5rem;padding:.9rem;border:1px solid var(--hair);border-radius:14px;background:rgba(6,15,32,.5)}
.cat-row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto auto;gap:.5rem;align-items:center;padding:.5rem;border:1px solid var(--hair);border-radius:12px;background:rgba(6,15,32,.5)}
.cat-row .count{color:var(--dim);font-size:.78rem;white-space:nowrap;padding:0 .3rem}
.steps-help{margin:0;padding-left:1.25rem;display:grid;gap:.45rem;color:var(--ink-2);font-size:.92rem}
.steps-help b{color:#fff}
.notice-x{padding:.8rem 1rem;border-radius:12px;border:1px dashed var(--hair-2);color:var(--muted);font-size:.88rem}
.notice-x b{color:var(--text)}
.help{color:var(--muted);font-size:.88rem}
.help b{color:var(--text)}

/* ---- responsive: phone first-class ---- */
@media (max-width:1100px){
  .grid-main{grid-template-columns:1fr}
  .inbox{grid-template-columns:1fr}
  .inbox.has-detail .inbox-list{display:none}
  .inbox:not(.has-detail) .inbox-detail{display:none}
}
@media (max-width:900px){
  .adm-shell{grid-template-columns:1fr}
  .adm-side{position:fixed;left:0;top:0;bottom:0;width:min(290px,84vw);transform:translateX(-102%);transition:transform .25s var(--ease,ease);box-shadow:20px 0 60px rgba(0,0,0,.6);background:#050c1c}
  .adm.menu-open .adm-side{transform:none}
  .adm.menu-open .adm-scrim{display:block;position:fixed;inset:0;z-index:35;background:rgba(2,5,12,.6)}
  .adm-top .adm-mobile-brand{display:inline-grid}
  .adm-top{padding:.55rem 1rem;min-height:58px}
  /* Phones: the title is never cut ("Tiemp...", "Im... de m..."). It keeps at least 9rem beside the
     menu button; actions that do not fit next to it move to their own row underneath. */
  /* Not sticky on phones: with its actions on a second row it would hold a fifth of the screen;
     the bottom tab bar (with More for the menu) stays fixed. */
  .adm-top{position:static}
  .adm-top-title{flex-basis:9rem}
  .adm-top-title h1{font-size:1.15rem;line-height:1.15}
  .adm-top-actions .btn{padding:.45rem .75rem}
  .adm-top-actions .hide-sm{display:none}
  .adm-tabs{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);padding:.35rem .4rem calc(.35rem + env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:rgba(4,9,20,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .adm-tabs a,.adm-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.35rem 0;border:0;background:none;color:var(--dim);font:inherit;font-size:.68rem;font-weight:700;cursor:pointer}
  .adm-tabs .ico{width:1.35rem;height:1.35rem}
  .adm-tabs [aria-current="page"]{color:#fff}
  .adm-tabs .add{color:#061229}
  .adm-tabs .add .plus{display:grid;place-items:center;width:46px;height:46px;margin-top:-14px;border-radius:16px;background:linear-gradient(180deg,#fff,#c9d6e9);box-shadow:0 10px 26px -8px rgba(76,154,255,.9)}
  .adm-tabs .adm-badge{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 .3rem;border-radius:999px;background:#4c9aff;color:#04121b;font-size:.66rem;font-weight:850;display:grid;place-items:center}
  .adm-content{padding-bottom:7.5rem}
  .savebar{bottom:calc(62px + env(safe-area-inset-bottom));margin-bottom:0;border-radius:16px;margin-left:0;margin-right:0;border:1px solid var(--hair)}
  .settings{grid-template-columns:1fr}
  .subnav-v{position:static;display:flex;overflow-x:auto;gap:.3rem;padding-bottom:.3rem;scrollbar-width:none}
  .subnav-v a{flex:0 0 auto;white-space:nowrap}
  .grid-2x,.grid-3x{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fld-row,.fld-row-3{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-value{font-size:1.4rem}
  .item-row{grid-template-columns:52px minmax(0,1fr);gap:.7rem}
  .item-row .thumb{width:52px;height:52px}
  .item-row .side{grid-column:2;justify-content:space-between}
  .cat-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"move name del" "move mp count"}
  .cat-row>.row{grid-area:move}
  .cat-row>.stack-sm{grid-area:name}
  .cat-row>input{grid-area:mp}
  .cat-row>.count{grid-area:count}
  .cat-row>.icon-btn{grid-area:del}
  .kv-line{grid-template-columns:1fr}
  .hbar{grid-template-columns:minmax(70px,100px) minmax(0,1fr) auto}
  .dlg{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0;margin:0}
  .dlg-inner{max-height:100vh;height:100%}
  .dlg-body{flex:1}
}
@media (prefers-reduced-motion:reduce){.adm-boot .adm-splash{animation:none}}

/* ---------------------------------------------------------------- BizManager core additions */
.seg [aria-current="page"]{color:#061229;background:linear-gradient(180deg,#fff,#d4dfef);box-shadow:0 6px 16px -8px rgba(76,154,255,.7)}
.chip-ok{color:#6ce5b1;background:rgba(108,229,177,.1);border-color:rgba(108,229,177,.3)}
.chip-bad{color:#ffb3bd;background:rgba(255,141,155,.1);border-color:rgba(255,141,155,.3)}
.chip-warn{color:#ffce7a;background:rgba(255,206,122,.1);border-color:rgba(255,206,122,.32)}
.chip-info{color:#9cc8ff;background:rgba(76,154,255,.12);border-color:rgba(76,154,255,.3)}
.chip-phi{color:#e9d5ff;background:rgba(168,85,247,.14);border-color:rgba(168,85,247,.35);margin:.2rem 0 .6rem}
.grid-2,.grid-3{display:grid;gap:.6rem;grid-template-columns:1fr}
@media (min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:2fr 1fr 1fr}}
.adm-banner{padding:.45rem 1rem;background:rgba(76,154,255,.12);border-bottom:1px solid var(--hair);color:var(--ink-2)}
.adm-nav-head{margin:1rem .75rem .25rem;text-transform:uppercase;letter-spacing:.08em}
.swatch{display:inline-block;width:.8rem;height:.8rem;border-radius:4px;background:var(--c,#2563eb);flex:none;border:1px solid rgba(255,255,255,.25)}
.mono{font-family:var(--mono,ui-monospace,monospace)}
.strong{font-weight:750}
.selectable{user-select:all;word-break:break-all}
.tr-link{cursor:pointer}
.tr-link:hover td{background:rgba(76,154,255,.06)}
.plans{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.plan-on{border-color:rgba(108,229,177,.45)}
.plan-price{font-size:1.5rem;font-weight:800;margin:0}
/* A card stretched to its grid row keeps its content at the top instead of
   spreading the rows (a shorter plan card looked vertically centered). */
.card-x.stack,.card-x.stack-sm,.plans .plan{align-content:start}
.stats{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat{display:grid;gap:.15rem;padding:.9rem 1rem;border:1px solid var(--hair);border-radius:14px;background:var(--glass)}
.stat-value{font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.list{display:grid;gap:.4rem;padding-left:1.1rem}

/* My account: the work-texts opt-in box. */
.acc-consent{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer}
.acc-consent input{margin-top:.25rem;flex:0 0 auto}

/* Console styles for module clients. */
.cl-detail{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.cl-cell{display:grid;gap:.1rem;min-width:0}
.cl-pre{white-space:pre-wrap;margin:0}
.cl-pager{justify-content:flex-end;margin-top:.8rem}
.cl-fieldset{border:1px solid var(--hair);border-radius:14px;padding:.8rem .9rem;margin:0}
.cl-fieldset legend{padding:0 .4rem;font-weight:650;font-size:.9rem}

/* properties */
.cl-prop{display:grid;gap:.5rem;padding:.8rem .9rem;border:1px solid var(--hair);border-radius:14px;background:rgba(6,15,32,.5)}
.cl-prop-head{gap:.45rem}
.cl-prop-head .ico{color:#9cc8ff}

/* notes */
.cl-notes{display:grid;gap:.6rem}
.cl-note{padding:.7rem .8rem;border:1px solid var(--hair);border-radius:12px;background:rgba(6,15,32,.5)}
.cl-note-body{white-space:pre-wrap;margin:0 0 .35rem}

/* photos and files */
.cl-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.8rem}
.cl-file{margin:0;display:grid;gap:.35rem;min-width:0}
.cl-file-thumb{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--hair);background:#0b1a35}
.cl-file-thumb img{width:100%;height:100%;object-fit:cover}
.cl-file-icon{display:grid;place-items:center;align-content:center;gap:.3rem;height:100%;color:#9cc8ff}
.cl-file figcaption{display:grid;gap:.15rem;min-width:0}
.cl-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* timeline */
.cl-tl{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.cl-tl-item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--hair)}
.cl-tl-item:last-child{border-bottom:0}
.cl-tl-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(76,154,255,.1);color:#9cc8ff}
.cl-tl-main{display:grid;gap:.2rem;min-width:0}

/* convert dialog */
.cl-pick{padding:.5rem .6rem;border:1px solid var(--hair);border-radius:12px;cursor:pointer}
.cl-pick:has(input:checked){border-color:#4c9aff;background:rgba(76,154,255,.1)}

/* setup */
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.cl-check{margin:0;padding-left:1.2rem;display:grid;gap:.2rem}
.cl-per-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr) auto;gap:.6rem;align-items:end}
.cl-try{padding:.8rem .9rem;border:1px dashed rgba(156,200,255,.4);border-radius:14px}
.cl-try h3{margin:0;font-size:1rem}
.cl-try-out{margin:0;font-size:1.15rem;font-weight:750}
.cl-try-out.is-err{font-size:.9rem;font-weight:600;color:#ffb3bd}

@media (max-width:900px){
  .cl-detail{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cl-per-row{grid-template-columns:1fr 1fr}
  .cl-files{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}
textarea.inp.cl-short{min-height:84px}

/* Console styles for module work: schedule grid, visit cards, line-item
   editor, totals, recurrence builder, checklists. Colours per crew/person
   arrive as the --c custom property (set through the CSSOM, CSP-safe). */

/* ---- schedule ---- */
.wk-toolbar{justify-content:space-between}
.wk-range{font-size:.95rem;margin-left:.3rem}
.wk-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem;align-items:start}
.wk-day{display:grid;gap:.45rem;align-content:start;min-height:9rem;padding:.5rem;border:1px solid var(--hair);border-radius:14px;background:var(--glass)}
.wk-day.is-today{border-color:rgba(76,154,255,.55);box-shadow:var(--glow)}
.wk-day-head{display:flex;justify-content:space-between;align-items:baseline;gap:.3rem}
.wk-day-head a{display:grid;color:var(--text);text-decoration:none;line-height:1.2}
.wk-day-head a:hover b{text-decoration:underline}
.wk-list{display:grid;gap:.5rem}
.wk-visit{--c:#2563eb;display:grid;gap:.3rem;padding:.5rem .6rem;border:1px solid var(--hair);border-left:4px solid var(--c);border-radius:10px;background:rgba(6,15,32,.55);min-width:0}
.wk-visit-link{display:grid;gap:.12rem;color:var(--text);text-decoration:none;min-width:0}
.wk-visit-link>*{overflow:hidden;text-overflow:ellipsis}
.wk-visit-link:hover b{text-decoration:underline}
.wk-visit-foot{justify-content:space-between;gap:.3rem}
.wk-when{font-weight:700;color:var(--muted)}
.wk-s-completed{opacity:.72}
.wk-s-skipped,.wk-s-cancelled{opacity:.55}
.wk-s-skipped .wk-visit-link b,.wk-s-cancelled .wk-visit-link b{text-decoration:line-through}
.wk-s-in_progress,.wk-s-en_route{background:rgba(255,206,122,.08)}
.wk-dot{--c:#2563eb;display:inline-block;width:.75rem;height:.75rem;border-radius:50%;background:var(--c);flex:0 0 auto}

@media (max-width:1100px){
  .wk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:720px){
  .wk-grid{grid-template-columns:minmax(0,1fr)}
  .wk-day{min-height:0}
  .wk-day-head a{display:flex;gap:.4rem;align-items:baseline}
}

/* ---- documents ---- */
.wk-big{font-size:1.6rem}
.wk-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem;margin:0}
.wk-kv dt{color:var(--dim);font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;align-self:center}
.wk-kv dd{margin:0;min-width:0}
.wk-pre{white-space:pre-wrap;margin:.3rem 0 0}
.wk-totals{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:.25rem 1.2rem;max-width:22rem;margin:.6rem 0 0 auto}
.wk-totals dt{color:var(--muted)}
.wk-totals dd{margin:0;text-align:right}
.wk-totals .strong{font-weight:800;color:var(--text);font-size:1.05rem}

/* ---- client picker ---- */
.wk-results{display:grid;gap:.3rem}
.wk-result{display:grid;gap:.1rem;text-align:left;padding:.5rem .7rem;border:1px solid var(--hair);border-radius:10px;background:rgba(6,15,32,.55);color:var(--text);font:inherit;cursor:pointer}
.wk-result:hover,.wk-result:focus-visible{border-color:rgba(156,200,255,.5)}

/* ---- line items ---- */
.wk-line{display:grid;gap:.4rem;padding:.6rem;border:1px solid var(--hair);border-radius:12px;background:rgba(6,15,32,.4)}
.wk-line-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:.4rem}
.wk-line-nums{display:grid;grid-template-columns:5.5rem 7rem minmax(0,1fr) auto;gap:.4rem;align-items:center}
.wk-line-total{text-align:right;font-weight:700}
@media (max-width:620px){
  .wk-line-main{grid-template-columns:minmax(0,1fr)}
  .wk-line-nums{grid-template-columns:4.5rem minmax(0,1fr) auto auto}
}

/* ---- recurrence, people ---- */
.wk-days,.wk-people{display:flex;flex-wrap:wrap;gap:.4rem .9rem;border:0;padding:0;margin:0}
.wk-days legend,.wk-people legend{font-weight:650;font-size:.9rem;margin-bottom:.3rem;padding:0}
.wk-daypick{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border:1px solid var(--hair);border-radius:999px;cursor:pointer}
.wk-daypick:has(input:checked){border-color:rgba(76,154,255,.6);background:rgba(76,154,255,.12)}
.wk-radio{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .8rem;border-radius:10px;cursor:pointer;color:var(--muted);font-weight:650;font-size:.87rem}
.wk-radio:has(input:checked){color:#061229;background:linear-gradient(180deg,#fff,#d4dfef)}
.wk-radio input{accent-color:#061229}

/* ---- checklist ---- */
.wk-check{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.wk-check label{align-items:flex-start;flex-wrap:nowrap;cursor:pointer}
.wk-check input{margin-top:.2rem;width:1.15rem;height:1.15rem;flex:0 0 auto}
.wk-check input:checked+span{color:var(--muted);text-decoration:line-through}

/* ---- short text areas (app.css gives textarea.inp a tall default) ---- */
textarea.inp.wk-note{min-height:5.5rem}

/* Console styles for module field: time clock, My day (phone first, large
   touch targets), route map, application log. Prefix fm-. */

/* Time clock */
.fm-clock-status{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-radius:14px;border:1px solid var(--hair);background:rgba(6,15,32,.55)}
.fm-clock-status p{margin:0}
.fm-clock-dot{width:12px;height:12px;border-radius:50%;background:#8798aa;flex:none}
.fm-clock-status.on{border-color:rgba(108,229,177,.4)}
.fm-clock-status.on .fm-clock-dot{background:#6ce5b1;box-shadow:0 0 0 4px rgba(108,229,177,.18)}
.fm-timer{margin-left:auto;font-size:1.6rem;font-weight:780;letter-spacing:.02em;color:var(--text)}
.adm .fm-big{min-height:64px;min-width:12rem;font-size:1.15rem;justify-content:center}
.fm-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.fm-totals .stat{display:grid;gap:.25rem;padding:.8rem 1rem;border:1px solid var(--hair);border-radius:14px;background:rgba(6,15,32,.5)}
.fm-totals .stat b{font-size:1.35rem}
.fm-ot,.fm-ot b{color:#ffce7a}

/* My day */
.fm-myday{max-width:760px}
.fm-daynav b{font-size:1.05rem}
.fm-clockbar{display:flex;align-items:center;gap:.6rem;min-height:52px;padding:.7rem 1rem;border-radius:14px;border:1px solid var(--hair);background:rgba(6,15,32,.55);color:var(--muted);font-weight:650}
.fm-clockbar b{margin-left:auto;font-size:1.15rem;color:var(--text)}
.fm-clockbar.on{border-color:rgba(108,229,177,.4);color:#6ce5b1}
.fm-visits,.fm-stops{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.fm-visit h2{margin:0;font-size:1.1rem}
.fm-visit p{margin:.35rem 0}
.fm-visit.is-done{opacity:.72}
.fm-addr{display:flex;gap:.4rem;align-items:flex-start;font-weight:650;color:var(--text)}
.fm-code{font-size:1.15rem;font-weight:800;letter-spacing:.08em;color:#9cc8ff}
.fm-stop{display:inline-grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:rgba(76,154,255,.18);border:1px solid rgba(76,154,255,.45);color:#cfe4ff;font-weight:800;flex:none}
.fm-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.adm .fm-actions .btn-lg{min-height:56px;flex:1 1 9rem;justify-content:center}
.fm-check{display:flex;align-items:center;gap:.7rem;min-height:48px;padding:.4rem .2rem;border-bottom:1px solid var(--line-soft)}
.fm-check input{width:24px;height:24px;flex:none}

/* Routes */
.fm-route-pick{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr) auto;gap:.8rem;align-items:end}
.fm-map{width:100%;height:auto;display:block}
.fm-map-bg{fill:var(--chart-surface)}
.fm-map-line{fill:none;stroke:var(--series-1);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.fm-map-depot{fill:var(--series-2);stroke:#fff;stroke-width:1.5}
.fm-map-stop circle{fill:#0b1a35;stroke:var(--series-1);stroke-width:2.5}
.fm-map-stop text{fill:#fff;font-size:12px;font-weight:800;font-family:var(--display)}
.fm-stops li{display:flex;align-items:center;gap:.7rem}
.fm-stops li>div{flex:1;min-width:0}
.fm-stops p{margin:0}
.fm-unlocated{opacity:.7}

/* Applications */
.fm-req{color:#ffce7a;font-weight:800}
.fm-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto auto;gap:.8rem;align-items:end}

@media (max-width:900px){
  .fm-totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-route-pick{grid-template-columns:1fr}
}
@media (max-width:640px){
  .adm .fm-big{width:100%}
  .fm-timer{font-size:1.3rem}
}

/* Console styles for module money (invoices, payments). Scoped under .money. */
.money .chip-ok{color:#6ce5b1;background:rgba(108,229,177,.1);border-color:rgba(108,229,177,.3)}
.money .chip-bad{color:#ffb3bd;background:rgba(255,141,155,.1);border-color:rgba(255,141,155,.3)}
.money .chip-warn{color:#ffce7a;background:rgba(255,206,122,.1);border-color:rgba(255,206,122,.32)}
.money .chip-info{color:#9cc8ff;background:rgba(76,154,255,.12);border-color:rgba(76,154,255,.3)}
.money .money-bad{color:#ffb3bd}
.money .toolbar .seg{flex:1 1 auto}
.money .toolbar .search-inp{flex:0 1 260px;min-width:180px}

/* Invoice detail */
.money-dl{display:grid;grid-template-columns:max-content 1fr;gap:.45rem 1rem;margin:0;font-size:.9rem}
.money-dl dt{color:var(--dim);font-weight:650}
.money-dl dd{margin:0;overflow-wrap:anywhere}
.money-message{white-space:pre-wrap;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line-soft);padding-top:.8rem;margin:0}

/* Totals block (detail and editor) */
.money-sum{display:grid;gap:.35rem;margin-left:auto;width:min(100%,320px);font-size:.92rem}
.money-sum-row{display:flex;justify-content:space-between;gap:1rem}
.money-sum-row span{color:var(--muted)}
.money-sum-total{border-top:1px solid var(--hair);padding-top:.35rem;font-size:1.02rem}
.money-sum-total span{color:var(--text)}

/* Editor lines */
.money-lines{display:grid;gap:.6rem}
.money-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:start;padding:.7rem;border:1px solid var(--line-soft);border-radius:14px;background:rgba(6,15,32,.45)}
.money-line-main{display:grid;gap:.4rem}
.money-line-nums{display:grid;grid-template-columns:76px 120px auto 90px auto;gap:.5rem;align-items:center}
.money-line-amount{text-align:right;color:#fff}
.money-filters .fld{margin:0}

@media (max-width:1180px){
  .money-line{grid-template-columns:1fr}
  .money-line-nums{grid-template-columns:76px minmax(0,140px) auto minmax(0,1fr) auto}
}
@media (max-width:560px){
  .money-line-nums{grid-template-columns:70px minmax(0,1fr) auto}
  .money-line-amount{grid-column:1 / 3;text-align:left}
  .money .toolbar .search-inp{flex:1 1 100%}
}

/* Console styles for module books (expenses, mileage, payroll, reports, export). */
.bk-range{align-items:flex-end}
.bk-date{display:grid;gap:.2rem}
.bk-date .inp{min-height:38px;width:auto;color-scheme:dark}
.bk-ctl.inp{width:auto;max-width:100%;min-height:38px}
.bk-sub,.bk-tabs a{overflow-wrap:anywhere}
.bk-ctl.inp[type=search]{min-width:min(220px,100%)}
.bk-sub{display:block;margin-top:.1rem}
.bk-tabs{margin-bottom:.2rem}
.bk-tabs .ico{width:14px;height:14px;opacity:.7}
.bk-note{display:flex;gap:.55rem;align-items:flex-start;margin:0;padding:.7rem .85rem;border-radius:12px;border:1px solid var(--hair);background:rgba(76,154,255,.07);color:var(--muted)}
.bk-note .ico{flex:none;width:18px;height:18px;margin-top:.1rem;color:#9cc8ff}
.bk-note-warn{background:rgba(255,206,122,.08);border-color:rgba(255,206,122,.28)}
.bk-note-warn .ico{color:#ffce7a}
.bk-chart .bar.bk-neg{fill:#ff8d9b}
.bk-neg-text{color:#ffb3bd}
.bk-statement tr.bk-strong td{font-weight:700;color:var(--text)}
.bk-statement tr.bk-total td{border-top:2px solid var(--hair)}
.bk-week{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.bk-week a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.55rem .75rem;border-radius:12px;border:1px solid var(--hair);background:rgba(6,15,32,.45)}
.bk-week li.dim a{opacity:.6}
.bk-big{font-size:1.25rem;font-weight:700;color:var(--text);margin:0}
.bk-receipt{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.bk-receipt img{max-width:180px;max-height:180px;border-radius:10px;border:1px solid var(--hair);object-fit:contain;background:#fff}
@media (max-width:640px){
  .bk-range{align-items:stretch}
  .bk-week a{grid-template-columns:1fr auto}
  .bk-week a span:nth-child(2){grid-column:1}
}

/* Console styles for module marketing. */
.mk-platform{gap:.4rem;font-weight:650}
.mk-platform .ico{width:1.1rem;height:1.1rem}
.card-x .copy code{overflow-wrap:anywhere}
.notice-x .ico{width:1rem;height:1rem;vertical-align:-.15rem}

/* Console styles for module portal (the "Booking page" screen). */
.portal-view .copy-block{white-space:pre-wrap;word-break:break-all;font-family:var(--mono);font-size:.84rem}
.portal-view .chip-phi{border-color:rgba(183,155,255,.35);color:var(--violet)}

/* Console styles for module brand (the Branding screen). The preview copies
   the public page look (public.css), reading the same --brand custom
   properties with the same fallbacks, so it shows what clients will see. */
.brand-previews{display:grid;gap:1rem}
@media(min-width:760px){.brand-previews{grid-template-columns:3fr 2fr}}
.brand-figure{margin:0;display:grid;gap:.4rem;align-content:start;min-width:0}

/* The booking page: dark, like public.css */
.brand-stage{border:1px solid var(--line);border-radius:14px;background:#05090F;color:var(--text);overflow:hidden;min-height:230px}
.brand-stage-top{display:flex;align-items:center;gap:.6rem;min-height:58px;padding:0 .9rem;border-bottom:1px solid var(--line-soft)}
.brand-stage-logo{flex:none;width:auto;height:auto;max-height:40px;max-width:160px;object-fit:contain}
.brand-stage-mark{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgb(var(--brand-rgb,76 154 255) / .12);border:1px solid rgb(var(--brand-rgb,76 154 255) / .32);color:var(--brand,var(--ice));font-weight:800;font-size:.86rem}
.brand-stage-name{display:grid;min-width:0;line-height:1.25}
.brand-stage-name b,.brand-stage-name small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-stage-name small{color:var(--muted);font-size:.78rem;font-weight:600}
.brand-stage-body{display:grid;gap:.65rem;justify-items:start;padding:1rem .9rem 1.2rem}
.brand-stage-body p{margin:0}
.brand-stage-eyebrow{color:var(--brand,var(--cyan));text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;font-weight:800}
.brand-stage-step{display:flex;align-items:center;gap:.55rem;font-weight:800}
.brand-stage-num{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgb(var(--brand-rgb,76 154 255) / .14);border:1px solid rgb(var(--brand-rgb,76 154 255) / .32);color:var(--brand,var(--ice));font-size:.8rem;font-family:var(--mono)}
.brand-stage-link{color:var(--brand,var(--ice));text-decoration:underline;text-decoration-color:rgb(var(--brand-rgb,156 200 255) / .4);text-underline-offset:3px;font-size:.92rem}
.brand-stage-btn{display:inline-flex;align-items:center;min-height:40px;padding:.55rem 1.1rem;border-radius:999px;background:var(--brand,var(--cyan));color:var(--brand-ink,#03151d);font-weight:750;font-size:.92rem;box-shadow:0 10px 30px -10px rgb(var(--brand-rgb,76 154 255) / .55)}

/* A quote or invoice: white paper, logo top-left */
.brand-paper{display:grid;gap:.35rem;align-content:start;min-height:230px;padding:1rem;border-radius:6px;background:#fff;color:#1d2731;box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.brand-paper-logo{width:auto;height:auto;max-width:160px;max-height:60px;object-fit:contain;margin-bottom:.4rem}
.brand-paper-title{margin:0;font-weight:800;font-size:1rem;color:#111}
.brand-paper-line{margin:0;font-size:.82rem;color:#4a5560}
.brand-paper-rule{display:block;height:6px;border-radius:3px;background:#e3e7eb;margin-top:.4rem}
.brand-paper-rule-short{width:60%}

/* Colour picker, code and verdict */
.brand-color-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:.6rem;max-width:300px}
.brand-color-input input[name=color]{flex:1 1 auto;min-width:0}
/* Beats app.css ".fld input:not(...)" (which would stretch it to 100%). */
.brand-view .fld .brand-color-input input.brand-picker[type=color]{flex:none;width:56px;min-height:0;height:44px;padding:3px;border-radius:10px;cursor:pointer}
.brand-color-input input:disabled{opacity:.5;cursor:not-allowed}
.brand-swatch{display:inline-block;flex:none;width:1.4rem;height:1.4rem;border-radius:6px;background:var(--c,#4c9aff);border:1px solid rgba(255,255,255,.25)}
.brand-verdict p{margin:0}
.brand-bad{color:#ffb3bd}

/* Console styles for module weather: the 7-day forecast strip on the
   schedule, the risk-day banner and the day's line on My day. A risk colour
   arrives as --r from a wx-r-* class (never an inline style). */

.wx-slot{display:grid;gap:.6rem}
.wx-r-rain,.wx-r-wind{--r:#ffce7a}
.wx-r-storm,.wx-r-heat{--r:#ffb3bd}
.wx-r-snow,.wx-r-cold{--r:#cfe4ff}

.wx-ico{width:1.75rem;height:1.75rem;flex:none;color:#cfe4ff}
.wx-card{display:grid;gap:.6rem;padding:.75rem .85rem;border:1px solid var(--hair);border-radius:16px;background:var(--glass)}
.wx-head{display:flex;align-items:center;gap:.4rem .8rem;flex-wrap:wrap}
.adm .wx-title{font-size:.95rem;margin:0}
.wx-src{color:var(--dim);flex:1 1 auto;min-width:0}
.wx-stale{color:#ffce7a}
.wx-refresh{width:32px;height:32px}

.wx-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem;min-width:0}
/* position:relative keeps the absolutely placed .sr-only text inside the
   chip, so it cannot widen the page past the strip's scroll box on phones. */
.wx-day{position:relative;display:grid;justify-items:center;align-content:start;gap:.15rem;padding:.5rem .3rem .45rem;border:1px solid var(--hair);border-radius:12px;background:rgba(6,15,32,.45);text-align:center;min-width:0}
.wx-day.is-today{border-color:rgba(76,154,255,.55);box-shadow:var(--glow)}
.wx-day.is-dim{opacity:.6}
.wx-day.is-risk{border-color:var(--r);background:color-mix(in srgb,var(--r) 9%,rgba(6,15,32,.45))}
.wx-day.is-risk .wx-ico{color:var(--r)}
.wx-name{font-size:.78rem;font-weight:750;color:var(--text)}
.wx-temps{font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.wx-lo{color:var(--dim);font-weight:600}
.wx-pop{display:inline-flex;align-items:center;gap:.12rem;font-size:.76rem;color:#9cc8ff;font-variant-numeric:tabular-nums}
.wx-pop .wx-ico{width:.8rem;height:.8rem;color:#9cc8ff}
.wx-badge{font-size:.7rem;font-weight:750;line-height:1.25;color:var(--r)}

.wx-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.4rem .7rem;padding:.5rem .75rem;border:1px solid var(--r);border-radius:12px;background:color-mix(in srgb,var(--r) 10%,transparent);color:var(--text)}
.wx-banner .wx-ico{width:1.4rem;height:1.4rem;color:var(--r)}

.wx-line{display:flex;align-items:center;gap:.35rem .7rem;flex-wrap:wrap;margin:0;padding:.55rem .8rem;border:1px solid var(--hair);border-radius:12px;background:var(--glass)}
.wx-line.is-risk{border-color:var(--r)}
.wx-line.is-risk>.wx-ico{color:var(--r)}
.wx-line.is-stale{border-style:dashed}
.wx-line .wx-ico{width:1.5rem;height:1.5rem}
.wx-line .wx-pop .wx-ico{width:.85rem;height:.85rem}

.wx-note{display:flex;align-items:center;gap:.6rem;margin:0}
.wx-note .wx-ico{width:1.4rem;height:1.4rem;color:var(--muted)}

/* Phones: every day stays in view (a sideways scroller cut the fourth day at the card edge):
   four days on the first row, three on the second; smaller numbers below 400px. */
@media (max-width:720px){
  .wx-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:400px){
  .wx-day{padding:.4rem .15rem .35rem}
  .wx-temps{font-size:.8rem}
}
@media (max-width:720px){
  .wx-banner{grid-template-columns:auto minmax(0,1fr)}
  .wx-banner .btn{grid-column:2;justify-self:start}
}

/* Console styles for module fleet: the due list, the equipment list, one
   asset's page and a field worker's "My equipment" (phone first, large touch
   targets). Prefix fl-. */

/* Due list (built on .attn / .attn-row from app.css) */
.fl-due .attn-row{color:inherit;transition:border-color .15s,background .15s}
.fl-due .attn-row:hover{border-color:rgba(156,200,255,.45);background:rgba(20,44,90,.55)}
.fl-due .attn-row.tone-red .dot{background:#ff8d9b;box-shadow:0 0 10px rgba(255,141,155,.6)}
.fl-due .attn-row .txt b{color:var(--text)}
.fl-dot-sep{color:var(--dim)}

/* Lists and tables */
.fl-sub{display:block;margin-top:.1rem;overflow-wrap:anywhere}
.fl-ctl.inp{width:auto;max-width:100%;min-height:38px}
.fl-head{gap:.5rem .7rem}
.fl-meters{margin:0;font-variant-numeric:tabular-nums;color:var(--text);font-weight:650}

/* Details */
.fl-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem 1.2rem;margin:0}
.fl-kv div{min-width:0}
.fl-kv dt{color:var(--dim);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .15rem}
.fl-kv dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.fl-notes{margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--line-soft);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}

/* Quick reading form */
.fl-reading{display:grid;grid-template-columns:minmax(150px,1.1fr) repeat(2,minmax(0,1fr)) minmax(0,1.5fr) auto;gap:.7rem;align-items:end;margin-bottom:1rem}
.fl-reading .fld{margin:0}

/* Dialog groups */
.fl-set{border:1px solid var(--hair);border-radius:14px;padding:.8rem .9rem;margin:0;min-width:0}
.fl-set legend{padding:0 .4rem;font-weight:650}
.fl-expense{padding:.8rem .9rem;border-radius:14px;border:1px dashed var(--hair-2,var(--hair))}

/* My equipment (field workers) */
.fl-mine{max-width:760px}
.fl-mine-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.fl-mine-card h2{margin:0;font-size:1.1rem}
.fl-mine-card .fl-reading{grid-template-columns:repeat(2,minmax(0,1fr));margin:.4rem 0 0}
.fl-mine-card .fl-reading .btn{grid-column:1 / -1;min-height:52px;justify-content:center}
.fl-plans{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fl-plans li{padding:.45rem .6rem;border-radius:10px;background:rgba(6,15,32,.45);border:1px solid var(--line-soft)}

@media (max-width:900px){
  .fl-reading{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fl-reading .btn{grid-column:1 / -1;justify-content:center}
}
@media (max-width:640px){
  .fl-reading,.fl-mine-card .fl-reading{grid-template-columns:1fr}
  .adm .fl-reading .btn{min-height:52px}
  /* Tables become one card per row, each cell labelled (the shared table
     helper puts the column name in data-label), so nothing scrolls sideways. */
  .fl-view .tbl thead{display:none}
  .fl-view .tbl,.fl-view .tbl tbody,.fl-view .tbl tr{display:block;width:100%}
  .fl-view .tbl tr{padding:.55rem 0;border-bottom:1px solid var(--line-soft)}
  .fl-view .tbl tbody tr:last-child{border-bottom:0}
  .fl-view .tbl td{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border:0;padding:.25rem .75rem;text-align:right}
  .fl-view .tbl td::before{content:attr(data-label);flex:none;color:var(--dim);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:left}
  .fl-view .tbl td[data-label=""]{justify-content:flex-end}
  .fl-view .tbl td[data-label=""]::before{content:none}
  .fl-view .tbl td:first-child{text-align:left}
}

/* Console styles for module integrations (Business > Integrations), plus the
   public API reference page (/docs/api, <main class="pub-wrap pub-doc api-doc">),
   which loads this file after public.css. Tokens come from the vendored ASL
   design system (--mono, --line-soft, --radius, --muted, --dim, --text). */

/* ---------------------------------------------------------------- console */
.int-page .chip-phi{margin:0}
.int-chips{display:flex;flex-wrap:wrap;gap:.3rem;max-width:34rem}
.int-prefix{font-family:var(--mono);font-size:.82rem;color:#cfe0ff;white-space:nowrap}
.int-hook{display:grid;gap:.15rem;min-width:0}
.int-url{font-family:var(--mono);overflow-wrap:anywhere;word-break:break-all}
.int-actions{gap:.25rem;flex-wrap:nowrap;justify-content:flex-end}
.int-code{margin:0;padding:.8rem 1rem;border:1px solid var(--line-soft);border-radius:12px;background:rgba(4,9,20,.6);font-family:var(--mono);font-size:.8rem;line-height:1.55;color:#cfe0ff;white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto}

/* Permission picker and event list in the dialogs. */
.int-check{gap:.45rem;align-items:center;cursor:pointer}
.int-check code{font-family:var(--mono)}
.int-scopes-grid{display:grid;gap:.5rem}
.int-scope{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1rem;align-items:center;padding:.55rem .75rem;border:1px solid var(--line-soft);border-radius:12px;background:rgba(4,9,20,.35)}
.int-scope-text{display:grid;gap:.1rem;min-width:0}
.int-scope-boxes{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.int-events-head{justify-content:space-between}
.int-events-head p{margin:0}
.int-events{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1rem}
@media (max-width:640px){
  .int-scope{grid-template-columns:1fr}
  .int-events{grid-template-columns:1fr}
  .int-actions{flex-wrap:wrap;justify-content:flex-start}
}

/* ---------------------------------------------------------------- /docs/api */
.api-doc code{font-family:var(--mono);font-size:.86em;padding:.08em .35em;border-radius:6px;background:rgba(76,154,255,.1);color:var(--text);overflow-wrap:anywhere}
.api-doc pre{margin:1rem 0;padding:1rem 1.1rem;border:1px solid var(--line-soft);border-radius:var(--radius);background:rgba(4,9,20,.65);overflow-x:auto;line-height:1.55}
.api-doc pre code{padding:0;background:none;font-size:.84rem;color:#cfe0ff;overflow-wrap:normal;white-space:pre}
.api-doc .pub-table td,.api-doc .pub-table th{font-size:.9rem}
.api-doc .pub-table td:first-child{white-space:nowrap}
.api-doc h3{margin-top:1.8rem}
@media (max-width:640px){
  .api-doc .pub-table td:first-child{white-space:normal}
}

/* Console styles for module roster: time off, working hours, closures, My
   earnings, and the "off" marks on the schedule (work's schedule.js adds the
   ro-off classes when the schedule is filtered to one person). Prefix ro-. */

/* Schedule marks */
.wk-day.ro-off{border-style:dashed;border-color:rgba(255,206,122,.45);background:repeating-linear-gradient(135deg,rgba(255,206,122,.06) 0 10px,transparent 10px 20px),var(--glass)}
.ro-off-label{margin:0;padding:.2rem .5rem;border-radius:8px;background:rgba(255,206,122,.12);color:#ffce7a;font-weight:700;overflow-wrap:anywhere}

/* Lists and forms */
.ro-notes{display:grid;gap:.15rem;min-width:0;overflow-wrap:anywhere}
.ro-ctl.inp-select{width:auto;max-width:100%}
textarea.inp.ro-note{min-height:4.5rem}
.ro-add{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr) auto;gap:.8rem;align-items:end}
.ro-add-btn{padding-bottom:.1rem}

/* Weekly hours editor and summary */
.ro-hours{display:grid;gap:.45rem}
.ro-hours-row{display:grid;grid-template-columns:minmax(6.5rem,10rem) minmax(5.5rem,7rem) minmax(0,9rem) minmax(0,9rem);gap:.6rem;align-items:center}
.ro-hours-row .inp{min-height:38px;color-scheme:dark}
.ro-hours-row .inp:disabled{opacity:.45}
.ro-hours-head{padding-bottom:.1rem;border-bottom:1px solid var(--line-soft)}
.ro-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1.2rem;margin:0}
.ro-kv dt{color:var(--muted)}
.ro-kv dd{margin:0}

/* My earnings */
.ro-range{align-items:flex-end}
.ro-date{display:grid;gap:.2rem}
.ro-date .inp{min-height:38px;width:auto;color-scheme:dark}
.ro-pay{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:.55rem 1.2rem;margin:0;max-width:34rem}
.ro-pay dt{display:grid;gap:.1rem;color:var(--muted)}
.ro-pay dd{margin:0;text-align:right;align-self:start}
.ro-pay .strong{padding-top:.55rem;border-top:1px solid var(--hair);font-weight:800;color:var(--text);font-size:1.05rem}
.ro-sub{font-weight:500}
.ro-note-box{margin:0;padding:.7rem .85rem;border-radius:12px;border:1px solid var(--hair);background:rgba(76,154,255,.07);color:var(--muted)}
.ro-note-warn{background:rgba(255,206,122,.08);border-color:rgba(255,206,122,.28);color:#ffe2ad}

@media (max-width:640px){
  .ro-add{grid-template-columns:minmax(0,1fr)}
  .ro-hours-row{grid-template-columns:minmax(0,1fr) auto;row-gap:.3rem}
  .ro-hours-row .inp{grid-column:span 1}
  .ro-hours-head{display:none}
}

/* Console styles for module automations (Business > Automations). */
.auto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1rem;align-items:start}
.auto-card.is-on{border-color:rgba(76,154,255,.45)}
.auto-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.auto-head h2{margin:0}
.auto-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));gap:.6rem 1rem;align-items:end}
.auto-fields .switch{grid-column:1/-1}
.auto-preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem}
.auto-msg{border:1px solid var(--hair);border-radius:12px;padding:.8rem;min-width:0}
.auto-msg h3{margin:0 0 .4rem;font-size:.95rem}
.auto-subject{font-weight:700;margin:0 0 .4rem;overflow-wrap:anywhere}
.auto-body{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:.9rem;margin:0 0 .5rem}
.auto-confirm{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer}
.auto-confirm input{margin-top:.2rem;flex:0 0 auto}
.auto-also{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.auto-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

/* Console styles for module agreements. */
.agr-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.agr-facts{display:grid;gap:.5rem;margin:0}
.agr-facts div{display:grid;grid-template-columns:minmax(9rem,28%) 1fr;gap:.75rem;align-items:baseline}
.agr-facts dt{color:var(--muted);font-size:.9rem}
.agr-facts dd{margin:0;overflow-wrap:anywhere}
.agr-pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:560px){.agr-facts div{grid-template-columns:1fr;gap:.1rem}}

/* Console styles for module availability. */

/* Console styles for module changeorders. */

/* Console styles for module warranties. */