/* ============================================================
   Cherry Digital: main.css

   Neutral paper and near-black, with one cherry. Cherry marks the
   thing to press and the thing to notice, and nothing else.
   Light and dark follow the visitor's system setting until they
   use the switch in the nav, and no section flips theme halfway
   down a page.

   Shape rule: containers (panels, tiles, screenshots, tier cards,
   the cookie notice) take --r-lg; controls (buttons, fields,
   tags) take --r-sm. Step markers and initials are circles.
   Nothing else gets a corner.

   Icons are Phosphor (MIT, phosphoricons.com), bold weight, inlined
   from templates/icons/. No framework, no build step, one font file.
   ============================================================ */

/* ---------- 1. Font ---------- */
/* Schibsted Grotesk (OFL): one variable file carries every weight, 47 KB.
   Served from our own server, so loading a page sends nothing to
   Google, which is what keeps the EU-data claim honest. */
@font-face{font-family:'Schibsted';src:url('/static/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2');font-weight:400 900;font-display:swap}

/* ---------- 2. Tokens ---------- */
:root{
  color-scheme:light;

  /* Cherry for fills and large type: white on it is 4.6:1. Small cherry
     text uses --cherry-text, which clears 4.5:1 on every surface. */
  --cherry:#E8102F;
  --cherry-press:#C20D27;
  --cherry-text:#C40E2A;
  --cherry-wash:#FBE8EB;
  --on-cherry:#FFFFFF;
  /* The white button on the cherry panel looks the same in both themes. */
  --on-cherry-btn-ink:#111113;
  --on-cherry-btn-hover:#F1F1EE;

  --bg:#F4F4F2;
  --surface:#FCFCFB;
  --sunk:#EAEAE6;
  --ink:#111113;
  --ink-2:#36363C;
  --muted:#5B5B63;
  --line:#DCDCD7;
  /* The edge of a control. --line is too faint for that job; this
     clears the 3:1 that WCAG 1.4.11 asks of a field's border. */
  --edge:#85858D;
  /* Device bezels stay dark in both themes, as hardware does. */
  --frame:#1B1B1E;
  --shadow:0 1px 2px rgb(17 17 19 / .05),0 20px 40px -20px rgb(17 17 19 / .25);
  /* The dot grid behind the page, and the dots under the pointer. */
  --dot:rgb(17 17 19 / .13);
  --dot-hi:rgb(17 17 19 / .4);

  --f:'Schibsted',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --sp-1:.5rem;--sp-2:1rem;--sp-3:1.5rem;--sp-4:2rem;
  --sp-5:3rem;--sp-6:clamp(3.5rem,6vw,4.5rem);--sp-7:clamp(4.5rem,9vw,7.5rem);

  --wrap:1200px;
  --narrow:720px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --r-lg:16px;
  --r-sm:10px;
  --nav-h:68px;

  --ease:cubic-bezier(.16,1,.3,1);

  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
}

