/* ===========================================================================
   LobiPlan marketing stylesheet — SHARED by /landing/index.html (business) and
   /landing/households.html (household).

   ⚠ WHY THIS FILE EXISTS AT ALL, AND WHY IT IS NOT INLINE.
   Until 2026-08-10 the marketing site was ONE page with ~290 lines of inline
   CSS. The 2026-08-10 panel split it in two (a business-first home and a
   dedicated household page). Two pages with two inline copies of the same
   chrome is the "two lists naming each other with nothing checking" shape this
   repo has been bitten by repeatedly — `tax_profile`, `ORG_COLS`,
   `ai_actions.kind`. One file, loaded by both, cannot drift.

   ⚠ IT ALSO SIMPLIFIED THE CSP. `style-src` already carries 'unsafe-inline'
   for the inline `style=` attributes, and `script-src 'self'` allows a
   same-origin file with no hash — so moving the big interactive script out to
   /brand/lp-*.js took the landing `script-src` from TWO large sha256 hashes to
   ONE tiny one (the pre-paint theme snippet, byte-identical on both pages).
   Every copy edit used to move a hash. Now none of them do.

   ⚠ /brand/ IS LOAD-BEARING, NOT A TIDY FOLDER. On lobiplan.com the
   vercel.json catch-all rewrites EVERY path to a landing HTML file. The only
   static escapes are /favicon.svg and /brand/*. A stylesheet at
   /landing/lp.css would be served the HTML of the landing page with
   `content-type: text/html`, and — per house rule -22 — would answer with a
   confident HTTP 200 while every rule in it silently failed to apply.

   ⚠ CLASS NAMES ARE GATED. `reelParity.test.ts` intersects every class DEFINED
   here with every class USED by the reel's component graph and fails on any
   overlap. That gate exists because this page once defined its own `.grid`;
   Tailwind's `.grid` is `display:grid` and nothing else, so it never reset the
   `grid-template-columns` declared here, and every 32px avatar in the reel
   inherited a 280px column track and rendered EMPTY. Prefix new classes `lp-`
   or pick a name no utility framework would ever claim.
   =========================================================================== */

