/* ===========================================================================
   ApiaryBase marketing site (apiarybase.com) — the one stylesheet for every page.
   Static HTML in web/landing/, uploaded by infra/aws/scripts/landing-redeploy.sh
   (hivehub#92). Same shape as the_water_project/web/landing/assets/loamio.css.

   Design: the "Ink & Honey" palette the React marketing pages used
   (artifacts/web/src/pages/marketing/shared.tsx, tag v2-app-final).
   Fonts: Fraunces (headings) + Inter (body) from Google Fonts — the CSP's
   style-src/font-src already allow fonts.googleapis.com / fonts.gstatic.com.
   =========================================================================== */
:root{
  --ink:#0B1220;--ink2:#121A2B;--ink3:#1B2540;
  --honey:#E8A33A;--honey-lt:#F2C36B;
  --bone:#F5F0E6;--bone2:#E8E1D2;
  --line:rgba(245,240,230,.14);--line-soft:rgba(245,240,230,.08);
  --muted:rgba(245,240,230,.62);--faint:rgba(245,240,230,.5);--ghost:rgba(245,240,230,.4);
  --serif:'Fraunces',Georgia,serif;--sans:'Inter',system-ui,sans-serif;
  --container:1440px;--gutter:clamp(20px,4vw,64px);--section:clamp(64px,8vw,112px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(38px,6vw,64px);line-height:1.04;letter-spacing:-.025em}
h2{font-size:clamp(32px,4.5vw,48px)}
h3{font-size:22px;line-height:1.25}
h4{font:600 12px/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--honey)}
p{max-width:64ch}
a{color:var(--honey);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
img{display:block;max-width:100%;height:auto}
ul.plain{list-style:none;padding:0}
a:focus-visible{outline:3px solid var(--honey);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:16px;top:-100px;background:var(--bone);color:var(--ink);padding:12px;z-index:10;border-radius:6px}
.skip:focus{top:12px}
.container{width:min(calc(100% - 2*var(--gutter)),var(--container));margin-inline:auto}
.narrow{max-width:760px;margin-inline:auto}
.mid{max-width:900px;margin-inline:auto}
.center{text-align:center}
.center p{margin-inline:auto}

/* Type helpers */
.eyebrow{font:600 12px/1.5 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--honey)}
.stress{position:relative;display:inline-block;white-space:nowrap;font-style:italic;font-weight:400;color:var(--honey-lt)}
.stress::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.18em;background:var(--honey);opacity:.35;border-radius:2px;z-index:-1}
.lead{font-size:19px;line-height:1.6;color:var(--muted);margin-top:24px}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:14px}.xs{font-size:12px}
.body{font-size:16px;line-height:1.75;color:var(--bone2)}
.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:40px}.mt-4{margin-top:64px}

/* Buttons & pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;border:1px solid transparent;font:600 15px/1.2 var(--sans);text-decoration:none;white-space:nowrap;background:var(--honey);color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--honey-lt);text-decoration:none}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--bone)}
.btn-ghost:hover{background:rgba(245,240,230,.06);border-color:var(--muted)}
.btn-sm{padding:10px 20px;font-size:14px}
.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:40px}
.actions.left{justify-content:flex-start}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--muted);background:rgba(245,240,230,.02);white-space:nowrap}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.tag{display:inline-block;padding:4px 12px;border-radius:999px;background:rgba(232,163,58,.15);color:var(--honey);font:600 12px/1.6 var(--sans);white-space:nowrap}

/* Header / nav */
.header{position:relative;z-index:40;padding-block:24px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--bone);text-decoration:none;font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--honey),var(--honey-lt));color:var(--ink);font:700 15px/1 var(--sans)}
.nav{display:flex;gap:32px;font-size:14.5px}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--bone);text-decoration:none}
.header .btn{padding:12px 22px}
@media (max-width:860px){.nav{display:none}}

/* Hero */
.hero{position:relative;padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hero-copy .lead{max-width:560px}
.hero-art{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--ink2);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.hero-art img{width:100%;height:100%;object-fit:cover}
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(232,163,58,.10),transparent 60%)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:36px}}

