/* 2026-09-02 - the LO section reuses the report section's closing panel
   (.rpEnd / .rpEndNote / .rpLegal). Those rules were scoped to #report,
   so without the #lo twins below the LO block rendered as unstyled
   left-aligned text. Twinned selectors, not duplicated declarations. */
/* Cribfolio Pro — website prototype styles.
   Mirrors the app's dark brand (colors from src/theme/colors.js, Montserrat).
   Prototype only — not wired to backend. Zero effect on the RN app. */

:root{
  --bg:#07070F; --bg-2:#0C0E1C; --card:#10121F; --card-2:#141726;
  --cyan:#38D9F5; --purple:#B090FF; --purple-d:#9070FF; --teal:#2EE8A0;
  --lime:#CCFF35; --pink:#FF6B9A; --orange:#FF8840;
  /* 2026-08-16 — three places wrote `var(--warn, <a slightly softer orange>)` (an old name for this)
     and --warn was NEVER DEFINED anywhere in the repo, so the FALLBACK is what
     always painted: a fourth orange, ~23 points of green away from --orange.
     Nobody could point at it and say it looked wrong; sitting next to the real
     orange it just read as a rendering artefact. Defined here AS the orange
     token rather than as a second hex, so the two can never drift apart.
     See _CANON/TRAPS.md — "the colour already meant something". */
  --attention:var(--orange);
  --txt:#FFFFFF; --txt-2:rgba(255,255,255,0.90); --muted:rgba(255,255,255,0.72);
  --dim:rgba(255,255,255,0.52); --line:rgba(255,255,255,0.10);
  --radius:16px;
  /* 2026-07-21 — ONE token for type sitting on a bright brand fill (cyan /
     lime / teal). The pro site had #04222b on cyan and #1a2400 on lime — two
     different darks that drifted from the consumer site's navy. Matches
     --ink-on-bright in the root site so a button can never look different on
     one page than another. Deep navy, not black. */
  --ink-on-bright:#04263D;   /* DARK BLUE — reads blue on a bright fill, not black */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,sans-serif;background:var(--bg);color:var(--txt);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
/* Accessible keyboard focus — visible ring on every interactive element,
   shown only for keyboard nav (not mouse clicks) so it never adds chrome noise. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.mono-black{font-weight:900;letter-spacing:-0.5px}

/* wordmark */
.wm{font-weight:900;letter-spacing:-0.5px;font-size:22px}
.wm .c{color:#fff}.wm .f{color:var(--orange)}

/* real logo */
/* 2026-07-30 Lux — bigger wordmark on desktop (it read small next to the nav
   buttons); the phone sizes below are UNCHANGED, so this only affects wide
   screens. Every mobile breakpoint already sets its own height, and they all
   come later in the file, so they keep winning. */
.navlogo{height:62px;display:block;filter:drop-shadow(0 3px 14px rgba(56,217,245,.22))}
.hero .brandmark{width:min(210px,54vw);display:block;margin:0 auto 24px;
  filter:drop-shadow(0 10px 44px rgba(56,217,245,.34));animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(7,7,15,0.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
nav .links{display:flex;gap:28px;align-items:center}

/* Mobile hamburger (index nav only) — desktop: hidden; phone: reveals a slide-down
   menu carrying the section links that collapse ≤620px. Scoped classes = additive,
   can't affect any other page. */
.navtoggle{display:none;flex-direction:column;gap:5px;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;min-width:44px;min-height:44px;padding:8px;margin-left:6px;border-radius:10px}
.navtoggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobmenu{display:none;flex-direction:column;gap:2px;padding:8px 18px 18px;background:rgba(7,7,15,0.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.mobmenu.open{display:flex}
.mobmenu a:not(.btn){color:var(--muted);font-weight:800;font-size:15px;padding:14px 6px;border-radius:10px}
.mobmenu a:not(.btn):active,.mobmenu a:not(.btn):hover{color:#fff}
.mobmenu a.btn{margin-top:8px;width:100%}
/* ── 2026-08-05 — ONE BREAKPOINT, NOT TWO ─────────────────────────────────
   "Sign in" fell down the gap between these two numbers. The slide-down menu
   that carries it was BLOCKED above 620px, and the button that duplicates it
   was HIDDEN below 701px — so from 621px to 700px it existed in neither
   place. Measured on the shipped stylesheet at 621 / 660 / 700: the bar held
   the logo and "Get started" and nothing else, and index.html's only two
   "Sign in" links were both display:none.

   861 is not a taste call. The full desktop row measures 762.4px of content
   against the real Montserrat metrics (assets/fonts/Montserrat-*.ttf), plus
   48px of .wrap padding = 810.4px, so it does not fit an iPad in portrait
   (768px) — it was 42.4px short and wrapped inside a 66px bar. Below 861 the
   section links move into the menu and the bar keeps the logo, the primary
   action and the toggle. Both numbers below are THE SAME NUMBER on purpose:
   two things that must agree belong in one container, not two.

   Only a nav that actually SHIPS the menu may drop links from the bar —
   get-started / login / branding-setup have no #mobMenu, so anything hidden
   there is hidden for good. `.navtoggle` itself needs no scoping: it exists
   in index.html and nowhere else. */
@media(min-width:861px){.mobmenu{display:none!important}}
@media(max-width:860px){.navtoggle{display:flex}}
@media(max-width:860px){
  nav.has-menu .links a:not(.btn){display:none}
  nav.has-menu .links a.btn-ghost{display:none}   /* it is in the menu, not lost */
  nav.has-menu .links{gap:8px;flex-shrink:0}
}
nav .links a:not(.btn){color:var(--muted);font-weight:800;font-size:14px;transition:color .15s}
nav .links a:not(.btn):hover{color:#fff}
/* No nav-specific button colours. Every button gets its type colour from its
   OWN variant rule below, so a button can never look different in the nav than
   it does in the page body. THE RULE:
     bright fill  -> DARK BLUE type (--ink-on-bright)
     transparent  -> CYAN type (dark blue on a dark background is unreadable) */

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;
  font-family:inherit;font-weight:900;font-size:16px;letter-spacing:.2px;line-height:1.15;
  padding:12px 26px;border-radius:14px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .12s,background .15s}
.btn:active{transform:scale(.98)}
.btn.btn-primary{background:var(--cyan);color:var(--ink-on-bright)}
.btn.btn-primary:hover{background:var(--cyan);color:var(--ink-on-bright);filter:brightness(1.12)}   /* one cyan token — hover brightens it rather than introducing a second hex */
.btn.btn-ghost{background:transparent;border:2px solid var(--cyan);color:var(--cyan);font-weight:900}
.btn.btn-ghost:hover{background:var(--cyan);border-color:var(--cyan);color:var(--ink-on-bright)}
.btn.btn-lime{background:var(--lime);color:var(--ink-on-bright)}
/* 2026-08-20 — btn-lime was the ONLY variant with no :hover. primary, ghost
   and demo all had one. It carries the auto-gift "Preview & apply" CTA and
   the header CTA, so the two most forward actions on the pro dashboard were
   visually dead under the cursor. Same treatment the other variants use. */
.btn.btn-lime:hover{filter:brightness(1.08)}
.btn-sm{padding:9px 18px;font-size:14.5px;border-radius:12px}

/* DEMO — the "see yourself in it" door. Purple is the partner/co-brand accent
   throughout the app and the PRO pill on the consumer site, so this reads as a
   different KIND of action than the cyan primary CTA rather than a rival to it. */
.btn.btn-demo{background:var(--lime);border:2px solid var(--lime);color:var(--ink-on-bright)}
.btn.btn-demo:hover{background:var(--lime);border-color:var(--lime);color:var(--ink-on-bright);filter:brightness(1.08)}

/* hero */
/* ⚠️ 2026-08-21 Lux: "close up the gap above the 91 to 18 box."
   .hero's 72px bottom plus section.blk's 64px top was 136px of nothing between
   the last CTA and the fact box. The box was MOVED into #why earlier today so
   it reads as the evidence for "Most agent apps show a number" — and evidence
   that floats half a screen away from its claim is not introducing anything.
   The hero keeps room below its buttons; the section it now leads gives up its
   top padding, because the fact bar is that section's opening line. */
.hero{position:relative;padding:96px 0 44px;text-align:center;overflow:hidden}
section.blk#why{padding-top:0}
.hero::before{content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:760px;height:520px;background:radial-gradient(circle,rgba(56,217,245,0.16),transparent 65%);pointer-events:none}
.hero h1{font-size:clamp(34px,6vw,60px);font-weight:900;letter-spacing:-1.5px;line-height:1.05;max-width:900px;margin:0 auto 20px}
.hero h1 .grad{background:linear-gradient(100deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:640px;margin:0 auto 34px;font-weight:500}
/* ══ THE FACT BAR — the stat that earns the headline ════════════════════════
   2026-08-21. Sits ABOVE the eyebrow because a verified number is a better
   opening than a category label, and because a stat-led hook differentiates
   from every other "your face on an app" pitch on the market.

   Thin cyan outline, not a filled card: it should read as a quoted fact the
   page is showing you, not as a promotional panel. The two numbers carry the
   argument — cyan for the promise, lime for what actually happens — and lime
   is the same colour the product uses for a paid gift, which is the thing
   that closes the gap between them.

   Kept deliberately short (two lines plus attribution) so the <h1> is still
   above the fold on a phone. Anything longer and the fact buries the pitch. */
/* ⚠️ 2026-08-21 Lux: "make this new title box a brighter outline and make it
   wider so it doesn't take up as much space on a wider site. but make sure it
   still looks good on phones too."
   WIDER IS NOT WHAT SAVES THE SPACE — SIDE BY SIDE IS. A 640px column on a
   1440px screen stacks four things vertically and pushes the <h1> down; simply
   widening it to 1000px only re-wraps the same four rows a little shorter. So
   above 760px the numbers sit BESIDE the words in a two-column grid, which
   removes a whole row of height, and the source line spans underneath. Below
   760px it is exactly the stacked, centred card it has always been — the phone
   layout is the default here and the desktop one is the override, so a phone
   cannot inherit a layout it has no room for. */
.factBar{max-width:640px;margin:0 auto 26px;padding:20px 24px 16px;text-align:center;
  border:1.5px solid rgba(56,217,245,.55);border-radius:18px;background:rgba(56,217,245,.05);
  box-shadow:0 0 0 1px rgba(56,217,245,.06),0 14px 40px rgba(56,217,245,.07)}
.factNums{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px}
@media (min-width:760px){
  .factBar{max-width:1000px;padding:18px 26px 14px;
    display:grid;grid-template-columns:auto 1fr;grid-template-areas:"nums words" "src src";
    align-items:center;column-gap:26px;text-align:left}
  .factNums{grid-area:nums;margin-bottom:0}
  .factWords{grid-area:words;min-width:0}
  .factSrc{grid-area:src}
  /* A hairline between the two halves, in the same cyan as the frame, so the
     numbers read as a label for the sentence rather than as a separate object
     that happens to be nearby. */
  .factWords{border-left:1px solid rgba(56,217,245,.22);padding-left:26px}
}
.factN{font-size:clamp(38px,7vw,54px);font-weight:900;letter-spacing:-2px;line-height:1;
  font-variant-numeric:tabular-nums}
.factN i{font-style:normal;font-size:.52em;font-weight:900;letter-spacing:-1px;margin-left:1px}
.factN.cy{color:var(--cyan)}
.factN.li{color:var(--lime)}
.factArrow{font-size:clamp(20px,3.4vw,26px);font-weight:900;color:var(--dim);line-height:1}
.factLead{font-size:clamp(15px,2.1vw,18px);font-weight:600;color:var(--txt-2);line-height:1.45;margin:0 0 6px}
.factLead b{color:#fff;font-weight:900}
.factSub{font-size:clamp(13px,1.7vw,15px);font-weight:500;color:var(--muted);line-height:1.5;margin:0 0 11px}
.factSub b{color:var(--lime);font-weight:900}
.factSrc{font-size:10.5px;font-weight:600;color:var(--dim);line-height:1.5;margin:0;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
@media (max-width:520px){
  .factBar{padding:16px 16px 13px;margin-bottom:20px}
  .factNums{gap:11px}
  /* The sentence is the payload on a phone; the source line is the smallest
     thing on the page and does not need the extra breathing room. */
  .factSrc{padding-top:8px}
}

/* The lending audience's own verified fact, inside the LO pricing panel.
   Lime outline: lime is the locked loan-officer colour in the audience
   palette below, so the fact is wearing the audience's own colour. */
.factLine{max-width:660px;margin:0 auto 26px;padding:13px 18px;text-align:center;
  border:1px solid rgba(204,255,53,.30);border-radius:14px;background:rgba(204,255,53,.045);
  font-size:14px;font-weight:600;color:var(--txt-2);line-height:1.55}
.factLine b{color:var(--lime);font-weight:900}
.factLine span{display:block;margin-top:7px;font-size:10.5px;font-weight:600;color:var(--dim)}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* 2026-09-02 - the label sat high in the pill. inline-block reserves the
   font's descender space below the baseline, and ALL-CAPS text has no
   descenders, so the optical mass rides above centre. inline-flex with
   line-height:1 centres the glyphs themselves. The 12px right padding
   against 14px left balances the trailing gap letter-spacing leaves after
   the final letter, which otherwise reads as a leftward shift. */
.eyebrow{display:inline-flex;align-items:center;justify-content:center;line-height:1;
  font-size:12px;font-weight:900;letter-spacing:2px;color:var(--cyan);
  background:rgba(56,217,245,0.10);border:1px solid rgba(56,217,245,0.3);padding:9px 12px 9px 14px;border-radius:20px;margin-bottom:22px}

/* sections */
section.blk{padding:64px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 44px}
.sec-head h2{font-size:clamp(26px,4vw,40px);font-weight:900;letter-spacing:-0.8px;margin-bottom:12px}
.sec-head p{color:var(--muted);font-size:17px;font-weight:500}

/* feature grid */
.grid{display:grid;gap:18px}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g-3,.g-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(56,217,245,0.12);border:1px solid rgba(56,217,245,0.3);margin-bottom:16px;font-size:22px;color:var(--cyan)}
.card h3{font-size:19px;font-weight:900;letter-spacing:-0.3px;margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px;font-weight:500}

/* comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(max-width:720px){.vs{grid-template-columns:1fr}}
.vs .col{padding:28px}
.vs .col.them{background:var(--card);border-right:1px solid var(--line)}
.vs .col.us{background:linear-gradient(160deg,rgba(56,217,245,0.08),rgba(176,144,255,0.06))}
.vs h4{font-size:13px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px}
.vs .them h4{color:var(--muted)}.vs .us h4{color:var(--cyan)}
.vs ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.vs li{display:flex;gap:10px;font-size:14.5px;font-weight:500;color:var(--txt-2)}
.vs li .dot{color:var(--dim);flex-shrink:0}
.vs .us li .dot{color:var(--teal)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
.tier.feat{border:2px solid var(--cyan);position:relative}
.tier.feat .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--cyan);color:var(--ink-on-bright);
  font-size:11px;font-weight:900;letter-spacing:1px;padding:4px 14px;border-radius:20px}
.tier .name{font-size:13px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.tier .price{font-size:44px;font-weight:900;letter-spacing:-1.5px}
.tier .price span{font-size:15px;color:var(--muted);font-weight:600;letter-spacing:0}
.tier .cap{color:var(--cyan);font-size:13px;font-weight:700;margin:6px 0 18px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:22px;flex:1}
.tier li{display:flex;gap:9px;font-size:14px;color:var(--txt-2);font-weight:500}
.tier li .ck{color:var(--teal);flex-shrink:0}
.tier .btn{width:100%;justify-content:center}
.toggle{display:flex;gap:6px;justify-content:center;margin-bottom:30px}
.toggle button{background:var(--card);border:1px solid var(--line);color:var(--muted);font-weight:900;font-size:13px;padding:8px 18px;border-radius:11px;cursor:pointer}
.toggle button.on{background:rgba(56,217,245,0.14);border-color:var(--cyan);color:var(--cyan)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
@media(max-width:860px){.steps{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.step{text-align:center;padding:22px}
.step .n{width:40px;height:40px;border-radius:50%;background:rgba(176,144,255,0.14);border:1px solid rgba(176,144,255,0.4);
  color:var(--purple);font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:16px}
.step h4{font-size:16px;font-weight:900;margin-bottom:6px}
.step p{color:var(--muted);font-size:13.5px;font-weight:500}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;margin-top:40px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
footer .muted{color:var(--dim);font-size:13px}
footer .links{display:flex;gap:22px}
footer .links a:not(.btn){color:var(--muted);font-size:13px;font-weight:600}

/* dashboard */
.dash{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
@media(max-width:820px){.dash{grid-template-columns:1fr}}
.side{background:var(--bg-2);border-right:1px solid var(--line);padding:22px 16px}
.side .navi{display:flex;flex-direction:column;gap:4px;margin-top:22px}
.side .navi a:not(.btn){display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;color:var(--muted);font-weight:600;font-size:14px}
.side .navi a.on{background:rgba(56,217,245,0.12);color:var(--cyan)}
.side .navi a:not(.btn):hover{color:#fff}
.main{padding:28px 30px}
.main h1{font-size:26px;font-weight:900;letter-spacing:-0.5px;margin-bottom:4px}
.main .lede{color:var(--muted);font-weight:500;margin-bottom:26px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat .lab{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.stat .val{font-size:30px;font-weight:900;letter-spacing:-1px;margin-top:6px}
.stat .val.cy{color:var(--cyan)}.stat .val.tl{color:var(--teal)}.stat .val.pu{color:var(--purple)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px}
.panel h3{font-size:17px;font-weight:900;margin-bottom:16px;letter-spacing:-0.2px}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:0 10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 10px;font-size:14px;font-weight:500;border-bottom:1px solid rgba(255,255,255,0.05)}
.tbl tr:last-child td{border-bottom:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900;padding:4px 10px;border-radius:20px}
.chip.hot{background:rgba(255,107,154,0.15);color:var(--pink)}
.chip.active{background:rgba(46,232,160,0.13);color:var(--teal)}
.chip.gift{background:rgba(204,255,53,0.14);color:var(--lime)}
.avatar-sm{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--purple-d));
  display:inline-flex;align-items:center;justify-content:center;color:#0b1220;font-weight:900;font-size:11px;margin-right:9px;vertical-align:middle}

/* blog */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.post-grid{grid-template-columns:1fr}}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .15s}
.post:hover{border-color:rgba(56,217,245,0.4)}
.post .thumb{height:150px;background:linear-gradient(135deg,rgba(56,217,245,0.18),rgba(176,144,255,0.14));display:flex;align-items:center;justify-content:center;font-size:34px;color:rgba(255,255,255,0.5)}
.post .body{padding:20px}
.post .tag{font-size:11px;font-weight:900;letter-spacing:1px;color:var(--cyan);text-transform:uppercase}
.post h3{font-size:18px;font-weight:900;letter-spacing:-0.3px;margin:8px 0;line-height:1.25}
.post p{color:var(--muted);font-size:14px;font-weight:500}
.post .meta{color:var(--dim);font-size:12px;margin-top:14px}
.article{max-width:720px;margin:0 auto;padding:20px 0 40px}
.article h1{font-size:clamp(28px,5vw,44px);font-weight:900;letter-spacing:-1px;line-height:1.1;margin:14px 0 16px}
.article .meta{color:var(--dim);font-size:14px;margin-bottom:28px}
.article h2{font-size:24px;font-weight:900;letter-spacing:-0.4px;margin:32px 0 12px}
.article p{color:var(--txt-2);font-size:17px;margin-bottom:18px}
.article ul{margin:0 0 18px 22px;color:var(--txt-2);font-size:17px}
.article li{margin-bottom:8px}

/* ── Mobile polish (2026-07-14 Lux) — app-like feel, right-sized buttons ──
   Keeps tap targets comfortable (~44px) without the oversized desktop padding,
   tightens hero/section spacing, and declutters the nav to the primary action. */
@media(max-width:620px){
  .wrap{padding:0 18px}
  .hero{padding:52px 0 26px}
  section.blk{padding:44px 0}
  .sec-head{margin-bottom:30px}
  /* Buttons keep their DESKTOP type size on phones — only the horizontal
     padding tightens. Shrinking the label was what made the row read as a
     small word floating in a tall slab. */
  .btn{padding:12px 20px;font-size:15.5px;border-radius:12px}
  .btn-sm{padding:9px 15px;font-size:14px}
  .hero .cta-row{gap:10px}
  .hero .cta-row .btn{width:100%;max-width:none;margin-inline:auto}
  /* nav: drop the inline section links on phones, keep the wordmark + CTA button
     (plain <a> links hide; anything styled as a .btn stays) */
  nav .links a:not(.btn){display:none}
  nav .links{gap:10px}
  nav .wrap{height:60px}
  footer .wrap{flex-direction:column;text-align:center}
  footer .links{flex-wrap:wrap;justify-content:center;gap:14px}
  /* ROI calculator: stack the two sliders so labels never crowd on phones.
     !important overrides the inline grid-template-columns on the element. */
  .roi-grid{grid-template-columns:1fr !important}
  /* trim the ROI card padding on phones so the two result boxes keep room */
  #roi .card{padding:22px 16px !important}
  /* keep the two result boxes side-by-side but tighter, never overflowing */
  .roi-results{gap:10px !important}
  .roi-rbox{padding:18px 8px !important}
}
/* ROI result numbers: allow the grid/flex children to shrink and wrap so big
   dollar values (e.g. $400k) can never push the container past the page edge. */
.roi-rbox{min-width:0;overflow:hidden}
.roi-num{min-width:0;overflow-wrap:break-word}

/* ============================================================
   DEMO MODAL  (2026-07-21)
   The "see yourself in the app" sheet. Mobile-first: on phones it is a
   bottom sheet that can scroll internally, so a long form can never push
   its own CTA off-screen — the failure that makes modals feel broken.
   ============================================================ */
.dm-back{position:fixed;inset:0;z-index:1000;background:rgba(4,5,12,0.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.dm-back[hidden]{display:none}
.dm{position:relative;width:100%;max-width:470px;background:var(--card);
  border:1.5px solid var(--line);border-radius:22px;padding:26px 24px 24px;
  max-height:calc(100vh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.dm-x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,0.06);border:1px solid var(--line);color:var(--muted);
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dm-x:hover{color:#fff;background:rgba(255,255,255,0.12)}
.dm h3{font-size:22px;font-weight:900;letter-spacing:-0.5px;margin-bottom:6px;padding-right:34px}
.dm-sub{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:18px}

.dm-photorow{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.dm-av{width:62px;height:62px;flex:0 0 62px;border-radius:50%;overflow:hidden;
  background:var(--card-2);border:2px solid rgba(56,217,245,0.35);
  display:flex;align-items:center;justify-content:center}
.dm-av svg{width:42px;height:42px}
.dm-av img{width:100%;height:100%;object-fit:cover;display:block}
.dm-mini{background:rgba(56,217,245,0.14);border:1.5px solid rgba(56,217,245,0.45);
  color:var(--cyan);font-weight:800;font-size:13px;padding:9px 14px;border-radius:11px;
  cursor:pointer;font-family:inherit;margin-right:6px}
.dm-mini.ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.dm-hint{font-size:12px;color:var(--dim);line-height:1.45;margin-top:6px}

.dm-lab{display:block;font-size:12px;font-weight:900;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.dm-lab .req{color:var(--cyan);letter-spacing:.4px;text-transform:none;font-size:11px;font-weight:800}
.dm-in{width:100%;background:var(--bg-2);border:1.5px solid var(--line);border-radius:12px;
  padding:13px 14px;color:#fff;font-size:16px;font-family:inherit;font-weight:600}
.dm-in:focus{outline:none;border-color:var(--cyan)}
/* 0.28 white composites to 2.45:1 on --bg-2 — well under the 4.5:1 a
   placeholder needs, and this is the field a pro types a client's name into.
   --dim is 5.67:1 on the same surface. */
.dm-in::placeholder{color:var(--dim)}
.dm-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.dm-lays{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-lay{background:var(--bg-2);border:1.5px solid var(--line);border-radius:13px;
  padding:12px 12px;text-align:left;cursor:pointer;font-family:inherit;color:var(--muted)}
.dm-lay b{display:block;color:#fff;font-size:14px;font-weight:900;margin-bottom:2px}
.dm-lay span{font-size:11.5px;line-height:1.35;display:block}
.dm-lay.on{border-color:var(--cyan);background:rgba(56,217,245,0.10)}

.dm-cta{display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;min-height:52px;margin-top:18px;padding:14px 18px;border-radius:14px;
  background:var(--cyan);color:var(--ink-on-bright);border:none;cursor:pointer;
  font-family:inherit;font-weight:900;font-size:15.5px;line-height:1.2}
.dm-cta:disabled{opacity:.6;cursor:wait}
.dm-cta.ghost{background:transparent;color:var(--txt-2);border:1.5px solid var(--line);margin-top:10px}
.dm-err{color:var(--pink);font-size:13px;font-weight:700;margin-top:10px;min-height:18px;line-height:1.45}

.dm-codebox{background:var(--bg-2);border:1.5px solid rgba(56,217,245,0.35);
  border-radius:16px;padding:20px 14px;text-align:center}
.dm-k{font-size:11px;font-weight:900;letter-spacing:1.6px;color:var(--cyan);text-transform:uppercase}
.dm-code{font-size:clamp(34px,11vw,46px);font-weight:900;letter-spacing:6px;margin:8px 0 12px;
  user-select:all;-webkit-user-select:all;word-break:break-all;text-indent:6px;line-height:1.1}
.dm-qr{min-height:132px;display:flex;align-items:center;justify-content:center}
.dm-qr img{width:132px;height:132px;background:#fff;padding:7px;border-radius:10px;display:block}
.dm-exp{font-size:12px;color:var(--dim);margin-top:10px;line-height:1.5}

@media(max-width:620px){
  /* Bottom sheet on phones — thumb-reachable, and the internal scroll keeps
     the CTA reachable no matter how tall the form gets. */
  .dm-back{align-items:flex-end;padding:0}
  .dm{max-width:none;border-radius:22px 22px 0 0;padding:24px 18px calc(24px + env(safe-area-inset-bottom));
    max-height:92vh}
  .dm-two{grid-template-columns:1fr}
}

/* ============================================================
   SCREENSHOT CAROUSEL  (2026-07-21)
   Six screens will not stack — as a grid they push the rest of the page off a
   phone entirely. Native CSS scroll-snap instead of a library: swipe on touch,
   arrow buttons on desktop, keyboard-reachable, and the section keeps a fixed
   height on every device from 320px to a 27" monitor.
   ============================================================ */
.shots-wrap{position:relative}
.shots{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 10px;
  scrollbar-width:none;-ms-overflow-style:none}
.shots::-webkit-scrollbar{display:none}
.shot{flex:0 0 auto;width:246px;margin:0;text-align:center;scroll-snap-align:center}

/* Pure-CSS phone frame — no image asset to load or keep in sync, and
   aspect-ratio holds the shape so a screenshot is never cropped. */
.ph{position:relative;width:100%;aspect-ratio:9/19.5;background:#0A0B10;
  border-radius:40px;padding:5px;overflow:hidden;
  /* Titanium-style rim: a bright inner hairline over a soft outer edge reads
     as a machined band rather than a flat grey stroke. */
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.22),
    inset 0 0 0 4px rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.9),
    0 26px 60px rgba(0,0,0,0.60),
    0 0 42px rgba(56,217,245,0.07)}
.ph img{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;border-radius:35px;background:var(--card-2)}
.shot figcaption{margin-top:15px;font-size:13px;line-height:1.5;color:var(--muted)}
.shot figcaption b{display:block;color:#fff;font-size:15px;font-weight:900;
  margin-bottom:3px;letter-spacing:-0.2px}

.shots-nav{position:absolute;top:38%;z-index:3;width:42px;height:42px;
  border-radius:50%;border:1.5px solid var(--line);background:rgba(10,10,18,0.86);
  backdrop-filter:blur(8px);color:#fff;font-size:22px;line-height:1;cursor:pointer;
  display:none;align-items:center;justify-content:center;font-family:inherit}
.shots-nav:hover{border-color:var(--cyan);color:var(--cyan)}
.shots-nav.prev{left:-8px}
.shots-nav.next{right:-8px}
/* Arrows only where there is a mouse — on touch the swipe IS the affordance,
   and a button overlapping a phone frame just hides the product. */
@media (hover:hover) and (min-width:900px){ .shots-nav{display:flex} }

.shots-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.shots-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.22);
  transition:background .2s,width .2s}
.shots-dots i.on{background:var(--cyan);width:20px;border-radius:4px}

@media(max-width:620px){
  .shots{gap:16px}
  .shot{width:216px}
}
@media(max-width:380px){
  .shot{width:198px}
  .shot figcaption{font-size:12.5px}
}

/* ============================================================
   MOBILE HARDENING  (2026-07-21)
   The defects below are the ones that make a site feel amateur on a phone.
   Each rule fixes a specific, visible failure — not general tidying.
   ============================================================ */

/* 1. iOS ZOOMS THE WHOLE PAGE when a focused input is under 16px. The lurch
      reads as broken software. 16px is the threshold, not a preference. */
input,select,textarea{font-size:16px}

/* 2. iOS paints a grey box over any tapped element with a click handler.
      On custom buttons it looks like a rendering bug. */
*{-webkit-tap-highlight-color:transparent}

/* 3. Buttons must GROW for a wrapped label, never clip it. Fixed heights are
      why "See yourself in the app" can lose its descenders at 320px. */
/* Height comes from padding, not a blanket minimum — a flat 48px on a small
   nav button is what made the row look tall and empty. Full-size buttons hold
   44px (Apple's tap minimum); small ones are 40px on a mouse and grow to 44
   only where fingers are, via pointer:coarse. */
.btn,.dm-cta,.cta{min-height:44px;height:auto}
.btn-sm{min-height:40px}
@media (pointer:coarse){ .btn-sm{min-height:44px} }

/* 4. Long unbreakable strings (an email, a brokerage URL) must wrap rather
      than push the layout sideways. */
.dm-in,.dm-code,input,p,li,figcaption{overflow-wrap:break-word}

/* 5. Anything tappable clears Apple's 44pt minimum. */
.dm-lay,.dm-mini,.toggle button,.roi-role{min-height:44px}

@media(max-width:620px){
  /* Buttons stack full-width and CENTRE. The label is centred by .btn itself
     now, but the CTA rows need to actually fill the column first. */
  .cta-row{flex-direction:column;align-items:stretch;width:100%}
  .cta-row .btn{width:100%;max-width:none}

  /* Two-line labels stay legible instead of shrinking to fit one line —
     wrapping is better than truncating, always. */
  .btn{white-space:normal;padding-left:16px;padding-right:16px}

  /* The nav must never let the logo and the two buttons collide. */
  nav .wrap{gap:8px}
  nav .links{flex-shrink:0}
  /* 2026-08-05 — `.navlogo{height:38px}` lived here and was DEAD: the ≤700
     block below sets 34px at identical specificity and comes later in the
     file, so 38 could never win at any width this query matches. Removed
     rather than "fixed", because the height that ships is the 34px one. */

  /* Hero type: clamp already scales it, but tighten the leading so a 3-line
     headline doesn't sprawl past the fold on a 667px-tall phone. */
  .hero h1{line-height:1.08;letter-spacing:-1px}
  .hero p.sub{font-size:15.5px}

  /* Section headings and card copy — no orphan single words on their own line. */
  .sec-head h2{font-size:25px;line-height:1.18;letter-spacing:-0.5px;text-wrap:balance}
  .sec-head p{font-size:14.5px}

  /* Pricing tiers: full width, and the price never collides with the /mo. */
  .tier{padding:22px 18px}
  .tier .price{font-size:38px;letter-spacing:-1.5px}
}

/* 6. Very narrow phones (iPhone SE, 320px). Everything above still has to
      hold together here — this is where truncation usually first appears. */
@media(max-width:360px){
  .wrap{padding:0 14px}
  .btn{font-size:13.5px;padding:12px 14px}
  .dm{padding:20px 14px calc(20px + env(safe-area-inset-bottom))}
  .dm h3{font-size:20px}
  .shot figcaption{font-size:13px}
}

/* ============================================================
   AUDIENCE COLOUR CODING  (2026-07-21)
   Applied ONLY in pricing — the single place Agents, Loan Officers and
   Agencies appear together, so the distinction actually helps someone scan.
   Everywhere else a visitor is one persona and never sees the contrast.

   Colours are borrowed from meanings the app ALREADY uses, so nothing new
   has to be learned and nothing collides:
     cyan   — the product's primary voice (agents are the core audience)
     lime   — money/return, which is the loan officer's whole business
     purple — partner/team, already the PRO + co-brand accent
   Cyan stays the clear majority of the page.
   ============================================================ */
.aud{display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font-weight:900;font-size:13px;letter-spacing:1.2px;text-transform:uppercase}
.aud-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
/* LOCKED 2026-07-21 (Lux): Agent = CYAN · Loan Officer = YELLOW (lime, the
   palette's yellow) · Agency = GREEN (teal). Orange is NOT used here — it is
   reserved site-wide for needs-attention, errors and empty "enter info" states,
   so it must never appear as decoration or a category colour. */
.aud-agent {color:var(--cyan)}   .aud-agent  .aud-dot{background:var(--cyan);box-shadow:0 0 10px rgba(56,217,245,0.65)}
.aud-lo    {color:var(--lime)}   .aud-lo     .aud-dot{background:var(--lime);box-shadow:0 0 10px rgba(204,255,53,0.55)}
.aud-agency{color:var(--teal)}   .aud-agency .aud-dot{background:var(--teal);box-shadow:0 0 10px rgba(46,232,160,0.60)}

/* Tier cards inherit their audience's accent on the featured card only —
   enough to tie the group together, not enough to shout over the copy. */
.aud-agent  ~ .tiers .tier.feat{border-color:rgba(56,217,245,0.55)}
.aud-lo     ~ .tiers .tier.feat{border-color:rgba(204,255,53,0.50)}
.aud-agency ~ .tiers .tier.feat{border-color:rgba(46,232,160,0.50)}


/* "Live in five minutes" step numbers cycle the three audience colours rather
   than four identical cyan discs — motion down the row, no new vocabulary. */
.steps .step:nth-child(1) .n{color:var(--cyan);border-color:rgba(56,217,245,0.45);background:rgba(56,217,245,0.10)}
.steps .step:nth-child(2) .n{color:var(--lime);border-color:rgba(204,255,53,0.45);background:rgba(204,255,53,0.10)}
.steps .step:nth-child(3) .n{color:var(--teal);border-color:rgba(46,232,160,0.45);background:rgba(46,232,160,0.10)}
.steps .step:nth-child(4) .n{color:var(--cyan);border-color:rgba(56,217,245,0.45);background:rgba(56,217,245,0.10)}

/* ============================================================
   PRICING AUDIENCE TABS  (2026-07-21)
   Nine plan cards stacked on a phone is roughly four screens of scrolling
   before a visitor reaches anything else. One group at a time = three cards.

   PROGRESSIVE ENHANCEMENT: panels are VISIBLE by default and only become
   switchable once the script adds .audTabsReady to <body>. If the JS ever
   fails, a visitor sees every plan rather than an empty pricing section.
   ============================================================ */
.audTabs{display:flex;gap:8px;justify-content:center;margin-bottom:26px;flex-wrap:wrap}
.audTab{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:900;font-size:14px;letter-spacing:.2px;
  min-height:44px;padding:10px 18px;border-radius:12px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);color:var(--muted);
  transition:border-color .15s,color .15s,background .15s}
.audTab .aud-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:currentColor;opacity:.55}
.audTab.on .aud-dot{opacity:1}
.audTab[data-aud="agent"].on {color:var(--cyan);  border-color:var(--cyan);  background:rgba(56,217,245,0.10)}
.audTab[data-aud="lo"].on    {color:var(--lime);  border-color:var(--lime);  background:rgba(204,255,53,0.10)}
.audTab[data-aud="agency"].on{color:var(--teal);  border-color:var(--teal);  background:rgba(46,232,160,0.10)}

.audTabsReady .audPanel{display:none}
.audTabsReady .audPanel.on{display:block}
/* The header inside a panel is redundant once a tab names the audience. */
.audTabsReady .audPanel .aud{display:none}

/* ============================================================
   SMALL-VIEWPORT SYSTEM  (2026-07-21)

   THE MEASUREMENT THAT DROVE THIS: an iPhone 16 Pro is 402pt wide, but
   Safari's Page Zoom DIVIDES the effective viewport — at 120% you are laying
   out in ~335px, narrower than an iPhone SE. At 130% it is ~309px. The old
   breakpoints stopped at 360px, so every one of those users fell off the end
   of the system. Nav content measured 516px against 307px of space.

   Everything below is width-driven, so it protects zoom, Dynamic Type and
   small devices with the same rules — no device sniffing.
   ============================================================ */

/* Stop iOS inflating type independently of its container, which is what makes
   a label look too big and sit high inside a box that did not grow with it. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Nothing may exceed its column. The single most common cause of a phone
   page that scrolls sideways. */
img,svg,video,canvas,table{max-width:100%}
.wrap,section,.card,.tier{min-width:0}

@media(max-width:700px){
  /* NAV: one action, not three. At 335px the logo plus three buttons needs
     516px. The demo is the highest-value action and the one being pitched, so
     it is the one that stays; Sign in and Get started are reachable in the
     hero, in pricing, and in the footer — they are not lost, just not
     duplicated in a bar that cannot hold them. */
  /* 2026-08-05 — `nav .links a.btn-ghost{display:none}` was here, and the
     comment above claimed Sign in stayed "reachable in the hero, in pricing,
     and in the footer". Booted and searched: it is in none of them. Worse,
     this rule is not index-only — get-started.html, login.html and
     branding-setup.html share this stylesheet and ship NO menu, so on those
     pages the ghost button was gone from 320px to 700px with nothing behind
     it. On get-started that is a pro who has already paid and cannot sign in
     on a phone; on branding-setup it removed the only route back to the
     dashboard. Sign in is never hidden now — the bar is made to fit instead
     (see the ≤400 and ≤290 nav rules). */
  nav .links{gap:8px}
  nav .links a.btn-primary,nav .links a.btn-demo{padding:9px 16px;font-size:14px}
  nav .wrap{gap:10px;padding-left:14px;padding-right:14px}
  .navlogo{height:34px}

  /* Buttons: full width, never touching, always centred. */
  .cta-row,.hero .cta-row{display:flex;flex-direction:column;align-items:stretch;
    gap:12px;width:100%;margin-inline:auto}
  .cta-row .btn,.hero .cta-row .btn{width:100%;max-width:none;margin:0}

  /* Cards and tiers get real breathing room instead of colliding. */
  .tiers{display:grid;grid-template-columns:1fr;gap:16px}
  .tier{padding:24px 20px}
  .grid.g-3{grid-template-columns:1fr;gap:14px}
  .vs{grid-template-columns:1fr;gap:14px}
  .steps{grid-template-columns:1fr;gap:12px}

  /* Audience tabs: three across, each shrinking rather than wrapping to a
     second row that pushes the price cards below the fold. */
  .audTabs{gap:6px;flex-wrap:nowrap}
  /* 2026-08-05 — `flex:1 1 0` is a ZERO basis: it hands all three tabs an
     identical width regardless of their labels, so the LONGEST one ("Loan
     Officers") is the one that ellipsises while "Agents" sits in slack space.
     `auto` starts each tab at its own content width and shares the leftover,
     which is the behaviour the ellipsis was added to paper over. */
  .audTab{flex:1 1 auto;min-width:0;padding:10px 8px;font-size:13px;
    line-height:1.2;text-wrap:balance}
  .audTab .aud-dot{display:none}
}

/* ≤ 400px — 2026-08-05. The narrow band where the bar has to hold BOTH nav
   buttons. Pages with no slide-down menu (get-started, login, branding-setup)
   keep "Sign in" in the bar at every width now, so the bar has to fit it.
   Measured against the shipped Montserrat: at 320px the row needed 304px
   against 292px of space; these three rules bring it to 275px. Height is
   untouched — .btn-sm keeps min-height 40px, and 44px wherever there are
   fingers (pointer:coarse) — so no tap target shrinks, only the padding. */
@media(max-width:400px){
  nav .links a.btn{padding-left:10px;padding-right:10px;font-size:12.5px;letter-spacing:0}
  nav .wrap{gap:8px}
  nav .links{gap:6px}
}

/* ≤ 380px — iPhone SE, and every 16 Pro user at 115%+ zoom. */
@media(max-width:380px){
  .wrap{padding:0 14px}
  .hero{padding:40px 0 32px}
  .hero h1{letter-spacing:-0.6px}
  .btn{font-size:15px;padding:12px 16px}
  .btn-sm{font-size:13.5px;padding:9px 13px}
  .navlogo{height:30px}
  .tier{padding:20px 16px}
  .tier .price{font-size:34px}
  .audTab{font-size:12px;padding:10px 6px}
  /* Long plan names and prices wrap instead of forcing a horizontal scroll. */
  .tier .name,.tier .cap,.tier li{overflow-wrap:break-word}
}

/* ≤ 330px — 16 Pro at 125%+, and the floor we design to. Nothing below this
   is a real device; anything that survives here survives everywhere. */
@media(max-width:330px){
  .wrap{padding:0 12px}
  .btn{font-size:14.5px;padding:11px 14px}
  .btn-sm{font-size:13px;padding:8px 11px}
  .audTab{font-size:11.5px;letter-spacing:0}
  .sec-head h2{font-size:22px}
}

/* ============================================================
   HEADLINE HIGHLIGHTS  (2026-07-21)
   ONE phrase per heading, never the whole line — a fully coloured h2 removes
   the hierarchy it was meant to create, and large coloured type reads lighter
   than white at heading weight, weakening the words it highlights.

   The colour carries MEANING, so scanning the page teaches the reader:
     .hl        CYAN   — a capability claim (the product's primary voice)
     .hl-money  YELLOW — money: return, payback, price. Only ever money.
   ============================================================ */
.hl{color:var(--cyan)}
.hl-money{color:var(--lime)}
/* Card titles stay white: highlighting inside a card competes with the section
   heading above it, and six coloured card titles is confetti, not emphasis. */

/* ≤ 290px — an iPhone SE at 135% Safari zoom lands here (278px viewport).
   Rare, but it is a real person with a real accessibility setting, and the nav
   is the one thing that must never break: they cannot navigate out of it.
   The logo drops to a mark and the button label shortens; everything else in
   the system already holds. */
@media(max-width:290px){
  .wrap{padding:0 10px}
  .navlogo{height:26px}
  nav .wrap{gap:6px;padding-left:10px;padding-right:10px}
  /* Must match the ≤400 rule's specificity (nav .links a.btn) or it is never
     reached — .btn-sm alone loses to it and this whole block would do nothing
     to the nav buttons. Measured at 290px: 258px needed, 270px available. */
  nav .links a.btn{padding-left:8px;padding-right:8px;font-size:11.5px}
  .btn-sm{font-size:12px;padding:8px 9px;letter-spacing:0}
  .shot{width:180px}
  .hero h1{font-size:26px}
  .sec-head h2{font-size:20px}
  .price-amt,.tier .price{font-size:30px}
}

@media(max-width:290px){
  /* "See yourself" -> "Demo" only at the extreme. aria-label on the button
     keeps the full name for assistive tech. */
  nav .links .btn-demo{font-size:0}
  nav .links .btn-demo::after{content:"Demo";font-size:12px}
}


/* ══ REDUCED MOTION — 2026-08-21 ════════════════════════════════════════════
   This file had no prefers-reduced-motion block of any kind, so the hero
   brandmark bobbed forever (`animation:floaty 6s infinite`) and
   `html{scroll-behavior:smooth}` was forced on every page that loads only this
   stylesheet — which is every marketing page. dashboard.html neutralises the
   smooth scroll with its own `*{scroll-behavior:auto !important}`; index.html
   never could, because it does not load that file. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE HOME REPORT — pro/index.html #report only.  2026-08-26
   ---------------------------------------------------------------------------
   ⚠️ EVERY SELECTOR IS SCOPED UNDER #report. styles.css is shared by every
   /pro page, and a bare class added here once collided with a dashboard rule
   two screens away. Nothing below can reach another page.

   ⭐ THIS SECTION DELIBERATELY BREAKS THE PAGE'S RHYTHM. Every other block is
   a centred sec-head over a card grid. This one opens full-bleed on the dark
   ground with type larger than any other heading on the site, then shows the
   PRODUCT rather than describing it. Lux: "No one does this. It needs to feel
   fresh, eye catching and as a big deal." A section that looks like the five
   around it cannot say that, whatever the words claim.

   Motion: styles.css:796 already neutralises every animation under
   prefers-reduced-motion, so the reveal below inherits that for free.
   ═══════════════════════════════════════════════════════════════════════════ */
#report{position:relative;overflow:hidden;background:var(--bg);padding:96px 0 88px}
/* One soft light behind the statement. The page has no other radial, which is
   what makes this block read as a different place rather than a new colour. */
#report::before{content:"";position:absolute;top:-22%;left:50%;transform:translateX(-50%);
  width:min(1200px,140vw);height:760px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(46,232,160,.16),rgba(56,217,245,.09) 45%,transparent 72%)}
#report > .wrap{position:relative;z-index:1}

/* ── THE MARK ─────────────────────────────────────────────────────────────── */
#report .rpMark{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:26px}
#report .rpMark span{font-size:11px;font-weight:900;letter-spacing:.28em;text-transform:uppercase;
  color:var(--teal)}
#report .rpMark i{display:block;height:1px;width:clamp(28px,7vw,74px);
  background:linear-gradient(90deg,transparent,var(--teal))}
#report .rpMark i:last-child{background:linear-gradient(90deg,var(--teal),transparent)}

/* ── THE STATEMENT ────────────────────────────────────────────────────────── */
#report .rpLede{max-width:16ch;margin:0 auto 22px;text-align:center;
  font-size:clamp(34px,6.6vw,72px);font-weight:900;line-height:.98;letter-spacing:-.035em;
  text-wrap:balance}
#report .rpLede em{font-style:normal;color:var(--teal)}
#report .rpSub{max-width:54ch;margin:0 auto;text-align:center;color:var(--muted);
  font-size:clamp(15px,1.7vw,18px);font-weight:500;line-height:1.6}
#report .rpSub b{color:var(--txt);font-weight:800}

/* ── THE ARTIFACT — the product, not a description of it ──────────────────── */
#report .rpShow{margin:52px auto 0;max-width:880px;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.13);background:var(--card);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(56,217,245,.07)}
#report .rpBar{display:flex;align-items:center;gap:7px;padding:12px 16px;
  background:rgba(255,255,255,.035);border-bottom:1px solid var(--line)}
#report .rpBar u{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.17);text-decoration:none}
#report .rpBar p{margin:0 0 0 10px;font-size:clamp(9.5px,2.6vw,11.5px);font-weight:700;color:var(--dim);
  min-width:0;line-height:1.25;overflow-wrap:break-word}
/* ── 2026-08-26 · THE ARTIFACT SCROLLS ────────────────────────────────────
   Lux: "we see one image. let's make it a scroll to see different parts of the
   report. this IS part of the product."
   Horizontal scroll-snap rather than a carousel with timers: it works with a
   trackpad, a touch swipe, the keyboard and a screen reader without a line of
   JS, and it degrades to a plain scroll if the JS below never runs. */
#report .rpScroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
#report .rpScroll::-webkit-scrollbar{display:none}
#report .rpScroll:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
#report .rpPane{flex:0 0 100%;min-width:100%;scroll-snap-align:start}
/* 🔴 2026-08-28 · THESE PANES ARE PHOTOGRAPHS OF THE REAL REPORT NOW, NOT
   HAND-BUILT IMITATIONS OF IT. Six .rpBody mockups used to live here, retyped
   from the report and free to drift from it the moment either changed — the
   same failure that put a glance strip in the sample which the live page had
   never rendered. Every pane is now a capture of website/sample.html itself,
   taken at 1180px in real Montserrat by scripts/render-audit, so this page
   cannot show a product we do not ship.
   ⚠️ width/height are on the tag so the scroller does not reflow as each pane
   loads. Update both if a capture is ever re-taken at a different size. */
#report .rpShot{display:block;width:100%;height:auto;border-radius:0}
/* ── ⭐ 2026-08-29 · A PHONE SEES THE PHONE REPORT ─────────────────────────
   Lux: "when someone views it on a phone, the images we show our phone
   images, making sure the type is bigger and we see the pills clearly."
   The <picture> above swaps in a set photographed at 390 in portrait. This
   caps how wide that portrait pane may be drawn, because the same source is
   chosen all the way up to 760px and a 354-wide capture stretched across 700
   would be both soft and about 1,200px tall. Capped and centred, it stays
   the size of the thing it is a picture of. */
@media (max-width:760px){#report .rpShot{max-width:420px;margin-inline:auto}}
#report .rpDots{display:flex;justify-content:center;gap:7px;padding:0 16px 15px;
  background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.06);padding-top:13px}
#report .rpDots button{appearance:none;border:1px solid var(--line);background:transparent;
  color:var(--dim);font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.04em;
  padding:5px 11px;border-radius:99px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
#report .rpDots button[aria-current="true"]{color:var(--teal);border-color:rgba(46,232,160,.45);
  background:rgba(46,232,160,.10)}
@media (max-width:640px){ #report .rpDots{flex-wrap:wrap} }

/* Room-by-room rows */
/* ── THE ROOM COLOUR ───────────────────────────────────────────────────────
   Lux: "let's make each room have a color highlight matching the room colors
   from the app."

   These are roomColor() from src/screens/Property/areasUtils.js:122, copied
   value for value. It matches on the room NAME (or a stored kind), so the
   data-room key below is the keyword its branch tests for:

     living / family ............ #FF6B9A
     kitchen .................... #2EE8A0
     bath ....................... #B090FF
     bed / master ............... #38D9F5
     yard / patio / exterior .... #2EE8A0
     hall / garage / foyer ...... #CCFF35
     anything else .............. #FF8840

   ⚠️ ORANGE IS NOT A ROOM COLOUR. areasUtils calls #FF8840 "the locked
   attention/adding colour, never a room identity" — it is what a room falls to
   when NOTHING matches. A row wearing it is telling you the app has no colour
   for that room, which is a finding, not a decoration. */
#report .rpRoom{--rc:#FF8840;
  display:grid;grid-template-columns:minmax(0,1.6fr) auto auto;gap:18px;
  align-items:center;padding:15px 2px 15px 14px;
  border-top:1px solid rgba(255,255,255,.06);border-left:3px solid var(--rc);
  background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 7%,transparent),transparent 62%)}
#report .rpRoom:first-of-type{border-top:none}
#report .rpRoom[data-room="living"]{--rc:#FF6B9A}
#report .rpRoom[data-room="kitchen"]{--rc:#2EE8A0}
#report .rpRoom[data-room="bath"]{--rc:#B090FF}
#report .rpRoom[data-room="bed"]{--rc:#38D9F5}
#report .rpRoom[data-room="yard"]{--rc:#2EE8A0}
#report .rpRoom[data-room="hall"]{--rc:#CCFF35}
/* The room name takes the room's colour; the two secondary lines take it at
   53%, which is areasComponents.js:409's own unselected label value (rc.c +
   '88' = 136/255). The dimension NUMBER stays white — that is data, not
   identity. */
#report .rpRoom .rpN b{color:var(--rc)}
#report .rpRoom .rpN span,
#report .rpRoom .rpDim span{color:color-mix(in srgb,var(--rc) 53%,transparent)}
#report .rpDim{text-align:right;font-variant-numeric:tabular-nums}
#report .rpDim b{display:block;font-size:16px;font-weight:900;letter-spacing:-.4px;line-height:1.1}
#report .rpDim span{display:block;font-size:11.5px;font-weight:600;color:var(--dim);margin-top:3px}

/* Neighborhood tiles — same shape the buyer page uses */
#report .rpHood{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:4px}
#report .rpHt{--c:var(--cyan);padding:16px 14px;border-radius:14px;text-align:center;
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
  background:color-mix(in srgb,var(--c) 8%,transparent)}
