@charset "UTF-8";
/* NDA ABOUT — page-specific styles only (src/_includes/about-page.njk).
   Tokens, .wrap, .reveal, .section-h, .pill-link, .btn-cta and #cta live in
   base.css / theme.css; the compact hero lives in aurora.css. */

/* ── SECTION SHELL ── */
.ab-section{padding:104px 0;background:var(--bg);position:relative}
.ab-section:nth-of-type(even){background:linear-gradient(180deg,var(--s1) 0%,var(--bg) 100%)}
.ab-head{margin-bottom:48px}
.ab-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ab-head--row>div{max-width:640px}
.ab-eyebrow{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:16px}
.ab-lede{font-size:16px;line-height:1.75;color:var(--mid);max-width:440px}
.ab-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim);flex-shrink:0}
.ab-mini-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}

/* unit colour hooks */
.ab-unit--growth,.tl-node--growth,.tl-chip--growth,.ab-card--growth{--u:var(--growth)}
.ab-unit--innovation,.tl-node--innovation,.tl-chip--innovation,.ab-card--innovation{--u:var(--innovation)}
.tl-node--company,.tl-chip--company{--u:var(--mid)}

/* ── STORY ── */
.ab-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.ab-split .ab-head{margin-bottom:0;position:sticky;top:calc(var(--nav-offset,112px) + 24px)}
.ab-prose{display:flex;flex-direction:column;gap:20px}
.ab-prose p{font-size:17px;line-height:1.85;color:var(--mid)}
.ab-prose p:first-child{font-size:19px;color:var(--text)}

/* ── MISSION + VISION ── */
.ab-mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ab-mv-card{position:relative;padding:44px 40px;border:1px solid var(--b2);border-radius:18px;background:linear-gradient(160deg,rgba(34,182,230,.07) 0%,transparent 55%),var(--graph);overflow:hidden}
.ab-mv-card--vision{background:linear-gradient(160deg,rgba(232,91,158,.07) 0%,transparent 55%),var(--graph)}
.ab-mv-statement{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.3;color:var(--n0);margin-bottom:20px}
.ab-mv-support{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--mid)}

/* ── PRINCIPLES ── */
.ab-principle-list{list-style:none;border-top:1px solid var(--b2)}
.ab-principle{display:grid;grid-template-columns:72px minmax(0,4fr) minmax(0,6fr);gap:32px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--b1)}
.ab-principle-num{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--dim)}
.ab-principle-title{font-family:var(--display);font-size:clamp(19px,1.9vw,24px);font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--n0)}
.ab-principle-body{font-size:16px;line-height:1.8;color:var(--mid)}

/* ── UNITS ── */
.ab-unit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ab-unit{display:flex;flex-direction:column;gap:20px;padding:40px;border:1px solid var(--b2);border-top:3px solid var(--u);border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--u) 9%,transparent) 0%,transparent 45%),var(--graph)}
.ab-unit-tag{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;color:var(--n0)}
.ab-unit-tag .ab-dot{width:10px;height:10px;background:var(--u)}
.ab-unit-body{font-size:16px;line-height:1.8;color:var(--mid)}
.ab-unit-recent ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ab-unit-recent a{display:inline-block;font-size:14px;color:var(--text);padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--b1);transition:border-color .15s,color .15s}
.ab-unit-recent a:hover,.ab-unit-recent a:focus-visible{border-color:var(--u);color:var(--n0)}
.ab-unit-link{align-self:flex-start;margin-top:auto}

/* ── FOUNDERS ── */
.ab-founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ab-founder{display:flex;flex-direction:column;border:1px solid var(--b2);border-radius:18px;overflow:hidden;background:var(--graph)}
.ab-founder-photo{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--s2)}
.ab-founder-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%;max-width:100%}
.ab-founder-caption{position:absolute;left:14px;bottom:14px;font-size:12px;font-weight:600;letter-spacing:.06em;color:#fff;background:rgba(7,10,17,.62);padding:5px 10px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ab-founder-body{display:flex;flex-direction:column;gap:12px;padding:32px 32px 36px;flex:1}
.ab-founder-name{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.03em;color:var(--n0)}
.ab-founder-role{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);line-height:1.5}
.ab-founder-bio{font-size:16px;line-height:1.8;color:var(--mid);margin-bottom:8px}
.ab-founder-bio em{font-family:var(--serif);color:var(--text)}
.ab-founder .pill-link{align-self:flex-start;margin-top:auto;white-space:normal;line-height:1.3}

