/* =========================================================
   Awaken Advertising — shared stylesheet
   Used by index.html and influencers.html

   Palette pulled from the logo mark:
     bright cyan-blue swoosh  -> --blue-bright
     mid brand blue           -> --blue
     dark navy legs           -> --navy / --navy-deep
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* light theme base */
  --white:#ffffff;
  --paper:#f5f8fc;
  --card-hover:#eaf1f9;

  /* text on light backgrounds */
  --ink:#0a1a2f;
  --text-dim:#4b5c70;

  /* text on dark/inverse backgrounds */
  --ice:#dbe6f2;
  --ice-dim:#93a6bd;

  /* brand blues, sampled from the logo */
  --navy:#0a2540;
  --navy-deep:#061527;
  --blue:#0077b3;
  --blue-deep:#005f8f;
  --blue-bright:#12b3ea;

  --border:rgba(10,37,64,0.10);
  --border-strong:rgba(10,37,64,0.20);
  --border-onDark:rgba(255,255,255,0.14);
  --border-onDark-strong:rgba(255,255,255,0.24);

  --f-display:'Archivo Black', 'Inter', sans-serif;
  --f-body:'Inter', sans-serif;
  --f-mono:'IBM Plex Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--white);
  color:var(--text-dim);
  font-family:var(--f-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::selection{background:var(--blue);color:#fff;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';
  width:22px;height:1px;
  background:var(--blue);
  display:inline-block;
}

h1,h2,h3{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:var(--ink);
}
h2{font-size:clamp(32px,4.4vw,52px);}
h3{font-size:20px;text-transform:none;font-family:var(--f-body);font-weight:800;letter-spacing:-0.01em;}
p{color:var(--text-dim);}

/* signature swoosh motif, pulled from the logo mark */
.swoosh{display:inline-block;color:var(--blue);}
.swoosh svg{display:block;}
.headline-swoosh{width:120px;height:44px;margin:6px 0 26px;color:var(--blue);}
.divider-swoosh{
  width:100%;
  display:flex;
  justify-content:center;
  color:var(--border-strong);
  margin:0;
  opacity:0.7;
}
.divider-swoosh svg{width:200px;height:70px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  font-family:var(--f-body);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.01em;
  border-radius:3px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 0 0 rgba(0,119,179,0);
}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(0,119,179,0.45);}
.btn-ghost{
  border:1px solid var(--border-strong);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--blue);background:rgba(0,119,179,0.06);color:var(--blue);transform:translateY(-2px);}
.btn-sm{padding:11px 20px;font-size:13.5px;}

