/* ===== reset ===== */
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { background:#dfe3e3; }
.cr { min-height:100vh; font-family:var(--cr-font-sans); color:var(--cr-color-text-primary);
  background:var(--cr-color-surface-background); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background var(--cr-motion-duration-standard) var(--cr-motion-ease-standard), color var(--cr-motion-duration-standard) var(--cr-motion-ease-standard); }
.cr *,.cr *::before,.cr *::after { box-sizing:border-box; }

/* The font axis, rebinding the library's own token rather than inventing a
   local one.
 *
 * This is consumption, not the redeclaration `site/src/css/tokens.css` forbids.
 * That rule keeps the site from maintaining a parallel copy of the library's
 * token layer; `--cr-font-sans` here is scoped to an attribute on `.cr`, and
 * rebinding it is the library's own answer for swapping a family —
 * `src/stories/FontSpecimen.css` does exactly this per specimen column, and
 * explains that a bespoke token cannot work, because `Typography.css` sets
 * `font-family: var(--cr-font-sans)` explicitly on the text primitives and
 * would override anything else.
 *
 * Rubik has no block: it is what the library already resolves to, so the axis
 * expresses it by removing the attribute rather than restating the default.
 * `data-units` does the same thing for the same reason (site/src/js/app.js).
 *
 * Each stack keeps the library's fallbacks after the variable face, so a
 * failed or still-loading webfont lands where the default already would. */
.cr[data-font="heebo"] { --cr-font-sans:"Heebo Variable", Helvetica, Arial, sans-serif; }
.cr[data-font="assistant"] { --cr-font-sans:"Assistant Variable", Helvetica, Arial, sans-serif; }

.cr h1,.cr h2,.cr h3,.cr h4,.cr p { margin:0; }
.cr a { color:inherit; text-decoration:none; }
.cr button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.cr :focus-visible { outline:2px solid var(--cr-color-action-tertiary-fill); outline-offset:2px; border-radius:var(--cr-radius-detail); }
.cr [dir="rtl"] { direction:rtl; }

/* type helpers */
.display { font-family:var(--cr-font-sans); font-optical-sizing:auto; font-weight:500; letter-spacing:-0.02em; line-height:1.04; }
.eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cr-color-text-secondary); }
.mono { font-family:var(--cr-font-mono); font-feature-settings:"liga" 0; }
.muted { color:var(--cr-color-text-secondary); }

/* ===== shared UI atoms ===== */
.surface { background:var(--cr-color-surface-default); border:1px solid var(--cr-site-hairline); border-radius:var(--cr-radius-surface); box-shadow:var(--cr-shadow-elevation-1); }
.chip { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--cr-radius-pill);
  font-size:.78rem; font-weight:700; letter-spacing:.01em; border:1px solid transparent; white-space:nowrap; }
.chip.dot::before { content:""; width:7px; height:7px; border-radius:var(--cr-radius-circle); background:currentColor; }
.chip-primary { color:var(--cr-color-action-primary-text); background:var(--cr-color-action-primary-state-hover); }
.chip-secondary { color:var(--cr-color-action-secondary-text); background:var(--cr-color-action-secondary-state-hover); }
.chip-tertiary { color:var(--cr-color-action-tertiary-text); background:var(--cr-color-action-tertiary-state-hover); }
.chip-success { color:var(--cr-color-action-success-text); background:var(--cr-color-feedback-success-surface); }
.chip-warning { color:var(--cr-color-action-warning-text); background:var(--cr-color-feedback-warning-surface); }
.chip-outline { color:var(--cr-color-text-secondary); background:transparent; border-color:var(--cr-color-border-divider); }
.cr[data-theme="dark"] .chip-primary,.cr[data-theme="dark"] .chip-secondary,.cr[data-theme="dark"] .chip-tertiary,
.cr[data-theme="dark"] .chip-success,.cr[data-theme="dark"] .chip-warning { color:var(--cr-color-text-primary); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:11px 20px; font-weight:700; font-size:.9rem;
  border-radius:var(--cr-radius-control); transition:all var(--cr-motion-duration-short) var(--cr-motion-ease-standard); border:1px solid transparent; }
