.soak-landing {
 --landing-width: 1240px;
 --landing-gutter: clamp(20px, 4vw, 48px);
 --landing-divider: color-mix(in srgb, var(--line) 72%, transparent);
}
.landing-container {
 width: min(100%, var(--landing-width));
 margin-inline: auto;
 padding-inline: var(--landing-gutter);
}
.landing-skip {
 position: fixed;
 z-index: 2;
 inset: 12px auto auto 12px;
 padding: 12px 16px;
 border-radius: var(--control-radius);
 background: var(--accent);
 color: var(--on-accent);
 transform: translateY(calc(-100% - 24px));
}
.landing-skip:focus { transform: none; }
.landing-header { border-bottom: 1px solid var(--landing-divider); }
.landing-header-inner,
.landing-nav {
 display: flex;
 align-items: center;
 gap: 18px;
}
.landing-header-inner {
 justify-content: space-between;
 min-height: calc(76px + env(safe-area-inset-top));
 padding-top: env(safe-area-inset-top);
}
.landing-brand { color: var(--ink); text-decoration: none; }
.landing-nav-detail, .landing-footer a {
 display: inline-flex;
 align-items: center;
 min-height: 44px;
 color: var(--muted);
 font-size: .875rem;
 font-weight: 600;
 text-decoration: none;
}
.landing-nav-detail:hover, .landing-footer a:hover { color: var(--ink); text-decoration: underline; }
.landing-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 min-height: 48px;
 padding: 10px 16px;
 border: 1px solid var(--line);
 border-radius: var(--control-radius);
 background: var(--surface);
 color: var(--ink);
 font-size: .9375rem;
 font-weight: 600;
 line-height: 1.2;
 text-decoration: none;
 transition: background-color var(--motion-in) ease-out, border-color var(--motion-in) ease-out;
 touch-action: manipulation;
}
.landing-button:hover { background: var(--selected); }
.landing-button:active { transform: scale(.97); transition: none; }
.landing-button-primary {
 min-height: 52px;
 padding-inline: 20px;
 border-color: var(--accent);
 background: var(--accent);
 color: var(--on-accent);
}
.landing-button-primary:hover { background: color-mix(in srgb, var(--accent) 85%, white); }

.landing-hero {
 display: grid;
 grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
 align-items: center;
 gap: clamp(24px, 4vw, 64px);
 padding-block: clamp(44px, 7vw, 100px) clamp(38px, 5vw, 68px);
}
.landing-intro h1 {
 max-width: 12ch;
 margin-bottom: 22px;
 font-size: clamp(2.65rem, 5.45vw, 4.6rem);
 line-height: 1.06;
 letter-spacing: -.048em;
 text-wrap: balance;
}
.landing-intro > p:not(.landing-invitation) {
 max-width: 36ch;
 margin-bottom: 28px;
 color: var(--muted);
 font-size: clamp(1.0625rem, 1.55vw, 1.25rem);
 line-height: 1.55;
}
.landing-hero-actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 12px 16px;
}
.landing-intro .landing-invitation {
 margin: 12px 0 0;
 color: var(--muted);
 font-size: .875rem;
 line-height: 1.45;
}
.landing-visual { min-width: 0; }
.landing-artwork {
 display: grid;
 align-items: center;
 min-width: 0;
 aspect-ratio: 17 / 12;
 border: 1px solid var(--landing-divider);
 border-radius: 24px;
 background:
  radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--selected) 55%, transparent), transparent 74%),
  var(--surface);
 overflow: hidden;
}
.landing-hero-art { display: block; width: 100%; height: auto; }
.landing-artwork[data-hero-live] [data-hero-bubble] {
 transform-box: fill-box;
 transform-origin: center;
 animation: hero-bubble-rise 4.6s var(--hero-delay, 0s) ease-in-out infinite;
}
.landing-artwork[data-hero-live] [data-hero-wave] { animation: hero-water-drift 5s ease-in-out infinite; }
.landing-artwork[data-hero-live] [data-hero-dip] { animation: hero-strip-dip 5.8s ease-in-out infinite; }
.landing-artwork[data-hero-live] [data-hero-drop] { animation: hero-drop-hover 5.8s ease-in-out infinite; }
.landing-artwork[data-hero-live] [data-hero-ring] {
 transform-box: fill-box;
 transform-origin: center;
 animation: hero-ring-spread 5.8s var(--hero-delay, 0s) ease-in-out infinite;
}
.landing-scene:not([hidden]) .landing-hero-art { animation: hero-enter var(--motion-in) ease-out; }
@keyframes hero-enter { from { opacity: .45; transform: translateY(3px); } }
@keyframes hero-bubble-rise {
 0%, 100% { opacity: .28; transform: translate(0, 9px) scale(.85); }
 22% { opacity: .9; }
 77% { opacity: .32; transform: translate(var(--hero-drift, 8px), -28px) scale(1.12); }
 85% { opacity: 0; transform: translate(var(--hero-drift, 8px), -30px) scale(1.12); }
 86% { opacity: 0; transform: translate(0, 9px) scale(.85); }
}
@keyframes hero-water-drift { 50% { transform: translateX(7px); opacity: .5; } }
@keyframes hero-strip-dip { 48%, 62% { transform: translate(-7px, 18px); } }
@keyframes hero-drop-hover { 50% { transform: translateY(10px); } }
@keyframes hero-ring-spread { 52% { transform: scale(1.055); opacity: .5; } }
@media (prefers-reduced-motion: reduce) {
 .landing-artwork[data-hero-live] :is([data-hero-bubble], [data-hero-wave], [data-hero-dip], [data-hero-drop], [data-hero-ring]),
 .landing-scene:not([hidden]) .landing-hero-art { animation: none; }
}

