/* ============================================================
   CASEL — brand stylesheet
   Palette, type and layout derived from the CASEL Brand Guide v1.2
   Deep Teal #17363A · Warm Porcelain #F6F1E9 · Warm Stone #D2C8BB
   Muted Apricot #E6A58F (accent only) · Manrope type system
   Alert / above-threshold uses accessible terracotta #A8452B
   (Muted Apricot fails 3:1 as a line/text colour — kept decorative only)
   ============================================================ */

:root{
  /* Light — Warm Porcelain world */
  --bg:#F6F1E9;
  --surface:#FCFAF5;
  --surface-2:#EFE7D9;
  --ink:#17363A;          /* Deep Teal */
  --ink-soft:#4A6163;
  --ink-faint:#7C8F8E;
  --stone:#D2C8BB;        /* Warm Stone */
  --line:rgba(23,54,58,.12);
  --line-strong:rgba(23,54,58,.22);
  --accent:#E6A58F;       /* Muted Apricot — accent only */
  --accent-quiet:rgba(230,165,143,.20);
  --alert:#A8452B;        /* accessible terracotta — status only */
  --alert-quiet:rgba(168,69,43,.12);
  --btn-ink:#17363A;
  --btn-label:#F6F1E9;
  --focus:#17363A;
  /* Fixed reverse (brand moments) — same in both themes */
  --teal:#17363A;
  --teal-2:#1E4247;
  --on-teal:#F6F1E9;
  --on-teal-soft:#B9C6C4;
  /* Spacing scale — every margin, padding and gap in this sheet resolves to
     one of these steps. 1–3px is reserved for hairlines and optical nudges. */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:40px; --s8:48px;
  /* Section rhythm — two steps, not one. */
  --band:clamp(64px,8vw,112px); --band-tight:clamp(40px,6vw,80px);
  /* Corner radii — four steps. */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --maxw:clamp(1120px,70vw,1280px);
  --gutter:clamp(20px,5vw,64px);
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#122B2E;
    --surface:#17363A;
    --surface-2:#1E4247;
    --ink:#F6F1E9;
    --ink-soft:#BCCAC8;
    --ink-faint:#83999A;
    --stone:#5E7678;
    --line:rgba(246,241,233,.14);
    --line-strong:rgba(246,241,233,.26);
    --accent:#E6A58F;
    --accent-quiet:rgba(230,165,143,.16);
    --alert:#E08A6B;
    --alert-quiet:rgba(224,138,107,.16);
    --btn-ink:#F6F1E9;
    --btn-label:#17363A;
    --focus:#E6A58F;
  }
}
:root[data-theme="dark"]{
  --bg:#122B2E;
  --surface:#17363A;
  --surface-2:#1E4247;
  --ink:#F6F1E9;
  --ink-soft:#BCCAC8;
  --ink-faint:#83999A;
  --stone:#5E7678;
  --line:rgba(246,241,233,.14);
  --line-strong:rgba(246,241,233,.26);
  --accent:#E6A58F;
  --accent-quiet:rgba(230,165,143,.16);
  --alert:#E08A6B;
  --alert-quiet:rgba(224,138,107,.16);
  --btn-ink:#F6F1E9;
  --btn-label:#17363A;
  --focus:#E6A58F;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.65;
  font-size:clamp(15px,1.08vw,18px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-quiet)}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}
button{font-family:inherit}
[hidden]{display:none!important}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Wordmarks ---------- */
.wm{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--ink)}
.wm-casel{font-weight:300;text-transform:uppercase;letter-spacing:.22em}
/* trailing letter-spacing hangs off the last letter, so CASEL sits right of
   true centre over the product name; the negative margin offsets it (§09) */
.lockup .wm-casel{margin-right:-.22em}
.wm-tempo{font-weight:500;letter-spacing:-.005em}
/* Approved lockup — CASEL ~51% width & ~37% cap height of tempo, tightened */
.lockup{align-items:center;gap:.14em}

/* ---------- Care Circle mark ---------- */
.mark{color:var(--ink);flex:none}
.mark .ring{fill:none;stroke:currentColor;stroke-width:1.33;stroke-linecap:round}
.mark .dot{fill:var(--accent)}
.mark.animate .ring{stroke-dasharray:239;stroke-dashoffset:239;animation:draw 1.9s cubic-bezier(.4,0,.15,1) .15s forwards}
.mark.animate .dot{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);animation:pip .6s cubic-bezier(.34,1.3,.5,1) 1.85s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pip{to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .mark.animate .ring{animation:none;stroke-dashoffset:0}
  .mark.animate .dot{animation:none;opacity:1;transform:none}
}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(120%) blur(10px);
  -webkit-backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
header.site.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:clamp(12px,3vw,32px);
  padding-block:16px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.nav .brand .wm-casel{font-size:16px}
/* Standalone Care Mark beside the wordmark in the header. Geometry follows
   guide v1.3 §08 (D = 80, dot centred on the path at 4:30); the hairline and
   the dot are thickened, as §08 allows at small sizes, or neither would
   survive at 32px. */
