/* AIAdvertising.sg: the one stylesheet for every page.
   Aesthetic: "ChatGPT product UI as editorial" (BUILD-SPEC). Native CSS, no design system package. The look borrows from
   OpenAI's product UI (composer pill, message bubble, thin borders); no OpenAI asset, logo or font is used.
   Palette and type come from brand-bible.md. Light theme only (see build notes).
   Shape rule: panels, cards, tables and inputs use 12px corners; small media use 8px; inline marks (mock logo) use 4px;
   buttons, chips, bubbles and the composer are pills; numbered markers, step marks and icon discs are circles.
   Green rule: --accent (#10A37F) is for borders, tints and lines. Icons use --accent-dark (#0E8C6D, 3.9:1 on the page).
   The wordmark's .sg, step numbers and any green text use --accent-ink (#0B7B5F, 4.9:1 on the page).
   Button fills use --accent-ink (#0B7B5F) with white text (5.2:1). Body links are ink with a green underline.
   Z-index scale: 10 sticky header (its menu panel sits inside it), 12 floating WhatsApp button, 20 skip link. Nothing else sets z-index.
   Fonts are self-hosted; files and licences are listed in ../fonts/LICENSE.md */

@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500 600;font-display:swap;src:url(../fonts/inter-tight-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500 600;font-display:swap;src:url(../fonts/inter-tight-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0D0D0D;            /* headings, strong text */
  --text:#1F1F1F;           /* body copy */
  --muted:#5D5D5D;          /* helper text, 6.1:1 on the page */
  --line:#E3E3E3;           /* hairlines */
  --line-strong:#8A8A8A;    /* input borders, 3.4:1 on white */
  --surface:#F7F7F8;        /* page */
  --paper:#FFFFFF;          /* panels, tables, the chat window */
  --bubble:#F4F4F4;         /* user message bubble */
  --accent:#10A37F;         /* borders, tints, lines, wordmark */
  --accent-dark:#0E8C6D;    /* icons */
  --accent-ink:#0B7B5F;     /* button fill, focus ring */
  --accent-ink-hover:#0A6B53;
  --accent-tint:#E6F6F1;
  --accent-tint-line:#BFE5D7;
  --error:#B3261E;
  --font-head:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:12px;
  --radius-sm:8px;
  --pill:999px;
  --gutter:clamp(20px,4vw,40px);
  --header-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Layout rhythm (7 Oct layout review): one scale for every vertical gap */
  --space-section:clamp(64px,7vw,104px); /* top and bottom padding of every section, identical */
  --gap-head:40px;                        /* heading block to the content under it */
  --gap-fig:24px;                         /* figure to its caption */
  --gap-stack:24px;                       /* between stacked figures or paragraphs */
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 20px)}
body{margin:0;background:var(--surface);color:var(--text);font:400 1.0625rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--font-head);font-weight:600;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.375rem,1.4rem + 3vw,3.5rem);line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(1.75rem,1.3rem + 1.5vw,2.5rem);line-height:1.1;letter-spacing:-.02em}
h3{font-size:1.1875rem;line-height:1.3;letter-spacing:-.01em}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
main:focus{outline:none}
strong{font-weight:600;color:var(--ink)}

.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{width:1.25em;height:1.25em;fill:currentColor;flex:none}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.placeholder{color:var(--muted);font-style:italic} /* open items for JJ (fees, PDPA notice): a quiet note, not an alarm */
.skip-link{position:absolute;left:16px;top:-120px;z-index:20;padding:10px 18px;border-radius:var(--pill);background:var(--ink);color:#fff;font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 1.5rem;border:1px solid transparent;border-radius:var(--pill);font:600 1rem/1 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s var(--ease),transform .1s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent-ink);color:#fff}
.btn-primary:hover{background:var(--accent-ink-hover)}
.btn-primary[disabled]{opacity:.75;cursor:progress}
.btn-sm{min-height:40px;padding:0 1.125rem;font-size:.9375rem}
.btn .icon{width:1.2em;height:1.2em}
.btn-lg{min-height:60px;padding:0 2rem;font-size:1.125rem}
.btn-lg .icon{width:26px;height:26px}
.text-link{display:inline-flex;align-items:center;gap:.4em;font-weight:600}
.text-link .icon{width:1.1em;height:1.1em;color:var(--accent-dark);transition:transform .15s var(--ease)}
.text-link:hover .icon{transform:translateX(3px)}
.text-link:hover .i-down{transform:translateY(2px)}

/* Header */
.site-header{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--line)}
.header-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:24px;height:var(--header-h)}
.header-bar > .wordmark{grid-column:1;justify-self:start}
.wordmark{font:600 1.25rem/1 var(--font-head);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--accent-ink)} /* #10A37F is 3.0:1 on the page at 20px, so the on-screen wordmark uses the darker accent (4.9:1) */
.site-nav{grid-column:2;justify-self:center}
.site-nav ul{display:flex;gap:2px;list-style:none}
.site-nav a{display:block;padding:8px 12px;border-radius:var(--pill);color:var(--text);font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap}
.site-nav a:hover{background:#ECECEE}
.header-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;padding:0;border:1px solid var(--line);border-radius:var(--pill);background:var(--paper);color:var(--ink);cursor:pointer}
.nav-toggle .icon{width:22px;height:22px}
.nav-toggle .i-close,.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}
@media (max-width:1023px){
  .header-bar{column-gap:12px}
  .site-nav{position:absolute;top:100%;left:0;right:0;display:none;margin:0;padding:8px var(--gutter) 20px;background:var(--surface);border-bottom:1px solid var(--line)}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav a{padding:14px 4px;border-radius:0;font-size:1.0625rem;border-bottom:1px solid var(--line)}
  .site-nav li:last-child a{border-bottom:0}
  .nav-toggle{display:inline-flex;visibility:hidden}
  .js .nav-toggle{visibility:visible}
}
@media (min-width:1024px) and (max-width:1199px){.header-bar{column-gap:14px}.site-nav ul{gap:0}.site-nav a{padding:8px 8px;font-size:.875rem}}
@media (max-width:419px){.header-actions .btn-sm .icon{display:none}}
@media (max-width:379px){.wordmark{font-size:1.125rem}.header-actions .btn-sm{padding:0 .875rem}}

/* Shared section rhythm */
.section{padding-block:var(--space-section)}
.section-head{max-width:680px}
.section-head + *{margin-top:var(--gap-head)}
.section-head.center{margin-inline:auto;text-align:center}
.lead{margin-top:16px;font-size:1.125rem;line-height:1.55;color:var(--text)}
.note-text{margin-top:var(--gap-stack);font-size:.9375rem;color:var(--muted)}

/* Home: hero */
.hero{padding-block:clamp(32px,4vw,56px)}
.hero-grid{display:grid;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.5rem,1.25rem + 3.6vw,4.25rem);line-height:1.02}
.hero-sub{margin-top:24px;max-width:34ch;font-size:1.1875rem;line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}.hero .cgpt-mock{justify-self:end;margin:0}}

/* The ChatGPT phone mock (.cgpt-mock): Home hero, Home "Where the ad appears", How it works "Anatomy of an ad".
   Drawn from OpenAI's own screenshot (build-notes/reference/openai-ad-in-chatgpt.png): status bar, top buttons, the answer
   as plain text with a bold run-in line and bullets, the action icons, the ad card with its Ad chip, the disclosure line and the composer.
   Flat illustration: 2px dark border, 44px corners, no shadow, no gloss. The frame is cut off below the composer and
   fades out, so the phone reads as continuing below. Text inside stays at 14px or more; only the Ad chip and the logo letter are smaller. */
