/* Return Ready — the marketing site.
   ============================================================================
   A-97's front door. Its own stylesheet, deliberately: this is the only page
   in the product with no session, no business and no client data behind it,
   and it is the only one that loads a webfont. Keeping it apart means nothing
   here can leak into the application's stylesheet by being nearby.

   COLOUR COMES FROM `returnready.css`. Not one hex value is re-declared here.
   The three tokens that carry meaning keep their roles even on a page with no
   figures to mark:
       --accent / --good = proved     --warn = could not be checked     --bad = does not tie
   The primary button using --accent is the one ruled exception: a button is
   chrome, a status indicator is vocabulary, and the rule protects the latter.

   TYPE IS THE ONE PLACE THIS PAGE DIVERGES FROM THE APP. The app uses system
   stacks and makes zero font requests. This page adopts the faces the brand
   films already use, because it is public, carries no client data, and is the
   one surface where the brand has to do work. Every face has a real fallback.
   ========================================================================= */

:root {
  --m-serif: Newsreader, Georgia, "Times New Roman", serif;
  --m-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --m-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --m-gutter: 32px;
  --m-max: 1200px;
}

body.front-door {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--m-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.m-wrap { max-width: var(--m-max); margin: 0 auto; padding: 0 var(--m-gutter); }
.m-section { padding-top: 110px; }

h1, h2, .m-mark {
  font-family: var(--m-serif);
  font-weight: 300;
  letter-spacing: -.018em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(38px, 6.1vw, 68px); }
h2 { font-size: clamp(28px, 3.7vw, 42px); }
h3 { font-family: var(--m-sans); font-size: clamp(18.5px, 1.6vw, 21px); font-weight: 500; margin: 0; }
p { margin: 0; }

.m-lede { font-size: clamp(17px, 1.4vw, 18px); line-height: 1.62; color: var(--ink-2); font-weight: 300; }

/* The eyebrow — `.k` from brand/ad.html, kept so the films and the site agree. */
.m-eyebrow {
  font-family: var(--m-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--accent);
  display: inline-block;
  margin-bottom: 26px;
}

.m-btn {
  display: inline-block;
  font-family: var(--m-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 22px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  transition: filter .15s ease, border-color .15s ease;
}
.m-btn:hover { filter: brightness(1.07); border-color: var(--ink-3); }
.m-btn--primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ----------------------------------------------------------------------- nav */
.m-nav {
  position: sticky; top: 0; z-index: 50;
  height: 70px;
  display: flex; align-items: center;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
.m-nav .m-wrap { display: flex; align-items: center; gap: 26px; width: 100%; }
.m-nav__links { margin-left: auto; display: flex; gap: 24px; }
.m-nav__links a { color: var(--ink-2); font-size: 14.5px; text-decoration: none; }
.m-nav__links a:hover { color: var(--ink); }

/* ---------------------------------------------------------------------- hero */
.m-hero { padding-top: 92px; position: relative; }
.m-hero__glow {
  position: absolute; top: -60px; left: 6%;
  width: 760px; height: 420px; max-width: 92vw;
  background: radial-gradient(closest-side, rgba(196, 181, 253, .16), transparent);
  filter: blur(28px); pointer-events: none;
  animation: m-glow 7s ease-in-out infinite;
}
@keyframes m-glow { 0%, 100% { opacity: .28 } 50% { opacity: .55 } }

/* v5: the centred column became a two-column grid, copy left and the deck
   right. The measures shrank with it — the lede from 56ch to 46ch and the fine
   print to 44ch — because they no longer have the full width to run across. */
.m-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 48px; align-items: center; position: relative;
}
.m-hero__col { text-align: left; }
.m-hero h1 { max-width: 15ch; margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.06; }
.m-hero .m-lede {
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55;
  max-width: 46ch; margin: 26px 0 0;
}
.m-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.m-hero__fine { font-size: 13.5px; color: var(--ink-3); margin-top: 22px; max-width: 44ch; }

/* ------------------------------------------------------- the rotating headline
   Three statements, one showing at a time, 3400ms apart. The third rules out
   its own first answer: "weeks" lands, a rule is drawn through it, and "hours"
   arrives in `--accent`.

   THE STRUCK WORD IS NOT A DISCARD. It stays legible at .42 opacity because it
   is the comparison — the sentence means nothing without it.

   `text-decoration-color` animates to `currentColor` rather than to the
   design's literal `rgba(102,109,114,1)`. That hex is `--ink-3` in the dark
   theme only; hard-coding it would draw a dark-theme rule across a light-theme
   word. The struck span already carries `--ink-3` as its colour, so
   `currentColor` is the same value in dark and the right one in light. */
@keyframes m-word-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes m-strike {
  0%   { opacity: 0; transform: translateY(14px); filter: blur(7px);
         text-decoration-color: transparent; }
  26%  { opacity: 1; transform: none; filter: blur(0);
         text-decoration-color: transparent; }
  58%  { opacity: 1; text-decoration-color: currentColor; }
  100% { opacity: .42; text-decoration-color: currentColor; }
}

/* Which presentation shows. Both are in the HTML; neither is a fallback. */
.m-rot__all { display: block; }
.m-rot__one { display: none; }
html.rr-motion .m-rot__all { display: none; }
html.rr-motion .m-rot__one { display: block; }

/* All three at once, for JS off or motion declined. Its own clamp, NOT a
   fraction of the display size: scaled down from `clamp(38px, 5vw, 64px)` this
   stack lands within a few px of the 17px lede on a narrow screen and stops
   reading as a headline at all. */
.m-rot__all { font-size: clamp(27px, 2.7vw, 35px); line-height: 1.18; }
.m-rot__line { display: block; }
.m-rot__line + .m-rot__line { margin-top: .34em; }
.m-rot__all b { font-weight: inherit; color: var(--accent); }
.m-rot__all s { color: var(--ink-3); text-decoration-thickness: .07em; }

/* The rotating one. */
.m-rot__lead, .m-rot__tailwrap { display: block; }
.m-rot__lead { animation: m-word-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.m-rot__tail { display: block; color: var(--accent);
  animation: m-word-in .7s cubic-bezier(.2, .7, .2, 1) .12s both; }
.m-rot__struck {
  display: inline-block; color: var(--ink-3);
  text-decoration: line-through; text-decoration-thickness: .07em;
  animation: m-strike 1.8s cubic-bezier(.2, .7, .2, 1) .12s both;
}
.m-rot__tailwrap .m-rot__tail {
  display: inline-block; margin-left: .28em;
  animation: m-word-in .7s cubic-bezier(.2, .7, .2, 1) 1.30s both;
}

/* ------------------------------------------------------------------- the deck
   Three cards, one in front, cycling with the headline. Every row is a label
   and a bar and there is NO FIGURE ANYWHERE — the same rule that emptied the
   strip below it (A-96). A bar width is not a measurement; a number would be. */
.m-deck { position: relative; width: 100%; height: 452px; pointer-events: none; }
.m-deck__card {
  position: absolute; left: 50%; width: 300px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-2); overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  transition: top .9s cubic-bezier(.2, .7, .2, 1),
              transform .9s cubic-bezier(.2, .7, .2, 1), opacity .9s ease;
}
/* The three slots, verbatim from the design file. */
.m-deck__card[data-slot="0"] {
  top: 112px; transform: translateX(-50%) translateX(10px) rotate(0deg) scale(1);
  opacity: 1; z-index: 4;
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .62), 0 0 0 4px rgba(196, 181, 253, .07);
}
.m-deck__card[data-slot="1"] {
  top: 0; transform: translateX(-50%) translateX(-20px) rotate(-2deg) scale(.93);
  opacity: .42; z-index: 2;
}
.m-deck__card[data-slot="2"] {
  top: 232px; transform: translateX(-50%) translateX(30px) rotate(2.5deg) scale(.88);
  opacity: .24; z-index: 1;
}
/* Idle drift, v6 §"The three panels". Animated on MARGIN-TOP rather than on
   `transform`, and that is not a stylistic choice: `transform` already carries
   each card's slot position, so a float written as `translateY` would fight the
   .7s slot transition and the cards would jitter every tick. Margin is the one
   axis nothing else is using. Negative delays start each card mid-cycle, so
   they are already out of phase on the first frame rather than drifting into
   phase over the first nine seconds. */
@keyframes m-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -14px; } }
html.rr-motion .m-deck__card { animation: m-float 11s ease-in-out infinite; }
html.rr-motion .m-deck__card:nth-of-type(2) { animation-delay: -2.0s; }
html.rr-motion .m-deck__card:nth-of-type(3) { animation-delay: -4.0s; }

