:root {
  --canvas: #f5f3ee;
  --blush: #eadfe1;
  --lavender: #e3e1e9;
  --sea-glass: #dce6e1;
  --butter: #e9e4d6;
  --sky: #e1e8ec;
  --peach: #dfc7bb;
  --ink: #1d2b27;
  --muted-ink: #5c6965;
  --coral: #ad5848;
  --coral-hover: #914538;
  --surface: #fbfaf7;
  --line: rgba(23, 37, 34, 0.16);
  --shadow-sm: 0 10px 28px rgba(30, 41, 37, 0.07);
  --shadow-lg: 0 24px 64px rgba(30, 41, 37, 0.12);
  --radius-sm: 16px;
  --radius-md: 28px;
  --radius-lg: 44px;
  --motion-fast: 180ms;
  --motion-reveal: 360ms;
  --glass-surface: rgba(251, 250, 247, 0.84);
  --glass-line: rgba(255, 255, 255, 0.78);
  --content: min(1680px, calc(100vw - clamp(32px, 5vw, 96px)));
  --display: Georgia, "Times New Roman", serif;
  --body: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; color: var(--ink); background: radial-gradient(circle at 10% 8%, rgba(234,223,225,.3), transparent 28rem), radial-gradient(circle at 92% 31%, rgba(227,225,233,.32), transparent 32rem), var(--canvas); font-family: var(--body); font-size: 17px; line-height: 1.65; }
img { max-width: 100%; display: block; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
button, a { touch-action: manipulation; }
button { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 12px 18px; transform: translateY(-160%); background: var(--ink); color: white; border-radius: 999px; }
.skip-link:focus-visible { transform: translateY(0); }
:focus-visible { outline: 3px solid #6d51bd; outline-offset: 4px; }

.site-header { position: sticky; z-index: 100; top: 0; width: var(--content); min-height: 76px; margin: 14px auto 0; padding: 10px 12px 10px 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; border: 1px solid rgba(29,43,39,.1); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; }
.brand img { width: 158px; height: auto; }
.brand span { padding-left: 10px; border-left: 1px solid var(--line); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.site-header nav { justify-self: center; display: flex; gap: 26px; }
.site-header nav a { position: relative; text-decoration: none; font-size: 14px; font-weight: 750; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; background: var(--coral); transition: right .2s ease-out; }
.site-header nav a:hover::after { right: 0; }

.button { min-height: 48px; border: 0; border-radius: 999px; padding: 13px 22px; cursor: pointer; font-weight: 850; color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: transform .2s ease-out, box-shadow .2s ease-out, background .2s ease-out; }
.button:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.button:active { transform: translateY(0) scale(.98); }
.button-primary { color: white; background: var(--coral); box-shadow: 0 14px 34px rgba(201,71,53,.26); }
.button-primary:hover { background: var(--coral-hover); box-shadow: 0 18px 42px rgba(169,56,41,.3); }
.button-small { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.button-wide { width: 100%; }
.text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.price-lockup { max-width: 100%; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; font-variant-numeric: tabular-nums; }
.price-lockup .price-label { flex-basis: 100%; color: inherit; font-size: 11px; font-weight: 900; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.price-lockup strong { font-family: var(--body); font-size: clamp(48px,5vw,68px); font-weight: 900; letter-spacing: -.055em; line-height: .9; }
.price-lockup .price-detail { color: inherit; font-size: 13px; font-weight: 750; line-height: 1.35; }

.section { position: relative; width: var(--content); margin-inline: auto; padding-block: clamp(56px, 6vw, 104px); scroll-margin-top: 92px; }
.section-heading { max-width: 830px; margin-bottom: 50px; }
.section-heading.narrow { max-width: 920px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading.centered > p:last-child { margin-inline: auto; }
.eyebrow, .mini-kicker { margin: 0 0 16px; color: #984133; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
h1 { max-width: 760px; font-size: clamp(50px, 4.25vw, 74px); }
h2 { font-size: clamp(46px, 5.2vw, 76px); }
h3 { font-size: 22px; line-height: 1.18; }
.section-heading > p:last-child, .hero-lede { max-width: 700px; color: var(--muted-ink); font-size: clamp(18px, 1.8vw, 22px); }

.hero { min-height: calc(100svh - 90px); display: grid; grid-template-columns: minmax(480px,.9fr) minmax(620px,1.1fr); align-items: center; column-gap: clamp(32px,4vw,72px); row-gap: 16px; padding-top: clamp(44px,5vw,76px); }
.hero-copy { position: relative; z-index: 4; }
.hero h1 { max-width: 700px; font-family: var(--body); font-size: clamp(50px,4.15vw,72px); font-weight: 900; line-height: .96; letter-spacing: -.055em; text-transform: uppercase; text-shadow: none; }
.hero h1 span { position: relative; display: inline; color: var(--coral); }
.hero h1 span::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .02em; height: .18em; border-radius: 999px; background: rgba(223,199,187,.72); }
.hero-price { width: fit-content; margin-top: 26px; padding: 14px 18px; border: 1px solid rgba(29,43,39,.1); border-radius: 18px; background: rgba(251,250,247,.76); box-shadow: var(--shadow-sm); }
.hero-price .price-detail { color: var(--muted-ink); }
.hero-actions { margin: 18px 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.trust-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trust-chips li { padding: 8px 12px; border-radius: 999px; background: var(--sea-glass); font-size: 12px; font-weight: 850; }
.boundary { max-width: 660px; margin-top: 22px; padding-left: 16px; border-left: 3px solid var(--coral); color: var(--muted-ink); font-size: 14px; }
.hero-scene { position: relative; z-index: 3; margin: 0; overflow: hidden; border: 1px solid rgba(29,43,39,.11); border-radius: 34px; background: var(--surface); box-shadow: var(--shadow-lg); }
.hero-scene img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.hero-scene figcaption { position: absolute; left: 18px; bottom: 18px; max-width: 360px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.72); border-radius: 14px; color: var(--muted-ink); background: rgba(251,250,247,.94); font-size: 13px; box-shadow: var(--shadow-sm); }
.hero-scene figcaption strong { color: var(--ink); }
.demo-disclosure { grid-column: 2; justify-self: stretch; width: 100%; max-width: none; margin: -24px 0 0; color: var(--muted-ink); font-size: 12px; text-align: center; text-wrap: pretty; }
.ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ambient-orb { position: absolute; display: block; border-radius: 50%; opacity: .34; }
.orb-blush { width: 420px; aspect-ratio: 1; right: 28%; top: 5%; background: radial-gradient(circle at 35% 30%, #fff, var(--blush) 55%, transparent 72%); }
.orb-lavender { width: 520px; aspect-ratio: 1; right: -14%; bottom: 0; background: radial-gradient(circle at 42% 48%, var(--lavender), transparent 68%); }
.ambient-line { position: absolute; width: 80%; height: 44%; right: -16%; top: 24%; border: 2px solid rgba(23,37,34,.12); border-radius: 50%; transform: rotate(-10deg); }
[data-parallax] { translate: none; }

.art-card { margin: 0; overflow: hidden; border: 6px solid rgba(255,255,255,.88); border-radius: 18px; background: var(--glass-surface); box-shadow: var(--shadow-sm); }
.art-card img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; background: var(--lavender); }
.art-card figcaption { padding: 8px 10px 6px; font-size: 10px; font-weight: 850; line-height: 1.3; text-transform: uppercase; }
.loading-note { color: var(--muted-ink); font-size: 14px; }

.proof-strip { width: var(--content); margin: 0 auto; padding: 12px; display: grid; grid-template-columns: minmax(320px,1.2fr) repeat(2,1fr); grid-template-rows: repeat(2,minmax(108px,1fr)); gap: 10px; overflow: hidden; border-radius: 28px; background: var(--ink); color: white; }
.proof-visual { grid-row: 1 / -1; min-height: 280px; margin: 0; overflow: hidden; border-radius: 18px; }
.proof-visual img { width: 100%; height: 100%; object-fit: cover; }
.proof-strip div { min-height: 0; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.045); }
.proof-strip strong { font-family: var(--display); font-size: clamp(34px,3vw,50px); font-weight: 500; line-height: 1; }
.proof-strip span { color: rgba(255,255,255,.72); font-size: 13px; }

.problem-section::before, .aesthetics-section::before { content: ""; position: absolute; z-index: -1; inset: 5% -20%; border-radius: 50%; background: radial-gradient(circle, rgba(234,223,225,.42), transparent 68%); }
.problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.glass-card { border: 1px solid var(--glass-line); background: var(--glass-surface); box-shadow: inset 0 1px 0 rgba(255,255,255,.82), var(--shadow-sm); backdrop-filter: blur(6px); }
.problem-grid article, .included-grid article, .workflow-grid li, .feature-triptych article, .privacy-grid article, .fit-grid article { border: 1px solid rgba(29,43,39,.1); background: rgba(251,250,247,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.88), var(--shadow-sm); }
.problem-grid article { position: relative; min-height: 0; padding: 24px; border-radius: 22px; }
.included-grid article { position: relative; min-height: 210px; padding: 28px; border-radius: var(--radius-md); }
.problem-grid article span, .included-grid article span { color: var(--coral); font-size: 12px; font-weight: 900; }
.problem-grid h3 { margin: 34px 0 10px; }
.problem-grid article:nth-child(3n + 1) { background: rgba(220,230,225,.72); }
.problem-grid article:nth-child(3n + 2) { background: rgba(234,223,225,.72); }
.problem-grid article:nth-child(3n) { background: rgba(227,225,233,.72); }
.problem-grid p, .included-grid p { color: var(--muted-ink); font-size: 15px; }
.card-symbol { position: absolute; right: 22px; top: 22px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--ink); background: rgba(220,230,225,.78); }
.card-symbol svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workflow-grid li, .privacy-grid article, .fit-grid article { position: relative; }
.workflow-grid .card-symbol, .fit-grid .card-symbol { right: 24px; top: 24px; }
.privacy-grid .card-symbol { right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 12px; }
.bridge-copy { max-width: 940px; margin: 70px auto 0; font-family: var(--display); font-size: clamp(32px,4vw,56px); line-height: 1.04; text-align: center; }
.supporting-art-strip { width: min(980px,92%); margin: 44px auto 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: clamp(12px,2vw,24px); }
.supporting-art-strip .art-card:nth-child(2) { transform: translateY(24px); }
.supporting-art-strip--compact { width: min(760px,86%); }
.supporting-art-strip--wide { width: min(900px,88%); margin-bottom: 40px; }
.context-visual { margin: 34px 0 0; overflow: hidden; border: 1px solid rgba(29,43,39,.1); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-sm); }
.context-visual img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.context-visual--wide { width: min(1040px,86%); margin-inline: auto; }
.context-visual--dna { width: min(920px,82%); margin-inline: auto; }

.comparison-gallery { width: 100%; padding-inline: max(16px, calc((100vw - var(--content))/2)); padding-bottom: clamp(52px,4vw,72px); border-radius: 0; background: linear-gradient(180deg, rgba(225,232,236,.46), rgba(238,240,239,.58)); }
.compare-tabs { position: relative; z-index: 2; width: max-content; margin: -24px auto 0; padding: 5px; display: flex; gap: 4px; border: 1px solid rgba(255,255,255,.76); border-radius: 999px; background: rgba(251,250,247,.86); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); }
.compare-tabs button { min-height: 44px; padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer; color: var(--ink); background: transparent; font-size: 14px; font-weight: 850; }
.compare-tabs button[aria-selected="true"] { color: white; background: var(--ink); }
.compare-panels { margin-top: 18px; padding: clamp(18px,2.5vw,32px); border: 1px solid rgba(29,43,39,.1); border-radius: 32px; background: rgba(251,250,247,.68); box-shadow: var(--shadow-sm); }
.compare-panels > article { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); gap: 32px; align-items: center; }
.compare-panels > article[hidden] { display: none; }
.compare-panels article > div:last-child { padding: 28px; border-radius: 22px; background: rgba(255,255,255,.72); }
.mini-gallery { min-height: 0; display: grid; grid-template-columns: repeat(3,1fr); align-items: start; gap: 14px; }
.mini-gallery .art-card:nth-child(2) { transform: translateY(18px); }
.comparison-gallery blockquote { max-width: 1040px; margin: 30px auto 0; padding: clamp(24px,3vw,36px); border-left: 4px solid var(--coral); border-radius: 0 28px 28px 0; font-family: var(--display); font-size: clamp(28px,3vw,44px); line-height: 1.08; text-align: left; background: rgba(255,255,255,.58); }
.check-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 28px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: .05em; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: white; background: #386757; font-size: 12px; font-weight: 900; }
.check-list.negative li::before { content: "×"; background: var(--coral); }
.check-list.neutral li::before { content: "−"; background: var(--muted-ink); }

.dna-section { width: 100%; padding: 0; background: linear-gradient(180deg, rgba(238,240,239,.68), rgba(227,225,233,.7)); }
.dna-sticky { width: var(--content); min-height: auto; margin: auto; padding-block: clamp(58px,5vw,82px); }
.dna-diagram { padding: 18px; display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: center; gap: 18px; border: 1px solid rgba(23,37,34,.1); border-radius: 30px; background: rgba(255,255,255,.36); }
.dna-diagram > div { min-height: 130px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(23,37,34,.15); border-radius: 22px; background: rgba(255,254,251,.72); }
.dna-diagram span { font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.dna-diagram strong { font-family: var(--display); font-size: 28px; }
.dna-core { position: relative; overflow: hidden; color: white; background: var(--ink) !important; box-shadow: var(--shadow-lg); }
.dna-core i { position: absolute; width: 120px; aspect-ratio: 1; right: -25px; bottom: -45px; border-radius: 50%; background: var(--peach); opacity: .75; }
.flow-arrow { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.68); font-size: 24px !important; }
.dna-steps { margin: 60px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; list-style: none; }
.dna-steps li { padding: 22px; display: grid; grid-template-columns: auto 1fr; gap: 14px; border: 1px solid transparent; border-radius: 20px; background: rgba(255,255,255,.42); transition: background .25s, border-color .25s, transform .25s; }
.dna-steps li.is-active { border-color: var(--ink); background: var(--surface); transform: translateY(-4px); }
.dna-steps li > span { font-weight: 900; }
.dna-steps strong, .dna-steps small { display: block; }
.dna-steps small { margin-top: 5px; color: var(--muted-ink); }

.workflow-section { background: radial-gradient(circle at 50% 40%, rgba(233,228,214,.5), transparent 60%); }
.workflow-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; list-style: none; }
.workflow-grid li { min-height: 500px; padding: 30px; display: flex; flex-direction: column; border-radius: var(--radius-md); }
.step-number { font-weight: 900; }
.step-visual { min-height: 210px; margin: 30px 0; padding: 24px; display: flex; gap: 12px; align-items: center; justify-content: center; border-radius: 22px; background: var(--blush); content-visibility: auto; contain-intrinsic-size: 210px; }
.step-visual i { display: block; background: var(--surface); box-shadow: var(--shadow-sm); }
.input-visual { flex-direction: column; }
.input-visual i { width: 90%; height: 30px; border-radius: 8px; }
.palette-visual i { width: 29%; aspect-ratio: 1; border-radius: 50%; }
.palette-visual i:nth-child(1) { background: var(--lavender); }.palette-visual i:nth-child(2) { background: var(--coral); }.palette-visual i:nth-child(3) { background: var(--sea-glass); }
.map-visual { flex-wrap: wrap; }.map-visual i { width: 26%; aspect-ratio: 4/5; border-radius: 8px; }
.workflow-grid h3 { margin-top: auto; }
.center-action { margin-top: 38px; text-align: center; }

.demo-section { width: 100%; padding-inline: max(16px, calc((100vw - var(--content))/2)); display: grid; grid-template-columns: minmax(320px,.68fr) minmax(0,1.32fr); align-items: center; gap: clamp(36px,5vw,72px); color: white; background: var(--ink); }
.demo-copy .eyebrow { color: var(--peach); }
.demo-copy h2 { color: white; }
.demo-copy p { color: rgba(255,255,255,.7); }
.demo-copy .check-list li::before { color: var(--ink); background: var(--sea-glass); }
.demo-stage { position: relative; min-height: clamp(520px,48vw,760px); margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 32px; background: #d8d3ca; box-shadow: 0 34px 88px rgba(0,0,0,.3); }
.demo-stage > img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.demo-stage::after { content: ""; position: absolute; inset: 50% 0 0; pointer-events: none; background: linear-gradient(transparent,rgba(16,28,25,.8)); }
.demo-stage figcaption { position: absolute; z-index: 2; left: 24px; bottom: 24px; max-width: 460px; margin: 0; padding: 14px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(23,37,34,.72); backdrop-filter: blur(10px); font-size: 13px; }
.demo-badges { position: absolute; z-index: 2; top: 24px; right: 24px; display: grid; gap: 8px; }
.demo-badges span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; color: var(--ink); background: rgba(251,250,247,.86); backdrop-filter: blur(10px); font-size: 11px; font-weight: 850; text-align: center; }

.journey-section { width: 100%; padding-inline: calc((100vw - var(--content))/2); overflow: hidden; }
.journey-section .section-heading { margin-inline: auto; text-align: center; }
.journey-section .section-heading > p:last-child { margin-inline: auto; }
.journey-viewport { min-height: auto; }
.journey-track { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; width: 100%; }
.journey-track .art-card { width: auto; }

.roles-section { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: 60px; }
.roles-copy { position: sticky; top: 120px; }
.role-list { margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; list-style: none; }
.role-list button { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; color: var(--ink); background: transparent; font-size: 12px; font-weight: 800; text-align: left; }
.role-list button[aria-pressed="true"] { color: white; border-color: var(--ink); background: var(--ink); }
.role-gallery { display: grid; grid-template-columns: repeat(3,1fr); align-items: start; gap: 14px; }
.role-gallery .art-card { transition: opacity .3s, transform .3s; }
.role-gallery .art-card.is-muted { opacity: .74; transform: scale(.985); }
.role-gallery .art-card.is-active { transform: scale(1.025); box-shadow: 0 30px 72px rgba(201,71,53,.24); }

.aesthetic-mosaic { columns: 4; column-gap: 16px; }
.aesthetic-mosaic .art-card { margin-bottom: 16px; break-inside: avoid; }

.sample-card { padding: 18px 18px 18px clamp(28px,5vw,72px); display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); align-items: center; gap: clamp(28px,4vw,64px); border: 1px solid rgba(29,43,39,.08); border-radius: var(--radius-lg); background: rgba(233,228,214,.78); }
.sample-card h2 { max-width: 780px; }
.sample-visual { position: relative; min-height: 480px; margin: 0; overflow: hidden; border-radius: 30px; }
.sample-visual > img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.sample-counter { position: absolute; right: 24px; bottom: 24px; width: 150px; aspect-ratio: 1; padding: 22px; display: flex; flex-direction: column; justify-content: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(23,37,34,.9); color: white; text-align: center; backdrop-filter: blur(10px); }
.sample-counter strong { font-family: var(--display); font-size: 68px; font-weight: 500; line-height: 1; }
.sample-counter span { font-size: 12px; }
.sample-ribbon { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 9px; }
.sample-ribbon span { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 750; }

