/* ============================================================================
   l2a.css — Lead-to-Appointment pages (13 pages). Loads LAST, after
   kit.css, tokens.css, base.css, layout.css, components.css, responsive.css.
   Only on pages whose <body> has class "l2a". Ported from leads.aglocom.com
   (style.css) and the Nine Education blog layer, in Aglocom's kit tokens.
   Red (--kit-brand) = logo and primary button only.
   ============================================================================ */

/* ── 1. Light ground ─────────────────────────────────────────────────────────
   leads.aglocom.com: dark header + dark hero, then white / pale-grey sections.
   tokens.css resolves --text, --bg… at :root, so re-declaring --kit-* alone
   does NOT reach site components. Re-declare both layers. */
.l2a .l2a-light {
  --kit-bg:#FFFFFF; --kit-surface:#F3F5F8; --kit-raised:#EDF0F4;
  --kit-rule:#E2E6EC; --kit-rule-2:#CCD3DC;
  --kit-fg:#0D1117; --kit-fg-2:#3B4452; --kit-fg-3:#566172;
  --kit-up:#1F7A4B; --kit-frozen:#8A94A1; --kit-flat:#B3BBC6;
  --bg:var(--kit-bg); --surface:var(--kit-surface); --surface-raised:var(--kit-raised);
  --border:var(--kit-rule); --border-strong:var(--kit-rule-2);
  --text:var(--kit-fg); --text-secondary:var(--kit-fg-2); --text-muted:var(--kit-fg-3);
  --up:var(--kit-up); --frozen:var(--kit-frozen); --flat:var(--kit-flat);
  --l2a-link:#0B57D0;           /* link blue on white: 6.9:1 */
  background:var(--kit-bg); color:var(--kit-fg);
}
.l2a .l2a-light.alt { background:var(--kit-surface); }
.l2a { --l2a-link:#9CC2FF; }    /* link blue on the dark ground: 9.6:1 */

/* ── 2. Section rhythm (leads: tighter than the site's 64–118px) ─────────── */
.l2a .l2a-section { padding-block:clamp(40px,4.2vw,64px); }
.l2a .l2a-section.l2a-band { background:var(--kit-surface); border-top:1px solid var(--kit-rule); }
.l2a .l2a-head { margin-bottom:28px; max-width:62ch; }
.l2a .l2a-head .kit-label { margin-bottom:12px; }
.l2a .l2a-head .kit-h2 { margin:0 0 12px; }
.l2a .deck { color:var(--kit-fg-2); font-size:var(--kit-t-lede); line-height:1.6; margin:0; max-width:var(--kit-measure-deck); }
.l2a .muted { color:var(--kit-fg-3); font-size:var(--kit-t-sm); }
.l2a .kit-label { margin-bottom:12px; }

/* ── 3. Links that look like links ──────────────────────────────────────────
   base.css sets a{text-decoration:none;color:inherit}. Inside prose that made
   every link invisible. Any link in running text is underlined. */
.l2a main :is(p,li,td,dd) a:not(.btn, .l2a-card, .l2a-chip, .l2a-toc a) {
  color:var(--l2a-link); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);
}
.l2a main :is(p,li,td,dd) a:not(.btn, .l2a-card, .l2a-chip, .l2a-toc a):hover { text-decoration-color:currentColor; text-decoration-thickness:2px; }

/* ── 4. Hero (landing) ───────────────────────────────────────────────────── */
.l2a .l2a-hero { padding-block:clamp(28px,3.4vw,48px) clamp(40px,4.2vw,64px); }
.l2a .l2a-hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--kit-gap-x); align-items:start; }
.l2a .l2a-hero h1 { margin:4px 0 22px; max-width:15em; }
.l2a .l2a-hero .l2a-lede { color:var(--kit-fg-2); font-size:var(--kit-t-lede); line-height:1.6; max-width:var(--kit-measure-deck); margin:0 0 26px; }
.l2a .l2a-actions { display:flex; flex-wrap:wrap; gap:12px; }
.l2a .l2a-actions + .muted { margin-top:16px; }
.l2a .l2a-updated { margin-top:20px; color:var(--kit-fg-3); font-size:var(--kit-t-sm); }

