/* ==========================================================================
   Makhija & Company — 21st.dev components, ported to vanilla CSS/JS
   1. Particle Hero        (from @nyxb "particle-hero", canvas + spotlight)
   2. Stagger Testimonials (from @vaib215 "stagger-testimonials")
   3. Card Fan Carousel    (from @aayush-duhan "card-fan-carousel", GSAP dropped)
   Retinted from the original blue/gold to the Makhija brand teal + green.
   ========================================================================== */

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* ==========================================================================
   1. PARTICLE HERO
   ========================================================================== */
.p-hero {
  --ph-bg: #03151a;
  --ph-ink: #cfe9dd;
  --ph-a1: #a8e6a8;          /* headline gradient bottom */
  --ph-a2: #7fd0e0;          /* headline gradient top */
  --ph-spot: 95, 184, 201;   /* spotlight cone rgb */
  --ph-line: 168, 230, 168;  /* accent line rgb */
  --ph-dot: #3ca83c;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: min(880px, 100svh);
  display: flex;
  align-items: center;
  background: var(--ph-bg);
  background-image: linear-gradient(0deg, rgba(216, 236, 248, .06), rgba(152, 192, 239, .06));
  font-size: max(calc(min(600px, 80vh) * .03), 10px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 1s ease-in-out;
}

/* gold mode — a palette swap rather than the original filter:invert(),
   which would have wrecked the logo, buttons and body copy on a real site */
.p-hero.is-gold {
  --ph-bg: #12100a;
  --ph-ink: #f4e9c4;
  --ph-a1: #f0d574;
  --ph-a2: #d8bd10;
  --ph-spot: 216, 189, 16;
  --ph-line: 216, 189, 16;
  --ph-dot: #d8bd10;
}

/* ---- canvas ---- */
.p-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: ph-load .4s ease-in-out forwards;
}

/* ---- spotlight cones ---- */
.p-hero-spot {
  pointer-events: none;
  position: absolute;
  left: 0; right: 0; top: 0;
  margin: 0 auto;
  height: 42em;
  width: 100%;
  overflow: hidden;
  z-index: 0;
  transition: filter 1s ease-in-out;
}
.p-hero-spot i {
  display: block;
  position: absolute;
  left: 0; right: 0;
  margin: 0 auto;
  top: 3em;
  width: 30em;
  height: max(42em, 86vh);
  border-radius: 0 0 50% 50%;
  transform-origin: 50% 0;
  filter: blur(15px) opacity(.5);
  background-image: conic-gradient(from 0deg at 50% -5%,
    transparent 45%,
    rgba(var(--ph-spot), .3) 49%,
    rgba(var(--ph-spot), .5) 50%,
    rgba(var(--ph-spot), .3) 51%,
    transparent 55%);
}
.p-hero-spot i:nth-child(1) { transform: rotate(20deg);  animation: ph-load 2s ease-in-out forwards, ph-loadrot 2s ease-in-out forwards, ph-spotlight 17s ease-in-out infinite; }
.p-hero-spot i:nth-child(2) { transform: rotate(-20deg); animation: ph-load 2s ease-in-out forwards, ph-loadrot 2s ease-in-out forwards, ph-spotlight 14s ease-in-out infinite; }
.p-hero-spot i:nth-child(3) { transform: rotate(0deg);   animation: ph-load 2s ease-in-out forwards, ph-loadrot 2s ease-in-out forwards, ph-spotlight 21s ease-in-out infinite reverse; }

/* ---- accent lines ---- */
.p-hero-lines {
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 42em;
  z-index: 0;
}
.p-hero-lines b,
.p-hero-lines s {
  position: absolute;
  margin: auto;
  opacity: 0;
  transform: scale(0);
  display: block;
}
.p-hero-lines b {                 /* horizontal */
  left: 0; right: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ph-line), .18), transparent);
  animation: ph-accentload 2s ease-out 2.4s forwards;
}
.p-hero-lines b:nth-of-type(1) { top: 6em; }
.p-hero-lines b:nth-of-type(2) { top: 11em; }
.p-hero-lines b:nth-of-type(3) { top: 16em; }
.p-hero-lines b:nth-of-type(4) { top: 24em; }
.p-hero-lines b:nth-of-type(5) { top: 29em; }
.p-hero-lines s {                 /* vertical */
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(var(--ph-line), .18);
  animation: ph-accentload 2s ease-out 2s forwards;
}
.p-hero-lines s:nth-of-type(1) { left: 24em; }
.p-hero-lines s:nth-of-type(2) { left: 34em; }
.p-hero-lines s:nth-of-type(3) { right: 24em; }
.p-hero-lines s:nth-of-type(4) { right: 34em; }
@media (max-width: 900px) { .p-hero-lines s { display: none; } }

/* ---- gold-mode toggle dot ---- */
.p-hero-dot {
  position: absolute;
  left: 0; right: 0;
  top: 1.6em;
  margin: 0 auto;
  width: 1.8em; height: 1.8em;
  border: 0;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 1em 0 var(--ph-dot);
  cursor: pointer;
  z-index: 6;
  transition: box-shadow 1s ease-in-out;
  opacity: 0;
  animation: ph-load 2s ease-in 2s forwards;
}
.p-hero-dot:hover { box-shadow: -.3em .1em .2em 0 var(--ph-dot); }

/* ---- content ---- */
.p-hero-inner {
  position: relative;
  z-index: 5;
  text-align: center;
  padding-block: 7em 4em;
}

