/* ============================================================
   base.css — the shared design system.

   These rules were identical in all seven original pages: the
   colour tokens, the reset, the type scale, .btn and its variants,
   .wrap, the global section padding and the footer. Extracting
   them here is step 1 of the refactor described in CLAUDE.md §11.

   Load it BEFORE the page's own <style> block, together with the
   other component stylesheets — page rules and media queries have
   to be able to override this layer on source order.

   Currently used by: deposit, thank-you, terms, privacy.
   The seven original pages still carry their own inline copy;
   they adopt this file one at a time, each verified in a browser.
   ============================================================ */

:root{
  /* --- Neutrals & foundations --- */
  --white:#F5F5F7;
  --black:#0D0D11;
  /* --- Mid-tones & depth --- */
  --lavender:#E6E6FA;
  --slate:#5A5D7A;
  /* --slate is 3.03:1 on --black: large text only. Footer body copy
     uses --slate-light (6.10:1), already the footer-heading colour. */
  --slate-light:#8C8FA8;
  /* --- Coastal energy accent --- */
  --teal:#46A3B5;
  /* teal is only AA-legible as TEXT on dark. On light backgrounds, and
     behind white text, use --teal-ink instead (WCAG 1.4.3, 4.5:1). */
  --teal-ink:#326b76;
  --teal-ink-hover:#2B5C66;
  --wind-strong:#8B7BC8;

  /* Same palette as channel triplets, for the many places that need the
     colour at partial alpha: rgba(var(--black-rgb),0.34). CSS cannot pull
     channels out of a hex, so without these every scrim would be a raw
     literal that silently stops tracking the palette. Keep each triplet
     in step with the hex above it. */
  --black-rgb:13,13,17;
  --white-rgb:245,245,247;
  --teal-rgb:70,163,181;
  --lavender-rgb:230,230,250;
  --slate-rgb:90,93,122;

  /* the lifted black that opens the dark card gradients */
  --black-lift:#1a1c26;
  /* Scrim behind the conditions ticker where it overlays a hero photo.
     The backdrop is an image, so contrast cannot be checked against it —
     0.90 makes the bar opaque enough that the photo stops mattering and
     --teal holds 5.20:1 even over the brightest sky. Do not lighten it. */
  --bar-scrim:rgba(13,13,17,0.90);

  --radius:6px;
  --radius-sm:4px;
  --max:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--black);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:0.98;
  text-transform:none;
}
.overline{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:0.82rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-ink);
}
/* On the black bands the light-background variant drops to 3.23:1,
   so those overlines keep --teal, which is 6.62:1 on --black. */
.coach .overline, .final .overline, footer .overline{color:var(--teal);}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
img.ph{width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block;}

/* --- bearing line signature element --- */
.bearing{
  display:flex; align-items:center; gap:10px; margin:0 0 22px 0;
}
.bearing .line{
  width:56px; height:2px; background:var(--teal);
  transform:rotate(-8deg); transform-origin:left center;
}
.bearing .arrow{
  width:0; height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid var(--teal);
  transform:rotate(-8deg);
}
.bearing.on-dark .line{background:var(--teal);}
.bearing.center{justify-content:center;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:0.98rem;
  letter-spacing:0.02em;
  padding:12px 22px; border-radius:var(--radius-sm);
  border:1.5px solid transparent;
  cursor:pointer; transition:all .15s ease;
  white-space:nowrap;
  text-transform:uppercase;
}
.btn-primary{background:var(--teal-ink); color:var(--white);}
.btn-primary:hover{background:var(--teal-ink-hover);}
.btn-dark{background:var(--black); color:var(--white);}
.btn-dark:hover{background:#000;}
.btn-outline{border-color:var(--white); color:var(--white); background:transparent;}
.btn-outline:hover{background:rgba(255,255,255,0.1);}
.btn-outline-dark{border-color:var(--black); color:var(--black); background:transparent;}
.btn-outline-dark:hover{background:rgba(var(--black-rgb),0.05);}
.btn-sm{padding:9px 16px; font-size:0.88rem;}

section{padding:100px 0;}
.section-tight{padding:64px 0;}

footer{background:var(--black); color:var(--slate-light); padding:56px 0 24px; border-top:1px solid rgba(255,255,255,0.08);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px;}
.footer-brand .logo{margin-bottom:10px;}
.footer-brand p{font-size:0.88rem; color:var(--slate-light); max-width:230px; line-height:1.5;}
.footer-heading{font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-light); margin-bottom:14px;}
.footer-col{display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:0.9rem; color:var(--slate-light); transition:color .15s ease;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; font-size:0.82rem; color:var(--slate-light); border-top:1px solid rgba(255,255,255,0.08); padding-top:20px; flex-wrap:wrap; gap:10px;}
footer a:hover{color:var(--white);}

/* --- footer social icon --- */
.footer-social{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1.5px solid rgba(255,255,255,0.18);
  border-radius:var(--radius-sm);
  color:var(--slate);
  transition:color .15s ease, border-color .15s ease, background .15s ease;
  margin-bottom: 20px;
}
.footer-social:hover, .footer-social:focus-visible{color:var(--white); border-color:var(--white); background:rgba(255,255,255,0.06);}
.footer-social svg{width:20px; height:20px;}
.footer-social-row{display:flex; gap:12px;}


/* --- shared section patterns ---
   `.testimonials` (a lavender band), `.coach` (a black band) and `.final`
   (the closing CTA) were declared identically in the inline <style> of
   every content page. They are page furniture, not page-specific, so they
   live here. Pages that still carry their own copy simply restate this. --- */
.testimonials{background:var(--lavender);}
.coach{background:var(--black); color:var(--white);}
.coach p{font-size:1.04rem; color:#D8D8E0; max-width:600px; margin-bottom:14px;}
.coach a.go{font-family:'Barlow Condensed'; font-weight:700; font-size:0.98rem; text-transform:uppercase; color:var(--teal);}
.final{background:var(--black); color:var(--white); text-align:center;}
.final h2{font-size:2.8rem; margin-bottom:14px;}
.final p{color:#D8D8E0; margin-bottom:32px; font-size:1.04rem;}
.final .btnrow{display:flex; gap:14px; justify-content:center;}

/* --- shared responsive rules ---
   These were identical in every page's inline <style> too. Without
   them a page using base.css keeps desktop section padding and an
   uncollapsed footer grid on a phone. --- */
@media (max-width:860px){
  section{padding:64px 0;}
  .final .btnrow{flex-direction:column; align-items:stretch;}
  .final .btnrow .btn{width:100%; justify-content:center;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .footer-brand{grid-column:1 / -1;}
}

@media (max-width:560px){
  .wrap{padding:0 20px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:24px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  /* long CTA labels shouldn't push the page sideways on small phones */
  .btn{white-space:normal; text-align:center;}
}