/* ---------- tokens ---------- */
:root{
  --paper:#EAE5DA;
  --paper-deep:#E2DCCF;
  --surface:#FFFFFF;
  --ink:#14120F;
  --ink-mid:#4E4940;
  --ink-soft:#635D50;
  --rule:#CFC7B5;
  --rule-soft:#DCD5C6;
  --rule-on-white:#E6E0D2;
  --warn:#8C2F1E;

  /* theme-dependent helpers: every value that used to be a raw hex outside the
     token set lives here so light and dark stay in lockstep */
  --btn-hover:#2E2A25;
  --booking-hover:#D8D0C2;
  --surface-hover:#FAF8F3;
  --placeholder:#776E60;
  --control-rule:#8B8171;
  --logo-filter:brightness(0);                 /* wordmarks: black on paper */
  --clip-shadow:0 18px 40px rgba(20,18,15,.16);
  --clip-img:grayscale(1) contrast(1.08);
  color-scheme:only light;

  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Newsreader","Iowan Old Style","Times New Roman",Times,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:150px;
  --gap:56px;
  --measure:640px;
  --frame:1080px;
}

/* ---------- dark theme ----------
   The press page at night: the same paper-and-ink world lit low and warm, not
   a cold tech black. Panels lift *lighter* than the page, the way white panels
   lift above beige in daylight. Wordmarks flip to ivory so they stay legible;
   the real article screenshots stay photographic. The system preference
   selects the palette automatically. */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1A1714;
    --paper-deep:#221E19;
    --surface:#24201B;
    --ink:#ECE5D6;
    --ink-mid:#B4AC9C;
    --ink-soft:#948C7D;
    --rule:#3A352D;
    --rule-soft:#332E28;
    --rule-on-white:#3D382F;
    --warn:#E4906F;

    --btn-hover:#D8D1C0;
    --booking-hover:#2E2A22;
    --surface-hover:#2C2822;
    --placeholder:#A69C8B;
    --control-rule:#817766;
    --logo-filter:brightness(0) invert(1);
    --clip-shadow:0 20px 46px rgba(0,0,0,.55);
    --clip-img:grayscale(1) contrast(1.02) brightness(.9);
    color-scheme:only dark;
  }
}

/* Both themes paint their own surfaces and controls. */

*,*::before,*::after{box-sizing:border-box}
/* the inactive view must stay down even though `main` sets display:flex */
[hidden]{display:none !important}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit}
img{display:block}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* ---------- shell ---------- */
.frame{max-width:var(--frame);margin:0 auto;padding:0 28px}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .frame{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;gap:24px;
}
/* Wire lockup: a monospace letterform reads as terminal and as teletype at
   once, which is the tech/press balance the mark is after. */
.brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none}
.brand .mark{
  width:35px;height:35px;flex:none;
  border:1.5px solid var(--ink);border-radius:1px;
  display:grid;place-items:center;
  font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.04em;
  color:var(--ink);
  transition:background .18s ease,color .18s ease;
}
.brand .wm{
  font-family:var(--mono);font-weight:500;font-size:18px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;
}
.brand:hover .mark{background:var(--ink);color:var(--paper)}
.nav{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
.nav a{
  font-size:14px;font-weight:500;letter-spacing:.01em;
  text-decoration:none;color:var(--ink);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:border-color .18s ease;
}
.nav a:hover{border-bottom-color:var(--ink)}

/* ---------- section grid ---------- */
main{display:flex;flex-direction:column}

.sec{padding:clamp(52px,7vw,84px) 0 0}
.sec > .frame{
  display:grid;
  grid-template-columns:var(--gutter) minmax(0,1fr);
  gap:0 var(--gap);
  border-top:1px solid var(--rule);
  padding-top:24px;
}
.sec--open > .frame{border-top:0;padding-top:0}

.slug{
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.5;padding-top:.35em;
}
.col{max-width:var(--measure)}
.col--wide{max-width:none}

h1,h2,h3{margin:0;text-wrap:balance}

h2{
  font-size:clamp(1.55rem,2.8vw,2.05rem);
  font-weight:500;letter-spacing:-.022em;line-height:1.12;
}

p{margin:0}
.stack{display:flex;flex-direction:column;gap:18px}
.stack--tight{gap:12px}
.stack--loose{gap:26px}

.muted{color:var(--ink-mid)}

/* ---------- hero ---------- */
.hero{padding:clamp(60px,8vw,104px) 0 clamp(48px,5vw,68px)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:40px;align-items:center;
}
.hero h1{
  font-size:clamp(2.15rem,4.2vw,2.75rem);
  font-weight:500;line-height:1.08;letter-spacing:-.03em;
  min-height:2.2em;
}
.nb{white-space:nowrap}

/* Each slot stacks every wordmark and crossfades between them; the slot's own
   width animates to the active logo's aspect ratio, so the line never jumps.
   --lh lets the long all-caps mastheads sit a little shorter, the way a
   press page sets them, instead of dominating the line.                     */
.slot{
  position:relative;display:inline-block;vertical-align:baseline;
  overflow:clip;
  height:.58em;width:2.315em;--lh:.58em;
  transition:width .6s cubic-bezier(.4,0,.2,1);
}
.slot img{
  position:absolute;left:0;bottom:0;height:var(--lh);width:auto;
  filter:var(--logo-filter);
  opacity:0;transition:opacity .6s ease;
}
.slot img.on{opacity:1}

.hero .lede{
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  color:var(--ink-mid);margin-top:22px;
}
.hero .actions{margin-top:34px}

/* press clippings — a pile of cuttings, each masthead left showing.
   Sized in cqw, so the pile scales as one object with whatever column it
   gets; each card keeps ~70% of its cutting visible above the next. */
.clips{
  position:relative;width:100%;
  container-type:inline-size;
  aspect-ratio:1 / 1.24;
}
.clip{
  position:absolute;left:50%;top:50%;margin:0;
  width:88cqw;padding:2cqw;
  background:var(--surface);
  border:1px solid var(--rule-on-white);border-radius:2px;
  box-shadow:var(--clip-shadow);
}
.clip img{
  width:100%;height:45cqw;object-fit:cover;object-position:top;
  filter:var(--clip-img);
}
.clip--a{transform:translate(-50%,-50%) translate(-2.5cqw,-35cqw) rotate(-2.5deg);z-index:1}
.clip--b{transform:translate(-50%,-50%) translate(2.5cqw,-.5cqw) rotate(1.8deg);z-index:2}
.clip--c{transform:translate(-50%,-50%) translate(-1.5cqw,30cqw) rotate(-1deg);z-index:3}

/* On wide screens the hero lets the pile run past the page frame on the
   right (up to 200px) while the headline keeps the frame's left edge. The
   copy column holds 590px so the widest wordmark never forces a third line. */
@media (min-width:1180px){
  .hero .hero-grid{
    max-width:none;
    padding-left:calc((100% - var(--frame)) / 2 + 28px);
    padding-right:max(28px, calc((100% - var(--frame)) / 2 + 28px - 200px));
    grid-template-columns:minmax(0,1fr) min(600px, calc(100% - 638px));
    gap:48px;
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.005em;
  padding:13px 24px;border-radius:3px;text-decoration:none;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  cursor:pointer;transition:background .18s ease,color .18s ease;
}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--booking{background:var(--paper-deep);border-color:var(--rule);color:var(--ink);font-weight:600}
.btn--booking:hover{background:var(--booking-hover);border-color:var(--ink-soft)}
.btn[disabled]{opacity:.3;cursor:not-allowed}
.btn[disabled]:hover{background:var(--ink);border-color:var(--ink)}

.arrowlink{
  display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:500;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:2px;width:fit-content;
  transition:border-color .18s ease;
}
.arrowlink:hover{border-bottom-color:var(--ink)}
.arrowlink span{transition:transform .18s ease}
.arrowlink:hover span{transform:translateX(3px)}

/* ---------- featured strip ---------- */
.strip .frame{border-top:1px solid var(--rule);padding-top:22px;padding-bottom:0}
/* eight mastheads read as a roster: four columns, two rows, each logo on
   its column's left edge so the rows line up under one another */
.strip .logos{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;gap:30px 32px;margin-top:22px;
}
.strip .logos img{
  width:auto;height:auto;max-width:100%;max-height:17px;
  filter:var(--logo-filter);opacity:.7;
}
/* optical corrections so all eight carry similar weight: Bloomberg's
   descender and the NYT blackletter read small at the shared height,
   Business Insider's heavy all-caps reads loud */
.strip .logos img.wm-desc{max-height:22px;transform:translateY(3px)}
.strip .logos img.wm-big{max-height:20px}
.strip .logos img.wm-small{max-height:14px}

/* ---------- case studies ---------- */
/* This row is the page's evidence, so it gets the full measure: the slug
   moves above the grid instead of sitting in the gutter. */
.sec--gallery > .frame{grid-template-columns:minmax(0,1fr)}
.sec--gallery .slug{padding-top:0;margin-bottom:20px}

.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--rule-on-white);
  border-radius:3px;overflow:hidden;text-decoration:none;
  transition:border-color .18s ease;
}
.case:hover{border-color:var(--ink)}
.masthead-bar{
  display:flex;align-items:center;height:42px;padding:0 18px;flex:none;
  border-bottom:1px solid var(--rule-on-white);
}
.masthead-bar img{height:13px;width:auto;filter:var(--logo-filter)}
/* wordmarks with a descender (Bloomberg's g) read small at the shared height,
   so they get more height and a nudge down onto the same optical baseline */
