/* =========================================================
   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;
}
.audience-toggle:hover{color:var(--blue);border-color:var(--blue);}
.audience-toggle svg{width:12px;height:12px;}
.hamburger{display:none;flex-direction:column;gap:5px;padding:6px;}
.hamburger span{width:22px;height:2px;background:var(--ink);}

@media (max-width:900px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
}
@media (max-width:640px){
  .nav-cta .btn-sm{padding:9px 14px;font-size:12.5px;}
}

.mobile-menu{
  position:fixed;inset:0;z-index:99;
  background:var(--white);
  display:none;
  flex-direction:column;
  padding:100px 32px 40px;
  gap:0;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  font-family:var(--f-display);
  font-size:26px;
  text-transform:uppercase;
  padding:18px 0;
  border-bottom:1px solid var(--border);
  color:var(--ink);
}
.mobile-menu .btn{margin-top:28px;justify-content:center;}

/* ---------- 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;}
.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{
  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 input:focus,
.field select: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;}