@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");

/* DemandCast landing — immersive front door (v6 direction, 2026-08-10).
   Loaded only by templates/landing.html, after product.css and tokens.css.
   Every selector is landing-scoped; nothing here may style other surfaces.
   Colours consume tokens.css vars (fallbacks mirror the token values). */

body.landing-immersive {
  margin: 0;
  background: var(--dc-deep, #0d0b61);
  color: var(--dc-ink, #111756);
  font-family: "Comfortaa", "DM Sans", system-ui, sans-serif;
}

.landing-immersive a {
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), filter .34s, box-shadow .34s cubic-bezier(.22, .61, .36, 1);
}

.landing-immersive a:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.landing-immersive :focus-visible {
  outline: 2px solid var(--dc-blue-500, #5865d6);
  outline-offset: 2px;
  border-radius: 4px;
}

.landing-immersive main { position: relative; }

.landing-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.landing-center { text-align: center; }

/* ---------- top bar: solid by default, transparent over the hero ---------- */

.landing-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  color: #fff;
  background: var(--dc-deep, #0d0b61);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 1px 18px rgba(5, 4, 40, .35);
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}

/* immersive over the intro scene (JS-gated via landing-navhide, so the bar
   is safely solid without JS); it turns solid navy the moment the nav
   slides in for the content sections */
.landing-topbar.landing-navhide:not(.landing-shownav) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

.landing-topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 16px 24px;
}

.landing-brandmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Comfortaa", "DM Sans", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: inherit;
  text-decoration: none;
}

.landing-brandmark svg { width: 26px; height: 23px; }
.landing-brandmark img { width: 28px; height: 28px; display: block; }

.landing-topnav {
  display: flex;
  gap: 24px;
  margin-left: 34px;
  transition: opacity .4s ease, transform .4s ease;
}

/* JS adds landing-navhide at boot; the nav then lives with the hero pills
   and slides into the bar once the reader passes the scene. Without JS the
   nav simply stays in the header. */
.landing-topbar.landing-navhide:not(.landing-shownav) .landing-topnav {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.landing-nav-switch {
  position: absolute;
  top: 400svh;
  bottom: 0;
  left: 0;
  width: 1px;
  pointer-events: none;
  visibility: hidden;
}

.landing-topnav a {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.landing-topnav a:hover { color: #fff; }

.landing-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.landing-immersive .landing-lang select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 8px;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 8px;
  cursor: pointer;
}

.landing-topuser { font-size: 13px; font-weight: 700; }

.landing-signin {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.landing-cta {
  background: linear-gradient(180deg, #ffffff 0%, #eef1ff 100%);
  color: var(--dc-indigo, #171271);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 11px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 18px rgba(5, 4, 40, .4);
}

.landing-topbar :focus-visible { outline-color: #fff; }


/* ---------- hero: pinned full-viewport scene; the page rolls over it ---------- */

/* fallback-first: without scroll-driven-animation support (or with reduced
   motion) the scene is two normal full-height blocks over one photo. With
   support, the pin freezes and the two blocks cross-fade in place. */
.landing-scene { position: relative; }

.landing-scene-pin { position: relative; overflow: hidden; }

.landing-scene-hero,
.landing-scene-peak {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-scene-anchor {
  position: absolute;
  top: 100svh;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

.landing-scene-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 62, .55), rgba(13, 11, 97, .72));
  opacity: 0;
  pointer-events: none;
}

.landing-scene-switch {
  position: absolute;
  top: 150svh;
  height: 180svh;
  left: 0;
  width: 1px;
  pointer-events: none;
  visibility: hidden;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .landing-scene { height: 330svh; }

    .landing-scene-pin {
      position: sticky;
      top: 0;
      height: 100svh;
    }

    .landing-scene-hero,
    .landing-scene-peak {
      position: absolute;
      inset: 0;
      min-height: 0;
    }

    .landing-scene-hero {
      animation: landing-hero-out linear both;
      animation-timeline: scroll(root);
      animation-range: 25svh 95svh;
    }

    .landing-scene-peak {
      opacity: 0;
      pointer-events: none;
      animation: landing-peak-in linear both;
      animation-timeline: scroll(root);
      animation-range: 70svh 140svh;
    }

    .landing-scene.is-peak .landing-scene-hero { pointer-events: none; }
    .landing-scene.is-peak .landing-scene-peak { pointer-events: auto; }

    .landing-scene-veil {
      animation: landing-veil-in linear both;
      animation-timeline: scroll(root);
      animation-range: 70svh 140svh;
    }

    .landing-scene-anchor { top: 150svh; }
  }
}

/* pointer-events changes discretely on the same scroll timeline as the
   cross-fade, so the visible scene remains interactive even if the
   IntersectionObserver phase marker is late. */
@keyframes landing-hero-out {
  from { opacity: 1; pointer-events: auto; }
  99% { pointer-events: auto; }
  to { opacity: 0; transform: translateY(-42px) scale(.985); pointer-events: none; }
}

@keyframes landing-peak-in {
  from { opacity: 0; transform: translateY(46px); pointer-events: none; }
  1% { pointer-events: auto; }
  to { opacity: 1; transform: none; pointer-events: auto; }
}

@keyframes landing-veil-in {
  to { opacity: 1; }
}

.landing-stage-media { position: absolute; inset: 0; }

.landing-scene-hero .landing-stage-inner { width: 100%; }

.landing-peak-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-stage-media > svg,
.landing-stage-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the photo settles into deep navy where the CTAs, pills and the live peak
   sit — the scene hands over to the interface as you move down the stage */
.landing-stage-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(13, 11, 97, 0) 0%, rgba(13, 11, 97, .5) 46%, rgba(13, 11, 97, .9) 78%, var(--dc-deep, #0d0b61) 100%);
}

/* The grade + scrim sit over ANY hero media — the illustrated stand-in today,
   the photograph when it arrives. Swap the svg for an <img>; nothing else moves. */
.landing-stage-grade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(10, 9, 64, .62), rgba(23, 18, 113, .5) 50%, rgba(38, 48, 143, .44)),
    radial-gradient(1100px 520px at 50% 34%, rgba(10, 9, 64, .38), transparent 62%);
}

.landing-stage-scrim {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  background: linear-gradient(180deg, rgba(7, 5, 48, .82), transparent);
}

.landing-glow { animation: landing-flick 5.5s ease-in-out infinite; }
@keyframes landing-flick { 0%, 100% { opacity: .18; } 50% { opacity: .26; } }

.landing-bok { animation: landing-bokdrift 16s ease-in-out infinite alternate; }
@keyframes landing-bokdrift { to { transform: translateY(-14px); } }

.landing-stage-inner {
  position: relative;
  text-align: center;
  max-width: 960px;
  padding: 110px 24px 80px;
}

.landing-scene h1 {
  margin: 0 auto;
  color: #fff;
  font-family: "Comfortaa", Manrope, "DM Sans", sans-serif;
  font-size: clamp(38px, 5.6vw, 62px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: pre-line;
  text-shadow: 0 2px 6px rgba(7, 5, 48, .55), 0 10px 46px rgba(7, 5, 48, .8);
}

.landing-tagline {
  color: rgba(255, 255, 255, .96);
  text-shadow: 0 1px 3px rgba(7, 5, 48, .55), 0 5px 20px rgba(7, 5, 48, .6);
  font-family: "Comfortaa", "DM Sans", sans-serif;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.65;
  max-width: 820px;
  margin: 28px auto 0;
  text-wrap: balance;
}

.landing-stage-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.landing-cta-primary {
  background: linear-gradient(180deg, #ffffff 0%, #eef1ff 100%);
  color: var(--dc-indigo, #171271);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 14px;
  padding: 16px 30px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -10px 18px rgba(88, 101, 214, .12), 0 14px 34px rgba(5, 4, 40, .5);
}

.landing-cta-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -10px 18px rgba(88, 101, 214, .16), 0 20px 44px rgba(5, 4, 40, .55);
}

.landing-cta-ghost {
  background: rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  border-radius: 14px;
  padding: 15px 26px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px rgba(5, 4, 40, .35);
}

.landing-pillnav {
  display: inline-flex;
  gap: 4px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 5px;
  margin-top: 34px;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.landing-pillnav a {
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
}

.landing-pillnav a:hover {
  background: rgba(255, 255, 255, .16);
  transform: none;
}

/* ---------- the floating app frame ---------- */

.landing-demo { max-width: 1160px; width: 100%; padding: 0 20px; margin: 44px auto 0; }

/* Short viewports keep the full section width (Chris ruling, r5) and give
   back vertical room through margins instead. */
@media (max-height: 760px) {
  .landing-demo { margin-top: 22px; }
  .landing-pillnav { margin-top: 16px; }
}

/* carries .demand-preview only for the i18n exclusion — reset its old card look */
.landing-demo-frame {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 16px;
  box-shadow: 0 40px 90px rgba(5, 4, 40, .55);
  text-align: left;
}

.landing-demo-frame::before { content: none; }

.landing-demo-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #0a0940;
  border-radius: 16px 16px 0 0;
}

.landing-demo-dot { width: 9px; height: 9px; border-radius: 50%; }
.landing-demo-dot.d1 { background: #ff5f57; }
.landing-demo-dot.d2 { background: #febc2e; }
.landing-demo-dot.d3 { background: #28c840; }

.landing-demo-url {
  margin-left: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
}

.landing-demo-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #7fe0a8;
}

.landing-livedot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28c840;
  animation: landing-pulse 1.6s infinite;
}

@keyframes landing-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.landing-demo-body {
  background: linear-gradient(115deg, var(--dc-deep, #0d0b61), #1a2a8a 60%, #2e4aa8);
  padding: 24px 32px 28px;
  border-radius: 0 0 16px 16px;
  color: #fff;
}

/* ============ demo motion: one 24s master timeline, pure CSS ============ */

.ldm-stage { position: relative; overflow: hidden; }

.ldm-sig { position: absolute; width: 38px; height: 38px; }
.ldm-sig .ldm-chip, .ldm-sig .ldm-tr { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.ldm-sig .ldm-chip {
  background: #fff; color: var(--c);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 26px var(--c), 0 5px 16px rgba(3, 2, 30, .45);
  animation: ldm-move 24s cubic-bezier(.35, 0, .25, 1) infinite;
  animation-delay: var(--d, 0s);
}
.ldm-sig .ldm-chip svg { width: 22px; height: 22px; }
.ldm-sig .ldm-tr { background: var(--c); filter: blur(2.5px); animation: ldm-movet 24s cubic-bezier(.35, 0, .25, 1) infinite; }
.ldm-sig .ldm-t1 { animation-delay: calc(var(--d, 0s) + .16s); }
.ldm-sig .ldm-t2 { animation-delay: calc(var(--d, 0s) + .34s); filter: blur(4px); }
@keyframes ldm-move {
  0% { transform: translate(0, 0) scale(1); opacity: 0 }
  3% { opacity: 1 }
  16% { transform: translate(var(--tx), var(--ty)) scale(.66); opacity: 1 }
  21% { transform: translate(var(--tx), var(--ty)) scale(.34); opacity: 0 }
  100% { opacity: 0 }
}
@keyframes ldm-movet {
  0% { transform: translate(0, 0) scale(.62); opacity: 0 }
  4% { opacity: .4 }
  16% { transform: translate(var(--tx), var(--ty)) scale(.4); opacity: .3 }
  20% { transform: translate(var(--tx), var(--ty)) scale(.2); opacity: 0 }
  100% { opacity: 0 }
}
/* endpoints: a loose constellation tuned to the frame; overflow clips excess */
.ldm-s1  { --c:#4038C4; left:4%;  top:8%;  --tx:310px;  --ty:130px; }
.ldm-s2  { --c:#008BFF; left:1%;  top:60%; --tx:340px;  --ty:-30px;  --d:.5s; }
.ldm-s3  { --c:#F6850C; left:91%; top:6%;  --tx:-300px; --ty:145px;  --d:.2s; }
.ldm-s4  { --c:#0FA3B1; left:95%; top:68%; --tx:-330px; --ty:-95px;  --d:.7s; }
.ldm-s5  { --c:#DF301C; left:10%; top:90%; --tx:280px;  --ty:-150px; --d:.3s; }
.ldm-s6  { --c:#C08A12; left:86%; top:92%; --tx:-260px; --ty:-165px; --d:.6s; }
.ldm-s7  { --c:#123D1C; left:44%; top:1%;  --tx:30px;   --ty:150px;  --d:.1s; }
.ldm-s8  { --c:#8140DC; left:56%; top:97%; --tx:-60px;  --ty:-140px; --d:.8s; }
.ldm-s9  { --c:#4038C4; left:20%; top:3%;  --tx:180px;  --ty:160px;  --d:.9s; }
.ldm-s10 { --c:#008BFF; left:97%; top:34%; --tx:-350px; --ty:85px;   --d:.4s; }
.ldm-s11 { --c:#F6850C; left:2%;  top:32%; --tx:320px;  --ty:95px;   --d:1.1s; }
.ldm-s12 { --c:#DF301C; left:70%; top:96%; --tx:-120px; --ty:-175px; --d:1.0s; }

@keyframes ldm-rise  { 0%,18%{ opacity:0; transform:translateY(26px) } 24%,86%{ opacity:1; transform:none } 94%,100%{ opacity:0 } }
@keyframes ldm-rise2 { 0%,22%{ opacity:0; transform:translateY(26px) } 28%,86%{ opacity:1; transform:none } 94%,100%{ opacity:0 } }
@keyframes ldm-rise3 { 0%,26%{ opacity:0; transform:translateY(26px) } 32%,86%{ opacity:1; transform:none } 94%,100%{ opacity:0 } }

.ldm-head { display: flex; align-items: center; gap: 8px; animation: ldm-rise 24s ease infinite; }
.ldm-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.ldm-day { margin-left: auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; background: rgba(255,255,255,.16); border-radius: 999px; padding: 2px 9px; }
.ldm-title { margin: 5px 0 0; font-size: 23px; font-weight: 700; animation: ldm-rise 24s ease infinite; }

.ldm-cards { display: flex; gap: 10px; margin-top: 12px; }
.ldm-card { flex: 1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 10px 13px; }
.ldm-card:nth-child(1) { animation: ldm-rise2 24s ease infinite; }
.ldm-card:nth-child(2) { animation: ldm-rise3 24s ease infinite; }
.ldm-card small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ldm-card b { display: block; font-size: 21px; font-weight: 700; margin-top: 2px; }
.ldm-card .ldm-vs { font-size: 13px; color: #ffb3c1; }
.ldm-build { display: block; font-size: 12px; font-weight: 700; color: #ffb3c1; margin-top: 1px; }
@keyframes ldm-pop { 0%,30%{ opacity:0; transform:scale(.7) } 34%{ opacity:1; transform:scale(1.12) } 37%,86%{ opacity:1; transform:scale(1) } 94%,100%{ opacity:0 } }
.ldm-num { display: inline-block; animation: ldm-pop 24s cubic-bezier(.34, 1.56, .64, 1) infinite; }

@keyframes ldm-alertin { 0%,58%{ opacity:0; transform:translateX(40px) } 64%,86%{ opacity:1; transform:none } 94%,100%{ opacity:0 } }
.ldm-alert { margin-top: 10px; background: linear-gradient(100deg, rgba(255,56,56,.22), rgba(255,56,56,.1)); border: 1px solid rgba(255,90,96,.5); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 26px rgba(3,2,30,.35); animation: ldm-alertin 24s cubic-bezier(.22,.61,.36,1) infinite; }
.ldm-alert small { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffb3c1; }
.ldm-alert p { margin: 3px 0 0; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: rgba(255,255,255,.94); }

.ldm-chartwrap { margin-top: 12px; animation: ldm-rise3 24s ease infinite; }
.ldm-lbl { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.ldm-chart { display: block; width: 100%; height: auto; }
.ldm-grid path { stroke: rgba(255,255,255,.12); }
.ldm-curve { stroke: rgba(255,255,255,.92); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-dasharray: 640; stroke-dashoffset: 640; animation: ldm-draw 24s linear infinite; }
@keyframes ldm-draw { 0%,26%{ stroke-dashoffset:640 } 50%,88%{ stroke-dashoffset:0 } 96%,100%{ stroke-dashoffset:640 } }
.ldm-peakdot { fill: var(--dc-red-500, #ff3838); stroke: #fff; stroke-width: 2; animation: ldm-pop 24s ease infinite; transform-origin: center; transform-box: fill-box; }
@keyframes ldm-flag { 0%,38%{ opacity:0; transform:translateY(-14px) } 43%,86%{ opacity:1; transform:none } 94%,100%{ opacity:0 } }
.ldm-peakflag { animation: ldm-flag 24s ease infinite; }
.ldm-peakflag text { fill: #fff; font-size: 12.5px; font-weight: 700; }
.ldm-nowline { stroke: #fff; stroke-width: 1.2; stroke-opacity: .85; animation: ldm-sweep 24s linear infinite; }
@keyframes ldm-sweep { 0%,48%{ transform:translateX(0); opacity:0 } 52%{ opacity:.85 } 80%{ transform:translateX(300px); opacity:.85 } 84%,100%{ opacity:0; transform:translateX(300px) } }
.ldm-axis text { fill: rgba(255,255,255,.55); font-size: 11px; font-weight: 500; }
@keyframes ldm-ev { 0%,68%{ opacity:0 } 74%,84%{ opacity:1 } 90%,100%{ opacity:0 } }
.ldm-evglow { animation: ldm-ev 24s ease infinite; }
.ldm-evdot { fill: var(--dc-red-500, #ff3838); }
@keyframes ldm-evring { 0%,68%{ transform:scale(.4); opacity:0 } 72%{ opacity:.7 } 84%{ transform:scale(1.6); opacity:0 } 100%{ opacity:0 } }
.ldm-evring { fill: none; stroke: var(--dc-red-500, #ff3838); stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: ldm-evring 24s ease infinite; }

.ldm-foot { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; animation: ldm-rise3 24s ease infinite; }
.ldm-foot > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ldm-fchip { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--c); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 12px var(--c), 0 3px 8px rgba(3,2,30,.35); }
.ldm-fchip svg { width: 15px; height: 15px; }
.ldm-fl small { display: block; font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.6); white-space: nowrap; }
.ldm-fl b { display: block; font-size: 12.5px; font-weight: 700; white-space: nowrap; }

@media (max-width: 700px) {
  .landing-demo-body { padding: 16px 16px 18px; }
  .ldm-title { font-size: 18px; }
  .ldm-card b { font-size: 16px; }
  .ldm-foot { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ldm-stage * { animation: none !important; }
  .ldm-sig { display: none; }
  .ldm-curve { stroke-dashoffset: 0; }
  .ldm-nowline, .ldm-evglow { display: none; }
}

/* ---------- the curtain sheet ---------- */

/* smooth anchor travel (landing only — this file loads nowhere else) */
@media (prefers-reduced-motion: no-preference) {
  html:has(body.landing-immersive) { scroll-behavior: smooth; }
}

/* The curtain, restored (2026-08-31): each .landing-layer pins after its
   content has fully scrolled (the layer script gives tall layers a negative
   sticky top), and the next chapter rolls over it. The script and classes
   survived the section rebuild but this sticky rule did not - without it
   the negative tops turned into massive static shifts that stacked the
   sheet over the scene and the tour over the sheet. */
.landing-layered .landing-layer { position: sticky; }

.landing-final {
  position: relative;
  z-index: 11;
  background: var(--dc-deep, #0d0b61);
}

.landing-sheet {
  position: relative;
  z-index: 10;
  padding-bottom: 55svh;
  background: linear-gradient(180deg, rgba(244, 246, 253, .93) 0%, rgba(255, 255, 255, .985) 260px, var(--dc-paper, #fff) 420px);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -30px 70px rgba(5, 4, 40, .35);
  margin-top: -24px;
}

/* ---------- shared section grammar ---------- */

.landing-block { padding: 130px 0; }

.landing-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a90b8;
}

.landing-eyebrow.on-dark { color: rgba(255, 255, 255, .6); }

.landing-built {
  z-index: 10;
  background: var(--dc-paper, #fff);
  padding: 120px 0 130px;
}

.landing-sheet h2,
.landing-built h2,
.landing-final h2 {
  margin: 8px 0 0;
  font-family: "Comfortaa", Manrope, "DM Sans", sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.18;
  font-weight: 700;
  color: var(--dc-ink, #111756);
  text-wrap: balance;
}

.landing-sub {
  margin: 14px 0 0;
  font-family: "Comfortaa", "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--dc-muted, #5f6791);
  max-width: 660px;
  line-height: 1.6;
}

.landing-sub-center { margin-left: auto; margin-right: auto; }
.landing-sub.on-dark { color: rgba(255, 255, 255, .8); }

/* soft wash bands instead of hard section borders */
.landing-wash {
  background: linear-gradient(180deg, rgba(242, 244, 251, 0) 0%, var(--dc-canvas, #f2f4fb) 22%, var(--dc-canvas, #f2f4fb) 78%, rgba(242, 244, 251, 0) 100%);
}

/* ---------- source ribbon ---------- */

.landing-ribbon {
  padding: 150px 0 0;
  text-align: center;
}

.landing-ribbon-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--dc-muted, #5f6791);
}

.landing-ribbon-chips {
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.landing-ribbon-chips span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--dc-line, #dce1f1);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dc-navy, #10295d);
  background: var(--dc-paper, #fff);
}

.landing-ribbon-chips i { width: 9px; height: 9px; border-radius: 3px; }
.landing-ribbon-chips .dot-air { background: var(--dc-ch-air, #4038C4); }
.landing-ribbon-chips .dot-sea { background: var(--dc-ch-sea, #008bff); }
.landing-ribbon-chips .dot-rail { background: var(--dc-ch-rail-accent, #266210); }
.landing-ribbon-chips .dot-events { background: var(--dc-ch-events, #F6850C); }
.landing-ribbon-chips .dot-weather { background: var(--dc-ch-weather, #0FA3B1); }
.landing-ribbon-chips .dot-hotels { background: var(--dc-ch-hotels, #DF301C); }
.landing-ribbon-chips .dot-traffic { background: var(--dc-ch-traffic, #c08a12); }
.landing-ribbon-chips .dot-hyper { background: var(--dc-ch-hyper, #8140DC); }

/* ---------- how it works ---------- */

.landing-stepgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  margin-top: 44px;
}

.landing-stepnum {
  display: block;
  font-family: "Comfortaa", "DM Sans", sans-serif;
  font-size: 44px;
  font-weight: 800;
  color: var(--dc-line, #dce1f1);
  line-height: 1;
}

.landing-stepcard h3 {
  margin: 8px 0 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--dc-ink, #111756);
}

.landing-stepcard p {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--dc-muted, #5f6791);
  line-height: 1.65;
}

/* ---------- what you can do ---------- */

.landing-cando { padding-bottom: 140px; }

#how-it-works.landing-block { padding-top: 140px; }

.landing-cando-cols {
  display: flex;
  gap: 44px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.landing-cando-intro {
  flex: 1;
  min-width: 300px;
  position: sticky;
  top: 118px;
}

.landing-cando-cards {
  flex: 1;
  min-width: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 16px;
}

.landing-outcome {
  position: relative;
  overflow: hidden;
  display: flex;
  background: linear-gradient(150deg, var(--dc-indigo-tint, #eef0fb) 0%, #fff 72%);
  border-color: #d5d9f3;
  flex-direction: column;
  border: 1px solid var(--dc-line, #dce1f1);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 10px 30px rgba(18, 24, 74, .06);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), box-shadow .34s;
}

.landing-outcome-media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* the tiles wear the hero's dusk: an indigo grade over slightly muted photos */
.landing-outcome-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10, 9, 64, .5), rgba(23, 18, 113, .34) 55%, rgba(38, 48, 143, .3));
}

.landing-outcome-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.78) brightness(.92);
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.landing-outcome:hover .landing-outcome-media img { transform: scale(1.04); }

.landing-outcome-text { padding: 14px 16px 15px; flex: 1; }

.landing-outcome:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(18, 24, 74, .12);
}

.landing-outcome::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--dc-indigo, #171271);
}


.landing-outcome h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--dc-ink, #111756);
}

.landing-outcome p {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dc-muted, #5f6791);
}

/* ---------- built around your business ---------- */

/* ---------- signal cards ---------- */

.landing-sig-code {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.landing-sig-code.code-air { background: var(--dc-ch-air-tint, #E2E0F8); color: var(--dc-ch-air-dark, #2A2489); }
.landing-sig-code.code-flow { background: var(--dc-indigo-tint, #eef0fb); color: var(--dc-indigo, #171271); }
.landing-sig-code.code-weather { background: var(--dc-ch-weather-tint, #D3F1F4); color: var(--dc-ch-weather-dark, #0B6E78); }
.landing-sig-code.code-hyper { background: #f7dfe6; color: var(--dc-ch-hyper, #8140DC); }
.landing-sig-code.code-events { background: var(--dc-ch-events-tint, #FDE7CD); color: var(--dc-ch-events-dark, #B85E04); }

.landing-sig-shot {
  display: block;
  width: 100%;
  margin-top: 16px;
  border: 1px solid var(--dc-line, #dce1f1);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(18, 24, 74, .08);
}

.landing-sig-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--dc-muted, #5f6791);
}

.landing-flowsplit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.landing-flowsplit > div {
  background: var(--dc-soft, #f7f8fc);
  border-radius: 10px;
  padding: 8px 6px;
}

.landing-flowsplit small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--dc-muted, #5f6791);
}

.landing-flowsplit strong { font-size: 14px; font-weight: 800; color: var(--dc-ink, #111756); }

.landing-sig-pill {
  display: inline-block;
  margin-top: 12px;
  background: var(--dc-indigo-tint, #eef0fb);
  color: var(--dc-indigo, #171271);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 800;
}

.landing-zonemap { margin-top: 14px; }
.landing-zonemap svg { display: block; width: 100%; height: auto; border-radius: 14px; }

/* ---------- the instrument tour: four mini sections that switch on scroll ---------- */

.landing-tourtrack { position: relative; }

.landing-tour-trig {
  position: absolute;
  left: 0;
  width: 1px;
  pointer-events: none;
  visibility: hidden;
}

.landing-tour {
  position: relative;
  margin-top: 0;
  text-align: left;
}

.landing-tour-top { text-align: center; margin-bottom: 44px; }

/* slide 0: the venue bars, restored as the tour's opening state */
.landing-uplift-band {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 760px;
}

.landing-uplift {
  flex: 1;
  min-width: 130px;
  display: grid;
  grid-template-rows: 130px auto auto;
  justify-items: center;
  align-items: end;
}

.landing-uplift-bar {
  display: block;
  width: 54px;
  height: var(--lift, 50%);
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, var(--dc-indigo, #171271), #3a55b4);
}

.landing-uplift strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--dc-ink, #111756);
  margin-top: 8px;
}

.landing-uplift span {
  font-size: 12px;
  font-weight: 700;
  color: var(--dc-muted, #5f6791);
}

.landing-uplift-note {
  margin: 18px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--dc-muted, #5f6791);
  text-align: center;
}

.landing-tour-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dc-ink, #111756);
}

.landing-tour-item { margin-bottom: 72px; }

.landing-tour-card {
  background: linear-gradient(150deg, var(--dc-indigo-tint, #eef0fb) 0%, var(--dc-soft, #f7f8fc) 100%);
  border: 1px solid #d5d9f3;
  border-radius: 12px;
  padding: 18px 20px 20px;
}

.landing-tour-lede {
  margin: 0 0 10px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--dc-ink, #111756);
  line-height: 1.4;
  text-transform: none;
}

.landing-tour-card > p {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dc-muted, #5f6791);
  line-height: 1.6;
}

.landing-sig-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--dc-muted, #5f6791);
}

.landing-flowsplit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 12px;
  max-width: 380px;
}

.landing-flowsplit > div {
  background: #fff;
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}

.landing-flowsplit small { display: block; font-size: 10px; font-weight: 700; color: var(--dc-muted, #5f6791); }
.landing-flowsplit strong { font-size: 14px; font-weight: 700; color: var(--dc-ink, #111756); }

.landing-sig-pill {
  display: inline-block;
  background: var(--dc-indigo, #171271);
  color: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
}

.landing-tour-media { margin-top: 20px; }

.landing-tour-media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--dc-line, #dce1f1);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(18, 24, 74, .12);
  background: #fff;
}

.landing-tour-media .landing-zonemap {
  background: #fff;
  border: 1px solid var(--dc-line, #dce1f1);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 18px 44px rgba(18, 24, 74, .12);
}

.landing-zonemap svg { display: block; width: 100%; height: auto; border-radius: 14px; }

/* desktop + JS: the four slides stack in one ~half-viewport frame and
   switch as the reader scrolls the tall track behind it */
@media (min-width: 900px) {
  .landing-tourtrack.is-scrolly { height: 400svh; }

  .landing-tourtrack.is-scrolly .landing-tour {
    position: sticky;
    top: 96px;
  }

  .landing-tour.is-live .landing-tour-list { display: grid; overflow: hidden; }

  .landing-tour.is-live .landing-tour-item {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: start;
    min-height: 48svh;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(26px);
    transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1), visibility .65s;
  }

  /* instruments hand over in place — a gentle drift, a long overlapping
     crossfade, always in the same space. The bars keep their pronounced
     slide-out under the pinned title. */
  .landing-tour.is-live .landing-tour-item.is-passed { transform: translateY(-26px); }

  .landing-tour.is-live .landing-tour-bars { transform: translateY(76px); }
  .landing-tour.is-live .landing-tour-bars.is-passed { transform: translateY(-96px); }
  .landing-tour.is-live .landing-tour-bars.is-active { transform: none; }

  .landing-tour.is-live .landing-tour-item.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .landing-tour.is-live .landing-tour-bars {
    display: block;
    align-content: center;
  }

  /* every instrument shows in an identical panel: same height, same width,
     image contained; both columns aligned to the top */
  .landing-tour.is-live .landing-tour-media { margin-top: 0; height: 380px; }

  .landing-tour.is-live .landing-tour-media img {
    height: 100%;
    object-fit: contain;
    padding: 14px;
  }

  .landing-tour.is-live .landing-tour-media .landing-zonemap {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .landing-tour.is-live .landing-tour-media .landing-zonemap svg { width: 100%; }

  .landing-tour.is-live .landing-tour-bars { min-height: 48svh; align-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-tour.is-live .landing-tour-item { transition: none; }
}

/* ---------- pricing ---------- */

.landing-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 44px;
  text-align: left;
}

.landing-price {
  position: relative;
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
}

.landing-price-featured {
  border: 2px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .09);
}

.landing-price-flag {
  position: absolute;
  top: -11px;
  left: 22px;
  background: #fff;
  color: var(--dc-indigo, #171271);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 11px;
}

.landing-price-flag.flag-navy {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.landing-price h3 { margin: 0; font-size: 15px; font-weight: 800; color: #fff; }

.landing-price-tag {
  margin: 2px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .65);
}

.landing-price-amount {
  margin: 10px 0 0;
  font-family: "Comfortaa", "DM Sans", sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
}

.landing-price-amount small { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .55); }

.landing-price-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  flex: 1;
}

.landing-price-list li {
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
  line-height: 1.45;
}

.landing-price-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #7fe0a8;
  font-weight: 800;
  font-size: 11px;
}

.landing-price-list li.minus { color: rgba(255, 255, 255, .45); }
.landing-price-list li.minus::before { content: "\2014"; color: rgba(255, 255, 255, .3); }

.landing-price-cta {
  display: block;
  margin-top: 16px;
  text-align: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  border-radius: 11px;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 20px rgba(3, 2, 30, .3);
}

.landing-price-cta.primary {
  background: linear-gradient(180deg, #ffffff 0%, #eef1ff 100%);
  border-color: rgba(255, 255, 255, .65);
  color: var(--dc-indigo, #171271);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 26px rgba(3, 2, 30, .45);
}

.landing-price-note {
  margin: 16px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}

/* ---------- dusk transition + closer + footer ---------- */

.landing-closer {
  color: #fff;
  padding: 30px 0 72px;
}

.landing-closer h2 { color: #fff; }

.landing-close-cta {
  display: inline-block;
  margin-top: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #eef1ff 100%);
  color: var(--dc-indigo, #171271);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 14px;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 14px 34px rgba(3, 2, 30, .5);
}

.landing-final :focus-visible,
.landing-deepfoot :focus-visible { outline-color: #fff; }

.landing-deepfoot {
  position: relative;
  z-index: 20;
  background: var(--dc-deep, #0d0b61);
  color: #fff;
  padding: 0 0 40px;
}

.landing-foot-main {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: 30px;
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}

.landing-foot-brand { flex: 0 0 240px; }

.landing-brandmark.on-dark { color: #fff; }

.landing-foot-brand > p {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .65);
  line-height: 1.6;
}

.landing-foot-brand .landing-foot-fine { margin-top: 14px; color: rgba(255, 255, 255, .5); }

.landing-foot-cols {
  flex: 1;
  min-width: 280px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px;
}

.landing-foot-col h4 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.landing-foot-col a {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  margin-top: 8px;
}

/* ---------- section reveals: content fades in as each layer arrives ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .landing-reveal {
      animation: landing-rise linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 380px;
    }
  }
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

/* ---------- anchor offsets under the fixed bar ---------- */

#how-it-works, #built-around-you, #pricing, #daily-briefing { scroll-margin-top: 96px; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .landing-cando-intro { position: static; }
  .landing-cando-cards {
    position: relative;
    z-index: 2;
    background: var(--dc-paper, #fff);
    border-radius: 16px;
  }
  .landing-topnav { display: none; }
  .landing-sigs { grid-template-columns: 1fr 1fr; }
  .landing-sig-wide { grid-column: 1 / -1; }
  .landing-block { padding: 84px 0; }
}

@media (max-width: 700px) {
  .landing-topbar-inner { padding: 12px 16px; }
  .landing-signin { display: none; }
  .landing-scene-hero, .landing-scene-peak { min-height: 100svh; }
  .landing-stage-inner { padding: 104px 20px 64px; }
  .landing-tagline { font-size: 15px; margin-top: 20px; }
  .landing-stage-ctas { margin-top: 30px; }
  .landing-demo { margin-top: 38px; }
  .landing-sigs { grid-template-columns: 1fr; }
  .landing-sig-wide, .landing-sig-full { grid-column: auto; }
  .landing-cando-cols { gap: 24px; }
  .landing-db-sources { grid-template-columns: 1fr 1fr; }
  .landing-block { padding: 72px 0; }
  .landing-foot-main { gap: 32px; }
}

/* ---------- motion respect ---------- */

@media (prefers-reduced-motion: reduce) {
  .landing-immersive a { transition: none; }
  .landing-immersive a:hover { transform: none; }
  .landing-topbar { transition: none; }
  .landing-glow, .landing-bok, .landing-livedot, .landing-nowdrift, .landing-drawcurve { animation: none; }
  .landing-drawcurve { stroke-dashoffset: 0; }
}

/* the navy finale always keeps white headings (the shared h2 grammar rule
   above would otherwise win the cascade with ink) */
.landing-final h2 { color: #fff; }