.landing-preview {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 8px;
 margin-top: 12px;
}
.landing-preview > span {
 grid-column: 1 / -1;
 color: var(--muted);
 font-size: .8125rem;
 font-weight: 600;
}
.landing-preview .landing-button { min-height: var(--control-height); padding-inline: 8px; font-size: .875rem; text-align: center; }
.landing-preview [aria-current] { border-color: var(--accent); background: var(--selected); }

.landing-features { padding-block: 0 clamp(32px, 5vw, 64px); scroll-margin-top: 24px; }
.landing-features > h2 {
 margin: 0 0 18px;
 font-size: clamp(1.375rem, 2.4vw, 1.9rem);
 letter-spacing: -.028em;
}
.landing-feature-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 border-block: 1px solid var(--landing-divider);
}
.landing-steps { margin: 0; padding: 0; list-style: none; }
.landing-feature {
 display: grid;
 grid-template-columns: 32px minmax(0, 1fr);
 align-items: start;
 gap: 12px;
 min-width: 0;
 padding: 24px 22px;
}
.landing-feature:first-child { padding-inline-start: 0; }
.landing-feature + .landing-feature { border-inline-start: 1px solid var(--landing-divider); }
.landing-step-number {
 display: grid;
 place-items: center;
 min-height: 32px;
 border-radius: 50%;
 background: var(--selected);
 color: var(--ink);
 font-size: .8125rem;
 font-weight: 700;
 font-variant-numeric: tabular-nums;
}
.landing-feature h3 { margin: 0 0 6px; font-size: 1.0625rem; text-wrap: pretty; }
.landing-feature p { margin: 0; color: var(--muted); font-size: .9375rem; }

