/* ============================================================
   Openhouse — the work is already done.
   Signature: THE ORANGE SQUARE, sharp-cornered, at four scales.
   Display: Bricolage Grotesque · Text: Instrument Sans
   ============================================================ */

:root{
  /* surfaces */
  --paper:#FBFAF9;      /* off-white, faintly warm — the page */
  --mist:#F0F1F0;       /* cool neutral surface 1 */
  --stone:#E1E4E3;      /* cool neutral surface 2 */
  --edge:#D5D8D7;
  --hair:rgba(20,18,15,.12);

  /* ink */
  --ink:#14120F;        /* near-black, warm */
  --ink-soft:#4C4842;   /* body copy on light — 8.71:1 on paper */
  --muted:#6B655C;      /* meta on light — 5.53:1 on paper */

  /* accent — actions + signature only */
  --flame:#E8481C;      /* fills. ink on flame = 4.79:1 */
  --flame-ink:#C33C0D;  /* accent TEXT on light — 5.07:1 on paper */
  --flame-lit:#FF6B3D;  /* accent text on ink — 6.61:1 */

  /* on dark */
  --paper-dim:#CFCCC7;  /* 11.68:1 on ink */
  --paper-mute:#A29D95; /* 6.94:1 on ink */
  --hair-lt:rgba(251,250,249,.17);

  --display:"Bricolage Grotesque","Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --gutter:clamp(20px,4.6vw,56px);
  --wide:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;
  letter-spacing:-.032em;line-height:1.02}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:600}

:focus-visible{outline:2.5px solid var(--flame-ink);outline-offset:3px}
.band :focus-visible,.bill :focus-visible,.foot :focus-visible,
.strip :focus-visible,.door--primary :focus-visible{outline-color:var(--flame-lit)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:var(--paper);
  padding:14px 20px;font-size:14px;font-weight:600}
.skip:focus{left:8px;top:8px}

.wrap{max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--wide)}
section[id]{scroll-margin-top:80px}
figure{margin:0}

/* ── icon system — 24×24 grid, 1.75 stroke, currentColor ── */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.ic--arw{width:17px;height:17px;stroke-width:2;margin-left:9px}

/* ══ THE SIGNATURE: the orange square ══════════════════════ */
/* scale 1 — 14px, before every section label and list bullet */
.marker{display:flex;align-items:flex-start;gap:12px;
  font-size:13px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);line-height:1.3}
.marker::before{content:"";width:14px;height:14px;margin-top:2px;background:var(--flame);flex:none}
.marker--lt{color:var(--paper-mute)}

/* scale 2 — 48px, holds a pictogram */
.stamp{width:48px;height:48px;background:var(--flame);color:var(--ink);
  display:grid;place-items:center;flex:none}
/* scale 3 — the step cartouche */
.step__n{font-family:var(--display);font-size:15px;font-weight:700;
  letter-spacing:.1em;color:var(--flame-ink)}
/* scale 4 — the full-bleed band, once per page (.band) */

/* ── buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:2px;
  min-height:54px;padding:15px 28px;max-width:100%;
  text-align:center;overflow-wrap:anywhere;
  font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.005em;
  text-decoration:none;border:2px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn--solid{background:var(--flame);color:var(--ink);border-color:var(--flame)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* inline text link with an arrow */
.tlink{display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;color:var(--flame-ink);text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--flame)}
.tlink:hover{background:var(--flame);color:var(--ink);box-shadow:none}
.tlink--lt{color:var(--flame-lit);box-shadow:inset 0 -2px 0 var(--flame)}
.tlink--lt:hover{background:var(--flame);color:var(--ink)}

