/* Cosmic Deepsky — landing page styles
   Built for embedding inside cosmic-watch.com's shared header/footer.
   This stylesheet only styles the page content below; it does not
   touch nav/header/footer, which belong to the site template. */

:root{
  --bg:#070b14;
  --bg-alt:#0b1220;
  --panel:#0f1729;
  --panel-border: #00756C;
  /* device-frame treatment (hero tablet, phone mockups, video frame): a
     plain grey outer ring, over the same dark navy panel fill used
     elsewhere on the page */
  --frame-border:#787880;
  --frame-fill:#0f1729;
  --text:#eef2fb;
  --text-dim:rgba(255,255,255,.9);
  --text-faint:#6b7690;
  --cyan:#4fe8d6;
  --violet:#8f7bf0;
  --grad: linear-gradient(135deg,#4fe8d6 0%, #6fb6f0 45%, #8f7bf0 100%);

  /* object-type accent colors, lifted from the app's own DSO color system */
  --c-galaxy:#4fe8d6;
  --c-open-cluster:#f4d345;
  --c-globular:#aeb6c4;
  --c-nebula:#f2924a;
  --c-planetary-nebula:#e565d0;
  --c-snr:#ef5b5b;

  /* motion: one weighted easing curve, used everywhere instead of ease/linear */
  --ease:cubic-bezier(0.32,0.72,0,1);

  /* spacing scale — every margin/padding/gap in this file resolves to one of these */
  --sp-25:2px; --sp-50:4px; --sp-75:8px; --sp-100:12px; --sp-200:16px;
  --sp-300:24px; --sp-400:32px; --sp-500:40px; --sp-600:48px; --sp-700:64px;
  --sp-800:80px; --sp-900:96px;
}

/* Reset the browser's default body margin — without this a white
   strip shows around the page edges. Harmless to keep even once this
   drops into the site template, since most site resets already zero
   this out. */
body{ margin:0; }

@media (prefers-reduced-motion: reduce){
  #cds-landing *{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

#cds-landing{
  position:relative;
  isolation:isolate;
  background:var(--bg);
  color:var(--text);
  font-family:'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
#cds-landing *{ box-sizing:border-box; }
#cds-landing h1,
#cds-landing h2,
#cds-landing h3{
  font-family:'Oxanium', sans-serif; font-weight:700; text-wrap:balance;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#cds-landing p{ text-wrap:pretty; }
#cds-landing a{ color:inherit; }
#cds-landing img{ max-width:100%; display:block; }
#cds-landing .wrap{ max-width:1180px; margin:0 auto; padding:0 var(--sp-300); }
#cds-landing section{ position:relative; }

#cds-landing a:focus-visible,
#cds-landing button:focus-visible,
#cds-landing input:focus-visible,
#cds-landing [tabindex]:focus-visible,
#cds-landing .demo-toggle:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- scroll reveal (IntersectionObserver driven, see js/script.js) ---------- */
#cds-landing [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  filter:blur(6px);
  transition:opacity 900ms var(--ease), transform 900ms var(--ease), filter 900ms var(--ease);
}
#cds-landing [data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* ---------- starfield background ---------- */
#cds-landing .stars{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #ffffff90 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 65% 15%, #ffffff70 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 60%, #ffffff80 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 80%, #ffffff60 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 65%, #ffffff70 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 85%, #ffffff60 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 45%, #ffffff50 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 10%, #ffffff70 50%, transparent 51%);
  background-repeat:repeat; background-size:600px 600px;
  opacity:.6;
}

/* subtle grain overlay — texture instead of a gradient to break up flat panels */
#cds-landing .grain{ position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- hero ---------- */
/* Split layout: copy (through the download buttons) on one side, a
   single phone mockup with a real screenshot on the other. Stacks to
   copy-then-phone on mobile. */
/* top padding clears the site's fixed header (~82px) on top of the
   section's own breathing room, so the hero logo never sits under the nav */
#cds-landing .hero{ position:relative; overflow:hidden; padding:calc(82px + var(--sp-500)) 0 var(--sp-600); }
/* Logo centered above everything, then a divider, then the two-column layout */
#cds-landing .hero-top{ position:relative; z-index:1; text-align:center; }
#cds-landing .hero-logo{ height:64px; width:auto; margin:0 auto; }
#cds-landing .hero-divider{ height:1px; background:var(--panel-border); margin:var(--sp-300) 0 0; }

