/* ==========================================================================
   perrla.com redesign – design system, base layer
   World: the syllabus and the index card (world.css, loaded after this file,
   holds the planner page, the syllabus panel, ruled columns and index cards).
   This file holds the tokens and the base components: buttons, the fact sheet
   (label and value rows), the paper (white sheet, Times, double spaced),
   chips, lists, plans, nav and footer.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand blue scale (Webflow "Brand Collection") */
  --blue-100: #7fbee0;
  --blue-50:  #caeefd;
  --blue-300: #5c92bd;
  --blue-500: #27669b;
  --blue-700: #1e5785;
  --blue-800: #153c6e;
  --blue-900: #0a2851;
  --blue-950: #061a38;

  /* Gray */
  --gray-50:  #f7f8fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #aab0b5;
  --gray-600: #646c74;
  --gray-550: #868e96; /* hairline-only, never text */
  --gray-700: #5c666e;
  --gray-800: #343a40;
  --gray-900: #212529;

  /* Accents from the palette */
  --teal-500: #46b9c9;
  --teal-700: #00838f;
  --teal-100: #aae9f1;
  --yellow-300: #ffd266;
  --yellow-100: #fff3cc;
  --yellow-700: #aa5f00;
  --green-500: #278724;
  --green-300: #8ddb7a;
  --red-500: #d62427;

  /* Roles */
  --ink: var(--gray-900);
  --ink-2: var(--gray-700);
  --ink-3: var(--gray-600);
  --ground: #ffffff;
  --ground-2: var(--gray-50);
  --ground-3: var(--gray-100);
  --rule: var(--gray-300);
  --rule-soft: var(--gray-200);
  --action: var(--blue-500);
  --action-hover: var(--blue-700);
  --action-press: var(--blue-800);
  --link: var(--blue-500);
  --field: var(--blue-900);         /* committed dark field */
  --field-2: var(--blue-800);
  --on-field: #ffffff;
  --on-field-2: var(--blue-50);     /* secondary text on the field, tinted, never gray */
  --on-field-3: var(--blue-100);
  --on-field-rule: rgba(127, 190, 224, 0.28);
  --highlight: var(--yellow-300);
  --highlight-soft: var(--yellow-100);

  /* Type */
  --font-display: "Soin Sans Pro", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-paper: "Times New Roman", Tinos, Times, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 1.9rem + 3.6vw, 4.25rem);

  /* Space */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-record: 0 1px 2px rgba(10, 40, 81, 0.06), 0 12px 32px -12px rgba(10, 40, 81, 0.22);
  --shadow-paper: 0 2px 4px rgba(33, 37, 41, 0.08), 0 24px 48px -20px rgba(33, 37, 41, 0.35);
  --shadow-float: 0 1px 2px rgba(10, 40, 81, 0.08), 0 20px 40px -16px rgba(10, 40, 81, 0.30);

  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground);
  overflow-wrap: break-word;   /* a long URL or DOI breaks instead of pushing the page sideways */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; text-decoration-color: rgba(39, 102, 155, 0.45); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: 2px; }
.hero :focus-visible, .section--field :focus-visible, .intro--field :focus-visible, .footer :focus-visible { outline-color: var(--yellow-300); }
[id] { scroll-margin-top: 84px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.012em; margin: 0 0 var(--s-4); text-wrap: balance; }
h1 { font-size: var(--text-5xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; }
h2 { font-size: var(--text-4xl); letter-spacing: -0.016em; }
h3 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
h4 { font-size: var(--text-xl); letter-spacing: 0; font-weight: 700; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li + li { margin-top: var(--s-2); }
strong { font-weight: 700; }
small { font-size: var(--text-sm); }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-7) 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; clip: auto; z-index: 100; background: var(--blue-900); color: #fff; padding: 0.75rem 1rem; border-radius: var(--radius); font-weight: 600; }

.lede { font-size: var(--text-lg); color: var(--ink-2); max-width: 62ch; }
.measure { max-width: 68ch; }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.01em; }
.label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.on-field .label { color: var(--on-field-3); }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--ground-2 { background: var(--ground-2); }
.section--field { background: var(--field); color: var(--on-field); }
.section--field a { color: var(--on-field); text-decoration-color: rgba(255, 255, 255, 0.45); }
.section--field .lede { color: var(--on-field-2); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-bottom: var(--s-3); }
.section-head .lede { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 0.875rem 1.25rem; border-radius: var(--radius); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s var(--ease-out), box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--action); color: #fff; border-color: var(--action); box-shadow: 0 1px 2px rgba(10,40,81,0.2), 0 6px 14px -6px rgba(39,102,155,0.5); }
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.btn--secondary { background: transparent; color: var(--ink); border-color: #8d949b; }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); background: var(--gray-50); }
.btn--ghost { background: transparent; color: var(--link); border-color: transparent; padding-inline: 0.5rem; }
.btn--lg { font-size: 1.0625rem; padding: 1rem 1.5rem; }
.btn--sm { font-size: 0.9375rem; padding: 0.625rem 0.9375rem; }
.btn .arrow { width: 1em; height: 1em; }
.on-field .btn--primary, .section--field .btn--primary, .hero .btn--primary, .intro--field .btn--primary { background: #fff; color: var(--blue-900); border-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 10px 24px -10px rgba(0,0,0,0.5); }
.on-field .btn--primary:hover, .section--field .btn--primary:hover, .hero .btn--primary:hover, .intro--field .btn--primary:hover { background: var(--blue-50); border-color: var(--blue-50); color: var(--blue-900); }
.on-field .btn--secondary, .section--field .btn--secondary, .hero .btn--secondary, .intro--field .btn--secondary { color: #fff; border-color: rgba(255,255,255,0.55); }
.on-field .btn--secondary:hover, .section--field .btn--secondary:hover, .hero .btn--secondary:hover, .intro--field .btn--secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
.on-field .btn--ghost, .section--field .btn--ghost, .hero .btn--ghost, .intro--field .btn--ghost { color: #fff; }
.intro--field a { color: #fff; }
.intro--field .hero__fine { color: var(--on-field-3); }
.intro--field .verify { color: var(--blue-950); }

/* ---------- Chips ---------- */
.chip { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid var(--rule); background: #fff; color: var(--ink-2); white-space: nowrap; }
.chip--on { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-900); }
.chip--teal { background: var(--teal-100); border-color: var(--teal-500); color: #005a63; }
.chip--green { background: #e4f5e2; border-color: var(--green-300); color: #1f6e1d; }
.chip--yellow { background: var(--yellow-100); border-color: var(--yellow-300); color: #8a4d00; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.on-field .chip, .section--field .chip { background: rgba(255,255,255,0.08); border-color: var(--on-field-rule); color: var(--on-field-2); }
.on-field .chip--on, .section--field .chip--on { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.4); }

/* ---------- The fact sheet (.record: label and value rows) ---------- */
.record {
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-record);
  overflow: hidden;
}
.record__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0.625rem 1rem;
  background: var(--gray-50);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.record__bar .id { letter-spacing: 0.02em; text-transform: none; color: var(--ink-2); }
.record__body { padding: 1.125rem 1.25rem; }
.record__title { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; line-height: 1.25; margin: 0 0 0.75rem; letter-spacing: -0.005em; }
.fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1rem; row-gap: 0; margin: 0; }
.fields > div { display: contents; }
.fields dt, .fields dd { padding: 0.5rem 0; border-top: 1px solid var(--rule-soft); margin: 0; }
.fields > div:first-child dt, .fields > div:first-child dd { border-top: 0; }
.fields dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.6rem; }
.fields dd { font-size: 0.9375rem; color: var(--ink); line-height: 1.45; }
.fields dd .mono { font-size: 0.8125rem; }
.fields--loose dt, .fields--loose dd { padding-block: 0.7rem; }
.record--field { background: var(--blue-800); color: #fff; border-color: rgba(127,190,224,0.3); }
.record--field .record__bar { background: var(--blue-900); border-color: rgba(127,190,224,0.25); color: var(--on-field-3); }
.record--field .record__bar .id { color: var(--on-field-2); }
.record--field .fields dt { color: var(--on-field-3); }
.record--field .fields dd { color: #fff; }
.record--field .fields dt, .record--field .fields dd { border-color: var(--on-field-rule); }

/* ---------- The paper (formatted page) ---------- */
.paper {
  background: #fff; color: #000;
  font-family: var(--font-paper); font-size: 12pt; line-height: 2.3;   /* PERRLA's double spacing: 36.8px lines on 16px Times (measured Oct 4) */
  box-shadow: var(--shadow-paper);
  border: 1px solid var(--gray-200);
  aspect-ratio: 8.5 / 11;
  padding: 9.4% 9.4%;         /* 1 inch on an 8.5 inch sheet */
  position: relative;
  overflow: hidden;
}
.paper--scaled { font-size: clamp(8px, 1.15vw, 13px); }
.paper .pnum { position: absolute; top: 4.6%; right: 9.4%; font-size: 1em; }
.paper .rhead { position: absolute; top: 4.6%; left: 9.4%; right: 9.4%; display: flex; justify-content: space-between; gap: 1em; }   /* APA professional running head and page number, half an inch down */
.paper .center { text-align: center; }
.paper .tpad { padding-top: 3lh; }     /* APA title page: three blank double-spaced lines, then the title */
.paper .blank { margin-top: 1lh; }     /* one blank double-spaced line (after the title) */
.paper .h1--gap { margin-top: 1.5em; } /* a discussion post's References heading, 24px below the post */
.paper .pg-break { height: 1.4em; margin: 0.9em -13%; background: var(--gray-100); border-block: 1px solid var(--gray-200); }   /* a research paper's references start a new page */
.paper .h1 { text-align: center; font-weight: bold; }
.paper .h2 { font-weight: bold; }
.paper .h3 { font-weight: bold; font-style: italic; }
/* Inside a sample page, a half-inch indent is 7.7% of the line (0.5 in of the 6.5 in between margins), so it looks right
   at any size; percentages here are of the line width. Paragraphs have no gaps, only double spacing (PERRLA, measured Oct 4). */
.paper p { margin: 0; }
.paper .para { text-indent: 7.7%; margin: 0; }
.paper .ref { padding-left: 7.7%; text-indent: -7.7%; margin: 0; }
.paper .bq { margin: 0 0 0 7.7%; }
.paper .fn { font-size: 1em; line-height: 1.15; text-indent: 5.75%; border-top: 1px solid #000; width: 33%; margin-top: 1.2em; padding-top: 0.3em; }   /* Turabian notes as PERRLA sets them: 12 pt, single-spaced, first line indented (36px of the 626px line), runovers flush left (measured Oct 4) */
.paper em { font-style: italic; }
.paper .mark { background: var(--highlight); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.1em; border-radius: 2px; }
.paper .mark--soft { background: var(--highlight-soft); }
.paper .cc { outline: 1.5px solid var(--blue-300); outline-offset: 1px; border-radius: 2px; background: rgba(127,190,224,0.18); }

/* ---------- Callouts pinned to a paper (anatomy) ---------- */
.stack3 { position: relative; aspect-ratio: 1 / 1.58; margin-bottom: 1.5rem; }
.stack3 .paper { position: absolute; width: 64%; font-size: 8.6px; line-height: 2; padding: 6%; overflow: visible; }
.stack3 .paper--title { left: 0; top: 0; transform: rotate(-1.2deg); z-index: 1; }
.stack3 .paper--refs { left: 13%; top: 50%; transform: rotate(1.2deg); z-index: 1; }
.stack3 .paper--body { left: 12%; top: 21%; z-index: 2; }
.stack3 .paper .pnum { top: 3.2%; right: 6.6%; }
@media (max-width: 860px) { .stack3 { max-width: 560px; } }
.anatomy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .anatomy { grid-template-columns: minmax(0, 1fr); } }
.pin { position: absolute; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--blue-500); color: #fff; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(10,40,81,0.35); line-height: 1; }
.anatomy-list { list-style: none; padding: 0; margin: 0; counter-reset: pin; }
.anatomy-list li { position: relative; padding: 0.875rem 0 0.875rem 2.5rem; border-top: 1px solid var(--rule-soft); margin: 0; }
.anatomy-list li:first-child { border-top: 0; padding-top: 0; }
.anatomy-list li::before { counter-increment: pin; content: counter(pin); position: absolute; left: 0; top: 1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--blue-500); color: #fff; font-family: var(--font-mono); font-size: 0.75rem; display: grid; place-items: center; }
.anatomy-list li:first-child::before { top: 0.125rem; }
.anatomy-list b { display: block; font-weight: 700; margin-bottom: 0.125rem; }
.anatomy-list span { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- Row list (.results: lesson and article lists) ---------- */
.results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.results > li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: 1rem 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); margin: 0; align-items: start; }
.results .n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-3); padding-top: 0.35rem; }
.results h3, .results h2 { margin: 0 0 0.25rem; font-size: 1.375rem; letter-spacing: -0.01em; }
.results h3 a, .results h2 a { color: var(--ink); text-decoration: none; }
.results h3 a:hover, .results h2 a:hover { color: var(--link); text-decoration: underline; }
.results p { color: var(--ink-2); margin: 0 0 0.625rem; max-width: 60ch; }
.results .chips { margin-top: 0.25rem; }
.results .thumb { width: 220px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--gray-50); overflow: hidden; }
@media (max-width: 720px) { .results > li { grid-template-columns: 2rem minmax(0, 1fr); } .results .thumb { grid-column: 2; width: 100%; max-width: 320px; } }

/* ---------- Quotes ---------- */
.quote { margin: 0; border-top: 2px solid var(--ink); padding-top: 1rem; }
.quote p { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.4; font-weight: 500; letter-spacing: -0.005em; margin-bottom: 0.75rem; }
.quote footer { font-size: 0.9375rem; color: var(--ink-2); }
.quote footer b { color: var(--ink); font-weight: 600; }
.section--field .quote { border-top-color: rgba(255,255,255,0.7); }
.section--field .quote footer { color: var(--on-field-2); }
.section--field .quote footer b { color: #fff; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 0.75rem; height: 0.75rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.2s var(--ease-out); flex: none; margin-right: 0.25rem; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 0 1.25rem; color: var(--ink-2); max-width: 70ch; }

/* ---------- Plan records ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
.plan { display: flex; flex-direction: column; }
.plan .record__body { display: flex; flex-direction: column; flex: 1; }
.plan .price { font-family: var(--font-display); font-size: 2.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin: 0.25rem 0 0.125rem; }
.plan .price sup { font-size: 0.45em; vertical-align: top; top: 0.4em; position: relative; letter-spacing: 0; font-weight: 500; }
.plan .per { color: var(--ink-3); font-size: 0.9375rem; margin-bottom: 1rem; }
.plan .fields { margin-bottom: 1.25rem; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan--rec { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-float); }
.plan--rec .record__bar { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
.plan--rec .record__bar .id { color: var(--blue-50); }

/* ---------- Checklist ---------- */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding: 0.375rem 0 0.375rem 1.875rem; margin: 0; }
/* a planner tick box: a square ruled in ink, ticked in blue pen */
.checks li::before { content: ""; position: absolute; left: 0; top: 0.58rem; width: 1.0625rem; height: 1.0625rem; border-radius: 3px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4.6 10.6l3.4 3.6 7.6-9' stroke='%2327669b' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; box-shadow: inset 0 0 0 1.5px var(--ink); }
.checks--no li::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 6l8 8M14 6l-8 8' stroke='%23868e96' stroke-width='2.2' stroke-linecap='round'/></svg>"); box-shadow: inset 0 0 0 1.5px var(--gray-500); }
.section--field .checks li::before { background-color: transparent; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M4.6 10.6l3.4 3.6 7.6-9' stroke='%23ffffff' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.8); }
.checks--cols { font-size: 0.9375rem; }
.checks--cols li { break-inside: avoid; }
@media (min-width: 720px) { .checks--cols { columns: 2; column-gap: 1.5rem; } }

/* ---------- Icons (one stroke, one weight) ---------- */
.icon { width: 1.25rem; height: 1.25rem; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--lg { width: 1.75rem; height: 1.75rem; }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule-soft); }
.nav__inner { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.nav__logo { display: flex; align-items: center; margin-right: 0.5rem; }
.nav__logo img { height: 30px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.nav__menu > li { margin: 0; position: relative; white-space: nowrap; }
.nav__menu > li > a, .nav__menu > li > button { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.9875rem; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav__menu > li > a:hover, .nav__menu > li > button:hover, .nav__menu > li > a[aria-current="page"] { background: var(--gray-100); }
.nav__menu .caret { width: 0.75rem; height: 0.75rem; opacity: 0.6; }
.nav__drop { position: absolute; top: calc(100% + 6px); left: 0; width: 340px; white-space: normal; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: 0.5rem; display: none; z-index: 60; }
.nav__drop.is-open { display: block; }
.nav__drop a { display: grid; grid-template-columns: 1.5rem minmax(0,1fr); gap: 0.625rem; align-items: start; padding: 0.625rem 0.75rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.nav__drop a:hover { background: var(--gray-100); }
.nav__drop a .icon { margin-top: 0.1rem; color: var(--blue-500); }
.nav__drop b { display: block; font-weight: 600; font-size: 0.9375rem; }
.nav__drop span { display: block; font-size: 0.8125rem; color: var(--ink-2); text-wrap: pretty; }
.nav__drop .divider { height: 1px; background: var(--rule-soft); margin: 0.375rem 0.5rem; }
.nav__drop--wide { width: 600px; display: none; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0.25rem; }   /* where you write on the left, what it does on the right (Graysen, Oct 4) */
.nav__drop--wide.is-open { display: grid; }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.nav__account { position: relative; }
.nav__login { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-weight: 600; color: var(--ink); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); background: none; border: 0; cursor: pointer; }
.nav__login:hover, .nav__login[aria-expanded="true"] { background: var(--gray-100); }
.nav__login .caret { width: 0.75rem; height: 0.75rem; opacity: 0.6; }
.nav__drop--login { left: auto; right: 0; width: auto; min-width: 200px; }   /* the live site's two choices: the app, or account settings (Graysen, Oct 19) */
.nav__drop--login a { display: block; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.nav__burger { display: none; width: 44px; height: 44px; border: 0; background: none; border-radius: var(--radius-sm); align-items: center; justify-content: center; cursor: pointer; }
.nav__burger .icon { width: 1.5rem; height: 1.5rem; }
@media (max-width: 1180px) {
  .nav__menu { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__login span { display: none; }
}
@media (max-width: 560px) {
  .nav__right .btn { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
  .nav__inner { gap: 0.75rem; }
  .nav__login { padding: 0.5rem; }
  .nav__login .caret { display: none; }
  .chip { white-space: normal; }
}
@media (max-width: 400px) { .btn { max-width: 100%; white-space: normal; text-align: center; justify-content: center; line-height: 1.2; } }
.nav--mobile-open .nav__mobile { display: block; }
.nav__mobile { display: none; border-top: 1px solid var(--rule-soft); background: #fff; }
.nav__mobile ul { list-style: none; margin: 0; padding: 0.5rem 0 1rem; }
.nav__mobile li { margin: 0; }
.nav__mobile a { display: block; padding: 0.75rem 0; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1.0625rem; border-bottom: 1px solid var(--rule-soft); }
.nav__mobile .sub a { font-weight: 400; padding-left: 1rem; font-size: 1rem; }
.nav__mobile .mobile-ctas { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 1rem; }
.nav__mobile .mobile-ctas .btn { flex: 1 1 auto; justify-content: center; }
.nav__mobile .mobile-ctas .btn--primary { flex-basis: 100%; }

/* ---------- Footer ---------- */
.footer { background: var(--blue-950); color: var(--on-field-2); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--on-field-rule); }
@media (max-width: 900px) { .footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); } .footer__brand { grid-column: 1 / -1; } }
.footer__brand img { height: 32px; width: auto; margin-bottom: 1rem; }
.footer h4 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-field-3); font-weight: 500; margin-bottom: 0.875rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.footer__record { margin-top: 1.25rem; }
.footer__record .fields dt { color: var(--on-field-3); }
.footer__record .fields dd { color: #fff; font-size: 0.875rem; }
.footer__record .fields dt, .footer__record .fields dd { border-color: var(--on-field-rule); padding-block: 0.4rem; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; font-size: 0.8125rem; color: var(--on-field-3); }
.footer__bottom a { color: var(--on-field-2); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Hero ---------- */
.hero { background: var(--field); color: var(--on-field); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(900px 500px at 85% 20%, rgba(70, 185, 201, 0.14), transparent 60%),
  radial-gradient(700px 500px at 10% 100%, rgba(127, 190, 224, 0.12), transparent 60%);
  pointer-events: none; }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem); min-height: min(88vh, 860px); }
@media (max-width: 960px) { .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; } }
.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero .lede { color: var(--on-field-2); font-size: var(--text-xl); max-width: 36rem; margin-bottom: 1.75rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1.25rem; }
.hero__fine { color: var(--on-field-3); font-size: 0.9375rem; }
.hero__fine a { color: #fff; }
.hero__login { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--on-field-rule); font-size: 0.9375rem; color: var(--on-field-2); }
.hero__login a { color: #fff; font-weight: 600; }

/* ---------- The lookup stage (hero mechanism) ---------- */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.stage__record { position: relative; z-index: 2; width: min(100%, 476px); overflow: visible; }
.stage__record .lookup { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1.5px solid var(--blue-100); border-radius: var(--radius); background: #fff; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink); margin-bottom: 0.875rem; }
.stage__record .lookup .icon { color: var(--blue-500); width: 1rem; height: 1rem; }
.stage__record .lookup .typed { white-space: nowrap; overflow: hidden; }
.stage__record .lookup .cursor { width: 1px; height: 1.1em; background: var(--ink); animation: blink 1s steps(2) infinite; }
.stage__record .lookup .found { margin-left: auto; color: var(--green-500); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.stage__paper { position: relative; z-index: 1; margin-top: -3.25rem; margin-left: clamp(2rem, 12%, 7rem); width: min(100%, 520px); transform: rotate(0.6deg); }
.stage__paper .paper { aspect-ratio: auto; padding: 7em 2.4em 2em; font-size: clamp(10px, 1.05vw, 13px); line-height: 1.9; min-height: 0; }
.stage__arrow { position: absolute; z-index: 3; right: -1.6rem; bottom: -1.6rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--blue-500); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px var(--field), 0 10px 24px -8px rgba(0,0,0,0.5); }
.stage__arrow .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.25; }
.stage__arrow img { width: 2rem; height: 2rem; }
@media (max-width: 960px) { .stage__record { width: 100%; max-width: 520px; } .stage__paper { margin-left: clamp(1rem, 8%, 4rem); } }
.stage.js-armed .fields dd { opacity: 0; transform: translateY(4px); }
.stage.js-armed .paper .reveal { opacity: 0; }
.stage.js-armed .lookup .found { opacity: 0; }
.stage.is-done .fields dd, .stage.is-done .paper .reveal, .stage.is-done .lookup .found { opacity: 1; transform: none; }
.stage.is-animating .fields dd { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.stage.is-animating .paper .reveal { transition: opacity 0.6s var(--ease-out); }
.stage.is-animating .lookup .found { transition: opacity 0.4s ease; }
.stage .fields dd.is-in, .stage .paper .reveal.is-in, .stage .lookup .found.is-in { opacity: 1; transform: none; }
@keyframes blink { 50% { opacity: 0; } }
.stage__caption { margin-top: 1rem; font-size: 0.8125rem; color: var(--on-field-3); display: flex; gap: 0.5rem; align-items: center; }
.stage__caption button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; padding: 0; font-size: inherit; }

/* ---------- Misc blocks ---------- */
.band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 2rem; align-items: start; padding: 1.25rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 0.9375rem; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 900px) { .band { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .band { grid-template-columns: minmax(0,1fr); } }
.band b { color: var(--ink); font-weight: 600; }
.band .trust { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* the rating's stars: decorative, the number is always in the text beside them */
.stars { display: inline-flex; line-height: 0; vertical-align: -0.2em; }
.stars svg { width: 5.6em; height: auto; }
.stars .on { fill: var(--yellow-300); stroke: var(--yellow-700); stroke-width: 1.1; stroke-linejoin: round; }
.stars .off { fill: #fff; stroke: var(--yellow-700); stroke-width: 1.1; stroke-linejoin: round; }
/* a real screen from the product (the Writing Timeline sample) */
.screen { margin: 0; }
.screen img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rule); background: #fff; box-shadow: 0 1px 2px rgba(10,40,81,0.06), 0 24px 48px -24px rgba(10,40,81,0.4); }
.screen figcaption { margin-top: 0.875rem; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
.section--field .screen img { border-color: rgba(255,255,255,0.18); }
.section--field .screen figcaption { color: var(--on-field-2); }
/* A wide app screenshot whose <picture> swaps to the side panel alone below 1100px, where the wide crop's text
   gets too small to read; the cap keeps the panel near its captured size. */
@media (max-width: 1099px) { .screen--panel-swap img { max-width: 400px; } }
/* The sample Writing Timeline, live: the sample page itself in a frame, scaled to fit, its charts drawing in like the product (Oct 5) */
.screen .tl-live { position: relative; overflow: hidden; width: 100%; background: #fff; border-radius: 12px; border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(10,40,81,0.06), 0 24px 48px -24px rgba(10,40,81,0.4); }
.section--field .screen .tl-live { border-color: rgba(255,255,255,0.18); }
.tl-live iframe { position: absolute; top: 0; left: 0; display: block; border: 0; transform-origin: 0 0; }
.tl-switch { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tl-switch [aria-pressed="true"], .tl-switch [aria-pressed="true"]:hover { background: var(--action); color: #fff; border-color: var(--action); }
.section--field .tl-switch .btn { color: var(--on-field); border-color: var(--on-field-rule); }
.section--field .tl-switch .btn:hover { background: rgba(255,255,255,0.06); border-color: var(--on-field-2); }
.section--field .tl-switch [aria-pressed="true"] { background: #fff; color: var(--field); border-color: #fff; }
@media (max-width: 480px) { .tl-switch { flex-wrap: nowrap; gap: 0.375rem; } .tl-switch .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; font-size: 0.875rem; padding: 0.5rem 0.625rem; } }
@media (max-width: 359px) { .tl-switch { flex-wrap: wrap; } .tl-switch .btn { flex-basis: 100%; } }
.band .stars { display: inline-flex; gap: 2px; color: var(--green-500); }
.band .stars svg:not(:only-child) { width: 14px; height: 14px; fill: currentColor; stroke: none; }   /* archived option A's five separate icons */
.logo-list { columns: 3; column-gap: 2rem; list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.logo-list li { margin: 0 0 0.5rem; break-inside: avoid; padding-left: 1rem; position: relative; }
.logo-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--on-field-3); }
@media (max-width: 720px) { .logo-list { columns: 1; } }
.callout { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; background: var(--gray-50); }
.callout--highlight { background: var(--highlight-soft); border-color: var(--yellow-300); }

/* Screenshot placeholder (Graysen supplies real captures) */
.shot { background: var(--gray-100); border: 1px dashed var(--gray-400); border-radius: var(--radius); display: grid; place-items: center; text-align: center; padding: 1rem; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; min-height: 160px; max-width: 100%; }
.shot--wide { aspect-ratio: 16 / 10; }
.shot--ui { aspect-ratio: 4 / 3; }
.shot .big { font-family: var(--font-display); font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); margin-bottom: 0.25rem; }

/* Page intro (non-home pages) */
.intro { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.intro h1 { font-size: var(--text-4xl); margin-bottom: 1rem; max-width: 20ch; }
.intro .lede { margin-bottom: 1.5rem; }
.intro--field { background: var(--field); color: var(--on-field); }
.intro--field h1 { color: #fff; }
.intro--field .lede { color: var(--on-field-2); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .intro__grid { grid-template-columns: minmax(0,1fr); } }
.crumbs { font-size: 0.8125rem; color: var(--ink-3); margin-bottom: 1.25rem; }
.crumbs a { color: var(--ink-2); }
.crumbs span { margin: 0 0.4rem; }
.intro--field .crumbs, .intro--field .crumbs a { color: var(--on-field-3); }

/* Article / guide typography */
.prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.65; }
.prose h2 { font-size: var(--text-2xl); margin-top: 2.5rem; }
.prose h3 { font-size: 1.375rem; margin-top: 2rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.1rem; }
.prose .paper p { margin-bottom: 0; }   /* a sample page inside an article keeps the paper's own spacing (Oct 4) */
.prose .example { background: var(--gray-50); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.25rem; font-family: var(--font-paper); font-size: 1.0625rem; line-height: 1.8; }
.prose .example .ref { padding-left: 3em; text-indent: -3em; }
.toc { position: sticky; top: 88px; font-size: 0.9375rem; }
.toc h4 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 0.75rem; }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--rule); }
.toc li { margin: 0; }
.toc a { display: block; padding: 0.3rem 0 0.3rem 0.875rem; color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.toc a:hover, .toc a.is-active { color: var(--ink); border-left-color: var(--blue-500); }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .article-grid { grid-template-columns: minmax(0,1fr); } .toc { position: static; } }
.byline { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; color: var(--ink-2); margin: 1rem 0 0; }
.byline .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-100); display: grid; place-items: center; color: var(--blue-900); font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; }
.byline b { color: var(--ink); }

/* Post cards (blog index) */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem 2rem; }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .posts { grid-template-columns: minmax(0,1fr); } }
.post { border-top: 2px solid var(--ink); padding-top: 0.875rem; display: flex; flex-direction: column; }
.post .meta { order: 3; margin: 0.625rem 0 0; }
.post h3, .post h2 { order: 1; }
.post p { order: 2; }
.post .meta { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.5rem; display: flex; gap: 0.75rem; }
.post h3, .post h2 { font-size: 1.1875rem; margin-bottom: 0.375rem; letter-spacing: -0.005em; }
.post h3 a, .post h2 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover, .post h2 a:hover { text-decoration: underline; }
.post p { color: var(--ink-2); font-size: 0.9375rem; margin: 0; }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { text-align: left; padding: 0.75rem 0.75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table th { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid var(--ink); }
.table td:first-child { font-weight: 600; }
.table .yes { color: var(--green-500); font-weight: 600; }
.table .no { color: var(--ink-3); }
.table-wrap { overflow-x: auto; }
/* On a phone a row becomes a ruled block: the first cell is its title, every other cell sits beside its column heading. Nothing scrolls sideways. */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; }
  .table:not(.table--keep), .table:not(.table--keep) tbody, .table:not(.table--keep) tr, .table:not(.table--keep) td { display: block; }
  .table:not(.table--keep) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table:not(.table--keep) tr { border-top: 2px solid var(--ink); padding: 0.875rem 0 1.125rem; }
  .table:not(.table--keep) td { position: relative; border: 0; padding: 0.3rem 0 0.3rem 8.25rem; min-height: 2.6rem; overflow-wrap: anywhere; }
  .table:not(.table--keep) td::before { content: attr(data-label); position: absolute; left: 0; top: 0.5rem; width: 7.5rem; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
  .table:not(.table--keep) td:first-child { padding-left: 0; min-height: 0; padding-bottom: 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
  .table:not(.table--keep) td:first-child::before { content: none; }
  .table--label-first:not(.table--keep) td:first-child::before { content: attr(data-label); position: static; display: block; width: auto; margin-bottom: 0.15rem; }
}
.prose .table-wrap { margin-bottom: 1.5rem; }

/* Review notes (mockup only; removed in production) */
.verify { display: inline-block; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--yellow-300); color: var(--blue-950); padding: 0.1rem 0.35rem; border-radius: 3px; vertical-align: middle; margin-left: 0.25rem; max-width: 100%; }
.section--field .verify, .hero .verify { color: var(--blue-950); }

/* Utilities */
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.text-center { text-align: center; }
.muted { color: var(--ink-3); }
.hide-mobile { } @media (max-width: 720px) { .hide-mobile { display: none !important; } }

/* Term toggle */
[data-term][aria-pressed="true"] { background: var(--action); color: #fff; border-color: var(--action); }
.term-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.term-row .term-buttons { display: inline-flex; gap: 0.5rem; }
@media (max-width: 560px) { .term-row { flex-direction: column; align-items: flex-start; } .term-row .term-buttons { width: 100%; } .term-row .term-buttons .btn { flex: 1; justify-content: center; } }
.plan .price sup { font-weight: 500; }

/* Mobile refinements */
.fields dd { overflow-wrap: anywhere; }
@media (max-width: 560px) { .fields { grid-template-columns: fit-content(38%) minmax(0, 1fr); } .fields dt { overflow-wrap: anywhere; } }
.fields dd .mono { overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .stage__arrow { right: 0.75rem; bottom: -1.5rem; }
  .stage__paper { margin-left: 1.25rem; width: calc(100% - 1.25rem); transform: rotate(0.4deg); }
  .hero__inner { padding-block: clamp(2.5rem, 7vw, 5rem); }
}
@media (max-width: 560px) {
  .stage__record .lookup { font-size: 0.75rem; }
  .btn--lg { font-size: 1rem; padding: 0.9rem 1.25rem; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
}
@media (max-width: 860px) {
  .stack3 { aspect-ratio: auto; max-width: 480px; margin-bottom: 2rem; }
  .stack3 .paper { position: relative; width: 100%; left: auto; top: auto; right: auto; bottom: auto; transform: none; overflow: hidden; font-size: 9px; line-height: 1.9; }
  .stack3 .paper--title, .stack3 .paper--refs { display: none; }
  .stack3 .pin { display: none; }
}

@media (prefers-reduced-motion: reduce) { .stage__record .lookup .cursor { animation: none; } .btn, .faq summary::after { transition: none; } }
.hide-verify .verify { display: none; }
.footer .footer__heading, .toc .toc__heading { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-field-3); font-weight: 500; margin: 0 0 0.875rem; }
.toc .toc__heading { color: var(--ink-3); }
.plan .record__bar { font-size: 0.8125rem; }

/* ---------- Intro world elements (product pages) ---------- */
.intro--field .paper { box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 30px 60px -24px rgba(0,0,0,0.6); border: 0; }
.sheet-tag, .twin__tag, .sheet-intro__tag, .pagebreak__tag, .fan__tag { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.4; color: var(--on-field-3); margin: 0.875rem 0 0; }
.paper .twin__tag, .paper .sheet-intro__tag { position: absolute; left: 6.6%; bottom: 5%; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-500); background: var(--blue-50); padding: 0.2rem 0.5rem; border-radius: 3px; margin: 0; }
.twin { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.twin .paper { aspect-ratio: 8.5 / 8; font-size: clamp(8px, 0.78vw, 10px); padding: 7% 8% 14%; }
.twin { margin-bottom: 1.5rem; } .twin__a { transform: rotate(-0.8deg); } .twin__b { transform: rotate(0.6deg) translateY(1.25rem); }
.sheet-intro { aspect-ratio: 8.5 / 9.5; font-size: clamp(8px, 0.85vw, 11px); padding: 7% 8% 12%; }
.sheet-intro { display: flex; flex-direction: column; }
.sheet-intro .fn { width: 100%; margin-top: auto; }
.pagebreak { position: relative; }
.pagebreak .paper { font-size: clamp(8px, 0.85vw, 11px); aspect-ratio: auto; }
.pagebreak__top { padding: 7% 8% 5%; }
.pagebreak__bottom { padding: 7% 8% 5%; margin-top: 0.75rem; }
.pagebreak__top::after, .pagebreak__bottom::before { content: ""; display: block; position: absolute; left: 0; right: 0; height: 2px; }
.fan { position: relative; aspect-ratio: 1 / 0.72; }
.fan .paper { position: absolute; width: 40%; font-size: 7.5px; line-height: 1.9; padding: 4.5% 4%; aspect-ratio: 8.5 / 11; overflow: hidden; }
.fan__1 { left: 0; top: 6%; transform: rotate(-3deg); z-index: 1; }
.fan__2 { left: 30%; top: 0; transform: rotate(0.5deg); z-index: 3; }
.fan__3 { left: 60%; top: 6%; transform: rotate(3deg); z-index: 2; }
.fan__tag { margin-top: 0.75rem; }
/* the sheets' type scales with the fan's width (capped at 7.5px), so each page wraps the same at every size and nothing spills past a sheet (Oct 4) */
.fan { container-type: inline-size; }
.fan .paper { font-size: min(7.5px, 1.45cqw); }

@media (max-width: 560px) { .twin { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .twin__b { transform: rotate(0.6deg); } .twin .paper { aspect-ratio: 8.5 / 7.5; padding: 7% 8% 16%; font-size: 9px; } .paper .twin__tag, .paper .sheet-intro__tag { bottom: 4%; } }

/* ---------- Logo: the eye mark plus the wordmark as live text (Soin Sans Pro Bold) ---------- */
.logo { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; line-height: 1; }
.logo__mark { height: 30px; width: auto; display: block; }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; letter-spacing: -0.012em; color: #212121; line-height: 1; padding-top: 0.06em; position: relative; top: 0.08em; } /* optical centering: the caps sit on the eye's center line (the red dot), not on its bounding box (Graysen, Oct 4) */
.logo--on-field .logo__word { color: #fff; }
.footer .logo { margin-bottom: 1rem; }
.footer .logo .logo__mark { height: 32px; }
@media (max-width: 560px) { .logo__mark { height: 26px; } .logo__word { font-size: 1.9rem; } }
@media (max-width: 420px) { .logo__mark { height: 22px; } .logo__word { font-size: 1.6rem; } .nav__right { gap: 0.25rem; } }
@media (max-width: 359px) { .nav__right .btn { display: none; } }

/* ---------- Mockup-only: home page option switcher ---------- */
.optbar { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 0.375rem; background: var(--gray-900); color: #fff; padding: 0.375rem 0.5rem 0.375rem 0.875rem; border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6); font-size: 0.8125rem; }
.optbar b { font-family: var(--font-mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-400); margin-right: 0.25rem; white-space: nowrap; }
.optbar a { display: inline-flex; align-items: center; gap: 0.4rem; color: #fff; text-decoration: none; padding: 0.4rem 0.75rem; border-radius: 999px; font-weight: 700; font-family: var(--font-display); }
.optbar a span { font-family: var(--font-body); font-weight: 400; color: var(--gray-400); }
.optbar a[aria-current="true"] { background: #fff; color: var(--gray-900); }
.optbar a[aria-current="true"] span { color: var(--gray-700); }
@media (max-width: 640px) { .optbar a span, .optbar b { display: none; } }
.hide-verify .optbar { display: none; }

/* Mockups only: the question a review link points at */
.verify.is-asked { outline: 3px solid var(--blue-500); outline-offset: 3px; }

/* ==========================================================================
   Motion (Oct 5, 2026): six small animations of PERRLA doing its job, on one mechanism.
   The head script puts .motion-on or .motion-off on <html> before the first paint. site.js gives each [data-play]
   element .is-played once, a short pause after it is half on screen, and .is-settled once it has finished.
   - START states live only in the block at the end of this section, under .motion-on [data-play]:not(.is-played),
     inside a screen + no-preference media query: reduced motion, ?static, no JavaScript, print, and a script that
     failed to load all show the finished state from the first paint.
   - The TRAVEL rules below (transitions, the caret, the scan line) apply only until .is-settled, so a finished
     element is left with exactly its own styling, pixel for pixel. Transitions are declared only once .is-played:
     Chrome styles the contents of a size container (container-type) twice on first render, and a transition declared
     from the start would run on that second pass, visibly fading the finished state out on page load.
   Nothing moves layout: opacity, transform, background-size, colors, and padding and indent inside a fixed-size sheet.
   ========================================================================== */

/* 1. The citation lands at the cursor (PERRLA Online, Word and Google Docs heroes, data-play="cite").
   .cite-new is the citation that lands; its ::before is the blinking caret at that spot, drawn without taking room.
   Word: Add Citation is clicked, then the citation lands and the caret moves past it.
   PERRLA Online: the ( is typed, the picker opens under the caret, and the highlight moves to the right source. */
.motion-on [data-play="cite"]:not(.is-settled) .cite-new { position: relative; }
.motion-on [data-play="cite"].is-played:not(.is-settled) .cite-new { transition: color 0.3s ease-out, background-color 0.3s ease-out; }
.motion-on [data-play="cite"]:not(.is-settled) .cite-new::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5px; height: 1.15em; background: #000; opacity: 0; pointer-events: none; }
.motion-on .wwin[data-play="cite"].is-played:not(.is-settled) .cite-new { transition-delay: 0.3s; }
.motion-on .wwin[data-play="cite"].is-played:not(.is-settled) .cite-new::before { animation: mo-hold 0.3s; }
.motion-on .wwin[data-play="cite"].is-played:not(.is-settled) .wwin__add { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.motion-on .wwin[data-play="cite"].is-played:not(.is-settled) .cite-after { transition: opacity 0.3s ease-out 0.3s; }
.motion-on .wwin[data-play="cite"].is-played:not(.is-settled) .wwin__caret { transition: opacity 0s linear 0.3s; }
.motion-on .citedemo[data-play="cite"]:not(.is-settled) .citedemo__pick { transform-origin: 0 0; }
.motion-on .citedemo[data-play="cite"].is-played:not(.is-settled) .citedemo__pick { transition: opacity 0.2s ease-out 0.12s, transform 0.32s var(--ease-out) 0.12s; }
.motion-on .citedemo[data-play="cite"].is-played:not(.is-settled) .citedemo__opt { transition: background-color 0.18s ease 0.75s, color 0.18s ease 0.75s, font-weight 0s linear 0.75s; }

/* 2. A DOI fills in the reference (every Look up card and lookup sketch, data-play="lookup"): the DOI is there first,
   then each part of the record arrives, staggered by site.js: .lk-in is an element the card already has, .lk-part a span
   added only to carry a part, which site.js takes out again afterward */
.motion-on [data-play="lookup"].is-played:not(.is-settled) .lk-in, .motion-on [data-play="lookup"].is-played:not(.is-settled) .lk-part { transition: opacity 0.35s ease-out; }
/* the home card clamps its reference to four lines: the clamp's "…" (drawn in the paragraph's own color) waits for the title it cuts */
.motion-on [data-play="lookup"].is-played:not(.is-settled) .d-ref { transition: color 0.35s ease-out 0.68s; }
.motion-on [data-play="lookup"]:not(.is-settled) .d-ref .lk-part { color: var(--ink); }

/* 3. I'm Finished runs its check (data-play="check"): a light scan line passes down once, then the Suggested Fixes
   rows, or the all-clear line, arrive one by one (staggered by site.js) */
.motion-on [data-play="check"]:not(.is-settled) { position: relative; }
.motion-on [data-play="check"]:not(.is-settled)::after { content: ""; position: absolute; left: 0; right: 0; top: var(--scan-top, 0); bottom: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(70, 185, 201, 0) 0, rgba(70, 185, 201, 0.16) 78%, rgba(39, 102, 155, 0.5) 96%, rgba(39, 102, 155, 0) 100%) 0 -3rem / 100% 3rem no-repeat; }
.motion-on .icard[data-play="check"] { --scan-top: calc(var(--line) * 1.5); }   /* the card's body, below its red line */
.motion-on [data-play="check"].is-played:not(.is-settled)::after { animation: mo-scan 0.8s cubic-bezier(0.45, 0, 0.55, 1); }
.motion-on [data-play="check"].is-played:not(.is-settled) .d-row, .motion-on [data-play="check"].is-played:not(.is-settled) .wsk__ok { transition: opacity 0.3s ease-out, transform 0.3s var(--ease-out); }

/* 4. The hanging indent snaps in (data-play="hang"): the entries start flush left and ease to the half-inch hang, one by one */
.motion-on [data-play="hang"].is-played:not(.is-settled) .ref { transition: padding-left 0.5s var(--ease-out), text-indent 0.5s var(--ease-out); }

/* 5. The highlighter swipes on (each page's H1, data-play="hl"): left to right, line by line where the words wrap */
.motion-on .hl[data-play]:not(.is-settled) { background-repeat: no-repeat; background-size: 100% 100%; }
.motion-on .hl[data-play].is-played:not(.is-settled) { transition: background-size 0.6s cubic-bezier(0.55, 0, 0.25, 1); }

/* 6. The Formatted stamp lands (data-play="stamp"): pressed down from 1.15x, its tilt settling, with the site's one overshoot */
.motion-on .callout.closing[data-play].is-played:not(.is-settled)::after { transition: opacity 0.25s ease-out, transform 0.45s cubic-bezier(0.3, 1.55, 0.6, 1); }

@keyframes mo-blink { 50% { opacity: 0; } }
@keyframes mo-hold { from, to { opacity: 1; } }
@keyframes mo-scan { 0% { opacity: 1; background-position: 0 -3rem; } 88% { opacity: 1; } 100% { opacity: 0; background-position: 0 100%; } }

/* The start states, and only here */
@media screen and (prefers-reduced-motion: no-preference) {
  /* 1 */
  .motion-on [data-play="cite"]:not(.is-played) .cite-new { color: transparent; background-color: transparent; }
  .motion-on [data-play="cite"]:not(.is-played) .cite-new::before { opacity: 1; animation: mo-blink 1.06s step-end infinite; }
  .motion-on [data-play="cite"]:not(.is-played) .cite-after,
  .motion-on [data-play="cite"]:not(.is-played) .cite-paren,
  .motion-on [data-play="cite"]:not(.is-played) .wwin__caret { opacity: 0; }
  .motion-on [data-play="cite"]:not(.is-played) .wwin__ref.is-on .wwin__add { background-color: transparent; border-color: var(--gray-300); color: var(--ink-2); }
  .motion-on [data-play="cite"]:not(.is-played) .citedemo__caret { animation: mo-blink 1.06s step-end infinite; }
  .motion-on [data-play="cite"]:not(.is-played) .citedemo__pick { opacity: 0; transform: translateY(-0.35rem) scale(0.98); }
  .motion-on [data-play="cite"]:not(.is-played) .citedemo__opt:not(.is-on) { background-color: var(--blue-50); color: var(--blue-900); font-weight: 600; }
  .motion-on [data-play="cite"]:not(.is-played) .citedemo__opt.is-on { background-color: transparent; color: var(--ink); font-weight: 400; }
  /* 2 */
  .motion-on [data-play="lookup"]:not(.is-played) .lk-in,
  .motion-on [data-play="lookup"]:not(.is-played) .lk-part { opacity: 0; }
  .motion-on [data-play="lookup"]:not(.is-played) .d-ref { color: transparent; }
  /* 3 */
  .motion-on [data-play="check"]:not(.is-played) .d-row,
  .motion-on [data-play="check"]:not(.is-played) .wsk__ok { opacity: 0; transform: translateY(0.3rem); }
  /* 4 */
  .motion-on [data-play="hang"]:not(.is-played) .ref { padding-left: 0; text-indent: 0; }
  /* 5 */
  .motion-on .hl[data-play]:not(.is-played) { background-size: 0% 100%; }
  /* 6 */
  .motion-on .callout.closing[data-play]:not(.is-played)::after { opacity: 0; transform: rotate(-10deg) scale(1.15); }
}