#report .rpHt.plain{--c:var(--txt-2)}
#report .rpHk{font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
#report .rpHv{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1.1;color:var(--c);margin-top:4px}
#report .rpHl{font-size:11.5px;font-weight:700;color:var(--muted);margin-top:2px}
@media (max-width:640px){ #report .rpHood{grid-template-columns:repeat(2,1fr)} }

/* ── X-RAY BRIEF pane — mirrors .news / .nw on the buyer page ─────────────
   ⚠️ var(--teal), NOT var(--green): the pro palette has no --green, and an
   undefined token renders as an inherited colour rather than as an error. That
   has bitten this stylesheet before. */
#report .rpNews{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:4px}
#report .rpNw{display:block;text-decoration:none;color:inherit;padding:13px 15px;border-radius:13px;
  border:1.5px solid color-mix(in srgb,var(--c) 42%,var(--card));border-left:3px solid var(--c);
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 24%,transparent) 0%,
  color-mix(in srgb,var(--c) 6%,transparent) 44%,transparent 74%),var(--card)}
#report .rpNwLead{grid-column:1/-1;padding:17px 18px 18px}
#report .rpNwk{font-size:9.5px;font-weight:900;letter-spacing:.13em;color:var(--c);line-height:1.35}
#report .rpNwh{margin-top:7px;font-size:14px;font-weight:800;color:#fff;line-height:1.3;
  letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