.btn svg { width:17px; height:17px; }
.btn-primary { background:var(--cr-color-action-tertiary-fill); color:var(--cr-color-action-tertiary-on-fill); box-shadow:var(--cr-shadow-elevation-1); }
.btn-primary:hover { background:var(--cr-site-tertiary-hover); transform:translateY(-1px); box-shadow:var(--cr-shadow-elevation-2); }
.btn-ghost { background:var(--cr-color-surface-default); color:var(--cr-color-text-primary); border-color:var(--cr-color-border-divider); }
.btn-ghost:hover { border-color:var(--cr-color-action-primary-fill); transform:translateY(-1px); }
/* `.cr a { color:inherit }` and `.cr button { background:none; color:inherit }` both outrank the
   single-class `.btn-*` rules, so every variant needs an element-qualified counterpart here.
   The `:hover` entries must be repeated too: `.cr button.btn-primary` (0,2,1) would otherwise
   beat the plain `.btn-primary:hover` (0,2,0) and the button would never change on hover. */
.cr button.btn-primary { background:var(--cr-color-action-tertiary-fill); color:var(--cr-color-action-tertiary-on-fill); }
.cr button.btn-primary:hover { background:var(--cr-site-tertiary-hover); }
.cr a.btn-primary { color:var(--cr-color-action-tertiary-on-fill); }
.cr button.btn-ghost { background:var(--cr-color-surface-default); color:var(--cr-color-text-primary); }
.cr button.btn-ghost:hover { border-color:var(--cr-color-action-primary-fill); }
.cr a.btn-ghost { color:var(--cr-color-text-primary); }

.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--cr-space-6); margin-bottom:var(--cr-space-7); flex-wrap:wrap; }
.section-head h2 { font-size:clamp(1.7rem,3vw,2.3rem); }
.page-title { font-size:clamp(2.1rem,4.4vw,3.1rem); }

/* reveal */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--cr-motion-ease-standard), transform .6s var(--cr-motion-ease-standard);
  will-change:opacity, transform; }
.reveal.in { opacity:1; transform:none; }

/* page switching */
.page { display:none; }
.page.active { display:block; animation:pageIn .45s var(--cr-motion-ease-standard); }
@keyframes pageIn { from { opacity:0; transform:translateY(10px);} to {opacity:1; transform:none;} }

/* ===== FLOATING BADGE / footer ===== */
.made { text-align:center; padding:22px; color:var(--cr-color-text-secondary); font-size:.8rem; }
.made b { color:var(--cr-color-text-primary); }
.site-footer { padding-block-end: 22px; }
.site-footer__contact { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--cr-space-2) var(--cr-space-4); padding-inline:22px; font-size:.8rem; }
.site-footer__contact a { color:var(--cr-color-action-info-text); }
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible { color:var(--cr-color-action-primary-text); }