.masthead-bar img.wm-desc{height:17px;transform:translateY(2px)}
.case img.shot{width:100%;height:168px;object-fit:cover;object-position:top}
.case .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.case .eyebrow{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.case h3{font-size:1.01rem;font-weight:500;letter-spacing:-.012em;line-height:1.32}
.case .go{
  margin-top:auto;font-size:14px;font-weight:500;color:var(--ink-mid);
  display:inline-flex;gap:6px;
}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tier{
  background:var(--surface);border:1px solid var(--rule-on-white);border-radius:3px;
  padding:28px;display:flex;flex-direction:column;gap:6px;
}
.tier .name{font-size:15px;font-weight:600;letter-spacing:-.005em}
.tier .price{
  font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.4rem);font-weight:300;
  letter-spacing:-.02em;line-height:1.05;margin-top:10px;
  font-variant-numeric:tabular-nums;
}
.tier .per{font-size:13px;color:var(--ink-soft);letter-spacing:.01em}
.tier .note{font-size:15px;color:var(--ink-mid);line-height:1.55;margin-top:18px}

.examples{margin-top:22px;border-top:1px solid var(--rule-on-white);padding-top:16px}
.examples .lbl{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.examples ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.examples li{font-size:15px;color:var(--ink-mid)}
.examples li[hidden]{display:none}
.more{
  margin-top:12px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.more:hover{border-bottom-color:var(--ink)}

/* ---------- process ---------- */
/* Each stage is a tile that lifts to the white surface on hover. The tile
   bleeds past the text by --tile-bleed on both sides, so the type keeps the
   same left edge as every other section rather than sitting indented. */
.stages{--tile-bleed:20px;display:flex;flex-direction:column;gap:8px}
.stage{
  display:grid;grid-template-columns:auto 1fr auto;gap:0 22px;align-items:baseline;
  padding:20px var(--tile-bleed);
  margin:0 calc(var(--tile-bleed) * -1);
  border:1px solid var(--rule-soft);border-radius:3px;
  background:transparent;
  transition:background .18s ease,border-color .18s ease;
}
.stage:hover{background:var(--surface);border-color:var(--ink)}
.stage:hover .no,.stage:hover .dur{color:var(--ink)}
.stage .no{
  grid-column:1;grid-row:1;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);min-width:66px;font-variant-numeric:tabular-nums;
  transition:color .18s ease;
}
.stage h3{grid-column:2;grid-row:1;font-size:1.08rem;font-weight:500;letter-spacing:-.012em}
.stage .dur{
  grid-column:3;grid-row:1;
  font-size:13px;color:var(--ink-soft);white-space:nowrap;
  font-variant-numeric:tabular-nums;transition:color .18s ease;
}
.stage .desc{grid-column:2 / -1;grid-row:2;font-size:15px;color:var(--ink-mid);margin-top:5px}

/* ---------- story ---------- */
.story{font-family:var(--serif);font-size:1.2rem;line-height:1.62;color:var(--ink)}
.story p{margin:0}
.story .stack{gap:20px}
.story a{text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .18s ease}
.story a:hover{border-bottom-color:var(--ink)}
.story figure{margin:14px 0}
.story figure img{
  width:100%;height:auto;border:1px solid var(--rule-on-white);border-radius:3px;
  background:var(--surface);
}
.story figure.narrow{max-width:460px}
.story figure.portrait{max-width:420px;margin-top:24px}
.story figure.portrait img{filter:grayscale(1) contrast(1.03)}
.story figcaption{
  font-family:var(--sans);font-size:13px;color:var(--ink-soft);
  line-height:1.5;margin-top:10px;
}

/* ---------- founders + milestones ---------- */
.founders,.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px 32px;margin-top:34px;
}
.founder,.stat{
  display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--rule);padding-top:16px;
}
.founder .who{font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.founder p,.stat .lab{font-size:15px;line-height:1.6;color:var(--ink-mid)}
.founder a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);transition:border-color .18s ease;
}
.founder a:hover{border-bottom-color:var(--ink)}
.stat .fig{
  font-family:var(--serif);font-size:clamp(2.1rem,4vw,2.7rem);font-weight:300;
  line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}

