/* Relay, dark and quiet: deep navy, chalk type, coral for progress and the one button that moves the story on. */
/* Layout: one idea per screen in a single narrow column. Progress on top, the picture in the middle, one button at the bottom. */
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url("/assets/fonts/Manrope-700.woff2") format("woff2");}
@font-face{font-family:"Manrope";font-weight:800;font-display:swap;src:url("/assets/fonts/Manrope-800.woff2") format("woff2");}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("/assets/fonts/Inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("/assets/fonts/Inter-500.woff2") format("woff2");}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("/assets/fonts/Inter-600.woff2") format("woff2");}

:root{
  --bg:#08121D; --raise:#0F1E2D; --raise-2:#152839; --fg:#F4F1EC; --muted:#8C9DAA; --faint:#3A4D5D; --line:rgba(244,241,236,.09);
  --coral:#FF553C; --coral-soft:#FF8A75; --ok:#6FD6A8; --ok-bg:rgba(111,214,168,.12); --miss-bg:rgba(255,138,117,.12);
  --display:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:400 17px/1.5 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,p,ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--coral-soft);outline-offset:3px;border-radius:10px}

.app{max-width:600px;min-height:100vh;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}

.top{display:flex;align-items:center;gap:14px}
.brand{display:flex;flex:none}
.mark{width:30px;height:auto}
.mark-a{fill:var(--fg)} .mark-b{fill:var(--coral)}
.dots{display:flex;gap:6px;flex:1}
.dots i{flex:1;height:4px;border-radius:4px;background:var(--raise-2);transition:background .3s}
.dots i.on{background:var(--coral)}
.count{font:500 13px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}

.stage{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;padding-block:28px}
.step{display:flex;flex-direction:column;gap:26px;animation:in .35s ease both}
@keyframes in{from{transform:translateY(8px);opacity:.4}to{transform:none;opacity:1}}
.kicker{font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--coral-soft)}
.head{display:flex;flex-direction:column;gap:12px}
h1{font:800 clamp(30px,7.2vw,44px)/1.08 var(--display);letter-spacing:-.025em;text-wrap:balance}
.lede{color:var(--muted);font-size:18px;max-width:34em;text-wrap:pretty}
.lede b{color:var(--fg);font-weight:600}

/* Chat picture */
.chat{display:flex;flex-direction:column;gap:12px}
.who{font:500 13px/1 var(--body);color:var(--muted)}
.ask{align-self:flex-end;max-width:88%;padding:14px 18px;border-radius:22px 22px 6px 22px;background:var(--raise-2);font-size:18px;font-weight:500}
.ask .who{display:block;margin-bottom:8px}
.reply{align-self:flex-start;max-width:94%;padding:16px 18px;border-radius:22px 22px 22px 6px;background:var(--raise);display:flex;flex-direction:column;gap:12px}
.reply ol{list-style:none;display:flex;flex-direction:column;gap:8px}
.reply li{display:flex;align-items:center;gap:12px;font-weight:500}
.reply li span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--raise-2);font:600 13px/1 var(--body);color:var(--muted);flex:none}
.reply li.you{margin:-6px -10px;padding:6px 10px;border-radius:12px;background:var(--ok-bg);color:var(--ok)}
.reply li.you span{background:var(--ok);color:var(--bg)}
.verdict{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;font-weight:600}
.verdict.miss{background:var(--miss-bg);color:var(--coral-soft)}
.verdict.hit{background:var(--ok-bg);color:var(--ok)}
.caret{display:inline-block;width:2px;height:1em;margin-left:2px;background:var(--coral);vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* Rows: reasons and fixes */
.rows{list-style:none;display:flex;flex-direction:column}
.rows li{display:flex;align-items:center;gap:14px;padding-block:16px;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows .txt{flex:1;min-width:0}
.rows strong{display:block;font-weight:600}
.rows small{display:block;color:var(--muted);font-size:15px}
.badge{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;font-weight:700}
.badge.x{background:var(--miss-bg);color:var(--coral-soft)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.approve{min-height:40px;padding:0 16px;border:1px solid var(--faint);border-radius:999px;background:transparent;font-weight:600;font-size:15px;cursor:pointer;flex:none;transition:background .2s,border-color .2s}
.approve:hover{background:var(--raise)}
.approve[disabled]{border-color:transparent;background:var(--ok-bg);color:var(--ok);cursor:default}

/* Before and after grid */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.side{padding:18px;border-radius:18px;background:var(--raise);display:flex;flex-direction:column;gap:14px}
.side .label{font:500 14px/1 var(--body);color:var(--muted)}
.side .num{font:800 clamp(34px,9vw,48px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.side .num em{font-style:normal;color:var(--faint)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.grid i{aspect-ratio:1;border-radius:7px;background:var(--raise-2)}
.grid i.on{background:var(--ok)}
.after .num{color:var(--ok)}
.note{color:var(--muted);font-size:15px}

.found{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px dashed var(--faint);border-radius:16px}
.found .thumb{width:56px;height:56px;border-radius:10px;flex:none}
.found .txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.found strong{font-weight:600;font-size:16px}
.found small{color:var(--muted);font-size:14px}
.arrowdown{color:var(--coral-soft);font-weight:600;font-size:15px;margin-block:-10px}
/* Post draft: a swipeable carousel in the sample company's own colours */
.post{border-radius:20px;background:var(--raise);overflow:hidden}
.post-top{display:flex;align-items:center;gap:10px;padding:12px 14px}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#E9E2D3;color:#2F4A3C;font:800 13px/1 var(--display);flex:none}
.post-top b{font-weight:600;font-size:15px}
.post-top .who{margin-left:auto}
.slides{position:relative;aspect-ratio:5/4;background:#E9E2D3;touch-action:pan-y}
.slides svg{position:absolute;inset:0;width:100%;height:100%;display:block;background:inherit}
.slides svg[hidden]{display:none}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:rgba(8,18,29,.72);color:var(--fg);font-size:20px;line-height:1;cursor:pointer}
.arrow.l{left:10px} .arrow.r{right:10px}
.arrow[hidden]{display:none}
.post-bottom{display:flex;align-items:center;gap:12px;padding:12px 14px}
.pips{display:flex;gap:5px}
.pips i{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.pips i.on{background:var(--fg)}
.cap{flex:1;min-width:0;color:var(--muted);font-size:14px}

.nav{display:flex;align-items:center;gap:12px;position:sticky;bottom:env(safe-area-inset-bottom,0px);padding-block:10px;background:linear-gradient(transparent,var(--bg) 22%)}
.back{min-height:52px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:600;cursor:pointer}
.back:hover{color:var(--fg)}
.back[hidden]{display:none}
.next[hidden]{display:none}
.next{flex:1;min-height:52px;padding:0 22px;border:0;border-radius:999px;background:var(--coral);color:#1A0B07;font-weight:700;font-size:17px;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,box-shadow .2s}
.next:hover{box-shadow:0 0 0 6px rgba(255,85,60,.16)}
.next:active{transform:scale(.985)}
.sample{margin-top:14px;text-align:center;color:var(--faint);font-size:13px}
@media (max-height:860px){.stage{padding-block:14px 8px}.step{gap:16px}h1{font-size:clamp(26px,6.4vw,38px)}.found{padding:9px 12px}.found small{display:none}.slides{aspect-ratio:25/17}.post-top{padding:9px 14px}.post-bottom{padding:9px 14px}}
.step.still{animation:none}
@media (prefers-reduced-motion:reduce){.step,.caret{animation:none}}