/* CallYep — landing page styles.
   Built on the Mergify Design Standard v1 kit (~/workspace/design-standard/kit/web/):
   tokens.css and the motion gate are copied verbatim; components are adapted
   from components.css for a marketing one-pager. Rules honored: tokens only
   (no hard-coded colors/durations in the site block), dark-first, transform/
   opacity motion only, duration budget, prefers-reduced-motion gate shipped.
   LANDING RE-SKIN (the one sanctioned change, per STANDARD.md "re-skin by
   changing token values only"): --fs-display/--fs-title are raised for
   marketing scale and a --page-max container token is added. Every other
   token value is the kit's, untouched. */

/* ================= KIT tokens.css (values verbatim except the noted re-skin) ================= */
:root {
  --bg:            #0b1017;
  --surface:       #111927;
  --surface-1:     #16202f;
  --surface-2:     #1b2839;
  --surface-3:     #22334a;
  --on-surface:    #e6eef7;
  --on-variant:    #9db0c5;
  --outline:       #2c3e55;
  --primary:       #2dd4bf;
  --primary-ink:   #062a26;
  --primary-dim:   rgba(45, 212, 191, .14);
  --accent-grad:   linear-gradient(135deg, #14b8a6, #2dd4bf 55%, #67e8f9);
  --success:       #34d399;
  --warning:       #fbbf24;
  --danger:        #f87171;
  --danger-dim:    rgba(248, 113, 113, .13);
  --scrim:         rgba(3, 7, 12, .62);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --page-pad: var(--sp-4);
  --tap-min: 44px;

  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  --el-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 6px rgba(0,0,0,.22);
  --el-2: 0 4px 10px rgba(0,0,0,.38), 0 2px 4px rgba(0,0,0,.25);
  --el-3: 0 10px 28px rgba(0,0,0,.5),  0 4px 8px rgba(0,0,0,.3);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  /* Re-skin: display/title raised for a marketing page (kit app values are
     28/34 and 20/26). All other type tokens are the kit's. */
  --fs-display: 40px; --lh-display: 46px;
  --fs-title:   24px; --lh-title:   31px;
  --fs-heading: 16px; --lh-heading: 22px;
  --fs-body:    15px; --lh-body:    21px;
  --fs-label:   13px; --lh-label:   18px;
  --fs-caption: 12px; --lh-caption: 16px;
  --page-max: 1080px; /* landing container token (re-skin addition) */

  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 320ms;
  --dur-5: 480ms;
  --ease-standard:        cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:      cubic-bezier(0.2, 0, 0, 1);
  --ease-emph-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-emph-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-spring:        cubic-bezier(0.34, 1.35, 0.44, 1);
  --ease-spring-snappy: cubic-bezier(0.3, 1.6, 0.5, 1);
  --ease-out:           cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);

  --nav-h: 64px;
}

[data-theme="light"] {
  --bg: #f4f7fa; --surface: #ffffff; --surface-1: #eef3f8;
  --surface-2: #e5edf4; --surface-3: #d9e4ef;
  --on-surface: #12202f; --on-variant: #4d627a; --outline: #c3d2e0;
  --primary: #0d9488; --primary-ink: #ffffff;
  --primary-dim: rgba(13, 148, 136, .12);
  --scrim: rgba(18, 32, 47, .45);
  --el-1: 0 1px 2px rgba(18,32,47,.08), 0 1px 6px rgba(18,32,47,.06);
  --el-2: 0 4px 10px rgba(18,32,47,.1), 0 2px 4px rgba(18,32,47,.07);
  --el-3: 0 10px 28px rgba(18,32,47,.16), 0 4px 8px rgba(18,32,47,.09);
}

