/* ============ DESIGN TOKENS ============ */
:root {
  --color-maroon: #5c1d24;
  --color-maroon-dark: #4a181d;
  --color-purple: #2d1e54;
  --color-indigo-text: #1e1b4b;
  --color-lavender: #eef0f8;
  --color-badge-bg: #ece9fc;
  --color-pale: #f6f7fb;
  --color-coral: #ff5a36;
  --color-gray-text: #4b5563;
  --color-border: #e5e7eb;
  --color-footer-navy: #110929;
  --color-mid-banner: #1e113e;
  --color-white: #ffffff;
  /* Pricing page only — the Figma pricing design is a dark page (not just a
     dark hero like every other redesign-system page), so these tokens are
     scoped to that one page's dark sections/cards rather than becoming
     sitewide defaults. */
  --color-page-dark: #0b0816;
  --color-card-dark: #100c22;
  --color-dark-text-muted: #afa8c4;
  --color-dark-text-body: #f0eef8;

  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Manrope', sans-serif;

  --container-x: 120px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;

  /* Drops incsingapore.css's real navbar's 1400px content cap on pages
     using this design system, so the nav lines up with --container-x
     instead of centering independently. See .navbar-wrapper's comment
     in incsingapore.css. */
  --nav-wrapper-max-width: none;

  /* Widens the homepage's old-system .section-wrapper (1400px cap) at
     the client's request, without touching the same class on pricing.njk/
     faq.njk/privacy-policy.njk, which never define this variable and
     keep the original 1400px cap. See .section-wrapper's comment in
     incsingapore.css. */
  --section-wrapper-max-width: 1680px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-indigo-text);
  background: var(--color-white);
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
/* Now that this page loads alongside incsingapore.css (real nav/footer),
   its sitewide `p { max-width: 38ch; }` readability rule was silently
   wrapping paragraphs this design never intended to constrain (e.g.
   hero-foot-bar's one-line sentence breaking onto 3 lines). Neutralize
   it here; classes that DO want a real max-width (.hero-copy,
   .section-header p, etc.) already set their own, which still wins. */
p { max-width: none; }
/* Same collision, for headings: incsingapore.css's `h2 { max-width: 22ch }`
   / `h3 { max-width: 22ch }` shrink every h2/h3 box to ~560px regardless
   of parent width, which silently broke `.section-title.center` — the
   text centered within that shrunk box instead of across the section,
   so it only looked centered by coincidence when the text happened to
   fill the box. Also resets the real site's own h2 padding-bottom (my
   margin reset above didn't cover padding). */
h1, h2, h3, h4 { max-width: none; padding: 0; }
hr { border: none; border-top: 1px solid var(--color-border); margin: 0; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary { background: var(--color-coral); color: var(--color-white); }
.btn-primary:hover { background: #e8481f; box-shadow: 0 6px 16px rgba(255, 90, 54, 0.35); transform: translateY(-1px); }
.btn-primary:active { background: #d63f19; box-shadow: none; transform: translateY(0); }
.btn-outline { background: transparent; border: 1.5px solid var(--color-white); color: var(--color-coral); }
.btn-outline:hover { background: var(--color-white); border-color: var(--color-white); transform: translateY(-1px); }
.btn-outline:active { background: rgba(255, 255, 255, 0.85); transform: translateY(0); }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--color-coral); outline-offset: 2px; }

.badge {
  display: inline-flex;
  background: var(--color-badge-bg);
  color: var(--color-purple);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 30px;
}

/* ============ SECTION WRAPPERS ============ */
.rd-section {
  padding: 96px var(--container-x);
}
.section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-purple);
  font-size: 38px;
}
.section-title.center,
.rd-section-header.center { text-align: center; }
.rd-section-header p {
  color: var(--color-gray-text);
  font-size: 16px;
  line-height: 24px;
  max-width: 789px;
  margin: 16px auto 0;
}

.card {
  background: var(--color-lavender);
  border-radius: var(--radius-md);
  padding: 32px;
}
.card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-indigo-text);
  margin-bottom: 16px;
}
.card p { color: var(--color-gray-text); font-size: 15px; line-height: 22px; }

.bullet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bullet-list li { display: flex; gap: 12px; align-items: flex-start; }
.bullet-list li img { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.bullet-list li span { font-size: 15px; line-height: 22px; color: var(--color-indigo-text); }

/* ============ HERO ============ */
/* padding-top clears the real site's fixed .navbar (~80px), which overlays
   this page transparently via heroDark/.navbar.home rather than pushing
   content down. */
.hero { background: var(--color-maroon); padding-top: 96px; }
/* Homepage-only variant: full-bleed background photo instead of the
   service pages' two-column text+boxed-photo layout. Reuses the real
   .bg-image-wrapper/.bg-image/.bg-overlay pattern already used for the
   old-system inner-hero pages, rather than inventing a new one. Text
   position/alignment is unchanged — still .hero-left inside
   .hero-content, just without a .hero-right column next to it. */
/* z-index:0 (not just position:relative) is required here — without an
   explicit z-index, .home-hero doesn't establish its own stacking
   context, so .bg-image-wrapper's z-index:-1 escapes past it and stacks
   behind unrelated elements higher up the page instead of staying
   contained (and visible) within this section. */
.home-hero { position: relative; z-index: 0; overflow: hidden; }
.home-hero .hero-content { position: relative; z-index: 1; }
/* Full-viewport-height hero, per client request — overrides the shared
   .hero's viewport-relative padding-top formula (built for the service
   pages' stat-strip alignment, not relevant here). Written as the
   compound .hero.home-hero selector so it reliably wins over that rule
   regardless of source order/media-query specificity. */
.hero.home-hero {
  min-height: 100vh;
  padding-top: 0;
  display: flex;
  align-items: center;
}
/* .bg-overlay's default (flat 40% black) wasn't dark enough for legible
   white text against this particular photo — strengthened here and
   angled left-to-right (darkest behind the text, lighter over the rest
   of the photo) rather than raising the shared .bg-overlay's opacity
   sitewide. */
.home-hero .bg-overlay {
  opacity: 1;
  background: linear-gradient(90deg, rgba(20, 10, 15, 0.92) 0%, rgba(20, 10, 15, 0.75) 55%, rgba(20, 10, 15, 0.35) 100%);
}
/* Belt-and-braces on top of the gradient — this particular photo has a
   bright window/sky patch right behind the heading, so text-shadow
   guarantees legibility regardless of what's under it at any viewport
   width (the gradient breakpoint shifts with the text's own reflow). */
.home-hero .hero-heading, .home-hero .hero-copy {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
/* Above ~1200px (the desktop two-column hero layout), stretch the hero's
   top clearance with viewport height so the stat strip's bottom edge
   lands on the viewport's bottom edge on any monitor, not just one
   measured resolution. 853px = the hero's own fixed content height
   (hero-content + hero-foot-bar + stat-strip) at desktop widths, which
   doesn't vary with viewport width in this layout — recheck this number
   if hero-content padding or .hero-right's size change again. max()
   keeps a floor of 227px (the client-confirmed value at 1920x1080, ~960px
   real browser viewport height) so shorter/laptop-height windows never
   drop below that baseline spacing — it can still grow taller on bigger
   monitors, just never shrink past this. */
@media (min-width: 1201px) {
  .hero { padding-top: max(130px, calc(100vh - 853px)); }
}
.hero-content {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 64px var(--container-x);
  /* Matches the incorporation page's own content height (its 3-line H1
     is the tallest thing any hero on this design system has needed so
     far) so every service page's hero renders the same total height as
     the others, regardless of how long that page's own heading/copy is.
     A future page with a taller heading than this becomes the new
     baseline naturally — min-height just won't bind for it. */
  min-height: 565px;
}
.hero-left { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 56px;
  line-height: 64px;
  color: var(--color-white);
}
.hero-copy {
  font-size: 18px;
  line-height: 26px;
  color: rgba(246, 247, 251, 0.93);
  max-width: 560px;
}
.hero-actions { display: flex; gap: 16px; align-items: center; }
.hero-right { width: 420px; height: 400px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; }
.hero-right img { width: 100%; height: 100%; object-fit: cover; }

.hero-foot-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-maroon-dark);
  padding: 16px var(--container-x);
}
.hero-foot-bar img,
.hero-foot-bar svg { width: 20px; height: 20px; flex-shrink: 0; color: rgba(238, 240, 248, 0.93); }
.hero-foot-bar p { font-size: 14px; color: rgba(238, 240, 248, 0.93); }

/* ============ STAT STRIP ============ */
.stat-strip {
  display: flex;
  justify-content: space-between;
  padding: 48px var(--container-x);
  border-bottom: 1px solid var(--color-border);
}
.stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.stat-num { font-family: var(--font-heading); font-weight: 800; font-size: 44px; color: var(--color-purple); }
.stat-label { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--color-gray-text); }

/* ============ WHY INCORPORATE ============ */
.why-incorporate { background: var(--color-pale); display: flex; flex-direction: column; gap: 56px; }
.why-outsource { background: var(--color-pale); display: flex; flex-direction: column; gap: 56px; }
.why-grid { display: flex; gap: 32px; }
.why-card { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.card-num {
  width: 36px; height: 36px;
  background: var(--color-purple);
  color: var(--color-white);
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 16px;
}

/* ============ WHO THIS IS FOR ============ */
.who-this-is-for { display: flex; flex-direction: column; gap: 48px; }
.who-intro { display: flex; flex-direction: column; gap: 16px; max-width: 789px; }
.who-intro p { color: var(--color-gray-text); font-size: 16px; line-height: 24px; }
.who-split { display: flex; gap: 32px; align-items: stretch; }
.who-left-image { width: 481px; height: 400px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; }
.who-left-image img { width: 100%; height: 100%; object-fit: cover; }
.who-right-panels { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.panel { border-radius: var(--radius-md); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.citizen-panel { background: var(--color-lavender); }
.foreigner-panel { background: var(--color-pale); }
.panel h3 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; }
.panel p { color: var(--color-gray-text); font-size: 15px; line-height: 22px; }
.rd-link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-coral); font-weight: 700; font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}
.rd-link-arrow:hover { color: #e8481f; gap: 12px; text-decoration: underline; }
.rd-link-arrow img { width: 16px; height: 16px; }
.link-plain {
  color: var(--color-purple); font-weight: 700; font-size: 15px;
  cursor: pointer;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.link-plain:hover { color: var(--color-coral); text-decoration: underline; }

/* ============ COMMON STRUCTURES ============ */
.common-structures { background: var(--color-pale); display: flex; flex-direction: column; gap: 56px; }
.structures-grid { display: flex; flex-direction: column; gap: 32px; }
.structures-grid > div { display: flex; gap: 32px; }
.struct-card { flex: 1; }

/* ============ DOCUMENTS & NAME CHECK ============ */
.documents-and-name-check { display: flex; flex-direction: column; gap: 56px; }
.documents-grid { display: flex; gap: 32px; align-items: flex-start; }
.checklist-column { background: var(--color-lavender); flex: 1.4 1 0; min-width: 0; padding: 40px; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 24px; }
.checklist-column h3 { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: var(--color-purple); }
.fine-print { font-size: 14px; line-height: 20px; color: var(--color-gray-text); }
.name-check-column { background: var(--color-lavender); flex: 1 1 0; min-width: 0; padding: 40px; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 24px; }
.name-check-column h3 { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: var(--color-purple); }
.name-check-column p { font-size: 15px; line-height: 24px; }
.name-actions { display: flex; gap: 16px; align-items: center; }

/* ============ LEGAL BASIS ============ */
.legal-basis { background: var(--color-pale); display: flex; flex-direction: column; gap: 56px; }
.legal-cards { display: flex; gap: 32px; }
.legal-cards .card { flex: 1; }

/* ============ LEGALLY REQUIRED — plain-prose variant (corporate-secretary
   page) — centered header, but body copy stays left-aligned in a
   narrower centered column, no card grid ============ */
.legal-required { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.legal-copy { display: flex; flex-direction: column; gap: 24px; max-width: 960px; text-align: center; }
.legal-copy p { font-size: 17px; line-height: 27px; color: var(--color-gray-text); }

/* ============ HOW IT WORKS ============ */
.how-it-works-section { background: var(--color-pale); display: flex; flex-direction: column; gap: 64px; }
.rd-steps-grid { display: flex; flex-direction: column; gap: 48px; }
.rd-steps-grid::before { content: none; }
.how-it-works-section .rd-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.step-node { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.step-badge {
  width: 40px; height: 40px; border-radius: 20px;
  background: var(--color-purple); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 16px;
}
.step-node h4 { font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
.step-node p { color: var(--color-gray-text); font-size: 14px; line-height: 22px; }
.incorporation-badge-row { display: flex; gap: 16px; justify-content: center; padding-top: 24px; }
.badge-item { display: flex; gap: 8px; align-items: center; }
.badge-item img { width: 20px; height: 20px; }
.badge-item span { font-weight: 700; font-size: 14px; color: var(--color-purple); }

/* ============ COMPLIANCE PROCESS ============ */
.compliance-process-section { display: flex; gap: 80px; align-items: center; }
.compliance-process-section .left-content { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.compliance-process-section .left-content > p { color: var(--color-gray-text); font-size: 16px; line-height: 24px; }
.right-photo { width: 544px; height: 400px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; }
.right-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============ PRICING ============ */
.pricing-section { background: var(--color-pale); display: flex; flex-direction: column; gap: 56px; }
.pricing-cards-container { display: flex; gap: 32px; align-items: stretch; }
.pricing-card {
  flex: 1;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: 0 8px 12px rgba(29, 22, 29, 0.04);
}
.card-header { display: flex; flex-direction: column; gap: 16px; }
.card-header-row { display: flex; justify-content: space-between; align-items: center; }
.card-header h3 { font-family: var(--font-heading); font-weight: 800; font-size: 22px; }
.price-row { display: flex; align-items: baseline; gap: 4px; }
.price { font-family: var(--font-heading); font-weight: 800; font-size: 44px; color: var(--color-purple); }
.price-suffix { font-size: 15px; color: var(--color-gray-text); }

/* ============ PRICING PAGE — full plan-comparison cards (pricing.njk only).
   Distinct from .pricing-card/.pricing-cards-container above (the light
   3-bullet teaser reused on corp-sec/incorporation) — this is the actual
   full-featured comparison table, so it gets its own dark-section variant
   matching the Figma pricing design rather than stretching the teaser
   card to do a job it wasn't built for. ============ */
.pricing-detail-section {
  background: var(--color-page-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
.pricing-detail-section .rd-section-header p { color: var(--color-dark-text-muted); }
.pricing-detail-section .section-title { color: var(--color-white); }
.pricing-detail-cards { display: flex; gap: 40px; align-items: stretch; width: 100%; max-width: 1200px; }
.plan-card-detailed {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 48px;
  border-radius: 8px 40px 8px 40px;
}
.plan-card-featured {
  background: var(--color-card-dark);
  border: 2px solid var(--color-coral);
  box-shadow: 0 16px 20px rgba(255, 90, 54, 0.12);
}
.plan-card-standard {
  background: var(--color-lavender);
  border: 1px solid var(--color-border);
  border-radius: 40px 8px 40px 8px;
  box-shadow: 0 16px 20px rgba(0, 0, 0, 0.05);
}
.plan-tag-row { display: flex; align-items: center; justify-content: space-between; }
.plan-tag-row .badge { text-transform: uppercase; letter-spacing: 0.02em; border-radius: 4px; padding: 6px 14px; font-size: 12px; }
.plan-badge-popular { background: var(--color-coral); color: var(--color-white); }
.plan-tag-recommended { color: var(--color-dark-text-muted); font-size: 12px; font-weight: 600; }
.plan-tag-label { color: var(--color-purple); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.plan-tag-label-muted { color: #58506e; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.plan-meta-detailed { display: flex; flex-direction: column; gap: 16px; }
.plan-meta-detailed h3 { font-family: var(--font-heading); font-weight: 800; font-size: 28px; line-height: 36px; }
.plan-card-featured .plan-meta-detailed h3 { color: var(--color-white); }
.plan-card-standard .plan-meta-detailed h3 { color: #1a1429; }
.plan-eligibility { font-size: 14px; font-weight: 600; text-transform: uppercase; }
.plan-card-featured .plan-eligibility { color: var(--color-coral); }
.plan-card-standard .plan-eligibility { color: #2d1e54; }
.price-block-detailed { display: flex; flex-direction: column; gap: 12px; }
.price-line-detailed { display: flex; align-items: baseline; gap: 4px; }
.price-currency { font-family: var(--font-heading); font-weight: 700; font-size: 28px; }
.price-amount { font-family: var(--font-heading); font-weight: 900; font-size: 72px; line-height: 1; }
.price-period { font-size: 16px; }
.plan-card-featured .price-currency, .plan-card-featured .price-amount { color: var(--color-white); }
.plan-card-standard .price-currency, .plan-card-standard .price-amount { color: #1a1429; }
.price-period, .plan-card-standard .price-fineprint { color: #58506e; }
.plan-card-featured .price-period, .plan-card-featured .price-fineprint { color: var(--color-dark-text-muted); }
.price-fineprint { font-size: 13px; line-height: 18px; }
.plan-cta { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; border-radius: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 15px; text-transform: uppercase; }
.plan-cta-featured { background: var(--color-coral); color: var(--color-white); box-shadow: 0 8px 10px rgba(255, 90, 54, 0.24); }
.plan-cta-featured:hover { background: #e8481f; }
.plan-cta-standard { background: var(--color-purple); color: var(--color-white); box-shadow: 0 8px 10px rgba(45, 30, 84, 0.1); }
.plan-cta-standard:hover { background: #241851; }
.feature-groups-detailed { display: flex; flex-direction: column; gap: 28px; width: 100%; }
.feature-groups-detailed hr { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.plan-card-standard .feature-groups-detailed hr { border-top: 1px solid var(--color-border); }
.feature-group-detailed { display: flex; flex-direction: column; gap: 16px; }
.feature-group-title { font-family: var(--font-heading); font-weight: 800; font-size: 13px; text-transform: uppercase; }
.plan-card-featured .feature-group-title { color: var(--color-coral); }
.plan-card-standard .feature-group-title { color: #5c1d24; }
.feature-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.feature-check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-badge { width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.plan-card-featured .check-badge { background: var(--color-coral); }
.plan-card-standard .check-badge { background: var(--color-purple); }
.check-badge svg { width: 10px; height: 10px; }
.feature-check-list span { font-size: 14px; line-height: 20px; }
.plan-card-featured .feature-check-list span { color: var(--color-dark-text-body); }
.plan-card-standard .feature-check-list span { color: #58506e; }
.more-services-detailed { display: flex; justify-content: center; width: 100%; }
.more-services-detailed summary { font-family: var(--font-heading); font-weight: 700; font-size: 14px; text-transform: uppercase; text-decoration: underline; cursor: pointer; list-style: none; }
.more-services-detailed summary::-webkit-details-marker { display: none; }
.plan-card-featured .more-services-detailed summary { color: var(--color-coral); }
.plan-card-standard .more-services-detailed summary { color: var(--color-purple); }
.more-services-body { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.more-services-body h5 { font-family: var(--font-heading); font-weight: 700; font-size: 14px; }
.more-services-body ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.more-services-body li { font-size: 13px; line-height: 19px; }
.plan-card-featured .more-services-body h5, .plan-card-featured .more-services-body li { color: var(--color-dark-text-body); }
.plan-card-standard .more-services-body h5, .plan-card-standard .more-services-body li { color: #58506e; }

/* ============ RELATED GUIDES — dark section (pricing page) ============ */
.guides-dark-section { background: var(--color-page-dark); display: flex; flex-direction: column; align-items: center; gap: 56px; }
.guides-dark-section .section-title { color: var(--color-white); }
.guides-cards-row { display: flex; gap: 24px; width: 100%; max-width: 1200px; }
.guide-card-dark { flex: 1; background: var(--color-lavender); border: 1px solid var(--color-border); border-radius: 16px; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.guide-card-dark h3 { font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 32px; color: #1a1429; }
.guide-card-dark p { font-size: 14px; line-height: 22px; color: #58506e; }

/* ============ MID-PAGE CTA BANNER ============ */
.mid-page-cta-banner {
  background: var(--color-mid-banner);
  padding: 96px var(--container-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mid-page-cta-banner .rd-eyebrow { font-weight: 700; font-size: 14px; color: var(--color-badge-bg); text-transform: uppercase; }
.mid-page-cta-banner h2 { font-family: var(--font-heading); font-weight: 800; font-size: 48px; color: var(--color-white); max-width: 820px; }
.mid-page-cta-banner .subtext { font-size: 18px; color: rgba(238, 240, 248, 0.8); max-width: 600px; }
/* Optional decorative extras for .mid-page-cta-banner (homepage only —
   the incorporation/corp-sec pages' banners don't include these elements,
   so this is purely additive, nothing changes for them). Relies on the
   base banner's existing position:relative + overflow:hidden. */
.glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; }
.glow-left { left: -80px; top: -80px; background: radial-gradient(circle, rgba(255, 90, 54, 0.18) 0%, rgba(255, 90, 54, 0) 70%); }
.glow-right { right: -80px; top: 40px; background: radial-gradient(circle, rgba(92, 29, 36, 0.22) 0%, rgba(92, 29, 36, 0) 70%); }
.floating-photo { position: absolute; object-fit: cover; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.15); }
.floating-photo-1 { left: 8%; top: 20%; width: 80px; height: 80px; }
.floating-photo-2 { right: 8%; top: 30%; width: 88px; height: 80px; }

/* ============ TWO-PANEL HIGHLIGHT (homepage) ============ */
/* position:relative + z-index:1 is needed so these cards paint above
   .home-hero (which has its own explicit z-index:0 for its background
   image stacking fix) — otherwise the negative-margin overlap below
   would render invisibly behind the hero instead of peeking above it. */
.two-panel-highlight { position: relative; z-index: 1; display: flex; gap: 24px; padding: 96px var(--container-x); background: var(--color-pale); }
/* Photo card stays at its original height/position (no peek) — only the
   dark text card is taller + pulled up. Bottom edges still align: both
   formulas resolve to the same padding-top(96) + used height = 576
   (96+480=576 for the photo card; 96-120+600=576 for the dark card). */
.highlight-photo-card { flex: 1; height: 480px; border-radius: var(--radius-lg); overflow: hidden; }
.highlight-photo-card img { width: 100%; height: 100%; object-fit: cover; }
.highlight-dark-card {
  flex: 1;
  height: 600px;
  margin-top: -120px;
  padding: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-maroon-dark);
  display: flex;
  flex-direction: column;
  /* Was space-between, which — now that the card is 600px tall for the
     peek-out effect — pinned the headline to the top and the paragraphs/
     button to the bottom with one big dead gap in between. Centering
     the two blocks as a unit with a defined gap spreads the vertical
     rhythm more evenly across the whole box instead. */
  justify-content: center;
  gap: 40px;
}
.highlight-card-top { display: flex; flex-direction: column; gap: 24px; }
.highlight-logo-row { display: flex; align-items: center; gap: 8px; }
.highlight-logo-row img { width: 16px; height: 16px; }
.highlight-logo-row span { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-white); }
.highlight-headline { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1.2; color: var(--color-white); }
.highlight-card-bottom { display: flex; flex-direction: column; gap: 24px; }
.highlight-card-bottom p { color: rgba(244, 241, 250, 0.9); font-size: 16px; line-height: 26px; }

/* ============ ON TRACK (homepage) — photo cluster only, centered ========= */
/* padding-top trimmed way down (was 96px, same as every other section)
   so the cluster sits close beneath the old "answer all your daily
   questions" text right above it, instead of floating in a big gap —
   bottom padding kept more normal before the CTA banner below. */
.on-track { display: flex; justify-content: center; align-items: center; padding: 16px var(--container-x) 64px; background: var(--color-white); }
.photo-cluster { position: relative; width: 700px; height: 500px; max-width: 100%; flex-shrink: 0; }
.cluster-photo {
  position: absolute;
  border: 6px solid var(--color-white);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 24px rgba(45, 30, 84, 0.12);
}
.cluster-photo-1 { left: 0; top: 90px; width: 280px; height: 280px; }
.cluster-photo-2 { left: 200px; top: 0; width: 260px; height: 260px; }
.cluster-photo-3 { left: 400px; top: 150px; width: 220px; height: 220px; }

/* ============ FAQ ============ */
.faq-section { padding-left: 240px; padding-right: 240px; display: flex; flex-direction: column; gap: 48px; }
.faq-list { display: flex; flex-direction: column; }
.faq-row { border-bottom: 1px solid var(--color-border); padding: 24px 0; }
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-indigo-text);
  transition: color 0.2s ease;
}
.faq-question:hover { color: var(--color-coral); }
.faq-question:focus-visible { outline: 2px solid var(--color-coral); outline-offset: 4px; }
.faq-icon { width: 24px; height: 24px; flex-shrink: 0; }
/* max-height + JS-set scrollHeight (see scripts.njk) animates smoothly
   for any answer length without a hardcoded pixel cap. */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  font-size: 15px; line-height: 22px; color: var(--color-gray-text);
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}
.faq-question[aria-expanded="true"] + .faq-answer {
  opacity: 1;
  margin-top: 12px;
}
.faq-more-link { display: flex; justify-content: center; }
.faq-more-link a {
  color: var(--color-coral); font-weight: 700; font-size: 16px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq-more-link a:hover { color: #e8481f; text-decoration: underline; }
/* Plus/minus FAQ icon pair (corporate-secretary page) — .faq-icon existed
   but was unused until this page; toggled via CSS off the button's own
   aria-expanded state, no JS icon-swapping needed. */
.faq-icon-minus { display: none; }
.faq-question[aria-expanded="true"] .faq-icon-plus { display: none; }
.faq-question[aria-expanded="true"] .faq-icon-minus { display: block; }

/* ============ FAQ HUB (faq.njk) — tabbed category browser. Reuses
   .faq-list/.faq-row/.faq-question/.faq-answer above (same accordion
   rows, same scripts.njk toggle) but without .faq-section's 240px side
   padding (that narrow centered column was built for corp-sec's short
   single-topic list; this hub needs the full container width for its
   tab bar). New here: the light page header, the tab bar, a circular
   +/− icon badge (this design's icon treatment, vs. corp-sec's image
   icon swap), and the maroon-band/purple-card CTA variant. ============ */
.faq-header { background: var(--color-white); padding: 96px var(--container-x) 48px; display: flex; flex-direction: column; gap: 24px; }
.faq-hero-heading { font-family: var(--font-heading); font-weight: 800; font-size: 56px; line-height: 1.15; color: #6a5f80; }
.faq-main { background: var(--color-white); padding: 0 var(--container-x) 80px; display: flex; flex-direction: column; gap: 40px; }
.tab-nav { display: flex; gap: 40px; border-bottom: 2px solid #e6e2ec; }
.tab-item {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 0 12px; margin-bottom: -2px;
  font-family: var(--font-heading); font-weight: 600; font-size: 16px;
  color: #6a5f80;
}
.tab-item::after { content: ''; display: block; width: 100%; height: 3px; border-radius: 1.5px; background: transparent; }
.tab-item.active { color: var(--color-coral); }
.tab-item.active::after { background: var(--color-coral); }
.faq-tabpanel { display: none; }
.faq-tabpanel.active { display: block; }
/* Circular +/− icon badge (this page's icon treatment). Additive to the
   existing .faq-icon (img-based, corp-sec) — plain CSS, no asset needed. */
.faq-icon-badge {
  width: 32px; height: 32px; border-radius: 16px; flex-shrink: 0;
  background: var(--color-pale); color: var(--color-indigo-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 18px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.faq-icon-badge::before { content: '+'; }
.faq-question[aria-expanded="true"] .faq-icon-badge { background: var(--color-coral); color: var(--color-white); font-size: 22px; }
.faq-question[aria-expanded="true"] .faq-icon-badge::before { content: '\2212'; }
/* Maroon band + rounded purple card — distinct from the flat single-band
   .mid-page-cta-banner used on the pillar pages, per this design. */
.faq-cta-band { background: var(--color-maroon); padding: 96px var(--container-x); display: flex; justify-content: center; }
.faq-cta-card {
  background: var(--color-purple); border-radius: 24px; padding: 64px 80px;
  max-width: 1200px; width: 100%;
  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.25);
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
}
.faq-cta-card h2 { font-family: var(--font-heading); font-weight: 800; font-size: 36px; color: var(--color-white); }
.faq-cta-card p { font-size: 18px; color: #b5afc4; }
.btn-pill { border-radius: 100px; }

/* ============ ABOUT PAGE (about.njk) ============ */
/* Solid coral pill badge (hero) — distinct from .badge-coral-outline
   (tinted/outlined, used on pricing/faq) since this design's hero badge
   is a solid fill. */
.badge-solid-coral { background: var(--color-coral); color: var(--color-white); padding: 6px 12px; border-radius: 100px; font-family: var(--font-body); font-weight: 700; font-size: 12px; text-transform: uppercase; display: inline-flex; }
/* Plain uppercase eyebrow label (no pill), reused above every section
   heading on this page — distinct from .rd-eyebrow (built for dark CTA
   banners) since this sits on white/lavender section backgrounds. */
.section-eyebrow { display: block; color: var(--color-coral); font-family: var(--font-heading); font-weight: 800; font-size: 16px; text-transform: uppercase; margin-bottom: 16px; }
.section-eyebrow.center { text-align: center; }

.story-section { display: flex; flex-direction: column; }
.story-grid { display: flex; gap: 80px; align-items: center; }
.story-photo { flex: 1; height: 520px; border-radius: 16px; overflow: hidden; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-text { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.story-text p { color: var(--color-gray-text); font-size: 16px; line-height: 1.6; }
.pull-quote { border-left: 4px solid var(--color-coral); padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.pull-quote p { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.4; color: var(--color-purple); }
.pull-quote cite { font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 14px; color: var(--color-coral); }

.values-section { background: var(--color-lavender); display: flex; flex-direction: column; gap: 64px; }
.values-grid { display: flex; gap: 24px; align-items: stretch; }
.value-card { flex: 1; background: var(--color-white); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.value-card .value-num { font-family: var(--font-heading); font-weight: 900; font-size: 48px; color: var(--color-coral); opacity: 0.3; }
.value-card h3 { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--color-purple); }
.value-card p { font-size: 14px; line-height: 1.5; color: var(--color-gray-text); }

.rm-section { display: flex; flex-direction: column; }
.rm-container { display: flex; gap: 80px; align-items: center; }
.rm-info { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.rm-info > p { color: var(--color-gray-text); font-size: 16px; line-height: 1.6; }
.rm-bullets { display: flex; flex-direction: column; gap: 16px; }
.rm-bullet-item { display: flex; gap: 12px; align-items: center; }
.rm-bullet-icon { width: 24px; height: 24px; border-radius: 12px; background: var(--color-lavender); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rm-bullet-icon svg { width: 12px; height: 12px; }
.rm-bullet-item span { color: var(--color-purple); font-weight: 600; font-size: 15px; }
.rm-card { flex: 1; background: var(--color-lavender); border-radius: 20px; padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.rm-avatar { width: 120px; height: 120px; border-radius: 60px; overflow: hidden; }
.rm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rm-role h3 { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-purple); margin-bottom: 8px; }
.rm-role .rm-tag { color: var(--color-coral); font-weight: 700; font-size: 14px; text-transform: uppercase; }
.rm-card hr { width: 100%; border: none; border-top: 1px solid var(--color-border); }
.rm-card p { color: var(--color-gray-text); font-size: 14px; line-height: 1.5; }

.eligibility-section { background: var(--color-lavender); display: flex; flex-direction: column; align-items: center; }
.eligibility-section .legal-copy { align-items: center; }
.callout-note { background: var(--color-white); border-radius: 8px; padding: 16px; display: flex; gap: 16px; align-items: center; text-align: left; }
.callout-note svg { flex-shrink: 0; }
.callout-note p { color: var(--color-purple); font-size: 14px; font-weight: 600; line-height: 1.5; }

/* ============ FOR-FOREIGNERS PAGE (for-foreigners.njk) ============ */
.needs-grid { display: flex; gap: 24px; align-items: stretch; }
.needs-card { flex: 1; background: var(--color-lavender); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.needs-card .icon-circle { width: 44px; height: 44px; border-radius: 22px; background: rgba(255, 90, 54, 0.08); display: flex; align-items: center; justify-content: center; }
.needs-card .icon-circle svg { width: 24px; height: 24px; }
.needs-card h3 { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: #1a1423; }
.needs-card p { font-size: 15px; line-height: 1.6; color: var(--color-gray-text); }

.for-foreigners-compare { display: flex; gap: 32px; align-items: stretch; }
.compare-card { flex: 1; border-radius: 24px; padding: 48px; display: flex; flex-direction: column; gap: 32px; }
.compare-card-light { background: var(--color-lavender); }
.compare-card-dark { background: var(--color-purple); border: 2px solid var(--color-coral); box-shadow: 0 12px 16px rgba(255, 90, 54, 0.1); }
.compare-card h3 { font-family: var(--font-heading); font-weight: 900; font-size: 36px; }
.compare-card-light h3 { color: #1a1423; }
.compare-card-dark h3 { color: var(--color-white); }
.compare-card .compare-tag { font-weight: 600; font-size: 16px; margin-top: 8px; }
.compare-card-light .compare-tag { color: var(--color-gray-text); }
.compare-card-dark .compare-tag { color: var(--color-coral); }
.compare-card-dark .compare-badge { background: var(--color-coral); color: var(--color-white); font-weight: 800; font-size: 11px; text-transform: uppercase; padding: 4px 12px; border-radius: 12px; display: inline-flex; margin-bottom: 8px; align-self: flex-start; }
.compare-card-light .check-badge { background: var(--color-purple); }
.compare-card-light .feature-check-list span { color: #1a1423; }
.compare-card-dark .check-badge { background: var(--color-coral); }
.compare-card-dark .feature-check-list span { color: rgba(255, 255, 255, 0.9); }
.compare-card .btn { width: 100%; }
.compare-card-light .btn-outline { background: var(--color-white); border-color: var(--color-purple); color: var(--color-purple); }
.compare-card-light .btn-outline:hover { background: var(--color-purple); color: var(--color-white); }

/* ============ COMPARE PAGE (compare-corporate-secretary-vs-diy.njk) —
   reuses .compare-card/.compare-card-light plus .needs-card/.icon-circle
   (both from for-foreigners.njk) and .legal-required/.legal-copy (from
   about/for-foreigners) almost entirely as-is. Only genuinely new here:
   a white+coral-outline "recommended" card variant (this design's INC.sg
   card is white with a coral border, not the dark-purple treatment
   .compare-card-dark already covers) and the cost-comparison row. ============ */
.compare-card-outline { position: relative; background: var(--color-white); border: 2.5px solid var(--color-coral); }
.compare-card-outline h3, .compare-card-outline .compare-tag { color: var(--color-purple); }
.compare-card-outline .compare-tag { font-weight: 500; }
.compare-card-outline .check-badge { background: var(--color-coral); }
.compare-card-outline .feature-check-list span { color: #1a1423; }
.compare-badge-floating { position: absolute; top: -16px; right: 24px; background: var(--color-coral); color: var(--color-white); font-weight: 800; font-size: 11px; text-transform: uppercase; padding: 6px 16px; border-radius: 100px; }

.cost-section { background: var(--color-pale); display: flex; flex-direction: column; gap: 40px; }
.cost-row { display: flex; gap: 48px; align-items: center; }
.cost-narrative { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.cost-narrative p { font-size: 16px; line-height: 1.6; color: var(--color-indigo-text); }
.cost-narrative p.highlight { color: var(--color-coral); font-weight: 600; }
.cost-callout { width: 440px; flex-shrink: 0; background: var(--color-purple); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.cost-callout .cost-label { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-coral); }
.cost-callout .cost-figure { font-family: var(--font-heading); font-weight: 900; font-size: 32px; color: var(--color-white); }
.cost-callout .cost-desc { font-size: 14px; color: var(--color-dark-text-muted); }
.cost-callout hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.cost-callout .cost-fineprint { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--color-white); }
.cost-callout .cost-fineprint svg { flex-shrink: 0; }

/* ============ LEGAL PROSE (privacy-policy.njk) — long-form document
   layout, distinct from .legal-copy above (that one's centered/narrow,
   built for short marketing-style copy blocks, not a multi-heading
   document). Reuses .faq-header/.faq-hero-heading/.badge-coral-outline
   for the page title, same as every other rebuilt page's header. ============ */
.legal-prose { max-width: 760px; margin: 0 auto; padding: 0 var(--container-x) 96px; display: flex; flex-direction: column; gap: 20px; }
.legal-prose h3 { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: var(--color-purple); margin-top: 16px; }
.legal-prose p { font-size: 15px; line-height: 1.7; color: var(--color-gray-text); }
.legal-prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-prose li { font-size: 15px; line-height: 1.7; color: var(--color-gray-text); }

/* ============ GUIDE ARTICLE (guides/guide.njk) — reuses .faq-header/
   .badge-coral-outline for the top of the page and .legal-prose above for
   the article body (both already built for exactly this: a light header
   + long-form content). Only genuinely new here: the byline/date row and
   the featured-image treatment. ============ */
.guide-header-title { font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: 1.2; color: var(--color-purple); max-width: 900px; }
.guide-meta { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--color-gray-text); }
.guide-meta .dot { opacity: 0.5; }
/* Featured image and body edges match the navbar's edges exactly — same
   box model as .navbar itself (padding: 0 var(--container-x), no max-width
   cap — see incsingapore.css's .navbar comment), not the narrower
   fixed-760px-then-centered column .legal-prose uses elsewhere
   (privacy-policy.njk, fine staying narrow for pure legal text). A
   max-width cap here would drift apart from the navbar's own full-bleed
   width above ~1440px viewports; matching its box model instead keeps
   both edges aligned at every screen width. */
.guide-featured-image { padding: 0 var(--container-x) 48px; }
.guide-featured-image img { width: 100%; height: 440px; object-fit: cover; border-radius: 16px; }
.legal-prose img { width: 100%; border-radius: 12px; margin: 8px 0; }
.legal-prose a { color: var(--color-coral); text-decoration: underline; }
.legal-prose h2 { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: var(--color-purple); margin-top: 8px; scroll-margin-top: 110px; }
.legal-prose ul, .legal-prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal-prose li { font-size: 15px; line-height: 1.7; color: var(--color-gray-text); }

/* ============ GUIDE BODY + TABLE OF CONTENTS LAYOUT ============ */
.guide-body-layout { display: grid; grid-template-columns: 260px 1fr; gap: 64px; padding: 0 var(--container-x) 96px; align-items: start; }
/* grid-column is explicit, not left to auto-placement — when a guide has
   no H2s (so guide.njk doesn't render the .guide-toc nav at all), the
   article is the grid's only child and would otherwise auto-place into
   the first (260px TOC) column instead of the content column, squashing
   it. This keeps the article in column 2 whether or not the TOC exists. */
.guide-body-layout .legal-prose { grid-column: 2; max-width: none; margin: 0; padding: 0; }
/* .no-toc (guide.njk adds this when guide.toc is empty) — the rule above
   correctly places the article in column 2, but the 260px+64px TOC track
   is still reserved and sits empty to its left. This collapses the grid
   to one full-width column instead, so a heading-less guide actually
   reclaims that space rather than leaving a blank gap. */
.guide-body-layout.no-toc { grid-template-columns: 1fr; gap: 0; }
.guide-body-layout.no-toc .legal-prose { grid-column: 1; }
.guide-toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 2px; }
.guide-toc-label { font-family: var(--font-heading); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-purple); margin-bottom: 12px; }
.guide-toc a { font-size: 14px; line-height: 1.4; color: var(--color-gray-text); padding: 8px 0 8px 14px; border-left: 2px solid var(--color-border); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
.guide-toc a:hover { color: var(--color-coral); }
.guide-toc a.active { color: var(--color-coral); border-left-color: var(--color-coral); font-weight: 700; }

/* Guide card (guide-card.njk macro) — used on both the guides hub grid and
   the related-guides section on an individual guide page, so the two
   never drift apart. */
.guide-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.guide-card:hover { box-shadow: 0 12px 20px rgba(29, 22, 29, 0.08); transform: translateY(-2px); }
.guide-card-image { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.guide-card-image img { width: 100%; height: 100%; object-fit: cover; }
.guide-card-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.guide-card-body h3 { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.3; color: var(--color-coral); }
.guide-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--color-gray-text); padding-top: 16px; border-top: 1px solid var(--color-border); }
.guide-card-meta .guide-card-updated { color: var(--color-coral); }
.guide-card-body p { font-size: 15px; line-height: 1.6; color: var(--color-gray-text); }

.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }

/* ============ BADGE VARIANTS (corporate-secretary page) ============ */
.badge-filled { background: var(--color-badge-bg); color: var(--color-purple); text-transform: uppercase; letter-spacing: 0.02em; }
.badge-outline { background: transparent; border: 1px solid var(--color-purple); color: var(--color-purple); text-transform: uppercase; letter-spacing: 0.02em; }
/* Pill eyebrow badge (pricing page hero + related-guides header) — tinted
   coral fill, coral border, coral text, fully rounded. Distinct from
   .badge-filled/.badge-outline above (both purple-toned, square-ish
   radius) since this is a different visual family from the Figma design. */
.badge-coral-outline {
  display: inline-flex;
  background: rgba(255, 90, 54, 0.1);
  border: 1.5px solid var(--color-coral);
  color: var(--color-coral);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
}

/* ============ STAT DIVIDER (corporate-secretary page) ============ */
.stat-divider { width: 1px; height: 48px; background: var(--color-border); }

/* ============ WHAT A CORPORATE SECRETARY DOES — image/content split ============ */
.what-they-do { display: flex; gap: 80px; align-items: center; }
.what-they-do-image { width: 480px; height: 480px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; }
.what-they-do-image img { width: 100%; height: 100%; object-fit: cover; }
.what-they-do-content { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.what-they-do-content > p { color: var(--color-gray-text); font-size: 16px; line-height: 24px; }
.duty-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.duty-card { background: var(--color-lavender); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.duty-card h4 { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--color-purple); }
.duty-card p { font-size: 14px; line-height: 20px; color: var(--color-indigo-text); }

/* ============ WHO'S ELIGIBLE — reuses .legal-cards/.card, adds an
   icon+heading row inside the card ============ */
.eligible { display: flex; flex-direction: column; gap: 56px; }
.card-icon-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-icon-heading img { width: 24px; height: 24px; }
.card-icon-heading h3 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--color-indigo-text); margin: 0; }

/* ============ GETTING STARTED — reuses .rd-steps-grid/.step-node/
   .step-badge, overridden here for a left-aligned row with a connecting
   line instead of the incorporation page's centered layout ============ */
.getting-started .rd-steps-grid { display: flex; flex-direction: row; gap: 48px; }
.getting-started .step-node { flex: 1; align-items: flex-start; text-align: left; gap: 24px; }
.step-head { display: flex; align-items: center; gap: 16px; width: 100%; }
.step-line { flex: 1; height: 2px; background: var(--color-border); }

/* ============ CAN YOU BE YOUR OWN SECRETARY — comparison pair ============ */
.own-secretary { display: flex; flex-direction: column; gap: 56px; }
.comparison-grid { display: flex; align-items: center; gap: 32px; }
.comparison-card { flex: 1; background: var(--color-lavender); border-radius: var(--radius-md); padding: 40px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.comparison-card h3 { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: var(--color-purple); margin: 0; }
.comparison-card p { font-size: 16px; line-height: 24px; color: var(--color-indigo-text); }
.or-separator {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1.5px solid var(--color-border); background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--color-purple);
  flex-shrink: 0;
}

/* ============ COMPLIANCE CALENDAR — white bordered cards (distinct from
   the lavender .card treatment used elsewhere on this page) ============ */
.calendar { display: flex; flex-direction: column; gap: 56px; }
.calendar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.calendar-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.calendar-card p { font-weight: 600; font-size: 15px; line-height: 22px; color: var(--color-indigo-text); }

/* ============ CHECK LIST — .bullet-list + a real checkmark icon, used
   only where the page explicitly wants one (pricing cards here); the
   incorporation page's plain .bullet-list is untouched */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; }
.check-list li img { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.check-list li span { font-size: 15px; line-height: 22px; color: var(--color-indigo-text); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
  :root { --container-x: 48px; }
  .hero-content, .who-split, .documents-grid, .compliance-process-section,
  .structures-grid > div, .why-grid, .pricing-cards-container,
  .what-they-do, .comparison-grid, .getting-started .rd-steps-grid,
  .two-panel-highlight, .on-track, .pricing-detail-cards, .guides-cards-row,
  .story-grid, .values-grid, .rm-container, .needs-grid, .for-foreigners-compare,
  .cost-row, .legal-cards {
    flex-direction: column;
  }

  /* Stacked-column flex children default to fit-content cross-axis width
     (align-items:flex-start upstream), so a child whose min-content width
     (heading/paragraph text) exceeds the column's available width — e.g.
     .name-check-column inside .documents-grid at narrow phone widths —
     renders wider than its own parent and causes horizontal overflow.
     Stretching forces children to the column's actual width instead. */
  .documents-grid {
    align-items: stretch;
  }
  .story-photo { height: auto; aspect-ratio: 1; }
  .cost-callout { width: 100%; }
  .guides-grid { grid-template-columns: 1fr; }
  .guide-body-layout { grid-template-columns: 1fr; }
  .guide-body-layout .legal-prose { grid-column: 1; }
  .guide-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; border-bottom: 1px solid var(--color-border); padding-bottom: 24px; margin-bottom: 8px; }
  .guide-toc a { border-left: none; padding: 4px 0; }
  .guide-toc a.active { border-left: none; text-decoration: underline; }
  .hero-right, .who-left-image, .right-photo, .what-they-do-image { width: 100%; height: auto; aspect-ratio: 1; }
  .how-it-works-section .rd-steps-grid { grid-template-columns: 1fr; }
  .duty-grid, .calendar-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .faq-section { padding-left: 48px; padding-right: 48px; }
  .faq-hero-heading { font-size: 40px; }
  .tab-nav { gap: 24px; overflow-x: auto; }
  .tab-item { font-size: 14px; white-space: nowrap; }
  .faq-cta-card { padding: 48px 32px; }
  .faq-cta-card h2 { font-size: 28px; }
  .highlight-photo-card, .highlight-dark-card { height: 400px; margin-top: 0; }
  .photo-cluster { width: 100%; max-width: 340px; height: 280px; }
  .glow, .floating-photo { display: none; }
}

/* ============ TRUE MOBILE (phone, not tablet) — 767px matches the
   project's existing phone threshold (see base.njk's .sticky-cta-bar).
   Everything above this point in the file only distinguishes "desktop"
   from "tablet-and-below" in one breakpoint; this is deliberately
   phone-only overrides on top of that, starting with hiding the guide
   TOC — per client request, it's unnecessary space on a phone screen
   (unlike tablet width, where the wrapped horizontal chip row from the
   1200px block above still earns its space). ============ */
@media (max-width: 767px) {
  .guide-toc { display: none; }

  /* Large headings/numbers sized for a 1200px+ desktop hero never got a
     phone-specific reduction — only .faq-hero-heading and .faq-cta-card
     h2 did, at the 1200px tablet breakpoint above, which still isn't
     small enough for a real phone. Confirmed by an actual mobile
     screenshot: a hero headline like "Get your new business up — fast &
     painlessly" was wrapping to nearly one word per line at 56px. These
     are every other >=40px heading/number class in the file, scaled down
     proportionally rather than left untouched. */
  .hero-heading { font-size: 34px; line-height: 1.25; }
  .faq-hero-heading { font-size: 34px; }
  .section-title { font-size: 26px; }
  .guide-header-title { font-size: 26px; }
  .mid-page-cta-banner h2 { font-size: 28px; }
  .highlight-headline { font-size: 28px; }
  .stat-num { font-size: 30px; }
  .price { font-size: 32px; }
  .price-amount { font-size: 48px; }
  .value-card .value-num { font-size: 36px; }

  /* .cluster-photo-1/2/3 use absolute left/width values sized for the
     700px desktop .photo-cluster (defined near the top of this file).
     The 1200px tablet block above shrinks the container to 340px but
     never rescales the children, so cluster-photo-3's `left:400px`
     pushed it 148px past a 340px container — confirmed via real-device
     testing as the actual cause of site-wide horizontal scroll on the
     homepage hero (this, not the .image-height-520 SVG rule in
     incsingapore.css, was the true culprit). Scaled proportionally
     (~0.37x, matching the 260px container below) so cluster-photo-3
     stays inside its container. */
  .photo-cluster { max-width: 260px; height: 190px; }
  .cluster-photo-1 { left: 0; top: 33px; width: 104px; height: 104px; }
  .cluster-photo-2 { left: 74px; top: 0; width: 97px; height: 97px; }
  .cluster-photo-3 { left: 148px; top: 56px; width: 82px; height: 82px; }
}