.cgpt-mock{width:100%;max-width:380px;margin-inline:auto}
.cgpt-phone{padding:0 18px 34px;background:var(--paper);border:2px solid #262626;border-bottom:0;border-radius:44px 44px 0 0;color:var(--ink);font:400 15px/1.5 var(--font-body);-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
.cgpt-phone .icon{width:18px;height:18px}
.cgpt-status{display:flex;align-items:center;justify-content:space-between;height:46px;padding:4px 10px 0 14px;font:600 15px/1 var(--font-body)}
.cgpt-sys{display:flex;align-items:center;gap:5px}
.cgpt-sys .icon{width:16px;height:16px}
.cgpt-sys .cgpt-battery{width:22px;height:22px}
.cgpt-top{display:flex;align-items:center;justify-content:space-between;padding:6px 0 16px}
.cgpt-round{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:40px;height:40px;padding:0 11px;border-radius:var(--pill);background:var(--paper);box-shadow:0 0 0 1px rgba(13,13,13,.05),0 4px 12px rgba(13,13,13,.07)}
.cgpt-round .icon{width:19px;height:19px}
.cgpt-user{width:fit-content;max-width:82%;margin-left:auto;padding:8px 15px;border-radius:20px;background:var(--bubble)}
.cgpt-user + .cgpt-answer{margin-top:18px}
.cgpt-answer ul{padding-left:22px}
.cgpt-answer li::marker{color:var(--ink)}
.cgpt-answer ul + p{margin-top:12px}
.cgpt-actions{display:flex;gap:14px;margin-top:12px;color:#5D5D5D}
.cgpt-ad-zone{margin-top:16px;padding-block:18px;border-block:1px solid #ECECEC}
.cgpt-ad{display:grid;grid-template-columns:80px minmax(0,1fr);overflow:hidden;background:var(--paper);border:1px solid #E3E3E3;border-radius:12px}
.cgpt-ad img{align-self:stretch;width:80px;height:auto;min-height:80px;object-fit:cover;background:#ECECEC}
.cgpt-ad-body{min-width:0;padding:9px 10px 10px 12px}
.cgpt-ad-brand{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;line-height:20px}
.cgpt-ad-logo{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border-radius:4px;background:var(--ink);color:#fff;font:600 10px/1 var(--font-head)}
.cgpt-ad-chip{margin-left:auto;padding:0 6px;border-radius:6px;background:#F0F0F0;color:#5D5D5D;font-size:14px;font-weight:500;line-height:20px}
.cgpt-ad-brand .icon{width:16px;height:16px;color:#5D5D5D}
.cgpt-ad-title{margin-top:2px;font-size:15px;font-weight:600;line-height:20px}
.cgpt-ad-desc{margin-top:1px;color:#5D5D5D;font-size:14px;line-height:19px}
.cgpt-disclosure{margin-top:14px;color:#6B6B6B;font-size:14px;line-height:1.45}
.cgpt-learn{display:flex;align-items:center;gap:4px;margin-top:6px;color:#2F2F2F;font-size:14px}
.cgpt-learn .icon{width:13px;height:13px}
.cgpt-composer{display:flex;align-items:center;gap:10px;margin-top:22px}
.cgpt-plus{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px rgba(13,13,13,.05),0 4px 12px rgba(13,13,13,.07);color:#5D5D5D}
.cgpt-input{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:46px;padding:0 6px 0 16px;border-radius:var(--pill);background:var(--paper);box-shadow:0 0 0 1px rgba(13,13,13,.05),0 4px 12px rgba(13,13,13,.07);color:#767676}
.cgpt-input > span:first-child{flex:1;white-space:nowrap}
.cgpt-voice{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff}
.cgpt-mock figcaption{margin-top:12px;color:var(--muted);font-size:.8125rem;text-align:center}
@media (max-width:379px){.cgpt-phone{padding-inline:14px}.cgpt-actions{gap:12px}}
/* One reveal on the page: the hero phone, 400ms fade and 8px rise. site.js holds it with .is-pending while it is below the fold */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:no-preference){
  .hero .cgpt-mock{animation:rise .4s var(--ease) both}
  .hero .cgpt-mock.is-pending{animation:none;opacity:0}
}

/* Home: status strip */
.status{padding-block:8px 0}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;list-style:none;background:var(--line);border-block:1px solid var(--line)}
.stat{padding:28px 24px;background:var(--surface)}
.stat-value{color:var(--ink);font:600 clamp(1.375rem,1rem + 1vw,1.75rem)/1.15 var(--font-head);letter-spacing:-.015em}
.stat-label{margin-top:8px;color:var(--muted);font-size:.9375rem;line-height:1.45}
.stats-note{margin-top:16px;color:var(--muted);font-size:.875rem}
@media (max-width:767px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:22px 16px 22px 0}.stat:nth-child(2n){padding-left:16px}}

/* Figures (7 Oct review): evidence is drawn, not described. Plain CSS only, no chart library. A bar is a filled
   shape on empty space: no background track, no gradient, no shadow. The Singapore or "us" mark is --accent; every other mark is ink
   at 40%. Values sit beside the marks in the site's type. Every figure is <figure role="img" aria-label> with the source in a
   visible figcaption. Pages carry no inline styles, so lengths come from the v-* classes: --v is the plotted value, --k the scale. */
.fig{--mark:rgba(13,13,13,.4)}
.fig .is-us{--mark:var(--accent)}
.fig .is-faint{--mark:rgba(13,13,13,.2)}
.fig-title{color:var(--ink);font:600 1.0625rem/1.35 var(--font-head);letter-spacing:-.01em}
.fig figcaption{margin-top:var(--gap-fig);color:var(--muted);font-size:.875rem;line-height:1.45}
.fig strong{font:600 1.0625rem/1 var(--font-head);color:var(--ink)}
.fig .is-us strong,.fig .is-us .hbar-val,.fig .is-us .vbar-val,.fig .is-us .split-val{color:var(--accent-ink)}
.v-100{--v:100}.v-86{--v:86}.v-84-7{--v:84.7}.v-78{--v:78}.v-73-3{--v:73.3}.v-64-3{--v:64.3}.v-23-5{--v:23.5}.v-18-8{--v:18.8}.v-14-7{--v:14.7}
.v-2-3x{--v:2.3}.v-1x{--v:1}
/* Horizontal bars: name, then the bar with its value at the end. 100 on the scale is 80% of the row, so the value always fits */
.hbars{--k:.8%;display:grid;gap:14px;margin-top:20px;list-style:none}
.hbars.k-times{--k:34.78%} /* ratio figures: 2.3x fills the same 80% */
.hbars li{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:6px 20px;align-items:center}
.hbars.is-stacked li{grid-template-columns:minmax(0,1fr)}
.hbar-name{font-size:.9375rem;line-height:1.35}
.is-us .hbar-name{color:var(--ink);font-weight:600}
.hbar-row{display:flex;align-items:center;gap:10px;min-width:0}
.hbar{flex:none;width:calc(var(--v) * var(--k));height:24px;border-radius:2px;background:var(--mark)}
.hbars.is-stacked .hbar{height:18px}
.hbar-val{flex:none;color:var(--ink);font:600 1.0625rem/1 var(--font-head);white-space:nowrap}
@media (max-width:599px){.hbars li{grid-template-columns:minmax(0,1fr)}}
/* Before and after: two thin columns on a shared 0 to 100 scale (1.6px a point), value above, year below */
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:12px 24px;margin-top:20px}
.pair{display:grid;grid-row:span 2;grid-template-rows:subgrid}
.pair-name{font-size:.9375rem;line-height:1.4}
.vbars{display:flex;align-items:flex-end;gap:12px;height:200px}
.vbar-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.vbar{width:40px;height:calc(var(--v) * 1.6px);border-radius:2px 2px 0 0;background:var(--mark)}
.vbar-val{color:var(--ink);font:600 1.0625rem/1 var(--font-head)}
.vbar-year{color:var(--muted);font-size:.8125rem;line-height:1.2}
.vbars .icon{align-self:center;width:18px;height:18px;color:var(--muted)}
/* Split bars: one bar cut into its shares. Column widths are the shares themselves */
.split{display:grid;gap:0 2px;margin-top:20px}
.split-seg{display:block;height:28px;background:var(--mark)}
.split-part{min-width:0}
.split-val{margin-top:10px;color:var(--ink);font:600 1.0625rem/1 var(--font-head)}
.split-label{margin-top:4px;color:var(--muted);font-size:.8125rem;line-height:1.35}
.split-ends{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-size:.875rem;line-height:1.4}
.split-ends p:last-child{text-align:right}
.split-ends strong{margin-right:.25em}
.fig-callout{margin-top:16px;color:var(--accent-ink);font-weight:600;font-size:.9375rem}
.s-pay{grid-template-columns:minmax(0,54.3fr) minmax(0,24.8fr) minmax(0,18.9fr) minmax(0,2fr)} /* the 2% remainder stays unlabelled */
.s-new{grid-template-columns:minmax(0,93fr) minmax(0,7fr)}
.s-hour{grid-template-columns:minmax(0,52.7fr) minmax(0,47.3fr)}
.tile .split-seg{height:18px}
@media (max-width:379px){.split-label{font-size:.75rem}}

/* Home: Singapore already runs on AI. Ranked bars full width, then before/after and the payment split side by side, then one line */
.fig-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:var(--gap-head) 64px}
.fig-row > .fig-wide{grid-column:1 / -1}
.fig-row > .fig{display:flex;flex-direction:column;min-width:0}
.fig-row > .fig > figcaption{margin-top:auto;padding-top:var(--gap-fig)}
.fig-row > .fig > .split{margin-block:auto}
.fig-row > .fig > .fig-callout + figcaption{margin-top:0;padding-top:12px}
@media (max-width:899px){.fig-row{grid-template-columns:minmax(0,1fr);gap:var(--gap-head)}}
.fig-sources{margin-top:8px;color:var(--muted);font-size:.875rem}
.fig-sources a{color:var(--muted)}

/* Home: where the ad appears. The phone mock beside its numbered legend; the callout markers (.mk) on the mock are styled in the addendum block at the end */
.anatomy{display:grid;gap:40px}
@media (min-width:960px){
  .anatomy{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"mock ." "mock head" "mock list" "mock .";gap:0 72px}
  .anatomy > .cgpt-mock{grid-area:mock}
  .anatomy > .section-head{grid-area:head}
  .anatomy > .anatomy-list{grid-area:list}
}
.anatomy .section-head{max-width:560px}
.anatomy > .cgpt-mock{margin-top:0}
.marker{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-ink);color:#fff;font:600 13px/1 var(--font-body)}
.anatomy-list{display:grid;gap:20px;max-width:560px;list-style:none}
@media (min-width:960px){.anatomy-list{margin-top:32px}}
.anatomy-list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px}
.anatomy-list h3{font-size:1.0625rem}
.anatomy-list p{margin-top:4px;font-size:.9375rem}

/* Tables: comparison (Home) and objectives (How it works) */
.table-scroll{margin-top:var(--gap-head);overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9375rem;line-height:1.5}
.data-table caption{padding:16px 20px 0;text-align:left;color:var(--muted);font-size:.875rem}
.data-table caption span{position:sticky;left:20px;display:block;max-width:min(100%,calc(100vw - 2 * var(--gutter) - 40px))}
.data-table th,.data-table td{padding:16px 20px;text-align:left;vertical-align:top}
.data-table thead th{color:var(--ink);font:600 1rem/1.3 var(--font-head);border-bottom:1px solid var(--line)}
.data-table tbody tr + tr > *{border-top:1px solid var(--line)}
.data-table tbody th{color:var(--ink);font-weight:600}
.compare{min-width:760px}
.compare th:first-child,.compare td:first-child{position:sticky;left:0;width:17%;background:var(--paper);box-shadow:inset -1px 0 0 var(--line)}
.compare .col-us{background:var(--accent-tint)}
.compare thead .col-us{box-shadow:inset 0 3px 0 var(--accent)}
.objectives{min-width:560px}
.objectives th[scope="row"]{white-space:nowrap}
.objectives td:last-child{width:40%;font-weight:600;color:var(--ink)}
.results{display:grid;gap:10px;margin-top:10px;padding-left:1.25em}
.results li::marker{color:var(--accent-dark)}
.callout-title{color:var(--ink);font-weight:600}
.callout .results + p{margin-top:12px;color:var(--muted);font-size:.9375rem}

/* Home: good fit and declined */
.fit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:var(--gap-head)}
.fit-col{padding:clamp(22px,3vw,32px);border-radius:var(--radius)}
.fit-yes{background:var(--accent-tint);border:1px solid var(--accent-tint-line)}
.fit-no{background:var(--paper);border:1px solid var(--line)}
.fit-col h3{display:flex;align-items:center;gap:10px}
.fit-col h3 .icon{width:26px;height:26px;color:var(--accent-dark)}
.fit-no h3 .icon{color:var(--muted)}
.fit-group{margin-top:22px;color:var(--muted);font-size:.875rem;font-weight:600}
.fit-list{display:grid;gap:12px;margin-top:18px;list-style:none}
.fit-group + .fit-list{margin-top:10px}
.fit-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.fit-list .icon{width:18px;height:18px;margin-top:4px;color:var(--accent-dark)}
.fit-no .fit-list .icon{color:var(--muted)}
@media (max-width:767px){.fit-grid{grid-template-columns:1fr}}

/* Home: four step timeline */
.timeline{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:var(--gap-head);list-style:none}
.timeline::before{content:"";position:absolute;top:20px;left:20px;right:calc(25% - 44px);border-top:1px solid var(--accent)}
.timeline li{position:relative}
.tl-mark{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--accent);border-radius:50%;background:var(--paper);color:var(--accent-dark)}
.tl-mark .icon{width:20px;height:20px}
.timeline h3{margin-top:20px}
.timeline p{margin-top:8px;font-size:.9375rem}
@media (max-width:767px){
  .timeline{grid-template-columns:1fr;gap:28px}
  .timeline::before{top:20px;bottom:20px;left:20px;right:auto;border-top:0;border-left:1px solid var(--accent)}
  .timeline li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 16px}
  .tl-mark{grid-row:span 2}
  .timeline h3{margin-top:8px}
  .timeline p{margin-top:0}
}

/* Home: plain prose block and the CTA band (also used on inner pages) */
.prose-block{max-width:640px;margin-inline:auto;text-align:center}
.prose-block p{margin-top:16px}
.prose-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:28px}
/* Closer (section#enquire): the last section on every page except Contact and 404. Left: headline, one line, WhatsApp.
   Right: the enquiry card from partial:enquiry. Stacks on phones with the form under the WhatsApp button */
.closer{background:var(--accent-tint);border-top:1px solid var(--accent-tint-line)}
.closer-grid{display:grid;gap:40px;padding-block:var(--space-section)}
@media (min-width:960px){.closer-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:stretch}.closer-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}}
.closer-copy > p{max-width:40ch;margin-top:16px;font-size:1.125rem}
.closer-copy .btn{margin-top:28px}
.closer-copy .wa-number{margin-top:12px}
.enquiry-card{padding:clamp(22px,3vw,32px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
@media (min-width:960px){.closer .enquiry-card{padding:22px}}
.enquiry-card .form-title{font-size:1.375rem}
.enquiry-card .enquiry{gap:18px;margin-top:22px}
.enquiry-card .field textarea{min-height:112px}

/* Inner pages: page head with a horizontal table of contents, then full-width sections (7 Oct layout review: the 208px side
   column and the 780px body are gone). Prose is capped at 72ch on the wrap's left edge; figures, tables and diagrams span the wrap */
.page-head{padding-block:clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.page-head .lead{max-width:60ch;margin-top:20px;font-size:1.1875rem}
.page-meta{margin-top:16px;color:var(--muted);font-size:.875rem}
.page-head .toc{margin-top:28px}
.toc{min-width:0}
.toc-title{color:var(--ink);font:600 .875rem/1.3 var(--font-body)}
.toc ol{display:flex;gap:8px;margin-top:12px;padding-bottom:6px;overflow-x:auto;list-style:none;scroll-snap-type:x proximity}
.toc li{flex:none;scroll-snap-align:start}
.toc a{display:block;padding:8px 14px;border:1px solid var(--line);border-radius:var(--pill);background:var(--paper);color:var(--text);font-size:.875rem;text-decoration:none;white-space:nowrap}
.toc a:hover{border-color:var(--accent)}
@media (min-width:768px){.toc ol{flex-wrap:wrap;padding-bottom:0;overflow:visible}}
.doc-section{padding-block:var(--space-section);border-top:1px solid var(--line)}
.doc-section:first-child{border-top:0}
.doc-section h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.doc-section h3{margin-top:36px}
.doc-section > * + *{margin-top:var(--gap-stack)}
.doc-section > h2 + *{margin-top:var(--gap-head)}
.doc-section > h2 + p{margin-top:16px}
.doc-section > h2 + p + :not(p){margin-top:var(--gap-head)}
.doc-section > h3{margin-top:var(--gap-head)}
.doc-section > h3 + *{margin-top:12px}
.doc-section > p,.doc-section > .bullets,.doc-section > .ticks,.doc-section > .callout,.doc-section > .nope{max-width:72ch}
.doc-section > .cgpt-mock{margin-inline:0}
.doc-section > .cgpt-mock figcaption{text-align:left}

/* Lists used across inner pages */
.bullets{display:grid;gap:10px;padding-left:1.25em}
.bullets li::marker{color:var(--accent-dark)}
.ticks{display:grid;gap:14px;list-style:none}
.ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.ticks .icon{width:22px;height:22px;margin-top:2px;color:var(--accent-dark)}
.ticks.is-muted .icon{color:var(--muted)}
.facts{display:grid;gap:18px}
.facts div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:4px 24px}
.facts dt{color:var(--ink);font-weight:600}
@media (max-width:599px){.facts div{grid-template-columns:1fr}}
.callout{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius)}
.callout .icon{width:22px;height:22px;margin-top:2px;color:var(--accent-dark)}
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.pills li{padding:6px 14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--pill);font-size:.9375rem}

/* How it works: signals, anatomy, hierarchy, hints, measurement */
.signals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none}
.signals li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);font-size:.9375rem;line-height:1.45}
.signals .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--accent-tint);color:var(--accent-dark)}
.signals .ico .icon{width:22px;height:22px}
.signals li:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:599px){.signals{grid-template-columns:1fr}}
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.parts div{padding-top:14px;border-top:2px solid var(--accent)}
.parts dt{color:var(--ink);font-weight:600}
.parts dd{margin-top:4px;font-size:.9375rem}
@media (max-width:599px){.parts{grid-template-columns:1fr}}
.tier{padding:20px 22px;border-radius:var(--radius)}
.tier .tier{margin-top:16px}
.tier-1{background:var(--paper);border:1px solid var(--line)}
.tier-2{background:var(--surface);border:1px solid var(--line)}
.tier-3{background:var(--accent-tint);border:1px solid var(--accent-tint-line)}
.tier h3{display:flex;align-items:center;gap:10px;margin:0;font-size:1.0625rem}
.tier h3 .icon{width:20px;height:20px;color:var(--accent-dark)}
.tier p{margin-top:6px;font-size:.9375rem}
@media (max-width:599px){.tier{padding:16px}.tier .tier{margin-top:14px}}
.hint-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hint{padding:20px;border-radius:var(--radius)}
.hint-weak{background:var(--paper);border:1px solid var(--line)}
.hint-strong{background:var(--accent-tint);border:1px solid var(--accent-tint-line)}
.hint-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.875rem;font-weight:600}
.hint-strong .hint-label{color:var(--ink)}
.hint-label .icon{width:18px;height:18px;color:var(--muted)}
.hint-strong .hint-label .icon{color:var(--accent-dark)}
.hint-text{margin-top:10px;color:var(--ink);font:500 1.125rem/1.4 var(--font-head)}
.example-groups{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.example-groups .pill-tag{padding:6px 14px;background:var(--paper);border:1px solid var(--accent);border-radius:var(--pill);font-size:.9375rem;font-weight:500}
@media (max-width:599px){.hint-pair{grid-template-columns:1fr}}
.refresh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line)}
.refresh div{padding:20px 20px 20px 0;background:var(--surface)}
.refresh div + div{padding-left:20px}
.refresh p{margin-top:6px;color:var(--muted);font-size:.9375rem}
.refresh .refresh-value{margin-top:0;color:var(--ink);font:600 1.375rem/1.2 var(--font-head)}
@media (max-width:479px){.refresh{grid-template-columns:1fr}.refresh div + div{padding-left:0}}

