/* ============================================
   Canopy Turtles — Design System & Components
   ============================================ */

/* ---- Fonts (local self-hosted) ---- */
@font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'InterDisplay';src:url('../fonts/InterDisplay-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'InterDisplay';src:url('../fonts/InterDisplay-Black.ttf') format('truetype');font-weight:900;font-display:swap}

/* ---- Tokens ---- */
:root{
  /* Fluid type */
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.4rem + 2.5vw,3.5rem);
  --text-3xl:clamp(2.5rem,1.2rem + 4vw,5rem);
  --text-hero:clamp(3rem,1rem + 7vw,7.5rem);

  /* Spacing */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;

  /* Brand palette — warm, sunny, family */
  --color-bg:#FBF8F1;        /* warm cream */
  --color-surface:#FFFFFF;
  --color-surface-2:#F5F1E8; /* sand */
  --color-border:#E6DFD0;
  --color-divider:#EFE8D8;

  --color-text:#1E3C50;       /* deep navy */
  --color-text-muted:#5F7180;
  --color-text-faint:#A5B0BC;
  --color-text-inverse:#FBF8F1;

  --color-primary:#3DAEBC;       /* teal (water) */
  --color-primary-hover:#2E8E9B;
  --color-primary-active:#22707C;

  --color-coral:#F28A82;          /* warm secondary */
  --color-coral-hover:#E16B62;
  --color-yellow:#FDCC51;         /* sunshine highlight */
  --color-success:#3DAEBC;
  --color-warning:#E16B62;

  --font-display:'InterDisplay','Inter Display','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  --radius-sm:.5rem;--radius-md:.875rem;--radius-lg:1.25rem;--radius-xl:1.75rem;--radius-full:9999px;

  --shadow-sm:0 1px 2px rgba(30,60,80,.06);
  --shadow-md:0 8px 24px rgba(30,60,80,.08);
  --shadow-lg:0 20px 48px rgba(30,60,80,.12);

  --content-narrow:680px;
  --content-default:1080px;
  --content-wide:1280px;
}

/* ============================================
   Layout primitives
   ============================================ */
.container{width:100%;max-width:var(--content-wide);margin-inline:auto;padding-inline:clamp(var(--space-4),4vw,var(--space-8))}
.container-narrow{width:100%;max-width:var(--content-narrow);margin-inline:auto;padding-inline:clamp(var(--space-4),4vw,var(--space-8))}
.container-default{width:100%;max-width:var(--content-default);margin-inline:auto;padding-inline:clamp(var(--space-4),4vw,var(--space-8))}

.section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.section-tight{padding-block:clamp(var(--space-10),6vw,var(--space-20))}

/* ============================================
   Header
   ============================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,248,241,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s;
}
.site-header.scrolled{border-bottom-color:var(--color-border);box-shadow:var(--shadow-sm)}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.brand{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-weight:900;color:var(--color-text);font-size:1.125rem;letter-spacing:-.01em;text-decoration:none}
.brand img{height:56px;width:auto;display:block}
.brand span{line-height:1.05;display:flex;flex-direction:column}
.brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:.7rem;color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
@media (max-width:640px){.brand img{height:44px}}

.nav{display:flex;align-items:center;gap:var(--space-8)}
.nav__list{display:flex;align-items:center;gap:var(--space-6);list-style:none}
.nav__list a{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.nav__list a:hover,.nav__list a[aria-current="page"]{color:var(--color-text)}

@media(max-width:840px){
  .nav__list{display:none}
}

/* ============================================
   Buttons
   ============================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-6);
  border-radius:var(--radius-full);
  font-family:var(--font-body);font-weight:600;font-size:var(--text-sm);
  white-space:nowrap;line-height:1.2;
  border:1.5px solid transparent;
}
.btn-primary{background:var(--color-text);color:var(--color-text-inverse)}
.btn-primary:hover{background:#0F2939;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-amazon{background:#FF9900;color:#0F1111;font-weight:700}
.btn-amazon:hover{background:#F08800;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-amazon svg{width:18px;height:18px}
.btn-ghost{background:transparent;border-color:var(--color-border);color:var(--color-text)}
.btn-ghost:hover{border-color:var(--color-text);background:var(--color-surface)}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)}

/* ============================================
   Hero
   ============================================ */