#report .rpNwLead .rpNwh{font-size:20px;letter-spacing:-.02em;line-height:1.22}
#report .rpNwLead .rpNwk{font-size:10.5px}
@media (max-width:640px){ #report .rpNews{grid-template-columns:1fr} }

/* Measurements rows */
#report .rpMeas{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 2px;border-top:1px solid rgba(255,255,255,.06)}
#report .rpMeas:first-of-type{border-top:none}
#report .rpMl{font-size:15px;font-weight:800;letter-spacing:-.2px}
#report .rpMs{font-size:11.5px;font-weight:600;color:var(--dim);margin-top:3px}
#report .rpMv{font-size:19px;font-weight:900;letter-spacing:-.6px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* The whole-home summary lines — same shape the report uses. */
#report .rpHsl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);border-left:3px solid var(--c);
  border-radius:13px;padding:13px 15px;margin-bottom:10px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 11%,transparent),transparent 64%)}
#report .rpHsn{display:grid;place-items:center;width:23px;height:23px;border-radius:8px;
  font-size:11.5px;font-weight:900;color:#04263D;background:var(--c)}
#report .rpHsl p{margin:0;font-size:14px;font-weight:700;line-height:1.45;min-width:0}

#report .rpBody{padding:26px 24px 24px}
#report .rpH2{font-size:12.5px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
#report .rpH2s{font-size:12.5px;color:var(--dim);font-weight:500;margin-bottom:20px}

