/* ============================================================
   SELF-HOSTED FONTS — DM Sans + Fraunces, latin subset, WOFF2 variable.
   Replaces the previous fonts.googleapis.com / fonts.gstatic.com fetch.
   font-display: swap to keep the LCP path unblocked.
   ============================================================ */
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Thai faces, self-hosted like the Latin ones. Each file is the Thai
   subset only and declares its unicode-range, so a browser fetches it on
   a Thai page and uses it for Thai codepoints alone: Latin letters, digits
   and the $ sign still come from DM Sans and Fraunces, and the two scripts
   share a line without a second Latin design creeping in. Sarabun for
   text, the most legible Thai sans at phone sizes; Trirong for display,
   a Thai serif drawn with a Latin serif companion, so it sits next to
   Fraunces rather than against it. */
@font-face { font-family: 'Sarabun'; src: url('/assets/fonts/sarabun-thai-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Sarabun'; src: url('/assets/fonts/sarabun-thai-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Sarabun'; src: url('/assets/fonts/sarabun-thai-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Trirong'; src: url('/assets/fonts/trirong-thai-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Trirong'; src: url('/assets/fonts/trirong-thai-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

/* Thai pages only. The Thai faces go first in each stack; their
   unicode-range hands everything non-Thai straight back to the Latin
   faces. Two corrections the script needs: the negative tracking the
   display type uses collides Thai tone marks with the next glyph, and
   the tight heading leading (1.02) clips marks stacked above a vowel.
   Body sizes are left alone: Sarabun's tall x-height already reads at
   the same size as DM Sans. */
html[lang="th"] {
  --font-display: 'Trirong', 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Sarabun', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3,
html[lang="th"] .price-card .amount, html[lang="th"] .svc-price .amount { letter-spacing: 0; }
html[lang="th"] h1, html[lang="th"] h2 { line-height: 1.22; }

/* ============================================================
   REVEAL ON SCROLL — scoped under .anim-ready so a no-JS or
   no-IntersectionObserver fallback leaves every element fully visible.
   GPU-only properties (opacity / transform / filter) — no reflow.
   --d on an element overrides the transition-delay for staggering.
   ============================================================ */
.anim-ready .reveal-left { opacity: 0; transform: translateX(-110px); }
.anim-ready .reveal-up   { opacity: 0; transform: translateY(40px); }
.anim-ready .reveal-pop  { opacity: 0; transform: translateX(-120px) scale(0.6); filter: blur(2px); }
.anim-ready .reveal-left.in,
.anim-ready .reveal-up.in   { opacity: 1; transform: none; transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.anim-ready .reveal-pop.in  { opacity: 1; transform: none; filter: blur(0); transition: opacity 520ms var(--ease), transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 520ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .anim-ready .reveal-left,
  .anim-ready .reveal-up,
  .anim-ready .reveal-pop { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============================================================
   ANNOUNCEMENT BAR + STICKY TOPBAR
   Site-wide (was home-only). Every page now wraps .announce-bar and
   .site-header together in .tgm-topbar, matching home's own original
   markup exactly (reused here, not reimplemented) — a first attempt at
   the site-wide rollout left this wrapper off the other 21 pages, so the
   bar scrolled away there while home's stayed pinned. Fixed by adding
   the same wrapper everywhere.

   .tgm-topbar is what's sticky (top:0), not .announce-bar or
   .site-header individually: the bar and header sit in normal flow
   inside it, so the whole two-row block moves as one unit and locks to
   the very top of the viewport together once scrolled past its natural
   position. .site-header's own position:sticky (below, unconditional,
   needed on every page as a header in its own right) never has a chance
   to compete for the same top:0 offset: once its sticky ancestor
   (.tgm-topbar) is itself pinned, the header has nowhere further to
   "stick" independently — it just occupies its normal-flow slot directly
   under the bar, inside the topbar's fixed position. No overlap, no
   fight over the offset, confirmed by measuring the actual rendered
   stack (see the CSS comment above .tgm-topbar below).

   What stays page-local, in index.html's own <style>: the
   transparent-over-hero fade and the scroll-driven .tgm-stuck class that
   drives it. Only home's header sits over a dark hero and needs to fade
   from transparent to solid on scroll; every other page's .site-header
   is already solid by default, so it has nothing to fade from. */
.tgm-topbar { position: sticky; top: 0; z-index: 200; }

.announce-bar {
  position: relative; z-index: 1;
  background: var(--green-deep) repeating-linear-gradient(-55deg, rgba(232,112,31,.13) 0 10px, transparent 10px 26px);
  color: var(--offwhite);
  text-align: center; padding: 7px 16px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
}
.announce-bar .ab-price { color: var(--orange-on-dark); font-weight: 800; font-size: 14px; text-decoration: none; }
/* Anchors only: on the home .ab-price is a plain <span> ("Limited-time
   pricing"), so a hover underline promised a link that is not there. On the
   article bars it really is an <a> and keeps its underline. */
.announce-bar a.ab-price:hover { text-decoration: underline; }
/* A second link in the same line, so kept deliberately quieter than
   .ab-price: inherits the surrounding offwhite text color rather than
   introducing a second colored highlight, underlined only to signal it's
   clickable. Two loud links in one short line would compete; one loud,
   one quiet reads as a single sentence with one emphasis point. */
.announce-bar .ab-tiers { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.announce-bar .ab-tiers:hover { opacity: 0.8; }
.announce-bar .ab-local { font-weight: 600; opacity: 0.92; }
.announce-bar strong { color: var(--offwhite); font-weight: 700; }
.ab-short { display: none; }
@media (max-width: 760px) {
  .ab-full { display: none; }
  .ab-short { display: inline; }
  .announce-bar { font-size: 11.5px; padding: 6px 12px; }
  .announce-bar .ab-price { font-size: 12px; }
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0;
  background: var(--cream-warm);
  /* The whole bar takes its ink from these two tokens. Only the home page
     changes them, and only while its header is still transparent over the
     hero; every other page uses the values below from the first paint. One
     mechanism, so the bars cannot drift apart the way they did when each
     page carried its own header colours. */
  --hdr-fg: var(--green-deep);
  --hdr-border: rgba(9, 56, 34, 0.25);
  padding-top: 5px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 100;
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  height: 68px;
}
/* Read the tokens, don't restate the colours. Hover and current-page rules
   live further down and win on source order, so they still override these. */
.site-header .header-brand { color: var(--hdr-fg); }
.site-header .site-nav a { color: var(--hdr-fg); }
.site-header .nav-toggle { color: var(--hdr-fg); border-color: var(--hdr-border); }
.site-header .lang-switch { color: var(--hdr-fg); }
/* The hairline after the first item. It reads the same token as the links it
   sits between, so it follows the bar from the home's dark hero to the cream
   header every other page starts with.
   flex: 0 0 auto because a 1px flex item with the default shrink factor is
   the first thing a tight bar collapses to nothing. 0.4, not the 0.22 this
   started at: that was set against the home's dark hero, where a cream line
   carries; the same value on the cream header came out at about 1.5:1 and
   read as no line at all. */
.site-nav .nav-sep {
  align-self: center; flex: 0 0 auto; width: 1px; height: 17px;
  background: var(--hdr-fg); opacity: 0.4;
}
.site-nav { display: flex; gap: 28px; }
.site-nav a {
  font-size: 15.5px; color: var(--green-deep);
  text-decoration: none; font-weight: 700;
  transition: color 200ms var(--ease);
}
.site-nav a:hover { color: var(--orange-text); }
/* Current-page indicator, set per page in the markup (static site, no
   templating to compute it from the URL). Colour alone: the underline that
   used to sit under it competed with the hairline a few items away for the
   reader's attention, and the orange already says which page this is. */
.site-nav a.is-active { color: var(--orange-text); }
/* flex + gap: was a block with a single child, now holds two buttons
   side by side with deliberate spacing rather than incidental inline
   whitespace. */
.header-cta { display: flex; align-items: center; gap: 10px; }
/* Language switch. The one control on the site whose target changes on
   every page: it points at this page's twin, not at the other home, so a
   reader on the commission article lands on the commission article. Quiet
   by design, a globe and the language's own name in its own script: it is
   a way out for the reader who needs it, not a third call to action beside
   the two buttons. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--gray-warm); text-decoration: none;
  padding: 6px 4px; white-space: nowrap;
  transition: color 160ms var(--ease);
}
.lang-switch:hover { color: var(--orange-text); }
.lang-ico { width: 15px; height: 15px; flex: 0 0 auto; opacity: 0.85; }
/* Below the drawer breakpoint the header buttons go into the drawer but
   the switch stays in the bar as a globe plus the language's own name
   (kept short by design: "ไทย", "English"), left of the Menu trigger, so
   a reader lands on the site and immediately sees the other language is
   one tap away. The full sentence lives in the drawer row underneath. */
@media (max-width: 900px) {
  .header-cta .lang-switch { font-size: 12px; gap: 5px; padding: 7px 6px; }
  .header-cta .lang-ico { width: 17px; height: 17px; }
}
/* In the drawer it is a row like any other, sitting under the brand and
   above the section links, and it borrows the globe from the .di-* icon
   set rather than shipping a second one. */
.lang-switch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 2px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  color: var(--gray-warm); text-decoration: none;
}
.lang-switch-row::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background-color: currentColor; opacity: 0.78;
  -webkit-mask-image: var(--di-icon, none); mask-image: var(--di-icon, none);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.lang-switch-row:hover { color: var(--orange-text); }
/* Padding/font-size stepped down (20px/14px -> 16px/13px) now that each
   button also carries an icon, so the pair does not grow heavier than
   the single-button header did. */
.header-cta .btn { padding: 9px 16px; font-size: 13px; white-space: nowrap; }
/* Unscoped (not .header-cta .btn-ico): the same icon markup is reused
   inside .drawer-cta, which is display:block rather than flex, so this
   has to size and space the icon on its own rather than leaning on a
   flex gap that would not apply there. margin-right does that job in
   both contexts. */
.btn-ico { width: 15px; height: 15px; flex: 0 0 auto; display: inline-block; vertical-align: -2px; margin-right: 7px; }

/* "More" nav dropdown: home only (no markup elsewhere matches these
   classes), listing the pages the home nav's anchor links leave out.
   The trigger is a plain <a>, the same element type as FAQ, with no
   padding/border/flex of its own, so .nav-more (a plain block box, no
   flex) lets it sit in normal flow exactly where FAQ's text sits, by
   construction, and picks up FAQ's font-size/weight/color for free
   from .site-nav a and .site-header .site-nav a below, since those are
   plain descendant selectors unaffected by the wrapper div. No pill:
   it reads as a normal nav link with a chevron after it, so .nav-more
   needs no margin of its own either, the same 28px flex gap as every
   other pair of links is correct as-is. */
.nav-more { position: relative; }
.nav-more-toggle { position: relative; cursor: pointer; }
.nav-more-chevron { width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; transition: transform 200ms var(--ease); }
.nav-more-toggle[aria-expanded="true"] .nav-more-chevron { transform: rotate(180deg); }
.nav-more-panel {
  display: flex; flex-direction: column; gap: 2px;
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px;
  background: var(--cream-light); border: 1px solid var(--line); border-radius: var(--radius-card);
  /* Same shadow color and strength as .drawer's raised panel (rgba matches
     --green-darker), so the two "more pages" surfaces read as one family. */
  box-shadow: 0 14px 34px rgba(6, 37, 24, 0.22); padding: 8px; z-index: 10;
}
.nav-more-panel[hidden] { display: none; }
/* #site-nav outranks the header's .site-header .site-nav a crossfade rule
   (two classes) on specificity, so the panel's own dark-on-cream color
   actually wins instead of inheriting the header's light-on-hero text
   color. That inherited color is the bug this fixes: the links were
   cream text on the cream panel, invisible. */
#site-nav .nav-more-panel a {
  display: block; padding: 9px 12px; border-radius: var(--radius-card);
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600; color: var(--green-deep);
  text-decoration: none; transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
#site-nav .nav-more-panel a:hover, #site-nav .nav-more-panel a:focus-visible { background: var(--cream-warm); color: var(--orange-text); }
/* The mega rows get their own hover: a softer tint than the plain dropdown's
   and a hairline nudge to the right, which is what makes a long list feel
   responsive rather than merely highlighted. */
#site-nav .nav-more-panel.is-mega a {
  border-radius: var(--radius-card);
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
}
#site-nav .nav-more-panel.is-mega a:hover,
#site-nav .nav-more-panel.is-mega a:focus-visible {
  background: rgba(232, 112, 31, 0.07); transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  #site-nav .nav-more-panel.is-mega a { transition: none; }
  #site-nav .nav-more-panel.is-mega a:hover { transform: none; }
}

/* ---- Mega menu variant of the More panel (home only) ----------------
   Three columns: the books, the services, and the other pages. Below 760px
   .site-nav is hidden entirely, so none of this ever has to work on a
   phone: the drawer covers that. */
.mega-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The panel hangs off the header, not off the "More" link, so its top edge
   meets the bottom of the bar instead of floating a few pixels under a nav
   item that is only as tall as its own text. .site-header is sticky, which
   makes it the containing block, so top:100% lands exactly on its lower
   border and the right offset can follow .container's own gutter. */
.nav-more:has(.nav-more-panel.is-mega) { position: static; }
.nav-more-panel.is-mega {
  display: grid; grid-template-columns: 1fr 1.08fr 1.15fr 0.74fr; gap: 0 26px;
  width: min(1080px, calc(100% - var(--container-pad) * 2));
  top: 100%;
  right: max(var(--container-pad), calc((100% - var(--container)) / 2 + var(--container-pad)));
  padding: 26px 30px 22px;
  text-align: left;
  /* Same ground as the bar it hangs from, so the two read as one surface
     dropping down rather than a card floating under a strip. The card
     border goes with it: an outline would redraw the seam the shared
     background is there to remove. Depth comes from the shadow alone. */
  background: var(--cream-warm);
  border: 0; border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: 0 22px 50px rgba(6, 37, 24, 0.14), 0 2px 8px rgba(6, 37, 24, 0.06);
}
/* The rupture between bar and panel. It sits on top of the header's own
   border-bottom, over the panel's width only, so the seam is replaced
   rather than doubled: opaque at the centre, fading out at both ends. */
.nav-more-panel.is-mega::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(
    90deg,
    rgba(14, 75, 44, 0) 0%,
    rgba(14, 75, 44, 0.10) 14%,
    rgba(14, 75, 44, 0.28) 50%,
    rgba(14, 75, 44, 0.10) 86%,
    rgba(14, 75, 44, 0) 100%
  );
}
/* .nav-more-panel[hidden] is one class plus one attribute, the same weight
   as .nav-more-panel.is-mega, and it is declared earlier, so the grid above
   was winning and the menu shipped open. This puts hidden back in charge. */
.nav-more-panel.is-mega[hidden] { display: none; }
/* The panel goes from display:none to display:grid, so a transition has
   nothing to interpolate. A keyframe animation does run on the frame the
   element starts being displayed, which is what makes the open feel less
   abrupt without touching the toggle script. Closing stays instant. */
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}
.nav-more-panel.is-mega:not([hidden]) { animation: mega-in 180ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .nav-more-panel.is-mega:not([hidden]) { animation: none; }
}
.mega-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
/* The group labels were 10px of pale grey and disappeared next to the rows
   they were meant to introduce. Now the site's own eyebrow language, orange
   and bold, with a rule under them so each column reads as a block. */
.mega-title {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange-text);
  padding: 0 10px 10px; margin: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
#site-nav .nav-more-panel.is-mega a {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 8px 10px; font-size: 14.5px; line-height: 1.35;
}
.mega-ico {
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--orange); opacity: 0.85;
  transition: color 150ms var(--ease), opacity 150ms var(--ease);
}
#site-nav .nav-more-panel.is-mega a:hover .mega-ico { color: var(--orange-text); opacity: 1; }

/* THE ONE MARK THAT SAYS "PLUS"
   A base offer and its Plus are one family, so the Plus keeps the base
   product's glyph and carries a small plus in the top-left corner, which
   both glyphs leave empty: the magnifier's lens sits centre-right of its
   box and its handle runs to the bottom-right, which is where a badge
   first went and where it made the lens unreadable.
   Small and quiet on purpose. Reversing the whole glyph out of a filled
   disc read it apart at a glance and shouted next to every other row.
   One modifier class, the same mark on every Plus, painted on the icon's
   own box so no row's markup changes but a class. */
.mega-ico.is-plus {
  overflow: visible;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 1.4v7.2M1.4 5h7.2' stroke='%23E8701F' stroke-width='2.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left -3px top -3px;
  background-size: 8px 8px;
}
.mega-txt { display: flex; flex-direction: column; min-width: 0; }
/* 600, not the browser's 700: seven bold rows in a column read as shouting.
   The sub-line drops to 400 so the name carries the weight on its own. */
.mega-txt strong { font-weight: 600; letter-spacing: -0.004em; }
.mega-txt > span {
  font-size: 11.5px; font-weight: 400; color: var(--gray-warm);
  margin-top: 3px; opacity: 0.9;
}

/* ---- Three levels of emphasis inside the panel ---------------------
   The trigger says Products, so the two priced columns lead: full-strength
   orange icons and the largest rows. The nine articles sit a step below,
   no icons and small light rows, because nine titles at menu weight would
   outweigh everything above them. The site pages close the panel on the
   right, quieter still, behind a hairline. */
.mega-col-buy .mega-ico { opacity: 1; }

.mega-col-res .mega-ico { display: none; }
#site-nav .nav-more-panel.is-mega .mega-col-res a {
  font-size: 12.5px; padding: 5px 10px; gap: 0; line-height: 1.3;
}
.mega-col-res .mega-txt strong { font-weight: 500; color: var(--gray-warm); }
#site-nav .nav-more-panel.is-mega .mega-col-res a:hover .mega-txt strong { color: var(--orange-text); }

.mega-col-pages {
  border-left: 1px solid var(--line);
  padding-left: 26px; margin-left: -4px; align-self: stretch;
}
#site-nav .nav-more-panel.is-mega .mega-col-pages a { font-size: 14px; padding: 8px 10px; }
.mega-col-pages .mega-ico { width: 16px; height: 16px; color: var(--green-deep); opacity: 0.45; }
#site-nav .nav-more-panel.is-mega .mega-col-pages a:hover .mega-ico { color: var(--orange-text); opacity: 1; }

/* A second group inside a column: the rule above it is what separates the
   two, so it needs top margin the first title does not. */
.mega-title-sub { margin-top: 20px; }

/* Platform strip across the foot of the panel. Not links, just the three
   surfaces we work on, in the same pill the services cards use, sitting on
   a hairline so the panel closes on a base rather than trailing off. */
.mega-foot {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 22px; padding: 16px 10px 2px;
  border-top: 1px solid var(--line);
}
.mega-foot-label {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-warm);
}
.mega-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.mega-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 5px 12px 5px 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  color: var(--green-deep);
}
.mega-pill .d { width: 8px; height: 8px; border-radius: 50%; }

