/* Sendya website — the same palette, type and glass as the app.
   Theme: Auto follows the system; <html data-theme="light|dark"> forces one (set by /site.js, remembered). */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope.woff2) format('woff2')}
:root{
  --ground:#F4F3F0; --ground-2:#EEEDE9; --surface:#FFFFFF; --raised:#FAFAF8; --hair:#E6E4DF; --line:#EFEDE8;
  --ink:#17181C; --sub:#565B66; --hint:#8A909C;
  --accent:#2456DB; --accent-2:#2F63E6; --accent-dark:#1B47BD; --accent-tint:#EAF0FE; --accent-ink:#1B47BD;
  --good:#128A4A; --good-dot:#17A85A; --good-tint:#E7F6EE;
  --warn-tint:#FFF4DC; --warn-ink:#8A5A00;
  --team:#6A4BE0; --team-tint:#F0ECFF; --team-edge:rgba(115,83,232,.28);
  --glass:rgba(255,255,255,.62); --glass-edge:rgba(255,255,255,.85); --glass-sheen:rgba(255,255,255,.7);
  --glass-shadow:0 30px 80px rgba(20,22,28,.12), 0 2px 6px rgba(20,22,28,.05);
  --chip:rgba(20,22,28,.05); --chip-2:rgba(20,22,28,.08);
  --amb1:rgba(36,86,219,.14); --amb2:rgba(255,166,92,.14); --amb3:rgba(120,90,255,.09);
  --shadow-sm:0 1px 2px rgba(20,22,28,.05);
  --shadow-md:0 12px 34px rgba(20,22,28,.08), 0 1px 2px rgba(20,22,28,.04);
  --shot-shadow:0 40px 90px rgba(20,22,28,.18), 0 8px 24px rgba(20,22,28,.08);
  --head-bg:rgba(244,243,240,.72);
  --spring:cubic-bezier(.2,.9,.25,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  /* 0.19.1: softer shadows in dark — the big dark halos under the cards were too strong */
  :root:not([data-theme="light"]){
    --ground:#111215; --ground-2:#16171B; --surface:#1B1C20; --raised:#202226; --hair:#2C2E34; --line:#24262B;
    --ink:#F1F2F4; --sub:#B3B8C2; --hint:#838A96;
    --accent:#5B8BFF; --accent-2:#6C97FF; --accent-dark:#4677F5; --accent-tint:#1E2944; --accent-ink:#9DB8FF;
    --good:#4CD38E; --good-dot:#34C27A; --good-tint:#14301F;
    --warn-tint:#3A2E14; --warn-ink:#F2C66B;
    --team:#B3A2FF; --team-tint:#272240; --team-edge:rgba(168,148,255,.32);
    --glass:rgba(38,40,48,.55); --glass-edge:rgba(255,255,255,.09); --glass-sheen:rgba(255,255,255,.06);
    --glass-shadow:0 12px 32px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.22);
    --chip:rgba(255,255,255,.06); --chip-2:rgba(255,255,255,.1);
    --amb1:rgba(91,139,255,.16); --amb2:rgba(255,128,110,.05); --amb3:rgba(150,110,255,.10);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 8px 22px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.22);
    --shot-shadow:0 24px 60px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.22);
    --head-bg:rgba(17,18,21,.72);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#111215; --ground-2:#16171B; --surface:#1B1C20; --raised:#202226; --hair:#2C2E34; --line:#24262B;
  --ink:#F1F2F4; --sub:#B3B8C2; --hint:#838A96;
  --accent:#5B8BFF; --accent-2:#6C97FF; --accent-dark:#4677F5; --accent-tint:#1E2944; --accent-ink:#9DB8FF;
  --good:#4CD38E; --good-dot:#34C27A; --good-tint:#14301F;
  --warn-tint:#3A2E14; --warn-ink:#F2C66B;
  --team:#B3A2FF; --team-tint:#272240; --team-edge:rgba(168,148,255,.32);
  --glass:rgba(38,40,48,.55); --glass-edge:rgba(255,255,255,.09); --glass-sheen:rgba(255,255,255,.06);
  --glass-shadow:0 12px 32px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.22);
  --chip:rgba(255,255,255,.06); --chip-2:rgba(255,255,255,.1);
  --amb1:rgba(91,139,255,.16); --amb2:rgba(255,128,110,.05); --amb3:rgba(150,110,255,.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 22px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.22);
  --shot-shadow:0 24px 60px rgba(0,0,0,.34), 0 6px 16px rgba(0,0,0,.22);
  --head-bg:rgba(17,18,21,.72);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.55;overflow-x:clip;font-size:16px}
