/* AnotherAgent — the Stratum design system.
   Shared by every page. Paper (light) is the default surface; Ink (dark) is
   applied with data-theme="ink" on any container. Serif = judgement
   (headlines), sans = interface and body, mono = data, labels and indices.

   1. Webfonts            self-hosted, OFL, latin subset
   2. Tokens              colour ramps, type, space, radii, motion, patterns
   3. Semantic aliases    Paper by default, Ink under [data-theme="ink"]
   4. Element defaults    scoped to [data-st] so the older inline-styled pages
                          keep their own rhythm
   5. Utilities           .st-eyebrow .st-display .st-num
   6. Components          Button, IconButton, Badge, Tag, SectionHeader,
                          and the interface assets (.st-board / .st-ui)
   7. Site chrome         header, CTA band
   8. Page overrides      the rules the inline-styled pages still need; they
                          use !important only where an older inline style
                          would otherwise win, and never touch [data-st] */

/* ---------------------------------------------------------------- 1. Webfonts */
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-italic.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/ibm-plex-mono-400.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/ibm-plex-mono-500.woff2") format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/ibm-plex-mono-600.woff2") format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url("/fonts/instrument-sans-italic.woff2") format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url("/fonts/instrument-sans.woff2") format('woff2')}
/* Newsreader is subset to Latin and instanced at the one weight the system uses (400); the optical-size axis is kept. */
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/newsreader-italic.woff2") format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/newsreader.woff2") format('woff2')}

/* ---------------------------------------------------------------- 2. Tokens */
:root{
  /* Stone — warm neutral ramp, paper (0) to ink (1000). Use the semantic
     aliases below in markup; the ramps are the source they draw from. */
  --stone-0:#FDFCF9;
  --stone-50:#F6F3EC;
  --stone-100:#EEEADF;
  --stone-200:#E2DCCE;
  --stone-300:#CDC6B5;
  --stone-400:#ABA493;
  --stone-500:#858072;
  --stone-600:#625E53;
  --stone-700:#45423A;
  --stone-800:#2C2A25;
  --stone-850:#22211D;
  --stone-900:#1B1A17;
  --stone-950:#121210;
  --stone-1000:#0A0A09;

  /* Ember — signal accent. Sparingly: one per view. */
  --ember-50:#FBEDE5;
  --ember-100:#F6D4C3;
  --ember-200:#EFB397;
  --ember-300:#E68C66;
  --ember-400:#DE6D3E;
  --ember-500:#D4531F;
  --ember-600:#B44319;
  --ember-700:#8C3414;
  --ember-800:#5E230E;

  /* Cobalt — data, links, focus, selection */
  --cobalt-50:#EAEFFB;
  --cobalt-100:#CCD9F5;
  --cobalt-200:#A6BDEE;
  --cobalt-300:#7D9DE4;
  --cobalt-400:#5279DA;
  --cobalt-500:#2F5BD0;
  --cobalt-600:#2548AA;
  --cobalt-700:#1C3782;
  --cobalt-800:#132556;

  /* Semantic hues */
  --moss-100:#D7EADB;
  --moss-300:#7DB892;
  --moss-500:#2F7D4E;
  --moss-600:#25643E;
  --ochre-100:#F4E4C2;
  --ochre-300:#DDB45E;
  --ochre-500:#B7801B;
  --ochre-600:#946615;
  --crimson-100:#F5D3CF;
  --crimson-300:#E07B71;
  --crimson-500:#B5291F;
  --crimson-600:#921F17;

  /* Data-viz categorical (ordered) */
  --viz-1:#2F5BD0;
  --viz-2:#D4531F;
  --viz-3:#1E8079;
  --viz-4:#C4951E;
  --viz-5:#75509A;
  --viz-6:#858072;

  /* Typography */
  --font-display:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --font-sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --text-display-xl:88px; --leading-display-xl:0.98; --tracking-display-xl:-0.025em;
  --text-display-l:64px;  --leading-display-l:1.02;  --tracking-display-l:-0.02em;
  --text-display-m:48px;  --leading-display-m:1.06;  --tracking-display-m:-0.015em;
  --text-h1:36px; --leading-h1:1.12; --tracking-h1:-0.01em;
  --text-h2:28px; --leading-h2:1.18; --tracking-h2:-0.005em;
  --text-h3:20px; --leading-h3:1.3;  --tracking-h3:-0.005em;
  --text-h4:16px; --leading-h4:1.35; --tracking-h4:0;
  --text-body-l:18px; --leading-body-l:1.55;
  --text-body:15px;   --leading-body:1.55;
  --text-body-s:13px; --leading-body-s:1.5;
  --text-caption:12px; --leading-caption:1.4;
  --text-label:11px; --leading-label:1.2; --tracking-label:0.08em;
  --text-data:13px;  --leading-data:1.4;
  --text-data-l:28px;

  /* Space */
  --space-px:1px;
  --space-0-5:2px;
  --space-1:4px;
  --space-1-5:6px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Radii — the shadcn/ui scale for cards and fields; buttons, badges and tags are pills. */
  --radius-0:0;
  --radius-1:6px;
  --radius-2:8px;
  --radius-pill:999px;
  --radius-soft:12px;
  --radius-bubble:16px;
  --radius-control:10px;
  --radius-card:12px;
  --radius-overlay:12px;

  /* Borders, controls, layout */
  --border-width:1px;
  --border-width-strong:1.5px;
  --control-h-sm:28px;
  --control-h-md:36px;
  --control-h-lg:44px;
  --container-max:1360px;
  --container-text:680px;
  --gutter:clamp(20px,3vw,40px);
  /* Gap between the two halves of every two-column layout. With equal
     columns this puts every second column on one line down the page. */
  --col-gap:clamp(32px,4vw,64px);
  --header-h:72px;
  /* The frame: the column the header, the homepage sections and the footer share. */
  --frame-col:1352px;
  --frame-inset:clamp(10px,3vw,44px);
  --frame-pad:clamp(14px,2.2vw,24px);

  /* Elevation: a hairline shadow on every control and card, the shadcn shadow-xs. */
  --shadow-xs:0 1px 2px rgba(18,18,16,.06);
  --shadow-popover:0 0 0 1px rgba(18,18,16,.08),0 6px 20px -6px rgba(18,18,16,.18);
  --shadow-overlay:0 0 0 1px rgba(18,18,16,.08),0 24px 48px -16px rgba(18,18,16,.28);
  --shadow-toast:0 0 0 1px rgba(18,18,16,.10),0 10px 28px -10px rgba(18,18,16,.30);
  --scrim:rgba(18,18,16,.48);

  /* Motion: decisive, never bouncy */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-enter:cubic-bezier(0,0,0,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --dur-instant:80ms;
  --dur-fast:120ms;
  --dur-base:180ms;
  --dur-slow:280ms;
  --dur-reveal:520ms;

  /* Layers */
  --z-header:20;
  --z-popover:40;
  --z-overlay:60;
  --z-toast:80;

  /* Patterns (CSS-only textures) */
  --pattern-dots:radial-gradient(circle at 1px 1px,currentColor 1px,transparent 1.2px);
  --pattern-dots-size:16px 16px;
  --pattern-grid:linear-gradient(to right,currentColor 1px,transparent 1px),linear-gradient(to bottom,currentColor 1px,transparent 1px);
  --pattern-grid-size:48px 48px;
}

/* ---------------------------------------------------------------- 3. Semantic aliases */
:root{
  --bg-page:var(--stone-50);
  --bg-surface:var(--stone-0);
  --bg-subtle:var(--stone-100);
  --bg-muted:var(--stone-200);
  --bg-inverse:var(--stone-950);
  --bg-hover:rgba(18,18,16,.045);
  --bg-active:rgba(18,18,16,.08);
  --bg-selected:var(--cobalt-50);

  --fg-1:var(--stone-950);
  --fg-2:var(--stone-700);
  --fg-3:var(--stone-500);
  --fg-disabled:var(--stone-400);
  --fg-inverse:var(--stone-50);
  --fg-on-accent:#FFFFFF;

  --border-1:var(--stone-200);
  --border-2:var(--stone-300);
  --border-strong:var(--stone-950);
  --border-focus:var(--cobalt-500);

  --accent:var(--ember-500);
  --accent-hover:var(--ember-600);
  --accent-subtle:var(--ember-50);
  --accent-fg:var(--ember-600);

  --link:var(--cobalt-600);
  --link-hover:var(--cobalt-700);
  --focus-ring:0 0 0 2px var(--bg-page),0 0 0 4px var(--cobalt-500);

  --action-primary-bg:var(--stone-950);
  --action-primary-bg-hover:var(--stone-800);
  --action-primary-fg:var(--stone-50);

  --success:var(--moss-500);   --success-bg:var(--moss-100);
  --warning:var(--ochre-500);  --warning-bg:var(--ochre-100);
  --danger:var(--crimson-500); --danger-bg:var(--crimson-100);
  --info:var(--cobalt-500);    --info-bg:var(--cobalt-50);

  --surface-card:var(--bg-surface);
  --text-body-color:var(--fg-2);
  --text-heading-color:var(--fg-1);
  color-scheme:light;
}

[data-theme="ink"]{
  --bg-page:var(--stone-950);
  --bg-surface:var(--stone-900);
  --bg-subtle:var(--stone-850);
  --bg-muted:var(--stone-800);
  --bg-inverse:var(--stone-50);
  --bg-hover:rgba(246,243,236,.05);
  --bg-active:rgba(246,243,236,.09);
  --bg-selected:rgba(47,91,208,.20);

  --fg-1:var(--stone-50);
  --fg-2:var(--stone-300);
  --fg-3:var(--stone-500);
  --fg-disabled:var(--stone-600);
  --fg-inverse:var(--stone-950);

  --border-1:var(--stone-800);
  --border-2:var(--stone-700);
  --border-strong:var(--stone-50);
  --border-focus:var(--cobalt-400);

  --accent:var(--ember-500);
  --accent-hover:var(--ember-400);
  --accent-subtle:rgba(212,83,31,.16);
  --accent-fg:var(--ember-300);

  --link:var(--cobalt-300);
  --link-hover:var(--cobalt-200);
  --focus-ring:0 0 0 2px var(--bg-page),0 0 0 4px var(--cobalt-400);

  --action-primary-bg:var(--stone-50);
  --action-primary-bg-hover:var(--stone-200);
  --action-primary-fg:var(--stone-950);

  --success:var(--moss-300);   --success-bg:rgba(47,125,78,.20);
  --warning:var(--ochre-300);  --warning-bg:rgba(183,128,27,.20);
  --danger:var(--crimson-300); --danger-bg:rgba(181,41,31,.22);
  --info:var(--cobalt-300);    --info-bg:rgba(47,91,208,.22);

  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow-popover:0 0 0 1px rgba(246,243,236,.08),0 8px 24px -6px rgba(0,0,0,.6);
  --shadow-overlay:0 0 0 1px rgba(246,243,236,.08),0 24px 56px -12px rgba(0,0,0,.7);
  --shadow-toast:0 0 0 1px rgba(246,243,236,.10),0 10px 28px -8px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------------------------------------------------------------- 4. Element defaults */
html,
body{
  margin:0;
  background:var(--bg-page) !important;
  color:var(--fg-1);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{
  background:var(--cobalt-100);
  color:var(--stone-950);
}

[data-theme]{
  background:var(--bg-page);
  color:var(--fg-1);
}

/* Element defaults for pages built on the system. :where() keeps them at
   zero specificity so a page's own classes always win. */
:where([data-st]) *,
:where([data-st]) *::before,
:where([data-st]) *::after{
  box-sizing:border-box;
}

:where([data-st]) :is(h1,h2,h3,h4,p){
  margin:0;
  text-wrap:pretty;
}

:where([data-st]) a:not([class]){
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-standard);
}

:where([data-st]) a:not([class]):hover{
  color:var(--link-hover);
}

:where([data-st]) hr{
  border:0;
  border-top:1px solid var(--border-1);
  margin:0;
}

:where([data-st]) :is(code,kbd,samp,pre){
  font-family:var(--font-mono);
  font-size:.92em;
}

/* The stray dark layers the older pages still carry (particle hero, grain,
   progress rail) are not part of the system. */
aa-experience,
#aa-grain,
body > div[style*="radial-gradient(ellipse"],
body > div:has(> [data-dot]){
  display:none !important;
}

/* ---------------------------------------------------------------- 5. Utilities */
.st-eyebrow{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:var(--text-label);
  line-height:var(--leading-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--fg-3);
}

.st-eyebrow--marker{
  display:flex;
  align-items:center;
  gap:12px;
}

.st-eyebrow--marker::before{
  content:"";
  width:7px;
  height:7px;
  background:var(--accent);
  flex:none;
}

/* A page's <h1> is its search keyword, not its slogan, so on most pages the
   eyebrow label is the h1 (h1.st-eyebrow, styled by class above) and the big
   serif headline below it is a <p class="st-hero__title">. Where the label is
   a breadcrumb ("Guide / Tech consulting"), only its last part is the h1 and it
   inherits the label's type. Nothing here targets h1 or div by tag name. */
.st-eyebrow > h1{
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  margin:0;
}

.st-display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:var(--tracking-display-l);
  line-height:var(--leading-display-l);
  color:var(--fg-1);
}

/* Visually hidden: there for assistive tech and the keyboard, not the eye. */
.st-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.st-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

.st-wrap{
  max-width:var(--container-max);
  margin:0 auto;
}

/* ---------------------------------------------------------------- 6. Components */
/* Button */
.st-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:var(--control-h-md);
  padding:0 14px;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.005em;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  box-sizing:border-box;
  transition:background-color .2s var(--m-soft),border-color .2s var(--m-soft),color .2s var(--m-soft),transform .25s var(--m-ease),box-shadow .25s var(--m-ease);
  -webkit-user-select:none;
  user-select:none;
}

.st-btn:not(:disabled):active{transform:scale(.97)}

.st-btn:disabled,
.st-btn[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.38;
}

.st-btn--sm{height:var(--control-h-sm);padding:0 10px;font-size:13px;gap:6px}
.st-btn--lg{height:var(--control-h-lg);padding:0 18px;font-size:15px;gap:10px}

