/* ============================================================
   VEPICT — site design system
   Body: Inter (as in the VEPICT console) · Display: Poppins (as on vepict.com)
   Palette from the VEPICT logo and console: deep navy, brand blue, accent red.
   Structure follows the TRANXACT site (D:\TWEB) so the author portal,
   admin console and article pages share one vocabulary.
   ============================================================ */
:root {
  /* brand blue (primary) — console --brand / --brand-strong / --brand-deep */
  --brand: #1f4fd6;
  --brand-deep: #0b1640;
  --brand-strong: #173db0;
  --brand-bright: #2c5fe8;
  --brand-soft: #ecf1fe;
  --brand-soft-2: #d5e0fb;
  --navy-2: #10245f;

  /* accent red — the ring in the mark */
  --red: #d62b33;
  --red-deep: #b4232a;
  --red-soft: #fdeced;
  --orange: #eb6834;   /* the dashboard-illustration orange on vepict.com */
  --green: #16a34a;

  /* neutrals — console --ink / --ink-2 / --muted / --border */
  --paper: #ffffff;
  --paper-alt: #f5f7fb;
  --paper-alt-2: #eef2fa;
  --ink: #0e1a3a;
  --text: #1a2340;
  --muted: #4a5572;
  --faint: #5c6580;
  --line: #e3e8f1;
  --line-strong: #d0d8e8;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(11,22,64,.05), 0 4px 14px rgba(11,22,64,.05);
  --shadow: 0 2px 6px rgba(11,22,64,.07), 0 22px 50px rgba(11,22,64,.10);
  --shadow-lg: 0 10px 30px rgba(11,22,64,.14), 0 40px 90px rgba(11,22,64,.16);
  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;
  --serif: "Poppins", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-6xs: 10px; --fs-4xs: 11px; --fs-3xs: 12px; --fs-2xs: 13px; --fs-xs: 14px; --fs-sm: 15px;
  --fs-md: 16px; --fs-base: 17px; --fs-lg: 19px; --fs-xl: 21px;
  --fs-d5:  clamp(21px, 0.34vw + 19.7px, 24px);
  --fs-d4:  clamp(24px, 0.67vw + 21.4px, 30px);
  --fs-d3:  clamp(27px, 1.12vw + 22.6px, 37px);
  --fs-d2:  clamp(31px, 1.69vw + 24.4px, 46px);
  --fs-d1s: clamp(34px, 2.70vw + 23.5px, 58px);
  --fs-d1:  clamp(40px, 3.60vw + 26.0px, 72px);
  --lh-d1: 1.02; --lh-d2: 1.08; --lh-d3: 1.16; --lh-d4: 1.22; --lh-body: 1.6;
  --tr-d1: -.021em; --tr-d2: -.014em; --tr-d3: -.007em; --tr-caps: .14em;
  --maxw: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-base); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* The skip link is hidden by clipping, not by being parked off-canvas.
   `left: -999px` puts it 999px outside the left edge — harmless in a
   left-to-right page, where browsers ignore overflow on the inline-start side,
   but in Arabic and Urdu the inline start is the right, so those 999px became
   real scrollable width: drag the page sideways and you got a blank strip
   almost a screen wide. Clipping keeps the element exactly where it is. */