#cds-landing .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:var(--sp-600); align-items:center; margin-top:var(--sp-600); }
#cds-landing .hero-copy{ text-align:center; }
#cds-landing .eyebrow{ text-transform:uppercase; letter-spacing:.16em; font-size:14px; font-weight:700; color:var(--cyan); margin:0 0 var(--sp-200); }
#cds-landing .eyebrow--credit{
  position:relative; z-index:1; text-align:center; color:#fff;
  margin:var(--sp-600) 0 0; padding-top:var(--sp-400);
  /* full-width hairline, same treatment as the divider above .feature-list */
  border-top:1px solid var(--panel-border);
}
#cds-landing .eyebrow--credit::after{
  content:""; display:block; width:40px; height:2px; margin:var(--sp-200) auto 0;
  background:#fff;
}
#cds-landing .hero-trust{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--sp-100) var(--sp-200);
  margin:var(--sp-200) 0 0; font-size:17px; font-weight:400; letter-spacing:.04em; color:var(--c-open-cluster);
}
#cds-landing .hero-trust span{ white-space:nowrap; }
#cds-landing .hero-copy h1{
  font-size:28px; line-height:34px; margin:0 auto var(--sp-200); max-width:560px; font-weight:700;
}
#cds-landing .hero-copy h1 .line{ display:block; }
#cds-landing .hero-copy h1 .line:last-child{ font-size:36px; line-height:40px; }
#cds-landing .hero-copy h1 .line + .line{ margin-top:var(--sp-100); }
#cds-landing .hero-copy p.sub{ color:var(--text-dim); font-size:20px; line-height:30px; max-width:520px; margin:0 auto var(--sp-300); }
#cds-landing .store-badges{ display:flex; gap:var(--sp-200); justify-content:center; flex-wrap:wrap; }
#cds-landing .store-badge{ display:inline-flex; transition:transform 300ms var(--ease), box-shadow 300ms var(--ease); }
#cds-landing .store-badge:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px #000a; }
#cds-landing .store-badge:active{ transform:scale(0.98) translateY(0); }
#cds-landing .store-badge img{ height:44px; width:auto; }

/* Hero device shot: a real screenshot given a tilted, 3D perspective
   frame instead of sitting flat, so it reads as a floating device
   rather than a pasted-in rectangle. Download buttons sit underneath it.
   The tilt itself is driven by scroll position (see js/script.js), easing
   from square-on toward a steep angle as the hero scrolls past. The values
   below are just the resting/no-JS starting pose. */
#cds-landing .hero-visual{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-400); perspective:1400px; }
#cds-landing .device-frame{
  width:min(420px, 86vw);
  border-radius:16px; overflow:hidden; background:var(--frame-fill);
  /* outer bezel ring, drawn outside the frame instead of eating into it —
     no inner border, only this outer one */
  box-shadow:0 0 0 6px var(--frame-fill), 0 0 0 7px var(--frame-border), 0 40px 90px -24px #000d;
  transform:rotateY(6deg) rotateX(-4deg) rotateZ(1.5deg) scale(1.04);
  transform-style:preserve-3d;
  will-change:transform;
}
#cds-landing .device-frame img{ width:100%; display:block; aspect-ratio:2170/1080; object-fit:cover; }

/* Tighter vertical rhythm on mobile: logo closer to the top, less
   room between the copy and the screenshot below it. */
@media (max-width:859px){
  #cds-landing .hero{ padding-top:calc(82px + var(--sp-400)); }
  #cds-landing .hero-grid{ gap:var(--sp-400); margin-top:var(--sp-400); }
}

@media (min-width:640px){
  #cds-landing .hero-copy h1{ font-size:34px; line-height:1.1; }
  #cds-landing .hero-copy h1 .line:last-child{ font-size:48px; line-height:1; }
}
@media (min-width:860px){
  #cds-landing .hero-logo{ height:80px; }
  #cds-landing .hero-grid{ grid-template-columns:1.1fr 1fr; gap:var(--sp-500); text-align:left; }
  #cds-landing .hero-copy{ text-align:left; }
  #cds-landing .hero-copy h1,
  #cds-landing .hero-copy p.sub{ margin-left:0; margin-right:0; }
  #cds-landing .hero-copy h1 .line:last-child{ text-align:right; }
  #cds-landing .device-frame{ width:min(560px, 46vw); }
  #cds-landing .hero-visual{ gap:var(--sp-600); }
}
@media (min-width:1024px){
  #cds-landing .hero-copy h1{ font-size:40px; line-height:1.1; }
  #cds-landing .hero-copy h1 .line:last-child{ font-size:60px; line-height:1; }
}

