/* ============================================================================
   Document pages: /privacy, /about, /guides
   ============================================================================

   The long-form pages that sit beside the homepage. They exist because a
   one-page site can rank for exactly one thing - its own name - and
   `soulberry` as a bare word already belongs to a band, a Rituals blush
   shade, a Japanese clothing retailer and a New Jersey food market. These
   pages give the site something to be found FOR.

   WHY THIS FILE DUPLICATES THE HOMEPAGE'S TOKENS
   `public/home.html` inlines its own copy of the `:root` block and
   the base reset below. That is deliberate on the homepage - it is the LCP
   page every cold visitor and crawler lands on, and an external stylesheet
   there costs a render-blocking round trip.

   So the duplication is a real cost knowingly taken, not an oversight: change
   a token here and it must change there too. Collapsing the two into one file
   is on PROJECT_TRACKER.md. Everything from the first line to the footer
   rules was extracted verbatim from that page's <style> block rather than
   retyped, so the two start identical.
   ========================================================================= */

@font-face{
  font-family:'Fraunces';
  src:url('/landing/fonts/fraunces-wght.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('/landing/fonts/fraunces-wght-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/landing/fonts/inter-wght.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
:root{
  --bg:#12100E;
  --bg-2:#191613;
  --bg-3:#201C18;
  --cream:#FFF8F3;
  --peach:#FFE5D9;
  --terracotta:#E5989B;
  --rose:#B5838D;
  --wine:#6D6875;
  --sage:#B7C4B1;
  --eucalyptus:#8FAA7D;
  --forest:#4A5D42;
  --amber:#F2CC8F;
  --lavender:#9D8AA5;
  --teal:#89B0AE;
  --ink-muted:rgba(255,248,243,.66);
  --ink-faint:rgba(255,248,243,.42);
  --hairline:rgba(255,248,243,.10);
  --hairline-2:rgba(255,248,243,.16);
  --radius:22px;
  --ease:cubic-bezier(.22,.8,.28,1);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Inter",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--amber);color:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit}
.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}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
section{scroll-margin-top:86px}

.lede{font-size:clamp(1.02rem,3.9vw,1.22rem);color:var(--ink-muted);line-height:1.6}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);opacity:.7}
.section-num{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  color:var(--ink-faint);font-size:.95rem;letter-spacing:.06em;
}
.kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}

/* ---------- buttons & forms ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:none;cursor:pointer;text-decoration:none;
  font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:15px 26px;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
  will-change:transform;
}
.btn-primary{background:var(--amber);color:#1a1512;box-shadow:0 10px 34px -12px rgba(242,204,143,.55)}
.btn-primary:hover{background:var(--peach);transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(242,204,143,.65)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--cream);border:1px solid var(--hairline-2)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-2px)}
.btn-small{padding:10px 18px;font-size:.82rem}
.btn svg{flex:none}

.site-head{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.scrolled{background:rgba(18,16,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--hairline)}
.head-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:14px 20px;max-width:1160px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:1.22rem;letter-spacing:.01em}
.brand .mark{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--peach),var(--terracotta) 58%,var(--rose));box-shadow:0 0 16px rgba(229,152,155,.65);animation:markPulse 4s ease-in-out infinite}
@keyframes markPulse{0%,100%{box-shadow:0 0 10px rgba(229,152,155,.4)}50%{box-shadow:0 0 22px rgba(242,204,143,.75)}}
.head-nav{display:none;gap:18px}
.head-nav::-webkit-scrollbar{display:none}
.head-nav a{text-decoration:none;font-size:.85rem;color:var(--ink-muted);transition:color .2s}
.head-nav a:hover{color:var(--amber)}


@keyframes markPulse{0%,100%{box-shadow:0 0 10px rgba(229,152,155,.4)}50%{box-shadow:0 0 22px rgba(242,204,143,.75)}}

footer{border-top:1px solid var(--hairline);padding:44px 0 120px;background:var(--bg-2)}
.foot-grid{display:grid;gap:26px}
.foot-disclaimer{
  border:1px solid rgba(229,152,155,.3);background:rgba(229,152,155,.06);border-radius:16px;
  padding:16px 18px;font-size:.82rem;color:var(--ink-muted);
}
.foot-disclaimer a{color:var(--peach);text-decoration:underline;text-underline-offset:3px}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;font-size:.82rem}
.foot-links a{color:var(--ink-faint);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--amber)}
.foot-copy{font-size:.76rem;color:var(--ink-faint)}


/* ---------- document layout ---------- */
/* One reading column, not the homepage's 1160px grid. Long-form prose wants a
   measure of roughly 70 characters; the homepage's width is built for images
   sitting beside text and reads as a wall when it holds paragraphs. */
/* `padding-inline`, not the `padding` shorthand. The shorthand here set
   padding-top to 0, and the min-width:720px block below re-declared it AFTER
   `.doc-head` in source order - so the 108px that clears the fixed header was
   silently cancelled on every viewport above 720px and the h1 rendered
   underneath the nav. A shorthand next to a modifier class is a cascade trap. */
.doc{max-width:720px;margin:0 auto;padding-inline:20px}
.doc-head{padding-block:108px 34px}
.doc-head h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.1rem,7vw,3.1rem);line-height:1.1;letter-spacing:-.015em;
  margin-bottom:18px;
}
.doc-head .lede{max-width:60ch}
.doc-updated{
  margin-top:26px;font-size:.78rem;color:var(--ink-faint);
  border-top:1px solid var(--hairline);padding-top:16px;
}

.doc-body{padding-bottom:96px}
.doc-body h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.42rem,4.6vw,1.86rem);line-height:1.22;letter-spacing:-.01em;
  margin:56px 0 16px;
}
.doc-body h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.1rem,3.4vw,1.28rem);line-height:1.3;
  margin:34px 0 12px;color:var(--peach);
}
.doc-body p{margin-bottom:18px;color:var(--ink-muted)}
.doc-body p strong{color:var(--cream);font-weight:600}
.doc-body > p:first-of-type{color:var(--cream)}
.doc-body ul,.doc-body ol{margin:0 0 20px 22px;color:var(--ink-muted)}
.doc-body li{margin-bottom:10px}
.doc-body li strong{color:var(--cream);font-weight:600}
.doc-body a{color:var(--peach);text-decoration:underline;text-underline-offset:3px}
.doc-body a:hover{color:var(--amber)}
.doc-body hr{border:0;border-top:1px solid var(--hairline);margin:52px 0}

/* A claim the reader can go and check themselves. Used where the page says
   something about the architecture that is verifiable in the repo, so the
   sentence carries its own evidence instead of asking for trust. */
.doc-proof{
  border:1px solid var(--hairline-2);background:var(--bg-2);border-radius:16px;
  padding:18px 20px;margin:24px 0;font-size:.88rem;color:var(--ink-muted);
}
.doc-proof strong{display:block;color:var(--sage);margin-bottom:6px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}

/* A limit: what the product does not do, or does not do yet. Visually distinct
   from .doc-proof on purpose - a limit that looks like a feature is how a page
   starts lying. Its <strong> is the box's label, so a name inside the text
   goes in quotes. */
.doc-limit{
  border:1px solid rgba(229,152,155,.3);background:rgba(229,152,155,.06);border-radius:16px;
  padding:18px 20px;margin:24px 0;font-size:.88rem;color:var(--ink-muted);
}
.doc-limit strong{display:block;color:var(--terracotta);margin-bottom:6px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
/* One limit per paragraph, so a box that names several can be scanned. */
.doc-limit p{margin-bottom:10px}
.doc-limit p:last-child{margin-bottom:0}

.doc-cta{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  border-top:1px solid var(--hairline);margin-top:56px;padding-top:32px;
}

/* ---------- responsive (only the rules these pages actually use) ---------- */
@media (min-width:720px){
  .wrap{padding-inline:34px}
  .doc{padding-inline:34px}
  .foot-grid{grid-template-columns:1.4fr 1fr;align-items:start}
  footer{padding-bottom:60px}
}
@media (min-width:1024px){
  .head-nav{display:flex;gap:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}