/* Services: reported CPC strip. One row per reported CPC on a shared US$0 to US$25 axis (4% of the plot a dollar), so close values
   never collide. OpenAI's US$3 to US$5 starting suggestion is a tinted band through every row. Rows have no gap so the band stays whole */
.cpc{--x:4%;margin-top:var(--gap-head)}
.cpc-rows{display:grid;margin-top:12px}
.cpc-row{display:grid;grid-template-columns:12rem minmax(0,1fr);column-gap:20px}
.cpc-name{align-self:center;padding-block:7px;font-size:.9375rem;line-height:1.3}
.cpc-plot{position:relative;min-height:36px}
.cpc-plot::before{content:"";position:absolute;top:0;bottom:0;left:calc(3 * var(--x));width:calc(2 * var(--x));background:var(--accent-tint)}
.cpc-head .cpc-plot{min-height:28px}
.cpc-band-label{position:absolute;top:4px;left:calc(3 * var(--x));padding-left:6px;color:var(--accent-ink);font-size:.8125rem;font-weight:600;line-height:1.2;white-space:nowrap}
.cpc-dot{position:absolute;top:50%;left:calc(var(--c) * var(--x));width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(13,13,13,.4)}
.cpc-val{position:absolute;top:50%;left:calc(var(--c) * var(--x));transform:translate(12px,-50%);color:var(--ink);font:600 .9375rem/1 var(--font-head);white-space:nowrap}
.cpc-row.is-left .cpc-val{transform:translate(calc(-100% - 12px),-50%)}
.cpc-axis .cpc-plot{min-height:30px;border-top:1px solid var(--line-strong)}
.cpc-axis .cpc-plot::before{content:none}
.cpc-tick{position:absolute;top:8px;left:calc(var(--c) * var(--x));transform:translateX(-50%);color:var(--muted);font-size:.8125rem;line-height:1}
.cpc-tick.c-0{transform:none}
.cpc-tick.c-25{transform:translateX(-100%)}
.c-0{--c:0}.c-5{--c:5}.c-10{--c:10}.c-15{--c:15}.c-20{--c:20}.c-25{--c:25}
.c-4-41{--c:4.41}.c-5-10{--c:5.10}.c-9-29{--c:9.29}.c-9-89{--c:9.89}.c-10-62{--c:10.62}.c-17-59{--c:17.59}.c-22-89{--c:22.89}
@media (max-width:599px){.cpc-row{grid-template-columns:6.5rem minmax(0,1fr);column-gap:12px}.cpc-head .cpc-plot{min-height:40px}.cpc-band-label{right:0;white-space:normal}.cpc-name{font-size:.8125rem}.cpc-val{font-size:.8125rem}.cpc-dot{width:10px;height:10px;margin:-5px 0 0 -5px}}

/* How it works: what early advertisers measured. Four figure tiles in a 2x2 grid: name, the figure drawn, what it means, a muted caveat */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;list-style:none}
.tile{display:flex;flex-direction:column;min-width:0;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.tile h3,.doc-section .tile h3{margin:0;color:var(--muted);font:600 .9375rem/1.35 var(--font-body);letter-spacing:0}
.tile .fig{margin-top:8px}
.tile .hbars{margin-top:16px;gap:10px}
.tile .fig figcaption{margin-top:12px;font-size:.8125rem}
.tile-means{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.9375rem;line-height:1.5}
.tile-not{margin-top:6px;color:var(--muted);font-size:.875rem;line-height:1.45}
@media (max-width:599px){.tiles{grid-template-columns:minmax(0,1fr)}.tile{padding:20px}}

/* Singapore guide: dated timeline, big figure, policy groups, checklist */
.dated{list-style:none;border-left:1px solid var(--accent)}
.dated li{position:relative;padding:0 0 28px 28px}
.dated li:last-child{padding-bottom:0}
.dated li::before{content:"";position:absolute;top:7px;left:-6px;width:11px;height:11px;border:1px solid var(--accent);border-radius:50%;background:var(--paper)}
.dated-date{color:var(--ink);font:600 1.0625rem/1.4 var(--font-head)}
.dated li p + p{margin-top:4px}
/* Singapore guide: government moves. Dates in a left gutter, a green rule and ring down the content column (differs from .dated, where the date sits above the text) */
.gov-line{list-style:none}
.gov-line li{display:grid;grid-template-columns:136px minmax(0,1fr);gap:4px 28px}
.gov-date{padding-top:1px;color:var(--accent-ink);font:600 .9375rem/1.4 var(--font-head)}
.gov-line li > div{position:relative;padding:0 0 32px 28px;border-left:1px solid var(--accent)}
.gov-line li:last-child > div{padding-bottom:4px}
.gov-line li > div::before{content:"";position:absolute;top:6px;left:-6px;width:11px;height:11px;border:1px solid var(--accent);border-radius:50%;background:var(--paper)}
.gov-line h3{margin-top:0;font-size:1.0625rem}
.gov-line p{margin-top:6px;font-size:.9375rem}
.gov-line .gov-date{margin-top:0}
.gov-fig{margin-top:10px}
.gov-nums{display:flex;flex-wrap:wrap;gap:4px 40px}
.gov-line .gov-num{margin-top:0;color:var(--ink);font:600 clamp(2rem,1.6rem + 1.4vw,2.75rem)/1.1 var(--font-head);letter-spacing:-.03em}
.gov-num span{font:500 1rem/1 var(--font-body);letter-spacing:0;color:var(--text)}
.gov-line .gov-fig figcaption{margin-top:6px;max-width:60ch}
@media (max-width:599px){.gov-line li{grid-template-columns:1fr;gap:0}.gov-date{padding:0 0 8px 28px;border-left:1px solid var(--accent)}}
.split-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.split-lists > div{padding:22px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line)}
.split-lists > div:first-child{background:var(--accent-tint);border-color:var(--accent-tint-line)}
.split-lists h3{margin:0 0 14px;font-size:1.0625rem}
@media (max-width:599px){.split-lists{grid-template-columns:1fr}}
.big-figure{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;align-items:center;padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.big-figure .big-figure-value{color:var(--ink);font:600 clamp(2.5rem,1.8rem + 2.5vw,3.5rem)/1 var(--font-head);letter-spacing:-.03em;padding-right:24px;border-right:2px solid var(--accent)}
.big-figure p{font-size:1rem}
@media (max-width:479px){.big-figure{grid-template-columns:1fr}.big-figure .big-figure-value{padding:0 0 12px;border-right:0;border-bottom:2px solid var(--accent)}}
.policy{display:grid;gap:12px}
.policy-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line)}
.policy-row.is-open{background:var(--accent-tint);border-color:var(--accent-tint-line)}
.policy-row .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--muted)}
.policy-row.is-open .ico{background:var(--paper);color:var(--accent-dark)}
.policy-row .ico .icon{width:24px;height:24px}
.policy-row h3{margin:0;font-size:1.0625rem}
.policy-row p{margin-top:6px;font-size:.9375rem}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;list-style:none;counter-reset:step}
.checklist li{display:grid;grid-template-columns:32px minmax(0,1fr);align-content:start;gap:4px 14px;padding:16px 0;border-top:1px solid var(--line);counter-increment:step}
.checklist li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--accent);border-radius:50%;background:var(--paper);color:var(--ink);font:600 .875rem/1 var(--font-body)}
.checklist h3{margin:0;font:600 1rem/1.4 var(--font-body);letter-spacing:0}
.checklist p{font-size:.9375rem}
@media (max-width:767px){.checklist{grid-template-columns:1fr;gap:0}}