/* ── TIMELINE ──
   Three layers over one set of markup:
   1. Base (no JS, and every width <=860px): a plain vertical list. Every
      milestone is readable, in order, with its link — this is the fallback.
   2. .tl-anim (JS + narrow): the same list, milestones rise in on scroll.
   3. .tl-rail (JS + >=861px): ONE ROW. A time-scaled year axis with a comb of
      unit-coloured nodes; the active milestone's card floats above the axis and
      is tied to its node by a lead line. Every rail position is written by
      about.js as a transform on an absolutely positioned element, so scrubbing
      never triggers layout. */
.tl-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.tl-controls[hidden],.tl-nav[hidden],.tl-node[hidden]{display:none!important}
.tl-filters{display:flex;flex-wrap:wrap;gap:8px}
.tl-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--b2);background:rgba(255,255,255,.03);color:var(--mid);font:600 14px/1 var(--body);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tl-chip .ab-dot{background:var(--u)}
.tl-chip:hover{border-color:rgba(255,255,255,.3);color:var(--n0)}
.tl-chip[aria-pressed="true"]{background:var(--n0);border-color:var(--n0);color:var(--bg)}
.tl-count{font-size:14px;color:var(--dim)}

.tl-hint{font-size:13px;color:var(--dim)}
.tlx{position:relative}
.tlx-ghost,.tlx-axis,.tlx-lead,.tlx-years,.tlx-stem{display:none}

/* 1 · vertical list — the no-JS and small-screen shape */
.tl-track{list-style:none;position:relative;display:flex;flex-direction:column;gap:14px;padding-left:34px}
.tl-track::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--growth),var(--b2) 50%,var(--innovation))}
.tl-node{position:relative}
/* year grouping gives the list its own rhythm rather than 28 even rows */
.tl-node.is-year-start{margin-top:16px}
.tl-track>.tl-node:first-child{margin-top:0}
.tl-dot{position:absolute;left:-30px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--u);box-shadow:0 0 0 4px var(--bg)}
.tl-node.is-year-start .tl-dot{left:-32px;top:22px;width:16px;height:16px;box-shadow:0 0 0 4px var(--bg),0 0 0 6px color-mix(in srgb,var(--u) 40%,transparent)}
.tl-card{position:relative;height:100%;padding:20px 22px;border:1px solid var(--b1);border-radius:14px;background:var(--graph);transition:border-color .2s,transform .2s,background .2s}
.tl-node.has-link .tl-card:hover{border-color:color-mix(in srgb,var(--u) 55%,var(--b2));transform:translateY(-2px)}
/* A faded photograph behind a milestone: the linked entry's own hero, downscaled by
   `npm run images -- timeline-thumbs`. about.js sets --tl-bg only when the card comes
   into view, so until then this layer is empty and nothing is fetched. The text keeps a
   scrim under it, heaviest on the left where the copy sits. */
.tl-bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .5s ease}
.tl-card.bg-in>.tl-bg{opacity:1}
.tl-bg::before,.tl-bg::after{content:"";position:absolute;inset:0}
.tl-bg::before{background-image:var(--tl-bg);background-size:cover;background-position:center;opacity:.24;filter:saturate(.75);transition:opacity .2s}
.tl-bg::after{background:linear-gradient(105deg,var(--graph) 26%,color-mix(in srgb,var(--graph) 66%,transparent) 60%,color-mix(in srgb,var(--graph) 26%,transparent))}
.tl-card.has-bg>:not(.tl-bg){position:relative;z-index:1}
.tl-node.has-link .tl-card:hover>.tl-bg::before{opacity:.28}
/* In the rail the photograph moved to the backdrop behind the big year, so the card's
   own layer is switched off there — two copies of the same image, one behind the other,
   read as noise. The vertical list keeps it: there is no big year to sit behind. */
.tl-rail .tl-card>.tl-bg{display:none}
.tl-when{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:8px}
.tl-year{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--mid)}
.tl-node.is-year-start .tl-year{font-size:22px;color:var(--n0)}
.tl-month{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.tl-unit{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--u)}
.tl-node--company .tl-unit{color:var(--dim)}
.tl-title{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--n0);margin-bottom:6px}
.tl-title a{color:inherit}
.tl-title a::after{content:'';position:absolute;inset:0;border-radius:14px}
.tl-title a:focus-visible{outline:none}
.tl-title a:focus-visible::after{outline:2px solid var(--lime);outline-offset:3px}
.tl-text{font-size:15px;line-height:1.65;color:var(--mid)}
.tl-more{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--text)}

.tl-nav{display:none}