/* buttons inside a dark/inverse section need light-friendly ghost styling */
.section-dark .btn-ghost{border-color:var(--border-onDark-strong);color:#fff;}
.section-dark .btn-ghost:hover{border-color:var(--blue-bright);background:rgba(18,179,234,0.12);color:var(--blue-bright);}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:20px 0;
  transition:background .3s ease, padding .3s ease, border-color .3s ease, box-shadow .3s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:14px 0;
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 24px -12px rgba(10,37,64,0.15);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{height:34px;width:34px;object-fit:contain;}
.brand-word{font-family:var(--f-display);font-size:15px;letter-spacing:0.04em;color:var(--ink);}
.brand-word span{color:var(--text-dim);font-weight:400;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:14px;font-weight:500;color:var(--text-dim);transition:color .15s ease;position:relative;}
.nav-links a:hover{color:var(--blue);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.audience-toggle{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.04em;
  color:var(--text-dim);
  border:1px solid var(--border-strong);
  padding:9px 16px;
  border-radius:3px;
  transition:all .15s ease;
  display:flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.audience-toggle:hover{color:var(--blue);border-color:var(--blue);}
.audience-toggle svg{width:12px;height:12px;flex:none;}

@media (max-width:900px){
  .nav-links{display:none;}
}
@media (max-width:640px){
  /* The audience-toggle is the main way visitors discover the other
     page exists (brand <-> influencer), so it stays visible at every
     width — this is what was hidden behind the hamburger before,
     which defeated the point. To make room for it alongside the CTA
     button, the wordmark drops to icon-only and both the toggle and
     button trim down to their shortest readable form. */
  .brand-word{display:none;}
  .nav-cta{gap:8px;}
  .audience-toggle{padding:9px 12px;gap:6px;}
  .nav-cta .btn-sm{padding:9px 14px;font-size:12.5px;}
  .mobile-trim{display:none;}
}

/* ---------- sections generic ---------- */
section{position:relative;padding:120px 0;}
@media (max-width:768px){section{padding:80px 0;}}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head p{margin-top:18px;font-size:17px;max-width:520px;}

/* ---------- dark / inverse section utility ----------
   Applied to a handful of sections (results, final CTA, footer,
   and the requirements block on the influencers page) so the
   mostly-white site still gets contrast breaks, matching the
   reference site's light-with-dark-accent pattern. */
.section-dark{
  background-color:var(--navy);
  color:var(--ice);
}
.section-dark h1,
.section-dark h2,
.section-dark h3{color:#fff;}
.section-dark p{color:var(--ice-dim);}
.section-dark .eyebrow{color:var(--blue-bright);}
.section-dark .eyebrow::before{background:var(--blue-bright);}
.section-dark .disclaimer{color:var(--ice-dim);}
.section-dark .swoosh{color:var(--blue-bright);}

/* ---------- hero ---------- */
.hero{
  padding:200px 0 120px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(0,119,179,0.09), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(10,37,64,0.05), transparent 60%),
    var(--white);
}
.hero-bg-swoosh{
  position:absolute;
  top:-8%;right:-12%;
  width:60vw;max-width:820px;
  color:rgba(0,119,179,0.08);
  transform:rotate(8deg);
  pointer-events:none;
  z-index:0;
}
.hero-inner{position:relative;z-index:1;max-width:840px;}
.hero h1{font-size:clamp(42px,7vw,84px);}
.hero .lede{
  font-size:18px;color:var(--text-dim);max-width:560px;margin:26px 0 40px;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;}
.stat-strip{
  margin-top:96px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.stat-strip .stat{
  padding:30px 28px;
  border-right:1px solid var(--border);
}
.stat-strip .stat:last-child{border-right:none;}
.stat .num{
  font-family:var(--f-mono);
  font-size:clamp(26px,3.4vw,38px);
  font-weight:600;
  color:var(--ink);
  display:block;
}
.stat .label{font-size:13px;color:var(--text-dim);margin-top:6px;}
@media (max-width:640px){
  .stat-strip{grid-template-columns:1fr;}
  .stat-strip .stat{border-right:none;border-bottom:1px solid var(--border);}
  .stat-strip .stat:last-child{border-bottom:none;}
}
.disclaimer{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--text-dim);
  opacity:0.8;
  margin-top:14px;
}

/* ---------- logo bar ---------- */
.logo-bar{padding:56px 0;border-bottom:1px solid var(--border);background:var(--paper);}
.logo-bar .label{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.16em;
  color:var(--text-dim);text-align:center;margin-bottom:34px;text-transform:uppercase;
}
.logo-row{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:44px;
}
.logo-row .ph{
  font-family:var(--f-display);font-size:19px;color:var(--text-dim);
  opacity:0.65;letter-spacing:0.02em;transition:opacity .2s ease, color .2s ease;
}
.logo-row .ph:hover{opacity:1;color:var(--ink);}

/* ---------- problem section ---------- */
.problem-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.problem-card{background:var(--white);padding:38px 32px;}
.problem-card .n{
  font-family:var(--f-mono);color:var(--blue);font-size:13px;margin-bottom:20px;display:block;
}
.problem-card h3{margin-bottom:12px;}
.problem-card p{font-size:14.5px;}
@media (max-width:860px){.problem-grid{grid-template-columns:1fr;}}
.problem-resolve{
  margin-top:48px;
  font-family:var(--f-display);
  font-size:clamp(22px,2.6vw,30px);
  text-transform:none;
  color:var(--ink);
}
.problem-resolve span{color:var(--blue);}

.section-dark .problem-grid{background:var(--border-onDark);border-color:var(--border-onDark);}
.section-dark .problem-card{background:rgba(255,255,255,0.03);}
.section-dark .problem-card .n{color:var(--blue-bright);}
.section-dark .problem-resolve{color:#fff;}
.section-dark .problem-resolve span{color:var(--blue-bright);}

/* ---------- services / offer ---------- */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:768px){.services-grid{grid-template-columns:1fr;}}
.service-card{
  background:var(--paper);
  border:1px solid var(--border);
  padding:36px;
  border-radius:4px;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.service-card:hover{border-color:var(--border-strong);background:var(--card-hover);transform:translateY(-3px);}
.service-icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,119,179,0.10);
  border-radius:4px;
  margin-bottom:22px;
  color:var(--blue);
}
.service-icon svg{width:22px;height:22px;}
.service-card h3{margin-bottom:10px;}
.service-card p{font-size:14.5px;}

/* ---------- results (dark / inverse section) ---------- */
#results.section-dark{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:900px){.results-grid{grid-template-columns:1fr;}}
.result-card{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border-onDark);
  border-radius:4px;
  padding:34px 30px;
  position:relative;
  overflow:hidden;
}
.result-card .tag{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ice-dim);margin-bottom:22px;display:block;
}
.result-card .headline-num{
  font-family:var(--f-display);
  font-size:clamp(28px,3vw,34px);
  color:#fff;
  line-height:1.1;
  margin-bottom:16px;
  text-transform:none;
}
.result-card .headline-num em{font-style:normal;color:var(--blue-bright);}
.result-card p{font-size:14px;}
.result-card .corner-swoosh{
  position:absolute;top:18px;right:18px;width:38px;height:38px;color:var(--border-onDark-strong);
}

