/* Knowingo site styles.
   Every colour, radius and shadow comes from css/tokens.css, which is generated from
   design/tokens.json in the app repository. Never write a literal colour here.
   Run scripts/check_copy.py before committing. */

:root {
  /* Georgia carries content, a rounded face carries the interface. The split is the
     visible form of the promise that reading here is better than skimming a phone. */
  --font-serif: Georgia, "Songti SC", "STSong", "Noto Serif SC", "Times New Roman", serif;
  --font-ui: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Hiragino Sans GB", "Segoe UI", Roboto, sans-serif;

  --measure: 62ch;
  --page: 1120px;
  --gap-section: clamp(76px, 9vw, 132px);

  /* The mock device bezel. A drawing of a phone, not a brand radius, so it is local. */
  --radius-device: 40px;
  --radius-reader: 18px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: var(--radius-control);
}

/* ---------- layout ---------- */

.wrap {
  width: min(100%, var(--page));
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 44px);
}

.section { padding: var(--gap-section) 0; }
.section + .section { padding-top: 0; }

.rule { border-top: 1px solid var(--line); }

/* ---------- type ---------- */

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 5.6vw, 63px); letter-spacing: -0.038em; }
h2 { font-size: clamp(29px, 3.6vw, 43px); }
h3 { font-size: 21px; line-height: 1.3; letter-spacing: -0.02em; }

p { margin: 0 0 18px; max-width: var(--measure); }

h1 + .lead,
h2 + .lead,
h2 + p,
h3 + p { margin-top: 22px; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.68;
  color: var(--muted-strong);
}

.note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

strong { font-weight: 600; }

/* ---------- header ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.topbar[data-scrolled="true"] { border-bottom-color: var(--line); }

/* Over the coral hero the bar steps out of the way: no paper, the wordmark reversed,
   the links in paper. It comes back the moment the page moves, which is when there is
   paper behind it again. Without JavaScript the attribute is never set and the bar
   stays as it is, which is the readable state on every page. */
.topbar,
.brand .wordmark,
.topnav a { transition: background 0.25s ease, filter 0.25s ease, color 0.25s ease, border-color 0.2s ease; }

.home .topbar[data-scrolled="false"] {
  background: transparent;
  backdrop-filter: none;
}

.home .topbar[data-scrolled="false"] .wordmark { filter: brightness(0) invert(1); }

.home .topbar[data-scrolled="false"] .topnav a {
  color: color-mix(in srgb, var(--canvas) 86%, transparent);
}

.home .topbar[data-scrolled="false"] .topnav a:hover { color: var(--canvas); }

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: 13px; }

/* The app icon, at the proportion iOS masks it to. The icon's ground is the canvas
   token, so on this page the square disappears and Marco stands on the paper. */
.brand .appmark {
  /* The icon carries Apple's safe area inside it, so Marco is about 60 percent of
     the box. 56px here puts him at the presence the wordmark lockup had. */
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 22.4%;
}

/* The wordmark, as the generated asset rather than type. Marco carries the mark, so
   the wordmark stands alone here, which is the same pairing the channel banner uses. */
.brand .wordmark {
  width: auto;
  height: 22px;
  display: block;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
}

.topnav a { color: var(--muted-strong); text-decoration: none; }
.topnav a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .topnav .hide-small { display: none; }
  .brand .appmark { width: 46px; height: 46px; }
  .brand .wordmark { height: 19px; }
  .brand { gap: 10px; }
}

/* ---------- buttons ---------- */

/* The chunky button is the signature interaction: a solid bottom edge, and the button
   sinks by exactly that edge when pressed. The edge is drawn with a spreadless offset
   rather than a blurred shadow token, because it is an edge and not a shadow. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-control);
  font-family: var(--font-ui);
  /* 19px at 700 clears the AA large text threshold, which is what white on coral
     needs: the fill is a recorded 3.16:1. */
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.09s ease, box-shadow 0.09s ease, background 0.15s ease;
}

.btn-primary {
  background: var(--coral);
  color: white;
  box-shadow: 0 4px 0 0 var(--coral-dark);
}

.btn-primary:hover { background: var(--coral-dark); }

.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 var(--coral-dark);
}