/* Offer panel: replaces leads' form panel. The form lives on leads.aglocom.com. */
.l2a .l2a-panel { background:var(--kit-surface); border:1px solid var(--kit-rule); border-radius:var(--kit-r-lg); padding:32px; }
.l2a .l2a-light .l2a-panel { background:var(--kit-bg); box-shadow:0 1px 2px rgba(13,17,23,.04),0 10px 30px -12px rgba(13,17,23,.12); }
.l2a .l2a-light:not(.alt) .l2a-panel { background:var(--kit-surface); box-shadow:none; }
.l2a .l2a-panel-title { font-size:var(--kit-t-h3); font-weight:800; letter-spacing:-.01em; margin:0 0 6px; }
.l2a .l2a-price { font-size:clamp(34px,3.6vw,46px); font-weight:800; letter-spacing:-.035em; line-height:1; margin:22px 0 6px; font-variant-numeric:tabular-nums; }
.l2a .l2a-price span { display:block; font-size:var(--kit-t-sm); font-weight:500; letter-spacing:0; line-height:1.5; color:var(--kit-fg-3); margin-top:12px; }
.l2a .l2a-panel .btn { width:100%; margin-top:20px; }

/* Numbered steps ("What happens next") */
.l2a .l2a-steps { list-style:none; margin:6px 0 0; padding:0; }
.l2a .l2a-steps li { display:grid; grid-template-columns:34px 1fr; gap:8px; padding:16px 0; border-top:1px solid var(--kit-rule); }
.l2a .l2a-steps li:first-child { border-top:0; }
.l2a .l2a-steps .n { color:var(--kit-fg-3); font-size:var(--kit-t-sm); font-variant-numeric:tabular-nums; padding-top:2px; }
.l2a .l2a-steps strong { display:block; font-size:var(--kit-t-h3); font-weight:700; letter-spacing:-.01em; }
.l2a .l2a-steps p { margin:2px 0 0; color:var(--kit-fg-2); font-size:var(--kit-t-sm); }

/* ── 5. Icon list (scope, "we set up and run") ───────────────────────────── */
.l2a .l2a-icons { list-style:none; margin:0; padding:0; }
.l2a .l2a-icons li { display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--kit-rule); color:var(--kit-fg-2); }
.l2a .l2a-icons li:first-child { border-top:0; }
.l2a .l2a-icons .ico { flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--kit-raised); color:var(--kit-fg); }
.l2a .l2a-light:not(.alt) .l2a-icons .ico { background:#fff; border:1px solid var(--kit-rule); }
.l2a .l2a-icons svg, .l2a .l2a-flow svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ── 6. Process line (5 steps, static: no travelling dot needed) ─────────── */
.l2a .l2a-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; position:relative; }
.l2a .l2a-flow::before { content:""; position:absolute; top:32px; left:10%; right:10%; height:2px; background:var(--kit-rule-2); }
.l2a .l2a-flow li { position:relative; text-align:center; display:grid; justify-items:center; gap:6px; }
.l2a .l2a-flow .node { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--kit-bg); border:1px solid var(--kit-rule-2); color:var(--kit-fg); position:relative; z-index:1; margin-bottom:10px; }
.l2a .l2a-flow .node svg { width:26px; height:26px; }
.l2a .l2a-flow strong { font-size:var(--kit-t-h3); font-weight:700; }
.l2a .l2a-flow p { margin:0; color:var(--kit-fg-2); font-size:var(--kit-t-sm); max-width:18ch; }