a{color:inherit}
img,svg{display:block}
img{max-width:100%;height:auto}
button{font-family:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:780px}
@media (max-width:560px){ .wrap{padding:0 16px} }
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* light/dark pictures: <img class="t-light"> and <img class="t-dark"> side by side */
.t-dark{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .t-dark{display:block} :root:not([data-theme="light"]) .t-light{display:none} }
:root[data-theme="dark"] .t-dark{display:block}
:root[data-theme="dark"] .t-light{display:none}

/* soft colour behind the glass */
.amb{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.amb.mid{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 38%,#000 62%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 38%,#000 62%,transparent)}
/* 0.22.2 (his note, 21 Oct: "they only look like 2 spots thrown in there"): soft light that fades out evenly, with no
   edge, bigger and overlapping, so the colours melt into each other instead of sitting there as blurred discs */
.amb i{position:absolute}
.amb i:nth-child(1){width:1100px;height:900px;top:-420px;right:-340px;background:radial-gradient(closest-side,var(--amb1),transparent)}
.amb i:nth-child(2){width:1000px;height:760px;top:80px;right:40px;background:radial-gradient(closest-side,var(--amb2),transparent)}
.amb i:nth-child(3){width:1000px;height:820px;top:-360px;left:-320px;background:radial-gradient(closest-side,var(--amb3),transparent)}

/* ---------- header ---------- */
/* clear at the very top, so the page's glow runs behind it without a seam; glass once the page scrolls */
.top{position:sticky;top:0;z-index:30;background:transparent;
  border-bottom:1px solid transparent;transition:border-color .25s ease, background-color .25s ease}
.top.scrolled, body:has(.sheet.open) .top{background:var(--head-bg);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%)}
.top.scrolled{border-bottom-color:var(--hair)}
/* the first section slides up under the header (64px + its 1px line), so its glow starts at the top of the window */
.under-top{margin-top:-65px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.mark{width:32px;height:32px;border-radius:9.4px;background:linear-gradient(180deg,#2F63E6,#2456DB);display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.mark svg{width:56%;height:56%}
.word{font-size:20px;font-weight:800;letter-spacing:-.025em}
.nav{display:flex;align-items:center;gap:2px}
.nav a.lnk{font-size:14px;font-weight:700;color:var(--sub);text-decoration:none;padding:8px 12px;border-radius:10px;transition:color .15s, background .15s}
.nav a.lnk:hover,.nav a.lnk[aria-current="page"]{color:var(--ink);background:var(--chip)}
.head-r{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--hair);background:var(--glass);color:var(--sub);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s, background .15s}
.icon-btn:hover{color:var(--ink);background:var(--surface)}
.menu-btn{display:none}
@media (max-width:860px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .top .head-r .btn.small{padding:8px 13px}
}
/* phone menu */
/* 0.22.2 (his ask: every drop-down opens smoothly): it unrolls from under the bar, the links following one after
   another; closing rolls it back up. Hidden when closed (not reachable with Tab either). */
.sheet{position:fixed;inset:64px 0 auto 0;z-index:29;padding:10px 16px 18px;background:var(--head-bg);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border-bottom:1px solid var(--hair);
  clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;pointer-events:none;
  transition:clip-path .3s cubic-bezier(.4,0,.2,1), opacity .22s ease .06s, visibility 0s linear .3s}
.sheet.open{clip-path:inset(0 0 -40px 0);opacity:1;visibility:visible;pointer-events:auto;
  transition:clip-path .42s var(--spring), opacity .16s ease, visibility 0s}
.sheet a{display:block;padding:13px 6px;font-size:17px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(-6px);transition:opacity .16s ease, transform .2s ease}
.sheet.open a{opacity:1;transform:none;transition:opacity .3s ease, transform .42s var(--spring)}
.sheet.open a:nth-child(2){transition-delay:.035s} .sheet.open a:nth-child(3){transition-delay:.07s} .sheet.open a:nth-child(4){transition-delay:.105s}
.sheet.open a:nth-child(5){transition-delay:.14s} .sheet.open a:nth-child(6){transition-delay:.175s}
/* the ☰ turns into ✕ (both drawn; one fades and turns into the other) */
.menu-btn .mi{position:relative;width:18px;height:18px;display:inline-block}
.menu-btn .mi .i{position:absolute;inset:0;transition:opacity .2s ease, transform .35s var(--spring)}
.menu-btn .mi .i-x{opacity:0;transform:rotate(-90deg) scale(.6)}
.menu-btn[aria-expanded="true"] .mi .i-menu{opacity:0;transform:rotate(90deg) scale(.6)}
.menu-btn[aria-expanded="true"] .mi .i-x{opacity:1;transform:none}
.sheet a:last-child{border-bottom:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:15px;font-weight:800;text-decoration:none;
  border:none;border-radius:13px;padding:13px 20px;cursor:pointer;white-space:nowrap;transition:background .15s, transform .12s, box-shadow .15s, color .15s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}
.btn.primary{color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary:hover{background:linear-gradient(180deg,var(--accent),var(--accent-dark))}
.btn.ghost{color:var(--ink);background:var(--glass);border:1px solid var(--hair);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn.ghost:hover{background:var(--surface)}
.btn.team{color:#fff;background:linear-gradient(180deg,#7A5CF0,#6A4BE0);box-shadow:0 8px 22px rgba(106,75,224,.32), inset 0 1px 0 rgba(255,255,255,.18)}
.btn.team:hover{background:linear-gradient(180deg,#6A4BE0,#5A3CCF)}
.btn.plain{color:var(--accent-ink);background:transparent;padding-left:8px;padding-right:8px}
.btn.plain:hover{background:var(--accent-tint)}
.btn.small{font-size:13.5px;padding:9px 14px;border-radius:11px}
.btn.block{width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;pointer-events:none}
.btn svg{flex:none}

/* ---------- surfaces ---------- */
.glass{position:relative;background:linear-gradient(180deg,var(--glass-sheen),transparent 38%),var(--glass);
  border:1px solid var(--glass-edge);border-radius:24px;box-shadow:var(--glass-shadow);
  backdrop-filter:blur(34px) saturate(170%);-webkit-backdrop-filter:blur(34px) saturate(170%)}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:22px;box-shadow:var(--shadow-sm)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--sub);background:var(--chip);padding:6px 12px;border-radius:999px}
.pill.accent{color:var(--accent-ink);background:var(--accent-tint)}
.pill.soon{color:var(--warn-ink);background:var(--warn-tint)}
.ic-tile{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex:none;color:var(--accent-ink);background:var(--accent-tint)}
.ic-tile.good{color:var(--good);background:var(--good-tint)}
.ic-tile.team{color:var(--team);background:var(--team-tint)}
.pill.team{color:var(--team);background:var(--team-tint)}

/* ---------- type ---------- */
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;margin:0}
h2{font-size:clamp(30px,4.2vw,48px);line-height:1.06;letter-spacing:-.04em}
h3{font-size:19px;line-height:1.25;letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--sub);max-width:640px;margin:0;line-height:1.55}
.muted{color:var(--sub)}
.hint{color:var(--hint);font-size:13.5px}
section{position:relative}
code,.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.92em}

/* ---------- screenshots in frames ---------- */
.win{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--hair);box-shadow:var(--shot-shadow)}
.win-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 13px;background:var(--raised);border-bottom:1px solid var(--line)}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.win-bar i:nth-child(2){background:#FEBC2E}
.win-bar i:nth-child(3){background:#28C840}
.win-bar span{flex:1;text-align:center;font-size:12px;font-weight:700;color:var(--hint);margin-right:46px}
.win img{width:100%}
.phone{border-radius:42px;padding:9px;background:#0B0B0D;box-shadow:var(--shot-shadow), inset 0 0 0 1.5px rgba(255,255,255,.08)}
.phone img{border-radius:33px;width:100%}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair);margin-top:24px;padding:48px 0 40px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.foot h4{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hint)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 8px}
.foot a{color:var(--sub);text-decoration:none;font-weight:600}
.foot a:hover{color:var(--ink)}
.foot .tagline{color:var(--sub);margin:12px 0 0;max-width:300px}
.foot-base{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:22px;border-top:1px solid var(--line);color:var(--hint);font-size:13px}
.foot-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.live-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--chip);color:var(--sub);font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.live-pill:hover{color:var(--ink);background:var(--chip-2)}
.live-dot{width:8px;height:8px;border-radius:999px;background:var(--hint);opacity:.55;flex-shrink:0}
.live-pill[data-st="up"] .live-dot{background:var(--good-dot);opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--good-dot) 22%,transparent)}
.live-pill[data-st="maint"] .live-dot,.live-pill[data-st="issue"] .live-dot{background:#E2951B;opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,#E2951B 22%,transparent)}
.live-pill[data-st="down"] .live-dot{background:#D92D20;opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,#D92D20 20%,transparent)}
.live-pill.in-head{padding:5px 11px 5px 9px;font-size:12px}
@media (max-width:760px){ .live-pill.in-head{padding:9px;gap:0} .live-pill.in-head span{display:none} }
/* 0.18.2: the status card above Contact */
.status-card{display:flex;align-items:center;gap:16px;padding:18px 20px;margin:0 0 18px;text-decoration:none;color:inherit}
.status-card .sc-dot{width:14px;height:14px;border-radius:999px;background:var(--hint);opacity:.5;flex-shrink:0}
.status-card[data-st="up"] .sc-dot{background:var(--good-dot);opacity:1;box-shadow:0 0 0 6px color-mix(in srgb,var(--good-dot) 18%,transparent)}
.status-card[data-st="maint"] .sc-dot,.status-card[data-st="issue"] .sc-dot{background:#E2951B;opacity:1;box-shadow:0 0 0 6px color-mix(in srgb,#E2951B 18%,transparent)}
.status-card[data-st="down"] .sc-dot{background:#D92D20;opacity:1;box-shadow:0 0 0 6px color-mix(in srgb,#D92D20 16%,transparent)}
.status-card .sc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.status-card .sc-t b{font-size:17px;letter-spacing:-.01em}
.status-card .sc-t span{color:var(--sub);font-size:14px}
.status-card .sc-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hint)}
@media (max-width:560px){ .status-card{flex-wrap:wrap} .status-card .btn{width:100%;justify-content:center} }
.status-card.dl-status{margin:18px 0 0}
/* 0.18.2: how the pool works, under the plans */
.pool-explain{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 8px}
.pool-explain > div{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:16px;background:var(--chip)}
.pool-explain b{font-size:15px} .pool-explain span{color:var(--sub);font-size:14px;line-height:1.45}
.pool-explain .pe-n{width:24px;height:24px;border-radius:999px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
@media (max-width:820px){ .pool-explain{grid-template-columns:1fr} }
/* 0.18.2: steps like "Settings → Plan" stand out (site.js) */
/* 0.18.3: just bold and a little brighter — the tinted label was too loud */
.kpath{display:inline;font-weight:700;color:var(--ink)}
.kpath i,i.arr{font-style:normal;font-weight:400;opacity:.5;padding:0 1px}   /* 0.19.1: arrows are never bold */
.seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--chip);gap:2px}
.seg button{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--sub);background:transparent;border:none;padding:6px 11px;border-radius:8px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
/* currency: a quiet pill next to Yearly / Monthly (prices.js) */
.cur-pick{position:relative;display:inline-flex;align-items:center;border-radius:11px;background:var(--chip)}
.cur-pick select{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--ink);background:transparent;border:none;
  padding:9px 30px 9px 13px;border-radius:11px;cursor:pointer}
