/* ==========================================================================
   TECHPASS — site-wide stylesheet (single file, no build step)
   Design system: DESIGN.md (Calendly-style "navy ink on cool marble").
   One vivid blue carries every primary action; elevation is blue-tinted
   shadow, never black; magenta/cyan blobs are decoration only.
   Structure and components follow techpass-homepage_saas.html; where the
   mockup and DESIGN.md differed, DESIGN.md wins (18px buttons, 700 headings,
   4px 8px pill padding).
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* colours */
  --ink:#0b3558;
  --blue:#006bff;
  --slate:#476788;
  --mist:#a6bbd1;
  --cloud:#f8f9fb;
  --paper:#ffffff;
  --pebble:#f0f3f8;
  --hairline:#d4e0ed;
  --cobalt:#004eba;
  --badge-bg:#e6f0ff;
  --error:#b42318;      /* form + validation errors */
  --ink-hover:#082a46;  /* dark buttons on hover */
  --magenta:#e55cff;
  --cyan:#0099ff;

  /* typography */
  --font:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --text-caption:12px;   --leading-caption:1.5;
  --text-body-sm:14px;   --leading-body-sm:1.4;
  --text-body:16px;      --leading-body:1.6;   /* DESIGN.md table says 1; body copy uses 1.6 for readability */
  --text-body-lg:20px;   --leading-body-lg:1.4;
  --text-button:18px;    --leading-button:1.6;
  --text-subheading:28px;--leading-subheading:1.4;
  --text-heading-sm:38px;--leading-heading-sm:1.21;
  --text-heading:50px;   --leading-heading:1.2;
  --text-heading-lg:68px;--leading-heading-lg:1.2;
  --text-display:80px;   --leading-display:1.2;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* spacing (8px base) */
  --spacing-8:8px;  --spacing-16:16px; --spacing-24:24px; --spacing-32:32px;
  --spacing-40:40px;--spacing-48:48px; --spacing-56:56px; --spacing-64:64px;
  --spacing-72:72px;--spacing-96:96px;

  /* layout */
  --page-max-width:1200px;
  --card-padding:24px;

  /* radii */
  --radius-sm:4px;
  --radius-btn:8px;
  --radius-input:8px;
  --radius-product:16px;
  --radius-panel:24px;
  --radius-full:9999px;

  /* shadows — blue-tinted stacks only */
  --shadow-sm:rgba(71,103,136,.04) 0 4px 5px, rgba(71,103,136,.03) 0 4px 10px, rgba(71,103,136,.05) 0 10px 20px;
  --shadow-card:rgba(71,103,136,.04) 0 4px 5px, rgba(71,103,136,.03) 0 8px 15px, rgba(71,103,136,.08) 0 30px 50px;
  --shadow-btn:rgba(71,103,136,.04) 0 4px 5px, rgba(71,103,136,.03) 0 8px 15px, rgba(71,103,136,.06) 0 15px 30px;

  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cloud); color:var(--ink);
  font-family:var(--font); font-size:var(--text-body); line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:var(--weight-bold); line-height:1.15; text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:var(--radius-sm)}
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.wrap{max-width:var(--page-max-width); margin:0 auto; padding-inline:var(--spacing-24)}
/* Anchored sections and cards must clear the 64px sticky header on jump */
.sec[id], article[id]{scroll-margin-top:80px}
.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:#fff; padding:10px 16px; font-size:var(--text-body-sm); font-weight:var(--weight-semibold);
}
.skip:focus{left:12px; top:12px}

/* ---------- buttons (8px radius — the system's sharp-but-soft spot) ---------- */
.btn{
  font-family:var(--font); font-size:var(--text-button); font-weight:var(--weight-semibold); line-height:var(--leading-button);
  border-radius:var(--radius-btn); border:none; cursor:pointer; text-decoration:none;
  padding:10px 20px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  box-shadow:var(--shadow-btn);
}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--cobalt)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:var(--ink-hover)}
.btn-sm{padding:6px 16px; font-size:var(--text-body-sm)}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:none; padding:10px 16px}
.btn-ghost:hover{text-decoration:underline}

/* ---------- header CTA noise glow (animated gradient ring + grain, NoiseBackground-style) ----------
   Brand-tuned trio: Signal Blue, cyan and magenta (decoration colours per DESIGN.md).
   Zero footprint: the ring and halo paint outside the button's box, so the
   wrapper is exactly the button's size and the header layout never shifts. */
@property --cta-angle{syntax:"<angle>"; inherits:true; initial-value:0deg}
.cta-glow{
  position:relative; display:inline-block; border-radius:var(--radius-btn); isolation:isolate;
  animation:cta-spin 6s linear infinite;
}
.cta-glow::before{ /* grainy gradient ring, 2px visible around the button — same 8px shape */
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:calc(var(--radius-btn) + 2px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"),
    conic-gradient(from var(--cta-angle), var(--blue), var(--cyan), var(--magenta), var(--blue));
  background-size:120px 120px, 100% 100%; background-blend-mode:overlay;
}
.cta-glow::after{ /* soft halo bleeding past the button */
  content:""; position:absolute; inset:-6px; z-index:-2; border-radius:calc(var(--radius-btn) + 6px);
  background:conic-gradient(from var(--cta-angle), var(--blue), var(--cyan), var(--magenta), var(--blue));
  filter:blur(8px); opacity:.5;
}
@keyframes cta-spin{to{--cta-angle:360deg}}

/* ghost text link (DESIGN.md Ghost Text Link — quiet until hovered) */
.text-link{font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--ink); text-decoration:none}
.text-link:hover{text-decoration:underline; color:var(--cobalt)}

/* moving-border text link (Aceternity MovingBorder-style, no JS): a comet of
   Signal Blue trailing into Ink Navy sweeps the border ring of a quiet pill.
   Two-background border-box trick paints the conic gradient on the ring only;
   the registered custom property makes the angle animatable. */
