/* Instrument Serif is Floodlight's own accent face (A163/A164), kept by the brand: taste-skill-ignore default-font */
/* Life COO website — Direction 2, "Floodlight in motion" (A191, picked A194; no religious content, A195).
   Built from: Aceternity's Container Scroll Animation (the screen tilts flat as you scroll in) and Flip Words,
   Magic UI's Marquee + Scroll Based Velocity and Text Reveal, 60fps's CRED bill stack (cards that stack as you
   scroll), a clip-path colour wipe, and a magnetic cursor (cursify's idea, rebuilt). Light, loud, the app's
   own area colours as whole fields. No framework; every word is on the page without the scripts. */
:root {
  --paper: #EFEAE0; --paper-2: #F6F2E9; --paper-3: #E5DED0; --ink: #0F1416; --ink-2: #4A4F57; --brass: #7A5417;
  --gold: #C8A86B; --blue: #7FA5C9; --sage: #6FA88C; --clay: #CE8A68; --violet: #A48FC0; --teal: #4E9E9A; --rose: #CE94A4;
  --display: "Archivo", "Arial Narrow", sans-serif; --body: "Figtree", system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif;
  --gut: max(20px, env(safe-area-inset-left, 0px)); --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --max: 1280px; --gap-section: clamp(110px, 16vh, 200px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 400 18px/1.55 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-stretch: 70%; font-weight: 850; letter-spacing: -.03em; line-height: .9; text-wrap: balance; }
p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; z-index: 50; left: var(--gut); top: -80px; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 700; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
section { padding-left: var(--gut); padding-right: var(--gut-r); }
section > h2 { font-size: clamp(48px, 7vw, 120px); max-width: var(--max); margin: 0 auto; }

/* Fields: the app's area colours, flat, as whole surfaces. */
[data-field="gold"] { background: var(--gold); }
[data-field="blue"] { background: var(--blue); }
[data-field="sage"] { background: var(--sage); }
[data-field="clay"] { background: var(--clay); }
[data-field="violet"] { background: var(--violet); }
[data-field="teal"] { background: var(--teal); }
[data-field="paper"] { background: var(--paper-2); }
[data-field="ink"] { background: var(--ink); color: var(--paper); }

/* ---- nav: wordmark, four plain links, one action ---- */
.nav { position: fixed; z-index: 20; top: calc(env(safe-area-inset-top, 0px) + 16px); left: var(--gut); right: var(--gut-r); display: flex; align-items: center; gap: 28px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.nav[data-away] { transform: translateY(-140%); }
.nav a { text-decoration: none; }
.logo { font: 850 24px/1 var(--display); font-stretch: 70%; margin-right: auto; }
.logo b { color: var(--brass); }
.nav__links { display: flex; gap: 22px; font-weight: 600; font-size: 16px; }
.nav__links a { padding: 8px 2px; text-decoration: underline 2px transparent; text-underline-offset: 6px; transition: text-decoration-color .25s ease; }
.nav__links a:hover { text-decoration-color: currentColor; }
.cta-top { font: 700 16px var(--body); background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 999px; transition: transform .2s ease; }
.cta-top:hover { transform: translateY(-2px); }
.cta-top:active { transform: scale(.97); }
.blob { position: fixed; z-index: 30; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--ink); pointer-events: none; mix-blend-mode: difference; filter: invert(1); transition: width .25s, height .25s, margin .25s; opacity: 0; }
.blob.on { opacity: 1; }
.blob.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
@media (hover: none) { .blob { display: none; } }

/* ---- hero ---- */
.hero { padding: 20vh var(--gut-r) 0 var(--gut); text-align: center; }
.hero h1 { font-size: clamp(60px, 11vw, 200px); }
.flip { display: inline-block; position: relative; color: var(--brass); }
.flip span { display: inline-block; }
.hero__lede { margin: 26px auto 0; max-width: 40ch; font-size: clamp(18px, 1.6vw, 22px); }
.hero__act { margin: 34px auto 0; display: grid; justify-items: center; gap: 12px; }
.hero__note { font-size: 16px; color: var(--ink-2); }
/* The app's own slide-to-start knob, as the action. */
.knob { --x: 0px; position: relative; display: block; width: min(420px, 100%); height: 64px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; overflow: hidden; touch-action: pan-y; user-select: none; }
.knob__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--x) + 64px); background: var(--gold); border-radius: 999px; }
.knob__hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4em; padding-left: 52px; font-weight: 700; font-size: 16px; white-space: nowrap; }
.knob__thumb { position: absolute; top: 6px; left: 6px; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: var(--ink); display: grid; place-items: center; transform: translateX(var(--x)); }
.knob:not([data-drag]) .knob__thumb, .knob:not([data-drag]) .knob__fill { transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1); }
.knob:hover .knob__thumb { transform: translateX(calc(var(--x) + 6px)); }
.tilt { perspective: 1200px; margin: 8vh auto 0; max-width: var(--max); padding: 0 2vw; }
.tilt__frame { transform-origin: center top; transform: rotateX(28deg) scale(.88); border-radius: 26px; padding: 12px; background: var(--ink); }
.tilt__frame img { border-radius: 16px; width: 100%; }

/* ---- marquee ---- */
.marq { padding: var(--gap-section) 0 0; overflow: hidden; }
.row { display: flex; gap: 14px; width: max-content; will-change: transform; padding-left: var(--gut); }
.row + .row { margin-top: 14px; }
.pill { font: 700 clamp(20px, 2.4vw, 34px)/1 var(--body); padding: 20px 28px; border-radius: 999px; white-space: nowrap; }
.row .pill:nth-child(7n+1) { background: var(--gold); } .row .pill:nth-child(7n+2) { background: var(--blue); }
.row .pill:nth-child(7n+3) { background: var(--sage); } .row .pill:nth-child(7n+4) { background: var(--clay); }
.row .pill:nth-child(7n+5) { background: var(--violet); } .row .pill:nth-child(7n+6) { background: var(--teal); }
.row .pill:nth-child(7n) { background: var(--rose); }
.marq__note { margin: 22px auto 0; padding: 0 var(--gut-r) 0 var(--gut); max-width: var(--max); font-size: 16px; color: var(--ink-2); }

/* ---- statement, read word by word ---- */
.reveal { min-height: 100svh; display: grid; place-items: center; padding-top: 10vh; padding-bottom: 10vh; }
.reveal p { max-width: 22ch; font: 850 clamp(40px, 6vw, 104px)/1.02 var(--display); font-stretch: 70%; letter-spacing: -.02em; }
.reveal .wd { opacity: .14; transition: opacity .2s linear; }

/* ---- what it does: stacking fields ---- */
.stack { padding-top: 4vh; padding-bottom: var(--gap-section); }
.stack > h2 { margin-bottom: 6vh; }
.sc { position: sticky; top: calc(10vh + var(--i) * 26px); max-width: var(--max); margin: 0 auto 8vh; min-height: 74vh; border-radius: 36px; padding: clamp(28px, 4vw, 64px); display: grid; grid-template-columns: 1.2fr 1fr; gap: 4vw; align-items: center; overflow: hidden; transform-origin: center top; }
.sc h3 { font-size: clamp(44px, 6vw, 104px); }
.sc p { margin-top: 18px; font-size: 20px; max-width: 34ch; }
.ph { justify-self: center; width: min(320px, 70%); aspect-ratio: 390/844; border-radius: 46px; padding: 10px; background: var(--ink); transform: rotate(4deg); }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 36px; }
.sc--wide { grid-template-columns: 1fr; align-content: center; gap: 4vh; }
.sc__clip { justify-self: end; width: min(720px, 100%); }
.sc__clip video { width: 100%; border-radius: 22px; background: var(--blue); }
.sc__clip figcaption { margin-top: 10px; font-size: 16px; }

/* ---- the live thing: a goal and its plan, phases to scale ---- */
.plan { padding-top: var(--gap-section); padding-bottom: var(--gap-section); background: var(--paper-2); }
.wrap { max-width: var(--max); margin: 0 auto; }
.plan h2 { font-size: clamp(48px, 7vw, 120px); }
.plan__lede { margin-top: 22px; max-width: 60ch; font-size: 20px; }
.goals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.goal { font: 700 18px/1.2 var(--body); padding: 14px 22px; border-radius: 999px; border: 0; background: var(--paper-3); color: var(--ink); cursor: pointer; transition: transform .2s ease, background .25s ease; }
.goal:hover { transform: translateY(-2px); }
.goal:active { transform: scale(.97); }
.goal[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.planview { margin-top: 30px; display: grid; gap: 14px; }
.pv-parts { border-radius: 28px; padding: clamp(24px, 3vw, 40px); background: var(--paper); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr); gap: 4vw; }
.pv-parts h3 { font-size: clamp(34px, 3.6vw, 58px); }
.pv-parts .who { margin-top: 14px; color: var(--ink-2); font-size: 16px; }
.pv-parts ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 24px; align-content: start; }
.pv-parts li b { display: block; font-weight: 700; }
.pv-parts li span { display: block; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
/* The timeline is to scale (each bar's width is its weeks); the phases below get equal, readable columns. */
.pv-scale { display: flex; gap: 6px; }
.pv-scale > span { flex: var(--w) 1 0; min-width: 0; height: 56px; border-radius: 999px; display: flex; align-items: center; padding: 0 18px; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; }
.pv-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; align-items: start; }
.pv-phase { min-width: 0; border-radius: 28px; padding: 24px; display: grid; align-content: start; gap: 10px; }
.pv-scale > span:nth-child(4n+1), .pv-phase:nth-child(4n+1) { background: var(--gold); } .pv-scale > span:nth-child(4n+2), .pv-phase:nth-child(4n+2) { background: var(--blue); }
.pv-scale > span:nth-child(4n+3), .pv-phase:nth-child(4n+3) { background: var(--sage); } .pv-scale > span:nth-child(4n), .pv-phase:nth-child(4n) { background: var(--clay); }
.pv-phase h4 { margin: 0; font: 850 clamp(24px, 2.2vw, 34px)/.95 var(--display); font-stretch: 70%; letter-spacing: -.02em; }
.pv-phase .when { font-weight: 700; font-size: 16px; }
.pv-phase .ends { font-size: 16px; }
.pv-pr { display: grid; gap: 10px; margin-top: 6px; }
.pv-pr > li { background: rgba(255,255,255,.45); border-radius: 18px; padding: 14px 16px; font-size: 16px; line-height: 1.45; }
.pv-pr b { display: block; font-size: 18px; }
.pv-pr .how, .pv-pr .dose, .pv-pr .door { display: block; margin-top: 4px; }
.pv-pr .dose { font-weight: 700; }
.pv-more { background: none !important; padding: 0 !important; }
.pv-more summary { cursor: pointer; font-weight: 700; padding: 12px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); list-style: none; display: inline-block; }
.pv-more summary::-webkit-details-marker { display: none; }
.pv-more details[open] summary { margin-bottom: 10px; }
.plan__note { margin-top: 22px; font-size: 16px; color: var(--ink-2); }

