/* Relay, dark and quiet: deep navy, chalk type, coral for progress and the one button that moves the story on. */
/* Shared with the other guided demos (demos/ai-search-visibility, demos/law-review-requests). */
/* 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}

.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)}}
.step.still{animation:none}
@media (prefers-reduced-motion:reduce){.step,.caret{animation:none}}

/* Message draft: an email or text waiting for approval */
.mail{border-radius:18px;background:var(--raise);overflow:hidden}
.mail-head{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.mail-head b{color:var(--fg);font-weight:600;font-size:16px}
.mail-body{display:flex;flex-direction:column;gap:10px;padding:16px 18px;font-size:16px}
.mail-body ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.mail-body li{display:flex;gap:10px;align-items:baseline}
.mail-body li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral-soft);flex:none;transform:translateY(-2px)}
.mail-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--raise-2);color:var(--muted);font:500 13px/1 var(--body);white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.warn{background:var(--miss-bg);color:var(--coral-soft)}
.badge.wait{background:var(--raise-2);color:var(--muted)}
.rows .tag{flex:none}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600}
.card-title span{color:var(--muted);font:500 14px/1 var(--body)}
.grid.wide{grid-template-columns:repeat(6,1fr);gap:5px}
.grid.wide i{border-radius:5px}
.file{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--raise)}
.file .thumb{width:54px;height:54px;border-radius:10px;flex:none;background:linear-gradient(135deg,var(--raise-2),var(--faint));filter:blur(1.5px)}
.file .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.file strong{font-weight:600}
.file small{color:var(--muted);font-size:15px}