.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 4px 0 0 var(--line);
}

.btn-quiet:hover { background: var(--surface-tint); }

.btn-quiet:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 0 var(--line);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

/* ---------- hero ---------- */

.hero { padding: clamp(48px, 7vw, 92px) 0 var(--gap-section); }

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(36px, 6vw, 78px);
  align-items: center;
}

.hero p { max-width: 46ch; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-art { margin-top: 12px; }
}

/* The hero band. The launch ads put the product on coral and it is the strongest thing
   the brand owns, so the first screen borrows it. The ground is the ads' deep coral
   rather than their bright one: paper text on bright coral measures 2.96:1, under the
   3:1 floor, while this ground gives the headline 6.31:1 and the small print 4.49:1.
   The bright coral survives as a glow in the upper right, behind the screens, where no
   text sits. Everything below this band stays paper. */

/* The bar is sticky, so it holds its own 72px of the flow. The band is pulled up under
   it and pads that height back, which is what puts the lockup on coral. */
.home .hero {
  margin-top: -72px;
  padding-top: calc(72px + clamp(48px, 7vw, 92px));
}

.hero {
  background:
    radial-gradient(84% 74% at 79% 10%,
      color-mix(in srgb, var(--coral) 94%, var(--surface)) 0%,
      color-mix(in srgb, var(--coral) 62%, transparent) 40%,
      transparent 74%),
    linear-gradient(158deg,
      color-mix(in srgb, var(--coral-dark) 84%, var(--ink)) 0%,
      color-mix(in srgb, var(--coral-dark) 70%, var(--ink)) 48%,
      color-mix(in srgb, var(--coral-dark) 54%, var(--ink)) 100%);
  padding-bottom: clamp(56px, 6vw, 86px);
  overflow: hidden;
}

.hero h1 { color: var(--canvas); }
.hero .lead { color: color-mix(in srgb, var(--canvas) 92%, transparent); }
.hero .note { color: color-mix(in srgb, var(--canvas) 78%, transparent); }

/* On one column the art sits below the copy, so the glow moves under it. */
@media (max-width: 900px) {
  .hero {
    background:
      radial-gradient(120% 42% at 76% 88%,
        color-mix(in srgb, var(--coral) 94%, var(--surface)) 0%,
        color-mix(in srgb, var(--coral) 58%, transparent) 44%,
        transparent 76%),
      linear-gradient(168deg,
        color-mix(in srgb, var(--coral-dark) 84%, var(--ink)) 0%,
        color-mix(in srgb, var(--coral-dark) 66%, var(--ink)) 100%);
  }
}

/* Paper is the action colour once the ground is coral. */
.hero .btn-primary {
  background: var(--canvas);
  color: var(--ink);
  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--canvas) 58%, var(--ink));
}

.hero .btn-primary:hover { background: var(--surface); }

.hero .btn-primary:active {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--canvas) 58%, var(--ink));
}

.hero .btn-quiet {
  background: transparent;
  color: var(--canvas);
  border-color: color-mix(in srgb, var(--canvas) 48%, transparent);
  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--canvas) 28%, transparent);
}

.hero .btn-quiet:hover { background: color-mix(in srgb, var(--canvas) 15%, transparent); }

.hero .btn-quiet:active { box-shadow: 0 0 0 0 transparent; }

.hero .device { box-shadow: 0 34px 76px color-mix(in srgb, var(--ink) 46%, transparent); }

/* ---------- the reader mock ---------- */

.device {
  width: min(100%, 348px);
  margin: 0 auto;
  padding: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-device);
  box-shadow: var(--shadow-floating);
}

.reader {
  background: var(--canvas);
  border-radius: var(--radius-reader);
  padding: 22px 22px 26px;
  overflow: hidden;
}

.reader-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.reader-bar span:nth-child(2) { color: var(--coral); }

/* The size control is a specimen, so it keeps its own case. */
.reader-bar span:last-child { text-transform: none; font-size: 12px; }

