/* =========================================================
   The Lifestyle Studio — SALES PAGE STYLESHEET
   Shared design system for every product sales page
   (Ultimate Budget Tracker, ADHD Productivity System,
   Sinking Funds Tracker, Classroom Command, Ever After
   Planner, FitLog, Life Hub, Migraine Tracker, and any new
   page you add).

   HOW TO USE THIS FILE
   ---------------------
   This is the ONE place to make a styling change that should
   show up on every sales page at once — a colour, a font size,
   spacing, button style, etc.

   Each sales page's own HTML file keeps only:
     1) a small handful of page-specific inline style="" tweaks
        (e.g. a narrower hero preview box), and
     2) any truly one-off visual bits used by just that single
        page (e.g. Migraine Tracker's little calendar heatmap).

   Everything else — colours, type, buttons, section rhythm,
   feature blocks, FAQ accordion, footer, etc. — lives here.
   Edit this file, then ask for the pages to be rebuilt/republished
   and every page picks up the change automatically.
   ========================================================= */

:root{
  --green-1:#006600;
  --green-2:#00ff00;
  --blush:#F5E8E0;
  --blush-mid:#EDD4C6;
  --peach:#D8906A;
  --peach-dark:#B96E4A;
  --peach-light:#E8A888;
  --sage:#8C9E84;
  --ink:#1C1410;
  --ink-mid:#4A3C34;
  --ink-light:#8C7E76;
  --parchment:#FDFAF6;
  --white:#FFFFFF;
  --rule:rgba(28,20,16,0.09);
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost', sans-serif; font-weight:300;
  background:var(--white); color:var(--ink); line-height:1.7;
  overflow-x:hidden; font-size:16px;
}
h1,h2,h3{font-family:'Cormorant Garamond', serif; font-weight:400; color:var(--ink); text-wrap:balance;}
em{font-style:italic; color:var(--peach);}
a{color:inherit;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}
.tabular{font-variant-numeric:tabular-nums;}

.shell{max-width:760px; margin:0 auto; padding:0 2rem;}
.wide-shell{max-width:1040px; margin:0 auto; padding:0 2rem;}
.label{font-size:1.5rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--peach-dark); margin-bottom:0.9rem; display:block; text-align:center;}

.btn-primary{
  display:inline-flex; align-items:center; gap:0.6rem;
  background:var(--green-1); color:var(--white); text-decoration:none;
  font-family:'Jost', sans-serif; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.9rem 2.1rem; border-radius:1px; cursor:pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary .price{font-weight:500;}

.btn-primary:hover,
.btn-primary:focus-visible {
  border-color: var(--green-2);                 /* highlight colour */
  box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.25);  /* soft outer glow, matches the border */
  outline: none;
}


.text-link{
  font-size:0.85rem; color:var(--ink-mid); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:2px; display:inline-flex; align-items:center; gap:0.55rem;
  transition:color 0.2s, border-color 0.2s;
}
.text-link:hover{color:var(--peach-dark); border-color:var(--peach-dark);}
.play-dot{
  width:22px; height:22px; border-radius:50%; background:var(--white); border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--peach-dark);
}