/* 2 · list entrance (JS only — never hide content the no-JS list must show) */
.tl-anim .tlx-item{opacity:0;transform:translate3d(0,16px,0);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.tl-anim .tlx-item.is-in{opacity:1;transform:none}
.tl-anim .tlx-item.is-ghost{display:none}

/* 3 · THE RAIL — one row, JS on, >=861px
   Geometry lives in these two vars so the axis, stems, lead line, year labels
   and the card baseline all stay locked together. */
.tl-rail .tlx{--tlx-axis:296px;--tlx-card-w:360px;position:relative;height:400px;margin-top:4px;
  overflow:hidden;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.tl-rail .tlx.is-dragging{cursor:grabbing}
.tl-rail .tlx-track{position:absolute;inset:0;display:block;padding:0;margin:0;gap:0;z-index:1}
.tl-rail .tlx-track::before{display:none}

.tl-rail .tlx-axis{display:block;position:absolute;left:0;right:0;top:var(--tlx-axis);height:1px;
  background:linear-gradient(90deg,transparent,var(--b2) 7%,var(--b2) 93%,transparent)}
/* The photograph for the active milestone, sitting in the rail's background behind the big
   year. It tracks the same slow drift as the ghost (about.js), so image and year move
   together and read as one layer. Masked on all four edges so it dissolves into the page
   instead of ending on a hard rectangle, and kept far below the text in contrast. */
/* The active milestone's photograph fills the whole timeline container — Jon, 2026-09-23:
   "The background image should be COVER in the timeline container, not floating behind the
   card". An earlier version was a masked panel that drifted with the big year, which read as
   a floating rectangle. It covers, it does not move, and a scrim keeps the rail, the year
   labels and the card readable on top of it. */
.tl-rail .tlx-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* No opacity gate and no fade-in to depend on. `--tl-bg` is unset until about.js paints the
   active milestone, so an empty layer draws nothing on its own — whereas an opacity that
   starts at 0 and transitions to 1 leaves the photograph invisible any time the transition
   does not run (a hidden tab, a reveal that has not fired, reduced motion). Correctness
   first; the change between milestones is soft because the image itself cross-fades. */
.tl-rail .tlx-bg::before{content:"";position:absolute;inset:0;background-image:var(--tl-bg);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.3;filter:saturate(.72);transition:background-image .45s ease}
/* Heaviest at the bottom, where the axis and the year labels sit. */
.tl-rail .tlx-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(9,13,20,.58) 0%,rgba(9,13,20,.5) 42%,rgba(9,13,20,.88) 100%)}
.tl-rail .tlx-ghost{display:block;position:absolute;left:0;top:2px;font-family:var(--display);font-size:132px;
  font-weight:700;letter-spacing:-.06em;line-height:1;color:var(--n0);opacity:.05;pointer-events:none;will-change:transform}
.tl-rail .tlx-lead{display:block;position:absolute;left:0;top:calc(var(--tlx-axis) - 44px);width:1px;height:44px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--u,var(--mid)) 55%,transparent),transparent);will-change:transform}
.tl-rail .tlx-years{display:block;position:absolute;left:0;right:0;top:calc(var(--tlx-axis) + 42px);height:18px}
.tl-rail .tlx-year{position:absolute;left:0;top:0;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.09em;color:var(--dim);white-space:nowrap;transition:opacity .2s ease;will-change:transform}
.tl-rail .tlx-year::before{content:'';position:absolute;left:50%;top:-13px;width:1px;height:9px;background:var(--b2)}

/* the comb: one node per milestone, colour = unit, side of the axis = unit */
.tl-rail .tlx-item{position:absolute;left:0;top:0;margin:0;width:0;height:100%;opacity:1;
  transition:opacity .3s ease;will-change:transform}
.tl-rail .tlx-item.is-ghost{opacity:.14}
.tl-rail .tlx-stem{display:block;position:absolute;left:-1px;width:2px;border-radius:2px}
.tl-rail .tl-node--growth .tlx-stem{top:calc(var(--tlx-axis) - 30px);height:30px;background:linear-gradient(180deg,transparent,var(--u))}
.tl-rail .tl-node--innovation .tlx-stem{top:var(--tlx-axis);height:30px;background:linear-gradient(0deg,transparent,var(--u))}
.tl-rail .tl-node--company .tlx-stem{top:calc(var(--tlx-axis) - 6px);height:12px;background:var(--u);opacity:.5}
/* .tlx-item keeps this at 3 classes so it outranks the list's
   `.tl-node.is-year-start .tl-dot`, which would otherwise pull 14 of the 28
   nodes off the axis and up to the list's marker position. */
.tl-rail .tlx-item .tl-dot{left:0;top:var(--tlx-axis);width:9px;height:9px;margin:0;box-shadow:none;
  transform:translate(-50%,-50%);will-change:transform}
/* the rail card shows one year size; the big year belongs to the list */
.tl-rail .tl-node.is-year-start .tl-year{font-size:17px;color:var(--n0)}
.tl-rail .tl-node--growth .tl-dot{top:calc(var(--tlx-axis) - 30px)}
.tl-rail .tl-node--innovation .tl-dot{top:calc(var(--tlx-axis) + 30px)}
.tl-rail .tlx-item.is-active .tl-dot{box-shadow:0 0 0 5px color-mix(in srgb,var(--u) 22%,transparent)}

/* the card: floats above the axis, bottom edge always on the same baseline */
.tl-rail .tlx-card{position:absolute;left:0;top:auto;bottom:calc(100% - var(--tlx-axis) + 44px);
  width:var(--tlx-card-w);height:auto;padding:18px 20px;border-left:2px solid var(--u);
  opacity:0;pointer-events:none;transition:opacity .26s ease;will-change:transform,opacity;
  /* Glass, so the photograph behind it stays visible instead of being boxed out. */
  z-index:2;background:rgba(13,18,28,.52);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);border-top:1px solid rgba(255,255,255,.1);
  border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0 14px 14px 0;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.tl-rail .tlx-item.is-active .tlx-card{opacity:1;pointer-events:auto}
.tl-rail .tlx-item.is-ghost .tlx-card{opacity:0}
.tl-rail .tlx-card:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.tl-rail.is-scrubbing .tlx-card{opacity:.28}
.tl-rail .tlx-card .tl-text{font-size:14.5px}
.tl-rail .tl-node.has-link .tl-card:hover{transform:none;border-color:var(--b1);border-left-color:var(--u)}

.tl-rail .tl-nav{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.tl-arrow{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1px solid var(--b2);background:rgba(255,255,255,.04);color:var(--n0);font-size:18px;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}
.tl-arrow:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.tl-arrow:disabled{opacity:.35;cursor:default}
.tl-progress{flex:1;min-width:80px;height:3px;border-radius:3px;background:var(--b2);overflow:hidden}
.tl-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--growth),var(--innovation));transform-origin:left center;transform:scaleX(.04)}
.tl-rail .tl-hint{flex:1 0 100%;order:2;text-align:center}

@media (prefers-reduced-motion:reduce){
  .tl-anim .tlx-item,.tl-rail .tlx-item,.tl-rail .tlx-card,.tl-rail .tlx-year,
  .tl-card,.tl-progress span,.ab-card,.tl-bg,.tl-bg::before,.tlx-bg{transition:none!important}
  .tl-anim .tlx-item{opacity:1;transform:none}
  .tl-node.has-link .tl-card:hover,.ab-card:hover{transform:none!important}
  .tl-rail.is-scrubbing .tlx-card{opacity:1}
}

/* ── PROOF ── */
.ab-proof-grid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--b1);border:1px solid var(--b1);border-radius:18px;overflow:hidden}
.ab-proof-tile{display:flex;flex-direction:column;gap:8px;padding:28px 24px;background:var(--graph)}
.ab-proof-value{font-family:var(--display);font-size:clamp(30px,3vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--n0);font-variant-numeric:tabular-nums}
.ab-proof-label{font-size:15px;line-height:1.55;color:var(--mid);flex:1}
.ab-proof-source{align-self:flex-start;font-size:13px;font-weight:600;color:var(--dim);border-bottom:1px solid var(--b2);padding-bottom:2px;transition:color .15s,border-color .15s}
.ab-proof-source:hover,.ab-proof-source:focus-visible{color:var(--n0);border-color:var(--n0)}

/* ── CARDS (highlights + featured) ── */
.ab-card-grid{list-style:none;display:grid;gap:20px}
.ab-card-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ab-card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ab-card-grid>li{display:flex}
.ab-card{display:flex;flex-direction:column;width:100%;border:1px solid var(--b1);border-radius:16px;overflow:hidden;background:var(--graph);transition:border-color .2s,transform .2s}
.ab-card:hover,.ab-card:focus-visible{border-color:var(--b2);transform:translateY(-3px)}
.ab-card-media{position:relative;aspect-ratio:16/10;background:linear-gradient(145deg,color-mix(in srgb,var(--u,var(--innovation)) 30%,var(--s2)) 0%,var(--s1) 100%);background-size:cover;background-repeat:no-repeat}
.ab-card-unit{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(7,10,17,.66);padding:5px 10px;border-radius:999px}
.ab-card-unit .ab-dot{background:var(--u)}
.ab-card-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.ab-card-meta{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.ab-card-title{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--n0)}
.ab-card-text{font-size:15px;line-height:1.6;color:var(--mid)}
.ab-card-link{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--text)}
.ab-subhead{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin:0 0 18px}
.ab-subhead-count{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--b2);color:var(--dim);letter-spacing:0}
.ab-card-grid+.ab-subhead{margin-top:48px}
.ab-reads .ab-card{background:linear-gradient(160deg,rgba(255,255,255,.03),transparent 60%),var(--graph)}

