/* ============================================================
   Discover Your Point of Greatest Contraction
   Kyle Mercer brand system (cream / teal / gold)
   Tokens reused from the shipped Founder Clarity Score.
   Design dials: variance 5, motion 3.5, density 2.5 (taste-skill)
   ============================================================ */
:root{
  --cream:#F1F0EA; --cream-dark:#E7E5DC; --cream-darker:#D8D6CE;
  --teal-900:#1F2628; --teal-800:#2C4A5E; --teal-700:#30484F;
  --teal-500:#558291; --teal-400:#6A9BAA; --teal-300:#8BB5C1;
  --cyan:#51C2C8; --cyan-dark:#3BA8AE;
  --gold:#FFC124; --gold-hover:#E5AC1A; --gold-lighter:#FFF0CC;
  --white:#FFFFFF;

  --ink:var(--teal-800); --muted:var(--teal-500);
  --font-head:'Fjalla One','Poppins',system-ui,sans-serif;
  --font-body:'Poppins','Libre Franklin',system-ui,sans-serif;

  --radius:7px; --radius-lg:14px; --radius-xl:20px;
  --dur-fast:160ms; --dur:340ms; --dur-slow:620ms;
  --ease:cubic-bezier(0.16,1,0.3,1);

  --shadow-sm:0 1px 2px rgba(31,38,40,.06);
  --shadow-md:0 8px 26px rgba(31,38,40,.10);
  --shadow-lg:0 22px 60px rgba(31,38,40,.16);
  --content:660px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.62;
  font-weight:400;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--teal-900)}
h1,h2,h3,.head{font-family:var(--font-head);font-weight:400;letter-spacing:.2px;line-height:1.12;color:var(--teal-900)}
em{font-style:normal;color:var(--cyan-dark)}
strong{font-weight:600;color:var(--teal-900)}

/* ---------- Progress line ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:50}
.progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hover));transition:width var(--dur) var(--ease)}

/* ---------- Brand mark ---------- */
.brandbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;padding:22px 0 0;z-index:40;pointer-events:none}
.brandbar .mk{font-family:var(--font-head);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--teal-500);opacity:.8}

/* ---------- Stage ---------- */
.stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:96px 24px 72px;
}
.frame{width:100%;max-width:var(--content);position:relative}

/* ---------- Screens (fade) ---------- */
.screen{display:none;animation:none}
.screen.active{display:block}
.screen.enter{animation:screenIn var(--dur-slow) var(--ease) both}
@keyframes screenIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Typography blocks ---------- */
.eyebrow{
  font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:600;
  color:var(--cyan-dark);margin-bottom:16px;text-align:center;
}
.q-title{
  font-size:clamp(30px,5.2vw,46px);
  text-align:center;line-height:1.1;margin-bottom:18px;
  max-width:20ch;margin-left:auto;margin-right:auto;
}
.q-title.left{text-align:left;margin-left:0}
.q-help{
  font-size:clamp(16px,2vw,18px);color:var(--teal-700);
  text-align:center;max-width:52ch;margin:0 auto 30px;
}
.q-help.left{text-align:left;margin-left:0}
.q-meta{font-size:13.5px;color:var(--muted);text-align:center;margin-top:22px}
.q-lede{font-size:clamp(16px,2vw,18px);color:var(--teal-700);text-align:center;max-width:54ch;margin:0 auto 22px}

/* ---------- Fields ---------- */
.field-label{font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--teal-500);margin:0 0 8px}
textarea.field,input.field{
  width:100%;font-family:var(--font-body);font-size:16.5px;color:var(--teal-900);
  background:var(--white);border:1px solid var(--cream-darker);border-radius:var(--radius-lg);
  padding:16px 18px;resize:none;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
  line-height:1.55;
}
textarea.field{min-height:130px}
input.field{min-height:auto}
textarea.field::placeholder,input.field::placeholder{color:var(--teal-300)}
textarea.field:focus,input.field:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(81,194,200,.15)}
.field-note{font-size:13.5px;color:var(--muted);margin-top:10px;text-align:center}
.field-note.left{text-align:left}
.pair{display:grid;gap:22px;margin-bottom:26px}