.cur-pick select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cur-pick select{color-scheme:light}
:root[data-theme="dark"] .cur-pick select{color-scheme:dark}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .cur-pick select{color-scheme:dark} }
.cur-pick select option{color:var(--ink)}   /* the open list follows the theme through color-scheme above (1.21.10, his note of 12 Oct: in Dark the rows
   that weren't highlighted looked uneven — each option painted its own --surface over the browser's dark list; now the list is one colour) */
.cur-pick .i{position:absolute;right:10px;width:14px;height:14px;pointer-events:none;color:var(--sub)}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-grid > :first-child{grid-column:1/-1} }

/* ---------- documents (privacy, terms, legal notice) ---------- */
.doc{padding:56px 0 40px}
.doc h1{font-size:clamp(34px,5vw,50px);letter-spacing:-.04em;line-height:1.05;margin:10px 0 10px}
.doc .updated{color:var(--hint);font-size:14px;margin:0 0 26px}
.doc .summary{padding:22px 24px;border-radius:18px;background:var(--accent-tint);color:var(--ink);margin:0 0 34px}
.doc .summary p{margin:0 0 8px}
.doc .summary ul{margin:6px 0 0;padding-left:20px}
.doc h2{font-size:24px;letter-spacing:-.025em;margin:38px 0 10px;line-height:1.2}
.doc h3{font-size:17px;margin:24px 0 6px}
.doc p,.doc li{color:var(--sub);font-size:16px}
.doc li{margin:0 0 6px}
.doc strong{color:var(--ink)}
.doc a{color:var(--accent-ink);font-weight:700;text-decoration:none}
.doc a:hover{text-decoration:underline}
.doc table{width:100%;border-collapse:collapse;margin:14px 0 8px;font-size:14.5px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--hair);color:var(--sub)}
.doc th{color:var(--ink);font-weight:800;font-size:13px;letter-spacing:.02em}
.doc .tbl{overflow-x:auto;border:1px solid var(--hair);border-radius:16px;background:var(--surface);padding:2px 6px}
.doc .tbl table{margin:0}
.doc .tbl tr:last-child td{border-bottom:none}
.fill{background:var(--warn-tint);color:var(--warn-ink);font-weight:800;padding:1px 6px;border-radius:6px}
.doc-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}

