/* ===== Zairen Visual Polish (additive layer) =====
   Loaded after mobile-fixes.css. Refines type, depth, and
   micro-interactions without changing the paper/ink theme. */

:root {
  --r: 8px;
  --shadow-hairline: 0 1px 0 rgba(21, 24, 27, .04), 0 1px 2px rgba(21, 24, 27, .04);
  --shadow-soft: 0 1px 2px rgba(21, 24, 27, .05), 0 8px 24px rgba(21, 24, 27, .06);
  --shadow-lift: 0 2px 4px rgba(21, 24, 27, .05), 0 16px 36px rgba(21, 24, 27, .09);
  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, .4);
}

/* ----- Scrollbar: hidden until hovered (reactive) -----
   Blink/WebKit: thumb + track are transparent when idle and the thumb fades
   in as a slim ink pill on hover/grabbing. `scrollbar-color` is deliberately
   NOT set here — Chrome 121+ honors it and would paint a permanent thumb.
   Firefox can't hover-reveal, so it's hidden natively (gated to browsers
   without `::-webkit-scrollbar`). Targets #scroller (homepage) and html
   (inner pages). */
html::-webkit-scrollbar,
#scroller::-webkit-scrollbar {
  width: 12px;
  background: transparent;
}

html::-webkit-scrollbar-track,
#scroller::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
#scroller::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid transparent;                  /* inset → slim pill, not a slab */
  background-clip: padding-box;
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active,
#scroller::-webkit-scrollbar-thumb:hover,
#scroller::-webkit-scrollbar-thumb:active {
  background: var(--ink-soft);
}

/* Firefox: no ::-webkit-scrollbar support → hide the bar entirely */
@supports not selector(::-webkit-scrollbar) {
  html,
  body,
  #scroller {
    scrollbar-width: none;
  }
}

/* ----- Typography ----- */
.shead h2,
.moment h2,
.phil blockquote,
.cta-line,
.phead h1 {
  letter-spacing: -.03em;
  text-wrap: balance;
}

.split .lead,
.svc .big,
.fw h3,
.step .body h3,
.prose h2 {
  letter-spacing: -.01em;
  text-wrap: balance;
}

.prose p,
.hero-sub,
.fw p,
.step .body p,
.svc p,
.moment .sub,
.feat li .v span {
  text-wrap: pretty;
}

.eyebrow {
  letter-spacing: .18em;
}

/* ----- Depth / material ----- */
.fw,
.card,
.cell,
.topic,
.ex-step,
.ledger,
.example,
.note,
.pilot {
  border-radius: var(--r);
  border-color: rgba(21, 24, 27, .12);
  box-shadow: var(--shadow-hairline), var(--edge-highlight);
}

.faq details {
  padding-top: 18px;
  padding-bottom: 18px;
}

.feat li,
.info dt,
.info dd {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* ----- Fine borders / ink accents ----- */
.fw,
.card,
.topic,
.cell {
  position: relative;
}

.fw::after,
.card::after,
.topic::after,
.cell::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--verified);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

/* Staggered reveal for the "How it works" sequence */
.proc .step:nth-child(1) { transition-delay: .04s; }
.proc .step:nth-child(2) { transition-delay: .12s; }
.proc .step:nth-child(3) { transition-delay: .20s; }
.proc .step:nth-child(4) { transition-delay: .28s; }

/* Richer wipe reveal: horizontal draw + soft fade */
.wipe {
  opacity: 0;
  transition: clip-path .9s cubic-bezier(.16, 1, .3, 1),
              opacity .7s ease .12s;
}

.wipe.in {
  opacity: 1;
}

/* ----- Micro-interactions (desktop only) ----- */
@media (hover: hover) and (pointer: fine) {
  .fw,
  .card,
  .topic,
  .cell {
    will-change: transform, box-shadow;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
  }

  .fw:hover,
  .card:hover,
  .topic:hover,
  .cell:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift), var(--edge-highlight);
    border-color: rgba(21, 24, 27, .2);
  }

  .fw:hover::after,
  .card:hover::after,
  .topic:hover::after,
  .cell:hover::after {
    transform: scaleY(1);
  }

  .nav-cta:active,
  button.cta:active,
  .backlink:active,
  .print-btn:active,
  .consent button:active,
  .card a:active {
    transform: scale(.98);
  }
}

/* ----- Lead form material (additive, shared by demo + checklist) ----- */
form.demo {
  gap: 22px;
}

form.demo input[type="text"],
form.demo input[type="email"],
form.demo select,
form.demo textarea {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(21, 24, 27, .16);
  box-shadow: var(--shadow-hairline), var(--edge-highlight);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

form.demo input[type="text"]:hover,
form.demo input[type="email"]:hover,
form.demo select:hover,
form.demo textarea:hover {
  border-color: rgba(21, 24, 27, .3);
}

form.demo input:focus,
form.demo select:focus,
form.demo textarea:focus {
  border-color: var(--verified);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 3px rgba(31, 94, 67, .12), var(--shadow-hairline);
}

form.demo .checks {
  gap: 10px 20px;
}

form.demo .checks label {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  transition: border-color .2s ease, background .2s ease;
}

form.demo .checks input[type="checkbox"] {
  accent-color: var(--verified);
}

form.demo .checks label:has(input:checked) {
  border-color: var(--verified);
  background: rgba(31, 94, 67, .07);
}

form.demo button.cta {
  box-shadow: var(--shadow-hairline);
  transition: background .25s ease, transform .2s ease, box-shadow .2s ease;
}

form.demo button.cta::after {
  content: "\00a0\2192";
  letter-spacing: 0;
}

@media (hover: hover) and (pointer: fine) {
  form.demo .checks label:hover {
    border-color: rgba(21, 24, 27, .3);
  }

  form.demo button.cta:hover {
    background: #000;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lift);
  }
}

/* ----- Hero polish ----- */
.wordmark {
  position: relative;
}

.wordmark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .30) 50%, transparent 56%);
  transform: translateX(-130%);
  animation: glint 4.2s cubic-bezier(.4, 0, .2, 1) 1.8s infinite;
}