/* ---------------------------------------------------------------
   FONTS — self-hosted, no third-party request.
   Google's own per-subset woff2 slices of the Inter and Manrope VARIABLE
   fonts (one file covers the whole weight range), downloaded and committed.
   latin + latin-ext only: every French accent we use (é è ê à â ç ô ù î ï œ
   «») lives in U+0000-00FF, so the latin file alone serves both languages and
   latin-ext is effectively never fetched.
   --------------------------------------------------------------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/brand/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/brand/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('/brand/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('/brand/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root, html[data-theme="light"] {
  --ink: #14171F;          /* brand near-black (lockup-light text) */
  --prim: #4A6CF7;         /* brand blue (lobi-mark) — business */
  --prim-deep: #3554E0;
  --personal: #7C3AED;     /* brand violet — household workspace hue */
  --personal-deep: #6D28D9;
  /* Button FILL, kept separate from --personal on purpose. --personal is
     lightened in dark mode because it is used as TEXT on dark surfaces; the
     same lightening as a fill under white label text drops the household CTA
     to 2.72:1, under the 4.5:1 AA floor for 15px bold. The fill therefore
     stays dark in both themes (white on #7C3AED = 5.7:1). */
  --personal-btn: #7C3AED;
  --personal-btn-hover: #6D28D9;
  /* #3554E0, not the #4A6CF7 logo blue: white on the logo blue is 4.39:1,
     under the 4.5:1 AA floor for this 15px bold label. 6.01:1 here.
     --prim keeps the logo blue for TEXT and marks; only the FILL darkens. */
  --prim-btn: #3554E0;
  --prim-btn-hover: #2A45BC;
  /* ⚠ A FILL IS NOT A TEXT COLOUR — house rule -8, and this page had the bug it
     describes. `--prim` (#4A6CF7) is the logo blue and is correct as a mark and
     as a large heading accent. Used as small BODY text it measures 4.39:1 on
     paper, under the 4.5:1 AA floor — the very ratio the --prim-btn comment
     above already cites as too low for a 15px label. Found by sweeping the
     rendered page: the mobile menu's "Start free" link was exactly that.
     These are the TEXT roles: deep enough to read in light, lightened in dark. */
  --prim-text: #3554E0;
  --personal-text: #6D28D9;
  --tint: #A9BCFF;         /* highlight on dark surfaces */
  --paper: #F4F2EC;        /* brand off-white (lockup-dark text) */
  --paper-2: #FFFFFF;
  --fg: #1E2430;
  --heading: #14171F;
  --muted: #5B6472;
  --line: #E2E0D8;
  --header-bg: rgba(244, 242, 236, .92);
  --step-bg: #F4F2EC;
  --dark-panel: #14171F;   /* strip, both themes */
  --art-wash: .12;         /* wash-fill opacity for the Paper Blueprint art */
  --scene-bg: #EDEAE2;     /* the plate a vector scene sits on — see .lp-scene */
  --scene-line: #D9D5CA;
}
html[data-theme="dark"] {
  --ink: #14171F;
  --prim: #6E8AFF;
  --prim-deep: #4A6CF7;
  --personal: #A78BFA;
  --personal-deep: #8B5CF6;
  --personal-btn: #7C3AED;        /* see the note in the light block */
  --personal-btn-hover: #6D28D9;
  --prim-btn: #3554E0;            /* see the note in the light block */
  --prim-btn-hover: #2A45BC;
  /* Text roles invert: on a dark page the DEEP values would disappear, so these
     take the already-lightened hues. Same names, opposite direction — which is
     the whole reason they are tokens and not literals at the call site. */
  --prim-text: #6E8AFF;
  --personal-text: #A78BFA;
  --tint: #A9BCFF;
  --paper: #0F1218;
  --paper-2: #1A1F29;
  --fg: #E8EBF2;
  --heading: #FFFFFF;
  --muted: #9AA5B8;
  --line: #2A3140;
  --header-bg: rgba(15, 18, 24, .92);
  --step-bg: #12161E;
  --dark-panel: #14171F;
  --art-wash: .20;
  --scene-bg: #171C25;
  --scene-line: #2A3140;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; }
body {
  font-family: Inter, 'Segoe UI', -apple-system, Helvetica, Arial, sans-serif;
  color: var(--fg); background: var(--paper); line-height: 1.6;
  transition: background .25s, color .25s;
  overflow-x: clip;            /* no single block may widen the viewport */
}
h1, h2, h3 { font-family: Manrope, Inter, 'Helvetica Neue', Arial, sans-serif; font-weight: 800; color: var(--heading); line-height: 1.15; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
:focus-visible { outline: 2px solid var(--prim); outline-offset: 2px; border-radius: 6px; }

/* theme-aware logo swap */
html[data-theme="light"] .only-dark { display: none; }
html[data-theme="dark"] .only-light { display: none; }

/* ---- Paper Blueprint art (house rules: src/components/art/index.tsx) ----
   One hue, two tones. Stroke is currentColor; the wash fill is the same
   colour at --art-wash. Colour therefore comes from the element's own
   `color`, which is why the same markup works in light and dark. */
.art { display: block; width: 100%; height: auto; color: var(--prim); }
.art-personal { color: var(--personal); }
.art-muted { color: var(--muted); }
.art-spot { max-width: 200px; margin: 0 0 14px; }

/* ===========================================================================
   VECTOR PEOPLE — `.lp-scene`
   ---------------------------------------------------------------------------
   ⚠⚠ THIS IS A DELIBERATE, OWNER-RULED OVERRIDE OF A STANDING HOUSE RULE, and
   it is written down here so the next reader does not "fix" it back.

   `src/components/art/index.tsx:14` states the app's illustration rule in its
   own header: "NO faces, NO people." The 2026-08-10 panel's design seat cited
   that rule to REFUSE illustrated people on the marketing page, on the ground
   that breaking it here alone splits the brand from the product. Benjamin
   overruled it (2026-08-10) after being shown that argument, because the
   reported user complaint was specifically that the page contains no human
   being, and no photography exists to answer it with.

   SO THE OVERRIDE IS SCOPED AS NARROWLY AS IT CAN BE:
   · It lives in the MARKETING stylesheet, which the app never loads.
   · The app's own Paper Blueprint set is untouched and still has no people.
   · `.lp-scene` is a separate class from `.art`, so nothing inherits its way
     into a product surface by accident.

   THE STYLE, and why each choice was made rather than defaulted:
   · FIGURES ARE HUMAN BUT FACES ARE ABSTRACTED — hair, posture, clothing and
     skin tone, no drawn eyes or mouths. Drawn eyes at this scale land in one
     of two bad places: uncanny, or childish. A page selling double-entry
     bookkeeping under SYSCOHADA cannot afford either. Abstracted faces are the
     established editorial-illustration answer and read as adult.
   · SKIN TONES ARE REAL, LITERAL HEX AND ARE *NOT* THEMED. This is the one
     place on the site where a colour must NOT follow the theme: a person's
     skin is not a surface token, and running it through --art-wash would make
     the figures dissolve into the background in one theme and glow in the
     other. They are painted on their own plate (see .lp-scene-plate) so the
     contrast behind them is fixed no matter what the page is doing.
   · THE CAST IS THE ACTUAL MARKET, not a diversity gesture. LobiPlan is a
     Canadian bilingual product with real DRC/SYSCOHADA and Lingala/Swahili
     roots; a francophone and a Black Canadian household are the base case.
   · EVERY SCENE SITS INSIDE A BORDERED PLATE. The design seat's note about
     photography applies identically to a painted scene: an illustration with
     literal fills does not theme, so it must sit on a defined plane rather
     than bleed into a page whose value flips between #F4F2EC and #0F1218.
   =========================================================================== */
.lp-scene { display: block; width: 100%; height: auto; }
.lp-scene-plate {
  background: var(--scene-bg);
  border: 1px solid var(--scene-line);
  border-radius: 18px;
  padding: 18px;
  overflow: hidden;
}
/* The line work inside a scene follows the section hue; the PEOPLE do not. */
.lp-scene-biz { color: var(--prim); }
.lp-scene-home { color: var(--personal); }

/* header */
header { position: sticky; top: 0; z-index: 30; background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
/* padding-BLOCK only: the shorthand `padding: 12px 0` would reset .wrap's
   side padding (it is declared later and has equal specificity), which put
   the logo and the menu button flush against the screen edge on phones. */
.nav { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.logo { display: flex; align-items: center; min-height: 44px; }
.logo img { height: 50px; width: auto; display: block; }
.nav-links { display: flex; gap: 14px; margin-left: auto; align-items: center; }
.nav-links a.navlink { color: var(--muted); text-decoration: none; font-size: 15px; }
.nav-links a.navlink:hover { color: var(--heading); }
/* 44px minimum tap target on every control (WCAG 2.5.5 / iOS HIG). */
.icon-btn { border: 1px solid var(--line); background: none; border-radius: 10px; padding: 4px 10px; font-size: 14px; line-height: 1.5; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.icon-btn svg { display: block; }
.icon-btn:hover { color: var(--heading); }
.btn, .btn:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; white-space: nowrap; background: var(--prim-btn); color: #FFFFFF; text-decoration: none; padding: 11px 22px; border-radius: 10px; font-weight: 700; font-size: 15px; font-family: Inter, sans-serif; }
.btn:hover { background: var(--prim-btn-hover); color: #FFFFFF; }
/* ⚠ TEXT role for the LABEL, fill role for the BORDER. A 1px border is a
   graphical object (3:1 floor) so --prim is fine there; the 15px bold label is
   text and measured 3.93:1 in light. */
.btn-ghost, .btn-ghost:visited { background: none; border: 1px solid var(--prim); color: var(--prim-text); }
.btn-ghost:hover { background: rgba(74, 108, 247, .1); color: var(--prim-text); }
.btn-personal, .btn-personal:visited { background: var(--personal-btn); }
.btn-personal:hover { background: var(--personal-btn-hover); }
.btn-personal.btn-ghost, .btn-personal.btn-ghost:visited { background: none; border: 1px solid var(--personal); color: var(--personal); }
.btn-personal.btn-ghost:hover { background: rgba(124, 58, 237, .1); color: var(--personal); }

/* mobile disclosure menu — pure <details>, no JS, keyboard-operable */
.navmenu { display: none; position: relative; }
.navmenu > summary { list-style: none; cursor: pointer; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 232px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 8px; display: grid; gap: 2px; box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.navmenu-panel a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 9px; text-decoration: none; color: var(--fg); font-size: 15px; }
.navmenu-panel a:hover { background: var(--step-bg); }
.navmenu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
/* The TEXT role, not the fill — see the --prim-text note above. And the
   household page's menu CTA has to be violet: it is the only control in that
   menu that was rendering in business blue on a violet page. */
.navmenu-panel a.menu-cta { color: var(--prim-text); font-weight: 700; }
.navmenu-panel a.menu-cta-personal { color: var(--personal-text); }

/* hero */
.hero { padding: 64px 0 44px; }
.hero h1 { font-size: clamp(32px, 5.2vw, 52px); max-width: 780px; text-wrap: balance; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--prim); }
.hero h1 i { font-style: normal; color: var(--personal); }
.hero p.sub { max-width: 620px; margin: 20px 0 0; font-size: 19px; color: var(--muted); }
.hero .cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .note { margin-top: 16px; font-size: 15px; color: var(--fg); font-weight: 600; }
.hero .note b { color: var(--prim-text); }
.hero-home .note b { color: var(--personal-text); }

/* Hero split — copy left, the live reel right. The reel is the only thing on
   this site that proves the product exists, so it is above the fold now
   rather than 1.5 screens down inside a card. */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; }
@media (min-width: 900px) { .hero-split { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 44px; } }

/* section shell */
section.band { padding: 66px 0; }
.band-alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.band h2 { font-size: clamp(26px, 4vw, 36px); text-align: center; letter-spacing: -0.015em; }
.band .lead { text-align: center; color: var(--muted); max-width: 700px; margin: 14px auto 40px; font-size: 16px; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.band-alt .card { background: var(--step-bg); }
/* 12px uppercase is small text, not a heading — --prim measured 3.93:1 here. */
.card .tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--prim-text); margin-bottom: 10px; }
.card-personal .tag { color: var(--personal-text); }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }
.card p + p { margin-top: 10px; }
.card b { color: var(--fg); font-weight: 600; }
/* ⚠ Rhythm, not decoration. The 2026-08-10 panel counted ~38 identical
   rectangles between the H1 and the footer and called it the real cause of
   "the message is unclear": with no scale change anywhere, the eye cannot
   rank anything, so it ranks nothing. A spanning card is how a section says
   which of its points is the big one, and it costs one class. */
.card-wide { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .card-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; }
  .card-wide .lp-scene-plate { margin: 0; }
}

/* ---- icon lists ----
   ⚠ THE PAGE HAD NO ICONS AT ALL AND THAT IS WHAT THE COMPLAINT MEANT.
   Before 2026-08-10 the whole site contained three icons — a sun, a moon and a
   hamburger. Every "icon" a reader would point at was a 9x9px rounded square
   (`content: ""`) or a `\2713` checkmark rendered in Inter, across ~28 list
   rows. These are real 24-grid duotone glyphs traced from the app's own
   registry (src/components/icons.tsx, ICON_STROKE 1.75), so the marketing site
   and the product finally draw from one hand. */
.lp-ico { flex: none; width: 22px; height: 22px; color: var(--prim); }
.lp-ico-personal { color: var(--personal); }
.ws-list, .trust-grid, .tier-list { list-style: none; }
.ws-list li, .trust-grid li { display: flex; gap: 12px; align-items: flex-start; }
.ws-list li { margin: 11px 0; font-size: 14.5px; color: var(--fg); }
.ws-list { margin: 18px 0 22px; padding: 0; flex: 1; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px 28px; margin-top: 34px; padding: 0; }
.trust-grid li { font-size: 15px; color: var(--fg); }
.trust-grid b { font-weight: 600; }

/* audience split */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 36px; align-items: stretch; }
.ws-card { border: 1px solid var(--line); border-radius: 16px; padding: 28px; background: var(--paper-2); display: flex; flex-direction: column; }
.ws-biz { border-top: 4px solid var(--prim); }
.ws-personal { border-top: 4px solid var(--personal); }
.ws-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.ws-badge-biz { color: var(--prim-text); }
.ws-badge-personal { color: var(--personal-text); }
.ws-card h3 { font-size: 21px; margin-bottom: 8px; }
.ws-card > p { color: var(--muted); font-size: 15px; }

