@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}

/* ═══════════════════════════════════════════════════════════════
   IHERO Growth — tokens
   Same family system as IHERO Desk and IHERO Media v3: cool paper,
   navy ink (the logo's colour), white cards, one accent.
   The accent here is growth green. Measured on paper #F3F5F7:
     --grow        2.87:1  dots, lines, bars only, never small text
     --grow-large  3.78:1  large numerals only
     --grow-ink    6.01:1  small green text
     --grow-bright 10.7:1 on night: text and marks on the dark bands
   build/make.py prepends the @font-face block; edit this file, not public/css/site.css.
   ═══════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  --paper:#F3F5F7;
  --paper-2:#E7EBEF;
  --card:#FFFFFF;
  --ink:#111828;
  --ink-2:#3A4356;
  --muted:#5A6376;
  --line:#D6DBE3;
  --grow:#12A66A;
  --grow-large:#0B8F58;
  --grow-ink:#0A6B43;
  --grow-bright:#3DDC84;
  --grow-tint:#DDF3E7;
  --night:#0B0F1A;
  --night-2:#151C2C;
  --night-line:#252E42;
  --on-night:#EEF0F5;
  --on-night-2:#A3ACBF;

  --display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --body:"Source Sans 3",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --step--1:clamp(.84rem,.8rem + .15vw,.92rem);
  --step-0:clamp(1.02rem,.97rem + .25vw,1.16rem);
  --step-1:clamp(1.2rem,1.08rem + .5vw,1.5rem);
  --step-2:clamp(1.5rem,1.25rem + 1.1vw,2.2rem);
  --step-3:clamp(2rem,1.5rem + 2.3vw,3.4rem);

  --r-s:10px; --r-m:16px; --r-l:24px;
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  --header-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:720;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);letter-spacing:-.015em;line-height:1.15}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--grow);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font:500 .74rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grow);flex:none}
.sec{padding-block:clamp(3.75rem,7vw,6rem)}   /* owner flags gaps over ~200px on a ~1890x818 screen */
.sec-head{display:grid;gap:18px;max-width:780px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head p:not(.eyebrow){color:var(--ink-2);font-size:var(--step-1);line-height:1.45;max-width:54ch}
/* Wide screens: heading left, lede right, so no narrow column sits alone */
@media (min-width:980px){
  .sec-head--split{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,5vw,72px);align-items:end}
  .sec-head--split .eyebrow{grid-column:1/-1}
  .sec-head--split h2{align-self:start}
}
/* Keyword underline on every section heading: the family's move (IHERO Media v3, IHERO Desk), in green */
h1 em,h2 em{font-style:normal;background:linear-gradient(90deg,var(--grow),#59D69C) 0 94%/100% .12em no-repeat;padding-bottom:.02em;-webkit-box-decoration-break:slice;box-decoration-break:slice}
.reveal-on [data-reveal] h2 em,.reveal-on h2[data-reveal] em{transition:background-size 1s var(--ease) calc(var(--d,0s) + .35s)}
.reveal-on [data-reveal]:not(.in) h2 em,.reveal-on h2[data-reveal]:not(.in) em{background-size:0% .12em}
/* controls that only work with the script are not shown without it */
html:not(.js) .needs-js{display:none!important}
/* and the plain version they replace is not shown with it */
html.js .no-js{display:none!important}
/* hidden means hidden, whatever display a class gives the element */
[hidden]{display:none!important}
.tag{font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 9px;white-space:nowrap}

/* Reveal: only when JS is on and motion is allowed (html.reveal-on) */
.reveal-on [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.reveal-on [data-reveal].in{opacity:1;transform:none}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{--bg:var(--ink);--fg:var(--paper);position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px 0 18px;border-radius:999px;background:var(--bg);color:var(--fg);font:600 1.02rem/1 var(--body);text-decoration:none;border:0;cursor:pointer;isolation:isolate;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grow-ink);transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(17,24,40,.55)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(0) scale(.98)}
.btn .dot{width:9px;height:9px;border-radius:50%;background:var(--grow-bright);animation:ping 2.4s var(--ease) infinite;flex:none}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--light{--bg:var(--paper);--fg:var(--ink)}
.btn--light::after{background:var(--grow-bright)}
.btn--light .dot{background:var(--grow)}
.btn--ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost:hover{color:var(--paper)}
.btn--ghost::after{background:var(--ink)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;min-height:44px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1.5px no-repeat;transition:background-size .4s var(--ease)}
.link:hover{background-size:100% 1.5px}
.link .arr{transition:transform .35s var(--ease)}
.link:hover .arr{transform:translateX(3px)}
.friction{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 .8rem/1.4 var(--mono);color:var(--muted)}
.friction span{display:inline-flex;align-items:center;gap:6px}
.friction span::before{content:"";width:12px;height:1.5px;background:currentColor;opacity:.5}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%,100%{box-shadow:0 0 0 10px rgba(61,220,132,0)}}

/* "Your turn": the shared way an example becomes interactive (same pattern as IHERO Desk) */
.try{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.try-l{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px;margin-right:4px}
.try-l i{width:7px;height:7px;border-radius:50%;background:var(--grow);animation:ping 2.4s var(--ease) infinite}
.try-b{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:600 .9rem/1 var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease)}
.try-b svg{width:16px;height:16px;flex:none}
.try-b:hover{border-color:var(--ink);transform:translateY(-1px)}
.try-b[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.night .try-l{color:var(--on-night-2)}
.night .try-b{background:transparent;border-color:var(--night-line);color:var(--on-night)}
.night .try-b:hover{border-color:var(--on-night-2)}
.night .try-b[aria-pressed="true"]{background:var(--on-night);border-color:var(--on-night);color:var(--night)}

/* ── Header ──────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;height:var(--header-h);transition:background .35s,box-shadow .35s,transform .45s var(--ease)}
.hdr.scrolled{background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr.hide{transform:translateY(-100%)}
.hdr .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
/* The lockup is the same everywhere: white shield, green eyes, white name, on dark.
   On a light ground it brings its own dark plate (.brand--plate); on night it sits bare. */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;color:#fff}
.brand svg{width:20px;flex:none;transition:transform .5s var(--ease)}
.brand:hover svg{transform:rotate(-6deg) scale(1.06)}
.brand b{font:700 1.06rem/1 var(--display);letter-spacing:.01em;white-space:nowrap}
.brand--plate{padding:0 16px 0 13px;border-radius:12px;background:var(--ink);box-shadow:0 10px 22px -16px rgba(17,24,40,.7);transition:background .25s}
.brand--plate:hover{background:var(--night)}
.nav{display:flex;align-items:center;gap:6px}
.nav a:not(.btn){font-weight:600;font-size:.95rem;text-decoration:none;padding:10px 12px;border-radius:999px;color:var(--ink-2);transition:color .2s,background .2s}
.nav a:not(.btn):hover{color:var(--ink);background:var(--paper-2)}
.nav .btn{min-height:44px;padding:0 18px 0 14px;font-size:.95rem;margin-left:8px}
@media (max-width:900px){.nav a:not(.btn){display:none}}
@media (max-width:460px){.nav .btn .lbl-long{display:none}}
@media (min-width:461px){.nav .btn .lbl-short{display:none}}

/* ── Hero ────────────────────────────────────────────────── */
.hero{position:relative;padding-block:clamp(16px,2vw,24px) clamp(44px,5vw,68px);overflow:clip}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(var(--line) 1.1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 62% at 72% 46%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 62% at 72% 46%,#000 20%,transparent 75%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.hero-copy{display:grid;gap:20px;justify-items:start;container-type:inline-size}
/* Sized to its column so the two lines always stay two (widest line measured at 7.4em) */
.hero h1{font-size:clamp(2.3rem,12.4cqi,4.9rem);line-height:.98;letter-spacing:-.035em}
.hero h1 span{display:block}
.hero-lede{font-size:var(--step-1);line-height:1.45;color:var(--ink-2);max-width:44ch;text-wrap:balance}
.reveal-on .hero h1 span{opacity:0;transform:translateY(.35em);animation:rise .9s var(--ease) forwards}
.reveal-on .hero h1 span:nth-child(2){animation-delay:.12s}
@keyframes rise{to{opacity:1;transform:none}}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}

/* Three promises as tabs. The chosen one is spelled out underneath: radios and :has(), no script.
   All three sentences share one grid cell, so switching never moves the button below. */
.ticks{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px;justify-self:stretch}
.ticks-row{display:flex;flex-wrap:wrap;gap:8px}
.ticks label{position:relative;cursor:pointer}
.ticks input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.ticks label span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:.93rem;line-height:1.2;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.ticks label svg{width:16px;height:16px;color:var(--grow-large);flex:none;transition:color .25s}
.ticks label:hover span{border-color:var(--ink);transform:translateY(-1px)}
.ticks input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ticks input:checked+span svg{color:var(--grow-bright)}
.ticks input:focus-visible+span{outline:2px solid var(--grow);outline-offset:3px}
.tick-says{display:none}
@supports selector(:has(*)){
  .tick-says{display:grid;max-width:48ch}
  .tick-says p{grid-area:1/1;font-size:.97rem;line-height:1.45;color:var(--ink-2);padding-left:13px;border-left:2px solid var(--grow);visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .ticks:has(label:nth-child(1) input:checked) .tick-says p:nth-child(1),
  .ticks:has(label:nth-child(2) input:checked) .tick-says p:nth-child(2),
  .ticks:has(label:nth-child(3) input:checked) .tick-says p:nth-child(3){visibility:visible;opacity:1;transform:none}
}

/* "Works with": plain chips without the script; with it they are buttons that light up the board */
.works{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px}
.works b{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.works span,.works button{display:inline-flex;align-items:center;gap:7px;font:600 .88rem/1 var(--body);color:var(--ink-2);min-height:32px;padding:0 11px 0 9px;border-radius:999px;background:var(--paper-2);border:1.5px solid transparent}
.works svg{width:15px;height:15px;flex:none}
.works button{cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.works button:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.works button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* The stage: business picker, the board, "your turn". A soft green light sits behind the board. */
.hero-stage{position:relative;display:grid;gap:10px;min-width:0}
.hero-stage::before{content:"";position:absolute;inset:14% -5% 8%;z-index:-1;background:radial-gradient(closest-side,rgba(18,166,106,.22),transparent);filter:blur(34px);pointer-events:none}
.hbiz{display:grid;gap:9px}
/* five chips stay on one row beside the copy, even when the fifth is a long name picked further down */
.hbiz-row{display:flex;flex-wrap:wrap;gap:5px}
.hbiz .try-b{min-height:36px;padding:0 11px 0 9px;font-size:.86rem;gap:6px;white-space:nowrap}

/* The board: one week of enquiries moving from first message to booked. Resting state = the
   finished week (no script, reduced motion, screenshots); js/site.js replays it from Monday. */
.board{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 30px 60px -38px rgba(17,24,40,.45),0 2px 0 rgba(255,255,255,.6) inset;overflow:hidden}
.bd-top{display:flex;align-items:center;gap:12px;padding:9px 14px 9px 16px;border-bottom:1px solid var(--line)}
.bd-dots{display:flex;gap:5px}
.bd-dots i{width:9px;height:9px;border-radius:50%;background:var(--paper-2)}
.bd-top b{font:600 .95rem/1 var(--display);letter-spacing:-.01em}
.bd-day{font:500 .72rem/1 var(--mono);color:var(--muted);letter-spacing:.06em;margin-right:auto}
.bd-play{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ink);transition:background .2s,border-color .2s}
.bd-play:hover{border-color:var(--ink);background:var(--paper)}
.bd-play svg{width:11px;height:11px;fill:currentColor}
.bd-play[data-on="1"] .i-play,.bd-play[data-on="0"] .i-pause{display:none}
/* The seven days: a bar per day that fills as the week plays; each is a button that jumps there */
.bd-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:9px 14px 0}
.bd-days button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:6px;padding-bottom:7px;text-align:center;font:500 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-radius:6px;transition:color .2s}
.bd-days button::before{content:"";height:4px;border-radius:99px;background:var(--paper-2);transition:background .35s}
.bd-days button:hover{color:var(--ink)}
.bd-days button:hover::before{background:var(--line)}
.bd-days button.done::before{background:var(--ink)}
.bd-days button[aria-current]{color:var(--ink)}
.bd-days button[aria-current]::before{background:var(--grow)}
.bd-days button:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.bd-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--line);margin-top:2px}
.bd-top+.bd-kpis{border-top:0;margin-top:0}
.bd-kpis div{padding:9px 14px 9px;border-left:1px solid var(--line);min-width:0}
.bd-kpis div:first-child{border-left:0}
.bd-kpis small{display:block;font:500 .64rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bd-kpis b{display:block;margin-top:6px;font:720 clamp(1.2rem,.9rem + .7vw,1.45rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bd-kpis .won p{display:flex;align-items:baseline;gap:7px;margin-top:6px}
.bd-kpis .won b{color:var(--grow-large);margin:0}
.bd-kpis .won em{font:500 .7rem/1 var(--mono);font-style:normal;color:var(--muted);white-space:nowrap}
.bd-kpis b.tick{animation:tick .6s var(--ease)}
@keyframes tick{0%{transform:translateY(5px);opacity:.3}100%{transform:none;opacity:1}}
/* Three lanes, drawn like a pipeline board: cards sit straight on the ground under their heading with no
   box around a lane, so a lane that is still filling is only space. Booked alone is tinted: it is where they
   end up. A card has one height (--ld-h) and a lane has room for three, so the board never changes height. */
.board{container:board/inline-size}
.bd-cols{--ld-h:90px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:8px 6px;background:var(--paper)}
.bd-col{min-width:0;padding:6px 6px 7px;border-radius:14px}
.bd-col--won{background:color-mix(in srgb,var(--grow-tint) 62%,transparent)}
.bd-h span{margin-right:auto}
/* what the bookings are worth, like a column total */
.bd-sum{font:600 .7rem/1 var(--mono);font-style:normal;letter-spacing:0;color:var(--grow-ink)}
.bd-sum.tick{animation:tick .6s var(--ease)}
.bd-h{display:flex;align-items:center;gap:8px;font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:2px 3px 8px}
.bd-col+.bd-col .bd-h span::before{content:"→";margin-right:7px;color:#9AA4B5;letter-spacing:0}
.bd-h i{font-style:normal;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);font-size:.68rem;letter-spacing:0}
.bd-col--won .bd-h i{background:var(--grow-tint);border-color:transparent;color:var(--grow-ink)}
.bd-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:start;min-height:calc(var(--ld-h)*3 + 12px);border-radius:10px}
/* an empty lane says so in a seat the size of a card; the first card then takes it */
.bd-col ul:empty::after{content:attr(data-empty);box-sizing:border-box;height:var(--ld-h);display:grid;place-items:center;border:1.5px dashed var(--line);border-radius:10px;font:400 .66rem/1.4 var(--mono);color:var(--muted);text-align:center;padding:0 8px}
.bd-col--won ul:empty::after{border-color:color-mix(in srgb,var(--grow) 45%,var(--line));color:var(--grow-ink)}
.ld{box-sizing:border-box;height:var(--ld-h);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 9px;display:grid;gap:1px;align-content:start;min-width:0;overflow:hidden;box-shadow:0 1px 0 rgba(17,24,40,.04);transition:opacity .3s,border-color .3s,box-shadow .3s}
.ld b,.ld small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld .src{font:500 .6rem/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:2px;min-width:0}
.ld .src svg{width:11px;height:11px;flex:none;color:var(--ink-2)}
.ld b{font:600 .95rem/1.15 var(--body)}
.ld small{font-size:.8rem;line-height:1.25;color:var(--muted)}
.ld em{font:500 .62rem/1.25 var(--mono);font-style:normal;letter-spacing:.02em;color:var(--ink-2);margin-top:4px;padding:3px 6px;border-radius:7px;background:var(--paper-2);justify-self:start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-col--won .ld{border-color:color-mix(in srgb,var(--grow) 45%,var(--line))}
.bd-col--won .ld em{background:var(--grow-tint);color:var(--grow-ink)}
.bd-col--won .ld .src svg{color:var(--grow-large)}
.ld.pop{animation:pop .55s var(--ease)}
@keyframes pop{0%{opacity:0;transform:translateY(-10px) scale(.96)}100%{opacity:1;transform:none}}
/* a "works with" chip is pressed: its people stand out, the rest step back */
.board.hl .ld:not(.hi){opacity:.36}
.board.hl .ld.hi{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
/* the visitor's own test enquiry */
.ld--you{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ld--you .src,.ld--you small{color:var(--on-night-2)}
.ld--you .src svg{color:var(--grow-bright)}
.ld--you em,.bd-col--won .ld--you em{background:rgba(61,220,132,.18);color:var(--grow-bright)}
.bd-col--won .ld--you{border-color:var(--ink)}
.bd-log{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);font:400 .8rem/1.35 var(--mono);color:var(--ink-2);min-height:42px}
.bd-log i{width:8px;height:8px;border-radius:50%;background:var(--grow);flex:none;animation:ping 2.4s var(--ease) infinite}
/* Your turn: the visitor's name goes through the board */
.bd-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:7px 8px 7px 14px;border-radius:var(--r-m);background:var(--card);border:1px solid var(--line)}
.bd-try input{flex:1 1 130px;min-width:0;height:40px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);padding:0 15px;font:400 1rem/1 var(--body);color:var(--ink);transition:border-color .2s}
.bd-try input::placeholder{color:var(--muted)}
.bd-try input:hover{border-color:var(--ink-2)}
.bd-try input:focus-visible{outline:2px solid var(--grow);outline-offset:2px;border-color:var(--ink)}
.bd-try .try-b{border-color:var(--ink)}
.bd-try .try-b:hover{background:var(--ink);color:var(--paper)}
.bd-note{font:400 .76rem/1.4 var(--mono);color:var(--muted);text-align:center}
/* a narrow board beside the copy (small laptops): a chip may take two lines, so a card is 90 or 102px
   tall and the lane keeps room for three of the taller kind */
@container board (max-width:524px){
  .bd-cols{--ld-h:102px}
  .bd-h{letter-spacing:.06em;gap:5px}
  .bd-col+.bd-col .bd-h span::before{display:none}
  .ld{height:auto}
  .ld em{white-space:normal}
}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .hero h1{font-size:clamp(2.2rem,12cqi,4.4rem)}
}
@media (max-width:560px){
  .bd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-kpis div:nth-child(3){border-left:0}
  .bd-kpis div:nth-child(n+3){border-top:1px solid var(--line)}
  /* phone: no second line on a card, and a chip may take two lines, so a card is as tall as it needs
     (70 or 82px) and the lane keeps room for three of the taller kind */
  .bd-cols{--ld-h:82px}
  .bd-log{min-height:55px}
  .bd-cols{gap:2px;padding:6px 4px}
  .bd-col{padding:4px 3px 5px;border-radius:11px}
  .bd-h{font-size:.56rem;letter-spacing:.04em;padding-inline:2px;gap:4px}
  .bd-col+.bd-col .bd-h span::before{display:none}
  .bd-sum{font-size:.58rem}
  .bd-col ul{gap:5px;min-height:calc(var(--ld-h)*3 + 10px)}
  .ld small{display:none}
  .ld{height:auto;padding:7px 7px 8px;border-radius:8px}
  .ld em{white-space:normal}
  .ld b{font-size:.86rem}.ld small{font-size:.74rem}
  .ld .src{font-size:.52rem;letter-spacing:.02em;gap:4px}
  .ld em{font-size:.56rem;padding:4px 5px}
  .bd-days button{font-size:.56rem;letter-spacing:.02em}
  .bd-try{padding:10px}
  .bd-try .try-l{flex-basis:100%}
  .bd-try .try-b{flex:1 1 auto;justify-content:center}
}

/* cards can be pressed for their story; a booking flashes its lane */
.ld[data-li]{cursor:pointer}
.ld[data-li]:hover{border-color:var(--ink)}
.ld:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.bd-col ul.flash{animation:laneflash .8s var(--ease)}
@keyframes laneflash{0%{box-shadow:0 0 0 4px var(--grow)}100%{box-shadow:0 0 0 4px transparent}}

/* ── The three leaks ─────────────────────────────────────── */
/* The pipe: people in at the left, customers out at the right, a leak above each card. The flow gets thinner
   after every open leak and comes back when the leak is plugged. Each leak's tag is a button that plugs it.
   --h1 is where the first leak sits: above the middle of the first card when the cards are side by side. */
.pipe{--h1:calc(100%/6);position:relative;display:grid;gap:9px;margin-bottom:34px}
/* the middle card is 1.3 wide, so the outer two are a 3.3th of the row each, less the two gaps */
@media (min-width:1100px){.pipe{--h1:calc((100% - 32px)/6.6)}}
.pipe-ends{display:flex;justify-content:space-between;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pipe-ends span{transition:color .4s}
.pipe.all .pipe-ends span:last-child{color:var(--grow-ink)}
.pipe-tags{position:relative;height:30px}
.pipe-tag{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px 0 9px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:500 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;transition:background .25s,border-color .25s,color .25s}
.pipe-tag b{font-weight:500;color:var(--muted);transition:color .25s}
.pipe-tag::after{content:"";box-sizing:border-box;width:11px;height:11px;border-radius:50%;border:2px solid currentColor;transition:background .25s}
.pipe-tag:hover{border-color:var(--ink);color:var(--ink)}
.pipe-tag:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.pipe-tag.nudge{border-color:var(--grow)}
.pipe-tag[aria-pressed="true"]{background:var(--grow-tint);border-color:transparent;color:var(--grow-ink)}
.pipe-tag[aria-pressed="true"] b{color:var(--grow-ink)}
.pipe-tag[aria-pressed="true"]::after{background:currentColor}
.t1,.h1{left:var(--h1)}
.t2,.h2{left:50%}
.t3,.h3{left:calc(100% - var(--h1))}
@media (max-width:640px){
  .pipe-tag{padding:0 8px;font-size:.6rem;letter-spacing:.04em}
  .pipe-tag b,.pipe-tag::after{display:none}
}
.pipe-tube{position:relative;height:18px}
/* --f is how much of the flow is left at that point: 1 at the start, less after each open leak */
/* named pflow, not flow: the calculator has its own .flow */
.pflow{position:absolute;top:0;height:calc(4px + 14px*var(--f,1));opacity:calc(.45 + .55*var(--f,1));background-image:repeating-linear-gradient(90deg,var(--ink) 0 18px,#2A3550 18px 28px);animation:flow 1.1s linear infinite;transition:height .5s var(--ease),opacity .5s var(--ease)}
.f1{left:0;width:var(--h1);border-radius:999px 0 0 999px}
.f2{left:var(--h1);width:calc(50% - var(--h1))}
.f3{left:50%;width:calc(50% - var(--h1))}
.f4{left:calc(100% - var(--h1));width:calc(var(--h1) - 11px)}   /* the arrowhead takes the last 11px */
.pipe-tube::after{content:"";position:absolute;right:-2px;top:calc(2px + 7px*var(--end,1));border-left:13px solid var(--ink);border-block:10px solid transparent;transform:translateY(-50%);transition:top .5s var(--ease),border-color .4s}
.pipe.all .pflow{background-image:repeating-linear-gradient(90deg,var(--grow) 0 18px,#0E8C59 18px 28px)}
.pipe.all .pipe-tube::after{border-left-color:var(--grow)}
.hole{position:absolute;top:calc(14px*var(--f,1) - 4px);width:20px;height:9px;border-radius:10px 10px 0 0;background:var(--paper);transform:translateX(-50%);transition:top .5s var(--ease),width .4s var(--ease),height .4s var(--ease),background .4s,border-radius .4s}
.hole b{position:absolute;left:50%;top:9px;width:8px;height:11px;margin-left:-4px;border-radius:50%/60% 60% 40% 40%;background:var(--ink);animation:drip 1.9s cubic-bezier(.5,0,.9,.5) infinite}
.h2 b{animation-delay:.6s}
.h3 b{animation-delay:1.2s}
.hole.plugged{top:-3px;width:28px;height:calc(10px + 14px*var(--f,1));border-radius:6px;background:var(--grow)}
.hole.plugged b{display:none}
@keyframes flow{to{background-position:28px 0}}
@keyframes drip{0%{transform:translateY(-4px) scale(.4);opacity:0}25%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(24px) scale(.9);opacity:0}}

.leaks{display:grid;gap:16px}
/* side by side, the three cards share their first three rows, so the titles and the big figures line up */
@media (min-width:1100px){
  /* the middle card, "the big one", holds the most and is the widest */
  .leaks{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}
}
/* shared rows only where the first card's figure and caption fit side by side */
@media (min-width:1240px){
  @supports (grid-template-rows:subgrid){
    .leaks .leak{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px}
  }
}
.leak-more{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}
/* a chart with its heading */
.ev{display:grid;gap:10px}
.ev-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;min-height:32px;font:500 .66rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ev-h .seg{margin-left:0;flex:none;text-transform:none;letter-spacing:0}
.leak--cold .ev-h{color:var(--on-night-2)}
.leak{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column;gap:14px;min-width:0;transition:border-color .35s,box-shadow .35s}
.leak.plugged{border-color:var(--grow);box-shadow:0 0 0 1.5px var(--grow)}
.leak-n{display:flex;align-items:center;gap:10px;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:24px}
.leak-n::after{content:"";flex:1;height:1px;background:var(--line);order:1}
.stamp{order:2;display:none;align-items:center;gap:5px;font-style:normal;letter-spacing:.1em;padding:5px 9px 5px 6px;border-radius:999px;background:var(--grow-tint);color:var(--grow-ink)}
.stamp svg{width:13px;height:13px}
.leak.plugged .stamp{display:inline-flex;animation:pop .5s var(--ease)}
.leak h3{font-size:var(--step-2);letter-spacing:-.02em}
.leak--cold h3{max-width:10ch}   /* two lines, like its neighbours */
.leak p:not([class]){color:var(--ink-2)}
.leak-fig{display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-end;gap:8px 10px}
.leak-fig>b{font:720 clamp(2.6rem,1.9rem + 2vw,3.5rem)/.86 var(--display);letter-spacing:-.04em;color:var(--grow-large);font-variant-numeric:tabular-nums;white-space:nowrap}
.leak-fig>span:not(.seg){font-size:.88rem;line-height:1.3;color:var(--muted);max-width:20ch;padding-bottom:2px}
@media (min-width:1100px){.leak-fig>span:not(.seg){max-width:15ch}}   /* narrow cards side by side */
/* a long figure ("375,000") is set smaller, so its caption stays beside it and the row keeps its height */
.leak-fig>b.long{font-size:clamp(2.1rem,1.6rem + 1.4vw,2.6rem)}
/* a two-way switch */
.seg{margin-left:auto;display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--paper)}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;min-height:30px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;font:600 .82rem/1 var(--body);color:var(--ink-2);transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.leak .src{font:400 .74rem/1.45 var(--mono);color:var(--muted);margin-top:auto}
/* the foot of a card: where the fix lives, and the button that plugs the leak */
.leak-foot{display:grid;gap:2px;justify-items:start;padding-top:14px;border-top:1px solid var(--line)}
.leak-foot .link{color:var(--ink);font-size:.95rem}
.plug{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;padding:0 16px 0 12px;border-radius:999px;border:1.5px solid var(--ink);font:600 .93rem/1 var(--body);color:var(--ink);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.plug i{width:14px;height:14px;border-radius:50%;border:2.5px solid currentColor;transition:background .25s}
.plug:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.plug[aria-pressed="true"]{background:var(--grow);border-color:var(--grow);color:var(--night)}
.plug[aria-pressed="true"] i{background:currentColor}
.plug:focus-visible{outline:2px solid var(--grow);outline-offset:3px}
/* the visitor's own answer says this leak is theirs: the button asks to be pressed */
.plug.nudge{border-color:var(--grow);animation:nudge 1.1s var(--ease) 2}
.leak--cold .plug.nudge{border-color:var(--grow-bright)}
@keyframes nudge{0%{box-shadow:0 0 0 0 rgba(18,166,106,.5)}100%{box-shadow:0 0 0 10px rgba(18,166,106,0)}}
/* "Try yours": a boxed question about the visitor; the answer restates the card's own number */
.tryb{display:grid;gap:10px;padding:14px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line)}
.tryb-q{font-weight:600;font-size:.98rem;line-height:1.3;color:var(--ink)}
.tryb-a{font-size:.93rem;line-height:1.45;color:var(--ink-2);min-height:2.9em}
.tryb-a b{color:var(--ink);font-weight:600}
.tryb .try-b{min-height:38px;padding:0 13px;font-size:.88rem}
.tryb>.try-b{justify-self:start}
/* 02, the night card */
.leak--cold{background:var(--night);border-color:var(--night-line);color:var(--on-night)}
.leak--cold .leak-n{color:var(--on-night-2)}
.leak--cold .leak-n::after,.leak--cold .leak-foot{background:none;border-color:var(--night-line)}
.leak--cold .leak-n::after{background:var(--night-line)}
.leak--cold .leak-fig>b{color:var(--grow-bright)}
.leak--cold .leak-fig>span,.leak--cold .src{color:var(--on-night-2)}
.leak--cold p:not([class]){color:var(--on-night-2)}
.leak--cold .leak-foot .link{color:var(--on-night)}
.leak--cold .plug{border-color:var(--on-night);color:var(--on-night)}
.leak--cold .plug:hover{background:var(--on-night);color:var(--night)}
.leak--cold .plug[aria-pressed="true"]{background:var(--grow-bright);border-color:var(--grow-bright);color:var(--night)}
.leak--cold .stamp{background:rgba(61,220,132,.16);color:var(--grow-bright)}
.leak--cold.plugged{border-color:var(--grow-bright);box-shadow:0 0 0 1.5px var(--grow-bright)}
.leak--cold .tryb{background:var(--night-2);border-color:var(--night-line)}
.leak--cold .tryb-q{color:var(--on-night)}
.leak--cold .tryb-a{color:var(--on-night-2)}
.leak--cold .tryb-a b{color:var(--grow-bright)}
/* how fast 2,241 companies replied: one bar, four parts; the key underneath is four buttons */
.split{display:grid;gap:10px}
.split-bar{display:flex;height:30px;border-radius:9px;overflow:hidden;gap:2px}
.split-bar i{flex:var(--v) 1 0;background:var(--c);transform-origin:left;display:block;transition:opacity .3s,box-shadow .3s}
.split-bar.picked i:not(.me){opacity:.35}
.split-bar i.me{box-shadow:inset 0 0 0 2.5px var(--on-night)}
.reveal-on [data-reveal]:not(.in) .split-bar i{transform:scaleX(0)}
.reveal-on [data-reveal] .split-bar i{transition:transform .9s var(--ease) calc(.3s + var(--i)*.14s),opacity .3s,box-shadow .3s}
.split-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.split-key button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 10px;border-radius:10px;border:1.5px solid var(--night-line);font-size:.86rem;line-height:1.2;color:var(--on-night-2);transition:border-color .2s,background .2s,color .2s}
.split-key button i{width:9px;height:9px;border-radius:3px;background:var(--c);flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.split-key button b{color:var(--on-night);font:500 .9rem/1 var(--mono)}
.split-key button:hover{border-color:var(--on-night-2)}
.split-key button[aria-pressed="true"]{background:var(--on-night);border-color:var(--on-night);color:var(--night)}
.split-key button[aria-pressed="true"] b{color:var(--night)}
.split-key button:focus-visible{outline:2px solid var(--grow-bright);outline-offset:2px}
html:not(.js) .split-key button{cursor:default}
/* "Your enquiries a month": the same shares applied to the visitor's own number */
.mine-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.stepper{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:999px;border:1px solid var(--night-line)}
.stepper button{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--on-night);font:500 1.15rem/1 var(--mono);cursor:pointer;transition:background .2s}
.stepper button:hover{background:rgba(255,255,255,.18)}
.stepper output{min-width:2.8em;text-align:center;font:720 1.25rem/1 var(--display);font-variant-numeric:tabular-nums}
.dots{display:flex;flex-wrap:wrap;gap:5px}
.dots i{width:11px;height:11px;border-radius:50%;background:var(--grow-bright)}
.dots i.late{background:#55617A}
.dots i.never{background:transparent;box-shadow:inset 0 0 0 1.5px #55617A}
#mine .tryb-a{min-height:0}
/* 03: the visitor's two numbers */
.num{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;font-size:.93rem;line-height:1.3;color:var(--ink)}
.num-in{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);transition:border-color .2s}
.num-in:focus-within{border-color:var(--ink);outline:2px solid var(--grow);outline-offset:2px}
.num-in i{font:500 .95rem/1 var(--mono);font-style:normal;color:var(--muted)}
.num-in input{width:5.2em;height:100%;border:0;outline:0;background:none;font:500 1rem/1 var(--mono);color:var(--ink);text-align:right;-moz-appearance:textfield;appearance:textfield}
.num-in input::-webkit-outer-spin-button,.num-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num-in input::placeholder{color:#8A93A4}
/* horizontal bars */
.hbars{display:grid;gap:9px}
.hbars li{display:grid;grid-template-columns:minmax(0,8.4em) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:.9rem;line-height:1.2}
.hbars span{color:var(--ink-2)}
.hbars i{height:12px;border-radius:999px;background:var(--paper-2);position:relative;overflow:hidden;display:block}
.hbars i::after{content:"";position:absolute;inset:0;width:calc(var(--v)*1%);border-radius:inherit;background:var(--ink)}
.hbars li.hi i::after{background:var(--grow)}
.hbars b{font:500 .84rem/1 var(--mono);font-variant-numeric:tabular-nums;min-width:4.1em;text-align:right}
.hbars--s{gap:7px}
.hbars--s i{height:8px}
.hbars-t{font:500 .66rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:-4px}
.reveal-on [data-reveal]:not(.in) .hbars i::after{width:0}
.reveal-on [data-reveal] .hbars i::after{transition:width 1s var(--ease) .35s}
/* the tally under the three cards */
.leak-sum{margin-top:16px;display:grid;gap:14px 26px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:18px clamp(18px,2vw,26px);transition:border-color .35s,box-shadow .35s}
@media (min-width:900px){.leak-sum{grid-template-columns:auto minmax(0,1fr) auto}}
.leak-sum.all{border-color:var(--grow);box-shadow:0 0 0 1.5px var(--grow)}
.sum-n{display:flex;align-items:center;gap:10px}
.sum-n b{font:720 3.2rem/.9 var(--display);letter-spacing:-.04em;color:var(--grow-large);font-variant-numeric:tabular-nums;min-width:.62em}
.sum-n span{font:500 .68rem/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sum-t{display:grid;gap:5px;min-height:5.2em;align-content:center}
.sum-h{font:720 1.2rem/1.2 var(--display);letter-spacing:-.015em}
#sum-lines p{font-size:.95rem;line-height:1.45;color:var(--ink-2)}
#sum-lines b{color:var(--ink);font-weight:600}
.sum-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}

/* ── What it does: three jobs ────────────────────────────── */
.what{background:var(--card);border-block:1px solid var(--line)}
.what-h{display:grid;gap:20px;align-self:start}
/* the three jobs as jump links under the heading */
.what-idx{display:flex;flex-wrap:wrap;gap:8px}
.what-idx a{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 15px 0 6px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:600;font-size:.95rem;text-decoration:none;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.what-idx a b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--paper);font:500 .72rem/1 var(--mono)}
.what-idx a:hover{border-color:var(--ink);background:var(--card);transform:translateY(-1px)}

/* The dock: twelve kinds of business. One row of tiles on a wide screen, a swipe row on smaller ones. */
.dock{display:grid;gap:12px;margin-bottom:clamp(30px,3.6vw,52px);padding:14px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line)}
.dock-l{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
/* "put your name on it": what the visitor types replaces the business name in the examples below */
.dock-name{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font:500 .7rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dock-name input{width:min(230px,60vw);height:38px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);padding:0 14px;font:400 .95rem/1 var(--body);letter-spacing:0;text-transform:none;color:var(--ink);transition:border-color .2s,background .2s}
.dock-name input::placeholder{color:var(--muted)}
.dock-name input:hover{border-color:var(--ink-2)}
.dock-name input:focus-visible{outline:2px solid var(--grow);outline-offset:2px;border-color:var(--ink)}
.dock-name.has input{border-color:var(--grow);background:var(--grow-tint)}
/* where the visitor's own name landed in an example */
.mine{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--grow-bright) 60%,transparent);text-decoration-thickness:.42em;text-underline-offset:-.2em;text-decoration-skip-ink:none}
.dock-n{font:400 .76rem/1.3 var(--mono);color:var(--muted)}
.dock-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.tile{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;align-content:center;gap:8px;min-height:82px;padding:10px 4px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);text-align:center;font:600 .8rem/1.15 var(--body);color:var(--ink-2);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.tile svg{width:22px;height:22px;color:var(--ink);transition:color .25s}
.tile:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.tile[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tile[aria-pressed="true"] svg{color:var(--grow-bright)}
.tile:focus-visible{outline:2px solid var(--grow);outline-offset:3px}
@media (max-width:1100px){
  .dock-row{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:-14px;padding:2px 14px 4px}
  .dock-row::-webkit-scrollbar{display:none}
  .tile{flex:0 0 92px;scroll-snap-align:center}
}

.jobs{display:grid;gap:clamp(44px,5.5vw,84px)}
.job{display:grid;gap:clamp(22px,3.4vw,56px);align-items:start}
@media (min-width:980px){
  .job{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
  .job:nth-child(even){grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
  .job:nth-child(even) .job-copy{order:2}
  /* the words stay beside the example while the example scrolls past */
  .job-copy{position:sticky;top:calc(var(--header-h) + 24px)}
}
.job-copy{display:grid;gap:16px;justify-items:start}
.job-n{display:inline-flex;align-items:center;gap:12px;font:500 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grow-ink)}
.job-n b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--paper);font:600 .8rem/1 var(--mono);letter-spacing:0}
.job h3{font-size:var(--step-2);letter-spacing:-.022em;max-width:20ch}
.job-copy>p:not([class]){color:var(--ink-2);max-width:46ch}
/* The four lines of a job. With the script each is a button that picks its part out in the example. */
.job-list{display:grid;gap:2px;width:100%;margin-inline:-10px;width:calc(100% + 20px)}
.job-list li{display:grid;grid-template-columns:20px 1fr;gap:10px;line-height:1.38;padding:5px 10px}
.job-list svg{width:18px;height:18px;color:var(--grow-large);margin-top:3px}
.job-list li.is-spot{display:block;padding:0}
.spot{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:20px 1fr;gap:10px;width:100%;padding:5px 10px;border-radius:12px;line-height:1.38;border:1.5px solid transparent;transition:background .2s,border-color .2s}
.spot:hover{background:var(--paper)}
/* the tick turns into an eye while a line is pointed at or pressed: it can be looked at in the example */
.job-list svg+svg{display:none;color:var(--ink)}
.spot:hover svg:first-child,.spot:focus-visible svg:first-child,.spot[aria-pressed="true"] svg:first-child{display:none}
.spot:hover svg+svg,.spot:focus-visible svg+svg,.spot[aria-pressed="true"] svg+svg{display:block}
.spot[aria-pressed="true"]{background:var(--paper);border-color:var(--ink)}
.spot:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.spot-hint{display:flex;align-items:center;gap:9px;margin-top:-8px;padding-left:10px;font:400 .76rem/1.3 var(--mono);color:var(--muted)}
.spot-hint::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grow);animation:ping 2.4s var(--ease) infinite}
.job-get{font-size:.92rem;color:var(--ink-2);padding:10px 14px;border-radius:12px;background:var(--paper);border:1px dashed var(--line)}
.job-get b{color:var(--ink)}
/* The example sits in a framed window: what it is on the left of the bar, whose it is in the middle
   (with arrows to step through the businesses), "Example" on the right */
