/* landing.css — the selling page, v5 «aralash».
 *
 * THE STUDIO VARIANT'S STRUCTURE IN THE MINIMAL VARIANT'S CALM. A dark product
 * hero with the report drawn large as its picture, a fact band, a bento of what
 * the report does, three steps and a dark closing band — set in one face (Plus
 * Jakarta Sans, headlines included) and one colour (the minimal variant's deep
 * emerald, at its exact values). The light sections are near-white with
 * hairlines and nothing tinted for the sake of it.
 *
 * THE DARK HALF IS GREEN-BLACK, NOT BLUE-BLACK. The masthead, the hero, the
 * product shot, the closing band and the footer are always dark, in every
 * theme: that is the design, not a theme. Their colours are the --h-* and --m-*
 * tokens below, which no theme redefines. On them the emerald is the night
 * theme's lighter one (#4fd39a family) so it reads; on the light half it is
 * #0a6847. One hue, two lightnesses — never a second accent.
 *
 * RED IS FOR MISTAKES AND AMBER IS FOR THE ONE CAPPED BAND. Nothing else on the
 * page is red or amber.
 *
 * TRACKING. Jakarta at display sizes wants to be tightened, and past about
 * −0.04em its word spaces close up and «koʻzi bilan» starts reading as one word
 * (the minimal variant's review). Every display size here stays at or above
 * −0.034em and gets a little word-spacing back.
 *
 * NOTHING LOADS FROM ANOTHER ORIGIN: the face is /assets/fonts, every picture is
 * CSS or inline SVG. No color-mix(), no :has(), no nesting — the target is a
 * mid-range Android WebView. */

/* ============================================================ tokens */
:root, :root[data-theme="quyosh"], :root[data-theme="binafsha"] {
  --bg: #fafaf9; --bg2: #ffffff; --card: #ffffff; --card2: #f3f4f2;
  --line: #e9eae7; --line2: #d8dbd6;
  --ink: #0e1512; --ink2: #39433e; --mut: #626c66;
  --accent: #0a6847; --accent-ink: #075c41; --accent-soft: #e4f3eb; --on-accent: #ffffff;
  --bar1: #c9e5d6; --bar2: #0a6847;
  --hi: #0a6847; --hi-soft: #e4f3eb; --lo: #b42318; --lo-soft: #fdecea;
  --warn: #8a5a00; --warn-soft: #fbf1dc; --warn-line: #ecd6a4;
  --shadow: 0 1px 2px rgba(14,21,18,.04);
  --shadow-up: 0 1px 2px rgba(14,21,18,.04), 0 12px 32px -18px rgba(14,21,18,.14);
  color-scheme: light;
}
:root[data-theme="tungi"] {
  /* ONE BLACK. The night body is the hero's green-black a step lighter, not a
     neutral near-black: two blacks of different hue met in a hairline seam
     right through the product shot where the hero hands over to the page. */
  --bg: #08110d; --bg2: #0b1510; --card: #0f1814; --card2: #16201b;
  --line: #1f2a24; --line2: #2b3832;
  --ink: #ecf1ee; --ink2: #c3ccc7; --mut: #929d96;
  --accent: #4fd39a; --accent-ink: #5fdca5; --accent-soft: #10291d; --on-accent: #04220f;
  --bar1: #24513d; --bar2: #4fd39a;
  --hi: #5fdca5; --hi-soft: #10291d; --lo: #ff8a7a; --lo-soft: #3a1f1c;
  --warn: #e3b34f; --warn-soft: #362b10; --warn-line: rgba(227,179,79,.35);
  --shadow: none;
  --shadow-up: 0 0 0 1px rgba(255,255,255,.015), 0 24px 60px -30px rgba(0,0,0,.8);
  color-scheme: dark;
}
:root {
  /* the always-dark half: green-black */
  --h-bg: #07110c; --h-bg2: #0b1711; --h-line: rgba(255,255,255,.08); --h-line2: rgba(255,255,255,.16);
  --h-ink: #f2f6f4; --h-ink2: #c2cec7; --h-mut: #8fa198;
  --m-bg: #0c1612; --m-bg2: #101c17; --m-line: rgba(255,255,255,.07);
  --m-ink: #e9f0ec; --m-ink2: #bfcbc4; --m-mut: #85968d; --m-track: rgba(255,255,255,.08);
  /* the emerald, light-half and dark-half */
  --btn: #0a6847; --btn-hi: #0e7a53;
  --em: #4fd39a; --em-ink: #5fdca5; --em-pale: #8de6bd;
  --fd: "Plus Jakarta Sans", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --fb: "Plus Jakarta Sans", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --r: 20px; --rs: 12px;
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.lp {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--fb); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img, svg { max-width: 100%; }
p, h1, h2, h3, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

/* [hidden] LOUDLY: the refusal notice is display:flex from its own class. */
[hidden] { display: none !important; }

/* The focus ring is the emerald of whatever ground it is drawn on: the deep one
 * on the light half (6.5:1), the light one on the green-black half (10:1). One
 * value for both measured 2.7:1 on near-white, under the 3:1 a ring needs. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.lp-top :focus-visible, .lp-hero :focus-visible, .lp-end :focus-visible, .lp-foot :focus-visible, .vh:focus-visible { outline-color: var(--em); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: rgba(79,211,154,.28); }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vh:focus {
  position: fixed; top: 10px; left: 10px; width: auto; height: auto;
  clip: auto; margin: 0; padding: 10px 16px; z-index: 90;
  background: #fff; color: #0e1512; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

.lp-col { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 24px; }

/* ============================================================ buttons */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px; border-radius: 10px;
  border: 1px solid transparent; font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, filter .15s;
}
/* THE ONE FILLED BUTTON. Deep emerald with white type is 6.8:1; the lighter top
 * edge and the soft emerald light under it are what lift it off a green-black
 * ground, where a flat #0a6847 would sink. */
.lp-btn-solid {
  background: linear-gradient(180deg, var(--btn-hi), var(--btn)); color: #fff;
  border-color: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.2), 0 10px 28px -12px rgba(47,174,120,.65);
}
.lp-btn-solid:hover { filter: brightness(1.1); }
/* ON THE GREEN-BLACK HALF THE PRIMARY IS THE LIGHT EMERALD, with dark type —
 * the same button the app's night theme and its dark lead card carry. Deep
 * emerald on green-black was 2.8:1 against its own ground: same hue on same
 * hue, a button that sank. The deep one stays for the light half. */
.lp-hero .lp-btn-solid, .lp-end .lp-btn-solid {
  background: #4fd39a; color: #04220f; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.25), 0 10px 26px -14px rgba(79,211,154,.5);
}
.lp-hero .lp-btn-solid:hover, .lp-end .lp-btn-solid:hover { filter: brightness(1.06); }
/* Only ever on the dark half: the hero's second button, the masthead's sign-up. */
.lp-btn-line { background: rgba(255,255,255,.03); color: var(--h-ink); border-color: var(--h-line2); }
.lp-btn-line:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.lp-btn-ghost { background: transparent; color: var(--h-ink2); }
.lp-btn-ghost:hover { color: var(--h-ink); background: rgba(255,255,255,.06); }
.lp-btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; border-radius: 9px; }
.lp-btn-lg { min-height: 52px; padding: 14px 26px; font-size: 16px; border-radius: 12px; }
.lp-btn[disabled] { opacity: .55; cursor: not-allowed; }

.lp-quiet {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 11px;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--h-mut); font-size: 13.5px; font-weight: 550; white-space: nowrap;
  transition: background .15s, color .15s;
}
.lp-quiet:hover { background: rgba(255,255,255,.06); color: var(--h-ink); }
.lp-ico { flex-shrink: 0; }