/* Services: what it costs, as other advertisers reported it. A table on wide screens; under 768px each row stacks into a
   labelled block (labels from data-label), so nothing scrolls sideways */
.costs th[scope="row"]{width:22%}
.costs td:last-child{width:44%}
.cell-note{display:block;margin-top:2px;color:var(--muted);font-size:.8125rem;font-weight:400}
.costs-bridge{max-width:68ch;margin-top:20px}
@media (max-width:767px){
  .costs,.costs caption,.costs tbody,.costs tr,.costs th,.costs td{display:block;width:auto}
  .costs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .costs th[scope="row"],.costs td:last-child{width:auto}
  .costs tbody tr{padding:16px 20px}
  .costs tbody tr + tr{border-top:1px solid var(--line)}
  .costs tbody tr + tr > *{border-top:0}
  .costs th,.costs td{padding:4px 0}
  .costs th[scope="row"]{padding-bottom:10px;font:600 1.0625rem/1.3 var(--font-head)}
  .costs td{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:12px}
  .costs td::before{content:attr(data-label);color:var(--muted);font-size:.8125rem;font-weight:600;line-height:1.7}
}

/* Services: offer rows, engagement steps, refusals */
.offers{display:grid;gap:16px;margin-top:var(--gap-head)}
.offer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;padding:clamp(24px,3.5vw,40px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.offer-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.offer-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-sm);background:var(--accent-tint);color:var(--accent-dark)}
.offer-ico .icon{width:26px;height:26px}
.offer h3{font-size:1.5rem}
.offer-fee{margin-top:auto;padding-top:8px;color:var(--muted);font-size:.9375rem}
.offer-get{color:var(--ink);font-size:.875rem;font-weight:600}
.offer .ticks{margin-top:14px}
@media (max-width:767px){.offer{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:var(--gap-head);list-style:none;counter-reset:step}
.steps li{padding-top:20px;border-top:2px solid var(--ink);counter-increment:step}
.steps li::before{content:counter(step);display:block;color:var(--accent-ink);font:600 2.25rem/1 var(--font-head)}
.steps h3{margin-top:16px}
.steps p{margin-top:8px;font-size:.9375rem}
@media (max-width:899px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.steps{grid-template-columns:1fr;gap:28px}}
.refusals{margin-top:var(--gap-head);padding:clamp(22px,3vw,36px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.refusals .ticks{gap:20px}

/* Blog index: dated list, newest first. Date in a left column, one rule between rows, no cards */
.post-list{list-style:none}
.post-list li{display:grid;grid-template-columns:160px minmax(0,1fr);gap:6px 32px;padding:28px 0}
.post-list li + li{border-top:1px solid var(--line)}
.post-list li:first-child{padding-top:0}
.post-list li:last-child{padding-bottom:0}
.post-list p{max-width:72ch}
.post-list time{padding-top:3px;color:var(--muted);font-size:.9375rem}
.post-list h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.25}
.post-list h3 a{text-decoration:none}
.post-list h3 a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.post-list p{margin-top:8px}
.post-list .post-list-meta{color:var(--muted);font-size:.875rem}
@media (max-width:599px){.post-list li{grid-template-columns:1fr}}

/* Blog post: one reading column of 68ch, title block, "In short" box, sourced body, dated footer line */
.post-section{padding-block:clamp(40px,6vw,80px) clamp(64px,8vw,104px)}
.post{max-width:68ch;margin-inline:auto}
.post-head h1{font-size:clamp(2rem,1.4rem + 2.2vw,3rem);line-height:1.1}
.post-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;color:var(--muted);font-size:.9375rem}
.post-byline{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.post-byline .avatar{width:56px;height:56px}
.in-short{margin-top:32px;padding:22px 24px;background:var(--accent-tint);border:1px solid var(--accent-tint-line);border-radius:var(--radius)}
.in-short h2{font-size:1.125rem;letter-spacing:-.01em}
.in-short .bullets{margin-top:12px}
.post-body h2{margin-top:48px;font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem);line-height:1.2}
.post-body > p,.post-body > ul,.post-body > ol{margin-top:16px}
.post-body h2 + *{margin-top:14px}
.post-body .bullets{gap:12px}
.post-body > .post-fig{margin-top:32px}
.post-body > .post-fig + .post-fig{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.post-body > .fig-sources{margin-top:12px}
.post-body > .post-tiles{margin-top:24px}
.post-tiles{grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.post-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.9375rem}

/* FAQ accordion */
.faq-list{margin-top:8px}
.faq{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;color:var(--ink);font:600 1.125rem/1.4 var(--font-head);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{width:22px;height:22px;color:var(--accent-dark);transition:transform .2s var(--ease)}
.faq[open] summary .icon{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent-ink)}
.faq-a{max-width:68ch;padding:0 48px 24px 0}
.faq:not([open]) > .faq-a{display:none} /* a closed answer takes no space at all, so the section ends at the last question */
.faq-a p + p{margin-top:10px}
@media (max-width:599px){.faq summary{font-size:1.0625rem}.faq-a{padding-right:0}}
/* Page FAQ sections (7 Oct review): four questions from /faq/, verbatim, then one link to the full list */
.faq-more{margin-top:24px}
.section#questions .faq-list{margin-top:var(--gap-head)}

/* Contact: form and direct routes */
.contact-grid{display:grid;gap:40px;padding-block:48px clamp(64px,8vw,104px)}
@media (min-width:960px){.contact-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}}
.form-panel{padding:clamp(22px,3.5vw,40px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.enquiry{display:grid;gap:22px}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:599px){.field-row{grid-template-columns:1fr}}
.field{display:grid;gap:8px;align-content:start}
.field label{color:var(--ink);font-size:.9375rem;font-weight:600}
.optional{color:var(--muted);font-weight:400}
.field input,.field textarea{width:100%;padding:12px 14px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);font:400 1rem/1.5 var(--font-body)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px;border-color:var(--accent-ink);border-radius:var(--radius)}
.field [aria-invalid="true"]{border-color:var(--error);box-shadow:inset 0 0 0 1px var(--error)}
.field-help{color:var(--muted);font-size:.875rem}
.field-error{color:var(--error);font-size:.875rem;font-weight:500}
.field-error:empty{display:none}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.form-done{text-align:left}
.form-done:focus{outline:none}
.form-done h2,.form-done h3{display:flex;align-items:center;gap:12px;font-size:1.75rem}
.form-done h3{font-size:1.375rem}
.form-done h2 .icon,.form-done h3 .icon{width:30px;height:30px;color:var(--accent-dark)}
.form-done p{margin-top:14px}
.form-done .form-actions{margin-top:24px}

/* Contact: WhatsApp first, then the form */
.wa-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:32px}
.wa-number{color:var(--ink);font:600 1.25rem/1.3 var(--font-head);letter-spacing:-.01em}
.send-us h2{font-size:1.5rem}
.send-us .ticks{margin-top:20px}
.reply-note{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.reply-note .icon{width:22px;height:22px;margin-top:2px;color:var(--accent-dark)}
.reply-note p + p{margin-top:2px;color:var(--muted);font-size:.9375rem}
.form-title{font-size:1.5rem}
.form-intro{margin-top:8px;color:var(--muted);font-size:.9375rem}
.form-panel .enquiry{margin-top:28px}
.form-status{padding:12px 16px;border:1px solid var(--error);border-radius:var(--radius);background:#FDF0EF;color:var(--error);font-weight:500}
.form-status:empty{display:none}

/* About: key facts, founder, certifications, parent services, office */
.about-facts{margin-top:var(--gap-head)}
.about-prose{margin-top:var(--gap-head)}
.about-prose > * + *{margin-top:var(--gap-stack)}
.about-prose > p,.about-prose > .callout{max-width:72ch}
.about-prose .callout{margin-top:24px}
.founder{display:grid;gap:20px 56px;padding:clamp(24px,3.5vw,40px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.founder-name{color:var(--ink);font:600 1.5rem/1.2 var(--font-head);letter-spacing:-.015em}
.founder-role{margin-top:6px;color:var(--muted)}
.founder-body p + p{margin-top:12px}
.founder-links{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px}
@media (min-width:900px){.founder{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.founder-photo{margin:0;width:min(220px,60%);aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
.founder-photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.founder-with-photo{grid-template-columns:200px minmax(0,4fr) minmax(0,7fr)}.founder-photo{width:200px}}
.avatar{flex:0 0 auto;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--surface)}
.byline{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px auto 0;padding-top:20px;border-top:1px solid var(--line);max-width:560px;text-align:left}
.byline .avatar{width:56px;height:56px}
.byline-name{color:var(--ink);font-weight:600}
.byline-role{margin-top:2px;color:var(--muted);font-size:.9375rem}
.reply-note .avatar{width:48px;height:48px}
.cert-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.cert-group{padding:4px 28px 4px 0}
.cert-group + .cert-group{padding-left:28px;border-left:1px solid var(--line)}
.cert-group:last-child{padding-right:0}
.cert-group h3{font-size:1.0625rem}
.cert-group h3 a{display:inline-flex;align-items:center;gap:6px}
.cert-group h3 .icon{width:18px;height:18px;color:var(--accent-dark)}
.cert-group .cert-by{margin-top:4px;color:var(--muted);font-size:.875rem}
.cert-group .bullets{margin-top:14px;font-size:.9375rem}
@media (max-width:767px){.cert-groups{grid-template-columns:1fr;gap:24px}.cert-group,.cert-group + .cert-group{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}}
.service-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none}
.service-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none}
.service-links a:hover{border-color:var(--accent)}
.service-links .svc-name{display:block;color:var(--ink);font-weight:600}
.service-links .svc-sub{display:block;margin-top:2px;color:var(--muted);font-size:.875rem}
.service-links .icon{color:var(--accent-dark)}
@media (max-width:899px){.service-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.service-links{grid-template-columns:1fr}}
.office{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.office .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent-tint);color:var(--accent-dark)}
.office .ico .icon{width:22px;height:22px}
.office p + p{margin-top:4px;color:var(--muted);font-size:.9375rem}

/* Landing pages: numbered reasons, tagged rule grid, mapping illustration, build and process */
.reasons{list-style:none;counter-reset:reason}
.reasons li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 20px;padding:24px 0;border-top:1px solid var(--line);counter-increment:reason}
.reasons li::before{content:counter(reason,decimal-leading-zero);grid-row:span 2;color:var(--accent-ink);font:600 2rem/1 var(--font-head);letter-spacing:-.02em}
.reasons h3{margin:0}
.reasons p{font-size:.9375rem}
.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rule{padding:22px;background:var(--paper)}
.rule h3{margin:12px 0 0;font-size:1.0625rem}
.rule p{margin-top:6px;font-size:.9375rem}
.tag{display:inline-block;padding:3px 10px;border-radius:var(--pill);font-size:.75rem;font-weight:600;line-height:1.4}
.tag-policy{background:var(--ink);color:#fff}
.tag-advice{background:var(--accent-tint);border:1px solid var(--accent-tint-line);color:var(--ink)}
@media (max-width:599px){.rule-grid{grid-template-columns:1fr}}
.map-rows{display:grid;gap:14px;list-style:none}
.mapping{display:grid;gap:14px;padding:clamp(18px,3vw,28px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.map-head,.map-row{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center}
.map-head p{color:var(--muted);font-size:.8125rem;font-weight:600}
.map-head p:last-child{grid-column:3}
.map-group{padding:14px 16px;background:var(--accent-tint);border:1px solid var(--accent-tint-line);border-radius:var(--radius)}
.map-group .map-name{color:var(--ink);font-weight:600;font-size:.9375rem}
.map-group .map-hint{margin-top:4px;font-size:.875rem}
.map-arrow{display:grid;place-items:center;color:var(--accent-dark)}
.map-arrow .icon{width:22px;height:22px}
.map-page{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.map-bar{display:flex;align-items:center;gap:6px;padding:7px 12px;background:var(--surface);border-bottom:1px solid var(--line);color:var(--muted);font-size:.75rem}
.map-bar .icon{width:14px;height:14px}
.map-page .map-title{padding:12px 14px 2px;color:var(--ink);font:600 1rem/1.3 var(--font-head)}
.map-page .map-action{display:inline-block;margin:8px 14px 14px;padding:4px 12px;border-radius:var(--pill);background:var(--accent-ink);color:#fff;font-size:.75rem;font-weight:600}
@media (max-width:767px){
  .map-head{display:none}
  .map-row{grid-template-columns:1fr;gap:6px}
  .map-row + .map-row{margin-top:10px;padding-top:18px;border-top:1px dashed var(--line-strong)}
  .map-arrow .icon{transform:rotate(90deg)}
}
.build{display:grid;gap:32px 64px}
@media (min-width:900px){.build{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.build .pills{margin-top:16px}
.process{list-style:none;counter-reset:proc;border-left:1px solid var(--accent)}
.process li{position:relative;padding:0 0 24px 32px;counter-increment:proc}
.process li:last-child{padding-bottom:0}
.process li::before{content:counter(proc);position:absolute;top:0;left:-14px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--accent);border-radius:50%;background:var(--surface);color:var(--ink);font:600 .8125rem/1 var(--font-body)}
.process h3{margin:2px 0 0;font-size:1.0625rem}
.process p{margin-top:4px;font-size:.9375rem}
.mapping figcaption{color:var(--muted);font-size:.8125rem}
.build-link{margin-top:16px}
.process-title{margin-bottom:18px}
.fee-line{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted)}

/* Home: the landing page is half the ad */
.half-ad{display:grid;gap:32px 72px}
@media (min-width:960px){.half-ad{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.half-ad .lead + p{margin-top:16px}
.half-ad .text-link{margin-top:24px}
.point-list{list-style:none}
.point-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:22px 0;border-top:1px solid var(--line)}
.point-list li:first-child{padding-top:0;border-top:0}
.point-list .ico{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent-tint);color:var(--accent-dark)}
.point-list .ico .icon{width:22px;height:22px}
.point-list p{font-size:.9375rem}

/* 404 */
.lost-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:720px;margin-top:32px;list-style:none}
.lost-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-weight:600;text-decoration:none}
.lost-list a:hover{border-color:var(--accent)}
.lost-list .icon{color:var(--accent-dark)}
@media (max-width:599px){.lost-list{grid-template-columns:1fr}}

/* Floating WhatsApp button (partial:whatsapp). Clear of the iOS home indicator through the safe-area insets.
   Fades in after load, floats gently (motion only when the visitor allows it), tip on hover or focus,
   .is-away (set by site.js while a form is on screen) fades it out without restarting the entrance */
.wa-float{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:12;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--accent-ink);color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.92),0 4px 10px rgba(13,13,13,.16),0 18px 32px -12px rgba(11,123,95,.6);text-decoration:none;transition:background-color .15s var(--ease),opacity .25s var(--ease),visibility .25s;animation:wa-in .5s var(--ease) 1.2s backwards}
.wa-float:hover{background:var(--accent-ink-hover)}
.wa-float .icon{width:32px;height:32px}
.wa-float:focus-visible{border-radius:50%;outline-offset:5px}
.wa-float.is-away{opacity:0;visibility:hidden;pointer-events:none}
.wa-tip{position:absolute;right:0;bottom:calc(100% + 14px);padding:8px 14px;border-radius:10px;background:var(--ink);color:#fff;font-size:.875rem;font-weight:500;line-height:1.3;white-space:nowrap;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.wa-tip::after{content:"";position:absolute;top:100%;right:23px;border:7px solid transparent;border-top-color:var(--ink)}
.wa-float:focus-visible .wa-tip{opacity:1;transform:none}
@media (hover:hover){.wa-float:hover .wa-tip{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .wa-float{animation:wa-in .5s var(--ease) 1.2s backwards,wa-bob 4s ease-in-out 1.7s infinite}
  .wa-float:hover,.wa-float:focus-visible{animation-play-state:paused}
}
@keyframes wa-in{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes wa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Footer */
.site-footer{padding-block:56px 40px;background:var(--paper);border-top:1px solid var(--line);font-size:.9375rem}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px 48px}
.footer-brand p{margin-top:10px;color:var(--muted)}
.footer-brand p:first-of-type{margin-top:16px}
.footer-nav ul{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none}
.footer-nav a{color:var(--text);text-decoration:none;font-weight:500}
.footer-nav a:hover{text-decoration:underline;text-decoration-color:var(--accent)}
.footer-bottom{display:grid;gap:8px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.8125rem}
.footer-bottom .disclaimer{max-width:80ch}
/* Below 1360px the floating button would sit over the footer's last lines, so the footer keeps that strip empty */
@media (max-width:1359px){.site-footer{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}}

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

/* ==== Illustrative pass, addendum 7 Oct 2026 02:58. Shared components .stepper, .matrix, .flow, .wire, .badge-row, plus the
   page pieces built from them. Markup patterns live in build-notes/COMPONENTS.md. Same rules as the figures above: one accent,
   no gradient, no shadow, drawings in CSS or inline SVG, every diagram is role="img" with an aria-label. ==== */

/* Numbered callout marker: a filled circle on a drawing and the same circle in its legend */
.mk{position:relative;display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-ink);color:#fff;font:600 12px/1 var(--font-body)}
.mk-legend{display:grid;gap:14px;list-style:none}
.mk-legend li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;font-size:.9375rem;line-height:1.5}
.mk-legend .mk{margin-top:1px}

/* Home: callout markers on the "Where the ad appears" mock. Each sits in empty space beside its part; the three for the ad
   sit above the card with a short leader down to it, so nothing covers the card */
.anatomy .cgpt-answer{position:relative}
.anatomy .cgpt-answer > .mk{position:absolute;top:0;right:0}
.anatomy .cgpt-actions > .mk{margin-left:auto}
.anatomy .cgpt-ad-zone{position:relative;padding-top:44px}
.cgpt-mks{position:absolute;top:8px;left:0;right:0;height:36px}
.cgpt-mks .mk{position:absolute;top:0}
.cgpt-mks .mk::after{content:"";position:absolute;top:22px;left:10px;height:14px;border-left:1.5px solid var(--accent-ink)}
.mk-img{left:29px}
.mk-title{left:92px}
.mk-chip{right:34px}
.anatomy .cgpt-disclosure{position:relative;padding-right:32px}
.anatomy .cgpt-disclosure > .mk{position:absolute;top:0;right:0}
.anatomy-list.mk-legend{gap:16px}
.anatomy-list.mk-legend li{grid-template-columns:22px minmax(0,1fr)}

/* Home: where each channel shows its ad. Three line drawings, 160 by 100, the ad slot in the accent */
.where-row{display:grid;grid-template-columns:repeat(3,minmax(0,180px));gap:24px 40px;margin-top:var(--gap-head)}
.thumb svg{width:100%;max-width:160px;height:auto}
.thumb p{margin-top:12px;color:var(--muted);font-size:.875rem;line-height:1.4}
.thumb strong{display:block;color:var(--ink);font:600 .9375rem/1.3 var(--font-body)}
.th-frame{fill:var(--paper);stroke:var(--line-strong);stroke-width:1.5}
.th-ln{fill:none;stroke:var(--line-strong);stroke-width:1.5}
.th-ink{fill:#D9D9D9}
.th-ad{fill:var(--accent-tint);stroke:var(--accent);stroke-width:2}
.th-adk{fill:var(--accent)}
.th-adl{fill:var(--accent-tint-line)}
@media (max-width:599px){.where-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.thumb p{font-size:.8125rem}.thumb strong{font-size:.875rem}}

/* .stepper: numbered circles joined by one accent line. Vertical by default; .is-row runs left to right from 768px */
.stepper{display:grid;list-style:none;counter-reset:st}
.stepper > li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:18px;align-content:start;padding-bottom:28px;counter-increment:st}
.stepper > li:last-child{padding-bottom:0}
.stepper > li::before{content:counter(st);grid-row:1 / span 4;display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--accent);border-radius:50%;background:var(--paper);color:var(--accent-ink);font:600 .9375rem/1 var(--font-head)}
.stepper > li::after{content:"";position:absolute;top:44px;bottom:8px;left:17px;border-left:1.5px solid var(--accent)}
.stepper > li:last-child::after{content:none}
.stepper h3,.doc-section .stepper h3{margin:6px 0 0;font-size:1.0625rem}
.stepper p{margin-top:4px;font-size:.9375rem}
.step-time{display:block;margin-top:14px;padding-top:8px;border-top:3px solid var(--accent);color:var(--ink);font-size:.8125rem;font-weight:600;line-height:1.4}
.step-time.is-open{border-top:2px dashed var(--line-strong);color:var(--muted);font-weight:500}
@media (min-width:768px){
  .stepper.is-row{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:32px}
  .stepper.is-row > li{display:block;padding-bottom:0}
  .stepper.is-row > li::after{top:18px;bottom:auto;left:44px;right:-24px;border-left:0;border-top:1.5px solid var(--accent)}
  .stepper.is-row h3{margin-top:20px}
  .stepper.is-row p{margin-top:8px}
}
.section .stepper{margin-top:var(--gap-head)}

/* .matrix: two columns, test now and wait. Glyph plus a short label per row, no sentences */
.matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--gap-head);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.matrix-col{padding:clamp(20px,3vw,32px)}
.matrix-col + .matrix-col{border-left:1px solid var(--line)}
.matrix-head{display:flex;align-items:center;gap:10px;color:var(--ink);font:600 1.25rem/1.2 var(--font-head);letter-spacing:-.01em}
.matrix-head .icon{width:28px;height:28px}
.matrix ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:22px;list-style:none}
.matrix li{display:flex;align-items:center;gap:10px;color:var(--ink);line-height:1.3}
.matrix li .icon{width:20px;height:20px}
.matrix .is-yes .icon{color:var(--accent-dark)}
.matrix .is-wait .icon{color:var(--muted)}
.matrix-sub{margin-top:22px;color:var(--muted);font-size:.8125rem;font-weight:600}
.matrix-sub + ul{margin-top:12px}
.matrix-cap{margin-top:14px;color:var(--muted);font-size:.875rem}
@media (max-width:767px){.matrix{grid-template-columns:1fr}.matrix-col + .matrix-col{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:379px){.matrix ul{grid-template-columns:1fr}}

/* .wire: a wireframe page in CSS. Grey skeleton bars, highlighted zones in the accent, numbered markers on the zone corners */
.wire-frame{min-width:0;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--radius);overflow:hidden}
.wire-bar{padding:8px 12px;border-bottom:1px solid var(--line)}
.wire-url{display:block;overflow:hidden;padding:2px 10px;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);color:var(--muted);font-size:.75rem;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.wire-body{display:grid;gap:14px;padding:18px 16px}
.wire-zone{position:relative;display:grid;gap:7px;justify-items:start;padding:12px}
.wire-zone.is-on{background:var(--accent-tint);border:1.5px solid var(--accent);border-radius:var(--radius-sm)}
.wire-zone > .mk{position:absolute;top:-11px;left:-11px}
.wire-h{color:var(--ink);font:600 1rem/1.25 var(--font-head)}
.wire-btn{display:inline-block;padding:6px 14px;border-radius:var(--pill);background:var(--accent-ink);color:#fff;font-size:.75rem;font-weight:600;line-height:1.3}
.wire-fold{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.75rem}
.wire-fold::before,.wire-fold::after{content:"";flex:1;border-top:1px dashed var(--line-strong)}
.sk{display:block;width:100%;height:8px;border-radius:2px;background:#E3E3E3}
.is-on .sk{background:var(--accent-tint-line)}
.sk.w-90{width:90%}.sk.w-70{width:70%}.sk.w-50{width:50%}.sk.w-30{width:30%}
.sk-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.sk-boxes span{height:34px;border-radius:4px;background:var(--accent-tint-line)}

/* Home and Landing pages: the ad card, an arrow, the page it lands on */
.adflow-fig{min-width:0}
.adflow{display:grid;grid-template-columns:minmax(0,11fr) 36px minmax(0,10fr);gap:14px;align-items:center}
.adflow .cgpt-ad{color:var(--ink);font:400 15px/1.5 var(--font-body)}
.adflow .cgpt-ad-brand .icon{width:16px;height:16px}
.adflow-arrow{display:grid;place-items:center;color:var(--accent-dark)}
.adflow-arrow .icon{width:28px;height:28px}
.adflow-fig .mk-legend{margin-top:28px}
.adflow-fig figcaption{margin-top:var(--gap-fig);color:var(--muted);font-size:.875rem;line-height:1.45}
@media (max-width:599px){.adflow{grid-template-columns:minmax(0,1fr)}.adflow-arrow .icon{transform:rotate(90deg)}}
.half-ad .adflow-fig{margin-top:8px}

/* .badge-row: plain text credentials in hairline boxes, no logos */
.badge-row{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.badge-row a,.badge-row .badge{display:inline-flex;align-items:center;gap:8px;height:100%;padding:8px 14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-size:.875rem;font-weight:500;line-height:1.35;text-decoration:none}
.badge-row a:hover{border-color:var(--accent)}
.badge-row .icon{width:14px;height:14px;color:var(--muted)}
.prose-block .badge-row{justify-content:center;margin-top:24px}
@media (min-width:860px){.prose-block .badge-row{margin-inline:-70px}}

/* .stepper.is-dates: the same line with a small ring per date instead of a number (Singapore guide, About). .is-us fills the ring */
.stepper.is-dates > li::before{content:"";grid-row:1 / span 3;width:14px;height:14px;margin:4px 11px 0}
.stepper.is-dates > li::after{top:24px}
.stepper.is-dates > li.is-us::before{background:var(--accent);border-color:var(--accent)}
.step-date{color:var(--accent-ink);font:600 .9375rem/1.4 var(--font-head)}
.stepper.is-dates p.step-date + p{margin-top:2px}
@media (min-width:768px){.stepper.is-row.is-dates > li::before{margin:4px 0 0}.stepper.is-row.is-dates > li::after{top:11px;left:24px;right:-28px}.stepper.is-row.is-dates p.step-date{margin-top:16px}}
.doc-section .matrix{margin-top:0}
.doc-section .matrix-head{margin-top:0}

/* Singapore guide: plan ladder. Five plans as stacked bars, the two that show ads in the accent */
.ladder{display:grid;gap:6px;list-style:none}
@media (min-width:768px){.ladder{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.ladder li{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px}}
.ladder li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);font-size:.875rem;font-weight:600}
.ladder li.is-on{background:var(--accent-tint);border:1.5px solid var(--accent);color:var(--accent-ink)}
.ladder .plan{color:var(--muted);font:600 1rem/1.3 var(--font-head)}
.ladder .is-on .plan{color:var(--ink)}
.ladder .plan span{font:500 .875rem/1 var(--font-body)}
.ladder-fig figcaption,.week-fig figcaption,.locks-fig figcaption{margin-top:var(--gap-fig);color:var(--muted);font-size:.875rem;line-height:1.45}

/* Singapore guide: a week of daily budget. 50px is one daily budget, so the dashed line at 100px is the 2x cap */
.week{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:end;height:150px;margin-top:20px;border-bottom:1px solid var(--line-strong)}
.week-cap{position:absolute;left:0;right:0;bottom:100px;border-top:1.5px dashed var(--muted)}
.week-day{display:flex;flex-direction:column;align-items:center;gap:6px}
.week-bar{width:min(100%,44px);height:calc(var(--d) * 50px);border-radius:2px 2px 0 0;background:var(--mark)}
.week-val{color:var(--ink);font:600 .8125rem/1 var(--font-head);white-space:nowrap}
.is-us .week-val{color:var(--accent-ink)}
.week-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:8px;color:var(--muted);font-size:.8125rem;text-align:center}
.d-050{--d:.5}.d-075{--d:.75}.d-100{--d:1}.d-125{--d:1.25}.d-200{--d:2}
.week-key{display:grid;gap:8px;margin-top:18px;font-size:.9375rem}
.week-key p{display:flex;align-items:center;gap:10px}
.key-dash{flex:none;width:28px;border-top:1.5px dashed var(--muted)}
.key-sum{flex:none;width:28px;color:var(--accent-ink);font:600 .9375rem/1 var(--font-head);text-align:center}

/* Singapore guide: the three settings that lock at account creation */
.locks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lock-field{position:relative;padding:14px 44px 14px 16px;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm)}
.lock-label{display:block;color:var(--muted);font-size:.8125rem;line-height:1.3}
.lock-val{display:block;margin-top:4px;color:var(--ink);font:600 1.0625rem/1.3 var(--font-head)}
.lock-field .icon{position:absolute;top:50%;right:14px;width:20px;height:20px;margin-top:-10px;color:var(--accent-dark)}
@media (max-width:599px){.locks{grid-template-columns:1fr}}