.st-btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg);box-shadow:var(--shadow-xs)}
.st-btn--primary:not(:disabled):hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.st-btn--accent{background:var(--accent);color:var(--fg-on-accent);box-shadow:var(--shadow-xs)}
.st-btn--accent:not(:disabled):hover{background:var(--accent-hover);color:var(--fg-on-accent)}
.st-btn--secondary{background:var(--bg-surface);color:var(--fg-1);border-color:var(--border-2);box-shadow:var(--shadow-xs)}
.st-btn--secondary:not(:disabled):hover{border-color:var(--fg-1);background:var(--bg-hover);color:var(--fg-1)}
.st-btn--ghost{background:transparent;color:var(--fg-1);box-shadow:none}
.st-btn--ghost:not(:disabled):hover{background:var(--bg-hover);color:var(--fg-1)}
.st-btn:not(:disabled):active{background-image:linear-gradient(var(--bg-active),var(--bg-active))}
.st-btn--link{height:auto;padding:0 0 3px;border:0;border-bottom:1px solid currentColor;border-radius:0;color:var(--fg-1);background:none}
.st-btn--link:not(:disabled):hover{color:var(--accent-fg)}
.st-btn--link:not(:disabled):active{background-image:none}
.st-btn__ico{display:inline-flex;transition:transform var(--dur-base) var(--ease-standard)}
.st-btn__ico svg{display:block;flex:none}
.st-btn:not(:disabled):hover .st-btn__ico--nudge{transform:translateX(2px)}
.st-btn--full{width:100%}

/* IconButton */
.st-ibtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--control-h-md);
  height:var(--control-h-md);
  padding:0;
  border-radius:var(--radius-control);
  border:1px solid transparent;
  background:transparent;
  color:var(--fg-2);
  cursor:pointer;
  box-sizing:border-box;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}

.st-ibtn svg{display:block;flex:none}
.st-ibtn:not(:disabled):hover{background:var(--bg-hover);color:var(--fg-1)}
.st-ibtn:not(:disabled):active{background:var(--bg-active)}
.st-ibtn:disabled{opacity:.38;cursor:not-allowed}
.st-ibtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.st-ibtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.st-ibtn--secondary{border-color:var(--border-2);color:var(--fg-1)}
.st-ibtn--secondary:not(:disabled):hover{border-color:var(--fg-1)}
.st-ibtn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.st-ibtn--primary:not(:disabled):hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.st-ibtn--circle{border-radius:var(--radius-pill)}
.st-ibtn[aria-pressed="true"]{background:var(--bg-active);color:var(--fg-1)}

/* Badge */
.st-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:20px;
  padding:0 7px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  white-space:nowrap;
  box-sizing:border-box;
}

.st-badge--lg{height:24px;padding:0 9px;font-size:11px}
.st-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
/* The pulse is a ring that grows and fades on the compositor; animating a box-shadow repaints every frame. */
.st-badge--pulse .st-badge__dot{position:relative}
.st-badge--pulse .st-badge__dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid currentColor;opacity:0;animation:st-badge-pulse 1.8s var(--ease-standard) infinite}
@keyframes st-badge-pulse{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(2.3);opacity:0}}
.st-badge--subtle.st-badge--neutral{background:var(--bg-subtle);color:var(--fg-2);border-color:var(--border-1)}
.st-badge--subtle.st-badge--success{background:var(--success-bg);color:var(--success)}
.st-badge--subtle.st-badge--warning{background:var(--warning-bg);color:var(--warning)}
.st-badge--subtle.st-badge--danger{background:var(--danger-bg);color:var(--danger)}
.st-badge--subtle.st-badge--info{background:var(--info-bg);color:var(--info)}
.st-badge--subtle.st-badge--accent{background:var(--accent-subtle);color:var(--accent-fg)}
.st-badge--outline{background:transparent;border-color:var(--border-2)}
.st-badge--outline.st-badge--neutral{color:var(--fg-2)}
.st-badge--outline.st-badge--success{color:var(--success)}
.st-badge--outline.st-badge--warning{color:var(--warning)}
.st-badge--outline.st-badge--danger{color:var(--danger)}
.st-badge--outline.st-badge--info{color:var(--info)}
.st-badge--outline.st-badge--accent{color:var(--accent-fg)}
.st-badge--solid{color:#fff}
.st-badge--solid.st-badge--neutral{background:var(--fg-1);color:var(--bg-page)}
.st-badge--solid.st-badge--success{background:var(--moss-500)}
.st-badge--solid.st-badge--warning{background:var(--ochre-500)}
.st-badge--solid.st-badge--danger{background:var(--crimson-500)}
.st-badge--solid.st-badge--info{background:var(--cobalt-500)}
.st-badge--solid.st-badge--accent{background:var(--ember-500)}

/* Tag */
.st-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding:0 9px;
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:500;
  line-height:1;
  color:var(--fg-1);
  background:var(--bg-subtle);
  border:1px solid var(--border-1);
  border-radius:var(--radius-pill);
  white-space:nowrap;
  box-sizing:border-box;
  transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}

.st-tag--sm{height:22px;padding:0 7px;font-size:12px;gap:5px}
.st-tag--outline{background:transparent;border-color:var(--border-2)}
.st-tag--selected,
.st-tag--selected:hover{background:var(--fg-1);color:var(--bg-page);border-color:var(--fg-1)}

/* SectionHeader */
.st-sh{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  color:var(--fg-1);
}

.st-sh--rule{padding-top:16px;border-top:1px solid var(--border-strong)}
.st-sh--center{flex-direction:column;align-items:center;text-align:center}
.st-sh__main{min-width:0;max-width:820px}

.st-sh__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-2);
}

.st-sh--center .st-sh__eyebrow{justify-content:center}
.st-sh__marker{width:7px;height:7px;background:var(--accent);flex-shrink:0}
.st-sh__index{color:var(--fg-1)}
.st-sh__line{width:28px;height:1px;background:var(--border-2)}
.st-sh__title{margin:0;color:var(--fg-1);text-wrap:balance}
.st-sh--lg .st-sh__eyebrow{margin-bottom:24px}
.st-sh--md .st-sh__eyebrow{margin-bottom:16px}
.st-sh--sm .st-sh__eyebrow{margin-bottom:6px}
.st-sh--lg .st-sh__title{font-family:var(--font-display);font-size:clamp(34px,4vw,56px);font-weight:400;line-height:1.03;letter-spacing:-.02em}
.st-sh--md .st-sh__title{font-family:var(--font-display);font-size:clamp(28px,2.6vw,36px);font-weight:400;line-height:1.1;letter-spacing:-.012em}
.st-sh--sm .st-sh__title{font-family:var(--font-sans);font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.005em}
.st-sh__desc{color:var(--fg-2);max-width:620px}
.st-sh--center .st-sh__desc{margin-left:auto;margin-right:auto}
.st-sh--lg .st-sh__desc{margin-top:20px;font-size:18px;line-height:1.55}
.st-sh--md .st-sh__desc{margin-top:12px;font-size:16px;line-height:1.55}
.st-sh--sm .st-sh__desc{margin-top:2px;font-size:13px;line-height:1.45;color:var(--fg-3)}
.st-sh__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* OpenAI Select Partner badge — shown exactly as supplied (no recolour, crop
   or distortion; only scaled proportionally, always on its own white plate). */
.aa-partner-badge{
  display:inline-block;
  line-height:0;
  border-radius:0;
  transition:opacity var(--dur-fast) var(--ease-standard);
}

.aa-partner-badge:hover,
.aa-partner-badge:focus-visible{
  opacity:.86;
}

.aa-partner-badge img{
  display:block;
  width:auto;
  height:56px;
  max-width:100%;
}

/* ---------------------------------------------------------------- 7. Site chrome */
/* Splash — the Ink surface with its grid, vignetted around the brand lockup,
   an ember rule that fills over the splash's 900ms, and the two captions.
   The page script fades it out; reduced motion skips it. */
.st-loader{
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px;
  overflow:hidden;
  background:var(--stone-950);
  color:var(--stone-50);
  font-family:var(--font-sans);
  transition:transform .85s cubic-bezier(.76,0,.24,1),opacity var(--dur-reveal) var(--ease-exit);
}
/* The curtain lifts off the page rather than fading over it, so the mark
   never sits on top of the hero copy. It plays once per visit: a repeat view
   is marked in the head before first paint and never shows it. */
.st-loader.is-out{transform:translate3d(0,-100%,0)}
html.aa-seen .st-loader{display:none!important}

.st-loader *{
  box-sizing:border-box;
}

.st-loader__grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  color:rgba(246,243,236,.07);
  background-image:var(--pattern-grid);
  background-size:var(--pattern-grid-size);
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.95), transparent);
  mask-image:radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.95), transparent);
}

.st-loader__brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  animation:st-loader-in var(--dur-reveal) var(--ease-enter) both;
}

.st-loader__brand img{
  height:40px;
  width:auto;
  display:block;
}

.st-loader__brand span{
  font-size:30px;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1;
  white-space:nowrap;
}

.st-loader__brand span span{
  font-weight:600;
}

.st-loader__rule{
  position:relative;
  width:min(280px,64vw);
  height:2px;
  background:var(--stone-800);
  overflow:hidden;
}

.st-loader__rule i{
  position:absolute;
  inset:0;
  background:var(--ember-500);
  transform-origin:left center;
  transform:scaleX(0);
  animation:st-loader-fill .5s var(--ease-standard) both;
}

.st-loader__meta{
  position:absolute;
  left:var(--gutter);
  right:var(--gutter);
  bottom:calc(28px + env(safe-area-inset-bottom,0px));
  display:flex;
  justify-content:space-between;
  gap:16px 24px;
  font-family:var(--font-mono);
  font-size:var(--text-label);
  line-height:1.5;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--stone-500);
  animation:st-loader-in var(--dur-reveal) var(--ease-enter) 120ms both;
}

.st-loader__meta span:first-child::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:12px;
  vertical-align:1px;
  background:var(--ember-500);
}

@keyframes st-loader-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

@keyframes st-loader-fill{
  to{transform:scaleX(1)}
}

@media (max-width:600px){
  .st-loader__brand img{height:30px}
  .st-loader__brand span{font-size:23px}
  .st-loader__meta{flex-direction:column}
}

/* Header — a 72px bar that sticks to the top of the page, on the same
   1352px column as the footer. The first section of every page runs
   underneath it (see the end of this file), so over an Ink opening the bar
   is clear and light until that section scrolls past. aa-page.js keeps
   data-past-hero up to date; the :has() clause covers the moment before it
   runs, and browsers without it simply keep the paper bar. */
.st-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  background:color-mix(in oklab,var(--bg-page) 94%,transparent);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-1);
  font-family:var(--font-sans);
  color:var(--fg-1);
  transition:background-color .45s var(--m-soft),border-color .45s var(--m-soft),color .45s var(--m-soft);
}

.st-header *{
  box-sizing:border-box;
}

.st-header__in{
  width:calc(100% - 2 * var(--frame-inset));
  max-width:var(--frame-col);
  margin:0 auto;
  padding:0 var(--frame-pad);
  height:var(--header-h);
  display:flex;
  align-items:center;
  gap:32px;
}

.st-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  flex:none;
}

.st-brand img{
  height:21px;
  width:auto;
  display:block;
  transition:filter var(--dur-base) var(--ease-standard);
}

.st-brand span{
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:400;
  letter-spacing:-0.01em;
  color:inherit;
  white-space:nowrap;
}

.st-brand span span{
  font-weight:600;
}

/* The links sit at the right, quiet and small; the booking pill ends the row. */
.st-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  flex:1;
  min-width:0;
  height:var(--header-h);
}

:is(.st-nav > a:not(.st-btn), .st-nav .sc-menu__link){
  position:relative;
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 12px;
  border-radius:var(--radius-pill);
  font-size:13.5px;
  font-weight:400;
  text-decoration:none;
  white-space:nowrap;
  color:inherit;
  opacity:.78;
  transition:background-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}

:is(.st-nav > a:not(.st-btn), .st-nav .sc-menu__link):hover,
:is(.st-nav > a:not(.st-btn), .st-nav .sc-menu__link):focus-visible{
  background:var(--bg-hover);
  opacity:1;
}

:is(.st-nav > a, .st-nav .sc-menu__link)[aria-current="page"]{
  background:var(--bg-subtle);
  opacity:1;
}

/* The booking pill: a label, then an arrow in a disc, with a hairline before it. */
.st-nav > .st-btn{
  position:relative;
  height:32px;
  margin-left:22px;
  padding:0 6px 0 14px;
  gap:8px;
  font-size:13.5px;
  font-weight:500;
  transition:background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);
}

.st-nav > .st-btn::before{
  content:"";
  position:absolute;
  left:-15px;
  top:7px;
  bottom:7px;
  width:1px;
  background:currentColor;
  opacity:.2;
}

.st-nav > .st-btn::after{
  content:"";
  flex:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background-color:var(--action-primary-fg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121210' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px 11px;
  transition:transform var(--dur-base) var(--ease-standard);
}

.st-nav > .st-btn:hover::after{
  transform:translateX(2px);
}

.st-burger{
  display:none;
  width:var(--control-h-lg);
  height:var(--control-h-lg);
  margin-right:-10px;
  color:inherit;
}

.st-burger svg{
  display:block;
}

.st-burger .st-burger__close,
.st-burger[aria-expanded="true"] .st-burger__open{
  display:none;
}

.st-burger[aria-expanded="true"] .st-burger__close{
  display:block;
}

/* Over an Ink opening: no bar, light type, the mark inverted, the pill frosted. */
.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)){
  background:transparent;
  border-color:transparent;
  color:var(--stone-50);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) .st-brand img{
  filter:invert(1) brightness(1.08);
}

.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) :is(.st-nav > a:not(.st-btn), .st-nav .sc-menu__link):hover,
.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) :is(.st-nav > a:not(.st-btn), .st-nav .sc-menu__link):focus-visible{
  background:rgba(246,243,236,.12);
}

.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) :is(.st-nav > a, .st-nav .sc-menu__link)[aria-current="page"]{
  background:rgba(246,243,236,.14);
}

.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) .st-nav > .st-btn{
  background:rgba(18,18,16,.5);
  color:var(--stone-50);
  border-color:rgba(246,243,236,.16);
  box-shadow:none;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) .st-nav > .st-btn::after{
  background-color:var(--stone-50);
}

.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) .st-burger,
.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) .st-burger:hover,
.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) .st-burger:focus-visible,
.st-header:is([data-past-hero="false"],:not([data-past-hero]):has(~ main > [data-theme="ink"]:first-child)) .st-burger[aria-expanded="true"]{
  color:var(--stone-50);
  background:rgba(246,243,236,.1);
}

.st-mobile{
  display:none;
}