@property --mb-angle{syntax:"<angle>"; inherits:true; initial-value:0deg}
.text-link.moving-border{
  display:inline-block; padding:4px 14px; border:1.5px solid transparent;
  border-radius:var(--radius-btn);
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    conic-gradient(from var(--mb-angle),
      var(--ink), var(--blue) 25%, transparent 50%, transparent 100%) border-box;
  animation:mb-spin 4s linear infinite;
}
@keyframes mb-spin{to{--mb-angle:360deg}}
.text-link.moving-border:hover{text-decoration:none}

/* ---------- pill badge (12px, 4px 8px, fully rounded) ---------- */
.pill{
  display:inline-block; background:var(--badge-bg); color:var(--cobalt);
  font-size:var(--text-caption); font-weight:var(--weight-medium);
  border-radius:var(--radius-full); padding:4px 8px;
}

/* ---------- decorative blobs (atmosphere only — never UI fills) ---------- */
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; z-index:0; pointer-events:none}
.blob-cyan{background:var(--cyan)}
.blob-magenta{background:var(--magenta)}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(248,249,251,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-24); height:64px}
.logo{display:flex; align-items:center; text-decoration:none}
.logo img{height:32px; width:auto}
.menu{display:flex; align-items:center; gap:var(--spacing-24); font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--slate)}
.menu a{
  text-decoration:none;
  /* spring lift on hover — overshoot bezier echoes the FloatingDock reference */
  transition:color .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.menu a:hover{color:var(--ink)}
/* lift only where hover exists, so touch devices never hold a stuck raised link */
@media (hover:hover) and (pointer:fine){
  .menu a:hover, .menu a:focus-visible{transform:translateY(-3px) scale(1.04)}
}
/* Active nav link uses cobalt, not Signal Blue: #006bff sits at 4.36:1 on the
   Cloud header — below WCAG AA for 14px text. Cobalt is ~7:1 and stays in the
   system's informational-blue role. Mobile menu matches for consistency. */
.menu a[aria-current="page"]{color:var(--cobalt)}
.nav-cta{display:flex; align-items:center; gap:12px}
.nav-toggle{
  display:none; width:44px; height:44px; padding:0; /* 44px touch target */
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-btn);
  cursor:pointer; box-shadow:var(--shadow-sm);
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after{
  display:block; width:18px; height:2px; border-radius:2px; background:var(--ink); margin-inline:auto;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle-bar{position:relative}
.nav-toggle-bar::before, .nav-toggle-bar::after{content:''; position:absolute; left:0}
.nav-toggle-bar::before{top:-6px}
.nav-toggle-bar::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{transform:translateY(-6px) rotate(-45deg)}
/* mobile menu panel — the one component the mockup lacked; built from the same tokens */
.mobile-menu{
  display:none; position:absolute; top:64px; left:0; right:0;
  background:var(--paper); border-bottom:1px solid var(--hairline);
  box-shadow:var(--shadow-card); padding:8px 24px 16px;
}
.mobile-menu a{
  display:block; padding:12px 4px; text-decoration:none;
  font-size:var(--text-body); font-weight:var(--weight-semibold); color:var(--ink);
  border-bottom:1px solid var(--pebble);
}
.mobile-menu li:last-child a{border-bottom:none}
.mobile-menu a[aria-current="page"]{color:var(--cobalt)}
.mobile-menu ul{list-style:none; margin:0; padding:0}
@media (max-width:1080px){
  .menu{display:none}
  .nav-toggle{display:block}
  .mobile-menu[data-open]{display:block}
}

/* nav dropdown (Software services) — same panel recipe as the datepicker's .cal.
   CSS-only: :focus-within opens it for keyboards at any width the desktop menu
   shows; :hover is gated to hover-capable pointers ≥1081px. The parent stays a
   real link, so tap/click always navigates to /software/. */
.nav-sub{position:relative}
.nav-sub > a{display:inline-block} /* inline elements ignore transform — needed for the spring lift */
.nav-sub-panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translate(-50%, 4px);
  min-width:240px; z-index:70;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-product);
  box-shadow:var(--shadow-card); padding:8px;
  opacity:0; visibility:hidden;
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.nav-sub-panel::before{content:''; position:absolute; left:0; right:0; top:-12px; height:12px} /* pointer bridge link → panel */
.nav-sub-panel a{
  display:block; padding:9px 12px; border-radius:var(--radius-btn);
  font-size:var(--text-body-sm); font-weight:var(--weight-medium); color:var(--ink); text-decoration:none;
}
.nav-sub-panel a:hover{background:var(--pebble); color:var(--ink)}
.nav-sub:focus-within .nav-sub-panel{opacity:1; visibility:visible; transform:translate(-50%, 0)}
@media (min-width:1081px) and (hover:hover){
  .nav-sub:hover .nav-sub-panel{opacity:1; visibility:visible; transform:translate(-50%, 0)}
}

/* ---------- hero ---------- */
.hero{padding-block:88px 72px; position:relative; overflow:clip}
.hero-rain{ /* digital rain canvas — decoration only, never a UI fill */
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  display:block; pointer-events:none;
}
.hero-grid{display:block; position:relative; z-index:1}
.hero h1{font-size:clamp(40px,6.4vw,80px); font-weight:var(--weight-bold); letter-spacing:-.02em; line-height:1.05}
.hero .lede{font-size:var(--text-body-lg); line-height:var(--leading-body-lg); color:var(--slate); margin-top:var(--spacing-24); max-width:46ch}
.hero-flip{ /* flip subline directly under the headline — sized as a subheading */
  margin-top:var(--spacing-16);
  font-size:clamp(20px,2.4vw,var(--text-subheading));
  line-height:1.3;
}
.hero-ctas{display:flex; gap:var(--spacing-16); margin-top:var(--spacing-32); flex-wrap:wrap; align-items:center}
.hero-note{margin-top:var(--spacing-24); font-size:var(--text-body-sm); color:var(--slate)}
.hero-note b{color:var(--ink); font-weight:var(--weight-bold)}

/* hero note text flip (ContainerTextFlip pattern, no framework): the word
   container animates its measured width while the face rotates X in and out;
   framed with the same Signal Blue → Ink Navy comet ring as the moving-border
   links — keep .text-flip chrome in sync with FLIP_CHROME in main.js */
.text-flip{
  display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
  transition:width .3s cubic-bezier(.2,.8,.3,1);
  padding:6px 16px; border:1.5px solid transparent; border-radius:var(--radius-btn);
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    conic-gradient(from var(--mb-angle),
      var(--ink), var(--blue) 25%, transparent 50%, transparent 100%) border-box;
  animation:mb-spin 4s linear infinite;
}
.text-flip-face{display:inline-block; transform-origin:50% 100%; transition:transform .25s ease, opacity .25s ease}
.text-flip.flip-out .text-flip-face{transform:rotateX(90deg); opacity:0}
.text-flip.flip-in .text-flip-face{transform:rotateX(-90deg); opacity:0; transition:none}

/* ---------- widget zone (decorative canvas container, shared) ---------- */
.widget-zone{position:relative}

/* ---------- section headers (centered) ---------- */
.sec{padding-block:var(--spacing-96) 0; overflow-x:clip} /* decorative blobs poke past .wrap's padding — clip, don't scroll */
.sec-head{max-width:640px; margin:0 auto var(--spacing-56); text-align:center}
.sec-head h2{font-size:clamp(32px,4.6vw,50px); font-weight:var(--weight-bold); letter-spacing:-.02em; line-height:var(--leading-heading)}
.sec-head p{color:var(--slate); font-size:var(--text-button); margin-top:var(--spacing-16)}
.sec-cta{display:flex; justify-content:center; gap:var(--spacing-16); flex-wrap:wrap; margin-top:var(--spacing-32)}

/* systems: accordion + readout card */
.sys-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:var(--spacing-64); align-items:start}
@media (max-width:920px){ .sys-grid{grid-template-columns:1fr; gap:var(--spacing-40)} }

/* side-by-side pricing cards */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-24); align-items:start}
@media (max-width:760px){ .price-grid{grid-template-columns:1fr} }

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--hairline)}
.acc-item{border-bottom:1px solid var(--hairline)}
.acc-btn{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  background:none; border:none; cursor:pointer; font-family:var(--font);
  /* Slate, not DESIGN.md's mist: 1.9:1 on Cloud fails WCAG AA for these 17px titles,
     and invisible inactive titles hide 2 of the 3 systems from anyone who doesn't click. */
  padding:22px 4px; color:var(--slate); font-size:17px; font-weight:var(--weight-medium);
}
.acc-item[data-open] .acc-btn{color:var(--ink); font-weight:var(--weight-bold); font-size:var(--text-body-lg)}
.acc-btn .ico{
  width:34px; height:34px; border-radius:var(--radius-btn); flex:0 0 auto;
  background:var(--pebble); color:var(--mist);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:var(--weight-bold);
}
.acc-item[data-open] .ico{background:var(--blue); color:#fff}
.acc-btn .chev{margin-left:auto; flex:0 0 auto; transition:transform .25s ease; color:var(--mist)}
.acc-item[data-open] .chev{transform:rotate(180deg); color:var(--blue)}
.acc-body{display:none; padding:0 4px 24px 52px; color:var(--slate); font-size:15.5px}
.acc-item[data-open] .acc-body{display:block}
.acc-body .spec{margin-top:14px; display:flex; flex-direction:column; gap:var(--spacing-8)}
.acc-body .spec span b{color:var(--ink); font-weight:var(--weight-bold)}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:var(--spacing-8); flex-wrap:wrap}
.tab{
  font-family:var(--font); font-size:var(--text-body-sm); font-weight:var(--weight-semibold);
  color:var(--slate); background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius-full); padding:8px 16px; cursor:pointer;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.tabpanel[hidden]{display:none}

/* ---------- product card (16px radius, blob behind) ---------- */
.product-zone{position:relative; padding:24px 0}
.product-zone .blob-cyan{width:340px; height:340px; right:-40px; top:-30px}
.product-zone .blob-magenta{width:220px; height:220px; left:-30px; bottom:-40px}
.product-card{
  position:relative; z-index:1; background:var(--paper); border-radius:var(--radius-product);
  box-shadow:var(--shadow-card); border:1px solid var(--hairline); padding:var(--card-padding);
}
.product-card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--hairline)}
.product-card-head .t{font-weight:var(--weight-bold); font-size:var(--text-body-sm)}

/* rental journey (devices panel) — three stations on a dashed spine.
   Deliberately not a readout: TECHPASS rents devices and runs no MDM,
   so the panel narrates the rental instead of faking telemetry. */
.journey{position:relative; list-style:none; margin:0; padding:0 0 2px}
.journey::before{ /* dashed spine behind the medallions */
  content:""; position:absolute; left:19px; top:30px; bottom:30px;
  border-left:2px dashed var(--hairline);
  transform-origin:top; transform:scaleY(0);
  transition:transform .5s cubic-bezier(.2,.7,.3,1) .1s;
}
.product-card:not([hidden]) .journey::before{transform:scaleY(1)}
.journey li{position:relative; display:grid; grid-template-columns:40px 1fr; column-gap:16px; padding:10px 0}
.journey .j-ico{ /* medallion punched through the spine with a paper ring */
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-full);
  background:var(--pebble); color:var(--ink);
  box-shadow:0 0 0 3px var(--paper); position:relative; z-index:1;
}
.journey h3{font-size:var(--text-body); font-weight:var(--weight-bold); color:var(--ink)}
.journey p{font-size:var(--text-body-sm); line-height:var(--leading-body-sm); color:var(--slate); margin-top:2px}
.product-card:not([hidden]) .journey li{ /* stations rise in sequence on open */
  animation:rise .45s cubic-bezier(.2,.8,.3,1) both;
}
.product-card:not([hidden]) .journey li:nth-child(1){animation-delay:.15s}
.product-card:not([hidden]) .journey li:nth-child(2){animation-delay:.27s}
.product-card:not([hidden]) .journey li:nth-child(3){animation-delay:.39s}

