@import url("fonts.css");

/* ===========================================================
   Design tokens — read from the live site's design kit
   =========================================================== */
:root{
  /* palette */
  --c-primary:   #341F12;   /* dark brown — body text, dark sections */
  --c-secondary: #997024;   /* muted gold */
  --c-inverse:   #FFFFFF;
  --c-accent:    #F3574F;   /* coral — primary CTA */
  --c-cream:     #FFF3E0;   /* page background */
  --c-brown:     #705747;   /* secondary text */
  --c-amber:     #FBC672;   /* highlight / player accent */
  --c-link:      rgb(4, 92, 180);  /* Astra's in-content link colour, used site-wide */

  /* type scale */
  --f-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-primary: 2rem;      --lh-primary: 2.2rem;      --fw-primary: 500;
  --fs-secondary: 1.4rem;  --lh-secondary: 1.8rem;    --fw-secondary: 600;
  --fs-text: 1.15rem;      --lh-text: 1.725rem;       --fw-text: 400;
  --fs-small: 1rem;        --lh-small: 1.2rem;        --fw-small: 600;
  --fs-small-alt: 1rem;    --lh-small-alt: 1.35rem;   --fw-small-alt: 400;

  /* layout */
  --container: 1140px;
  --gutter: 20px;
  --widget-gap: 20px;
}
@media (max-width:1024px){ :root{ --container:1024px; } }
@media (max-width:767px){
  :root{ --container:767px; --lh-secondary:1.7rem; --lh-text:1.84rem; --lh-small-alt:1.3rem; }
}

/* ===========================================================
   Reset / base
   =========================================================== */
*,*::before,*::after{ box-sizing:border-box; }

/* Root font-size drives every rem on the site. The live site (Astra) uses
   91.2% below its 921px breakpoint and 100% above it — measured, not assumed:
   html = 14.592px at <=921, 16px at >=922. Body size steps separately at
   the live 1024 tablet edge. Getting this wrong shifts every dimension. */
html{
  font-size:91.2%;
  -webkit-text-size-adjust:100%;
}
@media (min-width:922px){ html{ font-size:100%; } }

body{
  margin:0;
  font-family:var(--f-family);
  font-size:14px;
  line-height:1.65;
  font-weight:var(--fw-text);
  color:var(--c-primary);
  background:var(--c-cream);
  overflow-x:hidden;               /* M10 guard; layouts must not rely on it */
}
@media (min-width:1025px){ body{ font-size:16px; } }

/* Sticky-footer layout, as on the live site: short pages (e.g. /declined/)
   stretch the content area so the footer sits at the bottom of the viewport. */
body{ display:flex; flex-direction:column; min-height:100vh; }
body > main{ flex:1 0 auto; }
body > footer{ flex:none; }
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:var(--fw-primary); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* visually hidden but reachable */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--c-primary); color:var(--c-inverse); padding:.75rem 1rem;
}
.skip-link:focus{ left:0; }

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--c-accent); outline-offset:2px;
}

/* ===========================================================
   Buttons — the coral CTA, one rule for all three live variants
   =========================================================== */
.btn{
  display:inline-block;
  background:var(--c-accent);
  color:var(--c-inverse);
  font-family:var(--f-family);
  font-weight:500;
  text-decoration:none;
  border:0; border-radius:0;
  cursor:pointer;
  text-align:center;
}

/* ===========================================================
   Site header (SPEC §6.5) — ONE semantic header; the live site
   ships three duplicated header variants, collapsed here.
   Sticky top on every breakpoint (live: sticky_on desktop+tablet+mobile).
   The flex bases below mirror the live containers (85% / 20% with a 5%
   gap); both shrink from those bases, which is what produces the live
   954px / 224px split at 1440.
   =========================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:5%;
  background:var(--c-inverse);
  padding:0.813rem 6.25rem;
  box-shadow:0 0 20px 0 rgba(0,0,0,.22);
}
.site-header__main{
  flex:0 1 85%;
  display:flex; align-items:center; justify-content:flex-start;
  gap:4%;
}
.site-header__logo{ display:inline-block; line-height:1.65; }
.site-header__logo img{ display:inline; vertical-align:middle; width:100%; max-width:17.813rem; height:1.125rem; }
.site-header__logo .logo-mobile{ display:none; }

.site-header__divider{
  flex:none;
  width:1px; min-height:2.688rem;
  background:#000;
  align-self:center;
}

.site-nav{
  width:33.313rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:10%;               /* percentage of the nav's own width, as on live: below
                            ~1300px this squeezes the items and wraps the long one */
}
.site-nav a{
  min-width:0;           /* live widgets shrink past min-content, so the labels
                            crowd slightly at ~1200 instead of pushing the row wider */
  font-size:1.125rem; font-weight:400; line-height:1;
  color:var(--c-primary); text-decoration:none;
}

.site-header__cta{
  flex:0 1 20%;
  display:flex; flex-direction:column; align-items:flex-end;
}
.site-header .btn{ font-size:1.125rem; line-height:1; padding:1.125rem 3.25rem; }

@media (max-width:1024px){
  .site-header{ padding:1.063rem 2.875rem; box-shadow:0 0 15px 0 rgba(0,0,0,.22); }
  .site-header__main{ flex:0 1 60%; }
  .site-header__logo img{ max-width:15.75rem; height:1rem; }
  .site-header__divider,
  .site-nav{ display:none; }                       /* live tablet variant: logo + CTA only */
  .site-header__cta{ flex:0 1 30%; }
  .site-header .btn{ font-size:1.143rem; line-height:1; padding:.75rem 2.75rem; }
}
@media (max-width:767px){
  .site-header{ padding:0.813rem 1.875rem; box-shadow:0 0 10px 0 rgba(0,0,0,.22); }
  .site-header__logo .logo-desktop{ display:none; }
  .site-header__logo .logo-mobile{ display:block; width:100%; max-width:7.813rem; height:1.75rem; }
  .site-header .btn{ font-size:.857rem; line-height:1; padding:.813rem 1.25rem; }
}