@media (max-width:880px){
  .st-header__in{
    gap:12px;
  }

  .st-nav{
    gap:8px;
    justify-content:flex-end;
  }

  :is(.st-nav > a:not(.st-btn), .st-nav .sc-menu__link){
    display:none;
  }

  .st-nav > .st-btn{
    margin-left:0;
  }

  .st-nav > .st-btn::before{
    display:none;
  }

  .st-burger{
    display:inline-flex;
    flex:none;
  }

  .st-nav .sc-menu__item{
    display:none;
  }

  /* The sheet: the whole sitemap in groups, sliding down under the bar. */
  .st-mobile{
    display:block;
    position:fixed;
    top:var(--header-h);
    left:0;
    right:0;
    bottom:0;
    z-index:var(--z-popover);
    background:var(--bg-page);
    border-top:1px solid var(--border-1);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    overflow:auto;
    overscroll-behavior:contain;
    transition:opacity .3s var(--m-soft),transform .45s var(--m-ease),visibility 0s linear .45s;
  }

  .st-mobile[data-open]{
    opacity:1;
    visibility:visible;
    transform:none;
    transition-delay:0s;
  }

  .st-mobile nav{
    display:flex;
    flex-direction:column;
    gap:22px;
    width:calc(100% - 2 * var(--frame-inset));
    max-width:var(--frame-col);
    margin:0 auto;
    padding:16px var(--frame-pad) calc(28px + env(safe-area-inset-bottom,0px));
  }

  .st-mobile .sc-sheet__group{
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .st-mobile .sc-sheet__group > .st-eyebrow{
    padding:0 12px 8px;
  }

  .st-mobile a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:9px 12px;
    border-radius:12px;
    font-size:15.5px;
    font-weight:500;
    text-decoration:none;
    color:var(--fg-1);
    -webkit-tap-highlight-color:transparent;
  }

  .st-mobile a small{
    font-size:12.5px;
    font-weight:400;
    color:var(--fg-3);
  }

  .st-mobile a[aria-current="page"],
  .st-mobile a:active{
    background:var(--bg-subtle);
    color:var(--fg-1);
  }

  .st-mobile .sc-sheet__row{
    display:flex;
    gap:8px;
    padding-top:4px;
  }

  .st-mobile .sc-sheet__row .st-btn{
    flex:1;
  }
}

/* Shared page layouts — used by every rebuilt capability, guide and
   case-study page. Homepage-specific table/build rows stay on index.html. */
.st-hero{
  position:relative;
  overflow:hidden;
  background:var(--bg-page);
  color:var(--fg-1);
}
.st-hero__grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  color:rgba(246,243,236,.06);
  background-image:var(--pattern-grid);
  background-size:var(--pattern-grid-size);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 80%);
}
.st-hero__dots{
  position:absolute;
  inset:0;
  pointer-events:none;
  color:rgba(246,243,236,.08);
  background-image:var(--pattern-dots);
  background-size:var(--pattern-dots-size);
}
.st-hero__in{
  position:relative;
  padding:clamp(48px,6vw,96px) var(--gutter) clamp(40px,5vw,80px);
}
.st-hero__in--split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
  gap:clamp(32px,4vw,64px) var(--col-gap);
  align-items:stretch;
}
.st-hero__copy{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
  min-width:0;
}
.st-hero__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(40px,5.6vw,84px);
  line-height:.98;
  letter-spacing:-0.025em;
  margin-top:28px;
  color:var(--fg-1);
  text-wrap:balance;
}
.st-hero__title em,
.st-hero__title span{
  font-style:italic;
  font-weight:400;
  color:var(--fg-2);
}
.st-hero__deck{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(24px,2.5vw,36px);
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--fg-2);
  margin-top:20px;
}
.st-hero__lede{
  font-size:17px;
  line-height:1.55;
  color:var(--fg-2);
  max-width:54ch;
  margin:24px 0 0;
}
.st-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
/* Practice-page intro. Headline and deck stack on the left with a fixed
   gap. The lede and actions start level with the headline. */
.st-hero-lead{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--col-gap);
  align-items:start;
  margin-top:36px;
}
.st-hero-lead > div:first-child{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.st-hero-lead .st-hero__title{max-width:11ch;margin:0}
.st-hero-lead .st-hero__deck{max-width:16ch;margin:0}
.st-hero-lead__aside{max-width:46ch}
.st-hero-lead__aside .st-hero__lede{margin-top:0}
@media (max-width:860px){
  .st-hero-lead{grid-template-columns:1fr;row-gap:32px}
  .st-hero-lead .st-hero__title,
  .st-hero-lead .st-hero__deck{max-width:18ch}
  .st-hero-lead__aside{max-width:40ch}
}
.st-hero__partner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--border-1);
}
.st-hero__partner span{font-size:13px;color:var(--fg-3)}
.st-hero__fig{position:relative;min-height:380px;min-width:0}
.st-hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 32px;
  margin-top:28px;
}
/* Social link: the LinkedIn mark and a label. Sits in the hero partner row
   next to the OpenAI badge and in the footer's AnotherAgent column, where it
   takes that column's link type. */
.st-social{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:inherit;
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard);
}
.st-social svg{width:18px;height:18px;flex:none}
.st-social span{color:inherit}
.st-social:hover,
.st-social:focus-visible{color:var(--fg-1)}
.st-hero__partner .st-social{font-size:13px;color:var(--fg-3)}
.st-hero__partner .st-social:hover,
.st-hero__partner .st-social:focus-visible{color:var(--fg-1)}

/* Each aura carries its own fixed gradient in --aura-wash. The field
   itself is the surface it sits on: paper on a light page, ink on a dark one.
   The blobs inside are free to vary. */
.st-aura{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--stone-950);
  isolation:isolate;
}
.st-aura--paper{background:var(--stone-50)}
.st-aura--ink{background:var(--stone-950)}
.st-aura--wide{position:relative;width:100%;aspect-ratio:21/9;min-height:180px;margin-top:clamp(40px,5vw,64px)}
.st-hero__in--guide{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px) var(--col-gap);
  align-items:stretch;
}
.st-hero__in--guide > .st-aura--wide{aspect-ratio:auto;min-height:320px;margin-top:0}
/* Guide titles are questions with long words; a lower ceiling keeps them to two lines in half the width. */
.st-hero__in--guide .st-hero__title{font-size:clamp(40px,5vw,72px)}
@media (max-width:880px){
  .st-hero__in--guide{grid-template-columns:1fr}
  .st-hero__in--guide > .st-aura--wide{aspect-ratio:21/9;min-height:140px}
}
.st-aura__wash{
  position:absolute;
  inset:-18%;
  background-color:transparent;
  background-image:var(--aura-wash);
  filter:blur(40px) saturate(1.12);
}
.st-aura__grain{
  position:absolute;
  inset:0;
  opacity:.2;
  mix-blend-mode:multiply;
  background-size:160px 160px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.st-aura--ink .st-aura__grain{opacity:.34;mix-blend-mode:soft-light}

.st-log{
  position:absolute;
  left:16px;
  right:16px;
  bottom:48px;
  padding:14px 16px;
  background:var(--bg-surface);
  color:var(--fg-1);
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-overlay);
}
.st-log__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:6px;
}
.st-log__row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:10px 12px;
  padding:9px 0;
  border-top:1px solid var(--border-1);
  font-size:13px;
  line-height:1.45;
  color:var(--fg-2);
}
.st-log__row .st-num{font-size:12px;color:var(--fg-3)}
.st-log__row em{font-style:normal;color:var(--accent-fg)}
.st-log__row--kv{grid-template-columns:minmax(0,1fr) auto}
.st-log__row--kv .st-num{font-size:15px;color:var(--fg-1)}

/* Interface assets. The same pieces shadcn/ui composes a screen from —
   a surface card, a metric, a chart, a progress row, an activity list —
   drawn with these tokens so a hero can show a product without a second
   library or a build. The aura stays behind; the cards sit in front. */
.st-hero__fig:has(.st-board),
.st-hero__fig:has(.st-platform){
  display:flex;
  flex-direction:column;
  min-height:460px;
}
.st-board{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:12px;
  align-items:stretch;
  margin:18px;
  margin-top:auto;
  min-width:0;
}
.st-ui{
  background:var(--bg-surface);
  color:var(--fg-1);
  border-radius:var(--radius-soft);
  box-shadow:var(--shadow-overlay);
  padding:16px;
  min-width:0;
}
.st-ui__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.st-ui__kicker{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.st-ui__title{
  margin:6px 0 0;
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.011em;
  line-height:1.3;
  color:var(--fg-1);
}
.st-ui__desc{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.45;
  color:var(--fg-2);
}
.st-ui__metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border-1);
}
.st-ui__metrics > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.st-ui__metrics span{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--fg-3);
}
.st-ui__metrics strong{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
  white-space:nowrap;
  color:var(--fg-1);
}
.st-ui__metrics strong.is-accent{color:var(--accent-fg)}
.st-ui__steps{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.st-ui__steps > div{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.st-ui__steps span{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.st-ui__steps i{
  display:block;
  height:6px;
  border-radius:var(--radius-pill);
  background:var(--bg-muted);
  position:relative;
}
.st-ui__steps i::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--w);
  background:var(--accent);
  border-radius:inherit;
}
.st-ui__steps b{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--fg-1);
}
.st-ui__area{height:92px;margin-top:16px;color:var(--accent)}
.st-ui__area svg{display:block;width:100%;height:100%}
.st-ui__foot{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:12px 0 0;
  font-size:12px;
  line-height:1.4;
  color:var(--fg-2);
}
.st-ui__foot .st-num{font-size:12px;color:var(--fg-1)}
.st-ui__rows{display:flex;flex-direction:column;margin-top:8px}
.st-ui__rows > div{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:10px;
  padding:8px 0;
  border-top:1px solid var(--border-1);
  font-size:13px;
  line-height:1.4;
  color:var(--fg-2);
}
.st-ui__rows .st-num{font-size:11px;color:var(--fg-3)}
.st-ui__rows em{font-style:italic;color:var(--accent-fg)}
.st-ui--stat{display:flex;flex-direction:column;justify-content:flex-start;gap:8px}
.st-ui__stat{
  margin:8px 0 0;
  font-family:var(--font-mono);
  font-size:clamp(28px,3vw,36px);
  font-weight:500;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  line-height:1;
  color:var(--fg-1);
}
@media (max-width:640px){
  .st-board{grid-template-columns:1fr}
  .st-hero__fig:has(.st-board){min-height:0}
  .st-ui__metrics{grid-template-columns:1fr;gap:10px}
  .st-ui__metrics > div{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px}
  .st-ui__metrics span{order:-1}
}

.st-pair-list{margin-top:40px;border-top:1px solid var(--border-strong)}
.st-pair{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:16px;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid var(--border-1);
}
.st-pair__copy{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:6px 48px;
  align-items:baseline;
}
.st-pair strong{
  font-family:var(--font-display);
  font-size:clamp(22px,1.9vw,26px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--fg-1);
}
.st-pair span{font-size:14px;line-height:1.55;color:var(--fg-2)}

.st-dash{
  margin-top:clamp(40px,5vw,64px);
  background:var(--bg-surface);
  color:var(--fg-1);
  border:0;
  border-radius:var(--radius-soft);
  box-shadow:var(--shadow-overlay);
  overflow:hidden;
}
.st-dash__bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-bottom:1px solid var(--border-1);
}
.st-dash__metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:1px;
  background:var(--border-1);
  border-bottom:1px solid var(--border-1);
}
.st-dash__metrics > div{background:var(--bg-page);padding:20px}
.st-dash .st-metric{background:transparent;padding:0}
.st-dash__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:1px;
  background:var(--border-1);
}
.st-dash__cell{
  background:var(--bg-page);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.st-bars{display:flex;align-items:flex-end;gap:8px;height:140px;border-bottom:1px solid var(--border-2)}
.st-bars i{flex:1;display:block;min-height:4px}
.st-bar-labs{
  display:flex;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--fg-3);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.st-bar-labs span{flex:1;text-align:center}
.st-track{height:8px;background:var(--bg-muted);position:relative}
.st-track > i{position:absolute;left:0;top:0;bottom:0;background:var(--viz-1)}
.st-kv{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  font-size:13px;
}
.st-kv .st-num{font-size:12px;color:var(--fg-1);text-align:right}
.st-feed{display:flex;flex-direction:column;font-family:var(--font-mono);font-size:12.5px;line-height:1.5}
.st-feed > div{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  padding:6px 0;
  border-top:1px solid var(--border-1);
  color:var(--fg-2);
}
.st-feed > div.is-bright{color:var(--fg-1)}
.st-feed > div > span:first-child{color:var(--fg-3)}
.st-note{margin-top:12px;font-size:13px;color:var(--fg-3)}

/* Legal article — privacy policy. .aa-pol stays so the page's speakable
   selector still points at the paragraphs a reader sees. */
.st-legal h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(28px,3vw,40px);
  line-height:1.1;
  letter-spacing:-0.015em;
  margin:clamp(40px,5vw,64px) 0 0;
  color:var(--fg-1);
}
.st-legal h3{
  margin:28px 0 0;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.005em;
  color:var(--fg-1);
}
.st-legal p,
.st-legal li{
  font-size:16px;
  line-height:1.7;
  color:var(--fg-2);
}
.st-legal p{margin:14px 0 0;max-width:70ch}
.st-legal ul{
  margin:14px 0 0;
  padding-left:1.2em;
  max-width:70ch;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.st-legal a,
.st-legal .aa-cookie-btn{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:3px;
}
.st-legal .aa-cookie-btn{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  cursor:pointer;
}
.st-legal a:hover,
.st-legal .aa-cookie-btn:hover{color:var(--cobalt-700)}
.st-sheet{margin-top:18px;max-width:100%;min-width:0;overflow-x:auto}
.st-sheet table{border-collapse:collapse;width:100%;min-width:560px}
.st-sheet th,
.st-sheet td{
  text-align:left;
  vertical-align:top;
  padding:12px 16px 12px 0;
  border-top:1px solid var(--border-1);
  color:var(--fg-2);
  font-size:14px;
  line-height:1.6;
}
.st-sheet th{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  font-weight:500;
  text-transform:uppercase;
  color:var(--fg-3);
}
.st-sheet td:first-child{color:var(--fg-1);font-weight:500}
@media (max-width:640px){
  .st-sheet table{min-width:0}
  .st-sheet thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .st-sheet tr{display:block;padding:14px 0;border-top:1px solid var(--border-1)}
  .st-sheet tbody tr:last-child{border-bottom:1px solid var(--border-1)}
  .st-sheet td{display:block;padding:4px 0 0;border-top:0}
  .st-sheet td:first-child{padding:0 0 4px;font-weight:600;color:var(--fg-1)}
  .st-sheet td[data-label]::before{
    content:attr(data-label);
    display:block;
    margin:8px 0 2px;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--fg-3);
  }
}
.st-checks{border-top:1px solid var(--border-strong)}
.st-checks > div{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--border-1);
}
.st-checks svg{color:var(--success);margin-top:2px}
.st-checks strong{display:block;font-size:16px;font-weight:600;color:var(--fg-1)}
.st-checks p{font-size:14px;line-height:1.55;color:var(--fg-2);margin-top:4px}
.st-platform{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:18px;
  margin-top:auto;
  background:var(--border-2);
  border-radius:var(--radius-soft);
  box-shadow:var(--shadow-overlay);
  overflow:hidden;
}
.st-platform > div{background:var(--bg-page);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.st-platform strong{font-family:var(--font-display);font-size:20px;line-height:1.1;font-weight:400;color:var(--fg-1)}
.st-inline-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;align-items:center}
.st-inline-links a{font-size:14px;font-weight:500}
.st-sticky{position:sticky;top:88px}
@media (max-width:900px){.st-sticky{position:static}}

