/* Archivo, self-hosted (Google Fonts v25 variable woff2, latin + latin-ext).
   "Archivo Fallback" is Arial resized to Archivo's measured width and
   vertical metrics (ascent 0.878, descent 0.21), so the swap to Archivo
   does not shift the layout. Measured in Chromium against Liberation Sans. */
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/archivo-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;
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/archivo-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: "Archivo Fallback";
  font-weight: 100 649;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
  size-adjust: 99%;
  ascent-override: 88.7%;
  descent-override: 21.2%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  font-weight: 650 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold");
  size-adjust: 102.7%;
  ascent-override: 85.5%;
  descent-override: 20.4%;
  line-gap-override: 0%;
}

/* Cryptathon site — one stylesheet for the landing page and the legal pages.
   The app's rules carry over to the web (apps/game-app/DESIGN.md): light ground,
   Action Indigo only on things you can act on, gain/loss only on price, hairlines
   instead of shadows, tabular figures on every number. The plan for this page and
   the choices it rejects are in DESIGN.md next to this file. */

:root{
  --ground:#FFFFFF;
  --surface:#F7F8FA;      /* the two tinted bands */
  --near-ground:#FCFCFD;  /* the order book's mid strip */
  --ink:#0F1115;
  --muted:#656B7C;        /* 5.3:1 on white; the only secondary text colour */
  --hairline:#ECEEF3;
  --hairline-deep:#DFE2EA;/* the same hairline one step darker, for tinted grounds */

  --indigo:#4F46E5;       /* interactivity. Nothing else. */
  --indigo-hover:#4036D8;
  --indigo-tint:#F6F5FF;
  --indigo-line:#E2DEFF;

  --gain:#0E8148; --gain-bar:#C4E4D3;   /* price direction and side. Nothing else. */
  --loss:#C2372C; --loss-bar:#F4CBC5;

  --disabled-fill:#DFE2EA; --disabled-text:#767C8B;

  --col:1120px; --col-narrow:680px; --gutter:20px;
  --edge:max(var(--gutter), calc((100% - var(--col)) / 2));
  --r-sm:10px; --r-md:14px; --r-phone:26px;
  --header-h:64px;
  --sec-y:56px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-std:cubic-bezier(.2,0,0,1);
  color-scheme:light;
}
@media (min-width:900px){:root{--gutter:32px;--sec-y:88px}}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:Archivo,"Archivo Fallback",Arial,sans-serif;font-weight:500;font-size:16px;line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (min-width:760px){body{font-size:17px}}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;padding:10px 16px;background:var(--ink);color:#fff;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.skip:focus{left:12px}
.wrap{width:min(100% - (var(--gutter) * 2), var(--col));margin-inline:auto}
.wrap-narrow{width:min(100% - (var(--gutter) * 2), var(--col-narrow));margin-inline:auto}

h1{font-size:clamp(42px,9vw,72px);font-weight:800;line-height:1.0;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(30px,4.4vw,42px);font-weight:800;line-height:1.08;letter-spacing:-.03em;text-wrap:balance;max-width:20ch}
h3{font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.deck{margin-top:14px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--muted);max-width:56ch}
.fine{margin-top:16px;font-size:14px;line-height:1.5;color:var(--muted);max-width:44ch}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:10;background:var(--ground);border-bottom:1px solid var(--hairline)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--header-h)}
.masthead{display:flex;align-items:center;gap:9px;text-decoration:none}
.masthead img{width:26px;height:26px}
.wordmark{font-size:17px;font-weight:800;letter-spacing:-.03em}
.nav{display:none;gap:26px}
.nav a{text-decoration:none;font-size:15px;font-weight:600;color:var(--muted);transition:color 140ms var(--ease-std)}
.nav a:hover{color:var(--ink)}
@media (min-width:880px){.nav{display:flex}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:800;font-size:16px;line-height:1;min-height:48px;padding:0 22px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background-color 140ms var(--ease-std),border-color 140ms var(--ease-std)}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:var(--indigo-hover)}
.btn-primary:focus-visible{outline-color:var(--ink)}
.btn-primary:disabled{background:var(--disabled-fill);color:var(--disabled-text);cursor:default}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--hairline-deep)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{min-height:40px;font-size:14px;padding:0 14px}
@media (min-width:520px){.btn-sm{font-size:15px;padding:0 16px}}

/* ---- sections ---- */
main > section{padding:var(--sec-y) 0}
main > section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.section-head{padding-bottom:26px;border-bottom:1px solid var(--hairline);margin-bottom:36px}

