@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/instrument-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:light;
  --bg:#FFFFFF; --bg2:#F6F5F2; --bg3:#ECEBE6; --line:#E3E1DB; --line2:#D2D0C9;
  --ink:#171613; --ink2:#403E38; --mute:#6B6860;
  --gold:#F59E0B; --gold-ink:#9A6407; --gold-line:#BE7D0A; --gold-soft:rgba(245,158,11,.14);
  --err:#B42318; --err-soft:rgba(180,35,24,.08);
  --shadow:0 1px 2px rgba(23,22,19,.06),0 12px 32px -12px rgba(23,22,19,.18);
  --shadow-lg:0 2px 4px rgba(23,22,19,.06),0 28px 60px -24px rgba(23,22,19,.32);
  --nav-h:64px; --r:24px; --r-sm:16px;
  --gut:clamp(20px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E0E0D; --bg2:#171716; --bg3:#222220; --line:#2B2B28; --line2:#3A3A36;
    --ink:#F3F2EE; --ink2:#D3D1CA; --mute:#A3A199;
    --gold-ink:#F5A623; --gold-line:#F59E0B; --gold-soft:rgba(245,158,11,.16);
    --err:#F97066; --err-soft:rgba(249,112,102,.12);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.7);
    --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 28px 60px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E0E0D; --bg2:#171716; --bg3:#222220; --line:#2B2B28; --line2:#3A3A36;
  --ink:#F3F2EE; --ink2:#D3D1CA; --mute:#A3A199;
  --gold-ink:#F5A623; --gold-line:#F59E0B; --gold-soft:rgba(245,158,11,.16);
  --err:#F97066; --err-soft:rgba(249,112,102,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -16px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4),0 28px 60px -24px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding-top:var(--nav-h);background:var(--bg);color:var(--ink);
  font:400 17px/1.55 "Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
h1,h2,h3{font-family:"Bricolage Grotesque","Instrument Sans",ui-sans-serif,system-ui,sans-serif;font-weight:600;letter-spacing:-.022em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,7vw,80px);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(30px,4.4vw,52px)}
h3{font-size:clamp(20px,2vw,24px);letter-spacing:-.012em;line-height:1.2}
p{margin:0}
a{color:var(--gold-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{display:block;max-width:100%}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;font-weight:600}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
.wrap.narrow{max-width:800px}
.sec{padding-block:clamp(80px,10vw,144px);border-top:1px solid var(--line)}
.sec.tight{padding-block:clamp(64px,8vw,104px)}
.phead+.sec.tight{border-top:0}
.alt{background:var(--bg2)}
.center{text-align:center}
.eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink2);text-wrap:pretty}
.mute{color:var(--mute)}
.head{max-width:40rem;margin:0 auto clamp(44px,6vw,80px);text-align:center}
.head .lead{margin-top:16px}
.cap{margin-top:16px;text-align:center;color:var(--mute);font-size:14px}
.more{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line2);color:var(--ink);font-weight:600;transition:background .2s,border-color .2s,transform .2s}
.btn:hover{text-decoration:none;background:var(--bg2);border-color:var(--ink2)}
.btn svg{width:16px;height:16px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.pro{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--gold);color:#171613;font-size:12px;font-weight:700;letter-spacing:.02em}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--line)}
.nav>.wrap{display:flex;align-items:center;gap:16px;height:var(--nav-h)}
.mark{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.mark:hover{text-decoration:none}
.mark i{width:10px;height:10px;border-radius:50%;background:var(--gold);display:inline-block;transform:translateY(1px)}
.links{display:flex;align-items:center;gap:4px;margin-left:auto}
.links>a{color:var(--ink2);font-weight:500;font-size:15px;padding:0 12px;height:40px;display:inline-flex;align-items:center;background:none}
.links>a:hover{color:var(--ink);text-decoration:none;background:none}
.links a[aria-current="page"]{color:var(--ink);font-weight:600;background:none}
.tools{display:flex;align-items:center;gap:8px}
.tgl{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);transition:background .2s,transform .2s}
.tgl:hover{background:var(--bg2);color:var(--ink)}
.tgl:active{transform:scale(.92)}
.tgl .moon{display:none}
:root[data-theme="dark"] .tgl .sun{display:none}
:root[data-theme="dark"] .tgl .moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tgl .sun{display:none}
  :root:not([data-theme="light"]) .tgl .moon{display:block}
}
.getapp{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px 0 13px;border-radius:999px;background:transparent;border:1px solid var(--line2);color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap;transition:border-color .18s,transform .18s}
.getapp:hover{border-color:var(--ink)}
a.getapp{text-decoration:none}
.getapp:active{transform:scale(.97)}
.soon{position:absolute;top:calc(100% + 12px);right:0;width:min(300px,calc(100vw - 2 * var(--gut)));padding:18px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow-lg);text-align:left;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.soon.open{opacity:1;visibility:visible;transform:none}
.soon b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:19px;letter-spacing:-.01em}
.soon p{margin-top:6px;color:var(--ink2);font-size:15px;line-height:1.45}
.soon .tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.tools-r{position:relative}
.burger{display:none;width:44px;height:44px;border-radius:50%;place-items:center;color:var(--ink2)}
.burger:hover{background:var(--bg2)}
.menu{display:none}
@media (max-width:899px){
  .links{display:none}
  .burger{display:grid}
  .tools{margin-left:auto;gap:4px}
  .getapp{padding:0 14px 0 12px;font-size:14px;margin-left:4px}
  .menu.open{display:block;background:var(--bg);border-top:1px solid var(--line);max-height:calc(100svh - var(--nav-h));overflow:auto}
  .menu a{display:flex;align-items:center;min-height:52px;padding-inline:var(--gut);font-weight:500;color:var(--ink);border-bottom:1px solid var(--line)}
  .menu a.sub{padding-left:calc(var(--gut) + 16px);color:var(--ink2);font-size:15px;min-height:46px}
  .menu a:hover{background:var(--bg2);text-decoration:none}
  .menu a[aria-current="page"]{color:var(--gold-ink);font-weight:600}
}
@media (max-width:359px){.mark{font-size:19px}}

/* reveal */
.js .rv{opacity:1;transform:translateY(14px);transition:transform .5s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.js .rv.in{opacity:1;transform:none}

/* hero (home) */
.hero{padding:clamp(56px,8vw,112px) 0 clamp(40px,5vw,72px);text-align:center}
.hero .copy{max-width:52rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:22px}
.hero h1{max-width:18ch}
.hero .lead{max-width:34em}
.hero .vis{width:100%;max-width:320px;margin:48px auto 0}
.in1{animation:rise .8s var(--ease) .1s both}.in2{animation:rise .8s var(--ease) .2s both}.in3{animation:rise .8s var(--ease) .3s both}
@keyframes rise{from{opacity:1;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.04)}to{transform:none}}
.badge{display:inline-flex;align-items:center;gap:9px;background:#111;color:#fff;border:1px solid #A6A6A6;border-radius:11px;padding:8px 16px 8px 12px;min-height:52px;line-height:1.05;text-align:left;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s ease,box-shadow .18s ease;user-select:none;cursor:default}
.badge svg{width:24px;height:24px;fill:#fff;flex:none}
a.badge{cursor:pointer;text-decoration:none}
a.badge:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.badge span{display:flex;flex-direction:column}
.badge small{display:block;font-size:10px;font-weight:500;letter-spacing:.02em;opacity:.85}
.badge b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em}
.badge:hover{transform:translateY(-2px);box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
.cta{display:flex;flex-direction:column;align-items:center;gap:12px}
.cta .micro{font-size:14px;color:var(--mute);text-align:center;max-width:32em;line-height:1.45}
.cta .micro strong{color:var(--ink2);font-weight:500}
@media (max-width:519px){.cta .badge{min-height:56px}}
.final{padding-block:clamp(88px,12vw,160px);text-align:center;border-top:1px solid var(--line)}
.final h2{font-size:clamp(36px,6vw,68px);letter-spacing:-.03em;font-weight:700}
.final .lead{margin-top:18px;margin-inline:auto}
.final .cta{margin-top:32px}
.head .cta{margin-top:24px}
@media (max-width:1023px){
  .hero .vis{max-width:260px}
}

/* page header (inner pages) */
.phead{padding-block:clamp(56px,8vw,104px) clamp(36px,5vw,64px);text-align:center}
.phead .wrap>*{max-width:44rem;margin-inline:auto}
.phead .lead{margin-top:20px}
.phead h1{font-size:clamp(40px,6.4vw,72px)}

/* problem cards */
.problem{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.problem .card{margin:0;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden}
.alt .problem .card{background:var(--bg)}
.problem .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg3);border-bottom:1px solid var(--line)}
.problem .ph img{width:100%;height:100%;object-fit:cover}
.problem figcaption{padding:20px}
.problem figcaption b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.problem figcaption span{display:block;margin-top:6px;color:var(--ink2);font-size:15px;line-height:1.45}
.mess-ph{background:var(--bg3)}
.mess{position:absolute;inset:0}
.mess span{position:absolute;left:29%;top:18%;width:42%;aspect-ratio:3/4;border-radius:12px;border:3px solid #fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);background-repeat:no-repeat;transform:rotate(var(--r));transition:transform .9s var(--ease) .2s}
.mess span:nth-child(1){animation:mess1 6s var(--ease) infinite}
.mess span:nth-child(3){animation:mess3 6s var(--ease) infinite}
.mess span:nth-child(2){animation:mess2 6s var(--ease) infinite}
@keyframes mess1{0%,8%,100%{transform:rotate(-8deg)}25%,70%{transform:translate(-52%,-4%) rotate(-11deg)}}
@keyframes mess2{0%,8%,100%{transform:rotate(5deg)}25%,70%{transform:translate(0,-2%) rotate(2deg)}}
@keyframes mess3{0%,8%,100%{transform:rotate(-2deg)}25%,70%{transform:translate(52%,6%) rotate(9deg)}}
@media (max-width:719px){.problem{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:20px}.problem .ph{aspect-ratio:16/11}.problem .mess span{top:10%;width:30%;left:35%}}

/* phone frame */
.phone{position:relative;width:100%;aspect-ratio:9/19;border-radius:44px;padding:10px;background:#141413;box-shadow:var(--shadow-lg),inset 0 0 0 1.5px #3a3a36}
.phone .scr{position:relative;width:100%;height:100%;border-radius:35px;overflow:hidden;background:#0E0E0D;isolation:isolate}
.phone .island{position:absolute;top:12px;left:50%;width:30%;height:22px;border-radius:999px;background:#000;transform:translateX(-50%);z-index:5}

/* camera scene */
.cam{position:absolute;inset:0}
.cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam .live{transform:translate(var(--lx,0),var(--ly,0)) scale(var(--ls,1)) rotate(var(--lr,0));transform-origin:50% 60%}
.cam .pill{position:absolute;left:50%;bottom:calc(4.5% + 80px);transform:translateX(-50%);min-height:30px;max-width:calc(100% - 24px);padding:6px 13px;border-radius:999px;background:rgba(14,14,13,.7);color:#fff;font-size:13px;line-height:1.25;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-top:14px}
.cam .pill i{position:relative;flex:none;width:14px;height:14px;border-radius:50%;background:#A3A199;transition:background .3s}
.cam .pill i::after{content:"";position:absolute;left:5px;top:2.5px;width:3px;height:6.5px;border:solid #171613;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .2s}
.cam.ok .pill i::after{opacity:1}
.cam .pill .w{display:grid}
.cam .pill em{grid-area:1/1;font-style:normal;opacity:0;transition:opacity .2s}
.cam .pill em:last-child,.cam[data-w="0"] .pill em:nth-child(1),.cam[data-w="1"] .pill em:nth-child(2){opacity:1}
.cam[data-w="0"] .pill em:last-child,.cam[data-w="1"] .pill em:last-child{opacity:0}
.close .cam .pill{bottom:7%;margin-top:0;white-space:normal;text-align:left;width:max-content;max-width:84%;line-height:1.3;padding:8px 14px}
.cam.ok .pill i{background:var(--gold)}
.cam .shut{position:absolute;left:50%;bottom:4.5%;width:64px;height:64px;border-radius:50%;border:4px solid #fff;transform:translateX(-50%);display:grid;place-items:center}
.cam .shut::after{content:"";width:50px;height:50px;border-radius:50%;background:#fff;transform:scale(var(--sh,1));transition:transform .12s}
.cam .pill svg.spk{width:12px;height:12px;flex:none;fill:#fff;margin-right:2px}
.cam .flash{position:absolute;inset:0;background:#fff;opacity:var(--fl,0);pointer-events:none}
.cam .landed{position:absolute;left:7%;bottom:4.5%;width:46px;height:60px;border-radius:9px;overflow:hidden;border:2px solid #fff;opacity:var(--ld,0);transform:scale(calc(.6 + var(--ld,0) * .4));transform-origin:0 100%}
.cam .landed img{position:static;width:100%;height:100%;object-fit:cover}

/* two-column static sections (how it works, timeline) */
.twocol{display:grid;grid-template-columns:1fr minmax(240px,320px);gap:clamp(40px,7vw,112px);align-items:center}
.twocol.wv{grid-template-columns:1fr minmax(300px,420px)}
.twocol .txt>.lead{margin-top:16px;max-width:30rem}
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:4px}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:12px 0;color:var(--mute);transition:color .3s}
.rm .steps li{color:var(--ink)}
.rm .steps li b{background:var(--gold);border-color:var(--gold);color:#171613}
.steps li b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line2);font-size:14px;font-weight:600;transition:background .3s,border-color .3s,color .3s}
.steps li span{padding-top:3px;font-size:18px;line-height:1.4}
.steps li.on{color:var(--ink)}
.steps li.on b{background:var(--gold);border-color:var(--gold);color:#171613}
.twocol .vis{width:100%;max-width:320px;justify-self:center}
.twocol .vis.av{max-width:420px}
.twocol.flip{grid-template-columns:minmax(240px,320px) 1fr}
@media (max-width:819px){
  .twocol,.twocol.flip,.twocol.wv{grid-template-columns:1fr;gap:40px;justify-items:center;text-align:center}
  .twocol .txt{order:-1}
  .twocol .vis{max-width:280px}
  .twocol .vis.av{max-width:350px}
  .twocol .txt>.lead{margin-inline:auto}
  .twocol .steps{text-align:left}
}

/* timeline tile */
.tlm{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px;background:#0E0E0D}
.tlm .big{position:relative;flex:1 1 auto;min-height:0;border-radius:14px;overflow:hidden;background:#222}
.blend img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blend .b{opacity:var(--k,0)}
.tlm .big img{object-position:50% 22%}
.tlm .wk{flex:none;color:#A3A199;font-size:11px;font-weight:600;margin-top:10px;letter-spacing:.06em;text-transform:uppercase}
.tlm .row{flex:none;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:6px}
.tlm .row span{position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#222}
.tlm .row span.last::after{content:"";position:absolute;inset:0;border:2px solid var(--gold);border-radius:6px}
.tlm .row img{object-position:50% 20%}

/* wipe */
.wipe{position:relative;width:100%;max-width:880px;margin-inline:auto;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg3);touch-action:pan-y;--x:50%;user-select:none}
.wipe.tall{max-width:520px;aspect-ratio:2/3}
.wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.wipe .b{clip-path:inset(0 0 0 var(--x))}
.wipe .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--gold);transform:translateX(-1px);pointer-events:none}
.wipe .knob{position:absolute;top:50%;left:var(--x);width:52px;height:52px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3);pointer-events:none;transition:transform .15s}
.wipe.drag .knob{transform:translate(-50%,-50%) scale(1.08)}
.wipe .knob svg{width:24px;height:24px;stroke:#171613;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wipe input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.wipe .tag{position:absolute;top:16px;height:30px;padding:0 12px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(14,14,13,.66);color:#fff;font-size:13px;font-weight:600;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wipe .tag.l{left:16px}.wipe .tag.r{right:16px}
.wipe .al{position:absolute;left:50%;top:58px;transform:translateX(-50%);z-index:3;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(14,14,13,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wipe .al button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#fff;font:600 13px/1 "Instrument Sans",sans-serif;cursor:pointer}
.wipe .al button[aria-pressed="true"]{background:var(--gold);color:#171613}
.wipe .al button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.wipe img:not(.b){transition:transform .45s var(--ease)}
.wipe.raw img:not(.b){transform:translate(-6%,4%) scale(1.13) rotate(-1.5deg)}
.wipe.nudge{animation:nudge 4.8s var(--ease) infinite}
@keyframes nudge{0%,22%,100%{--x:50%}42%{--x:30%}68%{--x:70%}86%{--x:50%}}
@property --x{syntax:"<percentage>";inherits:true;initial-value:50%}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px);max-width:560px;margin-inline:auto}
.pair figure{margin:0;position:relative;aspect-ratio:2/3;border-radius:var(--r-sm);overflow:hidden;background:var(--bg3)}
.pair img{width:100%;height:100%;object-fit:cover}
.pair .tag{position:absolute;top:12px;left:12px;height:28px;padding:0 11px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(14,14,13,.66);color:#fff;font-size:12px;font-weight:600}

/* split rows */
.duo{display:grid;grid-template-columns:minmax(0,506px) minmax(0,300px);justify-content:center;align-items:center;gap:clamp(32px,5vw,64px)}
.duo .shot{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--bg3)}
.duo .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (max-width:819px){.duo{grid-template-columns:1fr;justify-items:center}.duo .shot{width:100%;max-width:420px}.duo .loop{max-width:260px!important}}
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);max-width:1000px;margin-inline:auto;align-items:start}
.cmp2 .pair{max-width:none;aspect-ratio:4/3;grid-template-rows:100%}
.cmp2 .pair figure{aspect-ratio:auto;height:100%}
.cmp2 .wipe{aspect-ratio:4/3;max-width:none}
.cmp2 .wipe img{object-position:50% 25%}
@media (max-width:719px){.cmp2{grid-template-columns:1fr;max-width:480px}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,104px);align-items:center}
.split .txt{max-width:30rem}
.split .txt .lead{margin-top:16px}
.split.flip .txt{order:2}
.split .vis{display:flex;justify-content:center}
.split .vis .phone{max-width:300px}
.step-n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#171613;font-weight:700;margin-bottom:18px}
@media (max-width:819px){
  .split{grid-template-columns:1fr;gap:36px;text-align:center}
  .split .txt{max-width:34rem;margin-inline:auto}
  .split.flip .txt{order:0}
  .split .vis .phone{max-width:260px}
}

/* screens wall */
.wall{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(16px,2.4vw,28px);row-gap:44px}
.tile{margin:0}
.scene{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#171716;isolation:isolate;border:1px solid var(--line)}
.tile figcaption{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-weight:600;font-size:17px;text-align:center}
@media (max-width:899px){.wall{grid-template-columns:repeat(2,1fr)}}
@media (max-width:559px){.wall{grid-template-columns:1fr;max-width:420px;margin-inline:auto;row-gap:48px}}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene:not(.play),.scene:not(.play) *,.loop:not(.play) *,.cad:not(.play) *,.cad:not(.play) *::before,.roll:not(.play) *{animation-play-state:paused!important}
/* reminder */
.s-rem{background:linear-gradient(160deg,#2a2a26,#121211)}
.s-rem .clock{position:absolute;top:14%;left:0;right:0;text-align:center;color:#fff}
.s-rem .clock small{display:block;font-size:13px;opacity:.7;font-weight:500}
.s-rem .clock b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(52px,6vw,68px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.s-rem .note{position:absolute;left:7%;right:7%;top:50%;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.88);color:#171613;animation:drop 4s var(--ease) infinite}
.s-rem .note .ic{flex:none;width:36px;height:36px;border-radius:9px;background:#171613;display:grid;place-items:center}
.s-rem .note .ic i{width:10px;height:10px;border-radius:50%;background:var(--gold)}
.s-rem .note b{display:block;font-size:13px}
.s-rem .note span{display:block;font-size:13px;line-height:1.3;color:#403E38}
.s-rem .days{position:absolute;left:7%;right:7%;bottom:9%;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.s-rem .days i{aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);display:grid;place-items:center;color:rgba(255,255,255,.7);font-size:11px;font-style:normal;font-weight:600}
.s-rem .days i.on{background:var(--gold);border-color:var(--gold);color:#171613;animation:pop 4s var(--ease) infinite}
@keyframes drop{0%{opacity:0;transform:translateY(-30px) scale(.96)}18%,85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes pop{0%,10%{transform:scale(.6);opacity:.3}18%,85%{transform:none;opacity:1}100%{transform:scale(.6);opacity:.3}}
/* share card */
.s-share{background:#ECEBE6;display:grid;place-items:center}
.s-share .card{position:relative;width:78%;padding:10px 10px 0;border-radius:18px;background:#fff;box-shadow:0 20px 40px -18px rgba(0,0,0,.45);animation:lift 4.8s var(--ease) infinite}
.s-share .two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.s-share .two span{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden}
.s-share .ft{display:flex;align-items:center;justify-content:space-between;height:40px;color:#171613;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:15px}
.s-share .ft i{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block;margin-right:6px}
.s-share .ft svg{width:18px;height:18px;stroke:#171613;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes inL{0%,3%{opacity:0;transform:translateX(-24px)}12%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateX(-24px)}}
@keyframes inR{0%,7%{opacity:0;transform:translateX(24px)}16%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateX(24px)}}
@keyframes lift{0%,40%{transform:none}55%,80%{transform:translateY(-8px) rotate(-1.5deg)}95%,100%{transform:none}}
/* journeys */
.s-jrn{aspect-ratio:2/3}
.s-jrn img{object-fit:contain;object-position:center}
.s-jrn .seg{position:absolute;left:50%;top:16px;transform:translateX(-50%);display:grid;gap:0;padding:4px 30px 4px 4px;border-radius:999px;background:rgba(14,14,13,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2}
.s-jrn .seg span{height:30px;padding:0 14px;display:grid;place-items:center;border-radius:999px;color:#fff;font-size:13px;font-weight:600}
.s-jrn .seg span:nth-child(1){animation:seg1 7.5s steps(1) infinite}
.s-jrn .seg span:nth-child(2){animation:seg2 7.5s steps(1) infinite}
.s-jrn .seg span:nth-child(3){animation:seg3 7.5s steps(1) infinite}
.s-jrn img:nth-of-type(1){animation:ph1 7.5s linear infinite}
.s-jrn img:nth-of-type(2){animation:ph2 7.5s linear infinite}
.s-jrn img:nth-of-type(3){animation:ph3 7.5s linear infinite}
.s-jrn .seg span{grid-area:1/1;justify-self:start}
.s-jrn .seg span:nth-child(n+2){opacity:0}
.s-jrn img:nth-of-type(n+2){opacity:0}
.s-jrn .seg::after{content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg)}
.s-jrn.two-seg .seg span:nth-child(1){animation-name:sgb1}
.s-jrn.two-seg .seg span:nth-child(2){animation-name:sgb2}
.s-jrn.two-seg img:nth-of-type(1){animation-name:phb1}
.s-jrn.two-seg img:nth-of-type(2){animation-name:phb2}
@keyframes sgb1{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
@keyframes sgb2{0%{opacity:0}50%,100%{opacity:1}}
@keyframes phb1{0%,45%{opacity:1}55%,92%{opacity:0}100%{opacity:1}}
@keyframes phb2{0%,45%{opacity:0}55%,92%{opacity:1}100%{opacity:0}}
@keyframes seg1{0%{opacity:1}33.33%,100%{opacity:0}}
@keyframes seg2{0%{opacity:0}33.33%{opacity:1}66.66%,100%{opacity:0}}
@keyframes seg3{0%{opacity:0}66.66%,100%{opacity:1}}
@keyframes ph1{0%,30%{opacity:1}36%,94%{opacity:0}100%{opacity:1}}
@keyframes ph2{0%,30%{opacity:0}36%,63%{opacity:1}69%,100%{opacity:0}}
@keyframes ph3{0%,63%{opacity:0}69%,94%{opacity:1}100%{opacity:0}}
/* hidden album */
.s-lock{background:#121211}
.s-lock .g{position:absolute;inset:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-content:start;animation:blur 7.5s var(--ease) infinite}
.s-lock .g span{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden}
.s-lock .lk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:10px;color:#fff;font-weight:600;font-size:15px;animation:lk 7.5s var(--ease) infinite}
.s-lock .lk span{width:68px;height:68px;border-radius:20px;background:rgba(255,255,255,.14);display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.s-lock .lk svg{width:34px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes blur{0%,8%{filter:none}25%,58%{filter:blur(14px) brightness(.5)}75%,100%{filter:none}}
.s-lock .g span img{animation:kb 6s ease-in-out infinite alternate}
@keyframes lk{0%,12%{opacity:0;transform:translate(-50%,-40%) scale(.9)}26%,50%{opacity:1;transform:translate(-50%,-50%)}57%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}68%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
.scene .tag{position:absolute;top:14px;height:28px;padding:0 11px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(14,14,13,.66);color:#fff;font-size:12px;font-weight:600;z-index:2}
.scene .tag.l{left:14px}.scene .tag.r{right:14px}
/* video with days */
.vid{position:absolute;inset:0;--k:0;--w:0%;background:#0E0E0D}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .l{opacity:var(--k);transition:opacity .38s linear}
.vid .day{position:absolute;left:16px;top:46px;height:28px;padding:0 11px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(14,14,13,.66);color:#fff;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;z-index:2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vid .pro{position:absolute;right:16px;top:49px;z-index:2}
.vid .bar{position:absolute;left:22px;right:22px;bottom:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;z-index:2}
.vid .bar i{display:block;height:100%;width:var(--w);background:var(--gold);transition:width .38s linear}
.rm .vid{--k:1;--w:100%}

/* align loop (how it works) */
.loop .cam .live{animation:align 3.6s var(--ease) infinite}
.loop .cam .pill i{animation:okd 3.6s steps(1) infinite}
.loop .cam .pill i::after{animation:okk 3.6s steps(1) infinite}
.loop .cam .pill em{animation:coach3 3.6s steps(1) infinite}
.loop .cam .pill em:nth-child(1){animation-name:coach1}
.loop .cam .pill em:nth-child(2){animation-name:coach2}
@keyframes okk{0%{opacity:0}50%,100%{opacity:1}}
@keyframes coach1{0%{opacity:1}24%,100%{opacity:0}}
@keyframes coach2{0%{opacity:0}24%{opacity:1}48%,100%{opacity:0}}
@keyframes coach3{0%{opacity:0}48%,100%{opacity:1}}
.loop .cam .flash{animation:flash 3.6s linear infinite}
@keyframes align{0%,8%{transform:translate(14%,3%) scale(1.14) rotate(2deg)}48%,100%{transform:none}}
@keyframes okd{0%{background:#A3A199}50%,100%{background:var(--gold)}}
@keyframes flash{0%,62%{opacity:0}64%{opacity:.85}72%,100%{opacity:0}}
.loop .cam .shut::after{animation:lshut 3.6s linear infinite}
@keyframes lshut{0%,58%{transform:scale(1)}61%,64%{transform:scale(.86)}68%,100%{transform:scale(1)}}

/* align block: Day 1 card beside the camera */
.align{position:relative;display:flex;align-items:center;justify-content:center;width:100%}
.align .day1{flex:none;width:120px;margin:0 -24px 0 0;z-index:2;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);box-shadow:var(--shadow)}
.align .day1 img{width:100%;height:auto;aspect-ratio:2/3;background:var(--bg3);object-fit:cover;object-position:50% 20%}
.align .day1 figcaption{padding:6px 0 7px;text-align:center;font-size:12px;font-weight:600;color:var(--ink)}
.align .phone{flex:0 1 300px;max-width:300px;width:auto}
.align:not(.play) *{animation-play-state:paused!important}
.align .cam .live{transform-origin:50% 50%;animation:alignLive 6s var(--ease) infinite}
.align .cam .pill i{animation:okd 6s steps(1) infinite}
.align .cam .pill i::after{animation:okk 6s steps(1) infinite}
.align .cam .pill em{animation:acoach3 6s steps(1) infinite}
.align .cam .pill em:nth-child(1){animation-name:acoach1}
.align .cam .pill em:nth-child(2){animation-name:acoach2}
.align .cam .shut::after{animation:ashut 6s linear infinite}
.align .cam .flash{animation:aflash 6s linear infinite}
.align .cam .landed{animation:aland 6s var(--ease) infinite}
@keyframes alignLive{0%,8%{transform:translate(9%,3%) scale(1.14)}25%,33%{transform:translate(9%,0) scale(1)}50%,100%{transform:none}}
@keyframes acoach1{0%{opacity:1}25%,100%{opacity:0}}
@keyframes acoach2{0%{opacity:0}25%{opacity:1}50%,100%{opacity:0}}
@keyframes acoach3{0%{opacity:0}50%,100%{opacity:1}}
@keyframes ashut{0%,70.8%{transform:scale(1)}72.5%,75%{transform:scale(.86)}77%,100%{transform:scale(1)}}
@keyframes aflash{0%,70.8%{opacity:0}72.5%{opacity:.8}79%,100%{opacity:0}}
@keyframes aland{0%,79%{opacity:0;transform:scale(.6)}94%,100%{opacity:1;transform:none}}
@media (max-width:819px){.align .day1{width:96px}.align .phone{flex-basis:260px;max-width:260px}}

/* cadence */
.cad{width:100%;max-width:420px;padding:20px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow)}
.alt .cad{background:var(--bg)}
.cad .seg{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:999px;background:var(--bg2);position:relative}
.cad .seg span{position:relative;z-index:1;height:38px;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap}
@media (max-width:419px){.cad{padding:16px}}
.cad .seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:999px;background:var(--gold);animation:segm 4s var(--ease) infinite}
@keyframes segm{0%,20%{transform:none}32%,82%{transform:translateX(100%)}94%,100%{transform:none}}
.cad .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:18px}
.cad .cal i{aspect-ratio:1;border-radius:50%;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--mute);font-weight:600}
.cad .cal i.d{animation:dd 4s steps(1) infinite}
.cad .cal i.e{animation:de 4s steps(1) infinite}
.cad .cal i.w{animation:dw 4s steps(1) infinite}
@keyframes dd{0%,20%,94%,100%{background:var(--gold);color:#171613;border-color:var(--gold)}32%,82%{background:var(--bg2);color:var(--mute);border-color:var(--line)}}
@keyframes de{0%,20%,94%,100%{background:var(--bg2);color:var(--mute);border-color:var(--line)}32%,82%{background:var(--gold);color:#171613;border-color:var(--gold)}}
@keyframes dw{0%,100%{background:var(--gold);color:#171613;border-color:var(--gold)}}
.cad .time{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-weight:600}
.cad .time span{color:var(--mute);font-weight:500}

/* import */
.roll{position:relative;width:100%;max-width:520px;aspect-ratio:5/3}
.roll span{position:absolute;top:22%;width:22%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;border:3px solid var(--bg);box-shadow:var(--shadow);animation:tidy 7.5s var(--ease) infinite}
.roll span img{width:100%;height:100%;object-fit:cover}
.roll span:nth-child(1){left:2%;--t:rotate(-9deg) translate(6%,-14%) scale(.9)}
.roll span:nth-child(2){left:27%;--t:rotate(7deg) translate(-12%,12%) scale(1.08)}
.roll span:nth-child(3){left:52%;--t:rotate(-4deg) translate(10%,-6%) scale(.86)}
.roll span:nth-child(4){left:77%;--t:rotate(10deg) translate(-8%,10%) scale(1.04)}
.roll small{position:absolute;bottom:0;left:0;right:0;text-align:center;color:var(--mute);font-size:13px;font-weight:600}
@keyframes tidy{0%,15%{transform:var(--t)}40%,65%{transform:none}90%,100%{transform:var(--t)}}
.scene .roll{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:86%}
.scene .roll small{display:none}

/* who it is for */
.who{display:grid;grid-template-columns:repeat(4,1fr);column-gap:clamp(16px,2vw,24px);row-gap:36px}
.who.three{grid-template-columns:repeat(3,1fr)}
.pcard{display:block;color:var(--ink);border-radius:var(--r)}
.pcard:hover{text-decoration:none}
.pcard .ph{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--bg3);border:1px solid var(--line);box-shadow:none;transition:border-color .3s}
.pcard:hover .ph{border-color:var(--line2)}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard b{display:block;margin-top:12px;font-family:"Bricolage Grotesque",sans-serif;font-size:21px;font-weight:600;letter-spacing:-.01em}
.pcard b svg{display:inline-block;vertical-align:-2px;margin-left:6px;width:16px;height:16px;color:var(--gold-ink);transition:transform .2s}
.pcard:hover b svg{transform:translateX(4px)}
.pcard span{display:block;margin-top:4px;color:var(--mute);font-size:15px;line-height:1.45}
@media (max-width:899px){.who{grid-template-columns:repeat(2,1fr)}.who.three{grid-template-columns:repeat(3,1fr)}}
@media (max-width:599px){.who.three{grid-template-columns:1fr;max-width:420px;margin-inline:auto}.who.three .pcard .ph{aspect-ratio:16/10}}
@media (max-width:419px){.who{column-gap:12px;row-gap:32px}.pcard b{font-size:17px;margin-top:10px}.pcard span{font-size:13px}.pcard b svg{display:none}}

/* use-case hub */
.hub{display:grid;gap:clamp(16px,2.4vw,28px)}
.hcard{position:relative;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;border-radius:var(--r);overflow:hidden;background:var(--bg2);border:1px solid var(--line);color:var(--ink);transition:border-color .3s}
.hcard:hover{text-decoration:none;border-color:var(--line2)}
.hcard .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg3)}
.hcard .ph img{width:100%;height:100%;object-fit:cover}
.hcard .txt{padding:clamp(24px,4vw,48px)}
.hcard h2{font-size:clamp(26px,3.2vw,38px)}
.hcard p{margin-top:12px;color:var(--ink2);font-size:18px}
.hcard .go{display:inline-flex;align-items:center;gap:6px;margin-top:20px;color:var(--gold-ink);font-weight:600}
.hcard .go svg{width:16px;height:16px;transition:transform .2s}
.hcard:hover .go svg{transform:translateX(4px)}
@media (max-width:719px){.hcard{grid-template-columns:1fr}.hcard .txt{padding:24px}}

/* use-case page */
.uhero{padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(64px,8vw,112px)}
.uhero .ph{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--bg3)}
.uhero .ph img{width:100%;height:100%;object-fit:cover;animation:kb 16s ease-in-out infinite alternate}
.uhero .txt{max-width:44rem;margin:0 auto;text-align:center;padding-top:clamp(32px,5vw,56px)}
.uhero .txt .lead{margin-top:18px}
@media (max-width:719px){.uhero .ph{aspect-ratio:4/3}}
.quote{max-width:46rem;margin-inline:auto;text-align:center}
.quote p{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(28px,4vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.quote p::before{content:"\201C";color:var(--gold)}
.quote p::after{content:"\201D";color:var(--gold)}
.quote span{display:block;margin-top:18px;color:var(--mute)}
.close{position:relative;width:100%;max-width:300px}
.face .cam img{object-position:50% 30%}

/* price */
.price{max-width:460px;margin-inline:auto;padding:clamp(28px,4vw,40px);border-radius:var(--r);background:var(--bg);border:1px solid var(--line);box-shadow:none;text-align:center}
.alt .price{background:var(--bg)}
.price .top{display:flex;align-items:center;justify-content:center;gap:10px}
.price .top b{font-family:"Bricolage Grotesque",sans-serif;font-size:22px}
.price .amt{margin-top:18px;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(56px,8vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1}
.price .amt small{font-family:"Instrument Sans",sans-serif;font-size:18px;font-weight:500;letter-spacing:0;color:var(--mute)}
.price .trial{display:inline-flex;align-items:center;margin-top:16px;height:34px;padding:0 14px;border-radius:999px;background:var(--gold-soft);color:var(--gold-ink);font-weight:600;font-size:15px}
.price ul{list-style:none;padding:0;margin:24px 0 0;text-align:left;display:grid;gap:12px;border-top:1px solid var(--line);padding-top:24px}
.price li{display:flex;gap:12px;align-items:flex-start;line-height:1.4}
.price li svg{flex:none;width:22px;height:22px;stroke:var(--gold-ink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.price .fine{margin-top:20px;color:var(--mute);font-size:14px;line-height:1.5}
.free4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,24px);max-width:880px;margin-inline:auto}
.free4 div{display:grid;justify-items:center;gap:14px;text-align:center;font-weight:600}
.free4 span{width:84px;height:84px;border-radius:24px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow)}
.free4 svg{width:38px;height:38px;stroke:var(--gold-ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.js .free4 .rv{transform:translateY(14px) scale(.9)}
.js .free4 .rv.in{transform:none}
@media (max-width:599px){.free4{grid-template-columns:repeat(2,1fr);row-gap:28px}}

/* faq */
.faq{max-width:760px;margin-inline:auto}
.faq h3{margin:40px 0 8px;font-size:15px;font-family:"Instrument Sans",sans-serif;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.faq h3:first-child{margin-top:0}
.q{border-bottom:1px solid var(--line)}
.q:first-of-type,.faq h3+.q{border-top:1px solid var(--line)}
.q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;text-align:left;font-weight:600;font-size:18px;color:var(--ink)}
.q button svg{flex:none;width:22px;height:22px;stroke:var(--ink2);fill:none;stroke-width:2;stroke-linecap:round;transition:transform .25s var(--ease)}
.q[data-open="true"] button svg{transform:rotate(45deg)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.q[data-open="true"] .a{grid-template-rows:1fr}
.q .a>div{overflow:hidden}
.q .a p{padding:0 40px 20px 0;color:var(--ink2);line-height:1.6}

/* privacy header */
.priv3{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(16px,2.4vw,28px);row-gap:40px}
.priv3 figure{margin:0}
.priv3 .scene{aspect-ratio:4/3}
.priv3 figcaption{margin-top:10px;text-align:center;font-weight:600}
.s-stay{background:linear-gradient(160deg,#2a2a26,#121211);display:grid;place-items:center}
.s-stay .ph{position:relative;width:30%;aspect-ratio:9/19;border-radius:18px;border:3px solid #3a3a36;overflow:hidden;background:#000}
.s-stay .cloud{position:absolute;top:16%;right:16%;width:22%;color:rgba(255,255,255,.35)}
.s-stay .cloud svg{width:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.s-stay .x{position:absolute;top:20%;right:20%;width:14%;aspect-ratio:1;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.s-stay .x svg{width:60%;stroke:#171613;stroke-width:3;stroke-linecap:round}
.s-stay .dot{display:none}
@keyframes fly{0%{transform:none;opacity:1}45%{transform:translate(40px,-60px);opacity:1}55%,100%{transform:translate(20px,-30px);opacity:0}}
.s-face{background:linear-gradient(160deg,#2a2a26,#121211);display:grid;place-items:center}
.s-face .fid{width:30%;aspect-ratio:1;display:grid;place-items:center}
.s-face svg{width:100%;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.s-face .scan{stroke-dasharray:240;animation:scan 3.6s var(--ease) infinite}
@keyframes scan{0%{stroke-dashoffset:240}35%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
@media (max-width:719px){.priv3{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* legal body */
.legal{padding-block:0 clamp(72px,9vw,112px)}
.legal h1{font-size:clamp(34px,6vw,48px)}
.legal h2{font-size:22px;margin-top:40px}
.legal p,.legal ul,.legal ol{margin:14px 0 0;line-height:1.6}
.legal li+li{margin-top:6px}
.legal .meta{color:var(--mute);font-size:15px;margin-top:10px}
.legal .lead{font-size:19px;margin-top:18px}
.legal .card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;margin-top:24px}
.legal .card p:first-child{margin-top:0}
.legal .mail{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none;margin-top:16px}
.legal details{border-top:1px solid var(--line);padding:4px 0}
.legal details:last-of-type{border-bottom:1px solid var(--line)}
.legal summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600}
.legal details p{margin:0 0 14px;color:var(--ink2)}
.legal.first{padding-top:clamp(48px,6vw,72px)}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:32px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.foot .fl{color:var(--mute);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin-left:auto}
.foot nav a{color:var(--ink2);font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.foot .copy{width:100%;color:var(--mute);font-size:13px}
@media (max-width:599px){.foot .wrap{flex-direction:column;align-items:center;text-align:center}.foot nav{margin-left:0;justify-content:center}}

/* home hero: the drag-to-compare slider is the first fold */
.hw{padding:clamp(24px,4vw,56px) 0 clamp(40px,5vw,72px);text-align:left}
.hw .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,6vw,96px);align-items:center}
.hw .wrap>*{min-width:0}
.hw .lead{width:min(100%,34em);overflow-wrap:anywhere}
.hw .copy{align-items:flex-start;margin:0;max-width:36rem}
.hw .cta{align-items:flex-start}
.hw-vis{width:100%}
.hw-vis .cap{margin-top:10px;font-size:13px}
.wipe.hero-w{aspect-ratio:2/3;max-width:440px;max-height:calc(100svh - var(--nav-h) - 72px);margin-inline:auto;box-shadow:var(--shadow-lg)}
.wipe.hero-w img{object-position:50% 22%}
@media (max-width:899px){
  .hw{padding-top:16px;text-align:center}
  .hw .wrap{grid-template-columns:1fr;gap:14px}
  .hw .copy{display:flex;flex-direction:column;align-items:center;gap:16px;order:1}
  .hw h1{margin-inline:auto;font-size:clamp(34px,9vw,52px)}
  .hw .lead{margin-inline:auto;font-size:17px}
  .hw-vis{order:2}
  .hw .cta{align-items:center}
  .wipe.hero-w{aspect-ratio:auto;height:min(50svh,520px)}
}
.wipe{cursor:ew-resize}
.wipe input{pointer-events:none}
.wipe .hint{position:absolute;left:var(--x);top:calc(50% + 38px);transform:translateX(-50%);height:24px;padding:0 10px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(14,14,13,.7);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;pointer-events:none;transition:opacity .3s}
.wipe:not(.nudge) .hint{opacity:0}
.wipe.nudge .knob{animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{box-shadow:0 4px 14px rgba(0,0,0,.3),0 0 0 0 rgba(245,158,11,.65)}100%{box-shadow:0 4px 14px rgba(0,0,0,.3),0 0 0 20px rgba(245,158,11,0)}}

.getbig{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 28px 0 22px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:600 18px/1 "Instrument Sans",sans-serif;cursor:pointer;animation:glow 3.2s ease-in-out infinite}
.getbig:hover{transform:translateY(-1px)}
.getbig:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}50%{box-shadow:0 0 0 9px rgba(245,158,11,.24)}}

/* looping motion on photos */
.kb{animation:kb 14s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.pcard .ph img,.hcard .ph img{animation:kb 18s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * -4s)}
.problem .ph .kg{position:absolute;left:50%;top:16px;transform:translateX(-50%);display:grid;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:rgba(14,14,13,.74);color:#fff;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kg em{grid-area:1/1;font-style:normal;opacity:0;animation:kg 6s steps(1) infinite}
.kg em:nth-child(2){animation-delay:-4.5s}.kg em:nth-child(3){animation-delay:-3s}.kg em:nth-child(4){animation-delay:-1.5s}
@keyframes kg{0%{opacity:1}25%,100%{opacity:0}}

.pxf{position:absolute;inset:0;display:block}
.pxf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.pcard .ph .pxf img{animation:none}
.pxf .b,.pcard .ph .pxf .b,.tlm-loop .big .b{animation:xf 6s ease-in-out infinite}
@keyframes xf{0%,18%{opacity:0}42%,74%{opacity:1}98%,100%{opacity:0}}
.pw{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;background:var(--bg3)}
.pw>img{min-width:0}
.uhero .ph .pw img,.hcard .ph .pw img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hcard .ph .pw img:last-child,.uhero .ph .pw img:last-child{animation-delay:-8s}

.s-wipe{aspect-ratio:2/3;--x:80%;animation:swipe 6s var(--ease) infinite}
.s-wipe img{object-fit:contain;object-position:center}
.s-wipe .b{clip-path:inset(0 0 0 var(--x))}
.s-wipe .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--gold);transform:translateX(-1px);z-index:2}
@keyframes swipe{0%,100%{--x:82%}45%,55%{--x:18%}}

.tlm-loop .row span::after{content:"";position:absolute;inset:0;border:2px solid var(--gold);border-radius:6px;opacity:0;animation:hl 6s steps(1) infinite;animation-delay:calc(var(--n,0) * .5s - 6s)}
@keyframes hl{0%{opacity:1}8.33%,100%{opacity:0}}

.vid .play{position:absolute;right:18px;bottom:48px;width:42px;height:42px;border-radius:50%;background:rgba(14,14,13,.6);display:grid;place-items:center;z-index:2}
.vid .play svg{width:16px;height:16px;fill:#fff}
.vid.reset .l,.vid.reset .bar i{transition:none}

.price .trial{animation:glow 3.2s ease-in-out infinite}
.fin-pair{position:relative;width:88px;aspect-ratio:2/3;margin:0 auto 24px;border-radius:14px;overflow:hidden;border:3px solid var(--bg);box-shadow:var(--shadow)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .wipe .hint{display:none}
  .s-wipe{--x:50%}
  .pxf .b,.tlm-loop .big .b{opacity:1}
  .tlm-loop .row span::after{display:none}
  .s-lock .lk{transform:translate(-50%,-50%)}
  .js .rv{opacity:1;transform:none}
  .loop .cam .live{transform:none}
  .s-share .two span,.s-rem .note{opacity:1;transform:none}
  .s-jrn img:nth-of-type(n),.s-jrn .seg span:nth-child(n){opacity:0}
  .s-jrn img:nth-of-type(3),.s-jrn .seg span:nth-child(3){opacity:1}
  .loop .cam .pill i{background:var(--gold)}
  .loop .cam .pill i::after{opacity:1}
  .s-jrn.two-seg img:nth-of-type(2),.s-jrn.two-seg .seg span:nth-child(2){opacity:1}
  .align .cam .live{transform:none}
  .align .cam .pill i{background:var(--gold)}
  .align .cam .pill i::after{opacity:1}
  .align .cam .landed{opacity:1;transform:none}
  .s-lock .lk{opacity:1}
  .s-lock .g{filter:blur(14px) brightness(.5)}
  .cad .cal i.d,.cad .cal i.e,.cad .cal i.w{background:var(--bg2)}
  .cad .seg::before{transform:translateX(100%)}
  .cad .cal i.e,.cad .cal i.w{background:var(--gold);color:#171613;border-color:var(--gold)}
  .s-stay .dot{display:none}
}

/* Round four: real dated photos, clear journeys and keyboard-visible compare. */
.wipe:has(input:focus-visible){outline:4px solid #171613;outline-offset:4px;box-shadow:0 0 0 8px #fff,0 0 0 12px #F59E0B}
.wipe:has(input:focus-visible) .knob{box-shadow:0 0 0 4px #fff,0 0 0 8px #171613,0 0 0 11px #F59E0B}
.wipe input:focus-visible{outline:none}
.wipe.hero-w img{object-fit:contain;object-position:center}
.wipe .tag{top:auto;bottom:16px;z-index:2}
.wipe .al{top:16px}
.problem.five{grid-template-columns:repeat(3,minmax(0,1fr))}
.problem.five .ph{aspect-ratio:4/3}
.problem .mirror-photo img{object-position:center}
.problem .ph .pw img{animation:none;object-position:50% 20%}
.photo-label{position:absolute;bottom:12px;left:12px;right:12px;padding:8px 10px;border-radius:9px;background:#171613e8;color:#fff;font-size:13px;text-align:center}
.snap-pair{position:absolute;inset:18px 20px 46px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.snap-pair>span{overflow:hidden;border-radius:9px;border:2px solid var(--line);position:relative;background:var(--bg)}
.snap-pair img{position:absolute;inset:0;object-fit:cover;object-position:50% 18%;animation:snap-first 6s var(--ease) infinite}
.snap-pair>span:last-child img{animation-name:snap-second}
.snap-lines{position:absolute;inset:42% 20px 30%;border-block:2px dashed var(--gold);opacity:0;animation:snap-guide 6s ease infinite;pointer-events:none}
.snap-caption{position:absolute;bottom:12px;inset-inline:0;display:grid;place-items:center;color:var(--ink);font-size:14px;font-weight:600}
.snap-caption em{grid-area:1/1;font-style:normal;animation:snap-before 6s steps(1) infinite}
.snap-caption em:last-child{opacity:0;animation-name:snap-after}
@keyframes snap-first{0%,12%,100%{transform:translate(-6%,5%) rotate(-7deg) scale(1.22)}42%,82%{transform:none}}
@keyframes snap-second{0%,12%,100%{transform:translate(7%,-4%) rotate(8deg) scale(1.08)}42%,82%{transform:none}}
@keyframes snap-guide{0%,24%,100%{opacity:0}42%,82%{opacity:1}}
@keyframes snap-before{0%,100%{opacity:1}42%{opacity:0}}
@keyframes snap-after{0%,100%{opacity:0}42%{opacity:1}}
.lost-stack{position:absolute;inset:14px 20% 45px}
.lost-stack>span{position:absolute;inset:0;border:3px solid var(--bg);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(-12deg) translateX(-15%)}
.lost-stack>span:nth-child(2){transform:rotate(7deg) translateX(12%)}
.lost-stack>span:nth-child(3){transform:rotate(0);animation:lost-photo 5s ease-in-out infinite}
@keyframes lost-photo{50%{transform:translateY(-12px) rotate(-4deg)}}
.tile-note{font-size:14px;color:var(--ink2);line-height:1.5;margin:8px 0 0}
.journey-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden}
.journey-preview>span{position:relative;overflow:hidden}
.journey-preview img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.journey-preview b{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);padding:5px 10px;background:#171613df;color:#fff;border-radius:999px;font-size:12px}
.import-preview{position:relative;aspect-ratio:4/5;background:var(--bg3);border-radius:var(--r);overflow:hidden;padding:28px 24px 52px}
.import-preview img{height:100%;width:100%;object-fit:contain;border-radius:14px}
.import-preview span{position:absolute;bottom:18px;inset-inline:0;display:flex;align-items:center;justify-content:center;gap:14px;font-size:14px;font-weight:600}
.import-preview svg{height:20px;width:20px}
.real-timeline{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;gap:8px;background:#0E0E0D}
.real-timeline>img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:center;border-radius:14px}
.real-timeline>span{color:#fff;font-size:12px}
.real-timeline>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;height:22%}
.real-timeline>div img{height:100%;width:100%;object-fit:cover;border-radius:6px}
.vid .frame{opacity:1;object-fit:contain;object-position:center;background:#eeeae4}
.vid .day{top:auto;bottom:52px;left:18px;height:auto;padding:9px 16px;background:#171613f2;border:1px solid #ffffff55;font:600 clamp(20px,5.5vw,26px)/1.1 "Bricolage Grotesque",sans-serif;box-shadow:0 2px 10px #0003}
.vid .bar i{transition:width .25s linear}
.r4-uhero .ph{max-width:880px;margin-inline:auto;aspect-ratio:4/3}
.r4-uhero .ph .pw img{animation:none;object-fit:contain;object-position:center;background:var(--bg3)}
.r4-uhero .ph>img{animation:none;object-position:center}
.hcard .ph .pw img,.pcard .ph .pw img{animation:none;object-position:50% 14%}
.pcard .ph .pw{gap:2px}
.journey-still{position:relative;width:100%;max-width:330px;aspect-ratio:2/3;overflow:hidden;border-radius:var(--r);background:var(--bg3)}
.journey-still img{width:100%;height:100%;object-fit:contain}
.journey-still>span{position:absolute;bottom:14px;left:14px;right:14px;padding:8px 12px;background:#171613e8;color:#fff;font-size:14px;border-radius:10px;text-align:center}
.footer-cases{width:100%;margin:22px 0 8px!important;justify-content:center;gap:10px 20px!important}
.footer-cases a{font-size:13px}
.day-one{max-width:600px;margin:0 auto 36px;position:relative;overflow:visible!important;background:none!important}
.day-one-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:center;position:relative;z-index:1}
.day-one figure{margin:0;aspect-ratio:2/3;position:relative;overflow:hidden;border:4px solid var(--bg);border-radius:18px;box-shadow:var(--shadow-lg);transform:translateY(0) rotate(-6deg);animation:day-one-float 6s var(--ease) infinite}
.day-one figure:nth-child(2){animation-delay:-2s;transform:translateY(-16px) rotate(2deg)}
.day-one figure:nth-child(3){animation-delay:-4s;transform:translateY(0) rotate(6deg)}
.day-one img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.day-one figcaption{position:absolute;bottom:10px;left:8px;right:8px;padding:7px 5px;background:#171613ed;color:#fff;border-radius:999px;font-size:13px;font-weight:600;text-align:center}
.day-one-line{position:absolute;height:2px;left:8%;right:8%;top:50%;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:day-one-draw 6s var(--ease) infinite}
@keyframes day-one-float{0%,100%{translate:0 4px}50%{translate:0 -12px}}
@keyframes day-one-draw{0%,15%{transform:scaleX(0)}50%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@media(max-width:899px){.problem.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:719px){.problem.five{grid-template-columns:1fr}.problem.five .ph{aspect-ratio:4/3}.r4-uhero .ph{aspect-ratio:1/1}.r4-uhero .ph .pw img{object-fit:cover;object-position:50% 0}.day-one-track{gap:10px}.day-one figcaption{font-size:11px}.day-one figure{border-width:3px}.day-one{max-width:360px}}
@media(prefers-reduced-motion:reduce){
 .snap-pair img{transform:none!important}.snap-lines{opacity:1}.snap-caption em:first-child{opacity:0}.snap-caption em:last-child{opacity:1}
 .day-one figure{translate:0 0!important}.day-one-line{transform:scaleX(1)}
}
.day-one{aspect-ratio:auto;border:0;isolation:auto}
.real-timeline img{position:static;inset:auto}
.real-timeline>img{object-fit:contain}
.snap-align{background:var(--bg3)}
.journey-preview{aspect-ratio:4/3;background:var(--bg3)}
.journey-preview img{object-fit:contain}

/* Round five: honest full-body framing, quiet motion, compact editorial hierarchy. */
.wipe.hero-w{width:min(100%,440px);height:auto;max-height:none;aspect-ratio:2/3}
.wipe.hero-w img{object-fit:contain;object-position:center}
@media(max-width:899px){.wipe.hero-w{width:min(100%,350px);height:auto;aspect-ratio:2/3}}
.wipe.nudge{animation:none}
.wipe.nudge .knob,.getbig,.price .trial{animation:none}
.wipe .hint{display:none}

.r4-uhero{padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(52px,7vw,88px)}
.r4-uhero .wrap{display:grid;grid-template-columns:minmax(0,600px) minmax(300px,1fr);gap:clamp(32px,5vw,76px);align-items:center}
.r4-uhero .ph{width:100%;max-width:600px;aspect-ratio:4/3;margin:0;box-shadow:var(--shadow)}
.r4-uhero .ph .pw img{object-fit:cover;object-position:center;background:none}
.r4-uhero .ph>img{object-fit:cover;object-position:center}
.r4-uhero .txt{max-width:36rem;margin:0;padding:0;text-align:left}
.r4-uhero .txt h1{font-size:clamp(42px,4.3vw,70px)}
@media(max-width:899px){.r4-uhero .wrap{grid-template-columns:1fr;gap:28px}.r4-uhero .ph{margin-inline:auto}.r4-uhero .txt{margin-inline:auto;text-align:center}}
@media(max-width:719px){.r4-uhero .ph{aspect-ratio:4/3}.r4-uhero .ph .pw img{object-fit:cover;object-position:center}.r4-uhero .txt{padding-top:0}}

.pcard .ph,.who.three .pcard .ph{aspect-ratio:4/3;box-shadow:var(--shadow)}
.pcard .ph .pw img{object-fit:cover;object-position:center}
@media(max-width:599px){.who.three .pcard .ph{aspect-ratio:4/3}}
.journey-still:has(img[src*="coach"]){max-width:460px;aspect-ratio:4/3}
.journey-still:has(img[src*="coach"]) img{object-fit:cover}

.phead:has(+ .sec .price){padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(24px,4vw,40px)}
.price{position:relative;overflow:hidden;border-color:var(--line2);box-shadow:0 18px 48px -28px rgba(23,22,19,.24)}
.price::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold)}

.snap-pair img{animation-duration:3.8s;animation-iteration-count:1;animation-fill-mode:forwards}
.snap-lines,.snap-caption em{animation-duration:3.8s;animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes snap-first{0%,18%{transform:translate(-2%,2%) rotate(-2deg) scale(1.04)}50%,100%{transform:none}}
@keyframes snap-second{0%,18%{transform:translate(2%,-2%) rotate(2deg) scale(1.04)}50%,100%{transform:none}}
@keyframes snap-guide{0%,45%{opacity:0}50%,100%{opacity:1}}
@keyframes snap-before{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes snap-after{0%,49%{opacity:0}50%,100%{opacity:1}}
.align .cam .live,.align .cam .pill i,.align .cam .pill i::after,.align .cam .pill em,.align .cam .shut::after,.align .cam .flash,.align .cam .landed{animation-iteration-count:1;animation-fill-mode:forwards}
.s-jrn img{animation-timing-function:steps(1,end)!important}
.s-lock .g{animation:none;filter:brightness(.65)}
.s-lock .lk{animation:none;opacity:1;transform:translate(-50%,-50%)}
.s-lock .g span img{animation:none}
@media(prefers-reduced-motion:reduce){.s-lock .g{filter:brightness(.65)}}
.journey-still:has(img[alt="Body recomposition journey"]){max-width:500px;aspect-ratio:2/3}
.journey-still:has(img[alt="Body recomposition journey"]) img{object-fit:contain;object-position:center}
/* Paired cards use two exact 2:3 photos; single portraits keep their intended framing. */
.pcard .ph,.who.three .pcard .ph{aspect-ratio:3/4}
.pcard .ph:has(.pw),.who.three .pcard .ph:has(.pw),.pcard .ph:has(>img[src*="coach"]){aspect-ratio:4/3}
.pcard .ph img{animation:none}
@media(max-width:599px){.who.three .pcard .ph:has(.pw),.who.three .pcard .ph:has(>img[src*="coach"]){aspect-ratio:4/3}}
.wipe.hero-w .hint{display:inline-flex;opacity:.96}
.wipe.hero-w.interacted .hint{opacity:0}
.loop .cam .live,.loop .cam .pill i,.loop .cam .pill i::after,.loop .cam .pill em,.loop .cam .flash,.loop .cam .shut::after{animation-iteration-count:1;animation-fill-mode:forwards}
.s-wipe{animation:none;--x:50%}
.s-share .card,.s-share .two span{animation:none;opacity:1;transform:none}
.s-share .two img{opacity:1;visibility:visible}
.day-one figure,.day-one-line,.lost-stack>span:nth-child(3){animation:none}
.day-one-line{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
 .wipe.hero-w .hint{display:none}
 .s-wipe{--x:50%}
 .snap-pair img,.align .cam .live,.loop .cam .live{transform:none!important}
 .snap-lines{opacity:1}
 .s-share .two span{opacity:1;transform:none}
 .day-one figure{translate:0 0}
}
/* The photograph and journey label change on the same frame. */
@keyframes ph1{0%,33.32%{opacity:1}33.33%,100%{opacity:0}}
@keyframes ph2{0%,33.32%{opacity:0}33.33%,66.65%{opacity:1}66.66%,100%{opacity:0}}
@keyframes ph3{0%,66.65%{opacity:0}66.66%,100%{opacity:1}}
@keyframes phb1{0%,49.99%{opacity:1}50%,100%{opacity:0}}
@keyframes phb2{0%,49.99%{opacity:0}50%,100%{opacity:1}}

/* Round 2: let the photographs, not interface chrome, carry the proof. */
.compare-stage{display:grid;justify-items:center;gap:14px;width:100%;max-width:880px;margin-inline:auto}
.compare-stage>.al{position:static;z-index:3;display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--bg2);box-shadow:0 5px 16px rgba(23,22,19,.08)}
.compare-stage>.al button{min-height:38px;padding:0 17px;border:0;border-radius:999px;background:transparent;color:var(--ink2);font:600 13px/1 "Instrument Sans",sans-serif;cursor:pointer}
.compare-stage>.al button[aria-pressed="true"]{background:var(--gold);color:#171613}
.compare-stage>.al button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.compare-stage .wipe{margin:0}
.compare-stage>.wipe[data-flip]{max-width:440px;aspect-ratio:2/3}
.compare-stage>.wipe[data-flip] img,.wipe.tall img{object-fit:contain;object-position:center}
.align .cam{top:36px;background:#dedbd6}
.align .cam .live{object-position:center}
.vid .frame{top:38px;bottom:52px;height:calc(100% - 90px);object-fit:cover;object-position:center;background:#eeeae4}
.vid .day{bottom:57px}
.pcard .ph .pw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.hcard .ph:has(.pw){aspect-ratio:4/3}
.pcard .ph .pw img,.hcard .ph .pw img{position:static;min-width:0;max-width:100%;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--bg3);animation:none}
.pcard .ph>img{object-fit:contain;object-position:center}
.s-jrn .seg{top:auto;bottom:16px}

/* Round 4: give the first journey enough room to show an honest full-body pair. */
@media (max-width:599px){
  .home-who .pcard:first-child{grid-column:1/-1}
  .home-who .pcard:first-child .ph:has(.pw){aspect-ratio:4/3}
  .home-who .pcard:first-child b{font-size:23px;margin-top:14px}
  .home-who .pcard:first-child span{font-size:16px}
}

/* The close lands on the two dates; the middle date is a quiet bridge. */
.day-one{max-width:550px}
.day-one-track{grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr);gap:10px}
.day-one figure,.day-one figure:nth-child(3){aspect-ratio:2/3;transform:none;animation:none;border-width:3px;box-shadow:var(--shadow)}
.day-one figure img{object-fit:contain;background:var(--bg3)}
.day-one figure:nth-child(2){align-self:center;display:grid;place-items:center;aspect-ratio:auto;min-height:44px;border:0;overflow:visible;box-shadow:none;transform:none}
.day-one figure:nth-child(2) img{display:none}
.day-one figure:nth-child(2) figcaption{position:relative;inset:auto;padding:6px 4px;background:var(--bg2);color:var(--gold-ink);border-radius:0;line-height:1.2}
.day-one-line{left:12%;right:12%;top:50%;height:2px;transform:scaleX(1);animation:none}
@media (max-width:719px){
  .day-one{max-width:400px}
  .day-one-track{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:7px}
  .day-one figure:nth-child(2) figcaption{font-size:12px}
}

.illus{margin:10px auto 0;font-size:12px;line-height:1.4;color:var(--mute);text-align:center}

.priv3.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
@media (max-width:719px){.priv3.two{grid-template-columns:1fr;max-width:420px}}

.wipe.raw.has-raw img:not(.b){transform:none}
.align .cam .pill .w{justify-items:center}
.align .cam .pill em{animation:none;opacity:0}
.align .cam .pill em:last-child{opacity:1}
.align .cam .pill i{animation:none;background:#4CD964}
.align .cam .pill i::after{animation:none;opacity:1;inset:0;width:auto;height:auto;border:0;transform:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2.1 2.1L10.2 5' fill='none' stroke='%23171613' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat}
@media (prefers-reduced-motion:no-preference){
 .align .cam::before{content:"";position:absolute;inset:-8%;background:var(--bk,#dedbd6) 88% 12%/600% auto no-repeat #dedbd6;filter:blur(18px)}
 .align .cam .live{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect;will-change:transform}
 .align .cam{overflow:hidden}
 .align .cam .live{animation:alignLoop 14s cubic-bezier(.45,0,.25,1) infinite}
 .align.play .cam .live{animation:alignLoop 14s cubic-bezier(.45,0,.25,1) infinite,acam 14s linear infinite}
 .align .cam .shut::after{animation:ashut2 14s linear infinite}
 .align .cam .flash{animation:aflash2 14s linear infinite}
 .align .cam .landed{animation:aland2 14s var(--ease) infinite}
 .align .cam .live,.align .cam .shut::after,.align .cam .flash,.align .cam .landed{animation-iteration-count:infinite;animation-fill-mode:none}
 .align:not(.play) *::after{animation-play-state:paused!important}
 .align .cam .pill i{animation:aok 14s linear infinite}
 .align .cam .pill i::after{animation:aokk 14s linear infinite}
 .align .cam .pill em:nth-child(1){animation:ap1 14s linear infinite}
 .align .cam .pill em:nth-child(2){animation:ap2 14s linear infinite}
 .align .cam .pill em:nth-child(3){animation:ap3 14s linear infinite}
 .align .cam .pill em:nth-child(4){animation:ap4 14s linear infinite}
 .align .cam .pill em:nth-child(5){animation:ap5 14s linear infinite}
 .align .cam .pill em:nth-child(6){animation:ap6 14s linear infinite}
 .align .cam .pill em:nth-child(7){animation:ap7 14s linear infinite}
}
@keyframes acam{0%{opacity:0}2.5%,97%{opacity:1}99.5%,100%{opacity:0}}
@keyframes alignLoop{
 0%,7%{transform:translate(-26%,14%) scale(2.1) rotate(-7deg)}
 19%,21%{transform:translate(-26%,14%) scale(1.3) rotate(-7deg)}
 29%,31%{transform:translate(-26%,14%) scale(1.3) rotate(0)}
 40%,42%{transform:translate(-26%,0) scale(1.3) rotate(0)}
 51%,61%{transform:translate(0,0) scale(1) rotate(0)}
 67%,70%{transform:translate(6%,-4%) scale(.74) rotate(0)}
 76%,100%{transform:translate(0,0) scale(1) rotate(0)}}
@keyframes ashut2{0%,84%{transform:scale(1)}85.5%,87%{transform:scale(.86)}88.5%,100%{transform:scale(1)}}
@keyframes aflash2{0%,84.5%{opacity:0}85.5%{opacity:.8}89%,100%{opacity:0}}
@keyframes aland2{0%,87%{opacity:0;transform:scale(.6)}91.5%,97%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
@keyframes ap1{0%,19.99%{opacity:1}20%,100%{opacity:0}}
@keyframes ap2{0%,19.99%{opacity:0}20%,29.99%{opacity:1}30%,100%{opacity:0}}
@keyframes ap3{0%,29.99%{opacity:0}30%,40.99%{opacity:1}41%,100%{opacity:0}}
@keyframes ap4{0%,40.99%{opacity:0}41%,51.99%{opacity:1}52%,100%{opacity:0}}
@keyframes ap5{0%,51.99%{opacity:0}52%,62.99%{opacity:1}63%,100%{opacity:0}}
@keyframes ap6{0%,62.99%{opacity:0}63%,74.99%{opacity:1}75%,100%{opacity:0}}
@keyframes ap7{0%,74.99%{opacity:0}75%,100%{opacity:1}}
@keyframes aok{0%,51.99%{background:#A3A199}52%,62.99%{background:#4CD964}63%,74.99%{background:#A3A199}75%,100%{background:#4CD964}}
@keyframes aokk{0%,51.99%{opacity:0}52%,62.99%{opacity:1}63%,74.99%{opacity:0}75%,100%{opacity:1}}