/* ============================================================
   LexFlow — the front page.

   Loaded by index.html ONLY. Everything here styles the marketing/sign-in
   page; nothing here is used once an advocate is signed in, so the workspace
   pays nothing for it. It loads after base.css and overrides the old
   sign-in-page rules that used to live there.

   ---------- the two surfaces, and why they look different ----------

   The PRODUCT is navy on off-white, one accent, hairlines instead of shadows
   (DESIGN.md principle 5). That is not negotiable and is not touched here.

   The MARKETING surface is dark ink and gold, because that is the brand the
   owner already signed off on: the Play Store feature graphic
   (docs/play-feature-graphic-1024x500.png) is a near-black field with a navy
   glow, a white wordmark under a gold rule, and a gold subhead — and the app
   icon itself is a white-and-gold serif LF on a black plate. A navy-on-white
   landing page would not look like the icon a visitor just tapped.

   So the page alternates deliberately: dark sections make the claim, light
   sections show the product in its own colours. Where the page shows a piece
   of the product (the alert card, the listing row, the stage ladder) it uses
   the REAL tokens from tokens.css, so what a visitor sees on the front page is
   what they get after signing in.

   Gold is a marketing colour and lives here, NOT in tokens.css. tokens.css is
   byte-identical to admin/tokens.css and defines the product's ONE accent;
   adding a second accent there would be a lie about the app. Two rules govern
   its use:
     - Gold NEVER carries a status. Red, amber and green keep their fixed
       meanings (DESIGN.md principle 4) and none of them appears on this page.
     - Gold NEVER sets text on a light background — it does not reach 4.5:1.
       On light, gold is a hairline rule and nothing else.

   The one visual effect allowed here that the app forbids: a single radial
   navy glow behind the hero, and the gold hairline rules. Both are copied from
   the approved feature graphic. No other gradients, no shadows-as-decoration.
   ============================================================ */

:root {
  /* LIGHT IS DOMINANT (owner, 2026-09-24): "it is gloomy". These names are
     from the dark-surface version of this page and are kept, pointed at
     light values, so every rule written against them turned light at once.
     Read them by ROLE, not by name: ink-0 is the page base, ink-1 a tinted
     section, ink-2 a raised card, on-dark the main text colour and
     on-dark-dim the secondary one. */
  --lp-ink-0: #FFFFFF;      /* page base                                */
  --lp-ink-1: #F4F6FB;      /* tinted section                           */
  --lp-ink-2: #FFFFFF;      /* raised card                              */
  --lp-ink-line: #E3E8F2;   /* hairline                                 */
  --lp-on-dark: #16181D;    /* text (was on-dark; now --ink)            */
  --lp-on-dark-dim: #5B6474;/* secondary text — 5.9:1 on white          */

  /* Gold. It WAS sampled from the old mark's flourish (#947546 → #BE9E75 →
     #FAEAAE). The mark that replaced it on 2026-08-23 is white and silver on
     black and has no gold in it at all, so this is now an accent the brand
     chose rather than one the logo dictates — kept deliberately, because it
     carries the front page, the CTAs and the sharing card, and because a
     silver accent on a dark page would read as grey rather than as an accent.
     If the owner ever wants the page to match the mark exactly, this is the
     one variable to change, and everything gold follows it. */
  --gold: #C9A961;          /* the accent: rules, eyebrows, small marks */
  --gold-bright: #E8D5A2;   /* highlight edge                           */
  --gold-deep: #8A6E3E;     /* the far end of a rule                    */

  --lp-glow: rgba(59, 111, 224, 0.14); /* a soft navy wash, not a glow   */
  --lp-max: 1120px;                     /* content column                */
}

/* ============================================================
   the page
   ============================================================ */

/* base.css centres #login as a single card viewport. This page is a document,
   so that has to go before anything else lands. */
#login {
  display: block;
  min-height: 0;
  padding: 0;
  background: var(--lp-ink-0);
}

.lp-wrap {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* The nav is sticky and 64px tall, so an anchor jump would otherwise park the
   section heading underneath it. These are the only ids on the page that are
   ever jumped to. */
/* EVERY id that is ever jumped to belongs here. The list was written when the
   page had six sections and was not extended as sections were added, so a jump
   to #pricing or #join parked the heading underneath the sticky bar — which
   reads as the page having scrolled to the wrong place. */
#top, #showcase, #what, #lexfind, #reviews, #judge, #features, #supreme, #honest,
#pricing, #join, #roadmap, #faq, #get, #signin { scroll-margin-top: 90px; }

/* Every section is light (owner, 2026-09-24). `.lp-light` is the tinted
   ground, `.lp-paper` the white one, and they alternate. */
.lp-light {
  background: var(--mist);
  color: var(--ink);
}
.lp-paper {
  background: var(--paper);
  color: var(--ink);
}

section.lp-band { padding: 76px 0; }

/* The eyebrow above a section title. Tiny, letterspaced, gold on dark and
   navy on light — the one place the two surfaces mirror each other. */
.lp-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-eyebrow::after {
  content: '';
  flex: 0 0 44px;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: 0.5;
}
.lp-light .lp-eyebrow, .lp-paper .lp-eyebrow { color: var(--navy); }

.lp-h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
  max-width: 22ch;
}
.lp-sub {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 var(--s-5);
  max-width: 62ch;
}
.lp-light .lp-sub, .lp-paper .lp-sub { color: var(--slate); }

/* ============================================================
   header
   ============================================================ */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  /* No background of its own while it sits on the hero's blue (the two read
     as one surface); solid navy once the hero has scrolled away. A page with
     no blue hero (pricing.html) marks its bar is-solid in the markup. */
  background: transparent;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.lp-nav.is-solid {
  background: rgba(10, 26, 74, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -18px rgba(10, 26, 74, .8);
}
.lp-nav .lp-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  height: var(--lp-navh, 76px);
}

/* The mark is the shipped app icon — a white-and-gold serif LF on a black
   plate — not a letterform typed in a coloured box. The gold hairline keeps
   the plate from disappearing into the dark field behind it. */
.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.035em;
  color: #fff;
  text-decoration: none;
}
.lp-brand img {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .28), 0 8px 18px -8px rgba(0, 0, 0, .5);
  display: block;
}

.lp-navlinks {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-left: auto;
  font-size: var(--t-label);
  font-weight: 600;
}
.lp-navlinks a {
  color: #DCE4F7;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.lp-navlinks a:hover {
  color: #fff;
  border-bottom-color: var(--gold);
}
.lp-navlinks a.lp-navcta {
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  /* AT EVERY WIDTH, NOT ONLY ON A PHONE. A CTA whose label breaks over two
     lines does not become a smaller button, it becomes a taller one, and it
     drags the whole 64px bar with it — which is how these came to stand 63px
     tall on a phone beside a 42px menu button without anyone noticing. If a
     label ever cannot fit, it should run out of room where it can be seen
     rather than silently doubling the height of the first thing on the site. */
  white-space: nowrap;
}
.lp-navlinks a.lp-navcta:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

/* ============================================================
   side menu (phones)
   ============================================================
   Hidden above the breakpoint: on a laptop the seven links sit in the bar and
   a drawer would be a second way to reach the same places. Everything here is
   switched on inside the 720px query further down. */
.lp-navbtn { display: none; }
.lp-side, .lp-scrim { display: none; }

.lp-navbtn {
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  padding: 0;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 15px;
  backdrop-filter: blur(8px);
  cursor: pointer;
}
/* Two lines of unequal length, the long one on top, the short one pushed
   right — the menu glyph of current apps rather than the three-bar one. */
.lp-navbtn .lp-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
  transform: translateY(-4px);
}
.lp-navbtn .lp-bars::after {
  content: '';
  position: absolute;
  right: 0;
  top: 8px;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
}
.lp-navbtn:hover { background: rgba(255, 255, 255, .22); }
.lp-navbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lp-navbtn[aria-expanded="true"] { border-color: #fff; background: rgba(255, 255, 255, .22); }

/* The drawer itself. Fixed and full-height so it is reachable however far down
   the page the visitor already is — this page is long, and a menu anchored to
   the top of the document would be the one thing they could not get back to. */
.lp-side {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(310px, 86vw);
  z-index: 60;
  background: #fff;
  border-left: 1px solid var(--lp-ink-line);
  box-shadow: -20px 0 44px -24px rgba(15, 36, 102, .35);
  overflow-y: auto;
  padding: 14px 16px 26px;
  flex-direction: column;
  gap: var(--s-4);
}
.lp-side-head { display: flex; align-items: center; }
.lp-side-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--lp-on-dark-dim);
}
.lp-side-x {
  margin-left: auto;
  /* 44, like everything else a thumb presses here. This drawer only ever opens
     on a touch screen — the width that shows it is the width that shows the
     menu button — and the way OUT of it should not be the one control on it
     that is too small. */
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--lp-on-dark);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.lp-side-links { display: flex; flex-direction: column; }
.lp-side-links a {
  padding: 13px 2px;
  color: var(--lp-on-dark);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--lp-ink-line);
}
.lp-side-links a:last-child { border-bottom: 0; }

.lp-side-actions { display: flex; flex-direction: column; gap: 9px; }
.lp-side-cta{
  display: block;
  padding: 13px 14px;
  border-radius: var(--r-btn);
  text-align: center;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700;
}
/* The app link reads as an outline, the account as the filled gold: the free
   account is still the primary action, on a phone as everywhere else. */
.lp-side-cta { color: var(--lp-ink-0); background: var(--lp-on-dark); }
.lp-side-gold { background: var(--gold); color: #1A1407; }

.lp-side-foot {
  margin: 0;
  font-size: 12.5px;
  color: var(--lp-on-dark-dim);
  text-align: center;
}

.lp-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(15, 23, 42, .38);
}

/* ============================================================
   hero (owner, 2026-09-24, after the Smokeball reference)

   One centred column on ONE deep-to-light blue surface. The top bar sits on
   that same surface — the hero is pulled up underneath the sticky bar by the
   bar's own height, and the bar has no background until the hero scrolls
   away (.lp-nav.is-solid, toggled by the script beside the hero). The owner's
   words: "the menu and hero section should match seamlessly, not two
   sections"; "top deep, bottom lighter".

   The light end of the fade falls below the badge, so every piece of white
   text sits on #2C55C4 or deeper (4.5:1 and up).
   ============================================================ */

:root { --lp-navh: 76px; }

.lp-hero {
  position: relative;
  margin-top: calc(-1 * var(--lp-navh));
  padding: calc(var(--lp-navh) + 56px) 0 56px;
  /* Ends on #2C55C4, the colour the phones section starts on: hero, phones
     and features are one blue surface (owner, 2026-09-24). */
  background: linear-gradient(180deg, #0A1A4A 0%, #12296E 30%, #1E3A8A 62%, #2C55C4 100%);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.lp-hero .lp-wrap {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Gold as a filled shape with dark text — the one way gold may carry words. */
.lp-herotag {
  margin: 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--gold);
  color: #1A1407;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}
.lp-heroby {
  margin: var(--s-4) 0 var(--s-3);
  font-size: 15px;
  font-weight: 600;
  color: #C9D6F5;
}
.lp-hero h1 {
  margin: 0 0 var(--s-5);
  font-size: clamp(46px, 10vw, 96px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}
.lp-lead {
  margin: 0 0 var(--s-3);
  max-width: 56ch;
  font-size: 18.5px;
  line-height: 1.55;
  color: #DCE4F7;
}
.lp-lead b { color: #fff; font-weight: 700; }
.lp-lead-lf { margin-bottom: 0; }

.lp-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin: 30px 0 var(--s-3);
}
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.lp-btn svg { flex: 0 0 auto; }
/* The hero's pair: pills, the primary white, the secondary an outline. */
.lp-hero .lp-btn { height: 54px; padding: 0 30px; border-radius: 999px; font-size: 16.5px; font-weight: 800; }
.lp-btn-white { background: #fff; color: var(--navy); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); }
.lp-btn-white:hover { background: #EEF3FC; }
.lp-btn-onblue { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .62); }
.lp-btn-onblue:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.lp-hero .lp-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lp-herofree { margin: 0 0 var(--s-5); font-size: 14px; color: #C9D6F5; }
.lp-herobadge { height: 58px; position: relative; overflow: hidden; border-radius: 9px; }

/* ---- the hero's motion ----
   Each line rises in on load, in turn; "Simplified." shimmers now and then;
   a glint crosses the Play badge. The resting state is fully visible, so
   nothing waits on a script, and all of it stops under reduced motion. */
.lp-up { animation: lp-up .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lp-up { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }
.lp-u1 { animation-delay: .05s; } .lp-u2 { animation-delay: .15s; } .lp-u3 { animation-delay: .25s; }
.lp-u4 { animation-delay: .4s; }  .lp-u5 { animation-delay: .5s; }  .lp-u6 { animation-delay: .62s; }
.lp-u7 { animation-delay: .72s; } .lp-u8 { animation-delay: .84s; }
.lp-hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #fff 0%, #CFE0FF 50%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lp-shimmer 6s ease-in-out 1.2s infinite;
}
@keyframes lp-shimmer { 50% { background-position: 100% 0; } }
.lp-herobadge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: lp-glint 5s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes lp-glint { 18%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .lp-up, .lp-hero h1 em, .lp-herobadge::after { animation: none; }
  .lp-herobadge::after { display: none; }
}

/* ============================================================
   features
   ============================================================ */

.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: var(--s-4);
}
.lp-card {
  background: var(--paper);
  /* A CARD IS A PAPER SURFACE WHATEVER BAND IT STANDS ON, so it names its own
     text colour. Without this it inherited from the section: on `.lp-dark` that
     is near-white, and the three Supreme Court cards had headings at 1.05:1
     against their own white background — invisible, on the section that carries
     the product's central claim. The paragraphs were readable only because
     `.lp-card p` happened to set a colour of its own, which is what hid it. */
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-5);
}
.lp-light .lp-card { background: var(--paper); }
.lp-paper .lp-card { background: var(--mist); }

.lp-card-i {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--navy-tint);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-3);
}
.lp-card h3 {
  font-size: var(--t-title);
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.lp-card p {
  margin: 0;
  color: var(--slate);
  line-height: 1.6;
  font-size: 14.5px;
}
/* The sub-points inside a feature card: what it actually does, one per line,
   because "case management" means nothing and "the day a bail order lapses"
   means everything. */
.lp-card ul {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-card li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate);
}
.lp-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--navy-line);
}
.lp-card li b { color: var(--ink); font-weight: 700; }

/* ---------- the matter stage ladder ---------- */
.lp-ladder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-3);
}
.lp-rung {
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--r-chip);
  background: var(--grey-tint);
  color: var(--grey);
  white-space: nowrap;
}
.lp-rung.on { background: var(--navy-tint); color: var(--navy); }
.lp-ladder .lp-arrow { color: var(--hairline); font-size: 12px; }

/* ============================================================
   honesty — the three states
   ============================================================ */

/* This section is the product's actual argument, so it is shown rather than
   claimed: the three states are rendered in the exact colours the app uses to
   tell them apart. Amber and grey appear here carrying their real meanings,
   which is the only reason they are allowed on this page at all. */
.lp-states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.lp-state {
  border-radius: var(--r-card);
  padding: 14px 16px;
  border: 1px solid;
}
.lp-state b { display: block; font-size: var(--t-label); font-weight: 800; margin-bottom: 3px; }
.lp-state span { display: block; font-size: var(--t-caption); line-height: 1.5; }
.lp-state.is-listed { background: var(--navy-tint); border-color: var(--navy-line); color: var(--navy); }
.lp-state.is-not { background: var(--grey-tint); border-color: var(--hairline); color: var(--grey); }
.lp-state.is-wait { background: var(--amber-tint); border-color: var(--amber-line); color: var(--amber); }
.lp-state span { color: var(--slate); }

/* ============================================================
   roadmap
   ============================================================ */

.lp-road {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.lp-road-item {
  border-top: 1px solid var(--lp-ink-line);
  padding-top: var(--s-4);
  position: relative;
}
.lp-road-item::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.lp-road-item b { display: block; font-weight: 800; font-size: 15px; margin-bottom: 5px; color: var(--lp-on-dark); }
.lp-road-item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--lp-on-dark-dim); }

/* ============================================================
   sign in
   ============================================================ */

.lp-signin {
  background: var(--lp-ink-0);
  color: var(--lp-on-dark);
  padding: 76px 0;
  border-top: 1px solid var(--lp-ink-line);
}
.lp-signin .lp-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-6);
  align-items: center;
}
.lp-signin-say h2 {
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: -0.028em;
  margin: 0 0 var(--s-3);
  max-width: 18ch;
}
.lp-signin-say p { color: var(--lp-on-dark-dim); line-height: 1.6; margin: 0 0 var(--s-3); max-width: 48ch; }

/* The card keeps the ids app.js binds to (#loginCard, #email, #password,
   #loginBtn, #loginError, #googleBtn) — it is the same form as before, moved
   onto a page that now explains what it signs you in to. It stays paper-white
   on the dark field: it is the one piece of product on this section, and the
   inputs inherit base.css's real styling. */
#loginCard {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-6);
  width: min(392px, 92vw);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
#loginCard h2 {
  font-size: var(--t-headline);
  font-weight: 800;
  margin: 0;
  text-align: center;
  letter-spacing: -0.02em;
}
#loginCard .lp-cardlead {
  text-align: center;
  color: var(--slate);
  font-size: var(--t-body);
  margin: 0 0 var(--s-2);
  line-height: 1.5;
}
#loginCard button.primary { margin-top: var(--s-2); }

/* "Forgot password?" — a link, drawn as one, sitting under the button it
   rescues. Deliberately quiet: it is the exit for a minority, and giving it a
   button's weight would compete with signing in. */
#loginCard button.linkish {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
}
#loginCard button.linkish:hover { color: var(--ink); }
#loginCard button.linkish[disabled] { opacity: .6; cursor: default; }