/* code digits (invite page): the boxes shrink to fit any screen */
.code{display:flex;align-items:center;justify-content:center;gap:clamp(3px,1.1vw,7px);width:100%;font-variant-numeric:tabular-nums}
.code b{flex:1 1 0;min-width:0;max-width:44px;aspect-ratio:44/58;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,6vw,28px);font-weight:800;
  border-radius:clamp(8px,2.4vw,12px);background:var(--surface);border:1px solid var(--hair);box-shadow:var(--shadow-sm)}
.code .sep{flex:none;width:clamp(4px,1.8vw,12px)}
.qr{background:#fff;border-radius:16px;padding:12px;display:inline-block;box-shadow:var(--shadow-sm);border:1px solid var(--hair)}
.qr svg{width:150px;height:150px}
.note{font-size:13.5px;color:var(--sub)}

/* reveal on scroll (only when JS is on: html.js) */
html.js .rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .9s var(--spring)}
html.js .rise.in{opacity:1;transform:none}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} html.js .rise{opacity:1;transform:none} }

/* ---------- a link-looking button (opens a dialog in place) ---------- */
.linkish{font:inherit;font-weight:700;color:var(--accent-ink);background:none;border:none;padding:0;cursor:pointer;text-align:left}
.linkish:hover{text-decoration:underline;text-underline-offset:3px}
.linkish:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- dialog: Install with PowerShell ---------- */
.dlg{width:min(530px,calc(100vw - 32px));max-width:none;padding:28px 28px 24px;border:1px solid var(--hair);border-radius:24px;color:var(--ink);
  background:var(--surface);box-shadow:var(--shot-shadow);opacity:0;transform:translateY(8px) scale(.98);transition:opacity .22s ease,transform .32s var(--spring)}
