/* ============================================================
   Sheaf — straw glass over a harvest field.
   One photograph runs behind every page. Bands are thin glass,
   feathered at both ends; every word sits on a surface of its
   own (card, sheet, tile, chip), never on the bare photograph.

   The furniture is POSY's, deliberately: a floating nav pill, a
   two-column hero, centred section heads, big radii, light glass
   and no borders. The colours, the type and the photograph are
   Sheaf's own.

   Measured against usevynex.org in the same browser run by
   tools/shots.mjs (painted pixels: flat%, chroma, busy) and by
   tools/contrast.mjs (every text node, with a control that must
   fail).
   ============================================================ */
:root {
  /* Inks solved against the THINNEST glass they sit on (0.46–0.56 over the
     lifted photograph), not against white. */
  --ink: #241a0e;
  --ink-2: #4a3a24;
  --ink-3: #5d4f3b;
  --line: rgba(36, 26, 14, .11);
  --line-2: rgba(36, 26, 14, .06);

  --loam: #2e2110;          /* the dark: buttons, the wordmark */
  --loam-2: #43301a;
  --field: #2a6136;         /* the green of the standing fields: the accent */
  --field-ink: #1d5229;     /* the same green where 12 px type has to clear AA */
  --field-2: #3f8850;
  --straw: #e0a531;         /* the band on the mark, the dash, value */
  --straw-ink: #6f4a06;     /* the same colour where it has to carry text */
  --wash: rgba(46, 33, 16, .075);
  --wash-2: rgba(46, 33, 16, .12);
  --up: #1f6b3a;
  --down: #97301c;

  --surface: rgba(255, 252, 246, .66);
  --surface-2: rgba(255, 253, 248, .80);
  --surface-3: rgba(255, 255, 252, .93);
  /* The section-head wash carries a 12 px eyebrow and a 54 px italic over the
     brightest part of the photograph. At .46 both measured under AA (3.0–4.3:1
     and 2.7:1); this is the thinnest it can be and still hold them. */
  --head: rgba(255, 252, 245, .60);
  /* Kept light: at 18–22 px the blur erases the photograph under every card and
     the page measures busy ~0 where the reference reads 4–7. */
  --blur: saturate(150%) blur(10px);
  --blur-lite: saturate(140%) blur(8px);

  --shadow-sm: 0 1px 2px rgba(36, 26, 14, .05), 0 4px 14px rgba(36, 26, 14, .06);
  --shadow: 0 16px 44px rgba(36, 26, 14, .14);
  --shadow-lg: 0 30px 80px rgba(36, 26, 14, .20);

  --r: 26px;
  --r-sm: 18px;
  --r-xs: 12px;
  --maxw: 1200px;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: #b9a781;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-tight { max-width: 920px; }
.mono, code { font-family: var(--mono); font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--ink-3); }
.gold { color: var(--straw-ink); }
.small { font-size: 13.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgba(224, 165, 49, .34); }
:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }

/* ---------- the photograph ---------- */
.ground {
  position: fixed; inset: -40px; z-index: -3;
  background: #b9a781 url("../img/ground.jpg") 50% 56% / cover no-repeat;
}
.scrim {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(255, 250, 240, .16), transparent 70%),
    linear-gradient(180deg, rgba(255, 250, 240, .05) 0%, rgba(255, 250, 240, .10) 60%, rgba(255, 250, 240, .17) 100%);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--loam); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--loam-2); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(46, 33, 16, .30); }
