:root {
  --black: #000;
  --ink: #050505;
  --panel: #0a0a0b;
  --panel-2: #101011;
  --white: #f5f5f7;
  --muted: #8c8c93;
  --line: rgba(255,255,255,.11);
  --line-soft: rgba(255,255,255,.065);
  --yellow: #f1d82b;
  --blue: #1461ff;
  --ease: cubic-bezier(.2,.8,.2,1);
  --shell: min(1240px, calc(100vw - 64px));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
::selection { background: var(--white); color: var(--black); }
.shell { width: var(--shell); margin-inline: auto; }
.section { position: relative; padding-block: clamp(110px, 14vw, 210px); }
.skip-link { position: fixed; z-index: 999; top: 12px; left: 12px; transform: translateY(-150%); padding: 10px 15px; border-radius: 8px; background: white; color: black; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin: 0 0 24px; color: #aaaab0; font-size: 12px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; }
h2 { margin-bottom: 28px; font-size: clamp(48px, 6.3vw, 96px); font-weight: 580; line-height: .96; }

/* Header */
.site-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; border-bottom: 1px solid transparent; transition: background .45s ease, border-color .45s ease, transform .45s var(--ease); }
.site-header.is-scrolled { border-color: rgba(255,255,255,.07); background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(24px) saturate(135%); backdrop-filter: blur(24px) saturate(135%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; width: 140px; }
.brand .custom-logo-link { display: inline-flex; }
.brand .custom-logo { max-width: 140px; max-height: 40px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 34px; }
.nav-list { display: flex; gap: 32px; align-items: center; margin: 0; padding: 0; list-style: none; }
.site-nav a { color: rgba(255,255,255,.72); font-size: 13px; transition: color .25s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: white; }
.site-nav .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-width: 102px; height: 38px; padding: 0 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.095); color: white; font-weight: 600; }
.site-nav .nav-cta:hover { border-color: rgba(255,255,255,.28); background: white; color: black; }
.menu-toggle { position: relative; z-index: 2; display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; }
.menu-toggle span { position: absolute; left: 11px; width: 22px; height: 1px; background: white; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-toggle span:first-child { top: 17px; }.menu-toggle span:last-child { top: 26px; }

/* Hero */
.hero { position: relative; display: grid; min-height: 100svh; overflow: hidden; isolation: isolate; place-items: center; background: radial-gradient(circle at 50% 52%, #080808 0, #020202 35%, #000 68%); }
.liquid-grid { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .55; mask-image: radial-gradient(ellipse 54% 43% at 50% 53%, black 8%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse 54% 43% at 50% 53%, black 8%, transparent 76%); }
.hero-glow { position: absolute; z-index: -2; top: 47%; left: 50%; width: min(72vw, 960px); height: 48vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.055), transparent 67%); filter: blur(26px); transform: translate(-50%,-50%); animation: glow-breathe 8s ease-in-out infinite alternate; }
.liquid-rings { position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.liquid-rings i { position: absolute; top: 50%; left: 50%; width: min(84vw, 1220px); height: 130px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; filter: blur(10px); transform: translate(-50%,-50%) rotate(-6deg); animation: ring-drift 11s ease-in-out infinite alternate; }
.liquid-rings i:nth-child(2) { width: min(92vw,1340px); height: 180px; opacity: .7; transform: translate(-50%,-34%) rotate(5deg); animation-delay: -2s; }
.liquid-rings i:nth-child(3) { width: min(104vw,1480px); height: 230px; opacity: .48; transform: translate(-50%,-12%) rotate(-4deg); animation-delay: -4s; }
.liquid-rings i:nth-child(4) { width: min(116vw,1630px); height: 280px; opacity: .3; transform: translate(-50%,8%) rotate(4deg); animation-delay: -6s; }
.liquid-rings i:nth-child(5) { width: min(128vw,1790px); height: 330px; opacity: .16; transform: translate(-50%,28%) rotate(-3deg); animation-delay: -8s; }
.hero-content { display: flex; align-items: center; flex-direction: column; padding-top: 92px; text-align: center; }
.hero-wordmark { width: min(50vw, 448px); margin: 0 auto 30px; filter: drop-shadow(0 14px 30px #000); animation: hero-in 1.1s .05s var(--ease) both; }
.hero-kicker { margin-bottom: 26px; color: #9a9aa0; font-size: 13px; letter-spacing: .08em; animation: hero-in 1.1s .14s var(--ease) both; }
.hero h1 { max-width: 920px; margin: 0 auto 28px; font-size: clamp(58px, 7.6vw, 116px); font-weight: 570; line-height: .9; animation: hero-in 1.1s .23s var(--ease) both; }
.hero-copy { max-width: 600px; margin: 0 auto; color: #a6a6ab; font-size: clamp(17px,1.5vw,21px); line-height: 1.5; animation: hero-in 1.1s .32s var(--ease) both; }
.hero-actions { min-height: 58px; margin-top: 42px; animation: hero-in 1.1s .41s var(--ease) both; }
.app-store-button { display: inline-flex; align-items: center; gap: 11px; min-width: 184px; padding: 9px 18px 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: rgba(255,255,255,.08); text-align: left; transition: transform .25s var(--ease), background .25s ease; }
.app-store-button:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }.app-store-button svg { width: 30px; fill: white; }.app-store-button span { font-size: 20px; font-weight: 560; line-height: 1.02; }.app-store-button small { display: block; margin-bottom: 2px; font-size:12px; font-weight: 450; letter-spacing: .02em; }
.launch-pill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.045); color: #d0d0d3; font-size: 13px; letter-spacing: .025em; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.launch-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 14px rgba(241,216,43,.55); }
.scroll-cue { position: absolute; bottom: 27px; left: 50%; display: flex; align-items: center; gap: 10px; color: #656569; font-size:12px; letter-spacing: .16em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue span { width: 34px; height: 1px; overflow: hidden; background: #222; }.scroll-cue span::after { display: block; width: 100%; height: 1px; background: #7c7c80; content: ""; animation: line-scan 2.4s ease-in-out infinite; }

/* Statement */
.statement { max-width: 1080px; text-align: center; }
.statement h2 { max-width: 1000px; margin-inline: auto; }
.statement > p:last-child { max-width: 650px; margin: 0 auto; color: var(--muted); font-size: clamp(18px,2vw,26px); }

/* Editor */
.studio { overflow: hidden; border-block: 1px solid var(--line-soft); background: radial-gradient(circle at 76% 46%, #101011 0, #050505 30%, #000 67%); }
.split-layout { display: grid; grid-template-columns: minmax(0,.86fr) minmax(450px,1.14fr); align-items: center; gap: clamp(50px,8vw,140px); }
.studio-copy { position: relative; z-index: 2; }.studio-copy h2 { font-size: clamp(46px,5.3vw,80px); }.studio-copy > p:not(.eyebrow) { max-width: 480px; color: var(--muted); font-size: 19px; }
.feature-list { margin: 64px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.feature-list li { display: flex; gap: 28px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); color: #bebec2; font-size: 14px; }
.feature-list span { color: #55555a; font-size:12px; letter-spacing: .12em; }
.phone-stage { position: relative; display: grid; min-height: 780px; place-items: center; perspective: 1300px; }
.orbit { position: absolute; width: 560px; height: 560px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; animation: orbit-turn 18s linear infinite; }.orbit::after { position: absolute; top: 47%; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.42); box-shadow: 0 0 18px rgba(255,255,255,.35); content: ""; }.orbit-two { width: 690px; height: 450px; border-color: rgba(255,255,255,.035); animation-duration: 25s; animation-direction: reverse; transform: rotate(23deg); }
.iphone { position: relative; z-index: 2; width: 342px; height: 700px; transition: transform .25s ease-out; transform: rotateY(-5deg) rotateX(2deg); transform-style: preserve-3d; }
.iphone-frame { width: 100%; height: 100%; padding: 9px; border: 1px solid #4f4f52; border-radius: 55px; background: linear-gradient(145deg,#666 0,#111 6%,#29292b 50%,#050505 94%,#555); box-shadow: 0 60px 110px rgba(0,0,0,.75), inset 0 0 0 2px #070707; }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 46px; background: #030303; }.island { position: absolute; z-index: 6; top: 18px; left: 50%; width: 102px; height: 27px; border-radius: 999px; background: #000; transform: translateX(-50%); }
.editor-photo { position: relative; height: 430px; overflow: hidden; background: #111; }.editor-photo > img, .after-image img { width: 100%; height: 100%; object-fit: cover; }.after-image { position: absolute; inset: 0; width: var(--position); overflow: hidden; }.after-image img { width: 326px; max-width: none; }
.compare-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--position); width: 1px; background: rgba(255,255,255,.75); }.compare-line span { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(0,0,0,.28); box-shadow: 0 4px 20px rgba(0,0,0,.4); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }.compare-line span::before, .compare-line span::after { position: absolute; top: 10px; width: 7px; height: 7px; border-top: 1px solid white; border-left: 1px solid white; content: ""; }.compare-line span::before { left: 6px; transform: rotate(-45deg); }.compare-line span::after { right: 6px; transform: rotate(135deg); }
.editor-photo input[type="range"] { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.editor-controls { padding: 22px 18px 0; }.tool-row { display: flex; align-items: center; gap: 16px; color: #606064; }.tool-row span,.tool-row b { font-size: 16px; font-weight: 400; }.tool-row b { color: var(--yellow); }.ruler { position: relative; flex: 1; height: 38px; background: repeating-linear-gradient(90deg,transparent 0,transparent 5px,#3d3d40 6px,transparent 7px); mask-image: linear-gradient(90deg,transparent,black 15%,black 85%,transparent); }.ruler::after { position: absolute; top: 2px; left: 50%; width: 1px; height: 30px; background: var(--yellow); content: ""; }.ruler i { position: absolute; top: 18px; left: 0; width: 100%; height: 1px; background: #242426; }
.control-label { display: flex; justify-content: space-between; margin: 5px 26px 20px; color: #77777c; font-size:12px; letter-spacing: .08em; text-transform: uppercase; }.control-label strong { color: var(--yellow); font-weight: 500; }
.preset-dock { display: flex; gap: 9px; overflow: hidden; }.preset-dock span { display: grid; flex: 0 0 60px; height: 58px; border: 1px solid #242426; border-radius: 11px; background: linear-gradient(135deg,#1f2d2b,#a9734b); color: rgba(255,255,255,.8); font-size:12px; place-items: end center; padding-bottom: 7px; }.preset-dock span:nth-child(2){background:linear-gradient(135deg,#2d2020,#7d8b78)}.preset-dock span:nth-child(3){background:linear-gradient(135deg,#392733,#998465)}.preset-dock span:nth-child(4){background:linear-gradient(135deg,#151719,#667271)}.preset-dock .active { border-color: var(--yellow); }
.phone-tabs { display: flex; justify-content: space-around; margin-top: 20px; padding: 11px; border: 1px solid #29292b; border-radius: 20px; background: #090909; color: #68686e; font-size:12px; }.phone-tabs .active { color: white; }
.drag-note { position: absolute; z-index: 3; bottom: 2px; left: 50%; margin: 0; color: #5e5e62; font-size:12px; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); }

/* Preset rail */
.presets { overflow: hidden; }.presets-heading { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 70px; margin-bottom: 76px; }.presets-heading h2 { margin: 0; }.presets-heading > p { max-width: 390px; margin: 0 0 6px; color: var(--muted); font-size: 17px; }
.preset-marquee { width: 100%; overflow: hidden; cursor: grab; outline: none; }.preset-marquee.is-dragging { cursor: grabbing; }.preset-track { display: flex; gap: 18px; width: max-content; padding-inline: max(32px, calc((100vw - 1240px)/2)); transition: transform .12s linear; will-change: transform; }.preset-card { width: clamp(255px,25vw,365px); flex: 0 0 auto; user-select: none; }.preset-art { position: relative; height: clamp(350px,38vw,520px); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: #161616; filter: saturate(.9); transition: filter .4s ease, transform .5s var(--ease); }.preset-card:hover .preset-art { filter: saturate(1.12) brightness(1.05); transform: translateY(-7px); }.preset-art::before,.preset-art::after { position: absolute; content: ""; }.preset-art::before { inset: 0; background: radial-gradient(circle at 68% 28%,rgba(255,220,170,.72) 0 7%,transparent 8%), linear-gradient(150deg,transparent 0 48%,rgba(0,0,0,.56) 49% 100%), linear-gradient(28deg,#111b1b,#a26d4d 58%,#d2baa1); }.preset-art::after { right: 13%; bottom: -7%; width: 44%; height: 70%; border-radius: 45% 45% 5% 5%; background: linear-gradient(145deg,#271d1b,#060708 62%); box-shadow: -120px -130px 0 -55px rgba(200,150,108,.54); transform: rotate(-7deg); }
.preset-prism .preset-art::before { background: conic-gradient(from 210deg at 65% 40%,#091b2f,#f0a365,#7c234b,#173f73,#091b2f); }.preset-prism .preset-art::after { width: 62%; height: 62%; right: 20%; bottom: 17%; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: radial-gradient(circle at 38% 32%,#f5c69b,transparent 5%),radial-gradient(circle,#1a1119 0 34%,#e69b7a 35% 43%,#172a43 44%); box-shadow: 65px -80px 80px #1c4874; }
.preset-pure .preset-art::before { background: linear-gradient(160deg,#bfd2d7 0 47%,#9eb09b 48% 65%,#485c40 66%); }.preset-pure .preset-art::after { width: 36%; height: 78%; right: 34%; bottom: -6%; border-radius: 50% 50% 4% 4%; background: linear-gradient(#d8b396 0 18%,#f0e4d0 19% 52%,#6d735f 53%); box-shadow: 0 0 0 200px rgba(255,255,255,.03); }
.preset-monox .preset-art { filter: grayscale(1); }.preset-monox .preset-art::before { background: linear-gradient(115deg,#ececec 0 38%,#6a6a6a 39% 48%,#161616 49% 100%); }.preset-monox .preset-art::after { width: 48%; height: 78%; right: 22%; bottom: -5%; border-radius: 45% 45% 5% 5%; background: linear-gradient(#8a8a8a 0 23%,#090909 24%); box-shadow: -90px -120px 0 -50px #dedede; }
.preset-flourish .preset-art::before { background: radial-gradient(circle at 25% 25%,#f8b8c6 0 5%,transparent 6%),radial-gradient(circle at 70% 52%,#c54b76 0 7%,transparent 8%),radial-gradient(circle at 40% 72%,#ef859c 0 10%,transparent 11%),linear-gradient(145deg,#1f3c2c,#637c51 48%,#e0af98); filter: blur(1px); }.preset-flourish .preset-art::after { width: 42%; height: 68%; background: linear-gradient(#b57f68 0 22%,#532438 23%); }
.preset-wvibes .preset-art::before { background: linear-gradient(155deg,#f0c18e 0 37%,#bd6c52 38% 50%,#1a4957 51% 69%,#0c252b 70%); }.preset-wvibes .preset-art::after { width: 50%; height: 54%; right: 25%; bottom: 0; border-radius: 48% 48% 0 0; background: linear-gradient(#d8a078 0 30%,#ede0cd 31%); box-shadow: 120px -170px 100px #e9aa6e; }
.preset-mono .preset-art { filter: grayscale(1) contrast(1.15); }.preset-mono .preset-art::before { background: radial-gradient(circle at 50% 35%,#ddd 0 13%,#222 14% 24%,transparent 25%),linear-gradient(90deg,#050505,#999 50%,#050505); }.preset-mono .preset-art::after { width: 65%; height: 45%; right: 17%; bottom: 8%; border-radius: 50%; background: #161616; box-shadow: 0 -110px 90px #b5b5b5; }
.preset-xmas .preset-art::before { background: radial-gradient(circle at 28% 20%,#f5df8c 0 1.8%,transparent 2%),radial-gradient(circle at 74% 30%,#fff0b0 0 1.4%,transparent 1.8%),radial-gradient(circle at 62% 72%,#d7c36e 0 2%,transparent 2.4%),linear-gradient(145deg,#08130e,#28583b 52%,#6c1f24); }.preset-xmas .preset-art::after { width: 48%; height: 60%; background: linear-gradient(#bc9a7c 0 24%,#8d1723 25%); box-shadow: 85px -80px 90px rgba(255,225,138,.45); }
.grain { position: absolute; z-index: 3; inset: -50%; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); animation: grain 1s steps(2) infinite; pointer-events:none; }.preset-no { position: absolute; z-index: 4; top: 18px; left: 20px; color: rgba(255,255,255,.66); font-size:12px; letter-spacing: .12em; }
.preset-meta { position: relative; padding: 20px 2px; border-bottom: 1px solid var(--line); }.preset-meta h3 { margin: 0 0 4px; font-size: 17px; font-weight: 570; letter-spacing: .03em; }.preset-meta p { margin: 0; color: #67676c; font-size:12px; letter-spacing: .08em; text-transform: uppercase; }.preset-meta > span { position: absolute; top: 23px; right: 4px; color: #666; }.marquee-hint { display: flex; align-items: center; gap: 12px; margin-top: 36px; color: #5d5d62; font-size:12px; letter-spacing: .12em; text-transform: uppercase; }.marquee-hint span { width: 44px; height: 1px; background: #343438; }

/* Principles */
.principles { border-top: 1px solid var(--line-soft); }.principles-intro { display: grid; grid-template-columns: .55fr 1.45fr; gap: 60px; align-items: start; }.principles-intro h2 { max-width: 870px; }
.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 80px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.principle-grid article { min-height: 440px; padding: 38px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg,rgba(255,255,255,.025),transparent 60%); transition: background .35s ease; }.principle-grid article:hover { background: linear-gradient(145deg,rgba(255,255,255,.06),transparent 70%); }.principle-icon { display: grid; width: 62px; height: 62px; margin-bottom: 100px; border: 1px solid #262629; border-radius: 18px; background: #080808; place-items: center; }.principle-icon > i { width: 20px; height: 25px; border: 1px solid #777; border-radius: 10px 10px 8px 8px; }.principle-icon > i::before { display:block; width: 8px; height: 6px; margin: -6px auto 0; border: 1px solid #777; border-bottom:0; border-radius:5px 5px 0 0; content:""; }.principle-icon.no-account { color: #777; font-size: 28px; font-weight: 200; }.principle-icon.no-tracking { display:flex; gap:4px; justify-content:center; }.principle-icon.no-tracking i { width:4px; height:4px; border:0; border-radius:50%; background:#777; }.principle-icon.no-tracking i::before{display:none}.metric { margin-bottom: 13px; color: #aaaab0; font-size:12px; letter-spacing: .15em; text-transform: uppercase; }.principle-grid h3 { margin: 0 0 16px; font-size: 27px; font-weight: 540; line-height: 1.05; }.principle-grid article > p:last-child { max-width: 300px; margin: 0; color: #76767b; font-size: 14px; }

/* Final CTA */
.final-cta { min-height: 85vh; display: grid; overflow: hidden; place-items: center; isolation: isolate; border-top: 1px solid var(--line-soft); }.final-cta .final-grid { opacity: .32; }.final-orb { position:absolute; z-index:-2; top:50%; left:50%; width:min(850px,75vw); aspect-ratio:1; border:1px solid rgba(255,255,255,.08); border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.055),transparent 57%); filter:blur(1px); transform:translate(-50%,-50%); }.final-orb::before,.final-orb::after { position:absolute; inset:9%; border:1px solid rgba(255,255,255,.05); border-radius:50%; content:""; }.final-orb::after { inset:21%; }.final-content { text-align:center; }.final-content img { width:86px; margin:0 auto 42px; border-radius:22px; box-shadow:0 28px 80px #000; }.final-content h2 { margin-bottom: 22px; }.final-content p { margin-bottom: 30px; color: #75757a; font-size: 18px; }.text-link { display:inline-flex; gap:10px; align-items:center; border-bottom:1px solid #555; padding-bottom:5px; font-size:13px; }.text-link span{color:#777}.text-link.is-static{color:#777}

/* Footer */
.site-footer { border-top:1px solid var(--line); background:#020202; }.footer-main { display:flex; justify-content:space-between; padding-block:72px; }.footer-brand img{width:126px;margin-bottom:16px}.footer-brand p{margin:0;color:#68686d;font-size:13px}.footer-nav{display:grid;grid-template-columns:repeat(2,auto);gap:14px 46px}.footer-nav a{color:#a2a2a7;font-size:13px}.footer-nav a:hover{color:white}.footer-meta{display:flex;justify-content:space-between;padding-block:22px;border-top:1px solid var(--line-soft);color:#4d4d52;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.footer-meta p{margin:0}

/* Page foundations */
.page-shell,.legal-page{padding-top:clamp(150px,18vw,230px);padding-bottom:150px}.page-heading,.page-hero{padding-top:clamp(150px,19vw,240px);padding-bottom:clamp(90px,10vw,150px)}.page-heading h1,.page-hero h1,.legal-header h1{max-width:1000px;margin:0;font-size:clamp(64px,9vw,136px);font-weight:560;line-height:.88}.page-hero>p:last-child{max-width:610px;margin:36px 0 0;color:#85858b;font-size:20px}.content-card{padding:30px 0;border-top:1px solid var(--line)}.prose{color:#b5b5ba;font-size:17px}.prose h2{margin:70px 0 20px;color:white;font-size:30px;line-height:1.1}.prose h3{color:white}.prose p{max-width:760px}.prose a{border-bottom:1px solid #777;color:white}.prose ul,.prose ol{max-width:760px}

/* Contact */
.contact-page,.support-page{padding-bottom:160px}.contact-layout,.support-contact{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(70px,10vw,150px);padding-top:80px;border-top:1px solid var(--line)}.contact-aside{max-width:350px}.contact-index{margin-bottom:60px;color:#505056;font-size:12px;letter-spacing:.15em}.contact-aside h2{font-size:clamp(36px,4vw,58px);line-height:1}.contact-aside>p:last-child{color:#75757b;font-size:14px}.contact-form{max-width:760px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.contact-form label{display:block;margin-bottom:28px}.contact-form label>span{display:block;margin-bottom:10px;color:#77777d;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:0;border-bottom:1px solid #29292d;border-radius:0;outline:0;background:transparent;color:white;transition:border-color .25s ease}.contact-form input,.contact-form select{height:54px}.contact-form textarea{padding:16px 0;resize:vertical}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#aaa}.contact-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#666 50%),linear-gradient(135deg,#666 50%,transparent 50%);background-position:calc(100% - 14px) 24px,calc(100% - 9px) 24px;background-size:5px 5px;background-repeat:no-repeat}.contact-form option{background:#111}.form-trap{position:absolute!important;left:-9999px!important}.form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}.form-footer p{margin:0;color:#8f8f94;font-size:12px}.send-button{display:flex;align-items:center;gap:30px;height:52px;padding:0 10px 0 22px;border:1px solid #28282c;border-radius:999px;background:#0a0a0a;transition:background .25s ease,color .25s ease}.send-button i{display:grid;width:34px;height:34px;border-radius:50%;background:white;color:black;font-style:normal;place-items:center}.send-button:hover{background:white;color:black}.send-button:hover i{background:black;color:white}.send-button:disabled{cursor:wait;opacity:.55}

/* Support */
.faq-section{padding-bottom:150px}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item summary{position:relative;display:grid;grid-template-columns:70px 1fr 30px;align-items:center;min-height:94px;cursor:pointer;list-style:none;font-size:clamp(19px,2.2vw,28px);letter-spacing:-.025em}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary>span{color:#4f4f54;font-size:12px;letter-spacing:.12em}.faq-item summary i{position:relative;width:18px;height:18px}.faq-item summary i::before,.faq-item summary i::after{position:absolute;top:8px;left:1px;width:16px;height:1px;background:#777;content:"";transition:transform .3s var(--ease)}.faq-item summary i::after{transform:rotate(90deg)}.faq-item[open] summary i::after{transform:rotate(0)}.faq-item>div{display:grid;grid-template-columns:70px 1fr 30px}.faq-item>div p{grid-column:2;max-width:740px;margin:0;padding:0 0 40px;color:#7d7d83;font-size:16px}.support-contact{padding-top:130px}

/* Legal */
.legal-header{padding-bottom:100px;border-bottom:1px solid var(--line)}.legal-header .effective{margin:34px 0 0;color:#64646a;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.legal-layout{display:grid;grid-template-columns:.42fr 1fr;gap:100px;padding-top:80px}.legal-aside{position:sticky;top:120px;align-self:start}.legal-aside span{display:block;margin-bottom:10px;color:#c5c5c8;font-size:12px;font-weight:650;letter-spacing:.12em}.legal-aside p{max-width:190px;color:#5e5e64;font-size:13px}.legal-content .legal-lead{margin-bottom:90px;color:#e3e3e5;font-size:clamp(22px,2.7vw,36px);line-height:1.35;letter-spacing:-.025em}.legal-content h2{margin-top:78px;font-size:27px}.legal-content p{color:#8f8f95;font-size:15px;line-height:1.75}

/* Motion */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@keyframes hero-in { from { opacity:0; transform:translateY(26px); filter:blur(8px) } to { opacity:1; transform:none; filter:blur(0) } }
@keyframes ring-drift { from { margin-left:-28px; margin-top:-16px; border-color:rgba(255,255,255,.035) } to { margin-left:28px; margin-top:16px; border-color:rgba(255,255,255,.1) } }
@keyframes glow-breathe { from{opacity:.5;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1.06)} }
@keyframes line-scan { from{transform:translateX(-110%)}to{transform:translateX(110%)} }
@keyframes orbit-turn { to{transform:rotate(360deg)} }
@keyframes grain { 0%{transform:translate(0,0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,4%)}75%{transform:translate(4%,2%)}100%{transform:translate(-3%,-4%)} }

@media (max-width: 900px) {
  :root{--shell:min(100% - 40px,720px)}
  .site-nav{position:fixed;inset:0;display:flex;visibility:hidden;flex-direction:column;align-items:flex-start;justify-content:center;padding:90px 20px 40px;background:rgba(0,0,0,.96);opacity:0;transition:opacity .35s ease,visibility .35s}.site-nav .nav-list{flex-direction:column;align-items:flex-start;gap:10px}.site-nav a{font-size:35px;letter-spacing:-.04em}.site-nav .nav-cta{min-width:auto;height:auto;padding:12px 20px;font-size:16px;margin-top:20px}.menu-toggle{display:block}.menu-open .site-nav{visibility:visible;opacity:1}.menu-open .menu-toggle span:first-child{top:22px;transform:rotate(45deg)}.menu-open .menu-toggle span:last-child{top:22px;transform:rotate(-45deg)}
  .hero-wordmark{width:min(74vw,390px)}.hero h1{font-size:clamp(54px,13vw,90px)}.hero-copy{max-width:480px}.liquid-rings i{width:120vw}
  .split-layout{grid-template-columns:1fr}.studio-copy{max-width:650px}.phone-stage{min-height:760px;margin-top:30px}.presets-heading{grid-template-columns:1fr;gap:28px}.principles-intro{grid-template-columns:1fr;gap:10px}.principle-grid{grid-template-columns:1fr}.principle-grid article{min-height:auto}.principle-icon{margin-bottom:75px}
  .contact-layout,.support-contact{grid-template-columns:1fr;gap:60px}.contact-aside{max-width:600px}.legal-layout{grid-template-columns:1fr;gap:30px}.legal-aside{position:static}.legal-aside p{max-width:none}.footer-main{gap:60px}
}

@media (max-width: 600px) {
  :root{--shell:calc(100% - 32px)}
  .section{padding-block:100px}.header-inner{height:68px}.brand{width:125px}
  .hero-content{padding-top:60px}.hero-wordmark{width:78vw;margin-bottom:25px}.hero-kicker{font-size:12px}.hero h1{font-size:clamp(50px,16.5vw,78px);line-height:.92}.hero-copy{font-size:16px;padding-inline:12px}.hero-actions{margin-top:34px}.scroll-cue{display:none}
  h2{font-size:48px}.statement>p:last-child{font-size:18px}.split-layout{gap:20px}.studio-copy h2{font-size:47px}.feature-list{margin-top:42px}.phone-stage{min-height:665px;margin-inline:-12px}.iphone{width:290px;height:594px}.iphone-frame{border-radius:47px}.phone-screen{border-radius:39px}.editor-photo{height:365px}.after-image img{width:274px}.editor-controls{padding:14px 14px 0}.preset-dock span{flex-basis:51px;height:46px}.phone-tabs{margin-top:13px}.orbit{width:420px;height:420px}.orbit-two{width:500px;height:340px}.drag-note{display:none}
  .presets-heading{margin-bottom:50px}.preset-track{padding-inline:16px}.preset-card{width:74vw}.preset-art{height:100vw;max-height:470px}.marquee-hint{margin-top:25px}.principle-grid{margin-top:45px}.principle-grid article{padding:28px}.principle-icon{margin-bottom:60px}.final-cta{min-height:75vh}.final-content img{width:70px;border-radius:18px}
  .footer-main{flex-direction:column;padding-block:54px}.footer-nav{gap:12px 35px}.footer-meta{gap:20px}.footer-meta p:last-child{text-align:right}
  .page-hero{padding-top:145px}.page-hero h1,.page-heading h1,.legal-header h1{font-size:64px}.page-hero>p:last-child{font-size:17px}.contact-layout{padding-top:60px}.contact-index{margin-bottom:30px}.form-grid{grid-template-columns:1fr;gap:0}.form-footer{align-items:flex-start;flex-direction:column-reverse}.send-button{align-self:stretch;justify-content:space-between}.faq-item summary{grid-template-columns:38px 1fr 22px;min-height:86px;font-size:19px}.faq-item>div{grid-template-columns:38px 1fr 22px}.legal-page{padding-top:145px}.legal-header{padding-bottom:60px}.legal-layout{padding-top:50px}.legal-content .legal-lead{margin-bottom:70px}.legal-content h2{margin-top:62px;font-size:24px}
}

/* 2026-07 refinement — quieter launch page and editorial pack index */
.brand { gap: 0; align-items: center; }
.brand-mark { display: block; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 0; }
.brand-name { display: inline-flex; height: 36px; margin-left: 4px; align-items: center; line-height: 1; }
.header-inner > .brand,
.header-inner > .site-nav,
.nav-list,
.nav-list > li,
.nav-list > li > a { height: 100%; }
.site-nav { align-items: center; }
.nav-list > li > a { display: inline-flex; align-items: center; }

.hero-wordmark { width: min(31vw, 282px); margin-bottom: 30px; }
.hero h1 { max-width: 760px; margin-bottom: 22px; font-size: clamp(40px, 5vw, 70px); line-height: .96; }
.hero-copy { max-width: 550px; font-size: clamp(14px, 1.25vw, 18px); line-height: 1.46; }

/* The source order stays semantic; these orders create the requested visual story. */
#main > .hero { order: 1; }
#main > .studio { order: 2; }
#main > .presets { order: 3; }
#main > .feature-cinema { order: 4; }
#main > .plans { order: 5; }
#main > .principles { order: 6; }
#main > .statement { order: 7; }

.statement { --motion-progress: .5; position: relative; min-height: 92svh; background: #020202; }
.statement::before { background:
  radial-gradient(ellipse at 50% 44%, rgba(255,255,255,.055), transparent 34%),
  linear-gradient(180deg, #000, #070707 48%, #000); }
.darkroom-type { display: none; }
.darkroom-light { position: absolute; z-index: -1; inset: -10%; overflow: hidden; pointer-events: none; }
.darkroom-light i { position: absolute; top: -20%; bottom: -20%; width: 34vw; min-width: 330px; opacity: calc(.12 + var(--motion-progress) * .45); filter: blur(34px); will-change: transform, opacity; }
.darkroom-light i:nth-child(1) { left: -24vw; background: linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent); transform: translateX(calc(var(--motion-progress) * 105vw)) rotate(-15deg); }
.darkroom-light i:nth-child(2) { right: -28vw; background: linear-gradient(90deg, transparent, rgba(95,125,170,.075), transparent); transform: translateX(calc(var(--motion-progress) * -92vw)) rotate(11deg); }
.darkroom-light i:nth-child(3) { top: 18%; right: 14%; bottom: auto; width: 42vw; min-width: 420px; aspect-ratio: 1.8; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.045), transparent 68%); opacity: calc(.08 + var(--motion-progress) * .32); filter: blur(calc(18px - var(--motion-progress) * 8px)); transform: scale(calc(.72 + var(--motion-progress) * .38)) rotate(calc(-8deg + var(--motion-progress) * 14deg)); }
.darkroom-title span { opacity: calc(.26 + var(--motion-progress) * .74); filter: blur(calc((1 - var(--motion-progress)) * 12px)); transform: translateY(calc((1 - var(--motion-progress)) * 50px)) scale(calc(.96 + var(--motion-progress) * .04)); }

.packs-page { padding-bottom: 150px; }
.packs-hero { min-height: 64svh; padding-top: 165px; padding-bottom: 90px; }
.packs-hero h1 { max-width: 920px; font-size: clamp(58px, 7.2vw, 108px); line-height: .88; }
.packs-hero-motion { opacity: .28; }
.packs-index { border-top: 1px solid var(--line); }
.pack-index-row { display: grid; grid-template-columns: 48px minmax(165px,.65fr) minmax(300px,1.45fr) minmax(230px,.8fr); gap: clamp(22px,3.5vw,58px); min-height: 286px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.pack-index-number { align-self: start; padding-top: 8px; color: #55555b; font-size:12px; letter-spacing: .14em; }
.pack-index-title h2 { margin: 0 0 14px; font-size: clamp(32px,3.4vw,54px); font-weight: 540; letter-spacing: -.045em; line-height: .95; }
.pack-index-title small { color: #69696f; font-size:12px; letter-spacing: .13em; text-transform: uppercase; }
.pack-index-copy > p { max-width: 520px; margin: 0 0 28px; color: #9a9aa0; font-size: 14px; line-height: 1.55; }
.pack-index-copy > span { display: flex; gap: 12px; color: #d0d0d3; font-size:12px; line-height: 1.4; }
.pack-index-copy > span small { color: #56565c; font: inherit; text-transform: uppercase; }
.pack-index-row figure { height: 190px; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: #0a0a0a; }
.pack-index-row figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .8s ease; }
.pack-index-row:hover figure img { transform: scale(1.025); filter: brightness(1.05); }
.pack-index-row.preset-monox figure img,
.pack-index-row.preset-mono figure img { filter: grayscale(1) contrast(1.06); }

.footer-lockup { height: 44px; gap: 0; align-items: center; }
.footer-lockup img:first-child { display: block; width: 44px; height: 44px; border-radius: 0; }
.footer-lockup .brand-name { display: inline-flex; height: 44px; margin-left: 5px; align-items: center; line-height: 1; }
.footer-trademark { margin-top: -34px; padding-bottom: 46px; color: #4f4f55; font-size:12px; line-height: 1.55; }

@media (max-width: 900px) {
  .pack-index-row { grid-template-columns: 38px minmax(145px,.7fr) 1.3fr; }
  .pack-index-row figure { grid-column: 2 / -1; height: 240px; }
}

@media (max-width: 600px) {
  .brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .brand-name { height: 32px; margin-left: 3px; font-size: 16px; }
  .hero-wordmark { width: 56vw; margin-bottom: 25px; }
  .hero h1 { max-width: 350px; font-size: clamp(40px, 12vw, 58px); }
  .hero-copy { max-width: 318px; padding-inline: 0; font-size: 14px; }
  .packs-hero { min-height: 66svh; padding-top: 132px; padding-bottom: 62px; }
  .packs-hero h1 { font-size: 54px; }
  .pack-index-row { grid-template-columns: 32px 1fr; gap: 18px; padding: 30px 0 40px; }
  .pack-index-number { grid-row: 1 / span 2; }
  .pack-index-copy { grid-column: 2; }
  .pack-index-copy > p { font-size: 13px; }
  .pack-index-row figure { grid-column: 2; height: 54vw; min-height: 175px; }
  .footer-trademark { margin-top: -16px; padding-bottom: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.liquid-grid{display:none}[data-reveal]{opacity:1;transform:none}.preset-track{transition:none}
}

/* BLUEGRADE launch page — expanded product story */
.brand { width: auto; gap: 1px; }
.brand-mark { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; }
.brand-wordmark { width: 116px; height: auto; }
.hero-wordmark { width: min(40vw, 360px); margin-bottom: 22px; }
.hero h1 { max-width: 830px; margin-bottom: 24px; font-size: clamp(48px, 6.1vw, 88px); line-height: .94; transition: opacity .3s ease, transform .3s var(--ease), filter .3s ease; }
.hero h1.is-changing { opacity: 0; filter: blur(8px); transform: translateY(10px); }
.hero-kicker { margin-bottom: 20px; }
.statement { max-width: 980px; }
.statement h2 { font-size: clamp(43px, 5.5vw, 78px); }
.statement > p:nth-of-type(2) { max-width: 610px; margin-inline: auto; color: var(--muted); font-size: clamp(17px, 1.65vw, 22px); line-height: 1.38; }
.statement-motion { --motion-progress: .5; position: relative; width: min(720px,82vw); height: 180px; margin: 58px auto -25px; overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
.statement-motion i { position: absolute; top: 50%; left: 50%; width: calc(38% + var(--motion-progress) * 18%); height: 72px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; filter: blur(calc(1px + var(--motion-progress) * 5px)); transform: translate(-50%,-50%) rotate(calc(-8deg + var(--motion-progress) * 16deg)); }
.statement-motion i:nth-child(2) { width: calc(62% + var(--motion-progress) * 12%); height: 105px; opacity: .58; transform: translate(-50%,-50%) rotate(calc(7deg - var(--motion-progress) * 12deg)); }
.statement-motion i:nth-child(3) { width: 92%; height: 145px; opacity: .3; transform: translate(-50%,-50%) rotate(calc(-3deg + var(--motion-progress) * 7deg)); }
.statement-motion span { position: absolute; top: 50%; left: calc(12% + var(--motion-progress) * 76%); width: 8px; height: 8px; border-radius: 50%; background: #ddd; box-shadow: 0 0 30px rgba(255,255,255,.8); transform: translate(-50%,-50%); }

.proof-strip { border-block: 1px solid var(--line-soft); background: #030303; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-grid > div { min-height: 190px; padding: 38px 28px; border-right: 1px solid var(--line-soft); }
.proof-grid > div:first-child { border-left: 1px solid var(--line-soft); }
.proof-grid strong { display: block; margin-bottom: 45px; color: #e9e9eb; font-size: clamp(34px, 4vw, 58px); font-weight: 520; letter-spacing: -.055em; line-height: 1; }
.proof-grid span { color: #6e6e73; font-size:12px; letter-spacing: .1em; text-transform: uppercase; }

.feature-list li { align-items: flex-start; }
.feature-list li div { display: grid; gap: 5px; }
.feature-list li strong { color: #d0d0d3; font-size: 14px; font-weight: 540; }
.feature-list li small { max-width: 390px; color: #67676d; font-size: 12px; line-height: 1.45; }
.bluegrade-phone .phone-screen { display: flex; flex-direction: column; }
.phone-status { position: relative; display: flex; flex: 0 0 38px; align-items: center; justify-content: space-between; padding: 0 19px; background: #030303; color: #eee; font-size:12px; letter-spacing: .08em; }
.phone-status strong { font-size:12px; font-weight: 650; }
.phone-status > span { color: #999; font-size:12px; letter-spacing: 2px; }
.bluegrade-phone .island { position: absolute; top: 6px; left: 50%; width: 94px; height: 25px; transform: translateX(-50%); }
.app-topbar { display: flex; justify-content: space-between; align-items: center; flex: 0 0 52px; height: 52px; padding: 6px 13px 7px; border-top: 1px solid rgba(255,255,255,.025); background: #030303; }
.app-topbar > div { display: flex; gap: 5px; }
.circle-control { display: grid; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: #101011; color: #d7d7da; place-items: center; }
.circle-control svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.circle-control svg circle { fill: currentColor; stroke: none; }
.circle-control.export-control { color: white; }
.bluegrade-phone .editor-photo { height: 390px; flex: 0 0 390px; margin: 0; background: #000; }
.bluegrade-phone .editor-photo img { width: 100%; height: 100%; object-fit: cover; }
.ungraded-photo { filter: saturate(.28) contrast(.86) brightness(1.08); }
.bluegrade-phone .after-image img { width: 326px; }
.real-editor-controls { display: flex; min-height: 0; flex: 0 0 202px; flex-direction: column; padding: 11px 12px 9px; background: #030303; }
.pack-chips { display: flex; gap: 6px; overflow: hidden; padding: 1px 0 9px; }
.pack-chips span { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #232326; border-radius: 999px; color: #727278; font-size:12px; font-weight: 600; letter-spacing: .045em; white-space: nowrap; }
.pack-chips .mark-chip img { width: 12px; height: 12px; }
.pack-chips .active { border-color: #7c7c80; color: white; }
.preset-heading { display: flex; justify-content: space-between; padding: 3px 2px 8px; color: #aaaab0; font-size:12px; letter-spacing: .12em; text-transform: uppercase; }
.preset-heading strong { color: #515157; font-weight: 500; }
.preset-shelf { display: flex; gap: 7px; }
.preset-shelf > div { position: relative; width: 64px; height: 67px; overflow: hidden; border: 1px solid #222; border-radius: 9px; background: #111; }
.preset-shelf img { width: 100%; height: 100%; object-fit: cover; }
.preset-shelf > div:nth-child(2) img { filter: contrast(.84) sepia(.16); }
.preset-shelf > div:nth-child(3) img { filter: saturate(.65) brightness(1.12); }
.preset-shelf > div:nth-child(4) img { filter: hue-rotate(-10deg) contrast(1.12); }
.preset-shelf span { position: absolute; right: 0; bottom: 0; left: 0; padding: 4px; background: linear-gradient(transparent,rgba(0,0,0,.8)); color: white; font-size:12px; text-align: center; }
.preset-shelf .selected { border-color: var(--yellow); }
.bluegrade-bottom-bar { display: flex; align-items: center; justify-content: space-around; height: 54px; margin-top: 10px; padding: 0 11px; border: 1px solid #29292d; border-radius: 999px; background: rgba(0,0,0,.96); color: #707076; }
.bluegrade-bottom-bar span { display: grid; width: 25px; height: 25px; font-size: 13px; place-items: center; }
.bluegrade-bottom-bar .active { color: white; }
.bluegrade-bottom-bar b { display: grid; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.86); color: #000; font-size: 20px; font-weight: 500; place-items: center; }
.bluegrade-bottom-bar img { width: 20px; height: 20px; }
.bluegrade-bottom-bar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.feature-cinema { padding-bottom: clamp(130px, 17vw, 240px); overflow: visible; background: radial-gradient(circle at 35% 35%, #111 0, #030303 35%, #000 67%); }
.cinema-heading { padding-bottom: 110px; }
.cinema-heading h2 { max-width: 950px; }
.cinema-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(60px, 9vw, 150px); align-items: start; }
.cinema-sticky { position: sticky; top: 115px; height: calc(100vh - 150px); min-height: 580px; }
.cinema-device { position: relative; height: 100%; max-height: 730px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 38px; background: #080808; box-shadow: 0 70px 140px rgba(0,0,0,.55); transform: translateY(calc(var(--parallax, 0) * 1px)); }
.cinema-device::after { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.08),transparent 45%,rgba(0,0,0,.62)); content: ""; pointer-events: none; }
.cinema-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .8s var(--ease), transform 1.2s var(--ease); }
.cinema-slide.active { opacity: 1; transform: scale(1); }
.cinema-ui { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.cinema-ui > span { position: absolute; top: 24px; left: 27px; color: rgba(255,255,255,.82); font-size:12px; font-weight: 650; letter-spacing: .15em; }
.cinema-ui i { position: absolute; top: 23px; right: 24px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(0,0,0,.25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cinema-ui small { position: absolute; right: 28px; bottom: 25px; color: rgba(255,255,255,.76); font-size:12px; letter-spacing: .16em; text-transform: uppercase; }
.cinema-steps { padding-top: 8vh; }
.cinema-step { min-height: 76vh; padding: 14vh 0; opacity: .24; transition: opacity .55s ease; }
.cinema-step.active { opacity: 1; }
.cinema-step > span { display: block; margin-bottom: 38px; color: #59595f; font-size:12px; letter-spacing: .15em; }
.cinema-step h3 { max-width: 470px; margin-bottom: 22px; font-size: clamp(38px, 4.3vw, 64px); font-weight: 540; line-height: .98; }
.cinema-step p { max-width: 430px; color: #818187; font-size: 17px; line-height: 1.55; }

.preset-art.pack-compare { height: clamp(300px, 30vw, 430px); border-radius: 14px; filter: none; background: #101010; cursor: ew-resize; }
.preset-card:hover .preset-art.pack-compare { filter: none; transform: translateY(-7px); }
.preset-art.pack-compare::before, .preset-art.pack-compare::after { display: none; }
.pack-base, .pack-grade img { width: 100%; height: 100%; object-fit: cover; }
.pack-base { filter: saturate(.18) contrast(.82) brightness(1.05); }
.pack-grade { position: absolute; inset: 0; width: var(--reveal); overflow: hidden; }
.pack-grade img { width: clamp(255px,25vw,365px); max-width: none; }
.pack-split { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--reveal); width: 1px; background: rgba(255,255,255,.8); }
.pack-split span { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(0,0,0,.34); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pack-split span::before { position: absolute; inset: 8px; border-inline: 1px solid white; content: ""; }
.pack-compare input { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-caption { position: absolute; z-index: 4; bottom: 15px; color: rgba(255,255,255,.72); font-size:12px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.before-caption { right: 16px; }.after-caption { left: 16px; }
.preset-meta { min-height: 130px; }
.preset-meta small { display: block; max-width: 82%; margin-top: 18px; color: #77777d; font-size: 12px; line-height: 1.45; }
.preset-art.pack-cover { display: block; height: clamp(300px, 30vw, 430px); border-radius: 14px; background: #101010; filter: none; }
.preset-art.pack-cover::before,.preset-art.pack-cover::after { display: none; }
.preset-art.pack-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.preset-card:hover .preset-art.pack-cover { filter: none; transform: translateY(-7px); }
.preset-card:hover .preset-art.pack-cover img { transform: scale(1.025); }
.preset-monox .pack-cover img,.preset-mono .pack-cover img { filter: grayscale(1) contrast(1.06); }
.pack-directory { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pack-directory a { min-height: 230px; padding: 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg,rgba(255,255,255,.022),transparent 62%); transition: background .35s ease, transform .35s var(--ease); }
.pack-directory a:hover { background: linear-gradient(145deg,rgba(255,255,255,.06),transparent 72%); transform: translateY(-4px); }
.pack-directory span { color: #55555a; font-size:12px; letter-spacing: .12em; }
.pack-directory h3 { margin: 28px 0 9px; font-size: 20px; font-weight: 560; }
.pack-directory p { min-height: 44px; margin-bottom: 24px; color: #74747a; font-size: 12px; line-height: 1.45; }
.pack-directory small { color: #55555b; font-size:12px; letter-spacing: .08em; text-transform: uppercase; }
.packs-page-link { margin-top: 38px; text-align: right; }

.plans { border-top: 1px solid var(--line-soft); background: linear-gradient(180deg,#000,#050505 45%,#000); }
.plans-heading { max-width: 980px; margin-left: max(32px, calc((100vw - 1240px)/2)); }
.plans-heading > p:last-child { max-width: 650px; color: #85858b; font-size: 18px; }
.plan-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 80px; }
.plan-card { position: relative; display: flex; flex-direction: column; min-height: 690px; padding: clamp(32px,4vw,56px); overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg,#0b0b0c,#030303 72%); }
.plan-card.pro-plan { border-color: rgba(255,255,255,.24); background: radial-gradient(circle at 85% 10%,rgba(30,73,164,.22),transparent 30%),linear-gradient(145deg,#101011,#030303 72%); }
.popular-label { position: absolute; top: 28px; right: 28px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #a9a9ae; font-size:12px; letter-spacing: .12em; text-transform: uppercase; }
.plan-card-head > span { display: block; margin-bottom: 24px; color: #727278; font-size:12px; letter-spacing: .16em; }
.plan-card-head h3 { margin-bottom: 9px; font-size: clamp(48px,5vw,72px); font-weight: 550; line-height: 1; }
.plan-card-head p { color: #77777d; }
.plan-price { display: grid; gap: 6px; min-height: 100px; margin: 32px 0 20px; }
.plan-price strong { font-size: 39px; font-weight: 520; letter-spacing: -.04em; }.plan-price span { color: #66666c; font-size: 12px; }
.plan-price .plan-yearly { color: #8c8c92; font-size: 12px; line-height: 1.45; }
.pro-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 32px 0 20px; }
.pro-options > div { min-height: 100px; padding: 17px; border: 1px solid #252529; border-radius: 15px; background: rgba(255,255,255,.025); }
.pro-options strong,.pro-options span { display: block; }.pro-options strong { margin-bottom: 8px; font-size: 14px; font-weight: 560; }.pro-options span { color: #68686e; font-size:12px; line-height: 1.4; }
.plan-card ul { margin: 18px 0 38px; padding: 0; list-style: none; }
.plan-card li { position: relative; padding: 13px 0 13px 25px; border-bottom: 1px solid var(--line-soft); color: #aaaab0; font-size: 13px; }
.plan-card li::before { position: absolute; top: 15px; left: 1px; color: #ddd; content: "✓"; }.plan-card li b { color: white; font-weight: 560; }
.plan-button { box-sizing: border-box; display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; height: 52px; margin-top: auto; padding: 0 10px 0 21px; border: 1px solid #2a2a2e; border-radius: 999px; color: #d1d1d4; font-size: 13px; white-space: nowrap; }
.plan-button span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #171719; place-items: center; }
.plan-button.light { background: #f1f1f3; color: #050505; }.plan-button.light span { background: #050505; color: white; }
.price-note { margin-top: 13px; color: #4f4f55; font-size:12px; text-align: center; }
.plan-action { display: flex; min-height: 82px; margin-top: auto; flex-direction: column; }
.plan-action .plan-button { margin-top: 0; }
.plan-action .price-note { display: block; min-height: 14px; }
.principle-grid article { transform: translateY(calc(var(--parallax, 0) * 1px)); }

/* Preset archive */
.packs-page { padding-bottom: 160px; overflow: hidden; }
.packs-hero { position: relative; display: grid; min-height: 92svh; overflow: hidden; align-items: end; padding-top: 170px; padding-bottom: 110px; isolation: isolate; }
.packs-hero::after { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 66% 40%,rgba(255,255,255,.06),transparent 22%),radial-gradient(circle at 50% 85%,#111,transparent 42%); content: ""; }
.packs-hero h1 { max-width: 1050px; margin-bottom: 32px; font-size: clamp(62px,9.2vw,142px); font-weight: 570; line-height: .84; }
.packs-hero > .shell > p:last-child { max-width: 650px; color: var(--muted); font-size: 20px; }
.packs-hero-motion { position: absolute; z-index: -1; top: 9%; right: -7%; width: min(74vw,1000px); aspect-ratio:1; opacity:.75; }
.packs-hero-motion i { position:absolute; inset:12%; border:1px solid rgba(255,255,255,.09); border-radius:50%; filter:blur(1px); animation:orbit-turn 24s linear infinite; }.packs-hero-motion i:nth-child(2){inset:25%;transform:rotate(60deg);animation-duration:31s;animation-direction:reverse}.packs-hero-motion i:nth-child(3){inset:38%;box-shadow:0 0 100px rgba(255,255,255,.045);animation-duration:18s}
.packs-showcase { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.pack-showcase-card { --motion-progress:.5; position:relative; min-height:clamp(540px,66vw,820px); overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:32px; background:#090909; transform:translateY(calc((.5 - var(--motion-progress)) * 22px)); }
.pack-showcase-card.pack-featured { grid-column:1 / -1; min-height:min(82vh,900px); }
.pack-showcase-card > img { position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; transform:scale(calc(1.08 - var(--motion-progress) * .045)) translateY(calc((.5 - var(--motion-progress)) * 3%)); transition:filter .8s ease; }
.pack-showcase-card:hover > img { filter:brightness(1.08); }
.pack-showcase-card.preset-monox > img,.pack-showcase-card.preset-mono > img { filter:grayscale(1) contrast(1.08); }
.pack-card-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 35%,rgba(0,0,0,.88)); }
.pack-card-top { position:absolute; top:28px; right:30px; left:30px; display:flex; justify-content:space-between; color:rgba(255,255,255,.78); font-size:12px; letter-spacing:.13em; text-transform:uppercase; }
.pack-card-top small { font:inherit; }
.pack-card-copy { position:absolute; right:clamp(28px,5vw,70px); bottom:clamp(30px,5vw,66px); left:clamp(28px,5vw,70px); }
.pack-card-copy h2 { margin-bottom:18px; font-size:clamp(52px,7vw,104px); }
.pack-card-copy > p { max-width:620px; margin-bottom:32px; color:rgba(255,255,255,.72); font-size:17px; }
.pack-card-copy > div { display:flex; align-items:center; justify-content:space-between; padding-top:20px; border-top:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.82); font-size:12px; letter-spacing:.07em; text-transform:uppercase; }
.pack-card-copy b { display:grid; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.9); color:#000; font-weight:500; place-items:center; }
.packs-outro { padding-block:clamp(150px,18vw,260px) 40px; text-align:center; }.packs-outro > p { color:#66666c; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }.packs-outro h2 { max-width:900px; margin:20px auto 45px; }

.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3,.7fr); gap: clamp(45px,7vw,100px); }
.footer-lockup { display: flex; align-items: center; gap: 0; margin-bottom: 20px; }
.footer-lockup img:last-child { margin-left: -6px; }
.footer-lockup img:first-child { width: 42px; border-radius: 10px; }.footer-lockup img:last-child { width: 132px; margin: 0; }
.footer-brand p { max-width: 310px; line-height: 1.6; }
.footer-column { display: flex; flex-direction: column; gap: 13px; }
.footer-column h2 { margin: 0 0 10px; color: #5d5d63; font-size:12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.footer-column a { color: #a2a2a7; font-size: 13px; }.footer-column a:hover { color: white; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 10px rgba(241,216,43,.42); }

/* Homepage sequence and cinematic motion */
#main { display: flex; flex-direction: column; }
#main > .hero { order: 1; }
#main > .studio { order: 2; }
#main > .proof-strip { order: 3; }
#main > .presets { order: 4; }
#main > .feature-cinema { order: 5; }
#main > .plans { order: 6; }
#main > .final-cta { order: 7; }
#main > .showcase-band { order: 8; }
#main > .principles { order: 9; }
#main > .statement { order: 10; }

.brand-name { display: inline-flex; align-items: center; height: 36px; margin-left: 4px; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.header-inner > .brand,.header-inner > .site-nav,.nav-list,.nav-list > li,.nav-list > li > a { height: 100%; }
.nav-list > li > a { display: inline-flex; align-items: center; }
.site-nav .nav-cta { height: 38px; }
.footer-lockup .brand-name { height: 44px; margin-left: 5px; font-size: 19px; }

.showcase-band { width: 100%; overflow: hidden; padding-block: 34px; border-block: 1px solid var(--line-soft); background: #020202; }
.showcase-track { display: flex; width: max-content; animation: showcase-scroll 190s linear infinite; will-change: transform; }
.showcase-set { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; padding-right: 12px; }
.showcase-set figure { width: 280px; height: 360px; margin: 0; overflow: hidden; border-radius: 16px; background: #111; }
.showcase-set figure:nth-child(3n+2) { width: 390px; }
.showcase-set figure:nth-child(5n) { width: 230px; height: 300px; }
.showcase-set img { width: 100%; height: 100%; object-fit: cover; }
@keyframes showcase-scroll { to { transform: translateX(-50%); } }

.statement { position: relative; display: grid; min-height: 88svh; max-width: none; width: 100%; overflow: hidden; align-content: center; isolation: isolate; }
.statement::before { position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse at calc(18% + var(--motion-progress,.5) * 64%) 52%,rgba(255,255,255,.085),transparent 20%),linear-gradient(180deg,#000,#070707 50%,#000); content: ""; }
.statement > .eyebrow,.statement > h2,.statement > p { position: relative; z-index: 2; width: var(--shell); margin-right: auto; margin-left: auto; }
.darkroom-title { display: flex; max-width: 1080px; flex-wrap: wrap; justify-content: center; gap: 0 .22em; }
.darkroom-title span { display: inline-block; opacity: calc(.4 + var(--motion-progress,.5) * .6); filter: blur(calc((1 - var(--motion-progress,.5)) * 9px)); transform: translateY(calc((1 - var(--motion-progress,.5)) * 38px)); transition: filter .12s linear, transform .12s linear; }
.darkroom-title span:nth-child(2){transition-delay:.03s}.darkroom-title span:nth-child(3){transition-delay:.06s}.darkroom-title span:nth-child(4){transition-delay:.09s}.darkroom-title span:nth-child(5){transition-delay:.12s}
.darkroom-type { --motion-progress:.5; position:absolute; z-index:-1; inset:7% -3%; display:grid; align-content:center; opacity:.26; transform:rotate(-5deg) scale(1.08); }
.darkroom-type span { color:transparent; font-size:clamp(130px,22vw,350px); font-weight:750; letter-spacing:-.09em; line-height:.55; -webkit-text-stroke:1px rgba(255,255,255,.13); transform:translateX(calc((-18% + var(--motion-progress) * 26%))); white-space:nowrap; }
.darkroom-type span:nth-child(2) { transform:translateX(calc(12% - var(--motion-progress) * 25%)); }.darkroom-type span:nth-child(3){transform:translateX(calc(-8% + var(--motion-progress) * 18%));}

/* More compact preset catalog */
.packs-hero { min-height: 72svh; padding-bottom: 82px; }
.packs-hero h1 { font-size: clamp(60px,8vw,118px); }
.packs-showcase { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.pack-showcase-card,.pack-showcase-card.pack-featured { min-height: 540px; border-radius: 24px; }
.pack-showcase-card.pack-featured { grid-column: span 2; }
.pack-showcase-card > img { inset: 0; width: 100%; height: 100%; transform: scale(calc(1.025 - var(--motion-progress) * .012)) translateY(calc((.5 - var(--motion-progress)) * 1.2%)); }
.pack-card-copy { right: 28px; bottom: 30px; left: 28px; }
.pack-card-copy h2 { font-size: clamp(40px,4.4vw,70px); }
.pack-card-copy > p { font-size: 14px; line-height: 1.5; }

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: repeat(2,1fr); }
  .proof-grid > div:nth-child(3) { border-left: 1px solid var(--line-soft); }
  .cinema-grid { grid-template-columns: 1fr; }
  .cinema-sticky { top: 90px; z-index: 2; height: 55vh; min-height: 430px; }
  .cinema-steps { padding-top: 0; }
  .cinema-step { min-height: 55vh; padding: 17vh 10px 9vh; }
  .plan-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1.4fr repeat(3,1fr); gap: 35px; }
	.pack-directory { grid-template-columns: repeat(2,1fr); }
	.packs-showcase { grid-template-columns:repeat(2,minmax(0,1fr)); }.pack-showcase-card.pack-featured { grid-column:span 2; }.pack-showcase-card { min-height:560px; }
}

@media (max-width: 600px) {
  .brand { gap: 0; }.brand-mark { width: 32px; height: 32px; flex-basis: 32px; }.brand-wordmark { width: 104px; margin-left:-4px; }
  .hero-wordmark { width: 66vw; }.hero h1 { max-width: 360px; font-size: clamp(43px,13.5vw,64px); }.hero-copy { max-width: 340px; }
  .statement h2 { font-size: 44px; }.statement > p:nth-of-type(2) { font-size: 17px; line-height: 1.38; }.statement-motion { width:100%; height:135px; margin-top:42px; }
  .proof-grid > div { min-height: 145px; padding: 27px 20px; }.proof-grid strong { margin-bottom: 31px; font-size: 38px; }.proof-grid span { font-size:12px; }
  .phone-status { flex-basis: 34px; }.bluegrade-phone .island { top: 5px; width: 84px; height: 23px; }.bluegrade-phone .editor-photo { height: 300px; flex-basis: 300px; }.app-topbar { height: 48px; flex-basis: 48px; }.circle-control { width: 29px; height: 29px; }.real-editor-controls { flex-basis:194px; padding: 8px 9px; }.pack-chips span { padding: 4px 7px; }.preset-shelf > div { width: 55px; height: 55px; }.bluegrade-bottom-bar { height: 47px; margin-top:8px; }.bluegrade-bottom-bar b { width: 31px; height: 31px; }
  .cinema-heading { padding-bottom: 55px; }.cinema-sticky { top: 80px; height: 50vh; min-height: 360px; }.cinema-device { border-radius: 24px; }.cinema-step { min-height: 50vh; padding: 14vh 4px 8vh; }.cinema-step h3 { font-size: 39px; }.cinema-step p { font-size: 15px; }
  .preset-art.pack-cover { height: 82vw; }.preset-meta { min-height: 125px; }.pack-directory { grid-template-columns: 1fr; margin-top: 55px; }.pack-directory a { min-height: 190px; }.pack-directory p { min-height: 0; }.packs-page-link { text-align: left; }
  .plans-heading { margin-left: 16px; width: calc(100% - 32px); }.plans-heading > p:last-child { font-size: 16px; }.plan-cards { margin-top: 50px; }.plan-card { min-height: 690px; padding: 28px 23px; border-radius: 22px; }.popular-label { top: 21px; right: 21px; }.pro-options { grid-template-columns: 1fr; }.pro-options > div { min-height: 76px; }.plan-card.pro-plan { min-height: 690px; }
	.packs-hero { min-height:80svh; padding-top:140px; padding-bottom:75px; }.packs-hero h1 { font-size:58px; }.packs-hero > .shell > p:last-child { font-size:17px; }.packs-hero-motion{width:125vw;right:-55%;top:10%}.pack-showcase-card { min-height:560px; border-radius:22px; }.pack-card-copy > p{font-size:15px}.pack-card-copy h2{font-size:48px}.pack-card-top{top:20px;right:20px;left:20px}
  .footer-grid { grid-template-columns: repeat(2,1fr); }.footer-brand { grid-column: 1 / -1; margin-bottom: 24px; }.footer-grid .footer-column:last-child { grid-column: 1 / -1; }.footer-meta { flex-direction: column; }.footer-meta p:last-child { text-align: left; }
	.showcase-band{padding-block:18px}.showcase-set{gap:8px;padding-right:8px}.showcase-set figure{width:190px;height:245px;border-radius:11px}.showcase-set figure:nth-child(3n+2){width:260px}.showcase-set figure:nth-child(5n){width:160px;height:210px}.statement{min-height:80svh}.darkroom-title{font-size:44px}.darkroom-type{inset:14% -20%}.packs-showcase{grid-template-columns:1fr}.pack-showcase-card.pack-featured{grid-column:auto}.pack-showcase-card,.pack-showcase-card.pack-featured{min-height:500px}.pack-card-copy{right:21px;bottom:24px;left:21px}
}

/* Final cascade: intentional overrides for the refined launch composition. */
.brand { width: auto; gap: 0; align-items: center; }
.brand-mark { display: block; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 0; }
.brand-name { height: 36px; margin-left: 4px; line-height: 1; }
.hero-wordmark { width: min(31vw, 282px); margin-bottom: 30px; }
.hero h1 { max-width: 760px; margin-bottom: 22px; font-size: clamp(40px,5vw,70px); line-height: .96; }
.hero-copy { max-width: 550px; font-size: clamp(14px,1.25vw,18px); line-height: 1.46; }
#main > .hero { order: 1; }
#main > .studio { order: 2; }
#main > .presets { order: 3; }
#main > .feature-cinema { order: 4; }
#main > .plans { order: 5; }
#main > .principles { order: 6; }
#main > .statement { order: 7; }
.statement { --motion-progress:.5; min-height:92svh; max-width:none; background:#020202; }
.statement::before { background:radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.055),transparent 34%),linear-gradient(180deg,#000,#070707 48%,#000); }
.darkroom-type { display:none; }
.packs-page { padding-bottom:150px; }
.packs-hero { min-height:64svh; padding-top:165px; padding-bottom:90px; }
.packs-hero h1 { max-width:920px; font-size:clamp(58px,7.2vw,108px); line-height:.88; }
.packs-hero-motion { opacity:.28; }
.footer-lockup { height:44px; gap:0; align-items:center; }
.footer-lockup img:first-child { width:44px; height:44px; margin:0; border-radius:0; }
.footer-lockup .brand-name { height:44px; margin-left:5px; line-height:1; }

@media (max-width:600px) {
  .brand { width:auto; }
  .brand-mark { width:32px; height:32px; flex-basis:32px; }
  .brand-name { height:32px; margin-left:3px; font-size:16px; }
  .hero-wordmark { width:56vw; margin-bottom:25px; }
  .hero h1 { max-width:350px; font-size:clamp(40px,12vw,58px); line-height:.96; }
  .hero-copy { max-width:318px; padding-inline:0; font-size:14px; }
  .packs-hero { min-height:66svh; padding-top:132px; padding-bottom:62px; }
  .packs-hero h1 { font-size:54px; }
  .statement { min-height:82svh; }
  .darkroom-type { display:none; }
}

/* 2026-07-06 — definitive BLUEGRADE system: blue accent, app-accurate toolbar,
   two-frame preset stories, and a compact non-overlapping footer. */
:root { --yellow:#1461ff; }
.launch-pill span,.status-dot { background:var(--blue); box-shadow:0 0 14px rgba(20,97,255,.58); }
.text-link:hover,.footer-column a:hover,.footer-column a:focus-visible { color:#4d86ff; }

.bluegrade-bottom-bar {
  flex:1 0 58px;
  width:calc(100% + 24px);
  height:58px;
  margin:10px -12px -9px;
  padding:0 17px;
  border:0;
  border-top:1px solid #222226;
  border-bottom:1px solid #222226;
  border-radius:0;
  background:#020202;
  color:#66666c;
}
.bluegrade-bottom-bar span { width:27px; height:27px; }
.bluegrade-bottom-bar .active { color:#77777d; }
.bluegrade-bottom-bar img { width:23px; height:23px; opacity:.55; }
.bluegrade-bottom-bar svg { width:22px; height:22px; stroke-width:1.65; }
.bluegrade-bottom-bar b { width:40px; height:40px; background:#ededee; font-size:25px; font-weight:450; }

.preset-stories { padding-top:clamp(90px,10vw,150px); }
.pack-story,.pack-story:nth-child(even) {
  display:block;
  padding:0 0 clamp(120px,15vw,210px);
  scroll-margin-top:150px;
}
.pack-story + .pack-story { padding-top:clamp(90px,11vw,160px); border-top:1px solid var(--line-soft); }
.pack-story-heading { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:24px 60px; align-items:end; }
.pack-story-heading > div { grid-column:1 / -1; display:flex; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid var(--line); color:#626268; font-size:12px; letter-spacing:.15em; text-transform:uppercase; }
.pack-story-heading h2 { margin:0; font-size:clamp(62px,9vw,136px); font-weight:570; line-height:.82; letter-spacing:-.07em; overflow-wrap:normal; }
.pack-story-heading > p { max-width:430px; margin:0 0 4px; color:#b4b4ba; font-size:clamp(22px,2.4vw,34px); line-height:1.08; letter-spacing:-.035em; }
.pack-story-gallery { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:clamp(38px,5vw,72px) 0 clamp(42px,6vw,78px); }
.pack-story-gallery figure { position:relative; aspect-ratio:4 / 3; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:24px; background:#090909; }
.pack-story-gallery img { width:100%; height:100%; object-fit:cover; transform:scale(calc(1.035 - var(--motion-progress,.5) * .018)) translateY(calc((.5 - var(--motion-progress,.5)) * 1.2%)); }
.pack-story.preset-monox .pack-story-gallery img,.pack-story.preset-mono .pack-story-gallery img { filter:grayscale(1) contrast(1.08); }
.pack-story-copy { position:static; display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:clamp(50px,8vw,120px); padding:0; }
.pack-story-intro > p { max-width:520px; margin:0; color:#a2a2a8; font-size:clamp(18px,1.6vw,22px); line-height:1.58; }
.pack-story-details { min-width:0; }
.pack-guidance { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
.pack-story-copy blockquote,.pack-tip { height:100%; margin:0; padding:23px 24px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.pack-story-copy blockquote small,.pack-tip strong { display:block; margin-bottom:10px; color:#66666c; font-size:12px; letter-spacing:.13em; text-transform:uppercase; }
.pack-story-copy blockquote p,.pack-tip p { margin:0; color:#a0a0a6; font-size:13px; line-height:1.58; }
.pack-tone-bars { margin-top:34px; }

.site-footer { border-top:1px solid var(--line-soft); background:#010101; }
.site-footer .footer-main.footer-grid { display:grid; grid-template-columns:minmax(250px,1.45fr) repeat(3,minmax(120px,.55fr)); gap:clamp(34px,6vw,90px); padding:42px 0 36px; }
.site-footer .footer-brand { margin:0; }
.site-footer .footer-lockup { display:flex; height:32px; align-items:center; gap:9px; margin:0 0 10px; }
.site-footer .footer-lockup img:first-child { width:31px; height:31px; margin:0; border-radius:0; object-fit:contain; }
.site-footer .footer-lockup .brand-name { display:flex; height:31px; align-items:center; margin:0; font-size:17px; line-height:1; }
.site-footer .footer-brand p { margin:0; color:#55555b; font-size:12px; }
.site-footer .footer-column { display:flex; flex-direction:column; gap:7px; }
.site-footer .footer-column h2 { margin:0 0 7px; color:#57575d; font-size:12px; font-weight:650; letter-spacing:.16em; text-transform:uppercase; }
.site-footer .footer-column a,
.site-footer .footer-column .lvxc-settings-link { color:#98989e; font-size:12px; line-height:1.5; text-decoration:none; text-align:left; transition:color .2s ease; }
.site-footer .footer-column .lvxc-settings-link:hover { color:#fff; }
.site-footer .footer-meta { display:flex; justify-content:space-between; gap:30px; padding:17px 0; border-top:1px solid var(--line-soft); color:#5d5d63; font-size:12px; letter-spacing:.09em; line-height:1.4; text-transform:uppercase; }
.site-footer .footer-meta p { margin:0; }
.site-footer .footer-trademark { margin:0 auto; padding:0 0 24px; color:#44444a; font-size:12px; line-height:1.5; }
.status-dot { width:6px; height:6px; margin-right:8px; }

.form-privacy { max-width:560px; margin:18px 0 0; color:#66666c; font-size:12px; line-height:1.55; }
.form-privacy a { color:#9d9da3; text-decoration:underline; text-underline-offset:3px; }
.support-essentials { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-bottom:110px; border:1px solid var(--line); background:var(--line); }
.support-essentials article { min-height:210px; padding:28px; background:#030303; }
.support-essentials span { color:var(--blue); font-size:12px; letter-spacing:.13em; }
.support-essentials h2 { margin:62px 0 10px; font-size:22px; }
.support-essentials p { margin:0; color:#74747a; font-size:13px; }
.legal-required { color:#6f94e8; font-weight:500; }

@media (max-width:900px) {
  .pack-story-heading { grid-template-columns:1fr; }
  .pack-story-heading > div { grid-column:auto; }
  .pack-story-heading > p { max-width:620px; }
  .pack-story-copy { grid-template-columns:1fr; gap:42px; }
  .site-footer .footer-main.footer-grid { grid-template-columns:1.2fr repeat(3,1fr); gap:28px; }
  .support-essentials { grid-template-columns:1fr; }
  .support-essentials article { min-height:170px; }
  .support-essentials h2 { margin-top:42px; }
}

@media (max-width:600px) {
  .bluegrade-bottom-bar { flex-basis:50px; height:50px; margin-top:8px; }
  .bluegrade-bottom-bar b { width:34px; height:34px; font-size:22px; }
  .pack-story-heading h2 { font-size:54px; line-height:.9; }
  .pack-story-heading > p { font-size:23px; }
  .pack-story-gallery { grid-template-columns:1fr; gap:10px; margin-top:30px; }
  .pack-story-gallery figure { aspect-ratio:1.2; border-radius:17px; }
  .pack-guidance { grid-template-columns:1fr; }
  .site-footer .footer-main.footer-grid { grid-template-columns:1fr 1fr; gap:28px 18px; padding:34px 0 28px; }
  .site-footer .footer-brand { grid-column:1 / -1; }
  .site-footer .footer-column:last-child { grid-column:auto; }
  .site-footer .footer-meta { align-items:flex-start; flex-direction:column; gap:8px; }
  .site-footer .footer-meta p:last-child { text-align:left; }
}

/* 2026-07-05 — lightweight hero, restored mark, and App Store finale */
.site-header.is-scrolled { background:rgba(0,0,0,.82); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); }
.brand-mark { width:34px; height:34px; flex-basis:34px; }
.brand-name { height:34px; margin-left:3px; font-size:17px; }
.site-nav { gap:31px; }
.nav-list { gap:29px; }
.site-nav a { font-size:12px; letter-spacing:.015em; }
.site-nav .nav-cta { min-width:100px; border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.065); }

.hero { background:radial-gradient(ellipse at 50% 48%,#0b0b0c 0,#030303 38%,#000 70%); }
.liquid-grid,.liquid-rings { display:none; }
.hero-aurora { position:absolute; z-index:-1; inset:8% -12%; overflow:hidden; pointer-events:none; }
.hero-aurora i { position:absolute; top:50%; left:50%; width:min(1050px,92vw); height:155px; border:1px solid rgba(255,255,255,.09); border-radius:50%; opacity:.42; filter:blur(13px); transform:translate(-50%,-50%) rotate(-7deg); animation:hero-veil 14s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(2) { width:min(1240px,108vw); height:255px; opacity:.22; transform:translate(-50%,-42%) rotate(5deg); animation-duration:19s; animation-delay:-6s; }
.hero-aurora i:nth-child(3) { width:min(780px,72vw); height:85px; opacity:.38; border-color:rgba(126,151,189,.12); filter:blur(23px); transform:translate(-50%,-22%) rotate(-2deg); animation-duration:17s; animation-delay:-10s; }
.hero-glow { animation:none; opacity:.72; }
.hero-content { padding-top:76px; }
.hero-wordmark { width:min(28vw,255px); margin-bottom:38px; }
.hero-motto { position:relative; display:grid; width:min(840px,88vw); min-height:150px; align-items:center; isolation:isolate; }
.hero-motto > span { position:absolute; z-index:-1; top:50%; left:50%; width:82%; height:92%; border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,.07),rgba(255,255,255,.018) 42%,transparent 72%); filter:blur(28px); transform:translate(-50%,-50%); }
.hero h1 { max-width:820px; margin:0 auto; background:linear-gradient(180deg,#fff 24%,#9c9ca2 100%); background-clip:text; -webkit-background-clip:text; color:transparent; font-size:clamp(42px,5.4vw,74px); font-weight:520; letter-spacing:-.055em; line-height:.98; text-wrap:balance; animation:motto-focus 1.45s .16s var(--ease) both; }
.hero h1.is-changing { opacity:0; filter:blur(12px); transform:scale(.985); }
.hero-copy { max-width:520px; margin-top:22px; color:#85858b; font-size:clamp(14px,1.15vw,17px); line-height:1.5; }
.hero-actions { margin-top:34px; }

#main > .hero { order:1; }
#main > .studio { order:2; }
#main > .presets { order:3; }
#main > .feature-cinema { order:4; }
#main > .plans { order:5; }
#main > .download-finale { order:6; }

.download-finale { --motion-progress:.5; position:relative; display:grid; min-height:100svh; overflow:hidden; padding-block:145px; border-top:1px solid var(--line-soft); background:radial-gradient(circle at 50% 42%,#111 0,#040405 34%,#000 68%); isolation:isolate; place-items:center; }
.finale-content { position:relative; z-index:2; text-align:center; }
.app-icon-stage { position:relative; width:clamp(118px,12vw,168px); margin:0 auto 46px; }
.app-icon-stage img { position:relative; z-index:2; width:100%; filter:drop-shadow(0 30px 50px rgba(0,0,0,.7)); transform:translateY(calc((.5 - var(--motion-progress)) * 25px)) scale(calc(.94 + var(--motion-progress) * .06)); }
.app-icon-stage span { position:absolute; inset:7%; border-radius:26%; box-shadow:0 0 80px rgba(255,255,255,.15); opacity:calc(.25 + var(--motion-progress) * .6); }
.finale-content .eyebrow { margin-bottom:22px; color:#77777d; }
.finale-content h2 { max-width:870px; margin:0 auto 24px; font-size:clamp(52px,7.4vw,106px); font-weight:560; line-height:.9; text-wrap:balance; }
.finale-content > p:not(.eyebrow) { max-width:560px; margin:0 auto 34px; color:#79797f; font-size:17px; }
.finale-button { display:inline-flex; min-width:260px; height:54px; align-items:center; justify-content:space-between; gap:24px; padding:0 9px 0 22px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:#f5f5f7; color:#050505; font-size:13px; font-weight:570; }
.finale-button span { display:grid; width:36px; height:36px; border-radius:50%; background:#050505; color:#fff; place-items:center; }
.finale-button.is-static { cursor:default; }
.finale-rings { position:absolute; z-index:-1; inset:0; pointer-events:none; }
.finale-rings i { position:absolute; top:43%; left:50%; width:min(680px,68vw); aspect-ratio:1; border:1px solid rgba(255,255,255,.07); border-radius:50%; transform:translate(-50%,-50%) rotate(calc(var(--motion-progress) * 20deg)) scale(calc(.82 + var(--motion-progress) * .18)); }
.finale-rings i:nth-child(2) { width:min(930px,88vw); opacity:.5; transform:translate(-50%,-50%) rotate(calc(var(--motion-progress) * -14deg)) scale(calc(.9 + var(--motion-progress) * .1)); }
.finale-rings i:nth-child(3) { width:min(1180px,110vw); opacity:.22; transform:translate(-50%,-50%) rotate(calc(var(--motion-progress) * 9deg)); }

.footer-lockup { height:42px; }
.footer-lockup img:first-child { width:42px; height:42px; margin:0; border-radius:0; }
.footer-lockup .brand-name { height:42px; margin-left:4px; }

@keyframes hero-veil { from{margin-top:-12px;margin-left:-22px;opacity:.25} to{margin-top:12px;margin-left:22px;opacity:.52} }
@keyframes motto-focus { from{opacity:0;filter:blur(16px);transform:translateY(18px) scale(.98)} to{opacity:1;filter:blur(0);transform:none} }

@media (max-width:600px) {
  .brand-mark { width:30px; height:30px; flex-basis:30px; }
  .brand-name { height:30px; margin-left:3px; font-size:16px; }
  .hero-content { padding-top:62px; }
  .hero-wordmark { width:52vw; margin-bottom:28px; }
  .hero-motto { width:92vw; min-height:132px; }
  .hero h1 { max-width:350px; font-size:clamp(39px,11.4vw,55px); }
  .hero-copy { max-width:310px; margin-top:17px; font-size:13px; }
  .hero-actions { margin-top:28px; }
  .download-finale { min-height:88svh; padding-block:110px; }
  .app-icon-stage { width:116px; margin-bottom:36px; }
  .finale-content h2 { font-size:51px; }
  .finale-content > p:not(.eyebrow) { max-width:315px; font-size:15px; }
  .finale-rings i { width:105vw; }.finale-rings i:nth-child(2){width:135vw}.finale-rings i:nth-child(3){width:165vw}
  .footer-lockup { height:40px; }.footer-lockup img:first-child{width:40px;height:40px}.footer-lockup .brand-name{height:40px}
}

@media (prefers-reduced-motion:reduce) {
  .hero-aurora i { animation:none; }
}

/* Hero mark bridge and App Store device presentation */
.hero-wordmark { margin-bottom:15px; }
.hero-mark { width:46px; height:46px; margin:0 auto 22px; opacity:.9; }
.hero-motto { min-height:92px; }
.hero-motto > span { width:72%; height:120%; }
.hero-copy { margin-top:20px; }
.launch-pill span { background:var(--blue); box-shadow:0 0 14px rgba(20,97,255,.62); }

.finale-content { display:grid; grid-template-columns:minmax(280px,.78fr) minmax(460px,1.22fr); gap:clamp(70px,10vw,160px); align-items:center; text-align:left; }
.finale-copy .eyebrow { margin-bottom:22px; color:#77777d; }
.finale-copy h2 { max-width:720px; margin:0 0 26px; font-size:clamp(52px,6.3vw,92px); font-weight:560; line-height:.91; text-wrap:balance; }
.finale-copy > p:not(.eyebrow) { max-width:520px; margin:0 0 34px; color:#79797f; font-size:17px; }
.store-phone { width:clamp(280px,27vw,350px); margin-inline:auto; perspective:1400px; }
.store-phone-frame { position:relative; height:clamp(570px,55vw,700px); padding:10px 16px 18px; overflow:hidden; border:1px solid #5b5b60; border-radius:54px; background:linear-gradient(145deg,#555 0,#0a0a0b 3%,#28282b 50%,#050505 97%,#555); box-shadow:0 65px 120px rgba(0,0,0,.72),inset 0 0 0 2px #080808; transform:translateY(calc((.5 - var(--motion-progress)) * 30px)) rotateY(calc(-7deg + var(--motion-progress) * 7deg)); transform-style:preserve-3d; }
.store-phone-frame::before { position:absolute; inset:9px; z-index:0; border-radius:45px; background:#f6f6f8; content:""; }
.store-phone-frame > * { position:relative; z-index:1; }
.store-status { display:flex; height:48px; align-items:center; justify-content:space-between; padding:0 12px; color:#111; font-size:12px; }
.store-status strong { font-size:12px; }.store-status span{position:absolute;top:10px;left:50%;width:94px;height:28px;border-radius:999px;background:#000;transform:translateX(-50%)}.store-status small{color:#222;font-size:12px;letter-spacing:2px}
.store-toolbar { display:grid; grid-template-columns:34px 1fr 34px; height:48px; align-items:center; border-bottom:1px solid rgba(0,0,0,.08); color:#111; text-align:center; }
.store-toolbar b { color:#0a73ff; font-size:34px; font-weight:300; line-height:1; text-align:left; }.store-toolbar strong{font-size:13px}.store-toolbar i{display:block}
.store-listing { display:grid; grid-template-columns:86px 1fr auto; gap:13px; align-items:center; padding:24px 4px 22px; color:#111; }
.store-listing > img { display:block; width:86px; height:86px; aspect-ratio:1; margin:0; border-radius:20px; object-fit:contain; filter:none; transform:none; }
.store-listing h3 { margin:0 0 2px; font-size:15px; font-weight:650; letter-spacing:-.02em; }.store-listing p{margin:0 0 7px;color:#626267;font-size:12px;line-height:1.25}.store-listing small{color:#98989d;font-size:12px}.store-listing > span{display:grid;min-width:47px;height:25px;padding:0 9px;border-radius:999px;background:#0a73ff;color:white;font-size:12px;font-weight:700;letter-spacing:.02em;place-items:center}
.store-rule { height:1px; margin:0 4px; background:rgba(0,0,0,.1); }
.store-meta { display:grid; grid-template-columns:repeat(3,1fr); padding:18px 0; color:#55555a; text-align:center; }
.store-meta > span { display:grid; gap:3px; border-right:1px solid rgba(0,0,0,.1); }.store-meta > span:last-child{border-right:0}.store-meta strong{font-size:15px}.store-meta small{font-size:12px;letter-spacing:.08em}
.store-previews { display:flex; gap:8px; margin:0 4px; overflow:hidden; }
.store-previews i { display:block; flex:0 0 38%; height:250px; border-radius:18px; background:radial-gradient(circle at 50% 24%,#163b45,#071012 45%,#000 46%),linear-gradient(#090909,#000); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
.store-previews i:nth-child(2){background:radial-gradient(circle at 50% 28%,#704936,#1e1715 42%,#000 43%),linear-gradient(#090909,#000)}.store-previews i:nth-child(3){background:radial-gradient(circle at 50% 25%,#9f9f9f,#292929 44%,#000 45%),linear-gradient(#090909,#000)}

@media (max-width:900px) {
  .finale-content { grid-template-columns:1fr; gap:70px; text-align:center; }
  .finale-copy h2,.finale-copy > p:not(.eyebrow) { margin-right:auto; margin-left:auto; }
  .store-phone { width:min(330px,80vw); }
  .store-phone-frame { height:650px; }
}

@media (max-width:600px) {
  .hero-wordmark { margin-bottom:12px; }
  .hero-mark { width:38px; height:38px; margin-bottom:19px; }
  .hero-motto { min-height:84px; }
  .hero-copy { margin-top:14px; }
  .finale-content { gap:52px; }
  .store-phone { width:280px; }
  .store-phone-frame { height:570px; border-radius:46px; }
  .store-phone-frame::before { border-radius:38px; }
  .store-listing { grid-template-columns:72px 1fr auto; gap:10px; }.store-listing>img{width:72px;height:72px;border-radius:17px}.store-listing p{font-size:12px}.store-listing>span{min-width:43px;padding-inline:7px}
  .store-previews i { height:205px; }
  .finale-copy h2 { font-size:50px; }
}

/* 2026-07-05 — clearer hero hierarchy, tighter pacing, and icon finale */
.brand { width:auto; gap:0; }
.brand-mark { width:30px; height:30px; flex:0 0 30px; border-radius:0; object-fit:contain; }
.brand-name { height:30px; margin-left:10px; font-size:16px; }
.footer-lockup { height:34px; gap:0; }
.footer-lockup img:first-child { width:34px; height:34px; margin:0; border-radius:0; object-fit:contain; }
.footer-lockup .brand-name { height:34px; margin-left:11px; font-size:18px; }

.section { padding-block:clamp(82px,9vw,140px); }
.presets-heading { margin-bottom:clamp(44px,5vw,68px); }
.feature-cinema { padding-bottom:clamp(105px,11vw,165px); }
.cinema-heading { padding-top:clamp(12px,2vw,28px); }
.plans-heading { margin-bottom:clamp(44px,5vw,70px); }
.studio::after,.presets::after,.plans::after { position:absolute; z-index:0; width:min(520px,48vw); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(20,97,255,.045),transparent 68%); content:""; filter:blur(10px); pointer-events:none; }
.studio::after { right:-24%; bottom:-28%; }
.presets::after { top:-18%; left:-24%; }
.plans::after { right:-20%; bottom:-26%; }
.studio > *,.presets > *,.plans > * { position:relative; z-index:1; }

.hero-content { padding-top:64px; }
.hero-brand-motion { position:relative; width:min(30vw,282px); margin:0 auto; animation:hero-in 1.1s .05s var(--ease) both; isolation:isolate; }
.hero-brand-motion .hero-wordmark { display:block; width:100%; margin:0; animation:none; }
.hero-brand-motion > span { position:absolute; z-index:2; inset:0; background:linear-gradient(105deg,transparent 18%,rgba(20,97,255,.18) 34%,#3980ff 48%,rgba(20,97,255,.2) 61%,transparent 78%); background-position:170% 50%; background-size:280% 100%; -webkit-mask:url("../images/bluegrade-wordmark.svg") center/contain no-repeat; mask:url("../images/bluegrade-wordmark.svg") center/contain no-repeat; animation:brand-blue-pass 8s 1s ease-in-out infinite; pointer-events:none; }
.hero-copy { max-width:520px; margin:22px auto 0; color:#76767d; font-size:clamp(13px,1vw,15px); line-height:1.48; }
.hero-motto { width:min(850px,88vw); min-height:108px; margin:18px auto 0; }
.hero-motto > span { width:68%; height:108%; }
.hero h1 { font-size:clamp(40px,5.1vw,70px); }
.hero-actions { margin-top:29px; }

.download-finale { min-height:auto; padding-block:clamp(105px,11vw,170px); background:radial-gradient(circle at 27% 48%,rgba(20,97,255,.075),transparent 24%),radial-gradient(circle at 50% 44%,#0d0d0f 0,#030303 38%,#000 70%); }
.finale-content { grid-template-columns:minmax(260px,.82fr) minmax(440px,1.18fr); gap:clamp(65px,9vw,145px); }
.finale-icon-stage { position:relative; display:grid; width:clamp(230px,26vw,360px); aspect-ratio:1; margin-inline:auto; place-items:center; isolation:isolate; }
.finale-icon-stage::before { position:absolute; inset:2%; z-index:-2; border-radius:34%; background:rgba(20,97,255,.14); content:""; filter:blur(55px); opacity:calc(.35 + var(--motion-progress) * .45); transform:scale(calc(.82 + var(--motion-progress) * .18)); }
.finale-icon-stage > img { position:relative; z-index:2; display:block; width:72%; height:72%; aspect-ratio:1; border-radius:22.2%; object-fit:contain; filter:drop-shadow(0 36px 60px rgba(0,0,0,.82)); transform:translateY(calc((.5 - var(--motion-progress)) * 22px)) scale(calc(.96 + var(--motion-progress) * .04)); }
.finale-icon-halo { position:absolute; inset:0; z-index:-1; animation:finale-halo-drift 18s linear infinite; }
.finale-icon-halo i { position:absolute; inset:2%; border:1px solid rgba(255,255,255,.1); border-radius:38%; transform:rotate(12deg); }
.finale-icon-halo i:nth-child(2) { inset:12%; border-color:rgba(20,97,255,.23); border-radius:50%; transform:rotate(-24deg); }
.finale-icon-halo i:nth-child(3) { inset:20%; border-color:rgba(255,255,255,.08); border-radius:32%; transform:rotate(48deg); }
.finale-rings::after { position:absolute; inset:-20%; background:conic-gradient(from 210deg at 30% 50%,transparent 0 40%,rgba(20,97,255,.08) 48%,transparent 56% 100%); content:""; filter:blur(34px); transform:rotate(calc(var(--motion-progress) * 28deg)); }

@keyframes brand-blue-pass { 0%,12%{background-position:170% 50%;opacity:0} 24%{opacity:1} 52%{background-position:-70% 50%;opacity:1} 66%,100%{background-position:-70% 50%;opacity:0} }
@keyframes finale-halo-drift { to{transform:rotate(360deg)} }

@media (max-width:900px) {
  .finale-content { grid-template-columns:1fr; gap:56px; }
  .finale-icon-stage { width:min(300px,62vw); }
}

@media (max-width:600px) {
  .brand-mark { width:28px; height:28px; flex-basis:28px; }
  .brand-name { height:28px; margin-left:8px; font-size:15px; }
  .footer-lockup { height:32px; }.footer-lockup img:first-child{width:32px;height:32px}.footer-lockup .brand-name{height:32px;margin-left:9px;font-size:17px}
  .section { padding-block:76px; }
  .hero-content { padding-top:50px; }
  .hero-brand-motion { width:56vw; }
  .hero-copy { max-width:302px; margin-top:19px; font-size:12px; }
  .hero-motto { width:92vw; min-height:92px; margin-top:13px; }
  .hero h1 { font-size:clamp(37px,10.8vw,52px); }
  .hero-actions { margin-top:24px; }
  .download-finale { padding-block:92px; }
  .finale-content { gap:45px; }
  .finale-icon-stage { width:210px; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-brand-motion > span,.finale-icon-halo { animation:none; }
  .hero-brand-motion > span { background-position:45% 50%; opacity:.7; }
}

/* 2026-07-05 — editorial hero, scroll-built sections, and preset stories */
.hero { display:block; min-height:100svh; background:radial-gradient(ellipse at 78% 38%,rgba(20,97,255,.075),transparent 21%),linear-gradient(180deg,#050506 0,#000 72%); }
.hero::after { position:absolute; z-index:-1; inset:76px 0 0; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),rgba(255,255,255,.025) 12.5%); content:""; mask-image:linear-gradient(180deg,transparent,black 22%,black 78%,transparent); }
.hero-content { display:block; padding-top:116px; padding-bottom:70px; text-align:left; }
.hero-frame { position:relative; display:flex; min-height:calc(100svh - 186px); flex-direction:column; justify-content:center; }
.hero-frame::before { position:absolute; top:8%; bottom:7%; left:0; width:1px; background:linear-gradient(180deg,transparent,rgba(20,97,255,.65),transparent); content:""; opacity:.55; animation:hero-focus-scan 8s ease-in-out infinite; }
.hero-meta { display:flex; justify-content:space-between; padding:0 0 22px; border-bottom:1px solid var(--line); color:#626268; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.hero-brand-motion { width:100%; max-width:none; margin:0; padding:clamp(34px,5.2vw,74px) 0 clamp(30px,4.5vw,64px); border-bottom:1px solid var(--line); }
.hero-brand-motion .hero-wordmark { width:100%; margin:0; filter:none; }
.hero-brand-motion > span { right:auto; width:100%; }
.hero-editorial { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr); gap:clamp(60px,10vw,170px); align-items:end; padding-top:clamp(30px,4.2vw,58px); }
.hero-motto { width:auto; min-height:0; margin:0; align-items:end; }
.hero-motto > span { top:70%; left:24%; width:58%; height:150%; opacity:.6; }
.hero h1 { max-width:690px; margin:0; font-size:clamp(35px,4vw,58px); font-weight:520; line-height:.96; text-align:left; }
.hero-intro { align-self:end; padding-bottom:4px; }
.hero-copy { max-width:360px; margin:0; color:#929298; font-size:14px; line-height:1.55; text-align:left; }
.hero-actions { margin-top:24px; }
.hero .launch-pill { height:42px; padding-inline:16px; background:rgba(255,255,255,.035); }
.scroll-cue { right:max(32px,calc((100vw - 1240px)/2)); bottom:27px; left:auto; transform:none; }

.flow-section { --flow-progress:0; isolation:isolate; }
.flow-transition { position:absolute; z-index:5; top:-74px; left:50%; width:min(760px,78vw); height:148px; overflow:hidden; opacity:calc(.08 + var(--flow-progress) * .55); pointer-events:none; transform:translateX(-50%); }
.flow-transition i { position:absolute; top:50%; width:50%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2)); transform:scaleX(var(--flow-progress)); }
.flow-transition i:first-child { right:50%; transform-origin:right; }
.flow-transition i:nth-child(2) { left:50%; background:linear-gradient(90deg,rgba(255,255,255,.2),transparent); transform-origin:left; }
.flow-transition span { position:absolute; top:50%; left:50%; width:7px; height:7px; border:1px solid rgba(106,156,255,.9); border-radius:50%; background:#07142f; box-shadow:0 0 34px rgba(20,97,255,.78); transform:translate(-50%,-50%) scale(calc(.35 + var(--flow-progress) * .65)); }
.flow-section > .shell { opacity:calc(.28 + var(--flow-progress) * .72); filter:blur(calc((1 - var(--flow-progress)) * 7px)); transform:translateY(calc((1 - var(--flow-progress)) * 42px)); }
.pack-story.flow-section > :not(.flow-transition) { opacity:calc(.2 + var(--flow-progress) * .8); filter:blur(calc((1 - var(--flow-progress)) * 7px)); transform:translateY(calc((1 - var(--flow-progress)) * 40px)); }

.packs-page { padding-bottom:110px; }
.packs-hero { min-height:72svh; padding-top:150px; padding-bottom:82px; }
.packs-hero h1 { max-width:1050px; font-size:clamp(64px,8.2vw,124px); }
.packs-hero-motion { opacity:.38; }
.pack-jump { position:sticky; z-index:40; top:76px; border-block:1px solid var(--line); background:rgba(0,0,0,.78); -webkit-backdrop-filter:blur(20px) saturate(130%); backdrop-filter:blur(20px) saturate(130%); }
.pack-jump .shell { display:flex; gap:clamp(22px,3vw,48px); align-items:center; height:58px; overflow-x:auto; scrollbar-width:none; }
.pack-jump .shell::-webkit-scrollbar { display:none; }
.pack-jump a { flex:0 0 auto; color:#74747a; font-size:12px; font-weight:620; letter-spacing:.13em; text-transform:uppercase; transition:color .25s ease; }
.pack-jump a:hover,.pack-jump a:focus-visible { color:#fff; }
.preset-stories { padding-top:clamp(72px,8vw,120px); }
.pack-story { --tone-1:#d0a176; --tone-2:#1c3135; --tone-3:#8b6652; --tone-4:#ece1d4; position:relative; display:grid; grid-template-columns:minmax(0,1.48fr) minmax(280px,.52fr); gap:clamp(42px,6vw,92px); align-items:start; padding-bottom:clamp(105px,13vw,190px); scroll-margin-top:155px; }
.pack-story:nth-child(even) { grid-template-columns:minmax(280px,.52fr) minmax(0,1.48fr); }
.pack-story:nth-child(even) .pack-story-visual { grid-column:2; }
.pack-story:nth-child(even) .pack-story-copy { grid-row:1; grid-column:1; }
.pack-story-visual { position:relative; aspect-ratio:1.48; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.11); border-radius:28px; background:#090909; box-shadow:0 38px 100px rgba(0,0,0,.4); }
.pack-story-visual::after { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 35%,rgba(0,0,0,.62)); content:""; }
.pack-story-visual img { width:100%; height:100%; object-fit:cover; transform:scale(calc(1.075 - var(--motion-progress,.5) * .045)) translateY(calc((.5 - var(--motion-progress,.5)) * 3%)); }
.pack-story.preset-monox .pack-story-visual img,.pack-story.preset-mono .pack-story-visual img { filter:grayscale(1) contrast(1.08); }
.pack-story-top { position:absolute; z-index:2; top:24px; right:26px; left:26px; display:flex; justify-content:space-between; color:rgba(255,255,255,.72); font-size:12px; letter-spacing:.15em; text-transform:uppercase; }
.pack-story-visual h2 { position:absolute; z-index:2; right:28px; bottom:24px; left:28px; margin:0; font-size:clamp(54px,8vw,118px); font-weight:560; line-height:.82; }
.pack-story-copy { position:sticky; top:166px; padding-top:clamp(28px,4vw,64px); }
.pack-story-copy > p { margin-bottom:44px; color:#a1a1a7; font-size:clamp(17px,1.45vw,21px); line-height:1.55; }
.pack-story-copy > div:not(.pack-tone-bars) { display:grid; grid-template-columns:74px 1fr; gap:14px; padding-top:18px; border-top:1px solid var(--line); color:#c6c6ca; font-size:12px; }
.pack-story-copy small { color:#56565c; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.pack-tone-bars { display:grid; grid-template-columns:1.3fr .8fr 1fr .55fr; gap:5px; height:7px; margin-top:38px; }
.pack-tone-bars i { border-radius:999px; background:var(--tone-1); }.pack-tone-bars i:nth-child(2){background:var(--tone-2)}.pack-tone-bars i:nth-child(3){background:var(--tone-3)}.pack-tone-bars i:nth-child(4){background:var(--tone-4)}
.pack-story.preset-prism { --tone-1:#16467d;--tone-2:#d68f60;--tone-3:#8f2750;--tone-4:#14263c; }
.pack-story.preset-pure { --tone-1:#dce5df;--tone-2:#9bac9c;--tone-3:#68775f;--tone-4:#eef0ea; }
.pack-story.preset-monox,.pack-story.preset-mono { --tone-1:#ededed;--tone-2:#202020;--tone-3:#777;--tone-4:#bdbdbd; }
.pack-story.preset-flourish { --tone-1:#e59aab;--tone-2:#49644a;--tone-3:#b54b70;--tone-4:#f0c5be; }
.pack-story.preset-wvibes { --tone-1:#bcd3db;--tone-2:#385969;--tone-3:#d0a77f;--tone-4:#eef1f0; }
.pack-story.preset-xmas { --tone-1:#8e1f2a;--tone-2:#234b35;--tone-3:#d6b76c;--tone-4:#eee4ce; }

@keyframes hero-focus-scan { 0%,100%{left:0;opacity:.15} 50%{left:100%;opacity:.65} }

@media (max-width:900px) {
  .hero-editorial { grid-template-columns:1fr; gap:28px; }
  .hero-intro { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end; }
  .hero-copy { max-width:470px; }.hero-actions{margin:0}
  .pack-story,.pack-story:nth-child(even) { grid-template-columns:1fr; gap:26px; }
  .pack-story:nth-child(even) .pack-story-visual,.pack-story:nth-child(even) .pack-story-copy { grid-row:auto; grid-column:auto; }
  .pack-story-copy { position:static; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; padding-top:0; }
  .pack-story-copy > p { margin:0; }.pack-tone-bars{grid-column:1 / -1;margin-top:0}
}

@media (max-width:600px) {
  .hero-content { padding-top:100px; padding-bottom:62px; }
  .hero-frame { min-height:calc(100svh - 162px); justify-content:center; }
  .hero-meta { padding-bottom:15px; font-size:12px; }
  .hero-brand-motion { padding:32px 0 28px; }
  .hero-editorial { padding-top:27px; }
  .hero h1 { max-width:310px; font-size:clamp(31px,9.5vw,43px); }
  .hero-intro { display:block; }.hero-copy{max-width:315px;font-size:13px}.hero-actions{margin-top:21px}
  .scroll-cue { display:none; }
  .flow-transition { top:-60px; width:88vw; height:120px; }
  .flow-section > .shell { filter:blur(calc((1 - var(--flow-progress)) * 4px)); transform:translateY(calc((1 - var(--flow-progress)) * 26px)); }
  .packs-hero { min-height:68svh; padding-top:128px; padding-bottom:58px; }
  .packs-hero h1 { font-size:56px; }
  .pack-jump { top:70px; }.pack-jump .shell{height:52px;gap:24px}
  .preset-stories { width:calc(100vw - 32px); padding-top:62px; }
  .pack-story { gap:22px; padding-bottom:96px; scroll-margin-top:130px; }
  .pack-story-visual { aspect-ratio:1.02; border-radius:20px; }
  .pack-story-top { top:18px; right:18px; left:18px; font-size:12px; }
  .pack-story-visual h2 { right:18px; bottom:18px; left:18px; font-size:50px; }
  .pack-story-copy { display:block; }.pack-story-copy > p{margin-bottom:28px;font-size:16px}.pack-tone-bars{margin-top:28px}
}

@media (prefers-reduced-motion:reduce) {
  .hero-frame::before { animation:none; left:50%; opacity:.25; }
  .flow-section { --flow-progress:1 !important; }
}

/* 2026-07-05 — centered launch composition and complete preset education */
.hero { display:grid; place-items:center; }
.hero::after { background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 1px),rgba(255,255,255,.022) 16.666%); }
.hero-content { display:flex; align-items:center; flex-direction:column; padding-top:100px; padding-bottom:70px; text-align:center; }
.hero-frame { width:100%; min-height:calc(100svh - 170px); align-items:center; justify-content:center; }
.hero-frame::before { top:50%; bottom:auto; left:50%; width:min(1080px,92vw); height:1px; background:linear-gradient(90deg,transparent,rgba(20,97,255,.18),rgba(255,255,255,.22),rgba(20,97,255,.18),transparent); transform:translateX(-50%); animation:hero-center-scan 8s ease-in-out infinite; }
.hero-meta { display:none; }
.hero-brand-motion { width:min(82vw,940px); padding:0; border:0; }
.hero-brand-motion .hero-wordmark,.hero-brand-motion > span { width:100%; }
.hero-editorial { display:flex; width:100%; align-items:center; flex-direction:column; gap:0; padding-top:0; }
.hero-motto { width:min(720px,88vw); min-height:82px; align-items:center; margin:0; }
.hero-motto > span { top:50%; left:50%; width:76%; height:150%; }
.hero h1 { max-width:680px; margin:0 auto; padding:.04em 0 .14em; font-size:clamp(28px,3.1vw,43px); line-height:1.12; text-align:center; }
.hero-intro { display:flex; align-self:center; align-items:center; flex-direction:column; padding:0; }
.hero-copy { max-width:485px; margin:14px auto 0; font-size:13px; text-align:center; }
.hero-actions { margin-top:24px; }
.scroll-cue { right:auto; left:50%; transform:translateX(-50%); }

.flow-transition { top:-128px; width:min(1020px,92vw); height:256px; opacity:calc(.2 + var(--flow-progress) * .8); }
.flow-transition::before,.flow-transition::after { position:absolute; content:""; pointer-events:none; }
.flow-transition::before { top:50%; left:50%; width:72%; height:96px; border:1px solid rgba(255,255,255,.09); border-radius:50%; filter:blur(calc((1 - var(--flow-progress)) * 9px)); transform:translate(-50%,-50%) scale(calc(.72 + var(--flow-progress) * .28)); }
.flow-transition::after { top:50%; left:50%; width:44%; height:54px; border-radius:50%; background:radial-gradient(ellipse,rgba(20,97,255,.13),transparent 68%); filter:blur(17px); transform:translate(-50%,-50%) scale(calc(.5 + var(--flow-progress) * .5)); }
.flow-transition i { top:50%; width:50%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28)); }
.flow-transition span { width:9px; height:9px; background:#0b1730; box-shadow:0 0 42px rgba(20,97,255,.95); }
.flow-section > .shell { clip-path:inset(calc((1 - var(--flow-progress)) * 8%) 0 0 round 24px); opacity:calc(.18 + var(--flow-progress) * .82); filter:blur(calc((1 - var(--flow-progress)) * 11px)); transform:translateY(calc((1 - var(--flow-progress)) * 72px)) scale(calc(.97 + var(--flow-progress) * .03)); transform-origin:50% 0; }
.pack-story.flow-section > :not(.flow-transition) { filter:blur(calc((1 - var(--flow-progress)) * 10px)); transform:translateY(calc((1 - var(--flow-progress)) * 64px)) scale(calc(.98 + var(--flow-progress) * .02)); }

.packs-hero { min-height:78svh; padding-bottom:95px; }
.packs-hero h1 { max-width:1120px; margin-bottom:34px; font-size:clamp(60px,8vw,120px); letter-spacing:-.06em; line-height:.96; }
.packs-hero > .shell > p:last-child { max-width:760px; font-size:19px; line-height:1.55; }
.pack-foundation { border-block:1px solid var(--line-soft); background:radial-gradient(circle at 82% 22%,rgba(20,97,255,.07),transparent 27%),#030303; }
.pack-foundation-intro { display:grid; grid-template-columns:.5fr 1.5fr; gap:18px clamp(44px,7vw,110px); align-items:start; }
.pack-foundation-intro .eyebrow { grid-row:1 / span 2; }
.pack-foundation-intro h2 { max-width:920px; margin:0; font-size:clamp(48px,6vw,88px); }
.pack-foundation-intro > p:last-child { grid-column:2; max-width:690px; margin-top:5px; color:#8c8c93; font-size:18px; }
.pack-foundation-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:90px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.pack-foundation-grid article { min-height:310px; padding:32px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 70%); }
.pack-foundation-grid span { color:#4f4f55; font-size:12px; letter-spacing:.14em; }
.pack-foundation-grid h3 { margin:86px 0 16px; font-size:24px; font-weight:560; }
.pack-foundation-grid p { margin:0; color:#77777d; font-size:14px; }

.pack-jump { top:76px; }
.preset-stories { padding-top:clamp(100px,11vw,170px); }
.pack-story,.pack-story:nth-child(even) { grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); gap:clamp(55px,8vw,125px); padding-bottom:clamp(150px,18vw,260px); }
.pack-story:nth-child(even) { grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr); }
.pack-story-visual { position:sticky; top:156px; aspect-ratio:1.08; border-radius:30px; }
.pack-story-visual h2 { right:30px; bottom:28px; left:30px; font-size:clamp(52px,7vw,104px); line-height:.9; overflow-wrap:anywhere; }
.pack-story-copy { position:static; padding-top:36px; }
.pack-story-subtitle { margin:0 0 20px!important; color:#f1f1f3!important; font-size:clamp(28px,3vw,44px)!important; font-weight:540; letter-spacing:-.04em; line-height:1.02!important; }
.pack-story-copy > p:not(.pack-story-subtitle) { margin-bottom:48px; color:#a1a1a7; font-size:17px; line-height:1.62; }
.pack-facts { margin:0; border-top:1px solid var(--line); }
.pack-facts > div { display:grid; grid-template-columns:112px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.pack-facts dt { color:#56565c; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.pack-facts dd { margin:0; color:#c4c4c8; font-size:12px; line-height:1.55; }
.pack-story-copy blockquote { margin:38px 0 0; padding:26px 28px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.pack-story-copy blockquote small { display:block; margin-bottom:12px; }
.pack-story-copy blockquote p { margin:0; color:#a5a5aa; font-size:14px; line-height:1.58; }
.pack-tip { margin-top:12px; padding:24px 28px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); color:#a5a5aa; }
.pack-tip strong { display:block; margin-bottom:9px; color:#56565c; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.pack-tip p { margin:0; color:#a5a5aa; font-size:13px; line-height:1.55; }

/* Preset chapters build in cleanly without the global section-divider graphic overlapping their artwork. */
.pack-story > .flow-transition { display:none; }
.pack-tone-bars { margin-top:28px; }

.pack-workflow { border-top:1px solid var(--line-soft); background:linear-gradient(180deg,#020202,#080809 48%,#020202); }
.pack-workflow-intro { display:grid; grid-template-columns:.55fr 1.45fr; gap:60px; align-items:start; }
.pack-workflow-intro h2 { max-width:900px; margin:0; }
.pack-workflow ol { margin:88px 0 0; padding:0; border-top:1px solid var(--line); list-style:none; }
.pack-workflow li { display:grid; grid-template-columns:80px .8fr 1.2fr; gap:25px; align-items:start; padding:28px 0; border-bottom:1px solid var(--line); }
.pack-workflow li > span { color:#55555b; font-size:12px; letter-spacing:.14em; }
.pack-workflow li > div { display:contents; }
.pack-workflow h3 { margin:0; font-size:24px; font-weight:560; }
.pack-workflow li p { max-width:620px; margin:0; color:#77777d; font-size:15px; }

.pack-faq { border-top:1px solid var(--line-soft); }
.pack-faq > .shell { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(70px,10vw,160px); align-items:start; }
.pack-faq h2 { max-width:520px; font-size:clamp(48px,5.8vw,84px); }
.pack-faq-list { border-top:1px solid var(--line); }
.pack-faq-list details { border-bottom:1px solid var(--line); }
.pack-faq-list summary { position:relative; padding:25px 46px 25px 0; color:#d1d1d5; font-size:16px; list-style:none; cursor:pointer; }
.pack-faq-list summary::-webkit-details-marker { display:none; }
.pack-faq-list summary i,.pack-faq-list summary i::after { position:absolute; top:50%; right:4px; width:17px; height:1px; background:#77777d; content:""; }
.pack-faq-list summary i::after { top:0; right:0; transform:rotate(90deg); transition:transform .25s ease; }
.pack-faq-list details[open] summary i::after { transform:rotate(0); }
.pack-faq-list details p { max-width:650px; margin:0; padding:0 40px 28px 0; color:#77777d; font-size:14px; line-height:1.6; }

@keyframes hero-center-scan { 0%,100%{opacity:.15;transform:translateX(-50%) scaleX(.45)} 50%{opacity:.72;transform:translateX(-50%) scaleX(1)} }

@media (max-width:900px) {
  .pack-foundation-intro,.pack-workflow-intro,.pack-faq > .shell { grid-template-columns:1fr; gap:24px; }
  .pack-foundation-intro .eyebrow { grid-row:auto; }.pack-foundation-intro > p:last-child{grid-column:auto}
  .pack-foundation-grid { grid-template-columns:1fr; margin-top:60px; }
  .pack-foundation-grid article { min-height:230px; }.pack-foundation-grid h3{margin-top:58px}
  .pack-story,.pack-story:nth-child(even) { grid-template-columns:1fr; gap:36px; }
  .pack-story:nth-child(even) .pack-story-visual,.pack-story:nth-child(even) .pack-story-copy{grid-column:auto;grid-row:auto}
  .pack-story-visual { position:relative; top:auto; aspect-ratio:1.35; }
  .pack-story-copy { display:block; padding-top:0; }
  .pack-workflow li { grid-template-columns:58px 1fr; }.pack-workflow li>div{display:block}.pack-workflow li p{margin-top:10px}
}

@media (max-width:600px) {
  .hero-content { padding-top:92px; }
  .hero-frame { min-height:calc(100svh - 154px); }
  .hero-brand-motion { width:82vw; }
  .hero-editorial { padding-top:0; }
  .hero-motto { min-height:62px; }
  .hero h1 { max-width:315px; font-size:clamp(29px,9vw,40px); line-height:1.12; }
  .hero-copy { max-width:310px; margin-top:12px; font-size:12px; }
  .flow-transition { top:-92px; height:184px; }
  .flow-section > .shell { filter:blur(calc((1 - var(--flow-progress)) * 6px)); transform:translateY(calc((1 - var(--flow-progress)) * 42px)) scale(calc(.985 + var(--flow-progress) * .015)); }
  .packs-hero { min-height:72svh; padding-bottom:70px; }
  .packs-hero h1 { font-size:53px; line-height:1; }
  .packs-hero > .shell > p:last-child { font-size:16px; }
  .pack-foundation-grid article { padding:25px; }
  .preset-stories { padding-top:88px; }
  .pack-story { padding-bottom:120px; }
  .pack-story-visual { aspect-ratio:.94; }
  .pack-story-visual h2 { font-size:46px; line-height:.95; }
  .pack-story-subtitle { font-size:27px!important; }
  .pack-facts > div { grid-template-columns:1fr; gap:7px; }
  .pack-story-copy blockquote,.pack-tip { padding:21px; }
  .pack-workflow ol { margin-top:58px; }.pack-workflow li{grid-template-columns:40px 1fr;padding:23px 0}.pack-workflow h3{font-size:20px}
}