.skip { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; }
.skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; }
:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 3px; border-radius: 4px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: calc(var(--fs-d1) * 0.8); line-height: 1.08; letter-spacing: -0.025em; }
h1 em { font-style: normal; color: var(--red); }
h2 { font-size: calc(var(--fs-d2) * 0.82); line-height: 1.12; letter-spacing: -0.02em; }
h2 em { font-style: normal; color: var(--red); }
h3 { font-size: calc(var(--fs-d4) * 0.9); line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.eyebrow { font-family: var(--sans); font-size: var(--fs-3xs); font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--brand); margin: 0 0 18px; }
.eyebrow.gold { color: var(--red); }  /* legacy hook — now brand red */

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-md); padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; }
.btn-sm { padding: 10px 18px; font-size: var(--fs-xs); }
.btn-lg { padding: 17px 34px; font-size: var(--fs-base); }
.btn-primary { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; box-shadow: 0 6px 18px rgba(31,79,214,.28); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31,79,214,.38); }
.btn-ghost { background: transparent; color: var(--brand-deep); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.btn-ghost.dark { color: var(--brand-deep); }
.btn-red { background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%); color: #fff; box-shadow: 0 6px 18px rgba(214,43,51,.24); }
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(214,43,51,.34); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- brand logo ----------
   The artwork is a transparent PNG (no baked-in white plate), so it sits on
   any surface. `flex: 0 0 auto` + `max-width: none` stop the nav's flex row
   from squeezing the mark to nothing on narrow screens — that squeeze is what
   made the logo look absent on phones. */
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand picture { display: block; line-height: 0; }
.brand img { height: 34px; width: auto; max-width: none; flex: none; display: block; }
.brand.small img { height: 30px; }
@media (max-width: 820px) { .brand img { height: 31px; } .brand.small img { height: 28px; } }
@media (max-width: 560px) { .brand img, .brand.small img { height: 30px; } }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s ease, box-shadow .3s ease, border-color .3s; border-bottom: 1px solid transparent; background: rgba(255,255,255,.72); backdrop-filter: saturate(1.3) blur(8px); }
.nav.scrolled { background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
/* ONE LINE, ALWAYS. Flex items shrink before a row overflows, and a
   shrunk link wraps inside itself -- which is how "Try it" and "ASK AI"
   came to sit on two lines between about 820px and 1000px, where seven
   links plus the brand and the CTA are just wider than the bar. The
   links are told not to wrap, and the gap and the type give way instead;
   below 820px the row is replaced by the mobile menu anyway. */
.nav-links a { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
@media (max-width: 1060px) {
  .nav-links { gap: 17px; }
  .nav-links a { font-size: var(--fs-xs); }
  .nav-inner { gap: 16px; }
}
.nav-links a:hover { color: var(--brand); }
.nav .btn-primary { margin-left: 4px; }
.lang-switch { margin-left: 12px; font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 600; color: var(--brand-deep); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 8px 12px; cursor: pointer; max-width: 140px; transition: border-color .15s; }
.lang-switch:hover { border-color: var(--brand); }
[dir=rtl] .lang-switch { margin-left: 0; margin-right: 12px; }
[dir=rtl] .nav-links { margin-left: 0; margin-right: auto; }
@media (max-width: 820px) { .nav-links { display: none; } .nav .btn-primary { margin-left: auto; } .lang-switch { max-width: 108px; } }
@media (max-width: 560px) {
  .nav-inner { padding: 10px 16px; gap: 10px; }
  .nav .btn-primary, .nav .btn-ghost { padding: 10px 14px; font-size: var(--fs-xs); }
  .lang-switch { max-width: 78px; min-width: 0; padding: 8px 9px; margin-left: 8px; }
  [dir=rtl] .lang-switch { margin-left: 0; margin-right: 8px; }
}

/* ---------- hero (light) ---------- */
.hero { position: relative; background: linear-gradient(180deg, #fbfcff 0%, #f4f6fd 100%); color: var(--text); overflow: hidden; padding: 124px 0 68px; border-bottom: 1px solid var(--line); }
.hero-glow { position: absolute; inset: 0; background: radial-gradient(44% 42% at 82% 4%, rgba(31,79,214,.12), transparent 70%), radial-gradient(38% 40% at 8% 108%, rgba(214,43,51,.07), transparent 70%); pointer-events: none; }
.hero-grid { display: none; position: absolute; inset: 0; background-image: linear-gradient(rgba(31,79,214,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(31,79,214,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(72% 62% at 50% 26%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(72% 62% at 50% 26%, #000 40%, transparent 100%); pointer-events: none; }
.hero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.hero h1 { max-width: 15ch; color: var(--brand-deep); }
.hero-lede { max-width: 60ch; margin: 18px 0 0; font-size: var(--fs-lg); color: var(--muted); line-height: 1.62; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dt { font-family: var(--serif); font-weight: 700; font-size: calc(var(--fs-d2) * 0.8); line-height: 1; letter-spacing: -0.02em; color: var(--brand); }
.hero-stats dd { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--muted); letter-spacing: .01em; }

/* ---------- band (light tint) ---------- */
.band { background: var(--brand-deep); color: #dfe1fb; }
.band-inner { padding: 20px 24px; display: flex; gap: 28px; align-items: baseline; flex-wrap: wrap; }
.band-label { font-family: var(--sans); font-weight: 700; font-size: var(--fs-3xs); letter-spacing: .06em; text-transform: uppercase; color: #ff8a97; white-space: nowrap; }
.band-text { margin: 0; font-size: var(--fs-md); color: #c6c8f0; max-width: 80ch; }

/* ---------- sections ---------- */
.section { padding: 62px 0; }
.section-alt { background: var(--paper-alt); }
.section-head { max-width: 62ch; margin-bottom: 30px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-sub { font-size: var(--fs-lg); color: var(--muted); margin: 12px 0 0; }
.on-dark { color: var(--ink); }          /* legacy hook — now dark ink on light */
.on-dark-sub { color: var(--muted); }

/* ---------- modules grid ---------- */
.grid.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid.modules { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid.modules { grid-template-columns: 1fr; } }
.module { font-family: inherit; text-align: start; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease, border-color .2s; cursor: pointer; display: flex; flex-direction: column; }
.module:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-soft-2); }
.module:hover .mod-more { color: var(--red); gap: 10px; }
.mod-mark { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-size: 22px; margin-bottom: 14px; }
.module h3 { color: var(--ink); margin-bottom: 8px; }
.module p { margin: 0; font-size: var(--fs-md); color: var(--muted); line-height: 1.55; }
.mod-more { margin-top: 12px; font-family: var(--sans); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .02em; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; transition: color .18s, gap .18s; }

/* ---------- module detail modal ---------- */
.mod-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: flex-start; justify-content: center; padding: 5vh 20px; overflow-y: auto; }
.mod-modal.open { display: flex; }
.mod-backdrop { position: fixed; inset: 0; background: rgba(11,22,64,.5); backdrop-filter: blur(3px); animation: fade .2s ease; }
.mod-dialog { position: relative; z-index: 1; width: 100%; max-width: 760px; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .22s cubic-bezier(.2,.8,.3,1); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .mod-backdrop, .mod-dialog { animation: none; } }
.md-head { position: relative; padding: 28px 36px 22px; background: linear-gradient(135deg, var(--brand-soft) 0%, #f4f5fd 100%); border-bottom: 1px solid var(--line); }
.md-mark { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: var(--brand); color: #fff; font-size: 25px; margin-bottom: 16px; }
.md-head h2 { font-size: var(--fs-d3); line-height: var(--lh-d3); color: var(--brand-deep); }
.md-tag { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-md); max-width: 56ch; }
.md-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.7); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, border-color .15s; }
.md-close:hover { background: var(--red-soft); color: var(--red-deep); border-color: var(--red); }
.md-body { padding: 24px 36px 30px; }
@media (max-width: 560px) { .md-head { padding: 28px 22px 22px; } .md-body { padding: 24px 22px 30px; } }
.md-body h4 { font-family: var(--sans); font-weight: 800; font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 20px 0 10px; }
.md-body h4:first-child { margin-top: 0; }
.md-body p { color: var(--muted); font-size: var(--fs-md); line-height: 1.62; margin: 0 0 12px; }
.md-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
@media (max-width: 560px) { .md-feats { grid-template-columns: 1fr; } }
.md-feats li { position: relative; padding-left: 26px; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.md-feats li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; display: grid; place-items: center; }
.md-flow { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.md-flow li { position: relative; padding-left: 40px; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.md-flow li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 999px; background: var(--red-soft); color: var(--red-deep); font-family: var(--mono); font-size: 13px; font-weight: 500; display: grid; place-items: center; }
.md-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 0; }
.md-stat { flex: 1 1 140px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.md-stat dt { font-family: var(--serif); font-size: var(--fs-d4); color: var(--brand); line-height: 1; }
.md-stat dd { margin: 6px 0 0; font-size: var(--fs-2xs); color: var(--muted); }
.md-note { margin-top: 20px; padding: 16px 18px; background: var(--brand-soft); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--brand-deep); }
.md-cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- split feature ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.split.reverse .split-copy { order: 2; }
@media (max-width: 860px) { .split, .split.reverse { grid-template-columns: 1fr; gap: 36px; } .split.reverse .split-copy { order: 0; } }
.split-copy p { color: var(--muted); font-size: var(--fs-base); }
.split-copy h2 { margin-bottom: 18px; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--text); font-weight: 500; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 12px; display: grid; place-items: center; }
.muted-note { font-size: var(--fs-sm) !important; color: var(--faint) !important; }

.cta-final { background: var(--brand-deep); padding: 62px 0; text-align: center; color: #fff; }
.cta-inner { max-width: 60ch; }
.cta-final h2 { margin-bottom: 16px; color: #fff; }
.cta-final h2 em { color: #ff9aa6; }
.cta-final p { color: #c6c8f0; font-size: var(--fs-lg); margin: 0 auto 24px; max-width: 54ch; }

/* footer (light) */
.foot { background: var(--paper-alt); color: var(--muted); padding: 36px 0; border-top: 1px solid var(--line); }
.foot-inner { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.foot-tag { margin: 10px 0 0; font-size: var(--fs-2xs); color: var(--faint); font-family: var(--mono); letter-spacing: .04em; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.foot-links a:hover { color: var(--brand); }
.foot-legal { width: 100%; margin: 8px 0 0; font-size: var(--fs-2xs); color: var(--faint); }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- insights / articles (from TWEB) ---------- */
.insights-teaser { background: var(--paper-alt); }
.teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
@media (max-width: 900px) { .teaser-grid { grid-template-columns: 1fr; } }
.blog-hero { background: linear-gradient(180deg, #fbfcff 0%, #f4f6fd 100%); padding: 112px 0 36px; border-bottom: 1px solid var(--line); }
.blog-hero h1 { font-size: var(--fs-d1s); line-height: var(--lh-d2); color: var(--brand-deep); max-width: 16ch; }
.blog-hero p { color: var(--muted); max-width: 60ch; margin: 14px 0 0; font-size: var(--fs-lg); }
.blog-list { padding: 34px 0 62px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; text-align: left; cursor: pointer; font-family: inherit; transition: transform .18s ease, box-shadow .2s ease, border-color .2s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-soft-2); }
.post-thumb { height: 128px; position: relative; overflow: hidden; }
.post-thumb canvas { display: block; width: 100%; height: 100%; }
.post-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-kicker { font-family: var(--mono); font-size: var(--fs-4xs); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.post-kicker .dotsep { color: var(--line-strong); }
.post-card h3 { font-size: var(--fs-d5); color: var(--ink); line-height: var(--lh-d4); margin-bottom: 8px; }
.post-card .excerpt { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin: 0; }
.post-meta { margin-top: 16px; font-size: var(--fs-2xs); color: var(--faint); display: flex; gap: 10px; align-items: center; }
.post-read { margin-top: 14px; font-weight: 700; font-size: var(--fs-xs); color: var(--brand); display: inline-flex; gap: 6px; align-items: center; transition: color .18s, gap .18s; }
.post-card:hover .post-read { color: var(--red); gap: 10px; }

/* whitepapers */
.wp-list { padding: 34px 0 62px; }
.wp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 820px) { .wp-grid { grid-template-columns: 1fr; } }
.wp-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 26px 26px 24px; }
.wp-kicker { font-family: var(--mono); font-size: var(--fs-4xs); letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin: 0 0 10px; }
.wp-card h3 { font-size: var(--fs-d4); color: var(--ink); line-height: var(--lh-d4); margin-bottom: 6px; }
.wp-sub { font-size: var(--fs-sm); color: var(--brand-deep); font-weight: 600; margin: 0 0 12px; }
.wp-abstract { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
.wp-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.wp-topic { font-size: var(--fs-3xs); font-weight: 600; color: var(--brand-deep); background: var(--brand-soft); border-radius: 999px; padding: 4px 11px; }
.wp-form { margin-top: auto; border-top: 1px solid var(--line); padding-top: 16px; }
.wp-gate { font-size: var(--fs-2xs); color: var(--muted); margin: 0 0 12px; }
.wp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wp-fields .wp-company { grid-column: 1 / -1; }
@media (max-width: 460px) { .wp-fields { grid-template-columns: 1fr; } }
.wp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.wp-dl { font-weight: 700; font-size: var(--fs-xs); color: var(--brand); }
.wp-dl:hover { color: var(--red); }
.wp-msg { font-size: var(--fs-2xs); font-weight: 600; }
.wp-msg.err { color: var(--red-deep); }
.wp-msg.ok { color: var(--brand); }

/* article view */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 108px 24px 62px; }
.article-back { font-weight: 700; font-size: var(--fs-xs); color: var(--brand); display: inline-flex; gap: 7px; align-items: center; margin-bottom: 26px; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.article-back:hover { color: var(--red); }
.article-kicker { font-family: var(--sans); font-weight: 700; font-size: var(--fs-3xs); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.article-wrap h1 { font-size: var(--fs-d1s); line-height: var(--lh-d2); color: var(--brand-deep); margin: 14px 0 16px; }
.article-meta { color: var(--faint); font-size: var(--fs-xs); border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 8px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.article-lede { font-size: var(--fs-xl); line-height: 1.5; color: var(--text); margin: 26px 0 8px; font-weight: 500; }
.article-body h2 { font-family: var(--serif); font-size: var(--fs-d3); line-height: var(--lh-d3); color: var(--ink); margin: 30px 0 10px; }
.article-body h3 { font-family: var(--sans); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--brand); margin: 30px 0 10px; }
.article-body p { color: var(--text); font-size: var(--fs-base); line-height: 1.72; margin: 0 0 18px; }
.article-body ul, .article-body ol { color: var(--text); font-size: var(--fs-base); line-height: 1.7; padding-left: 22px; margin: 0 0 18px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { margin: 24px 0; padding: 16px 24px; background: var(--paper-alt); border-radius: var(--radius-sm); font-family: var(--serif); font-size: var(--fs-d5); line-height: 1.4; color: var(--brand-deep); }
.article-body .callout { margin: 26px 0; padding: 20px 24px; background: var(--brand-soft); border-radius: var(--radius-sm); }
.article-body .callout strong { color: var(--brand-deep); }
.article-body code { font-family: var(--mono); font-size: .88em; background: var(--paper-alt-2); padding: 2px 6px; border-radius: 5px; color: var(--brand-deep); }
.article-foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.article-foot p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }