/* ═══════════════════════════════════════════════════════════════════════
   Stash — website styles
   Static marketing + legal site. No build step, no tracking, no external
   requests: all fonts are bundled locally and the pages ship one small,
   CSP-safe script (app.js) for the mobile menu only.

   The page markup keeps the design system's approved inline styles for
   pixel fidelity. This stylesheet supplies everything inline styles can't
   express: @font-face, hover/active/focus states, keyframes, responsive
   breakpoints, and reduced-motion handling. Design tokens live in :root.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Fonts (self-hosted, no Google Fonts request) ─────────────────────── */
@font-face { font-family:"Geist";      font-style:normal; font-weight:300 700; font-display:swap; src:url("fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url("fonts/GeistMono-Variable.woff2") format("woff2"); }
@font-face { font-family:"Caveat";     font-style:normal; font-weight:500 700; font-display:swap; src:url("fonts/caveat-latin.woff2") format("woff2"); }
@font-face { font-family:"Figtree";    font-style:normal; font-weight:500 700; font-display:swap; src:url("fonts/Figtree-Variable.woff2") format("woff2"); }

/* ─── Design tokens ────────────────────────────────────────────────────── */
:root {
  --accent: #D44A3B;   /* the single brand accent */
  --tex: 1;            /* hero dot-texture toggle (0/1) */
}

/* ─── Base / reset ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #EFEEEA;
  color: #2B2A28;
}
a { color: inherit; text-decoration: none; }
::selection { background: #F6CABF; color: #2B2A28; }

/* Visible keyboard focus for interactive elements (accessibility) */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent, #D44A3B);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ─── Keyframes (decorative, home page) ────────────────────────────────── */
@keyframes stashFloat { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-10px) rotate(var(--rot,0deg)); } }
@keyframes stashPulse { 0% { box-shadow: 0 0 0 0 rgba(43,138,106,.5); } 70% { box-shadow: 0 0 0 9px rgba(43,138,106,0); } 100% { box-shadow: 0 0 0 0 rgba(43,138,106,0); } }
@keyframes stashSpin  { to { transform: rotate(360deg); } }

/* ─── Nav ──────────────────────────────────────────────────────────────── */
.stash-nav-link { transition: background .12s, color .12s; }
.stash-nav-link:hover,
.stash-nav-link[aria-current="page"] { background: rgba(43,42,40,.07); color: #2B2A28; }

.stash-cta { transition: background .15s; }
.stash-cta:hover { background: #111; }

.stash-burger { display: none; }
.stash-mpanel { display: none; }
.stash-mpanel[data-open="true"] { display: block; }
/* The open state must not survive a resize past the burger breakpoint — the
   burger (the panel's only close control) is hidden on desktop widths. */
@media (min-width: 901px) { .stash-mpanel[data-open="true"] { display: none; } }

/* ─── Buttons (hover states for the design's style-hover attributes) ───── */
.stash-btn-ink        { transition: background .15s; }
.stash-btn-ink:hover  { background: #111; }
.stash-btn-line       { transition: background .15s; }
.stash-btn-line:hover { background: #F6F4F1; }
.stash-btn-cream      { transition: background .15s; }
.stash-btn-cream:hover { background: #fff; }
.stash-btn-cream-lift       { transition: background .15s, transform .15s; }
.stash-btn-cream-lift:hover { background: #fff; transform: translateY(-1px); }
.stash-btn-ghost       { transition: border-color .15s; }
.stash-btn-ghost:hover { border-color: #6B655A; }

/* ─── Cards ────────────────────────────────────────────────────────────── */
.stash-card       { transition: transform .24s, box-shadow .24s; }
.stash-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px rgba(15,15,15,.16); }

/* ─── Inline text link with animated arrow gap ─────────────────────────── */
.stash-arrow       { transition: gap .15s; }
.stash-arrow:hover { gap: 12px; }

/* ─── Footer links ─────────────────────────────────────────────────────── */
.stash-foot-link       { transition: color .12s; }
.stash-foot-link:hover { color: #2B2A28; }

/* ─── Legal document body ──────────────────────────────────────────────── */
.doc-body h2 { margin: 38px 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #2B2A28; scroll-margin-top: 82px; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.68; color: #4F4C46; text-wrap: pretty; }
.doc-body ul { margin: 0 0 16px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.doc-body ul li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.6; color: #4F4C46; }
.doc-body ul li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #D44A3B; }
.doc-body strong { color: #2B2A28; font-weight: 600; }
.doc-body a[href^="http"], .doc-body a[href^="mailto"] { color: #2B2A28; font-weight: 500; border-bottom: 1px solid #C9C6BF; transition: border-color .15s; }
.doc-body a[href^="http"]:hover, .doc-body a[href^="mailto"]:hover { border-color: #D44A3B; }

/* ─── Legal: table-of-contents + jump chips ────────────────────────────── */
.stash-toc a { display: block; padding: 6px 12px; border-radius: 7px; font-size: 13.5px; line-height: 1.35; color: #6F6D68; transition: background .12s, color .12s; }
.stash-toc a:hover { background: rgba(43,42,40,.06); color: #2B2A28; }
.stash-jump { color: #C9C4BA; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: 7px 13px; border-radius: 999px; font-size: 13px; transition: background .14s, color .14s, border-color .14s; }
.stash-jump:hover { background: rgba(255,255,255,.1); color: #F5F2EC; border-color: rgba(255,255,255,.2); }

/* ─── Responsive breakpoints ───────────────────────────────────────────── */
@media (max-width: 1040px) { .stash-floats { display: none !important; } }

@media (max-width: 940px) {
  .stash-doc { grid-template-columns: 1fr !important; }
  .stash-toc { position: static !important; display: none !important; }
  .stash-herofig { display: none !important; }
  .stash-herogrid { grid-template-columns: 1fr !important; }
}

@media (max-width: 920px) { .stash-how { grid-template-columns: 1fr !important; } }

@media (max-width: 900px) {
  .stash-navlinks { display: none !important; }
  .stash-navcta { display: none !important; }
  .stash-burger { display: inline-flex !important; }
}

@media (max-width: 860px) {
  .stash-3 { grid-template-columns: 1fr !important; }
  .stash-priv { grid-template-columns: 1fr !important; gap: 36px !important; }
  .stash-faq { grid-template-columns: 1fr !important; }
  .stash-footgrid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

@media (max-width: 720px) {
  .stash-price { grid-template-columns: 1fr !important; }
  .stash-sec { padding-top: 62px !important; padding-bottom: 62px !important; }
  .stash-footgrid { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .stash-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .stash-docwrap { padding-left: 20px !important; padding-right: 20px !important; }
  /* The legal card's generous desktop padding (inline 40px/44px) leaves the
     text too narrow on phones; relax it. */
  .stash-doc div:has(> .doc-body) { padding: 26px 22px !important; }
}

/* ─── Reduced motion: silence decorative loops + instant anchor scroll ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [style*="stashFloat"],
  [style*="stashPulse"],
  [style*="stashSpin"] { animation: none !important; }
}