:root{
  --bg-deep:#150A30;
  --bg-mid:#341C63;
  --bg-bright:#5A37A0;
  --cyan:#2AD8DE;
  --cyan-bright:#3FF0EA;
  --ink:#FFFFFF;
  --ink-soft:#D6CFEE;
  --ink-faint:#B3A9D9;
  --card-purple-a:#5A3FA0;
  --card-purple-b:#7A4FC0;
  --card-cyan-a:#1FC7D4;
  --card-cyan-b:#6B3FA0;

  --paper:#FBFAFF;
  --paper-ink:#231A40;
  --paper-ink-soft:#564C78;
  --paper-line:#E4DFF3;

  --amber:#B5762A;
  --amber-bg:#FCEFDD;
  --amber-line:#E9C793;

  --font-display:'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body:'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
}

*{ box-sizing:border-box; min-width:0; }
html{ overflow-x:hidden; width:100%; }
html,body{ margin:0; padding:0; max-width:100%; }
body{
  background:
    radial-gradient(1100px 700px at 88% 92%, rgba(42,216,222,0.30), transparent 60%),
    radial-gradient(900px 600px at 8% 0%, rgba(90,55,160,0.55), transparent 55%),
    linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-mid) 45%, var(--bg-bright) 78%, #2A6E85 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
svg{ max-width:100%; }
a, p, .p-name, .tag{ overflow-wrap:break-word; word-break:break-word; }
::selection{ background:var(--cyan); color:var(--bg-deep); }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan-bright); outline-offset:3px; border-radius:4px;
}
img{ max-width:100%; }

.bubbles{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bubble{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.02) 70%);
  border:1px solid rgba(255,255,255,0.25);
  box-shadow:inset 0 0 25px rgba(255,255,255,0.08);
}
.b1{ width:210px; height:210px; top:-60px; left:-70px; }
.b2{ width:120px; height:120px; top:230px; left:6%; opacity:0.6; }
.b3{ width:70px; height:70px; top:590px; left:2%; opacity:0.55; }
.b4{ width:340px; height:340px; top:-90px; right:-110px; }
.b5{ width:170px; height:170px; top:260px; right:2%; opacity:0.7; }
.b6{ width:80px; height:80px; top:150px; right:22%; opacity:0.5; }
.b7{ width:120px; height:120px; top:470px; right:16%; opacity:0.55; }
.b8{ width:210px; height:210px; bottom:-70px; right:8%; opacity:0.75; }
.b9{ width:60px; height:60px; top:620px; left:26%; opacity:0.45; }

header, main, footer{ position:relative; z-index:1; }
.wrap{ max-width:1400px; margin:0 auto; padding:0 3.5vw; }
.wrap-narrow{ max-width:900px; margin:0 auto; padding:0 3.5vw; }

/* ---------- Risk banner (top of every page) ---------- */
.risk-banner{
  position:relative; z-index:2;
  background:#0C0620;
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:0.6rem 3.5vw;
}
.risk-banner .wrap{ display:flex; align-items:center; gap:0.7rem; padding:0; max-width:1400px; }
.risk-banner svg{ flex:none; width:1.1rem; height:1.1rem; color:var(--cyan-bright); }
.risk-banner p{
  margin:0; font-size:0.82rem; line-height:1.4; color:var(--ink-soft);
}
.risk-banner a{ color:var(--cyan-bright); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Header ---------- */
header.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 3.5vw 0;
  gap:1.5rem;
  max-width:1400px; margin:0 auto;
}
.logo{
  font-family:var(--font-display); font-weight:800; font-size:1.4rem; line-height:1.08;
  text-transform:uppercase; letter-spacing:-0.01em;
}
.logo .a1{ color:var(--ink); }
.logo .a2{ color:var(--cyan-bright); }

nav.primary-nav{ display:flex; align-items:center; gap:1.3rem; font-size:0.92rem; font-weight:500; flex:1; justify-content:center; }
nav.primary-nav a{ opacity:0.92; transition:opacity 0.15s; white-space:nowrap; }
nav.primary-nav a:hover, nav.primary-nav a[aria-current="page"]{ opacity:1; }
nav.primary-nav a[aria-current="page"]{ border-bottom:2px solid var(--cyan-bright); padding-bottom:2px; }

.header-right{ display:flex; align-items:center; gap:0.8rem; flex:none; }
.site-header .cta-btn{ padding:0.75rem 1.3rem; font-size:0.74rem; white-space:nowrap; }
.site-header{ flex-wrap:nowrap; }
.logo{ flex:none; }
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cyan-bright); color:#0E2430;
  font-family:var(--font-body); font-weight:700; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.95rem 1.7rem; border-radius:6px; border:none; cursor:pointer;
  box-shadow:0 8px 24px rgba(42,216,222,0.28);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(42,216,222,0.4); }
.cta-btn.ghost{ background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,0.4); box-shadow:none; }

.nav-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,0.35); border-radius:8px;
  width:2.6rem; height:2.6rem; color:var(--ink); cursor:pointer; align-items:center; justify-content:center;
}

/* ---------- Hero ---------- */
.hero{ padding:3.4rem 0 3.5rem; display:grid; grid-template-columns:1.15fr 0.85fr; gap:2rem; align-items:center; }
h1{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem, 4.6vw, 4.1rem);
  line-height:1.05; letter-spacing:-0.01em; margin:0 0 1.4rem; text-wrap:balance; text-transform:uppercase;
}
.hero-copy p{ font-size:1.15rem; line-height:1.6; color:var(--ink-soft); max-width:34rem; margin:0 0 2.2rem; }

