/* Dynamic.ly v4 hero + statement. Replaces the v3 file (baseline kept in code/v3-baseline/). */
:root {
  --dl-page:#FAF7F2; --dl-card:#FFFDF8; --dl-ink:#1B1913;
  --dl-muted:#59524B; --dl-coral:#F45A3D; --dl-action:#C53724;
  --dl-ease:cubic-bezier(.22,1,.36,1);
}
.dl-transition { position:relative; isolation:isolate; background:var(--dl-page); color:var(--dl-ink); font-family:var(--dl-body); }
.dl-transition *, .dl-transition *::before, .dl-transition *::after { box-sizing:border-box; }
.dl-transition h1,.dl-transition h2 { margin:0; font-family:var(--dl-display); font-weight:500; letter-spacing:-.035em; }
.dl-transition p { margin:0; }
.dl-transition .eyebrow { font:500 12px/1.5 var(--dl-mono,monospace); letter-spacing:.14em; text-transform:uppercase; color:var(--dl-action); }
.dl-transition .body-copy { font-size:21px; line-height:1.43; color:var(--dl-muted); }
.dl-transition .text-link { display:inline-flex; width:max-content; align-items:center; padding:8px 0; border-bottom:1.5px solid currentColor; color:var(--dl-action); font-size:18px; font-weight:600; text-decoration:none; }
.dl-transition .caption { font-size:13px; line-height:1.45; color:var(--dl-muted); }
.dl-transition a:focus-visible { outline:3px solid var(--dl-action); outline-offset:5px; }
.dl-stage { position:relative; }
/* No opacity or transform on this ancestor. Each child owns a different plane. */
.dl-hero-surface { position:relative; overflow:clip; min-height:max(900px,100svh); }
.dl-field,.dl-atelier,.dl-wave { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; }
.dl-field { z-index:0; }
.dl-atelier { z-index:5; opacity:.70; transform-origin:75% 58%; }
.dl-veil { display:none; }
.dl-wave-back { z-index:20; }
.dl-wave-front { z-index:21; opacity:.76; }
.dl-wave-art { display:block; width:100%; height:100%; object-fit:fill; }
.dl-hero-grid {
  --screen-w:300px;
  position:relative; z-index:30; display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr) var(--screen-w) minmax(0,.82fr);
  max-width:1440px; margin:auto; column-gap:clamp(30px,3.6vw,54px);
  padding:150px clamp(24px,5.6vw,80px) 110px; min-height:900px;
}
.dl-hero-left,.dl-hero-right { min-width:0; }
.dl-hero-left h1 { max-width:440px; margin-top:20px; font-size:clamp(44px,4vw,60px); line-height:1.035; }
.dl-hero-right { padding-top:42px; }
.dl-hero-right>.body-copy { max-width:290px; }
.dl-hero-right>.text-link { margin-top:16px; }
.dl-hero-device { position:relative; margin-top:6px; pointer-events:none; }
/* Geometry from assets/art/hand-phone-geometry.json (1024x1536 canvas, 470x1035 aperture at 357,126). */
.dl-hand-slot { position:relative; width:var(--screen-w,300px); height:calc(var(--screen-w,300px) * 2.2021276596); overflow:visible; }
.dl-hand-canvas { position:absolute; width:calc(var(--screen-w,300px) * 2.1787234043); aspect-ratio:1024/1536; left:calc(var(--screen-w,300px) * -.7595744681); top:calc(var(--screen-w,300px) * -.2680851064); isolation:isolate; }
.dl-hand-art { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.dl-screen-window { position:absolute; left:34.86328125%; top:8.203125%; width:45.8984375%; height:67.3828125%; z-index:1; background:linear-gradient(#FAF7F2,#F6F3EE); mask-image:url('../assets/art/phone-aperture-mask.png'); mask-size:100% 100%; mask-repeat:no-repeat; -webkit-mask-image:url('../assets/art/phone-aperture-mask.png'); -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat; }
.dl-screen-window img { display:block; width:100%; height:100%; object-fit:contain; }
.dl-price-anchor { position:relative; display:block; width:max-content; margin-top:42px; }
.dl-hero-left .dl-price-anchor { margin-left:clamp(0px,3vw,46px); }
.dl-hero-right .dl-price-anchor { margin-top:60px; }
.dl-price-card { min-width:180px; padding:18px 24px 21px; border-radius:20px; border:1px solid rgba(255,255,255,.92); background:rgba(255,253,248,.79); box-shadow:0 12px 35px rgba(79,42,23,.075); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:var(--dl-ink); }
.dl-price-card span { display:block; font-size:16px; }
.dl-price-card strong { display:block; margin:5px 0; font:500 46px/1 var(--dl-display); letter-spacing:-.025em; }
.dl-price-card small { display:block; font-size:14px; color:var(--dl-muted); }
.dl-hero-bottom { position:absolute; z-index:35; bottom:32px; left:clamp(24px,5.6vw,80px); right:clamp(24px,5.6vw,80px); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.dl-hero-bottom a { color:var(--dl-ink); text-decoration:none; font-size:16px; }
/* Full statement screen, INCLUDING no-JS, narrow and reduced-motion modes. */
.dl-statement { position:relative; overflow:clip; z-index:40; display:grid; place-items:center; min-height:100svh; padding:110px 24px 120px; background:var(--dl-page); text-align:center; scroll-margin-top:0; }
.dl-statement-content { position:relative; max-width:1060px; margin:auto; }
.dl-statement-content::before { content:''; position:absolute; z-index:-1; inset:-100px -100px; pointer-events:none; background:radial-gradient(ellipse at 35% 50%,rgba(244,90,61,.045),transparent 65%); }
.dl-statement-dot { width:10px; height:10px; margin:0 auto 32px; border-radius:50%; background:var(--dl-coral); }
.dl-statement h2 { max-width:1020px; font-size:clamp(36px,4.5vw,72px); line-height:1.13; text-wrap:balance; }
.dl-statement h2:focus { outline:none; }
.dl-statement-line { display:block; }
/* Enhanced desktop: 1 viewport plus 2.6 viewports of reversible scroll travel. */
.dl-transition.is-enhanced { height:var(--scene-span,360svh); }
.dl-transition.is-enhanced .dl-stage { position:sticky; top:0; height:100svh; overflow:clip; isolation:isolate; }
.dl-transition.is-enhanced .dl-hero-surface { position:absolute; inset:0; height:100%; min-height:0; overflow:visible; }
.dl-transition.is-enhanced .dl-hero-grid { --screen-w:clamp(205px,calc((100svh - 230px) / 2.2021276596),300px); min-height:0; height:100%; padding-top:clamp(112px,16svh,150px); }
.dl-transition.is-enhanced .dl-atelier { opacity:var(--atelier-opacity,.70); transform:translate3d(0,var(--atelier-y,0px),0) scale(var(--atelier-scale,1)); }
.dl-transition.is-enhanced .dl-veil { display:block; position:absolute; inset:0; z-index:10; background:var(--dl-page); opacity:var(--veil-opacity,0); pointer-events:none; }
.dl-transition.is-enhanced .dl-wave-back { opacity:var(--back-opacity,1); transform:translate3d(0,var(--back-y,0px),0); }
.dl-transition.is-enhanced .dl-wave-front { opacity:var(--front-opacity,.76); transform:translate3d(0,var(--front-y,0px),0); }
.dl-transition.is-enhanced [data-hero-copy] { opacity:var(--copy-opacity,1); transform:translate3d(0,var(--copy-y,0px),0); }
.dl-transition.is-enhanced .dl-hero-device { transform:translate3d(0,var(--phone-y,0px),0); }
.dl-transition.is-enhanced .dl-hero-left .dl-price-anchor { transform:translate3d(0,var(--current-y,0px),0); }
.dl-transition.is-enhanced .dl-hero-right .dl-price-anchor { transform:translate3d(0,var(--proposed-y,0px),0); }
.dl-transition.is-enhanced .dl-statement { position:absolute; inset:0; height:100%; min-height:0; background:transparent; padding:100px 24px 145px; opacity:var(--statement-opacity,0); transform:translate3d(0,var(--statement-y,28px),0); pointer-events:none; }
/* Ambient drift affects only the inner artwork, never the scroll-transform wrapper. */
@keyframes dl-wave-drift { from{transform:translate3d(-4px,0,0) scaleX(1.015)} to{transform:translate3d(4px,-3px,0) scaleX(1.015)} }
.is-enhanced .dl-wave-art { animation:dl-wave-drift 22s ease-in-out infinite alternate; animation-play-state:paused; }
.is-enhanced .dl-wave-front .dl-wave-art { animation-duration:18s; animation-delay:-4s; }
.is-enhanced.is-in-view .dl-wave-art { animation-play-state:var(--ambient-play-state,running); }
#product { position:relative; z-index:1; background:var(--dl-page); }
/* Seam: the lowered waves would otherwise end in a hard clip line as the stage releases. */
#product::before { content:''; position:absolute; left:0; right:0; top:-140px; height:140px; pointer-events:none; background:linear-gradient(to bottom,rgba(250,247,242,0),var(--dl-page)); }
@media(min-width:1100px) and (max-width:1250px) {
  .dl-hero-grid { column-gap:30px; }
  .dl-hero-right>.body-copy { font-size:18px; }
  .dl-price-card { min-width:158px; padding:16px 19px; }
  .dl-hero-left .dl-price-anchor { margin-left:0; }
}
@media(max-width:1099px) {
  .dl-hero-surface { min-height:0; }
  .dl-hero-grid { grid-template-columns:1fr 1fr; gap:28px; min-height:0; padding-top:122px; padding-bottom:72px; }
  .dl-hero-left { grid-column:1; }
  .dl-hero-right { grid-column:2; grid-row:1; padding-top:32px; }
  .dl-hero-left h1 { font-size:48px; }
  .dl-hero-device { grid-row:2; grid-column:1/-1; justify-self:center; margin:30px 0 130px; }
  .dl-hero-left .dl-price-anchor { margin-left:0; }
  .dl-hero-left .dl-price-anchor,.dl-hero-right .dl-price-anchor { margin-top:25px; }
}
@media(max-width:719px) {
  .dl-hero-grid { --screen-w:min(250px,65vw); grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px; padding:112px 24px 94px; }
  .dl-hero-left,.dl-hero-right { display:contents; }
  .dl-hero-left>.eyebrow { grid-row:1; grid-column:1/-1; font-size:10px; }
  .dl-hero-left>h1 { grid-row:2; grid-column:1/-1; margin-top:18px; font-size:clamp(36px,10.5vw,42px); }
  .dl-hero-right>.body-copy { grid-row:3; grid-column:1/-1; max-width:100%; margin-top:20px; font-size:18px; }
  .dl-hero-right>.text-link { grid-row:4; grid-column:1/-1; justify-self:start; margin-top:12px; font-size:17px; }
  .dl-hero-left>.dl-price-anchor,.dl-hero-right>.dl-price-anchor { grid-row:5; width:auto; margin:28px 0 0; }
  .dl-hero-left>.dl-price-anchor { grid-column:1; }
  .dl-hero-right>.dl-price-anchor { grid-column:2; }
  .dl-price-card { min-width:0; min-height:138px; padding:16px; }
  .dl-price-card span { font-size:14px; }
  .dl-price-card strong { font-size:38px; }
  .dl-price-card small { font-size:12px; }
  .dl-hero-device { grid-row:6; grid-column:1/-1; justify-self:center; margin:40px auto 90px; }
  .dl-hero-bottom { left:24px; right:24px; bottom:24px; align-items:end; gap:16px; }
  .dl-hero-bottom a { font-size:14px; }
  .dl-hero-bottom .caption { font-size:11px; }
  .dl-statement { padding:105px 24px; }
  .dl-statement h2 { font-size:clamp(32px,8.8vw,38px); }
  .dl-statement-line { display:inline; }
  .dl-statement-line + .dl-statement-line::before { content:' '; }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto!important} .dl-transition .dl-wave-art{animation:none!important} }