/* ============================================================
   FIELD READINGS — funnel styles
   Design system mirrored from scalarflower.com
   ============================================================ */

:root{
  /* palette */
  --void:#07090E;
  --void-2:#0A0E14;
  --gold:#C9A227;
  --gold-l:#E8C44A;
  --cyan:#7FD8D8;
  --rose:#D98A9E;
  --cream:#EAE4D5;
  --dim:#8A8470;

  /* type */
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'EB Garamond', Georgia, serif;

  /* spacing */
  --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-6:1.5rem;
  --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --content:1200px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
body{
  background:var(--void);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:clamp(1.02rem,0.95rem+0.3vw,1.18rem);
  line-height:1.62;
  min-height:100dvh;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.12;text-wrap:balance;}
p{text-wrap:pretty;}
::selection{background:rgba(201,162,39,0.28);color:var(--cream);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}
}

.wrap{max-width:var(--content);margin:0 auto;padding-inline:clamp(1.4rem,5vw,3.5rem);}
.accent{color:var(--gold-l);font-style:italic;font-weight:500;}
.cyan{color:var(--cyan);}

/* -------- kicker -------- */
.kicker{
  letter-spacing:0.4em;text-transform:uppercase;
  font-size:clamp(0.7rem,1vw,0.86rem);color:var(--gold);
  display:inline-flex;align-items:center;gap:0.7em;margin-bottom:var(--space-6);
}
.kicker::before{content:"\2726";color:var(--gold-l);letter-spacing:0;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.4rem,5vw,3.5rem);
  background:linear-gradient(to bottom, rgba(7,9,14,0.92), rgba(7,9,14,0));
  transition:background .4s var(--ease-out),backdrop-filter .4s;
}
.nav.solid{background:rgba(7,9,14,0.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(201,162,39,0.12);}
.brand{display:flex;align-items:center;gap:0.6rem;font-family:var(--font-display);font-size:1.24rem;letter-spacing:0.02em;color:var(--cream);}
.brand svg{width:26px;height:26px;color:var(--gold-l);}
.brand b{font-weight:600;}
.brand span{color:var(--gold-l);font-style:italic;font-weight:500;}
.nav-cta{
  padding:0.62rem 1.4rem;border:1.4px solid var(--gold);border-radius:2px;
  color:var(--gold-l);font-size:0.82rem;letter-spacing:0.14em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(201,162,39,0.12),rgba(201,162,39,0.02));
  transition:background .3s var(--ease-out),box-shadow .3s,transform .2s;
}
.nav-cta:hover{background:linear-gradient(180deg,rgba(201,162,39,0.24),rgba(201,162,39,0.05));box-shadow:0 0 34px rgba(201,162,39,0.2);transform:translateY(-1px);}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:0.6em;justify-content:center;
  padding:1.05rem 2.5rem;border-radius:2px;
  font-family:var(--font-body);font-size:clamp(0.94rem,1.1vw,1.08rem);
  letter-spacing:0.15em;text-transform:uppercase;white-space:nowrap;
  transition:background .3s var(--ease-out),box-shadow .3s,transform .2s,border-color .3s;
}
.btn-gold{
  border:1.5px solid var(--gold);color:var(--gold-l);
  background:linear-gradient(180deg,rgba(201,162,39,0.14),rgba(201,162,39,0.03));
  box-shadow:0 0 30px rgba(201,162,39,0.1);
}
.btn-gold:hover{background:linear-gradient(180deg,rgba(201,162,39,0.26),rgba(201,162,39,0.07));box-shadow:0 0 46px rgba(201,162,39,0.24);transform:translateY(-1px);}
.btn-solid{
  border:1.5px solid var(--gold-l);color:var(--void);
  background:linear-gradient(180deg,var(--gold-l),var(--gold));
  box-shadow:0 0 40px rgba(201,162,39,0.28);font-weight:500;
}
.btn-solid:hover{transform:translateY(-1px);box-shadow:0 0 56px rgba(201,162,39,0.42);}
.btn-ghost{border:1.4px solid rgba(127,216,216,0.4);color:var(--cyan);}
.btn-ghost:hover{border-color:var(--cyan);background:rgba(127,216,216,0.07);transform:translateY(-1px);}
.btn.full{width:100%;}
.btn.lg{padding:1.2rem 3rem;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;width:100%;overflow:hidden;
  display:flex;align-items:center;
  background:
    radial-gradient(ellipse 120% 90% at 80% 45%, rgba(201,162,39,0.10), transparent 55%),
    radial-gradient(ellipse 90% 120% at 6% 20%, rgba(127,216,216,0.06), transparent 50%),
    var(--void);
}
.hero__art{
  position:absolute;inset:0 0 0 auto;width:56%;
  background:url('img/hero-field.png') center/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 34%, #000 100%);
  z-index:1;
}
.hero__content{position:relative;z-index:3;width:100%;}
.hero__inner{max-width:min(48rem,64vw);padding-block:clamp(6rem,12vh,9rem);}
.hero h1{
  font-size:clamp(2.2rem,5vw,4.2rem);color:var(--cream);
  margin-bottom:clamp(1rem,2vw,1.5rem);text-shadow:0 2px 40px rgba(0,0,0,0.7);
}
.hero .sub{font-size:clamp(1.14rem,2vw,1.55rem);opacity:0.94;margin-bottom:clamp(1rem,1.8vw,1.5rem);}
.hero .method{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--dim);margin-bottom:clamp(1.1rem,1.8vw,1.7rem);max-width:40ch;}
.hero .turn{font-family:var(--font-display);font-style:italic;font-size:clamp(1.1rem,1.7vw,1.4rem);color:var(--gold-l);margin-bottom:clamp(1.8rem,3vw,2.6rem);}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,2vw,1.6rem);}
.foot-note{font-size:0.9rem;letter-spacing:0.12em;color:var(--dim);text-transform:uppercase;}
.hero-scroll{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:4;color:var(--dim);font-size:0.72rem;letter-spacing:0.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:0.6rem;opacity:0.7;}
.hero-scroll span{width:1px;height:34px;background:linear-gradient(var(--gold-l),transparent);animation:pulse 2.4s var(--ease-out) infinite;}
@keyframes pulse{0%,100%{opacity:0.3;transform:scaleY(0.6);}50%{opacity:1;transform:scaleY(1);}}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section.band{padding-block:clamp(4.5rem,9vw,8rem);position:relative;}
.band-divider{border-top:1px solid rgba(201,162,39,0.13);}
.section-head{max-width:44rem;margin:0 auto var(--space-16);text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,3rem);margin-bottom:var(--space-6);}
.section-head p{color:var(--dim);font-size:clamp(1.05rem,1.5vw,1.24rem);}

/* reveal */
.reveal{opacity:1;}
@supports (animation-timeline:view()){
  .reveal{opacity:0;animation:rvl linear both;animation-timeline:view();animation-range:entry 0% entry 60%;}
}
@keyframes rvl{to{opacity:1;}}

/* ============================================================
   VALUE / WHAT YOU RECEIVE
   ============================================================ */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.2rem,2.4vw,2rem);}
.vcard{
  border:1px solid rgba(201,162,39,0.16);border-radius:4px;padding:clamp(1.6rem,2.5vw,2.2rem);
  background:linear-gradient(180deg,rgba(127,216,216,0.03),rgba(7,9,14,0));
  transition:border-color .3s var(--ease-out),transform .3s,box-shadow .3s;
}
.vcard:hover{border-color:rgba(201,162,39,0.4);transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,0.5);}
.vcard .num{font-family:var(--font-display);font-style:italic;font-size:1.1rem;color:var(--cyan);letter-spacing:0.05em;margin-bottom:0.9rem;}
.vcard h3{font-size:1.34rem;margin-bottom:0.7rem;color:var(--cream);}
.vcard p{color:var(--dim);font-size:1.04rem;}

/* ============================================================
   SPLIT (image + text)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
.split.rev .split-media{order:2;}
.split-media{position:relative;border-radius:6px;overflow:hidden;border:1px solid rgba(201,162,39,0.15);box-shadow:0 30px 80px rgba(0,0,0,0.55);}
.split-media img{width:100%;height:100%;object-fit:cover;}
.split-text h2{font-size:clamp(1.8rem,3.2vw,2.7rem);margin-bottom:var(--space-6);}
.split-text p{color:var(--dim);margin-bottom:var(--space-4);}
.split-text .lead{color:var(--cream);opacity:0.92;font-size:1.14rem;}

/* ============================================================
   STEPS / HOW IT WORKS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem);counter-reset:step;}
.step{text-align:center;position:relative;}
.step .dot{
  width:64px;height:64px;margin:0 auto 1.3rem;border-radius:50%;
  border:1.4px solid rgba(201,162,39,0.4);display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.4rem;color:var(--gold-l);
  background:radial-gradient(circle,rgba(201,162,39,0.12),transparent 70%);
}
.step h3{font-size:1.28rem;margin-bottom:0.6rem;}
.step p{color:var(--dim);font-size:1.02rem;max-width:30ch;margin:0 auto;}

/* ============================================================
   PRICING
   ============================================================ */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1.2rem,2.2vw,1.8rem);align-items:stretch;}