/* The reply to it. Green rather than red: nothing has gone wrong, and this is
   the one message on the card that is good news. */
.note-ok {
  color: var(--success);
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
}

/* "Type your email above first" — an INSTRUCTION, and it must not look like a
   failure. It used to be written into the red .error line, which tokens.css
   reserves for "destructive ONLY", and the effect was exactly what you would
   predict: the owner pressed Forgot password on an empty field, got red text
   under the button, and reported that forgot password did not work. It had
   worked perfectly; it had simply asked for something in the colour reserved
   for things going wrong. */
.note-hint {
  color: var(--slate);
  font-size: var(--t-caption);
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
}

#loginCard .foot {
  margin-top: var(--s-2);
  text-align: center;
  font-size: var(--t-caption);
  color: var(--slate);
  line-height: 1.6;
}

/* ============================================================
   footer
   ============================================================ */

.lp-foot {
  background: var(--lp-ink-1);
  color: var(--lp-on-dark-dim);
  border-top: 1px solid var(--lp-ink-line);
  padding: var(--s-6) 0 44px;
  font-size: 13px;
  line-height: 1.65;
}
.lp-foot .lp-brand { margin-bottom: var(--s-3); color: var(--ink); font-size: 20px; }
.lp-foot .lp-brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: none; }
/* The wordmark as the app draws it (app/lib/widgets/brand_title.dart): "Lex"
   ExtraBold, "Flow" lighter — 500 here, the owner's call for the web. */
.lp-word { font-weight: 500; }
.lp-word b { font-weight: 800; }
.lp-foot a { color: var(--lp-on-dark); }
.lp-foot p { margin: 0 0 var(--s-3); max-width: 78ch; }
.lp-footlinks { display: flex; flex-wrap: wrap; gap: var(--s-4); font-weight: 600; }

/* The affiliation disclaimer. It is a legal requirement of the Play listing
   and of the Government-apps declaration, and Google compares this page with
   both — it is not filler and must not be trimmed to tidy the footer. */
.lp-disclaimer {
  border-left: 2px solid var(--gold-deep);
  padding-left: var(--s-4);
  color: var(--lp-on-dark-dim);
  font-size: 12.5px;
}

/* ============================================================
   narrower screens

   Many advocates will open this on the same mid-range Android phone the app
   runs on, so the phone layout is the one that has to be right, not the one
   that merely survives.
   ============================================================ */

@media (max-width: 980px) {
  /* THE SECTION LINKS GO EARLY, and earlier than they used to. There are seven
     of them now — "Get the app" moved down out of the CTA slot — and between
     roughly 760 and 980 pixels that made the bar wrap onto three lines with the
     brand and the buttons tangled in it. A wrapped navigation bar is not a
     smaller navigation bar; it is a broken one, at the width a great many
     laptops and every tablet actually use.
     They are NOT simply dropped any more, which is the change of 2026-09-03.
     The old reasoning was that each link points at a section of this same page
     and a visitor can scroll to it. True, and still wrong: the page is long,
     the sections announce themselves only once you are inside them, and
     somebody who wants the prices had no way to ask — below 720px the site had
     no navigation at all. The links move into the side menu instead, so they
     are one tap away at every width; only the bar loses them.

     THE SWITCH ITSELF MOVED TO 1060px (2026-09-06) and now lives in its own
     query just below this one; only the page LAYOUT still turns at 980.
     Measured, the desktop bar needs 1050px of viewport — 871px of links, a
     107px brand, 48px of padding and a 24px gap — so between 981 and 1049 the
     links were still on show with nowhere to go, and the two CTAs took the
     squeeze and wrapped to two lines. That is the same tangled bar this
     comment was written to fix, left standing in a 69px band that happens to
     contain 1024px: an iPad in landscape, and about the commonest size a
     browser window gets dragged to on a laptop. */
  .lp-states { grid-template-columns: minmax(0, 1fr); }
  .lp-signin .lp-wrap { grid-template-columns: minmax(0, 1fr); }
  #loginCard { width: 100%; }
}

/* The bar alone, at the width it actually stops fitting. Kept apart from the
   layout query above so that changing one never quietly changes the other.
   The number is the sum of seven link labels and must be re-measured if a link
   is ever added or renamed — there is no way for CSS to notice on its own. */
@media (max-width: 1060px) {
  .lp-navlinks a:not(.lp-navcta) { display: none; }
  .lp-navbtn { display: flex; }
  .lp-side[data-open] { display: flex; }
  .lp-scrim:not([hidden]) { display: block; }

  /* ONE HEIGHT FOR THE WHOLE BAR, and it belongs HERE rather than in the 720px
     query where it started, because this is the width at which the menu button
     appears — and the menu button is 44px. Left in the phone query it made the
     three controls agree on a phone and left them at 37, 37 and 42 on a tablet,
     which is the same defect at a smaller scale.
     44 rather than the desktop 37 for the same reason the button exists at all:
     below this width the visitor is more likely to be pressing with a thumb
     than pointing with a mouse. A 1024px iPad in landscape lands here. */
  /* On a phone or a tablet the bar holds the logo and the menu and nothing
     else (owner, 2026-09-24). "Get the app" and "Sign in" are both in the
     menu, first and last. */
  .lp-navlinks a.lp-navcta { display: none; }
}

@media (max-width: 720px) {
  .lp-wrap { padding: 0 var(--s-4); }
  section.lp-band, .lp-signin { padding: 52px 0; }
  .lp-hero { padding: calc(var(--lp-navh) + 40px) 0 96px; }
  .lp-lead { font-size: 16.5px; }
  .lp-hero .lp-btn { height: 52px; padding: 0 24px; font-size: 16px; }
  .lp-nav .lp-wrap { gap: var(--s-3); }
}

/* ============================================================
   the app, shown — five phones fanned out (owner, 2026-09-24)

   The middle third of one blue surface: it starts on #2C55C4, where the hero
   ends, pools light behind the phones, and fades at the foot into #1E3A8A,
   where the features start. No heading and no badge (the owner's choice:
   the heading repeated the features', the badge lives in the hero).

   ONE VARIABLE SIZES THE WHOLE FAN: --phone-w, the centre phone's width.
   Every offset is a multiple of it, so the fan keeps its shape from a 360px
   handset to a desktop without a breakpoint. The outer phones are ALLOWED to
   hang past the screen edge on a phone; the band clips them, which is what
   stops the page scrolling sideways (a hard rule for this site).
   ============================================================ */

section.lp-band.lp-show { padding: 24px 0 0; }
.lp-show {
  position: relative;
  background:
    radial-gradient(60% 45% at 50% 58%, rgba(120, 170, 255, .45), transparent 70%),
    linear-gradient(180deg, #2C55C4 0%, #2548B0 55%, #1E3A8A 100%);
  color: #fff;
  overflow: hidden;
  overflow: clip;
  text-align: center;
}
/* the owner's fade: the phones dissolve downward into the features' blue */
.lp-show::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 58, 138, 0) 0%, rgba(30, 58, 138, .55) 45%, #1E3A8A 88%);
}

.lp-fan {
  --phone-w: clamp(168px, 44vw, 290px);
  position: relative;
  height: calc(var(--phone-w) * 2.166 + 16px);
  margin: 0 auto -8px;
}
.lp-fanphone {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--phone-w);
  aspect-ratio: 9 / 19.5;
  margin: 0;
  padding: calc(var(--phone-w) * 0.028);
  background: #0B0E14;
  border-radius: calc(var(--phone-w) * 0.14);
  box-shadow: 0 0 0 1px #2A2F3A inset, 0 30px 60px -24px rgba(0, 6, 30, .9);
  transform-origin: 50% 100%;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity 1s;
}
/* the camera island */
.lp-fanphone::before {
  content: '';
  position: absolute;
  top: calc(var(--phone-w) * 0.05);
  left: 50%;
  width: 30%;
  height: calc(var(--phone-w) * 0.075);
  transform: translateX(-50%);
  background: #0B0E14;
  border-radius: 999px;
  z-index: 1;
}
.lp-fanphone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--phone-w) * 0.115);
  background: #1E3A8A;
}
.lp-fanphone.is-center { transform: translateX(-50%); z-index: 3; animation: lp-float 6s ease-in-out infinite; }
.lp-fanphone.is-left  { transform: translateX(calc(-50% - var(--phone-w) * 0.62)) scale(0.86); z-index: 2; }
.lp-fanphone.is-right { transform: translateX(calc(-50% + var(--phone-w) * 0.62)) scale(0.86); z-index: 2; }
.lp-fanphone.is-far-left  { transform: translateX(calc(-50% - var(--phone-w) * 1.12)) scale(0.72); opacity: 0.55; z-index: 1; }
.lp-fanphone.is-far-right { transform: translateX(calc(-50% + var(--phone-w) * 1.12)) scale(0.72); opacity: 0.55; z-index: 1; }
.lp-fanphone.is-left, .lp-fanphone.is-right { transition-delay: .06s; }
.lp-fanphone.is-far-left, .lp-fanphone.is-far-right { transition-delay: .18s; }
@keyframes lp-float { 50% { transform: translateX(-50%) translateY(-8px); } }
/* the first time the fan is seen, the side phones start behind the centre
   one (the script sets this for one frame); at rest the fan is open */
.lp-fan.is-closed .lp-fanphone:not(.is-center) { transform: translateX(-50%) scale(.8); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .lp-fanphone.is-center { animation: none; }
  .lp-fanphone { transition: none; }
}

/* ============================================================
   LexFind — AI case search (owner, 2026-09-24, fourth version)

   Straight after the blue features, and deliberately NOT blue: after that
   long run it turns platinum and gold, the colours of the app's silver AI
   button. The features section fades into --lf-plat so the two meet
   without a line. Centred: the search window is the centrepiece, with the
   orb sitting on it. Every class is prefixed lp-lf- (the web app shares
   the page); keyframes lplf-.
   ============================================================ */

section.lp-band.lp-lexfind {
  --lf-plat: #EEF1F6; --lf-plat-2: #F7F8FB; --lf-plat-0: #E6EAF1;
  --lf-gold: #C9A961; --lf-gold-deep: #8A6E3E; --lf-ink: #111827; --lf-ink-2: #4B5568;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 40px 16px 96px; color: var(--lf-ink); text-align: center;
  background:
    radial-gradient(50% 40% at 50% 62%, rgba(201,169,97,.26), transparent 72%),
    linear-gradient(180deg, var(--lf-plat) 0%, var(--lf-plat-2) 50%, var(--lf-plat-0) 100%);
}
/* faint ruled lines, like the page of a law report */
section.lp-band.lp-lexfind::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(30,58,138,.05) 33px 34px);
  -webkit-mask: radial-gradient(70% 60% at 50% 55%, #000, transparent 80%); mask: radial-gradient(70% 60% at 50% 55%, #000, transparent 80%); }
.lp-lf-glow { position: absolute; border-radius: 50%; filter: blur(60px); z-index: -1; }
.lp-lf-glow.lp-lf-a { width: 340px; height: 340px; background: var(--lf-gold); opacity: .36; left: calc(50% + 60px); top: 360px; animation: lplf-drift-a 20s ease-in-out infinite; }
.lp-lf-glow.lp-lf-b { width: 300px; height: 300px; background: #7C9BE8; opacity: .28; right: calc(50% + 40px); top: 460px; animation: lplf-drift-b 24s ease-in-out infinite; }
@keyframes lplf-drift-a { 50% { transform: translate(-90px, 60px) scale(1.12); } }
@keyframes lplf-drift-b { 50% { transform: translate(90px, -50px) scale(.9); } }

.lp-lf-in { max-width: 820px; margin: 0 auto; }
.lp-lf-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--navy);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); border: 1px solid #fff;
  box-shadow: 0 6px 18px -10px rgba(30,58,138,.35), inset 0 0 0 1px rgba(30,58,138,.06); }
