/* The Reserve — shared styles for the marketing page and the membership guide.
   app.html deliberately carries its own styles: it is a different thing with a
   different job, and a change to the marketing look shouldn't touch the app. */

:root {
  --ground:#191B17; --ground-2:#20231E; --ground-3:#262A24;
  --bone:#EDEAE1; --bone-mid:#ACB2A7; --bone-dim:#7C8279;
  --rule:#2B2F2A; --rule-lit:#3C423B;
  --green:#93C4A2; --green-lt:#B9DEC5; --green-dp:#6FA37E;
  --green-wash:rgba(147,196,162,.09);
  --amber:#D8B26A; --amber-wash:rgba(216,178,106,.10);
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--ground); color:var(--bone);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Paper grain. Fixed and behind everything, so it never moves with the page. */
body::before {
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.wrap { max-width:720px; margin:0 auto; padding:0 22px; position:relative; z-index:3; }
a { color:var(--green); text-decoration:none; }
a:hover { color:var(--green-lt); }
h1,h2,h3,h4 { font-family:var(--serif); font-weight:400; letter-spacing:.01em; margin:0; }

/* ------------------------------------------------------------------ header */
header.top { border-bottom:1px solid var(--rule); padding:26px 0 24px; }
.brandrow { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wordmark { font-family:var(--serif); font-size:34px; line-height:1; color:var(--bone); }
.wordmark em { font-style:italic; color:var(--green); }
.topnav { display:flex; gap:18px; align-items:baseline; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-dim); }
.topnav a { color:var(--bone-dim); }
.topnav a:hover, .topnav a[aria-current="page"] { color:var(--green); }

/* ---------------------------------------------------------------- sections */
section { border-top:1px solid var(--rule); }
section.hero { border-top:0; }
.hero { padding:56px 0 8px; }
.hero h1 { font-size:44px; line-height:1.15; max-width:16ch; }
.hero h1 em { font-style:italic; color:var(--green); }
.hero .lede { color:var(--bone-mid); max-width:50ch; margin:18px 0 0; font-size:17px; }
.plain { color:var(--bone-dim); font-size:13.5px; margin:16px 0 0; }

.block { padding:46px 0; }
.block > h2 { font-size:26px; max-width:26ch; }
.block > .sub { color:var(--bone-mid); font-size:15.5px; max-width:56ch; margin:12px 0 0; }
.block p { color:var(--bone-mid); font-size:15.5px; max-width:58ch; }
.block h3 { font-size:19px; margin:30px 0 8px; }
.block h3:first-of-type { margin-top:22px; }

/* ------------------------------------------------------------------ tables */
.tablewrap { overflow-x:auto; margin:24px 0 0; }
table.fees { width:100%; border-collapse:collapse; font-size:15px; min-width:340px; }
table.fees caption { text-align:left; color:var(--bone-dim); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; padding-bottom:10px; }
table.fees th, table.fees td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--rule);
  vertical-align:top; }
table.fees thead th { color:var(--bone-dim); font-weight:500; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; }
/* Row labels are content, not column furniture: normal prose weight and case. */
table.fees th[scope="row"] { color:var(--bone); font-weight:400; font-size:15px; }
table.fees td:last-child, table.fees th:last-child { text-align:right; font-variant-numeric:tabular-nums; }
table.fees td.num { color:var(--green); font-family:var(--serif); font-size:19px; white-space:nowrap; }
table.fees td.no { color:var(--bone-dim); }
table.fees tbody tr:last-child td, table.fees tbody tr:last-child th { border-bottom:0; }
table.fees.wide td:last-child, table.fees.wide th:last-child { text-align:left; }

/* ------------------------------------------------------------------- notes */
.note { background:var(--ground-2); border:1px solid var(--rule); border-left:2px solid var(--green-dp);
  border-radius:8px; padding:15px 17px; margin:24px 0 0; }
.note p { margin:0 0 10px; font-size:14.5px; max-width:none; }
.note p:last-child { margin-bottom:0; }
.note.warn { border-left-color:var(--amber); }