/* ================= KIT motion.css (core classes + the mandatory gate) ================= */
.rise { animation: rise var(--dur-3) var(--ease-emph-decelerate) both;
        animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pressable { transition: transform var(--dur-1) var(--ease-out),
                         opacity var(--dur-1) var(--ease-out); }
.pressable:active { transform: scale(.97); opacity: .88; }
.chip { transition: background-color var(--dur-2) var(--ease-standard),
                    color var(--dur-2) var(--ease-standard),
                    transform var(--dur-1) var(--ease-out); }
.chip:active { transform: scale(.95); }
.bar-fill { transform-origin: left center;
            transition: transform var(--dur-4) var(--ease-spring),
                        background-color var(--dur-3) var(--ease-standard); }
.success-check { width: 56px; height: 56px; }
.success-check circle, .success-check path {
  fill: none; stroke: var(--success); stroke-width: 3; stroke-linecap: round;
  stroke-linejoin: round; }
.success-check circle { stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: draw var(--dur-4) var(--ease-out) forwards; }
.success-check path { stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: draw var(--dur-3) var(--dur-2) var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.toast { animation: toast-in var(--dur-3) var(--ease-spring) both; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Reveal-on-scroll: hidden state applies only when JS is present (html.js),
   so no-JS and crawler renders are never blank. .rv elements get .rise
   added by the IntersectionObserver in the page script. */
html.js .rv { opacity: 0; }

/* ---- MANDATORY reduced-motion gate — do not remove (kit motion.css) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js .rv { opacity: 1; }
}

/* ================= Components (adapted from KIT components.css) ================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--on-surface); font-family: var(--font);
       font-size: var(--fs-body); line-height: var(--lh-body);
       padding-bottom: var(--nav-h); }
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.02em; }
h2 { font-size: var(--fs-title);   line-height: var(--lh-title);   letter-spacing: -.01em; }
h3 { font-size: var(--fs-heading); line-height: var(--lh-heading); }
.mut { color: var(--on-variant); font-size: var(--fs-label); line-height: var(--lh-label); }
.body-mut { color: var(--on-variant); }
.caption { color: var(--on-variant); font-size: var(--fs-caption); line-height: var(--lh-caption); }
section { scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }

.card { background: var(--surface-1); border: 1px solid var(--outline);
        border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--el-1);
        display: flex; flex-direction: column; gap: var(--sp-3); }

.btn { appearance: none; border: 1px solid var(--outline); background: var(--surface-2);
  color: var(--on-surface); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none;
  border-radius: var(--r-full); padding: 0 var(--sp-5); min-height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out),
              background-color var(--dur-2) var(--ease-standard); }
.btn:active { transform: scale(.97); opacity: .9; }
.btn.primary { background: var(--accent-grad); border-color: transparent; color: var(--primary-ink); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.small { min-height: 38px; padding: 0 var(--sp-4); font-size: var(--fs-label); }

.chiprow { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { appearance: none; font: inherit; font-size: var(--fs-label); font-weight: 600;
  color: var(--on-variant); background: var(--surface-2);
  border: 1px solid var(--outline); border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-3); min-height: 36px;
  display: inline-flex; align-items: center; gap: var(--sp-2); }
.chip.on { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); }
.chip svg { width: 16px; height: 16px; }

.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label { font-size: var(--fs-label); color: var(--on-variant); font-weight: 600; }
.input, select.input, textarea.input { appearance: none; width: 100%; font: inherit;
  color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--r-md); padding: var(--sp-3); min-height: var(--tap-min);
  transition: border-color var(--dur-2) var(--ease-standard); }
.input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }

.bar { height: 10px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; width: 100%; background: var(--accent-grad); border-radius: inherit; }

.toast-wrap { position: fixed; left: 0; right: 0; z-index: 50; display: flex;
  justify-content: center; pointer-events: none;
  bottom: calc(var(--nav-h) + var(--sp-3)); }
.toast { background: var(--surface-3); color: var(--on-surface); border: 1px solid var(--outline);
  box-shadow: var(--el-2); border-radius: var(--r-full); padding: var(--sp-2) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-2); font-weight: 600;
  font-size: var(--fs-label); max-width: 92vw; }
.toast svg { width: 18px; height: 18px; color: var(--success); flex: none; }

.stat .num { font-size: var(--fs-title); font-weight: 800; color: var(--primary);
             letter-spacing: -.02em; line-height: 1.15; }

/* ================= CallYep landing ================= */
.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad);
        display: flex; flex-direction: column; gap: var(--sp-10); }
.grad-text { background: var(--accent-grad); -webkit-background-clip: text;
             background-clip: text; color: transparent; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--outline); }
.site-head .in { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-3) var(--page-pad);
  display: flex; align-items: center; gap: var(--sp-4); }
.logo { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none;
  color: var(--on-surface); font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; }
.logo .mark { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center; color: var(--primary-ink); flex: none; }
.logo .mark svg { width: 22px; height: 22px; }
.logo .yep { color: var(--primary); }
.site-nav { margin-left: auto; display: none; align-items: center; gap: var(--sp-5); }
.site-nav a { color: var(--on-variant); text-decoration: none; font-weight: 600;
  font-size: var(--fs-label); transition: color var(--dur-2) var(--ease-standard); }
.site-nav a:hover { color: var(--on-surface); }
.head-cta { margin-left: auto; }
@media (min-width: 900px) {
  .site-nav { display: flex; }
  .head-cta { margin-left: 0; }
}

/* Hero */
.hero { padding-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5); }
.hero .lead { font-size: var(--fs-heading); line-height: var(--lh-heading);
  color: var(--on-variant); max-width: 62ch; }
