/* ==========================================================================
   NEW EIC — New England Investment Consulting Group
   Shared stylesheet. No external dependencies: no CDN, no frameworks. Every
   face is self-hosted from /assets/fonts.

   The design follows the editorial handoff: a display serif over a grotesque
   text face, deep near-black mastheads and photographic bands, hairline rules
   instead of cards-with-shadows, and wide-tracked uppercase reserved for small
   eyebrow labels only.

   Type sizes are the ones this site already ran at, not the handoff's — the
   handoff set body copy at 17px and small print at 12–14px, which is too small
   for the amount of legal and explanatory copy these pages carry. The fluid
   scale below is unchanged from the previous stylesheet.

   CAUTION, bilingual markup: both languages ship in the HTML and are toggled
   by `.zh` / `html.lang-zh .en`. Never write a `display` rule on a bare
   descendant `span` selector (e.g. `.card span{display:block}`) — its
   specificity outranks `.zh{display:none}` and both languages appear at once.
   Give the element its own class instead.
   ========================================================================== */

/* --- Bundled faces ------------------------------------------------------
   Petrona (display serif) and Archivo (text grotesque) are the handoff's two
   faces, self-hosted here as variable woff2 rather than pulled from the Google
   Fonts CDN, so the site keeps its no-external-dependency rule and renders the
   same on networks where fonts.googleapis.com is unreachable. Both are under
   the SIL Open Font License, which permits redistribution. font-display: swap
   so a slow font never blocks text from appearing. */
@font-face {
  font-family: "Petrona";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/petrona-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Petrona";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/petrona-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Petrona";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/petrona-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Petit Formal Script, self-hosted. This is the same face the firm's WeChat
   market report embeds, so the slogan reads identically across channels. */
@font-face {
  font-family: "Petit Formal Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/petit-formal-script-v400.woff2") format("woff2");
}

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* Editorial palette from the handoff. `--abyss` is the near-black the
     masthead, page heads, bands and footer all sit on; `--navy` is the accent
     that carries links, step numerals and rules. */
  --paper:    #ffffff;
  --paper-2:  #f4f6f9;
  --ink:      #0d1017;
  --ink-2:    #38414f;
  --ink-3:    #6a748a;
  --navy:     #1b2c5e;
  --navy-2:   #2c4485;
  --navy-3:   #93a8dc;
  --abyss:    #080c16;
  --line:     #dbe0e8;

  --on-dark:      #ffffff;
  --on-dark-2:    #b7c1d6;
  --on-dark-rule: rgba(255, 255, 255, .22);

  /* Aliases kept so existing component rules read the same as before. */
  --bg:       var(--paper);
  --bg-alt:   var(--paper-2);
  --navy-900: var(--abyss);
  --navy-800: var(--navy);
  --navy-700: var(--navy);
  --navy-600: var(--navy-2);
  --navy-500: var(--navy-2);
  --navy-300: #a8b4cc;
  --navy-100: #e6eaf6;
  --navy-50:  var(--paper-2);
  --accent:   var(--navy);
  --accent-l: var(--navy-2);

  /* Content width scales with the viewport rather than stopping at a fixed
     column, so ultrawide displays fill out. Capped so line length stays
     readable. */
  --maxw:     min(92vw, 1400px);
  --gut:      clamp(1.375rem, 5vw, 4.5rem);

  /* Fluid type scale — carried over unchanged from the previous stylesheet.
     This is the point of departure from the handoff, whose sizes were too
     small for the volume of copy these pages carry. */
  --fs-hero:  clamp(2.5rem, 1.6rem + 2.8vw, 4.4rem);
  --fs-h1:    clamp(2.1rem, 1.35rem + 2.6vw, 3.4rem);
  --fs-h2:    clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  /* Subheads. Raised alongside the content sizes below — at the old ceiling a
     card or step heading sat only a couple of pixels above its own body copy
     and stopped reading as a heading. */
  --fs-h3:    clamp(1.34rem, 1.2rem + 0.6vw, 1.7rem);
  /* Content sizes run a step larger than the display sizes above would imply.
     These pages are read, not skimmed — the body carries long explanatory and
     legal copy, and most of it sits in --fs-sm rather than --fs-body, so that
     step is the one that decides how the site actually reads. */
  --fs-body:  clamp(1.09rem, 1.04rem + 0.24vw, 1.26rem);
  --fs-sm:    clamp(1.02rem, 0.98rem + 0.20vw, 1.15rem);
  --fs-xs:    clamp(0.88rem, 0.85rem + 0.14vw, 0.98rem);

  /* Display serif. Set at 400 and never lighter — the light weights are what
     made the earlier drafts look thin. */
  --display: "Petrona", Georgia, "Times New Roman", "Songti SC",
             "Noto Serif SC", serif;

  /* Text grotesque. Archivo leads; the Helvetica line follows, so the same
     proportions hold if the woff2 fails to load. */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, "Liberation Sans",
          "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", sans-serif;

  /* Eyebrows, stat labels and other small caps-set UI text sit in the same
     grotesque as body copy, differentiated by size, weight, tracking and
     colour rather than by family. */
  --label: var(--sans);

  /* Chinese faces. The serif carries display type when the page is in
     Chinese; the sans carries everything else. */
  --zh-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", SimSun, serif;
  --zh-sans:  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
              "Noto Sans SC", sans-serif;

  /* Slogan script, matching the firm's WeChat market report exactly. */
  --script: "Petit Formal Script", "Snell Roundhand", "Apple Chancery",
            "Savoye LET", "Palace Script MT", "Edwardian Script ITC",
            "Segoe Script", "Brush Script MT", cursive;

  /* Flat by default. Editorial layouts separate surfaces with hairline rules
     and background steps rather than drop shadows; shadows appear only on
     transient layers such as the dropdown menu. */
  --shadow-sm: none;
  --shadow-md: 0 1px 2px rgba(10, 22, 60, .08), 0 8px 24px rgba(10, 22, 60, .10);

  /* Square. The handoff has no rounded corners anywhere. */
  --radius: 0px;
}