.header-brand {
  display: inline-flex; align-items: baseline;
  text-decoration: none; white-space: nowrap;
  color: var(--green); font-family: var(--font-display);
  font-weight: 900; letter-spacing: -0.02em; line-height: 1;
}
.header-brand-tgm  { font-size: 38px; }
.header-brand-full { font-size: 22px; letter-spacing: -0.015em; display: none; }
@media (min-width: 1180px) {
  .header-brand-tgm  { display: inline; font-size: 42px; }
  .header-brand-full { display: none; }
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--green-deep);
  border-radius: var(--radius-card);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--green-deep); cursor: pointer;
}
.nav-toggle:hover { background: var(--green-deep); color: var(--cream-light); }

/* ============================================================
   EYEBROW MARKER
   ============================================================ */
.eyebrow-marker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--orange-text);
  position: relative; padding-left: 22px;
}
.eyebrow-marker::before {
  content: ''; position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 14px; height: 2px; background: var(--orange);
}
.eyebrow-marker.eyebrow-on-dark { color: #E78A52; }
.eyebrow-marker.eyebrow-on-dark::before { background: #E78A52; }

/* ============================================================
   HERO
   ============================================================ */
.hero-seo { padding: 72px 0 88px; background: var(--cream); }
.hero-seo .hero-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-text-stack { display: flex; flex-direction: column; }
.hero-text-top { margin-bottom: 28px; }

.hero-seo h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 64px; line-height: 1.0;
  color: var(--green-deep); letter-spacing: -0.022em;
  margin: 0 0 14px;
}
.hero-seo .hero-subhead {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; line-height: 1.15;
  color: var(--green); letter-spacing: -0.012em;
  margin: 0;
}
.hero-seo .hero-tagline {
  font-family: var(--font-display); font-weight: 900;
  font-size: 30px; line-height: 1.1;
  color: var(--green-deep); letter-spacing: -0.015em;
  margin: 0 0 22px;
}
.hero-seo .hero-tagline em { font-style: italic; color: var(--orange); }
.hero-seo .hero-lede {
  font-size: 17px; line-height: 1.55;
  color: var(--gray-warm); margin: 0 0 24px; max-width: 520px;
}
.hero-seo .hero-ctas { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }

.hero-seo .hero-trust {
  display: flex; gap: 14px;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-warm); font-weight: 600;
  flex-wrap: wrap; list-style: none; padding: 0;
  margin: 0 0 24px; align-items: center;
}
.hero-seo .hero-trust span { display: inline-flex; align-items: center; }
.hero-seo .hero-trust span::before {
  content: '· '; color: var(--orange-text); margin-right: 6px;
}
.hero-seo .hero-trust span:first-child::before { display: none; }
.hero-seo .hero-trust .trust-instant strong {
  font-family: var(--font-body); font-weight: 700;
  color: var(--orange-text); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(196, 95, 31, 0.1);
  padding: 6px 12px; border-radius: var(--radius-card);
  border: 1px solid rgba(196, 95, 31, 0.3);
}

.hero-seo .hero-platforms {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; padding-top: 22px;
  border-top: 1px solid var(--line); margin: 0;
}
.hero-seo .hero-platforms-label {
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gray-warm);
  font-weight: 700; flex-shrink: 0;
}
.hero-seo .hero-platforms-note {
  display: block;
  width: 100%;
  font-size: 11px;
  color: var(--gray-soft);
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin-top: 4px;
}
.platform-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.platform-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px 7px 12px;
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-size: 12px; font-weight: 700;
  color: var(--green-deep); letter-spacing: 0.02em;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 200ms var(--ease);
}
.platform-pill:hover {
  background: var(--cream-warm);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.platform-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--platform-color, var(--orange));
  flex-shrink: 0;
}
.platform-name { white-space: nowrap; }

.hero-seo .hero-visual {
  display: flex; justify-content: center; align-items: center;
}

/* ============================================================
   BOOK — REAL 3D (perspective + rotateY)
   ============================================================ */
.book-stage {
  perspective: 2200px;
  perspective-origin: 50% 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  animation: book-float 5s ease-in-out infinite;
}
/* Gentle floating motion (up and down) */
@keyframes book-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) {
  .book-stage { animation: none; }
}

.book {
  position: relative;
  width: 350px;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(4deg);
  transition: transform 500ms var(--ease);
  /* Soft green-tinted projected shadow on the ground */
  filter: drop-shadow(0 28px 36px rgba(9, 56, 34, 0.32));
}
.book:hover {
  transform: rotateY(-14deg) rotateX(2deg);
}

/* Page block — visible as a thin slab behind the cover (right side) */
.book::before {
  content: '';
  position: absolute;
  top: 4px; right: -8px; bottom: 4px;
  width: 12px;
  background: linear-gradient(
    to right,
    var(--cream-warm) 0%,
    var(--cream-light) 35%,
    var(--cream-warm) 70%,
    var(--cream-light) 100%
  );
  background-image:
    linear-gradient(to right, var(--cream-warm), var(--cream-light)),
    repeating-linear-gradient(
      to bottom,
      rgba(11, 53, 33, 0.12) 0,
      rgba(11, 53, 33, 0.12) 1px,
      transparent 1px,
      transparent 3px
    );
  background-blend-mode: multiply;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  transform: translateZ(-10px) rotateY(0deg);
  transform-origin: left center;
}

/* Page block top edge — removed: over a photo background the top strip
   reads as a floating sliver / perspective error. The right-side page
   block (.book::before) stays, which correctly shows the page thickness. */
.book::after { display: none; }

.book-cover {
  position: relative;
  width: 100%; height: 100%;
  background: var(--green-deep);
  border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--radius-card);
  padding: 40px 36px;
  display: flex; flex-direction: column;
  overflow: hidden;
  /* Inner spine shadow (left edge of the cover) — visual "binding" */
  box-shadow:
    inset 14px 0 24px -10px rgba(0, 0, 0, 0.55),
    inset 1px 0 0 rgba(0, 0, 0, 0.4);
}

/* Inset orange frame */
.book-cover::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(232, 112, 31, 0.32);
  border-radius: var(--radius-card);
  pointer-events: none;
}

/* Subtle diagonal light wash */
.book-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 50%
  );
  pointer-events: none;
}

.book-meta {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--orange-text);
  margin-bottom: 32px;
  position: relative; z-index: 2;
}

.book-title {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--cream-light);
  font-size: 64px;
  line-height: 0.94;
  letter-spacing: -0.022em;
  position: relative; z-index: 2;
}
.book-title .line { display: block; }
.book-title .dot { background: var(--orange-bright); }

.book-divider {
  width: 40px; height: 2px;
  background: var(--orange-bright);
  margin: 22px 0 18px;
  position: relative; z-index: 2;
}

.book-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px; line-height: 1.4;
  color: rgba(247, 244, 237, 0.78);
  margin: 0 0 auto;
  max-width: 220px;
  position: relative; z-index: 2;
}

.book-region {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(247, 244, 237, 0.6);
  margin-top: 24px;
  position: relative; z-index: 2;
}

/* ============================================================
   PROBLEM — FEAR-CAPTURE bullet cards
   ============================================================ */
.problem { background: var(--cream-light); padding: 96px 0; }
.problem-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
}
.problem-text h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.05;
  color: var(--green-deep);
  margin: 18px 0 24px;
  letter-spacing: -0.018em;
}
.problem-intro {
  font-size: 17px; line-height: 1.55;
  color: var(--gray-warm); margin-bottom: 32px;
}

/* Each bullet is now a HIGH-IMPACT card */
.problem-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.problem-item {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-card);
  padding: 22px 26px 22px 32px;
  transition: transform 250ms var(--ease), border-color 250ms var(--ease), background-color 250ms var(--ease);
}
.problem-item::before {
  content: '!';
  position: absolute;
  left: -14px;
  top: 22px;
  width: 24px; height: 24px;
  background: var(--orange);
  color: var(--cream-light);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.problem-item:hover {
  transform: translateX(4px);
  border-left-color: var(--orange-bright);
  background: var(--cream-warm);
}
.problem-headline {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 24px;
  line-height: 1.15;
  color: var(--orange);
  letter-spacing: -0.014em;
  margin-bottom: 8px;
}
.problem-body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-warm);
  margin: 0;
}
.problem-body a.seo-inline {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  font-weight: 500;
}
.problem-body a.seo-inline:hover { color: var(--orange-text); text-decoration-color: var(--orange-text); }

.problem-column {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 100px;
}
.stat-box {
  background: var(--green-deep);
  color: var(--cream-light);
  border-radius: var(--radius-card);
  padding: 40px 32px;
  text-align: center;
}
.stat-number {
  font-family: var(--font-display); font-weight: 900;
  font-size: 96px; line-height: 1;
  color: var(--cream-light);
  letter-spacing: -0.03em; margin-bottom: 12px;
}
.stat-label {
  font-size: 13px; color: rgba(247, 244, 237, 0.7);
  line-height: 1.55;
}
.stat-source {
  display: block; margin-top: 8px;
  font-size: 11px; color: rgba(247, 244, 237, 0.6);
}

.problem-photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
}
.problem-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  filter: saturate(0.88) contrast(1.02);
}
.problem-photo-caption {
  display: block;
  padding: 12px 16px;
  background: var(--cream-warm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--green-deep);
  line-height: 1.4;
}

/* Pullquote */
.problem-pullquote {
  max-width: 760px;
  margin: 64px auto 0;
  padding: 48px 32px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  text-align: center;
}
.problem-pullquote-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 32px;
  line-height: 1.15;
  color: var(--green-deep);
  letter-spacing: -0.016em;
  margin: 0 0 20px;
}
.problem-pullquote-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-warm);
  max-width: 580px;
  margin: 0 auto;
}
.problem-pullquote-body strong {
  color: var(--green-deep);
  font-weight: 700;
}

/* ============================================================
   METHOD — G·R·A·B flow at top, step cards below
   ============================================================ */
.method-section { background: var(--green-deep); color: var(--cream-light); padding: 96px 0; }
.method-header { text-align: center; margin-bottom: 56px; }
.method-header .eyebrow-marker { margin-bottom: 18px; justify-content: center; }
.method-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 48px; line-height: 1.0;
  color: var(--cream-light);
  margin: 0 0 14px; letter-spacing: -0.018em;
}
.method-header h2 em { font-style: italic; color: var(--orange-bright); }
.method-subhead {
  font-family: var(--font-display);
  font-style: italic; font-weight: 900;
  font-size: 22px;
  color: var(--orange-bright);
  margin: 0 0 18px;
}
.method-header p {
  font-size: 15.5px; color: rgba(247, 244, 237, 0.7);
  line-height: 1.6; max-width: 680px; margin: 0 auto;
}

/* The visual GRAB flow — one line, big letters, arrows between */
.grab-flow {
  text-align: center;
  margin: 0 0 48px;
  padding: 32px 24px;
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
}
.grab-flow-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, 0.6);
  display: block;
  margin-bottom: 18px;
}
.grab-flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: nowrap;
}
.grab-flow-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 88px;
  line-height: 0.9;
  color: var(--orange-bright);
  letter-spacing: -0.04em;
}
.grab-flow-arrow {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  color: var(--cream-light);
  line-height: 1;
  opacity: 0.7;
}

/* The 4 step cards */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.step {
  position: relative;
  padding: 28px 22px;
  background: rgba(247, 244, 237, 0.03);
  border: 1px solid rgba(247, 244, 237, 0.1);
  border-radius: var(--radius-card);
  display: flex; flex-direction: column;
  gap: 14px;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.step:hover {
  background: rgba(247, 244, 237, 0.06);
  border-color: rgba(232, 112, 31, 0.3);
}
.step-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, 0.6);
}
.step-letter-small {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 52px;
  color: var(--orange-bright);
  line-height: 0.85;
  letter-spacing: -0.04em;
  display: block;
  margin: -8px 0 -4px;
}
.step-content { display: flex; flex-direction: column; gap: 8px; }
.step-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 19px; color: var(--cream-light);
  line-height: 1.15; letter-spacing: -0.012em;
}
.step-desc {
  font-size: 13px;
  color: rgba(247, 244, 237, 0.65);
  line-height: 1.55;
}

/* ============================================================
   BEYOND GRAB — Step 6 / Direct Delivery
   ============================================================ */
.beyond-section {
  background: var(--cream);
  padding: 96px 0;
  position: relative;
}
.beyond-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.beyond-header .eyebrow-marker { margin-bottom: 18px; justify-content: center; }
.beyond-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.05;
  color: var(--green-deep); letter-spacing: -0.018em;
  margin: 0 0 16px;
}
.beyond-header h2 em { font-style: italic; color: var(--orange); }
.beyond-header p {
  font-size: 16px; line-height: 1.65;
  color: var(--gray-warm); margin: 0;
}

.beyond-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 18px;
  align-items: stretch;
}
.flow-step {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.flow-step:hover { border-color: var(--orange); transform: translateY(-3px); }
.flow-step-final {
  background: var(--green-deep);
  border-color: var(--green-deep);
}
.flow-step-final:hover { border-color: var(--orange-bright); }
.flow-num {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: 20px;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.02em;
}
.flow-step-final .flow-num { color: var(--orange-bright); }
.flow-step h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 20px;
  color: var(--green-deep);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
}
.flow-step-final h3 { color: var(--cream-light); }
.flow-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-warm);
  margin: 0;
}
.flow-step-final p { color: rgba(247, 244, 237, 0.85); }
.flow-step-final p strong { color: var(--orange-bright); font-weight: 700; }
.flow-arrow {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  color: var(--orange);
  line-height: 1;
}

/* ============================================================
   BY THE NUMBERS
   ============================================================ */
