/* AdRefresh v28 — marketing.css (theme: dark)
   Serves: templates/pages/news/list.html, pages/news/detail.html, pages/pricing.html (+ pages/_pricing_cta.html,
           also the plan cards of dashboard/_plan_cards.html on the light app pages),
           templates/Privacy-policy.html, templates/Terms-of-service.html.
   Loaded after app.css via {% block extra_css %}; builds on the shell's v- components (APP_SHELL.md).
   Page prefixes: .nl- news list · .na- news article · .pr- pricing · .lg- legal.
   Recipes follow landing.css (news cards, plan cards + Team membrane rim, "included" panel) under non-colliding names.
   The category gradients and the cover overlays are content/imagery colours copied from landing.css, not theme tokens. */

/* ───────────────────────── news: shared ───────────────────────── */
.cat-ai{ --cat:linear-gradient(135deg,#6a5cff,#016eeb); }
.cat-ads{ --cat:linear-gradient(135deg,#016eeb,#19b6ff); }
.cat-dtc{ --cat:linear-gradient(135deg,#ff6a88,#ff9a44); }
.cat-platforms{ --cat:linear-gradient(135deg,#0bbf9a,#16a7ff); }
.cat-playbook{ --cat:linear-gradient(135deg,#2e9e5b,#8fd14f); }

/* covers: category gradient by default; an inline style="background-image:url(…)" replaces it (never !important here) */
.nl-cover, .nl-feat-cover, .na-cover, .na-rel-cover{
  position:relative; overflow:hidden; isolation:isolate;
  background-color:var(--surface-2);
  background-image:var(--cat, linear-gradient(135deg,#016eeb,#19b6ff));
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* the landing's cover treatment: dot grid + corner vignette */
.nl-cover::after, .nl-feat-cover::after, .na-cover::after, .na-rel-cover::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.5px) 0 0/14px 14px,
    radial-gradient(90% 120% at 100% 100%, rgba(3,5,10,.62), transparent 62%),
    linear-gradient(180deg, rgba(3,5,10,.15), rgba(3,5,10,.15));
}
/* no cover image: a small colony of copies (one fresh, one burned out), tinted by the category gradient */
.nl-cover:not(.is-img)::before, .nl-feat-cover:not(.is-img)::before, .na-cover:not(.is-img)::before, .na-rel-cover:not(.is-img)::before{
  content:""; position:absolute; z-index:1; inset:8% 3% 8% 30%; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120' fill='none' stroke='white'%3E%3Cg stroke-opacity='.42' fill='white' fill-opacity='.07'%3E%3Crect x='40.5' y='10.5' width='24' height='42' rx='6'/%3E%3Crect x='70.5' y='4.5' width='24' height='42' rx='6'/%3E%3Crect x='130.5' y='6.5' width='24' height='42' rx='6'/%3E%3Crect x='55.5' y='62.5' width='24' height='42' rx='6'/%3E%3Crect x='115.5' y='64.5' width='24' height='42' rx='6'/%3E%3C/g%3E%3Crect x='100.5' y='12.5' width='24' height='42' rx='6' fill='white' fill-opacity='.2' stroke-opacity='.9'/%3E%3Crect x='85.5' y='56.5' width='24' height='42' rx='6' stroke-opacity='.28' stroke-dasharray='3 3'/%3E%3Cg fill='white' stroke='none'%3E%3Crect x='104' y='18' width='12' height='3' rx='1.5' fill-opacity='.8'/%3E%3Crect x='104' y='45' width='16' height='4' rx='2' fill-opacity='.8'/%3E%3C/g%3E%3C/svg%3E") right center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.18));
}
.na-rel-cover:not(.is-img)::before{ inset:10% 4% 10% 22%; }
/* category pill on a cover (always over imagery, so a fixed dark glass + white label) */
.nl-tag{
  position:absolute; z-index:2; left:14px; top:14px; padding:6px 10px; border-radius:var(--r-pill);
  background:rgba(3,5,10,.58); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font:500 10.5px/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:#fff;
}
.nl-meta, .na-meta{ font:500 12px/1.4 var(--font-mono); letter-spacing:0; color:var(--text-3); }

/* ───────────────────────── news list ───────────────────────── */
.nl-head{ margin-bottom:28px; }
.nl-head .v-page-head__title{ max-width:16ch; }

.nl-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(24px, 3vw, 36px); padding:0; }
.nl-chip.v-chip{ padding:9px 14px; }

.nl-feat, .nl-card{
  overflow:hidden; border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--edge);
  color:inherit; text-decoration:none;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.nl-feat:hover, .nl-card:hover{ color:inherit; transform:translateY(-2px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent), var(--lift); }

.nl-feat{ display:grid; grid-template-columns:minmax(0, 1fr); margin-bottom:20px; }
.nl-feat > *{ min-width:0; }
.nl-feat-cover{ aspect-ratio:16 / 8; }
.nl-feat-body{ display:flex; flex-direction:column; justify-content:center; gap:14px; padding:24px 24px 28px; }
.nl-feat-title{ margin:0; font:600 clamp(23px, calc(1.1vw + 17px), 34px)/1.14 var(--font-sans); letter-spacing:-.03em; color:var(--text-1); text-wrap:balance; }
.nl-feat-excerpt{ max-width:52ch; margin:0; font-size:var(--fs-lede); line-height:1.55; color:var(--text-2); text-wrap:pretty; }
.nl-feat-more{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-weight:500; color:var(--link); }
.nl-feat-more .v-arr{ display:inline-block; transition:transform var(--dur-2) var(--ease-out); }
.nl-feat:hover .nl-feat-more{ color:var(--link-hover); }
.nl-feat:hover .nl-feat-more .v-arr{ transform:translateX(3px); }
@media (min-width:600px){ .nl-feat-cover{ aspect-ratio:16 / 7; } .nl-feat-body{ padding:28px 32px 32px; } }
@media (min-width:900px){
  .nl-feat{ grid-template-columns:minmax(0, 1.12fr) minmax(0, 1fr); margin-bottom:24px; }
  .nl-feat-cover{ aspect-ratio:auto; min-height:340px; }
  .nl-feat-body{ padding:40px 44px; }
}

.nl-grid{ display:grid; gap:16px; grid-template-columns:minmax(0, 1fr); }
.nl-grid > *{ min-width:0; }
.nl-card{ display:flex; flex-direction:column; }
.nl-cover{ flex:none; aspect-ratio:16 / 8; }
.nl-body{ display:flex; flex-direction:column; gap:10px; flex:1; padding:22px 24px; }
.nl-card-title{ margin:0; font:600 19px/1.3 var(--font-sans); letter-spacing:-.015em; color:var(--text-1); text-wrap:balance; }
.nl-card-excerpt{ margin:0; font-size:15px; line-height:1.55; color:var(--text-2); }
.nl-body .nl-meta{ margin-top:auto; padding-top:6px; }
@media (min-width:620px){ .nl-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
/* 2 columns with an odd count: the last card spans both, cover left and text right (no orphan) */
@media (min-width:620px) and (max-width:919px){
  .nl-card:nth-child(odd):last-child{ grid-column:1 / -1; flex-direction:row; }
  .nl-card:nth-child(odd):last-child .nl-cover{ flex:0 0 calc(50% - 8px); aspect-ratio:auto; min-height:200px; }
}
@media (min-width:920px){ .nl-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; } }

/* pager: the shell's .pagination (app.css §11), same "Prev · Page X of Y · Next" pattern as the task lists; only spacing is page-level */
.nl-pager{ margin-top:clamp(32px, 4vw, 48px); }
/* Bootstrap 4's .page-link:focus{outline:0} (0,2,0) outranks the shell's :focus-visible ring; put it back (reported to the shell owner) */
.nl-pager .page-link:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* ───────────────────────── news article ───────────────────────── */
.na-back{ display:inline-flex; align-items:center; gap:8px; margin-bottom:clamp(20px, 3vw, 32px); font-size:14.5px; }
.na-back > span{ display:inline-block; transition:transform var(--dur-2) var(--ease-out); }
.na-back:hover > span{ transform:translateX(-3px); }
.na-head{ margin-bottom:clamp(22px, 3vw, 32px); }
.na-tag{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:6px 11px 6px 9px; border-radius:var(--r-pill);
  font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-2);
  box-shadow:var(--edge-2);
}
.na-tag::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--cat, var(--blue)); }
.na-title{ margin:0; font:600 clamp(28px, calc(2vw + 20px), 48px)/1.06 var(--font-sans); letter-spacing:-.035em; color:var(--text-1); text-wrap:balance; }
.na-head .na-meta{ margin:16px 0 0; font-size:12.5px; }
.na-cover{ aspect-ratio:16 / 7; margin-bottom:clamp(28px, 4vw, 40px); border-radius:var(--r-xl); box-shadow:var(--edge); }
.na-body > p:first-child{ font-size:clamp(18px, calc(.3vw + 16px), 20px); line-height:1.6; color:var(--text-1); }
.na-source{ margin-top:36px; padding-top:18px; border-top:1px solid var(--line); font:500 12.5px/1.6 var(--font-mono); color:var(--text-3); overflow-wrap:anywhere; }
.na-source a{ color:var(--link); text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px; }
.na-source a:hover{ color:var(--link-hover); text-decoration-color:currentColor; }

.na-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; margin-top:clamp(40px, 5vw, 56px); }
.na-cta > div{ flex:1 1 300px; min-width:0; }
.na-cta-title{ margin:0; font:600 21px/1.25 var(--font-sans); letter-spacing:-.02em; color:var(--text-1); }
.na-cta-sub{ margin:6px 0 0; font-size:15px; line-height:1.55; color:var(--text-2); }
@media (max-width:599px){ .na-cta-btn{ width:100%; } }

.na-related{ margin-top:clamp(48px, 6vw, 72px); }
.na-rel-grid{ display:grid; gap:14px; grid-template-columns:minmax(0, 1fr); }
.na-rel-grid > *{ min-width:0; }
.na-rel{
  display:grid; grid-template-columns:112px minmax(0, 1fr); align-items:stretch; overflow:hidden;
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--edge); color:inherit; text-decoration:none;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.na-rel:hover{ color:inherit; transform:translateY(-2px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 30%, transparent), var(--lift); }
.na-rel-cover{ min-height:84px; }
.na-rel-t{ align-self:center; padding:14px 16px; font:600 15px/1.35 var(--font-sans); letter-spacing:-.01em; color:var(--text-1); }
@media (min-width:600px){
  .na-rel-grid{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
  .na-rel{ grid-template-columns:minmax(0, 1fr); align-content:start; border-radius:var(--r-xl); }
  .na-rel-cover{ aspect-ratio:16 / 8; min-height:0; }
  .na-rel-t{ align-self:start; padding:16px 18px 18px; }
}

/* ───────────────────────── pricing ───────────────────────── */
.pr-page{ background:radial-gradient(52% 38% at 50% 40%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 72%); }
.pr-head{ margin-bottom:clamp(32px, 4vw, 52px); }
.pr-grid{ display:grid; gap:16px; grid-template-columns:minmax(0, 1fr); }
.pr-grid > *{ min-width:0; }
.pr-card{
  position:relative; display:flex; flex-direction:column; padding:28px;
  border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--edge); color:var(--text-2);
}
.pr-card.popular{
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 16%, transparent), transparent 42%), var(--surface);
  box-shadow:0 30px 80px -34px color-mix(in srgb, var(--blue) 70%, transparent);
}
/* the viewer's plan (the CTA partial renders .pr-cta-current there; not the "scheduled" pill) */
.pr-card:not(.popular):has(.pr-cta-current:not(.pr-cta-scheduled)){ box-shadow:inset 0 0 0 1px var(--tone-success-line); }
/* Team membrane rim: a slow conic sweep on a 1px masked ring (landing .plan__rim) */
@property --pr-rim-a{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.pr-rim{
  position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--pr-rim-a),
    color-mix(in srgb, var(--cyan) 95%, transparent), color-mix(in srgb, var(--blue) 55%, transparent) 12%,
    color-mix(in srgb, var(--line-2) 67%, transparent) 28%, color-mix(in srgb, var(--line-2) 67%, transparent) 50%,
    color-mix(in srgb, var(--blue) 55%, transparent) 64%, color-mix(in srgb, var(--cyan) 95%, transparent) 76%,
    color-mix(in srgb, var(--line-2) 83%, transparent) 90%, color-mix(in srgb, var(--cyan) 95%, transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:pr-rim 12s linear infinite;
}
@keyframes pr-rim{ to{ --pr-rim-a:360deg; } }
.pr-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:30px; }
.pr-name{ margin:0; font:600 22px/1.2 var(--font-sans); letter-spacing:-.02em; color:var(--text-1); }
.pr-badge.v-chip{ padding:6px 10px; }
.pr-tag{ margin-top:6px; font-size:15px; line-height:1.45; color:var(--text-2); }
.pr-price{ display:flex; align-items:baseline; gap:10px; margin-top:26px; }
.pr-price-val{ font:600 var(--fs-price)/1 var(--font-sans); letter-spacing:-.04em; color:var(--text-1); font-variant-numeric:tabular-nums; }
.pr-price-per{ font:500 12.5px/1 var(--font-mono); color:var(--text-3); }
.pr-cta-form, .pr-card > .pr-cta{ margin:24px 0 0; }
.pr-cta-current{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:52px; padding:0 20px;
  border-radius:var(--r-pill); font:600 15px/1.15 var(--font-sans); letter-spacing:-.01em;
  color:var(--tone-success-text); background:var(--tone-success-bg); box-shadow:inset 0 0 0 1px var(--tone-success-line);
  cursor:default; pointer-events:none;
}
@media (max-width:599px){ .pr-cta-current{ min-height:48px; } }
/* plan-card actions (pages/_pricing_cta.html with `a` = payment.billing action; BILLING_CONTRACT.md §4):
   button/form/pill + an optional note (effect, date) or reason (why it can't be done). Light + dark via tokens. */
.pr-act{ display:flex; flex-direction:column; gap:10px; margin:24px 0 0; }
.pr-act > .pr-cta-form{ margin:0; }
.pr-act__note, .pr-act__why{ margin:0; font-size:13.5px; line-height:1.45; color:var(--text-3); text-align:center; text-wrap:pretty; }
.pr-act--downgrade_blocked .pr-act__why{ color:var(--tone-warning-text); }
.pr-act__why a{ color:var(--link); font-weight:500; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px; white-space:nowrap; }
.pr-act__why a:hover{ color:var(--link-hover); text-decoration-color:currentColor; }
.pr-act__info{
  display:flex; align-items:center; justify-content:center; min-height:52px; margin:0; padding:10px 18px;
  border-radius:var(--r-md); background:var(--surface-2); box-shadow:var(--edge);
  font-size:14px; line-height:1.4; color:var(--text-2); text-align:center; text-wrap:balance;
}
/* a change that isn't possible right now: a quiet dashed outline (the reason sits under it) */
.pr-act .v-btn[aria-disabled="true"], .pr-act .v-btn[aria-disabled="true"]:hover{
  opacity:1; filter:none; color:var(--text-3); background:transparent; box-shadow:none; border:1px dashed var(--line-2);
}
.pr-cta-scheduled{ color:var(--tone-info-text); background:var(--tone-info-bg); box-shadow:inset 0 0 0 1px var(--tone-info-line); }
.pr-cta-scheduled svg{ flex:none; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* /pricing: the signed-in viewer's plan, above the cards */
.pr-mine{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 20px;
  width:fit-content; max-width:100%; margin:0 auto clamp(24px, 3vw, 36px); padding:12px 22px;
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--edge); text-align:center;
}
.pr-mine p{ margin:0; }
.pr-mine__plan{ color:var(--text-2); }
.pr-mine__plan .v-label{ margin-right:6px; }
.pr-mine__plan strong{ font-weight:600; color:var(--text-1); }
.pr-mine__meta{ font-size:14px; color:var(--text-3); }
.pr-mine__meta:empty{ display:none; }
.pr-mine__link{ font-size:14.5px; font-weight:500; }
.pr-feats{
  display:grid; gap:12px; margin:26px 0 0; padding:24px 0 0; list-style:none; border-top:1px solid var(--line);
  font-size:15px; line-height:1.45; color:var(--text-2);
}
.pr-feats li, .pr-incl-item{ position:relative; padding-left:26px; }
.pr-feats li::before, .pr-incl-item::before{
  content:""; position:absolute; left:0; top:2px; width:16px; height:16px; background:var(--cyan);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center/16px no-repeat;
}
.pr-feats b, .pr-incl-item b{ font-weight:500; color:var(--text-1); }
/* single column (<1080): the featured Team card leads, as before the redesign (inventory §2.10).
   Visual order only — DOM/Tab order stays Basic, Team, Enterprise (same trade-off as the 2019 page). */
@media (max-width:1079px){ .pr-card.popular{ order:-1; } }
@media (min-width:700px) and (max-width:1079px){
  .pr-grid{ gap:20px; }
  .pr-card{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); column-gap:36px; align-content:start; padding:32px; }
  .pr-card > :not(.pr-feats):not(.pr-rim){ grid-column:1; }
  .pr-feats{ grid-column:2; grid-row:1 / span 6; align-self:start; margin-top:0; padding:0 0 0 32px; border-top:0; border-left:1px solid var(--line); }
}
@media (min-width:1080px){
  .pr-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
  .pr-card{ padding:32px; }
}

.pr-incl{ margin-top:clamp(56px, 7vw, 88px); }
.pr-incl-head{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:24px; }
.pr-incl-head h2{ margin:0; font-size:var(--fs-section); }
.pr-incl-sub{ max-width:56ch; margin:10px 0 0; font-size:15px; color:var(--text-3); text-wrap:balance; }
.pr-incl-panel{
  position:relative; padding:26px 22px; border-radius:var(--r-xl);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 66%, transparent), color-mix(in srgb, var(--surface) 66%, transparent));
  box-shadow:var(--edge);
}
.pr-incl-panel::after{ /* safe-zone corner brackets (the hero frame motif) */
  content:""; position:absolute; inset:14px; pointer-events:none;
  background:
    linear-gradient(var(--brackets-c),var(--brackets-c)) left top/14px 1px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) left top/1px 14px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) right top/14px 1px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) right top/1px 14px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--brackets-c),var(--brackets-c)) right bottom/1px 14px no-repeat;
}
.pr-incl-grid{ display:grid; gap:14px 32px; grid-template-columns:minmax(0, 1fr); }
.pr-incl-item{ font-size:15px; line-height:1.5; color:var(--text-2); }
@media (min-width:600px){ .pr-incl-panel{ padding:32px 34px; } .pr-incl-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1080px){ .pr-incl-panel{ padding:36px 44px; } .pr-incl-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px 40px; } }
.pr-note{ margin:28px auto 0; max-width:64ch; text-align:center; font-size:14.5px; line-height:1.6; color:var(--text-3); text-wrap:balance; }
.pr-note a{ color:var(--link); font-weight:500; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px; }
.pr-note a:hover{ color:var(--link-hover); text-decoration-color:currentColor; }

/* ───────────────────────── legal (Privacy, Terms) ───────────────────────── */
.lg-head{ padding-bottom:clamp(22px, 3vw, 32px); margin-bottom:clamp(24px, 4vw, 44px); border-bottom:1px solid var(--line); }
.lg-head .v-page-head__actions{ align-self:flex-end; }
.lg-updated{ margin:16px 0 0; font:500 12.5px/1.4 var(--font-mono); color:var(--text-3); }
.lg-updated strong{ font-weight:500; color:var(--text-2); }
.lg-grid{ display:grid; gap:24px; grid-template-columns:minmax(0, 1fr); }
.lg-grid > *{ min-width:0; }
.lg-body{ max-width:740px; } /* the reading column narrows; the page wrap stays at --maxw so the header aligns with the nav and footer */

/* table of contents: desktop sidebar (sticky) + mobile <details>; both lists link to the section ids */
.lg-toc{ display:none; }
.lg-toc-title{ margin:0 0 14px; font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
.lg-toc ul, .lg-toc-m ul{ margin:0; padding:0; list-style:none; }
.lg-toc ul{ border-left:1px solid var(--line); }
.lg-toc li a{
  display:block; margin-left:-1px; padding:6px 0 6px 14px; border-left:1px solid transparent;
  font-size:14px; line-height:1.4; color:var(--text-2); transition:color var(--dur-1), border-color var(--dur-1);
}
.lg-toc li a:hover{ color:var(--text-1); border-left-color:var(--cyan); }
@media (min-width:981px){
  .lg-grid{ grid-template-columns:232px minmax(0, 1fr); gap:clamp(40px, 5vw, 72px); }
  .lg-toc{ display:block; position:sticky; top:calc(var(--nav-h) + 28px); align-self:start; max-height:calc(100vh - var(--nav-h) - 56px); overflow:auto; overscroll-behavior:contain; padding:2px 4px 8px 2px; }
  .lg-toc-m{ display:none; }
}
.lg-toc-m{ border-radius:var(--r-md); background:var(--surface); box-shadow:var(--edge); }
.lg-toc-m summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 18px;
  list-style:none; cursor:pointer; border-radius:var(--r-md);
  font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-1);
}
.lg-toc-m summary::-webkit-details-marker{ display:none; }
.lg-toc-m summary::after{
  content:""; flex:none; width:16px; height:16px; background:var(--chevron) center/16px no-repeat;
  transition:transform var(--dur-2) var(--ease-out);
}
.lg-toc-m[open] summary::after{ transform:rotate(180deg); }
.lg-toc-m ul{ padding:4px 18px 14px; border-top:1px solid var(--line); }
.lg-toc-m li a{ display:block; padding:9px 0; font-size:15px; line-height:1.4; color:var(--text-2); }
.lg-toc-m li + li a{ border-top:1px solid var(--line); }
.lg-toc-m li a:hover{ color:var(--text-1); }