/* how */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 44px; counter-reset: step; }
.step { position: relative; padding: 24px 22px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--step-bg); }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: -16px; left: 18px; width: 32px; height: 32px; border-radius: 50%; background: var(--prim); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.step h3 { font-size: 17px; margin: 6px 0 6px; }
.step p { font-size: 14px; color: var(--muted); }

/* the three 07:00 questions — the household page's strongest device */
.q-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 34px; }
.q-strip div { border: 1px solid var(--line); border-left: 3px solid var(--personal); border-radius: 12px; padding: 16px 18px; background: var(--paper-2); font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 17px; color: var(--heading); }

/* pricing tiers */
.pricing { text-align: center; }
.price-group { text-align: center; font-size: 20px; margin: 44px 0 4px; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; text-align: left; }
.tier { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; background: var(--paper-2); display: flex; flex-direction: column; }
.tier-featured { border-color: var(--prim); box-shadow: 0 8px 30px rgba(74,108,247,.12); }
.tier-personal.tier-featured { border-color: var(--personal); box-shadow: 0 8px 30px rgba(124,58,237,.12); }
/* ⚠ THE FILL IS --prim-btn, NOT --prim, AND DARK MODE IS WHY. `--prim`
   LIGHTENS in dark (#4A6CF7 -> #6E8AFF) because it is used as TEXT on dark
   surfaces there. Under a white label that lightening runs the wrong way:
   measured 3.11:1 on the rendered dark page, against a 4.5 floor for an 11px
   uppercase label. `--prim-btn` is the fill role and stays #3554E0 in both
   themes — the same reasoning the --personal-btn block states at the top of
   this file, which this rule simply had not been given. */