.numbers-section {
  background: var(--green-darker);
  color: var(--cream-light);
  padding: 96px 0;
}
.numbers-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.numbers-header .eyebrow-marker { margin-bottom: 18px; justify-content: center; }
.numbers-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.05;
  color: var(--cream-light);
  letter-spacing: -0.018em;
  margin: 0 0 16px;
}
.numbers-header p {
  font-size: 15.5px; line-height: 1.6;
  color: rgba(247, 244, 237, 0.7);
  margin: 0;
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}
.number-card {
  border: 1px solid rgba(247, 244, 237, 0.12);
  border-radius: var(--radius-card);
  padding: 32px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.number-card:hover {
  border-color: rgba(232, 112, 31, 0.4);
  background: rgba(232, 112, 31, 0.04);
}
.number-big {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 64px;
  line-height: 0.9;
  color: var(--orange-bright);
  letter-spacing: -0.04em;
}
.number-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.25;
  color: var(--cream-light);
  letter-spacing: -0.01em;
}
.number-sub {
  font-size: 12.5px;
  color: rgba(247, 244, 237, 0.6);
  line-height: 1.5;
}
.numbers-source {
  font-size: 12px;
  color: rgba(247, 244, 237, 0.6);
  text-align: center;
  margin: 0;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* ============================================================
   BAND
   ============================================================ */
.band-section { background: var(--green-darker); overflow: hidden; }
.band-image { width: 100%; height: 360px; position: relative; }
.band-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.88) contrast(1.02);
}
@media (max-width: 900px) { .band-image { height: 220px; } }

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits-section { background: var(--cream); padding: 96px 0; }
.benefits-header {
  text-align: center; margin-bottom: 56px;
  max-width: 760px; margin-left: auto; margin-right: auto;
}
.benefits-header .eyebrow-marker { margin-bottom: 18px; justify-content: center; }
.benefits-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.05;
  color: var(--green-deep); letter-spacing: -0.018em;
  margin: 0 0 16px;
}
.benefits-header h2 em { font-style: italic; color: var(--orange); }
.benefits-header p {
  font-size: 16px; line-height: 1.6;
  color: var(--gray-warm); max-width: 640px; margin: 0 auto;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-bottom: 32px;
}
.benefit-card {
  position: relative;
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 36px 32px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 22px;
  align-items: start;
  overflow: hidden;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), background-color 200ms var(--ease);
}
.benefit-card:hover {
  border-color: var(--orange);
  background: var(--cream-warm);
  transform: translateY(-3px);
}

.benefit-stamp {
  position: absolute;
  top: 24px; right: 26px;
  width: 44px; height: 44px;
  z-index: 1;
  pointer-events: none;
}
.benefit-stamp-spread {
  background-image:
    linear-gradient(to right, var(--orange) 0, var(--orange) 100%),
    linear-gradient(to right, var(--orange) 0, var(--orange) 100%),
    linear-gradient(to right, var(--orange) 0, var(--orange) 100%),
    linear-gradient(to right, var(--orange) 0, var(--orange) 100%);
  background-repeat: no-repeat;
  background-position: 0 0, 0 12px, 0 24px, 0 36px;
  background-size: 18px 2px, 28px 2px, 38px 2px, 44px 2px;
}
.benefit-stamp-grid {
  background-image: radial-gradient(circle, var(--orange) 2.5px, transparent 2.5px);
  background-size: 16px 16px;
  background-position: 0 0;
}
.benefit-stamp-climb {
  background-image:
    linear-gradient(to top, var(--orange) 0, var(--orange) 100%),
    linear-gradient(to top, var(--orange) 0, var(--orange) 100%),
    linear-gradient(to top, var(--orange) 0, var(--orange) 100%),
    linear-gradient(to top, var(--orange) 0, var(--orange) 100%);
  background-repeat: no-repeat;
  background-position: 0 100%, 12px 100%, 24px 100%, 36px 100%;
  background-size: 6px 16px, 6px 26px, 6px 34px, 6px 44px;
}

.benefit-num-big {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 96px;
  color: var(--orange);
  line-height: 0.82;
  letter-spacing: -0.04em;
  display: block;
  grid-row: 1 / span 2;
  position: relative; z-index: 2;
}
.benefit-content {
  display: flex; flex-direction: column;
  gap: 10px; padding-top: 8px;
  position: relative; z-index: 2;
  padding-right: 56px;
}
.benefit-rule {
  display: block;
  width: 32px; height: 2px;
  background: var(--orange);
  margin-bottom: 4px;
}
.benefit-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 21px;
  color: var(--green-deep); line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
}
.benefit-card p {
  font-size: 14.5px; line-height: 1.6;
  color: var(--gray-warm); margin: 0;
}

.benefits-closer {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--green-deep);
  margin: 0 auto;
  max-width: 720px;
  padding-top: 12px;
}

/* ============================================================
   WHAT'S INSIDE
   ============================================================ */
.inside-section { background: var(--cream-light); padding: 96px 0; }
.inside-header { margin-bottom: 48px; max-width: 720px; }
.inside-header .eyebrow-marker { margin-bottom: 18px; }
.inside-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.0;
  color: var(--green-deep); letter-spacing: -0.018em;
  margin: 0 0 12px;
}
.inside-header p {
  font-size: 15.5px; line-height: 1.55;
  color: var(--gray-warm); margin: 0;
}
.inside-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.inside-card {
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 200ms var(--ease);
}
.inside-card:hover { transform: translateY(-3px); }
.inside-card:hover .inside-thumb { border-color: var(--orange); }
.inside-thumb {
  aspect-ratio: 3 / 4;
  background: var(--cream-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px; color: var(--gray-soft);
  padding: 18px; text-align: center;
  transition: border-color 200ms var(--ease);
}
.inside-meta { display: flex; align-items: baseline; gap: 10px; }
.inside-meta .num {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: 24px; color: var(--orange);
  line-height: 1; letter-spacing: -0.02em;
}
.inside-meta h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 16px; color: var(--green-deep);
  line-height: 1.2; letter-spacing: -0.01em; margin: 0;
}
.inside-card p {
  font-size: 12.5px; line-height: 1.55;
  color: var(--gray-warm); margin: 0;
}

/* ============================================================
   WHO IT'S FOR
   ============================================================ */
.who-section { background: var(--cream); padding: 96px 0; }
.who-header { margin-bottom: 48px; }
.who-header .eyebrow-marker { margin-bottom: 18px; }
.who-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.05;
  color: var(--green-deep); letter-spacing: -0.018em;
  margin: 0 0 12px; max-width: 720px;
}
.who-header p {
  font-size: 15.5px; line-height: 1.55;
  color: var(--gray-warm); max-width: 620px; margin: 0;
}
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.who-card {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.who-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.who-photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--cream-warm); }
.who-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.92);
  transition: transform 400ms var(--ease);
}
.who-card:hover .who-photo img { transform: scale(1.04); }
.who-body { padding: 24px 26px 26px; }
.who-card .num {
  font-family: var(--font-display); font-weight: 900;
  font-style: italic; font-size: 20px;
  color: var(--orange); line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 12px; display: block;
}
.who-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--green-deep);
  line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.who-card p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--gray-warm); margin: 0;
}

/* ============================================================
   CASE STUDIES (Testimonials styling kept)
   ============================================================ */
.results-section { background: var(--cream-light); padding: 96px 0; }
.results-header { text-align: center; margin-bottom: 56px; }
.results-header .eyebrow-marker { margin-bottom: 18px; justify-content: center; }
.results-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.0;
  color: var(--green-deep); letter-spacing: -0.018em;
  margin: 0 0 12px;
}
.results-header p {
  font-size: 15.5px; color: var(--gray-warm); line-height: 1.55;
  max-width: 580px; margin: 0 auto;
}
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px 30px 28px;
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.testimonial:hover { border-color: var(--orange); transform: translateY(-3px); }
.testimonial-quote {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; line-height: 1.25;
  color: var(--green-deep); letter-spacing: -0.01em;
  margin: 0 0 22px; flex: 1;
}
.testimonial-quote em { font-style: italic; color: var(--orange); }
.testimonial-attr {
  font-size: 12px; color: var(--gray-warm); line-height: 1.5;
  padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.testimonial-attr .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--cream-warm) center/cover no-repeat;
  flex-shrink: 0; border: 1px solid var(--line);
}
.testimonial-attr .who { display: flex; flex-direction: column; gap: 2px; }
.testimonial-attr strong { color: var(--green-deep); font-weight: 700; }
.testimonial-attr .role { color: var(--gray-soft); font-size: 11.5px; }

/* ============================================================
   TEAM with portraits
   ============================================================ */
.team-section { background: var(--cream-warm); padding: 96px 0; }
.team-header { margin-bottom: 56px; max-width: 720px; }
.team-header .eyebrow-marker { margin-bottom: 18px; }
.team-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.0;
  color: var(--green-deep); letter-spacing: -0.018em;
  margin: 0 0 12px;
}
.team-header p {
  font-size: 15.5px; line-height: 1.55;
  color: var(--gray-warm); margin: 0;
}
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.team-card {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.team-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.team-portrait {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--cream-warm);
}
.team-portrait img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(0.92);
  transition: transform 400ms var(--ease);
}
.team-card:hover .team-portrait img { transform: scale(1.04); }
.team-card .role-num {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 18px; color: var(--orange);
  line-height: 1; letter-spacing: -0.02em;
  padding: 16px 18px 0;
}
.team-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 18px; color: var(--green-deep);
  line-height: 1.15; letter-spacing: -0.01em;
  margin: 4px 0 0; padding: 0 18px;
}
.team-card .role-title {
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--orange-text);
  font-weight: 700; margin: 6px 0 0;
  padding: 0 18px;
}
.team-card .role-desc {
  font-size: 12.5px; line-height: 1.55;
  color: var(--gray-warm); margin: 10px 0 0;
  padding: 0 18px 20px;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-section { padding: 96px 0; background: var(--cream); }
.pricing-header { text-align: center; margin-bottom: 56px; }
.pricing-header .eyebrow-marker { margin-bottom: 18px; justify-content: center; }
.pricing-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 48px; line-height: 1.0;
  color: var(--green-deep); margin: 0 0 16px;
  letter-spacing: -0.018em;
}
.pricing-header p {
  font-size: 16px; color: var(--gray-warm);
  line-height: 1.55; max-width: 580px; margin: 0 auto;
}
/* Three cards across the full width again: the books, the read at both its
   depths on one card, and the Renovation. */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card {
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 40px 32px 32px;
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.price-card:hover { border-color: var(--orange); transform: translateY(-4px); }
.price-card.featured {
  background: var(--green-deep);
  color: var(--cream-light);
  border-color: var(--green-deep);
}
.price-card.featured:hover { border-color: var(--orange-bright); }
.price-card.featured .price-name,
.price-card.featured .price-amount { color: var(--cream-light); }
.price-card.featured .price-list li {
  color: rgba(247, 244, 237, 0.85);
  border-color: rgba(247, 244, 237, 0.12);
}
.price-card.featured .price-list li::before { color: var(--orange-bright); }
.price-badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--orange-text); color: var(--cream-light);
  padding: 6px 16px; border-radius: var(--radius-card);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
}
.price-name {
  font-family: var(--font-display); font-weight: 900;
  font-size: 24px; color: var(--green-deep);
  margin: 0 0 16px; letter-spacing: -0.01em;
}
.price-amount {
  font-family: var(--font-display); font-weight: 900;
  font-size: 64px; color: var(--green-deep);
  line-height: 1; margin-bottom: 28px;
  letter-spacing: -0.02em;
}
.price-amount sup {
  font-size: 26px; vertical-align: super;
  line-height: 1; margin-right: 2px; font-weight: 700;
}
/* The gap over the list is stated rather than left to the browser: the
   selector label above it on two cards has to match it exactly. */
.price-list { list-style: none; padding: 0; margin: 16px 0 32px; flex: 1; }
.price-list li {
  font-size: 13.5px; color: var(--gray-warm);
  padding: 12px 0 12px 24px; position: relative;
  border-bottom: 1px dashed var(--line);
  line-height: 1.5;
}
.price-list li:last-child { border-bottom: none; }
.price-list li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--orange); font-weight: 700;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services-section { background: var(--green-deep); color: var(--cream-light); padding: 96px 0; }
.services-header { text-align: center; margin-bottom: 48px; }
.services-header .eyebrow-marker { margin-bottom: 18px; justify-content: center; }
.services-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.0;
  color: var(--cream-light); letter-spacing: -0.018em;
  margin: 0 0 12px;
}
.services-header p {
  font-size: 15.5px; color: rgba(247, 244, 237,0.7); line-height: 1.55;
  max-width: 600px; margin: 0 auto;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin-bottom: 36px;
}
.service-card {
  background: transparent;
  border: 1px solid rgba(247, 244, 237, 0.12);
  border-radius: var(--radius-card);
  padding: 32px 30px 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), background-color 200ms var(--ease);
  text-decoration: none; color: inherit;
}
.service-card:hover {
  border-color: rgba(247, 244, 237, 0.32);
  background: rgba(247, 244, 237, 0.03);
  transform: translateY(-3px);
}
.service-card-head {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.service-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 21px; color: var(--cream-light);
  line-height: 1.2; letter-spacing: -0.01em;
  margin: 0; flex: 1 1 auto; min-width: 0;
}
.service-price {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 20px; color: var(--orange-bright);
  line-height: 1; letter-spacing: -0.01em; flex-shrink: 0;
}
.service-card p {
  font-size: 13.5px;
  color: rgba(247, 244, 237, 0.7);
  line-height: 1.6; margin: 0;
}
.service-card-cta {
  background: rgba(232, 112, 31, 0.08);
  border-color: rgba(232, 112, 31, 0.3);
}
.service-card-cta:hover {
  background: rgba(232, 112, 31, 0.14);
  border-color: var(--orange-bright);
}
.service-card-cta h3 { color: var(--orange-bright); }
.services-note {
  text-align: center; font-size: 12.5px;
  color: rgba(247, 244, 237, 0.55);
  line-height: 1.55; letter-spacing: 0.02em;
  max-width: 720px; margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(247, 244, 237, 0.1);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background: var(--cream-light); padding: 96px 0; }