/* --- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Nothing on this site should scroll the page sideways. */
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* Display type: the serif, at 400, with tight tracking. The negative tracking
   is what keeps large serif headings from looking like default browser
   output. */
h1, h2, .serif {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -.016em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* Subheads stay in the grotesque — the serif at small sizes reads as a
   different document. */
h3, h4 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.004em;
  margin: 0 0 .55em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-2); }

:focus-visible {
  outline: 2px solid var(--navy-2);
  outline-offset: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--abyss); color: #fff;
  padding: .75rem 1.15rem; z-index: 200;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Bilingual ----------------------------------------------------------
   Both languages ship in the markup. `.zh` is hidden by default; setting
   `lang-zh` on <html> flips which of the pair is shown. `.block` is for spans
   that need to be block-level when visible (paragraph-length copy).
   See the CAUTION at the top of this file before adding rules here. */
.zh { display: none; }
html.lang-zh .en { display: none; }
html.lang-zh .zh { display: inline; }
html.lang-zh .zh.block { display: block; }
html.lang-zh li.zh, html.lang-zh h1.zh, html.lang-zh h2.zh,
html.lang-zh h3.zh, html.lang-zh h4.zh, html.lang-zh p.zh,
html.lang-zh div.zh, html.lang-zh ul.zh, html.lang-zh ol.zh,
html.lang-zh article.zh, html.lang-zh section.zh { display: block; }

html.lang-zh [lang="zh"] {
  font-family: var(--zh-sans);
  font-weight: 300;
  letter-spacing: 0;
}
/* Chinese display type takes the serif and needs positive tracking and looser
   leading — the negative tracking tuned for Latin closes up Han glyphs. */
html.lang-zh h1[lang="zh"], html.lang-zh h2[lang="zh"],
html.lang-zh .serif[lang="zh"] {
  font-family: var(--zh-serif);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.3;
}
html.lang-zh h3[lang="zh"], html.lang-zh h4[lang="zh"] {
  font-family: var(--zh-sans);
  font-weight: 500;
  letter-spacing: .01em;
}

/* --- Layout primitives -------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
/* Reading column for legal copy and disclosures. Widened alongside the larger
   content sizes — at 860px the bigger type was breaking these paragraphs into
   noticeably short lines. */
.wrap-narrow {
  max-width: min(88vw, 980px); margin-inline: auto; padding-inline: var(--gut);
}

/* Vertical rhythm. Editorial layouts breathe more than the previous card-based
   one did, but these are still sized so a section head plus its content lands
   inside one screen on a 900px-tall display. */
section { padding-block: clamp(3.25rem, 6vw, 6rem); }
section.tight { padding-block: clamp(2rem, 3.2vw, 3.25rem); }
.bg-alt { background: var(--paper-2); border-block: 1px solid var(--line); }

/* Wide-tracked uppercase is the most templated-looking habit on the web; here
   it survives only on eyebrow labels, and only at .06em. */
.eyebrow, .label {
  font-family: var(--label);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}
html.lang-zh .eyebrow[lang="zh"], html.lang-zh .label[lang="zh"] {
  letter-spacing: .04em; font-weight: 500; text-transform: none;
}
@media (max-width: 640px) {
  .eyebrow, .label { letter-spacing: .05em; }
}

.lede {
  font-size: clamp(1.18rem, 1.08rem + .48vw, 1.45rem);
  line-height: 1.62;
  letter-spacing: -.008em;
  color: var(--ink-2);
  max-width: 42em;
}
html.lang-zh .lede[lang="zh"] { letter-spacing: 0; line-height: 1.85; }

/* Section heads run left, the way the handoff sets them. The heading itself
   takes a narrow measure so it breaks into two or three short lines; the lede
   below it runs wider, or the copy is squeezed into a column with two-thirds of
   the row left empty. */