.hero{
  position:relative;
  padding-block:clamp(var(--space-12),8vw,var(--space-24)) clamp(var(--space-16),9vw,var(--space-32));
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 60% 50% at 90% 10%,rgba(253,204,81,.18),transparent 60%),
    radial-gradient(ellipse 70% 60% at 5% 90%,rgba(61,174,188,.14),transparent 60%);
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(var(--space-8),5vw,var(--space-16));
  align-items:center;
}
@media(max-width:880px){.hero__grid{grid-template-columns:1fr}}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:6px 14px;border-radius:var(--radius-full);
  background:rgba(61,174,188,.12);color:var(--color-primary);
  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:var(--space-5);
}
.hero__eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-primary)}

.hero h1{
  font-size:var(--text-3xl);
  letter-spacing:-.03em;line-height:.95;
  color:var(--color-text);
  margin-bottom:var(--space-5);
}
.hero h1 em{font-style:normal;color:var(--color-primary);position:relative;display:inline-block}
.hero h1 em::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.12em;
  background:var(--color-yellow);z-index:-1;border-radius:2px;
}
.hero__lede{font-size:var(--text-lg);color:var(--color-text-muted);max-width:34ch;margin-bottom:var(--space-8);line-height:1.5}
.hero__cta{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;margin-bottom:var(--space-8)}

.hero__proof{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}
.hero__proof strong{color:var(--color-text);font-weight:700}
.hero__proof-divider{width:1px;height:24px;background:var(--color-border)}

.hero__visual{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:5/4;
}
.hero__visual img{width:100%;height:100%;object-fit:cover}
.hero__visual::after{
  content:"";position:absolute;inset:auto var(--space-5) var(--space-5) auto;
  background:var(--color-yellow);width:64px;height:64px;border-radius:50%;
  box-shadow:var(--shadow-md);
  opacity:.95;
  z-index:1;
}
.hero__badge{
  position:absolute;top:var(--space-5);left:var(--space-5);
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--radius-full);
  background:var(--color-surface);color:var(--color-text);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:var(--shadow-sm);z-index:2;
}
.hero__badge::before{content:"★";color:var(--color-yellow);font-size:14px}

/* ============================================
   Logo strip
   ============================================ */
.proof-strip{
  border-block:1px solid var(--color-border);
  background:var(--color-surface);
  padding-block:var(--space-8);
}

/* ============================================
   No-weights / no-airbags callout banner
   ============================================ */
.no-weights{
  background:var(--color-primary);
  color:#fff;
  padding-block:var(--space-12);
  border-block:3px solid var(--color-text);
  position:relative;
  overflow:hidden;
}
.no-weights__inner{
  display:grid;grid-template-columns:1fr 1.2fr;
  gap:var(--space-10);align-items:center;
  position:relative;z-index:2;
}
@media(max-width:880px){.no-weights__inner{grid-template-columns:1fr;gap:var(--space-6);text-align:center}}
.no-weights__eyebrow{
  font-family:var(--font-body);font-weight:700;
  font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-yellow);
  display:inline-block;margin-bottom:var(--space-3);
}
.no-weights__headline{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:1;letter-spacing:-.02em;
  color:#fff;margin:0;
}
.no-weights__headline em{
  font-style:normal;
  color:var(--color-yellow);
  display:inline-block;
  position:relative;
}
.no-weights__headline em::after{
  content:"";position:absolute;left:-4px;right:-4px;bottom:6px;height:14px;
  background:rgba(253,204,81,.18);border-radius:4px;z-index:-1;
}
.no-weights__sub{
  font-size:var(--text-base);color:rgba(255,255,255,.85);
  margin-top:var(--space-4);max-width:46ch;
}
@media(max-width:880px){.no-weights__sub{margin-left:auto;margin-right:auto}}
.no-weights__list{
  display:flex;flex-direction:column;gap:var(--space-4);
  list-style:none;padding:0;margin:0;
}
.no-weights__item{
  display:flex;align-items:center;gap:var(--space-4);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:var(--space-4) var(--space-5);
  backdrop-filter:blur(4px);
}
.no-weights__strike{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--text-lg);
  text-decoration:line-through;text-decoration-thickness:3px;
  text-decoration-color:var(--color-coral,#F28A82);
  color:rgba(255,255,255,.6);
  flex-shrink:0;min-width:140px;
}
@media(max-width:540px){.no-weights__strike{min-width:auto}}
.no-weights__item-text{
  font-size:var(--text-sm);color:rgba(255,255,255,.92);
  line-height:1.4;
}
.no-weights__item-text strong{
  color:#fff;font-weight:700;
}

.install-note{
  margin-top:var(--space-8);
  padding:var(--space-5) var(--space-6);
  background:var(--color-surface-2);
  border-left:4px solid var(--color-yellow);
  border-radius:8px;
  font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;
  max-width:780px;
}
.install-note strong{color:var(--color-text);font-weight:700}
.proof-strip__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--space-6);align-items:start;text-align:left;
}
@media(max-width:760px){.proof-strip__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-4)}}
.proof-strip__item{display:flex;flex-direction:column;gap:6px}
.proof-strip__item strong{font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);color:var(--color-text);line-height:1;letter-spacing:-.02em}
.proof-strip__item span{font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.02em;line-height:1.3}

/* ============================================
   Section header
   ============================================ */
.section-header{margin-bottom:clamp(var(--space-10),6vw,var(--space-16));max-width:680px}
.section-header__eyebrow{
  display:inline-block;font-size:var(--text-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);
  margin-bottom:var(--space-3);
}
.section-header h2{font-size:var(--text-2xl);letter-spacing:-.02em;color:var(--color-text);margin-bottom:var(--space-4);line-height:1}
.section-header p{font-size:var(--text-lg);color:var(--color-text-muted);max-width:55ch;line-height:1.5}

/* center variant */
.section-header.is-center{margin-inline:auto;text-align:center}

/* ============================================
   Problem/Solution split
   ============================================ */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(var(--space-6),4vw,var(--space-10));
}
@media(max-width:840px){.split{grid-template-columns:1fr}}
.split__card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:clamp(var(--space-6),4vw,var(--space-10));
  position:relative;
}
.split__card.is-bad{border-color:rgba(225,107,98,.4)}
.split__card.is-good{border-color:rgba(61,174,188,.4)}
.split__tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:var(--space-4);
}
.split__tag.bad{background:rgba(225,107,98,.12);color:#B23F37}
.split__tag.good{background:rgba(61,174,188,.12);color:var(--color-primary-active)}
.split__card h3{font-size:var(--text-xl);letter-spacing:-.02em;margin-bottom:var(--space-3);line-height:1.1}
.split__card p{color:var(--color-text-muted);font-size:var(--text-base);line-height:1.55}
.split__card ul{list-style:none;margin-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.split__card ul li{font-size:var(--text-sm);color:var(--color-text-muted);padding-left:24px;position:relative;line-height:1.5}
.split__card ul li::before{
  position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.split__card.is-bad ul li::before{content:"✗";background:rgba(225,107,98,.14);color:#B23F37}
.split__card.is-good ul li::before{content:"✓";background:rgba(61,174,188,.14);color:var(--color-primary-active)}

/* ============================================
   Feature grid (3-col benefits)
   ============================================ */
.feature-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(var(--space-4),3vw,var(--space-8));
}
@media(max-width:880px){.feature-grid{grid-template-columns:1fr;gap:var(--space-6)}}
.feature{
  display:flex;flex-direction:column;gap:var(--space-4);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:clamp(var(--space-6),3vw,var(--space-8));
}
.feature__icon{
  width:48px;height:48px;border-radius:var(--radius-md);
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(61,174,188,.12);color:var(--color-primary);
}
.feature__icon svg{width:24px;height:24px}
.feature h3{font-size:var(--text-lg);line-height:1.2;letter-spacing:-.01em;margin-bottom:0}
.feature p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55}

/* ============================================
   Editorial split (image + text)
   ============================================ */
.editorial{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(var(--space-8),5vw,var(--space-16));
  align-items:center;
}
.editorial.is-reverse{direction:rtl}
.editorial.is-reverse>*{direction:ltr}
@media(max-width:880px){.editorial{grid-template-columns:1fr}.editorial.is-reverse{direction:ltr}}
.editorial__image{
  border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:5/4;box-shadow:var(--shadow-md);
}
.editorial__image img{width:100%;height:100%;object-fit:cover}
.editorial h2{font-size:var(--text-2xl);letter-spacing:-.02em;margin-bottom:var(--space-5);line-height:1}
.editorial p{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.6;margin-bottom:var(--space-4)}
.editorial p:last-of-type{margin-bottom:var(--space-6)}

/* ============================================
   Steps (numbered)
   ============================================ */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(var(--space-4),3vw,var(--space-6));
  counter-reset:step;
}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
/* legacy .step rules removed — see step-grid below */

/* ============================================
   CTA Band
   ============================================ */
.cta-band{
  background:linear-gradient(135deg,#1E3C50 0%,#0F2939 100%);
  color:var(--color-text-inverse);
  border-radius:var(--radius-xl);
  padding:clamp(var(--space-10),6vw,var(--space-20)) clamp(var(--space-6),5vw,var(--space-16));
  position:relative;overflow:hidden;
  text-align:center;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 80% at 100% 0%,rgba(253,204,81,.18),transparent 60%),
    radial-gradient(ellipse 50% 80% at 0% 100%,rgba(61,174,188,.22),transparent 60%);
}
.cta-band__inner{position:relative;z-index:1;max-width:680px;margin-inline:auto}
.cta-band h2{font-size:var(--text-2xl);letter-spacing:-.02em;margin-bottom:var(--space-5);color:#FBF8F1;line-height:1.05}
.cta-band p{font-size:var(--text-lg);color:rgba(251,248,241,.8);margin-bottom:var(--space-8);line-height:1.5}
.cta-band .btn-primary{background:var(--color-yellow);color:var(--color-text)}
.cta-band .btn-primary:hover{background:#FFD56E;color:var(--color-text)}
.cta-band .btn-amazon{box-shadow:0 8px 24px rgba(255,153,0,.25)}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background:var(--color-text);color:rgba(251,248,241,.7);
  padding-block:clamp(var(--space-16),6vw,var(--space-20)) var(--space-8);
  margin-top:var(--space-16);
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--space-10);
  margin-bottom:var(--space-12);
}
@media(max-width:760px){.site-footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-8)}.site-footer__brand{grid-column:1/-1}}
.site-footer h4{font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#FBF8F1;margin-bottom:var(--space-4)}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.site-footer a{font-size:var(--text-sm);color:rgba(251,248,241,.7);line-height:1.4}
.site-footer a:hover{color:#FBF8F1}
.site-footer__brand .brand{color:#FBF8F1;margin-bottom:var(--space-4)}
.site-footer__brand .brand small{color:rgba(251,248,241,.6)}
.site-footer__brand p{font-size:var(--text-sm);max-width:36ch;line-height:1.5;color:rgba(251,248,241,.65)}
.site-footer__bottom{
  border-top:1px solid rgba(251,248,241,.1);padding-top:var(--space-6);
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;font-size:var(--text-xs);color:rgba(251,248,241,.5);
}

/* ============================================
   FAQ
   ============================================ */
.faq{display:flex;flex-direction:column;gap:var(--space-3);max-width:780px;margin-inline:auto}
.faq-item{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.faq-item summary{
  cursor:pointer;list-style:none;padding:var(--space-5) var(--space-6);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  font-weight:600;color:var(--color-text);font-size:var(--text-base);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";width:20px;height:20px;flex-shrink:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3C50' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-size:contain;background-repeat:no-repeat;
  transition:transform .3s;
}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item__body{padding:0 var(--space-6) var(--space-5);color:var(--color-text-muted);font-size:var(--text-base);line-height:1.6}

/* ============================================
   Blog cards
   ============================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--space-5),3vw,var(--space-8))}
@media(max-width:880px){.blog-grid{grid-template-columns:1fr}}
.blog-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;
}
.blog-card a{display:flex;flex-direction:column;height:100%}
.blog-card__image{aspect-ratio:16/9;overflow:hidden;background:var(--color-surface-2)}
.blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blog-card:hover .blog-card__image img{transform:scale(1.05)}
.blog-card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.blog-card__cat{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary)}
.blog-card h3{font-size:var(--text-lg);line-height:1.2;letter-spacing:-.01em;color:var(--color-text);margin-bottom:0}
.blog-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;flex:1}
.blog-card__readmore{font-size:var(--text-sm);font-weight:600;color:var(--color-primary)}

/* ============================================
   Forms
   ============================================ */
.form{display:flex;flex-direction:column;gap:var(--space-4);max-width:560px}
.form__row{display:flex;flex-direction:column;gap:var(--space-2)}
.form label{font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.form input,.form textarea{
  font-family:var(--font-body);font-size:var(--text-base);
  padding:var(--space-3) var(--space-4);
  background:var(--color-surface);
  border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);
  color:var(--color-text);width:100%;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(61,174,188,.15)}
.form textarea{min-height:140px;resize:vertical}
.form .form__submit-row{display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-3)}
.form__honeypot{position:absolute;left:-9999px;visibility:hidden}

/* ============================================
   Long-form article
   ============================================ */
.article{max-width:680px;margin-inline:auto}
.article h1{font-size:var(--text-2xl);letter-spacing:-.02em;line-height:1.05;margin-bottom:var(--space-5)}
.article__meta{display:flex;gap:var(--space-3);align-items:center;font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-8)}
.article__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--color-text-faint)}
.article__lede{font-size:var(--text-lg);color:var(--color-text-muted);line-height:1.55;margin-bottom:var(--space-10);max-width:60ch}
.article h2{font-size:var(--text-xl);margin-top:var(--space-12);margin-bottom:var(--space-4);letter-spacing:-.02em;line-height:1.15}
.article h3{font-size:var(--text-lg);font-family:var(--font-body);font-weight:700;margin-top:var(--space-8);margin-bottom:var(--space-3)}
.article p{font-size:var(--text-base);line-height:1.7;margin-bottom:var(--space-5);color:var(--color-text)}
.article ul,.article ol{margin:var(--space-5) 0 var(--space-5) var(--space-6);font-size:var(--text-base);line-height:1.7}
.article ul li,.article ol li{margin-bottom:var(--space-2)}
.article strong{color:var(--color-text);font-weight:700}
.article a{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.article a:hover{color:var(--color-primary-hover)}
.article__hero{aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-10);box-shadow:var(--shadow-md)}
.article__hero img{width:100%;height:100%;object-fit:cover}
.article blockquote{border-left:3px solid var(--color-primary);padding-left:var(--space-5);margin:var(--space-6) 0;font-size:var(--text-lg);line-height:1.5;color:var(--color-text);font-weight:500}