/* ── top bar ────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;background:rgba(251,250,249,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.bar__in{max-width:var(--wide);margin-inline:auto;padding:10px var(--gutter);
  display:flex;align-items:center;gap:20px}
.mark{display:inline-flex;align-items:center;min-height:44px;gap:11px;
  text-decoration:none;font-family:var(--display);font-size:21px;
  font-weight:700;letter-spacing:-.035em}
.mark__glyph{flex:none}
.mk-sq{fill:#E8481C}.mk-h{fill:#14120F}
.bar__nav{display:none;margin-left:auto;gap:28px}
.bar__nav a{display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:500;text-decoration:none;color:var(--ink-soft);
  border-bottom:2px solid transparent}
.bar__nav a:hover{color:var(--ink);border-bottom-color:var(--flame)}
.bar__nav a[aria-current]{color:var(--ink);border-bottom-color:var(--flame)}
.code-btn{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;
  padding:11px 18px;background:var(--flame);color:var(--ink);
  font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .16s ease,color .16s ease}
.code-btn:hover{background:var(--ink);color:var(--paper)}
@media(min-width:1000px){.bar__nav{display:flex}.code-btn{margin-left:0}}

/* ── hero — tall, asymmetric, image to the edge ─────────── */
.hero{max-width:1520px;margin-inline:auto;padding:48px var(--gutter) 64px;
  display:grid;gap:40px}
.hero__text{max-width:640px}
.hero h1{margin:24px 0 0;font-size:clamp(46px,7.6vw,88px);line-height:.96;
  letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--flame-ink)}
.lede{margin-top:24px;max-width:34em;font-size:clamp(18px,1.5vw,21px);
  line-height:1.5;color:var(--ink-soft)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
@media(max-width:559px){.hero__acts{display:grid;gap:10px}.hero__acts .btn{width:100%}}
.hero__note{margin-top:20px;font-size:15px;font-weight:500;color:var(--muted)}
.hero__note b{color:var(--ink);font-weight:600}
.shot{background:var(--mist);overflow:hidden;aspect-ratio:16/9}
.shot img{width:100%;height:100%;object-fit:cover;font-size:12px;color:var(--muted)}
.hero__shot{aspect-ratio:16/10}
@media(min-width:1000px){
  .hero{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:64px;
    align-items:center;padding:88px 0 104px var(--gutter)}
  .hero__shot{aspect-ratio:16/9}
}

/* ── conditions strip — short, dark, four facts ─────────── */
.strip{background:var(--ink);color:var(--paper)}
.strip ul{max-width:var(--wide);margin-inline:auto;padding:8px var(--gutter);
  display:grid}
.strip li{display:flex;align-items:center;gap:14px;padding:20px 0;
  border-top:1px solid var(--hair-lt)}
.strip li:first-child{border-top:0}
.strip .ic{color:var(--flame-lit)}
.strip b{display:block;font-family:var(--display);font-size:19px;
  font-weight:700;letter-spacing:-.02em;line-height:1.15}
.strip span{display:block;font-size:14px;color:var(--paper-mute);margin-top:3px}
@media(min-width:780px){
  .strip ul{grid-template-columns:repeat(4,1fr);padding-block:0;gap:0}
  .strip li{border-top:0;border-left:1px solid var(--hair-lt);
    padding:28px 20px 30px;align-items:flex-start;flex-direction:column;gap:14px}
  .strip li:first-child{border-left:0;padding-left:0}
}

/* ── §01 the inversion — tall ───────────────────────────── */
.inversion{padding:88px 0 0}
.inversion__top{margin-top:28px;display:grid;gap:24px}
.inversion h2{font-size:clamp(32px,4.9vw,56px);letter-spacing:-.035em}
.inversion__top p{color:var(--ink-soft);max-width:38em}
.inversion__top p em{font-style:italic;color:var(--ink)}
@media(min-width:920px){
  .inversion__top{grid-template-columns:1.06fr .94fr;gap:64px;align-items:start}
  .inversion__top p{padding-top:8px}
}
.plate{margin-top:56px;background:var(--mist);overflow:hidden;aspect-ratio:16/9}
.plate img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media(min-width:820px){.plate{aspect-ratio:2.4/1}}

.steps{margin-top:40px;display:grid;gap:0;padding-bottom:96px}
.steps li{padding:32px 0;border-top:1px solid var(--hair)}
.steps__hd{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.steps h3{font-size:clamp(23px,2.5vw,28px);letter-spacing:-.03em}
.steps p{margin-top:12px;color:var(--ink-soft);font-size:17px}
@media(min-width:860px){
  .steps{grid-template-columns:repeat(3,1fr);column-gap:48px;margin-top:56px;padding-bottom:112px}
  .steps li{padding:36px 0 0;border-top:2px solid var(--ink)}
}

/* ── the signature at page scale — the flame band ───────── */
.band{background:var(--flame);color:var(--ink);padding:72px 0}
.band p{font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.2vw,60px);line-height:1.04;letter-spacing:-.04em;
  max-width:17ch}
@media(min-width:900px){.band p{max-width:22ch}}

/* ── §02 evidence — very tall, alternating ──────────────── */
.evidence{background:var(--mist);padding:96px 0 104px}
.evidence__head h2{margin-top:26px;font-size:clamp(34px,5.6vw,64px);
  max-width:15ch;letter-spacing:-.038em}
.evidence__sub{margin-top:22px;max-width:40em;color:var(--ink-soft)}
.lots{margin-top:64px;display:grid;gap:56px}
.lot{display:grid;gap:28px;align-items:center}
.lot__body h3{font-size:clamp(28px,4vw,44px);margin:16px 0 14px;letter-spacing:-.035em}
.lot__body>p{color:var(--ink-soft);max-width:44ch}
.lot__body>p em{font-style:italic;color:var(--ink)}
.lot__tag{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.tag{display:inline-flex;align-items:center;gap:9px;background:var(--ink);
  color:var(--paper);font-size:12.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;padding:7px 12px}
.tag::before{content:"";width:9px;height:9px;background:var(--flame);flex:none}
.lot__demo{font-size:13px;font-weight:500;color:var(--muted)}
.spec{margin:24px 0 28px;display:grid;grid-template-columns:1fr 1fr;
  gap:10px 20px;border-top:1px solid var(--hair);padding-top:20px}
.spec li{position:relative;padding-left:18px;font-size:14.5px;
  font-weight:500;color:var(--ink-soft)}
.spec li::before{content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;background:var(--flame)}
.lot .shot img{transition:transform .5s ease}
.lot:hover .shot img{transform:scale(1.025)}
@media(min-width:860px){
  .lots{gap:72px}
  .lot{grid-template-columns:1.32fr 1fr;gap:52px}
  .lot--flip .lot__shot{order:2}
}
.evidence__foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--hair);
  font-size:17px;color:var(--ink-soft)}

