/* Vervly: the page composition, 2026-10-07.

   styles.css carries the tokens and every component (buttons, panes, the
   divider, the folds, the progress card, the sheet, the construction layer).
   This file is the page around them: the top row, the hero, the tool card,
   the trust row, the steps, the pricing columns and the Berkeley section.
   Loaded after styles.css and brand/footer.css. Rules: web/DESIGN.md. */

/* ── the top row ───────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; gap: var(--s-6);
  padding: calc(var(--s-5) + env(safe-area-inset-top, 0px)) 0 var(--s-4);
  position: relative;
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, var(--accent-line), var(--blue-line) 30%, var(--line) 70%, transparent);
}
.top-nav { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-2); }
.top-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3);
  border-radius: var(--r); color: var(--fg-2); font-size: var(--t-2); font-weight: 500; text-decoration: none;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.top-link:hover { color: var(--fg); background: var(--g2); }
.top-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.top-link[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--r) var(--r) 0 0; }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.top .account { display: flex; align-items: center; gap: var(--s-2); }
.top .balance {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 var(--s-3);
  border: 1px solid var(--gold-line); border-radius: 999px;
  background: var(--accent-wash); color: var(--fg); font-size: var(--t-1); white-space: nowrap;
}
.top .balance .num { color: var(--accent); }

/* the service pill: when everything is fine it is a gold dot with the words
   on hover; the words show by themselves only while connecting or when
   something is wrong, which is when they matter */
.top .pill[data-kind="ok"] { font-size: 0; gap: 0; }
.top .pill[data-kind="ok"]::before { width: 8px; height: 8px; }

/* ── the hero ──────────────────────────────────────────────────────────── */
.hero-app {
  max-width: 76ch;
  margin: 0 auto;
  padding: var(--s-10) 0 var(--s-8);
  text-align: center;
  /* stretch, not center: a centred grid item takes its max-content width and a
     long headline then overflows a phone instead of wrapping */
  display: grid; justify-items: stretch; gap: var(--s-4);
}
.hero-app > * { min-width: 0; max-width: 100%; }
.hero-app .hero-eyebrow { justify-self: center; }
.hero-app .hero-p { margin-left: auto; margin-right: auto; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin: 0;
  font-family: var(--cond); font-weight: 600; font-size: var(--t-4); letter-spacing: 0.02em;
  color: var(--accent);
}
.hero-eyebrow::before, .hero-eyebrow::after { content: ""; width: 24px; height: 2px; background: var(--accent); flex: none; }
.hero-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.125rem);
  line-height: 1.08; letter-spacing: -0.014em;
  color: var(--fg); margin: 0; text-wrap: balance;
}
.hero-p { margin: 0; max-width: 60ch; font-size: var(--t-4); line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }

/* the trust row: four short facts, each with a gold tick */
.trust {
  list-style: none; margin: var(--s-3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6);
}
.trust li {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-1); color: var(--fg-2); white-space: nowrap;
}
.trust li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none;
}