/* ============================================
   Page hero (interior pages)
   ============================================ */
.page-hero{padding-block:clamp(var(--space-12),7vw,var(--space-20)) clamp(var(--space-8),5vw,var(--space-16));position:relative;background:linear-gradient(180deg,#F5F1E8 0%,var(--color-bg) 100%)}
.page-hero__eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3)}
.page-hero h1{font-size:var(--text-3xl);letter-spacing:-.03em;line-height:.95;color:var(--color-text);margin-bottom:var(--space-5)}
.page-hero p{font-size:var(--text-lg);color:var(--color-text-muted);max-width:55ch;line-height:1.5}

/* ============================================
   Video block
   ============================================ */
.video-block{
  border-radius:var(--radius-xl);overflow:hidden;
  background:#000;box-shadow:var(--shadow-lg);
  aspect-ratio:16/9;
}
.video-block video{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================
   Utility
   ============================================ */
.text-center{text-align:center}
.muted{color:var(--color-text-muted)}
.flex-cta{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;justify-content:center}

/* ============================================
   Animations (subtle fade-in on scroll)
   ============================================ */
/* Reveal animation: visible by default. JS opts-in via body.js-reveal */
.reveal{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
body.js-reveal .reveal:not(.is-visible){opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion: reduce){body.js-reveal .reveal:not(.is-visible){opacity:1;transform:none}}

/* ============================================
   Interior Page Components (added for subpages)
   ============================================ */

/* Interior hero - smaller, focused */
.hero-interior{
  padding-block:clamp(var(--space-16),10vw,var(--space-24)) clamp(var(--space-10),6vw,var(--space-16));
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(61,174,188,.10), transparent 60%),
    radial-gradient(60% 40% at 0% 100%, rgba(253,204,81,.08), transparent 70%),
    var(--color-bg);
}
.hero-interior__inner{max-width:780px}
.hero-interior__inner h1{font-family:var(--font-display);font-weight:900;font-size:var(--text-2xl);line-height:1.05;letter-spacing:-.02em;color:var(--color-text);margin:0 0 var(--space-5)}
.hero-interior__inner .hero__lede{font-size:var(--text-lg);color:var(--color-text-muted);max-width:62ch;line-height:1.55}
.text-center{text-align:center}
.hero-interior__inner.text-center{margin-inline:auto}
.hero-interior__inner.text-center .hero__cta,
.hero-interior__inner.text-center .hero__proof{justify-content:center}

/* Step grid (how it works) */
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8);margin-top:var(--space-12)}
.step{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.step__num{font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);color:var(--color-primary);padding:var(--space-6) var(--space-6) 0;letter-spacing:-.02em}
.step h3{font-family:var(--font-display);font-weight:900;font-size:var(--text-lg);line-height:1.15;color:var(--color-text);margin:var(--space-3) var(--space-6) var(--space-2);letter-spacing:-.01em}
.step p{color:var(--color-text-muted);margin:0 var(--space-6) var(--space-6);line-height:1.55}
.step img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;margin-top:auto}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-4);margin-top:var(--space-10)}
.faq-list{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-8)}
.faq-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.faq-item > summary{padding:var(--space-5) var(--space-6);font-weight:600;font-size:var(--text-base);color:var(--color-text);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);transition:background .2s ease}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary::marker{display:none;content:''}
.faq-item > summary::after{content:'';width:14px;height:14px;flex-shrink:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%233DAEBC' stroke-width='2.5' stroke-linecap='round'><line x1='7' y1='1' x2='7' y2='13'/><line x1='1' y1='7' x2='13' y2='7'/></svg>");background-repeat:no-repeat;background-size:contain;transition:transform .25s ease}
.faq-item[open] > summary::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%233DAEBC' stroke-width='2.5' stroke-linecap='round'><line x1='1' y1='7' x2='13' y2='7'/></svg>")}
.faq-item > summary:hover{background:var(--color-surface-2)}
.faq-item > p{padding:0 var(--space-6) var(--space-5);margin:0;color:var(--color-text-muted);line-height:1.6}

/* Article cards (blog hub) */
.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-8)}
.article-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.article-card img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.article-card__body{padding:var(--space-6)}
.article-card__body h2,
.article-card__body h3{font-family:var(--font-display);font-weight:900;line-height:1.15;color:var(--color-text);margin:var(--space-3) 0 var(--space-3);letter-spacing:-.01em}
.article-card__body h2{font-size:var(--text-xl)}
.article-card__body h3{font-size:var(--text-lg)}
.article-card__body h2 a,
.article-card__body h3 a{color:inherit;text-decoration:none}
.article-card__body h2 a:hover,
.article-card__body h3 a:hover{color:var(--color-primary)}
.article-card__body p{color:var(--color-text-muted);line-height:1.55;margin:0 0 var(--space-4)}
.article-card__link{color:var(--color-primary);font-weight:600;text-decoration:none}
.article-card__link:hover{color:var(--color-primary-hover)}
.article-card--feature{grid-column:1/-1}
@media (min-width:900px){
  .article-card--feature{display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch}
  .article-card--feature img{height:100%;aspect-ratio:auto}
}