/* ---------- interface split section ---------- */
/* Image-led: the sky photo runs big and full-width, copy sits centered
   underneath it instead of competing in a side-by-side column. */
#cds-landing .split{ padding:var(--sp-400) 0 var(--sp-600); }
#cds-landing .split .wrap{ display:flex; flex-direction:column; gap:var(--sp-500); align-items:center; }
#cds-landing .split-copy{ text-align:center; max-width:640px; }
#cds-landing .split-copy h2{ font-size:30px; line-height:36px; font-weight:700; margin:0 0 var(--sp-200); }
#cds-landing .split-copy p{ color:var(--text-dim); font-size:20px; line-height:1.75; margin:0 0 var(--sp-200); }
#cds-landing .split-visual{ display:flex; justify-content:center; width:100%; }
#cds-landing .phone-real{ width:100%; max-width:1400px; border-radius:10px; overflow:hidden; background:var(--frame-fill); box-shadow:0 30px 80px -20px #000c, 0 0 0 8px var(--frame-fill), 0 0 0 9px var(--frame-border); }
#cds-landing .phone-real img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
@media (min-width:1024px){ #cds-landing .split-copy h2{ font-size:36px; line-height:40px; } }

/* ---------- interaction ---------- */
#cds-landing .interaction{ padding:var(--sp-400) 0; }
#cds-landing .interaction-grid{ display:flex; flex-direction:column; gap:var(--sp-400); align-items:center; }
#cds-landing .interaction-visual{ position:relative; width:100%; border-radius:10px; overflow:hidden; background:var(--frame-fill); box-shadow:0 30px 80px -20px #000c, 0 0 0 8px var(--frame-fill), 0 0 0 9px var(--frame-border); }
#cds-landing .interaction-visual img{ width:100%; display:block; aspect-ratio:2166/1080; object-fit:cover; }
/* soft dark scrim so the photo reads a touch moodier / lower-contrast than the raw source */
#cds-landing .interaction-visual::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 15%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 100%); }
#cds-landing .interaction-copy{ text-align:center; max-width:640px; }
#cds-landing .interaction h2{ font-size:30px; line-height:36px; font-weight:700; margin:var(--sp-100) 0 var(--sp-200); }
#cds-landing .interaction p:not(.eyebrow){ color:var(--text-dim); font-size:20px; line-height:1.75; margin:0; }
@media (min-width:1024px){ #cds-landing .interaction h2{ font-size:36px; line-height:40px; } }
@media (min-width:860px){
  #cds-landing .interaction-grid{ flex-direction:row; align-items:center; gap:var(--sp-700); text-align:left; }
  #cds-landing .interaction-visual{ flex:1 1 55%; }
  #cds-landing .interaction-copy{ flex:1 1 45%; text-align:left; max-width:none; }
}

/* ---------- features ---------- */
#cds-landing .features{ padding:var(--sp-200) 0 var(--sp-900); }
#cds-landing .section-head{ text-align:center; max-width:680px; margin:0 auto var(--sp-600); }
#cds-landing .section-head h2{ font-size:30px; line-height:36px; font-weight:700; margin:var(--sp-100) 0 0; }
@media (min-width:1024px){ #cds-landing .section-head h2{ font-size:36px; line-height:40px; } }

/* Shared swipeable-carousel mechanics (feature cards, gallery screenshots):
   a horizontal scroll-snap strip that peeks the next item to signal it's
   swipeable, draggable with the mouse too (js/script.js), which each
   section below turns into a real grid from tablet width up. */
#cds-landing .swipe-grid{
  display:flex; gap:var(--sp-300); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  cursor:grab; user-select:none; scroll-behavior:smooth;
  /* small vertical buffer so overflow-y (forced to "auto" by the browser
     the moment overflow-x isn't "visible" — a real CSS overflow rule, not
     a bug) never clips a card's own box-shadow ring or reveal transform.
     Each .swipe-grid instance below offsets this with a matching -6px top
     margin so it doesn't visually shift anything. */
  padding-top:6px; padding-bottom:6px;
}
#cds-landing .swipe-grid::-webkit-scrollbar{ display:none; }
/* stop images from starting a native "drag the image" gesture, which
   otherwise hijacks a mouse-drag before js/script.js sees it move */
#cds-landing .swipe-grid img{ -webkit-user-drag:none; user-drag:none; }
/* dragging with the mouse (js/script.js): kill snap AND smoothing so it
   tracks the pointer directly instead of fighting it; once released, snap
   and smoothing come back so the settle into place eases instead of jumping */
#cds-landing .swipe-grid.is-dragging{ scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; }

#cds-landing .feature-grid{ margin:-6px calc(var(--sp-300) * -1) var(--sp-600); padding:6px var(--sp-300) calc(var(--sp-100) + 6px); }
#cds-landing .feature-card{
  flex:0 0 80%; scroll-snap-align:center;
  background:rgba(0,0,0,.5); border:1px solid var(--panel-border); border-radius:16px; padding:var(--sp-400);
}
#cds-landing .feature-icon{ width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-300); }
#cds-landing .feature-icon svg{ width:26px; height:26px; }
#cds-landing .feature-card h3{ font-size:20px; line-height:28px; font-weight:700; margin:0 0 var(--sp-100); }
#cds-landing .feature-card p{ color:var(--text-dim); font-size:18px; line-height:1.7; margin:0; }

@media (min-width:640px){
  #cds-landing .feature-card{ flex:0 0 46%; }
}
@media (min-width:860px){
  #cds-landing .feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0 0 var(--sp-600); padding:0; cursor:auto; }
  #cds-landing .feature-card{ flex:none; }
}

/* ---------- spotlight (interactive "make the invisible visible" demo) ---------- */
/* This is the one feature that earns a real card: it's the wow-moment,
   interactive, and needs visual weight to stand apart from the list above/below. */
#cds-landing .spotlight{
  margin:var(--sp-500) 0; background:rgba(0,0,0,.5); border:1px solid var(--panel-border);
  border-radius:16px; padding:var(--sp-200); display:grid; grid-template-columns:1fr 1.15fr; gap:var(--sp-300);
  align-items:center; position:relative; overflow:hidden;
}
#cds-landing .spotlight-copy p.eyebrow-mini{ text-transform:uppercase; letter-spacing:.12em; font-size:14px; font-weight:700; color:var(--cyan); margin:0 0 var(--sp-100); }
#cds-landing .spotlight-copy h3{ font-size:24px; line-height:32px; font-weight:700; margin:0 0 var(--sp-200); }
#cds-landing .spotlight-copy p{ color:var(--text-dim); font-size:20px; line-height:1.7; margin:0; }
#cds-landing .spotlight-demo{ background:rgba(0,0,0,.5); border:1px solid var(--panel-border); border-radius:10px; padding:var(--sp-200); position:relative; overflow:hidden; }
#cds-landing .sky-demo{ position:relative; height:280px; border-radius:8px; background:#000; overflow:hidden; margin-bottom:var(--sp-200); }
/* .obj is just the sized/positioned circle; its own opacity carries the
   overall zoom/brightness fade. The colored mark and the real photo are
   separate child layers underneath so they can crossfade independently
   of that overall opacity instead of multiplying through it. */