.st-section{padding:clamp(56px,7vw,112px) var(--gutter) 0}
/* The section already carries the gutter, so its wrap is the container less
   both gutters. Content then starts on the same line as the hero and CTA. */
.st-section > .st-wrap{max-width:calc(var(--container-max) - 2 * var(--gutter))}
.st-section.st-hero-intro{padding-bottom:clamp(72px,8vw,112px)}
.st-section--flush{padding-top:0}

.st-faq-wrap{max-width:880px}
.st-faq{margin-top:28px;display:flex;flex-direction:column;gap:12px;counter-reset:st-faq}
.st-faq > div{padding:18px 20px;border:1px solid var(--border-1);border-radius:var(--radius-card);background:var(--bg-surface);box-shadow:var(--shadow-xs)}
.st-faq h3{font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-0.005em;color:var(--fg-1)}
.st-faq p{font-size:15px;line-height:1.65;color:var(--fg-2);margin-top:8px;max-width:64ch}
/* Each question carries its number in the margin, so a long list scans. */
.st-faq:not(.st-faq--num) > div{
  counter-increment:st-faq;
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  align-content:start;
  column-gap:16px;
}
.st-faq:not(.st-faq--num) > div::before{
  content:counter(st-faq,decimal-leading-zero);
  content:counter(st-faq,decimal-leading-zero) / "";
  grid-row:1;
  grid-column:1;
  padding-top:4px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--fg-3);
}
.st-faq:not(.st-faq--num) > div > *{grid-column:2}
.st-faq--grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px var(--col-gap);
  margin-top:40px;
}
@media (max-width:760px){
  .st-faq--grid{grid-template-columns:1fr}
}

/* FAQ section on the capability pages. The question and its short answer
   sit across the top, and the questions run in two columns beneath. */
.st-qa__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px var(--col-gap);
  align-items:start;
}
.st-qa__head .st-sh--lg .st-sh__title{font-size:clamp(32px,3.2vw,46px)}
.st-qa__intro{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:64ch;
  padding-top:44px;
}
.st-qa__intro p{margin:0;font-size:15px;line-height:1.7;color:var(--fg-2)}
.st-qa__intro .st-qa__lede{font-size:18px;line-height:1.6;color:var(--fg-1)}
.st-qa__intro a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.st-qa__related{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.st-qa__related .st-eyebrow{margin-right:8px}
.st-qa__related a{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border:1px solid var(--border-1);
  border-radius:var(--radius-control);
  background:var(--bg-surface);
  box-shadow:var(--shadow-xs);
  font-size:13.5px;
  font-weight:500;
  color:var(--fg-1);
  text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.st-qa__related a:hover{border-color:var(--fg-1);color:var(--accent-fg)}
@media (max-width:900px){
  .st-qa__head{grid-template-columns:1fr}
  .st-qa__intro{padding-top:0}
}
.st-faq--num > div{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:16px;
  padding:18px 20px;
}
.st-faq--num .st-num{font-size:12px;color:var(--fg-3);padding-top:3px}

.st-phases{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:24px var(--col-gap);
  margin-top:28px;
}

.st-phase{padding:20px;border:1px solid var(--border-1);border-top:3px solid var(--border-2);border-radius:var(--radius-card);background:var(--bg-surface);box-shadow:var(--shadow-xs)}
.st-phase--now{border-top-color:var(--accent)}
.st-phase--now .st-eyebrow{color:var(--accent-fg)}
.st-phase strong{display:block;margin-top:12px;font-size:18px;font-weight:600;color:var(--fg-1)}
.st-phase h3{
  margin:12px 0 0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:26px;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--fg-1);
}
.st-phase p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--fg-2)}

.st-guide{
  max-width:var(--container-max);
  margin:0 auto;
  padding:clamp(56px,7vw,96px) var(--gutter) 0;
  display:grid;
  grid-template-columns:minmax(min(100%,220px),260px) minmax(0,1fr);
  gap:40px 72px;
  align-items:start;
}
.st-guide > *{min-width:0}
.st-toc{position:sticky;top:88px}
.st-toc ol{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  border-top:1px solid var(--border-strong);
}
.st-toc a:not(.st-btn){
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:8px;
  padding:12px 0;
  border-bottom:1px solid var(--border-1);
  font-size:14px;
  font-weight:500;
  color:var(--fg-2);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard);
}
.st-toc a:not(.st-btn):hover{color:var(--fg-1)}
.st-toc .st-num{font-size:11px;color:var(--fg-3);padding-top:3px}
.st-toc .st-btn{display:inline-flex;width:100%;margin-top:24px}
.st-article{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(56px,6vw,88px);
}
.st-article section{scroll-margin-top:96px}
.st-prose{
  max-width:680px;
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:24px;
  font-size:16px;
  line-height:1.7;
  color:var(--fg-2);
}
.st-prose p{margin:0;color:var(--fg-2)}
.st-prose h3{
  margin:14px 0 0;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.005em;
  color:var(--fg-1);
}
.st-prose h3 + p{margin-top:-10px}
.st-prose a{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:880px){
  .st-guide{grid-template-columns:1fr}
  .st-toc{position:static}
}

.st-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px var(--col-gap);
  align-items:start;
}
.st-split__side{position:sticky;top:88px}
.st-split__note{
  margin:16px 0 0;
  line-height:1.8;
  color:var(--fg-3);
}
.st-split h2,
.st-split .st-sh--lg .st-sh__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(32px,3.2vw,46px);
  line-height:1.06;
  letter-spacing:-0.015em;
  color:var(--fg-1);
}
.st-split .st-prose{max-width:64ch}
.st-split__side .st-prose{margin-top:24px}
.st-split__main > .st-prose:first-child{margin-top:0}
.st-split__main .st-prose .st-lead{font-size:20px;line-height:1.5;color:var(--fg-1)}
.st-split .st-phases{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--col-gap);margin-top:0}
@media (max-width:900px){
  .st-split{grid-template-columns:1fr}
  .st-split__side{position:static}
  .st-split .st-phases{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:519px){
  .st-split .st-phases{grid-template-columns:1fr}
}

.st-list{margin-top:32px;padding:0;list-style:none;border-top:1px solid var(--border-strong)}
.st-list > div,
.st-list > li{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--border-1);
}
.st-list h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--fg-1);
}
.st-list p{font-size:14.5px;line-height:1.65;color:var(--fg-2);margin-top:8px;max-width:68ch}
.st-list .st-num{font-size:12px;color:var(--fg-3);padding-top:5px}

.st-cells{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1px;
  margin-top:48px;
  background:var(--border-2);
  border:1px solid var(--border-2);
}
.st-cell{
  background:var(--bg-page);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.st-cell__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.st-cell__log{
  display:flex;
  flex-direction:column;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.5;
  color:var(--fg-2);
}
.st-cell__log > div{
  padding:8px 0;
  border-top:1px solid var(--border-1);
  display:grid;
  grid-template-columns:14px minmax(0,1fr);
  gap:10px;
}
.st-cell__call{margin-top:auto;padding-top:16px;border-top:1px solid var(--border-strong)}
.st-cell__call p{
  font-family:var(--font-display);
  font-size:clamp(22px,1.8vw,26px);
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--fg-1);
  margin-top:10px;
}
.st-cell__call span{display:block;font-size:13px;line-height:1.5;color:var(--fg-2);margin-top:10px;font-family:var(--font-sans)}

.st-advise{
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--border-1);
  border-left:1px solid var(--border-1);
  margin-top:40px;
}
.st-advise > div{
  display:flex;
  flex-direction:column;
  gap:28px;
  min-height:220px;
  padding:24px;
  border-right:1px solid var(--border-1);
  border-bottom:1px solid var(--border-1);
  transition:background-color var(--dur-base) var(--ease-standard);
}
.st-advise > div:hover{background:var(--bg-surface)}
@media (min-width:720px){
  .st-advise{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-advise:has(> :nth-child(5):last-child) > :first-child{grid-column:span 2}
}
@media (min-width:1100px){
  .st-advise{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.st-advise__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--fg-2);
}
.st-advise h3{
  font-family:var(--font-display);
  font-size:24px;
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--fg-1);
  font-weight:400;
}
.st-advise p{font-size:14px;line-height:1.55;color:var(--fg-2);margin-top:10px}

.st-steps{list-style:none;margin:0;padding:0;border-left:1px solid var(--border-2)}
.st-steps li{position:relative;padding:0 0 40px 32px}
.st-steps li:last-child{padding-bottom:0}
.st-steps i{
  position:absolute;
  left:-4px;
  top:6px;
  width:7px;
  height:7px;
  background:var(--fg-1);
}
.st-steps li:first-child i{background:var(--accent)}
.st-steps h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(24px,2.2vw,30px);
  line-height:1.15;
  letter-spacing:-0.01em;
  color:var(--fg-1);
  margin-top:10px;
}
.st-steps p{font-size:15px;line-height:1.6;color:var(--fg-2);margin-top:10px;max-width:56ch}

.st-metric{
  background:var(--bg-surface);
  padding:clamp(24px,3vw,36px);
}
.st-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:1px;
  margin-top:40px;
  background:var(--border-1);
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
/* A row of four never breaks three and one: four across, two by two, then
   one column. :where() keeps this below .st-split .st-phases. */
.st-phases:where(:has(> :nth-child(4):last-child)),
.st-metrics:where(:has(> :nth-child(4):last-child)),
.st-dash__metrics:where(:has(> :nth-child(4):last-child)){grid-template-columns:repeat(4,minmax(0,1fr))}
.st-dash__grid:where(:has(> :nth-child(4):last-child)){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1023px){
  .st-phases:where(:has(> :nth-child(4):last-child)),
  .st-metrics:where(:has(> :nth-child(4):last-child)),
  .st-dash__metrics:where(:has(> :nth-child(4):last-child)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:719px){
  .st-dash__grid:where(:has(> :nth-child(4):last-child)){grid-template-columns:1fr}
}
@media (max-width:519px){
  .st-phases:where(:has(> :nth-child(4):last-child)),
  .st-metrics:where(:has(> :nth-child(4):last-child)){grid-template-columns:1fr}
}.st-metric__lab{
  font-family:var(--font-mono);
  font-size:var(--text-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--fg-3);
}
.st-metric__val{
  margin-top:10px;
  font-family:var(--font-display);
  font-size:clamp(36px,4vw,56px);
  line-height:1;
  letter-spacing:-0.03em;
  color:var(--fg-1);
  font-variant-numeric:tabular-nums;
}
.st-metric__val small{font-size:.48em;letter-spacing:-0.02em;color:var(--fg-2)}
.st-metric__cap{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--fg-2)}

.st-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:18px;
  margin-top:40px;
}
.st-card{
  padding:24px;
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  background:var(--bg-surface);
  box-shadow:var(--shadow-xs);
}
.st-card .st-eyebrow{margin-bottom:16px}
.st-card h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--fg-1);
}
.st-card p{font-size:14.5px;line-height:1.65;color:var(--fg-2);margin-top:10px}

.st-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:24px 28px;
  margin:44px 0 0;
  padding-top:24px;
  border-top:1px solid var(--border-1);
}
.st-facts dt{margin:0}
.st-facts dd{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--fg-2)}

.st-practices{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:16px;
  margin-top:28px;
}
.st-practices--even{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){
  .st-practices--even{grid-template-columns:1fr}
}

/* Numbered claim band under a dark hero. Dividers sit between cells,
   with padding on both sides of each rule so copy never touches it. */
.st-band{border-top:1px solid var(--border-1)}
.st-band__grid{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.st-band__grid > div{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:28px 28px 32px 0;
}
.st-band__grid > div + div{
  padding-left:28px;
  border-left:1px solid var(--border-1);
}
.st-band__grid .st-eyebrow{color:var(--fg-1)}
.st-band__grid p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:var(--fg-2);
}
@media (max-width:1100px){
  .st-band__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-band__grid > div:nth-child(odd){
    padding-left:0;
    border-left:0;
  }
  .st-band__grid > div:nth-child(n+3){
    border-top:1px solid var(--border-1);
    padding-top:28px;
  }
}
@media (max-width:640px){
  .st-band__grid{grid-template-columns:1fr}
  .st-band__grid > div,
  .st-band__grid > div + div{
    padding-left:0;
    border-left:0;
  }
  .st-band__grid > div + div{
    border-top:1px solid var(--border-1);
    padding-top:28px;
  }
}
.st-practice{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  background:var(--bg-surface);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
  text-decoration:none;
  color:var(--fg-1);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.st-practice:hover{border-color:var(--fg-1);color:var(--fg-1)}
.st-practice__fig{position:relative;height:120px;overflow:hidden}
.st-practice__body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.st-practice__title{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-family:var(--font-display);
  font-size:24px;
  line-height:1.15;
  letter-spacing:-0.01em;
}
.st-practice p{font-size:14px;line-height:1.55;color:var(--fg-2)}

.st-clip{
  margin:0;
  background:var(--bg-page);
  color:var(--fg-1);
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
.st-clips{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  gap:24px;
  margin-top:40px;
}
.st-clip__bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  border-bottom:1px solid var(--border-1);
}
.st-clip video{display:block;width:100%;height:auto;aspect-ratio:1280/794;background:var(--stone-950)}
.st-clip figcaption{
  padding:12px 18px 14px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--fg-2);
  border-top:1px solid var(--border-1);
}

