:root{
  --bg:#0d1626;
  --bg-alt:#121f34;
  --card:#16233a;
  --border:#243652;
  --text:#eef4fb;
  --text-dim:#8fa2bd;
  --accent:#1fc8ed;
  --accent-dim:#0f9fc4;
  --accent2:#6fddf7;
  --radius:4px;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Inter',sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  line-height:1.15;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.2rem,5vw,3.6rem);}
h2{font-size:clamp(1.6rem,3vw,2.4rem);}
h3{font-size:1.25rem;}
p{color:var(--text-dim);margin:0 0 1em;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
img{max-width:100%;display:block;}

/* NAV */
#nav-root{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:900;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;
  color:var(--text);
}
.brand span{color:var(--accent);}
.brand:hover{text-decoration:none;}
.brand-logo{height:36px;width:36px;display:block;border-radius:8px;}
.nav-links{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center;}
.nav-links a{
  color:var(--text-dim);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;
}
.nav-links a:hover,.nav-links a.active{color:var(--text);text-decoration:none;}
.nav-links a.cta{
  background:var(--accent);color:#06121f;padding:9px 16px;border-radius:var(--radius);
}
.nav-links a.cta:hover{background:var(--accent-dim);color:#06121f;}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:var(--radius);font-size:1rem;}

@media (max-width:820px){
  .nav-toggle{display:block;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;background:var(--bg);
    flex-direction:column;align-items:flex-start;gap:0;
    border-bottom:1px solid var(--border);
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav-links.open{max-height:520px;}
  .nav-links li{width:100%;}
  .nav-links a{display:block;padding:14px 24px;width:100%;border-bottom:1px solid var(--border);}
  .nav-links a.cta{margin:14px 24px;display:inline-block;width:calc(100% - 48px);text-align:center;}
}

/* HERO */
.hero{
  padding:90px 0 70px;
  background:radial-gradient(circle at 20% 20%, rgba(31,200,237,.16), transparent 45%), var(--bg);
  border-bottom:1px solid var(--border);
}
.eyebrow{
  display:inline-block;color:var(--accent);font-weight:700;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;
}
.hero p.lead{font-size:1.15rem;max-width:640px;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
.btn{
  display:inline-block;padding:14px 26px;border-radius:var(--radius);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--accent);color:#06121f;}
.btn-primary:hover{background:var(--accent-dim);color:#06121f;text-decoration:none;}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border);}
.btn-outline:hover{border-color:var(--text);text-decoration:none;}

/* SECTIONS / CARDS */
section{padding:64px 0;}
.section-alt{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.section-head{max-width:640px;margin-bottom:40px;}
.grid{display:grid;gap:22px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;transition:border-color .15s ease,transform .15s ease;
}
.card:hover{border-color:var(--accent-dim);transform:translateY(-2px);}
.card h3{margin-bottom:8px;}
.card p{margin-bottom:14px;}
.card a.card-link{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;}
.tag{
  display:inline-block;background:rgba(31,200,237,.12);color:var(--accent);
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 9px;border-radius:20px;margin-bottom:10px;
}

.benefit-list{list-style:none;margin:0 0 16px;padding:0;}
.benefit-list li{
  padding:10px 0 10px 28px;position:relative;color:var(--text-dim);border-bottom:1px solid var(--border);
}
.benefit-list li:last-child{border-bottom:none;}
.benefit-list li::before{
  content:"→";position:absolute;left:0;color:var(--accent);font-weight:900;
}

.resource-box{
  background:var(--bg-alt);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:20px 22px;margin:18px 0;
}
.resource-box h4{margin-bottom:10px;text-transform:none;font-size:1rem;}
.resource-box ul{margin:0;padding-left:20px;color:var(--text-dim);}
.resource-box li{margin-bottom:6px;}

.callout{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 24px;margin:22px 0;
}
.callout.warn{border-color:#5c3b1e;background:rgba(255,183,3,.06);}
.callout.warn strong{color:var(--accent2);}
.callout p{margin-bottom:0;font-size:.92rem;}

/* FORMS / QUIZ */
.quiz-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;max-width:760px;}
.field{margin-bottom:22px;}
.field label{display:block;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
.field .hint{color:var(--text-dim);font-size:.8rem;margin-top:6px;}
input[type=text],input[type=number],input[type=email],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  padding:12px 14px;border-radius:var(--radius);font-size:.95rem;font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (max-width:640px){.check-grid{grid-template-columns:1fr;}}
.check-item{
  display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 14px;cursor:pointer;font-size:.9rem;
}
.check-item input{width:auto;}
.radio-row{display:flex;gap:10px;flex-wrap:wrap;}
.radio-pill{
  border:1px solid var(--border);border-radius:30px;padding:10px 18px;cursor:pointer;font-size:.85rem;
  color:var(--text-dim);
}
.radio-pill input{display:none;}
.radio-pill.active{border-color:var(--accent);color:var(--text);background:rgba(31,200,237,.1);}

#result-panel{display:none;margin-top:36px;}
.macro-grid{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 28px;}
.macro-grid .macro-box{flex:1 1 150px;}
.macro-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;}
.macro-box .num{font-size:1.6rem;font-weight:800;color:var(--accent);}
.macro-box .lbl{font-size:.72rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:.05em;}

.recipe-card,.exercise-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:14px;
}
.recipe-card h4,.exercise-card h4{margin-bottom:6px;text-transform:none;font-size:1.05rem;}
.recipe-meta{font-size:.78rem;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;font-weight:700;}
.recipe-card ul{color:var(--text-dim);margin:8px 0 0;padding-left:20px;font-size:.9rem;}

.day-block{margin-bottom:26px;}
.day-block h3{color:var(--accent2);border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:14px;text-transform:uppercase;}

/* FOOTER */
#footer-root{border-top:1px solid var(--border);background:var(--bg-alt);padding:50px 0 30px;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:30px;}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;color:var(--text);}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a{color:var(--text-dim);font-size:.9rem;}
.footer-grid a:hover{color:var(--text);}
.footer-bottom{border-top:1px solid var(--border);padding-top:22px;font-size:.78rem;color:#6b6b6b;}
.footer-bottom p{color:#6b6b6b;margin-bottom:6px;}

.page-hero{padding:64px 0 40px;border-bottom:1px solid var(--border);}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:640px){.form-row-2{grid-template-columns:1fr;}}

.error-msg{color:var(--accent);font-size:.85rem;margin-top:10px;display:none;}

/* MONTH TABLE */
.month-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:640px;}
.month-table th,.month-table td{
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:220px;
}
.month-table th{
  background:var(--bg-alt);color:var(--accent);text-transform:uppercase;font-size:.72rem;
  letter-spacing:.05em;position:sticky;top:0;
}
.month-table tr:nth-child(even) td{background:rgba(255,255,255,.02);}
.month-table td:first-child{color:var(--text-dim);font-weight:700;white-space:nowrap;}

/* EXERCISE CARD WITH ICON */
.exercise-card{display:flex;gap:16px;align-items:flex-start;}
.exercise-icon{
  flex:0 0 auto;width:52px;height:52px;padding:8px;border-radius:var(--radius);
  background:var(--bg-alt);border:1px solid var(--border);color:var(--accent);
}
.exercise-icon svg{width:100%;height:100%;}
.exercise-body{flex:1;min-width:0;}
.exercise-cues{list-style:none;margin:10px 0 0;padding:0;color:var(--text-dim);font-size:.88rem;}
.exercise-cues li{padding:4px 0 4px 20px;position:relative;}
.exercise-cues li::before{content:"•";position:absolute;left:4px;color:var(--accent);}

/* REPORT — light, print-style report card, used only for the downloaded PDF.
   Every color below is a literal hardcoded value, deliberately NOT a CSS
   custom property (var(--x)). html2canvas (which powers the PDF export) has
   unreliable support for custom properties — especially ones re-scoped on a
   non-:root element the way this used to work — and that was the cause of
   the report rendering blank in the exported PDF. Hardcoding removes that
   risk entirely, at the cost of duplicating some colors from :root above. */
/* Belt-and-suspenders: forcibly zero the CSS "gap" property on every element
   inside the report, however it's used, in case anything below still relies
   on it (macro-legend, exercise-card, report-section-num, etc.). Meaningful
   spacing that gap used to provide is replaced with plain margins instead,
   in the specific rules further down. */
.report *{gap:0 !important;}

.report{
  background:#ffffff;color:#16233a;border:1px solid #e1e7ef;border-radius:4px;
  padding:0;overflow:hidden;box-shadow:0 24px 60px -24px rgba(13,30,52,.35);
}
.report h2, .report h3, .report h4{color:#16233a !important;}
.report p{color:#5c6b82 !important;}
.report a, .report a.card-link{color:#0e7c98 !important;}
.report ul, .report li{color:#5c6b82;}
.report .hint{color:#5c6b82 !important;}

.report .tag{background:rgba(14,124,152,.1) !important;color:#0e7c98 !important;}

.report .card{background:#ffffff !important;border:1px solid #e1e7ef !important;}
.report .card:hover{border-color:#0a5f78 !important;}

.report .resource-box{
  background:#f3f6fa !important;border:1px solid #e1e7ef !important;border-left:3px solid #0e7c98 !important;
}
.report .resource-box h4{color:#16233a !important;}
.report .resource-box ul, .report .resource-box li{color:#5c6b82 !important;}

.report .callout{background:#ffffff !important;border:1px solid #e1e7ef !important;}
.report .callout p{color:#16233a !important;}
.report .callout.warn{border-color:#f0c869 !important;background:#fff8e6 !important;}
.report .callout.warn strong{color:#92400e !important;}
.report .callout.warn p{color:#5b4315 !important;}

.report .benefit-list li{color:#5c6b82 !important;border-bottom:1px solid #e1e7ef !important;}
.report .benefit-list li::before{color:#0e7c98 !important;}

.report .radio-pill.active{background:rgba(14,124,152,.08);}

.report .macro-box{background:#ffffff !important;border:1px solid #e1e7ef !important;}
.report .macro-box .num{color:#0e7c98 !important;}
.report .macro-box .lbl{color:#5c6b82 !important;}

.report .recipe-card, .report .exercise-card{background:#ffffff !important;border:1px solid #e1e7ef !important;}
.report .recipe-meta{color:#0e7c98 !important;}
.report .recipe-card ul, .report .recipe-card li{color:#5c6b82 !important;}

.report .day-block h3{color:#0e7c98 !important;border-bottom:1px solid #e1e7ef !important;}

/* Single-column block stacking for the supplement-picks and grocery-list
   card grids inside the report — no flexbox, no grid, no "gap" property.
   Both of those layout modes rendered content overlapping/garbled in the
   exported PDF (the older html2canvas bundled inside html2pdf.js doesn't
   handle them reliably); plain block flow with margin-bottom is about as
   basic as CSS layout gets and doesn't have that problem. Doesn't touch
   .grid/.grid-2 used elsewhere on the (never-captured) live site. */
.report .grid{display:block !important;}
.report .grid > *{margin-bottom:16px;}
.report .grid > *:last-child{margin-bottom:0;}

/* Same reasoning for the calorie/protein/carbs/fat numbers: inline-block
   with fixed pixel widths and margin instead of flex-with-gap. */
.report .macro-grid{display:block !important;margin:18px 0 28px;font-size:0;}
.report .macro-grid .macro-box{
  display:inline-block;width:170px;margin:0 12px 12px 0;font-size:1rem;vertical-align:top;
}

.report .month-table th, .report .month-table td{border-bottom:1px solid #e1e7ef !important;}
.report .month-table th{background:#f3f6fa !important;color:#0e7c98 !important;}
.report .month-table tr:nth-child(even) td{background:#f8fafc !important;}
.report .month-table td:first-child{color:#5c6b82 !important;}

/* Block layout instead of flex-with-gap for exercise cards inside the
   report (the icon floats left instead of being a flex sibling). Doesn't
   touch .exercise-card elsewhere on the (never-captured) live site. */
.report .exercise-card{display:block !important;}
.report .exercise-card::after{content:"";display:table;clear:both;}
.report .exercise-icon{
  float:left;background:#f3f6fa !important;border:1px solid #e1e7ef !important;color:#0e7c98 !important;margin-right:16px;
}
.report .exercise-body{overflow:hidden;}
.report .exercise-cues{color:#5c6b82 !important;}
.report .exercise-cues li::before{color:#0e7c98 !important;}

/* Macro legend (Protein/Carbs/Fat dots under the calorie bar): plain inline
   text instead of flex-with-gap. */
.report .macro-legend{display:block !important;font-size:0;margin-bottom:24px;}
.report .macro-legend span{display:inline-block;font-size:.8rem;margin-right:20px;}

/* The report now sits directly on the results screen as a normal, always-
   visible element (no display:none / off-canvas tricks) so html2canvas
   captures exactly what's on screen. It's centered and capped at 850px but
   otherwise fills whatever width its container (the results modal) gives
   it, and always renders left-aligned regardless of the centered text
   around it. */
#reportRoot.report{
  width:100%;
  max-width:850px;
  margin:28px auto 0;
  text-align:left;
}

/* Positions the "Generating your PDF..." overlay directly on top of the
   report box itself (not the whole viewport) so it only covers the report
   for the second or two html2canvas needs to capture it. */
.report-capture-wrap{position:relative;}
.report-generating-overlay{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(13,22,38,.94);z-index:20;border-radius:4px;
}
.report-generating-overlay.open{display:flex;}
.pdf-loading-box{text-align:center;color:#fff;}
.pdf-spinner{
  display:inline-block;width:34px;height:34px;margin-bottom:16px;
  border:3px solid rgba(255,255,255,.25);border-top-color:#1fc8ed;border-radius:50%;
  animation:pdf-spin .8s linear infinite;
}
@keyframes pdf-spin{to{transform:rotate(360deg);}}

.report-header{
  background:linear-gradient(135deg,#0d2440,#123655);
  border-bottom:1px solid #e1e7ef;padding:40px 40px 30px;
}
.report-header-left .eyebrow{margin-bottom:8px;color:#7fe0f7 !important;}
.report-header-left h2{margin-bottom:6px;color:#fff !important;}
.report-meta{color:#b9cadd;font-size:.85rem;}

/* Plain text flow — no flexbox, no grid, no "gap" property. Multi-column
   layouts (grid, then flex-with-gap) both rendered this stat strip with
   overlapping/garbled text in the exported PDF, which points at the older
   html2canvas bundled inside html2pdf.js mishandling those layout modes.
   Ordinary inline text wrapping is the most basic, best-supported rendering
   path there is, so that's what this uses instead. */
.report-summary{
  background:#fbfdff;border-bottom:1px solid #e1e7ef;
  padding:16px 40px;font-size:.92rem;line-height:2;color:#16233a;
}
.report-summary-item{margin-right:22px;white-space:nowrap;}
.report-summary-item .lbl{display:inline;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:#5c6b82;}
.report-summary-item .val{display:inline;font-weight:800;color:#16233a;}

.report-body{padding:8px 40px 30px;background:#ffffff;}
.report-section{padding:36px 0;border-top:1px solid #e1e7ef;page-break-before:always;break-before:page;}
.report-section:first-child{border-top:none;padding-top:10px;}
.report-section-num{
  display:block;font-size:.75rem;font-weight:800;letter-spacing:.08em;color:#0e7c98;
  margin-bottom:10px;
}
.report-section-icon{
  display:inline-block;width:26px;height:26px;padding:5px;vertical-align:middle;margin-right:8px;
  background:rgba(14,124,152,.1);border-radius:8px;color:#0e7c98;
}
.report-section-icon svg{width:100%;height:100%;}

/* One-page bullet summary. No page-break-after here on purpose — the
   physician disclaimer callout that immediately follows in the markup stays
   on this same first page with it. The forced break to page 2 comes from
   .report-section's page-break-before below (applied to the first detail
   section, planGlp1), which keeps the disclaimer from being stranded alone
   on its own near-empty page. */
.report-summary-page{padding:30px 0 10px;}
.summary-bullets{list-style:none;margin:0;padding:0;}
.summary-bullets li{
  background:#f3f6fa;border:1px solid #e1e7ef;border-left:3px solid #0e7c98;
  border-radius:4px;padding:14px 18px;margin-bottom:12px;font-size:.95rem;color:#16233a;
  page-break-inside:avoid;break-inside:avoid;
}
.summary-bullets li strong{
  display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#0e7c98;margin-bottom:5px;
}

/* Macro split bar graphic */
.macro-bar{display:flex;width:100%;height:14px;border-radius:8px;overflow:hidden;margin:6px 0 10px;border:1px solid #e1e7ef;}
.macro-bar-seg{height:100%;}
.macro-p{background:#0e7c98;}
.macro-c{background:#5fd0ea;}
.macro-f{background:#f5b942;}
.macro-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:.8rem;color:#5c6b82;margin-bottom:24px;}
.macro-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;}

/* Keep small atomic blocks from splitting awkwardly across a page boundary */
.report .card, .report .resource-box, .report .recipe-card, .report .exercise-card,
.report .macro-box, .report .callout, .report .day-block > h3{
  page-break-inside:avoid;break-inside:avoid;
}
.report .month-table tr{page-break-inside:avoid;break-inside:avoid;}

/* MEMBERSHIP / QUIZ MODALS */
.gate-card{
  max-width:560px;margin:0 auto;text-align:center;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:44px 40px;
}
.gate-card .eyebrow{display:block;margin-bottom:10px;}
.gate-card h2{margin-bottom:12px;}
.gate-card p{margin-bottom:22px;}

.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(6,12,22,.75);
  z-index:1000;align-items:flex-start;justify-content:center;padding:5vh 20px;overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal-panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  max-width:480px;width:100%;padding:40px 36px;position:relative;margin:auto;
}
.modal-panel.modal-panel-lg{max-width:860px;}
.modal-close{
  position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-dim);
  font-size:1.6rem;line-height:1;cursor:pointer;padding:6px;
}
.modal-close:hover{color:var(--text);}
.modal-step{display:none;}
.modal-step.active{display:block;}
.modal-panel .eyebrow{display:block;margin-bottom:8px;}
.modal-panel h2{margin-bottom:10px;}
.modal-field{margin-bottom:16px;}
.modal-field label{display:block;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.modal-error{display:none;color:#ff8080;font-size:.85rem;margin-top:12px;}
.hp-field{position:absolute;left:-5000px;}

@media (max-width:640px){
  .modal-panel{padding:30px 22px;}
}

/* NEWSLETTER */
.newsletter-banner{
  background:linear-gradient(135deg, var(--card), var(--bg-alt));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:40px;display:flex;gap:32px;flex-wrap:wrap;align-items:center;justify-content:space-between;
}
.newsletter-copy{flex:1 1 320px;}
.newsletter-copy h2{margin-bottom:10px;}
.newsletter-form-wrap{flex:1 1 320px;max-width:420px;}
.newsletter-form{display:flex;gap:10px;flex-wrap:wrap;}
.newsletter-form input[type=email],.newsletter-form input[type=text]{flex:1 1 200px;}
.newsletter-form button{flex:0 0 auto;}
.newsletter-note{font-size:.78rem;color:var(--text-dim);margin-top:10px;}

.footer-newsletter{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:32px 0;margin-bottom:32px;
}
.footer-newsletter h4{color:var(--text);margin-bottom:8px;}
.footer-newsletter .newsletter-form{max-width:520px;margin-top:14px;}