/* .flow: boxes joined by arrows. Left to right from 600px, top to bottom below. .flow-stack groups several inputs behind one
   bracket so they feed a single arrow (How it works signals). .is-on is the outcome box in the accent */
.flow{display:flex;align-items:center;gap:10px}
.flow-box{flex:1 1 0;min-width:0;padding:12px 14px;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--ink);font:600 .9375rem/1.3 var(--font-head);text-align:center}
.flow-box.is-on{background:var(--accent-tint);border-color:var(--accent)}
.flow-box small{display:block;margin-top:4px;color:var(--muted);font:400 .8125rem/1.35 var(--font-body)}
.flow-arrow{display:grid;place-items:center;flex:none;color:var(--accent-dark)}
.flow-arrow .icon{width:22px;height:22px}
.flow-stack{display:grid;flex:1.6 1 0;gap:6px;min-width:0;padding-right:12px;border-right:1.5px solid var(--accent);list-style:none}
.flow-stack li{padding:7px 12px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--pill);color:var(--ink);font-size:.875rem;font-weight:500;line-height:1.3}
.flow-fig figcaption,.nest-fig figcaption,.hint-fig figcaption{margin-top:var(--gap-fig);color:var(--muted);font-size:.875rem;line-height:1.45}
@media (max-width:599px){
  .flow{flex-direction:column;align-items:stretch}
  .flow-arrow .icon{transform:rotate(90deg)}
  .flow-stack{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 0 12px;border-right:0;border-bottom:1.5px solid var(--accent)}
}
/* .flow-nest: containment instead of arrows (campaign holds ad groups holds ads) */
.flow-nest{padding:16px;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--radius)}
.flow-nest .flow-nest{margin-top:14px;background:var(--surface)}
.flow-nest .flow-nest .flow-nest{background:var(--accent-tint);border-color:var(--accent)}
.nest-level{color:var(--muted);font-size:.8125rem;font-weight:600}
.nest-ex{margin-top:2px;color:var(--ink);font:600 1.0625rem/1.3 var(--font-head)}
.nest-set{margin-top:2px;color:var(--muted);font-size:.875rem}
.nest-ad{margin-top:8px;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}
.nest-ad b{display:block;color:var(--ink);font-size:.9375rem}
.nest-ad span{color:var(--muted);font-size:.875rem}

