/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing-v2/8f9184a1-7e38-44fb-b87f-a1e618bd0c4e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing-v2/dcb92c50-2894-4cf5-bdf2-4e6d9a0639db.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing-v2/f31f5fdb-8b2c-4548-8c24-53ce90050f4c.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing-v2/c619efc6-98c5-42cd-ae22-810aae527192.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing-v2/9d5e637b-f73b-4782-b8f3-6a57466c0e3d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/landing-v2/8f9184a1-7e38-44fb-b87f-a1e618bd0c4e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/landing-v2/dcb92c50-2894-4cf5-bdf2-4e6d9a0639db.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/landing-v2/f31f5fdb-8b2c-4548-8c24-53ce90050f4c.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/landing-v2/c619efc6-98c5-42cd-ae22-810aae527192.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/landing-v2/9d5e637b-f73b-4782-b8f3-6a57466c0e3d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/landing-v2/8f9184a1-7e38-44fb-b87f-a1e618bd0c4e.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/landing-v2/dcb92c50-2894-4cf5-bdf2-4e6d9a0639db.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/landing-v2/f31f5fdb-8b2c-4548-8c24-53ce90050f4c.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/landing-v2/c619efc6-98c5-42cd-ae22-810aae527192.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/landing-v2/9d5e637b-f73b-4782-b8f3-6a57466c0e3d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing-v2/6e39951e-3c6e-430d-b692-ef1527588d62.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing-v2/71040086-3f94-4bca-b2e0-677c9f05e809.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing-v2/0021f1aa-03c1-4ce8-8290-befab6e12f2a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing-v2/b74b956a-c40d-40ff-97fa-75a40111c780.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* Landing v3. Static layout is the default; `html.motion` enables scroll
   motion, `html.dive` the WebGL hero and close, `html.ring-mode` the 3D ring.
   index.html sets `html.dive` before the first paint when WebGL can run, so
   the dive rules must look right before the scene exists: copy on a dark stage. */
@property --depth{syntax:'<length>';inherits:false;initial-value:7px}
:root{
  --canvas:#0B0B0B;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --ink:#F1F1F1;--ink-2:#BCBCBC;--ink-soft:#A6A6A6;--ink-mute:#999;
  --serif:'Instrument Serif',serif;--sans:'Geist',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  --gutter:clamp(20px,4vw,48px);--max:1200px;--r-lg:28px;--r-md:18px;
  --surface:linear-gradient(150deg,#1f1f1f,#121212 60%,#181818);
  --raise:inset 0 1px 0 rgba(255,255,255,.14),0 40px 80px -40px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
html{background:var(--canvas);scroll-padding-top:84px;color-scheme:dark}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:clip}
h1,h2{text-wrap:balance}
a{color:var(--ink-2);text-underline-offset:3px}a:hover{color:#E6E6E6}
button{font-family:inherit}
::selection{background:#3A3A3A;color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #D0D0D0;outline-offset:3px;border-radius:10px}
[hidden]{display:none!important}
[data-condition]{display:contents}
button,a,summary{-webkit-tap-highlight-color:transparent}
button,summary{touch-action:manipulation}
.skip{position:fixed;left:24px;top:-100px;padding:12px 20px;background:#F1F1F1;color:#0B0B0B;z-index:100}
.skip:focus{top:80px}.skip:hover{color:#0B0B0B}
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wave{from{transform:scaleY(.2)}to{transform:scaleY(1)}}

/* Display type */
.enhance-copy h2,.ccdemo-head h2,.everyday-head h2,.tune-inner h2,.download-inner h2,.faq-inner h2{margin:0;font:400 clamp(38px,5.4vw,72px)/1 var(--serif);letter-spacing:-.025em}
h2 em,h1 em{color:var(--ink-2)}

/* Reveals: `translate` composes with any transform the element already has. */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .1em;margin:0 -.04em -.1em}
.js [data-split] .wi{display:inline-block;transform:translateY(108%) rotate(5deg);transform-origin:0 100%;transition:transform 1000ms var(--ease) calc(var(--wi) * 55ms)}
.js [data-split].is-in .wi{transform:none}
.js [data-reveal]{opacity:0;translate:0 26px;transition:opacity 800ms var(--ease) calc(var(--d,0) * 90ms),translate 900ms var(--ease) calc(var(--d,0) * 90ms)}
.js [data-reveal].is-in{opacity:1;translate:none}
@media(prefers-reduced-motion:reduce){.js [data-split] .wi{transform:none;transition:none}.js [data-reveal]{translate:none}}

/* Buttons. Pointer position drives the inner light; JS adds the magnetic pull. */
.btn{--tx:0px;--ty:0px;--press:1;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font:500 15px/1.2 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;transform:translate3d(var(--tx),var(--ty),0) scale(var(--press));transition:transform 260ms var(--ease),background-color 160ms,border-color 160ms,color 160ms}
.btn img{flex:none;object-fit:contain}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity 200ms;background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),var(--spot,rgba(255,255,255,.16)),transparent 70%)}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:45%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent,var(--shine,rgba(255,255,255,.18)),transparent);transform:translateX(0) skewX(-14deg)}
.btn:active{--press:.97}
.btn-lg{min-height:56px;padding:0 26px;font-size:16px}
.btn-sm{min-height:36px;padding:0 16px;font-size:13px}
.btn-light{background:#EDEDED;color:#0B0B0B;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 12px 30px -14px rgba(0,0,0,.7);--spot:#fff;--shine:rgba(255,255,255,.95)}
.btn-light:hover{background:#DEDEDE;color:#0B0B0B}
.btn-dark{background:#1E1E1E;color:var(--ink);border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.btn-dark img[src$="appleLogo.png"],.btn-ghost img[src$="appleLogo.png"]{filter:invert(1)}
.btn-dark:hover{color:#fff;border-color:rgba(255,255,255,.24)}
.btn-ghost{background:transparent;color:#D4D4D4;border-color:rgba(255,255,255,.16)}
.btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.32)}
@media(hover:hover) and (pointer:fine){
  .btn:hover::before{opacity:1}
  .btn:hover::after{transform:translateX(420%) skewX(-14deg);transition:transform 900ms var(--ease)}
}

/* Cursor light on surfaces: a soft fill plus a lit edge that follows the pointer. */
[data-spot]{position:relative;isolation:isolate}
[data-spot]::before,[data-spot]::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 280ms}
[data-spot]::before{inset:0;z-index:-1;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.065),transparent 42%)}
[data-spot]::after{inset:-1px;padding:1px;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.62),transparent 55%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media(hover:hover) and (pointer:fine){[data-spot]:hover::before,[data-spot]:hover::after{opacity:1}}
[data-tilt]{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.glare{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:var(--glare,0);background:radial-gradient(560px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.12),transparent 45%)}