.btn-gold { background: var(--straw); color: #2b1a02; }
.btn-gold:hover:not(:disabled) { background: #eeb54a; transform: translateY(-1px); }
.btn-glass { background: rgba(255, 255, 252, .84); color: var(--ink); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn-glass:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
/* A quiet button is still a SURFACE. As a wash it was transparent enough that
   its label sat on the photograph and measured 4.3:1 on the two pages where one
   appears outside a panel. */
.btn-quiet { background: rgba(255, 253, 247, .72); color: var(--ink); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); }
.btn-quiet:hover:not(:disabled) { background: rgba(255, 255, 252, .92); }
.btn .arrow {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); font-size: 13px; line-height: 1; margin-right: -8px;
}
.btn-glass .arrow, .btn-quiet .arrow { background: var(--wash); }

/* ---------- chips / eyebrows ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(255, 255, 252, .84); color: var(--ink-2);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
}
.chip b { color: var(--ink); font-weight: 600; }
.chip-quiet { background: var(--wash); }
.chip-ok { background: rgba(31, 107, 58, .14); color: #1b5530; }
.chip-warn { background: rgba(151, 48, 28, .13); color: #7d2a17; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 0 rgba(31, 157, 107, .5); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 107, .45); } 70% { box-shadow: 0 0 0 9px rgba(31, 157, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 107, 0); } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--field-ink);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--straw); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; padding: 14px 0; }
.nav-inner {
  position: relative; display: flex; align-items: center; gap: 20px; height: 62px; padding: 0 10px 0 14px;
  border-radius: 999px; background: rgba(255, 252, 246, .78);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 2px 12px rgba(36, 26, 14, .08);
  transition: background .25s, box-shadow .25s;
}
.nav.scrolled .nav-inner { background: rgba(255, 252, 246, .93); box-shadow: 0 10px 30px rgba(36, 26, 14, .14); }
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand [data-mark] { display: block; width: 30px; height: 30px; }
.brand [data-mark] svg { display: block; width: 100%; height: 100%; border-radius: 9px; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: -.012em; line-height: 1; color: var(--ink); }
.nav-links { display: flex; gap: 2px; margin-left: 4px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; transition: background .15s, color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--wash); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--wash); cursor: pointer; place-items: center; }
.net-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 7px 12px; border-radius: 999px; background: var(--wash); font-variant-numeric: tabular-nums; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--wash); color: var(--ink-2); flex: none; transition: background .15s, color .15s, transform .15s; }
.icon-btn:hover { background: var(--wash-2); color: var(--ink); transform: translateY(-1px); }
.icon-btn svg { display: block; }
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; flex: none; }
  .nav-inner { gap: 10px; padding-right: 8px; }
  .nav-right .hide-sm { display: none; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 72px;
    padding: 12px; border-radius: 22px; background: rgba(255, 252, 246, .97); box-shadow: var(--shadow);
  }
  .nav.open .nav-links a { padding: 12px 14px; font-size: 16px; }
}
@media (max-width: 520px) {
  .nav .wrap { padding: 0 12px; }
  .nav-inner { height: 58px; padding-left: 12px; }
  .brand-name { font-size: 23px; }
  .nav-right .btn { padding: 9px 14px; font-size: 14px; }
  .nav-right .btn .arrow { display: none; }
}

/* ---------- hero ---------- */
.hero { padding: 26px 0 30px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 18px; align-items: stretch; }
.hero-card {
  position: relative; padding: 46px 46px 38px; border-radius: 40px;
  background: rgba(255, 251, 244, .56);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 40px 100px rgba(36, 26, 14, .18);
  display: flex; flex-direction: column;
}
.wordmark {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--serif); font-weight: 600; font-size: clamp(62px, 8.6vw, 112px);
  line-height: .92; letter-spacing: -.035em; margin: 22px 0 12px; color: var(--ink);
}
.wordmark [data-mark] { width: .66em; height: .66em; flex: none; }
.wordmark [data-mark] svg { width: 100%; height: 100%; display: block; border-radius: .17em; }
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(27px, 3.1vw, 38px); line-height: 1.1; letter-spacing: -.014em; color: var(--loam);
}
.hero h1 em { font-style: italic; color: var(--field); }
.hero .lede { max-width: 570px; margin-top: 14px; font-size: 17.5px; color: var(--ink-2); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 30px; }
.stat { padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface-2); }
.stat .k { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.stat .v { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.1; margin-top: 4px; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.skel { display: inline-block; min-width: 3.2em; height: .9em; border-radius: 6px; background: linear-gradient(90deg, rgba(36,26,14,.08), rgba(36,26,14,.16), rgba(36,26,14,.08)); background-size: 200% 100%; animation: sk 1.3s infinite linear; vertical-align: -.05em; }
@keyframes sk { to { background-position: -200% 0; } }

/* the live placement beside the hero */
.place-card {
  padding: 26px 26px 22px; border-radius: 40px; display: flex; flex-direction: column; gap: 15px;
  background: rgba(255, 253, 248, .68);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 40px 100px rgba(36, 26, 14, .18);
}
.place-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.place-top h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.06; letter-spacing: -.016em; }
.place-top .sub { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.place-top .big { font-family: var(--serif); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.place-top .big small { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.place-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--wash); font-size: 13.5px; color: var(--ink-2); }
.place-foot b { color: var(--ink); }

/* a row of legs: one tile each */
.legs { list-style: none; display: grid; gap: 5px; }
.legs li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px 7px 8px; border-radius: 14px; background: rgba(255, 255, 252, .62); }
.legs .t { font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.legs .n { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legs .r { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; line-height: 1.2; }
.legs .r small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }

/* the split, as one bar */
.bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--wash); }
.bar i { display: block; min-width: 3px; }