/* How it works: billing legend above the objectives table. Three columns with hairlines, not cards */
.bill-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-block:1px solid var(--line);list-style:none}
.bill-legend li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 12px;align-content:start;padding:16px 16px 16px 0;background:var(--surface)}
.bill-legend li + li{padding-left:16px}
.bill-legend .icon{grid-row:span 2;width:28px;height:28px;color:var(--accent-dark)}
.bill-legend b{color:var(--ink);font:600 1rem/1.3 var(--font-head)}
.bill-legend span{font-size:.875rem;line-height:1.4}
@media (max-width:599px){.bill-legend{grid-template-columns:1fr}.bill-legend li + li{padding-left:0}}

/* How it works: a keyword struck through beside a context hint */
.hint-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.chip-off,.chip-on{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--pill);font-size:1rem;line-height:1.35}
.chip-off{background:var(--paper);border:1px solid var(--line-strong);color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.chip-on{background:var(--accent-tint);border:1.5px solid var(--accent);color:var(--ink);font-weight:500}
.chip-off .icon,.chip-on .icon{width:18px;height:18px}
.chip-on .icon{color:var(--accent-dark)}

/* How it works and Services: things money cannot buy. Short lines, each behind a prohibit glyph; no cards */
.nope{display:grid;gap:14px;list-style:none}
.nope li{display:flex;align-items:center;gap:14px;color:var(--ink);font:600 1.125rem/1.35 var(--font-head)}
.nope .icon{width:26px;height:26px;color:var(--muted)}
.nope-note{margin-top:18px;color:var(--muted);font-size:.9375rem}

/* Landing pages: four requirement chips with a check each */
.req-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.req-chips li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--paper);border:1.5px solid var(--accent);border-radius:var(--pill);color:var(--ink);font-weight:600;font-size:.9375rem;line-height:1.3}
.req-chips .icon{width:18px;height:18px;color:var(--accent-dark)}
.req-fig figcaption,.wire-fig figcaption{margin-top:var(--gap-fig);color:var(--muted);font-size:.875rem;line-height:1.45}

/* Landing pages: annotated lead-gen wireframe. Desktop frame with a phone beside it, legend to the right from 900px */
.wire-fig{display:grid;gap:28px}
@media (min-width:900px){.wire-fig{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}.wire-fig figcaption{grid-column:1 / -1;margin-top:0}}
.wire-cols{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:16px;align-items:start}
.wire-main{display:grid;gap:14px}
.wire-phone{position:relative;display:grid;gap:5px;padding:12px 7px 14px;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--paper)}
.wire-phone.is-on{border-color:var(--accent);background:var(--accent-tint)}
.wire-phone > .mk{position:absolute;top:-11px;left:-11px}
.wire-phone .sk{height:5px}
.wire-phone .wire-btn{padding:3px 6px;font-size:.5625rem;text-align:center}
.wire-event{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink);font-size:.75rem;font-weight:600}
.wire-event .icon{width:14px;height:14px}

/* Landing pages: connecting line in the mapping figure */
.map-arrow{position:relative;align-self:stretch}
.map-arrow::before{content:"";position:absolute;top:50%;left:0;right:6px;border-top:1.5px solid var(--accent)}
.map-arrow .icon{position:relative;justify-self:end;background:var(--paper)}
@media (max-width:767px){.map-arrow{height:32px}.map-arrow::before{top:0;bottom:6px;left:50%;right:auto;border-top:0;border-left:1.5px solid var(--accent)}.map-arrow .icon{justify-self:center;align-self:end}}