.st-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}

.st-field{position:relative;display:flex;flex-direction:column;gap:8px}
.st-field label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.st-field input,
.st-field textarea,
.st-field select{
  width:100%;
  box-sizing:border-box;
  min-height:var(--control-h-lg);
  padding:12px 14px;
  background:var(--bg-surface);
  color:var(--fg-1);
  border:1px solid var(--border-1);
  border-radius:var(--radius-control);
  box-shadow:var(--shadow-xs);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
}
.st-field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23121210' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
}
.st-field select:disabled{color:var(--fg-disabled);background-color:var(--bg-subtle)}
.st-field textarea{min-height:180px;resize:vertical;line-height:1.65}
.st-field input:focus,
.st-field textarea:focus,
.st-field select:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.st-field input.st-field__proxy{
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:1px;
  min-height:0;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  box-shadow:none;
}
.st-field .aa-field-err{margin:0;color:var(--danger);font-size:12.5px;line-height:1.5}
.st-field [aria-invalid="true"]{border-color:var(--danger)}
.st-slot__note{margin:0;font-size:13px;line-height:1.5;color:var(--fg-3)}
.st-slot__pick{
  margin:0;
  font-family:var(--font-display);
  font-size:22px;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--fg-1);
}
.st-cal{
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  background:var(--bg-surface);
  box-shadow:var(--shadow-xs);
  padding:12px;
}
.st-cal__bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-cal__month{
  margin:0;
  flex:1;
  text-align:center;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--fg-1);
}
.st-cal__dow,
.st-cal__row{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:2px;
}
.st-cal__dow{margin-top:8px}
.st-cal__dow span{
  text-align:center;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg-3);
  padding:6px 0;
}
.st-cal__days{display:flex;flex-direction:column;gap:2px}
.st-cal__pad{display:block;min-height:44px}
.st-cal__day,
.st-time{
  box-sizing:border-box;
  min-width:0;
  min-height:44px;
  scroll-margin-top:88px;
  scroll-margin-bottom:24px;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--radius-control);
  background:transparent;
  color:var(--fg-1);
  font-family:var(--font-sans);
  font-size:15px;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.st-cal__day:not(:disabled):hover,
.st-time:not(:disabled):hover{background:var(--bg-hover);border-color:var(--border-2)}
.st-cal__day:disabled,
.st-time:disabled{color:var(--fg-disabled);cursor:not-allowed}
.st-cal__day--today{box-shadow:inset 0 -2px 0 var(--ember-500)}
.st-times{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.st-time{
  border-color:var(--border-1);
  background:var(--bg-surface);
  font-family:var(--font-mono);
  font-size:14px;
}
.st-cal__day[aria-pressed="true"],
.st-time[aria-pressed="true"],
.st-cal__day[aria-pressed="true"]:hover,
.st-time[aria-pressed="true"]:hover{
  background:var(--fg-1);
  color:var(--fg-inverse);
  border-color:var(--fg-1);
  box-shadow:none;
}
@media (max-width:380px){
  .st-times{grid-template-columns:repeat(3,minmax(0,1fr))}
}
#aa-form-err{display:none;color:var(--danger);font-size:12.5px;line-height:1.5}
#aa-book-form input[name="botcheck"]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.st-form{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:clamp(24px,3vw,36px);
  background:var(--bg-surface);
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs);
}
.st-form__head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px 16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-1);
}
.st-form__head .st-eyebrow{white-space:nowrap}
.st-form__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:20px;
}
.st-form__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.st-form__hint{font-size:13px;line-height:1.5;color:var(--fg-3);max-width:30ch}
.st-sent{
  padding:clamp(28px,3.5vw,48px);
  background:var(--bg-surface);
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs);
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
}
.st-sent h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(32px,3.4vw,44px);
  line-height:1.06;
  letter-spacing:-0.015em;
  color:var(--fg-1);
}
.st-sent h2 em{font-style:italic;color:var(--fg-2)}
.st-sent p{font-size:15px;line-height:1.6;color:var(--fg-2);max-width:46ch}

.st-contact{
  display:grid;
  grid-template-columns:1fr;
  min-height:calc(100vh - var(--header-h));
}
.st-contact__intro{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.st-contact__intro-in{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:48px;
  padding:clamp(48px,6vw,88px) var(--gutter) clamp(40px,5vw,64px);
}
.st-contact__form{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:clamp(40px,5vw,72px) var(--gutter);
}
.st-contact__form > div{width:100%;max-width:560px}
/* Two halves from 900px. Each half is 50% of the page, so its outer padding
   is the distance from the page edge to the grid: the gutter, or more once
   the container stops growing. */
@media (min-width:900px){
  .st-contact{grid-template-columns:1fr 1fr}
  .st-contact__intro-in{
    padding-left:max(var(--gutter),calc(100% - var(--container-max) / 2 + var(--gutter)));
    padding-right:clamp(32px,4vw,72px);
  }
  .st-contact__form{
    justify-content:flex-end;
    padding-left:clamp(32px,4vw,72px);
    padding-right:max(var(--gutter),calc(100% - var(--container-max) / 2 + var(--gutter)));
  }
}

.st-case{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
  margin-top:24px;
  border:1px solid var(--border-1);
  background:var(--bg-surface);
  text-decoration:none;
  color:var(--fg-1);
  transition:border-color var(--dur-fast) var(--ease-standard);
}
.st-case:hover{border-color:var(--fg-1);color:var(--fg-1)}
.st-case__fig{position:relative;min-height:360px}
.st-case__body{
  padding:clamp(28px,3.5vw,48px);
  display:flex;
  flex-direction:column;
  gap:20px;
}
.st-case h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.06;
  letter-spacing:-0.015em;
}
.st-case__line{
  font-family:var(--font-display);
  font-style:italic;
  font-size:22px;
  line-height:1.25;
  color:var(--fg-2);
}
.st-case p{font-size:15px;line-height:1.6;color:var(--fg-2);max-width:58ch}
.st-case__cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  color:var(--fg-1);
  padding-top:8px;
}
.st-filters{display:flex;flex-wrap:wrap;gap:8px}
.st-filters .st-tag{cursor:pointer}
.st-filters button.st-tag{
  appearance:none;
  font-family:inherit;
}
.st-filters .aa-filter-b.is-on,
.st-filters .st-tag--selected{
  background:var(--fg-1);
  color:var(--bg-page);
  border-color:var(--fg-1);
}
.st-filters .st-tag [data-n]{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--fg-3);
}
.st-filters .aa-filter-b.is-on [data-n],
.st-filters .st-tag--selected [data-n]{color:var(--stone-400)}
.st-empty{
  margin-top:24px;
  padding:48px 24px;
  border:1px dashed var(--border-2);
  border-radius:var(--radius-card);
  text-align:center;
  color:var(--fg-2);
  font-size:15px;
}
.st-empty a{
  color:var(--fg-1);
  text-decoration:underline;
  text-underline-offset:3px;
}

.st-cap{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 24px;
  gap:16px;
  align-items:baseline;
  padding:16px;
  margin:0 0 10px;
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  background:var(--bg-surface);
  box-shadow:var(--shadow-xs);
  color:var(--fg-1);
  text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
main[data-st] .st-cap,
main[data-st] .st-cap:hover{color:var(--fg-1);text-decoration:none}
.st-cap__copy{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:8px 48px;
  align-items:baseline;
}
.st-cap__copy strong{
  font-family:var(--font-display);
  font-size:clamp(22px,1.9vw,26px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--fg-1);
}
.st-cap__copy span{font-size:14px;line-height:1.55;color:var(--fg-2)}
.st-cap__arrow{color:var(--fg-3);display:flex;justify-content:flex-end;align-self:center}
@media (min-width:900px){
  /* trailing column 24px: (16 + 24 - 56) / 2 = -8px; copy gap 48px */
  .st-cap__copy{grid-template-columns:calc(50% - 56px + var(--col-gap) / 2) minmax(0,1fr)}
  /* no trailing column: -56 / 2 = -28px; copy gap 48px */
  .st-pair__copy{grid-template-columns:calc(50% - 76px + var(--col-gap) / 2) minmax(0,1fr)}
}
@media (hover:hover) and (pointer:fine){
  .st-cap:hover{background:var(--bg-hover)}
  .st-cap:hover .st-cap__arrow{color:var(--fg-1)}
}

.st-links{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.st-links a{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
  padding:12px 14px;
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  background:var(--bg-surface);
  box-shadow:var(--shadow-xs);
  text-decoration:none;
  color:var(--fg-1);
  font-size:15px;
  font-weight:500;
  transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.st-links a span{font-size:13px;color:var(--fg-3);text-align:right;font-weight:400}
.st-links a:hover{color:var(--fg-1);background:var(--bg-hover);border-color:var(--border-2)}

.st-console{
  background:var(--bg-page);
  color:var(--fg-1);
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.5;
}
.st-console__bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--border-1);
}
.st-console__cols{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--border-1);
  border-bottom:1px solid var(--border-1);
}
.st-console__cols span{
  padding:10px 12px;
  background:var(--bg-page);
  text-align:center;
  color:var(--fg-1);
}
.st-console__body{padding:16px;display:flex;flex-direction:column;gap:7px}
.st-console__row{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:12px;
  color:var(--fg-2);
}
.st-console__row.is-bright{color:var(--fg-1)}
.st-console__row > span:first-child{color:var(--fg-3)}
.st-console__foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  border-top:1px solid var(--border-1);
}

/* CTA band — the closing invitation on every page that uses it. */
.st-cta{
  max-width:var(--container-max);
  margin:0 auto;
  padding:clamp(56px,7vw,112px) var(--gutter);
}

.st-cta__in{
  border:1px solid var(--border-1);
  border-radius:var(--radius-card);
  background:var(--bg-surface);
  box-shadow:var(--shadow-xs);
  padding:clamp(32px,4vw,56px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap:clamp(32px,4vw,64px) var(--col-gap);
  align-items:end;
}

.st-cta h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(40px,4.5vw,64px);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:20px 0 0;
  color:var(--fg-1);
  text-wrap:balance;
}

.st-cta p{
  margin:0;
  font-size:17px;
  line-height:1.55;
  color:var(--fg-2);
  max-width:50ch;
}

.st-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

/* ---------------------------------------------------------------- 8. Page overrides */
/* The capability, guide and support pages still carry the inline dark styles
   they were written with. These rules settle them onto the system; a page
   built on it directly marks its <main> with data-st and is left alone. */
main:not([data-st]) > section{
  min-height:0 !important;
  display:block !important;
  padding:clamp(56px,7vw,104px) clamp(20px,5vw,8vw) !important;
  font-family:var(--font-sans) !important;
  box-sizing:border-box;
}

main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"]{
  position:relative;
  background:var(--stone-950) !important;
  color:var(--stone-50);
  padding-top:clamp(48px,6vw,96px) !important;
  overflow:hidden;
}

main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  color:rgba(246,243,236,.06);
  background-image:var(--pattern-grid);
  background-size:var(--pattern-grid-size);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 80%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 80%);
}

main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] > *{
  position:relative;
}

main:not([data-st]) h1,
main:not([data-st]) h2,
.aa-cs-h2,
.aa-cs-quote p{
  font-family:var(--font-display) !important;
  font-weight:400 !important;
  letter-spacing:-0.02em !important;
  text-wrap:balance;
}

main:not([data-st]) h1{
  font-size:clamp(40px,5.6vw,76px) !important;
  line-height:1.02 !important;
}

main:not([data-st]) h2,
.aa-cs-h2{
  font-size:clamp(32px,3.6vw,52px) !important;
  line-height:1.08 !important;
}

main:not([data-st]) h1 em,
main:not([data-st]) h2 em{
  font-style:italic;
  font-weight:400;
}

main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] h1,
main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] h2{
  color:var(--stone-50) !important;
}

main:not([data-st]):not([data-tone="paper"]) > section:not([data-sec="0"]) h1,
main:not([data-st]):not([data-tone="paper"]) > section:not([data-sec="0"]) h2,
main:not([data-st]):not([data-tone="paper"]) > section:not([data-sec="0"]) h3,
main:not([data-st])[data-tone="paper"] h1,
main:not([data-st])[data-tone="paper"] h2,
main:not([data-st])[data-tone="paper"] h3{
  color:var(--stone-950) !important;
}

main:not([data-st]) h3{
  font-family:var(--font-sans) !important;
  font-weight:600 !important;
  letter-spacing:-0.01em !important;
  font-size:16px !important;
}

main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] p{
  color:var(--stone-300) !important;
}

main:not([data-st]):not([data-tone="paper"]) > section:not([data-sec="0"]) p,
main:not([data-st])[data-tone="paper"] p{
  color:var(--stone-700) !important;
}

main:not([data-st]) [style*="letter-spacing:0.42em"],
main:not([data-st]) [style*="letter-spacing:0.44em"],
main:not([data-st]) [style*="letter-spacing: 0.42em"],
main:not([data-st]) [style*="letter-spacing: 0.44em"],
.aa-cs-eye,
.aa-read-kicker{
  font-family:var(--font-mono) !important;
  font-size:11px !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
  color:var(--stone-500) !important;
}

main:not([data-st]) a[style*="border-radius"],
main:not([data-st]) button[style*="border-radius"]{
  border-radius:var(--radius-control) !important;
  letter-spacing:0 !important;
  font-family:var(--font-sans) !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1;
}

main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] a[style*="background:#F6F3EC"],
main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] a[style*="background:#ffffff"],
main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] button[style*="background:#F6F3EC"],
main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] button[style*="background:#ffffff"]{
  background:var(--stone-50) !important;
  color:var(--stone-950) !important;
  border:0 !important;
}

main:not([data-st]):not([data-tone="paper"]) > section:not([data-sec="0"]) a[style*="background:#121210"],
main:not([data-st]):not([data-tone="paper"]) > section:not([data-sec="0"]) button[style*="background:#121210"],
main:not([data-st])[data-tone="paper"] a[style*="background:#121210"],
main:not([data-st])[data-tone="paper"] button[style*="background:#121210"]{
  background:var(--stone-950) !important;
  color:var(--stone-50) !important;
}

main:not([data-st]) a[style*="background:transparent"],
main:not([data-st]) button[style*="background:transparent"]{
  background:transparent !important;
  border-radius:var(--radius-control) !important;
}

main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] a[style*="background:transparent"],
main:not([data-st]):not([data-tone="paper"]) > section[data-sec="0"] button[style*="background:transparent"]{
  color:var(--stone-50) !important;
  border-color:var(--stone-700) !important;
}

main:not([data-st]):not([data-tone="paper"]) > section:not([data-sec="0"]) a[style*="background:transparent"],
main:not([data-st])[data-tone="paper"] a[style*="background:transparent"]{
  color:var(--stone-950) !important;
  border-color:var(--stone-950) !important;
}

main:not([data-st]):not([data-tone="paper"]) > section:not([data-sec="0"]) a[style*="rgba(255,255,255"],
main:not([data-st])[data-tone="paper"] a[style*="rgba(255,255,255"]{
  border-bottom-color:rgba(18,18,16,.35) !important;
}

#aa-book-form input,
#aa-book-form textarea{
  background:var(--stone-0) !important;
  color:var(--stone-950) !important;
  border:1px solid var(--stone-200) !important;
  border-radius:var(--radius-control) !important;
  font-family:var(--font-sans) !important;
}

#aa-book-form label{
  font-family:var(--font-mono) !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
  color:var(--stone-500) !important;
}

#aa-book-form button[type="submit"]{
  background:var(--ember-500) !important;
  color:#fff !important;
  border-radius:var(--radius-control) !important;
  letter-spacing:0 !important;
  font-size:14px !important;
  font-weight:500 !important;
}

#aa-bk-card{
  background:var(--stone-0) !important;
  border:1px solid var(--stone-200) !important;
  border-radius:var(--radius-card) !important;
  box-shadow:var(--shadow-xs) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Privacy policy — legal copy and the data table still carry their dark
   colours inline; the page is paper now. */
.aa-pol h2,
.aa-pol h3,
.aa-tbl td:first-child{
  color:var(--stone-950) !important;
}

.aa-pol p,
.aa-pol li,
.aa-tbl td{
  color:var(--stone-700) !important;
}

.aa-pol a,
.aa-pol .aa-cookie-btn{
  color:var(--cobalt-600) !important;
  text-decoration-color:currentColor !important;
}

.aa-pol a:hover,
.aa-pol .aa-cookie-btn:hover{
  color:var(--cobalt-700) !important;
}

.aa-pol .aa-cookie-btn:focus-visible{
  outline-color:var(--cobalt-500) !important;
}

.aa-tbl th,
.aa-tbl td{
  border-top-color:var(--stone-200) !important;
}

.aa-tbl th{
  color:var(--stone-500) !important;
  font-family:var(--font-mono) !important;
  font-size:11px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
}

/* In-page "in detail / guides" link lists */
.aa-read{
  margin-top:48px;
  max-width:72ch;
}

.aa-read-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin:0 0 8px;
  padding:14px 0 4px;
  border-top:1px solid var(--stone-200) !important;
}

.aa-read-wrap a{
  color:var(--cobalt-600) !important;
  border-bottom:0 !important;
  font-size:14.5px !important;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.aa-read-wrap a:hover{
  color:var(--cobalt-700) !important;
}

/* Shared component skins that still ship dark rules in page <style> blocks */
.aa-bento > article,
.aa-stat,
.aa-layer,
.aa-split-row .media,
.aa-cmp-col,
.aa-console{
  background:var(--stone-0) !important;
  border-color:var(--stone-200) !important;
  color:var(--stone-950);
}

.aa-bento h3,
.aa-split-row h3,
.aa-layer h3,
.aa-tl-body h3,
.aa-row-title,
.aa-cmp-col.good h3{
  color:var(--stone-950) !important;
}

.aa-bento p,
.aa-split-row p,
.aa-layer p,
.aa-tl-body p,
.aa-stat .sub,
.aa-row-copy,
.aa-cmp-col li{
  color:var(--stone-700) !important;
}

.aa-bento .b-num,
.aa-split-row .idx,
.aa-layer .tag,
.aa-stat .lab,
.aa-tl-num{
  color:var(--stone-500) !important;
  font-family:var(--font-mono) !important;
}

.aa-cmp-col.good{
  box-shadow:inset 3px 0 0 var(--ember-500);
}

.aa-cs-quote p,
.aa-cs-fig,
.aa-cs-ct{
  color:var(--stone-950) !important;
}

.aa-list{
  border-top-color:var(--stone-950) !important;
}

.aa-list > .aa-row{
  border-bottom-color:var(--stone-200) !important;
}

@media (hover:hover) and (pointer:fine){
  .aa-list > .aa-row:hover{
    background:rgba(18,18,16,.045) !important;
  }

  .aa-list > .aa-row:hover .aa-idx{
    color:var(--stone-950) !important;
  }
}

/* Motion, on every page. One curve and two moves: the hero makes an entrance,
   and the pieces of each section rise as they arrive. All of it needs html.aa-m,
   which the head sets before first paint when scripts run and motion is welcome;
   without it nothing is ever hidden. html.aa-go arrives when the intro curtain
   lifts (at once on a repeat view). html.aa-all is the safety net: show everything. */
:root{ --m-ease:cubic-bezier(.22,1,.36,1); --m-soft:cubic-bezier(.4,0,.2,1) }
@keyframes aaRise{ from{ opacity:0; transform:translate3d(0,18px,0) } to{ opacity:1; transform:translate3d(0,0,0) } }
@keyframes aaTitle{ from{ opacity:0; transform:translate3d(0,.22em,0) } to{ opacity:1; transform:translate3d(0,0,0) } }
@keyframes aaFig{ from{ opacity:0; transform:translate3d(0,24px,0) scale(.99) } to{ opacity:1; transform:translate3d(0,0,0) scale(1) } }
@keyframes aaBloom{ from{ opacity:0; transform:scale(1.06) } to{ opacity:1; transform:scale(1) } }

/* Hero. Each piece carries data-in and its place in the entrance in --i. */
html.aa-m [data-in], html.aa-m .st-hero .st-aura__wash{ opacity:0 }
html.aa-m.aa-go [data-in]{ animation:aaRise 1.1s var(--m-ease) both; animation-delay:calc(var(--i, 0) * 90ms + 40ms) }
html.aa-m.aa-go .st-hero__title[data-in]{ animation-name:aaTitle; animation-duration:1.3s }
html.aa-m.aa-go .st-hero__fig[data-in], html.aa-m.aa-go .st-aura[data-in], html.aa-m.aa-go .st-dash[data-in]{ animation-name:aaFig; animation-duration:1.4s }
html.aa-m.aa-go .st-hero .st-aura__wash{ animation:aaBloom 2.2s var(--m-ease) .2s both }
/* First view: the curtain uncovers the page from the bottom up, so the hero waits for it. */
html.aa-m.aa-go:not(.aa-seen) [data-in]{ animation-delay:calc(var(--i, 0) * 90ms + 260ms) }
html.aa-m.aa-go:not(.aa-seen) .st-hero .st-aura__wash{ animation-delay:.5s }
html.aa-all [data-in], html.aa-all .st-hero .st-aura__wash{ opacity:1; animation:none }

/* Sections. Each piece rises once, as it arrives; pieces that arrive together
   follow one another by --aa-d, set in aa-page.js. The last two properties keep
   the hover transitions of rows and cards, which this rule would otherwise replace. */
html.aa-m [data-reveal]{ opacity:0; transform:translate3d(0,18px,0); transition:opacity .9s var(--m-ease), transform 1.1s var(--m-ease), border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); transition-delay:var(--aa-d, 0ms), var(--aa-d, 0ms), 0s, 0s }
html.aa-m [data-reveal].aa-in, html.aa-all [data-reveal]{ opacity:1; transform:translate3d(0,0,0) }
@media (max-width:719px){ html.aa-m [data-reveal]{ transform:translate3d(0,12px,0) } }
@media print{ html.aa-m [data-reveal], html.aa-m [data-in], html.aa-m .st-hero .st-aura__wash{ opacity:1 !important; transform:none !important; animation:none !important } }

/* The opening of every page runs under the header: an Ink first section pulls
   itself up by the header's height and pads the same amount back, so its own
   surface sits behind the clear bar. A paper opening keeps the paper bar above it. */
/* The header is --header-h tall plus its 1px bottom border, so the opening is pulled up by
   both; pulled up by the height alone it started a pixel down and left a paper line at the top. */
main[data-st] > [data-theme="ink"]:first-child{ margin-top:calc(-1 * var(--header-h) - 1px); padding-top:calc(var(--header-h) + 1px) }
/* The canvas above such a page (rubber-band overscroll, the gap a browser can show
   over the header) is the hero's colour, not the paper's. */
html:has(main[data-st] > [data-theme="ink"]:first-child){ background:var(--stone-950) linear-gradient(var(--stone-950) 50%, var(--bg-page) 50%) no-repeat !important }

/* ---------------------------------------------------------------- 9. shadcn components */
/* The shadcn/ui set, written as plain classes on the Stratum tokens. Button is
   .st-btn, Badge is .st-badge and Tag is .st-tag (section 6); everything else
   is sc-*. A page composes them; nothing here knows about a page. */

/* Card */
.sc-card{display:flex;flex-direction:column;border:1px solid var(--border-1);border-radius:var(--radius-bubble);background:var(--bg-surface);box-shadow:var(--shadow-xs);color:var(--fg-1)}
.sc-card__header{display:flex;flex-direction:column;gap:4px;padding:20px 20px 0}
.sc-card__title{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--fg-1)}
.sc-card__desc{margin:0;font-size:14px;line-height:1.5;color:var(--fg-3)}
.sc-card__content{padding:16px 20px 20px;font-size:15px;line-height:1.55;color:var(--fg-2)}
.sc-card__footer{display:flex;align-items:center;gap:10px;margin-top:auto;padding:0 20px 20px}
.sc-card--interactive{text-decoration:none;transition:border-color .25s var(--m-soft),background-color .25s var(--m-soft),transform .35s var(--m-ease),box-shadow .35s var(--m-ease)}
.sc-card--interactive:hover{border-color:var(--border-2);background:var(--bg-subtle);color:var(--fg-1);transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(18,18,16,.3)}

/* Accordion: a <details> per item, its summary the trigger, a plus that folds into a minus. */
.sc-acc{border-bottom:1px solid var(--border-1)}
.sc-acc:first-of-type{border-top:1px solid var(--border-1)}
.sc-acc__trigger{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;list-style:none;cursor:pointer;font-family:var(--font-sans);color:var(--fg-1)}
.sc-acc__trigger::-webkit-details-marker{display:none}
.sc-acc__trigger h3{margin:0;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--fg-1);transition:color .25s var(--m-soft)}
.sc-acc__trigger:hover h3{color:var(--accent-fg)}
.sc-acc__icon{position:relative;flex:none;width:16px;height:16px;color:var(--fg-2)}
.sc-acc__icon::before,.sc-acc__icon::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%);transition:transform .35s var(--m-ease),opacity .3s var(--m-ease)}
.sc-acc__icon::before{width:14px;height:1.5px}
.sc-acc__icon::after{width:1.5px;height:14px}
.sc-acc[open] .sc-acc__icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.sc-acc__content{padding:0 0 22px;max-width:72ch;box-sizing:border-box}
.sc-acc__content p{margin:0;font-size:15.5px;line-height:1.65;color:var(--fg-2)}
.sc-acc__content p + p{margin-top:10px}
.sc-acc__content a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* Breadcrumb: mono, slashes between, the page itself in ink (an h1 where the keyword is the page). */
.sc-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:0;list-style:none;font-family:var(--font-mono);font-size:var(--text-label);line-height:1.4;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--fg-3)}
.sc-crumb li{display:inline-flex;align-items:center;gap:10px}
.sc-crumb li + li::before{content:"/";color:var(--border-2)}
.sc-crumb a{color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
.sc-crumb a:hover{color:var(--fg-1)}
.sc-crumb [aria-current="page"],.sc-crumb h1{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg-1)}

/* Separator */
.sc-sep{border:0;height:1px;margin:0;background:var(--border-1)}
.sc-sep--v{width:1px;height:auto;align-self:stretch}

/* Avatar */
.sc-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--bg-subtle);color:var(--fg-2);font:500 13px/1 var(--font-sans)}
.sc-avatar img{width:100%;height:100%;object-fit:cover}

/* Table */
.sc-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.sc-table th{padding:10px 12px;border-bottom:1px solid var(--border-1);text-align:left;font-family:var(--font-mono);font-size:var(--text-label);font-weight:400;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--fg-3)}
.sc-table td{padding:12px;border-bottom:1px solid var(--border-1);vertical-align:top;color:var(--fg-2)}
.sc-table tr:hover td{background:var(--bg-hover)}

/* Alert */
.sc-alert{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:14px 16px;border:1px solid var(--border-1);border-radius:var(--radius-card);background:var(--bg-surface);font-size:14px;line-height:1.5;color:var(--fg-2)}
.sc-alert svg{width:18px;height:18px;margin-top:1px;color:var(--fg-1)}
.sc-alert strong{display:block;margin-bottom:2px;font-size:14.5px;font-weight:600;color:var(--fg-1)}

/* Input */
.sc-input{display:block;width:100%;height:var(--control-h-md);padding:0 12px;border:1px solid var(--border-2);border-radius:var(--radius-control);background:var(--bg-surface);box-shadow:var(--shadow-xs);font:400 15px/1 var(--font-sans);color:var(--fg-1);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
.sc-input::placeholder{color:var(--fg-3)}
.sc-input:focus-visible{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px color-mix(in oklab,var(--cobalt-500) 25%,transparent)}

/* Progress */
.sc-progress{position:relative;height:8px;border-radius:var(--radius-pill);background:var(--bg-muted);overflow:hidden}
.sc-progress > i{position:absolute;inset:0 auto 0 0;width:var(--value,0%);border-radius:inherit;background:var(--accent)}

/* Kbd */
.sc-kbd{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--border-2);border-bottom-width:2px;border-radius:6px;background:var(--bg-surface);font:500 11px/1 var(--font-mono);color:var(--fg-2)}

