/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL SYSTEM (5 Oct 2026)
   A calm, minimal set of cards, labels and rows, with the layout rules taken
   from naka.framer.website and expressed in Laccino's own fonts, colours and
   near-square corners (Patrick's call: no large radii). Loaded last on every
   page, after fuel.css. Classes are opt-in: nothing changes until markup uses
   them. Started on the Work page, the case study and "Who we build for".

   Tokens   --ed-*  (spacing, radii, hairline, muted text, tray)
   Classes  .ed-eyebrow .ed-head .ed-card .ed-project .ed-feature .ed-stat
            .ed-chip .ed-list-row .ed-btn .ed-seg .ed-tray .ed-meta .ed-icon
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ed-space-section:clamp(72px,9vw,140px); --ed-space-card:clamp(24px,2.4vw,32px); --ed-gap:clamp(12px,1.4vw,20px);
  --ed-width:1200px; --ed-read:700px;
  --ed-radius-tray:4px; --ed-radius-card:4px; --ed-radius-icon:4px; --ed-radius-pill:999px;
  --ed-line:rgb(17 17 17 / 9%); --ed-line-strong:rgb(17 17 17 / 18%);
  --ed-ink:#111111; --ed-muted:rgb(17 17 17 / 62%); --ed-tray:#F4F4F4; --ed-card:#FFFFFF;
  --ed-accent:var(--brand-leaf, #479C73); --ed-accent-tint:rgb(71 156 115 / 12%);
}
/* Dark bands that use the system get the same rules, inverted. */
.ed-dark { --ed-line:rgb(255 255 255 / 8%); --ed-line-strong:rgb(255 255 255 / 18%); --ed-ink:#fff; --ed-muted:rgb(255 255 255 / 64%); --ed-tray:#1A1A1A; --ed-card:#141414; --ed-accent-tint:rgb(71 156 115 / 18%); }

html[data-theme] body .ed-section { padding:var(--ed-space-section) 24px!important; }
html[data-theme] body .ed-wrap { width:100%; max-width:var(--ed-width); margin-inline:auto; }

/* Eyebrow: small pill label, tinted fill, optional dot. */
html[data-theme] body .ed-eyebrow { display:inline-flex!important; align-items:center; gap:6px; width:auto!important; padding:4px 10px!important; border:0!important; border-radius:var(--ed-radius-pill)!important; background:var(--ed-accent-tint)!important; color:var(--ed-ink)!important; font:500 12px/1.4 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important; box-shadow:none!important; }
html[data-theme] body .ed-eyebrow::before, html[data-theme] body .ed-eyebrow::after { content:none!important; }
/* No dots in front of labels (Patrick, 5 Oct): .has-dot is kept in the markup but draws nothing. */
.ed-eyebrow.has-dot::before { content:none!important; }

/* Section head: eyebrow, a two-line title (second part muted), optional action on the right. */
.ed-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px 24px; margin-bottom:clamp(32px,4vw,56px); }
.ed-head > .ed-eyebrow { grid-column:1 / -1; justify-self:start; }
html[data-theme] body .ed-head__title { grid-column:1; margin:0!important; max-width:20ch; font:500 clamp(34px,3.8vw,52px)/1.08 var(--font-sans)!important; letter-spacing:-.02em!important; text-transform:none!important; color:var(--ed-ink)!important; }
html[data-theme] body .ed-muted { color:var(--ed-muted)!important; }
.ed-head__action { grid-column:2; justify-self:end; }
html[data-theme] body .ed-lede { margin:0; max-width:56ch; font:400 16px/1.6 var(--font-sans)!important; letter-spacing:0!important; color:var(--ed-muted)!important; }

/* Buttons: black pill primary, ghost pill secondary, 44px tall. */
html[data-theme] body .ed-btn { display:inline-flex!important; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px!important; border:1px solid var(--ed-ink)!important; border-radius:var(--ed-radius-pill)!important; background:var(--ed-ink)!important; color:var(--ed-card, #fff)!important; font:500 14px/1 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important; text-decoration:none!important; box-shadow:none!important; transition:transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s; }
html[data-theme] body .ed-btn::after { content:none!important; }
html[data-theme] body .ed-btn svg { width:12px; height:12px; flex:none; }
html[data-theme] body .ed-btn.is-ghost { background:transparent!important; color:var(--ed-ink)!important; border-color:var(--ed-line-strong)!important; }
html[data-theme] body .ed-btn.is-block { width:100%!important; }
@media (hover:hover) { html[data-theme] body .ed-btn:hover { transform:translateY(-1px); } }

/* Segmented pill control (used for filters). */
html[data-theme] body .ed-seg { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border:1px solid var(--ed-line); border-radius:var(--ed-radius-pill); background:var(--ed-card); }
html[data-theme] body .ed-seg > button { min-height:36px; padding:6px 14px!important; border:0!important; border-radius:var(--ed-radius-pill)!important; background:transparent!important; color:var(--ed-muted)!important; font:500 13px/1 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important; cursor:pointer; }
html[data-theme] body .ed-seg > button.is-active { background:var(--ed-ink)!important; color:var(--ed-card)!important; }
html[data-theme] body .ed-seg sup { margin-left:4px; font-size:10px; opacity:.7; vertical-align:super; }

/* Card: surface, hairline, no shadow; lifts 2px on hover. */
html[data-theme] body .ed-card { padding:var(--ed-space-card)!important; border:1px solid var(--ed-line)!important; border-radius:var(--ed-radius-card)!important; background:var(--ed-card)!important; color:var(--ed-ink)!important; box-shadow:none!important; transition:transform .2s ease, border-color .2s ease; }
@media (hover:hover) { html[data-theme] body a.ed-card:hover, html[data-theme] body .ed-card.is-hover:hover { transform:translateY(-2px); border-color:var(--ed-line-strong)!important; } }
html[data-theme] body .ed-tray { display:block; overflow:hidden; border-radius:var(--ed-radius-tray)!important; background:var(--ed-tray)!important; }
html[data-theme] body .ed-icon { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:var(--ed-radius-icon); background:var(--ic, var(--ed-accent)); color:#111; font:600 13px/1 var(--font-sans); }
html[data-theme] body .ed-chip { display:inline-flex; align-items:center; padding:4px 10px!important; border:1px solid var(--ed-line-strong)!important; border-radius:var(--ed-radius-pill)!important; background:transparent!important; color:var(--ed-ink)!important; font:500 12px/1.4 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important; box-shadow:none!important; }

/* Meta list: label left, value right, hairlines between. */
html[data-theme] body .ed-meta { display:grid; margin:0; padding:0; }
html[data-theme] body .ed-meta > div { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--ed-line); }
html[data-theme] body .ed-meta > div:last-child { border-bottom:1px solid var(--ed-line); }
html[data-theme] body .ed-meta dt { font:400 14px/1.4 var(--font-sans); color:var(--ed-muted); }
html[data-theme] body .ed-meta dd { margin:0; font:500 14px/1.4 var(--font-sans); color:var(--ed-ink); text-align:right; }

/* Project row: info card on the left, large media tray on the right. */
html[data-theme] body .ed-project { display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:var(--ed-gap); align-items:stretch; }
html[data-theme] body .ed-project__info { display:flex; flex-direction:column; gap:14px; }
html[data-theme] body .ed-project__title { margin:8px 0 0!important; font:500 clamp(22px,2vw,28px)/1.15 var(--font-sans)!important; letter-spacing:-.02em!important; text-transform:none!important; color:var(--ed-ink)!important; }
html[data-theme] body .ed-project__copy { margin:0; font:400 15px/1.55 var(--font-sans)!important; letter-spacing:0!important; color:var(--ed-muted)!important; }
html[data-theme] body .ed-project__info .ed-meta { margin-top:auto; }
html[data-theme] body .ed-project__info .ed-btn { margin-top:16px; }
html[data-theme] body .ed-project__media { aspect-ratio:16 / 11; min-height:100%; }
html[data-theme] body .ed-project__media img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
html[data-theme] body .ed-project__media .media-placeholder { display:block; width:100%; height:100%; background:var(--ed-tray)!important; }
@media (max-width:899px) { html[data-theme] body .ed-project { grid-template-columns:minmax(0,1fr); } html[data-theme] body .ed-project__media { order:-1; min-height:0; } }

/* Feature: a full-width tray with a centred info card floating on it. */
html[data-theme] body .ed-feature { position:relative; display:grid; place-items:center; min-height:clamp(380px,40vw,560px); padding:clamp(24px,4vw,56px); border-radius:var(--ed-radius-tray); background:var(--ed-tray); overflow:hidden; }
html[data-theme] body .ed-feature__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; }
html[data-theme] body .ed-feature__card { position:relative; display:grid; gap:14px; justify-items:start; max-width:400px; box-shadow:0 30px 60px rgb(0 0 0 / 10%)!important; }

/* Stats: big number, muted caption. */
html[data-theme] body .ed-stat { display:grid; gap:12px; align-content:start; }
html[data-theme] body .ed-stat__value { display:block; padding-bottom:14px; border-bottom:1px solid var(--ed-line); font:500 clamp(40px,4vw,56px)/1 var(--font-sans); letter-spacing:-.03em; color:var(--ed-ink); }
html[data-theme] body .ed-stat__caption { margin:0; font:400 14px/1.5 var(--font-sans); color:var(--ed-muted); }

/* List row: number or icon, title, muted text, chevron. */
html[data-theme] body .ed-list-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:16px; padding:20px 0; border-top:1px solid var(--ed-line); }
html[data-theme] body .ed-list-row:last-child { border-bottom:1px solid var(--ed-line); }

/* Gentle entrance: fade and a 16px rise, through the existing data-reveal. */
html.has-reveal body :is(.ed-project,.ed-card,.ed-feature)[data-reveal] { transform:translateY(16px); }
html.has-reveal body :is(.ed-project,.ed-card,.ed-feature)[data-reveal].is-revealed { transform:none; }

/* Work index: the project rows stack in one column (overrides css/work.css). */
html[data-theme] body .wk__grid.ed-stack { display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-auto-rows:auto!important; gap:var(--ed-gap)!important; margin:0!important; }
html[data-theme] body .wk__grid.ed-stack > .wk__item { grid-column:auto!important; grid-row:auto!important; width:auto!important; aspect-ratio:auto!important; margin:0!important; padding:0!important; background:none!important; border:0!important; }
html[data-theme] body .wk__grid.ed-stack > .wk__item[hidden] { display:none!important; }
html[data-theme] body .ed-seg > button::before, html[data-theme] body .ed-seg > button::after { content:none!important; }
@media (max-width:767px) {
  .ed-head { grid-template-columns:minmax(0,1fr); }
  .ed-head__action { grid-column:1; justify-self:start; }
}

/* "Who we build for": editorial cards, media tray on top, equal heights. */
html[data-theme] body[data-page='home']:not(#_):not(#__) ._03 > .aud__head { width:100%; max-width:var(--nk-w, 1120px); margin:0 auto clamp(32px,4vw,48px)!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__) ._03 .aud__item { display:flex; }
html[data-theme] body[data-page='home']:not(#_):not(#__) ._03 .aud__card.ed-card { display:flex!important; flex-direction:column; gap:12px; width:100%; padding:12px 12px 20px!important; background:var(--ed-card)!important; border:1px solid var(--ed-line)!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__) ._03 .aud__card .aud__media { margin:0 0 8px!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__) ._03 .aud__name { margin:0!important; padding:0 8px!important; font:500 22px/1.2 var(--font-sans)!important; letter-spacing:-.02em!important; color:var(--ed-ink)!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__) ._03 .aud__copy { margin:0!important; padding:0 8px!important; font:400 15px/1.55 var(--font-sans)!important; color:var(--ed-muted)!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__) ._03 .aud__tag.ed-chip { align-self:flex-start; margin:auto 8px 0!important; }

/* Case study template (work-inside-out.html and every future case study). */
html[data-theme] body .cs.cs--ed { display:block!important; max-width:none!important; margin:0!important; background:var(--c-paper, #fff)!important; }
html[data-theme] body .cs-ed__head { display:grid; justify-items:start; gap:16px; max-width:var(--ed-read); margin-bottom:clamp(32px,4vw,56px); }
html[data-theme] body .cs-ed__back { margin-bottom:12px; }
html[data-theme] body .cs-ed__title { margin:0!important; font:500 clamp(38px,4.6vw,64px)/1.05 var(--font-sans)!important; letter-spacing:-.025em!important; text-transform:none!important; color:var(--ed-ink)!important; }
html[data-theme] body .cs-ed__hero { aspect-ratio:1440 / 900; margin:0!important; }
html[data-theme] body :is(.cs-ed__hero,.cs-ed__wide) img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
html[data-theme] body .cs-ed__facts { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); margin:clamp(32px,4vw,56px) 0; }
html[data-theme] body .cs-ed__scope { display:grid; align-content:start; justify-items:start; gap:16px; }
html[data-theme] body .cs-ed__label { margin:0!important; font:500 12px/1.4 var(--font-sans)!important; letter-spacing:.06em!important; text-transform:uppercase!important; color:var(--ed-muted)!important; }
html[data-theme] body .cs-ed__chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
html[data-theme] body .cs-ed__read { display:grid; gap:14px; max-width:var(--ed-read); margin:clamp(48px,6vw,96px) auto clamp(24px,3vw,40px); }
html[data-theme] body .cs-ed__body { margin:0!important; font:400 clamp(18px,1.6vw,21px)/1.6 var(--font-sans)!important; letter-spacing:-.005em!important; color:var(--ed-ink)!important; }
html[data-theme] body .cs-ed__wide { display:grid; place-items:center; max-width:960px; margin:0 auto clamp(64px,8vw,120px)!important; padding:clamp(24px,4vw,56px) 0; }
html[data-theme] body .cs-ed__wide img { width:auto; max-width:320px; height:auto; border-radius:4px; box-shadow:0 30px 60px rgb(0 0 0 / 12%); }
html[data-theme] body .cs-next.ed-feature { margin-top:0; }
html[data-theme] body .cs-ed__next-title { margin:0!important; font:500 clamp(28px,3vw,40px)/1.1 var(--font-sans)!important; letter-spacing:-.02em!important; text-transform:none!important; color:var(--ed-ink)!important; }
@media (max-width:767px) { html[data-theme] body .cs-ed__facts { grid-template-columns:minmax(0,1fr); } }

/* ── Phase d: site-wide rollout (5 Oct 2026) ──────────────────────────────
   The same tokens applied to the shared section parts that already exist on
   the homepage and the inner pages (about, capabilities, products, insights,
   blog, careers, pricing, faq), so copy, routes and scripts stay as they are.
   Page intros, the header, sign-in, chat, consent and the Lab are left alone,
   and so are the pricing cards (their corners stay as Patrick chose).
   No new dividers: rows are separated by space, cards by a hairline edge. */

/* Dark bands (homepage work, pricing hero and questions) take the dark tokens. */
:is(.sx--deep:not(#pricing),.hx--deep) { --ed-line:rgb(255 255 255 / 8%); --ed-line-strong:rgb(255 255 255 / 22%); --ed-ink:#fff; --ed-muted:rgb(255 255 255 / 66%); --ed-tray:#1A1A1A; --ed-card:#141414; }

/* Labels: the block's brand accent as a soft tint with a dot, black text. */
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) :is(.sx__eyebrow,.section-label) {
  display:inline-flex!important; align-items:center; gap:6px; width:auto!important; padding:5px 11px!important; border:0!important; border-radius:var(--ed-radius-pill)!important; box-shadow:none!important;
  background:color-mix(in srgb, var(--ac, var(--ed-accent)) 16%, var(--ed-card))!important; color:var(--ed-ink)!important; font:500 13px/1.3 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important;
}
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) :is(.sx__eyebrow,.section-label)::before { content:none!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) :is(.sx__eyebrow,.section-label)::after { content:none!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .ed-eyebrow__num { color:var(--ed-muted); font-variant-numeric:tabular-nums; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .section-label .ed-eyebrow__num { color:rgb(17 17 17 / 62%)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .section-label { color:#111!important; }

/* Section titles and ledes: sentence case, medium weight, muted lede. */
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) :is(.sx__title,.page-section > h2) { max-width:20ch; font:500 clamp(34px,3.8vw,52px)/1.08 var(--font-sans)!important; letter-spacing:-.02em!important; text-transform:none!important; color:var(--ed-ink)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .sx__lede { max-width:56ch; font:400 16px/1.6 var(--font-sans)!important; letter-spacing:0!important; color:var(--ed-muted)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .sx__head { gap:16px; margin-bottom:clamp(32px,4vw,56px); }

/* Cards on inner pages: white surface, hairline edge, 4px corners, no shadow. */
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .cards { gap:var(--ed-gap)!important; background:none!important; border:0!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .cards .card { display:flex; flex-direction:column; gap:12px; padding:var(--ed-space-card)!important; border:1px solid var(--ed-line)!important; border-radius:var(--ed-radius-card)!important; background:var(--ed-card)!important; box-shadow:none!important; transition:transform .2s ease, border-color .2s ease; }
@media (hover:hover) { html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .cards .card:hover { transform:translateY(-2px); border-color:var(--ed-line-strong)!important; } }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .cards .card .status { margin:0 0 8px!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .cards .card .c-title { margin:0!important; font:500 clamp(22px,2vw,28px)/1.15 var(--font-sans)!important; letter-spacing:-.02em!important; text-transform:none!important; color:var(--ed-ink)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .cards .card p:not(.status) { margin:0; font:400 15px/1.55 var(--font-sans)!important; letter-spacing:0!important; color:var(--ed-muted)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .cards .card .c-media { border-radius:var(--ed-radius-tray)!important; background:var(--ed-tray)!important; }

/* Capability pillars: the Work page project row (info card beside a tray). */
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar { grid-template-columns:minmax(0,.46fr) minmax(0,.54fr)!important; gap:var(--ed-gap)!important; align-items:stretch!important; margin:0 0 var(--ed-gap)!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; box-shadow:none!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar > .text { display:flex; flex-direction:column; gap:12px; padding:var(--ed-space-card); border:1px solid var(--ed-line); border-radius:var(--ed-radius-card); background:var(--ed-card); }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar .num { display:block; margin:0 0 8px!important; font:500 12px/1.4 var(--font-sans)!important; letter-spacing:.06em!important; color:var(--ed-muted)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar .p-title { margin:0!important; max-width:none; font:500 clamp(28px,3vw,40px)/1.1 var(--font-sans)!important; letter-spacing:-.02em!important; text-transform:none!important; color:var(--ed-ink)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar .p-prop { margin:0!important; font:400 18px/1.5 var(--font-sans)!important; letter-spacing:0!important; color:var(--ed-ink)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar .text > p:not(.p-prop) { margin:0!important; font:400 15px/1.55 var(--font-sans)!important; letter-spacing:0!important; color:var(--ed-muted)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar .p-list { display:flex; flex-wrap:wrap; gap:8px; margin:auto 0 0!important; padding-top:12px; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar .p-list li { padding:0!important; border:0!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar .p-list li span { display:inline-flex; padding:5px 11px; border:1px solid var(--ed-line-strong); border-radius:var(--ed-radius-pill); font:500 13px/1.35 var(--font-sans)!important; color:var(--ed-ink)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar > .media { min-height:320px; border-radius:var(--ed-radius-tray)!important; background:var(--ed-tray)!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar > .media .media-placeholder { display:block; width:100%; height:100%; background:none!important; }
@media (max-width:899px) {
  html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar { grid-template-columns:minmax(0,1fr)!important; }
  html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar.reverse .text { order:0!important; }
  html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .pillar > .media { order:-1; min-height:200px; }
}

/* Numbered lists: a number chip beside the text, spaced as rows. */
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .stack-list li { display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; gap:16px!important; align-items:baseline!important; padding:14px 0!important; border:0!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .stack-list .st-num { display:inline-grid; place-items:center; min-width:32px; height:24px; padding:0 8px; border-radius:var(--ed-radius-pill); background:var(--ed-tray); font:500 12px/1 var(--font-sans)!important; color:var(--ed-ink)!important; font-variant-numeric:tabular-nums; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .stack-list li > span:last-child { font:500 clamp(17px,1.5vw,20px)/1.45 var(--font-sans)!important; letter-spacing:-.01em!important; color:var(--ed-ink)!important; }

/* Homepage work showcase: tags as chips. */
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .hws__tags li { padding:5px 11px!important; border-radius:var(--ed-radius-pill)!important; font:500 12px/1.35 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important; }
html[data-theme] body:is([data-page='home'],[data-page='about'],[data-page='capabilities'],[data-page='products'],[data-page='insights'],[data-page='blog'],[data-page='careers'],[data-page='pricing'],[data-page='faq']):not(#_):not(#__):not(#___) .hws__tags li:not(:first-child) { border:1px solid var(--ed-line-strong)!important; background:transparent!important; color:var(--ed-ink)!important; }

/* ── Cards instead of glass (5 Oct 2026) ──────────────────────────────────
   The frosted panels are gone. The areas that had them (homepage pricing and
   Start a project, the pricing page plans, contact, book, careers, review,
   sign-in) sit on the light grey tray with white cards on top, as on
   naka.framer.website: hairline edge, no blur, black text, black pill
   buttons. Fields have a 3:1 edge. Pricing cards keep their corner sizes.
   The footer stays dark; its newsletter bar is a solid dark card. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(#start.sx,#pricing.sx,.pr-tiers,.page-section:has(.contact-form-panel),.book-section,.careers-interest,.page-section:has(.js-review-form)) {
  --bg-page:var(--ed-tray); --surface-card:#fff; --surface-input:#fff; --text-primary:var(--ed-ink); --text-secondary:var(--ed-muted); --c-muted:var(--ed-muted);
  background:var(--ed-tray)!important; color:var(--ed-ink)!important; color-scheme:light;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form,.pr-blob,.sx-plan) {
  background:var(--ed-card)!important; border:1px solid var(--ed-line)!important; box-shadow:none!important; color:var(--ed-ink)!important;
  -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form) { padding:var(--ed-space-card)!important; border-radius:var(--ed-radius-card)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.pr-blob,.sx-plan) { padding:clamp(24px,2.6vw,36px)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .pr-tiers :is(.pr-blob,.sx-plan) { border-radius:20px!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.pr-blob--glow,.sx-plan--featured) { border-color:var(--ed-ink)!important; }

/* The featured plan card is dark, so its words have to be light.
   9 Oct 2026: that card rendered almost empty. fuel.css paints it #111111
   while the other plan cards stay white, and the rule a few lines above sets
   colour:var(--ed-ink) - also #111111 - on every .pr-blob and .sx-plan. Two
   layers, each assuming the other surface, and the result was #111111 text on
   a #111111 card. Only the three elements carrying their own colour showed:
   the flag, the CTA, and the green list markers.
   The fix lives here, not in fuel.css, because this file loads after it and
   guards its rules with !important behind ID-level :not() selectors, so
   nothing earlier in the cascade is heard at all. The first attempt sat in
   fuel.css and changed nothing.

   The :not(#____) and :not(#_____) are not decoration. The rule that was
   winning on the summary and the list items is scoped by
   :is(#start.sx,#pricing.sx,.pr-tiers,...), and :is() takes the weight of its
   heaviest argument - #pricing.sx - so that rule carries four IDs. Three could
   not beat it with any number of classes, because ID count is compared first.
   Four wins the list; five wins the name and price over the line above.

   This is the arms race the consolidation spec describes, and adding to it
   here is the cost of fixing invisible text today rather than after that
   work. When buttons and cards move into the components layer, these two
   rules should move with them and lose the :not(#_) chain entirely.

   Values are literal: --ed-ink and --c-muted are each declared twice in this
   codebase with opposite light and dark values, and a fix for invisible text
   must not depend on which declaration happens to win.
   Measured after the change, against the card's own #111111: name and price
   18.88:1, everything else 11.60:1. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-blob.pr-blob--glow.sx-plan--featured :is(h2,h3,h4,p,label,legend,dt,strong,b,span,li):not(.sx-plan__flag):not(.sx-plan__flag *):not(.pr-plan__cta):not(.pr-plan__cta *) { color:rgb(255 255 255 / 78%)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____):not(#_____) .pr-blob.pr-blob--glow.sx-plan--featured :is(.sx-plan__name,.sx-plan__price,.pr-plan__price,.pr-price,.pr-price__val):not(.sx-plan__flag) { color:#FFFFFF!important; }

/* The flag on this card was the same bug wearing a different hat, and the
   contrast check is what caught it. It has no background of its own -
   computed backgroundColor is rgba(0,0,0,0) - so it sits straight on the
   #111111 card, and it was being coloured by the eyebrow rule, which picks a
   dark green meant for light surfaces: #204634 on #111111 is 1.79:1. The
   accent token reads as the same green while staying legible here. Five IDs
   because the eyebrow rule carries four. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____):not(#_____) .pr-blob.pr-blob--glow.sx-plan--featured .sx-plan__flag { color:var(--c-accent)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form,.pr-blob,.sx-plan) :is(h2,h3,h4,label,legend,dt,strong,b,span,li):not(button *,.sx-plan__flag,.ed-btn *) { color:var(--ed-ink)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form,.pr-blob,.sx-plan) :is(p,small,dd):not(button *) { color:var(--ed-muted)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form,.pr-blob,.sx-plan) :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']),textarea,select) {
  background:#fff!important; color:var(--ed-ink)!important; border:1px solid rgb(17 17 17 / 45%)!important; border-radius:var(--ed-radius-card)!important; box-shadow:none!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form) :is(input,textarea)::placeholder { color:rgb(17 17 17 / 55%)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form) :is(input,textarea,select):focus-visible { outline:2px solid var(--ed-ink)!important; outline-offset:2px; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form) :is(input[type='checkbox'],input[type='radio']) { accent-color:var(--ed-ink); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form) :is(.field,fieldset) { background:transparent!important; border:0!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form) button[type='submit'] {
  min-height:44px; background:var(--ed-ink)!important; color:#fff!important; border:0!important; border-radius:var(--ed-radius-pill)!important; box-shadow:none!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form) button[type='submit'] * { color:#fff!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hc__form,.contact-form-panel,.page-section .newsletter-form,.career-form,.js-review-form) button[type='submit']:not(:disabled):hover { background:#000!important; transform:translateY(-1px); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.pr-blob,.sx-plan) :is(.pr-plan__cta,.pr-plan__cta *) { color:var(--ed-ink)!important; }
/* Text beside the cards (statements, contact details, intros) on the tray. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(#start.sx,#pricing.sx,.pr-tiers,.page-section:has(.contact-form-panel),.book-section,.careers-interest,.page-section:has(.js-review-form)) :is(h1,h2,h3,h4,label,legend,dt,strong,b,li,figcaption,a:not(.ed-btn):not(.button-frame)):not(button *,.sx-plan__flag,.sx-plan__flag *,.pr-cur *,.pr-pick *,.ld-mockup *,.sx__eyebrow,.section-label,.section-label *) { color:var(--ed-ink)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(#start.sx,#pricing.sx,.pr-tiers,.page-section:has(.contact-form-panel),.book-section,.careers-interest,.page-section:has(.js-review-form)) :is(p,small,dd):not(button *,.ld-mockup *,.pr-pick *) { color:var(--ed-muted)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.review-aside,.contact-direct,.book-aside,.careers-interest__intro) { background:transparent!important; }
/* Footer newsletter: a solid dark card, no blur. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .site-footer .footer-newsletter { background:#1A1A1A!important; border:1px solid rgb(255 255 255 / 12%)!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .site-footer .footer-newsletter :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden'])) { background:#111!important; color:#fff!important; border:1px solid rgb(255 255 255 / 45%)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .site-footer .footer-newsletter button[type='submit'] { background:#fff!important; color:#111!important; border:0!important; }
/* Sign-in: the page stays dark (the art panel needs it); the card is solid, no blur. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .auth-shell {
  --bg-page:var(--c-ink-soft); --surface-card:transparent; --surface-raised:transparent; --surface-input:transparent; --text-highlight:#fff; --text-accent:#fff; --text-on-accent:#111; --text-primary:#fff; --text-secondary:rgb(255 255 255 / 70%); --text-muted:rgb(255 255 255 / 70%);
  --c-muted:rgb(255 255 255 / 70%); --c-line:rgb(255 255 255 / 20%); --border-subtle:var(--c-line); --ink:#fff; --text:#fff;
  background:#0B0B0B!important; color:#fff; color-scheme:dark;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .auth-shell :is(.auth-login-zone,.auth-footer,.auth-ascii-art) { background:transparent!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .auth-shell .auth-workspace { padding:var(--ed-space-card)!important; background:#141414!important; border:1px solid rgb(255 255 255 / 12%)!important; border-radius:var(--ed-radius-card)!important; box-shadow:none!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; color:#fff!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .auth-shell :is(h1,h2,h3,h4,label,legend,dt,strong,b,a,span,li):not(button *,.ld-mockup *) { color:#fff!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .auth-shell :is(p,small,dd):not(button *) { color:rgb(255 255 255 / 72%)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .auth-shell .auth-workspace :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']),textarea,select) { background:#0B0B0B!important; color:#fff!important; border:1px solid rgb(255 255 255 / 45%)!important; border-radius:var(--ed-radius-card)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .auth-shell .auth-workspace :is(input,textarea)::placeholder { color:rgb(255 255 255 / 62%)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .auth-shell .auth-workspace button[type='submit'] { background:#fff!important; color:#111!important; border:0!important; border-radius:var(--ed-radius-pill)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .auth-shell .auth-workspace button[type='submit'] * { color:#111!important; }

/* Homepage hero text (5 Oct 2026): the editorial treatment. A pill label, one
   ink colour for the headline with its last words muted and a lighter lede.
   The actions keep the ruled text link (fuel.css ButtonLink). The three
   steps underneath are small muted captions. */
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .hero-intro__eyebrow {
  display:inline-flex!important; align-items:center; gap:6px; width:auto!important; padding:5px 11px!important; border-radius:var(--ed-radius-pill)!important;
  background:color-mix(in srgb, var(--brand-leaf) 16%, #fff)!important; color:var(--ed-ink)!important; font:500 13px/1.3 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important;
}
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .hero-intro__eyebrow::before { content:none!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .hero-intro h1 {
  margin:20px 0 0!important; max-width:none!important; font:700 clamp(46px,5.4vw,84px)/1 var(--font-sans)!important; letter-spacing:-.04em!important; text-wrap:balance; color:var(--ed-ink)!important;
}
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .hero-intro__soft { color:inherit!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .hero-intro__lede {
  max-width:44ch!important; margin-top:clamp(16px,1.6vw,24px)!important; font:400 clamp(16px,1.25vw,19px)/1.55 var(--font-sans)!important; letter-spacing:-.005em!important; text-wrap:pretty; color:var(--ed-muted)!important;
}
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .text-list { margin-top:clamp(28px,3vw,44px)!important; gap:clamp(16px,2.4vw,40px)!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .text-list .js-scramble-text { font:500 12px/1.45 var(--font-sans)!important; letter-spacing:.04em!important; color:var(--ed-muted)!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .text-list .bullet-green { padding-left:0!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .text-list .bullet-green::before { content:none!important; display:none!important; }
@media (max-width:767px) {
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .hero-intro h1 { max-width:none!important; font-size:clamp(42px,12vw,52px)!important; }
}

/* Accent buttons (5 Oct 2026): the hero's text-and-corner-arrow button,
   now on a brand accent fill so it stands out from the background. Used for
   the hero, the Work page rows and its lower CTAs, the case study, the
   homepage work showcase, the pricing cards, See full pricing and the
   other .sx-btn calls to action. Text is always black on the accent (4.5:1 or more on
   all six, and higher on hover, which lightens). Form submits, filters, the
   back button and the header and footer buttons are unchanged.
   --btn-ac picks the colour; it follows each block's accent where one exists. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hero .hero-action, a.ed-btn:not(.is-ghost), .hws__link, .hw__all, .pr-plan__cta, a.sx-btn, #pricing .sx-cta__actions .button-frame) {
  display:inline-flex!important; align-items:center; justify-content:center; gap:10px; width:auto!important; min-height:44px; padding:12px 18px!important;
  border:0!important; border-radius:var(--ed-radius-card)!important; background:var(--btn-ac, var(--brand-leaf))!important; box-shadow:none!important;
  color:#111!important; font:600 15px/1.2 var(--font-sans)!important; letter-spacing:-.01em!important; text-transform:none!important; text-decoration:none!important;
  transition:background-color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1)!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hero .hero-action, a.ed-btn:not(.is-ghost), .hws__link, .hw__all, .pr-plan__cta, a.sx-btn, #pricing .sx-cta__actions .button-frame)::after { content:''!important; display:block!important; flex:none; width:6px; height:6px; margin:0 0 4px!important; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transition:transform 180ms ease; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hero .hero-action, a.ed-btn:not(.is-ghost), .hws__link, .hw__all, .pr-plan__cta, a.sx-btn, #pricing .sx-cta__actions .button-frame):hover { background:color-mix(in srgb, var(--btn-ac, var(--brand-leaf)) 80%, #fff)!important; transform:translateY(-1px); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hero .hero-action, a.ed-btn:not(.is-ghost), .hws__link, .hw__all, .pr-plan__cta, a.sx-btn, #pricing .sx-cta__actions .button-frame):hover::after { transform:translate(2px,-2px); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hero .hero-action, a.ed-btn:not(.is-ghost), .hws__link, .hw__all, .pr-plan__cta, a.sx-btn, #pricing .sx-cta__actions .button-frame):focus-visible { outline:2px solid #111!important; outline-offset:3px; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hero .hero-action, a.ed-btn:not(.is-ghost), .hws__link, .hw__all, .pr-plan__cta, a.sx-btn, #pricing .sx-cta__actions .button-frame) :is(svg,.icon-arrow,[aria-hidden='true']) { display:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hero .hero-action, a.ed-btn:not(.is-ghost), .hws__link, .hw__all, .pr-plan__cta, a.sx-btn, #pricing .sx-cta__actions .button-frame) span { color:inherit!important; font:inherit!important; text-transform:none!important; background:none!important; padding:0!important; }
/* Colours. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .hero .hero-action:not(.hero-action--primary) { --btn-ac:var(--brand-periwinkle); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .wk__item:nth-child(6n+2) { --btn-ac:var(--brand-periwinkle); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .wk__item:nth-child(6n+3) { --btn-ac:var(--brand-marigold); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .wk__item:nth-child(6n+4) { --btn-ac:var(--brand-slate); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .wk__item:nth-child(6n+5) { --btn-ac:var(--brand-terra); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .wk__item:nth-child(6n+6) { --btn-ac:var(--brand-sand); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .ed-feature a.ed-btn { --btn-ac:var(--brand-periwinkle); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.hws__item,.pr-blob,.sx-plan) :is(.hws__link,.pr-plan__cta) { --btn-ac:var(--ac, var(--brand-leaf)); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .hw__all { --btn-ac:var(--brand-sand); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) a.sx-btn { --btn-ac:var(--ac, var(--brand-leaf)); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) #pricing .sx-cta__actions .button-frame { --btn-ac:var(--brand-slate); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) #pricing .sx-cta__actions .button-frame .label-wrap { display:inline!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) .ed-project__info a.ed-btn { align-self:flex-start; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___) :is(.pr-blob,.sx-plan) .pr-plan__cta { align-self:stretch; margin-top:auto!important; }
@media (max-width:810px) { html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .hero-intro__actions { display:flex!important; flex-wrap:wrap; gap:4px 28px!important; } html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .hero-action { width:auto!important; } }
@media (max-width:810px) { html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___) .hero .hero-action { flex:0 0 auto!important; white-space:nowrap; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ (one shared style: homepage #faq, faq.html and the pricing page)
   Adapted from bestwebsitetemplate.com, 5 Oct 2026: a centred heading over a
   single centred column of questions, hairline rules between rows, a thin
   plus on the right that turns into a cross when open, and the answer in
   muted text. Markup stays native <details>/<summary> (build/sections.mjs and
   build/pricing.mjs). Opening and closing animate with ::details-content and
   interpolate-size where the browser supports them; elsewhere they just open.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --faq-w:800px; --faq-rule:rgb(17 17 17 / 12%); --faq-q:clamp(17px,1.4vw,20px); --faq-pad:clamp(20px,2vw,28px); --faq-ease:cubic-bezier(.22,1,.36,1); }
.sx--deep:not(#pricing) { --faq-rule:rgb(255 255 255 / 16%); }

/* Layout: centred head, centred list. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) #faq .hq__grid { display:block!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(#faq .hq__head, .fq > .sx__inner > .sx__head, .fq .sx__head, section:has(> .sx__inner .pr-faq__item) .sx__head) {
  display:grid!important; justify-items:center; gap:16px; max-width:var(--faq-w); margin:0 auto clamp(40px,5vw,72px)!important; padding:0!important; text-align:center; position:static!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(#faq .hq__head, .fq .sx__head, section:has(> .sx__inner .pr-faq__item) .sx__head) :is(.sx__title, .sx__lede) { margin-inline:auto!important; text-align:center; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(#faq .hq__head, .fq .sx__head, section:has(> .sx__inner .pr-faq__item) .sx__head) .sx__title { max-width:18ch; font:600 clamp(36px,4vw,56px)/1.05 var(--font-sans)!important; letter-spacing:-.03em!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) #faq .hq__head .link-arrow { justify-self:center; min-height:44px; display:inline-flex; align-items:center; gap:8px; color:var(--ed-ink)!important; font:500 15px/1 var(--font-sans)!important; text-transform:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .fq__nav { max-width:var(--faq-w); margin:0 auto clamp(40px,5vw,64px)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .fq__chips { justify-content:center; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .fq__groups { max-width:var(--faq-w); margin-inline:auto; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .fq__group { display:block!important; margin:0 0 clamp(48px,6vw,80px)!important; padding:0!important; border:0!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .fq__group-title { margin:0 0 8px!important; font:600 clamp(22px,2vw,28px)/1.2 var(--font-sans)!important; letter-spacing:-.02em!important; text-transform:none!important; color:var(--ed-ink)!important; position:static!important; }

/* The list and its rows. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__list { display:block!important; width:100%; max-width:var(--faq-w); margin-inline:auto!important; padding:0!important; border:0!important; background:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item {
  interpolate-size:allow-keywords;
  margin:0!important; padding:0!important; border:0!important; border-bottom:1px solid var(--faq-rule)!important; border-radius:0!important; background:transparent!important; box-shadow:none!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item:hover { background:transparent!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item > summary {
  list-style:none; display:flex!important; align-items:center; justify-content:space-between; gap:24px; min-height:44px; margin:0!important; padding:var(--faq-pad) 0!important;
  font:500 var(--faq-q)/1.4 var(--font-sans)!important; letter-spacing:-.01em!important; text-transform:none!important; color:var(--ed-ink)!important; cursor:pointer; background:none!important; border:0!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item > summary::-webkit-details-marker { display:none; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item > summary::marker { content:''; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item > summary::before, html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item > summary::after { content:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item > summary:focus-visible { outline:2px solid var(--ed-ink)!important; outline-offset:4px; border-radius:2px; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__chev { flex:none; width:22px!important; height:22px!important; margin:0!important; color:var(--ed-ink)!important; background:none!important; border:0!important; transform:none; transition:transform .35s var(--faq-ease)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item[open] .sx-faq__chev { transform:rotate(45deg)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__answer { display:block!important; grid-template-rows:none!important; max-width:680px; margin:0!important; padding:0 48px var(--faq-pad) 0!important; transition:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__answer p { margin:0!important; overflow:visible!important; font:400 16px/1.65 var(--font-sans)!important; letter-spacing:0!important; color:var(--ed-muted)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__answer p + p { margin-top:12px!important; }
/* Smooth open and close. Browsers without ::details-content drop this rule
   and simply open and close. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item::details-content { block-size:0; overflow:clip; transition:block-size .4s var(--faq-ease), content-visibility .4s allow-discrete; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item[open]::details-content { block-size:auto; }
@media (prefers-reduced-motion:reduce) {
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__item::details-content { transition:none; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__chev { transition:none!important; }
}
@media (max-width:767px) {
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .sx-faq__answer { padding-right:0!important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER (renderFooter in build/partials.mjs)
   Adapted from bestwebsitetemplate.com, 5 Oct 2026: a light footer on the
   page colour, no slant or glow. A brand column (mark, statement, Book a call
   and Start a project) beside five evenly spaced link columns with a
   semibold head and muted links; a newsletter row; and a quiet bottom bar.
   The site has one light theme (the toggle was removed), so there is no
   dark variant to maintain; the tokens below are the place to add one.
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --ft-bg:#FFFFFF; --ft-ink:#111111; --ft-muted:rgb(17 17 17 / 64%); --ft-rule:rgb(17 17 17 / 10%); --ft-gap:clamp(24px,3vw,48px); --ft-pad:clamp(20px,2.8vw,40px); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft[data-shared-footer] {
  display:block!important; position:relative; min-height:0!important; width:100%!important; max-width:none!important; margin:0!important; padding:clamp(64px,8vw,120px) 0 clamp(32px,4vw,48px)!important; overflow:hidden;
  background:var(--ft-bg)!important; color:var(--ft-ink)!important; border:0!important; border-top:1px solid var(--ft-rule)!important; clip-path:none!important; box-shadow:none!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft[data-shared-footer]::before, html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft[data-shared-footer]::after { content:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__inner { width:100%; max-width:1440px; margin:0 auto; padding:0 var(--ft-pad); }

/* Top: brand column and the link columns on one 7-track grid. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__top { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:40px var(--ft-gap); align-items:start; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__brand { grid-column:span 2; display:grid; justify-items:start; gap:20px; padding-right:var(--ft-gap); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__logo { display:inline-flex; min-height:44px; align-items:flex-start; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__logo img { display:block; width:auto; height:40px; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__line { margin:0!important; max-width:22ch; font:600 clamp(20px,1.7vw,26px)/1.2 var(--font-sans)!important; letter-spacing:-.02em!important; color:var(--ft-ink)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__ctas { display:flex; flex-wrap:wrap; gap:10px; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cta {
  display:inline-flex!important; align-items:center; gap:10px; min-height:44px; padding:12px 18px!important; border-radius:var(--ed-radius-card,4px)!important;
  background:var(--brand-leaf)!important; color:#111!important; font:600 15px/1.2 var(--font-sans)!important; letter-spacing:-.01em!important; text-decoration:none!important; text-transform:none!important; transition:background-color .2s ease, transform .2s ease;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cta--alt { background:var(--brand-periwinkle)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cta::after { content:''; width:6px; height:6px; margin-bottom:4px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transition:transform .18s ease; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cta:hover { background:color-mix(in srgb, var(--brand-leaf) 80%, #fff)!important; transform:translateY(-1px); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cta--alt:hover { background:color-mix(in srgb, var(--brand-periwinkle) 80%, #fff)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cta:hover::after { transform:translate(2px,-2px); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cols { grid-column:span 5; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:32px var(--ft-gap); margin:0!important; padding:0!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__col { margin:0; padding:0!important; border:0!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__col nav { display:block; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__head { display:block; margin:0 0 10px!important; padding:0!important; font:600 16px/1.3 var(--font-sans)!important; letter-spacing:-.01em!important; text-transform:none!important; color:var(--ft-ink)!important; background:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__head::before, html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__head::after { content:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__links { display:grid; gap:0; margin:0!important; padding:0!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__link {
  display:inline-flex!important; align-items:center; min-height:44px; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; cursor:pointer; text-align:left;
  font:400 16px/1.3 var(--font-sans)!important; letter-spacing:-.005em!important; text-transform:none!important; text-decoration:none!important; color:var(--ft-muted)!important; transition:color .15s ease;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__link:hover { color:var(--ft-ink)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft :is(.ft__link,.ft__cta,.ft__logo,.ft__news-submit,input):focus-visible { outline:2px solid var(--ft-ink)!important; outline-offset:3px; }

/* Newsletter row. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news {
  display:grid!important; grid-template-columns:repeat(7,minmax(0,1fr)); gap:16px var(--ft-gap); align-items:start;
  width:100%; max-width:none; margin:clamp(48px,6vw,80px) 0 0!important; padding:clamp(32px,3vw,40px) 0 0!important;
  border:0!important; border-top:1px solid var(--ft-rule)!important; border-radius:0!important; background:none!important; box-shadow:none!important; color:var(--ft-ink)!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news .hidden-field { display:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-intro { grid-column:span 2; display:grid; gap:4px; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-intro .ft__head { margin:0!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-hint { margin:0!important; font:400 15px/1.5 var(--font-sans)!important; color:var(--ft-muted)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-fields { grid-column:3 / span 3; display:grid; gap:12px; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-row { display:flex!important; gap:8px; margin:0!important; padding:0!important; border:0!important; background:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-row input {
  flex:1 1 auto; min-width:0; min-height:48px; margin:0!important; padding:0 16px!important; border:1px solid rgb(17 17 17 / 45%)!important; border-radius:var(--ed-radius-card,4px)!important;
  background:#fff!important; color:var(--ft-ink)!important; font:400 16px/1.2 var(--font-sans)!important; box-shadow:none!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-row input::placeholder { color:rgb(17 17 17 / 55%)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-submit {
  flex:none; min-width:0!important; min-height:48px; margin:0!important; padding:0 20px!important; border:0!important; border-radius:var(--ed-radius-card,4px)!important;
  background:var(--ft-ink)!important; color:#fff!important; font:600 15px/1 var(--font-sans)!important; letter-spacing:-.01em!important; text-transform:none!important; cursor:pointer; transition:transform .2s ease;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-submit:hover { transform:translateY(-1px); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-consent { display:flex!important; align-items:flex-start; gap:10px; min-height:44px; margin:0!important; padding:4px 0 0!important; cursor:pointer; font:400 14px/1.45 var(--font-sans)!important; color:var(--ft-muted)!important; text-transform:none!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-consent span { color:var(--ft-muted)!important; font:inherit!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-consent input { flex:none; width:20px!important; height:20px!important; min-width:20px!important; min-height:20px!important; margin:0!important; accent-color:var(--ft-ink); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-status { margin:0!important; font:500 14px/1.4 var(--font-sans)!important; color:var(--ft-ink)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-status:empty { display:none; }

/* Bottom bar. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:clamp(40px,5vw,64px); padding:20px 0 0; border-top:1px solid var(--ft-rule); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__bottom p, html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__bottom span { margin:0!important; font:400 14px/1.5 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important; color:var(--ft-muted)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__bottom .js-local-clock { color:var(--ft-ink)!important; font-variant-numeric:tabular-nums; }

/* Tablet: brand on its own row, columns below. */
@media (max-width:1023px) {
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__top { grid-template-columns:minmax(0,1fr); }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__brand { grid-column:auto; padding-right:0; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cols { grid-column:auto; grid-template-columns:repeat(3,minmax(0,1fr)); }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news { grid-template-columns:minmax(0,1fr); }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-intro, html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-fields { grid-column:auto; max-width:560px; }
}
/* Phones: two columns, then one under 400px. */
@media (max-width:600px) {
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cols { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__bottom { flex-direction:column; }
}
@media (max-width:399px) {
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page gutters (5 Oct 2026). One setting for the space between content and
   the left and right edges of the screen. --page-gutter drives --gutter (the
   sections, pages and submenus that already use it) and --gutter-x (the CTA
   banner and Book a Call card), so changing it here widens or narrows the
   side space everywhere at once. --card-pad-x is the inner side padding of
   the large photo cards.
   ═══════════════════════════════════════════════════════════════════════════ */
html:root, html:root[data-theme] {
  --page-gutter:clamp(24px,5vw,80px);
  --card-pad-x:clamp(28px,7vw,120px);
  --gutter:var(--page-gutter); --gutter-x:var(--page-gutter); --ft-pad:var(--page-gutter);
}
@media (max-width:810px) { html:root, html:root[data-theme] { --gutter-x:var(--page-gutter); } }

/* The "Have a problem worth solving?" banner and the Book a Call (Get in
   Touch) card: inset from the screen edges and roomier inside. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .cta-banner { margin-inline:var(--page-gutter)!important; }
/* Auto margins center the booking card even when its width is capped. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .book-call { margin-inline:auto!important; width:calc(100% - 2 * var(--page-gutter)); }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .cta-banner { padding-inline:var(--card-pad-x)!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .book-call__content { padding-inline:var(--card-pad-x)!important; }
@media (max-width:1023px) {
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .cta-banner { padding-inline:20px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .book-call__content { padding-inline:24px!important; }
}

/* Hero title: the shape of the Scope / Build / Support rows (home-motion.css),
   bold, capped at 100px so it sits on two lines beside the picture (Patrick's
   option 2, 5 Oct). Phones use the same 56px as those rows. */
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-intro h1 {
  font-size:clamp(56px,7vw,100px)!important; line-height:.9!important; letter-spacing:-.05em!important;
}
/* Sections that used their own fixed side spacing now follow --page-gutter. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.page-intro, .page-section) { padding-inline:var(--page-gutter)!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) :is(._01 > .inner-wrap, ._01 .sections, .system-path) { padding-inline:var(--page-gutter)!important; }
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) ._02 > .inner-wrap { width:auto!important; max-width:none!important; margin-inline:var(--page-gutter)!important; }
/* Hero fit (5 Oct 2026): the title gets room for two lines, and the hero
   grows with its content instead of being locked to the picture's 16:9
   shape, so the text, buttons and steps never slip under the next section.
   The picture still starts at the top at 16:9. */
@media (prefers-reduced-motion:no-preference) and (min-width:1024px) {
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) { aspect-ratio:auto!important; height:auto!important; min-height:56.25vw!important; padding-bottom:clamp(48px,5vw,80px)!important; }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) .hero-intro { max-width:min(52%,720px)!important; }
  /* When the content runs past the picture, the picture's soft bottom fade
     stays on the picture and the extra space is plain page colour. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) { background:linear-gradient(#F1F1EE,#F1F1EE) top / 100% 56.25vw no-repeat, var(--bg-page, #fff)!important; }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media)::after { top:calc(56.25vw * .84)!important; bottom:auto!important; height:calc(56.25vw * .16)!important; }
}
html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-intro h1 { position:relative; z-index:1; }

/* Pricing tables (5 Oct 2026): row notes are readable on the light page
   (they were set for the old dark band). */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-svc__note { color:var(--ed-muted)!important; font:400 13px/1.45 var(--font-sans)!important; text-transform:none!important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Sign-in page (5 Oct 2026). Signed out, /auth is a full-page view: no site
   header or footer, the original two-panel layout (form left, animated mark
   right) filling the screen. Site touches: Inter Tight, near-square 4px
   corners, a segmented tab control, 48px buttons, the brand-green primary
   button with the corner arrow, and a "Coming soon" pill for Microsoft.
   Signed in, the portal keeps the normal header and footer.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) { --si-ink:#F6F5F3; --si-muted:rgb(246 245 243 / 66%); --si-line:rgb(255 255 255 / 12%); --si-line-strong:rgb(255 255 255 / 40%); --si-field:#0B0B0B; --si-card:#141414; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) :is(header[data-shared-header], .modal-menu, footer[data-shared-footer]) { display:none!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) main#app { padding:0!important; margin:0!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) main#app > .page-section { padding:0!important; margin:0!important; max-width:none!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell { min-height:100vh!important; min-height:100dvh!important; font-family:var(--font-sans)!important; }

/* Left panel: logo top-left, card centred, links at the foot. */
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-login-zone { position:relative; display:flex!important; flex-direction:column; justify-content:center; align-items:flex-start; min-height:100dvh; padding:clamp(28px,4vw,56px) clamp(24px,6vw,96px)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-mobile-brand { display:inline-flex!important; position:static!important; width:fit-content; min-height:44px; align-items:center; margin:0 0 clamp(24px,4vh,40px)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-mobile-brand img { display:block; width:auto; height:36px; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-workspace { width:min(100%,440px)!important; margin:0!important; padding:clamp(28px,3vw,40px)!important; border-radius:4px!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-workspace h1 { margin:0 0 28px!important; font:600 clamp(40px,4vw,56px)/1 var(--font-sans)!important; letter-spacing:-.035em!important; color:var(--si-ink)!important; }

/* Tabs: one segmented pill control. */
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-mode-tabs { display:grid!important; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 20px!important; padding:4px!important; border:1px solid var(--si-line)!important; border-radius:999px!important; background:var(--si-field)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-mode-tabs button { min-height:40px!important; margin:0!important; padding:8px 12px!important; border:0!important; border-radius:999px!important; background:transparent!important; color:var(--si-muted)!important; font:500 14px/1 var(--font-sans)!important; letter-spacing:0!important; box-shadow:none!important; cursor:pointer; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-mode-tabs button::after { content:none!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-mode-tabs button[aria-selected='true'] { background:var(--si-ink)!important; color:#111!important; }

/* Sign-in methods: the three providers side by side, 48px, icon and label
   centred in each.

   They sit in a 440px card with clamp(28px,3vw,40px) padding, so the row has
   about 360px to work with; three columns and two 8px gaps leave roughly
   114px each. A 20px mark, an 8px gap and "Microsoft" at 13px comes to about
   108px, which fits - but only just, which is why the type and padding are
   smaller here than the single-column version was and why the label does not
   wrap. Below 520px the card is too narrow for that and they go back to one
   per row; see the media query at the end of this block. */
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-methods { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; margin:0!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-method-button { position:relative; display:flex!important; align-items:center; justify-content:center; gap:8px; min-width:0!important; width:100%!important; min-height:48px!important; margin:0!important; padding:0 8px!important; border:1px solid var(--si-line)!important; border-radius:4px!important; background:#1C1C1C!important; color:var(--si-ink)!important; font:500 13px/1 var(--font-sans)!important; letter-spacing:-.005em!important; text-transform:none!important; white-space:nowrap; box-shadow:none!important; opacity:1!important; transition:border-color .15s ease, background-color .15s ease; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-method-button::after { content:none!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-method-button:not(:disabled):hover { border-color:var(--si-line-strong)!important; background:#222!important; transform:none; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-method-button:disabled { cursor:not-allowed; color:var(--si-muted)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-method-button:disabled .auth-method-button__mark { opacity:.75; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-method-button__mark { color:var(--si-ink)!important; display:inline-grid; place-items:center; width:20px!important; height:20px!important; margin:0!important; background:none!important; border:0!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-method-button__mark svg { width:20px; height:20px; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-method-button__soon { margin-left:auto; padding:4px 9px; border-radius:999px; background:rgb(240 200 69 / 16%); color:var(--brand-marigold, #F0C845); font:600 11px/1.2 var(--font-sans); letter-spacing:.02em; white-space:nowrap; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-method-button__soon[hidden] { display:none; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-provider-status { margin:10px 0 0!important; font:400 13px/1.45 var(--font-sans)!important; color:var(--si-muted)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-provider-status:empty { display:none; }

/* "or" divider. */
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-divider { display:flex!important; align-items:center; gap:12px; margin:20px 0!important; color:var(--si-muted)!important; font:500 12px/1 var(--font-sans)!important; text-transform:lowercase; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-divider::before, html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-divider::after { content:''!important; flex:1; height:1px; background:var(--si-line); }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-divider span { color:var(--si-muted)!important; }

/* Fields and the primary button. */
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-form { display:grid!important; gap:12px; margin:0!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-form[hidden] { display:none!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-form .field { margin:0!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-form input:not([type='checkbox']):not([type='radio']) { min-height:52px!important; padding:22px 16px 8px!important; border:1px solid var(--si-line-strong)!important; border-radius:4px!important; background:var(--si-field)!important; color:var(--si-ink)!important; font:400 16px/1.2 var(--font-sans)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-form input:focus-visible { outline:2px solid var(--si-ink)!important; outline-offset:2px; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-floating-field label, html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-password-stage label { color:var(--si-muted)!important; font-family:var(--font-sans)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-submit { display:inline-flex!important; align-items:center; justify-content:center; gap:10px; width:100%!important; min-height:48px!important; margin:4px 0 0!important; padding:0 18px!important; border:0!important; border-radius:4px!important; background:var(--brand-leaf, #479C73)!important; color:#111!important; font:600 15px/1 var(--font-sans)!important; letter-spacing:-.01em!important; box-shadow:none!important; transition:background-color .2s ease, transform .2s ease; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-submit::after { content:''; width:6px; height:6px; margin-bottom:4px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-submit span { color:inherit!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-submit:not(:disabled):hover { background:color-mix(in srgb, var(--brand-leaf, #479C73) 80%, #fff)!important; transform:translateY(-1px); }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-submit:disabled { background:#2A2A2A!important; color:var(--si-muted)!important; cursor:not-allowed; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-submit:focus-visible, html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-method-button:focus-visible, html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-mode-tabs button:focus-visible { outline:2px solid var(--si-ink)!important; outline-offset:3px; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-form .form-status { margin:0!important; font:400 13px/1.45 var(--font-sans)!important; color:var(--si-muted)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-form .form-status:empty { display:none; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-legal { margin:24px 0 0!important; font:400 13px/1.55 var(--font-sans)!important; color:var(--si-muted)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-legal a { color:var(--si-ink)!important; text-decoration:underline; text-underline-offset:3px; }

/* Portal footer links, quiet, at the foot of the left panel on desktop. */
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-footer { gap:6px 18px!important; font:400 13px/1.4 var(--font-sans)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-footer :is(a,span) { color:var(--si-muted)!important; font:inherit!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-footer a { display:inline-flex; align-items:center; min-height:32px; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-footer a:hover { color:var(--si-ink)!important; }
html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-qr-card { border-radius:4px!important; }

@media (max-width:1023px) {
  html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-login-zone { min-height:auto; padding:24px 20px 32px!important; }
  html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-workspace { padding:24px!important; }
}

/* Below 520px the card has roughly 272px of inner width, which is not enough
   for three columns: "Microsoft" alone needs about 108px with its mark, and
   a third of that row is only 85px. So the providers go back to one per row
   here, at the larger type and left-aligned mark they had before - a 48px
   full-width target is also the better thing to tap. */
@media (max-width:519px) {
  html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-methods { grid-template-columns:minmax(0,1fr)!important; }
  html[data-theme] body[data-page='auth'].is-auth-signed-out:not(#_):not(#__):not(#___):not(#____) .auth-shell .auth-method-button { justify-content:flex-start; gap:12px; padding:0 16px!important; font-size:15px!important; }
}

/* Homepage rate cards: the four care plans side by side (two on tablets,
   one on phones), a little narrower and shorter than the three-card set. */
@media (min-width:1100px) { html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-grid--four { grid-template-columns:repeat(4,minmax(0,1fr))!important; max-width:1200px!important; } }
@media (min-width:640px) and (max-width:1099px) { html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-grid--four { grid-template-columns:repeat(2,minmax(0,1fr))!important; } }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-grid--four .pr-blob { min-height:0!important; padding:28px 22px 22px!important; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-grid--four .pr-plan__summary { min-height:3.2em; }
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) #pricing .sx__head--center .sx__lede { max-width:60ch!important; margin-inline:auto!important; text-align:center; }

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile and tablet pass (5 Oct 2026). Desktop is unchanged: every layout
   rule here sits under max-width 1023px.
   ═══════════════════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
@media (max-width:1023px) {
  /* Press feel: no grey flash, no double-tap zoom delay, a short press state. */
  html[data-theme] body :is(a,button,summary,[role=tab],label) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.hero-action,.ed-btn,.sx-btn,.pr-plan__cta,.hws__link,.hw__all,.ft__cta,.ft__news-submit,button[type=submit]):active { transform:scale(.98)!important; }

  /* Hero: the picture sits on top, the text below it, never underneath. */
  html[data-theme] body[data-page=home]:not(#_):not(#__):not(#___):not(#____) .hero { display:flex!important; flex-direction:column!important; padding-top:84px!important; }
  html[data-theme] body[data-page=home]:not(#_):not(#__):not(#___):not(#____) .hero > .hero__media { order:-1!important; margin:0 0 4px!important; }
  html[data-theme] body[data-page=home]:not(#_):not(#__):not(#___):not(#____) .hero > .hero__media::after { height:22%!important; }
  html[data-theme] body[data-page=home]:not(#_):not(#__):not(#___):not(#____) .hero .top-wrap { padding-top:0!important; }
  html[data-theme] body[data-page=home]:not(#_):not(#__):not(#___):not(#____) .hero .hero-intro__lede { font-size:17px!important; line-height:1.55!important; }
  html[data-theme] body[data-page=home]:not(#_):not(#__):not(#___):not(#____) .hero .text-list { margin-top:28px!important; gap:12px!important; }

  /* Readable text: body copy 16px, small print no smaller than 13px. */
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.sx__lede,.ed-lede,.pr-plan__summary,.sx-faq__answer p,.ed-project__copy,.aud__copy,.hws__copy,.cards .card p:not(.status),.pillar .text > p,.sx-step__body,.sections .section .description) { font-size:16px!important; line-height:1.6!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.sx-plan__list li,.pr-svc__name span,.ft__link,.ft__news-hint,.ed-meta dt,.ed-meta dd) { font-size:15px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.pr-price__prefix,.pr-price__unit,.pr-cur__label,.pr-svc__note,.ft__bottom p,.ft__bottom span,.ft__news-consent,.sx-plan__flag,.pr-footnote) { font-size:13px!important; }

  /* Process steps: the word-spread animation leaves ragged gaps on narrow
     screens, so the words sit still and read as normal sentences. */
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .hm-spread .hm-s { display:inline!important; margin:0!important; transform:none!important; letter-spacing:normal!important; word-spacing:normal!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .hm-spread { text-align:left!important; word-spacing:normal!important; }

  /* Cards: a little less padding, consistent gaps. */
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.cards .card,.ed-card,.pillar > .text) { padding:22px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.cards,.ed-stack,.aud__grid) { gap:14px!important; }

  /* Pricing: compact cards, swipeable tabs, smaller table figures. */
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-grid .pr-blob { min-height:0!important; padding:24px 20px 20px!important; gap:16px!important; border-radius:12px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-grid .pr-plan__summary { min-height:0!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-grid .pr-plan__cta { min-height:48px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-cur { flex-wrap:wrap; gap:8px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-cur__field { flex:1 1 220px; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-tabs { display:flex!important; flex-wrap:nowrap!important; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; gap:4px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-tabs::-webkit-scrollbar { display:none; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-tab { flex:none!important; min-height:44px!important; scroll-snap-align:start; white-space:nowrap; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-svc__row { padding:18px!important; gap:10px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .pr-svc__cell .pr-price { font-size:26px!important; }

  /* Footer: links in two columns, left and right; bottom bar split too. */
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cols { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:28px 20px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__col:first-child { grid-column:1 / -1; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__col:first-child .ft__links { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__link { width:100%; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__ctas { width:100%; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cta { flex:1 1 0; justify-content:center; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__bottom { display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:6px 16px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__sign { grid-column:1; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__clock { grid-column:2; grid-row:1; text-align:right; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__credits { grid-column:1 / -1; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__sep { display:none; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__sign span { display:block; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__news-row { flex-direction:row!important; }
}
/* Tablets: two or three columns where phones stack. */
@media (min-width:640px) and (max-width:1023px) {
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.cards,.aud__grid) { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__cols { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__col:first-child { grid-column:auto; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__col:first-child .ft__links { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1023px) { html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft .ft__logo { min-width:44px; } html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) .book-call__alt a { display:inline-block; padding:12px 0; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Three accents (6 Oct 2026). The palette is now Evergreen Leaf, Glacial
   Periwinkle and Marigold Glow, with black and white. The three retired
   accents point at the kept ones, so every six-step cycle (labels, cards,
   buttons, footer dots) becomes leaf / periwinkle / marigold repeating.
   Widget mockups keep their own product colours.
   ═══════════════════════════════════════════════════════════════════════════ */
:root, :root[data-theme] {
  --brand-slate: var(--brand-leaf);       /* was Slate Horizon #6DBEC6 */
  --brand-terra: var(--brand-periwinkle); /* was Burnt Terra #D4622C */
  --brand-sand: var(--brand-marigold);    /* was Toasted Sand #E6D4BE */
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE LANDING PASS (6 Oct 2026, from his redesign brief)

   Phones and tablets only: every rule below sits inside max-width 1023px or
   767px, so the desktop page is untouched. What changed:

   1. Hero   the supplied loop fills the frame and the copy sits over it, with
             one full-width call to action. This reverses the 5 Oct order,
             where the loop sat above the text; the scrim under the words is
             what makes them readable in front of it instead.
   2. Type   hero 32px, the one display statement 34px, section heads 28px,
             card heads 19px, lede 17px, body 16px, nothing under 13px.
   3. Cards  full width, 16px of padding, 14px apart.
   4. Tap    primary buttons full width and 52px tall, anything tappable at
             least 48px (44px for plain text links).
   5. Rhythm 44-64px between sections, 20px gutters that grow by the
             safe-area inset on notched screens.

   The form is already its own section (#start, above the footer), so the
   order the brief asks for - hero, cards, form, footer - needed no move.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 5. Gutters, safe areas and section rhythm ───────────────────────────
   --page-gutter already drives --gutter, --gutter-x and --ft-pad, so one
   value moves every section's side spacing. max() of the two insets keeps
   the page symmetrical when a notch pads only one side (landscape). */
@media (max-width:767px) {
  html:root, html:root[data-theme] {
    --page-gutter:calc(20px + max(env(safe-area-inset-left), env(safe-area-inset-right)));
    --section-y:clamp(44px,12vw,64px);
  }
}

/* ── 1. Hero: copy over the footage ─────────────────────────────────────
   Guarded on :has(>.hero__media) because initMobileMedia removes the wrapper
   for reduced-motion, Save-Data and 2G visitors - those keep the plain
   themed hero, with nothing to read over. */
@media (prefers-reduced-motion:no-preference) and (max-width:1023px) {
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) {
    /* Two heights, not one (6 Oct 2026, his note that the loop sits wrong).

       The hero is taller than the band the footage occupies. That split is
       the whole fix. With cover, the visible slice of a 1920-wide frame is
       390 / (1920 * height / 1080) - so the taller the video, the more it
       zooms in. At the old 658px a phone saw 33% of the composition, which
       is why it read as a crop of a crop rather than a scene.

       The band is now 470px: 48% of the frame is visible, nearly half again,
       and the AI-agent mock reads as a whole object. The hero itself grows to
       760px, which is the room the copy needs to sit at the bottom left
       without crowding the footage above it. */
    --hero-h:min(88vh,760px);
    --hero-media-h:min(58vh,470px);
    /* The copy sits closer to the edge than the rest of the page. */
    --hero-gutter:16px;
    /* The footage is a light scene, so the copy over it stays dark ink. */
    --text-primary:#20382C; --text-secondary:#3C4F44; --text-muted:#4E5F55; --text-highlight:#26503C;
    display:block!important; position:relative; overflow:hidden;
    padding:0!important; min-height:0!important; aspect-ratio:auto!important;
    background:var(--bg-page)!important; color:var(--text-primary)!important;
  }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) > .hero__media {
    position:absolute!important; inset:0 0 auto 0!important; z-index:0;
    width:100%; height:var(--hero-media-h); margin:0!important; order:0!important;
  }
  /* Where the crop sits. The loop is composed for the desktop hero:
     everything happens on the right and the left half is empty cream, which
     is where the headline sits from 1024px up. Measured over the whole loop,
     the content's centre of mass is at 72% across and the middle 80% of it
     spans 53.5% to 92%. Cropping at 50% framed the empty half. With the band
     shorter the visible window is wider, so the crop has to go further: 92%
     shows 49% to 96% of the frame, which holds the whole content band with a
     little air, and puts its centre within 1% of the middle of the phone. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) .hero__background {
    position:absolute!important; inset:0!important; z-index:auto!important;
    width:100%!important; height:100%!important; aspect-ratio:auto!important;
    object-fit:cover!important; object-position:92% 50%!important;
  }
  /* Scrim: clear where the footage reads, closing to the page colour by the
     foot of the band so the copy below starts on clean ground. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) > .hero__media::after {
    inset:0!important; height:auto!important; z-index:1;
    background:linear-gradient(180deg,
      rgb(241 241 238 / 30%) 0%,
      rgb(241 241 238 / 8%) 30%,
      rgb(241 241 238 / 52%) 66%,
      rgb(241 241 238 / 88%) 86%,
      var(--bg-page) 100%)!important;
  }
  /* The copy runs closer to the edge than the rest of the page, which is what
     makes a phone hero read as deliberate rather than as a narrow desktop. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) .inner-wrap {
    position:relative; z-index:2; width:auto!important; max-width:none!important; margin-inline:var(--hero-gutter)!important;
  }
  /* align-items was 'center', which in a flex column centres the children
     horizontally and shrinks them to their content - it was holding the copy
     23px in from the gutter on both sides and quietly undoing the left
     alignment. Stretch, so the copy starts exactly at --hero-gutter. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) .top-wrap {
    display:flex!important; flex-direction:column!important; align-items:stretch!important;
    padding:0!important; gap:0!important; max-width:none!important; min-height:0!important;
  }
  /* The copy block fills the hero and settles on its bottom edge, so the
     whole group sits bottom left under the footage. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) .hero-intro {
    display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
    min-height:var(--hero-h); padding:0 0 20px!important; max-width:none!important; text-align:left!important;
  }
  /* The hero eyebrow was stripped to plain text on 6 Oct to quieten the
     hero. It is a pill again, because every label on the site now takes the
     outlined style he asked for and this one should not be the exception.
     Only the size and spacing are set here; the ring, the colour and the
     shape come from the shared label rule at the end of this file. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) .hero-intro__eyebrow {
    align-self:flex-start!important; padding:4px 11px!important;
    font-size:12px!important; line-height:1.3!important; margin:0 0 10px!important;
  }
  /* The three steps are the last busy thing in the hero, so they drop back to
     a caption: smaller, muted, tighter. They are still three columns, just no
     longer competing with the headline and the buttons above them. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) .text-list {
    position:relative; z-index:2; max-width:none!important;
    margin:0!important; padding:18px 0 0!important;
    background:var(--bg-page); border:0!important; gap:8px!important;
  }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) .text-list .js-scramble-text {
    font-size:10px!important; line-height:1.5!important; letter-spacing:.05em!important; color:var(--text-muted)!important;
  }
}
/* Tablets are wide enough that 82% still reads right-of-centre, so the crop
   goes as far as it can. */
@media (prefers-reduced-motion:no-preference) and (min-width:768px) and (max-width:1023px) {
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) .hero__background { object-position:100% 50%!important; }
}
@supports (height:1svh) {
  @media (prefers-reduced-motion:no-preference) and (max-width:1023px) {
    html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero:has(>.hero__media) { --hero-h:min(88svh,760px); --hero-media-h:min(58svh,470px); }
  }
}

/* One call to action. The second link stops being a button and becomes a
   quiet scroll cue under it, so there is a single thing to press. */
@media (max-width:1023px) {
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-intro__actions {
    display:grid!important; grid-template-columns:minmax(0,1fr)!important;
    justify-items:stretch; gap:10px!important; margin-top:20px!important; width:100%;
  }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-action--primary {
    width:100%!important; flex:none!important; min-height:50px!important;
    justify-content:center!important; font-size:15px!important;
  }
  /* Both of them are buttons (6 Oct 2026, his note that one rendered and the
     other did not). "See our work" had been stripped to a bare text link, so
     next to a filled 52px button it read as something half-finished rather
     than as the second choice. They are a pair again - same width, same
     height, stacked - and they keep the colours they already have on
     desktop: leaf for the primary, periwinkle for the second. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-action:not(.hero-action--primary) {
    width:100%!important; flex:none!important; justify-self:stretch;
    min-height:50px!important; justify-content:center!important;
    padding:12px 18px!important; font-size:15px!important; text-decoration:none!important;
  }
}

/* ── 2. Type scale ──────────────────────────────────────────────────────
   The hero headline is the largest thing on a phone, so the display tokens
   come down to sit under it instead of towering over it at 64px. */
@media (max-width:767px) {
  html:root, html:root[data-theme] {
    --fs-display-xl:34px; --fs-display-l:30px; --fs-display-m:26px;
    --fs-section:28px; --fs-heading:19px; --type-lead:17px;
  }
  /* Smaller, and tighter to the left edge (6 Oct 2026). The headline was
     32px over a 20px gutter, which on a 360px phone left barely nine
     characters a line and pushed the lede into four. 26px over a 16px gutter
     holds the two-line break the copy was written for.

     Clamped since the move to Geist (7 Oct), which sets about 8% wider than
     Inter Tight at the same size. At a flat 26px the headline filled a 320px
     phone exactly, with no slack at all - it did not overflow, but nothing
     was holding it back either. It scales down to 23px there and still
     reaches 26px from 360px up. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-intro h1 {
    font-size:clamp(23px,7.2vw,26px)!important; line-height:1.1!important; letter-spacing:-.025em!important; max-width:none!important;
  }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-intro__lede {
    font-size:15px!important; line-height:1.5!important; margin-top:10px!important; max-width:36ch!important;
  }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.f-hndb-180-90,.f-hndb-96-90,._01 .title) { font-size:34px!important; line-height:1.08!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.sx__title,.hx__title,.page-intro h1,.page-hero h1,.c-title,.p-title,.system-path h2) { font-size:28px!important; line-height:1.1!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(#faq .hq__head,.fq .sx__head,section:has(> .sx__inner .pr-faq__item) .sx__head) .sx__title { font-size:28px!important; line-height:1.1!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.cards .card h3,.ed-card h3,.hws__title,.pr-plan__name,.sx-step__title,.pillar .text h3) { font-size:19px!important; line-height:1.25!important; }
}
/* A button the full width of a tablet is a 780px target, so the hero calls to
   action stop growing once there is room for them to stand on their own.
   Both of them: capping only the primary left them visibly different widths
   on a tablet, which was the same mismatch he reported on the phone. */
@media (min-width:600px) and (max-width:1023px) {
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-action { max-width:380px!important; }
}
@media (min-width:768px) and (max-width:1023px) {
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-intro h1 { font-size:44px!important; line-height:1.04!important; letter-spacing:-.035em!important; }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) .hero .hero-intro__lede { font-size:18px!important; max-width:52ch!important; }
}

/* ── 3. Cards: full width, 16px padding, 14px apart ─────────────────────── */
@media (max-width:767px) {
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.cards .card,.ed-card,.pillar > .text,.hws__item,.sx-step,.aud__card,.sx-card) {
    width:auto!important; max-width:none!important; padding:16px!important;
  }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.pr-grid .pr-blob,.pr-grid--four .pr-blob) { padding:20px 16px 16px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.cards,.ed-stack,.aud__grid,.pr-grid,.hws__grid,.sx-steps__list) { gap:14px!important; }
  /* The form card itself is the card: it runs to the gutter and carries the
     16px, instead of sitting inset inside a second padded box. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) #start .sx__inner { padding:0!important; gap:24px!important; }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____) :is(.hc__form,.contact-form-panel,.career-form) { padding:16px!important; }
}

/* ── 4. Tap targets ────────────────────────────────────────────────────
   Buttons fill the card or section they sit in and are 52px tall; plain
   links keep their size but gain a 44px press area. */
@media (max-width:1023px) {
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(a.ed-btn,a.sx-btn,.pr-plan__cta,.hws__link,.career-submit,.contact-submit,.call-submit,.form-submit,.auth-submit,button[type='submit']:not(.ft__news-submit)) {
    display:flex!important; width:100%!important; min-height:52px!important;
    align-items:center; justify-content:center!important; text-align:center;
  }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.ft__cta,.ft__news-submit,.pr-tab,.fq__chip,.hw__all,.link-arrow,.ft__link,.footer-col__action) { min-height:48px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.ft__link,.footer-col__action) { display:inline-flex!important; align-items:center; min-height:44px!important; }
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.field input,.field textarea,.field select,input[type='email'],input[type='text'],input[type='tel']) { min-height:48px!important; font-size:16px!important; }
  /* Safe area at the foot of the page, under the home indicator. */
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) footer.ft { padding-bottom:calc(24px + env(safe-area-inset-bottom))!important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LABELS AS OUTLINED PILLS (6 Oct 2026, from his reference)

   His reference is a ring in the accent colour with the same colour as text
   and nothing filled in. That form is what changes here: every label - the
   section eyebrows, the numbered section labels, the hero's, the ed-eyebrow
   and the pricing flag - stops being a soft filled tint and becomes an
   outline.

   The colour needed adapting, and it is worth saying why rather than quietly
   doing something different from the reference.

   His reference is a yellow pill on a black page, where yellow reads at
   11.7:1. Our pages are white. Measured against white, the three accents as
   13px text give leaf 3.35:1, periwinkle 2.36:1 and marigold 1.61:1 - all
   below the 4.5:1 small text needs, marigold hopelessly so. A yellow ring
   with yellow text on white is not a style choice, it is unreadable.

   So the ring and the text take the accent darkened 55% toward black (the
   mix is 45% accent), which keeps the hue and clears the bar with room to
   spare: leaf 10.57:1, periwinkle 8.59:1, marigold 6.73:1. Measured off the
   rendered pixels afterwards, every label on the homepage lands between
   7.99:1 and 10.57:1. Marigold is the one that sets the limit - a yellow
   dark enough to read on white is a bronze, and there is no way round that
   on a light page.

   On the dark bands the accent needs no help and is used as it is, which is
   the reference exactly: leaf 5.64:1, periwinkle 7.99:1, marigold 11.74:1
   against the dark surface.
   Every label on the site goes through this, not only the section eyebrows
   (6 Oct 2026, his follow-up). The ones that were missed first time: the
   bare .eyebrow used on the inner pages, the book-a-call, cta-banner,
   system-path and work-cta eyebrows, the audience tags, the two tag lists
   on the homepage and the work page, the case-study label, and the portal
   and analytics eyebrows. Three of those were plain text rather than pills
   and now match the rest.

   Left out on purpose, because they are not this kind of label: the FAQ
   filter chips, which are controls you press; form and stat labels
   (pr-cur__label, sx-stat__label, contact-aside__label), which are field
   names; the number inside an eyebrow, which is styled as part of it; and
   anything inside the mockup widgets, which keep their own product colours.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme] body:not(#_):not(#__):not(#___):not(#____) {
  --label-col:color-mix(in srgb, var(--ac, var(--ed-accent)) 45%, #000);
}
/* Dark bands: the accent is legible as it is, so it is left alone.
   Bare .background-black is deliberately NOT in this list. It is a legacy
   class that no longer says anything about the paint: on ._01 the studio
   section it renders white, on ._02 it renders #111. Trusting it put the
   raw accent on a white surface and dropped six buttons to 3.35:1; dropping
   it entirely then put the darkened accent on black and dropped three to
   1.79:1. So ._02's copy is named and ._01's is not.

   .system-path is here for the same reason: genuinely #111, but it carries
   none of the deep classes.

   Checked by reading the painted background of every candidate on six
   pages. The only light .sx--deep is #pricing, which the :not() excludes. */
html[data-theme] body:not(#_):not(#__):not(#___):not(#____) :is(.sx--deep:not(#pricing),.hx--deep,.ed-dark,.system-path,._02 .background-black) {
  --label-col:var(--ac, var(--ed-accent));
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.sx__eyebrow,.hx__eyebrow,.section-label,.ed-eyebrow,.hero-intro__eyebrow,.sx-plan__flag,.eyebrow,.book-call__eyebrow,.cta-banner__eyebrow,.system-path__eyebrow,.wcta__eyebrow,.portal-eyebrow,.analytics-eyebrow,.cs-ed__label,.aud__tag,.hws__tags > li,.wp__tags > li) {
  display:inline-flex!important; align-items:center; gap:6px; width:auto!important;
  padding:5px 13px!important; border-radius:var(--ed-radius-pill)!important;
  background:transparent!important; box-shadow:none!important;
  border:1px solid var(--label-col)!important; color:var(--label-col)!important;
  font:500 13px/1.3 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important;
}
/* The number inside a section label is the same colour, just quieter. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.sx__eyebrow,.section-label,.ed-eyebrow) .ed-eyebrow__num {
  color:var(--label-col)!important; opacity:.7; font-variant-numeric:tabular-nums;
}
/* Rules further up paint everything inside the form and pricing panels with
   the body ink; the labels in them opt back out so the ring and its text stay
   one colour. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(.sx__eyebrow,.hx__eyebrow,.section-label,.ed-eyebrow,.hero-intro__eyebrow,.sx-plan__flag,.eyebrow,.book-call__eyebrow,.cta-banner__eyebrow,.system-path__eyebrow,.wcta__eyebrow,.portal-eyebrow,.analytics-eyebrow,.cs-ed__label,.aud__tag,.hws__tags > li,.wp__tags > li) :is(span,b,strong,em) {
  color:inherit!important; background:none!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE REST OF THE LABELS, AND ONE BUTTON STYLE (7 Oct 2026)

   Labels. The studio section markers and the capability headings were on a
   different treatment again - plain coloured small caps - so they join the
   outlined set: "01/ THE STUDIO", "01.01/ Digital Presence" and its
   siblings (products, dashboards, system apps, automation, human review),
   the numbered capability headings, and the status markers on the
   capability cards.

   Buttons. There were thirteen distinct button styles across the site:
   five fills (leaf, amber, marigold, near-black, grey) and four different
   corner radii (4px, 5px, 14px and full pills). They are now one style,
   with no fill, matching the labels - the same accent-derived colour, so a
   button and the label above it read as one family.

   Hover is where the fill went. The ring fills with its own colour and the
   text flips to the surface behind it, so a button still answers when you
   point at it rather than being a flat outline that does nothing.

   Left as they were, because they are not buttons: the pricing tabs and the
   work filters, which are toggles showing which view you are in and need a
   selected state a plain outline cannot carry; the skip link, which is
   invisible until focused; and the screenshot links on the work page.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(span.header.f-s-16-100,.num.f-s-16-100) {
  display:inline-flex!important; align-items:center; gap:6px; width:auto!important;
  padding:5px 13px!important; border-radius:var(--ed-radius-pill)!important;
  background:transparent!important; box-shadow:none!important;
  border:1px solid var(--label-col)!important; color:var(--label-col)!important;
  font:500 13px/1.3 var(--font-sans)!important; letter-spacing:0!important; text-transform:none!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____) :is(span.header.f-s-16-100,.num.f-s-16-100) :is(span,b,strong,em) {
  color:inherit!important; background:none!important; font:inherit!important; text-transform:none!important;
}

/* One button, filled (7 Oct 2026, his correction).

   They were briefly outlined along with the labels. Buttons go back to a
   fill; only the labels keep the ring. The consolidation stays, so this is
   still one style rather than the thirteen that were here before - same
   fill, same near-square corner, same weight everywhere.

   The fallback is leaf, not the section accent: falling through to --ac
   turned the hero's primary CTA blue, and it has been green since it was
   built. --btn-ac still overrides it where a block sets one.

   The fill is the block's own accent, with near-black text on it, which is
   what the site did before and what the palette was built for: black on
   leaf is 5.64:1, on periwinkle 7.99:1, on marigold 11.74:1. Using
   --label-col here instead would have been the darkened accent, which is
   a muddier fill and no more readable.

   Five :not(#) levels, not four: the accent-button rule higher up puts
   #pricing inside its :is(), so that selector carries an ID and a
   four-level chain loses to it on class count. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____):not(#_____) :is(.hero-action,a.ed-btn,a.sx-btn,.pr-plan__cta,.hws__link,.hw__all,.button-frame,.book-call__button,.ft__cta,.career-submit,.contact-submit,.call-submit,.form-submit,.auth-submit,.ft__news-submit,button[type='submit']) {
  background:var(--btn-ac, var(--brand-leaf))!important; background-image:none!important;
  border:0!important; color:#111!important;
  border-radius:var(--ed-radius, 4px)!important; box-shadow:none!important;
  transition:background-color .18s ease!important;
}
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____):not(#_____) :is(.hero-action,a.ed-btn,a.sx-btn,.pr-plan__cta,.hws__link,.hw__all,.button-frame,.book-call__button,.ft__cta,.career-submit,.contact-submit,.call-submit,.form-submit,.auth-submit,.ft__news-submit,button[type='submit']) :is(span,svg,.label-wrap) {
  color:inherit!important; fill:currentColor;
}
@media (hover:hover) {
  html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____):not(#_____) :is(.hero-action,a.ed-btn,a.sx-btn,.pr-plan__cta,.hws__link,.hw__all,.button-frame,.book-call__button,.ft__cta,.career-submit,.contact-submit,.call-submit,.form-submit,.auth-submit,.ft__news-submit,button[type='submit']):not(:disabled):hover {
    background:color-mix(in srgb, var(--btn-ac, var(--brand-leaf)) 84%, #fff)!important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO, CLEANED UP ON NAKA'S RHYTHM (7 Oct 2026)

   Measured from naka.framer.website rather than guessed at, so the numbers
   below are its numbers, not an impression of them:

     container      1440 wide on a 1920 viewport, so 240 either side
     text column    capped at 800, about 55% of the container
     hero rhythm    label -> 32 -> headline -> 40 -> lede -> 40 -> buttons
     block gap      80
     cards          24 padding, 24 radius, no border at all, and a shadow at
                    3-5% alpha that you cannot really see
     headline       64px on 64px leading, -0.05em, weight 500

   What was wrong here. The gaps ran 38, 24, 32 - tighter in the middle than
   at the top, which reads as crowded rather than deliberate. The lede had
   no measure, so it ran as wide as the column allowed. And the three steps
   sat at the foot of the hero on top of the footage, overlapping the card
   inside it, which is the opposite of naka's habit of giving every block
   its own clean ground.

   Desktop only: the phone hero was rebuilt yesterday and is left alone.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px) {
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____):not(#_____) .hero .hero-intro__eyebrow { margin:0 0 32px!important; }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____):not(#_____) .hero .hero-intro h1 { margin:0!important; }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____):not(#_____) .hero .hero-intro__lede {
    margin:40px 0 0!important; max-width:46ch!important;
  }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____):not(#_____) .hero .hero-intro__actions { margin:40px 0 0!important; }
  /* The steps get clear ground under the copy instead of sitting over the
     footage, and drop to a caption so they read as a footnote to the hero
     rather than a fourth thing competing in it. */
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____):not(#_____) .hero .text-list {
    margin-top:112px!important; padding-top:0!important; border:0!important;
  }
  html[data-theme] body[data-page='home']:not(#_):not(#__):not(#___):not(#____):not(#_____) .hero .text-list .js-scramble-text {
    font-size:11px!important; line-height:1.6!important; letter-spacing:.06em!important; color:var(--text-muted)!important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAKA'S CARD CORNER, ON SOME CARDS (7 Oct 2026, "do on some and not all")

   naka rounds its cards at 24px. The house rule here is near-square 4-5px,
   which is why buttons went back to 4px and look right at that size. Both
   can hold if the split is about what a thing is rather than how it looks.

   Rounded, because they are cards you read as objects - a panel sitting on
   the page with its own content:
     pricing plans, capability and section cards, work and project cards,
     audience cards, the how-we-work items, and the contact panel.

   Square, because they are controls or frames, where a soft corner reads as
   imprecise:
     every button, form fields, pricing tabs, work filters, screenshots and
     image frames, trays and small media.

   Labels are unaffected - they were already full pills.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____):not(#_____) :is(
  .pr-blob, .sx-plan, .sx-card, .ed-card, .cards .card, .wx__card, .hws__item, .aud__card,
  .pillar > .text, #start .hc__form, .contact-form-panel, .career-form, .js-review-form
) {
  border-radius:24px!important;
}
/* Anything inside a rounded card that is clipped to its corner follows it. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____):not(#_____) :is(.pr-blob,.sx-plan,.sx-card,.ed-card,.cards .card,.wx__card,.hws__item,.aud__card) > :is(img,picture,video,.wx__media,.ed-card__media):first-child {
  border-radius:23px 23px 0 0!important;
}

/* The featured plan's flag was absolutely positioned with left:0 and right:0,
   which stretched it the full width of the card - width:auto cannot win
   against both edges being pinned. As a filled bar that read as a header;
   as an outlined pill it read as broken, and the card's new 24px corner cut
   across it. It sits in the flow now, centred above the plan name, so it is
   a badge the width of its own words. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____):not(#_____) .sx-plan__flag {
  position:static!important; align-self:center!important; width:auto!important;
  margin:0 0 14px!important; inset:auto!important; transform:none!important;
}

/* A label is the width of its own words (7 Oct 2026, his screenshot).

   The CTA banner's eyebrow was being squeezed to 122px inside an 880px
   parent and wrapping onto three lines, which turned a pill into a tall
   rounded box. It is a flex item, and inline-flex with width:auto shrinks
   to min-content when the parent asks it to - the pill was doing exactly
   what it was told.

   width:max-content sizes it to the unwrapped text and flex:0 0 auto stops
   the parent shrinking it. max-width:100% is the escape hatch: on a screen
   too narrow for the words it still wraps rather than overflowing, which is
   the one case where two lines is the right answer. */
html[data-theme] body[data-page]:not(#_):not(#__):not(#___):not(#____):not(#_____) :is(.sx__eyebrow,.hx__eyebrow,.section-label,.ed-eyebrow,.hero-intro__eyebrow,.sx-plan__flag,.eyebrow,.book-call__eyebrow,.cta-banner__eyebrow,.system-path__eyebrow,.wcta__eyebrow,.portal-eyebrow,.analytics-eyebrow,.cs-ed__label,.aud__tag,.hws__tags > li,.wp__tags > li,span.header.f-s-16-100,.num.f-s-16-100) {
  flex:0 0 auto!important; width:max-content!important; max-width:100%!important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DASHBOARD IS A FULL PAGE (7 Oct 2026)

   Signing in used to leave the marketing site around the workspace: the
   fixed site header above it and 834px of footer below. The sign-in view
   was made full-page on 5 Oct, but only for .is-auth-signed-out - the
   signed-in half was never given the same treatment, so the chrome came
   back the moment you were through the door.

   Safe to remove because the workspace carries its own: a 240px sidebar,
   its own header, twelve tabs and the sign-out button. Nothing here is the
   only way to reach anything.

   Jhene and the cookie banner stay. She is the assistant inside the
   workspace, and the banner is a legal control rather than site furniture.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Unconditional. This used to hang off .is-authenticated, which meant the
   chrome was only hidden once auth.js had decided you were signed in - so
   between first paint and that decision the header and footer were there,
   and any path that did not set the class left them there for good. /auth
   is an application route in both its states, so the site chrome never
   belongs on it. The signed-out half already hid the same three things;
   this just stops asking which half we are in.

   Five :not(#) levels and footer.ft spelled out, because the footer's own
   base rule is footer.ft[data-shared-footer] with display:block!important
   at four levels - one class more than a bare footer[data-shared-footer],
   so it won the tie and the footer stayed. The header had no such rule,
   which is why it vanished and the footer did not. */
html[data-theme] body[data-page='auth']:not(#_):not(#__):not(#___):not(#____):not(#_____) :is(header[data-shared-header], .modal-menu, footer.ft[data-shared-footer], footer[data-shared-footer], .powered-by) {
  display:none!important;
}
html[data-theme] body[data-page='auth'].is-authenticated:not(#_):not(#__):not(#___):not(#____) main#app {
  padding:0!important; margin:0!important; max-width:none!important;
}
html[data-theme] body[data-page='auth'].is-authenticated:not(#_):not(#__):not(#___):not(#____) main#app > :is(.page-section, .page-main) {
  padding:0!important; margin:0!important; max-width:none!important; width:auto!important;
}
/* The workspace fills the window rather than ending wherever its content does. */
html[data-theme] body[data-page='auth'].is-authenticated:not(#_):not(#__):not(#___):not(#____) .client-portal {
  min-height:100vh!important; min-height:100dvh!important;
}