:root {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f1f5f9;
  --surface: #ffffff;
  --accent: #4f46e5;
  --danger: #b42318;
  --control: #cbd5e1;
  --radius: 12px;
  --radius-control: 8px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root{
  --ink:#e6ecf5;--body:#c3cddc;--muted:#8e9fb8;--line:#22304a;--line-strong:#2f3f5c;
  --bg:#0b1120;--surface:#111a2e;--inset:#16213a;--deep:#070c17;
  --accent:#818cf8;--accent-strong:#a5b4fc;--accent-deep:#4f46e5;--accent-soft:rgba(129,140,248,.14);
  --control:#2f3f5c;--danger:#f87171;
  --high:#f87171;--high-soft:rgba(248,113,113,.14);--medium:#fbbf24;--medium-soft:rgba(251,191,36,.14);
  --ok:#4ade80;--ok-soft:rgba(74,222,128,.12);
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-sans-400.b5ad7bd3.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-sans-500.b5610af0.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-sans-600.fff0ab3a.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400.e8993d94.woff2) format("woff2")}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--body);font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased}
.site a{color:var(--accent-strong)}
.site h1,.site h2,.site h3{color:var(--ink);text-wrap:balance}
.site p{text-wrap:pretty}
.mwrap{max-width:1160px;margin:0 auto;padding:0 40px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  padding:10px 22px;border-radius:var(--radius-control);border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);font-weight:500;font-size:16px;text-decoration:none;
  white-space:nowrap}
