/* InTouch website for 1.5, in the C3 "Postcards" look (InTouch ADR 0008, 8 October 2026).
   Tokens, person colours, radii and shadows come from the app's C3 kit
   (InTouch-iOS ai-docs/designs/c3/kit); the marker and the tilted postcards behind the phone
   come from the approved Postcards App Store set. The story keeps the Pitch structure Dominik
   approved on 3 October: the problem first, then InTouch, with one pinned phone on wide screens.
   Kit rules: no emoji, no gradient washes, no left-border cards, no tape, polaroids, postmarks
   or handwriting; the dashed stamp is only for cadence, so this page does not draw one. */
/* Latin and Polish subset of the OFL variable font (fonts/OFL.txt), width pinned to 100, with the
   wght and opsz axes kept. Built with fontTools from the OFL variable TTF in the app repository (Projects/App/Sources/DesignSystem/Resources/Fonts). */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/BricolageGrotesque-Latin.woff") format("woff");font-weight:200 800;font-display:swap}

:root{
  --ground:#F4F2ED;--card:#FFFFFF;--text:#17161A;--muted:#5C5852;
  --hair:rgba(23,22,26,.08);--hair-strong:rgba(23,22,26,.16);
  --primary:#17161A;--on-primary:#FFFFFF;--primary-hover:#34323A;
  --quiet:#F4F2ED;--green:#2F6B3A;--note-bg:#EAE7E0;--blank-card:#FFFFFF;
  --ink:#17161A;--soft-on-colour:rgba(255,255,255,.55);
  --marigold:#F5B83D;--rose:#F3A9A1;--sage:#B8D0A5;--sky:#A9CCEB;--lilac:#CFC0F2;--clay:#EFA273;
  --deep-marigold:#3B3020;--deep-sage:#2C3A22;--deep-sky:#1F3B52;--deep-lilac:#3A2E5C;
  --shadow-soft:0 2px 10px rgba(23,22,26,.08);
  --shadow-card:0 12px 30px rgba(23,22,26,.10);
  --shadow-tab:0 -6px 16px rgba(23,22,26,.08);
  --shadow-front:0 -6px 16px rgba(23,22,26,.10),0 12px 28px rgba(23,22,26,.10);
  --shadow-menu:0 18px 48px rgba(23,22,26,.22);
  --shadow-toast:0 12px 28px rgba(23,22,26,.24);
  --shadow-device:0 34px 70px rgba(23,22,26,.20);
  --shadow-postcard:0 24px 60px rgba(23,22,26,.10);
  --scroll-thumb:#CFCBC3;
  --marker:var(--marigold);--marker-from:50%;--marker-to:84%;
  --spring:cubic-bezier(.34,1.36,.64,1);--soft:cubic-bezier(.22,1,.36,1);
  --font:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1180px;--gutter:clamp(1rem,4vw,3rem);--header-h:3.75rem;
  color-scheme:light dark
}
:root[data-theme="light"]{color-scheme:light}
/* Dark tokens from the kit: ground #121114, card #1F1E22, text #F4F2ED, muted #A9A49C and the
   dark person colours. Text on a person colour stays ink. On a dark ground the marker becomes a
   low stroke under paper text, so the heading stays readable while the marker draws. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#121114;--card:#1F1E22;--text:#F4F2ED;--muted:#A9A49C;
    --hair:rgba(244,242,237,.10);--hair-strong:rgba(244,242,237,.22);
    --primary:#F4F2ED;--on-primary:#17161A;--primary-hover:#FFFFFF;
    --quiet:#2A292E;--green:#7FC38C;--note-bg:#1B1A1E;--blank-card:#2A292E;
    --marigold:#E6AB3B;--rose:#E39A91;--sage:#A3BE8F;--sky:#8FB7DE;--lilac:#B6A5E8;--clay:#DE915C;
    --shadow-soft:0 2px 10px rgba(0,0,0,.35);
    --shadow-card:0 12px 30px rgba(0,0,0,.40);
    --shadow-tab:0 -6px 16px rgba(0,0,0,.45);
    --shadow-front:0 -6px 16px rgba(0,0,0,.50),0 12px 28px rgba(0,0,0,.45);
    --shadow-menu:0 18px 48px rgba(0,0,0,.55);
    --shadow-toast:0 12px 28px rgba(0,0,0,.60);
    --shadow-device:0 34px 70px rgba(0,0,0,.55);
    --shadow-postcard:0 24px 60px rgba(0,0,0,.45);
    --scroll-thumb:#3A383E;
    --marker-from:80%;--marker-to:96%;--hl-text:var(--text);
    color-scheme:dark
  }
}
:root[data-theme="dark"]{
  --ground:#121114;--card:#1F1E22;--text:#F4F2ED;--muted:#A9A49C;
  --hair:rgba(244,242,237,.10);--hair-strong:rgba(244,242,237,.22);
  --primary:#F4F2ED;--on-primary:#17161A;--primary-hover:#FFFFFF;
  --quiet:#2A292E;--green:#7FC38C;--note-bg:#1B1A1E;--blank-card:#2A292E;
  --marigold:#E6AB3B;--rose:#E39A91;--sage:#A3BE8F;--sky:#8FB7DE;--lilac:#B6A5E8;--clay:#DE915C;
  --shadow-soft:0 2px 10px rgba(0,0,0,.35);
  --shadow-card:0 12px 30px rgba(0,0,0,.40);
  --shadow-tab:0 -6px 16px rgba(0,0,0,.45);
  --shadow-front:0 -6px 16px rgba(0,0,0,.50),0 12px 28px rgba(0,0,0,.45);
  --shadow-menu:0 18px 48px rgba(0,0,0,.55);
  --shadow-toast:0 12px 28px rgba(0,0,0,.60);
  --shadow-device:0 34px 70px rgba(0,0,0,.55);
  --shadow-postcard:0 24px 60px rgba(0,0,0,.45);
  --scroll-thumb:#3A383E;
  --marker-from:80%;--marker-to:96%;--hl-text:var(--text);
  color-scheme:dark
}

/* ------------------------------------------------------------------ Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--header-h) + 1rem);overflow-x:clip;scrollbar-color:var(--scroll-thumb) var(--ground)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--font);font-size:1.0625rem;font-weight:500;line-height:1.55;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1.5px}
h1,h2,h3,dt{text-wrap:balance}
h1,h2,h3,p,dl,dd,figure{margin:0}
p,dd{text-wrap:pretty}
button{font:inherit;color:inherit}
button,a{touch-action:manipulation}
svg{flex:none}
::selection{background:var(--marigold);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--text);outline-offset:3px;border-radius:8px}
.on-colour :focus-visible{outline-color:var(--ink)}
.wrap{width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto}
main{overflow-x:clip}
.skip{position:absolute;left:1rem;top:1rem;z-index:40;padding:.65rem 1rem;border-radius:999px;background:var(--primary);color:var(--on-primary);font-weight:700;text-decoration:none;transform:translateY(-220%)}
.skip:focus{transform:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Type. Headings use the app's root-title voice: wght 800, opsz 96, tight tracking. */
h1,h2{font-weight:800;font-variation-settings:"opsz" 96;color:var(--text)}
.l{display:block}
.hl{color:var(--hl-text,var(--ink));background-image:linear-gradient(180deg,transparent var(--marker-from),var(--marker) var(--marker-from),var(--marker) var(--marker-to),transparent var(--marker-to));background-repeat:no-repeat;background-size:100% 100%;padding:0 .14em;margin:0 -.14em;border-radius:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.caps{font-size:.75rem;font-weight:800;letter-spacing:.09em;line-height:1.3;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.section{padding-block:clamp(4rem,8vw,6.5rem)}
.section+.section{padding-top:clamp(1rem,3vw,2.5rem)}
.center{display:flex;flex-direction:column;align-items:center;text-align:center}
.big{font-size:clamp(2.3rem,5.1vw,4.25rem);line-height:1.04;letter-spacing:-.018em}
.punchline{max-width:28rem;text-wrap:balance;margin:clamp(3rem,6vw,4.5rem) auto 0;font-size:clamp(1.3rem,2.1vw,1.65rem);font-weight:800;font-variation-settings:"opsz" 48;line-height:1.3;letter-spacing:-.015em;text-align:center}
.body{margin:1.4rem 0 0;max-width:30rem;color:var(--muted);font-size:1.125rem;line-height:1.55}

/* ------------------------------------------------------------------ Preview note and header */
.preview-note{margin:0;padding:.6rem var(--gutter);background:var(--note-bg);color:var(--muted);font-size:.8125rem;font-weight:600;line-height:1.45;text-align:center;text-wrap:balance}
.preview-note p{margin:0}
.preview-note b{margin-right:.45rem;color:var(--text);font-size:.6875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.75rem;transition:height 260ms var(--soft)}
.site-header::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:color-mix(in srgb,var(--ground) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--hair);opacity:0;transition:opacity 220ms ease}
.site-header.is-stuck{height:var(--header-h)}
.site-header.is-stuck::before{opacity:1}
.brand{display:inline-flex;align-items:center;gap:.6rem;flex-shrink:0;font-size:1.3rem;font-weight:800;font-variation-settings:"opsz" 32;letter-spacing:-.02em;text-decoration:none}
.brand img{width:2.25rem;height:2.25rem;border-radius:22.5%;box-shadow:0 0 0 1px var(--hair),var(--shadow-soft)}
.header-end{display:flex;align-items:center;gap:.4rem}
.site-nav{display:flex;align-items:center;gap:.15rem;font-size:.9375rem;font-weight:700}
.site-nav a{padding:.6rem .8rem;border-radius:999px;color:var(--muted);text-decoration:none;transition:color 150ms ease,background-color 150ms ease}
.theme-toggle{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:color 150ms ease,background-color 150ms ease,transform 160ms var(--soft)}
.theme-toggle:active{transform:scale(.94)}
.theme-icon-sun,.theme-icon-rays{display:none}
.theme-toggle[data-theme-next="light"] .theme-icon-moon{display:none}
.theme-toggle[data-theme-next="light"] .theme-icon-sun,.theme-toggle[data-theme-next="light"] .theme-icon-rays{display:inline}
@media (hover:hover) and (pointer:fine){
  .site-nav a:hover,.theme-toggle:hover{color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent)}
}
@media (max-width:780px){.site-nav .nav-optional{display:none}}