.faq-header { margin-bottom: 48px; max-width: 720px; }
.faq-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 1.0;
  color: var(--green-deep); letter-spacing: -0.018em;
  margin: 0 0 12px;
}
.faq-header p {
  font-size: 15.5px; line-height: 1.55;
  color: var(--gray-warm); margin: 0;
}
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
/* The home carried a page-local override making its questions 16px of body
   face at 700 rather than 22px of display face at 900, and it was the only
   FAQ on the site that read as a list of questions instead of a run of
   headlines. That override is now the default, so every FAQ matches. */
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 17px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 16px; line-height: 1.4;
  color: var(--green-deep); letter-spacing: -0.005em;
  transition: color 200ms var(--ease);
}
@media (min-width: 768px) { .faq-item summary { font-size: 17px; } }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--orange-text); }
.faq-toggle {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1.5px solid var(--green-deep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700;
  font-size: 16px; color: var(--green-deep); line-height: 1;
  transition: transform 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  background: var(--orange);
  color: var(--cream-light);
  border-color: var(--orange);
}
.faq-body {
  padding: 0 60px 28px 0;
  font-size: 15px; line-height: 1.65;
  color: var(--gray-warm); max-width: 800px;
}
.faq-body p { margin: 0 0 12px; }
.faq-body p:last-child { margin: 0; }
.faq-body a {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.faq-body a:hover { color: var(--orange-text); text-decoration-color: var(--orange-text); }
.faq-body strong { color: var(--green-deep); font-weight: 700; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta { background: var(--cream-warm); padding: 96px 0 88px; text-align: center; }
.final-cta h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 52px; line-height: 1.02;
  color: var(--green-deep); letter-spacing: -0.022em;
  margin: 0 auto 18px; max-width: 800px;
}
.final-cta h2 em { font-style: italic; color: var(--orange); }
/* Scoped to the intro paragraph specifically (a direct child of
   .container), not every <p> anywhere inside .final-cta: a bare .final-cta
   p was reaching several levels deep into the payment blocks below it
   (.pay-option-note, .pay-crypto-note, .pay-crypto-networks,
   .pay-crypto-view-title are all <p> tags) and, on specificity alone,
   beating their own 12px/15px rules, so they rendered at this 17px with a
   600px max-width and a 32px bottom margin instead of their intended
   sizing. That is what actually made the crypto block "heavier": its one
   note line wrapped to three lines at 17px instead of two at 12px, plus a
   32px gap after it, versus the card block's shorter note wrapping to one
   line. Product pages' own final CTA payment blocks were the only place
   this was visible, since services'/about's final CTA has no nested <p>
   past the intro one, and home's final CTA overrides this whole selector
   locally and its own <p> is not a direct child of .container anyway. */
.final-cta > .container > p {
  font-size: 17px; line-height: 1.55;
  color: var(--gray-warm); max-width: 600px;
  margin: 0 auto 32px;
}
.final-cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--green-darker);
  color: rgba(247, 244, 237, 0.7);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.6fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(247, 244, 237, 0.1);
}
.footer-brand .wordmark { color: var(--cream-light); font-size: 48px; margin-bottom: 18px; }
.footer-brand p {
  font-size: 13.5px; line-height: 1.55;
  max-width: 320px; color: rgba(247, 244, 237, 0.6);
}
.site-footer h3 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream-light); margin: 0 0 18px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { font-size: 13px; padding: 6px 0; }
.site-footer ul li a {
  color: rgba(247, 244, 237, 0.6);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.site-footer ul li a:hover { color: var(--orange-on-dark); }
.footer-resources ul { columns: 2; column-gap: 24px; }
.footer-resources ul li { break-inside: avoid; }

.footer-meta {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  padding-bottom: 32px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(247, 244, 237, 0.1);
}
.footer-popular p,
.footer-grab-official p {
  font-size: 12px; line-height: 1.7;
  color: rgba(247, 244, 237, 0.6); margin: 0;
}
.footer-grab-official a {
  color: var(--orange-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms var(--ease);
}
.footer-grab-official a:hover { color: var(--cream-light); }

.footer-bottom {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(247, 244, 237, 0.6);
  flex-wrap: wrap; gap: 8px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .site-nav { gap: 22px; }
  .site-nav a { font-size: 14.5px; }
  .header-cta .btn { padding: 9px 14px; font-size: 14px; }
  .grab-flow-letter { font-size: 72px; }
  .step-letter-small { font-size: 44px; }
}

@media (max-width: 900px) {
  /* HERO mobile re-order */
  .hero-seo { padding: 32px 0 56px; }
  .hero-seo .hero-inner {
    display: flex; flex-direction: column; gap: 24px;
  }
  .hero-text-stack { display: contents; }
  /* Mobile only: the headline and the lede split apart so the tablet can
     sit between them (headline, tablet, lede, CTAs). text-top unwraps via
     display:contents so its two children -- the h1 and the lede -- become
     independently orderable flex items of .hero-inner, same trick already
     used one level up on text-stack. Desktop is untouched: this whole
     block is inside the max-width:900px query. */
  .hero-text-top    { display: contents; }
  .hero-seo h1      { order: 1; margin-bottom: 0; }
  .hero-visual      { order: 2; }
  .hero-seo .hero-subhead { order: 3; }
  .hero-text-bottom { order: 4; }

  .hero-seo h1 { font-size: 38px; margin-bottom: 10px; }
  .hero-seo .hero-subhead { font-size: 18px; margin-bottom: 0; }
  .hero-seo .hero-tagline { font-size: 22px; margin-bottom: 18px; }
  .hero-seo .hero-lede { font-size: 16px; margin-bottom: 20px; }
  .hero-seo .hero-ctas { margin-bottom: 18px; }
  .hero-seo .hero-trust { gap: 10px; font-size: 10px; }
  .hero-seo .hero-platforms { padding-top: 18px; gap: 12px; }
  .platform-pills { gap: 8px; }
  .platform-pill { padding: 6px 11px 6px 10px; font-size: 11px; }

  .book { width: 240px; }
  .book-cover { padding: 32px 28px; }
  .book-title { font-size: 44px; }
  /* Three-line titles (Method / + / Toolbox) at 44px plus the meta line,
     the divider's own margins, the subtitle and the region label added up
     to more height than this shrunk cover has -- confirmed by measuring
     the rendered subtitle's own bottom edge past the cover's, not just a
     guess: overflow:hidden does not reliably clip here because .book's
     3D transform (preserve-3d) puts .book-cover's clip box in a context
     Safari/Chrome do not always honour, so the excess painted straight
     through onto the page below instead of being cut off. Tightening the
     spacing around a three-line title is the fix, not fighting that
     clipping quirk: two-line titles (The Method, Account Rebuild) had
     room to spare at the old sizes and still do at these. */
  .book-meta { margin-bottom: 20px; }
  .book-title.is-triple { font-size: 36px; }
  .book-divider { margin: 14px 0 12px; }
  .book-region { margin-top: 16px; }

  .problem-inner { grid-template-columns: 1fr; gap: 40px; }
  .problem-text h2, .pricing-header h2, .method-header h2,
  .benefits-header h2, .inside-header h2, .who-header h2,
  .results-header h2, .team-header h2, .services-header h2,
  .faq-header h2, .beyond-header h2, .numbers-header h2 { font-size: 30px; }
  .problem-column { position: static; }
  .stat-number { font-size: 72px; }
  .problem-pullquote { padding: 36px 22px; margin-top: 40px; }
  .problem-pullquote-title { font-size: 24px; }
  .problem-pullquote-body { font-size: 15.5px; }
  .problem-headline { font-size: 20px; }
  .problem-body { font-size: 14px; }

  .grab-flow-row { gap: 10px; }
  .grab-flow-letter { font-size: 56px; }
  .grab-flow-arrow { font-size: 26px; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .step-letter-small { font-size: 48px; }

  .beyond-flow {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .flow-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }

  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .number-big { font-size: 52px; }

  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-card { padding: 28px 26px; gap: 4px 18px; }
  .benefit-num-big { font-size: 76px; }
  .benefit-stamp { top: 20px; right: 22px; }

  .inside-grid { grid-template-columns: 1fr 1fr; }
  .who-grid { grid-template-columns: 1fr 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card h3 { font-size: 19px; }
  .service-price { font-size: 18px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .final-cta h2 { font-size: 32px; }
  .faq-item summary { font-size: 17px; }
  .faq-body { padding-right: 20px; }

  .problem, .method-section, .benefits-section, .inside-section,
  .who-section, .results-section, .team-section, .services-section,
  .pricing-section, .faq-section, .final-cta, .beyond-section,
  .numbers-section { padding: 64px 0; }

  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
  .footer-resources { grid-column: span 2; }
  .footer-resources ul { columns: 2; }
  .footer-meta { grid-template-columns: 1fr; gap: 28px; }

  /* Clear the fixed contact bubble (56px tall, sitting 76px up once the sticky
     CTA bar shows) so it stops covering the last lines of the disclaimer. */
  .site-footer { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: block; margin-left: auto; margin-right: 10px; }
  .header-cta .btn,
  .nav-toggle {
    height: 38px;
    padding: 0 16px;
    border-radius: var(--radius-card);
    font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;
  }

  .inside-grid { grid-template-columns: 1fr; }
  .who-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: 1fr; }

  .grab-flow-letter { font-size: 44px; }
  .grab-flow-arrow { font-size: 20px; }
  .grab-flow { padding: 24px 16px; }

  .hero-seo .hero-platforms { flex-direction: column; align-items: flex-start; }
  .hero-seo .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* Below 900px the header carries the wordmark, the language globe and the
   Menu trigger; the "Get the Guide" CTA lives in the drawer Menu opens, so
   keeping it in the bar too was a duplicate competing with the trigger for
   the same narrow row.
   This is the home page's own rule, moved here verbatim (same breakpoint, same
   declaration) rather than a second mechanism, so every page now matches what
   home already did. !important is carried over with it: .header-cta is given
   display:block in the 760px block above and both selectors are a single
   class, so winning on source order alone would be fragile. */
@media (max-width: 900px) {
  /* 900, not 760: the home has always shortened its bar here, and the bar
     is one bar. */
  .site-header-inner { height: 60px; }
  .header-cta { display: flex !important; margin-left: auto; margin-right: 6px; }
  .header-cta .btn { display: none !important; }
}

@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr; }
  .footer-resources ul { columns: 1; }
  .header-cta .btn, .nav-toggle { height: 36px; padding: 0 13px; font-size: 14px; }
}

/* ============================================================
   ARTICLE / LEGAL / GENERIC PAGE COMPONENTS
   ============================================================ */
.breadcrumb {
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--gray-warm); margin-bottom: 18px;
}
.breadcrumb a { color: var(--green-deep); text-decoration: none; }
.breadcrumb a:hover { color: var(--orange-text); }
.breadcrumb .sep { margin: 0 8px; color: var(--gray-soft); }

.page-hero {
  background: var(--cream);
  padding: 88px 0 64px;
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { display: block; margin-bottom: 16px; }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 56px; line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--green-deep);
  margin: 0 0 18px; max-width: 820px;
}
.page-hero h1 em { font-style: italic; color: var(--orange); font-weight: 900; }
.page-hero .lede {
  font-size: 18px; line-height: 1.6;
  color: var(--gray-warm); max-width: 680px;
  margin: 0 0 24px;
}
.page-hero .meta-row {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 12.5px; color: var(--gray-soft);
  letter-spacing: 0.04em; margin-top: 12px;
}
.page-hero .meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.page-hero .meta-row span + span::before { content: '·'; margin-right: 16px; color: var(--orange); }
@media (max-width: 900px) {
  .page-hero { padding: 56px 0 40px; }
  .page-hero h1 { font-size: 38px; }
  .page-hero .lede { font-size: 16px; }
}

.article-body { background: var(--cream-light); padding: 64px 0 80px; }
.article-body .container { max-width: 760px; }
.article-body p {
  font-family: var(--font-body); font-size: 16px;
  line-height: 1.75; color: var(--ink); margin: 0 0 20px;
}
.article-body h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 32px; line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--green-deep); margin: 48px 0 18px;
}
.article-body h2 em { font-style: italic; color: var(--orange); font-weight: 900; }
.article-body h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; line-height: 1.2;
  color: var(--green-deep); margin: 36px 0 14px;
  letter-spacing: -0.012em;
}
.article-body ul, .article-body ol { padding-left: 22px; margin: 0 0 24px; color: var(--ink); }
.article-body ul { list-style: none; padding-left: 4px; }
.article-body ul li, .article-body ol li {
  font-size: 16px; line-height: 1.7; margin-bottom: 10px;
}
.article-body strong { color: var(--green-deep); font-weight: 700; }
/* :not(.btn) is the whole point. This rule is one class plus one element,
   so without the exclusion it beat .btn and repainted every button inside
   an article: green text with an orange underline, which is invisible on
   the dark green secondary and nearly so on the orange primary. Prose
   links keep the underline, buttons keep being buttons. */
.article-body a:not(.btn) {
  color: var(--green-deep);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}
.article-body a:not(.btn):hover { color: var(--orange-text); }
.article-body blockquote {
  border-left: 3px solid var(--orange);
  background: var(--cream-warm);
  padding: 18px 22px; margin: 28px 0;
  font-family: var(--font-display);
  font-style: italic; font-size: 18px;
  line-height: 1.55; color: var(--green-deep);
}
.article-body blockquote p {
  font-size: inherit; line-height: inherit;
  color: inherit; margin: 0; font-family: inherit;
}

.callout {
  border-left: 3px solid var(--orange);
  background: var(--cream-warm);
  padding: 22px 24px; margin: 32px 0;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.callout .label {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px; display: block;
}
.callout p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--green-deep); }

.inline-cta {
  border: 1px solid var(--line-strong);
  background: var(--cream);
  border-radius: var(--radius-card); padding: 26px 28px;
  margin: 40px 0;
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 18px;
  justify-content: space-between;
  transition: border-color 200ms var(--ease);
}
.inline-cta:hover { border-color: var(--orange); }
.inline-cta-text { flex: 1 1 320px; }
.inline-cta-text strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; color: var(--green-deep); margin-bottom: 4px;
}
.inline-cta-text p { margin: 0; font-size: 14px; color: var(--gray-warm); line-height: 1.55; }

.related-articles { background: var(--cream); padding: 64px 0; }
.related-articles .container { max-width: 1180px; }
.related-articles h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 28px; color: var(--green-deep); margin: 0 0 28px;
}
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card {
  display: block;
  border: 1px solid var(--line);
  background: var(--cream-light);
  padding: 24px 22px; border-radius: var(--radius-card);
  text-decoration: none;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.related-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.related-card .eyebrow { display: block; margin-bottom: 10px; font-size: 11px; }
.related-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 18px; line-height: 1.2;
  color: var(--green-deep); margin: 0 0 10px;
}
.related-card p { font-size: 13.5px; color: var(--gray-warm); line-height: 1.55; margin: 0; }
@media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } }

.article-end-cta {
  background: var(--cream-warm);
  padding: 72px 0; text-align: center;
}
.article-end-cta h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; color: var(--green-deep);
  margin: 0 auto 14px; max-width: 680px;
}
.article-end-cta h2 em { font-style: italic; color: var(--orange); font-weight: 900; }
.article-end-cta p {
  font-size: 15.5px; color: var(--gray-warm);
  max-width: 580px; margin: 0 auto 24px; line-height: 1.6;
}
.article-end-cta .cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   RESOURCES PAGE
   ============================================================ */
.resources-section { background: var(--cream-light); padding: 80px 0; }
.resources-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.resource-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius-card); padding: 26px 24px;
  text-decoration: none;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.resource-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.resource-card .num {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  color: var(--orange); font-size: 16px;
  margin-bottom: 8px; display: block;
}
.resource-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 19px; line-height: 1.2;
  color: var(--green-deep); margin: 0 0 12px;
  letter-spacing: -0.012em;
}
.resource-card p {
  font-size: 13.5px; color: var(--gray-warm);
  line-height: 1.55; margin: 0 0 18px; flex: 1;
}
.resource-card .read-more {
  font-size: 12.5px; font-weight: 700;
  color: var(--orange-text); letter-spacing: 0.04em;
}
@media (max-width: 1000px) { .resources-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .resources-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-paths { background: var(--cream-light); padding: 80px 0; }
.contact-paths-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-path {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 36px 32px;
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.contact-path:hover { border-color: var(--orange); transform: translateY(-3px); }
.contact-path .eyebrow { margin-bottom: 14px; }
.contact-path h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 26px; line-height: 1.15;
  color: var(--green-deep); margin: 0 0 14px;
  letter-spacing: -0.014em;
}
.contact-path p {
  font-size: 15px; color: var(--gray-warm);
  line-height: 1.65; margin: 0 0 24px; flex: 1;
}
.contact-path .btn { align-self: flex-start; }
@media (max-width: 760px) { .contact-paths-grid { grid-template-columns: 1fr; } }

.contact-checklist { background: var(--cream); padding: 72px 0; }
.contact-checklist .container { max-width: 760px; }
.contact-checklist h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 30px; color: var(--green-deep);
  margin: 0 0 22px; letter-spacing: -0.016em;
}
.contact-checklist ul { list-style: none; padding: 0; margin: 0; }
.contact-checklist li {
  font-size: 16px; line-height: 1.6; color: var(--ink);
  padding: 12px 0 12px 26px; position: relative;
  border-bottom: 1px solid var(--line);
}
.contact-checklist li:last-child { border-bottom: none; }
.contact-checklist li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--orange); font-weight: 700;
}
.contact-checklist li strong { color: var(--green-deep); font-weight: 700; }

.contact-geo { background: var(--cream-warm); padding: 72px 0; }
.contact-geo .container { max-width: 760px; }
.contact-geo h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 28px; color: var(--green-deep);
  margin: 0 0 18px; letter-spacing: -0.014em;
}
.contact-geo p {
  font-size: 16px; color: var(--green-deep);
  line-height: 1.7; margin: 0;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-team { background: var(--cream-light); padding: 80px 0; }
.about-team-header { margin-bottom: 48px; max-width: 720px; }
.about-team-header .eyebrow { display: block; margin-bottom: 14px; }
.about-team-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 36px; color: var(--green-deep);
  margin: 0 0 16px; letter-spacing: -0.018em;
}
.about-team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.about-team-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.about-team-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.about-team-card .portrait { aspect-ratio: 1 / 1; background: var(--cream-warm); overflow: hidden; }
.about-team-card .portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.92);
}
.about-team-card .body { padding: 22px 20px 24px; }
.about-team-card .role-num {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  color: var(--orange); font-size: 14px;
  display: block; margin-bottom: 6px;
}
.about-team-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 20px; color: var(--green-deep);
  margin: 0 0 4px; letter-spacing: -0.012em;
}
.about-team-card .role-title {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--orange-text); margin: 0 0 12px;
}
.about-team-card .bio {
  font-size: 13px; line-height: 1.55;
  color: var(--gray-warm); margin: 0;
}
@media (max-width: 1000px) { .about-team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .about-team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .about-team-grid { grid-template-columns: 1fr; } }

.about-story { background: var(--cream); padding: 80px 0; }
.about-story .container { max-width: 760px; }
.about-story h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 32px; color: var(--green-deep);
  margin: 0 0 22px; letter-spacing: -0.016em;
}
.about-story h2 em { font-style: italic; color: var(--orange); }
.about-story h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--green-deep);
  margin: 36px 0 12px;
}
.about-story p {
  font-size: 16px; line-height: 1.75;
  color: var(--ink); margin: 0 0 18px;
}
.about-company { background: var(--cream-warm); padding: 56px 0; }
.about-company .container { max-width: 760px; }
.about-company p {
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; line-height: 1.5;
  color: var(--green-deep); margin: 0 0 14px;
}

/* ============================================================
   SERVICES PAGE (extended)
   ============================================================ */
