/* BeatBook explainer site — styles.css
   Palette built around accent #0891B2. A KARYA studio build. */

:root{
  --ink:      #0B1F26;   /* deep teal-black text */
  --ink-soft: #33484F;   /* secondary text */
  --paper:    #F7F5EF;   /* warm off-white, diary paper */
  --paper-2:  #FFFFFF;   /* card surface */
  --accent:   #0891B2;   /* the cyan accent */
  --accent-deep:#075E6E; /* darker cyan for depth/hover */
  --tint:     #E3EDEE;   /* muted cool tint panels */
  --tint-2:   #EEF3F1;   /* faint alt tint */
  --money-in: #1A7A5A;   /* semantic: money collected (green), used sparingly */
  --due:      #B4531B;   /* semantic: amount owed / attention */
  --line:     #DDD8CC;   /* hairline on paper */
  --line-ink: rgba(255,255,255,.14);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Menlo", "Consolas", "Roboto Mono", monospace;

  --maxw: 1120px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --r: 14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:clamp(16px,1.05vw,18px);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.mono{ font-family:var(--mono); font-feature-settings:"tnum" 1; letter-spacing:-.01em; }

a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.08; letter-spacing:-.022em; font-weight:800; }
h1{ font-size:clamp(2.4rem,6.2vw,4.3rem); }
h2{ font-size:clamp(1.85rem,4vw,3rem); }
h3{ font-size:1.16rem; letter-spacing:-.012em; }
p{ margin:0; }
em{ font-style:normal; color:var(--accent-deep); font-weight:600; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:inherit; font-weight:700; text-decoration:none; cursor:pointer;
  background:var(--accent); color:#fff; border:2px solid var(--accent);
  padding:.7rem 1.2rem; border-radius:999px; letter-spacing:-.01em;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{ background:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:.92rem 1.6rem; font-size:1.02rem; }
.btn--sm{ padding:.5rem .95rem; font-size:.9rem; }
.btn--block{ width:100%; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--paper-2); border-color:var(--ink); color:var(--ink); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem var(--pad);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__brand{ display:flex; align-items:center; gap:.5rem; font-weight:800; text-decoration:none; letter-spacing:-.02em; font-size:1.12rem; }
.nav__mark{ color:var(--accent); }
.nav__links{ display:flex; gap:1.3rem; margin-left:auto; font-size:.95rem; }
.nav__links a{ text-decoration:none; color:var(--ink-soft); font-weight:600; transition:color .15s; }
.nav__links a:hover{ color:var(--accent-deep); }
.nav__cta{ margin-left:.4rem; }
@media (max-width:820px){
  .nav__links{ display:none; }
  .nav__cta{ margin-left:auto; }
}

/* ---------- shared section frame ---------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(3.2rem,7vw,5.5rem) var(--pad); }
.section--tint{ background:var(--tint-2); max-width:none; }
.section--tint > *{ max-width:var(--maxw); margin-inline:auto; }
.section--ink{ background:var(--ink); color:var(--paper); max-width:none; }

.stop-head{ max-width:760px; margin-bottom:2.4rem; }
.stop-num{
  display:inline-block; font-family:var(--mono); font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep);
  padding:.28rem .55rem; border:1px solid var(--accent); border-radius:6px;
  margin-bottom:1rem;
}
.stop-num--light{ color:var(--accent); border-color:rgba(8,145,178,.55); }
.stop-sub{ margin-top:.9rem; color:var(--ink-soft); font-size:1.02rem; }

.eyebrow{
  font-family:var(--mono); font-size:.8rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-deep); margin-bottom:1rem;
}

/* ---------- 1. HERO ---------- */
.hero{ max-width:var(--maxw); margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) var(--pad) clamp(2.5rem,5vw,3.5rem); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.hl{ color:var(--accent); }
.hero__lede{ margin-top:1.35rem; font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--ink-soft); max-width:34ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }
.hero__note{ margin-top:1rem; font-size:.9rem; color:var(--ink-soft); }

/* beat strip card (signature) */
.hero__beat{ perspective:1200px; }
.beatcard{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 24px 50px -28px rgba(11,31,38,.4); overflow:hidden;
  transform:rotate(-1.1deg);
}
.beatcard__top{
  display:flex; justify-content:space-between; align-items:center; gap:.5rem;
  padding:.9rem 1.1rem; background:var(--accent); color:#fff; font-size:.82rem; font-weight:600;
}
.beatcard__day{ letter-spacing:-.01em; }
.beatcard__area{ opacity:.92; font-family:var(--mono); font-size:.76rem; }
.beat{ list-style:none; margin:0; padding:.35rem .3rem; }
.beat__stop{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem;
  padding:.62rem .8rem; border-radius:9px; position:relative;
}
.beat__pin{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:.82rem; font-weight:600;
  background:var(--tint); color:var(--accent-deep); border:1px solid var(--line);
}
.beat__name{ font-weight:600; font-size:.95rem; }
.beat__amt{ font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); }
.beat__amt.paid{ color:var(--money-in); font-weight:600; }
.beat__amt.due{ color:var(--due); font-weight:600; }
.beat__stop.is-done .beat__pin{ background:var(--money-in); color:#fff; border-color:var(--money-in); }
.beat__stop.is-done .beat__name{ color:var(--ink-soft); }
.beat__stop.is-now{ background:var(--tint); }
.beat__stop.is-now .beat__pin{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 0 4px rgba(8,145,178,.16); }
.beatcard__foot{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.85rem 1.1rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--ink-soft); background:var(--tint-2);
}
.beatcard__foot strong{ color:var(--ink); }
.dot{ width:4px; height:4px; border-radius:50%; background:var(--line); }

