/* Poppins is self-hosted in /fonts/fonts.css (linked by every standalone page);
   the old @import from Google Fonts was render-blocking and has been removed. */
/* ==========================================================================
   RADIANT THEME LAYER — standalone HTML pages (2026-09, owner-approved).

   The 20 hand-written pages under public/** (import guides, EUDR, lp/*) carry
   their own inline design system (classes .block/.panel/.risk/.who/.btn-…),
   separate from the Astro pages. Its tokens already match the new theme
   (Inter / Inter Tight / JetBrains Mono, green, warm paper). This linked sheet
   is loaded LAST in each page's <head>, after the inline <style> blocks, and
   adds only the Radiant *structure*: rounded + softly-shadowed cards, gentle
   hover lift, and the editorial dash marker on eyebrows. Content untouched.
   ========================================================================== */

/* match the Astro pages' content width (was 1080px on these pages) */
.wrap{max-width:1200px}

/* Contain the off-canvas mobile drawer (nav.main is fixed + translateX(100%),
   so it sits ~322px past the right edge). Without this the layout viewport grows
   to ~697px at 375px and the page scrolls sideways. Use clip, not hidden: hidden
   makes html/body a scroll container and would break the sticky header. */
html,body{overflow-x:clip}

/* Tier 3 (site-wide): pill buttons + white ground + Poppins headings.
   To REVERT: delete this rule + the @import above, restore .btn radius to 3px. */
.btn{border-radius:60px}
body{background:#fff}
h1,h2,h3{font-family:'Poppins','Inter Tight',sans-serif}
/* align import-guide body scale + rhythm with the home page */
h1{font-size:clamp(2.5rem,8vw,4rem);letter-spacing:-.03em;line-height:1.06}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem);letter-spacing:-.025em;line-height:1.12}
h3{font-size:1.18rem}
section.block{padding-top:clamp(56px,8vw,100px);padding-bottom:clamp(56px,8vw,100px);border-bottom-color:transparent}

/* ============================================================================
   DEEPER IMPORT-GUIDE RESTYLE — Batch 1: framing + cards → home soft-card look.
   Content untouched; CSS only. Revert by deleting this block.
   ============================================================================ */
