/* ============================================================
   Marigold shared design system (site.css)
   One source of truth for tokens, base, nav, footer, buttons,
   typography, flower mark, and shared components. Every page
   links this file and adds only page specific CSS.
   Values follow DESIGN.md: 4px spacing scale, restrained
   marigold, WCAG AA contrast, documented radii and motion.
   ============================================================ */

:root{
  --paper:#FAF7F2; --paper-2:#F2EDE3; --paper-3:#EDE6D6;
  --ink:#1A1A1A; --slate:#6B6660; --slate-2:#A8A39B; --line:#E6E0D4;
  --dark:#1F1B17; --dark-text:#F2EDE3; --dark-muted:rgba(242,237,227,0.66); --dark-line:rgba(255,255,255,0.09);
  --marigold:#E8A33D;      /* bold accent, fills and large text */
  --marigold-d:#C57E1E;    /* large em only (3:1 min) */
  --marigold-ink:#8A4D12;  /* accessible marigold for small text (AA on paper) */
  --marigold-l:#F2B963;
  --coral:#E25E5E; --success:#4A7C59;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter Tight", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  /* radii (DESIGN.md): 4 8 12 16 24 999 */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  /* motion (DESIGN.md) */
  --ease:cubic-bezier(0.32,0.72,0,1);
  /* spacing unit: 8px grid on desktop, 4px on mobile. All spacing is a multiple of --u. */
  --u:8px;
  interpolate-size:allow-keywords;   /* lets height/block-size animate to auto (FAQ accordion) */
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{ overflow-x:clip; }   /* clip on body only: prevents h-scroll while keeping the viewport the scroll root, so position:sticky works */
html{ scroll-behavior:smooth; }
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:1.03rem; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:1140px; margin:0 auto; padding:0 48px; }
.section{ padding:calc(var(--u) * 12) 0; }   /* 96px desktop, 48px mobile */

/* ---- typography ---- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:560; line-height:1.1; letter-spacing:-0.01em; text-wrap:balance; }
h1{ font-size:clamp(2.4rem, 4.4vw, 3.4rem); }
h2{ font-size:clamp(1.8rem, 3vw, 2rem); }
h3{ font-size:1.375rem; }        /* 22px, DESIGN.md */
h1 em, h2 em{ font-style:italic; font-weight:470; color:var(--marigold-d); }
.dark-section h2 em{ color:var(--marigold); }
a{ color:var(--ink); }

.kicker{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.05em;
  color:var(--marigold-ink); display:flex; align-items:center; gap:8px; margin-bottom:calc(var(--u) * 3);
}
.dark-section .kicker{ color:var(--marigold); }

/* ---- focus (accessibility) ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--marigold-d); outline-offset:2px; border-radius:2px;
}

/* ---- flower mark ---- */
.flower{ display:inline-block; transform-origin:center; vertical-align:middle; }
.flower-md{ width:56px; height:56px; } .flower-xs{ width:22px; height:22px; }
.flower svg{ display:block; width:100%; height:100%; }
.petal-outer{ fill:var(--marigold); } .petal-inner{ fill:var(--marigold-d); } .center{ fill:var(--marigold-d); }
.on-dark .petal-outer{ fill:var(--marigold-l); } .on-dark .petal-inner{ fill:var(--marigold); } .on-dark .center{ fill:var(--marigold); }
.petal-base{ transform-box:view-box; transform-origin:50% 50%; }
.b1{transform:rotate(0deg);} .b2{transform:rotate(36deg);} .b3{transform:rotate(72deg);} .b4{transform:rotate(108deg);} .b5{transform:rotate(144deg);}
.b6{transform:rotate(180deg);} .b7{transform:rotate(216deg);} .b8{transform:rotate(252deg);} .b9{transform:rotate(288deg);} .b10{transform:rotate(324deg);}
.bi1{transform:rotate(18deg);} .bi2{transform:rotate(90deg);} .bi3{transform:rotate(162deg);} .bi4{transform:rotate(234deg);} .bi5{transform:rotate(306deg);}
.flower-spin{ animation:spin 40s linear infinite; }
@keyframes spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.flower:hover{ animation-play-state:paused; }
.kicker .flower{ width:16px; height:16px; flex:none; } .wordmark .flower{ width:20px; height:20px; }

