/* ---------- Companion page: world + dossier ---------- */
body.companion{--sw-bg:var(--bg);--sw-ink:var(--ink);--sw-ink-soft:var(--ink-soft);--sw-font-display:var(--font);--sw-font-body:var(--font)}
#world{position:relative}
#world.sw-root{--sw-bg:var(--bg);--sw-ink:var(--ink);--sw-ink-soft:var(--ink-soft);--sw-accent:var(--accent);--sw-font-display:var(--font);--sw-font-body:var(--font)}
.sw-root .sw-topbar{display:none}
.sw-root .sw-copy__title{font-weight:800;letter-spacing:-.04em;font-size:clamp(2.2rem,4.8vw,4.2rem)}
.sw-root .sw-copy__eyebrow{letter-spacing:.26em;font-size:.72rem;color:color-mix(in srgb,var(--accent) 72%,var(--ink))}
.sw-root .sw-copy__num{font-family:var(--font);font-weight:700;letter-spacing:.2em}
.sw-root .sw-scrollbar{z-index:90}
.sw-root .sw-copy__body{font-size:clamp(1rem,1.2vw,1.15rem)}
.sw-root .sw-btn{font-weight:700}
.sw-root .sw-btn{font-weight:700;font-size:.95rem;padding:14px 26px;display:inline-flex;align-items:center}
.sw-root .sw-btn--primary{background:var(--ink);color:#fff}
.sw-root .sw-btn--ghost{color:var(--ink);border:1.5px solid rgba(21,19,22,.25)}
.sw-root .sw-copy__tags li{font-size:.84rem;padding:8px 14px;color:var(--ink);background:rgba(255,255,255,.6);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.sw-root .sw-copy__tags{margin-top:20px}
.sw-root .sw-copy__cta{margin-top:26px}
.sw-root .sw-copy__num{color:var(--ink-soft)}
.sw-root .sw-hint{font-weight:700}

/* companion badge (fixed while flying) */
.who{position:fixed;left:50%;top:clamp(16px,2.4vw,28px);transform:translateX(-50%);z-index:85;display:flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 6px;border-radius:999px;background:rgba(255,255,255,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 30px -18px rgba(21,19,22,.5);font-weight:700;font-size:.86rem;transition:opacity .4s,transform .4s}
.who__av{width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--bg-deep)}
.who__av img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:scale(1.6);transform-origin:center 22%}
.who__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.who small{font-weight:500;color:var(--ink-soft)}
body.is-released .who{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-8px)}
body.is-released .top .pill--ghost{background:rgba(255,255,255,.92)}

/* ---------- dossier sheet ---------- */
.dossier{position:relative;z-index:45;background:var(--bg);border-radius:36px 36px 0 0;box-shadow:0 -30px 80px -40px rgba(21,19,22,.45);margin-top:-1px}
.dossier::before{content:"";position:absolute;left:50%;top:14px;width:56px;height:5px;border-radius:3px;background:rgba(21,19,22,.14);transform:translateX(-50%)}
.wrap{width:min(1180px,100% - 2*clamp(18px,5vw,64px));margin:0 auto}
.sec{padding:clamp(64px,9vw,120px) 0}
.sec--tight{padding-top:clamp(40px,6vw,80px)}
.sec + .sec{border-top:1px solid var(--line)}
.sec__head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:60ch}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}

/* hero of dossier */
.dhero{padding-top:clamp(56px,8vw,96px)}
.dhero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.meta{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid var(--line);font-weight:600;font-size:.86rem;color:var(--ink)}
.meta i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.meta svg{width:16px;height:16px}
.closeup{position:relative;aspect-ratio:3/4;border-radius:32px;overflow:hidden;background:var(--bg-deep);box-shadow:0 40px 80px -40px rgba(21,19,22,.6);isolation:isolate}
.closeup video,.closeup img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.closeup img{mix-blend-mode:multiply}
.closeup{background:var(--bg-deep)}
.closeup video{opacity:0;transition:opacity .5s}
.closeup.is-live video{opacity:1}
.closeup__tag{position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;background:rgba(21,19,22,.82);color:#fff;font-weight:600;font-size:.8rem;backdrop-filter:blur(8px)}
.closeup__tag i{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.25);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(74,222,128,.08)}}