/* ---- two lives ---- */
.lives { padding-top: var(--gap-section); }
.lives__pair { max-width: var(--max); margin: 6vh auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.life { border-radius: 36px; padding: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 48px) clamp(24px, 3vw, 40px); display: grid; justify-items: center; gap: 28px; overflow: hidden; }
.life img { width: min(300px, 76%); border-radius: 40px; border: 10px solid var(--ink); }
.life:nth-child(1) img { transform: rotate(-3deg); } .life:nth-child(2) img { transform: rotate(3deg); }
.life figcaption { justify-self: stretch; font-size: 18px; }
.life figcaption b { display: block; font: 850 clamp(30px, 3vw, 46px)/1 var(--display); font-stretch: 70%; letter-spacing: -.02em; margin-bottom: 6px; }
.lives__note { max-width: var(--max); margin: 18px auto 0; font-size: 16px; color: var(--ink-2); }

/* ---- honest: the dark field ---- */
.honest { margin-top: var(--gap-section); padding-top: var(--gap-section); padding-bottom: var(--gap-section); background: var(--ink); color: var(--paper); }
.honest__list { max-width: var(--max); margin: 7vh auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6vh 6vw; }
.honest__list dt { font: 850 clamp(30px, 3.4vw, 54px)/.95 var(--display); font-stretch: 70%; letter-spacing: -.02em; color: var(--gold); }
.honest__list dd { margin-top: 10px; font-size: 20px; max-width: 40ch; }

/* ---- numbers and the roadmap ---- */
.nums { padding-top: var(--gap-section); }
.nums__row { max-width: var(--max); margin: 0 auto 4vh; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; }
.n { padding: 12px 0 36px; }
.n b { display: block; font: 850 clamp(80px, 10vw, 170px)/.85 var(--display); font-stretch: 70%; font-variant-numeric: tabular-nums; }
.n span { display: block; margin-top: 12px; font-weight: 600; }
.road { max-width: var(--max); margin: 0 auto; display: grid; gap: 14px; }
.road__v { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 24px; align-items: center; }
.road__v p b { display: block; font: 850 clamp(26px, 2.4vw, 38px)/1 var(--display); font-stretch: 70%; letter-spacing: -.02em; }
.road__v p span { display: block; margin-top: 4px; font-weight: 600; font-size: 16px; }
.road__track i { display: block; height: 64px; border-radius: 999px; width: calc(var(--n) / 134 * 100%); overflow: hidden; transform-origin: left center; }
.road__built { display: block; height: 100%; width: calc(var(--b) / 134 * 100%); background: var(--brass); opacity: .55; }
.road__note { max-width: var(--max); margin: 16px auto 0; font-size: 16px; color: var(--ink-2); }

/* ---- pricing: three plans that step up ---- */
.pricing { padding-top: var(--gap-section); }
.pricing__row { max-width: var(--max); margin: 6vh auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.price { border-radius: 36px; padding: 34px; display: grid; gap: 16px; align-content: start; }
.price--mid { padding-top: 70px; }
.price--top { padding-top: 106px; }
.price h3 { font-size: clamp(34px, 3vw, 48px); }
.price__n { font: 850 clamp(72px, 7vw, 120px)/.85 var(--display); font-stretch: 70%; letter-spacing: -.03em; }
.price__n span { font: 600 18px var(--body); letter-spacing: 0; margin-left: 4px; }
.price ul { display: grid; gap: 8px; font-size: 18px; }
.price li::before { content: "— "; }
.price__go { justify-self: start; margin-top: 8px; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-weight: 700; transition: transform .2s ease; }
.price--top .price__go { background: var(--gold); color: var(--ink); }
.price__go:hover { transform: translateY(-2px); }
.price__go:active { transform: scale(.97); }
.pricing__note { max-width: var(--max); margin: 18px auto 0; font-size: 16px; color: var(--ink-2); }

/* ---- questions ---- */
.faq { padding-top: var(--gap-section); padding-bottom: var(--gap-section); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 4vw; max-width: calc(var(--max) + 40px); margin: 0 auto; align-items: start; }
.faq > h2 { margin: 0; position: sticky; top: 14vh; }
.faq__list { display: grid; gap: 8px; }
.faq details { background: var(--paper-2); border-radius: 22px; transition: background .25s ease; }
.faq details[open] { background: var(--gold); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font: 700 20px/1.3 var(--body); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.3em; line-height: .9; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; max-width: 60ch; }

/* ---- join: the colour wipe ---- */
.wipe { position: relative; height: 220vh; padding: 0; }
.wipe__stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.wipe__fill { position: absolute; inset: 0; background: var(--gold); clip-path: circle(4% at 50% 60%); }
.wipe__in { position: relative; text-align: center; padding: 0 var(--gut-r) 0 var(--gut); width: 100%; }
.wipe h2 { font-size: clamp(64px, 12vw, 220px); }
.join { margin: 34px auto 0; max-width: 640px; display: grid; gap: 18px; }
.join__row { display: flex; gap: 10px; flex-wrap: wrap; }
.join input[type="email"] { flex: 1 1 260px; min-width: 0; font: 600 18px var(--body); border: 0; border-radius: 999px; padding: 18px 22px; background: rgba(255,255,255,.7); color: var(--ink); }
.join__go { flex: 0 0 auto; font: 800 18px var(--body); border: 0; border-radius: 999px; padding: 18px 30px; background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .2s ease; }
.join__go:hover { transform: translateY(-2px); }
.join__go:active { transform: scale(.97); }
.join__go:disabled { opacity: .6; }
.join__who { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.join__who legend { width: 100%; font-weight: 700; margin-bottom: 8px; }
.join__who label { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.55); cursor: pointer; font-weight: 600; }
.join__who label:has(input:checked) { background: var(--ink); color: var(--paper); }
.join__who input { accent-color: var(--gold); width: 18px; height: 18px; margin: 0; }
.hp { position: absolute; left: -9999px; }
.join__msg { font-size: 16px; max-width: 52ch; margin: 0 auto; }
.join__msg[data-state="err"] { font-weight: 700; }
.join__msg[data-state="ok"] { font: 850 clamp(24px, 2.4vw, 32px)/1.1 var(--display); font-stretch: 70%; }

/* ---- footer: the name returns at full width ---- */
.foot { background: var(--ink); color: var(--paper); padding: 8vh var(--gut-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gut); overflow: hidden; }
.foot__name { font: 850 clamp(90px, 22vw, 380px)/.8 var(--display); font-stretch: 70%; letter-spacing: -.04em; color: var(--gold); white-space: nowrap; }
.foot__row { margin-top: 5vh; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 18px; font-size: 16px; }
.foot__row ul { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; font-size: 16px; }
.foot__row a { text-decoration: none; }
.foot__row a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- phone: its own composition ---- */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .sc { grid-template-columns: 1fr; min-height: auto; top: calc(8vh + var(--i) * 14px); gap: 5vh; }
  .ph { width: 58%; }
  .sc__clip { justify-self: stretch; }
  .pv-parts { grid-template-columns: 1fr; }
  .pv-scale > span { padding: 0 10px; font-size: 14px; height: 44px; }
  .lives__pair, .honest__list, .nums__row, .pricing__row, .faq { grid-template-columns: 1fr; }
  .faq > h2 { position: static; }
  .price--mid, .price--top { padding-top: 34px; }
  .road__v { grid-template-columns: 1fr; gap: 10px; }
  .join__go { flex: 1 1 100%; }
  .join__who label { text-align: left; }
  .road__track i { height: 40px; }
  .pv-scale .wk { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tilt__frame { transform: none; }
  .reveal .wd { opacity: 1; }
  .wipe { height: auto; } .wipe__stage { position: relative; height: auto; padding: 14vh 0; } .wipe__fill { clip-path: none; }
  .sc { position: relative; top: auto; }
  .ph, .life img { transform: none; }
  * { transition-duration: 0s !important; }
}