/* The new Lagos Life chat. Colours, type, radii and motion come from DS A tokens.css. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;line-height:1.1;letter-spacing:-0.01em;text-wrap:balance}
p{margin:0 0 .85em}
a{color:var(--lagoon-deep);text-underline-offset:3px}
button{font-family:var(--font-body)}
:focus-visible{outline:var(--focus-width) solid var(--ring);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:16px;top:-60px;z-index:10;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--radius-sm);text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:1fr}
@media (min-width:1100px){
  .layout{grid-template-columns:minmax(500px,47%) 1fr}
  .stage{position:sticky;top:0;height:100vh;height:100svh}
}

/* ---------- Stage ---------- */
.stage{background:var(--ll-slate-100);transition:background-color var(--duration-enter) var(--ease-standard);display:flex;align-items:center;justify-content:center;padding:24px 16px}
body[data-night] .stage{background:var(--ll-night-950)}
.stage__inner{display:flex;flex-direction:column;align-items:center;width:100%}

/* The slot holds the phone's place in the split view. */
.phone-slot{position:relative;width:min(calc(90svh * 414 / 868), 100%);aspect-ratio:414/868}
@media (min-width:1100px){.phone-slot{width:min(calc(80svh * 414 / 868), calc((100svh - 200px) * 414 / 868), 100%)}}