.landing-showcase, .landing-raster-section { padding-block: clamp(40px, 6vw, 82px); scroll-margin-top: 20px; }
.landing-section-heading { max-width: 660px; margin-bottom: clamp(26px, 4vw, 46px); }
.landing-section-heading h2, .landing-closing h2 {
 margin: 0 0 12px;
 font-size: clamp(1.875rem, 3.9vw, 3rem);
 line-height: 1.15;
 letter-spacing: -.035em;
 text-wrap: balance;
}
.landing-section-heading > p, .landing-closing p {
 margin: 0;
 color: var(--muted);
 font-size: clamp(1rem, 1.8vw, 1.125rem);
 line-height: 1.55;
 text-wrap: pretty;
}
.landing-device-toggle {
 display: inline-grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 4px;
 max-width: 100%;
 margin-top: 18px;
 padding: 4px;
 border: 1px solid var(--landing-divider);
 border-radius: calc(var(--control-radius) + 4px);
 background: var(--surface);
}
.landing-device-toggle .landing-button {
 gap: 7px;
 min-height: var(--control-height);
 padding-inline: 12px;
 border-color: transparent;
 background: transparent;
 color: var(--muted);
}
.landing-device-toggle .landing-button:not(:disabled):hover { background: var(--selected); color: var(--ink); }
.landing-device-toggle .landing-button[aria-pressed=true] {
 border-color: var(--line);
 background: var(--selected);
 color: var(--ink);
}
.landing-device-toggle svg { display: block; flex: none; width: 18px; height: 18px; }
.landing-device-toggle [aria-pressed=true] svg { color: var(--accent); }
.landing-showcase-list { border-block: 1px solid var(--landing-divider); }
.landing-showcase-row {
 display: grid;
 align-items: center;
 gap: clamp(24px, 5vw, 68px);
 padding-block: clamp(26px, 5vw, 64px);
}
.landing-showcase-row + .landing-showcase-row { border-top: 1px solid var(--landing-divider); }
.landing-showcase-copy { min-width: 0; }
.landing-showcase-copy h3 {
 margin: 0 0 12px;
 font-size: clamp(1.375rem, 2.65vw, 2.125rem);
 line-height: 1.18;
 letter-spacing: -.028em;
 text-wrap: balance;
}
.landing-showcase-copy > p, .landing-raster-card p {
 margin: 0;
 color: var(--muted);
 line-height: 1.6;
 text-wrap: pretty;
}
.landing-showcase-copy .landing-kicker, .landing-section-heading .landing-kicker {
 margin: 0 0 10px;
 color: var(--accent);
 font-size: .75rem;
 font-weight: 700;
 letter-spacing: .1em;
 text-transform: uppercase;
}
.landing-feature-points {
 display: grid;
 gap: 9px;
 margin: 18px 0 0;
 padding-inline-start: 1.25em;
 color: var(--ink);
 line-height: 1.5;
}
.landing-feature-points li::marker { color: var(--accent); }
.landing-screen {
 justify-self: center;
 width: min(100%, 720px);
 min-width: 0;
 margin: 0;
}
.landing-screen img, .landing-raster-card img { display: block; width: 100%; height: auto; }
.landing-device:not([hidden]) { animation: landing-device-reveal var(--motion-in) ease-out both; }
@keyframes landing-device-reveal { from { opacity: .55; transform: translateY(3px); } }

.landing-phone-case {
 /* Match the dark app capture so the status area and Home indicator extend its chrome. */
 --phone-chrome: #1c2834;
 --phone-chrome-ink: #ecf4ff;
 --phone-edge: #65768a;
 --phone-corner: clamp(36px, 11vw, 48px);
 position: relative;
 width: min(calc(100% - 8px), 324px);
 margin-inline: auto;
 padding: clamp(6px, 2vw, 9px);
 border: 2px solid var(--phone-edge);
 border-radius: var(--phone-corner);
 background: #10161d;
 box-shadow: inset 0 0 0 1px #ffffff30, 0 16px 32px #0004;
}
.landing-phone-case::before, .landing-phone-case::after {
 position: absolute;
 inset-inline-start: -4px;
 width: 3px;
 height: 7%;
 border-radius: 3px 0 0 3px;
 background: var(--phone-edge);
 content: '';
}
.landing-phone-case::before { inset-block-start: 16%; }
.landing-phone-case::after { inset-block-start: 25%; }
.landing-phone-display {
 overflow: hidden;
 isolation: isolate;
 border-radius: calc(var(--phone-corner) - 11px);
 background: var(--phone-chrome);
 color: var(--phone-chrome-ink);
}
.landing-phone-status {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: space-between;
 aspect-ratio: 390 / 44;
 padding-inline: 8%;
 font-size: .6875rem;
 line-height: 1;
 font-variant-numeric: tabular-nums;
}
.landing-phone-status b { font-weight: 700; }
.landing-phone-status::after {
 position: absolute;
 inset-block-start: 50%;
 inset-inline-start: 50%;
 width: 30%;
 height: 62%;
 border-radius: 999px;
 background: #080c12;
 transform: translate(-50%, -50%);
 content: '';
}
.landing-phone-status-icons { display: flex; align-items: center; gap: 3px; }
.landing-phone-status-icons svg { display: block; width: 12px; height: 9px; }
.landing-phone-status-icons svg:last-child { width: 16px; }
.landing-phone-home { display: grid; place-items: center; aspect-ratio: 390 / 20; }
.landing-phone-home::after {
 width: 34%;
 height: 3px;
 border-radius: 999px;
 background: currentColor;
 content: '';
}
.landing-desktop-display {
 overflow: hidden;
 border: 1px solid var(--line);
 border-radius: var(--card-radius);
 background: var(--surface);
 box-shadow: 0 18px 34px color-mix(in srgb, var(--bg) 28%, transparent);
}
.landing-screen figcaption {
 margin: 14px auto 0;
 color: var(--muted);
 font-size: .875rem;
 line-height: 1.4;
 text-align: center;
}
@media (prefers-reduced-motion: reduce) {
 .landing-device:not([hidden]) { animation: none; }
}
.landing-raster-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
 gap: clamp(16px, 2.8vw, 30px);
}
.landing-raster-card {
 display: grid;
 align-content: start;
 min-width: 0;
 overflow: hidden;
 border: 1px solid var(--landing-divider);
 border-radius: var(--card-radius);
 background: var(--surface);
}
.landing-raster-card img { aspect-ratio: 3 / 2; object-fit: cover; }
.landing-raster-card > div { padding: clamp(18px, 2.6vw, 28px); }
.landing-raster-card h3 {
 margin: 0 0 8px;
 font-size: clamp(1.125rem, 1.8vw, 1.375rem);
 letter-spacing: -.02em;
 text-wrap: pretty;
}
.landing-closing { padding-block: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 72px); }
.landing-closing-panel {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 22px 32px;
 padding: clamp(24px, 4vw, 48px);
 border: 1px solid var(--landing-divider);
 border-radius: var(--card-radius);
 background: var(--surface);
}
.landing-closing-panel > div { max-width: 62ch; }