.btn.primary{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn:focus-visible,.mnav-menu>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kicker{font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.mono{font-family:var(--mono);overflow-wrap:anywhere}
.meta{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.lede{margin:0 0 16px;font-size:19px;line-height:1.55;color:var(--body);max-width:62ch}
.sh{margin:0 0 16px;font-size:38px;line-height:1.12;font-weight:600;letter-spacing:-.022em;max-width:22ch}
.sev{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;padding:6px 9px;border-radius:999px;white-space:nowrap}
.sev::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.sev.high{color:var(--high);background:var(--high-soft)}
.sev.medium{color:var(--medium);background:var(--medium-soft)}
.sev.ok{color:var(--ok);background:var(--ok-soft)}
.chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius-control);font:500 13px/1 var(--font);color:var(--ink)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.code{background:var(--deep);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  font:400 14px/1.75 var(--mono);color:var(--body);overflow-x:auto}
.code p{margin:0}
.code .m{color:var(--accent-strong)}
.code .c{color:var(--muted)}
.code .s{color:var(--ok)}

/* Nav */
/* Sticky above the phone breakpoint only (Dan, 2026-09-02): on a desktop the
   bar costs nothing and keeps Check a file and Start free in reach; on a phone
   it would take 76 of 844 pixels for the whole scroll. */
.mnav{position:sticky;top:0;z-index:20;background:rgba(11,17,32,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mnav .mwrap{display:flex;align-items:center;gap:32px;min-height:76px}
.mnav .brand{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}
.mnav nav{display:flex;gap:32px}
.mnav nav a{color:var(--body);text-decoration:none;font-size:15px;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.mnav nav a.here{color:var(--ink);font-weight:600}
.mnav-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.mnav .signin{min-height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:var(--radius-control);
  color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;display:inline-flex;align-items:center}
.mnav .btn{min-height:40px;padding:0 16px;font-size:15px}
.mnav-menu{display:none;position:relative}
.mnav-menu>summary{list-style:none;cursor:pointer;width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line-strong);border-radius:var(--radius-control);color:var(--ink)}
.mnav-menu>summary::-webkit-details-marker{display:none}
.mnav-menu .i-close{display:none}
.mnav-menu[open]>summary{background:var(--inset);border-color:var(--accent)}
.mnav-menu[open] .i-open{display:none}
.mnav-menu[open] .i-close{display:inline}
.mnav-menu>nav{position:absolute;right:0;top:calc(100% + 10px);width:calc(100vw - 40px);max-width:390px;
  display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:0 24px 48px rgba(0,0,0,.45);overflow:hidden;z-index:10}
.mnav-menu>nav>a{min-height:56px;padding:0 20px;border-bottom:1px solid var(--line);font-size:17px}
.sheet-actions{display:flex;flex-direction:column;gap:10px;padding:16px 20px 20px;background:var(--deep)}
.sheet-actions .btn{width:100%;min-height:44px}
.sheet-actions .meta{text-align:center;font-size:13px;margin-top:4px}

/* Footer */
.mfoot{border-top:1px solid var(--line);padding:32px 0 40px;color:var(--muted);font-size:14px}
.mfoot .mwrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.mfoot .brand{display:inline-flex;align-items:center;color:var(--ink)}
.mfoot .tag{margin:0}
.mfoot .links{margin:0;margin-left:auto}
.mfoot a{color:var(--muted)}

/* Sections */
.msec{padding:112px 0;border-top:1px solid var(--line)}
.msec.first{border-top:0;padding-top:72px}
.msec.tint{background:var(--surface)}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}
.two.center{align-items:center}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 0}
.stack{display:flex;flex-direction:column;gap:20px}

/* Hero, and the review screen it shows */
.hero h1{margin:0 0 8px;font-size:60px;line-height:1.04;font-weight:600;letter-spacing:-.028em}
.hero .trust{margin:8px 0 0}
.review{overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.review .head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;
  border-bottom:1px solid var(--line);background:var(--inset)}
.review .head p{margin:0}
.review .title{font-size:15px;font-weight:600;color:var(--ink)}
.review .file{font:400 12px/1.3 var(--mono);color:var(--muted)}
.review .row{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:14px;align-items:start;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.review .row p{margin:0}
.review .what{font-size:15px;font-weight:600;color:var(--ink)}
.review .why{font-size:14px;line-height:1.5}
.review .why strong{color:var(--ink);font-weight:600}
.review .ack{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);
  background:var(--deep);font-size:14px}
.review .ack p{margin:0}
.review .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;flex-wrap:wrap}
.review .foot p{margin:0;font-size:14px;color:var(--muted);max-width:34ch}
.review .foot .btn{min-height:40px;padding:0 18px;font-size:15px}
.caption{text-align:center;font-size:14px;margin:12px 0 0}

/* Ruled lists: the four choices, the detectors, the seven reasons */
.ruled{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ruled li{padding:18px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start}
.ruled h3{margin:0 0 4px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.ruled p{margin:0;font-size:15px;max-width:52ch}
.ruled .x{flex:0 0 auto;width:24px;height:24px;margin-top:3px}
.ruled .head{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:18px 0 6px;border-bottom:0;display:block}
.so{font-weight:600;color:var(--ink);font-size:19px;margin:0}

/* Steps */
.step{padding:28px;display:flex;flex-direction:column;gap:12px}
.step .n{font:400 13px/1 var(--mono);color:var(--muted)}
.step h3{margin:0;font-size:19px}
.step p{margin:0;font-size:16px}
.step.lit{border-color:var(--accent);background:#121c33;box-shadow:0 0 0 4px var(--accent-soft)}
.step.lit .n{color:var(--accent-strong)}

/* Redaction, delivery, security: tick rows */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-size:16px}
.ticks li p{margin:0}
.ticks li strong{color:var(--ink)}
.ticks svg{flex:0 0 auto;margin-top:4px}
.note{padding:20px 22px;background:var(--deep)}
.note p{margin:0;font-size:15px}
.note strong{color:var(--ink)}
.callout{padding:22px 24px;border-color:var(--line-strong)}
.callout h3{margin:0 0 8px;font-size:19px}
.callout p{margin:0;font-size:15px}

/* Engagement card */
.engage{overflow:hidden}
.engage .head{padding:14px 20px;border-bottom:1px solid var(--line);background:var(--inset);display:flex;
  justify-content:space-between;align-items:center;gap:12px}
.engage .head p{margin:0}
.engage .title{font-size:14px;font-weight:600;color:var(--ink)}
.engage .ev{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;padding:14px 20px;align-items:start}
.engage .ev.on{background:var(--deep)}
.engage .ev p{margin:0;font-size:15px;color:var(--ink)}
.engage .ev .meta{font-size:12px;font-family:var(--mono)}

/* Security block */
.secblock{padding:56px;border-color:var(--line-strong);background:#0e1628;display:flex;flex-direction:column;gap:36px}
.secblock .ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px}
.secfoot{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:28px}
.secfoot p{margin:0;font-size:15px;color:var(--muted);max-width:70ch}
.secfoot strong{color:var(--body)}

/* Audiences */
.aud{padding:26px;display:flex;flex-direction:column;gap:10px}
.aud.first{border-color:var(--accent)}
.aud h3{margin:0;font-size:19px}
.aud p{margin:0;font-size:15px}

/* Pricing summary on home */
.plan{padding:26px;display:flex;flex-direction:column;gap:14px}
.plan.lit{border-color:var(--accent);background:#121c33}
.plan .nm{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.plan.lit .nm{color:var(--accent-strong)}
.plan .pr{display:flex;align-items:baseline;gap:6px}
.plan .pr strong{font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.plan .pr span{font-size:14px;color:var(--muted)}
.plan .ex{margin:0;font-size:15px}
.plan .btn{margin-top:auto}
.plan .count{font:400 12px/1 var(--mono);color:var(--muted);text-align:center}
.band{padding:24px 28px;background:var(--deep);border-color:var(--line-strong)}
.band .ticks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px}
.band .ticks li{font-size:15px}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px;margin:0}
.faq dt{font-weight:600;color:var(--ink);margin:0 0 6px}
.faq dd{margin:0;font-size:16px}

/* Close */
.close .sh{font-size:44px;max-width:26ch}

/* The notice card (the 404), dark like the rest of this origin */
.notice{max-width:32rem;margin:10vh auto;padding:0 20px;text-align:center}
.notice .mark{display:inline-flex;color:var(--ink);margin:0 0 18px}
.notice h1{font-size:28px;margin:0 0 10px;color:var(--ink)}
.notice p{margin:0 0 12px;color:var(--muted)}
.notice .action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;
  border-radius:var(--radius-control);background:var(--accent-deep);color:#fff;text-decoration:none;font-weight:500}
.notice .foot{margin-top:28px;font-size:14px}
.notice .foot a{color:var(--muted)}

/* The pricing page */
.pricing h1{font-size:44px;margin:0 0 .4rem;letter-spacing:-.025em}
.pricing .sub{color:var(--muted);margin:0 0 2rem;font-size:18px}
.toggle{display:flex;gap:.25rem;margin:0 0 1.5rem}
.toggle a{padding:.4rem .9rem;border:1px solid var(--line-strong);border-radius:999px;text-decoration:none;
  color:var(--muted);font-size:.9rem;min-height:44px;display:inline-flex;align-items:center}
.toggle a.on{color:#fff;background:var(--accent-deep);border-color:var(--accent-deep)}
.cols{display:grid;gap:1rem;grid-template-columns:1fr}
.col{border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;display:flex;flex-direction:column;background:var(--surface)}
.col-founding{border-color:var(--accent);background:#121c33}
.col h3{margin:0 0 .4rem;font-size:1.05rem}
.badge{margin:0 0 .5rem;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-strong)}
.price{margin:0 0 .5rem;min-height:2.6rem}
.price strong{font-size:2rem;letter-spacing:-.02em;color:var(--ink)}
.per{display:block;color:var(--muted);font-size:.82rem}
.lock{margin:0 0 .5rem;font-size:.78rem;color:var(--muted)}
.col ul{list-style:none;padding:0;margin:.4rem 0 1rem;flex:1}
.col li{font-size:.9rem;color:var(--body);padding:.3rem 0;border-bottom:1px solid var(--line)}
.cta{display:flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem;border-radius:var(--radius-control);
  text-decoration:none;border:1px solid var(--line-strong);color:var(--ink);font-size:.95rem;font-weight:500}
.col-founding .cta{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.pricing .band{margin:1.5rem 0 0}
.band h2{margin:0 0 .4rem;font-size:1rem}
.band p{margin:0 0 .5rem;color:var(--body);font-size:.95rem}
.band .items{font-size:.85rem;color:var(--muted)}
.pricing .note{color:var(--muted);font-size:.9rem;margin:1.2rem 0 0;background:transparent;padding:0}
.anchor{margin:0 0 .5rem;font-size:.8rem;color:var(--muted)}
.was{text-decoration:line-through}
.seats{margin:1.5rem 0 0;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;background:var(--surface)}
.seats h2{margin:0 0 .5rem;font-size:1rem}
.seats p{margin:0 0 .6rem;color:var(--body);font-size:.95rem}
.seats .lead{color:var(--ink)}

@media (min-width:44rem){.cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.cols{grid-template-columns:repeat(4,1fr)}}

/* Docs (docs.getsendframe.com): a sub-nav, a reading column with a table of
   contents beside it, real code blocks, and the route and tool lists built on
   the ruled list. Tokens only; the docs test refuses a URL in this sheet. */
.docnav{border-bottom:1px solid var(--line);background:var(--surface)}
.docnav .mwrap{display:flex;gap:28px;min-height:52px;align-items:center;overflow-x:auto}
.docnav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:500;min-height:44px;display:inline-flex;
  align-items:center;white-space:nowrap;border-bottom:2px solid transparent}
.docnav a.here{color:var(--ink);border-bottom-color:var(--accent)}
.doc{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:64px;padding-top:56px;padding-bottom:96px}
.doc main{min-width:0;max-width:760px}
.doc main>*+*{margin-top:1em}
.doc h1.sh{font-size:44px}
.doc h2{font-size:26px;line-height:1.2;letter-spacing:-.015em;margin:56px 0 12px;padding-top:8px;scroll-margin-top:96px}
.doc h3{font-size:19px;margin:32px 0 8px}
.doc p{margin:0 0 12px}
.doc code{font:400 .92em/1.5 var(--mono);color:var(--ink);background:var(--inset);padding:1px 6px;border-radius:5px;
  overflow-wrap:anywhere}
.doc pre.code{margin:16px 0 20px;white-space:pre;overflow-x:auto;font-size:14px;line-height:1.7}
.doc pre.code code{background:transparent;padding:0;color:inherit}
.toc{position:sticky;top:100px;align-self:start;order:2}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc li a{display:block;padding:6px 0 6px 14px;color:var(--muted);text-decoration:none;font-size:14px;line-height:1.4}
.toc li a:hover{color:var(--ink)}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px 0 8px}
.door{display:block;padding:26px;text-decoration:none;color:var(--body)}
.door h2{margin:0 0 8px;font-size:21px;padding:0}
.door p{margin:0;font-size:15px}
.door:hover{border-color:var(--accent)}
.ruled.plain li{display:block}
.ruled li p{max-width:none}
.doc .ruled p{margin:0}
.ruled li.route,.ruled li.tool{display:block;padding:20px 0;scroll-margin-top:96px}
.sig{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px;font-size:16px}
.sig .m{font:600 13px/1 var(--mono);color:var(--accent-strong);letter-spacing:.04em}
.sig .mono{color:var(--ink);font-size:15px}
.sig strong{color:var(--ink);font-size:18px}
.chip.scope{height:26px;padding:0 10px;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.chip.scope.read{color:var(--ok);border-color:var(--ok)}
.chip.scope.send{color:var(--medium);border-color:var(--medium)}
.args{margin:10px 0 0;padding:14px 18px;background:var(--deep);border:1px solid var(--line);border-radius:var(--radius);
  display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;font-size:15px}
.args dt{margin:0}
.args dd{margin:0}
.steps{margin:0;padding:0 0 0 1.4em}
.steps li{margin:0 0 10px}
.prompts{margin:0;border-top:1px solid var(--line)}
.prompts dt{font-weight:600;color:var(--ink);padding:18px 0 4px}
.prompts dd{margin:0;padding:0 0 18px;border-bottom:1px solid var(--line);font-size:16px}
@media (max-width: 960px){
  .doc{grid-template-columns:minmax(0,1fr);gap:32px}
  .toc{position:static;order:0}
  .toc ul{display:flex;flex-wrap:wrap;gap:4px 18px;border-left:0}
  .toc li a{padding:6px 0}
}

/* Phones: everything stacks, nothing scrolls sideways, every control 44px. */
@media (max-width: 640px){
  .mwrap{padding:0 20px}
  /* The BAR's nav, by child path. ".mnav nav" also matched the sheet inside
     the disclosure (same specificity, later in the sheet), so the menu
     opened to nothing on every phone until 2026-09-02. The open rule sits
     after it on purpose. */
  .mnav{position:static;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .mnav>.mwrap>nav,.mnav .signin{display:none}
  .mnav-menu{display:inline-block}
  .mnav-menu[open]>nav{display:flex}
  .msec{padding:72px 0}
  .msec.first{padding-top:40px}
  .hero h1{font-size:42px}
  .sh{font-size:30px}
  .close .sh{font-size:32px}
  .two,.three,.grid2,.grid4,.secblock .ticks,.band .ticks,.faq{grid-template-columns:minmax(0,1fr);gap:20px}
  .secblock{padding:32px 22px}
  .review .row{grid-template-columns:minmax(0,1fr);gap:10px}
  .review .row .chip{justify-self:start;min-height:44px}
  .review .row .sev{justify-self:start}
  .mfoot .links{margin-left:0}
  .btn,.cta{min-height:44px}
  .mnav-menu>nav>a,.mnav-menu>summary,.toggle a{min-height:44px}
  .doc{padding-top:28px;padding-bottom:64px}
  .doc h1.sh{font-size:32px}
  .doc h2{font-size:22px;margin-top:40px}
  .doors{grid-template-columns:minmax(0,1fr)}
  .args{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .args dd{margin:0 0 10px}
  .docnav .mwrap{gap:20px}
  .toc li a{min-height:44px;display:inline-flex;align-items:center}
}