.win{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 16px;min-height:48px;border-bottom:1px solid var(--line);background:var(--card);font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.win-bar>i{width:8px;height:8px;border-radius:50%;background:var(--grow);flex:none}
.win-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-bar .tag{margin-left:auto}
.win-who{margin-left:auto;display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;border:1px solid var(--line);background:var(--paper);flex:none}
.win-who+.tag{margin-left:0}
.win-who b{font:600 .8rem/1 var(--body);letter-spacing:0;text-transform:none;color:var(--ink);padding:0 6px;white-space:nowrap}
.win-who button{all:unset;box-sizing:border-box;cursor:pointer;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:500 1.05rem/1 var(--body);color:var(--ink);transition:background .2s}
.win-who button:hover{background:var(--card);box-shadow:0 0 0 1px var(--line)}
.win-who button:focus-visible{outline:2px solid var(--grow);outline-offset:1px}
.win-body{padding:clamp(12px,1.8vw,20px)}
.win-foot{padding:12px 16px;border-top:1px solid var(--line);background:var(--card)}
/* play an example through: the conversation again, or the four weeks of the report */
.win-play{all:unset;box-sizing:border-box;cursor:pointer;margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px 0 11px;border-radius:999px;border:1.5px solid var(--ink);font:600 .84rem/1 var(--body);color:var(--ink);white-space:nowrap;transition:background .2s,color .2s}
.win-play:hover{background:var(--ink);color:var(--paper)}
.win-play--i{width:38px;min-height:38px;padding:0;justify-content:center;font-size:1.05rem}
.win-play:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
/* a line of the job is pressed: its part of the example stands out, the rest steps back */
[data-win] [data-part]{transition:opacity .3s,box-shadow .3s}
.spotting [data-part]:not(.lit){opacity:.3}
.spotting .ad.lit,.spotting .seq-more.lit,.spotting .rep-note.lit,.spotting .trend.lit{box-shadow:0 0 0 2px var(--ink)}
.spotting .rep-note.lit,.spotting .trend.lit,.spotting .seq-more.lit{border-radius:10px;box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--ink)}
.win[data-on="report"] .rep{box-shadow:0 0 0 2px var(--ink)}
.win[data-on="cpe"] .rep-row:not(:first-child)>:nth-child(4){background:var(--grow-tint);color:var(--grow-ink);font-weight:500;border-radius:6px;padding:4px 6px;margin:-4px -6px;justify-self:start}
.win[data-on="test"] .rep-row em{box-shadow:0 0 0 2px var(--ink)}
/* 01: four pieces of one offer: the search ad, the Maps profile, the social ad, the page they land on */
.ads{display:grid;gap:12px}
@media (min-width:640px){
  .ads{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);grid-template-areas:"search social" "maps social" "page page"}
  .ad--search{grid-area:search}.ad--maps{grid-area:maps}.ad--social{grid-area:social}.ad--page{grid-area:page}
}
.ad{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.ad-h{display:block;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:11px 14px 0}
.ad-q{margin:10px 14px 0;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:999px;border:1px solid var(--line);font:400 .86rem/1.2 var(--mono);color:var(--ink-2);min-width:0}
.ad-q svg{width:15px;height:15px;flex:none;color:var(--muted)}
.ad-q span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-r{padding:14px;display:grid;gap:5px}
.ad-r small{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:8px;min-width:0}
.ad-r small b{color:var(--ink);font-weight:700}
.ad-r small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-r h4{font:600 1.08rem/1.25 var(--body);letter-spacing:0;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ad-r p{font-size:.9rem;line-height:1.4;color:var(--ink-2)}
.ad-x{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ad-x span{font-size:.78rem;font-weight:600;padding:5px 9px;border-radius:7px;background:var(--paper)}
/* the Maps profile */
.mp{display:flex;align-items:center;gap:11px;padding:10px 14px 0}
.mp-pin{width:38px;height:38px;border-radius:12px;background:var(--grow-tint);color:var(--grow-ink);display:grid;place-items:center;flex:none}
.mp-pin svg{width:19px;height:19px}
.mp b{display:block;font:600 .98rem/1.2 var(--body)}
.mp small{display:block;font-size:.8rem;line-height:1.3;color:var(--muted)}
.mp-open{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 14px 0;font-size:.82rem;line-height:1.3;color:var(--ink-2)}
.mp-open b{display:inline-flex;align-items:center;gap:6px;color:var(--grow-ink);font-weight:600}
.mp-open b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--grow)}
.mp-acts{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 14px}
.mp-acts span{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:6px 11px 6px 9px;border-radius:999px;background:var(--paper)}
.mp-acts svg{width:13px;height:13px}
/* the social ad, as a short video */
.ad--social{display:flex;flex-direction:column}
.ad-who{display:flex;align-items:center;gap:10px;padding:12px 14px}
.ad-av{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;flex:none}
.ad-av svg{width:17px;height:17px}
.ad-who b{display:block;font:600 .92rem/1.15 var(--body)}
.ad-who small{display:block;font-size:.76rem;color:var(--muted)}
.ad-pic{flex:1;min-height:190px;display:grid;place-items:center;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 10%,#1D2740,var(--night));color:var(--on-night)}
.ad-pic svg{width:30%;height:auto;opacity:.92;color:var(--grow-bright);margin-bottom:26px}
.ad-pic>span{position:absolute;left:12px;right:12px;bottom:15px;font:600 1rem/1.2 var(--display);letter-spacing:-.01em}
.ad-len{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:6px;font:500 .64rem/1 var(--mono);font-style:normal;padding:5px 7px;border-radius:6px;background:rgba(0,0,0,.45)}
.ad-len::before{content:"";border-left:6px solid currentColor;border-block:4px solid transparent}
.ad-bar{position:absolute;inset:auto 0 0;height:3px;background:rgba(255,255,255,.18)}
.ad-bar::after{content:"";position:absolute;inset:0;background:var(--grow-bright);transform-origin:left;animation:reel 15s linear infinite}
@keyframes reel{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ad-cap{padding:12px 14px 4px;font-size:.9rem;line-height:1.4;color:var(--ink-2)}
.ad-go{margin:10px 14px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-radius:10px;background:var(--paper);font-weight:600;font-size:.9rem}
.ad-go svg{width:16px;height:16px}
/* the page they land on: a browser bar, one headline, one button */
.pg-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--paper)}
.pg-bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.pg-bar span{margin-left:8px;font:400 .72rem/1 var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 14px 14px}
.pg .ad-h{padding:0;margin-bottom:6px}
.pg p b{display:block;font:720 1.14rem/1.2 var(--display);letter-spacing:-.015em}
.pg-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:600;font-size:.9rem;white-space:nowrap}
/* "aim it": where the ads are shown */
.aim{display:grid;gap:10px}
.aim-pills{display:contents}
.aim-line{display:grid;grid-template-columns:18px 1fr;gap:9px;font-size:.95rem;line-height:1.4;color:var(--ink-2)}
.aim-line svg{width:17px;height:17px;margin-top:2px;color:var(--grow-large)}
.aim-line b{color:var(--ink);font-weight:600}
.swap{animation:swap .5s var(--ease)}
@keyframes swap{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
/* 02: the follow-up sequence */
.seq{display:grid;gap:0;position:relative}
.seq li{display:grid;grid-template-columns:74px 18px minmax(0,1fr);gap:0 12px;padding-bottom:14px;position:relative;transition:opacity .4s}
.seq li:last-child{padding-bottom:0}
.seq time{font:500 .72rem/1.3 var(--mono);color:var(--muted);text-align:right;padding-top:11px}
.seq time b{display:block;color:var(--ink);font-weight:500}
.seq .nd{position:relative;display:grid;justify-items:center}
.seq .nd::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--card);border:2.5px solid var(--ink);margin-top:11px;position:relative;z-index:1}
.seq .nd::after{content:"";position:absolute;top:22px;bottom:-25px;width:2px;background:var(--line)}
.seq li:last-child .nd::after{display:none}
.seq .msg{background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:10px 13px;font-size:.93rem;line-height:1.4;justify-self:start;max-width:min(42ch,86%)}
.seq .msg small{display:flex;align-items:center;gap:7px;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.seq .msg small svg{width:13px;height:13px}
.seq .in .msg{background:var(--ink);border-color:var(--ink);color:var(--paper);border-radius:14px 14px 4px 14px;justify-self:end}
.seq .in .msg small{color:var(--on-night-2)}
.seq .in .nd::before{border-color:var(--grow);background:var(--grow)}
.seq .end .msg{background:var(--grow-tint);border-color:transparent;color:var(--grow-ink);font-weight:600;border-radius:12px}
.seq .end .nd::before{border-color:var(--grow);background:var(--grow)}
.seq .end.no .msg{background:var(--paper-2);color:var(--ink-2)}
.seq .end.no .nd::before{border-color:var(--muted);background:var(--muted)}
.seq li[hidden]{display:none}
/* played: the messages arrive one after another, as they would over the days */
@media (prefers-reduced-motion:no-preference){.seq.play li{animation:msgin .5s var(--ease) both;animation-delay:calc(var(--n,0)*.36s)}}
@keyframes msgin{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.seq-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:.86rem}
.seq-more b{font:500 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.seq-more span{display:inline-flex;align-items:center;gap:7px;font-weight:600;padding:6px 11px 6px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.seq-more svg{width:14px;height:14px}
.seq .end .nd::after{display:none}
@media (max-width:520px){.seq li{grid-template-columns:52px 14px minmax(0,1fr);gap:0 8px}.seq time{font-size:.64rem}}
/* 03: the weekly report */
.rep{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.rep-row{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.8fr)) minmax(0,1.1fr);gap:8px;align-items:center;padding:11px 14px;border-top:1px solid var(--line);font-size:.92rem}
.rep-row:first-child{border-top:0;font:500 .62rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
.rep-row b{font-weight:600}
.rep-row span{font-family:var(--mono);font-size:.84rem;font-variant-numeric:tabular-nums}
.rep-row em{font:500 .64rem/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:7px;background:var(--paper-2);color:var(--ink-2);justify-self:start;white-space:nowrap}
.rep-row em.up{background:var(--grow-tint);color:var(--grow-ink)}
.rep-row em.off{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.rep-row.is-off b,.rep-row.is-off span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.rep-row.sum{background:var(--paper);font-weight:600}
.rep-row.sum span:last-of-type{color:var(--grow-ink);font-weight:500}
.rep-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin-top:12px;font-size:.92rem;line-height:1.4;color:var(--ink-2)}
.rep-note svg{width:18px;height:18px;color:var(--grow-large);margin-top:2px}
.trend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end;height:112px;margin-top:16px;padding-top:22px}
.trend button{all:unset;cursor:pointer;display:grid;grid-template-rows:1fr auto;gap:6px;height:100%;text-align:center;font:500 .66rem/1 var(--mono);letter-spacing:.06em;color:var(--muted);border-radius:8px}
.trend button:focus-visible{outline:2px solid var(--grow);outline-offset:3px}
.trend i{align-self:end;height:calc(var(--v)*1%);border-radius:8px 8px 3px 3px;background:var(--paper-2);position:relative;transition:background .3s,height .6s var(--ease)}
.trend i b{position:absolute;left:0;right:0;top:-18px;font:500 .7rem/1 var(--mono);color:var(--ink-2)}
.trend button.past i{background:#CACDD2}
.trend button[aria-pressed="true"]{color:var(--ink)}
.trend button[aria-pressed="true"] i{background:var(--grow)}
.trend button[aria-pressed="true"] i b{color:var(--grow-ink)}
@media (max-width:560px){
  .rep-row{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.7fr)) minmax(0,.9fr);font-size:.84rem;padding-inline:10px}
  .rep-row>:nth-child(2){display:none}
  .rep-row:first-child{font-size:.54rem;letter-spacing:.02em}
  .rep-row em{font-size:.56rem;padding:5px 6px}
}

/* ── Calculator (night band) ─────────────────────────────── */
.night{background:var(--night);color:var(--on-night)}
.night .eyebrow{color:var(--on-night-2)}.night .eyebrow::before{background:var(--grow-bright)}
.night .sec-head p:not(.eyebrow){color:var(--on-night-2)}
.night h2 em{background-image:linear-gradient(90deg,var(--grow-bright),#8BEDB9)}
.night :focus-visible{outline-color:var(--grow-bright)}
.calc{display:grid;gap:18px}
@media (min-width:980px){.calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.calc-in,.calc-out{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r-l);padding:clamp(18px,2.4vw,30px)}
.calc-in{display:grid;gap:20px;align-content:start}
.fld{display:grid;gap:9px}
.fld-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fld label,.fld legend{font-weight:600;font-size:1rem;padding:0}
.fld output{font:500 1.05rem/1 var(--mono);color:var(--grow-bright);font-variant-numeric:tabular-nums;white-space:nowrap}
.fld small{font-size:.84rem;line-height:1.35;color:var(--on-night-2)}
.fld fieldset{border:0;margin:0;padding:0;display:grid;gap:9px;min-width:0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--grow-bright) var(--p,50%),var(--night-line) var(--p,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--night-line)}
input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--grow-bright)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--on-night);border:0;margin-top:-9px;box-shadow:0 2px 10px rgba(0,0,0,.5);transition:transform .2s var(--ease)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--on-night);border:0;box-shadow:0 2px 10px rgba(0,0,0,.5)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--grow-bright)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--grow-bright)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pills span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--night-line);font:600 .9rem/1 var(--body);color:var(--on-night);transition:background .2s,border-color .2s,color .2s}
.pills label:hover span{border-color:var(--on-night-2)}
.pills input:checked+span{background:var(--on-night);border-color:var(--on-night);color:var(--night)}
.pills input:focus-visible+span{outline:2px solid var(--grow-bright);outline-offset:3px}
.calc-out{display:grid;gap:18px;align-content:start;background:radial-gradient(34rem 20rem at 100% 0%,rgba(61,220,132,.13),transparent 70%),var(--night-2)}
.calc-k{font:500 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.calc-big{font:720 clamp(2.8rem,2rem + 3.6vw,4.8rem)/.95 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--grow-bright)}
.calc-big.neg{color:var(--on-night)}
.calc-line{color:var(--on-night-2);max-width:46ch}
.calc-line b{color:var(--on-night)}
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.flow div{background:rgba(255,255,255,.04);border:1px solid var(--night-line);border-radius:14px;padding:12px 12px 13px;min-width:0}
.flow small{display:block;font:500 .62rem/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}
.flow b{display:block;margin-top:7px;font:720 clamp(1.2rem,1rem + 1vw,1.7rem)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vs{display:grid;gap:9px}
.vs li{display:grid;grid-template-columns:minmax(0,7.4em) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:.9rem;color:var(--on-night-2)}
.vs i{display:block;height:12px;border-radius:999px;background:var(--night-line);overflow:hidden;position:relative}
.vs i::after{content:"";position:absolute;inset:0;width:calc(var(--v,0)*1%);border-radius:inherit;background:var(--on-night-2);transition:width .5s var(--ease)}
.vs li.sales i::after{background:var(--grow-bright)}
.vs b{font:500 .86rem/1 var(--mono);color:var(--on-night);font-variant-numeric:tabular-nums;min-width:4.6em;text-align:right}
.calc-fine{font-size:.84rem;line-height:1.45;color:var(--on-night-2);border-top:1px solid var(--night-line);padding-top:14px}
html:not(.js) .calc-wrap{display:none}
html:not(.js) .calc-nojs{display:block}
.calc-nojs{display:none;color:var(--on-night-2);max-width:60ch}

/* ── The family ──────────────────────────────────────────── */
/* Three cards, each with a picture of the real site, joined by two round arrows. A card lights
   (.on) when the story below is at its step; .start marks where the visitor should begin. */
.fam{display:grid;gap:0;position:relative}
@media (min-width:900px){.fam{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr) 22px minmax(0,1fr);align-items:stretch}}
.fam-c{--b:var(--ink);position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 16px 20px;display:flex;flex-direction:column;gap:11px;min-width:0;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.fam-c--media{--b:linear-gradient(90deg,#D400F5,#6D28D9 55%,#2E9BFF)}
.fam-c--desk{--b:#FF5A1F}
.fam-c.me{--b:var(--grow-bright);background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fam-c::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--b)}
a.fam-c:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(17,24,40,.45)}
.fam-c.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 24px 44px -30px rgba(17,24,40,.5);transform:translateY(-4px)}
.fam-c.me.on{box-shadow:0 0 0 2px var(--grow-bright),0 24px 44px -30px rgba(17,24,40,.6)}
.fam-c.start{border-color:var(--grow);box-shadow:0 0 0 2px var(--grow)}
.fam-k{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fam-c.me .fam-k{color:var(--on-night-2)}
.fam-tag{font-style:normal;letter-spacing:.08em;padding:5px 9px;border-radius:999px;background:var(--grow-bright);color:var(--night)}
.fam-tag:empty{display:none}
/* the site itself, in a small browser frame */
.fam-shot{display:block;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper)}
/* where the customer of the story is right now: a small tag on the card of whoever is looking after them */
.fam-who{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:5px 12px 5px 5px;border-radius:999px;background:var(--card);color:var(--ink);box-shadow:0 8px 20px -8px rgba(17,24,40,.55),0 0 0 1px rgba(17,24,40,.08);font:600 .84rem/1.2 var(--body);animation:pop .5s var(--ease)}
.fam-who i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--grow);color:var(--night);font:700 .78rem/1 var(--display);font-style:normal}
.fam-who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fam-c.me .fam-shot{border-color:var(--night-line)}
.fam-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;background:var(--paper-2)}
.fam-c.me .fam-bar{background:var(--night-2)}
.fam-bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.fam-c.me .fam-bar i{background:var(--night-line)}
.fam-bar b{margin-left:6px;font:400 .68rem/1 var(--mono);color:var(--muted)}
.fam-c.me .fam-bar b{color:var(--on-night-2)}
.fam-shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
a.fam-c:hover .fam-shot img,.fam-c.on .fam-shot img{transform:scale(1.04)}
.fam-c .fam-v{font:720 var(--step-2)/1 var(--display);letter-spacing:-.025em;margin-top:4px}
.fam-c.me .fam-v{color:var(--grow-bright)}
.fam-c h3{font-size:1.12rem;display:flex;align-items:center;gap:9px}
.fam-c h3 svg,.fam-c h3 img{width:17px;height:auto;flex:none}
.fam-c p:not([class]){font-size:.96rem;line-height:1.45;color:var(--ink-2)}
.fam-c.me p:not([class]){color:var(--on-night-2)}
.fam-c ul{display:flex;flex-wrap:wrap;gap:6px}
.fam-c ul li{font-size:.8rem;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--paper)}
.fam-c.me ul li{background:rgba(255,255,255,.08);color:var(--on-night)}
.fam-go{margin-top:auto;padding-top:4px;font:500 .78rem/1 var(--mono);color:var(--ink);display:inline-flex;align-items:center;gap:7px;min-height:24px;align-self:flex-start;text-decoration:none}
.fam-c.me .fam-go{color:var(--on-night)}
a.fam-go:hover{text-decoration:underline;text-underline-offset:3px}
/* the hand-over between two cards. The second one turns round when the work goes back. */
.fam-arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--card);border:1.5px solid var(--ink);font:500 1rem/1 var(--body);z-index:2;justify-self:center;margin-block:-9px;rotate:90deg;transition:background .3s,color .3s,rotate .45s var(--ease),scale .3s var(--ease)}
@media (min-width:900px){.fam-arrow{align-self:center;margin:0 -6px;rotate:0deg}.fam-arrow.back{rotate:180deg}}
.fam-arrow.hot{background:var(--ink);color:var(--paper);scale:1.15}
/* the story: one customer, six steps, each belonging to one of the three */
.fam-story{margin-top:16px;display:grid;gap:10px;padding:14px 18px 16px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line)}
.fs-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.fs-k{margin-left:auto;font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grow-ink)}
.fs-nav{display:flex;gap:6px}
.fs-nav button{all:unset;box-sizing:border-box;cursor:pointer;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);display:grid;place-items:center;font-size:.95rem;color:var(--ink);transition:border-color .2s,background .2s,opacity .2s}
.fs-nav button:hover{border-color:var(--ink);background:var(--paper)}
.fs-nav button:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.fs-nav button[aria-disabled="true"]{opacity:.35;cursor:default;border-color:var(--line);background:var(--card)}
/* the journey: six numbered stops on one line. The line and the stops fill in as the story moves;
   the stop it is on takes the colour of the service doing the work. */
