/* landing-v2.css — GENERATED by scripts/extract-landing-v2.mjs from theme-v2.css; never hand-edit.
 * Main's landing (design/landing-v2 88bf0c0, merged 0e251b7; task #14): every rule whose selector names .lv2, plus
 * the @keyframes it uses, declarations verbatim and in main's order. port/shell links the one ds.css (no theme-v2.css),
 * whose mirror !important/ID-weight rules would otherwise beat these, so: each selector gets :not(#_lv2)x2, every
 * declaration is !important, and one that was already !important on main moves to a :not(#_lv2i)x2 clone right after
 * its rule. Among themselves the rules resolve exactly as on main. Listed last in SHELL_SHEETS, after ds.css;
 * build-ds drops the mirror's older .lv2 rules from ds.css. Guard: scripts/test-landing-v2-sheet.mjs. */
/* Kill every decorative gradient. Same lesson as the glow reset below: my
   first version enumerated ~26 components and a full scan of all 312 classes
   in style.css found 17 gradients still standing (.pod-1/2/3, .rk-bar,
   .mat-grid, .belt-sweep, .wip-hero, .chat-dock, .skeleton, .grad-text…).
   Enumeration loses to a stylesheet this size, so this is structural too.
   `background-image: none` is the narrow tool on purpose — it strips the
   gradient and leaves background-COLOR intact, so nothing loses its surface.
   The exemptions are listed immediately after and are the only places a
   gradient is allowed to survive. */
/* EXEMPTIONS — the four legitimate uses.
   1. the radar's area fill (§14) — the protected asset
   2. .skeleton — its shimmer IS a moving gradient; a flat skeleton reads as a
      broken empty box rather than "loading"
   3. mask-image on .lk-fade (§10) — a mask, not a painted surface
   4. the belt logo's own SVG paint
   5. .boot-splash — FOUND ON THE SERVED PAGE 2026-09-03, not by any assertion.
      The splash's ONLY background is a radial gradient and it declares no
      background-color, so the reset above stripped it to fully TRANSPARENT.
      A position:fixed z-index:9999 transparent overlay is invisible in review
      and catastrophic on screen: the boot mark animated on top of the LANDING
      PAGE, belt straps drawn straight across the headline and the CTA, and the
      "camera push" handoff blurred a page the user could already read. Every
      boot assertion passed the whole time — the suite reads declarations, and
      the declaration was correct; it was overridden two stylesheets later.
      This is the same shape as .grad-text and .sm-tier-num below (a reset that
      removed the thing an element was actually painted with), which is why the
      exemption belongs here rather than a re-declared gradient in style.css. */
/* .grad-text — A CRITICAL FOLLOW-UP TO THE RESET ABOVE, found on the served
   page and not by any assertion.
   style.css paints it with a cyan gradient AND `-webkit-text-fill-color:
   transparent`, relying on background-clip:text. The reset strips the
   background-IMAGE but cannot touch the transparent text fill — so the
   headline was painted with a transparent fill over nothing and rendered
   COMPLETELY INVISIBLE. On the landing page that silently deleted the second
   half of the h1 ("finally measured."), which read as a cropped headline.
   The fix is to undo the clip mechanism, not to restore a gradient: one flat
   accent colour, text fill returned to normal, and the descender padding
   hack neutralised since it only existed to stop the clip box slicing j/y/g
   tails.
   LESSON: a structural reset must also revert the properties that only made
   sense TOGETHER with what it removed. `background-image: none` is not safe on
   any element whose text is drawn by the background. */
@media (prefers-reduced-motion: reduce) {
}
/* ══════════════════════════════════════════════════════════════════════════
   16. THE MISSING BLOCKS — classes rendered by a view and styled by NOBODY
   ══════════════════════════════════════════════════════════════════════════
   FOUND ON THE SERVED PAGE 2026-09-03 (Reqwa: "this is definitely glitched"),
   not by any suite, and the cause is worth stating precisely because it is
   this codebase's signature defect wearing a new hat.
   `.dev-stack` and its nine children are rendered by `VIEWS.home` in views.js
   — the landing page's whole "real product surfaces" argument, the three
   device cards. They are styled in NO stylesheet. Not overridden, not
   shadowed: never written. So the browser fell back to unstyled block flow and
   the three designed cards rendered as a bare vertical list of label/value
   text runs — "Streak14 days", "Check in2 rounds" — which is exactly what the
   screenshot shows and exactly what a reader calls broken.
   Why nothing caught it: the design suite reads DECLARATIONS, so a class with
   no declaration to read is invisible to it, and the header comment at
   shell.ts:148 records that five earlier design layers were DELETED from the
   end of style.css when theme-v2 replaced them. These rules lived in one of
   those layers. The deletion was correct and the replacement was incomplete —
   read-with-nothing-writing, in the stylesheet.
   The generic lesson, which is the reason this block is documented rather than
   quietly added: an assertion over declarations can only ever check the CSS
   that EXISTS. What it cannot check is markup that resolves to nothing, and
   that has to be verified by rendering. `scripts/test-orphan-classes.mjs` now
   does it structurally — every class in every shipped view must resolve to a
   rule — so this cannot recur silently.
   All of it is tokens. No new colour, no gradient, no glow, no blur.
   ────────────────────────────────────────────────────────────────────────── */
/* ── 16.1 Landing device stack (views.js VIEWS.home) ──────────────────────
   Three product screens shown as device cards. They are the landing page's
   argument, so they are the loudest surface on it — which here means the
   brightest SURFACE, not a colour: `--raised` against the section's `--card`,
   separated by the hairline exactly like every other stack in the app. */
@media (min-width: 768px) {
}
/* ── 16.2 Solo Mastery gaps (views10.js) ──────────────────────────────────
   Same cause, smaller blast radius: the hero's tier block, the XP group, the
   AI slot and the milestones panel are rendered and unstyled. Their siblings
   (.sm-tier-num, .sm-xp-bar, .sm-ai-body, .sm-ms-grid) DO exist in style.css,
   which is what made the omission hard to see — the parts were painted and
   only the containers were missing. */
/* ── 17.1 THE HERO FIGURE ─────────────────────────────────────────────────
   The single biggest difference between his screen and ours, and it is a type
   decision rather than a layout one: the NUMBER is the headline. Ours set the
   rank LABEL at 2.5rem and never set the figure at all, so the loudest thing
   on the dashboard was a word.
   clamp() rather than a breakpoint: this figure has to hold at 360px (where
   the app is specified to work without a horizontal scrollbar) and still
   dominate at 430px. A fixed rem plus a media query gives two sizes and a
   visible jump; clamp gives the curve.
   `font-variant-numeric: tabular-nums` comes from .tnum in the markup — at
   this size proportional digits make the number visibly shift when a streak
   rolls 9 → 10. */
/* (.hero-figure geometry moved to §37.1 `#rank-hero .hero-figure` — DS8 item 5) */
/* THE EMPTY STATE IS REQUIRED, not a fallback. His day-one column draws an
   em-dash for all three, and it is the right call: three zeroes on a fresh
   account read as failure, three dashes read as "not yet" — which is true.
   The dash is quieter than a real value so the panel does not compete with
   the hero for attention it has not earned. */
/* ── 17.5 THE ORBS GO ─────────────────────────────────────────────────────
   Five blurred coloured circles were still drifting behind the auth stage,
   the onboarding card, the mastery hero and two others. They are absent from
   both references and from Reqwa's mockup, and they are exactly the
   decoration section 2 removes everywhere it could reach by selector — they
   survived because they are painted from INLINE STYLES in the views, which no
   stylesheet reset can touch.
   The lime is what forced the issue rather than my finding it by audit: a
   42px-blurred coral at 50% opacity read as warm ambient depth, but a
   42px-blurred LIME reads as a green light leak across the card. I saw it on
   the onboarding screen — a khaki wash behind the question.
   Neutralised HERE rather than by editing five inline styles in four view
   files, because `background` is set inline and inline wins the cascade:
   `display: none` is the one property that beats it without !important on a
   colour. The elements stay in the markup (they are aria-hidden decoration,
   so removing them is a view change with no user-visible upside) and stop
   painting. If ambient depth comes back it comes back as a surface step, not
   as a blurred circle. */
/* The topbar mark's own gradient (style.css:67) — a three-stop coral ramp on
   the wordmark. Flat accent, per §2: the wordmark is type, and type painted
   with a gradient is the thing that made the landing headline invisible once
   already. */
/* ══════════════════════════════════════════════════════════════════════════
   19. LANDING PAGE  (views.js VIEWS.home — the logged-out front door)
   Reference for FEEL only (Reqwa): one oversized centred headline, product
   screens as the argument, a single pill CTA, quiet everything else. His own
   dashboard mockup leads on surface/radius/type, so every value here is the
   token the dashboard already uses — nothing new.
   THE TWO PHONE SLOTS ARE EMPTY BY DESIGN. Reqwa supplies real iPhone
   screenshots with the device edges in them; they land in .land-shot as an
   <img>. So the slot is sized to a real iPhone aspect (≈ 1 : 2.16) and paints
   NOTHING that could be mistaken for UI — a --sunken well, the hairline, the
   mark at low opacity and a caption. No CSS phone frame (his shots carry
   the device), no fake screen, no fake number.
   Every animation here is transform/opacity only, and reduced-motion resets
   to the END state, never to a 0-opacity frame — that has bitten this codebase
   twice (the boot blocks document both).
   ══════════════════════════════════════════════════════════════════════════ */
/* §19b — THE 3D SCROLL MOMENT (Round 4 §3F; JS in views.js landingMotion).
   Only when the script has opted the group in (.is-3d) — so a no-JS or
   reduced-motion visitor keeps the flat fan above, byte for byte. The group
   is the perspective stage; each frame keeps its own transform (set inline
   per frame by the script) and a slow transition so a fast scroll still
   reads as one motion rather than a flicker. The hover rules above are
   disabled here: inline transforms win and the scroll owns the motion. */
/* (.land-tile > i: §37 landing rule — DS8 item 5) */
@media (min-width: 900px) {
}
/* ══════════════════════════════════════════════════════════════════════════
   22. TIERS SCREEN  (views11.js VIEWS.plans — Designer, Wave 2, 2026-09-04)
   Built to the dashboard mockup's grammar: one radius language (--radius on
   the card, --radius-sm inside it), a hairline plus a flat surface step, a
   big tabular figure, and the accent held for ONE thing per screen — here the
   hero tier's border and its primary pill. The pre-theme .plan-card rules in
   style.css (coral tint, 22px, white flag) are overridden by the `.tier`
   compound below rather than edited: style.css is the pre-theme fallback
   frame and this layer is the source of truth.
   Every figure on the card is the server's string. The Pro Week sentence
   renders from /billing/intro and ONLY while it says eligible — a covered
   member never sees it (test:intro guards the server half).
   ══════════════════════════════════════════════════════════════════════════ */
/* THE HERO. One accent border on the whole screen, and the extra top room is
   for the flag, which sits ON the border rather than floating beside it. */
/* The headline feature — the one sentence the hero tier exists to sell,
   lifted out of the list onto its own raised panel. */
/* ══════════════════════════════════════════════════════════════════════════
   22b. THE IN-APP PLANS UI, REBUILT IN THE LANDING'S LANGUAGE
        (Wave 4a-7, Reqwa: "Our plans UI in landing page is very good but
        horrid in home page etc, its design doesnt even match our design and
        colors and plans ui could be horizontal everywhere except for the
        landing page.")
   ══════════════════════════════════════════════════════════════════════════
   WHY THE IN-APP CARD LOOKED WRONG, since the diagnosis decides the fix. It
   was not a colour problem — §22 already used the same tokens as the landing.
   It was ANATOMY. The landing card (`.land-plan`, §20) sets the name on its
   own line, then the price as a 2.3rem figure with the cadence beside it, then
   a fixed-height tagline, then a hairline, then the feature list — a vertical
   read where the price is the second thing you see. The in-app card put the
   name and the price on ONE baseline row with `justify-content: space-between`
   at 1.9rem, so on a 390px phone a long tier name and a five-character price
   collided into the middle of the card and the figure stopped being the
   headline. Same tokens, different grammar, and the landing's grammar is the
   one Reqwa signed off.
   So this block re-points the SAME `.plan-card.tier` markup at the landing's
   anatomy instead of introducing a third card. One card language, two
   layouts:
     LANDING  — untouched (`.land-plans`, §20). Explicitly out of scope.
     IN-APP   — a horizontal snap-scroll rail on phones, a row on desktop.
   WHY A RAIL RATHER THAN A STACK. Three stacked cards on a phone put the
   third tier below two full screens of scroll, so the tier the screen exists
   to sell is the one nobody reaches. A rail makes the comparison lateral,
   which is how a price table is read, and `scroll-snap-type: x mandatory` with
   85% card width means one card is centred at rest and the NEXT one is visibly
   peeking — the affordance that tells a thumb there is more. Fixed widths were
   the alternative and they break at 320px.
   The rail applies to every in-app plan surface: `VIEWS.plans` (`.tiers-list`),
   the paywall sheet's plan rail (`.pw-plans`, §22c) and the welcome sheet's
   mini row (`.intro-paid-row`, §22d).
   ACCESSIBILITY, not an afterthought: the rail is a scroll container with real
   focusable buttons inside it, so keyboard and screen-reader order is DOM
   order and unchanged. `overscroll-behavior-x: contain` stops a horizontal
   swipe from triggering the browser's back gesture, which is the bug every
   snap rail ships with once.
   ────────────────────────────────────────────────────────────────────────── */