.m-deck__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.m-deck__cap {
  font-size: 12.5px; font-weight: 560; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-deck__tag {
  flex: none; font-family: var(--m-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent);
}
.m-deck__card[data-slot="0"] .m-deck__tag { background: var(--accent); color: var(--bg); }
.m-deck__rows { padding: 12px 16px 16px; }
/* The design's row divider is #14181A, between `--bg` and `--border` and with
   no token of its own. `--border` is a shade stronger in dark and correct in
   light, which is the trade worth making. */
.m-deck__row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.m-deck__row i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }
.m-deck__row i.on { background: var(--accent); }
.m-deck__row span {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-deck__row u { flex: none; height: 5px; border-radius: 3px; background: var(--border-strong); }
.m-deck__row u.on { background: var(--accent); }

/* Edge fades, so a card leaving the stack dissolves rather than clips. */
.m-deck__mask { position: absolute; pointer-events: none; }
.m-deck__mask--t { left: 0; right: 0; top: 0; height: 140px; z-index: 6;
  background: linear-gradient(180deg, var(--bg) 14%, transparent); }
.m-deck__mask--b { left: 0; right: 0; bottom: 0; height: 150px; z-index: 6;
  background: linear-gradient(0deg, var(--bg) 14%, transparent); }
.m-deck__mask--r { top: 0; bottom: 0; right: 0; width: 90px; z-index: 5;
  background: linear-gradient(270deg, var(--bg) 6%, transparent); }

/* Motion declined, or JS off: a plain column, nothing overlapping, nothing
   faded, and no masks because there is nothing to fade into. */
html:not(.rr-motion) .m-deck { height: 732px; }
html:not(.rr-motion) .m-deck__card {
  transform: translateX(-50%); opacity: 1; z-index: 1;
  border-color: var(--border); background: var(--surface-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
html:not(.rr-motion) .m-deck__card:nth-of-type(1) { top: 0; }
html:not(.rr-motion) .m-deck__card:nth-of-type(2) { top: 244px; }
html:not(.rr-motion) .m-deck__card:nth-of-type(3) { top: 488px; }
html:not(.rr-motion) .m-deck__card .m-deck__tag { background: var(--accent-soft); color: var(--accent); }
html:not(.rr-motion) .m-deck__mask { display: none; }
.m-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--m-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
  border: 1px solid var(--border); border-radius: 99px;
  padding: 5px 13px 5px 9px; margin-bottom: 28px;
}
.m-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
             animation: m-pulse 2.6s ease-out infinite; }
@keyframes m-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(196, 181, 253, .45) }
  70%  { box-shadow: 0 0 0 7px rgba(196, 181, 253, 0) }
  100% { box-shadow: 0 0 0 0 rgba(196, 181, 253, 0) }
}