.fs-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:6px 0 4px}
.fs-track li{position:relative;min-width:0}
.fs-track li+li::before{content:"";position:absolute;top:15px;right:50%;width:100%;height:2px;background:var(--line);transition:background .35s}
.fs-track li.done::before,.fs-track li.cur::before{background:var(--ink)}
.fs-track button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:1;width:100%;display:grid;justify-items:center;gap:4px;padding:0 6px 4px;text-align:center;border-radius:12px}
.fs-track button:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.fs-track [data-who="media"]{--c:#7C3AED;--t:#fff}
.fs-track [data-who="growth"]{--c:var(--grow);--t:var(--night)}
.fs-track [data-who="desk"]{--c:#FF5A1F;--t:var(--night)}
.fs-track i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--line);font:600 .8rem/1 var(--mono);font-style:normal;color:var(--muted);margin-bottom:4px;transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease),box-shadow .3s}
.fs-track b{font:600 .88rem/1.25 var(--body);color:var(--ink-2);transition:color .3s}
.fs-track small{display:inline-flex;align-items:center;gap:6px;font:500 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fs-track small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.fs-track button:hover i{border-color:var(--ink);color:var(--ink)}
.fs-track li.done i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fs-track li.cur i{background:var(--c);border-color:var(--c);color:var(--t);transform:scale(1.12);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
.fs-track li.cur b{color:var(--ink)}
@media (max-width:760px){
  /* a phone has room for the six numbers; the name of the stop it is on is said above the sentence */
  .fs-track b,.fs-track small{display:none}
  .fs-track button{padding-bottom:0}
  .fs-top .try-l{flex-basis:100%;order:-1;margin:0}
  .fs-k{margin-left:0;flex:1 1 0;min-width:0;line-height:1.4}
}
.fs-say{font-size:var(--step-1);line-height:1.35;color:var(--ink-2);min-height:1.35em}
@media (max-width:1100px){.fs-say{min-height:4.05em}}
.fs-say b{color:var(--ink);font-weight:700}
/* "where are you today?": which of the three to start with. It sits above the cards, so the card it
   marks is in view when the answer comes. */
.fam-pick{margin-bottom:16px;display:grid;gap:10px;padding:14px 18px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);transition:border-color .35s,box-shadow .35s}
.fam-pick.answered{border-color:var(--grow);box-shadow:0 0 0 1.5px var(--grow)}
.fp-q{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.fp-q .try{gap:6px}
.fp-q .try-b{min-height:38px;padding:0 13px;font-size:.9rem}
.fp-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-height:44px}
.fp-a p{flex:1 1 320px;font-size:1rem;line-height:1.45;color:var(--ink-2)}
.fp-a p b{color:var(--ink)}
.fp-a .btn{min-height:44px;padding:0 18px 0 14px;font-size:.95rem;flex:none}
.fam-foot{margin-top:22px;display:grid;gap:10px 28px;color:var(--ink-2);font-size:.98rem;line-height:1.45}
@media (min-width:900px){.fam-foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fam-foot p{display:grid;grid-template-columns:20px 1fr;gap:10px}
.fam-foot svg{width:18px;height:18px;margin-top:3px;color:var(--grow-large)}
.fam-foot b{color:var(--ink)}

/* ── How it works ────────────────────────────────────────── */
.how{background:var(--card);border-block:1px solid var(--line)}
/* The plan: four steps as tabs, and one stage under them holding the chosen step: what it is, its days
   (one open at a time, with what we do and what you do), and what you get. Twelve positions in all:
   before, ten working days, after. Without the script the four steps are simply stacked, every day open. */
.plan{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:14px;display:grid;gap:12px;min-width:0}
.plan-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:0 2px}
/* back a day, play, on a day */
.plan-ctl{display:flex;align-items:center;gap:5px}
.plan-b{all:unset;box-sizing:border-box;cursor:pointer;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;font-size:.85rem;color:var(--ink);transition:border-color .2s,background .2s,opacity .2s}
.plan-b:hover{border-color:var(--ink);background:var(--paper)}
.plan-b:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.plan-b[aria-disabled="true"]{opacity:.35;cursor:default;border-color:var(--line);background:var(--card)}
.plan-n{font:500 .7rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grow-ink)}
.plan-start{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.plan-l{font:500 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plan-start .seg{margin-left:0;background:var(--card)}
.plan-live{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 11px;border-radius:999px;background:var(--grow-tint);font:500 .74rem/1 var(--mono);color:var(--grow-ink);white-space:nowrap}
.plan-live::before{content:"→"}
.plan-live:empty{display:none}
/* the four steps. The strip on top of each is its days: dark once passed, green for the day being shown */
.ph-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ph-tab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-width:0;padding:24px 14px 14px;border-radius:16px;border:1px solid var(--line);background:var(--card);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.ph-tab:hover{border-color:var(--ink);transform:translateY(-1px)}
.ph-tab:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.ph-tab[aria-selected="true"]{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink),0 16px 30px -22px rgba(17,24,40,.55)}
.ph-dots{position:absolute;left:14px;right:14px;top:10px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.ph-dots i{height:4px;border-radius:99px;background:var(--line);transition:background .35s}
.ph-dots i.done{background:var(--ink)}
.ph-dots i.on{background:var(--grow)}
.ph-tab>i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line);font:600 .84rem/1 var(--mono);font-style:normal;color:var(--ink-2);transition:background .3s,border-color .3s,color .3s}
.ph-tab.done>i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ph-tab[aria-selected="true"]>i{background:var(--grow);border-color:var(--grow);color:var(--night)}
.ph-tab small{display:block;font:500 .64rem/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grow-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-tab b{display:block;margin-top:5px;font:600 1.04rem/1.2 var(--display);letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.ph-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.ph-tab{padding:22px 10px 11px;gap:9px}.ph-tab>i{width:30px;height:30px;border-radius:9px}.ph-tab b{font-size:.9rem;white-space:normal}.ph-tab small{white-space:normal}.ph-dots{left:10px;right:10px}}
/* the stage */
.ph-stage{display:grid;gap:12px}
.ph{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(16px,2vw,24px);display:grid;gap:20px 28px;min-width:0}
.js .ph:not(.on){display:none}
@media (min-width:1020px){.ph{grid-template-columns:minmax(0,.86fr) minmax(0,1.24fr) minmax(0,.9fr);align-items:start}}
.ph-copy{display:grid;gap:12px;align-content:start}
.ph-copy h3{font-size:1.55rem;letter-spacing:-.022em}
.ph-copy>p:not([class]){color:var(--ink-2);line-height:1.5}
.step-w{font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grow-ink)}
.js .ph-copy .step-w{display:none}   /* the tab above already says it */
/* a step's days. One is open: what we do, what you do. The rest show a name each and whether you are needed. */
.ph-days{display:grid;gap:6px;align-content:start}
.pday{border-radius:14px;border:1px solid var(--line);background:var(--paper);min-width:0;transition:background .3s,border-color .3s,box-shadow .3s}
.pday-h{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:10px;box-sizing:border-box;width:100%;margin:0;padding:9px 10px 9px 12px;border:0;background:none;border-radius:14px;text-align:left;font:inherit;color:inherit}
button.pday-h{cursor:pointer}
button.pday-h:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.pday-d{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.pday-d b{font:600 .9rem/1.2 var(--body)}
.pday-d small{font:400 .66rem/1 var(--mono);color:var(--muted)}
.pday.done .pday-d::before{content:"✓";font:600 .78rem/1 var(--mono);color:var(--grow-ink)}
.pday-s{font:600 .95rem/1.25 var(--body);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pday.done .pday-s,.pday.done .pday-d b{color:var(--ink-2)}
.pday-h em{font:600 .74rem/1 var(--body);font-style:normal;padding:6px 9px;border-radius:999px;background:var(--grow-tint);color:var(--grow-ink);white-space:nowrap}
.pday-h em.free{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-weight:500}
button.pday-h:hover .pday-s{text-decoration:underline;text-underline-offset:3px}
.pday.on{background:var(--card);border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),0 16px 30px -22px rgba(17,24,40,.55)}
.pday.on button.pday-h:hover .pday-s{text-decoration:none}
.pday-x{display:none;gap:9px;padding:3px 14px 14px 12px}
.pday.on .pday-x,html:not(.js) .pday-x{display:grid}
.pday.on .pday-x{animation:swap .45s var(--ease)}
.pday-x p{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:.98rem;line-height:1.42;color:var(--ink-2)}
.pday-x p b{color:var(--ink);font-weight:700}
.pday-x img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 10%}
.pday-you i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--grow-tint);color:var(--grow-ink)}
.pday-you i svg{width:14px;height:14px}
.pday-you.idle span,.pday-you.idle b{color:var(--muted)}
@media (max-width:460px){.pday-h{grid-template-columns:88px minmax(0,1fr) auto;gap:8px;padding-inline:10px 8px}.pday-h em{padding:5px 7px;font-size:.7rem}.pday-s{white-space:normal}}
/* what you get in that step */
.step-pv{display:grid;gap:8px;padding:11px 12px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.pv-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pv-h .stamp{order:0}
.pv-fix{display:grid;gap:5px;counter-reset:f;font-size:.86rem;line-height:1.3}
.pv-fix li{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:baseline;counter-increment:f}
.pv-fix li::before{content:counter(f);display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--ink);color:var(--paper);font:500 .66rem/1 var(--mono)}
.pv-drafts{display:flex;flex-wrap:wrap;gap:6px}
.pv-d{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px 0 8px;margin:0;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font:600 .82rem/1 var(--body);color:var(--ink-2)}
.pv-d svg{width:14px;height:14px;color:var(--line);transition:color .2s}
button.pv-d{cursor:pointer;transition:background .2s,border-color .2s,color .2s}
button.pv-d:hover{border-color:var(--ink)}
button.pv-d[aria-pressed="true"]{background:var(--grow-tint);border-color:transparent;color:var(--grow-ink)}
button.pv-d[aria-pressed="true"] svg{color:var(--grow-large)}
button.pv-d:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.pv-s{font-size:.84rem;line-height:1.35;color:var(--muted)}
.pv-note{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.pv-note i{width:9px;height:9px;border-radius:50%;background:var(--grow);animation:ping 2.4s var(--ease) infinite}
.pv-note b{display:block;font:600 .92rem/1.2 var(--body)}
.pv-note small{display:block;font-size:.8rem;line-height:1.3;color:var(--muted)}
.pv-rep{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:8px;font:400 .68rem/1.2 var(--mono);color:var(--muted)}
.pv-rep b{display:block;font:720 1.12rem/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.pv-rep span:last-child b{color:var(--grow-ink)}   /* small type: the ink green (6.0:1), not the large-numeral one */
.pv-next{display:grid;grid-template-columns:16px 1fr;gap:7px;align-items:center;font-size:.84rem;line-height:1.3;color:var(--ink-2)}
.pv-next svg{width:14px;height:14px;color:var(--grow-large)}
.pv-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;align-items:end;height:34px}
.pv-bars i{height:calc(var(--v)*1%);border-radius:5px 5px 2px 2px;background:var(--paper-2)}
.pv-bars i:last-child{background:var(--grow)}
.step-part{font-size:.88rem;line-height:1.35;color:var(--ink-2);border-top:1px solid var(--line);padding-top:10px}
.step-part b{display:block;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.ph.approved .stamp{display:inline-flex;animation:pop .5s var(--ease)}
.ph .step-pv{background:var(--paper)}
.how-foot{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
#plan-dates{color:var(--grow-ink);font-weight:500}

/* ── Pricing ─────────────────────────────────────────────── */
.tiers{display:grid;gap:16px}
@media (min-width:1020px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:14px}}
.tier{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:16px}
.tier--main{background:var(--night);border-color:var(--night);color:var(--on-night);box-shadow:0 34px 60px -36px rgba(11,15,26,.75)}
@media (min-width:1020px){.tier--main{margin-block:-12px}}
@media (max-width:1019px){.tier--main{order:-1}}
.tier-badge{position:absolute;top:-12px;left:24px;font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:var(--grow-bright);color:var(--night)}
.tier h3{font-size:var(--step-2);letter-spacing:-.025em}
.tier-for{color:var(--ink-2);font-size:.97rem;line-height:1.4;min-height:2.8em}
.tier--main .tier-for{color:var(--on-night-2)}
.tier-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.tier-price b{font:720 clamp(2.4rem,2rem + 1.6vw,3.2rem)/1 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.tier-price span{color:var(--muted);font-size:.95rem}
.tier--main .tier-price span{color:var(--on-night-2)}
.tier-setup{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:.86rem;color:var(--muted)}
.tier--main .tier-setup{color:var(--on-night-2)}
.tier-setup b{font:500 .78rem/1 var(--mono);padding:7px 10px;border-radius:999px;background:var(--grow-tint);color:var(--grow-ink)}
.tier--main .tier-setup b{background:rgba(61,220,132,.16);color:var(--grow-bright)}
.tier-g{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.tier--main .tier-g{border-color:var(--night-line)}
.tier-g h4{font:500 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.tier--main .tier-g h4{color:var(--on-night-2)}
.tier-g li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:.95rem;line-height:1.35}
.tier-g li svg{width:16px;height:16px;margin-top:3px;color:var(--grow-large)}
.tier--main .tier-g li svg{color:var(--grow-bright)}
.tier-g li small{display:block;font-size:.82rem;color:var(--muted)}
.tier--main .tier-g li small{color:var(--on-night-2)}
.tier-g li.no{color:var(--muted)}
.tier-g li.no svg{color:var(--line)}
.tier--main .tier-g li.no{color:#8691A7}.tier--main .tier-g li.no svg{color:var(--night-line)}
.tier-ad{margin-top:auto;font-size:.86rem;line-height:1.4;padding:11px 13px;border-radius:12px;background:var(--paper);color:var(--ink-2)}
.tier-ad b{color:var(--ink);font-family:var(--mono);font-weight:500;font-size:.82rem}
.tier--main .tier-ad{background:rgba(255,255,255,.05);color:var(--on-night-2)}
.tier--main .tier-ad b{color:var(--on-night)}
.tier .btn{justify-content:center}
.pay{margin-top:18px;display:grid;gap:16px 32px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,2.2vw,28px)}
@media (min-width:900px){.pay{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center}}
.pay h3{font-size:var(--step-1)}
.pay p{color:var(--ink-2);font-size:.97rem;line-height:1.45;margin-top:8px}
.pay-flow{display:grid;gap:8px}
.pay-flow li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;font-size:.92rem}
.pay-flow span{padding:10px 12px;border-radius:12px;background:var(--paper);font-weight:600;line-height:1.25}
.pay-flow span small{display:block;font:400 .7rem/1.3 var(--mono);color:var(--muted);margin-top:3px}
.pay-flow i{font:500 .68rem/1 var(--mono);color:var(--muted);text-align:center;white-space:nowrap;font-style:normal}
.pay-flow i::after{content:"";display:block;height:2px;margin-top:5px;background:var(--ink);border-radius:2px}
.pay-flow li.us i::after{background:var(--grow)}
.fineprint{margin-top:14px;font:400 .78rem/1.5 var(--mono);color:var(--muted)}

/* pricing, second pass: a bar of choices above the plans, groups lined up across the three cards,
   a break-even line, and the plan that fits marked */
.pcontrols{display:grid;gap:14px 30px;margin-bottom:28px;padding:16px 18px;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line)}
@media (min-width:980px){.pcontrols{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.pc-fit{display:grid;gap:10px}
.pc-say{font-size:.95rem;line-height:1.4;color:var(--ink-2);min-height:2.8em}
.pc-biz{display:grid;gap:9px;padding-top:12px;border-top:1px dashed var(--line)}
.pc-biz .try{gap:6px}
.pb-b{min-height:34px;padding:0 11px 0 9px;font-size:.84rem;gap:6px}
.pb-b svg{width:14px;height:14px}
.pc-opts{display:grid;gap:8px}
.pc-opts p{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pc-opts .seg{margin-left:0}
.stepper--light{border-color:var(--line)}
.stepper--light button{background:var(--paper-2);color:var(--ink)}
.stepper--light button:hover{background:var(--line)}
.stepper--light output{min-width:3.6em;font-size:1.05rem;color:var(--ink)}
.tier{transition:box-shadow .35s,border-color .35s}
.tier.fit{border-color:var(--grow);box-shadow:0 0 0 2px var(--grow)}
.tier--main.fit{box-shadow:0 0 0 2px var(--grow-bright),0 34px 60px -36px rgba(11,15,26,.75)}
.tier.fit::after{content:"Your fit";position:absolute;top:-12px;right:22px;font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:var(--grow);color:var(--night)}
.tier-pay{font-size:.92rem;line-height:1.35;color:var(--ink-2);padding:10px 12px;border-radius:12px;background:var(--paper)}
.tier-pay b{color:var(--ink);font-weight:700}
.tier-pay small{display:block;font-size:.78rem;color:var(--muted)}
.tier--main .tier-pay{background:rgba(255,255,255,.05);color:var(--on-night-2)}
.tier--main .tier-pay b{color:var(--grow-bright)}
.tier--main .tier-pay small{color:var(--on-night-2)}
.tier-g li{border-radius:8px;margin-inline:-6px;padding:2px 6px;transition:background .2s}
.tier-g li.hot{background:var(--paper)}
.tier--main .tier-g li.hot{background:rgba(255,255,255,.08)}
.tiers.diff .tier-g li.same{display:none}
/* wide screens: the three cards share their rows, so each group starts level across all three */
@media (min-width:1020px){@supports (grid-template-rows:subgrid){
  .tier{display:grid;grid-template-rows:subgrid;grid-row:span 10;row-gap:16px}
  .tier-ad{margin-top:0;align-self:end}
}}
/* IHERO Growth's logo: the two eyes are green wherever the mark appears */
.eye{fill:var(--grow-bright)}

/* ── Rules ───────────────────────────────────────────────── */
/* Six cards: the rule, a small example of it at work (.rdemo), and "try to bend it". A refused try
   shakes the card (.nope), turns its chip to "Held · N×" (.tested) and adds to the tally underneath. */
/* the bar above the cards: a pip per rule (lit once tried, and a jump to its card), how many are tried,
   and a button that tries the first bend of each for the visitor */
.rules-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px;padding:12px 14px 12px 18px;border-radius:var(--r-l);background:var(--night-2);border:1px solid var(--night-line);transition:border-color .35s}
.rules-bar.all{border-color:var(--grow-bright)}
.rules-pips{display:flex;gap:6px}
.rules-pips button{all:unset;box-sizing:border-box;cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--night-line);font:600 .78rem/1 var(--mono);color:var(--on-night-2);transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease)}
.rules-pips button:hover{border-color:var(--on-night);color:var(--on-night)}
.rules-pips button:focus-visible{outline:2px solid var(--grow-bright);outline-offset:2px}
.rules-pips button.on{background:var(--grow-bright);border-color:var(--grow-bright);color:var(--night)}
.rules-pips button.pop{animation:ftick .5s var(--ease)}
.rules-go{flex:1 1 220px;font-size:1rem;line-height:1.4;color:var(--on-night-2)}
.rules-go b{color:var(--on-night);font-weight:600}
.rules-auto{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 13px;border-radius:999px;border:1.5px solid var(--on-night);font:600 .9rem/1 var(--body);color:var(--on-night);white-space:nowrap;transition:background .2s,color .2s,opacity .2s}
.rules-auto:hover{background:var(--on-night);color:var(--night)}
.rules-auto:focus-visible{outline:2px solid var(--grow-bright);outline-offset:2px}
.rules-auto[aria-disabled="true"]{opacity:.5;cursor:default;background:none;color:var(--on-night)}
.rules-g{display:grid;gap:14px}
@media (min-width:700px){
  .rules-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* cards in a row share their six rows, so titles, examples and "try to bend it" line up */
  @supports (grid-template-rows:subgrid){
    .rules-g .rule{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:11px}
    .rules-g .rdemo{margin-top:0;align-content:center}
  }
}
@media (min-width:1100px){.rules-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rule{position:relative;background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r-l);padding:18px 18px 20px;display:flex;flex-direction:column;gap:11px;min-width:0;transition:border-color .35s}
.rule.tested{border-color:color-mix(in srgb,var(--grow-bright) 55%,var(--night-line))}
.rule.peek{border-color:var(--on-night);box-shadow:0 0 0 2px var(--on-night)}   /* pointed at from its pip */
.rule.nope{animation:nope .4s var(--ease)}
@keyframes nope{0%,100%{translate:0}20%{translate:-7px}45%{translate:6px}70%{translate:-3px}}
.rule-top{display:flex;align-items:center;gap:10px}
.rule-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(61,220,132,.12);color:var(--grow-bright);flex:none}
.rule-ic svg{width:22px;height:22px}
.rule-chip{font:500 .64rem/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--night-line);color:var(--on-night-2);transition:background .3s,color .3s,border-color .3s}
.rule.tested .rule-chip{background:var(--grow-bright);border-color:var(--grow-bright);color:var(--night)}
.rule-n{margin-left:auto;font:720 2.5rem/.8 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.2px #4A5674;transition:-webkit-text-stroke-color .35s}
.rule.said .rule-n{-webkit-text-stroke-color:var(--grow-bright)}
.rule h3{font-size:1.24rem}
.rule p:not([class]){font-size:.95rem;line-height:1.45;color:var(--on-night-2)}
.rdemo{margin-top:auto;display:grid;gap:9px;padding:12px;border-radius:14px;background:var(--night);border:1px solid var(--night-line);font-size:.9rem;line-height:1.3}
.rule .try{gap:6px 7px;align-content:flex-start}
.rule .try-l{flex-basis:100%;margin:0}
.rule .try-b{min-height:36px;padding:0 12px;font-size:.84rem}
/* the answer comes from the person who holds the rule: his picture is grey until he has something to say */
.rule-say{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:.92rem;line-height:1.4;color:var(--on-night-2);min-height:2.9em}
.rule-say span{padding-top:4px}
.rule-av{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 10%;opacity:.4;filter:grayscale(1);transition:opacity .3s,filter .3s}
.rule.said .rule-av{opacity:1;filter:none}
.rule.said .rule-say{color:var(--on-night)}
/* pieces the examples are built from */
.r-list{display:grid;gap:7px}
.r-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.r-list b{display:block;font-weight:600;color:var(--on-night)}
.r-list small{display:block;font-size:.8rem;color:var(--on-night-2)}
.r-list s{color:var(--on-night-2)}
.r-ok,.r-no{font:500 .62rem/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;white-space:nowrap}
.r-ok{background:rgba(61,220,132,.16);color:var(--grow-bright)}
.r-no{box-shadow:inset 0 0 0 1px var(--on-night-2);color:var(--on-night)}
.r-foot{display:flex;align-items:center;gap:8px;padding-top:9px;border-top:1px dashed var(--night-line);font-size:.84rem;color:var(--on-night-2)}
.r-foot svg{width:15px;height:15px;flex:none}
.rule.left .r-foot,.rule.counted .r-foot,.rule.stopped .r-foot{color:var(--grow-bright)}
.r-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--on-night-2)}
.r-row b{font:500 .95rem/1 var(--mono);color:var(--on-night);font-variant-numeric:tabular-nums}
.r-bar{display:block;height:10px;border-radius:999px;background:var(--night-line);position:relative;overflow:hidden;margin-top:-3px}
.r-bar::after{content:"";position:absolute;inset:0;width:calc(var(--v)*1%);border-radius:inherit;background:var(--on-night-2);transition:width .5s var(--ease)}
.r-bar--fee::after{background:var(--grow-bright)}
.rule .stepper output{min-width:3.6em;font-size:1.05rem}
.r-banner{display:grid;gap:9px;padding:11px 12px;border-radius:11px;background:var(--night-2);border:1px solid var(--night-line)}
.r-banner>p:first-child{color:var(--on-night);font-weight:600}
.r-btns{display:flex;flex-wrap:wrap;gap:6px}
.r-ad{display:grid;gap:7px;justify-items:start}
.r-ad small{font:500 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
.r-ad>b{font:720 1.08rem/1.2 var(--display);letter-spacing:-.015em;color:var(--on-night)}
.r-ad .r-list{width:100%}
.r-prom{display:grid;gap:6px;color:var(--on-night)}
.r-prom li{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:center}
.r-prom svg{width:16px;height:16px;color:var(--grow-bright)}
/* the tally under the six */
.rules-sum{margin-top:14px;display:grid;gap:12px 26px;align-items:center;padding:16px clamp(16px,2vw,24px);border-radius:var(--r-l);background:var(--night-2);border:1px solid var(--night-line)}
@media (min-width:900px){.rules-sum{grid-template-columns:auto minmax(0,1fr) auto}}
.rules-sum .sum-n b{color:var(--grow-bright)}
.rules-sum .sum-n span{color:var(--on-night-2)}
.rules-line{font-size:var(--step-1);line-height:1.35;color:var(--on-night)}

/* ── About ───────────────────────────────────────────────── */
.about .wrap{display:grid;gap:clamp(24px,4vw,60px);align-items:center}
@media (min-width:900px){.about .wrap{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
figure{margin:0}
/* The frame: the photo with "Ask me" underneath. On the first question the photo folds away and the
   frame becomes a conversation (.chatting); "Back to the photo" undoes it. Without the script it
   is simply the photo. On wide screens the frame keeps one height either way. */
.pt{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-l);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(17,24,40,.5)}
@media (min-width:900px){.pt{height:640px}}
.pt-photo{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:var(--ink)}
.pt-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
@media (max-width:899px){.pt-photo{flex:none;aspect-ratio:5/4}}
.pt.chatting .pt-photo{display:none}
.pt-photo figcaption,.pt-now{position:absolute;left:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(11,15,26,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--on-night);font:500 .74rem/1 var(--mono);letter-spacing:.05em}
.pt-photo figcaption{bottom:12px}
.pt-photo figcaption svg{width:13px}
.pt-now{top:12px}
.pt-now i{width:8px;height:8px;border-radius:50%;background:var(--grow-bright);animation:ping 2.4s var(--ease) infinite}
.pt-now b{font-weight:500;font-variant-numeric:tabular-nums}
.pt-head{display:none;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pt.chatting .pt-head{display:flex}
.pt-av{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 10%;flex:none}
.pt-head b{display:block;font:700 1rem/1.15 var(--display)}
.pt-head small{display:block;font:400 .72rem/1.3 var(--mono);color:var(--muted)}
.pt-head .try-b{margin-left:auto;min-height:34px;padding:0 12px;font-size:.82rem}
.pt-thread{display:none;flex:1 1 auto;min-height:0;overflow-y:auto;flex-direction:column;gap:8px;padding:14px;background:var(--paper)}
.pt.chatting .pt-thread{display:flex}
@media (max-width:899px){.pt.chatting .pt-thread{min-height:200px;max-height:320px}}
.ab{max-width:88%;padding:9px 12px;font-size:.94rem;line-height:1.4;animation:swap .4s var(--ease)}
.ab--q{align-self:flex-end;background:var(--ink);color:var(--paper);border-radius:14px 14px 4px 14px}
.ab--a{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 4px}
.ab--typing{letter-spacing:.25em;color:var(--muted)}
.ab a{display:inline-block;margin-top:4px;font-weight:600;color:var(--ink);text-underline-offset:3px}
.pt-ask{display:grid;gap:10px;padding:14px;border-top:1px solid var(--line);background:var(--card)}
/* what he says before anyone has asked anything: a speech bubble over the questions */
.pt-hi{justify-self:start;margin:0;padding:9px 13px;border-radius:4px 14px 14px 14px;background:var(--paper);border:1px solid var(--line);font-size:.96rem;line-height:1.35;color:var(--ink)}
.pt.chatting .pt-hi{display:none}
.pt-pills{display:flex;flex-wrap:wrap;gap:6px}
.pt-pills .try-b{min-height:36px;padding:0 12px;font-size:.86rem}
.pt-pills .try-b.asked{background:var(--grow-tint);border-color:transparent;color:var(--grow-ink)}
#ask-form{display:flex;gap:8px}
#ask-form input{flex:1;min-width:0;height:42px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);padding:0 15px;font:400 1rem/1 var(--body);color:var(--ink);transition:border-color .2s}
#ask-form input::placeholder{color:var(--muted)}
#ask-form input:hover{border-color:var(--ink-2)}
#ask-form input:focus-visible{outline:2px solid var(--grow);outline-offset:2px;border-color:var(--ink)}
#ask-form .try-b{border-color:var(--ink)}
#ask-form .try-b:hover{background:var(--ink);color:var(--paper)}
.about-copy{display:grid;gap:18px;justify-items:start}
.about-copy p:not([class]){color:var(--ink-2);max-width:56ch}
.about-copy p.big{font-size:var(--step-1);line-height:1.4;color:var(--ink);max-width:50ch}
/* "go and look": the three things the page offers in place of client logos */
.about-find{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:-6px}
.about-find a{text-decoration:none;color:var(--ink);min-height:38px;padding:0 13px;font-size:.9rem}
.about-find a:hover{border-color:var(--ink)}
/* three facts as a ruled list: icon, what it is, what it means for you. One line each where there is room. */
.facts{display:grid;width:100%;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:34px minmax(0,150px) minmax(0,1fr);gap:4px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:.97rem;line-height:1.35;color:var(--ink-2)}
.facts li>span{display:contents}
.facts svg{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--grow-tint);color:var(--grow-ink)}
.facts b{font:600 1.04rem/1.2 var(--display);color:var(--ink)}
@media (max-width:620px){.facts li{grid-template-columns:34px minmax(0,1fr)}.facts li>span{display:block}.facts b{display:block;margin-bottom:2px}}
.about-go{display:flex;flex-wrap:wrap;gap:10px}
.about-go .btn--ghost svg{width:17px;height:17px}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{background:var(--card);border-top:1px solid var(--line)}
.faq .wrap{display:grid;gap:clamp(24px,4vw,56px)}
@media (min-width:980px){.faq .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
/* the side stays beside the list while it is read, on screens tall enough to hold it
   (about 770px with the "all read" line showing, under an 88px header offset) */
@media (min-width:980px) and (min-height:880px){.faq-side{position:sticky;top:calc(var(--header-h) + 20px)}}
.faq-side{display:grid;gap:16px;justify-items:start}
.faq-side>p:not([class]){color:var(--ink-2);max-width:40ch}
/* "Find yours": a word or a topic brings the matching questions to the top and fades the rest.
   Nothing is removed from the list, so the page never jumps. */
.faq-find{width:100%;display:grid;gap:10px;padding:14px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line)}
#faq-form{display:flex;gap:8px}
#faq-form input{flex:1;min-width:0;height:42px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);padding:0 15px;font:400 1rem/1 var(--body);color:var(--ink);-webkit-appearance:none;appearance:none;transition:border-color .2s}
#faq-form input::placeholder{color:var(--muted)}
#faq-form input::-webkit-search-cancel-button{-webkit-appearance:none}
#faq-form input:hover{border-color:var(--ink-2)}
#faq-form input:focus-visible{outline:2px solid var(--grow);outline-offset:2px;border-color:var(--ink)}
#faq-form .try-b{border-color:var(--ink)}
#faq-form .try-b:hover{background:var(--ink);color:var(--paper)}
.faq-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:400 .76rem/1 var(--mono);color:var(--muted)}
.faq-w{all:unset;box-sizing:border-box;cursor:pointer;min-height:28px;padding:0 10px;border-radius:999px;border:1px dashed var(--line);display:inline-flex;align-items:center;font:500 .76rem/1 var(--mono);color:var(--ink-2);transition:border-color .2s,color .2s}
.faq-w:hover{border-color:var(--ink);color:var(--ink)}
.faq-w:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.faq-topics{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px;border-top:1px dashed var(--line)}
.faq-topics .try-b{min-height:36px;padding:0 9px 0 12px;font-size:.86rem;gap:7px}
.faq-topics .try-b i{font:500 .68rem/1 var(--mono);font-style:normal;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--paper-2);color:var(--ink-2);display:grid;place-items:center}
.faq-topics .try-b[aria-pressed="true"] i{background:rgba(255,255,255,.16);color:var(--paper)}
.faq-say{font-size:.9rem;line-height:1.4;color:var(--ink-2);min-height:2.8em}
.faq-say a{color:var(--ink);font-weight:600;text-underline-offset:3px}
/* the map: one tile per question. Tap one to open it; read ones are ticked, the open one is dark. */
.faq-map{width:100%;display:grid;gap:10px}
.faq-map-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.faq-map-h p{font:400 .8rem/1 var(--mono);color:var(--muted);white-space:nowrap}
.faq-map-h p b{font:720 1.3rem/1 var(--display);color:var(--ink);letter-spacing:-.02em;margin-right:2px}
.faq-map-h .try-b{min-height:36px;padding:0 12px;font-size:.84rem}
.faq-tiles{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
@media (max-width:460px){.faq-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.faq-t{all:unset;box-sizing:border-box;cursor:pointer;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;font:500 .72rem/1 var(--mono);color:var(--ink-2);transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease),opacity .3s}
.faq-t b{font-weight:500}
.faq-t svg{display:none;width:15px;height:15px}
.faq-t:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.faq-t:focus-visible{outline:2px solid var(--grow);outline-offset:2px}
.faq-t.read{background:var(--grow-tint);border-color:transparent;color:var(--grow-ink)}
.faq-t.read b{display:none}
.faq-t.read svg{display:block}
.faq-t.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.faq-t.on b{display:block}
.faq-t.on svg{display:none}
.faq-t.dim{opacity:.4}
.faq-t.tick{animation:ftick .5s var(--ease)}
@keyframes ftick{0%{transform:scale(.8)}60%{transform:scale(1.14)}100%{transform:none}}
.faq-done{font-size:.92rem;line-height:1.45;color:var(--ink);padding:11px 13px;border-radius:12px;background:var(--grow-tint)}
.faq-done a{color:var(--grow-ink);font-weight:600;white-space:nowrap;text-underline-offset:3px}
/* a face to ask when the list does not have it */
.faq-ask{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 18px 9px 9px;border-radius:999px;border:1px solid var(--line);background:var(--paper);text-decoration:none;transition:border-color .25s,background .25s}
.faq-ask:hover{border-color:var(--ink);background:var(--card)}
.faq-ask img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 10%}
.faq-ask b{display:block;font:600 1rem/1.2 var(--display);letter-spacing:-.01em}
.faq-ask small{display:block;margin-top:2px;font-size:.86rem;line-height:1.3;color:var(--ink-2)}
.faq-ask .arr{transition:transform .35s var(--ease)}
.faq-ask:hover .arr{transform:translateX(3px)}
/* the list: number (a tick once read), question with its short answer, topic, chevron */
.qa{display:grid;gap:10px}
.qa details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);transition:background .25s,border-color .25s,opacity .3s}
.qa details:not([open]):hover{background:var(--card);border-color:color-mix(in srgb,var(--ink) 40%,var(--line))}
.qa details[open]{background:var(--card);border-color:var(--ink)}
/* pointed at from its tile in the map */
.qa details.peek{border-color:var(--grow);box-shadow:0 0 0 3px var(--grow-tint)}
.qa details.dim{opacity:.38}
.qa details.dim[open],.qa details.dim:hover,.qa details.dim:focus-within{opacity:1}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-m)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa-n{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--card);border:1px solid var(--line);font:500 .72rem/1 var(--mono);color:var(--muted);transition:background .3s,color .3s,border-color .3s}
.qa-n svg{display:none;width:16px;height:16px}
.qa details.read .qa-n{background:var(--grow-tint);border-color:transparent;color:var(--grow-ink)}
.qa details.read .qa-n b{display:none}
.qa details.read .qa-n svg{display:block}
.qa details[open] .qa-n{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qa-q>b{display:block;font:600 1.06rem/1.25 var(--display);letter-spacing:-.01em}
.qa-q small b{color:var(--ink);font-weight:600}
.qa-q small{display:block;margin-top:3px;font-size:.9rem;line-height:1.35;color:var(--ink-2)}
.qa details[open] .qa-q small{display:none}
.qa-tag{font:500 .62rem/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:5px 9px 5px 7px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.qa-tag svg{width:12px;height:12px;flex:none}
.faq-topics .try-b svg{width:14px;height:14px;flex:none}
@media (max-width:620px){.qa-tag{display:none}.qa summary{grid-template-columns:auto minmax(0,1fr) auto;gap:11px;padding:13px 12px}}
.qa-a{padding:0 16px 16px 64px;display:grid;gap:10px;color:var(--ink-2);font-size:.99rem;line-height:1.5}
.qa-a>p:not([class]){max-width:64ch}
@media (max-width:620px){.qa-a{padding-left:12px}}
.qa-a b{color:var(--ink)}
.qa-a a:not(.link){color:var(--ink);font-weight:600;text-underline-offset:3px}
.qa-go{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding-top:4px}
.qa-go .link{color:var(--ink);font-size:.95rem}
.qa-go .try-b{min-height:36px;padding:0 12px;font-size:.84rem;margin-left:auto}
.qa-go a.qa-ask{display:inline-flex;align-items:center;gap:7px;min-height:36px;font-size:.9rem;font-weight:600;color:var(--ink-2);text-decoration:none}
.qa-go a.qa-ask svg{width:15px;height:15px;color:var(--grow-ink)}
.qa-go a.qa-ask:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* answers ease open where the browser can animate to auto height */
@supports (interpolate-size:allow-keywords){@media (prefers-reduced-motion:no-preference){
  .qa{interpolate-size:allow-keywords}
  .qa details::details-content{block-size:0;overflow:clip;transition:block-size .36s var(--ease),content-visibility .36s allow-discrete}
  .qa details[open]::details-content{block-size:auto}
}}

/* ── Final CTA ───────────────────────────────────────────── */
.final{background:radial-gradient(46rem 26rem at 84% 6%,rgba(61,220,132,.12),transparent 70%),var(--night);color:var(--on-night);padding-block:clamp(3.75rem,7vw,6rem)}
.final .wrap{display:grid;gap:clamp(22px,3vw,36px)}
.final-top{display:grid;gap:clamp(18px,4vw,56px);align-items:center}
@media (min-width:900px){.final-top{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}}
.final-copy{display:grid;gap:18px;justify-items:start}
.final-sub{color:var(--on-night-2);font-size:var(--step-1);line-height:1.45;max-width:46ch}
.final-ticks{display:grid;gap:8px;color:var(--on-night)}
.final-ticks li{display:grid;grid-template-columns:20px 1fr;gap:10px;line-height:1.4}
.final-ticks svg{width:18px;height:18px;margin-top:3px;color:var(--grow-bright)}
/* Closing shield: the family's signature move (IHERO Media v3, IHERO Desk). The outline draws
   itself, then the white logo fills in. On IHERO Growth the two eyes are green: their outlines
   draw in green and they fill from the bottom up. Pointing at it draws it again. */
.final-mark{position:relative;display:grid;place-items:center}
.final-mark::before{content:"";position:absolute;inset:4% 8%;background:radial-gradient(closest-side,rgba(61,220,132,.3),transparent);filter:blur(36px);pointer-events:none}
.shield{position:relative;width:min(100%,250px);overflow:visible}
@media (max-width:899px){.final-mark{order:-1;justify-items:start}.final-mark::before{display:none}.shield{width:92px}}
.shield.reset .fill,.shield.reset .eye-fill{transition:none}
.shield > path:not(.fill){fill:none;stroke:var(--on-night);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.shield > path.eye-line{stroke:var(--grow-bright)}
.shield .fill{fill:#fff;transition:opacity .9s ease 1.7s}
.shield .eye-fill{fill:var(--grow-bright);transform-box:fill-box;transform-origin:50% 100%;transition:transform 1.1s var(--ease) 2.2s}
.reveal-on .shield:not(.drawn) > path:not(.fill){stroke-dashoffset:1}
.reveal-on .shield:not(.drawn) .fill{opacity:0}
.reveal-on .shield:not(.drawn) .eye-fill{transform:scaleY(0)}
.shield.drawn > path:not(.fill){animation:outline 2.2s var(--ease-io) both}
.shield.drawn > path.eye-line{animation-delay:.4s}
@keyframes outline{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Message builder: the questions on the left, the message as it will be sent on the right */
.fbuild{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r-l);padding:clamp(18px,2.2vw,28px);display:grid;gap:22px clamp(22px,3vw,44px)}
@media (min-width:980px){.fbuild{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:start}}
.fb-q{display:grid;gap:16px;align-content:start;min-width:0}
.fb-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.fb-h h3{font-size:var(--step-1)}
.fb-meter{display:inline-flex;align-items:center;gap:5px;font:400 .74rem/1 var(--mono);color:var(--on-night-2)}
.fb-meter i{width:18px;height:5px;border-radius:99px;background:var(--night-line);transition:background .3s}
.fb-meter i.on{background:var(--grow-bright)}
.fb-meter span{margin-left:6px}
.fb-set{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.fb-set legend,.fb-name>span{font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2);padding:0;margin-bottom:10px}
.fb-set .pills{gap:6px}
.fb-set .pills span{min-height:38px;padding:0 13px 0 11px;font-size:.88rem}
.fb-set .pills svg{width:15px;height:15px;margin-right:7px;flex:none}
.fb-name{display:grid;justify-items:start}
.fb-name input{width:min(100%,340px);height:42px;border-radius:999px;border:1.5px solid var(--night-line);background:var(--night);padding:0 16px;font:400 1rem/1 var(--body);color:var(--on-night);transition:border-color .2s}
.fb-name input::placeholder{color:#7C879D}
.fb-name input:hover{border-color:var(--on-night-2)}
.fb-name input:focus-visible{outline:2px solid var(--grow-bright);outline-offset:2px;border-color:var(--on-night)}
.fb-out{display:grid;gap:14px;align-content:start;padding:16px;border-radius:18px;background:var(--night);border:1px solid var(--night-line);min-width:0}
@media (min-width:980px){.fb-out{position:sticky;top:calc(var(--header-h) + 20px)}}
.fb-l{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
.fb-l span{margin-right:auto}
.fb-mini{all:unset;box-sizing:border-box;cursor:pointer;min-height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--night-line);display:inline-flex;align-items:center;font:500 .7rem/1 var(--mono);letter-spacing:.04em;text-transform:none;color:var(--on-night);transition:border-color .2s,background .2s}
.fb-mini:hover{border-color:var(--on-night-2);background:rgba(255,255,255,.05)}
.fb-mini:focus-visible{outline:2px solid var(--grow-bright);outline-offset:2px}
.fb-chat{display:grid;gap:6px;justify-items:end}
.fb-msg{background:#123C2B;border-radius:16px 16px 4px 16px;padding:13px 15px;font-size:1rem;line-height:1.5;color:var(--on-night);min-height:6em;width:100%;overflow-wrap:anywhere}
.fb-msg mark{background:rgba(61,220,132,.2);color:inherit;border-radius:4px;padding:0 3px;transition:background 1.4s}
.fb-msg mark.new{background:rgba(61,220,132,.7);transition:none}
.fb-sent{font:400 .7rem/1 var(--mono);color:var(--on-night-2)}
.fb-extras{display:grid;gap:8px}
.fb-extras p{font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-2)}
#fb-chips{display:flex;flex-wrap:wrap;gap:6px}
.fb-chip{all:unset;box-sizing:border-box;cursor:pointer;min-height:32px;padding:0 11px;border-radius:999px;background:rgba(61,220,132,.14);color:var(--grow-bright);display:inline-flex;align-items:center;font:600 .82rem/1 var(--body);transition:background .2s}
.fb-chip:hover{background:rgba(61,220,132,.26)}
.fb-chip:focus-visible{outline:2px solid var(--grow-bright);outline-offset:2px}
.fb-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.fb-go small{font:400 .78rem/1.4 var(--mono);color:var(--on-night-2);display:inline-flex;align-items:center;gap:.6ch}
.fb-go small a{display:inline-flex;align-items:center;min-height:44px}
/* what happens after the message is sent */
.final-next{display:grid;gap:12px}
@media (min-width:860px){.final-next{grid-template-columns:repeat(3,minmax(0,1fr))}}
.final-next li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;padding:16px;border-radius:var(--r-m);border:1px solid var(--night-line);font-size:.93rem;line-height:1.4;color:var(--on-night-2)}
.final-next b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--grow-bright);color:var(--grow-bright);font:500 .8rem/1 var(--mono)}
.final-next strong{display:block;font:700 1.04rem/1.25 var(--display);color:var(--on-night);margin-bottom:3px}

/* ── Footer ──────────────────────────────────────────────── */
/* Laid out like IHERO Media's footer (the owner's standard): the brand with the time in Malta,
   contact rows with an icon tile, the page index (two columns, a tick once a section has been
   seen), the sister brands with their own marks; then a band with a scan-to-WhatsApp code and
   "save our contact"; then the legal row. A faint shield sits behind it all. */
.ftr{position:relative;overflow:hidden;background:#080B13;color:var(--on-night-2);padding-block:3.25rem calc(1.5rem + env(safe-area-inset-bottom,0px));font-size:.93rem}
.ftr::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,var(--night-line),var(--grow) 22%,#59D69C 34%,var(--night-line) 62%)}
.ftr-wm{position:absolute;right:3%;bottom:-110px;width:min(380px,60%);color:#fff;opacity:.028;pointer-events:none}
.ftr .wrap{position:relative}
.ftr-grid{display:grid;gap:2.2rem}
@media (min-width:620px){.ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr-nav{grid-column:1/-1}}
@media (min-width:1100px){.ftr-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1.05fr) minmax(0,1.9fr) minmax(0,.95fr);column-gap:clamp(1.4rem,2.6vw,2.4rem)}.ftr-nav{grid-column:auto}}
.ftr a{text-decoration:none;color:var(--on-night)}
.ftr a.brand{color:#fff}
.ftr-line{margin-top:1rem;max-width:36ch;line-height:1.5}
.ftr-now{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .85rem;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--night-line);font-size:.88rem;line-height:1.35}
.ftr-now i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--grow-bright);animation:ping 2.4s var(--ease) infinite}
.ftr-now b{color:var(--on-night);font:500 .9rem/1 var(--mono);font-variant-numeric:tabular-nums}
.ftr-h{margin:0 0 1rem;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-night-2)}
#ftr-seen{color:var(--grow-bright)}
.ftr ul{display:grid;gap:.3rem}
.ftr-row{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;padding:.2rem .6rem .2rem .2rem;border-radius:14px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;transition:background-color .2s,translate .3s var(--ease)}
.ftr-row:hover{background:rgba(255,255,255,.05);translate:2px 0}
.fi{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--grow-bright);transition:background .25s}
.ftr-row:hover .fi{background:rgba(61,220,132,.16)}
.fi svg{width:18px;height:18px}
.fi--plain{color:var(--on-night)}
.fi--plain svg,.fi--plain img{width:15px;height:auto}
.ftr-row b{display:block;font:600 .97rem/1.25 var(--body);color:var(--on-night)}
.ftr-row small{display:block;font-size:.8rem;line-height:1.3;color:var(--on-night-2)}
/* the page index */
.ftr-idx{display:grid;gap:2px 14px}
@media (min-width:480px){.ftr-idx{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ftr-idx a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-height:44px;padding:4px 8px 4px 4px;border-radius:12px;transition:background-color .2s}
.ftr-idx a:hover{background:rgba(255,255,255,.05)}
.ftr-idx i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;border:1.5px solid var(--night-line);color:transparent;transition:background .3s,border-color .3s,color .3s}
.ftr-idx i svg{width:13px;height:13px}
.ftr-idx a.seen i{background:rgba(61,220,132,.16);border-color:transparent;color:var(--grow-bright)}
.ftr-idx b{display:block;font:600 .95rem/1.2 var(--body);color:var(--on-night)}
.ftr-idx small{display:block;font-size:.78rem;line-height:1.3;color:var(--on-night-2)}
.ftr-skip{margin-top:.7rem;font:400 .78rem/1.4 var(--mono)}
.ftr-skip a{color:var(--grow-bright);display:inline-flex;align-items:center;min-height:32px}
.ftr-skip a:hover{text-decoration:underline;text-underline-offset:3px}
/* the band: scan the code on a computer, save the contact on a phone */
.ftr-band{margin-top:2.2rem;display:grid;gap:14px 26px;align-items:center;padding:16px 18px;border-radius:var(--r-l);background:rgba(255,255,255,.035);border:1px solid var(--night-line)}
@media (min-width:860px){.ftr-band{grid-template-columns:auto minmax(0,1fr) auto}}
.ftr-qr{width:124px;height:124px;border-radius:12px;background:#fff}
.ftr-band-h{font:700 1.15rem/1.2 var(--display);color:var(--on-night);margin-bottom:5px}
.ftr-band-t p:not([class]){max-width:40ch;line-height:1.45}
@media (max-width:859px){.ftr-qr,.ftr-band-t{display:none}}   /* a phone cannot scan its own screen */
.ftr-legal{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;font:400 .78rem/1.5 var(--mono)}
.ftr-legal a{color:var(--on-night-2);min-height:44px;display:inline-flex;align-items:center}
.ftr-legal a:hover{color:var(--on-night)}

/* ── 404 ─────────────────────────────────────────────────── */
.nf{min-height:100svh;display:grid;place-items:center;padding:var(--gutter);text-align:center}
.nf div{display:grid;gap:18px;justify-items:center;max-width:44ch}
.nf p{color:var(--ink-2)}

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