/* chat demo (iMessage-accurate, incl. typing bubble) */
.phone{position:relative;width:min(400px,100%);margin:0 auto;border-radius:40px;background:#F4EFEB;border:1px solid rgba(21,19,22,.08);box-shadow:0 50px 90px -50px rgba(21,19,22,.6),inset 0 0 0 6px #fff;padding:22px 18px 22px;min-height:560px;display:flex;flex-direction:column}
.phone__head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 18px;border-bottom:1px solid rgba(21,19,22,.06);margin-bottom:14px}
.phone__av{width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--bg-deep)}
.phone__av img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:scale(1.6);transform-origin:center 22%}
.phone__name{font-weight:700;font-size:1rem}
.phone__sub{font-size:.76rem;color:var(--ink-soft)}
.thread{display:flex;flex-direction:column;gap:8px;flex:1}
.msg{position:relative;max-width:78%;padding:10px 14px;border-radius:20px;font-size:.98rem;line-height:1.35;opacity:0;transform:translateY(10px) scale(.92);transition:opacity .35s var(--ease-out),transform .45s var(--ease-spring)}
.msg.in{opacity:1;transform:none}
.msg--in{align-self:flex-start;background:#EAE3DF;color:var(--ink);border-bottom-left-radius:6px;transform-origin:0 100%}
.msg--out{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px;transform-origin:100% 100%}
.msg--in::before{content:"";position:absolute;left:-6px;bottom:0;width:16px;height:16px;background:#EAE3DF;border-bottom-right-radius:14px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.msg--out::before{content:"";position:absolute;right:-6px;bottom:0;width:16px;height:16px;background:var(--blue);border-bottom-left-radius:14px;clip-path:polygon(0 0,100% 100%,0 100%)}
.msg--typing{display:flex;gap:5px;align-items:center;height:38px;padding:0 14px}
.msg--typing i{width:8px;height:8px;border-radius:50%;background:#9A918D;animation:tdot 1.2s infinite}
.msg--typing i:nth-child(2){animation-delay:.15s}.msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.msg--voice{display:flex;align-items:center;gap:10px;min-width:210px}
.msg--voice .play{width:28px;height:28px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none}
.msg--voice .play::before{content:"";width:0;height:0;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.wave{display:flex;align-items:center;gap:2px;height:22px;flex:1}
.wave i{width:3px;border-radius:2px;background:var(--ink);opacity:.55;height:var(--h)}
.msg--voice.is-playing .wave i{animation:wv 1s ease-in-out infinite;animation-delay:calc(var(--i) * 40ms)}
@keyframes wv{50%{transform:scaleY(.45)}}
.msg--voice small{font-size:.74rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.phone__input{margin-top:14px;display:flex;align-items:center;gap:10px;height:40px;border-radius:999px;background:#fff;border:1px solid rgba(21,19,22,.1);padding:0 6px 0 16px;font-size:.9rem;color:var(--ink-soft)}
.phone__input b{margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--blue);display:grid;place-items:center}
.phone__input b::before{content:"";width:8px;height:8px;border-left:2.5px solid #fff;border-top:2.5px solid #fff;transform:translateY(2px) rotate(45deg)}
.phone__replay{position:absolute;right:8px;top:8px;padding:12px;font-size:.72rem;font-weight:700;color:var(--ink-soft);opacity:.8;border-radius:12px}
.phone__replay:hover{background:rgba(21,19,22,.06)}

/* remembers */
.mem{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mem li{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.55);border:1px solid var(--line);font-weight:600;font-size:.98rem}
.mem li i{width:24px;height:24px;border-radius:50%;background:var(--accent);flex:none;display:grid;place-items:center}
.mem li i::before{content:"";width:6px;height:10px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateY(-1px) rotate(45deg)}

/* triggers timeline */
.tl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tl li{position:relative;padding:22px 20px 22px;border-radius:22px;background:rgba(255,255,255,.55);border:1px solid var(--line)}
.tl time{display:inline-block;font-weight:800;letter-spacing:-.02em;font-size:1.5rem;color:color-mix(in srgb,var(--accent) 72%,var(--ink));margin-bottom:8px;font-variant-numeric:tabular-nums}
.tl h4{font-size:1.05rem;margin-bottom:6px}
.tl p{color:var(--ink-soft);font-size:.92rem;line-height:1.45}

/* built for */
.bf{display:flex;flex-wrap:wrap;gap:10px}
.bf span{height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:.9rem}

/* big CTA */
.cta{position:relative;overflow:hidden;border-radius:36px;background:var(--ink);color:#fff;padding:clamp(48px,7vw,96px) clamp(24px,6vw,80px);display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.cta::before{content:"";position:absolute;right:-10%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 70%,transparent),transparent 70%);filter:blur(30px);opacity:.8}
.cta h2{position:relative;color:#fff}
.cta p{position:relative;color:rgba(255,255,255,.7);font-size:1.1rem;margin-top:14px;max-width:44ch}
.cta__btns{position:relative;display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.cta .btn--primary{background:#fff;color:var(--ink)}
.cta .btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.cta__fig{position:relative;justify-self:end;width:min(300px,100%);aspect-ratio:3/4;border-radius:28px;overflow:hidden}
.cta__fig img{width:100%;height:100%;object-fit:cover;object-position:center bottom;mix-blend-mode:screen;filter:contrast(1.05)}

/* next companion */
.nextc{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.5);text-decoration:none;transition:transform .3s var(--ease-out),box-shadow .3s}
.nextc:hover{transform:translateY(-3px);box-shadow:0 30px 60px -40px rgba(21,19,22,.6)}
.nextc__l{display:flex;align-items:center;gap:16px}
.nextc__av{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--bg-deep)}
.nextc__av img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:scale(1.6);transform-origin:center 22%}
.nextc small{display:block;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:4px}
.nextc b{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.nextc svg{width:26px;height:26px;flex:none}
footer{padding:40px 0 calc(40px + env(safe-area-inset-bottom));color:var(--ink-soft);font-size:.82rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{text-decoration:none;font-weight:600;color:var(--ink);display:inline-block;padding:12px 4px}

@media (max-width:900px){
  .grid2{grid-template-columns:1fr}
  .closeup{max-width:420px;margin:0 auto}
  .tl{grid-template-columns:repeat(2,1fr)}
  .cta{grid-template-columns:1fr}
  .cta__fig{display:none}
}
@media (max-width:600px){
  .mem{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr}
  .dossier{border-radius:28px 28px 0 0}
  .phone{min-height:520px;padding:18px 14px}
  .who{top:calc(12px + env(safe-area-inset-top));height:38px;font-size:.8rem}
  .who small{display:none}
  .top .pill--ink{display:none}
  .nextc b{font-size:1.05rem}
}

/* phones in portrait: keep the whole 16:9 frame (no arbitrary crop), copy sits under it */
@media (max-width:860px) and (orientation:portrait){
  .sw-root .sw-scene__video,.sw-root .sw-scene__still{object-fit:cover;object-position:center 45%;}
  .sw-root .sw-scene{background:var(--bg)}
  .sw-root .sw-copylayer::before{height:70%}
  .sw-root .sw-copy{bottom:calc(clamp(40px,8dvh,80px) + env(safe-area-inset-bottom))}
  .sw-root .sw-copy__title{font-size:clamp(1.8rem,7vw,2.5rem)}
}