/* ============================================================================ SPICE LABS — web design system. The world is the one the Lifty app page already established: a black field lifted by a soft neutral wash, glass surfaces, white as the single action colour, and real iPhones photographed in three dimensions. Colour belongs to the product — each app carries one accent, and the chrome around it stays black and white. ========================================================================= */ :root{ color-scheme:dark; /* Field — flat black, lifted only by a faint neutral wash */ --field-1:#0a0a0b; --field-2:#000; --field-edge:#000; /* Action colour — white is the one "do this" signal */ --accent:#fff; --on-accent:#000; /* Per-app accent. Set on ; neutral white until an app sets it. */ --app:#fff; --app-soft:rgba(255,255,255,.12); /* Ink — neutral white, no cast */ --ink:#f4f4f5; --ink-2:rgba(244,244,245,.64); --ink-3:rgba(244,244,245,.56); /* 5.9:1 on black — it carries 13.5px text */ --ink-faint:rgba(244,244,245,.10); /* Glass — white alpha over black reads as neutral graphite */ --glass:rgba(255,255,255,.04); --glass-2:rgba(255,255,255,.075); --glass-line:rgba(255,255,255,.09); --glass-line-2:rgba(255,255,255,.17); --r-field:10px; --r-tile:18px; --r-card:22px; --r-pill:9999px; --s-xs:4px; --s-s:8px; --s-m:12px; --s-l:16px; --s-xl:24px; --s-2xl:32px; --s-3xl:48px; --s-4xl:72px; --s-5xl:112px; --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text", system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --ease-out:cubic-bezier(.22,1,.36,1); --ease-out-soft:cubic-bezier(.16,1,.3,1); --z-nav:200; --maxw:1180px; } *{box-sizing:border-box} [hidden]{display:none !important} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#000} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;min-height:100vh; font-family:var(--font);font-size:16px;line-height:1.5; color:var(--ink);background:var(--field-edge); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:clip; } h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.025em;line-height:1.04} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} ::selection{background:rgba(255,255,255,.22);color:#fff} :focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:6px} .skip{position:absolute;left:16px;top:-100px;z-index:999;background:#fff;color:#000; padding:10px 16px;border-radius:var(--r-pill);font-weight:600} .skip:focus{top:16px} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* --- The field ---------------------------------------------------------- */ .field{ position:fixed;inset:0;z-index:-1;overflow:hidden; background:radial-gradient(118% 90% at 50% -8%, #17171a 0%, var(--field-1) 30%, #030304 62%, var(--field-edge) 100%); } .field::before,.field::after{ content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5; } .field::before{ width:52vw;height:52vw;left:-12vw;top:-14vw; background:radial-gradient(circle, rgba(255,255,255,.09), transparent 68%); animation:drift-a 26s ease-in-out infinite alternate; } .field::after{ width:46vw;height:46vw;right:-14vw;top:26vh; background:radial-gradient(circle, rgba(255,255,255,.055), transparent 70%); animation:drift-b 34s ease-in-out infinite alternate; } @keyframes drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.14)}} @keyframes drift-b{from{transform:translate(0,0) scale(1)}to{transform:translate(-8vw,-5vh) scale(1.16)}} @media (prefers-reduced-motion:reduce){.field::before,.field::after{animation:none}} /* --- Layout ------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,32px)} .section{padding-block:clamp(48px,8vw,104px)} .glass{ background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-card); backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%); } /* --- Type --------------------------------------------------------------- */ .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase; color:var(--ink-2); } .eyebrow::before{ content:"";width:6px;height:6px;border-radius:50%; background:var(--app);box-shadow:0 0 12px 1px color-mix(in srgb, var(--app) 70%, transparent); } .lead{ font-size:clamp(1.05rem,.9rem + .7vw,1.3rem);line-height:1.5; color:var(--ink-2);text-wrap:pretty;max-width:56ch; } .sec-head{max-width:62ch;margin-inline:auto;text-align:center} .sec-head h2{margin-top:12px;font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);font-weight:700;letter-spacing:-.03em} .sec-head .lead{margin:var(--s-l) auto 0} /* --- Buttons ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:12px 20px;border-radius:var(--r-pill); font-size:15px;font-weight:600;letter-spacing:-.01em; border:1px solid transparent; transition:transform .25s var(--ease-out),background .25s var(--ease-out), border-color .25s var(--ease-out),opacity .25s var(--ease-out); } .btn:active{transform:scale(.975)} .btn-lg{padding:15px 26px;font-size:16px} .btn-primary{background:var(--accent);color:var(--on-accent)} .btn-primary:hover{background:#e9e9ec} .btn-glass{background:var(--glass-2);color:var(--ink);border-color:var(--glass-line-2)} .btn-glass:hover{background:rgba(255,255,255,.12)} .btn-ghost{color:var(--ink-2);border-color:var(--glass-line)} .btn-ghost:hover{color:var(--ink);border-color:var(--glass-line-2)} .btn[aria-disabled="true"]{background:var(--glass-2);color:var(--ink-2); border-color:var(--glass-line);cursor:default} .btn[aria-disabled="true"]:hover{background:var(--glass-2)} .btn[aria-disabled="true"]:active{transform:none} .app-store svg{flex:none} .arrow-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--ink)} .arrow-link svg{transition:transform .25s var(--ease-out)} .arrow-link:hover svg{transform:translateX(4px)} /* --- Nav ---------------------------------------------------------------- */ .nav{position:sticky;top:0;z-index:var(--z-nav);border-bottom:1px solid transparent; transition:background .3s var(--ease-out),border-color .3s var(--ease-out)} .nav.scrolled{background:rgba(0,0,0,.72);border-bottom-color:var(--glass-line); backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)} .nav-inner{display:flex;align-items:center;gap:var(--s-l);height:64px} .brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:16px} .brand .mark{width:26px;height:26px;flex:none} .nav-links{display:flex;align-items:center;gap:var(--s-xl);margin-left:auto} .nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);transition:color .2s var(--ease-out)} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)} .nav-cta{display:flex;align-items:center;gap:var(--s-m);margin-left:var(--s-l)} .nav-toggle{display:none;margin-left:auto;padding:8px;border-radius:var(--r-field);color:var(--ink)} @media (max-width:820px){ .nav-toggle{display:inline-flex} .nav-menu{ position:absolute;left:0;right:0;top:100%; display:none;flex-direction:column;gap:var(--s-l); padding:var(--s-xl) clamp(20px,5vw,32px) var(--s-2xl); background:rgba(6,6,7,.97);border-bottom:1px solid var(--glass-line); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); } .nav-menu.open{display:flex} .nav-links{flex-direction:column;align-items:flex-start;gap:var(--s-l);margin-left:0} .nav-links a{font-size:17px} .nav-cta{margin-left:0;flex-direction:column;align-items:stretch} } @media (min-width:821px){ .nav-menu{display:contents} } /* --- The device --------------------------------------------------------- */ /* A real iPhone: titanium rail, thin uniform bezel, side buttons. Captures are native device grabs, so the screen holds their exact ratio and nothing crops. */ .ashot{perspective:1500px} .device{ position:relative;width:min(300px,78vw); border-radius:15% / 7.3%;padding:2.7%; background:linear-gradient(145deg,#444954 0%,#191b22 20%,#272a33 50%,#14161c 80%,#3c414b 100%); box-shadow:0 46px 94px -34px rgba(0,0,0,.78), inset 0 0 0 1px rgba(255,255,255,.12); transition:transform .5s var(--ease-out-soft); will-change:transform; } .device-screen{ position:relative;width:100%; /* Every capture on the site is a native device grab, so the screen holds the capture's own ratio and nothing is cropped. */ aspect-ratio:1320 / 2868; border-radius:12.2% / 5.9%; background:#000;overflow:hidden; box-shadow:inset 0 0 0 1.5px #05070c, inset 0 0 0 3px #23262f; } .device-screen img{width:100%;height:100%;object-fit:cover} .device-screen::after{ /* faint diagonal screen gloss */ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit; background:linear-gradient(122deg,rgba(255,255,255,.10),transparent 30%,transparent 84%,rgba(255,255,255,.05)); } .dev-btn{position:absolute;z-index:1;border-radius:2px;background:linear-gradient(90deg,#0f1116,#3c414b)} .dev-silent{left:-1.5px;top:15%;width:3px;height:3.2%} .dev-volup{left:-1.5px;top:22.5%;width:3px;height:6.6%} .dev-voldn{left:-1.5px;top:31%;width:3px;height:6.6%} .dev-power{right:-1.5px;top:25%;width:3px;height:10%} .tilt-r .device{transform:rotateY(-17deg) rotateX(4deg) rotateZ(1.5deg)} .tilt-l .device{transform:rotateY(17deg) rotateX(4deg) rotateZ(-1.5deg)} .tilt-r:hover .device,.tilt-l:hover .device{transform:none} /* Apple Watch — Lifty ships one, so it gets its own frame. */ .watch{ position:relative;width:min(168px,44vw); border-radius:30%;padding:3.6%; background:linear-gradient(145deg,#4a4f5a 0%,#1c1e25 22%,#2b2e37 52%,#16181e 80%,#40454f 100%); box-shadow:0 34px 66px -28px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.13); } .watch-screen{aspect-ratio:416 / 496;border-radius:24.5%;overflow:hidden;background:#000} .watch-screen img{width:100%;height:100%;object-fit:cover} .watch-crown{position:absolute;right:-2px;top:31%;width:3.5px;height:12%;border-radius:0 2px 2px 0; background:linear-gradient(270deg,#0f1116,#454a55)} /* Soft halo behind the phones, tinted by the app's accent. */ .glow{ position:absolute;inset:6% 8%;z-index:-1;filter:blur(62px); background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--app) 34%, transparent), transparent 66%); } .glow-sm{inset:10% 4%;filter:blur(56px)} .glow-wide{inset:12% -6%;filter:blur(80px)} /* --- Hero --------------------------------------------------------------- */ .hero{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(32px,5vw,72px)} .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center} .hero-copy h1{ margin-top:14px; font-size:clamp(2.5rem,1.6rem + 3.9vw,4.6rem); font-weight:700;letter-spacing:-.038em;line-height:.98; } .hero-copy .lead{margin-top:var(--s-xl)} .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-m);margin-top:var(--s-2xl)} .hero-proof{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; margin-top:var(--s-2xl);color:var(--ink-3);font-size:13.5px; } .hero-proof .dot{width:4px;height:4px;border-radius:50%;background:var(--ink-3)} .hero-proof b{color:var(--ink-2);font-weight:600} .hero-stage{position:relative;perspective:1600px;display:flex; justify-content:center;align-items:center;min-height:540px} .hero-stage .ashot{position:absolute} .hero-stage .ashot .device{transition:none} .hero-a{z-index:2;transform:translateX(-30px)} .hero-a .device{width:min(280px,66vw);transform:rotateY(18deg) rotateX(3deg) rotateZ(-2deg)} .hero-b{z-index:1;transform:translate(90px,-46px)} .hero-b .device{width:min(248px,58vw);transform:rotateY(18deg) rotateX(3deg) rotateZ(-2deg);opacity:.96} /* Shimmer on the highlighted phrase — it falls off to graphite, not to a hue. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ h1 .grad{ background:linear-gradient(115deg,#b8b8c1 0 30%,#fff 46%,#fff 56%,#b8b8c1 100%); background-size:260% 100%;background-position:120% 0; -webkit-background-clip:text;background-clip:text;color:transparent; animation:shimmer 2.6s var(--ease-out) .35s 1 both; } } @keyframes shimmer{to{background-position:-30% 0}} @media (prefers-reduced-motion:reduce){h1 .grad{animation:none;background-position:0 0}} /* --- Feature rows ------------------------------------------------------- */ .rowsec{padding-block:clamp(40px,7vw,84px)} .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center} .row.flip .row-copy{order:2} .row-copy h2{margin-top:10px;font-size:clamp(1.7rem,1.2rem + 2.2vw,2.6rem);font-weight:700;letter-spacing:-.03em} .row-copy .lead{margin-top:14px} .row-media{position:relative;display:grid;place-items:center} .row-media .device{width:min(300px,74vw)} .points{margin-top:22px;display:grid;gap:12px} .points li{display:flex;align-items:flex-start;gap:11px;color:var(--ink-2);font-size:15.5px;line-height:1.5} .points li svg{color:var(--app);flex:none;margin-top:3px} /* --- Fanned gallery ----------------------------------------------------- */ .fanwrap{position:relative;perspective:1800px;display:flex;justify-content:center; align-items:center;min-height:600px;margin-top:var(--s-xl)} .fanwrap .ashot,.fanwrap .watchshot{position:absolute;transition:transform .5s var(--ease-out-soft)} .fanwrap .device{width:min(232px,60vw);transition:transform .5s var(--ease-out-soft)} .fan-1{z-index:1;transform:translateX(-330px) rotate(-9deg)} .fan-1 .device{transform:rotateY(20deg)} .fan-2{z-index:2;transform:translateX(-130px) translateY(24px) rotate(-3deg)} .fan-2 .device{transform:rotateY(10deg)} .fan-3{z-index:3;transform:translateX(130px) translateY(24px) rotate(3deg)} .fan-3 .device{transform:rotateY(-10deg)} .fan-4{z-index:2;transform:translateX(330px) rotate(9deg)} .fan-4 .device{transform:rotateY(-20deg)} .fanwrap:hover .fan-1{transform:translateX(-360px) translateY(-6px) rotate(-9deg)} .fanwrap:hover .fan-4{transform:translateX(360px) translateY(-6px) rotate(9deg)} /* three-up variant */ .fan3 .fan-1{transform:translateX(-250px) translateY(16px) rotate(-7deg)} .fan3 .fan-2{transform:translateX(0) translateY(-14px) rotate(0)} .fan3 .fan-2 .device{transform:rotateY(0)} .fan3 .fan-3{transform:translateX(250px) translateY(16px) rotate(7deg)} .fan3 .fan-3 .device{transform:rotateY(-14deg)} .fan3 .fan-1 .device{transform:rotateY(14deg)} .fan3:hover .fan-1{transform:translateX(-268px) translateY(10px) rotate(-7deg)} .fan3:hover .fan-3{transform:translateX(268px) translateY(10px) rotate(7deg)} .fan-watch{z-index:4;transform:translate(292px,152px) rotate(7deg)} /* three phones + a watch: pull the phones left so the cluster stays centred */ .fanw .fan-1{transform:translateX(-300px) translateY(-6px) rotate(-8deg)} .fanw .fan-2{transform:translateX(-100px) translateY(20px) rotate(-3deg)} .fanw .fan-3{transform:translateX(100px) translateY(20px) rotate(3deg)} .fanw:hover .fan-1{transform:translateX(-326px) translateY(-12px) rotate(-8deg)} .fanw:hover .fan-watch{transform:translate(316px,146px) rotate(7deg)} /* --- App cards (studio home) -------------------------------------------- */ .appsec{padding-block:clamp(36px,6vw,72px);border-top:1px solid var(--glass-line)} .appsec:first-of-type{border-top:0} .approw{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} .approw.flip .approw-copy{order:2} .approw-head{display:flex;align-items:center;gap:14px} .appicon{width:56px;height:56px;border-radius:13px;flex:none; box-shadow:0 8px 24px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12)} .approw-head h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);font-weight:700;letter-spacing:-.03em} .approw-head p{font-size:14.5px;color:var(--ink-3);margin-top:4px} .approw-copy .lead{margin-top:var(--s-l)} .approw-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-m);margin-top:var(--s-xl)} .approw-media{position:relative;display:grid;place-items:center} .approw-media .device{width:min(268px,70vw)} .status-pill{ display:inline-flex;align-items:center;gap:7px; padding:6px 12px;border-radius:var(--r-pill); background:var(--glass-2);border:1px solid var(--glass-line); font-size:12.5px;font-weight:600;color:var(--ink-2); } .status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--app)} .status-pill--soon::before{background:var(--ink-3)} /* --- CTA band ----------------------------------------------------------- */ .section--tight{padding-top:0} .note{color:var(--ink-2);font-size:14.5px;line-height:1.6;max-width:66ch;padding-bottom:var(--s-s)} .cta-band{text-align:center;padding:clamp(44px,6vw,76px) clamp(24px,4vw,56px); position:relative;overflow:hidden;isolation:isolate} .cta-band::before{ content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(80% 140% at 50% 0%, color-mix(in srgb, var(--app) 14%, transparent), transparent 62%); } .cta-band h2{font-size:clamp(2rem,1.4rem + 3vw,3.4rem);font-weight:700; letter-spacing:-.03em;max-width:18ch;margin-inline:auto} .cta-band p{margin:var(--s-l) auto 0;color:var(--ink-2);max-width:48ch} .cta-band .hero-cta{justify-content:center;margin-top:var(--s-xl)} .cta-fine{margin-top:var(--s-xl);font-size:13.5px;color:var(--ink-3)} .cta-fine a{color:var(--ink-2);transition:color .2s var(--ease-out)} .cta-fine a:hover{color:var(--ink)} /* --- Footer ------------------------------------------------------------- */ .foot{border-top:1px solid var(--glass-line);margin-top:var(--s-3xl)} .foot-in{display:grid;gap:var(--s-2xl); grid-template-columns:1.4fr repeat(3,minmax(120px,1fr)); padding-block:var(--s-4xl) var(--s-2xl)} .foot-brand p{margin-top:var(--s-m);color:var(--ink-3);font-size:14px;max-width:34ch} .foot h2{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--ink-3);margin-bottom:var(--s-m)} .foot li + li{margin-top:9px} .foot a{font-size:14.5px;color:var(--ink-2);transition:color .2s var(--ease-out)} .foot a:hover{color:var(--ink)} .foot-end{display:flex;flex-wrap:wrap;gap:var(--s-m) var(--s-xl);justify-content:space-between; padding-block:var(--s-xl) var(--s-3xl);border-top:1px solid var(--glass-line); color:var(--ink-3);font-size:13.5px} @media (max-width:760px){.foot-in{grid-template-columns:1fr 1fr}} /* --- Document pages ----------------------------------------------------- */ .doc-hero{padding-top:clamp(28px,5vw,60px);padding-bottom:var(--s-2xl)} .doc-hero h1{margin-top:12px;font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem);font-weight:700;letter-spacing:-.035em} .doc-hero .lead{margin-top:var(--s-l)} .doc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px); padding-block:var(--s-2xl) var(--s-5xl)} @media (min-width:960px){.doc{grid-template-columns:200px minmax(0,1fr)}} .doc-nav{position:sticky;top:84px;align-self:start} .doc-navhead{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase; color:var(--ink-3);margin-bottom:var(--s-m)} .doc-nav li + li{margin-top:9px} .doc-nav a{font-size:14.5px;color:var(--ink-2);transition:color .2s var(--ease-out)} .doc-nav a:hover{color:var(--ink)} .policy-list{margin-top:var(--s-xl);display:grid;gap:var(--s-m)} .policy-list li{padding-left:0} .policy-list li::before{display:none} .policy-card{ display:flex;align-items:center;gap:var(--s-l); padding:var(--s-l) var(--s-xl);border-radius:var(--r-tile); transition:background .25s var(--ease-out),border-color .25s var(--ease-out); } .policy-card:hover{background:var(--glass-2);border-color:var(--glass-line-2)} .policy-card img{width:44px;height:44px;border-radius:11px;flex:none; box-shadow:0 6px 18px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.12)} .policy-card b{display:block;color:var(--ink);font-weight:600;font-size:16px;margin-bottom:3px} .policy-card span{color:var(--ink-2);font-size:14.5px;line-height:1.45} .policy-card__go{color:var(--ink-3);font-size:18px;margin-left:auto;flex:none; transition:transform .25s var(--ease-out),color .25s var(--ease-out)} .policy-card:hover .policy-card__go{transform:translateX(4px);color:var(--ink)} .doc-body .policy-card{border-bottom:0} .doc-updated{margin-top:var(--s-l);font-size:13.5px;color:var(--ink-3)} .doc-navhead--gap{margin-top:var(--s-xl)} .doc-back{margin-top:var(--s-4xl);padding-top:var(--s-xl);border-top:1px solid var(--glass-line)} .doc-body{max-width:70ch} .doc-body h2{margin-top:var(--s-4xl);padding-top:var(--s-xl);border-top:1px solid var(--glass-line); font-size:clamp(1.4rem,1.2rem + 1vw,1.85rem);font-weight:700;letter-spacing:-.025em} .doc-body h2:first-child{margin-top:0;border-top:0;padding-top:0} .doc-body h3{margin-top:var(--s-2xl);font-size:1.06rem;font-weight:600;letter-spacing:-.015em} .doc-body p,.doc-body li{color:var(--ink-2);line-height:1.65} .doc-body p + p,.doc-body h3 + p,.doc-body h2 + p, .doc-body ul + p,.doc-body p + ul,.doc-body ul + ul{margin-top:var(--s-m)} .doc-body .callout + h2{margin-top:var(--s-3xl)} .doc-body ul{margin-top:var(--s-m);display:grid;gap:9px} .doc-body li{position:relative;padding-left:20px} .doc-body li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--ink-3)} .doc-body strong{color:var(--ink);font-weight:600} .doc-body a:not(.btn){color:var(--ink);border-bottom:1px solid var(--glass-line-2)} .doc-body a:not(.btn):hover{border-bottom-color:#fff} .doc-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em; background:var(--glass-2);padding:2px 6px;border-radius:6px;color:var(--ink)} .doc-act{margin-top:var(--s-xl)} .callout{padding:var(--s-xl);margin-top:var(--s-xl)} .callout-label{font-size:13px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--app)} .callout p{margin-top:var(--s-s)} /* --- 404 ---------------------------------------------------------------- */ .nf{padding-block:clamp(56px,12vh,140px) var(--s-5xl);text-align:center} .nf .eyebrow{justify-content:center} .nf h1{font-size:clamp(4rem,16vw,10rem);font-weight:800;letter-spacing:-.05em; background:linear-gradient(115deg,#b8b8c1,#fff 50%,#b8b8c1); -webkit-background-clip:text;background-clip:text;color:transparent} .nf .lead{margin:var(--s-l) auto 0} .nf .hero-cta{justify-content:center} /* --- Reveal on scroll --------------------------------------------------- */ .reveal{opacity:1;transform:none} @media (prefers-reduced-motion:no-preference){ /* The hidden state only exists once a script has proved it can run, and even then it self-cancels after 4s. If site.js 404s or is blocked, the page still ends up fully visible without it. */ .js .reveal{opacity:0;transform:translateY(18px); transition:opacity .7s var(--ease-out-soft),transform .7s var(--ease-out-soft); animation:reveal-safety 0s linear 4s forwards; will-change:opacity,transform} .js .reveal.in{opacity:1;transform:none;animation:none} @keyframes reveal-safety{to{opacity:1;transform:none}} .js .reveal[data-delay="1"]{transition-delay:.07s} .js .reveal[data-delay="2"]{transition-delay:.14s} .js .reveal[data-delay="3"]{transition-delay:.21s} .js .reveal[data-delay="4"]{transition-delay:.28s} } /* --- Pointer spotlight on glass ----------------------------------------- */ .cta-band::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background:radial-gradient(260px circle at var(--mx,-300px) var(--my,-300px),rgba(255,255,255,.09),transparent 62%); opacity:0;transition:opacity .35s var(--ease-out); } .cta-band:hover::after{opacity:1} .cta-band > *{position:relative;z-index:1} /* --- Responsive --------------------------------------------------------- */ @media (max-width:900px){ .hero-inner{grid-template-columns:1fr} /* The stage has to be tall enough to hold a tilted phone plus hero-b's -46px lift, or the phones overflow upward onto the proof row. */ .hero-stage{min-height:620px;margin-top:var(--s-3xl);order:2} .row,.approw{grid-template-columns:1fr} .row.flip .row-copy,.approw.flip .approw-copy{order:0} .row-media,.approw-media{order:-1} .fanwrap{min-height:430px} .fan-1,.fan-4,.fan-watch{display:none} .fan-2{transform:translateX(-92px) rotate(-4deg)} .fan-3{transform:translateX(92px) rotate(4deg)} .fan3 .fan-1{display:none} .fan3 .fan-2{transform:translateX(-92px) rotate(-4deg)} .fan3 .fan-3{transform:translateX(92px) rotate(4deg)} } @media (max-width:520px){ .hero-stage{min-height:540px} .hero-a .device{width:min(252px,60vw)} .hero-b{transform:translate(72px,-36px)} .hero-b .device{width:min(222px,53vw)} .fanwrap{min-height:400px} }