/* ── 7. Numbered points (problem section, no cards) ──────────────────────── */
.l2a .l2a-points { list-style:none; margin:18px 0 0; padding:0; max-width:760px; }
.l2a .l2a-points li { display:grid; grid-template-columns:60px minmax(0,1fr); column-gap:16px; padding:16px 0; border-top:1px solid var(--kit-rule); }
.l2a .l2a-points .pn { font-size:40px; font-weight:800; letter-spacing:-.05em; line-height:.95; color:#B9C2CE; font-variant-numeric:tabular-nums; }
.l2a .l2a-points h3 { font-size:var(--kit-t-h3); font-weight:700; line-height:1.3; margin:0 0 4px; }
.l2a .l2a-points p { margin:0; color:var(--kit-fg-2); font-size:15px; line-height:1.6; }

/* ── 8. Lists ────────────────────────────────────────────────────────────────
   One marker system. Marker is centred on the FIRST LINE with 1lh maths,
   never on the li box, so it cannot drift off the text. */
.l2a .l2a-list { list-style:none; margin:16px 0; padding:0; display:grid; gap:8px; }
.l2a .l2a-list li { position:relative; padding-left:22px; color:var(--kit-fg-2); line-height:1.65; }
.l2a .l2a-list li::before { content:""; position:absolute; left:0; top:calc(.825em - 1px); width:10px; height:2px; background:var(--kit-frozen); }
.l2a ol.l2a-list { counter-reset:l2a; }
.l2a ol.l2a-list li { counter-increment:l2a; padding-left:30px; }
.l2a ol.l2a-list li::before { content:counter(l2a); top:.15em; width:auto; height:auto; background:none; font-size:var(--kit-t-sm); font-weight:700; color:var(--kit-fg-3); font-variant-numeric:tabular-nums; }

/* Ticks / crosses (fit, do / don't) */
.l2a .l2a-fit { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-top:1px solid var(--kit-rule); }
.l2a .l2a-fit > div { padding:24px 40px 0 0; }
.l2a .l2a-fit > div + div { padding:24px 0 0 40px; border-left:1px solid var(--kit-rule); }
.l2a .l2a-ticks { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.l2a .l2a-ticks li { position:relative; padding-left:36px; color:var(--kit-fg-2); line-height:1.5; min-height:22px; }
.l2a .l2a-ticks li::before { content:""; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%;
  background:var(--kit-fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }
.l2a .l2a-ticks.no li::before { background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566172' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow:inset 0 0 0 1.5px var(--kit-rule-2); }

/* ── 9. Table ────────────────────────────────────────────────────────────── */
.l2a .l2a-table { overflow-x:auto; overscroll-behavior-x:contain; margin:24px 0; border:1px solid var(--kit-rule); border-radius:var(--kit-r-lg); background:var(--kit-bg); }
.l2a .l2a-table table { width:100%; min-width:560px; border-collapse:collapse; font-size:15px; }
.l2a .l2a-table th { text-align:left; padding:12px 16px; background:var(--kit-surface); color:var(--kit-fg-3); font-size:var(--kit-t-label); font-weight:600; letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid var(--kit-rule); }
.l2a .l2a-table td { padding:14px 16px; border-top:1px solid var(--kit-rule); color:var(--kit-fg-2); line-height:1.55; vertical-align:top; }
.l2a .l2a-table tr:first-child td { border-top:0; }
.l2a .l2a-table td:first-child { color:var(--kit-fg); font-weight:600; }
.l2a .l2a-table-note { font-size:var(--kit-t-sm); color:var(--kit-fg-3); margin-top:-12px; }

/* ── 10. FAQ: centred accordion cards (leads) ────────────────────────────── */
.l2a .l2a-faq-wrap { max-width:820px; margin-inline:auto !important; }
.l2a .l2a-faq-wrap > .l2a-head { text-align:center; margin-inline:auto; }
.l2a .l2a-faq-wrap > .l2a-head .kit-label { justify-content:center; }
.l2a .l2a-faq { display:grid; gap:10px; }
.l2a .l2a-faq details { background:var(--kit-surface); border:1px solid var(--kit-rule); border-radius:var(--kit-r-lg); transition:border-color var(--kit-transition); }
.l2a .l2a-faq details[open] { border-color:var(--kit-rule-2); background:var(--kit-bg); box-shadow:0 10px 30px -12px rgba(13,17,23,.15); }
.l2a .l2a-faq summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; min-height:44px; cursor:pointer; }
.l2a .l2a-faq summary::-webkit-details-marker { display:none; }
.l2a .l2a-faq summary h3 { margin:0; font-size:var(--kit-t-h3); font-weight:600; line-height:1.4; letter-spacing:-.01em; }
.l2a .l2a-faq summary::after { content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--kit-fg-3); border-bottom:2px solid var(--kit-fg-3); transform:translateY(-3px) rotate(45deg); transition:transform var(--kit-transition); }
.l2a .l2a-faq details[open] summary::after { transform:translateY(3px) rotate(-135deg); }
.l2a .l2a-faq .a { padding:0 22px 20px; color:var(--kit-fg-2); }
.l2a .l2a-faq .a p { margin:0 0 10px; } .l2a .l2a-faq .a p:last-child { margin:0; }

/* ── 11. CTA band (dark, text + action) ──────────────────────────────────── */
.l2a .l2a-cta { background:var(--kit-surface); border-top:1px solid var(--kit-rule); }
.l2a .l2a-cta-inner { display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:var(--kit-gap-x); align-items:end; }
.l2a .l2a-cta .kit-h2 { margin:0 0 14px; }

/* ── 12. Related links: cards with an arrow ──────────────────────────────── */
.l2a .l2a-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
/* body.l2a … li > a beats components.css `body:not(.schools-body) li > a:only-child` (inline-flex) */
body.l2a .l2a-cards li > a.l2a-card { display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:start; height:100%; min-height:44px; padding:18px 20px; border:1px solid var(--kit-rule); border-radius:var(--kit-r-lg); background:var(--kit-bg); color:var(--kit-fg); text-decoration:none; transition:border-color var(--kit-transition),transform var(--kit-transition),box-shadow var(--kit-transition); }
.l2a .l2a-light.alt .l2a-card, .l2a .l2a-band .l2a-card { background:var(--kit-bg); }
.l2a .l2a-card strong { font-weight:700; line-height:1.35; }
.l2a .l2a-card span.d { grid-column:1; color:var(--kit-fg-3); font-size:var(--kit-t-sm); line-height:1.5; }
.l2a .l2a-card::after { content:"→"; grid-column:2; grid-row:1; font-weight:600; color:var(--kit-fg-3); transition:transform var(--kit-transition),color var(--kit-transition); }
.l2a .l2a-card:hover { border-color:var(--kit-fg-3); box-shadow:0 10px 24px -16px rgba(13,17,23,.35); }
.l2a .l2a-card:hover::after { transform:translateX(3px); color:var(--kit-fg); }
.l2a .l2a-card:hover strong { text-decoration:underline; text-underline-offset:3px; }
.l2a .l2a-links-group + .l2a-links-group { margin-top:28px; }
.l2a .l2a-links-group > .kit-label { display:flex; }

/* City chips: compact link pills for "Other cities" */
.l2a .l2a-chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
body.l2a .l2a-chips li > a.l2a-chip { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--kit-rule-2); border-radius:999px; color:var(--kit-fg); font-weight:600; font-size:15px; text-decoration:none; }
.l2a .l2a-chips a::after { content:"→"; color:var(--kit-fg-3); }
.l2a .l2a-chips a:hover { border-color:var(--kit-fg); }

/* ── 13. GUIDE template (Nine blog layer, Aglocom language) ───────────────── */
.l2a .l2a-guide-head { padding-block:clamp(32px,4vw,56px) 0; }
.l2a .l2a-guide-head h1 { font-size:clamp(32px,4.1vw,52px); font-weight:800; letter-spacing:-.03em; line-height:1.06; margin:6px 0 22px; max-width:22em; }
.l2a .l2a-byline { display:flex; align-items:center; gap:12px; margin:0 0 22px; color:var(--kit-fg-2); font-size:15px; }
.l2a .l2a-byline img, .l2a .l2a-mono { flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; }
.l2a .l2a-byline strong { color:var(--kit-fg); font-weight:700; }
.l2a .l2a-byline a { color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--kit-rule-2); }
.l2a .l2a-meta { display:flex; flex-wrap:wrap; margin:0; border-top:1px solid var(--kit-rule); border-bottom:1px solid var(--kit-rule); }
.l2a .l2a-meta span { font-size:var(--kit-t-label); font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--kit-fg-3); padding:13px 22px; border-left:1px solid var(--kit-rule); }
.l2a .l2a-meta span:first-child { padding-left:0; border-left:0; }