@media (min-width: 760px) {
 .landing-showcase-row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
 .landing-showcase-row-reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
 .landing-showcase-row-reverse .landing-screen { grid-column: 1; grid-row: 1; }
}

.landing-footer {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 4px 18px;
 min-height: 64px;
 padding-bottom: max(16px, env(safe-area-inset-bottom));
 color: var(--muted);
 font-size: .875rem;
}
.landing-footer .landing-footer-brand { color: var(--ink); }
.landing-footer p { margin: 0; }
.landing-footer-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0 20px;
 margin-inline-start: auto;
}
.landing-footer-links [aria-current=page] { color: var(--ink); text-decoration: underline; }

.landing-legal { padding-block: clamp(36px, 6vw, 80px) clamp(28px, 4vw, 48px); }
.landing-legal article { max-width: 680px; margin-inline: auto; }
.landing-legal-intro { padding-bottom: clamp(24px, 4vw, 36px); }
.landing-legal-intro h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: 16px; }
.landing-legal-intro p { font-size: clamp(1.0625rem, 2vw, 1.1875rem); }
.landing-legal-section { padding-block: clamp(20px, 3vw, 28px); border-top: 1px solid var(--landing-divider); }
.landing-legal-section h2 { text-wrap: pretty; }
.landing-legal p { color: var(--muted); }
.landing-install-icon { display: block; border-radius: 23%; margin-bottom: 18px; }
.landing-install-steps { padding-inline-start: 1.4em; margin-block: 14px 18px; }
.landing-install-steps li + li { margin-top: 8px; }
.landing-legal + .landing-footer { border-top: 1px solid var(--landing-divider); }

@media (max-width: 850px) {
 .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block-start: 40px; }
 .landing-intro h1 { max-width: 16ch; }
 .landing-visual { width: min(100%, 640px); }
 .landing-feature-grid { grid-template-columns: minmax(0, 1fr); }
 .landing-feature, .landing-feature:first-child { padding: 18px 0; }
 .landing-feature + .landing-feature { border-inline-start: 0; border-block-start: 1px solid var(--landing-divider); }
}
@media (max-width: 520px) {
 .landing-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 450px) {
 .landing-header-inner { min-height: calc(64px + env(safe-area-inset-top)); gap: 10px; }
 .landing-nav-detail { display: none; }
 .landing-intro h1 { margin-bottom: 16px; }
 .landing-intro > p:not(.landing-invitation) { margin-bottom: 20px; }
 .landing-artwork { border-radius: 18px; }
 .landing-footer { column-gap: 12px; }
 .landing-footer p { flex-basis: 100%; }
 .landing-footer-links { margin-inline-start: 0; }
}