/* Hallmark · shape: Conversational FAQ · genre: playful · theme: Hum (deal 1/3, seed trvnvy-small-software-studio-76b1·6e18717b·2026-11-09·r0) · job: try, sent on to finap (private beta, no download), so the action is the finap link in the hero and the contact at the close · draw: aceb8a
 * hero: Banner · nav: floating pill · footer: letter close · imagery: none, the finap mark built in card stock · signature: finap's three rising bars cut from card stock, standing on a torn kraft strip
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · modes: light+dark · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, a studio with one app could read as any portfolio stub; every answer is a checkable fact (finap's own, and what this site does not collect) */
/* Hallmark · waive 37 · Chillax is replaced by the system rounded stack (SF Pro Rounded, Arial Rounded) over system-ui · the owner allows no font files and no third-party requests on trvnvy.com */
/* Hallmark · dismissed F4 · the secondary is Hum's card-stock secondary (cream card, rule edge), the pear fill is the only primary */
/* Hallmark · swap · the draw's screens, before-and-after and platforms sections need a reachable product; finap is a private-beta Android app with no public screens, so its facts and its mark carry the page */

@import url("./tokens.css");
@import url("./base.css");

:root {
  color-scheme: light dark;
  --font-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Arial Rounded MT", system-ui, sans-serif;
  --font-body: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --grain: url("/grain.svg");
  --color-ink-edge: oklch(12% 0.014 255);
  --color-band: var(--color-ink);
  --color-band-ink: var(--color-paper);
  --torn-top: polygon(0% 7.9px, 2.5% 0.5px, 5% 2.5px, 7.5% 5px, 10% 4.6px, 12.5% 3.8px, 15% 1.7px, 17.5% 8.2px, 20% 0.5px, 22.5% 3.3px, 25% 3.1px, 27.5% 6px, 30% 8.3px, 32.5% 4.6px, 35% 1.5px, 37.5% 3.7px, 40% 2.6px, 42.5% 3.3px, 45% 3.8px, 47.5% 3px, 50% 4.8px, 52.5% 5.5px, 55% 2.1px, 57.5% 8.2px, 60% 4.1px, 62.5% 7.8px, 65% 5.7px, 67.5% 5.7px, 70% 4.6px, 72.5% 4.5px, 75% 6.2px, 77.5% 8.5px, 80% 3.6px, 82.5% 6.4px, 85% 2.3px, 87.5% 5.3px, 90% 3.2px, 92.5% 3px, 95% 3.5px, 97.5% 7.2px, 100% 7.9px, 100% 100%, 0 100%);
  --torn-both: polygon(0% 7.9px, 5% 2.5px, 10% 4.6px, 15% 1.7px, 20% 0.5px, 25% 3.1px, 30% 8.3px, 35% 1.5px, 40% 2.6px, 45% 3.8px, 50% 4.8px, 55% 2.1px, 60% 4.1px, 65% 5.7px, 70% 4.6px, 75% 6.2px, 80% 3.6px, 85% 2.3px, 90% 3.2px, 95% 3.5px, 100% 7.9px, 100% calc(100% - 6.6px), 95% calc(100% - 8.4px), 90% calc(100% - 3.9px), 85% calc(100% - 1.4px), 80% calc(100% - 7.5px), 75% calc(100% - 3.4px), 70% calc(100% - 8.2px), 65% calc(100% - 5.8px), 60% calc(100% - 8.3px), 55% calc(100% - 1.1px), 50% calc(100% - 8.3px), 45% calc(100% - 6.2px), 40% calc(100% - 6.3px), 35% calc(100% - 3.4px), 30% calc(100% - 7.4px), 25% calc(100% - 6.2px), 20% calc(100% - 6.8px), 15% calc(100% - 3px), 10% calc(100% - 6.6px), 5% calc(100% - 2.6px), 0% 100%);
}

/* Dark: re-derived, never inverted; elevation by lightness, no drop shadows */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(18% 0.012 95); --color-paper-2: oklch(21% 0.014 95); --color-paper-3: oklch(24% 0.016 95);
    --color-ink: oklch(94% 0.012 95); --color-ink-2: oklch(86% 0.012 95); --color-muted: oklch(74% 0.014 255);
    --color-rule: oklch(32% 0.016 95);
    --color-accent: oklch(86% 0.15 96); --color-accent-deep: oklch(64% 0.13 92); --color-accent-ink: oklch(20% 0.014 255);
    --color-accent-2: oklch(76% 0.12 250); --color-accent-3: oklch(72% 0.17 22);
    --color-mint: oklch(76% 0.13 152); --color-mint-deep: oklch(52% 0.11 155); --color-focus: oklch(76% 0.12 250);
    --color-card: oklch(24% 0.012 95); --color-edge: oklch(34% 0.03 88);
    --color-kraft: oklch(48% 0.07 62); --color-sugar: oklch(30% 0.035 236);
    --color-ink-edge: oklch(74% 0.012 95);
    --color-band: oklch(26% 0.02 255); --color-band-ink: oklch(94% 0.012 95);
    --shadow-card: inset 0 0 0 1px var(--color-rule);
    --shadow-paper: drop-shadow(0 0 0.6px oklch(8% 0.01 255 / 0.6));
  }
}

body { font-weight: 400; background: var(--grain), var(--color-paper); }
a { color: var(--color-accent-2); }
a:hover { text-decoration-thickness: 2px; }

.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-card); color: var(--color-ink); translate: 0 -200%; }
.skip:focus-visible { translate: 0 0; }