/* ===== responsive ===== */
@media (max-width:1000px){
  .body { grid-template-columns:1fr; }
  .rail { display:none; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .statgrid { grid-template-columns:repeat(3,1fr); }
  .studio { grid-template-columns:1fr; }
  .studio .panel { position:static; }
  .deliver-grid { grid-template-columns:1fr; }
  .pipeline { grid-template-columns:repeat(2,1fr); } .pipeflow{ display:none;} .stage::after{ display:none; }
}
@media (max-width:560px){
  .stats { grid-template-columns:1fr 1fr; } .statgrid { grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){
  .cr *,.cr *::before,.cr *::after { transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* ===== FLAT fully square content corners ===== */

/* ===== appear animation + parallax ===== */
.parallax { will-change:transform; }
@keyframes floatUp { from { opacity:0; transform:translateY(22px) scale(.98);} to { opacity:1; transform:none;} }

/* ---- storefront vertical switch ---- */
.vswitch { display:inline-flex; padding:4px; gap:3px; background:var(--cr-site-surface-tint-3); border:1px solid var(--cr-site-hairline);
  border-radius:var(--cr-radius-pill); margin-bottom:var(--cr-space-4); }
.vswitch button { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:var(--cr-radius-pill); font-size:.82rem; font-weight:700; color:var(--cr-color-text-secondary); transition:all var(--cr-motion-duration-short) var(--cr-motion-ease-standard); }
.vswitch button svg { width:15px; height:15px; }
.vswitch button[aria-pressed="true"] { background:var(--cr-color-surface-default); color:var(--cr-color-text-primary); box-shadow:var(--cr-shadow-elevation-1); }

/* image tile motifs per vertical (pure CSS, no external images) */
.imgtile { position:relative; overflow:hidden; }
.imgtile .figure { position:absolute; inset:0; }
.mannequin { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:52%; height:82%; }

/* ---- product detail (PDP) ---- */
.pdp { display:grid; grid-template-columns:1fr 1fr; gap:26px; padding:26px; }
.pdp-gallery { display:flex; flex-direction:column; gap:12px; }
.pdp-media { aspect-ratio:4/5; border-radius:var(--cr-radius-surface); overflow:hidden; position:relative; border:1px solid var(--cr-site-hairline); }
.pdp-thumbs { display:flex; gap:10px; }
.pdp-thumb { width:64px; height:64px; border-radius:var(--cr-radius-control); overflow:hidden; border:2px solid transparent; position:relative; cursor:pointer; }
.pdp-thumb.on { border-color:var(--cr-color-action-tertiary-fill); }
.pdp-main { align-self:start; }
.pdp-main .brand { font-size:.78rem; font-weight:700; color:var(--cr-color-text-secondary); letter-spacing:.04em; text-transform:uppercase; }
.pdp-main h3 { font-family:var(--cr-font-sans); font-size:2rem; font-weight:600; margin:6px 0; line-height:1.05; }
.pdp-main .rating { display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--cr-color-text-secondary); }
.pdp-main .rating .stars { color:var(--cr-color-action-warning-fill); letter-spacing:1px; }
.pdp-price { font-family:var(--cr-font-sans); font-size:1.9rem; font-weight:600; margin:16px 0 4px; }
.pdp-price small { font-size:.9rem; color:var(--cr-color-text-secondary); text-decoration:line-through; font-family:var(--cr-font-sans); margin-inline-start:8px; }
.pdp-desc { font-size:.88rem; color:var(--cr-color-text-secondary); line-height:1.6; margin:12px 0 18px; }
.opt-label { font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--cr-color-text-secondary); margin:14px 0 8px; }
.opts { display:flex; gap:8px; flex-wrap:wrap; }
.opt { min-width:44px; padding:9px 14px; border-radius:var(--cr-radius-control); border:1.5px solid var(--cr-color-border-divider); font-size:.82rem; font-weight:700; background:var(--cr-color-surface-default); transition:all var(--cr-motion-duration-short) var(--cr-motion-ease-standard); }
.opt[aria-pressed="true"] { border-color:var(--cr-color-action-tertiary-fill); background:var(--cr-color-action-tertiary-state-hover); color:var(--cr-color-action-tertiary-text); }
.cr[data-theme="dark"] .opt[aria-pressed="true"] { color:var(--cr-color-text-primary); }
.opt.sw { width:34px; min-width:34px; height:34px; padding:0; border-radius:var(--cr-radius-circle); }
.pdp-cta { display:flex; gap:10px; margin-top:22px; }
.pdp-meta { display:flex; gap:20px; margin-top:20px; padding-top:18px; border-top:1px solid var(--cr-site-hairline); font-size:.78rem; color:var(--cr-color-text-secondary); }
.pdp-meta div { display:flex; align-items:center; gap:7px; } .pdp-meta svg { width:16px; height:16px; color:var(--cr-color-action-success-text); }
.cr[data-theme="dark"] .pdp-meta svg { color:var(--cr-color-action-success-fill); }

/* ---- plan style 2: billing toggle + bundle builder ---- */
.bill-toggle { display:inline-flex; align-items:center; gap:12px; padding:6px; border-radius:var(--cr-radius-pill); background:var(--cr-site-surface-tint-3); border:1px solid var(--cr-site-hairline); }
.bill-toggle button { padding:8px 18px; border-radius:var(--cr-radius-pill); font-size:.82rem; font-weight:700; color:var(--cr-color-text-secondary); }
.bill-toggle button[aria-pressed="true"] { background:var(--cr-color-surface-default); color:var(--cr-color-text-primary); box-shadow:var(--cr-shadow-elevation-1); }
.bill-toggle .save { font-size:.68rem; font-weight:800; color:var(--cr-color-action-success-text); }
.cr[data-theme="dark"] .bill-toggle .save { color:var(--cr-color-action-success-fill); }
.bundle-wrap { display:grid; grid-template-columns:1.4fr .9fr; gap:20px; padding:26px; }
.bundle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.bundle { padding:18px 14px; border-radius:var(--cr-radius-control); border:1.5px solid var(--cr-color-border-divider); background:var(--cr-color-surface-default); text-align:center; cursor:pointer; transition:all var(--cr-motion-duration-short) var(--cr-motion-ease-standard); position:relative; }
.bundle.on { border-color:var(--cr-color-action-tertiary-fill); background:var(--cr-color-action-tertiary-state-hover); }
.bundle .ic { width:34px; height:34px; margin:0 auto 8px; color:var(--cr-color-action-tertiary-fill); display:flex; align-items:center; justify-content:center; }
.bundle .ic svg { width:24px; height:24px; }
.bundle .bn { font-weight:800; font-size:.86rem; } .bundle .bm { font-size:.7rem; color:var(--cr-color-text-secondary); margin-top:2px; }
.bundle .check { position:absolute; top:8px; inset-inline-end:8px; width:18px; height:18px; border-radius:var(--cr-radius-circle); background:var(--cr-color-action-tertiary-fill); color:var(--cr-color-action-tertiary-on-fill); display:none; align-items:center; justify-content:center; font-size:.7rem; }
.bundle.on .check { display:flex; }
.bundle-sum { padding:22px; border-radius:var(--cr-radius-surface); background:var(--cr-color-surface-default); border:1px solid var(--cr-site-hairline); align-self:start; }
.bundle-sum h4 { font-family:var(--cr-font-sans); font-size:1.2rem; font-weight:600; }
.bundle-sum .line { display:flex; justify-content:space-between; font-size:.84rem; padding:8px 0; border-bottom:1px solid var(--cr-site-hairline); }
.bundle-sum .line span:last-child { font-weight:700; }
.bundle-sum .disc span:last-child { color:var(--cr-color-action-success-text); }
.cr[data-theme="dark"] .bundle-sum .disc span:last-child { color:var(--cr-color-action-success-fill); }
.bundle-sum .total { display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; }
.bundle-sum .total .amt { font-family:var(--cr-font-sans); font-size:1.9rem; font-weight:600; }
@media (max-width:1000px){ .pdp { grid-template-columns:1fr; } .bundle-wrap { grid-template-columns:1fr; } }

.pcard .top { position:relative; }
.pcard .top .photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.pcard .top .pill { z-index:3; }

/* The residue the ladder cannot reach.
 *
 * The old `[data-shape="flat"]` block was 50 physical lines naming 78 unique
 * selectors, across this file and six others. 67 of those now follow the radius
 * ladder, because their declarations use role tokens and `square` moves those.
 *
 * These eleven do not: they carry raw pixel values, deliberately exempt from
 * `crossroads/radius-token-only`, for two different reasons worth keeping
 * distinct.
 *
 * Ten are phone and OS chrome — a mock Android row should not inherit our
 * corner language. `.cs-stat .ic` is not: it renders directly on the page in
 * the card-styles gallery, and its exemption is its own, stated at
 * `templates.css:103` — it illustrates a third-party stat card, and 10px is
 * the squircle the mock is depicting.
 *
 * A preset can only move what reads a token, so without this they kept their
 * corners while everything around them squared off. ADR §3.7's "six
 * declarations" counted the token-driven half; this is the other half, and it
 * stays hand-written on purpose (CR-R-018).
 */
.cr[data-radius-preset="square"] .cs-stat .ic,
.cr[data-radius-preset="square"] .mp-field .inp,
.cr[data-radius-preset="square"] .mp-hero-card,
.cr[data-radius-preset="square"] .mp-pay,
.cr[data-radius-preset="square"] .mp-row,
.cr[data-radius-preset="square"] .mp-row .ic,
.cr[data-radius-preset="square"] .mp-set,
.cr[data-radius-preset="square"] .p-hero,
.cr[data-radius-preset="square"] .pcard,
.cr[data-radius-preset="square"] .pli,
.cr[data-radius-preset="square"] .pstat .c { border-radius:0; }

/* Frozen by design, flattened on purpose.
 *
 * These seven paint from `--cr-radius-circle` or `--cr-radius-full`, which no
 * preset touches — §3.4 puts `circle` outside the system, and `full` is a
 * primitive. That is correct for the token: it means the ladder never sweeps
 * them along, so a phone avatar stays a circle when the site squares off.
 *
 * It is not an argument for leaving them round when the toggle is thrown. The
 * old `[data-shape="flat"]` list flattened all seven, and the toggle is the
 * site saying "square this mock", which is a different decision from "let the
 * ladder move this token". They are compatible, and both are wanted.
 *
 * Missed twice: a scan for raw pixel values does not see a frozen *token*, and
 * a scan of the phone regions does not see `.iconbtn`. The question that finds
 * all of them is neither "is it px" nor "where does it live" but "does `square`
 * move this value" — and for these it does not.
 */
.cr[data-radius-preset="square"] .hownum,
.cr[data-radius-preset="square"] .iconbtn,
.cr[data-radius-preset="square"] .themecard .dots i,
.cr[data-radius-preset="square"] .tpl-prod .buy,
.cr[data-radius-preset="square"] .mp-hero-card .av,
.cr[data-radius-preset="square"] .mp-seg,
.cr[data-radius-preset="square"] .mp-seg button { border-radius:0; }