/* clip-path instead of overflow:hidden for the circular mask: overflow:hidden
   forces the element onto its own isolated compositing layer, which silently
   breaks mix-blend-mode:screen between this object and its siblings (each
   would only blend with itself). clip-path clips without that isolation. */
#cds-landing .obj{ position:absolute; top:50%; clip-path:circle(50%); transform:translate(-50%,-50%);
  transition:width 300ms var(--ease), height 300ms var(--ease), opacity 300ms var(--ease); }
#cds-landing .obj.cluster{ left:20%; }
#cds-landing .obj.nebula{ left:50%; }
#cds-landing .obj.galaxy{ left:80%; }
#cds-landing .obj-dot,
#cds-landing .obj-img{ position:absolute; inset:0; transition:opacity 300ms var(--ease); }
/* markers are just a contour ring in the object's own DSO color, not a
   filled glow, so they read as a "mark on a map" rather than the object itself */
#cds-landing .obj-dot{ border-radius:50%; border:2px solid; background:transparent; mix-blend-mode:screen; }
#cds-landing .obj.cluster .obj-dot{ border-color:var(--c-open-cluster); }
#cds-landing .obj.nebula .obj-dot{ border-color:var(--c-nebula); }
#cds-landing .obj.galaxy .obj-dot{ border-color:var(--c-galaxy); }
/* real photo, crossfaded in over the colored mark once the object is
   big enough on screen to actually be recognizable (see js/script.js) */