/* web presence diptych — two paired services, one hairline. Deliberately
   not a journey: this tab bundles two equal services, so the divider says
   "two halves, one provider" instead of drawing a sequence. */
.diptych{display:grid; grid-template-columns:1fr 1px 1fr; column-gap:20px; margin-top:4px}
.dip-divider{background:var(--hairline)}
.dip-half h3{font-size:var(--text-body); font-weight:var(--weight-bold); color:var(--ink)}
.dip-half p{font-size:var(--text-body-sm); line-height:var(--leading-body-sm); color:var(--slate); margin-top:8px}
.diptych .mockup{max-width:none; margin-inline:0; margin-top:14px; box-shadow:none; border:none; padding:0}
.diptych .mockup-head{padding-bottom:8px; margin-bottom:8px}
.diptych .browser-hero{padding:14px; gap:8px; margin-bottom:0}
.dip-inbox{margin-top:14px}
.dip-cap{font-size:var(--text-caption); font-weight:var(--weight-semibold); color:var(--slate)}
.dip-inbox .lead-row{padding:10px 0}
.dip-inbox .lead-ava{width:22px; height:22px}
@media (max-width:560px){
  .diptych{grid-template-columns:1fr; row-gap:20px}
  .dip-divider{width:100%; height:1px}
}
.product-card:not([hidden]) .dip-half{animation:rise .45s cubic-bezier(.2,.8,.3,1) both}
.product-card:not([hidden]) .dip-half:nth-child(1){animation-delay:.15s}
.product-card:not([hidden]) .dip-half:nth-child(3){animation-delay:.3s}

/* web diptych — sample homepage vignette (browser-hero gets real sample words) */
.site-nav{display:flex; align-items:center; gap:8px; margin-bottom:2px}
.site-nav .site-logo{width:34px; height:8px; border-radius:var(--radius-full); background:rgba(255,255,255,.85)}
.site-nav b{margin-left:auto; font-size:10px; font-weight:var(--weight-semibold); color:rgba(255,255,255,.7); letter-spacing:.02em; white-space:nowrap}
.site-headline{font-size:14px; font-weight:var(--weight-bold); color:#fff; line-height:1.2; letter-spacing:-.01em}
.site-sub{font-size:var(--text-caption); line-height:var(--leading-caption); color:rgba(255,255,255,.65)}
.site-cta{justify-self:start; margin-top:2px; display:inline-flex; align-items:center; padding:4px 12px; background:var(--blue); color:#fff; border-radius:var(--radius-full); font-size:11px; font-weight:var(--weight-bold)}
/* web diptych — enquiry rows read as pipeline stages (industry label + stage) */
.lead-txt{flex:1; min-width:0; display:grid; gap:1px}
.lead-txt b{font-size:13px; font-weight:var(--weight-semibold); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lead-txt span{font-size:var(--text-caption); line-height:var(--leading-caption); color:var(--slate)}
.lead-row.is-passed .lead-txt span{color:var(--cobalt); font-weight:var(--weight-semibold)}
/* communication diptych — chat bubbles carry sample conversation lines instead of blank bars */
.dip-chat .bubble{width:auto; max-width:78%; font-size:var(--text-caption); line-height:var(--leading-caption); font-weight:var(--weight-medium); color:var(--ink)}
.dip-chat .bubble-out{color:#fff}

/* communication diptych vignettes (chat window + call card) */
.dip-chat{margin-top:14px; display:grid; gap:0}
.dip-chips{display:flex; gap:8px; margin-top:12px}
.dip-call{margin-top:14px; display:grid; gap:12px}
.diptych .call-card{padding:14px; gap:8px; justify-items:center}
.dip-transcript{
  display:grid; grid-template-columns:18px 1fr; column-gap:10px; align-items:center;
  border:1px solid var(--hairline); border-radius:var(--radius-btn);
  padding:10px 12px; background:var(--cloud);
}
.dip-transcript svg{color:var(--ink)}
.dip-transcript b{font-size:var(--text-body-sm); color:var(--ink); display:block}
.dip-transcript .dip-cap{margin-top:2px; display:block}


.num{font-variant-numeric:tabular-nums}

/* ---------- feature grid (2x2 panels, 24px radius) ---------- */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-24)}
@media (max-width:760px){ .why-grid{grid-template-columns:1fr} }
.why-card{
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-panel);
  box-shadow:var(--shadow-card); padding:var(--spacing-32);
}
.why-card .ico{
  width:44px; height:44px; border-radius:12px; background:var(--badge-bg); color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--spacing-24);
}
.why-card h3{font-size:var(--text-subheading); font-weight:var(--weight-bold)}
.why-card p{color:var(--slate); margin-top:10px; font-size:15.5px}

/* ---------- pricing card ---------- */
.price-card{
  position:relative; z-index:1; background:var(--paper); color:var(--ink);
  border-radius:var(--radius-product); box-shadow:var(--shadow-card);
  max-width:600px; margin:0 auto; padding:var(--spacing-40);
}
.price-card .top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.price-card h3{font-size:var(--text-subheading); font-weight:var(--weight-bold)}
.price-fig{display:flex; align-items:baseline; gap:12px; margin-top:var(--spacing-24); flex-wrap:wrap}
.price-fig .big{font-size:clamp(38px,5vw,50px); font-weight:var(--weight-bold); letter-spacing:-.02em; line-height:var(--leading-heading)}
.price-fig .per{color:var(--slate); font-size:var(--text-body-sm); font-weight:var(--weight-medium)}
.price-card .desc{color:var(--slate); margin-top:12px; font-size:15.5px}
.price-ctas{display:flex; gap:var(--spacing-16); margin-top:var(--spacing-32); flex-wrap:wrap; align-items:center}
.includes{margin-top:var(--spacing-32); border-top:1px solid var(--hairline); padding-top:var(--spacing-24); display:grid; gap:12px}
.inc{display:flex; gap:12px; align-items:baseline; font-size:15px; font-weight:var(--weight-medium)}
.inc svg{flex:0 0 auto; transform:translateY(2px)}
.inc .lab{margin-left:auto; font-size:var(--text-caption); font-weight:var(--weight-semibold); color:var(--slate); text-transform:uppercase; letter-spacing:.05em}

