/* ==========================================================================
   RESOURCE PAGE TEMPLATE — shared design system for lead-magnet pages
   Reuse for every future resource: link this file + resource-template.js,
   swap the HTML content and the MailerLite form target.
   Palette/type matches valeriejones.ca (Cormorant Garamond + Montserrat,
   ink/cream/gold). Mobile-first: base rules are phone-width; larger
   screens are added via min-width media queries.
   ========================================================================== */

:root{
  --ink:          #1A1410;
  --espresso:     #2A1F18;
  --charcoal:     #3D3530;
  --warm-mid:     #6B5C52;
  --cream:        #F5F0E8;
  --ivory:        #FAF7F2;
  --linen:        #FEFCF9;
  --gold:         #B89460;
  --gold-lt:      #D4B98A;
  --gold-pale:    #E8D9C0;
  --line:         rgba(26,20,16,.10);
  --fill-bg:      var(--linen);
  --fill-border:  rgba(26,20,16,.22);
  --max:          640px;   /* editorial column width — keeps line length readable */
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--linen);
  color:var(--ink);
  font-family:'Montserrat', Helvetica, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 22px;
}

/* ---------- MASTHEAD (no nav — single wordmark, links home) ---------- */
.masthead{
  text-align:center;
  padding:32px 22px 0 22px;
}
.masthead a{
  display:inline-block;
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-size:15px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.masthead a:hover{ border-color:var(--gold); color:var(--espresso); }

/* ---------- SECTION RHYTHM ---------- */
.section{ padding:56px 0; }
.section + .section{ border-top:1px solid var(--line); }
.section--tight{ padding-top:40px; }

.eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-weight:400;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
}
.eyebrow::before{ content:''; width:18px; height:1px; background:var(--gold); flex:none; }

h1, h2{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  color:var(--ink);
  line-height:1.15;
}

h1{
  font-size:clamp(30px, 7.6vw, 44px);
  margin-bottom:16px;
}

h2{
  font-size:clamp(25px, 6vw, 33px);
  margin-bottom:18px;
}

.subhead{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(17px, 4.2vw, 21px);
  color:var(--warm-mid);
  margin-bottom:24px;
}

p{
  font-size:15.5px;
  font-weight:400;
  line-height:1.75;
  color:var(--charcoal);
  margin-bottom:14px;
  max-width:44ch;
}
p:last-child{ margin-bottom:0; }

.lede{ font-weight:600; color:var(--espresso); }

.pull{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500;
  font-style:italic;
  font-size:clamp(19px, 4.8vw, 23px);
  color:var(--espresso);
  line-height:1.4;
  border-left:2px solid var(--gold);
  padding-left:18px;
  margin:26px 0;
  max-width:40ch;
}

/* ---------- HERO ---------- */
.hero{ padding-top:20px; text-align:left; }
.hero p{ max-width:none; }

/* ---------- BENEFIT LIST (plain text list — no icons/cards) ---------- */
.benefit-list{
  list-style:none;
  margin:20px 0 24px 0;
}
.benefit-list li{
  font-size:15.5px;
  line-height:1.6;
  color:var(--charcoal);
  padding:11px 0 11px 26px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.benefit-list li:first-child{ border-top:1px solid var(--line); }
.benefit-list li::before{
  content:"";
  position:absolute;
  left:2px; top:20px;
  width:9px; height:1.5px;
  background:var(--gold);
}

/* ---------- CREDIBILITY (Treatment A — small B&W inset portrait) ---------- */
.credibility-layout{ display:flex; flex-direction:column; gap:20px; }
.credibility-photo{ width:132px; flex:none; }
.credibility-photo img{
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  border-radius:2px;
}
.credibility-photo .cap{
  font-family:'Montserrat', Helvetica, sans-serif;
  font-weight:500;
  font-size:10px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--warm-mid);
  margin-top:8px;
  text-align:center;
}
.credibility-text p{ max-width:none; }

/* ---------- FORM ---------- */
.form-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:2px;
  padding:26px 22px;
  margin:28px 0 14px 0;
}
.form-row{ margin-bottom:14px; }
.form-row:last-of-type{ margin-bottom:0; }
.form-label{
  display:block;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--warm-mid);
  margin-bottom:7px;
}
.form-input{
  width:100%;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:16px; /* 16px prevents iOS auto-zoom on focus */
  font-weight:400;
  color:var(--ink);
  background:var(--fill-bg);
  border:1px solid var(--fill-border);
  border-radius:2px;
  padding:13px 14px;
  min-height:48px;
  -webkit-appearance:none;
}
.form-input:focus{
  outline:none;
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(26,20,16,0.08);
}
.btn-submit{
  display:block;
  width:100%;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-weight:400;
  font-size:12.5px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--linen);
  background:var(--ink);
  border:none;
  border-radius:2px;
  padding:16px 20px;
  min-height:52px;
  cursor:pointer;
  margin-top:6px;
  transition:background .3s ease, letter-spacing .3s ease;
}
.btn-submit:hover{ background:var(--espresso); letter-spacing:3px; }
.btn-submit:disabled{ opacity:.6; cursor:default; }
.form-fineprint{
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:12px;
  color:var(--warm-mid);
  text-align:center;
  margin-top:12px;
  max-width:none;
}
.form-error{
  display:none;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:12.5px;
  color:#8a3a2f;
  margin-top:10px;
  max-width:none;
}
.form-error.is-visible{ display:block; }

.success-state{ display:none; text-align:center; padding:20px 0; }
.success-state.is-visible{ display:block; }
.success-state .eyebrow{ justify-content:center; }
.success-state .eyebrow::before{ display:none; }
.success-state h2{ margin-bottom:10px; }

/* jump link (Section 2 CTA — anchors back to hero form, not a 3rd form) */
.btn-jump{
  display:inline-block;
  font-family:'Montserrat', Helvetica, sans-serif;
  font-weight:400;
  font-size:12px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--linen);
  background:var(--ink);
  border-radius:2px;
  padding:15px 28px;
  min-height:48px;
  text-decoration:none;
  margin-top:8px;
  transition:background .3s ease, letter-spacing .3s ease;
}
.btn-jump:hover{ background:var(--espresso); letter-spacing:2.6px; }

/* ---------- FOOTER / SAFETY ---------- */
.site-footer{
  padding:36px 0 48px 0;
  text-align:center;
}
.safety-text{
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:12px;
  line-height:1.7;
  color:var(--warm-mid);
  max-width:none;
  margin-bottom:18px;
}
.footer-legal{
  font-family:'Montserrat', Helvetica, sans-serif;
  font-size:11px;
  letter-spacing:.5px;
  color:var(--warm-mid);
}
.footer-legal a{ color:var(--warm-mid); text-decoration:underline; }

/* ---------- TABLET / DESKTOP ---------- */
@media (min-width: 700px){
  .container{ padding:0 32px; }
  .section{ padding:76px 0; }
  .masthead{ padding-top:44px; }

  .credibility-layout{ flex-direction:row; gap:36px; align-items:flex-start; }
  .credibility-photo{ width:170px; }

  .form-card{ padding:34px 40px; }
}

@media (min-width: 960px){
  :root{ --max:680px; }
}