@keyframes glint {
  0%   { transform: translateX(-130%); }
  42%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

#progress {
  box-shadow: 0 0 10px rgba(31, 94, 67, .45);
}

.hero-meta .pill {
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}

/* ----- Typography & rhythm ----- */
.shead h2,
.moment h2,
.phil blockquote,
.cta-line,
.phead h1 {
  letter-spacing: -.035em;
}

.hero-tag,
.hero-sub,
.moment .sub {
  text-wrap: balance;
}

.shead {
  margin-bottom: clamp(40px, 6vw, 56px);
}

/* ----- Card / step / feature hover depth ----- */
.step,
.feat li {
  position: relative;
}

.step::after,
.feat li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--verified);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.fw h3 {
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .step:hover::after,
  .feat li:hover::after {
    transform: scaleY(1);
  }

  .step:hover .glyph,
  .feat li:hover .k {
    color: var(--verified);
  }

  .fw:hover h3 {
    transform: translateX(2px);
  }

  .hero-meta .pill:hover {
    border-color: var(--ink);
    color: var(--ink);
    transform: translateY(-1px);
  }
}

/* ----- Ambient focal glows (existing green, low opacity) ----- */
.moment,
.phil {
  position: relative;
}

.moment::before,
.phil::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 52% at 50% 42%, rgba(31, 94, 67, .07), transparent 72%);
}

.moment > *,
.phil > * {
  position: relative;
  z-index: 1;
}

/* ----- Pricing cards (glass + hairline rows, additive) ----- */
.cards {
  gap: 20px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.cards .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 14px;
  overflow: hidden;
  border: 1px solid rgba(21, 24, 27, .14);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, .44), rgba(238, 239, 234, .32));
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
  backdrop-filter: blur(14px) saturate(1.06);
  box-shadow: var(--shadow-soft), var(--edge-highlight);
}

.cards .card .subtitle {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.cards .card ul {
  flex: 1 0 auto;
  gap: 0;
  margin-top: 2px;
  margin-bottom: 0;
  padding-bottom: 14px;
}

.cards .card li {
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.cards .card li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.cards .card li::before {
  content: "";
  top: .5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--verified);
}

.cards .card a {
  margin-top: auto;
  margin-bottom: 0;
  text-decoration: none !important;
  transition: background .25s ease, color .25s ease, transform .2s ease, box-shadow .2s ease;
}

.cards .card a::after {
  content: "\00a0\2192";
}

.cards .card a:hover {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-lift);
}

@media (hover: hover) and (pointer: fine) {
  .cards .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift), var(--edge-highlight);
    border-color: rgba(21, 24, 27, .22);
  }
}

/* ----- Resource topics: arrow reveal on hover ----- */
.topics .topic span[role="heading"] {
  transition: color .25s ease;
}

.topics .topic span[role="heading"]::after {
  content: "\00a0\2192";
  display: inline-block;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
}

.topics .topic:hover span[role="heading"] {
  color: var(--verified);
}

.topics .topic:hover span[role="heading"]::after {
  opacity: 1;
  transform: translateX(0);
}

/* ----- Badges (trust / auditor) ----- */
.badge {
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}

.badge.b {
  background: rgba(21, 24, 27, .05);
}

@media (hover: hover) and (pointer: fine) {
  .badge:hover {
    transform: translateY(-1px);
    border-color: var(--ink);
    color: var(--ink);
  }
}

/* ----- FAQ accordions ----- */
.faq details {
  transition: box-shadow .25s ease;
}

.faq summary {
  position: relative;
  padding-right: 34px;
  transition: color .25s ease;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-soft);
  transition: transform .25s ease, color .25s ease;
}

.faq details:hover summary,
.faq details[open] summary {
  color: var(--ink);
}

.faq details[open] {
  box-shadow: inset 2px 0 0 var(--verified);
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--verified);
}

/* ----- Code evidence blocks (index example flow) ----- */
.ex-step .code {
  border-left: 2px solid var(--verified);
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-hairline);
}

/* ----- Big CTA highlight sweep ----- */
.cta-line a {
  position: relative;
  z-index: 0;
}

.cta-line a::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 6px;
  height: 38%;
  background: rgba(31, 94, 67, .12);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.cta-line a:hover::before {
  transform: scaleX(1);
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .fw,
  .card,
  .topic,
  .cell {
    transition: none !important;
    transform: none !important;
  }

  .fw::after,
  .card::after,
  .topic::after,
  .cell::after,
  .step::after,
  .feat li::after,
  .wipe {
    transition: none !important;
  }

  .fw h3,
  .topics .topic span[role="heading"],
  .topics .topic span[role="heading"]::after,
  .badge,
  .faq summary,
  .faq summary::after,
  .cards .card a,
  .cta-line a::before {
    transition: none !important;
  }

  .topics .topic span[role="heading"]::after,
  .cta-line a::before {
    transform: none !important;
  }

  .wordmark::after {
    animation: none !important;
    display: none;
  }

  .wipe {
    opacity: 1 !important;
  }
}