/* ---------- form fields (inputs on Pebble, 8px radius, hairline borders) ---------- */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:var(--spacing-16)}
.field label{font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--ink)}
.field .req{color:var(--blue)}
.field input, .field select, .field textarea{
  font-family:var(--font); font-size:var(--text-body); color:var(--ink);
  background:var(--pebble); border:1px solid var(--hairline); border-radius:var(--radius-input);
  padding:10px 14px; width:100%;
}
.field textarea{resize:vertical; min-height:120px}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue);
}
.field .hint{font-size:var(--text-caption); color:var(--slate)}
.field .error{font-size:var(--text-caption); color:var(--error); display:none}
.field[data-invalid] .error{display:block}
.field[data-invalid] input, .field[data-invalid] select, .field[data-invalid] textarea{border-color:var(--error)}
.form-status{margin-top:var(--spacing-16); font-size:var(--text-body-sm); font-weight:var(--weight-semibold)}
.form-status[data-state="success"]{color:var(--cobalt)}
.form-status[data-state="error"]{color:var(--error)}
/* honeypot — hidden from humans, present for bots */
.hp-field{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden}

/* ---------- FAQ item (accordion variant with plain question rows) ---------- */
.faq-group{padding-block:var(--spacing-48) 0}
.faq-group h2{font-size:var(--text-subheading); font-weight:var(--weight-bold); margin-bottom:var(--spacing-24)}
.faq-nav{display:flex; gap:var(--spacing-8); flex-wrap:wrap; justify-content:center; margin-top:calc(-1 * var(--spacing-32))}
.faq-nav a{
  font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--slate);
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-full);
  padding:8px 16px; text-decoration:none;
}
.faq-nav a:hover{color:var(--ink)}
.faq-list{max-width:800px; margin:0 auto}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-16);
  background:none; border:none; cursor:pointer; font-family:var(--font); text-align:left;
  padding:20px 4px; color:var(--ink); font-size:var(--text-button); font-weight:var(--weight-semibold);
}
.faq-q .chev{flex:0 0 auto; transition:transform .25s ease; color:var(--mist)}
.faq-item[data-open] .faq-q .chev{transform:rotate(180deg); color:var(--blue)}
.faq-a{display:none; padding:0 4px 24px; color:var(--slate); font-size:15.5px}
.faq-item[data-open] .faq-a{display:block}

/* ---------- device cards (Hardware page) ---------- */
.device-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-24); align-items:stretch}
@media (max-width:760px){ .device-grid{grid-template-columns:1fr} }
.device-card{display:flex; flex-direction:column}
.device-photo{width:100%; height:260px; object-fit:cover; border-radius:var(--radius-product) var(--radius-product) 0 0; background:var(--pebble)}
.photo-placeholder{
  width:100%; height:260px; display:flex; align-items:center; justify-content:center;
  background:var(--pebble); border:1px dashed var(--hairline);
  border-radius:var(--radius-product) var(--radius-product) 0 0;
  color:var(--slate); font-size:var(--text-body-sm); font-weight:var(--weight-medium);
}
.device-body{display:flex; flex-direction:column; gap:12px; padding:var(--card-padding)}
.device-body h2{font-size:var(--text-subheading)} /* h2, not h3: the cards follow the page h1 with no h2 between */
.device-body .desc{color:var(--slate); font-size:15.5px}
.device-features{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.device-features li{display:flex; gap:10px; align-items:baseline; font-size:15px; font-weight:var(--weight-medium)}
.device-features svg{flex:0 0 auto; transform:translateY(2px)}
.device-price{margin-top:auto; padding-top:12px; border-top:1px solid var(--hairline); font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--ink)}
.device-price .num{font-size:18px}

/* spec strip (three detail photos) */
.spec-strip{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--spacing-24)}
@media (max-width:760px){ .spec-strip{grid-template-columns:1fr; max-width:400px; margin-inline:auto} }
.spec-strip figure{margin:0; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-product); box-shadow:var(--shadow-card); overflow:hidden}
.spec-strip img{width:100%; height:200px; object-fit:cover}
.spec-strip figcaption{padding:12px var(--spacing-16); font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--ink); border-top:1px solid var(--hairline)}

/* how-it-works numbered steps */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-24); counter-reset:step}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }
.steps li{
  counter-increment:step; position:relative; background:var(--paper);
  border:1px solid var(--hairline); border-radius:var(--radius-panel); box-shadow:var(--shadow-card);
  padding:var(--spacing-32); padding-top:56px; color:var(--slate); font-size:15.5px;
}
.steps li::before{
  content:counter(step, decimal-leading-zero); position:absolute; top:var(--spacing-16); left:var(--spacing-32);
  width:32px; height:32px; border-radius:var(--radius-btn); background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:var(--weight-bold);
}

/* ---------- service blocks (Software page, alternating) ---------- */
.services-stack{display:grid; gap:var(--spacing-96)}
@media (max-width:920px){ .services-stack{gap:var(--spacing-64)} }
.service{display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-64); align-items:center}
@media (max-width:920px){ .service{grid-template-columns:1fr; gap:var(--spacing-40)} }
@media (min-width:921px){ .service.flip .service-copy{order:2} } /* alternate only on wide screens */
.service-copy{display:grid; gap:16px}
.service-copy h2{font-size:var(--text-subheading)}
.service-copy .desc{color:var(--slate); font-size:15.5px}
.service-price{padding-top:12px; border-top:1px solid var(--hairline); font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--ink)}
.service-price .num{font-size:18px}

