/* Versa case study — rebuilt from Figma "works-versa" (pYerAoMQJ0vxt2FurFNnXc, node 6628:1392), 1440 desktop.
   Everything inside .artboard is authored at 1440px and scaled down with `zoom` by js/works/versa.js on narrower windows.
   Header, footer, ShapeGrid background, fonts and base reset come from the site (css/style.css etc.).
   App screens and boards are Figma exports (2x webp) in assets/works/versa/; all copy is live text.
   Vertical gaps are the Figma distances, set per block with --mt. */

/* Geist ships 400–700 only; the Bold file also answers 800 (the "Versa Wallet" lockup) so nothing falls back to faux bold. */
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }

:root {
  --ink-1: #2e2e2e;     /* page title */
  --ink-2: #363636;     /* section headings, stats */
  --ink-3: #4a4a4a;     /* sub headings */
  --ink-card: #242424;  /* card titles */
  --body: #5e5e5e;
  --caption: #757575;
  --muted: #ababab;
  --label: #b5b5b5;
  --panel: #f5f5f5;
  --rule: #ebebeb;
  --ok: #2fb36b;
  --bad: #e5484d;
  --versa: #31e530;     /* Versa brand green (hero) */
  --stat-orange: #f88a1d;
  --stat-green: #0ad409;

  --col: 1000px;        /* content column */
  --col-x: 295px;       /* content column left edge */
}

html { scroll-behavior: smooth; }
h1, h2, h3, figure { margin: 0; }
.artboard img { display: block; }

/* ---------- Content board (1440 wide, zoomed to fit narrower windows) ---------- */
.artboard {
  width: 1440px; margin: 0 auto; color: var(--body); zoom: var(--board-zoom, 1);
  /* Everything on the board is Geist (same weights as before); CJK falls to the system Chinese face. */
  font-family: "Geist", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

/* ---------- Hero (black, 1003 tall) ---------- */
.vh { height: 1003px; background: #000; color: #fff; overflow: hidden; }
/* Wide windows: the black runs out to both window edges. A spread shadow paints it sideways only
   (clip-path keeps it to the hero's height); shadows add no scroll width. Content stays in the 1440 board. */
.vh { box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); }
.vh__intro { padding: 84px 0 0 318px; }
.vh__back {
  display: inline-block; font-size: 16px; line-height: 20px; font-weight: 600; text-transform: uppercase; white-space: pre;
  color: #fff; transition: color var(--hover-dur) var(--hover-ease);
}
.vh__back:hover { color: var(--versa); }
.vh__lockup { display: flex; align-items: center; gap: 24px; margin-top: 88px; }
.vh__lockup img { width: 80px; height: 80px; }
.vh__name { font-size: 44px; line-height: 55px; font-weight: 800; color: var(--versa); }
.vh__url {
  display: inline-block; margin-top: 16px; font-family: inherit;
  font-size: 18px; line-height: 23px; font-weight: 500; color: var(--versa);
}
.vh__lede { width: 930px; /* Figma box 918; Geist sets ~0.7% wider in browsers, this keeps Figma's line breaks */ font-family: inherit; font-size: 22px; line-height: 29px; font-weight: 700; }
.vh__lede:first-of-type { margin-top: 48px; }
.vh__lede + .vh__lede { margin-top: 32px; }
.vh__devices { width: 1440px; height: auto; margin-top: 93px; }

/* ---------- Page body ---------- */
.case { width: var(--col); margin: 0 auto; padding-top: 80px; }   /* single column, centred on the 1440 board */
.vs { margin-top: var(--mt, 74px); }

/* Type (Geist) */
.title { font-size: 32px; line-height: 44.8px; font-weight: 700; color: var(--ink-1); }
.eyebrow { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; color: var(--label); margin-bottom: 16px; }
.kicker { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-3); margin-bottom: 8px; }
.h2 { font-size: 24px; line-height: 36px; font-weight: 500; color: var(--ink-2); }
.h3 { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--ink-3); }
.h4 { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink-card); }
.text { font-size: 16px; line-height: 28px; color: var(--body); }
.text strong { font-weight: 600; color: var(--ink-2); }
.small { font-size: 14px; line-height: 22px; color: var(--body); }
.h2 + .text { margin-top: 16px; }