/* Phone. --u is 1/414 of the phone width (set in app.js). Frame 414 x 868 units: 390 x 844 screen + 5.5 metal + 6.5 bezel each side. */
.phone{--u:0.9px;position:absolute;inset:0;width:100%;height:100%;transform-origin:0 0;
  padding:calc(var(--u) * 5.5);border-radius:calc(var(--u) * 66);
  background:
    repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 3px),
    linear-gradient(145deg,#7a2232 0%,#4a0f1c 26%,#6b1a2b 50%,#4a0f1c 74%,#7a2232 100%);
  box-shadow:
    inset 0 0 0 calc(var(--u) * .8) #d48a9866,
    inset 0 calc(var(--u) * 1.2) 0 #ffffff2e,
    0 calc(var(--u) * 40) calc(var(--u) * 80) calc(var(--u) * -20) #2a0a1259,
    0 calc(var(--u) * 12) calc(var(--u) * 30) #1d243326}
.phone__bezel{width:100%;height:100%;padding:calc(var(--u) * 6.5);border-radius:calc(var(--u) * 60.5);background:#050405;box-shadow:inset 0 0 0 calc(var(--u) * 1) #2a1a1e}
.phone__screen{position:relative;width:100%;aspect-ratio:390/844;overflow:hidden;border-radius:calc(var(--u) * 54);background:var(--paper);isolation:isolate}
.phone__screen iframe{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform-origin:0 0;transform:scale(var(--s,1));background:var(--paper)}
.phone__btn{position:absolute;width:calc(var(--u) * 3.5);border-radius:calc(var(--u) * 2);
  background:linear-gradient(90deg,#3d0c17,#8a3242 55%,#5a1424)}
.phone__btn--action{left:calc(var(--u) * -2.5);top:15%;height:5.4%}
.phone__btn--up{left:calc(var(--u) * -2.5);top:24.5%;height:8.6%}
.phone__btn--down{left:calc(var(--u) * -2.5);top:35%;height:8.6%}
.phone__btn--side{right:calc(var(--u) * -2.5);top:27%;height:13%;background:linear-gradient(270deg,#3d0c17,#8a3242 55%,#5a1424)}

/* ---------- Under the phone ---------- */
.controls{display:flex;justify-content:center;gap:8px;margin-top:20px}
.focus-open{font:600 15px/1 var(--font-body);min-height:44px;padding:0 18px;border:0;border-radius:var(--radius-full);background:var(--paper);color:var(--ll-slate-900);box-shadow:0 0 0 1px var(--line);cursor:pointer;
  transition:box-shadow var(--duration-state) var(--ease-standard),transform var(--duration-press) var(--ease-standard)}
.focus-open:hover{box-shadow:0 0 0 1px var(--ll-slate-400)}
.focus-open:active{transform:scale(.97)}
.hint{margin:12px 0 0;font-size:14px;line-height:1.45;text-align:center;color:var(--ll-slate-600);max-width:46ch}
body[data-night] .hint{color:var(--ll-night-400)}
body[data-night] .focus-open{background:var(--ll-night-900);color:var(--ll-night-100);box-shadow:0 0 0 1px #ffffff1f}
body[data-night] .focus-open:hover{box-shadow:0 0 0 1px var(--ll-night-500)}

/* ---------- Focus mode ---------- */
.focus{position:fixed;inset:0;z-index:60;background:var(--ll-slate-100)}
body[data-night] .focus{background:var(--ll-night-950)}
.focus-ui{position:fixed;inset:0;z-index:62;pointer-events:none}
.focus-ui > *{pointer-events:auto}
.focus[hidden],.focus-ui[hidden]{display:none}
body.is-focus{overflow:hidden;--fw:min(calc(92svh * 414 / 868), calc(100vw - 32px))}
body.is-focus .stage{position:relative;z-index:61;background:transparent;pointer-events:none}
body.is-focus .stage__inner > :not(.phone-slot){visibility:hidden}
body.is-focus .phone{position:fixed;inset:auto;pointer-events:auto;width:var(--fw);height:calc(var(--fw) * 868 / 414);
  left:calc(50vw - var(--fw) / 2);top:calc(50svh - var(--fw) * 434 / 414)}

.focus-close{position:absolute;top:20px;right:20px;width:48px;height:48px;border:0;border-radius:50%;background:var(--paper);color:var(--ll-slate-900);font:600 18px/1 var(--font-body);cursor:pointer;box-shadow:0 0 0 1px var(--line)}
body[data-night] .focus-close{background:var(--ll-night-900);color:var(--ll-night-100);box-shadow:0 0 0 1px #ffffff1f}

/* Below desktop, Focus mode is the phone filling the screen with a small close button. */
@media (max-width:1099px){
  body.is-focus{--fw:min(calc(100vw - 16px), calc((100svh - 16px) * 414 / 868))}
    .focus-close{top:8px;right:8px;width:40px;height:40px;font-size:15px;box-shadow:0 0 0 1px var(--line),0 6px 16px #1d243333}
}

/* ---------- Story ---------- */
.story{padding:56px 20px 64px;max-width:720px}
@media (min-width:768px){.story{padding:72px 48px 80px;margin:0 auto}}
@media (min-width:1100px){.story{padding:96px clamp(48px,6vw,112px) 120px;margin:0}}

.intro{margin-bottom:80px}
.intro__brand{font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--primary);margin-bottom:28px}
h1{font-size:clamp(2.5rem,4.4vw,3.75rem);font-weight:700;line-height:1.02;margin-bottom:24px;max-width:14ch}
.lede{font-size:clamp(1.125rem,1.4vw,1.25rem);line-height:1.55;max-width:32em;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:16px 40px;margin:36px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.facts dt{font-size:14px;color:var(--ink-soft);font-weight:500}
.facts dd{margin:2px 0 0;font-size:15px;font-weight:600;line-height:1.45}
@media (max-width:639px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

.chapter{padding:0 0 88px;max-width:36em}
@media (min-width:768px){.chapter{padding-bottom:112px}}
.chapter h2{font-size:clamp(1.75rem,2.4vw,2.125rem);margin-bottom:16px}

.struggles{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.struggles li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5}
.struggles b{font-weight:700}

.gain{margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.gain div{display:grid;grid-template-columns:120px 1fr;gap:12px}
.gain dt{font-weight:700;font-size:15px;color:var(--primary);line-height:1.6}
.gain dd{margin:0;font-size:16px;line-height:1.55}
@media (max-width:479px){.gain div{grid-template-columns:1fr;gap:0}}

/* See it on the phone */
.see{margin:20px 0 0}
.see__link,.figma__link{font-weight:700;font-size:16px;color:var(--primary);text-decoration:none;border-radius:4px}
.see__link:hover,.figma__link:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
:root.dark .see__link,:root.dark .figma__link,:root.dark .gain dt,:root.dark .intro__brand{color:var(--leaf-deep)}

.credits{border-top:1px solid var(--line);padding-top:28px;font-size:14px;line-height:1.55;color:var(--ink-soft);max-width:36em}
.credits a{font-weight:600}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important;scroll-behavior:auto !important}
}

/* Light/Night: one small icon switch beside Focus */
.mode-toggle{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--paper);color:var(--ll-slate-900);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:transform var(--duration-fast,150ms) ease}
.mode-toggle:hover{box-shadow:0 0 0 1px var(--ll-slate-400)}
.mode-toggle:active{transform:scale(.94)}
.mode-toggle:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.mode-toggle__sun{display:none}
body[data-night] .mode-toggle{background:var(--ll-night-900);color:var(--ll-night-100);box-shadow:0 0 0 1px #ffffff1f}
body[data-night] .mode-toggle__sun{display:block}
body[data-night] .mode-toggle__moon{display:none}

.figma__link:focus-visible{outline:3px solid var(--primary);outline-offset:3px}