/* 2026-08-26 — three tracks, not four. The condition chip came out of the
   systems rows: the buyer page renders items.condition, and nothing writes that
   column, so the badge it shows is migration 001's default. A fourth `auto`
   track with nothing in it still costs a gap, so the track goes too. */
#report .rpRow{display:grid;grid-template-columns:minmax(0,1.45fr) auto minmax(120px,1.5fr);
  gap:18px;align-items:center;padding:15px 2px;border-top:1px solid rgba(255,255,255,.06)}
#report .rpRow:first-of-type{border-top:none}
#report .rpN{min-width:0}
#report .rpN b{display:block;font-size:16px;font-weight:900;letter-spacing:-.35px;line-height:1.2}
#report .rpN span{display:block;font-size:12px;font-weight:600;color:var(--dim);margin-top:3px;
  line-height:1.35;text-wrap:pretty;overflow-wrap:break-word}
#report .rpY{text-align:right;font-variant-numeric:tabular-nums}
#report .rpY b{display:block;font-size:19px;font-weight:900;letter-spacing:-.6px;line-height:1}
#report .rpY span{display:block;font-size:11.5px;font-weight:600;color:var(--dim);margin-top:3px}
#report .rpLife{min-width:0}
#report .rpTrack{height:5px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
#report .rpFill{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--teal),var(--cyan));
  transition:width 1.1s cubic-bezier(.2,.8,.25,1)}