/* Nav: a solid floating pill */
.nav-wrap { position: sticky; top: var(--space-md); z-index: var(--z-sticky-nav); padding-inline: var(--gutter); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); max-width: calc(var(--container) - 2 * var(--gutter)); min-height: 64px; margin: var(--space-md) auto 0; padding-inline: var(--space-lg); border-radius: var(--radius-pill); background: var(--grain), var(--color-card); box-shadow: var(--shadow-card); }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.nav ul { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav ul a { color: var(--color-ink); text-decoration: none; }
.nav ul a:hover { color: var(--color-accent-2); }

/* Hero: Banner */
.hero { display: grid; align-content: center; min-height: 56svh; padding-block: var(--space-3xl) var(--space-2xl); }
.hero h1 { max-width: 14ch; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* Card stock controls */
.btn { --edge: 5px; display: inline-flex; align-items: center; min-height: 54px; padding: 0 var(--space-lg); border-radius: var(--radius-stock); font-weight: 600; color: var(--color-ink); text-decoration: none; background: var(--grain), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.btn--primary { color: var(--color-accent-ink); background: var(--grain), var(--color-accent); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep); transition-timing-function: var(--ease-spring); }
.btn:hover { --edge: 7px; translate: 0 -2px; text-decoration: none; }
.btn:active { --edge: 1px; translate: 0 4px; }

/* What does trvnvy make: split, facts beside the mark */
.make { padding-block: var(--space-2xl) var(--section-gap); }
.make-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.make .lead { margin-top: var(--space-md); }
.facts { margin: var(--space-xl) 0; }
.facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--color-ink-2); }
.text-link { font-weight: 600; }

.mat { position: relative; display: grid; place-items: center; min-height: 520px; padding: var(--space-2xl) var(--space-xl); border-radius: var(--radius-card); background: var(--grain), var(--color-sugar); }
.sheet { width: min(100%, 460px); filter: var(--shadow-paper); rotate: -2deg; }
.paper { position: relative; display: grid; align-items: end; justify-items: center; aspect-ratio: 1; padding: var(--space-2xl) var(--space-xl) 0; border-radius: var(--radius-card); background: var(--grain), var(--color-card); }
.paper::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--grain), var(--color-kraft); clip-path: var(--torn-top); }
.bars { position: relative; z-index: var(--z-raised); display: flex; align-items: flex-end; gap: 9%; width: 72%; height: 64%; margin-bottom: 18%; }
.bar { flex: 1; border-radius: 999px; background: var(--grain), var(--color-ink); box-shadow: 0 5px 0 0 var(--color-ink-edge); }
.bar--1 { height: 40%; }
.bar--2 { height: 69%; }
.bar--3 { height: 100%; background: var(--grain), var(--color-mint); box-shadow: 0 5px 0 0 var(--color-mint-deep); }
.tag { position: absolute; top: var(--space-xl); right: var(--space-xl); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); font-weight: 600; color: var(--color-accent-ink); background: var(--grain), var(--color-accent-3); filter: var(--shadow-paper); rotate: 6deg; }

/* Who makes it: a torn ink sheet */
.who { padding-block: var(--section-gap-s); color: var(--color-band-ink); background: var(--grain), var(--color-band); clip-path: var(--torn-both); }
.who-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; }
.who h2 { color: var(--color-band-ink); }
.answer { font-family: var(--font-display); font-weight: 600; font-size: var(--text-display-s); line-height: 1.08; letter-spacing: var(--tracking-display); text-wrap: balance; max-width: 22ch; }

/* What does this site collect: rows */
.collect { padding-block: var(--section-gap-l) var(--section-gap); }
.collect-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.collect h2 { max-width: 12ch; }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.rows li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows p { color: var(--color-ink-2); font-size: var(--text-lead); }

/* How do I reach trvnvy: the one pear field */
.reach { padding-block: var(--section-gap-s); color: var(--color-accent-ink); background: var(--grain), var(--color-accent); clip-path: var(--torn-top); }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.way { --edge: 5px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); min-height: 220px; padding: var(--space-xl); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; background: var(--grain), var(--color-card); box-shadow: 0 var(--edge) 0 0 var(--color-accent-deep); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.way:hover { --edge: 7px; translate: 0 -2px; }
.way:active { --edge: 1px; translate: 0 4px; }
.way-label { font-size: var(--text-lead); color: var(--color-ink-2); }
.way-addr { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }

/* Footer: a letter close */
.foot { padding-block: var(--space-3xl); }
.foot-grid { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-xl); }
.signoff { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.3; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.foot-links a { color: var(--color-ink); }
.foot-links a:hover { color: var(--color-accent-2); }

/* 404 */
.lost .actions { margin-top: var(--space-xl); }

@media (max-width: 60rem) {
  .make-grid, .who-grid, .collect-grid { grid-template-columns: minmax(0, 1fr); }
  .make-grid { gap: var(--space-2xl); }
  .who-grid { gap: var(--space-lg); }
  .collect-grid { gap: var(--space-xl); }
  .mat { min-height: 0; }
}
@media (max-width: 40rem) {
  .nav { padding-inline: var(--space-md); }
  .nav ul { gap: var(--space-md); }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way { padding: var(--space-lg); min-height: 0; }
  .way-addr { font-size: clamp(1.25rem, 6.5vw, var(--text-2xl)); }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .mat { padding: var(--space-xl) var(--space-md); }
  .tag { top: var(--space-md); right: var(--space-md); }
}