/* ── §03 the bill — tall, dark ──────────────────────────── */
.bill{background:var(--ink);color:var(--paper);padding:96px 0 104px}
.bill__grid{margin-top:36px;display:grid;gap:56px}
/* The entry price leads: "$59/mo" is the figure, the one-off follows as the
   alternative. "$59/mo" sets three glyph groups wide against "$599"'s three,
   so the clamp is pulled back a notch to keep it on one line at 390px. */
.bill__from{font-size:15px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-mute);margin-bottom:14px}
.bill__fig{font-family:var(--display);font-size:clamp(88px,15vw,164px);
  font-weight:700;line-height:.86;letter-spacing:-.055em;white-space:nowrap}
.bill__cur{font-size:.42em;vertical-align:.62em;color:var(--flame-lit);
  margin-right:.02em;letter-spacing:-.02em}
.bill__per{font-size:.3em;vertical-align:.2em;color:var(--paper-mute);
  margin-left:.04em;letter-spacing:-.01em}
.bill__once{margin-top:18px;font-size:15px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--flame-lit)}
.bill__back{margin-top:26px;padding:22px 0 24px 26px;position:relative;
  border-top:1px solid var(--hair-lt);border-bottom:1px solid var(--hair-lt)}
.bill__back::before{content:"";position:absolute;left:0;top:31px;
  width:10px;height:10px;background:var(--flame)}
.bill__back b{display:block;font-family:var(--display);font-size:19px;
  font-weight:700;letter-spacing:-.02em;line-height:1.15}
.bill__back span{display:block;margin-top:6px;color:var(--paper-dim);
  font-size:16.5px;line-height:1.5;max-width:34ch}
.bill__back em{font-style:normal;font-weight:600;color:var(--paper);white-space:nowrap}
.bill__hint{margin-top:16px;font-size:15px;color:var(--paper-mute);max-width:32ch}