.services-detail { background: var(--cream-light); padding: 80px 0; }
.service-detail-item {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: 48px; padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.service-detail-item:first-child { padding-top: 0; }
.service-detail-item:last-child { border-bottom: none; padding-bottom: 0; }
.service-detail-item .left .eyebrow { display: block; margin-bottom: 12px; }
.service-detail-item h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 30px; line-height: 1.1;
  color: var(--green-deep); margin: 0 0 14px;
  letter-spacing: -0.016em;
}
.service-detail-item .from {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 22px; color: var(--orange);
  margin: 0 0 8px;
}
.service-detail-item .right p {
  font-size: 15.5px; line-height: 1.7;
  color: var(--ink); margin: 0 0 16px;
}
.service-detail-item .right ul { list-style: none; padding: 0; margin: 0 0 20px; }
.service-detail-item .right ul li {
  font-size: 14.5px; color: var(--ink); line-height: 1.55;
  padding: 10px 0 10px 22px; position: relative;
  border-bottom: 1px solid var(--line);
}
.service-detail-item .right ul li::before {
  content: '→'; position: absolute; left: 0;
  color: var(--orange); font-weight: 700;
}
.service-detail-item .right ul li:last-child { border-bottom: none; }
.service-detail-item .right .turnaround {
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gray-soft);
}
@media (max-width: 900px) {
  .service-detail-item { grid-template-columns: 1fr; gap: 22px; padding: 40px 0; }
}

.services-includes { background: var(--cream); padding: 72px 0; }
.services-includes .container { max-width: 880px; }
.services-includes h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 30px; color: var(--green-deep);
  margin: 0 0 28px; letter-spacing: -0.016em;
}
.services-includes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 26px;
}
.services-includes-grid div {
  font-size: 14.5px; color: var(--ink);
  padding: 12px 0 12px 22px; position: relative;
  line-height: 1.55; border-top: 1px solid var(--line);
}
.services-includes-grid div::before {
  content: '★'; position: absolute; left: 0;
  color: var(--orange); font-size: 12px;
}
@media (max-width: 760px) { .services-includes-grid { grid-template-columns: 1fr; } }

.services-howitworks { background: var(--green-deep); color: var(--cream-light); padding: 72px 0; }
.services-howitworks h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 32px; color: var(--cream-light);
  margin: 0 0 36px; text-align: center;
  letter-spacing: -0.016em;
}
.services-howitworks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.howitworks-step .num {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  color: var(--orange-bright); font-size: 36px;
  display: block; margin-bottom: 12px;
}
.howitworks-step h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--cream-light); margin: 0 0 10px;
}
.howitworks-step p {
  font-size: 14px; line-height: 1.6;
  color: rgba(247, 244, 237, 0.7); margin: 0;
}
@media (max-width: 760px) { .services-howitworks-grid { grid-template-columns: 1fr; } }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-body { background: var(--cream-light); padding: 64px 0 88px; }
.legal-body .container { max-width: 760px; }
.legal-body h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 26px; color: var(--green-deep);
  margin: 40px 0 14px; letter-spacing: -0.014em;
}
.legal-body h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 18px; color: var(--green-deep);
  margin: 28px 0 10px;
}
.legal-body p, .legal-body li {
  font-size: 15.5px; line-height: 1.7; color: var(--ink);
}
.legal-body p { margin: 0 0 18px; }
.legal-body ul, .legal-body ol { padding-left: 22px; margin: 0 0 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a {
  color: var(--green-deep); text-decoration: underline;
  text-decoration-color: var(--orange); text-underline-offset: 3px;
}
.legal-body a:hover { color: var(--orange-text); }
.legal-body .updated {
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--gray-soft); margin-bottom: 32px; display: inline-block;
}

/* ============================================================
   404 PAGE
   ============================================================ */
.notfound { background: var(--cream); padding: 120px 0; text-align: center; }
.notfound h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 88px; line-height: 1; color: var(--green-deep);
  margin: 0 0 16px; letter-spacing: -0.022em;
}
.notfound p {
  font-size: 17px; color: var(--gray-warm);
  max-width: 480px; margin: 0 auto 32px;
}
.notfound .links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   RESOURCES CTA SECTION
   ============================================================ */
.resources-cta { background: var(--cream-warm); padding: 72px 0; text-align: center; }
.resources-cta h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; color: var(--green-deep);
  margin: 0 auto 14px; max-width: 620px;
  letter-spacing: -0.016em;
}
.resources-cta h2 em { font-style: italic; color: var(--orange); }
.resources-cta p {
  font-size: 15.5px; color: var(--gray-warm);
  max-width: 540px; margin: 0 auto 22px; line-height: 1.6;
}

/* ============================================================
   MINI CTA INLINE STRIPS
   ============================================================ */
.mini-cta {
  background: var(--cream-warm);
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mini-cta-alt {
  background: var(--cream-light);
}
.mini-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.mini-cta-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--green-deep);
  margin: 0;
  flex: 1 1 auto;
  min-width: 280px;
}
.mini-cta-text strong {
  font-weight: 900;
  font-style: italic;
  color: var(--orange);
}
.mini-cta .btn {
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .mini-cta { padding: 24px 0; }
  .mini-cta-text { font-size: 17px; }
  .mini-cta .btn { width: 100%; justify-content: center; }
}

.footer-operator {
  font-size: 11.5px !important;
  color: rgba(247, 244, 237, 0.45) !important;
  margin-top: 14px !important;
}

/* ============================================================
   MOBILE DRAWER (slides in from the right)
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 37, 24, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms var(--ease);
}
.drawer-overlay.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 210;
  width: min(86vw, 344px);
  background: var(--cream-light);
  box-shadow: -18px 0 40px rgba(6, 37, 24, 0.22);
  display: flex; flex-direction: column;
  padding: 20px 24px 28px;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-overflow-scrolling: touch; overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.drawer-brand {
  font-family: var(--font-display); font-weight: 900;
  font-size: 20px; color: var(--green); letter-spacing: -0.02em;
}
.drawer-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--green-deep);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-card); transition: background-color 180ms var(--ease);
}
.drawer-close:hover { background: var(--cream-warm); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 2px; border-bottom: 1px solid var(--line);
  font-family: var(--font-body); font-size: 17px; font-weight: 700;
  color: var(--green-deep); text-decoration: none;
  opacity: 0; transform: translateX(16px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease), color 160ms var(--ease);
}
.drawer-nav a:hover { color: var(--orange-text); }
/* Current-page indicator for the drawer: same orange accent as the
   desktop nav, no underline here since the row already has its own
   border-bottom divider. Icon tints along for free via currentColor. */
.drawer-nav a.is-active { color: var(--orange-text); }
/* Wayfinding icons, hand-authored in the site's existing stroke-icon
   convention (24x24, round caps/joins, matches .pay-lock-ico and
   .reassure-ico) rather than a third-party set. These are generic UI
   marks, not trademarks. Each row's icon is keyed off an explicit class
   (.di-method etc.), not the href: hrefs already differ between home's
   anchor links and every other page's, and a class survives a URL
   changing where a selector keyed on href would silently stop matching.
   Drawn with CSS mask so the shape paints in currentColor: it inherits
   the row's own colour, :hover included, and the .drawer-more demotion
   below (the lighter --gray-warm) reaches its icons for free, no
   duplicate rule needed. 16px and 78% opacity, well under the label's
   own weight, so each icon reads as a wayfinding mark beside the label,
   not a second thing competing with it. */