/* ---------- form fields ---------- */
.fields{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:500;color:var(--ink-mid)}
.field input{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule-on-white);border-radius:3px;
  padding:12px 14px;width:100%;
}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder);opacity:1}
.field input{border-color:var(--control-rule)}
.field input:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}

/* ---------- forms (apply, press release) ---------- */
.form{
  background:var(--surface);border:1px solid var(--rule-on-white);border-radius:3px;
  padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:22px;
}
.field label,.field .q{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.field .req{color:var(--ink-soft);font-weight:400}
.field .hint{font-size:13px;color:var(--ink-soft);line-height:1.5}
.field textarea,.field select{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--rule-on-white);border-radius:3px;
  padding:12px 14px;width:100%;
}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field textarea,.field select{border-color:var(--control-rule)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 19px) 20px,calc(100% - 14px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;
}
.field textarea:focus,.field select:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.field .invalid{border-color:var(--warn)}
.field-err{font-size:13px;color:var(--warn)}
.checks{
  display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--rule-on-white);border-radius:3px;padding:6px;
}
.check{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:15px;color:var(--ink-mid);line-height:1.5;padding:9px 10px;border-radius:2px;
  transition:background .15s ease;
}
.check:hover{background:var(--surface-hover)}
/* a .check is itself a <label>, so it must opt out of the bold field label */
.field .check{font-weight:400;color:var(--ink-mid)}
/* the shared .field input rule sizes text boxes to full width — a checkbox
   has to opt out of that */