/* ── the tool card ─────────────────────────────────────────────────────── */
.tool {
  background: var(--g2);
  border: 1px solid var(--line);
  border-radius: calc(var(--r) * 2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 24px 60px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
/* inside the card the panes are flush: no borders of their own, one hairline between */
.tool .instrument {
  grid-template-columns: minmax(0, var(--col-before)) 16px minmax(0, 1fr);
  background: var(--g2);
}
.tool .pane { background: transparent; border: 0; border-radius: 0; }
.tool .pane-before { border-right: 0; }
.tool .pane-head {
  background: var(--blue-wash);
  border-bottom: 1px solid var(--line);
  min-height: 52px; padding: var(--s-3) var(--s-6);
}
.tool .pane-title { color: var(--fg); font-size: var(--t-3); }
.tool .pane-body { min-height: 320px; padding: var(--s-6) var(--s-8) var(--s-8); }
.tool .pane-head { flex-wrap: wrap; row-gap: var(--s-1); }
.tool .reading { white-space: normal; }
.tool .pane-foot { background: var(--g1); border-top: 1px solid var(--line); }
.tool .divider { border-radius: 0; background: var(--g2); }
.tool .divider::before { top: 0; bottom: 0; }
.tool .instrument[data-outcome="flipped"] .pane-after { box-shadow: inset 0 0 0 1px rgba(154, 212, 106, 0.35); }
.tool .instrument[data-outcome="held"]    .pane-after { box-shadow: inset 0 0 0 1px rgba(240, 132, 102, 0.35); }
.tool .instrument[data-outcome="mixed"]   .pane-after { box-shadow: inset 0 0 0 1px rgba(232, 194, 90, 0.35); }

/* the console as the action bar under the panes */
.tool .console {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: var(--s-6);
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  background: var(--g1);
}
.tool .console-act { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.tool .judge { margin: 0; }
.tool .status { text-align: right; max-width: none; }
.console-go { display: flex; align-items: center; gap: var(--s-4); }
.btn-go {
  min-height: 44px; padding: 0 var(--s-8);
  font-size: var(--t-3); font-weight: 600;
  border-radius: var(--r);
}

/* the folds and the legend sit inside the card on the deeper ground */
.tool .legend { margin: 0; padding: var(--s-2) var(--s-6) 0; background: var(--g1); }
.tool .fold { border-top: 1px solid var(--line); background: var(--g1); margin: 0; }
.tool .fold:first-of-type { margin-top: 0; }
.tool .fold-summary { padding: var(--s-4) var(--s-6); }
.tool .fold-body { padding: 0 var(--s-6) var(--s-6); }
.tool .more-body { padding-left: var(--s-6); }

/* ── document pages (How it works) ─────────────────────────────────────── */
.page-doc { max-width: 1100px; margin: 0 auto; }
.doc-head { padding: var(--s-10) 0 var(--s-4); display: grid; gap: var(--s-4); justify-items: start; }
.doc-head .hero-eyebrow::after { display: none; }
.doc-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem); line-height: 1.08; letter-spacing: -0.014em;
  color: var(--fg); margin: 0; text-wrap: balance;
}
.doc-lede { margin: 0; max-width: 60ch; font-size: var(--t-4); line-height: 1.6; color: var(--fg-2); }
.doc-cta { margin: var(--s-12) 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.doc-cta .btn { text-decoration: none; }
.doc-cta-fine { font-size: var(--t-1); color: var(--fg-3); }

/* ── sections ───────────────────────────────────────────────────────────── */
.section-h {
  font-family: var(--serif); font-weight: 400; font-size: var(--t-5); line-height: 1.3;
  color: var(--fg); margin: 0 0 var(--s-5); padding-top: var(--s-3); position: relative;
}
.section-h::before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 2px; background: var(--accent); opacity: 0.85; }

.steps { padding-top: var(--s-12); scroll-margin-top: var(--s-8); }
.steps-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-8);
}
.step { padding-top: var(--s-4); border-top: 1px solid var(--line); display: grid; gap: var(--s-2); align-content: start; }
.step-n { color: var(--accent); font-size: var(--t-2); }
.step-h { font-family: var(--serif); font-weight: 400; font-size: var(--t-5); line-height: 1.2; color: var(--fg); margin: 0; }
.step-p { margin: 0; font-size: var(--t-2); line-height: 1.6; color: var(--fg-2); max-width: 40ch; }
.steps-note { margin: var(--s-6) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--fg-3); max-width: 72ch; }

.pricing { padding-top: var(--s-12); scroll-margin-top: var(--s-8); }
.pricing-free { margin: 0 0 var(--s-6); font-size: var(--t-3); line-height: 1.55; color: var(--fg-2); max-width: 60ch; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-8); row-gap: var(--s-5); }
.price-plan { padding-top: var(--s-4); border-top: 1px solid var(--line); transition: border-color var(--fast) var(--ease); }
.price-plan:hover { border-top-color: var(--gold-line); }
.price-h { font-family: var(--serif); font-weight: 400; font-size: var(--t-5); line-height: 1.2; color: var(--fg); margin: 0; }
.price-amount { margin: var(--s-2) 0 0; font-size: var(--t-3); color: var(--fg); }
.price-amount .num { font-size: var(--t-5); }
.price-words { margin: var(--s-3) 0 0; font-size: var(--t-2); color: var(--fg-2); }
.price-p { margin: var(--s-1) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--fg-3); max-width: 36ch; }
.pricing-note { margin: var(--s-6) 0 0; font-size: var(--t-1); line-height: 1.5; color: var(--fg-3); max-width: 72ch; }
.pricing-more { margin: var(--s-3) 0 0; font-size: var(--t-1); line-height: 1.5; }
.pricing-more a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.pricing-more a:hover { color: var(--accent); }


/* the construction switch lives in the footer now */
.site-foot-switch { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--fg-3); font-size: var(--t-1); }

/* ── narrow screens ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-app { padding: var(--s-10) 0 var(--s-6); }
  .steps-grid, .pricing-grid, .berkeley-grid { grid-template-columns: minmax(0, 1fr); }
  .tool .console { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-3); }
  .tool .status { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .tool .instrument { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 24px auto; }
}
@media (max-width: 600px) {
  .top { flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
  /* the service pill only speaks on a phone when something is wrong */
  .top .pill[data-kind="ok"], .top .pill[data-kind="wait"] { display: none; }
  .top-nav { margin-left: auto; }
  .top-tools { flex-basis: 100%; margin-left: 0; justify-content: space-between; gap: var(--s-3); }
  .top .account { flex-wrap: wrap; }
  .hero-app { padding: var(--s-8) 0 var(--s-5); text-align: left; }
  .hero-app .hero-eyebrow { justify-self: start; }
  .hero-app .hero-p { margin-left: 0; }
  .hero-eyebrow::after { display: none; }
  .trust { justify-content: flex-start; }
  .tool { border-radius: var(--r); }
  .tool .pane-head { padding: var(--s-3) var(--s-4); }
  .tool .pane-body { padding: var(--s-5) var(--s-4) var(--s-6); min-height: 220px; }
  .tool .console { padding: var(--s-4); grid-template-columns: minmax(0, 1fr); }
  .tool .console-act { gap: var(--s-3); }
  .console-go { width: 100%; }
  .console-go .btn-go { flex: 1 1 auto; }
  .key { display: none; }
  .tool .fold-summary { padding: var(--s-3) var(--s-4); }
  .tool .fold-body { padding: 0 var(--s-4) var(--s-5); }
  .tool .more-body { padding-left: var(--s-4); }
}