.dlg[open]{opacity:1;transform:none}
@starting-style{.dlg[open]{opacity:0;transform:translateY(8px) scale(.98)}}
.dlg::backdrop{background:rgba(12,13,16,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dlg h3{font-size:20px;margin:14px 0 6px}
.dlg p{color:var(--sub);font-size:14.5px;line-height:1.55;margin:0 0 14px}
.dlg .hint{font-size:13px;color:var(--hint);margin:14px 0 0}
.dlg .hint a{color:var(--accent-ink);font-weight:700;text-decoration:none}
.dlg form{position:absolute;top:14px;right:14px;margin:0}
.dlg-x{width:34px;height:34px;border-radius:10px;border:none;background:var(--chip);color:var(--sub);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dlg-x .i{width:16px;height:16px}
.dlg-x:hover{background:var(--chip-2);color:var(--ink)}
.cmd{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:14px;background:var(--ground-2);border:1px solid var(--hair)}
.cmd code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.cmd code::-webkit-scrollbar{display:none}
.cmd .btn{flex:none}
@media (max-width:600px){ .cmd{flex-wrap:wrap;padding:10px 6px 6px 14px} .cmd code{white-space:normal;overflow-wrap:anywhere;flex-basis:100%} .cmd .btn{margin-left:auto} }

/* ---------- How plans work (/plans) ---------- */
.guide{position:relative;padding:0 0 30px}
.g-hero{position:relative;padding:118px 0 34px;overflow:hidden}
.g-hero .wrap{position:relative;z-index:1}
.g-hero h1{font-size:clamp(38px,6vw,64px);line-height:1.02;letter-spacing:-.045em;margin:12px 0 16px}
.g-jump{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.g-jump a{text-decoration:none}
.g-jump a:hover{background:var(--chip-2);color:var(--ink)}
.g-sec{padding:46px 0 10px}
.g-sec + .g-sec{border-top:1px solid var(--line)}
.g-sec h2{font-size:clamp(28px,3.4vw,38px);line-height:1.1;letter-spacing:-.035em;margin:8px 0 12px}
.g-sec h3{font-size:18px;margin:26px 0 6px}
.g-sec p{color:var(--sub);margin:0 0 12px;font-size:16.5px}
.g-sec p b,.g-sec li b{color:var(--ink)}
.g-sec a{color:var(--accent-ink);font-weight:700;text-decoration:none}
.g-sec a:hover{text-decoration:underline}
.g-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start;margin-top:8px}
.g-grid.flip > :first-child{order:2}
@media (max-width:860px){ .g-grid{grid-template-columns:1fr;gap:26px} .g-grid.flip > :first-child{order:0} }
.g-shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
/* 0.22.2 (his note, 21 Oct: "too accentuate, it should be lighter"): no halo. 0.22.3 (his note, 22 Oct: "looks like
   it's merged with the background"): a thin edge that follows the picture's own round corners — dark on light pages,
   light on dark ones — and a tighter shadow underneath */
.g-shot img{width:100%;max-width:372px;filter:drop-shadow(0 0 .6px rgba(20,22,28,.22)) drop-shadow(0 10px 22px rgba(20,22,28,.12)) drop-shadow(0 2px 4px rgba(20,22,28,.06))}
:root[data-theme="dark"] .g-shot img{filter:drop-shadow(0 0 .6px rgba(255,255,255,.22)) drop-shadow(0 12px 26px rgba(0,0,0,.55))}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .g-shot img{filter:drop-shadow(0 0 .6px rgba(255,255,255,.22)) drop-shadow(0 12px 26px rgba(0,0,0,.55))} }
.g-shot figcaption{font-size:13px;color:var(--hint);text-align:center;max-width:340px}
.g-shots{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:560px){ .g-shots{grid-template-columns:1fr} }

/* two ways to connect */
.ways2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 6px}
@media (max-width:760px){ .ways2{grid-template-columns:1fr} }
.way{padding:22px 22px 20px}
.way h3{margin:0 0 4px;font-size:17px}
.way p{font-size:14.5px;margin:0}
.flow2{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px 0 18px;min-height:86px}
.dev{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--sub);flex:none;width:76px;text-align:center}
.dev .ic-tile{width:50px;height:50px;border-radius:15px}
.dev .ic-tile svg{width:24px;height:24px}
.dev.srv .ic-tile{color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.wire{flex:1;height:2px;min-width:14px;margin-bottom:22px;background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 13px);opacity:.7}
.wire.good{background:repeating-linear-gradient(90deg,var(--good-dot) 0 7px,transparent 7px 13px)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px;margin:12px 6px 0 0}
.tag.free{color:var(--good);background:var(--good-tint)}
.tag.counts{color:var(--accent-ink);background:var(--accent-tint)}