.p-hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(var(--ph-line), .22);
  backdrop-filter: blur(8px);
  font-size: .85rem; font-weight: 600;
  color: var(--ph-ink);
  margin-bottom: 2em;
  opacity: 0;
  transform: translateY(-1em);
  animation: ph-load 2s ease-in 1.6s forwards, ph-up 1.4s ease-out 1.6s forwards;
}
.p-hero-badge b {
  background: var(--ph-dot); color: #04231a;
  padding: 3px 11px; border-radius: 999px;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* headline — two stacked layers, exactly as the original component does it */
.p-hero-title {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(-.4em);
  animation: ph-load 2s ease-in-out .6s forwards, ph-up 1.4s ease-out .6s forwards;
}
.p-hero-title span {
  display: block;
  font-size: clamp(2.4rem, 1.2rem + 5.4vw, 5.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  width: fit-content;
  margin: 0 auto;
  background:
    radial-gradient(2em 2em at 50% 50%,
      transparent calc(var(--p, 0%) - 2em),
      #fff calc(var(--p, 0%) - 1em),
      #fff calc(var(--p, 0%) - .4em),
      transparent var(--p, 0%)),
    linear-gradient(0deg, var(--ph-a1) 30%, var(--ph-a2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 16px rgba(var(--ph-line), .24);
  transition: --p 3s linear;
  animation: ph-pulse 10s linear 1.2s infinite;
}
/* the blurred glow layer sitting on top */
.p-hero-title .glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(2em 2em at 50% 50%,
      transparent calc(var(--p, 0%) - 2em),
      transparent calc(var(--p, 0%) - 1em),
      #fff calc(var(--p, 0%) - 1em),
      #fff calc(var(--p, 0%) - .4em),
      transparent calc(var(--p, 0%) - .4em),
      transparent var(--p, 0%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(16px) opacity(.4);
  text-shadow: none;
}

.p-hero-sub {
  font-size: clamp(1rem, .94rem + .38vw, 1.2rem);
  max-width: 40em;
  margin: 1.6em auto 0;
  color: var(--ph-ink);
  background: linear-gradient(0deg, var(--ph-ink) 0, var(--ph-a2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(1em);
  animation: ph-load 2s ease-out 1.8s forwards, ph-up 1.4s ease-out 1.8s forwards;
}

.p-hero-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-top: 2.4em;
  opacity: 0;
  transform: translateY(1em);
  animation: ph-load 2s ease-out 2.1s forwards, ph-up 1.4s ease-out 2.1s forwards;
}

.p-hero-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin-top: 2.6em;
  opacity: 0;
  animation: ph-load 2s ease-out 2.5s forwards;
}
.p-hero-trust li {
  display: flex; align-items: center; gap: 9px;
  font-size: .89rem; font-weight: 600;
  color: var(--ph-ink);
  opacity: .8;
}
.p-hero-trust svg { flex: none; color: var(--ph-a1); }

/* ---- keyframes (prefixed so they can't clash with style.css) ---- */
@keyframes ph-load      { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ph-up        { 100% { transform: translateY(0); } }
@keyframes ph-pulse     { 0% { --p: 0%; } 50% { --p: 300%; } 100% { --p: 300%; } }
@keyframes ph-loadrot   { 0% { transform: rotate(0deg) scale(0); } 100% { transform: scale(1); } }
@keyframes ph-accentload{ 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ph-spotlight {
  0%   { transform: rotateZ(0deg) scale(1);    filter: blur(15px) opacity(.5); }
  20%  { transform: rotateZ(-1deg) scale(1.2); filter: blur(16px) opacity(.6); }
  40%  { transform: rotateZ(2deg) scale(1.3);  filter: blur(14px) opacity(.4); }
  60%  { transform: rotateZ(-2deg) scale(1.2); filter: blur(15px) opacity(.6); }
  80%  { transform: rotateZ(1deg) scale(1.1);  filter: blur(13px) opacity(.4); }
  100% { transform: rotateZ(0deg) scale(1);    filter: blur(15px) opacity(.5); }
}

/* ==========================================================================
   2. STAGGER TESTIMONIALS
   ========================================================================== */
.stagger-tm {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: var(--surface-2);
}
@media (max-width: 640px) { .stagger-tm { height: 520px; } }

.stagger-card {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--card-size, 365px);
  height: var(--card-size, 365px);
  padding: 32px;
  cursor: pointer;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--body);
  transition: transform .5s ease-in-out, background-color .5s ease-in-out,
              border-color .5s ease-in-out, box-shadow .5s ease-in-out, color .5s ease-in-out;
  clip-path: polygon(50px 0%, calc(100% - 50px) 0%, 100% 50px, 100% 100%, calc(100% - 50px) 100%, 50px 100%, 0 100%, 0 0);
}
.stagger-card:hover { border-color: var(--green-300); }

.stagger-card.is-center {
  z-index: 10;
  background: var(--teal-700);
  border-color: var(--teal-700);
  color: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 0 4px var(--line);
}
.stagger-card.is-center .stagger-quote { color: #fff; }
.stagger-card.is-center .stagger-by { color: rgba(255, 255, 255, .78); }
.stagger-card.is-center .stagger-av { background: var(--green-500); color: #fff; }
.stagger-card.is-center .stagger-slash { background: rgba(255, 255, 255, .28); }

/* the 45° slash across the cut corner */
.stagger-slash {
  position: absolute;
  right: -2px; top: 48px;
  width: 70.71px;              /* sqrt(5000) — same as the original */
  height: 2px;
  background: var(--line);
  transform-origin: top right;
  transform: rotate(45deg);
}

.stagger-av {
  width: 48px; height: 56px;
  margin-bottom: 16px;
  display: grid; place-items: center;
  background: var(--teal-100);
  color: var(--teal-700);
  font-weight: 800; font-size: 1.05rem;
  letter-spacing: .02em;
  box-shadow: 3px 3px 0 var(--surface-2);
}

.stagger-quote {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
@media (max-width: 640px) { .stagger-quote { font-size: 1rem; } }

.stagger-by {
  position: absolute;
  bottom: 32px; left: 32px; right: 32px;
  margin-top: 8px;
  font-size: .88rem;
  font-style: italic;
  color: var(--muted);
}

.stagger-nav {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 20;
}
.stagger-nav button {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.stagger-nav button:hover {
  background: var(--green-500);
  border-color: var(--green-500);
  color: #fff;
}

/* ==========================================================================
   3. CARD FAN CAROUSEL
   ========================================================================== */
.fan-section {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}
.fan-layout {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  max-width: 80rem;
  height: 38rem;
}
@media (max-width: 1023px) { .fan-layout { height: 34rem; } }
@media (max-width: 767px)  { .fan-layout { height: 28rem; } }
@media (max-width: 639px)  { .fan-layout { height: 26rem; } }
@media (max-width: 479px)  { .fan-layout { height: 22rem; } }

.fan-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15rem;
  aspect-ratio: 400 / 620;
  border-radius: 1.4rem;
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
  transform-origin: center center;
  box-shadow: 0 18px 50px rgba(0, 37, 44, .28);
  /* springy, GSAP-elastic-ish */
  transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), opacity .45s ease-out;
  text-decoration: none;
}
@media (max-width: 767px) { .fan-card { width: 12rem; } }
@media (max-width: 479px) { .fan-card { width: 10rem; } }

.fan-card.no-anim { transition: none; }

.fan-face {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.6rem 1.4rem;
  background: linear-gradient(165deg, var(--teal-700), var(--teal-900) 72%);
  color: rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.fan-card:nth-child(odd) .fan-face {
  background: linear-gradient(165deg, var(--green-700), var(--teal-800) 78%);
}
.fan-face::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .14), transparent 62%);
  pointer-events: none;
}
.fan-ic {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: #fff;
}
.fan-face h3 { color: #fff; font-size: 1.16rem; margin-bottom: .4rem; }
.fan-face p { font-size: .84rem; line-height: 1.45; }
.fan-face .fan-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: .9rem;
  font-size: .8rem; font-weight: 700;
  color: var(--green-300);
}
@media (max-width: 767px) {
  .fan-face { padding: 1.1rem 1rem; }
  .fan-face h3 { font-size: .98rem; }
  .fan-face p { font-size: .76rem; }
  .fan-face .fan-more { display: none; }
}

.fan-nav {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 1.5rem;
  z-index: 3;
}
.fan-nav button {
  position: relative;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color .3s, border-color .3s, transform .3s var(--ease-out);
}
.fan-nav button:hover { color: var(--teal-700); border-color: var(--teal-300); transform: translateY(-2px); }
.fan-nav button:active { opacity: .7; }
@media (max-width: 767px) { .fan-nav button { width: 40px; height: 40px; } }

.fan-dots { display: flex; align-items: center; gap: 8px; }
.fan-dots i {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .3s, transform .3s;
}
.fan-dots i.on { background: var(--teal-600); transform: scale(1.3); }

/* ==========================================================================
   Motion safety — everything above degrades to a static, readable layout
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .p-hero-canvas, .p-hero-spot { display: none; }
  .p-hero-badge, .p-hero-title, .p-hero-sub, .p-hero-actions, .p-hero-trust, .p-hero-dot,
  .p-hero-lines b, .p-hero-lines s {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .p-hero-title span { animation: none !important; }
  .stagger-card, .fan-card { transition: none !important; }
}

/* ==========================================================================
   4. RAINBOW BORDERS BUTTON  (@muhammad-binsalman, 21st.dev)
   Now using the original's actual technique, retrieved after the daily limit
   reset: two pseudo-elements inset by 2px carrying a 45deg linear-gradient at
   400% background-size, with background-position animated 0 -> 400% -> 0.
   The second one is blurred to make the glow.

   This replaced a conic-gradient + @property reconstruction. The swap is not
   just for fidelity — animating background-position works in every browser,
   whereas @property needs Chrome 85+/Safari 16.4+/Firefox 128+, so the old
   version fell back to a static gradient on older Firefox.
   ========================================================================== */
.rainbow-btn {
  --rb-stops: #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,
              #fb0094, #0000ff, #00ff00, #ffff00, #ff0000;
  --rb-face: linear-gradient(160deg, #0d2027, #061318);

  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border: none;
  /* pill, not the original's 12px — every other button on this site is a pill
     and a lone rounded rectangle in the hero would look like a mistake */
  border-radius: 999px;
  background: var(--rb-face);
  color: #fff;
  font-weight: 800; font-size: .97rem; letter-spacing: -.01em;
  cursor: pointer;
  isolation: isolate;
  transition: transform .35s var(--ease-out);
}

.rainbow-btn::before,
.rainbow-btn::after {
  content: '';
  position: absolute;
  left: -2px; top: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: inherit;
  background: linear-gradient(45deg, var(--rb-stops));
  background-size: 400%;
  z-index: -1;
  animation: rainbow 20s linear infinite;
}
/* the glow. The original blurs by 50px, which suits a button centred alone on a
   full-screen demo; on a page with copy beside it that bleeds badly, so it is
   pulled back here. */
.rainbow-btn::after { filter: blur(22px); opacity: .55; transition: opacity .35s; }

.rainbow-btn:hover { transform: translateY(-2px); }
.rainbow-btn:hover::after { opacity: .85; }
.rainbow-btn:active { transform: translateY(0); }
.rainbow-btn--lg { padding: 17px 36px; font-size: 1.02rem; }

/* Brand variant, kept as the site default. A literal rainbow reads as a gaming
   or AI CTA, which is the wrong signal for a tax and lending firm. Drop the
   class to get the original palette. */
.rainbow-btn--brand {
  --rb-stops: #3ca83c, #0a7d92, #86d386, #5fb8c9, #2f9433,
              #3ca83c, #0a7d92, #86d386, #5fb8c9, #2f9433;
}

@keyframes rainbow {
  0%   { background-position: 0 0; }
  50%  { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rainbow-btn::before, .rainbow-btn::after { animation: none; }
}

/* ==========================================================================
   5. FAQ ROLLER (habit-faq-scroller)
   Rebuilt from the component's demo API — rows of Q&A cards, each looping
   horizontally at its own speed and direction. Source retrieval limit hit.
   ========================================================================== */
.faq-roller { width: 100%; }

.faq-roller-head { text-align: center; max-width: 640px; margin: 0 auto clamp(32px, 4vw, 52px); }

.faq-row {
  --speed: 60s;
  overflow: hidden;
  padding-block: 9px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.faq-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: faq-scroll var(--speed) linear infinite;
}
.faq-row[data-dir="right"] .faq-track { animation-direction: reverse; }
.faq-row:hover .faq-track,
.faq-row:focus-within .faq-track { animation-play-state: paused; }

.faq-track > ul { display: flex; gap: 32px; flex: none; }

.faq-card {
  flex: none;
  width: 384px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
@media (max-width: 520px) { .faq-card { width: 300px; padding: 20px; } }

.faq-card:hover {
  transform: translateY(-4px);
  border-color: var(--green-300);
  box-shadow: var(--shadow-md);
}

.faq-card .q {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 1.02rem; font-weight: 700; color: var(--ink);
  line-height: 1.35;
  margin-bottom: 10px;
}
.faq-card .q i {
  flex: none;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-100);
  color: var(--green-700);
  font-size: .74rem; font-weight: 800; font-style: normal;
}
.faq-card .a { font-size: .92rem; line-height: 1.55; color: var(--body); }

@keyframes faq-scroll { to { transform: translateX(calc(-50% - 16px)); } }

@media (prefers-reduced-motion: reduce) {
  .faq-track { animation: none; }
  .faq-row { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

/* ==========================================================================
   6. SEO / AEO page furniture — fact table, prose, service-area footer
   ========================================================================== */
.facts-card {
  background: linear-gradient(160deg, var(--surface-2), #fff 60%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
}
.facts-title { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); margin-bottom: 20px; }
.facts-table { width: 100%; border-collapse: collapse; }
.facts-table tr + tr { border-top: 1px solid var(--line); }
.facts-table th,
.facts-table td { text-align: left; padding: 13px 0; vertical-align: top; font-size: .95rem; }
.facts-table th {
  width: 34%; padding-right: 22px;
  font-weight: 700; color: var(--ink);
}
.facts-table td { color: var(--body); }
@media (max-width: 620px) {
  .facts-table th, .facts-table td { display: block; width: 100%; padding: 0; }
  .facts-table th { padding-top: 14px; }
  .facts-table td { padding-bottom: 14px; }
}

.prose > p + p { margin-top: 14px; }
.prose p { font-size: 1rem; }

.f-areas {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.f-areas h4 { margin-bottom: 12px; }
.f-areas p { font-size: .86rem; max-width: none; opacity: .72; line-height: 1.9; }

/* ==========================================================================
   7. HOW IT WORKS — pinned heading, connected step cards
   (after @chamaac "how-it-works" on 21st.dev; rebuilt from its description)
   ========================================================================== */
.hiw { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 72px); }
@media (max-width: 900px) { .hiw { grid-template-columns: 1fr; gap: 32px; } }

.hiw-pin { position: sticky; top: calc(var(--nav-h) + 48px); align-self: start; }
@media (max-width: 900px) { .hiw-pin { position: static; } }

.hiw-rail {
  display: flex; align-items: center; gap: 12px;
  margin-top: 28px;
}
.hiw-rail-track {
  position: relative;
  flex: 1; height: 4px; border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.hiw-rail-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green-500), var(--teal-500));
  transition: width .5s var(--ease-out);
}
.hiw-count {
  font-size: .82rem; font-weight: 800; letter-spacing: .1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hiw-count b { color: var(--teal-700); }

.hiw-steps { position: relative; display: grid; gap: 18px; }
/* the line that connects the cards */
.hiw-steps::before {
  content: "";
  position: absolute; left: 27px; top: 30px; bottom: 30px;
  width: 2px;
  background: var(--line);
}
.hiw-steps::after {
  content: "";
  position: absolute; left: 27px; top: 30px;
  width: 2px; height: var(--fill, 0%);
  background: linear-gradient(180deg, var(--green-500), var(--teal-500));
  transition: height .6s var(--ease-out);
}
@media (max-width: 560px) { .hiw-steps::before, .hiw-steps::after { display: none; } }

.hiw-step {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
  padding: 22px 24px 22px 0;
  border-radius: var(--r-lg);
  transition: background-color .45s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
@media (max-width: 560px) { .hiw-step { grid-template-columns: 1fr; gap: 12px; padding: 20px; } }

.hiw-step.is-active {
  background: #fff;
  box-shadow: var(--shadow-md);
  transform: translateX(6px);
}
.hiw-step.is-active::before {
  content: "";
  position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--green-500), var(--teal-500));
}

.hiw-dot {
  position: relative; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--line), 0 0 0 6px var(--surface-2);
  color: var(--muted);
  font-weight: 800; font-size: .95rem;
  transition: background .45s var(--ease-out), color .45s var(--ease-out),
              box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
}
.hiw-step.is-active .hiw-dot {
  background: linear-gradient(150deg, var(--green-600), var(--teal-600));
  color: #fff;
  box-shadow: inset 0 0 0 2px transparent, 0 0 0 6px var(--surface-2), 0 8px 20px rgba(47, 148, 51, .3);
  transform: scale(1.06);
}
.hiw-step h3 { font-size: 1.16rem; margin-bottom: 7px; }
.hiw-step p { font-size: .95rem; }
.hiw-step .n {
  display: block;
  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
  color: var(--green-600); margin-bottom: 7px;
}

/* ==========================================================================
   8. LOAN FILE 3D — the "loan desk" section
   A real CSS 3D scene: stacked document layers that fan apart on scroll and
   respond to the pointer. Each layer maps to a row of copy on the left.
   ========================================================================== */
.deck-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--teal-800), var(--teal-900) 70%);
  color: rgba(255, 255, 255, .74);
}
.deck-section::before {
  content: "";
  position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
  right: -14vw; top: -22vw;
  background: radial-gradient(circle, rgba(60, 168, 60, .22), transparent 62%);
  filter: blur(48px);
  pointer-events: none;
}
.deck-section h2, .deck-section h3 { color: #fff; }
.deck-section .eyebrow { color: var(--green-300); }
.deck-section .eyebrow::before { background: linear-gradient(90deg, var(--green-300), var(--teal-300)); }

.deck-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px); align-items: center;
}
@media (max-width: 940px) { .deck-grid { grid-template-columns: 1fr; } }

/* --- left: the layer legend --- */
.deck-legend { display: grid; gap: 10px; margin-top: 28px; }
.deck-legend li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  cursor: default;
  transition: background-color .35s, box-shadow .35s, transform .35s var(--ease-out);
}
.deck-legend li:hover,
.deck-legend li.is-active {
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(134, 211, 134, .4);
  transform: translateX(5px);
}
.deck-legend .k {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--green-600), var(--teal-600));
  color: #fff; font-weight: 800; font-size: .8rem;
}
.deck-legend b { display: block; color: #fff; font-size: .97rem; }
.deck-legend span { font-size: .85rem; line-height: 1.5; }

/* --- right: the 3D stack --- */
.deck-stage {
  position: relative;
  height: clamp(360px, 46vw, 520px);
  perspective: 1400px;
  perspective-origin: 50% 40%;
}
.deck {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 52deg)) rotateZ(var(--rz, -28deg));
  transition: transform .6s var(--ease-out);
  will-change: transform;
}
.deck-layer {
  position: absolute;
  left: 50%; top: 50%;
  width: min(300px, 62%);
  aspect-ratio: 5 / 6.4;
  margin: 0;
  border-radius: 16px;
  transform-style: preserve-3d;
  /* translate(-50%,-50%) keeps the layer centred; JS supplies --z and --lift */
  transform: translate(-50%, -50%) translateZ(calc(var(--z, 0px) + var(--lift, 0px)));
  background: linear-gradient(150deg, rgba(255, 255, 255, .93), rgba(226, 240, 236, .86));
  box-shadow: 0 18px 40px rgba(0, 20, 24, .34);
  padding: 18px;
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .6s var(--ease-out), box-shadow .4s, opacity .5s;
  opacity: 0;
}
.deck.is-in .deck-layer { opacity: 1; }
.deck-layer.is-active { box-shadow: 0 26px 60px rgba(0, 20, 24, .45), 0 0 0 2px var(--green-500); }