.check input{
  width:auto;height:auto;flex:none;padding:0;border:0;background:none;
  margin:3px 0 0;accent-color:var(--ink);
}
.check span{min-width:0}
.hp{display:none}
.form-foot{display:flex;flex-direction:column;gap:12px}
.spinner{
  width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;margin-right:9px;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* outcome + score panels */
.outcome{
  background:var(--surface);border:1px solid var(--rule-on-white);border-radius:3px;
  padding:clamp(24px,3.2vw,34px);display:flex;flex-direction:column;gap:14px;
}
.outcome h2{font-size:1.25rem;font-weight:600;letter-spacing:-.015em}
.outcome p{font-size:15px;color:var(--ink-mid)}
.outcome .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.release{border-top:1px solid var(--rule-on-white);padding-top:20px;display:grid;gap:12px;overflow-wrap:anywhere}
.release h2{font-size:1.2rem;font-weight:600;line-height:1.3}
.release h3{font-size:1rem;font-weight:600;margin-top:4px}
.release p{font-size:15px;line-height:1.6;color:var(--ink)}
.release .release-sub{font-style:italic}
.score-row{display:flex;align-items:flex-end;gap:7px}
.score{
  font-family:var(--serif);font-size:clamp(3.4rem,8vw,4.6rem);font-weight:300;
  line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.score-max{font-size:1.5rem;color:var(--ink-soft);padding-bottom:.45rem}
.bar{height:5px;background:var(--rule-on-white);border-radius:999px;overflow:hidden;margin:4px 0 6px}
.bar i{display:block;height:100%;background:var(--ink);border-radius:999px;
  transition:width .8s cubic-bezier(.16,1,.3,1)}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.postcard{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:var(--surface);border:1px solid var(--rule-on-white);border-radius:3px;
  padding:24px 24px 22px;transition:border-color .18s ease;
}
.postcard:hover{border-color:var(--ink)}
.postcard .kicker{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.postcard h2{font-size:1.08rem;font-weight:500;letter-spacing:-.014em;line-height:1.3}
.postcard p{font-size:14.5px;line-height:1.6;color:var(--ink-mid)}
.postcard .when{margin-top:auto;padding-top:6px;font-size:13px;color:var(--ink-soft)}

/* an article is the most editorial thing on the site, so it reads in the
   story face rather than the interface face */
.post .kicker{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.post .when{font-size:13px;color:var(--ink-soft);margin-top:-6px}
.post .prose{display:flex;flex-direction:column;gap:20px;max-width:640px}
.post .prose p{font-family:var(--serif);font-size:1.15rem;line-height:1.66;color:var(--ink)}
.post .prose h2{
  font-family:var(--sans);font-size:1.12rem;font-weight:600;letter-spacing:-.012em;
  line-height:1.3;margin-top:14px;
}
.post .prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);
  transition:border-color .18s ease}
.post .prose a:hover{border-bottom-color:var(--ink)}
.post .prose hr{width:100%;height:0;border:0;border-top:1px solid var(--rule);margin:14px 0 2px}
.post .qa{display:flex;flex-direction:column;gap:18px;max-width:640px;
  border-top:1px solid var(--rule);padding-top:24px}
.post .qa h2{font-size:1.12rem;font-weight:600;letter-spacing:-.012em}
.post .qa .item{display:flex;flex-direction:column;gap:6px}
.post .qa h3{font-size:15px;font-weight:600;letter-spacing:-.005em}
.post .qa p{font-size:15px;line-height:1.66;color:var(--ink-mid)}

/* ---------- events ---------- */
/* Rendered from the Luma calendar's own data rather than its embed, so the
   listing carries the site's typography instead of Luma's. */
.evlist{--tile-bleed:20px;display:flex;flex-direction:column;gap:8px;margin-top:2px}
.ev{
  display:grid;grid-template-columns:136px minmax(0,1fr) auto;gap:0 24px;align-items:baseline;
  padding:18px var(--tile-bleed);margin:0 calc(var(--tile-bleed) * -1);
  border:1px solid var(--rule-soft);border-radius:3px;background:transparent;
  text-decoration:none;transition:background .18s ease,border-color .18s ease;
}
.ev:hover{background:var(--surface);border-color:var(--ink)}
.ev .when{
  grid-column:1;grid-row:1 / 3;
  font-size:13px;color:var(--ink-soft);line-height:1.5;font-variant-numeric:tabular-nums;
}
.ev .when b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.ev h2{grid-column:2;grid-row:1;font-size:1.02rem;font-weight:500;letter-spacing:-.012em;line-height:1.35}
.ev .meta{grid-column:2;grid-row:2;font-size:13.5px;color:var(--ink-mid);margin-top:5px;line-height:1.5}
.ev .go{grid-column:3;grid-row:1;font-size:15px;color:var(--ink-soft);transition:color .18s ease}
.ev:hover .go{color:var(--ink)}
.evfoot{
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--rule);padding-top:20px;margin-top:26px;
}
.dateline{font-size:12px;color:var(--ink-soft);letter-spacing:.01em}

/* ---------- document view (Google connection) ---------- */
.doc{padding:clamp(36px,5vw,56px) 0 clamp(56px,7vw,88px)}
.doc-col{max-width:720px;display:flex;flex-direction:column;gap:26px}
.backlink{
  font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  width:fit-content;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.backlink:hover{color:var(--ink);border-bottom-color:var(--ink)}
.doc-head{display:flex;flex-direction:column;gap:14px}
.doc h1{
  font-size:clamp(1.95rem,3.6vw,2.6rem);
  font-weight:500;letter-spacing:-.03em;line-height:1.1;
}
.doc h2{font-size:1.12rem;font-weight:600;letter-spacing:-.012em;line-height:1.3}
/* a page whose opening line is the heading: set larger than body, smaller
   than a display title */
.doc h1.statement{
  font-size:clamp(1.35rem,2.4vw,1.8rem);
  font-weight:500;letter-spacing:-.018em;line-height:1.32;
}
.doc p,.doc li{font-size:16px;line-height:1.66;color:var(--ink-mid)}
.doc .lede{font-size:17px;color:var(--ink)}
.doc b{color:var(--ink);font-weight:600}
.doc a{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);transition:border-color .18s ease;
}
.doc a:hover{border-bottom-color:var(--ink)}
.doc ol,.doc ul{
  margin:0;padding-left:1.35em;
  display:flex;flex-direction:column;gap:14px;
}
.doc li{padding-left:.2em}
.doc li::marker{color:var(--ink-soft)}
/* the two status panels lift onto the white surface, like the priced tiles */
.panel{
  background:var(--surface);border:1px solid var(--rule-on-white);border-radius:3px;
  padding:24px 26px;display:flex;flex-direction:column;gap:14px;
}
/* each following block opens on a hairline, matching the home page's sections */
.doc-block{
  display:flex;flex-direction:column;gap:14px;
  border-top:1px solid var(--rule);padding-top:24px;
}

/* ---------- closing ---------- */
.apply h2{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.03em}

.endmark{
  font-family:var(--serif);font-size:15px;color:var(--ink-soft);
  letter-spacing:.24em;text-align:center;
  padding:clamp(56px,8vw,96px) 0 clamp(28px,4vw,40px);
}

.foot{border-top:1px solid var(--rule)}
.foot .frame{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-top:22px;padding-bottom:40px;
}
.foot .copy{font-size:13px;color:var(--ink-soft)}
.foot ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.foot a{
  font-size:13px;color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px;transition:all .18s ease;
}
.foot a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:46px}
  .clips{max-width:480px}
}
@media (max-width:900px){
  :root{--gutter:120px;--gap:36px}
  .cases{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .posts{grid-template-columns:minmax(0,1fr)}
  .ev{grid-template-columns:minmax(0,1fr) auto}
  .ev .when{grid-column:1;grid-row:1;margin-bottom:6px}
  .ev .when b{display:inline;font-size:13px}
  .ev h2{grid-row:2;grid-column:1}
  .ev .meta{grid-row:3;grid-column:1 / -1}
  .ev .go{grid-row:1;grid-column:2}
  .founders,.stats{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (max-width:760px){
  body{font-size:16px}
  .frame{padding:0 20px}
  .sec > .frame{grid-template-columns:minmax(0,1fr);gap:0}
  .slug{padding-top:0;margin-bottom:14px}
  .masthead .frame{height:auto;flex-wrap:wrap;padding-top:16px;padding-bottom:14px;gap:10px 24px}
  .brand{gap:9px}
  .brand .mark{width:29px;height:29px;font-size:12.5px}
  .brand .wm{font-size:15px;letter-spacing:.15em}
  .nav{flex:1 0 100%;gap:22px;font-size:13px}
  .cases,.tiers{grid-template-columns:minmax(0,1fr)}
  .strip .logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
  .stage{grid-template-columns:1fr auto}
  .stage .no{grid-column:1;grid-row:1;margin-bottom:4px}
  .stage h3{grid-column:1;grid-row:2}
  .stage .dur{grid-column:2;grid-row:2}
  .stage .desc{grid-column:1 / -1;grid-row:3}
  .story{font-size:1.1rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

/* ---------- legal pages ---------- */
.doc strong{color:var(--ink);font-weight:600}
.doc .doc-block p + p{margin-top:0}
.luma-embed{display:block;width:100%;height:1600px;border:1px solid var(--rule-on-white);border-radius:3px;background:var(--surface)}
.upnext{border:1px solid var(--rule-on-white);border-radius:3px;padding:16px;display:grid;gap:8px}
.upnext-head{font-weight:600;color:var(--ink)}
.upnext p{font-size:14px}
.upnext a{text-decoration:underline;text-underline-offset:4px}
/* partner pages: scrolling discount banner + struck-through regular price */
.marquee{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;font-size:13px;letter-spacing:.04em;padding:9px 0}
.marquee-track{display:inline-flex;gap:28px;animation:marquee 60s linear infinite}
.marquee-track span{flex:none}
@keyframes marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.tier .price s{color:var(--ink-soft);font-weight:400;margin-right:.25em}

@media (max-width:480px){
  .hero .nb{white-space:normal}
}