/* ---- hero ---- */
.hero{padding-top:44px}
.hero-grid{display:grid;gap:40px;align-items:start}
@media (min-width:960px){
  .hero{padding-top:72px}
  .hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr);gap:64px;align-items:stretch}
  /* the exchange is unreachable: the hero becomes one typographic column and the
     copy widens rather than sitting against an empty half-page */
  .hero-grid.no-book{grid-template-columns:minmax(0,1fr)}
  .no-book h1{max-width:14ch}
  .no-book .deck{max-width:62ch}
  .book{align-self:start}
  /* Both halves start on the same line and the copy column simply ends after the
     fine print. The ladder being the taller column is fine; pinning the closing
     line to the bottom of the copy instead opened a hole in the middle. */
}
.hero h1{max-width:11ch}
.hero .deck{max-width:46ch}

.beta-form{margin-top:30px;display:grid;grid-template-columns:1fr;gap:10px;max-width:480px}
@media (min-width:560px){.beta-form{grid-template-columns:1fr auto}}
.beta-email{min-height:48px;padding:0 14px;border:1.5px solid var(--hairline-deep);border-radius:var(--r-sm);font:inherit;font-size:16px;font-weight:500;color:var(--ink);background:var(--ground)}
.beta-email::placeholder{color:var(--muted);opacity:1}
.beta-email:focus{border-color:var(--indigo);outline:none}
.beta-email:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.beta-confirmed{margin-top:20px;font-size:18px;font-weight:700}
.beta-error{margin-top:10px;font-size:15px;color:var(--loss);min-height:1em}
.store-badges{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:var(--r-sm);background:var(--ink);color:#fff;font-weight:700;text-decoration:none}

/* ---- the live book: the one bordered object on the page ---- */
.book-panel{border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--ground);overflow:hidden}
.book-note{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:44ch}
.no-js .book{display:none}
@media (min-width:960px){.no-js .hero-grid{grid-template-columns:minmax(0,1fr)}}

.markets{display:grid}
.tick-row{display:grid;grid-template-columns:46px 1fr auto;align-items:baseline;gap:12px;width:100%;padding:11px 15px;background:none;border:0;border-bottom:1px solid var(--hairline);text-align:left;cursor:pointer;transition:background-color 140ms var(--ease-std)}
.tick-row:hover{background:var(--surface)}
.tick-row[aria-pressed="true"]{background:var(--indigo-tint);border-bottom-color:var(--indigo-line)}
.tick-sym{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--muted)}
.tick-row[aria-pressed="true"] .tick-sym{color:var(--indigo)}
.tick-price{font-size:17px;font-weight:700;letter-spacing:-.02em}
.tick-change{font-size:13.5px;font-weight:600;color:var(--muted)}
.tick-row.up .tick-change{color:var(--gain)}
.tick-row.down .tick-change{color:var(--loss)}
.tick-row.dip .tick-price{animation:dip 320ms var(--ease-std)}
@keyframes dip{0%{opacity:.35}100%{opacity:1}}