/* skeleton UI mockups (atmosphere — no photos, no invented copy) */
.mockup{
  position:relative; z-index:1; background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius-product); box-shadow:var(--shadow-card); padding:var(--spacing-16);
  max-width:420px; margin-inline:auto; width:100%;
}
.bar{height:10px; border-radius:var(--radius-full); background:var(--pebble)}
.bar.w40{width:40%} .bar.w60{width:60%} .bar.w80{width:80%}
.mockup-head{display:flex; align-items:center; gap:6px; padding-bottom:12px; border-bottom:1px solid var(--hairline); margin-bottom:12px}
.mockup-head .sdot{width:8px; height:8px; border-radius:50%; background:var(--mist)}
.mockup-head .urlbar{flex:1; height:12px; margin-left:8px}
.mockup-label{font-size:var(--text-caption); font-weight:var(--weight-semibold); color:var(--slate)}
/* service detail pages (Phase 11) — same mockup, scaled up; feature list centred */
.mockup-lg{max-width:560px}
.detail-features{max-width:560px; margin-inline:auto; gap:14px}
.detail-features li{font-size:var(--text-body)}

/* browser mockup */
.browser-hero{background:var(--ink); border-radius:var(--radius-btn); padding:20px; display:grid; gap:10px; margin-bottom:12px}
.browser-hero .bar{background:rgba(255,255,255,.35)}
.browser-hero .btn-pill{width:88px; height:22px; border-radius:var(--radius-full); background:var(--blue); margin-top:4px}
.mini-cards{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.mini{border:1px solid var(--hairline); border-radius:var(--radius-btn); padding:12px; display:grid; gap:8px}

/* chat mockup */
.chat-row{display:flex; gap:8px; margin-bottom:10px}
.bubble{border-radius:12px; padding:10px; display:grid; gap:6px; width:70%}
.bubble-in{background:var(--pebble); margin-right:auto}
.bubble-out{background:var(--blue); margin-left:auto}
.bubble .bar{background:rgba(11,53,88,.15)}
.bubble-out .bar{background:rgba(255,255,255,.5)}

/* phone / incoming-call mockup */
.phone{width:220px; margin-inline:auto; border:1px solid var(--hairline); border-radius:28px; padding:14px; background:var(--cloud)}
.call-card{background:var(--paper); border:1px solid var(--hairline); border-radius:12px; padding:16px; display:grid; gap:10px; justify-items:center}
.call-ava{width:44px; height:44px; border-radius:50%; background:var(--badge-bg)}
.call-actions{display:flex; gap:16px; margin-top:6px}
.call-btn{width:38px; height:38px; border-radius:50%}
.call-decline{background:var(--mist)}
.call-answer{background:var(--blue)}

/* leads mockup */
.leads-head{display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--hairline); margin-bottom:4px}
.leads-head .num{font-size:16px; font-weight:var(--weight-bold); color:var(--ink)}
.leads-head .pill{margin-left:auto}
.lead-row{display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--pebble)}
.lead-row:last-child{border-bottom:none}
.lead-ava{width:28px; height:28px; border-radius:50%; background:var(--pebble); flex:0 0 auto}
.lead-row .bar{flex:1}
.lead-row .pill{font-size:11px; padding:2px 8px}

/* outline button on dark bands */
.btn-outline{background:transparent; border:1px solid #fff; color:#fff; box-shadow:none}
.btn-outline:hover{background:rgba(255,255,255,.1)}

/* ---------- About page ---------- */
.prose{max-width:640px; margin:0 auto; display:grid; gap:16px}
.prose p{color:var(--slate); font-size:var(--text-button); line-height:var(--leading-body-lg)}
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-24); max-width:820px; margin:0 auto}
@media (max-width:760px){ .vm-grid{grid-template-columns:1fr} }
.vm-card{background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-panel); box-shadow:var(--shadow-card); padding:var(--spacing-32)}
.vm-card p{color:var(--ink); font-size:17px; line-height:1.5; margin-top:14px; font-weight:var(--weight-medium)}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:var(--spacing-24); align-items:start}
@media (max-width:920px){ .contact-grid{grid-template-columns:1fr} }
.contact-card{background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-panel); box-shadow:var(--shadow-card); padding:var(--spacing-32)}
.contact-card h2{font-size:var(--text-subheading); font-weight:var(--weight-bold)}
.contact-card .desc{color:var(--slate); font-size:15.5px; margin-top:10px}
.contact-ways{display:grid; gap:var(--spacing-24); margin-top:var(--spacing-24); justify-items:start}
.email-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.email-lab{font-size:var(--text-caption); font-weight:var(--weight-semibold); color:var(--slate); text-transform:uppercase; letter-spacing:.05em}
.email-row a{color:var(--ink); font-weight:var(--weight-semibold)}
.copy-btn{padding:6px 12px}
.copy-btn[data-copied]{color:var(--cobalt)}
.form-cols{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--spacing-16)}
@media (max-width:600px){ .form-cols{grid-template-columns:1fr} }
.closing-note{text-align:center; color:var(--slate); font-size:var(--text-body-lg)}

/* ---------- Client Login placeholder ---------- */
.login-hero{padding-block:var(--spacing-96)}
.login-card{
  max-width:480px; margin:0 auto; text-align:center;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-panel);
  box-shadow:var(--shadow-card); padding:var(--spacing-64) var(--spacing-40);
}
.login-card h1{font-size:clamp(32px,4.6vw,50px); font-weight:var(--weight-bold); letter-spacing:-.02em}
.login-card p{color:var(--slate); margin-top:12px; font-size:var(--text-body-lg)}
.login-card .btn{margin-top:var(--spacing-24)}

