/* Donae — shared stylesheet for signed-in and transactional pages.
   The tokens below must equal voice/lib/brand.js exactly; a test enforces it.
   Rules are moved from the live cream site (index.html, intake.html), not invented. */

:root{
  --ground:#f4f0e8;
  --ink:#252938;
  --champagne:#7f6133;
  --panel:#fffdf8;
  --panel-muted:#eae3d7;
  --mid:#ebe5da;
  --dark:#ece6dc;
  --slate:#6b665e;
  --slate-light:#625f59;
  --off:#393c45;
  --ink-hover:#414758;
  --border:rgba(99,82,57,.22);
  --border-strong:#c9bcaa;
  --border-field:#8f7f63;
  --success:#286850;
  --error:#a13d3d;
  --warn:#8a542b;
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ── CHROME: header, wordmark, menu, footer ─────────────────────────────────
   Class-scoped, so a page with its own layout (intake.html) can link this file
   and receive the chrome without its own rules being touched. */
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:30px 5vw;border-bottom:1px solid var(--border);color:var(--ink)}
.nav-brand{display:flex;flex-direction:column;gap:1px}
.nav-product{font-family:var(--font-serif);font-weight:300;font-size:29px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);line-height:1}
.nav-suite{font-family:var(--font-sans);font-weight:300;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);margin-top:6px;line-height:1}

.site-menu{position:relative;margin-left:auto;color:inherit;font-family:var(--font-sans)}
.site-menu summary{cursor:pointer;list-style:none;min-height:44px;min-width:64px;display:flex;
  align-items:center;justify-content:center;border:1px solid currentColor;border-radius:2px;
  font-size:13px;letter-spacing:.04em}
.site-menu summary::-webkit-details-marker{display:none}
.site-menu-panel{position:absolute;right:0;top:50px;min-width:220px;padding:12px;
  background:var(--panel);color:var(--ink);z-index:1000;border:1px solid var(--border-strong)}
.site-menu-panel a{display:flex;align-items:center;min-height:44px;padding:0 14px;
  text-decoration:none;color:inherit;font-size:14px;line-height:1.5}
.site-menu-panel a:hover,.site-menu-panel a[aria-current=page]{background:var(--mid)}
.site-menu a:focus-visible,.site-menu summary:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}

.site-footer{position:relative;display:block;text-align:center;padding:32px 20px;margin-top:32px;
  border-top:1px solid var(--border);font-family:var(--font-sans);font-weight:300;
  font-size:12px;line-height:1.7;color:var(--slate)}
.site-footer p{font-size:12px;line-height:1.7;margin:8px auto;color:var(--slate)}
.site-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:12px auto;max-width:900px}
.site-footer a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  color:inherit;text-decoration:underline;text-underline-offset:4px}
.site-footer a:hover{color:var(--champagne)}
.site-footer a:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}

/* ── PAGE BASE: only on <body class="site-page"> ─────────────────────────────
   Wrapped in :where() so every selector here has the specificity of a bare
   element: a page's own inline rule always wins, and nothing leaks into a page
   that did not opt in. */
:where(.site-page),:where(.site-page) *,:where(.site-page) *::before,:where(.site-page) *::after{box-sizing:border-box}
:where(body.site-page){margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-sans);
  font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.6;
  display:flex;flex-direction:column;min-height:100vh}
:where(.site-page) :where(.container,.wrap){max-width:920px;width:100%;margin:0 auto;padding:80px 48px 100px;flex:1}
:where(.site-page) :where(h1,h2,h3,p){margin:0}
:where(.site-page) h1{font-family:var(--font-serif);font-weight:300;font-size:clamp(45px,6vw,72px);
  line-height:1.08;letter-spacing:-.025em;color:var(--ink);margin-bottom:24px}
:where(.site-page) h1 em,:where(.site-page) h2 em{font-style:italic;color:var(--champagne)}
:where(.site-page) h2{font-family:var(--font-serif);font-weight:300;font-size:32px;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:12px}
:where(.site-page) h3{font-family:var(--font-serif);font-weight:400;font-size:22px;color:var(--ink)}
:where(.site-page) p{font-size:16px;line-height:1.85;color:var(--slate-light);margin-bottom:16px}
:where(.site-page) :where(.eyebrow,.doc-label){font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--champagne);margin-bottom:20px}
:where(.site-page) .lede{font-size:18px;color:var(--ink);margin-bottom:32px}
:where(.site-page) :where(.note,.muted){font-size:14px;color:var(--slate)}
:where(.site-page) a{color:var(--champagne);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
/* Hover changes colour, not opacity: gold at 80% opacity fell to 3.41:1 on the
   ground (below WCAG AA 4.5). Ink on the ground is 12.7:1. (#381 verdict, 28 Sep.) */
:where(.site-page) a:hover{color:var(--ink)}
:where(.site-page) strong{color:var(--ink);font-weight:500}
:where(.site-page) :where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--champagne);outline-offset:4px}

/* Forms — the intake field style. */
:where(.site-page) label{display:block;font-size:14px;letter-spacing:.02em;color:var(--ink);margin-bottom:8px}
:where(.site-page) :where(input[type=text],input[type=email],input[type=password],input[type=date],input[type=search],input:not([type]),select,textarea){
  width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--panel);border:1px solid var(--border-field);border-radius:1px}
:where(.site-page) textarea{min-height:6rem;resize:vertical}
:where(.site-page) .field{margin-bottom:22px}
:where(.site-page) .field-hint{font-size:13px;line-height:1.65;color:var(--slate);margin-top:6px}

/* Buttons — the main site's square style (index.html .btn-primary / .btn-ghost). */
:where(.site-page) :where(button,.btn-primary){display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:16px 28px;font-family:var(--font-sans);font-size:12px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ground);background:var(--ink);
  border:1px solid var(--ink);border-radius:1px;cursor:pointer;text-decoration:none}
:where(.site-page) :where(button,.btn-primary):hover{background:var(--ink-hover);border-color:var(--ink-hover)}
:where(.site-page) :where(button,.btn-primary)[disabled]{opacity:.55;cursor:default}
:where(.site-page) :where(button.secondary,.btn-ghost){background:transparent;color:var(--ink);border-color:var(--border-field)}
:where(.site-page) :where(button.secondary,.btn-ghost):hover{background:transparent;border-color:var(--ink)}
:where(.site-page) .link-btn{display:inline;min-height:0;padding:0;background:none;border:0;color:var(--champagne);
  font:inherit;letter-spacing:normal;text-transform:none;text-decoration:underline;cursor:pointer}
:where(.site-page) .link-btn:hover{background:none}

/* Surfaces and status. */
:where(.site-page) .card{background:var(--panel);border:1px solid var(--border-strong);border-radius:0;
  padding:24px 26px;margin-bottom:16px}
:where(.site-page) :where(.err,.ok){border-radius:0;padding:14px 16px;margin-bottom:16px;font-size:15px;
  line-height:1.5;background:var(--panel)}
:where(.site-page) .err{border:1px solid var(--error);border-left:3px solid var(--error);color:var(--error)}
:where(.site-page) .ok{border:1px solid var(--success);border-left:3px solid var(--success);color:var(--success)}

/* ── PUBLIC PAGES: About, Affiliate disclosure, For retailers, the legal pages ──
   Opted into with <main class="container prose">. One measure, one heading
   scale, one list style and one section rhythm, so every page reads as part of
   the homepage's site. Text pages sit in a 760px column; the legal pages
   (.prose.doc) widen to 1120px to hold a contents list beside the text. */
:where(.site-page) .prose{max-width:760px}
:where(.site-page) .prose.doc{max-width:1120px}
:where(.site-page) .prose h1{margin-bottom:20px}
:where(.site-page) .prose h2{margin:56px 0 16px}
:where(.site-page) .prose h3{font-family:var(--font-sans);font-weight:500;font-size:16px;line-height:1.5;
  color:var(--ink);margin:28px 0 8px}
:where(.site-page) .prose :where(ul,ol){list-style:none;margin:0 0 20px;padding:0}
:where(.site-page) .prose :where(ul,ol) li{position:relative;padding:4px 0 4px 24px;font-size:16px;
  line-height:1.8;color:var(--slate-light)}
:where(.site-page) .prose ul li::before{content:"";position:absolute;left:4px;top:1.05em;width:8px;
  height:1px;background:var(--champagne)}
:where(.site-page) .prose .lede{max-width:720px}
:where(.site-page) .prose .doc-meta{font-size:13px;letter-spacing:.04em;color:var(--slate);margin-bottom:32px}
:where(.site-page) .prose :where(.closing,.about-signoff){margin-top:48px;padding-top:28px;border-top:1px solid var(--border)}
:where(.site-page) .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  color:var(--ink);background:var(--panel-muted);padding:2px 6px;border-radius:0}
:where(.site-page) .prose pre{margin:0 0 20px;padding:16px 18px;background:var(--panel-muted);
  border-left:2px solid var(--champagne);white-space:pre-wrap;overflow-wrap:anywhere}
:where(.site-page) .prose pre code{padding:0;background:none;font-size:14px;line-height:1.7}

/* Legal pages: a contents list beside the text, numbered sections, one style. */
:where(.site-page) .doc-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:72px;
  align-items:start;margin-top:48px}
:where(.site-page) .doc-toc{position:sticky;top:32px;background:var(--panel-muted);border:1px solid var(--border);padding:24px 22px 14px}
:where(.site-page) .doc-toc-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);margin-bottom:14px}
:where(.site-page) .prose .doc-toc ol li{padding:0;margin:0 0 10px;font-size:14px;line-height:1.45}
:where(.site-page) .doc-toc a{color:var(--slate-light);text-decoration:none}
:where(.site-page) .doc-toc a:hover{color:var(--champagne)}
:where(.site-page) .doc-toc .n{display:inline-block;width:28px;color:var(--champagne);
  font-variant-numeric:tabular-nums}
:where(.site-page) .doc-body{max-width:720px;min-width:0}
:where(.site-page) .prose .doc-body h2{margin:48px 0 16px;padding-top:32px;border-top:1px solid var(--border);
  scroll-margin-top:24px}
:where(.site-page) .prose .doc-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
:where(.site-page) .prose .statutory{margin:20px 0 24px;padding:4px 0 4px 22px;border-left:2px solid var(--champagne)}
:where(.site-page) .prose .statutory p{color:var(--ink)}
:where(.site-page) .prose .statutory h3:first-child{margin-top:8px}
@media(max-width:900px){
  :where(.site-page) .doc-layout{grid-template-columns:1fr;gap:8px;margin-top:32px}
  :where(.site-page) .doc-toc{position:static}
  :where(.site-page) .prose .doc-body h2:first-child{margin-top:32px}
}

@media(max-width:650px){
  .site-nav{padding:22px 6vw}
  .nav-product{font-size:26px}
  .site-footer{padding:28px 6vw}
  :where(.site-page) :where(.container,.wrap){padding:50px 6vw 70px}
  :where(.site-page) h1{font-size:48px}
  :where(.site-page) h2{font-size:29px}
}
@media(prefers-reduced-motion:reduce){:where(.site-page) *,:where(.site-page) *::before,:where(.site-page) *::after{animation:none!important;transition:none!important}}
:where(.site-page) .prose details.model-form{margin:8px 0 24px;padding:14px 18px;border-left:2px solid var(--champagne)}
:where(.site-page) .prose details.model-form summary{cursor:pointer;font-size:14px;color:var(--ink)}