.drawer-nav a::before,
.drawer-guides > summary::before {
  content: "";
  width: 16px; height: 16px; flex: 0 0 auto;
  background-color: currentColor;
  opacity: 0.78;
  -webkit-mask-image: var(--di-icon, none);
  mask-image: var(--di-icon, none);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* THE SAME "PLUS" MARK, IN THE DRAWER
   These icons are CSS masks painted in the row's own colour, so the mark
   is a second mask layer rather than something drawn on top: both layers
   share the glyph's 24-unit box, which puts the plus in the top-left
   corner with no positioning to keep in step. One rule, reading whichever
   `--di-icon` the row already has, so no Plus product gets an icon of its
   own. */
.drawer-nav a.is-plus::before {
  --di-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4.6 1.4v6.4M1.4 4.6h6.4'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--di-icon, none), var(--di-plus);
  mask-image: var(--di-icon, none), var(--di-plus);
  -webkit-mask-size: contain, contain;
  mask-size: contain, contain;
  -webkit-mask-position: center, center;
  mask-position: center, center;
}

.di-home     { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4v-6H9v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.di-method   { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C4 4.67 4.67 4 5.5 4H11a1 1 0 0 1 1 1v15a1 1 0 0 0-1-1H5.5A1.5 1.5 0 0 0 4 20.5z'/%3E%3Cpath d='M20 5.5C20 4.67 19.33 4 18.5 4H13a1 1 0 0 0-1 1v15a1 1 0 0 1 1-1h5.5a1.5 1.5 0 0 1 1.5 1.5z'/%3E%3C/svg%3E"); }
.di-outcomes { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l6-6 4 4 6-8'/%3E%3Cpath d='M15 6h5v5'/%3E%3C/svg%3E"); }
.di-pricing  { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6a2 2 0 0 0-1.4-.6H4a2 2 0 0 0-2 2v7.2c0 .5.2 1 .6 1.4l9 9a2 2 0 0 0 2.8 0l7.2-7.2a2 2 0 0 0 0-2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.di-faq      { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.3a2.5 2.5 0 0 1 4.9.8c0 1.7-2.4 2-2.4 3.4'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E"); }
.di-services { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 1 0-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 0 5.4-5.4l-2.8 2.8-2-2z'/%3E%3C/svg%3E"); }
.di-resources{ --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l5 5v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
.di-about    { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5 20c0-4 3.1-6.5 7-6.5S19 16 19 20'/%3E%3C/svg%3E"); }
.di-contact  { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E"); }
.drawer.open .drawer-nav a { opacity: 1; transform: translateX(0); }
.drawer.open .drawer-nav a:nth-child(1) { transition-delay: 120ms; }
.drawer.open .drawer-nav a:nth-child(2) { transition-delay: 160ms; }
.drawer.open .drawer-nav a:nth-child(3) { transition-delay: 200ms; }
.drawer.open .drawer-nav a:nth-child(4) { transition-delay: 240ms; }
.drawer.open .drawer-nav a:nth-child(5) { transition-delay: 280ms; }
.drawer.open .drawer-nav a:nth-child(6) { transition-delay: 320ms; }
/* display:block overrides .btn's inline-flex on purpose. As a flex container
   the button held TWO items: the bare label text node (which flex wraps in an
   anonymous item) and the .btn-local span. With the default flex-wrap:nowrap
   neither could move to its own line, so both shrank and wrapped their own
   text instead, leaving the converted price stranded in a second column beside
   a two-line label. In normal flow the label and the price are one continuous
   text run: they sit on one line when they fit, and stack inside the button
   when they do not. Type size is untouched. */
.drawer-cta {
  display: block;
  margin-top: 22px; text-align: center; justify-content: center;
  opacity: 0; transform: translateX(16px);
  transition: opacity 240ms var(--ease) 360ms, transform 240ms var(--ease) 360ms;
}
/* Keeps the converted amount whole, so a wrap never splits "Rp 470,000". */
.drawer-cta .btn-local { white-space: nowrap; }
/* Second drawer button (New on Grab): tighter than the 22px above the
   first button, since the two now read as a pair rather than one CTA
   separated from the nav above it. Every drawer on the site carries
   this pair, home included. */
.drawer-cta-2 { margin-top: 10px; }
/* Third line under the pair: the DIY route for whoever opened the menu
   looking for the audit or the setup and would rather just run it
   themselves. Same register as .hero-cta-note (a bold lead-in plus an
   underlined link), recoloured for the drawer's light ground instead of
   the hero's dark one. */
.drawer-cta-note {
  display: block; margin-top: 12px; text-align: center;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500;
  color: var(--gray-warm);
  opacity: 0; transform: translateX(16px);
  transition: opacity 240ms var(--ease) 440ms, transform 240ms var(--ease) 440ms;
}
.drawer-cta-note strong { color: var(--green-deep); font-weight: 700; }
.drawer-cta-note a { color: var(--orange-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.drawer.open .drawer-cta { opacity: 1; transform: translateX(0); }
/* Follows the first button in by 40ms, same stagger step the nav links
   above use between each other; the note follows the second button by
   the same step again. */
.drawer.open .drawer-cta-2 { transition-delay: 400ms; }
.drawer.open .drawer-cta-note { opacity: 1; transform: translateX(0); }
/* Home drawer only (no markup elsewhere matches this class): the same
   pages the home nav's anchor links leave out, listed below the CTA. */
.drawer-more { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.drawer-more .eyebrow-marker { margin-bottom: 4px; }
/* The group above are anchors inside the current page; these four are other
   pages, and at identical size, weight and colour the two read as one list.
   Demoted on four small axes at once (a step down in size and weight, the
   existing muted --gray-warm instead of the near-black --green-deep, and
   tighter rows) so the difference registers at a glance without a second
   accent colour. --gray-warm measures 5.94:1 on the drawer's --cream-light,
   so it clears AA at this size. Hover still resolves to the shared
   .drawer-nav a:hover, so both groups highlight the same way. */
.drawer-more .drawer-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-warm);
  padding: 11px 2px;
}
/* ---- Drawer: the offer, on a phone ------------------------------------
   The desktop mega menu carries all seven product pages with their prices;
   the drawer carried none of them, so on a phone the only way to a product
   page was through the Services page. These groups put the same rows, the
   same labels and the same prices in the drawer, stacked instead of
   columned. Icons follow the .di-* mask convention already used above, so
   a row's mark inherits the row's colour and its hover for free. */
/* Everything below the two buttons is a second register: the rows above
   are where you are and where you can go, these are what the site sells.
   A step down in size (15px against the primary nav's 17px) marks the
   break without a second colour, keeps the longest label, Website &
   Strategy, on one line beside its price, and buys back the height the
   two groups and the fold added to the drawer. */
.drawer-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.drawer-group .drawer-nav a { font-size: 15px; padding: 13px 2px; }
.drawer-group .eyebrow-marker { margin-bottom: 4px; }
/* Pushed to the trailing edge of its row. flex:0 0 auto keeps the amount
   whole and lets the label take the squeeze on a narrow phone, which is
   the right way round: a truncated label is still readable, half a price
   is not. */
.dn-price {
  margin-left: auto; padding-left: 10px; flex: 0 0 auto;
  /* The price reads at the row's own size: it is the second half of what
     the row says, not an annotation on it. */
  font-family: var(--font-body); font-size: inherit; font-weight: 700;
  color: var(--gray-warm); font-variant-numeric: tabular-nums;
}
/* Care and Website are quoted from a floor. Same "from" the mega menu and
   the services tiles print, at the smaller of the two sizes so it reads as
   a qualifier on the number rather than part of it. */
.dn-price .from {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin-right: 3px;
}
/* Thai drawer only. The product names stay in English everywhere (they are
   what the receipt and the confirmation e-mail say), but here they sit
   bare, with none of the eyebrow and lead that frame them on the cards, so
   a short Thai line of function goes under each. Wrapping the row lets the
   price keep the name's line while the sub-line takes the next, indented
   past the icon (16px mask + 10px gap). */
.drawer-nav a:has(.dn-sub) { flex-wrap: wrap; }
.dn-sub {
  flex: 0 0 100%; order: 3; padding-left: 26px; margin-top: -10px;
  font-size: 12px; font-weight: 400; color: var(--gray-warm); line-height: 1.3;
}
/* Nine guides would be a wall to scroll past on the way to anything else,
   so the four that actually bring search traffic are listed and the rest
   are one tap away. A <details> rather than a script: the drawer has to
   work before any JS runs, and the browser gives the open/closed state,
   the keyboard behaviour and the ARIA for nothing. */
.drawer-guides { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.drawer-guides > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 2px; border-bottom: 1px solid var(--line);
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  color: var(--green-deep); cursor: pointer;
  list-style: none; -webkit-tap-highlight-color: transparent;
}
.drawer-guides > summary::-webkit-details-marker { display: none; }
.drawer-guides > summary:hover { color: var(--orange-text); }
/* The chevron is the affordance that says this row opens rather than
   navigates, which no other row in the drawer does. */
.drawer-guides > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 16px; height: 16px;
  background-color: currentColor; opacity: 0.6;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transition: transform 200ms var(--ease);
}
.drawer-guides[open] > summary::after { transform: rotate(180deg); }
/* Inside the fold the rows are demoted the same way .drawer-more demotes
   its four, so the guides never compete with the offer above them. */
.drawer-guides .drawer-nav a { font-size: 15px; font-weight: 600; color: var(--gray-warm); padding: 11px 2px; }
.di-audit     { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E"); }
.di-rebuild   { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h5L20 9a2.8 2.8 0 0 0-4-4L5 16Z'/%3E%3Cpath d='m14 7 3 3'/%3E%3C/svg%3E"); }
.di-setup     { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
.di-care      { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 4v4h-4'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 20v-4h4'/%3E%3C/svg%3E"); }
.di-website   { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18'/%3E%3C/svg%3E"); }
.di-toolbox   { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h5v16H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M14 4h5a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-5Z'/%3E%3C/svg%3E"); }
.di-pack      { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21v-7M5 10V3M12 21v-10M12 7V3M19 21v-5M19 12V3'/%3E%3Cpath d='M2 14h6M9 7h6M16 16h6'/%3E%3C/svg%3E"); }
.di-guide     { --di-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E"); }
body.drawer-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-overlay, .drawer-nav a, .drawer-cta, .drawer-cta-note { transition: none !important; }
}

/* ============================================================
   ARTICLE TEMPLATE (resources articles) — TOC + enhanced layout
   Presentation only — wraps existing .article-body content.
   ============================================================ */
.article-layout { background: var(--cream-light); padding: 56px 0 80px; }
.article-layout .container { max-width: 1100px; }
.article-grid { display: block; }
@media (min-width: 1024px) {
  .article-grid {
    display: grid; grid-template-columns: 240px 1fr;
    gap: 56px; align-items: start;
  }
}

/* Article header (tags, meta) sits above the grid */
.article-head { max-width: 760px; margin-bottom: 8px; }
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.article-tag {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-card); line-height: 1; white-space: nowrap;
}
.article-tag-cat { background: rgba(232, 112, 31,0.14); color: var(--orange); }
.article-tag-type { background: var(--cream-warm); color: var(--gray-warm); }

/* TOC sidebar */
.article-toc { display: none; }
@media (min-width: 1024px) {
  .article-toc {
    display: block; position: sticky; top: 90px;
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}
.article-toc-title {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange);
  margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.article-toc-list { list-style: none; padding: 0; margin: 0; }
.article-toc-list li { margin-bottom: 4px; }
.article-toc-list a {
  display: block; padding: 5px 0 5px 12px;
  border-left: 2px solid transparent;
  color: var(--gray-warm); text-decoration: none;
  font-size: 13.5px; line-height: 1.45;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), padding-left 180ms var(--ease);
}
.article-toc-list a:hover { color: var(--orange-text); padding-left: 15px; }
.article-toc-list a.active { color: var(--green-deep); border-left-color: var(--orange); font-weight: 600; }
.article-toc-share { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.article-toc-share-title {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-soft); margin-bottom: 8px;
}
.article-toc-share a {
  display: block; color: var(--gray-warm); font-size: 13px;
  text-decoration: none; padding: 4px 0; transition: color 180ms var(--ease);
}
.article-toc-share a:hover { color: var(--orange-text); }

/* Mobile TOC (collapsible) */
.article-toc-mobile {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 6px 18px; margin-bottom: 28px;
}
@media (min-width: 1024px) { .article-toc-mobile { display: none; } }
.article-toc-mobile summary {
  list-style: none; cursor: pointer; padding: 12px 0;
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange);
  display: flex; align-items: center; justify-content: space-between;
}
.article-toc-mobile summary::-webkit-details-marker { display: none; }
.article-toc-mobile summary::after { content: '+'; font-size: 18px; color: var(--green-deep); }
.article-toc-mobile[open] summary::after { content: '\2212'; }
.article-toc-mobile ol { margin: 0 0 14px; padding-left: 20px; }
.article-toc-mobile li { margin-bottom: 6px; font-size: 14px; }
.article-toc-mobile a { color: var(--green-deep); text-decoration: none; }
.article-toc-mobile a:hover { color: var(--orange-text); }

/* enriched meta row inside article header */
.article-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--gray-soft); letter-spacing: 0.02em;
  margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line);
}
.article-meta span { display: inline-flex; align-items: center; gap: 7px; }

/* scroll offset so anchored headings aren't hidden under sticky header */
.article-body h2[id] { scroll-margin-top: 88px; }

/* Auto-numbered H2 badges (visual only — counts h2[id] in order) */
.article-body { counter-reset: artsec; }
.article-body h2[id] {
  counter-increment: artsec;
  position: relative;
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.article-body h2[id]::before {
  content: counter(artsec, decimal-leading-zero);
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange);
  background: rgba(232, 112, 31,0.12);
  padding: 5px 10px; border-radius: var(--radius-card);
  margin-bottom: 14px;
  vertical-align: middle;
}
.article-body h2[id]::before { display: block; width: fit-content; }
/* first h2 keeps a top border too — looks intentional and clean */

/* H3 sub-labels a touch tighter under their section */
.article-body h3 { margin-top: 28px; }

/* Enriched article sections between the numbered steps — no auto-number badge */
.article-body h2[id].art-h2-plain { counter-increment: none; }
.article-body h2[id].art-h2-plain::before { content: none; }

/* Comparison table (token-styled; scrolls horizontally on mobile, never overflows) */
.article-table-wrap { overflow-x: auto; margin: 0 0 28px; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-card); }
.article-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 14px; min-width: 660px; }
.article-table th, .article-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; color: var(--ink); }
.article-table thead th { background: var(--green-deep); color: var(--cream-light); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody tr:nth-child(even) { background: var(--cream); }
.article-table td strong { color: var(--green-deep); }

/* "How to..." style intro lines (strong-led list items) read as labels already via existing strong color */

/* end CTA — colored panel */
.article-cta-panel {
  background: var(--green-deep); color: var(--cream-light);
  border-radius: var(--radius-card); padding: 48px 40px; margin-top: 20px;
  text-align: center;
}
.article-cta-panel h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1.1; color: var(--cream-light);
  margin: 0 0 12px; letter-spacing: -0.016em;
}
.article-cta-panel h2 em { font-style: italic; color: var(--orange-bright); }
.article-cta-panel p {
  font-size: 15px; line-height: 1.6; color: rgba(247, 244, 237,0.78);
  max-width: 540px; margin: 0 auto 24px;
}
.article-cta-panel .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.article-cta-panel .btn-ghost { color: var(--cream-light); border-color: rgba(247, 244, 237,0.4); }
.article-cta-panel .btn-ghost:hover { background: var(--cream-light); color: var(--green-deep); }

/* Stickers reused on article related cards */
.related-card .res-stickers { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.res-sticker {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-card); line-height: 1; white-space: nowrap;
}
.res-sticker-type { background: var(--cream-warm); color: var(--gray-warm); }
.res-sticker-start  { background: rgba(14,75,44,0.10);  color: var(--green-deep); }
.res-sticker-rank   { background: rgba(232, 112, 31,0.14); color: var(--orange); }
.res-sticker-profit { background: rgba(196,95,31,0.14);  color: var(--orange); }
.res-sticker-win    { background: rgba(14,75,44,0.10);   color: var(--green); }

/* The primary button on the dark CTA panel: .btn-primary already carries
   this colour, and the !important that used to sit here was compensating
   for .article-body a, now excluded above. Kept as a plain rule so the
   panel is explicit about its own contrast. */
.article-cta-panel .btn-primary,
.inline-cta .btn-primary { color: var(--cream-light); }

/* ============================================================
   NEWSLETTER (article / global)
   ============================================================ */
.newsletter { background: var(--cream-warm); padding: 72px 0; text-align: center; }
.newsletter .container { max-width: 640px; }
.newsletter .eyebrow {
  display: block; margin-bottom: 14px;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--orange); font-weight: 700;
}
.newsletter h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 34px; line-height: 1.05; color: var(--green-deep);
  letter-spacing: -0.016em; margin: 0 0 12px;
}
.newsletter p { font-size: 15.5px; line-height: 1.6; color: var(--gray-warm); margin: 0 0 26px; }
.newsletter-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.newsletter-input {
  flex: 1 1 300px; max-width: 380px;
  padding: 14px 18px; font-size: 15px; font-family: var(--font-body);
  background: var(--cream-light); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
}
.newsletter-input:focus { border-color: var(--orange); }
.newsletter-note { font-size: 12.5px; color: var(--gray-soft); margin: 16px 0 0; }

/* ============================================================
   ARTICLE — VARIED CONTENT LAYOUTS (presentation only)
   ============================================================ */
/* Card grids */
.article-body ul.art-cards {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; gap: 14px;
}
.article-body ul.art-cards-2 { grid-template-columns: repeat(2, 1fr); }
.article-body ul.art-cards-3 { grid-template-columns: repeat(3, 1fr); }
.article-body ul.art-cards li {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 20px 22px;
  margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--gray-warm);
}
.article-body ul.art-cards li strong { display: block; margin-bottom: 4px; color: var(--green-deep); }
.article-body ul.art-cards-emoji li { font-size: 14px; }

/* Row cards (5-item spine) — emoji lead, left orange accent */
.article-body ul.art-rows { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.article-body ul.art-rows li {
  background: var(--cream); border: 1px solid var(--line);
  border-left: 3px solid var(--orange); border-radius: var(--radius-card);
  padding: 16px 20px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--gray-warm);
}
.article-body ul.art-rows li strong { color: var(--green-deep); }

/* Label boxes (Win the click) */
.article-body ul.art-boxes { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.article-body ul.art-boxes li {
  background: var(--cream-warm); border-radius: var(--radius-card);
  padding: 18px 22px; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gray-warm);
}
.article-body ul.art-boxes li strong {
  display: inline-block; color: var(--orange); text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.14em; margin-right: 8px;
}

/* Timeline (4-week sprint) */
.article-body ul.art-timeline { list-style: none; padding: 0 0 0 28px; margin: 0 0 28px; position: relative; }
.article-body ul.art-timeline::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line-strong);
}
.article-body ul.art-timeline li {
  position: relative; margin: 0 0 16px; padding: 0 0 0 6px;
  font-size: 15px; line-height: 1.6; color: var(--gray-warm);
}
.article-body ul.art-timeline li::before {
  content: ''; position: absolute; left: -28px; top: 5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--orange); border: 3px solid var(--cream-light);
}
.article-body ul.art-timeline li strong { color: var(--green-deep); }

/* Shortlists grid (2x2 concepts) */
.art-shortlists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0 0 28px; }
.art-shortlist {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 22px 24px;
}
.art-shortlist h3 { margin: 0 0 12px !important; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.art-shortlist ul { list-style: none; padding: 0; margin: 0; }
.art-shortlist ul li { font-size: 13.5px; line-height: 1.5; margin: 0 0 8px; color: var(--gray-warm); }
.art-shortlist ul li strong { color: var(--green-deep); }

/* Snippet boxes (copy blocks) */
.article-body ul.art-snippets { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.article-body ul.art-snippets li {
  background: var(--cream); border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-card); padding: 16px 20px; margin: 0;
  font-size: 14px; line-height: 1.55; font-style: italic; color: var(--gray-warm);
}
.article-body ul.art-snippets li strong { color: var(--green-deep); font-style: normal; }

@media (max-width: 760px) {
  .article-body ul.art-cards-2,
  .article-body ul.art-cards-3,
  .art-shortlists { grid-template-columns: 1fr; }
}

/* Mobile: tighten gaps (hero→TOC, article→CTA) */
@media (max-width: 760px) {
  .article-layout { padding: 12px 0 48px; }
  .article-cta-panel { margin-top: 24px; padding: 36px 26px; }
  .article-toc-mobile { margin-bottom: 20px; }
}

/* CTA panel inside grid: force column 2 (desktop), aligned with article content */
@media (min-width: 1024px) {
  .article-grid > .article-cta-panel { grid-column: 2; }
}

/* Align article content top with TOC top */
.article-body > *:first-child { margin-top: 0; }
.article-body > p:first-of-type { margin-top: 0; }
@media (min-width: 1024px) {
  /* content and TOC both start at grid top; kill any inherited offset */
  .article-body { padding-top: 0; }
}


/* ============================================================
   PRODUCT PAGES (.prod-*) — shared block across /products/the-method/,
   /products/method-toolbox/ and /products/full-stack/. Moved here from
   their inline <style> blocks (identical on all three pages).
   ============================================================ */
.prod-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "text   right"
    "book   right";
  gap: 48px 56px;
  align-items: start;
  margin-top: 8px;
}
.prod-hero-text  { grid-area: text; }
.prod-hero-book  { grid-area: book; display: flex; justify-content: center; align-items: flex-start; }
/* The three service pages (audit, setup, rebuild) show a mockup of the
   deliverable here instead of the book cover the digital tiers use. Same
   350px footprint as .book so the grid column is unchanged; the shadow
   is applied here rather than inside the SVG, where the viewBox would
   clip it. */
.prod-hero-mock { width: 350px; max-width: 100%; height: auto; display: block; border-radius: var(--radius-card); filter: drop-shadow(0 24px 34px rgba(9, 56, 34, 0.26)); }
/* "Digital · instant download" callout at the top of the product "What's included" box */
.prod-digital-note {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 14px; padding: 9px 13px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1.4;
  color: var(--green-deep); background: rgba(232, 112, 31, 0.10);
  border: 1px solid rgba(232, 112, 31, 0.28); border-radius: var(--radius-card);
  letter-spacing: 0.01em;
}
.prod-digital-note span { color: var(--orange); flex: 0 0 auto; }
/* Full Stack scope line: what one purchase covers, distinct from a bullet. */
.prod-scope-note { margin: 14px 0 0; padding: 9px 13px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.4; color: var(--gray-warm); background: rgba(232, 112, 31, 0.10); border: 1px solid rgba(232, 112, 31, 0.28); border-radius: var(--radius-card); }
.prod-scope-note-buybox { margin-top: 10px; }
.prod-hero-right { grid-area: right; display: flex; flex-direction: column; gap: 20px; }
.prod-hero-text h1 { margin-top: 0; }
/* book keeps its native homepage size */
@media (max-width: 900px) {
  .prod-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "book"
      "right";
    gap: 32px;
  }
}

.prod-ribbon {
  display: inline-block;
  background: var(--orange); color: var(--cream-light);
  font-family: var(--font-body); font-weight: 700; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-card);
  margin-bottom: 14px;
}

.prod-includes-wrap {
  background: var(--cream-light); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 22px 26px 24px;
}
.prod-includes-title {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 14px;
}
.prod-includes { list-style: none; padding: 0; margin: 0; }
.prod-includes li {
  position: relative; padding: 10px 0 10px 26px;
  border-bottom: 1px dashed var(--line);
  font-size: 14px; line-height: 1.55; color: var(--ink);
}
.prod-includes li:last-child { border-bottom: none; }
.prod-includes li::before {
  content: '\2713'; position: absolute; left: 0; top: 10px;
  color: var(--orange); font-weight: 700;
}
.prod-includes li strong { color: var(--green-deep); font-weight: 700; }

/* Chapters/contents card in the right column (cream, matches the others) */
.prod-chapters-card {
  background: var(--cream-light); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 22px 26px 24px;
}
.prod-chapters-title {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 16px;
}
.prod-chapters-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.prod-chapter {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--green-deep); line-height: 1.2;
}
.prod-chapter b {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 20px; color: var(--orange); line-height: 1;
  width: 20px; text-align: center; flex-shrink: 0;
}

.prod-buy-box {
  background: var(--cream-light); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 26px 28px 22px;
}
/* Optical pass on the price row: a flat 14px gap between every item treated
   the strikethrough, the price and the "one-time" caption as equally
   weighted, when the strikethrough+price are really one unit and the
   caption (and the pill, below) are supplementary to it. Base gap is
   tightened and the two supplementary items get their own left margin
   back, so the row reads as one considered mark, not four evenly-spaced
   pieces. */
.prod-buy-price {
  font-family: var(--font-display); font-weight: 900;
  font-size: 56px; line-height: 1;
  color: var(--green-deep); letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 0 0 20px;
}
.prod-buy-price sup {
  /* Nudged down from the browser default super offset (which reads too
     high against a 56px numeral) so the $ sits close to the numeral's own
     cap height instead of floating above it. */
  font-size: 24px; vertical-align: 4px; line-height: 1;
  margin-right: 2px; font-weight: 700;
}
.prod-buy-once {
  font-family: var(--font-body); font-weight: 500;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--gray-warm); text-transform: none;
  margin-left: 5px;
}
.prod-buy-regular {
  font-family: var(--font-body); font-weight: 600; font-size: 22px;
  color: var(--gray-warm); text-decoration: line-through;
  text-decoration-thickness: 2px; opacity: 0.6; margin-right: 0.1em;
}
.prod-buy-btn { width: 100%; justify-content: center; padding: 14px 22px; font-size: 15px; }
/* Local-currency hint next to a USD sale price (display only; painted by locale-price.js).
   Still used by the "other products" cross-sell cards further down each
   product page; the buy box itself now uses .price-local below instead. */
