/* ShortFreeURL marketing site */
:root{
  --ink:#0f1729; --body:#3d4759; --muted:#6b7688; --line:#e6e9f0;
  --bg:#ffffff; --soft:#f7f8fc; --soft2:#eef1f8;
  --brand:#1fb07e; --brand-dark:#0a874e; --brand-soft:#eafbf1;
  --green:#1fb07e; --amber:#d97706; --red:#dc2626;
  --radius:14px; --shadow:0 1px 3px rgba(16,24,40,.06),0 8px 28px rgba(16,24,40,.06);
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#f2f5fb;--body:#c3cbdb;--muted:#8b95a8;--line:#232a3a;--bg:#0d1117;--soft:#141a24;--soft2:#1a2130;--brand:#4ade80;--brand-soft:#123125;--shadow:0 1px 3px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35)}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--font);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0 0 14px;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.6vw,3.15rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.15rem);font-weight:750}
h3{font-size:1.13rem;font-weight:700}
p{margin:0 0 16px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--soft2);padding:2px 6px;border-radius:5px}
kbd{font-family:var(--font);font-size:.82em;background:var(--soft2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px}
.container{max-width:1120px;margin:0 auto;padding:0 22px}
main.wide .container{max-width:1400px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.center{text-align:center}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;gap:26px;height:66px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);font-size:1.06rem;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo b{font-weight:800}
.logo .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#1fb07e);color:#fff;display:grid;place-items:center;font-size:.95rem;font-weight:800}
.navlinks{display:flex;gap:22px;margin-left:10px;flex:1}
.navlinks a{color:var(--body);font-size:.95rem;font-weight:500}
.navlinks a.on,.navlinks a:hover{color:var(--brand);text-decoration:none}
.navcta{display:flex;gap:10px;align-items:center}
.burger{display:none;background:none;border:0;font-size:1.4rem;color:var(--ink);cursor:pointer}
.btn,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;font-weight:600;font-size:.94rem;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn{background:var(--brand);color:#fff}
.btn:hover{background:var(--brand-dark);text-decoration:none;transform:translateY(-1px)}
.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.ghost:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.btn.big,.ghost.big{padding:14px 26px;font-size:1rem}
.btn.block,.ghost.block{width:100%;margin:14px 0 18px}

/* hero */
.hero{padding:72px 0 56px;background:radial-gradient(1100px 460px at 50% -12%,var(--brand-soft),transparent 70%)}
.hero .container{max-width:860px;text-align:center}
.pill{display:inline-block;background:var(--brand-soft);color:var(--brand);padding:6px 15px;border-radius:999px;font-size:.85rem;font-weight:650;margin-bottom:20px}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--brand),#14b8a6);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.13rem;color:var(--muted);max-width:660px;margin:0 auto 26px}
.herotry{display:flex;gap:10px;max-width:600px;margin:26px auto 12px}
.herotry input{flex:1;padding:14px 18px;border:1px solid var(--line);border-radius:11px;font-size:.98rem;background:var(--bg);color:var(--ink)}
.herotry input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.herotry button{padding:14px 24px;background:var(--brand);color:#fff;border:0;border-radius:11px;font-weight:650;cursor:pointer;font-size:.98rem}
.herotry button:hover{background:var(--brand-dark)}
[hidden]{display:none!important}
.quickresult{max-width:600px;margin:0 auto 8px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;align-items:center;gap:14px;text-align:left}
.quickresult .u{flex:1;font-weight:650;color:var(--ink);word-break:break-all}
.quickresult img{width:76px;height:76px;border-radius:8px;background:#fff}
.ctarow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:8px 0 0}

/* stats strip */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:38px 0 56px;text-align:center}
.statrow b{display:block;font-size:1.65rem;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.statrow span{font-size:.85rem;color:var(--muted)}

/* cards / grids */
section.container{padding:34px 22px}
.grid3,.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.card{display:block;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px;color:var(--body);transition:.16s}
.card:hover{text-decoration:none;border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
.card h3,.card .card-h{margin-bottom:7px}
.card p{margin:0;font-size:.93rem;color:var(--muted)}
.card .ico{font-size:1.5rem;display:block;margin-bottom:10px}
.card.post .kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand);font-weight:700;display:block;margin-bottom:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chips.center{justify-content:center}
.chip{display:inline-block;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.87rem;color:var(--body)}
a.chip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}

/* split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:46px 22px}
.ticks{list-style:none;padding:0;margin:0 0 22px}
.ticks li{padding-left:28px;position:relative;margin-bottom:9px}
.ticks li::before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:800}
.ticks.cols{columns:2;column-gap:26px}
.featgroup{margin:26px 0}
.mock{background:var(--soft);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.mockbar{display:flex;gap:6px;padding:12px 14px;background:var(--soft2);border-bottom:1px solid var(--line)}
.mockbar span{width:10px;height:10px;border-radius:50%;background:#cbd2e0}
.mockbody{padding:16px}
.mockrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.mockrow b{flex:1;color:var(--ink);font-weight:600}
.mockrow .tag{background:var(--brand-soft);color:var(--brand);padding:2px 9px;border-radius:999px;font-size:.76rem;font-weight:600}
.mockrow .num{font-weight:700;color:var(--ink)}
.mockchart{display:flex;align-items:flex-end;gap:4px;height:90px;margin-top:18px}
.mockchart i{flex:1;background:linear-gradient(180deg,var(--brand),#a5b4fc);border-radius:3px 3px 0 0}

/* compare strip */
.comparestrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:22px 0}
.comparestrip a{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:15px;text-align:center;color:var(--body)}
.comparestrip a:hover{border-color:var(--brand);text-decoration:none}
.comparestrip b{display:block;color:var(--ink);margin-bottom:3px}
.comparestrip span{font-size:.8rem;color:var(--muted)}

/* pricing */
.pagehead{padding:52px 22px 20px;text-align:center}
.pagehead .lead{margin-bottom:18px}
.crumb{display:inline-block;font-size:.88rem;margin-bottom:12px;color:var(--muted)}
.pricegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;max-width:860px;margin:0 auto}
.plan{border:1px solid var(--line);border-radius:18px;padding:30px;background:var(--bg);position:relative}
.plan.featured{border:2px solid var(--brand);box-shadow:0 12px 44px rgba(22,163,74,.14)}
.plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;padding:5px 16px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.price{font-size:2.6rem;font-weight:800;color:var(--ink);margin:8px 0 4px;letter-spacing:-.03em}
.price span{font-size:1rem;font-weight:500;color:var(--muted)}
.price.small{font-size:1.25rem}