.deck-layer .tag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  background: var(--teal-700); color: #fff;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.deck-layer .ttl { font-size: .92rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
/* the fake ruled lines that read as a document */
.deck-layer .rule { height: 5px; border-radius: 3px; background: rgba(13, 27, 31, .13); }
.deck-layer .rule:nth-of-type(2n) { width: 82%; }
.deck-layer .rule:nth-of-type(3n) { width: 64%; }
.deck-layer .stamp {
  margin-top: auto; align-self: flex-end;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--green-700);
  box-shadow: inset 0 0 0 2px currentColor;
  font-size: .58rem; font-weight: 800; letter-spacing: .06em;
  transform: rotate(-14deg);
  opacity: .55;
}

.deck-hint {
  position: absolute; left: 0; right: 0; bottom: -6px;
  text-align: center;
  font-size: .8rem; color: rgba(255, 255, 255, .45);
}
@media (hover: none) { .deck-hint { display: none; } }

/* ==========================================================================
   9. CONTACT — dark panel, tilt card, floating labels, next-steps timeline
   ========================================================================== */
.contact-shell {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--teal-800), var(--teal-900) 72%);
  color: rgba(255, 255, 255, .74);
  padding: clamp(28px, 4vw, 56px);
}
.contact-shell::before {
  content: "";
  position: absolute; width: 46vw; height: 46vw; border-radius: 50%;
  left: -12vw; bottom: -24vw;
  background: radial-gradient(circle, rgba(10, 125, 146, .34), transparent 64%);
  filter: blur(50px); pointer-events: none;
}
.contact-shell h2, .contact-shell h3 { color: #fff; }
.contact-shell .eyebrow { color: var(--green-300); }
.contact-shell .eyebrow::before { background: linear-gradient(90deg, var(--green-300), var(--teal-300)); }

.contact-shell-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 4vw, 56px);
}
@media (max-width: 900px) { .contact-shell-grid { grid-template-columns: 1fr; } }