/* ============================================================ masthead */
.lp-top {
  position: sticky; top: 0; z-index: 30;
  /* Opaque at rest: over the near-white body a translucent bar turned grey. */
  background: rgba(7,17,12,.97); color: var(--h-ink);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--h-line);
  padding-top: env(safe-area-inset-top);
}
.lp-top-in { display: flex; align-items: center; gap: 8px 20px; min-height: 64px; flex-wrap: wrap; }
.lp-mark {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: -.025em; white-space: nowrap;
}
.lp-mark-i { flex-shrink: 0; display: block; }
.lp-nav { display: flex; gap: 4px; margin-left: 12px; }
.lp-nav a {
  padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 550;
  color: var(--h-mut); text-decoration: none; transition: color .15s, background .15s;
}
.lp-nav a:hover { color: var(--h-ink); background: rgba(255,255,255,.05); }
.lp-top-act { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.lp-top-go { display: inline-flex; align-items: center; gap: 8px; }

/* the ground switch — the product's role="switch", drawn for a dark masthead */
#btnGround {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 5px; background: none; border: 0; border-radius: 999px;
}
.groundtrack {
  position: relative; display: flex; align-items: center;
  width: 58px; height: 30px; padding: 2px;
  background: rgba(255,255,255,.06); border: 1px solid var(--h-line2); border-radius: 999px;
}
#btnGround:hover .groundtrack { border-color: rgba(255,255,255,.3); }
.groundknob {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
  border-radius: 50%; background: #f2f6f4; transition: transform .18s;
}
:root[data-theme="tungi"] .groundknob { transform: translateX(28px); }
.groundhalf { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; color: var(--h-mut); }
.gsun { color: #0e1512; }
:root[data-theme="tungi"] .gsun { color: var(--h-mut); }
:root[data-theme="tungi"] .gmoon { color: #0e1512; }

/* ============================================================ hero */
.lp-hero {
  position: relative; background: var(--h-bg); color: var(--h-ink);
  padding: 96px 0 0; isolation: isolate; display: flow-root;
}
/* A faint 64px grid, fading out from the top centre — the drafting table. */
.lp-hero-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 20%, transparent 75%);
}
.lp-hero-say { max-width: 880px; margin-inline: auto; text-align: center; }
.lp-badge {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid var(--h-line2); background: rgba(255,255,255,.03);
  font-size: 12px; font-weight: 650; letter-spacing: .05em; color: var(--h-ink2);
}
.lp-badge-short { display: none; text-transform: uppercase; }
.lp-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--em); box-shadow: 0 0 0 4px rgba(79,211,154,.16); flex-shrink: 0; }
/* THE GRADIENT IS PAINTED BY THE BACKGROUND, so it reaches only as far as the
 * element's box — and at a line-height of 1.03 the box ends above the last
 * line's descenders: the «g» of «koʻring» came out sliced flat. The padding
 * carries the box under them and the negative margin hands the space back.
 * The gradient ends late and pale, so the second line, which holds the phrase
 * that matters, is not the dimmer of the two. */
.lp-h1 {
  margin-top: 26px; padding-bottom: .12em; margin-bottom: -.12em;
  font-family: var(--fd); font-weight: 700; font-size: clamp(40px, 6.4vw, 78px);
  line-height: 1.03; letter-spacing: -.034em; word-spacing: .1em; text-wrap: balance;
  color: #f4f8f6;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 70%, #cfdcd5 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lp-lede {
  margin: 22px auto 0; max-width: 620px;
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--h-ink2); text-wrap: pretty;
}
.lp-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.lp-cta .lp-btn { min-height: 50px; padding: 13px 24px; font-size: 15.5px; border-radius: 12px; }
.lp-cta-note {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0;
  margin-top: 16px; font-size: 13.5px; color: var(--h-mut);
}
.lp-cta-note span:not(.lp-dot)::before {
  content: ""; display: inline-block; width: 12px; height: 7px; margin: 0 7px 2px 0;
  border-left: 1.8px solid var(--em); border-bottom: 1.8px solid var(--em); transform: rotate(-45deg);
}
.lp-dot { padding: 0 12px; color: rgba(255,255,255,.2); }
.lp-cta-err { margin: 18px auto 0; max-width: 480px; text-align: left; }
.notice { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.notice-warn { background: rgba(227,179,79,.08); color: #f3d58c; border: 1px solid rgba(227,179,79,.3); }
.notice-title { font-weight: 700; }
.notice .link { color: var(--em-pale); font-weight: 650; }

/* ---------------------------------------------------------- the product shot */
.lp-shot-wrap { position: relative; margin-top: 72px; margin-bottom: -150px; z-index: 2; }
.lp-glow {
  position: absolute; left: 50%; top: -60px; width: 84%; height: 76%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(47,174,120,.26), rgba(47,174,120,.07) 55%, transparent);
  pointer-events: none; z-index: -1;
}
.lp-shot {
  border-radius: 18px; overflow: hidden; color: var(--m-ink);
  background: var(--m-bg);
  border: 1px solid rgba(255,255,255,.09);
  /* ONE SOFT SHADOW. The heavy black-and-emerald pair spread a grey-green haze
     over the fact band on the light half — the numbers sat in it. The deep
     shadow is the night theme's, where the band under it is dark anyway. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(7,17,12,.06), 0 40px 80px -48px rgba(7,17,12,.45);
}
:root[data-theme="tungi"] .lp-shot { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 50px 120px -30px rgba(0,0,0,.6), 0 30px 60px -34px rgba(10,104,71,.45); }
.lp-win-bar {
  display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 16px;
  border-bottom: 1px solid var(--m-line); background: rgba(255,255,255,.015);
}
.lp-dots { display: inline-flex; gap: 7px; flex: 1 1 0; }
.lp-dots i { width: 11px; height: 11px; border-radius: 50%; background: #233029; }
.lp-url {
  flex: 0 1 340px; text-align: center; padding: 5px 14px; border-radius: 8px;
  background: rgba(255,255,255,.045); color: var(--m-mut); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-win-sp { flex: 1 1 0; }
.lp-win { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; padding: 30px; }

.lp-paper { min-width: 0; }
.lp-paper-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.lp-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 6px;
  background: rgba(79,211,154,.12); color: var(--em-pale); font-size: 12px; font-weight: 650;
}
.lp-paper-cap { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; color: var(--m-mut); }
.lp-skel { display: block; margin: 4px 0 14px; }
.lp-skel i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); margin: 0 0 11px; }
.lp-skel-end { margin: 26px 0 0; }
.lp-skel-end i:last-child { margin-bottom: 0; }
.lp-paper-text { font-size: 17px; line-height: 1.85; color: var(--m-ink2); margin-bottom: 14px; }
.lp-flag {
  color: #fff; background: rgba(255,138,122,.14); border-bottom: 2px solid #ff8a7a;
  padding: 1px 3px; border-radius: 3px 3px 0 0; white-space: nowrap;
}
.lp-flag sup { font-size: 10px; font-weight: 700; color: #ffb4a8; margin-left: 2px; }
.lp-fixes { margin-top: 6px; border-top: 1px solid var(--m-line); }
.lp-fix { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--m-line); font-size: 14.5px; line-height: 1.55; }
.lp-fix:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-fix-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,138,122,.13); color: #ffb4a8; font-size: 12px; font-weight: 700;
}
.lp-fix-body { color: var(--m-ink2); min-width: 0; }
.lp-fix-tag {
  display: inline-block; padding: 1px 8px; margin-right: 4px; border-radius: 5px;
  background: rgba(255,255,255,.07); color: var(--m-ink); font-size: 12px; font-weight: 650;
}
.lp-fix s { color: var(--m-mut); }
.lp-arrow { color: var(--m-mut); padding: 0 2px; }
.lp-fix-ok { color: var(--em-ink); font-weight: 650; }
.lp-fix-why { color: var(--m-ink2); }

.lp-panel {
  min-width: 0; align-self: start;
  background: var(--m-bg2); border: 1px solid var(--m-line); border-radius: 14px; padding: 22px;
}
.lp-overall { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--m-line); }
.lp-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.lp-ring svg { display: block; }
.lp-ring-v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lp-ring-v b { font-size: 29px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.lp-overall-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-k { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--m-mut); }
.lp-overall-b { font-size: 21px; font-weight: 650; letter-spacing: -.02em; color: var(--m-ink); }
.lp-crits { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; }
.lp-crit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: baseline; }
.lp-crit-n { font-size: 13.5px; color: var(--m-ink2); }
.lp-crit-b { font-size: 15.5px; font-weight: 700; color: var(--m-ink); font-variant-numeric: tabular-nums; }
.lp-crit-b.lp-hi { color: var(--em-ink); }
.lp-track { grid-column: 1 / -1; position: relative; display: block; height: 6px; border-radius: 3px; background: var(--m-track); overflow: hidden; }
/* A 6.0 is plain ink in the report (bandVar(), web/core/fmt.js) and only 7.0
 * and over is green — so here too: the mock's ink for 6.0, emerald for the 7.0. */
.lp-track i { display: block; height: 100%; border-radius: 3px; background: rgba(233,240,236,.82); }
.lp-track i.lp-hi { background: linear-gradient(90deg, #1f8f61, var(--em)); }
/* The capped half-band: what the rule took away, hatched in amber. */
.lp-track em {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(-45deg, rgba(227,179,79,.6) 0 3px, transparent 3px 6px);
}
.lp-cap { grid-column: 1 / -1; font-size: 12.5px; color: #e9c26a; }
.lp-cap b { font-weight: 700; margin-right: 4px; }

/* ============================================================ facts */
.lp-facts-band { background: var(--bg); padding: 214px 0 44px; border-bottom: 1px solid var(--line); }
.lp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-fact { display: flex; flex-direction: column; gap: 6px; padding: 8px 28px; border-left: 1px solid var(--line); }
.lp-fact:first-child { border-left: 0; padding-left: 0; }
.lp-fact-n {
  font-size: clamp(32px, 3.6vw, 44px); font-weight: 700;
  letter-spacing: -.034em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums;
}
.lp-fact-n:empty { display: none; }
.lp-fact-l { font-size: 14.5px; color: var(--mut); }

/* ============================================================ sections */
.lp-sec { padding: 112px 0; background: var(--bg); }
.lp-sec-tight { padding-top: 0; }
.lp-sec-alt { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lp-sec-head { max-width: 760px; margin-bottom: 44px; }
.lp-eyebrow { font-size: 14px; font-weight: 650; color: var(--accent-ink); margin-bottom: 12px; }
.lp-h2 {
  font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08; letter-spacing: -.03em; word-spacing: .06em; color: var(--ink); text-wrap: balance;
}
.lp-h3 { font-family: var(--fd); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.lp-p { font-size: 15px; line-height: 1.6; color: var(--mut); }

/* ---------------------------------------------------------------- bento */
/* EVERY CARD IN A ROW IS AS TALL AS THE ROW, and none of them has a hole in it
 * for that reason. The two wide cards of each row are written to the same
 * height (a card's visual is its last child, so the two finish together); the
 * three small ones share one shape — a two-line specimen, a title, two lines of
 * text — and the Task 1 card's chart is the single part on the page that is
 * allowed to stretch. No card pads itself to a height. */
.lp-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.lp-tile {
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; box-shadow: var(--shadow); overflow: hidden;
}
.lp-tile-say { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lp-span-7 { grid-column: span 7; } .lp-span-5 { grid-column: span 5; }
.lp-span-6 { grid-column: span 6; } .lp-span-4 { grid-column: span 4; }
.lp-tag {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 650;
}

/* A · the next band, per criterion. The panel is the card's last child and
 * takes whatever height the row gives the card; the four lines spread inside
 * it rather than leaving the slack as a strip of empty card under it. */
.lp-next {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px;
  background: var(--card2); border-radius: 14px; padding: 18px 20px 20px;
}
.lp-next-l { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--mut); }
.lp-next-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.lp-next-list li {
  display: grid; grid-template-columns: 44px 34px minmax(0, 1fr); gap: 0 12px; align-items: baseline;
  padding-top: 12px; border-top: 1px solid var(--line2);
}
.lp-next-list li:first-child { padding-top: 0; border-top: 0; }
.lp-next-k {
  justify-self: start; padding: 1px 7px; border-radius: 6px; background: var(--card); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; color: var(--mut); letter-spacing: .02em;
}
.lp-next-b { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-next-b.lp-hi { color: var(--hi); }
.lp-next-t { font-size: 14.5px; line-height: 1.5; color: var(--ink2); }

/* B · the band-8 rewrite: yours, then band 8, then the note on the change. Any
 * height the row adds goes between them. */
.lp-rw { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.lp-rw-was, .lp-rw-now { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; }
.lp-rw-was { background: var(--card2); }
/* Muted, not struck: the report prints the student's paragraph that way too,
 * and most of it is not wrong — only further from band 8. */
.lp-rw-was p { font-size: 15px; line-height: 1.6; color: var(--mut); }
.lp-rw-now { background: var(--hi-soft); border-left: 3px solid var(--hi); border-radius: 4px 14px 14px 4px; }
.lp-rw-now p { font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.lp-rw-now u { text-decoration-color: var(--hi); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lp-rw-now sup { font-size: 10.5px; font-weight: 700; color: var(--accent-ink); margin-left: 1px; }
.lp-rw-l { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--mut); }
.lp-rw-now .lp-rw-l { color: var(--accent-ink); }
.lp-rw-notes { display: flex; flex-direction: column; gap: 6px; }
.lp-rw-note { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.lp-rw-note b {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 11.5px;
}

/* E, F, G · the small three: a two-line specimen, a title, two lines */
.lp-tile-sm { gap: 10px; }
.lp-mini {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
  padding: 14px; border-radius: 14px; background: var(--card2);
}
/* EVERY ROW IS A CHIP TALL, chip or no chip, so the three specimens come out
 * the same height and the three titles under them sit on one line. */
.lp-mini li { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 22px; font-size: 14px; line-height: 1.45; color: var(--ink2); }
.lp-mini-i { flex-shrink: 0; width: 40px; display: inline-flex; justify-content: center; }
.lp-mini-i svg { display: block; }
/* Wrapped, never cut: a quotation with its end replaced by «…» would be the one
 * misquotation on a page about checking quotations. */
.lp-mini q, .lp-mini s { min-width: 0; overflow-wrap: anywhere; }
.lp-mini q { quotes: "«" "»"; }
.lp-mini svg { flex-shrink: 0; }
.lp-mini-ok svg { color: var(--accent); }
.lp-mini-no { color: var(--mut); }
.lp-mini-no svg { color: var(--lo); }
.lp-mini-no q { text-decoration: line-through; text-decoration-color: var(--mut); color: var(--mut); }
.lp-mini-k {
  flex-shrink: 0; min-width: 40px; text-align: center; padding: 1px 6px; border-radius: 6px;
  background: var(--card); border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--mut);
}
.lp-mini-good q { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lp-mini-good .lp-mini-k, .lp-mini-now .lp-mini-k { color: var(--accent-ink); border-color: transparent; background: var(--accent-soft); }
.lp-mini-was s { color: var(--mut); }
.lp-mini-now q { color: var(--ink); font-weight: 600; quotes: none; }

/* C · vocabulary */
.lp-vocab { display: flex; flex-direction: column; gap: 10px; }
.lp-ph { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.lp-ph-uz { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--mut); }
/* The weak sentence is not a mistake, only a plainer way of saying it: struck
 * in the neutral line colour, not in the red that marks errors. */
.lp-weak { font-size: 14.5px; line-height: 1.55; color: var(--mut); text-decoration: line-through; text-decoration-color: var(--line2); }
.lp-strong { padding: 12px 14px; border-radius: 12px; background: var(--hi-soft); border-left: 3px solid var(--hi); font-size: 15px; line-height: 1.6; color: var(--ink); }
.lp-colls { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-colls span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.lp-vrow-l { font-weight: 650; color: var(--mut); }
.lp-foot-note b { color: var(--ink2); font-weight: 650; }

/* The card's last line, on its own hairline. In a row that is taller than the
 * card it stays at the foot, as a card's footer does. */
.lp-foot-note { margin-top: auto; font-size: 14px; color: var(--mut); padding-top: 14px; border-top: 1px solid var(--line); }

/* D · Task 1 chart — the stretchable card */
.lp-q { font-size: 15px; line-height: 1.6; color: var(--ink2); }
.lp-tile-chart .lp-cols { flex: 1 1 auto; }
.lp-cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  min-height: 156px; padding-top: 24px; border-bottom: 1px solid var(--line2);
}
.lp-colg { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.lp-bars { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; gap: 5px; width: 100%; }
.lp-bars i { position: relative; display: block; width: 26%; max-width: 30px; min-height: 3px; border-radius: 5px 5px 0 0; font-style: normal; }
.lp-bars i.y1 { background: var(--bar1); }
.lp-bars i.y2 { background: var(--bar2); }
.lp-bars b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 3px; font-size: 11px; font-weight: 650; color: var(--mut); white-space: nowrap; }
.lp-colg-l { font-size: 13px; font-weight: 650; color: var(--ink2); padding-bottom: 8px; }
.lp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--mut); }
.lp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lp-legend i { width: 10px; height: 10px; border-radius: 3px; }
.lp-legend i.y1 { background: var(--bar1); } .lp-legend i.y2 { background: var(--bar2); }
.lp-legend-u { margin-left: auto; }
.lp-tile-chart .lp-foot-note { margin-top: 0; }

/* ---------------------------------------------------------------- steps */
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lp-step { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line2); }
.lp-step:first-child { border-top: 2px solid var(--accent); padding-top: 21px; }
.lp-step-n { font-size: 14px; font-weight: 700; color: var(--accent-ink); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- close */
.lp-end {
  position: relative; overflow: hidden; background: var(--h-bg); color: var(--h-ink); padding: 96px 0;
  isolation: isolate;
}
.lp-end::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 900px; height: 600px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(47,174,120,.24), transparent);
}
.lp-end-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.lp-end-h { font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -.03em; word-spacing: .06em; line-height: 1.08; color: #fff; text-wrap: balance; }
.lp-end-b { margin-top: 10px; font-size: 17px; color: var(--h-ink2); }

/* ---------------------------------------------------------------- footer */
.lp-foot { background: var(--h-bg); border-top: 1px solid var(--h-line); color: var(--h-mut); font-size: 13.5px; }
.lp-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 26px; padding-bottom: 30px; padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.lp-foot-mark { display: inline-flex; align-items: center; gap: 8px; }
.lp-foot-mark svg { display: block; flex-shrink: 0; }
.lp-foot-mark b { color: var(--h-ink); font-weight: 650; }
.lp-foot a { color: var(--h-ink2); text-decoration: none; }
.lp-foot a:hover { color: #fff; text-decoration: underline; }
.lp-foot-tm { flex: 1 1 320px; text-align: right; }

/* ============================================================ night */
:root[data-theme="tungi"] .lp-end { border-top: 1px solid var(--line); }
:root[data-theme="tungi"] .lp-tile { background: linear-gradient(180deg, #111b16, #0e1813); }

/* ============================================================ narrower */
@media (max-width: 1020px) {
  .lp-win { grid-template-columns: minmax(0, 1fr); }
  .lp-span-7, .lp-span-5, .lp-span-6 { grid-column: span 12; }
}
@media (max-width: 1000px) {
  .lp-nav { display: none; }
}
/* Three small cards side by side but narrow: a quotation wraps in one specimen
 * and not in its neighbour, and the titles under them stepped by 19px. Below
 * 1120px every specimen is given the height of the tallest (two wrapped rows),
 * so the three titles stay on one line. */
@media (min-width: 901px) and (max-width: 1120px) {
  .lp-mini { min-height: 118px; justify-content: center; }
}
@media (max-width: 900px) {
  .lp-span-4 { grid-column: span 12; }
  /* The label leaves the screen but not the button's name: a phone reader
   * still hears «Til / Language», not a bare "button". The .vh pattern. */
  .lp-quiet span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* A small card on a row of its own, wider than it is tall: its specimen moves
 * beside its words instead of floating above them. */
@media (max-width: 900px) and (min-width: 600px) {
  .lp-tile-sm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 28px; row-gap: 8px; align-content: center; }
  .lp-tile-sm .lp-mini { grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
  .lp-tile-sm .lp-h3 { align-self: end; }
  .lp-tile-sm .lp-p { align-self: start; }
}

@media (max-width: 780px) {
  .lp-col { padding-inline: 16px; }
  .lp-top { position: relative; }
  .lp-top-in { min-height: 0; padding-top: 10px; padding-bottom: 12px; gap: 6px 8px; }
  .lp-nav { display: none; }

  .lp-hero { padding-top: 48px; }
  .lp-badge { font-size: 10.5px; letter-spacing: .04em; padding: 6px 12px 6px 9px; }
  .lp-h1 { margin-top: 20px; font-size: clamp(40px, 7vw, 56px); letter-spacing: -.03em; line-height: 1.06; }
  .lp-lede { font-size: 16.5px; }
  .lp-cta { margin-top: 28px; }
  .lp-cta-note { font-size: 13px; }

  .lp-shot-wrap { margin-top: 48px; margin-bottom: -90px; }
  .lp-shot { border-radius: 14px; }
  .lp-win-bar { height: 38px; padding: 0 12px; }
  .lp-dots i { width: 9px; height: 9px; }
  .lp-url { font-size: 11.5px; }
  .lp-win { padding: 18px 16px; gap: 18px; }
  .lp-paper-text { font-size: 15.5px; line-height: 1.8; }
  .lp-fix { font-size: 14px; }
  .lp-panel { padding: 16px; }
  .lp-ring, .lp-ring svg { width: 76px; height: 76px; }
  .lp-ring-v b { font-size: 25px; }

  .lp-facts-band { padding: 130px 0 32px; }
  .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .lp-fact { padding: 4px 16px; }
  .lp-fact:nth-child(odd) { border-left: 0; padding-left: 0; }

  .lp-sec { padding: 72px 0; }
  .lp-sec-tight { padding-top: 0; }
  .lp-sec-head { margin-bottom: 28px; }
  .lp-tile { padding: 22px 18px; }
  .lp-h3 { font-size: 18px; }
  .lp-legend-u { margin-left: 0; width: 100%; }
  .lp-cols { min-height: 170px; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .lp-end { padding: 64px 0; }
  .lp-foot-tm { text-align: left; }
}

/* THE PHONE PROPER. Between 521 and 780 a tablet or a phone on its side keeps
 * the buttons at their own width and the sign-in pair in the top row; it was
 * getting this block too, and the hero read as a stretched phone — two
 * 736px slabs under a 40px headline. */
@media (max-width: 520px) {
  .lp-top-go { width: 100%; margin-left: 0; }
  .lp-top-go .lp-btn { flex: 1 1 0; min-width: 0; min-height: 44px; }
  .lp-cta .lp-btn { flex: 1 1 100%; }
  .lp-end-in .lp-btn { width: 100%; }
  /* The badge says the half that matters, on one line, centred like the rest
     of the hero; the long one wrapped with «UCHUN» alone on its second line. */
  .lp-badge-long { display: none; }
  .lp-badge-short { display: inline; }
  /* No separator: wrapped, it ended the first line and pushed it off-centre,
     so the two ticks under the buttons did not line up. */
  .lp-dot { display: none; }
  .lp-cta-note { gap: 4px 16px; }
  /* The next-band lines: criterion and band on one line, the sentence under
     them at the card's width rather than in a 170px column beside them. */
  .lp-next { padding: 16px; }
  .lp-next-list li { grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; }
  .lp-next-t { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .lp-top, .lp-hero-grid, .lp-glow { display: none !important; }
}