/* ============================================================
   IBC Wicking Bed — the whole site's styling.

   This used to sit in a <style> block inside index.php. It lives here
   now so every page looks the same and the browser only downloads it
   once. Change a colour in :root below and it changes everywhere.
   ============================================================ */

/* ------------------------------------------------------------
   FONTS — served from our own site, not Google's.

   These used to load from fonts.googleapis.com, which meant the
   browser had to open connections to TWO other companies' servers —
   one for the stylesheet, another for the font files — before it was
   allowed to draw the headline. On a good connection that's a pause.
   On the patchy rural 4G a lot of our buyers are using, it's most of
   a second. Now the files arrive alongside this stylesheet, over a
   connection that's already open.

   It also means a visitor's browser no longer quietly reports their
   IP address to Google on every page view — which is what lets the
   Privacy page say there's nothing tracking you here and be telling
   the whole truth.

   BOTH are VARIABLE fonts: one file covers every weight, which is why
   there's a range below rather than a file per weight. Google serves
   the identical file for each weight you ask for, so five "different"
   Karla weights were really the same 24 KB five times over. Four files
   total, and most visitors download only the two latin ones (43 KB).

   The unicode-range lines are Google's own. They let the browser skip
   the latin-ext files unless a page actually uses an accented
   character — which this one doesn't, so nobody fetches them.

   font-display: swap means text appears immediately in a fallback and
   redraws when the real font lands. Never an invisible page.

   Bitter and Karla are both under the SIL Open Font License, which
   expressly permits hosting them like this.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/bitter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/bitter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --green-900:#26310f;
  --green-700:#3d4d1f;
  --olive-300:#a9c06a;
  --heading-olive:#5f7a2e;
  --terracotta:#c1592a;
  --terracotta-shadow:#8f3f1c;
  --terracotta-hover:#9a4420;
  --terracotta-tint:#c98a5a;
  --cream:#f4efe4;
  --sage-panel:#eef0e2;
  --card-white:#ffffff;
  --ink:#26310f;
  --body-text:#55534a;
  --muted:#8a8272;
  --muted-2:#a09880;
  --footer-bg:#1c2509;
  --footer-text:#8a9470;
  --border-light:#eadfca;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  font-family:'Karla',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color:var(--body-text);
  /* Keeps the footer at the bottom of the WINDOW on the short pages
     (terms, privacy, thank you) instead of floating halfway up with
     empty cream below it. */
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:var(--terracotta);text-decoration:none}
a:hover{color:var(--terracotta-hover)}
h1,h2,h3{font-family:'Bitter',serif;font-weight:800;color:var(--ink)}
button{font-family:'Karla',system-ui,sans-serif;cursor:pointer}

.eyebrow{font:800 12px/1 'Karla',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta)}

.placeholder-pill{
  display:inline-flex;align-self:flex-start;align-items:center;gap:8px;
  background:rgba(193,89,42,.1);border:1px dashed var(--terracotta);color:#a94a20;
  padding:6px 12px;border-radius:999px;font:700 10px/1 'Karla',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;
}

