/* ============================================================================
   Sand — search-first homepage (direction C), the main homepage since Nov 2026.

   Sits on top of /styles.css so the shared parts (pricing cards, billing
   switch, FAQ, phone menu, buttons) keep working; this file only re-points
   the tokens and styles what is new. Forest ground for the hero, paper for
   the reading sections.
   ========================================================================== */

:root {
  --font-display:'DM Serif Display', Georgia, serif;
  --font-body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --c-forest:#1f3329;
  --c-forest-2:#273f33;
  --c-forest-line:#3f5a4b;
  --c-cream:#f4f2e8;
  --c-paper:#faf8f2;
  --c-on-forest:#c9d1bf;     /* body text on forest — 8.6:1 */
  --c-on-forest-mut:#b4bea9; /* small notes on forest — 6.9:1 */
  --c-peach:#e9b48c;
  --c-sage-bg:#e8ecdc;

  /* shared tokens, re-pointed for this page */
  --bg:var(--c-paper);
  --paper:#ffffff;
  --ink:#242d27;
  --ink2:#3a423b;
  --mut:#5f6559;
  --line:#e1e2d8;
  --hover:#eeede4;
  --accent:#b84924;
  --accent-h:#94391b;
  --accent-deep:#94391b;
  --btnfg:#ffffff;
  --sage:#728157;
}