/* ── CTA (base.css #cta) ── */
#cta .btn-cta{white-space:nowrap}

/* ── LIGHT THEME ── */
html[data-theme="light"] .ab-section:nth-of-type(even){background:linear-gradient(180deg,var(--s1) 0%,var(--bg) 100%)}
html[data-theme="light"] .ab-mv-card,
html[data-theme="light"] .ab-unit,
html[data-theme="light"] .ab-founder,
html[data-theme="light"] .tl-card,
html[data-theme="light"] .ab-card{box-shadow:0 1px 1px rgba(15,23,42,.03),0 10px 24px rgba(15,23,42,.06)}
html[data-theme="light"] .ab-mv-card{background:linear-gradient(160deg,rgba(14,108,147,.07) 0%,transparent 55%),var(--graph)}
html[data-theme="light"] .ab-mv-card--vision{background:linear-gradient(160deg,rgba(181,30,137,.06) 0%,transparent 55%),var(--graph)}
html[data-theme="light"] .ab-unit-recent a,
html[data-theme="light"] .tl-chip,
html[data-theme="light"] .tl-arrow{background:rgba(15,23,42,.04)}
html[data-theme="light"] .tl-chip:hover,
html[data-theme="light"] .tl-arrow:hover:not(:disabled){border-color:rgba(15,23,42,.3)}
html[data-theme="light"] .tl-chip[aria-pressed="true"]{background:var(--n0);border-color:var(--n0);color:#f4f7fb}
html[data-theme="light"] .ab-card-media{background-color:var(--s2)}
html[data-theme="light"] .ab-founder-bio em{color:var(--n0)}
html[data-theme="light"] .tl-title a:focus-visible::after,
html[data-theme="light"] .tl-enhanced .tl-track:focus-visible{outline-color:var(--n0)}

/* ── RESPONSIVE ── */
@media (max-width:1024px){
  .ab-section{padding:88px 0}
  .ab-section .wrap{padding:0 32px}
  .ab-split{grid-template-columns:1fr;gap:32px}
  .ab-split .ab-head{position:static}
  .ab-principle{grid-template-columns:56px minmax(0,1fr);gap:8px 24px}
  .ab-principle-body{grid-column:2}
  .ab-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-card-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-card-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-unit,.ab-mv-card{padding:32px 28px}
}
@media (max-width:720px){
  .ab-section{padding:64px 0}
  .ab-section .wrap{padding:0 20px}
  .ab-head{margin-bottom:32px}
  .ab-head--row{align-items:flex-start}
  .ab-mv-grid,.ab-unit-grid,.ab-founder-grid{grid-template-columns:1fr}
  .ab-prose p,.ab-prose p:first-child{font-size:16px}
  .ab-principle{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .ab-principle-body{grid-column:auto}
  .ab-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-card-grid--4,.ab-card-grid--3{grid-template-columns:1fr}
  .ab-founder-body{padding:24px 22px 28px}
  .tl-controls{flex-direction:column;align-items:flex-start}
  .tl-filters{width:100%}
  #cta .cta-inner{padding:64px 20px!important;grid-template-columns:1fr!important;gap:28px!important}
  #cta .cta-right{align-items:stretch!important;min-width:0!important}
}
@media (max-width:400px){
  .ab-section .wrap{padding:0 16px}
  .ab-proof-grid{grid-template-columns:1fr}
  .ab-unit,.ab-mv-card{padding:26px 20px}
  .tl-card{padding:16px 18px}
  .tl-chip{padding:8px 12px}
  #cta .cta-inner{padding:56px 16px!important}
  #cta .btn-cta{white-space:normal}
}

/* Short text inside cards, tiles and the timeline reads better left-aligned: the
   site-wide justified paragraphs (base.css) open wide gaps in narrow columns. Long
   story prose keeps the site default. */
.ab-card p,.ab-card-text,.ab-card-body,.ab-proof-tile,.ab-proof-label,.ab-unit p,.ab-unit-body,
.ab-principle p,.ab-principle-body,.ab-mv-card p,.ab-founder-grid p,[class*="tl-"] p,[class*="tl-"][class*="desc"],
#timeline p,#proof p,#highlights p,#featured p{text-align:left;hyphens:manual}