.lp-lf-tag svg { width: 14px; height: 14px; }
.lp-lf-tag i { font-style: normal; padding: 2px 7px; border-radius: 999px; background: var(--navy); color: #fff; letter-spacing: .1em; font-size: 10px; }
.lp-lf-h { margin: 16px 0 0; font-size: clamp(34px, 7vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: #0A1A4A; text-wrap: balance; }
.lp-lf-h span {
  background: linear-gradient(100deg, var(--lf-gold-deep) 0%, var(--lf-gold) 40%, #B8913F 60%, var(--lf-gold-deep) 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lplf-sheen 6s ease-in-out infinite; }
@keyframes lplf-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.lp-lf-say { margin: 14px auto 0; font-size: 19px; line-height: 1.5; color: var(--lf-ink-2); font-weight: 500; max-width: 34ch; }
.lp-lf-say b { color: var(--lf-ink); font-weight: 700; }

/* ---- the search window, with the silver orb sitting on it ---- */
.lp-lf-stage { position: relative; max-width: 760px; margin: 96px auto 0; text-align: left; }
.lp-lf-ai { position: absolute; left: 50%; top: -78px; width: 150px; height: 150px; margin-left: -75px; z-index: 3; animation: lplf-float 5s ease-in-out infinite; }
.lp-lf-ball { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 24%, #FFFFFF 0%, rgba(255,255,255,0) 32%), radial-gradient(circle at 50% 45%, #F8FAFC 0%, #E2E8F0 55%, #AEB6C4 88%, #8C95A5 100%);
  box-shadow: inset 0 -10px 22px rgba(15,23,42,.18), 0 0 0 1px rgba(255,255,255,.7), 0 22px 44px -16px rgba(18,41,110,.5), 0 0 70px rgba(201,169,97,.45); }
.lp-lf-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(201,169,97,.75); animation: lplf-ring 3.2s ease-out infinite; }
.lp-lf-ring.lp-lf-r2 { animation-delay: 1.6s; }
.lp-lf-ai.is-busy .lp-lf-ring { animation-duration: 1.1s; }
.lp-lf-ai.is-busy .lp-lf-ball svg { animation: lplf-spin 1.1s ease-in-out infinite; }
@keyframes lplf-float { 50% { transform: translateY(-8px); } }
@keyframes lplf-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes lplf-spin { 50% { transform: rotate(45deg) scale(1.12); } }

.lp-lf-win { --mx: 50%; --my: 0%; position: relative; padding: 92px 26px 22px; border-radius: 30px;
  background: radial-gradient(220px 160px at var(--mx) var(--my), rgba(255,255,255,.8), transparent 70%), linear-gradient(150deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.48) 60%, rgba(255,255,255,.66) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 44px 80px -36px rgba(18,41,110,.5), 0 0 0 1px rgba(30,58,138,.05); }
.lp-lf-bar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding: 16px 16px 16px 18px; border-radius: 18px; background: #fff;
  border: 1.5px solid rgba(201,169,97,.55); box-shadow: 0 0 0 5px rgba(232,213,162,.25), 0 10px 24px -14px rgba(18,41,110,.5); }
.lp-lf-bar > svg { flex: none; }
.lp-lf-bar::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(232,213,162,.55) 50%, transparent 80%); transform: translateX(-110%); }
.lp-lf-win.is-searching .lp-lf-bar::after { animation: lplf-sweep 1.1s ease-in-out infinite; }
@keyframes lplf-sweep { to { transform: translateX(110%); } }
.lp-lf-q { font-size: 17px; font-weight: 600; color: var(--lf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lp-lf-caret { flex: none; width: 2px; height: 22px; background: #2C55C4; margin-left: -10px; animation: lplf-blink 1s steps(1) infinite; }
@keyframes lplf-blink { 50% { opacity: 0; } }
.lp-lf-aipill { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: #fff; padding: 5px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #1E3A8A, #12296E); box-shadow: 0 0 0 1px rgba(201,169,97,.6), 0 4px 12px -4px rgba(18,41,110,.6); }

/* the two modes under the bar (owner's addition): Case search / AI search */
.lp-lf-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.lp-lf-mode { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 12px; border-radius: 14px;
  font-size: 15px; font-weight: 800; color: var(--navy); background: rgba(255,255,255,.7); border: 1.5px solid rgba(30,58,138,.16);
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.lp-lf-mode[data-m="ai"] { color: var(--lf-gold-deep); border-color: rgba(201,169,97,.55); }
.lp-lf-mode.is-on { color: #fff; background: linear-gradient(135deg, #1E3A8A, #12296E); border-color: #1E3A8A; box-shadow: 0 10px 22px -12px rgba(18,41,110,.7); }
.lp-lf-mode[data-m="ai"].is-on { color: #1A1407; background: linear-gradient(135deg, #E8D5A2, #C9A961); border-color: #C9A961; box-shadow: 0 10px 22px -12px rgba(138,110,62,.8), 0 0 24px rgba(201,169,97,.45); }

.lp-lf-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--lf-ink-2); margin: 0 2px 10px; }
.lp-lf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lf-gold); margin-right: 7px; vertical-align: 1px; }
.lp-lf-win.is-searching .lp-lf-dot { animation: lplf-pulse .7s ease-in-out infinite; }
@keyframes lplf-pulse { 50% { transform: scale(1.6); opacity: .5; } }
.lp-lf-res { display: grid; gap: 10px; }
.lp-lf-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 16px;
  background: rgba(255,255,255,.75); border: 1px solid #fff; box-shadow: 0 6px 16px -12px rgba(18,41,110,.45);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
.lp-lf-row.is-hidden { opacity: 0; transform: translateY(12px); filter: blur(4px); }
.lp-lf-doc { position: relative; width: 40px; height: 48px; border-radius: 8px; background: linear-gradient(180deg, #F1F4FA, #DCE3F1); border: 1px solid rgba(30,58,138,.14); }
.lp-lf-doc::before { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: rgba(30,58,138,.25); box-shadow: 0 6px 0 rgba(30,58,138,.25), 0 12px 0 rgba(30,58,138,.25); }
.lp-lf-doc::after { content: ''; position: absolute; left: 8px; right: 18px; bottom: 8px; height: 2px; background: var(--lf-gold); }
.lp-lf-l { height: 10px; border-radius: 6px; background: #D5DCEA; }
.lp-lf-l.lp-lf-t { height: 12px; width: 78%; background: #9FB0D3; }
.lp-lf-l.lp-lf-m { width: 44%; margin-top: 8px; height: 8px; }
.lp-lf-pass { margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.lp-lf-pass .w { height: 8px; border-radius: 5px; background: #E1E6F0; }
.lp-lf-pass .hl { height: 14px; border-radius: 4px; background: linear-gradient(90deg, rgba(201,169,97,.6), rgba(232,213,162,.85)); transform-origin: left; transition: transform .6s cubic-bezier(.2,.8,.2,1) .25s; }
.lp-lf-row.is-hidden .hl { transform: scaleX(0); }
.lp-lf-pill { display: inline-flex; margin-top: 10px; font-size: 11.5px; font-weight: 800; color: var(--lf-gold-deep); background: rgba(232,213,162,.45); border: 1px solid rgba(201,169,97,.5); padding: 3px 9px; border-radius: 999px; }
.lp-lf-foot { margin: 14px 2px 0; font-size: 12.5px; color: var(--lf-ink-2); font-weight: 600; text-align: center; }

/* rise in once when seen; the resting state is the visible one */
.lp-lf-up { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.lp-lf-pre .lp-lf-up { opacity: 0; transform: translateY(22px); filter: blur(6px); }
.lp-lf-d2 { transition-delay: .12s; } .lp-lf-d3 { transition-delay: .24s; } .lp-lf-d4 { transition-delay: .38s; }

@media (max-width: 480px) {
  section.lp-band.lp-lexfind { padding: 28px 16px 72px; }
  .lp-lf-stage { margin-top: 76px; }
  .lp-lf-ai { width: 116px; height: 116px; margin-left: -58px; top: -60px; }
  .lp-lf-ai svg { width: 58px; height: 58px; }
  .lp-lf-win { padding: 72px 14px 16px; border-radius: 24px; }
  .lp-lf-bar { padding: 13px 12px; gap: 9px; min-height: 54px; }
  .lp-lf-q { font-size: 15px; }
  .lp-lf-mode { font-size: 14px; }
  .lp-lf-say { font-size: 17px; }
  .lp-lf-meta span + span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-lf-pre .lp-lf-up { opacity: 1; transform: none; filter: none; }
  .lp-lf-h span, .lp-lf-ai, .lp-lf-ring, .lp-lf-caret, .lp-lf-glow { animation: none; }
}

/* ============================================================
   what advocates say — real Play reviews (owner, 2026-09-24)

   Straight after LexFind (owner, 2026-09-24), in the page's design language:
   back to the blue after LexFind's platinum, liquid-glass cards over slowly
   drifting coloured light, gold stars, a gold word in the heading. The
   section opens from LexFind's platinum and closes into the packages'
   platinum, so no edge shows either side.
   Three columns on a desktop; on a phone the row SCROLLS SIDEWAYS INSIDE
   ITSELF (scroll-snap, one card and a peek of the next) — the row owns its
   overflow, so the page never scrolls sideways. The cards rise in once when
   seen and the stars light one by one; at rest (no script, reduced motion)
   everything is visible. Classes lp-rv-, keyframes lprv-.
   ============================================================ */

section.lp-band.lp-reviews {
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff; text-align: center;
  padding: 150px 0 150px;
  background:
    radial-gradient(55% 45% at 50% 55%, rgba(120, 170, 255, .35), transparent 72%),
    linear-gradient(180deg, #E6EAF1 0%, #8EA3D6 7%, #2C55C4 17%, #1E3A8A 40%, #12296E 78%, #5C74B0 90%, #EEF1F6 100%);
}
.lp-rv-glow { position: absolute; border-radius: 50%; filter: blur(64px); z-index: -1; }
.lp-rv-glow.lp-rv-a { width: 360px; height: 360px; background: #3C6BF0; opacity: .7; left: -90px; top: 32%; animation: lprv-a 18s ease-in-out infinite; }
.lp-rv-glow.lp-rv-b { width: 300px; height: 300px; background: #22B8E6; opacity: .45; right: -80px; top: 44%; animation: lprv-b 22s ease-in-out infinite; }
.lp-rv-glow.lp-rv-c { width: 260px; height: 260px; background: #C9A961; opacity: .38; left: 42%; top: 58%; animation: lprv-c 26s ease-in-out infinite; }
@keyframes lprv-a { 50% { transform: translate(140px, 60px) scale(1.15); } }
@keyframes lprv-b { 50% { transform: translate(-120px, -50px) scale(.9); } }
@keyframes lprv-c { 50% { transform: translate(-100px, -90px) scale(1.2); } }

.lp-rv-tag { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); }
.lp-rv-h {
  margin: 16px 0 10px;
  font-size: clamp(30px, 6vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; color: #fff;
}
.lp-rv-h span {
  background: linear-gradient(100deg, #E8D5A2 0%, #C9A961 45%, #F3E6C2 60%, #E8D5A2 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lprv-sheen 6s ease-in-out infinite;
}
@keyframes lprv-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.lp-rv-sub { margin: 0 0 44px; color: #DCE4F7; font-size: 16px; font-weight: 500; }

.lp-rv-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  text-align: left;
}
/* liquid glass, as the features tiles: translucent, blurred, a lit top edge
   and a sheen that follows the pointer */
.lp-rv {
  --mx: 50%; --my: 0%;
  position: relative;
  margin: 24px 0 0;
  padding: 34px 24px 26px;
  border-radius: 28px 28px 28px 8px;
  background:
    radial-gradient(180px 130px at var(--mx) var(--my), rgba(255,255,255,.22), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.12) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.10), 0 24px 50px -26px rgba(0, 8, 40, .85);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
}
.lp-rv:nth-child(2) { transition-delay: .15s; }
.lp-rv:nth-child(3) { transition-delay: .3s; }
.lp-rv-q {
  position: absolute; top: -24px; left: 22px;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 22px -8px rgba(0, 8, 40, .7);
}
.lp-rv-q.is-navy { background: linear-gradient(135deg, #2C55C4, #12296E); }
.lp-rv-q.is-blue { background: linear-gradient(135deg, #4A8BF5, #2548B0); }
.lp-rv-q.is-gold { background: linear-gradient(135deg, #E8D5A2, #B08D45); }
.lp-rv figcaption { margin: 4px 0 2px; }
.lp-rv figcaption b { display: block; font-size: 17px; font-weight: 800; color: #fff; }
.lp-rv figcaption span { font-size: 12.5px; color: #B9C6E8; font-weight: 600; }
.lp-rv-stars { margin: 8px 0 12px; color: #E8C66A; font-size: 18px; letter-spacing: 3px; text-shadow: 0 0 12px rgba(232, 198, 106, .55); }
.lp-rv blockquote { margin: 0; font-size: 15px; line-height: 1.62; color: #E6ECFA; }

/* rise in once when seen; the stars light one by one */
.lp-rv-pre .lp-rv { opacity: 0; transform: translateY(26px); filter: blur(6px); }
.lp-rv-stars i { font-style: normal; display: inline-block; }
.lp-rv-lit .lp-rv-stars i { animation: lprv-star .5s cubic-bezier(.2,.8,.2,1) both; }
.lp-rv-lit .lp-rv-stars i:nth-child(2) { animation-delay: .1s; }
.lp-rv-lit .lp-rv-stars i:nth-child(3) { animation-delay: .2s; }
.lp-rv-lit .lp-rv-stars i:nth-child(4) { animation-delay: .3s; }
.lp-rv-lit .lp-rv-stars i:nth-child(5) { animation-delay: .4s; }
@keyframes lprv-star { from { opacity: .15; transform: scale(.4); } 60% { transform: scale(1.3); } }

@media (max-width: 860px) {
  .lp-rv-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 0 calc(-1 * var(--s-4));
    padding: 0 var(--s-4) 44px;
    margin-bottom: -30px;
    scrollbar-width: none;
  }
  .lp-rv-row::-webkit-scrollbar { display: none; }
  .lp-rv { flex: 0 0 82%; scroll-snap-align: center; }
}
@media (max-width: 720px) {
  section.lp-band.lp-reviews { padding: 110px 0 120px; }
  .lp-rv-sub { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-rv-pre .lp-rv { opacity: 1; transform: none; filter: none; }
  .lp-rv-glow, .lp-rv-h span, .lp-rv-lit .lp-rv-stars i { animation: none; }
}

/* ============================================================
   Packages — the deck (owner, 2026-09-24)

   Straight after the reviews, and back to LexFind's platinum and gold so
   the page alternates: blue reviews, light packages. Opens from the reviews'
   platinum foot and closes into white before Judge Court.

   A deck, not a row: one card in front, one either side tucked behind it,
   and the fourth waiting hidden behind the front one. It loops, opens on
   LexFlow Light (the most popular) and on 3 MONTHS (owner). Only the front
   card is interactive; the others are `inert`.

   SMOOTH, NOT HEAVY. The first version lagged: every card carried a 22px
   backdrop-filter and the cards behind animated a CSS blur, so each frame
   of a slide re-rendered four blurred layers. Now the cards are painted
   solid (they were nearly opaque anyway), the cards behind fade instead of
   blurring, only transform and opacity animate, and each card is its own
   compositor layer (will-change). Do not put backdrop-filter or filter back
   on .lp-pk-card.

   Every price is a data-p3/p6/p12 attribute on its card, the same figures
   as pricing.html; change one, change the other (see CLAUDE.md, "The
   prices"). Classes lp-pk-, keyframes lppk-.
   ============================================================ */

section.lp-band.lp-packages {
  --pk-gold: #C9A961; --pk-gold-deep: #8A6E3E; --pk-ink: #111827; --pk-ink-2: #4B5568;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 40px 0 90px; text-align: center; color: var(--pk-ink);
  background:
    radial-gradient(45% 40% at 50% 60%, rgba(201,169,97,.24), transparent 72%),
    linear-gradient(180deg, #EEF1F6 0%, #F7F8FB 55%, #FFFFFF 100%);
}
section.lp-band.lp-packages::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(30,58,138,.05) 33px 34px);
  -webkit-mask: radial-gradient(70% 55% at 50% 50%, #000, transparent 80%); mask: radial-gradient(70% 55% at 50% 50%, #000, transparent 80%); }
.lp-pk-glow { position: absolute; border-radius: 50%; filter: blur(64px); z-index: -1; }
.lp-pk-glow.lp-pk-a { width: 380px; height: 380px; background: #7C9BE8; opacity: .3; left: calc(50% - 420px); top: 340px; }
.lp-pk-glow.lp-pk-b { width: 340px; height: 340px; background: var(--pk-gold); opacity: .32; left: calc(50% + 80px); top: 400px; }

.lp-pk-head { padding: 0 16px; }
.lp-pk-tag { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--navy);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); border: 1px solid #fff;
  box-shadow: 0 6px 18px -10px rgba(30,58,138,.35), inset 0 0 0 1px rgba(30,58,138,.06); }
.lp-pk-h { margin: 16px auto 0; max-width: 18ch; font-size: clamp(30px, 6vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: #0A1A4A; text-wrap: balance; }
.lp-pk-h span { background: linear-gradient(100deg, var(--pk-gold-deep) 0%, var(--pk-gold) 40%, #B8913F 60%, var(--pk-gold-deep) 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lppk-sheen 6s ease-in-out infinite; }
@keyframes lppk-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.lp-pk-sub { margin: 14px auto 0; max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--pk-ink-2); font-weight: 500; }

/* the period toggle: a pill slides to the chosen one */
.lp-pk-seg { position: relative; display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; padding: 5px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); border: 1px solid #fff;
  box-shadow: 0 10px 24px -14px rgba(18,41,110,.5), inset 0 0 0 1px rgba(30,58,138,.07); }
.lp-pk-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px;
  background: linear-gradient(135deg, #1E3A8A, #12296E); box-shadow: 0 8px 16px -8px rgba(18,41,110,.8);
  transform: translateX(calc(var(--seg, 0) * 100%)); transition: transform .4s cubic-bezier(.22,.8,.24,1); will-change: transform; }
.lp-pk-seg button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 11px 16px; min-width: 92px; min-height: 40px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1; color: var(--navy); transition: color .3s ease; }
.lp-pk-seg button[aria-pressed="true"] { color: #fff; }
.lp-pk-seg button:focus-visible { outline: 3px solid var(--pk-gold); outline-offset: 2px; }

/* the deck */
.lp-pk-car { position: relative; margin-top: 18px; }
.lp-pk-deck {
  --cw: min(330px, 76vw); --off: 40%; --drag: 0px;
  position: relative; display: grid; justify-items: center; padding: 30px 16px 36px; text-align: left;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none;
}
.lp-pk-deck:focus-visible { outline: 3px solid var(--pk-gold); outline-offset: -3px; border-radius: 24px; }
.lp-pk-deck.is-dragging { cursor: grabbing; }
.lp-pk-card {
  --tx: 0%; --sc: 1;
  grid-area: 1 / 1; width: var(--cw);
  position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 28px;
  background: linear-gradient(150deg, #FFFFFF 0%, #F6F8FC 60%, #FBFCFE 100%);
  border: 1px solid #fff;
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -34px rgba(18,41,110,.45), 0 0 0 1px rgba(30,58,138,.06);
  transform: translate3d(calc(var(--tx) + var(--drag)), 0, 0) scale(var(--sc));
  transition: transform .5s cubic-bezier(.22,.8,.24,1), opacity .5s cubic-bezier(.22,.8,.24,1);
  will-change: transform, opacity; backface-visibility: hidden;
}
.lp-pk-deck.is-dragging .lp-pk-card { transition: none; }
.lp-pk-card.is-front { --tx: 0%; --sc: 1; z-index: 3; }
.lp-pk-card.is-left { --tx: calc(-1 * var(--off)); --sc: .88; z-index: 2; opacity: .62; cursor: pointer; }
.lp-pk-card.is-right { --tx: var(--off); --sc: .88; z-index: 2; opacity: .62; cursor: pointer; }
.lp-pk-card.is-hidden { --tx: 0%; --sc: .78; z-index: 1; opacity: 0; pointer-events: none; }
.lp-pk-card h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #0A1A4A; }
.lp-pk-lede { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--pk-ink-2); font-weight: 500; min-height: 2.9em; }
.lp-pk-price { margin: 18px 0 2px; display: flex; align-items: baseline; gap: 6px; color: #0A1A4A; }
.lp-pk-price b { font-size: 42px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; }
.lp-pk-price b.is-rolling { animation: lppk-roll .3s cubic-bezier(.22,.8,.24,1); }
@keyframes lppk-roll { from { opacity: 0; transform: translateY(45%); } }
.lp-pk-cur { font-size: 22px; font-weight: 800; align-self: flex-start; margin-top: 4px; }
.lp-pk-per { margin: 0; font-size: 13px; font-weight: 700; color: var(--pk-ink-2); }
.lp-pk-mo { align-self: flex-start; margin-top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--pk-gold-deep);
  background: rgba(232,213,162,.4); border: 1px solid rgba(201,169,97,.45); font-variant-numeric: tabular-nums; }
.lp-pk-card ul { list-style: none; margin: 18px 0 22px; padding: 16px 0 0; border-top: 1px solid rgba(30,58,138,.12); display: grid; gap: 11px; }
.lp-pk-card li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.4; color: #253046; }
.lp-pk-card li::before { content: ''; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(30,58,138,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%231E3A8A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lp-pk-cta { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 14px; font-weight: 800; font-size: 15px; text-decoration: none;
  color: var(--navy); background: #fff; border: 1.5px solid rgba(30,58,138,.2); transition: transform .2s ease; }
.lp-pk-cta:hover { transform: translateY(-1px); }
.lp-pk-cta:focus-visible, .lp-pk-nav button:focus-visible, .lp-pk-more:focus-visible { outline: 3px solid var(--pk-gold); outline-offset: 3px; }

/* the most popular card: navy, gold edge, gold badge */
.lp-pk-card.is-feat {
  background: linear-gradient(160deg, #2C55C4 0%, #1E3A8A 45%, #12296E 100%);
  border: 1.5px solid rgba(232,213,162,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 40px 70px -30px rgba(18,41,110,.75), 0 0 60px rgba(201,169,97,.3);
}
.lp-pk-card.is-feat h3, .lp-pk-card.is-feat .lp-pk-price { color: #fff; }
.lp-pk-card.is-feat .lp-pk-lede, .lp-pk-card.is-feat .lp-pk-per { color: #C9D4F0; }
.lp-pk-card.is-feat .lp-pk-mo { color: #F3E6C2; background: rgba(232,213,162,.16); border-color: rgba(232,213,162,.45); }
.lp-pk-card.is-feat ul { border-top-color: rgba(255,255,255,.18); }
.lp-pk-card.is-feat li { color: #EEF2FC; }
.lp-pk-card.is-feat li::before { background-color: rgba(232,213,162,.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23E8D5A2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lp-pk-card.is-feat .lp-pk-cta { color: #1A1407; background: linear-gradient(135deg, #E8D5A2, #C9A961); border-color: #C9A961; box-shadow: 0 12px 24px -12px rgba(138,110,62,.9); }
.lp-pk-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: #1A1407;
  background: linear-gradient(135deg, #F3E6C2, #C9A961); box-shadow: 0 8px 18px -8px rgba(138,110,62,.8); overflow: hidden; }
.lp-pk-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.7) 48%, transparent 66%);
  transform: translateX(-120%); animation: lppk-glint 4.5s ease-in-out 1.5s infinite; }
@keyframes lppk-glint { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }

/* arrows and dots */
.lp-pk-nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.lp-pk-nav > button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--navy);
  background: linear-gradient(135deg, #fff, #F1F4FA); border: 1px solid #fff;
  box-shadow: 0 8px 20px -10px rgba(18,41,110,.5), inset 0 0 0 1px rgba(30,58,138,.08); transition: transform .2s ease; }
.lp-pk-nav > button:hover { transform: scale(1.06); }
.lp-pk-dots { display: flex; gap: 8px; }
.lp-pk-dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: rgba(30,58,138,.22); transition: width .35s ease, background-color .35s ease; }
.lp-pk-dots button.is-on { width: 26px; background: var(--navy); }
.lp-pk-dots button.is-on.is-gold { background: var(--pk-gold); }

.lp-pk-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding: 15px 26px; border-radius: 999px; font-weight: 800; font-size: 15.5px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #1E3A8A, #12296E); box-shadow: 0 0 0 1px rgba(201,169,97,.55), 0 16px 30px -14px rgba(18,41,110,.8); transition: transform .2s ease; }
.lp-pk-more:hover { transform: translateY(-2px); }
.lp-pk-more svg { transition: transform .25s ease; }
.lp-pk-more:hover svg { transform: translateX(4px); }
.lp-pk-pay { margin: 18px auto 0; padding: 0 16px; max-width: 46ch; font-size: 13.5px; line-height: 1.55; color: var(--pk-ink-2); }
.lp-pk-pay b { color: var(--pk-ink); }

/* rise in once when seen; the resting state is the visible one */
.lp-pk-up { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.lp-pk-pre .lp-pk-up { opacity: 0; transform: translateY(22px); }
.lp-pk-d2 { transition-delay: .12s; } .lp-pk-d3 { transition-delay: .24s; } .lp-pk-d4 { transition-delay: .36s; } .lp-pk-d5 { transition-delay: .48s; }

@media (min-width: 760px) { .lp-pk-deck { --cw: 340px; --off: 62%; } }
@media (prefers-reduced-motion: reduce) {
  .lp-pk-pre .lp-pk-up { opacity: 1; transform: none; }
  .lp-pk-card, .lp-pk-pill, .lp-pk-up { transition: none; }
  .lp-pk-h span, .lp-pk-badge::after, .lp-pk-price b.is-rolling { animation: none; }
}

/* ============================================================
   Automatic case tracking (owner, 2026-09-24)

   Replaces the old Supreme Court and Judge Court sections, straight after
   the packages. Blue again, so the page keeps alternating (platinum
   packages, blue tracking); it opens from the packages' white foot and
   closes into white.

   MARKETING WORDS, NO MECHANICS (owner). It says the Supreme Court and
   SELECTED district courts and tribunals are tracked automatically and that
   the alerts are built to be first. It must never say WHEN (times of day,
   repeats), HOW (the watcher, the scrape, how a list is judged complete) or
   name a competitor: the old sections spelled all of that out, and the
   owner does not want competitors reading it here.

   Desktop: words on the left, the three cards stacked on the right.
   Phone: the cards become a row that slides by itself (and by swipe); it
   pauses while touched and when off screen. Only transform/opacity animate;
   the cards carry no backdrop-filter (see the packages deck for why).
   Classes lp-tr-, keyframes lptr-.
   ============================================================ */

section.lp-band.lp-tracking {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding: 120px 0 130px;
  background:
    radial-gradient(50% 45% at 72% 45%, rgba(120,170,255,.32), transparent 72%),
    linear-gradient(180deg, #FFFFFF 0%, #AFBDDD 6%, #2C55C4 16%, #1E3A8A 38%, #12296E 78%, #5C74B0 90%, #FFFFFF 100%);
}
.lp-tr-glow { position: absolute; border-radius: 50%; filter: blur(64px); z-index: -1; }
.lp-tr-glow.lp-tr-a { width: 380px; height: 380px; background: #3C6BF0; opacity: .55; left: -110px; top: 28%; }
.lp-tr-glow.lp-tr-b { width: 320px; height: 320px; background: #22B8E6; opacity: .35; right: -90px; top: 22%; }
.lp-tr-glow.lp-tr-c { width: 300px; height: 300px; background: #C9A961; opacity: .28; left: 48%; top: 58%; }
.lp-tr-anchor { position: absolute; top: 90px; }

.lp-tr-in { max-width: 1100px; margin: 0 auto; padding: 0 var(--s-5, 20px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }

.lp-tr-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.35); }
.lp-tr-tag i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC97; animation: lptr-live 2s ease-out infinite; }
@keyframes lptr-live { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61,220,151,0); } }
.lp-tr-h { margin: 18px 0 0; font-size: clamp(38px, 6.4vw, 62px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: #fff; text-wrap: balance; }
.lp-tr-h span { background: linear-gradient(100deg, #E8D5A2 0%, #C9A961 45%, #F3E6C2 60%, #E8D5A2 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lptr-sheen 6s ease-in-out infinite; }
@keyframes lptr-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.lp-tr-sub { margin: 18px 0 0; max-width: 40ch; font-size: 18px; line-height: 1.55; color: #DCE4F7; font-weight: 500; }
.lp-tr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lp-tr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 26px -18px rgba(0,8,40,.9); }
.lp-tr-chip svg { color: #E8D5A2; flex: none; }
.lp-tr-note { display: flex; align-items: flex-start; gap: 7px; margin: 22px 0 0; max-width: 48ch; font-size: 11.5px; line-height: 1.55; color: rgba(220,228,247,.55); }
.lp-tr-note svg { flex: none; margin-top: 1px; color: rgba(232,213,162,.75); }

/* the cards: a stack on the right on a desktop */
.lp-tr-cards { position: relative; display: grid; gap: 14px; }
.lp-tr-card { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 22px 20px; border-radius: 24px; text-align: left;
  background: linear-gradient(145deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.11) 100%);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 24px 50px -26px rgba(0,8,40,.85); }
.lp-tr-badge { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #1A1407;
  background: linear-gradient(135deg, #F3E6C2, #C9A961); box-shadow: 0 10px 22px -10px rgba(138,110,62,.9), inset 0 1px 0 rgba(255,255,255,.6); }
.lp-tr-card h3 { margin: 2px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.lp-tr-card p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: #DCE4F7; }
.lp-tr-card p b { color: #F3E6C2; font-weight: 700; }
.lp-tr-dots { display: none; }

/* rise in once when seen; the resting state is the visible one */
.lp-tr-up { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.lp-tr-pre .lp-tr-up { opacity: 0; transform: translateY(24px); }
.lp-tr-d2 { transition-delay: .12s; } .lp-tr-d3 { transition-delay: .24s; } .lp-tr-d4 { transition-delay: .36s; }

/* phone: text first, then a row of cards that slides by itself */
@media (max-width: 880px) {
  section.lp-band.lp-tracking { padding: 96px 0 104px; }
  .lp-tr-in { grid-template-columns: minmax(0, 1fr); gap: 34px; text-align: center; }
  .lp-tr-sub, .lp-tr-note { margin-left: auto; margin-right: auto; }
  .lp-tr-note { justify-content: center; text-align: left; }
  .lp-tr-chips { justify-content: center; }
  .lp-tr-cards {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 calc(-1 * var(--s-5, 20px)) -26px; padding: 4px var(--s-5, 20px) 40px;
    scroll-padding: 0 var(--s-5, 20px);
  }
  .lp-tr-cards::-webkit-scrollbar { display: none; }
  .lp-tr-card { flex: 0 0 86%; scroll-snap-align: center; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 22px 20px; }
  .lp-tr-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .lp-tr-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.35); transition: width .35s ease, background-color .35s ease; }
  .lp-tr-dots button.is-on { width: 24px; background: #E8D5A2; }
}
@media (max-width: 480px) {
  .lp-tr-sub { font-size: 16.5px; }
  .lp-tr-chip { font-size: 13px; padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-tr-pre .lp-tr-up { opacity: 1; transform: none; }
  .lp-tr-up { transition: none; }
  .lp-tr-h span, .lp-tr-tag i { animation: none; }
}

/* ============================================================
   Your account — create one, or sign in (owner, 2026-09-24)

   One card for both doors, after case tracking; platinum and gold so the
   page keeps alternating (blue tracking, light account, blue questions).
   The forms inside are the SAME forms app.js and shared/join.js have always
   driven (see the comment in index.html); only their clothes are here.
   Classes lp-ac-, keyframes lpac-.
   ============================================================ */

section.lp-band.lp-account {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: var(--ink);
  padding: 40px 16px 56px;
  background:
    radial-gradient(45% 45% at 50% 55%, rgba(201,169,97,.22), transparent 72%),
    linear-gradient(180deg, #FFFFFF 0%, #F4F6FA 40%, #EEF1F6 100%);
}
section.lp-band.lp-account::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(30,58,138,.05) 33px 34px);
  -webkit-mask: radial-gradient(70% 55% at 50% 50%, #000, transparent 80%); mask: radial-gradient(70% 55% at 50% 50%, #000, transparent 80%); }
.lp-ac-glow { position: absolute; border-radius: 50%; filter: blur(64px); z-index: -1; }
.lp-ac-glow.lp-ac-a { width: 360px; height: 360px; background: #7C9BE8; opacity: .28; left: calc(50% - 460px); top: 240px; }
.lp-ac-glow.lp-ac-b { width: 340px; height: 340px; background: #C9A961; opacity: .3; left: calc(50% + 60px); top: 300px; }
#signin { scroll-margin-top: 170px; }

.lp-ac-tag { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--navy);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.55)); border: 1px solid #fff;
  box-shadow: 0 6px 18px -10px rgba(30,58,138,.35), inset 0 0 0 1px rgba(30,58,138,.06); }
.lp-ac-h { margin: 16px auto 0; max-width: 18ch; font-size: clamp(32px, 6vw, 54px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; color: #0A1A4A; text-wrap: balance; }
.lp-ac-h span { background: linear-gradient(100deg, #8A6E3E 0%, #C9A961 40%, #B8913F 60%, #8A6E3E 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lpac-sheen 6s ease-in-out infinite; }
@keyframes lpac-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.lp-ac-sub { margin: 14px auto 0; max-width: 44ch; font-size: 16.5px; line-height: 1.55; color: #4B5568; font-weight: 500; }

.lp-ac-grid { max-width: 980px; margin: 30px auto 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: center; text-align: left; }
/* Centred against the card (owner, 2026-09-24): top-aligned, the three points
   stopped halfway down a much taller card and left a gap under them. */
.lp-ac-card { position: relative; padding: 22px 24px 24px; border-radius: 28px; background: linear-gradient(150deg, #FFFFFF 0%, #F6F8FC 60%, #FBFCFE 100%);
  border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 36px 70px -36px rgba(18,41,110,.5), 0 0 0 1px rgba(30,58,138,.06); }
.lp-ac-seg { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 5px; border-radius: 999px; background: #EEF1F7; box-shadow: inset 0 0 0 1px rgba(30,58,138,.08); }
.lp-ac-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 2); border-radius: 999px; background: linear-gradient(135deg, #1E3A8A, #12296E);
  box-shadow: 0 8px 16px -8px rgba(18,41,110,.8); transform: translateX(calc(var(--t, 0) * 100%)); transition: transform .4s cubic-bezier(.22,.8,.24,1); will-change: transform; }
.lp-ac-seg button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 12px 10px; min-height: 44px; border-radius: 999px;
  font-family: inherit; font-size: 14.5px; font-weight: 800; color: var(--navy); transition: color .3s ease; }
.lp-ac-seg button[aria-selected="true"] { color: #fff; }
.lp-ac-seg button:focus-visible { outline: 3px solid #C9A961; outline-offset: 2px; }
.lp-ac-pane { margin-top: 18px; }
.lp-ac-pane[hidden] { display: none !important; }
.lp-ac-pane.is-in { animation: lpac-in .35s cubic-bezier(.22,.8,.24,1); }
@keyframes lpac-in { from { opacity: 0; transform: translateY(8px); } }

/* the forms inside the card: one look for both */
.lp-ac-card .lp-joinform, .lp-ac-card .lp-joindone { padding: 0; background: none; border: 0; border-radius: 0; }
.lp-ac-card .lp-chosen { margin-bottom: 14px; background: rgba(232,213,162,.3); border: 1px solid rgba(201,169,97,.4); border-radius: 14px; }
.lp-ac-card .lp-googlebtn.is-lead { min-height: 52px; border-radius: 14px; border: 1.5px solid rgba(30,58,138,.18); box-shadow: 0 10px 22px -16px rgba(18,41,110,.6); }
.lp-ac-card .lp-joinhint { text-align: center; }
.lp-ac-card #loginCard { background: none; border: 0; padding: 0; width: auto; gap: 0; color: var(--ink); }
.lp-ac-card #joinForm label, .lp-ac-card #loginCard label { display: block; margin: 10px 0 0; font-size: 13px; font-weight: 700; color: #4B5568; }
.lp-ac-card #joinForm input, .lp-ac-card #loginCard input { display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 15px;
  color: var(--ink); background: #fff; border: 1.5px solid rgba(30,58,138,.16); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.lp-ac-card input::placeholder { color: #9AA3B5; font-weight: 500; }
.lp-ac-card #joinForm input:focus, .lp-ac-card #loginCard input:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(30,58,138,.12); }
.lp-ac-primary { display: flex; align-items: center; justify-content: center; margin-top: 16px; width: 100%; min-height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 800; color: #1A1407; text-decoration: none;
  background: linear-gradient(135deg, #E8D5A2, #C9A961); box-shadow: 0 12px 24px -12px rgba(138,110,62,.9); }
.lp-ac-primary:disabled { opacity: .6; cursor: default; }
.lp-ac-primary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.lp-ac-card #loginCard button.linkish { align-self: center; margin-top: 12px; text-decoration: none; font-size: 13.5px; font-weight: 700; }
.lp-ac-card .error, .lp-ac-card .note-ok, .lp-ac-card .note-hint { margin-top: 10px; font-size: 13px; }
.lp-ac-card .lp-joinfoot { text-align: center; }

.lp-ac-side { display: grid; gap: 12px; }
.lp-ac-pt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px;
  background: rgba(255,255,255,.75); border: 1px solid #fff; box-shadow: 0 16px 34px -24px rgba(18,41,110,.5); }
.lp-ac-pt i { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #1A1407; background: linear-gradient(135deg, #F3E6C2, #C9A961); }
.lp-ac-pt b { display: block; font-size: 15.5px; color: #0A1A4A; }
.lp-ac-pt span { font-size: 13.5px; color: #4B5568; line-height: 1.45; }
.lp-ac-play { display: inline-flex; align-items: center; gap: 8px; margin: 4px 4px 0; font-size: 14px; font-weight: 800; color: var(--navy); text-decoration: none; }
.lp-ac-play:hover { text-decoration: underline; }

.lp-ac-up { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.lp-ac-pre .lp-ac-up { opacity: 0; transform: translateY(22px); }
.lp-ac-d2 { transition-delay: .12s; } .lp-ac-d3 { transition-delay: .24s; } .lp-ac-d4 { transition-delay: .36s; }

@media (max-width: 860px) { .lp-ac-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (max-width: 480px) { .lp-ac-card { padding: 18px 16px 20px; } .lp-ac-sub { font-size: 15.5px; } }
@media (prefers-reduced-motion: reduce) {
  .lp-ac-pre .lp-ac-up { opacity: 1; transform: none; }
  .lp-ac-up, .lp-ac-pill { transition: none; }
  .lp-ac-h span, .lp-ac-pane.is-in { animation: none; }
}

/* ============================================================
   Questions — a glass accordion (owner, 2026-09-24)

   Blue again after the light account section, and it closes into white
   before the footer. Real <details>, so it works without script and with a
   keyboard; the script only keeps one open at a time. Classes lp-fq-.
   ============================================================ */

section.lp-band.lp-faqs {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: center;
  padding: 80px 16px 110px;
  background:
    radial-gradient(50% 40% at 30% 40%, rgba(120,170,255,.3), transparent 72%),
    linear-gradient(180deg, #EEF1F6 0%, #8EA3D6 5%, #2C55C4 13%, #1E3A8A 36%, #12296E 82%, #5C74B0 92%, #FFFFFF 100%);
}
.lp-fq-glow { position: absolute; border-radius: 50%; filter: blur(64px); z-index: -1; }
.lp-fq-glow.lp-fq-a { width: 340px; height: 340px; background: #3C6BF0; opacity: .5; right: -90px; top: 30%; }
.lp-fq-glow.lp-fq-b { width: 280px; height: 280px; background: #C9A961; opacity: .22; left: -60px; top: 62%; }
.lp-fq-tag { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.35); }
.lp-fq-h { margin: 16px auto 0; font-size: clamp(30px, 5.6vw, 50px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: #fff; text-wrap: balance; }
.lp-fq-h span { background: linear-gradient(100deg, #E8D5A2 0%, #C9A961 45%, #F3E6C2 60%, #E8D5A2 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lpac-sheen 6s ease-in-out infinite; }
.lp-fq-list { max-width: 820px; margin: 30px auto 0; display: grid; gap: 10px; text-align: left; }
.lp-fq-list details { border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 60%, rgba(255,255,255,.1) 100%);
  border: 1px solid rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 40px -28px rgba(0,8,40,.9); }
.lp-fq-list details[open] { background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.09) 60%, rgba(255,255,255,.14) 100%); }
.lp-fq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 16.5px; font-weight: 800; color: #fff; }
.lp-fq-list summary::-webkit-details-marker { display: none; }
.lp-fq-list summary:focus-visible { outline: 3px solid #C9A961; outline-offset: 2px; border-radius: 20px; }
.lp-fq-x { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(232,213,162,.18); border: 1px solid rgba(232,213,162,.45); color: #E8D5A2;
  transition: transform .35s cubic-bezier(.22,.8,.24,1); }
.lp-fq-list details[open] .lp-fq-x { transform: rotate(45deg); }
.lp-fq-ans { padding: 0 20px 18px; }
.lp-fq-list details[open] .lp-fq-ans { animation: lpfq-in .35s cubic-bezier(.22,.8,.24,1); }
@keyframes lpfq-in { from { opacity: 0; transform: translateY(-6px); } }
.lp-fq-ans p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: #DCE4F7; }
.lp-fq-ans p:last-child { margin-bottom: 0; }
.lp-fq-ans b { color: #fff; }
.lp-fq-ans a { color: #E8D5A2; font-weight: 700; }
.lp-fq-up { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.lp-fq-pre .lp-fq-up { opacity: 0; transform: translateY(22px); }
.lp-fq-d2 { transition-delay: .12s; } .lp-fq-d3 { transition-delay: .24s; }
@media (max-width: 480px) {
  section.lp-band.lp-faqs { padding: 64px 16px 96px; }
  .lp-fq-list summary { font-size: 15.5px; padding: 16px; }
  .lp-fq-ans { padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-fq-pre .lp-fq-up { opacity: 1; transform: none; }
  .lp-fq-up, .lp-fq-x { transition: none; }
  .lp-fq-h span, .lp-fq-list details[open] .lp-fq-ans { animation: none; }
}

/* ============================================================
   GET IT ON GOOGLE PLAY — the site's main action (owner, 2026-09-24)

   One component, `.lp-play`, used in every install slot on the page.

   GOOGLE'S OWN BADGE ONLY. Google's brand rules require the official
   "Get it on Google Play" artwork, unmodified, with the trademark line in the
   footer. It is downloaded from play.google.com/intl/en_us/badges — a site
   this repository's build machine cannot reach — so until the owner supplies
   `shared/google-play-badge.png`, each slot shows a plain text button with NO
   Play logo (a hand-drawn logo would be the very thing the rules forbid).
   When the file arrives, each slot's text becomes the <img> and gains
   `has-badge`; nothing else changes.

   THE FILE IN USE (2026-09-24) was supplied by the owner and cut out of a
   saved image — it arrived with a painted checkerboard behind it, which the
   crop removed. It is not Google's own download: replace
   `shared/google-play-badge.png` with the official PNG when convenient (same
   name, nothing else to change; crop Google's clear space off it first, since
   these rules size the badge itself). The width follows from the height.
   ============================================================ */

.lp-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-width: 180px;
  padding: 0 22px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  border: 1px solid #A6A6A6;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.lp-play:hover { background: #1b1b1b; }
.lp-play:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.lp-play.is-lg { height: 60px; min-width: 210px; font-size: 17px; }
.lp-play.is-sm { height: 44px; min-width: 150px; font-size: 14px; padding: 0 16px; }
.lp-play.has-badge {
  background: none;
  border: 0;
  padding: 0;
  min-width: 0;
}
.lp-play.has-badge img { display: block; height: 100%; width: auto; border-radius: 7%/24%; }
.lp-play.has-badge:hover { background: none; opacity: .88; }


/* ---------- the sticky bar (Android phones only) ----------
   Shown by the inline script at the foot of index.html, which checks the user
   agent, the width, whether the hero has scrolled away and whether it was
   dismissed. It carries the page's padding with it, so it never sits over the
   last thing on the page. */
.lp-playbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--lp-ink-line);
  box-shadow: 0 -12px 30px -18px rgba(15, 36, 102, .45);
}
.lp-playbar[data-show] { display: flex; animation: lp-rise .25s ease-out; }
@keyframes lp-rise { from { transform: translateY(100%); } }
.lp-playbar img.lp-playbar-mark { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.lp-playbar-say { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.3; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-playbar-say b { display: block; color: var(--ink); font-size: 14.5px; }
.lp-playbar-x {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--slate);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
body.has-playbar { padding-bottom: 76px; }
.lp-playbar .lp-play { min-width: 0; padding: 0 12px; font-size: 13px; }
.lp-playbar .lp-play.has-badge { padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .lp-playbar[data-show] { animation: none; }
}



/* ============================================================
   the features, in glass (owner, 2026-09-24)

   Ported from the approved rendition (artifact 1iGPmtc5RUa6wZZFFxzyWx).
   It replaces the old three-step "How LexFlow fits your practice" text and
   keeps its id, #what, so the nav's "How it works" still lands here.

   EVERY CLASS HERE IS PREFIXED lp-ft-, and every keyframe lpft-. The
   rendition used bare names (.card, .chip, .glass, .row) that would collide
   with the web app's own styles, which share this page. The colour tokens
   are scoped to the section for the same reason: --ink and friends mean
   something else in tokens.css.

   It starts on #1E3A8A, the colour the phones section ends on, and fades to
   white for #judge below — the three top sections are one blue surface.
   The ten tiles are real buttons in index.html; the script beside the
   section supplies the demos and the 4.2s auto-cycle, which a tap stops.
   ============================================================ */

.lp-ft-feat {
    --navy-0: #0A1A4A; --navy-1: #12296E; --navy: #1E3A8A; --blue: #2C55C4; --blue-2: #4A74DC;
    --gold: #C9A961; --gold-2: #E8D5A2;
    --ink: #0E1116; --white: #FFFFFF; --mist: #DCE4F7; --mist-2: #A9B8DE;
    --ok: #3DDC97; --warn: #FFB547; --bad: #FF6B6B;
  }

  /* ---------- the section ---------- */
  .lp-ft-feat {
    position: relative;
    overflow: hidden;
    padding: 64px 16px 72px;
    background: linear-gradient(180deg, #EAF0FC 0px, #4A74DC 90px, var(--navy) 240px, var(--navy-0) 100%);
    isolation: isolate;
  }
  /* The coloured light the glass bends. Three slow orbs; without them frosted
     glass on a flat colour looks like grey plastic. */
  .lp-ft-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .75; z-index: -1; will-change: transform; }
  .lp-ft-orb.lp-ft-a { width: 340px; height: 340px; background: #3C6BF0; left: -80px; top: 180px; animation: lpft-driftA 18s ease-in-out infinite; }
  .lp-ft-orb.lp-ft-b { width: 300px; height: 300px; background: #22B8E6; right: -90px; top: 420px; animation: lpft-driftB 22s ease-in-out infinite; opacity: .55; }
  .lp-ft-orb.lp-ft-c { width: 260px; height: 260px; background: var(--gold); left: 30%; bottom: -60px; animation: lpft-driftC 26s ease-in-out infinite; opacity: .45; }
  @keyframes lpft-driftA { 50% { transform: translate(120px, 80px) scale(1.15); } }
  @keyframes lpft-driftB { 50% { transform: translate(-110px, -60px) scale(.9); } }
  @keyframes lpft-driftC { 50% { transform: translate(-90px, -140px) scale(1.2); } }

  .lp-ft-head { text-align: center; margin: 0 0 28px; }
  .lp-ft-head .lp-ft-tag { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: #fff;
    background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); }
  .lp-ft-head h2 { margin: 16px 0 0; font-size: clamp(30px, 7vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
  .lp-ft-head h2 span { background: linear-gradient(90deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* ---------- liquid glass ---------- */
  .lp-ft-glass {
    --mx: 50%; --my: 0%;
    position: relative;
    background:
      radial-gradient(160px 120px at var(--mx) var(--my), rgba(255,255,255,.28), transparent 70%),
      linear-gradient(145deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.12) 100%);
    backdrop-filter: blur(18px) saturate(190%);
    -webkit-backdrop-filter: blur(18px) saturate(190%);
    border: 1px solid rgba(255,255,255,.30);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 -1px 0 rgba(255,255,255,.10),
      inset 0 0 0 1px rgba(255,255,255,.04),
      0 18px 40px -22px rgba(0, 8, 40, .8);
  }
  /* the curved edge highlight that makes glass read as glass */
  .lp-ft-glass::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 38%);
    mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor; mask-composite: exclude;
    padding: 1.5px;
  }

  .lp-ft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @media (min-width: 760px) { .lp-ft-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }

  .lp-ft-tile {
    border-radius: 22px;
    padding: 14px 14px 16px;
    min-height: 128px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
    text-align: left; color: #fff; font: inherit; cursor: pointer;
    transition: transform .35s cubic-bezier(.2,.8,.2,1.2), border-color .3s, box-shadow .3s, opacity .3s;
    opacity: .72;
    /* enter: rise and settle, staggered */
    animation: lpft-rise .7s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--i) * 60ms);
  }
  @keyframes lpft-rise { from { transform: translateY(18px) scale(.96); opacity: 0; } }
  .lp-ft-tile:hover { opacity: .92; }
  .lp-ft-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .lp-ft-tile[aria-pressed="true"] {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(255,255,255,.75);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      0 0 0 1.5px rgba(255,255,255,.55),
      0 22px 44px -18px rgba(0, 8, 40, .9),
      0 0 34px -6px rgba(120, 170, 255, .7);
  }
  .lp-ft-tile-top { display: flex; align-items: flex-start; justify-content: space-between; }
  .lp-ft-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.35); }
  .lp-ft-ico svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .lp-ft-check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.55); display: grid; place-items: center; transition: background .25s, border-color .25s; }
  .lp-ft-check svg { width: 14px; height: 14px; stroke: var(--navy); stroke-width: 3; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s .05s ease; }
  .lp-ft-tile[aria-pressed="true"] .lp-ft-check { background: #fff; border-color: #fff; }
  .lp-ft-tile[aria-pressed="true"] .lp-ft-check svg { stroke-dashoffset: 0; }
  .lp-ft-name { font-size: 14.5px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
  /* the auto-play progress along the bottom of the active tile */
  .lp-ft-bar { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; opacity: 0; }
  .lp-ft-tile[aria-pressed="true"] .lp-ft-bar { opacity: 1; }
  .lp-ft-bar i { display: block; height: 100%; width: 0; background: #fff; }
  .lp-ft-playing .lp-ft-tile[aria-pressed="true"] .lp-ft-bar i { animation: lpft-fill var(--dwell) linear forwards; }
  @keyframes lpft-fill { to { width: 100%; } }

  /* ---------- the stage: a larger glass pane showing the active feature ---------- */
  .lp-ft-stage { margin-bottom: 16px; border-radius: 28px; padding: 20px; min-height: 250px; display: grid; gap: 16px; align-items: center; }
  @media (min-width: 760px) { .lp-ft-stage { grid-template-columns: 1fr 1.25fr; padding: 28px 32px; min-height: 280px; } }
  .lp-ft-stage h3 { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.03em; }
  .lp-ft-stage p { margin: 0; color: var(--mist); font-size: 15px; line-height: 1.5; max-width: 42ch; }
  .lp-ft-demo { position: relative; min-height: 190px; display: grid; place-items: center; }
  .lp-ft-swap { animation: lpft-swapIn .5s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes lpft-swapIn { from { opacity: 0; transform: translateY(10px) scale(.98); filter: blur(6px); } }

  /* shared mini-UI pieces, drawn in the app's own shapes */
  .lp-ft-card { width: min(340px, 100%); border-radius: 18px; background: rgba(255,255,255,.96); color: var(--ink); padding: 14px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
  .lp-ft-row { display: flex; align-items: center; gap: 10px; }
  .lp-ft-muted { color: #5B6474; font-size: 12.5px; font-weight: 600; }
  .lp-ft-chip { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: #E3E9F8; color: var(--navy); }
  .lp-ft-chip.lp-ft-ok { background: #DCF5E8; color: #166534; } .lp-ft-chip.lp-ft-warn { background: #FDF0DA; color: #9A5B06; } .lp-ft-chip.lp-ft-bad { background: #FBE3E1; color: #B91C1C; }
  .lp-ft-serial { font-size: 34px; font-weight: 800; color: var(--navy); letter-spacing: -0.04em; line-height: 1; min-width: 56px; text-align: center; }
  .lp-ft-serial small { display: block; font-size: 9.5px; letter-spacing: .12em; color: #5B6474; margin-bottom: 2px; }
  .lp-ft-pop { animation: lpft-pop .5s cubic-bezier(.2,.9,.3,1.4) both; }
  @keyframes lpft-pop { from { transform: scale(.6); opacity: 0; } }
  .lp-ft-d1 { animation-delay: .35s; } .lp-ft-d2 { animation-delay: .7s; } .lp-ft-d3 { animation-delay: 1.05s; } .lp-ft-d4 { animation-delay: 1.4s; } .lp-ft-d5 { animation-delay: 1.75s; }
  .lp-ft-slide { animation: lpft-slide .55s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes lpft-slide { from { transform: translateX(26px); opacity: 0; } }
  .lp-ft-push { width: min(320px, 100%); border-radius: 18px; padding: 12px 14px; color: #fff; }
  .lp-ft-push .lp-ft-t { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--mist); }
  .lp-ft-push b { display: block; margin-top: 3px; font-size: 14.5px; }
  .lp-ft-push span { font-size: 12.5px; color: var(--mist); }

  /* todo */
  .lp-ft-todo li { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #ECEFF5; font-size: 14px; font-weight: 600; }
  .lp-ft-todo ul { margin: 0; padding: 0; }
  .lp-ft-todo .lp-ft-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #C5CDDD; position: relative; flex: none; }
  .lp-ft-todo .lp-ft-box::after { content: ''; position: absolute; inset: -2px; border-radius: 6px; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' lpft-fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; transform: scale(0); animation: lpft-tick .3s cubic-bezier(.2,.9,.3,1.4) forwards; }
  .lp-ft-todo li:nth-child(1) .lp-ft-box::after { animation-delay: .6s; } .lp-ft-todo li:nth-child(2) .lp-ft-box::after { animation-delay: 1.3s; } .lp-ft-todo li:nth-child(3) .lp-ft-box::after { animation-delay: 2s; }
  @keyframes lpft-tick { to { transform: scale(1); } }
  .lp-ft-todo li span { position: relative; }
  .lp-ft-todo li span::after { content: ''; position: absolute; left: 0; top: 55%; height: 1.5px; width: 0; background: #8A94A6; animation: lpft-strike .35s ease forwards; }
  .lp-ft-todo li:nth-child(1) span::after { animation-delay: .75s; } .lp-ft-todo li:nth-child(2) span::after { animation-delay: 1.45s; } .lp-ft-todo li:nth-child(3) span::after { animation-delay: 2.15s; }
  @keyframes lpft-strike { to { width: 100%; } }

  /* calendar */
  .lp-ft-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 11.5px; font-weight: 700; color: #16181D; }
  .lp-ft-cal b { color: #5B6474; font-size: 10px; letter-spacing: .06em; }
  .lp-ft-cal span { padding: 6px 0 9px; border-radius: 8px; position: relative; }
  .lp-ft-cal span.lp-ft-today { background: var(--navy); color: #fff; }
  .lp-ft-cal i { position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--navy); transform: scale(0); animation: lpft-tick .3s cubic-bezier(.2,.9,.3,1.4) forwards; }
  .lp-ft-cal i.lp-ft-r { background: #B91C1C; }
  .lp-ft-cal span.lp-ft-today i { background: #fff; }

  /* search */
  .lp-ft-q { display: flex; align-items: center; gap: 8px; border: 1.5px solid #D5DBE7; border-radius: 12px; padding: 9px 11px; font-size: 13.5px; font-weight: 600; }
  .lp-ft-q .lp-ft-typed { overflow: hidden; white-space: nowrap; width: 0; animation: lpft-type 1.4s steps(24) .3s forwards; border-right: 2px solid var(--navy); }
  @keyframes lpft-type { to { width: 24ch; } }
  .lp-ft-res { margin-top: 10px; display: grid; gap: 8px; }
  .lp-ft-res div { border-radius: 10px; background: #F3F5FA; padding: 9px 10px; }
  .lp-ft-res i { display: block; height: 7px; border-radius: 4px; background: #CDD6E8; margin-top: 6px; }
  .lp-ft-res mark { background: #FDF0DA; color: #7A4A06; padding: 0 3px; border-radius: 3px; font-weight: 800; }

  /* ledger */
  .lp-ft-ledger div { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; padding: 7px 0; border-bottom: 1px solid #ECEFF5; }
  .lp-ft-ledger .lp-ft-tot { border: 0; font-size: 15px; color: var(--navy); }
  .lp-ft-meter { height: 9px; border-radius: 6px; background: #E3E9F8; overflow: hidden; margin-top: 8px; }
  .lp-ft-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--navy), var(--blue-2)); border-radius: 6px; animation: lpft-grow 1.4s .5s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes lpft-grow { to { width: 68%; } }

  /* ladder */
  .lp-ft-ladder { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .lp-ft-ladder span { font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: #EEF1F7; color: #8A94A6; animation: lpft-lit .3s forwards; }
  @keyframes lpft-lit { to { background: var(--navy); color: #fff; } }

  /* countdown ring */
  .lp-ft-ring { --p: 0; width: 86px; height: 86px; border-radius: 50%; background: conic-gradient(#B91C1C calc(var(--p) * 1%), #F1D5D3 0); display: grid; place-items: center; animation: lpft-ring 1.6s .3s ease forwards; }
  @property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
  @keyframes lpft-ring { to { --p: 80; } }
  .lp-ft-ring div { width: 66px; height: 66px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; font-weight: 800; color: #B91C1C; line-height: 1; font-size: 22px; }
  .lp-ft-ring small { font-size: 9.5px; color: #5B6474; letter-spacing: .06em; }


  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
    .lp-ft-q .lp-ft-typed { width: 24ch; }
  }

.lp-ft-feat { position: relative; overflow: hidden; isolation: isolate; color: #fff;
  padding: 36px 16px 110px;
  background: linear-gradient(180deg, #1E3A8A 0%, #16307A 30%, #0F2466 70%, #12296E 88%, #EEF1F6 100%); }
.lp-ft-wrap { max-width: 1100px; margin: 0 auto; }
.lp-ft-feat .lp-ft-head { margin-bottom: 22px; }
.lp-ft-orb.lp-ft-a { top: 60px; } .lp-ft-orb.lp-ft-b { top: 360px; }
.lp-ft-tile { border-width: 1px; border-style: solid; }

/* ============================================================
   the boot failure notice

   A module script whose graph cannot be fetched executes nothing, and because
   .has-session hides the front page before first paint, a signed-in advocate is
   left looking at a blank white document. That shipped: screens/matters.js was
   missing from the host and lexflowbd.com served a dead page to everyone who
   had ever signed in. index.html now watches for it and puts this at the top.

   Deliberately alarming to look at and calm to read. The one thing it has to
   say is that the CASES are fine — an advocate whose practice lives in here and
   who meets a broken page will assume the worst.
   ============================================================ */

.lp-bootfail {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  background: var(--amber-tint);
  border-bottom: 2px solid var(--amber);
  color: var(--amber);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}
.lp-bootfail a { color: inherit; font-weight: 800; }

/* ============================================================
   the three states, on a dark band

   .lp-state carries the app's own fixed meanings — navy listed, grey not
   listed, amber not published — and those must not change (web/README.md).
   What changes on a dark section is only the LUMINANCE: three near-white chips
   on #0C1018 read as three holes punched in the page. Here the chip becomes a
   raised dark card and the meaning moves into the label and the left edge,
   brightened enough to clear 4.5:1 on ink-2.

   Gold is deliberately absent. It never carries a status.
   ============================================================ */

/* ============================================================
   the standalone statement

   One disclaimer, in the body, where three cards used to say the same thing
   three ways. The full wording still lives in the footer — that one is compared
   by Google against the Play listing and must not be trimmed.
   ============================================================ */

.lp-standalone {
  margin: var(--s-6) 0 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--navy);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--slate);
  font-size: 13.5px;
  line-height: 1.65;
}
.lp-standalone b { color: var(--ink); }

/* ============================================================
   get the app
   ============================================================ */

.lp-getgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  margin-top: var(--s-6);
}
.lp-getmain .lp-btn { margin-bottom: var(--s-4); }
.lp-getaside {
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--mist, #F6F7F9);
}
.lp-getaside h3 {
  margin: 0 0 var(--s-3);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.lp-getaside p { margin: 0 0 var(--s-3); color: var(--slate); font-size: 14px; line-height: 1.6; }
.lp-getaside p:last-child { margin-bottom: 0; }
.lp-getnote {
  color: var(--slate);
  font-size: 13px;
  line-height: 1.6;
  max-width: 46ch;
}

/* ============================================================
   questions

   <details>, not a JavaScript accordion. It opens with the keyboard, it is
   found by the browser's own find-in-page even while shut, and it still works
   on the day app.js does not load — which is the failure this page has already
   had once.
   ============================================================ */

.lp-faq {
  margin-top: var(--s-6);
  border-top: 1px solid var(--hairline);
}
.lp-faq details {
  border-bottom: 1px solid var(--hairline);
}
.lp-faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) 34px var(--s-4) 0;
  position: relative;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.15s ease;
}
.lp-faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.lp-faq summary:hover { color: var(--navy); }
.lp-faq summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.lp-faq details p {
  margin: 0;
  padding: 0 var(--s-6) var(--s-5) 0;
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 74ch;
}

/* ============================================================
   the second nav CTA
   ============================================================ */

.lp-navlinks a.lp-navcta-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1A1407;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
}
.lp-navlinks a.lp-navcta-gold:hover { background: var(--gold-bright); }

@media (max-width: 980px) {
  .lp-getgrid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

@media (max-width: 720px) {
  /* BOTH CTAs SURVIVE THE PHONE, and that is a change. "Sign in" used to be
     dropped here on the grounds that the hero carried a sign-in button of its
     own — and it no longer does: the hero's two buttons are now the two ways to
     CREATE an account, which is no use at all to somebody who already has one.
     An existing advocate opening this on a phone would have been left with a
     footer link, and hunting for the way back into your own case file is the
     one thing a sign-in page may never make you do.
     THEY DID NOT FIT, and the note that used to end here said they did:
     "at 375px the brand, the gold button and the ghost button leave room to
     spare." It counted three things and the bar holds four. The side-menu
     button arrived the same day, out of the 980px query above, and was never
     added to the sum. Measured at 375px the row wanted 371px of a 343px wrap —
     brand 109, gold 99, ghost 73, menu button 42, and a 24px gap between the
     two CTAs that was still the desktop --s-5. So both labels broke over two
     lines and the CTAs stood 63px tall beside a 42px menu button: three
     controls at three heights, in the first thing a visitor sees.
     The rule that replaces the arithmetic: A LABEL IN THIS BAR NEVER WRAPS.
     Every control in it is given ONE height here rather than left to fall out
     of padding and whatever the text happens to measure, so a longer word in
     some future CTA runs out of room visibly instead of silently doubling the
     height of the bar. */
  /* The height and the nowrap come from the 1060px query above; what is left
     here is only the space-saving, which a phone needs and a tablet does not. */
  .lp-navlinks { gap: var(--s-2); }
  .lp-navlinks a.lp-navcta { font-size: 13.5px; }
  .lp-faq summary { font-size: 15px; }
  .lp-faq details p { padding-right: 0; }
}

/* ============================================================
   packages

   QUIET AUTHORITY, which is not a new idea here — it is DESIGN.md principle 5
   already written down: one accent, hairline borders instead of shadows, no
   gradients, and sleekness that comes from spacing and type rather than from
   effects. A price list is exactly where a product is tempted to shout, and
   exactly where an audience of lawyers is least persuaded by shouting.

   MOBILE FIRST, deliberately: an advocate paying by bKash is doing it on the
   phone that has bKash on it. The stacked single column is the real layout and
   the three-across desktop version is the enhancement, not the other way round.

   MOTION stays inside DESIGN.md's budget — 150-250ms, ease-out, state changes
   only, no entrance choreography — and every transition here is switched off
   under prefers-reduced-motion.
   ============================================================ */

.lp-period {
  display: inline-flex;
  margin: var(--s-5) 0 var(--s-5);
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--mist);
}
.lp-period button {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 180ms ease-out, background 180ms ease-out;
}
.lp-period button.on {
  background: var(--paper);
  color: var(--navy);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.06);
}
.lp-period button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.lp-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  transition: border-color 180ms ease-out, transform 180ms ease-out;
}
/* Hairline, not shadow. The featured card is marked by a heavier navy edge and
   nothing else — no lift, no glow, no second colour. */
.lp-plan.is-featured { border-color: var(--navy); border-width: 1.5px; }

.lp-planmark {
  position: absolute;
  top: -10px;
  left: var(--s-5);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-plan h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.lp-planlede {
  margin: 4px 0 var(--s-4);
  color: var(--slate);
  font-size: 13.5px;
  line-height: 1.5;
}

.lp-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: 4px;
}
.lp-price b {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  /* The figure is the one thing on the card that changes as the period toggle
     moves, so it is the one thing allowed to animate. */
  transition: opacity 140ms ease-out;
}
.lp-price.is-swapping b { opacity: 0.25; }
.lp-cur { font-size: 20px; font-weight: 700; color: var(--ink); }
.lp-per { font-size: 13px; font-weight: 600; color: var(--slate); }

.lp-planfoot {
  margin: 0 0 var(--s-4);
  font-size: 12.5px;
  color: var(--slate);
}

.lp-plan ul {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.lp-plan li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate);
}
.lp-plan li b { color: var(--ink); font-weight: 700; }
.lp-plan li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg);
}
/* What a package does NOT include, said plainly rather than omitted. A feature
   list that only lists what you get makes the reader work out the rest. */
.lp-plan li.no { color: var(--grey); }
.lp-plan li.no::before {
  border: 0;
  top: 8px;
  left: 3px;
  width: 9px;
  height: 2px;
  background: var(--grey);
  transform: none;
}

.lp-planbtn {
  display: block;
  text-align: center;
  padding: 13px 18px;
  border-radius: var(--r-btn);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: background 180ms ease-out;
}
.lp-planbtn:hover { background: #16305c; }
.lp-planbtn-quiet {
  background: var(--navy-tint);
  color: var(--navy);
}
.lp-planbtn-quiet:hover { background: #dfe8f5; }
.lp-planbtn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.lp-pricenote,
.lp-pricepay {
  margin: var(--s-5) 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 74ch;
}
.lp-pricenote b, .lp-pricepay b { color: var(--ink); }

/* The period toggle is the only control in this section and it is tapped with a
   thumb, so on a phone it gets a thumb-sized target and the full width. 35px
   was the desktop size carried down, which is under the 44px a thumb needs. */
@media (max-width: 560px) {
  .lp-period { display: flex; width: 100%; }
  .lp-period button { flex: 1; padding: 13px 10px; }
}

/* Two by two from a tablet up: there are FOUR packages now (Free, LexFlow One,
   Light, Pro — migration 058), and four across at 860px gives each card about
   190px, which is narrower than the price on it. */
@media (min-width: 700px) {
  .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}

@media (min-width: 1100px) {
  .lp-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
  /* Only on a screen wide enough for all four to sit side by side does lifting
     the featured one mean anything. Stacked or paired, a lift is just a
     misaligned card. */
  .lp-plan.is-featured { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-period button,
  .lp-plan,
  .lp-price b,
  .lp-planbtn { transition: none; }
  .lp-plan.is-featured { transform: none; }
}

/* ============================================================
   create an account

   Same restraint as the packages above it. The form is the widest thing on the
   section because it is what the visitor came to do; the "what happens next"
   column beside it exists to answer the two questions that otherwise become
   emails — is the app free, and why does the web need paying for.
   ============================================================ */

.lp-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-5);
  align-items: start;
}

.lp-joinform,
.lp-joindone {
  padding: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

/* What they are signing up for, carried down from the card they pressed. */
.lp-chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  margin-bottom: var(--s-4);
  background: var(--navy-tint);
  border-radius: var(--r-input);
  font-size: 13px;
}
.lp-chosen > span:first-child {
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.lp-chosen b { font-weight: 800; color: var(--navy); }
.lp-chosenprice { color: var(--navy); font-variant-numeric: tabular-nums; }
.lp-chosenchange { margin-left: auto; color: var(--navy); font-weight: 700; }

.lp-googlebtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
.lp-googlebtn:hover { border-color: var(--slate); background: var(--mist); }
.lp-googlebtn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* The lead action on the signup card. Bigger and outlined in navy, so the eye
   reaches it before the email form — Google is the only path that signs the
   advocate in on the spot, and every other one sends them to their inbox.
   Google's own guidelines want their mark on white, so this stays a white
   surface and takes its emphasis from the border and the size. */
.lp-googlebtn.is-lead {
  padding: 16px 18px;
  font-size: 15.5px;
  border: 1.5px solid var(--navy);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.lp-googlebtn.is-lead:hover { border-color: var(--navy); background: var(--navy-tint); }

.lp-joinhint {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.5;
}

#joinForm label {
  display: block;
  margin-bottom: var(--s-3);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
#joinForm input {
  display: block;
  width: 100%;
  margin-top: 5px;
  font: inherit;
  padding: 12px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  background: var(--paper);
  color: var(--ink);
}
#joinForm input:focus {
  outline: 0;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-tint);
}
#joinForm .lp-planbtn { width: 100%; margin-top: var(--s-4); border: 0; font: inherit;
                        font-weight: 700; font-size: 14.5px; cursor: pointer; }
#joinForm .error { margin-top: var(--s-3); font-size: 13px; }

.lp-joinfoot {
  margin: var(--s-4) 0 0;
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.6;
}
.lp-joinfoot a { color: var(--navy); font-weight: 700; }

.lp-joindone h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--ink); }
.lp-joindone p { margin: 0 0 var(--s-4); color: var(--slate); font-size: 14px; line-height: 1.6; }
.lp-joindone .lp-planbtn { display: block; }

.lp-joinaside {
  padding: var(--s-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--mist);
}
.lp-joinaside h3 { margin: 0 0 var(--s-3); font-size: 14px; font-weight: 800; color: var(--ink); }
.lp-joinsteps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate);
}
.lp-joinsteps b { color: var(--ink); font-weight: 700; }
.lp-joinnote {
  margin: var(--s-4) 0 0;
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.55;
}

@media (min-width: 860px) {
  .lp-join { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-googlebtn { transition: none; }
}

/* ============================================================
   The comparison table on pricing.html
   ============================================================ */

/* The comparison table on pricing.html. Row headers carry the weight — the
   first column is what is being compared, and "Courts watched" is the row the
   whole table exists for. */
.lp-compare { margin: var(--s-6) 0 var(--s-5); }
.lp-compare caption { text-align: left; padding-bottom: var(--s-3); }
.lp-compare th[scope='row'] { text-align: left; font-weight: 700; white-space: nowrap; }
.lp-compare td { text-align: center; font-variant-numeric: tabular-nums; }


/* ============================================================
   ONE CONTROL SIZE ON A PHONE (2026-09-06)

   An audit of this page at 375px found eight different control heights on the
   one document — 63, 56, 52, 47, 46, 45, 44 and 40 — and a header whose two
   buttons had silently grown to 63px because their labels wrapped. None of it
   was a bug in any single rule. It is what happens when a page is built out of
   two style systems (the lp-* marketing set here, and base.css's own input /
   button.primary / button.google, which the sign-in card borrows) and neither
   is ever asked what the OTHER one measures at a phone width.

   So this section is deliberately the LAST thing in the file and deliberately
   all in one place: it is not new styling, it is the page agreeing with itself
   below 560px. Three rules, and they are worth stating because the next person
   adding a control will otherwise re-derive them one at a time:

     1. A control a thumb presses is at least 44px tall. That is Apple's and
        Material's number and it is not negotiable for an audience DESIGN.md
        describes as senior advocates holding the phone at arm's length.
     2. A field a thumb types into is 16px or larger, because iOS Safari zooms
        the whole viewport when it focuses anything smaller and the visitor has
        to pinch back out to see what they typed. base.css already knew this —
        it is written out at #trxId / #senderMsisdn for the payment form — and
        the rule simply never reached the two forms that every visitor meets
        first.
     3. Buttons stacked one above another are the same width. Three left-
        aligned buttons at 234, 192 and 285 pixels read as a layout failure,
        not as a hierarchy.
   ============================================================ */


@media (max-width: 560px) {

  /* The card actions. Between them the sign-up and sign-in cards were showing
     47, 46, 45 and 44px controls stacked within a few centimetres of each
     other; nobody would name the difference and everybody would feel it.
     .lp-googlebtn.is-lead keeps its 56px — that one is deliberately the
     largest thing on the signup card and says so in its own comment. */
  .lp-planbtn,
  .lp-googlebtn,
  #loginCard button.primary,
  #loginCard button.google {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Rule 2. #joinForm's fields inherit 13px and #loginCard's inherit 12px from
     the label they sit inside, and both put an advocate through a zoom-in they
     did not ask for at the exact moment they are typing an email address. */
  #joinForm input,
  #loginCard input {
    font-size: 16px;
    /* 12px, not the 13px the payment form uses, so the field lands on the same
       48px as the buttons above and below it rather than three pixels off. */
    padding: 12px 13px;
  }

  /* Rule 1, for the links that are ACTIONS rather than words in a sentence.
     "Forgot password?" was 21px tall, "Change" 19px, "Create an account" 17px,
     and the footer row 21px. Quiet is a matter of weight and colour, which
     none of these lose here; small is a matter of whether a thumb can land on
     it, which is a different question and had been answered wrong.
     Links inside a running sentence are left as they are on purpose — the
     "Create an account" in #loginCard .foot, .lp-joinfoot, .lp-disclaimer.
     Padding those out would push the lines of the paragraph they belong to
     apart, and WCAG 2.5.8 exempts them for exactly that reason. The test is
     not how big the link is, it is whether it is a CONTROL sitting on its own
     or a few words inside a sentence somebody is reading. */
  #loginCard button.linkish,
  .lp-footlinks a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* "Change" is a control on its own — the way back to the price list from the
     strip naming the package being bought — so it earns the target. It takes
     it in padding cancelled by an equal negative margin, though, rather than
     in height: the strip is one line of text, and a 44px child inside it drove
     the whole box from 41px to 66px. What the thumb lands on grows; what the
     eye sees does not move. */
  .lp-chosenchange {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 13px 0;
    margin-top: -13px;
    margin-bottom: -13px;
  }
}

/* THE COMPARISON TABLE KEEPS ITS ROW LABELS WHILE IT SCROLLS.

   The note above this in the file says that on a phone "each package becomes
   its own block with its own heading". That was the intention and it was never
   built — the table is still four columns 650px wide inside .tablewrap's
   overflow-x, on a 375px screen. Scrolling it sideways is survivable; scrolling
   it sideways with the first column gone is not, because what is left is
   "৳1,000 ৳3,000 ৳5,500" with nothing on screen to say which row that is, on
   the one table where the row — "Courts watched" — is the whole point.
   Pinning the row header is the cheap half of the intended fix and it removes
   the actual failure. Rebuilding the table as stacked blocks is still open. */
@media (max-width: 640px) {
  /* .lp-compare sits ON the .tablewrap div, not inside it. */
  .lp-compare { scrollbar-width: thin; }
  .lp-compare th[scope='row'] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
    box-shadow: 1px 0 0 var(--hairline);
  }
}

/* ============================================================
   THE CHROME, IN THE PAGE'S DESIGN LANGUAGE (owner, 2026-09-24)

   The top bar, the side menu and the footer, redone to match the sections
   between them: deep blue glass, gold for the one action that matters, soft
   motion. This block comes AFTER the original header / side menu / footer
   rules and overrides them; the markup and ids are unchanged, so the inline
   menu script (which must never depend on a module) needs nothing new.
   ============================================================ */

/* ---------- the top bar ---------- */
/* Over the hero it stays see-through, as before. Once the hero has scrolled
   away (.is-solid) it becomes a floating glass bar rather than a flat strip.
   The total height never changes (8 + 60 + 8 = 76, --lp-navh), so toggling
   it cannot shift the page underneath. */
.lp-nav, .lp-nav.is-solid { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.lp-nav .lp-wrap {
  border: 1px solid transparent; border-radius: 20px;
  transition: height .3s ease, margin .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.lp-nav.is-solid .lp-wrap {
  height: 60px; margin-top: 8px; margin-bottom: 8px;
  max-width: calc(var(--lp-max) + 16px); padding: 0 12px 0 14px;
  background: linear-gradient(135deg, rgba(30, 58, 138, .86), rgba(10, 26, 74, .9));
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 40px -22px rgba(0, 8, 40, .85);
}
@media (max-width: 1160px) { .lp-nav.is-solid .lp-wrap { margin-left: 10px; margin-right: 10px; } }
.lp-nav.is-solid .lp-brand img { width: 40px; height: 40px; border-radius: 11px; }
.lp-nav.is-solid .lp-brand { font-size: 23px; }
.lp-navlinks { gap: 4px; }
.lp-navlinks a:not(.lp-navcta) {
  padding: 8px 14px; border: 0; border-radius: 999px; color: #DCE4F7;
  transition: background-color .2s ease, color .2s ease;
}
.lp-navlinks a:not(.lp-navcta):hover { color: #fff; background: rgba(255, 255, 255, .12); border: 0; }
.lp-navlinks a.lp-navcta { margin-left: 6px; }
.lp-navlinks a.lp-navcta-gold { box-shadow: 0 10px 22px -12px rgba(201, 169, 97, .9); }
.lp-navbtn { width: 46px; height: 46px; border-radius: 14px; }

/* ---------- the side menu ---------- */
/* A deep-blue glass panel sliding in from the right; the links arrive one after
   another. Opened by the same script as before (it sets [data-open]). */
.lp-side {
  width: min(340px, 88vw); padding: 16px 18px 24px; gap: 18px;
  color: #fff; border-left: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(70% 40% at 100% 0%, rgba(120, 170, 255, .28), transparent 70%),
    radial-gradient(60% 30% at 0% 100%, rgba(201, 169, 97, .22), transparent 70%),
    linear-gradient(170deg, #1E3A8A 0%, #12296E 55%, #0A1A4A 100%);
  box-shadow: -30px 0 60px -30px rgba(0, 8, 40, .9);
}
.lp-side[data-open] { animation: lpchrome-slide .38s cubic-bezier(.22, .8, .24, 1); }
@keyframes lpchrome-slide { from { transform: translateX(100%); } }
.lp-side-title { color: rgba(220, 228, 247, .7); letter-spacing: .16em; }
.lp-side-x {
  width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 26px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
}
.lp-side-links { gap: 6px; }
.lp-side-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px;
  color: #fff; font-size: 16.5px; font-weight: 700;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
}
.lp-side-links a:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lp-side-links a::after {
  content: ''; width: 8px; height: 8px; border-top: 2px solid #E8D5A2; border-right: 2px solid #E8D5A2;
  transform: rotate(45deg); opacity: .8;
}
.lp-side-links a:hover { background: rgba(255, 255, 255, .16); }
.lp-side[data-open] .lp-side-links a { animation: lpchrome-in .45s cubic-bezier(.22, .8, .24, 1) both; }
.lp-side[data-open] .lp-side-links a:nth-child(2) { animation-delay: .04s; }
.lp-side[data-open] .lp-side-links a:nth-child(3) { animation-delay: .08s; }
.lp-side[data-open] .lp-side-links a:nth-child(4) { animation-delay: .12s; }
.lp-side[data-open] .lp-side-links a:nth-child(5) { animation-delay: .16s; }
.lp-side[data-open] .lp-side-links a:nth-child(6) { animation-delay: .2s; }
.lp-side[data-open] .lp-side-links a:nth-child(7) { animation-delay: .24s; }
@keyframes lpchrome-in { from { opacity: 0; transform: translateX(18px); } }
.lp-side-actions { gap: 10px; }
.lp-side-actions .lp-play { align-self: center; height: 52px; }
.lp-side-cta {
  padding: 14px; border-radius: 14px; font-size: 15px; font-weight: 800;
  color: #fff; background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .3);
}
/* The last action is Sign in: gold, the one filled button in the drawer. */
.lp-side-actions .lp-side-cta:last-child {
  color: #1A1407; border-color: #C9A961;
  background: linear-gradient(135deg, #E8D5A2, #C9A961); box-shadow: 0 12px 24px -12px rgba(138, 110, 62, .9);
}
.lp-side-foot { color: rgba(220, 228, 247, .7); }
.lp-scrim { background: rgba(6, 14, 40, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---------- the footer ---------- */
.lp-foot {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 64px 0 28px; border-top: 0; color: rgba(220, 228, 247, .78);
  background:
    radial-gradient(40% 50% at 90% 0%, rgba(120, 170, 255, .22), transparent 70%),
    radial-gradient(35% 45% at 5% 100%, rgba(201, 169, 97, .16), transparent 70%),
    linear-gradient(180deg, #12296E 0%, #0C1D52 55%, #0A1A4A 100%);
}
.lp-foot a { color: #fff; text-decoration: none; }
.lp-foot .lp-brand { color: #fff; font-size: 24px; margin: 0; }
.lp-foot .lp-brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25); }
.lp-foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.lp-foot-about p { margin: 14px 0 18px; max-width: 34ch; font-size: 14px; line-height: 1.6; color: rgba(220, 228, 247, .78); }
.lp-foot-app {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 800; color: #1A1407 !important;
  background: linear-gradient(135deg, #E8D5A2, #C9A961); box-shadow: 0 12px 24px -14px rgba(201, 169, 97, .9);
}
.lp-foot-col h3 { margin: 6px 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #E8D5A2; }
.lp-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-foot-col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .88); transition: color .2s ease; }
.lp-foot-col a:hover { color: #E8D5A2; }
.lp-foot-legal { margin-top: 40px; display: grid; gap: 12px; }
.lp-foot .lp-disclaimer {
  margin: 0; max-width: none; padding: 14px 16px; border-left: 0; border-radius: 16px;
  font-size: 12.5px; line-height: 1.6; color: rgba(220, 228, 247, .72);
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12);
}
.lp-foot .lp-disclaimer a { color: #E8D5A2; }
.lp-foot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12.5px; color: rgba(220, 228, 247, .6);
}
@media (max-width: 980px) {
  .lp-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .lp-foot-about { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .lp-foot { padding: 48px 0 24px; }
  .lp-foot-col a { min-height: 44px; }
}

/* ---------- the plain pages: about, terms, support ---------- */
.lp-pagehero {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #fff;
  margin-top: calc(-1 * var(--lp-navh)); padding: calc(var(--lp-navh) + 56px) 16px 110px;
  background:
    radial-gradient(50% 60% at 70% 30%, rgba(120, 170, 255, .3), transparent 70%),
    linear-gradient(180deg, #0A1A4A 0%, #12296E 40%, #1E3A8A 75%, #F4F6FA 100%);
}
.lp-pagehero .lp-pagetag {
  display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .35);
}
.lp-pagehero h1 { margin: 16px auto 0; max-width: 18ch; font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; }
.lp-pagehero h1 span {
  background: linear-gradient(100deg, #E8D5A2 0%, #C9A961 45%, #F3E6C2 60%, #E8D5A2 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lpac-sheen 6s ease-in-out infinite;
}
.lp-pagehero p { margin: 16px auto 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: #DCE4F7; }
.lp-pagebody { background: #F4F6FA; padding: 0 16px 72px; }
.lp-prose {
  position: relative; max-width: 820px; margin: -70px auto 0; padding: 34px 36px; border-radius: 28px; color: var(--ink);
  background: #fff; border: 1px solid #fff; box-shadow: 0 36px 70px -40px rgba(18, 41, 110, .45), 0 0 0 1px rgba(30, 58, 138, .06);
}
.lp-prose h2 { margin: 30px 0 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #0A1A4A; }
.lp-prose h2:first-child { margin-top: 0; }
.lp-prose p, .lp-prose li { font-size: 15.5px; line-height: 1.7; color: #344054; }
.lp-prose ul { padding-left: 20px; }
.lp-prose a { color: var(--navy); font-weight: 700; }
.lp-prose .lp-updated { font-size: 13px; color: #6B7385; margin: 0 0 18px; }
.lp-prose .lp-notice {
  padding: 14px 16px; border-radius: 14px; background: rgba(232, 213, 162, .3); border: 1px solid rgba(201, 169, 97, .45);
  font-size: 14px; color: #5B4A26;
}
.lp-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; }
.lp-values div { padding: 16px; border-radius: 18px; background: #F6F8FC; border: 1px solid rgba(30, 58, 138, .08); }
.lp-values b { display: block; color: #0A1A4A; font-size: 15px; margin-bottom: 4px; }
.lp-values span { font-size: 13.5px; line-height: 1.5; color: #4B5568; }
@media (max-width: 720px) {
  .lp-prose { padding: 24px 20px; margin-top: -60px; }
  .lp-values { grid-template-columns: minmax(0, 1fr); }
}

/* the support page */
.lp-sp-grid { max-width: 980px; margin: -70px auto 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; align-items: start; position: relative; }
.lp-sp-card { padding: 24px; border-radius: 28px; background: #fff; border: 1px solid #fff; box-shadow: 0 36px 70px -40px rgba(18, 41, 110, .45), 0 0 0 1px rgba(30, 58, 138, .06); }
.lp-sp-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #0A1A4A; }
.lp-sp-card > p { margin: 0 0 16px; font-size: 14.5px; color: #4B5568; line-height: 1.55; }
.lp-sp-kinds { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 5px; border-radius: 999px; background: #EEF1F7; box-shadow: inset 0 0 0 1px rgba(30, 58, 138, .08); }
.lp-sp-kinds::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px;
  background: linear-gradient(135deg, #1E3A8A, #12296E); box-shadow: 0 8px 16px -8px rgba(18, 41, 110, .8);
  transform: translateX(calc(var(--k, 0) * 100%)); transition: transform .4s cubic-bezier(.22, .8, .24, 1); }
.lp-sp-kinds button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; min-height: 44px; padding: 10px 6px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 800; color: var(--navy); transition: color .3s ease; }
.lp-sp-kinds button[aria-pressed="true"] { color: #fff; }
.lp-sp-kinds button:focus-visible { outline: 3px solid #C9A961; outline-offset: 2px; }
.lp-sp-card label { display: block; margin: 12px 0 0; font-size: 13px; font-weight: 700; color: #4B5568; }
.lp-sp-card input, .lp-sp-card textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(30, 58, 138, .16); outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.lp-sp-card input { min-height: 48px; }
.lp-sp-card textarea { min-height: 140px; resize: vertical; }
.lp-sp-card input::placeholder, .lp-sp-card textarea::placeholder { color: #9AA3B5; font-weight: 500; }
.lp-sp-card input:focus, .lp-sp-card textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(30, 58, 138, .12); }
.lp-sp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lp-sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-sp-signedin { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(30, 58, 138, .07); font-size: 13.5px; color: #253046; }
.lp-sp-note { margin: 12px 0 0; font-size: 12.5px; color: #6B7385; text-align: center; }
.lp-sp-note a { color: var(--navy); font-weight: 700; }
.lp-sp-done { text-align: center; padding: 20px 6px; }
.lp-sp-done i { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #1A1407; background: linear-gradient(135deg, #F3E6C2, #C9A961); }
.lp-sp-done h2 { margin-top: 14px; }
.lp-sp-side { display: grid; gap: 12px; }
.lp-sp-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; text-decoration: none;
  background: #fff; border: 1px solid #fff; box-shadow: 0 16px 34px -24px rgba(18, 41, 110, .5); color: var(--ink); }
.lp-sp-tile i { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #1A1407; background: linear-gradient(135deg, #F3E6C2, #C9A961); }
.lp-sp-tile b { display: block; font-size: 15.5px; color: #0A1A4A; }
.lp-sp-tile span { font-size: 13.5px; color: #4B5568; line-height: 1.45; }
@media (max-width: 860px) { .lp-sp-grid { grid-template-columns: minmax(0, 1fr); margin-top: -60px; } }
@media (max-width: 480px) { .lp-sp-two { grid-template-columns: minmax(0, 1fr); gap: 0; } .lp-sp-card { padding: 20px 16px; } }

@media (prefers-reduced-motion: reduce) {
  .lp-nav .lp-wrap, .lp-sp-kinds::before { transition: none; }
  .lp-side[data-open], .lp-side[data-open] .lp-side-links a, .lp-pagehero h1 span { animation: none; }
}


/* ============================================================
   RHYTHM AND RESTRAINT (owner, 2026-09-24)

   The last pass over the whole page, after every section had been built on
   its own: "a clean website for professionals". Three rules, applied here
   rather than edited into each section so they can be read in one place.

   1. ONE RHYTHM. Section padding and the colour hand-offs between blue and
      light were each set separately and ran to 150px of fade in places; they
      are brought to one short scale, and every section ends on the exact
      colour the next one starts on, so no band or edge shows between them.
      The questions end in the footer's navy, so the two read as one close.
   2. ONE HEADING SIZE for every section heading (the hero keeps its own).
   3. RESTRAINT IN MOTION. The gold shimmer stays on the hero's word only;
      every other gold word is still. The drifting light stays at the top
      (hero, phones, features); lower down the glows are still. The demos,
      the deck, the sliders and the switches stay: they show the product.
      One entrance for every section, and a 2px lift on hover where there is
      a mouse. All motion stops under prefers-reduced-motion.
   ============================================================ */

/* 2. one heading size */
.lp-lf-h, .lp-rv-h, .lp-pk-h, .lp-tr-h, .lp-ac-h, .lp-fq-h, .lp-ft-head h2 {
  font-size: clamp(30px, 5.2vw, 50px);
}
.lp-pk-h { max-width: 20ch; }
.lp-tr-h { font-size: clamp(34px, 5.6vw, 54px); }

/* 3. still gold, still glows (below the top) */
.lp-lf-h span, .lp-rv-h span, .lp-pk-h span, .lp-tr-h span, .lp-ac-h span, .lp-fq-h span,
.lp-pagehero h1 span { animation: none; background-position: 40% 0; }
.lp-lf-glow, .lp-rv-glow { animation: none; }

/* one entrance: a short rise and a fade */
.lp-lf-up, .lp-rv, .lp-pk-up, .lp-tr-up, .lp-ac-up, .lp-fq-up {
  transition-duration: .7s; transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}
.lp-lf-pre .lp-lf-up, .lp-rv-pre .lp-rv, .lp-pk-pre .lp-pk-up,
.lp-tr-pre .lp-tr-up, .lp-ac-pre .lp-ac-up, .lp-fq-pre .lp-fq-up {
  transform: translateY(14px); filter: none;
}

/* a 2px lift where there is a mouse */
@media (hover: hover) {
  .lp-rv, .lp-tr-card, .lp-ac-pt, .lp-sp-tile, .lp-values div {
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, opacity .7s ease;
  }
  .lp-rv:hover, .lp-tr-card:hover, .lp-ac-pt:hover, .lp-sp-tile:hover, .lp-values div:hover {
    transform: translateY(-2px);
  }
  .lp-tr-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 30px 56px -26px rgba(0,8,40,.9); }
  .lp-ac-pt:hover, .lp-sp-tile:hover { box-shadow: 0 22px 40px -24px rgba(18,41,110,.55); }
}

/* 1. one rhythm, and seamless hand-offs */
section.lp-band.lp-lexfind { padding: 64px 16px 80px; }
section.lp-band.lp-reviews {
  padding: 112px 0 112px;
  background:
    radial-gradient(55% 45% at 50% 55%, rgba(120, 170, 255, .35), transparent 72%),
    linear-gradient(180deg, #E6EAF1 0%, #8EA3D6 4%, #2C55C4 10%, #1E3A8A 36%, #12296E 84%, #5C74B0 94%, #EEF1F6 100%);
}
section.lp-band.lp-packages { padding: 48px 0 64px; }
section.lp-band.lp-tracking {
  padding: 104px 0 104px;
  background:
    radial-gradient(50% 45% at 72% 45%, rgba(120, 170, 255, .32), transparent 72%),
    linear-gradient(180deg, #FFFFFF 0%, #AFBDDD 5%, #2C55C4 13%, #1E3A8A 38%, #12296E 82%, #5C74B0 93%, #FFFFFF 100%);
}
section.lp-band.lp-account { padding: 40px 16px 64px; }
section.lp-band.lp-faqs {
  padding: 104px 16px 88px;
  background:
    radial-gradient(50% 40% at 30% 40%, rgba(120, 170, 255, .28), transparent 72%),
    linear-gradient(180deg, #EEF1F6 0%, #8EA3D6 5%, #2C55C4 13%, #1E3A8A 42%, #16307A 78%, #12296E 100%);
}
.lp-foot { padding-top: 56px; }
/* The phone install bar reserves room under the footer; the room is footer-navy. */
body.has-playbar { background: #0A1A4A; }

@media (max-width: 720px) {
  section.lp-band.lp-lexfind { padding: 48px 16px 64px; }
  section.lp-band.lp-reviews { padding: 88px 0 88px; }
  section.lp-band.lp-packages { padding: 40px 0 48px; }
  section.lp-band.lp-tracking { padding: 84px 0 84px; }
  section.lp-band.lp-account { padding: 32px 16px 48px; }
  section.lp-band.lp-faqs { padding: 84px 16px 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-lf-pre .lp-lf-up, .lp-rv-pre .lp-rv, .lp-pk-pre .lp-pk-up,
  .lp-tr-pre .lp-tr-up, .lp-ac-pre .lp-ac-up, .lp-fq-pre .lp-fq-up { transform: none; opacity: 1; }
  .lp-rv:hover, .lp-tr-card:hover, .lp-ac-pt:hover, .lp-sp-tile:hover, .lp-values div:hover { transform: none; }
}

/* The footer's corner glow starts below its top edge, so the Questions band
   runs into it without a visible seam. */
.lp-foot {
  background:
    radial-gradient(40% 50% at 90% 40%, rgba(120, 170, 255, .14), transparent 70%),
    radial-gradient(35% 45% at 5% 100%, rgba(201, 169, 97, .16), transparent 70%),
    linear-gradient(180deg, #12296E 0%, #0C1D52 55%, #0A1A4A 100%);
}

/* ======================================================================
   SMOOTH SCROLLING (owner, 2026-09-24: "the website seems jittery while
   scrolling"). Nothing here changes the design; it removes the work the
   browser was redoing on every frame of a scroll.
   ====================================================================== */

/* 1. Frosted glass. backdrop-filter re-blurs whatever is behind an element on
   every frame it moves. Behind every card on this page is a smooth gradient,
   so the blur bought almost nothing visible and cost the most. The fills are
   nudged a touch more opaque so the cards read the same without it. */
.lp-ft-glass, .lp-rv, .lp-rv-tag, .lp-ft-head .lp-ft-tag, .lp-navbtn, .lp-scrim, .lp-lf-win {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.lp-ft-glass {
  background:
    radial-gradient(160px 120px at var(--mx) var(--my), rgba(255,255,255,.28), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.23) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,.15) 100%);
}
.lp-rv {
  background:
    radial-gradient(180px 130px at var(--mx) var(--my), rgba(255,255,255,.22), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.23) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,.15) 100%);
}
.lp-lf-win {
  background: radial-gradient(220px 160px at var(--mx) var(--my), rgba(255,255,255,.85), transparent 70%),
    linear-gradient(150deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.7) 60%, rgba(255,255,255,.8) 100%);
}
.lp-scrim { background: rgba(6, 14, 40, .55); }

/* The floating nav is FIXED, so its blur ran over moving content on every
   frame of every scroll. Touch screens get the same navy glass without the
   blur (it was already ~88% opaque); a desktop with a mouse keeps it. */
.lp-nav.is-solid .lp-wrap {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(135deg, rgba(30, 58, 138, .95), rgba(10, 26, 74, .97));
}
@media (hover: hover) and (pointer: fine) {
  .lp-nav.is-solid .lp-wrap {
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
    background: linear-gradient(135deg, rgba(30, 58, 138, .86), rgba(10, 26, 74, .9));
  }
}
/* Turning solid changes colour only; animating height, margin and padding
   forced a layout pass in the middle of a scroll. */
.lp-nav .lp-wrap { transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }

/* 2. Entrances rise and fade; they no longer blur in (a filter animation
   repaints the whole element every frame while it scrolls into view). */
@keyframes lp-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes lpft-swapIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.lp-lf-row.is-hidden, .lp-lf-pre .lp-lf-up, .lp-rv-pre .lp-rv { filter: none; }

/* 3. Endless animations pause while their section is off screen (the class is
   set by the small observer at the foot of index.html) and carry on from
   where they stopped when it comes back. */
.lp-idle, .lp-idle *, .lp-idle *::before, .lp-idle *::after { animation-play-state: paused !important; }

/* ======================================================================
   THE PACKAGES PAGE (owner, 2026-09-24: "make it like the whole website's
   design language"). Scoped to body.lp-pp; the hooks shared/pricing.js and
   shared/join.js read (.lp-plan, .lp-price b, .lp-period, .lp-planbtn) keep
   their names and are only restyled here.
   ====================================================================== */
.lp-pp { background: #F4F6FA; }
.lp-pp-hero { padding-bottom: 150px; }
.lp-pp-hero h1 { max-width: 20ch; }

/* the period toggle, in glass on the blue: a white pill slides to the choice */
.lp-pp .lp-pp-seg {
  position: relative; display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px auto 0; padding: 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3);
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
}
.lp-pp-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px;
  background: #fff; box-shadow: 0 8px 18px -8px rgba(0,8,40,.6);
  transform: translateX(calc(var(--seg, 0) * 100%)); transition: transform .4s cubic-bezier(.22,.8,.24,1); }
.lp-pp .lp-pp-seg button { position: relative; z-index: 1; min-width: 104px; min-height: 42px; padding: 10px 16px; border: 0; border-radius: 999px;
  background: none; box-shadow: none; font: inherit; font-size: 14px; font-weight: 800; color: #fff; cursor: pointer; transition: color .3s ease; }
.lp-pp .lp-pp-seg button.on { background: none; color: var(--navy); box-shadow: none; }
.lp-pp .lp-pp-seg button:focus-visible { outline: 3px solid #E8D5A2; outline-offset: 2px; }
.lp-pp-hero .lp-pp-save { margin-top: 14px; font-size: 13.5px; color: #C9D4F0; }

/* the four cards, lifted over the header's lower edge */
.lp-pp-plans { padding: 0 16px 24px; }
.lp-pp .lp-pp-grid { position: relative; margin: -104px 0 0; display: grid; gap: 18px; align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-pp .lp-pp-card {
  padding: 28px 22px 22px; border-radius: 28px; border: 1px solid #fff;
  background: linear-gradient(150deg, #FFFFFF 0%, #F6F8FC 60%, #FBFCFE 100%);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -34px rgba(18,41,110,.45), 0 0 0 1px rgba(30,58,138,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.lp-pp .lp-pp-card h3 { font-size: 20px; letter-spacing: -0.02em; color: #0A1A4A; }
.lp-pp-lede { margin: 6px 0 0; min-height: 2.9em; font-size: 14px; line-height: 1.45; color: #4B5568; font-weight: 500; }
.lp-pp .lp-price { margin: 18px 0 2px; gap: 6px; color: #0A1A4A; }
.lp-pp .lp-price b { font-size: 42px; letter-spacing: -0.04em; line-height: 1; color: inherit; }
.lp-pp .lp-cur { align-self: flex-start; margin-top: 4px; font-size: 22px; font-weight: 800; color: inherit; }
.lp-pp-per { margin: 0; font-size: 13px; font-weight: 700; color: #4B5568; }
.lp-pp-mo { align-self: flex-start; margin-top: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #8A6E3E;
  background: rgba(232,213,162,.4); border: 1px solid rgba(201,169,97,.45); font-variant-numeric: tabular-nums; }
.lp-pp .lp-pp-card ul { margin: 18px 0 22px; padding: 16px 0 0; border-top: 1px solid rgba(30,58,138,.12); gap: 11px; }
.lp-pp .lp-pp-card li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; padding: 0; font-size: 14px; line-height: 1.4; color: #253046; }
.lp-pp .lp-pp-card li::before { content: ''; position: static; width: 20px; height: 20px; border: 0; border-radius: 50%; transform: none;
  background: rgba(30,58,138,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%231E3A8A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lp-pp .lp-pp-card li b { color: inherit; font-weight: 800; }
.lp-pp .lp-pp-card li.no { color: #8A94A6; }
.lp-pp .lp-pp-card li.no::before { width: 20px; height: 20px; top: auto; left: auto;
  background: rgba(138,148,166,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' fill='none' stroke='%238A94A6' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.lp-pp .lp-planbtn { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px; border-radius: 14px;
  font-weight: 800; font-size: 15px; color: var(--navy); background: #fff; border: 1.5px solid rgba(30,58,138,.2); transition: transform .2s ease, border-color .2s ease; }
.lp-pp .lp-planbtn:hover { background: #fff; border-color: rgba(30,58,138,.45); transform: translateY(-1px); }
.lp-pp .lp-planbtn:focus-visible { outline: 3px solid #C9A961; outline-offset: 3px; }

.lp-pp .lp-pp-card.is-featured {
  border: 1.5px solid rgba(232,213,162,.8);
  background: linear-gradient(160deg, #2C55C4 0%, #1E3A8A 45%, #12296E 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 40px 70px -30px rgba(18,41,110,.75), 0 0 60px rgba(201,169,97,.25);
}
.lp-pp .lp-pp-card.is-featured h3, .lp-pp .lp-pp-card.is-featured .lp-price { color: #fff; }
.lp-pp .lp-pp-card.is-featured .lp-pp-lede, .lp-pp .lp-pp-card.is-featured .lp-pp-per { color: #C9D4F0; }
.lp-pp .lp-pp-card.is-featured .lp-pp-mo { color: #F3E6C2; background: rgba(232,213,162,.16); border-color: rgba(232,213,162,.45); }
.lp-pp .lp-pp-card.is-featured ul { border-top-color: rgba(255,255,255,.18); }
.lp-pp .lp-pp-card.is-featured li { color: #EEF2FC; }
.lp-pp .lp-pp-card.is-featured li::before { background-color: rgba(232,213,162,.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23E8D5A2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lp-pp .lp-pp-card.is-featured .lp-planbtn { color: #1A1407; border-color: #C9A961; background: linear-gradient(135deg, #E8D5A2, #C9A961); box-shadow: 0 12px 24px -12px rgba(138,110,62,.9); }
.lp-pp-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 7px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: #1A1407; background: linear-gradient(135deg, #F3E6C2, #C9A961); box-shadow: 0 8px 18px -8px rgba(138,110,62,.8); }
@media (hover: hover) {
  .lp-pp .lp-pp-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 38px 70px -34px rgba(18,41,110,.55), 0 0 0 1px rgba(30,58,138,.08); }
  .lp-pp .lp-pp-card.is-featured:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 46px 80px -30px rgba(18,41,110,.8), 0 0 70px rgba(201,169,97,.32); }
}

.lp-pp-assure { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.lp-pp-assure li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #344054; }
.lp-pp-assure svg { color: #8A6E3E; flex: none; }

/* headings for the light sections */
.lp-pp-h2 { margin: 0; text-align: center; font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; color: #0A1A4A; text-wrap: balance; }
.lp-pp-h2 span { background: linear-gradient(100deg, #8A6E3E 0%, #C9A961 50%, #8A6E3E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* every package includes */
.lp-pp-tools { margin: 80px auto 0; max-width: 980px; }
.lp-pp-tools ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lp-pp-tools li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; font-size: 14px; font-weight: 700; line-height: 1.3; color: #0A1A4A;
  background: #fff; box-shadow: 0 14px 30px -24px rgba(18,41,110,.45), 0 0 0 1px rgba(30,58,138,.06); }
.lp-pp-tools i { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #5B4A26;
  background: linear-gradient(135deg, #F3E6C2, #D9BF83); }
.lp-pp-tools svg { width: 18px; height: 18px; }

/* the comparison */
.lp-pp-cmp { margin: 80px auto 0; max-width: 1080px; }
.lp-pp-tablewrap { margin-top: 24px; overflow-x: auto; border-radius: 24px; background: #fff;
  box-shadow: 0 30px 60px -40px rgba(18,41,110,.45), 0 0 0 1px rgba(30,58,138,.07); }
.lp-pp-tablewrap table { width: 100%; min-width: 720px; border-collapse: collapse; }
.lp-pp-tablewrap th, .lp-pp-tablewrap td { padding: 14px 16px; border-bottom: 1px solid rgba(30,58,138,.08); font-size: 14px; text-align: center; white-space: nowrap; }
.lp-pp-tablewrap thead th { padding-top: 20px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #0A1A4A; }
.lp-pp-tablewrap tbody th { text-align: left; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #0A1A4A; }
.lp-pp-tablewrap td { color: #344054; font-variant-numeric: tabular-nums; }
.lp-pp-tablewrap .is-feat { background: rgba(30,58,138,.05); }
.lp-pp-tablewrap thead .is-feat { color: #1E3A8A; box-shadow: inset 0 3px 0 #C9A961; }
.lp-pp-tablewrap td.y, .lp-pp-tablewrap td.n { font-size: 0; }
.lp-pp-tablewrap td.y::before, .lp-pp-tablewrap td.n::before { content: ''; display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.lp-pp-tablewrap td.y::before { background: rgba(30,58,138,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%231E3A8A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.lp-pp-tablewrap td.n::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12h8' fill='none' stroke='%23A0A8B8' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lp-pp-money td, .lp-pp-money th { font-weight: 800; }
.lp-pp-money td { color: #0A1A4A; }
.lp-pp-tablewrap tr:last-child th, .lp-pp-tablewrap tr:last-child td { border-bottom: 0; }
.lp-pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-pp-note { max-width: 70ch; margin: 18px auto 0; text-align: center; font-size: 13.5px; line-height: 1.65; color: #4B5568; }
.lp-pp-note b { color: #0A1A4A; }

/* paying: steps, questions, and the close, on blue into the footer's navy */
section.lp-band.lp-faqs.lp-pp-pay { margin-top: 56px; padding: 110px 16px 96px; text-align: center; }
.lp-pp-steps { list-style: none; max-width: 980px; margin: 34px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.lp-pp-steps li { position: relative; padding: 24px 22px; border-radius: 24px; border: 1px solid rgba(255,255,255,.26);
  background: linear-gradient(145deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.13) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 24px 50px -30px rgba(0,8,40,.8); }
.lp-pp-steps b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 16px; font-weight: 800; color: #1A1407;
  background: linear-gradient(135deg, #F3E6C2, #C9A961); box-shadow: 0 8px 16px -8px rgba(138,110,62,.9); }
.lp-pp-steps h3 { margin: 14px 0 6px; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.lp-pp-steps p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #DCE4F7; }
.lp-pp-pay .lp-fq-list { margin-top: 48px; }
.lp-pp-end { margin: 72px auto 0; max-width: 640px; }
.lp-pp-end h2 { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.035em; color: #fff; }
.lp-pp-end > p { margin: 10px 0 0; font-size: 16px; color: #DCE4F7; }
.lp-pp-endbtns { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.lp-pp-gold { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font-weight: 800; font-size: 15.5px; text-decoration: none;
  color: #1A1407; background: linear-gradient(135deg, #E8D5A2, #C9A961); box-shadow: 0 14px 28px -12px rgba(138,110,62,.9); transition: transform .2s ease; }
.lp-pp-gold:hover { transform: translateY(-2px); }
.lp-pp-gold:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lp-pp-endbtns .lp-play.has-badge img { height: 52px; width: auto; display: block; }
.lp-pp-signin { margin: 18px 0 0; font-size: 14px; color: #C9D4F0; }
.lp-pp-signin a { color: #E8D5A2; font-weight: 800; }

/* one entrance, as on the front page */
.lp-pp-anim .lp-pp-up { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.lp-pp-anim .lp-pp-up.is-in { opacity: 1; transform: none; }
.lp-pp-anim .lp-pp-d1 { transition-delay: .08s; } .lp-pp-anim .lp-pp-d2 { transition-delay: .16s; } .lp-pp-anim .lp-pp-d3 { transition-delay: .24s; }
.lp-pp-anim .lp-pp-card.lp-pp-up.is-in { transition: opacity .7s ease, transform .25s ease, box-shadow .25s ease; }

@media (max-width: 1100px) {
  .lp-pp .lp-pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .lp-pp-tools ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .lp-pp-hero { padding-bottom: 120px; }
  .lp-pp .lp-pp-seg button { min-width: 0; padding: 10px 12px; }
  .lp-pp .lp-pp-grid { grid-template-columns: minmax(0, 1fr); margin-top: -84px; gap: 26px; }
  /* On a phone the recommended package comes first. */
  .lp-pp .lp-pp-card.is-featured { order: -1; }
  .lp-pp-lede { min-height: 0; }
  .lp-pp-tools, .lp-pp-cmp { margin-top: 56px; }
  .lp-pp-tools ul { gap: 10px; }
  .lp-pp-tools li { padding: 12px; font-size: 13.5px; gap: 10px; }
  .lp-pp-tools i { width: 32px; height: 32px; }
  .lp-pp-steps { grid-template-columns: minmax(0, 1fr); }
  section.lp-band.lp-faqs.lp-pp-pay { padding: 84px 16px 72px; margin-top: 40px; }
  .lp-pp-end { margin-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-pp-pill, .lp-pp .lp-pp-card, .lp-pp-gold { transition: none; }
  .lp-pp-anim .lp-pp-up { opacity: 1; transform: none; }
}
/* A line with bold and plain text must stay one line: the tick is placed
   absolutely rather than as a grid cell, which split "(fair use)" off. */
.lp-pp .lp-pp-card li { display: block; position: relative; padding-left: 29px; }
.lp-pp .lp-pp-card li::before { position: absolute; left: 0; top: -1px; }
.lp-pp .lp-pp-card li.no::before { top: -1px; left: 0; }
/* On a phone the table scrolls sideways under a fixed first column, so each
   row keeps its name while the packages slide past it. */
.lp-pp-swipe { display: none; }
@media (max-width: 720px) {
  .lp-pp-swipe { display: block; margin: 8px 0 0; text-align: center; font-size: 13px; font-weight: 700; color: #8A6E3E; }
  .lp-pp-tablewrap { margin-top: 16px; }
  .lp-pp-tablewrap table { min-width: 640px; }
  .lp-pp-tablewrap th, .lp-pp-tablewrap td { padding: 12px 12px; font-size: 13.5px; }
  .lp-pp-tablewrap tbody th, .lp-pp-tablewrap thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: #fff; white-space: normal; min-width: 128px; max-width: 140px;
    box-shadow: 6px 0 12px -10px rgba(18,41,110,.5);
  }
}

/* ---------- forgot password, as its own panel (owner, 2026-09-29) ----------
   The tap swaps the sign-in form for this panel; the answer to Send appears
   directly under the button. #loginCard has a display rule of its own, so the
   hidden attribute needs saying explicitly or the form would stay visible. */
#loginCard[hidden], .lp-forgot[hidden] { display: none !important; }
.lp-forgot { display: flex; flex-direction: column; }
.lp-forgot h3 { margin: 4px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #0A1A4A; }
.lp-forgot > .lp-joinhint { margin: 0 0 6px; text-align: left; }
.lp-ac-card #forgotForm label { display: block; margin: 10px 0 0; font-size: 13px; font-weight: 700; color: #4B5568; }
.lp-ac-card #forgotForm input { display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 15px;
  color: var(--ink); background: #fff; border: 1.5px solid rgba(30,58,138,.16); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.lp-ac-card #forgotForm input:focus { border-color: var(--navy); box-shadow: 0 0 0 4px rgba(30,58,138,.12); }
#forgotMsg { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
#forgotMsg.note-ok { background: rgba(21,128,61,.08); }
#forgotMsg.note-hint { background: rgba(30,58,138,.06); }
#forgotMsg.error { background: rgba(185,28,28,.07); }
.lp-forgot .linkish { align-self: center; margin-top: 14px; padding: 6px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.lp-forgot .linkish:hover { color: var(--ink); }