@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__lede{ max-width:48ch; }
  .beatcard{ transform:none; max-width:440px; }
}

/* ---------- 2. PROBLEM ---------- */
.prose-lead{ max-width:62ch; font-size:1.12rem; color:var(--ink-soft); }
.prose-lead strong{ color:var(--ink); }
.pain{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.pain__item{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem 1.35rem; position:relative;
}
.pain__item::before{ content:""; position:absolute; left:0; top:1.4rem; bottom:1.4rem; width:3px; background:var(--due); border-radius:3px; }
.pain__tag{
  display:inline-block; font-family:var(--mono); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600; color:var(--due); margin-bottom:.6rem;
}
.pain__item p{ color:var(--ink-soft); font-size:.98rem; }
.pain__punch{ margin-top:2rem; max-width:60ch; font-size:1.16rem; font-weight:600; }
.pain__punch em{ color:var(--accent-deep); }
@media (max-width:760px){ .pain{ grid-template-columns:1fr; } }

/* ---------- 3. INSIGHT ---------- */
.insight{ background:var(--ink); color:var(--paper); }
.insight__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(3.2rem,7vw,5.5rem) var(--pad); }
.insight__line{ margin-top:1.1rem; font-size:clamp(1.5rem,3.3vw,2.5rem); line-height:1.22; font-weight:700; letter-spacing:-.018em; max-width:24ch; }
.insight .u{ color:var(--accent); border-bottom:3px solid rgba(8,145,178,.55); padding-bottom:1px; }
.insight__sub{ margin-top:1.6rem; max-width:56ch; color:rgba(247,245,239,.72); font-size:1.05rem; }

/* ---------- 4. HOW IT WORKS ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; counter-reset:step; }
.step{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.5rem 1.6rem; position:relative;
}
.step__n{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:var(--tint); color:var(--accent-deep); font-size:1.15rem; font-weight:700;
  border:1px solid var(--line); margin-bottom:1rem;
}
.step h3{ margin-bottom:.5rem; }
.step p{ color:var(--ink-soft); font-size:.99rem; }
@media (max-width:720px){ .steps{ grid-template-columns:1fr; } }

/* ---------- 5. FEATURES ---------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feat{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:1.35rem 1.35rem 1.45rem; transition:transform .15s ease, box-shadow .15s ease;
}
.feat:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(11,31,38,.35); }
.feat h3{ display:flex; align-items:center; gap:.55rem; margin-bottom:.5rem; }
.feat h3::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.feat p{ color:var(--ink-soft); font-size:.97rem; }
@media (max-width:860px){ .features{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .features{ grid-template-columns:1fr; } }

/* ---------- 6. PRODUCT PREVIEW ---------- */
.device{
  max-width:640px; margin-inline:auto;
  background:var(--paper-2); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 34px 70px -34px rgba(11,31,38,.42); overflow:hidden;
}
.device__bar{
  display:flex; align-items:center; gap:.45rem; padding:.7rem 1rem;
  background:var(--ink); color:rgba(247,245,239,.7);
}
.device__dot{ width:10px; height:10px; border-radius:50%; background:rgba(247,245,239,.28); }
.device__title{ margin-left:.6rem; font-size:.78rem; font-family:var(--mono); letter-spacing:-.01em; }
.app{ padding:1.3rem clamp(1rem,3vw,1.5rem) 1.5rem; background:linear-gradient(180deg,var(--tint-2),var(--paper-2) 40%); }
.app__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.2rem; }
.app__eyebrow{ font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }
.app__h{ font-size:1.5rem; margin-top:.2rem; }
.badge{ font-size:.78rem; font-weight:600; color:var(--accent-deep); background:var(--tint); border:1px solid var(--line); padding:.32rem .65rem; border-radius:999px; white-space:nowrap; }

.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:1.2rem; }
.kpi{ background:var(--paper-2); border:1px solid var(--line); border-radius:11px; padding:.8rem .85rem; }
.kpi__label{ display:block; font-size:.74rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
.kpi__val{ display:block; font-size:1.3rem; font-weight:700; margin-top:.28rem; }
.kpi__val--in{ color:var(--money-in); }
.kpi__bar{ height:5px; border-radius:3px; background:var(--tint); margin-top:.55rem; overflow:hidden; }
.kpi__bar i{ display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .5s cubic-bezier(.2,.7,.2,1); }

.visits{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.visit{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:.7rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:11px; padding:.6rem .75rem;
  transition:background .25s ease, border-color .25s ease;
}
.visit__pin{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:.82rem; font-weight:600;
  background:var(--tint); color:var(--accent-deep); border:1px solid var(--line);
}
.visit__body{ display:flex; flex-direction:column; line-height:1.25; }
.visit__body strong{ font-size:.96rem; }
.visit__body small{ color:var(--ink-soft); font-size:.78rem; }
.visit__due{ font-size:.9rem; font-weight:600; color:var(--due); white-space:nowrap; }
.visit__state{ font-size:.78rem; font-weight:600; color:var(--money-in); white-space:nowrap; }
.visit__btn{
  font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; white-space:nowrap;
  background:var(--accent); color:#fff; border:none; border-radius:999px; padding:.4rem .8rem;
  transition:background .15s ease, transform .12s ease;
}
.visit__btn:hover{ background:var(--accent-deep); }
.visit__btn:active{ transform:scale(.96); }
.visit.is-done{ background:var(--tint-2); border-color:var(--tint); }
.visit.is-done .visit__pin{ background:var(--money-in); color:#fff; border-color:var(--money-in); }
.visit.is-done .visit__body strong{ color:var(--ink-soft); }
.visit.just-done{ animation:flash .7s ease; }
@keyframes flash{ 0%{ background:rgba(26,122,90,.16); } 100%{ background:var(--tint-2); } }
@media (prefers-reduced-motion:reduce){ .visit.just-done{ animation:none; } .kpi__bar i{ transition:none; } }

.preview__cap{ text-align:center; margin-top:1rem; font-size:.82rem; color:var(--ink-soft); }
@media (max-width:480px){
  .kpis{ grid-template-columns:1fr; }
  .visit{ grid-template-columns:auto 1fr auto; }
  .visit__state, .visit__btn{ grid-column:1 / -1; justify-self:start; }
  .visit__btn{ width:100%; }
}

/* ---------- 7. PRICING ---------- */
.pricing{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
.pricing__copy p{ margin-top:1rem; color:rgba(247,245,239,.78); max-width:50ch; }
.pricing__copy em{ color:var(--accent); }
.pricing__list{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.6rem; }
.pricing__list li{ position:relative; padding-left:1.7rem; color:rgba(247,245,239,.9); font-size:.98rem; }
.pricing__list li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:800; }
.pricecard{
  background:var(--paper); color:var(--ink); border-radius:18px; padding:2rem 1.8rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55); text-align:center;
}
.pricecard__plan{ font-family:var(--mono); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); }
.pricecard__price{ display:flex; align-items:baseline; justify-content:center; gap:.25rem; margin:.5rem 0 .1rem; }
.pricecard__cur{ font-size:1.3rem; font-weight:700; color:var(--ink-soft); }
.pricecard__num{ font-size:3.7rem; font-weight:800; letter-spacing:-.03em; }
.pricecard__num--text{ font-size:1.6rem; line-height:1.15; letter-spacing:-.01em; color:var(--accent-deep); }
.pricecard__per{ color:var(--ink-soft); font-size:.92rem; margin-bottom:1.4rem; }
.pricecard__fine{ margin-top:.8rem; font-size:.8rem; color:var(--ink-soft); }
@media (max-width:760px){ .pricing{ grid-template-columns:1fr; } }

/* ---------- 8. WHO + FAQ ---------- */
.who{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:start; }
.who__lead{ margin-top:1rem; color:var(--ink-soft); font-size:1.05rem; }
.who__tags{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.55rem; }
.who__tags li{ position:relative; padding-left:1.6rem; font-weight:600; font-size:.97rem; }
.who__tags li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.faq{ display:grid; gap:.7rem; }
.qa{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:.3rem 1.1rem; }
.qa summary{
  cursor:pointer; list-style:none; font-weight:700; padding:.95rem 0; position:relative; padding-right:2rem;
  letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"+"; position:absolute; right:.1rem; top:50%; transform:translateY(-50%);
  font-size:1.4rem; font-weight:400; color:var(--accent-deep); transition:transform .2s ease;
}
.qa[open] summary::after{ content:"−"; }
.qa p{ padding:0 0 1rem; color:var(--ink-soft); font-size:.98rem; }
@media (max-width:760px){ .who{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.footer{ background:var(--ink); color:var(--paper); }
.footer__inner{
  max-width:var(--maxw); margin:0 auto; padding:2.4rem var(--pad);
  display:flex; justify-content:space-between; align-items:center; gap:1.2rem; flex-wrap:wrap;
}
.footer__brand{ display:flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:-.02em; }
.footer__brand svg{ color:var(--accent); }
.footer__tag{ font-weight:500; color:rgba(247,245,239,.6); font-size:.9rem; margin-left:.3rem; }
.footer__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; font-size:.9rem; }
.footer__meta a{ color:var(--accent); text-decoration:none; font-weight:600; }
.footer__meta a:hover{ text-decoration:underline; }
.footer__studio{ font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(247,245,239,.55); }
@media (max-width:560px){
  .footer__inner{ flex-direction:column; align-items:flex-start; }
  .footer__meta{ align-items:flex-start; }
  .footer__tag{ margin-left:0; }
}