/* Product pages (DocGen, PSA Hub, DMS): one stylesheet for all three.
   Loaded after site.css, so equal-specificity rules here win; every rule is
   scoped to the page content (main, or a product-only class) so nothing leaks
   onto the shared header, breadcrumb or footer that site.css owns.
   Palette: graphite and copper on zinc neutrals. Every text/background pair
   below was checked at 4.5:1 or better (3:1 only for 24px+ headings). */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  color-scheme:light dark;
  --paper:#FFFFFF;        /* page */
  --card:#FFFFFF;         /* cards */
  --surface:#FAFAFA;      /* table heads, panels */
  --callout:#FAFAFA;      /* callouts */
  --ink:#27272A;          /* headings, prices: 14.9:1 on white */
  --body:#3F3F46;         /* body copy: 10.0:1 on #FAFAFA */
  --muted:#71717A;        /* notes, labels: 4.63:1 on #FAFAFA */
  --line:#E4E4E7;
  --line-strong:#D4D4D8;
  --accent:#B85C38;       /* copper fills behind white text: 4.54:1 */
  --accent-ink:#A34F2F;   /* copper text and links: 5.41:1 on #FAFAFA */
  --accent-hover:#27272A; /* primary button hover: graphite */
  --on-accent:#FFFFFF;
  --outline:#27272A;      /* secondary button border and text */
  --dot:#D4D4D8;
  --shadow:0 1px 2px rgba(24,24,27,.06);
  --overlay:rgba(24,24,27,.08);
  --font:Inter,'Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:ui-monospace,'SFMono-Regular','JetBrains Mono',Consolas,'Liberation Mono',monospace;
  --gutter:32px;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --paper:#1F1F22;--card:#2F2F33;--surface:#27272A;--callout:#313136;
    --ink:#FAFAFA;--body:#E4E4E7;--muted:#A1A1AA;   /* muted 5.05:1 on #313136 */
    --line:#3F3F46;--line-strong:#52525B;
    --accent:#B85C38;--accent-ink:#E0916B;          /* light copper 5.19:1 on #313136 */
    --accent-hover:#9A4A2C;--on-accent:#FFFFFF;      /* white on #9A4A2C 6.19:1 */
    --outline:#A1A1AA;--dot:#52525B;
    --shadow:none;--overlay:rgba(0,0,0,.35);
  }
}
[data-theme=dark]{
  --paper:#1F1F22;--card:#2F2F33;--surface:#27272A;--callout:#313136;
  --ink:#FAFAFA;--body:#E4E4E7;--muted:#A1A1AA;
  --line:#3F3F46;--line-strong:#52525B;
  --accent:#B85C38;--accent-ink:#E0916B;
  --accent-hover:#9A4A2C;--on-accent:#FFFFFF;
  --outline:#A1A1AA;--dot:#52525B;
  --shadow:none;--overlay:rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
body.site-product{margin:0;background:var(--paper);color:var(--body);font-family:var(--font);font-size:16px;-webkit-font-smoothing:antialiased}
html:has(body.site-product){scroll-behavior:smooth;scroll-padding-bottom:88px}
.site-product main{display:block}
.site-product main h1,.site-product main h2,.site-product main h3,.site-product main h4{color:var(--ink);font-family:var(--font)}
.site-product main p{margin:0 0 16px}
.site-product main a{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.site-product main a:hover{text-decoration-thickness:2px}
.site-product main code,.site-product main .mono{font-family:var(--mono);font-size:.92em}
/* Inside a code panel the <pre> already sets 13px: keep it, not 92% of it. */
.site-product pre .mono,.site-product pre code{font-size:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* One container: same left edge as .sss-container in the header and breadcrumb. */
.site-product main .wrap{width:min(1200px,100%);max-width:none;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Hero ---------- */
.site-product main>header{padding:40px 0 32px;border-bottom:1px solid var(--line);background:var(--paper)}
.site-product .kick{font:600 13px/1.5 var(--font);color:var(--accent-ink);margin:0 0 16px;letter-spacing:0;text-transform:none}
/* The width is in px, not ch: ch changes with the font, so the swap from the
   fallback to Inter used to re-wrap the H1 (CLS 0.2 on /dms/). 720px is a
   width at which all three product H1s break into the same number of lines in
   Inter and in the fallback, from 768px to 1920px; re-check it with the font
   delayed when an H1 changes. balance evens the lines out. */
.site-product main>header h1{font-size:var(--fs-h1);font-weight:800;line-height:1.1;margin:0 0 20px;max-width:720px;text-wrap:balance}
.site-product main>header h1 .h1-name{display:block;color:var(--accent-ink);font-size:.5em;font-weight:700;line-height:1.3;margin-bottom:8px}
.site-product .sub{font-size:1.125rem;line-height:1.65;color:var(--body);max-width:680px;margin:0 0 28px}
/* 680px, not 760px: at 760 the DMS aside was two lines in Inter and three in
   the fallback, so the font swap moved the page below it. */
.site-product .hero-aside{font-size:15px;line-height:1.6;color:var(--body);max-width:680px;margin:20px 0 0;padding:2px 0 2px 14px;border-left:3px solid var(--accent)}
.site-product .hero-aside strong{color:var(--ink)}
.site-product .cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.site-product .price-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:24px 0 0}
.site-product .price-chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font-size:16px;font-weight:600;line-height:1.4}
.site-product .price-qual{font-size:14px;line-height:1.5;color:var(--muted)}
.site-product .product-jump{display:flex;flex-wrap:wrap;gap:0 24px;padding-top:16px;margin-top:16px;border-top:1px solid var(--line)}
.site-product .product-jump a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--body);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.site-product .product-jump a:hover{color:var(--accent-ink);text-decoration-color:currentColor}

/* ---------- Buttons ---------- */
.site-product .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border:1px solid var(--outline);border-radius:4px;background:transparent;color:var(--ink);font:600 15px/1.35 var(--font);text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.site-product .btn:hover{border-color:var(--accent-ink);color:var(--accent-ink);text-decoration:none}
.site-product .btn.primary{background:var(--btn-primary-bg);border-color:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.site-product .btn.primary:hover{background:var(--btn-primary-hover);border-color:var(--btn-primary-hover);color:var(--btn-primary-fg)}
.site-product .btn svg{width:16px;height:16px;flex:none}
.site-product .btn .short{display:none}
.site-product .trust-line{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin:16px 0 0;font-size:14px;color:var(--muted)}
.site-product .trust-line span[aria-hidden]{color:var(--muted)}
.site-product .trust-line a{display:inline-flex;align-items:center;min-height:44px;color:var(--body)}

/* ---------- Sections and type ---------- */
.site-product main section{padding:64px 0;border-bottom:1px solid var(--line)}
.site-product main h2{font-size:var(--fs-h2);font-weight:800;line-height:1.2;margin:0 0 16px;text-transform:none;letter-spacing:0}
.site-product main h3{font-size:1.25rem;font-weight:700;line-height:1.35;margin:0 0 8px}
.site-product p.lead{font-size:1.0625rem;line-height:1.7;color:var(--body);max-width:72ch}
.site-product .lead-gap{margin-bottom:32px}
.site-product .note,.site-product .subnote{font:400 14px/1.6 var(--font);color:var(--muted);margin:20px 0 0;padding-left:12px;border-left:2px solid var(--line-strong);max-width:80ch}
.site-product .note strong,.site-product .subnote strong{color:var(--body)}
.site-product .section-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}

/* ---------- Cards, grids, labels ---------- */
.site-product .card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px;box-shadow:var(--shadow)}
.site-product .card ul{margin:0;padding-left:20px;color:var(--body);font-size:15px;line-height:1.6}
.site-product .card li{margin-bottom:8px}
.site-product .card li:last-child{margin-bottom:0}
.site-product .card .lbl{display:flex;align-items:flex-start;gap:8px;font:700 15px/1.4 var(--font);color:var(--ink);margin-bottom:16px;letter-spacing:0;text-transform:none}
.site-product .ic{display:inline-flex;flex:none;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%}
.site-product .ic svg{width:12px;height:12px}
.site-product .ic-tick{background:var(--accent);color:#FFFFFF}
.site-product .ic-cross{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--muted)}
.site-product .ba,.site-product .fit,.site-product .trust,.site-product .tools,.site-product .impl{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.site-product .trust .card{display:flex;gap:12px;align-items:flex-start}
.site-product .trust h3,.site-product .impl .card h3,.site-product .replaces .card h3{font-size:1rem;margin:0 0 4px}
.site-product .trust p,.site-product .impl .card p,.site-product .replaces .card p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.site-product .tool{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px 24px;box-shadow:var(--shadow)}
.site-product .tool .n{display:block;font:700 16px/1.4 var(--font);color:var(--ink);margin-bottom:4px}
.site-product .tool p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.site-product .tier{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:32px 0 16px}
.site-product .tier h3{font-size:1.125rem;margin:0}
.site-product .pill{display:inline-flex;align-items:center;font:500 13px/1.4 var(--font);padding:4px 12px;border-radius:999px;border:1px solid var(--line-strong);color:var(--body)}
.site-product .crossover{background:var(--callout);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px;padding:20px 24px;margin:24px 0 0;font-size:15px;line-height:1.65;color:var(--body);max-width:88ch}
.site-product .crossover strong{color:var(--ink)}
.site-product .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.site-product .facts .crossover{margin:0;max-width:none}
.site-product .terms{background:var(--callout);border:1px solid var(--line);border-radius:8px;padding:20px 24px;margin-top:24px}
.site-product .terms ul{margin:0;padding-left:20px;color:var(--body);font-size:15px;line-height:1.6}
.site-product .terms li{margin-bottom:8px}
.site-product .terms li:last-child{margin-bottom:0}
.site-product .terms strong{color:var(--ink)}

/* ---------- Proof / price strip ---------- */
.site-product .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.site-product .proof .stat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px 24px}
.site-product .proof .stat.win{border:2px solid var(--accent)}
.site-product .proof .stat .val{display:block;font-size:1.75rem;font-weight:800;line-height:1.2;color:var(--ink)}
.site-product .proof .stat .lbl{display:block;margin-top:8px;font:500 14px/1.45 var(--font);color:var(--muted);letter-spacing:0;text-transform:none}

