/* Sheetling — the public site (apps/marketing). Plain CSS, no build.

   ONE theme, and it is the logo's (owner decision 2026-09-13: "match the color
   style of the logo and not dark"). The palette is sampled from
   _input/brand/logo-primary.png — its cream ground, the paper of the mascot,
   the warm near-black ink of the wordmark, the cloak's green and the sparkle's
   gold — so the page and the mark are one object. No dark mode on purpose:
   the logo has no dark variant, and the app's own sign-in screen is "always
   cream" for the same reason. The app's per-character hue system stays in the
   app; a site has no character to take a hue from.

   Header and hero follow the pattern Tim pointed at (spring.club, 2026-09-13):
   a fixed, transparent header with a centred pill menu and a pill call to
   action; a tall card-shaped hero with a soft vertical gradient and rounded
   bottom corners; a centred headline that fades and rises on load; phones
   rising from the hero's bottom edge that drift upward as you scroll. */

:root {
  color-scheme: light;

  --ground: #fbf8f1;        /* the page: the logo's cream, a touch deeper so panels read */
  --paper: #fffdf8;         /* panels and the pill menu: the mascot's paper */
  --paper-soft: #f4eee1;    /* bands, tracks, code */
  --line: rgb(28 20 18 / 0.1);
  --line-strong: rgb(28 20 18 / 0.18);

  --ink: #1c1412;           /* the wordmark */
  --ink-2: #4a3f38;         /* body copy */
  --ink-3: #6f6259;         /* captions, notes — 5.2:1 on the ground */

  --green: #507858;         /* the cloak */
  --green-deep: #3b5f45;    /* hover, eyebrows on cream (7.1:1) */
  --green-tint: #e3ecdf;
  --gold: #c9a24a;          /* the d20's sparkle; used once, on the hero line */
  --gold-deep: #8a6a1e;
  --damage: #b8452f;

  --hero-top: #fdfcf9;
  --hero-bottom: #c5d8c4;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 12px;
  --radius-lg: 24px;
  --pill: 999px;
  --header-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--green); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; }
p { margin: 0; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
section { padding-block: 72px; }
.section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; max-width: 70ch; }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-deep);
}

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--pill);
  font: 600 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover { border-color: var(--green); color: var(--ink); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.accent { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 6px 18px rgb(80 120 88 / 0.25); }
.btn.accent:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; box-shadow: 0 8px 22px rgb(80 120 88 / 0.32); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}

/* ----------------------------------------------------------------- nav --- */
/* Fixed and transparent: the page shows through, only the pills are drawn.
   The brand at the left is hidden while the hero's big logo is on screen and
   fades in once it has scrolled away (index.html adds .scrolled); without JS
   it is simply always there. */
.nav { position: fixed; inset: 16px 0 auto 0; z-index: 20; pointer-events: none; }
.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: var(--header-h); }
.nav .wrap > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); justify-self: start; }
.brand img { height: 40px; width: auto; }
/* the header's brand sits in the same blurred pill as the menu, but with no
   border: the fill alone keeps it legible over text, and the mark's own
   outline is the only edge it needs */