.hero-grid { display: flex; flex-direction: column; gap: var(--sp-5); }
@media (min-width: 900px) {
  .hero-grid { flex-direction: row; align-items: stretch; }
  .hero-grid > .hero-main { flex: 1.25; }
  .hero-grid > .demo-card { flex: 1; }
}
.hero-main { display: flex; flex-direction: column; gap: var(--sp-5); justify-content: center; }
.demo-card { background: var(--surface-1); border: 1px solid var(--primary);
  border-radius: var(--r-2xl); padding: var(--sp-6); box-shadow: var(--el-3);
  display: flex; flex-direction: column; gap: var(--sp-3); justify-content: center; }
.demo-num { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 800;
  letter-spacing: -.02em; color: var(--on-surface); text-decoration: none; white-space: nowrap; }
.demo-num:hover { color: var(--primary); }
.demo-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.trust-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Problem stats */
.stats-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (min-width: 900px) { .stats-band { grid-template-columns: repeat(4, 1fr); } }
.stat-card { background: var(--surface-1); border: 1px solid var(--outline);
  border-radius: var(--r-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }

/* Section scaffolding */
.block { display: flex; flex-direction: column; gap: var(--sp-5); }
.block > .kicker { color: var(--primary); font-size: var(--fs-label); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; }
.block > p.intro { color: var(--on-variant); max-width: 68ch; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-2.wide { grid-template-columns: 1fr 1fr; }
}
.card .ic { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--primary-dim);
  color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.card .ic svg { width: 24px; height: 24px; }
.step-n { font-size: var(--fs-caption); font-weight: 800; color: var(--primary);
  text-transform: uppercase; letter-spacing: .08em; }
blockquote.greet { border-left: 3px solid var(--primary); padding-left: var(--sp-4);
  font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 600; }

/* Capture checklist + sample owner text */
.check-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.check-list li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.check-list svg { width: 20px; height: 20px; color: var(--success); flex: none; margin-top: 1px; }
.check-list b { display: block; }
.sms-mock { background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--r-xl); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-label); line-height: var(--lh-label); }
.sms-mock .hd { font-weight: 800; font-size: var(--fs-body); }
.sms-mock .ok { color: var(--success); font-weight: 700; }

/* Pricing */
.tier { position: relative; }
.tier.pop { border-color: var(--primary); box-shadow: var(--el-2); }
.tier .price { font-size: var(--fs-display); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.tier .price small { font-size: var(--fs-label); font-weight: 600; color: var(--on-variant); letter-spacing: 0; }
.tier ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.tier ul li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-label); line-height: var(--lh-label); }
.tier ul li svg { width: 16px; height: 16px; color: var(--success); flex: none; margin-top: 2px; }
.pop-badge { position: absolute; top: calc(var(--sp-3) * -1); right: var(--sp-4); }
.rules-card { border-color: var(--warning); }
.rules-card .ic { background: var(--danger-dim); color: var(--warning); }

/* Founding 5 */
.founding { border: 1px solid var(--primary); border-radius: var(--r-2xl);
  background: var(--surface-1); box-shadow: var(--el-3); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-4); }
.founding .price { font-size: var(--fs-display); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.founding .price small { font-size: var(--fs-label); font-weight: 600; color: var(--on-variant); letter-spacing: 0; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq details { background: var(--surface-1); border: 1px solid var(--outline);
  border-radius: var(--r-lg); padding: var(--sp-4); }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; min-height: var(--tap-min);
  display: flex; align-items: center; gap: var(--sp-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { margin-left: auto; color: var(--on-variant); flex: none;
  transition: transform var(--dur-2) var(--ease-standard); }
.faq summary .chev svg { width: 20px; height: 20px; display: block; }
.faq details[open ] summary .chev { transform: rotate(180deg); }
.faq details p { color: var(--on-variant); margin-top: var(--sp-2); max-width: 68ch; }

/* Lead form */
.lead-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.form-status { font-size: var(--fs-label); line-height: var(--lh-label); min-height: var(--lh-label); }
.form-status.ok { color: var(--success); font-weight: 600; }
.form-status.err { color: var(--danger); font-weight: 600; }

/* Footer + final CTA */
.final-cta { text-align: center; align-items: center; }
footer { border-top: 1px solid var(--outline); margin-top: var(--sp-10); }
footer .in { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-6) var(--page-pad);
  display: flex; flex-direction: column; gap: var(--sp-3); }
footer a { color: var(--on-variant); }
.foot-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }

/* Sticky mobile call bar (single action; desktop uses the header CTA) */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding: var(--sp-2) var(--page-pad) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--outline); display: flex; }
.callbar .btn { flex: 1; }
@media (min-width: 900px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}