/* ---------- mini header ---------- */
.page-header{
  border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,0.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.page-header-inner{
  max-width:1040px; margin:0 auto; padding:0.9rem 2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand-logo{text-decoration:none; display:flex; flex-direction:column; line-height:1;justify-content: center;
align-items: center;}
.brand-title{font-family:'Cormorant Garamond', serif; font-size:2.5rem; font-weight:500; letter-spacing:0.03em; color:var(--ink);}
.brand-subtitle{font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--peach); margin-top:0.25rem;}
.header-right{display:flex; align-items:center; gap:1.4rem;}

/* ---------- section rhythm ---------- */
section{padding:5rem 0;}
section.tight{padding:4rem 0;}

/* ---------- hero ---------- */
.hero-banner{
  background:var(--blush); text-align:center; padding:4.5rem 2rem 4rem; position:relative; overflow:hidden;
}

.hero-image {
  display: block;       /* Removes unwanted inline spacing below the image */
  width: 100%;          /* Shrinks to fit any screen width */
  max-width: 1100px;    /* Stops it getting oversized on wide monitors — adjust to taste */
  height: auto;         /* Keeps the original aspect ratio */
  margin: 0 auto 2.5rem;/* Centres it and spaces it from the headline */
  border-radius: 4px;
}

.hero-badge{
  display:inline-block; background:var(--peach-dark); color:var(--white); font-size:0.65rem;
  letter-spacing:0.08em; text-transform:uppercase; padding:0.25rem 0.6rem; border-radius:1px; margin-bottom:1.2rem;
}
/* Badge colour variants — add one of these classes alongside .hero-badge
   (e.g. class="hero-badge is-new") instead of a one-off inline colour. */
.hero-badge.is-new{background:var(--sage);}
.hero-badge.is-popular{background:var(--peach-dark);}
.hero-badge.is-essential{background:var(--ink-mid);}
.hero-eyebrow{
  font-size:1.3rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--peach);
  display:block; margin-bottom:1rem;
}
.hero-banner h1{
  font-size:clamp(2.4rem, 5vw, 3.9rem); font-weight:400; line-height:1.12; margin:0 auto 1.2rem; max-width:17ch;
}
.hero-sub{font-size:1.45rem; color:var(--ink-mid); max-width:620px; margin:0 auto 2.1rem; line-height:1.75;}
.hero-actions{display:flex; align-items:center; justify-content:center; gap:1.6rem; flex-wrap:wrap; margin-bottom:1.5rem;}
.hero-meta{font-size:0.78rem; color:var(--ink-light); display:flex; gap:1.3rem; justify-content:center; flex-wrap:wrap;}

/* preview card (built from the app's own metric-card language) */
.preview-shell{margin:2.8rem auto 0; max-width:460px;}
.thumb-mock{
  background:rgba(255,255,255,0.9); border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 14px 30px rgba(28,20,16,0.09); padding:1.1rem 1.2rem 1.3rem; text-align:left;
}
.thumb-mock-title{font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-light); margin-bottom:0.9rem;}
.stat-row{display:flex; gap:1.4rem; flex-wrap:wrap;}
.stat{display:flex; flex-direction:column; gap:2px;}
.stat .num{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.5rem; color:var(--ink);}
.stat .lbl{font-size:0.62rem; text-transform:uppercase; letter-spacing:0.07em; color:var(--ink-light);}
.mini-today{margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:0.5rem;}
.mini-today-row{display:flex; align-items:center; justify-content:space-between; font-size:0.8rem; color:var(--ink-mid);}
.mini-today-row .tag{font-size:0.62rem; padding:2px 7px; border-radius:20px; background:var(--blush); color:var(--peach-dark); font-weight:500;}
.mini-today-row .tag.done{background:#EDF2E9; color:#5C6B54;}
.mini-today-row .tag.warn{background:var(--blush-mid); color:var(--peach-dark); font-weight:600;}

/* ---------- trust strip (site component, reused) ---------- */
.trust-strip{background:var(--white); border-bottom:1px solid var(--rule); border-top:1px solid var(--rule);}
.trust-strip-inner{
  max-width:1000px; margin:auto auto; padding:0.5rem 2rem; display:flex; justify-content:center;
  flex-wrap:wrap; gap:2.4rem; text-align:center;
}
.trust-item{display:flex; flex-direction:column; gap:0.2rem;}
.trust-value{font-family:'Cormorant Garamond', serif; font-size:1.2rem; color:var(--ink);}
.trust-label{font-size:0.95rem; letter-spacing:0.1em; /**text-transform:uppercase;**/ color:var(--ink);}

/* ---------- problem / parchment section ---------- */
.parchment-section{background:var(--parchment); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}
h2.section-heading{font-size:clamp(1.7rem, 3.2vw, 2.3rem); font-weight:400; max-width:22ch; margin-left:auto; margin-right:auto; text-align:center;}
h2.section-heading.is-wide{max-width:34ch;}
h1.section-heading.is-wide{max-width:34ch;}
.lede{margin-top:0rem; margin-left:auto; margin-right:auto; margin-bottom: 0; font-size:1.5rem; color:var(--ink-mid); max-width:56ch; line-height:1.8; text-align:center;}
.body-text p{margin-top:1.05rem; margin-left:auto; margin-right:auto; max-width:58ch; color:var(--ink-mid); font-size:1.4rem; text-align:center;}
.callout{
  margin:2rem auto 0; background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--peach-dark);
  border-radius:0 4px 4px 0; padding:1.2rem 1.4rem; max-width:58ch; text-align:center;
}
.callout .label{margin-bottom:0.35rem; color:var(--peach-dark);}
.callout p{margin:0; font-size:1.3rem; color:var(--ink-mid); line-height:1.7;}