.tier{
  position:relative;display:flex;flex-direction:column;
  border:1px solid rgba(201,162,39,0.18);border-radius:6px;padding:clamp(1.8rem,2.6vw,2.4rem);
  background:linear-gradient(180deg,rgba(10,14,20,0.7),rgba(7,9,14,0.3));
  transition:border-color .3s var(--ease-out),transform .3s,box-shadow .3s;
}
.tier:hover{transform:translateY(-4px);border-color:rgba(201,162,39,0.42);box-shadow:0 22px 60px rgba(0,0,0,0.5);}
.tier.featured{border-color:var(--gold);box-shadow:0 0 50px rgba(201,162,39,0.16);}
.tier .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--void);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;padding:0.32rem 0.9rem;border-radius:2px;font-weight:600;}
.tier.featured{padding-top:clamp(2rem,3vw,2.6rem);}
.tier .tname{font-family:var(--font-display);font-size:1.4rem;color:var(--cream);margin-bottom:0.4rem;}
.tier .tprice{font-family:var(--font-display);font-size:2.6rem;color:var(--gold-l);line-height:1;margin-bottom:0.2rem;}
.tier .tprice small{font-size:0.9rem;color:var(--dim);font-family:var(--font-body);letter-spacing:0.04em;}
.tier .tdesc{color:var(--dim);font-size:0.98rem;margin-bottom:1.4rem;min-height:2.8em;}
.tier ul{list-style:none;margin-bottom:1.8rem;flex:1;}
.tier li{display:flex;gap:0.6rem;align-items:flex-start;padding:0.5rem 0;font-size:1rem;color:var(--cream);opacity:0.9;border-bottom:1px solid rgba(201,162,39,0.07);}
.tier li::before{content:"\2726";color:var(--cyan);font-size:0.8rem;line-height:1.6;}
.tier .btn{margin-top:auto;}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.2rem,2.4vw,2rem);}
.quote{border-left:2px solid rgba(201,162,39,0.35);padding:0.4rem 0 0.4rem 1.6rem;}
.quote p{font-family:var(--font-display);font-style:italic;font-size:1.16rem;color:var(--cream);opacity:0.94;margin-bottom:0.9rem;}
.quote cite{font-style:normal;color:var(--gold-l);font-size:0.9rem;letter-spacing:0.08em;}
.quote cite span{color:var(--dim);}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{position:relative;text-align:center;overflow:hidden;
  background:radial-gradient(ellipse 80% 100% at 50% 50%, rgba(201,162,39,0.09), transparent 60%),var(--void);}
.final h2{font-size:clamp(2.1rem,4.4vw,3.6rem);margin-bottom:var(--space-6);max-width:20ch;margin-inline:auto;}
.final p{color:var(--dim);font-size:1.16rem;max-width:38ch;margin:0 auto var(--space-10);}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid rgba(201,162,39,0.12);padding-block:var(--space-16) var(--space-12);color:var(--dim);}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start;}
.foot-links{display:flex;gap:1.6rem;flex-wrap:wrap;font-size:0.95rem;}
.foot-links a:hover{color:var(--gold-l);}
.foot-fine{margin-top:var(--space-10);font-size:0.84rem;opacity:0.7;max-width:64ch;line-height:1.6;}

/* ============================================================
   MODAL / FUNNEL FLOW
   ============================================================ */
.overlay{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(4,6,10,0.86);backdrop-filter:blur(10px);
  align-items:flex-start;justify-content:center;overflow-y:auto;padding:clamp(1rem,4vh,3rem) 1rem;
}
.overlay.open{display:flex;}
.modal{
  position:relative;width:min(640px,100%);
  background:
    radial-gradient(ellipse 90% 60% at 80% 0%, rgba(201,162,39,0.08), transparent 55%),
    linear-gradient(180deg,var(--void-2),var(--void));
  border:1px solid rgba(201,162,39,0.22);border-radius:8px;
  box-shadow:0 40px 120px rgba(0,0,0,0.7);
  padding:clamp(1.8rem,4vw,3rem);
  animation:modalin .4s var(--ease-out);
}
@keyframes modalin{from{opacity:0;transform:translateY(24px) scale(0.98);}to{opacity:1;transform:none;}}
.modal-close{position:absolute;top:1rem;right:1.1rem;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--dim);border:1px solid rgba(201,162,39,0.2);}
.modal-close:hover{color:var(--gold-l);border-color:var(--gold);}

/* progress */
.progress{display:flex;gap:0.5rem;margin-bottom:1.8rem;}
.progress i{flex:1;height:3px;border-radius:2px;background:rgba(201,162,39,0.15);overflow:hidden;position:relative;}
.progress i.on::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--gold-l));}

.step-panel{display:none;}
.step-panel.active{display:block;animation:fadeStep .35s var(--ease-out);}
@keyframes fadeStep{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.modal .eyebrow{letter-spacing:0.32em;text-transform:uppercase;font-size:0.72rem;color:var(--gold);margin-bottom:0.7rem;}
.modal h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:0.7rem;}
.modal .modal-sub{color:var(--dim);margin-bottom:1.8rem;font-size:1.04rem;}