/* ---------- process ---------- */
.process-list{border-top:1px solid var(--border);}
.process-row{
  display:grid;grid-template-columns:90px 1fr 1.4fr;gap:32px;
  padding:34px 0;border-bottom:1px solid var(--border);
  align-items:start;
}
.process-row .pnum{font-family:var(--f-mono);font-size:14px;color:var(--blue);padding-top:4px;}
.process-row h3{font-size:19px;}
.process-row p{font-size:14.5px;max-width:460px;}
@media (max-width:768px){
  .process-row{grid-template-columns:50px 1fr;}
  .process-row p{grid-column:2;}
}
.section-dark .process-list{border-top-color:var(--border-onDark);}
.section-dark .process-row{border-bottom-color:var(--border-onDark);}
.section-dark .process-row .pnum{color:var(--blue-bright);}

/* ---------- testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:768px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{
  background:var(--paper);border:1px solid var(--border);border-radius:4px;
  padding:34px;display:flex;flex-direction:column;gap:22px;
}
.testi-card .quote{font-size:17px;color:var(--ink);line-height:1.55;}
.testi-card .who{display:flex;align-items:center;gap:12px;}
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:13px;font-weight:600;
  color:#fff;
}
.who .name{font-size:14px;font-weight:700;color:var(--ink);}
.who .role{font-size:12.5px;color:var(--text-dim);}

.section-dark .testi-card{background:rgba(255,255,255,0.03);border-color:var(--border-onDark);}
.section-dark .testi-card .quote{color:#fff;}
.section-dark .who .name{color:#fff;}
.section-dark .who .role{color:var(--ice-dim);}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--border);max-width:820px;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:26px 4px;text-align:left;font-family:var(--f-body);font-weight:700;font-size:16.5px;
  color:var(--ink);
}
.faq-q .icon{
  width:20px;height:20px;flex:none;position:relative;margin-left:20px;
}
.faq-q .icon::before,
.faq-q .icon::after{
  content:'';position:absolute;background:var(--ink);
}
.faq-q .icon::before{width:14px;height:2px;top:9px;left:3px;}
.faq-q .icon::after{width:2px;height:14px;top:3px;left:9px;transition:transform .25s ease;}
.faq-item.open .icon::after{transform:rotate(90deg);}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .3s ease;
}
.faq-a p{padding:0 4px 26px;font-size:15px;max-width:640px;}
.faq-item.open .faq-a{max-height:260px;}

.section-dark .faq-list{border-top-color:var(--border-onDark);}
.section-dark .faq-item{border-bottom-color:var(--border-onDark);}
.section-dark .faq-q{color:#fff;}
.section-dark .faq-q .icon::before,
.section-dark .faq-q .icon::after{background:#fff;}

/* ---------- final CTA ---------- */
.final-cta{
  text-align:center;
  background:
    radial-gradient(ellipse 700px 400px at 50% 0%, rgba(0,119,179,0.10), transparent 65%),
    var(--white);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.final-cta.section-dark{
  background:
    radial-gradient(ellipse 700px 400px at 50% 0%, rgba(18,179,234,0.22), transparent 65%),
    var(--navy);
  border-top-color:var(--border-onDark);
  border-bottom-color:var(--border-onDark);
}
.final-cta .wrap{display:flex;flex-direction:column;align-items:center;}
.final-cta h2{max-width:700px;}
.final-cta p{margin:20px 0 36px;font-size:17px;}

/* ---------- footer — fixed brand chrome ----------
   The footer no longer follows the light/dark alternation of the
   content sections above it (that's what caused the two pages'
   footers to land on different colors, since one page has an odd
   number of alternating sections and the other even). Instead it
   behaves like the header: always the same treatment regardless of
   what's above it. Here that's a third, distinct color — the solid
   brand blue from the logo, used nowhere else on the page — so it
   reads as deliberate site chrome, not a leftover alternation cell. */
footer{
  background:var(--blue);
  padding:64px 0 40px;
}
footer .brand-word{color:#fff;}
footer .brand-word span{color:rgba(255,255,255,0.7);}
.footer-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;
  padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.22);
}
.footer-brand{max-width:280px;}
.footer-brand .brand{margin-bottom:16px;}
.footer-brand p{font-size:14px;color:rgba(255,255,255,0.75);}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h4{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);margin-bottom:18px;
}
.footer-col a,
.footer-col span{
  display:block;font-size:14px;color:rgba(255,255,255,0.85);padding:6px 0;
}
.footer-col a:hover{color:var(--blue-bright);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;padding-top:28px;
  font-size:13px;color:rgba(255,255,255,0.65);flex-wrap:wrap;gap:12px;
}
.socials{display:flex;gap:16px;}
.socials a{
  width:34px;height:34px;border:1px solid rgba(255,255,255,0.35);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s, color .2s, background .2s;
  color:rgba(255,255,255,0.85);
}
.socials a:hover{border-color:var(--blue-bright);background:rgba(18,179,234,0.18);color:var(--blue-bright);}
.socials svg{width:15px;height:15px;}
@media (max-width:640px){.footer-top{flex-direction:column;}}

