/* ===========================================================
   Tel&meet — shared site styles
   Design tokens live in assets/site.js (tailwind.config)
   =========================================================== */

html { scroll-behavior: smooth; }
body { font-family: 'Assistant', sans-serif; background: #fff; }
h1,h2,h3,h4,.font-display { font-family: 'Heebo','Poppins',sans-serif; }
.num { font-family: 'Poppins', sans-serif; font-variant-numeric: tabular-nums; }

/* ---------- brand surfaces ---------- */
.grad-brand { background-image: linear-gradient(105deg, #1E8A93 0%, #4FAE6E 52%, #8CC63F 100%); }
.grad-text {
  background-image: linear-gradient(95deg, #1E8A93 0%, #8CC63F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-wash {
  background:
    radial-gradient(58% 70% at 82% 12%, rgba(140,198,63,0.20) 0%, rgba(140,198,63,0) 68%),
    radial-gradient(52% 64% at 12% 34%, rgba(30,138,147,0.17) 0%, rgba(30,138,147,0) 70%),
    linear-gradient(180deg, #EAF6F2 0%, #F7FBF9 78%, #FFFFFF 100%);
}
/* shorter wash for interior page headers */
.page-wash {
  background:
    radial-gradient(60% 90% at 88% 0%, rgba(140,198,63,0.18) 0%, rgba(140,198,63,0) 66%),
    radial-gradient(50% 80% at 8% 20%, rgba(30,138,147,0.15) 0%, rgba(30,138,147,0) 70%),
    linear-gradient(180deg, #EAF6F2 0%, #FFFFFF 100%);
}
.grain::after {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- motion ---------- */
.reveal { opacity:0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform: translateY(0); }

/* pinned stack — caption sticks while the steps scroll past it */
.pin-wrap { display:grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items:start; }
.pin-caption { position: sticky; top: 120px; align-self: start; }
/* stacking deck: each card pins 50px below the previous one and stays pinned,
   so the next card slides over it leaving a sliver of every earlier card. */
.pin-steps { display: block; }
/* in-flow tail so the final card can reach its slot before the deck releases */
.pin-steps::after { content: ""; display: block; height: 420px; }
.pin-steps > li {
  position: sticky;
  background: #12283F;          /* must be opaque so cards cover each other */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  padding: 30px 32px;
  min-height: 292px;
  box-shadow: 0 -10px 34px -14px rgba(0,0,0,.55);
}
.pin-steps > li:nth-child(1) { top: 120px; }
.pin-steps > li:nth-child(2) { top: 170px; }
.pin-steps > li:nth-child(3) { top: 220px; }
.pin-steps > li:nth-child(4) { top: 270px; }
.pin-steps > li:nth-child(5) { top: 320px; }

@media (max-width: 1023px) {
  .pin-wrap { grid-template-columns: 1fr; }
  .pin-caption { position: static; }
  .pin-steps > li { position: static; min-height: 0; }
}

/* ---------- global states ---------- */
::selection { background:#8CC63F; color:#12283F; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(30,138,147,.85); border-radius: 999px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:none; border-color:#1E8A93; box-shadow: 0 0 0 4px rgba(30,138,147,.16);
}

/* ---------- marquee ---------- */
.marquee { display:flex; width:max-content; animation: slide 34s linear infinite; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(50%); } }
.marquee-mask { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

.rail { scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }

/* ---------- disclosure ---------- */
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
details[open] .chev { transform: rotate(180deg); }

/* ---------- nav active state ---------- */
.nav-link[aria-current="page"] { background: rgba(255,255,255,.22); }
.m-nav-link[aria-current="page"] { color:#1E8A93; }

/* ---------- forms ---------- */
.field {
  width:100%; border:1.5px solid #DCE7E9; border-radius:14px; background:#fff;
  padding:.85rem 1.05rem; font-size:15px; color:#1B3B5F;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color:#94A3B8; }
.field:hover { border-color:#BFD6DA; }
.label { display:block; font-weight:700; font-size:14px; color:#1B3B5F; margin-bottom:.5rem; }

/* radio / checkbox cards — the two qualifying questions */
.opt { position:relative; display:block; cursor:pointer; }
.opt input { position:absolute; opacity:0; width:0; height:0; }
.opt-box {
  display:flex; align-items:center; gap:.65rem;
  border:1.5px solid #DCE7E9; border-radius:16px; background:#fff;
  padding:.9rem 1.05rem; font-weight:700; font-size:15px; color:#1B3B5F;
  transition: border-color .2s ease, background-color .2s ease, transform .25s cubic-bezier(0.34,1.4,0.64,1);
}
.opt-box .dot {
  width:20px; height:20px; border-radius:999px; border:2px solid #C3D6DA; flex:none;
  display:grid; place-items:center; transition: border-color .2s ease;
}
.opt-box .dot::after {
  content:""; width:10px; height:10px; border-radius:999px; background:#1E8A93;
  transform: scale(0); transition: transform .25s cubic-bezier(0.34,1.4,0.64,1);
}
.opt:hover .opt-box { border-color:#9FC9CE; }
.opt input:checked + .opt-box { border-color:#1E8A93; background:#F2FAFA; }
.opt input:checked + .opt-box .dot { border-color:#1E8A93; }
.opt input:checked + .opt-box .dot::after { transform: scale(1); }
.opt input:focus-visible + .opt-box { box-shadow: 0 0 0 4px rgba(30,138,147,.18); }

/* ---------- article prose (blog posts) ---------- */
.prose-he { color:#475569; font-size:17px; line-height:1.85; }
.prose-he > * + * { margin-top:1.15rem; }
.prose-he h2 {
  font-family:'Heebo','Poppins',sans-serif; font-weight:900; font-size:26px;
  color:#1B3B5F; letter-spacing:-0.02em; margin-top:2.4rem; line-height:1.3;
}
.prose-he h3 {
  font-family:'Heebo','Poppins',sans-serif; font-weight:800; font-size:20px;
  color:#1B3B5F; margin-top:1.8rem;
}
.prose-he strong { color:#1B3B5F; font-weight:700; }
.prose-he ul { list-style:none; display:grid; gap:.7rem; }
.prose-he ul li { position:relative; padding-inline-start:1.6rem; }
.prose-he ul li::before {
  content:""; position:absolute; inset-inline-start:0; top:.66em;
  width:7px; height:7px; border-radius:999px; background:#8CC63F;
}
.prose-he blockquote {
  border-inline-start:4px solid #8CC63F; background:#F7FBF4;
  padding:1.15rem 1.35rem; border-radius:0 16px 16px 0;
  color:#1B3B5F; font-weight:600;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .pin-caption { position: static; }
  .marquee { animation:none; }
  html { scroll-behavior:auto; }
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}