/* ============================================================
   After Thoughts — Conversion Landing Page (A/B variant)
   Mobile-first. Foundations come from colors_and_type.css.
   Flat saturated colour blocks, Poppins headlines, peach/ink
   pill CTAs, framed photo wells, hand-drawn marks as accents.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--at-paper);
  color: var(--at-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* leave room for the fixed mobile CTA so it never covers the footer */
@media (max-width: 879px) {
  body { padding-bottom: 78px; }
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 900px) { .wrap { padding: 0 40px; } }

/* === Buttons ============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  border: none;
  border-radius: var(--radius-pill);
  padding: 18px 30px;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn .arr {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-ink     { background: var(--at-ink);   color: var(--at-paper); }
.btn-ink:hover { background: #000; transform: translateY(-2px); }
.btn-peach   { background: var(--at-peach-warm); color: var(--at-ink); }
.btn-peach:hover { background: #f59683; transform: translateY(-2px); }
.btn-paper   { background: var(--at-paper); color: var(--at-ink); }
.btn-paper:hover { background: #fff; transform: translateY(-2px); }
.btn-lg { font-size: 19px; padding: 21px 36px; }
.btn-block { display: flex; width: 100%; }

/* === Sticky promo bar ===================================== */
.promo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--at-ink);
  color: var(--at-cream);
}
.promo-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 11px 20px;
  max-width: 1180px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.promo-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.promo-text .code {
  font-weight: 700;
  color: var(--lp-pop);
  letter-spacing: 0.08em;
}
.promo-cta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--lp-pop);
  color: var(--lp-on-pop);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
}
.promo .spark { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .wrap { padding-left: 28px; padding-right: 28px; }
  .promo-inner { gap: 8px; padding: 9px 16px; }
  .promo-text { font-size: 12px; display: block; text-align: center; line-height: 1.45; }
  .promo-text .spark { display: none; }
  .promo-trim { display: none; }
  .promo-cta { display: none; }
}

/* === Header ============================================== */
.hdr {
  background: var(--at-paper);
}
.hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.hdr-mark { height: 42px; width: auto; }
.hdr-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hdr-link .u { border-bottom: 2px solid var(--at-ink); padding-bottom: 2px; }

@media (max-width: 560px) {
  .hdr-inner { padding-top: 13px; padding-bottom: 13px; padding-left: 28px; padding-right: 28px; }
  .hdr-mark { height: 32px; }
  .hdr-link { font-size: 13px; }
}

/* === Shared section bits ================================= */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--at-ink);
}
.eyebrow .spark { width: 16px; height: 16px; }

h1, h2, h3 { margin: 0; }
.display {
  font-family: var(--font-headline);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
}
.emph {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* === Hero ================================================ */
.hero {
  background: var(--lp-block);
  color: var(--lp-on-block);
  position: relative;
  overflow: hidden;
}
.hero-flower {
  position: absolute;
  top: -120px; right: -130px;
  width: 360px; height: 360px;
  opacity: 0.16;
  pointer-events: none;
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 40px 0 48px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  background: var(--lp-badge-bg);
  border: 1.5px solid var(--lp-badge-border);
  color: var(--lp-on-block);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
}
.hero-badge .spark { width: 15px; height: 15px; }
.hero h1 {
  font-size: clamp(42px, 11vw, 72px);
  color: var(--lp-on-block);
  margin: 22px 0 0;
}
.hero h1 .emph { color: var(--lp-emph); }
.hero-sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--lp-on-block);
  margin: 22px 0 0;
  max-width: 30ch;
  opacity: 0.96;
}
.hero-cta-row { margin-top: 28px; }
.hero-micro {
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--lp-on-block);
  opacity: 0.9;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.hero-micro .sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.hero-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--at-plum);
  box-shadow: var(--shadow-lift);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

@media (min-width: 880px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 56px;
    padding: 72px 0 80px;
  }
  .hero-flower { width: 520px; height: 520px; top: -160px; right: -160px; }
  .hero h1 { font-size: clamp(58px, 5.6vw, 86px); }
  .hero-sub { font-size: 20px; }
  .hero-photo { aspect-ratio: 3 / 3.4; }
}

/* === Trust bar ========================================== */
.trust {
  background: var(--at-cream-soft);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.trust-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 0;
}
.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 18px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}
.trust-item .ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--at-ink); }
@media (min-width: 880px) {
  .trust-row { grid-template-columns: repeat(4, 1fr); }
  .trust-item { padding: 22px 12px; font-size: 15px; }
}

/* === Listicle =========================================== */
.list {
  padding: 64px 0 56px;
  background: var(--at-paper);
}
.list-head { max-width: 760px; }
.list-head h2 {
  font-family: var(--font-headline);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  font-size: clamp(32px, 6.5vw, 56px);
  margin: 18px 0 0;
}
.list-items {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.li:last-child { border-bottom: 1px solid rgba(0,0,0,0.1); }
.li-num {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 22px;
  color: var(--at-ink);
  flex: 0 0 auto;
}
.li-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 4px 0 0;
}
.li-body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg2);
  margin: 10px 0 0;
  max-width: 60ch;
}
@media (min-width: 880px) {
  .li { grid-template-columns: auto 1fr; gap: 28px; padding: 34px 0; }
  .li-num { width: 60px; height: 60px; font-size: 26px; }
  .li-title { font-size: 24px; }
  .li-body { font-size: 17px; }
}

/* Pull quote */
.pullquote {
  background: var(--lp-pop);
  color: var(--lp-on-pop);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  margin: 8px 0;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.pq-text { position: relative; z-index: 2; }
.pullquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(26px, 5.5vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 20ch;
}
.pullquote .who {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pullquote .squig { width: 56px; height: 12px; }
.pq-photo {
  position: relative;
  z-index: 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--at-plum);
}
.pq-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
@media (min-width: 880px) {
  .pullquote { padding: 44px 48px; grid-template-columns: 1.25fr 0.85fr; gap: 44px; }
  .pq-photo { aspect-ratio: 4 / 3.2; height: 100%; }
}

/* === Shop section ======================================= */
.shop {
  background: var(--at-cream-soft);
  scroll-margin-top: 120px;
  padding: 64px 0 72px;
}
.shop-head { text-align: center; max-width: 640px; margin: 0 auto; }
.shop-head h2 {
  font-family: var(--font-headline);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: clamp(32px, 6.5vw, 54px);
  line-height: 1.02;
  margin: 16px 0 0;
}
.discount {
  margin: 24px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 2px dashed var(--at-rust);
  border-radius: var(--radius-md);
  padding: 14px 22px;
  background: rgba(225,108,6,0.06);
}
.discount .code { font-family: var(--font-headline); font-weight: 700; color: var(--at-rust); letter-spacing: 0.04em; }
.discount .lbl { font-size: 14.5px; font-weight: 500; }

.grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--at-paper);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--at-paper);
  color: var(--at-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
}
.card-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.card-name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.card-price { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.card-price .now { font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--at-rust); }
.card-price .was { font-size: 14px; color: var(--fg3); text-decoration: line-through; }
.card-price .save { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--lp-on-pop); background: var(--lp-pop); padding: 2px 7px; border-radius: var(--radius-sm); text-transform: uppercase; }
.card .btn { margin-top: 14px; }

.set-line {
  text-align: center;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 500;
}
.set-line a { border-bottom: 2px solid var(--at-rust); color: var(--at-rust); font-weight: 600; padding-bottom: 1px; }