/* direct-contact tiles */
.reach { display: grid; gap: 12px; margin-top: 26px; }
.reach a {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 44px 1fr auto; gap: 15px; align-items: center;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background-color .3s, box-shadow .3s, transform .35s var(--ease-out);
}
.reach a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
}
.reach a:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(134, 211, 134, .45); transform: translateX(5px); }
.reach a:hover::after { transform: translateX(120%); }
.reach .ic {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: var(--green-300);
}
.reach b { display: block; color: #fff; font-size: .96rem; }
.reach span { font-size: .84rem; }
.reach .go { color: rgba(255, 255, 255, .4); transition: transform .3s var(--ease-out), color .3s; }
.reach a:hover .go { transform: translateX(4px); color: var(--green-300); }

/* what happens next */
.next-steps { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .12); }
.next-steps h3 { font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 16px; }
.next-steps ol { display: grid; gap: 14px; counter-reset: ns; }
.next-steps li {
  display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start;
  font-size: .9rem;
}
.next-steps li::before {
  counter-increment: ns; content: counter(ns);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(134, 211, 134, .16); color: var(--green-300);
  font-size: .76rem; font-weight: 800;
}

/* the tilt card holding the form */
.tilt-wrap { perspective: 1200px; }
.form--glass {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15), 0 30px 70px rgba(0, 0, 0, .32);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 0;
  border-radius: var(--r-xl);
  transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .5s var(--ease-out);
}
.form--glass h3 { font-size: 1.2rem; margin-bottom: 4px; }
.form--glass .form-lead { font-size: .88rem; color: rgba(255, 255, 255, .6); margin-bottom: 24px; }

/* floating labels */
.ffield { position: relative; margin-bottom: 20px; }
.ffield input,
.ffield textarea,
.ffield select {
  width: 100%;
  padding: 22px 16px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
  color: #fff;
  font-size: .97rem;
  transition: box-shadow .25s, background-color .25s;
}
.ffield textarea { min-height: 104px; resize: vertical; padding-top: 26px; }
.ffield select { padding-top: 22px; }
.ffield select option { background: var(--teal-800); color: #fff; }
.ffield input:focus,
.ffield textarea:focus,
.ffield select:focus {
  outline: none;
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 0 0 1.5px var(--green-500), 0 0 0 4px rgba(60, 168, 60, .16);
}
.ffield label {
  position: absolute; left: 16px; top: 16px;
  font-size: .95rem; color: rgba(255, 255, 255, .55);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .22s var(--ease-out), color .22s;
}
.ffield input:focus + label,
.ffield textarea:focus + label,
.ffield select:focus + label,
.ffield input:not(:placeholder-shown) + label,
.ffield textarea:not(:placeholder-shown) + label,
.ffield select:valid + label {
  transform: translateY(-9px) scale(.76);
  color: var(--green-300);
}
.ffield input::placeholder, .ffield textarea::placeholder { color: transparent; }
.ffield-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .ffield-row { grid-template-columns: 1fr; } }

.form--glass .rainbow-btn { width: 100%; }
.form--glass .form-note { color: rgba(255, 255, 255, .5); }

@media (prefers-reduced-motion: reduce) {
  .deck, .deck-layer, .form--glass, .hiw-step, .hiw-dot { transition: none !important; }
  .deck-layer { opacity: 1 !important; }
}

/* ==========================================================================
   10. MOTION NAVIGATION MENU
   After the shadcn "motion-navigation-menu" pattern: one shared viewport that
   morphs between panels, plus a highlight that follows the hovered link.
   Rebuilt in vanilla — no Radix, no Framer Motion.
   ========================================================================== */
.mnav { position: relative; margin-left: auto; }
@media (max-width: 1080px) { .mnav { display: none; } }

.mnav-list { display: flex; align-items: center; gap: 2px; }

.mnav-trigger,
.mnav-toplink {
  display: inline-flex; align-items: center; gap: 5px;
  height: 38px; padding: 0 14px;
  border: 0; border-radius: 999px;
  background: transparent;
  font-size: .95rem; font-weight: 600; color: var(--ink);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.mnav-trigger:hover, .mnav-toplink:hover,
.mnav-trigger[aria-expanded="true"] { background: var(--surface-3); color: var(--teal-700); }
.mnav-toplink[aria-current] { color: var(--green-600); }
.mnav-trigger .chev { opacity: .55; transition: transform .3s var(--ease-out); }
.mnav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---- the morphing viewport ---- */
.mnav-viewport {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  /* JS sets --w, --h and --x; the spring-ish curve does the morph */
  width: var(--w, 460px);
  height: var(--h, 240px);
  transform: translateX(var(--x, 0px)) translateY(-6px) scale(.97);
  transform-origin: top center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 120;
  transition:
    width .42s cubic-bezier(.2, 1.12, .3, 1),
    height .42s cubic-bezier(.2, 1.12, .3, 1),
    transform .42s cubic-bezier(.2, 1.12, .3, 1),
    opacity .22s ease-out,
    visibility .22s;
}
.mnav.is-open .mnav-viewport {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(var(--x, 0px)) translateY(0) scale(1);
}

/* little arrow pointing at the active trigger */
.mnav-arrow {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 14px; height: 8px;
  transform: translateX(var(--ax, 0px));
  opacity: 0;
  z-index: 121;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.2, 1.12, .3, 1), opacity .2s;
}
.mnav.is-open .mnav-arrow { opacity: 1; }
.mnav-arrow::before {
  content: "";
  display: block;
  width: 12px; height: 12px;
  margin: 2px auto 0;
  background: #fff;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}

/* ---- panels ---- */
.mnav-panel {
  position: absolute; top: 0; left: 0;
  padding: 12px;
  opacity: 0;
  transform: translateX(var(--slide, 14px));
  pointer-events: none;
  transition: opacity .26s ease-out, transform .34s cubic-bezier(.2, 1.12, .3, 1);
}
.mnav-panel.is-current { opacity: 1; transform: translateX(0); pointer-events: auto; }

/* the highlight that follows the hovered link */
.mnav-highlight {
  position: absolute;
  top: 0; left: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform .3s var(--ease-out), width .3s var(--ease-out),
              height .3s var(--ease-out), opacity .22s;
}

.mnav-link {
  position: relative;
  z-index: 1;
  display: block;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.mnav-link .t {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .92rem; font-weight: 700; letter-spacing: -.01em;
}
.mnav-link .t svg { flex: none; opacity: 0; transform: translate(-3px, 3px); transition: opacity .25s, transform .25s var(--ease-out); }
.mnav-link:hover .t svg { opacity: .5; transform: translate(0, 0); }
.mnav-link .d { display: block; margin-top: 3px; font-size: .79rem; line-height: 1.45; color: var(--muted); }

/* layout: featured card + grid */
.mnav-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; }
.mnav-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mnav-rows { display: grid; gap: 2px; }
.mnav-heading {
  padding: 8px 13px 6px;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

.mnav-feature {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  min-height: 176px;
  padding: 18px;
  border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--teal-800), var(--teal-900));
  color: rgba(255, 255, 255, .72);
  overflow: hidden;
  transition: transform .35s var(--ease-out);
}
.mnav-feature::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 20% 0%, rgba(60, 168, 60, .3), transparent 62%);
  pointer-events: none;
}
.mnav-feature:hover { transform: translateY(-2px); }
.mnav-feature .ic {
  position: relative; z-index: 1;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: var(--green-300);
}
.mnav-feature b { position: relative; z-index: 1; display: block; color: #fff; font-size: .95rem; }
.mnav-feature span { position: relative; z-index: 1; display: block; margin-top: 5px; font-size: .79rem; line-height: 1.5; }
.mnav-feature .go {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 800; color: var(--green-300);
}

/* icon rows (the "built for teams" pattern) */
.mnav-row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  color: var(--ink);
}
.mnav-row .ic {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700);
  transition: background .3s, color .3s;
}
.mnav-row:hover .ic { background: linear-gradient(145deg, var(--green-600), var(--teal-600)); color: #fff; }
.mnav-row b { display: block; font-size: .92rem; font-weight: 700; }
.mnav-row span { display: block; font-size: .79rem; line-height: 1.45; color: var(--muted); }
.mnav-row .pill-go {
  font-size: .74rem; font-weight: 700; color: var(--muted);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .25s, transform .25s var(--ease-out);
}
.mnav-row:hover .pill-go { opacity: 1; transform: translateX(0); color: var(--teal-700); }

@media (prefers-reduced-motion: reduce) {
  .mnav-viewport, .mnav-panel, .mnav-highlight, .mnav-arrow { transition: none !important; }
}

/* tilt opt-in for any card (see [data-tilt] in components.js) */
[data-tilt] {
  transform-style: preserve-3d;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .5s var(--ease-out);
}

/* ==========================================================================
   11. STAT RINGS  (after the Vo2MaxCard pattern: icon, radial progress,
   big value, status pill, supporting line)
   ========================================================================== */
.ring-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) { .ring-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ring-grid { grid-template-columns: 1fr; } }

.ring-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 24px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
.ring-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(340px circle at 50% 0%, rgba(60, 168, 60, .07), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.ring-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.ring-card:hover::before { opacity: 1; }
.ring-card > * { position: relative; }

.ring-ic {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal-700);
  margin-bottom: 18px;
  transition: background .35s, color .35s, transform .45s var(--ease-out);
}
.ring-card:hover .ring-ic {
  background: linear-gradient(140deg, var(--green-600), var(--teal-600));
  color: #fff; transform: rotate(-7deg) scale(1.07);
}