#report.seen .rpFill{width:var(--w,40%)}
#report .rpLife span{display:block;margin-top:7px;font-size:11.5px;font-weight:600;color:var(--dim)}
/* ── THE ROOM GRADE BOX ────────────────────────────────────────────────────
   Lux: "make them boxes that match our app, just larger than the app. In every
   box should be the same size with enough room for a plus or a minus."

   THIS IS THE APP'S BOX, MEASURED, NOT APPROXIMATED. From
   src/screens/Property/areasStyles.js:174-175 —
     gradeBadgeLg  { width:60, height:60, borderRadius:16, borderWidth:2 }
     gradeBadgeTxt { fontSize:22, Montserrat-Black, letterSpacing:-0.5 }
   and areasComponents.js:709 paints it borderColor gc+'66' (40% alpha) over
   backgroundColor gc+'18' (~9%), text in gc.

   Scaled up by 68/60 for the web, every ratio kept: 68px box, 18px radius,
   25px type. --gbox is the ONE number to change; radius and type follow it, so
   the box can never go rectangular or outgrow its letter.

   FIXED SQUARE ON PURPOSE. A padding-sized pill makes "A" narrower than "B-",
   and a column of badges that each start at a different x-position reads as a
   mistake. Every box is identical and "A+" has room inside it.

   COLOURS are gradeColor() from src/screens/Property/areasUtils.js:561, which
   is byte-identical to the buyer page's ramp at property-page/index.ts:961:
   A green, B lime, C cyan, D purple, F pink, keyed off the FIRST letter so A-
   rides with A and B+ with B. Three copies of one ramp is how a room reads B
   on the phone and C+ on the web page. */
