/* ============================================================================
   CROWN VAULT -- THE PITCH
   ----------------------------------------------------------------------------
   Same world as the app (see main.css, "The Vitrine"): cold mineral ground lit
   from the top left, one clean grotesque across a very wide scale, warm brass on
   almost nothing. Deliberately NOT a second visual identity -- somebody who has
   just been shown the product should recognise this page as the same object.

   What changes is the job. The app is operated; this is read once, by somebody
   deciding whether it is worth money. So the scale is larger, the rhythm slower,
   and the evidence is the loudest thing on the page.

   Self-contained rather than sharing main.css: that sheet carries 3,000 lines of
   app furniture, including a global button rule with a fifty-clause exception
   chain. Nothing here needs it and everything here would have to fight it.
   ============================================================================ */

@font-face{
  font-family:'Geist';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('/static/fonts/geist-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Geist';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('/static/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --stone-0:#F7F9FB; --stone-1:#E9EDF2; --stone-2:#D6DDE5; --stone-3:#C2CBD5;
  --graphite:#14171C; --slate:#57626F; --slate-2:#6B7683;
  --brass:#9C7B41; --brass-lo:#7A5F31; --brass-tint:#F5EFE4;
  --up:#1B6B47; --up-tint:#E7F1EC; --down:#A33228; --down-tint:#F8EBE9;

  --lift-1:0 1px 2px rgba(20,30,45,.07), 0 2px 6px rgba(20,30,45,.05);
  --lift-2:0 2px 4px rgba(20,30,45,.10), 0 12px 26px -10px rgba(20,30,45,.30);
  --lift-3:0 3px 6px rgba(20,30,45,.14), 0 22px 40px -14px rgba(20,30,45,.38);

  --gutter:clamp(20px,5vw,64px);
  --measure:1120px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--stone-1);color:var(--graphite);
  font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* One directional light from the top left, same source as the app. */
  background-image:radial-gradient(120% 80% at 12% -10%, #FBFCFD 0%, var(--stone-1) 46%, #DFE5EC 100%);
  background-attachment:fixed;
}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);}

/* ---------------------------------------------------------------- TYPE --- */
.eyebrow{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--slate-2);margin:0 0 14px;
}
.eyebrow-brass{color:var(--brass-lo);}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.035em;font-weight:400;}
h1{font-size:clamp(40px,7.2vw,86px);line-height:.98;letter-spacing:-.045em;}
h2{font-size:clamp(28px,4.2vw,50px);line-height:1.04;}
h3{font-size:19px;line-height:1.25;letter-spacing:-.02em;font-weight:500;}
p{margin:0 0 18px;}
.lede{font-size:clamp(17px,2vw,22px);line-height:1.5;color:var(--slate);max-width:62ch;}
.note{font-size:13.5px;color:var(--slate-2);line-height:1.5;}
strong{font-weight:600;}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.03em;}

/* -------------------------------------------------------------- LAYOUT --- */
section{padding:clamp(56px,9vw,132px) 0;}
.rule{border:0;border-top:1px solid var(--stone-3);margin:0;}
.stack-lg > * + *{margin-top:clamp(28px,4vw,48px);}

/* ------------------------------------------------------------ MASTHEAD --- */
.masthead{padding-top:clamp(32px,6vw,72px);padding-bottom:clamp(48px,7vw,96px);}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:clamp(40px,8vw,88px);}
.brand svg{width:27px;height:24px;display:block;}
.brand span{
  font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--graphite);
}
.masthead h1{margin-bottom:26px;}
.masthead h1 em{font-style:normal;color:var(--brass-lo);}
.mast-meta{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:36px;
  padding-top:24px;border-top:1px solid var(--stone-3);
}
.mast-meta div{font-size:13px;color:var(--slate);}
.mast-meta b{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--slate-2);margin-bottom:3px;}
/* A shade lighter than the games themselves. The six are a fact and this is a
   promise, and the two should not read as the same kind of statement. */
.mast-more{color:var(--slate-2);}
/* The one line in this row that is an argument rather than a fact, so it is the one
   line that carries the page's ink colour instead of the row's grey. */
.mast-imagine{color:var(--graphite);font-weight:600;}

/* --------------------------------------------------------- THE EVIDENCE ---
   The signature moment. Everything else on this page is a claim; this is the
   only thing that is a measurement, so it gets the most room and the only
   full-width panel on a white ground. */
.evidence{
  background:#fff;border:1px solid var(--stone-2);border-radius:14px;
  box-shadow:var(--lift-3);padding:clamp(24px,4vw,52px);
}
.ev-head{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between;}
.ev-figures{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap;}
.figure .fig-label{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--slate-2);margin-bottom:6px;
}
.figure .fig-value{font-size:clamp(34px,5vw,54px);line-height:1;font-weight:300;letter-spacing:-.04em;}
.figure .fig-sub{font-size:13px;color:var(--slate-2);margin-top:7px;}
.fig-was .fig-value{color:var(--down);}
.fig-now .fig-value{color:var(--up);}

.chart{margin-top:clamp(28px,4vw,44px);}
/* Every label here is HTML, not SVG text. Text inside a scaling SVG shrinks with the
   container, and at phone width the axis was rendering at about four pixels -- on the
   one element the whole page is built around. Only the dots and the reference line
   live in the SVG now, so they scale and the words never do. */
.chart-row{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;}
.chart-row + .chart-row{margin-top:4px;}
.chart-row-label{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.13em;
  color:var(--slate-2);text-align:right;line-height:1.2;
}
.chart-lbl-now{color:var(--up);}
.chart-plot{position:relative;min-width:0;}
.chart-plot svg{width:100%;height:auto;display:block;}
/* Two aspects of the same data. The 900-wide drawing is nearly 9:1, which at phone
   width collapses to about 29px of plot and turns a seven-deep stack into mush. The
   narrow one is the same dots over a shorter axis, so the column heights survive.
   Both put 1.0x at the halfway mark, so the HTML axis lines up either way. */
/* Selected through .chart-plot on purpose. `.chart-plot svg` above is (0,1,1); a
   bare `.plot-wide` is (0,1,0) and loses to it, so both variants rendered at once. */
.chart-plot svg.plot-narrow{display:none;}
@media (max-width:560px){
  .chart-plot svg.plot-wide{display:none;}
  .chart-plot svg.plot-narrow{display:block;}
}

.chart-axis-row{margin-top:6px;}
.chart-axis{position:relative;height:22px;}
.chart-axis span{
  position:absolute;top:3px;transform:translateX(-50%);white-space:nowrap;
  font-size:11.5px;color:var(--slate-2);font-variant-numeric:tabular-nums;
}
/* The end labels would hang off the plot if they were centred on their tick. */
.chart-axis span:first-child{transform:none;}
.chart-axis span:last-child{transform:translateX(-100%);}
.axis-mark{color:var(--graphite);font-weight:600;}
.chart-caption{
  margin:14px 0 0;padding-left:72px;
  font-size:12.5px;color:var(--slate-2);
}
@media (max-width:560px){
  .chart-row{grid-template-columns:46px 1fr;gap:10px;}
  .chart-row-label{font-size:10px;letter-spacing:.1em;}
  .chart-caption{padding-left:56px;font-size:12px;}
  /* At this width the mark and its neighbours collide. */
  .chart-axis span:not(:first-child):not(:last-child):not(.axis-mark){display:none;}
  .axis-mark{font-size:11px;}
}

/* ------------------------------------------------------------ FEATURES --- */
/* The caveat sits directly under the claim it qualifies. Ruled off rather than
   tinted: a coloured panel here would read as a warning, and this is not a warning,
   it is the terms the speed comes on. */
.early-note{
  margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--stone-3);
  max-width:68ch;font-size:14.5px;line-height:1.6;color:var(--slate);
}

.feat-grid{
  display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  /* Each card is its own height. A grid stretches its items to the tallest in the
     row by default, so opening one card grew every card beside it -- which read as
     the neighbour expanding too -- and closed cards carried a block of empty white
     underneath whenever a row-mate had more text. */
  align-items:start;
  /* Backfill the gaps. A two-column card cannot start in a one-column remainder, so
     without this the grid leaves a hole and moves on, and a short card holding two
     columns leaves a very large one. These are thirteen independent features rather
     than a sequence, so pulling a later one forward to fill a hole costs nothing. */
  grid-auto-flow:row dense;
}
.feat{
  background:#fff;border:1px solid var(--stone-2);border-radius:12px;
  padding:24px 22px 22px;box-shadow:var(--lift-1);
  display:flex;flex-direction:column;
}
/* The two flagship features earn double width on wide screens; a grid of equal
   tiles says every feature matters equally, and they do not. */
.feat-wide{grid-column:span 2;}
@media (max-width:720px){.feat-wide{grid-column:span 1;}}
/* Two cards sharing one full-width row. A wide card is two thirds of the grid, so
   two of them cannot sit together; this takes the whole row and halves it instead,
   which gives each one more room than a normal card and less than a wide one. */
.feat-pair{
  grid-column:1 / -1;
  display:grid;gap:clamp(14px,2vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
@media (max-width:720px){.feat-pair{grid-template-columns:1fr;}}
/* A card that opens is a card that should look like it opens. Lifts a little under
   the pointer, and sits raised while it is open so an expanded card reads as the one
   being read rather than as the page having grown. */
.feat{
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
}
.feat:hover{transform:translateY(-3px);box-shadow:var(--lift-2);border-color:var(--stone-3);}
.feat.open{box-shadow:var(--lift-3);border-color:var(--stone-3);}
.feat:hover .feat-toggle{color:var(--graphite);}
@media (prefers-reduced-motion:reduce){
  .feat,.feat-caret{transition:none;}
  .feat:hover{transform:none;}
}
/* A touch screen has no hover, and leaving the lift on means a tapped card keeps it
   until something else is tapped, which reads as stuck. */
@media (hover:none){.feat:hover{transform:none;box-shadow:var(--lift-1);}}

.feat h3{margin-bottom:9px;}
.feat-toggle{
  margin-top:16px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:var(--slate);transition:color .15s ease;
}
.feat-toggle:hover{color:var(--graphite);}
.feat-toggle:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:3px;}
.feat-caret{
  font-size:9px;color:var(--brass);
  transition:transform .18s cubic-bezier(.2,.7,.3,1);
}
.feat-toggle[aria-expanded="true"] .feat-caret{transform:rotate(180deg);}

.feat-detail{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--stone-2);
}
.feat-detail p{
  font-size:13.5px;line-height:1.62;color:var(--slate);margin:0;
}
.feat-detail p + p{margin-top:11px;}

/* Status on an unfinished feature, said plainly rather than left to the tag alone.
   Set apart from the description so it reads as a caveat and not as more selling.
   Specificity note: `.feat p` is (0,1,1) and would win on colour over a bare
   `.feat-note`, so this is scoped through .feat to match it. */
.feat p.feat-note{
  margin:16px 0 0;padding:11px 13px;border-radius:8px;
  background:var(--brass-tint);
  font-size:12.5px;line-height:1.5;color:var(--brass-lo);
}
/* A feature that is not accurate yet is a different kind of caveat from one that is
   merely unfinished, and it should not be able to be mistaken for the brass note
   that reads as "coming soon". Red, and it says what is wrong. */
.feat p.feat-note-todo{
  background:var(--down-tint);color:#7E2A22;
  border-left:3px solid var(--down);
  border-radius:0 8px 8px 0;
}
.feat p{font-size:14px;color:var(--slate);margin:0;line-height:1.5;}
.feat-tag{
  align-self:flex-start;margin-bottom:16px;
  font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;
  padding:4px 9px;border-radius:100px;
}
.tag-live{background:var(--up-tint);color:var(--up);}
.tag-next{background:var(--brass-tint);color:var(--brass-lo);}
.tag-todo{background:var(--down-tint);color:var(--down);}

/* Small visual glimpses. Drawn, not screenshotted, so they stay legible at this
   size and never go stale against the real UI. */
.glimpse{margin-top:20px;border-radius:9px;overflow:hidden;background:var(--stone-0);
  border:1px solid var(--stone-2);}
.glimpse svg{width:100%;height:auto;display:block;}
/* The real game marks, not drawings of them. Sitting on the same lit panel the set
   logos get, because these are the same kind of object: art made for print that
   carries its own light and dies on a flat tint. */
.glimpse-games{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--stone-2);
}
.glimpse-game{
  display:grid;place-items:center;padding:16px 12px;min-height:74px;
  background:radial-gradient(120% 90% at 30% 0%, #fff, var(--stone-0) 86%);
}
/* Explicit height, and not lazy. An <img> with width:auto has no box until it has
   loaded, so a logo that has not been fetched yet measures 0x0 -- and if the fetch
   never starts, it stays that way and the panel renders empty. Six small files on a
   page somebody is being walked through is not worth deferring. */
.glimpse-game img{max-width:100%;height:38px;width:auto;object-fit:contain;}
@media (max-width:420px){
  .glimpse-games{grid-template-columns:repeat(2,1fr);}
}

/* ---------------------------------------------------------------- MOAT ---
   The one tonal shift on the page. Reserved for the argument that is about the
   business rather than the product. */
.moat{background:var(--graphite);color:var(--stone-0);}
.moat h2{color:#fff;}
.moat .lede{color:#B9C2CD;}
.moat .eyebrow{color:#8A94A1;}
.moat-grid{
  display:grid;gap:clamp(16px,2.4vw,28px);margin-top:clamp(32px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.moat-card{
  border:1px solid #2A2F38;border-radius:12px;padding:24px 22px;
  background:linear-gradient(180deg,#1B1F26 0%,#171B21 100%);
}
.moat-card .fig-value{
  font-size:34px;font-weight:300;letter-spacing:-.04em;color:var(--brass);line-height:1;
  display:flex;align-items:baseline;gap:9px;
}
/* Reads as a note on the number rather than part of it: six is a fact and the rest
   is a direction, and they should not be the same size. */
.moat-more{
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:#8A94A1;
}
.moat-card h3{color:#fff;margin:14px 0 8px;}
.moat-card p{font-size:14px;color:#9AA4B1;margin:0;line-height:1.5;}

/* ------------------------------------------------------------- ROADMAP --- */
.road{display:grid;gap:0;margin-top:clamp(28px,4vw,44px);}
.road-row{
  display:grid;grid-template-columns:132px 1fr;gap:clamp(16px,3vw,40px);
  padding:26px 0;border-top:1px solid var(--stone-3);align-items:start;
}
.road-row:last-child{border-bottom:1px solid var(--stone-3);}
.road-when{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--slate-2);padding-top:5px;
}
.road-now .road-when{color:var(--up);}
.road-body h3{margin-bottom:8px;}
.road-body p{font-size:14.5px;color:var(--slate);margin:0;max-width:64ch;}
@media (max-width:620px){
  .road-row{grid-template-columns:1fr;gap:8px;}
  .road-when{padding-top:0;}
}

/* --------------------------------------------------------------- TIERS --- */
.tiers{
  display:grid;gap:clamp(14px,2vw,20px);margin-top:clamp(28px,4vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.tier{
  background:#fff;border:1px solid var(--stone-2);border-radius:12px;
  padding:26px 24px;box-shadow:var(--lift-1);display:flex;flex-direction:column;
}
/* The middle tier is the one the business runs on, so it is the one that is lit. */
.tier-lead{border-color:var(--brass);box-shadow:var(--lift-3);position:relative;}
.tier-lead::before{
  content:'Where the revenue is';position:absolute;top:-9px;left:24px;
  background:var(--brass);color:#fff;font-size:9px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:100px;
}
.tier-name{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate-2);margin-bottom:14px;}
.tier-lead .tier-name{color:var(--brass-lo);}
.tier-price{font-size:40px;font-weight:300;letter-spacing:-.04em;line-height:1;}
.tier-price small{font-size:14px;font-weight:400;color:var(--slate-2);letter-spacing:0;}
.tier-for{font-size:13px;color:var(--slate-2);margin:10px 0 20px;}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
/* Hanging indent rather than a flex row. As a flex container every element child of
   the item became its own column, so a line containing any inline markup broke into
   two columns with the text hanging off to one side. */
.tier li{
  font-size:14px;color:var(--slate);line-height:1.45;
  position:relative;padding-left:16px;
}
.tier li::before{
  content:'';position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:50%;
  background:var(--stone-3);
}
.tier-lead li::before{background:var(--brass);}
/* Only the normal weight of Geist is loaded, so an <em> here would be synthesised
   into a faux oblique. These names are labels rather than emphasis anyway, so they
   take weight and colour instead of a slant. */
.tier li em{font-style:normal;font-weight:600;color:var(--graphite);}
.tier-note{font-size:12.5px;color:var(--slate-2);margin-top:18px;padding-top:14px;
  border-top:1px solid var(--stone-2);}

/* --------------------------------------------------------------- CLOSE --- */
.close{text-align:left;}
.close h2{max-width:20ch;}
.ask{
  margin-top:clamp(28px,4vw,40px);padding:clamp(24px,3.5vw,36px);
  background:#fff;border:1px solid var(--stone-2);border-left:3px solid var(--brass);
  border-radius:12px;box-shadow:var(--lift-2);max-width:760px;
}
.ask p:last-child{margin-bottom:0;}

.footer{padding:36px 0 56px;font-size:12.5px;color:var(--slate-2);}
.footer a{color:var(--slate);text-decoration:none;border-bottom:1px solid var(--stone-3);}
.footer a:hover{color:var(--graphite);}

/* Back to the app. Quiet on purpose -- this page is the destination. */
.back-link{
  position:fixed;top:16px;right:16px;z-index:20;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid var(--stone-3);border-radius:100px;
  padding:8px 15px;font-size:12.5px;font-weight:500;color:var(--slate);
  text-decoration:none;box-shadow:var(--lift-1);
}
.back-link:hover{color:var(--graphite);border-color:var(--slate-2);}
@media print{.back-link{display:none;}}