/* ==========================================================================
   The Prep Period Co.

   Rules this file follows, because the last version broke all of them:
   - Two surfaces only, white and cream. Dark is the footer. No stripe soup.
   - One primary action per screen. Everything else is a quiet text link.
   - Space does the separating, not borders, chips, badges and rules.
   ========================================================================== */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/lora-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/lora-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Lora";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lora-latin-700-normal.woff2) format("woff2")}

:root{
  --green:#2D6A4F;
  --green-d:#1B4332;
  --green-dd:#122E22;
  --pink:#E93D82;
  --pink-d:#C82A6B;
  --cream:#FAF6EE;
  --ink:#16251D;
  --body:#415048;
  --mute:#6E7F76;
  --paper:#FFFFFF;
  --line:#E4EAE6;
  --line-2:#D4DDD8;
  --serif:"Lora",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r:10px;
  --r-lg:14px;
  --maxw:1080px;
  --readw:660px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:24px}
.read{max-width:var(--readw); margin-left:0}
/* centred reading column, for the one page whose opening is centred */
.read.mid{margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute; left:-9999px; background:var(--green-d); color:#fff; padding:12px 18px; font-weight:600; text-decoration:none}
.skip:focus{left:0; top:0; z-index:99}

/* ---------- type ------------------------------------------------------- */
h1,h2,h3,h4{color:var(--ink); font-family:var(--serif); font-weight:600; margin:0}
h1{font-size:clamp(36px,5.2vw,58px); line-height:1.04; letter-spacing:-.022em; text-wrap:balance}
h2{font-size:clamp(25px,3.1vw,32px); line-height:1.15; letter-spacing:-.016em; margin-bottom:28px}
h3{font-size:20px; line-height:1.3; letter-spacing:-.008em}
p{margin:0 0 1em}
.lead{font-size:clamp(18.5px,2.1vw,21px); line-height:1.5; color:var(--body); margin-top:18px; text-wrap:pretty}
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); margin:0 0 18px;
}
.note{font-size:15.5px; color:var(--mute)}
.note a{color:var(--green)}
.fine{font-size:14px; color:var(--mute); margin:14px 0 0; text-align:center}

/* ---------- masthead --------------------------------------------------- */
.masthead{background:var(--paper); border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex; align-items:center; gap:30px; padding-block:20px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.brand .mark{width:30px; height:30px; flex:0 0 auto}
.brand .wordmark b{
  font-family:var(--serif); font-weight:600; font-size:18.5px;
  letter-spacing:-.012em; color:var(--ink);
}
.masthead nav{margin-left:auto; display:flex; gap:30px}
.masthead nav a{
  color:var(--body); text-decoration:none; font-size:15.5px; font-weight:500;
}
.masthead nav a:hover{color:var(--green-d)}
.masthead nav a[aria-current="page"]{color:var(--green-d); font-weight:600}

/* ---------- actions ---------------------------------------------------- */
.btn{
  white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
  background:var(--green); color:#fff; text-decoration:none;
  font-family:var(--sans); font-weight:600; font-size:16.5px; line-height:1.2;
  padding:15px 26px; border:0; border-radius:var(--r); cursor:pointer;
  transition:background .15s ease, transform .06s ease;
}
.btn:hover{background:var(--green-d)}
.btn:active{transform:translateY(1px)}
.quiet{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--green); font-weight:600; font-size:16px; text-decoration:none;
}
.quiet:hover{color:var(--green-d); text-decoration:underline; text-underline-offset:3px}
.quiet svg{transition:transform .15s ease}
.quiet:hover svg{transform:translateX(3px)}
.btn-row{display:flex; gap:26px; flex-wrap:wrap; align-items:center; margin-top:34px}
.after{margin:30px 0 0}

/* ---------- hero ------------------------------------------------------- */
.hero{padding-block:clamp(54px,7vw,96px) clamp(50px,6vw,84px)}
.hero .wrap{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(36px,6vw,72px); align-items:center;
}
.hero-art .fade{
  position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 2px 4px rgba(22,37,29,.04), 0 30px 60px -40px rgba(22,37,29,.5);
}
/* the shot is the top of a longer page: fade the cut rather than end it on a
   hard line that reads as a rendering fault */