.section-head { max-width: min(58ch, 100%); margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 { max-width: 18ch; }
/* Chinese has no spaces, so a ch-based measure breaks the line at whatever
   glyph happens to land at the edge — mid-phrase as often as not. Let the
   Chinese headings run to the full width of the head instead, and break them
   where the copy says to (a <br>, or the punctuation). */
html.lang-zh .section-head h2[lang="zh"] { max-width: none; }
.section-head .lede { max-width: none; }
.section-head.center { max-width: min(62ch, 100%); margin-inline: auto; text-align: center; }

/* The gold underline rule of the previous design is gone — the handoff marks
   sections with an eyebrow label and a hairline, not with a coloured bar.
   Kept as a no-op so existing markup does not leave a stray element. */
.rule { display: none; }

/* --- Header / navigation ------------------------------------------------
   The masthead is the near-black field from the handoff rather than a sticky
   translucent white bar. It scrolls away with the page. */
.site-header {
  position: relative; z-index: 100;
  background: var(--abyss);
  color: #fff;
}
/* On the home page the masthead sits over the hero photograph rather than on
   its own band of colour, so the picture reaches the top of the window. */
.site-header.over {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  background: transparent;
}
/* The open mobile drawer needs a solid ground to be legible over the
   photograph. nav.js sets `is-open`; the :has() rule is a fallback for the
   case where the script has not run. */
@media (max-width: 1080px) {
  .site-header.over.is-open { background: var(--abyss); }
  .site-header.over:has(.nav-links[data-open="true"]) { background: var(--abyss); }
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: clamp(72px, 5.5vw, 96px);
}

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex-shrink: 0; }
.brand img { width: clamp(40px, 2.9vw, 50px); height: clamp(40px, 2.9vw, 50px); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
/* The wordmark is set in the text grotesque rather than the display serif.
   The serif at wide tracking read as a stylised monogram; a company name is
   better served by a plain, solid face. Tracking is eased off to match —
   .16em was spacing the letters out to compensate for the serif. */
.brand-name {
  font-family: var(--sans);
  font-size: clamp(1.22rem, 1.08rem + .38vw, 1.44rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* The line under the wordmark carries the firm's slogan, an acrostic on
   NEW EIC. Set in the bundled script. Petit Formal Script is upright by
   design — no italic, or the browser synthesises a skew. */
.brand-sub {
  font-family: var(--script);
  font-size: clamp(.78rem, .74rem + .18vw, .92rem);
  font-style: normal;
  color: rgba(255, 255, 255, .62);
  letter-spacing: .01em;
  white-space: nowrap;
  margin-top: .12rem;
}
@media (max-width: 560px) { .brand-sub { display: none; } }

.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }

.nav-links a,
.nav-links .sub-toggle {
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  background: none; border: 0;
  padding: 0 0 .25rem;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
}
.nav-links a:hover,
.nav-links .sub-toggle:hover,
.nav-links a[aria-current="page"] {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .65);
}

.has-sub { position: relative; }
.sub-toggle .chev {
  width: 6px; height: 6px; display: inline-block;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.has-sub[data-open="true"] .chev { transform: rotate(-135deg) translate(-2px, -2px); }

.submenu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 15rem; margin: 0; padding: .6rem 0;
  list-style: none;
  background: var(--abyss);
  border: 1px solid var(--on-dark-rule);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu,
.has-sub[data-open="true"] .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a {
  display: block; padding: .5rem 1.15rem;
  border-bottom: 0; color: rgba(255, 255, 255, .8);
}
.submenu a:hover { background: rgba(255, 255, 255, .07); color: #fff; border-bottom: 0; }

/* Language switch. Square, hairline-bordered — a control, not a button. */
.langbtn {
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 400; letter-spacing: -.005em;
  background: none; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .38);
  color: rgba(255, 255, 255, .9);
  padding: .45rem .9rem;
  line-height: 1.2;
}
.langbtn:hover { border-color: #fff; color: #fff; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .55rem; margin-right: -.55rem;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; order: 3; }
  .nav-links {
    display: none; order: 4; flex-basis: 100%; flex-direction: column;
    align-items: stretch; gap: 0;
    padding: .5rem 0 1.5rem;
    border-top: 1px solid var(--on-dark-rule);
  }
  .nav-links[data-open="true"] { display: flex; }
  .nav-links > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav-links a, .nav-links .sub-toggle {
    padding: .85rem 0; width: 100%; border-bottom: 0;
    justify-content: space-between;
  }
  .nav-links a:hover, .nav-links .sub-toggle:hover { border-bottom: 0; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: transparent;
    display: none; padding: 0 0 .6rem 1rem;
  }
  .has-sub[data-open="true"] .submenu { display: block; }
  .has-sub:hover .submenu { display: none; }
  .has-sub[data-open="true"]:hover .submenu { display: block; }
  .langbtn { margin-top: 1rem; width: fit-content; }
}

/* --- Buttons ------------------------------------------------------------
   Square, hairline. The filled navy button is kept for primary calls to
   action; everything else is a rule-underlined text link. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: -.005em;
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--abyss); border-color: var(--abyss); color: #fff; }

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

.btn-on-dark { background: #fff; color: var(--abyss); border-color: #fff; }
.btn-on-dark:hover { background: transparent; color: #fff; border-color: #fff; }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover { background: #fff; border-color: #fff; color: var(--abyss); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
@media (max-width: 420px) {
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
}

/* Text links that close a card or a section. */
.card-link a, .report-link a, .more {
  display: inline-block;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: .3rem;
  transition: border-color .18s ease, color .18s ease;
}
.card-link a:hover, .report-link a:hover, .more:hover {
  color: var(--navy-2); border-bottom-color: var(--navy);
}
.more { margin-top: 2.25rem; font-size: var(--fs-sm); }

/* --- Hero (home) --------------------------------------------------------
   The handoff's photographic hero: a full-bleed image under a stack of
   gradient scrims that darken it enough for white type to hold contrast at
   every size. The scrims are doing accessibility work, not decoration — do not
   lighten them without re-checking the contrast of .hero-sub against the
   brightest part of the photograph.

   The masthead sits over the image (`.masthead.over` / `.site-header.over`)
   rather than above it, so the picture runs to the top of the window. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: min(92vh, 880px);
  background: var(--abyss);
  color: #fff;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%;
  display: block; filter: saturate(.82) contrast(1.04);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,22,.66) 0%, rgba(8,12,22,.12) 32%,
                    rgba(8,12,22,.58) 74%, rgba(8,12,22,.88) 100%),
    linear-gradient(90deg, rgba(8,12,22,.74) 0%, rgba(8,12,22,.34) 46%,
                    rgba(8,12,22,.04) 100%),
    linear-gradient(0deg, rgba(27,44,94,.34), rgba(27,44,94,.34));
}

.hero .wrap { position: relative; z-index: 10; }
.hero-in { position: relative; z-index: 10; width: 100%; }
.hero-in .wrap { padding-block: clamp(3.5rem, 8vh, 6rem); }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero h1 {
  color: #fff; font-size: var(--fs-hero); margin-bottom: .4em;
  letter-spacing: -.024em; line-height: 1.06; text-wrap: balance;
  max-width: 14em;
}
/* The Chinese headline breaks where its markup says to, not at a measure —
   see the note on .section-head h2 above. */
html.lang-zh .hero h1[lang="zh"] {
  letter-spacing: .02em; line-height: 1.24; max-width: none;
  font-size: clamp(2.1rem, 1.4rem + 2.3vw, 3.6rem);
}
.hero h1 em { font-style: italic; font-weight: 400; }
/* The rule under the eyebrow is a short mark, not a divider running the full
   width of the hero — cap it to the measure the headline occupies. */
.hero .eyebrow, .hero .label {
  color: rgba(255, 255, 255, .74);
  padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  display: block; max-width: 46ch;
}
.hero p.lede { color: rgba(255, 255, 255, .86); max-width: 40ch; }
.hero .btn-row { margin-top: 2rem; }

/* Interior page heads: same field, no figure. */
.pagehead {
  background: var(--abyss); color: #fff;
  padding-block: clamp(2.75rem, 5.5vw, 5.5rem);
}
.pagehead h1 { color: #fff; max-width: 15em; }
.pagehead .eyebrow, .pagehead .label { color: rgba(255, 255, 255, .72); }
.pagehead p, .pagehead .lede { color: var(--on-dark-2); max-width: 46em; }
.pagehead .btn-row { margin-top: 2rem; }

/* Decorative chart figure */
.hero-figure {
  position: relative; padding: 1.6rem 1.7rem 1.4rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-top: 1px solid rgba(255,255,255,.4);
}
.hero-figure figcaption {
  font-family: var(--label);
  font-size: var(--fs-xs); color: rgba(255,255,255,.62);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  margin-bottom: .95rem;
}
.hero-figure .note {
  margin-top: .95rem; font-size: .76rem; line-height: 1.55;
  color: rgba(255,255,255,.5);
}
@media (max-width: 900px) { .hero-figure { max-width: 520px; } }

/* Animated signal line.
   Path length is ~464 units; 470 is used as the dash budget so the line is
   fully covered at the start of the draw and fully revealed at the end.
   Every animation here is switched off by the prefers-reduced-motion rule at
   the top of this file, which leaves the finished chart on screen because each
   one ends on its resting state (fill-mode: both). */
.spark-line, .spark-pulse {
  fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
}
.spark-line {
  stroke-dasharray: 470;
  animation: spark-draw 1.9s cubic-bezier(.33, 0, .18, 1) both;
}
.spark-fill {
  transform-origin: 0 100%;
  animation: spark-rise 1.5s cubic-bezier(.33, 0, .18, 1) .55s both;
}
.spark-dots circle {
  animation: spark-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.spark-dots circle:nth-child(1) { animation-delay: 1.55s; }
.spark-dots circle:nth-child(2) { animation-delay: 1.8s; }

/* A short segment chased along the line once the draw has finished. Reads as a
   live signal rather than as data. */
.spark-pulse {
  stroke-width: 2.6; opacity: 0;
  stroke-dasharray: 26 444;
  animation: spark-travel 3.6s linear 2.2s infinite;
}

@keyframes spark-draw {
  from { stroke-dashoffset: 470; }
  to   { stroke-dashoffset: 0; }
}
@keyframes spark-rise {
  from { opacity: 0; transform: scaleY(.55); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes spark-pop {
  from { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: 50% 50%; }
  to   { opacity: 1; transform: scale(1);  transform-box: fill-box; transform-origin: 50% 50%; }
}
@keyframes spark-travel {
  0%        { stroke-dashoffset: 470; opacity: 0; }
  12%       { opacity: .85; }
  70%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* --- Photographic bands --------------------------------------------------
   A full-bleed picture behind a dark scrim, used to break up the long white
   pages. Same contract as the hero: the gradients hold the contrast for white
   type, so lighten them only after re-checking legibility. */
.band { position: relative; display: flex; align-items: center; overflow: hidden; color: #fff; }
.band-bg { position: absolute; inset: 0; }
.band-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.7) contrast(1.05);
}
.band-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,12,22,.93) 0%, rgba(8,12,22,.76) 55%,
                    rgba(8,12,22,.64) 100%),
    linear-gradient(0deg, rgba(27,44,94,.44), rgba(27,44,94,.44));
}
.band-in { position: relative; z-index: 5; width: 100%; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.band .label, .band .eyebrow { color: rgba(255,255,255,.72); }
.band h2 { color: #fff; }
.band .lede, .band p { color: rgba(255,255,255,.86); }
.band .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Panels and figures sitting on a band take the on-dark treatment. */
.band .panel {
  background: rgba(255,255,255,.06);
  border-left-color: rgba(255,255,255,.5);
}
.band .panel li { color: rgba(255,255,255,.84); }
.band .panel li strong { color: #fff; }
.band .panel li::before { background: rgba(255,255,255,.6); }
.band .fineprint {
  color: var(--on-dark-2); border-top-color: var(--on-dark-rule);
}
.band .more { color: #fff; border-bottom-color: var(--on-dark-rule); }
.band .more:hover { border-bottom-color: #fff; }

/* --- Stats --------------------------------------------------------------
   The handoff's `.figures` treatment: a hairline over each figure, the numeral
   in the display serif at a large size, the caption small and grey. The
   count-up animation is preserved from the previous build. */
.stat-grid {
  display: grid; gap: clamp(1.75rem, 3.5vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.stat {
  border-top: 1px solid var(--ink);
  padding-top: 1.4rem;
}
.stat .num {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--navy);
  margin-bottom: .7rem;
}
.stat .label {
  display: block;
  font-family: var(--label);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .6rem;
}
html.lang-zh .stat .label[lang="zh"] { letter-spacing: .04em; text-transform: none; font-weight: 500; }
.stat p, .stat-desc { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; line-height: 1.72; }

/* Whole-card link. The heading anchor is stretched over the card so there is
   still exactly one link per card in the accessibility tree. */
.stat-link {
  display: block; text-decoration: none; color: inherit;
  transition: border-color .2s ease;
}
.stat-more {
  display: block; margin-top: .95rem;
  font-size: var(--fs-sm); font-weight: 500; color: var(--navy);
  transition: color .2s ease;
}
.stat-link:hover { border-top-color: var(--navy); }
.stat-link:hover .stat-more { color: var(--navy-2); }
.stat-link:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 6px; }

/* Reveal: hidden state is keyed off [data-reveal], which only reveal.js sets,
   and only once it knows it can also set [data-revealed]. With JS off, these
   rules never match and everything renders finished. */
.stat-grid[data-reveal="true"] .stat {
  opacity: 0; transform: translateY(14px); border-top-color: transparent;
}
.stat-grid[data-revealed="true"] .stat {
  opacity: 1; transform: none; border-top-color: var(--ink);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1),
              border-color .6s ease;
}
.stat-grid[data-revealed="true"] .stat:nth-child(1) { transition-delay: 0s; }
.stat-grid[data-revealed="true"] .stat:nth-child(2) { transition-delay: .13s; }
.stat-grid[data-revealed="true"] .stat:nth-child(3) { transition-delay: .26s; }
.stat-grid[data-revealed="true"] .stat-link:hover { border-top-color: var(--navy); }

/* Tabular figures so the count-up does not reflow as digits are added. */
.stat .num[data-count-to] { font-variant-numeric: lining-nums tabular-nums; }

/* Figures set on a dark field (bands, page heads). */
.stat-grid.on-dark .stat { border-top-color: var(--on-dark-rule); }
.stat-grid.on-dark .num { color: #fff; }
.stat-grid.on-dark .label { color: #fff; }
.stat-grid.on-dark p, .stat-grid.on-dark .stat-desc { color: var(--on-dark-2); }
.stat-grid.on-dark[data-revealed="true"] .stat { border-top-color: var(--on-dark-rule); }
/* The navy the link normally takes is unreadable on the band's dark ground. */
.stat-grid.on-dark .stat-more { color: #fff; }
.stat-grid.on-dark .stat-link:hover { border-top-color: #fff; }
.stat-grid.on-dark .stat-link:hover .stat-more { color: var(--on-dark-2); }
.stat-grid.on-dark .stat-link:focus-visible { outline-color: #fff; }
/* Serif numerals sit on the band too, so they need the on-dark colour before
   the reveal transition runs as well as after. */
.stat-grid.on-dark[data-reveal="true"] .stat { border-top-color: transparent; }

.fineprint {
  margin-top: clamp(2rem, 3.5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--ink-3);
  max-width: 100ch;
}

/* --- Numbered flow ------------------------------------------------------
   The handoff's `.steps`: a hairline over each step, a serif numeral, then the
   heading and copy. The connecting line and staged reveal are preserved. */
.flow-grid {
  display: grid; gap: clamp(1.75rem, 3.4vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  list-style: none; margin: 0; padding: 0;
  counter-reset: flow;
}
.flow-step {
  position: relative;
  border-top: 1px solid var(--ink);
  padding-top: 1.4rem;
}
.flow-step .idx {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.55rem);
  line-height: 1;
  color: var(--navy);
  margin-bottom: 1.1rem;
}
.flow-step h3 { font-size: var(--fs-h3); margin-bottom: .55rem; }
.flow-step p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; max-width: 46ch; }

/* The rule over each step doubles as the connector: on wide screens it runs
   the full width of the row, so the four steps read as one line. */
.flow-step::after {
  content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: 1px; background: var(--navy);
  transform: scaleX(0); transform-origin: 0 50%;
}
@media (min-width: 1150px) {
  .flow-grid { grid-template-columns: repeat(4, 1fr); }
}

.flow-grid[data-reveal="true"] .flow-step { opacity: 0; transform: translateY(14px); }
.flow-grid[data-reveal="true"] .flow-step::after { transform: scaleX(0); }

.flow-grid[data-revealed="true"] .flow-step {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.flow-grid[data-revealed="true"] .flow-step::after {
  transform: scaleX(1);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
.flow-grid[data-revealed="true"] .flow-step:nth-child(1)::after { transition-delay: 0s; }
.flow-grid[data-revealed="true"] .flow-step:nth-child(2)::after { transition-delay: .34s; }
.flow-grid[data-revealed="true"] .flow-step:nth-child(3)::after { transition-delay: .68s; }
.flow-grid[data-revealed="true"] .flow-step:nth-child(4)::after { transition-delay: 1.02s; }
.flow-grid[data-revealed="true"] .flow-step:nth-child(1) { transition-delay: .12s; }
.flow-grid[data-revealed="true"] .flow-step:nth-child(2) { transition-delay: .46s; }
.flow-grid[data-revealed="true"] .flow-step:nth-child(3) { transition-delay: .80s; }
.flow-grid[data-revealed="true"] .flow-step:nth-child(4) { transition-delay: 1.14s; }

.flow-panel { margin-top: clamp(2rem, 4vw, 3.25rem); }

/* --- Practice rows ------------------------------------------------------
   The handoff's signature two-column row: a serif heading in the left column,
   the copy in a wider right column, separated by hairlines. */
.practice {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.6rem, 5vw, 5rem);
  padding-block: clamp(2.25rem, 4.4vw, 3.75rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.practice:first-of-type { border-top: 1px solid var(--ink); }
@media (max-width: 900px) { .practice { grid-template-columns: 1fr; gap: 1.1rem; } }
.practice h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.25rem);
  line-height: 1.2; letter-spacing: -.014em; margin: 0; max-width: 12em;
}
html.lang-zh .practice h3[lang="zh"] {
  font-family: var(--zh-serif); font-weight: 400; line-height: 1.34; letter-spacing: .01em;
}
.practice p { margin: 0 0 1rem; font-size: var(--fs-body); line-height: 1.8; color: var(--ink-2); max-width: 44em; }
.practice p:last-child { margin-bottom: 0; }

/* Short qualifier list under a practice row. */
.marks { margin: 1.4rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.marks li {
  font-size: var(--fs-xs); letter-spacing: .03em; color: var(--ink-3);
  position: relative; padding-left: 1rem;
}
html.lang-zh .marks li[lang="zh"] { letter-spacing: 0; }
.marks li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 7px; height: 1px; background: var(--navy);
}

/* --- Definition rows (fees, terms, families) ---------------------------- */
.defs { border-top: 1px solid var(--ink); }
.def {
  display: grid; grid-template-columns: minmax(180px, .9fr) 2fr;
  gap: clamp(1.25rem, 4vw, 4rem);
  padding-block: clamp(1.4rem, 2.4vw, 2rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (max-width: 760px) { .def { grid-template-columns: 1fr; gap: .5rem; } }
/* Sized off the larger body step, or the row heading sits too close to the
   copy beside it to read as a heading. */
.def h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.32rem, 1.18rem + .5vw, 1.62rem);
  line-height: 1.28; margin: 0; letter-spacing: -.004em;
}
html.lang-zh .def h3[lang="zh"] { font-family: var(--zh-serif); letter-spacing: .01em; }
.def p { margin: 0; font-size: var(--fs-body); line-height: 1.8; color: var(--ink-2); max-width: 46em; }
.def-note {
  display: block; margin-top: .5rem;
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-3);
}

/* --- Report / entry listing --------------------------------------------- */
.latest { border-top: 1px solid var(--ink); }
.entry {
  display: grid; grid-template-columns: 130px 1fr 150px;
  gap: clamp(1rem, 2.4vw, 2.75rem);
  align-items: start;
  padding-block: clamp(1.3rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
@media (max-width: 880px) { .entry { grid-template-columns: 1fr; gap: .5rem; } }
.entry:hover .e-t { color: var(--navy); }
.e-k {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); padding-top: .55rem;
}
.e-t {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.38rem, 1.15rem + .85vw, 1.85rem);
  line-height: 1.3; letter-spacing: -.006em;
  transition: color .18s ease;
}
html.lang-zh .e-t[lang="zh"] { font-family: var(--zh-serif); letter-spacing: .01em; line-height: 1.42; }
.e-s { display: block; margin: .6rem 0 0; font-size: var(--fs-sm); line-height: 1.74; color: var(--ink-2); max-width: 46em; }
.e-m { font-size: var(--fs-xs); color: var(--ink-3); text-align: right; padding-top: .55rem; }
@media (max-width: 880px) { .e-m { text-align: left; padding-top: .25rem; } }

/* --- Strategy family bars ----------------------------------------------- */
.universe-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 900px) {
  .universe-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}
.fambar-list { list-style: none; margin: 0; padding: 0; }
.fambar {
  display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
  align-items: center; gap: 1rem;
  padding-block: .85rem;
}
.fambar + .fambar { border-top: 1px solid var(--line); }
@media (max-width: 420px) {
  .fambar { grid-template-columns: 1fr auto; gap: .35rem .75rem; }
  .fambar-track { grid-column: 1 / -1; }
}
.fambar-name { font-size: var(--fs-sm); color: var(--ink-2); }
.fambar-track { height: 4px; background: var(--paper-2); border: 0; overflow: hidden; }
/* Bars are sized from a --pct custom property set inline on each row, so the
   data lives in the markup. transform is left free for the reveal animation
   below to drive. */
.fambar-fill {
  display: block; height: 100%; width: calc(var(--pct) * 1%);
  background: var(--navy); transform-origin: 0 50%;
}
.fambar.is-muted .fambar-fill { background: var(--navy-300); }
.fambar-val {
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.fambar.is-muted .fambar-val { color: var(--ink-3); }

.fambar-list[data-reveal="true"] .fambar-fill { transform: scaleX(0); }
.fambar-list[data-revealed="true"] .fambar-fill {
  transform: scaleX(1);
  transition: transform .85s cubic-bezier(.22,.61,.36,1);
}
.fambar-list[data-revealed="true"] .fambar:nth-child(1)  .fambar-fill { transition-delay: 0s; }
.fambar-list[data-revealed="true"] .fambar:nth-child(2)  .fambar-fill { transition-delay: .07s; }
.fambar-list[data-revealed="true"] .fambar:nth-child(3)  .fambar-fill { transition-delay: .14s; }
.fambar-list[data-revealed="true"] .fambar:nth-child(4)  .fambar-fill { transition-delay: .21s; }
.fambar-list[data-revealed="true"] .fambar:nth-child(5)  .fambar-fill { transition-delay: .28s; }
.fambar-list[data-revealed="true"] .fambar:nth-child(6)  .fambar-fill { transition-delay: .35s; }
.fambar-list[data-revealed="true"] .fambar:nth-child(7)  .fambar-fill { transition-delay: .42s; }
.fambar-list[data-revealed="true"] .fambar:nth-child(8)  .fambar-fill { transition-delay: .49s; }
.fambar-list[data-revealed="true"] .fambar:nth-child(9)  .fambar-fill { transition-delay: .56s; }
.fambar-list[data-revealed="true"] .fambar:nth-child(10) .fambar-fill { transition-delay: .63s; }

.panel-head {
  font-family: var(--label);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 .85rem;
}
html.lang-zh .panel-head[lang="zh"] { letter-spacing: .04em; text-transform: none; font-weight: 500; }
.panel .panel-head + p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

.stat-grid-tight { gap: clamp(1.5rem, 2.6vw, 2.25rem); }
.stat-grid-tight .stat .num { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); }

/* --- Timeline ------------------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: .5rem; bottom: .5rem;
  width: 1px; background: var(--line); transform-origin: 50% 0;
}
.tl-item { position: relative; padding-left: 2.75rem; }
.tl-item + .tl-item { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.tl-marker {
  position: absolute; left: 0; top: .45rem;
  width: 11px; height: 11px; border: 1px solid var(--navy); background: var(--paper);
}
.tl-item:last-child .tl-marker { background: var(--navy); }
.tl-year {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem);
  line-height: 1; color: var(--navy); margin: 0 0 .35rem;
}
.tl-phase {
  font-family: var(--label);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem;
}
html.lang-zh .tl-phase[lang="zh"] { letter-spacing: .04em; text-transform: none; font-weight: 500; }
.tl-body h3 { font-size: var(--fs-h3); margin: 0 0 .45rem; }
.tl-body p:last-child { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; max-width: 62ch; }

.timeline[data-reveal="true"]::before { transform: scaleY(0); }
.timeline[data-reveal="true"] .tl-item { opacity: 0; transform: translateY(16px); }
.timeline[data-reveal="true"] .tl-marker { transform: scale(0); }

.timeline[data-revealed="true"]::before {
  transform: scaleY(1); transition: transform 1.5s cubic-bezier(.22,.61,.36,1);
}
.timeline[data-revealed="true"] .tl-item {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.timeline[data-revealed="true"] .tl-marker {
  transform: scale(1); transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.timeline[data-revealed="true"] .tl-item:nth-child(1) { transition-delay: .18s; }
.timeline[data-revealed="true"] .tl-item:nth-child(2) { transition-delay: .50s; }
.timeline[data-revealed="true"] .tl-item:nth-child(3) { transition-delay: .82s; }
.timeline[data-revealed="true"] .tl-item:nth-child(4) { transition-delay: 1.14s; }
.timeline[data-revealed="true"] .tl-item:nth-child(1) .tl-marker { transition-delay: .24s; }
.timeline[data-revealed="true"] .tl-item:nth-child(2) .tl-marker { transition-delay: .56s; }
.timeline[data-revealed="true"] .tl-item:nth-child(3) .tl-marker { transition-delay: .88s; }
.timeline[data-revealed="true"] .tl-item:nth-child(4) .tl-marker { transition-delay: 1.20s; }

/* --- Cards --------------------------------------------------------------
   Bordered boxes are gone; a card is now a hairline-topped column, the same
   treatment as a step or a figure. */
.card-grid {
  display: grid; gap: clamp(1.75rem, 3.4vw, 3.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.card-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.card {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--ink);
  padding-top: 1.4rem;
  background: none;
}
.card h3 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.card p { font-size: var(--fs-sm); color: var(--ink-2); max-width: 56ch; }
.card .card-link { margin-top: auto; padding-top: 1.1rem; font-size: var(--fs-sm); }

/* Icons are set as a small mark above the heading rather than in a tinted
   tile — the tile was the strongest remaining "web app" signal. */
.card-icon { color: var(--navy); margin-bottom: 1rem; }
.card-icon svg { width: 22px; height: 22px; }

.card .idx {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.55rem);
  line-height: 1; color: var(--navy); margin-bottom: 1rem;
}

/* --- Feature row / panel ------------------------------------------------ */
.feature-row { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.feature-row + .feature-row { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 861px) {
  .feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* A panel is a quiet tinted block with a navy edge, not a floating card. */
.panel {
  background: var(--paper-2);
  border-left: 2px solid var(--navy);
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 2.15rem);
}
.panel ul { margin: 0; padding-left: 0; list-style: none; }
.panel li {
  position: relative; padding-left: 1.4rem; margin-bottom: .85rem;
  font-size: var(--fs-sm); line-height: 1.78; color: var(--ink-2);
}
.panel li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 11px; height: 1px; background: var(--navy);
}
.panel li:last-child { margin-bottom: 0; }
.panel li strong { color: var(--ink); font-weight: 500; }

/* --- Report tiles -------------------------------------------------------- */
.report-grid {
  display: grid; gap: clamp(1.75rem, 3.4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.report {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--ink);
  transition: border-color .18s ease;
}
.report:hover { border-top-color: var(--navy); }
.report-cover {
  position: relative; aspect-ratio: 16 / 9; margin-top: 1.4rem;
  background: linear-gradient(150deg, var(--abyss), var(--navy));
}
.report-cover.alt { background: linear-gradient(150deg, #101a33, var(--navy-2)); }
.report-cover.gold { background: linear-gradient(150deg, var(--navy), #4a5678); }
.report-cover .tag {
  position: absolute; left: 1rem; bottom: 1rem;
  font-family: var(--label); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.report-body { padding-top: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.report-meta {
  font-family: var(--label); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .7rem;
}
html.lang-zh .report-meta[lang="zh"] { letter-spacing: .04em; text-transform: none; font-weight: 500; }
.report h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.36rem, 1.18rem + .65vw, 1.7rem);
  line-height: 1.3; letter-spacing: -.006em; margin-bottom: .6rem;
}
html.lang-zh .report h3[lang="zh"] { font-family: var(--zh-serif); letter-spacing: .01em; }
.report p { font-size: var(--fs-sm); color: var(--ink-2); }
.report .report-link { margin-top: auto; padding-top: 1.1rem; }
.report .report-link a { display: inline-flex; align-items: center; gap: .45rem; }
.report .report-link svg { width: 15px; height: 15px; flex-shrink: 0; }

/* --- Contact ------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.25rem, 6vw, 6rem); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.clines { margin: 0; border-top: 1px solid var(--ink); }
.cline {
  display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem;
  padding-block: 1.15rem; border-bottom: 1px solid var(--line);
}
@media (max-width: 560px) { .cline { grid-template-columns: 1fr; gap: .25rem; } }
.cline dt {
  font-family: var(--label); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  padding-top: .45rem;
}
html.lang-zh .cline dt[lang="zh"] { letter-spacing: .04em; text-transform: none; font-weight: 500; }
.cline dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.cline dd a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.cline dd a:hover { border-bottom-color: var(--navy); }

.contact-card { padding: 0; text-align: left; }
.contact-email {
  display: inline-block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.15rem);
  line-height: 1.2; letter-spacing: -.012em;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: .35rem; margin-bottom: 1.5rem;
  overflow-wrap: anywhere;
}
.contact-email:hover { color: var(--abyss); border-bottom-color: var(--navy); }

/* --- Closing call to action ---------------------------------------------- */
.cta {
  background: var(--abyss); color: #fff;
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
}
.cta h2 { color: #fff; max-width: 15em; }
.cta p { color: var(--on-dark-2); max-width: 56ch; }
.cta .btn-row { margin-top: 2rem; }

/* --- Disclosure / legal --------------------------------------------------- */
.disclosure {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--ink-3);
}
.disclosure > * { max-width: 100ch; }
.disclosure strong { color: var(--ink); font-weight: 500; }
.disclosure + .disclosure { margin-top: 1rem; }

.legal-body h2 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.85rem);
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.legal-body h2:first-of-type { margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.legal-body h3 { font-size: var(--fs-h3); margin-top: 1.9rem; }
.legal-body p { font-size: var(--fs-body); line-height: 1.85; color: var(--ink-2); }
.legal-body ul { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.legal-body li {
  position: relative; padding-left: 1.4rem; margin-bottom: .65rem;
  font-size: var(--fs-body); line-height: 1.8; color: var(--ink-2);
}
.legal-body li::before {
  content: ""; position: absolute; left: 0; top: .84em;
  width: 11px; height: 1px; background: var(--navy);
}
.callout {
  margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
  padding: 1.6rem 1.75rem;
  background: var(--paper-2);
  border-left: 2px solid var(--navy);
}
.callout p { margin: 0; font-size: var(--fs-sm); line-height: 1.78; color: var(--ink-2); }
.callout p + p { margin-top: .75rem; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--abyss); color: var(--on-dark);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 3rem;
}
.footer-grid {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
.footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.footer-brand .brand-name { color: #fff; font-size: 1.2rem; }
.footer-brand .brand-sub { color: rgba(255,255,255,.5); white-space: normal; }
.site-footer p { color: var(--on-dark-2); max-width: 30em; font-size: var(--fs-sm); line-height: 1.74; }

.footer-col h4 {
  font-family: var(--label);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--on-dark-2); margin: 0 0 1rem;
}
html.lang-zh .footer-col h4[lang="zh"] { letter-spacing: .04em; text-transform: none; font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer-col a { font-size: var(--fs-sm); color: rgba(255,255,255,.8); text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-col a[href^="mailto:"] { overflow-wrap: anywhere; }

@media (max-width: 950px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

.footer-legal {
  margin-top: clamp(2.75rem, 5.5vw, 4.5rem);
  padding-top: 1.65rem;
  border-top: 1px solid var(--on-dark-rule);
}
.footer-legal p {
  font-size: var(--fs-sm); line-height: 1.85; color: var(--on-dark-2);
  max-width: 100ch; margin-bottom: .9rem;
}
.footer-legal strong { color: #fff; font-weight: 500; }
.footer-legal a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--on-dark-rule); }
.footer-legal a:hover { border-bottom-color: #fff; }
.footer-legal .copyright {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 1.75rem;
  font-size: var(--fs-xs); color: rgba(255,255,255,.42);
}
.footer-legal .copyright a { color: rgba(255,255,255,.6); border-bottom: 0; }
.footer-legal .copyright a:hover { color: #fff; }

/* --- Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.hero-narrow { max-width: min(62ch, 100%); }

/* --- Membership pricing --------------------------------------------------- */
.billing-toggle { display: flex; width: fit-content; border: 1px solid var(--line); }
.billing-option {
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 500;
  background: none; border: 0; color: var(--ink-3);
  padding: .65rem 1.25rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background-color .18s ease, color .18s ease;
}
.billing-option + .billing-option { border-left: 1px solid var(--line); }
.billing-option:hover { color: var(--ink); }
.billing-option.is-active { background: var(--navy); color: #fff; }
.save-badge {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  background: var(--paper-2); color: var(--navy); padding: .12rem .4rem;
}
.billing-option.is-active .save-badge { background: rgba(255,255,255,.2); color: #fff; }

.plan-grid { align-items: stretch; }
.card-grid.plan-grid-single.plan-grid-single {
  grid-template-columns: minmax(0, min(100%, 30rem));
}
.plan { position: relative; padding-top: 1.4rem; }
.plan-featured { border-top-color: var(--navy); border-top-width: 2px; }
.plan-flag {
  font-family: var(--label); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--navy);
  margin-bottom: .8rem;
}
html.lang-zh .plan-flag[lang="zh"] { letter-spacing: .04em; text-transform: none; font-weight: 500; }
.plan-name { font-size: var(--fs-h3); margin-bottom: .8rem; }
.plan-price { margin: 0 0 .35rem; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.plan-amount {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3rem);
  line-height: 1; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.plan-period { font-size: var(--fs-sm); color: var(--ink-3); }
.plan-note { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 1.6rem; }
.plan-features { margin-bottom: 1.6rem; flex: 1; }
.plan-features ul { margin: 0; padding: 0; list-style: none; }
.plan-features li {
  position: relative; padding-left: 1.4rem; margin-bottom: .7rem;
  font-size: var(--fs-sm); line-height: 1.74; color: var(--ink-2);
}
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 11px; height: 1px; background: var(--navy);
}
.plan-trial { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 1.25rem; }
.plan-trial-none { color: var(--ink-3); }
.plan-cta { margin-top: auto; }
.plan-cta .btn { width: 100%; }
.plan-footnote {
  max-width: 80ch; margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: var(--fs-xs); line-height: 1.8; color: var(--ink-3);
}

/* --- Print --------------------------------------------------------------- */
@media print {
  .site-header, .cta, .nav-toggle, .langbtn { display: none; }
  body { color: #000; }
  .hero, .pagehead { background: none; color: #000; padding-block: 1.5rem; }
  .hero::before { display: none; }
  .hero h1, .cta h2, .pagehead h1 { color: #000; }
  .hero .lede, .pagehead .lede, .pagehead p { color: #333; }
  .billing-toggle, .plan-cta { display: none; }
}