/* Meta */
.meta { margin-top: 64px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.meta .eyebrow { margin-bottom: 8px; }

/* Bullets (design goals / approach) */
.bullets li { position: relative; padding-left: 20px; }
.bullets li::before { content: ""; position: absolute; left: 7px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.bullets--spaced li + li { margin-top: 9px; }

/* Cards */
.card { background: var(--panel); border-radius: 16px; padding: 24px; }
.stat { font-size: 24px; line-height: 31.2px; font-weight: 500; color: var(--ink-2); margin-bottom: 4px; }
.stat--orange { font-weight: 600; color: var(--stat-orange); }
.stat--green { color: var(--stat-green); }
.stat-note { color: var(--muted); }
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Grey board holding a Figma export; the image is the board at its Figma size. */
.board { background: var(--panel); }
.board img { width: 100%; height: auto; }
.board--titled { position: relative; }
.board__title { position: absolute; left: 16px; top: 16px; }

/* Two columns: problem + goals / approach */
.cols { display: grid; grid-template-columns: 468px 469px; column-gap: 48px; }
.cols--approach { grid-template-columns: 468px 468px; column-gap: 64px; }
.halves { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }

/* 背景: copy (532) + phone board (436) */
.split { display: grid; grid-template-columns: 532px 436px; justify-content: space-between; align-items: start; }
/* The phone board grows to the copy column's height (English copy runs taller than Figma); the phone stays centred on the grey. */
.split > .board { align-self: stretch; display: flex; align-items: center; }
.split__stats { display: grid; gap: 18px; margin-top: 32px; width: 528px; }
.split__stats .card { height: 139px; }

/* Three thresholds: illustration + title + text */
.gate { min-height: 272px; padding: 19px 24px 24px 21px; }
.gate img { width: 120px; height: 120px; }
.gate .h4 { margin: 11px 0 0 3px; }
.gate .small { margin-left: 3px; }

/* Threshold → AA answer → new problem table */
.map { margin-top: 32px; border-top: 1px solid var(--rule); }
.map__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; padding: 15px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.map__row--head { font-size: 13px; font-weight: 600; color: var(--label); padding: 13px 0 14px; }
.map__muted { color: var(--muted); }
/* Tag sits on its own line under the problem, so every row reads the same. */
.map__tag { display: table; margin-top: 6px; padding: 2px 8px; border-radius: 99px; background: var(--panel); font-style: normal; font-size: 12px; line-height: 16px; color: var(--caption); white-space: nowrap; }

/* Reframe: three key questions joined by lines */
.steps { display: grid; grid-template-columns: 240px 1fr 240px 1fr 240px; align-items: start; margin-top: 40px; }
.step { display: grid; justify-items: center; gap: 24px; text-align: center; }
.step__visual { width: 240px; height: 150px; border-radius: 16px; display: grid; place-items: center; background: var(--panel); }
.step__visual span { padding: 6px 12px; border-radius: 99px; background: #2e2e2e; color: #fff; font-size: 12px; line-height: 17px; font-weight: 600; }
.step .h4 { color: var(--ink-2); max-width: 240px; text-wrap: balance; }
.arrow { height: 2px; margin: 74px 14px 0; background: #eeeeee; position: relative; }
.arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border: solid #e2e2e2; border-width: 1.5px 1.5px 0 0; rotate: 45deg; }

/* Impact */
.rule-top { border-top: 1px solid var(--rule); padding-top: 33px; }
.impact-cols { display: grid; grid-template-columns: 476px 492px; justify-content: space-between; margin-top: 32px; }
.trend { margin-top: 7px; }
.trend li { display: flex; gap: 11px; align-items: baseline; }
.trend span, .outcomes .h4 { text-wrap: balance; }   /* no single word left on the second line */
.trend b { font-weight: 600; font-size: 13px; width: 13px; flex: none; text-align: center; }
.trend .up { color: var(--ok); }
.trend .down { color: var(--bad); }
.outcomes { display: grid; gap: 16px; margin-top: 24px; }
.outcomes .card { padding-bottom: 23px; }
.outcomes .stat { margin-bottom: 22px; }
.outcomes .h4 { margin-bottom: 8px; }

/* ---------- Pure white page (this template only) ----------
   The site default is #f2f2f2 with grid lines a touch lighter (#f7f7f7).
   On white the lines have to sit just below the background instead.
   The strip behind the sticky header is black, so the dark header sits on black at the top. */
:root {
  --bg: #fff;
  --shape-grid-line: #fcfcfc;
  --shape-grid-hover: #e6e6e6;
  --shape-grid-hover-fill: #f5f5f5;
}
body { background: linear-gradient(#000, #000) top / 100% 87px no-repeat, var(--bg); }

/* ---------- Tablets and phones (≤1023px) ----------
   Above 1023 the whole .artboard is the 1440 Figma layout zoomed down. Below that, zooming makes every line
   too small, so the board stops zooming and reflows: the column takes the window width (on the site gutter),
   the copy keeps readable sizes and wraps, and multi-column rows stack. Pictures scale to the column. */
@media (max-width: 1023px) {
  .artboard { width: auto; zoom: 1; }
  .artboard img { max-width: 100%; height: auto; }

  /* Hero */
  .vh { height: auto; }
  .vh__intro { padding: 40px var(--gutter) 0; }
  .vh__lockup { margin-top: 56px; gap: 18px; }
  .vh__lockup img { width: 64px; height: 64px; }
  .vh__name { font-size: 36px; line-height: 1.2; }
  .vh__url { margin-top: 14px; font-size: 16px; overflow-wrap: anywhere; }
  .vh__lede { width: auto; max-width: 640px; font-size: 20px; line-height: 1.4; }
  .vh__lede:first-of-type { margin-top: 40px; }
  .vh__lede + .vh__lede { margin-top: 24px; }
  .vh__devices { width: 100%; margin-top: 56px; }

  /* Column */
  .case { width: auto; max-width: var(--col); padding: 64px var(--gutter) 0; box-sizing: content-box; }
  .vs { margin-top: calc(var(--mt, 74px) * 0.8); }
  .title { font-size: 28px; line-height: 1.4; }

  .meta { margin-top: 40px; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .cols, .cols--approach { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .split { grid-template-columns: 1fr; row-gap: 32px; }
  .split__stats { width: auto; grid-template-columns: 1fr 1fr; gap: 16px; }
  .split__stats .card { height: auto; }
  .split > .board { justify-content: center; }
  .split > .board img { width: min(436px, 100%); }
  .gate { min-height: 0; }

  /* Reframe: the three steps share the width; the joining lines shrink */
  .steps { grid-template-columns: 1fr 40px 1fr 40px 1fr; }
  .step__visual { width: 100%; aspect-ratio: 240 / 150; height: auto; }
  .arrow { margin: 0 6px; align-self: center; translate: 0 -24px; }

  .impact-cols { grid-template-columns: 1fr; row-gap: 48px; }
  .halves { column-gap: 16px; }

  /* Wide pictures keep their aspect; the inline 1000px width gives way to the column. */
  .vs > img[style*="width"] { width: 100% !important; }
}

@media (max-width: 767px) {
  .vh__intro { padding-top: 32px; }
  .vh__lockup { margin-top: 40px; gap: 14px; }
  .vh__lockup img { width: 56px; height: 56px; }
  .vh__name { font-size: 30px; }
  .vh__url { font-size: 15px; }
  .vh__lede { font-size: 17px; line-height: 1.45; }
  .vh__lede:first-of-type { margin-top: 32px; }
  .vh__lede + .vh__lede { margin-top: 20px; }
  .vh__devices { margin-top: 40px; }

  .case { padding-top: 48px; }
  .vs { margin-top: calc(var(--mt, 74px) * 0.65); }
  .title { font-size: 24px; }
  .title br, .meta br { display: none; }
  .h2 { font-size: 20px; line-height: 30px; }
  .h3 { font-size: 17px; line-height: 26px; }
  .text { font-size: 15px; line-height: 25px; }

  .grid--2, .grid--3, .split__stats, .cols, .cols--approach, .halves { grid-template-columns: 1fr; }
  .cols, .cols--approach { row-gap: 28px; }
  .halves { row-gap: 16px; }
  .gate { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; align-items: start; padding: 18px; }
  .gate img { width: 72px; height: 72px; grid-row: span 2; }
  .gate .h4 { margin: 4px 0 4px; }
  .gate .small { margin: 0; }

  /* Hurdle → answer → new problem: each row becomes a small stacked card with its column name above each line */
  .map { border-top: 0; }
  .map__row--head { display: none; }
  .map__row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .map__row > span::before { display: block; margin-bottom: 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--label); }
  .map__row > span:nth-child(1)::before { content: "Traditional wallet hurdle"; }
  .map__row > span:nth-child(2)::before { content: "Account abstraction’s answer"; }
  .map__row > span:nth-child(3)::before { content: "The new design problem"; }
  .map__row > span + span { margin-top: 8px; }

  /* Reframe: the steps stack, joined by short vertical lines */
  .steps { grid-template-columns: 1fr; justify-items: center; }
  .step__visual { width: min(280px, 100%); }
  .arrow { width: 2px; height: 32px; margin: 16px 0; translate: none; }
  .arrow::after { right: auto; left: -3px; top: auto; bottom: 0; rotate: 135deg; }

  /* Titled boards: the title sits above the picture instead of over it */
  .board__title { position: static; padding: 14px 16px 0; }
}