/* Dark follows the system setting unless the visitor picked light with the
   switch, and applies whenever they picked dark. data-theme is set by
   theme.js before first paint. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --cherry-text:#FF5A6E;
    --cherry-wash:#2B1519;
    --bg:#0F0F11;
    --surface:#18181B;
    --sunk:#0A0A0B;
    --ink:#F2F2EF;
    --ink-2:#D2D2D5;
    --muted:#A3A3AB;
    --line:#2B2B30;
    --edge:#70707A;
    --shadow:0 1px 2px rgb(0 0 0 / .3),0 20px 40px -20px rgb(0 0 0 / .75);
    --dot:rgb(242 242 239 / .12);
    --dot-hi:rgb(242 242 239 / .34);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --cherry-text:#FF5A6E;
  --cherry-wash:#2B1519;
  --bg:#0F0F11;
  --surface:#18181B;
  --sunk:#0A0A0B;
  --ink:#F2F2EF;
  --ink-2:#D2D2D5;
  --muted:#A3A3AB;
  --line:#2B2B30;
  --edge:#70707A;
  --shadow:0 1px 2px rgb(0 0 0 / .3),0 20px 40px -20px rgb(0 0 0 / .75);
  --dot:rgb(242 242 239 / .12);
  --dot-hi:rgb(242 242 239 / .34);
}

/* ---------- 3. Reset and browser surfaces ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Clears the sticky nav, so anchors and focused fields aren't hidden under it,
     and the cookie notice while it's up (main.js sets --cookie-h). */
  scroll-padding-top:calc(var(--nav-h) + 24px);
  scroll-padding-bottom:var(--cookie-h,0px);
  scrollbar-color:var(--edge) var(--bg);
  accent-color:var(--cherry);
  interpolate-size:allow-keywords;
}
body{
  font-family:var(--f);
  font-size:1.0625rem;
  line-height:1.6;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  /* A word too long for its line (a web address, an email, a headline word
     with the phone's text size turned right up) breaks, rather than pushing
     the page sideways. */
  overflow-wrap:break-word;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
b,strong{font-weight:650}
input,textarea{caret-color:var(--cherry)}
:focus-visible{outline:2px solid var(--cherry);outline-offset:3px;border-radius:4px}
::selection{background:var(--cherry);color:var(--on-cherry)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:var(--r-sm)}
.skip:focus{left:8px;top:8px}
.ico{width:1em;height:1em;flex:none}

/* ---------- 4. Type ---------- */
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(2.6rem,4.4vw + 1rem,4.75rem)}
h2{font-size:clamp(2rem,2.6vw + 1rem,3.25rem);letter-spacing:-.03em;line-height:1.05}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
p{margin-bottom:var(--sp-2);text-wrap:pretty}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.12rem,.5vw + 1rem,1.3rem);line-height:1.5;color:var(--muted);max-width:52ch}
.lede strong{color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.link{text-decoration:underline;text-decoration-color:var(--cherry);text-decoration-thickness:1.5px;text-underline-offset:.18em}
.link:hover{text-decoration-thickness:2.5px}

/* ---------- 5. Layout ---------- */
.wrap{max-width:calc(var(--wrap) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:calc(var(--narrow) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-7)}
.section--tight{padding-block:var(--sp-6)}
/* A tint inside the same theme, never a flip to the other one. */
.section--tint{background:var(--sunk)}
.centre{text-align:center}
.centre .lede{margin-inline:auto}

/* A section opens with one message: a heading, and sometimes a lede
   under it. Stacked, never split into two columns. */
.head{max-width:46rem;margin-bottom:var(--sp-5)}
.head .lede{margin-top:var(--sp-3)}

.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.centre .actions{justify-content:center}
.wrap-narrow>h1+.lede{margin-top:var(--sp-3)}
.lede+.actions{margin-top:var(--sp-4)}
.actions+p{margin-top:var(--sp-4)}
.hero .head{margin-bottom:0}
.after{margin-top:var(--sp-4)}

/* The ground: a faint dot grid behind the page. Panels, tinted sections
   and the nav are solid, so it only shows in the open space between them.
   main.js draws the same grid on a canvas, where it drifts in a slow wave
   and moves with the mouse, scrolling and taps; this still version is what
   shows before that, without script, on the legal pages, and for anyone
   who asks for less motion.
   Ink, not cherry: cherry is kept for things to press. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,var(--dot) 1px,transparent 1.5px) 0 0/24px 24px;
}
.has-backdrop body::before{display:none}
.backdrop{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
@media (forced-colors:active){body::before,.backdrop{display:none}}

/* ---------- 6. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:50px;padding:0 24px;border-radius:var(--r-sm);
  border:1.5px solid transparent;
  font-weight:650;font-size:1rem;line-height:1;white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.98)}
.btn .ico{transition:transform .3s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}
.btn--cherry{background:var(--cherry);color:var(--on-cherry)}
.btn--cherry:hover{background:var(--cherry-press)}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--ink:hover{background:var(--ink-2)}
.btn--line{border-color:var(--edge);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:var(--surface)}
.btn--sm{min-height:44px;padding:0 18px;font-size:.94rem}

/* ---------- 7. Nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);height:var(--nav-h)}
.logo{display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:44px;font-weight:800;font-size:1.2rem;letter-spacing:-.03em;line-height:1.1}
.logo svg{width:28px;height:28px;color:var(--cherry);flex:none}
.nav__links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__links a:not(.btn){padding:10px 13px;border-radius:var(--r-sm);font-size:.97rem;color:var(--muted);transition:color .2s,background-color .2s}
.nav__links a:not(.btn):hover{color:var(--ink);background:var(--sunk)}
.nav__links a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--cherry);text-decoration-thickness:2px;text-underline-offset:9px}
.nav__links .btn{margin-left:12px}
.nav__end{display:flex;align-items:center;gap:4px}
.nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px}
/* The light/dark switch. The icon shows where it will take you. */
.theme{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:8px;border-radius:var(--r-sm);color:var(--muted);transition:color .2s,background-color .2s}
.theme[hidden]{display:none}
/* On a touch screen the last control tapped keeps :hover until the next
   tap. The switch and the questions stay on screen after a tap, so their
   hover waits for a pointer that can hover, or they would look stuck on. */
@media (hover:hover){.theme:hover{color:var(--ink);background:var(--sunk)}}
.theme .ico{grid-area:1/1;width:20px;height:20px}
.theme .ico:last-child,:root[data-theme="dark"] .theme .ico:first-child{display:none}
:root[data-theme="dark"] .theme .ico:last-child{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme .ico:first-child{display:none}
  :root:not([data-theme="light"]) .theme .ico:last-child{display:block}
}
.nav__toggle span{position:relative;display:block;width:22px;height:2px;background:var(--ink);transition:background-color .25s var(--ease)}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease)}
.nav__toggle span::before{top:-7px}
.nav__toggle span::after{top:7px}
.nav[data-open="true"] .nav__toggle span{background:transparent}
.nav[data-open="true"] .nav__toggle span::before{top:0;transform:rotate(45deg)}
.nav[data-open="true"] .nav__toggle span::after{top:0;transform:rotate(-45deg)}