.search-bar{
  display:flex; align-items:center; background:rgba(244,242,250,0.96); border-radius:999px;
  padding:0.4rem 0.4rem 0.4rem 1.6rem; max-width:38rem; box-shadow:0 18px 40px rgba(10,5,30,0.35);
}
.search-bar input{ flex:1; border:none; background:transparent; outline:none; font-family:var(--font-body); font-size:1rem; color:#3A3450; padding:0.7rem 0.5rem; }
.search-bar input::placeholder{ color:#8B84A6; }
.search-bar button{
  flex:none; width:3rem; height:3rem; border-radius:50%; border:none;
  background:linear-gradient(135deg, var(--cyan-bright), var(--cyan)); color:#0E2430;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.search-bar button svg{ width:1.2rem; height:1.2rem; }

.hero-art{ position:relative; display:flex; align-items:center; justify-content:center; min-height:340px; }
.hero-art svg{ width:100%; max-width:460px; height:auto; overflow:visible; }

/* ---------- Category / provider cards (vivid, on dark bg) ---------- */
.categories{ padding:1rem 0 2rem; display:grid; grid-template-columns:repeat(4, 1fr); gap:1.6rem; }
.cat-card{
  border-radius:20px; padding:1.8rem 1.7rem 2rem; min-height:220px; display:flex; flex-direction:column;
  position:relative; overflow:hidden; box-shadow:0 20px 40px rgba(10,5,30,0.28);
}
.cat-card.grad-cyan{ background:linear-gradient(150deg, var(--card-cyan-a) 0%, var(--card-cyan-b) 100%); }
.cat-card.grad-purple{ background:linear-gradient(150deg, var(--card-purple-a) 0%, var(--card-purple-b) 100%); }
.cat-icon{ width:2.6rem; height:2.6rem; margin-bottom:1.3rem; color:#fff; }
.cat-card h2, .cat-card h3{ font-family:var(--font-display); font-weight:800; font-size:1.25rem; text-transform:uppercase; line-height:1.2; margin:0 0 0.7rem; letter-spacing:-0.005em; }
.cat-card p{ font-size:0.95rem; line-height:1.5; color:rgba(255,255,255,0.88); margin:0; }

.dots{ display:flex; gap:0.5rem; padding-bottom:1rem; }
.dots span{ width:0.55rem; height:0.55rem; border-radius:50%; background:rgba(255,255,255,0.28); }
.dots span.active{ background:var(--cyan-bright); width:1.5rem; border-radius:999px; }

/* ---------- Section scaffolding ---------- */
section.block{ padding:4rem 0; }
.eyebrow{
  display:inline-block; font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--cyan-bright); font-weight:700; margin-bottom:0.8rem;
}
h2.block-title{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem, 3vw, 2.4rem);
  line-height:1.12; margin:0 0 1rem; text-wrap:balance;
}
.block-lede{ font-size:1.05rem; line-height:1.65; color:var(--ink-soft); max-width:42rem; margin:0 0 2.4rem; }

/* ---------- Light "paper" content panels (readable long-form) ---------- */
.panel{
  background:var(--paper); color:var(--paper-ink); border-radius:20px;
  padding:2.6rem 2.6rem; box-shadow:0 30px 60px rgba(8,4,24,0.35);
}
.panel p{ color:var(--paper-ink-soft); line-height:1.7; font-size:1.02rem; }
.panel h2, .panel h3{ font-family:var(--font-display); color:var(--paper-ink); }
.panel a{ color:var(--bg-mid); text-decoration:underline; text-underline-offset:2px; }
.panel a:hover{ color:var(--card-purple-b); }

/* ---------- Animated "how it works" demo frame ---------- */
.demo-frame{
  position:relative; max-width:26rem; margin:2.2rem auto 2.6rem; background:#fff; border-radius:20px;
  padding:1.6rem 1.6rem 1.4rem; box-shadow:0 30px 70px rgba(8,4,24,0.45); min-height:12rem;
  border:6px solid rgba(255,255,255,0.08);
}
.demo-screen{ display:none; color:var(--paper-ink); animation:cai-rise 0.5s cubic-bezier(.16,1,.3,1); }
.demo-screen.active{ display:block; }
.demo-step-tag{ font-size:0.68rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--bg-mid); }
.demo-screen h4{ font-family:var(--font-display); font-size:1.05rem; margin:0.4rem 0 0.9rem; }
.demo-option{ padding:0.6rem 0.9rem; border:1.5px solid var(--paper-line); border-radius:8px; font-size:0.85rem; margin-bottom:0.5rem; color:var(--paper-ink-soft); }
.demo-option.demo-selected{ border-color:var(--bg-mid); background:#F3EFFC; color:var(--bg-mid); font-weight:600; }
.demo-cert{ display:flex; align-items:center; gap:0.7rem; background:#F3EFFC; border-radius:10px; padding:0.9rem 1rem; }
.demo-cert svg{ flex:none; width:1.4rem; height:1.4rem; color:var(--bg-mid); }
.demo-cert span{ font-size:0.88rem; font-weight:600; color:var(--bg-mid); }
.demo-match{ display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0; font-size:0.9rem; border-bottom:1px solid var(--paper-line); }
.demo-match:last-child{ border-bottom:none; }
.demo-dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); flex:none; }
.demo-progress{ display:flex; gap:0.4rem; margin-top:1.2rem; }
.demo-progress span{ flex:1; height:3px; background:var(--paper-line); border-radius:999px; overflow:hidden; position:relative; }
.demo-progress span::after{ content:''; position:absolute; inset:0; background:var(--cyan); transform:scaleX(0); transform-origin:left; }
.demo-progress span.filled::after{ transform:scaleX(1); }
.demo-progress span.filling::after{ transform:scaleX(1); transition:transform 3.4s linear; }

/* ---------- How it works steps ---------- */
.steps-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.4rem; }
.step-card{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  border-radius:16px; padding:1.6rem 1.5rem; backdrop-filter:blur(6px);
}
.step-num{
  font-family:var(--font-display); font-weight:800; font-size:0.85rem;
  color:var(--bg-deep); background:var(--cyan-bright);
  width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.step-card h3{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 0.5rem; }
.step-card p{ font-size:0.92rem; color:var(--ink-soft); line-height:1.5; margin:0; }

/* ---------- Risk / trust section on homepage ---------- */
.risk-block{
  border-radius:22px; padding:2.4rem 2.6rem;
  background:linear-gradient(155deg, rgba(181,118,42,0.16), rgba(181,118,42,0.05));
  border:1px solid rgba(233,199,147,0.35);
}
.risk-block .eyebrow{ color:#F0C888; }
.risk-block h2{ color:var(--ink); }
.risk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:1.6rem; }
.risk-item{ display:flex; gap:0.9rem; }
.risk-item svg{ flex:none; width:1.5rem; height:1.5rem; color:#F0C888; margin-top:0.15rem; }
.risk-item h4{ font-family:var(--font-display); font-size:0.98rem; margin:0 0 0.35rem; color:var(--ink); }
.risk-item p{ font-size:0.9rem; color:var(--ink-soft); line-height:1.5; margin:0; }

/* ---------- Provider cards (light, factual) ---------- */
.provider-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
.provider-card{
  background:var(--paper); border-radius:20px; padding:2rem 2rem 2.2rem; color:var(--paper-ink);
  box-shadow:0 24px 48px rgba(8,4,24,0.32); display:flex; flex-direction:column;
}
.provider-card .p-name{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; margin:0 0 0.3rem; }
.provider-card .p-meta{ font-size:0.8rem; color:var(--paper-ink-soft); margin:0 0 1rem; }
.provider-card .p-summary{ font-size:0.96rem; color:var(--paper-ink-soft); line-height:1.6; margin:0 0 1.2rem; }
.tag-row{ display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-bottom:1.3rem; row-gap:0.4rem; }
.tag{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--bg-mid); padding:0 0.75rem; border-right:1px solid var(--paper-line);
}
.tag::before{ content:''; flex:none; width:5px; height:5px; background:var(--cyan); }
.tag:first-child{ padding-left:0; }
.tag:last-child{ border-right:none; }
.reg-flag{
  display:flex; gap:0.6rem; align-items:flex-start; background:var(--amber-bg);
  border:1px solid var(--amber-line); border-radius:10px; padding:0.75rem 0.9rem; margin-bottom:1.3rem;
}
.reg-flag svg{ flex:none; width:1.1rem; height:1.1rem; color:var(--amber); margin-top:0.1rem; }
.reg-flag p{ margin:0; font-size:0.82rem; color:#6B4B1E; line-height:1.5; }
.provider-card.is-test{ border:1.5px dashed var(--amber); background:repeating-linear-gradient(135deg, var(--paper), var(--paper) 14px, #FBF3E7 14px, #FBF3E7 28px); }

.blog-filters{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:1.4rem; }
.blog-filter-btn{
  font-family:var(--font-body); font-size:0.78rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  padding:0.55rem 1rem; border-radius:6px; border:1.5px solid rgba(255,255,255,0.25); background:transparent; color:var(--ink-soft); cursor:pointer;
}
.blog-filter-btn.active{ background:var(--cyan-bright); color:#0E2430; border-color:var(--cyan-bright); }
.blog-search{
  width:100%; padding:0.85rem 1.1rem; border-radius:10px; border:none; background:rgba(255,255,255,0.94);
  font-family:var(--font-body); font-size:16px; margin-bottom:1.6rem;
}
.blog-card.featured{ border:1.5px solid var(--cyan); }
.featured-flag{
  display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--bg-mid); background:#E3F1EC; padding:0.2rem 0.55rem; border-radius:4px; margin-bottom:0.5rem;
}
.demo-badge{
  align-self:flex-start; background:var(--paper); color:var(--amber); font-size:0.66rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; padding:0.3rem 0.6rem; border-radius:3px; margin-bottom:0.9rem;
  border:1.5px dashed var(--amber); transform:rotate(-2deg);
}
.p-figures{ display:flex; gap:1.6rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--paper-line); }
.p-figures .fig-num{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--bg-mid); }
.p-figures .fig-label{ display:block; font-size:0.74rem; color:var(--paper-ink-soft); }
.provider-card .p-actions{ margin-top:auto; display:flex; gap:0.7rem; flex-wrap:wrap; }
.btn-solid{
  display:inline-flex; align-items:center; gap:0.4rem; background:var(--bg-mid); color:#fff;
  font-weight:700; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.7rem 1.15rem; border-radius:6px; border:none; cursor:pointer;
}
.btn-outline{
  display:inline-flex; align-items:center; gap:0.4rem; background:transparent; color:var(--bg-mid);
  font-weight:700; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.66rem 1.15rem; border-radius:6px; border:1.5px solid var(--paper-line); cursor:pointer;
}

/* ---------- FAQ ---------- */
.faq-list{ display:flex; flex-direction:column; gap:0.7rem; }
.faq-item{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:12px; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:1.1rem 1.3rem; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-weight:600; font-size:1rem; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ flex:none; width:1rem; height:1rem; transition:transform 0.15s ease; }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-item .faq-a{ padding:0 1.3rem 1.2rem; color:var(--ink-soft); font-size:0.94rem; line-height:1.6; margin:0; }

/* ---------- Footer ---------- */
footer.site-footer{ padding:3rem 0 2.2rem; border-top:1px solid rgba(255,255,255,0.1); margin-top:2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.2rem; }
.footer-grid h4{ font-family:var(--font-display); font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 0.9rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
.footer-grid a{ font-size:0.92rem; color:var(--ink-soft); }
.footer-grid a:hover{ color:var(--ink); }
.footer-legal{ font-size:0.78rem; color:var(--ink-faint); line-height:1.6; border-top:1px solid rgba(255,255,255,0.08); padding-top:1.6rem; }
.footer-legal p{ margin:0 0 0.7rem; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:1.4rem; }

.chat-fab{
  position:fixed; right:1.8rem; bottom:1.8rem; z-index:30; width:3.4rem; height:3.4rem; border-radius:50%;
  background:linear-gradient(135deg, var(--cyan-bright), var(--cyan));
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px rgba(42,216,222,0.4);
  color:#0E2430; border:none; cursor:pointer;
}
.chat-fab svg{ width:1.5rem; height:1.5rem; }
.chat-fab .chat-dot{
  position:absolute; top:-2px; right:-2px; width:0.8rem; height:0.8rem; border-radius:50%;
  background:#E2495A; border:2px solid var(--bg-deep); display:none;
}
.chat-fab.has-unread .chat-dot{ display:block; }

.chat-panel{
  position:fixed; right:1.8rem; bottom:5.6rem; z-index:29; width:22rem; max-width:calc(100vw - 2.4rem);
  height:28rem; max-height:calc(100vh - 8rem);
  background:var(--paper); color:var(--paper-ink); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 60px rgba(8,4,24,0.4); display:none; flex-direction:column;
}
.chat-panel.open{ display:flex; }
.chat-panel-head{
  background:var(--bg-deep); color:#fff; padding:1rem 1.2rem; display:flex; justify-content:space-between; align-items:center;
}
.chat-panel-head strong{ font-family:var(--font-display); font-size:0.95rem; }
.chat-panel-head p{ margin:0.1rem 0 0; font-size:0.76rem; color:var(--ink-faint); }
.chat-panel-close{ background:none; border:none; color:#fff; cursor:pointer; opacity:0.8; }
.chat-body{ flex:1; overflow-y:auto; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:0.6rem; }
.chat-msg{ max-width:82%; padding:0.55rem 0.8rem; border-radius:12px; font-size:0.88rem; line-height:1.4; }
.chat-msg.visitor{ align-self:flex-end; background:var(--bg-mid); color:#fff; border-bottom-right-radius:3px; }
.chat-msg.staff{ align-self:flex-start; background:#EFEAFB; color:var(--paper-ink); border-bottom-left-radius:3px; }
.chat-empty{ color:var(--paper-ink-soft); font-size:0.86rem; text-align:center; margin-top:1.5rem; }
.chat-precapture{ padding:0.9rem 1.1rem; border-top:1px solid var(--paper-line); display:flex; flex-direction:column; gap:0.5rem; }
.chat-precapture input{ font-family:var(--font-body); font-size:0.86rem; padding:0.55rem 0.7rem; border-radius:8px; border:1.5px solid var(--paper-line); }
.chat-input-row{ display:flex; gap:0.5rem; padding:0.8rem 0.9rem; border-top:1px solid var(--paper-line); }
.chat-input-row textarea{
  flex:1; resize:none; font-family:var(--font-body); font-size:16px; padding:0.55rem 0.7rem; border-radius:10px;
  border:1.5px solid var(--paper-line); max-height:5rem;
}
.chat-input-row button{
  flex:none; background:var(--bg-mid); color:#fff; border:none; border-radius:10px; width:2.6rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.chat-input-row button svg{ width:1.1rem; height:1.1rem; }

/* ---------- Simple pages (About / Contact) ---------- */
.page-hero{ padding:3rem 0 2.4rem; }
.page-hero h1{ font-size:clamp(2.1rem, 4vw, 3rem); }
.page-hero p{ color:var(--ink-soft); font-size:1.08rem; max-width:38rem; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-field{ display:flex; flex-direction:column; gap:0.4rem; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-size:0.85rem; font-weight:600; color:var(--paper-ink); }
.form-field input, .form-field select, .form-field textarea{
  font-family:var(--font-body); font-size:16px; padding:0.75rem 0.9rem; border-radius:10px;
  border:1.5px solid var(--paper-line); background:#fff; color:var(--paper-ink);
}
.form-field textarea{ resize:vertical; min-height:7rem; }
.form-note{ font-size:0.82rem; color:var(--paper-ink-soft); margin-top:-0.3rem; }

/* ---------- Comparison tool ---------- */
.tool-shell{ display:flex; flex-direction:column; gap:1.6rem; }
.progress-track{ display:flex; gap:0.5rem; }
.progress-track span{ height:5px; flex:1; border-radius:999px; background:rgba(255,255,255,0.15); }
.progress-track span.done{ background:var(--cyan-bright); }
.tool-step{ display:none; }
.tool-step.active{ display:block; }
.option-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0.9rem; margin-top:1.6rem; }
.option-card{
  display:flex; align-items:flex-start; gap:0.7rem; text-align:left; cursor:pointer;
  background:#fff; border:1.5px solid var(--paper-line); border-radius:14px; padding:1.1rem 1.2rem;
  font-family:var(--font-body); color:var(--paper-ink);
}
.option-card input{ margin-top:0.2rem; flex:none; }
.option-card .o-title{ font-weight:700; font-size:0.98rem; display:block; margin-bottom:0.2rem; }
.option-card .o-sub{ font-size:0.85rem; color:var(--paper-ink-soft); }
.option-card:has(input:checked){ border-color:var(--bg-mid); background:#F3EFFC; }
.tool-nav{ display:flex; justify-content:space-between; margin-top:2rem; }
.btn-back{ background:none; border:none; color:var(--paper-ink-soft); font-weight:600; cursor:pointer; font-size:0.92rem; }

.cert-statement{
  background:#F3EFFC; border:1.5px solid var(--paper-line); border-radius:14px; padding:1.2rem 1.3rem; margin-bottom:1rem;
}
.cert-statement summary{ cursor:pointer; font-weight:700; font-size:0.97rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.cert-statement summary::-webkit-details-marker{ display:none; }
.cert-statement p{ font-size:0.88rem; color:var(--paper-ink-soft); margin:0.8rem 0 0; line-height:1.55; }
.cert-statement label.agree{ display:flex; gap:0.6rem; align-items:flex-start; margin-top:0.9rem; font-size:0.86rem; font-weight:600; }

.results-intro{ text-align:center; margin-bottom:2rem; }

@media (max-width:82rem){
  nav.primary-nav{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:64rem){
  .hero{ grid-template-columns:1fr; padding-top:2.2rem; }
  .hero-art{ min-height:auto; margin-top:2rem; opacity:0.9; }
  .hero-art svg{ max-width:220px; }
  .categories{ grid-template-columns:repeat(2, 1fr); }
  .steps-row{ grid-template-columns:repeat(2,1fr); }
  .risk-grid{ grid-template-columns:1fr; }
  .provider-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .form-grid, .option-grid{ grid-template-columns:1fr; }
}
@media (max-width:34rem){
  .categories{ grid-template-columns:1fr; }
  .steps-row{ grid-template-columns:1fr; }
  .cta-btn{ padding:0.8rem 1.3rem; font-size:0.78rem; }
  .panel{ padding:1.8rem 1.5rem; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-art svg{ max-width:170px; }
  .hero-art{ margin-top:1.4rem; }
  h1{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
  .search-bar{ padding-left:1.1rem; }
}

/* ---------- Hero entrance (signature moment, plays once on load) ---------- */
@keyframes cai-rise{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-copy > *{ opacity:0; animation:cai-rise 0.75s cubic-bezier(.16,1,.3,1) forwards; }
.hero-copy > h1{ animation-delay:0.05s; }
.hero-copy > p{ animation-delay:0.22s; }
.hero-copy > form{ animation-delay:0.38s; }
.hero-art{ opacity:0; transform:translateY(18px) scale(0.96); animation:cai-rise 0.9s cubic-bezier(.16,1,.3,1) forwards; animation-delay:0.3s; }
.hero-art svg{ transform:none; }

/* ---------- Scroll reveal (applied via .reveal + a small JS observer) ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .cta-btn{ transition:none; }
  .hero-copy > *, .hero-art{ animation:none; opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}