/* SocioRelay: redesign layer (November 2026). Loaded after site.css on public pages by ui_assets() in lib/ui.php.
   New components use the x- prefix (h- for the home page) so nothing in site.css or the account pages changes.
   No inline styles anywhere: everything a page needs is a class here (the site's CSP has style-src 'self'). */

:root{
  --relay-soft:#EEF2FF; --ink-2:#1B3549; --ok:#0F5132; --ok-bg:#E6F4EE; --warn:#8A5A00; --warn-bg:#FFF1D6;
  --r:16px; --shadow:0 1px 2px rgba(18,40,58,.06),0 12px 32px -12px rgba(18,40,58,.18);
  --shadow-lg:0 1px 2px rgba(18,40,58,.06),0 40px 80px -40px rgba(18,40,58,.38);
}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{overflow-x:hidden}

/* ---------- header: sticky, translucent ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(243,246,245,.88);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-head.x-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 18px -14px rgba(18,40,58,.35)}
nav a{transition:background .15s}
nav a:not(.nav-cta):hover{background:rgba(18,40,58,.06);color:var(--ink)}
nav a[aria-current="page"]:not(.nav-cta){text-decoration:none;background:rgba(47,84,235,.08);color:var(--relay-dark)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .18s,transform .18s,box-shadow .18s;box-shadow:0 8px 20px -10px rgba(47,84,235,.7)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(47,84,235,.8)}
.btn-quiet{box-shadow:inset 0 0 0 2px var(--ink)}
.btn-quiet:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.btn .x-i{width:18px;height:18px;transition:transform .18s}
.btn:hover .x-i{transform:translateX(3px)}
.btn-sm{padding:11px 16px;font-size:.95rem}
.x-btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.x-btn-ghost:hover{background:#fff;color:var(--ink);box-shadow:none}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- icons ---------- */
.x-i{width:22px;height:22px;flex:none;display:inline-block;vertical-align:middle}
.x-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--relay-soft);color:var(--relay);margin-bottom:16px;flex:none}
.x-ic-green{background:var(--lane);color:var(--ok)}
.x-ic-ink{background:var(--ink);color:#fff}

/* ---------- type helpers ---------- */
.x-eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 .92rem/1.2 var(--body);color:var(--ink);background:var(--lane);padding:7px 14px;border-radius:999px;margin:0 0 20px;max-width:none}
.x-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--relay);box-shadow:0 0 0 4px rgba(47,84,235,.18);flex:none}
.x-eyebrow a{color:inherit}
.x-em{color:var(--relay)}
.x-sec-dark .x-em,.x-closer .x-em{color:#9DB2FF}
.x-label{font:600 .78rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--relay);margin:0 0 12px}
.x-muted{color:var(--slate)}

/* ---------- page hero ---------- */
.x-hero{position:relative;padding:clamp(40px,7vw,88px) 0 clamp(28px,4vw,48px);overflow:hidden}
.x-hero::after{content:"";position:absolute;right:-120px;top:40px;width:520px;height:220px;pointer-events:none;opacity:.55;
  background:linear-gradient(var(--line),var(--line)) 0 70px/70% 3px no-repeat,linear-gradient(var(--line),var(--line)) 30% 150px/70% 3px no-repeat,radial-gradient(circle,rgba(47,84,235,.35) 0 9px,transparent 10px) 40% 110px/40px 40px no-repeat}
.x-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center;position:relative;z-index:1}
.x-hero-solo{max-width:820px;position:relative;z-index:1}
.x-hero h1{font-size:clamp(2.3rem,5vw,4rem);max-width:15ch}
.x-hero .lede{max-width:56ch}
.x-hero .hero-actions{margin-top:26px}
.x-reassure{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:20px 0 0;font-size:.95rem;color:var(--slate)}
.x-reassure li{display:inline-flex;align-items:center;gap:6px}
.x-reassure .x-i{width:18px;height:18px;color:var(--ok)}
.x-hero-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,2.4vw,26px);box-shadow:var(--shadow-lg);position:relative}
.x-hero-card h2,.x-hero-card h3{font-size:1.15rem;font-weight:600}