/* ---------- Legal pages (privacy policy, terms) ---------- */
.draft-banner{
  display:inline-block; margin-top:var(--spacing-16);
  background:var(--pebble); color:var(--cobalt); border:1px solid var(--hairline);
  border-radius:var(--radius-full); padding:6px 14px;
  font-size:var(--text-caption); font-weight:var(--weight-semibold);
  text-transform:uppercase; letter-spacing:.05em;
}
.legal-meta{color:var(--slate); font-size:var(--text-body-sm); font-weight:var(--weight-medium); margin-top:var(--spacing-16); text-transform:uppercase; letter-spacing:.04em}
.legal-body{max-width:760px; margin-inline:auto}
.legal-body .wrap{max-width:none} /* .wrap inside already-constrained article keeps left alignment */
.legal-body p{color:var(--slate); font-size:15.5px; line-height:1.7; margin-block:12px}
.legal-body p strong{color:var(--ink)}
.legal-body h2{font-size:var(--text-body-lg); font-weight:var(--weight-bold); color:var(--ink); margin-block:var(--spacing-32) 4px}
.legal-body ul{list-style:disc; padding-left:24px; margin-block:8px}
.legal-body li{color:var(--slate); font-size:15.5px; line-height:1.7; margin-block:6px}
.legal-body p.li-r{margin-left:24px}

/* ---------- cookie notice (chat consent) ---------- */
#cookie-notice{
  position:fixed; left:16px; bottom:16px; z-index:2147483000;
  max-width:320px; background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius-product); box-shadow:var(--shadow-card); padding:var(--spacing-16);
}
#cookie-notice[hidden]{display:none}
#cookie-notice p{margin:0 0 12px; color:var(--slate); font-size:var(--text-body-sm); line-height:1.5}
#cookie-notice .cookie-actions{display:flex; gap:8px}
@media (max-width:480px){ #cookie-notice{left:12px; right:12px; bottom:12px; max-width:none} }

/* ---------- Plans & Pricing (selectors + summary) ---------- */
.plans-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:var(--spacing-24); align-items:start}
@media (max-width:920px){ .plans-grid{grid-template-columns:1fr} }
.plans-selectors{display:grid; gap:var(--spacing-16)}
.plans-h2{font-size:var(--text-body-lg); font-weight:var(--weight-bold); margin-top:var(--spacing-16)}
.plans-sub{color:var(--slate); font-size:var(--text-body-sm); margin-top:-8px}
.plan-card{
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-product);
  box-shadow:var(--shadow-card); padding:var(--spacing-24); display:grid; gap:var(--spacing-16);
}
.plan-card-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.plan-card-head h3{font-size:var(--text-subheading); font-weight:var(--weight-bold)}
.plan-price .num{font-size:var(--text-button); font-weight:var(--weight-bold)}
.plan-price .per{font-size:var(--text-caption); color:var(--slate); font-weight:var(--weight-medium)}
.plan-controls{display:flex; justify-content:space-between; align-items:center; gap:var(--spacing-16); flex-wrap:wrap}
.delivery-field{padding-top:var(--spacing-16); border-top:1px solid var(--hairline)}
.delivery-field[hidden]{display:none}
.delivery-field .field{margin-bottom:0}
.summary-line[hidden]{display:none}

/* delivery date picker (custom grid: weekdays only, 14–180 days out) */
.datepicker{position:relative}
.date-input{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  font-family:var(--font); font-size:var(--text-body); color:var(--ink);
  background:var(--pebble); border:1px solid var(--hairline); border-radius:var(--radius-input);
  padding:10px 14px; cursor:pointer; text-align:left;
}
.date-input svg{flex:0 0 auto; color:var(--slate)}
.date-input:hover{border-color:var(--mist)}
.field[data-invalid] .date-input{border-color:var(--error)}
.cal{
  position:absolute; top:calc(100% + 8px); left:0; z-index:70; width:100%;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-product);
  box-shadow:var(--shadow-card); padding:var(--spacing-16);
}
.cal[hidden]{display:none}
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.cal-title{font-weight:var(--weight-bold); font-size:var(--text-body-sm); color:var(--ink)}
.cal-nav{
  width:32px; height:32px; border:1px solid var(--hairline); border-radius:var(--radius-btn);
  background:var(--paper); color:var(--ink); font-size:16px; cursor:pointer; line-height:1;
}
.cal-nav:hover:not([disabled]){background:var(--pebble)}
.cal-nav[disabled]{opacity:.35; cursor:not-allowed}
.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px}
.cal-dow{font-size:var(--text-caption); font-weight:var(--weight-semibold); color:var(--slate); text-align:center; padding:4px 0}
.cal-day{
  height:34px; border:none; border-radius:var(--radius-btn); background:transparent;
  font-family:var(--font); font-size:var(--text-body-sm); font-weight:var(--weight-medium);
  color:var(--ink); cursor:pointer;
}
.cal-day:hover:not([disabled]){background:var(--pebble)}
.cal-day[disabled]{color:var(--mist); cursor:not-allowed}
.cal-day.cal-sel{background:var(--blue); color:#fff; font-weight:var(--weight-bold)}
.terms{display:inline-flex; border:1px solid var(--hairline); border-radius:var(--radius-btn); overflow:hidden}
.term-btn{
  font-family:var(--font); font-size:var(--text-body-sm); font-weight:var(--weight-semibold);
  color:var(--slate); background:var(--paper); border:none; cursor:pointer; padding:8px 14px;
}
.term-btn + .term-btn{border-left:1px solid var(--hairline)}
.term-btn[aria-pressed="true"]{background:var(--ink); color:#fff}
.stepper{display:inline-flex; align-items:center; gap:4px; border:1px solid var(--hairline); border-radius:var(--radius-btn); padding:2px}
.step-btn{
  width:34px; height:34px; border-radius:var(--radius-btn); border:none; cursor:pointer;
  background:var(--pebble); color:var(--ink); font-size:var(--text-button); font-weight:var(--weight-bold);
}
.step-btn:hover{background:var(--hairline)}
.qty{min-width:32px; text-align:center; font-weight:var(--weight-bold); color:var(--ink)}
.software-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-16)}
@media (max-width:600px){ .software-grid{grid-template-columns:1fr} }
.toggle-card{
  display:grid; gap:6px; text-align:left; cursor:pointer; font-family:var(--font);
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-product);
  box-shadow:var(--shadow-sm); padding:var(--spacing-16);
}
.toggle-card .t{font-weight:var(--weight-bold); color:var(--ink); font-size:var(--text-body-sm)}
.toggle-card .p{font-size:var(--text-caption); color:var(--slate); font-weight:var(--weight-medium)}
.toggle-card[aria-pressed="true"]{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), var(--shadow-sm)}
.toggle-card[aria-pressed="true"] .t{color:var(--blue)}
.summary{
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-panel);
  box-shadow:var(--shadow-card); padding:var(--spacing-24); position:sticky; top:80px;
  display:grid; gap:var(--spacing-16); align-content:start;
}
.summary-h{font-size:var(--text-body-lg); font-weight:var(--weight-bold)}
.summary-lines{display:grid; gap:8px; border-bottom:1px solid var(--hairline); padding-bottom:var(--spacing-16)}
.summary-empty{color:var(--slate); font-size:var(--text-body-sm); font-weight:var(--weight-medium)} /* slate, not mist: 2.0:1 on paper fails AA */
.summary-line{display:flex; justify-content:space-between; gap:12px; font-size:var(--text-body-sm); color:var(--slate); font-weight:var(--weight-medium)}
.summary-line b{color:var(--ink)}
.summary-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.summary-total span{font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--slate)}
.summary-total strong{font-size:var(--text-heading-sm); font-weight:var(--weight-bold); letter-spacing:-.02em}
.summary-note{font-size:var(--text-caption); color:var(--slate); line-height:1.5}
.btn-checkout[disabled]{opacity:.45; cursor:not-allowed}
.btn-checkout[disabled]:hover{background:var(--blue)}
@media (max-width:920px){
  .summary{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:60; border-radius:var(--radius-panel) var(--radius-panel) 0 0; box-shadow:0 -8px 30px rgba(71,103,136,.15); gap:8px; max-height:70vh; overflow:auto}
  .summary-h{display:none}
  .summary-lines{max-height:110px; overflow:auto}
  .plans-grid{padding-bottom:200px} /* room for the bottom sheet */
}

