/* Hallmark · shape: Map / Diagram (draw 1286b0) · genre: playful · theme: brand · redesign: full · copy: verbatim
 * paper: oklch(24.2% 0.021 277) · accent: oklch(76.3% 0.106 55) · display: Pofak · body: Pofak · hero: Stage (swapped from Banner: the user asked for the flapping logo and embers on the first screen) · nav: slab bar (swapped from masthead: the genre refuses it) · footer: colophon block · signature: the brand bird hatching, its wing beating, embers rising from the nest
 * axes: dark/rounded-sans/warm · posture: Stage · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R2 V3 · weakest: R, the Claude section carries the user's long copy verbatim; the map carries the structure so the words can sit in one column */
/* Hallmark · dropped https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js, https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js, https://unpkg.com/lenis@1.1.13/dist/lenis.min.js, brand-loader, main-nav, nav-backdrop, nav-drawer, nav-toggle, top · the new page needs no scroll library and the slab bar has no drawer (the links repeat in the footer and the sections) */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Pofak"; src: url("fonts/pofak-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pofak"; src: url("fonts/pofak-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Pofak"; src: url("fonts/pofak-600.ttf") format("truetype"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Pofak"; src: url("fonts/pofak-800.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Pofak"; src: url("fonts/pofak-900.ttf") format("truetype"); font-weight: 900; font-display: swap; }

html { scroll-behavior: smooth; }
body { line-height: 1.8; }
h1, h2, h3 { line-height: 1.25; }
strong { font-weight: 800; color: var(--color-accent); }
code { font-family: var(--font-mono); }
.ic { width: 1.15em; height: 1.15em; flex: none; }
section { padding-block: var(--section-gap); }

/* Controls: one filled primary, quiet outlines elsewhere; all eight states */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); border-color: var(--color-muted); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 10px 26px -14px var(--color-accent); }
.btn--primary:hover { background: var(--color-focus); border-color: var(--color-focus); }
.btn--small { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
a:not(.btn):hover { color: var(--color-accent); }
a:focus-visible, [tabindex]:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Intro (the app's own hatching animation); hidden without script or with reduced motion */
.loader { display: none; }
.m .loader { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: var(--color-paper-2); }

/* Bar: a solid slab, wordmark, the page's destinations, one action */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.bar-in { display: flex; align-items: center; gap: var(--space-xl); min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font: 900 var(--text-xl)/1 var(--font-display); text-decoration: none; }
.wordmark img { width: 36px; height: 36px; border-radius: 10px; }
.bar nav { display: flex; gap: var(--space-lg); margin-inline-start: auto; }
.bar nav a { color: var(--color-ink-2); font-weight: 600; text-decoration: none; }

/* Hero (Stage): the head and actions on five columns, the brand mark on seven */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: calc(100svh - 72px - var(--space-2xl) - var(--space-3xl)); }
.hero h1 { font-size: clamp(4.5rem, 9vw, 8.5rem); max-width: none; }
.h1-sub { display: block; margin-top: var(--space-sm); font-size: var(--text-xl); font-weight: 700; color: var(--color-ink-2); }
.hero .lead { margin-top: var(--space-lg); font-size: var(--text-2xl); font-weight: 800; color: var(--color-ink); line-height: 1.5; text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.hero-mark { position: relative; display: grid; place-items: center; aspect-ratio: 7 / 6; }
.hero-mark::before { content: ""; position: absolute; inset: 8% 10% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--color-ember-glow), transparent); }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mark { position: relative; width: 78%; height: auto; overflow: visible; }
.mark-nest { fill: var(--color-nest); }
.mark-wing, .mark-body { fill: var(--color-accent); }
.mark-shade { fill: var(--color-paper-2); }
.mark-egg { fill: var(--color-egg); }
.mark-bird { transform-box: view-box; transform-origin: 515px 600px; }
.mark-wing { transform-box: view-box; transform-origin: 470px 540px; }
.m .mark-bird { animation: bob 4.8s var(--ease-in-out) infinite; }
.m .mark-wing { animation: flap 2.4s var(--ease-in-out) infinite; }
@keyframes flap { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(-14deg); } 55% { transform: rotate(3deg); } 75% { transform: rotate(-6deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Screenshots: real files, rounded, a hairline; never a drawn window or device */
.shot { width: 100%; height: auto; border-radius: var(--radius-card); outline: 1px solid var(--color-rule); outline-offset: -1px; box-shadow: var(--shadow-card); }
.shot--phone { border-radius: 28px; }
figure { margin: 0; }

/* Two nests: the Today screen leads, the two kinds of nest beside it */
.nests { padding-top: 0; }
.nests-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-3xl); align-items: center; }
.nests-shot { position: relative; }
.nests-phone { position: absolute; inset-inline-end: calc(-1 * var(--space-xl)); bottom: calc(-1 * var(--space-xl)); width: 26%; }
.nests-list { display: grid; gap: var(--space-2xl); }
.nest h2 { font-size: var(--text-2xl); padding-bottom: var(--space-sm); border-bottom: 3px solid var(--nest); }
.nest ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); font-size: var(--text-lg); }
.nest li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: var(--space-sm); border-radius: 2px; background: var(--nest); transform: translateY(-2px); }