.btn-primary{
  background:var(--terracotta);color:#fff;border:none;padding:16px 32px;border-radius:10px;
  font:800 17px 'Karla',sans-serif;box-shadow:0 5px 0 var(--terracotta-shadow);
  display:inline-block;transition:transform .12s ease;
}
.btn-primary:hover{color:#fff}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--terracotta-shadow)}
.btn-primary.large{padding:18px 44px;font-size:19px;box-shadow:0 6px 0 var(--terracotta-shadow)}
.btn-primary.full{width:100%;text-align:center}

/* ---- Photo frames -------------------------------------------------
   Each of these is a fixed-shape box holding a real <img>. The pictures
   used to be CSS backgrounds, which meant screen readers and Google saw
   nothing at all where a photo was. Now the photo is in the HTML with a
   description, and these rules just crop it to fit its box — same look,
   with the picture actually part of the page.
   object-fit:cover is what does the cropping; without it the photos
   would stretch out of shape. */
.photo-frame{overflow:hidden;background:var(--sage-panel)}
.photo-frame img{width:100%;height:100%;object-fit:cover}

section.block{padding:70px 56px}
.wrap{max-width:1120px;margin:0 auto}
.section-head{text-align:center;margin-bottom:40px}
.section-head .eyebrow{margin-bottom:10px;display:block}
.section-head h2{font-size:36px;line-height:1.1}

/* hero */
.hero{background:var(--cream);padding:66px 56px 60px}
.hero-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:56px;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.hero h1 span{color:var(--heading-olive)}
.hero p.lede{font:400 19px/1.55 'Karla',sans-serif;color:var(--body-text);max-width:500px}
.hero-rating{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:wrap}
.hero-rating .stars{color:var(--terracotta);font:800 18px/1 'Karla',sans-serif}
.hero-rating span.label{font:600 15px 'Karla',sans-serif;color:var(--body-text)}

.price-card{
  background:var(--card-white);border-radius:18px;padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.14);
  border:1px solid var(--border-light);display:flex;flex-direction:column;gap:18px;align-items:center;
}
.price-card img{width:230px;height:auto;border-radius:5px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.price-card .price{text-align:center}
.price-card .price .amount{font:800 34px/1 'Bitter',serif;color:var(--ink)}
.price-card .price .currency{font:500 15px 'Karla',sans-serif;color:var(--muted)}
.price-card .desc{font:500 14px 'Karla',sans-serif;color:#6c6a5c;text-align:center}
.price-card .guarantee{font:500 12px 'Karla',sans-serif;color:var(--muted-2);text-align:center}

/* Stripe's badge. Scaled down proportionally (never stretched - their terms
   forbid altering the mark) and kept deliberately quiet, since it must not
   out-shout the Farmer Phil branding. width/height are on the <img> too, so
   it can't shift the layout as it loads. */
/* Stripe's badge, on the dark green CTA only. Scaled down proportionally
   (never stretched — their terms forbid altering the mark) and kept quiet,
   since it mustn't out-shout the Farmer Phil branding.

   The img. prefix is deliberate. A badge briefly sat in the price card too,
   where .price-card img sets width:230px for the eBook cover and beat a bare
   .stripe-badge class on specificity — it rendered at 230px, far too loud.
   Keeping the prefix means the rule still wins if a badge ever goes back
   there. */
img.stripe-badge{width:118px;height:auto;opacity:.85}
.final-cta .stripe-badge{margin:16px auto 0}

/* credibility bar */
.credibility{background:var(--green-900);padding:26px 56px;display:flex;justify-content:center;gap:56px;flex-wrap:wrap}
.credibility-item{display:flex;align-items:baseline;gap:10px}
.credibility-item .num{font:800 26px 'Bitter',serif;color:var(--olive-300)}
.credibility-item .label{font:600 14px 'Karla',sans-serif;color:#d8dcc4}

/* transformation */
.transformation{background:var(--cream)}
.transformation-grid{
  max-width:1120px;margin:0 auto;display:grid;
  grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;
}
.transformation-col{display:flex;flex-direction:column;gap:12px}
.transformation-label{
  font:700 13px/1 'Karla',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  min-height:13px;
}
.transformation-label.to{color:var(--terracotta)}
.transformation-photo{height:240px;border-radius:12px}
.transformation-arrow{
  width:56px;height:56px;border-radius:50%;background:var(--green-700);color:var(--olive-300);
  display:flex;align-items:center;justify-content:center;font:800 26px/1 'Bitter',serif;
  justify-self:center;
}

/* what's inside */
.whats-inside{background:var(--sage-panel)}
.whats-inside-grid{
  max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:center;
}
.whats-inside .eyebrow{color:var(--terracotta);margin-bottom:10px;display:block}
.whats-inside h2{font-size:34px;line-height:1.1;margin-bottom:26px}
.chapter-list{display:flex;flex-direction:column}
.chapter-row{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid #d7dcc2}
.chapter-row:last-child{border-bottom:none}
.chapter-num{font:800 15px 'Bitter',serif;color:#a08a4a;width:71px;flex:none}
.chapter-title{font:500 16px 'Karla',sans-serif;color:#33422a}
.bonus-chip{
  margin-top:20px;display:inline-flex;align-items:center;gap:10px;background:var(--green-700);
  color:var(--sage-panel);padding:12px 18px;border-radius:10px;font:600 14px 'Karla',sans-serif;
}
.bonus-chip span{color:var(--terracotta-tint);font-weight:800}
.whats-inside-cover{display:flex;justify-content:center}
.whats-inside-cover img{width:300px;height:auto;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.35)}

/* sample pages */
.samples{background:var(--cream)}
.jess{font-size:17px;font-weight:500;max-width:800px;margin:auto;padding:20px 0 10px 0;line-height:1.6}
.samples-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sample-card{
  aspect-ratio:3/4;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.12);
  background:var(--card-white);
}
/* Sample pages are pages, not scenery — show each one whole rather than
   cropping the middle out of it, on white so the spare space at the
   sides reads as paper rather than as a grey border. */
.sample-card img{object-fit:contain}

/* ---- Free sample offer ------------------------------------------- */
.sample-offer{background:var(--green-900)}
.sample-offer-inner{max-width:680px;margin:0 auto;text-align:center}
.sample-offer .eyebrow{color:var(--terracotta-tint);display:block;margin-bottom:10px}
.sample-offer h2{font-size:34px;line-height:1.1;color:#fbf8f1;margin-bottom:14px;text-wrap:balance}
.sample-offer p{font:400 17px/1.6 'Karla',sans-serif;color:#d8dcc4;margin-bottom:26px}

.sample-form{text-align:left}
.sample-label{display:block;font:700 13px 'Karla',sans-serif;color:#d8dcc4;margin-bottom:8px}
.sample-row{display:flex;gap:10px;flex-wrap:wrap}
.sample-row input[type=email]{
  flex:1 1 260px;min-width:0;border:1px solid var(--green-700);border-radius:10px;
  padding:15px 16px;font:500 16px 'Karla',sans-serif;background:#fbf8f1;color:var(--ink);
}
/* 16px on the input is deliberate: iOS zooms the whole page in when a
   focused field is smaller than that, and the zoom doesn't undo itself. */
.sample-row input[type=email]:focus{outline:3px solid var(--olive-300);outline-offset:2px}
.sample-row .btn-primary{flex:0 0 auto}
.sample-row .btn-primary:disabled{opacity:.6;cursor:default}

.sample-fine{font:400 13px/1.5 'Karla',sans-serif!important;color:var(--footer-text)!important;margin:14px 0 0!important}
.sample-fine a{color:var(--terracotta-tint);text-decoration:underline;text-underline-offset:2px}

.sample-msg{font:600 15px/1.5 'Karla',sans-serif!important;margin:14px 0 0!important;color:#d8dcc4!important}
.sample-msg.is-ok{color:var(--olive-300)!important}
.sample-msg.is-bad{color:#f0b89b!important}
.sample-msg a{color:#fbf8f1;text-decoration:underline;text-underline-offset:3px;font-weight:800}

/* The honeypot. Not display:none - some bots skip hidden fields, and some
   password managers do odd things with them. Pushed off-screen instead,
   which people never see but a form-filling script still finds. */
.sample-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:480px){
  .sample-row .btn-primary{width:100%}
}

/* testimonial wall */
.testimonial-wall{background:var(--sage-panel)}
.testimonial-wall h2{text-align:center;margin-bottom:36px;font-size:32px;line-height:1.1}
.testimonial-columns{max-width:1120px;margin:0 auto;columns:3;column-gap:20px}
.testimonial-card{break-inside:avoid;background:var(--card-white);border-radius:14px;padding:24px;margin-bottom:20px;box-shadow:0 10px 26px rgba(0,0,0,.06)}
.testimonial-card .stars{color:var(--terracotta);font:800 14px/1 'Karla',sans-serif;margin-bottom:10px;display:block}
.testimonial-card p{font:400 15px/1.55 'Karla',sans-serif;color:#3a3a2f;margin-bottom:14px}
.testimonial-card .name{font:700 14px 'Karla',sans-serif;color:var(--ink)}

/* about phil */
.about{background:var(--green-900);display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center;max-width:1120px;margin:0 auto}
/* The free-sample section and this one are both dark green, so with
   nothing between them they read as one enormous green slab. A gap lets
   the page's cream show through and separates them into two blocks.
   Written as an adjacent-sibling rule so the gap only exists where the
   two greens actually meet - move either section and it stops applying,
   rather than leaving a mystery space behind. */
.sample-offer + .about{margin-top:50px}
.about-photo{aspect-ratio:1/1;border-radius:16px}
.about .eyebrow{color:#c98a5a;margin-bottom:12px;display:block}
.about h2{font-size:32px;line-height:1.12;color:var(--cream);margin-bottom:16px}
.about p{font:400 17px/1.6 'Karla',sans-serif;color:#d8dcc4;max-width:560px;margin-bottom:24px}
.about-stats{display:flex;gap:44px}
.about-stats div div:first-child{font:800 40px/1 'Bitter',serif;color:var(--olive-300)}
.about-stats div div:last-child{font:600 14px 'Karla',sans-serif;color:#c4c9b2;margin-top:6px}


/* final cta */
.final-cta{background:var(--green-900);text-align:center}
.final-cta h2{font-size:38px;line-height:1.08;color:#fbf8f1;margin-bottom:14px;text-wrap:balance}
.final-cta p{font:400 18px/1.5 'Karla',sans-serif;color:#d8dcc4;margin-bottom:28px}

/* ---- Small pages: thank you, terms, privacy ---------------------- */
.page-narrow{max-width:760px;margin:0 auto;padding:80px 24px 90px}
.page-narrow h1{font-size:40px;line-height:1.08;margin:18px 0 20px;text-wrap:balance}
.page-narrow h2{font-size:24px;line-height:1.2;margin:40px 0 12px}
.page-narrow p,.page-narrow li{font:400 17px/1.65 'Karla',sans-serif;color:var(--body-text)}
.page-narrow p{margin-bottom:14px}
.page-narrow ul{margin:0 0 14px 22px}
.page-narrow li{margin-bottom:6px}
.page-narrow .lede{font-size:19px;line-height:1.6}
.page-narrow .updated{font:500 14px 'Karla',sans-serif;color:var(--muted-2);margin-top:48px}
.thanks-card{
  background:var(--card-white);border:1px solid var(--border-light);border-radius:16px;
  padding:28px;margin:26px 0;box-shadow:0 14px 34px rgba(0,0,0,.07);
}
.thanks-card p:last-child{margin-bottom:0}
/* One block per download. The note sits under its own button rather than
   beside it, so on a phone the button stays full width and thumb-sized
   instead of being squeezed by the text. */
.download-list{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.download-item{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.download-item .btn-primary{font-size:16px;padding:14px 26px}
.download-note{font:500 14px/1.5 'Karla',sans-serif;color:var(--muted)}
@media (max-width:480px){
  .download-item{align-items:stretch}
  .download-item .btn-primary{text-align:center}
}
.note{font:500 14px/1.6 'Karla',sans-serif;color:var(--muted);background:var(--sage-panel);
  border-radius:10px;padding:14px 16px;margin:18px 0}

/* Shown only when test_mode is on in config.php. Loud by design. */
.test-banner{
  background:#c1592a;color:#fff;text-align:center;
  font:700 14px/1.4 'Karla',system-ui,sans-serif;
  padding:10px 16px;letter-spacing:.02em;
}

footer.site-footer{
  margin-top:auto;   /* see the note on body — pushes the footer down */
  padding:28px 56px;background:var(--footer-bg);color:var(--footer-text);font:500 13px 'Karla',sans-serif;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
footer.site-footer a{color:var(--footer-text)}
footer.site-footer a:hover{color:var(--olive-300)}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}

/* Tap targets on touchscreens. The footer text is small by design, but a
   13px link is only about 15px tall — well under the ~44px a thumb can hit
   reliably, and there are five links now wrapping onto three rows.

   Padding gives each link a bigger hit area without changing how anything
   looks: the extra space is the footer's own background either way.

   Scoped to pointer:coarse so it applies to fingers, not mice. A mouse is
   accurate at 15px, and on desktop this would only make the footer taller
   for no benefit. Row gap drops to 0 because the padding now does that job. */
@media (pointer: coarse){
  .footer-links{gap:0 18px}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .hero{padding:44px 24px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .price-card{order:-1;max-width:340px;margin:0 auto}
  .hero h1{font-size:36px}
  section.block{padding:48px 24px}
  .credibility{padding:22px 24px;gap:28px}
  .transformation-grid{grid-template-columns:1fr}
  .transformation-arrow{transform:rotate(90deg)}
  .whats-inside-grid{grid-template-columns:1fr}
  .whats-inside-cover{order:-1}
  .samples{padding:0 24px 48px}
  .samples-grid{grid-template-columns:1fr 1fr}
  .testimonial-columns{columns:1}
  .about{grid-template-columns:1fr}
  .about-photo{max-width:220px}
  .final-cta{padding:56px 24px}
  .page-narrow{padding:56px 24px 70px}
  .page-narrow h1{font-size:32px}
}
@media (max-width:480px){
  .hero h1{font-size:30px}
  .samples-grid{grid-template-columns:1fr}
}