/* ---------- 8. Hero ---------- */
.hero{padding-block:clamp(2.5rem,6vw,5.5rem)}
.hero h1+.lede{margin-top:var(--sp-3)}
.hero .lede+.actions{margin-top:var(--sp-4)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.hero--centre{text-align:center}
.hero--centre .lede{margin-inline:auto}
.hero--centre .actions{justify-content:center}
/* A two-sentence headline sits a size down, so it holds to three lines in
   half the width instead of running to four. */
.hero--long h1{font-size:clamp(2.3rem,2.2vw + 1.4rem,3.5rem)}

/* ---------- 9. Screens: browser windows and phones ---------- */
/* Real screenshots of real client sites, framed. The address bar shows the
   live address, so the frame says something a visitor can go and check. */
.win{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.win__bar{display:flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-bottom:1px solid var(--line)}
.win__url{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;line-height:20px;color:var(--muted);background:var(--sunk);border-radius:var(--r-sm);padding:0 12px}
.win img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top}
.phone{background:var(--frame);border-radius:var(--r-lg);padding:6px;box-shadow:var(--shadow)}
.phone img{width:100%;aspect-ratio:390/760;object-fit:cover;object-position:top;border-radius:var(--r-sm)}

/* The home page's opening picture: three live sites, cascading. */
.showcase{position:relative;aspect-ratio:6/5;isolation:isolate}
.showcase .win{position:absolute;width:74%}
.showcase .win--a{top:0;right:0;z-index:1}
.showcase .win--b{top:19%;left:13%;z-index:2}
.showcase .win--c{bottom:0;left:0;z-index:3}
.showcase .phone{position:absolute;right:2%;bottom:-4%;width:21%;z-index:4}

/* Two phones side by side, for "built for phones first". */
.phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(1rem,3vw,2rem)}
.phones .phone{width:min(42%,250px)}
.phones .phone:nth-child(2){margin-top:12%}

/* Desktop plus phone, on the Work page. */
.shot{position:relative;padding-right:9%;padding-bottom:5%}
.shot .phone{position:absolute;right:0;bottom:0;width:19%;min-width:84px}
.shot--solo{padding:0}

/* ---------- 10. Facts line ---------- */
/* The three terms a first-timer worries about, said once, under the hero. */
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);padding-block:var(--sp-3);border-block:1px solid var(--line);color:var(--muted);margin-bottom:var(--sp-6)}
.facts li{display:flex;gap:12px;align-items:flex-start}
.facts .ico{width:22px;height:22px;margin-top:2px;color:var(--cherry-text)}
.facts b{color:var(--ink)}

/* ---------- 11. Lists ---------- */
.ticks{list-style:none;display:flex;flex-direction:column;gap:10px}
.ticks li{position:relative;padding-left:30px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;background:var(--cherry-text);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.ticks b,.ticks strong{color:var(--ink)}
.ticks--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px var(--sp-5)}

/* ---------- 12. Why it's cheap ---------- */
/* A short answer under the prices: the question on the left, the answer
   beside it. No bottom padding, so it sits close to the steps it leads into. */