/* ── 22b.1 THE CARD, IN THE LANDING'S ANATOMY ────────────────────────────
   Every value below is the landing card's own, so the two cannot drift: name
   1.15rem/850, tagline .86rem on --txt-3 with a fixed min-height so three
   cards keep their prices on one line, price figure 2.3rem/900 tabular, the
   feature list behind a hairline with .55rem gaps. */
/* The head stops being a baseline row: name over price, like the landing. */
/* ── 22b.2 CURRENT — the badge, from plan.id ─────────────────────────────
   Was a teal-ish border literal (rgba(45,212,191,.4)) — an off-palette colour
   surviving from the pre-lime theme, exactly the class of leftover this round
   is sweeping. "Current" is a STATE, not an accent, so it takes the neutral
   raised surface and the primary ink; the accent stays on the hero. */
/* ══════════════════════════════════════════════════════════════════════════
   22d. THE WELCOME SHEET'S TIERS  (plansIntro) — DS2-FIX 2026-09-06
   ══════════════════════════════════════════════════════════════════════════
   Reqwa: "looks very cheap, especially that green and red text box". The
   sheet is now the landing pricing section (§20 .land-plan) at 380 px: the
   same card surface, the same hairline, the same name / figure type scale,
   lime only on the highlighted tile's border + flag and on the check glyphs.
   No semantic green or red anywhere on the sheet — free is not "good" and
   paid is not "danger"; they are two tiers. */
/* ── 29.6 NO SPLASH ON THE LANDING ROUTE (Wave 4a-2) ─────────────────────
   Reqwa: "designer removing boot up animation for landing page". The gate is
   an attribute set by shell.ts's pre-paint script (html[data-boot="off"]),
   NOT a route check in CSS and not a class added by app.js — both of those
   run after the first paint, which would show one frame of splash to the
   visitor it is being removed for.
   `display: none` rather than `opacity: 0`: an invisible overlay at z-index
   9999 still eats every tap on the landing page's own call to action, which is
   the bug shape this file has hit twice (§10's .is-locked, .mode-pill).
   The paired half is in app.js — dismissSplash() returns immediately when the
   attribute is set, so the app does not sit through the 1.65s minimum hold
   for an animation nobody is watching. Both halves are asserted by
   test:boot. */
/* .grad-text is the landing h1 — primary ink, no plate (unchanged intent). */
/* the hero tier carried a lime border + lime flag + lime ticks + lime CTA. One
   lime object per card: the CTA. The flag is ink-on-raised, ticks are --txt-2
   (DS4 item 7 rule), the hero border is the hairline-2 like every featured card. */
/* ── 37.11 LANDING (views.js VIEWS.home; §19) — rhythm + geometry only ──── */
/* MARKETING-WAVE2 §4 holds: no section removed, no copy changed, one h1, the
   two-phone perspective is the ONE 3D moment (untouched). This pass sets the
   spacing scale, puts tiles/lists on the system radii and takes the lime off
   every decorative glyph so the hero CTA is the page's one lime object above
   the fold; section kickers are ink like everywhere else in the app. */
/* DS7 (Reqwa, landing dark): the "you" bubble keeps §19's lime fill + --accent-on —
   --accent-weak is an 11% tint for selected rows ON a card surface and reads
   as khaki over the landing ground. Below the fold, so the hero CTA is still the
   one lime object above it. */
/* gym profile hero */
/* DS7: the cover band was removed from views7.js (it overprinted the name after
   staff login — Reqwa 20:52 UTC). DS8: `.gym-cover` / `.gym-hero-cover` had no render
   site left anywhere (grep), rules deleted; the mark is a plain raised tile in one row with the name. */
/* §37.25 HOME gym link (views4.js hero, "Demo Academy"): QA gate measured 100×17 — the
   anchor now stands 44 px tall and bleeds 8 px left so the glyph still sits on the text
   edge; type stays 11.5 px, visual rhythm unchanged (mt-3 12 px → 44−17 = 27 px of the
   height is the pad, so margin-top drops to 0 and the block below keeps its mt-5). */
/* e. Progress allowance strip + Belt Progress row + story hero (§34.9 / style.css §Progress story) */
/* ── 37.27 LANDING #pricing = ONE SYSTEM WITH /plans (§37.10) AND THE PAYWALL
   (style.css §paywall) — HANDOFF-Designer-DS5 §2 item 1, CSS-only (views.js
   markup untouched; MARKETING-WAVE2 §4: no section/copy change). The landing
   tier still carried the pre-DS7 set — lime border, lime flag, lime ticks AND
   a lime CTA. Rule from §37.10: one lime object per card, the CTA; flag is
   ink-on-raised; ticks --txt-2; hero border = hairline-2; the system geometry
   and type scale. ── */
/* 37.27b — THE RAIL + DOTS (Designer, Round 3; was the joint Designer/Second
   Designer item in HANDOVER-e §8, now Designer-owned). Below 900px `.land-plans`
   stops being a 3-tall stack (three full screens before the top tier at 390)
   and becomes the snap rail /plans (§22b) and the paywall (§22c) already use:
   82% cards, centre snap, the next card peeking. Then the dots say "there are
   three": ink, not lime — the CTA stays the card's one lime object — the
   current dot a 20px pill on --txt-1, the rest 6px on --line-2, each inside a
   44px button. The nav is hidden until landingRail() (views.js) fills it AND
   the rail can actually scroll, so the desktop grid never shows dots.
   Left/right bleed: the rail runs edge to edge through the page gutter so a
   card can be half-visible at the edge (the swipe affordance), padding puts
   the first card back on the gutter. */
/* ── 37.30 ATHLETE JOURNEY AT THE CEILING (Round 2, Tech Lead 3794940 — Reqwa's
   "design ceiling" order). demo_pro walked at 390, both themes, landing →
   register → onboarding → first analysis → Progress → Roll IQ → Me → paywall
   (probe scripts/probes/journey.mjs). Nineteen stops, five fixes, each one a
   place where the walk stopped feeling like one product. Same pattern as
   §37.26: restate here, never edit §34 / style.css legacy blocks in place. ── */
/* ── 37.32 LANDING PHONE FRAMES (Round 3, Reqwa 05:40 via Tech Lead 3806775).
   The two hero screens were raw captures with no device around them. They now
   sit inside a CSS iPhone: the JPG stays a pure 1179×2556 screen capture (so
   DS7-scratch/shoot-landshots.mjs keeps working and Reqwa's own device shots
   still drop in), and .land-shot IS the device — a dark titanium-style body
   (bezel from --frame-* below), the screen corner radius inside it, a Dynamic
   Island cutout as ::before, and a soft elevation shadow. Only the DEVICE
   TREATMENT is taken from the reference; layout, copy and colours are ours.
   THEME OF THE SCREENS: the captures are shot in the app's DARK theme on both
   page themes (Tech Lead ruling): dark screen inside a dark body is one object
   on either page, the lime CTA reads strongest on dark, and the two frames
   never flip mid-scroll. .land-shots-note says so on the light page.
   The body reads on BOTH page themes because it is a fixed near-black with a
   1px lighter rim (titanium edge highlight) — on the dark page the rim is what
   separates device from ground, on the light page the body itself does.
   Composition: front frame (the second slot) slightly larger and overlapping,
   as the reference does — via transform scale only, no layout shift, and the
   3D scroll script's inline transforms still win once .is-3d is on. */
/* ── 37.33 DS10 LANDING HERO RESTYLE (Round 4, Tech Lead 3809871; Reqwa's
   direction from his other product's hero). Dark full-bleed stage with a
   dimmed real mat behind it; three fanned iPhone frames centre-forward that
   bleed off the bottom of the hero into the next section; heavier, tighter
   headline; one quiet sub line; lime CTA; desktop section bar.
   DARK IN BOTH PAGE THEMES — same ruling as the frames (§37.32): the hero is
   one object, photo + phones + type, and it does not invert. So the type
   inside .has-stage is pinned to the dark inks by value, not by --txt-*.
   The photo is CC0 (img/hero/LICENSE.md), graded dark in the file, dimmed
   again here to ~30% with a gradient into the page ground so the frames land
   on solid colour. No layout shift: the stage is absolutely positioned inside
   a section whose height comes from its content; the <img> is cover-fitted. */
/* hero type pinned to the dark set */
/* THE TRIO. Left · centre · right; the centre one forward and ~1.15× —
   composed as a 3-column grid so the sides can slide behind. The whole group
   is pushed DOWN so the frames bleed off the hero's bottom edge into the next
   section (negative margin below the section, positive z so they ride over
   the page ground). Pose = a function of --land-depth (0 = leaning back and
   dim, 1 = the rest fan); reduced-motion and no-JS never set it → 1. */
/* the section after the hero must clear the bleed */
/* the note sits in the page; it must inherit the bleed variable from the hero, which is its previous sibling, so declare it on both */
/* DESKTOP SECTION BAR (≥1024): a row above the eyebrow, inside the hero, that
   links the sections this page already has. Not the app's topbar (Second
   Designer owns .navcapsule / .glass this round) — it lives in the landing
   markup only. Below 1024 it is not rendered visible; the sticky topbar's
   Log in / Join free already cover the two actions on a phone. */
@media (min-width: 1024px) {
  /* ONE sign-in entry per viewport (Tech Lead 3815074). At ≥1024 the section
     bar above carries Log in · Get started, so the sticky topbar's logged-out
     pair (Log in · Join free) would sit one line above it — two ways in, two
     labels. Rule: on the landing route at ≥1024 the topbar keeps the brand
     only; the hero bar owns the auth links. Below 1024 .land-nav is
     display:none and the topbar pair stays exactly as today.
     Scope = the landing route, read from the DOM: .land-hero is rendered by
     VIEWS.home and nowhere else, so #app:has(.land-hero) IS "the landing
     route" without a body class or a JS branch. The pair is picked by shape,
     not by label: the logged-out .tb-cta buttons are the only ones in
     .tb-tools with no aria-label (Check in carries one), so a logged-in
     visitor who lands on / via "Back to base" keeps Check in + avatar.
     Same :has() mechanism as §37.x #app:has(.navdock); where :has() is
     unsupported the bar simply shows both pairs, which is today's state. */
}
/* Only landing chrome adopts the fixed DS10 dark stage, not app chrome. */
/* Reqwa review: floating navigation, not an edge-to-edge rectangular band.
   Theme selection is untouched. The landing alone shares DS10's dark chrome. */
/* No landing navigation. DS16 owns signed-in header geometry; retired
   Home-only 44px circle rules must not compete with its 56px header row. */
/* §38.5 DS15 / 5 — inner-product motion: 120ms press / 180ms state / 200ms
   reveal. Landing/stock fan is locked and explicitly outside this scope. */
/* DS18 public landing only. Existing app, onboarding and pricing surfaces keep
   their own rules; this wrapper is rendered exclusively by VIEWS.home. */
/* Keep the landing's dark hero, give process and pricing the same card family. */
/* DS24 light surfaces. Decorative boundaries become surface depth, not input
   boundaries. Keep every border width (and therefore all DS23 geometry).
   Landing and auth have separate owners; chart strokes and DS20 are untouched. */
/* DS27: original 6d39601 lime for action roles in both themes. Hero geometry
   and the separate boot animation keep their existing styles. */
