/* =====================================================================
   What, Like It's Hard?  ·  Brand System
   Single source of truth for the funnel. Pulled from WLIH-brand-reference.html.
   Load this on every funnel page:  <link rel="stylesheet" href="assets/brand.css">
   Keep it human. No em dashes in reader-facing copy.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* grounds */
  --page:#0d0b0c; --ground:#181316; --surface:#221B1E;
  /* accents */
  --pink:#ED4B86; --pink-deep:#C8447A; --pink-tint:#FFF1F6;
  --sage:#7BAE9C; --sage-deep:#3E6B5A;
  /* text + neutrals */
  --cream:#F4EDE4; --body:#B6ABA3; --mauve:#B7A6AE; --lavender:#D9D4DE; --mute:#8A7A82; --dim:#6E5F66;
  /* lines */
  --frame:rgba(217,212,222,0.40); --card-line:rgba(138,122,130,0.35);
  /* type */
  --serif:'Instrument Serif',Georgia,serif; --sans:'Inter','Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--page);color:var(--cream);font-family:var(--sans);line-height:1.6;padding:28px 18px 90px}
.wrap{max-width:920px;margin:0 auto}
.narrow{max-width:700px}

/* ---- nav ---- */
.nav{display:flex;gap:18px;align-items:center;margin-bottom:24px;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;flex-wrap:wrap}
.nav a{color:var(--mauve);text-decoration:none}
.nav a:hover{color:var(--pink)}
.nav a.home{color:var(--sage)}
.nav .sep{color:var(--dim)}

/* ---- masthead ---- */
.masthead{border:1px solid var(--frame);border-radius:18px;background:var(--ground);padding:46px 48px 44px;position:relative;margin-bottom:36px}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:0.26em;text-transform:uppercase;color:var(--sage);margin-bottom:20px;display:flex;align-items:center;gap:9px}
h1{font-family:var(--serif);font-weight:400;font-size:58px;line-height:0.99;color:var(--cream)}
h1 .q{color:var(--pink)}
.rule{width:200px;height:5px;background:var(--pink);border-radius:3px;margin:16px 0 24px}
.lede{font-size:19px;color:var(--body);max-width:620px}
.principle{margin-top:24px;font-size:12px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--sage)}

/* ---- section labels ---- */
.section-tag{font-size:11px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--mauve);margin:44px 0 18px;display:flex;align-items:center;gap:12px}
.section-tag::after{content:"";flex:1;height:1px;background:var(--card-line)}
.section-label{font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--mauve);margin:36px 0 16px;display:flex;align-items:center;gap:12px}
.section-label::before,.section-label::after{content:"";flex:1;height:1px;background:var(--card-line)}

/* ---- type helpers ---- */
.serif{font-family:var(--serif);color:var(--cream)}
.h2{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.05;color:var(--cream);margin-bottom:10px}
.h2 .q,.h2 .accent{color:var(--pink)}
.pink{color:var(--pink)}
.sage{color:var(--sage)}
.muted{color:var(--body)}
.underline-word{text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:0.08em;text-underline-offset:0.1em}

/* ---- tiles (link grid) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
a.tile{display:block;text-decoration:none;background:var(--ground);border:1px solid var(--card-line);border-radius:14px;padding:24px;transition:border-color .2s ease,transform .15s ease}
a.tile:hover{border-color:rgba(237,75,134,0.6);transform:translateY(-2px)}
.tile .k{font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--sage);margin-bottom:8px}
.tile .t{font-family:var(--serif);font-size:25px;color:var(--cream);line-height:1.08;margin-bottom:7px}
.tile .d{font-size:14px;color:var(--body)}
.tile .more{margin-top:14px;font-size:12px;color:var(--pink);letter-spacing:0.04em}
.tile.alt:hover{border-color:rgba(123,174,156,0.6)}
.tile.alt .more{color:var(--sage)}

/* ---- generic card ---- */
.card{background:var(--ground);border:1px solid var(--card-line);border-radius:14px;padding:26px 28px;margin-bottom:16px}
.card.sage{border-color:rgba(123,174,156,0.45)}
.card.pinkline{border-color:rgba(237,75,134,0.5)}