/* Buttons: ink primary (paper-on-ink flips to ink-on-paper in dark), as the kit's primary pill. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3.25rem;padding:.8rem 1.6rem;border:0;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:1.0625rem;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color 150ms ease,transform 160ms var(--soft)}
.button:active{transform:scale(.97)}
.button-small{min-height:2.75rem;padding:.55rem 1.05rem;font-size:.9375rem}
.button-quiet{background:var(--quiet);color:var(--text)}
@media (hover:hover) and (pointer:fine){
  .button:hover{background:var(--primary-hover)}
  .closing .button:hover{background:#34323A}
  .button-quiet:hover{background:color-mix(in srgb,var(--text) 10%,var(--quiet))}
}
.button-quiet:focus-visible{outline-color:var(--text)}

/* ------------------------------------------------------------------ Postcards (shared) */
.pc{display:block;border-radius:9.8%/6.7%}
.pc-front{background:var(--marigold)}
.pc-back{background:var(--lilac)}

/* ------------------------------------------------------------------ 1. Hook */
.hook{justify-content:center;min-height:calc(100svh - 7rem);padding-block:2rem 4.5rem}
.hook-cards{position:relative;width:clamp(6.25rem,10vw,8.5rem);aspect-ratio:1.2;margin-bottom:clamp(1.75rem,3.6vw,2.6rem)}
.hook-cards .pc{position:absolute;width:76%;aspect-ratio:1.42;border-radius:12%/17%}
.hook-cards .pc-back{left:0;top:4%;transform:rotate(-8deg)}
.hook-cards .pc-front{right:0;bottom:6%;transform:rotate(5deg);box-shadow:var(--shadow-card)}
/* The ink heart from the app icon: same size and place on the front card as in 03-heart.svg; ink on marigold in both themes. */
.hook-cards .pc-front{display:grid;place-items:center}
.hook-cards .pc-heart{width:52.5%;height:auto;fill:#17161A;translate:-.8% 5%}
.hook h1{font-size:clamp(2.75rem,7.4vw,6rem);line-height:1.02;letter-spacing:-.022em}
.hook h1 .l+.l{margin-top:.32em;font-size:.56em;line-height:1.16;letter-spacing:-.015em}
.lead{max-width:33rem;margin:2.1rem auto 0;font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.5;text-wrap:balance}
.lead-turn{max-width:22ch;margin:1.4rem auto 0;font-size:clamp(1.45rem,2.6vw,2rem);font-weight:800;font-variation-settings:"opsz" 96;line-height:1.16;letter-spacing:-.022em;text-wrap:balance}
.scroll-cue{display:inline-flex;align-items:center;gap:.4rem;margin-top:3.25rem;padding:.65rem .5rem;color:var(--muted);font-size:.9375rem;font-weight:700;text-decoration:none}
@media (hover:hover) and (pointer:fine){.scroll-cue:hover{color:var(--text);text-decoration:underline}}

/* ------------------------------------------------------------------ 2. Moments, as postcards */
.moments{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:clamp(1.25rem,2.4vw,1.9rem);width:100%;max-width:62rem;margin:clamp(3rem,6vw,4.75rem) auto 0;padding:0;list-style:none;text-align:left}
.moment{grid-column:1/span 7;padding:clamp(1.35rem,2.3vw,1.85rem) clamp(1.4rem,2.6vw,2.2rem) clamp(1.5rem,2.5vw,2rem);border-radius:28px;background:var(--card);box-shadow:var(--shadow-card);transform:rotate(var(--tilt,0deg))}
.moment:nth-child(2){grid-column:6/span 7;--tilt:.7deg}
.moment:nth-child(1){--tilt:-.8deg}
.moment:nth-child(3){--tilt:-.4deg}
.moment:nth-child(4){grid-column:6/span 7;--tilt:.9deg}
.moment:nth-child(5){grid-column:3/span 8;--tilt:-.6deg}
.moment-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.who{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--c);color:var(--ink);font-size:.8125rem;font-weight:800;line-height:1}
.who-meta{display:inline-flex;align-items:center;gap:.45rem;flex:none;color:var(--muted);font-size:.8125rem;font-weight:600}
.who-meta .who{width:1.5rem;height:1.5rem;font-size:.6875rem}
.moment-thought{margin-top:.7rem;font-size:clamp(1.4rem,2.4vw,1.95rem);font-weight:800;font-variation-settings:"opsz" 96;line-height:1.14;letter-spacing:-.022em;text-wrap:balance}
.moment-aside{margin-top:.55rem;color:var(--muted);font-size:1.0625rem}

/* ------------------------------------------------------------------ 3. The usual fixes, one list card */
.fixes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:64rem;margin:clamp(2.5rem,5vw,3.75rem) auto 0;padding:.5rem;list-style:none;border-radius:28px;background:var(--card);box-shadow:var(--shadow-card);text-align:left}
.fixes li{padding:1.4rem 1.5rem 1.6rem}
.fixes li+li{border-left:1px solid var(--hair)}
.tile{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:16px;background:var(--quiet);color:var(--text)}
.fixes h3{margin:1.1rem 0 .3rem;font-size:1.1875rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.fixes p{color:var(--muted);line-height:1.5}

/* ------------------------------------------------------------------ Meet InTouch: three tabs */
.section.meet{padding-top:clamp(5rem,9vw,7.5rem);padding-bottom:clamp(2rem,5vw,3rem)}
.meet-icon{width:clamp(4.75rem,8vw,6rem);height:auto;margin-bottom:clamp(1.5rem,3vw,2.25rem);border-radius:22.5%;box-shadow:0 0 0 1px var(--hair),var(--shadow-card)}
.meet .body{max-width:34rem;margin-inline:auto}
.tabbar{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:.75rem;row-gap:1rem;width:min(100%,46rem);margin:clamp(2.25rem,5vw,3rem) auto 0}
.tabbar::before{content:"";grid-row:1;grid-column:1/-1;border-radius:999px;background:var(--card);box-shadow:var(--shadow-card)}
.tabbar>div{display:contents}
.tabbar dt{grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;margin:.4rem;min-height:3.6rem;border-radius:999px;font-size:.8125rem;font-weight:700;line-height:1.2}
.tabbar>div:nth-child(1)>*{grid-column:1}
.tabbar>div:nth-child(2)>*{grid-column:2}
.tabbar>div:nth-child(3)>*{grid-column:3}
.tabbar:has(>div:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,56rem)}
.tabbar>div:nth-child(4)>*{grid-column:4}
.tabbar>div:first-child dt{background:var(--quiet)}
.tabbar dd{grid-row:2;padding:0 .5rem;color:var(--muted);font-size:.9375rem;line-height:1.45}
.tabbar dd b{display:none}
.tabbar-note{margin-top:1.5rem;color:var(--muted);font-size:.9375rem}

/* ------------------------------------------------------------------ 4. The story */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.chapters{min-width:0}
.chapter{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--header-h));max-width:33rem;padding-block:4rem}
/* Each chapter opens with the thought it answers, as a small postcard from the moments above. */
.echo{display:flex;flex-direction:column;gap:.2rem;align-self:flex-start;max-width:100%;margin-bottom:1.6rem;padding:.65rem 1.05rem .75rem;border-radius:18px;background:var(--card);box-shadow:var(--shadow-soft);transform:rotate(-.8deg);font-size:1.0625rem;font-weight:700;line-height:1.3}
.echo .caps{font-size:.6875rem}
.chapter:nth-child(even) .echo{transform:rotate(.7deg)}
.chapter h2{font-size:clamp(2.15rem,3.6vw,3.35rem);line-height:1.05;letter-spacing:-.02em}
.facts{display:grid;gap:.6rem;margin-top:1.6rem;padding:0;list-style:none;font-weight:600;line-height:1.45}
.facts li{display:flex;gap:.8rem;align-items:baseline;text-wrap:pretty}
.facts li::before{content:"";flex:none;width:.4rem;height:.4rem;border-radius:50%;background:var(--text);opacity:.28;transform:translateY(-.1em)}
.note{max-width:30rem;margin-top:1.75rem;padding-top:1rem;border-top:1px solid var(--hair);color:var(--muted);font-size:.9375rem}

/* The phone sits on two tilted postcards, as in the App Store frames: Anna's marigold in front,
   lilac behind when a second person is on screen, a plain card otherwise. Geometry is the
   store artboard's, as fractions of the phone's width. */
.scene{container-type:inline-size;position:relative;isolation:isolate;width:var(--device-w,300px);max-width:100%;margin-inline:auto;--back-c:var(--lilac)}
.scene[data-back="blank"]{--back-c:var(--blank-card)}
.scene>.pc{position:absolute;z-index:-1;width:86%;aspect-ratio:900/1320;box-shadow:var(--shadow-postcard)}
.scene>.pc-back{left:44.3%;top:11.7%;background:var(--back-c);transform:rotate(var(--rb,7deg));transition:background-color 500ms ease,transform 900ms var(--spring)}
.scene>.pc-front{left:-32%;top:27.9%;transform:rotate(var(--rf,-8deg));transition:transform 900ms var(--spring)}

/* Device frame after the store artwork (warm silver, hardware camera cutout); inner sizes use
   container units (the scene is the container) so the frame scales as one. */