/* ── pay once: the alternative, and a real panel ─────────
   The monthly plan is now the entry price, so the one-off is no longer the
   headline — but it is the better deal for anyone who means to keep the site,
   and it is the only thing we have that Wix and Squarespace cannot say. It
   therefore gets the SIGNATURE 3px orange rule (parti-pris-vente-26aout §3),
   which is reserved for a fact the reader can check: $599 against 12 × $59.
   Stating the arithmetic against our own apparent interest is what makes the
   rest of the page believable. */
.bill__alt{margin-top:26px;padding:20px 20px 22px 26px;position:relative;
  border:1px solid var(--hair-lt)}
.bill__alt::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;
  width:3px;background:var(--flame)}
.bill__alt b{display:block;font-family:var(--display);font-size:20px;
  font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--paper)}
.bill__alt span{display:block;margin-top:9px;font-size:15.5px;line-height:1.55;
  color:var(--paper-mute);max-width:42ch}
.bill__alt em{font-style:normal;font-weight:600;color:var(--paper-dim)}
.bill__price .btn{margin-top:28px}
.bill__list li{border-top:1px solid var(--hair-lt);padding:20px 0 20px 26px;
  position:relative}
.bill__list li:last-child{border-bottom:1px solid var(--hair-lt)}
.bill__list li::before{content:"";position:absolute;left:0;top:29px;
  width:10px;height:10px;background:var(--flame)}
.bill__list b{display:block;font-family:var(--display);font-size:19px;
  font-weight:700;letter-spacing:-.02em}
.bill__list span{display:block;margin-top:5px;color:var(--paper-dim);
  font-size:16.5px;line-height:1.5;max-width:48ch}
.bill__fine{margin-top:44px;max-width:46em;color:var(--paper-mute);font-size:16.5px}
@media(min-width:920px){
  .bill__grid{grid-template-columns:.76fr 1.24fr;gap:72px;align-items:start}
  .bill__price{position:sticky;top:96px}
}

/* ── §04 the cost of no — short ─────────────────────────── */
.no{padding:88px 0}
.no__grid{margin-top:24px;display:grid;gap:24px;align-items:start}
.no__word{font-family:var(--display);font-size:clamp(64px,13vw,148px);
  font-weight:700;line-height:.86;letter-spacing:-.055em}
.no__word span{color:var(--flame)}
.no__flip{margin-top:26px;padding-top:18px;border-top:2px solid var(--ink);
  max-width:30em;font-size:15.5px;line-height:1.55;color:var(--muted)}
.no__flip b{color:var(--ink);font-weight:600}
.no__body{color:var(--ink-soft);font-size:clamp(18px,1.5vw,20px);max-width:38em}
.no__fine{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 12px}
.chip{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--edge);
  padding:8px 14px;font-size:14px;font-weight:500;color:var(--ink-soft)}
.chip::before{content:"";width:8px;height:8px;background:var(--flame);flex:none}
@media(min-width:900px){
  .no__grid{grid-template-columns:.85fr 1.15fr;gap:64px}
  .no{padding:104px 0}
}

/* ── §05 answers — medium, cool surface ─────────────────── */
.answers{background:var(--stone);padding:88px 0 96px}
.answers h2{margin-top:26px;font-size:clamp(30px,4.4vw,48px);max-width:17ch;
  letter-spacing:-.035em}
.answers__grid{margin-top:48px;display:grid;gap:0}
.answers article{padding:32px 0;border-top:1px solid rgba(20,18,15,.16)}
.answers__hd{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.answers__hd .stamp{width:44px;height:44px}
.answers h3{font-size:clamp(20px,2.2vw,24px);letter-spacing:-.025em}
.answers p{color:var(--ink-soft);max-width:54ch;font-size:17px}
/* on --stone, flame-ink text falls to 4.13:1 — the ink carries the word,
   the flame rule under it carries the accent */
.answers__last .tlink{margin-top:14px;color:var(--ink)}
@media(min-width:880px){
  .answers__grid{grid-template-columns:1fr 1fr;column-gap:64px}
  .answers article:nth-child(2){border-top:1px solid rgba(20,18,15,.16)}
  .answers__last{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr;column-gap:64px;align-items:start}
  .answers__last .answers__hd{margin-bottom:0;grid-column:1;grid-row:1}
  .answers__last p{grid-column:2;grid-row:1/span 2}
  .answers__last .tlink{grid-column:1;grid-row:2;margin-top:18px;
    justify-self:start;align-self:start}
}

/* ── §06 two doors — tall ───────────────────────────────── */
.doors{padding:88px 0 96px}
.doors__plate{margin-top:28px;background:var(--mist);overflow:hidden;aspect-ratio:16/9}
.doors__plate img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
@media(min-width:820px){.doors__plate{aspect-ratio:2.4/1}}
.doors__grid{margin-top:40px;display:grid;gap:20px}
.door{padding:36px 28px;border:1.5px solid var(--edge);display:flex;
  flex-direction:column;align-items:flex-start;min-width:0}
.door--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.door__hd{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.door h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.035em}
.door p{color:var(--ink-soft);max-width:36ch}
.door--primary p{color:var(--paper-dim)}
.door__foot{margin-top:auto;padding-top:28px}
.door__note{margin-top:16px;font-size:14.5px;color:var(--muted)}
.door--primary .door__note{color:var(--paper-mute)}
.doors__after{margin-top:32px;font-size:17px;color:var(--ink-soft)}
@media(min-width:860px){
  .doors__grid{grid-template-columns:1fr 1fr;gap:24px}
  .door{padding:44px 40px}
}

/* ── footer ─────────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--paper-dim);padding:72px 0 40px}
.foot__in{display:grid;gap:40px}
.foot .mark{color:var(--paper);margin-bottom:14px}
.foot__col>p{font-size:16px;max-width:34ch;color:var(--paper-mute)}
.foot__label{font-size:13px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--flame-lit);margin-bottom:8px!important}
.foot__col a:not(.mark){display:flex;align-items:center;min-height:44px;
  font-size:15.5px;color:var(--paper-dim);text-decoration:none;padding:9px 0;
  border-bottom:1px solid var(--hair-lt)}
.foot__col a:not(.mark):hover{color:var(--flame-lit)}
.foot__fine{margin-top:56px;padding-top:24px;border-top:1px solid var(--hair-lt);
  font-size:14px;color:var(--paper-mute)}
@media(min-width:860px){.foot__in{grid-template-columns:1.5fr .8fr .9fr;gap:56px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ══════════════════════════════════════════════════════════
   THE START FORM — the page's one job.
   Signature carried in: sharp corners, 2px ink rule, orange
   square before the label, flame submit with ink text.
   ══════════════════════════════════════════════════════════ */
.start{margin-top:32px;border:2px solid var(--ink);background:var(--paper);
  padding:24px 22px 22px;max-width:560px}
.start__lb{display:flex;align-items:center;gap:11px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink)}
.start__lb::before{content:"";width:14px;height:14px;background:var(--flame);flex:none}
.start__fields{margin-top:18px;display:grid;gap:14px}
.start label{display:block;font-size:13.5px;font-weight:600;
  letter-spacing:.02em;color:var(--muted);margin-bottom:7px}
.start input{width:100%;min-height:54px;padding:13px 15px;
  font-family:var(--sans);font-size:17px;font-weight:500;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--edge);border-radius:0;
  appearance:none;transition:border-color .16s ease,box-shadow .16s ease}
.start input::placeholder{color:#8A8378;font-weight:400}
.start input:hover{border-color:var(--muted)}
.start input:focus{outline:none;border-color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink)}
.start .btn{width:100%;margin-top:16px}
.start__note{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.start__note b{color:var(--ink);font-weight:600}
@media(min-width:560px){
  .start{padding:26px 26px 24px}
  .start__fields{grid-template-columns:1.25fr 1fr;gap:16px}
}

/* the same block, laid on ink (final call) */
.start--lt{background:transparent;border-color:var(--flame)}
.start--lt .start__lb{color:var(--paper)}
.start--lt label{color:var(--paper-mute)}
.start--lt input{background:#1E1B17;border-color:#3A352E;color:var(--paper)}
.start--lt input::placeholder{color:#8C867C}
.start--lt input:hover{border-color:var(--paper-mute)}
.start--lt input:focus{border-color:var(--flame);box-shadow:inset 0 0 0 1.5px var(--flame)}
.start--lt .start__note{color:var(--paper-mute)}
.start--lt .start__note b{color:var(--paper)}

/* ── hero, self-serve variant: form replaces the button row ── */
.hero__form-wrap{max-width:560px}
.hero .lede{margin-top:20px}

/* ── the two prices, side by side, honest about currency ── */
.tariff{margin-top:30px;display:grid;gap:0;border-top:1px solid var(--hair-lt)}
.tariff div{display:flex;align-items:baseline;gap:14px;padding:16px 0 16px 26px;
  position:relative;border-bottom:1px solid var(--hair-lt)}
.tariff div::before{content:"";position:absolute;left:0;top:24px;
  width:10px;height:10px;background:var(--flame)}
.tariff b{font-family:var(--display);font-size:26px;font-weight:700;
  letter-spacing:-.03em;line-height:1;flex:none}
.tariff b span{font-size:.6em;color:var(--paper-mute);letter-spacing:-.01em}
.tariff span{font-size:15.5px;color:var(--paper-dim)}

/* ── final call — dark, form on ink ─────────────────────── */
.call{background:var(--ink);color:var(--paper);padding:88px 0 96px}
.call h2{margin-top:26px;font-size:clamp(32px,5vw,58px);max-width:16ch;
  letter-spacing:-.038em}
.call__sub{margin-top:22px;max-width:40em;color:var(--paper-dim);font-size:17.5px}
.call__grid{margin-top:44px;display:grid;gap:24px;align-items:stretch}
/* the second path is a real panel, not floating text — it has to look
   like a door, but a quieter one than the form */
.call__aside{border:1.5px solid #3A352E;padding:26px 24px 28px;
  display:flex;flex-direction:column;align-items:flex-start}
.call__aside h3{font-size:21px;letter-spacing:-.025em;color:var(--paper)}
.call__aside p{margin-top:12px;font-size:16px;color:var(--paper-mute);max-width:34ch}
.call__aside .btn{margin-top:22px}
.call__aside .call__or{margin-top:auto;padding-top:24px;font-size:15px}
.btn--lt{border-color:var(--paper-dim);color:var(--paper)}
.btn--lt:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media(min-width:900px){
  .call__grid{grid-template-columns:1.22fr .78fr;gap:24px}
}
button.btn{cursor:pointer;border-radius:0;-webkit-appearance:none;appearance:none}

/* the header CTA has two lengths: the short one keeps 320px clean */
.code-btn__lg{display:none}
.code-btn__sm{display:inline}
@media(min-width:420px){
  .code-btn__lg{display:inline}
  .code-btn__sm{display:none}
}
@media(max-width:359px){.code-btn{padding-inline:13px;font-size:14.5px}}

/* Desktop hero: the form makes the text column tall, so the image must
   STRETCH to it — centred, it left a dead band under the picture. */
@media(min-width:1000px){
  .hero{align-items:stretch;padding-block:72px 88px}
  .hero__text{align-self:center}
  .hero__shot{aspect-ratio:auto;height:100%;min-height:520px}
}
/* in the two-door grid the form owns its whole column */
.call__grid .start{max-width:none}

/* ══════════════════════════════════════════════════════════
   LES PAGES MÉTIER (/websites-for-plumbers/, /hair-salon-websites/…)

   POURQUOI ELLES EXISTENT. Relevé le 26/08/2026 à 02:20 UTC dans
   get_analytics, sur sept jours : 17 pages vues, 9 visiteurs, 13
   sessions, ZÉRO referrer, et 16 des 17 vues sur « / ». Le produit
   libre-service marche et la home le lie bien — mais la home vise
   une requête de marque que personne ne tape, et c'était la seule
   page de fond indexable du domaine. Il n'existait aucune porte
   d'entrée organique. Ces huit pages en sont une par métier.

   L'IDÉE DIRECTRICE : le DOSSIER DU MÉTIER. Pas une page
   d'atterrissage — un dossier ouvert sur UN métier. Voici ton
   métier ; voici ce que fait ton client, à huit heures du soir,
   sur un téléphone fêlé, à une main ; voici un site fini pour
   exactement ça ; voici la facture. Le lecteur doit sentir que
   quelqu'un qui connaît son métier a écrit la page — sinon elle
   ne vaut pas mieux que les deux cents pages minces que produit
   n'importe quel générateur, et une page mince sur un domaine
   neuf abîme le domaine au lieu de le servir.

   CE QU'ELLES REPRENNENT, ET QU'ELLES NE REDESSINENT PAS : tout.
   Mêmes variables, même typographie, mêmes .marker / .stamp /
   .steps / .band / .bill / .answers / .start / .strip / .foot que
   site/index.html. Une page métier qui aurait l'air d'un autre
   site apprendrait au visiteur qu'il est tombé sur une usine à
   pages. Quatre composants seulement sont ajoutés ci-dessous, et
   ils portent la même signature : coin vif, filet de 1 px, carré
   orange en puce.

   LA CINQUIÈME ÉCHELLE DE LA SIGNATURE : .proof. Le carré orange
   se décline en 14 px (.marker), 48 px (.stamp), cartouche
   (.step__n) et pleine largeur (.band). Ces pages ajoutent LA
   PREUVE DANS UN TÉLÉPHONE — capture RÉELLE d'une démo RÉELLE,
   prise à 390 px, la largeur où le site sera lu. C'est la seule
   preuve qu'on ait le droit de montrer : pas d'avis, pas de logo,
   pas de nombre de clients.
   ══════════════════════════════════════════════════════════ */

/* ── le fil d'Ariane — discret, mais l'orange y est ───────── */
.crumb{max-width:var(--wide);margin-inline:auto;
  padding:6px var(--gutter) 0;display:flex;align-items:center;
  flex-wrap:wrap;gap:0 12px;font-size:13.5px;font-weight:500;color:var(--muted)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;color:var(--muted);
  box-shadow:inset 0 -1px 0 var(--edge)}
.crumb a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--flame)}
.crumb span[aria-current]{display:inline-flex;align-items:center;min-height:44px;
  color:var(--ink);font-weight:600}
.crumb__sep{width:7px;height:7px;background:var(--flame);flex:none}

/* ── LE REGISTRE — ce qui est sur la page, terme par terme ──
   Le pendant clair de .bill__list : même puce carrée, même filet,
   même échelle. Deux colonnes à partir de 900 px, et les filets
   de fermeture tiennent parce que chaque registre compte SIX
   entrées — le dernier de la colonne 1 est :nth-last-child(2). */
.ledger__hd{margin-top:8px;font-size:clamp(23px,2.5vw,30px);
  letter-spacing:-.03em;max-width:22ch}
.ledger{margin-top:28px;display:grid;gap:0}
.ledger li{border-top:1px solid var(--hair);padding:20px 0 20px 26px;position:relative}
.ledger li:last-child{border-bottom:1px solid var(--hair)}
.ledger li::before{content:"";position:absolute;left:0;top:29px;
  width:10px;height:10px;background:var(--flame)}
.ledger b{display:block;font-family:var(--display);font-size:19px;
  font-weight:700;letter-spacing:-.02em;line-height:1.15}
.ledger span{display:block;margin-top:5px;color:var(--ink-soft);
  font-size:16.5px;line-height:1.5;max-width:52ch}
.ledger__foot{margin-top:28px;padding-top:24px;border-top:2px solid var(--ink);
  font-size:17px;color:var(--ink-soft);max-width:60ch}
@media(min-width:900px){
  .ledger{grid-template-columns:1fr 1fr;column-gap:56px}
  .ledger li:nth-child(2){border-top:1px solid var(--hair)}
  .ledger li:nth-last-child(2){border-bottom:1px solid var(--hair)}
}
.inversion .ledger__foot{padding-bottom:96px}
@media(min-width:860px){.inversion .ledger__foot{padding-bottom:112px}}
/* sur ces pages, .steps ferme sur le registre et non sur le vide */
.inversion .steps{padding-bottom:56px}
@media(min-width:860px){.inversion .steps{padding-bottom:64px}}

/* ── LA PREUVE — une capture réelle, dans un téléphone ────── */
.proofgrid{margin-top:56px;display:grid;gap:36px;align-items:center}
@media(min-width:860px){
  .proofgrid{grid-template-columns:.78fr 1.22fr;gap:56px}
}
.proof{background:var(--ink);padding:26px 22px 28px;
  display:flex;flex-direction:column;align-items:center}
.proof__ph{width:100%;max-width:292px;background:#000;
  padding:9px;border:1px solid #3A352E}
.proof__ph img{width:100%;height:auto}
.proof__cap{margin-top:20px;max-width:32ch;text-align:center;
  font-size:14.5px;line-height:1.5;color:var(--paper-mute)}

/* ── LES AUTRES MÉTIERS — le maillage, rendu lisible ─────── */
.trades{padding:80px 0 88px}
.trades__h2{margin-top:26px;font-size:clamp(28px,3.8vw,42px);
  max-width:20ch;letter-spacing:-.035em}
.trades__grid{margin-top:40px;display:grid;gap:16px}
.trade-card{display:flex;flex-direction:column;gap:8px;
  padding:26px 24px 28px;border:1.5px solid var(--edge);
  text-decoration:none;transition:border-color .16s ease,background .16s ease}
.trade-card:hover{border-color:var(--ink);background:var(--mist)}
.trade-card b{display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.03em}
.trade-card b::before{content:"";width:12px;height:12px;background:var(--flame);flex:none}
.trade-card span{font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.trades__foot{margin-top:32px;padding-top:24px;border-top:1px solid var(--hair);
  font-size:17px;color:var(--ink-soft);max-width:60ch}
@media(min-width:800px){
  .trades{padding:96px 0 104px}
  .trades__grid{grid-template-columns:repeat(3,1fr);gap:20px}
}

/* ── le pied à quatre colonnes (la colonne des métiers) ──── */
@media(min-width:640px) and (max-width:1039px){
  .foot__in--4{grid-template-columns:1fr 1fr;gap:40px 48px}
}
@media(min-width:1040px){
  .foot__in--4{grid-template-columns:1.35fr .85fr .82fr .98fr;gap:44px}
}

/* ── la home renvoie vers les pages métier ───────────────── */
.byTrade{margin-top:56px;padding-top:36px;border-top:2px solid var(--ink)}
.byTrade h3{font-size:clamp(22px,2.4vw,27px);letter-spacing:-.03em;max-width:24ch}
.byTrade p{margin-top:12px;font-size:16.5px;color:var(--ink-soft);max-width:56ch}
.byTrade ul{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px 12px}
.byTrade a{display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:9px 16px;border:1.5px solid var(--edge);background:var(--paper);
  font-size:15.5px;font-weight:600;text-decoration:none;color:var(--ink);
  transition:border-color .16s ease,background .16s ease,color .16s ease}
.byTrade a::before{content:"";width:9px;height:9px;background:var(--flame);flex:none}
.byTrade a:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}

/* ── L'ADRESSE EN TOUTES LETTRES ──────────────────────────────
   Le filet orange de 3 px ne porte QUE du vérifiable (parti-pris
   de vente du 26/08). Ici il porte le fait le plus difficile à
   imiter que nous ayons : le site de démonstration existe déjà,
   fini, à une adresse publique qu'on peut recopier et ouvrir.
   Rien de décoratif ne prend ce filet. */
.addr{margin:4px 0 2px;padding:15px 0 16px 18px;
  border-left:3px solid var(--flame);display:grid;gap:8px}
.addr__lb{font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted)}
.addr__url{justify-self:start;max-width:100%;padding:3px 0;
  font-size:14.5px;font-weight:600;
  line-height:1.5;color:var(--flame-ink);text-decoration:none;
  overflow-wrap:anywhere;word-break:break-word;
  border-bottom:1px solid rgba(195,60,13,.4)}
.addr__url:hover{border-bottom-color:var(--flame-ink)}
.addr__note{font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:48ch}
@media(min-width:860px){.addr{margin-top:6px}}