/* =========================================================================
   MULTI-FAMILY GENIUS — LANDING PAGE
   Branding cloned 1:1 from the product (mf-command-center/styles.css):
   the "cyanotype blueprint drafting room" — light drafting sheet by default,
   prussian "blueprint night" on the toggle, architect's-redline orange.
   ========================================================================= */

/* ---- DEFAULT: light drafting sheet (#e9eaf2) ---- */
:root{
  --paper:#e9eaf2;
  --paper-2:#f6f7fb;
  --paper-3:#dee0ee;
  --ink:#141c2e;
  --ink-soft:#3b465d;
  --line:#c7cbdb;
  --line-strong:#a3a8c1;
  --grid:rgba(27,35,52,.05);
  --orange:#d9531a;
  --orange-ink:#ffffff;
  --mint:#0a8a54;
  --cyan:#1668a8;
  --red:#c62448;
  --yellow:#946600;
  --green:#0a8a54;
  --shadow:0 10px 30px rgba(27,35,52,.12);
  --f-head:"Big Shoulders Display",Impact,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-hand:"Caveat",cursive;
  /* Big dark blocks (the hero and the Film Room screen) need their own tokens. Hard-coding
     them made them collide with the page background in night mode — the block's edge
     disappeared and the page read as having no margins. */
  --screen:#0a1a2f;          /* the Film Room "screen" — dark in both themes */
  --screen-edge:var(--line-strong);
  --hero-a:#0a2f4f;
  --hero-b:#0d3b5f;
  --hero-edge:rgba(255,255,255,.25);
}
/* ---- NIGHT: blueprint night (prussian blue) — the toggle's dark mode ----
   NOTE: the attribute value "light" means the DARK palette. That inversion is
   inherited from the product on purpose so both codebases stay in sync. ---- */
body[data-theme="light"]{
  --paper:#0a1a2f;
  --paper-2:#0d2039;
  --paper-3:#12335a;
  --ink:#e8f0fb;
  --ink-soft:#9fb6d4;
  --line:#274a72;
  --line-strong:#3a6291;
  --grid:rgba(120,170,230,.10);
  --orange:#ff6b2c;
  --orange-ink:#0a1a2f;
  --mint:#4ee6a8;
  --cyan:#46c8ff;
  --red:#ff5470;
  --yellow:#ffd166;
  --green:#4ee6a8;
  --shadow:0 10px 34px rgba(0,0,0,.4);
  /* NIGHT: the page itself is #0a1a2f, so the screen goes DARKER and the hero goes
     LIGHTER than the paper. Either way each block keeps a visible edge and the drawing
     sheet's margins stay readable. */
  --screen:#050e1a;
  --screen-edge:#3a6291;
  --hero-a:#123a5e;
  --hero-b:#18507e;
  --hero-edge:rgba(160,205,245,.45);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:104px}
html,body{margin:0;padding:0}
body{
  font-family:var(--f-body);font-size:15px;line-height:1.5;
  color:var(--ink);background:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;min-height:100vh;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* ---------- THE DRAWING SHEET ----------
   Everything on this page lives on one centred sheet with real paper either side, and
   NOTHING bleeds to the window edge.

   The gutter is PROPORTIONAL, not a fixed 64px. With a fixed gutter the sheet stops
   being capped below ~1384px and swells to 95% of the window: the blocks look huge and
   the margins vanish. A clamped vw gutter keeps the same generous paper at every width,
   and at wide viewports it lands on exactly the product's 1320px sheet. */
:root{ --sheet:1320px; --gutter:clamp(20px,5.5vw,300px); }
.wrap{width:min(var(--sheet),calc(100% - var(--gutter) * 2));margin-left:auto;margin-right:auto}

/* A tinted section (problem / try-it / contact) is a BLOCK ON THE SHEET, not a
   full-bleed band. Full bleed ran the tint under the fixed drafting frame and read as
   "the page has no margins" — the product never does this, so neither does this page. */
.band{width:min(var(--sheet),calc(100% - var(--gutter) * 2));margin:56px auto 0;
  border:1.5px solid var(--line-strong);border-radius:4px;background:var(--paper-3);
  padding:40px 32px 44px}
.band > .wrap{width:100%}
@media (max-width:900px){
  .band{padding:38px 20px 40px;margin-top:44px}
}
a{color:var(--cyan);text-decoration:none}
button{font-family:var(--f-mono);cursor:pointer;color:inherit;background:none;border:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-head);letter-spacing:.5px;line-height:.95}
label{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:1px}
/* height:auto is NOT optional — every screenshot carries width/height attributes, and
   without it the attribute height wins while the width is clamped, squashing the image. */
img{max-width:100%;height:auto;display:block}
::selection{background:var(--orange);color:var(--orange-ink)}

