/* PeakMultitrack — product landing (tour.html).
   Self-contained: only this page loads it, so the legal/support pages keep
   /styles.css untouched. Dark by design (stage app). */
:root{
  color-scheme:dark;
  --bg:#06061a;
  --bg-2:#0b0b26;
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#f6f7fb;
  --text-2:#b4b8d0;
  --text-3:#7d82a3;
  --violet:#7c5cff;
  --blue:#4ba3f5;
  --cyan:#34c6f0;
  --teal:#37e0c8;
  --pink:#ff5fa8;
  --amber:#f5b021;
  --grad:linear-gradient(100deg,#7cf4e0 0%,#4ba3f5 38%,#8f74ff 70%,#ff6fb5 100%);
  --maxw:1200px;
  --gutter:clamp(16px,4.5vw,40px);
  --r-lg:28px;
  --r-md:20px;
  --sec:clamp(72px,11vw,150px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* mobile browsers ignore body overflow-x:hidden when sizing the layout
   viewport; clipping the page regions keeps decorative glows from widening it */
body.lp>main,body.lp>footer,body.lp>header{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body.lp{
  background:var(--bg);color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
.lp-skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 14px;border-radius:10px}
.lp-skip:focus{left:12px}

.lp-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.lp-center{text-align:center;max-width:820px;margin-inline:auto}
.lp-center .lp-lead{margin-inline:auto}

/* ---------- type ---------- */
.lp-display{
  font-size:clamp(44px,8.4vw,108px);line-height:.98;letter-spacing:-.045em;font-weight:900;
  margin:22px auto 22px;max-width:14ch;
}
.lp-h2{font-size:clamp(34px,5.4vw,64px);line-height:1.03;letter-spacing:-.04em;font-weight:850;font-weight:800;margin:14px 0 18px}
.lp-h2-xl{font-size:clamp(40px,7vw,88px)}
.lp-lead{font-size:clamp(17px,1.5vw,20px);color:var(--text-2);max-width:58ch;line-height:1.6}
.grad{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:lp-shimmer 10s ease-in-out infinite alternate;
}
@keyframes lp-shimmer{to{background-position:100% 0}}
.lp-eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.lp-c-blue{color:var(--blue)}.lp-c-amber{color:var(--amber)}.lp-c-teal{color:var(--teal)}.lp-c-pink{color:var(--pink)}.lp-c-violet{color:#a48fff}
.lp-fine{font-size:13px;color:var(--text-3);margin-top:28px}
.lp-note{font-size:14px;color:var(--text-3);margin-top:18px}

.lp-pill{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad) border-box;border:1px solid transparent;
  font-size:14px;font-weight:600;color:#dfe3ff;
}
.lp-pill-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(55,224,200,.18),0 0 14px var(--teal)}

/* ---------- buttons ---------- */
.lp-cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:34px}
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;
  border-radius:16px;font-weight:650;font-weight:600;font-size:16px;transition:transform .2s var(--ease),background .2s,box-shadow .2s;
}
.lp-btn:hover{transform:translateY(-2px)}
.lp-btn-sm{min-height:40px;padding:0 16px;border-radius:12px;font-size:14px}
.lp-btn-light{background:#fff;color:#0a0a1f}
.lp-btn-ghost{background:var(--panel-2);border:1px solid var(--line-2);color:var(--text)}
.lp-btn-ghost:hover{background:rgba(255,255,255,.12)}
.lp-btn-grad{background:var(--grad);color:#07071a;width:100%;margin-top:26px;font-weight:700;box-shadow:0 14px 40px -12px rgba(124,92,255,.7)}
.lp-store{
  display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 24px 0 18px;border-radius:16px;
  background:#fff;color:#000;transition:transform .2s var(--ease),box-shadow .2s;
  box-shadow:0 18px 50px -18px rgba(75,163,245,.8);
}
.lp-store:hover{transform:translateY(-2px);box-shadow:0 22px 60px -16px rgba(124,92,255,.9)}
.lp-store span{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.lp-store small{font-size:11px;font-weight:600;letter-spacing:.02em}
.lp-store strong{font-size:22px;font-weight:700;letter-spacing:-.02em}

/* ---------- nav ---------- */
.lp-nav{position:sticky;top:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.lp-nav.is-scrolled{background:rgba(8,8,28,.72);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom-color:var(--line)}
.lp-nav-inner{display:flex;align-items:center;gap:24px;height:68px}
.lp-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:17px}
.lp-brand img{border-radius:9px;box-shadow:0 4px 14px rgba(55,224,200,.25)}
.lp-links{display:flex;gap:28px;margin-inline:auto;font-size:15px;color:var(--text-2);font-weight:500}
.lp-links a:hover{color:var(--text)}
.lp-nav-end{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.lp-links+.lp-nav-end{margin-inline-start:0}
.lp-lang{position:relative}
.lp-lang summary{
  list-style:none;display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:12px;
  color:var(--text-2);font-size:14px;font-weight:600;text-transform:uppercase;cursor:pointer;border:1px solid var(--line)
}
.lp-lang summary::-webkit-details-marker{display:none}
.lp-lang[open] summary,.lp-lang summary:hover{color:var(--text);background:var(--panel-2)}
.lp-lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;padding:8px;border-radius:16px;background:#12122e;border:1px solid var(--line-2);box-shadow:0 30px 60px -20px #000}
.lp-lang-menu .langbar,.lp-lang-menu .langbar-inner{display:flex;flex-direction:column;padding:0;max-width:none}
.lp-lang-menu .langbar-label{display:none}
.lp-lang-menu .lang-link{display:block;padding:9px 12px;border-radius:10px;color:var(--text-2);font-size:15px}
.lp-lang-menu .lang-link:hover{background:var(--panel-2);color:var(--text)}
.lp-lang-menu .lang-link.is-current{color:var(--teal);font-weight:700}

/* ---------- glows ---------- */
.lp-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;opacity:.75}
.lp-glow-a{width:720px;height:720px;left:-260px;top:-180px;background:radial-gradient(circle,#5b3df5 0%,transparent 65%)}
.lp-glow-b{width:640px;height:640px;right:-220px;top:80px;background:radial-gradient(circle,#13b5d8 0%,transparent 65%);opacity:.55}
.lp-glow-c{width:900px;height:500px;left:50%;top:560px;transform:translateX(-50%);background:radial-gradient(ellipse,#d43f9b 0%,transparent 65%);opacity:.38}
.lp-glow-fold{width:900px;height:700px;left:50%;top:10%;transform:translateX(-50%);background:radial-gradient(ellipse,#2a8cff 0%,#7c5cff 40%,transparent 70%);opacity:.35}
.lp-glow-price{width:800px;height:600px;left:50%;top:30%;transform:translateX(-50%);background:radial-gradient(ellipse,#7c5cff 0%,transparent 65%);opacity:.4}
.lp-glow-final{width:700px;height:500px;left:50%;top:-30%;transform:translateX(-50%);background:radial-gradient(ellipse,#37e0c8 0%,#4ba3f5 40%,transparent 70%);opacity:.45}

/* ---------- hero ---------- */
.lp-hero{position:relative;padding-top:clamp(40px,8vw,90px);overflow:hidden;isolation:isolate}
.lp-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:240px;background:linear-gradient(transparent,var(--bg));z-index:0;pointer-events:none}
.lp-hero-copy{position:relative;z-index:2;text-align:center}
.lp-hero-copy .lp-lead{margin-inline:auto}
.lp-hero-stage{
  position:relative;z-index:2;margin-top:clamp(48px,7vw,90px);
  aspect-ratio:16/8.6;max-width:1120px;
}
.lp-hero-stage .lp-hero-mac{position:absolute;left:50%;top:0;width:72%;transform:translateX(-50%)}
.lp-hero-stage .lp-hero-ipad{position:absolute;left:0;bottom:4%;width:40%}
/* positioning wrapper only: the frame inside is the same .lp-iphone used in the feature rows */
.lp-hero-stage .lp-hero-iphone{position:absolute;right:0;bottom:2%;width:38%}
@keyframes lp-float{50%{translate:0 -12px}}

/* stats row removed: keep a little room so the device shadows are not clipped by the hero overflow */
.lp-hero{padding-bottom:clamp(28px,4vw,56px)}

/* ---------- device frames ----------
   Geometry is taken from the real devices, not eyeballed:
   - screen pixel sizes and corner radii come from the Xcode 27.1 simulators'
     framebuffer masks (iPhone 17 Pro 2622x1206, iPad Pro 13" M5 2752x2064,
     iPhone Duo outer 2034x1398 / inner 2853x2007);
   - body sizes / bezels from Apple's published dimensions (iPhone 17 Pro
     150.0x71.9 mm, iPad Pro 13" 281.6x215.5 mm, MacBook Pro 14" 3024x1964).
   Percent paddings resolve against the frame width, so every bezel scales
   with the device. No Apple bitmap assets are redistributed. */

/* shared: soft studio shadow */
.lp-mac,.lp-ipad,.lp-iphone{--shadow:0 1px 2px rgba(0,0,0,.35),0 12px 24px -8px rgba(0,0,0,.55),0 50px 90px -30px rgba(0,0,0,.85)}

/* ── MacBook Pro 14" (M5) ── */
.lp-mac{position:relative;filter:drop-shadow(0 40px 50px rgba(0,0,0,.55))}
.lp-mac-lid{
  position:relative;padding:1.55% 1.55% 2.1%;
  border-radius:2.6% 2.6% .9% .9% / 4% 4% 1.4% 1.4%;
  background:#050506;
  box-shadow:inset 0 0 0 1px #2c2e34,0 0 0 1.5px #8f939d,0 0 0 2.5px #4d5058;
}
.lp-mac-lid::before{ /* aluminium rim highlight along the top edge */
  content:"";position:absolute;inset:-2.5px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 6%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;
}
.lp-mac-screen{position:relative;overflow:hidden;aspect-ratio:3024/1964;background:#000;border-radius:1.3% 1.3% 0 0 / 2% 2% 0 0}
.lp-mac-screen img{position:absolute;left:0;bottom:0;width:100%;height:auto}
/* full-screen app: the menu-bar band beside the notch stays black */
.lp-mac-notch{position:absolute;z-index:2;left:50%;top:0;width:6.9%;height:3.75%;transform:translateX(-50%);background:#050506;border-radius:0 0 .55vw .55vw}
.lp-mac-notch::after{content:"";position:absolute;left:50%;top:32%;width:9%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3550,#07080c 70%)}
.lp-mac-base{
  position:relative;height:0;padding-bottom:3.1%;margin:0 -6.5%;
  background:linear-gradient(180deg,#e9ebef 0%,#c9ccd3 22%,#a3a7b0 62%,#6c7079 100%);
  border-radius:1px 1px 12% 12% / 1px 1px 100% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.25);
}
.lp-mac-base span{position:absolute;left:50%;top:0;width:13%;height:42%;transform:translateX(-50%);background:linear-gradient(180deg,#8d919b,#c3c6ce);border-radius:0 0 10px 10px / 0 0 100% 100%;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.lp-mac-base::after{content:"";position:absolute;left:3%;right:3%;bottom:-18px;height:20px;background:radial-gradient(ellipse at center,rgba(0,0,0,.65),transparent 70%);filter:blur(5px)}

/* ── iPad Pro 13" (M5), landscape ── */
.lp-ipad{
  position:relative;padding:2.98%;
  border-radius:5.1% / 6.65%;
  background:#060608;
  box-shadow:var(--shadow),0 0 0 1px #0d0e11,0 0 0 2.6px #7c808a,0 0 0 3.4px #3d4048;
}
.lp-ipad::before{ /* landscape front camera (M4/M5 sit on the long edge) */
  content:"";position:absolute;left:50%;top:1.15%;width:.62%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#34405f,#08090d 70%);box-shadow:0 0 0 1px #121318;
}
.lp-ipad::after{ /* top button + volume rocker */
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(#8b8f99,#5a5e67) 86% -4px / 6.5% 4px no-repeat,
    linear-gradient(90deg,#8b8f99,#5a5e67) calc(100% + 4px) 14% / 4px 6% no-repeat,
    linear-gradient(90deg,#8b8f99,#5a5e67) calc(100% + 4px) 23% / 4px 6% no-repeat;
  inset:-4px;
}
.lp-ipad-screen{position:relative;overflow:hidden;aspect-ratio:2752/2064;background:#000;border-radius:2.2% / 2.95%}
.lp-ipad-screen img{width:100%;height:100%;object-fit:cover}

/* ── iPhone 17 Pro, landscape (top of the phone on the left) ── */
.lp-iphone{
  position:relative;padding:1.77%;
  border-radius:8.7% / 18.1%;
  background:#050507;
  box-shadow:var(--shadow),0 0 0 1px #0c0c0f,0 0 0 2.4px #9a9ca4,0 0 0 3.6px #4b4d55;
}
.lp-iphone::before{ /* titanium/aluminium band catching the light */
  content:"";position:absolute;inset:-3.6px;border-radius:calc(8.7% + 2px) / calc(18.1% + 3px);pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,.55),rgba(255,255,255,0) 18%,rgba(255,255,255,0) 70%,rgba(255,255,255,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2.4px;
}
.lp-iphone::after{ /* side buttons: power + Camera Control (top edge), Action + volume (bottom edge) */
  content:"";position:absolute;inset:-4px;pointer-events:none;
  background:
    linear-gradient(#a4a6ad,#5d5f66) 27% 0 / 7.5% 3px no-repeat,
    linear-gradient(#a4a6ad,#5d5f66) 62% 0 / 5.5% 3px no-repeat,
    linear-gradient(#5d5f66,#a4a6ad) 15% 100% / 3.6% 3px no-repeat,
    linear-gradient(#5d5f66,#a4a6ad) 23.5% 100% / 6.2% 3px no-repeat,
    linear-gradient(#5d5f66,#a4a6ad) 32% 100% / 6.2% 3px no-repeat;
}
.lp-iphone-screen{position:relative;overflow:hidden;aspect-ratio:2622/1206;background:#000;border-radius:7.2% / 15.6%}
.lp-iphone-screen img{width:100%;height:100%;object-fit:cover}
.lp-island{position:absolute;z-index:2;left:1.26%;top:50%;width:4.23%;height:31.3%;transform:translateY(-50%);background:#000;border-radius:999px}
.lp-island::after{content:"";position:absolute;left:50%;top:19%;width:52%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#26304a,#030305 70%)}

/* glass highlight on every screen */

.lp-mac-screen::after,.lp-ipad-screen::after,.lp-iphone-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%);
}
.lp-ipad-screen{position:relative}

/* ---------- sections ---------- */
.lp-section{position:relative;padding-block:var(--sec)}
.lp-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.lp-row{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,6vw,90px);align-items:center}
.lp-row+.lp-row{margin-top:clamp(90px,12vw,170px)}
.lp-row-rev{grid-template-columns:1.25fr 1fr}
.lp-row-rev .lp-copy{order:2}
.lp-visual{position:relative}
.lp-visual>*:not(.lp-visual-glow){position:relative;z-index:1}
.lp-visual-glow{position:absolute;inset:-12% -8%;filter:blur(70px);opacity:.55;z-index:0;border-radius:50%}
.lp-g-blue{background:radial-gradient(circle,#2a7cff,transparent 65%)}
.lp-g-amber{background:radial-gradient(circle,#f08a1c,transparent 65%);opacity:.4}
.lp-g-teal{background:radial-gradient(circle,#19c6b0,transparent 65%)}
.lp-g-pink{background:radial-gradient(circle,#e3459a,transparent 65%);opacity:.45}
.lp-g-violet{background:radial-gradient(circle,#7c5cff,transparent 65%)}

.lp-points{display:grid;gap:12px;margin-top:26px}
.lp-points li{display:flex;gap:12px;align-items:flex-start;color:var(--text);font-size:16px;line-height:1.45}
.lp-points svg{flex:0 0 auto;width:26px;height:26px;padding:4px;border-radius:50%;color:#07071a;background:var(--grad);margin-top:-2px}

.lp-stems{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.lp-stems li{padding:6px 12px 6px 10px;border-radius:999px;font-size:13px;font-weight:600;background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);display:flex;align-items:center;gap:7px}
.lp-stems li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}

/* ---------- story / character ---------- */
.lp-story{overflow:hidden}
.lp-art{position:relative;max-width:620px;margin-inline:auto;width:100%}
.lp-art-svg{width:100%;height:auto;overflow:visible}
.lp-chip{
  position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;
  background:rgba(22,22,52,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);font-size:14px;font-weight:650;font-weight:600;white-space:nowrap;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.8);animation:lp-float 6s ease-in-out infinite;
}
.lp-chip i{width:10px;height:10px;border-radius:3px;display:block}
.lp-chip b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--blue);color:#fff;font-size:12px}
.lp-chip svg{color:var(--teal)}
.lp-chip-1{left:2%;top:10%}
.lp-chip-2{right:0;top:2%;animation-delay:-2s}
.lp-chip-3{left:10%;bottom:20%;animation-delay:-4s}

.lp-devices-head{text-align:left}
.lp-art-sm{max-width:520px}

/* ---------- foldable ---------- */
.lp-fold{overflow:hidden;isolation:isolate}
.lp-fold .lp-wrap{position:relative;z-index:1}
.lp-seg{display:inline-flex;padding:5px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line-2);margin-top:30px}
.lp-seg-btn{min-height:42px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;color:var(--text-2);transition:background .25s,color .25s}
.lp-seg-btn[aria-pressed="true"]{background:#fff;color:#07071a}
.lp-duo-stage{display:flex;justify-content:center;margin-top:clamp(40px,6vw,70px)}
.lp-duo{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;margin:0}
/* 3D fold. The scene is a fixed box sized to the OPEN device (inner screen
   aspect), so nothing around it moves while the device folds. The device is
   two halves: the left one is fixed, the right one (the flap) rotates on the
   centre hinge. Its back face is the outer screen. Folded, the stack is turned
   90deg so the outer screen reads landscape, exactly like the simulator: the
   inner screen's halves are portrait, the outer display sits on one of them.
   All sizes are in cqw (scene width) so the model scales from 860px to 343px. */
.lp-duo-scene{
  /* Geometry from Xcode's "iPhone Duo" device profile (capabilities.plist):
     inner display 669x951pt, corners 55pt all round; outer display 466x678pt,
     corners 59pt on the opening side and 8pt on the hinge side (UL/LL 8,
     UR/LR 59 with the hinge on the left of the portrait outer screen).
     Scale: the open inner glass is 100cqw - 2*bezel = 97.3cqw wide = 951pt,
     so 1pt = 0.1023cqw. Body radii are the display radii plus the bezel. */
  --t:1.3cqw;            /* thickness of one half */
  --p:1.35cqw;           /* black-glass bezel (~13pt) */
  --rg:5.63cqw;          /* inner display corner, 55pt */
  --r:6.98cqw;           /* body corner around it */
  --ro:6.04cqw;          /* outer display, opening side, 59pt */
  --rob:7.39cqw;         /* body, opening side */
  --rh:.82cqw;           /* outer display, hinge side, 8pt */
  --rhb:2.17cqw;         /* body, hinge side */
  --ease-open:cubic-bezier(.32,1.22,.42,1);
  --ease-fold:cubic-bezier(.5,0,.25,1.08);
  container-type:inline-size;
  position:relative;width:min(860px,100%);aspect-ratio:1426/1003;
  perspective:2100px;perspective-origin:50% 40%;
  view-transition-name:lp-duo;
}
.lp-duo-device{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform-origin:25% 50%;transform:translateX(0) rotateZ(0deg);
}
.lp-duo-face{
  position:absolute;inset:0;overflow:hidden;background:#050507;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.lp-duo-left{right:50%;border-radius:var(--r) 0 0 var(--r);transition:border-radius .5s var(--ease)}
/* aluminium band on three sides only: the ring is drawn on a layer that runs
   past the hinge edge, where the face's overflow clips it, so no metal line
   ever appears down the middle of the inner screen */
.lp-duo-left::before,.lp-duo-front::before{content:"";position:absolute;top:0;bottom:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px #0c0c0f,inset 0 0 0 .32cqw #8e9098,inset 0 0 0 .5cqw #3f4148}
.lp-duo-left::before{left:0;right:-3cqw}
.lp-duo-front::before{left:-3cqw;right:0}
.lp-duo-flap{
  position:absolute;top:0;bottom:0;left:50%;width:50%;
  transform-style:preserve-3d;transform-origin:0 50%;transform:rotateY(0deg);
}
.lp-duo-front{border-radius:0 var(--r) var(--r) 0}
.lp-duo-back{ /* local right = hinge edge once folded (the two mirrors cancel) */
  border-radius:var(--rob) var(--rhb) var(--rhb) var(--rob);transform:translateZ(calc(var(--t) * -1)) rotateY(180deg);
  box-shadow:inset 0 0 0 1px #0c0c0f,inset 0 0 0 .32cqw #a2a4ac,inset 0 0 0 .5cqw #45474e;
}
/* the aluminium band around each half: drawn as an inset ring so it stays on the
   face when it rotates; the free edge of the flap also gets a real side plane */
.lp-duo-edge{
  position:absolute;top:var(--r);bottom:var(--r);right:0;width:var(--t);
  transform-origin:100% 50%;transform:rotateY(-90deg);
  background:linear-gradient(90deg,#2d2f34,#9a9da5 22%,#e8e9ed 48%,#8b8e96 74%,#2a2c30);
}
.lp-duo-hinge{ /* spine: hidden behind the screens when open, a polished bar when folded */
  position:absolute;left:calc(50% - var(--t) * .75);width:calc(var(--t) * 1.5);top:var(--rhb);bottom:var(--rhb);
  border-radius:calc(var(--t) * .75);transform:translateZ(-1px);
  background:linear-gradient(90deg,#26282c,#7d8088 18%,#d9dbe0 46%,#f6f7f9 52%,#868991 78%,#232529);
}
.lp-duo-glass{position:absolute;overflow:hidden;background:#000}
.lp-duo-left .lp-duo-glass{inset:var(--p) 0 var(--p) var(--p);border-radius:var(--rg) 0 0 var(--rg)}
.lp-duo-front .lp-duo-glass{inset:var(--p) var(--p) var(--p) 0;border-radius:0 var(--rg) var(--rg) 0}
.lp-duo-back .lp-duo-glass{inset:var(--p);border-radius:var(--ro) var(--rh) var(--rh) var(--ro);container-type:size}
/* one inner screenshot spans both halves */
.lp-duo-left .lp-duo-glass img,.lp-duo-front .lp-duo-glass img{position:absolute;top:0;width:200%;max-width:none;height:100%;object-fit:cover}
.lp-duo-left .lp-duo-glass img{left:0}
.lp-duo-front .lp-duo-glass img{left:-100%}
/* the crease: a soft valley either side of the hinge */
/* crease: only exists while the halves are at an angle (keyframes below) */
.lp-duo-left .lp-duo-glass::after,.lp-duo-front .lp-duo-glass::after{content:"";position:absolute;top:0;bottom:0;width:1.1cqw;pointer-events:none;opacity:0}
.lp-duo-left .lp-duo-glass::after{right:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05) 60%,rgba(0,0,0,.35))}
.lp-duo-front .lp-duo-glass::after{left:0;background:linear-gradient(270deg,transparent,rgba(255,255,255,.05) 60%,rgba(0,0,0,.35))}
/* outer screen: landscape content in a portrait half, pre-rotated against the
   device turn so it reads upright when folded */
.lp-duo-outer{position:absolute;left:50%;top:50%;width:100cqh;height:100cqw;transform:translate(-50%,-50%) rotate(-90deg)}
.lp-duo-outer img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
/* Dynamic Island (126x37pt, 11pt in): the profile's portrait top is on the left
   of this landscape view, which is also where the screenshot keeps its safe inset */
.lp-duo-cam{position:absolute;left:1.62%;top:50%;width:5.5%;height:27%;transform:translateY(-50%);border-radius:999px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.lp-duo-cam::after{content:"";position:absolute;left:50%;bottom:9%;width:58%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 38% 38%,#24304c,#05060a 62%)}
/* settled-open layer: the whole inner screenshot as ONE flat image above the
   two halves, so the open display has no seam at all. Hidden instantly when a
   fold starts, faded back in only after the flap has settled. */
.lp-duo-whole{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:#050507;pointer-events:none;
  box-shadow:inset 0 0 0 1px #0c0c0f,inset 0 0 0 .32cqw #8e9098,inset 0 0 0 .5cqw #3f4148}
.lp-duo-whole .lp-duo-glass{inset:var(--p);border-radius:var(--rg)}
.lp-duo-whole img{width:100%;height:100%;object-fit:cover}
.lp-duo-stage[data-state="open"] .lp-duo-whole{transition:opacity .18s linear .95s}
.lp-duo-stage[data-state="closed"] .lp-duo-whole{opacity:0;transition:none}
.lp-duo-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,0,.85),rgba(0,0,0,.35))}
.lp-duo-front .lp-duo-shade{background:linear-gradient(270deg,rgba(0,0,0,.9),rgba(0,0,0,.3) 70%,rgba(255,255,255,.08))}
.lp-duo-left .lp-duo-shade{background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.75))}
/* ground shadow: follows the footprint, spreads while the flap is lifted */
.lp-duo-shadow{
  position:absolute;left:3%;right:3%;top:10%;bottom:-4%;border-radius:8%;
  background:rgba(0,0,0,.78);filter:blur(clamp(14px,3.4cqw,34px));opacity:.85;
}
/* -------- folded state -------- */
.lp-duo-stage[data-state="closed"] .lp-duo-device{transform:translateX(25%) rotateZ(90deg)}
.lp-duo-stage[data-state="closed"] .lp-duo-flap{transform:rotateY(-180deg)}
.lp-duo-stage[data-state="closed"] .lp-duo-left{border-radius:var(--rob) var(--rhb) var(--rhb) var(--rob)}
.lp-duo-stage[data-state="closed"] .lp-duo-shadow{left:17%;right:17%;top:21%;bottom:9%;opacity:.7}
/* -------- timing: the destination state owns the transition, so each
   direction gets its own choreography (open: turn, then unfold; fold: fold,
   then turn) -------- */
.lp-duo-stage[data-state="open"] .lp-duo-device{transition:transform .62s var(--ease-open)}
.lp-duo-stage[data-state="open"] .lp-duo-flap{transition:transform .82s var(--ease-open) .1s}
.lp-duo-stage[data-state="open"] .lp-duo-shadow{transition:left .8s var(--ease-open),right .8s var(--ease-open),top .8s var(--ease-open),bottom .8s var(--ease-open),opacity .8s}
.lp-duo-stage[data-state="closed"] .lp-duo-flap{transition:transform .72s var(--ease-fold)}
.lp-duo-stage[data-state="closed"] .lp-duo-device{transition:transform .6s var(--ease-open) .3s}
.lp-duo-stage[data-state="closed"] .lp-duo-shadow{transition:left .7s var(--ease) .2s,right .7s var(--ease) .2s,top .7s var(--ease) .2s,bottom .7s var(--ease) .2s,opacity .7s .2s}
/* during a move (data-anim is set by the toggle; the keyframe name changes with
   the state so the animation restarts on every switch) */
.lp-duo-stage[data-anim][data-state="open"] .lp-duo-glass::after{animation:lp-duo-crease-o .9s ease-out both}
.lp-duo-stage[data-anim][data-state="closed"] .lp-duo-glass::after{animation:lp-duo-crease-c .5s ease-out both}
.lp-duo-stage[data-anim][data-state="open"] .lp-duo-glass img{animation:lp-duo-dim-o .9s ease-out both}
.lp-duo-stage[data-anim][data-state="closed"] .lp-duo-glass img{animation:lp-duo-dim-c .9s ease-out both}
.lp-duo-stage[data-anim][data-state="open"] .lp-duo-shade{animation:lp-duo-shade-o .9s ease-out both}
.lp-duo-stage[data-anim][data-state="closed"] .lp-duo-shade{animation:lp-duo-shade-c .8s ease-in-out both}
.lp-duo-stage[data-anim][data-state="open"] .lp-duo-device{animation:lp-duo-dip-o .9s cubic-bezier(.3,.7,.3,1)}
.lp-duo-stage[data-anim][data-state="closed"] .lp-duo-device{animation:lp-duo-dip-c .9s cubic-bezier(.3,.7,.3,1)}
.lp-duo-stage[data-anim][data-state="open"] .lp-duo-shadow{animation:lp-duo-lift-o .9s ease-out}
.lp-duo-stage[data-anim][data-state="closed"] .lp-duo-shadow{animation:lp-duo-lift-c .9s ease-out}
.lp-duo-stage[data-anim][data-state="open"] .lp-duo-hinge,.lp-duo-stage[data-anim][data-state="open"] .lp-duo-edge{animation:lp-duo-glint-o .9s ease-out}
.lp-duo-stage[data-anim][data-state="closed"] .lp-duo-hinge,.lp-duo-stage[data-anim][data-state="closed"] .lp-duo-edge{animation:lp-duo-glint-c .9s ease-out}
@keyframes lp-duo-dim-o{0%{filter:none}40%{filter:blur(1.6px) brightness(.55) saturate(.8)}100%{filter:none}}
@keyframes lp-duo-dim-c{0%{filter:none}40%{filter:blur(1.6px) brightness(.55) saturate(.8)}100%{filter:none}}
@keyframes lp-duo-shade-o{0%{opacity:.9}45%{opacity:.75}100%{opacity:0}}
@keyframes lp-duo-shade-c{0%{opacity:0}55%{opacity:.8}100%{opacity:0}}
@keyframes lp-duo-lift-o{45%{transform:scale(1.07) translateY(4%);opacity:.55}}
@keyframes lp-duo-lift-c{40%{transform:scale(1.07) translateY(4%);opacity:.55}}
/* pull back slightly while the device turns so its diagonal stays inside the scene */
@keyframes lp-duo-dip-o{35%{scale:.84}}
@keyframes lp-duo-dip-c{65%{scale:.84}}
@keyframes lp-duo-glint-o{50%{filter:brightness(1.45)}}
@keyframes lp-duo-glint-c{50%{filter:brightness(1.45)}}
@keyframes lp-duo-crease-o{0%,55%{opacity:1}100%{opacity:0}}
@keyframes lp-duo-crease-c{0%{opacity:0}40%,100%{opacity:1}}
@keyframes lp-duo-fade-a{from{opacity:0}to{opacity:1}}
@keyframes lp-duo-fade-b{from{opacity:0}to{opacity:1}}
.lp-duo figcaption{font-size:14px;color:var(--text-2);font-weight:500;text-align:center}
.lp-cap-closed{display:none}
.lp-duo-stage[data-state="closed"] .lp-cap-closed{display:inline}
.lp-duo-stage[data-state="closed"] .lp-cap-open{display:none}
@media (max-width:560px){.lp-duo-scene{perspective:1000px}}

/* ---------- devices switcher ---------- */
.lp-device-tabs{display:flex;justify-content:center;gap:6px;margin:34px auto 0;padding:5px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line-2);width:max-content;max-width:100%}
.lp-tab{min-height:42px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;color:var(--text-2);transition:background .25s,color .25s}
.lp-tab[aria-selected="true"]{background:#fff;color:#07071a}
.lp-device-stage{position:relative;display:grid;place-items:center;margin-top:clamp(40px,6vw,64px);min-height:clamp(240px,48vw,620px)}
.lp-dev{grid-area:1/1;width:100%;display:flex;justify-content:center;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none}
.lp-dev-iphone>*{width:min(820px,100%)}
.lp-dev-ipad>*{width:min(760px,100%)}
.lp-dev-mac>*{width:min(900px,88%)}
.lp-device-stage[data-device="iphone"] .lp-dev-iphone,
.lp-device-stage[data-device="ipad"] .lp-dev-ipad,
.lp-device-stage[data-device="mac"] .lp-dev-mac{opacity:1;transform:none;pointer-events:auto}

/* ---------- bento ---------- */
.lp-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(40px,6vw,64px)}
.lp-tile{
  position:relative;overflow:hidden;padding:28px 26px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line);
  transition:transform .35s var(--ease),border-color .3s;
}
.lp-tile:hover{transform:translateY(-4px);border-color:var(--line-2)}
.lp-tile::before{content:"";position:absolute;width:220px;height:220px;right:-80px;top:-90px;border-radius:50%;filter:blur(40px);opacity:.5;background:var(--tc,#7c5cff)}
.lp-tile h3{font-size:20px;letter-spacing:-.02em;margin:18px 0 8px;position:relative}
.lp-tile p{font-size:15px;color:var(--text-2);line-height:1.5;position:relative}
.lp-tile-icon{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;color:#fff;background:var(--tc,#7c5cff);box-shadow:0 10px 30px -8px var(--tc,#7c5cff)}
.lp-tile-1{grid-column:span 2;--tc:#4ba3f5}
.lp-tile-2{grid-column:span 2;--tc:#2ebd85}
.lp-tile-3{--tc:#f5a524}
.lp-tile-4{--tc:#17b3c9}
.lp-tile-5{--tc:#7c5cff}
.lp-tile-6{--tc:#ff5fa8}
.lp-tile-7{grid-column:span 2;--tc:#596080}
.lp-tile-8{grid-column:span 2;--tc:#e83b33}

/* ---------- pricing ---------- */
.lp-pricing{overflow:hidden;isolation:isolate}
.lp-pricing .lp-wrap{position:relative;z-index:1}
.lp-plans{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;max-width:880px;margin:clamp(40px,6vw,64px) auto 0;align-items:stretch}
.lp-plan{position:relative;padding:34px 30px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line)}
.lp-plan h3{font-size:18px;color:var(--text-2);font-weight:600}
.lp-price{display:flex;align-items:baseline;gap:10px;margin-top:10px;flex-wrap:wrap}
.lp-price strong{font-size:clamp(44px,5vw,60px);font-weight:850;font-weight:800;letter-spacing:-.04em;line-height:1}
.lp-price span{color:var(--text-3);font-size:14px}
.lp-plan-pro{background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad) border-box;border:1.5px solid transparent;box-shadow:0 40px 90px -40px rgba(124,92,255,.8)}
.lp-plan-pro h3{color:var(--text)}
.lp-badge{position:absolute;top:-13px;right:24px;padding:5px 12px;border-radius:999px;background:var(--grad);color:#07071a;font-size:12px;font-weight:700;letter-spacing:.04em}

/* ---------- FAQ ---------- */
.lp-faq{max-width:860px}
.lp-faq-list{margin-top:clamp(36px,5vw,56px);display:grid;gap:12px}
.lp-faq-item{border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);transition:background .3s,border-color .3s}
.lp-faq-item[open]{background:var(--panel-2);border-color:var(--line-2)}
.lp-faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;cursor:pointer;font-size:18px;font-weight:600;letter-spacing:-.01em}
.lp-faq-item summary::-webkit-details-marker{display:none}
.lp-faq-item summary svg{flex:0 0 auto;color:var(--text-3);transition:transform .3s var(--ease)}
.lp-faq-item[open] summary svg{transform:rotate(180deg);color:var(--teal)}
.lp-faq-a{padding:0 24px 22px;color:var(--text-2);font-size:16px}

/* ---------- final CTA ---------- */
.lp-final-card{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;padding:clamp(48px,8vw,96px) var(--gutter);
  border-radius:clamp(28px,4vw,44px);background:linear-gradient(160deg,#121236,#0a0a22);border:1px solid var(--line-2);
}
/* the glow must stay absolute: a blanket position:relative on children
   turned it into a 500px in-flow block above the icon */
.lp-final-card>*:not(.lp-glow){position:relative;z-index:1}
.lp-final-card>.lp-glow{z-index:0}
.lp-final-card .lp-lead{margin-inline:auto}
.lp-final-icon{margin:0 auto 10px;border-radius:24px;box-shadow:0 20px 60px -10px rgba(55,224,200,.55)}
.lp-beta-link{display:inline-block;margin-top:22px;color:var(--teal);font-weight:600;font-size:15px}
.lp-beta-link:hover{text-decoration:underline}

/* ---------- footer ---------- */
.lp-footer{border-top:1px solid var(--line);padding-block:48px 56px;margin-top:20px}
.lp-footer-inner{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:32px;align-items:start}
.lp-footer-brand p{color:var(--text-3);font-size:14px;margin-top:12px}
.lp-footer-links{display:grid;gap:10px;font-size:15px;color:var(--text-2)}
.lp-footer-links a:hover,.lp-footer-meta a:hover{color:var(--text)}
.lp-footer-meta{display:grid;gap:8px;font-size:14px;color:var(--text-3)}
.lp-footer-meta a{color:var(--text-2)}
.lp-totop{margin-top:6px}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .lp-links{display:none}
  .lp-links+.lp-nav-end{margin-inline-start:auto}
  .lp-bento{grid-template-columns:repeat(2,1fr)}
  .lp-tile-1,.lp-tile-2,.lp-tile-7,.lp-tile-8{grid-column:span 2}
}
@media (max-width:860px){
  .lp-split,.lp-row,.lp-row-rev{grid-template-columns:1fr}
  .lp-row-rev .lp-copy{order:0}
  .lp-copy{text-align:left}
  .lp-hero-stage{aspect-ratio:16/11}
  .lp-hero-stage .lp-hero-mac{width:86%}
  .lp-hero-stage .lp-hero-ipad{width:48%;bottom:0}
  .lp-hero-stage .lp-hero-iphone{width:46%;bottom:0}
  .lp-plans{grid-template-columns:1fr}
  .lp-footer-inner{grid-template-columns:1fr}
}
@media (max-width:560px){
  body.lp{font-size:16px}
  .lp-nav-inner{height:60px;gap:12px}
  .lp-brand span{display:none}
  .lp-bento{grid-template-columns:1fr}
  .lp-tile-1,.lp-tile-2,.lp-tile-7,.lp-tile-8{grid-column:auto}
  .lp-chip{font-size:12px;padding:8px 10px}
  .lp-chip-3{display:none}
  .lp-store strong{font-size:20px}
  .lp-cta-row .lp-btn-ghost{width:100%}
  .lp-faq-item summary{font-size:16px;padding:18px}
  .lp-faq-a{padding:0 18px 18px}
  .lp-mac-lid{padding:1.8% 1.8% 2.2%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  /* no 3D fold: the state swaps in place and the device crossfades (View
     Transitions when available, otherwise a short fade-in of the new state) */
  .lp-duo-stage[data-fade="a"] .lp-duo-scene{animation:lp-duo-fade-a .35s ease-out!important}
  .lp-duo-stage[data-fade="b"] .lp-duo-scene{animation:lp-duo-fade-b .35s ease-out!important}
}
::view-transition-old(lp-duo),::view-transition-new(lp-duo){animation-duration:.35s}

/* === AI illustrations (story + devices sections) ===
   Raster art from public/landing/art/ replaces the inline SVG characters.
   Edges are already alpha-faded in the WebP, so it melts into --bg. */
.lp-ai-art{display:block;width:100%;height:auto;border-radius:0;user-select:none;-webkit-user-drag:none}
.lp-art:has(.lp-ai-art)::before{
  content:"";position:absolute;inset:8% 6%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 28%,transparent),transparent);
  filter:blur(30px);pointer-events:none;
}
.lp-art:has(.lp-ai-stage){isolation:isolate}
.lp-art:has(.lp-ai-stage) .lp-chip-1{left:38%;top:5%}
.lp-art:has(.lp-ai-stage) .lp-chip-2{left:auto;right:0;top:20%}
.lp-art:has(.lp-ai-stage) .lp-chip-3{left:auto;right:2%;bottom:8%}
.lp-art-sm:has(.lp-ai-devices){max-width:560px;isolation:isolate}
@media (max-width:560px){
  .lp-art:has(.lp-ai-stage) .lp-chip{font-size:12px;padding:7px 10px;gap:6px}
  .lp-art:has(.lp-ai-stage) .lp-chip-1{left:30%;top:3%}
  .lp-art:has(.lp-ai-stage) .lp-chip-2{top:17%}
}
@media (prefers-reduced-motion:reduce){
  .lp-art:has(.lp-ai-art) .lp-chip{animation:none}
}