.nav .brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:32px;height:32px;flex:none;color:var(--ink)}
.brand-mark .ring{fill:none;stroke:currentColor;stroke-width:1.4}
.brand-mark .dot{fill:var(--accent)}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2.2vw,24px)}
.nav-links a{
  text-decoration:none;color:var(--ink-soft);font-weight:500;font-size:14.5px;
  letter-spacing:.01em;padding:8px 2px;position:relative;transition:color .2s;
}
/* .nav-links a (0,1,1) outranks .btn (0,1,0), so the button label was
   inheriting the muted nav colour — about 1.6:1 on the teal pill. */
.nav-links a.btn,
.nav-links a.btn:hover,
.nav-links a.btn[aria-current="page"]{color:var(--btn-label)}
/* the current-page underline belongs under a text link, not across a pill */
.nav-links a.btn[aria-current="page"]::after{display:none}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--accent);border-radius:2px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--btn-ink);color:var(--btn-label);text-decoration:none;
  font-weight:600;font-size:14.5px;letter-spacing:.005em;
  padding:12px 24px;border-radius:999px;border:1px solid var(--btn-ink);
  cursor:pointer;transition:transform .18s ease,opacity .2s;
}
.btn:hover{transform:translateY(-1px);opacity:.94}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.lg{padding:16px 32px;font-size:16.5px}
.nav .btn{padding:8px 16px}
@media (max-width:820px){
  .nav{flex-wrap:wrap;row-gap:12px}
  .nav .brand{margin-right:auto}
  .nav-links{width:100%;gap:16px;flex-wrap:wrap;justify-content:flex-start}
  .nav-links .nav-only{display:none}
}

/* ---------- Section rhythm ---------- */
section.band{padding-block:var(--band)}
section.band.tight{padding-block:var(--band-tight)}
/* 2 — the apricot circle rises above its band, so the belief module above
   it carries extra bottom padding to keep the copy clear of the arc */
#philosophy{padding-bottom:calc(var(--band-tight) + clamp(40px,5vw,96px))}
/* 4 — and the audiences module below it carries the same at the top */
.apricot-panel + section.band.tight{padding-top:calc(var(--band-tight) + clamp(56px,7vw,124px))}
.eyebrow{
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.19em;
  color:var(--accent);margin:0 0 16px;display:flex;align-items:center;gap:12px;
}
.eyebrow.muted{color:var(--ink-faint)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:none;opacity:.8}
.eyebrow.muted::before{background:var(--ink-faint)}
h1,h2,h3{color:var(--ink);text-wrap:balance;font-weight:400;margin:0}
.display{font-weight:300;font-size:clamp(2.4rem,6.2vw,4.4rem);line-height:1.04;letter-spacing:-.018em}
h2.title{font-weight:300;font-size:clamp(1.95rem,4vw,3.3rem);line-height:1.08;letter-spacing:-.014em}
.lede{font-size:clamp(1.1rem,1.8vw,1.5rem);line-height:1.55;color:var(--ink-soft);max-width:34ch;font-weight:400}
p.body{color:var(--ink-soft);max-width:62ch;margin:0}
.consumer-truth{font-weight:300;font-style:italic;font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.4;color:var(--ink);max-width:26ch}

/* ---------- Reverse hero (home) — the one deliberate brand moment ---------- */
.hero-reverse{background:var(--teal);color:var(--on-teal);text-align:center;overflow:hidden}
.hero-reverse .wrap{padding-block:clamp(64px,11vw,128px);display:flex;flex-direction:column;align-items:center}
/* Hero: portrait circle left, brand copy right. The .wrap it sits on is a
   centred flex column by default, so this needs the extra class to win. */
.hero-reverse .wrap.hero-split{display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);
  padding-block:clamp(48px,4.6vw,64px)}
@media (max-width:860px){
  .hero-copy-col{text-align:center;align-items:center}
  .hero-reverse .sub{margin-inline:auto}
  .hero-reverse .hero-actions{justify-content:center}
  .hero-reverse .wrap.hero-split{grid-template-columns:1fr;gap:clamp(32px,6vw,48px);justify-items:center}
}

.hero-portrait{margin:0;justify-self:center;
  width:min(100%,clamp(240px,34vw,520px));aspect-ratio:1}
/* the artwork carries its own ring and apricot point on a transparent
   ground, so no border-radius here — rounding would clip the point where
   it straddles the ring */
.hero-portrait img{width:100%;height:100%;object-fit:contain;display:block}

.hero-copy-col{text-align:left;display:flex;flex-direction:column;align-items:flex-start}
.hero-reverse .tagline{color:var(--on-teal);font-weight:400;font-size:clamp(1.25rem,2.6vw,2.25rem);margin:0;letter-spacing:.005em}
.hero-reverse .sub{color:var(--on-teal-soft);max-width:44ch;margin:24px 0 0;font-size:clamp(1.02rem,1.18vw,1.18rem)}
/* the second line is a separate thought — give it a clear pause, not a paragraph break */
.hero-reverse .sub + .sub{margin-top:32px}
.hero-reverse .hero-actions{justify-content:flex-start;margin-top:40px}
.hero-reverse .btn{background:var(--on-teal);color:var(--teal);border-color:var(--on-teal)}
.hero-reverse .btn.ghost{background:transparent;color:var(--on-teal);border-color:rgba(246,241,233,.4)}
.hero-reverse .btn.ghost:hover{border-color:var(--on-teal)}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px}

/* ---------- Product hero (tempo) ---------- */
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;
  padding-block:clamp(40px,6vw,80px)}
.hero-copy{max-width:40ch}
.hero-art{display:flex;align-items:center;justify-content:center;position:relative;min-height:280px}
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr;gap:24px}
  .hero-art{order:-1;min-height:220px}
  .hero-copy{max-width:none}
  .lede{max-width:46ch}
}

/* ---------- Two-column lead ---------- */
.lead-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,5vw,80px);align-items:start}
@media (max-width:820px){.lead-2col{grid-template-columns:1fr;gap:24px}}

/* ---------- Brand family ---------- */
.family-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 32px;color:var(--ink-faint);font-size:1.05rem}
.family-line .plus{color:var(--ink-faint)}
.family-line .live{color:var(--accent);font-weight:500}
.family-line .wm-casel{font-size:1rem;color:var(--ink)}
.family{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
@media (max-width:760px){.family{grid-template-columns:1fr}}
.fam{border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,32px);background:var(--surface);display:flex;flex-direction:column;gap:12px;min-height:180px}
.fam.is-live{background:var(--surface-2);border-color:transparent}
.fam .fam-mark{display:flex;flex-direction:column;line-height:1;gap:2px}
.fam .fam-mark .wm-casel{font-size:.62rem;color:var(--ink-faint)}
.fam .fam-mark .wm-tempo{font-size:1.6rem;color:var(--ink)}
.fam .status{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}
.fam.is-live .status{color:var(--accent)}
.fam p{margin:0;color:var(--ink-soft);font-size:.92rem}
.fam .placeholder-name{font-size:1.25rem;color:var(--ink-faint);font-weight:500}
.fam a.more{margin-top:auto;color:var(--ink);font-weight:600;font-size:.9rem;text-decoration:none}
.fam a.more:hover{color:var(--accent)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px);margin-top:12px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;gap:16px}
.step .ic{width:44px;height:44px;color:var(--ink)}
.step .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.step .n{font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.step h3{font-size:1.12rem;font-weight:600;letter-spacing:-.005em}
.step p{margin:0;color:var(--ink-soft);font-size:.97rem;max-width:34ch}

/* ---------- Benefits ---------- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px;border-top:1px solid var(--line)}
@media (max-width:760px){.benefits{grid-template-columns:1fr}}
.benefit{padding:24px clamp(16px,2vw,24px) 24px 0;border-bottom:1px solid var(--line)}
.benefit .k{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.benefit h3{font-size:1.08rem;font-weight:600;margin-bottom:8px}
.benefit p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ---------- Product descriptor + secondary line ---------- */
.descriptor{font-size:13px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-faint);margin:16px 0 0}
.promise{color:var(--ink-soft);
  font-size:clamp(1.02rem,1.6vw,1.22rem);margin:16px 0 0;max-width:40ch}

/* ---------- Pack benefits ---------- */
.bens{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;
  background:var(--line);border-block:1px solid var(--line);margin-top:clamp(24px,4vw,40px);color:var(--ink)}
@media (max-width:980px){.bens{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.bens{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ben{background:var(--bg);padding:clamp(24px,2.4vw,32px) 16px;display:flex;flex-direction:column;
  gap:16px;align-items:center;text-align:center}
.ben svg{width:40px;height:40px}
/* supplied marks, already deep teal with their own apricot point, so they
   are placed as artwork rather than recoloured through currentColor */
.ben-ico{width:52px;height:52px;display:block;object-fit:contain}
.ben h3{font-size:1.05rem;font-weight:500;line-height:1.35}

/* ---------- Apricot field (tempo segment) ----------
   NOTE: brand guide §07 treats Muted Apricot as an accent, not a field
   colour, and tempo §12 caps it at 5–15% of a composition. Used as a
   field here by explicit direction. Every colour inside is re-specified
   against the apricot ground so nothing relies on a token that assumes
   a porcelain or teal background, and so text stays legible:
   Deep Teal 6.24:1 for headings and labels, 86% Deep Teal 4.81:1 for body. */
/* The apricot is a circle sized from the panel's own height, so it stays a
   circle at every width: wider than it is tall relative to the block, so the
   left and right arcs read inside the page while the top and bottom run past
   it. Below the stacking breakpoint the circle is far wider than a phone
   screen and resolves to a plain field, which is what that width needs.
   Guide v1.3 §07 reserves apricot for accent use and tempo §12 caps it at
   5-15% of a composition, so this is a deliberate, recorded deviation —
   chosen with the contrast failures measured and every piece of text
   re-specified below. */
/* ---------- tempo — the Care Circle as the field ----------
   Warm Stone band, one whole apricot circle on it, and the module's copy
   held inside the circle. The circle is a little larger than the band is
   tall, so it breaks the band edge top and bottom rather than being sliced
   flat by it; the band therefore does not clip, and the spill lands on the
   porcelain above and below.

   Geometry: a block W wide and H tall fits inside a circle of diameter D
   only while sqrt(W² + H²) <= D. The copy column is capped at 70% of D,
   which leaves room for roughly 0.71D of height — far more than this copy
   needs — so the corners of the text block stay well inside the arc. */
/* the circle overhangs the band by (D - band)/2 at top and bottom, so the
   sections above and below get that clearance plus room to breathe */
.apricot-panel{
  --circle:min(clamp(1190px,70vw,1340px),88vw);
  --spill:calc((var(--circle) - var(--circle) * .93) / 2);
  position:relative;isolation:isolate;
  background:var(--stone);
  display:grid;place-items:center;
  min-height:calc(var(--circle) * .93);
  padding-block:clamp(32px,5vw,64px)}
.apricot-panel::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(var(--circle),86vw);aspect-ratio:1;
  border-radius:50%;background:#E6A58F;z-index:-1}

/* The block inside the circle is kept close to square — copy and gallery
   side by side, the benefit row beneath — because a circle holds a square
   far better than a column. At 62% of D on each side the corners sit at
   0.88 of the radius, which leaves the arc clear. */
.tempo-core{width:min(100%,calc(var(--circle) * .66))}
.tempo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,2.6vw,40px);align-items:center}
.tempo-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.tempo-core .lockup{margin-bottom:var(--s2)}
.tempo-core .wm-casel{font-size:clamp(.95rem,1.15vw,1.16rem)}
.tempo-core .wm-tempo{font-size:clamp(2.1rem,3.2vw,3.1rem)}
.tempo-core .descriptor{margin-top:var(--s3);font-size:12px}
h2.title.tempo-title{margin-top:var(--s2);font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.16}
p.body.tempo-body{margin-top:var(--s3);max-width:38ch;font-size:.97rem}
.tempo-core .hero-actions{justify-content:flex-start;margin-top:var(--s4)}
.tempo-core .btn{font-size:13.5px;padding:10px 18px}

/* the gallery loses its outer card here — a rectangle inside the circle
   would fight the arc, so the photograph sits straight on the field */
.tempo-core .study,
.tempo-core.field-apricot .gallery-stage{background:none;border:0;border-radius:0}
.tempo-core .gallery-stage{aspect-ratio:4/3}
.tempo-core .gallery-thumbs{grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
.tempo-core .thumb{border-radius:var(--r-sm);padding:6%}

/* The stage carries the supplied cut-outs, which are transparent PNGs with
   their own contact shadows, so the product sits straight on the apricot —
   no card, no disc, no crop, and no CSS shadow (the artwork has one). */
.tempo-core.field-apricot .gallery-stage{aspect-ratio:4/3;background:none;border:0;border-radius:0}
.tempo-core .gallery-stage .shot{padding:2%}
.tempo-core .gallery-stage .shot img{object-fit:contain;border-radius:0}
.tempo-core .thumb{aspect-ratio:1;border-radius:50%;padding:14%;overflow:hidden;background:#F6F1E9}
.tempo-core .thumb img{width:100%;height:100%;object-fit:contain;border-radius:0}

.tempo-core .bens{grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(40px,4.4vw,59px)}
.tempo-core .ben{padding:var(--s4) var(--s3);gap:var(--s2)}
.tempo-core .ben-ico{width:34px;height:34px}
.tempo-core .ben h3{font-size:.85rem;line-height:1.3}

/* Below the breakpoint the circle can no longer hold the module at a legible
   size — at 390px a circle wide enough would be wider than the screen. The
   apricot becomes the whole band there instead, and the copy stacks. */
@media (max-width:1280px){
  .apricot-panel{background:#E6A58F;min-height:0;
    padding-block:clamp(40px,7vw,64px)}
  .apricot-panel::before{display:none}
  /* outside the circle the module needs the page gutter and measure back */
  .tempo-core{width:100%;max-width:var(--maxw);margin-inline:auto;
    padding-inline:var(--gutter)}
  .tempo-split{grid-template-columns:1fr;gap:var(--s6);justify-items:center}
  .tempo-copy{max-width:52ch}
  .tempo-core .hero-art{width:100%;max-width:560px}
  .tempo-core .gallery-stage{aspect-ratio:4/3}
  .tempo-core .wm-tempo{font-size:clamp(2.4rem,7vw,3.4rem)}
  .tempo-title{font-size:clamp(1.5rem,4.4vw,2.1rem)}
  p.body.tempo-body{font-size:1rem;max-width:46ch}
  .tempo-core .btn{font-size:14.5px;padding:11px 20px}
  .tempo-core .bens{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .tempo-core .bens{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.field-apricot{
  background:transparent;
  --apr-ink:#17363A;
  --apr-body:#344646;
  --apr-line:rgba(23,54,58,.24);
  --apr-panel:#F6F1E9;
  --apr-panel-2:#EFE7D9;
}
.field-apricot h1,.field-apricot h2,.field-apricot h3,.field-apricot h4,
.field-apricot .title,.field-apricot .display,
.field-apricot .wm,.field-apricot .wm-casel,.field-apricot .wm-tempo{color:var(--apr-ink)}
.field-apricot .eyebrow,.field-apricot .eyebrow.muted,
.field-apricot .descriptor,.field-apricot .study .label{color:var(--apr-ink)}
.field-apricot .eyebrow::before,.field-apricot .eyebrow.muted::before{background:var(--apr-ink);opacity:.5}
.field-apricot p,.field-apricot p.body,.field-apricot .lede{color:var(--apr-body)}
.field-apricot .promise{color:var(--apr-body)}
.field-apricot .ico-pt{fill:var(--apr-ink)}
/* buttons: fixed to the field, not to the theme */
.field-apricot .btn{background:var(--apr-ink);color:#F6F1E9;border-color:var(--apr-ink)}
/* the ghost outline is a UI component boundary, so it needs 3:1 against the
   field (WCAG 1.4.11); at .4 alpha it measured 1.96:1, at .65 it is 3.18:1 */
.field-apricot .btn.ghost{background:transparent;color:var(--apr-ink);border-color:rgba(23,54,58,.65)}
.field-apricot .btn.ghost:hover{border-color:var(--apr-ink)}
/* panels sit as light surfaces on the field */
.field-apricot .study{background:var(--apr-panel-2);border-color:var(--apr-line)}
.field-apricot .gallery-stage{background:linear-gradient(158deg,#FCFAF5,var(--apr-panel-2))}
.field-apricot .drawn{color:var(--apr-ink)}
.field-apricot .drawn .soft{fill:#D2C8BB}
.field-apricot .drawn .faint{stroke:rgba(23,54,58,.45)}
.field-apricot .thumb{background:var(--apr-panel);border-color:var(--apr-line);color:rgba(23,54,58,.55)}
.field-apricot .thumb:hover{color:var(--apr-ink)}
.field-apricot .thumb[aria-selected="true"]{background:var(--apr-panel-2);border-color:var(--apr-ink);color:var(--apr-ink)}
/* benefit row: cells sit on the field, divided by fine teal rules */
.field-apricot .bens{background:var(--apr-line);border-color:var(--apr-line)}
.field-apricot .ben{background:#E6A58F;color:var(--apr-ink)}
.field-apricot .ben h3{color:var(--apr-ink)}

/* ---------- Panels ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,4vw,48px)}
.panel.teal{background:var(--surface-2)}

/* ---------- Drawn studies (shared) ---------- */
.study{background:var(--surface-2);border:1px solid var(--line);border-radius:20px;position:relative;overflow:hidden}
.study .label{position:absolute;left:16px;bottom:12px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.drawn{color:var(--ink)}
.drawn .stroke{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.drawn .soft{fill:var(--stone);opacity:.55}
.drawn .dot{fill:var(--accent)}
.drawn .faint{stroke:var(--ink-faint);stroke-dasharray:3 4;fill:none;stroke-width:1.1}

/* product gallery */
.gallery{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,3vw,40px);align-items:center}
@media (max-width:820px){.gallery{grid-template-columns:1fr}}
.gallery-stage{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:6%;
  background:linear-gradient(158deg,var(--surface),var(--surface-2))}
.gallery-stage svg{width:100%;height:100%}
/* Photographic views. Each is its own figure with its own caption, so the
   picture stays a picture and the caption stays selectable text — the script
   only toggles [hidden] on the figure. */
.gallery-stage .shot{position:absolute;inset:0;margin:0;padding:6%;display:grid;place-items:center}
.gallery-stage .shot[hidden]{display:none}
.gallery-stage .shot img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;border-radius:8px}
.gallery-stage .shot .label{position:absolute;left:16px;bottom:12px}
.thumb{overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
/* three views here; the tempo page still has four */
#tempo .gallery-thumbs{grid-template-columns:repeat(3,1fr)}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.thumb{aspect-ratio:1;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:16%;cursor:pointer;color:var(--ink-faint);transition:border-color .2s,color .2s}
.thumb svg{width:100%;height:100%}
.thumb[aria-selected="true"]{border-color:var(--ink);color:var(--ink);background:var(--surface-2)}
.thumb:hover{color:var(--ink)}

/* ---------- Chart ---------- */
.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3.5vw,40px)}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.chart-head h3{font-size:1.15rem;font-weight:600}
.chart-head .sub{color:var(--ink-faint);font-size:.86rem;margin-top:4px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft)}
.legend .key{display:inline-flex;align-items:center;gap:8px}
.legend .swatch{width:18px;height:0;border-top-width:2px;border-top-style:solid;flex:none}
.legend .swatch.rec{border-color:var(--ink)}
.legend .swatch.thr{border-top-style:dashed;border-color:var(--ink-faint)}
.legend .swatch.bre{border-color:var(--alert)}
.chart-wrap{position:relative;width:100%}
.chart-wrap svg{width:100%;height:auto;display:block;overflow:visible}
.chart-svg .grid{stroke:var(--line);stroke-width:1}
.chart-svg .axis-label{fill:var(--ink-faint);font-size:11px;font-family:var(--font)}
.chart-svg .rec-line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart-svg .breach-line{fill:none;stroke:var(--alert);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chart-svg .threshold{stroke:var(--ink-faint);stroke-width:1.4;stroke-dasharray:5 4;fill:none}
.chart-svg .peak-dot{fill:var(--alert)}
.chart-svg .peak-label{fill:var(--alert);font-size:12px;font-weight:600;font-family:var(--font)}
.chart-svg .anno{fill:var(--ink-faint);font-size:11px;font-family:var(--font)}
.chart-svg .anno-line{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:2 3}
.chart-svg .hover-dot{fill:var(--ink);stroke:var(--surface);stroke-width:2}
.chart-tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--btn-label);
  padding:8px 12px;border-radius:8px;font-size:12px;font-weight:500;white-space:nowrap;transform:translate(-50%,-140%);opacity:0;transition:opacity .12s;z-index:3}
:root[data-theme="dark"] .chart-tip{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chart-tip{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}}
.chart-tip.on{opacity:1}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:24px;align-items:end;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:640px){.stat-row{grid-template-columns:repeat(3,1fr);gap:16px}.stat-row .table-toggle{grid-column:1/-1;justify-self:start}}
.stat .num{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:300;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .cap{color:var(--ink-faint);font-size:.82rem;margin-top:8px;max-width:20ch}
.table-toggle{background:transparent;border:1px solid var(--line-strong);color:var(--ink-soft);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:600;cursor:pointer}
.table-toggle:hover{border-color:var(--ink);color:var(--ink)}
.data-table{width:100%;border-collapse:collapse;margin-top:24px;font-size:13px;font-variant-numeric:tabular-nums}
.data-table caption{text-align:left;color:var(--ink-faint);font-size:12px;margin-bottom:12px}
.data-table th,.data-table td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.data-table th{color:var(--ink-faint);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.data-table td.over{color:var(--alert);font-weight:600}
.table-scroll{overflow-x:auto;max-height:320px;overflow-y:auto}

/* ---------- App screens ---------- */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,32px);margin-top:12px}
@media (max-width:820px){.phones{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}
.phone-wrap{display:flex;flex-direction:column;gap:16px}
.phone{border:2px solid var(--ink);border-radius:26px;background:var(--surface);padding:16px 16px;aspect-ratio:9/17.5;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.phone .p-top{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.phone .p-lab{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.phone .p-big{font-size:1.9rem;font-weight:300;letter-spacing:-.02em}
.phone .p-big sup{font-size:.8rem;vertical-align:super}
.phone .p-alert{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;color:var(--alert);background:var(--alert-quiet);border-radius:999px;padding:4px 8px;align-self:flex-start}
.phone .p-card{background:var(--surface-2);border-radius:14px;padding:12px 12px;font-size:10.5px;color:var(--ink-soft)}
.phone .p-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:11px}
.phone .p-row:last-child{border-bottom:none}
.phone .p-row .who{display:flex;align-items:center;gap:8px}
.phone .p-av{width:20px;height:20px;border-radius:50%;background:var(--stone);color:var(--ink);font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center}
.phone .p-foot{margin-top:auto;font-size:9px;color:var(--ink-faint)}
.phone .mini-chart{height:52px}
.phone .mini-chart svg{width:100%;height:100%}
.phone-cap{color:var(--ink-soft);font-size:.86rem;margin:0;text-align:center}

/* ---------- Construction ---------- */
.construction{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media (max-width:760px){.construction{grid-template-columns:1fr}}
.exploded{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.exploded svg{width:100%;height:100%}
.layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.layers li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.layers li:last-child{border-bottom:none}
.layers .ln{font-size:12px;font-weight:600;color:var(--ink-faint);font-variant-numeric:tabular-nums;padding-top:3px}
.layers h4{margin:0 0 4px;font-size:1rem;font-weight:600;color:var(--ink)}
.layers p{margin:0;color:var(--ink-soft);font-size:.92rem}

/* ---------- In the box ---------- */
.box-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:12px}
@media (max-width:760px){.box-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.box-row{grid-template-columns:1fr}}
.box-item{background:var(--surface);padding:24px 16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.box-item .bi{width:46px;height:40px;color:var(--ink)}
.box-item .bi svg{width:100%;height:100%}
.box-item h4{margin:0;font-size:.95rem;font-weight:600}
.box-item p{margin:0;color:var(--ink-faint);font-size:.82rem}

/* ---------- Placement ---------- */
.placement{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px);margin-top:12px}
@media (max-width:760px){.placement{grid-template-columns:1fr}}
.place{display:flex;flex-direction:column;gap:16px}
.place .fig{aspect-ratio:1;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;display:flex;align-items:center;justify-content:center;padding:14%}
.place .fig svg{width:100%;height:100%}
.place h4{margin:0;font-size:1rem;font-weight:600}
.place p{margin:0;color:var(--ink-soft);font-size:.9rem}

/* ---------- Audience ---------- */
.aud{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:12px}
@media (max-width:640px){.aud{grid-template-columns:1fr}}
.aud .item{background:var(--surface);padding:clamp(24px,3.2vw,40px);display:flex;flex-direction:column;gap:12px}
.aud .item .ag{width:36px;height:36px;color:var(--ink-faint)}
.aud .item .ag svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.aud .item h3{font-size:1.16rem;font-weight:500;margin-bottom:0}
.aud .item p{margin:0;color:var(--ink-soft);font-size:1.02rem}

/* ---------- Consumer truth, framed by the Care Circle ----------
   The circle is used as a framing device around the quote. Geometry is
   held: unbroken line, dot ~6% of the diameter sitting on the path at
   4:30, generous space. The attribution follows the top of the curve. */
/* ---------- Our belief ---------- */
.belief-line{font-weight:300;font-size:clamp(1.3rem,2.3vw,2.25rem);line-height:1.3;
  letter-spacing:-.016em;color:var(--ink);margin:16px 0 0;text-wrap:balance}
.belief-line::before{content:"\201C";margin-right:.22em}
.belief-line::after{content:"\201D";margin-left:.18em}

.belief-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,2vw,32px);align-items:center;margin-top:clamp(24px,4vw,48px)}
@media (max-width:860px){.belief-grid{grid-template-columns:1fr;gap:32px;justify-items:center}}

.belief-copy{font-size:clamp(1.02rem,1.42vw,1.3rem);line-height:1.5;color:var(--ink)}
.belief-copy .lead-in{margin:0;max-width:42ch}
.belief-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.belief-list li{display:flex;align-items:center;gap:12px}
.belief-list li::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--accent);flex:none}
.belief-copy .close-out{margin:24px 0 0;max-width:44ch;color:var(--ink)}
@media (max-width:860px){.belief-copy{text-align:left;width:100%;max-width:34rem}}

.truth{--ring:clamp(15.5rem,28vw,25rem);display:flex;flex-direction:column;align-items:center;
  text-align:center;margin:0;justify-self:start}
.truth-ring{position:relative;width:var(--ring);aspect-ratio:1;display:grid;place-items:center;
  /* percentage padding would resolve against the parent's width, not the
     ring's, so the inset is computed from the ring size itself */
  padding:calc(var(--ring) * .13)}
.truth-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.truth-ring .ring{fill:none;stroke:var(--line-strong);stroke-width:1.4}
.truth-ring .dot{fill:var(--accent)}
.truth-ring .curve{fill:var(--ink-faint);font-family:var(--font);font-size:17px;font-weight:600;
  letter-spacing:1.9px;text-transform:uppercase}
.truth-q{margin:0;width:100%;max-width:24ch;font-weight:300;
  font-size:clamp(.82rem,1.08vw,1.1rem);line-height:1.42;letter-spacing:-.008em;
  display:flex;flex-direction:column;align-items:center;gap:.7rem}
.truth-q .a,.truth-q .b{text-wrap:balance}
.truth-q .a{color:var(--ink)}
.truth-q .a::before{content:"\201C"}
.truth-q .b{color:var(--ink-soft)}
.truth-q .b::after{content:"\201D"}
.truth-q .pivot{width:26px;height:1px;background:var(--line-strong);position:relative;flex:none}
.truth-q .pivot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* The curved attribution is drawn in the SVG; this copy carries it to
   screen readers, and takes over below phone width. */
.truth-cite{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
@media (max-width:460px){
  .truth{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:32px}
  .truth-ring{width:100%;aspect-ratio:auto;padding:0}
  .truth-ring svg{display:none}
  .truth-q{max-width:28ch}
  .truth-cite{position:static;width:auto;height:auto;margin:24px 0 0;clip-path:none;overflow:visible;
    white-space:normal;font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
    color:var(--ink-faint)}
}

/* ---------- Statement / values ---------- */
.statement{font-weight:300;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.18;letter-spacing:-.012em;max-width:20ch}
.statement .em{color:var(--accent)}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);margin-top:8px}
@media (max-width:760px){.vals{grid-template-columns:1fr}}
.val h3{font-size:1.05rem;font-weight:600;margin-bottom:12px}
.val p{margin:0;color:var(--ink-soft);font-size:.96rem}
.val .r{width:24px;height:1px;background:var(--accent);margin-bottom:16px}

/* ---------- Who CASEL is for ----------
   The field went to Warm Stone for one round and is back on the default
   porcelain, so the stone tempo band above it has a porcelain edge to end
   against and the circle can break that edge. The illustration carries its
   own near-porcelain ground, so it sits on the field rather than on a card. */
.aud-art{margin:clamp(24px,4vw,48px) 0 0;border-radius:var(--r-lg);overflow:hidden}
.aud-art img{width:100%;height:auto;display:block}

/* ---------- What makes CASEL different ----------
   Monoline icons: rounded forms, one consistent optical stroke weight,
   Deep Teal as the default stroke, apricot for a single point only. */
.ico{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ico-pt{fill:var(--accent);stroke:none}
.diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,48px) clamp(24px,4vw,48px);margin-top:clamp(32px,4vw,48px);color:var(--ink)}
@media (max-width:880px){.diff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.diff-grid{grid-template-columns:1fr}}
.diff{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.diff svg{width:48px;height:48px}
.diff-ico{width:62px;height:62px;display:block;object-fit:contain}
.diff h3{font-size:1.18rem;font-weight:500;max-width:22ch}
.diff p{margin:0;color:var(--ink-soft);font-size:1.03rem;max-width:30ch}

/* ---------- Chips ---------- */
.diffs{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.chip{border:1px solid var(--line-strong);border-radius:999px;padding:8px 16px;font-size:14px;color:var(--ink-soft);font-weight:500}

/* ---------- Guardrail strip ---------- */
.guardrail{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 14px 14px 0;background:var(--surface);padding:24px 24px;margin-top:8px}
.guardrail p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:74ch}
.guardrail b{color:var(--ink);font-weight:600}

/* ---------- CTA band ---------- */
.cta-band{background:var(--teal)}
/* Partner band and CTA band are both Deep Teal; a fine rule keeps them
   reading as two compositions rather than one long block. */
.cta-band .eyebrow{color:var(--accent)}
.cta-band h2{color:var(--on-teal)}
.cta-band p{color:var(--on-teal-soft)}
.cta-band .btn{background:var(--on-teal);color:var(--teal);border-color:var(--on-teal)}
.cta-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}

/* ---------- Partners (reverse) ---------- */
.reverse{background:var(--teal);color:var(--on-teal)}
.reverse .eyebrow{color:var(--accent)}
.reverse .eyebrow::before{background:var(--accent)}
.reverse h1,.reverse h2,.reverse h3,.reverse .display{color:var(--on-teal)}
.reverse p{color:var(--on-teal-soft)}
.reverse .btn{background:var(--on-teal);color:var(--teal);border-color:var(--on-teal)}
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(246,241,233,.14);border:1px solid rgba(246,241,233,.14);border-radius:20px;overflow:hidden;margin-top:16px}
@media (max-width:700px){.partner-grid{grid-template-columns:1fr}}
.partner-grid .pcell{background:var(--teal);padding:clamp(24px,3vw,32px)}
.partner-grid .pcell h3{font-size:1.02rem;font-weight:600;margin-bottom:12px;color:var(--on-teal)}
.partner-grid .pcell p{margin:0;font-size:.92rem;color:var(--on-teal-soft)}

/* ---------- Waitlist ---------- */
.wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media (max-width:820px){.wl-grid{grid-template-columns:1fr;gap:16px}}
form.wl{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
.field label .opt{color:var(--ink-faint);font-weight:500;letter-spacing:.02em}
.field input,.field select{
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:14px;padding:12px 16px;width:100%;transition:border-color .2s}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink)}
form.wl .btn{margin-top:8px;align-self:flex-start}
.fineprint{font-size:13px;color:var(--ink-faint);max-width:44ch;margin:2px 0 0}
.wl-note{font-size:12.5px;color:var(--ink-faint);margin-top:16px;padding-top:16px;border-top:1px solid var(--line);max-width:46ch}
.success{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,4vw,40px)}
.success .mk{width:52px;height:52px;margin-bottom:16px}
.success h3{font-size:1.3rem;font-weight:600;margin-bottom:12px}
.success p{margin:0;color:var(--ink-soft);max-width:40ch}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line);background:var(--surface);padding-block:clamp(40px,6vw,64px)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media (max-width:720px){.foot{grid-template-columns:1fr 1fr}.foot .foot-brand{grid-column:1/-1}}
.foot-brand .line{color:var(--ink-soft);max-width:30ch;margin-top:16px;font-size:.95rem}
.foot h4{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.foot ul a{color:var(--ink-soft);text-decoration:none;font-size:.95rem}
.foot ul a:hover{color:var(--ink)}
.foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:clamp(32px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);
  color:var(--ink-faint);font-size:12.5px}
.theme-toggle{background:transparent;border:1px solid var(--line-strong);color:var(--ink-soft);
  border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.theme-toggle:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- Scroll reveal ---------- */
.fade-in{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.fade-in.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade-in{opacity:1;transform:none;transition:none}}

/* ---------- Get the app (tempo-app.html) ---------- */
.app-points{list-style:none;margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;max-width:46ch;color:var(--ink-soft);font-size:.97rem}
.app-points li{display:flex;gap:12px;align-items:baseline}
.app-points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-2px)}
.app-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:24px}
.app-row{display:flex;gap:clamp(20px,3vw,32px);align-items:center;flex-wrap:wrap}
.app-get{flex:1 1 220px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.app-platform{margin:0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.app-qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:150px}
.app-qr img{width:132px;height:132px;padding:10px;background:#F6F1E9;border-radius:12px;box-sizing:content-box}
.app-qr figcaption{font-size:12px;color:var(--ink-faint);text-align:center;line-height:1.4}
.app-soon{padding-top:20px;border-top:1px solid var(--line)}
.app-soon p:last-child{margin:6px 0 0;color:var(--ink-soft)}
.app-soon a{color:var(--ink);font-weight:600}
@media (hover:none) and (pointer:coarse){.app-qr{display:none}}

.wl-error{font-size:13.5px;color:var(--alert);margin:4px 0 0;max-width:44ch}
.wl-error a{color:inherit;font-weight:600}
form.wl .btn:disabled{opacity:.6;cursor:default;transform:none}

/* ---------- tempo FAQ (tempo/faq.html) ---------- */
.faq-wrap{max-width:860px}
.faq-crumb{color:inherit;text-decoration:none}
.faq-crumb:hover{text-decoration:underline;text-underline-offset:3px}
.faq-wrap .lede a,.cta-band p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.faq-h{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:clamp(40px,6vw,64px) 0 8px}
.faq-list{border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:20px 0;font-size:clamp(1.02rem,1.5vw,1.14rem);font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:1.4px solid var(--ink-faint);transition:background .2s,border-color .2s}
.faq summary:hover::after{border-color:var(--ink)}
.faq[open] summary::after{background:var(--accent);border-color:var(--accent)}
.faq-a{padding:0 0 22px;max-width:66ch}
.faq-a p{margin:0 0 12px;color:var(--ink-soft)}
.faq-a p:last-child{margin-bottom:0}
.faq-a a{color:var(--ink);font-weight:600;text-underline-offset:2px}
.faq-guard{margin-top:clamp(40px,6vw,64px)}
.faq-more{margin:20px 0 0;font-size:.97rem;color:var(--ink-soft)}
.faq-more a{color:var(--ink);font-weight:600;text-underline-offset:2px}