.ring-dial { position: relative; width: 132px; height: 132px; }
.ring-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-dial .track { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.ring-dial .bar {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 9;
  stroke-linecap: round;
  /* JS sets --dash on reveal; the ring draws itself in */
  stroke-dasharray: var(--circ, 352);
  stroke-dashoffset: var(--dash, 352);
  transition: stroke-dashoffset 1.6s cubic-bezier(.16, 1, .3, 1);
}
.ring-val {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
}
.ring-val b {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
  color: var(--teal-700);
  font-variant-numeric: tabular-nums;
}
.ring-val b .suf { color: var(--green-500); }
.ring-val .status {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-600);
}

.ring-card .ring-label { font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -.015em; margin: 18px 0 6px; }
.ring-card p { font-size: .85rem; line-height: 1.5; color: var(--muted); }

/* ==========================================================================
   12. LOAN FILE STACK — redesign
   The first pass rotated the whole stack in 3D, which buried the layers behind
   one another and turned every label into unreadable diagonal text. This keeps
   the 3D but flattens the tilt and offsets each card down-and-right, so all
   five titles stay legible and the stack still reads as depth.
   ========================================================================== */
.stack-stage {
  position: relative;
  height: clamp(400px, 44vw, 520px);
  perspective: 1600px;
  perspective-origin: 60% 40%;
}
.stack {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -13deg));
  transition: transform .6s var(--ease-out);
  will-change: transform;
}

.stack-card {
  position: absolute;
  left: 0; right: 0;
  top: var(--top, 0px);
  margin-inline: auto;
  width: min(360px, 92%);
  transform-style: preserve-3d;
  transform: translate3d(var(--sx, 0px), 0, var(--sz, 0px)) scale(var(--sc, 1));
  transition: transform .5s var(--ease-out), box-shadow .4s, opacity .5s;
  opacity: 0;
  border-radius: 14px;
  background: linear-gradient(150deg, #ffffff, #eef5f2);
  box-shadow: 0 14px 34px rgba(0, 18, 22, .34);
  padding: 15px 17px;
  display: grid; grid-template-columns: 34px 1fr auto; gap: 13px; align-items: center;
}
.stack.is-in .stack-card { opacity: 1; }
.stack-card.is-active {
  box-shadow: 0 24px 54px rgba(0, 18, 22, .45), 0 0 0 2px var(--green-500);
}

.stack-card .code {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--green-600), var(--teal-600));
  color: #fff;
  font-size: .6rem; font-weight: 800; letter-spacing: .04em;
}
.stack-card .ttl {
  font-size: .93rem; font-weight: 800; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.25;
}
.stack-card .meta { font-size: .74rem; color: var(--muted); margin-top: 2px; display: block; }
.stack-card .num {
  font-size: .72rem; font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stack-card.is-active .num { color: var(--green-600); }

.stack-hint {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: .8rem; color: rgba(255, 255, 255, .45);
}
@media (hover: none) { .stack-hint { display: none; } }
@media (max-width: 560px) {
  .stack-stage { perspective: none; height: auto; }
  .stack { position: static; transform: none; display: grid; gap: 10px; }
  .stack-card { position: static; width: 100%; transform: none; opacity: 1; }
}

/* ==========================================================================
   13. ABOUT — parallax media stack
   The photo, and two glass chips floating at different depths that move at
   different rates, so the pointer produces real parallax rather than one flat
   tilt. Text side gets a drawn accent line.
   ========================================================================== */
.para-stage { position: relative; perspective: 1100px; }
.para-inner {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg));
  transition: transform .5s var(--ease-out);
}
.para-media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateZ(0);
}
.para-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.1; display: block; }
.para-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(195deg, transparent 42%, rgba(0, 37, 44, .5));
}

.para-chip {
  position: absolute;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
  /* JS drives --mx/--my; depth is the multiplier per chip */
  transform: translate3d(calc(var(--mx, 0px) * var(--depth, 1)),
                         calc(var(--my, 0px) * var(--depth, 1)),
                         var(--z, 40px));
  transition: transform .45s var(--ease-out);
}
.para-chip .ic {
  flex: none; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--green-600), var(--teal-600)); color: #fff;
}
.para-chip b { display: block; color: var(--ink); font-size: .94rem; }
.para-chip span { display: block; font-size: .8rem; color: var(--muted); }

.para-chip--a { left: 18px; bottom: 20px; right: 18px; --z: 60px; --depth: 1.5; }
.para-chip--b {
  top: 20px; right: -14px;
  --z: 90px; --depth: 2.4;
  padding: 12px 16px;
}
.para-chip--b b { font-size: 1.15rem; letter-spacing: -.02em; }
@media (max-width: 640px) {
  .para-chip--b { display: none; }
  .para-chip--a { left: 12px; right: 12px; bottom: 12px; }
}

/* drawn accent line beside the about copy */
.about-copy { position: relative; padding-left: 26px; }
.about-copy::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 3px; height: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--green-500), var(--teal-500));
  transition: height 1.2s var(--ease-out) .2s;
}
.about-copy.is-visible::before { height: calc(100% - 12px); }
@media (max-width: 640px) { .about-copy { padding-left: 18px; } }

@media (prefers-reduced-motion: reduce) {
  .ring-dial .bar, .stack, .stack-card, .para-inner, .para-chip, .about-copy::before {
    transition: none !important;
  }
  .stack-card { opacity: 1 !important; }
}

/* ==========================================================================
   14. DOCUMENT CHECKLIST TOOL
   ========================================================================== */
.tool { max-width: 880px; margin-inline: auto; }

.tool-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.tool-steps li {
  display: flex; align-items: center; gap: 9px;
  font-size: .82rem; font-weight: 700; color: var(--muted);
  transition: color .3s;
}
.tool-steps li::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--line);
  transition: background .4s;
}
.tool-steps li:last-child::after { display: none; }
.tool-steps li .n {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--muted);
  font-size: .76rem; font-weight: 800;
  transition: background .35s, color .35s, transform .35s var(--ease-out);
}
.tool-steps li.is-done .n,
.tool-steps li.is-current .n {
  background: linear-gradient(145deg, var(--green-600), var(--teal-600)); color: #fff;
}
.tool-steps li.is-current { color: var(--ink); }
.tool-steps li.is-current .n { transform: scale(1.1); }
.tool-steps li.is-done::after { background: var(--green-300); }
@media (max-width: 620px) { .tool-steps li span.lbl { display: none; } }

.tool-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-sm);
}
.tool-screen { display: none; animation: toolIn .45s var(--ease-out); }
.tool-screen.is-active { display: block; }
@keyframes toolIn { from { opacity: 0; transform: translateY(12px); } }

.tool-panel h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.tool-panel .q-sub { margin-top: 8px; font-size: .95rem; color: var(--muted); }

.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 26px; }
@media (max-width: 620px) { .opt-grid { grid-template-columns: 1fr; } }

.opt {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 17px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  font-size: .94rem; font-weight: 650; color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .25s, background-color .25s, transform .3s var(--ease-out), box-shadow .3s;
}
.opt:hover { border-color: var(--green-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.opt.is-picked { border-color: var(--green-500); background: var(--green-100); }
.opt .tick {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: transparent;
  transition: background .25s, color .25s;
}
.opt.is-picked .tick { background: var(--green-500); color: #fff; }

.tool-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }

/* ---- result ---- */
.result-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.result-head h2 { margin-bottom: 4px; }
.result-head p { font-size: .9rem; color: var(--muted); }

.doc-group + .doc-group { margin-top: 26px; }
.doc-group h3 {
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-600); margin-bottom: 14px;
}
.doc-list { display: grid; gap: 9px; }
.doc-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  padding: 11px 13px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: .93rem;
  animation: docIn .4s var(--ease-out) backwards;
}
.doc-list li .box {
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--line);
  background: #fff;
}
@keyframes docIn { from { opacity: 0; transform: translateX(-8px); } }

.result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.tool-note {
  margin-top: 22px; padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--teal-100);
  font-size: .87rem; line-height: 1.55; color: var(--teal-800);
}
.tool-note b { color: var(--teal-900); }

@media print {
  .topbar, .site-header, .mobile-nav, .fab, .site-footer, .tool-steps,
  .result-actions, .progress, .page-hero { display: none !important; }
  .tool-panel { border: 0; box-shadow: none; padding: 0; }
  .doc-list li { background: transparent; padding: 4px 0; animation: none; }
}

/* ==========================================================================
   15. COMPLIANCE CALENDAR
   ========================================================================== */
.cal-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
@media (max-width: 860px) { .cal-picker { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cal-picker { grid-template-columns: 1fr; } }

.cal-opt {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 15px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  text-align: left; cursor: pointer;
  transition: border-color .25s, background-color .25s, transform .3s var(--ease-out), box-shadow .3s;
}
.cal-opt:hover { border-color: var(--green-300); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cal-opt.is-on { border-color: var(--green-500); background: var(--green-100); }
.cal-opt .box {
  width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--line); background: #fff;
  display: grid; place-items: center; color: transparent;
  transition: background .25s, border-color .25s, color .25s;
}
.cal-opt.is-on .box { background: var(--green-500); border-color: var(--green-500); color: #fff; }
.cal-opt b { display: block; font-size: .93rem; color: var(--ink); }
.cal-opt span { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }

.cal-out { margin-top: 34px; }
.cal-empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: .95rem; }

.cal-month + .cal-month { margin-top: 26px; }
.cal-month > h3 {
  display: flex; align-items: center; gap: 12px;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-600); margin-bottom: 12px;
}
.cal-month > h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.cal-item {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 16px; align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff;
  transition: border-color .25s, transform .3s var(--ease-out), box-shadow .3s;
}
.cal-item + .cal-item { margin-top: 8px; }
.cal-item:hover { border-color: var(--green-300); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.cal-item.is-soon { border-color: var(--gold); background: #fffdf6; }

.cal-date {
  text-align: center;
  padding: 7px 4px;
  border-radius: var(--r-sm);
  background: var(--teal-100);
}
.cal-date b { display: block; font-size: 1.16rem; font-weight: 800; color: var(--teal-700); line-height: 1; }
.cal-date span { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-600); margin-top: 3px; }
.cal-item.is-soon .cal-date { background: #fdf3d8; }
.cal-item.is-soon .cal-date b, .cal-item.is-soon .cal-date span { color: #8a6512; }

.cal-item .what b { display: block; font-size: .96rem; color: var(--ink); }
.cal-item .what span { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.cal-item .days {
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  color: var(--muted); white-space: nowrap;
}
@media (max-width: 620px) {
  .cal-item { grid-template-columns: 56px 1fr; }
  .cal-item .days { grid-column: 2; margin-top: -6px; }
}

.cal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ==========================================================================
   16. REMINDER CONSOLE (staff tool)
   ========================================================================== */
.console-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 26px; align-items: start; }
@media (max-width: 980px) { .console-grid { grid-template-columns: 1fr; } }

.console-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--shadow-sm);
}
.console-card h2 { font-size: 1.16rem; margin-bottom: 6px; }
.console-card .hint { font-size: .85rem; color: var(--muted); margin-bottom: 18px; }

.console-card textarea {
  width: 100%; min-height: 190px;
  padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; line-height: 1.7;
  resize: vertical;
  transition: border-color .25s, background-color .25s;
}
.console-card textarea:focus { outline: none; border-color: var(--green-500); background: #fff; }

.tpl-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tpl-chip {
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: .82rem; font-weight: 700; color: var(--ink);
  cursor: pointer;
  transition: border-color .25s, background-color .25s, color .25s;
}
.tpl-chip:hover { border-color: var(--green-300); }
.tpl-chip.is-on { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }

.console-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.console-stat {
  flex: 1; min-width: 96px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: center;
}
.console-stat b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--teal-700); line-height: 1; }
.console-stat span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

.send-list { display: grid; gap: 8px; max-height: 620px; overflow-y: auto; padding-right: 4px; }
.send-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff;
  transition: background-color .3s, border-color .3s, opacity .3s;
}
.send-row.is-sent { background: var(--green-100); border-color: var(--green-300); opacity: .72; }
.send-row b { display: block; font-size: .93rem; color: var(--ink); }
.send-row .sub { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px; }
.send-row .wa-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  background: #25d366; color: #fff;
  font-size: .8rem; font-weight: 800;
  transition: transform .25s var(--ease-out), filter .25s;
}
.send-row .wa-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.send-row .mark {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--line); background: #fff;
  color: var(--muted); cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.send-row.is-sent .mark { background: var(--green-500); border-color: var(--green-500); color: #fff; }
@media (max-width: 560px) { .send-row { grid-template-columns: 1fr auto; } .send-row .mark { grid-row: 1; } }

.preview-box {
  margin-top: 16px; padding: 15px 17px;
  border-radius: var(--r-md);
  background: var(--teal-900); color: rgba(255, 255, 255, .82);
  font-size: .87rem; line-height: 1.6;
  white-space: pre-wrap;
}

.warn-note {
  margin-top: 22px; padding: 16px 18px;
  border-radius: var(--r-md);
  background: #fff8e6; border: 1px solid #f0dca8;
  font-size: .87rem; line-height: 1.55; color: #6b5310;
}
.warn-note b { color: #4a390a; }

/* ==========================================================================
   17. PRACTICE CONSOLE (staff tool — noindex, never linked publicly)
   ========================================================================== */
.pc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.pc-tab {
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: .88rem; font-weight: 700; color: var(--ink);
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.pc-tab:hover { border-color: var(--green-300); }
.pc-tab.is-on { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.pc-tab .badge {
  display: inline-block; margin-left: 7px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(0,0,0,.08); font-size: .72rem;
}
.pc-tab.is-on .badge { background: rgba(255,255,255,.22); }

.pc-view { display: none; }
.pc-view.is-on { display: block; animation: toolIn .4s var(--ease-out); }

.pc-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 18px;
}
.pc-bar input[type="search"], .pc-bar select {
  padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; font-size: .9rem;
  transition: border-color .25s;
}
.pc-bar input[type="search"] { flex: 1; min-width: 180px; }
.pc-bar input:focus, .pc-bar select:focus { outline: none; border-color: var(--green-500); }

/* client table */
.pc-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pc-table thead th {
  text-align: left; padding: 10px 12px;
  font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.pc-table tbody tr { border-bottom: 1px solid var(--line); transition: background-color .2s; }
.pc-table tbody tr:hover { background: var(--surface-2); }
.pc-table td { padding: 12px; vertical-align: top; }
.pc-table td b { display: block; color: var(--ink); }
.pc-table td .sub { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.pc-table .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.pc-wrap { overflow-x: auto; }

.tagset { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tag-mini {
  padding: 2px 8px; border-radius: 999px;
  background: var(--teal-100); color: var(--teal-700);
  font-size: .68rem; font-weight: 800; white-space: nowrap;
}

.icon-btn {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line); background: #fff;
  color: var(--muted); cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.icon-btn:hover { color: var(--teal-700); border-color: var(--teal-300); }
.icon-btn.danger:hover { color: #c0392b; border-color: #e6b0aa; }
.icon-btn.wa { background: #25d366; border-color: #25d366; color: #fff; }
.icon-btn.wa:hover { filter: brightness(1.07); color: #fff; }

/* form */
.pc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .pc-form { grid-template-columns: 1fr; } }
.pc-form .full { grid-column: 1 / -1; }
.pc-form label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.pc-form input, .pc-form select, .pc-form textarea {
  width: 100%; padding: 11px 13px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); font-size: .92rem;
  transition: border-color .25s, background-color .25s;
}
.pc-form input:focus, .pc-form select:focus, .pc-form textarea:focus {
  outline: none; border-color: var(--green-500); background: #fff;
}
.pc-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 760px) { .pc-checks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pc-checks { grid-template-columns: 1fr; } }
.pc-check {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: #fff;
  font-size: .84rem; font-weight: 650; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.pc-check.is-on { border-color: var(--green-500); background: var(--green-100); }
.pc-check input { width: auto; }

/* due list */
.due-row {
  display: grid; grid-template-columns: 58px 1fr auto auto; gap: 14px; align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff;
  transition: border-color .25s, background-color .25s, opacity .25s;
}
.due-row + .due-row { margin-top: 7px; }
.due-row.st-filed { background: var(--green-100); border-color: var(--green-300); opacity: .7; }
.due-row.st-docs { background: #fffdf4; border-color: #ecdca6; }
.due-row.is-late { border-color: #e6b0aa; background: #fdf4f3; }
@media (max-width: 700px) { .due-row { grid-template-columns: 52px 1fr; } .due-row > *:nth-child(n+3) { grid-column: 2; } }

.due-when { text-align: center; padding: 6px 3px; border-radius: var(--r-sm); background: var(--teal-100); }
.due-when b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--teal-700); line-height: 1; }
.due-when span { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--teal-600); margin-top: 3px; }
.due-row.is-late .due-when { background: #f8dedb; }
.due-row.is-late .due-when b, .due-row.is-late .due-when span { color: #a5382c; }

.status-pick {
  padding: 7px 11px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: .78rem; font-weight: 700; cursor: pointer;
}

.pc-note {
  margin-top: 26px; padding: 16px 18px;
  border-radius: var(--r-md);
  background: #fff8e6; border: 1px solid #f0dca8;
  font-size: .87rem; line-height: 1.6; color: #6b5310;
}
.pc-note b { color: #4a390a; }
.pc-note + .pc-note { margin-top: 12px; }
.pc-note--info { background: var(--teal-100); border-color: var(--teal-300); color: var(--teal-800); }
.pc-note--info b { color: var(--teal-900); }

.pc-empty { text-align: center; padding: 46px 20px; color: var(--muted); font-size: .93rem; }

/* nav labels must never wrap — a two-word item breaking onto a second line
   pushed the whole header out of alignment */
.mnav-trigger, .mnav-toplink { white-space: nowrap; }

/* ==========================================================================
   18. SERVICE PAGE — "who this is for" and the document list
   These two sections were flat next to the homepage. Same motion language:
   3D on hover, staggered reveal, real depth rather than decoration.
   ========================================================================== */

/* ---- prose side gets the drawn accent, same as the about section ---- */
.svc-copy { position: relative; padding-left: 26px; }
.svc-copy::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 3px; height: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--green-500), var(--teal-500));
  transition: height 1.1s var(--ease-out) .15s;
}
.svc-copy.is-visible::before { height: calc(100% - 12px); }
@media (max-width: 640px) { .svc-copy { padding-left: 18px; } }

/* ---- "who this is for" ---- */
.who-stage { perspective: 1200px; }
.who-card {
  position: relative;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #fff, var(--surface-2) 70%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transform-style: preserve-3d;
  transform: rotateX(var(--wx, 0deg)) rotateY(var(--wy, 0deg));
  transition: transform .5s var(--ease-out);
  overflow: hidden;
}
.who-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(60,168,60,.09), transparent 58%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.who-card:hover::before { opacity: 1; }
.who-card > * { position: relative; }
.who-card h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin-bottom: 4px; }
.who-card .who-sub { font-size: .87rem; color: var(--muted); margin-bottom: 22px; }

.who-list { display: grid; gap: 8px; }
.who-list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .93rem; line-height: 1.5;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out),
              box-shadow .3s, background-color .3s;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.who-card.is-visible .who-list li { opacity: 1; transform: none; }
.who-list li:hover {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--green-300), var(--shadow-sm);
  transform: translateZ(18px) translateX(3px);
}
.who-list .ic {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-100); color: var(--green-700);
  margin-top: 1px;
}

/* ---- document list ---- */
.docs-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.docs-count {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 10px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--teal-700), var(--teal-900));
  color: #fff;
  font-size: .85rem; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 45, 54, .25);
}
.docs-count b {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green-500);
  font-size: .82rem; font-weight: 800;
}

.docgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; perspective: 1000px; }
@media (max-width: 760px) { .docgrid { grid-template-columns: 1fr; } }

.docgrid li {
  position: relative;
  display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
  padding: 15px 16px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  font-size: .92rem; line-height: 1.5;
  transform-style: preserve-3d;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .45s var(--ease-out),
              box-shadow .35s, border-color .3s;
  transition-delay: calc(var(--i, 0) * 55ms);
}
.docgrid.is-visible li { opacity: 1; transform: none; }
.docgrid li:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateZ(26px) rotateX(3deg);
  transition-delay: 0s;
}

/* the little stacked-paper marker */
.doc-mark {
  position: relative;
  width: 38px; height: 44px;
  transform-style: preserve-3d;
}
.doc-mark i {
  position: absolute; inset: 0;
  border-radius: 6px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .4s var(--ease-out), background-color .35s;
}
.doc-mark i:nth-child(1) { transform: translate(4px, -3px) rotate(6deg); opacity: .55; }
.doc-mark i:nth-child(2) { transform: translate(2px, -1px) rotate(3deg); opacity: .8; }
.doc-mark i:nth-child(3) {
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--teal-100), #fff);
  color: var(--teal-700);
  font-size: .74rem; font-weight: 800;
  font-style: normal;
}
.docgrid li:hover .doc-mark i:nth-child(1) { transform: translate(7px, -6px) rotate(10deg); }
.docgrid li:hover .doc-mark i:nth-child(2) { transform: translate(4px, -3px) rotate(5deg); }
.docgrid li:hover .doc-mark i:nth-child(3) {
  background: linear-gradient(150deg, var(--green-600), var(--teal-600));
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .who-card, .who-list li, .docgrid li, .doc-mark i, .svc-copy::before { transition: none !important; }
  .who-list li, .docgrid li { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   19. ARTICLES
   ========================================================================== */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff;
  overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
.post-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--cx,50%) var(--cy,0%), rgba(60,168,60,.08), transparent 55%);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.post-card:hover::before { opacity: 1; }
.post-card > * { position: relative; }

.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.post-cat {
  padding: 4px 11px; border-radius: 999px;
  background: var(--green-100); color: var(--green-700);
}
.post-card h2, .post-card h3 { font-size: 1.16rem; line-height: 1.3; margin-bottom: 10px; }
.post-card p { font-size: .93rem; }
.post-card .link-arrow { margin-top: auto; padding-top: 18px; }

/* ---- article body ---- */
.article { max-width: 760px; margin-inline: auto; }
.article .lede {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 600;
  padding-left: 22px;
  border-left: 3px solid var(--green-500);
  margin-bottom: clamp(30px, 4vw, 44px);
}
.article h2 {
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  margin: clamp(34px, 4vw, 48px) 0 16px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.article p { margin-bottom: 15px; font-size: 1.02rem; line-height: 1.72; }
.article p strong, .article p b { color: var(--ink); }
.article a:not(.btn):not(.link-arrow) {
  color: var(--teal-600); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--green-300);
  transition: box-shadow .25s, color .25s;
}
.article a:not(.btn):not(.link-arrow):hover { color: var(--teal-700); box-shadow: inset 0 -1.4em 0 var(--green-100); }

/* progress-linked table of contents */
.toc {
  position: sticky; top: calc(var(--nav-h) + 24px);
  align-self: start;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.toc h2 {
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.toc ol { display: grid; gap: 3px; counter-reset: toc; }
.toc a {
  display: block; padding: 8px 12px; border-radius: var(--r-sm);
  font-size: .86rem; font-weight: 600; line-height: 1.4; color: var(--body);
  border-left: 2px solid transparent;
  transition: background-color .25s, color .25s, border-color .25s;
}
.toc a:hover { background: #fff; color: var(--teal-700); }
.toc a.is-here { background: #fff; color: var(--teal-700); border-left-color: var(--green-500); }

.article-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
@media (max-width: 940px) { .article-layout { grid-template-columns: 1fr; } .toc { position: static; } }

.article-foot {
  margin-top: clamp(38px, 5vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}
.byline { display: flex; align-items: center; gap: 13px; }
.byline .av {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--teal-600), var(--green-600));
  color: #fff; font-weight: 800; font-size: .85rem;
}
.byline b { display: block; color: var(--ink); font-size: .94rem; }
.byline span { display: block; font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   20. LOCAL BAND — the "we are actually here" section
   ========================================================================== */
.local-band { background: linear-gradient(150deg, var(--teal-100), var(--surface-2) 65%); }
.local-inner {
  display: grid; grid-template-columns: 62px 1fr; gap: 22px; align-items: start;
  max-width: 820px; margin-inline: auto;
  padding: clamp(24px, 3vw, 34px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
@media (max-width: 560px) { .local-inner { grid-template-columns: 1fr; gap: 16px; } }
.local-pin {
  width: 62px; height: 62px; border-radius: 18px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--green-600), var(--teal-600));
  color: #fff;
  box-shadow: 0 10px 24px rgba(47, 148, 51, .3);
}
.local-inner h2 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); margin-bottom: 10px; }
.local-inner p { font-size: .98rem; line-height: 1.7; }
.local-inner .link-arrow { margin-top: 16px; }

/* ======================================================================
   LATE FEE CALCULATOR
   Reuses .tool / .opt / .opt-grid from the document checklist so the two
   tools look like one family rather than two bolt-ons.
   ====================================================================== */
.lf-switch {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 22px;
  background: var(--surface-2, #f1f5f3); border-radius: 999px;
}
.lf-tab {
  border: 0; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600;
  padding: 10px 20px; border-radius: 999px; background: transparent; color: var(--muted);
  transition: background .25s, color .25s;
}
.lf-tab.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.lf-pane { display: none; }
.lf-pane.is-active { display: block; }

.opt-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 680px) { .opt-grid--3 { grid-template-columns: 1fr; } }
.opt small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); margin-top: 3px; }
/* "GSTR-3B" was breaking at the hyphen into "GSTR-" / "3B" */
.opt-grid--3 .opt { white-space: nowrap; }
.opt-grid--3 .opt small { white-space: normal; }

.lf-fields {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line, #e3e8e5);
}
@media (max-width: 760px) { .lf-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .lf-fields { grid-template-columns: 1fr; } }
.lf-field { display: block; }
.lf-field > span {
  display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px;
}
.lf-field input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line, #e3e8e5); border-radius: 10px;
  background: #fff; min-height: 44px;
}
.lf-field input:focus-visible { outline: 2px solid var(--green-500); outline-offset: 1px; }

.lf-out { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line, #e3e8e5); }
.lf-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 20px 22px; border-radius: 14px;
  background: var(--teal-900, #004854); color: #fff;
}
.lf-total__k { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; opacity: .72; }
.lf-total__v { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }
.lf-total__d { flex: 1 0 100%; font-size: .85rem; opacity: .8; line-height: 1.5; }

/* the working is the point of the tool, so it is a table and not a footnote */
.lf-work { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: .88rem; }
.lf-work caption {
  text-align: left; font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 10px;
}
.lf-work th, .lf-work td {
  text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line, #e3e8e5); vertical-align: top;
}
.lf-work th { font-weight: 500; color: var(--muted); width: 42%; padding-right: 14px; }
.lf-work td { color: var(--ink); font-variant-numeric: tabular-nums; }
.lf-work tr:last-child th, .lf-work tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) {
  .lf-work th, .lf-work td { display: block; width: auto; border-bottom: 0; padding: 2px 0; }
  .lf-work tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line, #e3e8e5); }
}

.lf-asof {
  margin-top: 16px; padding: 13px 15px; border-radius: 10px;
  background: var(--surface-2, #f1f5f3);
  font-size: .82rem; line-height: 1.55; color: var(--muted);
}

/* ======================================================================
   ASK BOX
   A panel on desktop, a full sheet on a phone — where most of this site's
   traffic is, and where a floating card with its own scrollbar is miserable.
   ====================================================================== */
.fab .ask-btn {
  display: grid; place-items: center; width: 52px; height: 52px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--teal-900, #004854); color: #fff;
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.18));
  transition: transform .25s var(--ease-out), background .25s;
}
.fab .ask-btn:hover { transform: translateY(-2px) scale(1.04); }
.fab .ask-btn svg { width: 23px; height: 23px; }

