/* ============================================================
   v3 mock (2026-11-06): the creative-director pass, loaded after home.css so every change is in one file.
   Hero E (masthead, then the work as an index), one solid button, the clock on the footer field only,
   heavier lines, one sans, one ask per screen, five questions, no drifting tags, nav stays put.
   Not deployed: exports/depopas-site still copies v2.
   ============================================================ */

/* ---------- one sans: Inter everywhere; Helvena comes back by changing this one line ---------- */
:root{--label:"Inter",-apple-system,"Segoe UI",sans-serif;--hair:rgba(0,16,20,.16)}
html[data-theme="dark"]{--hair:rgba(255,255,255,.2)}
.label,.eyebrow{font-weight:600;font-size:12px;letter-spacing:.12em}

/* ---------- raise the floor: sizes and weights ---------- */
.small{font-size:14px}
.btn{height:52px;padding:0 22px;font-size:12.5px;letter-spacing:.1em;font-weight:600;gap:14px}
.btn .ar{color:inherit;font-size:16px}
.btn--line{box-shadow:inset 0 0 0 1.5px currentColor}
.link{font-size:15px;font-weight:500;padding-bottom:2px}
.plan__list li{border-bottom-width:1px;font-size:16px;padding:12px 0}
.addons li{border-bottom-width:1px;font-size:16px}
.faq details{border-bottom-width:1px}
.faq summary{font-size:17px;padding:22px 0}
.faq__a p{font-size:16px}
.plan__foot,.plan__what{font-size:15px}
.price__t{font-size:clamp(30px,2.6vw,40px)}
.price span{font-size:17px;color:var(--body)}   /* the middle size: the card's caption is no longer fine print */
.tab p{font-size:15px}.tab__t{font-size:17px}
.h3{font-size:clamp(26px,2.2vw,32px)}

/* ---------- buttons: ink, everywhere; white on the dark passage; the pair's darker colour on the footer field ---------- */
.btn,.btn--live{background:var(--ink);color:#fff}
.btn--live{transition:opacity .2s}
html[data-theme="dark"]:not([data-field="1"]) .btn,html[data-theme="dark"]:not([data-field="1"]) .btn--live{background:#fff;color:var(--night)}
/* the footer: the clock still paints it, but with the pair's roles fixed (lighter ground, darker ink) so the two
   colours never cross mid-fade and the text never vanishes. Dark-field pairs show as their light side here. */
html[data-field="1"]{--page:var(--live-lo);--fg:var(--live-hi);--body:color-mix(in srgb,var(--live-hi) 82%,transparent);--muted:color-mix(in srgb,var(--live-hi) 62%,transparent);--hair:color-mix(in srgb,var(--live-hi) 22%,transparent)}
html[data-field="1"] .btn,html[data-field="1"] .btn--live{background:var(--live-hi);color:var(--live-lo)}
html.is-turning .btn{transition:color 1.2s cubic-bezier(.45,0,.2,1),background-color 1.2s cubic-bezier(.45,0,.2,1),opacity .3s ease!important}

/* ---------- the nav stays put ---------- */
.nav.is-away{transform:none}

/* ---------- hero E: the masthead, then the index ---------- */
.hero--e{height:auto;overflow:visible;padding:116px 0 0}
.mast{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
.mast>*,.mast__r>*{min-width:0}
.mast .h1{font-size:clamp(44px,4.6vw,66px);max-width:none;margin:0}
.mast__r{display:grid;gap:22px;max-width:460px}
.mast__r .hero__sub{margin:0;font-size:19px}
.hero--e .hero__cta{justify-content:flex-start;align-items:center;gap:28px;margin:0}
.index{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.ix{display:block;color:inherit}
.ix__img{display:block;aspect-ratio:4/5;background:var(--mount);overflow:hidden}
.ix__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,.84,.24,1)}
.ix:hover .ix__img img{transform:scale(1.025)}
.ix__meta{display:grid;gap:4px;margin-top:14px}
.ix__meta b{font-weight:500;font-size:17px;letter-spacing:-.01em}
.ix__meta span{font-size:15px;color:var(--body)}
.ix__meta i{font-style:normal;display:inline-block;justify-self:start;margin-top:10px;padding:7px 9px;background:color-mix(in srgb,var(--fg) 8%,transparent);font-family:var(--label);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.proof{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;margin-top:64px;padding:26px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.proof p{font-size:15px;line-height:1.5;color:var(--body);max-width:52ch;text-wrap:pretty}
.proof__logos{display:flex;gap:36px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.proof__logos img{height:20px;width:auto;opacity:.62;filter:brightness(0)}   /* the logo files are white, drawn for the About page's dark field */
html[data-theme="dark"] .proof__logos img,html[data-field="1"] .proof__logos img{filter:none;opacity:.8}

/* ---------- the problem: v3 mock B brings back v2's dark turn and struck tags (Kevin, 2026-11-08) ---------- */

/* ---------- the work row: named under it ---------- */
.row__cap{margin-top:18px}

/* ---------- pricing: the teardown card asks with a link, not a second button ---------- */
.plan--wide .plan__lead .plan__go{margin-top:20px;justify-self:start;width:max-content}

@media (max-width:1100px){
  .mast,.proof{grid-template-columns:1fr;gap:24px}.proof__logos{justify-content:flex-start}
}
@media (max-width:700px){
  .hero--e{padding:96px 0 0}
  .mast .h1{font-size:44px}.mast__r .hero__sub{font-size:17px}
  .hero--e .hero__cta{flex-direction:column;align-items:flex-start;gap:18px}.hero--e .hero__cta .btn{padding:0 18px;font-size:11.5px;letter-spacing:.1em}
  .index{grid-template-columns:1fr;gap:32px;margin-top:40px}
  .proof{margin-top:48px}.proof__logos{gap:24px}.proof__logos img{height:16px}
}