.track {
  height: 4px;
  margin: 14px 0 22px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.track i { display: block; height: 100%; background: var(--coral); }

.reader h4 {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.reader p {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.72;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}

.pips { display: flex; gap: 6px; margin-top: 22px; }

.pips i {
  height: 5px;
  flex: 1;
  border-radius: 5px;
  background: var(--line);
}

.pips i[data-done="true"] { background: var(--coral); }

/* ---------- the hero fan ----------
   Two more screens stand behind the reader: the shelf on the left, the length and
   language choice on the right. They are decoration, so they carry aria-hidden and
   they leave the layout entirely below 900px. */

.stack { position: relative; width: min(100%, 330px); margin: 0 auto; }

.device-front { position: relative; z-index: 2; }

.device-side {
  position: absolute;
  top: 30px;
  bottom: -30px;
  width: 86%;
  z-index: 1;
  padding: 11px;
}

.device-left { left: -25%; transform: rotate(-8deg); }
.device-right { right: -25%; transform: rotate(8deg); }

.shelf,
.picker {
  height: 100%;
  overflow: hidden;
  background: var(--canvas);
  border-radius: var(--radius-reader);
  padding: 19px 17px;
}

.shelf h4,
.picker h4 { margin: 0; font-size: 19px; }

.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.shelf-head span { font-family: var(--font-ui); font-size: 10px; color: var(--muted); }

.shelf-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.shelf-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 11px;
}

.shelf-list .cover { grid-row: 1 / 3; }

.shelf-list b {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  align-self: end;
}

.shelf-list small {
  align-self: start;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Five covers. Each one is a ground, one graphic move, and nothing else: at this size
   a title on the cover would be a smudge, and the shelf sets the title beside it. */

.cover {
  position: relative;
  width: 34px;
  height: 48px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-hairline);
}

.cover::before,
.cover::after { content: ""; position: absolute; }

.cover-a { background: var(--ink); }
.cover-a::after {
  right: -7px;
  top: -7px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--coral);
}

.cover-b { background: var(--mint); }
.cover-b::after {
  left: 6px;
  top: 20px;
  width: 20px;
  height: 1px;
  background: var(--muted);
  box-shadow: -3px 5px 0 var(--muted), -6px 10px 0 var(--muted);
}

.cover-c { background: var(--amber-surface); }
.cover-c::before { inset: 4px; border: 1px solid var(--muted); }
.cover-c::after {
  left: 50%;
  top: 16px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--coral);
}

.cover-d { background: var(--neutral-surface); }
.cover-d::after {
  left: -6px;
  top: 14px;
  width: 48px;
  height: 2px;
  transform: rotate(36deg);
  background: var(--coral);
}

.cover-e { background: var(--surface-deep); }
.cover-e::after { left: 5px; right: 5px; top: 5px; height: 17px; background: var(--ink); }