/* the hero panel — the ingest ticker that lived here was deleted by the design
   update; what remains is the shared panel shell the proof rows sit in. */
.m-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px; position: relative; overflow: hidden;
}
.m-proved {
  margin-top: 18px; padding: 11px 14px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--m-mono); font-size: 11px; letter-spacing: .03em; line-height: 1.5;
}

/* --------------------------------------------------------------- stat strip */
.m-stats {
  margin-top: 72px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.m-stat { background: var(--bg); padding: 26px 22px; }
/* No longer a figure: the design file replaced the metrics with three plain
   statements, so the cell head is a short line of prose, not a number. */
.m-stat b { display: block; font-size: 16px; color: var(--accent); font-weight: 500; line-height: 1.3; }
.m-stat p { font-size: 13px; color: var(--ink-2); margin-top: 8px; line-height: 1.5; }

/* ------------------------------------------------------------------- blocks */
.m-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; }
.m-split p + p { margin-top: 18px; }
.m-split .m-pull { border-left: 2px solid var(--accent); padding-left: 20px; color: var(--ink); }

.m-grid { display: grid; gap: 16px; }
.m-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.m-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, background .15s ease;
}
.m-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.m-card h3 { margin-bottom: 10px; }
.m-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.m-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.m-step { font-family: var(--m-mono); font-size: 12px; color: var(--accent); }
.m-who {
  font-family: var(--m-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}
.m-who--you { background: var(--accent-soft); color: var(--accent); }
.m-who--us { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--border); }
.m-tag { margin-top: auto; padding-top: 18px; font-family: var(--m-mono);
         font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

.m-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.m-chip { font-size: 13px; color: var(--ink-2); border: 1px solid var(--border);
          border-radius: 999px; padding: 7px 15px; }

.m-wide {
  border-radius: 18px; border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--bg));
  padding: 56px 48px;
}

/* The question card — the product's actual argument, shown rather than said. */
.m-q { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
.m-q__not { font-family: var(--m-mono); font-size: 10.5px; color: var(--ink-3);
            letter-spacing: .04em; margin-bottom: 16px; }
.m-q h3 { margin-bottom: 14px; }
.m-answer {
  display: block; padding: 12px 14px; margin-top: 8px;
  border: 1px solid var(--border); border-radius: 9px;
  font-size: 14px; color: var(--ink-2);
  transition: border-color .15s ease, background .15s ease;
}
.m-answer:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* ------------------------------------------------------------------ pricing */
.m-price { display: flex; flex-direction: column; height: 100%; }
.m-price--main { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); }
.m-price__badge {
  font-family: var(--m-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--accent); color: var(--bg); padding: 3px 9px; border-radius: 5px;
  align-self: flex-start; margin-bottom: 14px;
}
.m-price__fig { font-family: var(--m-mono); font-size: 30px; color: var(--ink); margin: 12px 0 4px; }
.m-price__per { font-size: 13px; color: var(--ink-3); }
.m-price ul { list-style: none; padding: 0; margin: 20px 0 0; }
.m-price li { font-size: 14px; color: var(--ink-2); padding: 7px 0 7px 24px; position: relative; }
.m-price li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); }
.m-price .m-btn { margin-top: auto; text-align: center; }

/* A placeholder must look like one. `--warn` is exactly right: not wrong,
   not checked. It is the token doing its job on a page with no figures. */
.m-placeholder {
  display: inline-block; font-family: var(--m-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid var(--warn); border-radius: 5px;
  padding: 2px 7px; margin-left: 8px; vertical-align: middle;
}

/* ---------------------------------------------------------------- close/foot */
.m-close {
  margin-top: 110px; text-align: center; position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 20px; padding: 76px 48px;
  background: var(--surface-2);
}
.m-close__glow {
  position: absolute; bottom: -160px; left: 50%; margin-left: -310px;
  width: 620px; height: 320px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(196, 181, 253, .18), transparent);
  animation: m-glow 7s ease-in-out infinite;
}
.m-close > * { position: relative; }
.m-close .m-lede { margin: 20px auto 30px; max-width: 54ch; }

.m-foot { margin-top: 110px; border-top: 1px solid var(--border); padding: 46px 0 60px; }
.m-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.m-foot p, .m-foot a { font-size: 13.5px; color: var(--ink-3); }
.m-foot a { display: block; text-decoration: none; padding: 4px 0; }
.m-foot a:hover { color: var(--ink-2); }
.m-foot h4 { font-size: 11px; font-family: var(--m-mono); letter-spacing: .1em;
             text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; font-weight: 400; }
.m-foot__base { display: flex; justify-content: space-between; gap: 20px;
                margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); }

/* ------------------------------------------------------------------ reveals
   Progressive enhancement, and it is not optional. The hidden state is scoped
   to `html.rr-js`, which JavaScript adds on mount — so with JS off nothing is
   invisible, and a page that fails to run its script still reads. */
.rr-js .m-reveal { opacity: 0; transform: translateY(20px); }
.rr-js .m-reveal.on {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 1040px) {
  :root { --m-gutter: 24px; }
  .m-hero__grid, .m-split { grid-template-columns: 1fr; gap: 44px; }
  .m-grid--4, .m-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-wide { padding: 36px 28px; }
  .m-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1040px) { .m-deck { height: 452px; margin-top: 24px; } }
