/* ⛔ `--r` DID NOT EXIST. Every box here fell back to 10px while the design system
   uses --radius. Found by the cloud session that built Counter, 2026-09-28. */
/* ==========================================================================
   VENDITORY PRODUCT PAGES -- the only styles that are not already in site.css.

   ⛔ EVERY COMPONENT THE MARKETING PAGE ALREADY HAS IS REUSED, NOT REDRAWN:
   .shell .nav .hero__band .eyebrow .lede .btn .trust .section .head .grid
   .card .card__media .fill .tag .ladder .rung .rule. This file adds only the
   four things a PRODUCT page needs that a marketing page does not.

   ⭐ AND IT ADDS NO COLOR OF ITS OWN. Every value is a var() from tokens.css,
   so re-skinning the palette re-skins these too -- `how-we-design.md`, layer 3:
   never a raw hex in a component rule.
   ========================================================================== */

/* 1 -- THE LEDGER FIGURE. Three channels arriving at one row of truth, which is
   the whole argument for the spine and is faster to see than to read. */
.ledger{display:grid;gap:var(--gap-m,20px);margin:var(--gap-l,32px) 0}
.ledger__ch{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-m,20px)}
.ledger__box{border:1px solid var(--line,#e6e6e6);border-radius:var(--radius,16px);
  padding:var(--gap-m,20px);background:var(--bg,#fbfcfe);text-align:center}
.ledger__box b{display:block;color:var(--ink,#10182b);font-weight:500;margin-bottom:4px}
.ledger__box span{color:var(--ink-muted,#6b7689);font-size:.88rem}
.ledger__arrows{display:grid;grid-template-columns:repeat(3,1fr);
  color:var(--ink-muted,#6b7689);text-align:center;font-size:1.3rem;line-height:1}
.ledger__one{border:2px solid var(--accent,#ffb648);border-radius:var(--radius,16px);
  padding:var(--gap-m,20px);text-align:center;background:var(--bg-alt,#eef0f5)}
.ledger__one b{display:block;color:var(--ink,#10182b);font-size:1.15rem;font-weight:500}
.ledger__one span{color:var(--ink-muted,#6b7689);font-size:.9rem}

/* 2 -- THE INTEGRATION CHOICE. Two columns, because the offer is a CHOICE per
   tool and a list would hide that. */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-m,20px);
  margin-top:var(--gap-m,20px)}
.choice__col{border:1px solid var(--line,#e6e6e6);border-radius:var(--radius,16px);
  padding:var(--gap-m,20px);background:var(--bg,#fbfcfe)}
.choice__col h4{margin:0 0 6px;color:var(--ink,#10182b);font-weight:500}
.choice__col p{margin:0;color:var(--ink-muted,#6b7689);font-size:.92rem}
.choice__col ul{margin:var(--gap-s,12px) 0 0;padding-left:1.1em;color:var(--ink-muted,#6b7689);
  font-size:.92rem}

/* 3 -- THE PRICE COMPARISON. The point is the SHAPE of the cost over time, so
   the rented column carries a running total and the owned one does not. */
.compare{width:100%;border-collapse:collapse;margin-top:var(--gap-m,20px);font-size:.95rem}
.compare th,.compare td{padding:var(--gap-s,12px);border-bottom:1px solid var(--line,#e6e6e6);
  text-align:left;vertical-align:top}
.compare th{color:var(--ink,#10182b);font-weight:500}
.compare td{color:var(--ink-muted,#6b7689)}
.compare .own{color:var(--ink,#10182b)}
.compare tr:last-child td{border-bottom:none;font-weight:500;color:var(--ink,#10182b)}

/* 4 -- FAQ. MOVED to site.css 2026-10-13 so every page that carries one draws the same block
   (the pricing and Mix and match pages do not link this file). */

@media (max-width:760px){
  .ledger__ch,.ledger__arrows,.choice{grid-template-columns:1fr}
  .ledger__arrows{display:none}
  .compare th,.compare td{padding:8px 6px;font-size:.88rem}
}

/* The Command card. It spans the row because Command is the spine the other three report
   into, not a fourth product beside them - the layout has to say that before the copy does. */
.grid--1{display:grid;grid-template-columns:1fr}
.prod--wide{border-color:var(--accent,#ffb648)}
.prod--wide .prod__desc{max-width:62ch}
/* Two doors per card: open it where it is live, and read what it does. They wrap rather
   than overflow on a phone, which is where he opens this. */
.prod__doors{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.prod__foot{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* The Command card image at half height. He asked for it: the card spans the row, so a
   4/3 panel across the full width dominated the section it is supposed to introduce. */
.card__media.fill--half{aspect-ratio:8/3;min-height:0}

/* A product that is not finished says so where a button would be. Styled as text, not a
   control, because it is information and not something to click. */
.prod__soon{font-size:.85rem;color:var(--ink-muted);letter-spacing:.02em}
/* The wide Command card keeps a thin band instead of a panel - enough to separate it from
   the three below without spending half the card on a color. */
.card__media.fill--band{aspect-ratio:auto;min-height:56px}

/* ⛔ A CARD WITH NO IMAGE NEEDS ITS BADGE BACK IN NORMAL FLOW. site.css sets
   .prod__badge{position:absolute;top:12px;left:12px} so it sits over the card's photograph.
   These cards have no photograph, so the badge was landing on the product name and the names
   read as "Ti", "Ou" and "St". This puts it back in the flow above the name. */
.prod--flat{padding:var(--gap-m,20px);gap:10px}
.prod--flat .prod__badge{position:static;align-self:flex-start;margin:0 0 2px}
.prod--flat .prod__name{margin:0}
.prod--flat .prod__desc{margin:0}
.prod--flat .prod__foot{margin-top:auto;padding-top:10px}

/* 5 -- THE PRICE BAND (2026-10-12). Two cards side by side, the product alone and all four,
   then what is never charged. Built by `pipelines/site_pages.py purchase_band`, which reads every
   figure from offers/PRICES.json; these rules only lay it out. The pattern is the plan grid the
   competitor pages use (_state/research/LANDING-PAGES-2026-10-12.md, A5). */
.price{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gap-m,24px);margin-top:var(--gap-s,16px)}
.price__card{border:1px solid var(--line,#e6e6e6);border-radius:var(--radius,16px);
  padding:var(--gap-m,24px);background:var(--bg,#fbfcfe);display:flex;flex-direction:column;gap:8px}
.price__card--this{border:2px solid var(--accent,#ffb648)}
.price__card h2,.price__amt{margin:0;font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1.1;
  color:var(--ink,#10182b);font-family:var(--font-display);font-weight:600}
.price__name{margin:0;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-muted,#6b7689)}
.price__note{margin:0;color:var(--ink-muted,#6b7689);font-size:.95rem;max-width:46ch}
.price__card .hero__cta{margin-top:auto;padding-top:var(--gap-s,16px)}
.price__free{list-style:none;padding:0;margin:var(--gap-m,24px) 0 0;display:flex;flex-wrap:wrap;
  gap:8px 24px;color:var(--ink-muted,#6b7689);font-size:.92rem}
.price__free li::before{content:"\2713";color:var(--accent-text,#8a5200);margin-right:8px}

/* 6 -- THE HERO FACT LINE. One line under the buttons, each fact checkable on the same page. */
.hero__facts{margin:var(--gap-s,16px) 0 0;font-size:.9rem;color:var(--on-panel);opacity:.85}

/* 7 -- WHAT IS NOT BUILT YET. A plain list, set apart, so the honest part is easy to find. */
.notyet{border-left:3px solid var(--accent,#ffb648);padding:4px 0 4px var(--gap-s,16px);
  margin-top:var(--gap-s,16px)}
.notyet ul{margin:8px 0 0;padding-left:1.1em;color:var(--ink-muted,#6b7689)}
.notyet li{margin:4px 0}

@media (max-width:760px){
  .price{grid-template-columns:1fr}
}

/* SCROLL SPEED ON THE FOUR PRODUCT PAGES (his 2026-10-13: the product pages drop frames under wheel
   scrolling while home holds a clean 60). Measured A/B in a real browser, same machine, same minute:
   removing the box blur took /command/ wheel-frame p95 from 367-467ms to 33-67ms; removing the title
   icon masks did not help. A product page carries 7 blurred outer boxes over 68 inner boxes, so the
   browser re-blurs the moving background behind each of them on every frame. These pages therefore skip
   the blur from the first frame (the quality governor in pipelines/site_fx.js only reaches home-class
   pages after 24 slow frames) and keep the same see-through box, a little more opaque so the words
   stay above the contrast floor, exactly as the governor's .vn-lite state does. */
/* html:root[...] is specificity 0,2,1: the dark-theme rules in the inlined chrome.css (0,2,0) come
   later in the page and would otherwise beat this one, leaving dark mode at bg-alt 72%. */
html:root[data-page="command"], html:root[data-page="store-front"], html:root[data-page="outbound"], html:root[data-page="studio"]{
  --box: color-mix(in srgb, var(--bg) 82%, transparent)}
:root[data-page="command"] :is(.hero__band>.shell, .section.shell, .section > .shell, .panel),
:root[data-page="store-front"] :is(.hero__band>.shell, .section.shell, .section > .shell, .panel),
:root[data-page="outbound"] :is(.hero__band>.shell, .section.shell, .section > .shell, .panel),
:root[data-page="studio"] :is(.hero__band>.shell, .section.shell, .section > .shell, .panel){
  -webkit-backdrop-filter:none;backdrop-filter:none}