.why{padding-bottom:0}
.why .lede{margin-bottom:var(--sp-2)}

/* ---------- 13. Bento ---------- */
/* Exactly as many tiles as there are things to say. The default is one
   tall tile beside two short ones. */
.bento{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--sp-2)}
.bento>.tile:first-child{grid-row:span 2}
.bento--four{grid-template-columns:repeat(3,minmax(0,1fr))}
.bento--four>.tile:first-child{grid-row:auto;grid-column:span 2}
.bento--four>.tile:last-child{grid-column:span 2}
.tile{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.25rem);background:var(--surface);border:1px solid var(--line)}
.tile h3{font-size:clamp(1.3rem,.8vw + 1rem,1.6rem);font-weight:800;letter-spacing:-.025em;margin-bottom:var(--sp-2)}
.tile p{color:var(--muted);max-width:60ch}
.tile--wash{background:var(--cherry-wash);border-color:transparent}
.tile--wash p{color:var(--ink-2)}
.tile--sunk{background:var(--sunk);border-color:transparent}

/* ---------- 14. Tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,2.5vw,2rem)}
.tier--feature{border:2px solid var(--cherry);box-shadow:var(--shadow)}
.tier__name{font-size:1.5rem;font-weight:800;letter-spacing:-.025em}
.tier__line{color:var(--muted);font-size:.97rem;margin:6px 0 var(--sp-3)}
.tier__price{display:flex;align-items:baseline;gap:10px;margin:0}
.tier__amt{font-size:clamp(3.25rem,3vw + 1.5rem,4.25rem);font-weight:850;letter-spacing:-.04em;line-height:1}
.tier--feature .tier__amt{color:var(--cherry)}
.tier__per{color:var(--muted);font-weight:600}
.tier__bill{color:var(--ink-2);font-weight:650;margin:8px 0 0}
.tier .ticks{flex:1;margin:var(--sp-3) 0;padding-top:var(--sp-3);border-top:1px solid var(--line)}
.tier .ticks li{font-size:.97rem}
.tier__foot{font-size:.88rem;color:var(--muted);margin:0}
.tier .btn{margin-bottom:var(--sp-2)}
.tier__foot+.tier__foot{margin-top:2px}
/* Side by side, the cards share rows so prices, lists and footers line up
   even when one tier's line wraps. Eight rows covers the pricing page; the
   home page cards are shorter, so their spare rows are simply empty. The
   cards sit in one row here, so the outer grid needs no row gap; with one,
   each spare row would add a gap's worth of space under the shorter cards. */
@supports (grid-template-rows:subgrid){
  @media (min-width:1024px){
    .tiers{row-gap:0}
    .tier{display:grid;grid-template-rows:subgrid;grid-row:span 8;row-gap:0}
  }
}
.notes{max-width:62ch;margin:var(--sp-5) auto 0;text-align:center;color:var(--muted);font-size:.94rem}
.notes p+p{margin-top:var(--sp-2)}

/* ---------- 15. Steps ---------- */
/* An ordered list, because the order is the information. The rail draws
   itself as the list scrolls into view, and the last stop, the day you
   start paying, is the one in cherry. The slash in content hides the
   number from screen readers, which already announce "1 of 4". */
.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);position:relative;view-timeline-name:--steps}
/* Runs from the centre of the first marker to the centre of the last. */
.steps::before,.steps::after{content:"";position:absolute;left:20px;right:calc((100% - 3 * var(--sp-4)) / 4 - 20px);top:19px;height:2px;background:var(--line)}
.steps::after{background:var(--ink);transform-origin:left center}
.step{counter-increment:step;position:relative;z-index:1}
.step::before{content:counter(step);content:counter(step) / "";display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--sp-3);border-radius:50%;background:var(--bg);border:2px solid var(--ink);font-weight:750;font-size:.97rem}
.step:last-child::before{background:var(--cherry);border-color:var(--cherry);color:var(--on-cherry)}
.step h3{margin-bottom:var(--sp-1)}
.step p{color:var(--muted);font-size:.97rem}