.control-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); align-items: stretch; gap: 18px; }
.control-layout > .context-visual { min-height: 720px; margin: 0; }
.control-layout > .context-visual img { height: 100%; min-height: inherit; object-fit: cover; }
.control-layout > .context-visual figcaption { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.72); border-radius: 15px; background: rgba(251,250,247,.86); backdrop-filter: blur(10px); font-size: 13px; font-weight: 750; }
.control-layout > .context-visual { position: relative; }
.feature-triptych { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3,1fr); gap: 16px; }
.feature-triptych article { min-height: 0; padding: 28px; border-radius: var(--radius-md); }
.feature-triptych .feature-large { grid-row: auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(234,223,225,.78); }
.feature-icon { width: 52px; height: 52px; margin-bottom: auto; display: grid; place-items: center; border-radius: 16px; color: white; background: var(--ink); }
.feature-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-large h3 { max-width: 420px; font-family: var(--display); font-size: 34px; font-weight: 500; }

.privacy-section { width: 100%; padding-inline: calc((100vw - var(--content))/2); display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 54px; background: rgba(220,230,225,.72); }
.privacy-visual { margin: 0; }
.privacy-orbit { position: relative; width: min(350px,80vw); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(23,37,34,.2); border-radius: 50%; }
.privacy-orbit::before, .privacy-orbit::after { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(23,37,34,.2); border-radius: inherit; }.privacy-orbit::after { inset: 33%; }
.privacy-orbit strong { position: relative; z-index: 2; font-family: var(--display); font-size: 42px; }
.privacy-orbit i { position: absolute; z-index: 3; width: 42px; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }.privacy-orbit i:nth-child(1){left:11%;top:26%}.privacy-orbit i:nth-child(2){right:12%;top:42%;background:var(--lavender)}.privacy-orbit i:nth-child(3){left:44%;bottom:4%;background:var(--butter)}
.privacy-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.privacy-grid article { padding: 22px; border-radius: 20px; }
.privacy-grid h3 { font-size: 18px; }.privacy-grid p { margin: 0; font-size: 14px; color: var(--muted-ink); }
.fine-print { margin-top: 18px; font-size: 13px; }

.results-gallery { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }

.fit-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.fit-grid article { padding: clamp(28px,5vw,58px); border-radius: var(--radius-md); }
.fit-grid .fit-positive { background: rgba(227,225,233,.76); }

.table-section { padding-inline: clamp(22px,5vw,70px); border-radius: var(--radius-lg); background: var(--surface); }
.comparison-table { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; }
.table-row { min-height: 72px; padding: 16px 22px; display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); }
.table-row:last-child { border-bottom: 0; }
.table-row > :last-child { padding: 10px 14px; border-radius: 12px; background: rgba(201,227,220,.55); font-weight: 750; }
.table-head { color: white; background: var(--ink); font-size: 13px; font-weight: 850; }
.table-head > :last-child { background: rgba(255,255,255,.12); }

.included-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 64px; align-items: start; }
.included-copy { position: sticky; top: 120px; }
.included-visual, .faq-visual { margin-top: 28px; border-radius: 20px; }
.included-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.included-grid article:nth-child(1) { grid-column: span 2; min-height: 300px; background: var(--peach); }
.included-grid article h3 { margin-top: 48px; }

.offer-section { width: min(1480px,calc(100vw - 48px)); padding: 0; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(430px,.85fr); overflow: hidden; border-radius: var(--radius-lg); background: var(--ink); box-shadow: var(--shadow-lg); }
.offer-art { position: relative; min-height: 680px; margin: 0; overflow: hidden; background: linear-gradient(160deg,var(--lavender),var(--blush)); }
.offer-art > img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.offer-art::after { content: ""; position: absolute; inset: 52% 0 0; background: linear-gradient(transparent,rgba(23,37,34,.68)); }
.offer-art figcaption { position: absolute; z-index: 2; left: 24px; bottom: 24px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; color: white; background: rgba(23,37,34,.72); backdrop-filter: blur(10px); font-size: 13px; font-weight: 750; }
.offer-panel { padding: clamp(42px,6vw,80px); color: white; }
.offer-panel .eyebrow { color: var(--peach); }.offer-panel h2 { max-width: 650px; color:white; font-size: clamp(46px,4vw,68px); }.offer-panel .check-list { margin: 34px 0; }.offer-panel .check-list li::before { color:var(--ink);background:var(--sea-glass) }
.offer-price { margin: -4px 0 24px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; color: white; background: rgba(255,255,255,.08); }
.offer-price .price-label { color: var(--peach); }
.offer-price .price-detail { color: rgba(255,255,255,.78); }
.offer-note { margin: 16px 0 0; color: rgba(255,255,255,.68); font-size: 12px; }

.faq-section { display: grid; grid-template-columns: .68fr 1.32fr; gap: 70px; align-items: start; }
.faq-section .section-heading { position: sticky; top: 120px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 72px; padding: 20px 52px 20px 0; position: relative; display: flex; align-items: center; cursor: pointer; font-size: 18px; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.faq-list details[open] summary::after { content: "−"; color: white; background: var(--ink); }
.faq-list details p { max-width: 720px; padding-right: 40px; color: var(--muted-ink); }

.final-section { width: 100%; min-height: 680px; padding-inline: max(20px, calc((100vw - var(--content))/2)); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(360px,.8fr); align-items: center; gap: clamp(36px,5vw,72px); overflow: hidden; background: linear-gradient(135deg,rgba(233,228,214,.88),rgba(234,223,225,.72) 55%,rgba(227,225,233,.82)); }
.final-art { position: relative; min-height: 560px; margin: 0; overflow: hidden; border: 1px solid rgba(29,43,39,.1); border-radius: 32px; background: var(--surface); box-shadow: var(--shadow-lg); }
.final-art > img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.final-art figcaption { position: absolute; left: 24px; bottom: 24px; max-width: 380px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.76); border-radius: 14px; background: rgba(251,250,247,.86); backdrop-filter: blur(10px); font-size: 13px; font-weight: 750; }
.final-copy h2 { max-width: 560px; }
.final-copy p { max-width: 560px; color: var(--muted-ink); font-size: 20px; }
.final-copy .final-price { width: fit-content; margin: 26px 0 22px; padding-left: 16px; border-left: 3px solid var(--coral); color: var(--ink); }
.final-copy .final-price .price-detail { color: var(--muted-ink); font-size: 13px; }

.site-footer { width: var(--content); margin: 0 auto; padding: 52px 0 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; color: var(--muted-ink); font-size: 13px; }
.brand-footer img { width: 180px; height: auto; }.brand-footer p { margin: 12px 0 0; }

dialog { width: min(560px,calc(100vw - 32px)); padding: 0; border: 0; border-radius: 30px; color: var(--ink); background: var(--surface); box-shadow: 0 40px 120px rgba(23,37,34,.35); }
dialog::backdrop { background: rgba(23,37,34,.64); backdrop-filter: blur(5px); }
.dialog-inner { position: relative; padding: clamp(32px,6vw,56px); }
.dialog-close { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; cursor: pointer; color: var(--ink); background: white; font-size: 28px; }
.dialog-inner h2 { font-size: 44px; }
.noscript-note { position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 14px 18px; border-radius: 14px; color: white; background: var(--ink); }

[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal].is-pending, .js [data-stagger] > .is-pending { opacity: 0; transform: translateY(18px); }
.js .hero-copy.is-pending,
.js .hero-scene.is-pending,
.js .section-heading.is-pending,
.js .roles-copy.is-pending,
.js .demo-copy.is-pending,
.js .privacy-copy.is-pending,
.js .included-copy.is-pending,
.js .offer-panel.is-pending,
.js .final-copy.is-pending { opacity: 1; transform: none; }
.js [data-reveal].is-visible, .js [data-stagger] > .is-visible { opacity: 1; transform: none; transition: opacity var(--motion-reveal) ease-out var(--reveal-delay, 0ms), transform var(--motion-reveal) ease-out var(--reveal-delay, 0ms); }

@media (max-width: 1024px) {
  :root { --content: min(1680px, calc(100vw - 36px)); }
  .proof-strip { grid-template-columns: repeat(2,1fr); grid-template-rows: auto; }
  .proof-visual { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
  .site-header nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { max-width: 820px; }
  .hero-scene { width: min(900px,100%); }
  .demo-disclosure { grid-column: 1; justify-self: start; margin: 0; text-align: left; }
  .problem-grid { grid-template-columns: repeat(2,1fr); }
  .demo-section, .roles-section, .privacy-section, .included-section, .faq-section, .control-layout, .offer-section { grid-template-columns: 1fr; }
  .roles-copy, .included-copy, .faq-section .section-heading { position: static; }
  .demo-section, .privacy-section { padding-inline: 18px; }
  .demo-stage { min-height: 620px; }
  .control-layout > .context-visual { min-height: 560px; }
  .feature-triptych { grid-template-columns: repeat(3,1fr); grid-template-rows: auto; }
  .feature-triptych article { min-height: 280px; }
  .offer-art { min-height: 560px; }
  .privacy-orbit { margin-inline:auto; }
  .aesthetic-mosaic { columns: 3; }
  .results-gallery { grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 768px) {
  :root { --content: calc(100% - 28px); }
  body { font-size: 16px; }
  .site-header { min-height: 66px; margin-top: 8px; padding: 8px 9px 8px 14px; }
  .brand img { width: 130px; }.brand span { display:none; }.site-header .button { font-size: 12px; padding-inline: 13px; }
  .section { padding-block: 64px; }
  h1 { font-size: clamp(44px,12vw,58px); }
  h2 { font-size: clamp(42px,12vw,60px); }
  .hero { min-height: auto; gap: 18px; padding-top: 64px; }
  .hero-scene { border-radius: 24px; }
  .proof-strip { grid-template-columns: repeat(2,1fr); }.proof-visual{grid-column:1/-1;grid-row:auto;min-height:220px}.proof-strip div{min-height:100px;padding:15px}
  .problem-grid, .workflow-grid, .dna-steps, .privacy-grid, .fit-grid, .included-grid { grid-template-columns: 1fr; }
  .problem-grid article { min-height: 0; }.problem-grid h3 { margin-top: 30px; }
  .compare-panels > article { grid-template-columns: 1fr; }.mini-gallery { min-height: auto; }.compare-tabs { width:100%;display:grid;grid-template-columns:1fr 1fr}.compare-tabs button{padding-inline:10px}
  .dna-sticky { min-height: auto; padding-block: 88px; }.dna-diagram { grid-template-columns: 1fr; }.flow-arrow { transform: rotate(90deg); justify-self:center; }
  .workflow-grid li { min-height: 440px; }
  .demo-stage { min-height: 460px; }.demo-stage figcaption{left:14px;right:14px;bottom:14px}.demo-badges{top:14px;right:14px}.demo-badges span:nth-child(n+3){display:none}
  .journey-track { grid-template-columns:repeat(2,1fr) }
  .role-list { grid-template-columns:1fr 1fr; }.role-gallery { min-height:auto;grid-template-columns:repeat(2,1fr)}
  .aesthetic-mosaic { columns: 2; }
  .sample-card { grid-template-columns:1fr;padding:28px 18px 18px }.sample-visual{min-height:380px}.sample-counter { width:132px;right:16px;bottom:16px }.sample-counter strong{font-size:48px}
  .control-layout { grid-template-columns:1fr }.control-layout > .context-visual{min-height:420px}.feature-triptych { grid-template-columns:1fr;grid-template-rows:auto }.feature-triptych .feature-large{grid-row:auto;min-height:0}.feature-large h3{font-size:34px}
  .results-gallery { grid-template-columns:repeat(2,1fr) }
  .comparison-table { border:0;display:grid;gap:12px }.table-row { grid-template-columns:1fr;gap:8px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.table-head{display:none}.table-row>span::before{display:block;color:var(--muted-ink);font-size:11px;font-weight:850;text-transform:uppercase}.table-row>span:nth-child(2)::before{content:"One image at a time"}.table-row>span:nth-child(3)::before{content:"GalleryDNA Studio"}
  .included-grid article:nth-child(1){grid-column:auto}.offer-section{grid-template-columns:1fr}.offer-art{min-height:430px;order:2}.offer-panel{padding:38px 26px;order:1}
  .final-section { grid-template-columns:1fr;padding-inline:20px }.final-art{min-height:460px;order:2}.final-copy{order:1}.site-footer{grid-template-columns:1fr;gap:24px}
}

@media (max-width: 460px) {
  .hero-price { width:100% }.hero-actions { align-items:stretch;flex-direction:column }.hero-actions .button,.hero-actions .text-link{width:100%;justify-content:center}
  .trust-chips { display:grid;grid-template-columns:1fr 1fr }.trust-chips li:last-child{grid-column:1/-1;text-align:center}
  .mini-gallery { grid-template-columns:repeat(3,1fr);gap:7px }.journey-track,.role-gallery { grid-template-columns:1fr 1fr;gap:9px }
  .aesthetic-mosaic { columns: 1; }
  .role-list { grid-template-columns:1fr }
  .journey-track { grid-template-columns:repeat(2,1fr) }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-parallax], .journey-track { transform: none !important; translate: none !important; }
  .js [data-reveal].is-pending { opacity: 1; transform: none; }
  .roles-copy, .included-copy, .faq-section .section-heading { position: static; }
}