.tier-flag { position: absolute; top: -11px; left: 22px; background: var(--prim-btn); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.tier-personal .tier-flag { background: var(--personal-btn); }
.tier-name { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 18px; color: var(--heading); }
.tier-price { font-family: Manrope, Inter, sans-serif; font-weight: 800; font-size: 32px; color: var(--heading); margin: 8px 0 2px; }
.tier-price span { font-size: 15px; font-weight: 600; color: var(--muted); }
/* ⚠ The business tiers all read "Contact us". At 32px Manrope 800 that phrase
   was rendering as the largest thing in the pricing block on a page whose
   biggest number was otherwise $4.99 — a consumer price shouting over the
   commercial one. Same weight, smaller size; the value line under it carries
   the card. */
.tier-quote .tier-price { font-size: 22px; }
.tier-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.tier-list { margin: 0 0 20px; padding: 0; flex: 1; }
.tier-list li { display: flex; gap: 10px; align-items: flex-start; margin: 9px 0; font-size: 14px; color: var(--fg); }
.tier-list li.tier-no { color: var(--muted); }
.tier-cta { text-align: center; }
.price-note { text-align: center; margin-top: 28px; font-size: 14px; color: var(--muted); }
/* :not(.btn) — this rule exists for the inline "get in touch" link in the
   founding-partner note. Without the guard it also hit the Start free BUTTON
   in the trust section, setting its text to var(--prim) — the button's own
   background — so the CTA rendered as a blank coloured rectangle in BOTH
   themes. A .btn brings its own colours; never restyle one by descent. */
.price-note a:not(.btn) { color: var(--prim-text); font-weight: 600; }
.price-fine { text-align: center; margin-top: 10px; font-size: 13px; color: var(--muted); }
/* ⚠ HOUSE RULE -23, RECURRING IN NEW CODE THE SAME DAY IT WAS CITED. The
   cross-link to the household page was an ordinary <a> that no rule matched,
   so it fell back to the BROWSER DEFAULT link blue — measured 2.00:1 on the
   dark page. Preflight is off on this site, so an unstyled link is not
   "inherits the paragraph colour", it is #0000EE. Any new link in body copy
   needs a colour, or it ships invisible in one of the two themes. */
.price-fine a, .band p a:not(.btn) { color: var(--prim-text); font-weight: 600; }
/* Household surfaces take the violet text role. Scoped by the CARD, not by a
   sibling-of-the-hero selector — the first draft wrote `.hero-home ~ * .band p a`,
   which can never match (the bands are SIBLINGS of the hero, not descendants of
   one) and would have sat here looking like it did something. */
.card-personal a:not(.btn), .ws-personal a:not(.btn) { color: var(--personal-text); }

/* ---- contact block ----
   ⚠ WHY THIS EXISTS: the three business tier CTAs were `mailto:` links labelled
   "Talk to us". The B2B seat's finding — "a lead that bounces off a broken
   mailto is not a lead you lost, it is one you never knew existed". A `mailto:`
   opens nothing at all for anyone on webmail with no registered handler, and
   because the label is a BUTTON the address is invisible: the visitor gets a
   dead click and no way to discover where to write. (The footer and the founder
   note keep their `mailto:` on purpose — there the address is visible text, so
   the worst case is still "read it and copy it".)

   The address below is PLAIN TEXT IN THE MARKUP, selectable, at readable size.
   That is the guarantee, and it survives JavaScript failing entirely — which on
   this site is a real state, because a stale CSP hash silently kills every
   script. The copy button and the tier-aware subject are enhancements on top. */
.lp-contact { border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; background: var(--paper-2); margin-top: 34px; text-align: left; scroll-margin-top: 90px; }
.band-alt .lp-contact { background: var(--step-bg); }
.lp-contact h3 { font-size: 21px; margin-bottom: 8px; }
.lp-contact p { color: var(--muted); font-size: 15px; }
.lp-contact p + p { margin-top: 10px; }
.lp-addr-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 14px; }
/* The address itself: mono, large, and user-selectable even where the page sets
   selection rules elsewhere. This is the thing that must survive everything. */
.lp-addr { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 19px; font-weight: 600; color: var(--heading); user-select: all; word-break: break-all; }
.lp-copy { border: 1px solid var(--line); background: none; border-radius: 10px; padding: 8px 14px; font: 600 14px Inter, sans-serif; color: var(--fg); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.lp-copy:hover { border-color: var(--prim); color: var(--prim-text); }
.lp-copy .lp-copied { display: none; }
.lp-copy.is-copied .lp-copy-idle { display: none; }
.lp-copy.is-copied .lp-copied { display: inline; color: var(--prim-text); }
.lp-contact-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
/* Which tier the visitor pressed, echoed back so the jump is not disorienting.
   Hidden until a tier button sets it — an empty label is worse than none. */
.lp-about { display: none; font-size: 14px; color: var(--muted); }
.lp-about.is-set { display: block; }
.lp-about b { color: var(--fg); font-weight: 600; }

/* the founder note — the one place a real person is named */
.lp-founder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 36px; border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--paper-2); }
@media (min-width: 720px) { .lp-founder { grid-template-columns: 148px minmax(0, 1fr); gap: 26px; } }
.lp-founder p { color: var(--muted); font-size: 15px; }
.lp-founder p + p { margin-top: 10px; }
.lp-founder cite { display: block; margin-top: 12px; font-style: normal; font-weight: 600; color: var(--fg); font-size: 14px; }