/* examples */
.g-ex{padding:20px 22px;margin:18px 0 6px}
.g-ex .pill{margin-bottom:10px}
.ex-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.ex-row:first-of-type{border-top:none}
.ex-row b{display:block;font-size:15px;color:var(--ink)}
.ex-row small{display:block;font-size:13.5px;color:var(--sub);margin-top:2px}
.amt{font-size:14px;font-weight:800;white-space:nowrap;padding:5px 11px;border-radius:999px;background:var(--accent-tint);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.amt.zero{background:var(--good-tint);color:var(--good)}
.ex-total{display:flex;justify-content:space-between;gap:12px;padding-top:12px;margin-top:2px;border-top:1px solid var(--hair);font-weight:800;font-size:15px}

/* the shared meter */
.pool{padding:22px 22px 18px;margin:18px 0 6px}
.pool-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pool-h b{font-size:17px}
.pool-h span{font-size:14px;color:var(--sub);font-weight:700;font-variant-numeric:tabular-nums}
.bar{height:10px;border-radius:999px;background:var(--chip-2);overflow:hidden;margin:12px 0 16px}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.who{display:grid;grid-template-columns:minmax(0,1fr) 92px auto;gap:12px;align-items:center;padding:7px 0;font-size:14.5px}
.who > span:first-child{color:var(--ink);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who > span:first-child small{font-weight:600;color:var(--hint);margin-left:6px}
.who .mini{height:6px;border-radius:999px;background:var(--chip-2);overflow:hidden}
.who .mini i{display:block;height:100%;background:var(--accent);opacity:.75;border-radius:999px}
.who > span:last-child{font-variant-numeric:tabular-nums;color:var(--sub);font-weight:700;font-size:13.5px;min-width:64px;text-align:right}

/* who's who on a plan */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 8px}
@media (max-width:860px){ .roles{grid-template-columns:1fr} }
.role{padding:20px}
.role h3{margin:12px 0 4px;font-size:17px}
.role p{font-size:14.5px;margin:0 0 8px}
.role ul{margin:0;padding-left:18px;color:var(--sub);font-size:14.5px}
.role li{margin:0 0 4px}

/* steps */
.steps{list-style:none;counter-reset:st;margin:14px 0 8px;padding:0}
.steps li{counter-increment:st;position:relative;padding:0 0 16px 46px;color:var(--sub);font-size:16px}
.steps li::before{content:counter(st);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:var(--accent-ink);background:var(--accent-tint)}
.steps li b{color:var(--ink)}
.callout{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:var(--warn-tint);color:var(--warn-ink);font-size:15px;margin:16px 0 6px}
.callout svg{flex:none;width:20px;height:20px;margin-top:2px}
.callout b{color:inherit}
.callout.info{background:var(--accent-tint);color:var(--accent-ink)}

/* questions */
.g-faq details{border-top:1px solid var(--line)}
.g-faq details:last-child{border-bottom:1px solid var(--line)}
.g-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 2px;font-weight:800;font-size:16.5px}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::after{content:"";flex:none;width:9px;height:9px;border:solid var(--hint);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--spring)}
.g-faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.g-faq details.is-closing summary::after{transform:rotate(45deg) translateY(-3px)}   /* 0.22.2: turns back as it starts closing (site.js) */
.g-faq details p{margin:0;padding:0 2px 16px}   /* (0.22.2: padding, not margin: a margin would slip out of the box and jump at the end of the slide) */
.g-cta{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.g-list{margin:10px 0 14px;padding-left:20px;color:var(--sub);font-size:16px}
.g-list li{margin:0 0 9px}
.g-shot .phone{width:100%;max-width:290px}
.g-shot .phone img{filter:none;max-width:none}
.pool .note{margin:12px 0 0;font-size:12.5px;color:var(--hint)}
.g-two{margin:18px 0 26px}
.g-two .way h3{margin:0 0 12px}
.g-two .steps li{font-size:15px;padding-bottom:12px}
.g-two p{font-size:14.5px}
.g-shots{margin:6px 0 4px}
@media (max-width:560px){ .who{grid-template-columns:minmax(0,1fr) 54px auto;gap:10px} .who > span:last-child{min-width:56px} }

/* 0.19.1: "Show email address" inside a sentence (legal pages) — looks like a link, opens the robot check */
.mail-in{display:inline}
.mail-show{font:inherit;font-weight:700;color:var(--accent-ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.mail-show:hover{text-decoration-style:solid}
.mail-show:disabled{cursor:default;opacity:.7;text-decoration:none}
.mail-in a.mail{font-weight:700;color:var(--accent-ink)}
.mail-in .ts-slot{display:inline-block;vertical-align:middle}
.mail-in .hint{font-size:inherit}

/* 0.19.1: Max is highlighted in amber, the way Pro is in blue ("Best for teams") */
:root{--gold:#E8920C;--gold-2:#F5A623;--gold-on:#2A1A00}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--gold:#F2A93B;--gold-2:#F7BA55;--gold-on:#211500} }
:root[data-theme="dark"]{--gold:#F2A93B;--gold-2:#F7BA55;--gold-on:#211500}
.plan.gold{border-color:color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 16%,transparent), var(--shadow-md)}
.plan.gold .badge{background:var(--gold);color:var(--gold-on)}
.btn.gold{color:var(--gold-on);background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 8px 22px color-mix(in srgb, var(--gold) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.25)}
.btn.gold:hover{background:linear-gradient(180deg,var(--gold),color-mix(in srgb,var(--gold) 85%,#000))}

/* 0.22.1: languages — the bar that offers the visitor's language (site/lang.js), the line on the English-only pages,
   the footer's language menu, and the app's English names in brackets while the app doesn't speak the language */
.lang-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100% - 32px);padding:10px 12px 10px 18px;border-radius:16px;background:var(--surface);color:var(--ink);border:1px solid var(--hair);box-shadow:var(--shadow-md);font-size:14px;font-weight:600}
.lang-bar span{margin-right:4px}
.lang-note{margin:10px 0 18px;padding:10px 14px;border-radius:12px;background:var(--accent-tint);color:var(--accent-ink);font-size:14px;font-weight:600}
.foot-right .lang-pick{margin-right:10px}
.kp-en{color:var(--hint)!important;font-weight:400!important;font-size:.92em}