/* ---------- 16. Work index (home) ---------- */
.index{list-style:none;border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:clamp(120px,18vw,220px) minmax(0,1fr) auto;gap:clamp(1rem,3vw,2.5rem);align-items:center;padding-block:var(--sp-3);border-bottom:1px solid var(--line)}
.index img{border-radius:var(--r-sm);border:1px solid var(--line);aspect-ratio:8/5;object-fit:cover;object-position:top}
.index h3{font-size:clamp(1.35rem,1.4vw + 1rem,2.1rem);font-weight:800;letter-spacing:-.03em;transition:color .2s}
.index p{color:var(--muted);margin-top:6px;max-width:56ch}
.index .ico{width:28px;height:28px;transition:transform .35s var(--ease),color .2s}
.index a:hover h3{color:var(--cherry-text)}
.index a:hover .ico{transform:translateX(6px);color:var(--cherry-text)}

/* ---------- 17. Case studies (Work) ---------- */
.case{padding-block:var(--sp-6);border-top:1px solid var(--line)}
.case:first-child{border-top:0;padding-top:0}
.case:last-child{padding-bottom:0}
.case__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);margin-top:var(--sp-5)}
.case__name{font-size:clamp(1.9rem,2vw + 1rem,2.75rem)}
/* The live address sits in a line of grey, so it is underlined: colour
   alone is not enough to mark a link (WCAG 1.4.1). */
.case__meta{color:var(--muted);margin-top:var(--sp-1)}
.case__link{color:var(--cherry-text);font-weight:650;text-decoration:underline;text-underline-offset:.18em}
.case__link:hover{text-decoration-thickness:2px}
.case__link .ico{display:inline-block;vertical-align:-.12em;margin-left:2px}
.case__body .lede{margin-top:var(--sp-3)}
.case__did{font-size:1rem;font-weight:700;letter-spacing:0;margin-bottom:var(--sp-2)}

/* ---------- 18. Rows, side headings, points ---------- */
/* Rows: one idea per line, its name on the left. Same columns and gap as
   the side heading, so the reading column lines up down the page. The name
   stays in view beside a long row, like the side heading does. */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);padding-block:var(--sp-4);border-bottom:1px solid var(--line)}
.row>:first-child{position:sticky;top:calc(var(--nav-h) + var(--sp-4));align-self:start}
.row h3{font-size:clamp(1.35rem,1vw + 1rem,1.8rem);font-weight:800;letter-spacing:-.025em}
.row p{color:var(--muted);max-width:56ch}
/* A price under the row's name, for the extras list. */
.row .row__price{color:var(--ink);font-weight:700;margin-top:6px}
/* Moves to the next line whole, rather than splitting at "set-", and still
   wraps if even a line of its own is too narrow (very large text). */
.row__price span{display:inline-block}
/* Email prices: what a person gets down the side, extra or included across
   the top. Full prices in every cell, so nobody adds anything up. */
.prices{width:100%;margin-top:var(--sp-3);border-collapse:collapse}
.prices caption{caption-side:top;text-align:left;color:var(--muted);font-size:.9rem;padding-bottom:var(--sp-1)}
.prices th,.prices td{padding:14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prices thead th{padding-top:0;font-size:.9rem;font-weight:650;color:var(--muted);vertical-align:bottom}
.prices th[scope=row]{padding-right:var(--sp-2);font-weight:700;color:var(--ink)}
.prices th[scope=row] span{display:block;margin-top:2px;font-size:.9rem;font-weight:400;color:var(--muted)}
.prices td,.prices thead th+th{width:clamp(5rem,16vw,7.5rem);padding-left:var(--sp-2);text-align:right}
/* Tabular figures only on the prices: in this font they widen commas too. */
.prices td{font-size:1.1rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.prices tbody tr:last-child>*{border-bottom:0}
.row .prices__note{margin-top:var(--sp-2);font-size:.9rem}
@media (max-width:480px){
  /* Narrow phones: each item stacks, name on top, the two prices labelled
     side by side underneath. */
  .prices,.prices tbody,.prices caption{display:block}
  .prices thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .prices tbody{border-top:1px solid var(--line)}
  .prices tr{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--sp-2);padding-block:14px;border-bottom:1px solid var(--line)}
  .prices tbody tr:last-child{border-bottom:0}
  .prices th,.prices td{display:block;width:auto;padding:0;border:0;text-align:left}
  .prices th[scope=row]{grid-column:1 / -1;padding:0 0 10px}
  .prices td{display:flex;flex-direction:column;justify-content:space-between}
  .prices td::before{content:attr(data-label);display:block;font-size:.84rem;font-weight:500;color:var(--muted)}
}

/* Side heading: the heading stays in view while the reading runs beside it. */
.sidehead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.sidehead__head{position:sticky;top:calc(var(--nav-h) + var(--sp-4))}
.sidehead__head .lede{margin-top:var(--sp-3)}
.sidehead__body>p{color:var(--ink-2);max-width:62ch}
.stack>*+*{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.stack h3{margin-bottom:var(--sp-1)}
.stack p{color:var(--muted)}

/* Points: a two-by-two of short promises, each under a heavy rule. */
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.point{border-top:2px solid var(--ink);padding-top:var(--sp-3)}
.point h3{margin-bottom:var(--sp-1)}
.point p{color:var(--muted);max-width:60ch}

/* ---------- 19. Panel ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.75rem,5vw,4rem)}
.panel>h2{max-width:20ch}
.panel>.lede{margin-top:var(--sp-3)}
.panel__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-5)}
.panel__cols h3{margin-bottom:var(--sp-2)}
.panel__cols p{color:var(--muted)}
.panel .ticks--grid{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)}

/* ---------- 20. Statement ---------- */
.statement p{font-size:clamp(1.15rem,.8vw + 1rem,1.45rem);line-height:1.55;color:var(--ink-2);max-width:60ch;margin-top:var(--sp-3)}

/* ---------- 21. Team ---------- */
.team{list-style:none;border-top:1px solid var(--line)}
.member{display:grid;grid-template-columns:auto minmax(0,4fr) minmax(0,7fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start;padding-block:var(--sp-4);border-bottom:1px solid var(--line)}
.member__avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--cherry-wash);color:var(--cherry-text);font-weight:800;font-size:1.75rem;letter-spacing:-.03em}
.member h3{font-size:clamp(1.5rem,1vw + 1rem,1.9rem);font-weight:800;letter-spacing:-.03em}
.member__role{color:var(--cherry-text);font-weight:650;margin-top:4px}
.member p{color:var(--muted);max-width:60ch}

/* ---------- 22. Closing call to action ---------- */
/* White on cherry is 4.6:1, so every line here stays solid white:
   translucent white was not enough. Focus turns white too, because a
   cherry ring on a cherry panel is invisible. */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4) var(--sp-5);align-items:end;background:var(--cherry);color:var(--on-cherry);border-radius:var(--r-lg);padding:clamp(2.25rem,6vw,4.5rem)}
.cta h2{font-size:clamp(2.2rem,3.4vw + 1rem,4rem)}
.cta p{max-width:46ch;margin-top:var(--sp-2)}
.cta .cta__note{font-size:.94rem;margin-top:var(--sp-3)}
.cta .btn{background:var(--on-cherry);color:var(--on-cherry-btn-ink)}
.cta .btn:hover{background:var(--on-cherry-btn-hover)}
.cta :focus-visible{outline-color:var(--on-cherry)}

/* ---------- 23. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);padding-block:var(--sp-3);cursor:pointer;list-style:none;font-weight:700;font-size:1.12rem;letter-spacing:-.01em;line-height:1.4;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{color:var(--cherry-text)}}
.faq summary .ico{width:22px;height:22px;margin-top:3px;color:var(--cherry-text);transition:transform .35s var(--ease)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq .answer{color:var(--muted);max-width:62ch;padding-bottom:var(--sp-3)}

/* ---------- 24. Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.contact__intro .lede{margin-top:var(--sp-3)}
.prompt{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.prompt__label{font-weight:650;margin-bottom:var(--sp-2)}
.prompt .ticks{margin-bottom:var(--sp-3)}
.form-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow)}
.form{display:flex;flex-direction:column;gap:var(--sp-3)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:650;font-size:.97rem}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);
  border:1.5px solid var(--edge);border-radius:var(--r-sm);
  padding:12px 14px;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:hover,.field textarea:hover{border-color:var(--ink-2)}
/* Focus and error use different channels: focus thickens the edge in ink,
   an error turns it cherry. A focused field with an error shows both. */
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.field textarea{resize:vertical;min-height:140px}
.field [aria-invalid="true"]{border-color:var(--cherry)}
.field [aria-invalid="true"]:focus{border-color:var(--cherry);box-shadow:0 0 0 1.5px var(--cherry)}
.field ::placeholder{color:var(--muted);opacity:1}
.field__err{font-size:.9rem;color:var(--cherry-text);font-weight:600;margin:0}
.field__hint{font-size:.88rem;color:var(--muted);margin:0}
.form .btn{align-self:flex-start}
/* The privacy line belongs to the button, so it sits closer than the fields do. */
.form .btn+p{margin-top:calc(var(--sp-1) * -1)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-4)}
.notice a{color:var(--cherry-text);font-weight:650;text-decoration:underline;text-underline-offset:.18em}
.notice h2{font-size:clamp(1.6rem,1.5vw + 1rem,2.2rem);margin-bottom:var(--sp-2)}
/* Error summary. Focused on load after a failed send, so the visitor hears
   what went wrong instead of landing back at the top of the page. */
.notice--bad{border:1.5px solid var(--cherry);margin-bottom:var(--sp-4);padding:var(--sp-3)}
.notice--bad h2{font-size:1.3rem;margin-bottom:var(--sp-1)}
.notice--bad ul{list-style:none;display:flex;flex-direction:column;gap:6px}
/* These boxes are focused by script, never tabbed to, so focus thickens
   their own edge rather than drawing a second ring. */
.notice:focus{outline:none}
.notice--ok:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.notice--bad:focus{box-shadow:0 0 0 1.5px var(--cherry)}

/* ---------- 25. Prose (legal pages) ---------- */
/* About 70 characters a line. Set in em, not ch: this face's zero is
   narrow, so 70ch let lines run past 90. */
.prose{max-width:calc(34em + var(--gutter) * 2)}
.prose h1{font-size:clamp(2.2rem,3vw + 1rem,3.5rem)}
.prose .prose__updated{color:var(--muted);font-size:.94rem;margin:var(--sp-2) 0 var(--sp-5)}
.prose h2{font-size:1.5rem;letter-spacing:-.02em;margin:var(--sp-5) 0 var(--sp-2)}
.prose h3{font-size:1.15rem;margin:var(--sp-4) 0 var(--sp-1)}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 var(--sp-2) 1.25rem}
.prose li{margin-bottom:8px;padding-left:4px}
.prose li::marker{color:var(--cherry)}
.prose a:not(.btn){text-decoration:underline;text-decoration-color:var(--cherry);text-underline-offset:.18em}
.prose code{font-size:.88em;background:var(--sunk);padding:1px 7px;border-radius:var(--r-sm)}

/* The 404 template is locked; this keeps its "404" line quiet. */
.eyebrow{display:block;color:var(--muted);font-weight:650;margin-bottom:var(--sp-2)}

/* ---------- 26. Footer ---------- */
.footer{background:var(--sunk);border-top:1px solid var(--line);color:var(--muted);padding:var(--sp-6) 0 calc(var(--sp-4) + var(--cookie-h,0px));font-size:.97rem}
.footer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:var(--sp-5)}
/* The logo keeps its 44px tap height but takes no extra room here. */
.footer .logo{color:var(--ink);margin-block:-8px}
.footer__tag{margin-top:var(--sp-2);max-width:34ch}
.footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.footer__h{color:var(--ink);font-size:.97rem;font-weight:700;letter-spacing:0;line-height:1.5;margin-bottom:3px}
/* 44px tall, so each link is an easy tap on a phone. */
.footer__col a{display:block;padding-block:10px;overflow-wrap:anywhere;transition:color .2s}
.footer__col a:hover{color:var(--ink)}
.footer__bottom{display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:.9rem}
.footer__legal{margin-top:var(--sp-2);font-size:.9rem}

/* ---------- 27. Cookie notice ---------- */
/* Both choices carry the same weight. Saying no is as easy as saying yes. */
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:720px;margin-inline:auto;display:none;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;padding:20px 22px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.cookies[data-show="true"]{display:flex}
.cookies p{font-size:.94rem;color:var(--muted);margin:0;max-width:50ch}
.cookies a{color:var(--ink);text-decoration:underline;text-underline-offset:.18em}
.cookies__actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 28. Motion ---------- */
/* Three moments, each saying something. The opening picture fans out from
   one window into three sites. The steps rail draws in order. Answers and
   the cookie notice ease in rather than snap. Everything is visible
   without them, and none of it runs for anyone who asks for less motion. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .showcase>*{animation:fan 1.1s var(--ease) .15s both}
  .showcase .win--a{--from:translate(-17.5%,31%) scale(.98)}
  .showcase .win--b{--from:scale(.98)}
  .showcase .win--c{--from:translate(17.5%,-31%) scale(.98)}
  .showcase .phone{--from:translateY(14%);animation-delay:.45s}

  .cookies[data-show="true"]{animation:rise .5s var(--ease) both}

  @supports (animation-timeline:view()){
    .steps::after{animation:rail linear both;animation-timeline:--steps;animation-range:entry 30% cover 50%}
  }
  @supports selector(::details-content){
    .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
    .faq details[open]::details-content{block-size:auto}
  }
}
@keyframes fan{from{transform:var(--from)}}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
@keyframes rail{from{transform:scaleX(0)}}
@keyframes rail-down{from{transform:scaleY(0)}}

/* ---------- 29. Responsive ---------- */
@media (max-width:1023px){
  /* Single columns are minmax(0,1fr), not 1fr: a plain 1fr column grows to
     its longest word, so a long web address or headline word at a very
     large text size pushed the page sideways instead of wrapping. */
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__visual{max-width:620px;width:100%;margin-inline:auto}
  .tiers{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto;gap:var(--sp-4)}
  .contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  :root{--nav-h:64px}
  .nav__links{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gutter) 20px;background:var(--bg);border-bottom:1px solid var(--line);
  }
  .nav[data-open="true"] .nav__links{display:flex}
  .nav__links a:not(.btn){padding:14px 0;border-radius:0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav__links a:not(.btn):hover{background:none}
  .nav__links a[aria-current="page"]{text-underline-offset:6px}
  .nav__links .btn{margin:16px 0 0}
  .nav__toggle{display:flex}
  .theme{margin-left:0}

  .facts{grid-template-columns:minmax(0,1fr);gap:12px}
  .bento,.bento--four{grid-template-columns:minmax(0,1fr)}
  .bento>.tile:first-child,.bento--four>.tile:first-child,.bento--four>.tile:last-child{grid-row:auto;grid-column:auto}
  .row,.sidehead,.panel__cols,.points,.case__body{grid-template-columns:minmax(0,1fr)}
  .row{gap:var(--sp-1)}
  .row>:first-child{position:static}
  .sidehead{gap:var(--sp-4)}
  .sidehead__head{position:static}
  .points{gap:var(--sp-4)}
  .case__body{gap:var(--sp-3);margin-top:var(--sp-4)}
  .ticks--grid{grid-template-columns:minmax(0,1fr)}
  .member{grid-template-columns:auto minmax(0,1fr)}
  .member p{grid-column:1 / -1}
  .cta{grid-template-columns:minmax(0,1fr);align-items:start}
  .footer__top{grid-template-columns:minmax(0,1fr)}

  /* The rail turns vertical: one segment per step, from each marker down
     to the next, so it stops at the last marker however long the text is. */
  .steps{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .steps::before,.steps::after{display:none}
  .step{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--sp-3);align-items:start;view-timeline-name:--step}
  .step:not(:last-child)::after{content:"";position:absolute;left:19px;top:40px;bottom:calc(var(--sp-4) * -1);width:2px;background:var(--ink);transform-origin:center top}
  .step::before{grid-row:span 2;margin:0}
  .step h3{padding-top:8px}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .step:not(:last-child)::after{animation:rail-down linear both;animation-timeline:--step;animation-range:entry 60% cover 55%}
  }
}
@media (max-width:600px){
  /* One line by default; on a narrow screen with large or spaced-out text a
     label wraps, and a long email address breaks, rather than being cut off. */
  .btn{white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.2;padding-block:10px}
  /* A thumbnail beside the text is too small to read at this width, so the
     screenshot goes full width above it, cropped to the top of the site. */
  .index a{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  .index img{aspect-ratio:2/1}
  .index .ico{display:none}
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__col:last-child{grid-column:1 / -1}
  .cookies{left:10px;right:10px;bottom:10px;padding:16px}
  .cookies__actions{width:100%}
  .cookies__actions .btn{flex:1}
  /* Centred lines this narrow go ragged on both sides. */
  .notes{text-align:left}
}
/* Less motion: nothing slides, nudges or turns. Colour still fades on hover
   and focus, and every state still changes (the FAQ plus becomes a cross,
   the menu icon a close), it just happens at once. The entrances above are
   already off. */
@media (prefers-reduced-motion:reduce){
  .btn,.btn .ico,.index .ico,.faq summary .ico,.nav__toggle span::before,.nav__toggle span::after{transition-property:color,background-color,border-color}
  .btn:active,.btn:hover .ico,.index a:hover .ico{transform:none}
}
@media print{
  .nav,.cookies,.footer,.cta,body::before,.backdrop{display:none}
  body{background:#fff;color:#000;font-size:12pt}
}