.prod-local { display: inline-block; margin-left: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--gray-warm); letter-spacing: 0.01em; white-space: nowrap; }
/* An author display value outranks the UA sheet's [hidden] rule, so restate it. */
.prod-local[hidden] { display: none; }
/* Buy box local-currency pill: identical rule to the home pricing cards'
   .price-local (index.html's own inline <style>), copied rather than
   shared, same convention the onboarding page already uses for CSS it
   borrows from the services configurator. --green already clears AA (and
   AAA) against this pill's own background regardless of the page behind
   it, so no darker token is needed here. */
/* Shrink-to-fit wherever it lands. Inside a swap panel it is ordinary
   flow and sizes to its text; as a direct child of the card it is a flex
   item, which blockifies it and stretches it across the whole column,
   which is why it ran full width on the Renovation card alone. */
.price-local { display: inline-block; align-self: start; width: fit-content; font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--green); background: rgba(14, 75, 44, 0.07); border: 1px solid rgba(14, 75, 44, 0.16); border-radius: var(--radius-card); padding: 3px 11px; margin-top: 6px; letter-spacing: 0.01em; }
.price-local[hidden] { display: none; }
/* Buy box only: the pill now sits inside .prod-buy-price's own flex row
   (baseline-aligned, wraps under the price on narrow widths) instead of on
   its own line below, so its standalone top margin is reset here rather
   than removed from the shared rule above, which home's separate,
   still-standalone .price-local continues to rely on. Left margin matches
   .prod-buy-once above: same "supplementary item, not part of the tight
   strikethrough+price pair" treatment. */
/* And on the row's own baseline: the pill carries align-self:start from the
   standalone rule, which parked it at the top of a 56px line while "per
   platform" sat on the numeral's baseline. */
.prod-buy-price .price-local { margin-top: 0; margin-left: 5px; align-self: baseline; }

/* Shared with home's own copy of this rule (index.html's inline <style>):
   identical values. Still needed here for Full Stack's own scarcity
   sub-line (.price-sub.price-sub-italic) even though the buy box no
   longer has a condensed list of its own to use it for. */
.price-sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--gray-warm); }
.prod-pay-note { font-family: var(--font-body); font-size: 11.5px; color: var(--gray-warm); margin: 10px 0 0; letter-spacing: 0.01em; }
/* Local-currency hint appended to a CTA button label (painted by locale-price.js) */
.btn-local { font-weight: 600; opacity: 0.88; font-size: 0.94em; }
/* ============ PAY OPTIONS (card or crypto) ============
   Used twice per product page: inside .prod-buy-box (on --cream-light) and
   inside .final-cta-actions (on --cream-warm).

   Each method gets its own bordered surface so the pair reads as two
   alternatives rather than one stack of buttons. --cream sits a step apart
   from both surfaces the blocks land on, which is what separates them without
   introducing a colour. */
.pay-options { display: flex; flex-direction: column; gap: 12px; }
/* Only ever toggled in the home pricing modal, where .pay-options is view
   one (the choice) and .pay-crypto-panel.pay-choice below is view two (the
   crypto form): same author-display-outranks-[hidden] trap as that panel
   already has to opt back out of. */
.pay-options[hidden] { display: none; }
.pay-option {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.pay-option > .btn { width: 100%; justify-content: center; }
/* Buy box only: two attempts at making the crypto path quiet without its
   own box both read as a footnote attached to the card option above it —
   spacing and hairlines don't fix that, only a boundary of its own does.
   Third approach: it gets a real box again, same border and radius as the
   card option, but visually lighter so the pair still reads as
   primary/subordinate rather than two equal choices: transparent instead
   of --cream (the card option's fill), and 12px padding instead of 16px.
   No intro line — reusing the pattern is what tells the reader this is a
   second, deliberate option now, and the button's own label already says
   what it does, so a lead-in question would only repeat that. Not
   applied to the final CTA's copy of this same markup, which keeps both
   options in their original, equal-weight boxed treatment. */
.pay-crypto-quiet {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.pay-crypto-toggle-quiet {
  display: inline-flex; align-self: flex-start;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  /* --ink on --cream-light (the buy box's own background) measures
     16.4:1, versus 5.9:1 for --gray-warm this replaced. */
  color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
}
.pay-crypto-toggle-quiet:hover { color: var(--orange-text); }
/* .pay-option-note is shared with the card option's "Secure checkout via
   Stripe" trust line above, which stays --gray-warm as before; only this
   context's copy (the crypto note) is darkened, same token and same
   16.4:1 figure as the link above it. */
.pay-crypto-quiet .pay-option-note { color: var(--ink); }
/* Trust line: lock + "Secure checkout via Stripe" on the left, the card
   marks pushed to the right, one row. The note's own natural (unwrapped)
   width plus the marks plus the gap needs about 317px of content room; the
   row wraps to two lines, not overflows, once its container gives it less
   than that, since .pay-option-note is itself a flex row that can shrink.
   Measured per context, not assumed from viewport alone:
   - Home pricing modal (.pay-modal-dialog, max-width 420px): row fits from
     ~375px viewport.
   - Product buy box (.prod-buy-box, fluid with its column): row fits from
     ~392px viewport.
   - Product final CTA (.pay-options-cta, max-width 380px, see below):
     confirmed fitting at 401px viewport (just above the shared breakpoint)
     with no wrap, same order as the other two now that the card itself has
     enough content room.
   400px covers all three with a small margin, so it is the shared
   breakpoint below which this reverts to the original stacked, centered
   layout instead of shrinking anything. */
.pay-trust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-option-note {
  display: flex; align-items: center; gap: 5px;
  margin: 0; font-size: 12px; line-height: 1.45;
  color: var(--gray-warm); text-align: left;
}
/* Sourced inline like the nav chevron and the reassurance glyphs above:
   same stroke-based 24x24 convention, currentColor, no new colour or
   external asset. Muted by inheriting the note's own --gray-warm. */
.pay-lock-ico { width: 12px; height: 12px; flex: 0 0 auto; }
/* Accepted card marks, self-hosted (assets/img/payment/), official artwork,
   not redrawn. Small and uncoloured beyond what each mark already is, no
   border or background of their own, so they read as reassurance rather
   than a second row of UI. */
.pay-marks { display: flex; align-items: center; gap: 10px; margin: 0; flex: 0 0 auto; }
.pay-marks img { display: block; height: 18px; width: auto; }
/* Box-level centering (align-items: center above) isn't the same as optical
   centering: measured at 8x zoom, Visa and Amex's artwork fills roughly
   the full 18px box, but Mastercard's two circles (its dominant visual
   weight) occupy only the upper ~65%, with the wordmark trailing below —
   so even though all three <img> boxes sit at an identical, verified
   getBoundingClientRect() top/bottom, Mastercard's actual ink reads high
   against the lock note beside it. Nudged down 1px to compensate. The
   artwork itself is untouched (still the official, unredrawn asset). */
.pay-marks img[alt="Mastercard"] { margin-top: 1px; }
@media (max-width: 400px) {
  .pay-trust { flex-direction: column; gap: 2px; }
  /* Only the trust row centres when it stacks, so the lock line sits over
     the card marks. Unscoped, this also caught the crypto notes, which are
     paragraphs in a left-aligned block: the label above them stayed left
     and the line under them drifted to the middle. */
  .pay-trust .pay-option-note { justify-content: center; }
  .pay-marks { justify-content: center; }
}
/* Widened from 320 to 380px so the trust row above has enough content room
   (~348px) to fit on one line here too, same as the buy box and the modal,
   instead of being permanently stacked in this context alone. */
.pay-options-cta { min-width: 260px; max-width: 380px; }

/* Desktop only: the two payment options read as a pair (card vs. crypto),
   equal width, equal height, instead of one narrow stacked column with a
   lot of dead space below each button. 900px matches the breakpoint
   tokens.css already uses for the same "mobile layout below this, desktop
   above" split (its own font-size/spacing overrides switch at the same
   width), so nothing new is introduced, this reuses the site's existing
   line. .pay-crypto-swap is capped here (not .pay-options-cta alone) so
   the crypto view, once swapped in as a single form rather than two
   columns, keeps the same width the pair had: only height animates on
   swap, never width. 740px was measured, not guessed: it gives each
   column enough room (~340px of actual content) to clear the ~317-348px
   the card's trust row (lock note + three card marks) needs to stay on
   one line, confirmed in the rendered page, not assumed from the CSS
   comment above alone. */
@media (min-width: 900px) {
  .final-cta-actions-pay .pay-crypto-swap { max-width: 740px; }
  .final-cta-actions-pay .pay-options-cta {
    flex-direction: row;
    align-items: stretch;
    max-width: none;
  }
  .final-cta-actions-pay .pay-options-cta .pay-option {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* .final-cta-actions is shared with the home page, where it holds two plain
   buttons side by side. Here the two payment options belong together as one
   choice, and the "Or see X" link is a subordinate, secondary path, not a
   third co-equal item, so this modifier stacks it below rather than beside.
   32px is deliberately well past .pay-options' own 12px internal gap (an
   existing spacing value already used elsewhere, e.g. the footer grid and
   the services how-it-works grid), so the grouping (payment options close
   together, link set apart) reads at a glance, not on inspection. Applied
   only on the product pages. */
.final-cta-actions-pay { flex-direction: column; align-items: center; gap: 32px; }

/* .pay-choice carries data-product and is the hook crypto-checkout.js queries.
   In the home modal it is paired with .pay-crypto-panel (below); on the
   product pages it is paired with .pay-view-crypto (further below). */

/* ============ PRODUCT-PAGE CRYPTO VIEW SWAP ============
   The home modal can freely change height when it swaps views: it floats
   over the page. These six blocks (buy box + final CTA, three product
   pages) sit in the page's own flow, so an instant height change on swap
   would jump everything below them.

   .pay-crypto-swap wraps the WHOLE payment choice, both rails, not just the
   crypto option: .pay-view-choice holds a full .pay-options (the card
   option and the crypto option, side by side, exactly as before this
   existed) and .pay-view-crypto holds the crypto form. Swapping to crypto
   therefore hides the card option too, not just the button that opened it.
   (An earlier version nested .pay-crypto-swap one level too deep, inside
   .pay-options next to the card option instead of around it, so the card
   stayed on screen next to the crypto form. This is that fixed.)
   .pay-crypto-swap itself carries no border or background of its own now:
   .pay-view-choice's card look comes from .pay-options' own .pay-option
   children as always, and .pay-view-crypto gets an equivalent card treatment
   directly so the crypto view still reads as a bordered card once swapped in.

   A first pass reserved space for both views permanently (a grid with both
   stacked in one cell, toggled by visibility) so .pay-crypto-swap was
   always as tall as the taller of the two. Measured: the crypto view (email
   field, explanation, two network lines, confirm button) is roughly 2x the
   choice view's height, so that approach left the choice view sitting in a
   box with a very visible dead zone below it, worse than the jump it was
   meant to prevent.

   Animating the height change instead avoids both problems: crypto-checkout.js
   measures the natural height of each view with getBoundingClientRect(),
   locks .pay-crypto-swap to its current height, swaps which view is
   [hidden], then transitions height to the new view's natural height, and
   clears the inline height back to auto once the transition ends so a later
   resize is not left locked to a stale pixel value. The swap is still
   visible happening, by design, just smoothly rather than as a jump; the
   card never sits taller than whichever view is actually showing. Because
   this uses the [hidden] attribute after all, and .pay-view-choice /
   .pay-view-crypto both carry their own author display:flex, they need the
   same explicit opt-out as .pay-options and .pay-crypto-panel above, or
   they render open regardless of the attribute. */
.pay-crypto-swap {
  position: relative; overflow: hidden;
  transition: height 240ms var(--ease);
}
@media (prefers-reduced-motion: reduce) { .pay-crypto-swap { transition: none; } }
/* The height animates, the incoming view did not: it appeared in one frame
   at full opacity, which is the abrupt part. [hidden] means there is nothing
   for a transition to interpolate, so this is a keyframe animation, which
   does run on the frame the view starts being displayed. */
@keyframes pay-view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.pay-view-choice:not([hidden]), .pay-view-crypto:not([hidden]) { animation: pay-view-in 200ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .pay-view-choice:not([hidden]), .pay-view-crypto:not([hidden]) { animation: none; }
}
/* Buy box only: one considered break between "what it costs" and "how to
   pay" — the same hairline-instead-of-a-box-in-a-box move .pay-crypto-panel
   already uses below. .pay-crypto-swap is a direct child of .prod-buy-box
   here but not in the final CTA (nested inside .final-cta-actions-pay
   instead), so this selector reaches only the buy box copy without a
   separate scoping class. The added padding is measured by
   crypto-checkout.js like the rest of the box's natural height, so it
   doesn't need any special handling in the swap animation. */
.prod-buy-box > .pay-crypto-swap { border-top: 1px solid var(--line); padding-top: 14px; }
.pay-view-choice, .pay-view-crypto { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pay-view-choice[hidden], .pay-view-crypto[hidden] { display: none; }
.pay-view-crypto {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 16px;
}
/* Back sits in normal flow, first in the crypto view, since there is no
   dialog corner to pin it to here and no Escape to fall back on: it has to
   be the obvious, reachable way out on its own. Independent of
   .pay-modal-back (a different, absolutely-positioned context) rather than
   sharing a base class with it, so a future change to one cannot shift the
   other's already-tuned alignment by accident. */
.pay-crypto-back {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start; margin: 0 0 2px;
  padding: 4px 6px; margin-left: -6px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--gray-warm);
}
.pay-crypto-back:hover { color: var(--orange-text); }
.pay-crypto-view-title {
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: var(--green-deep); margin: 0 0 2px;
}

/* The panel already sits inside a bordered block, so it drops its own frame
   and uses a hairline as the separator instead of nesting a box in a box. */
.pay-crypto-panel {
  margin-top: 0;
  padding: 12px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
/* An author display value outranks the display:none the UA stylesheet gives
   [hidden], so the panel has to opt back out explicitly or it renders open on
   page load even though the attribute is set. */
.pay-crypto-panel[hidden] { display: none; }
.pay-crypto-label {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-warm);
}
.pay-crypto-input {
  width: 100%;
  padding: 12px 14px; font-size: 15px; font-family: var(--font-body);
  background: var(--cream-light); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-card);
}
.pay-crypto-input:focus { border-color: var(--orange); }
.pay-crypto-confirm { width: 100%; justify-content: center; }
.pay-crypto-error {
  margin: 0; font-size: 13px; line-height: 1.45;
  color: var(--orange-text); font-weight: 600;
}
.pay-crypto-note {
  margin: 0; font-size: 12px; line-height: 1.45; color: var(--gray-warm);
}
/* Accepted coins and their networks. Same 12px as the note above it, never
   smaller: sending on the wrong chain loses the funds for good, so this is not
   fine print to shrink. The warning half is bold in --orange-text, which
   measures 4.54:1 on the --cream of .pay-option and so clears AA. The brighter
   --orange sits at 2.82:1 and was rejected for this sentence. */
.pay-crypto-networks {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--gray-warm);
}
.pay-crypto-networks strong { color: var(--orange-text); font-weight: 700; }

/* Was a 3-item grid (diagnostic, rebuild, operator-led); the first two
   duplicated what the includes list further up the page already says, so
   they were retired. Operator-led doesn't overlap with that list (it says
   who does the work, not what's delivered), so it stays here on its own
   as a single line, the grid it needed for three items gone with them.

   It sits below both payment options and applies to the purchase as a
   whole, not to either one, so kept here at the bottom rather than moved
   next to the price (which would put it in competition with the scarcity
   badge and scope note already there) — but given its own hairline and
   darkened to read as a deliberate closing note on the box, not a stray
   line trailing off the last payment option. Same hairline-separator
   recipe and same --ink token as the price/payment-zone divider and the
   crypto option's own darkened text above, 16.4:1 against --cream-light,
   measured the same way. */
.prod-trust {
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink); line-height: 1.4;
}

.prod-details { background: var(--cream-light); padding: 96px 0; }
.prod-details-header { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.prod-details-header .eyebrow-marker { margin-bottom: 18px; justify-content: center; }
.prod-details-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 40px; line-height: 1.05;
  color: var(--green-deep); margin: 0 0 14px; letter-spacing: -0.018em;
}
.prod-details-header h2 em { font-style: italic; color: var(--orange); }
.prod-details-header p { font-size: 16px; color: var(--gray-warm); line-height: 1.6; margin: 0; }
.prod-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .prod-details-grid { grid-template-columns: 1fr; } }
.prod-detail-card {
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 28px 24px;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}
.prod-detail-card:hover { transform: translateY(-4px); border-color: var(--orange); }
.prod-detail-num {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.18em; color: var(--orange); margin-bottom: 14px;
}
.prod-detail-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 20px; color: var(--green-deep);
  letter-spacing: -0.012em; margin: 0 0 10px; line-height: 1.2;
}
.prod-detail-card p { font-size: 14px; line-height: 1.6; color: var(--gray-warm); margin: 0; }