#cds-landing .obj-img{ background-size:cover; background-position:center; opacity:0; mix-blend-mode:screen; }
#cds-landing .obj.cluster .obj-img{ background-image:url('../images/size_M45_starcluster.jpg'); }
#cds-landing .obj.nebula .obj-img{ background-image:url('../images/size_M42_orion_nebula.jpg'); }
#cds-landing .obj.galaxy .obj-img{ background-image:url('../images/size_M83_galaxy.jpg'); }
#cds-landing .demo-label{ position:absolute; top:calc(50% + 95px); font-size:13px; color:var(--text-faint);
  transform:translateX(-50%); text-align:center; }
#cds-landing .demo-label.cluster{ left:20%; }
#cds-landing .demo-label.nebula{ left:50%; }
#cds-landing .demo-label.galaxy{ left:80%; }
#cds-landing .demo-controls{ display:flex; flex-direction:column; gap:var(--sp-200); }
#cds-landing .demo-row{ display:flex; align-items:center; gap:var(--sp-200); }
#cds-landing .demo-row label{ font-size:15px; color:var(--text-dim); min-width:64px; }
#cds-landing .demo-row input[type=range]{ flex:1; accent-color:var(--cyan); height:4px; cursor:pointer; }
#cds-landing .demo-val{ font-size:15px; font-weight:700; min-width:32px; text-align:right; font-variant-numeric:tabular-nums; }
#cds-landing .demo-toggle{ position:relative; width:38px; height:21px; background:var(--panel);
  border:1px solid var(--panel-border); border-radius:11px; cursor:pointer; flex-shrink:0;
  transition:background 300ms var(--ease), border-color 300ms var(--ease); }
#cds-landing .demo-toggle:hover{ border-color:var(--cyan); }
#cds-landing .demo-toggle::after{ content:''; position:absolute; top:2px; left:2px; width:15px; height:15px;
  border-radius:50%; background:var(--text-dim); transition:transform 300ms var(--ease), background 300ms var(--ease); }
#cds-landing .demo-toggle.on{ background:color-mix(in srgb, var(--cyan) 18%, transparent); border-color:var(--cyan); }
#cds-landing .demo-toggle.on::after{ transform:translateX(17px); background:var(--cyan); }
#cds-landing .demo-caption{ margin-top:var(--sp-200); padding-top:var(--sp-200); border-top:1px solid var(--panel-border);
  font-size:15px; color:var(--text-dim); line-height:1.6; min-height:40px; }

@media (max-width:860px){
  #cds-landing .spotlight{ grid-template-columns:1fr; }
  /* even tighter than the (already tightened) desktop default */
  #cds-landing .spotlight{ padding:var(--sp-100); border-radius:12px; gap:var(--sp-200); }
  #cds-landing .spotlight-demo{ padding:var(--sp-100); border-radius:8px; }
  #cds-landing .sky-demo{ height:220px; }
}

/* ---------- data trust strip ---------- */
/* Back to the plain band (background + top/bottom hairlines), just inset
   from the page edges with margin instead of stretching edge to edge. */
#cds-landing .data-strip{
  width:calc(100% - var(--sp-300) * 2); max-width:1180px; margin:var(--sp-500) auto;
  padding:var(--sp-500) 0;
  background:rgba(0,0,0,.5); border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border);
  position:relative; overflow:hidden;
}
/* pills as illustration: stacked pills-then-text on mobile, pills as a
   left-hand visual with the copy alongside it on desktop */
