:root {
  --ink: #12203A;
  --ink2: #46536B;
  --sun: #FFC91F;
  --sun-light: #FFF1BF;
  --bg: #FFFFFF;
  --line: rgba(18,32,58,.12);
  --gutter: 16px;
  --max: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; font-weight: 900; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.muted { color: var(--ink2); }
.lead { font-size: 19px; color: var(--ink2); margin-top: 16px; max-width: 640px; }

/* corner sun, as in the app */
.sun {
  position: absolute; top: 0; right: 0; width: 120px; height: 120px;
  pointer-events: none; overflow: hidden;
}
.sun::before {
  content: ""; position: absolute; top: -52px; right: -52px;
  width: 104px; height: 104px; border-radius: 50%; background: var(--sun);
}
.sun i {
  position: absolute; top: 0; right: 0; width: 120px; height: 120px;
}
.sun i::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 4px; height: 22px; border-radius: 2px; background: var(--sun);
  transform-origin: 0 0;
}
.sun i:nth-child(1)::after { transform: translate(-10px, 64px) rotate(-150deg); }
.sun i:nth-child(2)::after { transform: translate(-28px, 62px) rotate(-130deg); }
.sun i:nth-child(3)::after { transform: translate(-48px, 52px) rotate(-110deg); }
.sun i:nth-child(4)::after { transform: translate(-60px, 34px) rotate(-90deg); }
.sun i:nth-child(5)::after { transform: translate(-66px, 12px) rotate(-70deg); }

/* nav */
header.top { position: relative; }
.nav { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 22px; }
.brand img { width: 40px; height: 40px; border-radius: 11px; }
.nav nav { display: none; gap: 28px; font-weight: 700; font-size: 16px; margin-right: 110px; }
.nav nav a { text-decoration: none; color: var(--ink2); }
.nav nav a:hover { color: var(--ink); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 28px; border-radius: 999px;
  border: 2.5px solid var(--ink); background: var(--bg); color: var(--ink);
  font: inherit; font-weight: 800; font-size: 18px; text-decoration: none;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.sun-fill { background: var(--sun); }
.btn.sun-fill:hover { background: #ffd54a; }
.btn-row { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.btn-row .btn { width: 100%; }
.coming { font-size: 16px; color: var(--ink2); font-weight: 700; text-align: center; }

/* phone frame drawn in CSS */
.phone {
  position: relative; width: 100%; max-width: 300px; margin: 0 auto;
  background: var(--ink); border-radius: 44px; padding: 12px;
  box-shadow: 0 30px 60px -30px rgba(18,32,58,.45), 0 0 0 1px rgba(18,32,58,.1);
}
.phone::before {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.14); z-index: 2;
}
.phone .screen { border-radius: 34px; overflow: hidden; background: #fff; aspect-ratio: 405 / 720; }
.phone .screen img { width: 100%; height: 100%; object-fit: cover; }

/* hero */
.hero { position: relative; padding-top: 48px; padding-bottom: 72px; }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.eyebrow { display: inline-block; font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); margin-bottom: 18px; }
.hero h1 { font-size: clamp(44px, 12vw, 60px); }
.hero h1 .ok { display: inline-block; background: var(--sun); border-radius: 10px; padding: 0 .08em; line-height: .92; margin-top: .06em; }
.hero .lead { font-size: 19px; color: var(--ink2); margin: 20px 0 0; max-width: 560px; }
.hero .lead + .lead { margin-top: 14px; }
.hero .btn-row { margin-top: 28px; }
.hero .lead b { color: var(--ink); font-weight: 800; }
.hero .phone { max-width: 280px; }

/* feature trio */
.feats { padding: 24px 0 40px; }
.feats .grid { display: grid; gap: 18px; }
.feat { border: 2.5px solid var(--ink); border-radius: 24px; padding: 24px 22px; }
.feat svg { width: 56px; height: 56px; margin-bottom: 16px; }
.feat h3 { font-size: 24px; margin-bottom: 10px; }
.feat p { color: var(--ink2); font-size: 17px; }

/* why band */
.why { background: var(--sun-light); padding: 72px 0; position: relative; }
.why h2 { font-size: clamp(38px, 10vw, 60px); max-width: 720px; }
.why .sub { margin-top: 18px; font-size: 19px; color: var(--ink2); max-width: 600px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.chip { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 10px 18px 10px 12px; font-weight: 800; font-size: 18px; }
.chip .ck { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.chip .ck svg { width: 14px; height: 14px; }
.why .roles { margin-top: 28px; font-size: 18px; color: var(--ink2); max-width: 680px; }

/* how it works */
.story { padding-top: 24px; padding-bottom: 24px; }
.story .kicker { font-size: 16px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; padding-top: 24px; }
.story .lead { margin-top: 10px; }
.step { display: grid; gap: 36px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.step:first-of-type { border-top: 0; }
.step .num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); font-weight: 900; font-size: 20px; margin-bottom: 20px; }
.step h3 { font-size: clamp(34px, 9vw, 52px); }
.step p { margin-top: 18px; font-size: 19px; color: var(--ink2); max-width: 480px; }
.step .phone { max-width: 260px; }
.then { list-style: none; margin: 8px 0 0; padding: 32px 0 24px; border-top: 1px solid var(--line); display: grid; gap: 14px; counter-reset: then; }
.then li { counter-increment: then; display: flex; gap: 14px; align-items: flex-start; font-size: 18px; font-weight: 700; }
.then li::before { content: counter(then); flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; line-height: 1; }

/* privacy and safety */
.care { padding: 56px 0 24px; }
.care h2 { font-size: clamp(32px, 8vw, 44px); }
.care ul { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.care li { display: flex; gap: 14px; align-items: flex-start; border: 2.5px solid var(--ink); border-radius: 22px; padding: 16px 18px; font-size: 17px; font-weight: 700; }
.care li .dot { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--sun); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.care li .dot svg { width: 14px; height: 14px; }
.care .note { margin-top: 24px; font-size: 16px; color: var(--ink2); max-width: 680px; }

/* FAQ */
.faq { padding: 56px 0 40px; }
.faq h2 { font-size: clamp(32px, 8vw, 44px); margin-bottom: 20px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 800; font-size: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; line-height: 1; }
.faq details[open] summary::after { content: "–"; background: var(--sun); }
.faq details p { padding: 0 0 22px; color: var(--ink2); font-size: 18px; max-width: 720px; }

/* get it */
.get { padding: 48px 0 80px; }
.get .box { background: var(--ink); color: #fff; border-radius: 32px; padding: 40px 24px; text-align: center; position: relative; overflow: hidden; }
.get .box h2 { font-size: clamp(34px, 9vw, 52px); }
.get .box p { color: rgba(255,255,255,.78); margin: 16px auto 28px; max-width: 520px; font-size: 18px; }
.get .box .btn { border-color: var(--sun); background: var(--sun); color: var(--ink); }
.get .box .coming { color: rgba(255,255,255,.78); margin-top: 16px; }
.get .box img { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 18px; }
.get .box .fine { font-size: 15px; color: rgba(255,255,255,.62); margin: 22px auto 0; max-width: 520px; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 32px 0 40px; font-size: 15px; color: var(--ink2); }
footer .cols { display: flex; flex-direction: column; gap: 18px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 700; }
footer nav a { text-decoration: none; }
footer nav a:hover { text-decoration: underline; }
footer .maker { display: flex; align-items: flex-start; gap: 10px; max-width: 640px; }
footer .maker img { width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; }

@media (min-width: 720px) {
  body { font-size: 19px; }
  .btn-row { flex-direction: row; align-items: center; }
  .btn-row .btn { width: auto; }
  .coming { text-align: left; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 40px; }
  .hero .phone { margin: 0 auto; }
  .feats .grid { grid-template-columns: repeat(3, 1fr); }
  .step { grid-template-columns: 1fr 1fr; gap: 48px; padding: 80px 0; }
  .step.flip .phone-col { order: -1; }
  .care ul { grid-template-columns: 1fr 1fr; }
  footer .cols { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1024px) {
  .sun { width: 180px; height: 180px; }
  .sun::before { top: -80px; right: -80px; width: 160px; height: 160px; }
  .sun i { width: 180px; height: 180px; }
  .sun i::after { height: 30px; width: 5px; }
  .sun i:nth-child(1)::after { transform: translate(-14px, 98px) rotate(-150deg); }
  .sun i:nth-child(2)::after { transform: translate(-42px, 94px) rotate(-130deg); }
  .sun i:nth-child(3)::after { transform: translate(-72px, 78px) rotate(-110deg); }
  .sun i:nth-child(4)::after { transform: translate(-92px, 50px) rotate(-90deg); }
  .sun i:nth-child(5)::after { transform: translate(-100px, 18px) rotate(-70deg); }
  .nav { padding-top: 28px; }
  .nav nav { display: flex; }
  .hero { padding-top: 72px; padding-bottom: 104px; }
  .hero h1 { font-size: 84px; }
  .hero .lead { font-size: 20px; }
  .hero .phone { max-width: 320px; }
  .step h3 { font-size: 56px; }
  .step .phone { max-width: 300px; }
  .why { padding: 104px 0; }
  .why h2 { font-size: 64px; }
  .faq { padding: 80px 0 48px; }
  .get .box { padding: 64px 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* ---- site-wide additions on top of the home page CSS ---- */
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin-wght-normal.woff2) format("woff2");font-weight:200 1000;font-display:swap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px;z-index:99}
.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.btn.small{min-height:44px;padding:8px 18px;font-size:16px}
.nav nav .btn.small{color:var(--ink)}

/* mobile menu */
.menu{position:relative;margin-right:64px}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--ink);border-radius:50%;background:#fff}
.menu summary::-webkit-details-marker{display:none}
.menu nav{margin:0;position:absolute;right:0;top:52px;z-index:20;min-width:220px;background:#fff;border:2.5px solid var(--ink);border-radius:20px;padding:10px;display:flex;flex-direction:column;box-shadow:0 20px 40px -20px rgba(18,32,58,.4)}
.menu nav a{padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:800}
.menu nav a:hover{background:var(--sun-light)}
@media (min-width:1024px){.menu{display:none}}

/* breadcrumbs */
.crumbs{padding-top:16px;font-size:15px;color:var(--ink2);font-weight:700}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{text-decoration:none}

/* article pages (use cases, questions, blog, compare, how it works) */
.article-hero{position:relative;padding:32px 0 40px}
.article-hero .grid{display:grid;gap:32px;align-items:center}
.article-hero h1{font-size:clamp(36px,9vw,56px);max-width:16ch}
.article-hero .summary{font-size:20px;color:var(--ink2);margin-top:18px;max-width:600px}
.article-hero .phone{max-width:240px}
.article-hero .btn-row{margin-top:28px}
.article{padding:8px 0 56px}
.article .prose{max-width:720px}
.prose h2{font-size:clamp(28px,6vw,38px);margin:44px 0 14px}
.prose h3{font-size:22px;margin:30px 0 10px}
.prose p{margin:0 0 16px;font-size:18px;color:#2A3650}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px;font-size:18px;color:#2A3650}
.prose li{margin:6px 0}
.prose blockquote{margin:18px 0;padding:14px 18px;border-left:5px solid var(--sun);background:var(--sun-light);border-radius:0 16px 16px 0}
.prose blockquote p{margin:0}
.prose a{font-weight:800}
.prose code{font-family:inherit;font-weight:800;background:var(--sun-light);padding:0 .3em;border-radius:6px}
.prose .updated{font-size:15px;color:var(--ink2);margin-top:28px}
.prose strong{color:var(--ink)}
.faq-inline{padding:24px 0 48px}
.faq-inline h2{font-size:clamp(28px,6vw,38px);margin-bottom:12px}
.faq-inline details{border-top:1px solid var(--line)}
.faq-inline details:last-of-type{border-bottom:1px solid var(--line)}
.faq-inline summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:800;font-size:19px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-inline summary::-webkit-details-marker{display:none}
.faq-inline summary::after{content:"+";flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:2.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;line-height:1}
.faq-inline details[open] summary::after{content:"–";background:var(--sun)}
.faq-inline details p{padding:0 0 20px;color:var(--ink2);font-size:18px;max-width:720px}
@media (min-width:860px){
  .article-hero{padding:56px 0 48px}
  .article-hero .grid{grid-template-columns:1.2fr .8fr;gap:48px}
  .article-hero .phone{max-width:280px;margin-left:auto}
  .article-hero.nophone .grid{grid-template-columns:1fr}
}

/* card grids (hubs, blog index, related) */
.cards{padding:24px 0 56px}
.cards h2{font-size:clamp(28px,6vw,40px);margin-bottom:8px}
.cards .sub{color:var(--ink2);font-size:18px;max-width:640px;margin-bottom:28px}
.card-grid{display:grid;gap:18px}
.card{display:block;text-decoration:none;border:2.5px solid var(--ink);border-radius:24px;padding:22px 22px 20px;background:#fff;transition:transform .12s ease,background .12s ease}
.card:hover{transform:translateY(-2px);background:var(--sun-light)}
.card h3{font-size:22px;margin-bottom:8px}
.card p{color:var(--ink2);font-size:16px}
.card .more{display:inline-block;margin-top:12px;font-weight:800;font-size:15px}
.card.wide{display:grid;gap:18px;align-items:center}
.card.wide .shot{width:120px;border-radius:14px;border:2px solid var(--ink);overflow:hidden;flex:0 0 auto}
.card.wide .shot img{display:block;width:100%}
.hub-hero{padding:40px 0 16px;position:relative}
.hub-hero h1{font-size:clamp(36px,9vw,60px)}
.hub-hero .lead{margin-top:16px}
@media (min-width:720px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .card-grid.three{grid-template-columns:repeat(3,1fr)}
  .card.wide{grid-template-columns:120px 1fr}
}

/* legal / doc pages */
.doc{padding:32px 0 64px}
.doc .prose{max-width:720px}
.doc h1{font-size:clamp(36px,9vw,52px);margin-bottom:12px}
.doc .prose>p:first-of-type{font-size:19px}

/* related strip at the end of articles */
.related{padding:0 0 56px}
.related h2{font-size:24px;margin-bottom:16px}

/* footer grid */
footer{padding:48px 0 40px}
.foot-grid{display:grid;gap:28px}
.foot-grid .h4{font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;color:var(--ink)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{text-decoration:underline}
.foot-grid .maker{display:block;max-width:360px}
.foot-grid .maker .brand{font-size:20px;margin-bottom:10px}
.foot-grid .maker p{margin:8px 0}
.foot-grid .maker .coming{text-align:left;font-size:15px}
.legal{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;display:grid;gap:6px}
@media (min-width:720px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}

/* cookie bar */
.cookie[hidden]{display:none}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;background:#fff;border:2.5px solid var(--ink);border-radius:22px;padding:16px 18px;box-shadow:0 30px 60px -30px rgba(18,32,58,.5);display:grid;gap:12px;max-width:560px;margin:0 auto}
.cookie p{font-size:15px;color:var(--ink2)}
.cookie p a{font-weight:800}
.ck-bt{display:flex;gap:10px}
.ck-bt button{flex:1;min-height:44px;border:2.5px solid var(--ink);border-radius:999px;background:#fff;font:inherit;font-weight:800;font-size:15px;color:var(--ink);cursor:pointer}
.ck-bt button:hover{background:var(--sun-light)}

/* justified body text (his call 2026-11-05); centered and short lines stay as they are */
p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.coming,.hint,.get .box p,.cookie p,.crumbs,.card p,.feat p,.foot-grid p,.legal p,.faq-inline details p,.faq details p{text-align:left;hyphens:manual}
.get .box p,.coming{text-align:center}
@media (min-width:720px){.coming{text-align:left}}