/* tables */
.tablewrap{overflow-x:auto}
table.cmp,table.matrix,table.statustable{width:100%;border-collapse:collapse;margin:16px 0 32px;font-size:.92rem}
table.cmp th,table.cmp td,table.matrix th,table.matrix td,table.statustable td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left}
table.cmp th,table.matrix th{background:var(--soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;position:sticky;top:66px;z-index:2}
.matrix td.sticky,.matrix th.sticky{position:sticky;left:0;background:var(--bg);z-index:1;min-width:210px}
.matrix th.sticky{background:var(--soft);z-index:3}
.matrix .ms,.cmp .pro{background:color-mix(in srgb,var(--brand-soft) 60%,transparent)}
.matrix th.ms{color:var(--brand)}
.grouprow td{background:var(--soft2);font-weight:700;color:var(--ink);text-transform:uppercase;font-size:.76rem;letter-spacing:.07em}
.yes{color:var(--green);font-weight:800}
.no{color:#c3cbd8}
.part{color:var(--amber);font-size:.84rem;font-weight:600}
.txt{font-size:.88rem}
.statustable .ok{color:var(--green);font-weight:600;white-space:nowrap}
.vsrow{display:flex;align-items:center;justify-content:center;gap:20px;margin:26px 0;flex-wrap:wrap}
.vscard{border:1px solid var(--line);border-radius:16px;padding:22px 30px;min-width:200px;text-align:center}
.vscard.win{border:2px solid var(--brand);background:var(--brand-soft)}
.vs{font-weight:800;color:var(--muted)}

/* prose / article */
.prose{max-width:760px;margin:0 auto}
.article{max-width:760px;padding:44px 22px 20px}
.prose h2{margin:34px 0 12px;font-size:1.42rem}
.prose h3{margin:26px 0 10px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:24px}
.prose li{margin-bottom:9px}
.prose blockquote{margin:0 0 20px;padding:12px 20px;border-left:3px solid var(--brand);background:var(--soft);border-radius:0 10px 10px 0}
.prose pre{background:#0f172a;color:#e2e8f0;padding:16px 18px;border-radius:12px;overflow-x:auto;font-size:.85rem;line-height:1.6}
.prose pre code{background:none;color:inherit;padding:0}
.prose table{width:100%;border-collapse:collapse;margin:18px 0}
.prose th,.prose td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.kicker{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--brand);font-weight:700;display:block;margin-bottom:10px}
.searchbar{display:flex;gap:8px;max-width:440px;margin:0 auto 18px}
.searchbar input{flex:1;padding:11px 15px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.searchbar button{padding:11px 20px;background:var(--brand);color:#fff;border:0;border-radius:10px;font-weight:600;cursor:pointer}

/* faq / details */
.faq details,details.doc{border:1px solid var(--line);border-radius:12px;padding:0;margin-bottom:10px;background:var(--bg)}
.faq summary,details.doc summary{padding:15px 18px;cursor:pointer;font-weight:650;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker,details.doc summary::-webkit-details-marker{display:none}
.faq summary::after,details.doc summary::after{content:'+';float:right;color:var(--muted);font-weight:400;font-size:1.2rem;line-height:1}
.faq details[open] summary::after,details.doc[open] summary::after{content:'−'}
.faq details p{padding:0 18px 16px;margin:0;color:var(--muted)}
details.doc .prose{padding:0 18px 16px}

/* timeline / ranks */
.timeline{list-style:none;padding:0;max-width:720px;margin:0 auto}
.timeline li{border-left:2px solid var(--line);padding:0 0 26px 24px;position:relative}
.timeline li::before{content:'';position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--brand)}
.ranklist{padding-left:0;list-style:none;counter-reset:r;max-width:780px;margin:0 auto}
.ranklist li{counter-increment:r;border:1px solid var(--line);border-radius:14px;padding:22px 24px 22px 66px;margin-bottom:14px;position:relative}
.ranklist li::before{content:counter(r);position:absolute;left:22px;top:22px;width:30px;height:30px;border-radius:9px;background:var(--soft2);color:var(--ink);display:grid;place-items:center;font-weight:800}
.ranklist li.us{border:2px solid var(--brand);background:var(--brand-soft)}
.ranklist li.us::before{background:var(--brand);color:#fff}

/* cta band */
.cta{background:linear-gradient(135deg,var(--brand),#7c3aed);color:#fff;padding:56px 0;margin-top:48px;text-align:center}
.cta h2{color:#fff}
.cta p{max-width:600px;margin:0 auto 22px;opacity:.92}
.cta .btn{background:#fff;color:var(--brand)}
.cta .btn:hover{background:#f4f4ff}
.cta .ghost{border-color:rgba(255,255,255,.5);color:#fff}
.cta .ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff}

/* footer */
.foot{border-top:1px solid var(--line);padding:44px 0 26px;background:var(--soft);margin-top:0}
.footgrid{display:grid;grid-template-columns:1.6fr repeat(6,1fr);gap:22px}
.footgrid h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.footgrid a{display:block;color:var(--body);font-size:.9rem;margin-bottom:8px}
.footbar{display:flex;justify-content:space-between;padding-top:22px;margin-top:26px;border-top:1px solid var(--line);flex-wrap:wrap;gap:10px}

/* tools */
.toolbox{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:820px;margin:0 auto}
.toolbox label{display:block;font-weight:600;color:var(--ink);margin:0 0 6px;font-size:.9rem}
.toolbox input,.toolbox textarea,.toolbox select{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;font-family:inherit;margin-bottom:14px;background:var(--bg);color:var(--ink)}
.toolbox textarea{min-height:110px;resize:vertical}
.toolbox .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.toolbox button{padding:12px 24px;background:var(--brand);color:#fff;border:0;border-radius:10px;font-weight:650;cursor:pointer;font-size:.95rem}
.toolbox button:hover{background:var(--brand-dark)}
.toolbox button[disabled]{opacity:.6;cursor:wait}
.toolout{margin-top:20px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px;overflow-x:auto}
.toolout pre{margin:0;font-size:.84rem;white-space:pre-wrap;word-break:break-word}
.toolout table{width:100%;border-collapse:collapse;font-size:.88rem}
.toolout th,.toolout td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.issue{padding:9px 13px;border-radius:9px;margin-bottom:8px;font-size:.89rem}
.issue.error{background:#fef2f2;color:#991b1b}
.issue.warn{background:#fffbeb;color:#92400e}
.issue.info{background:#eff6ff;color:#1e40af}
@media (prefers-color-scheme:dark){
  .issue.error{background:#3b1416;color:#fca5a5}
  .issue.warn{background:#3a2a10;color:#fcd34d}
  .issue.info{background:#132038;color:#93c5fd}
}
.copyrow{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.copyrow input{flex:1;margin:0}
.copyrow button{padding:11px 18px}
.qrpreview{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.qrpreview svg,.qrpreview img{width:220px;height:auto;background:#fff;border-radius:12px;padding:8px;border:1px solid var(--line)}

/* plain pages (share/abuse/status) */
body.plain{display:flex;align-items:flex-start;justify-content:center;padding:36px 18px}
body.plain .card{max-width:520px;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:var(--shadow)}
body.plain .card.wide{max-width:760px}
.form label{display:block;font-weight:600;color:var(--ink);margin:14px 0 6px;font-size:.9rem}
.form input,.form textarea,.form select{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:.95rem;background:var(--bg);color:var(--ink)}
.form button{margin-top:18px;width:100%;padding:13px;background:var(--brand);color:#fff;border:0;border-radius:10px;font-weight:650;cursor:pointer;font-size:1rem}
.share-wrap{max-width:1000px;width:100%;margin:0 auto}
.share-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.brandmark{font-weight:800;color:var(--brand)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px}
.kpi .lbl{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px}
.kpi .val{display:block;font-size:1.8rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.kpi .chg{font-size:.8rem;font-weight:650}
.kpi .chg.up{color:var(--green)}.kpi .chg.down{color:var(--red)}
.panel{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
.panel h3{font-size:.95rem;margin-bottom:14px}
.chart{display:flex;align-items:flex-end;gap:3px;height:170px}
.chart .bar{flex:1;background:linear-gradient(180deg,var(--brand),#a5b4fc);border-radius:3px 3px 0 0;min-height:2px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.barlist{list-style:none;padding:0;margin:0}
.barlist li{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:.9rem}
.barlist .n{width:36%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barlist .track{flex:1;height:8px;background:var(--soft2);border-radius:99px;overflow:hidden}
.barlist .track i{display:block;height:100%;background:var(--brand);border-radius:99px}
.barlist .v{font-weight:650;color:var(--ink);min-width:42px;text-align:right}
.foot.small,.foot p{font-size:.85rem}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .ticks.cols{columns:1}
}
@media (max-width:760px){
  .navlinks,.navcta{display:none}
  body.navopen .navlinks{display:flex;position:absolute;top:66px;left:0;right:0;background:var(--bg);flex-direction:column;padding:16px 22px;border-bottom:1px solid var(--line);gap:14px}
  body.navopen .navcta{display:flex;position:absolute;top:210px;left:22px;right:22px}
  .burger{display:block;margin-left:auto}
  .herotry{flex-direction:column}
  table.cmp th,table.matrix th{position:static}
  .toolbox .row{grid-template-columns:1fr}
}

/* ---------- Documentation ---------- */
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: start; }
@media (max-width: 860px) { .docs-layout { grid-template-columns: 1fr; } }
.docnav { position: sticky; top: 90px; border-left: 1px solid var(--line); padding-left: 16px; }
.docnav h4 { margin: 0 0 10px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.docnav a { display: block; padding: 5px 0; font-size: .86rem; color: var(--muted); }
.docnav a:hover, .docnav a.on { color: var(--brand); }
.doc.endpoint summary { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
code.method {
  display: inline-block; min-width: 54px; text-align: center; border-radius: 5px;
  padding: 1px 7px; font-size: .7rem; font-weight: 700; color: #fff; background: #64748b; margin-right: 6px;
}
code.method.get { background: #0f766e; }
code.method.post { background: #1d4ed8; }
code.method.patch, code.method.put { background: #b45309; }
code.method.delete { background: #b91c1c; }

/* ---------- Template gallery ---------- */
.cards.tpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.tplcard .swatch {
  display: flex; align-items: center; justify-content: center;
  height: 96px; border-radius: 10px; border: 2px solid; margin-bottom: 12px;
}
.tplcard .swatch .dot { width: 34px; height: 34px; border-radius: 50%; display: block; }
.two-up { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 800px) { .two-up { grid-template-columns: 1fr; } }
.tplpreview { border-radius: 18px; padding: 26px 20px; border: 1px solid var(--line); }
.tplinner { text-align: center; }
.tplinner h2 { margin: 0 0 4px; font-size: 1.2rem; }
.tplbtn {
  display: block; color: #fff; border-radius: 10px; padding: 10px 14px;
  margin: 8px 0; font-size: .86rem; font-weight: 600;
}
.chip.small { font-size: .68rem; padding: 2px 8px; }

/* ---------- Compare: differentiators, "only here", switching ---------- */
.only { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.card.diff .only, .card.diff .part { display: inline-block; margin: 0 0 10px; }
.switching h3 { margin-top: 18px; }
.switching table.cmp { margin-top: 8px; }
details.doc .switching { padding: 0; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Learn strip, guides hub ---------- */
.learnhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.learnhead h2 { margin: 0; }
.topic { border-top: 1px solid var(--line); padding-top: 28px; }
.topichead p { margin: 0 0 16px; }
.topicgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 800px) { .topicgrid { grid-template-columns: 1fr; } }
.card.start { border-color: var(--brand); }
.linklist { list-style: none; padding: 0; margin: 0 0 18px; }
.linklist li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.topicgrid h4 { margin: 0 0 6px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Blog: tag cloud, previous / next ---------- */
.tagcloud .chips { align-items: baseline; }
.tagcloud .chip .muted { font-size: .7em; margin-left: 2px; }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.prevnext a { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--body); }
.prevnext a:hover { border-color: var(--brand); text-decoration: none; }
.prevnext a b { display: block; margin-top: 2px; font-size: .93rem; }
.prevnext .next { text-align: right; }
@media (max-width: 600px) { .prevnext { grid-template-columns: 1fr; } }

/* ---------- Docs: breadcrumbs, feedback, related ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .86rem; color: var(--muted); margin-bottom: 10px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--brand); }
.helpful { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 28px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: .93rem; }
.helpful button { padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); font-weight: 600; cursor: pointer; }
.helpful button:hover { border-color: var(--brand); color: var(--brand); }
.helpful.voted button { opacity: .5; cursor: default; }
.relateddocs { margin-top: 12px; }
.relateddocs .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.relateddocs .card h3 { font-size: 1rem; margin: 0; }

/* ---------- Public support ticket page & contact form ----------
   One column at any width: the people who land here are usually on the phone
   they were holding when the thing broke. */
.notice{padding:11px 14px;border-radius:10px;background:var(--soft,#f2f4f9);color:var(--ink);font-size:.92rem}
.notice.err{background:#fee2e2;color:#b42318}
.ticketpage{max-width:760px}
.tthread{list-style:none;margin:22px 0;padding:0;display:flex;flex-direction:column;gap:14px}
.tmsg{border:1px solid var(--line);border-radius:14px;padding:11px 14px;max-width:92%;background:var(--bg)}
.tmsg.them{align-self:flex-start;border-bottom-left-radius:4px}
.tmsg.me{align-self:flex-end;border-bottom-right-radius:4px;background:#eafbf1;border-color:#c7d2fe}
.tmsg .twho{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px;font-size:.85rem}
.tmsg .tbody{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.tfiles{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tfile{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:99px;font-size:.8rem;text-decoration:none;color:inherit}
.tfile:hover{border-color:var(--brand);color:var(--brand)}
.tevent{align-self:center;text-align:center;font-size:.8rem;color:var(--muted);padding:2px 10px}
@media(min-width:700px){.tmsg{max-width:78%}}

/* ---------- Hero motion: blobs, typing headline, floating mock ---------- */
.hero{position:relative;overflow:hidden}
.hero .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none;z-index:0}
.hero .b1{width:420px;height:420px;background:radial-gradient(circle,var(--brand),transparent 70%);top:-160px;left:-120px;animation:driftA 18s ease-in-out infinite}
.hero .b2{width:360px;height:360px;background:radial-gradient(circle,#14b8a6,transparent 70%);top:-100px;right:-140px;animation:driftB 22s ease-in-out infinite}
@keyframes driftA{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes driftB{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}
.hero .container{position:relative;z-index:1}
/* nowrap stops the rotating word breaking across two lines mid-word; the
   min-width holds the longest word's space so the headline never reflows
   as the text types and deletes. */
.typewrap{display:inline-block;position:relative;white-space:nowrap;min-width:15ch;text-align:left}
@media (max-width:620px){.typewrap{min-width:0}}
.typeword{background:linear-gradient(120deg,var(--brand),#14b8a6);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.typewrap .cursor{color:var(--brand);font-weight:400;animation:blink 1s step-end infinite;margin-left:1px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.herocta{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.google.mini{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font-weight:600;font-size:.86rem}
.google.mini:hover{background:var(--hover,var(--soft));text-decoration:none}
.mock.float{animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Scroll-reveal ----------
   Additive only: nothing here ever hides content. A section is visible from
   the first paint; entering the viewport just replays a short fade-up on it.
   There is deliberately no opacity:0 rule anywhere in this file, so no
   script failure, cache state or browser quirk can leave a page blank. */
.reveal.in{animation:revealIn .55s cubic-bezier(.22,.61,.36,1) both}
@keyframes revealIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal.in{animation:none}
  .hero .blob,.mock.float,.typewrap .cursor{animation:none}
}

/* ---------- Feature carousel ---------- */
.carouselwrap{padding-bottom:10px}
.carousel{position:relative;display:flex;align-items:center;gap:10px}
.ctrack{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:16px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:6px 2px 14px;flex:1;scrollbar-width:none}
.ctrack::-webkit-scrollbar{display:none}
.ccard{scroll-snap-align:start;display:block;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px;color:var(--body);transition:.16s}
.ccard:hover{text-decoration:none;border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
.ccard .ico{font-size:1.6rem;display:block;margin-bottom:10px}
.ccard h3{margin-bottom:7px}
.ccard p{margin:0;font-size:.93rem;color:var(--muted)}
.cnav{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:1.2rem;cursor:pointer;display:grid;place-items:center;transition:.15s}
.cnav:hover{border-color:var(--brand);color:var(--brand)}
.cdots{display:flex;gap:6px;justify-content:center;margin-top:10px}
.cdots i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block;cursor:pointer}
.cdots i.on{background:var(--brand);width:18px;border-radius:99px;transition:.2s}
@media (max-width:700px){.cnav{display:none}}

/* pricing ladder: five plans, monthly/annual toggle, wide comparison tables.
   The toggle is a checkbox so the prices swap with no JavaScript at all —
   a visitor with a blocked script still sees both halves of the price. */
.plans{position:relative}
.annualtoggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.togglerow{display:flex;justify-content:center;margin:0 0 26px}
.segtoggle{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);background:var(--soft);border-radius:999px;cursor:pointer;user-select:none}
.segtoggle .seg{padding:8px 18px;border-radius:999px;font-size:.9rem;font-weight:650;color:var(--muted);white-space:nowrap;transition:.15s}
.segtoggle .seg b{background:var(--brand-soft);color:var(--brand);font-size:.74rem;padding:2px 7px;border-radius:999px;margin-left:6px;font-weight:800}
.segtoggle .segm{background:var(--bg);color:var(--ink);box-shadow:var(--shadow)}
.annualtoggle:checked ~ .togglerow .segtoggle .segm{background:none;color:var(--muted);box-shadow:none}
.annualtoggle:checked ~ .togglerow .segtoggle .segy{background:var(--bg);color:var(--ink);box-shadow:var(--shadow)}
.annualtoggle:focus-visible ~ .togglerow .segtoggle{outline:2px solid var(--brand);outline-offset:3px}

.pricegrid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}
.plan.tier{padding:26px 20px;border-radius:16px}
.plan.tier h2{font-size:1.22rem;margin-bottom:6px}
.plan.tier .price{font-size:2.05rem;margin:6px 0 2px}
.plan.tier .ticks{font-size:.87rem;margin-bottom:0}
.plan.tier .ticks li{padding-left:22px;margin-bottom:7px}
.plan.tier .block{display:block;text-align:center;margin:14px 0 18px}
.plan.tier.featured{transform:translateY(-10px)}
.plan .pty,.plan .pny{display:none}
.annualtoggle:checked ~ .pricegrid5 .plan .ptm,
.annualtoggle:checked ~ .pricegrid5 .plan .pnm{display:none}
.annualtoggle:checked ~ .pricegrid5 .plan .pty{display:block}
.annualtoggle:checked ~ .pricegrid5 .plan .pny{display:block}
.center{text-align:center;margin-top:22px}

/* the comparison tables scroll inside their own box; the label column stays */
table.cmp.wide{min-width:640px}
table.cmp.wide th,table.cmp.wide td{text-align:center;white-space:nowrap}
table.cmp.wide th.sticky,table.cmp.wide td.sticky{text-align:left;position:sticky;left:0;background:var(--bg);z-index:1;min-width:190px;white-space:normal}
table.cmp.wide th.sticky{background:var(--soft);z-index:3}

@media (max-width:1000px){
  .pricegrid5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan.tier.featured{transform:none}
}
@media (max-width:560px){
  .pricegrid5{grid-template-columns:1fr}
  .segtoggle .seg{padding:8px 12px;font-size:.84rem}
}

/* ---------- Integrations directory (/integrations, /integrations/:slug) ----------
   The status badge is the point of this block: Available, Via API and Planned
   have to be told apart at a glance and at 390px, so each gets its own colour
   and the same shape everywhere it appears — card, detail head, legend. */
.ihero .ill{max-width:320px;margin:0 auto 10px}
.ifilters{padding-top:8px}
.isearch{display:block;max-width:560px}
.isearch input{width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:11px;font-size:1rem;background:var(--bg);color:var(--ink);font-family:inherit}
.isearch input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.ifilters .chips{margin:12px 0 0}
.ifilters button.chip{cursor:pointer;font-family:inherit}
.ifilters button.chip:hover{border-color:var(--brand);color:var(--brand)}
.ifilters button.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
#intcount{margin:12px 0 0}

.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;margin:18px 0 8px}
.icard{display:flex;flex-direction:column;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:18px;color:var(--body);transition:.16s}
.icard:hover{text-decoration:none;border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
.icard p{margin:0;font-size:.92rem;color:var(--muted);flex:1}
.icard h3,.icard .card-h{margin:0;font-size:1.02rem}
.icardtop{display:flex;gap:12px;align-items:center}
.icardfoot{display:flex;gap:7px;flex-wrap:wrap}

.itile{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:.95rem;letter-spacing:-.02em;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 62% 52%),hsl(calc(var(--h) + 32) 58% 42%))}
.itile.big{width:62px;height:62px;border-radius:16px;font-size:1.35rem}

.istat{display:inline-block;border-radius:999px;padding:4px 11px;font-size:.78rem;font-weight:700;border:1px solid transparent;white-space:nowrap}
.istat.is-ok{background:#e8f7f2;color:#14532d;border-color:#86efac}
.istat.is-via{background:#e0e7ff;color:#312e81;border-color:#c7d2fe}
.istat.is-plan{background:#f1f3f8;color:#475069;border-color:#d8dde8}
.istat.is-pop{background:#fef3c7;color:#78350f;border-color:#fcd34d}
@media (prefers-color-scheme:dark){
  .istat.is-ok{background:#0d2b18;color:#86efac;border-color:#1e5334}
  .istat.is-via{background:#123125;color:#c7d2fe;border-color:#312e81}
  .istat.is-plan{background:#1a2130;color:#9aa5ba;border-color:#2b3448}
  .istat.is-pop{background:#33260a;color:#fcd34d;border-color:#5a4310}
}

.ilegend{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:8px 0 6px}
.ilegend p{margin:8px 0 0}
.notice.ok{background:#e8f7f2;color:#14532d}
@media (prefers-color-scheme:dark){.notice.ok{background:#0d2b18;color:#86efac}}

.ihead{text-align:left}
.iheadrow{display:flex;gap:16px;align-items:flex-start}
.iheadrow h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:8px}
.iheadrow .lead{margin:0 0 6px;text-align:left}
.ilead{border-left:3px solid var(--line);padding:2px 0 2px 14px;margin:18px 0 4px;color:var(--body)}
.ilead.is-ok{border-color:var(--green)}
.ilead.is-via{border-color:var(--brand)}
.ilead.is-plan{border-color:var(--muted)}
.iwhere{border-top:1px solid var(--line);padding-top:12px}
.isteps{margin:0;padding-left:22px}
.isteps li{margin-bottom:10px}

.isuggest{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:26px;margin:26px 0}
.isuggest h2{margin-bottom:8px}
.isuggest .form{margin:0}
@media (max-width:760px){
  .isuggest{grid-template-columns:1fr;padding:20px}
  .igrid{grid-template-columns:1fr}
  .iheadrow{gap:12px}
  .itile.big{width:48px;height:48px;font-size:1.1rem}
}
.icard[hidden]{display:none}
/* inside .tablewrap the header's sticky ancestor is the scroll box, not the
   page, so the 66px nav offset would just park it over the first row */
.tablewrap table.cmp.wide th{top:0}
.iprose,.isteps,.imoves,.ifaq{max-width:820px}
.iprose h2{margin:30px 0 12px;font-size:1.42rem}
.ihead .ctarow{justify-content:flex-start}

/* =====================================================================
   /enterprise — the sales page for large buyers. Appended; nothing above
   is redefined. Prefixed .ent- so it cannot collide with another page.
   ===================================================================== */
.ent-hero{padding:64px 0 44px}
.ent-hero .container{max-width:1120px;text-align:left}
.ent-herogrid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.ent-herotext .lead{margin-left:0;max-width:none}
.ent-herotext .ctarow{justify-content:flex-start;margin:22px 0 14px}
.ent-heroill svg{border-radius:18px;box-shadow:var(--shadow)}
.ent-band b{font-size:1.5rem}
.ent-band span{line-height:1.35;display:block}
.ent-bandnote{max-width:760px;margin:-34px auto 44px}

.ent-lede,.ent-group,.ent-map,.ent-migrate,.ent-not,.ent-faq,.ent-form{margin:0 auto 54px}
.ent-group .kicker{font-size:.9rem}
.ent-group .lead{margin:0 0 20px;max-width:720px}
.ent-cap{display:flex;flex-direction:column;gap:9px}
.ent-cap h3{margin:0}
.ent-cap p{margin:0;font-size:.94rem;color:var(--muted)}
.ent-tag{align-self:flex-start;font-size:.76rem;font-weight:700;letter-spacing:.01em;padding:3px 10px;
  border-radius:999px;background:var(--brand-soft);color:var(--brand);border:1px solid transparent}
.ent-tag:hover{text-decoration:none;border-color:var(--brand)}
.ent-tag.all{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.ent-tag.talk{background:var(--soft2);color:var(--muted)}

/* coverage map */
.ent-mapwrap{display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:start;margin-top:22px}
.ent-mapfig{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.ent-mapfig svg{display:block;width:100%;height:auto}
.ent-land circle{fill:var(--line)}
.ent-pin .halo{fill:var(--brand);opacity:.17}
.ent-pin .core{fill:var(--brand);stroke:var(--bg);stroke-width:1.6}
.ent-mapfig .small{margin:12px 0 0}
.ent-mapside h3{margin:0 0 10px;font-size:1rem}
.ent-mapside h3+p,.ent-mapside .ticks{margin-bottom:18px}
.ent-mapside .ticks li{font-size:.92rem}
.ent-lat{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:.9rem}
.ent-lat th{text-align:left;font-weight:600;color:var(--body);padding:7px 0;border-bottom:1px solid var(--line)}
.ent-lat td{text-align:right;color:var(--ink);font-weight:650;padding:7px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.ent-target{display:inline-block;margin-left:6px;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);
  padding:2px 7px;border-radius:999px;vertical-align:middle}

/* migration */
.ent-steps{list-style:none;padding:0;margin:22px 0 18px;counter-reset:none}
.ent-steps li{display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:start;
  padding:18px 0;border-top:1px solid var(--line)}
.ent-steps li:last-child{border-bottom:1px solid var(--line)}
.ent-stepno{width:34px;height:34px;border-radius:11px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:.95rem}
.ent-steps h3{margin:0 0 6px}
.ent-steps p{margin:0;color:var(--muted);font-size:.95rem}

/* security split */
.ent-sec{background:var(--soft);padding:52px 0;margin:0 0 54px}
.ent-secsplit{padding:22px 0 0;align-items:start;gap:40px}
.ent-secsplit h3{font-size:1.05rem}
.ent-secsplit .ticks li{font-size:.94rem}

/* what we do not do */
.ent-gap{border-style:dashed}
.ent-gap h3{margin-bottom:8px}
.ent-gap p{margin:0;font-size:.94rem;color:var(--muted)}

.ent-faq{max-width:860px}
.ent-faq .lead{margin:0 0 20px}
.ent-faq summary{line-height:1.45}

/* enquiry form */
.ent-formcard{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:34px}
.ent-formcard h2{margin-bottom:10px}
.ent-formcard .lead{margin:0 0 20px;max-width:640px}
.ent-two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ent-fields label{display:block;margin-bottom:14px;font-weight:600;color:var(--ink);font-size:.92rem}
.ent-fields input,.ent-fields select,.ent-fields textarea{display:block;width:100%;margin-top:6px;
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);
  font:inherit;font-size:.95rem;font-weight:400}
.ent-fields textarea{resize:vertical}
.ent-fields input:focus,.ent-fields select:focus,.ent-fields textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:transparent}
.ent-fields button{margin-top:4px;padding:13px 28px;border:0;border-radius:10px;background:var(--brand);
  color:#fff;font:inherit;font-weight:650;cursor:pointer}
.ent-fields button:hover{background:var(--brand-dark)}
.ent-form .notice.err{background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red);
  border:1px solid color-mix(in srgb,var(--red) 30%,transparent);border-radius:10px;padding:12px 15px}

@media (max-width:980px){
  .ent-herogrid{grid-template-columns:1fr}
  .ent-heroill{max-width:420px;margin:0 auto}
  .ent-mapwrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ent-hero{padding:44px 0 32px}
  .ent-band b{font-size:1.25rem}
  .ent-bandnote{margin:-30px auto 38px}
  .ent-two{grid-template-columns:1fr}
  .ent-formcard{padding:24px 18px}
  .ent-steps li{grid-template-columns:32px 1fr;gap:12px}
  .ent-mapfig{padding:10px}
}
/* .lead centres itself site-wide; on this page every section is left-aligned
   prose, so it must not float to the middle under a left-hand heading. */
.ent-lede .lead,.ent-map .lead,.ent-migrate .lead,.ent-not .lead,.ent-faq .lead,.ent-form .lead{margin-left:0;max-width:760px}
/* The land dots sit on a soft card, so --line is too pale to read as a map. */
.ent-land circle{fill:color-mix(in srgb,var(--muted) 42%,transparent)}
.ent-pin .halo{opacity:.3}
.ent-pin .core{r:4.6}
/* The nav is sticky, so an in-page jump would otherwise land the heading behind it. */
.ent-map,.ent-migrate,.ent-sec,.ent-not,.ent-faq,.ent-form{scroll-margin-top:84px}

/* ---------- Illustrated cards ----------
   The picture sits in a fixed-ratio band at the top of the card so a grid of
   them lines up regardless of how long each title runs. */
.card.art{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.art .cardart{display:block;line-height:0;background:var(--soft)}
.card.art .cardart svg{display:block;width:100%;height:auto}
.card.art h3,.card.art .card-h,.card.art p,.card.art .kicker{padding-left:20px;padding-right:20px}
.card.art h3{margin-top:16px}
.card.art .kicker{margin-top:16px;margin-bottom:6px;display:block}
.card.art p{padding-bottom:20px}
.hero .ill svg,.pagehead .ill svg{max-width:340px;margin:0 auto 8px;display:block}

/* ---- drawn icons and illustration banners -------------------------- */
/* The feature tiles used to carry emoji, which render as a different picture
   on every platform and cannot take the brand colour. These are inline SVGs
   stroked in currentColor, so the colour is set here, once. */
.ico{color:var(--brand);line-height:0}
.card .ico,.ccard .ico{display:block;margin-bottom:12px;height:26px}
.ico svg{display:block}
.msico{vertical-align:-.18em}
.kicker .msico{vertical-align:-.28em;margin-right:6px}
.ticks .msico,.chip .msico{margin-right:6px}

.illbanner{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin:26px 0}
.illbanner-art{line-height:0;border-radius:14px;overflow:hidden}
.illbanner-art svg{display:block;width:100%;height:auto}
.illbanner-copy h3{margin:0 0 8px}
.illbanner-copy p{margin:0;color:var(--muted)}
.illbanner-copy .btn{margin-top:14px}
.illbanner-soft{background:var(--soft)}
.illbanner-brand{background:color-mix(in srgb,var(--brand) 8%,var(--bg));border-color:color-mix(in srgb,var(--brand) 26%,var(--line))}
@media (max-width:640px){
  .illbanner{grid-template-columns:1fr;gap:16px;padding:18px}
  .illbanner-art{max-width:220px}
}

/* =====================================================================
   Landing page (home only). Everything here is prefixed .lp- so it can
   never reach another page, and it is appended rather than woven into the
   rules above so no existing component changes shape.
   ===================================================================== */

/* Even vertical rhythm: every home section gets the same block, so the page
   reads as one document rather than a stack of differently-spaced imports. */
.lp-sec{padding:74px 0}
.lp-sec+.lp-sec{padding-top:0}
.lp-sechead{max-width:760px;margin:0 auto 34px}
.lp-sechead .lead{margin-bottom:0}
.lp-sechead .kicker{margin-bottom:8px}
.lp-secfoot{margin:28px 0 0}
.lp-more{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--brand);font-size:.92rem}
.lp-more svg{transform:translateY(1px)}

/* ---- 1. Hero: copy on the left, a working shortener on the right ---- */
/* The site-wide .hero centres an 860px column; the landing hero is a
   two-column band, so the overrides are scoped to .hero.lp and nothing else
   that uses .hero is affected. */
.hero.lp{padding:66px 0 62px}
.hero.lp .container{max-width:1120px;text-align:left}
.lp-herogrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.lp-herocopy h1{margin-bottom:18px}
.lp-herocopy .lead{margin:0 0 24px;max-width:560px}
.lp-herocopy .ctarow{justify-content:flex-start;margin:0}
.lp-herogoogle{justify-content:flex-start;margin-top:20px}
.lp-heroticks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:22px 0 0;font-size:.9rem;color:var(--muted)}
.lp-heroticks li{display:flex;align-items:center;gap:7px}
.lp-heroticks svg{color:var(--green);flex:0 0 auto}

.lp-trycard{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:26px;
  box-shadow:0 2px 6px rgba(16,24,40,.05),0 22px 60px rgba(22,163,74,.12)}
.lp-tryhead{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.lp-tryhead h2{font-size:1.2rem;margin:0 0 4px}
.lp-tryhead p{margin:0}
.lp-tryico{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.lp-tryform{max-width:none;margin:0}
.lp-tryform input{min-width:0}
.lp-tryresult{max-width:none;margin:16px 0 0;flex-wrap:wrap}
.lp-trynote{list-style:none;padding:0;margin:18px 0 0;font-size:.88rem;color:var(--muted);display:grid;gap:9px}
.lp-trynote li{display:flex;align-items:flex-start;gap:8px}
.lp-trynote svg{color:var(--green);flex:0 0 auto;margin-top:3px}

/* ---- 2. The four-point strip ---- */
.lp-proofsec{padding-top:0}
.lp-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:34px;padding-bottom:34px}
.lp-proofitem h3{font-size:1rem;margin:0 0 6px}
.lp-proofitem p{margin:0;font-size:.9rem;color:var(--muted)}
.lp-proofitem .ico{height:24px;margin-bottom:12px}

/* ---- 3. The industries marquee ---- */
.lp-marquee{position:relative;overflow:hidden;margin-top:30px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lp-mtrack{display:flex;width:max-content;gap:14px;padding:4px 0;animation:lpMarquee 46s linear infinite}
.lp-mhalf{display:flex;gap:14px}
.lp-marquee:hover .lp-mtrack,.lp-marquee:focus-within .lp-mtrack{animation-play-state:paused}
.lp-mitem{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;flex:0 0 auto;
  background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:11px 20px;
  color:var(--body);font-weight:600;font-size:.94rem}
a.lp-mitem:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.lp-mitem svg{color:var(--brand);flex:0 0 auto}
/* The track holds the list twice, so shifting it by exactly half its width
   lands on an identical frame and the loop has no visible seam. */
@keyframes lpMarquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){
  .lp-mtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .lp-mhalf{display:none}
  .lp-marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---- 4. The six feature cards ---- */
.lp-fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lp-fcard{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;color:var(--body);transition:.16s}
.lp-fcard:hover{text-decoration:none;border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-3px)}
.lp-fart{display:block;line-height:0;background:var(--soft);border-bottom:1px solid var(--line)}
.lp-fart svg{display:block;width:100%;height:auto}
.lp-fbody{padding:22px;display:flex;flex-direction:column;flex:1}
.lp-fbody h3{margin-bottom:8px}
.lp-fbody p{font-size:.94rem;color:var(--muted)}
.lp-fbody .ticks{margin:2px 0 18px;font-size:.9rem}
.lp-fbody .ticks li{margin-bottom:7px;color:var(--body)}
.lp-fbody .lp-more{margin-top:auto}

/* ---- 5. The four numbered steps ---- */
.lp-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:none}
.lp-step{background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column}
.lp-stepnum{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:var(--brand);color:#fff;font-weight:800;font-size:1.02rem;letter-spacing:-.02em;margin-bottom:16px}
.lp-step h3{margin-bottom:8px}
.lp-step p{font-size:.93rem;color:var(--muted);flex:1}
.lp-step .lp-more{margin-top:4px}

/* ---- 6. Integration tiles ---- */
.lp-igrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.lp-itile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:20px 12px;color:var(--body);transition:.16s}
.lp-itile:hover{text-decoration:none;border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
.lp-itile b{color:var(--ink);font-size:.92rem;line-height:1.3;flex:1;display:grid;place-items:center}
.lp-itile .istat{font-size:.72rem;padding:3px 9px}

/* ---- 7. Team tabs ---- */
.lp-tablist{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.lp-tab{font-family:inherit;font-size:.95rem;font-weight:650;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:10px 22px;color:var(--body);transition:.15s}
.lp-tab:hover{border-color:var(--brand);color:var(--brand)}
.lp-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.lp-tabpanel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center;
  background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:32px}
/* .lp-tabpanel sets display, which would otherwise beat the hidden attribute. */
.lp-tabpanel[hidden]{display:none}
.lp-tabcopy h3{margin-bottom:8px}
.lp-tabcopy .lead{margin:0 0 20px;max-width:none;font-size:1.05rem}
.lp-tabticks{margin:0}
.lp-tabticks li{margin-bottom:12px}

/* ---- 8. The scale band ---- */
.lp-scale{margin:0}
.lp-scalenotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:30px}
.lp-scalenotes p{margin:0;font-size:.9rem;color:var(--muted)}
.lp-scalenotes b{color:var(--ink)}

/* ---- 9. Why teams switch ---- */
.lp-why{display:flex;flex-direction:column}
.lp-why p{flex:1}
.lp-proofline{display:flex;align-items:flex-start;gap:7px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.74rem;color:var(--muted);word-break:break-word}
.lp-proofline svg{color:var(--brand);flex:0 0 auto;margin-top:2px}
.lp-disclaim{margin:16px 0 0;max-width:820px;margin-left:auto;margin-right:auto}

/* ---- 10. FAQ ---- */
.lp-faqwrap{max-width:820px}
.lp-faqsec .faq details{margin-bottom:10px}

/* ---- 11. Final call to action ---- */
.lp-ctapoints{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;font-size:.9rem}
.lp-ctapoints li{display:flex;align-items:center;gap:8px}
.lp-ctapoints svg{flex:0 0 auto}

/* ---- narrower screens ---- */
@media (max-width:1040px){
  .lp-fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-igrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lp-proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
}
@media (max-width:900px){
  .hero.lp{padding:48px 0 44px}
  .lp-herogrid{grid-template-columns:1fr;gap:34px}
  .lp-tabpanel{grid-template-columns:1fr;gap:22px;padding:24px}
  .lp-scalenotes{grid-template-columns:1fr;gap:14px}
}
@media (max-width:700px){
  .lp-sec{padding:52px 0}
  .lp-sechead{margin-bottom:26px}
  .lp-fgrid,.lp-steps{grid-template-columns:1fr}
  .lp-igrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-proof{grid-template-columns:1fr;gap:22px}
  .lp-trycard{padding:20px}
  .lp-tryform{gap:10px}
  .lp-heroticks{gap:8px 14px}
  .lp-ctapoints{flex-direction:column;align-items:flex-start;text-align:left;max-width:340px;margin-left:auto;margin-right:auto}
  .lp-tablist{gap:6px}
  .lp-tab{padding:9px 15px;font-size:.88rem}
}

/* Landing page, phone-width corrections found in the 390px capture. */
@media (max-width:700px){
  /* Two buttons of different label lengths read as ragged when they stack. */
  .lp-herocopy .ctarow{flex-direction:column;align-items:stretch}
  .lp-herocopy .ctarow .btn,.lp-herocopy .ctarow .ghost{width:100%}
  /* "Works via API & webhooks" is wider than a half-width tile. */
  .lp-itile .istat{white-space:normal;font-size:.68rem;line-height:1.35;max-width:100%}
  /* A wrapped button label must not push its trailing arrow off to one side. */
  .lp-secfoot .btn,.lp-secfoot .ghost{flex-wrap:wrap;text-align:center}
}

/* ---------------------------------------------------------------------
   Site footer — brand column plus five link columns, short.io-shaped.
   Written as `.foot .footgrid` so these win over the two-column rules
   further up without editing them. Collapses 6 → 3 → 2 → 1.
   --------------------------------------------------------------------- */
.foot{padding:56px 0 28px}
.foot .footgrid{grid-template-columns:1.8fr repeat(5,minmax(0,1fr));gap:34px 26px;align-items:start}
.footbrand{min-width:0}
.footbrand .logo{display:inline-flex;margin-bottom:12px}   /* .footgrid a{display:block} would stack the mark above the word */
.footbrand p{max-width:32ch;margin-bottom:0}
.footsocial{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.footsocial a{display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 12px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);color:var(--body);font-size:.82rem;font-weight:600;line-height:1}
.footsocial a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.footsocial svg{flex:none}
.footcol{min-width:0}
.footcol h4,.footcol .footcol-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 13px}
.footcol a{display:block;color:var(--body);font-size:.9rem;margin-bottom:9px;line-height:1.4}
.footcol a:hover{color:var(--brand)}
.footbarlinks{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted)}
.footbarlinks a{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.footbarlinks a:hover{color:var(--brand)}
.footbarlinks svg{flex:none}

@media (max-width:1060px){
  .foot .footgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 24px}
  .footbrand{grid-column:1/-1}
  .footbrand p{max-width:52ch}
}
@media (max-width:620px){
  .foot{padding:40px 0 24px}
  .foot .footgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .footcol a{font-size:.88rem}
  .footbar{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:360px){
  .foot .footgrid{grid-template-columns:1fr}
}

/* The "still have a question?" block that closes every legal and company
   page. It is the route to a person, so it must not read as a footnote. */
.prose .askblock{margin:44px 0 0;padding:24px 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
.prose .askblock h2{margin:0 0 10px;font-size:1.24rem}
.prose .askblock p{margin:0 0 12px}
.prose .askblock p:last-child{margin-bottom:0}
.prose .askblock .btn,.prose .askblock .ghost{margin:2px 6px 2px 0}
.prose .askblock .ghost{border-color:var(--line)}

/* ---------- Background motion ----------
   The canvas is decoration and nothing else: it sits behind everything, takes
   no clicks, and is not in the flow. If particles.js never runs, the page is
   exactly as it was — there is no rule here that hides or moves content. */
.fxcanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  opacity:.85;contain:strict}
[data-fx-host]{position:relative}
[data-fx-host]>.fxcanvas{position:absolute;z-index:0}
/* Keep the hero's own content above a section-scoped canvas. */
[data-fx-host]>.container{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.fxcanvas{display:none}}

/* --- integrations directory: logo slot and deliberate fallback tiles ---
   A tile is a monogram of ours on the vendor's published brand colour; a
   logo is a file the operator supplied, drawn inside the same square so a
   row of cards keeps one rhythm whichever a card happens to have. */
.itile{box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08)}
.itile.ilogo{background:#fff;padding:7px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .10)}
.itile.ilogo.big{padding:10px}
.itile.ilogo img{width:100%;height:100%;object-fit:contain;display:block}
@media (prefers-color-scheme:dark){
  /* Most brand kits ship a mark drawn for light backgrounds, so the slot
     keeps its white plate in dark mode rather than making the mark vanish. */
  .itile{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14)}
  .itile.ilogo{background:#f7f8fb;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .22)}
}

/* ---------------------------------------------------------------------
   /tools — the index and the individual tool pages.
   159 tools is more than anyone scans, so the head carries a live filter
   and the cards carry a mark each. Everything below is written so the page
   is complete and usable with the script switched off: the filter only
   sets [hidden], and nothing here starts at opacity 0.
   --------------------------------------------------------------------- */
.toolshead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:34px;align-items:center}
.toolshead-copy{min-width:0}
.toolshead h1{margin-bottom:10px}
.toolshead .lead{max-width:52ch}
.toolshead-art svg{width:100%;height:auto;border-radius:18px}

.toolsearch{position:relative;display:flex;align-items:center;margin:20px 0 16px;max-width:520px}
.toolsearch-ico{position:absolute;left:14px;display:flex;color:var(--muted);pointer-events:none}
.toolsearch input{width:100%;padding:13px 42px 13px 42px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);color:var(--ink);font:inherit;font-size:.98rem}
.toolsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.toolsearch input::-webkit-search-cancel-button{display:none}
.toolsearch-clear{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:0;border-radius:50%;background:var(--soft2);color:var(--muted);cursor:pointer}
.toolsearch-clear:hover{color:var(--ink)}

.toolcats{gap:8px}
.toolcats .chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--bg);
  color:var(--body);font:inherit;font-size:.86rem;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer}
.toolcats .chip:hover{border-color:var(--brand);color:var(--brand)}
.toolcats .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.toolcats .chip svg{flex:none}
.toolcats .cct{font-weight:600;opacity:.65;font-variant-numeric:tabular-nums}
.toolcount{margin:14px 0 0}

.toolsec{margin:0 0 34px}
.toolsec h2{display:flex;align-items:center;gap:10px;font-size:1.28rem;margin-bottom:14px}
.toolsec h2 svg{flex:none;color:var(--brand)}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.toolcard{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg);color:var(--body);transition:.16s}
.toolcard:hover{border-color:var(--brand);text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.toolcard-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--brand-soft);color:var(--brand)}
.toolcard-txt{display:block;min-width:0}
.toolcard-txt b{display:block;color:var(--ink);font-size:.97rem;font-weight:700;line-height:1.3;margin-bottom:3px}
.toolcard-txt span{display:block;font-size:.85rem;line-height:1.45;color:var(--muted)}
.toolsempty{padding:26px 0;color:var(--muted)}

.toolhead-row{display:flex;align-items:flex-start;gap:16px}
.toolhead-ico{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:16px;
  background:var(--brand-soft);color:var(--brand)}
.toolhead-copy{min-width:0}
.toolhead-copy h1{margin-bottom:8px}
.toolstrip{display:flex;flex-wrap:wrap;gap:9px}
.toolchip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);color:var(--body);font-size:.88rem;font-weight:600}
.toolchip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.toolchip svg{flex:none;color:var(--brand)}
.toolchip:hover svg{color:inherit}
.toolchip-all{background:var(--soft)}

@media (max-width:860px){
  .toolshead{grid-template-columns:1fr;gap:22px}
  .toolshead-art{order:-1;max-width:280px}
}
@media (max-width:520px){
  .toolshead-art{display:none}      /* the filter is the point on a phone */
  .toolgrid{grid-template-columns:1fr}
  .toolcats{gap:6px}
  .toolcats .chip{font-size:.8rem;padding:6px 11px}
  .toolhead-ico{width:48px;height:48px;border-radius:13px}
  .toolhead-ico svg{width:26px;height:26px}
}

/* Verdict marks inside a tool result (see MS_ICO in site.js) — an SVG in a
   line of running text has to sit on the baseline like a letter would. */
.toolbox .msico{vertical-align:-3px}
.toolbox .vgood{color:var(--green)}
.toolbox .vbad{color:var(--red)}

/* .pagehead centres its copy; this head is a two-column block, so the words
   line up with the search box and the grid below instead. */
.toolshead,.toolshead .lead,.toolhead{text-align:left}
.toolshead .lead{margin-left:0;margin-right:0}

/* 2026 design system — shared by every public route. */
:root{--ink:#0f172a;--body:#475569;--muted:#64748b;--line:#e2e8f0;--soft:#f6faf8;--soft2:#edf4ef;--brand:#1fb07e;--brand-dark:#0a874e;--brand-soft:#eafbf1;--radius:20px;--shadow:0 2px 5px #102c1b04,0 18px 50px #12351e09}
@media(prefers-color-scheme:dark){:root{--ink:#edf9f2;--body:#c7d7cd;--muted:#99afa2;--line:#293c32;--soft:#14241c;--soft2:#1c3025;--brand:#4ade80;--brand-dark:#1fb07e;--brand-soft:#143726}}
.container{max-width:1240px;padding-left:30px;padding-right:30px}.navrow{height:86px;gap:24px}.nav{background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom-color:color-mix(in srgb,var(--line) 65%,transparent)}.logo{font-size:1.14rem;letter-spacing:-.04em;gap:10px;white-space:nowrap}.brand-mark{flex:none;display:block}.navlinks{gap:23px;margin-left:auto}.navlinks a{font-size:14px;font-weight:550}.navcta{gap:8px}.navcta .ghost{border:0;padding:10px}.navcta .btn{padding:11px 18px}.btn,.ghost{border-radius:999px;min-height:44px}.btn{background:#1fb07e;color:#082b16;font-weight:700}.btn:hover{background:#1fb07e;color:#fff}.btn.big,.ghost.big{padding:15px 25px}.ghost{background:var(--bg)}
h1,h2{letter-spacing:-.055em;text-wrap:balance}h1{font-size:clamp(2.5rem,5vw,4.25rem);line-height:1.06}h2{font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.15}h3{letter-spacing:-.025em}h1 em,.hero h1 em{font-style:normal;color:var(--brand);background:none;-webkit-text-fill-color:currentColor}.lead{font-size:1.0625rem;line-height:1.85}.kicker,.pill{font-size:12px;letter-spacing:.08em;font-weight:700}.kicker{text-transform:uppercase}.pill{letter-spacing:0;font-size:13px;padding:7px 13px;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 15%,transparent)}.live-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#1fb07e;margin-right:7px;box-shadow:0 0 0 4px #1fb07e15}
.hero{background:linear-gradient(180deg,var(--brand-soft),transparent 85%)}.hero.lp{padding:78px 0 68px;background:radial-gradient(ellipse at 86% 46%,#1fb07e0c,transparent 58%),var(--bg)}.hero.lp .container{max-width:1240px}.lp-herogrid{grid-template-columns:1.05fr .95fr;gap:72px}.lp-herocopy h1{font-size:clamp(3rem,5.4vw,4.7rem);line-height:1.06;margin-bottom:24px}.lp-herocopy .lead{max-width:470px;margin-bottom:30px}.lp-heroticks{font-size:12px;gap:10px 16px}.hero .b1{opacity:.15}.hero .b2{background:radial-gradient(circle,#1fb07e,transparent 70%);opacity:.12}
.lp-trycard{padding:30px;border-radius:24px;box-shadow:0 30px 90px #0c482416,0 3px 12px #19351d06;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));position:relative;overflow:visible}.lp-trycard:before{content:'';position:absolute;inset:-11px;z-index:-1;border:1px solid #1fb07e16;border-radius:32px;transform:rotate(3deg)}.lp-tryhead{gap:12px;margin-bottom:24px}.lp-tryhead h2{font-size:1.35rem;letter-spacing:-.035em;margin:1px 0 4px}.lp-tryhead .small{font-size:12px}.lp-tryico{width:44px;height:44px;border-radius:13px}.lp-tryform{display:flex;flex-direction:column;gap:10px}.lp-tryform input{border-radius:12px;padding:16px;font-size:14px;background:var(--soft);width:100%}.lp-tryform button{border-radius:12px;display:flex;justify-content:center;align-items:center;gap:10px;background:#1fb07e;color:#082b16;font-size:14px;font-weight:700;padding:14px}.lp-linkpreview{margin-top:20px;padding:17px 18px;background:var(--brand-soft);border:1px dashed color-mix(in srgb,var(--brand) 28%,transparent);border-radius:12px}.lp-linkpreview>span{font-size:10px;color:var(--muted);letter-spacing:.1em;font-weight:700}.lp-linkpreview>div{display:flex;gap:10px;align-items:center;color:var(--brand);margin:8px 0;font-size:15px}.lp-linkpreview>div>b{flex:1;overflow-wrap:anywhere}.lp-linkpreview>small{font-size:10px;color:var(--muted)}.lp-trynote{border-top:1px solid var(--line);padding-top:18px;font-size:12px;gap:8px}.quickresult .u{font-size:14px}
.lp-sec{padding:80px 0}.lp-sechead{margin-bottom:40px}.lp-sechead .lead{max-width:630px;margin-bottom:0}.lp-proofsec{padding:0 0 38px}.lp-proof{padding-top:28px;padding-bottom:28px;border-top:0;gap:24px}.lp-proofitem{display:grid;grid-template-columns:40px 1fr;gap:5px 12px;align-content:start}.lp-proofitem .ico{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;background:var(--brand-soft);border-radius:11px;color:var(--brand);margin:0}.lp-proofitem h3{font-size:13px;line-height:1.4;margin:2px 0 0}.lp-proofitem p{font-size:12px;line-height:1.6}.lp-marqueesec{padding:40px 0 70px}.lp-marqueesec h2{font-size:1.55rem}.lp-marqueesec .lead{font-size:14px;margin-bottom:0}.lp-mitem{background:var(--bg);box-shadow:0 4px 12px #163e2304;font-size:14px;padding:13px 23px}
.lp-fgrid{gap:22px}.lp-fcard{padding:26px;border-radius:20px;box-shadow:0 4px 10px #13302003}.lp-fart{width:54px;height:54px;border:0;border-radius:15px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:22px}.lp-fart svg{width:28px;height:28px}.lp-fbody{padding:0}.lp-fbody h3{font-size:1.1rem}.lp-fbody p,.lp-fbody .ticks{font-size:14px;line-height:1.7}.lp-fbody .ticks li{padding-left:22px}.lp-more{font-size:13px}.lp-fcard:hover,.card:hover{border-color:color-mix(in srgb,var(--brand) 48%,var(--line));box-shadow:var(--shadow);transform:translateY(-4px)}.feature-icon{display:grid;place-items:center;width:48px;height:48px;background:var(--brand-soft);color:var(--brand);border-radius:13px;margin-bottom:20px}
.lp-stepsec{background:var(--soft);border-block:1px solid var(--line)}.lp-step{border:0;background:transparent;padding:15px 20px}.lp-stepnum{width:44px;height:44px;border-radius:50%;background:var(--bg);color:var(--brand);border:1px solid var(--line);box-shadow:0 4px 12px #173d2205;margin-bottom:24px}.lp-step h3{font-size:1rem}.lp-step p{font-size:14px}.lp-igrid{gap:14px}.lp-itile{padding:24px 12px;gap:13px;box-shadow:0 4px 12px #193b2603}.lp-itile .istat{font-size:10px}.lp-itile .itile{width:42px;height:42px}.lp-teamsec{background:var(--soft)}.lp-tabpanel{padding:42px;background:var(--bg);gap:50px;box-shadow:var(--shadow);border-radius:24px}.lp-tabpanel h3{font-size:1.8rem}.lp-tab.on{background:var(--brand-soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 25%,var(--line))}.lp-tab{font-size:14px}.statrow{padding:38px 0}.statrow b{font-size:clamp(3.25rem,5.5vw,5.5rem);line-height:1.15;letter-spacing:-.065em}.statrow span{display:block;font-size:13px;margin-top:12px}.lp-scalenotes{padding-top:10px}.lp-scalenotes p{font-size:13px;line-height:1.8}.lp-whysec{background:var(--soft)}.lp-whygrid .card{padding:28px}.lp-proofline{font-family:inherit;font-size:13px;color:var(--brand);margin-top:22px}.lp-faqwrap{max-width:850px}.faq details{border-radius:14px;background:var(--bg);padding:18px 22px}.faq summary{font-weight:600;font-size:15px}.faq details p{font-size:14px;line-height:1.85}.cta,.lp-finalcta{background:var(--brand-soft);color:var(--body);border-block:1px solid var(--line);padding:72px 0}.cta h2{color:var(--ink);max-width:800px;margin:0 auto 20px}.cta p{color:var(--body);max-width:660px;margin:0 auto 25px}.cta .btn{background:#1fb07e;color:#082b16}.cta .ghost{border-color:var(--line);color:var(--ink);background:var(--bg)}.lp-ctapoints{font-size:12px;color:var(--muted)}.foot{background:var(--bg);padding-top:64px}.footcol h4{color:var(--ink);font-size:12px}.footcol a{font-size:13px;line-height:1.6}.footbrand p{font-size:13px;line-height:1.8}
.pagehead{padding-top:70px;padding-bottom:45px}.pagehead h1{max-width:980px;margin-inline:auto}.pagehead .lead{max-width:740px}.card{padding:26px;border-radius:18px}.card p{font-size:14px;line-height:1.8}.prose{font-size:16px;line-height:1.95}.prose h2{font-size:1.85rem;margin-top:40px}.prose h3{font-size:1.2rem}.toolform,.toolout{border-radius:18px}.toolcard,.icard{border-radius:18px}.pricegrid5{gap:14px}.plan{border-radius:20px}.plan.popular{box-shadow:0 12px 40px #1fb07e18}.plan .amount{letter-spacing:-.05em}.pricetoggle{border-radius:999px}.plan ul{font-size:13px;line-height:1.8}input,select,textarea,button{font-family:inherit}button{transition:background .18s,box-shadow .18s,transform .18s}button:disabled{cursor:wait;opacity:.6}input[type=checkbox],input[type=radio]{accent-color:var(--brand)}:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 65%,transparent);outline-offset:4px}.skip-link{position:fixed;left:16px;top:-90px;z-index:500;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:8px}.skip-link:focus{top:12px}body[data-fx]{isolation:isolate}.fxcanvas{z-index:-1;opacity:1}body[data-fx]>main{position:relative;z-index:1}.reveal{transition:opacity .55s,transform .55s}
@media(max-width:1150px){.navlinks{gap:15px}.navrow{gap:16px}.logo{font-size:1rem}.navlinks a{font-size:13px}.lp-herogrid{gap:35px}.navcta .btn{padding:10px 13px}}
@media(max-width:1000px){.navlinks{display:none}.navcta{margin-left:auto}.burger{display:block}.navopen .navlinks{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg);padding:24px 30px;border-bottom:1px solid var(--line);flex-wrap:wrap}.navrow{height:74px}.lp-herogrid{grid-template-columns:1fr 1fr;gap:30px}.lp-herocopy h1{font-size:3.5rem}.lp-herocopy .ctarow{gap:8px}.lp-herocopy .btn.big,.lp-herocopy .ghost.big{padding:12px 18px;font-size:13px}.lp-trycard{padding:24px}}
@media(max-width:800px){.lp-herogrid{grid-template-columns:1fr;gap:38px}.hero.lp{padding:45px 0}.lp-herocopy h1{font-size:clamp(3rem,9vw,4.2rem)}.lp-herocopy .lead{max-width:540px}.lp-trycard{max-width:560px;width:100%}.lp-proof{grid-template-columns:1fr 1fr}.lp-fgrid{grid-template-columns:1fr 1fr}.lp-sec{padding:55px 0}.lp-proofsec{padding-top:0}.lp-tabpanel{padding:26px}.statrow{grid-template-columns:1fr 1fr;gap:30px}.ent-herogrid{grid-template-columns:1fr}.pagehead{padding-top:45px}.lp-marqueesec{padding:35px 0}}
@media(max-width:540px){.container{padding-left:20px;padding-right:20px}.navrow{gap:10px}.navcta .ghost{display:none}.navcta .btn{font-size:12px;padding:9px 12px;min-height:38px}.logo{font-size:14px}.brand-mark{width:30px;height:30px}.burger{padding:4px}.lp-herocopy .ctarow{flex-direction:row;align-items:center}.lp-herocopy .ctarow .btn,.lp-herocopy .ctarow .ghost{width:auto;flex:1;font-size:12px;padding:12px}.lp-fgrid{grid-template-columns:1fr}.lp-proof{gap:25px 16px}.lp-proofitem{grid-template-columns:1fr}.lp-proofitem .ico{grid-row:auto;margin-bottom:7px}.lp-proofitem p{font-size:11px}.lp-trycard{padding:23px}.lp-tryhead h2{font-size:1.2rem}.lp-heroticks{font-size:11px}.lp-tabpanel{gap:24px}.lp-steps{grid-template-columns:1fr}.lp-step{padding:14px 0}.lp-fcard{padding:24px}.lp-linkpreview{padding:14px}.lp-linkpreview>div{font-size:13px}h1{font-size:2.6rem}.split{grid-template-columns:1fr}.grid3,.cards{grid-template-columns:minmax(0,1fr)}.prose{overflow-wrap:anywhere}.foot .footgrid{gap:30px 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

.togglerow{gap:24px;flex-wrap:wrap}.currency-control{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.currency-control select{border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);padding:11px 16px;font-size:13px}.plan.tier{border-radius:19px;padding:26px 20px;box-shadow:0 3px 15px #153b2103}.plan.tier h2{font-size:18px}.plan .price{font-size:2.7rem;letter-spacing:-.055em}.plan .price span{font-size:12px;letter-spacing:0}.plan.featured{border:2px solid #1fb07e;box-shadow:0 15px 40px #1fb07e14}.plan.featured .badge{background:#1fb07e;color:#082b16;border-radius:8px;font-size:10px;letter-spacing:.06em}.plan .small{font-size:11px}.plan .ticks{font-size:12px}.plan .ticks li{line-height:1.8}.pricegrid5{margin:35px 0}.segtoggle{border-radius:999px}.itile.ilogo{background:#fff!important;box-shadow:none;padding:6px}.itile.ilogo img{width:100%;height:100%;object-fit:contain}.itile{border-radius:12px}

.tools-library{display:flex;align-items:center;gap:16px;margin:0 0 26px}.tools-library>span{color:var(--muted);font-size:12px}.tools-library .ghost{font-size:13px}.tools-library .ghost[aria-pressed=true]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}.toolcard-shell{position:relative;min-width:0}.toolcard-shell:has(>.toolcard[hidden]){display:none}.toolcard-shell>.toolcard{height:100%;padding-right:43px}.tool-save{position:absolute;right:11px;top:14px;display:grid;place-items:center;width:30px;height:30px;border:0;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer}.tool-save:hover{background:var(--brand-soft);color:var(--brand)}.tool-save[aria-pressed=true]{color:var(--brand);background:var(--brand-soft)}.tool-save[aria-pressed=true] svg{fill:currentColor}.tools-recent{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:32px}.tools-recent>span{font-size:12px;color:var(--muted);margin-right:8px}.tools-recent .chip{font-size:12px;background:var(--bg)}@media(max-width:540px){.tools-library{align-items:flex-start;flex-direction:column;gap:8px}}

body.plain{flex-direction:column;align-items:center;gap:26px;min-height:100vh;background:var(--soft)}.utility-brand{position:relative;z-index:1;margin-bottom:8px}body.plain>.card,body.plain>.share-wrap{position:relative;z-index:1}body.plain>.fxcanvas{z-index:0}

/* Screenshot reference system: Plus Jakarta Sans, teal, neutral slate. */
:root{--font:'Plus Jakarta Sans',Arial,sans-serif;--ink:#0f172a;--body:#475569;--muted:#64748b;--line:#e2e8f0;--bg:#fff;--soft:#f8fafc;--soft2:#f1f5f9;--brand:#1fb07e;--brand-dark:#0a874e;--brand-soft:#e8f7f2;--radius:14px}
body{font-family:var(--font);font-size:16px;color:var(--body)}
button,input,select,textarea{font-family:inherit}
h1,h2,h3{font-weight:700;letter-spacing:-.025em}h1{line-height:1.1}h2{line-height:1.2;letter-spacing:-.02em}
a{color:var(--brand-dark)}.kicker{color:var(--brand-dark)}
.btn,.ghost,.lp-tryform button{border-radius:10px;font-weight:600}.btn,.lp-tryform button{background:var(--brand);color:#fff}.btn:hover,.lp-tryform button:hover{background:var(--brand-dark);color:#fff}
.btn.big,.ghost.big{padding:16px 32px;font-size:16px}.navcta .btn{font-size:14px;padding:10px 24px;border-radius:8px}.navcta .open-dashboard{border:1px solid var(--brand);padding:10px 22px;color:var(--brand-dark);border-radius:8px}
.navrow{max-width:1800px;height:84px;gap:28px}.navlinks{margin:auto;gap:28px}.navlinks a{font-size:14px;font-weight:500;color:var(--body)}.navlinks a.on{color:var(--brand-dark)}.logo{font-size:21px;letter-spacing:-.04em}.logo .brand-mark{width:38px;height:38px}
.container{max-width:1240px}.hero.lp{background:#fff;padding:96px 0 80px}.hero.lp .container{max-width:1460px}.lp-herogrid{gap:70px;grid-template-columns:1.05fr 1fr;align-items:center}
.lp-herocopy h1{font-size:clamp(38px,4.25vw,56px);line-height:1.15;letter-spacing:-.025em;min-height:2.3em}.lp-herocopy .lead{font-size:19px;line-height:1.7;max-width:620px}.typewrap{display:inline-flex;align-items:center;min-height:1.18em;max-width:100%}.typewrap em{white-space:normal}.cursor{font-weight:400;color:var(--brand);animation:cursorBlink 1s steps(1) infinite}@keyframes cursorBlink{50%{opacity:0}}
.lp-herocopy .pill{background:none;border:0;padding:0;color:var(--brand-dark);margin-bottom:20px;letter-spacing:0;font-size:14px}.lp-heroticks{font-size:13px}.hero .blob{display:none}
.lp-trycard{padding:32px;border-color:var(--line);border-radius:22px;box-shadow:0 3px 7px #0f172a08,0 20px 40px #0f172a08}.lp-trycard:before{display:none}.lp-tryhead h2{font-size:24px;letter-spacing:-.025em}.lp-tryhead p{display:none}.lp-tryico{background:none;width:auto}.lp-tryform{flex-direction:row;gap:12px}.lp-tryform input{flex:1;min-width:0;font-size:16px;padding:16px}.lp-tryform button{padding:16px 24px;font-size:16px}.lp-linkpreview{background:var(--soft);border:1px solid var(--line);padding:18px}.lp-linkpreview>span{font-size:12px;font-weight:500;letter-spacing:0}.lp-linkpreview small{font-size:12px}.lp-trynote{font-size:13px}.lp-trynote li:nth-child(1){display:none}
.lp-sec{padding:80px 0}.lp-sechead h2{font-size:clamp(30px,3.4vw,44px);font-weight:700}.lp-sechead .lead{font-size:18px;line-height:1.65}.lp-proofsec{padding:20px 0 38px;border-top:1px solid var(--line)}.lp-proofitem h3{font-size:15px}.lp-proofitem p{font-size:13px}.lp-marqueesec{padding:36px 0 60px}.lp-mitem svg{flex:none;color:var(--brand)}
.lp-fgrid{gap:24px}.lp-fcard{padding:0;border-radius:16px;overflow:hidden;box-shadow:none}.lp-fart{width:100%;height:134px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;border-radius:0;padding:16px 22px;position:relative;overflow:hidden}.lp-fcard:nth-child(6n+2) .lp-fart{background:#eaf0fd}.lp-fcard:nth-child(6n+3) .lp-fart{background:#f1ebfa}.lp-fcard:nth-child(6n+4) .lp-fart{background:#edf1f5}.lp-fcard:nth-child(6n+6) .lp-fart{background:#fdf3e8}.lp-fbody{padding:26px}.lp-fbody h3{font-size:18px}.lp-fbody p{font-size:15px;line-height:1.7}.lp-fbody .ticks{font-size:13px}.lp-more{font-size:14px;font-weight:500}.lp-fcard:hover,.card:hover{transform:translateY(-3px)}
.mini-browser{display:block;background:#fff;border:1px solid #cfdae3;border-radius:12px;width:100%;max-width:330px;padding:10px 14px;box-shadow:0 2px 3px #0f172a04;color:#334155}.mini-dots{display:flex;gap:4px;margin-bottom:10px}.mini-dots i{width:6px;height:6px;background:#e78880;border-radius:50%}.mini-dots i:nth-child(2){background:#e6bd65}.mini-dots i:nth-child(3){background:#5dbba1}.mini-address{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:9px 3px;background:#f1f5f9;font-size:14px;white-space:nowrap}.mini-address b{color:#0a874e}.mini-address svg{width:16px;height:16px}.mini-browser code{display:block;font-size:12px;background:transparent;white-space:nowrap;padding:0;color:#334155}.mini-browser code b{color:#0a874e}.mini-analytics{width:100%;position:relative}.lp-fart .mini-analytics svg{width:100%;height:94px}.mini-label{font-size:10px;color:#426958;position:relative;margin-top:8px;text-align:center;display:block}.mini-avatars{display:flex;align-items:center;justify-content:center;padding:0 18px}.mini-avatars i{display:grid;place-items:center;border-radius:50%;width:64px;height:64px;background:#9b78d9;border:3px solid #fff;color:#fff;font:700 21px var(--font);margin-left:-12px}.mini-avatars i:nth-child(2){background:#6294e0}.mini-avatars i:nth-child(3){background:#1fb07e}.mini-qr{width:104px;height:104px;background:white;padding:5px;border:1px solid #d8e1e9;border-radius:10px}.mini-folders{display:flex;gap:4px;font-size:9px}.mini-folders>span{padding:1px 10px;border-radius:4px 4px 0 0;background:#edf4fb}.mini-folders>span:first-child{background:#f8e9d3}.mini-folders>span:last-child{background:#ece3fa}.mini-linkrow{display:flex;align-items:center;gap:6px;font-size:9px;padding:4px;border-bottom:1px solid #edf1f6}.mini-linkrow svg{height:12px;width:12px}.mini-linkrow b{font-weight:500;flex:1}.mini-linkrow i{font-style:normal;color:#64748b;border:1px solid #d6e3e0;border-radius:5px;padding:0 5px}
.lp-teamsec{background:#fff}.lp-tabpanel:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;align-items:center;padding:36px 20px;border:0;background:none;box-shadow:none}.team-visual{grid-row:1/3}.team-visual img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:16px}.lp-tabcopy h3{font-size:28px}.lp-tabcopy .lead{font-size:17px;line-height:1.7}.lp-tabticks{grid-column:2;font-size:15px;margin:0}.lp-tabcopy .btn{margin-top:8px}.lp-tablist{background:#f5f6f7;padding:5px;border-radius:12px;gap:2px}.lp-tab{font-size:14px;font-weight:500;border-radius:9px}.lp-tab.on{background:#fff;color:var(--brand-dark);box-shadow:0 2px 4px #0f172a12}.lp-scale{background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px 16px}.lp-scale>div{border:0;border-right:1px solid var(--line);border-radius:0;padding:12px}.lp-scale>div:last-child{border:0}.lp-scale b{color:var(--ink);font-size:48px;letter-spacing:-.035em}.lp-scale span{font-size:14px}.lp-scalesec{background:var(--soft)}.lp-scalenotes{font-size:13px}
.pricegrid5{gap:16px}.plan.tier{padding:24px 20px;border-radius:14px;box-shadow:none;min-width:0}.plan.tier h2{font-size:20px}.plan.tier .price{font-size:30px}.plan.tier .price span{font-size:13px}.plan.tier.featured{background:var(--bg);border:1px solid var(--brand);box-shadow:0 8px 20px #1fb07e0b;transform:none}.plan .badge{background:var(--brand);color:#fff;border-radius:15px;font-size:10px;padding:4px 16px;letter-spacing:0}.tier-includes{font-size:10px;text-transform:uppercase;letter-spacing:.02em;margin:24px 0 12px;padding-top:20px;border-top:1px solid var(--line)}.tier-highlights{padding:12px 10px!important;background:#effbf5;border:1px solid #c7ebdc;border-radius:8px;font-size:12px!important}.tier-limits{font-size:12px!important}.tier-limits b{font-weight:600}.plan.tier .ticks li{margin:8px 0;line-height:1.65}.plan.tier .ghost{border-radius:9px;background:#fff;font-weight:600;font-size:12px}.plans .togglerow{margin-bottom:38px}
.feature-showcase{margin-bottom:80px}.showcase-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px;background:var(--soft);border-radius:14px}.showcase-tabs button{display:flex;align-items:center;gap:9px;border:0;border-radius:10px;padding:14px 18px;background:transparent;color:var(--body);font:500 14px var(--font);cursor:pointer}.showcase-tabs button.on{background:#fff;color:var(--brand-dark);box-shadow:0 2px 6px #0f172a12}.showcase-tabs svg{width:19px;height:19px}.showcase-panel:not([hidden]){display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:56px 30px;background:#fff}.showcase-panel h2{font-size:30px}.showcase-panel p{font-size:17px;line-height:1.8}.showcase-art{background:#eff9f5;border-radius:22px;min-height:250px;padding:40px;display:grid;place-items:center}.showcase-art>.mini-analytics{width:100%}.showcase-art svg{width:100%}.showcase-art .mini-browser{transform:scale(1.1)}.transform-banner{margin:60px 0;padding:55px 35px;text-align:center;background:#effaf5;border:1px solid #dbefe4;border-radius:24px}.transform-banner>p{max-width:670px;margin:20px auto 26px}.transform-points{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;margin-top:40px}.transform-points span{display:flex;align-items:center;gap:12px;font-size:13px}.transform-points svg{background:#dcf4ed;color:#1fb07e;box-sizing:content-box;padding:10px;border-radius:10px}.transform-points span:nth-child(2) svg{background:#e5edff;color:#628ee0}.transform-points span:nth-child(3) svg{background:#f0e7fe;color:#9b78d9}.transform-points span:nth-child(4) svg{background:#fff0dc;color:#e9a245}
.editorial-cover{display:block;position:relative;background:var(--cover);width:100%;height:100%;min-height:220px;overflow:hidden;border-radius:0;padding:8px 0 28px}.editorial-cover>svg{width:100%;height:170px;display:block}.editorial-cover .cover-caption{display:block;position:absolute;bottom:25px;left:20px;right:20px;font-size:12px;line-height:1.3;font-weight:700;color:#173a3b;text-align:left}.cover-index{position:absolute;bottom:9px;left:20px;color:#44605a;font-size:8px;letter-spacing:.08em}.post.card{border-radius:16px;overflow:hidden}.post .cardart{padding:0;aspect-ratio:auto}.post .kicker{font-size:11px}.post h3{font-size:18px;line-height:1.35}
@media(max-width:1100px){.navrow{gap:16px}.navlinks{gap:16px}.logo{font-size:17px}.lp-herogrid{gap:35px}.lp-herocopy h1{font-size:44px}.lp-tryform{flex-direction:column}.pricegrid5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.hero.lp{padding:55px 0}.lp-herogrid{grid-template-columns:1fr;gap:36px}.lp-herocopy .lead{font-size:17px}.lp-tryform{flex-direction:row}.lp-sechead h2{font-size:32px}.navrow{height:72px}.lp-sec{padding:55px 0}.lp-tabpanel:not([hidden]){grid-template-columns:1fr;padding:20px 0;gap:20px}.team-visual{grid-row:auto}.lp-tabticks{grid-column:auto}.lp-tabcopy{order:1}.lp-tabticks{order:2}.showcase-panel:not([hidden]){grid-template-columns:1fr;padding:24px 0;gap:28px}.lp-scale b{font-size:34px}.lp-scale{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.lp-scale>div:nth-child(2){border:0}.pricegrid5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.container{padding-left:20px;padding-right:20px}.lp-herocopy h1{font-size:36px;min-height:3.45em}.lp-trycard{padding:22px}.lp-tryform{flex-direction:column}.navcta .ghost{padding:8px;font-size:12px}.navcta .btn{padding:9px 12px;font-size:12px}.logo{font-size:15px}.navrow{gap:8px}.logo .brand-mark{width:30px;height:30px}.lp-fgrid,.pricegrid5{grid-template-columns:1fr}.showcase-tabs button{padding:10px;font-size:12px}.transform-points{display:grid;grid-template-columns:1fr 1fr;gap:16px}.transform-points span{flex-direction:column}.lp-scale span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.cursor{animation:none}.lp-fcard,.card{transition:none}}

@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/fonts/plus-jakarta-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/fonts/plus-jakarta-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/fonts/plus-jakarta-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

.ent-land path{fill:#d5e9e4;stroke:#fff;stroke-width:.55;stroke-linejoin:round}.ent-land path:nth-child(5n){fill:#bddfd5}.ent-land path:nth-child(5n+1){fill:#dceee8}.ent-mapfig svg{overflow:hidden;background:#f8fcfb;border-radius:18px}.scale-controls{display:flex;justify-content:center;gap:8px;margin:22px 0 14px}.scale-controls button{font:500 13px var(--font);padding:10px 18px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--body);cursor:pointer}.scale-controls button[aria-pressed=true]{background:var(--brand-soft);color:var(--brand-dark);border-color:var(--brand)}.scale-source{text-align:center;font-size:13px;color:var(--muted);margin-bottom:18px}

.activity-label{display:inline-flex;padding:10px 20px;background:#e9f7f2;color:#08705d;border-radius:99px;font-weight:650}.currency-note{margin:16px auto;text-align:center}.pricing-search{display:flex;align-items:center;gap:14px;margin:20px 0}.pricing-search input{max-width:380px;width:100%}.pricegrid5{align-items:stretch}.tier-highlights{min-height:180px}table.cmp tr[hidden]{display:none}@media(max-width:640px){.pricing-search{flex-direction:column;align-items:flex-start}}

/* Pricing details stay compact at first glance. The up chevron mirrors the
   referenced price list and rotates when the customer collapses a plan. */
.tier-more{margin-top:18px;border-top:1px solid var(--line)}
.tier-more>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 2px 4px;cursor:pointer;list-style:none;color:var(--ink);font-size:12px;font-weight:700}
.tier-more>summary::-webkit-details-marker{display:none}
.tier-up{flex:none;transition:transform .18s ease}
.tier-more:not([open]) .tier-up{transform:rotate(180deg)}
.tier-plan{padding-top:7px}
.tier-more .tier-highlights{min-height:0;margin-top:0}

/* Keep miniature product screenshots readable inside the landing feature
   cards even when translated copy or a narrow viewport wraps a line. */
.lp-fart{height:164px}
.mini-browser{min-height:96px;box-sizing:border-box;overflow:hidden}
.mini-browser code{white-space:normal;overflow-wrap:anywhere;line-height:1.55}
.mini-code-line{display:block;min-width:0}
.mini-folders{overflow:hidden;white-space:nowrap}
.mini-linkrow{min-height:25px;box-sizing:border-box;overflow:hidden}
.mini-linkrow b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.feature-description{display:block;font-size:12px;font-weight:400;color:var(--muted);line-height:1.55;margin-top:5px;max-width:430px}

/* The feature cloud sits immediately before Questions. Four independent,
   seamless rows keep the inventory moving without creating duplicate keyboard
   stops. Hovering or focusing pauses every row for comfortable reading. */
.lp-capabilities{padding:86px 0 78px;overflow:hidden;background:var(--bg)}
.lp-capabilities .lp-sechead{margin-bottom:36px}
.lp-capabilities .lp-sechead h2{font-size:clamp(2.35rem,4.7vw,4rem);margin-bottom:13px}
.lp-capabilities .lp-sechead .lead{font-size:18px}
.lp-caprows{display:grid;gap:14px}
.lp-caprow{position:relative;overflow:hidden;padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.lp-captrack{display:flex;align-items:center;gap:14px;width:max-content;animation:lpCapabilityLoop 58s linear infinite;will-change:transform}
.lp-caprow.reverse .lp-captrack{animation-direction:reverse;animation-duration:64s}
.lp-caprow:nth-child(3) .lp-captrack{animation-duration:70s}
.lp-caprow:nth-child(4) .lp-captrack{animation-duration:62s}
.lp-caphalf{display:flex;align-items:center;gap:14px}
.lp-capitem{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;min-height:52px;padding:12px 22px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--body);box-shadow:0 3px 12px #0f172a05;font-size:15px;font-weight:500;white-space:nowrap}
.lp-capmark{display:grid;place-items:center;min-width:24px;height:24px;color:var(--brand-dark);font-size:17px;font-weight:700;font-family:var(--font),"Segoe UI Emoji","Apple Color Emoji",sans-serif}
.lp-caprows:hover .lp-captrack,.lp-caprows:focus-within .lp-captrack{animation-play-state:paused}
@keyframes lpCapabilityLoop{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media(max-width:800px){.lp-capabilities{padding:60px 0}.lp-capabilities .lp-sechead h2{font-size:clamp(2rem,8vw,3rem)}.lp-capitem{min-height:46px;padding:10px 17px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.lp-captrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center;padding-inline:20px}.lp-caphalf{display:none}.lp-caprow{-webkit-mask-image:none;mask-image:none}.lp-capitem{white-space:normal}}
/* Developer portal --------------------------------------------------- */
.dev-shell{--dev-line:#e2e8f0;--dev-ink:#0f172a;--dev-muted:#64748b;display:grid;grid-template-columns:248px minmax(0,1fr) 210px;max-width:1600px;margin:0 auto;min-height:calc(100vh - 72px);background:#fff;color:var(--dev-ink)}
.dev-sidebar{position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid var(--dev-line);padding:24px 18px;background:#f8fafc;z-index:4}
.dev-home{display:flex;align-items:center;gap:10px;color:var(--dev-ink);text-decoration:none;margin:0 6px 26px;font-size:17px}.dev-home span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;font-size:12px;font-weight:900}.dev-home b{font-weight:800}
.dev-search{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;margin-bottom:18px;color:#64748b}.dev-search input,.dev-referencebar input{width:100%;border:0;outline:0;background:transparent;font:inherit;color:var(--dev-ink)}
.dev-sidebar nav{display:grid;gap:3px}.dev-sidebar nav a{padding:9px 11px;border-radius:8px;color:#475569;text-decoration:none;font-size:14px}.dev-sidebar nav a:hover,.dev-sidebar nav a.on{background:#dcfce7;color:#067647;font-weight:700}.dev-sidebar nav h4{margin:22px 11px 6px;color:#94a3b8;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.dev-sidefoot{display:flex;align-items:center;gap:7px;margin:30px 10px 0;color:#64748b;font-size:12px}.dev-sidefoot a{margin-left:auto;color:#475569}.dev-statusdot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #dcfce7}
.dev-article{min-width:0;padding:54px clamp(28px,5vw,78px) 100px}.dev-head{max-width:820px;padding-bottom:34px;border-bottom:1px solid var(--dev-line);margin-bottom:36px}.dev-head>span,.dev-kicker{display:inline-block;color:#07835f;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:11px}.dev-head h1{font-size:clamp(36px,5vw,58px);line-height:1.05;letter-spacing:-.04em;margin:0 0 14px}.dev-head p{font-size:19px;color:var(--dev-muted);line-height:1.6;margin:0;max-width:760px}
.dev-prose{max-width:900px}.dev-prose h2{scroll-margin-top:24px;margin:48px 0 12px;font-size:26px;letter-spacing:-.025em}.dev-prose p,.dev-prose li{color:#475569;line-height:1.75}.dev-prose ul,.dev-prose ol{padding-left:22px}.dev-prose code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em}.dev-prose p code,.dev-prose li code,.dev-table code{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:5px;padding:2px 5px;color:#0f766e}.dev-prose>pre,.dev-code pre,.dev-hero-code pre{margin:0;background:#0b1220;color:#dbeafe;padding:20px;border-radius:0 0 12px 12px;overflow:auto;line-height:1.65;font-size:13px}.dev-prose>pre{border-radius:12px;margin:14px 0}
.dev-code{border:1px solid #1e293b;border-radius:12px;overflow:hidden;background:#0b1220;margin:18px 0}.dev-code-tabs{display:flex;gap:2px;padding:7px 8px;background:#111c2e;border-bottom:1px solid #25324a}.dev-code-tabs button{border:0;background:transparent;color:#94a3b8;border-radius:6px;padding:7px 11px;text-transform:capitalize;cursor:pointer}.dev-code-tabs button.on{background:#26334a;color:#fff}.dev-code pre[hidden]{display:none}
.dev-callout{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:17px 19px;border:1px solid #99f6e4;border-left:4px solid #14b8a6;border-radius:10px;background:#f0fdfa;margin:20px 0}.dev-callout b{color:#115e59}.dev-callout span{color:#475569}.dev-callout.warn{border-color:#fde68a;border-left-color:#f59e0b;background:#fffbeb}.dev-callout.warn b{color:#92400e}
.dev-tablewrap{overflow:auto;border:1px solid var(--dev-line);border-radius:10px;margin:16px 0}.dev-table{width:100%;border-collapse:collapse;font-size:14px}.dev-table th,.dev-table td{padding:12px 14px;border-bottom:1px solid var(--dev-line);text-align:left;vertical-align:top}.dev-table th{background:#f8fafc;color:#475569;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.dev-table tr:last-child td{border-bottom:0}
.dev-next,.dev-toolgrid,.dev-resources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}.dev-next a,.dev-tool,.dev-resource{position:relative;border:1px solid var(--dev-line);border-radius:12px;padding:18px;text-decoration:none;background:#fff}.dev-next a{display:grid;gap:6px;color:var(--dev-ink)}.dev-next span,.dev-tool p,.dev-resource p{color:var(--dev-muted);line-height:1.55;margin:0}.dev-next i{position:absolute;right:16px;top:16px;font-style:normal;color:var(--brand)}.dev-tool code{display:inline-block;color:#047857;font-weight:800;margin-bottom:8px}.dev-plans{display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:8px;margin:16px 0}.dev-plans>div{display:flex;flex-direction:column;gap:5px;padding:13px;border:1px solid #dbe4eb;background:#fff;border-radius:9px}.dev-plans b{font-size:14px}.dev-plans span{font-size:13px;color:#047857;font-weight:700}.dev-plans small{color:#64748b}
.dev-toc{position:sticky;top:28px;align-self:start;padding:36px 20px;display:grid;gap:9px;color:#64748b;font-size:12px;max-height:calc(100vh - 56px);overflow:auto}.dev-toc b{color:#0f172a;margin-bottom:5px}.dev-toc a{color:#64748b;text-decoration:none;line-height:1.45}.dev-toc a:hover{color:#047857}.dev-toc hr{border:0;border-top:1px solid var(--dev-line);width:100%;margin:12px 0}.dev-mobilebar{display:none}
.dev-overview-main{min-width:0;padding:50px clamp(24px,5vw,72px) 100px}.dev-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:55px;align-items:center;padding:40px 0 64px}.dev-hero h1{font-size:clamp(48px,6.5vw,86px);line-height:.96;letter-spacing:-.065em;margin:0 0 22px;max-width:750px}.dev-hero>p{font-size:20px;color:#64748b;line-height:1.65;max-width:660px}.dev-hero .ghost{margin-left:8px}.dev-hero-code{min-width:0;border-radius:16px;overflow:hidden;background:#0b1220;box-shadow:0 26px 70px #0f172a28}.dev-hero-code>div{display:flex;align-items:center;gap:6px;padding:13px 16px;background:#111c2e;color:#94a3b8;font:12px ui-monospace,monospace}.dev-hero-code i{width:8px;height:8px;border-radius:50%;background:#fb7185}.dev-hero-code i:nth-child(2){background:#fbbf24}.dev-hero-code i:nth-child(3){background:#34d399}.dev-hero-code span{margin-left:8px}.dev-hero-code pre{border-radius:0;padding:24px;min-height:230px}
.dev-overview-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--dev-line);border-radius:14px;overflow:hidden;margin-bottom:52px}.dev-overview-stats div{padding:22px;border-right:1px solid var(--dev-line);display:grid;gap:3px}.dev-overview-stats div:last-child{border:0}.dev-overview-stats b{font-size:28px}.dev-overview-stats span{color:#64748b;font-size:13px}.dev-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.dev-overview-grid>a{border:1px solid var(--dev-line);border-radius:14px;padding:24px;color:#0f172a;text-decoration:none;transition:.18s}.dev-overview-grid>a:hover{transform:translateY(-3px);border-color:#5eead4;box-shadow:0 14px 35px #0f172a0c}.dev-overview-grid i{display:grid;place-items:center;width:42px;height:42px;background:#ecfdf5;border-radius:10px;color:#047857;font-style:normal;font-weight:900}.dev-overview-grid h2{font-size:20px;margin:20px 0 8px}.dev-overview-grid p{color:#64748b;line-height:1.6;min-height:78px}.dev-overview-grid span,.dev-resource i{color:#047857;font-style:normal;font-weight:700;font-size:13px}.dev-planband{margin-top:55px;padding:34px;border-radius:18px;background:#ecfdf5;display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center}.dev-planband h2{font-size:28px;margin:5px 0 10px}.dev-planband p{color:#475569;line-height:1.6}
.dev-referencebar{display:flex;gap:12px;align-items:center;margin:0 0 22px}.dev-referencebar label{display:flex;align-items:center;gap:8px;flex:1;padding:11px 13px;border:1px solid #cbd5e1;border-radius:10px}.dev-referencebar>a{padding:11px 13px;border:1px solid #cbd5e1;border-radius:10px;color:#0f766e;text-decoration:none;white-space:nowrap}.dev-resources{grid-template-columns:repeat(2,minmax(0,1fr))}.dev-resource{color:#0f172a;display:block}.dev-resource:hover{border-color:#5eead4}.dev-resource>span{color:#64748b;font-size:12px}.dev-resource h2{margin:8px 0;font-size:20px}.dev-resource i{display:block;margin-top:15px}
.dev-endpoints{display:grid;gap:18px}.dev-endpoint{border:1px solid var(--dev-line);border-radius:12px;padding:22px;background:#fff;scroll-margin-top:18px}.dev-endpoint>header{display:flex;align-items:center;gap:9px;padding:10px;background:#f8fafc;border-radius:8px;overflow:auto}.dev-endpoint>header>code:nth-child(2){color:#334155;white-space:nowrap}.dev-endpoint>header button{margin-left:auto;border:1px solid #cbd5e1;background:#fff;border-radius:6px;padding:6px 9px;color:#475569;cursor:pointer}.dev-endpoint h2{margin:20px 0 7px;font-size:20px}.method{padding:5px 8px;border-radius:5px;font-size:11px;font-weight:900;letter-spacing:.04em}.method.get{color:#075985;background:#e0f2fe}.method.post{color:#047857;background:#d1fae5}.method.put,.method.patch{color:#92400e;background:#fef3c7}.method.delete{color:#b91c1c;background:#fee2e2}.dev-endpoint details{border-top:1px solid var(--dev-line);padding-top:12px;margin-top:14px}.dev-endpoint summary{cursor:pointer;font-weight:700;color:#334155}.dev-endpoint summary span{font-size:11px;background:#e2e8f0;padding:2px 6px;border-radius:10px}.dev-responses{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.dev-responses span{padding:8px 11px;border:1px solid var(--dev-line);border-radius:7px;color:#64748b}.dev-responses b{color:#047857;margin-right:4px}.dev-release{padding:0 0 34px;border-bottom:1px solid var(--dev-line)}.dev-release time{color:#047857;font-size:12px;font-weight:800}.dev-release h2{margin-top:7px}
[data-dev-search-item][hidden]{display:none!important}
@media(max-width:1180px){.dev-shell{grid-template-columns:230px minmax(0,1fr)}.dev-toc{display:none}.dev-overview-grid{grid-template-columns:repeat(2,1fr)}.dev-hero{grid-template-columns:1fr}.dev-hero-code{max-width:720px}.dev-planband{grid-template-columns:1fr}.dev-plans{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.dev-shell{display:block}.dev-sidebar{position:fixed;left:0;top:0;width:min(86vw,300px);transform:translateX(-105%);transition:.2s;box-shadow:12px 0 35px #0f172a26}.dev-shell.navopen .dev-sidebar{transform:none}.dev-mobilebar{display:flex;align-items:center;justify-content:space-between;margin:-28px -8px 30px}.dev-mobilebar a{font-weight:800;color:#0f172a;text-decoration:none}.dev-mobilebar button{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:7px 10px}.dev-article,.dev-overview-main{padding:36px 20px 70px}.dev-head h1{font-size:38px}.dev-head p{font-size:17px}.dev-next,.dev-toolgrid,.dev-resources,.dev-overview-grid{grid-template-columns:1fr}.dev-overview-stats{grid-template-columns:repeat(2,1fr)}.dev-overview-stats div:nth-child(2){border-right:0}.dev-overview-stats div:nth-child(-n+2){border-bottom:1px solid var(--dev-line)}.dev-plans{display:flex;overflow:auto}.dev-plans>div{min-width:145px}.dev-hero h1{font-size:52px}.dev-hero .ghost{margin:8px 0 0}.dev-referencebar{align-items:stretch;flex-direction:column}}

/* Developer portal: keep code readable and let the document own page scrolling. */
.dev-prose pre code,
.dev-code pre code,
.dev-hero-code pre code{
  display:block;
  min-width:max-content;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent!important;
  color:#e7eef9!important;
  -webkit-text-fill-color:#e7eef9;
  font-weight:500;
  white-space:pre;
  text-shadow:0 0 1px #e7eef944;
}
.dev-prose pre code::selection,
.dev-code pre code::selection,
.dev-hero-code pre code::selection{
  background:#0f766e;
  color:#fff;
  -webkit-text-fill-color:#fff;
}
html:has(.dev-shell){overflow-y:auto!important;scrollbar-gutter:stable}
body:has(.dev-shell){height:auto!important;min-height:100%;overflow-y:visible!important}
body:has(.dev-shell) main.wide{min-height:calc(100vh - 66px);overflow:visible}
.dev-shell{height:auto;overflow:visible;align-items:start}
.dev-sidebar{top:66px;height:calc(100vh - 66px);max-height:calc(100vh - 66px);overscroll-behavior-y:contain}
.dev-toc{top:94px;max-height:calc(100vh - 122px)}
@media(max-width:760px){
  .dev-sidebar{top:0;height:100dvh;max-height:100dvh;overflow-y:auto}
}

/* Feature upgrades use the upward SVG arrow shown in the plan reference. */
.plan.tier .tier-highlights li::before{content:'';width:18px;height:20px;top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 17V3m-6 6 6-6 6 6' stroke='%2325aa88' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 20px no-repeat}


/* Developer navigation stays usable on phones and after searches. */
.dev-sidebar [hidden],.dev-shell [data-dev-search-item][hidden]{display:none!important}
.dev-nav-close{display:none}.dev-search-status{font-size:12px;color:#475569;margin:8px 0}
.dev-sidebar{display:flex;flex-direction:column;box-sizing:border-box}.dev-sidebar nav{flex:1;min-height:0;overflow-y:auto;max-height:none!important;overscroll-behavior:contain}.dev-sidefoot{flex-shrink:0}
@media(max-width:760px){.dev-sidebar{visibility:hidden;z-index:100}.dev-shell.navopen .dev-sidebar{visibility:visible}.dev-nav-close{display:block;align-self:flex-end;border:1px solid #cbd5e1;background:white;color:#234;padding:8px;border-radius:6px;margin-bottom:12px}.dev-mobilebar{margin-bottom:16px}.dev-overview-main .dev-mobilebar{padding:14px 20px}}

/* ---------- Wide tables on a phone ----------
   A comparison table is wider than a phone by nature, so it lives in its own
   horizontal scroller. Without overscroll containment that swipe chains out of
   the table once it reaches the end, and the browser treats it as a page-level
   horizontal drag or a back gesture — which reads as "the whole page scrolls
   sideways". Containing it keeps the gesture inside the table.
   The narrow-screen rules below only make the existing columns fit better;
   nothing moves, changes colour or is hidden. */
.tablewrap{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  /* 210px of a 390px screen went to the feature name, leaving barely one
     value column visible next to it. */
  .matrix td.sticky,.matrix th.sticky{min-width:132px}
  table.cmp.wide th.sticky,table.cmp.wide td.sticky{min-width:132px}
  table.cmp th,table.cmp td,table.matrix th,table.matrix td{padding:10px 9px}
  table.cmp,table.matrix{font-size:.84rem}
}
@media (max-width:760px){
  /* The header row is deliberately not sticky on a phone (see the rule above
     that sets it static). The first column's header kept `top:66px` from the
     desktop rule, so it detached from its own row and floated over the body
     of the table once the page scrolled. Left-sticky only down here. */
  table.cmp th.sticky,table.matrix th.sticky{top:auto}
}

/* ---------------------------------------------------------------------
   Touch ergonomics for the public site. The mobile menu button and the
   filter chips (Tools, Integrations) are 28–35px tall — under the 40px a
   finger needs. Raised only where a finger is tapping; a mouse sees no
   change.
   --------------------------------------------------------------------- */
@media (max-width:820px), (pointer:coarse){
  .burger{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px}
  .chips .chip,button.chip{min-height:40px;padding:9px 14px;display:inline-flex;align-items:center}
  .chip.small{min-height:32px;padding:5px 10px}
  .btn,.btn2,.ghost{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .form button[type=submit]{min-height:46px}
  .form input,.form select,.form textarea{min-height:44px;font-size:16px} /* 16px stops iOS zooming into the field */
  .tool-save{width:40px;height:40px}
  .dev-nav-close{min-width:44px;min-height:44px}
  .lp-more,.crumb{display:inline-flex;align-items:center;min-height:40px}
  .logo{min-height:44px;display:inline-flex;align-items:center}
  .dev-mobilebar a,.dev-mobilebar button{min-height:44px;display:inline-flex;align-items:center}
}

/* Site-wide banner — only rendered when an operator has switched one on */
.site-banner{background:#e8f0fe;color:#1e3a8a;font-size:.92rem;border-bottom:1px solid rgba(0,0,0,.06)}
.site-banner.ok{background:#e8f7f2;color:#14532d}.site-banner.warn{background:#fef3c7;color:#92400e}
.site-banner-row{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 16px;text-align:center}
.site-banner a{color:inherit;text-decoration:underline;font-weight:600}
.site-banner-close{background:none;border:0;color:inherit;font-size:1.3rem;line-height:1;cursor:pointer;padding:0 4px;min-width:32px;min-height:32px}
@media (prefers-color-scheme:dark){.site-banner{background:#172554;color:#dbeafe}.site-banner.ok{background:#123125;color:#bbf7d0}.site-banner.warn{background:#451a03;color:#fde68a}}

/* FAQ block — the visible questions the FAQPage markup describes */
.faq-block{margin:56px auto}
.faq-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.faq-item{border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.faq-item summary{cursor:pointer;padding:16px 18px;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.3rem;color:var(--muted);flex:none}
.faq-item[open] summary::after{content:'−'}
.faq-item[open] summary{border-bottom:1px solid var(--line)}
.faq-answer{padding:14px 18px;color:var(--body)}
.faq-answer p{margin:0}

/* Text for screen readers and crawlers that the design does not show.
   Used to complete link phrases like "Read more" without changing the page. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* A card heading on a listing page is an h2 (it sits directly under the page
   h1), but it must look exactly like the h3 it replaced. */
.card-h{font-size:1.13rem;font-weight:700}
.footcol-h{font-size:.78rem}

/* Emoji are shown as line icons (public/assets/emoji-icons.js). */
.emoji-ico{display:inline-flex;width:1.05em;height:1.05em;vertical-align:-.16em;flex:none}
.emoji-ico svg{width:100%;height:100%}

/* ---- "Why teams switch": animated scenes (src/content/why-visuals.js) ---- */
.lp-why .wv{height:118px;margin:-6px -6px 18px;border-radius:14px;background:linear-gradient(160deg,var(--brand-soft),var(--soft));border:1px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lp-why:hover .wv{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.wv-tools{display:grid;grid-template-columns:repeat(4,40px);gap:10px}
.wv-chip{width:40px;height:40px;border-radius:11px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--brand);box-shadow:0 3px 10px #0f2a1f10;animation:wv-float 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.4s)}
@keyframes wv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.wv-geo svg{width:100%;height:100%}
.wv-grid path{stroke:var(--line);stroke-width:1}
.wv-land{fill:color-mix(in srgb,var(--brand) 12%,var(--bg));stroke:color-mix(in srgb,var(--brand) 30%,transparent)}
.wv-route{fill:none;stroke:var(--brand);stroke-width:2;stroke-dasharray:6 6;animation:wv-dash 2.4s linear infinite}
@keyframes wv-dash{to{stroke-dashoffset:-24}}
.wv-pin .wv-dot{fill:var(--brand)}
.wv-pin .wv-pulse{fill:var(--brand);opacity:.25;transform-origin:center;animation:wv-pulse 2.4s ease-out infinite;animation-delay:calc(var(--i) * .5s)}
.wv-pin text{font:600 9px/1 var(--font,inherit);fill:var(--ink)}
@keyframes wv-pulse{0%{transform:scale(.6);opacity:.45}100%{transform:scale(2.1);opacity:0}}
.wv-enc{gap:12px;padding:0 12px;flex-wrap:nowrap}
.wv-plain{font:600 12px/1 ui-monospace,Menlo,monospace;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 9px;white-space:nowrap}
.wv-lock{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 18%,transparent);animation:wv-glow 2.2s ease-in-out infinite}
@keyframes wv-glow{50%{box-shadow:0 0 0 11px color-mix(in srgb,var(--brand) 8%,transparent)}}
.wv-cipher{display:grid;grid-template-columns:repeat(2,auto);gap:4px}
.wv-cipher i{font:600 11px/1 ui-monospace,Menlo,monospace;font-style:normal;color:var(--brand);background:var(--bg);border:1px dashed color-mix(in srgb,var(--brand) 40%,var(--line));border-radius:6px;padding:4px 6px;animation:wv-flicker 1.8s steps(2) infinite}
.wv-cipher i:nth-child(2){animation-delay:.3s}.wv-cipher i:nth-child(3){animation-delay:.6s}.wv-cipher i:nth-child(4){animation-delay:.9s}
@keyframes wv-flicker{50%{opacity:.45}}
.wv-mon{flex-direction:column;gap:12px;padding:0 16px}
.wv-bars{display:flex;gap:3px;align-items:flex-end;height:38px;width:100%}
.wv-bars i{flex:1;height:100%;border-radius:3px;background:var(--brand);opacity:.8;transform-origin:bottom;animation:wv-rise .9s ease-out both;animation-delay:calc(var(--i) * 35ms)}
.wv-bars i.warn{background:#f59e0b;height:70%}
@keyframes wv-rise{from{transform:scaleY(.1)}}
.wv-monrow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);width:100%}
.wv-monrow b{color:var(--ink)}.wv-monrow span:last-child{margin-left:auto}
.wv-live{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 0 var(--brand);animation:wv-live 1.6s ease-out infinite}
@keyframes wv-live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 60%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.wv-api{padding:12px}
.wv-term{width:100%;height:100%;border-radius:10px;background:#0f1f19;padding:12px 14px;display:flex;flex-direction:column;gap:6px;font:500 11.5px/1.2 ui-monospace,Menlo,monospace;color:#d6efe4}
.wv-l{opacity:0;animation:wv-type 6s steps(1) infinite;animation-delay:calc(var(--i) * .7s)}
.wv-l em{font-style:normal;color:#5eead4;margin-right:6px}
.wv-ok{color:#86efac}
@keyframes wv-type{0%{opacity:0}8%,85%{opacity:1}100%{opacity:0}}
.wv-dns{flex-direction:column;gap:8px;padding:0 12px}
.wv-provs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.wv-provs span{font-size:11px;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:3px 9px;animation:wv-float 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.5s)}
.wv-recs{width:100%;display:flex;flex-direction:column;gap:4px}
.wv-rec{display:grid;grid-template-columns:44px 36px 1fr 16px;gap:6px;align-items:center;font:500 11px/1 ui-monospace,Menlo,monospace;color:var(--body);background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:4px 8px;animation:wv-slide 4.5s ease-in-out infinite;animation-delay:calc(var(--i) * .45s)}
.wv-rec b{color:var(--brand)}.wv-rec i{color:var(--brand);display:flex}
@keyframes wv-slide{0%{opacity:.35;transform:translateX(-6px)}15%,85%{opacity:1;transform:none}100%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.wv *,.wv{animation:none!important}.wv-l{opacity:1}}
.lp-why .wv-tools{display:grid;grid-template-columns:repeat(4,38px);gap:8px}
.lp-why .wv-tools .wv-chip{width:38px;height:38px}
.lp-why .wv-dns{gap:6px}
.lp-why .wv-provs{flex-wrap:nowrap}
.lp-why .wv-provs span{font-size:10px;padding:2px 8px}
.lp-why .wv-rec{padding:3px 8px}

/* ---- Living examples (site.js "Living examples") ---- */
.lp-brandurl{display:inline-block;min-width:13ch;font-variant-ligatures:none;transition:color .2s,text-shadow .2s}
.mx-flash{color:var(--brand)!important;text-shadow:0 0 12px color-mix(in srgb,var(--brand) 55%,transparent);animation:mx-shake .45s ease-in-out}
@keyframes mx-shake{0%,100%{transform:none}20%{transform:translateX(-1px) skewX(-6deg)}40%{transform:translateX(1px) skewX(4deg)}60%{transform:translateX(-1px)}}
.lp-linkpreview div svg:last-child{animation:mx-tick 2.3s ease-in-out infinite}
@keyframes mx-tick{0%,70%,100%{transform:scale(1);opacity:1}80%{transform:scale(.6);opacity:.3}90%{transform:scale(1.25)}}
.mini-rot{display:inline}.mini-rot span,.mini-rot b{display:inline-block}
.mini-avatars{transition:opacity .35s}
.mini-avatars i{transition:transform .3s}
.mini-avatars i.mx-join{animation:mx-pop .5s cubic-bezier(.3,1.6,.5,1) both}
.mini-avatars i:nth-child(4){background:#f59e0b!important}.mini-avatars i:nth-child(5){background:#ec4899!important}.mini-avatars i:nth-child(6){background:#0ea5e9!important}
.mini-avatars.mx-reset{opacity:0}
@keyframes mx-pop{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
img.mini-qr{transition:transform .4s,filter .4s,opacity .4s}
img.mini-qr.mx-break{transform:scale(.82) rotate(-6deg);filter:blur(4px) contrast(2.2);opacity:.1}
img.mini-qr.mx-form{animation:mx-form .5s ease-out}
@keyframes mx-form{from{transform:scale(1.12);filter:blur(3px)}to{transform:none;filter:none}}
.mx-caret::after{content:'';display:inline-block;width:7px;height:1.05em;margin-left:1px;vertical-align:-2px;background:currentColor;animation:mx-blink .8s steps(1) infinite}
@keyframes mx-blink{50%{opacity:0}}
.mx-status{color:#15803d}
.mini-folders{display:block;width:100%;max-width:330px;margin:0 auto}
.mf-tabs{display:flex;gap:4px;padding-left:10px}
.mf-tabs i{font:700 9px/1 inherit;font-style:normal;letter-spacing:.06em;color:#9a6b1e;background:#fbe7c6;border:1px solid #f1d6a9;border-bottom:0;border-radius:6px 6px 0 0;padding:6px 12px;animation:mf-tab 7.5s steps(1) infinite}
.mf-tabs i:nth-child(2){animation-delay:-5s;color:#6b5a1e}.mf-tabs i:nth-child(3){animation-delay:-2.5s;color:#6b3fa0;background:#ece4ff;border-color:#ddd0fb}
@keyframes mf-tab{0%{background:#fff;transform:translateY(-3px)}33.3%{transform:none}}
.mf-card{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid #eadfcd;border-radius:10px;padding:10px 12px;box-shadow:0 6px 18px #7c5a2012}
.mf-row{display:flex;align-items:center;gap:9px;border-radius:7px;padding:5px 6px;animation:mf-row 7.5s ease-in-out infinite;animation-delay:calc(var(--i) * 2.5s)}
.mf-row b{width:8px;height:8px;border-radius:50%;flex:none}
.mf-lines{flex:1;display:flex;flex-direction:column;gap:4px}.mf-lines i{height:4px;border-radius:9px;background:#94a3b8;width:70%}.mf-lines i+i{width:42%;background:#cbd5e1}
.mf-row em{font:600 9px/1 inherit;font-style:normal;border:1px solid currentColor;border-radius:99px;padding:3px 8px;color:#b7791f;text-transform:uppercase}
.mf-row:nth-child(3) em{color:#4f46e5}.mf-row:nth-child(1) em{color:#15803d}
@keyframes mf-row{0%,30%{background:#fdf3e2;transform:translateX(3px)}35%,100%{background:transparent;transform:none}}
@media (prefers-reduced-motion:reduce){.mx-flash,.lp-linkpreview div svg:last-child,.mf-tabs i,.mf-row{animation:none!important}}
.mini-folders,.mini-folders *{line-height:1.2}
.mini-folders .mf-card{background:#fff}
.mini-folders .mf-row{background:transparent}
.mini-folders .mf-row em{display:inline-block}
.mini-folders .mf-lines{display:flex}
.mini-type .mini-code-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-folders>.mf-card{background:#fff}.mini-folders>.mf-tabs{background:transparent}
.mini-folders>.mf-tabs{padding:0 0 0 10px;border-radius:0}.mini-folders>.mf-card{padding:10px 12px;border-radius:10px}
.mini-folders>span.mf-card{background:#fff;padding:10px 12px;border-radius:10px}.mini-folders>span.mf-tabs{background:transparent;padding:0 0 0 10px;border-radius:0}

/* =====================================================================
   Motion kit for the inner pages (pricing, features, integrations,
   enterprise, tools, pages, developers, blog, help). Set by site.js.
   Additive only: nothing is hidden before a script adds a class, classes
   are removed when their animation ends, and reduced motion turns it off.
   ===================================================================== */
.mo-rise{animation:mo-rise .62s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--mo-d,0ms)}
@keyframes mo-rise{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.mo-pop{animation:mo-pop .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:var(--mo-d,0ms)}
@keyframes mo-pop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}

/* Page headline: words rise one by one, the highlighted phrase gets a marker */
.mo-w{display:inline-block;animation:mo-word .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(min(var(--i,0),10) * 40ms)}
@keyframes mo-word{from{opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
h1.mo-h1 em{background-image:linear-gradient(90deg,color-mix(in srgb,var(--brand) 22%,transparent),color-mix(in srgb,#14b8a6 22%,transparent));background-repeat:no-repeat;background-position:0 90%;background-size:0% .3em;animation:mo-mark .9s cubic-bezier(.65,0,.35,1) forwards;animation-delay:var(--mo-mark,700ms);-webkit-box-decoration-break:clone;box-decoration-break:clone}
@keyframes mo-mark{to{background-size:100% .3em}}
.mo-after{animation:mo-rise .5s cubic-bezier(.22,.61,.36,1) both;animation-delay:var(--mo-d,450ms)}

/* Cards come alive on hover */
.card,.icard,.toolcard,.pg-card,.plan,.ent-cap,.feature-detail-card{transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease,border-color .28s ease}
.icard:hover,.toolcard:hover,.pg-card:hover,.feature-detail-card:hover,.ent-cap:hover,.card.post:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,24,40,.09)}
.plan.tier:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(16,24,40,.1)}
.plan.featured{animation:mo-glow 4.5s ease-in-out infinite}
@keyframes mo-glow{0%,100%{box-shadow:0 12px 44px rgba(22,163,74,.14)}50%{box-shadow:0 18px 60px rgba(22,163,74,.3)}}
.plan.featured .badge{animation:mo-bob 2.6s ease-in-out infinite}
@keyframes mo-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.feature-icon,.toolcard-ico,.itile,.icard .msico,.ent-cap .msico,.pg-card .msico,.cap-logo{transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.feature-detail-card:hover .feature-icon,.toolcard:hover .toolcard-ico,.icard:hover .itile,.ent-cap:hover .msico,.card:hover>.feature-icon{transform:rotate(-8deg) scale(1.12)}
.cap-logo:hover{transform:translateY(-3px) scale(1.12)}
.card.post .cardart,.pg-preview,.feature-illustration,.showcase-art{overflow:hidden}
.card.post .cardart>*,.pg-preview>*,.feature-illustration>*{transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.card.post:hover .cardart>*,.pg-card:hover .pg-preview>*,.feature-detail-card:hover .feature-illustration>*{transform:scale(1.045)}

/* Pricing: the price flips in whenever monthly / yearly is switched */
.mo-toggled .plan.tier .price.ptm,.mo-toggled .plan.tier .price.pty{animation:mo-price .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes mo-price{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:none}}
.mo-seen .yes{display:inline-block;animation:mo-pop .45s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--r,0) * 22ms)}
.tier-highlights.mo-seen li,.ticks.mo-seen li{animation:mo-li .45s ease both;animation-delay:calc(var(--r,0) * 45ms)}
@keyframes mo-li{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* Buttons: a light sweep on hover, one soft pulse when a big CTA appears */
a.btn,button.btn{position:relative;overflow:hidden}
a.btn::after,button.btn::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);pointer-events:none;opacity:0}
a.btn:hover::after,button.btn:hover::after{animation:mo-shine .8s ease;opacity:1}
@keyframes mo-shine{from{left:-60%}to{left:130%}}
.btn.big.mo-pulse{animation:mo-pulse 1.6s ease 1}
@keyframes mo-pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}100%{box-shadow:0 0 0 18px rgba(22,163,74,0)}}

/* Header links: an underline that slides in */
.navlinks a{position:relative}
.navlinks a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.navlinks a:hover::after,.navlinks a.on::after{transform:scaleX(1)}

/* Reading progress on articles and docs */
#moProgress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--brand),#14b8a6);z-index:600;pointer-events:none;transition:transform .08s linear}

/* FAQ answers open smoothly */
.faq-item[open] .faq-answer,details[open]>.faq-answer{animation:mo-rise .35s ease both}

@media (prefers-reduced-motion:reduce){
  .mo-rise,.mo-pop,.mo-w,.mo-after,.plan.featured,.plan.featured .badge,.plan.tier .price,.mo-seen .yes,.mo-seen li,.btn.big.mo-pulse,h1.mo-h1 em{animation:none!important}
  h1.mo-h1 em{background-size:100% .3em}
  #moProgress{display:none}
}

/* Plan cards: lead line, first six promises, "+ N more features" */
.tier-lead{margin:2px 0 8px;font-size:12px;font-weight:700;color:var(--ink)}
.tier-extra{margin-top:6px}
.tier-extra>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--brand-dark,var(--brand));padding:6px 2px;border-radius:6px}
.tier-extra>summary::-webkit-details-marker{display:none}
.tier-extra>summary:hover{text-decoration:underline}
.tier-extra>summary .tx-open,.tier-extra[open]>summary .tx-closed{display:none}
.tier-extra[open]>summary .tx-open{display:inline}
.tier-extra[open]>summary{order:2}
.tier-extra .tier-highlights-more{margin-top:6px;min-height:0}
.tier-extra[open] .tier-highlights-more li{animation:mo-li .35s ease both}
.tier-extra[open] .tier-highlights-more li:nth-child(n+2){animation-delay:40ms}
.tier-extra[open] .tier-highlights-more li:nth-child(n+4){animation-delay:90ms}
.tier-extra[open] .tier-highlights-more li:nth-child(n+7){animation-delay:140ms}
.tier-highlights{min-height:0}

/* ---------------------------------------------------------------------
   Header on tablets and phones (≤1000px).
   Closed: logo · Log in · Get started · menu button, on one line.
   Open: the links drop down as a full-width list, and Log in / Get started
   sit side by side under them — never overlapping a link.
   --------------------------------------------------------------------- */
@media (max-width:1000px){
  .navrow{flex-wrap:wrap;row-gap:0}
  .navrow .logo{order:1}
  .navrow .navcta{order:2;display:flex;margin-left:auto;gap:8px;position:static}
  .navrow .burger{order:3;display:block;margin-left:4px}
  .navrow .navcta .ghost{display:inline-flex;align-items:center;justify-content:center}
  body.navopen .navrow{height:auto;min-height:74px;padding-bottom:16px}
  body.navopen .navlinks{order:4;display:flex;position:static;flex-direction:column;flex-basis:100%;gap:0;margin:6px 0 0;padding:0;border:0;background:none;box-shadow:none}
  body.navopen .navlinks a{padding:12px 2px;border-bottom:1px solid var(--line);font-size:15px}
  body.navopen .navlinks a::after{display:none}
  body.navopen .navcta{order:5;flex-basis:100%;margin:14px 0 0}
  body.navopen .navcta>a{flex:1;min-height:44px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px}
  body.navopen .navcta .ghost{border:1px solid var(--line);padding:10px 12px}
}
@media (max-width:760px){
  .navrow .navcta{display:flex}
  body.navopen .navcta{position:static;top:auto;left:auto;right:auto}
}
@media (max-width:420px){
  .navrow .navcta .ghost{padding:8px 6px;font-size:12px}
  .navrow .navcta .btn{padding:8px 10px;font-size:12px}
}
@media (max-width:1000px){body.navopen .navrow .burger{margin-left:auto}}

/* Home shortener: sign-up call to action shown right after a link is made */
.qs-cta{flex-basis:100%;margin-top:14px;padding:18px 18px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--bg)),var(--bg) 70%);animation:qs-in .45s cubic-bezier(.2,.9,.3,1.2) both;text-align:left}
@keyframes qs-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.qs-cta-head b{display:block;font-size:15px;color:var(--ink)}
.qs-cta-head span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.qs-cta-perks{list-style:none;margin:12px 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 14px}
.qs-cta-perks li{position:relative;padding-left:22px;font-size:12.5px;color:var(--body)}
.qs-cta-perks li::before{content:'';position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.qs-cta-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.qs-cta-btn{flex:1;min-width:160px;justify-content:center;text-align:center;animation:qs-pulse 2.2s ease-in-out 3}
@keyframes qs-pulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.35)}50%{box-shadow:0 0 0 8px rgba(22,163,74,0)}}
.qs-cta-login{font-size:13px}
@media (max-width:520px){.qs-cta-perks{grid-template-columns:1fr}.qs-cta-actions>*{flex:1 1 100%;text-align:center;justify-content:center}}
@media (prefers-reduced-motion:reduce){.qs-cta,.qs-cta-btn{animation:none}}

/* ---- URL shortener landing pages (/url-shortener/*) ---- */
.kw-head{padding-bottom:18px}
.kw-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:34px;align-items:start;margin-bottom:34px}
.kw-intro p{font-size:1.02rem;line-height:1.8;color:var(--body)}
.kw-extra{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.kw-try{max-width:none}
.kw-ticks{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;font-size:12.5px;color:var(--muted)}
.kw-ticks li{display:inline-flex;align-items:center;gap:6px}
.kw-steps-wrap{margin:10px auto 30px}
.kw-steps{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kw-steps li{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}
.kw-stepn{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800}
.kw-steps h3{font-size:1rem;margin:4px 0 6px}
.kw-steps p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.6}
.kw-sections h2{margin-top:30px}
.kw-group{margin:34px auto}
.kw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.kw-card{display:block;padding:18px;text-decoration:none;color:inherit}
.kw-card:hover{text-decoration:none;border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.kw-card .card-h{font-size:1.02rem;margin:0 0 6px;color:var(--ink)}
.kw-card p{margin:0;line-height:1.55}
.kw-hub{margin-top:14px;font-weight:600}
@media (max-width:900px){.kw-grid{grid-template-columns:1fr}.kw-steps{grid-template-columns:1fr}}

/* Pricing cards: the "+ N more" list scrolls inside its box instead of
   stretching the card. */
.tier-extra[open] .tier-highlights-more{max-height:300px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brand) 55%,transparent) transparent;box-shadow:inset 0 -14px 12px -12px rgba(15,23,41,.14)}
.tier-extra[open] .tier-highlights-more::-webkit-scrollbar{width:6px}
.tier-extra[open] .tier-highlights-more::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--brand) 55%,transparent);border-radius:99px}

/* "Free" called out in the brand green (footer tagline, sign-up band) */
.free-word{color:var(--brand);font-weight:800}
.cta .free-word{color:var(--brand)}
/* Hero shortener after a link is made: a tidy result row (QR, link, copy),
   the sign-up box under it, and the example / notes hidden so the card only
   grows as much as it has to. */
.lp-trycard.qs-has-result .lp-linkpreview,.lp-trycard.qs-has-result .lp-trynote,.lp-trycard.qs-has-result .kw-ticks{display:none}
.quickresult.qs-done{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 16px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px #0f172a0a;animation:qs-in .4s cubic-bezier(.2,.9,.3,1.2) both}
.quickresult.qs-done img{width:64px;height:64px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#fff}
.qs-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.qs-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dark)}
.quickresult.qs-done .u{font-size:16px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
.quickresult.qs-done .u:hover{color:var(--brand)}
.qs-long{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qs-copy{padding:10px 18px;min-height:0}
.quickresult.qs-done .qs-cta{grid-column:1/-1;margin-top:2px}
@media (max-width:520px){.quickresult.qs-done{grid-template-columns:auto minmax(0,1fr)}.quickresult.qs-done .qs-copy{grid-column:1/-1;width:100%;justify-content:center}.quickresult.qs-done img{width:56px;height:56px}}

/* ---- ShortFreeURL logo (brand kit v3) ---------------------------------
   One wordmark everywhere, drawn from 320/640/1280 px sources so it stays
   sharp on every screen. --lw is the wordmark width; festival editions are
   800×320 artwork shown through a window of the same height as the header,
   with the logo landing exactly where the normal one sits. */
.brand-logo{--lw:226px;display:inline-flex;align-items:center;line-height:0;flex:none;position:relative}
.brand-logo-img{display:block;width:var(--lw);height:auto;max-width:none;image-rendering:auto}
.brand-logo.is-festival{width:calc(var(--lw)*1.125);height:calc(var(--lw)*.3);overflow:hidden;border-radius:10px;align-items:flex-start}
.brand-logo.is-festival .brand-logo-img,.brand-logo.is-festival picture{display:block}
.brand-logo.is-festival .brand-logo-img{width:calc(var(--lw)*1.4337);margin-left:calc(var(--lw)*-.156);margin-top:calc(var(--lw)*-.0525)}
.brand-icon{display:none;line-height:0;flex:none}
.brand-icon-img{display:block;width:36px;height:36px}
.brand-icon.is-festival .brand-icon-img{width:44px;height:44px;margin:-4px}
.brand-logo.is-footer{--lw:200px}
@media (prefers-reduced-motion:reduce){.brand-logo img,.brand-icon img{animation:none}}
.utility-brand .brand-logo{--lw:210px}
@media (prefers-color-scheme:dark){.brand-logo{background:#fff;border-radius:10px;padding:5px 9px}.brand-logo.is-festival{padding:0}}
.navcta a,.navcta .btn,.navcta .ghost{white-space:nowrap}
@media (max-width:1500px){.navrow .brand-logo{--lw:200px}}
@media (max-width:1150px){.navrow .brand-logo{--lw:184px}}
@media (max-width:540px){.navrow .brand-logo{--lw:168px}}
@media (max-width:420px){.navrow .brand-logo{--lw:132px}}
@media (max-width:350px){.navrow .brand-logo{display:none}.navrow .brand-icon{display:inline-flex}}
.utility-brand .brand-logo.is-festival{height:calc(var(--lw)*.5735);width:calc(var(--lw)*1.28)}.utility-brand .brand-logo.is-festival .brand-logo-img{margin-top:0;margin-left:calc(var(--lw)*-.08)}
@media (max-width:540px){.navrow .brand-logo.is-festival{width:calc(var(--lw)*1.02)}.navrow .brand-logo.is-festival .brand-logo-img{margin-left:calc(var(--lw)*-.2)}}

/* BUG-F-020: long curl samples must not widen the page */
.endpoint pre, .ref-console pre, pre code { overflow-x: auto; max-width: 100%; }

/* 24 Sep 2026: the What's new list keeps each feature in one column. */
.whats-new .ticks.cols li{break-inside:avoid}