.hero-art .fade::after{
  content:""; position:absolute; inset:auto 0 0 0; height:70px; pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.95));
}

/* ---------- bands ------------------------------------------------------ */
.band{padding-block:clamp(56px,7vw,92px)}
.band.tight{padding-block:clamp(48px,6vw,76px) 0}
.band.cream{background:var(--cream)}

/* ---------- cards ------------------------------------------------------ */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
.grid.three{grid-template-columns:repeat(3,1fr); gap:26px}

.item{display:flex; flex-direction:column}
.item .shot{
  display:block; aspect-ratio:5/2; overflow:hidden; padding:10px;
  border:1px solid var(--line-2); border-radius:var(--r); background:#fff;
  transition:border-color .16s ease;
}
/* contain, not cover: these crops are chosen to be read, and cover was
   slicing the first and last column off every table */
.item .shot img{width:100%; height:100%; object-fit:contain}
.item.free .shot{background:var(--cream)}
.item .pad{padding:18px 2px 0}
.item h3{margin-bottom:5px}
.item h3 a{color:var(--ink); text-decoration:none}
.item p{font-size:16px; color:var(--mute); margin:0 0 12px}
.item .go{
  font-size:15px; font-weight:600; color:var(--green);
  display:inline-flex; align-items:center; gap:7px;
}
.item .go svg{transition:transform .16s ease}
.item:hover h3 a{color:var(--green-d)}
.item:hover .shot{border-color:var(--green)}
.item:hover .go svg{transform:translateX(3px)}
.item.free h3 a::after{
  content:"Free"; display:inline-block; vertical-align:2px; margin-left:9px;
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; background:var(--pink);
  padding:3px 8px; border-radius:999px;
}

