/* Landing page "Social Immo" (public/landing.html).
 * Colours, radii, shadows, fonts and easing curves: css/tokens.css (shared with the app).
 * Fixed values only for the phone / Instagram mockup and the glows behind it. */
/* one left edge for everything: nav, hero, tour, sections and footer share
   the content width and the side gutter (the desktop stage columns add up to --content) */
:root{
  --content:1200px;
  /* viewport-fit=cover: in landscape the gutter also clears the notch */
  --gutter:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}
@media (min-width:768px){ :root{ --gutter:max(32px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.04; text-wrap:balance; }
/* headlines: heavy and tightly tracked, the whole line in brushed silver */
h1,h2{
  font-weight:700; letter-spacing:-.03em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
h3{ font-weight:650; letter-spacing:-.01em; }
p{ margin:0; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ic{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }

.wrap{ max-width:calc(var(--content) + 2 * var(--gutter)); margin:0 auto; padding:0 var(--gutter); }

.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--grad); color:var(--on-grad); padding:10px 16px; }
.skip:focus{ left:8px; }

/* ---------- buttons: silver for the action, glass beside it ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px; border-radius:var(--radius-pill); border:1px solid transparent;
  font:600 15px/1 var(--sans); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--grad); color:var(--on-grad); box-shadow:var(--shadow-btn); }
.btn-ghost{
  background:var(--glass); color:var(--ink); border-color:var(--line-strong);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.btn-quiet{ background:transparent; color:inherit; }
.btn-sm{ height:40px; padding:0 18px; font-size:14px; }
.btn-lg{ height:54px; padding:0 28px; font-size:16px; }
.btn-block{ display:flex; width:100%; }
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{ box-shadow:var(--shadow-btn-hover); }
  .btn-ghost:hover{ border-color:var(--line-hover); background:var(--hover); }
  .btn-quiet:hover{ background:var(--hover); }
}
@media (max-width:380px){ .btn-lg{ padding:0 22px; } }

/* ---------- navigation: a full-width glass bar, its content on the page's left edge ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; padding-top:env(safe-area-inset-top, 0px); /* viewport-fit=cover */
  background:var(--bar); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
}
.nav-bar{
  max-width:calc(var(--content) + 2 * var(--gutter)); margin:0 auto; height:64px;
  display:flex; align-items:center; gap:12px; padding:0 var(--gutter); color:var(--ink);
}
.brand{ display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); }
/* the logo is the wordmark alone: "Social" thin, "Immo" bold */
.brand-name{ font-weight:200; letter-spacing:-.01em; white-space:nowrap; font-size:19px; }
.brand-name b{ font-weight:700; }
.nav-links{ display:none; }
.nav-links a{ text-decoration:none; font-weight:500; font-size:14.5px; color:var(--muted); transition:color 200ms ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-actions{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav-login{ display:none; }
.menu-toggle{
  width:40px; height:40px; border:1px solid var(--line-strong); background:transparent; color:inherit;
  display:grid; place-content:center; gap:5px; cursor:pointer; padding:0;
}
.menu-toggle span{ display:block; width:16px; height:1.5px; background:currentColor; transition:transform 200ms var(--ease-out); }
.nav.menu-open .menu-toggle span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav.menu-open .menu-toggle span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
@media (max-width:899px){
  /* the menu drops below the bar, full width, links on the same left edge */
  .nav.menu-open .nav-links{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; padding:4px var(--gutter) 12px;
    background:var(--canvas); color:var(--ink); /* opaque: a nested backdrop-filter has nothing to blur */
    border-bottom:1px solid var(--line); box-shadow:0 30px 60px -30px var(--drop);
  }
  .nav.menu-open .nav-links a{ padding:14px 0; font-size:16px; color:var(--ink); border-top:1px solid var(--line); }
  .nav.menu-open .nav-links a:first-child{ border-top:0; }
}
@media (min-width:900px){
  .nav-links{ display:flex; gap:28px; margin:0 auto; }
  .nav-actions{ margin-left:0; }
  .nav-login{ display:inline-flex; }
  .nav-login-mobile,.menu-toggle{ display:none; }
}

/* ======================================================================
   STAGE: hero + scroll tour around one sticky phone
   Mobile: one column; the phone sticks below the nav and the tour cards
   scroll over its lower part. Desktop (≥1024px): copy on the left, the
   phone in its own column spanning hero and tour.
   ====================================================================== */
.stage{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr);
  /* one warm light from above */
  background:radial-gradient(70% 60% at 72% -8%, var(--light), transparent 70%) top / 100% 130svh no-repeat, var(--canvas);
  color:var(--ink);
  /* clip, not hidden: a hidden overflow would turn the stage into a scroll container and break the sticky phone */
  overflow:clip;
}

/* ---------- hero copy ---------- */
.hero{
  grid-row:1; grid-column:1; z-index:2; position:relative;
  padding:116px var(--gutter) 56px; display:flex; flex-direction:column; justify-content:center;
}
.eyebrow{
  align-self:flex-start; display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 12px;
  border-radius:var(--radius-pill); background:var(--glass); border:1px solid var(--line-strong);
  font-weight:500; font-size:13px; color:var(--ink-2);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.eyebrow .dot{ width:6px; height:6px; background:var(--signal); box-shadow:0 0 0 3px var(--signal-soft); }
.hero h1{
  margin-top:24px; font-size:clamp(2.6rem,1.2rem + 4.4vw,5.25rem); line-height:.96;
  letter-spacing:-.035em;
}
.lead{ margin:26px 0 34px; font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); color:var(--muted); max-width:34em; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-points{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 24px; }
.hero-points li{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:14px; color:var(--muted); }
.hero-points .ic{ width:18px; height:18px; color:var(--forest); stroke-width:2.2; }
.scroll-cue{ display:none; }

/* first visit: the hero builds up once (CSS animation, off the main thread) */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes appear{ from{ opacity:0; } to{ opacity:1; } }
.js .hero > *{ animation:rise 900ms var(--ease-out) both; }
.js .hero > :nth-child(2){ animation-delay:60ms; }
.js .hero > :nth-child(3){ animation-delay:120ms; }
.js .hero > :nth-child(4){ animation-delay:180ms; }
.js .hero > :nth-child(5){ animation-delay:240ms; }
.js .hero > :nth-child(6){ animation-delay:300ms; }
.js .device-stage{ animation:rise 1100ms var(--ease-out) 160ms both; }

/* ---------- the phone column ---------- */
.device{ grid-row:2; grid-column:1; z-index:1; }
.device-pin{
  /* as tall as the phone: once the tour ends, what follows comes up right below it (the step card is fixed further down) */
  position:sticky; top:0;
  display:flex; justify-content:center; align-items:flex-start; padding-top:84px;
}
.device-stage{ position:relative; perspective:1600px; }
.glows{ position:absolute; inset:-28% -80%; pointer-events:none; }
.glow{
  position:absolute; inset:0; opacity:0; transition:opacity 900ms ease;
  background:radial-gradient(42% 40% at 50% 50%, var(--c), transparent 100%);
}
.glow.is-on{ opacity:1; }
/* a warm halo for the profile, a muted tint of the design on screen for the others */
.glow[data-glow="brand"]{ background:radial-gradient(40% 38% at 50% 48%, var(--light), var(--light-soft) 55%, transparent 100%); }
.glow[data-glow="atelier-navy"]{ --c:rgba(38,51,95,.26); }
.glow[data-glow="diagonale"]{ --c:rgba(226,35,26,.24); }
.glow[data-glow="riviera"]{ --c:rgba(199,110,79,.30); }
.glow[data-glow="amethyste"]{ --c:rgba(104,52,170,.30); }
.glow[data-glow="monolithe"]{ --c:rgba(15,15,15,.18); }

/* phone size: fits the free height under the nav (mobile leaves room for the tour card) */
.iphone{
  --w:clamp(180px, min(72vw, (100svh - 340px) * .478), 330px);
  position:relative; width:var(--w); aspect-ratio:71.5/149.6; border-radius:15.5% / 7.4%;
  /* natural titanium: the one silver object of the page */
  background:linear-gradient(140deg,#f2f3f5 0%,#a4a7ae 14%,#dcdee2 38%,#8a8d94 62%,#c8cacf 84%,#eceef0 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 0 0 2px rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.5),
    0 70px 120px -50px var(--drop),
    0 0 90px -24px var(--light);
}
.iphone::before{ /* black glass edge inside the metal band */
  content:""; position:absolute; inset:.85% 1.8%; border-radius:13.9% / 6.6%; background:#040406;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.hw{ position:absolute; width:1.1%; border-radius:2px; background:linear-gradient(90deg,#8d9097,#e2e4e8); }
.hw-action{ left:-.9%; top:17%; height:4.4%; }
.hw-vol1{ left:-.9%; top:24.5%; height:7.2%; }
.hw-vol2{ left:-.9%; top:33%; height:7.2%; }
.hw-power{ right:-.9%; top:27%; height:11%; background:linear-gradient(270deg,#8d9097,#e2e4e8); }
.hw-cam{ right:-.9%; top:56%; height:6.5%; background:linear-gradient(270deg,#8d9097,#e2e4e8); }

/* 3D tilt (desktop with a mouse, set up by js/landing.js): the phone follows the
   pointer by up to 20° and gets a body — a stack of titanium slabs behind the
   front, so its side band shows as it turns; the glare slides across the glass. */
.iphone.is-3d{ transform-style:preserve-3d; will-change:transform; }
.iphone.is-3d .screen,.iphone.is-3d .hw{ transform:translateZ(.5px); }
.slab{
  position:absolute; inset:0; border-radius:15.5% / 7.4%; pointer-events:none;
  background:linear-gradient(140deg,#c9cbd0,#7f828a 40%,#b4b7bd 70%,#8a8d94);
  transform:translateZ(calc(var(--i) * var(--w) * -.009));
}
.slab:last-child{ box-shadow:0 60px 110px -50px var(--drop); } /* the back carries the drop shadow */

.screen{
  position:absolute; inset:1.63% 3.4%; border-radius:13% / 6%; overflow:hidden; background:#000;
  container-type:size; isolation:isolate;
  /* Safari: keep the rounded clip while children transform */
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}
.island{
  position:absolute; z-index:20; top:2.9cqw; left:50%; width:31.5cqw; height:9.2cqw;
  transform:translateX(-50%); border-radius:99px; background:#000;
}
.glare{
  position:absolute; inset:0; z-index:21; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 28%, transparent 42%);
}

/* ---------- screens and their crossfade (Instagram in dark mode) ----------
   In step with the tour cards: the old screen sinks back and dims, the new one
   settles in from slightly larger on top of it. */
.scr{
  position:absolute; inset:0; overflow:hidden; font-family:-apple-system,"SF Pro Text",var(--sans);
  background:#000; color:#f5f5f5;
  opacity:0; z-index:0; transform:scale(1.08);
  transition:opacity 350ms ease, transform 450ms var(--ease-out);
}
.scr.is-past{ transform:scale(.92); }
.scr.is-active{
  opacity:1; z-index:1; transform:none;
  transition:opacity 550ms var(--ease-out) 120ms, transform 750ms var(--ease-out) 120ms;
}
.device.no-anim .scr,.device.no-anim .frame,.device.no-anim .fd-list{ transition:none; }
.scr .ic{ width:6.2cqw; height:6.2cqw; stroke-width:1.8; }

.sb{
  height:12.5cqw; display:flex; align-items:center; justify-content:space-between;
  padding:2.2cqw 7.5cqw 0 10.5cqw; font:600 4.2cqw/1 -apple-system,"SF Pro Text",var(--sans); letter-spacing:-.01em;
}
.sb-ic{ display:flex; align-items:center; gap:1.3cqw; }
.scr .sb-ic .ic{ width:4.3cqw; height:4.3cqw; stroke-width:2.4; }
.scr .sb-ic .bat{ width:7cqw; height:3.3cqw; }
.home-ind{
  position:absolute; z-index:6; bottom:2cqw; left:50%; width:35cqw; height:1.35cqw;
  transform:translateX(-50%); border-radius:99px; background:currentColor; opacity:.9;
}

/* monogram avatars: silver letters on graphite */
.av-sm{
  width:6.6cqw; height:6.6cqw; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:#1c1d22; color:#e4e5e9; font:700 2.5cqw/1 var(--sans); letter-spacing:.04em;
  box-shadow:0 0 0 .35cqw rgba(255,255,255,.9);
}

/* profile */
.pf-top{ height:11cqw; display:flex; align-items:center; justify-content:space-between; padding:0 4.5cqw; }
.pf-top b{ display:flex; align-items:center; gap:1cqw; font-size:5.4cqw; letter-spacing:-.02em; }
.scr .pf-top b .ic{ width:4.4cqw; height:4.4cqw; stroke-width:2.4; }
.pf-top span{ display:flex; gap:5cqw; }
.pf-head{ display:flex; align-items:center; gap:5cqw; padding:2cqw 4.5cqw 0; }
.pf-av{ width:21cqw; height:21cqw; border-radius:50%; padding:.75cqw; background:var(--grad); flex:0 0 auto; }
.pf-av span{
  width:100%; height:100%; border-radius:50%; display:grid; place-items:center; border:.8cqw solid #000;
  background:#1c1d22; color:#e4e5e9; font:700 6.2cqw/1 var(--sans); letter-spacing:.01em;
}
.pf-id{ display:flex; flex-direction:column; gap:.6cqw; }
.pf-id b{ font-size:4.4cqw; letter-spacing:-.01em; }
.pf-id small{ font-size:3.5cqw; color:#a8a8a8; }
.pf-bio{ padding:2.6cqw 4.5cqw 0; font-size:3.55cqw; line-height:1.38; }
.pf-btns{ display:grid; grid-template-columns:1fr 1fr; gap:1.6cqw; padding:3cqw 4.5cqw 0; }
.pf-btns span{ height:8cqw; border-radius:2.2cqw; background:#262626; display:grid; place-items:center; font-weight:600; font-size:3.4cqw; }
.pf-hl{ display:flex; gap:4.2cqw; padding:3.6cqw 4.5cqw 0; }
.pf-hl span{ width:15.5cqw; display:flex; flex-direction:column; align-items:center; gap:1.2cqw; }
.pf-hl img{ width:15.5cqw; height:15.5cqw; border-radius:50%; object-fit:cover; object-position:50% 38%; padding:.7cqw; border:.35cqw solid #363636; background:#000; }
.pf-hl small{ font-size:2.9cqw; white-space:nowrap; }
.pf-tabs{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:3.2cqw; border-bottom:1px solid #262626; }
.pf-tabs .ic{ justify-self:center; margin:2cqw 0; color:#737373; }
.pf-tabs .ic.on{ color:#f5f5f5; }
.pf-tabs::after{ content:""; grid-row:2; grid-column:1; height:.5cqw; background:#f5f5f5; }
.pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.45cqw; }
.pf-grid span{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#121212; }
.pf-grid img{ width:100%; height:100%; object-fit:cover; }
.scr .t-ic{ position:absolute; top:1.6cqw; right:1.6cqw; width:4.6cqw; height:4.6cqw; color:#fff; filter:drop-shadow(0 0 .6cqw rgba(0,0,0,.45)); }

.tabbar{
  position:absolute; z-index:5; left:0; right:0; bottom:0; height:15.5cqw;
  display:flex; justify-content:space-around; align-items:flex-start; padding-top:2.8cqw;
  background:#000; border-top:1px solid #262626;
}
.tb-av{ width:6.4cqw; height:6.4cqw; border-radius:50%; background:#1c1d22; color:#e4e5e9; display:grid; place-items:center; font:700 2.3cqw/1 var(--sans); box-shadow:0 0 0 .35cqw #000, 0 0 0 .7cqw #f5f5f5; }

/* story viewer (story + designs) */
.st-head{ height:9cqw; padding:.4cqw 3cqw 0; }
.st-bars{ display:flex; gap:.9cqw; }
.st-bars i{ flex:1; height:.6cqw; border-radius:1cqw; background:rgba(255,255,255,.32); overflow:hidden; }
.st-bars b{ display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform 450ms var(--ease-out); }
.st-user{ display:flex; align-items:center; gap:2cqw; margin-top:1.8cqw; }
.st-user b{ font-size:3.5cqw; }
.st-user small{ font-size:3.3cqw; opacity:.66; }
.st-acts{ margin-left:auto; display:flex; gap:3.4cqw; }
.scr .st-acts .ic{ width:5.4cqw; height:5.4cqw; }
.st-media{ position:relative; height:177.8cqw; border-radius:2.6cqw; overflow:hidden; background:#111; }
.st-media img,.rl-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.st-reply{ height:12cqw; display:flex; align-items:center; gap:3.6cqw; padding:0 3.6cqw; }
.st-reply span{
  flex:1; height:8.6cqw; display:flex; align-items:center; padding:0 3.8cqw;
  border:1px solid rgba(255,255,255,.45); border-radius:99px; font-size:3.4cqw; color:rgba(255,255,255,.8);
}

/* frames inside a screen (reel, designs): the incoming one fades in on top, the outgoing one leaves after it */
.frame{ opacity:0; z-index:0; transform:scale(1.035); transition:opacity 450ms ease 250ms, transform 900ms var(--ease-out); }
.frame.is-on{ opacity:1; z-index:1; transform:none; transition:opacity 450ms ease, transform 900ms var(--ease-out); }

/* feed */
.fd-top{ height:11cqw; display:flex; align-items:center; justify-content:space-between; padding:0 4.5cqw; position:relative; z-index:2; background:#000; }
.fd-top b{ font-size:6.6cqw; letter-spacing:-.04em; }
.fd-top span{ display:flex; gap:5cqw; }
.fd-view{ position:absolute; top:23.5cqw; left:0; right:0; bottom:15.5cqw; overflow:hidden; }
.fd-list{ transition:transform 700ms var(--ease-in-out); }
.ig header{ display:flex; align-items:center; gap:2.6cqw; padding:2.4cqw 3.4cqw; }
.av-ring{ width:8.6cqw; height:8.6cqw; border-radius:50%; padding:.5cqw; background:var(--grad); flex:0 0 auto; }
.av-ring span{ width:100%; height:100%; border-radius:50%; border:.5cqw solid #000; display:grid; place-items:center; background:#1c1d22; color:#e4e5e9; font:700 2.6cqw/1 var(--sans); }
.ig-who{ display:flex; flex-direction:column; line-height:1.2; }
.ig-who b{ font-size:3.5cqw; }
.ig-who small{ font-size:3cqw; color:#a8a8a8; }
.ig header .ic{ margin-left:auto; width:5cqw; height:5cqw; }
.ig-media{ position:relative; aspect-ratio:4/5; background:#121212; }
.ig-media img{ width:100%; height:100%; object-fit:cover; }
.ig-count{ position:absolute; top:3cqw; right:3cqw; padding:1cqw 2.4cqw; border-radius:99px; background:rgba(18,18,22,.66); color:#fff; font-size:3cqw; font-weight:600; }
.ig-bar{ position:relative; display:flex; align-items:center; gap:4cqw; padding:2.6cqw 3.4cqw 1.6cqw; }
.ig-bar .like{ color:#ff3040; fill:#ff3040; stroke:#ff3040; }
.ig-bar .save{ margin-left:auto; }
.ig-dots{ position:absolute; left:50%; top:50%; transform:translate(-50%,-30%); display:flex; gap:1cqw; }
.ig-dots i{ width:1.5cqw; height:1.5cqw; border-radius:50%; background:#555; }
.ig-dots i.on{ background:#3897f0; }
.ig-cap{ padding:0 3.4cqw 4cqw; font-size:3.45cqw; line-height:1.4; }

/* reel */
.rl-media{ position:absolute; top:12.5cqw; left:0; right:0; height:177.8cqw; overflow:hidden; background:#111; }
.rl-side{ position:absolute; z-index:3; right:2.4cqw; bottom:9cqw; display:flex; flex-direction:column; gap:5cqw; }
.scr .rl-side .ic{ width:6.8cqw; height:6.8cqw; filter:drop-shadow(0 0 .8cqw rgba(0,0,0,.55)); }
.rl-prog{ position:absolute; z-index:3; left:0; right:0; bottom:0; height:.7cqw; background:rgba(255,255,255,.28); }
.rl-prog b{ display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform 450ms var(--ease-out); }
.rl-meta{ position:absolute; top:193cqw; left:3.6cqw; right:3.6cqw; }
.rl-user{ display:flex; align-items:center; gap:2.2cqw; }
.rl-user b{ font-size:3.5cqw; }
.rl-follow{ padding:.8cqw 2.6cqw; border:1px solid rgba(255,255,255,.55); border-radius:1.8cqw; font-size:3.1cqw; font-weight:600; }
.rl-audio{ display:flex; align-items:center; gap:1.6cqw; margin-top:1.8cqw; font-size:3.1cqw; opacity:.85; }
.scr .rl-audio .ic{ width:3.6cqw; height:3.6cqw; }

/* ---------- the tour cards ---------- */
.tour{ grid-row:2; grid-column:1; z-index:3; position:relative; }
/* Scroll length of each step. The card sits in .step-pin. With JS it is fixed
   in one place — beside the phone on desktop, below it on smaller screens — and
   only the current step's card is shown (.is-current, set by js/landing.js):
   one step replaces the other in a crossfade instead of scrolling up.
   Without JS the pin is sticky inside its step. */
.tour-lead{ display:block; height:75svh; }
.step{ position:relative; height:80svh; }
.step-pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end; padding:0 12px 12px;
}
/* With JS the cards don't scroll, so a step only needs a short scroll distance:
   about half a screen per step. Steps with several frames (reel, designs) don't
   scroll through them — their buttons switch the frame. The last step adds the
   distance until the phone scrolls away. */
.js .step{ height:50svh; }
/* the last step: its own half screen plus the distance until the phone scrolls away
   (the activation line sits at 50 % of the viewport here, at 30 % on desktop) */
.js .step:last-child{ height:100svh; }
/* the outgoing card lifts away, the next one rises in once it is gone
   (cards before the current one are .is-done and leave upwards) */
.js .step-pin{
  position:fixed; z-index:5;
  opacity:0; visibility:hidden; transform:translateY(28px);
  transition:opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.js .step.is-done .step-pin{ transform:translateY(-28px); }
.js .step.is-current .step-pin{
  opacity:1; visibility:visible; transform:none;
  transition:opacity 500ms var(--ease-out) 180ms, transform 650ms var(--ease-out) 180ms, visibility 0s;
}
/* past the last step the page scrolls on: its card goes up with the phone, 1:1 with the scroll */
.js .step.is-leaving .step-pin{ transform:translateY(var(--lift,0px)); transition:none; }
.js .step.is-leaving .step-card::after{ display:none; } /* the sheet's run-on below the screen edge would cover the next section */
/* smaller screens: the card is a full-width sheet sitting on the bottom edge,
   its text on the page's gutter (plus the iPhone home-bar area where there is one) */
@media (max-width:1023px){
  .js .step-pin{ top:auto; left:0; right:0; bottom:0; height:auto; padding:0; }
  .js .step-card{
    border-width:1px 0 0; box-shadow:0 -20px 50px -30px var(--drop);
    padding:20px var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px));
  }
  .js .step-card::before{ left:0; right:0; }
  /* the sheet's colour runs on below the bottom edge, so the area under a floating
     browser bar (Safari on iOS 26) shows the sheet instead of a hard cut */
  .js .step-card::after{
    content:""; position:absolute; left:0; right:0; top:100%; height:50vh;
    background:var(--glass-strong); pointer-events:none;
  }
}
/* small screens: a glass card with a lit top edge, fixed below the phone */
.step-card{
  position:relative; padding:20px 20px 22px; border-radius:var(--radius); color:var(--ink);
  background:var(--glass-strong); border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 30px 60px -30px var(--drop);
}
.step-card::before{ content:""; position:absolute; top:-1px; left:14%; right:14%; height:1px; background:var(--edge); pointer-events:none; }
/* step number in signal orange: the one thing on screen that says "you are here" */
.step-kicker{ display:flex; align-items:baseline; gap:10px; font-weight:600; font-size:14px; color:var(--ink-2); }
.step-kicker span{ color:var(--signal-ink); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.step-card h2{ margin-top:10px; font-size:clamp(1.75rem,1.1rem + 2.6vw,3.5rem); line-height:1.02; }
.step-card > p:not(.step-kicker):not(.step-note){ margin-top:10px; color:var(--muted); font-size:15px; line-height:1.55; }
.step-meta{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.step-meta li{
  padding:6px 12px; border:1px solid var(--line-strong);
  font-size:12.5px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chips button{
  height:34px; padding:0 14px; border:1px solid var(--line-strong); background:transparent;
  color:var(--muted); font:500 13px/1 var(--sans); cursor:pointer;
  transition:background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 160ms var(--ease-out);
}
.chips button:active{ transform:scale(.97); }
.chips button[aria-pressed="true"]{ background:var(--grad); color:var(--on-grad); border-color:transparent; }
@media (hover:hover) and (pointer:fine){
  .chips button:hover{ border-color:var(--line-hover); color:var(--ink); }
  .chips button[aria-pressed="true"]:hover{ color:var(--on-grad); }
}
.step-note{ margin-top:14px; font-size:12px; line-height:1.5; color:var(--muted); }
.step-shot{ display:none; margin:16px 0 0; }
.stage-note{ display:none; }
@media (max-width:1023px){
  /* one row of chips, scrollable, and the note below the stage: the fixed card has to stay short */
  .chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter); }
  .chips::-webkit-scrollbar{ display:none; }
  .chips button{ flex:0 0 auto; }
  .js .step-note{ display:none; }
  .js .stage-note{ display:block; grid-row:3; grid-column:1 / -1; z-index:3; padding:8px var(--gutter) 40px; font-size:12px; line-height:1.5; color:var(--muted); }
}

/* without JS: no sticky phone on small screens, every example shown as an image in its card */
html:not(.js) .step-shot{ display:block; }
html:not(.js) .step-shot img{ width:auto; height:auto; max-width:min(100%,260px); max-height:45svh; } /* keeps the card within the sticky pin */
html:not(.js) .step-shot.row{ display:flex; gap:8px; overflow-x:auto; }
html:not(.js) .step-shot.row img{ width:150px; height:auto; max-height:none; flex:0 0 auto; }
html:not(.js) .chips{ display:none; }
@media (max-width:1023px){
  html:not(.js) .device,html:not(.js) .tour-lead{ display:none; }
  html:not(.js) .step,html:not(.js) .step-pin{ height:auto; position:static; }
  html:not(.js) .step{ padding:12px 0; }
}

/* ---------- desktop stage ---------- */
@media (min-width:1024px){
  .stage{ grid-template-columns:minmax(var(--gutter),1fr) minmax(0,640px) minmax(0,560px) minmax(var(--gutter),1fr); } /* 640 + 560 = --content */
  .hero{ grid-column:2; min-height:100vh; min-height:100svh; padding:120px 48px 80px 0; }
  .device{ grid-row:1 / 3; grid-column:3; }
  .device-pin{ height:100vh; height:100svh; align-items:center; padding-top:40px; }
  .iphone{ --w:clamp(250px, (100svh - 150px) * .478, 360px); }
  .tour{ grid-column:2; }
  .tour-lead{ height:0; }
  .step{ height:100vh; height:100svh; }
  .step-pin{ justify-content:center; padding:0 56px 0 0; }
  /* fixed over the copy column: its left edge and width come from js/landing.js (--tour-x, --tour-w) */
  .js .step-pin{ top:0; left:var(--tour-x,0); width:var(--tour-w,640px); height:100vh; height:100svh; }
  .js .step:last-child{ height:85svh; } /* short: past step 5 the page scrolls on almost at once */
  /* the hero copy leaves like a step card: it stays in place (sticky over the whole
     stage) and lifts away as step 1 comes in (.is-gone, set by js/landing.js) */
  .js .hero{
    position:sticky; top:0; align-self:start;
    transition:opacity 500ms var(--ease-out) 180ms, transform 650ms var(--ease-out) 180ms, visibility 0s;
  }
  .js .hero.is-gone{
    opacity:0; visibility:hidden; transform:translateY(-28px);
    transition:opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  }
  .step-card{ padding:0; background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; max-width:500px; }
  .step-card::before{ display:none; }
  .step-kicker{ font-size:15px; }
  .step-card h2{ margin-top:18px; }
  .step-card > p:not(.step-kicker):not(.step-note){ margin-top:20px; font-size:1.125rem; line-height:1.6; }
  .step-meta,.chips{ margin-top:24px; }
  .chips button{ height:38px; padding:0 16px; font-size:14px; }
  .step-note{ margin-top:28px; max-width:420px; }
  .scroll-cue{
    display:inline-flex; align-items:center; gap:12px; margin-top:56px; align-self:flex-start;
    font-size:13px; font-weight:500; color:var(--muted); text-decoration:none;
  }
  .scroll-cue i{ position:relative; width:1px; height:34px; background:var(--line-strong); overflow:hidden; }
  .scroll-cue i::after{
    content:""; position:absolute; left:0; top:0; width:1px; height:12px;
    background:var(--ink); animation:cue 1.8s var(--ease-in-out) infinite;
  }
  @keyframes cue{ 0%{ opacity:0; transform:translateY(-12px); } 30%{ opacity:1; } 80%,100%{ opacity:0; transform:translateY(34px); } }
}

/* ======================================================================
   SECTIONS — cream, separated by hairlines; only two glass objects
   (the formats window and the price card)
   ====================================================================== */
.section{ padding:96px 0; position:relative; border-top:1px solid var(--line); }
@media (min-width:960px){ .section{ padding:144px 0; } }
.section-head{ max-width:780px; margin-bottom:48px; }
@media (min-width:960px){ .section-head{ margin-bottom:72px; } }
.section h2{ font-size:clamp(2.25rem,1.3rem + 3vw,3.75rem); line-height:1.02; }
.sub{ margin-top:22px; font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem); color:var(--muted); max-width:36em; }

/* glass panel with a lit top edge */
.panel{
  position:relative; border-radius:var(--radius);
  background:var(--glass); border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.panel::before{ content:""; position:absolute; top:-1px; left:12%; right:12%; height:1px; background:var(--edge); pointer-events:none; }

/* ---------- compare: one panel, two columns ---------- */
.compare{ display:grid; }
.compare-col{ padding:30px 24px; }
.compare-col + .compare-col{ border-top:1px solid var(--line); }
.compare-col h3{ font-size:1.3125rem; }
.compare-col ul{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px; }
.compare-col li{ display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.5; }
.compare-col .ic{ width:20px; height:20px; margin-top:2px; stroke-width:2.2; }
.compare-col.before{ color:var(--muted); }
.compare-col.before .ic{ color:var(--faint); }
.compare-col.after .ic{ color:var(--forest); }
@media (min-width:860px){
  .compare{ grid-template-columns:1fr 1fr; }
  .compare-col{ padding:44px 44px 48px; }
  .compare-col + .compare-col{ border-top:0; border-left:1px solid var(--line); }
}

/* ---------- three steps on one rail ---------- */
.steps{
  --num:clamp(3.5rem,2.6rem + 3vw,5.5rem);
  list-style:none; margin:0; padding:0; display:grid; gap:48px;
}
.steps li{ position:relative; }
/* the rail under the numbers; the columns touch, so on desktop it reads as one line */
.steps li::before{
  content:""; position:absolute; left:0; right:0; top:calc(var(--num) * .9 + 22px); height:1px; background:var(--line-strong);
}
.step-num{
  display:block; position:relative; padding-bottom:44px;
  font-size:var(--num); line-height:.9; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step-num::after{ /* the stop on the rail */
  content:""; position:absolute; left:0; top:calc(var(--num) * .9 + 19px); width:7px; height:7px; background:var(--ink);
}
.steps h3{ font-size:1.3125rem; }
.steps p{ margin-top:10px; color:var(--muted); font-size:16px; max-width:30em; }
@media (min-width:860px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:0; }
  .steps li{ padding-right:48px; }
}

/* ---------- features: the formats window + a plain list ---------- */
.features{ display:grid; gap:40px; }
.vitrine{ padding:28px 22px 26px; overflow:hidden; }
.vitrine::after{ /* light falling into the window from above */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(60% 45% at 50% 0%, var(--light-soft), transparent 70%);
}
.vitrine h3{ font-size:1.3125rem; }
.vitrine p{ margin-top:8px; color:var(--muted); font-size:15.5px; max-width:32em; }
/* the six formats hang from one cable, like listings in an agency window.
   Columns are sized so that 9:16 and 4:5 thumbnails end up the same height. */
.format-strip{
  position:relative; z-index:1; display:grid; grid-template-columns:9fr 12.8fr 12.8fr 9fr 9fr 9fr; gap:8px;
  margin-top:36px; padding-top:22px; align-items:end;
}
.format-strip::before{
  content:""; position:absolute; top:0; left:-22px; right:-22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-hover) 12%,var(--line-hover) 88%,transparent);
}
.format-strip figure{ position:relative; margin:0; min-width:0; }
.format-strip figure::before{ /* the hanger */
  content:""; position:absolute; left:50%; top:-22px; width:1px; height:22px; background:var(--line-hover);
}
.format-strip img{ width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; box-shadow:0 0 0 1px var(--line), 0 18px 30px -16px var(--drop); }
.format-strip figure.wide img{ aspect-ratio:4/5; }
.format-strip figcaption{ margin-top:8px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; color:var(--muted); text-align:center; }
.feature-list{ list-style:none; margin:0; padding:0; }
.feature-list li{ display:flex; gap:16px; padding:22px 0; border-top:1px solid var(--line); }
.feature-list li:last-child{ border-bottom:1px solid var(--line); }
.f-ic{ width:22px; height:22px; flex:0 0 auto; margin-top:2px; fill:none; stroke:var(--ink-2); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.feature-list h3{ font-size:1.0625rem; }
.feature-list p{ margin-top:4px; color:var(--muted); font-size:15px; line-height:1.55; }
@media (min-width:960px){
  .vitrine{ padding:40px 40px 34px; }
  .format-strip{ gap:12px; margin-top:48px; }
  .format-strip::before{ left:-40px; right:-40px; }
}
@media (min-width:1024px){
  .features{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:start; }
  .feature-list li:first-child{ padding-top:4px; border-top:0; }
}

/* ---------- pricing ---------- */
.pricing{ display:grid; gap:48px; align-items:center; }
@media (min-width:960px){ .pricing{ grid-template-columns:1fr 1fr; gap:96px; } }
.pricing-steps{ list-style:none; counter-reset:s; margin:36px 0 0; padding:0; display:grid; gap:18px; }
.pricing-steps li{ counter-increment:s; display:flex; gap:14px; align-items:baseline; color:var(--muted); }
.pricing-steps li::before{
  content:counter(s); flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center;
  border:1px solid var(--line-strong); font-weight:700; font-size:13px; color:var(--ink-2); transform:translateY(-1px);
}
.pricing-steps b{ color:var(--ink); font-weight:600; }
/* the strongest glass object of the page */
.price-card{
  position:relative; overflow:hidden; padding:36px 28px 28px;
  background:var(--bg);
  border:1px solid var(--line-strong);
  box-shadow:0 50px 100px -40px var(--drop);
}
.price-card::before{ content:""; position:absolute; top:0; left:8%; right:8%; height:1px; background:var(--edge); pointer-events:none; }
.price-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 40% at 50% 0%, var(--light), transparent 70%);
}
.price-top,.included,.price-card .btn,.secure{ position:relative; z-index:1; }
.plan{ font-weight:600; font-size:14px; color:var(--muted); }
.price{ margin-top:12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.amount{
  font-weight:700; font-size:clamp(3.5rem,2.6rem + 3vw,5rem); line-height:1; letter-spacing:-.04em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.per{ color:var(--muted); font-weight:500; }
.price-alt{ margin-top:12px; color:var(--muted); }
.price-alt b{ color:var(--ink); font-weight:700; }
.trial{ margin-top:14px; display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--signal-ink); }
.trial::before{ content:""; width:6px; height:6px; background:var(--signal); box-shadow:0 0 0 3px var(--signal-soft); }
.included{ list-style:none; margin:28px 0 30px; padding:26px 0 0; border-top:1px solid var(--line); display:grid; gap:14px; }
.included li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink-2); }
.included .ic{ width:20px; height:20px; margin-top:2px; color:var(--forest); stroke-width:2.2; }
.secure{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; font-size:13px; color:var(--muted); }
.secure svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:960px){ .price-card{ padding:48px 44px 38px; } }

/* ---------- FAQ: hairline rows ---------- */
@media (min-width:960px){
  .faq-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:96px; align-items:start; }
  .faq-wrap .section-head{ position:sticky; top:120px; }
}
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px 0; font-weight:600; font-size:17px; letter-spacing:-.005em; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:0 0 auto; width:30px; height:30px;
  border:1px solid var(--line-strong);
  background:
    linear-gradient(var(--ink),var(--ink)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center / 1.5px 11px no-repeat;
  transition:transform 200ms var(--ease-out), border-color 200ms ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
@media (hover:hover) and (pointer:fine){ .faq summary:hover::after{ border-color:var(--line-hover); } }
.faq details p{ padding:0 54px 26px 0; color:var(--muted); font-size:16px; max-width:40em; }

/* ---------- closing: the one centred moment, lit from above ---------- */
.closing{ position:relative; overflow:hidden; padding:128px 0 136px; text-align:center; border-top:1px solid var(--line); }
.closing::before{
  content:""; position:absolute; left:50%; top:0; width:min(1000px,140%); height:100%; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%, var(--light), transparent 70%);
}
.closing::after{ content:""; position:absolute; top:-1px; left:25%; right:25%; height:1px; background:var(--edge); pointer-events:none; }
.closing .wrap{ position:relative; }
.closing h2{ font-size:clamp(2.25rem,1.2rem + 3.6vw,4.5rem); max-width:14em; margin:0 auto; }
.closing p{ margin:22px auto 36px; max-width:34em; color:var(--muted); font-size:1.125rem; text-wrap:balance; }
.closing .cta-row{ justify-content:center; }
@media (min-width:960px){ .closing{ padding:184px 0 192px; } }

/* ---------- footer ---------- */
.footer{ padding:0 0 32px; color:var(--muted); }
.footer-inner{ display:grid; gap:28px; padding-top:40px; border-top:1px solid var(--line); }
.footer .brand-name{ color:var(--ink); }
.footer-tag{ margin-top:12px; font-size:14px; max-width:28em; }
.footer-links{ display:flex; flex-wrap:wrap; gap:10px 24px; }
.footer-links a{ text-decoration:none; font-weight:500; font-size:14px; }
.footer-links a:hover{ color:var(--ink); }
.footer-bottom{ margin-top:32px; font-size:13px; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.footer-legal a{ text-decoration:none; }
.footer-legal a:hover{ color:var(--ink); }
@media (min-width:860px){ .footer-inner{ grid-template-columns:1fr auto; align-items:start; } }

/* ---------- reduced motion: keep the fades, drop the movement ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .hero > *,.js .device-stage{ animation:appear 400ms ease both; }
  .scroll-cue i::after{ animation:none; opacity:1; }
  .scr,.scr.is-active,.scr.is-past{ transform:none; }
  .frame,.frame.is-on{ transform:none; }
  .fd-list{ transition:none; }
  .js .step:not(.is-leaving) .step-pin,.js .hero{ transform:none !important; } /* the leaving card still follows the scroll */
  .btn:active,.chips button:active{ transform:none; }
}