/* ticker badges */
.tk {
  flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em; color: #fff; line-height: 1;
}
.tk.lg { width: 40px; height: 40px; border-radius: 13px; font-size: 11.5px; }
.tk.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 9.5px; }

/* ---------- sections ---------- */
.section { padding: 68px 0; }
/* Thin glass bands, feathered at both ends so they read as light on the photograph. */
.band { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .07) 120px, rgba(255, 255, 255, .07) calc(100% - 120px), rgba(255, 255, 255, 0) 100%); }
.band-2 { background: linear-gradient(180deg, rgba(255, 252, 244, 0) 0, rgba(255, 252, 244, .16) 120px, rgba(255, 252, 244, .16) calc(100% - 120px), rgba(255, 252, 244, 0) 100%); }
.section-head {
  max-width: 800px; margin: 0 auto 34px; text-align: center;
  padding: 26px 34px 28px; border-radius: 34px; background: var(--head);
}
.section-head h2 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.04; letter-spacing: -.024em; margin-top: 12px;
}
.section-head h2 em { font-style: italic; font-weight: 500; color: var(--field); }
.section-head p { margin-top: 12px; font-size: 17px; color: var(--ink-2); }

.card { background: var(--surface); border-radius: var(--r); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.card-2 { background: var(--surface-2); }
.card-pad { padding: 28px; }
.sheet { background: var(--surface-2); border-radius: 34px; padding: 40px 44px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); }
.sheet h2, .sheet h3 { font-family: var(--serif); letter-spacing: -.018em; line-height: 1.08; }
.sheet h2 { font-weight: 600; font-size: clamp(26px, 3vw, 34px); margin-top: 30px; }
.sheet h2:first-of-type { margin-top: 0; }
.sheet h3 { font-weight: 500; font-size: 22px; }
.sheet p { margin-top: 12px; color: var(--ink-2); }
.sheet ul, .sheet ol { margin-top: 12px; padding-left: 20px; color: var(--ink-2); }
.sheet li { margin-top: 8px; }
.sheet a { color: var(--field); text-decoration: underline; text-underline-offset: 2px; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sep { height: 1px; background: var(--line-2); margin: 22px 0; }

/* steps */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card { padding: 28px; display: flex; flex-direction: column; }
.step-card .n { font-family: var(--serif); font-weight: 600; font-size: 54px; line-height: .9; color: var(--field); letter-spacing: -.03em; }
.step-card h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.06; margin-top: 14px; letter-spacing: -.016em; }
.step-card p { margin-top: 10px; color: var(--ink-2); }
.step-card .what { margin-top: auto; padding-top: 18px; }
.step-card .what span { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 12px; border-radius: 999px; background: var(--wash); }
@media (max-width: 980px) { .trio { grid-template-columns: 1fr; } }

