/* ============================================================
   YSSE IT — tokens
   ============================================================ */
:root{
  --bg:        #0B1F1C;
  --bg-alt:    #0F2822;
  --bg-soft:   #12312A;
  --paper:     #FAF6EC;
  --paper-line:#E4DCC5;
  --ink:       #12241F;
  --ink-soft:  #4B5B54;
  --cream:     #F5F2E9;
  --cream-soft:#C9D4CB;
  --gold:      #B8863B;
  --gold-bright:#D9A84E;
  --sage:      #7C9885;
  --rust:      #A6462F;

  --display: "Poppins", system-ui, -apple-system, sans-serif;
  --body: "Poppins", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --max: 1120px;
  --radius: 4px;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); margin:0; font-weight:600; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

/* faint paper grain overlay for warmth on dark sections */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  border-radius:999px;
  font-family:var(--body);
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--gold-bright);
  color:#1B1305;
}
.btn-primary:hover{ background:#EFC169; }
.btn-outline{
  border-color:rgba(245,242,233,0.35);
  color:var(--cream);
}
.btn-outline:hover{ border-color:var(--gold-bright); color:var(--gold-bright); }
.btn-ghost{
  border-color:transparent;
  color:var(--cream-soft);
  padding:8px 16px;
  font-size:0.88rem;
}
.btn-ghost:hover{ color:var(--gold-bright); }
.btn-tertiary{
  border-color:transparent;
  background:none;
  color:var(--sage);
  padding:13px 6px;
  text-decoration:underline;
  text-decoration-color:rgba(124,152,133,0.4);
  text-underline-offset:4px;
}
.btn-tertiary:hover{ color:var(--gold-bright); text-decoration-color:var(--gold-bright); transform:translateY(-1px); }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,31,28,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(245,242,233,0.08);
}
.header-inner{
  display:flex; align-items:center; gap:24px;
  height:76px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  margin-right:auto;
}
.brand img{ height:38px; width:38px; object-fit:contain; border-radius:8px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{ font-family:var(--display); font-size:1.05rem; letter-spacing:0.01em; }
.brand-text em{ font-style:normal; font-size:0.72rem; color:var(--cream-soft); }

.site-nav{ display:flex; gap:28px; }
.site-nav a{
  text-decoration:none; font-size:0.9rem; color:var(--cream-soft);
  transition:color .18s ease;
  position:relative;
}
.site-nav a:hover{ color:var(--cream); }

.header-cta{ display:inline-flex; }
.nav-toggle{ display:none; }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  padding:96px 0 80px;
  position:relative;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(184,134,59,0.16), transparent 60%),
    var(--bg);
  border-bottom:1px solid rgba(245,242,233,0.08);
}
.hero-inner{
  display:block;
}
.hero-content{ max-width:640px; }
.hero-media{ width:100%; }
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:14px;
  overflow:hidden;
  background:var(--bg-soft);
  border:1px solid rgba(245,242,233,0.14);
  box-shadow:0 30px 60px -24px rgba(0,0,0,0.6);
}
.video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-bright);
  margin-bottom:22px;
}
.hero-title{
  font-size:clamp(2.4rem, 5.2vw, 4rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  font-weight:700;
  color:var(--cream);
  margin-bottom:24px;
}
.hero-sub{
  font-size:1.1rem;
  color:var(--cream-soft);
  max-width:56ch;
  margin-bottom:36px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px; }

.hero-stats{
  display:flex; gap:44px; flex-wrap:wrap;
  margin:0; padding-top:32px;
  border-top:1px dashed rgba(245,242,233,0.18);
}
.hero-stats .stat{ display:flex; flex-direction:column; gap:4px; }
.hero-stats dt{
  font-family:var(--mono); font-size:1.7rem; font-weight:600; color:var(--gold-bright);
  order:1;
}
.hero-stats dd{
  margin:0; font-size:0.82rem; color:var(--cream-soft); order:2;
}

/* ============================================================
   Section shell
   ============================================================ */
.section{ padding:88px 0; }
.section-title{
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  color:var(--cream);
  margin-bottom:14px;
}
.section-head{ max-width:640px; margin-bottom:48px; }
.section-note{ color:var(--cream-soft); font-size:1rem; }

/* ============================================================
   How it works — numbered steps
   ============================================================ */
.how{ background:var(--bg-alt); }
.steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
  counter-reset:step;
  margin-top:48px;
}
.step{
  counter-increment:step;
  padding-top:20px;
  border-top:2px solid rgba(245,242,233,0.14);
  position:relative;
}
.step::before{
  content:counter(step, decimal-leading-zero);
  font-family:var(--mono);
  font-size:0.85rem;
  color:var(--gold-bright);
  display:block;
  margin-bottom:14px;
  letter-spacing:0.05em;
}
.step h3{
  font-size:1.2rem; color:var(--cream); margin-bottom:10px; font-weight:600;
}
.step p{ color:var(--cream-soft); font-size:0.96rem; }

/* ============================================================
   Packages — receipt
   ============================================================ */
.packages{ background:var(--bg); }

.packages-calc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.pc-col .section-head{ margin-bottom:32px; }
.pc-col .receipt,
.pc-col .calc-card{ margin:0; }

.receipt{
  position:relative;
  max-width:460px;
  margin:0 auto;
  background:var(--paper);
  color:var(--ink);
  padding:38px 34px 30px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  transform:rotate(-0.6deg);
}
.receipt::before,
.receipt::after{
  content:"";
  position:absolute; left:0; right:0; height:12px;
  background: radial-gradient(circle at 10px 6px, var(--bg) 9px, transparent 9.5px) repeat-x;
  background-size:20px 20px;
}
.receipt::before{ top:-6px; }
.receipt::after{ bottom:-6px; transform:scaleY(-1); }

.receipt-top{
  text-align:center;
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px dashed var(--paper-line);
}
.receipt-store{
  display:block;
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:0.02em;
}
.receipt-sub{
  display:block;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:4px;
}

.receipt-rows{ display:flex; flex-direction:column; gap:14px; }
.r-row{ }
.r-line{
  display:flex; align-items:baseline; gap:8px;
}
.r-name{ font-weight:600; font-size:0.98rem; white-space:nowrap; }
.r-leader{
  flex:1;
  border-bottom:2px dotted var(--paper-line);
  margin-bottom:4px;
  min-width:10px;
}
.r-price{
  font-family:var(--mono); font-weight:600; font-size:0.98rem; white-space:nowrap;
}
.r-desc{
  font-size:0.82rem; color:var(--ink-soft); margin-top:3px;
}

.receipt-divider{
  margin:22px 0 14px;
  padding-top:14px;
  border-top:1px dashed var(--paper-line);
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.receipt-divider::before{ content: attr(data-label); }

.receipt-soon .r-name, .receipt-soon .r-price{ color:var(--ink-soft); }
.receipt-soon .r-line{ position:relative; }
.receipt-soon .r-row::after{
  content:"soon";
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  border-radius:999px;
  padding:1px 6px;
  margin-left:8px;
}

.receipt-barcode{
  margin-top:28px;
  height:34px;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 14px);
  opacity:0.85;
}

/* ============================================================
   Calculator — live receipt
   ============================================================ */
.calculator{ background:var(--bg-alt); }

.calc-card{
  position:relative;
  max-width:480px;
  margin:0 auto;
  background:var(--paper);
  color:var(--ink);
  padding:34px 32px 30px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
}
.calc-card::before{
  content:"";
  position:absolute; left:0; right:0; top:-6px; height:12px;
  background: radial-gradient(circle at 10px 6px, var(--bg-alt) 9px, transparent 9.5px) repeat-x;
  background-size:20px 20px;
}

.calc-tabs{
  display:flex;
  gap:6px;
  background:rgba(18,36,31,0.06);
  padding:5px;
  border-radius:999px;
  margin-bottom:28px;
}
.calc-tab{
  flex:1;
  border:none;
  background:none;
  cursor:pointer;
  padding:10px 14px;
  border-radius:999px;
  font-family:var(--body);
  font-weight:600;
  font-size:0.9rem;
  color:var(--ink-soft);
  transition:background .18s ease, color .18s ease;
}
.calc-tab.active{
  background:var(--ink);
  color:var(--paper);
}

.calc-body{ display:flex; flex-direction:column; gap:22px; margin-bottom:26px; }

.calc-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.calc-field-right{ text-align:right; }
.calc-field-right .pill-toggle{ margin-left:auto; }

.calc-field label,
.calc-field > span{
  display:block;
  font-weight:600;
  font-size:0.92rem;
  margin-bottom:10px;
}

.stepper{
  display:inline-flex;
  align-items:center;
  border:1.5px solid var(--paper-line);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.stepper-btn{
  width:40px; height:40px;
  border:none;
  background:var(--paper);
  color:var(--ink);
  font-size:1.1rem;
  cursor:pointer;
  transition:background .15s ease;
  font-family:var(--mono);
}
.stepper-btn:hover{ background:var(--gold-bright); }
.stepper input[type="number"]{
  width:64px;
  height:40px;
  border:none;
  border-left:1.5px solid var(--paper-line);
  border-right:1.5px solid var(--paper-line);
  text-align:center;
  font-family:var(--mono);
  font-weight:600;
  font-size:1rem;
  color:var(--ink);
  background:#fff;
  -moz-appearance:textfield;
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.stepper input:disabled{ opacity:0.5; }

.pill-toggle{
  display:inline-flex;
  border:1.5px solid var(--paper-line);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}
.pill-btn{
  border:none;
  background:none;
  cursor:pointer;
  padding:9px 22px;
  font-family:var(--body);
  font-weight:600;
  font-size:0.9rem;
  color:var(--ink-soft);
  transition:background .18s ease, color .18s ease;
}
.pill-btn.active{
  background:var(--ink);
  color:var(--paper);
}

.calc-recording-count{
  padding-left:18px;
  border-left:2px solid var(--paper-line);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:16px 22px;
}
.calc-recording-count label[for]{ width:100%; }
.all-events-check{
  display:flex; align-items:center; gap:8px;
  font-weight:500 !important;
  font-size:0.88rem !important;
  color:var(--ink-soft);
  margin-bottom:0 !important;
  cursor:pointer;
}
.all-events-check input{ accent-color:var(--gold); width:16px; height:16px; }

.calc-total{
  border-top:1px dashed var(--paper-line);
  padding-top:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.calc-grand{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-top:14px;
  border-top:1px solid var(--paper-line);
  font-family:var(--mono);
  font-weight:700;
  font-size:1.25rem;
  color:var(--ink);
}
.calc-cta{
  margin-top:6px;
  width:100%;
  justify-content:center;
}
.calc-tip{
  margin:-2px 0 0;
  font-size:0.86rem;
  color:var(--ink-soft);
  background:rgba(184,134,59,0.1);
  border:1px dashed var(--gold);
  border-radius:8px;
  padding:10px 14px;
}
.calc-tip a{
  color:var(--gold);
  font-weight:600;
  text-decoration:underline;
  cursor:pointer;
}

/* ============================================================
   Features
   ============================================================ */
.features{ background:var(--bg-alt); }
.features-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap:56px;
  align-items:center;
  margin-top:44px;
}
.features-grid .feature-list{ margin-top:0; }
.feature-list{
  display:flex;
  flex-direction:column;
  margin-top:44px;
  max-width:720px;
}
.feature{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:22px 0;
  border-top:1px solid rgba(245,242,233,0.14);
}
.feature-list .feature:last-child{ border-bottom:1px solid rgba(245,242,233,0.14); }
.feature-mark{
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(217,168,78,0.14);
  color:var(--gold-bright);
  font-size:0.85rem;
  font-weight:700;
  margin-top:2px;
}
.feature-body h3{
  font-size:1.05rem; color:var(--cream); margin-bottom:6px; font-weight:600;
  font-family:var(--body);
}
.feature-body p{ color:var(--cream-soft); font-size:0.92rem; }

/* ============================================================
   Terms — accordion
   ============================================================ */
.terms{ background:var(--bg); max-width:100%; }
.accordion{ margin-top:40px; border-top:1px solid rgba(245,242,233,0.14); }
.acc-item{ border-bottom:1px solid rgba(245,242,233,0.14); }
.acc-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer;
  padding:22px 0;
  color:var(--cream);
  font-family:var(--display);
  font-size:1.08rem;
  text-align:left;
}
.acc-trigger .plus{
  font-family:var(--mono);
  font-size:1.2rem;
  color:var(--gold-bright);
  transition:transform .25s ease;
  flex-shrink:0;
}
.acc-item.open .acc-trigger .plus{ transform:rotate(45deg); }
.acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.acc-panel-inner{
  padding-bottom:22px;
  color:var(--cream-soft);
  max-width:70ch;
  font-size:0.97rem;
}

/* ============================================================
   Refunds
   ============================================================ */
.refunds{ background:var(--bg-alt); }
.refund-card{
  border-left:3px solid var(--rust);
  padding:8px 0 8px 28px;
  max-width:640px;
}
.refund-card ul{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.refund-card li{
  color:var(--cream-soft);
  font-size:0.97rem;
  padding-left:18px;
  position:relative;
}
.refund-card li::before{
  content:"—";
  position:absolute; left:0; color:var(--rust);
}

/* ============================================================
   Footer CTA
   ============================================================ */
.footer-cta{ background:var(--bg); padding-bottom:96px; }
.footer-cta-inner{
  text-align:center;
  max-width:560px;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.footer-logo{ height:46px; width:46px; object-fit:contain; border-radius:10px; }
.footer-cta-inner p{ color:var(--cream-soft); font-size:1.02rem; }

.site-footer{
  border-top:1px solid rgba(245,242,233,0.1);
  padding:26px 0;
}
.footer-inner{
  display:flex; gap:10px; align-items:center;
  font-size:0.85rem; color:var(--cream-soft);
}
.footer-inner .dot{ color:rgba(245,242,233,0.3); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px){
  .hero-content{ max-width:none; }
  .features-grid{ grid-template-columns:1fr; gap:40px; }
  .packages-calc-grid{ grid-template-columns:1fr; gap:64px; }
  .steps{ grid-template-columns:1fr; gap:28px; }
  .site-nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:8px;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--cream); display:block; }

  body.nav-open .site-nav{
    display:flex; flex-direction:column;
    position:absolute; top:76px; left:0; right:0;
    background:var(--bg-alt);
    padding:20px 28px 28px;
    gap:18px;
    border-bottom:1px solid rgba(245,242,233,0.1);
  }
  body.nav-open .header-cta{
    display:inline-flex;
    position:absolute; top:200px; left:28px;
  }
}

@media (max-width: 640px){
  .wrap{ padding:0 20px; }
  .hero{ padding:64px 0 56px; }
  .section{ padding:64px 0; }
  .hero-cta .btn, .footer-cta-inner .btn{ width:100%; justify-content:center; }
  .hero-cta{ flex-direction:column; }
  .footer-cta-inner .hero-cta{ width:100%; }
  .receipt{ padding:30px 20px 24px; transform:none; }
  .r-name{ font-size:0.9rem; }
  .calc-card{ padding:26px 20px 24px; }
  .calc-recording-count{ padding-left:0; border-left:none; border-top:1px dashed var(--paper-line); padding-top:16px; }
  .calc-row{ flex-direction:column; align-items:stretch; gap:22px; }
  .calc-field-right{ text-align:left; }
  .calc-field-right .pill-toggle{ margin-left:0; }
  .feature{ gap:14px; }
}