@media (min-width: 880px) {
  .grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .card-name { font-size: 19px; }
  .card-set { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .card-set .card-img { aspect-ratio: auto; flex: 0 0 48%; }
  .card-set .card-body { justify-content: center; padding: 36px 44px; }
  .card-set .card-name { font-size: 27px; }
  .card-set .card-price .now { font-size: 22px; }
  .card-set .btn { align-self: flex-start; padding-left: 26px; padding-right: 22px; }
}

@media (max-width: 560px) {
  .hero-grid { padding-left: 28px; padding-right: 28px; }
  .hero-cta-row .btn { width: 100%; font-size: 17px; padding: 18px 24px; }
  .cta-trim { display: none; }
  .grid { grid-template-columns: 1fr; gap: 18px; }
  .card-img { aspect-ratio: 4 / 3; }
}

/* === Final CTA ========================================== */
.final {
  background: var(--lp-block);
  color: var(--lp-on-block);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-flower {
  position: absolute;
  bottom: -140px; left: -120px;
  width: 360px; height: 360px;
  opacity: 0.15;
  pointer-events: none;
}
.final-inner {
  position: relative;
  z-index: 2;
  padding: 64px 0 72px;
  max-width: 680px;
  margin: 0 auto;
}
.final h2 {
  font-family: var(--font-headline);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: clamp(32px, 7vw, 56px);
  line-height: 1.02;
  color: var(--lp-on-block);
}
.final p {
  font-size: 18px;
  line-height: 1.5;
  color: var(--lp-on-block);
  opacity: 0.96;
  margin: 20px auto 0;
  max-width: 36ch;
}
.final .btn { margin-top: 30px; }
.final .code { font-weight: 700; color: var(--lp-pop); }

/* === Footer ============================================= */
.foot {
  background: var(--at-plum-deep);
  color: rgba(250,247,242,1);
  padding: 36px 0;
  text-align: center;
}
.foot img { height: 44px; margin: 0 auto 18px; opacity: 1; }
.foot .small { font-size: 13px; line-height: 1.6; color: rgba(250,247,242,1); }
.foot .small a { border-bottom: 1px solid rgba(250,247,242,0.55); }

/* mobile sticky CTA bottom (extra conversion aid) */
.mobile-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 55;
  background: var(--at-paper);
  border-top: 1px solid rgba(0,0,0,0.1);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: block;
}
.mobile-cta .btn { width: 100%; }
@media (min-width: 880px) { .mobile-cta { display: none; } }

/* ============================================================
   TWEAKABLE THEME — driven by body classes from the Tweaks panel.
   Defaults below reproduce the shipped design (Calm / Bold / Roomy);
   the panel swaps these to reshape the page's whole feel.
   ============================================================ */

/* --- Mood: colourway ------------------------------------- */
:root {
  --lp-block: var(--at-lavender);          /* hero + final colour block */
  --lp-on-block: var(--at-paper);          /* text/marks on that block  */
  --lp-emph: var(--at-citrus);             /* italic accent word        */
  --lp-pop: var(--at-citrus);              /* pull-quote, save tag, code */
  --lp-on-pop: var(--at-ink);              /* text on the pop colour     */
  --lp-badge-bg: rgba(250,247,242,0.16);
  --lp-badge-border: rgba(250,247,242,0.5);
}
body.mood-warm {
  --lp-block: var(--at-terracotta);
  --lp-on-block: var(--at-paper);
  --lp-emph: var(--at-peach-warm);
  --lp-pop: var(--at-peach-warm);
  --lp-on-pop: var(--at-ink);
  --lp-badge-bg: rgba(250,247,242,0.18);
  --lp-badge-border: rgba(250,247,242,0.55);
}
body.mood-bright {
  --lp-block: var(--at-citrus);
  --lp-on-block: var(--at-ink);
  --lp-emph: var(--at-lavender);
  --lp-pop: var(--at-lavender);
  --lp-on-pop: var(--at-paper);
  --lp-badge-bg: rgba(31,31,31,0.07);
  --lp-badge-border: rgba(31,31,31,0.34);
}

/* --- Type voice: headline personality -------------------- */
body.head-editorial .display { font-weight: 600; letter-spacing: -0.02em; }
body.head-editorial .list-head h2,
body.head-editorial .shop-head h2,
body.head-editorial .final h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
/* serif sets a touch smaller — give it back a little size */
body.head-editorial .list-head h2 { font-size: clamp(40px, 7.2vw, 64px); }
body.head-editorial .shop-head h2 { font-size: clamp(40px, 7.2vw, 62px); }
body.head-editorial .final h2 { font-size: clamp(40px, 7.6vw, 64px); }

/* --- Energy: vertical rhythm / density ------------------- */
body.energy-compact .hero-grid { padding: 28px 0 34px; }
body.energy-compact .list { padding: 42px 0 36px; }
body.energy-compact .list-items { margin-top: 30px; }
body.energy-compact .li { padding: 18px 0; }
body.energy-compact .shop { padding: 42px 0 50px; }
body.energy-compact .grid { margin-top: 28px; }
body.energy-compact .final-inner { padding: 46px 0 52px; }
@media (min-width: 880px) {
  body.energy-compact .hero-grid { padding: 48px 0 52px; }
  body.energy-compact .li { padding: 24px 0; }
  body.energy-compact .list { padding: 48px 0 44px; }
  body.energy-compact .shop { padding: 48px 0 56px; }
}