/* ---------- reveal on scroll ----------
   Content is visible by default. Only once script.js confirms it
   is running does <html> get the "js" class, which is what switches
   these blocks into the hidden-then-fade-in state. If the script
   ever fails to load, nothing goes invisible. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.js .reveal.in{opacity:1;transform:translateY(0);}

/* ---------- influencer-only bits ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:768px){.benefit-grid{grid-template-columns:1fr;}}
.benefit-card{
  border:1px solid var(--border);border-radius:4px;padding:32px;
  display:flex;gap:20px;background:var(--paper);
}
.benefit-card .swoosh{flex:none;width:26px;height:26px;margin-top:2px;color:var(--blue);}
.benefit-card h3{margin-bottom:8px;}
.benefit-card p{font-size:14.5px;}

.section-dark .benefit-card{background:rgba(255,255,255,0.03);border-color:var(--border-onDark);}
.section-dark .benefit-card .swoosh{color:var(--blue-bright);}

/* requirements list */
.req-list{
  border:1px solid var(--border);border-radius:4px;overflow:hidden;
}
.req-row{
  display:flex;align-items:center;gap:16px;
  padding:22px 28px;border-bottom:1px solid var(--border);
  font-size:15.5px;background:var(--paper);
  color:var(--ink);
}
.req-row:last-child{border-bottom:none;}
.req-row .check{
  width:22px;height:22px;flex:none;border-radius:50%;
  background:rgba(0,119,179,0.10);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.req-row .check svg{width:12px;height:12px;}

/* dark variant — not currently used, kept in case this list appears in a dark section again */
.section-dark .req-list{border-color:var(--border-onDark);}
.section-dark .req-row{background:rgba(255,255,255,0.03);border-bottom-color:var(--border-onDark);color:var(--ice);}
.section-dark .req-row .check{background:rgba(18,179,234,0.18);color:var(--blue-bright);}

.apply-panel{
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:0;
  border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--white);
  box-shadow:0 20px 60px -30px rgba(10,37,64,0.25);
}
@media (max-width:900px){.apply-panel{grid-template-columns:1fr;}}
.apply-side{
  padding:48px 40px;
  background:
    radial-gradient(ellipse 400px 300px at 20% 0%, rgba(18,179,234,0.25), transparent 65%),
    var(--navy);
  display:flex;flex-direction:column;justify-content:center;
}
.apply-side h3{font-family:var(--f-display);font-size:24px;text-transform:uppercase;margin-bottom:16px;color:#fff;}
.apply-side p{color:var(--ice);font-size:14.5px;}
.apply-side .mini-list{margin-top:24px;display:flex;flex-direction:column;gap:12px;}
.apply-side .mini-list li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ice);}
.apply-side .mini-list .dot{width:5px;height:5px;background:var(--blue-bright);border-radius:50%;flex:none;}
.apply-form{padding:48px 40px;text-align:left;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.field label{font-size:12.5px;font-family:var(--f-mono);color:var(--text-dim);letter-spacing:0.04em;}
.field input,
.field select,
.field textarea{
  background:var(--white);border:1px solid var(--border-strong);border-radius:3px;
  padding:13px 14px;color:var(--ink);font-family:var(--f-body);font-size:14.5px;
  transition:border-color .15s ease;
  width:100%;
}
.field textarea{resize:vertical;min-height:80px;}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--blue);outline:none;}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b5c70'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
.apply-form .btn{width:100%;justify-content:center;margin-top:6px;}
.form-note{font-size:12px;color:var(--text-dim);margin-top:14px;text-align:center;}
.form-error{font-size:13px;color:#c0392b;margin-top:10px;text-align:center;display:none;}
.form-error.show{display:block;}
.success-msg{
  display:none;text-align:center;padding:40px 20px;
}
.success-msg.show{display:block;}
.success-msg .check-big{
  width:56px;height:56px;border-radius:50%;background:rgba(0,119,179,0.10);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.success-msg .check-big svg{width:26px;height:26px;}
.success-msg h3{font-family:var(--f-display);text-transform:uppercase;font-size:20px;margin-bottom:10px;color:var(--ink);}
.success-msg p{font-size:14px;}

/* Calendly booking widget — collapsed to nothing until a real link is
   configured and JS actually loads it in (see CALENDLY_URL in
   script.js), so it never leaves an empty gap by default. */
#book-calendly.loaded{min-width:280px;height:580px;margin-top:20px;}

/* apply-panel reused inside .final-cta, which centers everything by
   default for its short intro text — the form itself needs normal
   full-width, left-aligned layout instead. */
.final-cta .apply-panel{width:100%;max-width:1000px;margin-top:48px;text-align:left;}

/* Safety net: success-msg / apply-form sit on a white card regardless
   of whether the section around them is light or dark, so their text
   must never inherit the ambient .section-dark heading/paragraph
   overrides defined earlier in this file. Kept last so it always wins
   on equal specificity. */
.success-msg h3{color:var(--ink);}
.success-msg p{color:var(--text-dim);}