#cds-landing .data-strip-grid{ display:flex; flex-direction:column; gap:var(--sp-400); align-items:center; max-width:900px; width:100%; position:relative; z-index:1; margin:0 auto; box-sizing:border-box; }
#cds-landing .data-strip-copy{ text-align:center; }
#cds-landing .data-strip h2{ font-size:24px; line-height:32px; font-weight:700; margin:var(--sp-100) 0 var(--sp-200); }
#cds-landing .data-strip p{ color:var(--text-dim); font-size:17px; line-height:1.65; margin:0 0 var(--sp-200); }
#cds-landing .data-strip p:last-of-type{ margin-bottom:0; }
#cds-landing .data-strip p .hl{ color:var(--text); font-weight:500; }
#cds-landing .data-strip p a{ color:var(--cyan); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
#cds-landing .source-row{ display:flex; flex-wrap:wrap; gap:var(--sp-100); justify-content:center; }
#cds-landing .source-chip{ border:1px solid var(--panel-border); color:var(--text-dim); font-size:14.5px; font-weight:400;
  padding:9px 16px; border-radius:6px; letter-spacing:.02em; transition:border-color 300ms var(--ease), color 300ms var(--ease); }
#cds-landing .source-chip:hover{ border-color:var(--cyan); color:var(--text); }
@media (min-width:768px){ #cds-landing .data-strip h2{ font-size:28px; } }
@media (min-width:860px){
  /* keep the 1180px .wrap max-width (don't lift it) and let the flex
     children actually shrink within it instead of forcing an overflow */
  #cds-landing .data-strip-grid{ flex-direction:row; align-items:center; gap:var(--sp-600); }
  #cds-landing .source-row{ flex:1 1 40%; min-width:0; justify-content:flex-start; }
  #cds-landing .data-strip-copy{ flex:1 1 60%; min-width:0; text-align:left; }
}

/* ---------- gallery ---------- */
#cds-landing .gallery{ padding:var(--sp-600) 0; }
/* Same swipeable carousel behavior as .feature-grid, just without the
   card chrome — each item is only the phone mockup + its own caption. */
#cds-landing .gallery-grid{ gap:var(--sp-400); margin:-6px calc(var(--sp-300) * -1) 0; padding:6px var(--sp-300) calc(var(--sp-100) + 6px); }
#cds-landing .gallery-grid > div{ flex:0 0 80%; scroll-snap-align:center; }
#cds-landing .mock-phone{ background:var(--frame-fill); border-radius:24px;
  box-shadow:0 0 0 1px var(--frame-border);
  padding:var(--sp-200); position:relative; overflow:hidden;
  transition:transform 500ms var(--ease), box-shadow 500ms var(--ease); }
#cds-landing .mock-phone:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px var(--cyan); }
/* aspect-ratio lives on the screen itself (set inline per screenshot), not
   the phone frame, so the bezel padding wraps snugly around it instead of
   distorting the ratio the frame was given */
#cds-landing .mock-screen{ width:100%; border-radius:10px; overflow:hidden; position:relative; background:var(--bg); }
#cds-landing .mock-screen img{ width:100%; height:100%; display:block; object-fit:cover; }
#cds-landing .mock-caption{ text-align:center; margin-top:var(--sp-200); color:var(--text-dim); font-size:15px; font-weight:600; }
#cds-landing .dot{ position:absolute; border-radius:50%; }
#cds-landing .ring{ position:absolute; border-radius:50%; border:1.5px solid; opacity:.85; }
@media (min-width:640px){ #cds-landing .gallery-grid > div{ flex:0 0 46%; } }
@media (min-width:860px){
  #cds-landing .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); overflow:visible; margin:0; padding:0; cursor:auto; }
  #cds-landing .gallery-grid > div{ flex:none; }
}

/* ---------- perspective (history) ---------- */
/* A compact addendum, not a full showcase section: a small timeline with
   full (uncropped, unbordered) images as its markers, threaded on a plain
   white connector line — vertical (thumb-left, text-right) on mobile,
   horizontal (thumb-top, text-below) from tablet width up. */
/* back to the plain band, just inset from the page edges with margin
   instead of stretching edge to edge */
#cds-landing .perspective{
  width:calc(100% - var(--sp-300) * 2); max-width:1180px; margin:var(--sp-500) auto;
  padding:var(--sp-400) 0;
  background:rgba(0,0,0,.3); border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border);
}
#cds-landing .perspective h2{ text-align:center; max-width:580px; margin:0 auto var(--sp-400); font-size:22px; line-height:1.3; }
#cds-landing .persp-timeline{ position:relative; display:flex; flex-direction:column; gap:var(--sp-300); max-width:640px; margin:0 auto; }
#cds-landing .persp-timeline::before{ content:""; position:absolute; left:66px; top:4px; bottom:4px; width:1px; background:var(--text-dim); opacity:.6; }
#cds-landing .persp-item{ position:relative; display:flex; align-items:center; gap:var(--sp-200); }
#cds-landing .persp-thumb{ position:relative; z-index:1; flex:none; width:132px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--text-dim) 60%, transparent); background:var(--bg); overflow:hidden; }
#cds-landing .persp-thumb img{ width:100%; height:auto; display:block; mix-blend-mode:screen; }
#cds-landing .persp-item p{ margin:0; color:var(--text-dim); font-size:14px; line-height:1.55; }
#cds-landing .persp-yr{ color:var(--cyan); font-weight:700; }
#cds-landing .persp-closing{ text-align:center; max-width:640px; margin:var(--sp-400) auto 0; font-weight:600; font-size:16px; line-height:1.5; color:var(--text); }
@media (min-width:768px){
  #cds-landing .perspective h2{ font-size:26px; }
  #cds-landing .persp-timeline{ flex-direction:row; align-items:flex-start; max-width:none; gap:var(--sp-200); }
  #cds-landing .persp-timeline::before{ left:0; right:0; top:88px; bottom:auto; height:1px; width:auto; }
  #cds-landing .persp-item{ flex-direction:column; flex:1 1 0; min-width:0; text-align:center; gap:var(--sp-100); }
  #cds-landing .persp-thumb{ width:100%; max-width:264px; margin:0 auto; }
  #cds-landing .persp-item p{ font-size:13px; }
  #cds-landing .persp-closing{ font-size:18px; }
}