/* ---------- Code / terminal ---------- */
.site-product .term{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px}
.site-product .term .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line)}
.site-product .dot{width:10px;height:10px;border-radius:50%;background:var(--dot)}
.site-product .term .title{margin-left:8px;font:500 13px/1.4 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.site-product .term pre{margin:0;padding:20px;font:400 13px/1.65 var(--mono);overflow-x:auto;color:var(--body);tab-size:2}
.site-product .term .k,.site-product .term .ok,.site-product .term .n{color:var(--accent-ink)}
.site-product .term .s{color:var(--ink)}
.site-product .term .c{color:var(--muted)}

/* ---------- Accordions (technical depth on demand) ---------- */
.site-product .product-detail{border-bottom:1px solid var(--line);background:var(--paper)}
body.site-product .product-detail>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;margin:0;padding:20px calc(max(0px,(100% - 1200px) / 2) + var(--gutter));list-style:none;cursor:pointer;color:var(--ink);font:700 1.25rem/1.35 var(--font);max-width:none}
.site-product .product-detail>summary::-webkit-details-marker{display:none}
.site-product .product-detail>summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.site-product .product-detail[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
.site-product .product-detail>summary:hover{color:var(--accent-ink)}
.site-product .product-detail>summary:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}
.site-product .product-detail>section{padding-top:8px;border-bottom:0}
.site-product .product-detail>section>.wrap>h2{font-size:1.5rem;font-weight:700}