/* Team (Pinned): five short panels scroll past one held screen */
.team { background: var(--color-paper-2); }
.team h2 { margin-bottom: var(--space-2xl); }
.pinned { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
.pinned-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.pstep { counter-increment: s; min-height: 62vh; display: grid; align-content: center; gap: var(--space-sm); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.pstep:first-child { border-top: 0; }
.pstep h3 { font-size: var(--text-3xl); }
.pstep h3::before { content: counter(s, persian) "  "; color: var(--color-accent); }
.pstep p { font-size: var(--text-lg); color: var(--color-ink-2); }
.pstep-shot { display: none; }
.pinned-stage { position: sticky; top: calc(72px + var(--space-2xl)); height: fit-content; display: grid; }
.pframe { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.pframe.is-on { opacity: 1; }
.pframe--phone .shot { width: auto; max-height: 62vh; }
.privacy { display: flex; gap: var(--space-md); align-items: flex-start; max-width: 64ch; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); font-size: var(--text-lg); }
.privacy .ic { width: 1.6em; height: 1.6em; color: var(--color-success); }

/* Claude (the map): the system drawn from the section's own facts */
.claude h2 { margin-bottom: var(--space-2xl); max-width: 20ch; }
.claude-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.map { width: 100%; height: auto; }
.map-edges path { fill: none; stroke: var(--color-rule); stroke-width: 2; }
.map-node rect { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1.5; }
.map-node text { fill: var(--color-ink); font: 700 18px var(--font-body); text-anchor: middle; }
.map-node .map-sub { fill: var(--color-muted); font-size: 14px; font-weight: 500; }
.map-node--core rect { fill: var(--color-accent); stroke: none; }
.map-node--core text { fill: var(--color-accent-ink); font-size: 30px; font-weight: 900; }
.map-node--you rect { stroke: var(--color-accent); }
.map-node--ask rect { stroke: var(--color-success); }
.claude-points { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-lg); font-size: var(--text-lg); }
.claude-points li { padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.claude-use { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); margin-top: var(--space-3xl); align-items: start; }
.claude-use h3 { font-size: var(--text-lg); color: var(--color-muted); margin-bottom: var(--space-md); }
.prompts { display: grid; justify-items: start; gap: var(--space-sm); }
.prompt { padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-input) var(--radius-input) 4px var(--radius-input); background: var(--color-egg); color: var(--color-accent-ink); font-weight: 700; font-size: var(--text-lg); }
.seg { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-paper-2); margin-bottom: var(--space-md); }
.seg button { min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font-weight: 700; cursor: pointer; }
.seg button:hover { color: var(--color-ink); }
.seg button[aria-selected="true"] { background: var(--color-paper-3); color: var(--color-ink); }
.cmd { display: flex; gap: var(--space-md); align-items: center; padding: var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.cmd code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.6; text-align: left; color: var(--color-ink-2); }
.guide { display: inline-block; margin-top: var(--space-md); font-weight: 700; color: var(--color-accent); }
.claude-shots { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); margin-top: var(--space-3xl); align-items: start; }

/* Screens (Rail): the next one cut by the edge */
.screens { padding-top: 0; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18rem, 40%); gap: var(--gap-columns); margin: 0; padding: 0 var(--gutter) var(--space-md); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
.rail > li { scroll-snap-align: start; }
.rail > li.is-phone { grid-column: span 1; }
.rail .is-phone .shot { width: 62%; margin-inline: auto; }
.rail figcaption { margin-top: var(--space-sm); font-size: var(--text-md); font-weight: 700; color: var(--color-ink-2); }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* Download (Band): the platforms beside one last screen */
.download { background: var(--color-paper-2); }
.dl-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-3xl); align-items: center; }
.platforms { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.platform h3 { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-2xl); }
.platform ul { margin: var(--space-md) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.platform a { font-weight: 700; font-size: var(--text-lg); }
.tag { font-size: var(--text-sm); color: var(--color-accent); }
.note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.latest { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.latest code { margin-inline-start: var(--space-xs); color: var(--color-ink-2); }
.dl-shot .shot { width: min(100%, 300px); margin-inline: auto; }

/* Changelog */
.log-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); }
.log h1 { font-size: var(--text-display-s); }
.log h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.log ul { margin: 0 0 var(--space-xl); padding-inline-start: var(--space-lg); display: grid; gap: var(--space-xs); font-size: var(--text-lg); }

/* Colophon */
.colophon { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); color: var(--color-muted); }
.colophon p { max-width: none; display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: baseline; }
.colophon b { color: var(--color-ink); font: 900 var(--text-xl)/1 var(--font-display); }

@media (max-width: 60rem) {
  .bar nav { display: none; }
  .bar-in { justify-content: space-between; }
  .hero-grid, .nests-grid, .pinned, .claude-grid, .claude-use, .claude-shots, .dl-grid, .log-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero-grid { min-height: 0; }
  .hero-mark { order: -1; width: min(80%, 360px); margin-inline: auto; }
  .nests-phone { inset-inline-end: 0; bottom: calc(-1 * var(--space-lg)); width: 30%; }
  .pinned-stage { display: none; }
  .pstep { min-height: 0; }
  .pstep-shot { display: block; margin-top: var(--space-md); }
  .pstep-shot .shot--phone { width: 62%; margin-inline: auto; }
  .platforms { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-auto-columns: minmax(16rem, 82%); }
  .map-wrap { overflow-x: auto; }
  .map { min-width: 640px; }
}
@media (prefers-reduced-motion: reduce) { .m .mark-bird, .m .mark-wing { animation: none; } .pframe { transition: none; } }
.nest--personal { --nest: var(--color-personal); } .nest--team { --nest: var(--color-team); }
.platform .btn { font-size: var(--text-md); white-space: normal; text-align: start; line-height: 1.4; padding-block: var(--space-xs); }
.platform .btn--lead { border-color: var(--color-accent); color: var(--color-accent); }
.platform li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }