/* untitled-a1: Untitled UI-style design tokens + refinements, loaded last. Overrides only; no copy changes.
   Tokens follow Untitled UI's scales (4/8px spacing, display/text type sizes, radius + shadow steps), adapted for the dark theme. */
:root{
  /* spacing (4/8 scale) */
  --u-1:4px;--u-2:8px;--u-3:12px;--u-4:16px;--u-5:20px;--u-6:24px;--u-8:32px;--u-10:40px;--u-12:48px;--u-16:64px;
  /* radius: md 8, lg 10, xl 12, 2xl 16 */
  --u-r-md:8px;--u-r-lg:10px;--u-r-xl:12px;--u-r-2xl:16px;
  /* dark shadows (black based) + 1px top highlight */
  --u-hi:inset 0 1px 0 rgba(245,241,232,.05);
  --u-sh-xs:0 1px 2px rgba(0,0,0,.5);
  --u-sh-md:0 4px 8px -2px rgba(0,0,0,.45),0 2px 4px -2px rgba(0,0,0,.4);
  --u-sh-lg:0 12px 16px -4px rgba(0,0,0,.5),0 4px 6px -2px rgba(0,0,0,.4);
  --u-sh-xl:0 20px 24px -4px rgba(0,0,0,.55),0 8px 8px -4px rgba(0,0,0,.4);
  /* borders */
  --u-line:#1E2640;
  --u-focus:0 0 0 4px rgba(34,195,230,.24);
}

/* ---------- Type scale: section headings (display) + supporting text ---------- */
.h2,.about .ab-h,.faq .faq-head .h2,.book h2{font-size:32px;line-height:40px;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
@media (min-width:768px){.h2,.about .ab-h,.faq .faq-head .h2,.book h2{font-size:40px;line-height:48px}}
@media (min-width:1024px){.h2,.about .ab-h,.faq .faq-head .h2,.book h2{font-size:48px;line-height:56px}}
.sec-head .lede{font-size:18px;line-height:28px}
@media (min-width:768px){.sec-head .lede{font-size:20px;line-height:30px}}

/* ---------- Section header pattern: badge (eyebrow) ---------- */
.kick{display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;align-items:center;gap:10px;padding:5px 14px 5px 12px;border:1px solid rgba(34,195,230,.30);background:rgba(34,195,230,.08);border-radius:999px;font:500 13px/20px var(--body);letter-spacing:.08em;color:rgba(245,241,232,.86)}
.kick-l,.about .kick,.faq .kick,.book .kick,.calc-l .kick{margin-left:0;margin-right:0}
.kick .kn{font-weight:600;color:var(--ac)}
.kick .kl{width:1px;height:12px;background:rgba(34,195,230,.40)}
.pain .kick .kl{display:none}

/* ---------- Cards: one radius, one shadow family ---------- */
.calc,.ba-table,.bk-card,.tl-card{border-radius:var(--u-r-2xl)}
.calc,.bk-card{box-shadow:var(--u-sh-xl),var(--u-hi)}
.ba-table,.tl-card{box-shadow:var(--u-sh-lg),var(--u-hi)}
.tlv,.rcp{border-radius:var(--u-r-xl)}
.dg{border-radius:var(--u-r-2xl)}
/* featured icon on the section 01 tiles (CSS only: the existing icon gets a tinted rounded square) */
.dg-tile .dg-ic{box-sizing:content-box;padding:4px;border-radius:var(--u-r-md);color:var(--ac);background:rgba(34,195,230,.08);border:1px solid rgba(34,195,230,.26)}
.dg-tile{gap:10px;padding:6px 14px 6px 6px}
@media (max-width:819.98px){
  .dg-tile{padding:6px 10px 6px 6px;gap:8px}
}

/* ---------- Six pain cards ---------- */
.pain-list{border:1px solid var(--u-line);border-radius:var(--u-r-2xl);overflow:hidden;background:linear-gradient(180deg,rgba(17,17,36,.72),rgba(17,17,36,.42));box-shadow:var(--u-sh-lg),var(--u-hi)}
.pain-card{padding:28px 20px 32px;border-top:1px solid var(--u-line)}
.pain-card:first-child{border-top:0}
.pain-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 20px;border-radius:var(--u-r-lg);color:var(--ac);background:rgba(34,195,230,.08);border:1px solid rgba(34,195,230,.28);box-shadow:var(--u-sh-xs),var(--u-hi)}
.pain-ic svg{display:block}
.pain-q{line-height:1.3}
.pain-b{font-size:16px;line-height:24px}
@media (max-width:899.98px){.pain-q{padding-right:40px}}
@media (min-width:900px){
  .pain-card{padding:36px 36px 40px}
  .pain-card:nth-child(2){border-top:0}
}

/* ---------- Inputs (intake form) ---------- */
.bk-form{gap:20px}
.bk-field{gap:6px}
.bk-field label{font-size:14px;line-height:20px;font-weight:500;color:var(--tx)}
.bk-opt{font-size:14px}
.bk-form input{min-height:48px;padding:12px 14px;font-size:16px;line-height:24px;background:#0C1020;border:1px solid rgba(245,241,232,.22);border-radius:var(--u-r-lg);box-shadow:var(--u-sh-xs)}
.bk-form input:hover{border-color:rgba(245,241,232,.38)}
.bk-form input:focus{border-color:var(--ac);box-shadow:var(--u-sh-xs),var(--u-focus)}
.bk-form input[aria-invalid="true"]{border-color:#FF8A7A}
.bk-form input[aria-invalid="true"]:focus{box-shadow:var(--u-sh-xs),0 0 0 4px rgba(255,138,122,.22)}

/* ---------- Calculator sliders ---------- */
.sl input[type=range]::-webkit-slider-thumb{box-shadow:var(--u-sh-md)}
.sl input[type=range]::-moz-range-thumb{box-shadow:var(--u-sh-md)}
.sl input[type=range]:focus-visible::-webkit-slider-thumb{outline:0;box-shadow:var(--u-sh-md),var(--u-focus)}
.sl input[type=range]:focus-visible::-moz-range-thumb{outline:0;box-shadow:var(--u-sh-md),var(--u-focus)}
.calc-l .lede{font-size:18px;line-height:28px}

/* ---------- Dividers use the one border colour ---------- */
.ba-row{border-color:var(--u-line)}

/* ---------- Subtle mesh + grid behind the hero (decorative; text colours and sizes unchanged) ---------- */
.hero{isolation:isolate}
.hero::before,.hero::after{pointer-events:none}
.hero::before{display:block;content:"";position:absolute;inset:0;width:auto;height:auto;z-index:-1;
  background:
    radial-gradient(48% 55% at 14% 0%,rgba(34,195,230,.075),transparent 70%),
    radial-gradient(44% 50% at 88% 6%,rgba(108,138,214,.085),transparent 70%),
    linear-gradient(rgba(245,241,232,.028) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(245,241,232,.028) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(75% 80% at 50% 0%,#000 25%,transparent 75%);mask-image:radial-gradient(75% 80% at 50% 0%,#000 25%,transparent 75%)}