/* ---------- trailer ---------- */
#cds-landing .trailer{ padding:var(--sp-200) 0 var(--sp-600); }
#cds-landing .trailer-frame{ max-width:900px; margin:0 auto; aspect-ratio:16/9; border-radius:24px;
  box-shadow:0 0 0 1px var(--frame-border);
  background-color:var(--frame-fill); background-size:cover; background-position:center; background-repeat:no-repeat;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
#cds-landing .trailer-frame::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(1.5px 1.5px at 15% 25%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 65%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 80%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 20%, #fff6 50%, transparent 51%); }
#cds-landing .play-btn{ width:76px; height:76px; border-radius:50%; background:var(--cyan); display:flex; align-items:center; justify-content:center; z-index:2;
  box-shadow:0 10px 40px -6px #4fe8d680; transition:transform 300ms var(--ease); }
#cds-landing .trailer-frame:hover .play-btn{ transform:scale(1.08); }
#cds-landing .trailer-frame:active .play-btn{ transform:scale(0.96); }
#cds-landing .play-btn svg{ width:26px; height:26px; margin-left:4px; }
#cds-landing .trailer-caption{ text-align:center; color:var(--text-faint); font-size:15px; margin-top:var(--sp-200); }
/* the actual embed swapped in on click (js/script.js) keeps the same box
   shape as the facade above it, minus the click affordances */
#cds-landing .trailer-embed{ display:block; width:100%; max-width:900px; margin:0 auto; aspect-ratio:16/9; border-radius:24px; box-shadow:0 0 0 1px var(--frame-border); }

/* ---------- final cta ---------- */
#cds-landing .final-cta{ padding:var(--sp-600) 0 var(--sp-700); text-align:center; background:rgba(0,0,0,.5); border-top:1px solid var(--panel-border); }
#cds-landing .final-cta h2{ font-size:30px; line-height:36px; font-weight:700; margin:0 0 var(--sp-200); max-width:680px; margin-left:auto; margin-right:auto; }
#cds-landing .final-cta p{ color:var(--text-dim); font-size:20px; margin:0 0 var(--sp-400); }
@media (min-width:768px){ #cds-landing .final-cta h2{ font-size:36px; line-height:40px; } }

@media (max-width:860px){
  #cds-landing .split .wrap{ gap:var(--sp-400); }
}
@media (max-width:560px){
  #cds-landing .store-badges{ flex-direction:column; align-items:center; }
}

/* ---------- site footer backdrop ---------- */
/* The shared footer's own background (css/footer.css) is a translucent
   gradient, meant to sit over another page's own background. This page
   doesn't set one on <body>, so without an opaque layer here the
   browser's default background would bleed through instead of the
   footer reading as a solid band like it does elsewhere on the site. */
#footer-container{ position:relative; background:var(--bg); }