/* Sections */
.section{padding-block:var(--section)}
.section-tight{padding-block:clamp(40px,5vw,72px)}
.section-head{max-width:720px;margin-bottom:48px}
.section-head h2{margin-top:14px}
.section-head p{margin-top:20px;font-size:18px;color:var(--muted)}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.band{background:var(--ink2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* Grids & cards */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:16px;padding:28px;background:rgba(245,240,230,.02)}
.card h3{margin-top:14px}
.card p{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--muted)}
.card.link{display:block;color:var(--bone)}
.card.link:hover{text-decoration:none;border-color:var(--muted)}
.card .sub{margin-top:4px;font-size:14px;color:var(--faint)}
.card .url{margin-top:4px;font-size:14px;color:var(--honey)}
.icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:rgba(232,163,58,.12);color:var(--honey)}
.icon svg{width:18px;height:18px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column;gap:12px}

/* Feature list */
.checks{list-style:none;padding:0;display:grid;gap:12px}
.checks li{position:relative;padding-left:28px;font-size:15.5px;line-height:1.6;color:var(--bone2)}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--honey);font-weight:700}
.steps{counter-reset:step;list-style:none;padding:0;display:grid;gap:28px}
.steps li{position:relative;padding-left:56px}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--serif);font-size:28px;color:var(--honey)}
.steps h3{font-size:20px}
.steps p{margin-top:8px;color:var(--muted);font-size:15.5px}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(36px,5vw,56px);font-weight:500;line-height:1;color:var(--honey-lt)}
.stat span{display:block;margin-top:10px;font-size:14px;color:var(--muted)}
@media (max-width:640px){.stats{grid-template-columns:1fr}}

/* Story / split layouts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.split.reverse > :first-child{order:2}
.split figure{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ink2)}
.split figure img{width:100%;height:auto}
.split .body{margin-top:18px}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}.split.reverse > :first-child{order:0}}
.engraving{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--ink2);opacity:.9}
.engraving img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:sepia(.2) contrast(1.05)}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.plan{border:1px solid var(--line);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:18px;background:rgba(245,240,230,.02)}
.plan.featured{border-color:var(--honey);background:rgba(232,163,58,.06)}
.plan .price{font-family:var(--serif);font-size:56px;font-weight:500;line-height:1;color:var(--bone)}
.plan .price small{font:400 15px var(--sans);color:var(--muted)}
.plan .btn{align-self:flex-start;margin-top:auto}
@media (max-width:760px){.plans{grid-template-columns:1fr}}

/* Comparison table */
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:16px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare th{font:600 12px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--honey)}
.compare td:first-child{color:var(--bone);font-weight:500}
.compare td{color:var(--muted)}
.compare .yes{color:var(--honey-lt)}
.table-wrap{overflow-x:auto}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-family:var(--serif);font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--honey);font-family:var(--sans);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:14px;color:var(--muted);font-size:15.5px;line-height:1.7}

/* Quote */
.quote{border-left:3px solid var(--honey);padding-left:24px}
.quote p{font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);line-height:1.4;color:var(--bone)}
.quote footer{margin-top:14px;font-size:14px;color:var(--muted)}

/* Breadcrumb */
.crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);margin-bottom:32px}
.crumbs a{color:inherit}.crumbs a:hover{color:var(--bone);text-decoration:none}

/* Code / API */
pre{margin:0;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--ink2);color:var(--bone2);font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}
code{font:inherit;color:var(--honey-lt)}

/* Final CTA */
.final{position:relative;overflow:hidden;padding-block:clamp(80px,10vw,128px);text-align:center}
.final h2{margin-top:14px;font-size:clamp(38px,5.5vw,60px);line-height:1.05}
.final p{margin:24px auto 0;max-width:520px;font-size:18px;color:var(--muted)}

/* Footer */
.footer{border-top:1px solid var(--line);padding:64px 0 48px}
.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-bottom:48px}
.footer-brand p{margin-top:18px;max-width:300px;font-size:13.5px;color:var(--muted)}
.footer h4{margin-bottom:20px}
.footer ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.footer li a{font-size:14px;color:var(--muted)}
.footer li a:hover{color:var(--bone);text-decoration:none}
.footer-bottom{border-top:1px solid var(--line);padding-top:32px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
@media (max-width:860px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* Mobile */
@media (max-width:640px){
  body{font-size:15px}
  .btn{width:100%}
  .actions{flex-direction:column;align-items:stretch}
  .header .btn{width:auto;padding:10px 16px;font-size:14px}
  .card,.plan{padding:22px}
}
@media (max-width:640px){.stress{white-space:normal}}