/* ---------- feature blocks ---------- */
.feature-block{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:2.6rem; align-items:start;
  padding:2.8rem 0; border-top:1px solid var(--rule);
}
.feature-block:first-of-type{border-top:none; padding-top:2.2rem;}
.feature-index{font-size:1.5rem; color:var(--ink); letter-spacing:0.04em; display:flex; align-items:center; gap:0.55rem; margin-bottom:0.6rem;}
.feature-index .pill{
  width:24px; height:24px; border-radius:6px; background:var(--blush); color:var(--peach-dark);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex:none;
}
.feature-block h3{font-family:'Jost', sans-serif; font-weight:500; font-size:1.18rem; color:var(--ink); letter-spacing:-0.01em;}
.feature-block ul{margin-top:0.9rem; list-style:none; display:flex; flex-direction:column; gap:0.6rem;}
.feature-block li{display:flex; gap:0.65rem; font-size:1.3rem; color:var(--ink-mid); line-height:1.55;}
.feature-block li::before{content:""; width:5px; height:5px; border-radius:1px; background:var(--peach-dark); margin-top:9px; flex:none;}

.mini-card{background:var(--white); border:1px solid var(--rule); border-radius:4px; box-shadow:0 12px 30px rgba(28,20,16,0.05); overflow:hidden;}
.mini-card-head{display:flex; align-items:center; gap:0.6rem; padding:0.75rem 1rem; border-bottom:1px solid var(--rule); background:var(--parchment);}
.mini-card-pill{width:22px; height:22px; border-radius:5px; background:var(--white); border:1px solid var(--rule); display:flex; align-items:center; justify-content:center; font-size:12px; flex:none;}
.mini-card-title{font-size:0.72rem; font-weight:500; letter-spacing:0.02em; color:var(--ink);}
.mini-card-body{padding:0.9rem 1rem 1.05rem;}
.mini-metrics{display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem;}
.mini-metric{background:var(--parchment); border-radius:4px; padding:0.6rem 0.7rem;}
.mini-metric .n{font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.3rem; color:var(--ink);}
.mini-metric .l{font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-light); margin-top:2px;}
.mini-row{display:flex; align-items:center; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid var(--rule); font-size:0.82rem; color:var(--ink-mid);}
.mini-row:last-child{border-bottom:none;}
.mini-tag{font-size:0.66rem; padding:2px 8px; border-radius:20px; background:var(--blush); color:var(--peach-dark); font-weight:500;}
.mini-tag.warn{background:var(--blush-mid); color:var(--peach-dark); font-weight:600;}
.mini-tag.good{background:#EDF2E9; color:#5C6B54;}
.mini-list{display:flex; flex-direction:column; gap:0.55rem;}
.mini-bar-row{display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; color:var(--ink-mid);}
.mini-bar-row .name{width:100px; flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mini-bar-track{flex:1; height:6px; border-radius:3px; background:var(--parchment); overflow:hidden;}
.mini-bar-fill{height:100%; border-radius:3px; background:var(--peach);}

/* ---------- differentiator (the site's own dark band, reused) ---------- */
.diff-band{background:var(--ink); color:var(--white); padding:5rem 2rem;}
.diff-band .label{color:var(--peach-light);}
.diff-band h2.section-heading{color:var(--white); font-style:italic; font-weight:300;}
.diff-band .lede{color:rgba(255,255,255,0.6);}
.diff-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:2.6rem;}
.diff-card{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:4px; padding:1.8rem 1.8rem 2rem; text-align:left;}
.diff-card .tag{font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--peach-light); margin-bottom:0.8rem; display:block;}
.diff-card h3{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.35rem; color:var(--white); margin-bottom:0.7rem;}
.diff-card p{font-size:0.92rem; line-height:1.7; color:rgba(255,255,255,0.72); margin:0;}
.diff-card .quote{margin-top:1rem; font-size:0.78rem; color:var(--peach-light); background:rgba(255,255,255,0.06); border-radius:3px; padding:0.6rem 0.8rem; line-height:1.5;}