/* ---------- Options (radio cards) ---------- */
.options{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.option{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--white);border:1px solid var(--cream-darker);border-radius:var(--radius-lg);
  padding:16px 18px;font-family:var(--font-body);font-size:16.5px;color:var(--teal-800);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.option:hover{border-color:var(--teal-300);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.option:active{transform:translateY(0)}
.option__dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--teal-300);transition:all var(--dur-fast) var(--ease);position:relative}
.option.selected{border-color:var(--cyan-dark);background:#F1FAFA}
.option.selected .option__dot{border-color:var(--cyan-dark);background:var(--cyan-dark);box-shadow:inset 0 0 0 3px var(--white)}
.option__label{flex:1}

/* ---------- Buttons ---------- */
.actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:.2px;text-decoration:none;
  border:none;border-radius:var(--radius);padding:15px 30px;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.btn--gold{background:var(--gold);color:var(--teal-900);box-shadow:var(--shadow-sm)}
.btn--gold:hover{background:var(--gold-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--gold:active{transform:translateY(0)}
.btn--wide{width:100%;max-width:420px}
.btn--ghost{background:transparent;color:var(--teal-500);font-weight:500;box-shadow:none;padding:10px 18px;font-size:14.5px}
.btn--ghost:hover{color:var(--teal-800)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn__arrow{transition:transform var(--dur-fast) var(--ease)}
.btn--gold:hover .btn__arrow{transform:translateX(4px)}
.backrow{display:flex;justify-content:center;margin-top:16px}

/* ---------- Intro extras ---------- */
.intro-marks{display:flex;justify-content:center;gap:34px;margin:30px 0 34px;flex-wrap:wrap}
.intro-mark{text-align:center;max-width:150px}
.intro-mark .im-h{font-family:var(--font-head);font-size:15px;color:var(--teal-800);margin-bottom:4px}
.intro-mark .im-p{font-size:12.5px;color:var(--muted);line-height:1.4}

/* ---------- Descent thread ---------- */
.thread{margin:0 0 24px}
.thread__row{position:relative;padding-left:30px;margin-bottom:14px;animation:threadIn var(--dur-slow) var(--ease) both}
.thread__row::before{content:"";position:absolute;left:8px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(81,194,200,.18)}
.thread__row::after{content:"";position:absolute;left:13px;top:20px;bottom:-14px;width:2px;background:var(--cream-darker)}
.thread__row:last-child::after{display:none}
.thread__k{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.thread__a{font-size:16px;color:var(--teal-900);background:var(--white);border:1px solid var(--cream-darker);border-radius:10px;padding:11px 15px}
@keyframes threadIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* ---------- Reveal block ---------- */
.reveal{
  background:linear-gradient(155deg,var(--teal-800),var(--teal-900));
  color:#EAF3F4;border-radius:var(--radius-lg);padding:24px 26px;margin:6px 0 28px;
  box-shadow:var(--shadow-md);animation:revealIn var(--dur-slow) var(--ease) both;
}
.reveal__k{font-family:var(--font-head);color:var(--gold);font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.reveal p{font-size:16px;color:#DCE8EA;line-height:1.6}
.reveal p + p{margin-top:12px}
@keyframes revealIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ---------- Report ---------- */
.report{margin:6px 0 26px}
.report__intro{font-size:16px;color:var(--teal-700);margin-bottom:22px;text-align:center;max-width:52ch;margin-left:auto;margin-right:auto}
.rep-sec{
  background:var(--white);border:1px solid var(--cream-darker);border-left:4px solid var(--cream-darker);
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:18px 22px;margin-bottom:14px;
  animation:screenIn var(--dur-slow) var(--ease) both;
}
.rep-sec__k{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.rep-sec p{font-size:16px;color:var(--teal-800);line-height:1.62}
.rep-sec--focus{border-left-color:var(--gold);background:#FFFDF6}
.rep-sec--focus .rep-sec__k{color:var(--gold-hover)}
.rep-sec--focus p{color:var(--teal-900)}
.rep-sec--fix{border-left-color:var(--cyan-dark);background:#F4FBFB}
.rep-sec--fix .rep-sec__k{color:var(--cyan-dark)}
.rep-sec--fix p{color:var(--teal-900);font-weight:500}
.report__note{text-align:center;font-size:13.5px;color:var(--muted);margin-top:4px}

/* ---------- Capture / offer ---------- */
.capture{background:var(--white);border:1px solid var(--cream-darker);border-radius:var(--radius-lg);padding:24px 24px 22px;box-shadow:var(--shadow-sm);margin-top:8px}
.consent{font-size:12.5px;color:var(--muted);text-align:center;margin-top:16px;line-height:1.5}
.consent a{color:var(--teal-500)}
.sent-pill{display:inline-flex;align-items:center;gap:8px;background:#F1FAFA;border:1px solid #BEE7E9;color:var(--cyan-dark);font-size:13.5px;font-weight:500;padding:8px 16px;border-radius:999px}

/* ---------- Confirmation ---------- */
.confirm-scene{background:var(--white);border:1px solid var(--cream-darker);border-left:4px solid var(--gold);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:16px 20px;margin:0 auto 26px;max-width:52ch;text-align:left}
.confirm-scene .cs-k{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.confirm-scene .cs-v{font-size:16.5px;color:var(--teal-900);font-weight:500;line-height:1.4}

/* ---------- Loading ---------- */
.writing{display:flex;flex-direction:column;align-items:center;gap:22px;padding:40px 0}
.writing__dots{display:flex;gap:9px}
.writing__dots span{width:11px;height:11px;border-radius:50%;background:var(--teal-400);animation:pulse 1.2s var(--ease) infinite}
.writing__dots span:nth-child(2){animation-delay:.18s}
.writing__dots span:nth-child(3){animation-delay:.36s}
.writing__label{font-size:15px;color:var(--teal-500)}
@keyframes pulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}

/* footer note (dev only marker) */
.devnote{position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:11px;color:var(--teal-400);letter-spacing:.4px;z-index:30;pointer-events:none;padding:20px 12px 10px;background:linear-gradient(to top,var(--cream) 55%,rgba(241,240,234,0))}

/* ---------- Responsive ---------- */
@media(max-width:600px){
  .stage{padding:80px 18px 64px}
  .intro-marks{gap:20px}
  .btn{width:100%;max-width:100%}
  .btn--ghost{width:auto}
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .screen.enter{animation:none}
}

/* ============================================================
   RESULTS PAGE (rich)  -  diagrams, colour, icons, tiles
   ============================================================ */
/* widen the frame only on the results screen */
.stage:has(#screen-results.active) .frame{max-width:820px}

.res-hero{text-align:center;margin-bottom:8px}
.res-eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:600;color:var(--cyan-dark);margin-bottom:14px}
.res-title{font-size:clamp(30px,5vw,48px);line-height:1.08;margin-bottom:6px}
.res-diagram{max-width:600px;margin:22px auto 24px}
.res-diagram svg{width:100%;height:auto;display:block}
.res-scene{background:#FFFBF0;border:1px solid #EBD9A0;border-radius:var(--radius-lg);padding:18px 24px;max-width:560px;margin:0 auto;box-shadow:var(--shadow-sm)}
.res-scene__k{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-hover);font-weight:600;margin-bottom:6px}
.res-scene__v{font-family:var(--font-head);font-size:clamp(18px,2.6vw,23px);color:var(--teal-900);line-height:1.25}

/* at-a-glance tiles */
.res-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}
.res-tile{border-radius:var(--radius-lg);padding:18px 16px 16px;text-align:center;border:1px solid transparent;box-shadow:var(--shadow-sm)}
.res-tile__ic{width:40px;height:40px;margin:0 auto 10px;display:block}
.res-tile__k{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;margin-bottom:5px;opacity:.85}
.res-tile__v{font-family:var(--font-head);font-size:17px;line-height:1.2}
.res-tile--a{background:#EAF1F3;border-color:#CFE0E4}.res-tile--a .res-tile__k{color:var(--teal-500)}.res-tile--a .res-tile__v{color:var(--teal-900)}
.res-tile--b{background:#FFF7E6;border-color:#EBD9A0}.res-tile--b .res-tile__k{color:var(--gold-hover)}.res-tile--b .res-tile__v{color:var(--teal-900)}
.res-tile--c{background:#FBEEEA;border-color:#EBC9BF}.res-tile--c .res-tile__k{color:var(--red-dark)}.res-tile--c .res-tile__v{color:var(--teal-900)}

/* section cards */
.res-sections{display:flex;flex-direction:column;gap:16px;margin-bottom:8px}
.res-card{background:var(--white);border:1px solid var(--cream-darker);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.res-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--teal-500)}
.res-card__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.res-ic{flex:0 0 auto;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--cream)}
.res-ic img{width:38px;height:38px;object-fit:contain;display:block}
.res-card__h{font-family:var(--font-head);font-size:20px;color:var(--teal-900);letter-spacing:.3px}
.res-card__p{font-size:16px;color:var(--teal-800);line-height:1.62}
.res-card__p + .viz{margin-top:16px}
/* accent variants */
.res-card--system::before{background:var(--teal-500)} .res-card--system .res-ic{background:#EAF1F3}
.res-card--descent::before{background:var(--cyan-dark)} .res-card--descent .res-ic{background:#F0FAFA}
.res-card--scene{border-color:#EBD9A0;background:#FFFDF6} .res-card--scene::before{background:var(--gold)} .res-card--scene .res-ic{background:#FFF3D6} .res-card--scene .res-card__h{color:var(--gold-hover)}
.res-card--gap::before{background:var(--amber)} .res-card--gap .res-ic{background:#FEF6E7}
.res-card--loop{background:#FCF2EE} .res-card--loop::before{background:var(--red-dark)} .res-card--loop .res-ic{background:#FBE7E1} .res-card--loop .res-card__h{color:var(--red-dark)}
.res-card--fix{background:#EEF7F0;border-color:#CFE6D6} .res-card--fix::before{background:var(--green)} .res-card--fix .res-ic{background:#E1F1E6} .res-card--fix .res-card__h{color:var(--green-dark)} .res-card--fix .res-card__p{font-weight:500;color:var(--teal-900)}

/* mini diagrams inside cards */
.viz{background:var(--cream);border-radius:12px;padding:16px 18px}
.viz svg{width:100%;height:auto;display:block;overflow:visible}
.viz__cap{font-size:12px;color:var(--muted);text-align:center;margin-top:8px}

/* CTA band */
.res-cta{background:linear-gradient(155deg,var(--teal-800),var(--teal-900));color:#EAF3F4;border-radius:var(--radius-xl);padding:34px 30px 30px;text-align:center;margin:26px 0 10px;box-shadow:var(--shadow-md)}
.res-cta__k{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px}
.res-cta__h{font-family:var(--font-head);font-size:clamp(23px,3.4vw,30px);color:#fff;line-height:1.15;max-width:22ch;margin:0 auto 10px}
.res-cta__p{font-size:15.5px;color:#CBD7DA;max-width:46ch;margin:0 auto 22px}
.res-cta .btn--gold{margin:0 auto}
.res-cta__note{font-size:13.5px;color:#9FB4B8;margin-top:14px}
.res-reset{text-align:center;margin-top:14px}

@media(max-width:640px){
  .res-tiles{grid-template-columns:1fr;gap:10px}
  .res-tile{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px}
  .res-tile__ic{margin:0}
  .res-card__head{gap:12px}
  .res-ic{width:46px;height:46px}.res-ic img{width:32px;height:32px}
}

/* ============================================================
   BOOKING MODAL  -  models POD's public booking widget UX
   ============================================================ */
.bkg[hidden]{display:none}
.bkg{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.bkg__overlay{position:absolute;inset:0;background:rgba(31,38,40,.55);animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.bkg__panel{position:relative;z-index:1;background:var(--cream);border-radius:var(--radius-xl);width:min(560px,100%);max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);padding:30px 30px 26px;animation:screenIn var(--dur) var(--ease) both}
.bkg__x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:26px;line-height:1;color:var(--teal-500);cursor:pointer;padding:2px 9px;border-radius:8px}
.bkg__x:hover{background:var(--cream-dark);color:var(--teal-900)}
.bkg__eyebrow{font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan-dark);font-weight:600;margin-bottom:8px}
.bkg__title{font-family:var(--font-head);font-size:26px;color:var(--teal-900);margin-bottom:6px}
.bkg__sub{font-size:15px;color:var(--teal-700);margin-bottom:18px}
.bkg__tz{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:18px;flex-wrap:wrap}
.bkg__tz select{font-family:var(--font-body);font-size:13.5px;color:var(--teal-800);background:#fff;border:1px solid var(--cream-darker);border-radius:8px;padding:7px 10px;max-width:280px}
.bkg__days{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;margin-bottom:18px}
.bkg-day{flex:0 0 auto;min-width:78px;text-align:center;background:#fff;border:1px solid var(--cream-darker);border-radius:12px;padding:10px 8px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.bkg-day:hover{border-color:var(--teal-300)}
.bkg-day.sel{border-color:var(--cyan-dark);background:#F1FAFA}
.bkg-day__dow{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.bkg-day__num{font-family:var(--font-head);font-size:22px;color:var(--teal-900);line-height:1.1}
.bkg-day__mon{font-size:11px;color:var(--muted)}
.bkg__slots-h{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px}
.bkg__slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:9px}
.bkg-slot{background:#fff;border:1px solid var(--cream-darker);border-radius:10px;padding:11px 8px;font-family:var(--font-body);font-size:14.5px;font-weight:500;color:var(--teal-800);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.bkg-slot:hover{border-color:var(--gold);background:var(--gold-lighter)}
.bkg__empty,.bkg__loading{font-size:14.5px;color:var(--teal-500);text-align:center;padding:30px 0}
.bkg__confirm,.bkg__done{text-align:center;padding:10px 0 4px}
.bkg__confirm-when{font-family:var(--font-head);font-size:22px;color:var(--teal-900);margin:8px 0 4px}
.bkg__confirm-sub{font-size:14.5px;color:var(--teal-700);max-width:40ch;margin:0 auto 22px}
.bkg__done-ic{width:58px;height:58px;border-radius:50%;background:#E1F1E6;display:grid;place-items:center;margin:0 auto 16px}
.bkg__stub{margin-top:16px;font-size:11px;color:var(--teal-300);text-align:center;letter-spacing:.3px}

/* Intro portrait (host) */
.intro-portrait{display:flex;justify-content:center;margin-bottom:22px}
.intro-portrait img{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 10%;border:3px solid var(--white);box-shadow:var(--shadow-md);background:var(--cream-dark)}
@media(max-width:600px){.intro-portrait img{width:96px;height:96px}}