/* GENERATED by scripts/build_tokens.py from src/design/brand_tokens.json.
   Do not edit by hand: change the brand tokens and regenerate. */
:root {
  --ink: #111111;
  --rose: #dda6c2;
  --sky: #5fa2c9;
  --rose-deep: #c17fa8;
  --white: #ffffff;
  --off-white: #f7fafb;
  --light-grey: #fafafa;
  --text-secondary: #3d5a70;
  --text-muted: #6a8090;
  --border: #e8ecf0;
  --grad-signature: linear-gradient(90deg, #dda6c2 0%, #5fa2c9 50%, #dda6c2 100%);
  --grad-cta: linear-gradient(90deg, #c17fa8 0%, #5fa2c9 100%);
  --grad-cta-diagonal: linear-gradient(135deg, #c17fa8 0%, #5fa2c9 100%);
  --grad-hero-overlay: linear-gradient(to right, rgba(17, 17, 17,0.92) 0%, rgba(17, 17, 17,0.7) 50%, rgba(17, 17, 17,0.2) 100%);
  --grad-blob: linear-gradient(135deg, rgba(221,166,194,0.2), rgba(95,162,201,0.14));
  --font-sans: 'Montserrat Variable', 'Montserrat', system-ui, sans-serif;
  --container: 1100px;
  --radius-sm: 4px;
  --radius-card: 14px;
  --section-pad: 88px 48px;
  --section-pad-mobile: 64px 20px;
  --fs-hero: clamp(40px, 5.6vw, 74px);
  --fs-h1: clamp(28px, 4vw, 48px);
  --fs-h2: clamp(24px, 3vw, 36px);
  --fs-h3: 19px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --tracking-tight: -0.022em;
}
/* The award version's shared patterns (docs/AWARD_V2.md): the scan, the camera view, the Lens,
   wall labels, outcome numbers, the contact sheet. Imported by global.css. */

/* ---------- the scan (section 2, src/scripts/scan.ts): the one motion verb. An artwork
   entering the viewport once: a 2 px rose-to-sky line sweeps down across it and, behind the
   line, the picture resolves from a pale, slightly desaturated, 1.02-scaled proof. Armed only
   by the script (.scan-wait) or, for the first view, from first paint (data-scan="load");
   without JS or with reduced motion nothing is ever hidden or paled. ---------- */
@property --scan{syntax:'<percentage>';inherits:true;initial-value:100%}
:where([data-scan]){position:relative}
:where([data-scan]:not([data-scan=edge])){overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .scan-wait:not([data-scan=edge]){--scan:0%}
  .scan-wait:not([data-scan=edge]) :is(img,video){transform:scale(1.02);filter:saturate(.55)}
  :is(.scan-wait,.is-scanning,[data-scan=load]):not([data-scan=edge]) :is(img,video){
    -webkit-mask-image:linear-gradient(#000 0,#000 var(--scan),rgba(0,0,0,.42) var(--scan));
    mask-image:linear-gradient(#000 0,#000 var(--scan),rgba(0,0,0,.42) var(--scan))}
  :is(.is-scanning,[data-scan=load]):not([data-scan=edge]){animation:scan-p .9s cubic-bezier(.2,.7,.2,1) both}
  :is(.is-scanning,[data-scan=load]):not([data-scan=edge]) :is(img,video){animation:scan-media .9s cubic-bezier(.2,.7,.2,1) both}
  .is-scanning::after,[data-scan=load]::after{
    content:'';position:absolute;left:0;right:0;top:0;height:100%;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,var(--rose),var(--sky)) left bottom/100% 2px no-repeat;
    animation:scan-line .9s cubic-bezier(.2,.7,.2,1) both}
  /* the first view scans as it paints, a beat after */
  [data-scan=load],[data-scan=load] :is(img,video),[data-scan=load]::after{animation-delay:.12s}
  /* a dark section's top edge is drawn by the line as the section arrives */
  .is-scanning[data-scan=edge]::after{
    content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,var(--rose),var(--sky));transform-origin:0 0;
    animation:scan-edge .9s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes scan-p{from{--scan:0%}to{--scan:100%}}
@keyframes scan-media{from{transform:scale(1.02);filter:saturate(.55)}to{transform:none;filter:none}}
@keyframes scan-line{from{transform:translateY(-100%)}88%{opacity:1}to{transform:translateY(0);opacity:0}}
@keyframes scan-edge{from{transform:scaleX(0)}80%{opacity:1}to{transform:scaleX(1);opacity:0}}

/* ---------- the camera view (section 4): in a dark section an artwork, once scanned, is held
   in a thin blue AR frame, the blue of the frame around the recognised print in the Art We
   Are Daily film (31-37 s). The app's record button (a white ring around a red dot, the DHL
   and Art We Are Daily scan views) marks the controls that open the camera. Nothing else. ---------- */
:root{--ar-blue:#2b36f0}
:is(.s-dark,.footer) [data-scan]:not([data-scan=edge]){outline:2px solid transparent;outline-offset:6px;transition:outline-color .3s ease-out .1s}
:is(.s-dark,.footer) .is-scanned[data-scan]:not([data-scan=edge]){outline-color:var(--ar-blue)}
.rec-dot{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border:2px solid currentColor;border-radius:50%}
.rec-dot::after{content:'';width:10px;height:10px;border-radius:50%;background:#e5352e}

/* ---------- the Lens (section 1, src/scripts/lens.ts) ---------- */
.has-lens{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.lens-on{cursor:none}
.lens-layer{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none}
.lens-layer.is-lens,.lens-layer.is-full{opacity:1}
.lens-layer img,.lens-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the lens edge: a soft inner shadow on the element, the 2 px rose-to-sky ring on ::before
   (a gradient cut to a ring with a mask) */
.lens-round{position:absolute;left:0;top:0;z-index:4;pointer-events:none;border-radius:50%;opacity:0;will-change:transform;
  box-shadow:inset 0 0 24px rgba(0,0,0,.36)}
.lens-round::before{content:'';position:absolute;inset:0;border-radius:50%;padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lens-on .lens-round{opacity:1}
.lens-on .lens-round::before{background:linear-gradient(135deg,var(--rose),var(--sky))}
.lens-pill{position:absolute;left:50%;bottom:12px;z-index:5;transform:translateX(-50%);pointer-events:none;white-space:nowrap;
  font-size:13px;font-weight:600;line-height:1.35;color:#fff;background:rgba(17,17,17,.8);padding:6px 14px;border-radius:999px;transition:opacity .4s ease-out}
.lens-pill[hidden]{display:none}
.lens-pill.is-gone{opacity:0}

/* ---------- wall labels (section 5): artist 600, the work in italic, then medium, place
   and year, on the reading margin ---------- */
.wall-label{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-caption);max-width:var(--ms-caption)}
.wall-label strong{font-weight:600;color:var(--text-body)}
.wall-label em{font-style:italic}
.wall-label a{color:inherit;text-decoration:underline;text-decoration-color:var(--sky);text-underline-offset:3px}
:is(.s-dark,.footer) .wall-label{color:var(--on-ink-2)}
:is(.s-dark,.footer) .wall-label strong{color:var(--on-ink)}
/* outcome numbers, annual-report size (a step above the editorial number) */
:root{--fs-num-xl:clamp(56px,6.4vw,96px)}
.t-num-xl{font-size:var(--fs-num-xl);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---------- contact sheet (section 5): a horizontal strip, native scrolling with snap,
   keyboard reachable (a focusable region; the frames are links), a visible scrollbar and
   prev/next buttons (src/scripts/strip.ts) ---------- */
.sheet-scroll{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;
  scrollbar-width:thin;scrollbar-color:#111 #e6e6e6;overscroll-behavior-x:contain}
.sheet-scroll::-webkit-scrollbar{height:6px}
.sheet-scroll::-webkit-scrollbar-track{background:#e6e6e6}
.sheet-scroll::-webkit-scrollbar-thumb{background:#111}
.sheet-scroll:focus-visible{outline:2px solid var(--sky-ink);outline-offset:4px}
.sheet-scroll>*{scroll-snap-align:start;flex:none}
.sheet-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.sheet-nav p{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-caption)}
.sheet-btns{display:flex;gap:8px}
.sheet-btns[hidden]{display:none}
.sheet-btns button{width:44px;height:44px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:var(--radius-sm);background:var(--white);color:var(--ink);cursor:pointer}
.sheet-btns button:hover:not(:disabled){background:var(--ink);color:var(--white)}
.sheet-btns button:disabled{opacity:.35;cursor:default}
@media(prefers-reduced-motion:no-preference){.sheet-scroll{scroll-behavior:smooth}}

/* ---------- the footer opens with the product (section 6) ---------- */
.footer .fqr{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:center;padding-bottom:72px;margin-bottom:56px;border-bottom:1px solid rgba(255,255,255,.1)}
.fqr-art{margin:0}
.fqr-img{display:block}
.fqr-img img{display:block;width:100%;height:auto}
.fqr-art figcaption{margin-top:16px}
.fqr-scan{display:grid;grid-template-columns:208px minmax(0,1fr);gap:24px 32px;align-items:center}
.fqr-h{grid-column:1/-1;font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-h2);letter-spacing:var(--tr-h2);color:var(--white);max-width:12ch}
.fqr-code{display:block;width:208px;height:208px}
.fqr-scan p{font-size:16px;line-height:1.6;color:var(--on-ink);max-width:32ch}
.fqr-phone,.fqr-btn{display:none!important}
.footer .btn-outline{border-color:rgba(255,255,255,.6);color:var(--white);gap:12px}
.footer .btn-outline:hover{background:var(--white);color:var(--ink)}
@media(max-width:900px){.footer .fqr{grid-template-columns:1fr;gap:40px}}
@media(max-width:760px){
  .footer .fqr{padding-bottom:56px;margin-bottom:56px}
  .fqr-scan{grid-template-columns:1fr;gap:16px}
  .fqr-code,.fqr-desk{display:none}
  .fqr-phone{display:block!important}
  .fqr-btn{display:inline-flex!important;justify-self:start}
}
/* V4 system (docs/V4_BRIEF.md, 2026-10-10): today's artivive.com, upgraded. The live site's
   DNA, kept and refined: a light airy canvas, soft colour glows behind heroes, pastel 3D,
   two-tone headings (ink + a phrase in the rose-lilac-sky gradient), small uppercase sky-ink
   eyebrows, white rounded cards with soft shadows, round coloured bullets, black and light
   pill buttons, the dark offer panel with a gradient price card. Since V5 (docs/V5_BRIEF.md
   section 4) every page is V4: Shell.astro puts "v4" on every body (a page passing
   bodyClass "v4 ..." still works); the nav, footer, sign-up band and the content templates
   (global.css) are drawn in it. The components (Eyebrow, TwoToneHeading, Card, OfferPanel,
   Glow, Float3D, Obj3D) carry their own markup and read these tokens. Montserrat only. */
:root{
  --canvas:#f7f7f8;
  --lilac:#b9a6d9;                    /* the third pastel of the live renders */
  --peach:#f2c6b0;
  --lilac-ink:#7a68a6;                /* lilac as large text on light (4.4:1 on the canvas) */
  /* the heading phrase: the brand's rose to sky through lilac, deepened so every stop holds
     3:1 or better on white and on the canvas (large text only, >= 30 px) */
  --grad-phrase:linear-gradient(90deg,#9c5584 0%,#7a68a6 52%,#357399 100%);
  --grad-phrase-on-ink:linear-gradient(90deg,#e7b9d0 0%,#cbbcea 50%,#8cc3e2 100%);
  /* the price card on the dark panel: the live card, brand rose to sky through lilac */
  --grad-price:linear-gradient(118deg,#dda6c2 0%,#c3b1df 48%,#8fc0dd 100%);
  --shadow-card:0 1px 2px rgba(17,17,17,.04),0 12px 32px rgba(17,17,17,.07);
  --shadow-lift:0 2px 6px rgba(17,17,17,.06),0 22px 48px rgba(17,17,17,.11);
  --r-card:20px;
  --r-inner:14px;
  --v4-w:1240px;
  --v4-gut:40px;
}
@media(max-width:900px){:root{--v4-gut:24px}}
@media(max-width:640px){:root{--v4-gut:16px}}

body.v4{background:var(--canvas)}
.v4 .w4{max-width:var(--v4-w);margin:0 auto;padding:0 var(--v4-gut)}
.v4 :is(p,li,dd,figcaption,blockquote){text-wrap:pretty}
/* V19: no orphan words in headings, eyebrows or the big leads */
.v4 :is(h1,h2,h3,h4,.eyebrow4,.lede,.ph4-lead,p[class*=center]){text-wrap:balance}

/* type, within Montserrat: tighter large headings, comfortable body. The section heading
   sizes sit at element specificity (:where), so a template's or component's own class
   (the migrated body, a sidebar title, a card title) sizes its h2 without a fight. */
.v4 main{font-size:var(--fs-body);color:var(--text-body)}
:where(.v4 main) h2{font-size:clamp(30px,3.4vw,48px);font-weight:700;line-height:1.08;letter-spacing:-.03em}
:where(.v4 main) h3{font-size:clamp(19px,1.5vw,22px);font-weight:700;line-height:1.25;letter-spacing:-.012em}

/* section rhythm */
/* V19: one rhythm, a little tighter (was 56-104 px a side) */
.sec4{padding-block:clamp(48px,6vw,88px);position:relative}
.sec4-tight{padding-block:clamp(40px,5vw,72px)}
.sec4-head{max-width:760px;margin:0 auto clamp(32px,4vw,56px);text-align:center}
.sec4-head .lede{margin:16px auto 0;max-width:58ch;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--text-body)}
.sec4-head.left{margin-left:0;text-align:left}
.sec4-head.left .lede{margin-left:0}

/* eyebrow: the live site's small uppercase label, sky-ink (5:1 on the canvas) */
.v4 .eyebrow,.eyebrow4{display:block;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-ink);margin-bottom:14px}
.s-dark .eyebrow4,.panel4 .eyebrow4{color:#9fcbe6}

/* two-tone headings: the phrase in the gradient, large text only */
.tt-grad{color:var(--lilac-ink);background:var(--grad-phrase);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.04em}
.s-dark .tt-grad,.panel4 .tt-grad{color:#cbbcea;background:var(--grad-phrase-on-ink);-webkit-background-clip:text;background-clip:text}
.tt-br{display:block}

/* pill buttons: black primary, light secondary (the live site's), white on dark */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:999px;border:1.5px solid transparent;font-size:15px;font-weight:700;line-height:1.2;letter-spacing:0;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.pill-dark{background:#111111;color:#ffffff}
.pill-dark:hover{background:#2c2c2c}
.pill-light{background:#ffffff;color:#111111;border-color:rgba(17,17,17,.16)}
.pill-light:hover{border-color:#111111}
.pill-white{background:#ffffff;color:#111111}
.pill-white:hover{background:#ececec}
.pill-ghost{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.42)}
.pill-ghost:hover{border-color:#ffffff}
.pill svg{flex:none}
@media(prefers-reduced-motion:no-preference){.pill:hover{transform:translateY(-1px)}}
@media(max-width:640px){.pill{white-space:normal;text-align:center}}
.actions4{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* the nav (the sky sign-up pill, log in light) lives in global.css with the rest of the chrome */

/* cards: white, rounded 20, a soft shadow on the canvas */
.card4{background:#ffffff;border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:clamp(22px,2.4vw,32px)}
.card4-flush{padding:0;overflow:hidden}
a.card4,.card4-link{transition:box-shadow .25s,transform .25s}
a.card4:hover,.card4-link:hover{box-shadow:var(--shadow-lift)}
@media(prefers-reduced-motion:no-preference){a.card4:hover,.card4-link:hover{transform:translateY(-3px)}}

/* feature lists with small round coloured bullets (the live cards) */
.dots{list-style:none;display:grid;gap:14px}
.dots li{position:relative;padding-left:26px;line-height:1.5}
.dots li::before{content:'';position:absolute;left:0;top:.38em;width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#dda6c2,#5fa2c9)}
.dots li:nth-child(3n+2)::before{background:linear-gradient(135deg,#b9a6d9,#5fa2c9)}
.dots li:nth-child(3n)::before{background:linear-gradient(135deg,#f2c6b0,#dda6c2)}
.dots strong{display:block;color:var(--ink);font-weight:700}

/* the dark offer panel (live /educational), with the gradient price card */
.panel4{position:relative;isolation:isolate;overflow:hidden;background:#1b1a20;color:#f4f4f4;border-radius:var(--r-card);padding:clamp(28px,4vw,56px)}
.panel4 h2,.panel4 h3{color:#ffffff}
.panel4 p{color:#d6d6dc}
.panel4 a:not(.pill){color:#ffffff;text-decoration:underline;text-decoration-color:#dda6c2;text-underline-offset:3px}
/* a white card on the panel (the sign-up) reads as on the canvas again */
.panel4 .card4{color:var(--text-body)}
.panel4 .card4 p{color:var(--text-caption)}
.panel4 .card4 a:not(.pill):not(.sso){color:var(--ink);text-decoration-color:var(--sky)}
.panel4 .card4 .sso{color:#111111;text-decoration:none}
.panel4 .card4 .sso-google{color:#ffffff}


/* the round step marker (how it works) */
.step-dot{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#ffffff;box-shadow:var(--shadow-card);font-size:15px;font-weight:800;color:var(--ink);flex:none}

/* links in running text */
.v4 .lnk{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:4px}
.v4 .lnk:hover{color:var(--sky-ink)}

/* reduced motion: the floats hold still (Float3D), nothing lifts */
@media(prefers-reduced-motion:reduce){a.card4:hover,.card4-link:hover,.pill:hover{transform:none}}




/* Accessibility override: the brand token #6a8090 is 4.1:1 on white, below WCAG AA.
   Same hue, darkened to 4.9:1. Fold back into michael/brand_book/brand_tokens.json. */
:root{--text-muted:#5f7484}

/* Direction "art leads, brand speaks" (Sergiu 2026-10-09: mix of brand-book colour and
   art-led pages, not busy). Brand colours deepened only where white text sits on them or
   they are text on white, so they pass WCAG AA; on dark sections the originals are used. */
:root{
  --sky-ink:#357399;                 /* sky as text/links on light (5.2:1) */
  --rose-ink:#9c5584;                /* rose as text on light (5.2:1) */
  --grad-cta-a11y:linear-gradient(90deg,#9c5584 0%,#357399 100%); /* CTA gradient, white text >=5:1 */
  --dark:#111111;
}

/* V19 (docs/v17-assets.md, V19 pages): a metric-matched fallback for Montserrat (Arial scaled to Montserrat's advance width
   and vertical metrics), so the text block keeps its height when the web font swaps in: on phones the hero picture under
   the copy no longer jumps (/download CLS 0.117 -> see the doc). */
@font-face{font-family:'Montserrat Fallback';src:local('Arial'),local('ArialMT');ascent-override:85.79%;descent-override:22.25%;line-gap-override:0%;size-adjust:112.83%}
:root{--font-sans:'Montserrat Variable','Montserrat','Montserrat Fallback',system-ui,sans-serif}

/* Type system (docs/ROUND4.md section 1, from the Astra review 2; supersedes the ROUND3 scale).
   Montserrat only, its full range, real italics (Shell.astro loads the italic axis).
   Desktop / phone px: display 104/52 (rare), h1 64/38, h2 44/30, h3 24/21, lead 22/18,
   body 18/16, caption 14/13, label 12, editorial number 48/32, price 32/28, featured quote
   40/28. Sizes scale fluidly between 640 and 1440 px. Measures cap the line, never the box.
   Colours: headings #111, body #292929, captions #555, short labels #3d5a70; on ink #f4f4f4
   primary, #ccc secondary. --text-secondary and --text-muted are the old names for body and
   caption colour and now carry those values, so every template picks them up. These override
   the generated tokens.css values; fold them back into brand_tokens.json. Spacing: editorial
   96, comparison 64, utility 40 (56/40/28 on phones), via .sp-editorial / .sp-compare / .sp-utility. */
:root{
  --fs-display:clamp(52px,7.2vw,104px);
  --fs-hero:var(--fs-display);
  --fs-h1:clamp(38px,4.45vw,64px);
  --fs-h2:clamp(30px,3.05vw,44px);
  --fs-h3:clamp(21px,1.67vw,24px);
  --fs-lead:clamp(18px,1.53vw,22px);
  --fs-body-lg:var(--fs-lead);
  --fs-body:18px;
  --fs-small:16px;
  --fs-caption:14px;
  --fs-label:12px;
  --fs-num:clamp(32px,3.33vw,48px);
  --fs-price:clamp(28px,2.22vw,32px);
  --fs-quote:clamp(28px,2.78vw,40px);
  --lh-display:.98;--lh-h1:1.04;--lh-h2:1.12;--lh-h3:1.22;--lh-lead:1.45;--lh-body:1.6;--lh-caption:1.45;
  --tr-display:-.045em;--tr-h1:-.035em;--tr-h2:-.025em;--tr-h3:-.015em;--tr-lead:-.01em;--tr-label:.08em;
  --tr-num:-.03em;--tr-price:-.02em;--tr-quote:-.02em;
  --tracking-tight:var(--tr-h2);
  --ms-display:12ch;--ms-h1:19ch;--ms-h2:25ch;--ms-h3:32ch;--ms-lead:36ch;--ms-caption:48ch;--ms-label:24ch;
  --prose:60ch;
  --text-head:#111111;
  --text-body:#292929;
  --text-secondary:var(--text-body);
  --text-caption:#555555;
  --text-muted:var(--text-caption);
  --text-label:#3d5a70;
  --on-ink:#f4f4f4;
  --on-ink-2:#cccccc;
  --sp-editorial:96px;
  --sp-compare:64px;
  --sp-utility:40px;
}
@media(max-width:640px){
  :root{--fs-body:16px;--fs-small:15px;--fs-caption:13px;
    --sp-editorial:56px;--sp-compare:40px;--sp-utility:28px}
}

/* The roles as classes, for anything that is not the plain element (a styled p as a heading,
   a hero headline inside a component). Elements get the same values at zero specificity. */
:where(h1,.t-h1){font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-h1);letter-spacing:var(--tr-h1);color:var(--text-head)}
:where(h2,.t-h2){font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-h2);letter-spacing:var(--tr-h2);color:var(--text-head)}
:where(h3,.t-h3){font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-h3);letter-spacing:var(--tr-h3);color:var(--text-head)}
:where(h1,h2,h3,h4,.t-display,.t-h1,.t-h2,.t-h3,.quote-feature){text-wrap:balance}
.t-display{font-size:var(--fs-display);font-weight:900;line-height:var(--lh-display);letter-spacing:var(--tr-display);max-width:var(--ms-display);color:var(--text-head)}
.t-lead,.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--tr-lead);color:var(--text-body);max-width:var(--ms-lead)}
.t-label{font-size:var(--fs-label);font-weight:600;line-height:1.35;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--text-label);max-width:var(--ms-label)}
.t-num{font-size:var(--fs-num);font-weight:800;line-height:1.05;letter-spacing:var(--tr-num);font-variant-numeric:tabular-nums}
.t-price{font-size:var(--fs-price);font-weight:700;line-height:1.15;letter-spacing:var(--tr-price);font-variant-numeric:tabular-nums;white-space:nowrap}
/* The one change of temperament inside a headline (creatives h1: "move"): real italic, 500. */
.t-em{font-style:italic;font-weight:500;letter-spacing:-.01em}
/* Featured quotation (business: Sissa Micheli): light, large, no decorative marks. */
.quote-feature{font-size:var(--fs-quote);font-weight:300;line-height:1.25;letter-spacing:var(--tr-quote);max-width:32ch;color:var(--text-head)}
.s-dark .quote-feature{color:var(--on-ink)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--font-sans);font-synthesis:none;color:var(--text-body);background:var(--white);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
/* the V4 measure (1240 + gutter, v4.css) since V5: .wrap and .w4 line up with the nav and footer */
.wrap{max-width:var(--v4-w);margin:0 auto;padding:0 var(--v4-gut)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:var(--radius-sm);font-weight:700}
.skip:focus{top:12px}
.eyebrow{font-size:var(--fs-label);font-weight:600;line-height:1.35;text-transform:uppercase;letter-spacing:var(--tr-label);color:var(--text-label)}
.s-dark .eyebrow{color:var(--on-ink-2)}
.prose{font-size:var(--fs-body);color:var(--text-body);max-width:var(--prose)}
.prose p+p{margin-top:1em}
.prose a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--sky-ink)}
/* Artist credits read as attribution: sentence case, caption size, quiet colour, never tiny. */
.credit{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-caption);text-transform:none;letter-spacing:0;font-weight:400;max-width:var(--ms-caption)}
.credit a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--sky);text-underline-offset:2px}
/* the artist's name leads the credit, set in 600 */
.credit strong,.credit .artist{font-weight:600;color:var(--text-body)}
.s-dark .credit{color:var(--on-ink-2)}
.s-dark .credit strong,.s-dark .credit .artist{color:var(--on-ink)}
.s-dark .credit a{color:var(--white)}
.sp-editorial{padding-block:var(--sp-editorial)}
.sp-compare{padding-block:var(--sp-compare)}
.sp-utility{padding-block:var(--sp-utility)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- buttons (brand_tokens.json "buttons") ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:14px 30px;border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer;transition:opacity .2s,background .2s,color .2s;white-space:nowrap}
/* Brand book primary button: the CTA gradient (deepened for AA). One per view. */
.btn-primary{background:var(--grad-cta-a11y);color:var(--white);box-shadow:0 4px 14px rgba(53,115,153,.22)}
.btn-primary:hover{opacity:.9}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{opacity:.86}
.btn-outline{border-color:var(--ink);color:var(--ink);font-weight:700}
.btn-outline:hover{background:var(--ink);color:var(--white)}

/* ---------- nav (live structure, round 3 frame: docs/ROUND3.md "Navigation"; the V4 skin on
   every page, docs/V5_BRIEF.md section 4) ----------
   The canvas, no blur, 80 px desktop / 64 px below 1280 px, a hairline only once the page
   scrolls. Pills: log in light, sign up sky (deepened to sky-ink for AA), on every page.
   --navh drives body padding, the dropdown backdrop, the search and mobile panels and sticky
   offsets, so change it only here. */
:root{--navh:80px}
@media(max-width:1279px){:root{--navh:64px}}
body{padding-top:var(--navh)}
.nav{position:fixed;top:0;left:0;right:0;z-index:99;padding:0 5%;height:var(--navh);background:var(--canvas);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
html.scrolled .nav{border-bottom-color:rgba(17,17,17,.07);box-shadow:0 6px 18px rgba(17,17,17,.04)}
.navin{display:flex;align-items:center;gap:38px;max-width:1418px;margin:0 auto;width:100%;height:100%}
.navspace{flex:1}
.navdivider{width:1px;height:24px;background:rgba(17,17,17,.16)}
.nav-logo{display:flex;align-items:center;min-height:44px}
.nav-logo img{height:30px;width:auto}
.navlinks{display:flex;font-size:13.8px;font-weight:500;align-items:center;letter-spacing:1.55px;margin-left:-20px;height:100%}
.navlinks>div{height:100%}
.navlinks>div>a{color:var(--ink);text-transform:uppercase;letter-spacing:1.55px;padding:0 20px;height:100%;display:inline-flex;align-items:center;white-space:nowrap;transition:color .2s}
.navlinks>div>a:hover{color:var(--sky-ink)}
.navlinks a.active{font-weight:700}
.ndrop{position:relative}
.ndrop:hover::before,.ndrop:focus-within::before{content:'';position:fixed;top:var(--navh);left:0;right:0;height:var(--dh,185px);background:#ffffff;border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 18px 32px rgba(17,17,17,.07)}
.dlist{position:absolute;top:100%;left:20px;padding:7px 0 30px;display:none;flex-direction:column;min-width:230px}
.ndrop:hover .dlist,.ndrop:focus-within .dlist{display:flex}
.dlist a{color:var(--ink);font-size:15.6px;letter-spacing:.01em;font-weight:500;line-height:1.66;padding:3.5px 0;white-space:nowrap}
.dlist a:hover,.dlist a[aria-current=page]{color:var(--sky-ink)}
.navright{display:flex;gap:12px;align-items:center}
.cta{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(17,17,17,.16);background:#ffffff;color:var(--ink);font-size:14px;font-weight:700;letter-spacing:0;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.cta:hover{border-color:var(--ink)}
.cta-signup{background:var(--sky-ink);border-color:var(--sky-ink);color:#ffffff}
.cta-signup:hover{background:#2b6286;border-color:#2b6286;color:#ffffff}
.sbtn,.burger{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--ink);transition:background .2s}
.nav-round{border-radius:50%}
.sbtn:hover,.burger:hover,.sbtn[aria-expanded=true],.burger[aria-expanded=true]{background:rgba(17,17,17,.06)}
.burger{display:none}
.spanel{position:fixed;top:var(--navh);left:0;right:0;z-index:98;background:var(--canvas);border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 22px 40px rgba(17,17,17,.12);padding:36px 5% 44px;display:none}
.spanel.open{display:block}
.spanel form{max-width:702px;margin:0 auto;display:flex;align-items:center;gap:12px;background:#ffffff;border-radius:16px;box-shadow:var(--shadow-card);padding:0 20px;height:64px}
.spanel form:focus-within{box-shadow:0 0 0 2px var(--sky-ink),var(--shadow-card)}
.spanel form>svg{color:var(--sky-ink);flex:none}
.spanel input{flex:1;min-width:0;background:transparent;border:0;outline:none;font:inherit;font-size:22px;font-weight:500;color:var(--ink)}
.spanel input::placeholder{color:var(--text-caption)}
.spanel-res{max-width:702px;margin:14px auto 0;max-height:calc(100vh - var(--navh) - 180px);overflow-y:auto;background:#ffffff;border-radius:16px;box-shadow:var(--shadow-card);padding:4px 20px 16px}
.spanel-all{margin-top:12px;font-size:14px}
.spanel-all a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:3px}
/* Reduced header (/register): the logo and Log in, nothing that pulls away from the task. */
.nav-reduced .navin{gap:16px}

/* ---------- search results (/search, nav panel, /resources; src/scripts/search.ts) ---------- */
.sr-list{list-style:none;display:grid;gap:0}
.sr-list li{border-bottom:1px solid rgba(17,17,17,.08)}
.sr-list li:last-child{border-bottom:0}
.sr-list a{display:grid;gap:3px;padding:14px 0}
.sr-list a:hover .sr-title{color:var(--sky-ink)}
.sr-title{font-weight:700;font-size:18px;line-height:1.35;color:var(--ink);transition:color .2s}
.sr-section{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-ink)}
.sr-excerpt{font-size:15px;line-height:1.55;color:var(--text-body)}
.sr-excerpt mark{background:#e3eef6;color:var(--ink);padding:0 2px;border-radius:2px}
.sr-none{padding:14px 0;font-size:14.5px;color:var(--text-body)}
/* the phone menu: the canvas, the sections as groups, the two pills at the end */
.mmenu{display:none;background:var(--canvas);position:fixed;top:var(--navh);left:0;right:0;z-index:97;border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 22px 40px rgba(17,17,17,.12);max-height:calc(100dvh - var(--navh));overflow-y:auto;padding:8px 0 24px}
.mmenu.open{display:block}
.mmenu a{display:flex;align-items:center;min-height:44px;padding:8px 24px;font-weight:700;font-size:15px;color:var(--ink)}
.mmenu a.sub{min-height:40px;padding:6px 24px 6px 40px;font-weight:500;font-size:14.5px;color:var(--text-body)}
.mmenu a:hover,.mmenu a[aria-current=page]{color:var(--sky-ink)}
.mmenu-act{display:flex;gap:10px;padding:18px 24px 0;margin-top:10px;border-top:1px solid rgba(17,17,17,.08)}
.mmenu-act a.cta{flex:1;min-height:48px;height:auto;padding:0 18px;justify-content:center}
.mmenu-act a.cta-signup{color:#ffffff}
.mmenu-act a.cta-signup:hover{color:#ffffff}
@media(min-width:1280px) and (max-width:1400px){.navlinks>div>a{padding:0 12px}.navin{gap:24px}.navlinks{margin-left:-12px}.dlist{left:12px}}
@media(max-width:1279px){.navlinks,.navdivider{display:none}.nav-logo img{height:22px}.navin{gap:8px}.navright{gap:6px}.cta{height:40px;padding:0 16px;font-size:13.5px}.burger{display:grid;margin-right:-10px}.spanel{padding:20px 16px 28px}.spanel form{height:56px;padding:0 16px}.spanel input{font-size:18px}}
@media(max-width:480px){.nav:not(.nav-reduced) .cta-login{display:none}}

/* ---------- sign-up band (SignupBand, V4): the dark rounded panel of the home and
   /educational close; the invitation on the left, the sign-up on a white card ---------- */
.band4{padding-block:clamp(24px,3vw,48px) clamp(56px,7vw,104px)}
.band4-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.band4-copy,.band4-card{position:relative;z-index:1}
.band4-copy h2{font-size:clamp(30px,3.2vw,46px);font-weight:700;line-height:1.08;letter-spacing:-.03em;max-width:16ch}
.band4-copy p:not(.eyebrow4){margin-top:16px;max-width:44ch;font-size:17px;line-height:1.6}
.band4-card .signup{max-width:none}
.band4-card .sso-google{background:#111111;color:#ffffff;border-color:#111111}
.band4-card .sso-google:hover{background:#2c2c2c}
.band4-card .sig-rule::before{display:none}
.band4-obj-a{width:72px;right:4%;top:8%}
.band4-obj-b{width:52px;left:46%;bottom:10%}
/* the 3D family's objects without script (Obj3D): decorative, a slow float, still on reduced motion */
.obj4{display:block;position:absolute;z-index:0;pointer-events:none}
.obj4>span{display:block;width:100%;aspect-ratio:var(--oar,1);background-image:var(--oimg);background-position:center;background-size:contain;background-repeat:no-repeat}
@media(prefers-reduced-motion:no-preference){.obj4>span{animation:obj4-float var(--odur,9s) ease-in-out var(--odelay,0s) infinite}}
@keyframes obj4-float{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-10px,0) rotate(4deg)}}
/* V18 (CEO: less clay, less candy): every floating 3D object site-wide (Float3D kind obj, Obj3D) is graded like the V18
   heroes: ~20% less colour, a touch more contrast; the peach ones (torus, star, pebble: the warm accent) keep most of it */
.f3d-obj img,.obj4>span{filter:saturate(.8) contrast(1.04)}
.f3d-obj[data-tone=peach] img,.obj4[data-tone=peach]>span{filter:saturate(.94) contrast(1.04)}
@media(max-width:1000px){.band4-panel{grid-template-columns:1fr}.band4-panel .obj4{display:none}}

/* ---------- direction helpers: dark art sections, gradient numbers ---------- */
.s-dark{background:var(--dark);color:var(--on-ink)}
.s-dark h1,.s-dark h2,.s-dark h3{color:var(--white)}
.s-dark p,.s-dark .lead{color:var(--on-ink)}
.s-dark a:not(.btn){color:var(--white);text-decoration-color:var(--rose)}
.s-dark .btn-outline{border-color:rgba(255,255,255,.5);color:var(--white)}
.s-dark .btn-outline:hover{background:var(--white);color:var(--ink)}
/* Outcome numbers in the brand gradient (brand book "stat numbers"); large text only. */
.num-grad{background:var(--grad-cta-a11y);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.s-dark .num-grad{background:linear-gradient(90deg,var(--rose),var(--sky));-webkit-background-clip:text;background-clip:text}

/* ---------- footer (the live footer's content; V4: a dark rounded sheet with the panel's
   glow, labels in light sky, round social buttons) ---------- */
.footer{position:relative;isolation:isolate;overflow:hidden;background:#1b1a20;color:#f4f4f4;padding:80px 0 64px;font-size:14px;border-radius:var(--r-card) var(--r-card) 0 0}
.fbrand{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-bottom:40px;margin-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
.fbrand-logo{display:flex;align-items:center;min-height:44px}
.fbrand-logo img{height:30px;width:auto;filter:invert(1)}
.fbrand .pill{min-height:44px;padding:10px 22px;font-size:14px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:38px}
.fcol{display:flex;flex-direction:column;gap:7px;align-items:flex-start;line-height:1.5}
.fcol h2{font-size:12px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:#9fcbe6;font-weight:700;margin-bottom:12px}
.fcol a,.fcol span,.fcol button{color:#d4d4da;font-weight:400;background:none;border:0;cursor:pointer;text-align:left;font-size:14.5px}
.fcol a:hover,.fcol button:hover{color:var(--white)}
.fcol .copy{font-size:13.5px;color:#a9a9b3;margin-top:8px}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{display:grid;place-items:center;width:44px;height:44px;background:rgba(255,255,255,.08);color:#f4f4f4;transition:background .2s}
.socials .social-round{border-radius:50%}
.socials a:hover{background:rgba(255,255,255,.18)}
.socials svg{width:20px;height:20px}
/* The footer's one italic (the work's title in the wall label) would fetch the italic font file
   on every page, ahead of the first view's picture. It turns italic a beat after the page has
   loaded (html.loaded, Shell.astro); pages with italics of their own load the file as before. */
.footer .wall-label em{font-style:normal}
html.loaded .footer .wall-label em{font-style:italic}

/* ---------- staging notice on pages still waiting for their migration week ---------- */
.migrate{margin:36px 0 0;padding:16px 20px;border:1px dashed rgba(17,17,17,.2);border-radius:var(--r-inner);font-size:var(--fs-small);color:var(--text-caption);max-width:720px}
.migrate a{color:var(--ink);font-weight:600;text-decoration:underline}

/* ---------- content templates, V4 (docs/V5_BRIEF.md section 4): a header on the canvas with
   a soft glow (breadcrumbs, eyebrow, the h1, two-tone where the title has a natural second
   half), the long-form body on a white rounded sheet at a reading measure, side cards for the
   KB navigation and the facts, index pages as card grids ---------- */
.tpl-head{position:relative;isolation:isolate;padding-block:clamp(32px,4.5vw,64px) clamp(28px,3vw,44px)}
.tpl-head .eyebrow4{margin:18px 0 12px}
.tpl-h1{font-size:clamp(36px,4vw,58px);font-weight:800;line-height:1.06;letter-spacing:-.035em;max-width:22ch}
.tpl-lead{margin-top:18px;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--text-body);max-width:58ch}
/* the white sheet a long text sits on */
.sheet4{background:#ffffff;border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:clamp(24px,4.6vw,64px)}
.sheet4>.lead:first-child,.sheet4>.mbody:first-child>p:first-child{font-size:clamp(18px,1.45vw,21px);line-height:1.6;color:var(--ink)}
.sheet4 .lead{max-width:none;margin-bottom:1.2em}
.tpl-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,3vw,40px)}
@media(max-width:640px){.sheet4{padding:24px 20px 28px;border-radius:var(--r-inner)}}

/* breadcrumbs: small, quiet, the current page last (and cut short on phones) */
.crumbs{font-size:13.5px;line-height:1.5;color:var(--text-caption)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.crumbs li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.crumbs li+li::before{content:'';width:6px;height:6px;border-top:1.5px solid #9a9aa2;border-right:1.5px solid #9a9aa2;transform:rotate(45deg);flex:none}
.crumbs a{color:var(--text-body);font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.crumbs a:hover{text-decoration-color:var(--sky)}
.crumbs [aria-current=page]{color:var(--text-caption)}
@media(max-width:640px){.crumbs li:last-child{max-width:100%}.crumbs [aria-current=page]{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* ---------- Sales template (the V4 hero; ArtHero pages keep theirs) ---------- */
.s-hero{position:relative;isolation:isolate;padding-block:clamp(48px,6.5vw,104px) clamp(40px,5vw,72px)}
.s-hero .crumbs{margin-bottom:22px}
.s-hero h1{font-size:clamp(40px,5vw,72px);font-weight:800;line-height:1.02;letter-spacing:-.035em;max-width:18ch}
.s-hero .lead{margin-top:20px;font-size:clamp(18px,1.5vw,21px);line-height:1.55;max-width:52ch}
.s-hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* Sections are editorial by default; .sp-compare / .sp-utility tighten them. No automatic
   divider between adjacent sections: rules belong inside comparisons only (ROUND3). */
.s-section{padding:var(--sp-editorial) 0}
.s-section.sp-compare{padding:var(--sp-compare) 0}
.s-section.sp-utility{padding:var(--sp-utility) 0}
.s-section h2{max-width:var(--ms-h2);margin-bottom:16px}
.s-section h3{max-width:var(--ms-h3)}
.s-section p{max-width:var(--prose)}
.s-section.s-first{padding-top:0}
.home .s-hero h1{font-size:var(--fs-display)}

/* ---------- Help template (KB, FAQ, course, legal, utility): the header, then the KB card
   beside the sheet; the card goes under the answer on phones ---------- */
.h-layout{display:grid;grid-template-columns:276px minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start;padding-bottom:clamp(56px,7vw,104px)}
.h-layout.h-noside{grid-template-columns:minmax(0,1fr);max-width:920px}
.h-side{position:sticky;top:calc(var(--navh) + 20px);max-height:calc(100vh - var(--navh) - 40px);overflow-y:auto;overscroll-behavior:contain;font-size:14.5px;line-height:1.45;padding:22px 16px 22px 20px;scrollbar-width:thin;scrollbar-color:#d0d0d6 transparent}
.h-side h2{font-size:12px;font-weight:700;line-height:1.35;text-transform:uppercase;letter-spacing:.14em;color:var(--sky-ink);margin:0 0 12px}
.h-side ul{list-style:none;display:grid;gap:2px}
.h-side h3{font-size:14px;font-weight:700;line-height:1.35;letter-spacing:0;color:var(--ink);margin:18px 0 6px}
.h-side h3:first-of-type{margin-top:0}
.h-side a{display:block;padding:6px 10px;margin-left:-10px;border-radius:10px;color:var(--text-body);transition:background .2s,color .2s}
.h-side a:hover{background:var(--canvas);color:var(--ink)}
.h-side a[aria-current=page]{background:#e8f1f7;color:var(--ink);font-weight:700}
.h-main{min-width:0}
.h-main>.sheet4>h2:first-child{margin-top:0}
.h-gap{display:block;height:14px}
.h-back{display:block;margin-top:20px;padding:20px 24px;border-radius:var(--r-inner);background:#e8f1f7;font-size:15.5px;line-height:1.55;color:var(--text-body)}
.h-back a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:4px}
.h-back a:hover{color:var(--sky-ink)}
@media(max-width:960px){
  .h-layout{grid-template-columns:1fr}
  .h-side{order:2;position:static;max-height:none;overflow:visible}
}

/* ---------- Article template (blog): one centred reading column ---------- */
.a-col{max-width:820px;margin:0 auto}
.a-head .tpl-h1{max-width:24ch}
.a-meta{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:14.5px;line-height:1.45;color:var(--text-caption)}
.a-meta strong{color:var(--ink);font-weight:700}
.a-avatar{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:#e8f1f7;color:var(--sky-ink);font-size:15px;font-weight:800;letter-spacing:.02em}
.a-body{max-width:820px;margin:0 auto}
.a-body .lead{max-width:none}
.a-wrap{padding-bottom:clamp(40px,5vw,72px)}

/* ---------- Story template (success stories, exhibitions, open calls): media first, then
   the story on the sheet and the facts on a card beside it ---------- */
.st-media{margin-bottom:clamp(20px,2.4vw,32px)}
.st-media>*{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-card);background:#1b1a20}
.st-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(20px,2.4vw,32px);align-items:start;padding-bottom:clamp(56px,7vw,104px)}
.st-body.st-nofacts{grid-template-columns:minmax(0,1fr);max-width:920px;margin:0 auto}
.st-col{max-width:920px;margin:0 auto}
.st-body:not(.st-nofacts):has(>:only-child){grid-template-columns:minmax(0,1fr)}
.st-facts{position:sticky;top:calc(var(--navh) + 20px);font-size:15.5px;line-height:1.5;color:var(--text-body)}
.st-facts dl{display:grid;gap:4px}
.st-facts dt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--sky-ink);margin-top:14px}
.st-facts dt:first-child{margin-top:0}
.st-facts dd{color:var(--ink);font-weight:600}
.st-facts .pill{width:100%;margin-top:22px}
@media(max-width:960px){.st-body{grid-template-columns:1fr}.st-facts{position:static}}

/* ---------- index pages (Index layout): the centred hero, then card grids ---------- */
.ix-hero{position:relative;isolation:isolate;text-align:center;padding-block:clamp(48px,6.5vw,104px) clamp(36px,4.5vw,64px)}
.ix-hero .crumbs ol{justify-content:center}
.ix-hero .eyebrow4{margin:22px 0 14px}
.ix-hero h1{font-size:clamp(42px,5.4vw,80px);font-weight:800;line-height:1.02;letter-spacing:-.04em;max-width:16ch;margin:0 auto}
.ix-hero .ix-lead{margin:20px auto 0;font-size:clamp(17px,1.45vw,21px);line-height:1.6;color:var(--text-body);max-width:56ch}
.ix-hero .actions4{justify-content:center;margin-top:30px}
.ix-case{text-transform:lowercase}
.ix-case::first-letter{text-transform:uppercase}
.ix-obj{position:absolute;z-index:-1;pointer-events:none}
.ix-obj-a{width:clamp(56px,6vw,96px);left:max(3%,calc(50% - 600px));top:24%}
.ix-obj-b{width:clamp(44px,4.6vw,72px);right:max(4%,calc(50% - 580px));top:14%}
.ix-obj-c{width:clamp(40px,4vw,64px);right:max(9%,calc(50% - 480px));bottom:4%}
/* phones: the hero objects stay out (as backgrounds they would load ahead of the first card, the phone's LCP) */
@media(max-width:760px){.ix-obj{display:none}}
.ix-sec{padding-block:clamp(16px,2vw,24px) clamp(56px,7vw,104px)}
.ix-sec+.ix-sec{padding-top:0}
.ix-sec .sec4-head{margin-bottom:clamp(24px,3vw,40px)}
.ix-sec .sec4-head h2{font-size:clamp(26px,2.6vw,38px)}
.ix-prose{max-width:860px;margin:0 auto}
.ix-cta{max-width:860px;margin:0 auto;text-align:center;padding:clamp(32px,4.4vw,64px)}
.ix-cta .mbody{max-width:none}
.ix-cta .mbody h2{margin-top:0}
.ix-cta .mbody p:has(> .btn){justify-content:center}
/* the Sales template's body on a sheet (Discover how-tos) */
.s-sheet,.s-sheet+.tpl-foot{max-width:920px}
/* small listing (catch-all placeholders): cards */
.list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:8px 0 40px}
.list a{display:block;height:100%;padding:20px 22px;background:#ffffff;border-radius:var(--r-card);box-shadow:var(--shadow-card);transition:box-shadow .25s}
.list a:hover{box-shadow:var(--shadow-lift)}
.list h3{font-size:17px;font-weight:700;line-height:1.35;letter-spacing:0}
.list p{margin-top:6px;font-size:var(--fs-caption);line-height:1.5;color:var(--text-caption);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- sign-up (SignupForm) ---------- */
/* Google, Apple and email carry equal weight (ROUND3 "Sign-up buttons"): white pills (V4),
   same height and type; the provider marks are the only colour. A thin signature-gradient
   rule above the group gives it the Artivive identity (.sig-rule: a rule, not a surface). */
.signup{display:grid;gap:10px;width:100%;max-width:420px}
.sig-rule::before{content:'';display:block;height:3px;border-radius:2px;background:var(--grad-signature);margin-bottom:8px}
.sso,.signup-email summary{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 18px;border:1.5px solid rgba(17,17,17,.18);border-radius:999px;background:var(--white);color:var(--ink);font-weight:600;font-size:15px;cursor:pointer;transition:background .15s,border-color .15s}
.sso:hover,.signup-email summary:hover{border-color:var(--ink)}
.signup-email summary{list-style:none}
.signup-email summary::-webkit-details-marker{display:none}
.signup-email[open] summary{border-color:transparent;background:none;justify-content:flex-start;height:auto;padding:14px 0 4px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);cursor:default}
/* The email form is Joachim's iframe; its own social buttons fill its first 152 px, so they
   are cropped away. Its error bubbles are absolutely positioned and reach 722 px at 390 px
   with every field wrong and a server message under the button (tested 2026-10-09, also at
   200% zoom); the frame keeps about 100 px spare below that for two-line messages. */
.signup-frame{overflow:hidden;height:668px;margin:0 -4px}
.signup-frame iframe{display:block;width:100%;min-width:312px;height:820px;margin-top:-152px;border:0}
.signup-note{font-size:13px;color:var(--text-muted);margin-top:6px}
.signup-more{font-size:13px;line-height:1.55;color:var(--text-muted);margin-top:4px;text-wrap:balance}
.signup-k{white-space:nowrap}
.signup-dot{margin-right:.45em;color:var(--text-caption)}
.signup-more a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------- /register: styles live in src/pages/register.astro ---------- */

/* ---------- /thanks-for-registering ---------- */
.ty{padding:64px 0 48px;background:var(--light-grey)}
.ty h1{margin:10px 0 18px;max-width:var(--ms-h1)}
.ty .lead{margin-bottom:26px}
.ty-hint{margin-top:16px;font-size:14px;color:var(--text-muted)}
.ty-hint a,.ty-more a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ty-first{padding:64px 0}
.ty-first h2,.ty-app h2{margin-bottom:24px;max-width:var(--ms-h2)}
.ty-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:start}
.ty-steps{list-style:none;counter-reset:s;display:grid;gap:22px}
.ty-steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;column-gap:6px}
.ty-steps li::before{content:counter(s);grid-row:span 2;font-size:28px;font-weight:800;line-height:1.2;color:var(--ink)}
.ty-steps h3{font-size:18px;font-weight:700;letter-spacing:0}
.ty-steps p{margin-top:4px;font-size:16px;color:var(--text-secondary)}
.ty-more{margin-top:28px;font-size:14px;color:var(--text-muted)}
.ty-video{margin:0}
.ty-video .yt,.ty-video iframe{display:block;position:relative;width:100%;aspect-ratio:16/9;border:0;overflow:hidden;background:var(--ink);cursor:pointer;padding:0}
.ty-video .yt img{width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;inset:0;margin:auto;width:68px;height:48px;border-radius:12px;background:rgba(17,17,17,.82);display:grid;place-items:center;color:#fff}
.ty-video .yt:hover .yt-play{background:#000}
.ty-video figcaption{margin-top:10px;font-size:13px;color:var(--text-muted)}
.ty-app{padding:0 0 88px}
.ty-app p{color:var(--text-secondary)}
.ty-stores{display:flex;gap:12px;margin-top:18px}
.ty-stores a{display:inline-flex;align-items:center;height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:var(--radius-sm);font-weight:600;font-size:14px}
.ty-stores a:hover{background:var(--ink);color:var(--white)}
@media(max-width:900px){.ty{padding:40px 0 36px}.ty-grid{grid-template-columns:1fr;gap:32px}.ty-first{padding:44px 0}}

/* ---------- 404: styles live in src/pages/404.astro ---------- */

/* ---------- consent (Klaro, restyled to the brand) ---------- */
.klaro{--green1:var(--ink);--green2:var(--text-secondary);--blue1:var(--sky);--font-family:var(--font-sans);--border-radius:6px;--button-text-color:#fff}
.klaro .cookie-notice:not(.cookie-modal-notice){background:var(--white)!important;color:var(--ink)!important;box-shadow:0 10px 40px rgba(17,17,17,.18)!important}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p,.klaro .cookie-notice .cn-body a{color:var(--ink)!important}
/* Klaro's grey decline button is 4.5:1 short of AA; same weight as accept, outlined. */
.klaro .cm-btn.cm-btn-decline,.klaro .cm-btn.cn-decline{background:var(--white)!important;color:var(--ink)!important;border:1px solid var(--ink)!important}

@media(max-width:640px){
  /* long button labels wrap instead of pushing past the gutter */
  .btn{white-space:normal;text-align:center}
  .s-hero{padding:44px 0 36px}
  .footer{padding:54px 0 46px}
}

/* ---------- reduced motion (ROUND3 "All pages" 6): no smooth scroll (see html above), no
   hover movement, no transitions; the artwork films hold still (ArtLoop) ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ---------- press kit (press.artivive.com), on top of the V4 system above ---------- */
:root{--font-sans:'Montserrat','Montserrat Fallback',system-ui,sans-serif}
body{overflow-x:clip}
.v4 main{font-size:16px}
.lnk{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:4px}
.lnk:hover{color:var(--sky-ink)}
.lnk.big{font-size:clamp(20px,1.8vw,26px)}
.sep{color:var(--text-caption);margin:0 .3em}
.note{color:var(--text-caption);font-size:15px;margin-top:12px}
.more{margin-top:28px}

/* the press kit's own sub-nav, under the www nav */
.ptabs{position:sticky;top:var(--navh);z-index:40;background:rgba(247,247,248,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(17,17,17,.07)}
.ptabs .w4{display:flex;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.ptabs .w4::-webkit-scrollbar{display:none}
.ptabs-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-ink);margin-right:10px;white-space:nowrap}
.ptabs a{flex:none;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--text-body);border:1.5px solid transparent;white-space:nowrap}
.ptabs a:hover{border-color:rgba(17,17,17,.16)}
.ptabs a[aria-current=page]{background:var(--ink);color:#fff}

/* hero */
.phero{position:relative;isolation:isolate;padding-block:clamp(40px,6vw,96px) clamp(16px,2vw,32px)}
.phero .glow4{left:50%;right:auto;width:100vw;transform:translateX(-50%);top:-140px}
.phero-h{font-size:clamp(38px,5vw,72px);font-weight:800;line-height:1.02;letter-spacing:-.04em;max-width:16ch}
.phero-lead{margin-top:20px;font-size:clamp(17px,1.45vw,21px);line-height:1.55;max-width:56ch;color:var(--text-body)}
.phero-act{margin-top:28px}

/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.fact{padding:22px 24px}
.fact-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-ink)}
.fact-v{margin-top:8px;font-size:clamp(20px,1.7vw,26px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.fact-s{margin-top:4px;font-size:14.5px;color:var(--text-caption)}

/* boilerplate */
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:start}
.split h2{font-size:clamp(30px,3.2vw,46px)}
.prose-p p{font-size:16.5px;line-height:1.7;color:var(--text-body)}
.prose-p p+p{margin-top:1em}
.prose-p a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.prose-p a:hover{color:var(--sky-ink)}
.prose-p strong{color:var(--ink)}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* people */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.person figcaption{display:grid;gap:2px;padding:16px 20px 20px}
.person strong{font-size:18px;color:var(--ink)}
.person span{color:var(--text-caption);font-size:14.5px}
.person a{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--sky);text-underline-offset:3px}

/* releases, coverage */
.rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.rel,.cov{display:block;transition:box-shadow .25s,transform .25s}
a.rel:hover,a.cov:hover,a.aw:hover{box-shadow:var(--shadow-lift)}
@media(prefers-reduced-motion:no-preference){a.rel:hover,a.cov:hover,a.aw:hover{transform:translateY(-3px)}}
.rel-meta{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-ink)}
.rel h3,.cov h3{margin-top:10px;font-size:18px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.cov-x{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--text-caption);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.yjump{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.yjump a{padding:6px 14px;border-radius:999px;background:#fff;border:1.5px solid rgba(17,17,17,.12);font-size:14px;font-weight:600}
.yjump a:hover{border-color:var(--ink)}
.ysec{padding-top:24px;scroll-margin-top:calc(var(--navh) + 64px)}
.yh{font-size:clamp(26px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;margin-bottom:16px}
.covs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding-bottom:24px}
.cov[hidden],.ysec[hidden],.yjump a[hidden]{display:none}
.cov-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-ink)}
.badge{padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.08em;color:var(--ink);background:rgba(17,17,17,.06)}
.b-tv,.b-radio{background:var(--peach)}
.b-podcast,.b-video{background:var(--lilac)}
.cov-m .lang{margin-left:auto;padding:2px 7px;border-radius:6px;border:1.5px solid rgba(17,17,17,.14);color:var(--text-caption);font-size:11px}
.cov-o{margin-top:6px;font-size:14px;font-weight:600;color:var(--text-caption)}
.cov-o .arch{font-weight:500;font-style:italic}
.cov h3 a{color:inherit}
.cov h3 a:hover{text-decoration:underline;text-decoration-color:var(--sky);text-underline-offset:3px}
.cov-also{margin-top:12px;font-size:14.5px}
.cfilter{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.cfilter button{font:inherit;font-size:14px;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;background:#fff;color:var(--ink);border:1.5px solid rgba(17,17,17,.12)}
.cfilter button span{font-weight:500;color:var(--text-caption);margin-left:2px}
.cfilter button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cfilter button[aria-pressed="true"] span{color:rgba(255,255,255,.75)}
.cfilter button:focus-visible{outline:2px solid var(--sky-ink);outline-offset:2px}
.featured{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;margin-bottom:28px}
.featured h2{margin:0}
.feat-list{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:0;padding:0}
.feat-list li{font-size:clamp(16px,1.5vw,19px);font-weight:800;letter-spacing:-.01em;color:var(--ink);opacity:.82}
.feat-head{margin-bottom:12px}
.prts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.prt h3{margin-top:10px;font-size:18px;line-height:1.35;color:var(--ink)}
.prt h3 a{color:inherit}
.prt h3 a:hover{text-decoration:underline;text-decoration-color:var(--sky);text-underline-offset:3px}
@media(max-width:640px){.prts{grid-template-columns:1fr}}

/* a press release */
.prel{max-width:860px;padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,96px)}
.prel .eyebrow4{margin-top:24px}
.prel-h{font-size:clamp(28px,3.4vw,46px);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-bottom:28px}

/* awards */
.awards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.aw{display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.aw-img{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;padding:18px;border-bottom:1px solid rgba(17,17,17,.06)}
.aw-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.aw-b{padding:16px 20px 20px}
.aw-b h3{margin-top:8px;font-size:16.5px;line-height:1.35;color:var(--ink)}

/* images */
.gsec{padding-top:28px}
.gh{font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;padding-bottom:20px}
.ph{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ph figcaption{display:grid;gap:8px;padding:14px 18px 18px;font-size:14px;line-height:1.45;color:var(--text-caption)}
.ph figcaption a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--sky);text-decoration-thickness:2px;text-underline-offset:3px}

/* logos, downloads */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.logo-img{aspect-ratio:16/9;display:grid;place-items:center;padding:28px;background:#fff;border-bottom:1px solid rgba(17,17,17,.06)}
.logo.dark .logo-img{background:#1b1a20}
.logo-img img{max-height:100%;max-width:80%;width:auto;height:auto}
.logo figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 20px 20px}
.logo strong{color:var(--ink);font-size:15.5px}
.logo .pill{min-height:40px;padding:8px 18px;font-size:13.5px}
.dl{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:760px}
.dl h3{font-size:19px;color:var(--ink)}

/* videos */
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.vcard img{width:100%;aspect-ratio:4/5;object-fit:cover}
.vcard-b{padding:16px 20px 20px}
.vcard h3{font-size:16.5px;line-height:1.35}
.vcard p{margin-top:10px;font-size:14.5px}

/* contact */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.contact h2{font-size:clamp(26px,2.4vw,34px);margin-bottom:16px}
.addr{margin-top:16px;color:var(--text-body);line-height:1.6}
.linklist{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.linklist a{display:inline-flex;padding:7px 14px;border-radius:999px;border:1.5px solid rgba(17,17,17,.12);font-weight:600;font-size:14px}
.linklist a:hover{border-color:var(--ink)}
@media(max-width:640px){.rels,.covs,.contact{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr);gap:12px}.ph figcaption{padding:10px 12px 14px;font-size:12.5px}}
/* the soft colour glows (artivive-v19 Glow.astro) */
.glow4{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.glow4-hero{background:
 radial-gradient(closest-side,rgba(221,166,194,.42),rgba(221,166,194,.22) 45%,rgba(221,166,194,.07) 75%,rgba(221,166,194,0)) -12% -18%/62% 78% no-repeat,
 radial-gradient(closest-side,rgba(95,162,201,.30),rgba(95,162,201,.15) 45%,rgba(95,162,201,.05) 75%,rgba(95,162,201,0)) 108% 18%/58% 80% no-repeat,
 radial-gradient(closest-side,rgba(185,166,217,.30),rgba(185,166,217,.14) 45%,rgba(185,166,217,.04) 75%,rgba(185,166,217,0)) 70% 112%/60% 70% no-repeat}
.glow4-panel{background:
 radial-gradient(closest-side,rgba(221,166,194,.30),rgba(221,166,194,.12) 50%,rgba(221,166,194,0)) 100% 0%/60% 90% no-repeat,
 radial-gradient(closest-side,rgba(95,162,201,.26),rgba(95,162,201,.10) 50%,rgba(95,162,201,0)) 0% 100%/60% 90% no-repeat}
@media(max-width:640px){.facts{grid-template-columns:repeat(2,1fr);gap:12px}.fact{padding:16px}.fact-v{font-size:18px}.ptabs-label{display:none}}

/* About: short and long boilerplate in one sheet */
.prose-p p.eyebrow4 { font-size: 12px; line-height: 1.35; color: var(--sky-ink); margin: 0 0 10px; }
.prose-p p.eyebrow4.about-long { margin-top: 32px; }