/* ---------- sections ---------- */
.x-sec{padding:clamp(56px,8vw,100px) 0}
.x-sec + .x-sec{padding-top:0}
.x-sec.x-sec-tint,.x-sec.x-sec-dark,.x-sec-tint + .x-sec,.x-sec-dark + .x-sec{padding-top:clamp(56px,8vw,100px)}
.x-sec-tint{background:#E8EFEC}
.x-sec-dark{background:var(--ink);color:#fff}
.x-sec-dark h2,.x-sec-dark h3{color:#fff}
.x-sec-dark .lede,.x-sec-dark p{color:#C8D3DB}
.x-sec-dark a{color:#9DB2FF}
.x-intro{margin-bottom:clamp(28px,4vw,48px)}
.x-intro h2{margin-bottom:.35em}
.x-intro-c{text-align:center}
.x-intro-c h2,.x-intro-c .lede,.x-intro-c p{margin-inline:auto}
.x-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,56px);align-items:start}
.x-split-even{grid-template-columns:1fr 1fr;align-items:center}
.x-sticky-col{position:sticky;top:96px}

/* ---------- trust strip ---------- */
.x-trust{list-style:none;margin:0;padding:20px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.x-trust li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--slate);line-height:1.4}
.x-trust strong{display:block;color:var(--ink);font-weight:600;font-size:1rem}
.x-trust .x-i{width:36px;height:36px;padding:8px;border-radius:10px;background:var(--lane);color:var(--ok)}

/* ---------- cards ---------- */
.x-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.x-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.x-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.x-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative}
.x-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#B6C3FA}
.x-card h3{font-size:1.15rem;margin-bottom:.4em}
.x-card p{color:var(--slate);font-size:.98rem;margin:0 0 .6em}
.x-card p:last-child{margin-bottom:0}
.x-card .x-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:.92rem}
.x-card-flat:hover{transform:none;box-shadow:none;border-color:var(--line)}
.x-card-dark{background:var(--ink-2);border-color:rgba(255,255,255,.1);color:#fff}
.x-card-dark h3{color:#fff}.x-card-dark p{color:#C8D3DB}
.x-card-dark:hover{border-color:#5B74D8}
.x-card-hl{border:2px solid var(--relay);box-shadow:0 12px 30px -18px rgba(47,84,235,.6)}
.x-card-tag{position:absolute;top:-12px;left:20px;background:var(--relay);color:#fff;font:600 .74rem/1 var(--body);padding:6px 10px;border-radius:999px}
.x-card .btn{margin-top:16px;align-self:flex-start}
@media (prefers-reduced-motion:reduce){.x-card:hover{transform:none}}

/* ---------- tick list ---------- */
.x-ticks{list-style:none;padding:0;margin:0 0 1em;display:grid;gap:8px}
.x-ticks li{padding-left:28px;position:relative}
.x-ticks li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--lane) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5132' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.x-sec-dark .x-ticks li::before{background-color:var(--relay);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* ---------- flow chart (ui_flow) ---------- */
.x-flow{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:none}
.x-flow-3{grid-template-columns:repeat(3,1fr)}.x-flow-4{grid-template-columns:repeat(4,1fr)}.x-flow-5{grid-template-columns:repeat(5,1fr)}.x-flow-6{grid-template-columns:repeat(6,1fr)}.x-flow-7{grid-template-columns:repeat(7,1fr)}
.x-flow-step{position:relative;text-align:center;padding:0 6px}
.x-flow-step:not(:last-child)::after{content:"";position:absolute;top:29px;left:calc(50% + 38px);right:calc(-50% + 38px);height:2px;background:repeating-linear-gradient(90deg,var(--relay) 0 6px,transparent 6px 12px);background-size:24px 2px}
.x-flow-step:not(:last-child)::before{content:"";position:absolute;top:24px;right:calc(-50% + 30px);border:6px solid transparent;border-left:8px solid var(--relay);border-right:0}
.x-flow-n{position:relative;display:grid;place-items:center;width:60px;height:60px;margin:0 auto 14px;border-radius:18px;background:#fff;border:2px solid var(--relay);color:var(--relay);box-shadow:0 10px 24px -14px rgba(47,84,235,.7)}
.x-flow-n .x-i{width:26px;height:26px}
.x-flow-n b{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:800 .78rem/1 var(--display)}
.x-flow-step h3{font-size:1.05rem;margin-bottom:.35em}
.x-flow-step p{font-size:.92rem;color:var(--slate);margin:0 auto;max-width:28ch}
.x-flow-dark .x-flow-n{background:var(--ink-2);border-color:#9DB2FF;color:#9DB2FF}
.x-flow-dark .x-flow-n b{background:var(--relay)}
.x-flow-dark .x-flow-step h3{color:#fff}.x-flow-dark .x-flow-step p{color:#C8D3DB}
.x-flow-dark .x-flow-step:not(:last-child)::after{background:repeating-linear-gradient(90deg,#9DB2FF 0 6px,transparent 6px 12px)}
.x-flow-dark .x-flow-step:not(:last-child)::before{border-left-color:#9DB2FF}
.x-flow.x-live .x-flow-step:not(:last-child)::after{animation:x-dash 1.2s linear infinite}
@keyframes x-dash{to{background-position:24px 0}}
.x-flow.x-live .x-flow-n{animation:x-pop .5s cubic-bezier(.2,.8,.2,1) both}
.x-flow.x-live .x-flow-step:nth-child(2) .x-flow-n{animation-delay:.12s}.x-flow.x-live .x-flow-step:nth-child(3) .x-flow-n{animation-delay:.24s}.x-flow.x-live .x-flow-step:nth-child(4) .x-flow-n{animation-delay:.36s}.x-flow.x-live .x-flow-step:nth-child(5) .x-flow-n{animation-delay:.48s}.x-flow.x-live .x-flow-step:nth-child(6) .x-flow-n{animation-delay:.6s}.x-flow.x-live .x-flow-step:nth-child(7) .x-flow-n{animation-delay:.72s}
@keyframes x-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.x-flow-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3.4vw,40px) clamp(16px,2.4vw,28px)}
.x-sec-dark .x-flow-box{background:var(--ink-2);border-color:rgba(255,255,255,.08)}
.x-flow-note{text-align:center;margin:24px auto 0;font-size:.95rem;color:var(--slate)}

/* ---------- tabs ---------- */
.x-tabbar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 28px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%}
.x-tab{font:600 .97rem/1 var(--body);border:0;background:none;color:var(--slate);padding:12px 16px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s}
.x-tab:hover{color:var(--ink);background:rgba(18,40,58,.05)}
.x-tab[aria-selected="true"]{background:var(--ink);color:#fff}
.x-tab .x-count{font-size:.75rem;padding:2px 7px;border-radius:999px;background:rgba(18,40,58,.08)}
.x-tab[aria-selected="true"] .x-count{background:rgba(255,255,255,.18)}
.x-tabpanel[hidden]{display:none}
.x-tabpanel.x-in-tab{animation:x-swap .35s ease}
@keyframes x-swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Without JavaScript every group shows, one after another, with its heading. */
.x-tabpanel-h{margin-top:8px}
.js .x-tabpanel-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.x-tabbar[hidden]{display:none}

/* ---------- filter chips and search ---------- */
.x-tools{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;margin:0 0 22px}
.x-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.x-chip{font:600 .92rem/1 var(--body);border:1.5px solid var(--line);background:#fff;color:var(--ink);padding:10px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s,background .15s}
.x-chip:hover{border-color:var(--relay)}
.x-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.x-chip .x-dot{width:8px;height:8px;border-radius:50%;background:var(--slate)}
.x-chip .x-dot-live{background:#1E9E62}.x-chip .x-dot-early{background:var(--relay)}.x-chip .x-dot-soon{background:#C5D2E6}
.x-chip .x-count{font-size:.75rem;padding:2px 7px;border-radius:999px;background:rgba(18,40,58,.08)}
.x-chip[aria-pressed="true"] .x-count{background:rgba(255,255,255,.18)}
.x-search{position:relative;flex:1 1 280px;max-width:440px}
.x-search .x-i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--slate);width:20px;height:20px;pointer-events:none}
.x-search input{width:100%;font:inherit;color:var(--ink);background:#fff;border:1.5px solid #C5D2E6;border-radius:12px;padding:13px 14px 13px 44px}
.x-search input:focus{border-color:var(--relay);outline:3px solid rgba(47,84,235,.2);outline-offset:0}
.x-search-big{max-width:640px;margin:22px 0 0}
.x-search-big input{padding:17px 16px 17px 48px;font-size:1.08rem;border-radius:14px;box-shadow:var(--shadow)}
.x-result{font-size:.92rem;color:var(--slate);margin:0}
.x-empty{background:#fff;border:1px dashed #C5D2E6;border-radius:var(--r);padding:22px;text-align:center;color:var(--slate)}
.x-empty[hidden]{display:none}
.x-hide{display:none!important}

/* ---------- jump links (sticky) ---------- */
.x-jump{position:sticky;top:68px;z-index:20;background:rgba(243,246,245,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin-bottom:8px}
.x-jump ul{display:flex;gap:4px;list-style:none;margin:0 auto;padding:10px 0;overflow-x:auto;scrollbar-width:none}
.x-jump ul::-webkit-scrollbar{display:none}
.x-jump a{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;color:var(--slate);font-weight:600;font-size:.95rem;padding:8px 14px;border-radius:999px;transition:background .15s,color .15s}
.x-jump a:hover{color:var(--ink);background:rgba(18,40,58,.05)}
.x-jump a.x-on{background:var(--ink);color:#fff}
.x-jump .x-i{width:18px;height:18px}

/* ---------- status badges ---------- */
.x-badge{display:inline-flex;align-items:center;gap:6px;font:600 .76rem/1 var(--body);padding:5px 10px;border-radius:999px;white-space:nowrap}
.x-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.x-badge-live{background:var(--ok-bg);color:var(--ok)}
.x-badge-early{background:var(--relay-soft);color:var(--relay-dark)}
.x-badge-soon{background:#EEF2F6;color:var(--slate)}

/* ---------- platform cards ---------- */
.x-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.x-pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s,border-color .25s}
.x-pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#B6C3FA}
.x-pcard-top{display:flex;align-items:center;gap:12px}
.x-pcard-top h3{margin:0;font-size:1.12rem;flex:1}
.x-plogo{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;font:800 1rem/1 var(--display);color:#fff;background:var(--ink);flex:none;letter-spacing:-.02em}
.x-plogo-linkedin,.x-plogo-linkedin_pages{background:#0A66C2}.x-plogo-facebook{background:#0F5FCB}.x-plogo-instagram{background:#C13584}.x-plogo-x{background:#111}
.x-plogo-threads{background:#000}.x-plogo-bluesky{background:#1185FE}.x-plogo-tiktok{background:#010101}.x-plogo-youtube{background:#D80000}.x-plogo-pinterest{background:#BD081C}.x-plogo-google{background:#1A73E8}.x-plogo-blog{background:var(--relay)}
.x-pcard dl{margin:0;display:grid;gap:8px;font-size:.94rem}
.x-pcard dt{font:600 .74rem/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--slate)}
.x-pcard dd{margin:2px 0 0;color:var(--ink)}
.x-pcard .x-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:.92rem;gap:8px}
.x-pcard-wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:22px;background:var(--ink);color:#fff;border-color:var(--ink)}
.x-pcard-wide h3{color:#fff}.x-pcard-wide dd{color:#E6ECF0}.x-pcard-wide dt{color:#C5D2E6}.x-pcard-wide a{color:#9DB2FF}
.x-pcard-wide .x-foot{border:0;padding:0;margin:0;flex-direction:column;align-items:flex-end}
.x-pcard-wide dl{grid-template-columns:1fr 1.4fr;gap:8px 24px;flex:1}

/* ---------- link grid (blogs, guides) ---------- */
.x-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.x-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;transition:border-color .15s,transform .15s,background .15s;height:100%}
.x-links a::after{content:"";flex:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F54EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .15s}
.x-links a:hover{border-color:var(--relay);background:var(--relay-soft)}
.x-links a:hover::after{transform:translateX(3px)}
.x-links .x-num{font:800 .78rem/1 var(--display);color:var(--relay);background:var(--relay-soft);border-radius:6px;padding:4px 6px;margin-right:2px}
.x-links a span.x-t{flex:1}

/* ---------- stats ---------- */
.x-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;padding:0;margin:0}
.x-stats li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.x-stats b{display:block;font:800 clamp(1.7rem,3vw,2.3rem)/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.x-stats span{font-size:.92rem;color:var(--slate)}
.x-sec-dark .x-stats li{background:var(--ink-2);border-color:rgba(255,255,255,.08)}
.x-sec-dark .x-stats b{color:#fff}.x-sec-dark .x-stats span{color:#C5D2E6}

/* ---------- FAQ upgrade (site.css .faq) ---------- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:0;transition:border-color .2s}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq details[open]{border-color:#B6C3FA}
.faq summary{list-style:none;padding:17px 54px 17px 20px;position:relative;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:18px;height:18px;margin-top:-9px;background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > :not(summary){margin:0;padding:0 20px 18px;color:var(--slate)}
.faq details > p + p{padding-top:0}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:start}
.x-faq-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,5vw,56px);align-items:start}

/* ---------- closer ---------- */
.x-closer{background:var(--ink);color:#fff;padding:clamp(64px,9vw,110px) 0;position:relative;overflow:hidden;margin-top:clamp(40px,6vw,72px)}
.x-closer::before{content:"";position:absolute;inset:auto -10% -45% -10%;height:85%;background:radial-gradient(closest-side,rgba(47,84,235,.38),transparent);pointer-events:none}
.x-closer-in{text-align:center;position:relative}
.x-closer h2{color:#fff;margin-inline:auto;font-size:clamp(1.9rem,4.2vw,3.2rem);max-width:21ch}
.x-closer p{color:#C8D3DB;margin-inline:auto}
.x-closer .hero-actions{justify-content:center}
.x-closer .x-mark{width:72px;height:44px;color:#fff;margin:0 auto 18px;display:block}
.x-closer + .site-foot,main:has(> .x-closer:last-child) + .site-foot{margin-top:0}

/* ---------- sticky call to action ---------- */
.x-sticky{position:fixed;left:50%;bottom:16px;transform:translate(-50%,160%);display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:8px 8px 8px 18px;border-radius:14px;box-shadow:0 20px 40px -12px rgba(0,0,0,.45);z-index:60;transition:transform .35s cubic-bezier(.2,.8,.2,1);font-size:.92rem;white-space:nowrap}
.x-sticky.x-show{transform:translate(-50%,0)}
.x-sticky .btn{box-shadow:none}

/* ---------- reveal on scroll (only for things below the fold when the page loads) ---------- */
.x-anim .x-pre{opacity:0;transform:translateY(18px)}
@media print{.x-pre{opacity:1!important;transform:none!important}}
.x-rev{transition:opacity .6s ease,transform .6s ease}

/* ---------- code blocks ---------- */
.x-code{position:relative;margin:0 0 1.2em}
.x-code pre{margin:0}
.x-copy{position:absolute;top:8px;right:8px;font:600 .8rem/1 var(--body);background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:7px 10px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.x-copy:hover{background:rgba(255,255,255,.22)}
.x-copy .x-i{width:14px;height:14px}
.x-code pre.pre-wrap{background:var(--ink);color:#E6ECF0;border-radius:12px;padding:18px 20px;padding-right:90px;overflow-x:auto;font-size:.9rem;line-height:1.55}
.x-code pre.pre-wrap code{background:none;color:inherit;padding:0;font-size:inherit}
.x-method{display:inline-block;font:700 .72rem/1 ui-monospace,Menlo,Consolas,monospace;padding:4px 7px;border-radius:6px;margin-right:6px;letter-spacing:.04em;vertical-align:1px}
.x-get{background:var(--ok-bg);color:var(--ok)}.x-post{background:var(--relay-soft);color:var(--relay-dark)}.x-del{background:#FDECEA;color:var(--error)}
.x-endpoints{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:8px}
.x-endpoints li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.95rem}
.x-endpoints code{font-weight:600}

/* ---------- API diagram ---------- */
.x-api{display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr;align-items:center;gap:0;margin:8px 0 10px}
.x-api-node{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center;font-size:.92rem;color:var(--slate);min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.x-api-node b{display:block;color:var(--ink);font-size:1rem;margin:8px 0 2px}
.x-api-node.x-api-us{background:var(--ink);border-color:var(--ink);color:#C8D3DB}.x-api-node.x-api-us b{color:#fff}
.x-api-node .x-i{color:var(--relay)}.x-api-us .x-i{color:#9DB2FF}
.x-api-arrows{display:flex;flex-direction:column;gap:14px;align-items:stretch;padding:0 4px}
.x-api-arrows span{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--relay) 0 6px,transparent 6px 11px);background-size:22px 2px}
.x-api-arrows span::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left:8px solid var(--relay);border-right:0}
.x-api-arrows span.x-back{background-image:repeating-linear-gradient(90deg,#1E9E62 0 6px,transparent 6px 11px)}
.x-api-arrows span.x-back::after{right:auto;left:-2px;border-left:0;border-right:8px solid #1E9E62}
.x-api.x-live .x-api-arrows span{animation:x-dash 1.1s linear infinite}
.x-api.x-live .x-api-arrows span.x-back{animation-direction:reverse}
.x-api-key{display:flex;gap:18px;flex-wrap:wrap;font-size:.88rem;color:var(--slate);margin:0 0 1.4em}
.x-api-key span{display:inline-flex;align-items:center;gap:8px}
.x-api-key i{display:inline-block;width:22px;height:2px;background:var(--relay)}
.x-api-key i.x-back{background:#1E9E62}

/* ---------- auth pages ---------- */
.x-auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(32px,6vw,72px) 0}
.x-auth-main{max-width:520px}
.x-auth-main .h1-page{margin-bottom:.3em}
.x-auth-main .form{box-shadow:var(--shadow)}
.x-auth-side{background:var(--ink);color:#fff;border-radius:22px;padding:clamp(24px,4vw,44px);position:relative;overflow:hidden}
.x-auth-side::before{content:"";position:absolute;inset:auto -30% -50% -30%;height:80%;background:radial-gradient(closest-side,rgba(47,84,235,.4),transparent);pointer-events:none}
.x-auth-side > *{position:relative}
.x-auth-side h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem)}
.x-auth-side p{color:#C8D3DB}
.x-auth-side .x-ticks li{color:#E6ECF0}
.x-auth-side .x-ticks li::before{background-color:var(--relay);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.x-auth-side .x-mark{width:64px;height:38px;color:#fff;margin-bottom:18px;display:block}
.x-auth-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.x-auth-steps li{counter-increment:s;position:relative;padding:0 0 18px 46px;color:#E6ECF0}
.x-auth-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--relay);color:#fff;display:grid;place-items:center;font:800 .9rem/1 var(--display)}
.x-auth-steps li:not(:last-child)::after{content:"";position:absolute;left:14px;top:30px;bottom:2px;width:2px;background:rgba(157,178,255,.35)}
.x-auth-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.95rem;margin-top:16px}
.x-centre{text-align:center;margin-inline:auto}
.x-centre .lede,.x-centre p{margin-inline:auto}
.x-state{max-width:560px;margin:0 auto;padding:clamp(40px,7vw,88px) 0;text-align:center}
.x-state .x-state-ic{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;margin:0 auto 22px;background:var(--relay-soft);color:var(--relay)}
.x-state .x-state-ic .x-i{width:34px;height:34px}
.x-state-ok .x-state-ic{background:var(--lane);color:var(--ok)}
.x-state-bad .x-state-ic{background:#FDECEA;color:var(--error)}
.x-state .h1-page{margin-inline:auto;max-width:20ch}
.x-state .lede{margin-inline:auto}
.x-state .hero-actions{justify-content:center}
.x-state .form{text-align:left}
/* password field with a Show button */
.x-pw{position:relative}
.x-pw input{padding-right:78px!important}
.x-pw-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:600 .85rem/1 var(--body);background:var(--paper);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 10px;cursor:pointer}
.x-pw-btn:hover{border-color:var(--relay)}
.x-meter{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:8px}
.x-meter span{display:block;height:100%;width:0;background:var(--error);transition:width .3s,background .3s}
.x-meter.x-m2 span{width:50%;background:var(--warn)}.x-meter.x-m3 span{width:75%;background:#1E9E62}.x-meter.x-m4 span{width:100%;background:var(--ok)}.x-meter.x-m1 span{width:25%}
.x-meter-t{font-size:.85rem;color:var(--slate);margin:4px 0 0}
.x-code-input{font:800 1.6rem/1 var(--display)!important;letter-spacing:.3em;text-align:center}

/* ---------- forms: small polish (works for every form) ---------- */
.form .btn-send{width:100%}
.x-auth .form .btn-send,.x-state .form .btn-send{margin-top:4px}
.x-form-foot{font-size:.9rem;color:var(--slate);display:flex;align-items:center;gap:8px;margin:14px 0 0}
.x-form-foot .x-i{width:16px;height:16px;color:var(--ok)}
.x-counter{font-size:.82rem;color:var(--slate);text-align:right;margin-top:4px}

/* ---------- contact topics ---------- */
.x-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.x-topics button{font:600 .9rem/1 var(--body);border:1.5px solid var(--line);background:#fff;color:var(--ink);padding:9px 13px;border-radius:999px;cursor:pointer}
.x-topics button:hover,.x-topics button[aria-pressed="true"]{border-color:var(--relay);background:var(--relay-soft)}
.x-contact-cards{display:grid;gap:12px}
.x-contact-cards .x-card{padding:20px}
.x-contact-cards .x-card .x-ic{margin-bottom:10px}

/* ---------- pricing: plan finder and cards ---------- */
.x-finder{display:grid;grid-template-columns:1.15fr 1fr .85fr;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;margin:0 0 26px;box-shadow:var(--shadow)}
.x-finder-q label{font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.x-finder-q label b{font:800 1.4rem/1 var(--display);color:var(--relay)}
.x-finder-q .small{margin:6px 0 0;font-size:.85rem}
.x-finder input[type=range]{width:100%;accent-color:var(--relay);margin-top:12px}
.x-tgls{display:grid;gap:10px}
.x-tgl{display:flex;align-items:center;gap:12px;font-size:.95rem;cursor:pointer;position:relative}
.x-tgl input{position:absolute;opacity:0;width:1px;height:1px}
.x-tgl span{flex:none;width:42px;height:24px;border-radius:999px;background:#C9D6E0;position:relative;transition:background .2s}
.x-tgl span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.x-tgl input:checked + span{background:var(--relay)}
.x-tgl input:checked + span::after{transform:translateX(18px)}
.x-tgl input:focus-visible + span{outline:3px solid var(--relay);outline-offset:2px}
.x-finder-res{background:var(--ink);color:#fff;border-radius:12px;padding:16px 18px}
.x-finder-res small{display:block;color:#C5D2E6;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}
.x-finder-res b{display:block;font:800 1.8rem/1.1 var(--display);margin:4px 0}
.x-finder-res span{font-size:.92rem;color:#C8D3DB;display:block}
.x-finder-res a{color:#9DB2FF;font-size:.9rem;font-weight:600}
.x-plans .plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}
.x-plans .plan{border-radius:var(--r);padding:24px 22px;position:relative;transition:transform .25s,box-shadow .25s,border-color .25s}
.x-plans .plan:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.x-plans .plan h3{font-size:1.3rem;margin-bottom:4px}
.x-plans .plan .price{font-size:2.3rem;margin:6px 0 8px}
.x-plans .plan ul{list-style:none;padding:0;display:grid;gap:7px;font-size:.94rem;align-content:start}
.x-plans .plan li{padding-left:24px;position:relative;margin:0}
.x-plans .plan li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--lane) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5132' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.x-plans .plan-tag{position:absolute;top:-13px;left:20px;margin:0;background:var(--relay);color:#fff;font-size:.76rem;padding:6px 11px}
.x-plans .plan-dfy .plan-tag{background:#fff;color:var(--ink)}
.x-plans .plan.x-match{box-shadow:0 0 0 4px rgba(47,84,235,.25),var(--shadow);transform:translateY(-6px)}
.x-plans .plan .x-suggest{position:absolute;top:-13px;right:18px;background:var(--ink);color:#fff;font:600 .76rem/1 var(--body);padding:6px 11px;border-radius:999px}
.x-plans .plan .x-suggest[hidden]{display:none}
.bill-toggle{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;display:inline-flex;gap:4px}
.bill-toggle button{border-radius:999px}
.x-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0 0 22px}
.x-offer{display:flex;gap:12px;align-items:flex-start;background:var(--relay-soft);border:1px dashed #B6C3FA;border-radius:var(--r);padding:14px 18px;font-size:.95rem}
.x-offer p{margin:0}
.x-offer .x-i{color:var(--relay);margin-top:2px}
.x-offer-green{background:#EAF6F1;border-color:#A9D8C3}.x-offer-green .x-i{color:var(--ok)}
.x-note-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:8px 0 0}
.x-note-cards p{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0;max-width:none}
.x-cost{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.x-addon{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.x-addon h3{font-size:1.06rem;margin:0 0 4px}
.x-addon .x-amt{font:800 1.5rem/1 var(--display);margin:6px 0 8px}
.x-addon .x-amt small{font:400 .88rem/1 var(--body);color:var(--slate)}
.x-addon p{font-size:.93rem;color:var(--slate);margin:0 0 10px}
.x-addon .x-for{margin-top:auto;font-size:.84rem;color:var(--slate);border-top:1px solid var(--line);padding-top:10px}

/* ---------- compare page ---------- */
.cmp-hero{border-radius:22px}
.cmp-bar{transform-origin:left center}
.js .cmp-bars.x-wait .cmp-bar{transform:scaleX(0)}
.cmp-bars .cmp-bar{transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.cmp-bars li:nth-child(2) .cmp-bar{transition-delay:.08s}.cmp-bars li:nth-child(3) .cmp-bar{transition-delay:.16s}.cmp-bars li:nth-child(4) .cmp-bar{transition-delay:.24s}.cmp-bars li:nth-child(5) .cmp-bar{transition-delay:.32s}
.x-vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.x-vs > div{border-radius:var(--r);padding:24px;border:1px solid var(--line);background:#fff}
.x-vs .x-vs-us{background:var(--ink);border-color:var(--ink);color:#fff}
.x-vs .x-vs-us h3{color:#fff}
.x-vs ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.x-vs li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem}
.x-vs li .x-i{width:20px;height:20px;margin-top:2px}
.x-vs .x-vs-them li{color:var(--slate)}
.x-vs .x-vs-them .x-i{color:#C5D2E6}
.x-vs .x-vs-us .x-i{color:#9DB2FF}

/* ---------- done for you ---------- */
.x-month{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.x-month li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--paper)}
.x-month li .x-ic{width:40px;height:40px;margin:0;border-radius:10px}
.x-month li .x-ic .x-i{width:20px;height:20px}
.x-month li b{display:block}
.x-month li span{font-size:.9rem;color:var(--slate)}
.x-month-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 14px;font-weight:600;font-size:.92rem;color:var(--slate)}
.x-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0 0 14px}
.x-calendar span{aspect-ratio:1;border-radius:6px;background:var(--paper);display:grid;place-items:center;font-size:.72rem;color:var(--slate)}
.x-calendar span.x-on{background:var(--relay);color:#fff;font-weight:600}
.x-calendar span.x-ok{background:var(--lane);color:var(--ok);font-weight:600}
.x-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 20px}
.x-pick button{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;font:400 .9rem/1.35 var(--body);color:var(--slate);background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;transition:border-color .2s,background .2s}
.x-pick button b{font:600 1.05rem/1.2 var(--body);color:var(--ink)}
.x-pick button:hover{border-color:var(--relay)}
.x-pick button[aria-pressed="true"]{border-color:var(--relay);background:var(--relay-soft);box-shadow:0 0 0 4px rgba(47,84,235,.12)}

/* ---------- industries ---------- */
.x-ind{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,box-shadow .2s}
.x-ind:hover{border-color:#B6C3FA;box-shadow:var(--shadow)}
.x-ind h3{font-size:1.04rem;margin:0;display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.x-ind .x-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.x-ind .x-tags li{font-size:.8rem;background:var(--paper);border-radius:999px;padding:4px 9px;color:var(--ink)}
.x-ind .small{margin:auto 0 0;font-size:.84rem}
.x-reg{font:600 .7rem/1 var(--body);background:var(--ok-bg);color:var(--ok);padding:4px 7px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.x-reg .x-i{width:12px;height:12px}
.x-igrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

/* ---------- help centre ---------- */
.x-help-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 clamp(36px,5vw,56px)}
.x-help-cards a{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.x-help-cards a:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#B6C3FA;color:var(--ink)}
.x-help-cards a .x-ic{margin-bottom:6px}
.x-help-cards a b{font:600 1.08rem/1.2 var(--body)}
.x-help-cards a span{font-size:.92rem;color:var(--slate)}
.x-group{margin:0 0 clamp(32px,4vw,48px)}
.x-group-h{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.x-group-h h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:0}
.x-group-h span{font-size:.92rem;color:var(--slate)}
.x-guide-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 0}
.x-guide-nav a{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:600;transition:border-color .15s}
.x-guide-nav a:hover{border-color:var(--relay)}
.x-guide-nav a small{font-weight:400;color:var(--slate);font-size:.82rem}
.x-guide-nav .x-next{text-align:right;grid-column:2}
.x-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;list-style:none;padding:0;margin:0 0 14px;font-size:.92rem;color:var(--slate)}
.x-crumbs li + li::before{content:"/";margin-right:6px;color:#C5D2E6}
.x-helpful{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:28px 0 0;font-size:.95rem}
.x-helpful p{margin:0;flex:1 1 220px}

/* ---------- review page ---------- */
.x-review-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 18px}
.x-progress{display:flex;gap:6px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.x-progress li{font:600 .82rem/1 var(--body);padding:7px 11px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.x-progress .x-p-busy{color:var(--relay-dark)}.x-progress .x-p-ok{color:var(--ok)}.x-progress .x-p-bad{color:var(--warn)}
.review .panel.review-post{border-radius:var(--r);padding:22px;box-shadow:var(--shadow);scroll-margin-top:90px}
.review .review-post:target{border-color:var(--relay);box-shadow:0 0 0 4px rgba(47,84,235,.18),var(--shadow)}
.review .review-text{font-size:1.02rem;line-height:1.6;padding:16px 18px;border:1px solid var(--line);margin:12px 0 16px}
.review .thumb{border-radius:12px;margin:10px 0 0;max-height:420px;width:auto}
.review-form .x-review-btns{display:flex;flex-wrap:wrap;gap:10px}
.review-form .x-review-btns .btn{flex:1 1 160px}

/* ======================================================================================
   HOME PAGE (h-)
   ====================================================================================== */
.h-hero{padding:clamp(36px,6vw,84px) 0 clamp(36px,5vw,60px)}
.h-hero h1{font-size:clamp(2.5rem,5.4vw,4.4rem);max-width:13ch}
.h-media{position:relative}
.h-browser{margin:0;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.h-browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#EEF2F6;border-bottom:1px solid var(--line)}
.h-browser-bar span{width:10px;height:10px;border-radius:50%;background:#C9D6E0}
.h-browser-bar em{font-style:normal;font-size:.78rem;color:var(--slate);margin-left:10px;background:#fff;padding:3px 10px;border-radius:6px}
.h-browser img{display:block;width:100%;height:auto}
.h-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.88rem;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center;white-space:nowrap;animation:h-bob 6s ease-in-out infinite}
.h-float b{font-weight:600}
.h-float i{font-style:normal;background:var(--relay-soft);color:var(--relay-dark);padding:2px 8px;border-radius:6px;font-weight:600;font-size:.8rem}
.h-float .x-i{width:20px;height:20px;padding:3px;border-radius:50%;background:var(--lane);color:var(--ok)}
.h-f1{left:-28px;top:22%}.h-f2{right:-18px;top:54%;animation-delay:-2s}.h-f3{left:12%;bottom:-20px;animation-delay:-4s}
@keyframes h-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* relay: one post, many versions */
.h-relay{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,.8fr);position:relative;align-items:center}
.h-source{grid-column:1;grid-row:1;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);position:relative;z-index:2}
.h-source-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;color:var(--slate);margin-bottom:12px}
.h-source-head::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--relay)}
.h-source-text{font-size:1rem;margin:0 0 14px;white-space:pre-line}
.h-source-foot{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--slate);border-top:1px solid var(--line);padding-top:12px}
.h-pill-ok{background:var(--lane);color:var(--ok);font-weight:600;padding:2px 10px;border-radius:999px}
.h-lines{grid-column:1/4;grid-row:1;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.h-lines path{fill:none;stroke:#C9D6E0;stroke-width:2;transition:stroke .3s}
.h-lines path.on{stroke:var(--relay);stroke-width:2.5;stroke-dasharray:6 8;animation:h-flow 1s linear infinite}
@keyframes h-flow{to{stroke-dashoffset:-28}}
.h-targets{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:6px;position:relative;z-index:2}
.h-rt{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:600 .95rem/1.2 var(--body);color:var(--ink);cursor:pointer;text-align:left;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.h-rt:hover{border-color:var(--relay);transform:translateX(3px)}
.h-rt[aria-selected="true"]{background:var(--relay);border-color:var(--relay);color:#fff;box-shadow:0 8px 18px -10px rgba(47,84,235,.8)}
.h-rt small{font-weight:600;font-size:.72rem;padding:2px 7px;border-radius:999px;background:var(--lane);color:var(--ok);white-space:nowrap}
.h-rt small.early{background:var(--relay-soft);color:var(--relay-dark)}
.h-rt small.soon{background:#EEF2F6;color:var(--slate)}
.h-rt[aria-selected="true"] small{background:rgba(255,255,255,.2);color:#fff}
.h-out{grid-column:1/4;grid-row:2;margin-top:24px;background:var(--ink);color:#fff;border-radius:var(--r);padding:24px 26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px 32px;align-items:start}
.h-out-head{display:flex;align-items:center;gap:12px;grid-column:1;flex-wrap:wrap}
.h-out-name{font:800 1.6rem/1 var(--display)}
.h-status{font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--lane);color:var(--ok)}
.h-status.early{background:var(--relay-soft);color:var(--relay-dark)}
.h-status.soon{background:#EEF2F6;color:var(--slate)}
.h-meta{grid-column:1;display:grid;grid-template-columns:repeat(3,auto);gap:16px;justify-content:start;margin-top:12px}
.h-meta small{display:block;color:#C5D2E6;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.h-meta b{font-weight:600;font-size:.95rem}
.h-meter{grid-column:1;height:6px;background:rgba(255,255,255,.12);border-radius:6px;overflow:hidden;margin-top:10px}
.h-meter span{display:block;height:100%;width:10%;background:#9DB2FF;border-radius:6px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.h-out-text{grid-column:2;grid-row:1/5;margin:0;background:var(--ink-2);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:16px 18px;white-space:pre-line;font-size:.97rem;color:#E6ECF0;min-height:150px;max-width:none}
.h-out-text.swap{animation:x-swap .35s ease}
.h-status-note{margin-top:22px}

/* lane divider */
.h-divider{position:relative;height:56px;overflow:hidden;background:linear-gradient(var(--paper) 50%,var(--ink) 50%)}
.h-divider span{position:absolute;left:0;right:0;height:3px;border-radius:3px;background:var(--ink)}
.h-divider span:nth-child(1){top:16px;right:45%}
.h-divider span:nth-child(2){top:36px;left:40%;background:#fff;opacity:.45}
.h-divider i{position:absolute;top:19px;left:0;width:16px;height:16px;border-radius:50%;background:var(--relay);animation:h-dot 7s linear infinite}
@keyframes h-dot{0%{left:-2%;top:9px}45%{top:9px}55%{top:29px}100%{left:102%;top:29px}}

/* workflow stepper */
.h-flow{position:relative}
.h-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;position:relative;z-index:2}
.h-steps button{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;color:#C5D2E6;font:600 1rem/1 var(--body);cursor:pointer;padding:0 0 6px}
.h-steps .n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);border:2px solid #3A5266;font-family:var(--display);font-size:1.1rem;transition:all .3s}
.h-steps button:hover .n{border-color:#9DB2FF}
.h-steps button.done .n{background:#22405A;border-color:#9DB2FF;color:#fff}
.h-steps button[aria-selected="true"]{color:#fff}
.h-steps button[aria-selected="true"] .n{background:var(--relay);border-color:var(--relay);color:#fff;box-shadow:0 0 0 6px rgba(47,84,235,.25)}
.h-track{position:absolute;top:23px;left:calc(100%/12);right:calc(100%/12);height:2px;background:#3A5266;z-index:1}
.h-track span{display:block;height:100%;width:0;background:#9DB2FF;transition:width .5s ease}
.h-play{position:absolute;right:0;top:-56px;width:36px;height:36px;border-radius:50%;border:1px solid #3A5266;background:transparent;color:#C5D2E6;cursor:pointer;display:grid;place-items:center}
.h-play:hover{border-color:#9DB2FF;color:#fff}
.h-play svg{width:14px;height:14px}
.h-panels{margin-top:36px}
.h-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;background:var(--ink-2);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:clamp(22px,3vw,36px)}
.h-panel[hidden]{display:none}
.h-panel.is-on{animation:x-swap .45s ease}
.h-panel h3{font-size:1.6rem;font-weight:800}
.h-shot{margin:0;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.h-shot img{display:block;width:100%;height:auto}
.h-ui{background:#fff;color:var(--ink);border-radius:14px;padding:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);min-height:260px}
.h-ui p{color:var(--slate)}
.h-ui-head{display:flex;justify-content:space-between;align-items:center;font:600 1.05rem/1 var(--display);margin-bottom:14px;gap:10px}
.h-ui-small{font:400 .85rem/1.4 var(--body);color:var(--slate)}
.h-chip,.h-chip-blue{font:600 .78rem/1 var(--body);padding:6px 10px;border-radius:999px;background:#EEF2F6;color:var(--slate)}
.h-chip-blue{background:var(--relay-soft);color:var(--relay-dark)}
.h-typing{min-height:130px;border:1px solid var(--line);border-radius:10px;padding:14px;font-size:.95rem;white-space:pre-line;margin-bottom:12px}
.h-typing::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--relay);vertical-align:-3px;margin-left:2px;animation:h-blink 1s steps(1) infinite}
@keyframes h-blink{50%{opacity:0}}
.h-row{display:flex;flex-wrap:wrap;gap:8px}
.h-checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.h-checks li{padding:10px 12px 10px 38px;border-radius:10px;position:relative;font-size:.95rem}
.js .h-checks li{opacity:0;transform:translateX(-8px)}
.h-panel.is-on .h-checks li{animation:h-slide .4s ease forwards}
.h-panel.is-on .h-checks li:nth-child(2){animation-delay:.12s}.h-panel.is-on .h-checks li:nth-child(3){animation-delay:.24s}.h-panel.is-on .h-checks li:nth-child(4){animation-delay:.36s}.h-panel.is-on .h-checks li:nth-child(5){animation-delay:.48s}
@keyframes h-slide{to{opacity:1;transform:none}}
.h-checks li::before{position:absolute;left:12px;top:9px;font-weight:700}
.h-checks .ok{background:var(--ok-bg)}.h-checks .ok::before{content:"✓";color:var(--ok)}
.h-checks .warn{background:var(--warn-bg)}.h-checks .warn::before{content:"!";color:var(--warn)}
.h-checks mark{background:#FFE29A;padding:0 4px;border-radius:4px}
.h-approve{display:flex;gap:10px;margin:18px 0;flex-wrap:wrap}
.h-ap{font:600 .98rem/1 var(--body);padding:13px 18px;border-radius:10px;border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:all .15s}
.h-ap:hover{background:var(--ink);color:#fff}
.h-ap-yes{background:var(--relay);border-color:var(--relay);color:#fff}
.h-ap-yes:hover{background:var(--relay-dark);border-color:var(--relay-dark)}
.h-ap-result{font-size:.95rem;color:var(--slate)!important;background:var(--paper);padding:12px 14px;border-radius:10px;margin:0;max-width:none}
.h-ap-result.yes{background:var(--ok-bg);color:var(--ok)!important}
.h-ap-result.no{background:var(--warn-bg);color:var(--warn)!important}
.h-bars{display:flex;align-items:flex-end;gap:10px;height:140px;padding:0 4px;border-bottom:1px solid var(--line)}
.h-bars i{flex:1;background:linear-gradient(var(--relay),#7F97F5);border-radius:6px 6px 0 0;height:0;transition:height .8s cubic-bezier(.2,.8,.2,1)}
.h-panel.is-on .h-bars .b40{height:40%}.h-panel.is-on .h-bars .b48{height:48%}.h-panel.is-on .h-bars .b56{height:56%}.h-panel.is-on .h-bars .b62{height:62%}.h-panel.is-on .h-bars .b70{height:70%}.h-panel.is-on .h-bars .b80{height:80%}.h-panel.is-on .h-bars .b92{height:92%}
.h-bars-x{display:flex;gap:10px;padding:6px 4px 0}.h-bars-x span{flex:1;text-align:center;font-size:.78rem;color:var(--slate)}
.h-alert{margin-top:16px;background:var(--warn-bg);color:var(--warn);padding:10px 12px;border-radius:10px;font-size:.92rem}
.no-js-only{display:none}

/* setup decision flow */
.h-decide{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,40px);position:relative}
.h-root{margin:0 auto;width:max-content;max-width:100%;background:var(--ink);color:#fff;font:600 1.1rem/1.2 var(--display);padding:14px 22px;border-radius:12px;text-align:center;position:relative;z-index:2}
.h-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px;position:relative;z-index:2}
.h-opt{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;padding:16px;border-radius:12px;border:2px solid var(--line);background:#fff;cursor:pointer;font:400 .88rem/1.35 var(--body);color:var(--slate);transition:all .2s}
.h-opt b{font:600 1.05rem/1.2 var(--body);color:var(--ink)}
.h-opt:hover{border-color:var(--relay)}
.h-opt[aria-selected="true"]{border-color:var(--relay);background:var(--relay-soft);box-shadow:0 0 0 4px rgba(47,84,235,.12)}
.h-dlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}
.h-dlines path{fill:none;stroke:var(--line);stroke-width:2}
.h-dlines path.on{stroke:var(--relay);stroke-width:2.5;stroke-dasharray:6 8;animation:h-flow 1s linear infinite}
.h-path{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:stretch;margin-top:36px}
.h-path[hidden]{display:none}
.h-path.is-on .h-node{animation:h-slide .4s ease both;opacity:0;transform:translateX(-8px)}
.h-path.is-on .h-node:nth-child(3){animation-delay:.12s}.h-path.is-on .h-node:nth-child(5){animation-delay:.24s}
.h-node{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:20px}
.h-node .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--relay);color:#fff;font:800 .9rem/1 var(--display);margin-bottom:12px}
.h-node h3{font-size:1.1rem}
.h-node p{font-size:.94rem;color:var(--slate);margin:0}
.h-arrow{position:relative}
.h-arrow::before{content:"";position:absolute;left:6px;right:10px;top:50%;height:2px;background:var(--relay)}
.h-arrow::after{content:"";position:absolute;right:6px;top:calc(50% - 5px);border:6px solid transparent;border-left:8px solid var(--relay);border-right:0}
.h-dcta{margin-top:28px;text-align:center}

/* who it's for */
.h-who .x-card .x-foot b{color:var(--ink)}
.h-proof{margin-top:20px;background:var(--lane);border-radius:var(--r);padding:20px 24px}
.h-proof p{margin:0;max-width:none}

/* ======================================================================================
   RESPONSIVE
   ====================================================================================== */
@media (max-width:1100px){
  .x-cards-4,.x-help-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-plans .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .x-hero-grid,.x-split,.x-split-even,.x-faq-wrap,.x-auth{grid-template-columns:1fr}
  .x-sticky-col{position:static}
  .x-cards,.x-pgrid,.x-igrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-trust{grid-template-columns:repeat(2,1fr)}
  .x-stats{grid-template-columns:repeat(2,1fr)}
  .x-finder{grid-template-columns:1fr}
  .x-note-cards,.x-cost{grid-template-columns:1fr}
  .x-pcard-wide{flex-direction:column;align-items:stretch}
  .x-pcard-wide dl{grid-template-columns:1fr}
  .x-pcard-wide .x-foot{align-items:flex-start}
  .x-auth-side{order:2}
  .faq-grid{grid-template-columns:1fr}
  /* flow chart goes vertical */
  .x-flow{grid-template-columns:1fr!important;gap:0}
  .x-flow-step{display:grid;grid-template-columns:60px 1fr;gap:0 16px;text-align:left;padding:0 0 22px}
  .x-flow-step .x-flow-n{grid-row:1/3;margin:0}
  .x-flow-step h3{margin-top:6px}
  .x-flow-step p{margin:0;max-width:none}
  .x-flow-step:not(:last-child)::after{top:66px;bottom:4px;left:29px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--relay) 0 6px,transparent 6px 12px);background-size:2px 24px}
  .x-flow-dark .x-flow-step:not(:last-child)::after{background:repeating-linear-gradient(180deg,#9DB2FF 0 6px,transparent 6px 12px)}
  .x-flow-step:not(:last-child)::before{display:none}
  .x-api{grid-template-columns:1fr;gap:0}
  .x-api-arrows{flex-direction:row;justify-content:center;height:46px;align-items:center;gap:22px}
  .x-api-arrows span{width:2px;height:34px;background:repeating-linear-gradient(180deg,var(--relay) 0 6px,transparent 6px 11px)}
  .x-api-arrows span::after{right:-5px;top:auto;bottom:-4px;border:6px solid transparent;border-top:8px solid var(--relay);border-bottom:0}
  .x-api-arrows span.x-back{background-image:repeating-linear-gradient(180deg,#1E9E62 0 6px,transparent 6px 11px)}
  .x-api-arrows span.x-back::after{left:-5px;top:-4px;bottom:auto;border:6px solid transparent;border-bottom:8px solid #1E9E62;border-top:0}
  .x-api-node{min-height:0}
  .x-jump{top:60px}
  /* home */
  .h-relay{display:block}
  .h-lines{display:none}
  .h-targets{flex-direction:row;overflow-x:auto;margin:16px -16px 0;padding:4px 16px 8px;scroll-snap-type:x mandatory}
  .h-rt{flex:none;scroll-snap-align:start}
  .h-rt:hover{transform:none}
  .h-out{grid-template-columns:1fr;margin-top:12px}
  .h-out-text{grid-column:1;grid-row:auto;margin-top:14px}
  .h-panel{grid-template-columns:1fr}
  .h-steps span:not(.n){font-size:.82rem}
  .h-steps .n{width:38px;height:38px}
  .h-track{top:19px}
  .h-path{grid-template-columns:1fr;gap:0}
  .h-arrow{height:28px}
  .h-arrow::before{left:50%;right:auto;top:4px;bottom:10px;width:2px;height:auto}
  .h-arrow::after{left:calc(50% - 6px);right:auto;top:auto;bottom:4px;border:6px solid transparent;border-top:8px solid var(--relay);border-bottom:0}
  .h-f1{left:-6px}.h-f2{right:-6px}
}
@media (max-width:640px){
  .x-cards,.x-cards-2,.x-cards-4,.x-pgrid,.x-igrid,.x-help-cards,.x-vs,.x-pick{grid-template-columns:1fr}
  .x-plans .plans{grid-template-columns:1fr}
  .x-trust{grid-template-columns:1fr;padding:18px}
  .x-tabbar{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .x-tabbar::-webkit-scrollbar{display:none}
  .x-tab{white-space:nowrap}
  .x-tools{flex-direction:column;align-items:stretch}
  .x-search{max-width:none}
  .x-guide-nav{grid-template-columns:1fr}
  .x-guide-nav .x-next{grid-column:1}
  .hero-actions .btn{flex:1 1 auto}
  .x-sticky{left:12px;right:12px;transform:translateY(160%);justify-content:space-between}
  .x-sticky.x-show{transform:none}
  .h-float{font-size:.76rem;padding:7px 10px}
  .h-f3{display:none}
  .h-branches{grid-template-columns:1fr;margin-top:20px;gap:10px}
  .h-dlines{display:none}
  .h-meta{grid-template-columns:1fr 1fr}
  .h-steps{gap:2px}
  .h-steps span:not(.n){font-size:.72rem}
  .h-steps .n{width:34px;height:34px;font-size:.95rem}
  .h-track{top:17px}
  .h-play{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .x-pre{opacity:1;transform:none}
  .x-rev,.x-card,.x-pcard,.h-rt,.plan{transition:none}
  .x-flow.x-live .x-flow-n,.x-flow.x-live .x-flow-step::after,.x-api.x-live .x-api-arrows span,.h-float,.h-lines path.on,.h-dlines path.on,.h-divider i,.h-typing::after{animation:none!important}
  .js .h-checks li{opacity:1;transform:none}
  .h-panel.is-on .h-checks li,.h-path.is-on .h-node{animation:none;opacity:1;transform:none}
  .js .cmp-bars.x-wait .cmp-bar{transform:none}
}
@media print{.site-head,.x-sticky,.x-jump,.x-tabbar,.x-tools{display:none!important}.x-tabpanel[hidden]{display:block!important}}
.x-pick button[aria-selected="true"]{border-color:var(--relay);background:var(--relay-soft);box-shadow:0 0 0 4px rgba(47,84,235,.12)}
.x-pick[hidden]{display:none}
html:not(.js) .no-js-only{display:block}
.h-play svg[hidden]{display:none}
.x-sec-tint + .x-closer,.x-sec-dark + .x-closer{margin-top:0}
.x-stats li{min-width:0}
.x-stats .fx,.cmp-val .fx,.x-amt .fx,.x-plans .price .fx{display:block;font:400 .78rem/1.3 var(--body);color:var(--slate);letter-spacing:0;margin-top:4px}
.x-sec-dark .x-stats .fx{color:#C5D2E6}
.x-card .btn,.x-pcard .btn{max-width:100%;white-space:normal;text-align:center}
@media (max-width:640px){.x-sticky{white-space:normal;font-size:.86rem}.x-sticky .btn{white-space:nowrap;flex:none}}
.wrap.x-hero-solo{max-width:1120px}
.x-hero-solo > *{max-width:820px}
.x-hero-solo > .x-search{max-width:640px}
.x-hero-grid .x-stats{grid-template-columns:1fr 1fr}
.x-stats + .x-sec,.cmp-hero + .x-stats{margin-top:16px}
.x-gap-top{margin-top:20px}
.x-search-lg{max-width:640px;margin-top:22px}
.x-search-lg input{font-size:1.05rem;padding-top:16px;padding-bottom:16px}
.x-sec-tight{padding-bottom:clamp(48px,6vw,80px)}
.x-help-cards{margin-top:clamp(8px,2vw,16px)}
.x-hero .hero-actions + .small{margin-top:12px}
.x-topics-l{flex-basis:100%;font-weight:600;margin-bottom:2px}
/* real site.css fixes */
.x-pcard{min-width:0}
.x-pcard-top{flex-wrap:wrap;row-gap:6px}
@media (max-width:900px){.x-hero::after{display:none}}

/* ===== v3 polish (audit November 2026) ===== */
::selection{background:#C9D4FF;color:var(--ink)}
html{scroll-padding-top:88px}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
input,textarea,select{caret-color:var(--relay)}
.price,.cmp-val,.x-stats b,.x-amt,.plan .price,td{font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
/* Comfortable line lengths */
.legal{max-width:92ch}
.small.wide,.x-gap-top.small,.h-status-note,.h-proof p{max-width:72ch}
.x-intro .lede,.x-hero .lede{max-width:60ch}
.prose p,.prose li{max-width:72ch}
/* Icon sits beside its heading instead of stacked above it */
.x-card:has(>.x-ic+h3){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-content:start}
.x-card:has(>.x-ic+h3)>*{grid-column:1/-1}
.x-card>.x-ic:has(+h3){grid-column:1;width:40px;height:40px;margin:0}
.x-card>.x-ic+h3{grid-column:2;align-self:center;margin:0}
.x-card>.x-ic+h3+*{margin-top:12px}
.x-card:has(>.x-ic+h3)>.x-foot{align-self:end}
/* Stats as one divided strip, not a row of boxes */
.x-stats{gap:0;border-block:1px solid var(--line);padding-block:6px}
.x-stats li{background:none;border:0;border-radius:0;padding:14px 22px}
.x-stats li+li{border-left:1px solid var(--line)}
.x-sec-dark .x-stats{border-color:rgba(255,255,255,.12)}
.x-sec-dark .x-stats li{background:none}.x-sec-dark .x-stats li+li{border-color:rgba(255,255,255,.12)}
@media (max-width:900px){.x-stats li:nth-child(odd){border-left:0;padding-left:0}.x-stats li:nth-child(n+3){border-top:1px solid var(--line)}}
/* Contrast fixes */
.x-card-dark .fx,.plan-dfy .fx,.x-sec-dark .fx{color:#B8C6DA}
.x-card-dark a:not(.btn),.x-sec-dark p a:not(.btn){color:#BFCCFF}
.x-plogo-bluesky{background:#0B6BD3}
/* Inner diagram nodes: tinted panels, not cards inside cards */
.h-node{border:0;background:#EEF2F6}
.x-api-node{border:0;background:#F1F4F8}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ===== Pipeline flow chart (industries) ===== */
.x-pipe{--pipe-p:0;margin-top:8px}
.x-pipe-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative}
.x-pipe-steps::before{content:"";position:absolute;left:10%;right:10%;top:34px;height:2px;background:rgba(255,255,255,.16)}
.x-pipe.is-live .x-pipe-steps::after{content:"";position:absolute;left:10%;top:34px;height:2px;width:calc(80% * var(--pipe-p));background:#9DB2FF;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.x-pipe-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.x-pipe-node{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;width:100%;padding:0 4px 10px;border-radius:14px;color:#fff}
.x-pipe-node:focus-visible{outline:3px solid #9DB2FF;outline-offset:4px}
.x-pipe-ic{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--ink);border:2px solid rgba(255,255,255,.22);color:#C5D2E6;transition:background .25s,border-color .25s,color .25s,transform .25s;margin-bottom:8px}
.x-pipe-gate .x-pipe-ic{border-radius:16px;transform:rotate(45deg)}
.x-pipe-gate .x-pipe-ic .x-i{transform:rotate(-45deg)}
.x-pipe-n{font:700 .8rem/1 var(--body);color:#E8EEF7;letter-spacing:.02em}
.x-pipe-node b{font:700 1rem/1.25 var(--display);color:#fff}
.x-pipe-node small{font-size:.84rem;color:#DDE5F0;line-height:1.35}
.x-pipe-node:hover .x-pipe-ic{border-color:#9DB2FF;color:#fff}
.x-pipe-step.is-past .x-pipe-ic{background:#1E3A6B;border-color:#9DB2FF;color:#fff}
.x-pipe-step.is-on .x-pipe-ic{background:var(--relay);border-color:#BFCCFF;color:#fff;box-shadow:0 0 0 8px rgba(47,84,235,.22)}
.x-pipe-gate.is-on .x-pipe-ic{transform:rotate(45deg) scale(1.04)}
.x-pipe-branch{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px;font-size:.82rem;text-align:center}
.x-pipe-branch::before{content:"";width:2px;height:18px;background:repeating-linear-gradient(180deg,#F4A6A0 0 4px,transparent 4px 8px)}
.x-pipe-q{color:#DDE5F0}
.x-pipe-stop{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(244,166,160,.14);border:1px solid rgba(244,166,160,.5);color:#FFD9D5;font-weight:600}
.x-pipe-panels{margin-top:28px;background:var(--ink-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:clamp(20px,3vw,32px);min-height:150px}
.x-pipe-panel h3{color:#fff;font-size:1.2rem;margin:0 0 .5em}
.x-pipe-panel h3 span{color:#9DB2FF}
.x-pipe-panel p{color:#D5DEE9;margin:0;max-width:72ch}
.x-pipe:not(.is-live) .x-pipe-panel+.x-pipe-panel{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.x-pipe.is-live .x-pipe-panel{animation:x-pipe-in .35s ease both}
@keyframes x-pipe-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.x-pipe-ctrl{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.x-pipe-ctrl .btn:disabled{opacity:.6;cursor:default}
.x-sec-dark .x-btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
@media (max-width:760px){
  .x-pipe-steps{grid-template-columns:1fr;gap:4px}
  .x-pipe-steps::before{left:33px;right:auto;top:34px;bottom:34px;width:2px;height:auto}
  .x-pipe.is-live .x-pipe-steps::after{left:33px;top:34px;width:2px;height:calc((100% - 68px) * var(--pipe-p))}
  .x-pipe-step{align-items:stretch}
  .x-pipe-node{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center;column-gap:14px;padding:6px 0}
  .x-pipe-ic{margin:0;flex:none}
  .x-pipe-node .x-pipe-n{display:none}
  .x-pipe-node b{flex:1 1 calc(100% - 90px)}
  .x-pipe-node small{flex-basis:100%;padding-left:82px;margin-top:-22px}
  .x-pipe-branch{flex-direction:row;padding-left:82px;justify-content:flex-start;flex-wrap:wrap}
  .x-pipe-branch::before{display:none}
}

/* ===== First-week journey (help) ===== */
.x-journey{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px)}
.x-journey-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.x-journey-head h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:0}
.x-journey-meter{display:flex;align-items:center;gap:12px;margin:0;font-size:.9rem;color:var(--slate)}
.x-journey-bar{display:block;width:160px;height:8px;border-radius:99px;background:#E6ECF0;overflow:hidden}
.x-journey-bar span{display:block;height:100%;width:0;background:#1E9E62;border-radius:inherit;transition:width .4s ease}
.x-journey-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:j}
.x-journey-step{position:relative;display:flex;flex-direction:column}
.x-journey-step:not(:last-child)::after{content:"";position:absolute;top:30px;left:calc(50% + 34px);right:calc(-50% + 22px);height:0;border-top:2px dashed #B6C3FA}
.x-journey-step a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;text-decoration:none;color:var(--ink);padding:0 4px 8px;border-radius:12px}
.x-journey-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--relay-soft,#E8EDFF);color:var(--relay);margin-bottom:8px;transition:transform .2s,background .2s,color .2s}
.x-journey-step a:hover .x-journey-ic{transform:translateY(-3px);background:var(--relay);color:#fff}
.x-journey-n{font-size:.78rem;font-weight:700;color:var(--slate)}
.x-journey-step b{font:700 1rem/1.3 var(--display)}
.x-journey-step a:hover b{text-decoration:underline;text-underline-offset:.2em}
.x-journey-step small{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;color:var(--slate)}
.x-journey-step small .x-i{width:14px;height:14px}
.x-journey-done{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.86rem;color:var(--slate);cursor:pointer;margin-top:auto;padding-top:6px}
.x-journey-done input{width:18px;height:18px;accent-color:#1E9E62;margin:0}
.x-journey-step.is-done .x-journey-ic{background:#DDF3E8;color:#157347}
.x-journey-step.is-done .x-journey-done{color:#157347;font-weight:600}
@media (max-width:900px){
  .x-journey-steps{grid-template-columns:1fr;gap:0}
  .x-journey-step{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
  .x-journey-step:not(:last-child)::after{display:none}
  .x-journey-step a{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center;column-gap:12px;padding:0;flex:1}
  .x-journey-ic{width:44px;height:44px;margin:0}
  .x-journey-n{display:none}
  .x-journey-step b{flex:1 1 calc(100% - 60px)}
  .x-journey-step small{flex-basis:100%;padding-left:56px;margin-top:-4px}
  .x-journey-done{margin:0;padding:0}
}

/* ===== What happens next (contact) ===== */
.x-steps-mini{list-style:none;margin:6px 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.x-steps-mini li{position:relative;display:flex;flex-direction:column;gap:2px;font-size:.9rem;padding-top:46px}
.x-steps-mini li>span{position:absolute;top:0;left:0;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--relay-soft,#E8EDFF);color:var(--relay)}
.x-steps-mini li>span .x-i{width:18px;height:18px}
.x-steps-mini li:not(:last-child)::after{content:"";position:absolute;top:18px;left:46px;right:4px;border-top:2px dashed #B6C3FA}
.x-steps-mini b{font-weight:700;color:var(--ink);line-height:1.3}
.x-steps-mini small{color:var(--slate)}
@media (max-width:520px){.x-steps-mini{grid-template-columns:1fr;gap:14px}.x-steps-mini li{padding:6px 0 0 48px;min-height:36px}.x-steps-mini li:not(:last-child)::after{display:none}}

/* ===== Compare chart period switch, lead card ===== */
.x-seg{display:inline-flex;padding:4px;border-radius:999px;background:#E9EEF2;margin-bottom:14px}
.x-seg button{all:unset;cursor:pointer;padding:7px 14px;border-radius:999px;font:600 .86rem/1 var(--body);color:var(--slate)}
.x-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(18,40,58,.15)}
.x-seg button:focus-visible{outline:3px solid var(--relay);outline-offset:2px}
.cmp-bars .cmp-bar{transition:width .8s cubic-bezier(.2,.7,.2,1)}
.x-cards-lead>.x-card:first-child{grid-column:span 2;background:var(--ink);border-color:var(--ink)}
.x-cards-lead>.x-card:first-child h3{color:#fff;font-size:1.35rem}
.x-cards-lead>.x-card:first-child p{color:#D5DEE9;font-size:1.02rem}
.x-cards-lead>.x-card:first-child .x-ic{background:var(--relay);color:#fff}
@media (max-width:900px){.x-cards-lead>.x-card:first-child{grid-column:1/-1}}
.x-reg-list{margin-top:22px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
.x-reg-list summary{cursor:pointer;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;list-style:none}
.x-reg-list summary::-webkit-details-marker{display:none}
.x-reg-list summary::before{content:"+";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.35);font-weight:400}
.x-reg-list[open] summary::before{content:"\2212"}
.x-reg-list summary span{font-size:.8rem;padding:3px 8px;border-radius:999px;background:rgba(157,178,255,.18);color:#C9D4FF}
.x-reg-list ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.x-reg-list li{font-size:.86rem;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:#D5DEE9}
@media (max-width:672px){
  .x-help-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .x-help-cards a{padding:14px}
  .x-help-cards a .x-ic{width:36px;height:36px;margin-bottom:4px}
  .x-help-cards a b{font-size:.98rem}
  .x-help-cards a span:not(.x-ic){font-size:.84rem}
}
.h-rt[aria-selected="true"] small{background:rgba(12,28,48,.42);color:#fff}
.x-plans .plan-dfy .price .fx,.x-cards-lead>.x-card:first-child .fx,.x-card-dark .fx{color:#B8C6DA}
.legal{max-width:80ch}
.x-intro .lede,.x-hero .lede,.x-hero-solo .lede{max-width:54ch}
.prose p,.prose li{max-width:66ch}
.x-sec-dark a.btn:not(.x-btn-ghost),.x-sec-dark a.btn:not(.x-btn-ghost):hover{color:#fff}
@media (min-width:901px){.x-cards-lead>.x-card:last-child:nth-child(7){grid-column:span 2}}

/* industries: the three safeguards, listed above the diagram (November 2026) */
.x-safe{list-style:none;margin:6px 0 14px;padding:0;display:grid;gap:12px;max-width:78ch}
.x-safe li{position:relative;padding-left:30px;color:#C8D3DB;line-height:1.55}
.x-safe li::before{content:"";position:absolute;left:4px;top:.5em;width:12px;height:12px;border-radius:50%;background:#9DB2FF;box-shadow:0 0 0 4px rgba(157,178,255,.18)}
.x-safe strong{color:#fff}
@media (min-width:960px){.x-safe{grid-template-columns:repeat(3,1fr);max-width:none;gap:22px}}

/* phone menu (November 2026): a Menu button opens the main links. Works without JavaScript too (#x-menu :target). */
.x-menu{display:flex;gap:6px;align-items:center}
nav a.x-menu-btn{display:none}
@media (max-width:820px){
  .site-head .head-row{position:relative}
  nav a.x-menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--white);color:var(--ink);font:600 1rem/1 var(--body);cursor:pointer}
  nav a.x-menu-btn:hover{background:var(--white)}
  nav a.x-menu-btn:focus-visible{outline:3px solid var(--relay);outline-offset:2px}
  nav a.x-menu-btn[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .x-menu{display:none;position:absolute;left:12px;right:12px;top:calc(100% + 6px);flex-direction:column;align-items:stretch;gap:0;padding:8px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -18px rgba(18,40,58,.45);z-index:60}
  .x-menu:target,.x-menu.is-open{display:flex}
  nav .x-menu a:not(.nav-cta){display:block;padding:14px 12px;font-size:1.05rem;border-radius:10px}
  nav .x-menu a+a{border-top:1px solid var(--line)}
}
@media (max-width:820px) and (prefers-reduced-motion:no-preference){.x-menu:target,.x-menu.is-open{animation:x-menu-in .18s ease-out}}
@keyframes x-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:820px){nav .nav-cta{white-space:nowrap}}
@media (max-width:440px){
  .site-head nav{gap:6px}
  nav a.x-menu-btn{padding:8px 10px;gap:6px}
  nav .nav-cta{padding:10px 12px}
  .site-head .brand{font-size:1.15rem;gap:8px}
}
@media (max-width:379px){nav a.x-menu-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.x-cta-s{display:none}
@media (max-width:400px){.x-cta-l{display:none}.x-cta-s{display:inline}}
@media (max-width:820px){nav .x-menu a+a{border-top:0}.x-menu{gap:2px}nav a.x-menu-btn svg{flex:none}.site-head nav{flex-wrap:nowrap}}

/* Pricing page: five plans in a row, done-for-you card full width below (3 November 2026) */
.x-plans .plans-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.x-plans .plans-5 .plan{padding:24px 18px}
.x-plans .plans-5 .price{font-size:2rem}
.plan-short{color:var(--slate);font-size:.95rem;line-height:1.45;margin:2px 0 6px;min-height:2.9em}
.plan-more{margin:2px 0 14px;font-size:.88rem}
.plan-more summary{cursor:pointer;color:var(--relay-dark);font-weight:600}
.plan-more ul{margin-top:10px}
.x-plans .plan-dfy-wide{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) auto;gap:28px;align-items:center;margin:6px 0 20px;padding:30px 32px}
.plan-dfy-wide .pdw-main .price{margin:6px 0}
.plan-dfy-wide ul{grid-template-columns:1fr 1fr;column-gap:22px}
.plan-dfy-wide .btn{white-space:nowrap}
@media (max-width:1180px){.x-plans .plans-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.x-plans .plan-dfy-wide{grid-template-columns:1fr;gap:16px}.plan-dfy-wide ul{grid-template-columns:1fr}}
@media (max-width:700px){.x-plans .plans-5{grid-template-columns:1fr}.plan-short{min-height:0}}
.x-plans .plan-dfy-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto}
.x-plans .plan-dfy-wide ul{margin:0;row-gap:10px}
.x-plans .plan-dfy-wide .btn{margin-top:0;align-self:center}