/* 2026-08-26 · Lux: "shrink the boxes 10% but keep the letter the size they
   are." So the two stopped sharing one number. --gbase is what the box WOULD
   be and is what the letter is still sized from at the app's 22/60 ratio;
   --gbox is 81% of it (10% off, then 10% off again) and drives width, height
   and the corner radius, which
   keeps the app's 16/60 corner on a smaller square. Change --gbase alone and
   box and letter move together again. */
#report .rpGrade{--gbase:68px;--gbox:calc(var(--gbase) * .81);--g:var(--muted);
  flex:0 0 auto;justify-self:end;display:grid;place-items:center;
  width:var(--gbox);height:var(--gbox);border-radius:calc(var(--gbox) * .265);
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:calc(var(--gbase) * .368);font-weight:900;letter-spacing:-.5px;line-height:1;
  color:var(--g);border:2px solid color-mix(in srgb, var(--g) 40%, transparent);
  background:color-mix(in srgb, var(--g) 9%, transparent)}
#report .rpGrade[data-grade^="A"]{--g:#2EE8A0}
#report .rpGrade[data-grade^="B"]{--g:#CCFF35}
#report .rpGrade[data-grade^="C"]{--g:#38D9F5}
#report .rpGrade[data-grade^="D"]{--g:#B090FF}
#report .rpGrade[data-grade^="F"]{--g:#FF6B9A}
#report .rpNote{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06);
  font-size:12px;color:var(--dim);font-weight:600}
