/* Bloomly Sites — shared styles for standalone pages (pricing, guides).
   Mirrors the design tokens & components inlined in index.html so subpages match exactly,
   and adds long-form article/prose styles the one-page homepage didn't need. */

:root{
  --ink: #1D1D1F;
  --paper: #FFFFFF;
  --paper-2: #F5F5F7;
  --botanical: #D1462B;
  --botanical-deep: #B63A21;
  --botanical-tint: #FBE4DE;
  --gold: #C98A2E;
  --violet: #4E6C8C;
  --line: #D9D9DE;
  --white: #FFFFFF;
  --muted: #6E6E73;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --maxw: 1180px;
  --prose: 68ch;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Fraunces',serif; font-weight:600; line-height:1.1; margin:0; letter-spacing:-.01em; }
a{ color:inherit; }
.mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:.02em; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; z-index:200; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ---- Bloom mark ---- */
.bloommark{ position:relative; display:inline-block; }
.bloommark .petal{ position:absolute; inset:0; margin:auto; border-radius:60% 40% 55% 45% / 45% 55% 40% 60%; }
.bloommark.sm{ width:34px; height:34px; }
.bloommark.sm .petal{ width:20px; height:26px; }
.bloommark .petal:nth-child(1){ background:#4E6C8C; transform:rotate(0deg)   translateY(-22%); opacity:.95; }
.bloommark .petal:nth-child(2){ background:#4E6C8C; transform:rotate(180deg) translateY(-22%); opacity:.9; }
.bloommark .petal:nth-child(3){ background:#E39A3C; transform:rotate(60deg)  translateY(-22%); opacity:.85; }
.bloommark .petal:nth-child(4){ background:#E39A3C; transform:rotate(240deg) translateY(-22%); opacity:.8; }
.bloommark .petal:nth-child(5){ background:#D1462B; transform:rotate(120deg) translateY(-22%); opacity:.74; }
.bloommark .petal:nth-child(6){ background:#D1462B; transform:rotate(300deg) translateY(-22%); opacity:.7; }

/* ---- Nav ---- */
header.site{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.navrow{ display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand span{ font-family:'Fraunces',serif; font-weight:600; font-size:1.25rem; }
nav.links{ display:flex; gap:30px; align-items:center; }
nav.links a{ text-decoration:none; font-size:.95rem; font-weight:500; color:var(--ink); opacity:.8; }
nav.links a:hover, nav.links a[aria-current="page"]{ opacity:1; }
nav.links a[aria-current="page"]{ color:var(--botanical); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:600; font-size:.95rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--botanical); color:var(--white); }
.btn-primary:hover{ background:var(--botanical-deep); }
.btn-gold{ background:var(--gold); color:var(--ink); }
.btn-gold:hover{ box-shadow:0 6px 20px rgba(232,162,60,.4); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--ink); }
.menu-toggle svg{ width:26px; height:26px; }
@media (max-width:880px){
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px 28px 18px; box-shadow:0 16px 28px -20px rgba(20,20,25,.45);
  }
  header.site.nav-open nav.links{ display:flex; }
  nav.links a{ padding:14px 0; width:100%; border-bottom:1px solid var(--line); font-size:1.05rem; opacity:.9; }
  nav.links a:last-child{ border-bottom:none; }
  .menu-toggle{ display:block; }
}

/* ---- Shared bits ---- */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--botanical); background:var(--botanical-tint); padding:7px 14px; border-radius:999px; }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block; }
.breadcrumb{ font-family:'IBM Plex Mono',monospace; font-size:.76rem; letter-spacing:.03em; color:#6E6E73; padding:22px 0 0; }
.breadcrumb a{ text-decoration:none; opacity:.85; }
.breadcrumb a:hover{ opacity:1; color:var(--botanical); }
.breadcrumb span{ opacity:.5; margin:0 8px; }

/* ---- Page hero (compact, for subpages) ---- */
.page-hero{ padding:52px 0 20px; }
.page-hero h1{ font-size:clamp(2.1rem,4.4vw,3.2rem); max-width:20ch; }
.page-hero .lead{ margin-top:18px; font-size:1.15rem; color:var(--muted); max-width:58ch; }

/* ---- Article / prose ---- */
.article{ padding:8px 0 40px; }
.article-grid{ max-width:var(--prose); margin:0 auto; }
.article .meta{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.04em; color:#6E6E73; text-transform:uppercase; margin-bottom:16px; display:flex; gap:14px; flex-wrap:wrap; }
.prose{ font-size:1.06rem; overflow-wrap:break-word; }
.prose > * + *{ margin-top:1.15em; }
.prose h2{ font-size:1.6rem; margin-top:2em; }
.prose h3{ font-size:1.22rem; margin-top:1.6em; }
.prose p{ color:#33343A; }
.prose a{ color:var(--botanical); text-underline-offset:3px; font-weight:500; }
.prose ul, .prose ol{ padding-left:1.25em; display:grid; gap:.5em; }
.prose li{ color:#33343A; }
.prose strong{ font-weight:700; }
.prose blockquote{ margin:1.5em 0; padding:6px 0 6px 22px; border-left:3px solid var(--gold); font-family:'Fraunces',serif; font-size:1.25rem; font-style:italic; color:var(--botanical-deep); }
.prose hr{ border:none; border-top:1px solid var(--line); margin:2.4em 0; }

/* TL;DR / answer-first callout */
.tldr{ background:var(--botanical-tint); border:1px solid #F3D9D2; border-radius:var(--radius-md); padding:22px 24px; }
.tldr .k{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--botanical); font-weight:600; }
.tldr p{ margin:8px 0 0; color:#33343A; font-size:1.02rem; }

/* Comparison / data tables */
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); }
table.data{ border-collapse:collapse; width:100%; min-width:520px; font-size:.94rem; background:var(--white); }
table.data th, table.data td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
table.data thead th{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--botanical); background:var(--paper-2); }
table.data tbody tr:last-child td{ border-bottom:none; }
table.data td:first-child{ font-weight:600; }
table.data .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Key/value takeaway strip */
.keybox{ background:var(--white); border:1px solid var(--line); border-left:4px solid var(--botanical); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:18px 22px; }
.keybox strong{ color:var(--botanical-deep); }

/* Guides index cards */
.guidegrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media (max-width:760px){ .guidegrid{ grid-template-columns:1fr; } }
.gcard{ display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 18px 36px -30px rgba(20,20,25,.5); }
.gcard:hover{ transform:translateY(-5px); box-shadow:0 26px 46px -26px rgba(20,20,25,.45); }
.gcard .tag{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.gcard h3{ font-size:1.3rem; margin:12px 0 8px; }
.gcard p{ margin:0; color:var(--muted); font-size:.94rem; flex:1; }
.gcard .more{ margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--botanical); font-weight:600; }

/* FAQ (matches homepage) */
.faq{ max-width:var(--prose); margin:0 auto; }
details{ border-bottom:1px solid var(--line); padding:22px 0; }
summary{ cursor:pointer; font-family:'Inter'; font-weight:600; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; }
summary::-webkit-details-marker{ display:none; }
summary .plus{ font-family:'IBM Plex Mono',monospace; font-size:1.3rem; color:var(--botanical); transition:transform .25s ease; flex-shrink:0; }
details[open] summary .plus{ transform:rotate(45deg); }
details p{ margin:14px 0 0; color:var(--muted); font-size:.95rem; max-width:62ch; }

/* Inline CTA band */
.cta-band{ background:var(--ink); color:var(--white); border-radius:var(--radius-lg); padding:44px 40px; text-align:center; margin:8px auto 0; max-width:var(--prose); }
.cta-band h2{ color:var(--white); font-size:clamp(1.5rem,3vw,2rem); }
.cta-band p{ opacity:.85; max-width:46ch; margin:14px auto 24px; }

section{ padding:56px 0; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{ font-size:clamp(1.9rem,3.2vw,2.5rem); }
.section-head p{ margin-top:16px; color:var(--muted); font-size:1.05rem; }

/* Footer (matches homepage) */
footer{ border-top:1px solid var(--line); padding:48px 0 32px; }
.footrow{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.footlinks{ display:flex; gap:26px; flex-wrap:wrap; }
.footlinks a{ text-decoration:none; font-size:.9rem; opacity:.75; }
.footlinks a:hover{ opacity:1; }
.footnote{ font-size:.8rem; opacity:.6; margin-top:24px; }