.ask {
  position: fixed; z-index: 120;
  inset-block-end: 96px; inset-inline-end: 24px;
  width: min(420px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line, #e3e8e5);
  border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.3);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98);
  transition: opacity .25s, transform .3s var(--ease-out), visibility .25s;
}
.ask.is-open { opacity: 1; visibility: visible; transform: none; }

.ask__head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 18px 14px; border-bottom: 1px solid var(--line, #e3e8e5);
}
.ask__head strong { display: block; font-size: 1rem; }
.ask__head span { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.ask__x {
  margin-inline-start: auto; flex: none; width: 32px; height: 32px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line, #e3e8e5); border-radius: 50%;
  background: #fff; color: var(--muted);
}
.ask__x:hover { color: var(--ink); border-color: var(--muted); }

.ask__in {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 18px 0; padding: 0 13px;
  border: 1px solid var(--line, #e3e8e5); border-radius: 11px;
  background: var(--surface-2, #f1f5f3);
}
.ask__in svg { flex: none; color: var(--muted); }
.ask__in input {
  flex: 1; border: 0; background: none; font: inherit; font-size: .93rem;
  padding: 12px 0; min-height: 44px; color: var(--ink);
}
.ask__in input:focus { outline: none; }
.ask__in:focus-within { border-color: var(--green-500); }

.ask__hint {
  margin: 13px 18px 0; font-size: .76rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.ask__results { overflow-y: auto; padding: 10px 18px 18px; }

.ask__chips { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 4px; }
.ask__chip {
  font: inherit; font-size: .82rem; cursor: pointer; text-align: left;
  padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line, #e3e8e5); background: #fff; color: var(--ink);
}
.ask__chip:hover { border-color: var(--green-500); background: var(--green-100, #eef7ee); }

.ask__r {
  display: block; text-decoration: none; color: inherit;
  padding: 14px 0; border-bottom: 1px solid var(--line, #e3e8e5);
}
.ask__r:last-child { border-bottom: 0; }
.ask__r strong { font-size: .91rem; line-height: 1.35; color: var(--ink); }
.ask__r p { font-size: .84rem; line-height: 1.55; color: var(--muted); margin-top: 6px; }
.ask__src { display: inline-block; margin-top: 8px; font-size: .78rem; font-weight: 700; color: var(--green-600, #2f7d2f); }
.ask__r:hover strong { color: var(--green-600, #2f7d2f); }
.ask__tag {
  display: inline-block; margin-inline-start: 7px; vertical-align: 2px;
  font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--teal-900, #004854); color: #fff;
}

.ask__none { padding: 16px 0 4px; }
.ask__none strong { display: block; font-size: .93rem; }
.ask__none p { font-size: .84rem; line-height: 1.55; color: var(--muted); margin-top: 7px; }
.ask__none-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

@media (max-width: 560px) {
  /* a phone gets a sheet, not a floating card it has to scroll inside */
  .ask {
    inset: 0; width: auto; max-height: none; border-radius: 0; border: 0;
    transform: translateY(100%);
  }
  .ask.is-open { transform: none; }
  .ask__results { flex: 1; }
  body.ask-open { overflow: hidden; }
}

/* ======================================================================
   LOAN FILE CHECK
   ====================================================================== */
.lfc-checks { display: grid; gap: 2px; margin-top: 18px; }
.lfc-c {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 11px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.5;
  transition: background .2s;
}
.lfc-c:hover { background: var(--surface-2, #f1f5f3); }
.lfc-c input { position: absolute; opacity: 0; width: 0; height: 0; }
.lfc-c__b {
  flex: none; width: 19px; height: 19px; margin-top: 1px;
  border: 1.5px solid var(--line-2, #cdd6d1); border-radius: 5px;
  background: #fff; display: grid; place-items: center;
  transition: background .2s, border-color .2s;
}
.lfc-c__b::after {
  content: ""; width: 9px; height: 5px; opacity: 0;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px); transition: opacity .15s;
}
.lfc-c input:checked + .lfc-c__b { background: var(--green-500, #3CA83C); border-color: var(--green-500, #3CA83C); }
.lfc-c input:checked + .lfc-c__b::after { opacity: 1; }
.lfc-c input:focus-visible + .lfc-c__b { outline: 2px solid var(--green-500); outline-offset: 2px; }

.lfc-out { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line, #e3e8e5); }
.lfc-sum {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 13px;
  background: var(--teal-900, #004854); color: #fff;
}
.lfc-sum strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-right: 4px; }
.lfc-sum span { font-size: .87rem; opacity: .8; }

.lfc-grp { margin-top: 20px; padding: 18px 20px; border-radius: 13px; border: 1px solid var(--line, #e3e8e5); }
.lfc-grp h3 { font-size: .95rem; }
.lfc-grp ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.lfc-grp li { font-size: .89rem; line-height: 1.5; padding-left: 20px; position: relative; }
.lfc-grp--miss { border-color: #e7c9c2; background: #fdf6f4; }
.lfc-grp--miss li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 9px; height: 2px; background: #b4552f; border-radius: 2px;
}
.lfc-grp--ok { border-color: var(--green-300, #a8d8a8); background: var(--green-100, #eef7ee); }
.lfc-grp--ok p { font-size: .88rem; line-height: 1.6; color: var(--muted); margin-top: 9px; }
.lfc-grp--watch { border-color: #e3dcc2; background: #fcfaf1; }
.lfc-grp--watch li { padding-left: 0; }
.lfc-grp--watch li strong { display: block; font-size: .89rem; }
.lfc-grp--watch li span { display: block; font-size: .84rem; line-height: 1.55; color: var(--muted); margin-top: 4px; }

.lfc-have { margin-top: 18px; }
.lfc-have summary {
  cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--muted);
  padding: 10px 0; min-height: 44px; display: flex; align-items: center;
}
.lfc-have ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 7px; }
.lfc-have li { font-size: .86rem; color: var(--muted); padding-left: 20px; position: relative; }
.lfc-have li::before {
  content: ""; position: absolute; left: 2px; top: .3em;
  width: 10px; height: 5px; border-left: 2px solid var(--green-500, #3CA83C);
  border-bottom: 2px solid var(--green-500, #3CA83C); transform: rotate(-45deg);
}
.lfc-note {
  margin-top: 20px; padding: 14px 16px; border-radius: 11px;
  background: var(--surface-2, #f1f5f3); font-size: .84rem; line-height: 1.6; color: var(--muted);
}
.lfc-note strong { color: var(--ink); }

/* ======================================================================
   TAX REGIME CALCULATOR
   ====================================================================== */
.rg-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px; align-items: end; }
@media (max-width: 860px) { .rg-top { grid-template-columns: 1fr; } }
.rg-lbl { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.rg-field { display: block; }
.rg-field > span { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.rg-field > span small { font-weight: 400; opacity: .8; }
.rg-field input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line, #e3e8e5); border-radius: 10px;
  background: #fff; min-height: 44px;
}
.rg-field--big input { font-size: 1.05rem; font-weight: 600; }
.rg-field input:focus-visible { outline: 2px solid var(--green-500); outline-offset: 1px; }

.rg-seg { display: flex; gap: 3px; padding: 3px; background: var(--surface-2, #f1f5f3); border-radius: 10px; }
.rg-seg button {
  flex: 1; border: 0; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600;
  padding: 9px 10px; border-radius: 8px; background: transparent; color: var(--muted);
  min-height: 42px; transition: background .2s, color .2s;
}
.rg-seg button.is-on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

.rg-deds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 880px) { .rg-deds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rg-deds { grid-template-columns: 1fr; } }

.rg-out { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line, #e3e8e5); }
.rg-verdict {
  padding: 18px 20px; border-radius: 13px;
  background: var(--teal-900, #004854); color: #fff;
}
.rg-verdict strong { display: block; font-size: clamp(1.1rem, .9rem + 1vw, 1.45rem); font-weight: 800; letter-spacing: -.02em; }
.rg-verdict span { display: block; font-size: .85rem; opacity: .78; margin-top: 4px; }

.rg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 760px) { .rg-grid { grid-template-columns: 1fr; } }
.rg-card { border: 1px solid var(--line, #e3e8e5); border-radius: 13px; padding: 18px 20px; background: #fff; }
.rg-card.is-win { border-color: var(--green-500, #3CA83C); background: var(--green-100, #eef7ee); }
.rg-card__h { display: flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rg-card__h em {
  font-style: normal; font-size: .64rem; letter-spacing: .07em; padding: 2px 8px;
  border-radius: 999px; background: var(--green-500, #3CA83C); color: #fff;
}
.rg-card__t { display: block; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
.rg-card .lf-work { margin-top: 14px; font-size: .83rem; }
.rg-card .lf-work th { width: 56%; }

.rg-be {
  margin-top: 18px; padding: 15px 17px; border-radius: 11px;
  border: 1px dashed var(--line-2, #cdd6d1); background: var(--surface-2, #f1f5f3);
  font-size: .87rem; line-height: 1.6; color: var(--muted);
}
.rg-be strong { color: var(--ink); }