/* The short answer, sitting up top. */
.answer { background:var(--ground-2); border:1px solid var(--rule-lit); border-radius:12px;
  padding:24px 26px; margin:30px 0 0; }
.answer h2 { font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  font-family:var(--sans); font-weight:500; margin-bottom:12px; }
.answer p { font-size:17px; color:var(--bone); margin:0 0 12px; max-width:56ch; }
.answer p:last-child { margin-bottom:0; }
/* Bold, not coloured: a green run of text inside a prose box reads as a link. */
.answer strong { color:var(--bone); font-weight:600; }

/* --------------------------------------------------------------- contents */
nav.toc { margin:30px 0 0; padding:20px 22px; border:1px solid var(--rule); border-radius:10px;
  background:var(--ground-2); }
nav.toc h2 { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim);
  font-family:var(--sans); font-weight:500; margin-bottom:12px; }
nav.toc ol { margin:0; padding-left:20px; color:var(--bone-dim); font-size:14.5px; }
nav.toc li { margin:6px 0; }

/* ------------------------------------------------------------------- steps */
.step { display:grid; grid-template-columns:1fr 270px; gap:34px; align-items:start;
  padding:40px 0; border-top:1px solid var(--rule); }
.step:first-of-type { border-top:0; padding-top:8px; }
.step h3 { font-size:21px; margin:0 0 9px; }
.step p { font-size:15px; margin:0 0 12px; max-width:46ch; color:var(--bone-mid); }
.step p:last-child { margin-bottom:0; }
.step .tag { display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone-dim); margin-bottom:10px; }
figure.shot { margin:0; }
figure.shot img { display:block; width:100%; height:auto; max-height:470px; object-fit:cover;
  object-position:top; border:1px solid var(--rule-lit); border-radius:12px; background:var(--ground-2); }
figure.shot figcaption { color:var(--bone-dim); font-size:12px; margin-top:9px; }

/* ------------------------------------------------------------------- lists */
ul.limits { list-style:none; padding:0; margin:20px 0 0; }
ul.limits li { color:var(--bone-mid); font-size:15px; padding:10px 0 10px 26px; position:relative;
  border-bottom:1px solid var(--rule); max-width:58ch; }
ul.limits li:last-child { border-bottom:0; }
ul.limits li::before { content:"·"; position:absolute; left:9px; color:var(--green-dp);
  font-size:20px; line-height:1.2; }

ul.sources { list-style:none; padding:0; margin:18px 0 0; font-size:14px; }
ul.sources li { padding:7px 0; border-bottom:1px solid var(--rule); color:var(--bone-dim); }
ul.sources li:last-child { border-bottom:0; }

/* --------------------------------------------------------------------- faq */
.faq h3 { font-size:18px; margin:26px 0 7px; }
.faq h3:first-of-type { margin-top:18px; }
.faq p { margin:0; font-size:15px; color:var(--bone-mid); max-width:58ch; }

/* --------------------------------------------------------------- controls */
.cta { display:inline-flex; align-items:center; gap:8px; background:var(--green-wash);
  border:1px solid var(--green-dp); color:var(--green-lt); padding:11px 20px; border-radius:8px;
  margin:26px 14px 0 0; font-size:15px; }
.cta:hover { background:rgba(147,196,162,.16); color:var(--green-lt); }
.cta.quiet { background:transparent; border-color:var(--rule-lit); color:var(--bone-mid); }
.cta.quiet:hover { border-color:var(--green-dp); color:var(--green-lt); background:transparent; }

footer { border-top:1px solid var(--rule); padding:26px 0 60px; color:var(--bone-dim); font-size:12.5px; }
footer p { margin:0 0 8px; max-width:70ch; }
.foot-links { display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; }
.foot-links a { color:var(--bone-mid); }
.foot-links a:hover { color:var(--green); }

@media (max-width:640px) {
  .hero h1 { font-size:34px; }
  .step { grid-template-columns:1fr; gap:22px; padding:34px 0; }
  figure.shot { max-width:300px; }
  .topnav { gap:14px; }
  .answer { padding:20px 20px; }
}