/* Article (blog post) */
.article__header{padding-block:clamp(var(--space-12),8vw,var(--space-20)) var(--space-6);background:var(--color-bg)}
.article__header h1{font-family:var(--font-display);font-weight:900;font-size:var(--text-2xl);line-height:1.05;letter-spacing:-.02em;color:var(--color-text);margin:var(--space-3) 0 0;max-width:24ch}
.article__hero{margin:0 0 var(--space-10);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border)}
.article__hero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.prose{font-size:var(--text-base);line-height:1.7;color:var(--color-text);max-width:65ch;margin:0 auto;padding-block:0 var(--space-16)}
.prose p{margin:0 0 var(--space-5)}
.prose h2{font-family:var(--font-display);font-weight:900;font-size:var(--text-xl);line-height:1.15;color:var(--color-text);margin:var(--space-10) 0 var(--space-4);letter-spacing:-.01em}
.prose ul{padding-left:1.25rem;margin:0 0 var(--space-5)}
.prose ul li{margin:0 0 var(--space-2)}
.prose strong{color:var(--color-text);font-weight:600}
.article__cta{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);text-align:center;max-width:65ch;margin:0 auto var(--space-16)}
.article__cta h3{font-family:var(--font-display);font-weight:900;font-size:var(--text-lg);color:var(--color-text);margin:0 0 var(--space-3)}
.article__cta p{color:var(--color-text-muted);margin:0 0 var(--space-5);line-height:1.55}