/* Header */
.site-header{position:fixed;top:12px;left:12px;right:12px;z-index:50;display:flex;justify-content:center;pointer-events:none}
.nav-shell{pointer-events:auto;position:relative;width:100%;max-width:1180px;height:56px;padding:0 8px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,rgba(34,34,34,.74),rgba(16,16,16,.66));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 60px -24px rgba(0,0,0,.7)}
.site-header a,.site-header button{white-space:nowrap;flex-shrink:0}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand-mark{width:32px;height:32px;border-radius:8px;overflow:hidden;display:block;flex:none;transition:transform 400ms var(--ease)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-mark img{display:block;width:100%;height:100%}
.brand-name{font:400 23px/1 var(--serif);letter-spacing:-.01em}
.nav-links{display:flex;gap:4px;font-size:14px}
.nav-links a{position:relative;padding:8px 12px;border-radius:999px;color:#ABABAB;text-decoration:none;transition:color 160ms}
.nav-links a::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.09);opacity:0;transform:scale(.8);transition:opacity 180ms var(--ease),transform 260ms var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::before{opacity:1;transform:none}
.nav-actions{display:flex;align-items:center;gap:6px}
.nav-signin{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;color:#CECECE;font-size:14px;text-decoration:none;transition:background-color 160ms,color 160ms}
.nav-signin:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-signup{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.26);transition:border-color 160ms}
.nav-signup:hover{color:#fff;border-color:rgba(255,255,255,.32)}
.nav-download{min-height:40px}
.menu-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--ink);border-radius:999px;padding:10px 14px;font-size:14px;cursor:pointer}
#mobile-menu{position:absolute;right:12px;top:66px;width:220px;max-height:75svh;overflow:auto;background:#181818;border:1px solid #424242;border-radius:20px;padding:12px;box-shadow:0 20px 60px #0008}
#mobile-menu a{display:block;color:var(--ink);padding:12px 16px;text-decoration:none;border-radius:8px}
#mobile-menu a:hover{background:#2B2B2B}
@media(max-width:1100px){.nav-links{display:none}.menu-toggle{display:inline-flex}.nav-download{display:none!important}}
@media(max-width:640px){.nav-shell{gap:8px;padding-left:10px}.nav-actions{gap:2px}.nav-signin{padding:0 9px}.nav-signup{padding:0 11px;font-size:13px}.menu-toggle{padding:10px;font-size:13px}}
@media(max-width:420px){.brand-name{display:none}}

/* Intro: static layout */
.intro{position:relative;padding:136px var(--gutter) 24px}
.intro-stage{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"copy mark" "agents mark" "film film";column-gap:56px;align-items:center}
.hero-copy{grid-area:copy;align-self:end}
.hero-copy h1{margin:0;font:400 clamp(3rem,5.6vw,5.6rem)/1 var(--serif);letter-spacing:-.025em}
.hero-description{margin:26px 0 0;max-width:470px;font-size:clamp(1rem,1.4vw,1.1875rem);line-height:1.65;color:#B0B0B0}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-demo-link{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:#B0B0B0;font-size:.875rem;text-decoration-color:#606060;text-underline-offset:5px;transition:color 160ms,text-decoration-color 160ms}
.hero-demo-link:hover{color:var(--ink);text-decoration-color:var(--ink)}
.hero-mark{grid-area:mark}
.hero-mark img{display:block;width:min(100%,460px);height:auto;margin:0 auto}
.hero-agents{grid-area:agents;align-self:start;display:flex;flex-wrap:wrap;gap:12px;margin:36px 0 0;padding:0;list-style:none}
.hero-agent-tile{display:grid;place-items:center;width:var(--tile,52px);height:var(--tile,52px);border-radius:24%;background:linear-gradient(145deg,#2b2b2b,#171717 80%);box-shadow:inset 0 1px 2px rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05),0 18px 32px -12px rgba(0,0,0,.6);transform:rotate(var(--angle,0deg))}
.hero-agent-tile img{display:block;width:54%;height:54%;object-fit:contain}
.intro-film{grid-area:film;margin-top:clamp(56px,8vw,96px)}
.film-frame{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line-2);background:#000;box-shadow:0 40px 100px -40px rgba(0,0,0,.9)}
.film-frame video{display:block;width:100%;height:auto;background:#000}
.film-shade,.intro-canvas,.intro-cover{display:none}
.film-caption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 20px;margin-top:22px}
.film-caption h2{margin:0;font:400 clamp(34px,4.6vw,60px)/1 var(--serif);letter-spacing:-.02em}
@media(max-width:860px){
  .intro{padding-top:120px}
  .intro-stage{grid-template-columns:1fr;grid-template-areas:"copy" "agents" "mark" "film";text-align:center}
  .hero-description{margin-inline:auto}
  .hero-actions,.hero-agents{justify-content:center}
  .hero-mark img{width:min(64%,300px);margin-top:44px}
}

/* Intro: the dive. The canvas paints the page around the mark's opening, so
   the film below is visible only through it until the camera passes. */
.dive .intro{height:420vh;padding:0}
.dive .intro-stage{position:sticky;top:0;height:100vh;height:100svh;max-width:none;display:block;overflow:hidden;background:var(--canvas)}
.dive .hero-mark{display:none}
.dive .intro-film{position:absolute;inset:0;margin:0;z-index:1}
.dive .film-frame{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none;background:#fff;clip-path:inset(var(--it,0px) var(--ix,0px) var(--ib,0px) var(--ix,0px) round var(--ir,0px))}
/* The video box follows the settling clip, so the framed player shows the whole 16:9 film
   instead of a crop of a full-screen cover fit. */
.dive .film-frame video{position:absolute;left:var(--ix,0px);top:var(--it,0px);width:calc(100% - 2 * var(--ix,0px));height:calc(100% - var(--it,0px) - var(--ib,0px));object-fit:cover;background:#fff;filter:blur(18px);transition:filter 900ms var(--ease)}
.dive .is-near .film-frame video{filter:none}
.dive .film-shade{display:block;position:absolute;inset:0;background:var(--canvas);opacity:var(--shade,.9);pointer-events:none}
.dive .film-caption{position:absolute;left:var(--ix,24px);right:var(--ix,24px);bottom:var(--cb,32px);margin:0;opacity:var(--cap,0);translate:0 calc((1 - var(--cap,0)) * 16px);visibility:hidden}
.dive .film-caption.is-live{visibility:visible}
.dive .intro-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.dive .intro-cover{display:block;position:absolute;inset:0;z-index:3;background:var(--canvas);pointer-events:none;transition:opacity 900ms var(--ease)}
.dive.gl-ready .intro-cover{opacity:0}
.dive .hero-agents{position:absolute;inset:0;z-index:4;margin:0;display:block;pointer-events:none}
.dive .hero-agent{position:absolute;left:0;top:0;opacity:var(--o,0);transform:translate3d(var(--x,-300px),var(--y,-300px),0) translate(-50%,-50%) scale(var(--s,1));filter:blur(var(--b,0px));will-change:transform,opacity}
.dive .hero-agent-tile{--tile:84px}
.dive .hero-copy{position:absolute;z-index:5;left:max(var(--gutter),calc((100vw - var(--max)) / 2));top:50%;width:min(600px,46vw);transform:translate3d(0,calc(-50% - var(--out,0) * 100px),0);opacity:calc(1 - var(--out,0))}
.dive .hero-copy.is-gone{visibility:hidden}
@media not all and (min-width:960px) and (min-aspect-ratio:11/10){
  .dive .hero-copy{left:var(--gutter);right:var(--gutter);width:auto;top:92px;transform:translate3d(0,calc(var(--out,0) * -80px),0);text-align:center}
  .dive .hero-copy h1{font-size:clamp(2.6rem,9vw,4.4rem)}
  .dive .hero-description{margin:18px auto 0;font-size:1rem}
  .dive .hero-actions{justify-content:center;margin-top:24px}
  .dive .hero-agents{display:none}
}
@media(max-width:520px){.dive .hero-actions .btn{min-height:52px;padding:0 20px;font-size:15px}.dive .hero-demo-link{display:none}}

/* Works with */
.works{padding:clamp(56px,8vw,96px) 0 8px}
.works-rule{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;flex-wrap:wrap;gap:20px;font-size:13px;color:var(--ink-soft)}
.works-rule span:last-child{flex:1;min-width:40px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.04))}
.marquee-mask{margin-top:32px;padding:10px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee{display:flex;align-items:center;width:max-content;animation:marquee 38s linear infinite}
.marquee-set{display:flex;align-items:center}
.marquee img{width:auto;flex:none;margin-right:88px;opacity:.66;transition:opacity 220ms,transform 400ms var(--ease)}
@media(hover:hover) and (pointer:fine){.marquee img:hover{opacity:1;transform:translateY(-3px) scale(1.08)}}

/* Shared shortcut keys */
.key{--rest:7px;position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:66px;height:66px;padding:0 18px;border-radius:14px;font:500 20px/1 var(--sans);color:var(--ink);background:linear-gradient(180deg,#2a2a2a,#1b1b1b);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 var(--depth) 0 #0d0d0d,0 calc(var(--depth) + 1px) 0 rgba(255,255,255,.07),0 calc(var(--depth) + 16px) 26px -8px rgba(0,0,0,.75);transform:translateY(calc(var(--rest) - var(--depth)));transition:--depth 140ms var(--ease),transform 140ms var(--ease)}
.key-sm{--rest:3px;--depth:3px;min-width:34px;height:32px;padding:0 9px;border-radius:8px;font-size:13px}
.key-sm.key-wide{padding:0 14px}
@media(hover:hover) and (pointer:fine){.tune-row:hover .key-sm{--depth:1px}}

/* Cleanup: pinned sentence that cleans itself as you scroll */
.cleanup{--p:1;position:relative}
.cleanup-stage{position:relative;display:flex;flex-direction:column;justify-content:center;padding:64px var(--gutter);overflow:hidden}
.cleanup.is-pinned{height:340vh}
.cleanup.is-pinned .cleanup-stage{position:sticky;top:0;height:100vh;height:100svh;padding:80px var(--gutter) 48px}
.cleanup-wave{position:absolute;left:0;right:0;top:50%;height:52vh;display:flex;align-items:center;justify-content:space-between;padding:0 3vw;pointer-events:none;opacity:calc(.14 - var(--p) * .1);transform:translateY(-50%) scaleY(calc(1 - min(var(--p) * 1.7, .97)))}
.cleanup-wave span{width:max(3px,.45vw);height:100%;border-radius:99px;background:#b5b5b5;animation:wave 1.1s ease-in-out infinite alternate}
.cleanup-wave span:nth-child(3n){animation-duration:.8s;height:70%}
.cleanup-wave span:nth-child(3n+1){animation-duration:1.4s;height:45%}
.cleanup-wave span:nth-child(4n){animation-delay:-.5s}
.cleanup-wave span:nth-child(5n+2){animation-delay:-.9s;height:85%}
.cleanup-inner{position:relative;max-width:var(--max);width:100%;margin:0 auto}
.cleanup-labels{position:relative;height:22px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:36px}
.cleanup-labels span{position:absolute;left:0;top:0}
.cleanup-sentence{margin:0;max-width:1100px;font:400 clamp(40px,6.6vw,104px)/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.cw{display:inline-block;vertical-align:bottom;padding-right:.24em}
.strike{position:absolute;left:0;right:.24em;top:56%;height:.06em;min-height:2px;background:#CFCFCF;transform-origin:left}
.sentence-caret{display:inline-block;vertical-align:bottom;width:.06em;min-width:3px;height:.95em;margin:0 0 .08em .06em;background:#A8A8A8;animation:blink 1.1s steps(2) infinite}
.cleanup-notes{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;max-width:860px}
.cleanup-notes p{margin:0;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.cleanup-notes p+p{font-size:14px;line-height:1.9}
.cleanup-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.05)}
.cleanup-progress span{display:block;height:100%;background:#8a8a8a;transform-origin:left;transform:scaleX(var(--p))}
.cleanup:not(.is-pinned) .cleanup-progress{display:none}

/* Enhance */
.enhance{position:relative;padding:clamp(120px,14vw,200px) var(--gutter) clamp(96px,12vw,160px);overflow:clip}
.enhance-glow{position:absolute;right:0;top:18%;width:min(70vw,780px);height:620px;pointer-events:none;background:radial-gradient(closest-side,rgba(120,120,120,.22),transparent)}
.enhance-inner{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px 80px;align-items:center}
.enhance-copy p{margin:28px 0 0;font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:440px}
.enhance-copy .enhance-hint{margin-top:22px;font-size:14px;color:var(--ink-mute)}
.panel{position:relative;padding:20px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--raise)}
.chat-bubble-row{display:flex;flex-direction:column;gap:6px;padding:8px 6px 22px}
.chat-bubble{align-self:flex-start;max-width:80%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.06);font-size:15px;line-height:1.5;color:#E2E2E2}
.chat-meta{font-size:12px;color:var(--ink-mute);padding-left:4px}
.prompt-field{display:flex;align-items:flex-end;gap:12px;min-height:52px;padding:14px 16px;border-radius:18px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.4);font-size:16px;line-height:1.55}
.prompt-text{flex:1}
.selected-text{background:rgba(110,110,110,.4);border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:1px 0}
.accepted-text{display:inline-block;animation:fadeUp .45s var(--ease)}
.send-dot{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#3A3A3A;color:#fff;font-size:14px}
.refine{margin-top:14px;padding:12px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.refine-bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px}
.refine-logo{flex:none;width:26px;height:26px;border-radius:6px;overflow:hidden;display:block}
.refine-logo img{display:block;width:100%;height:100%}
.refine-instruction{flex:1;font-size:15px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preset-row{display:flex;flex-wrap:wrap;gap:6px;padding:6px 4px 4px}
.preset{min-height:36px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#D0D0D0;font-size:14px;cursor:pointer;transition:border-color 160ms,background-color 160ms,color 160ms,transform 200ms var(--ease)}
.preset:hover{border-color:rgba(255,255,255,.4);color:#fff;transform:translateY(-1px)}
.preset:active{transform:scale(.97)}
.preset[aria-pressed=true]{background:#EDEDED;border-color:#EDEDED;color:#0B0B0B}
.refine-preview{margin-top:10px;padding:14px 10px 4px;border-top:1px solid rgba(255,255,255,.06);animation:fadeUp .35s var(--ease)}
.refine-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.refine-preview p{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.refine-preview .pw{display:inline-block;opacity:0;filter:blur(6px);translate:0 6px;animation:wordIn .5s var(--ease) forwards;animation-delay:calc(var(--i) * 28ms)}
@keyframes wordIn{to{opacity:1;filter:none;translate:none}}
.refine-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.refine-done{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.06);font-size:13px;color:var(--ink-2);animation:fadeUp .35s var(--ease)}

/* Claude Code demo: a recreated Claude Code session the visitor drives with Cadence (landing-ccdemo.js).
   Without the script it shows the finished dictation and hides the controls. */
.ccdemo{padding:clamp(72px,9vw,130px) var(--gutter) clamp(80px,10vw,140px)}
/* Right under the hero film, whose caption already leaves room above. */
.intro+.ccdemo{padding-top:clamp(24px,4vw,56px)}
.ccdemo-inner{max-width:var(--max);margin:0 auto}
.ccdemo-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:28px 80px;align-items:end;margin-bottom:clamp(36px,5vw,56px)}
.ccdemo-kicker{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ccdemo-kicker img{display:block;flex:none}
.ccdemo-copy p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:520px}
.ccdemo-note{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--ink-mute)}
.ccd{position:relative;padding:clamp(12px,1.8vw,22px) clamp(12px,1.8vw,22px) clamp(18px,2.4vw,28px);border-radius:var(--r-lg);border:1px solid var(--line);background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.055),transparent 70%),#080808;box-shadow:0 40px 100px -40px rgba(0,0,0,.9)}

/* Steps and the voice switch */
.ccd-top{display:none;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.js .ccd-top{display:flex}
.ccd-modes{display:flex;gap:8px}
.ccd-mode,.ccd-voice{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px 0 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-mute);font:500 13px/1 var(--sans);cursor:pointer;transition:color 200ms,background-color 200ms,border-color 200ms}
.ccd-mode{letter-spacing:.12em;text-transform:uppercase}
.ccd-mode .n{font-size:11px;letter-spacing:.08em;color:#6c6c6c}
.ccd-mode[aria-pressed=true]{color:var(--ink);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.ccd-mode[aria-pressed=true] .n{color:var(--ink-2)}
.ccd-voice{padding:0 14px 0 12px;font-weight:400;color:var(--ink-2)}
.ccd-voice svg{display:block;flex:none}
.ccd-voice .off,.ccd-voice[aria-pressed=false] .on{display:none}
.ccd-voice[aria-pressed=false]{color:var(--ink-mute)}
.ccd-voice[aria-pressed=false] .off{display:inline}
@media(hover:hover) and (pointer:fine){.ccd-mode:hover,.ccd-voice:hover{color:var(--ink);border-color:var(--line-2)}}

/* Terminal running Claude Code (recreated) */
.ccd-screen{position:relative}
.ccd-term{display:flex;flex-direction:column;height:clamp(380px,38vw,460px);border-radius:14px;background:#131313;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 30px 80px -30px rgba(0,0,0,.8)}
.ccd-bar{position:relative;flex:none;display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:#1d1d1d;border-bottom:1px solid rgba(255,255,255,.06)}
.ccd-bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.ccd-bar i:nth-child(2){background:#febc2e}
.ccd-bar i:nth-child(3){background:#28c840}
.ccd-bar span{position:absolute;inset:0;text-align:center;font:500 12.5px/36px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#a9a9a9;pointer-events:none}
.ccd-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 22px 12px;font:400 13.5px/21px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e4e4e4}
.ccd-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none}
.ccd-scroll::-webkit-scrollbar{display:none}
.ccd-lines{display:flex;flex-direction:column;padding-bottom:4px}
.ccd .dim{color:#8a8a8a}
.ccd .cc{color:#D77757}
.ccd .ok{color:#4fb36b}
.ccd-body b{font-weight:700;color:#f2f2f2}
.ccd-welcome{display:flex;align-self:flex-start;align-items:center;gap:18px;padding:12px 24px 12px 16px;border:1px solid #D77757;border-radius:8px}
.ccd-welcome img{display:block;flex:none;width:44px;height:44px}
.ccd-tips{margin-top:10px}
.ccd-msg{display:flex;gap:10px;margin:14px 0 6px;padding:3px 10px;border-radius:5px;background:#262626;white-space:pre-wrap;animation:ccdIn 300ms var(--ease)}
.ccd-msg .gt{flex:none;color:#8a8a8a}
.ccd-row,.ccd-res{display:flex;gap:10px;white-space:pre-wrap;animation:ccdIn 300ms var(--ease)}
.ccd-row{margin-top:6px}
.ccd-row .dot{flex:none;width:12px;font-size:.8em}
.ccd-res{padding-left:22px;color:#8a8a8a}
.ccd-res .elbow{flex:none}
@keyframes ccdIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ccd-input{flex:none;display:flex;gap:12px;margin-top:8px;padding:9px 14px;border:1px solid #484848;border-radius:8px}
.ccd-input .gt{flex:none;color:#bdbdbd}
.ccd-field{flex:1;min-width:0;min-height:21px;max-height:calc(21px * 5);overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
.ccd-ph{color:#777}
.ccd-cur{display:inline-block;width:8px;height:16px;margin-left:1px;vertical-align:-3px;background:#dcdcdc;animation:blink 1.06s steps(2) infinite}
.ccd-typed{border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ccd-typed.is-new{animation:ccdPaste 1.1s ease-out}
@keyframes ccdPaste{from{background:rgba(255,255,255,.22);box-shadow:0 0 14px rgba(255,255,255,.16)}to{background:transparent;box-shadow:none}}
.ccd-foot{flex:none;padding:6px 2px 0;font-size:11.5px;line-height:16px}

/* Cadence recording pill (follows the app's: target app, level bars or status) */
.ccd-pill{position:absolute;left:50%;bottom:-21px;z-index:3;display:flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 9px;border-radius:999px;background:rgba(18,18,18,.97);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px -10px rgba(0,0,0,.9);font:600 14px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#f4f4f4;white-space:nowrap;translate:-50% 0;transition:opacity 200ms var(--ease),transform 300ms var(--ease),visibility 0s}
.ccd-pill[data-state=hidden]{opacity:0;visibility:hidden;transform:translateY(10px) scale(.94);transition:opacity 200ms var(--ease),transform 300ms var(--ease),visibility 0s 300ms}
.ccd-app{flex:none;width:26px;height:26px;padding:4px 0 0 4px;border-radius:6px;background:linear-gradient(180deg,#3b3b3b,#1b1b1b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font:700 8px/1 ui-monospace,Menlo,monospace;color:#e8e8e8}
.ccd-wave{display:none;align-items:center;gap:3px;height:20px;padding-right:2px}
.ccd-pill[data-state=rec] .ccd-wave{display:flex}
.ccd-wave i{width:3px;height:100%;border-radius:2px;background:#f0f0f0;animation:wave .42s ease-in-out infinite alternate;transition:transform 200ms}
.ccd-wave i:nth-child(1){height:50%;animation-delay:-.1s}
.ccd-wave i:nth-child(2){height:80%;animation-delay:-.3s}
.ccd-wave i:nth-child(4){height:75%;animation-delay:-.2s}
.ccd-wave i:nth-child(5){height:45%;animation-delay:-.35s}
.ccd-pill.is-quiet .ccd-wave i{animation:none;transform:scaleY(.22)}
.ccd-pill-icon{display:none;flex:none;width:14px;height:14px}
.ccd-pill[data-state=working] .ccd-pill-icon{display:block}
.ccd-pill[data-icon=spin] .ccd-pill-icon{border-radius:50%;border:1.6px solid rgba(255,255,255,.28);border-top-color:#f2f2f2;animation:ccdSpin .8s linear infinite}
.ccd-pill[data-icon=lines] .ccd-pill-icon{background:linear-gradient(#9a9a9a,#9a9a9a) 0 2px/14px 1.5px no-repeat,linear-gradient(#9a9a9a,#9a9a9a) 0 6px/10px 1.5px no-repeat,linear-gradient(#9a9a9a,#9a9a9a) 0 10px/12px 1.5px no-repeat}
.ccd-pill[data-icon=caret] .ccd-pill-icon{width:2px;margin:0 4px 0 6px;border-radius:1px;background:#9a9a9a}
.ccd-pill-label:empty{display:none}
@keyframes ccdSpin{to{transform:rotate(360deg)}}

/* Refine panel (follows the app's compose mode: listening, rewriting, draft, inserted) */
.ccd-panel{position:absolute;z-index:4;top:52px;right:18px;width:min(360px,calc(100% - 36px));display:flex;flex-direction:column;gap:12px;padding:14px 14px 12px;border-radius:16px;background:#262626;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);font:400 13px/1.4 -apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;color:#ececec;opacity:0;visibility:hidden;transform:translateY(6px) scale(.97);transform-origin:100% 0;transition:opacity 200ms var(--ease),transform 280ms var(--ease),visibility 0s 280ms}
.ccd-panel.is-open{opacity:1;visibility:visible;transform:none;transition:opacity 200ms var(--ease),transform 280ms var(--ease),visibility 0s}
.ccd-p-head,.ccd-p-done{display:flex;align-items:center;gap:8px}
.ccd-p-head img,.ccd-p-done img{display:block;flex:none;border-radius:5px}
.ccd-p-head b,.ccd-p-done b{font-size:14px;font-weight:600}
.ccd-p-head span{color:#9a9a9a}
.ccd-p-x{display:grid;place-items:center;width:26px;height:26px;margin-left:auto;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#d0d0d0;cursor:pointer}
.ccd-p-target{order:1;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#b5b5b5}
.ccd-p-ib{display:inline-flex;align-items:center;font-size:13px;color:#8a8a8a}
.ccd-p-ib i{width:1px;height:12px;margin-left:2px;background:currentColor}
.ccd-p-status{order:2;display:flex;align-items:center;gap:8px;min-height:18px;font-size:12px;color:#b9b9b9}
.ccd-p-status b{font-size:13px;font-weight:600;color:#ececec}
.ccd-p-draft{order:3;padding:0 4px;font-size:13.5px;line-height:1.45;color:#f2f2f2;white-space:pre-wrap}
.ccd-p-field{order:4;display:flex;align-items:center;gap:8px;min-height:46px;padding:7px 7px 7px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.12)}
.ccd-p-text{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#a8a8a8}
.ccd-p-text.is-placeholder{color:#8a8a8a}
.ccd-p-stop{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#3d3d3d;cursor:pointer}
.ccd-p-stop i{width:9px;height:9px;border-radius:2px;background:#f2f2f2}
.ccd-p-mic{display:none;flex:none;place-items:center;width:30px;height:30px;border-radius:50%;background:#333;color:#9a9a9a}
.ccd-p-foot{order:6;display:flex;align-items:center;gap:16px;min-height:30px;font-size:12.5px;color:#a8a8a8}
.ccd-p-presets{display:inline-flex;align-items:center;gap:5px}
.ccd-p-more{display:none}
.ccd-p-rewrite{margin-left:auto;padding:7px 12px;border-radius:7px;background:#333;color:#7d7d7d}
.ccd-p-insert{display:none;margin-left:auto;padding:8px 16px;border:0;border-radius:7px;background:#f2f2f2;color:#111;font:600 12.5px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;cursor:pointer}
.ccd-p-done{display:none}
.ccd-p-done span{font-size:15px}
.ccd-panel[data-state=listen] .ccd-p-field,.ccd-panel[data-state=transcribing] .ccd-p-field{order:2}
.ccd-panel[data-state=listen] .ccd-p-status,.ccd-panel[data-state=transcribing] .ccd-p-status{order:3}
.ccd-panel[data-state=listen] .ccd-p-draft,.ccd-panel[data-state=transcribing] .ccd-p-draft{display:none}
.ccd-panel:not([data-state=listen]) .ccd-p-stop{display:none}
.ccd-panel:not([data-state=listen]) .ccd-p-mic{display:grid}
.ccd-panel[data-state=preview] .ccd-p-more{display:inline}
.ccd-panel[data-state=preview] .ccd-p-rewrite{display:none}
.ccd-panel[data-state=preview] .ccd-p-insert{display:inline-flex;animation:ccdCall 1.8s ease-in-out infinite}
.ccd-panel[data-state=done]>*{display:none}
.ccd-panel[data-state=done] .ccd-p-done{display:flex}
.ccd-meter{display:inline-flex;align-items:center;gap:3px}
.ccd-meter i{width:3px;height:3px;border-radius:50%;background:#9a9a9a;animation:ccdDot 1s ease-in-out infinite}
.ccd-meter i:nth-child(2){animation-delay:.12s}.ccd-meter i:nth-child(3){animation-delay:.24s}.ccd-meter i:nth-child(4){animation-delay:.36s}.ccd-meter i:nth-child(5){animation-delay:.48s}
.ccd-spinner{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;border:1.6px solid currentColor;border-right-color:transparent;animation:ccdSpin .8s linear infinite}
@keyframes ccdDot{0%,100%{transform:none;opacity:.5}50%{transform:scale(1.7);opacity:1}}
@keyframes ccdCall{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}60%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}

/* What was said: words light up as they're spoken; cleanup strikes the filler */
.ccd-said{max-width:920px;min-height:2.7em;margin:42px auto 0;text-align:center;font:italic 400 clamp(19px,2vw,26px)/1.35 var(--serif);color:var(--ink);text-wrap:balance}
.ccd-said s{color:#777;text-decoration-thickness:1.5px}
.ccd-said .w{position:relative;opacity:.3;transition:opacity 180ms var(--ease),color 300ms}
.ccd-said .w.is-said{opacity:1}
.ccd-said .w.f.is-said{color:#8a8a8a}
.ccd-said .w.f::after{content:"";position:absolute;left:-1px;right:-1px;top:56%;height:1.5px;border-radius:1px;background:#cfcfcf;transform:scaleX(0);transform-origin:0 50%;transition:transform 380ms var(--ease)}
.ccd-said.is-cleaning .w.f{opacity:.55}
.ccd-said.is-cleaning .w.f::after{transform:none}

/* Hint and the one button that drives the demo */
.ccd-controls{display:none;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 24px;margin-top:18px}
.js .ccd-controls{display:flex}
.ccd-hint{display:flex;align-items:center;gap:12px;min-height:36px;margin:0;font-size:15px;color:var(--ink-soft)}
.ccd-hint b{font-weight:500;color:var(--ink)}
.ccd-keys{display:flex;gap:6px}
.ccd-keys:empty{display:none}
.ccd-keys.is-down .key{--depth:1px}
.ccd-action{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:196px;min-height:52px;padding:0 24px 0 20px;border:0;border-radius:999px;background:#EDEDED;color:#0B0B0B;font:500 16px/1 var(--sans);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 14px 34px -14px rgba(0,0,0,.8);transition:transform 200ms var(--ease),background-color 200ms,color 200ms}
.ccd-action-icon{display:grid;place-items:center;width:18px;height:18px}
.ccd-action-icon svg{display:block}
@media(hover:hover) and (pointer:fine){.ccd-action:hover{background:#fff}}
.ccd-action:active,.ccd-action.is-down{transform:scale(.97)}
.ccd-action.is-down::before,.ccd-action.is-waiting::before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(255,255,255,.4);pointer-events:none;animation:ccdRing 1.1s ease-out infinite}
.ccd-action[aria-disabled=true]{background:#1d1d1d;color:#9a9a9a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);cursor:default;transform:none}
@keyframes ccdRing{from{opacity:1;transform:scale(.97)}to{opacity:0;transform:scale(1.1)}}
.ccd-action:focus-visible,.ccd-mode:focus-visible,.ccd-voice:focus-visible,.ccd-p-x:focus-visible,.ccd-p-stop:focus-visible,.ccd-p-insert:focus-visible{outline:2px solid #EDEDED;outline-offset:3px}

@media(max-width:720px){.ccd-panel{top:auto;bottom:12px;left:12px;right:12px;width:auto;gap:10px;transform-origin:50% 100%}}
@media(max-width:560px){
  .ccd{border-radius:20px}
  .ccd-term{height:430px;border-radius:12px}
  .ccd-bar{height:30px}.ccd-bar i{width:10px;height:10px}.ccd-bar span{font-size:11px;line-height:30px}
  .ccd-body{padding:12px 12px 10px;font-size:11.5px;line-height:17px}
  .ccd-welcome{gap:12px;padding:9px 14px 9px 10px}.ccd-welcome img{width:30px;height:30px}
  .ccd-row,.ccd-res,.ccd-msg,.ccd-input{gap:8px}.ccd-res{padding-left:18px}
  .ccd-field{min-height:17px;max-height:calc(17px * 6)}
  .ccd-cur{width:7px;height:13px}
  .ccd-mode{height:34px;padding:0 12px 0 10px;font-size:12px}
  .ccd-voice{height:34px;padding:0 10px}
  .ccd-voice span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ccd-said{margin-top:38px;font-size:19px}
  .ccd-hint{justify-content:center;flex-wrap:wrap;text-align:center;font-size:14px}
  .ccd-action{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .ccd-msg,.ccd-row,.ccd-res,.ccd-typed.is-new,.ccd-wave i,.ccd-meter i,.ccd-cur,.ccd-panel[data-state=preview] .ccd-p-insert,.ccd-action::before{animation:none}
  .ccd-panel,.ccd-pill,.ccd-said .w,.ccd-said .w.f::after,.ccd-action,.ccd-mode,.ccd-voice{transition:none}
}


/* Annotate demo: a recreated course page the visitor circles and asks about (landing-annotate.js).
   It reuses the Claude Code demo's frame, steps and controls. Without the script it shows the page
   and hides the controls and the overlay. Overlay colours and sizes follow the Mac app. */
.annot .ccdemo-copy p+p{margin-top:16px}
.annot-try{display:none}
.js .annot-try{display:block;color:var(--ink)}
.annot-kicker-mark{width:18px;height:18px;flex:none;border-radius:50%;background:conic-gradient(#8B5CF6,#3B82F6,#22D3EE,#EC4899,#8B5CF6);-webkit-mask:radial-gradient(circle,transparent 5.5px,#000 6.5px);mask:radial-gradient(circle,transparent 5.5px,#000 6.5px)}
.and-screen{--sys:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--notch:150px;--spring:cubic-bezier(.34,1.36,.64,1);position:relative;container-type:inline-size;border-radius:14px;overflow:hidden;background:#fbfbfa;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 30px 80px -30px rgba(0,0,0,.8);font-family:var(--sys);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.and-screen.is-annotating{touch-action:none}
.and-menubar{position:relative;display:flex;align-items:center;gap:16px;height:24px;padding:0 14px;background:#e8e8eb;color:#1d1d1f;font:500 12px/1 var(--sys)}
.and-menubar b{font-weight:700}
.and-apple{display:block;flex:none}
.and-notch{position:absolute;top:0;left:50%;width:var(--notch);height:24px;border-radius:0 0 10px 10px;background:#000;transform:translateX(-50%)}
.and-clock{margin-left:auto}
.and-bar{position:relative;display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#f1f1f2;border-bottom:1px solid #e0e0e3}
.and-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.and-bar i:nth-child(2){background:#febc2e}
.and-bar i:nth-child(3){background:#28c840}
.and-bar span{position:absolute;top:6px;left:50%;width:min(46%,360px);height:24px;border-radius:7px;background:#e3e3e6;color:#6b6b70;font:400 12px/24px var(--sys);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translateX(-50%)}
.and-page{padding:20px 26px 24px;color:#1d1d1f;font:400 14px/1.55 var(--sys)}
.and-page-head{width:fit-content}
.and-page-head p{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#86868b}
.and-page-head h3{margin:2px 0 0;font-size:22px;font-weight:650;line-height:1.2;letter-spacing:-.01em}
.and-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"reading quiz" "note quiz";gap:14px;align-items:start;margin-top:14px}
.and-card{padding:14px 16px;border:1px solid #e7e7e4;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.and-card p{margin:0}
.and-label{margin-bottom:6px!important;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#86868b}
.and-reading{grid-area:reading;color:#2a2a2c}
.and-quiz{grid-area:quiz}
.and-q{margin-bottom:12px!important;font-size:16.5px;font-weight:600;line-height:1.35}
.and-options{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.and-options li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #ececea;border-radius:9px;font-size:14.5px}
.and-options i{width:15px;height:15px;flex:none;border:1.5px solid #c4c4c8;border-radius:50%}
.and-timer{margin-top:12px!important;font-size:12.5px;color:#86868b}
.and-note{grid-area:note;border-color:#f0e3c4;background:#fffaf0}
.and-from{display:flex;align-items:center;gap:10px;margin-bottom:8px;line-height:1.3}
.and-avatar{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#e9a23b;color:#fff;font-size:13px;font-weight:700}
.and-from b{display:block;font-size:13px;font-weight:600}
.and-from small{display:block;font-size:11.5px;color:#86868b}
.and-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}

/* The hint at the top, under the notch */
.and-pill{position:absolute;top:34px;left:50%;z-index:4;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);min-height:36px;padding:0 7px 0 14px;border-radius:18px;background:rgba(0,0,0,.86);box-shadow:inset 0 0 0 .75px rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.35);color:#fff;font:600 13px/1.25 var(--sys);white-space:nowrap;opacity:0;visibility:hidden;transform:translate(-50%,-12px);transition:opacity 250ms,transform 450ms var(--spring),visibility 0s 450ms}
.and-pill.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity 250ms,transform 450ms var(--spring),visibility 0s}
.and-pill-icon{display:grid;place-items:center;width:15px;height:15px;flex:none}
.and-pill-icon svg{display:block}
.and-pill-icon .and-i-translate,.and-pill-icon .ccd-spinner,.and-pill.is-translate .and-i-spark,.and-pill.is-busy svg{display:none}
.and-pill.is-translate .and-i-translate{display:block}
.and-pill.is-busy .ccd-spinner{display:inline-block}
.and-pill-text{overflow:hidden;text-overflow:ellipsis}
.and-pill-sub{font-size:12px;font-weight:400;color:rgba(255,255,255,.55)}
.and-pill.is-notice{white-space:normal;padding-block:8px}
.and-pill.is-notice .and-pill-text{color:rgba(253,186,116,.95)}
.and-pill.is-notice .and-pill-sub,.and-pill.is-busy .and-pill-sub{display:none}
.and-x{display:grid;place-items:center;width:22px;height:22px;flex:none;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);cursor:pointer}

/* The ask bar, under the circle */
.and-ask{position:absolute;top:0;left:0;z-index:4;width:min(440px,calc(100% - 24px));padding:12px;border:1px solid transparent;border-radius:18px;background:linear-gradient(#0d0d0e,#0d0d0e) padding-box,linear-gradient(90deg,rgba(139,92,246,.55),rgba(59,130,246,.55),rgba(34,211,238,.55),rgba(236,72,153,.55)) border-box;box-shadow:0 8px 22px rgba(139,92,246,.25);color:#fff;font:400 14px/1.3 var(--sys);opacity:0;visibility:hidden;transform:scale(.94);transform-origin:50% 0;transition:opacity 250ms,transform 400ms var(--spring),visibility 0s 400ms}
.and-ask.is-on{opacity:1;visibility:visible;transform:none;transition:opacity 250ms,transform 400ms var(--spring),visibility 0s}
.and-field{display:flex;align-items:center;gap:8px;height:42px;margin:0;padding:0 6px 0 12px;border-radius:12px;background:rgba(255,255,255,.07)}
.and-field-spark{display:block;flex:none}
.and-field input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:#fff;font:400 14px var(--sys);outline:none;-webkit-user-select:text;user-select:text}
.and-field input::placeholder{color:rgba(255,255,255,.45)}
.and-mic,.and-send{display:grid;place-items:center;width:28px;height:28px;flex:none;padding:0;border:0;border-radius:50%;color:#fff;cursor:pointer}
.and-mic svg,.and-send svg{display:block}
.and-mic{background:rgba(255,255,255,.1);transition:background-color 150ms}
.and-mic.is-listening{background:#ff3b30;animation:andMic 1.1s ease-out infinite}
@keyframes andMic{from{box-shadow:0 0 0 0 rgba(255,59,48,.55)}to{box-shadow:0 0 0 9px rgba(255,59,48,0)}}
.and-send{background:linear-gradient(90deg,#8B5CF6,#3B82F6,#22D3EE,#EC4899)}
.and-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.and-chips button{height:26px;padding:0 10px;border:.5px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font:500 12px/1 var(--sys);cursor:pointer;transition:background-color 150ms,color 150ms}
@media(hover:hover) and (pointer:fine){.and-chips button:hover,.and-mic:hover,.and-x:hover{background:rgba(255,255,255,.16);color:#fff}}
.and-status{display:none;align-items:center;gap:7px;margin:10px 0 0;font-size:12px;color:rgba(255,255,255,.6)}
.and-status.is-on{display:flex}

/* Chat, opening out of the notch */
.and-chat{position:absolute;top:0;left:50%;z-index:5;display:flex;flex-direction:column;width:min(400px,calc(100% - 24px));max-height:calc(100% - 14px);padding:32px 16px 10px;border-radius:0 0 26px 26px;background:#000;box-shadow:0 30px 60px -20px rgba(0,0,0,.75);color:#f1f1f1;font:400 13.5px/1.55 var(--sys);transform:translateX(-50%);clip-path:inset(0 calc(50% - var(--notch) / 2) calc(100% - 24px) round 0 0 10px 10px);visibility:hidden;transition:clip-path 520ms var(--ease),visibility 0s 520ms}
.and-chat.is-on{clip-path:inset(0 round 0 0 26px 26px);visibility:visible;transition:clip-path 560ms var(--ease),visibility 0s}
.and-chat>*{opacity:0;transition:opacity 150ms}
.and-chat.is-on>*{opacity:1;transition:opacity 300ms 200ms}
.and-chat-head{display:flex;align-items:center;gap:8px;padding:0 2px 10px;font-size:14px}
.and-chat-head svg{display:block;flex:none}
.and-chat-head b{flex:1;overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.and-chat-body{flex:1;min-height:0;overflow-y:auto;padding:2px;scrollbar-width:none;-webkit-user-select:text;user-select:text}
.and-chat-body::-webkit-scrollbar{display:none}
.and-you{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.and-attach{display:flex;align-items:center;gap:10px;padding:7px 12px;border:1px solid #2a2a2a;border-radius:12px;background:#171717;line-height:1.3}
.and-attach svg{display:block;flex:none;color:#bdbdbd}
.and-attach b{display:block;font-size:13px;font-weight:600}
.and-attach small{display:block;font-size:11.5px;color:#9a9a9a}
.and-bubble{max-width:88%;margin:0;padding:8px 13px;border-radius:16px;background:#2b2b2d;color:#f2f2f2}
.and-answer{margin-top:14px;color:#e4e4e4}
.and-answer p{margin:0 0 8px}
.and-answer ul{margin:0 0 8px;padding-left:18px}
.and-answer li{margin:3px 0}
.and-answer b{font-weight:650;color:#fff}
.and-thinking{display:inline-block;background:linear-gradient(90deg,#5e5e5e 30%,#e6e6e6 50%,#5e5e5e 70%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:andThink 1.4s linear infinite}
@keyframes andThink{from{background-position:100% 0}to{background-position:-50% 0}}
.and-chat-fine{margin:8px 0 0;font-size:11.5px;color:#6f6f6f;text-align:center}

/* Translate card */
.and-card-tr{position:absolute;top:0;left:0;z-index:4;width:min(420px,calc(100% - 24px));padding:14px 16px 12px;border-radius:16px;background:rgba(22,22,24,.97);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 50px -16px rgba(0,0,0,.7);color:#f2f2f2;font:400 14px/1.5 var(--sys);opacity:0;visibility:hidden;transform:scale(.96);transform-origin:50% 0;transition:opacity 250ms,transform 400ms var(--spring),visibility 0s 400ms}
.and-card-tr.is-on{opacity:1;visibility:visible;transform:none;transition:opacity 250ms,transform 400ms var(--spring),visibility 0s}
.and-tr-head{display:flex;align-items:center;gap:8px;font-size:13px;color:#cfcfcf}
.and-tr-head svg{display:block;flex:none}
.and-tr-head select{height:26px;padding:0 26px 0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23ccc' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center/9px;color:#fff;font:500 13px var(--sys);cursor:pointer;-webkit-appearance:none;appearance:none}
.and-tr-head option{color:#111}
.and-tr-text{margin:10px 0 6px;font-size:15.5px;line-height:1.5;color:#fff;white-space:pre-line;-webkit-user-select:text;user-select:text;animation:fadeUp .3s var(--ease)}
.and-tr-original{margin:0;overflow:hidden;font-size:12px;color:#8d8d8d;white-space:nowrap;text-overflow:ellipsis}
.and-tr-foot{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:#9a9a9a}
.and-tr-foot kbd{padding:3px 7px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.08);color:#cfcfcf;font:500 11px var(--sys)}
.and-tr-foot>span{margin-right:auto}
.and-tr-foot button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:9px;background:rgba(255,255,255,.1);color:#fff;font:500 13px var(--sys);cursor:pointer}
.and-tr-foot button svg{display:block}
@media(hover:hover) and (pointer:fine){.and-tr-foot button:hover{background:rgba(255,255,255,.17)}}
.and :is(.and-x,.and-mic,.and-send,.and-chips button,.and-tr-foot button,select):focus-visible{outline:2px solid #fff;outline-offset:2px}
.and-field:focus-within{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* Narrow screens: one column, a shorter reading */
@container (max-width:640px){
  .and-screen{--notch:96px}
  .and-menubar{gap:12px}
  .and-menubar>span:not(.and-notch):not(.and-clock){display:none}
  .and-bar span{width:62%}
  .and-page{padding:14px 14px 16px;font-size:13px}
  .and-page-head h3{font-size:18px}
  .and-cols{grid-template-columns:minmax(0,1fr);grid-template-areas:"quiz" "note" "reading";gap:10px;margin-top:10px}
  .and-card{padding:12px}
  .and-reading p:last-child{display:-webkit-box;overflow:hidden;-webkit-line-clamp:4;-webkit-box-orient:vertical}
  .and-q{font-size:15px}
  .and-options{grid-template-columns:1fr 1fr;gap:6px}
  .and-options li{gap:8px;padding:6px 8px;font-size:13px}
  .and-timer{display:none}
  .and-pill-sub{display:none}
  .and-chat{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){
  .and-pill,.and-pill.is-on,.and-ask,.and-ask.is-on,.and-chat,.and-chat.is-on,.and-chat>*,.and-chat.is-on>*,.and-card-tr,.and-card-tr.is-on{transition:none}
  .and-mic.is-listening,.and-thinking,.and-tr-text{animation:none}
}

/* Everyday: a scroll row by default, a turning 3D ring on wide motion screens */
.everyday{position:relative}
.everyday-stage{padding:clamp(80px,10vw,140px) 0;overflow:hidden}
.everyday-head{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.everyday-head h2{max-width:640px}
.ring-viewport{margin-top:48px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gutter) 24px;scrollbar-width:none}
.ring-viewport::-webkit-scrollbar{display:none}
.ring{display:flex;gap:20px;width:max-content}
.ring-card{flex:none;width:min(82vw,440px);min-height:396px;padding:32px;border-radius:var(--r-lg);border:1px solid var(--line-2);display:flex;flex-direction:column;gap:20px;scroll-snap-align:center;background:var(--surface);box-shadow:var(--raise)}
.ring-card-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ring-card h3{margin:0;font:400 34px/1.1 var(--serif);letter-spacing:-.01em}
.ring-card-title span{font-size:13px;color:var(--ink-mute)}
.ring-card .said{margin:0;font-size:16px;line-height:1.6;color:#A0A0A0}
.ring-card .clean{margin:auto 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:18px;line-height:1.55;color:var(--ink)}
.everyday-apps{display:flex;align-items:center;flex-wrap:wrap;gap:20px;min-height:40px}
.everyday-app{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);font-size:13px;line-height:1.3;white-space:nowrap}
.everyday-app img{display:block;flex:none;width:40px;height:40px;object-fit:contain;border-radius:9px}
.everyday-app img[src$="gmail-transparent.png"]{padding:6px}
.ring-mode .everyday{height:340vh}
.ring-mode .everyday-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding:104px 0 32px}
.ring-mode .everyday-head{width:100%}
.ring-mode .ring-viewport{position:relative;flex:1;margin:0;padding:0;overflow:visible;perspective:1700px;perspective-origin:50% 45%}
.ring-mode .ring{position:absolute;left:50%;top:50%;width:0;height:0;display:block;transform-style:preserve-3d;transform:translateZ(calc(var(--radius) * -1)) rotateX(var(--tilt-x,0deg)) rotateY(calc(var(--rot,0deg) + var(--tilt-y,0deg)))}
.ring-mode .ring-card{position:absolute;left:0;top:0;width:var(--card-w,420px);min-height:390px;backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:var(--o,1);transform:translate(-50%,-50%) rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius))}
.ring-mode .ring-card:hover{border-color:rgba(255,255,255,.26)}
@media(max-width:420px){.ring-card{padding:24px}.everyday-apps{gap:16px}.ring-card h3{font-size:30px}}

/* Tuned */
.tune{padding:clamp(96px,12vw,160px) var(--gutter)}
.tune-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:56px 80px}
.tune-list{display:grid;border-top:1px solid var(--line)}
.tune-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:26px 18px;margin:0 -18px;border-radius:var(--r-md);border-bottom:1px solid var(--line);transition:transform 360ms var(--ease)}
.tune-row h3{margin:0 0 6px;font-size:17px;font-weight:500}
.tune-row p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.tune-keys{display:flex;gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;font-size:13px}
.chips span{padding:6px 12px;border-radius:999px;background:#181818;border:1px solid var(--line);transition:border-color 200ms,transform 300ms var(--ease)}
@media(hover:hover) and (pointer:fine){.tune-row:hover{transform:translateX(6px)}.tune-row:hover .chips span{border-color:var(--line-2)}.tune-row:hover .chips span:nth-child(2){transform:translateY(-2px)}}

/* Privacy */
.privacy{padding:clamp(72px,10vw,140px) var(--gutter);overflow-x:clip}
.privacy-inner{max-width:var(--max);margin:0 auto}
.privacy-lines{display:grid;gap:8px;font:400 clamp(32px,4.8vw,64px)/1.1 var(--serif);letter-spacing:-.02em}
.privacy-lines p{margin:0;opacity:calc(.2 + var(--l,1) * .8);transform:translateX(calc((1 - var(--l,1)) * 28px))}
.privacy-lines .soft{color:var(--ink-2)}
.privacy-note{margin:48px 0 0;max-width:560px;font-size:14px;line-height:1.65;color:var(--ink-soft)}

/* Download */
.download{position:relative;padding:clamp(72px,10vw,140px) var(--gutter);border-top:1px solid rgba(255,255,255,.06)}
.download-glow{position:absolute;left:50%;top:45%;width:min(90vw,1000px);height:520px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(110,110,110,.2),transparent)}
.download-inner{position:relative;max-width:var(--max);margin:0 auto}
.download-mobile{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:520px}
.download-grid{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dl-card{position:relative;display:flex;flex-direction:column;gap:24px;padding:36px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--raise)}
.dl-card h3{margin:0 0 6px;font:400 38px/1.1 var(--serif);letter-spacing:-.01em}
.dl-card p{margin:0;font-size:14px;color:var(--ink-soft)}
.dl-os{display:block;width:30px;height:30px;object-fit:contain;filter:invert(1)}
.dl-os-win{width:28px;height:28px;filter:none}
.dl-badge{position:absolute;top:22px;right:22px;font-size:12px;color:var(--ink-2)}
.dl-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft)}
.dl-meta a{text-decoration:none}
.release-notice{max-width:900px;margin:20px 0 0;font-size:14px;line-height:1.7;color:var(--ink-soft)}

/* FAQ */
.faq{padding:clamp(72px,10vw,140px) var(--gutter)}
.faq-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:40px 80px;align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;cursor:pointer;font-size:17px;line-height:1.4;transition:color 160ms}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:#fff}
.faq-symbol{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);transition:transform 360ms var(--ease),background-color 200ms,border-color 200ms}
.faq-symbol::before,.faq-symbol::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;border-radius:2px;background:#D0D0D0;transform:translate(-50%,-50%)}
.faq-symbol::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item summary:hover .faq-symbol{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.faq-item[open] .faq-symbol{transform:rotate(135deg)}
.faq-item p{margin:0;padding:0 40px 24px 0;font-size:16px;line-height:1.7;color:var(--ink-soft);animation:fadeUp .35s var(--ease)}

/* Close: static by default; with the dive it becomes the camera pulling back out of the mark */
.close{position:relative;padding:clamp(120px,16vw,200px) var(--gutter);overflow-x:clip}
.close-stage{position:relative;max-width:var(--max);margin:0 auto;text-align:center}
.close-light{position:absolute;inset:-30% -10%;pointer-events:none;background:radial-gradient(40% 50% at 50% 40%,rgba(120,120,120,.2),transparent 70%)}
.close-mark img{display:block;width:min(46vw,240px);height:auto;margin:0 auto 40px}
.close-canvas{display:none}
.close-copy{position:relative}
.close-copy h2{margin:0 auto;max-width:960px;font:400 clamp(46px,7.6vw,116px)/.95 var(--serif);letter-spacing:-.03em}
.close-actions{margin-top:48px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.close.is-3d{height:260vh;padding:0}
.close.is-3d .close-stage{position:sticky;top:0;height:100vh;height:100svh;max-width:none;overflow:hidden}
.close.is-3d .close-mark{display:none}
.close.is-3d .close-light{inset:0;background:radial-gradient(34% 40% at 50% var(--ly,36%),rgba(130,130,130,.2),transparent 70%)}
.close.is-3d .close-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.close.is-3d .close-copy{position:absolute;left:var(--gutter);right:var(--gutter);top:var(--copy-top,58%);opacity:var(--cin,0);translate:0 calc((1 - var(--cin,0)) * 34px)}
.close.is-3d .close-copy.is-hidden{visibility:hidden}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:48px var(--gutter) 56px}
.footer-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;font-size:14px}
.footer-brand{display:flex;align-items:center;gap:8px;align-self:start;font:400 22px/1 var(--serif)}
.footer-brand .brand-mark{width:30px;height:30px;border-radius:7px}
.footer-col{display:grid;gap:10px;align-content:start}
.footer-col a{color:var(--ink-soft);text-decoration:none;transition:color 160ms}
.footer-col a:hover{color:var(--ink)}
.footer-copy{max-width:var(--max);margin:40px auto 0;font-size:13px;color:var(--ink-mute)}

@media(max-width:860px){[data-r="two"],[data-r="split"]{grid-template-columns:1fr}[data-r="foot"]{grid-template-columns:1fr 1fr}}
@media(max-width:640px){[data-r="foot"]{gap:28px 16px}.download .dl-card{padding:28px}}
@media(prefers-reduced-motion:reduce){
  .marquee{animation:none;width:auto;flex-wrap:wrap;justify-content:center;padding:0 24px}
  .marquee-set{flex-wrap:wrap;justify-content:center;gap:32px}
  .marquee-set[aria-hidden]{display:none}
  .marquee img{margin:0}
  .cleanup-wave span,.sentence-caret{animation:none}
}

/* What's new: Chat in the notch */
.nw{position:relative;padding:clamp(72px,9vw,130px) var(--gutter);overflow-x:clip}
.nw-inner{max-width:var(--max);margin:0 auto}
.nw-kicker{margin:0 0 22px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.nw h2{margin:0;font:400 clamp(38px,5.4vw,72px)/1 var(--serif);letter-spacing:-.025em}
.nw-text h2{margin-bottom:28px}
.nw-text p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-soft);max-width:520px}
.nw-text p+p{margin-top:16px}
.nw-text .nw-fine{font-size:15px;color:var(--ink-mute)}
.nw-shot{margin:0;border-radius:var(--r-lg);border:1px solid var(--line-2);background:#0E0E0E;overflow:hidden;box-shadow:var(--raise)}
.nw-shot img{display:block;width:100%;height:auto}
.nw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
/* The notch render carries its own rounded shape and shadow. */
.nw-shot-bare{justify-self:center;width:min(100%,460px);border:0;border-radius:0;background:none;box-shadow:none}
@media(max-width:960px){.nw-grid{grid-template-columns:1fr}}