.c-page { background:var(--c-forest); color:var(--c-cream); font-family:var(--font-body); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.c-narrow { max-width:1000px; text-align:center; }

/* ---------------------------------------------------------------- HEADER -- */
.c-hdr { background:rgba(31,51,41,0.9); }
.c-hdr.is-stuck { box-shadow:0 1px 0 var(--c-forest-line); }
.c-hdr .nav a.navlink { color:#d6dccb; }
.c-hdr .nav a.navlink:hover { background:rgba(255,255,255,0.06); color:#ffffff; }
.c-brand {
  font-family:var(--font-display); font-size:20px; color:var(--c-cream);
  letter-spacing:0.14em; text-decoration:none;
}
.c-brand:hover { text-decoration:none; color:#ffffff; }
.c-brand .c-brand-name { color:var(--c-cream); }
.c-btn-light { background:var(--c-cream); color:var(--c-forest); }
.c-btn-light:hover { background:#ffffff; }
.c-hdr .navtoggle { background:transparent; color:var(--c-cream); border-color:var(--c-forest-line); }
.c-page .mnav { background:var(--c-forest); border-top-color:var(--c-forest-line); }
.c-page .mnav a:not(.btn) { color:var(--c-cream); border-bottom-color:var(--c-forest-line); }
.c-page .mnav a:not(.btn):hover { color:var(--c-peach); }
.c-page .mnav .btn { background:var(--c-cream); color:var(--c-forest); }

/* ------------------------------------------------------------------ HERO -- */
.c-hero { padding:clamp(64px, 9vw, 112px) 0 clamp(64px, 8vw, 96px); }
.c-h1 {
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(42px, 6.6vw, 88px); line-height:1.02; letter-spacing:-0.04em;
  color:var(--c-cream);
}
.c-h1 em, .c-h2 em { font-style:italic; }
.c-h1 em { color:var(--c-peach); }
.c-lede {
  margin:24px auto 0; max-width:560px;
  font-size:clamp(16px, 1.8vw, 18.5px); line-height:1.6; color:var(--c-on-forest);
}

.c-search {
  margin:40px auto 0; max-width:760px; display:flex; flex-wrap:wrap; gap:10px;
  background:var(--c-cream); border-radius:14px; padding:10px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.45);
}
.c-search-field {
  flex:1 1 280px; display:flex; align-items:center; gap:12px;
  padding:0 12px; color:var(--ink);
}
.c-search-field svg { width:20px; height:20px; color:var(--mut); flex:0 0 auto; }
.c-search-field input {
  flex:1; min-width:0; border:0; background:transparent; font:inherit;
  font-size:16px; color:var(--ink); padding:14px 0; outline:none;
}
.c-search-field input::placeholder { color:#6f746b; }
.c-search:focus-within { box-shadow:0 0 0 3px var(--c-peach), 0 30px 60px -20px rgba(0,0,0,0.45); }
.c-search-btn {
  flex:0 0 auto; min-height:48px; padding:0 28px; border:0; border-radius:9px;
  background:var(--accent); color:#ffffff; font:inherit; font-size:15px; font-weight:600;
  cursor:pointer;
}
.c-search-btn:hover { background:var(--accent-h); }
.c-search-btn:focus-visible { outline:3px solid var(--c-peach); outline-offset:2px; }
@media (max-width:560px) { .c-search-btn { width:100%; } }

.c-note { margin:16px 0 0; font-size:13px; color:var(--c-on-forest-mut); }

.c-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:30px; }
.c-chip {
  font-size:13px; color:#e4e8dc; border:1px solid var(--c-forest-line);
  padding:9px 15px; border-radius:99px; text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.c-chip:hover { background:rgba(255,255,255,0.06); border-color:#6b8574; text-decoration:none; color:#ffffff; }
.c-chip:focus-visible { outline:2px solid var(--c-peach); outline-offset:2px; }

/* ---- sample results ---- */
.c-results-wrap { max-width:1080px; margin-top:64px; }
.c-results { background:var(--c-cream); color:var(--ink); border-radius:16px; overflow:hidden; }
.c-results-head {
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:18px 22px; border-bottom:1px solid var(--line); font-size:13px; color:var(--mut);
}
.c-results-head strong { font-size:15px; color:var(--ink); }
.c-tag {
  margin-left:auto; font-size:10px; font-weight:700; letter-spacing:0.12em;
  color:#3d472b; background:var(--c-sage-bg); padding:5px 10px; border-radius:99px;
}
.c-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:16px 22px; border-bottom:1px solid #ecede4;
}
.c-row:last-child { border-bottom:0; }
.c-av {
  width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
  font-size:12px; font-weight:700; flex:0 0 auto;
}
.c-av-sage { background:var(--c-sage-bg); color:#3d472b; }
.c-av-peach { background:#f3e7d6; color:#6e4a1c; }
.c-co { flex:1 1 220px; display:flex; flex-direction:column; }
.c-co strong { font-weight:600; }
.c-co span { font-size:13px; color:var(--mut); }
.c-meta { font-size:13px; color:var(--mut); }
.c-save {
  font-size:13px; font-weight:600; color:var(--c-forest-2);
  border:1px solid #c9ccbd; padding:9px 14px; border-radius:8px;
}
@media (max-width:560px) { .c-meta { display:none; } }

/* ---- three steps on forest ---- */
.c-steps {
  max-width:1080px; margin-top:56px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:28px;
}
.c-step-n { font-size:11px; font-weight:700; letter-spacing:0.14em; color:var(--c-peach); }
.c-steps p { margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--c-on-forest); }

/* ------------------------------------------------------- LIGHT SECTIONS -- */
.c-light { background:var(--c-paper); color:var(--ink); padding:clamp(72px, 9vw, 112px) 0; }
.c-light-2 { background:#f1efe5; }
.c-head { text-align:center; max-width:720px; margin:0 auto 44px; }
.c-eyebrow { margin:0 0 16px; font-size:11px; font-weight:700; letter-spacing:0.14em; color:#5e6654; }
.c-h2 {
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(34px, 4.4vw, 54px); line-height:1.06; letter-spacing:-0.035em;
}
.c-light .c-h2 em { color:#6b7360; }
.c-sub { margin:18px auto 0; max-width:520px; font-size:16px; line-height:1.6; color:var(--mut); }

.c-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; }
.c-card { background:#ffffff; border:1px solid var(--line); border-radius:16px; padding:30px 28px; }
.c-card h3 {
  margin:14px 0 10px; font-family:var(--font-display); font-weight:400;
  font-size:28px; line-height:1.1; letter-spacing:-0.02em;
}
.c-card p { margin:0; font-size:15px; line-height:1.6; color:var(--mut); }
.c-card-tag { font-size:10px; font-weight:700; letter-spacing:0.14em; color:var(--accent-deep); }
.c-card-sage { background:var(--c-sage-bg); border-color:var(--c-sage-bg); }
.c-card-sage .c-card-tag { color:#3d472b; }
.c-card-sage p { color:#3d472b; }
.c-card-ink { background:var(--c-forest-2); border-color:var(--c-forest-2); color:var(--c-cream); }
.c-card-ink .c-card-tag { color:#c9d4b6; }
.c-card-ink p { color:#d6dccb; }

.c-page .tier { background:#ffffff; }
.c-page .tier .tname { font-size:26px; letter-spacing:-0.02em; }
.c-page .tier .price { font-family:var(--font-display); font-weight:400; font-size:34px; }
.c-page .trust li { color:var(--ink2); }

.c-faq {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:40px; align-items:start;
}
.c-page .qa { background:#ffffff; }
.c-page .qa summary { color:var(--ink); }

/* --------------------------------------------------------------- CLOSING -- */
.c-band { background:var(--c-forest); padding:clamp(80px, 10vw, 128px) 0; text-align:center; }
.c-band .c-h2 { color:var(--c-cream); }
.c-band .c-h2 em { color:var(--c-peach); }
.c-band-cta { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px; }
.c-btn-accent { background:var(--accent); color:#ffffff; }
.c-btn-accent:hover { background:var(--accent-h); }
.c-btn-outline { background:transparent; color:var(--c-cream); box-shadow:inset 0 0 0 1px var(--c-forest-line); }
.c-btn-outline:hover { background:rgba(255,255,255,0.06); }

/* ---------------------------------------------------------------- FOOTER -- */
.c-ftr { background:var(--c-forest); border-top:1px solid var(--c-forest-line); padding:40px 0 48px; }
.c-ftr .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:20px 32px; }
.c-ftr-links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-left:auto; }
.c-ftr-links a { font-size:14px; color:#d6dccb; }
.c-ftr-links a:hover { color:#ffffff; }
.c-fine { flex-basis:100%; margin:8px 0 0; font-size:13px; color:var(--c-on-forest-mut); }

/* Fixes after the first look: the Wave card's heading on forest, and four
   plans side by side on a wide screen instead of three plus one. */
.c-card-ink h3 { color:var(--c-cream); }
.c-page .tiers { grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Second pass: logo beside the name, hero buttons in place of the search,
   and the fuller module cards. */
.c-brand { display:inline-flex; align-items:center; gap:9px; }
.c-brand svg { width:28px; height:28px; flex:0 0 auto; }
.c-brand-name { font-size:20px; letter-spacing:0.14em; }
.c-hero-cta { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:36px; }
.c-card > p { margin-bottom:18px; }
.c-list { list-style:none; margin:0; padding:18px 0 0; display:grid; gap:11px; border-top:1px solid var(--line); }
.c-list li { display:flex; gap:10px; font-size:14.5px; line-height:1.5; color:var(--ink2); }
.c-list li::before { content:''; flex:0 0 auto; width:7px; height:7px; margin-top:7px; border-radius:50%; background:var(--accent); }
.c-card-sage .c-list { border-top-color:#ccdbb2; }
.c-card-sage .c-list li { color:#3d472b; }
.c-card-sage .c-list li::before { background:var(--sage); }
.c-card-ink .c-list { border-top-color:var(--c-forest-line); }
.c-card-ink .c-list li { color:#e4e8dc; }
.c-card-ink .c-list li::before { background:var(--c-peach); }

/* The wordmark: SAND in spaced capitals, the same as the app's rail. */
.brand .name { font-size:19px; letter-spacing:0.14em; }

/* ---- The reading pages (API, privacy, terms) ------------------------------
   The homepage's forest header and footer around a light page, so every page
   of the site is the same design. The page itself stays on paper for long
   reading. */
.c-doc { background:var(--c-paper); color:var(--ink); font-family:var(--font-body); }
.c-doc .c-hdr { position:sticky; top:0; z-index:50; }
.c-doc .nav a.navlink[aria-current="page"] { color:#ffffff; background:rgba(255,255,255,0.08); }
.c-doc .mnav { background:var(--c-forest); border-top-color:var(--c-forest-line); }
.c-doc .mnav a:not(.btn) { color:var(--c-cream); border-bottom-color:var(--c-forest-line); }
.c-doc .mnav .btn { background:var(--c-cream); color:var(--c-forest); }
.c-doc .c-ftr { margin-top:clamp(48px, 6vw, 80px); }

/* --------------------------------------------------------------- PRODUCT -- */
.c-shots { background:var(--c-forest); padding:clamp(72px, 9vw, 112px) 0; }
.c-shots .c-eyebrow { color:var(--c-on-forest-mut); }
.c-shots .c-h2 { color:var(--c-cream); }
.c-shots .c-h2 em { color:var(--c-peach); }
.c-shots .c-sub { color:var(--c-on-forest); }
.c-shot-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:22px; align-items:start; }
.c-shot { margin:0; }
.c-shot figcaption { margin-top:16px; font-size:14.5px; line-height:1.55; color:var(--c-on-forest); }
.c-shot figcaption strong { display:block; margin-bottom:4px; font-size:16px; font-weight:600; color:var(--c-cream); }
.c-win { background:var(--c-cream); color:var(--ink); border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(0,0,0,0.6); }
.c-win-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid #e3e1d6; font-size:11px; letter-spacing:0.04em; color:#6b7064; }
.c-win-bar i { width:8px; height:8px; border-radius:50%; background:#d6d3c6; }
.c-win-bar span { margin-left:8px; }
.c-win-body { padding:14px 16px 16px; font-size:13px; }
.c-win-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:14px; }
.c-tr { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 0; border-top:1px solid #ebe9df; }
.c-tr > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-th { font-size:11px; font-weight:600; letter-spacing:0.04em; color:#6b7064; border-top:0; }
.c-k { color:#6b7064; }
.c-ok { color:#3d472b; font-weight:600; }
.c-gap { color:#94391b; font-weight:600; }
.c-dash { color:#8a8e83; }
.c-src { font-size:11px; font-weight:600; color:#3d472b; background:var(--c-sage-bg); padding:2px 8px; border-radius:99px; }
.c-src-none { color:#6b7064; background:#ecebe4; }
.c-tagx { font-size:10.5px; font-weight:700; letter-spacing:0.08em; color:#3d472b; background:var(--c-sage-bg); padding:3px 9px; border-radius:99px; }
.c-pill-btn { font-size:12px; font-weight:600; color:#ffffff; background:var(--accent); padding:6px 12px; border-radius:8px; white-space:nowrap; }
.c-ghost-btn { font-size:12px; font-weight:600; color:var(--ink); border:1px solid #d0d5c8; padding:5px 12px; border-radius:8px; }
.c-mail-to { font-size:12px; color:#6b7064; }
.c-mail-sub { margin-top:6px; font-size:14px; font-weight:600; }
.c-mail-body { margin:8px 0 0; line-height:1.55; color:#4a5148; }
.c-win-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }

/* ------------------------------------------------------------- NOT FOUND -- */
.c-404 { text-align:center; padding:clamp(80px, 12vw, 160px) 16px; }
.c-404 .c-h2 { color:var(--ink); }
.c-404 p { margin:18px auto 0; max-width:460px; font-size:16px; line-height:1.6; color:var(--mut); }
.c-404 .c-band-cta { margin-top:30px; }