.prod-other { background: var(--cream); padding: 88px 0; }
.prod-other-header { text-align: center; margin-bottom: 40px; }
.prod-other-header .eyebrow-marker { margin-bottom: 18px; justify-content: center; }
.prod-other-header h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 32px; color: var(--green-deep);
  letter-spacing: -0.018em; margin: 0;
}
/* One card or two, depending on what the ladder says comes next: a fixed
   two-column grid left a single card holding half a row. */
.prod-other-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; max-width: 880px; margin: 0 auto;
}
@media (max-width: 768px) { .prod-other-grid { grid-template-columns: 1fr; } }
.prod-other-card {
  background: var(--cream-light); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.prod-other-card:hover { transform: translateY(-3px); border-color: var(--orange); }
.prod-other-card .price {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 22px; color: var(--orange-text); line-height: 1;
}
.prod-other-card h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--green-deep);
  margin: 0; letter-spacing: -0.012em;
}
.prod-other-card p { font-size: 14px; line-height: 1.55; color: var(--gray-warm); margin: 0; flex: 1; }
.prod-other-cta {
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  color: var(--orange-text); margin-top: 6px; letter-spacing: 0.02em;
}

/* ============ FLOATING CONTACT BAR (shared on all pages) ============ */
.contact-fab { position: fixed; right: 20px; bottom: 20px; z-index: 96; display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: #fff; padding: 8px; border-radius: var(--radius-card); box-shadow: 0 8px 26px rgba(9, 56, 34, .22); border: 1px solid rgba(9, 56, 34, .06);
  opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.contact-fab.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
/* The cream ring keeps every bubble legible on BOTH canvases: over cream
   sections it blends away and the dark fill carries the contrast, over the
   deep-green footer it outlines the bubble (which would otherwise sit at
   ~1.2:1 against --green-darker and vanish). */
.cfab { width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform .18s ease;
  box-shadow: 0 0 0 2px rgba(247, 244, 237, .92); }
.cfab:hover { transform: scale(1.07); }
.cfab svg { width: 25px; height: 25px; display: block; fill: #fff; }
.cfab-wa { background: #25D366; }     /* WhatsApp brand */
.cfab-line { background: #06C755; }   /* LINE brand */
.cfab-mail { background: var(--green-deep); }
.cfab-items { display: flex; flex-direction: column; align-items: center; gap: 9px; }
/* Speed-dial trigger — hidden on desktop, shown on mobile (see media query below) */
.cfab-toggle { display: none; width: 56px; height: 56px; padding: 0; border: none; border-radius: 50%; cursor: pointer; background: var(--green-deep); color: var(--offwhite); box-shadow: 0 0 0 2px rgba(247, 244, 237, .92), 0 8px 26px rgba(9, 56, 34, .28); align-items: center; justify-content: center; }
.cfab-toggle svg { width: 26px; height: 26px; display: block; fill: currentColor; }
/* Mobile: collapse the 3-icon stack into a single speed-dial bubble */
@media (max-width: 900px) {
  .contact-fab { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); gap: 0; padding: 0; background: none; box-shadow: none; border: none; }
  .cfab { width: 46px; height: 46px; }
  .cfab-toggle { display: inline-flex; }
  .cfab-items { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); gap: 12px; }
  .cfab-items .cfab { opacity: 0; transform: translateY(10px) scale(0.92); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
  .contact-fab.is-open .cfab-items .cfab { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
  .contact-fab.is-open .cfab-items .cfab:nth-child(1) { transition-delay: .08s; }
  .contact-fab.is-open .cfab-items .cfab:nth-child(2) { transition-delay: .04s; }
  .contact-fab.is-open .cfab-items .cfab:nth-child(3) { transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .contact-fab, .cfab-items .cfab { transition: none; } }

/* ============ KEYBOARD FOCUS (WCAG 2.4.7) ============ */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ============ PAYMENT METHOD MODAL (home pricing) ============
   The pricing buttons are real Stripe anchors that JS upgrades into a chooser.
   One instance is reused by the three tiers, so ids stay unique on the page. */
.pay-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* Opens with a quick fade + rise rather than a hard cut from nothing
     to fully there. .is-open is added a frame after [hidden] comes off
     (see crypto-checkout.js), so the browser has a from-state to
     transition out of; toggling both in the same frame would just jump
     straight to the end state with nothing to animate. */
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.pay-modal.is-open { opacity: 1; }
/* display:flex above outranks the display:none the UA stylesheet gives
   [hidden], exactly the trap that left the crypto panel open on load, so the
   modal has to opt back out explicitly. */
.pay-modal[hidden] { display: none; }
.pay-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 37, 24, 0.6);
}
.pay-modal-dialog {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--cream-light);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-lift);
  /* Rides in on the same 160ms as the backdrop fade, from very slightly
     smaller and lower rather than full-size -- big enough to read as
     motion, small enough that "quick" is the whole point. */
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.pay-modal.is-open .pay-modal-dialog { opacity: 1; transform: none; }
/* The modal takes the buy box's shape: the card is the action, crypto is a
   line under a hairline rather than a second button beside it. Two framed
   options at equal weight read as a question the buyer has to answer; one
   action and one quiet alternative reads as a default with an exit.
   The dialog is already a panel on --cream-light, the same ground the buy
   box uses, so the card option drops its own box and the quiet block drops
   the border it only needs when it sits inside a busier card. Contrast
   figures on .pay-crypto-toggle-quiet carry over unchanged. */
.pay-modal-dialog .pay-option { background: transparent; border: 0; border-radius: 0; padding: 0; }
.pay-modal-dialog .pay-crypto-quiet {
  background: transparent; border: 0; border-radius: 0;
  /* 3px on top of .pay-options' own 12px gap makes the 15px the buy box
     puts above its hairline. */
  padding: 15px 0 0; margin-top: 3px;
  border-top: 1px solid var(--line); gap: 4px;
}
.pay-modal-dialog .pay-crypto-toggle-quiet {
  font-size: 12.5px; text-decoration: none;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 1px;
}
.pay-modal-dialog .pay-crypto-toggle-quiet:hover { border-bottom-color: var(--orange); }
.pay-modal-dialog .pay-crypto-quiet .pay-option-note { color: var(--gray-warm); }
@media (prefers-reduced-motion: reduce) {
  .pay-modal, .pay-modal-dialog { transition: none; }
}
.pay-modal-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 24px; line-height: 1;
  color: var(--gray-warm);
}
.pay-modal-close:hover { color: var(--green-deep); }
.pay-modal-back {
  /* Mirrors .pay-modal-close exactly (top:10px, 12px inset), so the two
     read as one row: a back control on the left, a close control on the
     right. */
  position: absolute; top: 10px; left: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  color: var(--gray-warm);
}
.pay-modal-back:hover { color: var(--orange-text); }
/* Same [hidden] trap as .pay-options/.pay-crypto-panel above: the
   display:inline-flex here outranks the UA's display:none for [hidden]. */
.pay-modal-back[hidden] { display: none; }
.pay-modal-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.012em;
  color: var(--green-deep); margin: 0 0 6px; padding-right: 28px;
}
/* Back is absolutely positioned (out of flow), so it never pushes the
   title down on its own; scoped to only when it is actually visible (the
   crypto view) so the choice view's title, which has no back control to
   clear, is untouched. .pay-modal-dialog is display:block (confirmed, not
   flex/grid: no gap property is in play here at all), so this margin is
   the only thing setting the distance and nothing above it collapses or
   overrides it (confirmed against every computed CSS rule touching this
   heading's margin). The previous value here, 18px, was in fact being
   applied, computed and all, but Back's own box already consumes most of
   that same 18px in its own top offset and line height, so the rendered
   gap it produced (9px, measured) still read as flush. 24px reuses
   .pay-modal-dialog's own left/right/bottom padding, the same rhythm
   already used in this dialog, and clears an actually visible ~15px. */
.pay-modal-back:not([hidden]) + .pay-modal-title { margin-top: 24px; }
.pay-modal-sub {
  font-size: 13.5px; line-height: 1.5; color: var(--gray-warm);
  margin: 0 0 18px;
}
body.pay-modal-open { overflow: hidden; }

/* Article cover: one drawn illustration per article, in the site's own
   palette, doubling as the page's og:image. Sits under the byline, in the
   hero, so it is the first thing after the title on every article. */
.article-cover { margin: 28px 0 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: var(--cream-warm); }
.article-cover img { display: block; width: 100%; height: auto; }
/* The covers are 1200x630 share cards. At the article column's full 760px
   one opens the page larger than anything that follows it, which is the
   wrong weight for a mark that carries no information the headline does
   not. Capped on wide screens and left to the text's own edge; phones keep
   the full width, where the column is narrow enough that it reads as a
   header rather than a banner. */
@media (min-width: 700px) {
  .article-cover { max-width: 460px; }
}
/* Wide enough for two columns: the cover moves beside the headline and the
   lede instead of sitting under them. It is the last child in the source,
   after the meta line, because that is the order a reader without CSS
   should get; grid places it without moving the markup. All nine articles
   carry the same six children in the same order, so the four text rows the
   cover spans are the same on every one. :has() rather than a class on
   nine files, and where it is unsupported the layout simply stays stacked. */
@media (min-width: 1000px) {
  .page-hero:has(.article-cover) .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 48px;
    align-items: start;
  }
  .page-hero:has(.article-cover) .breadcrumb { grid-column: 1 / -1; }
  .page-hero:has(.article-cover) .article-tags,
  .page-hero:has(.article-cover) h1,
  .page-hero:has(.article-cover) .lede,
  .page-hero:has(.article-cover) .article-meta { grid-column: 1; }
  .page-hero:has(.article-cover) .article-cover {
    grid-column: 2; grid-row: 2 / span 4;
    align-self: center;
    margin: 0; max-width: none;
  }
}

/* ---------------------------------------------------------------
   THE PRODUCT SELECTOR
   Two rungs of one product on one card: the panels hold the price and
   the line, the toggle carries each rung's checkout, and the Buy now /
   See product pair is retargeted rather than duplicated. It was written
   for the books card inside index.html and is used by the check-up card
   on the home and on /services/, so it lives here, once, and every card
   that carries `.mb-card` gets the same two states.
   It is drawn for a cream card. The middle card of the pricing shelf is
   the deep-green one, so the same control has a second set of states for
   that surface: the same shapes, the same transitions, the colours
   inverted. One component, two backgrounds, never two selectors.
   --------------------------------------------------------------- */
/* Same 16px over the label as over a list, so the selector sits where a
   card without one starts its bullets, and the same 16px under the
   toggle, which is the list's own top margin. */
.mb-card .mb-toggle-label { margin-top: 14px; margin-bottom: 6px; }
/* The price block ends with a margin meant for a card whose bullets come
   next. On a card with a selector, what comes next is the selector, and
   that margin plus the label's own put 44px over "Select your product"
   against 20px under the toggle. Trimmed so the block sits in the same
   gap on both sides. */
/* Every card carries a local price under the dollar one, so the gap
   under the price block is the gap to that box: the same 4px on all
   three, whether the price sits in a swap panel or straight in the
   card. It was 28 on the Renovation, which is what dropped its baht
   box below the other two. */
.price-card .price-amount { margin-bottom: 4px; }
.mb-card .mb-toggle { position: relative; display: flex; margin: 4px 0 8px; background: rgba(9, 56, 34, 0.06); border: 1px solid var(--line, #E0D3BC); border-radius: var(--radius-card); padding: 4px; }
.mb-card .mb-toggle-pill { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); width: calc(50% - 4px); background: var(--green-deep); border-radius: var(--radius-card); transition: transform 0.3s var(--ease); z-index: 1; }
.mb-card[data-state="toolbox"] .mb-toggle-pill, .mb-card[data-state="checkup_plus"] .mb-toggle-pill { transform: translateX(100%); }
.mb-card .mb-toggle button { position: relative; z-index: 2; flex: 1 1 0; border: 0; background: transparent; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 12px; color: var(--gray-warm); padding: 9px 6px; border-radius: var(--radius-card); text-align: center; transition: color 0.3s ease; }
.mb-card .mb-toggle button.on { color: var(--cream-light); }
/* Both options stay in the DOM and are swapped with visibility, not
   display or the hidden attribute -- see the markup comment for why
   (locale-price.js unhides every [data-local] element it paints,
   hidden ones included, regardless of which option is selected).
   display:grid with every panel on the same grid-area (1/1) stacks
   them exactly on top of each other, so the cell's height is the
   taller panel's, in both states: this is what keeps the card from
   changing height when it toggles. min-width:0 keeps both panels
   aligned regardless of which has the wider content. */
.mb-card .mb-swap { display: grid; }
.mb-card .mb-swap .mb-panel { grid-area: 1 / 1; min-width: 0; }
/* One panel shows, the rest wait. `visibility` and not `display`,
   because the local-price script measures the hidden one too. */
.mb-card .mb-panel { visibility: hidden; }
.mb-card[data-state="method"] .mb-panel[data-panel="method"],
.mb-card[data-state="toolbox"] .mb-panel[data-panel="toolbox"],
.mb-card[data-state="checkup"] .mb-panel[data-panel="checkup"],
.mb-card[data-state="checkup_plus"] .mb-panel[data-panel="checkup_plus"] { visibility: visible; }

/* THE SAME SELECTOR ON THE GREEN CARD
   Cream pill, green label on the selected side, and a cream-at-72% label on
   the other: the same contrast as the light version, read the other way up.
   Nothing here changes a shape or a timing, only which token is where. */
.price-card.featured .mb-toggle {
  background: rgba(246, 237, 218, 0.10);
  border-color: rgba(246, 237, 218, 0.28);
}
.price-card.featured .mb-toggle-pill { background: var(--cream-light); }
.price-card.featured .mb-toggle button { color: rgba(246, 237, 218, 0.72); }
.price-card.featured .mb-toggle button.on { color: var(--green-deep); }
.price-card.featured .mb-toggle-label { color: rgba(246, 237, 218, 0.72); }

/* THE ROW AN UPPER TIER ADDS
   Every bullet is always shown and the ones the tier above adds are
   tagged, rather than swapped in and out: the reader sees what the extra
   money buys without pressing anything. Written for the books card, used
   by the check-up card on the home and on /services/, so it lives here
   and not inside one page. */
.price-tier-tag { font-weight: 800; font-size: 0.8em; color: var(--orange-text); white-space: nowrap; }
.svc-points .price-tier-tag { font-weight: 700; }

/* "EVERYTHING IN THE RUNG BELOW, PLUS" 
   The renovation card wore this first; the check-up card and the same
   card on /services/ wear it now, so it left index.html for the sheet. */
.price-plus-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--cream-warm, #EDE7DA); border: 1px solid var(--line, #E0D3BC); color: var(--green-deep); font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 13px; border-radius: var(--radius-card); margin: 22px 0 0; width: fit-content; }
.price-plus-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }

/* THE SWAP THAT ENDS THE CARD
   A card whose list is a bare <ul> ends the same way on every card:
   `.price-list` takes the slack, the turnaround line sits under it and
   `.price-actions` is pinned to the foot. Wrapping that list in a swap
   put it inside a grid, where the slack had nowhere to go, so the line
   floated up against the bullets while the cards beside it kept theirs
   against the buttons. The swap takes the slack instead, each panel is
   a column inside its own cell, and the line is pushed to the bottom of
   it: the same distance from the buttons as its neighbours, in both
   states, and the card still cannot change height. */
.price-card .mb-swap-tail { flex: 1 1 auto; }
.mb-card .mb-swap-tail .mb-panel { display: flex; flex-direction: column; }
.mb-card .mb-swap-tail .price-list { flex: 1; }
/* `margin-top: auto` pushes it down; the bottom margin is the one the
   other cards keep between that line and their buttons, so it stays. */
.mb-card .mb-swap-tail .price-scope { margin-top: auto; }

/* NOT YET FOR SALE, AND NOT HIDDEN EITHER
   A product that is real, priced and visible but cannot be paid for
   yet. The button keeps the row's shape so nothing moves the day it
   opens, and it is a <span>: there is nothing to press and nothing to
   tab to. The line under it is the one thing a visitor can do. */
.btn-soon {
  background: rgba(14, 75, 44, 0.07); border: 1px dashed rgba(14, 75, 44, 0.32);
  color: var(--green-deep); cursor: default; font-weight: 700;
}
.ac-soon-note { margin: 10px 0 14px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--gray-warm); }
.ac-soon-note a { color: var(--orange-text); text-decoration: underline; }