.section-head{margin-bottom:clamp(2rem,4vw,3rem)}
/* content cards → borderless, 12px, soft ambient shadow, roomier padding */
.panel,.risk,.svc,.sc-panel{border-color:transparent;border-radius:12px;box-shadow:0 8px 40px rgba(17,18,20,.08);padding:28px}
.risk:hover,.svc:hover,.panel:hover{box-shadow:0 14px 50px rgba(15,122,90,.18)}
/* .sc-panel is defined again in a later inline block — out-specify it */
.block .sc-panel{border-radius:12px;padding:28px}
/* keep the "what we don't do" panel as an outlined/negative block */
.block .sc-panel.sc-neg{border:1px dashed var(--line-2,#D2CFC4);box-shadow:none;background:transparent}
/* card grids: home-like gap */
.risks,.svcs,.route{gap:22px}
/* featured service card → deep-green filled, matching the home pricing card */
.svc.feature{background:linear-gradient(150deg,#0C4535,#0a2c22);border-color:transparent;box-shadow:0 14px 50px rgba(15,122,90,.18)}
.svc.feature h3,.svc.feature .amt,.svc.feature p,.svc.feature li{color:#fff}
.svc.feature .sk{color:#5FD6A2}

/* Batch 2: tables + timeline → home soft-card containers with grey mono headers.
   The spec table's mono headers + dashed rows already echo home's .data table;
   this just softens the container and puts the header band on light grey. */
.spec,.tl{border-color:transparent;border-radius:12px;box-shadow:0 8px 40px rgba(17,18,20,.08);overflow:hidden}
.spec .sh,.tl .th{background:#F5F6F8}
table.spec-t th{background:#F5F6F8}
.tlrow.now{background:var(--green-wash,#EAF3EF)}

/* Batch 3: soften the warning callout to a rounded tinted block (amber),
   keeping its left accent. Rows/.val/.amt already match the brand tokens. */
.warn{background:var(--amber-tint,#F8ECDD);border:none;border-left:3px solid #B05E0C;border-radius:10px}
.warn .wh{color:#92610F}

/* card-like surfaces: round + soften (Tier 1 — Radiant match) */
.risk,.panel,.who,.defect,.card,.tag,.field,.trust-cell{
  border-radius:12px;
}
.risk,.panel,.who,.defect,.card{
  border-color:transparent;
  box-shadow:0 8px 40px rgba(17,18,20,.08);
  transition:transform .18s ease,box-shadow .18s ease;
}
.risk:hover,.panel:hover,.who:hover,.defect:hover,a.card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 50px rgba(15,122,90,.18);
}

/* eyebrow: add the mono dash marker without changing display
   (some pages toggle .eyebrow display:none — leave that intact) */
.eyebrow::before{
  content:"";display:inline-block;width:16px;height:1.5px;
  background:currentColor;vertical-align:middle;margin-right:9px;
}

/* tables / form panels inside rounded containers keep tidy corners */
table{border-radius:8px;overflow:hidden}

/* ==========================================================================
   RADIANT CHROME for standalone pages — topbar + header + footer that match
   the Astro site. Self-contained (literal values); these pages don't load
   global.css/radiant.css. Import guides + EUDR get the full header; the lp/*
   ad pages keep their minimal header and only take the topbar + footer.
   ========================================================================== */
body.menu-open{overflow:hidden}
.btn-solid{background:#0F7A5A;border-color:#0F7A5A;color:#fff}
.btn-solid:hover{background:#0C6349;border-color:#0C6349;color:#fff}
.btn-sm{padding:11px 22px;font-size:.86rem}
.arw{display:inline-block}

/* topbar */
.topbar{background:#111214;color:#F1EFE9}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;min-height:40px;max-width:1200px;margin:0 auto;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:8px 16px}
.topbar b{color:#fff}.topbar .sep{color:#5FD6A2}
@media(max-width:480px){.topbar .wrap{font-size:.58rem;letter-spacing:.06em}}

/* full header (import guides + EUDR) */
/* z-index 130 is load-bearing: the mobile drawer (nav.main) is a child of this
   header and thus lives in the stacking context this z-index creates, while the
   full-screen .nav-scrim (z-index 110) is a root-level sibling. Below the scrim,
   the header — drawer included — was painted over by the scrim, greying the open
   menu and stealing its taps. Keep the header above the scrim. Mirrors the same
   fix in src/styles/radiant.css for the Astro pages. */
header.site{position:sticky;top:0;z-index:130;background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #E5E2DA}
header.site .hdr{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px;max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
header.site .brand{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none}
header.site nav.main{display:flex;align-items:center;gap:6px}
header.site nav.main a{position:relative;font-family:'Inter',sans-serif;font-size:.95rem;font-weight:500;color:#111214;padding:9px 14px;border-radius:10px;text-decoration:none;transition:background .2s,color .2s}
header.site nav.main a:hover{background:#E4F0EB;color:#0F7A5A}
/* a11y: green drawer CTA keeps white text (else nav link colour tints it ink) */
header.site nav.main .m-cta{color:#fff}
.nav-close{display:none}
.hdr-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid #E5E2DA;background:#fff;color:#111214;display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:#0F7A5A;color:#0F7A5A}
.icon-btn svg{width:19px;height:19px}
.menu-btn{display:none}
@media(max-width:980px){
  /* Drop the header's backdrop-filter at drawer widths: a non-none backdrop-
     filter makes the header a containing block for its position:fixed drawer,
     trapping it in the ~112px header box (only the first item showed). Mirrors
     src/styles/radiant.css; desktop keeps the blur. */
  header.site{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  header.site nav.main{position:fixed;top:0;bottom:0;right:0;width:min(86vw,340px);background:#fff;flex-direction:column;
    align-items:stretch;gap:4px;padding:80px 20px 32px;box-shadow:-20px 0 60px -20px rgba(17,18,20,.45);
    transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);z-index:120;border-left:1px solid #E5E2DA;overflow-y:auto}
  body.menu-open header.site nav.main{transform:translateX(0)}
  header.site nav.main a{font-size:1.05rem;padding:14px 16px}
  header.site nav.main .m-cta{margin-top:14px}
  .nav-close{display:grid;position:absolute;top:16px;right:16px}
  .menu-btn{display:grid}
  .nav-scrim{position:fixed;inset:0;background:rgba(17,18,20,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:110}
  body.menu-open .nav-scrim{opacity:1;visibility:visible}
  header.site .desk-cta{display:none}
}
@media(min-width:981px){header.site nav.main .m-cta,header.site nav.main .nav-close{display:none}}

/* footer (all standalone pages) */
footer.site{background:#111214;color:#C4C7BE;padding:clamp(48px,7vw,80px) 0 32px;border-top:none}
footer.site .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
footer.site .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
@media(max-width:860px){footer.site .foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .foot-top{grid-template-columns:1fr}}
footer.site .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
footer.site .foot-brand p{margin-top:16px;font-size:.9rem;max-width:34ch;color:#96A092}
footer.site .foot-col h3{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#96A092;margin-bottom:16px;font-weight:500}
footer.site .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
footer.site .foot-col a{font-size:.9rem;color:#C4C7BE;text-decoration:none;transition:color .2s}
/* Roomier footer tap targets on phones (mirrors src/styles/radiant.css). */
@media(max-width:640px){footer.site .foot-col a{display:block;padding:8px 0}footer.site .foot-col ul{gap:2px}}
footer.site .foot-col a:hover{color:#fff}
footer.site .foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:26px;font-size:.82rem;color:#96A092}
footer.site .foot-bottom .mono{font-family:'JetBrains Mono',monospace;letter-spacing:.04em;color:#5FD6A2}

/* ==========================================================================
   lp/* AD LANDING PAGES — white ground to match the rest of the site.
   These pages keep their focused, single-CTA minimal header (no main nav) by
   owner decision; only the ground colour changes from paper to white. Both
   selectors are lp-only — the import guides use header.site (more specific,
   untouched) and have no .hero. Overriding background-color alone keeps the
   hero's green grid overlay (a background-image layer).
   ========================================================================== */
header{background-color:#fff}
.hero{background-color:#fff}
