/* ==========================================================================
   COURTIER INARRETABLE, shared design system (v4, the product launch brand)
   Every funnel page links this file and assets/system.js. Do not fork it per page.
   Local tweaks go in a small <style> in the page, and only with tokens from here.
   classe.html is the master page: copy markup from it. confirmation.html is the master for thank-you layouts.

   BRAND
     Signal vermilion, ink, cream, paper. Flat color blocking. No gold, no blue, no glow, no decorative gradients.
     Text on vermilion is ink. Cream on vermilion only for display size words (.mark). Never white at small sizes.
     Archivo 800 at width 112 to 125 for display, sentence case. Instrument Serif italic (.mark) on 2 to 5 words.
     Instrument Sans for body and UI. Numbers in Archivo with tabular figures.
     Signature: the logo chevron, large and with intent. Giant behind Frank, as the roof of a closing section,
     as list bullets, as the progress mark. Not everywhere.

   PAGE HEAD (copy as is on every page)
     <html lang="fr-CA">
     <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
     <meta name="robots" content="noindex,nofollow">
     <meta name="theme-color" content="#16130f">
     <link rel="icon" type="image/svg+xml" href="assets/logo/icon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/logo/icon-32.png">
     <link rel="apple-touch-icon" href="assets/logo/icon-180.png">
     <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Instrument+Sans:wdth,wght@75..100,400..700&family=Instrument+Serif:ital@0;1&display=swap">
     <link rel="stylesheet" href="assets/system.css">
     <script src="assets/system.js" defer></script>

   FRENCH TYPE
     &#8239; (narrow no-break space) before : ; ? ! % $ and inside the guillemets.
     &nbsp; in "12&nbsp;h" and "26&nbsp;janvier". Real apostrophes. Never an em dash, en dash or " - " as punctuation.
     Everything is sentence case. Nothing is uppercased by CSS.

   COMPONENTS, full markup lives in classe.html: copy from there.
     Sections    section.sec + one of:
                   .sec--black (.sec--navy is the same): ink       .sec--ink: ink-2, one step lighter
                   .sec--white (= .sec--paper): paper              .sec--soft (= .sec--cream): cream
                   .sec--signal (= .sec--closer): drenched vermilion, buttons turn ink by themselves
                 Each one remaps --fg --fg2 --line --focus --mark, so everything inside adapts.
                 .sec--tight has less padding. .sec--peak gives a section the chevron as its roof.
                 .wrap is the main column (aligns with the hero), .wrap--narrow 860px.
     Headings    h1.display  h2.h2  h3.h3  .h2--calm (a size down)  .hand (a serif aside, once per page)
     Emphasis    span.mark inside a heading: Instrument Serif italic, vermilion on light, cream on vermilion. 2 to 5 words.
     Sticky bar  header.bar > .bar__in > .bar__id (img.bar__mark = logo/nav-dark.svg) + p.bar__txt + .bar__count[data-countdown]
                 + a/button.bar__cta. The CTA appears once the hero has left the screen (system.js sets .is-cta).
     Hero        section.scene > .scene__stage > .scene__copy (.audience h1.display .lede .scene__do(.btn + .stub) p.micro)
                 + .scene__art (.scene__geo + figure.scene__host + .scene__phone(.fictif .phone))
                 .scene__geo is filled with the giant chevron by system.js. data-in style="--i:n" staggers the page load.
                 .scene--slim is the short header (no Frank). .scene--split keeps the art narrower for long copy.
     Ticket stub p.stub > .stub__d (b + i) + .stub__t (strong + span). The date, always as a stub, never a pill.
     Tag         p.livepill > .livepill__dot .livepill__live .livepill__sep .livepill__bar   .livepill--ok has a check. Use sparingly.
     Button      .btn > .btn__t (b) + .btn__a. Flat vermilion, ink text. Ink with cream text on vermilion backgrounds.
                 Variants .btn--white (cream) .btn--ink .btn--ghost .btn--block .btn--two (shows the small line).
                 The small line is hidden unless .btn--two. Full width on phones, auto on desktop.
     Under CTA   .cta > .btn + p.micro + .proof > .proof__av + p      .cta--left aligns left. Everything is left by default on heroes.
     Proof strip .results > button.result[data-story][data-poster][data-title] > .result__ph (img) + span (.result__who .result__claim .result__meta)
                 Four across on desktop, two by two on phones. .result__q (optional quote) only if there is room.
                 p.disclosure is REQUIRED beside any result. Text is fixed by the brief. p.lang for the language note.
     Timeline    ol.tl > li.tl__i > time.tl__t + p.tl__p (small)     li.tl__gap is the elapsed time between stamps.
                 .tl__i--end turns the last stamp vermilion. Use on dark.
     Take away   .take > .take__head + .take__lead (vermilion block) + .take__a + .take__b + .discover__note. Asymmetric.
     Chevron list ul.chevs > li. The chevron as a bullet.
     Rows        ol.rows > li.row > .row__n + div > h3.row__t + p.row__d (light or dark, follows the section)
     Stories     .stories > button.story[data-story] > img + .story__txt    Vertical video cards for offre.html
     Video       button.vposter[data-story] > img + .vposter__play + .vposter__t + .vposter__d
     Host        .host > div (.host__ph + .host__cap) + .host__body (.h2 .host__lead dl.stats .host__why)
                 section.sec.sec--host + .host--bleed: photo bleeds the left half, no section padding.
     Comparison  table.cmp > thead + tbody, with explicit ARIA roles. Editorial spread, no X column.
                 th.cmp__topic (scope=row, optional first column) td.cmp__old (serif, the year that repeats) td.cmp__new (vermilion column).
     Phone       .phone > .phone__screen > .phone__island .phone__top .phone__who ol.thread[data-thread] > li.msg.msg--in|out|sys[data-wait="ms"] > .msg__b
                 Animates like iMessage. Always label it "Exemple fictif" with p.fictif. .phone--short is the hero size.
     Rows+phone  .discover__head then .discover > div + .discover__phone[data-thread-wrap], with p.fictif and button[data-replay]
     Closer      section.sec.sec--closer.sec--peak > .closer > h2.h2 + .closer__a (.closer__when + .countdown) + .closer__b (.cta)
     Countdown   .countdown[data-countdown="2027-01-26T12:00:00-05:00"] > .cd > b[data-cd="d|h|m|s"] + span
     Footer      footer.foot > .foot__top (img.foot__badge = logo/logo-dark.svg + p.foot__event) + .foot__legal.
                 Must contain: Maquette. Aucune donnée n'est transmise.
     Modal       dialog.modal.modal--ticket#inscription > .modal__in > .modal__x + aside.tk + .modal__form (.modal__t + form).
                 Any element with data-open="inscription" opens it. [data-ticket-name] mirrors the first name as it is typed.
                 A plain dialog.modal (no --ticket) still works, for stand-ins and small messages.
     Forms       form[data-mock][data-next="page.html"] > .field > label.field__l + input.field__i + small.field__hint
                 .tel wraps a phone input with a +1 prefix. label.check holds the consent box (unchecked).
                 JS validates in French, never sends anything, then navigates. Nothing leaves the browser.
     FAQ         .faq > details > summary + .faq__a
     Bottom CTA  .bbar > .btn (mobile only, appears after the hero, optional, long pages only)
     Reveal      data-reveal on any block, style="--i:n" to stagger. Respects reduced motion.
     Dates       The head script sets html.is-past from the class start and html.is-closed from the offer deadline.
                 .when-live .when-past .when-closed .when-open show text or controls by state.
                 main[data-gate=live] or [data-gate=open] swaps the page for its section[data-endstate] (system.js fills it).
     Lockup      span.lockup > svg + b. Inline name beside the chevron. .lockup--light on paper.
     Notes layer span.tbc "à confirmer" and p.rnote (English, for Alex). Hidden until the Notes pill is on.
                 The pill itself is injected by system.js, do not add it by hand.
     Prefill     <span data-fill="prenom">toi</span> shows the first name typed in the modal.
     Helpers     .only-m .only-d .vh .center .nb (no wrap) .mark--br (serif on its own line)
   ========================================================================== */

/* TOKENS ================================================================== */
:root{
  /* brand */
  --v:#ff4a1c; --v-hi:#ff6236; --v-deep:#e8380e; --v-text:#b42a06; /* v-text: vermilion for small text on light */
  --ink:#16130f; --ink-2:#231f19; --line-dark:#3a342b;
  --cream:#f6f0e6; --paper:#fbf7f0; --line-warm:#e2d9c9; --muted:#6f675a; --muted-dark:#c4baa9;
  /* older names kept so pages not yet rebuilt inherit the new brand */
  --navy:var(--ink); --royal:var(--v-deep); --royal-hi:var(--v);
  --black:var(--ink); --black-2:var(--ink-2); --soft:var(--cream); --white:var(--paper);
  --hair:var(--line-warm); --periwinkle:var(--muted-dark);
  --gold:var(--v); --gold-hi:var(--v-hi); --gold-edge:var(--v-deep); --gold-text:var(--v-text);
  --metal:var(--v); --red:#b3200a; --red-hi:var(--v); --ok:var(--v-text);
  /* type */
  --f-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-disp:'Archivo','Instrument Sans',system-ui,sans-serif;
  --f-serif:'Instrument Serif','Iowan Old Style',Georgia,serif;
  --f-num:var(--f-disp); --f-big:var(--f-disp); --f-hand:var(--f-serif);
  --t-display:clamp(38px,1.3rem + 4.2vw,84px);
  --t-h2:clamp(32px,1.2rem + 2.9vw,66px);
  --t-h3:clamp(21px,1.05rem + .8vw,30px);
  --t-lede:clamp(17px,1rem + .36vw,21px);
  --t-body:16.5px; --t-small:14px; --t-micro:13.5px;
  /* space */
  --s-sec:clamp(72px,3.4rem + 5.4vw,148px);
  --s-sec-tight:clamp(48px,2rem + 3vw,80px);
  --gutter:20px;
  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:160ms; --t-med:280ms; --t-slow:800ms;
  /* section defaults */
  --fg:var(--ink); --fg2:var(--muted); --line:var(--line-warm); --focus:var(--ink); --mark:var(--v);
  --btn-b:var(--v); --btn-bh:var(--v-hi); --btn-on:var(--ink);
  --barh:56px;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 172'%3E%3Cpath d='M0 172 160 0l160 172h-48.4L160 92 48.4 172z'/%3E%3C/svg%3E");
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E");
  --play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316130f' d='M8.5 5.6v12.8a.7.7 0 0 0 1.07.6l10.3-6.4a.7.7 0 0 0 0-1.2L9.57 5a.7.7 0 0 0-1.07.6Z'/%3E%3C/svg%3E");
}
@media (min-width:768px){:root{--gutter:40px;--barh:54px}}
@media (min-width:1280px){:root{--gutter:56px}}

/* BASE ==================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barh) + 16px)}
body{margin:0;background:var(--ink);color:var(--fg);font:400 var(--t-body)/1.58 var(--f-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
body:has(dialog[open]){overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
input,select,textarea{font:inherit}
:focus{outline:0}
[tabindex="-1"]:focus-visible{outline:0}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:3px}
.wrap{width:min(1560px,100% - var(--gutter)*2);margin-inline:auto}
.wrap--narrow{width:min(860px,100% - var(--gutter)*2);margin-inline:auto}
.center{text-align:center}
.nb{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:767px){.only-d{display:none!important}}
@media (min-width:768px){.only-m{display:none!important}}
@media (max-width:1199px){.br-xl{display:none}}
/* new broker path: set by the head script or by system.js from nouveau-courtier.html */
html:not([data-parcours=nouveau]) .if-nouveau{display:none!important}
html[data-parcours=nouveau] .if-etabli{display:none!important}
/* date states */
html:not(.is-past) .when-past,html.is-closed .when-past,html:not(.is-closed) .when-closed,html.is-past .when-live,html.is-closed .when-open{display:none!important}
html.is-past main[data-gate=live]>:not(.endstate),html.is-closed main[data-gate=open]>:not(.endstate),html.is-past [data-gate-x=live],html.is-closed [data-gate-x=open]{display:none!important}
.endstate{display:none}
html.is-past .endstate--live,html.is-closed .endstate--open,html.is-closed .endstate--live{display:block}
.skip{position:absolute;left:12px;top:-100px;z-index:200;background:var(--ink);color:var(--cream);padding:12px 16px;border-radius:6px}
.skip:focus{top:8px}

/* SECTIONS ================================================================ */
.sec{position:relative;overflow-x:clip;padding-block:var(--s-sec);color:var(--fg);background:var(--sec-bg,transparent)}
.sec--tight{padding-block:var(--s-sec-tight)}
.sec--black,.sec--navy{--sec-bg:var(--ink);--fg:var(--cream);--fg2:var(--muted-dark);--line:var(--line-dark);--focus:var(--cream);--mark:var(--v)}
.sec--ink{--sec-bg:var(--ink-2);--fg:var(--cream);--fg2:var(--muted-dark);--line:var(--line-dark);--focus:var(--cream);--mark:var(--v)}
.sec--white,.sec--paper{--sec-bg:var(--paper);--fg:var(--ink);--fg2:var(--muted);--line:var(--line-warm);--focus:var(--ink);--mark:var(--v)}
.sec--soft,.sec--cream{--sec-bg:var(--cream);--fg:var(--ink);--fg2:var(--muted);--line:var(--line-warm);--focus:var(--ink);--mark:var(--v)}
.sec--signal,.sec--closer{--sec-bg:var(--v);--fg:var(--ink);--fg2:var(--ink);--line:#16130f40;--focus:var(--ink);--mark:var(--cream);--btn-b:var(--ink);--btn-bh:var(--ink-2);--btn-on:var(--cream)}
/* the chevron as the roof of a section: the apex sits off center so it never feels like a banner */
.sec--peak{--peak:clamp(56px,9vw,150px);z-index:1;margin-top:calc(var(--peak)*-1);padding-top:calc(var(--s-sec) + var(--peak)*.7);clip-path:polygon(0 var(--peak),72% 0,100% calc(var(--peak)*.39),100% 100%,0 100%)}

/* TYPE ==================================================================== */
.display,.h2,.h3,.row__t,.modal__t,.tl__t,.take__lead h3{font-family:var(--f-disp);font-stretch:118%;font-weight:800;font-optical-sizing:auto}
.display{font-size:var(--t-display);line-height:1.02;letter-spacing:-.032em;text-wrap:balance}
.h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.03em;text-wrap:balance;color:var(--fg)}
.h2--calm{font-size:calc(var(--t-h2)*.82);line-height:1.08}
.h3{font-size:var(--t-h3);line-height:1.18;letter-spacing:-.018em;text-wrap:pretty;color:var(--fg)}
.lede{font-size:var(--t-lede);line-height:1.46;font-weight:500;color:var(--fg2);text-wrap:pretty}
.body{max-width:66ch;color:var(--fg2);text-wrap:pretty}
/* Emphasis: the serif italic is optically small, so it runs larger and looser than the wide sans around it */
.mark{font-family:var(--f-serif);font-style:italic;font-weight:400;font-stretch:100%;font-size:1.12em;line-height:.9;letter-spacing:-.018em;color:var(--mark)}
.stop{color:var(--v-text)}
.hand{display:inline-block;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(26px,1.2rem + 1vw,36px);line-height:1.1;color:var(--mark)}
.hand svg{display:none}

/* BUTTONS ================================================================= */
.btn{position:relative;display:flex;width:100%;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:14px 26px;border-radius:6px;background:var(--btn-b);color:var(--btn-on);font-family:var(--f-sans);text-decoration:none;text-align:center;transition:background-color var(--t-fast) linear,transform var(--t-fast) var(--ease);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn__t{display:block}
.btn__t b{display:block;font-size:17px;line-height:1.25;font-weight:600;letter-spacing:-.008em}
.btn__t small{display:none}
.btn--two .btn__t small{display:block;margin-top:1px;font-size:13px;line-height:1.3;font-weight:500;opacity:.82}
.btn__a{position:relative;flex:none;width:20px;height:20px;transition:transform var(--t-med) var(--ease)}
.btn__a::after{content:'';position:absolute;inset:0;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline-offset:3px;border-radius:6px}
@media (min-width:768px){.btn{display:inline-flex;width:auto;padding-inline:30px}.btn__t b{white-space:nowrap}}
@media (hover:hover){.btn:hover{background:var(--btn-bh)}.btn:hover .btn__a{transform:translateX(5px)}}
.btn--white{--btn-b:var(--cream);--btn-bh:#fff;--btn-on:var(--ink)}
.sec--signal .btn--white,.sec--closer .btn--white,.scene .btn--white{--btn-b:var(--ink);--btn-bh:var(--ink-2);--btn-on:var(--cream)}
.btn--ink{--btn-b:var(--ink);--btn-bh:var(--ink-2);--btn-on:var(--cream)}
.btn--ghost{--btn-b:transparent;--btn-bh:transparent;--btn-on:var(--fg);box-shadow:inset 0 0 0 1.5px currentColor}
.btn--block{display:flex;width:100%}
.btn.is-busy{opacity:.72;pointer-events:none}

/* UNDER CTA =============================================================== */
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.cta--left{align-items:flex-start}
.center .cta,.cta--center{align-items:center}
.micro{margin-top:14px;font-size:var(--t-micro);line-height:1.45;font-weight:500;color:var(--fg2);text-wrap:pretty}
.cta--left .micro{text-align:left}
.micro i{font-style:normal;margin-inline:.45em;opacity:.6}
.proof{display:flex;align-items:center;gap:12px;margin-top:16px;text-align:left}
.proof__av{display:flex;flex:none}
.proof__av img{width:38px;height:38px;border-radius:3px;object-fit:cover;margin-left:-6px;box-shadow:0 0 0 2px var(--proof-ring,var(--ink))}
.proof__av img:first-child{margin-left:0}
.proof p{font-size:13.5px;line-height:1.42;color:var(--fg2);max-width:34ch}
.proof strong{color:var(--fg);font-weight:600}
.proof a{display:inline-block;padding-block:14px;margin-block:-14px;color:inherit;text-underline-offset:2px;text-decoration-thickness:1px}
.sec--white .proof,.sec--paper .proof{--proof-ring:var(--paper)}
.sec--soft .proof,.sec--cream .proof{--proof-ring:var(--cream)}
.sec--closer .proof,.sec--signal .proof,.scene .proof{--proof-ring:var(--v)}

/* STICKY BAR ============================================================== */
.bar{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--cream);--focus:var(--cream)}
/* one sticky CTA per phone screen: the top bar slides away once the bottom bar is up */
@media (max-width:767px){.bar{transition:transform var(--t-med) var(--ease)}.has-bbar .bar{transform:translateY(-101%)}}
.bar__in{width:calc(100% - var(--gutter)*2);max-width:1560px;margin-inline:auto;height:var(--barh);display:flex;align-items:center;gap:12px 22px}
.bar__id{display:flex;align-items:center;gap:18px;min-width:0;margin-right:auto;text-decoration:none}
.bar__mark{width:auto;height:17px;flex:none}
.bar__txt{display:none;font-size:13.5px;line-height:1.25;font-weight:500;white-space:nowrap;color:var(--muted-dark)}
.bar__sub{font-weight:500;color:var(--cream)}
.bar__txt .bar__sub{margin-left:.6em}
.bar__count{display:flex;align-items:baseline;gap:7px;flex:none;font:700 14px/1 var(--f-disp);font-stretch:112%;font-variant-numeric:tabular-nums;letter-spacing:-.005em;white-space:nowrap;color:var(--cream)}
.bar__count[hidden]{display:none}
.bar__count span{font-family:var(--f-sans);font-weight:500;font-stretch:100%;font-size:12px;color:var(--muted-dark);margin-left:-5px}
.bar__cta{display:inline-flex;align-items:center;gap:9px;flex:none;min-height:44px;padding:0 15px;border-radius:6px;background:var(--v);color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none;transition:background-color var(--t-fast) linear,opacity var(--t-med) linear,transform var(--t-med) var(--ease)}
.bar__cta svg{width:17px;height:17px;transition:transform var(--t-med) var(--ease)}
@media (hover:hover){.bar__cta:hover{background:var(--v-hi)}.bar__cta:hover svg{transform:translateX(4px)}}
.js .bar:not(.is-cta) .bar__cta{display:none}
.js .bar.is-cta .bar__cta{animation:bar-cta .42s var(--ease)}
@keyframes bar-cta{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:767px){.bar.is-cta .bar__count{display:none}.bar__mark{height:13px}}
@media (min-width:768px){.bar__txt{display:block}}
@media (max-width:1023px) and (min-width:768px){.bar__txt{display:none}}

/* HERO SCENE ============================================================== */
.scene{position:relative;isolation:isolate;overflow:hidden;background:var(--v);color:var(--ink);text-align:left;--fg:var(--ink);--fg2:var(--ink);--line:#16130f40;--focus:var(--ink);--mark:var(--cream);--btn-b:var(--ink);--btn-bh:var(--ink-2);--btn-on:var(--cream)}
.scene__stage{position:relative;width:calc(100% - var(--gutter)*2);max-width:1560px;margin-inline:auto;padding-block:clamp(28px,4vh,56px) 0}
.scene__copy{position:relative;z-index:3}
.audience{margin-bottom:14px;font-size:clamp(15px,.9rem + .2vw,17px);line-height:1.35;font-weight:600;color:var(--ink);text-wrap:balance}
.scene .display{font-size:clamp(45px,12vw,58px);line-height:.98}
.scene .lede{margin-top:18px;max-width:34em;color:var(--ink)}
.scene .cta,.scene__do{margin-top:22px}
.scene__do{display:flex;flex-direction:column;gap:14px}
.scene .micro{color:var(--ink)}
/* the art: chevron, Frank, phone. Frank's image is as tall as the art, so the hero's bottom edge always crops him */
.scene__art{--art:612px;position:relative;z-index:1;height:var(--art);margin:18px calc(var(--gutter)*-1) 0}
.scene__geo{position:absolute;z-index:0;left:0;right:0;bottom:0;top:0;pointer-events:none;color:var(--ink)}
.scene__geo svg{position:absolute;left:66%;top:96px;width:216%;max-width:none;height:auto;transform:translateX(-50%)}
.scene__geo path{fill:currentColor}
.scene__host{position:absolute;z-index:1;left:77%;top:0;width:var(--art);max-width:none;transform:translateX(-50%)}
.scene__host img{width:100%;height:auto;aspect-ratio:1}
.scene__phone{position:absolute;z-index:2;left:var(--gutter);top:44px;width:226px}
.scene__glow,.scene__badge{display:none}
@media (min-width:521px) and (max-width:979px){.scene__art{--art:660px}.scene__host{left:64%}.scene__geo svg{left:60%;top:110px;width:150%}.scene__phone{width:272px;top:90px}}
@media (min-width:980px){
  .scene__stage{position:static;min-height:calc(100svh - var(--barh));display:flex;padding-block:clamp(36px,6vh,76px) clamp(36px,5vh,64px)}
  .scene__copy{width:62%;align-self:center}
  .audience{margin-bottom:20px}
  .scene .display{font-size:clamp(58px,6.5vw,108px);line-height:.98}
  .scene .lede{margin-top:clamp(18px,2.6vh,30px);max-width:30em}
  .scene__do{flex-direction:row;align-items:center;gap:22px;margin-top:clamp(22px,3.4vh,40px)}
  .scene .btn{width:auto;min-height:66px}
  .scene .micro{max-width:40ch}
  .scene__art{position:absolute;right:0;top:0;bottom:0;width:53%;height:auto;margin:0}
  .scene__geo svg{left:50%;top:clamp(120px,23vh,240px);width:172%}
  .scene__host{left:50%;top:clamp(10px,2.4vh,28px);width:auto;height:calc(100% + 20px);aspect-ratio:1}
  .scene__phone{left:auto;right:clamp(10px,1.7vw,34px);top:auto;bottom:-22px;width:clamp(226px,17.8vw,290px)}
}
@media (min-width:1600px){.bar__in{max-width:1560px}}
/* older flat heroes (host and text are siblings inside the stage) */
.scene__stage>.scene__host{position:relative;left:auto;top:auto;width:min(260px,62vw);height:180px;overflow:hidden;transform:none;margin-bottom:18px}
@media (min-width:980px){.scene__stage:has(>.scene__host){display:block;padding-right:36%}.scene__stage>.scene__host{position:absolute;right:0;left:auto;top:0;bottom:0;width:34%;height:auto;margin:0}}
.scene__stage>.scene__geo{display:none}
.scene>.scene__geo svg{left:78%;top:18%;width:56%}
@media (max-width:979px){.scene>.scene__geo{display:none}}
.scene--slim .scene__stage{min-height:0;display:block;padding-block:clamp(36px,6vw,84px)}
.scene--split .scene__stage{align-items:center}
/* page load: one orchestrated entrance, then nothing moves */
@media (prefers-reduced-motion:no-preference){
  .js .scene [data-in]{animation:rise 1s var(--ease) both;animation-delay:calc(var(--i,0)*80ms + 80ms)}
  .js .scene__geo{animation:chev-rise 1.3s var(--ease) both .05s}
  .js .scene__host[data-in]{animation-name:rise-host;animation-duration:1.25s}
  .js .scene__phone[data-in]{animation-name:phone-in;animation-duration:1.1s}
  .js .scene .stub[data-in],.js .scene .stub{animation:stub-in .9s var(--ease) both;animation-delay:.62s}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rise-host{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes chev-rise{from{transform:translateY(90px)}to{transform:none}}
@keyframes phone-in{from{opacity:0;transform:translate(26px,44px)}to{opacity:1;transform:none}}
@keyframes stub-in{from{opacity:0;transform:translateY(16px) rotate(4deg)}to{opacity:1;transform:rotate(var(--tilt,-2deg))}}
@keyframes fade{to{opacity:1}}

/* TICKET STUB ============================================================= */
.stub{--n:9px;--px:88px;--tilt:-2deg;display:grid;grid-template-columns:var(--px) auto;align-items:stretch;width:max-content;max-width:100%;background:var(--cream);color:var(--ink);transform:rotate(var(--tilt));
  -webkit-mask:radial-gradient(circle var(--n) at var(--px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at var(--px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--n) at var(--px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at var(--px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.stub__d{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:11px 8px;border-right:1.5px dashed #16130f55;font-family:var(--f-disp);font-stretch:112%}
.stub__d b{font-size:37px;line-height:.92;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stub__d i{margin-top:3px;font-style:normal;font-size:12.5px;line-height:1;font-weight:700}
.stub__t{display:flex;flex-direction:column;justify-content:center;padding:11px 20px 11px 16px;font-size:13.5px;line-height:1.36;font-weight:500}
.stub__t strong{font-family:var(--f-disp);font-stretch:112%;font-size:16.5px;line-height:1.2;font-weight:800;letter-spacing:-.012em}
@media (max-width:979px){.stub{--tilt:-1deg}}

/* TAG (old live pill, flat now) =========================================== */
.livepill{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:9px 13px;border-radius:3px;background:var(--ink);color:var(--cream);font-size:13.5px;line-height:1.1;font-weight:600;white-space:nowrap}
.livepill__dot{position:relative;width:8px;height:8px;flex:none;background:var(--v)}
.livepill__live{color:var(--cream)}
.livepill__sep{width:12px;height:1px;background:currentColor;opacity:.4}
.livepill__bar{width:1px;height:13px;background:currentColor;opacity:.4}
.livepill--ok .livepill__dot{display:grid;place-items:center;width:18px;height:18px;background:var(--v)}
.livepill--ok .livepill__dot svg{width:13px;height:13px}
.livepill--ok .livepill__dot path{fill:none;stroke:var(--ink);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}

/* CHEVRON LIST ============================================================ */
.chevs li{position:relative;padding-left:1.7em}
.chevs li::before{content:'';position:absolute;left:0;top:.36em;width:1.05em;height:.57em;background:var(--chev-c,var(--v));-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transform:rotate(90deg)}

/* NUMBERED ROWS =========================================================== */
.rows{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:0 14px;padding-block:24px 26px;border-top:1px solid var(--line)}
.row__n{font:800 clamp(38px,1.8rem + 2.6vw,70px)/.95 var(--f-disp);font-stretch:112%;font-variant-numeric:tabular-nums;letter-spacing:-.035em;color:var(--v)}
.row__t{font-size:var(--t-h3);line-height:1.18;letter-spacing:-.018em;color:var(--fg);text-wrap:pretty}
.row__d{margin-top:8px;font-size:clamp(15.5px,.9rem + .15vw,17px);line-height:1.52;color:var(--fg2);max-width:58ch;text-wrap:pretty}
@media (min-width:768px){.row{grid-template-columns:112px minmax(0,1fr);gap:0 20px;padding-block:32px 34px}}

/* PROOF STRIP (results) =================================================== */
.results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
.result{display:block;width:100%;color:var(--fg);text-align:left;-webkit-tap-highlight-color:transparent}
.result__ph{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--ink-2);margin-bottom:12px}
.result__ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.result__ph::after{content:'';position:absolute;left:0;bottom:0;width:40px;height:40px;background:var(--v) var(--play) 55% 50%/18px no-repeat;transition:width var(--t-med) var(--ease)}
.result__who{display:block;font-size:14.5px;line-height:1.3;font-weight:600;color:var(--fg2)}
.result__claim{display:block;margin-top:3px;font:800 clamp(19px,1rem + .85vw,28px)/1.1 var(--f-disp);font-stretch:112%;letter-spacing:-.022em;color:var(--fg);text-wrap:balance}
.result__q{display:block;margin-top:7px;font-size:14px;line-height:1.42;font-weight:400;color:var(--fg2);text-wrap:pretty}
.result__meta{display:block;margin-top:7px;font-size:13px;line-height:1.3;color:var(--fg2);font-variant-numeric:tabular-nums}
@media (hover:hover){.result:hover .result__ph img{transform:scale(1.04)}.result:hover .result__ph::after{width:56px}}
.result:focus-visible{outline-offset:4px}
@media (min-width:860px){.results{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px)}}
.lang{margin-top:8px;font-size:13px;line-height:1.5;color:var(--fg2);max-width:88ch}
.disclosure{margin-top:24px;font-size:13.5px;line-height:1.56;color:var(--fg2);max-width:88ch;text-wrap:pretty}

/* TIMELINE ================================================================ */
.tl{position:relative;margin-top:clamp(34px,5vw,72px)}
.tl__i{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding-block:clamp(16px,2.2vw,30px);border-top:1px solid var(--line)}
.tl__t{display:block;font-size:clamp(70px,14.4vw,204px);line-height:.92;letter-spacing:-.05em;font-stretch:112%;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fg)}
.tl__p{font-size:clamp(19px,1rem + .75vw,27px);line-height:1.24;font-weight:500;letter-spacing:-.012em;color:var(--fg);text-wrap:pretty}
.tl__p small{display:block;margin-top:6px;font-size:.72em;line-height:1.35;font-weight:400;letter-spacing:0;color:var(--fg2)}
.tl__gap{display:flex;align-items:center;gap:12px;padding-block:13px;border-top:1px solid var(--line);font-size:15px;line-height:1.3;font-weight:600;color:var(--v)}
.tl__gap::before{content:'';flex:none;width:21px;height:11.3px;background:var(--v);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transform:rotate(180deg)}
.tl__i--end .tl__t{color:var(--v)}
.tl__i--end{border-bottom:1px solid var(--line)}
@media (min-width:980px){
  .tl__i{grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:clamp(32px,5vw,84px);align-items:end}
  .tl__p{max-width:21em;padding-bottom:.55em}
  .tl__i:nth-of-type(even){padding-left:clamp(60px,10vw,180px)}
}

/* TAKE AWAY (asymmetric) ================================================== */
.take{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,56px)}
.take__head .lede{margin-top:16px;max-width:30em}
.take__lead{position:relative;isolation:isolate;overflow:hidden;background:var(--v);color:var(--ink);padding:clamp(24px,3.4vw,56px);--fg:var(--ink);--fg2:var(--ink)}
.take__lead::after{content:'';position:absolute;z-index:-1;right:-14%;bottom:-16%;width:68%;aspect-ratio:320/172;background:var(--v-deep);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.take__k{display:block;margin-bottom:clamp(30px,6vw,92px);font-size:15px;line-height:1.3;font-weight:600}
.take__lead h3{font-size:clamp(30px,1.1rem + 2.7vw,60px);line-height:1.03;letter-spacing:-.03em;text-wrap:balance}
.take__lead p{margin-top:16px;max-width:30em;font-size:clamp(16.5px,.95rem + .25vw,19px);line-height:1.46;font-weight:500}
.take__a h3,.take__b h3{margin-bottom:10px}
.take__a p,.take__b p{color:var(--fg2);max-width:34em;text-wrap:pretty}
.take__steps{margin-top:18px;font:800 clamp(25px,1.1rem + 1.3vw,38px)/1.2 var(--f-disp);font-stretch:112%;letter-spacing:-.025em;color:var(--fg)}
.take__steps li+li{margin-top:2px}
.take__steps.chevs li{padding-left:1.02em}
.take__steps.chevs li::before{left:-.2em;top:.36em;width:.9em;height:.49em}
.take .discover__note{border-top:1px solid var(--line);padding-top:18px;margin:0}
@media (min-width:980px){
  .take{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(30px,3vw,48px) clamp(16px,2vw,30px)}
  .take__head{grid-column:1/9;margin-bottom:clamp(6px,1.4vw,26px)}
  .take__lead{grid-column:1/8;grid-row:2/4;min-height:560px;display:flex;flex-direction:column}
  .take__k{margin-bottom:auto;padding-bottom:40px}
  .take__a{grid-column:9/13;grid-row:2;padding-top:6px}
  .take__b{grid-column:9/13;grid-row:3;align-self:end;border-top:1px solid var(--line);padding-top:24px}
  .take .discover__note{grid-column:1/8}
}

/* STORY CARDS (vertical video, offre.html) ================================ */
.stories{display:grid;grid-auto-flow:column;grid-auto-columns:min(66vw,250px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);padding-bottom:8px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{position:relative;aspect-ratio:9/16;overflow:hidden;scroll-snap-align:center;background:var(--ink);color:var(--cream);isolation:isolate}
.story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform var(--t-slow) var(--ease)}
.story::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#16130f00 44%,#16130fe6)}
.story::after{content:'';position:absolute;left:12px;right:12px;top:12px;height:2px;background:#f6f0e666}
.story__txt{position:absolute;left:16px;right:16px;bottom:16px;display:block}
.story__txt span{display:block;font-weight:600;font-size:13px;color:var(--v-hi)}
.story__txt strong{display:block;margin-top:3px;font:800 19px/1.14 var(--f-disp);font-stretch:112%;letter-spacing:-.02em}
@media (hover:hover){.story:hover img{transform:scale(1.03)}}
@media (min-width:900px){.stories{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0}}

/* VIDEO POSTER ============================================================ */
.vposter{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--ink);color:var(--cream);isolation:isolate}
.vposter img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.vposter::after{content:'';position:absolute;inset:0;background:linear-gradient(#16130f00 50%,#16130fb8)}
.vposter__play{position:absolute;z-index:1;left:0;bottom:0;width:72px;height:72px;background:var(--v) var(--play) 55% 50%/30px no-repeat;transition:width var(--t-med) var(--ease)}
.vposter__t{position:absolute;z-index:1;left:88px;right:70px;bottom:14px;font-weight:600;font-size:15px;text-align:left}
.vposter__d{position:absolute;z-index:1;right:14px;bottom:13px;padding:4px 8px;background:var(--ink);font:600 12.5px/1.2 var(--f-sans);font-variant-numeric:tabular-nums}
@media (hover:hover){.vposter:hover .vposter__play{width:92px}.vposter:hover img{transform:scale(1.02)}}

/* HOST ==================================================================== */
.host{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
.host__ph{position:relative;overflow:hidden;background:var(--ink-2)}
.host__ph img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%}
.host__cap{margin-top:12px;font-size:13.5px;line-height:1.4;color:var(--fg2)}
.host__cap i{font-style:normal;margin-inline:.45em;opacity:.55}
.host__lead{margin-top:20px;font-size:clamp(18px,1rem + .5vw,23px);line-height:1.38;font-weight:500;color:var(--fg);max-width:32em;text-wrap:pretty}
.host__why{margin-top:26px;font-size:clamp(16px,.9rem + .2vw,18px);line-height:1.56;color:var(--fg2);max-width:36em;text-wrap:pretty}
.host__why strong{color:var(--fg);font-weight:600}
.stats{margin-top:28px;border-bottom:1px solid var(--line)}
.stats>div{display:grid;grid-template-columns:minmax(118px,auto) minmax(0,1fr);gap:14px;align-items:baseline;padding-block:14px;border-top:1px solid var(--line)}
.stats dt{font:800 clamp(30px,1.3rem + 1.6vw,50px)/1 var(--f-disp);font-stretch:112%;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--fg);white-space:nowrap}
.stats dd{font-size:14.5px;line-height:1.42;color:var(--fg2)}
@media (min-width:980px){.host{grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,96px);align-items:center}}
/* the bleed version: the photo owns a whole half of the screen */
.sec--host{padding-block:0}
.host--bleed{gap:0}
.host--bleed .host__ph img{aspect-ratio:1/1.08}
.host--bleed>div:first-child{position:relative}
.host--bleed .host__cap{position:absolute;left:0;bottom:0;margin:0;padding:9px 14px;background:var(--ink);color:var(--cream)}
.host--bleed .host__body{padding:clamp(40px,8vw,64px) var(--gutter) clamp(56px,10vw,80px)}
@media (min-width:980px){
  .host--bleed{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
  .host--bleed .host__ph{height:100%}
  .host--bleed .host__ph img{position:absolute;inset:0;aspect-ratio:auto}
  .host--bleed .host__body{align-self:center;padding:clamp(64px,8vw,132px) var(--gutter) clamp(64px,8vw,132px) clamp(48px,6vw,104px);min-height:clamp(640px,62vw,900px);display:flex;flex-direction:column;justify-content:center}
}

/* COMPARISON (an editorial spread, not a grey X column) =================== */
.cmp{width:100%;border-collapse:collapse;border-spacing:0;font-size:16px;line-height:1.36}
.cmp th{text-align:left;font-weight:600;vertical-align:bottom}
.cmp thead th{padding:0 0 16px}
.cmp__h{display:block;font:800 clamp(22px,1rem + 1.3vw,36px)/1.05 var(--f-disp);font-stretch:112%;letter-spacing:-.025em}
.cmp thead th:first-child .cmp__h,.cmp thead .cmp__oldh .cmp__h{font-family:var(--f-serif);font-style:italic;font-weight:400;font-stretch:100%;letter-spacing:-.01em;font-size:clamp(25px,1.1rem + 1.45vw,40px);color:var(--fg2)}
.cmp__topic{font-size:14px;line-height:1.3;font-weight:600;color:var(--fg2);vertical-align:top!important}
.cmp td{vertical-align:top}
.cmp__old{font-family:var(--f-serif);font-style:normal;font-size:clamp(21px,1.1rem + .55vw,27px);line-height:1.18;color:var(--muted);letter-spacing:-.006em;text-wrap:pretty}
.sec--black .cmp__old,.sec--navy .cmp__old,.sec--ink .cmp__old{color:var(--muted-dark)}
.cmp__new{background:var(--v);color:var(--ink);font-family:var(--f-disp);font-stretch:104%;font-size:clamp(16.5px,.95rem + .3vw,19px);line-height:1.26;font-weight:700;letter-spacing:-.012em;text-wrap:pretty}
.cmp .cmp__newh{background:var(--v);color:var(--ink)}
.glyph-x,.glyph-ok{position:relative;padding-left:26px}
.glyph-x::before,.glyph-ok::before{content:'';position:absolute;left:0;top:.42em;width:15px;height:8px;background:currentColor;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.glyph-x::before{transform:rotate(180deg);opacity:.5}
/* phones: each topic is a stacked pair, the year that repeats above, the new one as a vermilion block */
@media (max-width:767px){
  .cmp,.cmp tbody,.cmp tr,.cmp td,.cmp tbody th{display:block}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cmp tbody tr{padding-block:20px 0;border-top:1px solid var(--line)}
  .cmp tbody tr:first-child{border-top:1px solid var(--fg)}
  .cmp__topic{display:block;margin-bottom:6px}
  .cmp__old{padding-bottom:14px}
  .cmp__new{padding:15px 16px 16px;margin-bottom:20px}
}
@media (min-width:768px){
  .cmp thead th{padding:0 clamp(18px,2.2vw,34px) clamp(18px,2vw,28px)}
  .cmp thead th.cmp__corner{padding-inline:0}
  .cmp .cmp__newh{padding-top:clamp(20px,2.4vw,34px)}
  .cmp tbody tr>*{padding:clamp(16px,1.7vw,24px) clamp(18px,2.2vw,34px);border-top:1px solid var(--line)}
  .cmp tbody tr>.cmp__new{border-top-color:#16130f33}
  .cmp .cmp__topic{width:13%;padding-left:0;padding-top:calc(clamp(16px,1.7vw,24px) + .3em)}
  .cmp__old{width:40%}
  .cmp tbody tr:last-child>.cmp__new{padding-bottom:clamp(24px,2.6vw,38px)}
}

/* AI CONVERSATION PHONE =================================================== */
.phone{position:relative;width:min(318px,100%);margin-inline:auto;padding:8px;border-radius:40px;background:var(--ink);box-shadow:0 0 0 1px var(--line-dark)}
.phone__screen{position:relative;border-radius:33px;overflow:hidden;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;height:626px}
.phone__top{display:flex;justify-content:space-between;align-items:center;padding:12px 24px 4px;font:600 13px/1 var(--f-sans);font-variant-numeric:tabular-nums}
.phone__top svg{width:42px;height:11px}
.phone__island{position:absolute;left:50%;top:9px;width:76px;height:22px;margin-left:-38px;border-radius:13px;background:var(--ink)}
.phone__who{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 12px 9px;border-bottom:1px solid var(--line-warm);background:var(--cream)}
.phone__av{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--cream);font:600 13px/34px var(--f-sans);text-align:center}
.phone__name{font-size:12px;font-weight:600;line-height:1.2}
.phone__sub{font-size:10.5px;line-height:1.2;color:var(--muted)}
.thread{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px;overflow:hidden}
.msg{position:relative;display:flex;font-size:13.5px;line-height:1.34}
.msg__b{display:block;max-width:82%;padding:7px 11px;border-radius:15px;letter-spacing:-.003em}
.msg--in{justify-content:flex-start}
.msg--in .msg__b{background:#ebe4d7;color:var(--ink);border-bottom-left-radius:4px}
.msg--out{justify-content:flex-end}
.msg--out .msg__b{background:var(--v);color:var(--ink);font-weight:500;border-bottom-right-radius:4px}
.msg--sys{justify-content:center;margin-top:5px}
.msg--sys .msg__b{position:relative;max-width:96%;padding:7px 11px 7px 28px;background:var(--ink);color:var(--cream);font-size:12px;font-weight:600;border-radius:5px;line-height:1.28}
.msg--sys .msg__b::before{content:'';position:absolute;left:10px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--v);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 13 5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 13 5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat}
.msg__from{display:block;margin:3px 0 -2px;padding-right:6px;text-align:right;font-size:10.5px;font-weight:600;color:var(--muted)}
/* thread states, set by system.js */
.thread.is-armed .msg,.thread.is-armed .msg__from{opacity:0}
.thread .msg.is-on,.thread .msg__from.is-on{opacity:1}
.thread .msg.is-on:not(.is-still) .msg__b{animation:bubble .42s var(--ease) both}
.msg--in .msg__b{transform-origin:0 100%}
.msg--out .msg__b{transform-origin:100% 100%}
@keyframes bubble{from{transform:scale(.72) translateY(8px);opacity:0}to{transform:none;opacity:1}}
.typing{position:absolute;top:0;display:flex;gap:4px;padding:10px 12px;border-radius:15px;background:#ebe4d7}
.typing--out{right:0;background:var(--v);border-bottom-right-radius:4px}
.typing--in{left:0;border-bottom-left-radius:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.4;animation:dots 1.1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.14s}
.typing i:nth-child(3){animation-delay:.28s}
@keyframes dots{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}
.phone__bar{display:flex;align-items:center;gap:7px;padding:8px 10px 15px;border-top:1px solid var(--line-warm)}
.phone__field{flex:1;padding:6px 12px;border:1px solid var(--line-warm);border-radius:16px;font-size:12px;line-height:1.3;color:var(--muted)}
.phone__send{width:26px;height:26px;border-radius:50%;background:var(--v) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316130f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6m-5.5 5L12 5.5 17.5 11'/%3E%3C/svg%3E") center/15px no-repeat}
.phone--short .phone__screen{height:auto;min-height:0}
.phone--short .thread{flex:none}
.phone--short .phone__av{display:none}
.phone--short .phone__who{padding-block:9px 7px}
.scene__phone .msg{font-size:12.8px;line-height:1.3}
@media (min-width:980px){.scene__phone .msg{font-size:13.5px;line-height:1.33}}
.phone--short{border-radius:36px;padding:7px}
.phone--short .phone__screen{border-radius:30px;padding-bottom:34px}
@media (min-width:980px){.phone--short .phone__screen{padding-bottom:70px}}
.fictif{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12.5px;line-height:1.4;color:var(--fg2);text-align:center}
.fictif button{min-height:44px;padding-inline:6px;font-weight:600;color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
/* in the hero the label is a tab on top of the phone, always readable over Frank or the chevron */
.scene__phone .fictif{justify-content:flex-start;gap:8px;width:max-content;max-width:100%;margin:0 0 7px 14px;padding:0 4px 0 11px;background:var(--ink);color:var(--cream);border-radius:3px;font-size:12px;--focus:var(--cream)}
.scene__phone .fictif button{min-height:30px;padding-block:7px;color:var(--cream);position:relative}
.scene__phone .fictif button::before{content:'';position:absolute;inset:-7px 0}

/* DISCOVER LAYOUT (rows + phone), kept for pages that still use it ======== */
.discover__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px;margin-bottom:30px}
.discover__head .h2{max-width:19em}
.discover{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
.discover__note{margin-top:20px;font-size:15px;line-height:1.52;color:var(--fg2);max-width:60ch;text-wrap:pretty}
.discover__note strong{color:var(--fg);font-weight:600}
.discover__phone{position:relative}
@media (min-width:980px){
  .discover__head{margin-bottom:42px}
  .discover{grid-template-columns:minmax(0,1fr) 318px;gap:84px;align-items:start}
}

/* CLOSER ================================================================== */
.closer{display:grid;grid-template-columns:minmax(0,1fr);gap:34px}
.closer__when{margin-top:18px;font-size:clamp(16px,.95rem + .25vw,19px);line-height:1.4;font-weight:500;color:var(--fg2)}
.closer>.h2{font-size:clamp(38px,1.3rem + 4.4vw,92px);line-height:1;text-wrap:pretty}
.mark--br{display:block}
.closer .cta{align-items:stretch}
.closer .btn{width:100%}
.closer .micro{text-align:left}
@media (min-width:980px){.closer{grid-template-columns:minmax(0,1fr) 420px;gap:clamp(32px,4vw,64px) clamp(40px,6vw,96px);align-items:end}.closer>.h2{grid-column:1/-1}}
.countdown{display:flex;margin-top:26px;font-variant-numeric:tabular-nums}
.cd{min-width:62px;padding-right:18px;margin-right:18px;border-right:1px solid var(--line)}
.cd:last-child{border:0;margin:0;padding:0}
.cd b{display:block;font:800 clamp(34px,1.3rem + 2.8vw,68px)/1 var(--f-disp);font-stretch:112%;font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--fg)}
.cd span{display:block;margin-top:6px;font-size:13px;line-height:1;font-weight:500;color:var(--fg2)}
@media (max-width:420px){.cd{min-width:0;padding-right:13px;margin-right:13px}}

/* LOCKUP ================================================================== */
.lockup{display:inline-flex;align-items:center;gap:10px;font:800 15px/1 var(--f-disp);font-stretch:112%;letter-spacing:-.015em;white-space:nowrap;color:var(--lk-t,var(--cream))}
.lockup b{font-weight:800}
.lockup svg{width:1.55em;height:1.4em;flex:none}
.lockup .a{fill:var(--lk-a,var(--cream))}.lockup .c{fill:var(--lk-c,var(--v))}
.lockup--light{--lk-t:var(--ink);--lk-a:var(--ink);--lk-c:var(--v)}

/* END STATES: replace a page once its date has passed ===================== */
.endstate .wrap{max-width:760px}
.endstate .lede{margin-top:16px}
.endstate__go{margin-top:26px}
.endstate form{display:grid;gap:12px;max-width:440px;margin:26px 0 0}
.endstate .field{margin:0}
.endstate .field__l{color:var(--ink)}
.endstate__ok{margin:24px 0 0;max-width:440px;padding:14px 16px;background:var(--ink);color:var(--cream);font-size:15px;line-height:1.5}
.endstate__ok:focus,.endstate__ok:focus-visible{outline:0}

/* FOOTER ================================================================== */
.foot{--fg:var(--cream);--fg2:var(--muted-dark);--line:var(--line-dark);--focus:var(--cream);position:relative;z-index:1;background:var(--ink);color:var(--fg2);padding:clamp(40px,4vw,60px) 0 76px;font-size:13px;line-height:1.58}
.foot__top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.foot__badge{width:clamp(150px,16vw,196px);height:auto;flex:none}
.foot__event{text-align:right;color:var(--cream);font-size:13.5px;line-height:1.45;font-weight:500}
.foot__event span{display:block;color:var(--fg2);font-size:13px;font-weight:400}
.foot__legal{margin-top:22px;display:grid;gap:10px;max-width:88ch}
.foot__maquette{color:var(--cream)}
.foot a{color:inherit;display:inline-flex;align-items:center;min-height:44px}

/* MODAL =================================================================== */
.modal{width:min(480px,100% - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:4px;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);--fg:var(--ink);--fg2:var(--muted);--line:var(--line-warm);--focus:var(--ink);--mark:var(--v);--btn-b:var(--v);--btn-bh:var(--v-hi);--btn-on:var(--ink)}
.modal::backdrop{background:#16130fd9}
.modal__in{position:relative;padding:30px 22px 22px}
.modal__x{position:absolute;z-index:3;right:6px;top:6px;display:grid;place-items:center;width:44px;height:44px;border-radius:4px;color:var(--ink);transition:background-color var(--t-fast) linear}
.modal__x svg{width:20px;height:20px}
@media (hover:hover){.modal__x:hover{background:#16130f14}}
.modal__when{display:flex;align-items:center;gap:9px;padding-right:32px;font-size:14px;line-height:1.3;font-weight:600;color:var(--muted)}
.modal__when i{width:8px;height:8px;background:var(--v);flex:none}
.modal__score{margin:6px 0 -8px;font-size:14px;line-height:1.4;font-weight:600;color:var(--ink)}
.modal__t{margin:10px 0 20px;padding-right:20px;font-size:clamp(25px,1.2rem + .9vw,34px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.modal__p{margin:-8px 0 18px;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.modal__lock{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:12.5px;line-height:1.42;color:var(--muted);text-align:left}
.modal__lock svg{flex:none;width:14px;height:14px;margin-top:2px}
@media (min-width:768px){.modal__in{padding:36px 36px 26px}}
@media (prefers-reduced-motion:no-preference){
  .modal[open]{animation:modal-in .36s var(--ease)}
  .modal[open]::backdrop{animation:fade-in .24s linear}
  .modal.is-closing{animation:modal-out .16s linear forwards}
  .modal.is-closing::backdrop{animation:fade-out .16s linear forwards}
}
@keyframes modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes modal-out{to{opacity:0;transform:translateY(6px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}

/* the ticket: the stub prints first, the perforation holds it to the form */
.modal--ticket{--n:12px;--px:0px;--py:0px;width:min(880px,100% - 20px);max-height:calc(100dvh - 20px);border-radius:5px;overflow:hidden;background:var(--paper)}
.modal--ticket[open]{display:flex}
.modal--ticket .modal__in{display:flex;flex-direction:column;width:100%;max-height:calc(100dvh - 20px);padding:0;min-height:0}
.tk{--focus:var(--ink);position:relative;isolation:isolate;overflow:hidden;flex:none;background:var(--v);color:var(--ink)}
.tk::after{content:'';position:absolute;z-index:-1;background:var(--v-deep);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat}
.tk__logo{width:auto;height:14px;align-self:flex-start}
.tk__k{font-size:13px;line-height:1.3;font-weight:600}
.tk__date{font-family:var(--f-disp);font-stretch:118%;font-weight:800;letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.tk__date small{display:block;font-size:.3em;line-height:1.1;letter-spacing:-.018em;margin-top:.22em}
.tk__rows{font-size:14px;line-height:1.3}
.tk__rows div{display:flex;justify-content:space-between;gap:12px;padding-block:7px;border-top:1px solid #16130f40}
.tk__rows dt{font-weight:400}
.tk__rows dd{font-weight:600;text-align:right}
.tk__to{display:block;min-width:0}
.tk__to small{display:block;font-size:12.5px;line-height:1.3;font-weight:500}
.tk__to b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:27px;line-height:1.12}
.tk__stamp{position:absolute;display:grid;place-items:center;padding:5px 11px;border:2.5px solid var(--ink);border-radius:3px;font:800 15px/1 var(--f-disp);font-stretch:112%;opacity:0;transform:rotate(-9deg) scale(1.5)}
.modal:has(.btn.is-busy) .tk__stamp{opacity:1;transform:rotate(-9deg);transition:opacity .08s linear,transform .22s var(--ease)}
.modal__form{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 20px 16px}
.modal--ticket .modal__t{margin:0 0 16px;padding-right:0}
.modal--ticket .modal__t .mark{display:block}
.modal--ticket .field{margin-bottom:11px}
.modal--ticket .field__l{margin-bottom:2px}
.modal--ticket .field__i{height:46px;padding-inline:0;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;font-weight:500}
.modal--ticket .field__i:focus,.modal--ticket .field__i:focus-visible{box-shadow:0 1.5px 0 var(--v);border-bottom-color:var(--v)}
.modal--ticket .field.is-bad .field__i{box-shadow:none;border-bottom-color:var(--red)}
.modal--ticket .tel__p{left:0;padding:0 10px 0 0;background:transparent;border:0;border-radius:0}
.modal--ticket .tel .field__i{padding-left:30px}
.modal--ticket .check{padding-block:3px 12px;font-size:12.5px;line-height:1.38}
/* phones: a short stub on top. The hole sits on the fold between stub and form */
@media (max-width:767px){
  .modal--ticket{--py:112px;
    -webkit-mask:radial-gradient(circle var(--n) at 0 var(--py),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% var(--py),#0000 97%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle var(--n) at 0 var(--py),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--n) at 100% var(--py),#0000 97%,#000) right/51% 100% no-repeat}
  .tk{height:var(--py);padding:13px 46px 12px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 16px;border-bottom:2px dashed #16130f66}
  .tk::after{right:-34px;top:12px;width:190px;aspect-ratio:320/172}
  .tk__logo,.tk__k,.tk__rows{display:none}
  .tk__date{font-size:56px}
  .tk__to b{font-size:23px}
  .tk__stamp{right:12px;bottom:12px}
  .modal--ticket .modal__x{top:4px;right:4px}
}
@media (min-width:768px){
  .modal--ticket{--px:316px;
    -webkit-mask:radial-gradient(circle var(--n) at var(--px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at var(--px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
    mask:radial-gradient(circle var(--n) at var(--px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--n) at var(--px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
  .modal--ticket .modal__in{flex-direction:row}
  .tk{width:var(--px);padding:26px 26px 22px;display:flex;flex-direction:column;border-right:2px dashed #16130f66}
  .tk::after{left:-50%;bottom:-6%;width:200%;aspect-ratio:320/172}
  .tk__k{margin-top:14px}
  .tk__date{margin-top:auto;padding-top:64px;font-size:112px}
  .tk__rows{margin-top:20px}
  .tk__to{margin-top:12px;padding-top:12px;border-top:1.5px solid var(--ink)}
  .tk__stamp{right:22px;top:66px}
  .modal__form{flex:1;padding:34px 36px 22px}
  .modal--ticket .modal__t{margin-bottom:20px;padding-right:22px}
}
@media (prefers-reduced-motion:no-preference){
  .modal--ticket[open]{animation:ticket-print .62s var(--ease)}
  .modal--ticket.is-closing{animation:modal-out .16s linear forwards}
}
@keyframes ticket-print{from{clip-path:inset(0 0 100% 0);transform:translateY(-24px)}to{clip-path:inset(0);transform:none}}

/* STORY PLAYER, injected by system.js ===================================== */
.storyd{width:min(400px,100% - 16px);max-height:calc(100dvh - 16px);padding:0;border:0;border-radius:4px;overflow:auto;background:var(--ink);color:var(--cream);--focus:var(--cream)}
.storyd::backdrop{background:#16130fe6}
.storyd__v{position:relative;background:#000}
.storyd video{width:100%;max-height:calc(100dvh - 150px);aspect-ratio:9/16;object-fit:contain;background:#000}
.storyd__t{padding:12px 16px 14px}
.storyd__who{font:800 17px/1.2 var(--f-disp);font-stretch:112%;letter-spacing:-.015em;padding-right:44px}
.storyd__d{margin-top:6px;font-size:12px;line-height:1.45;color:var(--muted-dark)}
.storyd__x{position:absolute;z-index:2;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;border-radius:4px;background:var(--ink);color:var(--cream)}
.storyd__x svg{width:20px;height:20px}
@media (prefers-reduced-motion:no-preference){.storyd[open]{animation:modal-in .36s var(--ease)}}

/* FORMS =================================================================== */
.field{margin-bottom:13px}
.field__l{display:block;margin-bottom:5px;font-size:14px;line-height:1.3;font-weight:600;color:var(--ink)}
.field__l em{font-style:normal;font-weight:400;color:var(--muted)}
.field__i{display:block;width:100%;height:52px;padding:0 14px;border:1.5px solid #b9ae9b;border-radius:6px;background:#fffdf9;color:var(--ink);font-size:16px;line-height:1.2;-webkit-appearance:none;appearance:none;transition:border-color var(--t-fast) linear,box-shadow var(--t-fast) linear}
.field__i::placeholder{color:#7d7466}
.field__i:hover{border-color:#8e8473}
.field__i:focus,.field__i:focus-visible{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--v)}
.field__hint{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.field__err{display:block;margin-top:5px;font-size:13px;line-height:1.4;font-weight:600;color:var(--red)}
.field.is-bad .field__i{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.field.is-bad .field__hint{display:none}
.tel{position:relative}
.tel__p{position:absolute;left:2px;top:2px;bottom:2px;display:flex;align-items:center;padding:0 12px;border-right:1px solid var(--line-warm);border-radius:4px 0 0 4px;background:var(--cream);font:600 14px/1 var(--f-sans);color:var(--ink);pointer-events:none}
.tel .field__i{padding-left:60px;font-variant-numeric:tabular-nums}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding-block:6px 14px;font-size:13px;line-height:1.42;color:var(--muted);cursor:pointer}
.check input{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;border:1.5px solid var(--ink);border-radius:3px;background:transparent center/16px no-repeat;cursor:pointer;transition:background-color var(--t-fast) linear}
.check input:checked{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4a1c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.3 4.3 8.7-9.3'/%3E%3C/svg%3E")}
.check input:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}

/* FAQ ===================================================================== */
.faq{border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding-block:16px;font:700 clamp(17px,1rem + .35vw,21px)/1.26 var(--f-disp);font-stretch:106%;letter-spacing:-.015em;color:var(--fg);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:18px;height:10px;background:var(--v);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transform:rotate(180deg);transition:transform var(--t-med) var(--ease)}
.faq details[open] summary::after{transform:none}
.faq__a{padding-bottom:22px;max-width:68ch;color:var(--fg2);text-wrap:pretty}

/* BOTTOM CTA (mobile, optional) =========================================== */
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:var(--ink);transform:translateY(120%);transition:transform var(--t-med) var(--ease)}
.bbar .btn{min-height:54px}
.bbar.is-on{transform:none}
.bbar.is-on.is-off{transform:translateY(120%)}
@media (min-width:768px){.bbar{display:none}}

/* REVEAL ================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);transition-delay:calc(var(--i,0)*70ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}
}

/* NOTES LAYER, review only, hidden by default ============================= */
.tbc,.rnote{display:none}
.notes-on .tbc{display:inline-block;margin-inline:.45em;padding:2px 7px;border:1px dashed currentColor;border-radius:4px;background:var(--paper);color:var(--v-text);font:600 11px/1.35 var(--f-sans);font-style:normal;letter-spacing:.01em;text-transform:none;white-space:nowrap;vertical-align:middle}
.notes-on .rnote{display:block;max-width:760px;margin:18px auto;padding:11px 14px;border:1px dashed var(--v-text);border-radius:4px;background:var(--paper);color:var(--ink);font:400 13px/1.5 var(--f-sans);letter-spacing:0;text-align:left;text-transform:none}
/* Under 1400px: a slim tab in the left gutter. It opens on tap and can't sit on a button.
   From 1400px: a compact pill bottom right, in the empty margin. */
.npill{position:fixed;left:0;top:58%;z-index:45;display:flex;align-items:center;gap:6px;font:600 12px/1 var(--f-sans);color:var(--cream);--focus:var(--cream);transition:transform var(--t-med) var(--ease),opacity var(--t-med) linear}
.npill__tab{position:relative;display:grid;place-items:center;width:16px;height:48px;border-radius:0 6px 6px 0;background:var(--ink);box-shadow:0 0 0 1px var(--line-dark)}
.npill__tab::before{content:'';position:absolute;left:0;top:0;bottom:0;width:44px}
.npill__tab i,.npill__m button i{display:block;width:7px;height:7px;border-radius:50%;background:var(--muted);transition:background-color var(--t-fast) linear}
.notes-on .npill__tab i,.npill__m button[aria-pressed=true] i{background:var(--v)}
.npill__m{display:none;align-items:center;height:44px;border-radius:6px;background:var(--ink);box-shadow:0 0 0 1px var(--line-dark)}
.npill.is-open .npill__m{display:flex}
.npill__m button,.npill__m a{display:flex;align-items:center;gap:7px;height:44px;padding:0 12px;color:inherit;text-decoration:none;border-radius:6px}
.npill__m button[aria-pressed=true]{color:var(--v-hi)}
.npill__m span{width:1px;height:18px;background:var(--line-dark)}
.npill__m a{width:42px;padding:0;justify-content:center;font-size:0}
.npill__m a::before{content:'';width:14px;height:14px;background:linear-gradient(currentColor,currentColor) 0 0/6px 6px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/6px 6px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/6px 6px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/6px 6px no-repeat}
.npill.is-quiet{opacity:0;pointer-events:none;transform:translateX(-16px)}
@media (min-width:1400px){
  .npill{left:auto;right:10px;top:auto;bottom:calc(10px + env(safe-area-inset-bottom))}
  .npill__tab{display:none}
  .npill__m{display:flex}
}
@media print{.npill,.bar,.bbar{display:none}}

/* TIMELINE outro + older two column comparison tables */
.tl__out{display:grid;gap:22px;margin-top:clamp(30px,4vw,60px)}
@media (min-width:980px){.tl__out{grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,7vw,120px);align-items:start}.tl__out .h3{max-width:24em}.tl__out .micro{max-width:36ch}}
.cmp thead th:last-child{background:var(--v);color:var(--ink)}

/* Keep hero copy clear of the portrait on tablets and small laptops */
@media (min-width:980px) and (max-width:1279px){
  .scene__copy .lede{max-width:min(46vw,520px)}
  .scene__copy .micro{max-width:27vw}
  .scene__copy .scene__do{max-width:52vw;flex-wrap:wrap}
  .scene__copy h1.display{max-width:58vw}
}