/* ---------- the bundle ------------------------------------------------- */
.feature{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,4vw,56px);
  align-items:center;
}
.feature .shot{
  display:block; border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; background:var(--cream);
}
.feature .pad{padding:0}
.feature h3{font-size:clamp(23px,2.6vw,28px); margin-bottom:10px}
.feature h3 a{color:var(--ink); text-decoration:none}
.feature p{font-size:17px; color:var(--body); margin:0 0 20px}
.feature .includes{list-style:none; margin:0 0 28px; padding:0; columns:2; column-gap:26px}
.feature .includes li{
  font-size:15.5px; color:var(--body); padding-left:21px; position:relative;
  margin-bottom:8px; break-inside:avoid;
}
.feature .includes li::before{
  content:""; position:absolute; left:1px; top:.5em; width:9px; height:5px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

/* ---------- about ------------------------------------------------------ */
/* A centred opening block. The rest of the site is left-aligned, so this
   reads as deliberate rather than inconsistent: it marks the one page that
   is a person speaking rather than a product list. */
.statement{max-width:620px; margin:0 auto; text-align:center; padding-block:clamp(10px,3vw,34px)}
.statement .eyebrow{margin-bottom:20px}
.statement .lead{margin-top:22px}

/* Sign-off. No photo slot: a live page should not carry a placeholder for an
   asset that does not exist. */
.band.signoff-band{padding-block:clamp(44px,5vw,64px)}
.signoff{
  max-width:420px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.signoff .mark{width:36px; height:36px; margin-bottom:18px}
.signoff b{font-family:var(--serif); font-size:23px; font-weight:600; color:var(--ink)}
.signoff span{font-size:15px; color:var(--mute)}
.signoff a{
  margin-top:12px; font-size:15.5px; font-weight:600; color:var(--green);
  text-decoration:none;
}
.signoff a:hover{text-decoration:underline; text-underline-offset:3px}

/* ---------- prose and lists -------------------------------------------- */
.prose h2{margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1em; padding-left:21px}
.prose li{margin-bottom:9px}
.prose a{color:var(--green-d); text-decoration:underline; text-underline-offset:2px}
.prose dl{margin:0}
.prose dt{font-weight:600; color:var(--ink); margin-top:18px}
.prose dd{margin:3px 0 0}

ol.steps{margin:0 0 20px; padding-left:21px; font-size:17px}
ol.steps li{margin-bottom:9px}
ul.inside{list-style:none; margin:0 0 26px; padding:0}
ul.inside li{position:relative; padding-left:24px; margin-bottom:12px; font-size:16.5px}
ul.inside li::before{
  content:""; position:absolute; left:4px; top:.66em;
  width:6px; height:6px; border-radius:50%; background:var(--green);
}

/* ---------- faq -------------------------------------------------------- */
.faq{max-width:740px; border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 44px 20px 0; position:relative;
  font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:14px; top:50%; width:9px; height:9px;
  margin-top:-7px; border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq .answer{padding:0 10px 22px 0; font-size:16.5px}
.faq .answer p{margin:0}

/* ---------- opt-in ----------------------------------------------------- */
.optin{margin-top:34px; max-width:440px}

/* MailerLite class names must stay exactly as MailerLite emits them:
   webforms.min.js binds to them. Only the styling here is ours. */
.ml-form-embedContainer{width:100%}
.ml-form-formContent{margin:0 0 12px}
.ml-field-group label{display:none}
.ml-form-fieldRow input[type=email]{
  width:100%; font-family:var(--sans); font-size:17px; line-height:1.4;
  padding:16px 16px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line-2); border-radius:var(--r); -webkit-appearance:none;
}
.ml-form-fieldRow input[type=email]::placeholder{color:#97A69E}
.ml-form-fieldRow input[type=email]:focus{
  outline:3px solid rgba(45,106,79,.2); outline-offset:1px; border-color:var(--green);
}
.ml-error input[type=email]{border-color:#C62828 !important}
.ml-error .label-description,.ml-error label:first-child{color:#C62828 !important}
.ml-form-embedSubmit{margin:0}
.ml-form-embedSubmit button.primary,.ml-form-embedSubmit button.loading{
  display:block; width:100%; text-align:center; font-family:var(--sans);
  background:var(--pink); color:#fff; font-weight:600; font-size:17.5px;
  padding:16px 20px; border-radius:var(--r); border:0; cursor:pointer;
  transition:background .15s ease, transform .06s ease;
}
.ml-form-embedSubmit button.primary:hover{background:var(--pink-d)}
.ml-form-embedSubmit button.primary:active{transform:translateY(1px)}
.ml-form-embedSubmitLoad{display:inline-block; width:20px; height:20px}
.ml-form-embedSubmitLoad:after{
  content:" "; display:block; width:12px; height:12px; margin:1px auto;
  border-radius:50%; border:3px solid #fff;
  border-color:#fff #fff #fff transparent; animation:ml-spin 1.1s linear infinite;
}
@keyframes ml-spin{to{transform:rotate(360deg)}}
.row-success{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r); padding:22px;
}
.row-success h4{font-family:var(--serif); font-size:20px; color:var(--green-d); margin:0 0 8px}
.row-success p{margin:0; font-size:16px; color:var(--body)}

/* ---------- footer ----------------------------------------------------- */
footer.site{background:var(--green-dd); color:#9DBCAC; padding-block:54px 32px; font-size:15.5px}
footer.site .cols{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; padding-bottom:36px}
footer.site h4{color:#fff; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{margin-bottom:10px}
footer.site a{color:#CFE3D7; text-decoration:none}
footer.site a:hover{color:#fff; text-decoration:underline}
footer.site .blurb{max-width:280px; font-size:15px; color:#8FAE9D; margin:14px 0 0}
footer.site .brand .wordmark b{color:#fff}
footer.site .legal{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; font-size:13.5px; color:#7FA390}

/* ---------- responsive ------------------------------------------------- */
@media (max-width:900px){
  .grid.three{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr; gap:28px}
  .feature .includes{columns:2}
}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr; gap:38px}
  .hero-art{max-width:460px}
}
@media (max-width:680px){
  body{font-size:16.5px}
  .wrap{padding-inline:20px}
  .masthead .wrap{flex-wrap:wrap; gap:8px; padding-block:16px 0}
  .masthead nav{order:3; width:100%; margin-left:0; gap:0; justify-content:space-between; border-top:1px solid var(--line)}
  .masthead nav a{flex:1; text-align:center; padding:13px 2px; font-size:15px}
  .grid,.grid.three{grid-template-columns:1fr; gap:30px}
  .feature .includes{columns:1}
  .btn-row{gap:20px}
  .btn-row .btn{width:100%}
  .optin{max-width:none}
  footer.site .cols{grid-template-columns:1fr 1fr; gap:28px}
  footer.site .cols > div:first-child{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}