.l2a .l2a-post { display:grid; grid-template-columns:220px minmax(0,700px); gap:0 56px; align-items:start; padding-block:40px clamp(48px,5vw,80px); }
.l2a .l2a-toc { position:sticky; top:96px; max-height:calc(100vh - 130px); overflow:auto; border-left:1px solid var(--kit-rule); padding-left:20px; }
.l2a .l2a-toc summary { list-style:none; font-size:var(--kit-t-label); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--kit-fg-3); margin:0 0 14px; }
.l2a .l2a-toc summary::-webkit-details-marker { display:none; }
.l2a .l2a-toc ol { list-style:none; margin:0; padding:0; }
.l2a .l2a-toc li { margin:0; }
.l2a .l2a-toc a { position:relative; display:block; padding:6px 0; font-size:13.5px; line-height:1.42; color:var(--kit-fg-2); text-decoration:none; }
.l2a .l2a-toc a:hover { color:var(--kit-fg); text-decoration:underline; text-underline-offset:3px; }
.l2a .l2a-toc a.is-here { color:var(--kit-fg); font-weight:600; }
.l2a .l2a-toc a.is-here::before { content:""; position:absolute; left:-21px; top:6px; bottom:6px; width:2px; background:var(--kit-fg); }

.l2a .l2a-article { min-width:0; }
.l2a .l2a-article > p, .l2a .l2a-article li { font-size:17.5px; line-height:1.75; color:var(--kit-fg-2); }
.l2a .l2a-article > p { margin:0 0 1.1em; }
.l2a .l2a-article strong { color:var(--kit-fg); font-weight:600; }
.l2a .l2a-article h2 { font-size:clamp(24px,2.3vw,30px); font-weight:800; letter-spacing:-.025em; line-height:1.2; margin:56px 0 16px; padding-top:20px; position:relative; scroll-margin-top:96px; }
.l2a .l2a-article h2::before { content:""; position:absolute; top:0; left:0; width:30px; height:3px; background:var(--kit-fg); }
.l2a .l2a-article h3 { font-size:var(--kit-t-h3); font-weight:700; line-height:1.34; margin:32px 0 10px; }

/* Short answer card — keyed on <h2>Short answer</h2> (same rule as Nine) */
.l2a .l2a-answer { position:relative; margin:28px 0 44px; padding:34px 30px 22px; background:var(--kit-surface); border:1px solid var(--kit-rule); border-radius:var(--kit-r-lg); }
.l2a .l2a-answer h2 { position:absolute; top:-13px; left:24px; margin:0; padding:6px 12px; background:var(--kit-fg); color:var(--kit-bg); border-radius:3px; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; line-height:1.2; }
.l2a .l2a-answer h2::before { display:none; }
.l2a .l2a-answer p { font-size:17px; line-height:1.7; color:var(--kit-fg-2); margin:0 0 .8em; }
.l2a .l2a-answer p:last-child { margin:0; }
.l2a .l2a-answer p:first-of-type > strong:first-child { display:block; font-size:20px; line-height:1.45; font-weight:700; letter-spacing:-.01em; color:var(--kit-fg); margin:0 0 12px; }

/* Callout (source note, "not legal advice", assumptions) */
.l2a .l2a-note { margin:24px 0; padding:16px 18px; border-left:3px solid var(--kit-fg-3); background:var(--kit-surface); border-radius:0 var(--kit-r) var(--kit-r) 0; color:var(--kit-fg-2); font-size:15px; }

