/* Talking Parent static landing page (no framework) */

:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;
  --border:#e2e8f0;
  /* Darker brand colours to meet WCAG contrast with white button text */
  --sky:#0369a1;      /* sky-700 */
  --sky2:#075985;     /* sky-800 */
  --emerald:#047857;  /* emerald-700 */
  --emerald2:#065f46; /* emerald-800 */
  --slate900:#0f172a;
  --slate800:#1e293b;
  --slate950:#020617;
  --card:#ffffff;
  --shadow: 0 12px 40px rgba(0,0,0,.10);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --radius: 18px;
  --max: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;height:auto}
a{color:inherit}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* Nav */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:50;
  background: #fff;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled{
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, var(--sky), var(--emerald));
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px;
}
.brand-name{font-weight:800; letter-spacing:-.2px}
.nav-links{display:none; gap:22px; align-items:center}
.nav-links a{font-size:14px; text-decoration:none; color:var(--muted2)}
.nav-links a:hover{color:var(--text)}
.nav-ctas{display:none; gap:10px; align-items:center}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  transition: transform .05s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:active{transform: scale(.985)}
.btn-outline{background:transparent; border-color: #cbd5e1; color:var(--text)}
.btn-outline:hover{border-color:#94a3b8; background:#f8fafc}
.btn-sky{background:var(--sky); color:#fff; box-shadow: 0 16px 40px rgba(2,132,199,.18)}
.btn-sky:hover{background:var(--sky2)}
.btn-emerald{background:var(--emerald); color:#fff; box-shadow: 0 16px 40px rgba(5,150,105,.18)}
.btn-emerald:hover{background:var(--emerald2)}
.btn-lg{padding:14px 18px; border-radius:14px; font-size:16px}

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
}
.nav-toggle:hover{background:#f1f5f9}

.mobile{
  display:none;
  background:#fff;
  border-top:1px solid #f1f5f9;
  padding:14px 0 18px;
}
.mobile.is-open{display:block;}
.mobile a{display:block; padding:10px 8px; text-decoration:none; color:var(--muted)}
.mobile a:hover{color:var(--text)}
.mobile .mobile-ctas{display:grid; gap:10px; padding-top:12px; border-top:1px solid #f1f5f9; margin-top:10px}

@media (min-width: 900px){
  .nav-inner{height:76px}
  .nav-links{display:flex}
  .nav-ctas{display:flex}
  .nav-toggle{display:none}
  .brand-name{display:block}
}

/* Hero */
.hero{
  position:relative;
  min-height: 90vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
  overflow:hidden;
}
.hero-bg-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  opacity:0.28;
  transform: translateZ(0);
}
.hero-inner{
  position:relative;
  z-index:1;
  text-align:center;
  padding-top: 92px;
  padding-bottom: 64px;
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  background:#f0f9ff;
  border:1px solid #e0f2fe;
  padding:10px 14px;
  border-radius:999px;
  color:#334155;
  font-weight:700;
  font-size:13px;
  margin-bottom:20px;
}
.dot{width:9px;height:9px;border-radius:99px;background:var(--emerald); box-shadow:0 0 0 0 rgba(5,150,105,.45); animation:pulse 1.6s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(5,150,105,.45)}
  70%{box-shadow:0 0 0 10px rgba(5,150,105,0)}
  100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}
}

.h1{
  font-size: clamp(34px, 4.2vw, 60px);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 16px;
}
.grad-text{
  background: linear-gradient(90deg, var(--sky), var(--emerald));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.lede{
  font-size: clamp(16px, 2.1vw, 20px);
  color:var(--muted);
  margin:0 auto 26px;
  max-width: 820px;
}
.hero-ctas{display:flex; flex-direction:column; gap:12px; align-items:stretch; justify-content:center; max-width: 620px; margin: 0 auto}
@media (min-width: 640px){
  .hero-ctas{flex-direction:row; align-items:center}
}

.trust-row{
  margin-top:32px;
  padding-top:18px;
  border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap;
  gap:14px 26px;
  align-items:center;
  justify-content:center;
  color:var(--muted2);
  font-size:13px;
}
.check{
  width:18px; height:18px;
  border-radius:999px;
  background:#dcfce7;
  display:grid; place-items:center;
}
.check svg{width:12px;height:12px; fill: var(--emerald)}

.wave{position:absolute; left:0; right:0; bottom:-1px}

/* Sections */
.section{padding:72px 0}
.section.alt{background:#f8fafc}
.section h2{font-size: clamp(26px, 3vw, 40px); line-height:1.12; letter-spacing:-.02em; margin:0 0 10px}
.section p.lead{margin:0; color:var(--muted); font-size:18px}
.center{max-width:820px; margin:0 auto; text-align:center}

.cards{display:grid; gap:18px; margin-top:26px}
@media (min-width: 900px){.cards{grid-template-columns: 1fr 1fr}}
.card{
  background:var(--card);
  border:2px solid #eef2f7;
  border-radius: var(--radius);
  padding:22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{transform: translateY(-4px); box-shadow: var(--shadow)}
.card.sky{border-color:#e0f2fe}
.card.sky:hover{border-color:#7dd3fc}
.card.em{border-color:#d1fae5}
.card.em:hover{border-color:#6ee7b7}

.card-head{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.iconbox{width:46px;height:46px;border-radius:14px; display:grid; place-items:center}
.iconbox.sky{background:#e0f2fe}
.iconbox.em{background:#d1fae5}
.iconbox svg{width:22px;height:22px}
.iconbox.sky svg{stroke:var(--sky)}
.iconbox.em svg{stroke:var(--emerald)}
.card h3{margin:0; font-size:22px; letter-spacing:-.01em}
.card .tag{margin-top:2px; color:var(--muted2); font-weight:700; font-size:13px}

.features{margin:14px 0 18px; padding:0; list-style:none; display:grid; gap:10px}
.features li{display:flex; gap:10px; align-items:flex-start; color:#334155}
.bullet{width:18px;height:18px;border-radius:999px; display:grid; place-items:center; flex:0 0 18px; margin-top:2px}
.bullet.sky{background:#e0f2fe}
.bullet.em{background:#d1fae5}
.bullet svg{width:12px;height:12px; stroke-width:2}
.bullet.sky svg{stroke:var(--sky)}
.bullet.em svg{stroke:var(--emerald)}

.note{margin-top:18px; text-align:center; color:var(--muted2); font-size:13px; max-width: 820px; margin-left:auto; margin-right:auto}

/* Comparison */
/*
  On narrower viewports the feature matrix can overflow.
  We allow horizontal scrolling for the table variant (big-table)
  so columns never get clipped or appear misaligned.
*/
.table-wrap{margin-top:24px; background:#fff; border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm)}
.table-wrap.big-table{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; min-width: 760px; table-layout:fixed}
.compare-table th.col-feature{width:44%}
.compare-table th:not(:first-child){text-align:center}
.compare-table td.status{display:grid; place-items:center}
.compare-table td{vertical-align:middle}
.compare-table th{white-space:nowrap}
@media (max-width: 420px){.compare-table th{white-space:normal}}

th,td{padding:14px 14px; border-bottom:1px solid #f1f5f9}
th{background:#f8fafc; text-align:left; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted2)}
tr:nth-child(even) td{background:#fafafa}
.status{display:grid; place-items:center}
.pill{
  width:26px; height:26px;
  border-radius:999px;
  display:grid; place-items:center;
}
.pill.yes{background:#dcfce7}
.pill.yes svg{stroke:var(--emerald)}
.pill.no{background:#f1f5f9}
.pill.no svg{stroke:#94a3b8}
.pill.lim{background:#fef3c7}
.pill.lim svg{stroke:#d97706}

.small-
.big-
@media (min-width: 900px){
  .big-
  .small-
}

/* Why it matters */
.split{display:grid; gap:26px; margin-top:26px}
@media (min-width: 980px){.split{grid-template-columns: 1.15fr .85fr; gap:34px}}
.prose h3{font-size:22px; margin:22px 0 10px}
.prose p{color:var(--muted); margin:0 0 14px}
.prose ul{margin:0 0 14px; padding-left:18px; color:var(--muted)}

.hcards{display:grid; gap:14px}
.hcard{border:1px solid #eef2f7; border-radius: var(--radius); padding:16px; background: linear-gradient(135deg, #f8fafc, #f0f9ff)}
.hcard:nth-child(2){background: linear-gradient(135deg, #f8fafc, #ecfdf5)}
.hcard:nth-child(3){background: linear-gradient(135deg, #f8fafc, #f5f3ff)}
.hcard:nth-child(4){background: linear-gradient(135deg, #f8fafc, #fff7ed)}
.hcard-title{font-weight:800; margin:0 0 6px}
.hcard p{margin:0; color:var(--muted); font-size:14px}

/* FAQ */
.faq{max-width: 920px; margin: 0 auto}
details{border-bottom:1px solid var(--border); padding:14px 0}
details:last-child{border-bottom:none}
summary{cursor:pointer; font-weight:800; list-style:none}
summary::-webkit-details-marker{display:none}
summary{display:flex; align-items:center; justify-content:space-between; gap:10px}
summary span{font-size:16px}
.details-body{color:var(--muted); padding:10px 0 2px}
.chev{width:18px;height:18px; transition: transform .18s ease}
details[open] .chev{transform: rotate(180deg)}

/* Footer */
.footer{background: var(--slate900); color:#fff; padding:48px 0}
.footer-grid{display:grid; gap:22px; padding-bottom:22px; border-bottom: 1px solid rgba(148,163,184,.25)}
@media (min-width: 900px){.footer-grid{grid-template-columns: 1.2fr 1fr 1fr}}
.footer p{color: rgba(226,232,240,.78); margin:0}
.footer a{color: rgba(226,232,240,.85); text-decoration:none}
.footer a:hover{color:#fff}
.footer h3,.footer h4{margin:0 0 12px; font-size:16px}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px; font-size:14px}
.disclaimer{
  margin-top:18px;
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 14px;
  padding:14px;
  color: rgba(226,232,240,.78);
  font-size:12px;
}
.footer-bottom{display:flex; flex-direction:column; gap:10px; margin-top:18px; color: rgba(148,163,184,.9); font-size:12px}
@media (min-width: 900px){.footer-bottom{flex-direction:row; align-items:center; justify-content:space-between}}

/* Utility */
.skip{
  position:absolute; left:-999px; top:0;
  background:#fff; color:#000;
  padding:10px 12px;
  border-radius:10px;
  z-index:60;
}
.skip:focus{left:12px; top:12px}