/* ============================================================================
   pages.css — shared chrome for the standalone pages (privacy, terms, about).
   ----------------------------------------------------------------------------
   These pages do NOT load css/site.css (its .nav/.foot/.site are the homepage's
   and would collide). They load: assets/carpe.css (design system + .cm-* + the
   parchment field + tokens), THEN this file (shared nav/footer/atomics), THEN a
   small page-specific <style> block inline. Cascade order matters — this loads
   before the inline block so page-specifics win at equal specificity.

   Ported verbatim from the Claude Design canvas export of these pages. Uses only
   design-system tokens from carpe.css; ships light only (see CLAUDE.md).
   ============================================================================ */

/* Atomic utilities the markup leans on (the DS-generated atomics, mirrored from
   css/site.css so these pages don't have to pull the whole homepage sheet). */
.fx{display:flex}.col{display:flex;flex-direction:column}
.ac{align-items:center}.jc{justify-content:center}.f1{flex:1}
.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}
.mxa{max-width:660px;margin-left:auto;margin-right:auto}
.flip{transform:scaleX(-1)}
.fs8{font-size:8px}.fs10{font-size:10px}.fs14{font-size:14px}

a{color:var(--accent)}a:hover{color:var(--accent2)}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 44px;border-bottom:1px solid var(--border-strong)}
.nlinks{display:flex;align-items:center;gap:24px}
.nlink{font-size:var(--text-sm);font-weight:600;color:var(--text-body);text-decoration:none;cursor:pointer}
.nlink:hover{color:var(--accent)}
.nlink.on{color:var(--accent)}
.lg36{width:36px;height:36px;border-radius:9px;border:1px solid var(--frame-gold)}

/* Footer */
.foot{border-top:1px solid var(--border-strong);padding:46px 72px 34px;margin-top:44px}
.frow{display:flex;justify-content:space-between;gap:44px;align-items:flex-start}
.fcol{display:flex;flex-direction:column;gap:10px}
.flink{font-size:var(--text-sm);color:var(--text-body);text-decoration:none;cursor:pointer}
.flink:hover{color:var(--accent)}
.flink.on{color:var(--accent)}
.fnote{margin:0;font-size:var(--text-xs);color:var(--text-muted);line-height:1.6}
.fbot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border-hairline);padding-top:20px;margin-top:34px}

/* App-store badges */
.store{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;background:var(--text-body);color:var(--surface-page);border-radius:var(--radius-sm);padding:7px 16px;text-decoration:none;cursor:pointer;line-height:1.15}
.store:hover{opacity:.88}
.store-t{font-size:9px;font-weight:600;opacity:.75;letter-spacing:.04em;text-transform:uppercase}
.store-b{font-size:14px;font-weight:800}

/* The canvas laid these out at a fixed 1300px; make the outer frame responsive
   (the text columns keep their own max-widths). */
.page{min-height:100%;display:flex;justify-content:center}
.site{width:100%;max-width:1300px;font-family:var(--font-sans);color:var(--text-body)}
@media (max-width:900px){
  .nav,.foot{padding-left:22px;padding-right:22px}
  .nlinks{gap:14px}
  .nlinks .nlink{display:none}
  .frow{flex-wrap:wrap;gap:28px}
}