/* a tile grid — the risk notes, the contracts, the record */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { padding: 22px; border-radius: 22px; background: var(--surface); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); }
.tile h4 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.12; letter-spacing: -.012em; }
.tile p { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.tile a { color: var(--field); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .tiles { grid-template-columns: 1fr; } .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* the curve figure */
.figure { padding: 22px 22px 16px; }
.figure figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: left; font-size: 11.5px; letter-spacing: .07em; font-weight: 700;
  text-transform: uppercase; color: var(--ink-3);
  padding: 12px 14px; white-space: nowrap;
}
td { padding: 12px 14px; border-top: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:first-child td { border-top: 1px solid var(--line); }
td.r, th.r { text-align: right; }
.t-name { display: flex; align-items: center; gap: 10px; }
.t-name .who { min-width: 0; }
.t-name .t { font-weight: 700; line-height: 1.2; }
.t-name .n { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a utilization meter */
.meter { position: relative; height: 7px; width: 64px; border-radius: 999px; background: var(--wash-2); overflow: hidden; display: inline-block; vertical-align: middle; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--straw); border-radius: 999px; }
.meter i.hot { background: var(--down); }
.meter i.cool { background: var(--field-2); }

/* ---------- forms ---------- */
label, .lab { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
input, select, textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink); width: 100%;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 16px; padding: 13px 15px;
}
input.big { font-family: var(--mono); font-size: 26px; padding: 16px 18px; border-radius: 20px; }
input:focus, select:focus { outline: 2px solid var(--field); outline-offset: 1px; }
/* The tab pill is a surface, not a wash: on the app page it floats on the bare
   photograph, and at .075 its inactive labels measured 1.49:1. */
.seg { display: inline-flex; background: rgba(255, 253, 247, .80); border-radius: 999px; padding: 4px; gap: 3px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-sm); }
.seg button { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 999px; transition: background .15s, color .15s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--loam); color: #fff; }
.seg-lg button { padding: 10px 22px; font-size: 15px; }

/* A pickable collateral. Ticked is the LIGHT state, not the dark one: the
   default is everything ticked, and a wall of fifteen solid dark pills is the
   heaviest thing that could sit under a heading. Ticked reads as raised paper
   with a straw dot; unticked sinks into the wash. */
.pick {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  background: var(--wash); border-radius: 999px;
  padding: 7px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}
.pick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(36, 26, 14, .22); flex: none; }
.pick:hover { color: var(--ink); transform: translateY(-1px); }
.pick.on { background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-sm); }
.pick.on::before { background: var(--straw); }
.pick .r { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.pick.on .r { color: var(--straw-ink); }
.pick input { display: none; }

/* ---------- notices ---------- */
.note { border-radius: 18px; padding: 14px 16px; font-size: 14px; background: rgba(224, 165, 49, .18); color: #5c3d04; }
.note-bad { background: rgba(151, 48, 28, .12); color: #7d2a17; }
.note-ok { background: rgba(31, 107, 58, .12); color: #1b5530; }

/* ---------- footer ---------- */
.foot { padding: 40px 0 56px; }
.foot-in { border-radius: 34px; padding: 32px 34px; background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- reveal ---------- */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rise.in { opacity: 1; transform: none; }

/* ---------- app ---------- */
.app-tabs { margin: 4px 0 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel { border-radius: 34px; padding: 30px 30px 26px; background: rgba(255, 252, 246, .66); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 30px 80px rgba(36, 26, 14, .14); }
.panel h2 { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: -.022em; }
.panel .sub { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) {
  .app-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { padding: 34px 24px 26px; border-radius: 32px; }
  .place-card { border-radius: 32px; }
}
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .stat:last-child { grid-column: span 2; }
  .panel { padding: 22px 18px 20px; border-radius: 26px; }
  .sheet { padding: 26px 20px; border-radius: 26px; }
  .section { padding: 46px 0; }
  .section-head { padding: 22px 20px 24px; border-radius: 26px; }
  .foot-in { padding: 24px 20px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .rise { opacity: 1; transform: none; }
}