.device{position:relative;width:100%;padding:2.29cqw;border-radius:12.98cqw;background:linear-gradient(118deg,#c9c7bf 0%,#6b6c66 11%,#e2e0d8 22%,#86877f 38%,#55574f 61%,#c8c8bf 83%,#6e706a 100%);box-shadow:var(--shadow-device),0 0 0 .29cqw #4a4b45,inset 0 0 0 .29cqw #eeece4}
.device-screen{position:relative;overflow:hidden;aspect-ratio:1320/2868;border-radius:10.69cqw;background:var(--ground);box-shadow:0 0 0 .67cqw #111210}
.device-screen .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cutout{position:absolute;z-index:3;top:2.86cqw;left:50%;width:26.9cqw;height:7.82cqw;margin-left:-13.45cqw;border-radius:4.39cqw;background:#030403;box-shadow:inset 0 0 0 .19cqw #121512;pointer-events:none}
.cutout::after{content:"";position:absolute;right:1.9cqw;top:2.29cqw;width:3.24cqw;height:3.24cqw;border-radius:50%;background:radial-gradient(circle at 43% 40%,#10242b,#070b0b 48%,#030403 65%)}
.hw{position:absolute;z-index:-1;width:.76cqw;border:1px solid #4a4b45;border-radius:.4cqw;background:linear-gradient(90deg,#7c7d76,#d0cfc6,#5e5f58)}
.hw-action{left:-.76cqw;top:28.6cqw;height:5.9cqw}
.hw-up{left:-.76cqw;top:40.1cqw;height:10.5cqw}
.hw-down{left:-.76cqw;top:53.4cqw;height:10.5cqw}
.hw-power{right:-.76cqw;top:44.8cqw;height:16.8cqw}
.hw-camera{right:-.76cqw;top:115.5cqw;height:11.45cqw}

/* Screens follow the site theme: data-theme first, then the system setting. */
.shot-dark{display:none}
:root[data-theme="dark"] .shot-light{display:none}
:root[data-theme="dark"] .shot-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .shot-light{display:none}
  :root:not([data-theme="light"]) .shot-dark{display:block}
}

.stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));display:grid;place-items:center;pointer-events:none}
.stage-inner{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.stage .scene{--device-w:min(360px,calc((100svh - 12.5rem) * .4719))}
.stage[data-chapter="1"] .scene{--rb:5deg;--rf:-6.5deg}
.stage[data-chapter="2"] .scene{--rb:8deg;--rf:-9deg}
.stage[data-chapter="3"] .scene{--rb:6deg;--rf:-7deg}
.stage[data-chapter="4"] .scene{--rb:7.5deg;--rf:-8.5deg}
.stage[data-chapter="5"] .scene{--rb:5.5deg;--rf:-7deg}
/* Only the incoming screen fades, on top of the outgoing one; the outgoing one drops after. */
.stage .layer{position:absolute;inset:0;opacity:0;transition:opacity 0s linear 400ms}
.stage .layer[data-active]{z-index:2;opacity:1;transition:opacity 380ms ease}
.stage-progress{display:flex;align-items:center;gap:.75rem;padding:.5rem .95rem .5rem .8rem;border-radius:999px;background:var(--card);box-shadow:var(--shadow-soft);font-size:.875rem;font-weight:700;white-space:nowrap}
.stage-dots{display:flex;align-items:center;gap:.3rem;margin:0;padding:0;list-style:none}
.stage-dots li{width:.4rem;height:.4rem;border-radius:999px;background:var(--hair-strong);transition:width 420ms var(--spring),background-color 300ms ease}
.stage-dots li[data-active]{width:1.4rem;background:var(--marigold)}
.chapter-device{display:none;order:1}
/* Where a chapter shows its own phone, it comes right after the words it illustrates. */
.chapter .demo,.chapter .facts,.chapter .note,.chapter .sr-desktop{order:2}
/* Without JS the pinned phone cannot follow the chapters, so each chapter keeps its own phone. */
:root:not(.js) .stage{display:none}
:root:not(.js) .story{grid-template-columns:minmax(0,1fr)}
:root:not(.js) .chapter{min-height:0;max-width:36rem;margin-inline:auto;padding-block:3.75rem}
:root:not(.js) .chapter-device{display:block;margin:2.25rem 0 1rem}
:root:not(.js) .chapter-device .scene{--device-w:300px}
:root:not(.js) .theme-toggle{display:none}
/* Desktop screen-reader text for the pinned phone, whose images are decorative. */
.sr-desktop{display:none}
@media (min-width:960px){.js .sr-desktop{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}

/* ------------------------------------------------------------------ Today stack demo
   The C3 stack (kit: back tabs every 56, front card 236 tall, radius 26): a front card in the
   person's colour with Log and Not now, the others as postcard tabs behind it. Without JS it
   is the same stack as a static list, with no buttons. */
.demo{position:relative;width:100%;max-width:21rem;margin-top:1.9rem}
/* The demo keeps the four-card height, so the text below never jumps and the front card stays put. */
.demo-body{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(3 * 56px + 236px)}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2rem;margin-bottom:.8rem;padding-inline:.25rem}
.demo-title{color:var(--text)}
.count-chip{display:inline-flex;align-items:center;height:2rem;padding:0 .8rem;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:.875rem;font-weight:700;font-variant-numeric:tabular-nums}
.count-chip[hidden]{display:none}
.stack{--step:56px;--front-h:236px;position:relative;display:grid;flex:none;height:calc((var(--count,4) - 1) * var(--step) + var(--front-h));margin:0;padding:0;list-style:none}
.sc{grid-area:1/1;position:relative;z-index:calc(var(--slot) + 1);height:var(--front-h);border-radius:26px;background:var(--c);color:var(--ink);box-shadow:var(--shadow-tab);transform:translateY(calc(var(--slot) * var(--step)));transition:transform 560ms var(--spring),opacity 260ms ease,box-shadow 300ms ease}
.sc.is-front{box-shadow:var(--shadow-front)}
.sc.is-back:not(.is-front):not(.is-gone){box-shadow:none}
.sc[hidden]{display:none}
.sc-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"av nm st";align-items:center;column-gap:10px;height:100%;padding:12px 18px 0 12px;align-content:start}
.av{grid-area:av;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#FFFFFF;color:var(--ink);font-size:13px;font-weight:800;line-height:1}
.nm{grid-area:nm;min-width:0;font-size:20px;font-weight:800;line-height:32px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{grid-area:st;justify-self:end;font-size:14px;font-weight:800;line-height:19px;white-space:nowrap}
.ln,.ac{display:none}
.sc.is-front .sc-in{grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto auto auto;grid-template-areas:"av . st" ". . ." "nm nm nm" "ln ln ln" "ac ac ac";padding:14px 18px 18px 14px;align-content:stretch}
.sc.is-front .av{width:52px;height:52px;font-size:21px}
.sc.is-front .nm{padding-left:4px;font-size:38px;line-height:42px;letter-spacing:-1px}
.sc.is-front .ln{display:block;grid-area:ln;margin-top:2px;padding-left:4px;color:var(--d);font-size:16px;font-weight:500;line-height:21px}
.sc.is-front .ac{display:flex;grid-area:ac;gap:8px;margin-top:14px}
.sc.is-front[data-status="overdue"] .st{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-size:13px;font-weight:700}
.sc-btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--soft-on-colour);color:var(--ink);font-size:17px;font-weight:700;cursor:pointer;transition:transform 160ms var(--soft),background-color 150ms ease}
.sc-btn:active{transform:scale(.96)}
.sc-log{padding:0 22px;background:var(--ink);color:#FFFFFF}
.sc-btn[hidden],.sc-bring[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
  .sc-log:hover{background:#34323A}
  .sc-btn:not(.sc-log):hover{background:rgba(255,255,255,.72)}
  .sc-bring:hover{background:rgba(255,255,255,.14)}
}
.sc-bring{position:absolute;z-index:2;top:0;left:0;right:0;height:var(--step);padding:0;border:0;border-radius:26px 26px 0 0;background:transparent;cursor:pointer;transition:background-color 150ms ease}
.sc-bring:focus-visible{outline-offset:-3px;border-radius:26px 26px 8px 8px}
.sc.is-front .sc-bring{display:none}
.sc.is-gone{opacity:0;pointer-events:none}

/* The calm state (kit calm_card, D14) in place of the stack when nobody is left. */
.calm{display:flex;flex-direction:column;flex:none;height:236px;padding:14px 18px 18px 14px;border-radius:26px;background:var(--card);box-shadow:var(--shadow-card)}
.calm[hidden]{display:none}
.calm-top{display:flex;align-items:center;justify-content:space-between}
.sun{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--quiet);color:var(--text)}
.on-track{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800}
.on-track::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.calm h3{margin-top:auto;padding-left:4px;font-size:28px;font-weight:800;font-variation-settings:"opsz" 96;line-height:34px;letter-spacing:-.6px}
.calm-next{display:flex;align-items:center;gap:8px;margin-top:6px;padding-left:4px;color:var(--muted);font-size:14px;font-weight:600}
.calm-next .who{width:24px;height:24px;font-size:11px}
.calm .button{align-self:flex-start;min-height:48px;margin-top:14px;padding:0 22px;font-size:17px}

.stack[hidden]{display:none}
/* The hint and the toast share one row under the stack; the toast replaces the hint. */
.demo-foot{display:grid;min-height:4.5rem;margin-top:.9rem}
.demo-foot>*{grid-area:1/1}
.demo-hint{padding-inline:.25rem;color:var(--muted);font-size:.9375rem;line-height:1.45;transition:opacity 200ms ease}
.demo-hint[hidden]{display:none}
.demo-foot:has(.demo-toast:not(:empty)) .demo-hint{opacity:0}
.demo-toast{justify-self:center;align-self:start;max-width:100%;padding:.7rem 1.15rem;border-radius:22px;background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-toast);font-size:.9375rem;font-weight:700;line-height:1.35;text-align:center;transition:opacity 220ms ease,transform 320ms var(--soft)}
.demo-toast:empty{opacity:0;transform:translateY(6px);box-shadow:none}

/* Log and Not now open a small menu, as the app's Log menu and Not now choices do. */
.demo-menu{position:absolute;z-index:20;min-width:13rem;padding:.4rem;border-radius:22px;background:var(--card);color:var(--text);box-shadow:var(--shadow-menu)}
.demo-menu[hidden]{display:none}
.demo-menu .caps{padding:.55rem .85rem .35rem}
.demo-menu button{display:flex;align-items:center;gap:.7rem;width:100%;min-height:2.9rem;padding:0 .85rem;border:0;border-radius:14px;background:transparent;font-size:1.0625rem;font-weight:700;text-align:left;cursor:pointer}
.demo-menu button:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.demo-menu button:hover{background:var(--quiet)}}

/* ------------------------------------------------------------------ 5. Trust */
.trust-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.5rem clamp(3rem,6vw,5.5rem);align-items:start}
.trust-head{position:sticky;top:calc(var(--header-h) + 2.5rem)}
.trust-head h2{font-size:clamp(2.15rem,4.2vw,3.5rem);line-height:1.05;letter-spacing:-.02em}
.text-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.6rem;padding-block:.5rem;font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px}
.trust-list{padding:.4rem clamp(1.4rem,3vw,2.25rem);border-radius:28px;background:var(--card);box-shadow:var(--shadow-card)}
.trust-list>div{padding:1.5rem 0 1.6rem}
.trust-list>div+div{border-top:1px solid var(--hair)}
.trust-list dt{font-size:1.25rem;font-weight:800;font-variation-settings:"opsz" 48;letter-spacing:-.012em;line-height:1.3}
.trust-list dd{margin-top:.4rem;color:var(--muted)}

/* ------------------------------------------------------------------ 6. Price, as a card on a postcard */
.offer-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr);gap:3.5rem clamp(3rem,6vw,5.5rem);align-items:center}
.offer h2{font-size:clamp(2.1rem,3.8vw,3.25rem);line-height:1.06;letter-spacing:-.02em}
.offer-stack{position:relative;isolation:isolate;padding:1.25rem 0 1.75rem}
.offer-stack .pc{position:absolute;z-index:-1;inset:3% -3% -2% 5%;border-radius:32px;transform:rotate(-4deg);box-shadow:var(--shadow-postcard)}
.offer-card{padding:clamp(1.5rem,3vw,2.1rem);border-radius:28px;background:var(--card);box-shadow:var(--shadow-card)}
.offer-card h3{font-size:1.5rem;font-weight:800;font-variation-settings:"opsz" 96;letter-spacing:-.02em}
.plans{margin:1.1rem 0 0;padding:0;list-style:none}
.plans li{display:flex;align-items:baseline;justify-content:space-between;gap:.35rem 1rem;flex-wrap:wrap;padding:.85rem 0;border-top:1px solid var(--hair)}
.plans b{font-size:1.1875rem;font-weight:800}
.plans span{color:var(--muted);font-weight:600}
.offer-extras{display:grid;gap:.45rem;margin:.5rem 0 0;padding:1rem 0 0;border-top:1px solid var(--hair);list-style:none;font-weight:600;font-size:.9375rem}
.offer-extras li{display:flex;gap:.75rem;align-items:baseline}
.offer-extras li::before{content:"";flex:none;width:.4rem;height:.4rem;border-radius:50%;background:var(--text);opacity:.28;transform:translateY(-.1em)}
.offer-card .button{width:100%;margin-top:1.6rem;padding-inline:1.2rem}
.fine{margin-top:1rem;color:var(--muted);font-size:.8125rem;line-height:1.5}

/* ------------------------------------------------------------------ 7. Closing
   One last App Store frame: a card with the two postcards bleeding off its lower edges. */
.closing{padding-block:clamp(2rem,5vw,4rem) clamp(4rem,8vw,6rem)}
.closing-panel{position:relative;isolation:isolate;overflow:hidden;padding:clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,3rem) clamp(10rem,18vw,14rem);border-radius:clamp(28px,4vw,44px);box-shadow:var(--shadow-card)}
.closing .pc{position:absolute;z-index:-1;width:clamp(14rem,30vw,26rem);aspect-ratio:900/1320;box-shadow:var(--shadow-postcard)}
.closing .pc-back{right:clamp(-6rem,-4vw,-2rem);bottom:clamp(-29rem,-34vw,-15rem);transform:rotate(9deg)}
.closing .pc-front{left:clamp(-6rem,-4vw,-2rem);bottom:clamp(-31rem,-36vw,-16rem);transform:rotate(-8deg)}
.closing-panel{background:var(--marigold);color:var(--ink)}
.closing-panel h2,.closing-panel .closing-line,.closing-panel .requirement{color:var(--ink)}
.closing .hl{background:none;padding:0;margin:0;color:var(--ink)}
.closing .pc-front{display:none}
.closing .pc-back{background:var(--card)}
.closing .button{background:var(--ink);color:#FFFFFF}
.closing :focus-visible{outline-color:var(--ink)}
.closing-icon{width:clamp(5rem,9vw,6.5rem);height:auto;border-radius:22.5%;box-shadow:0 0 0 1px var(--hair),var(--shadow-card)}
.closing h2{margin-top:clamp(1.75rem,3.5vw,2.5rem);font-size:clamp(2.25rem,5vw,4.25rem);line-height:1.08;letter-spacing:-.018em}
.closing h2 .l+.l{margin-top:.08em}
.closing-line{margin:1.6rem 0 2.1rem;color:var(--muted);font-size:1.125rem}
.requirement{margin-top:.9rem;color:var(--muted);font-size:.875rem;font-weight:600}

/* ------------------------------------------------------------------ Footer */
.site-footer{padding-block:2.5rem 3rem;color:var(--muted);font-size:.875rem}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--hair)}
.footer-row .brand{font-size:1.15rem;color:var(--text)}
.footer-row .brand img{width:1.75rem;height:1.75rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.footer-links a{padding-block:.6rem;text-decoration:none}
.footer-note{max-width:44rem;margin-top:1.25rem;line-height:1.6}
@media (hover:hover) and (pointer:fine){.footer-links a:hover{color:var(--text);text-decoration:underline}}

/* ------------------------------------------------------------------ Responsive */
@media (max-width:1100px){
  .stage-progress{font-size:.8125rem}
}
@media (max-width:959px){
  .story{display:block}
  .stage{display:none}
  .chapter{min-height:0;max-width:36rem;margin-inline:auto;padding-block:3.75rem}
  .chapter+.chapter{border-top:1px solid var(--hair)}
  .chapter-device{display:block;margin:2.25rem 0 1rem}
  .chapter-device .scene{--device-w:min(64vw,300px)}
  .trust-inner,.offer-inner{grid-template-columns:minmax(0,1fr)}
  .trust-head{position:static}
  .offer-inner{max-width:36rem;margin-inline:auto}
}
@media (max-width:760px){
  .moments{grid-template-columns:minmax(0,1fr);max-width:30rem}
  .moment,.moment:nth-child(n){grid-column:1}
  .moment:nth-child(odd){--tilt:-.5deg}
  .moment:nth-child(even){--tilt:.5deg}
  .fixes{grid-template-columns:minmax(0,1fr);max-width:30rem;padding:.25rem .5rem}
  .fixes li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;padding:1.25rem .75rem}
  .fixes li+li{border-left:0;border-top:1px solid var(--hair)}
  .fixes .tile{grid-row:1/span 2;width:2.9rem;height:2.9rem;border-radius:14px}
  .fixes h3{margin-top:0}
  .tabbar{row-gap:.75rem}
  .tabbar dd{grid-column:1/-1!important;grid-row:auto;padding:0 .25rem;text-align:left}
  .tabbar dd b{display:inline;color:var(--text);font-weight:800}
  .tabbar-note{max-width:30rem;text-align:left;width:100%}
  .meet .tabbar{margin-bottom:.25rem}
}
@media (max-width:560px){
  .preview-note b{display:block;margin:0 0 .1rem}
  .hook{min-height:0;padding-block:2.5rem 3.5rem}
  .hook h1{font-size:clamp(2.6rem,11vw,3.2rem)}
  .hook h1 .l+.l{font-size:.68em;margin-top:.28em}
  .lead-turn{font-size:1.3rem}
  .site-header{gap:.5rem}
  .brand{font-size:1.2rem}
  .button-small{padding:.55rem .9rem}
  .plans li{flex-direction:column;gap:.1rem}
  .closing .pc{width:11.5rem}
  .closing .pc-front{left:-3.5rem;bottom:-10.5rem}
  .closing .pc-back{right:-3.5rem;bottom:-9.5rem}
  .closing-panel{padding-bottom:10.5rem}
}
@media (max-width:440px){.offer-card .long{display:none}}
@media (max-width:360px){
  .brand{gap:.45rem;font-size:1.1rem}
  .brand img{width:2rem;height:2rem}
  .header-end{gap:.15rem}
  .site-header .button-small{padding:.55rem .85rem}
  .site-header .button-small svg{display:none}
}
@media (max-width:380px){
  .sc.is-front .nm{font-size:34px}
  .sc-btn{padding:0 16px}
  .sc-log{padding:0 18px}
}

/* ------------------------------------------------------------------ Motion
   html.motion-on comes from the inline <head> script unless reduced motion is requested;
   html.reveal-ready comes from site.js, so nothing stays hidden without it. */
@keyframes it-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes it-fade{from{opacity:0}}
@keyframes it-mark{from{background-size:0% 100%}}
@keyframes it-card-back{from{opacity:0;transform:translate(-18%,14%) rotate(-20deg)}}
@keyframes it-card-front{from{opacity:0;transform:translate(26%,22%) rotate(18deg)}}
@keyframes it-hug{45%{transform:scale(1.07)}}
.motion-on .hook-cards{animation:it-hug 650ms var(--soft) 1050ms both}
.motion-on .hook-cards .pc-back{animation:it-card-back 900ms var(--spring) 100ms both}
.motion-on .hook-cards .pc-front{animation:it-card-front 1000ms var(--spring) 350ms both}
.motion-on .hook h1 .l{animation:it-rise 800ms var(--spring) 250ms both}
.motion-on .hook h1 .l+.l{animation-delay:500ms}
.motion-on .hook h1 .hl{animation:it-mark 800ms var(--soft) 1100ms both}
.motion-on .hook .lead{animation:it-rise 800ms var(--spring) 850ms both}
.motion-on .hook .lead-turn{animation:it-rise 800ms var(--spring) 1150ms both}
.motion-on .hook .scroll-cue{animation:it-fade 600ms ease 1700ms both}

/* The marker draws itself under each second line as the heading arrives. */
.motion-on.reveal-ready [data-reveal] .hl{background-size:0% 100%}
.motion-on.reveal-ready [data-reveal].is-visible .hl{background-size:100% 100%;transition:background-size 760ms var(--soft) 260ms}

.motion-on.reveal-ready .moment[data-reveal]{opacity:0;transform:translateY(34px) rotate(calc(var(--tilt,0deg) * -2.2))}
.motion-on.reveal-ready .moment[data-reveal].is-visible{opacity:1;transform:rotate(var(--tilt,0deg));transition:opacity 500ms ease,transform 950ms var(--spring)}
.motion-on.reveal-ready .rise[data-reveal]{opacity:0;transform:translateY(22px)}
.motion-on.reveal-ready .rise[data-reveal].is-visible{opacity:1;transform:none;transition:opacity 500ms ease,transform 800ms var(--soft)}
.motion-on.reveal-ready .stage-inner[data-reveal]{opacity:0;transform:translateY(56px) scale(.95)}
.motion-on.reveal-ready .stage-inner[data-reveal].is-visible{opacity:1;transform:none;transition:opacity 500ms ease,transform 1000ms var(--spring)}

/* Reduced motion: no movement anywhere. Screens and the stack swap with a short fade. */
@media (prefers-reduced-motion:reduce){
  .button,.theme-toggle,.sc-btn{transition:background-color 150ms ease,color 150ms ease}
  .button:active,.theme-toggle:active,.sc-btn:active{transform:none}
  .site-header,.site-header::before,.scene>.pc,.stage-dots li,.demo-toast,.sc-bring{transition:none}
  .sc{transition:opacity 150ms ease}
  .stage .layer{transition:opacity 0s linear 160ms}
  .stage .layer[data-active]{transition:opacity 150ms ease}
}
@media print{.theme-toggle,.stage,.preview-note,.demo-hint{display:none}}