/* DS24 landing visuals. Current-source demo capture, isolated from app/auth. */
/* END DS24 landing visuals. */
/* DS32 original hero back (B. Tech Lead, Reqwa 2026-09-23 msgs 4656626/4656702):
   the DS10-DS14 stage hero -- eyebrow chip, heavy centred headline, lime pill
   "Start free", quiet "I already train here", three real screens in stock
   iPhone frames with the land-fan-arrive / land-device-* entrance animation.
   Markup is back in VIEWS.home; the rules for it never left this file (37.33,
   37.37, DS14 1c). This block only undoes the DS18/DS24 flattening on top of
   them and makes the stage pitch black (#000) instead of #0A0A0C. */
/* Page behind the landing: the original near-black ground (#0A0A0C, the hero stage one step lighter at #0F0F11 like Reqwa's screenshot); pure white in light. */
/* Scroll-driven trio (views.js landingTrioScroll): JS owns every transform, so
   the DS14 keyframe entrance is off; the group only fades/rises in once the
   screens are decoded. The fan is visible (rest pose) if JS never runs. */
/* No app-shell flash before the landing paints (app.js dismissSplash adds .boot-painted). */
/* DS32b ONE TEXTURED PAGE (Reqwa 4658242: "different background on the hero
   and the rest is bad, it has to be sleek, TEXTURED background the whole
   landing like AscendMax"). The hero is no longer a block: it is transparent
   and sits on the same surface as every section. The surface is one fixed
   layer behind the whole landing -- near-black ground, a soft light pool at the
   top, and fine monochrome film grain -- so it never seams or restarts as you
   scroll. Cards sit on it as one tone step with the same grain showing through.
   Light theme: warm white with a faint dark grain. No photo, no glow. */
/* END DS32 original hero back. */
/* ══════════════════════════════════════════════════════════════════════════
   DS34 LANDING BELOW THE HERO (B. Designer; copy = LANDING-COPY-v2, Marketing
   4658231 + Copywriter 4658303; brief Tech Lead 4658631/4658668). Sits on the
   DS32b textured surface. Rhythm: split → split-reversed → tile grid →
   centred pricing → full-width academy panel → centred close. No glow, no
   pure black, lime only for the one action per section and the Pro tier.
   ══════════════════════════════════════════════════════════════════════════ */
/* TIER COLOURS — one identity across landing, /plans and the paywall.
   Free = neutral, Pro = lime (the recommended tier), Overpowered = ink
   (white in dark, black in light): a 4px tier bar on the card top plus the
   tier's own CTA, flag and dot. Lime stays "do this" — it only marks Pro. */
/* Carried from main (design/landing-v2 hero B, Reqwa 4829983; 3rd CR 4837226): the landing-v2 block, byte for byte. */
/* LANDING v2 (replay of design/landing-v2 c737f11 + landing-cue c316aa3).
   Scoped to .lv2, rendered only by VIEWS.home. Self-contained on purpose so it
   survives the design/system single-stylesheet rebase (TL #msg:4826135 item 4).
   Palette: lime + black/white by theme only (#msg:4808671); the only lime TEXT
   is none in light: lime is a fill under ink, ink draws the line (Reqwa round 1 items 6/27). Motion: transform/opacity only. */
.lv2:not(#_lv2):not(#_lv2) { --lv2-bg: #07080A !important; --lv2-ink: #F4F4F5 !important; --lv2-ink-2: #A1A1AA !important; --lv2-card: #111113 !important; --lv2-sk: #26262A !important; --lv2-line: rgba(255,255,255,.1) !important; --lv2-lime: #CEFF56 !important; --lv2-lime-ink: #CEFF56 !important; --lv2-num-bg: #CEFF56 !important; --lv2-num-ink: #0A0A0C !important; --lv2-tile: transparent !important;
  position: relative !important; margin: 0 calc(50% - 50vw) !important; padding: 0 max(1.25rem, env(safe-area-inset-left)) 3rem !important; background: var(--lv2-bg) !important; color: var(--lv2-ink) !important; overflow-x: clip !important; font-family: Inter, system-ui, -apple-system, sans-serif !important; }