/* Tabs */
.sc-tabs__list{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border-1);border-radius:var(--radius-pill);background:var(--bg-subtle)}
.sc-tabs__trigger{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:var(--radius-pill);background:transparent;font:500 13.5px/1 var(--font-sans);color:var(--fg-2);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.sc-tabs__trigger[aria-selected="true"],.sc-tabs__trigger.is-on{background:var(--bg-surface);color:var(--fg-1);box-shadow:var(--shadow-xs)}

/* Plate: the muted tray a panel of cards sits on. */
.sc-plate{padding:8px;border-radius:30px;background:var(--bg-subtle)}

/* Icon tile, in the four practice tints. */
.st-ico{flex:none;width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--stone-100),var(--stone-200));color:var(--stone-800);box-shadow:inset 0 0 0 1px rgba(18,18,16,.06),0 1px 2px rgba(18,18,16,.06)}
.st-ico svg{width:20px;height:20px;display:block}
.st-ico--sm{width:26px;height:26px;border-radius:8px}
.st-ico--sm svg{width:14px;height:14px}
.st-ico--xs{width:36px;height:36px;border-radius:10px}
.st-ico--xs svg{width:17px;height:17px}
.st-ico--round{width:40px;height:40px;border-radius:50%}
.st-ico--round svg{width:18px;height:18px}
.st-ico--software{background:linear-gradient(145deg,#DCE9FB,#A9C4F0);color:#1C3782}
.st-ico--ai{background:linear-gradient(145deg,#ECDDF6,#CDAEE4);color:#4F2F72}
.st-ico--data{background:linear-gradient(145deg,#D9EEDF,#9ED2B3);color:#25643E}
.st-ico--consulting{background:linear-gradient(145deg,#FBE3D9,#F2B9A0);color:#8C3414}

/* Navigation menu: each practice in the header is a link with a panel of its
   pages beneath it. Hover and focus open the panel; the chevron is the
   keyboard and touch trigger (aa-page.js); the panel closes on Escape. */
.sc-menu__item{position:relative;display:inline-flex;align-items:center}
.sc-menu__more{display:inline-flex;align-items:center;justify-content:center;width:22px;height:32px;margin-left:-8px;padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:inherit;opacity:.55;cursor:pointer;transition:opacity var(--dur-fast) var(--ease-standard)}
.sc-menu__more:hover,.sc-menu__more:focus-visible{opacity:1}
.sc-menu__more svg{width:12px;height:12px;display:block;transition:transform var(--dur-fast) var(--ease-standard)}
.sc-menu__more[aria-expanded="true"] svg{transform:rotate(180deg)}
.sc-menu__panel{position:absolute;top:calc(100% + 8px);left:50%;z-index:var(--z-popover);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:max-content;min-width:300px;max-width:min(92vw,640px);padding:8px;border:1px solid var(--border-1);border-radius:var(--radius-bubble);background:var(--bg-surface);color:var(--fg-1);box-shadow:var(--shadow-popover);opacity:0;visibility:hidden;transform:translate(-50%,8px) scale(.98);transform-origin:50% 0;transition:opacity .28s var(--m-ease),transform .4s var(--m-ease),visibility 0s linear .28s}
.sc-menu__panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.sc-menu__panel[data-cols="1"]{grid-template-columns:1fr;min-width:280px}
.sc-menu__item:hover .sc-menu__panel,.sc-menu__item:focus-within .sc-menu__panel,.sc-menu__panel[data-open]{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition-delay:0s}
.sc-menu__card{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:12px;text-decoration:none;color:var(--fg-1);transition:background-color .22s var(--m-soft)}
.sc-menu__card:hover,.sc-menu__card:focus-visible,.sc-menu__card[aria-current="page"]{background:var(--bg-subtle);color:var(--fg-1)}
.sc-menu__card > span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.sc-menu__card strong{font-size:14px;font-weight:500;letter-spacing:-.005em;line-height:1.3;white-space:nowrap}
.sc-menu__card small{font-size:12.5px;line-height:1.35;color:var(--fg-3)}
.sc-menu__card .st-ico{width:36px;height:36px;border-radius:10px}
.sc-menu__card .st-ico svg{width:17px;height:17px}

/* ---------------------------------------------------------------- 10. Page schemas */
/* Every page runs on the frame: a hairline down each side of every section
   (.st-fr), a rule above and below each spacer between sections (.st-sep),
   and the content on the 1352px column. Three schemas sit on it, chosen by
   body[data-page-type]: service, guide and article. The rules below restyle
   the Stratum classes the pages already carry; main[data-st] keeps them above
   the originals in section 6 and 7. */
.st-fr{position:relative}
.st-fr::before,.st-fr::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--frame-line,var(--border-1));pointer-events:none;z-index:4}
.st-fr::before{left:max(var(--frame-inset),calc(50% - var(--frame-col) / 2))}
.st-fr::after{right:max(var(--frame-inset),calc(50% - var(--frame-col) / 2))}
[data-theme="ink"].st-fr{--frame-line:rgba(246,243,236,.12)}
.st-sep{height:clamp(64px,8.9vw,128px);border-top:1px solid var(--border-1);border-bottom:1px solid var(--border-1)}
.st-sep--last{height:clamp(48px,6vw,96px);border-bottom:0}
.st-fw{width:calc(100% - 2 * var(--frame-inset));max-width:var(--frame-col);margin:0 auto;padding:0 var(--frame-pad);box-sizing:border-box}
.st-fw--flush{padding:0 8px}
.st-shelf{margin-top:clamp(48px,6.7vw,96px);padding:8px 0;border-top:1px solid var(--border-1)}

/* Sections and heroes on the column */
main[data-st] .st-section{padding:clamp(64px,6.7vw,96px) 0 0}
main[data-st] .st-section > .st-wrap{width:calc(100% - 2 * var(--frame-inset));max-width:var(--frame-col);margin:0 auto;padding:0 var(--frame-pad);box-sizing:border-box}
main[data-st] .st-section.st-hero-intro{padding-bottom:clamp(56px,6vw,80px)}
main[data-st] .st-hero__in{width:calc(100% - 2 * var(--frame-inset));max-width:var(--frame-col);margin:0 auto;padding:clamp(40px,5vw,72px) var(--frame-pad) clamp(40px,5vw,64px);box-sizing:border-box}
main[data-st] .st-hero__in--split{min-height:min(720px,calc(100svh - var(--header-h)));align-items:stretch}
main[data-st] .st-hero__title{font-size:clamp(38px,4.6vw,66px);line-height:1.02}
main[data-st] .st-hero__fig{min-height:420px;border-radius:20px;overflow:hidden}
main[data-st] .st-hero__meta{gap:8px}
main[data-st] .st-hero__meta .st-eyebrow{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--border-1);border-radius:var(--radius-pill);background:var(--bg-surface);font-size:10.5px}
main[data-st] .st-hero__meta time{margin-left:.5ch}

/* Section headers: title at the left, lede as an aside at the right. */
main[data-st] .st-sh--lg .st-sh__title{font-size:clamp(34px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em}
main[data-st] .st-sh--lg .st-sh__desc{font-size:16px}
@media (min-width:901px){
  main[data-st] .st-section > .st-wrap:not([style]) > .st-sh--lg:not(.st-sh--center){display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0 var(--col-gap);align-items:start}
  main[data-st] .st-section > .st-wrap:not([style]) > .st-sh--lg:not(.st-sh--center) > .st-sh__main{display:contents}
  main[data-st] .st-section > .st-wrap:not([style]) > .st-sh--lg:not(.st-sh--center) .st-sh__eyebrow{grid-column:1;grid-row:1}
  main[data-st] .st-section > .st-wrap:not([style]) > .st-sh--lg:not(.st-sh--center) .st-sh__title{grid-column:1;grid-row:2;max-width:18ch}
  main[data-st] .st-section > .st-wrap:not([style]) > .st-sh--lg:not(.st-sh--center) .st-sh__desc{grid-column:2;grid-row:2;justify-self:end;max-width:380px;margin-top:6px}
  main[data-st] .st-section > .st-wrap:not([style]) > .st-sh--lg:not(.st-sh--center) > .st-sh__actions{grid-column:1;grid-row:3;margin-top:24px}
}

/* Numbered rows become a hairline feature grid that runs out to the frame lines. */
main[data-st] .st-pair-list,
main[data-st] .st-list,
main[data-st] .st-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:40px calc(-1 * var(--frame-pad)) 0;padding:0;border:0;border-bottom:1px solid var(--border-1);background:transparent}
main[data-st] .st-pair,
main[data-st] .st-list > div,
main[data-st] .st-list > li,
main[data-st] .st-checks > div{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:28px var(--frame-pad) 30px;border:0;border-top:1px solid var(--border-1);background:var(--bg-page)}
@media (min-width:761px){
  main[data-st] .st-pair:nth-child(odd),
  main[data-st] .st-list > div:nth-child(odd),
  main[data-st] .st-list > li:nth-child(odd),
  main[data-st] .st-checks > div:nth-child(odd){border-right:1px solid var(--border-1)}
}
main[data-st] .st-pair .st-num,
main[data-st] .st-list .st-num{padding-top:3px;font-size:11px;color:var(--fg-3)}
main[data-st] .st-pair__copy{display:flex;flex-direction:column;gap:8px}
main[data-st] .st-pair strong,
main[data-st] .st-list h3,
main[data-st] .st-checks strong{font-family:var(--font-sans);font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--fg-1)}
main[data-st] .st-pair span,
main[data-st] .st-list p,
main[data-st] .st-checks p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--fg-2)}
main[data-st] .st-pair span{margin-top:0}
main[data-st] .st-checks svg{margin-top:1px;color:var(--success)}
main[data-st] .st-split .st-list{margin-left:0;margin-right:0;grid-template-columns:1fr}
main[data-st] .st-split .st-list > div,
main[data-st] .st-split .st-list > li{border-right:0;padding-left:0;padding-right:0}
@media (max-width:760px){
  main[data-st] .st-pair-list,
  main[data-st] .st-list,
  main[data-st] .st-checks{grid-template-columns:1fr}
}

/* Advice cells, capability rows and link rows */
main[data-st] .st-advise{margin:40px calc(-1 * var(--frame-pad)) 0;border-left:0;background:var(--border-1);gap:1px;border-top:1px solid var(--border-1);border-bottom:1px solid var(--border-1)}
main[data-st] .st-advise > div{border:0;background:var(--bg-page);padding:28px var(--frame-pad)}
main[data-st] .st-advise > div:hover{background:var(--bg-surface)}
main[data-st] .st-advise h3{font-family:var(--font-sans);font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
main[data-st] .st-cap{margin:0 0 10px;padding:16px 18px;border-radius:18px;transition:background-color .25s var(--m-soft),border-color .25s var(--m-soft),transform .35s var(--m-ease),box-shadow .35s var(--m-ease)}
main[data-st] .st-cap:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(18,18,16,.3)}
main[data-st] .st-cap__copy strong{font-family:var(--font-sans);font-size:16px;font-weight:600;line-height:1.35}
main[data-st] .st-links a{border-radius:14px;transition:background-color .25s var(--m-soft),border-color .25s var(--m-soft),color .25s var(--m-soft),transform .35s var(--m-ease),box-shadow .35s var(--m-ease)}
main[data-st] .st-links a:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(18,18,16,.3)}
main[data-st] .st-qa__related a{border-radius:var(--radius-pill)}

/* Phases, cards and decisions on a plate */
main[data-st] .st-phases,
main[data-st] .st-cards{gap:10px;margin-top:40px;padding:12px;border-radius:30px;background:var(--bg-subtle)}
main[data-st] .st-split .st-phases{padding:0;background:transparent;border-radius:0}
main[data-st] .st-phase,
main[data-st] .st-card{padding:22px 22px 24px;border:0;border-radius:18px;box-shadow:0 0 0 1px var(--border-1),0 1px 0 rgba(18,18,16,.04)}
main[data-st] .st-phase{border-top:3px solid var(--border-2)}
main[data-st] .st-phase--now{border-top-color:var(--accent)}
main[data-st] .st-card h3{font-family:var(--font-sans);font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
main[data-st] .st-card p{font-size:15px}
@media (max-width:640px){
  main[data-st] .st-phases,
  main[data-st] .st-cards{padding:8px;border-radius:22px}
}

/* Steps as a timeline of checks */
main[data-st] .st-steps{margin-top:8px;border-left:1px solid var(--border-1)}
main[data-st] .st-steps li{padding:0 0 36px 36px}
main[data-st] .st-steps i{left:-10px;top:4px;width:19px;height:19px;border-radius:50%;background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--border-2)}
main[data-st] .st-steps i::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--fg-1);transform:translate(-50%,-50%)}
main[data-st] .st-steps li:first-child i{background:var(--bg-surface)}
main[data-st] .st-steps li:first-child i::after{background:var(--accent)}
main[data-st] .st-steps h3{font-family:var(--font-sans);font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em;margin-top:0}
main[data-st] .st-steps .st-eyebrow{margin-bottom:8px}

/* Figures as tiles; the desk recordings and the console in rounded frames */
main[data-st] .st-metrics{gap:12px;margin-top:40px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
main[data-st] .st-metric{border:1px solid var(--border-1);border-radius:14px;background:var(--bg-surface);box-shadow:var(--shadow-xs)}
main[data-st] .st-console{border-radius:18px}
main[data-st] .st-clips{gap:10px;padding:12px;border-radius:30px;background:var(--bg-subtle)}
main[data-st] .st-clip{border-radius:18px}
main[data-st] .st-facts{gap:20px 24px}
main[data-st] .st-facts > div{padding:14px 16px;border:1px solid rgba(246,243,236,.14);border-radius:14px;background:rgba(246,243,236,.06)}
main[data-st] .st-facts dd{color:var(--stone-100)}
main[data-st] .st-case{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-xs)}
main[data-st] .st-case__fig{min-height:320px}
main[data-st] .st-band{border-top:0;margin-top:40px}
main[data-st] .st-band__grid{width:calc(100% - 2 * var(--frame-inset));max-width:var(--frame-col);padding:0 var(--frame-pad);box-sizing:border-box}