/* In-article CTA (replaces Nine's dark .ne-cta) */
.l2a .l2a-inline-cta { margin:48px 0 0; padding:28px 30px; background:#0D1117; color:#EEF1F5; border-radius:var(--kit-r-lg); }
.l2a .l2a-inline-cta h2 { margin:0 0 8px; padding:0; color:#fff; font-size:22px; }
.l2a .l2a-inline-cta h2::before { display:none; }
.l2a .l2a-inline-cta p { color:#A3ADBB; margin:0 0 18px; font-size:16px; }

/* Author box */
.l2a .l2a-author { display:flex; gap:18px; align-items:flex-start; margin:52px 0 0; padding:26px 0 0; border-top:1px solid var(--kit-rule); }
.l2a .l2a-author img, .l2a .l2a-author .l2a-mono { width:56px; height:56px; flex:none; border-radius:50%; object-fit:cover; }
.l2a .l2a-mono { display:grid; place-items:center; background:#0D1117; color:#fff; font-size:15px; font-weight:700; letter-spacing:.06em; }
.l2a .l2a-author-n { font-size:17px; font-weight:700; color:var(--kit-fg); margin:2px 0 4px; }
.l2a .l2a-author-b { font-size:15px; line-height:1.62; color:var(--kit-fg-2); margin:0; }

/* Guide FAQ: open list, not cards (as Nine) */
.l2a .l2a-article .l2a-faq { gap:0; border-top:1px solid var(--kit-rule); }
.l2a .l2a-article .l2a-faq details, .l2a .l2a-article .l2a-faq details[open] { background:none; border:0; border-bottom:1px solid var(--kit-rule); border-radius:0; box-shadow:none; }
.l2a .l2a-article .l2a-faq summary { padding:18px 0; }
.l2a .l2a-article .l2a-faq .a { padding:0 0 18px; }

/* ── 14. Responsive ─────────────────────────────────────────────────────── */
@media (max-width:900px){
  .l2a .l2a-hero-grid, .l2a .l2a-cta-inner { grid-template-columns:1fr; }
  .l2a .l2a-panel { padding:24px; }
  .l2a .l2a-cards { grid-template-columns:1fr 1fr; }
  .l2a .l2a-flow { grid-template-columns:1fr; gap:0; }
  .l2a .l2a-flow li { grid-template-columns:64px 1fr; text-align:left; justify-items:start; column-gap:18px; row-gap:2px; padding-bottom:22px; }
  .l2a .l2a-flow .node { grid-row:span 2; margin:0; }
  .l2a .l2a-flow strong { align-self:end; }
  .l2a .l2a-flow p { max-width:none; }
  .l2a .l2a-flow::before { top:32px; bottom:60px; left:31px; right:auto; width:2px; height:auto; }
  .l2a .l2a-post { display:block; padding-top:24px; }
  .l2a .l2a-toc { position:static; max-height:none; overflow:visible; margin:0 0 30px; border:1px solid var(--kit-rule); border-radius:var(--kit-r-lg); padding:12px 18px; }
  .l2a .l2a-toc summary { margin:0; min-height:28px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
  .l2a .l2a-toc summary::after { content:""; width:9px; height:9px; border-right:2px solid var(--kit-fg-3); border-bottom:2px solid var(--kit-fg-3); transform:translateY(-3px) rotate(45deg); }
  .l2a .l2a-toc[open] summary { margin-bottom:8px; padding-bottom:10px; border-bottom:1px solid var(--kit-rule); }
  .l2a .l2a-toc[open] summary::after { transform:translateY(2px) rotate(-135deg); }
  .l2a .l2a-toc a { padding:9px 0; font-size:15px; }
}
@media (max-width:640px){
  .l2a .l2a-hero h1.kit-display { font-size:clamp(34px,10vw,48px); line-height:1.06; letter-spacing:-.025em; }
  .l2a .l2a-actions .btn { width:100%; }
  .l2a .l2a-cards { grid-template-columns:1fr; }
  .l2a .l2a-points li { grid-template-columns:48px minmax(0,1fr); column-gap:14px; }
  .l2a .l2a-points .pn { font-size:32px; }
  .l2a .l2a-fit { grid-template-columns:1fr; border-top:0; }
  .l2a .l2a-fit > div, .l2a .l2a-fit > div + div { padding:22px 0 0; border-left:0; border-top:1px solid var(--kit-rule); }
  .l2a .l2a-faq summary { padding:16px 18px; } .l2a .l2a-faq .a { padding:0 18px 18px; }
  .l2a .l2a-faq summary h3 { font-size:16px; }
  .l2a .l2a-meta span { padding:10px 16px 10px 0; border-left:0; font-size:10.5px; }
  .l2a .l2a-article > p, .l2a .l2a-article li { font-size:17px; line-height:1.72; }
  .l2a .l2a-answer { padding:32px 18px 18px; }
  .l2a .l2a-answer h2 { left:14px; }
  .l2a .l2a-answer p:first-of-type > strong:first-child { font-size:18.5px; }
  .l2a .l2a-inline-cta { padding:24px 20px; }
}

/* ── Footer/list dash fix, scoped to the 13 L2A pages only (body.l2a).
   The site-wide version is l2a-notes/design/footer-fix.css and still needs Nihanth's yes. */
body.l2a .bullet-list li:has(> a:only-child) { padding-left: 0; }
body.l2a .bullet-list li:has(> a:only-child)::before { content: none; }
body.l2a .bullet-list li > a:only-child {
  gap: calc(var(--space-3) + 0.7em - 5px);
  align-items: center;
}
body.l2a .bullet-list li > a:only-child::before {
  content: ''; flex: none; width: 5px; height: 1px; background: var(--frozen);
}
/* Footer link lists: they are navigation, not prose. Drop the marker, keep the
   44px rows, and show they are links on hover/focus. */
body.l2a .site-footer .bullet-list { gap: 0; }
body.l2a .site-footer .bullet-list li > a:only-child::before { content: none; }
body.l2a .site-footer .bullet-list a { color: var(--text-secondary); font-size: var(--text-sm); }
body.l2a .site-footer .bullet-list a:hover,
body.l2a .site-footer .bullet-list a:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ── Proof strip (decision 5, pending): three stat panels copied from leads.aglocom.com Results.
   Markup: <div class="l2a-stats"><div class="l2a-panel l2a-stat"><p class="big"><span class="from">₹260</span> → <span class="to">₹67</span></p><p>…</p></div>…</div> ── */
body.l2a .l2a-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
body.l2a .l2a-stat .big { font-size:clamp(28px,3vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.1; margin:0 0 8px; font-variant-numeric:tabular-nums; color:var(--text); }
body.l2a .l2a-stat .from { color:var(--frozen, var(--kit-frozen)); }
body.l2a .l2a-stat .to { color:var(--up, var(--kit-up)); }
body.l2a .l2a-stat p:last-child { color:var(--text-secondary); font-size:var(--kit-t-sm, 13.5px); margin:0; }
@media (max-width:900px){ body.l2a .l2a-stats { grid-template-columns:1fr; } }

/* ── Narrow phones: the long "Request a free 30-minute call" label is nowrap in base.css and pushed pages
   wider than 320px. Let buttons wrap below 400px. (Promoted from the 21 Oct page builds.) ── */
@media (max-width:400px){ body.l2a main .btn { white-space:normal; text-align:center; } }
body.l2a .l2a-flow li { align-content:start; }