/* ---------- CTA band (inverse navy section) ---------- */
.cta-band{background:var(--ink); color:#fff; padding-block:var(--spacing-96); position:relative; overflow:clip}
.cta-band .blob-cyan{width:420px; height:420px; right:-120px; top:-120px; opacity:.25}
.cta-band .blob-magenta{width:300px; height:300px; left:-100px; bottom:-120px; opacity:.22}
.cta-band .sec-head{position:relative; z-index:1}
.cta-band .sec-head h2{color:#fff}
.cta-band .sec-head p{color:var(--mist)}
.cta-band .cta-actions{position:relative; z-index:1; display:flex; gap:var(--spacing-16); justify-content:center; flex-wrap:wrap; margin-top:calc(-1 * var(--spacing-24))}

/* ---------- footer ---------- */
footer{background:var(--cloud); border-top:1px solid var(--hairline); padding-block:var(--spacing-64) var(--spacing-32)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--spacing-40)}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-grid h4{font-size:var(--text-caption); font-weight:var(--weight-semibold); text-transform:uppercase; letter-spacing:.08em; color:var(--slate); margin:0 0 var(--spacing-16)}
.foot-grid a{display:block; font-size:var(--text-body-sm); font-weight:var(--weight-semibold); color:var(--ink); text-decoration:none; margin-bottom:12px}
.foot-grid a:hover{text-decoration:underline}
.foot-brand p{color:var(--slate); font-size:var(--text-body-sm); max-width:36ch; margin-top:var(--spacing-16)}
.foot-bottom{
  margin-top:var(--spacing-48); padding-top:var(--spacing-24); border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:13px; color:var(--slate);
}

/* ---------- motion (html.js gates hidden states) ---------- */
html.js .m{
  opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
html.js .m.on{opacity:1; transform:none}
@keyframes rise{from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none}}
/* ---------- tracing beam (home page) ---------- */
.trace{position:relative}
.trace-rail{
  position:absolute; top:0; bottom:0; width:2px; left:12px;
  background:var(--pebble); border-radius:2px; pointer-events:none; z-index:0;
}
.trace-beam{
  display:block; width:100%; height:100%; border-radius:2px;
  /* deliberate gradient exception, like the blobs: decorative only (Cedrick's call).
     Body stays Signal Blue; the tail sweeps through the site's secondary
     decoration colours (cyan → magenta) then pales out to a soft dissolve. */
  background:linear-gradient(to bottom,
    var(--blue) 0%, var(--blue) 68%, var(--cyan) 84%,
    var(--magenta) 93%, rgba(229, 92, 255, .15) 100%);
}
/* JS drives the fill via --trace-p (0-100), capped at 94% so the beam runs a
   little shorter than the rail; without JS the beam shows fully drawn */
html.js .trace-beam{height:calc(var(--trace-p, 100) * 0.94%)}
@media (min-width:768px){
  .trace-rail{left:calc((100% - min(1152px, 100%)) / 2 - 28px)}
}
@media (prefers-reduced-motion:reduce){
  html.js .trace-beam{height:100%}
  html{scroll-behavior:auto}
  html.js .m{opacity:1; transform:none; animation:none; transition:none}
  .acc-btn .chev, .faq-q .chev{transition:none}
  .nav-sub-panel{transition:none}
  .menu a{transition:color .2s ease}
  .menu a:hover, .menu a:focus-visible{transform:none}
  .cta-glow, .cta-glow::before{animation:none}
  .text-flip{animation:none; border-color:var(--hairline)}
  .journey::before{transform:none; transition:none}
  .product-card:not([hidden]) .journey li{animation:none}
  .product-card:not([hidden]) .dip-half{animation:none}
  .hero-rain{display:none}
  .text-link.moving-border{animation:none; border-color:var(--hairline)}
}