#report .rpCap{max-width:62ch;margin:20px auto 0;text-align:center;font-size:13px;
  color:var(--dim);font-weight:600}

/* ── ⭐ THE SAMPLE, REACHABLE ───────────────────────────────────────────────
   Lux: "add a QR code for the sample so they can scan on their phone if they
   want or click the link to view on computer." Both, in one block: the code is
   the tap target on a phone AND a link on a desktop, so nobody has to work out
   which half is for them. */
#report .rpSample{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center;
  max-width:660px;margin:28px auto 0;padding:22px 24px;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(150deg,color-mix(in srgb,var(--teal) 8%,transparent),var(--card) 62%)}
/* A QR needs a light ground and a quiet zone. currentColor paints the modules,
   so the ink is set here rather than baked into the file. */
#report .rpQr{flex:0 0 auto;display:block;width:132px;padding:12px;border-radius:12px;
  background:#fff;color:#04263D;line-height:0}
#report .rpQr .qrArt{width:100%;height:auto;display:block}
#report .rpSampleTxt{flex:1 1 280px;min-width:0}
#report .rpSampleTxt h4{font-size:17px;font-weight:900;letter-spacing:-.2px;margin:0 0 6px}
#report .rpSampleTxt p{font-size:13px;color:var(--dim);font-weight:600;margin:0 0 14px;line-height:1.55}
#report .rpSampleTxt p a{color:var(--teal);font-weight:800}
@media(max-width:520px){
  #report .rpSample{flex-direction:column;text-align:center;gap:18px}
  #report .rpSampleTxt{flex:1 1 auto}
}

/* ── THE THREE-WAY. Not us vs a portal — us vs the INSPECTION, which is the
      thing that actually answers these questions today, and answers them too
      late and for money. $340 / $200-$500 is HomeGuide's 2026 national figure,
      looked up rather than estimated. ───────────────────────────────────── */
#report .rpTri{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:60px}
#report .rpCol{--c:var(--dim);position:relative;padding:24px 22px;border-radius:18px;
  border:1px solid var(--line);background:var(--card);
  display:flex;flex-direction:column}
#report .rpCol.win{--c:var(--teal);border-color:rgba(46,232,160,.4);
  background:linear-gradient(165deg,var(--card),rgba(46,232,160,.07))}
#report .rpCol h4{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c);margin-bottom:6px}
/* ⚠️ Its own line, not a baseline-aligned sibling. Inline, "THE HOME REPORT"
   wrapped to two lines and pushed its own timing label out of line with the
   other two columns — three cards that no longer read as one comparison. */
#report .rpWhen{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  text-transform:none;color:var(--dim)}
#report .rpCol p{font-size:14px;font-weight:500;color:var(--muted);line-height:1.6;margin:12px 0 0}
#report .rpCol p b{color:var(--txt);font-weight:800}
/* ⭐ margin-top:auto, not a fixed margin. The three columns carry different
   amounts of copy, and three prices that land 11px apart read as sloppy rather
   than as a comparison. This pins each one to the bottom of its own card, and
   the grid already stretches the cards to equal height. */
#report .rpPrice{margin-top:auto;padding-top:20px;font-size:clamp(24px,3.4vw,32px);font-weight:900;
  letter-spacing:-1px;color:var(--c);line-height:1;font-variant-numeric:tabular-nums}
/* ⚠️ TWO LINES ARE RESERVED WHETHER OR NOT TWO ARE USED. The prices are
   bottom-anchored, so a caption that wraps in ONE column lifts that column's
   number 11px above the other two — three headline figures that no longer sit
   on a line. Reserving the space is what keeps them level at every width. */
#report .rpPrice small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--dim);margin-top:8px;line-height:1.45;min-height:2.9em}

/* ── TWO WAYS TO USE IT ───────────────────────────────────────────────────
   Straight from pro-home-claim's own header: "Pre-sale runs create -> claim ->
   load -> PUBLISH -> sell -> transfer. Post-sale-only runs create -> claim ->
   load -> transfer, and simply never publishes." One pipeline, two products,
   and the agent who never wants a public page still gets all of it. That is a
   fact about the architecture, not a marketing frame, which is why it can
   carry a whole panel. */
#report .rpWays{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:60px}
#report .rpWay{--c:var(--cyan);position:relative;overflow:hidden;padding:28px 26px;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
  background:linear-gradient(165deg,var(--card),color-mix(in srgb,var(--c) 7%,transparent))}
#report .rpWay.b{--c:var(--lime)}
#report .rpWay::after{content:"";position:absolute;top:-38%;right:-18%;width:230px;height:230px;
  border-radius:50%;filter:blur(56px);opacity:.26;background:var(--c);pointer-events:none}
#report .rpWay > *{position:relative;z-index:1}
#report .rpWay h4{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c);margin-bottom:9px}
#report .rpWay h3{font-size:clamp(19px,2.5vw,25px);font-weight:900;letter-spacing:-.6px;
  line-height:1.16;margin-bottom:11px;text-wrap:balance}
#report .rpWay p{color:var(--muted);font-size:14.5px;font-weight:500;line-height:1.62;margin:0}
#report .rpWay p b{color:var(--txt);font-weight:800}
#report .rpBoth{margin-top:14px;padding:26px 26px 24px;border-radius:18px;border:1px solid var(--line);
  background:var(--card);text-align:center}
#report .rpBoth h3{font-size:clamp(19px,2.6vw,26px);font-weight:900;letter-spacing:-.6px;
  margin-bottom:9px;text-wrap:balance}
#report .rpBoth > p{color:var(--muted);font-size:14.5px;font-weight:500;max-width:66ch;
  margin:0 auto 22px;line-height:1.62}
#report .rpBoth > p b{color:var(--txt);font-weight:800}

/* ── THE MOAT (retired shape, kept for the chain inside rpBoth) ───────────── */
#report .rpMoat{position:relative;overflow:hidden;margin-top:60px;padding:38px 34px;
  border-radius:20px;border:1px solid rgba(176,144,255,.34);
  background:linear-gradient(150deg,var(--card),rgba(176,144,255,.085));
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:36px;align-items:center}
#report .rpMoat::after{content:"";position:absolute;top:-40%;right:-14%;width:300px;height:300px;
  border-radius:50%;filter:blur(66px);opacity:.32;background:var(--purple);pointer-events:none}
#report .rpMoat > *{position:relative;z-index:1;min-width:0}
#report .rpMoat h3{font-size:clamp(22px,3.1vw,32px);font-weight:900;letter-spacing:-.8px;
  line-height:1.13;margin-bottom:13px;text-wrap:balance}
#report .rpMoat p{color:var(--muted);font-size:15px;font-weight:500;line-height:1.65}
#report .rpChain{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:left}
#report .rpLink{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13.5px;font-weight:700}
#report .rpLink b{font-weight:900;color:var(--txt)}
#report .rpLink span{color:var(--muted);font-weight:500}
#report .rpLink em{flex:none;width:27px;height:27px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-style:normal;font-size:12px;font-weight:900;color:var(--ink-on-bright);
  background:var(--cyan)}