html[data-theme="light"] .lv2:not(#_lv2):not(#_lv2) { --lv2-bg: #FFFFFF !important; --lv2-ink: #0A0A0C !important; --lv2-ink-2: #5F6068 !important; --lv2-card: #0C0C0E !important; --lv2-sk: #2A2A2E !important; --lv2-line: rgba(0,0,0,.09) !important; --lv2-lime-ink: #0A0A0C !important; --lv2-num-bg: #CEFF56 !important; --lv2-num-ink: #0A0A0C !important; --lv2-tile: #0A0A0C !important; }
html #app.pg-app-lv2-c338 main:not(#_lv2):not(#_lv2) { background: var(--lv2-bg, #101013) !important; padding-bottom: 0 !important; }
html[data-theme="light"] #app.pg-app-lv2-c338:not(#_lv2):not(#_lv2), html[data-theme="light"] #app.pg-app-lv2-c338 main:not(#_lv2):not(#_lv2) { background: #FFFFFF !important; }
html #app.pg-app-lv2-c338:not(#_lv2):not(#_lv2) { background: #07080A !important; }
.lv2 > *:not(#_lv2):not(#_lv2) { max-width: 1072px !important; margin-inline: auto !important; }
.lv2 .lv2-nav:not(#_lv2):not(#_lv2) { display: flex !important; align-items: center !important; gap: 1.25rem !important; height: 64px !important; padding-top: env(safe-area-inset-top) !important; }
.lv2 .lv2-brand:not(#_lv2):not(#_lv2) { margin-right: auto !important; display: inline-flex !important; align-items: center !important; gap: .6rem !important; font-weight: 800 !important; font-size: 17px !important; letter-spacing: -.02em !important; }
.lv2 .lv2-brand-mark:not(#_lv2):not(#_lv2) { width: 26px !important; height: 26px !important; fill: var(--lv2-lime) !important; }
html[data-theme="light"] .lv2 .lv2-brand-mark:not(#_lv2):not(#_lv2) { fill: #0A0A0C !important; }
.lv2 .lv2-navlink:not(#_lv2):not(#_lv2) { display: inline-flex !important; align-items: center !important; min-height: 44px !important; min-width: 44px !important; justify-content: center !important; font-size: 15px !important; font-weight: 500 !important; color: var(--lv2-ink-2) !important; background: none !important; border: 0 !important; }
.lv2 .lv2-navlink:hover:not(#_lv2):not(#_lv2) { color: var(--lv2-ink) !important; }
/* hero, direction A round 2 (task #14 item 29; Reqwa #msg:4828002, #msg:4828825):
   a textured surface, one iPhone that carries the story, no floating cards.
   Nothing glows: lime is flat colour only (button, track). No radial gradients. */
/* page surface (item 29, Reqwa #msg:4829983: variant B, no texture, both themes):
   flat near-black / warm off-white with a very soft linear tone shift.
   No texture, no radial, no glow. */
.lv2:not(#_lv2):not(#_lv2) { --lv2-bg: #101013 !important; background: #101013 !important; }
html[data-theme="light"] .lv2:not(#_lv2):not(#_lv2) { --lv2-bg: #F2F2F7 !important; background: #F2F2F7 !important; }
html #app.pg-app-lv2-c338:not(#_lv2):not(#_lv2), html #app.pg-app-lv2-c338 main:not(#_lv2):not(#_lv2) { background: #101013 !important; }
html[data-theme="light"] #app.pg-app-lv2-c338:not(#_lv2):not(#_lv2), html[data-theme="light"] #app.pg-app-lv2-c338 main:not(#_lv2):not(#_lv2) { background: #F2F2F7 !important; }
.lv2 > *:not(#_lv2):not(#_lv2) { position: relative !important; z-index: 1 !important; }
.lv2 .lv2-hero:not(#_lv2):not(#_lv2) { position: relative !important; text-align: center !important; padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 6rem) !important; }
.lv2 .lv2-hero-copy:not(#_lv2):not(#_lv2) { min-width: 0 !important; }
.lv2 .lv2-mark :is(.lv2-br, .lv2-br-tl, .lv2-br-tr, .lv2-br-bl, .lv2-br-br, .lv2-knot):not(#_lv2):not(#_lv2) { fill: inherit !important; }
.lv2 .lv2-h1:not(#_lv2):not(#_lv2) { margin: 0 auto !important; max-width: 11em !important; font-size: clamp(2.75rem, 7vw, 5.5rem) !important; line-height: .96 !important; font-weight: 800 !important; letter-spacing: -.045em !important; text-wrap: balance !important; }
.lv2 .lv2-sub:not(#_lv2):not(#_lv2) { margin: 1.5rem auto 0 !important; max-width: 24em !important; font-size: clamp(1.0625rem, 1.5vw, 1.25rem) !important; line-height: 1.5 !important; font-weight: 400 !important; color: var(--lv2-ink-2) !important; text-wrap: pretty !important; }
.lv2 .lv2-cta:not(#_lv2):not(#_lv2) { display: flex !important; flex-direction: column !important; align-items: center !important; gap: .25rem !important; margin-top: 2.25rem !important; }
.lv2 .lv2-btn:not(#_lv2):not(#_lv2) { min-height: 56px !important; min-width: 240px !important; padding-inline: 2.25rem !important; border-radius: 999px !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.01em !important; background: var(--accent-fill, #CEFF56) !important; color: var(--accent-on, #0A0A0C) !important; border: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; }
.lv2 .lv2-quiet:not(#_lv2):not(#_lv2) { min-height: 44px !important; min-width: 44px !important; padding: 0 .75rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 15px !important; font-weight: 500 !important; color: var(--lv2-ink-2) !important; background: none !important; border: 0 !important; text-decoration: none !important; }
.lv2 .lv2-quiet:hover:not(#_lv2):not(#_lv2) { color: var(--lv2-ink) !important; }
.lv2 .lv2-fine:not(#_lv2):not(#_lv2) { margin: .25rem auto 0 !important; font-size: 13px !important; color: var(--lv2-ink-2) !important; }
.lv2 .lv2-stage:not(#_lv2):not(#_lv2) { position: relative !important; width: 100% !important; margin: clamp(3rem, 7vw, 4.5rem) auto 0 !important; --pw: clamp(260px, 30vw, 316px) !important; }
.lv2 .lv2-phone:not(#_lv2):not(#_lv2) { position: relative !important; margin: 0 auto !important; width: var(--pw) !important; }
.lv2 .lv2-screen:not(#_lv2):not(#_lv2) { position: relative !important; border-radius: calc(var(--pw) * .1) !important; overflow: hidden !important; background: #000 !important; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), 0 30px 60px -36px rgba(0,0,0,.8) !important; }
html[data-theme="light"] .lv2 .lv2-screen:not(#_lv2):not(#_lv2) { background: #F2F2F7 !important; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.04), 0 30px 60px -34px rgba(20,20,30,.28) !important; }
/* r4/r5 (B6): the hero screen card at iPhone 16 Pro proportions (402 x 874 pt screen, 55 pt corners); --u = one screen point. */
.lv2 .lv2-phone:not(#_lv2):not(#_lv2) { --u: calc(var(--pw) / 402) !important; }
.lv2 .lv2-screen:not(#_lv2):not(#_lv2) { aspect-ratio: 402 / 874 !important; border-radius: calc(var(--u) * 55) !important; background: #101013 !important; }
html[data-theme="light"] .lv2 .lv2-screen:not(#_lv2):not(#_lv2) { background: #F2F2F7 !important; }
/* B1 v2.1 hero film (Hannah PASS 5302854): fills the screen card; one per theme. */
.lv2 .lv2-film:not(#_lv2):not(#_lv2) { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; background: #101013 !important; }
.lv2 .lv2-film-light:not(#_lv2):not(#_lv2) { display: none !important; }
html[data-theme="light"] .lv2 .lv2-film-dark:not(#_lv2):not(#_lv2) { display: none !important; }
html[data-theme="light"] .lv2 .lv2-film-light:not(#_lv2):not(#_lv2) { display: block !important; background: #F2F2F7 !important; }
/* LANDING_DEVICE_FRAME=true (html.lv2-bezel): Apple's stock iPhone 16 Pro bezel PNG, untouched, around the same screen
   (img/hero/LICENSE.md). Opening x72-1277 y69-2691 of 1350 x 2760: 5.33 % / 2.5 % insets. Off until the App Store listing is live. */
.lv2:is(html.lv2-bezel *) .lv2-phone:not(#_lv2):not(#_lv2) { width: calc(var(--pw) * 1350 / 1205) !important; aspect-ratio: 1350 / 2760 !important; }
.lv2:is(html.lv2-bezel *) .lv2-screen:not(#_lv2):not(#_lv2) { position: absolute !important; left: 5.33% !important; right: 5.41% !important; top: 2.5% !important; bottom: 2.47% !important; aspect-ratio: auto !important; box-shadow: none !important; }
.lv2:is(html.lv2-bezel *) .lv2-phone:not(#_lv2):not(#_lv2)::after { content: "" !important; position: absolute !important; inset: 0 !important; background: url(/static/img/hero/iphone-16-pro-black.webp) center / 100% 100% no-repeat !important; pointer-events: none !important; }
html[data-theme="light"] .lv2:is(html.lv2-bezel *) .lv2-phone:not(#_lv2):not(#_lv2)::after { background-image: url(/static/img/hero/iphone-16-pro-natural.webp) !important; }
@media (max-width: 480px) {
  .lv2 .lv2-hero:not(#_lv2):not(#_lv2) { padding-top: 3.25rem !important; }
  .lv2 .lv2-h1:not(#_lv2):not(#_lv2) { font-size: 48px !important; line-height: .97 !important; }
  .lv2 .lv2-sub:not(#_lv2):not(#_lv2) { margin-top: 1.1rem !important; font-size: 17px !important; padding-inline: .25rem !important; }
  .lv2 .lv2-cta:not(#_lv2):not(#_lv2) { margin-top: 1.75rem !important; }
  .lv2 .lv2-btn:not(#_lv2):not(#_lv2) { width: 100% !important; }
  .lv2 .lv2-stage:not(#_lv2):not(#_lv2) { --pw: 264px !important; margin-top: 2.75rem !important; }
}
@media (min-width: 1024px) {
  .lv2 .lv2-hero:not(#_lv2):not(#_lv2) { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important; align-items: center !important; gap: 4rem !important; text-align: left !important; padding: 3.5rem 0 5rem !important; }
  .lv2 .lv2-hero .lv2-h1:not(#_lv2):not(#_lv2) { margin: 0 !important; font-size: clamp(3.5rem, 5.2vw, 4.75rem) !important; max-width: 9em !important; }
  .lv2 .lv2-hero .lv2-sub:not(#_lv2):not(#_lv2) { margin-left: 0 !important; max-width: 23em !important; }
  .lv2 .lv2-hero .lv2-cta:not(#_lv2):not(#_lv2) { align-items: flex-start !important; }
  .lv2 .lv2-hero .lv2-quiet:not(#_lv2):not(#_lv2) { padding-inline: 0 !important; justify-content: flex-start !important; }
  .lv2 .lv2-hero .lv2-fine:not(#_lv2):not(#_lv2) { margin-left: 0 !important; }
  .lv2 .lv2-stage:not(#_lv2):not(#_lv2) { margin-top: 0 !important; --pw: 300px !important; }
}
.lv2 .lv2-legal:not(#_lv2):not(#_lv2) { max-width: 44rem !important; margin: 1.75rem auto 0 !important; text-align: center !important; font-size: 13px !important; line-height: 1.55 !important; color: var(--lv2-ink-2) !important; }
.lv2 .lv2-legal p:not(#_lv2):not(#_lv2) { margin: 0 !important; }
.lv2 .lv2-legal p + p:not(#_lv2):not(#_lv2) { margin-top: .5rem !important; }
.lv2 .lv2-legal-link:not(#_lv2):not(#_lv2) { color: inherit !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: var(--lv2-line) !important; display: inline-block !important; padding-block: 12px !important; margin-block: -12px !important; }
.lv2 .lv2-legal-link:hover:not(#_lv2):not(#_lv2) { color: var(--lv2-ink) !important; }
.lv2 .lv2-rail:not(#_lv2):not(#_lv2) { position: relative !important; display: grid !important; gap: clamp(4.5rem, 12vw, 8.5rem) !important; padding: 4rem 0 2rem !important; }
.lv2 .lv2-line:not(#_lv2):not(#_lv2) { position: absolute !important; top: calc(4rem + 12px) !important; bottom: 0 !important; left: 50% !important; width: 2px !important; margin-left: -1px !important; background: var(--lv2-line) !important; overflow: hidden !important; }
.lv2 .lv2-line i:not(#_lv2):not(#_lv2) { position: absolute !important; inset: 0 !important; background: var(--lv2-lime) !important; transform-origin: top !important; }
html[data-theme="light"] .lv2 .lv2-line i:not(#_lv2):not(#_lv2) { background: #0A0A0C !important; }
.lv2 .lv2-sec:not(#_lv2):not(#_lv2) { position: relative !important; display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: start !important; gap: clamp(2rem, 6vw, 5rem) !important; }
.lv2 .lv2-sec:nth-child(even of .lv2-sec) .lv2-copy:not(#_lv2):not(#_lv2) { order: 2 !important; }
.lv2 .lv2-copy:not(#_lv2):not(#_lv2) { max-width: 30rem !important; }
.lv2 .lv2-kick:not(#_lv2):not(#_lv2) { display: flex !important; align-items: center !important; gap: .6rem !important; margin: 0 0 1rem !important; font-size: 15px !important; font-weight: 700 !important; color: var(--lv2-ink) !important; }
.lv2 .lv2-num:not(#_lv2):not(#_lv2) { display: inline-grid !important; place-items: center !important; min-width: 34px !important; height: 24px !important; padding: 0 .5rem !important; border-radius: 999px !important; background: var(--lv2-num-bg) !important; color: var(--lv2-num-ink) !important; font-size: 12px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important; }
.lv2 .lv2-h2:not(#_lv2):not(#_lv2) { margin: 0 !important; font-size: clamp(2.1rem, 4.6vw, 3.6rem) !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: -.05em !important; text-wrap: balance !important; }
.lv2 .lv2-p:not(#_lv2):not(#_lv2) { margin: 1rem 0 0 !important; font-size: clamp(1rem, 1.35vw, 1.15rem) !important; line-height: 1.5 !important; color: var(--lv2-ink-2) !important; text-wrap: pretty !important; }
.lv2 .lv2-honest:not(#_lv2):not(#_lv2) { margin: .9rem 0 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--lv2-ink-2) !important; }
.lv2 .lv2-art:not(#_lv2):not(#_lv2) { --c-bg: #141416 !important; --c-ink: #F4F4F5 !important; --c-ink-2: #A1A1AA !important; --c-track: #2A2A2E !important; --c-sub: #1D1D20 !important;
  position: relative !important; width: 100% !important; max-width: 440px !important; justify-self: center !important; border-radius: 28px !important; background: var(--c-bg) !important; color: var(--c-ink) !important; padding: 26px 26px 28px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; overflow: hidden !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important; font-size: 15px !important; line-height: 1.45 !important; text-align: left !important; }
html[data-theme="light"] .lv2 .lv2-art:not(#_lv2):not(#_lv2) { --c-bg: #FFFFFF !important; --c-ink: #0A0A0C !important; --c-ink-2: #5F6068 !important; --c-track: #E7E7EA !important; --c-sub: #F4F4F6 !important; box-shadow: inset 0 0 0 1px rgba(10,10,12,.08) !important; }
.lv2 .lv2-art p:not(#_lv2):not(#_lv2) { margin: 0 !important; }
.lv2 .lv2-k:not(#_lv2):not(#_lv2) { font-size: 13px !important; font-weight: 600 !important; color: var(--c-ink-2) !important; }
.lv2 .lv2-row:not(#_lv2):not(#_lv2) { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; }
.lv2 .lv2-row b:not(#_lv2):not(#_lv2) { font-weight: 700 !important; min-width: 0 !important; }
.lv2 .lv2-dim:not(#_lv2):not(#_lv2) { font-size: 13px !important; color: var(--c-ink-2) !important; }
.lv2 .lv2-pill:not(#_lv2):not(#_lv2) { flex: none !important; display: inline-flex !important; align-items: center !important; height: 26px !important; padding: 0 10px !important; border-radius: 999px !important; background: var(--c-sub) !important; font-size: 13px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; }
.lv2 .lv2-pill.on:not(#_lv2):not(#_lv2) { background: #3A3A41 !important; color: #FFFFFF !important; }
.lv2 .lv2-track:not(#_lv2):not(#_lv2) { position: relative !important; height: 18px !important; margin: 4px 0 -6px !important; }
.lv2 .lv2-track:not(#_lv2):not(#_lv2)::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 7px !important; height: 4px !important; border-radius: 4px !important; background: var(--c-track) !important; }
.lv2 .lv2-track i:not(#_lv2):not(#_lv2) { position: absolute !important; left: 0 !important; top: 7px !important; width: 64% !important; height: 4px !important; border-radius: 4px !important; background: #CEFF56 !important; transform-origin: left !important; }
.lv2 .lv2-track b:not(#_lv2):not(#_lv2) { position: absolute !important; top: 3px !important; left: var(--x) !important; width: 12px !important; height: 12px !important; margin-left: -6px !important; border-radius: 50% !important; background: var(--c-ink-2) !important; }
.lv2 .lv2-track-real b:not(#_lv2):not(#_lv2) { width: 2px !important; height: 12px !important; top: 3px !important; margin-left: -1px !important; border-radius: 2px !important; }
.lv2 .lv2-track-real b.ok:not(#_lv2):not(#_lv2) { height: 16px !important; top: 1px !important; background: var(--c-ink) !important; }
.lv2 .lv2-track-real i:not(#_lv2):not(#_lv2) { width: 100% !important; background: var(--c-track) !important; }
.lv2 .lv2-track-real b.on:not(#_lv2):not(#_lv2) { border-radius: 50% !important; }
.lv2 .lv2-track b.on:not(#_lv2):not(#_lv2) { top: 0 !important; width: 18px !important; height: 18px !important; margin-left: -9px !important; background: #CEFF56 !important; box-shadow: 0 0 0 3px var(--c-bg) !important; }
.lv2 .lv2-note:not(#_lv2):not(#_lv2) { padding: 14px 16px !important; border-radius: 18px !important; background: var(--c-sub) !important; }
.lv2 .lv2-note-k:not(#_lv2):not(#_lv2) { display: block !important; margin-bottom: 4px !important; font-size: 13px !important; font-weight: 700 !important; }
.lv2 .lv2-big:not(#_lv2):not(#_lv2) { font-size: 17px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -.01em !important; }
.lv2 .lv2-drill:not(#_lv2):not(#_lv2) { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 14px !important; border-radius: 16px !important; background: var(--c-sub) !important; }
.lv2 .lv2-drill b:not(#_lv2):not(#_lv2) { font-weight: 700 !important; }
.lv2 .lv2-area:not(#_lv2):not(#_lv2) { display: grid !important; grid-template-columns: 6.5rem minmax(0, 1fr) 2.75rem !important; align-items: center !important; gap: 12px !important; font-size: 14px !important; }
.lv2 .lv2-area b:not(#_lv2):not(#_lv2) { text-align: right !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important; }
.lv2 .lv2-bar:not(#_lv2):not(#_lv2) { position: relative !important; display: block !important; height: 8px !important; border-radius: 8px !important; background: var(--c-track) !important; overflow: hidden !important; }
.lv2 .lv2-bar i:not(#_lv2):not(#_lv2) { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--v) !important; border-radius: 8px !important; background: var(--c-ink-2) !important; transform-origin: left !important; }
.lv2 .lv2-bar.on i:not(#_lv2):not(#_lv2) { background: #CEFF56 !important; }
.lv2 .lv2-art-chat .lv2-bub:not(#_lv2):not(#_lv2) { max-width: 86% !important; padding: 12px 16px !important; border-radius: 20px !important; background: var(--c-sub) !important; font-size: 15px !important; }
.lv2 .lv2-art-chat .lv2-bub.me:not(#_lv2):not(#_lv2) { align-self: flex-end !important; max-width: 78% !important; background: #2E2E35 !important; color: #FFFFFF !important; border-bottom-right-radius: 6px !important; }
.lv2 .lv2-art-chat .lv2-bub:not(.me):not(#_lv2):not(#_lv2) { border-bottom-left-radius: 6px !important; }
.lv2 .lv2-tech:not(#_lv2):not(#_lv2) { display: grid !important; gap: 7px !important; font-size: 14px !important; }
.lv2 .lv2-tech .lv2-row span:not(#_lv2):not(#_lv2) { font-weight: 700 !important; font-variant-numeric: tabular-nums !important; }
.lv2 .lv2-pricing:not(#_lv2):not(#_lv2) { padding-top: clamp(5rem, 12vw, 8rem) !important; }
.lv2 .lv2-head:not(#_lv2):not(#_lv2) { text-align: center !important; max-width: 36rem !important; margin: 0 auto 2.5rem !important; }
.lv2 .lv2-plans:not(#_lv2):not(#_lv2) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; align-items: stretch !important; }
.lv2 .lv2-plan:not(#_lv2):not(#_lv2) { display: flex !important; flex-direction: column !important; min-width: 0 !important; padding: 1.5rem !important; border-radius: 26px !important; background: #0F0F11 !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important; }
html[data-theme="light"] .lv2 .lv2-plan:not(#_lv2):not(#_lv2), html[data-theme="light"] .lv2 .lv2-art:not(#_lv2):not(#_lv2) { box-shadow: none !important; }
html[data-theme="light"] .lv2 .lv2-plan:not(#_lv2):not(#_lv2) { background: #F5F5F7 !important; }
.lv2 .lv2-plan.is-hi:not(#_lv2):not(#_lv2) { box-shadow: inset 0 0 0 2px #CEFF56 !important; }
html[data-theme="light"] .lv2 .lv2-plan.is-hi:not(#_lv2):not(#_lv2) { background: #FFFFFF !important; box-shadow: inset 0 0 0 2px #0A0A0C, 0 18px 40px -24px rgba(10,10,12,.35) !important; }
.lv2 .lv2-plan-name:not(#_lv2):not(#_lv2) { margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; }
.lv2 .lv2-plan-tag:not(#_lv2):not(#_lv2) { margin: .35rem 0 0 !important; font-size: 14px !important; line-height: 1.45 !important; color: var(--lv2-ink-2) !important; overflow-wrap: anywhere !important; }
.lv2 .lv2-plan-price:not(#_lv2):not(#_lv2) { margin: 1rem 0 0 !important; display: flex !important; align-items: baseline !important; gap: .15rem !important; flex-wrap: wrap !important; }
.lv2 .lv2-was:not(#_lv2):not(#_lv2) { margin-right: .4rem !important; font-size: 15px !important; color: var(--lv2-ink-2) !important; }
.lv2 .lv2-fig:not(#_lv2):not(#_lv2) { font-size: clamp(2rem, 3.4vw, 2.6rem) !important; font-weight: 900 !important; letter-spacing: -.04em !important; font-variant-numeric: tabular-nums !important; }
.lv2 .lv2-per:not(#_lv2):not(#_lv2), .lv2 .lv2-plan-year:not(#_lv2):not(#_lv2) { font-size: 14px !important; color: var(--lv2-ink-2) !important; }
.lv2 .lv2-plan-year:not(#_lv2):not(#_lv2) { margin: .2rem 0 0 !important; }
.lv2 .lv2-plan-intro:not(#_lv2):not(#_lv2) { margin: .6rem 0 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--lv2-ink) !important; }
.lv2 .lv2-feats:not(#_lv2):not(#_lv2), .lv2 .lv2-excl:not(#_lv2):not(#_lv2) { list-style: none !important; margin: 1.25rem 0 0 !important; padding: 1.25rem 0 0 !important; border-top: 1px solid var(--lv2-line) !important; display: grid !important; gap: .7rem !important; }
.lv2 .lv2-feats li:not(#_lv2):not(#_lv2) { display: grid !important; grid-template-columns: 1.1rem minmax(0, 1fr) !important; gap: .6rem !important; font-size: 14px !important; line-height: 1.45 !important; }
.lv2 .lv2-feats i:not(#_lv2):not(#_lv2) { margin-top: .2rem !important; font-size: 12px !important; color: var(--txt-1) !important; }
.lv2 .lv2-excl:not(#_lv2):not(#_lv2) { border-top: 0 !important; padding-top: 0 !important; margin-top: 1rem !important; }
.lv2 .lv2-excl li:not(#_lv2):not(#_lv2) { font-size: 13px !important; color: var(--lv2-ink-2) !important; }
.lv2 .lv2-excl li:not(#_lv2):not(#_lv2)::before { content: "– " !important; }
.lv2 .lv2-plan-btn:not(#_lv2):not(#_lv2) { margin-top: auto !important; min-height: 48px !important; border-radius: 999px !important; font-weight: 700 !important; }
.lv2 .lv2-plan .lv2-excl + .lv2-plan-btn:not(#_lv2):not(#_lv2), .lv2 .lv2-plan .lv2-feats + .lv2-plan-btn:not(#_lv2):not(#_lv2) { margin-top: 1.5rem !important; }
.lv2 .lv2-unavailable:not(#_lv2):not(#_lv2) { text-align: center !important; color: var(--lv2-ink-2) !important; }
.lv2 .lv2-unavailable button:not(#_lv2):not(#_lv2) { min-height: 44px !important; }
.lv2 .lv2-acad:not(#_lv2):not(#_lv2) { display: grid !important; grid-template-columns: 1.05fr 1fr !important; gap: clamp(2rem, 6vw, 4.5rem) !important; align-items: center !important; padding-top: clamp(5rem, 12vw, 8rem) !important; }
.lv2 .lv2-cta-l:not(#_lv2):not(#_lv2) { justify-content: flex-start !important; }
.lv2 .lv2-acad .lv2-btn:not(#_lv2):not(#_lv2) { min-width: 0 !important; }
.lv2 .lv2-acad-copy:not(#_lv2):not(#_lv2) { min-width: 0 !important; }
.lv2 .lv2-rows:not(#_lv2):not(#_lv2) { margin: 0 !important; display: grid !important; }
.lv2 .lv2-rows > div:not(#_lv2):not(#_lv2) { padding: 1.05rem 0 !important; border-top: 1px solid var(--lv2-line) !important; }
.lv2 .lv2-rows > div:first-child:not(#_lv2):not(#_lv2) { border-top: 0 !important; }
.lv2 .lv2-rows dt:not(#_lv2):not(#_lv2) { font-size: 17px !important; font-weight: 700 !important; }
.lv2 .lv2-rows dd:not(#_lv2):not(#_lv2) { margin: .3rem 0 0 !important; font-size: 15px !important; line-height: 1.45 !important; color: var(--lv2-ink-2) !important; }
/* closing card: the kit card surface, themed (v3 landing, FTL 5002701); see landing-v2.css */
.lv2 .lv2-close:not(#_lv2):not(#_lv2) { margin-top: clamp(5rem, 12vw, 8rem) !important; padding: clamp(3.5rem, 8vw, 6rem) 1.5rem !important; border-radius: 28px !important; background: #1C1C1E !important; color: var(--lv2-ink) !important; text-align: center !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important; }
.lv2 .lv2-close .lv2-p:not(#_lv2):not(#_lv2) { color: var(--lv2-ink-2) !important; }
.lv2 .lv2-close .lv2-btn:not(#_lv2):not(#_lv2) { margin-top: 2rem !important; }
/* UI Polish 5052320: the inline cookie card after the close card keeps the landing section gap (never fused to it). */
.lv2 .lv2-close-mark:not(#_lv2):not(#_lv2) { width: 64px !important; height: 64px !important; margin: 0 auto 1.5rem !important; display: block !important; fill: #CEFF56 !important; }
.lv2 :is(a, button):focus-visible:not(#_lv2):not(#_lv2) { outline: 2px solid var(--lv2-ink) !important; outline-offset: 4px !important; }
.lv2 .lv2-close :is(a, button):focus-visible:not(#_lv2):not(#_lv2) { outline-color: var(--lv2-ink) !important; }
/* v3 landing: the close card is a real card (FTL 5002701 / 5002768). It was pure black in BOTH themes, so the theme never
   reached it. Now the kit card surface (--k-bg-2), radius 28 (--k-r-hero), with the same edge as the art cards. */
.lv2 .lv2-close:not(#_lv2):not(#_lv2) { background: var(--k-bg-2, #1C1C1E) !important; color: #F4F4F5 !important; border-radius: var(--k-r-hero, 28px) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important; }
html[data-theme="light"] .lv2 .lv2-close:not(#_lv2):not(#_lv2) { background: #FFFFFF !important; color: #0A0A0C !important; box-shadow: inset 0 0 0 1px rgba(10,10,12,.08) !important; }
html[data-theme="light"] .lv2 .lv2-close .lv2-p:not(#_lv2):not(#_lv2) { color: #5F6068 !important; }
html[data-theme="light"] .lv2 .lv2-close :is(a, button):focus-visible:not(#_lv2):not(#_lv2) { outline-color: #0A0A0C !important; }
html[data-theme="light"] .lv2 .lv2-close-mark:not(#_lv2):not(#_lv2) { fill: #0A0A0C !important; }
/* scroll-driven reveal (no JS), IO fallback, and still mode.
   v3 (FTL 5002701 / 5003040, UI Polish 5003013): sections now reveal, and the step rail fills. Why nothing moved before:
   extract-landing-v2.mjs makes EVERY declaration !important, and an !important `transform: scaleY(0)` on the rail fill
   outranks the animation in the cascade, so lv2-draw never showed; and .lv2-io had no reveal rule. So the resting scale
   lives only in the keyframes (fill-mode both) and in the fallback/still branches, never on the base rule. The section
   reveal replaces TL 4833516's "no hidden cards" rule, per FTL 5002701. transform/opacity only (§6.5). */
@supports (animation-timeline: view()) {
  /* The fill follows the reader down the rail: the page scroll, from when the rail's top reaches mid-screen to when its
     bottom does. landingV2() measures the rail once (and on resize) into --rail-r0/--rail-r1 (px of scroll). */
  .lv2 .lv2-line i:not(#_lv2):not(#_lv2) { animation: lv2-draw linear both !important; animation-timeline: scroll(root block) !important; animation-range: var(--rail-r0, 0px) var(--rail-r1, 100%) !important; }
  /* R12: the spine is invisible until section 01 is on screen, so no stub peeks above the fold under the hero */
  .lv2 .lv2-line:not(#_lv2):not(#_lv2) { animation: lv2-fade linear both !important; animation-timeline: view() !important; animation-range: entry 0% entry 320px !important; }
  .lv2 .lv2-io:not(#_lv2):not(#_lv2) { animation: lv2-rise linear both !important; animation-timeline: view() !important; animation-range: entry 0% entry 55% !important; }
}
.lv2.lv2-fallback .lv2-line i:not(#_lv2):not(#_lv2) { transform: scaleY(0) !important; transition: transform 1.2s cubic-bezier(.16,1,.3,1) !important; }
.lv2.lv2-fallback .lv2-line.is-in i:not(#_lv2):not(#_lv2) { transform: scaleY(1) !important; }
.lv2.lv2-fallback .lv2-line:not(#_lv2):not(#_lv2) { opacity: 0 !important; transition: opacity .6s ease !important; }
.lv2.lv2-fallback .lv2-line.is-in:not(#_lv2):not(#_lv2) { opacity: 1 !important; }
.lv2.lv2-fallback .lv2-io:not(#_lv2):not(#_lv2) { opacity: 0 !important; transform: translateY(20px) !important; transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1) !important; }
.lv2.lv2-fallback .lv2-io.is-in:not(#_lv2):not(#_lv2) { opacity: 1 !important; transform: none !important; }
@keyframes lv2-fade { 0%, 40% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lv2-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lv2-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.lv2.lv2-still .lv2-line i:not(#_lv2):not(#_lv2) { transform: scaleY(1) !important; }
@media (prefers-reduced-motion: reduce) {
  .lv2 *:not(#_lv2):not(#_lv2):not(#_lv2i):not(#_lv2i), .lv2 *:not(#_lv2):not(#_lv2):not(#_lv2i):not(#_lv2i)::before { animation: none !important; transition: none !important; }
  .lv2 .lv2-io:not(#_lv2):not(#_lv2):not(#_lv2i):not(#_lv2i) { opacity: 1 !important; transform: none !important; }
  .lv2 .lv2-line i:not(#_lv2):not(#_lv2) { transform: scaleY(1) !important; }
}
@media (max-width: 859px) {
  .lv2 .lv2-line:not(#_lv2):not(#_lv2) { left: 0 !important; }
  .lv2 .lv2-sec:not(#_lv2):not(#_lv2) { grid-template-columns: minmax(0, 1fr) !important; gap: 1.75rem !important; padding-left: 1.25rem !important; }
  .lv2 .lv2-sec .lv2-copy:not(#_lv2):not(#_lv2):not(#_lv2i):not(#_lv2i) { order: 0 !important; }
  .lv2 .lv2-art:not(#_lv2):not(#_lv2) { justify-self: start !important; max-width: 520px !important; }
  .lv2 .lv2-plans:not(#_lv2):not(#_lv2) { grid-template-columns: minmax(0, 1fr) !important; max-width: 520px !important; margin-inline: auto !important; }
  .lv2 .lv2-acad:not(#_lv2):not(#_lv2) { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (min-width: 600px) and (max-width: 859px) {
  .lv2 .lv2-plans:not(#_lv2):not(#_lv2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: none !important; }
  .lv2 .lv2-plans > .lv2-plan:last-child:nth-child(odd):not(#_lv2):not(#_lv2) { grid-column: 1 / -1 !important; }
}
@media (max-width: 480px) {
  .lv2 .lv2-nav:not(#_lv2):not(#_lv2) { gap: .5rem !important; }
  .lv2 .lv2-btn:not(#_lv2):not(#_lv2) { width: 100% !important; }
  .lv2 .lv2-cta:not(#_lv2):not(#_lv2) { flex-direction: column !important; gap: .5rem !important; }
  .lv2 .lv2-cta-l:not(#_lv2):not(#_lv2) { align-items: stretch !important; }
}
.lv2 .lv2-kick:not(#_lv2):not(#_lv2) { gap: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--lv2-ink-2) !important; }
.lv2 .lv2-num:not(#_lv2):not(#_lv2) { display: inline !important; min-width: 0 !important; height: auto !important; padding: 0 !important; border-radius: 0 !important; background: none !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
.lv2 .lv2-line:not(#_lv2):not(#_lv2) { display: none !important; }
.lv2 .lv2-feats i:not(#_lv2):not(#_lv2) { color: var(--lv2-ink-2) !important; }
.lv2 .lv2-drill:not(#_lv2):not(#_lv2) { display: block !important; }
.lv2 .lv2-drill .lv2-k:not(#_lv2):not(#_lv2) { display: block !important; margin-bottom: 4px !important; font-size: 13px !important; font-weight: 600 !important; }
.lv2 .lv2-art-chat .lv2-bub.me:not(#_lv2):not(#_lv2) { background: var(--c-sub) !important; color: var(--c-ink) !important; }
.lv2 .lv2-bar.on i:not(#_lv2):not(#_lv2) { background: var(--c-ink-2) !important; }
.lv2 .lv2-track-real i:not(#_lv2):not(#_lv2) { background: var(--c-track) !important; }
.lv2 .lv2-track-real b.on:not(#_lv2):not(#_lv2) { background: var(--c-ink) !important; box-shadow: 0 0 0 3px var(--c-bg) !important; }
/* END LANDING v2 */
html.pg-html-lv2-8b2a header.tb-float:not(#_lv2):not(#_lv2)::before { content: "" !important; position: absolute !important; bottom: 100% !important; left: 50% !important; right: auto !important; width: 100vw !important; height: 12px !important; margin-left: -50vw !important; background: #101013 !important; pointer-events: none !important; }
html[data-theme="light"].pg-html-lv2-8b2a header.tb-float:not(#_lv2):not(#_lv2)::before { background: #F2F2F7 !important; }
/* Landing page ground, dark: the kit page #101013 under html/body too (FTL 5010412); outside the .lv2-scoped block because it styles html. */
html:not([data-theme="light"]).pg-html-lv2-8b2a:not(#_lv2):not(#_lv2), html:not([data-theme="light"]).pg-html-lv2-8b2a body:not(#_lv2):not(#_lv2) { background: #101013 !important; }
/* v3 landing: ONE header (FTL 5002701 / 5003040; UI Polish 5003013; B. Tech Lead 5002782). The app's sticky header.glass is
   the only header on `/` signed out (the .lv2-nav bar is deleted): a floating capsule, sticky 12 px, centred on the page
   column (max 72rem), full width minus 16 px at 430 and under. Brand left; Pricing, Log in, Join free (lime, black text)
   right. SOLID, not glass (Uozot 5004419 via FTL 5004488: no web glass except the belt control): opaque --k-bar / white,
   0.5 px hairline, the soft float shadow, no backdrop-filter. */
html.pg-html-lv2-8b2a header.tb-float:not(#_lv2):not(#_lv2) { position: sticky !important; top: 12px !important; z-index: 40 !important; width: min(72rem, calc(100% - 32px)) !important; margin: 12px auto 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--k-bar, #1C1C1E) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.18) !important; }
html[data-theme="light"].pg-html-lv2-8b2a header.tb-float:not(#_lv2):not(#_lv2) { background: #FFFFFF !important; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08) !important; }
html.pg-html-lv2-8b2a header.tb-float .tb-row:not(#_lv2):not(#_lv2) { max-width: none !important; height: 56px !important; margin: 0 !important; padding: 0 8px 0 16px !important; gap: 8px !important; }
html.pg-html-lv2-8b2a header.tb-float .tb-tools:not(#_lv2):not(#_lv2) { gap: 4px !important; }
/* logo + wordmark on the landing (the app bar is logo-only elsewhere) */
html.pg-html-lv2-8b2a header.tb-float .tb-brand span.tb-kicker:not(#_lv2):not(#_lv2) { display: inline !important; font-size: 20px !important; line-height: 1 !important; letter-spacing: -.02em !important; }
html.pg-html-lv2-8b2a header.tb-float .tb-brand:not(#_lv2):not(#_lv2) { gap: 8px !important; min-height: 44px !important; flex: 0 0 auto !important; width: auto !important; margin-right: auto !important; }
html.pg-html-lv2-8b2a header.tb-float .tb-link:not(#_lv2):not(#_lv2) { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding: 0 12px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--lv2-ink-2, #A1A1AA) !important; text-decoration: none !important; }
html[data-theme="light"].pg-html-lv2-8b2a header.tb-float .tb-link:not(#_lv2):not(#_lv2) { color: #5F6068 !important; }
html.pg-html-lv2-8b2a header.tb-float .btn-ghost.tb-cta:not(#_lv2):not(#_lv2) { padding: 0 12px !important; }
html.pg-html-lv2-8b2a header.tb-float .btn-primary.tb-cta:not(#_lv2):not(#_lv2) { padding: 0 18px !important; }
@media (max-width: 430px) {
  html.pg-html-lv2-8b2a header.tb-float .tb-row:not(#_lv2):not(#_lv2) { padding: 0 6px 0 12px !important; gap: 4px !important; }
  html.pg-html-lv2-8b2a header.tb-float .tb-link:not(#_lv2):not(#_lv2) { padding: 0 7px !important; font-size: 14px !important; }
  html.pg-html-lv2-8b2a header.tb-float .btn-ghost.tb-cta:not(#_lv2):not(#_lv2) { padding: 0 7px !important; }
  html.pg-html-lv2-8b2a header.tb-float .btn-primary.tb-cta:not(#_lv2):not(#_lv2) { padding: 0 13px !important; }
  html.pg-html-lv2-8b2a header.tb-float .tb-kicker:not(#_lv2):not(#_lv2) { font-size: 17px !important; }
}
html.pg-html-lv2-8b2a header.tb-float .tb-cta:not(#_lv2):not(#_lv2) { white-space: nowrap !important; flex: 0 0 auto !important; }
@media (width < 360px) {
  html.pg-html-lv2-8b2a header.tb-float .tb-link:not(#_lv2):not(#_lv2) { display: none !important; }
  /* the app bar's <360 icon-only rule (44 px square CTA) does not apply to the landing's text actions */
  html.pg-html-lv2-8b2a header.tb-float .tb-cta:not(#_lv2):not(#_lv2) { width: auto !important; min-width: 44px !important; }
  html.pg-html-lv2-8b2a header.tb-float .btn-ghost.tb-cta:not(#_lv2):not(#_lv2) { padding: 0 8px !important; }
  html.pg-html-lv2-8b2a header.tb-float .btn-primary.tb-cta:not(#_lv2):not(#_lv2) { padding: 0 14px !important; }
}
/* LANDING v3 (11 Oct; owner: simple, high-end, real app screens, CSS motion only, light on weak phones, both themes).
   Scoped .lv2.lv3 / .lv2 .l3-*, so scripts/extract-landing-v2.mjs carries every rule into landing-v2.css.
   Theme A: ground #101013 / #F2F2F7, cards #1C1C1E / #FFF, lime only on the one primary button per view and the
   recommended plan's edge; never lime text on light; secondary buttons neutral grey. Motion: transform/opacity only. */
.lv2.lv3:not(#_lv2):not(#_lv2) { --l3-ink: #FFFFFF !important; --l3-ink-2: #B4B7BE !important; --l3-ink-3: #8A8F98 !important; --l3-dim: #3A3B40 !important; --l3-card: #1C1C1E !important; --l3-card-2: #2C2C2E !important;
  --l3-line: rgba(255,255,255,.09) !important; --l3-edge: rgba(255,255,255,.14) !important; --l3-shadow: 0 40px 90px -30px rgba(0,0,0,.75), 0 12px 30px -12px rgba(0,0,0,.5) !important;
  --l3-lime: #CEFF56 !important; --l3-on-lime: #0A0A0C !important;
  --l3-main-fill:#2E2E35 !important; --l3-main-fill-hover:#36363E !important; --l3-main-edge:transparent !important; --l3-main-label:#FFFFFF !important; --l3-max: 72rem !important; --l3-ground: #101013 !important;
  padding: 0 max(1rem, env(safe-area-inset-left)) 0 max(1rem, env(safe-area-inset-right)) !important; color: var(--l3-ink) !important; }
html[data-theme="light"] .lv2.lv3:not(#_lv2):not(#_lv2) { --l3-main-fill:#CEFF56 !important; --l3-main-fill-hover:#CEFF56 !important; --l3-main-edge:#A8D63A !important; --l3-main-label:#101013 !important; --l3-ink: #0A0A0C !important; --l3-ink-2: #3F4047 !important; --l3-ink-3: #63656E !important; --l3-dim: #C7C8CE !important; --l3-card: #FFFFFF !important; --l3-card-2: #E9E9EE !important;
  --l3-line: rgba(0,0,0,.08) !important; --l3-edge: rgba(0,0,0,.10) !important; --l3-shadow: 0 40px 80px -36px rgba(16,16,19,.30), 0 10px 26px -14px rgba(16,16,19,.18) !important; --l3-ground: #F2F2F7 !important; }
.lv2.lv3 .l3-l:not(#_lv2):not(#_lv2) { display: none !important; }
html[data-theme="light"] .lv2.lv3 .l3-d:not(#_lv2):not(#_lv2) { display: none !important; }
html[data-theme="light"] .lv2.lv3 .l3-l:not(#_lv2):not(#_lv2) { display: block !important; }
.lv2.lv3 .l3-eyebrow:not(#_lv2):not(#_lv2), .lv2.lv3 .l3-kick:not(#_lv2):not(#_lv2) { margin: 0 0 1rem !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--l3-ink-3) !important; }
.lv2.lv3 .l3-kick:not(#_lv2):not(#_lv2) { display: flex !important; align-items: baseline !important; gap: .75rem !important; }
.lv2.lv3 .l3-kick span:not(#_lv2):not(#_lv2) { font-variant-numeric: tabular-nums !important; color: var(--l3-ink-2) !important; }
.lv2.lv3 .l3-h2:not(#_lv2):not(#_lv2) { margin: 0 !important; font-size: clamp(2.125rem, 4.6vw, 4rem) !important; line-height: 1.02 !important; font-weight: 800 !important; letter-spacing: -.04em !important; text-wrap: balance !important; color: var(--l3-ink) !important; }
.lv2.lv3 .l3-p:not(#_lv2):not(#_lv2) { margin: 1.125rem 0 0 !important; max-width: 34ch !important; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem) !important; line-height: 1.5 !important; color: var(--l3-ink-2) !important; text-wrap: pretty !important; }
.lv2.lv3 .l3-btn:not(#_lv2):not(#_lv2) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 56px !important; padding: 0 30px !important; border-radius: 999px !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.01em !important; background: var(--l3-main-fill) !important; color: var(--l3-main-label) !important; box-shadow: inset 0 0 0 1.5px var(--l3-main-edge) !important; transition: transform .2s ease, background-color .2s ease !important; }
.lv2.lv3 .l3-btn:hover:not(#_lv2):not(#_lv2) { background: var(--l3-main-fill-hover) !important; }
html[data-theme="light"] .lv2.lv3 .l3-btn:not(#_lv2):not(#_lv2) { box-shadow: inset 0 0 0 1.5px var(--l3-main-edge) !important; }
.lv2.lv3 .l3-btn:active:not(#_lv2):not(#_lv2) { transform: scale(.97) !important; }
.lv2.lv3 .l3-btn-2:not(#_lv2):not(#_lv2) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; padding: 0 24px !important; border-radius: 999px !important; font-size: 16px !important; font-weight: 600 !important; background: var(--l3-card-2) !important; color: var(--l3-ink) !important; box-shadow: none !important; text-decoration: none !important; }
.lv2.lv3 .l3-more:not(#_lv2):not(#_lv2) { display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding: 0 4px !important; font-size: 16px !important; font-weight: 600 !important; color: var(--l3-ink) !important; text-decoration: underline !important; text-decoration-color: var(--l3-dim) !important; text-underline-offset: 5px !important; }
.lv2.lv3 .l3-cta:not(#_lv2):not(#_lv2) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px 22px !important; margin-top: 2rem !important; }
/* chapter screens: a capture of the real app at 390x844, clipped to a phone screen's radius (the hero is the live phone) */
.lv2.lv3 .l3-scr:not(#_lv2):not(#_lv2) { position: relative !important; width: var(--sw, 300px) !important; max-width: 100% !important; aspect-ratio: 390 / 844 !important; border-radius: 13.5% / 6.24% !important; overflow: hidden !important; background: var(--l3-card) !important; box-shadow: 0 0 0 1px var(--l3-edge), var(--l3-shadow) !important; transform: translateZ(0) !important; }
.lv2.lv3 .l3-scr img:not(#_lv2):not(#_lv2) { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top !important; }
/* HERO */
.lv2.lv3 .l3-hero:not(#_lv2):not(#_lv2) { max-width: var(--l3-max) !important; margin: 0 auto !important; padding: clamp(2.5rem, 7vw, 4.5rem) 0 0 !important; display: grid !important; gap: 3rem !important; }
.lv2.lv3 .l3-h1:not(#_lv2):not(#_lv2) { margin: 0 !important; max-width: 8.5em !important; font-size: clamp(4rem, 13.5vw, 8.5rem) !important; line-height: .9 !important; font-weight: 800 !important; letter-spacing: -.055em !important; text-wrap: balance !important; text-align: left !important; color: var(--l3-ink) !important; }
.lv2.lv3 .l3-sub:not(#_lv2):not(#_lv2) { margin: 1.5rem 0 0 !important; max-width: 26ch !important; font-size: clamp(1.1875rem, 1.9vw, 1.5rem) !important; line-height: 1.4 !important; color: var(--l3-ink-2) !important; text-wrap: pretty !important; }
.lv2.lv3 .l3-fine:not(#_lv2):not(#_lv2) { margin: 1rem 0 0 !important; min-height: 1.5em !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--l3-ink-3) !important; }
.lv2.lv3 .lv2-stage:not(#_lv2):not(#_lv2) { margin: 0 !important; --pw: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1.25rem !important; }
.lv2.lv3 .l3-phone:not(#_lv2):not(#_lv2) { position: relative !important; width: var(--fw) !important; aspect-ratio: 1293 / 2656 !important; --fw: min(68vw, 290px) !important; isolation: isolate !important; }
.lv2.lv3 .l3-phone-scr:not(#_lv2):not(#_lv2) { position: absolute !important; left: 4.486% !important; top: 1.883% !important; width: 91.18% !important; height: 96.23% !important; overflow: hidden !important;
  border-radius: calc(var(--fw) * .9118 * .14) !important; background: var(--l3-ground) !important; }
.lv2.lv3 .l3-phone-sb:not(#_lv2):not(#_lv2) { position: absolute !important; left: 0 !important; top: 0 !important; width: 393px !important; height: 54px !important; transform-origin: 0 0 !important; transform: scale(var(--k, .6744)) !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 6px 30px 0 46px !important; box-sizing: border-box !important;
  color: var(--l3-ink) !important; font: 600 17px/1 Inter, -apple-system, system-ui, sans-serif !important; letter-spacing: -.01em !important; }
.lv2.lv3 .l3-phone-sb span:not(#_lv2):not(#_lv2) { display: flex !important; gap: 6px !important; align-items: center !important; }
.lv2.lv3 .l3-phone-sb svg:not(#_lv2):not(#_lv2) { fill: currentColor !important; }
.lv2.lv3 .l3-phone-if:not(#_lv2):not(#_lv2) { position: absolute !important; left: 0 !important; top: calc(54px * var(--k, .6744)) !important; width: 393px !important; height: 798px !important; border: 0 !important; transform-origin: 0 0 !important;
  transform: scale(var(--k, .6744)) !important; opacity: 0 !important; transition: opacity .6s ease !important; background: var(--l3-ground) !important; color-scheme: normal !important; }
.lv2.lv3 .l3-phone.is-on .l3-phone-if:not(#_lv2):not(#_lv2) { opacity: 1 !important; }
.lv2.lv3 .l3-phone-poster:not(#_lv2):not(#_lv2) { position: absolute !important; left: 0 !important; top: calc(54px * var(--k, .6744)) !important; width: calc(393px * var(--k, .6744)) !important; height: calc(798px * var(--k, .6744)) !important; object-fit: cover !important; object-position: top !important; pointer-events: none !important; user-select: none !important; }
.lv2.lv3 .l3-phone.is-on .l3-phone-poster:not(#_lv2):not(#_lv2) { visibility: hidden !important; transition: visibility 0s linear .6s !important; }
@media (hover: none), (pointer: coarse) { .lv2.lv3 .l3-phone-if:not(#_lv2):not(#_lv2) { pointer-events: none !important; } }
.lv2.lv3 .l3-phone-frame:not(#_lv2):not(#_lv2) { position: absolute !important; inset: 0 !important; z-index: 2 !important; width: 100% !important; height: 100% !important; pointer-events: none !important; user-select: none !important; }
.lv2.lv3 .l3-phone-cap:not(#_lv2):not(#_lv2) { margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; color: var(--l3-ink-3) !important; text-align: center !important; }
@media (prefers-reduced-motion: reduce) { .lv2.lv3 .l3-phone-if:not(#_lv2):not(#_lv2) { transition: none !important; } }
/* STATEMENT: words light up with scroll (landingV3 toggles .is-lit) */
.lv2.lv3 .l3-state:not(#_lv2):not(#_lv2) { max-width: var(--l3-max) !important; margin: clamp(6rem, 14vw, 11rem) auto 0 !important; }
.lv2.lv3 .l3-state-p:not(#_lv2):not(#_lv2) { margin: 0 !important; max-width: 22em !important; font-size: clamp(1.875rem, 4.4vw, 3.5rem) !important; line-height: 1.12 !important; font-weight: 700 !important; letter-spacing: -.035em !important; text-wrap: balance !important; }
.lv2.lv3 .l3-w:not(#_lv2):not(#_lv2) { color: var(--l3-ink) !important; }
.lv2.lv3.l3-live .l3-w:not(#_lv2):not(#_lv2) { color: var(--l3-dim) !important; transition: color .35s ease !important; }
.lv2.lv3.l3-live .l3-w.is-lit:not(#_lv2):not(#_lv2) { color: var(--l3-ink) !important; }
.lv2.lv3 .l3-chapters:not(#_lv2):not(#_lv2) { max-width: var(--l3-max) !important; margin: clamp(6rem, 12vw, 9rem) auto 0 !important; }
/* chapters (11 Oct): ONE live phone (the sealed sample) pinned while the chapters pass; each chapter moves it to its
   own real screen (land/hero-phone.js l3ChapterPhone). Phones: the phone pins near the top and each chapter's copy
   rises over its lower edge as a card; desktop: copy left, phone right. */
.lv2.lv3 .l3-chapters:not(#_lv2):not(#_lv2) { display: grid !important; }
.lv2.lv3 .l3-ch-list:not(#_lv2):not(#_lv2), .lv2.lv3 .l3-ch-stage:not(#_lv2):not(#_lv2) { grid-area: 1 / 1 !important; min-width: 0 !important; }
.lv2.lv3 .l3-ch-stage:not(#_lv2):not(#_lv2) { position: sticky !important; top: 84px !important; align-self: start !important; z-index: 0 !important; display: flex !important; justify-content: center !important; }
.lv2.lv3 .l3-ch-stage .l3-phone:not(#_lv2):not(#_lv2) { --fw: min(56vw, 30svh, 290px) !important; }
.lv2.lv3 .l3-ch-list:not(#_lv2):not(#_lv2) { position: relative !important; z-index: 1 !important; }
.lv2.lv3 .l3-ch:not(#_lv2):not(#_lv2) { min-height: 96svh !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; padding: 0 0 5svh !important; scroll-margin-top: 96px !important; }
.lv2.lv3 .l3-ch-copy:not(#_lv2):not(#_lv2) { padding: 22px 22px 24px !important; border-radius: 24px !important; background: var(--l3-card) !important; box-shadow: 0 0 0 1px var(--l3-edge), var(--l3-shadow) !important; }
.lv2.lv3 .l3-ch-copy .l3-h2:not(#_lv2):not(#_lv2) { font-size: clamp(1.75rem, 7vw, 2.5rem) !important; }
.lv2.lv3 .l3-phone.is-moving .l3-phone-if:not(#_lv2):not(#_lv2) { opacity: .3 !important; transition: opacity .16s ease !important; }
.lv2.lv3 .l3-honest:not(#_lv2):not(#_lv2) { max-width: var(--l3-max) !important; margin: clamp(3rem, 8vw, 7rem) auto 0 !important; padding: clamp(1.75rem, 4vw, 3.5rem) !important; border-radius: 32px !important; background: var(--l3-card) !important; display: grid !important; gap: 2rem !important; align-items: center !important; }
.lv2.lv3 .l3-bars:not(#_lv2):not(#_lv2) { margin: 0 !important; width: 100% !important; max-width: 460px !important; justify-self: center !important; padding: 22px 20px !important; border-radius: 24px !important; background: var(--l3-ground) !important; box-shadow: 0 0 0 1px var(--l3-line) !important; }
.lv2.lv3 .l3-bars[hidden]:not(#_lv2):not(#_lv2) { display: none !important; }
.lv2.lv3 .l3-bars .l3-bars-in:not(#_lv2):not(#_lv2) { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.lv2.lv3 .l3-bars .rp5-bars:not(#_lv2):not(#_lv2) { margin: 0 !important; padding: 0 !important; }
.lv2.lv3 .l3-how:not(#_lv2):not(#_lv2) { max-width: var(--l3-max) !important; margin: clamp(6rem, 12vw, 9rem) auto 0 !important; }
.lv2.lv3 .l3-steps:not(#_lv2):not(#_lv2) { list-style: none !important; margin: 2.5rem 0 0 !important; padding: 0 !important; display: grid !important; gap: 2rem !important; }
.lv2.lv3 .l3-steps li:not(#_lv2):not(#_lv2) { padding-top: 1.25rem !important; border-top: 1px solid var(--l3-line) !important; }
.lv2.lv3 .l3-step-n:not(#_lv2):not(#_lv2) { display: block !important; font-size: 15px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; color: var(--l3-ink-3) !important; }
.lv2.lv3 .l3-steps h3:not(#_lv2):not(#_lv2) { margin: .75rem 0 0 !important; font-size: clamp(1.75rem, 2.6vw, 2.25rem) !important; line-height: 1.05 !important; font-weight: 800 !important; letter-spacing: -.035em !important; color: var(--l3-ink) !important; }
.lv2.lv3 .l3-steps p:not(#_lv2):not(#_lv2) { margin: .625rem 0 0 !important; max-width: 30ch !important; font-size: 17px !important; line-height: 1.5 !important; color: var(--l3-ink-2) !important; }
.lv2.lv3 .l3-pricing:not(#_lv2):not(#_lv2) { max-width: var(--l3-max) !important; margin: clamp(6rem, 12vw, 9rem) auto 0 !important; scroll-margin-top: 96px !important; }
.lv2.lv3 .l3-phead .l3-p:not(#_lv2):not(#_lv2) { max-width: 44ch !important; }
.lv2.lv3 .l3-plans:not(#_lv2):not(#_lv2) { margin-top: 2.5rem !important; display: grid !important; gap: 16px !important; align-items: stretch !important; }
.lv2.lv3 .l3-plan:not(#_lv2):not(#_lv2) { display: flex !important; flex-direction: column !important; min-width: 0 !important; padding: 28px 24px 24px !important; border-radius: 28px !important; background: var(--l3-card) !important; box-shadow: 0 0 0 1px var(--l3-line) !important; }
.lv2.lv3 .l3-plan.is-top:not(#_lv2):not(#_lv2) { box-shadow: 0 0 0 2px var(--l3-lime) !important; }
html[data-theme="light"] .lv2.lv3 .l3-plan.is-top:not(#_lv2):not(#_lv2) { box-shadow: 0 0 0 2px var(--l3-lime), 0 0 0 3px rgba(0,0,0,.12) !important; }
.lv2.lv3 .l3-plan-top:not(#_lv2):not(#_lv2) { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
.lv2.lv3 .l3-plan-name:not(#_lv2):not(#_lv2) { margin: 0 !important; font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.03em !important; color: var(--l3-ink) !important; }
.lv2.lv3 .l3-plan-pick:not(#_lv2):not(#_lv2) { flex: none !important; padding: 6px 12px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; background: var(--l3-card-2) !important; color: var(--l3-ink) !important; }
.lv2.lv3 .l3-plan-tag:not(#_lv2):not(#_lv2) { margin: .5rem 0 0 !important; font-size: 15px !important; line-height: 1.45 !important; color: var(--l3-ink-2) !important; }
.lv2.lv3 .l3-plan-price:not(#_lv2):not(#_lv2) { margin: 1.5rem 0 0 !important; display: flex !important; align-items: baseline !important; gap: 4px !important; }
.lv2.lv3 .l3-fig:not(#_lv2):not(#_lv2) { font-size: clamp(2.75rem, 5vw, 3.5rem) !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: -.045em !important; font-variant-numeric: tabular-nums !important; color: var(--l3-ink) !important; }
.lv2.lv3 .l3-per:not(#_lv2):not(#_lv2) { font-size: 17px !important; font-weight: 600 !important; color: var(--l3-ink-3) !important; }
.lv2.lv3 .l3-plan-year:not(#_lv2):not(#_lv2), .lv2.lv3 .l3-plan-intro:not(#_lv2):not(#_lv2) { margin: .5rem 0 0 !important; font-size: 15px !important; line-height: 1.45 !important; color: var(--l3-ink-2) !important; }
.lv2.lv3 .l3-feats:not(#_lv2):not(#_lv2) { list-style: none !important; margin: 1.5rem 0 0 !important; padding: 1.25rem 0 0 !important; border-top: 1px solid var(--l3-line) !important; display: grid !important; gap: 12px !important; flex: 1 1 auto !important; }
.lv2.lv3 .l3-feats li:not(#_lv2):not(#_lv2) { display: grid !important; grid-template-columns: 18px minmax(0, 1fr) !important; gap: 10px !important; font-size: 15px !important; line-height: 1.45 !important; color: var(--l3-ink) !important; }
.lv2.lv3 .l3-feats i:not(#_lv2):not(#_lv2) { margin-top: 4px !important; font-size: 13px !important; color: var(--l3-ink-2) !important; }
.lv2.lv3 .l3-plan-btn:not(#_lv2):not(#_lv2) { margin-top: 1.75rem !important; width: 100% !important; }
.lv2.lv3 .l3-compare:not(#_lv2):not(#_lv2) { margin: 1.5rem 0 0 !important; text-align: center !important; }
.lv2.lv3 .l3-compare a:not(#_lv2):not(#_lv2) { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 44px !important; font-size: 16px !important; font-weight: 600 !important; color: var(--l3-ink) !important; text-decoration: none !important; }
.lv2.lv3 .l3-compare i:not(#_lv2):not(#_lv2) { font-size: 13px !important; }
.lv2.lv3 .l3-legal:not(#_lv2):not(#_lv2) { color: var(--l3-ink-3) !important; }
.lv2.lv3 .l3-acad:not(#_lv2):not(#_lv2) { max-width: var(--l3-max) !important; margin: clamp(6rem, 12vw, 9rem) auto 0 !important; padding-top: clamp(3rem, 6vw, 4.5rem) !important; border-top: 1px solid var(--l3-line) !important; display: grid !important; gap: 2.5rem !important; scroll-margin-top: 96px !important; }
.lv2.lv3 .l3-acad .l3-h2:not(#_lv2):not(#_lv2) { font-size: clamp(1.875rem, 3.4vw, 3rem) !important; }
.lv2.lv3 .l3-rows:not(#_lv2):not(#_lv2) { margin: 0 !important; display: grid !important; gap: 0 !important; }
.lv2.lv3 .l3-rows > div:not(#_lv2):not(#_lv2) { padding: 1.125rem 0 !important; border-top: 1px solid var(--l3-line) !important; }
.lv2.lv3 .l3-rows dt:not(#_lv2):not(#_lv2) { font-size: 17px !important; font-weight: 700 !important; color: var(--l3-ink) !important; }
.lv2.lv3 .l3-rows dd:not(#_lv2):not(#_lv2) { margin: .25rem 0 0 !important; font-size: 15px !important; line-height: 1.45 !important; color: var(--l3-ink-2) !important; }
.lv2.lv3 .l3-faq:not(#_lv2):not(#_lv2) { max-width: var(--l3-max) !important; margin: clamp(6rem, 12vw, 9rem) auto 0 !important; scroll-margin-top: 96px !important; }
.lv2.lv3 .l3-faq-list:not(#_lv2):not(#_lv2) { max-width: 52rem !important; margin-top: 2rem !important; border-bottom: 1px solid var(--l3-line) !important; }
.lv2.lv3 .l3-q:not(#_lv2):not(#_lv2) { border-top: 1px solid var(--l3-line) !important; }
.lv2.lv3 .l3-q summary:not(#_lv2):not(#_lv2) { list-style: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; min-height: 64px !important; padding: 14px 0 !important; font-size: clamp(1.0625rem, 1.6vw, 1.25rem) !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: var(--l3-ink) !important; }
.lv2.lv3 .l3-q summary:not(#_lv2):not(#_lv2)::-webkit-details-marker { display: none !important; }
.lv2.lv3 .l3-q summary i:not(#_lv2):not(#_lv2) { position: relative !important; flex: none !important; width: 14px !important; height: 14px !important; }
.lv2.lv3 .l3-q summary i:not(#_lv2):not(#_lv2)::before, .lv2.lv3 .l3-q summary i:not(#_lv2):not(#_lv2)::after { content: "" !important; position: absolute !important; left: 0 !important; top: 6px !important; width: 14px !important; height: 2px !important; border-radius: 2px !important; background: var(--l3-ink-2) !important; transition: transform .25s ease !important; }
.lv2.lv3 .l3-q summary i:not(#_lv2):not(#_lv2)::after { transform: rotate(90deg) !important; }
.lv2.lv3 .l3-q[open] summary i:not(#_lv2):not(#_lv2)::after { transform: rotate(0deg) !important; }
.lv2.lv3 .l3-q p:not(#_lv2):not(#_lv2) { margin: 0 !important; padding: 0 0 1.25rem !important; max-width: 60ch !important; font-size: 16px !important; line-height: 1.55 !important; color: var(--l3-ink-2) !important; }
.lv2.lv3 .l3-close:not(#_lv2):not(#_lv2) { max-width: var(--l3-max) !important; margin: clamp(6rem, 12vw, 9rem) auto 0 !important; padding: 0 0 clamp(5rem, 10vw, 8rem) !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
.lv2.lv3 .l3-mark:not(#_lv2):not(#_lv2) { width: 56px !important; height: 56px !important; margin: 0 0 1.75rem !important; }
.lv2.lv3 .l3-close-h:not(#_lv2):not(#_lv2) { font-size: clamp(2.75rem, 7vw, 6rem) !important; letter-spacing: -.05em !important; }
.lv2.lv3 .l3-close .l3-p:not(#_lv2):not(#_lv2) { margin-inline: auto !important; }
.lv2.lv3 .l3-close .l3-btn:not(#_lv2):not(#_lv2) { margin-top: 2rem !important; }
.lv2.lv3.l3-live .l3-io:not(#_lv2):not(#_lv2) { opacity: 0 !important; transform: translateY(24px) !important; transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1) !important; }
.lv2.lv3.l3-live .l3-io.is-in:not(#_lv2):not(#_lv2) { opacity: 1 !important; transform: none !important; }
/* phone pill: appears once the hero button has scrolled away, hides at the closing button */
.lv2.lv3 .l3-pill:not(#_lv2):not(#_lv2) { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 30 !important; display: flex !important; justify-content: center !important; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; pointer-events: none !important; transform: translateY(140%) !important; transition: transform .45s cubic-bezier(.2, .8, .2, 1) !important; }
.lv2.lv3 .l3-pill.is-on:not(#_lv2):not(#_lv2) { transform: none !important; }
.lv2.lv3 .l3-pill .l3-btn:not(#_lv2):not(#_lv2) { pointer-events: auto !important; min-width: min(100%, 320px) !important; box-shadow: 0 12px 32px -8px rgba(0,0,0,.45) !important; }
@media (min-width: 720px) {
  .lv2.lv3 .l3-phone:not(#_lv2):not(#_lv2) { --fw: 300px !important; }
  .lv2.lv3 .l3-steps:not(#_lv2):not(#_lv2) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2.5rem !important; }
  .lv2.lv3 .l3-plans:not(#_lv2):not(#_lv2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 54rem !important; margin-inline: auto !important; }
  .lv2.lv3 .l3-phead:not(#_lv2):not(#_lv2) { text-align: center !important; }
  .lv2.lv3 .l3-phead .l3-p:not(#_lv2):not(#_lv2) { margin-inline: auto !important; }
  .lv2.lv3 .l3-rows:not(#_lv2):not(#_lv2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 2.5rem !important; }
}
@media (min-width: 960px) {
  .lv2.lv3 .l3-hero:not(#_lv2):not(#_lv2) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; align-items: center !important; min-height: calc(100svh - 92px) !important; padding-top: 0 !important; gap: 2rem !important; }
  .lv2.lv3 .l3-phone:not(#_lv2):not(#_lv2) { --fw: clamp(300px, 24vw, 350px) !important; }
  .lv2.lv3 .l3-chapters:not(#_lv2):not(#_lv2) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 3rem !important; }
  .lv2.lv3 .l3-ch-list:not(#_lv2):not(#_lv2) { grid-area: 1 / 1 !important; }
  .lv2.lv3 .l3-ch-stage:not(#_lv2):not(#_lv2) { grid-area: 1 / 2 !important; top: calc(50vh - clamp(280px, 22vw, 330px) * 1.0271 + 30px) !important; }
  .lv2.lv3 .l3-ch-stage .l3-phone:not(#_lv2):not(#_lv2) { --fw: clamp(280px, 22vw, 330px) !important; }
  .lv2.lv3 .l3-ch:not(#_lv2):not(#_lv2) { min-height: 82vh !important; justify-content: center !important; padding: 0 !important; }
  .lv2.lv3 .l3-ch-copy:not(#_lv2):not(#_lv2) { padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
  .lv2.lv3 .l3-ch-copy .l3-h2:not(#_lv2):not(#_lv2) { font-size: clamp(2.125rem, 4.6vw, 4rem) !important; }
  .lv2.lv3.l3-live .l3-ch:not(#_lv2):not(#_lv2) { opacity: .28 !important; transition: opacity .5s ease !important; }
  .lv2.lv3.l3-live .l3-ch.is-on:not(#_lv2):not(#_lv2) { opacity: 1 !important; }
  .lv2.lv3 .l3-honest:not(#_lv2):not(#_lv2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 4rem !important; }
  .lv2.lv3 .l3-acad:not(#_lv2):not(#_lv2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 4rem !important; align-items: start !important; }
  .lv2.lv3 .l3-pill:not(#_lv2):not(#_lv2) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lv2.lv3 .l3-scr:not(#_lv2):not(#_lv2), .lv2.lv3 .l3-io:not(#_lv2):not(#_lv2), .lv2.lv3 .l3-ch:not(#_lv2):not(#_lv2) { animation: none !important; transition: none !important; }
}
.lv2.lv3.l3-still .l3-io:not(#_lv2):not(#_lv2) { opacity: 1 !important; transform: none !important; }
.lv2.lv3.l3-still .l3-pill:not(#_lv2):not(#_lv2) { display: none !important; }