/* ---- offer / price rows ---- */
.offer{display:flex;align-items:flex-start;gap:20px;background:var(--ground);border:1px solid var(--card-line);border-radius:14px;padding:24px 26px;margin-bottom:14px;transition:border-color .2s ease}
.offer:hover{border-color:rgba(123,174,156,0.5)}
.offer.hero{border-color:rgba(237,75,134,0.55);background:linear-gradient(180deg,rgba(237,75,134,0.06),rgba(24,19,22,0))}
.offer .price{flex:0 0 auto;font-family:var(--serif);font-size:40px;line-height:1;color:var(--pink);min-width:120px}
.offer .price .per{display:block;font-family:var(--sans);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.offer .info{flex:1;min-width:0}
.offer .info .k{font-size:11px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--sage);margin-bottom:6px}
.offer .info .t{font-family:var(--serif);font-size:26px;color:var(--cream);line-height:1.1;margin-bottom:8px}
.offer .info .d{font-size:15px;color:var(--body)}
@media(max-width:600px){.offer{flex-direction:column;gap:12px}.offer .price{min-width:0}}

/* ---- list ---- */
.ticks{list-style:none;margin-top:6px}
.ticks li{font-size:15px;color:var(--body);padding:8px 0 8px 26px;position:relative;border-top:1px solid rgba(138,122,130,0.18)}
.ticks li:first-child{border-top:none}
.ticks li::before{content:"";position:absolute;left:4px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--pink)}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:13px 26px;margin:5px 6px 5px 0;border-radius:999px;border:1px solid var(--pink);color:var(--page);background:var(--pink);cursor:pointer;text-decoration:none;transition:transform .15s ease,background .2s ease}
.btn:hover{transform:translateY(-1px);background:var(--pink-deep);border-color:var(--pink-deep)}
.btn.ghost{background:transparent;color:var(--sage);border-color:var(--sage)}
.btn.ghost:hover{background:rgba(123,174,156,0.12)}

/* ---- recommendation block ---- */
.recco{text-align:center;background:var(--ground);border:1px solid rgba(237,75,134,0.5);border-radius:16px;padding:28px 24px;margin:6px 0 16px}
.recco .lab{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--pink);margin-bottom:10px}
.recco .big{font-family:var(--serif);font-size:26px;color:var(--cream);margin-bottom:6px;line-height:1.1}
.recco .pinkline{width:120px;height:4px;background:var(--pink);border-radius:3px;margin:12px auto}
.recco .sub{color:var(--body);font-size:15px}

/* ---- callout / non-negotiable ---- */
.backup{background:rgba(237,75,134,0.07);border:1px solid var(--pink-deep);border-radius:16px;padding:22px 26px;margin-bottom:24px}
.backup .lab{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--pink);margin-bottom:9px}
.backup p{color:var(--cream);font-size:16px}

/* ---- FILL marker (for things Liliana drops in later) ---- */
.fill{color:var(--pink);font-style:italic;font-size:0.92em;background:rgba(237,75,134,0.08);border:1px dashed rgba(237,75,134,0.5);border-radius:5px;padding:1px 7px}

/* ---- big CTA ---- */
.cta{text-align:center;margin-top:38px;padding:36px 26px;background:var(--ground);border:1px solid var(--frame);border-radius:16px}
.cta .star{margin-bottom:14px}
.cta p{font-family:var(--serif);font-size:26px;color:var(--cream);margin-bottom:18px;line-height:1.15}

/* ---- footer ---- */
.foot{text-align:center;margin-top:50px;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim)}

/* ---- seat counter ---- */
.seats{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--sans);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--sage)}
.seats b{font-family:var(--serif);font-size:22px;letter-spacing:0;color:var(--cream)}

/* ---- peppered upsell popup ----
   Trauma informed by design: one at a time, no countdown, no fake urgency,
   once per session, easy to dismiss, and a permanent opt out. See upsell.js. */
.wlih-pop{position:fixed;right:18px;bottom:18px;z-index:9999;width:340px;max-width:calc(100vw - 28px);background:var(--ground);border:1px solid rgba(237,75,134,0.6);border-radius:14px;padding:18px 20px;box-shadow:0 18px 50px rgba(0,0,0,0.45);transform:translateY(150%);transition:transform .45s cubic-bezier(.2,.8,.2,1);font-family:var(--sans)}
.wlih-pop.show{transform:translateY(0)}
.wlih-pop .x{position:absolute;top:9px;right:11px;width:26px;height:26px;border:none;background:transparent;color:var(--mute);font-size:19px;line-height:1;cursor:pointer;border-radius:50%}
.wlih-pop .x:hover{color:var(--cream);background:rgba(255,255,255,0.06)}
.wlih-pop .pk{font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--sage);margin-bottom:6px}
.wlih-pop .pt{font-family:var(--serif);font-size:21px;color:var(--cream);line-height:1.1;margin-bottom:4px;padding-right:16px}
.wlih-pop .pd{font-size:13.5px;color:var(--body);margin-bottom:13px}
.wlih-pop .pbtn{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:9px 18px;border-radius:999px;background:var(--pink);color:var(--page);text-decoration:none}
.wlih-pop .pbtn:hover{background:var(--pink-deep)}
.wlih-pop .pno{margin-left:10px;font-size:11px;color:var(--mute);background:none;border:none;cursor:pointer;letter-spacing:0.04em}
.wlih-pop .pno:hover{color:var(--body)}
.wlih-pop .pnever{display:block;margin-top:11px;font-size:10.5px;color:var(--dim);background:none;border:none;cursor:pointer;letter-spacing:0.04em;padding:0}
.wlih-pop .pnever:hover{color:var(--mute);text-decoration:underline}

/* ---- global mobile (applies to every funnel page) ---- */
@media (max-width:600px){
  body{padding:18px 13px 70px}
  .masthead{padding:30px 22px 28px;border-radius:14px}
  h1{font-size:40px}
  .lede{font-size:16px}
  .h2{font-size:28px}
  .nav{gap:12px;font-size:11px}
  .card{padding:20px 18px}
  .recco{padding:24px 18px}
  .recco .big{font-size:22px}
  .offer .price{font-size:32px}
  .grid{grid-template-columns:1fr;gap:12px}
  .section-tag{margin:32px 0 14px}
}
@media (max-width:380px){ h1{font-size:34px} }

/* =====================================================================
   Candlelight: glow + gentle motion. Trauma-informed, low amplitude,
   honors prefers-reduced-motion. Added 2026-06-05.
   ===================================================================== */
@keyframes wlihTwinkle{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.13)}}
@keyframes wlihRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes wlihBreathe{0%,100%{opacity:.45}50%{opacity:.8}}

/* ambient candlelight behind the masthead/cover */
.masthead,.cover{position:relative;overflow:hidden}
.masthead::after,.cover::after{content:"";position:absolute;top:-45%;right:-15%;width:60%;height:170%;
  background:radial-gradient(circle, rgba(237,75,134,0.15), rgba(201,123,60,0.07) 45%, rgba(237,75,134,0) 72%);
  filter:blur(22px);pointer-events:none;z-index:0;animation:wlihBreathe 7.5s ease-in-out infinite}
.masthead>*,.cover>*{position:relative;z-index:1}
.masthead{animation:wlihRise .7s ease both}

/* slow twinkle on the star marks */
.star,.eyebrow svg,.k svg{transform-origin:center;animation:wlihTwinkle 4.6s ease-in-out infinite}

/* warm halo on the accent rules */
.rule,.srule,.pinkline,.recco .pinkline{box-shadow:0 0 16px rgba(237,75,134,0.45)}

/* interactive glow */
.btn{transition:transform .15s ease,background .2s ease,box-shadow .25s ease}
.btn:hover{box-shadow:0 8px 30px rgba(237,75,134,0.4)}
a.tile,.offer,.feature,.card,.move,.path,.q-card{transition:border-color .2s ease,transform .15s ease,box-shadow .3s ease}
a.tile:hover,.offer:hover,.feature:hover{box-shadow:0 12px 42px rgba(237,75,134,0.2)}
.big-btn{transition:transform .15s ease,background .2s ease,box-shadow .25s ease}
.big-btn:hover{box-shadow:0 12px 44px rgba(237,75,134,0.5)}

@media (prefers-reduced-motion: reduce){
  .masthead,.masthead::after,.cover::after,.star,.eyebrow svg,.k svg{animation:none}
}