footer { border-top: 1px solid var(--line); padding: 34px 0; }
footer .wrap { display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }
footer .foot-brand { display: flex; align-items: center; gap: 10px; }
footer .foot-brand img { height: 24px; }
footer .foot-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .nav-links { gap: 10px; }
}
@media (max-width: 720px) {
  .logo img { height: 42px; }
  /* section links and Sign in move into the disclosure menu — they are
     NOT dropped. The theme and language toggles stay in the row. */
  .nav-links a.navlink, .nav-links a.only-wide { display: none; }
  .navmenu { display: block; }
  .nav-links { gap: 8px; }
  .hero { padding: 44px 0 34px; }
  section.band { padding: 52px 0; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .nav { gap: 8px; padding-block: 8px; }
  .logo { flex-shrink: 0; min-width: 0; }
  .logo img { height: 34px; }
  /* Sign up joins the menu too; the hero CTA is one scroll-inch below. */
  .nav-links a.btn { display: none; }
  .icon-btn { padding: 4px 8px; }
  .hero { padding: 34px 0 28px; }
  .hero p.sub { font-size: 17px; }
  .hero .cta .btn { width: 100%; }
  .step { padding: 24px 16px 20px; }
  .card { padding: 22px 20px; }
  .ws-card { padding: 24px 20px; }
  .lp-scene-plate { padding: 12px; border-radius: 14px; }
}
@media (max-width: 360px) {
  .logo img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
}

/* ---- the live reels ----
   The reel carries its own dark panel and its own scoped tokens, so it does
   not follow the page's light/dark toggle. That is deliberate: pre-auth the
   variant matrix collapsed to one, and this page has BOTH a theme toggle and
   an EN/FR toggle. Pinning the panel is the trick the sign-in screen used.

   ⚠⚠ IT IS NO LONGER HIDDEN ON PHONES, AND THAT WAS THE POINT OF THE 2026-08-10
   PANEL. The old rule was `@media (max-width: 767px) { display: none }`, with
   the reasoning that a reel would push the real content off the first screen.
   Three of the four seats found that independently and named the consequence:
   the one asset that proves the product exists was being shown to desktop —
   where B2B research happens and the copy already convinces — and hidden from
   mobile, where consumer traffic lives. A phone visitor got zero pictures of
   the product. Zero. It is smaller on a phone now; it is not absent. */
.lp-reel-wrap { margin: 0 }
.lp-reel-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em }
.lp-reel { background: linear-gradient(160deg, #131a2b, #0d1220); border-radius: 18px }
.lp-reel-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted) }