@media (max-width: 720px) {
  .m-deck { height: 412px; }
  .m-section { padding-top: 72px; }
  .m-grid--4, .m-grid--3, .m-stats, .m-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .m-nav__links { display: none; }
  .m-close { padding: 52px 24px; }
  .m-wide { padding: 30px 22px; }
  .m-foot__base { flex-direction: column; }
}

/* Non-negotiable. */
@media (prefers-reduced-motion: reduce) {
  /* GUARDED ON `html:not(.rr-motion)`, and without that guard ?motion=1 is a
     half-switch that looks like a broken build.

     `!important` inside this block beats every animation and transition on the
     page. The preview switch adds `.rr-motion`, which changed the LAYOUT — the
     rotating headline appeared, the deck took its 452px height — while every
     keyframe and every transition stayed dead, because they were killed here.
     So the hero rendered in its animated shape and did not move: rr-float
     silent, the cards cutting between slots instead of gliding.

     The design file guards its own version exactly this way
     (`html:not(.rr-force-motion) * { animation:none !important }`) and I copied
     the rule without the guard. This is what Pravin was looking at, twice. */
  html:not(.rr-motion) *,
  html:not(.rr-motion) *::before,
  html:not(.rr-motion) *::after { animation: none !important; transition: none !important; }
  html:not(.rr-motion) .m-reveal { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------- mobile, found by re-reading
   Two defects in my own first pass, neither of which would have shown up on a
   desktop and both of which a phone would have made obvious.

   1. THE 1099 FACT CARDS WERE TWO-UP VIA AN INLINE `style` ATTRIBUTE. An
      inline declaration outranks every media query in this file, so that grid
      would have stayed two columns at 360px while everything around it went to
      one. A layout that cannot be overridden by its own breakpoints is not
      responsive, it is fixed and lucky. It is a class now.

   2. THE HERO GLOW COULD PUSH THE PAGE SIDEWAYS. It is 760px wide and
      absolutely positioned at `left: 6%`, so on a narrow screen its right edge
      sits well past the viewport. `max-width` caps the box but an absolutely
      positioned element still contributes to the scrollable area, and the
      symptom — a page that slides horizontally and will not sit still under a
      thumb — reads as the whole site being broken rather than as one
      decorative div. The close panel already clipped its own glow; the hero
      never did. */

.m-grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Nothing decorative may make the page scroll sideways. */
body.front-door { overflow-x: hidden; }
.m-hero { overflow: hidden; }

@media (max-width: 720px) {
  .m-grid--2up { grid-template-columns: minmax(0, 1fr); }
  /* The ticker is atmosphere, and atmosphere is what gets cut first when the
     screen is the size of a hand. The four checks and the proved band carry
     the actual meaning and stay. */
  .m-ticker { height: 118px; }
  .m-hero { padding-top: 56px; }
  .m-stats { margin-top: 64px; }
}

/* ------------------------------------------------------------------- the film
   The design file's FILM section: a 1fr / .78fr split, copy left, film right,
   vertically centred. Glow behind the frame at inset -40px, the frame itself
   at 16px radius with a deep shadow, and the mono caption underneath.
   Every value here is read off that file rather than chosen. */
.m-filmgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: 60px; align-items: center;
}
.m-filmwrap { position: relative; }
.m-filmglow {
  position: absolute; inset: -40px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(196, 181, 253, .13), transparent 70%);
  filter: blur(34px);
}
.m-filmframe {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  background: var(--bg);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .65);
}
.m-film__v { display: block; width: 100%; aspect-ratio: 4 / 5; border: 0; }
.m-filmcap {
  position: relative;
  margin-top: 14px; text-align: center;
  font-family: var(--m-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
@media (max-width: 1040px) {
  .m-filmgrid { grid-template-columns: 1fr; gap: 44px; }
  .m-filmwrap { max-width: 460px; margin: 0 auto; }
}


/* The two-phase band: cleanup from statements, then live from the bank. */
.m-phase {
  font-family: var(--m-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}

/* v4: the nav carries Sign in as text beside two buttons. */
.m-nav__signin { color: var(--ink); font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.m-nav__signin:hover { color: var(--accent); }
.m-nav .m-wrap > .m-btn { padding: 8px 14px; font-size: 14.5px; }
@media (max-width: 860px) { .m-nav__signin { display: none; } }