/* Guides: a breadcrumb, a cover, a sticky contents card and the article on the column. */
main[data-st] .st-hero__in--guide{grid-template-columns:1fr;gap:clamp(32px,4vw,48px)}
main[data-st] .st-hero__in--guide > div:first-child{max-width:820px}
main[data-st] .st-hero__in--guide > .st-aura--wide{position:relative;aspect-ratio:21/9;min-height:200px;max-height:420px;margin-top:0;border-radius:20px;overflow:hidden}
main[data-st] .st-guide{width:calc(100% - 2 * var(--frame-inset));max-width:var(--frame-col);margin:0 auto;padding:clamp(56px,6.7vw,96px) var(--frame-pad) clamp(40px,5vw,64px);grid-template-columns:minmax(min(100%,220px),280px) minmax(0,1fr);gap:40px 64px;box-sizing:border-box}
main[data-st] .st-guide.st-fr::before{left:0}
main[data-st] .st-guide.st-fr::after{right:0}
main[data-st] .st-toc{top:calc(var(--header-h) + 24px);padding:18px;border:1px solid var(--border-1);border-radius:16px;background:var(--bg-surface);box-shadow:var(--shadow-xs)}
main[data-st] .st-toc ol{margin:10px 0 0;border-top:0}
main[data-st] .st-toc a:not(.st-btn){grid-template-columns:28px minmax(0,1fr);margin:0 -8px;padding:9px 8px;border:0;border-radius:10px;font-size:14px;color:var(--fg-2);transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
main[data-st] .st-toc a:not(.st-btn):hover{background:var(--bg-subtle);color:var(--fg-1)}
main[data-st] .st-toc .st-btn{margin-top:14px}
main[data-st] .st-article{gap:clamp(40px,5vw,64px)}
main[data-st] .st-article > section{padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--border-1)}
main[data-st] .st-article > section:first-child{padding-top:0;border-top:0}
main[data-st] .st-article .st-sh--rule{padding-top:0;border-top:0}
main[data-st] .st-sh--md .st-sh__title{font-size:clamp(28px,2.8vw,38px)}
main[data-st] .st-prose{max-width:720px;font-size:17px;line-height:1.7}
main[data-st] .st-prose h3{font-size:18px}
@media (max-width:880px){
  main[data-st] .st-guide{grid-template-columns:1fr}
}

/* The FAQ as an accordion, one column, wherever it sits. */
main[data-st] .st-faq,
main[data-st] .st-faq--grid,
main[data-st] .st-faq--num{display:flex;flex-direction:column;gap:0;margin-top:32px;max-width:880px;counter-reset:none}
main[data-st] .st-faq[style]{display:flex !important;grid-template-columns:none !important}

/* The closing card: Ink, lit from one corner, on the column. */
main[data-st] .st-cta{max-width:none;margin:0;padding:clamp(64px,6.7vw,96px) 0 clamp(48px,6vw,96px)}
main[data-st] .st-cta__in{position:relative;isolation:isolate;overflow:hidden;width:calc(100% - 2 * var(--frame-inset) - 16px);max-width:calc(var(--frame-col) - 16px);margin:0 auto;padding:clamp(32px,4.5vw,64px);border:0;border-radius:22px;background:var(--stone-950);color:var(--stone-50);box-shadow:none;align-items:end}
main[data-st] .st-cta__in::before{content:"";position:absolute;inset:0;z-index:-1;color:rgba(246,243,236,.06);background-image:var(--pattern-grid);background-size:var(--pattern-grid-size);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 90%);mask-image:linear-gradient(to bottom,#000,transparent 90%)}
main[data-st] .st-cta__in::after{content:"";position:absolute;inset:-20%;z-index:-2;background:radial-gradient(45% 40% at 20% 20%,rgba(212,83,31,.7),transparent 70%),radial-gradient(40% 35% at 85% 90%,rgba(140,52,20,.55),transparent 70%)}
main[data-st] .st-cta h2{color:var(--stone-50);font-size:clamp(34px,3.8vw,54px)}
main[data-st] .st-cta p{color:rgba(246,243,236,.78)}
main[data-st] .st-cta .st-eyebrow{color:rgba(246,243,236,.6)}
main[data-st] .st-cta .st-eyebrow--marker::before{background:var(--ember-400)}
main[data-st] .st-cta .st-btn--secondary{background:rgba(246,243,236,.08);color:var(--stone-50);border-color:rgba(246,243,236,.18);box-shadow:none}
main[data-st] .st-cta .st-btn--secondary:hover{background:rgba(246,243,236,.16);border-color:rgba(246,243,236,.3);color:var(--stone-50)}

/* Legal and contact pages on the column */
main[data-st] .st-legal{max-width:760px}
main[data-st] .st-contact__intro-in{padding-left:max(var(--frame-pad),calc(50% - var(--frame-col) / 2 + var(--frame-pad)))}

/* ---------------------------------------------------------------- 11. Phones */
/* One layer for every page on a phone: a tighter frame, a shorter rhythm
   between sections, headers that read from the left, cards and grids that
   use the whole width, and motion that is quicker and travels less. It sits
   last so it wins on order alone. */
@media (max-width:719px){
  /* No backdrop blur on a phone: the bar is 97% paper anyway, and the blur is re-sampled on every scroll frame. */
  .st-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in oklab,var(--bg-page) 97%,transparent)}
  :root{
    --header-h:64px;
    --frame-inset:12px;
    --frame-pad:12px;
    --col-gap:24px;
  }

  /* Rhythm: the spacers between sections are short bands, not empty screens. */
  .st-sep{height:36px}
  .st-sep--last{height:28px}
  main[data-st] .st-section{padding-top:48px}
  main[data-st] .st-section.st-hero-intro{padding-bottom:40px}
  .st-shelf{margin-top:28px;padding:6px 0}
  .st-fw--flush{padding:0 6px}

  /* Section headers: eyebrow, title and lede from the left, close together. */
  .st-sh{flex-direction:column;align-items:stretch;gap:16px}
  .st-sh--center{align-items:flex-start;text-align:left}
  .st-sh--center .st-sh__eyebrow{justify-content:flex-start}
  .st-sh--center .st-sh__desc{margin-left:0;margin-right:0}
  .st-sh--lg .st-sh__eyebrow{margin-bottom:14px}
  .st-sh--md .st-sh__eyebrow{margin-bottom:12px}
  main[data-st] .st-sh--lg .st-sh__title{font-size:clamp(30px,8.6vw,36px);line-height:1.08;max-width:none}
  main[data-st] .st-sh--lg .st-sh__desc{margin-top:14px;font-size:15.5px;line-height:1.55}
  main[data-st] .st-sh--md .st-sh__title{font-size:clamp(26px,7.2vw,30px)}
  .st-sh__actions{flex-wrap:wrap;gap:8px}
  .st-sh__actions .st-btn{flex:1 1 auto;justify-content:center}

  /* Heroes: shorter, with the figure at a phone's height. */
  main[data-st] .st-hero__in{padding:28px var(--frame-pad) 36px}
  main[data-st] .st-hero__in--split{min-height:0;gap:28px}
  main[data-st] .st-hero__copy{gap:28px}
  main[data-st] .st-hero__title{font-size:clamp(34px,9.6vw,40px);line-height:1.06;margin-top:18px}
  main[data-st] .st-hero__lede{font-size:16.5px;line-height:1.55}
  main[data-st] .st-hero__actions{gap:8px}
  main[data-st] .st-hero__actions .st-btn{flex:1 1 auto;justify-content:center;min-width:0}
  main[data-st] .st-hero__meta{margin-top:20px;gap:8px}
  main[data-st] .st-hero__fig{min-height:340px;border-radius:16px}
  main[data-st] .st-hero__in--guide{gap:24px}
  main[data-st] .st-hero__in--guide > .st-aura--wide{aspect-ratio:2/1;min-height:140px;max-height:200px;border-radius:16px}
  main[data-st] .sc-crumb ol{gap:4px 8px}

  /* The hairline grids and the rows on the column. */
  main[data-st] .st-pair-list,
  main[data-st] .st-list,
  main[data-st] .st-checks{margin-top:28px}
  main[data-st] .st-pair,
  main[data-st] .st-list > div,
  main[data-st] .st-list > li,
  main[data-st] .st-checks > div{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:20px var(--frame-pad) 22px}
  main[data-st] .st-pair strong,
  main[data-st] .st-list h3,
  main[data-st] .st-checks strong{font-size:15.5px}
  main[data-st] .st-pair span,
  main[data-st] .st-list p,
  main[data-st] .st-checks p{font-size:14.5px;margin-top:4px}
  main[data-st] .st-advise{margin-top:28px}
  main[data-st] .st-advise > div{padding:20px var(--frame-pad)}
  main[data-st] .st-cap{padding:14px 14px;border-radius:14px}
  main[data-st] .st-phases,
  main[data-st] .st-cards{margin-top:28px;gap:6px;padding:6px;border-radius:20px}
  main[data-st] .st-phase,
  main[data-st] .st-card{padding:18px 18px 20px;border-radius:14px}
  main[data-st] .st-steps{margin-top:4px}
  main[data-st] .st-steps li{padding:0 0 28px 28px}
  main[data-st] .st-steps h3{font-size:16px}
  main[data-st] .st-metrics{margin-top:28px;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
  main[data-st] .st-metric{padding:16px 14px 14px;border-radius:12px}
  main[data-st] .st-metric__val{margin-top:6px;font-size:clamp(28px,8vw,34px)}
  main[data-st] .st-metric__cap{margin-top:8px;font-size:12.5px}
  main[data-st] .st-clips{gap:8px;padding:6px;border-radius:20px}
  .st-clip__bar{flex-wrap:wrap;gap:6px 12px;padding:10px 14px}
  .st-clip figcaption{padding:10px 14px 12px}
  .st-tags{gap:6px;margin-top:20px}
  main[data-st] .st-facts{gap:8px}
  main[data-st] .st-facts > div{padding:12px 14px}
  main[data-st] .st-case__fig{min-height:220px}
  main[data-st] .st-band{margin-top:28px}

  /* Guides: the contents card first, then the article, with less air between parts. */
  main[data-st] .st-guide{padding-top:36px;padding-bottom:32px;gap:24px}
  main[data-st] .st-toc{padding:14px 14px 16px;border-radius:14px}
  main[data-st] .st-toc .st-btn{margin-top:10px}
  main[data-st] .st-article{gap:36px}
  main[data-st] .st-article > section{padding-top:28px}
  main[data-st] .st-prose{font-size:16.5px;line-height:1.65}
  main[data-st] .st-prose h3{font-size:17px}

  /* Accordions and the FAQ. */
  main[data-st] .st-faq,
  main[data-st] .st-faq--grid,
  main[data-st] .st-faq--num{margin-top:20px}
  .sc-acc__trigger{gap:16px;padding:16px 0}
  .sc-acc__trigger h3{font-size:16px}
  .sc-acc__content{padding-bottom:18px}
  .sc-acc__content p{font-size:15px;line-height:1.6}

  /* The closing card, on the column with a little less air. */
  main[data-st] .st-cta{padding:44px 0 36px}
  main[data-st] .st-cta__in{width:calc(100% - 2 * var(--frame-inset) - 8px);padding:28px 22px 26px;border-radius:20px;gap:20px}
  main[data-st] .st-cta h2{font-size:clamp(30px,8.6vw,36px);line-height:1.08}
  main[data-st] .st-cta p{font-size:15.5px}
  main[data-st] .st-cta .st-hero__actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}

  /* Header: the bar steps aside while the reader scrolls down and returns the
     moment they scroll up (aa-page.js sets data-hidden). */
  .st-header{transition:background-color .45s var(--m-soft),border-color .45s var(--m-soft),color .45s var(--m-soft),transform .5s var(--m-ease)}
  .st-header[data-hidden="true"]{transform:translateY(-100%)}
  .st-header__in{gap:10px}
  .st-nav > .st-btn{height:38px;padding:0 5px 0 14px;font-size:13.5px}
  .st-burger{margin-right:-8px}

  /* The sheet: groups rise in one after another as it opens. */
  .st-mobile{transform:translateY(-6px)}
  .st-mobile nav{gap:18px;padding-top:12px}
  .st-mobile .sc-sheet__group > .st-eyebrow{padding-bottom:6px}
  .st-mobile a{min-height:46px;font-size:16px}
  html.aa-m .st-mobile nav > *{opacity:0;transform:translate3d(0,10px,0)}
  html.aa-m .st-mobile[data-open] nav > *{animation:aaRise .6s var(--m-ease) both}
  html.aa-m .st-mobile[data-open] nav > :nth-child(1){animation-delay:40ms}
  html.aa-m .st-mobile[data-open] nav > :nth-child(2){animation-delay:90ms}
  html.aa-m .st-mobile[data-open] nav > :nth-child(3){animation-delay:140ms}
  html.aa-m .st-mobile[data-open] nav > :nth-child(4){animation-delay:190ms}
  html.aa-m .st-mobile[data-open] nav > :nth-child(5){animation-delay:240ms}
  html.aa-m .st-mobile[data-open] nav > :nth-child(n+6){animation-delay:280ms}
  .st-mobile .sc-sheet__row .st-btn--primary,
  .st-mobile .sc-sheet__row .st-btn--primary:active{background:var(--action-primary-bg);color:var(--action-primary-fg)}
  .st-mobile .sc-sheet__row{position:sticky;bottom:0;margin:4px calc(-1 * var(--frame-pad)) 0;padding:12px var(--frame-pad) calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in oklab,var(--bg-page) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border-1)}

  /* Motion: quicker and shorter on a small screen, where the reader scrolls fast. */
  html.aa-m.aa-go [data-in]{animation-duration:.85s;animation-delay:calc(var(--i, 0) * 70ms + 30ms)}
  html.aa-m.aa-go .st-hero__title[data-in]{animation-duration:1s}
  html.aa-m.aa-go .st-hero__fig[data-in],
  html.aa-m.aa-go .st-aura[data-in],
  html.aa-m.aa-go .st-dash[data-in]{animation-duration:1.05s}
  html.aa-m.aa-go .st-hero .st-aura__wash{animation-duration:1.6s}
  html.aa-m.aa-go:not(.aa-seen) [data-in]{animation-delay:calc(var(--i, 0) * 70ms + 200ms)}
  html.aa-m.aa-go:not(.aa-seen) .st-hero .st-aura__wash{animation-delay:.4s}
  html.aa-m [data-reveal]{transform:translate3d(0,14px,0);transition-duration:.65s,.8s,var(--dur-fast),var(--dur-fast)}
  .st-loader{transition-duration:.7s}
}

/* Touch: a press settles the card under the finger instead of lifting it. */
@media (hover:none) and (pointer:coarse){
  .st-btn,
  .sc-card--interactive,
  main[data-st] .st-links a,
  main[data-st] .st-cap{transition-duration:.18s}
  .st-mobile a{transition:background-color .18s var(--m-soft),color .18s var(--m-soft)}
  .sc-card--interactive:active,
  main[data-st] .st-links a:active,
  main[data-st] .st-cap:active{transform:scale(.985);box-shadow:none}
  .sc-card--interactive:hover,
  main[data-st] .st-links a:hover,
  main[data-st] .st-cap:hover{transform:none;box-shadow:var(--shadow-xs)}
}