/* the document: long-form reading on dark (v-prose + section rules) */
.lg-body.v-prose{ font-size:17px; line-height:1.72; }
.lg-body.v-prose h2{
  margin-top:2.4em; padding-top:1.3em; border-top:1px solid var(--line);
  font-size:clamp(21px, calc(.6vw + 16px), 26px); letter-spacing:-.025em;
}
.lg-body.v-prose .lg-callout + h2{ margin-top:1.8em; padding-top:0; border-top:0; }
.lg-body.v-prose h3{ margin-top:1.6em; font-size:18px; letter-spacing:-.01em; }
.lg-body.v-prose small{ font-size:14px; color:var(--text-3); }
.lg-body.v-prose em{ color:var(--text-1); }
.lg-callout{
  padding:16px 20px; border-radius:var(--r-md); color:var(--text-1);
  background:var(--tone-info-bg); box-shadow:inset 0 0 0 1px var(--tone-info-line);
}
.lg-kvs{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.lg-kv{ min-width:0; padding:14px 16px; border-radius:var(--r-md); background:var(--surface); box-shadow:var(--edge); font-size:15px; line-height:1.55; overflow-wrap:anywhere; }
.lg-kv strong{ display:inline-block; margin-bottom:4px; font:500 var(--fs-label)/1.4 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
.lg-plans{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.lg-plan{ min-width:0; padding:18px 18px 16px; border-radius:var(--r-md); background:var(--surface); box-shadow:var(--edge); font-size:15px; line-height:1.55; }
.lg-body.v-prose .lg-plan h3{ margin:0; font-size:17px; }
.lg-body.v-prose .lg-tight{ margin-top:10px; }
.lg-end{ margin-top:clamp(40px, 5vw, 64px); padding-top:18px; border-top:1px solid var(--line); font:500 12px/1.4 var(--font-mono); color:var(--text-3); }
.lg-end p{ margin:0; }

/* ───────────────────────── forced colors / reduced motion ───────────────────────── */
@media (forced-colors:active){
  .nl-feat, .nl-card, .na-rel, .pr-card, .pr-incl-panel, .lg-kv, .lg-plan, .lg-callout, .lg-toc-m, .na-tag, .pr-cta-current, .pr-act__info, .pr-mine{ border:1px solid CanvasText; }
  .pr-rim{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .pr-rim{ animation:none; }
  .nl-feat, .nl-card, .na-rel{ transition-property:box-shadow; transition-duration:200ms; }
  .nl-feat:hover, .nl-card:hover, .na-rel:hover{ transform:none; }
  .nl-feat:hover .nl-feat-more .v-arr, .na-back:hover > span{ transform:none; }
  .lg-toc-m summary::after{ transition:none; }
}