/* form fields */
.field{margin-bottom:1.2rem;}
.field label{display:block;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem;}
.field input,.field select{
  width:100%;padding:0.85rem 1rem;background:rgba(127,216,216,0.04);
  border:1px solid rgba(201,162,39,0.22);border-radius:3px;color:var(--cream);
  font-size:1.04rem;transition:border-color .25s,box-shadow .25s;
}
.field input::placeholder{color:var(--dim);}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,0.12);}
.field select option{background:var(--void-2);color:var(--cream);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.hint{font-size:0.86rem;color:var(--dim);margin-top:-0.5rem;margin-bottom:1.2rem;}
.err{color:var(--rose);font-size:0.88rem;margin-top:0.4rem;min-height:1.1em;}

.checkline{display:flex;gap:0.7rem;align-items:flex-start;font-size:0.92rem;color:var(--dim);margin-bottom:1.4rem;}
.checkline input{margin-top:0.28rem;accent-color:var(--gold);}

/* computing / loader */
.computing{text-align:center;padding:2rem 0;}
.orbit{width:120px;height:120px;margin:0 auto 1.6rem;position:relative;}
.orbit svg{width:100%;height:100%;animation:spin 9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.orbit .core{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-style:italic;color:var(--gold-l);font-size:0.9rem;}
.compute-line{color:var(--dim);font-size:0.98rem;min-height:1.4em;letter-spacing:0.02em;}

/* reading result */
.result-hero{text-align:center;margin-bottom:1.8rem;}
.result-hero .rname{font-family:var(--font-display);font-style:italic;color:var(--cyan);font-size:1.05rem;letter-spacing:0.04em;margin-bottom:0.8rem;}
.score-ring{width:150px;height:150px;margin:0 auto 1rem;position:relative;}
.score-ring svg{transform:rotate(-90deg);}
.score-ring .track{fill:none;stroke:rgba(201,162,39,0.14);stroke-width:8;}
.score-ring .fill{fill:none;stroke:url(#grad);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.6s var(--ease-out);}
.score-ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.score-ring .val b{font-family:var(--font-display);font-size:2.4rem;color:var(--gold-l);line-height:1;}
.score-ring .val em{font-style:normal;font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--dim);margin-top:0.3rem;}

.read-block{border-top:1px solid rgba(201,162,39,0.13);padding-top:1.3rem;margin-bottom:1.3rem;}
.read-block h4{font-family:var(--font-display);color:var(--cream);font-size:1.12rem;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem;}
.read-block h4::before{content:"\2726";color:var(--cyan);font-size:0.72rem;}
.read-block p{color:var(--cream);opacity:0.9;font-size:1.03rem;}
.read-block.locked{position:relative;}
.read-block.locked .blur{filter:blur(6px);opacity:0.5;user-select:none;}
.lock-cta{
  margin-top:1rem;border:1px dashed rgba(201,162,39,0.3);border-radius:5px;
  padding:1.3rem;text-align:center;background:linear-gradient(180deg,rgba(201,162,39,0.06),transparent);
}
.lock-cta p{color:var(--dim);font-size:0.98rem;margin-bottom:1rem;}
.lock-cta .price{font-family:var(--font-display);color:var(--gold-l);font-size:1.2rem;}

.upsell-note{text-align:center;color:var(--dim);font-size:0.9rem;margin-top:1.2rem;}

/* toast */
.toast{position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%) translateY(120%);z-index:200;
  background:rgba(10,14,20,0.96);border:1px solid rgba(201,162,39,0.3);border-radius:5px;
  padding:0.9rem 1.5rem;color:var(--cream);font-size:0.96rem;box-shadow:0 20px 60px rgba(0,0,0,0.6);
  transition:transform .45s var(--ease-out);}
.toast.show{transform:translateX(-50%) translateY(0);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .split{grid-template-columns:1fr;}
  .split.rev .split-media{order:0;}
  .steps{grid-template-columns:1fr;max-width:420px;margin:0 auto;gap:2.4rem;}
}
@media (max-width:1024px){
  .hero__art{width:100%;opacity:0.4;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.4) 34%,#000 74%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,0.4) 34%,#000 74%);}
  .hero{align-items:flex-end;}
  .hero__inner{max-width:100%;padding-bottom:5rem;}
}
@media (max-width:600px){
  .hero__art{height:44%;inset:0 0 auto 0;background-position:center 22%;opacity:0.55;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);}
  .cta-row{flex-direction:column;align-items:stretch;}
  .cta-row .btn{width:100%;}
  .foot-note{text-align:center;}
  .row2{grid-template-columns:1fr;}
  .nav-cta{display:none;}
  .hero-scroll{display:none;}
}