/* ---------- privacy cards ---------- */
.privacy-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem;}
.privacy-card{
  border:1px solid var(--rule); border-radius:4px; padding:1.5rem 1.5rem 1.6rem; background:var(--white);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.privacy-card:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(28,20,16,0.06);}
.privacy-card.warn{border-color:rgba(185,110,74,0.4); background:var(--blush);}
.privacy-card .ic{
  width:32px; height:32px; border-radius:50%; background:var(--blush); color:var(--peach-dark);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.privacy-card.warn .ic{background:var(--white);}
.privacy-card h3{font-family:'Jost', sans-serif; font-weight:500; font-size:0.98rem; color:var(--ink); margin-bottom:0.5rem;}
.privacy-card p{font-size:0.86rem; color:var(--ink-mid); line-height:1.65; margin:0;}

/* ---------- video ---------- */
.video-frame{
  margin-top:2.2rem; aspect-ratio:16/9; border-radius:4px; border:1px solid var(--rule);
  background:var(--white); display:flex; align-items:center; justify-content:center; position:relative;
  overflow:hidden; box-shadow:0 12px 30px rgba(28,20,16,0.06); text-decoration:none;
}
.video-frame::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(var(--rule) 1px, transparent 1px); background-size:22px 22px;
}
.video-play{
  position:relative; width:60px; height:60px; border-radius:50%; background:var(--ink); color:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.video-caption{margin-top:0.9rem; font-size:0.8rem; color:var(--ink-light); text-align:center;}

/* ---------- included files ----------
   auto-fit so 2, 3 or more "what you get" cards all lay out
   nicely without needing a page-specific column-count override */
.included-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.2rem; margin-top:2.4rem;}
.included-card{border:1px solid var(--rule); border-radius:4px; padding:1.4rem 1.4rem 1.5rem; background:var(--parchment);}
.included-card .ext{font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--peach-dark); font-weight:600; margin-bottom:0.6rem;}
.included-card h3{font-family:'Jost', sans-serif; font-weight:500; font-size:0.95rem; color:var(--ink); margin-bottom:0.45rem;}
.included-card p{font-size:0.82rem; color:var(--ink-mid); line-height:1.6; margin:0;}

/* ---------- testimonial band ---------- */
.testimonials-band{background:var(--ink); padding:5rem 2rem; color:var(--white); text-align:center;}
.testimonials-band .label{color:var(--peach-light);}
.testimonials-band h2{font-family:'Cormorant Garamond', serif; font-weight:300; font-style:italic; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:2.4rem;}
.t-card{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:4px;
  padding:2rem; text-align:left; max-width:560px; margin:0 auto;
}
.t-stars{color:var(--peach-light); font-size:0.85rem; margin-bottom:0.8rem; letter-spacing:0.1em;}
.t-text{font-family:'Cormorant Garamond', serif; font-size:1.2rem; font-style:italic; color:rgba(255,255,255,0.88); line-height:1.65; margin-bottom:1.2rem;}
.t-author{font-size:0.78rem; color:rgba(255,255,255,0.45); letter-spacing:0.05em;}
.rating-line{margin-top:1.6rem; font-size:0.82rem; color:rgba(255,255,255,0.5);}

/* ---------- FAQ ---------- */
.faq-list{margin-top:2.4rem; border-top:1px solid var(--rule);}
.faq-item{border-bottom:1px solid var(--rule);}
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 0; font-family:'Jost', sans-serif; font-weight:400; font-size:1.32rem; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .plus{width:18px; height:18px; flex:none; position:relative;}
.faq-item .plus::before,.faq-item .plus::after{content:""; position:absolute; background:var(--peach-dark); border-radius:1px;}
.faq-item .plus::before{width:11px; height:1.5px; top:8px; left:3.5px;}
.faq-item .plus::after{width:1.5px; height:11px; top:3.5px; left:8px; transition:transform 0.18s ease;}
.faq-item[open] .plus::after{transform:rotate(90deg);}
.faq-item p{margin:0 0 1.3rem; max-width:60ch; font-size:1.2rem; color:var(--ink-mid); line-height:1.7;}