/* ---------- FAQ (markup and disclosure from site.css; zinc/copper here) ---------- */
.site-product .sss-faq-item{border-color:var(--line)}
/* One disclosure pattern per page: the questions use the same right-hand
   copper chevron, minimum row height and hover as the collapsed detail
   sections above them, not site.css's left-hand triangle. */
.site-product .sss-faq-item summary{color:var(--ink);justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0}
.site-product .sss-faq-item summary::before{content:none}
.site-product .sss-faq-item summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:translateY(-3px) rotate(45deg);transition:transform .15s}
.site-product .sss-faq-item[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
.site-product .sss-faq-item summary:hover{color:var(--accent-ink)}
.site-product .faq .sss-faq-answer{padding:0 0 24px}
.site-product .faq .sss-faq-answer p{color:var(--body)}

/* ---------- Rate cards ---------- */
.site-product .rategroup{margin-top:32px}
.site-product .rategroup:first-of-type{margin-top:8px}
.site-product .ratecard{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.site-product .ratecard table{width:100%;border-collapse:collapse}
.site-product .ratecard th{font:600 13px/1.4 var(--font);color:var(--muted);text-align:left;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--line);letter-spacing:0;text-transform:none}
.site-product .ratecard th.price{text-align:right}
.site-product .ratecard td{padding:16px 24px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--body);vertical-align:top}
.site-product .ratecard tr:last-child td{border-bottom:0}
.site-product .ratecard tr.win td{background:var(--surface);color:var(--ink)}
.site-product .ratecard tr.win td.price{color:var(--accent-ink)}
.site-product .ratecard td.price{text-align:right;white-space:nowrap;color:var(--ink);font-weight:700;font-size:16px}
.site-product .ratecard td.price small,.site-product .ratecard th small,.site-product .ratecard td small{display:block;font:400 13px/1.45 var(--font);color:var(--muted);margin-top:4px;white-space:normal;letter-spacing:0;text-transform:none}
.site-product .ratecard .incl{padding:20px 24px;background:var(--surface);border-top:1px solid var(--line)}
.site-product .ratecard .incl .lbl{font:600 14px/1.4 var(--font);color:var(--ink);margin-bottom:12px;letter-spacing:0;text-transform:none}
.site-product .ratecard .incl ul{margin:0;padding-left:20px;color:var(--body);font-size:15px;line-height:1.6}
.site-product .ratecard .incl li{margin-bottom:6px}
.site-product .price-lead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:24px;margin:8px 0 24px;background:var(--callout);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px}
.site-product .price-lead p{margin:0}
.site-product .price-lead .amount{display:block;font-size:2.25rem;font-weight:800;line-height:1.1;color:var(--ink)}
.site-product .price-lead .unit{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-top:4px}
.site-product .price-lead .qual{display:block;font-size:14px;color:var(--muted);margin-top:4px}