/* ===========================================================
   Site footer
   =========================================================== */
.site-footer{ background:var(--c-inverse); }
.site-footer__brand{
  display:flex; align-items:center;
  padding:3rem 6.25rem 1rem calc(6.25rem + .6rem);
}
.site-footer__brand a{ display:inline-block; line-height:1.65; }
/* inline + middle so the anchor keeps the live 26px line box around a 23px logo */
.site-footer__brand img{ display:inline; vertical-align:middle; width:16.875rem; max-width:16.875rem; height:1.438rem; }

.site-footer__legal{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 6.25rem 3rem;
}
.site-footer__legal ul{
  flex:1;
  display:flex; justify-content:space-between; align-items:center;
  gap:3.438rem;
  padding:10px;          /* live container padding — sets the 38px row height
                            and the 10px inset of the first and last link */
}
.site-footer__legal li{ line-height:1; }
.site-footer__legal li{ font-size:1.125rem; font-weight:400; }
.site-footer__legal a,
.site-footer__legal span{
  font-size:inherit; font-weight:inherit; line-height:1;
  color:var(--c-primary); text-decoration:none;
}
.site-footer__legal h2{ font:inherit; }

@media (max-width:1024px){
  .site-footer__brand{ padding:3rem 2.875rem 1rem; }
  .site-footer__brand img{ width:14.75rem; max-width:14.75rem; height:1.25rem; }
  .site-footer__legal{ padding:2.063rem 2.875rem 3rem; }
  .site-footer__legal ul{
    flex-direction:column; justify-content:flex-end; align-items:flex-start;
    gap:2.188rem; width:100%;
  }
  .site-footer__legal ul{ padding:0; }   /* live drops the container padding here */
  .site-footer__legal li{ font-size:.857rem; line-height:2; }
}
@media (max-width:767px){
  .site-footer__brand{ padding:2rem 1.875rem 1rem; }
  .site-footer__brand img{ width:100%; max-width:10.313rem; height:.875rem; }
  .site-footer__legal{ padding:1.25rem 1.875rem 2rem; }
  .site-footer__legal ul{ flex:none; width:88%; justify-content:flex-start; gap:1rem; }
  .site-footer__legal li{ line-height:1; }
}

/* ===========================================================
   Shared page hero — brown band with a centred title.
   Used by /declined/ and /thank-you-acp/ (identical on live).
   =========================================================== */
.page-hero{
  display:flex; flex-direction:column; justify-content:center;
  min-height:35.25rem;
  padding:0 9.375rem;
  background:var(--c-brown);
}
.page-hero h1{
  align-self:center; text-align:center;
  font-size:3.625rem; font-weight:600; line-height:1.35;
  color:var(--c-inverse);
}
@media (max-width:1024px){
  .page-hero{ min-height:26rem; padding:0 2.875rem; }
}
@media (max-width:767px){
  .page-hero{ min-height:18.125rem; padding:0 1.875rem; }
  .page-hero h1{ font-size:2.188rem; }
}


/* ===========================================================
   Section eyebrow — the gold lead-in above a section
   (the live text component falls back to the kit's 1.725rem line-height,
   with the spacing carried by the inner container's margins)
   =========================================================== */
.section-eyebrow{
  display:flow-root;
  align-self:center; text-align:center;
  color:var(--c-secondary);
}
.section-eyebrow p{
  margin:0 0 6.25rem;
  font-size:2.875rem; font-weight:500; line-height:1.725rem;
}
@media (max-width:1024px){
  .section-eyebrow p{ margin:0 0 3.75rem; font-size:1.714rem; line-height:1.3; }
}
@media (max-width:767px){
  .section-eyebrow{ max-width:15rem; }
  .section-eyebrow p{ font-size:2rem; margin:0 0 3.75rem; }
}


/* ===========================================================
   Feature list — icon + label rows inside the pricing cards.
   Shared by /, /active-listening/ and /active-listening-parents/
   (the last one overrides the sizes; see active-listening-parents.css).
   Measured from the live icon-list widgets, which are byte-identical
   on / (d50990f) and /active-listening/ (295f6ca).
   =========================================================== */
.feature-list{
  align-self:flex-start;
  margin:1.375rem 0 3.125rem;
}
.feature-list li{
  display:flex; align-items:center;
  font-size:1.5rem; font-weight:400; line-height:1.65;
  color:var(--c-primary);
}
.feature-list li:not(:last-child){ padding-block-end:calc(0.75rem / 2); }
.feature-list li:not(:first-child){ margin-block-start:calc(0.75rem / 2); }
.feature-list .icon{
  display:inline-flex; align-items:center;
  padding-inline-end:0.938rem;
}
.feature-list .icon svg{ width:1.5rem; height:1.5rem; }
@media (max-width:1024px){
  .feature-list li{ font-size:1.143rem; }
  .feature-list li:not(:last-child){ padding-block-end:calc(0.938rem / 2); }
  .feature-list li:not(:first-child){ margin-block-start:calc(0.938rem / 2); }
  .feature-list .icon svg{ width:1rem; height:1rem; }
}
@media (max-width:767px){
  .feature-list{ margin:1.875rem 0 2.5rem; }
}