/* ---------- final CTA ---------- */
.final-cta{background:var(--white); text-align:center;}
.final-cta h2{font-size:clamp(1.9rem,4vw,2.6rem); max-width:18ch; margin:0 auto;}
.final-cta .lede{margin-left:auto; margin-right:auto; text-align:center;}
.final-price{margin-top:0rem; font-family:'Cormorant Garamond', serif; font-size:2.6rem; font-weight:600; color:var(--ink);}
.final-price span{font-size:1.2rem; color:var(--ink-light); font-weight:500; display:block; margin-top:0.4rem; letter-spacing:0.04em; text-transform:uppercase; font-family:'Jost', sans-serif;}

/* ---------- footer ---------- */
.site-footer{background:var(--parchment); border-top:1px solid var(--rule); padding:3.2rem 2rem 2.2rem; text-align:center;}
.site-footer .brand-title{font-size:1.4rem;}
.site-footer p{font-size:0.78rem; color:var(--ink-light); margin-top:0.5rem;}
.site-footer a.back{font-size:0.82rem; color:var(--ink-mid); text-decoration:none; border-bottom:1px solid var(--rule);}
.site-footer a.back:hover{color:var(--peach-dark); border-color:var(--peach-dark);}

@media (max-width:760px){
  .feature-block{grid-template-columns:1fr;}
  .diff-grid{grid-template-columns:1fr;}
  .privacy-grid{grid-template-columns:1fr;}
  .included-grid{grid-template-columns:1fr;}
  section{padding:3.4rem 0;}
  .diff-band{padding:3.4rem 1.5rem;}
  .testimonials-band{padding:3.4rem 1.5rem;}
  .hero-banner{padding:2rem 1rem 3rem;}
  .hero-image{margin-bottom:1.8rem;}
  .hero-sub{font-size:1.15rem;}
}

/* One-line CTA headings. .cta-heading is centred; .cta-heading2 inherits
   its alignment from the surrounding block. */
.cta-heading,
.cta-heading2 {
  white-space: nowrap;                     /* keep it on one line */
  max-width: none;                         /* cancel any heading width cap */
  font-size: clamp(1.4rem, 5.5vw, 2.4rem); /* shrinks on phones, full size on desktop */
}
.cta-heading{text-align:center;}

/* On very small phones, let long CTA headings wrap rather than be cut off */
@media (max-width:420px){
  .cta-heading,
  .cta-heading2{white-space:normal;}
}

/* ---------- brand logo mark (added) ---------- */
.brand-logo{flex-direction:row !important; align-items:center !important; gap:0.85rem;}
.brand-mark{width:56px; height:56px; object-fit:contain; flex:none; display:block;}
.brand-text{display:flex; flex-direction:column; line-height:1;}
@media (max-width:760px){ .brand-mark{width:42px; height:42px;} .brand-logo{gap:0.6rem;} }
@media (max-width:760px){
  .page-header-inner{flex-wrap:wrap; justify-content:center; padding:0.8rem 1rem; gap:0.8rem;}
  .page-header .brand-title{font-size:1.7rem;}
  .header-right{gap:1rem; flex-wrap:wrap; justify-content:center;}
  .header-right .btn-primary{padding:0.7rem 1.2rem; font-size:0.72rem;}
}

/** extra header search code**/

.header-search {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  max-width: 320px;
  width: 100%;
  background: var(--parchment);
}

.header-search input {
  flex: 1;
  padding: 0.55rem 1rem;
  border: none;
  outline: none;
  font-family: 'Jost', sans-serif;
  font-size: 1.0rem;
  color: var(--ink);
  background: transparent;
}

.header-search input::placeholder {
  color: var(--ink-light);
}

.header-search button {
  background: none;
  border: none;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  color: var(--ink-light);
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.header-search button:hover {
  color: var(--peach);
}