/* ---- nav (canonical header) ---- */
.site-nav{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:calc(var(--u) * 2) 48px; }
.wordmark{ display:flex; align-items:center; gap:9px; font-family:var(--serif); font-style:italic; font-weight:560; font-size:1.3rem; color:var(--ink); text-decoration:none; }
.site-nav .links{ display:flex; gap:28px; align-items:center; }
.site-nav .links a:not(.btn){ font-family:var(--sans); font-size:0.9rem; font-weight:500; color:var(--ink); text-decoration:none; }
.site-nav .links a:not(.btn):hover{ color:var(--marigold-ink); }
/* mobile hamburger (canonical): hidden on desktop, shown at 560px */
.site-nav .nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0; cursor:pointer;
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
}
.site-nav .nav-toggle span{ display:block; width:20px; height:2px; margin:0 auto; border-radius:2px; background:var(--ink); transition:transform 0.25s var(--ease), opacity 0.2s ease; }
.site-nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.site-nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.btn{
  display:inline-block; font-family:var(--sans); font-size:0.92rem; font-weight:600;
  color:var(--paper); background:var(--ink); padding:0.85em 1.8em; border-radius:var(--r-pill);
  text-decoration:none; border:none; cursor:pointer; transition:transform 0.2s var(--ease), background 0.2s ease;
}
.btn:hover{ background:#000; transform:translateY(-1px); }
.site-nav .btn{ padding:0.7em 1.4em; }
.quiet-link{ font-size:0.94rem; font-weight:500; color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--marigold); }

/* ---- dark section + footer (canonical) ---- */
.dark-section{ background:var(--dark); color:var(--dark-text); }
.site-footer{ background:var(--dark); color:var(--dark-text); border-top:1px solid var(--dark-line); padding:calc(var(--u) * 6) 0 calc(var(--u) * 8); }
.site-footer .row{ display:flex; justify-content:space-between; gap:48px; align-items:baseline; }
.site-footer .wordmark{ color:var(--dark-text); }
.site-footer .wordmark .petal-outer{ fill:var(--marigold-l); } .site-footer .wordmark .center{ fill:var(--marigold); }
.site-footer .fine{ font-family:var(--mono); font-size:0.68rem; color:var(--dark-muted); max-width:44rem; text-align:right; line-height:1.8; }
.site-footer .fine a{ color:var(--dark-muted); text-underline-offset:3px; }

/* ---- data table (canonical component) ---- */
/* Scroll-shadow affordance (Lea Verou technique): paper-colored covers ride with
   the content (local); the edge shadows are pinned to the viewport (scroll), so a
   soft shadow shows on whichever side has more content to scroll to. Signals that
   a wide table scrolls horizontally on narrow screens. */
.data-table-wrap{
  overflow-x:auto; margin:calc(var(--u) * 3) 0;
  background:
    linear-gradient(to right, var(--paper) 34%, rgba(250,247,242,0)) 0 0 / 46px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 34%, rgba(250,247,242,0)) 100% 0 / 46px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(31,27,23,0.22), rgba(31,27,23,0)) 0 0 / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(31,27,23,0.22), rgba(31,27,23,0)) 100% 0 / 18px 100% no-repeat scroll;
}
.data-table{ width:100%; border-collapse:collapse; font-size:0.94rem; min-width:520px; }
/* 3-column tables (item / cost / when) need more room, or the prose column
   collapses to one word per line instead of scrolling. */
.data-table--wide{ min-width:700px; }
.data-table th, .data-table td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.data-table thead th{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--slate); font-weight:500; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table .cat, .data-table th[scope=row]{ font-weight:600; color:var(--ink); }
.data-table td.n{ font-family:var(--mono); font-size:0.84rem; color:var(--slate); white-space:nowrap; }
.data-table tr.total td, .data-table tr.total th{ border-top:2px solid var(--line); font-weight:600; color:var(--ink); }
.data-table tr.total td.n{ color:var(--ink); }
.tnote{ font-size:0.84rem; color:var(--slate); margin-top:8px; font-style:italic; }

/* ---- bar chart (canonical component, proportional) ---- */
.bar-chart{ margin:calc(var(--u) * 3) 0 var(--u); }
.bar-chart .bar-row{ display:grid; grid-template-columns:170px 1fr auto; gap:16px; align-items:center; padding:6px 0; }
.bar-chart .bar-label{ font-size:0.92rem; color:var(--ink); }
.bar-chart .bar-track{ display:block; background:var(--paper-3); border-radius:var(--r-sm); height:24px; overflow:hidden; }
.bar-chart .bar-fill{ display:block; height:100%; background:linear-gradient(90deg, var(--marigold-l), var(--marigold)); border-radius:var(--r-sm); min-width:4px; }
.bar-chart .bar-val{ font-family:var(--mono); font-size:0.82rem; color:var(--ink); white-space:nowrap; }

/* ---- callout ---- */
.callout{ background:var(--paper-2); border-left:3px solid var(--marigold); border-radius:var(--r-sm); padding:calc(var(--u) * 3); margin:calc(var(--u) * 3) 0; font-size:0.98rem; color:var(--slate); line-height:1.6; }
.callout strong{ color:var(--ink); font-weight:600; }

/* ---- faq (canonical, native <details> accordion, closed by default) ---- */
.faq-list{ max-width:800px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:last-child{ border-bottom:none; }
.faq-item > summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:20px;
  padding:calc(var(--u) * 3) 0;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary h3{ font-size:1.22rem; margin:0; }
.faq-item > summary:hover h3{ color:var(--marigold-ink); }
.faq-item > summary:focus-visible{ outline:2px solid var(--marigold-d); outline-offset:2px; border-radius:2px; }
.faq-item > summary::after{
  content:"+"; margin-left:auto; flex:none; font-family:var(--sans); font-weight:400;
  font-size:1.6rem; line-height:1.1; color:var(--marigold-ink);
  transition:transform 0.25s var(--ease);
}
.faq-item[open] > summary::after{ transform:rotate(45deg); }
.faq-item > p{ color:var(--slate); font-size:0.99rem; line-height:1.65; max-width:44rem; margin:0; padding:0 0 calc(var(--u) * 3); }
/* Animate open AND close: ::details-content wraps the answer; block-size rides
   from 0 to auto (needs interpolate-size on :root). Falls back to instant
   toggle on browsers without ::details-content support. */
.faq-item::details-content{
  block-size:0; opacity:0; overflow:hidden;
  transition:block-size 0.32s var(--ease), opacity 0.32s var(--ease), content-visibility 0.32s var(--ease) allow-discrete;
}
.faq-item[open]::details-content{ block-size:auto; opacity:1; }
@media (prefers-reduced-motion: reduce){ .faq-item::details-content{ transition:none; } }

/* ---- reveal ---- */
.reveal{ opacity:0; transform:translateY(8px); transition:opacity 0.56s var(--ease), transform 0.56s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---- guide card grid (the /guides hub) ---- */
.guide-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:calc(var(--u) * 3); }
.guide-card{ display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper); transition:transform 0.2s var(--ease), box-shadow 0.2s ease; }
.guide-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(31,27,23,0.1); }
.guide-card:focus-visible{ outline:2px solid var(--marigold-d); outline-offset:3px; }
.guide-card .thumb{ aspect-ratio:16 / 10; overflow:hidden; background:var(--paper-3); }
.guide-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.guide-card .body{ padding:calc(var(--u) * 3); }
.guide-card .date{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--marigold-ink); margin-bottom:calc(var(--u) * 1); }
.guide-card h3{ font-size:1.3rem; margin-bottom:calc(var(--u) * 1); line-height:1.2; }
.guide-card p{ color:var(--slate); font-size:0.95rem; line-height:1.55; }

/* ---- signup (canonical lead form, reusable on every page) ---- */
.signup{ background:var(--dark); color:var(--dark-text); padding:calc(var(--u) * 12) 0; }
.signup .head{ max-width:640px; margin:0 auto calc(var(--u) * 4); text-align:center; }
.signup .halo{ position:relative; width:56px; height:56px; margin:0 auto calc(var(--u) * 2); }
.signup .halo::before{ content:""; position:absolute; inset:-80px; border-radius:50%; background:radial-gradient(circle, rgba(232,163,61,0.16), transparent 65%); }
.signup h2{ font-size:clamp(2rem, 3.6vw, 2.8rem); margin-bottom:calc(var(--u) * 2); }
.signup h2 em{ color:var(--marigold); }
.signup .sub{ color:var(--dark-muted); max-width:36rem; margin:0 auto calc(var(--u) * 2); line-height:1.7; }
.signup .price-terms{ font-family:var(--mono); font-size:0.72rem; color:var(--dark-muted); }
.signup form{ max-width:520px; margin:0 auto; }
.signup .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.signup .field{ margin-bottom:16px; }
.signup label{ display:block; font-family:var(--mono); font-size:0.64rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--dark-muted); margin-bottom:6px; }
.signup input, .signup select{ width:100%; font-family:var(--sans); font-size:1rem; color:var(--dark-text); background:rgba(255,255,255,0.05); border:1px solid var(--dark-line); border-radius:var(--r-sm); padding:0.8em 1em; }
.signup input::placeholder{ color:rgba(242,237,227,0.38); }
.signup input:focus, .signup select:focus{ outline:none; border-color:var(--marigold); box-shadow:0 0 0 2px rgba(232,163,61,0.35); }
.signup button[type=submit]{ background:var(--marigold); color:var(--dark); width:100%; margin-top:8px; font-size:1rem; padding:1em; }
.signup button[type=submit]:hover{ background:var(--marigold-l); }
.signup .promise{ font-family:var(--mono); font-size:0.7rem; color:var(--dark-muted); text-align:center; margin-top:16px; }
.signup .form-error{ font-size:0.9rem; color:#E8A5A0; text-align:center; margin-top:12px; }
.signup .form-error a{ color:inherit; }
.signup .form-success{ text-align:center; max-width:520px; margin:0 auto; }
.signup .form-success h3{ margin:16px 0 8px; }
.signup .form-success p{ color:var(--dark-muted); }
@media (max-width: 560px){ .signup .two{ grid-template-columns:1fr; } }

/* ---- guide layout: sticky table of contents + body (reusable across /guides) ---- */
.guide-layout{ display:grid; grid-template-columns:200px 1fr; gap:56px; align-items:start; padding:calc(var(--u) * 5) 0 calc(var(--u) * 8); }
.toc{ position:sticky; top:calc(var(--u) * 3); }
.toc .toc-title{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); margin-bottom:calc(var(--u) * 1.5); padding-left:12px; }
.toc ul{ list-style:none; display:flex; flex-direction:column; gap:1px; }
.toc a{ display:block; font-size:0.87rem; color:var(--slate); text-decoration:none; padding:7px 12px; border-left:2px solid var(--line); line-height:1.3; transition:color 0.2s ease, border-color 0.2s ease; }
.toc a:hover{ color:var(--ink); border-left-color:var(--marigold); }
.toc a.active{ color:var(--ink); border-left-color:var(--marigold-d); font-weight:500; }
.guide-body{ max-width:760px; min-width:0; }
.guide-body > section{ padding:calc(var(--u) * 5) 0; border-top:1px solid var(--line); }
.guide-body > section:first-child{ padding-top:0; border-top:none; }
.guide-body h2{ margin-bottom:calc(var(--u) * 2); }
.guide-body h3{ margin:calc(var(--u) * 3) 0 calc(var(--u) * 1); }
.guide-body p{ color:var(--slate); font-size:1.03rem; line-height:1.72; margin-bottom:calc(var(--u) * 2); }
.guide-body p strong{ color:var(--ink); font-weight:600; }
.guide-body ul{ margin:0 0 calc(var(--u) * 2) calc(var(--u) * 2); color:var(--slate); }
.guide-body li{ margin-bottom:calc(var(--u) * 1); line-height:1.65; }
.guide-body li strong{ color:var(--ink); font-weight:600; }
.guide-body .aside{ font-style:italic; color:var(--slate); }
@media (max-width: 980px){
  .guide-layout{ grid-template-columns:1fr; gap:0; padding-top:calc(var(--u) * 4); }
  .toc{ position:static; margin-bottom:calc(var(--u) * 4); }
  .toc .toc-title{ padding-left:0; }
  .toc ul{ flex-flow:row wrap; gap:8px; }
  .toc a{ border-left:none; border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 14px; }
  .toc a.active{ border-color:var(--marigold-d); }
}

@media (max-width: 980px){
  .wrap{ padding:0 26px; }
  .site-nav{ padding:16px 26px; }
  .site-footer .row{ flex-direction:column; } .site-footer .fine{ text-align:left; }
  /* nav collapses to the hamburger dropdown */
  .site-nav .nav-toggle{ display:flex; }
  .site-nav .links{
    position:absolute; top:100%; right:26px; margin-top:10px; min-width:220px;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
    padding:10px; box-shadow:0 20px 50px rgba(31,27,23,0.16); z-index:30;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .site-nav.open .links{ opacity:1; visibility:visible; transform:none; }
  .site-nav .links a:not(.btn){ display:block; padding:11px 12px; border-radius:8px; font-size:1rem; }
  .site-nav .links a:not(.btn):hover{ background:var(--paper-2); }
  .site-nav .links .btn{ margin-top:6px; text-align:center; }
}
@media (max-width: 560px){
  :root{ --u:4px; }               /* mobile snaps the whole scale to a 4px grid */
  .wrap{ padding:0 20px; }
  .bar-chart .bar-row{ grid-template-columns:110px 1fr auto; gap:10px; }
  .bar-chart .bar-label{ font-size:0.82rem; } .bar-chart .bar-val{ font-size:0.74rem; }
  /* Guide body: the 4px scale over-compresses long-form reading on phones.
     Restore breathing room: >=32px above and below every section divider,
     looser heading and paragraph rhythm. */
  .guide-layout{ padding-top:24px; }
  .guide-body > section{ padding:32px 0; }
  .guide-body h2{ margin-bottom:16px; }
  .guide-body h3{ margin:28px 0 8px; }
  .guide-body p{ margin-bottom:16px; }
  .guide-body ul{ margin-bottom:16px; }
  .guide-body li{ margin-bottom:8px; }
  .callout{ padding:20px; margin:24px 0; }
  .faq-item > summary{ padding:20px 0; }
  .faq-item > p{ padding-bottom:20px; }
  .data-table-wrap{ margin:24px 0; }
  .bar-chart{ margin:24px 0 16px; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .flower-spin{ animation:none; } html{ scroll-behavior:auto; }
}