/* ── tiny animations ────────────────────────────────────────────────────────
   Each one answers a load or an action and is over inside 300 ms (the hero
   sequence as a whole inside 600). Nothing loops. Reduced motion turns every
   one of them off. anim.js still runs the page's own entrance for the top
   row, the console, the panes and the folds; these fill in around it. */
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw-x  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dot-in  { 0% { transform: scale(0); } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes arm     { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* the horizon under the top row draws from the left */
.top::after { transform-origin: left center; animation: draw-x 420ms var(--ease) both; }

/* the hero arrives top to bottom; the two eyebrow rules draw outward */
.hero-app > * , .doc-head > * { animation: rise-in 280ms var(--ease) both; }
.hero-app > :nth-child(2), .doc-head > :nth-child(2) { animation-delay: 60ms; }
.hero-app > :nth-child(3), .doc-head > :nth-child(3) { animation-delay: 120ms; }
.hero-app > :nth-child(4) { animation-delay: 180ms; }
.hero-eyebrow::before { transform-origin: right center; animation: draw-x 300ms var(--ease) 120ms both; }
.hero-eyebrow::after  { transform-origin: left center;  animation: draw-x 300ms var(--ease) 120ms both; }
.trust li::before { animation: dot-in 260ms var(--ease) both; }
.trust li:nth-child(1)::before { animation-delay: 220ms; }
.trust li:nth-child(2)::before { animation-delay: 280ms; }
.trust li:nth-child(3)::before { animation-delay: 340ms; }

/* the card rises after the hero; the sections on the other pages in turn */
.tool { animation: rise-in 300ms var(--ease) 180ms both; }
.page-doc .steps, .page-doc .doc-cta { animation: rise-in 280ms var(--ease) both; }
.page-doc .steps:nth-of-type(1) { animation-delay: 160ms; }
.page-doc .steps:nth-of-type(2) { animation-delay: 220ms; }
.page-doc .doc-cta { animation-delay: 340ms; }
.step { animation: rise-in 260ms var(--ease) both; }
.steps-grid .step:nth-child(1) { animation-delay: 240ms; }
.steps-grid .step:nth-child(2) { animation-delay: 300ms; }
.steps-grid .step:nth-child(3) { animation-delay: 360ms; }
.section-h::before { transform-origin: left center; animation: draw-x 320ms var(--ease) 200ms both; }

/* the tabs: the current mark is a line that slides in from the left on hover */
.top-link { position: relative; }
.top-link::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 4px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--fast) var(--ease);
}
.top-link:hover::after { transform: scaleX(1); }
.top-link[aria-current="page"] { box-shadow: none; }
.top-link[aria-current="page"]::after { transform: scaleX(1); }

/* buttons lift a pixel on hover and settle on press; the primary arms itself
   the moment it becomes usable */
.btn, .chip { transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.btn:not([disabled]):hover, .chip:hover { transform: translateY(-1px); }
.btn:not([disabled]):active, .chip:active { transform: translateY(0); }
.btn-go:not([disabled]) { animation: arm 320ms var(--ease) both; }
.btn-primary:not([disabled]):hover { box-shadow: 0 6px 18px -10px rgba(253, 181, 21, 0.55); }

/* the free-words pill breathes in when it appears */
.top .balance { animation: fade-in 240ms var(--ease) both; }

/* the sample chips come in one after another when the draft is empty */
.samples .chip { animation: rise-in 220ms var(--ease) both; }
.samples .chip:nth-child(1) { animation-delay: 360ms; }
.samples .chip:nth-child(2) { animation-delay: 410ms; }
.samples .chip:nth-child(3) { animation-delay: 460ms; }
.samples .chip:nth-child(4) { animation-delay: 510ms; }

/* the pane heads tint a shade on hover so the two halves read as live surfaces */
.tool .pane-head { transition: background var(--fast) var(--ease); }
.tool .pane:hover .pane-head { background: rgba(159, 209, 255, 0.09); }

@media (prefers-reduced-motion: reduce) {
  .top::after, .hero-app > *, .doc-head > *, .hero-eyebrow::before, .hero-eyebrow::after, .trust li::before,
  .tool, .page-doc .steps, .page-doc .doc-cta, .step, .section-h::before,
  .btn-go:not([disabled]), .top .balance, .samples .chip { animation: none; }
  .btn:not([disabled]):hover, .chip:hover { transform: none; }
}