/* Propab public site — shared design system (nav, type, buttons, section heads, artifact
   placeholders, FAQ, closing screen, footer). Page-specific rules stay in each page. */
/*
 * Every number here is from scratchpad/reference-measurements.md (anthropic.com and ajvc, measured
 * in Chrome) unless a comment says why it differs.
 *
 * WHO READS THIS: a working scientist, skimming, sceptical of AI hype. So: calm (nothing bounces),
 * quick (hovers ≤ 0.2s), readable (serif for sentences, like a paper), and proof on the first screen
 * (a real figure from a real run already peeking in before any scroll).
 */
:root {
  --ink: #141413;
  --ink-2: #3d3d3a;
  --ink-3: #73726c;
  --line: #ecebe6;
  --surface: #ffffff;
  --panel-shadow: rgba(0,0,0,.01) 0 2px 2px, rgba(0,0,0,.02) 0 4px 4px, rgba(0,0,0,.04) 0 16px 24px;
  --ease-words: cubic-bezier(0.16, 1, 0.3, 1);       /* anthropic headline words */
  --ease-panel: cubic-bezier(0.77, 0, 0.175, 1);     /* anthropic dropdown fade */
  --blue: #1565a3;        /* ajvc's blue, for things you touch */
  --tint: #e7f3fe;
  --tint-2: #d5e9fb;
  --peach: #fde8d4;
  --paper: #f1f0ec;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ── NAV ─────────────────────────────────────────────────────────────────
   Shani: sticky, rounded, inset from every side, glass. Type from anthropic: 15px links
   (-0.0375px); CTA 8px radius, ~36px tall. The glass earns a hairline + soft shadow only once
   content is under it; at rest on white there is nothing to separate from. */
.nav {
  position: sticky; top: 12px; z-index: 50;
  width: calc(100% - 24px); max-width: 1200px; height: 56px;
  margin: 12px auto 0; padding: 0 10px 0 22px;
  display: flex; align-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.nav[data-scrolled] { border-color: rgba(20,20,19,.07); box-shadow: rgba(0,0,0,.02) 0 2px 4px, rgba(0,0,0,.05) 0 12px 28px -8px; }
/* The name, as text (Shani: no invented mark). */
.wordmark { font-size: 19px; font-weight: 600; letter-spacing: -0.025em; }
.links { display: flex; align-items: center; height: 100%; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px;
  font-size: 15px; line-height: 21px; letter-spacing: -0.0375px;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em;
  transition: text-decoration-color .2s;
}
.nav-link:hover, .nav-item[data-open] > .nav-link { text-decoration-color: var(--ink); }
/* anthropic: the chevron turns 180° in 0.2s when the menu opens. */
.chev { width: 10px; height: 10px; transition: transform .2s; }
.nav-item[data-open] .chev { transform: rotate(180deg); }

/* The menu: anthropic's panel — solid light card, 1px border, 16px radius, three-layer shadow,
   serif 16/22.4 links, fades in over 0.4s. It hangs 8px under the floating bar; the wrapper's top
   padding bridges that gap so moving the pointer down never closes it. */
.menu-wrap { position: absolute; top: 100%; left: -12px; padding-top: 8px; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease-panel); }
.nav-item[data-open] .menu-wrap { opacity: 1; pointer-events: auto; }
.menu {
  min-width: 290px; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--panel-shadow);
  display: grid; gap: 14px;
}
.menu a { display: grid; gap: 1px; }
.menu-name {
  font-family: var(--serif); font-size: 16px; line-height: 22.4px;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .18em; transition: text-decoration-color .2s;
}
.menu a:hover .menu-name, .menu a:focus-visible .menu-name { text-decoration-color: var(--ink); }
.menu-hint { font-size: 13px; line-height: 18px; color: var(--ink-3); }

/* Everything a visitor looks for sits on the right, where the eye expects navigation; the name
   alone holds the left. One action in the bar: "Sign in" beside "Try Propab" was the same door twice. */
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; height: 100%; }
.nav-cta { margin-left: 4px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px;
  border-radius: 8px;                                  /* anthropic's CTA radius */
  font-size: 15px; letter-spacing: -0.08px; font-weight: 500;
  transition: background-color .2s, transform .1s ease-out;
}
.btn:active { transform: scale(.97); }                /* apple-design: feedback on press, 100ms */
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #3a3935; }               /* a colour change, like anthropic; no bounce */
.btn-quiet:hover { background: rgba(20,20,19,.05); }
.btn-lg { height: 44px; padding: 0 20px; font-size: 16px; }
.btn-line { background: #fff; box-shadow: inset 0 0 0 1px rgba(20,20,19,.16); }
.btn-line:hover { background: #fbfbf9; box-shadow: inset 0 0 0 1px rgba(20,20,19,.3); }
/* The arrow says "this goes somewhere" and leans that way on hover (apple-design: hint in the
   direction of the outcome). 2px, 0.2s: felt, not watched. */
.btn-go { gap: 8px; }
.go { width: 12px; height: 12px; transition: transform .2s var(--ease-words); }
.btn-go:hover .go { transform: translateX(2px); }

/* ── HERO ────────────────────────────────────────────────────────────────
   Display size inside the 56–58px band both references use at 1280. Short enough that the real
   artifact below already shows on the first screen. */
/* The first screen is the hero plus a sliver of real proof: the hero fills 90% of the viewport under
   the bar, its content optically centred, so ~10% of the artifact card shows before any scroll. */
.hero {
  max-width: 1200px; margin: 0 auto; padding: 0 24px 4svh; text-align: center;
  min-height: calc(90svh - 68px); display: flex; flex-direction: column; justify-content: center;
}
h1 {
  margin: 0; font-family: var(--sans); font-weight: 500;
  font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance;
}
/* TWO LINES, NOT ONE (Shani, 2026-09-27, by eye): a 1,150px line sends the eye on a long horizontal
   trip and it drifts off before the end. Two short centred lines are read as one shape. The break is
   after the idea ("Your AI co-researcher") so each line is a complete thought. */
h1 .br { display: block; }
/* The one word that carries the idea: same face, its own italic, underlined like anthropic's
   "research" (offset about 0.08em, thickness from the weight). The underline DRAWS in once the words
   have landed, left to right, so the eye ends on it. */
h1 .em { position: relative; font-style: italic; font-weight: 500; }
h1 .em::after {
  content: ""; position: absolute; left: 0.02em; right: 0.04em; bottom: 0.1em; height: max(2px, 0.05em);
  background: currentColor; border-radius: 1px;
  transform: scaleX(var(--ul, 1)); transform-origin: left center;
}
html.js h1, html.js .fade { visibility: hidden; }
/* The sentence under it is set like a paper (anthropic: serif lede, 24/1.4, max 40ch). */
/* Two lines on a desktop: the sentence is 1213px at 20px, so a 640px measure breaks it once. */
.lede { margin: 22px auto 0; max-width: 640px; font-family: var(--serif); font-size: 20px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.ctas { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; }


/* ── ARTIFACT PLACEHOLDERS ───────────────────────────────────────────────
   Every one of these is replaced by a real, interactive page from a real run (Claude Science's
   standard). Until then each is honest about being a slot: dashed edge, a short tag for WHICH
   artifact goes there, and its live size in CSS pixels so the real page can be built to fit. */
.ph {
  position: relative; width: 100%; border-radius: 14px;
  background-color: #fbfbf9;
  background-image: radial-gradient(rgba(20,20,19,.09) 1px, transparent 1.2px);
  background-size: 16px 16px; background-position: 8px 8px;
  border: 1px dashed rgba(20,20,19,.18);
  display: grid; place-items: center; overflow: hidden;
}
.ph-in { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 12px; }
.ph-ic { width: 22px; height: 22px; color: var(--ink-3); }
.ph-name { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ph-size { font: 12px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ph.is-pending { border-style: solid; border-color: var(--line); background: #fbfbf9; background-image: none; }
.ph.is-pending .ph-in { gap: 8px; max-width: 34ch; }
.ph.is-pending .ph-name { font-size: 16px; }
.ph-note { font-family: var(--serif); font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.ph-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #1f6b44; }
.ph-live i { width: 7px; height: 7px; border-radius: 50%; background: #2f8a5c; animation: ph-pulse 1.8s ease-in-out infinite; }
@keyframes ph-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ph-live i { animation: none; } }
.ph.is-live { border-style: solid; background: #fff; }
.ph.is-live { overflow: hidden; }
/* A snapshot keeps its captured width and is scaled to the slot (site.js sets width, height and scale). */
.ph iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; transform-origin: 0 0; }
.ph.is-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
/* Touch screens: a live frame takes no touches until it is tapped (site.js says why), and the layer over
   it says so. With a mouse the layer does not exist. */
.ph-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .ph.is-live:not([data-active]) iframe { pointer-events: none; }
  .ph.is-live:not([data-active]) .ph-touch { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
  .ph-touch span { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 8px; background: rgba(20,20,19,.82); color: #fff; font-size: 13px; font-weight: 500; }
}
.ph-link { margin-top: 6px; font-size: 12.5px; color: var(--blue); text-decoration: underline; text-underline-offset: .2em; pointer-events: auto; }
.ph-tag { position: absolute; top: 10px; left: 10px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; color: var(--ink-3); }
.r-16x9 { aspect-ratio: 16 / 9; } .r-16x10 { aspect-ratio: 16 / 10; } .r-4x3 { aspect-ratio: 4 / 3; }

/* ── SHARED SECTION HEAD ─────────────────────────────────────────────────
   ajvc's head: a small caps line that names the question ("HERE ARE OUR"), then the answer, big.
   Ours stays ink (one accent on the page, used for the things you touch, not for headings). */
.sec { padding: 136px 24px; }
.sh { max-width: 760px; margin: 0 auto; text-align: center; }
.kick { margin: 0 0 14px; font-size: 13px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.h2 { margin: 0; font-weight: 500; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; }
.sub { margin: 16px auto 0; max-width: 560px; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.paper {
  background-color: #fff;
  background-image: linear-gradient(var(--paper) 1px, transparent 1px), linear-gradient(90deg, var(--paper) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center top;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────
   The questions a researcher asks before trying something like this, answered plainly. Question
   on the left of the eye path, the + turns to × as it opens, the answer slides open to its real
   height; one open at a time so the page never becomes a wall of text. */
.faq-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; }
.faq-head { position: sticky; top: 120px; align-self: start; }
.faq-head .sh { text-align: left; margin: 0; }
.faq-head .sub { margin-left: 0; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 4px; text-align: left; font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; transition: color .2s; }
.faq-q:hover { color: #000; }
.faq-x { position: relative; flex: none; width: 28px; height: 28px; border-radius: 8px; transition: background-color .2s, transform .35s var(--ease-words); }
.faq-q:hover .faq-x { background: rgba(20,20,19,.05); }
.faq-x::before, .faq-x::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13.25px; height: 1.5px; border-radius: 1px; background: currentColor; }
.faq-x::after { transform: rotate(90deg); }
.faq-item[data-open] .faq-x { transform: rotate(45deg); }
.faq-a { height: 0; overflow: hidden; }
.faq-a p { margin: 0; padding: 0 56px 24px 4px; max-width: 62ch; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq-head { position: static; }
  .faq-q { font-size: 17px; padding: 18px 2px; }
  .faq-a p { padding-right: 8px; font-size: 16px; }
}

/* ── 7 · THE LAST SCREEN ─────────────────────────────────────────────────
   The hero's own promise, answered: the same type, the same underline drawing in, one action. */
.end { padding: 120px 24px 120px; text-align: center; }
.end .h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -0.03em; }
.end .h2 .br { display: block; }
.end .em { position: relative; font-style: italic; }
.end .em::after { content: ""; position: absolute; left: 0.02em; right: 0.04em; bottom: 0.1em; height: max(2px, 0.05em); background: currentColor; border-radius: 1px; transform: scaleX(var(--ul, 1)); transform-origin: left center; }
.end .ctas { margin-top: 36px; }
.foot { max-width: 1200px; margin: 0 auto; padding: 28px 24px 40px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .end { padding: 104px 16px 88px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .sec { padding: 88px 16px; }
  .sub { font-size: 17px; }
}

/* ── ANALYTICS CHOICE ────────────────────────────────────────────────────
   The web app's consent card (apps/web/src/styles/public.css, .pw-consent), in this site's type and
   buttons, fixed bottom-left over the page until the visitor chooses. */
.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 380px; padding: 14px 16px;
  border-radius: 12px; background: var(--surface); border: 1px solid rgba(20,20,19,.1);
  box-shadow: rgba(0,0,0,.02) 0 2px 4px, rgba(0,0,0,.06) 0 12px 28px -8px;
}
.consent-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.consent-text a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.consent-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 440px) { .consent { right: 16px; max-width: none; } }

@media (prefers-reduced-motion: reduce) {
  .menu-wrap, .card-wrap, .go, .btn, .fchip, .frow, .step, .note, .tile, .run, .run .ph-in, .cap-t, .cap-d { transition: none; }
}
/* PHONE: the links fold into a menu button beside the one action (the action stays visible: it is
   the reason for the visit). The sheet drops from the bar it belongs to and fades like the desktop
   menu; the button's two lines become a cross so the way out is where the way in was. */
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 8px; align-items: center; justify-content: center; }
.menu-btn:hover { background: rgba(20,20,19,.05); }
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn .l1, .menu-btn .l2 { transition: transform .25s var(--ease-words); transform-origin: 9px 9px; }
.nav[data-sheet] .menu-btn .l1 { transform: translateY(2.5px) rotate(45deg); }
.nav[data-sheet] .menu-btn .l2 { transform: translateY(-2.5px) rotate(-45deg); }
.sheet {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--panel-shadow);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-panel);
}
.nav[data-sheet] .sheet { opacity: 1; pointer-events: auto; }
.sheet-label { font-size: 12px; color: var(--ink-3); padding: 8px 12px 4px; margin: 0; }
.sheet a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 16px; }
.sheet a:active { background: rgba(20,20,19,.05); }
.sheet .field { font-family: var(--serif); }
.sheet hr { border: 0; border-top: 1px solid var(--line); margin: 8px 12px; }
@media (max-width: 760px) {
  .links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-right { gap: 4px; }
  .hero { padding-top: 24px; }
  /* Two lines on a 375px phone (measured: line 2 is ~320px at 31px), not four ragged ones. */
  h1 { font-size: clamp(26px, 8.3vw, 36px); }
  .lede { font-size: 17px; margin-top: 16px; }
  /* One clear action per row: the primary full width, the quieter one under it. */
  .ctas { flex-direction: column; align-items: stretch; gap: 4px; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 761px) { .sheet { display: none; } }