/* ---------- Forms, privacy, final CTA ---------- */
.site-product .formslot{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--callout)}
.site-product .formslot .frame{position:relative;width:100%}
.site-product .formslot.has-form .frame{min-height:640px;background:var(--card)}
.site-product .formslot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#FFFFFF}
.site-product .formslot .fallback{max-width:600px;margin:0 auto;padding:40px 24px;text-align:center}
.site-product .formslot .fallback strong{display:block;color:var(--ink);font-size:1.5rem;font-weight:800;line-height:1.3;margin-bottom:12px}
.site-product .formslot .fallback p{margin:0 0 24px;font-size:16px;line-height:1.65;color:var(--body)}
.site-product .formslot .fallback .cta{justify-content:center}
.site-product .formslot .fallback .trust-line{justify-content:center;margin:16px 0 0;font-size:14px;color:var(--muted)}
.site-product .form-facade{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.site-product .formslot .fallback .form-facade p{font-size:14px;color:var(--muted);margin:12px 0 0}
.site-product .privacy{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:20px 24px;margin-top:16px}
.site-product .privacy .lbl{font:700 15px/1.4 var(--font);color:var(--ink);margin-bottom:12px;letter-spacing:0;text-transform:none}
.site-product .privacy ul{margin:0;padding-left:20px;color:var(--body);font-size:14px;line-height:1.6}
.site-product .privacy li{margin-bottom:8px}
.site-product .privacy li:last-child{margin-bottom:0}
.site-product .privacy .route{font:600 14px/1.4 var(--font);color:var(--ink);margin:16px 0 8px}

/* ---------- Status band (DMS) ---------- */
.site-product .status{display:flex;gap:16px;align-items:flex-start;background:var(--callout);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:20px 24px}
.site-product .status .ic{margin-top:2px}
.site-product .status h3{margin:0 0 4px;font-size:1.0625rem}
.site-product .status p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}

/* ---------- DocGen: samples, video, ROI, volume ---------- */
/* Two equal columns across the full content width, like every other block. */
.site-product .samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:8px}
.site-product .docshot{margin:0;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.site-product .docshot .page{position:relative;width:100%;aspect-ratio:900/1165;background:#FFFFFF}
.site-product .docshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.site-product .docshot .cap{padding:12px 20px;border-top:1px solid var(--line);font:500 14px/1.5 var(--font);color:var(--muted)}
.site-product .video{max-width:960px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#27272A}
.site-product .video .frame{position:relative;width:100%;aspect-ratio:16/9}
.site-product .video iframe,.site-product .video video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#27272A}
.site-product .video-steps{max-width:960px;margin-top:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.site-product .video-steps>summary{display:flex;align-items:center;min-height:48px;padding:12px 20px;cursor:pointer;font:600 15px/1.4 var(--font);color:var(--ink)}
.site-product .video-steps>summary::marker{color:var(--accent-ink)}
.site-product .video-steps ol{margin:0;padding:0 24px 20px 44px;font-size:15px;line-height:1.6;color:var(--body)}
.site-product .video-steps li{margin-bottom:8px}
.site-product .video-steps p{margin:0;padding:0 24px 20px;font-size:14px;color:var(--muted)}
.site-product .roi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.site-product .roi .col{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px}
.site-product .roi .col.win{border:2px solid var(--accent)}
.site-product .roi .pname,.site-product .plan .pname{font:600 14px/1.4 var(--font);color:var(--muted);margin-bottom:8px;letter-spacing:0;text-transform:none}
.site-product .roi .col.win .pname,.site-product .plan.win .pname{color:var(--accent-ink)}
.site-product .roi .amt,.site-product .plan .amt{font-size:2rem;font-weight:800;line-height:1.15;color:var(--ink)}
.site-product .roi .amt small,.site-product .plan .amt small{display:block;font:400 14px/1.45 var(--font);color:var(--muted);margin-top:4px}
.site-product .roi ul,.site-product .plan ul{margin:16px 0 0;padding-left:20px;color:var(--body);font-size:15px;line-height:1.6}
.site-product .roi li,.site-product .plan li{margin-bottom:6px}
#volume .card h3{font-size:1.0625rem;margin:0 0 16px}
#volume .paths{margin:0;padding:0;list-style:none}
#volume .paths li{margin-bottom:16px}
#volume .paths li:last-child{margin-bottom:0}
#volume .paths .lbl{display:block;font:600 14px/1.4 var(--font);color:var(--accent-ink);margin-bottom:4px}
#volume .paths p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
#volume .ratecard{margin-top:24px}

/* ---------- PSA Hub: screens, tabs, lightbox, plans, calculator ---------- */
.site-product .shot-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.site-product .shot-tabs:empty{display:none}
.site-product .shot-tab{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--body);font:600 14px/1.3 var(--font);cursor:pointer}
.site-product .shot-tab:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.site-product .shot-tab[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.site-product .shots{display:grid;gap:24px}
.site-product .appshot{margin:0;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.site-product .appshot .frame{position:relative}
.site-product .appshot .frame img{display:block;width:100%;height:auto;background:#FFFFFF}
.site-product .shots.is-tabbed .appshot{display:none}
.site-product .shots.is-tabbed .appshot.is-active{display:block}
.site-product .zoom{display:block;position:relative;cursor:zoom-in;text-decoration:none}
.site-product .zoom-hint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:4px;background:rgba(39,39,42,.88);color:#FFFFFF;font:600 14px/1.2 var(--font)}
.site-product .zoom-hint svg{width:16px;height:16px}
.site-product .zoom:hover .zoom-hint,.site-product .zoom:focus-visible .zoom-hint{background:#B85C38}
/* .appshot clips its corners (overflow:hidden), which would cut an outside
   focus ring down to a sliver: draw it inside the link instead. */
.site-product .zoom:focus-visible{outline-offset:-3px}
.site-product .appshot .cap{padding:16px 24px 20px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--body)}
.site-product .appshot .cap b{display:block;font:700 16px/1.4 var(--font);color:var(--ink);margin-bottom:8px}
.site-product .appshot .cap ul{margin:0;padding-left:20px}
.site-product .appshot .cap li{margin-bottom:4px}
.site-product .lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#18181B;color:#FAFAFA}
.site-product .lightbox::backdrop{background:rgba(0,0,0,.7)}
.site-product .lightbox[open]{display:flex;flex-direction:column}
.site-product .lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px 8px 24px;border-bottom:1px solid #3F3F46;background:#18181B}
.site-product .lb-title{margin:0;font:600 15px/1.4 var(--font);color:#FAFAFA}
.site-product .lb-actions{display:flex;gap:8px;flex:none}
.site-product .lb-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:8px 14px;border:1px solid #71717A;border-radius:4px;background:transparent;color:#FAFAFA;font:600 14px/1 var(--font);cursor:pointer}
.site-product .lb-button:hover{border-color:#E0916B;color:#E0916B}
.site-product .lb-button:focus-visible{outline:3px solid #E0916B;outline-offset:2px}
.site-product .lb-button[aria-pressed=true]{border-color:#E0916B;color:#E0916B}
.site-product .lb-close svg{width:16px;height:16px}
.site-product .lb-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.site-product .lb-scroll img{display:block;width:1920px;max-width:none;height:auto;margin:0 auto;background:#FFFFFF;cursor:zoom-out}
/* Fitted: the whole capture inside the window, width and height. */
.site-product .lightbox.is-fit .lb-scroll{display:flex;align-items:center;justify-content:center;padding:16px}
.site-product .lightbox.is-fit .lb-scroll img{width:auto;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}
.site-product .lb-hint{margin:0;padding:8px 24px;font:400 14px/1.5 var(--font);color:#A1A1AA;border-top:1px solid #3F3F46}
.site-product .plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px}
.site-product .plan{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px}
.site-product .plan.win{border:2px solid var(--accent)}
.site-product .replaces{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.site-product .replaces .gone{display:flex;align-items:center;gap:8px;font:600 14px/1.4 var(--font);color:var(--muted);margin-bottom:12px;letter-spacing:0;text-transform:none}
.site-product .calc{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px;margin-top:24px}
.site-product .calc-controls{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end;padding-bottom:20px;border-bottom:1px solid var(--line)}
.site-product .calc-field{flex:1;min-width:210px}
.site-product .calc-field .calc-label{margin:0 0 12px;font:600 15px/1.4 var(--font);color:var(--ink)}
.site-product .calc-field input[type=range]{width:100%;min-height:44px;accent-color:var(--accent)}
.site-product .calc-users{font-size:1.25rem;font-weight:800;color:var(--ink)}
.site-product .calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:20px}
.site-product .calc-out .o .lbl{display:block;font:500 14px/1.4 var(--font);color:var(--muted);margin-bottom:4px;letter-spacing:0;text-transform:none}
.site-product .calc-out .o .v{font-size:1.5rem;font-weight:800;color:var(--ink)}
.site-product .calc-out .o.win .v{color:var(--accent-ink)}
.site-product .calc-year{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.site-product .calc-year h3{font-size:1.0625rem;margin:0 0 12px}
.site-product .calc-lines{margin:0;font-size:15px}
.site-product .calc-lines>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px solid var(--line)}
.site-product .calc-lines dt{color:var(--body)}
.site-product .calc-lines dd{margin:0;white-space:nowrap;color:var(--ink);font-weight:600}
.site-product .calc-lines>.total{border-bottom:0;padding-top:12px}
.site-product .calc-lines>.total dt{font-weight:800;color:var(--ink);font-size:1.125rem}
.site-product .calc-lines>.total dd{font-weight:800;color:var(--accent-ink);font-size:1.25rem}
.site-product .calc-year .sum{margin:12px 0 0;font-size:14px;color:var(--muted)}

/* ---------- Sticky CTA bar ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 20px var(--overlay);transform:translateY(105%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
.sticky-cta.is-visible{transform:none;visibility:visible;transition:transform .2s ease,visibility 0s}
.sticky-cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding-block:4px}
.sticky-cta .sc-text{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;min-width:0}
.sticky-cta .sc-name{font:700 16px/1.3 var(--font);color:var(--ink)}
.sticky-cta .sc-price{font:400 14px/1.3 var(--font);color:var(--muted)}
.site-product .sticky-cta .btn{min-height:44px;padding:8px 18px;flex:none}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .site-product .facts{grid-template-columns:1fr}
  .site-product .replaces{grid-template-columns:1fr}
}
@media(max-width:720px){
  .site-product main section{padding:48px 0}
  body.site-product .product-detail>summary{font-size:1.0625rem;min-height:64px}
  .site-product .product-detail>section>.wrap>h2{font-size:1.375rem}
  .site-product .ba,.site-product .fit,.site-product .trust,.site-product .tools,.site-product .impl,.site-product .roi,.site-product .proof,.site-product .samples,.site-product .plans,.site-product .calc-out{grid-template-columns:1fr}
  .site-product .price-lead .amount{font-size:1.875rem}
  /* Rate-card tables collapse to stacked rows: never a horizontal scroll. */
  .site-product .ratecard thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .site-product .ratecard table,.site-product .ratecard tbody,.site-product .ratecard tr,.site-product .ratecard td{display:block;width:100%}
  .site-product .ratecard td{border-bottom:0;padding:16px 20px 0}
  .site-product .ratecard td.price{text-align:left;padding:4px 20px 16px;border-bottom:1px solid var(--line)}
  .site-product .ratecard tr:last-child td.price{border-bottom:0}
  #volume .ratecard td.price::before{content:attr(data-col);display:block;font:600 13px/1.4 var(--font);color:var(--muted)}
  .site-product .zoom-hint{right:8px;bottom:8px;min-height:32px;padding:6px 10px;font-size:13px}
}
@media(max-width:600px){
  .site-product{--gutter:24px}
  .site-product main>header{padding-top:32px}
  .sticky-cta .wrap{min-height:64px;gap:12px}
  .sticky-cta .sc-text{flex-direction:column;gap:0}
  /* One short line under the name: never a third line on a small phone. */
  .sticky-cta .sc-price{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .site-product .sticky-cta .btn .long{display:none}
  .site-product .sticky-cta .btn .short{display:inline}
  .sticky-cta .sc-more{display:none}
  .site-product .cta .btn,.site-product .section-cta .btn{flex:1 1 auto}
  .site-product .formslot .fallback{padding:32px 20px}
}
/* Hero CTAs stack below 480px. Between 400 and 480px the first two buttons fit side by
   side in Inter with no slack at all, so the fallback font (a hair wider) wrapped them
   and the swap to Inter moved the whole page. Stacked, they are the same in both. */
@media(max-width:480px){
  .site-product main>header .cta .btn{flex:1 1 100%}
}
@media(max-width:360px){
  .site-product{--gutter:16px}
}
@media(prefers-reduced-motion:reduce){
  html:has(body.site-product){scroll-behavior:auto}
  .sticky-cta,.sticky-cta.is-visible{transition:none}
  .site-product .product-detail>summary::after{transition:none}
}
@media print{
  .sticky-cta,.site-product .lightbox,.site-product .zoom-hint,.site-product .product-jump{display:none!important}
  .site-product .product-detail>section{display:block}
}