.ladder{position:relative;padding:4px 0 6px}
.ladder-head{display:flex;justify-content:space-between;padding:8px 15px 6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.ladder-head-bids{padding-top:6px;padding-bottom:4px}
.levels{display:grid}
/* price | depth | size. The bar is the level's size drawn to scale against the
   largest size on show, which is why the middle of the row is not empty. */
.lv{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;height:27px;padding:0 15px}
.lv-bar{justify-self:end;width:0;height:10px;border-radius:3px 0 0 3px;transition:width 160ms var(--ease-std)}
.asks .lv-bar{background:var(--loss-bar)}
.bids .lv-bar{background:var(--gain-bar)}
.lv-price,.lv-size{font-size:15px;font-weight:700;letter-spacing:-.015em}
.lv-price.ask{color:var(--loss)}
.lv-price.bid{color:var(--gain)}
.lv-size{font-weight:600;color:var(--muted)}
/* narrow screens show five levels a side, always the five nearest the spread */
@media (max-width:560px){.asks .lv:nth-child(-n+1),.bids .lv:nth-child(n+6){display:none}}

.mid{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0;padding:12px 15px;background:var(--near-ground);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.mid-label{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.mid-price{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.mid-side{margin-left:8px;font-size:14px;font-weight:700}
.mid-price.up,.mid-side.up{color:var(--gain)}
.mid-price.down,.mid-side.down{color:var(--loss)}
.mid-spread{text-align:right}
.mid-value{font-size:17px;font-weight:700;letter-spacing:-.02em}

.book-status{position:absolute;inset:0;display:grid;place-items:center;background:var(--ground);font-size:15px;color:var(--muted)}

/* the page's one authored moment: the ladder fills outward from the spread, once */
.book.is-first-paint .lv{animation:level-in 300ms var(--ease-out) both;animation-delay:calc(var(--i) * 32ms)}
@keyframes level-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ---- how it works ----
   One unbroken hairline runs through all three steps with a node at each one, so
   the rail itself carries the sequence and no 01 / 02 / 03 numerals are needed.
   It runs down the left on a phone and across the top on a wide screen. */
.steps{position:relative;display:grid;padding-left:30px}
.steps::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:var(--hairline)}
.steps li{position:relative}
.steps li + li{margin-top:30px}
.steps li::before{content:"";position:absolute;top:8px;left:-34px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.steps p{margin-top:10px;color:var(--muted);max-width:44ch}
@media (min-width:820px){
  .steps{grid-template-columns:repeat(3,1fr);padding:44px 0 0}
  .steps::before{left:0;right:0;top:18px;bottom:auto;width:auto;height:1px}
  .steps li{padding:0 36px 0 0}
  .steps li + li{margin-top:0;padding-left:36px}
  .steps li::before{top:-30px;left:0}
  .steps li + li::before{left:36px}
}

/* ---- screens ---- */
.screens{background:var(--surface);border-top:1px solid var(--hairline)}
.screens .section-head{border-bottom-color:var(--hairline-deep)}
.screens-track{display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);padding:0 var(--edge) 12px;scrollbar-width:thin}
.screens-track figure{flex:0 0 200px;scroll-snap-align:start}
.screens-track figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline-deep);font-size:14.5px;line-height:1.45;color:var(--muted)}
@media (min-width:900px){.screens-track{gap:26px}.screens-track figure{flex-basis:224px}}
.phone{display:block;background:var(--ink);border-radius:var(--r-phone);padding:5px}
.phone img{width:100%;height:auto;aspect-ratio:390 / 844;object-fit:cover;object-position:top;border-radius:21px;background:var(--surface)}

/* ---- the rules: a rulebook, not four cards ---- */
.rules{border-top:1px solid var(--hairline)}
.rule-list > div{display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--hairline)}
.rule-list > div:last-child{border-bottom:1px solid var(--hairline)}
.rule-list dt{font-size:19px;font-weight:800;letter-spacing:-.02em}
.rule-list dd{margin:0;color:var(--muted);max-width:64ch}
@media (min-width:760px){
  .rule-list > div{grid-template-columns:minmax(180px,1fr) 2.4fr;gap:40px;padding:22px 0}
}

/* ---- faq ---- */
.faq .section-head,.faq-list{max-width:780px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:first-child{border-top:1px solid var(--hairline)}
.faq summary{display:flex;gap:20px;justify-content:space-between;align-items:center;padding:18px 0;cursor:pointer;font-size:18px;font-weight:700;letter-spacing:-.015em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background-image:linear-gradient(var(--muted),var(--muted)),linear-gradient(var(--muted),var(--muted));background-size:14px 1.5px,1.5px 14px;background-position:center,center;background-repeat:no-repeat}
.faq details[open] summary::after{background-image:linear-gradient(var(--muted),var(--muted));background-size:14px 1.5px}
.faq summary:hover{color:var(--indigo)}
.faq details p{margin-top:-2px;padding-bottom:22px;max-width:66ch;color:var(--muted)}

/* ---- close ---- */
.final{background:var(--surface);border-top:1px solid var(--hairline)}
.final-inner{max-width:640px}
.final .beta-email{border-color:var(--hairline-deep);background:var(--ground)}

/* ---- footer ---- */
.footer{border-top:1px solid var(--hairline);padding:28px 0 44px;color:var(--muted);font-size:14px}
.footer .wrap{display:grid;gap:14px}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-links a{text-decoration:none;color:var(--muted);transition:color 140ms var(--ease-std)}
.footer-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (min-width:880px){
  .footer .wrap{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between}
}

/* ---- legal pages ---- */
.legal{padding:56px 0 88px}
.legal h1{font-size:clamp(32px,6vw,46px);max-width:none}
.legal .updated{margin-top:12px;color:var(--muted);font-size:15px}
.legal h2{margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);font-size:22px;letter-spacing:-.02em;line-height:1.3;max-width:none}
.legal p,.legal li{margin-top:14px;line-height:1.65;max-width:70ch}
.legal ul{list-style:disc;padding-left:22px}
.legal ol{list-style:decimal;padding-left:22px}
.legal li::marker{color:var(--muted)}
.legal .callout{margin-top:26px;padding:18px 20px;border:1px solid var(--hairline);background:var(--surface);border-radius:var(--r-md);font-weight:600}
.legal .callout p{margin-top:0}
.legal a{color:var(--indigo);text-underline-offset:3px}
.legal .breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0 0 18px;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.legal .breadcrumb li{margin-top:0}
.legal .breadcrumb li+li::before{content:"\203A";margin-right:8px}
.legal .breadcrumb a{color:var(--muted)}
.legal .breadcrumb a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}