#report .rpLink:nth-child(2) em{background:var(--lime)}
#report .rpLink:nth-child(3) em{background:var(--teal)}

/* ── SETUP ────────────────────────────────────────────────────────────────── */
#report .rpSetup{margin-top:64px;text-align:center}
#report .rpSetup h3{font-size:clamp(22px,3.4vw,34px);font-weight:900;letter-spacing:-.9px;
  margin-bottom:10px;text-wrap:balance}
#report .rpSetup h3 em{font-style:normal;color:var(--cyan)}
#report .rpSetup > p{color:var(--muted);font-size:16px;font-weight:500;max-width:56ch;margin:0 auto 34px}
#report .rpFoot{margin-top:26px;text-align:center;color:var(--dim);font-size:13px;font-weight:600}

/* ── THE CLOSE — back to the paid seat ───────────────────────────────────── */
#report .rpEnd, #lo .rpEnd{margin-top:64px;padding:38px 30px;border-radius:20px;text-align:center;
  border:1px solid rgba(56,217,245,.32);
  background:linear-gradient(165deg,var(--card),rgba(56,217,245,.075))}
#report .rpEnd h3, #lo .rpEnd h3{font-size:clamp(21px,3vw,30px);font-weight:900;letter-spacing:-.8px;
  margin-bottom:11px;text-wrap:balance}
#report .rpEnd > p, #lo .rpEnd > p{color:var(--muted);font-size:15.5px;font-weight:500;max-width:60ch;
  margin:0 auto 24px;line-height:1.62}
#report .rpEnd > p b, #lo .rpEnd > p b{color:var(--txt);font-weight:800}
#report .rpEnd .btn, #lo .rpEnd .btn{margin:0 auto}
#report .rpEndNote, #lo .rpEndNote{margin-top:16px;font-size:12.5px;color:var(--dim);font-weight:600}
/* ⚖️ The compliance line. Agents are trained on inducement rules and a vendor
   that raises it first reads as one who has done the reading — so this is a
   trust signal as much as a disclaimer. It states what we DO enforce (the
   licence snapshot) and hands back the one question that is genuinely theirs.
   ⛔ It must never claim we have cleared all fifty states, because we have not:
   Tennessee 1260-02-.33 is the one read in full. */
#report .rpLegal, #lo .rpLegal{max-width:74ch;margin:22px auto 0;font-size:11.5px;line-height:1.62;
  color:var(--dim);font-weight:500;text-align:left;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.07)}
#report .rpLegal b, #lo .rpLegal b{color:var(--muted);font-weight:800}

@media(max-width:900px){
  #report{padding:64px 0 60px}
  #report .rpWays{grid-template-columns:1fr}
  #report .rpChain{grid-template-columns:1fr}
  #report .rpTri{grid-template-columns:1fr}
  #report .rpMoat{grid-template-columns:1fr;gap:26px;padding:28px 24px}
  #report .rpRow{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;padding:16px 2px}
  #report .rpLife{grid-column:1/-1;order:3}
  /* A room row is name / dimensions / grade. At this width the dimensions drop
     to their own line so the grade stays beside the room it belongs to. */
  #report .rpRoom{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:16px 2px}
  #report .rpDim{grid-column:1/-1;order:3;text-align:left}
  /* Still square, still identical. One number moves; the 10% and the letter
     ratio both ride on it. */
  #report .rpGrade{--gbase:62px}
}


/* ============================================================
   AUDIENCE SWITCH  (2026-09-02)

   Lux: the page "feels like it's only for agents since we show the pre sale
   sheet down low on the page that has no use for a lending officer."

   He was right, and the mismatch was structural: this page already carried a
   Loan Officer PRICING tab and an LO toggle in the ROI calculator, so an LO
   scrolled through an agent story and only met themselves at checkout.

   One attribute on <html> now decides the whole page. Everything paired is
   marked data-for="agent" / data-for="lo"; exactly one of each pair is in the
   layout at a time, so nothing reflows when the switch flips.

   <html data-aud="agent"> is hard-coded in the markup, so a visitor with
   JavaScript off gets the agent page — the larger audience — rather than both
   or neither.

   COLOURS follow the LOCKED 2026-07-21 rule above: Agent = CYAN, Loan Officer
   = LIME. Not orange, which is reserved site-wide for needs-attention.
   ============================================================ */
html[data-aud="agent"] [data-for="lo"],
html[data-aud="lo"]    [data-for="agent"]{ display:none !important; }

/* The hero switch reuses .audTab so it is the SAME control as the pricing
   tabs further down — one visual language, not two. */
.audSwitch{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 20px}
.audSwitch .audTab{font-size:13.5px;padding:9px 16px;min-height:42px}
.audSwitchLabel{display:block;font-size:11px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt);text-align:center;margin-bottom:10px}


/* ============================================================
   CARD ACCENTS  (2026-09-02)

   Lux: "the page has a lot of dull black, white and cyan sections. i don't see
   any of our different color gradients in boxes to separate info, colored
   titles, etc. pulling from the app."

   The app colour-codes by area — rooms are pink and purple, the money screens
   green, the Upgrade Hub lime, X-Ray cyan — and the site had flattened all of
   that to one cyan icon on one flat card, six times in a row. A grid where
   every tile looks identical is a grid nobody scans.

   ONE modifier, data-accent, drives four things together so a card can never
   end up half-recoloured: the border tint, a diagonal wash that fades into the
   card colour, the icon tile, and the title.

   PALETTE IS THE EXISTING TOKENS ONLY — cyan, teal, purple, lime, pink. No new
   hex is invented here. ORANGE IS DELIBERATELY ABSENT: --attention is defined
   AS --orange precisely so it can only ever mean needs-attention, and using it
   as decoration is the trap _CANON/TRAPS.md calls "the colour already meant
   something".

   The un-accented .card is untouched, so every card elsewhere on the site
   renders exactly as it did.
   ============================================================ */
.card[data-accent="cyan"]{
  border-color:rgba(56,217,245,0.26);
  background:linear-gradient(158deg, rgba(56,217,245,0.10) 0%, rgba(56,217,245,0.02) 42%, var(--card) 78%);
}
.card[data-accent="cyan"]:hover{ border-color:rgba(56,217,245,0.5); box-shadow:0 0 30px rgba(56,217,245,0.12) }
.card[data-accent="cyan"] .ic{ background:rgba(56,217,245,0.14); border-color:rgba(56,217,245,0.36); color:var(--cyan) }
.card[data-accent="cyan"] h3{ color:var(--cyan) }
.card[data-accent="teal"]{
  border-color:rgba(46,232,160,0.26);
  background:linear-gradient(158deg, rgba(46,232,160,0.10) 0%, rgba(46,232,160,0.02) 42%, var(--card) 78%);
}
.card[data-accent="teal"]:hover{ border-color:rgba(46,232,160,0.5); box-shadow:0 0 30px rgba(46,232,160,0.12) }
.card[data-accent="teal"] .ic{ background:rgba(46,232,160,0.14); border-color:rgba(46,232,160,0.36); color:var(--teal) }
.card[data-accent="teal"] h3{ color:var(--teal) }
.card[data-accent="purple"]{
  border-color:rgba(176,144,255,0.26);
  background:linear-gradient(158deg, rgba(176,144,255,0.10) 0%, rgba(176,144,255,0.02) 42%, var(--card) 78%);
}
.card[data-accent="purple"]:hover{ border-color:rgba(176,144,255,0.5); box-shadow:0 0 30px rgba(176,144,255,0.12) }
.card[data-accent="purple"] .ic{ background:rgba(176,144,255,0.14); border-color:rgba(176,144,255,0.36); color:var(--purple) }
.card[data-accent="purple"] h3{ color:var(--purple) }
.card[data-accent="lime"]{
  border-color:rgba(204,255,53,0.26);
  background:linear-gradient(158deg, rgba(204,255,53,0.10) 0%, rgba(204,255,53,0.02) 42%, var(--card) 78%);
}
.card[data-accent="lime"]:hover{ border-color:rgba(204,255,53,0.5); box-shadow:0 0 30px rgba(204,255,53,0.12) }
.card[data-accent="lime"] .ic{ background:rgba(204,255,53,0.14); border-color:rgba(204,255,53,0.36); color:var(--lime) }
.card[data-accent="lime"] h3{ color:var(--lime) }
.card[data-accent="pink"]{
  border-color:rgba(255,107,154,0.26);
  background:linear-gradient(158deg, rgba(255,107,154,0.10) 0%, rgba(255,107,154,0.02) 42%, var(--card) 78%);
}
.card[data-accent="pink"]:hover{ border-color:rgba(255,107,154,0.5); box-shadow:0 0 30px rgba(255,107,154,0.12) }
.card[data-accent="pink"] .ic{ background:rgba(255,107,154,0.14); border-color:rgba(255,107,154,0.36); color:var(--pink) }
.card[data-accent="pink"] h3{ color:var(--pink) }

/* The "Cribfolio Pro" half of the comparison carried a 0.08 gradient nobody
   could see. Same two brand colours, enough of them to read as a different
   place from the column beside it, plus a lit edge where the two meet. */
.vs .col.us{
  background:linear-gradient(152deg, rgba(56,217,245,0.16) 0%, rgba(176,144,255,0.12) 55%, rgba(46,232,160,0.07) 100%);
  border-left:1px solid rgba(56,217,245,0.28);
}
.vs .col.them{ opacity:.82 }