/* Contact form */
.contact-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-6),4vw,var(--space-10));display:flex;flex-direction:column;gap:var(--space-5)}
.form-row{display:flex;flex-direction:column;gap:var(--space-2)}
.form-row label{font-weight:600;color:var(--color-text);font-size:var(--text-sm)}
.form-row input,
.form-row select,
.form-row textarea{font-family:var(--font-body);font-size:var(--text-base);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);transition:border-color .2s ease,box-shadow .2s ease;width:100%}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(61,174,188,.18)}
.form-row textarea{resize:vertical;min-height:140px;font-family:var(--font-body)}
.contact-form .btn{align-self:flex-start}
.form-note{color:var(--color-text-muted);font-size:var(--text-sm);margin:0;text-align:center}
.form-note a{color:var(--color-primary);font-weight:600}

/* Feature grid 2-col variant */
.feature-grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));max-width:920px;margin-inline:auto}

/* Flex CTA helper */
.flex-cta{display:flex;flex-wrap:wrap;gap:var(--space-4)}


/* Section sub-heading lede (under H2) */
.section-header__sub{
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}
.section-header__sub a{
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section-header__sub a:hover{ color: var(--color-navy); }

/* Recommended canopies bullet list */
.recco-list{
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  display: grid;
  gap: var(--space-3);
}
.recco-list li{
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-base);
  line-height: 1.55;
}
.recco-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-teal);
}