.nav .brand {
  padding: 6px 16px 6px 6px; border-radius: var(--pill);
  background: rgb(255 253 248 / 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgb(28 20 18 / 0.06);
}
.nav .brand img { border-radius: 50%; }
@media (max-width: 520px) { .nav .brand { padding: 4px; } }
.brand-name { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.js .nav .brand { opacity: 0; pointer-events: none; transition: opacity 320ms ease; }
.js .nav.scrolled .brand { opacity: 1; pointer-events: auto; }

.nav-links {
  display: flex; gap: 4px; padding: 6px;
  background: rgb(255 253 248 / 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); border-radius: var(--pill);
  box-shadow: 0 8px 30px rgb(28 20 18 / 0.06);
}
.nav-links a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--pill);
  color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none;
  transition: background 160ms ease;
}
.nav-links a:hover { background: var(--green-tint); color: var(--ink); }
.nav-actions { justify-self: end; display: flex; gap: 8px; }
.nav-actions .btn { min-height: 44px; }
@media (max-width: 900px) {
  .nav .wrap { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
}
@media (max-width: 520px) {
  .nav { inset: 10px 0 auto 0; }
  .nav .brand-name { display: none; }
  .nav-actions .btn { padding-inline: 14px; font-size: 14px; min-height: 40px; }
}

/* ---------------------------------------------------------------- hero --- */
/* A card, not a band: a vertical gradient from the logo's ground down into a
   green wash, rounded at the bottom so the page below reads as sliding out
   from under it. `overflow: clip` lets the phones rise from the bottom edge. */
.hero {
  position: relative; overflow: clip;
  padding: calc(var(--header-h) + 44px) 0 0;
  min-height: min(92vh, 960px);
  background: linear-gradient(180deg, var(--hero-top) 0%, #f3f2e8 42%, var(--hero-bottom) 100%);
  border-radius: 0 0 40px 40px;
  display: flex; flex-direction: column;
}
.hero .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; flex: 1; }
.hero-logo { width: min(440px, 84%); height: auto; }
/* the logo leads the hero; the headline is big but does not steal the show */
.hero h1 { max-width: 16ch; font-size: clamp(30px, 4.2vw, 50px); }
.hero .lede { max-width: 58ch; font-size: clamp(16px, 1.6vw, 19px); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-note { font-size: 14px; color: var(--gold-deep); }
.hero-note b { font-weight: 600; }

/* The phones: three frames hanging from the top of their box so their lower
   halves run off the hero's bottom edge (overflow: clip). Two nested boxes
   because three things move independently:
     .slot  — where it sits: tilt, depth (scale, blur, opacity), and the drift
              up on scroll (index.html writes --scroll on the root each frame),
              plus the blur-out as the hero leaves — a card sliding out of a
              sleeve and losing focus
     .phone — the idle float: each phone bobs on its own period and phase so
              the three never move together
   Depth is three layers: the front phone is sharp, the middle slightly soft,
   the back softer and a little smaller and dimmer. */
.hero-phones {
  position: relative; width: min(760px, 100%); height: clamp(260px, 34vw, 400px);
  margin-top: 44px; flex: none;
}
.hero-phones .slot {
  position: absolute; top: 0; margin: 0;
  /* 0.12 keeps the drift under the buttons' row at any scroll (the phones
     start 44px below the last line; --scroll is capped at 1200 in index.html,
     and by then the hero is off screen). The blur is NOT on the same
     variable: --leave is how far the phones' box has gone past the top of the
     viewport (0 while any of its top is still on screen, 1 once it is fully
     out — index.html), so the phones stay sharp until they start leaving and
     lose about 6px of focus on the way. Opacity is the layer's own dim only:
     the front phone is never see-through. */
  transform: translateY(calc(var(--scroll, 0) * -0.12px)) rotate(var(--tilt, 0deg)) scale(var(--depth, 1));
  transform-origin: 50% 0;
  filter: blur(calc(var(--soft, 0px) + var(--leave, 0) * 6px));
  opacity: var(--dim, 1);
  will-change: transform, filter;
}
.hero-phones .slot-a { left: 50%; margin-left: -150px; --tilt: -3deg; --depth: 1; --soft: 0px; --dim: 1; z-index: 3; width: 300px; }
.hero-phones .slot-b { left: 50%; margin-left: 70px; --tilt: 8deg; --depth: 0.96; --soft: 1.2px; --dim: 0.94; z-index: 2; width: 250px; top: 40px; }
.hero-phones .slot-c { left: 50%; margin-left: -320px; --tilt: -9deg; --depth: 0.92; --soft: 2.4px; --dim: 0.86; z-index: 1; width: 250px; top: 40px; }
.hero-phones .phone { width: 100%; margin: 0; }
.float-a { animation: float-a 7.5s ease-in-out infinite; }
.float-b { animation: float-b 9.5s ease-in-out infinite; animation-delay: -3s; }
.float-c { animation: float-c 8.5s ease-in-out infinite; animation-delay: -5.5s; }
@keyframes float-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -10px); } }
@keyframes float-b { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(4px, -14px) rotate(1.2deg); } }
@keyframes float-c { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-4px, -12px) rotate(-1.2deg); } }
@media (max-width: 720px) {
  .hero { border-radius: 0 0 28px 28px; min-height: 0; }
  .hero-phones { height: clamp(220px, 60vw, 300px); }
  .hero-phones .slot-a { width: 220px; margin-left: -110px; }
  .hero-phones .slot-b { width: 170px; margin-left: 40px; top: 30px; }
  .hero-phones .slot-c { width: 170px; margin-left: -210px; top: 30px; }
}

/* the load sequence: the hero's copy fades and rises, staggered */
.rise { animation: rise 720ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise:nth-child(1) { animation-delay: 60ms; }
.rise:nth-child(2) { animation-delay: 160ms; }
.rise:nth-child(3) { animation-delay: 260ms; }
.rise:nth-child(4) { animation-delay: 360ms; }
.rise:nth-child(5) { animation-delay: 440ms; }
.rise:nth-child(6) { animation-delay: 560ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* lazy images arrive rather than pop: soft and transparent until the bytes
   are in (index.html adds .loaded on load), then they sharpen into place.
   Without JS the attribute rule never applies and images are simply there. */
.js img[loading="lazy"] { opacity: 0; filter: blur(12px); transform: scale(1.02); transition: opacity 700ms ease, filter 700ms ease, transform 700ms ease; }
.js img[loading="lazy"].loaded { opacity: 1; filter: none; transform: none; }

/* sections reveal as they arrive; without JS everything is simply visible */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 640ms ease, transform 640ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* a phone, drawn with two rounded boxes rather than a device image */
.phone {
  width: min(320px, 100%); margin: 0 auto; padding: 10px;
  border-radius: 36px; background: #1d1b18;
  box-shadow: 0 24px 60px rgb(28 20 18 / 0.22);
}
.phone img { border-radius: 27px; aspect-ratio: 390 / 844; object-fit: cover; width: 100%; }
.phone-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.phone-row .phone { width: min(280px, 100%); }
figure { margin: 0; }
figcaption { font-size: 14px; color: var(--ink-3); margin-top: 12px; text-align: center; }

.shot {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper); box-shadow: 0 24px 60px rgb(28 20 18 / 0.1);
}
.shot img { width: 100%; }

/* --------------------------------------------------------------- cards --- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.card-head {
  height: 34px; display: flex; align-items: center; padding: 0 16px;
  background: var(--paper-soft); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-deep);
}
.card-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.card-body h3 { font-family: var(--sans); font-weight: 600; font-size: 17px; }
.card-body p { color: var(--ink-2); font-size: 15px; }

/* -------------------------------------------------------------- splits --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split.reverse > :first-child { order: 2; }
.split .prose { display: flex; flex-direction: column; gap: 16px; }
.split .prose p { color: var(--ink-2); }
.split .prose p strong { color: var(--ink); }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split.reverse > :first-child { order: 0; }
}
.split .phone { width: min(300px, 100%); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--paper-soft); padding: 1px 5px; border-radius: 4px; }

/* --------------------------------------------------------------- lists --- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); }
.checks li::before {
  content: ''; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: var(--green-tint); border: 1px solid var(--green);
  box-shadow: inset 0 0 0 4px var(--paper);
}
.checks li strong { color: var(--ink); }

/* ---------------------------------------------------------------- form --- */
.invite-box {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
  box-shadow: 0 24px 60px rgb(28 20 18 / 0.06);
}
@media (max-width: 860px) { .invite-box { grid-template-columns: 1fr; padding: 22px; } }
.invite-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input, .field textarea {
  font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--ground);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 11px 14px; width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--ink-3); }
.form-error { font-size: 14px; color: var(--damage); }
.form-done { display: none; padding: 16px; border-radius: var(--radius); background: var(--green-tint); color: var(--ink); }
.invite-form.is-done { display: none; }
.invite-form.is-done + .form-done { display: block; }

/* ----------------------------------------------------------------- faq --- */
.faq { display: grid; gap: 10px; max-width: 78ch; }
details {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 18px;
}
summary {
  cursor: pointer; list-style: none; padding: 15px 0; font-weight: 600;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--green-deep); font-size: 20px; line-height: 1; }
details[open] summary::after { content: '−'; }
details p { padding-bottom: 16px; color: var(--ink-2); }

/* -------------------------------------------------------------- footer --- */
footer { border-top: 1px solid var(--line); padding-block: 40px 48px; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.legal { margin-top: 28px; display: grid; gap: 10px; max-width: 90ch; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.legal a { color: var(--ink-3); }

/* ------------------------------------------------------------- privacy --- */
.doc { max-width: 72ch; padding-block: calc(var(--header-h) + 56px) 72px; display: grid; gap: 18px; }
.doc h1 { font-size: clamp(30px, 4vw, 42px); }
.doc h2 { font-size: 22px; margin-top: 18px; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }