@font-face{font-family:NextDisplay;src:url('assets/display.woff') format('woff');font-style:normal;font-weight:600 800;font-display:swap}
@font-face{font-family:NextBody;src:url('assets/body.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:NextBody;src:url('assets/body-bold.woff') format('woff');font-style:normal;font-weight:600 800;font-display:swap}
@font-face{font-family:NextMono;src:url('assets/mono.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;--ink:#090d12;--surface:#10161d;--surface-raised:#161e27;--border:#28323d;--line:#202a35;--text:#f1f3f4;--muted:#a7b1bf;--quiet:#8d9aab;--accent:#98dfe5;--accent-strong:#b5edf0;--accent-ink:#102b31;--warm:#d6a995;--display:NextDisplay,'Century Gothic',Arial,sans-serif;--body:NextBody,Arial,sans-serif;--mono:NextMono,'Courier New',monospace;--radius:14px;--radius-small:8px;--scroll-thumb:#455564;--scroll-track:#0d131a;--scroll-hover:#78909f;--scroll-active:#98dfe5;--header-height:82px}
*,*::before,*::after{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:var(--scroll-track)}*::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:2px solid var(--scroll-track);border-radius:8px}*::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover)}*::-webkit-scrollbar-thumb:active{background:var(--scroll-active)}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 22px);scrollbar-gutter:stable}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.dialog-open{overflow:hidden}
body:has(dialog[open]) .mobile-sticky-cta{visibility:hidden}
::selection{background:var(--accent);color:var(--accent-ink)}
[hidden]{display:none!important}
img,video{display:block;max-width:100%;object-fit:cover}
button,input{font:inherit}
button,a,summary,label:has(input){-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}
button,a{color:inherit}
a{text-decoration:none}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
button{border:0}
a,button,summary,input{scroll-margin-block:calc(var(--header-height) + 24px) 120px}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
h1,h2,h3,p,figure,blockquote{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:700}
h1,h2{letter-spacing:-.055em;line-height:1.12;text-wrap:balance}
h2{font-size:clamp(2.1rem,3.7vw,3.1rem)}
h3{font-size:1.1rem;letter-spacing:-.025em;line-height:1.35}
p{color:var(--muted)}
svg{display:block;flex-shrink:0}
.icon,.feature-icon,.portrait-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.feature-icon{width:29px;height:29px;color:var(--accent)}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.container{width:min(1180px,calc(100% - 64px));margin-inline:auto}
.section{padding-block:88px}
.section-tinted{background:linear-gradient(125deg,#10161de6,#0e141ae6);border-block:1px solid var(--line)}
.section-heading{max-width:680px}
.section-heading .eyebrow{margin-bottom:20px}
.section-heading p:not(.eyebrow){margin-top:23px;max-width:620px;font-size:1.08rem;line-height:1.7}
.section-heading p + p:not(.eyebrow){margin-top:15px}
.center-heading{text-align:center;margin-inline:auto;max-width:850px}
.center-heading p:not(.eyebrow){margin-inline:auto;max-width:720px}
.split-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;max-width:none;margin-bottom:48px}
.split-heading>p:not(.eyebrow){max-width:330px;margin:0;font-size:1rem}
.eyebrow{color:var(--accent);font-family:var(--mono);font-size:.75rem;letter-spacing:.13em;line-height:1.8;display:flex;align-items:center;gap:12px}
.center-heading .eyebrow,.final-cta .eyebrow{justify-content:center}
.eyebrow-rule{width:25px;height:1px;background:var(--accent);flex-shrink:0}
.accent-text{color:var(--accent)}
.muted-heading{color:var(--muted)}
.small-note{font-size:.81rem;color:var(--quiet);line-height:1.55}
.center{text-align:center}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:var(--accent);color:var(--accent-ink);padding:17px 25px;border-radius:var(--radius-small);min-height:56px;font-weight:700;font-size:1rem;line-height:1.35;transition:background .2s,transform .2s,box-shadow .2s;text-align:center;flex-shrink:0}
.button .icon{width:20px;height:20px;stroke-width:1.8}
.button:hover{background:var(--accent-strong);box-shadow:0 0 28px #98dfe513;transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.button-small{padding:12px 18px;min-height:44px;font-size:.9rem;gap:12px}
.button-outline{border:1px solid var(--border);background:transparent;color:var(--text)}
.button-outline:hover{background:var(--surface-raised)}
.button:disabled{background:#29353e;color:#adb9c3;box-shadow:none;transform:none}
.text-link{display:inline-flex;align-items:center;gap:12px;font-size:.95rem;font-weight:700;min-height:44px;transition:color .2s}
.text-link:hover{color:var(--accent)}
.text-link:active{color:var(--accent-strong)}
.text-link span{font-size:1.3em}
.skip-link{position:fixed;left:18px;top:-70px;z-index:200;background:var(--accent);color:var(--ink);padding:12px 20px;border-radius:8px}
.skip-link:focus{top:12px}
.site-header{height:var(--header-height);position:sticky;top:0;z-index:50;background:#090d12eb;border-bottom:1px solid #ffffff0c;backdrop-filter:blur(18px)}
.nav-shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--display);font-size:1.63rem;letter-spacing:-.07em;line-height:1.2;flex-shrink:0}
.brand-mark{display:grid;place-items:center;width:31px;height:33px;font-size:1.55rem;line-height:1;letter-spacing:-.09em;border:1px solid #98dfe53b;color:var(--accent);border-radius:6px;transform:skew(-6deg)}
.brand-meta{color:var(--muted)}
.brand-period{color:var(--accent)}
.brand:hover .brand-meta{color:var(--text)}
.desktop-nav{display:flex;align-items:center;gap:28px}
.desktop-nav a{color:var(--muted);font-size:.9rem;min-height:44px;display:flex;align-items:center;transition:color .2s}
.desktop-nav a:hover{color:var(--text)}
.menu-toggle{display:none;min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:8px;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.menu-toggle span{width:19px;height:1.5px;background:var(--text);transition:transform .2s}
.menu-toggle:hover{background:var(--surface-raised)}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-menu{position:absolute;top:calc(var(--header-height) - 1px);left:0;right:0;background:#111820;border:1px solid var(--border);border-radius:0 0 12px 12px;padding:12px 20px;box-shadow:0 20px 50px #0008;max-height:calc(100dvh - var(--header-height) - 90px);overflow:auto}
.mobile-menu a{display:flex;align-items:center;justify-content:space-between;padding:14px 8px;min-height:48px;font-size:1rem;border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{color:var(--accent);border:0}
.mobile-menu a:hover{background:var(--surface-raised)}
.hero{position:relative;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:36px;padding-top:65px;padding-bottom:68px;min-height:800px}
.hero-copy{position:relative;z-index:2}
.hero-copy .eyebrow{margin-bottom:25px}
.hero h1{font-size:clamp(3.1rem,4.85vw,4.4rem);line-height:1.11;max-width:650px;letter-spacing:-.055em}
.hero h1 .accent-text{display:block}
.hero-description{font-size:1.125rem;line-height:1.65;max-width:510px;margin-top:26px}
.hero-actions{display:flex;align-items:flex-start;flex-direction:column;gap:10px;margin-top:30px}
.creator-byline{display:flex;gap:12px;align-items:center;margin-top:28px}
.initials{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,#2c3a46,#151d26);border:1px solid #4b5e6b;font-family:var(--display);font-size:.85rem;color:#d2e6e9}
.creator-byline>div{display:flex;flex-direction:column;gap:1px;font-size:.9rem;color:var(--muted)}
.creator-byline strong{color:var(--text);font-weight:400}
.creator-byline .byline-sub{font-size:.8rem;color:var(--quiet)}
.hero-visual{position:relative;min-width:0;padding-top:12px}
.hero-visual::before{content:'';position:absolute;inset:5% -3%;background:radial-gradient(ellipse,#68b4c315,transparent 68%);pointer-events:none}
.visual-caption{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--quiet);padding:0 14px 20px}
.reel-stack{height:575px;position:relative;isolation:isolate}
.hero-reel{position:absolute;left:14%;top:0;width:300px;aspect-ratio:9/16;border:1px solid #9daab04d;border-radius:15px;box-shadow:0 26px 75px #0009;transform:rotate(-4deg);z-index:2}
.media-card{background:var(--surface-raised);padding:0;isolation:isolate;overflow:hidden;text-align:left;position:relative;color:var(--text)}
.media-card>img,.media-card>.preview-video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .65s}
.media-card>.preview-video{z-index:0;pointer-events:none}
.media-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#050b1138 0%,transparent 34%,#050b1180 63%,#050b11e8 100%);z-index:1;pointer-events:none}
.media-card:hover>img{transform:scale(1.035)}
.media-card:active .play-button{transform:translate(-50%,-50%) scale(.94)}
.hero-reel.media-card{position:absolute}
.hero-reel:hover{border-color:var(--accent)}
.reel-back{position:absolute;left:40%;top:25px;width:250px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:1px solid #687b8e55;transform:rotate(9deg);z-index:0}
.reel-back img{width:100%;height:100%;filter:brightness(.62) saturate(.7)}
.reel-back::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--ink),transparent 65%)}
.reel-back-label{position:absolute;bottom:25px;left:18px;font-size:.75rem;font-family:var(--mono);letter-spacing:.08em;z-index:1}
.media-topline{position:absolute;top:18px;left:16px;right:16px;z-index:3;display:flex;justify-content:space-between;align-items:center}
.media-tag{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;background:#080f17b8;border:1px solid #d2edf330;border-radius:5px;padding:5px 8px;backdrop-filter:blur(8px);z-index:3;display:inline-flex;line-height:1.6;color:#e7f0f1}
.media-topline .icon{width:17px;height:17px}
.play-button{position:absolute;z-index:3;top:48%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border:1px solid #eefbff77;border-radius:50%;background:#101a2470;backdrop-filter:blur(10px);box-shadow:0 0 30px #0003;transition:background .2s,transform .2s}
.play-button .icon{width:25px;height:25px;fill:var(--text);stroke:var(--text);stroke-width:1;transform:translateX(-1px)}
.media-card:hover .play-button{background:#98dfe537;border-color:var(--accent)}
.reel-title{position:absolute;bottom:27px;left:23px;right:20px;z-index:3;display:flex;flex-direction:column}
.mini-label{font-family:var(--mono);font-size:.75rem;letter-spacing:.11em;color:#b9c6cd}
.reel-title strong{font-family:var(--display);font-size:1.9rem;line-height:1.1;letter-spacing:-.04em;margin-block:13px 20px}
.placeholder-label{font-size:.76rem;color:#cad3d8;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0f4f433;padding-top:13px}
.floating-note{position:absolute;z-index:4;left:0;bottom:58px;display:flex;align-items:center;gap:13px;padding:15px 18px;background:#14222bf2;border:1px solid #4f6b7780;backdrop-filter:blur(18px);border-radius:9px;box-shadow:0 10px 32px #0006}
.floating-note .icon{color:var(--accent);width:24px;height:24px}
.floating-note div{display:flex;flex-direction:column;gap:3px}
.floating-note span{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--accent)}
.floating-note strong{font-size:.85rem;font-weight:400}
.media-footnote{font-size:.81rem;text-align:center;color:var(--quiet);margin-top:0}
.workflow-ribbon{border-block:1px solid var(--line);background:#0e141a}
.workflow-ribbon>.container{display:flex;gap:35px;align-items:center;justify-content:space-between;padding-block:25px}
.workflow-ribbon>.container>span{font-family:var(--mono);font-size:.75rem;color:var(--quiet);letter-spacing:.1em}
.workflow-ribbon .container>div{display:flex;align-items:center;gap:28px;font-size:.87rem;color:#d0d7de}
.workflow-ribbon b{font-weight:400;color:#485e6b}
.hook-section{padding-bottom:100px}
.prompt-comparison{margin:45px auto 17px;max-width:975px;display:grid;grid-template-columns:1fr 50px 1fr;align-items:center}
.comparison-preview{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);min-height:256px;padding:23px 26px;display:flex;flex-direction:column}
.window-label{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:.75rem;letter-spacing:.07em;color:var(--quiet)}
.window-label .icon{width:18px;height:18px}
.basic-prompt{font-family:var(--mono);font-size:.91rem;color:#a7b0bc;line-height:1.9;padding-block:32px}
.comparison-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.comparison-tags span{border:1px solid var(--border);padding:4px 8px;border-radius:4px;font-size:.75rem;color:var(--quiet)}
.comparison-divider{text-align:center;font-family:var(--mono);color:var(--quiet);font-size:.81rem}
.structured-preview{border-color:#74aeb840;background:linear-gradient(115deg,#132029,#0e171f)}
.structured-preview .window-label{color:var(--accent)}
.structure-lines{display:flex;flex-direction:column;gap:15px;padding-block:22px}
.structure-lines div{display:flex;gap:16px;align-items:baseline;font-size:.87rem}
.structure-lines b{font-family:var(--mono);font-size:.75rem;font-weight:400;color:var(--accent);width:58px;flex-shrink:0}
.structure-lines span{color:#bdcad1}
.structured-preview .comparison-tags span{color:var(--accent);border:0;padding-left:0}
.learn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.learn-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;background:linear-gradient(145deg,#19212b99,#121922a6);border:1px solid var(--border);border-radius:12px;padding:25px 22px;min-height:276px;transition:border-color .2s,background .2s}
.learn-card:hover{border-color:#6a8b9780;background:#18232c}
.learn-card .feature-icon{margin-bottom:30px}
.learn-card h3{margin-bottom:11px;font-size:1rem;letter-spacing:-.03em}
.learn-card p{font-size:.98rem;line-height:1.6;margin-bottom:25px}
.card-keyword{font-family:var(--mono);font-size:.75rem;letter-spacing:.03em;color:var(--quiet);margin-top:auto}
.section-action{text-align:center;margin-top:30px}
.section-action .text-link{color:var(--accent)}
.workflow-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;margin-top:44px}
.workflow-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.workflow-steps li{position:relative;display:grid;grid-template-columns:38px 1fr;column-gap:20px;min-height:65px;padding-bottom:18px}
.workflow-steps li::before{content:'';position:absolute;top:37px;left:18px;bottom:0;width:1px;background:var(--border)}
.workflow-steps li:not(:last-child)::after{content:'';position:absolute;bottom:1px;left:16px;width:5px;height:5px;border-right:1px solid var(--quiet);border-bottom:1px solid var(--quiet);transform:rotate(45deg)}
.workflow-steps li:last-child::before{display:none}
.step-number{display:grid;place-items:center;grid-row:1/3;width:37px;height:37px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--quiet);font-family:var(--mono);font-size:.75rem}
.workflow-steps strong{font-size:1.02rem;font-weight:400;line-height:1.45;align-self:end}
.workflow-steps li>span:last-child{font-size:.81rem;color:var(--quiet)}
.workflow-steps .highlight-step .step-number{border-color:#98dfe555;color:var(--accent);background:#18303a}
.highlight-step strong{color:var(--accent)}
.workflow-storyboard{background:linear-gradient(135deg,#152029,#0c1219);border:1px solid var(--border);border-radius:16px;overflow:hidden;padding:27px;min-width:0}
.storyboard-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:25px}
.storyboard-frames figure{min-width:0}
.storyboard-frames img{width:100%;aspect-ratio:9/16;height:auto;border-radius:6px;object-fit:cover;filter:saturate(.85)}
.storyboard-frames figcaption{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;margin-top:9px;color:var(--quiet)}
.timeline-mockup{position:relative;border:1px solid var(--border);border-radius:8px;background:#0b1118;margin-top:28px;padding:12px 12px 16px;overflow:hidden}
.timeline-ruler{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:.75rem;color:var(--quiet);padding-bottom:8px}
.timeline-track{display:flex;gap:4px;margin-top:10px;min-height:32px}
.timeline-track span{flex:1;background:#284653;border:1px solid #98dfe538;font-size:.75rem;display:flex;align-items:center;padding-left:8px;border-radius:3px;color:#bed9df}
.timeline-audio{font-size:.75rem;color:#b5c8c7;margin-top:5px;border:1px solid #73a78a29;background:#253c392b;border-radius:3px;padding:4px 8px;letter-spacing:.03em}
.timeline-playhead{position:absolute;top:31px;bottom:12px;left:61%;width:1px;background:var(--accent);box-shadow:0 0 6px #98dfe580}
.timeline-playhead::before{content:'';position:absolute;top:-4px;left:-3px;background:var(--accent);height:7px;width:7px;border-radius:1px}
.workflow-storyboard>p{margin-top:29px;font-size:1.12rem;line-height:1.5}
.workflow-storyboard>p strong{font-weight:400;color:var(--text)}
.workflow-storyboard>.small-note{display:block;margin-top:15px;font-size:.75rem}
.prompt-section{background:radial-gradient(ellipse at 50% 60%,#22445230,transparent 68%),#0c1219;border-block:1px solid var(--line)}
.prompt-studio{max-width:1000px;margin:46px auto 0;background:#0d131b;border:1px solid #42586880;border-radius:16px;overflow:hidden;box-shadow:0 20px 100px #0004}
.studio-toolbar{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 24px;border-bottom:1px solid var(--border);background:#17222c80;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em}
.studio-toolbar>span:first-child{display:flex;align-items:center;gap:10px;color:#cfdae2}
.studio-toolbar .icon{width:17px;height:17px;color:var(--accent)}
.studio-preview-label{font-size:.75rem;color:var(--quiet)}
.studio-body{display:grid;grid-template-columns:270px 1fr;min-height:430px}
.prompt-categories{display:flex;flex-direction:column;padding:15px 12px;gap:3px;border-right:1px solid var(--border);background:#11192366}
.prompt-category{text-align:left;border-radius:6px;background:transparent;padding:11px 12px;font-size:.86rem;min-height:46px;display:flex;align-items:center;gap:11px;color:var(--muted);line-height:1.4;border:1px solid transparent;transition:background .2s,color .2s}
.prompt-category>span{font-family:var(--mono);font-size:.75rem;color:var(--quiet)}
.prompt-category:hover{background:#1f2c3755;color:var(--text)}
.prompt-category:active{background:#263b4855}
.prompt-category[aria-pressed=true]{background:#284a594a;color:var(--accent);border-color:#7fc6d129}
.prompt-category[aria-pressed=true]>span{color:var(--accent)}
.prompt-code{padding:26px;position:relative;min-width:0}
.code-title{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.76rem;color:var(--muted);gap:12px;overflow-wrap:anywhere}
.code-title .icon{width:15px;height:15px;color:var(--quiet)}
.code-comment{font-family:var(--mono);font-size:.76rem;line-height:1.9;margin-top:20px;min-height:50px;color:#819aaa}
#prompt-excerpt{font-family:var(--mono);font-size:.75rem;line-height:1.9;min-height:98px}
#prompt-excerpt p{display:flex;gap:16px;align-items:baseline;margin-bottom:8px}
.line-number{color:#667987;flex-shrink:0;font-size:.75rem}
#prompt-excerpt b{color:var(--accent);font-weight:400;font-size:.75rem}
.code-muted{color:var(--muted);overflow-wrap:anywhere}
.redacted-code{display:flex;flex-direction:column;gap:13px;opacity:.32;filter:blur(4px);padding-top:17px;pointer-events:none;user-select:none}
.redacted-code span{display:block;height:7px;border-radius:3px;width:94%;background:linear-gradient(90deg,#3a8997 15%,#5c687a 15%,#5c687a 90%,transparent 90%)}
.redacted-code span:nth-child(2){width:84%}.redacted-code span:nth-child(3){width:97%}.redacted-code span:nth-child(4){width:80%}.redacted-code span:nth-child(5){width:88%}
.prompt-lock{position:absolute;bottom:29px;left:20px;right:20px;display:flex;align-items:center;flex-direction:column;gap:8px;background:linear-gradient(0deg,#0d131b 30%,#0d131bba 68%,transparent);padding-top:25px;text-align:center}
.prompt-lock>.icon{width:20px;height:20px;color:var(--accent);margin-bottom:2px}
.prompt-lock strong{font-size:1rem;font-weight:400}
.prompt-lock>span{font-size:.77rem;color:var(--muted)}
.studio-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--border);padding:12px 24px;background:#151f2970;font-size:.8rem;color:var(--quiet)}
.studio-footer a{display:flex;align-items:center;gap:10px;color:var(--accent);min-height:40px;white-space:nowrap}
.studio-footer a:hover{color:var(--text)}
.studio-footer .icon{width:18px;height:18px}
.results-comparison{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:44px auto 18px;max-width:1000px}
.result-card{border:1px solid var(--border);padding:32px;border-radius:var(--radius);background:var(--surface)}
.result-heading{display:flex;align-items:center;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--border);margin-bottom:22px}
.result-heading .feature-icon{width:24px;height:24px}
.result-heading h3{font-size:1.15rem}
.result-basic .feature-icon{color:var(--warm)}
.result-better{background:linear-gradient(120deg,#14242e,#101b24);border-color:#48636b}
.result-better .result-heading{border-color:#98dfe530}
.problem-list,.check-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.problem-list li,.check-list li{position:relative;padding-left:26px;font-size:1rem;line-height:1.5}
.problem-list li{color:var(--muted)}
.problem-list li::before{content:'×';position:absolute;left:0;top:-2px;font-size:1.1rem;color:#ab8b81}
.check-list li::before{content:'';position:absolute;left:1px;top:.4em;width:12px;height:7px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
.result-note{font-size:.89rem;line-height:1.6;color:#b9d3d9;margin-top:25px;max-width:320px}
.seedance-layout{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.seedance-layout h2{font-size:clamp(2.1rem,3.3vw,2.75rem)}
.motion-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.motion-tags>span{font-size:.84rem;border:1px solid var(--border);color:#b8c6d0;background:#121e2780;padding:7px 11px;border-radius:5px}
.seedance-equation{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;gap:12px}
.source-frame,.animated-frame{position:relative;aspect-ratio:9/16;min-width:0;border-radius:10px;overflow:hidden;border:1px solid #4c626b}
.source-frame img,.animated-frame img{width:100%;height:100%;object-fit:cover}
.source-frame>span,.animated-frame>span:last-child{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#09131beb,transparent);padding:30px 10px 13px;text-align:center;font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;z-index:2}
.source-frame{grid-column:1;grid-row:1}
.seedance-equation>.equation-symbol:nth-child(2){grid-column:2;grid-row:1}
.motion-prompt-card{grid-column:3;grid-row:1;padding:25px 14px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(130deg,#2946535c,#1526315c);border:1px solid #5b8b954d;border-radius:10px;aspect-ratio:9/16;text-align:center;gap:17px}
.motion-prompt-card strong{font-family:var(--mono);font-weight:400;color:var(--accent);font-size:.76rem;line-height:1.6}
.motion-prompt-card>span{font-size:.79rem;color:var(--muted);line-height:1.7}
.seedance-equation>.equation-symbol:nth-child(4){grid-column:1/4;grid-row:2;transform:rotate(90deg);justify-self:center}
.animated-frame{grid-column:1/4;grid-row:3;aspect-ratio:16/7;width:100%;height:auto;min-height:145px}
.animated-frame img{object-position:center 55%}
.animated-frame small{display:block;font-family:var(--body);font-size:.75rem;letter-spacing:0;color:#c7d1d8;margin-top:2px}
.equation-symbol{font-size:1.5rem;color:var(--accent);font-family:var(--mono);text-align:center}
.small-play{width:42px;height:42px;top:40%}
.small-play .icon{width:19px;height:19px}
.continuity-section{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.continuity-visual{padding:0 34px}
.continuity-image{position:relative;aspect-ratio:4/5;border:1px solid #57707a66;border-radius:14px;background:var(--surface);isolation:isolate}
.continuity-image img{border-radius:14px;width:100%;height:100%;object-fit:cover}
.continuity-image::after{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(0deg,#080f1899,transparent 40%);pointer-events:none}
.continuity-label{position:absolute;z-index:2;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;padding:8px 12px;background:#0e1c26eb;border:1px solid #89c1ce50;backdrop-filter:blur(10px);border-radius:5px;color:var(--accent);box-shadow:0 4px 20px #0004}
.label-one{top:20%;left:-26px}.label-two{top:48%;right:-29px}.label-three{bottom:15%;left:-20px}
.visual-concept-note{position:absolute;bottom:14px;left:17px;font-family:var(--mono);font-size:.75rem;letter-spacing:.07em;z-index:2;color:#c2d3de}
.continuity-methods{padding:0;margin:28px 0 0;list-style:none;display:flex;flex-direction:column;gap:11px}
.continuity-methods li{display:flex;align-items:baseline;gap:17px;font-size:.9rem;color:var(--muted)}
.continuity-methods li>span{color:var(--accent);font-size:.75rem;font-family:var(--mono);width:76px;flex-shrink:0}
.curriculum-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}
.curriculum-layout>.section-heading{position:sticky;top:calc(var(--header-height) + 45px)}
.curriculum-layout .button{margin-top:31px}
.curriculum-layout .section-heading p.small-note{font-size:.82rem;margin-top:17px}
.curriculum-list{border-top:1px solid var(--border);min-width:0}
details{border-bottom:1px solid var(--border)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;min-height:69px;padding:18px 4px;transition:color .2s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--accent)}
summary:active{color:var(--accent-strong)}
summary h3{font-family:var(--body);font-size:1.03rem;font-weight:400;letter-spacing:0;flex:1;line-height:1.5}
.module-number{color:var(--quiet);font-family:var(--mono);font-size:.75rem}
.accordion-plus{width:16px;height:16px;position:relative;display:block;flex-shrink:0;margin-left:auto;color:var(--quiet)}
.accordion-plus::before,.accordion-plus::after{content:'';position:absolute;top:7px;left:1px;width:14px;height:1px;background:currentColor}
.accordion-plus::after{transform:rotate(90deg);transition:transform .2s}
details[open] .accordion-plus::after{transform:rotate(0)}
details[open] summary{color:var(--accent)}
.module>p{font-size:.95rem;line-height:1.65;padding:0 24px 23px 43px}
.examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.example-media{aspect-ratio:9/16;width:100%;border-radius:12px;border:1px solid #44545e;display:block}
.example-media>.media-tag{position:absolute;top:16px;left:16px}
.example-overlay{position:absolute;bottom:30px;left:25px;right:20px;z-index:2;font-family:var(--display);font-size:1.65rem;line-height:1.2;letter-spacing:-.03em}
.example-media .play-button{top:45%}
.example-caption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px}
.example-caption h3{font-family:var(--body);font-size:1rem;font-weight:400;letter-spacing:0}
.example-caption>span{font-family:var(--mono);font-size:.75rem;color:var(--quiet)}
.platform-line{display:flex;align-items:center;justify-content:center;gap:27px;padding-top:31px;margin-top:37px;border-top:1px solid var(--line);flex-wrap:wrap}
.platform-line>span{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--quiet)}
.platform-line>div{font-size:.89rem;color:var(--muted);display:flex;gap:20px}
.platform-line b{font-weight:400;color:#4e6370}
.audience-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}
.audience-list{display:grid;grid-template-columns:1fr 1fr;gap:20px 25px;list-style:none;margin:0;padding:0}
.audience-list li{position:relative;font-size:.98rem;line-height:1.6;color:#c6ced6;padding-left:23px}
.audience-list li::before{content:'';position:absolute;left:0;top:.56em;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);width:10px;height:6px;transform:rotate(-45deg)}
.expectation-note{display:flex;gap:22px;margin-top:60px;border:1px solid var(--border);background:#18212b66;padding:25px 32px;border-radius:10px;align-items:flex-start}
.expectation-note .feature-icon{margin-top:4px;color:#b7c3cf}
.expectation-note h3{font-size:1.05rem;margin-bottom:10px}
.expectation-note p{font-size:.98rem;line-height:1.7;max-width:980px}
.about-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:center;padding-bottom:75px}
.creator-portrait{position:relative;isolation:isolate;aspect-ratio:4/5;border:1px solid #3a4f5d;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#3b566341,#10171f 67%)}
.creator-portrait::before{content:'';position:absolute;inset:25px;border:1px solid #61758424;z-index:-1}
.creator-portrait>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.portrait-corners{position:absolute;inset:35px;border:1px solid #7a9dab22;clip-path:polygon(0 0,12% 0,12% 1px,1px 1px,1px 12%,0 12%,0 0,100% 0,100% 12%,calc(100% - 1px) 12%,calc(100% - 1px) 1px,88% 1px,88% 0,100% 0,100% 100%,88% 100%,88% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 88%,100% 88%,100% 100%,0 100%,0 88%,1px 88%,1px calc(100% - 1px),12% calc(100% - 1px),12% 100%,0 100%)}
.portrait-icon{width:64px;height:64px;color:#7d939f;stroke-width:.8;margin-bottom:24px;opacity:.8}
.portrait-placeholder{text-align:center;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;line-height:2;color:#9cabb9}
.portrait-caption{position:absolute;bottom:0;left:0;right:0;padding:50px 25px 24px;background:linear-gradient(0deg,#0b141eed,transparent);display:flex;flex-direction:column;gap:6px}
.portrait-caption strong{font-family:var(--display);font-size:1.5rem;letter-spacing:-.04em}
.portrait-caption>span{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--muted)}
.about-section blockquote{font-size:1.15rem;line-height:1.8;color:#c2cbd4;margin-top:25px;max-width:600px}
.creator-signoff{display:flex;flex-direction:column;gap:3px;margin-top:26px}
.creator-signoff strong{font-family:var(--display);font-size:1.25rem;color:var(--accent);letter-spacing:-.03em}
.creator-signoff span{color:var(--quiet);font-size:.82rem}
.community-section{padding-bottom:90px}
.community-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.community-title>p:last-child{font-size:.84rem}
.community-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.community-placeholder{position:relative;border:1px dashed #3b4a59;background:#10171f55;border-radius:10px;padding:23px}
.community-placeholder .icon{color:var(--quiet);margin-bottom:16px;width:20px;height:20px}
.community-placeholder h3{font-family:var(--body);font-weight:400;font-size:1rem;color:#c0cbd3;letter-spacing:0}
.community-placeholder p{font-size:.83rem;margin-top:8px;color:var(--quiet)}
.faq-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}
.faq-list{border-top:1px solid var(--border);min-width:0}
.faq-item summary{min-height:72px;gap:20px;padding:20px 0}
.faq-item summary h3{font-size:1.03rem}
.faq-item p{font-size:1rem;line-height:1.7;padding:0 28px 23px 0}
.purchase-section{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.purchase-section .section-heading>p:not(.eyebrow){max-width:460px}
.purchase-art{position:relative;aspect-ratio:1.85/1;border:1px solid #3d535f;border-radius:13px;margin-top:37px;overflow:hidden;isolation:isolate;max-width:485px}
.purchase-art img{position:absolute;inset:0;width:100%;height:100%;object-position:50% 43%;z-index:-2;filter:saturate(.6) brightness(.55)}
.purchase-art::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b131ccf,#0b131c4a);z-index:-1}
.purchase-art>div{height:100%;padding:24px 28px;display:flex;flex-direction:column;justify-content:center;gap:17px}
.purchase-art strong{font-family:var(--display);font-size:1.72rem;line-height:1.2;letter-spacing:-.04em}
.purchase-art div>span:last-child{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--accent)}
.purchase-card{background:linear-gradient(140deg,#1c2c3799,#111a24);padding:34px;border:1px solid #4c6975;border-radius:17px;box-shadow:0 15px 55px #0004}
.purchase-card>.eyebrow{font-size:.75rem;margin-bottom:16px}
.purchase-card>h3{font-family:var(--display);font-size:1.8rem;line-height:1.2;letter-spacing:-.045em}
.purchase-card>p{font-size:.9rem;margin-top:12px}
.purchase-card .check-list{margin-top:26px;padding-block:24px;border-block:1px solid var(--border);gap:12px}
.purchase-card .check-list li{font-size:.91rem}
.language-choice{margin:24px 0 0;padding:0;border:0;min-width:0}
.language-choice legend{font-size:.88rem;display:flex;align-items:center;gap:9px;float:left;width:100%;margin-bottom:13px}
.language-choice legend .icon{width:17px;height:17px;color:var(--muted)}
.language-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;clear:both}
.language-options label{position:relative;cursor:pointer;min-width:0}
.language-options input{position:absolute;opacity:0;width:1px;height:1px;left:18px;top:24px}
.language-options label>span{padding:12px 15px;border:1px solid #41525f;background:#0b131bc9;border-radius:7px;display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:.91rem;min-height:49px;transition:background .2s,border-color .2s}
.language-options .icon{width:17px;height:17px;opacity:0}
.language-options input:checked+span{border-color:var(--accent);background:#24454d52;color:var(--accent)}
.language-options input:checked+span .icon{opacity:1}
.language-options input:focus-visible+span{outline:2px solid var(--accent);outline-offset:4px}
.language-options label:hover>span{background:#243640;box-shadow:inset 0 0 0 1px #88bcc029}
.purchase-price{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:25px;padding-block:18px;border-top:1px solid var(--border)}
.purchase-price>span{font-size:.9rem;color:var(--muted)}
.purchase-price strong{font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em}
.purchase-button{width:100%;margin-top:3px}
.purchase-card>p.checkout-status{margin-top:12px;text-align:center;font-size:.79rem;line-height:1.6;min-height:2.6em;color:var(--muted)}
.purchase-card>p.purchase-legal{text-align:center;font-size:.75rem;color:var(--quiet);margin-top:14px;line-height:1.7}
.purchase-legal a{text-decoration:underline;text-underline-offset:3px}
.purchase-legal a:hover{color:var(--text)}
.final-cta{padding:110px 0;text-align:center;position:relative;background:radial-gradient(ellipse at 50% 80%,#3150613b,transparent 65%),#0e151d;border-block:1px solid var(--line)}
.final-cta .eyebrow{margin-bottom:24px}
.final-cta h2{font-size:clamp(2.2rem,4.8vw,4rem);line-height:1.15}
.final-cta p:not(.eyebrow){font-size:1.08rem;line-height:1.8;max-width:700px;margin:25px auto 30px}
.final-byline{display:block;margin-top:19px;font-size:.84rem;color:var(--quiet)}
.site-footer{padding:40px 0 30px}
.footer-top{display:flex;align-items:center;flex-wrap:wrap;gap:25px}
.footer-top>.brand{font-size:1.45rem}
.footer-top>.brand .brand-mark{width:27px;height:29px;font-size:1.3rem}
.footer-top>p{font-size:.8rem;color:var(--quiet)}
.footer-top nav{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.footer-top nav a{min-height:44px;display:flex;align-items:center;color:var(--muted);font-size:.81rem}
.footer-top nav a:hover{color:var(--accent)}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-top:25px;padding-top:23px;border-top:1px solid var(--line)}
.footer-bottom p{font-size:.75rem;line-height:1.8;max-width:740px;color:var(--quiet)}
.footer-bottom>span{font-size:.75rem;white-space:nowrap;color:var(--quiet)}
.mobile-sticky-cta{display:none}
dialog{background:var(--surface);color:var(--text);border:1px solid #53717f;border-radius:16px;padding:0;box-shadow:0 30px 100px #000a;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);overscroll-behavior:contain}
dialog::backdrop{background:#04080de0;backdrop-filter:blur(9px)}
.dialog-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;z-index:10;width:44px;height:44px;background:#101d28dd;border:1px solid #758a9955;border-radius:50%;color:var(--text)}
.dialog-close:hover{background:#294555}
.dialog-close:active{background:#1c3443}
.dialog-close .icon{width:21px;height:21px}
.media-dialog{width:760px;overflow:auto}
.media-dialog[open]{display:grid;grid-template-columns:1fr 1fr}
.dialog-media{width:100%;aspect-ratio:9/16;background:#070c12;align-self:center;max-height:calc(100dvh - 42px)}
.dialog-media img,.dialog-media video{width:100%;height:100%;object-fit:contain}
.media-dialog-copy{align-self:center;padding:65px 25px 30px}
.media-dialog-copy .eyebrow{font-size:.75rem;margin-bottom:17px}
.media-dialog-copy h2{font-size:1.8rem;line-height:1.2}
.media-dialog-copy p{font-size:1rem;line-height:1.7;margin-top:18px}
.info-dialog{width:530px;padding:47px 34px 32px}
.info-dialog .eyebrow{margin-bottom:16px}
.info-dialog h2{font-size:2rem;padding-right:20px}
.info-dialog>p:not(.eyebrow){margin-top:20px;font-size:1rem;line-height:1.75}
.info-dialog>.button{margin-top:25px}
@media(min-width:1450px){.hero{gap:50px}.hero h1{font-size:4.45rem}.hero-reel{width:320px}.reel-back{width:270px}.reel-stack{height:610px}.hero{min-height:850px}}
@media(max-width:1100px){.desktop-nav{gap:20px}.desktop-nav a{font-size:.84rem}.hero{gap:20px;min-height:750px}.hero h1{font-size:3.6rem}.hero-reel{width:270px;left:8%}.reel-back{width:225px;left:37%}.reel-stack{height:530px}.floating-note{bottom:60px;padding:13px}.hero-description{font-size:1.05rem}.workflow-ribbon .container>div{gap:18px}.workflow-layout{gap:50px}.learn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learn-card{min-height:230px}.learn-card .feature-icon{margin-bottom:22px}.learn-card p{max-width:380px}.seedance-layout{gap:45px}.continuity-section,.curriculum-layout,.audience-layout,.about-section,.faq-layout,.purchase-section{gap:55px}.curriculum-layout .button{font-size:.9rem;padding:16px 18px;gap:13px}.studio-body{grid-template-columns:250px 1fr}.prompt-code{padding:24px 20px}.example-overlay{font-size:1.4rem}.purchase-card{padding:28px}.footer-top{gap:18px}.footer-top nav{gap:17px}.footer-top>p{display:none}}
@media(max-width:900px){:root{--header-height:72px}.desktop-nav{display:none}.menu-toggle{display:flex}.header-cta{margin-left:auto}.hero{grid-template-columns:1fr 1fr;padding-top:52px;padding-bottom:50px;min-height:700px}.hero h1{font-size:3rem}.hero-copy .eyebrow{font-size:.75rem;letter-spacing:.07em;gap:8px}.eyebrow-rule{width:17px}.hero-reel{width:240px;left:6%;top:25px}.reel-back{width:192px;left:32%;top:48px}.reel-stack{height:495px}.floating-note{left:-8px;bottom:25px;padding:12px}.floating-note span{font-size:.75rem}.floating-note strong{font-size:.76rem}.visual-caption{font-size:.75rem;padding-inline:0}.hero-actions .button{font-size:.92rem;padding:15px 18px;gap:10px}.hero-description{font-size:1rem;line-height:1.65}.creator-byline{margin-top:19px}.creator-byline .byline-sub{display:none}.workflow-ribbon>.container{flex-direction:column;gap:14px;padding-block:22px}.workflow-ribbon .container>div{gap:25px}.section{padding-block:70px}.split-heading{gap:30px}.split-heading>p:not(.eyebrow){max-width:270px}.section-heading p:not(.eyebrow){font-size:1rem}.prompt-comparison{grid-template-columns:1fr 36px 1fr}.comparison-preview{padding:21px 20px}.comparison-tags{gap:5px}.comparison-tags span{font-size:.75rem}.basic-prompt{font-size:.8rem}.structure-lines div{font-size:.77rem;gap:10px}.structure-lines b{width:48px}.workflow-layout{gap:35px}.workflow-storyboard{padding:21px}.window-label{font-size:.75rem}.timeline-track span{font-size:.75rem;padding-left:4px}.studio-body{grid-template-columns:225px 1fr}.prompt-category{font-size:.78rem;gap:9px;padding:10px}.code-comment{font-size:.75rem;min-height:66px}#prompt-excerpt{font-size:.75rem}#prompt-excerpt p{gap:11px}.code-title{font-size:.75rem}.studio-preview-label{display:none}.result-card{padding:26px}.seedance-layout{gap:33px}.motion-tags{gap:6px}.motion-tags>span{font-size:.78rem;padding:5px 8px}.motion-prompt-card{padding:13px 8px;gap:13px}.motion-prompt-card strong{font-size:.75rem}.motion-prompt-card>span{font-size:.75rem}.continuity-section{gap:38px}.continuity-visual{padding:0 20px}.continuity-label{font-size:.75rem;padding:7px 9px}.label-one{left:-20px}.label-two{right:-20px}.label-three{left:-17px}.curriculum-layout{gap:35px;grid-template-columns:.8fr 1.2fr}.curriculum-layout .button{font-size:.83rem;padding:15px 14px}.curriculum-layout .button .icon{width:16px}.curriculum-layout h2{font-size:2.2rem}.curriculum-layout>.section-heading{top:105px}summary{gap:14px}summary h3{font-size:.94rem}.examples-grid{gap:17px}.example-overlay{font-size:1.16rem;left:17px;bottom:20px}.example-media>.media-tag{font-size:.75rem;top:13px;left:10px}.play-button{width:55px;height:55px}.example-caption h3{font-size:.9rem}.audience-layout{gap:40px}.audience-list{grid-template-columns:1fr;gap:13px}.about-section{gap:50px}.about-section blockquote{font-size:1.05rem}.community-title{align-items:flex-start;flex-direction:column;gap:8px}.community-placeholder{padding:19px}.faq-layout{gap:40px}.purchase-section{gap:37px}.purchase-card{padding:25px}.purchase-art strong{font-size:1.4rem}.purchase-art>div{padding:20px;gap:15px}.purchase-art .mini-label{font-size:.75rem}.purchase-card>h3{font-size:1.57rem}.purchase-price strong{font-size:.94rem}.footer-top nav{gap:15px}.footer-top nav a{font-size:.76rem}}
@media(max-width:700px){:root{--header-height:68px}.container{width:calc(100% - 40px)}body{font-size:16px}.section{padding-block:56px}h2{font-size:2rem;line-height:1.16;letter-spacing:-.05em}.section-heading .eyebrow{margin-bottom:16px}.eyebrow{font-size:.75rem;letter-spacing:.08em}.section-heading p:not(.eyebrow){margin-top:20px;line-height:1.7}.split-heading{display:block;margin-bottom:30px}.split-heading>p:not(.eyebrow){margin-top:20px;max-width:none}.center-heading{text-align:left}.center-heading .eyebrow{justify-content:flex-start}.center-heading h2 br{display:none}.center-heading p:not(.eyebrow){margin-inline:0}.nav-shell{gap:14px}.brand{font-size:1.5rem}.brand-mark{width:28px;height:30px;font-size:1.38rem}.header-cta{font-size:.79rem;padding:10px 12px;gap:8px;min-height:42px}.header-cta .icon{width:16px}.menu-toggle{min-height:42px;min-width:42px}.hero{display:flex;flex-direction:column;gap:38px;padding-top:42px;padding-bottom:38px;min-height:0;align-items:stretch}.hero h1{font-size:clamp(2.5rem,8.3vw,3.5rem);line-height:1.1;letter-spacing:-.055em;max-width:540px}.hero h1 .accent-text{display:inline}.hero-copy .eyebrow{font-size:.75rem;letter-spacing:.055em;margin-bottom:19px}.hero-description{font-size:1.06rem;line-height:1.62;margin-top:22px;max-width:550px}.hero-actions{margin-top:25px;gap:7px;align-items:flex-start}.hero-actions .button{font-size:.94rem;min-height:54px;padding:16px 21px;gap:17px}.hero-actions .text-link{font-size:.88rem;min-height:42px}.creator-byline{margin-top:18px}.creator-byline>div{font-size:.85rem}.creator-byline .byline-sub{display:block;font-size:.75rem}.initials{height:36px;width:36px;font-size:.78rem}.hero-visual{max-width:455px;width:100%;align-self:center;padding-top:2px}.visual-caption{font-size:.75rem;padding:0 5px 15px}.reel-stack{height:544px;width:100%}.hero-reel{width:min(73%,276px);left:10%;top:4px;border-radius:12px}.reel-back{width:58%;left:36%;top:32px;border-radius:11px}.floating-note{bottom:55px;left:0;padding:13px 16px}.floating-note span{font-size:.75rem}.floating-note strong{font-size:.83rem}.hero-visual .media-footnote{font-size:.77rem}.reel-title{bottom:22px;left:20px}.reel-title strong{font-size:1.75rem;margin-block:12px 17px}.workflow-ribbon>.container{gap:13px;align-items:flex-start;padding-block:23px}.workflow-ribbon>.container>span{font-size:.75rem;letter-spacing:.08em}.workflow-ribbon .container>div{gap:9px 15px;flex-wrap:wrap;font-size:.81rem}.workflow-ribbon b{font-size:.76rem}.hook-section{padding-bottom:64px}.prompt-comparison{grid-template-columns:1fr;gap:13px;margin-top:30px}.comparison-preview{min-height:220px;padding:21px 22px}.comparison-divider{font-size:.75rem;line-height:1.3}.window-label{font-size:.75rem}.basic-prompt{font-size:.85rem;padding-block:26px}.comparison-tags span{font-size:.75rem}.structure-lines div{font-size:.84rem}.structure-lines b{width:58px;font-size:.75rem}.small-note{font-size:.76rem}.learn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.learn-card{padding:21px 17px;min-height:265px}.learn-card .feature-icon{width:26px;height:26px;margin-bottom:21px}.learn-card h3{font-size:.98rem;line-height:1.4;margin-bottom:10px}.learn-card p{font-size:.94rem;line-height:1.6;margin-bottom:20px}.card-keyword{font-size:.75rem;letter-spacing:0}.section-action{margin-top:22px}.section-action .text-link{font-size:.88rem}.workflow-layout{grid-template-columns:1fr;gap:30px;margin-top:30px}.workflow-steps li{grid-template-columns:38px 1fr;column-gap:17px;min-height:63px}.workflow-steps strong{font-size:1rem}.workflow-steps li>span:last-child{font-size:.79rem}.workflow-storyboard{padding:23px;max-width:500px}.storyboard-frames{gap:11px}.storyboard-frames figcaption{font-size:.75rem}.timeline-track span{font-size:.75rem;padding-left:8px}.timeline-ruler{font-size:.75rem}.timeline-audio{font-size:.75rem}.workflow-storyboard>p{font-size:1.04rem}.prompt-studio{margin-top:32px;border-radius:12px}.studio-toolbar{padding:15px;font-size:.75rem;letter-spacing:.025em}.studio-toolbar>span:first-child{gap:8px}.studio-body{grid-template-columns:1fr}.prompt-categories{display:grid;grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--border);padding:10px;gap:4px}.prompt-category{font-size:.76rem;min-height:48px;padding:8px 9px;gap:7px}.prompt-category>span{font-size:.75rem}.prompt-code{padding:19px;min-height:385px}.code-title{font-size:.75rem}.code-comment{font-size:.75rem;min-height:62px;margin-top:17px;line-height:1.8}#prompt-excerpt{font-size:.75rem;min-height:115px}#prompt-excerpt b{font-size:.75rem}#prompt-excerpt p{gap:11px;margin-bottom:12px}.line-number{font-size:.75rem}.redacted-code{padding-top:12px}.prompt-lock{bottom:24px;padding-top:23px}.prompt-lock strong{font-size:.92rem}.prompt-lock>span{font-size:.75rem}.studio-footer{padding:13px 16px;gap:10px;align-items:flex-start}.studio-footer>span{font-size:.75rem;max-width:180px;line-height:1.6}.studio-footer a{font-size:.75rem;min-height:40px;gap:5px}.studio-footer .icon{width:15px}.results-comparison{grid-template-columns:1fr;gap:14px;margin-top:30px}.result-card{padding:25px}.result-heading{padding-bottom:18px;margin-bottom:19px}.result-heading h3{font-size:1.1rem}.problem-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}.problem-list li{font-size:.92rem;padding-left:21px}.check-list li{font-size:.96rem}.result-note{font-size:.89rem;max-width:none}.seedance-layout{grid-template-columns:1fr;gap:34px}.seedance-layout h2{font-size:2.05rem}.motion-tags{margin-top:24px}.motion-tags>span{font-size:.8rem;padding:7px 10px}.seedance-equation{max-width:430px;width:100%;margin-inline:auto;gap:12px;grid-template-columns:1fr 24px 1fr}.source-frame,.motion-prompt-card{aspect-ratio:3/4}.source-frame>span,.animated-frame>span:last-child{font-size:.75rem}.motion-prompt-card{padding:23px 12px;gap:19px}.motion-prompt-card strong{font-size:.8rem}.motion-prompt-card>span{font-size:.85rem}.animated-frame{aspect-ratio:16/7;min-height:165px}.animated-frame small{font-size:.75rem}.continuity-section{display:flex;flex-direction:column-reverse;align-items:stretch;gap:33px}.continuity-visual{padding-inline:24px;max-width:450px;width:100%;align-self:center}.continuity-image{aspect-ratio:5/4}.continuity-image img{object-position:50% 40%}.continuity-label{font-size:.75rem;padding:7px 9px}.label-one{left:-22px;top:15%}.label-two{right:-22px;top:45%}.label-three{left:-20px;bottom:15%}.visual-concept-note{font-size:.75rem;bottom:11px}.continuity-methods{gap:13px}.continuity-methods li{font-size:.92rem;gap:13px}.continuity-methods li>span{font-size:.75rem;width:74px}.curriculum-layout{grid-template-columns:1fr;gap:34px}.curriculum-layout>.section-heading{position:static}.curriculum-layout h2{font-size:2.15rem}.curriculum-layout .button{font-size:.94rem;padding:16px 20px;gap:18px;margin-top:23px}.curriculum-layout .section-heading p.small-note{font-size:.78rem;margin-top:14px}.module summary{padding:17px 0;min-height:65px;gap:16px}.module summary h3{font-size:1rem;line-height:1.5}.module-number{font-size:.75rem}.module>p{padding:0 20px 21px 35px;font-size:.96rem}.examples-grid{gap:25px;grid-template-columns:1fr}.example{max-width:440px;width:100%;margin-inline:auto}.example-media{aspect-ratio:9/16;max-height:none}.example-media>.media-tag{top:17px;left:17px;font-size:.75rem}.example-overlay{font-size:1.9rem;bottom:28px;left:25px}.example-media .play-button{width:65px;height:65px}.example-caption{margin-top:14px}.example-caption h3{font-size:1rem}.example-caption>span{font-size:.75rem}.platform-line{gap:13px;margin-top:30px;padding-top:24px;align-items:flex-start;justify-content:flex-start}.platform-line>span{font-size:.75rem}.platform-line>div{gap:12px;flex-wrap:wrap;font-size:.83rem}.audience-layout{grid-template-columns:1fr;gap:28px}.audience-list{gap:16px}.audience-list li{font-size:1rem}.expectation-note{margin-top:35px;padding:23px 21px;gap:15px}.expectation-note .feature-icon{width:21px;height:21px}.expectation-note h3{font-size:1rem;line-height:1.45}.expectation-note p{font-size:.94rem;line-height:1.7}.about-section{grid-template-columns:1fr;gap:31px;padding-bottom:45px}.creator-portrait{aspect-ratio:4/3;max-width:460px;width:100%;margin-inline:auto}.portrait-caption{padding:35px 23px 19px}.portrait-caption strong{font-size:1.3rem}.portrait-placeholder{font-size:.75rem}.portrait-icon{width:48px;height:48px;margin-bottom:15px}.about-section blockquote{font-size:1.06rem;line-height:1.8;margin-top:22px}.creator-signoff{margin-top:22px}.community-section{padding-bottom:65px}.community-grid{grid-template-columns:1fr;gap:12px}.community-placeholder{padding:21px;display:grid;grid-template-columns:22px 1fr;column-gap:16px}.community-placeholder .icon{grid-row:1/3;margin:4px 0 0}.community-placeholder p{grid-column:2;font-size:.83rem;margin-top:5px}.community-placeholder h3{font-size:.97rem}.community-title{gap:7px;margin-bottom:19px}.community-title>p:last-child{font-size:.88rem}.faq-layout{grid-template-columns:1fr;gap:28px}.faq-item summary{gap:15px;padding:19px 0;min-height:69px}.faq-item summary h3{font-size:1rem;line-height:1.5}.faq-item p{font-size:.97rem;padding:0 18px 22px 0}.purchase-section{grid-template-columns:1fr;gap:31px}.purchase-art{margin-top:25px;aspect-ratio:1.95/1;max-width:none}.purchase-art>div{padding:20px 23px;gap:13px}.purchase-art strong{font-size:1.55rem}.purchase-art .mini-label{font-size:.75rem}.purchase-art div>span:last-child{font-size:.75rem}.purchase-card{padding:27px 24px;border-radius:14px}.purchase-card>h3{font-size:1.75rem}.purchase-card>.eyebrow{font-size:.75rem}.purchase-card .check-list li{font-size:.94rem}.purchase-card .check-list{padding-block:22px;margin-top:23px;gap:13px}.language-choice legend{font-size:.88rem}.language-options label>span{font-size:.95rem;min-height:51px}.purchase-price strong{font-size:1.07rem}.purchase-card>p.checkout-status{font-size:.81rem;min-height:2.5em}.purchase-card>p.purchase-legal{font-size:.75rem}.final-cta{padding:74px 0}.final-cta h2{font-size:2.14rem;line-height:1.2}.final-cta .eyebrow{font-size:.75rem;margin-bottom:20px}.final-cta p:not(.eyebrow){font-size:1rem;line-height:1.7;margin:23px auto 26px}.final-cta .button{font-size:.94rem;padding-inline:20px;gap:15px}.desktop-break{display:none}.final-byline{font-size:.8rem;margin-top:17px}.site-footer{padding:32px 0 calc(112px + env(safe-area-inset-bottom))}.footer-top{gap:18px;align-items:flex-start}.footer-top>p{display:block;margin-left:auto;font-size:.75rem;align-self:center}.footer-top nav{width:100%;margin:0;justify-content:space-between;gap:8px}.footer-top nav a{font-size:.78rem;min-height:40px}.footer-bottom{flex-direction:column;align-items:flex-start;gap:17px;margin-top:18px;padding-top:20px}.footer-bottom p{font-size:.75rem;line-height:1.75}.footer-bottom>span{font-size:.75rem}.mobile-sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:45;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#111c26f2;backdrop-filter:blur(16px);border-top:1px solid #49657080;padding:13px 20px calc(13px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px #0004}.mobile-sticky-cta>div{display:flex;flex-direction:column;gap:3px;min-width:0}.mobile-sticky-cta strong{font-size:.75rem;line-height:1.35;font-weight:400;max-width:180px}.mobile-sticky-cta>div>span{font-size:.75rem;color:var(--quiet)}.mobile-sticky-cta .button{font-size:.82rem;gap:9px;padding:12px 14px;min-height:45px}.mobile-sticky-cta .icon{width:17px}dialog{max-width:calc(100vw - 28px);max-height:calc(100dvh - 32px);border-radius:13px}.media-dialog{width:390px}.media-dialog[open]{display:block}.dialog-media{max-height:56dvh;aspect-ratio:9/16;margin-inline:auto;width:auto}.media-dialog-copy{padding:21px 22px 25px}.media-dialog-copy .eyebrow{font-size:.75rem;margin-bottom:11px}.media-dialog-copy h2{font-size:1.42rem}.media-dialog-copy p{font-size:.92rem;margin-top:11px;line-height:1.6}.dialog-close{top:10px;right:10px}.info-dialog{padding:51px 25px 27px}.info-dialog h2{font-size:1.9rem}.info-dialog>p:not(.eyebrow){font-size:1rem}.info-dialog>.button{font-size:.95rem}}
@media(max-width:410px){.learn-grid{grid-template-columns:1fr}.learn-card{min-height:0;padding:22px;display:grid;grid-template-columns:29px 1fr;column-gap:17px}.learn-card .feature-icon{grid-row:1/4;margin-top:3px;margin-bottom:0}.learn-card h3{font-size:1.05rem;margin-bottom:9px}.learn-card p{font-size:1rem;margin-bottom:16px}.card-keyword{font-size:.75rem}.reel-stack{height:495px}.floating-note{bottom:40px}.hero .hero-description{font-size:1.03rem}.hero h1{font-size:2.72rem}.hero-visual .media-footnote{font-size:.75rem}.reel-title strong{font-size:1.6rem}.hero-actions .button{font-size:.9rem;gap:12px;padding-inline:18px}.prompt-category{font-size:.75rem;padding:8px 7px;gap:6px}.prompt-category>span{font-size:.75rem}.studio-toolbar{font-size:.75rem}.studio-footer{gap:7px}.studio-footer>span{max-width:158px}.studio-footer a{font-size:.75rem;gap:4px}.problem-list{grid-template-columns:1fr 1fr}.problem-list li{font-size:.85rem}.purchase-card{padding:24px 20px}.purchase-card>h3{font-size:1.6rem}.purchase-price strong{font-size:1rem}.footer-top>p{font-size:.75rem}.mobile-sticky-cta{padding-inline:16px;gap:10px}.mobile-sticky-cta strong{font-size:.75rem;max-width:165px}.mobile-sticky-cta .button{font-size:.78rem;padding-inline:12px}.final-cta .button{font-size:.88rem;padding-inline:17px;gap:11px}.seedance-equation{gap:10px}.motion-prompt-card strong{font-size:.75rem}.motion-prompt-card>span{font-size:.75rem}.source-frame>span{font-size:.75rem}.continuity-label{font-size:.75rem}}
@media(max-width:350px){.container{width:calc(100% - 32px)}.header-cta .icon{display:none}.header-cta{font-size:.75rem;padding-inline:10px}.brand{font-size:1.36rem;gap:7px}.nav-shell{gap:10px}.brand-mark{width:25px;height:28px;font-size:1.25rem}.menu-toggle{min-width:40px}.hero h1{font-size:2.42rem}.hero-copy .eyebrow{font-size:.75rem;gap:7px}.hero-actions .button{font-size:.82rem;padding:15px 14px;gap:9px;width:100%}.hero-actions .button .icon{width:17px}.reel-stack{height:447px}.floating-note{bottom:33px;padding:11px 13px}.floating-note strong{font-size:.76rem}.floating-note span{font-size:.75rem}.visual-caption{font-size:.75rem}.media-topline{top:13px;left:12px;right:12px}.media-tag{font-size:.75rem}.reel-title{left:17px;bottom:20px}.reel-title strong{font-size:1.45rem}.mini-label{font-size:.75rem}.placeholder-label{font-size:.75rem}.prompt-code{padding:17px 14px}.prompt-category>span{display:none}.studio-toolbar{font-size:.75rem;padding-inline:12px}.studio-footer{padding-inline:13px}.studio-footer>span{max-width:140px}.problem-list{grid-template-columns:1fr}.purchase-card .check-list li{font-size:.87rem}.language-options label>span{padding-inline:11px}.purchase-price strong{font-size:.91rem}.mobile-sticky-cta>div{max-width:135px}.mobile-sticky-cta strong{font-size:.75rem}.mobile-sticky-cta .button{font-size:.75rem;padding-inline:11px}.mobile-sticky-cta .button .icon{width:15px}.footer-top>p{margin-left:0}.final-cta h2{font-size:1.95rem}.final-cta .button{font-size:.81rem;gap:9px}.final-cta .eyebrow{font-size:.75rem}}
.learn-card p,.module>p,.faq-item p,.audience-list li,.expectation-note p,.purchase-card .check-list li,.result-note{font-size:1rem}
.prompt-category{font-size:.875rem}
.studio-footer a,.header-cta,.mobile-sticky-cta .button,.footer-top nav a{font-size:.875rem}
@media(max-width:700px){.studio-toolbar{flex-wrap:wrap}.prompt-category{font-size:.875rem;gap:6px;min-height:55px}.prompt-category>span{display:none}.studio-footer{flex-wrap:wrap}.studio-footer>span{max-width:none;flex:1 1 170px}.hero-visual{padding:10px 5px 0}.reel-back{left:33%}.mobile-sticky-cta strong{font-size:.75rem}.footer-top nav{justify-content:flex-start;gap:8px 19px}}
@media(max-width:410px){.header-cta{display:none}.menu-toggle{margin-left:auto}.hero .hero-description{font-size:1rem}.mobile-sticky-cta>div{max-width:165px}.mobile-sticky-cta .button{padding-inline:12px}.prompt-category{font-size:.875rem}}
@media(max-width:350px){.mobile-sticky-cta>div{max-width:120px}.mobile-sticky-cta .button .icon{display:none}.mobile-sticky-cta .button{font-size:.875rem}.hero-actions .button,.final-cta .button{font-size:.875rem}.hero-copy .eyebrow{flex-wrap:wrap;font-size:.75rem}.hero-visual .visual-caption{font-size:.75rem;flex-wrap:wrap}.hero-visual .reel-stack{height:455px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.media-card:hover>img{transform:none}.button:hover{transform:none}}
@media(forced-colors:active){*{scrollbar-color:auto}a,button,input,summary{forced-color-adjust:auto}.button,.media-tag,.language-options label>span{border:1px solid ButtonText}.media-card::after{background:none}.play-button{border:2px solid ButtonText}.accent-text,.muted-heading,.eyebrow{color:CanvasText}.language-options input:checked+span{outline:2px solid Highlight}.check-list li::before,.audience-list li::before{border-color:CanvasText}}

/* ============================================================
   CHECKOUT / PRODUCT — professional purchase experience
   ============================================================ */
.purchase-section{grid-template-columns:1.05fr .95fr;align-items:start;gap:80px}
.purchase-intro>.section-heading{max-width:none}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:34px 0 0;padding:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.spec-grid>div{background:#0d141bd9;padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.spec-grid dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--quiet);text-transform:uppercase}
.spec-grid dd{margin:0;font-size:.95rem;color:var(--text);line-height:1.45}

.checkout-panel{position:sticky;top:calc(var(--header-height) + 22px);background:linear-gradient(155deg,#1d2f3ba8,#101922 55%);padding:32px;border:1px solid #4c6975;border-radius:18px;box-shadow:0 22px 70px #00000059,inset 0 1px 0 #ffffff0f}
.checkout-head{padding-bottom:24px;border-bottom:1px solid var(--border)}
.checkout-head .eyebrow{font-size:.72rem;margin-bottom:14px}
.checkout-head h3{font-family:var(--display);font-size:1.72rem;line-height:1.16;letter-spacing:-.045em}
.checkout-head p{font-size:.9rem;margin-top:10px}

.checkout-step{margin:24px 0 0;padding:0;border:0;min-width:0}
.checkout-step legend,.step-label{font-size:.86rem;color:var(--text);display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:0;float:none;width:100%}
.checkout-step legend{float:left}
.step-number{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#98dfe51f;border:1px solid #98dfe559;color:var(--accent);font-family:var(--mono);font-size:.72rem;line-height:1;flex-shrink:0}

.order-summary{background:#080e14b8;border:1px solid var(--border);border-radius:12px;padding:6px 18px 16px}
.order-line{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-block:13px;border-bottom:1px solid #202a35}
.order-line:last-of-type{border-bottom:0}
.order-main{align-items:flex-start;padding-top:16px}
.order-main>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.order-main strong{font-size:.95rem;font-weight:600;line-height:1.35;color:var(--text)}
.order-main span{font-size:.8rem;color:var(--quiet)}
.order-line>span{font-size:.88rem;color:var(--muted)}
.order-amount{font-family:var(--display);font-size:1rem;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.order-free{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--accent);text-transform:uppercase;white-space:nowrap}
.order-total{border-top:1px solid var(--border);margin-top:4px;padding-top:16px}
.order-total>span{font-size:.95rem;color:var(--text)}
.order-total strong{font-family:var(--display);font-size:1.85rem;letter-spacing:-.045em;line-height:1;color:var(--accent);white-space:nowrap}
.order-note{font-size:.78rem;color:var(--quiet);margin-top:12px;line-height:1.6}

.checkout-panel .purchase-button{width:100%;margin-top:22px;min-height:60px;font-size:1.05rem;gap:12px}
.checkout-panel .purchase-button .icon{margin-left:4px}
.checkout-panel>p.checkout-status{margin-top:13px;text-align:center;font-size:.79rem;line-height:1.6;color:var(--muted)}
.checkout-status.checkout-pending{color:var(--quiet)}

.checkout-trust{margin-top:20px;padding-top:19px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:11px}
.trust-line{display:flex;align-items:flex-start;gap:10px;font-size:.79rem;line-height:1.6;color:var(--muted)}
.trust-line .icon{width:16px;height:16px;color:var(--accent);margin-top:2px}
.trust-line strong{color:var(--text);font-weight:600}
.card-row{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--quiet);line-height:1.9;padding-left:26px}
.card-row b{color:#46545f;padding-inline:2px}

.checkout-assurance{margin-top:20px;padding-top:19px;border-top:1px solid var(--border);gap:11px}
.checkout-assurance li{font-size:.88rem}
.checkout-panel>p.purchase-legal{text-align:center;font-size:.75rem;color:var(--quiet);margin-top:19px;line-height:1.7}

/* Sharper, richer preview frames */
.example-media,.hero-reel,.animated-frame,.continuity-image,.purchase-art{box-shadow:0 18px 48px #00000047}
.example-media{border-color:#5d7480}
.media-card>img{image-rendering:auto;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s}
.media-card:hover>img{transform:scale(1.055)}
.example-media::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -80px 90px -60px #98dfe51f;pointer-events:none}
.media-tag{letter-spacing:.09em;background:#050b11b5;border-color:#d2edf340}
.example-media>.media-tag{top:14px;left:14px}
.play-button{width:70px;height:70px;background:#0d172080;border-color:#eefbff8c;box-shadow:0 10px 34px #00000055}
.media-card:hover .play-button{background:#98dfe544;border-color:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
.dialog-media img{image-rendering:auto}

/* Legal pages */
.legal-page{padding-block:70px 100px}
.legal-page .legal-inner{width:min(760px,100%);margin-inline:auto}
.legal-page h1{font-size:clamp(2.1rem,4.4vw,2.9rem);letter-spacing:-.05em;line-height:1.12}
.legal-page .legal-meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--quiet);margin-top:18px}
.legal-page h2{font-size:1.32rem;letter-spacing:-.03em;margin-top:44px}
.legal-page h3{font-size:1.02rem;margin-top:28px}
.legal-page p,.legal-page li{font-size:1rem;line-height:1.75;color:var(--muted)}
.legal-page p{margin-top:14px}
.legal-page ul{margin:14px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.legal-page a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-page .legal-lead{font-size:1.08rem;color:var(--text);margin-top:24px;line-height:1.7}
.legal-page .legal-callout{margin-top:32px;padding:22px 24px;background:#101a23b8;border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:10px}
.legal-page .legal-callout p{margin-top:0;color:var(--text)}
.legal-back{display:inline-flex;align-items:center;gap:10px;font-size:.88rem;color:var(--muted);min-height:44px;margin-bottom:8px}
.legal-back:hover{color:var(--accent)}
.legal-back .icon{width:18px;height:18px;transform:rotate(180deg)}
.legal-page .legal-footnote{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:.82rem;color:var(--quiet)}

@media(max-width:1100px){.purchase-section{gap:48px}.checkout-panel{padding:27px}}
@media(max-width:900px){.purchase-section{grid-template-columns:1fr;gap:40px}.checkout-panel{position:static;padding:26px}.spec-grid{margin-top:28px}}
@media(max-width:700px){
  .purchase-section{gap:34px}
  .spec-grid{grid-template-columns:1fr 1fr;margin-top:26px}
  .spec-grid>div{padding:14px 15px}
  .spec-grid dd{font-size:.9rem}
  .checkout-panel{padding:24px 21px;border-radius:15px}
  .checkout-head h3{font-size:1.55rem}
  .order-summary{padding:4px 15px 14px}
  .order-total strong{font-size:1.65rem}
  .checkout-panel .purchase-button{min-height:58px;font-size:1rem}
  .card-row{padding-left:0;font-size:.72rem;line-height:1.8}
  .trust-line{font-size:.78rem}
  .legal-page{padding-block:44px 70px}
  .legal-page h2{font-size:1.2rem;margin-top:36px}
  .legal-page .legal-lead{font-size:1.02rem}
  .play-button{width:60px;height:60px}
}
@media(max-width:410px){
  .spec-grid{grid-template-columns:1fr}
  .checkout-panel{padding:22px 18px}
  .checkout-head h3{font-size:1.42rem}
  .order-total strong{font-size:1.5rem}
  .checkout-panel .purchase-button{font-size:.94rem;gap:8px}
}
@media(forced-colors:active){.checkout-panel,.order-summary,.spec-grid>div{border:1px solid ButtonText}.order-total strong,.order-free{color:CanvasText}}
.trust-line>span{display:block;min-width:0}
.portrait-monogram{font-family:var(--display);font-size:3.4rem;letter-spacing:-.06em;line-height:1;color:var(--accent);opacity:.9;margin-bottom:14px}
@media(max-width:700px){.portrait-monogram{font-size:2.8rem;margin-bottom:11px}}
.language-options label>span{position:relative}
.language-options .lang-unavailable{opacity:.62}
.language-options input:checked+span.lang-unavailable{border-color:#6c7f8b;background:#1b262e;color:var(--muted)}
.lang-soon{position:absolute;top:-8px;right:8px;font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--surface-raised);border:1px solid var(--border);color:var(--quiet);padding:2px 6px;border-radius:4px;line-height:1.4}

/* ============================================================
   LANGUAGE SWITCH (EN / ES)
   ============================================================ */
.lang-switch{display:inline-flex;align-items:center;background:#0c141cb8;border:1px solid var(--border);border-radius:8px;padding:3px;gap:2px;flex-shrink:0}
.lang-switch button{display:grid;place-items:center;min-width:42px;min-height:38px;padding:0 10px;border-radius:6px;background:transparent;color:var(--quiet);font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;line-height:1;transition:background .18s,color .18s}
.lang-switch abbr{text-decoration:none;border:0;cursor:inherit}
.lang-switch button:hover{color:var(--text);background:#1b2731}
.lang-switch button.is-active{background:var(--accent);color:var(--accent-ink);font-weight:700}
.lang-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lang-switch-mobile{display:none}
.site-header .nav-shell>.lang-switch{margin-left:auto}
.legal-page .lang-switch,.site-header .lang-switch{order:0}

@media(max-width:900px){
  .site-header .nav-shell>.lang-switch{margin-left:auto;margin-right:2px}
  .lang-switch button{min-width:38px;min-height:36px;padding:0 8px;font-size:.74rem}
}
@media(max-width:700px){
  /* one switch is enough on a phone: keep the header one, it is always reachable */
  .lang-switch-mobile{display:none}
  .site-header .header-cta{padding-inline:12px}
}
@media(max-width:430px){
  /* Compact the switch and drop the price from the header button, but NEVER hide
     the switch itself: it is the only way a Spanish speaker reaches their language,
     and burying it in the hamburger menu means most of them never find it. */
  .site-header .nav-shell>.lang-switch{padding:2px;gap:0}
  .lang-switch button{min-width:33px;padding:0 6px;font-size:.7rem;min-height:34px}
  .site-header .header-cta .sticky-price{display:none}
  .site-header .header-cta{padding-inline:10px;font-size:.75rem;gap:7px}
  .site-header .header-cta .icon{display:none}
}
@media(max-width:350px){
  .nav-shell{gap:7px}
  .site-header .nav-shell>.lang-switch{margin-left:auto;margin-right:0}
  .lang-switch button{min-width:30px;padding:0 4px}
  .site-header .header-cta{padding-inline:9px;font-size:.72rem}
  /* A second switch inside the open menu is a convenience, never the only one. */
  .lang-switch-mobile{display:inline-flex;margin-top:14px}
}
@media(forced-colors:active){.lang-switch button{border:1px solid ButtonText}.lang-switch button.is-active{outline:2px solid Highlight}}

/* ============================================================
   POST-PURCHASE DOWNLOAD PAGE
   ============================================================ */
.thanks{padding-block:20px 40px}
.thanks-state h1{font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.05em;line-height:1.14}
.thanks-state p{margin-top:15px}
.thanks-state .eyebrow{margin-bottom:14px}
.thanks-badge{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#98dfe51f;border:1px solid #98dfe566;margin-bottom:26px}
.thanks-badge .icon{width:30px;height:30px;color:var(--accent);stroke-width:2.2}
.thanks .button{margin-top:26px;min-height:62px;font-size:1.05rem;padding-inline:30px}
.thanks .button .icon{width:21px;height:21px}
#downloads-left{margin-top:14px}
.spinner{display:block;width:34px;height:34px;border:2px solid #2c3945;border-top-color:var(--accent);border-radius:50%;margin-bottom:24px;animation:nm-spin .8s linear infinite}
@keyframes nm-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none;border-top-color:var(--accent)}}
@media(max-width:700px){.thanks{padding-block:10px 30px}.thanks-badge{width:54px;height:54px;margin-bottom:20px}.thanks .button{width:100%;min-height:58px;font-size:1rem}}

/* ============================================================================
   MOTION SYSTEM
   ----------------------------------------------------------------------------
   Vocabulary borrowed from cinematic game UI: things have MASS. They arrive
   fast and settle hard rather than floating in. Nothing loops forever except
   one very slow scanline, because perpetual motion costs battery and attention.

   Only transform and opacity are animated per-frame. Scroll-linked work uses
   native scroll timelines, so it runs off the main thread entirely.
   ============================================================================ */
:root{
  --ease-settle:cubic-bezier(.16,1,.3,1);      /* entrances: fast, then rest */
  --ease-hard:cubic-bezier(.2,.8,.2,1);        /* mechanical snap */
  --ease-in:cubic-bezier(.32,0,.67,0);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-tap:120ms; --dur-fast:190ms; --dur-base:300ms; --dur-slow:460ms; --dur-story:760ms;
  --stagger:62ms;
}

/* ---- Ambient: grain + vignette. Static by default; one slow drift for depth ---- */
.fx-grain,.fx-vignette{position:fixed;inset:0;z-index:60;pointer-events:none}
.fx-vignette{background:radial-gradient(120% 90% at 50% 45%,transparent 42%,#04070ab8 100%);mix-blend-mode:multiply}
.fx-grain{opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
.fx-scan{position:fixed;inset:-50% 0;z-index:59;pointer-events:none;opacity:.055;background:repeating-linear-gradient(180deg,#9fe8ef 0 1px,transparent 1px 4px);animation:fx-scan-drift 9s linear infinite;will-change:transform}
@keyframes fx-scan-drift{to{transform:translate3d(0,4px,0)}}

/* ---- Scroll progress: a mission readout, not a hairline ---- */
.scroll-hud{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none;background:#ffffff0d}
.scroll-hud>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#e2fbff);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 14px #98dfe57a}
@supports (animation-timeline:scroll()){
  .scroll-hud>i{animation:hud-grow linear both;animation-timeline:scroll(root block)}
  @keyframes hud-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ============================================================
   SIGNATURE MOMENT — the hero boots like a game loading a scene
   Content is visible by default; motion is added only once JS
   confirms it is running, so nothing is ever gated behind it.
   ============================================================ */
.cinebar{position:fixed;left:0;right:0;height:12vh;background:#04070a;z-index:80;pointer-events:none;transform-origin:50% 0;will-change:transform}
.cinebar-top{top:0;transform-origin:50% 0}
.cinebar-bot{bottom:0;transform-origin:50% 100%}
.js-motion .cinebar{animation:cinebar-lift 1150ms var(--ease-hard) both}
@keyframes cinebar-lift{0%{transform:scaleY(1)}18%{transform:scaleY(1)}100%{transform:scaleY(0)}}

.js-motion .hero-copy>*{opacity:0;will-change:transform,opacity}
.js-motion .hero-copy .eyebrow{animation:boot-wipe 620ms var(--ease-settle) 340ms both}
.js-motion .hero-copy h1{animation:boot-stamp 700ms var(--ease-hard) 460ms both}
.js-motion .hero-description{animation:boot-rise 640ms var(--ease-settle) 660ms both}
.js-motion .hero-actions{animation:boot-rise 640ms var(--ease-settle) 780ms both}
.js-motion .creator-byline{animation:boot-rise 640ms var(--ease-settle) 880ms both}
.js-motion .hero-visual{animation:boot-push 1000ms var(--ease-settle) 300ms both;will-change:transform,opacity}
.js-motion .visual-caption{animation:boot-wipe 600ms var(--ease-settle) 900ms both}
.js-motion .floating-note{animation:boot-register 560ms var(--ease-hard) 1120ms both}
.js-motion .media-footnote{animation:boot-rise 600ms var(--ease-settle) 1040ms both}
.js-motion .workflow-ribbon{animation:boot-rise 700ms var(--ease-settle) 1180ms both}
.js-motion .site-header{animation:boot-drop 640ms var(--ease-hard) 200ms both}

@keyframes boot-stamp{0%{opacity:0;transform:translate3d(0,14px,0) scale(1.055)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes boot-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes boot-wipe{from{opacity:0;transform:translate3d(-18px,0,0)}to{opacity:1;transform:none}}
@keyframes boot-push{from{opacity:0;transform:translate3d(0,34px,0) scale(1.06)}to{opacity:1;transform:none}}
@keyframes boot-register{0%{opacity:0;transform:translate3d(0,10px,0) scale(.94)}70%{opacity:1;transform:translate3d(0,0,0) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes boot-drop{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}

/* ---- Scroll-linked camera drift on the artwork. Native timeline = off-thread ---- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .hero-reel>img,.reel-back>img,.example-media>img,.continuity-image img,.purchase-art img,.source-frame>img{
      animation:cam-drift linear both;animation-timeline:view();animation-range:cover}
    @keyframes cam-drift{from{transform:translate3d(0,-3.5%,0) scale(1.08)}to{transform:translate3d(0,3.5%,0) scale(1.08)}}
    .example:nth-child(2) .example-media>img{animation-range:cover 4% cover 96%}
    .example:nth-child(3) .example-media>img{animation-range:cover 8% cover 92%}
  }
}

/* ---- Deliberate reveals: three sections, not every section ---- */
.js-motion [data-reveal]{opacity:0;transform:translate3d(0,26px,0)}
.js-motion [data-reveal].is-in{opacity:1;transform:none;
  transition:opacity var(--dur-story) var(--ease-settle),transform var(--dur-story) var(--ease-settle);
  transition-delay:calc(var(--i,0) * var(--stagger))}

/* ============================================================
   TIER 1 — FEEDBACK. Fast, mechanical, never delayed.
   ============================================================ */
.button{position:relative;overflow:hidden;transition:background var(--dur-fast) var(--ease-hard),transform var(--dur-fast) var(--ease-hard),box-shadow var(--dur-fast) var(--ease-hard)}
.button::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff5c 50%,transparent 65%);transform:translate3d(-120%,0,0);transition:transform 620ms var(--ease-hard);pointer-events:none}
.button:hover::before{transform:translate3d(120%,0,0)}
.button:hover{transform:translate3d(0,-2px,0);box-shadow:0 10px 30px #98dfe524}
.button:active{transform:translate3d(0,1px,0) scale(.988);transition-duration:var(--dur-tap)}
.button:disabled::before{display:none}

.desktop-nav a{position:relative}
.desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-fast) var(--ease-hard)}
.desktop-nav a:hover::after{transform:scaleX(1)}

.lang-switch button{transition:background var(--dur-fast) var(--ease-hard),color var(--dur-fast) var(--ease-hard),transform var(--dur-tap) var(--ease-hard)}
.lang-switch button:active{transform:scale(.93)}

.learn-card,.result-card,.module summary,.faq-item summary,.prompt-category,.community-placeholder{transition:transform var(--dur-fast) var(--ease-hard),border-color var(--dur-fast) var(--ease-hard),background var(--dur-fast) var(--ease-hard)}
.learn-card{position:relative;overflow:hidden}
.learn-card::after{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-base) var(--ease-hard)}
.learn-card:hover::after{transform:scaleX(1)}
.learn-card:hover{transform:translate3d(0,-3px,0)}
.learn-card .feature-icon{transition:transform var(--dur-base) var(--ease-hard)}
.learn-card:hover .feature-icon{transform:translate3d(0,-2px,0) scale(1.08)}

.motion-tags>span,.comparison-tags span{transition:transform var(--dur-fast) var(--ease-hard),background var(--dur-fast) var(--ease-hard),border-color var(--dur-fast) var(--ease-hard)}
.motion-tags>span:hover{transform:translate3d(0,-2px,0)}

.language-options label>span{transition:background var(--dur-fast) var(--ease-hard),border-color var(--dur-fast) var(--ease-hard),transform var(--dur-tap) var(--ease-hard)}
.language-options label:active>span{transform:scale(.985)}

/* Media cards: a scan sweep and a pointer-driven tilt, set from JS */
.media-card{transform:perspective(1100px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg));transition:transform var(--dur-slow) var(--ease-settle)}
.media-card.is-tilting{transition:transform 90ms linear}
.example-media::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(190deg,transparent 40%,#98dfe51f 50%,transparent 60%);transform:translate3d(0,-110%,0);transition:transform 760ms var(--ease-hard);pointer-events:none}
.example-media:hover::after{transform:translate3d(0,110%,0)}
.play-button{transition:background var(--dur-fast) var(--ease-hard),border-color var(--dur-fast) var(--ease-hard),transform var(--dur-base) var(--ease-hard)}

/* ============================================================
   TIER 2 — CONTINUITY. State changes that would otherwise cut hard.
   ============================================================ */
.module>p,.faq-item>p{transform-origin:50% 0}
.module[open]>p,.faq-item[open]>p{animation:acc-open var(--dur-base) var(--ease-settle) both}
@keyframes acc-open{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}
.accordion-plus{transition:transform var(--dur-base) var(--ease-hard)}

#prompt-excerpt p{animation:line-in var(--dur-base) var(--ease-settle) both;animation-delay:calc(var(--ln,0) * 55ms)}
@keyframes line-in{from{opacity:0;transform:translate3d(-10px,0,0)}to{opacity:1;transform:none}}
.code-title,.code-comment{transition:opacity var(--dur-fast) var(--ease-hard)}

.order-total strong,.order-amount,#order-edition{display:inline-block}
.stamp{animation:stamp var(--dur-base) var(--ease-hard) both}
@keyframes stamp{0%{opacity:.25;transform:scale(1.09)}100%{opacity:1;transform:none}}

/* ---- Reduced motion: replace movement, never remove content ---- */
@media(prefers-reduced-motion:reduce){
  .fx-scan,.cinebar{display:none!important}
  .js-motion .hero-copy>*,.js-motion .hero-visual,.js-motion .visual-caption,
  .js-motion .floating-note,.js-motion .media-footnote,.js-motion .workflow-ribbon,
  .js-motion .site-header{animation:none!important;opacity:1!important;transform:none!important}
  .js-motion [data-reveal]{opacity:1!important;transform:none!important}
  .button::before,.example-media::after,.learn-card::after{display:none}
  .media-card{transform:none!important}
  .button:hover,.learn-card:hover{transform:none}
  [class*=fx-]{animation:none!important}
}
@media(forced-colors:active){.fx-grain,.fx-vignette,.fx-scan,.cinebar{display:none}}

/* ---- Creator portrait, once a real photo is supplied ---- */
.creator-portrait.has-photo{overflow:hidden;isolation:isolate;background:#0c1219}
.creator-portrait.has-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;z-index:0}
.creator-portrait.has-photo::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#050b1126 0%,transparent 32%,#050b11ab 68%,#050b11f2 100%);pointer-events:none}
.creator-portrait.has-photo .portrait-caption{position:absolute;left:0;right:0;bottom:0;z-index:2}
.creator-portrait.has-photo .portrait-corners{z-index:3}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .creator-portrait.has-photo>img{animation:cam-drift linear both;animation-timeline:view();animation-range:cover}
  }
}

/* ============================================================================
   CINEMATIC SCROLL SEQUENCE
   ----------------------------------------------------------------------------
   The page holds still for three screens while the scene advances. Everything is
   driven by a native scroll timeline: no scroll hijacking, no per-frame JS, and
   the scrollbar keeps behaving exactly as the visitor expects.

   Without scroll-timeline support the same markup renders as three stacked
   full-width scenes. Nothing is hidden and nothing is lost.
   ============================================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.reel{position:relative;background:#04070a;border-block:1px solid var(--line)}
.reel-frame{position:relative;margin:0;overflow:hidden;background:#04070a}
.reel-frame>img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.reel-frame figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;gap:9px;
  padding:clamp(26px,5vw,64px) clamp(22px,6vw,90px) clamp(34px,6vw,76px);
  background:linear-gradient(180deg,transparent,#04070ad9 42%,#04070a)}
.reel-num{font-family:var(--display);font-size:clamp(2.6rem,7vw,5rem);line-height:.85;letter-spacing:-.06em;color:#ffffff14;position:absolute;top:clamp(-6px,-1vw,0px);right:clamp(20px,6vw,88px)}
.reel-kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:var(--accent)}
.reel-frame strong{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5.4vw,4rem);letter-spacing:-.055em;line-height:1.04;color:var(--text)}
.reel-sub{font-size:clamp(.95rem,1.5vw,1.12rem);color:var(--muted);max-width:44ch;line-height:1.6}

/* Fallback layout: three stacked scenes, perfectly readable. */
.reel-track{display:grid}
.reel-stage{display:grid;gap:0}
.reel-frame{aspect-ratio:16/10;min-height:420px}
.reel-hud,.reel-scrim{display:none}

@supports (animation-timeline:view()){
  @media (min-width:760px) and (prefers-reduced-motion:no-preference){
    .reel-track{display:block;height:340vh;view-timeline-name:--reel;position:relative}
    .reel-stage{position:sticky;top:0;height:100svh;display:block;overflow:clip}
    .reel-frame{position:absolute;inset:0;aspect-ratio:auto;min-height:0;opacity:0;will-change:opacity,transform}
    .reel-frame>img{position:absolute;inset:0;transform:scale(1.12)}
    /* These are 9:16 frames shown in a landscape stage, so the crop is severe.
       Each chapter gets its own focal point rather than a shared default that
       beheads one of them. */
    .reel-frame[data-ch="1"]>img{object-position:50% 26%}
    .reel-frame[data-ch="2"]>img{object-position:50% 52%}
    .reel-frame[data-ch="3"]>img{object-position:50% 40%}

    /* Each chapter owns a slice of the pinned scroll range. They cross-dissolve
       and push slightly, the way a cut between two locked-off shots reads. */
    .reel-frame[data-ch="1"]{animation:ch1 linear both;animation-timeline:--reel;animation-range:contain 0% contain 38%}
    .reel-frame[data-ch="2"]{animation:ch2 linear both;animation-timeline:--reel;animation-range:contain 30% contain 72%}
    .reel-frame[data-ch="3"]{animation:ch3 linear both;animation-timeline:--reel;animation-range:contain 64% contain 100%}
    @keyframes ch1{0%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.05)}}
    @keyframes ch2{0%{opacity:0;transform:scale(1.05)}22%{opacity:1;transform:scale(1.01)}74%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.05)}}
    @keyframes ch3{0%{opacity:0;transform:scale(1.06)}26%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}

    /* Slow camera push across the whole sequence — the shot is never quite still. */
    .reel-frame>img{animation:reel-push linear both;animation-timeline:--reel;animation-range:contain}
    @keyframes reel-push{from{transform:scale(1.1) translate3d(0,-1.5%,0)}to{transform:scale(1.0) translate3d(0,1.5%,0)}}

    .reel-frame figcaption{padding-bottom:clamp(60px,9vh,120px)}

    /* Scene readout, bottom right, filling as the sequence advances. */
    .reel-hud{display:flex;align-items:center;gap:14px;position:absolute;z-index:4;
      right:clamp(20px,6vw,88px);bottom:clamp(24px,5vh,54px)}
    .reel-hud-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;color:var(--quiet)}
    .reel-hud-bars{display:flex;gap:7px}
    .reel-hud-bars i{display:block;width:34px;height:2px;background:#ffffff26;position:relative;overflow:hidden}
    .reel-hud-bars i::after{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
      animation:hud-fill linear both;animation-timeline:--reel}
    .reel-hud-bars i:nth-child(1)::after{animation-range:contain 0% contain 34%}
    .reel-hud-bars i:nth-child(2)::after{animation-range:contain 34% contain 68%}
    .reel-hud-bars i:nth-child(3)::after{animation-range:contain 68% contain 100%}
    @keyframes hud-fill{to{transform:scaleX(1)}}

    /* Letterbox that closes in at the edges of the sequence, so entering and
       leaving the pinned section reads as a shot starting and ending. */
    .reel-scrim{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;
      background:linear-gradient(180deg,#04070a,transparent 16%,transparent 84%,#04070a);
      animation:reel-scrim linear both;animation-timeline:--reel;animation-range:contain}
    @keyframes reel-scrim{0%{opacity:1}12%{opacity:0}88%{opacity:0}100%{opacity:1}}
  }
}

/* Learn cards arrive from alternating sides as the grid scrolls past. */
@supports (animation-timeline:view()){
  @media (min-width:760px) and (prefers-reduced-motion:no-preference){
    .learn-grid>.learn-card{animation:card-in linear both;animation-timeline:view();animation-range:entry 0% entry 62%}
    .learn-grid>.learn-card:nth-child(odd){--from:-34px}
    .learn-grid>.learn-card:nth-child(even){--from:34px}
    @keyframes card-in{from{opacity:0;transform:translate3d(var(--from,0),16px,0)}to{opacity:1;transform:none}}
    .examples-grid>.example{animation:card-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%;--from:0px}
  }
}

@media(max-width:760px){
  .reel-frame{aspect-ratio:4/5;min-height:0}
  .reel-frame figcaption{gap:7px}
}
@media(forced-colors:active){.reel-frame{opacity:1!important}.reel-scrim{display:none}}

/* Clip playing behind a chapter; the still stays underneath as the poster. */
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity 700ms var(--ease-settle);pointer-events:none}
.reel-frame.has-video .reel-video{opacity:1}
.reel-frame[data-ch="1"] .reel-video{object-position:50% 26%}
.reel-frame[data-ch="2"] .reel-video{object-position:50% 52%}
.reel-frame[data-ch="3"] .reel-video{object-position:50% 40%}
.reel-frame figcaption,.reel-num{z-index:3}

/* ---- AI Creator Lab wordmark: the mark now holds two letters, not one ---- */
.brand-mark{width:auto;min-width:38px;padding-inline:7px;font-size:1.02rem;font-weight:700;letter-spacing:.02em;font-family:var(--display)}
@media(max-width:700px){.brand-mark{min-width:35px;font-size:.95rem;padding-inline:6px}}
@media(max-width:350px){.brand-mark{min-width:31px;font-size:.86rem;padding-inline:5px}}

/* ============================================================
   STYLE RANGE — the flagship leads, the rest support it
   ============================================================ */
.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.style-card{background:#0d141bd9;border:1px solid var(--line);border-radius:13px;padding:24px;display:flex;flex-direction:column;gap:10px;
  transition:transform var(--dur-fast) var(--ease-hard),border-color var(--dur-fast) var(--ease-hard),background var(--dur-fast) var(--ease-hard)}
.style-card:hover{transform:translate3d(0,-3px,0);border-color:#3f5561;background:#101922}
.style-card h3{font-family:var(--display);font-size:1.12rem;letter-spacing:-.03em}
.style-card p{font-size:.94rem;line-height:1.6;flex:1}
.style-keys{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;line-height:1.8;color:var(--quiet);
  background:#080e14a8;border:1px solid #1e2832;border-radius:7px;padding:9px 11px;display:block}
.style-lead{grid-column:span 3;flex-direction:column;gap:12px;padding:30px;
  background:linear-gradient(140deg,#1b2b36a8,#0f1821 62%);border-color:#4c6975}
.style-lead h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.045em}
.style-lead p{font-size:1.04rem;max-width:62ch}
.style-lead .style-keys{font-size:.78rem;align-self:flex-start}
.style-flag{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--accent)}
.style-note{margin-top:22px}
@media(max-width:900px){.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.style-lead{grid-column:span 2}}
@media(max-width:620px){.style-grid{grid-template-columns:1fr;gap:12px}.style-lead{grid-column:span 1;padding:24px}.style-card{padding:20px}.style-card p{font-size:.98rem}}
@supports (animation-timeline:view()){
  @media (min-width:760px) and (prefers-reduced-motion:no-preference){
    .style-grid>.style-card{animation:card-in linear both;animation-timeline:view();animation-range:entry 0% entry 58%;--from:0px}
  }
}

/* ---- Maker's mark: the personal brand behind the product, kept quiet ---- */
.maker-mark{display:inline-flex;align-items:center;gap:10px;margin-left:auto;opacity:.5;
  transition:opacity var(--dur-base) var(--ease-hard)}
.maker-mark:hover{opacity:1}
.maker-mark img{width:46px;height:auto;flex-shrink:0;filter:saturate(.8)}
.maker-mark:hover img{filter:none}
.maker-line{font-size:.74rem;line-height:1.5;color:var(--quiet);white-space:nowrap;letter-spacing:.01em}
/* Only align centre where the footer is a row; the stacked mobile footer keeps
   its original left alignment. */
@media(min-width:701px){.footer-bottom{align-items:center}}
@media(max-width:700px){
  .maker-mark{margin-left:0;margin-top:4px;gap:9px;align-self:flex-start}
  .maker-mark img{width:40px}
  .maker-mark span{font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){.maker-mark{transition:none}}
@media(forced-colors:active){.maker-mark{opacity:1}}

/* ============================================================================
   STYLE RAIL — swipe through the six looks
   ----------------------------------------------------------------------------
   Built on native scroll-snap, so the swipe is the browser's own: momentum,
   rubber-banding and accessibility all behave exactly as the platform intends.
   No scroll hijacking, and it works with a trackpad, a finger, arrow keys or
   the buttons.
   ============================================================================ */
.style-rail-wrap{position:relative}
.style-rail{display:grid;grid-auto-flow:column;grid-auto-columns:300px;gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:2px;padding:4px 2px 6px;
  scrollbar-width:none;-ms-overflow-style:none}
.style-rail::-webkit-scrollbar{display:none}
.style-rail:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:14px}
.style-slide{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;min-width:0}
.style-media{aspect-ratio:9/16;width:100%;border-radius:13px;border:1px solid #4d616d;display:block;
  box-shadow:0 16px 40px #00000042}
.style-media>.media-tag{position:absolute;top:13px;left:13px;z-index:3}
.style-media .play-button{width:60px;height:60px;top:47%}
.style-slide-copy h3{font-family:var(--display);font-size:1.06rem;letter-spacing:-.03em;margin-bottom:5px}
.style-slide-copy p{font-size:.9rem;line-height:1.55}

.rail-nav{position:absolute;top:calc(50% - 46px);transform:translateY(-50%);z-index:6;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:#0d1720e0;border:1px solid #4d616d;color:var(--text);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px #00000059;transition:background var(--dur-fast) var(--ease-hard),transform var(--dur-fast) var(--ease-hard),opacity var(--dur-fast) linear}
.rail-nav:hover{background:#1b2b36;transform:translateY(-50%) scale(1.06)}
.rail-nav:active{transform:translateY(-50%) scale(.95)}
.rail-nav .icon{width:20px;height:20px}
.rail-prev{left:-14px}
.rail-prev .icon{transform:rotate(180deg)}
.rail-next{right:-14px}
.rail-nav[disabled]{opacity:0;pointer-events:none}

.rail-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.rail-dots button{width:26px;height:4px;border-radius:3px;background:#2b3640;padding:0;
  transition:background var(--dur-fast) var(--ease-hard),width var(--dur-base) var(--ease-hard)}
.rail-dots button[aria-selected="true"]{background:var(--accent);width:40px}
.rail-dots button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

@media(max-width:1240px){.rail-prev{left:4px}.rail-next{right:4px}}
@media(max-width:700px){
  .style-rail{grid-auto-columns:78vw;gap:14px;scroll-padding-inline:0}
  .style-media .play-button{width:54px;height:54px}
  .rail-nav{display:none}          /* on touch, the swipe itself is the control */
  .rail-dots{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.style-rail{scroll-behavior:auto}.rail-nav{transition:none}}
@media(forced-colors:active){.rail-nav,.rail-dots button{border:1px solid ButtonText}}

/* ============================================================================
   STYLE WALL — every look moving at once, right after the hero
   ----------------------------------------------------------------------------
   Three columns of vertical tiles drifting at different rates on a native
   scroll timeline. Clips are injected by motion.js and play only while on
   screen; without JS, or on a slow connection, the stills carry the section.
   ============================================================================ */
.stylewall{position:relative;overflow:clip;background:#04070a;border-block:1px solid var(--line);
  min-height:clamp(560px,88vh,940px);display:grid;align-items:center;isolation:isolate}
.stylewall-grid{position:absolute;inset:-12% -2%;z-index:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px;pointer-events:none}
.wall-col{display:flex;flex-direction:column;gap:18px;will-change:transform}
.wall-tile{position:relative;margin:0;border-radius:12px;overflow:hidden;border:1px solid #26333d;
  background:#0a1016;flex:0 0 auto}
.wall-tile img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.wall-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 900ms var(--ease-settle)}
.wall-tile.has-clip video{opacity:1}
.wall-tile figcaption{position:absolute;left:10px;bottom:10px;z-index:2;font-family:var(--mono);
  font-size:.64rem;letter-spacing:.12em;color:#dfeef0;background:#050b11ad;border:1px solid #ffffff1f;
  border-radius:4px;padding:4px 7px;line-height:1.5}

.stylewall-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,#04070a 0%,#04070acc 12%,#04070a63 34%,#04070a63 66%,#04070acc 88%,#04070a 100%),
    radial-gradient(78% 62% at 30% 50%,#04070ae8 0%,#04070a70 52%,transparent 78%)}
.stylewall-copy{position:relative;z-index:2;max-width:760px}
.stylewall-copy .eyebrow{margin-bottom:18px}
.stylewall-copy h2{font-size:clamp(2.3rem,5.6vw,4.2rem);letter-spacing:-.055em;line-height:1.04}
.stylewall-copy p:not(.eyebrow){margin-top:20px;font-size:clamp(1rem,1.6vw,1.16rem);line-height:1.65;max-width:46ch}

/* Columns drift in alternating directions as the section passes. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .wall-col{animation:wall-drift linear both;animation-timeline:view();animation-range:cover}
    .wall-col[data-col="1"]{--from:-4%;--to:-16%}
    .wall-col[data-col="2"]{--from:-18%;--to:-3%}
    .wall-col[data-col="3"]{--from:-6%;--to:-19%}
    @keyframes wall-drift{from{transform:translate3d(0,var(--from),0)}to{transform:translate3d(0,var(--to),0)}}
  }
}

@media(max-width:820px){
  .stylewall{min-height:clamp(520px,80vh,760px)}
  .stylewall-grid{grid-template-columns:repeat(2,1fr);gap:12px;inset:-14% -4%}
  .wall-col{gap:12px}
  .wall-col[data-col="3"]{display:none}
  .stylewall-veil{background:
    linear-gradient(180deg,#04070a 0%,#04070ad9 14%,#04070a8c 40%,#04070ad9 86%,#04070a 100%),
    radial-gradient(96% 58% at 50% 52%,#04070af0 0%,#04070a9e 56%,transparent 84%)}
  .wall-tile figcaption{font-size:.6rem;padding:3px 6px}
}
@media(prefers-reduced-motion:reduce){.wall-col{animation:none!important;transform:none!important}}
@media(forced-colors:active){.stylewall-veil{display:none}}
/* Rail with nothing to scroll: behave as a plain centred row. */
.style-rail.is-static{justify-content:center;scroll-snap-type:none;overflow-x:visible}
/* Marks a scene that is a still, so the card never implies playback it cannot do. */
.still-badge{position:absolute;z-index:3;bottom:13px;right:13px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;color:#cfe1e4;background:#050b11ad;border:1px solid #ffffff24;border-radius:4px;
  padding:4px 7px;line-height:1.5;backdrop-filter:blur(6px)}

/* Clip crossfades over its own poster frame, so starting playback is a dissolve
   rather than a cut to black while the first frame decodes. */
.media-card>.preview-video{opacity:0;transition:opacity 520ms var(--ease-settle)}
.media-card.is-playing>.preview-video{opacity:1}
.media-card.is-playing>img{opacity:0;transition:opacity 520ms var(--ease-settle)}
.style-media.is-playing .play-button{opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity 320ms var(--ease-hard),transform 320ms var(--ease-hard)}
@media(prefers-reduced-motion:reduce){
  .media-card>.preview-video,.media-card.is-playing>img,.style-media.is-playing .play-button{transition:none}
}

/* --------------------------------------------------------------------------
   Compact hero. The stacked reel moved out: the moving style wall sits
   directly underneath and carries the visual weight, so the hero is one
   short, plain block of type. Placed last so it wins over the grid rules
   and their media queries above.
   -------------------------------------------------------------------------- */
.hero.hero-simple{display:block;min-height:0;padding-top:clamp(44px,6vw,74px);padding-bottom:clamp(40px,5vw,62px)}
.hero.hero-simple .hero-copy{max-width:740px}
.hero.hero-simple h1{font-size:clamp(2.5rem,5.1vw,4.1rem);max-width:720px}
.hero.hero-simple .hero-description{max-width:600px}
.hero.hero-simple .hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px 26px}
@media(max-width:560px){.hero.hero-simple .hero-actions{flex-direction:column;align-items:flex-start;gap:9px}}

/* --------------------------------------------------------------------------
   Every "Get the Guide" button jumps to #buy — the checkout card itself, not
   the heading above it — so the edition picker and the Buy button are what
   lands on screen. On phones the card is moved above the sales copy for the
   same reason: the thing you tap should be the first thing you see.
   -------------------------------------------------------------------------- */
/* html already carries scroll-padding-top for the sticky header, so the card
   only needs a small extra nudge — anything more pushes Buy Now off a phone. */
#buy{scroll-margin-top:10px}
@media(max-width:900px){
  .purchase-section{display:flex;flex-direction:column}
  .purchase-section>.checkout-panel{order:-1}
  #buy{scroll-margin-top:2px}
  /* Trim the card's header on phones: the price and the button matter more. */
  .checkout-panel .checkout-head{margin-bottom:14px}
  .checkout-panel .checkout-head>p{display:none}
  .checkout-panel .checkout-head h3{font-size:1.4rem;line-height:1.25}
  .checkout-panel .checkout-step{margin-bottom:14px}
  .checkout-panel .order-summary{padding:14px 15px}
  .checkout-panel .order-note{margin-top:8px}
}

/* On a phone the card is taller than the screen, so the order of the pieces
   is what decides whether Buy Now is reachable. Edition, then the button,
   then the order detail underneath. The price is on the button itself and in
   the sticky bar, so nothing is hidden before paying. */
@media(max-width:700px){
  .checkout-panel{display:flex;flex-direction:column}
  .checkout-panel>.checkout-head{order:1}
  .checkout-panel>.purchase-button{order:3;margin-top:4px}
  .checkout-panel>.checkout-status{order:4}
  .checkout-panel>.checkout-step{order:5;margin-top:18px}
  /* after the generic .checkout-step rule, so the edition picker stays on top */
  .checkout-panel>.checkout-step.language-choice{order:2;margin-top:0}
  .checkout-panel>.checkout-trust{order:6}
  .checkout-panel>.checkout-assurance{order:7}
  .checkout-panel>.purchase-legal{order:8}
}

/* Six cards read better as two rows of three than four-plus-two. */
@media(min-width:1101px){.learn-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}