/* ---------- drafting frame ---------- */
.frame{position:fixed;inset:10px;border:2px solid var(--line-strong);pointer-events:none;z-index:5}
.frame .ticks{position:absolute;background-repeat:repeat}
.ticks-top,.ticks-bottom{left:0;right:0;height:10px}
.ticks-left,.ticks-right{top:0;bottom:0;width:10px}
.ticks-top{top:-1px;background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 40px)}
.ticks-bottom{bottom:-1px;background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 40px)}
.ticks-left{left:-1px;background-image:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 40px)}
.ticks-right{right:-1px;background-image:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 40px)}
.corner{position:absolute;width:14px;height:14px;border:2px solid var(--orange)}
.corner.tl{top:-2px;left:-2px;border-right:0;border-bottom:0}
.corner.tr{top:-2px;right:-2px;border-left:0;border-bottom:0}
.corner.bl{bottom:-2px;left:-2px;border-right:0;border-top:0}
.corner.br{bottom:-2px;right:-2px;border-left:0;border-top:0}

/* ---------- title block header ---------- */
#titleblock{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;gap:16px;
  align-items:center;padding:10px 22px;margin:14px auto 0;border:1.5px solid var(--line-strong);border-radius:4px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper));backdrop-filter:blur(8px)}
.tb-left{display:flex;gap:14px;align-items:center;min-width:0}
.tb-logo{font-size:32px;color:var(--orange);line-height:1;cursor:pointer}
.tb-name h1{font-size:clamp(17px,2.2vw,27px);font-weight:900;color:var(--orange);white-space:nowrap}
.tb-name h1 span{color:inherit}
.tb-name h1 span::before{content:" "}
.tb-sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:2px;color:var(--ink-soft);margin-top:3px;white-space:nowrap}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-nav{display:flex;gap:4px}
.tb-nav a{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-soft);padding:6px 9px;border:1px solid transparent;border-radius:2px}
.tb-nav a:hover{color:var(--orange);border-color:var(--line)}
/* A narrower sheet leaves the title block less room, so the nav goes compact before it
   goes away. white-space:nowrap above stops a link ever breaking onto a second line —
   that is what made the header two rows tall. */
@media (max-width:1480px){
  #titleblock{padding:10px 16px}
  .tb-nav{gap:2px}
  .tb-nav a{font-size:9.5px;padding:5px 6px;letter-spacing:.4px}
}
/* The drawing-set subtitle is the longest thing in the title block; it goes before the
   nav does, so the header never becomes two rows tall. */
@media (max-width:1360px){ .tb-sub{display:none} }
@media (max-width:1200px){ .tb-nav{display:none} }
.hbtn{border:1px solid var(--line-strong);padding:6px 11px;font-size:10.5px;letter-spacing:1px;
  background:var(--paper);transition:.15s;white-space:nowrap;border-radius:2px}
.hbtn:hover{background:var(--orange);color:var(--orange-ink);border-color:var(--orange)}
.hbtn.buy{background:var(--orange);color:var(--orange-ink);border-color:var(--orange);font-weight:600}
.hbtn.buy:hover{filter:brightness(1.12)}

/* ---------- shared bits ---------- */
.dwg-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:2.5px;color:var(--orange);
  border:1px solid var(--orange);display:inline-block;padding:2px 8px;margin-bottom:14px}
.stamp{border:2px solid var(--orange);color:var(--orange);background:transparent;padding:9px 16px;
  font-weight:600;letter-spacing:1.2px;font-size:11.5px;transform:rotate(-.6deg);transition:.15s;
  text-transform:uppercase;border-radius:3px;display:inline-block;text-align:center;font-family:var(--f-mono)}
.stamp:hover{background:var(--orange);color:var(--orange-ink);transform:rotate(0) scale(1.02)}
.stamp.solid{background:var(--orange);color:var(--orange-ink)}
.stamp.solid:hover{filter:brightness(1.12)}
.stamp.ghost{border-color:var(--line-strong);color:var(--ink)}
.stamp.ghost:hover{background:var(--ink);color:var(--paper)}
.stamp.sm{padding:7px 12px;font-size:10.5px;letter-spacing:1px}
.stamp.big{padding:12px 24px;font-size:13px}
.stamp[disabled]{opacity:.5;cursor:not-allowed}
.mini{border:1px solid var(--line-strong);padding:5px 10px;font-size:10.5px;letter-spacing:1px;
  border-radius:2px;background:var(--paper-2);transition:.15s}
.mini:hover{border-color:var(--orange);color:var(--orange)}
.hand{font-family:var(--f-hand);font-size:20px;color:var(--orange);line-height:1.15}
.mono{font-family:var(--f-mono)}
.sec{padding:56px 0 10px}
.sec-head{max-width:880px;margin-bottom:24px}
.sec-head h2{font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.04}
.sec-head p{font-size:16px;color:var(--ink-soft);margin:12px 0 0;max-width:740px}
.panel{border:1.5px solid var(--line-strong);border-radius:4px;background:var(--paper-2);
  padding:20px;box-shadow:var(--shadow)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }

/* ---------- HERO — the hook ---------- */
#hero{position:relative;margin:14px auto 0;border:1.5px solid var(--hero-edge);border-radius:4px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
   radial-gradient(circle at 20% 20%,rgba(92,216,255,.12),transparent 42%),
   repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 22px),
   linear-gradient(135deg,var(--hero-a),var(--hero-b) 60%,var(--hero-a));
  animation:drift 40s linear infinite}