/* Landing pages: platform chips in two rows of four */
.chip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none}
.chip-grid li{padding:8px 10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-size:.875rem;font-weight:500;text-align:center}
@media (max-width:479px){.chip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.build .chip-grid{margin-top:16px}

/* Services: offers as a bento of four, two wide and two narrow, each led by a drawn tile */
.offers.is-bento{grid-template-columns:repeat(12,minmax(0,1fr))}
.is-bento .offer{grid-column:span 6;grid-template-columns:minmax(0,1fr);align-content:start;gap:24px}
@media (min-width:1024px){.is-bento .offer.is-wide{grid-column:span 7}.is-bento .offer.is-narrow{grid-column:span 5}}
@media (max-width:767px){.is-bento .offer{grid-column:1 / -1}}
.offer-art{display:grid;place-items:center;height:132px;margin:-4px 0 4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}
.offer-art svg{width:150px;height:auto}
.is-bento .offer-fee{margin-top:4px}
.th-acc{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.section .nope{margin-top:var(--gap-head)}.section .nope-note{max-width:68ch}
.chip-grid li{white-space:nowrap}
.doc-section .build-platforms{margin-top:36px}
.doc-section .build-platforms + .chip-grid{margin-top:14px}

/* About: dated line inside the prose column, certification badges in three columns, service chips, office pin */
.about-prose .stepper{margin-top:24px}
.cert-groups .badge-row{flex-direction:column;align-items:flex-start;margin-top:14px}
.cert-groups .badge-row .badge{font-size:.875rem}
.chip-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none}
@media (max-width:767px){.chip-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.chip-links{grid-template-columns:minmax(0,1fr)}}
.chip-links a{display:flex;height:100%;align-items:center;gap:8px;padding:10px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--pill);color:var(--ink);font-weight:600;font-size:.9375rem;text-decoration:none}
.chip-links a:hover{border-color:var(--accent)}
.chip-links a span{color:var(--muted);font-weight:400}
.chip-links .icon{width:14px;height:14px;margin-left:auto;color:var(--accent-dark)}
.section .chip-links{margin-top:var(--gap-head)}
.office-pin{flex:none;width:44px;height:56px}
.office-pin .pin-body{fill:var(--accent-tint);stroke:var(--accent);stroke-width:2}
.office-pin .pin-dot{fill:var(--paper);stroke:var(--accent);stroke-width:2}
.office-pin .pin-ground{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-linecap:round}
.office.has-pin{grid-template-columns:44px minmax(0,1fr)}
#certifications .cert-groups{margin-top:var(--gap-head)}

/* Creative redesign, 7 October 2026. Native CSS agency aesthetic.
   DESIGN_VARIANCE 8, MOTION_INTENSITY 3, VISUAL_DENSITY 5.
   Light theme retained from the approved brand brief. Typography and imagery
   carry the expression; factual charts and form contracts remain unchanged. */
@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/outfit-latin.woff2) format('woff2')}
.creative{--ink:#16352b;--text:#293c34;--muted:#58675e;--surface:#fafaf6;--paper:#fffffc;--line:#dce2d9;--line-strong:#829086;--accent:#168b69;--accent-dark:#086849;--accent-ink:#086849;--accent-ink-hover:#07563e;--accent-tint:#e4eee1;--accent-tint-line:#b8d0bd;--font-head:Outfit,system-ui,sans-serif;--space-section:clamp(52px,5.7vw,82px);--gap-head:32px;--radius:16px;color-scheme:light;font-size:1rem}
.creative h1,.creative h2,.creative h3{font-weight:500;letter-spacing:-.04em}
.creative h2{font-size:clamp(1.9rem,2.8vw,2.8rem);line-height:1.08}
.creative h3{font-size:1.35rem;line-height:1.2;letter-spacing:-.025em}
.creative .wrap{max-width:1360px}
.creative .section-head{max-width:720px}
.creative .lead{font-size:1.0625rem;max-width:62ch}
.creative .wordmark{font-family:'Inter Tight',system-ui,sans-serif}
.creative .site-header{background:var(--surface);border:0}
.creative .header-bar{height:76px}
.creative .site-nav a{font-size:.875rem;padding:9px 10px}
.creative .site-nav a:hover{background:var(--accent-tint)}
.creative .btn{border-radius:8px;min-height:50px;padding-inline:22px;transition:transform .18s ease,background-color .18s ease}
.creative .btn:hover{transform:translateY(-2px)}
.creative .btn-sm{min-height:42px;padding-inline:16px}
.creative .btn-primary{background:var(--accent-ink);color:#fffffc}
.creative .text-link{font-size:.9375rem}
.creative .hero{padding:28px 0 42px}
.creative .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:42px;align-items:center}
.creative .hero-copy{padding-block:22px}
.hero-kicker{font-size:.875rem;font-weight:500;color:var(--accent-ink);margin-bottom:24px}
.creative .hero h1{font-size:clamp(3rem,4.9vw,4.4rem);line-height:1.04;letter-spacing:-.05em;max-width:none}
.creative .hero h1 span{display:block;color:var(--accent-ink)}
.creative .hero-sub{max-width:38ch;margin-top:24px;font-size:1.125rem;line-height:1.55}
.creative .hero-actions{margin-top:28px;gap:20px}
.hero-art{min-width:0;border-radius:120px 18px 18px 18px;overflow:hidden;align-self:stretch;min-height:440px}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:46% center}
.creative .status{padding:0 0 36px}
.creative .stats{border:0;background:var(--accent-tint);border-radius:16px;overflow:hidden;gap:0}
.creative .stat{padding:24px 28px;border-right:1px solid var(--accent-tint-line)}
.creative .stat:last-child{border-right:0}
.creative .stat-value{font-family:var(--font-head);font-size:1.55rem;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.creative .stat-label{font-size:.8125rem;max-width:25ch}
.creative .stats-note{margin-top:10px;font-size:.75rem}
.creative #singapore-ai{padding-top:36px}
.creative #singapore-ai .fig-row.is-bento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px}
.creative #singapore-ai .fig{grid-column:auto;padding:30px;background:var(--paper);border:1px solid var(--line);border-radius:16px;min-width:0}
.creative #singapore-ai .fig-wide{background:var(--accent-tint);border:0}
.city-photo{margin:0;position:relative;min-width:0;display:flex;flex-direction:column}
.city-photo img{width:100%;height:100%;min-height:360px;max-height:440px;object-fit:cover;border-radius:16px}
.city-photo figcaption{font-size:.6875rem;color:var(--muted);margin-top:8px}
.evidence-number{font:500 6rem/.95 var(--font-head);letter-spacing:-.075em;color:var(--accent-ink);margin:0 0 16px}
.evidence-number span{font-size:.5em;letter-spacing:-.04em}
.creative #singapore-ai .fig-title{font-size:1rem;max-width:44ch;font-weight:500;line-height:1.35}
.creative #singapore-ai .fig-wide .hbars{margin-top:25px}
.creative #singapore-ai .hbar{height:9px;border-radius:0 3px 3px 0}
.creative #singapore-ai .hbars li{grid-template-columns:82px minmax(0,1fr)}
.creative .fig figcaption{font-size:.75rem;line-height:1.5;padding-top:20px;margin-top:auto}
.creative .note-text,.creative .fig-sources{font-size:.8125rem;line-height:1.6}
.creative #singapore-ai .pairs{grid-template-columns:1fr 1fr;gap:24px;display:grid}
.creative #singapore-ai .pair+.pair{margin-top:0}
.creative #singapore-ai .vbars{height:150px;gap:8px}
.creative #singapore-ai .vbar{max-width:42px}
.creative #singapore-ai .vbar-col{width:56px}
.creative #singapore-ai .pair-name{font-size:.8125rem}
.creative .placement-story{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:64px;row-gap:26px;align-items:start}
.placement-story .section-head{grid-column:1;grid-row:1}
.placement-story .platform-reference{grid-column:2;grid-row:1 / span 2;align-self:center}
.placement-story .placement-points{grid-column:1;grid-row:2}
.platform-reference{max-width:100%;min-width:0;margin:24px 0}
.platform-reference img{width:100%;height:auto;border-radius:16px}
.platform-reference figcaption{margin-top:12px;font-size:.75rem;color:var(--muted);line-height:1.5}
.placement-story .platform-reference{margin:0}
.placement-points{display:grid;gap:22px}
.placement-points h3{font-size:1.2rem}
.placement-points p{font-size:.9375rem;line-height:1.5;max-width:42ch;margin-top:6px}
.creative #compare{background:#f0f3ec}
.creative .channel-thumbs{gap:32px}
.creative .thumb{background:none;border:0;padding:0}
.creative .thumb svg{width:100%;max-width:230px;height:140px;margin-bottom:16px}
.comparison-details{margin-top:28px;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.comparison-details>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:22px;font-size:1rem;font-weight:600;list-style:none}
.comparison-details>summary::-webkit-details-marker{display:none}
.comparison-details[open]>summary .icon{transform:rotate(45deg)}
.comparison-details .table-scroll{margin:0;border:0;border-radius:0}
.creative .data-table{font-size:.9375rem}
.creative .matrix{gap:24px;align-items:stretch}
.creative .matrix-col{padding:32px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.creative .matrix-col.is-yes{background:var(--accent-tint);border:0}
.creative .matrix-col.is-wait{background:#f1f2ec}
.creative .matrix-head{font-size:1.6rem;gap:12px}
.creative .matrix-col ul{grid-template-columns:1fr 1fr;gap:14px}
.creative .matrix-col li{font-size:.9375rem}
.creative #first-month{border-block:1px solid var(--line)}
.creative .stepper.is-row{gap:32px}
.creative .stepper h3{font-size:1.15rem}
.creative .stepper p{font-size:.9375rem}
.creative .stepper>li::before{background:var(--accent-tint);border:0;font-family:var(--font-head);color:var(--accent-ink)}
.creative .step-time{font-size:.75rem}
.creative .half-ad{gap:54px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
.creative .half-ad .adflow-fig{padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.creative .half-ad .mk-legend{font-size:.8125rem;gap:12px}
.creative .adflow-fig figcaption{font-size:.75rem}
.creative .founder-story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center;text-align:left}
.portrait-feature{max-width:430px;justify-self:center;overflow:hidden;border-radius:16px 100px 16px 16px;background:var(--accent-tint)}
.portrait-feature img{display:block;width:100%;height:auto}
.founder-story-copy h2{max-width:20ch;margin-bottom:22px}
.founder-story-copy>p{font-size:.9375rem;max-width:60ch;margin-top:16px}
.creative .founder-story-copy .badge-row{margin:24px 0;gap:8px;justify-content:flex-start}
.creative .founder-story-copy .badge-row a{font-size:.75rem;padding:9px 12px;border-radius:6px;background:transparent}
.creative .founder-story-copy .byline{margin-top:24px;justify-content:flex-start;text-align:left}
.creative .founder-story-copy .byline-role{max-width:46ch}
.creative .founder-story-copy .prose-links{justify-content:flex-start;gap:12px 24px;margin-top:20px}
.creative .founder-story-copy .prose-links a:last-child{display:none}
.creative .journal-feature{background:#eef2e9}
.journal-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:60px;align-items:center}
.journal-grid>div .text-link{margin-top:24px}
.journal-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;text-decoration:none}
.journal-story>img{width:100%;height:250px;object-fit:cover;border-radius:12px}
.journal-story time{font-size:.8125rem;color:var(--muted)}
.journal-story h3{font-size:1.7rem;margin:12px 0 22px}
.creative #questions>.wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);column-gap:60px;align-items:start}
.creative #questions .section-head{grid-column:1;grid-row:1}
.creative #questions .faq-list{grid-column:2;grid-row:1 / span 2;margin:0;max-width:none}
.creative #questions .faq-more{grid-column:1;grid-row:2;margin-top:22px}
.creative .faq{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;margin:0}
.creative .faq summary{padding:21px 0;font-size:1rem;font-weight:500}
.creative .faq-a{padding:0 0 22px;font-size:.9375rem}
.creative .closer{padding:72px 0;background:var(--accent-tint);border:0}
.creative .closer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.creative .closer-copy{text-align:left;align-self:center;max-width:500px}
.creative .closer-copy h2{font-size:clamp(2.2rem,3.8vw,3.5rem);max-width:15ch;line-height:1.08}
.creative .closer-copy>p{max-width:42ch;font-size:1rem}
.closer-person{display:flex;gap:14px;align-items:center;margin-bottom:28px}
.closer-person img{border-radius:50%;width:60px;height:60px;object-fit:cover}
.closer-person p{font-size:.875rem;line-height:1.5}
.closer-person span{display:block;color:var(--muted);font-size:.8125rem}
.creative .enquiry-card,.creative .form-panel{background:var(--paper);padding:32px;border:1px solid #aabdae;border-radius:16px;box-shadow:0 16px 40px #15392b08}
.creative .form-title{font-size:1.6rem}
.creative .form-intro{font-size:.875rem}
.creative input,.creative textarea{border-radius:7px;background:#f4f6f0;border:1px solid #7c8b80;color:var(--text);font-size:1rem}
.creative input:focus,.creative textarea:focus{background:var(--paper)}
.creative .field label{font-size:.875rem;color:var(--text)}
.creative .field-help{font-size:.75rem}
.creative .site-footer{background:var(--surface)}
.creative .page-head{padding:40px 0 44px;border-bottom:1px solid var(--line)}
.creative .editorial-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px 70px;align-items:center}
.editorial-title{min-width:0}
.creative .editorial-title h1{font-size:clamp(2.5rem,4.2vw,3.7rem);max-width:20ch;line-height:1.07}
.creative .editorial-title .lead{max-width:45ch;font-size:1.0625rem}
.creative .editorial-title .page-meta{max-width:58ch;font-size:.75rem;margin-top:20px}
.editorial-image{overflow:hidden;border-radius:70px 16px 16px 16px;height:300px;background:var(--accent-tint)}
.editorial-image img{width:100%;height:100%;object-fit:cover}
.editorial-image.portrait{max-width:310px;width:100%;justify-self:center;border-radius:100px 100px 16px 16px}
.editorial-image.portrait img{object-position:center 25%}
.creative .editorial-head .toc{grid-column:1 / -1;margin:0;padding:20px 0 0;border-top:1px solid var(--line);background:none}
.creative .toc-title{display:none}
.creative .toc ol{gap:10px 20px}
.creative .toc a{font-size:.8125rem}
.creative .doc-section{padding-block:56px}
.creative .doc-section>h2{margin-bottom:22px;max-width:28ch}
.creative .doc-section>p{max-width:68ch}
.creative .doc-section .platform-reference{max-width:800px;margin:28px auto}
.creative .doc-section .anatomy-list{max-width:800px;margin:24px auto;grid-template-columns:repeat(2,minmax(0,1fr))}
.creative .offers.is-bento{grid-template-columns:1fr 1fr;gap:24px}
.creative .offer.is-wide,.creative .offer.is-narrow{grid-column:auto;grid-template-columns:1fr;gap:22px;padding:32px;border-radius:16px;background:var(--paper)}
.creative .offer:nth-child(1),.creative .offer:nth-child(4){background:var(--accent-tint);border-color:var(--accent-tint)}
.creative .offer-head h3{font-size:1.8rem}
.creative .offer-head>p{font-size:.9375rem}
.creative .offer-get{font-size:.8125rem}
.creative .offer .ticks{font-size:.875rem;gap:12px}
.creative .founder-with-photo{max-width:1040px;margin:auto;grid-template-columns:320px minmax(0,1fr);gap:20px 50px;padding:36px;border-radius:16px;background:var(--accent-tint)}
.creative .founder-with-photo .founder-photo{grid-column:1;grid-row:1 / span 2;max-width:none;margin:0}
.creative .founder-photo img{width:100%;border-radius:12px}
.creative .founder-body{grid-column:2}
.creative .founder-name{font-size:2.2rem}
.creative .founder-body p{font-size:.9375rem}
.creative .post-list>li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 40px;border:0;align-items:start}
.post-thumbnail{grid-column:1;grid-row:1 / span 2}
.post-thumbnail img{width:100%;height:300px;object-fit:cover;border-radius:16px}
.creative .post-list time{grid-column:2;align-self:end}
.creative .post-list>li>div{grid-column:2}
.creative .post-list h3{font-size:2.3rem}
.post-cover{margin:32px 0}
.post-cover img{width:100%;max-height:420px;object-fit:cover;border-radius:16px}
.creative .post-title{font-family:var(--font-head)}
.creative .contact-grid{padding-block:52px;gap:80px}
@media(max-width:1199px){.creative .header-bar{grid-template-columns:auto 1fr auto;gap:16px}.creative .site-nav a{font-size:.79rem;padding-inline:7px}.creative .hero-grid{gap:32px}.creative .hero-art{min-height:400px}.creative .hero h1{font-size:3.6rem}.creative .closer-grid{gap:40px}.creative #singapore-ai .pairs{gap:12px}.creative .editorial-head{gap:30px}}
@media(max-width:1023px){.creative .header-bar{grid-template-columns:1fr auto}.creative .header-actions{grid-column:2}.creative .site-nav{grid-column:auto}.creative .site-nav a{font-size:1rem;padding:14px 4px}.creative .hero-grid{grid-template-columns:1fr 1fr;gap:24px}.creative .hero h1{font-size:3rem}.hero-kicker{max-width:28ch}.creative .hero-art{min-height:365px}.creative #singapore-ai .pairs{grid-template-columns:1fr}.creative #singapore-ai .vbars{height:120px}.creative #singapore-ai .pair+.pair{margin-top:18px}.creative .placement-story,.creative .founder-story{gap:30px}.journal-grid{gap:28px}.journal-story{grid-template-columns:1fr}.journal-story>img{height:180px}.creative #questions>.wrap{gap:28px}.creative .hero-actions{gap:18px}.creative .hero-actions .text-link{font-size:.875rem}}
@media(max-width:767px){
 .creative{--gutter:22px;--space-section:48px}.creative .header-bar{height:68px}.creative .wordmark{font-size:1.1rem}.creative .header-actions{gap:8px}.creative .btn-sm{padding-inline:12px;font-size:.8125rem;min-height:40px}.creative .hero{padding:18px 0 30px}.creative .hero-grid{grid-template-columns:1fr;gap:26px}.creative .hero-copy{padding:0}.hero-kicker{margin-bottom:15px;max-width:none;font-size:.8125rem}.creative .hero h1{font-size:clamp(2.5rem,10.8vw,3.7rem);max-width:100%}.creative .hero-sub{font-size:1rem;max-width:37ch;margin-top:18px}.creative .hero-actions{margin-top:22px;gap:16px}.creative .hero-actions .btn{font-size:.875rem;padding-inline:16px}.creative .hero-actions .text-link{font-size:.8125rem}.creative .hero-art{min-height:0;height:240px;border-radius:65px 12px 12px 12px}.creative .hero-art img{object-position:center 48%}.creative .status{padding-bottom:20px}.creative .stats{grid-template-columns:1fr 1fr}.creative .stat{padding:20px 16px;border:0}.creative .stat:nth-child(odd){border-right:1px solid var(--accent-tint-line)}.creative .stat:nth-child(-n+2){border-bottom:1px solid var(--accent-tint-line)}.creative .stat-value{font-size:1.25rem}.creative .stat-label{font-size:.75rem}.creative #singapore-ai{padding-top:28px}.creative #singapore-ai .fig-row.is-bento{grid-template-columns:1fr;gap:18px}.creative #singapore-ai .fig{padding:24px}.city-photo img{height:240px;min-height:0}.evidence-number{font-size:5.5rem}.creative #singapore-ai .pairs{grid-template-columns:1fr 1fr;gap:16px}.creative #singapore-ai .pair+.pair{margin:0}.creative #singapore-ai .vbar-col{width:42px}.creative #singapore-ai .vbar{max-width:32px}.creative #singapore-ai .vbars{gap:5px;height:140px}.creative .placement-story{grid-template-columns:1fr;gap:24px}.placement-story .section-head,.placement-story .platform-reference,.placement-story .placement-points{grid-column:1;grid-row:auto}.placement-points{gap:18px}.placement-story .platform-reference{order:1}.placement-story .placement-points{order:2}.creative .channel-thumbs{gap:16px}.creative .thumb svg{height:auto}.creative .thumb p{font-size:.8125rem}.creative .matrix{grid-template-columns:1fr;gap:18px}.creative .matrix-col{padding:24px}.creative .matrix-col ul{grid-template-columns:1fr 1fr}.creative .half-ad{grid-template-columns:1fr;gap:26px}.creative .half-ad .adflow-fig{padding:20px}.creative .founder-story{grid-template-columns:1fr;gap:28px}.portrait-feature{max-width:320px;width:100%}.portrait-feature img{max-height:380px;object-fit:cover;object-position:top}.founder-story-copy h2{max-width:22ch}.journal-grid{grid-template-columns:1fr;gap:30px}.journal-story{grid-template-columns:1fr}.journal-story>img{height:220px}.creative #questions>.wrap{display:block}.creative #questions .faq-list{margin-top:24px}.creative #questions .faq-more{margin-top:24px}.creative .closer{padding:46px 0}.creative .closer-grid{grid-template-columns:1fr;gap:30px}.creative .closer-copy h2{font-size:2.5rem}.creative .enquiry-card,.creative .form-panel{padding:24px 20px}.closer-person{margin-bottom:22px}.creative .page-head{padding:28px 0 30px}.creative .editorial-head{grid-template-columns:1fr;gap:24px}.creative .editorial-title h1{font-size:2.45rem;max-width:22ch}.creative .editorial-title .lead{font-size:1rem}.editorial-image{height:220px;border-radius:60px 12px 12px 12px}.editorial-image.portrait{height:240px;max-width:250px}.creative .editorial-head .toc{grid-column:1;padding-top:20px}.creative .doc-section{padding-block:40px}.creative .offers.is-bento{grid-template-columns:1fr}.creative .offer.is-wide,.creative .offer.is-narrow{padding:24px;gap:20px}.creative .founder-with-photo{grid-template-columns:1fr;padding:24px;gap:24px}.creative .founder-with-photo .founder-photo{grid-column:1;grid-row:auto;max-width:320px;justify-self:center}.creative .founder-body{grid-column:1}.creative .post-list>li{grid-template-columns:1fr;gap:20px}.post-thumbnail,.creative .post-list time,.creative .post-list>li>div{grid-column:1;grid-row:auto}.post-thumbnail img{height:240px}.creative .post-list h3{font-size:1.9rem}.creative .post-list time{margin-bottom:-12px}.creative .contact-grid{grid-template-columns:1fr;gap:36px;padding-block:36px}
}
@media(prefers-reduced-motion:reduce){.creative .btn,.creative .text-link .icon{transition:none}.creative .btn:hover{transform:none}}
/* Final visual review corrections: reserve label clearance on the shared 0 to 100 chart scale. */
.creative #singapore-ai .vbars{height:200px;margin-top:8px}
.creative #singapore-ai .pair-name{min-height:38px}
.creative .stat{background:transparent}
.creative .founder-with-photo .founder-photo{width:100%}
.creative .toc a{border:0;border-radius:0;padding:5px 0;background:none;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
@media(min-width:1024px){.creative .editorial-title h1{font-size:3.15rem}}
@media(max-width:767px){.creative #singapore-ai .vbars{height:185px}.creative .doc-section .anatomy-list{grid-template-columns:1fr}.creative .home-page .stat{min-width:0}}
.creative #singapore-ai .fig>.split{margin:24px 0 18px}
.pay-key{display:grid;gap:10px;margin-bottom:24px;font-size:.875rem}
.pay-key>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.pay-key dd{font-family:var(--font-head);font-weight:600;white-space:nowrap}
.pay-key>div:first-child{color:var(--accent-ink)}