.pick {
  margin-top: 9px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.pick-on { border-color: var(--coral); background: var(--coral-soft); }

.pick b {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.02em;
}

.pick small { font-size: 9.5px; color: var(--muted); }

.pick-label {
  margin: 16px 0 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.pick-pills { display: flex; gap: 6px; }

.pick-pills span {
  flex: 1;
  padding: 9px 0;
  text-align: center;
  border-radius: 7px;
  background: var(--neutral-surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.pick-pills .pill-on { background: var(--ink); color: var(--surface); }

.pick-cta {
  margin-top: 17px;
  padding: 11px 0;
  text-align: center;
  border-radius: 10px;
  background: var(--coral);
  color: var(--surface);
  font-size: 11.5px;
  font-weight: 700;
}

@media (max-width: 1080px) {
  .device-left { left: -14%; }
  .device-right { right: -14%; }
}

@media (max-width: 900px) {
  .device-side { display: none; }
}

/* ---------- motion ----------
   Motion lives in the marketing chrome and stops at the reader's edge, which is the
   promise the reading section makes further down the page. The reduce motion block at
   the end of this file switches all of it off. */

@keyframes brand-arrive {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* Marco looks up every so often. Two thirds of a second of movement in eight, so he
   reads as alive without asking to be watched. */
@keyframes marco-nod {
  0%, 88%, 100% { transform: none; }
  91% { transform: rotate(-8deg) translateY(-2px); }
  95% { transform: rotate(5deg); }
  98% { transform: rotate(-2deg); }
}

@keyframes track-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes pip-in {
  from { opacity: 0; transform: scaleX(0.15); }
  to { opacity: 1; transform: none; }
}

.brand { animation: brand-arrive 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

.brand .appmark {
  transform-origin: 50% 78%;
  animation: marco-nod 8s ease-in-out 2.4s infinite;
}

/* The fan opens once, on arrival, out of a squared up stack. It used to open under the
   pointer, and that was wrong: the screen being pointed at moved out from under the
   pointer, lost the hover, moved back, and flickered. The hover that remains is on the
   art column, which never moves, so nothing can chase the pointer. */
@keyframes fan-left {
  from { opacity: 0; transform: rotate(0deg) translate(52px, 18px) scale(0.94); }
  to { opacity: 1; transform: rotate(-8deg) translate(0, 0) scale(1); }
}

@keyframes fan-right {
  from { opacity: 0; transform: rotate(0deg) translate(-52px, 18px) scale(0.94); }
  to { opacity: 1; transform: rotate(8deg) translate(0, 0) scale(1); }
}

@keyframes fan-front {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.device-front { animation: fan-front 0.72s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.device-left { animation: fan-left 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.16s backwards; }
.device-right { animation: fan-right 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.26s backwards; }

.stack,
.device-front,
.device-side { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* Pointing at the column deals the three screens out. The column is 430px and three
   screens are 330px each, so the whole stack steps back to 86 percent first: at that
   size the fan clears the copy on its left and stays inside the viewport on its right,
   which it does not do at full size. The trigger is the column, which never moves, so
   nothing chases the pointer. */
.hero-art:hover .stack { transform: scale(0.86) translateY(-8px); }
.hero-art:hover .device-front { transform: translateY(4px); }
.hero-art:hover .device-left { transform: rotate(-5deg) translate(-86px, -6px); }
.hero-art:hover .device-right { transform: rotate(5deg) translate(86px, -6px); }

/* Whichever one is pointed at comes to the top and straightens up. It lifts by a few
   pixels only, so it stays under the pointer. */
.device-side:hover { z-index: 3; }
.hero-art:hover .device-left:hover { transform: rotate(-2deg) translate(-86px, -16px); }
.hero-art:hover .device-right:hover { transform: rotate(2deg) translate(86px, -16px); }

/* A narrower column gives the fan less room, so it steps back further and spreads less. */
@media (max-width: 1180px) {
  .hero-art:hover .stack { transform: scale(0.8) translateY(-8px); }
  .hero-art:hover .device-left { transform: rotate(-6deg) translate(-72px, -6px); }
  .hero-art:hover .device-right { transform: rotate(6deg) translate(72px, -6px); }
  .hero-art:hover .device-left:hover { transform: rotate(-3deg) translate(-72px, -16px); }
  .hero-art:hover .device-right:hover { transform: rotate(3deg) translate(72px, -16px); }
}

/* ---------- cards and grids ---------- */

.grid {
  display: grid;
  gap: 20px;
  margin-top: 46px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  box-shadow: var(--shadow-card);
}

.card { transition: transform 0.2s ease, box-shadow 0.2s ease; }

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-floating);
}

.card h3 { margin-bottom: 10px; }
.card p { font-size: 16px; color: var(--muted-strong); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
}

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the combination matrix ---------- */

.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.matrix th,
.matrix td {
  padding: 20px 22px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: top;
}

.matrix tr:last-child th,
.matrix tr:last-child td { border-bottom: 0; }

.matrix th:last-child,
.matrix td:last-child { border-right: 0; }

.matrix thead th {
  background: var(--surface-sunken);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

.matrix tbody th {
  background: var(--surface-tint);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.02em;
  width: 26%;
}

.matrix tbody th small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
}

.matrix td { font-size: 15px; color: var(--muted-strong); }

@media (max-width: 700px) {
  .matrix th, .matrix td { padding: 15px 14px; }
  .matrix tbody th { width: 34%; font-size: 17px; }
  .matrix td { font-size: 14px; }
}

@media (max-width: 620px) {
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: auto; }
  .matrix thead { display: none; }
  .matrix tbody th,
  .matrix td { border-right: 0; border-bottom: 1px solid var(--line); }
  .matrix tbody th { width: auto; font-size: 19px; padding: 18px 18px 14px; }
  .matrix td { padding: 16px 18px; font-size: 15px; }
  .matrix tr:last-child td:last-child { border-bottom: 0; }

  .matrix td::before {
    content: attr(data-col);
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ---------- the gate list ---------- */

.gates { margin: 34px 0 0; padding: 0; list-style: none; }

.gates li {
  position: relative;
  padding: 0 0 18px 34px;
  max-width: var(--measure);
  color: var(--muted-strong);
}

.gates li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 9px;
  background: var(--coral);
}

.gates li:last-child { padding-bottom: 0; }
.gates b { color: var(--ink); font-weight: 600; }

/* ---------- marco ---------- */

.marco {
  display: block;
  width: min(46%, 190px);
  margin: 0 auto;
}

.marco-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 34px;
  background: var(--surface-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

/* ---------- access ---------- */

.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 46px; }

@media (max-width: 700px) { .tiers { grid-template-columns: minmax(0, 1fr); } }

.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px 28px;
}

.tier[data-emphasis="true"] { border-color: var(--coral); box-shadow: var(--shadow-card); }

.tier h3 { margin-bottom: 6px; }

.tier ul { margin: 18px 0 0; padding: 0; list-style: none; }

.tier li {
  padding: 0 0 12px 26px;
  position: relative;
  font-size: 16px;
  color: var(--muted-strong);
}

.tier li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: var(--coral);
}

.tier li:last-child { padding-bottom: 0; }

/* ---------- signup ---------- */

.callout {
  padding: clamp(38px, 6vw, 66px) clamp(28px, 5vw, 60px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.callout h2 { margin-bottom: 16px; }
.callout p { margin-left: auto; margin-right: auto; }
.callout .actions { justify-content: center; }

/* ---------- faq ---------- */

.faq { margin-top: 40px; border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: -0.02em;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.18s ease;
}

.faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }

.faq .answer { padding: 0 0 24px; color: var(--muted-strong); font-size: 16px; }

/* ---------- footer ---------- */

.footer {
  padding: 54px 0 64px;
  border-top: 1px solid var(--line);
  background: var(--surface-tint);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  justify-content: space-between;
}

.footer img { width: 148px; }

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 15px;
}

.footer nav a { color: var(--muted-strong); text-decoration: none; }
.footer nav a:hover { color: var(--ink); }

.footer .note { margin-top: 16px; max-width: 44ch; }

.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: 14px;
  text-decoration: none;
  color: var(--muted-strong);
}

.langswitch:hover { color: var(--ink); background: var(--surface-tint); }

/* ---------- the language hint ---------- */

.langhint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 40;
  display: none;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 32px);
  padding: 14px 16px 14px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-modal);
  font-size: 15px;
}

.langhint[data-open="true"] { display: flex; }

.langhint a {
  font-weight: 600;
  color: var(--coral);
  text-decoration: none;
  white-space: nowrap;
}

.langhint button {
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

/* ---------- prose pages ---------- */

.prose { padding: clamp(48px, 7vw, 84px) 0 0; }
.prose .wrap { max-width: 760px; }
.prose h1 { margin-bottom: 18px; }
.prose h2 { font-size: clamp(23px, 2.4vw, 29px); margin: 52px 0 16px; }
.prose h3 { margin: 32px 0 10px; }
.prose p, .prose li { color: var(--muted-strong); max-width: none; }
.prose ul { padding-left: 22px; margin: 0 0 18px; }
.prose li { margin-bottom: 9px; }
.prose .updated { color: var(--muted); font-size: 15px; }

/* ---------- motion ---------- */

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

/* ---------- Chinese ---------- */

html[lang^="zh"] body { line-height: 1.85; }

html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3 {
  letter-spacing: 0;
  line-height: 1.35;
}

/* A Han heading has no ascenders to lose, so a long one just runs to the full measure.
   Eighteen characters is about where a line stops being scannable. */
html[lang^="zh"] h1,
html[lang^="zh"] h2 { max-width: 18ch; }

html[lang^="zh"] .reader p { line-height: 1.9; }
html[lang^="zh"] .matrix tbody th { line-height: 1.4; }