@keyframes drift{to{background-position:0 0,600px 0,0 0}}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none}}
.hero-inner{position:relative;padding:34px 36px 30px;color:#eafff8;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:32px;align-items:center}
@media (max-width:980px){ .hero-inner{grid-template-columns:1fr;padding:30px 24px} }
#hero .dwg-tag{color:#ff8a57;border-color:#ff8a57}
/* The headline is three fixed lines and must NEVER become four. Each line is a
   nowrap block, and the type is sized against the COLUMN (cqi), not the viewport:
   a vw-based clamp knows nothing about how wide this column actually is, which is
   why "You Have a Workflow Problem!" kept wrapping until the window was widened.
   The vw clamp stays first as the fallback for browsers without container queries. */
.hero-copy{container-type:inline-size}
.hero-h{font-weight:800;line-height:1.08;margin-bottom:16px;text-align:center;
  font-size:clamp(24px,3.2vw,46px);
  font-size:min(46px,8.1cqi)}
.hero-h .l{display:block;white-space:nowrap}
.hero-h .hl{color:#ff4d63}                 /* the payoff line, in red */
.hero-h em{font-style:normal;color:#ffb38a}
.hero-p{font-size:15.5px;color:#cfe6ff;max-width:600px;margin:0 0 10px}
.hero-p b{color:#fff}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
#hero .stamp{border-color:#ff8a57;color:#ff8a57}
#hero .stamp:hover{background:#ff8a57;color:#0a1a2f}
#hero .stamp.solid{background:#ff8a57;color:#0a1a2f}
#hero .stamp.solid:hover{filter:brightness(1.1)}
#hero .stamp.ghost{border-color:rgba(255,255,255,.6);color:#f2f7ff;font-weight:700}
#hero .stamp.ghost:hover{background:#f2f7ff;color:#0a1a2f}
.hero-note{font-family:var(--f-mono);font-size:10px;letter-spacing:1px;color:#9dc4e8;margin-top:16px}
.hero-shot{border:1px solid var(--hero-edge);border-radius:3px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.45);transform:rotate(.5deg)}
.hero-shot img{width:100%}
/* stat strip under the hero */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1.5px solid var(--line-strong);
  border-top:0;background:var(--paper-2);margin:0 auto}
.trust div{padding:14px 16px;border-right:1px solid var(--line);text-align:center}
.trust div:last-child{border-right:0}
.trust b{display:block;font-family:var(--f-head);font-size:24px;font-weight:800;color:var(--orange);line-height:1}
.trust span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:1.5px;color:var(--ink-soft);text-transform:uppercase}
@media (max-width:760px){ .trust{grid-template-columns:repeat(2,1fr)} .trust div{border-bottom:1px solid var(--line)} }

/* ---------- HERO FILM (js/intro.js) ----------
   The 90-second H-P-A-S-CTA case. Lives inside the hero, so it is dark in BOTH
   themes on purpose — it reads as a screen, not as a panel. Scenes are DOM, so
   the whole script is real text: crawlable, translatable, and editable without
   re-rendering a video. */
.intro-stage{border:1.5px solid var(--hero-edge);border-radius:4px;overflow:hidden;
  background:#04101d;box-shadow:0 18px 46px rgba(0,0,0,.42)}
.intro-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:
  radial-gradient(circle at 78% 12%,rgba(92,216,255,.10),transparent 46%),
  linear-gradient(160deg,#04101d,#07203a 62%,#04101d)}

/* every scene stacks; only the current one is on */
.isc{position:absolute;inset:0;padding:26px 28px 96px;display:flex;flex-direction:column;
  justify-content:center;gap:14px;opacity:0;visibility:hidden;transition:opacity .45s ease;
  color:#eafff8;text-align:center;align-items:center}
.isc.on{opacity:1;visibility:visible}
/* Elements that have not reached their beat GHOST IN at low opacity rather than
   hiding: they already hold their space, so hiding them left the frame empty and
   top-heavy for the first line of every scene. Dim -> lit reads as the scene
   filling in, with no reflow. Cross-fading elements (.excl) stay fully hidden. */
.isc [data-step]{opacity:.16;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease;transition-delay:var(--d,0ms)}
.isc [data-step].lit{opacity:1;transform:none}
.isc [data-step]:not(.lit){pointer-events:none}   /* a ghosted CTA must not be clickable */
.isc .excl{opacity:0;transform:none}
.isc .excl.lit{opacity:1}
.isc-kick{font-family:var(--f-mono);font-size:10px;letter-spacing:2.5px;color:#ff8a57;
  text-transform:uppercase}

/* --- scene 1: the tabs pile up, the clock runs --- */
.isc-tabs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:560px}
.isc-tabs i{font-family:var(--f-mono);font-size:11px;font-style:normal;letter-spacing:.4px;
  color:#bcd8f5;border:1px solid rgba(160,205,245,.35);border-radius:3px;padding:5px 10px;
  background:rgba(10,26,47,.6);white-space:nowrap}
.isc-clock{margin-top:6px}
.isc-clock b{display:block;font-family:var(--f-mono);font-size:clamp(30px,4.4vw,50px);
  font-weight:600;color:#ff8a57;line-height:1;letter-spacing:2px}
.isc-clock span{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:#9dc4e8;
  text-transform:uppercase}

/* --- scene 2: the six jobs --- */
.isc-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:600px;width:100%}
.isc-chain i{font-style:normal;font-size:12.5px;line-height:1.25;color:#eafff8;text-align:left;
  border:1px solid rgba(160,205,245,.30);border-left:2px solid #ff8a57;border-radius:3px;
  padding:9px 10px;background:rgba(10,26,47,.55);display:flex;gap:8px;align-items:baseline}
.isc-chain i b{font-family:var(--f-mono);font-size:10px;color:#ff8a57}
.isc-warn{font-family:var(--f-mono);font-size:12px;letter-spacing:1px;color:#ffb38a;
  border-top:1px dashed rgba(255,138,87,.5);padding-top:12px;margin-top:4px}
@media (max-width:620px){ .isc-chain{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* --- scene 3: what it already cost --- */
.isc-miss{display:flex;flex-direction:column;gap:7px;max-width:440px;width:100%}
.isc-miss i{font-style:normal;font-size:13.5px;color:#cfe6ff;text-align:left;padding:7px 12px;
  border-radius:3px;background:rgba(255,84,112,.10);border:1px solid rgba(255,84,112,.35);
  position:relative}
.isc-miss i.lit{text-decoration:line-through;text-decoration-color:#ff5470;
  text-decoration-thickness:2px;color:#9fb6d4}
.isc-thesis{font-family:var(--f-head);font-size:clamp(19px,2.5vw,27px);line-height:1.15;
  font-weight:700;max-width:600px;color:#eafff8}
.isc-thesis b{color:#ff8a57}

/* --- scene 4: the product, finally --- */
.isc-mark{font-family:var(--f-head);font-weight:900;font-size:clamp(22px,3vw,34px);
  color:#ff8a57;letter-spacing:.5px;line-height:1}
.isc-mark span::before{content:" "}
.isc-shots{position:relative;width:100%;max-width:600px;flex:1;min-height:0;margin-top:2px}
.isc-shots figure{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;
  transition:opacity .5s ease,transform .5s ease}
.isc-shots img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:top center;
  border:1px solid rgba(160,205,245,.4);border-radius:3px;background:#0a1a2f}
.isc-shots figcaption{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1px;
  color:#bcd8f5;padding-top:7px}

/* --- scene 5: the ask --- */
.isc-line{font-family:var(--f-head);font-size:clamp(19px,2.4vw,26px);font-weight:700;
  line-height:1.18;margin:0;max-width:520px}
.isc-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.isc .stamp{border-color:#ff8a57;color:#ff8a57}
.isc .stamp:hover{background:#ff8a57;color:#0a1a2f}
.isc .stamp.solid{background:#ff8a57;color:#0a1a2f}
.isc .stamp.ghost{border-color:rgba(255,255,255,.6);color:#f2f7ff}
.isc .stamp.ghost:hover{background:#f2f7ff;color:#0a1a2f}
.isc-foot{font-family:var(--f-mono);font-size:9.5px;letter-spacing:1.2px;color:#9dc4e8}

/* --- caption + idle poster --- */
.intro-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 20px 18px;z-index:4;
  background:linear-gradient(0deg,rgba(4,16,29,.97),rgba(4,16,29,.86) 58%,transparent);
  color:#eafff8;font-size:14px;line-height:1.4;min-height:74px;display:flex;align-items:flex-end;
  justify-content:center;text-align:center;opacity:0;transition:opacity .3s}
.intro-cap.on{opacity:1}
.intro-stage.ended .intro-cap{opacity:0}
.intro-idle{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;text-align:center;padding:24px;
  /* nearly opaque: at .86 the ghosted scene behind showed through and collided
     with the poster's own headline */
  background:rgba(4,16,29,.975);backdrop-filter:blur(3px);color:#eafff8}
.intro-tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:2.5px;color:#ff8a57;
  border:1px solid #ff8a57;padding:3px 9px}
.intro-idle h3{font-size:clamp(18px,2.3vw,26px);font-weight:800;line-height:1.14;max-width:460px;color:#fff}
.intro-idle .mono{font-size:9.5px;letter-spacing:1.6px;color:#9dc4e8;margin:0}
.intro-play{width:62px;height:62px;border-radius:50%;border:2px solid #ff8a57;color:#ff8a57;
  font-size:20px;display:flex;align-items:center;justify-content:center;transition:.18s;
  background:rgba(10,26,47,.6)}
.intro-play:hover{background:#ff8a57;color:#0a1a2f;transform:scale(1.06)}

/* --- controls + progress bar ---
   The five segments are chapters, but they are NOT labelled on screen: naming the
   persuasion structure (HOOK / AGITATE / THE FIX) to the person being persuaded
   breaks the spell. The labels live in CHAPTERS in js/intro.js and in the tests. */
.intro-bar{display:flex;align-items:center;gap:7px;padding:8px 10px;flex-wrap:wrap;
  background:rgba(10,26,47,.9);border-top:1px solid rgba(160,205,245,.25)}
.intro-bar .mini{background:rgba(4,16,29,.6);border-color:rgba(160,205,245,.4);color:#cfe6ff}
.intro-bar .mini:hover{border-color:#ff8a57;color:#ff8a57}
.intro-now{font-family:var(--f-mono);font-size:9.5px;letter-spacing:1.2px;color:#9dc4e8;
  margin-left:auto;white-space:nowrap}
.intro-chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;
  background:rgba(10,26,47,.9);padding:0 10px 11px}
.intro-chapters i{font-style:normal}
.intro-chapters b{display:block;height:3px;width:0;background:#ff8a57;border-radius:2px;
  transition:width .4s ease}
.intro-chapters i{border-top:3px solid rgba(160,205,245,.22);border-radius:2px}


/* ---------- FILM ROOM player ---------- */
.film-wrap{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px}
@media (max-width:1020px){ .film-wrap{grid-template-columns:1fr} }
.film-stage{border:1.5px solid var(--screen-edge);border-radius:4px;overflow:hidden;background:var(--screen)}
.film-screen{position:relative;aspect-ratio:1500/940;background:var(--screen);overflow:hidden}
.film-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .45s ease}
.film-screen img.on{opacity:1}
.film-spot{position:absolute;border:2px solid #ff8a57;border-radius:3px;box-shadow:0 0 0 9999px rgba(6,18,32,.60);
  opacity:0;transition:all .55s cubic-bezier(.4,0,.2,1);pointer-events:none}
.film-spot.on{opacity:1}
.film-cap{position:absolute;left:0;right:0;bottom:0;padding:20px 24px 22px;
  background:linear-gradient(0deg,rgba(6,18,32,.97),rgba(6,18,32,.88) 58%,transparent);
  color:#eafff8;font-size:15px;line-height:1.42;min-height:84px;display:flex;align-items:flex-end;
  opacity:0;transition:opacity .3s}
.film-cap.on{opacity:1}
.film-cap b{color:#ffb38a}
@media (max-width:640px){ .film-cap{font-size:14px;padding:14px 16px;min-height:78px} }
.film-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:15px;text-align:center;padding:24px;background:rgba(6,18,32,.74);color:#eafff8;z-index:3}
.film-idle h3{font-size:clamp(19px,2.2vw,28px);font-weight:800;color:#fff;max-width:660px;line-height:1.05}
.film-idle p{color:#bcd8f5;max-width:540px;margin:0;font-size:15px}
.film-play{width:76px;height:76px;border-radius:50%;border:2px solid #ff8a57;color:#ff8a57;font-size:24px;
  display:flex;align-items:center;justify-content:center;transition:.18s;background:rgba(10,26,47,.6)}
.film-play:hover{background:#ff8a57;color:#0a1a2f;transform:scale(1.06)}
.film-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);
  background:var(--paper-2);flex-wrap:wrap}
.film-bar .now{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1px;color:var(--ink-soft);
  flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.film-dots{display:flex;gap:4px}
.film-dots i{width:20px;height:4px;background:var(--line-strong);border-radius:2px;transition:.2s}
.film-dots i.on{background:var(--orange)}
.film-list{border:1.5px solid var(--line-strong);border-radius:4px;background:var(--paper-2);
  max-height:600px;overflow:auto}
.film-list h4{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:var(--ink-soft);
  padding:12px 14px 8px;font-weight:500}
.reel-btn{display:block;width:100%;text-align:left;padding:11px 14px;border-top:1px solid var(--line);
  transition:.15s;font-family:var(--f-body)}
.reel-btn:hover{background:var(--paper-3)}
.reel-btn.on{background:var(--paper-3);box-shadow:inset 3px 0 0 var(--orange)}
.reel-btn .rc{font-family:var(--f-mono);font-size:9.5px;letter-spacing:1.5px;color:var(--orange)}
.reel-btn .rt{font-family:var(--f-head);font-size:17px;font-weight:700;display:block;line-height:1.05;margin-top:2px}
.reel-btn .rd{font-size:12.5px;color:var(--ink-soft);display:block;margin-top:3px}
.voice-note{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.5px;color:var(--ink-soft);
  margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- PROBLEM / AGGRAVATE ---------- */
/* #problem, #tryit and #contact carry .band — the sheet block does the width,
   border, tint and padding. Nothing to add here but the inner spacing. */
.prob-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
@media (max-width:900px){ .prob-grid{grid-template-columns:1fr} }
.prob-card{border:1.5px solid var(--line-strong);background:var(--paper);border-radius:4px;padding:18px}
.prob-card .n{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:var(--red)}
.prob-card h3{font-size:20px;font-weight:800;margin:7px 0 7px}
.prob-card p{margin:0;color:var(--ink-soft);font-size:14.5px}
.clock{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:26px}
.clock div{border:1px dashed var(--line-strong);border-radius:3px;padding:14px 16px;background:var(--paper)}
.clock b{font-family:var(--f-head);font-size:26px;font-weight:800;display:block;line-height:1;color:var(--red)}
.clock span{font-family:var(--f-mono);font-size:10px;letter-spacing:1.4px;color:var(--ink-soft);text-transform:uppercase}

.agg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center}
@media (max-width:940px){ .agg{grid-template-columns:1fr} }
.agg-list{list-style:none;padding:0;margin:0}
.agg-list li{border-left:3px solid var(--red);padding:2px 0 2px 16px;margin-bottom:20px}
.agg-list b{display:block;font-family:var(--f-head);font-size:20px;font-weight:800;line-height:1.06;margin-bottom:4px}
.agg-list span{color:var(--ink-soft);font-size:14.5px}
.cost-box{border:2px solid var(--red);border-radius:4px;padding:24px;background:var(--paper-2)}
.cost-box h3{font-size:21px;font-weight:800;margin-bottom:4px}
.cost-box .lead{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px}
.cost-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:13px}
.cost-row b{color:var(--red)}
.cost-tot{margin-top:12px;padding-top:12px;border-top:2px solid var(--ink);display:flex;
  justify-content:space-between;align-items:baseline;gap:12px}
.cost-tot label{font-size:11px}
.cost-tot b{font-family:var(--f-head);font-size:29px;font-weight:800;color:var(--red);line-height:1}
.cost-note{font-size:13px;color:var(--ink-soft);margin:12px 0 0}

/* ---------- SOLUTION / PROOF ---------- */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:32px;align-items:center;
  padding:30px 0;border-bottom:1px dashed var(--line)}
.feat.flip{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.feat.flip .feat-copy{order:2}
@media (max-width:940px){ .feat,.feat.flip{grid-template-columns:1fr} .feat.flip .feat-copy{order:0} }
.feat-copy .code{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:var(--orange)}
.feat-copy h3{font-size:clamp(21px,2.2vw,28px);font-weight:800;margin:6px 0 9px;line-height:1.05}
.feat-copy p{color:var(--ink-soft);margin:0 0 11px;font-size:15px}
.feat-copy ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:14px}
.feat-copy ul li{margin-bottom:5px}
.feat-copy ul li b{color:var(--ink)}
.shot{border:1.5px solid var(--line-strong);border-radius:4px;overflow:hidden;background:var(--paper-2);
  box-shadow:var(--shadow);margin:0}
.shot img{width:100%}
.shot figcaption{font-family:var(--f-mono);font-size:10px;letter-spacing:1.4px;color:var(--ink-soft);
  padding:8px 12px;border-top:1px solid var(--line);background:var(--paper-2)}
.proof-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:34px 0 0}
.proof-strip div{border:1.5px solid var(--line-strong);border-radius:4px;padding:18px;background:var(--paper-2)}
.proof-strip b{display:block;font-family:var(--f-head);font-size:25px;font-weight:800;color:var(--mint);line-height:1}
.proof-strip span{font-size:13px;color:var(--ink-soft)}
.inside{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:26px}
.inside div{border:1px solid var(--line);border-radius:3px;padding:14px 16px;background:var(--paper-2)}
.inside b{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:1.4px;color:var(--orange);margin-bottom:4px}
.inside span{font-size:13.5px;color:var(--ink-soft)}

/* ---------- TRY IT — the calculator ---------- */

.calc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.calc-tab{flex:1;min-width:200px;border:1.5px solid var(--line-strong);background:var(--paper-2);
  padding:11px 15px;text-align:left;transition:.15s;border-radius:2px}
.calc-tab .code{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:var(--ink-soft);display:block}
.calc-tab .name{font-family:var(--f-head);font-weight:800;font-size:17px;display:block;margin-top:2px;line-height:1}
.calc-tab:hover{border-color:var(--orange)}
.calc-tab.on{background:var(--orange);border-color:var(--orange)}
.calc-tab.on .code{color:var(--orange-ink);opacity:.85}
.calc-tab.on .name{color:var(--orange-ink)}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:940px){ .calc-grid{grid-template-columns:1fr} }
.calc-box{border:1.5px solid var(--line-strong);border-radius:4px;background:var(--paper-2);overflow:hidden}
.calc-box > h3{font-family:var(--f-mono);font-size:11px;letter-spacing:2px;font-weight:500;
  background:#141c2e;color:#e8f0fb;padding:10px 16px}
body[data-theme="light"] .calc-box > h3{background:#12335a}
.calc-body{padding:6px 16px 16px}
.crow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}
.crow label{font-size:12.5px;letter-spacing:.3px;color:var(--ink-soft);flex:1;text-transform:none;
  font-family:var(--f-body)}
.crow .v{font-family:var(--f-mono);font-size:13.5px;font-weight:600;text-align:right;white-space:nowrap}
.crow input{font-family:var(--f-mono);font-size:13.5px;text-align:right;width:138px;padding:6px 9px;
  border:1.5px solid var(--line-strong);border-radius:2px;background:var(--paper);color:var(--ink)}
.crow input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(217,83,26,.16)}
.crow.edit label{color:var(--ink);font-weight:600}
.crow.tot{border-top:2px solid var(--ink);border-bottom:0;margin-top:6px;padding-top:12px}
.crow.tot label{font-family:var(--f-head);font-size:17px;font-weight:800;letter-spacing:.5px;color:var(--ink);text-transform:uppercase}
.crow.tot .v{font-family:var(--f-head);font-size:22px;font-weight:800;color:var(--mint);line-height:1}
.verdict{margin-top:16px;border:2px solid var(--line-strong);border-radius:4px;padding:16px;text-align:center;background:var(--paper)}
.verdict .lab{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:var(--ink-soft)}
.verdict .val{font-family:var(--f-head);font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.05;margin:4px 0}
.verdict .sub{font-size:13px;color:var(--ink-soft)}
.verdict.green{border-color:var(--green)} .verdict.green .val{color:var(--green)}
.verdict.yellow{border-color:var(--yellow)} .verdict.yellow .val{color:var(--yellow)}
.verdict.red{border-color:var(--red)} .verdict.red .val{color:var(--red)}
.math{margin-top:16px;border:1px dashed var(--line-strong);border-radius:3px;padding:14px 16px;
  background:var(--paper);font-family:var(--f-mono);font-size:12px;line-height:1.8}
.math .step{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.math .step i{color:var(--ink-soft);font-style:normal}
.math h5{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;margin:0 0 8px;color:var(--orange);font-weight:500}
.calc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
.calc-hint{font-family:var(--f-hand);font-size:18px;color:var(--orange);flex:1;min-width:200px}

/* ---------- PRICING ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:16px;align-items:stretch}
@media (max-width:980px){ .price-grid{grid-template-columns:1fr} }
.tier{border:1.5px solid var(--line-strong);border-radius:4px;background:var(--paper-2);
  padding:22px 20px 20px;display:flex;flex-direction:column;position:relative}
.tier.best{border:2.5px solid var(--orange);box-shadow:0 16px 44px rgba(217,83,26,.20)}
.tier .flag{position:absolute;top:-13px;left:24px;background:var(--orange);color:var(--orange-ink);
  font-family:var(--f-mono);font-size:10px;letter-spacing:2px;padding:4px 10px;border-radius:2px}
.tier .code{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:var(--ink-soft)}
.tier h3{font-size:24px;font-weight:800;margin:6px 0 4px}
.tier .who{font-size:13px;color:var(--ink-soft);min-height:38px}
.tier .amt{font-family:var(--f-head);font-size:42px;font-weight:800;line-height:1;margin:12px 0 2px;color:var(--orange)}
.tier .amt small{font-family:var(--f-mono);font-size:13px;font-weight:400;color:var(--ink-soft);letter-spacing:1px}
.tier .terms{font-family:var(--f-mono);font-size:10.5px;letter-spacing:1px;color:var(--ink-soft);margin-bottom:16px}
.tier ul{list-style:none;padding:0;margin:0 0 20px;flex:1}
.tier li{padding:6px 0 6px 22px;position:relative;font-size:13.5px;border-bottom:1px dashed var(--line)}
.tier li:before{content:"\2713";position:absolute;left:0;color:var(--mint);font-weight:700}
.tier li.no{color:var(--ink-soft)}
.tier li.no:before{content:"\2014";color:var(--line-strong)}
.tier .stamp{width:100%}
.tier .after{font-family:var(--f-mono);font-size:10px;letter-spacing:.8px;color:var(--ink-soft);
  text-align:center;margin-top:10px}
.svc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:18px}
.svc-list div{border:1px solid var(--line);border-radius:3px;padding:13px 15px;background:var(--paper-2)}
.svc-list b{display:block;font-size:15px;font-family:var(--f-head);font-weight:800;letter-spacing:.3px}
.svc-list em{font-style:normal;font-family:var(--f-mono);font-size:12px;color:var(--orange);display:block;margin:2px 0 4px}
.svc-list span{font-size:13px;color:var(--ink-soft)}
.guarantee{margin-top:26px;border:2px dashed var(--mint);border-radius:4px;padding:22px 24px;
  background:var(--paper-2);display:grid;grid-template-columns:66px 1fr;gap:18px;align-items:center}
.guarantee .seal{font-size:36px;text-align:center;line-height:1}
.guarantee h4{font-size:20px;font-weight:800;margin-bottom:4px}
.guarantee p{margin:0;color:var(--ink-soft);font-size:14px}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}
@media (max-width:900px){ .faq{grid-template-columns:1fr} }
.faq details{border:1.5px solid var(--line-strong);border-radius:4px;background:var(--paper-2);padding:14px 18px;height:fit-content}
.faq summary{font-family:var(--f-head);font-size:18px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--orange);font-family:var(--f-mono);font-size:22px}
.faq details[open] summary:after{content:"\2013"}
.faq p{margin:9px 0 2px;color:var(--ink-soft);font-size:14px}

/* ---------- CONTACT ---------- */

.contact-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:start}
@media (max-width:940px){ .contact-grid{grid-template-columns:1fr} }
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:10.5px;letter-spacing:1.6px;color:var(--ink-soft);margin-bottom:5px}
.form-row input,.form-row select,.form-row textarea{width:100%;font-family:var(--f-mono);font-size:13.5px;
  padding:9px 11px;border:1.5px solid var(--line-strong);border-radius:2px;background:var(--paper);color:var(--ink)}
.form-row textarea{font-family:var(--f-body);min-height:92px;resize:vertical}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(217,83,26,.16)}
.form-row input.bad,.form-row select.bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(198,36,72,.14)}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){ .form-2{grid-template-columns:1fr} }
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:12px;font-family:var(--f-mono);font-size:12.5px;padding:11px 14px;border-radius:3px;
  border:1px solid var(--line-strong);background:var(--paper)}
.form-msg.ok{border-color:var(--mint);color:var(--mint)}
.form-msg.err{border-color:var(--red);color:var(--red)}
.contact-side .panel{margin-bottom:14px}
.contact-side h3{font-size:21px;font-weight:800;margin-bottom:7px}
.contact-side p{color:var(--ink-soft);margin:0 0 11px;font-size:14.5px}
.contact-side .lines{font-family:var(--f-mono);font-size:12.5px;line-height:2}
.privacy{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-soft);margin-top:10px;line-height:1.7}

/* ---------- footer title block ---------- */
#footerblock{display:flex;flex-wrap:wrap;border:1.5px solid var(--line-strong);border-radius:4px;
  margin:40px auto 22px;background:var(--paper-2)}
.fb-cell{padding:10px 16px;border-right:1px solid var(--line);min-width:128px}
.fb-cell:last-child{border-right:0}
.fb-cell.grow{flex:1}
.fb-cell label{display:block;font-size:8.5px;letter-spacing:1.6px;color:var(--ink-soft)}
.fb-cell b{font-family:var(--f-mono);font-size:13px}
.fb-cell.drawn b{font-family:var(--f-hand);font-size:24px;color:var(--cyan);font-weight:500}
.legal{font-family:var(--f-mono);font-size:10.5px;line-height:1.8;color:var(--ink-soft);
  margin:0 auto;padding-bottom:56px}
.legal b{color:var(--ink)}

/* ---------- toasts + modal ---------- */
#toasts{position:fixed;right:22px;bottom:22px;width:340px;z-index:80;pointer-events:none;
  display:flex;flex-direction:column;gap:8px}
#toasts .toast{pointer-events:auto;border:1.5px solid var(--line-strong);border-left:4px solid var(--orange);
  background:var(--paper-2);padding:12px 14px;border-radius:3px;font-family:var(--f-mono);font-size:12.5px;
  box-shadow:var(--shadow);animation:tin .25s ease}
#toasts .toast.err{border-left-color:var(--red)}
#toasts .toast.ok{border-left-color:var(--mint)}
@keyframes tin{from{opacity:0;transform:translateX(20px)}}
.overlay{position:fixed;inset:0;z-index:70;background:rgba(10,26,47,.72);display:flex;
  align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.modal{background:var(--paper);border:2px solid var(--line-strong);border-radius:4px;width:min(580px,100%);
  max-height:88vh;overflow:auto;box-shadow:var(--shadow)}
.modal .mhead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1.5px solid var(--line-strong);background:var(--paper-2);position:sticky;top:0;z-index:2}
.modal .mhead h3{font-size:24px;font-weight:800}
.modal .mbody{padding:20px}
.modal .mbody p{margin:0 0 12px;color:var(--ink-soft)}
.modal .mfoot{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);
  flex-wrap:wrap}
.x{font-size:20px;line-height:1;padding:2px 9px;border:1px solid var(--line-strong);border-radius:2px}
.x:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- print: the pre-qualification worksheet ---------- */
#printSheet{display:none}
#handCheck{display:none}
@media print{
  body{background:#fff!important;background-image:none!important;color:#000!important}
  .frame,#titleblock,#hero,.trust,#film,.intro-stage,#problem,#aggravate,#solution,#pricing,#faq,#contact,
  #footerblock,#toasts,.overlay,.legal,.calc-tabs,.calc-actions,.calc-hint,#tryit .sec-head{display:none!important}
  #tryit{background:#fff!important;border:0!important;padding:0!important;margin:0!important}
  .wrap{width:auto!important}
  .calc-grid{display:block!important}
  .calc-box,.verdict,.math,#handCheck{break-inside:avoid;page-break-inside:avoid}
  #printSheet{display:block!important;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px}
  #printSheet .ph-t{font-family:var(--f-head);font-size:24px;letter-spacing:.5px}
  #printSheet .ph-m{font-family:var(--f-mono);font-size:10px;color:#333;margin-top:3px}
  .calc-box{border:1px solid #000!important;box-shadow:none!important;background:#fff!important;margin-bottom:12px}
  .calc-box > h3{background:#fff!important;color:#000!important;border-bottom:1px solid #000}
  .crow{border-bottom:1px solid #999!important}
  .crow input{border:0!important;background:#fff!important;color:#000!important;font-weight:700;width:auto;padding:0}
  .verdict,.math{background:#fff!important;border-color:#000!important}
  .verdict .val,.crow.tot .v,.crow .v{color:#000!important}
  button{display:none!important}
  #handCheck{display:block!important;margin-top:14px;border:1px solid #000;padding:14px 16px;
    font-family:var(--f-mono);font-size:11.5px;line-height:2.1}
  #handCheck h5{font-family:var(--f-mono);font-size:11px;letter-spacing:2px;margin:0 0 8px}
  #handCheck .blank{display:inline-block;min-width:120px;border-bottom:1px solid #000;margin-left:6px}
  #handCheck .foot{margin-top:10px;font-size:10px;color:#333}
}