/* AgentClassMail marketing site - the instruments skin (2026-10-01, Doug: full genre skin, motion-first hero).
   One world: a brass reticle iris on ink, slanted Jost figures, a red stamp for refusals, cream paper only where paper
   is literal (the dossier). Fonts are self-hosted under /fonts (no third-party requests). */

@font-face{font-family:'Jost';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/Jost-500-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/Jost-600-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/Jost-700-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Jost-500.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Jost-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IBMPlexSans-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexSans-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/IBMPlexSans-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/IBMPlexMono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexMono-500.woff2) format('woff2')}

:root{
  color-scheme:dark;
  --ink:#0E1218; --panel:#141A23; --panel-2:#1B2330; --line:#26303E; --steel:#2B4A6B;
  --paper:#E9E4D6; --paper-dim:#B9B3A4; --slate:#8C97A8; --brass:#D2A83B; --brass-dim:#A88427;
  --stamp:#C7362B; --ok:#4CAF7A; --hold:#D89A3B;
  --display:"Jost",ui-sans-serif,system-ui,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --red:#D8322A;
  --measure:64ch;
}
/* light theme: a steel-tinted white, not cream (cream is the dossier's), brass darkened for contrast. The hero stays a
   dark screen in both themes because it is a film frame. Chosen by the system unless the visitor picks one. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){color-scheme:light;--ink:#EEF0F3;--panel:#FFFFFF;--panel-2:#E3E7ED;--line:#CAD1DB;--steel:#2B4A6B;--paper:#141A23;--paper-dim:#3C4654;--slate:#5B6675;--brass:#8A6A12;--brass-dim:#6E5410;--stamp:#B5281E;--ok:#237A4B;--hold:#9A6A14}
}
:root[data-theme="light"]{color-scheme:light;--ink:#EEF0F3;--panel:#FFFFFF;--panel-2:#E3E7ED;--line:#CAD1DB;--steel:#2B4A6B;--paper:#141A23;--paper-dim:#3C4654;--slate:#5B6675;--brass:#8A6A12;--brass-dim:#6E5410;--stamp:#B5281E;--ok:#237A4B;--hold:#9A6A14}
:root[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* film grain: one fixed layer over the whole page, cheap (an SVG turbulence tile), faint, never over the dossier paper */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>")}
.wrap{position:relative;z-index:1}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body::after{display:none}}
:root[data-theme="light"] body::after{display:none}
a{color:var(--brass);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}

/* type: the display face is Jost in italic, as caps for the one headline and as slanted figures everywhere a number
   matters; body and tables stay upright Plex so the slant means "look here" */
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.05}
h1,h2{font-family:var(--display);font-style:italic;font-weight:600;letter-spacing:.005em}
h1{font-size:clamp(2.4rem,6.2vw,4.6rem);text-transform:uppercase;letter-spacing:.03em;line-height:.98}
h1 .sub{display:block;margin-top:.55rem;text-transform:none;letter-spacing:.005em;font-weight:500;color:var(--brass);font-size:.52em;line-height:1.15}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1.1rem}
h3{font-size:1.15rem;font-weight:600;font-family:var(--body)}
p{margin:0 0 1rem}
/* reading measure only on a long-form prose column as a whole (global no-mid-screen-cap rule) */
.prose{max-width:var(--measure)}
.muted{color:var(--slate)}
code,pre{font-family:var(--mono);font-size:.92em}
pre{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1rem 1.2rem;overflow-x:auto;line-height:1.5;margin:0}
.k{color:var(--slate)} .s{color:var(--paper)} .n{color:var(--brass)} .ok{color:var(--ok)}
/* figures: every number that matters leans */
.fig,.price,.facts b,.thresholds b,.steps li::before{font-family:var(--display);font-style:italic;font-weight:600;font-variant-numeric:tabular-nums lining-nums}

/* skip link: first focusable element in the body */
.skip{position:absolute;left:12px;top:-3rem;z-index:10;background:var(--brass);color:var(--ink);padding:.5rem .8rem;border-radius:4px;font-weight:600}
.skip:focus{top:12px;text-decoration:none}

/* nav (layout): desktop links inline; below 860px a <details> menu, no JS */
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--paper);font-family:var(--display);font-style:italic;font-weight:600;font-size:1.2rem;letter-spacing:.02em}
.brand:hover{text-decoration:none}
.brand svg{width:34px;height:34px;flex:none}
.nav .links{display:flex;gap:1.4rem;font-size:.95rem}
.nav .links a{color:var(--paper-dim)}
.nav .links a[aria-current="page"]{color:var(--brass)}
.btn{display:inline-block;padding:.72rem 1.2rem;border-radius:3px;font-weight:600;font-size:.98rem;border:1px solid var(--brass);color:var(--ink);background:var(--brass);line-height:1.2}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brass-dim);background:var(--panel)}
.signin{font-size:.95rem;color:var(--paper-dim)}
.signin:hover{color:var(--brass);text-decoration:none}
@media (max-width:860px){.nav .signin{display:none}}
.theme{font:inherit;font-size:.82rem;font-family:var(--mono);color:var(--paper-dim);background:transparent;border:1px solid var(--line);border-radius:3px;padding:.45rem .7rem;cursor:pointer}
.theme:hover{border-color:var(--brass);color:var(--brass)}
.menu{display:none}
.menu summary{cursor:pointer;list-style:none;padding:.55rem .9rem;border:1px solid var(--line);border-radius:3px;font-weight:600;font-size:.95rem;color:var(--paper)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--brass);color:var(--brass)}
.menu nav{position:absolute;left:0;right:0;top:100%;z-index:5;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:0 0 6px 6px;padding:.4rem 0}
.menu nav a{padding:.75rem 1.2rem;color:var(--paper)}
.menu nav a[aria-current="page"]{color:var(--brass)}
@media (max-width:860px){.nav .links,.nav .cta-top{display:none}.menu{display:block}.theme{margin-left:auto}}

/* hero: a full-bleed film frame. The video is the background, the copy sits on a scrim at the lower left, and the
   band stays dark in both themes. Nothing else on the site is this loud. */
.hero{position:relative;overflow:hidden;background:#000;color:#E9E4D6;margin-inline:calc(50% - 50vw);width:100vw;min-height:min(80vh,860px);display:flex;align-items:flex-end;padding:clamp(3rem,9vh,7rem) max(20px,calc(50vw - 540px)) clamp(2.6rem,7vh,5rem);border-top:0}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#000}
.hero-bg.poster{display:none}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 75%),linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 48%)}
.hero-copy{position:relative;z-index:2;max-width:44rem}
.hero .lead{font-size:1.15rem;color:#C9C3B4;margin-top:1.4rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;align-items:center}
.hero .fine{font-size:.9rem;color:#8C97A8;margin-top:1.1rem}
.hero .btn.ghost{color:#E9E4D6;border-color:rgba(233,228,214,.35)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:#E9E4D6}
.hero h1 .sub{color:var(--red)}
.hero>*,.two>*{min-width:0}
@media (max-width:860px){.hero{min-height:78vh;align-items:flex-end}.hero-copy{max-width:none}}
@media (prefers-reduced-motion:reduce){.hero-bg{display:none}.hero-bg.poster{display:block}}

/* the dossier: paper, literally; the only cream surface on the site */
.dossier{position:relative;background:#E7DFC9;color:#1A1712;border-radius:3px 12px 3px 3px;padding:1.4rem 1.4rem 1.2rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.25);transform:rotate(-1.2deg)}
.dossier::before{content:"";position:absolute;top:-14px;left:22px;width:38%;height:16px;background:#E7DFC9;border-radius:6px 6px 0 0;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.dossier .head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--mono);font-size:.8rem;color:#5B5548;border-bottom:1px dashed #B8AE95;padding-bottom:.6rem;margin-bottom:.9rem}
.dossier .head b{color:#1A1712;font-weight:500;min-width:0;overflow-wrap:anywhere;text-align:right}
.dossier pre{background:transparent;border:0;padding:0;color:#2B2620;font-size:.86rem;overflow-x:auto}
.dossier pre .k{color:#7A7160} .dossier pre .n{color:#8A6A12} .dossier pre .ok{color:#1F7A47;font-weight:500} .dossier pre .s{color:#2B2620}
.stamp{position:absolute;right:16px;bottom:22px;transform:rotate(-12deg);font-family:var(--mono);font-weight:500;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);border:3px double var(--stamp);border-radius:4px;padding:.35rem .6rem;opacity:.9;mix-blend-mode:multiply;pointer-events:none}
.dossier .foot{margin-top:1rem;font-family:var(--mono);font-size:.74rem;color:#7A7160}

/* sections */
section{padding-block:3.6rem;border-top:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:2rem}}
.story{border-left:3px solid var(--brass);padding-left:1.2rem;color:var(--paper-dim)}
.story p:last-child{margin-bottom:0}

/* classes */
.classes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem 2.4rem;margin:1.6rem 0 2rem;padding:0;list-style:none;max-width:60rem}
.classes li{border-top:1px solid var(--line);padding-top:.9rem}
.classes b{display:block;font-weight:600;margin-bottom:.2rem}
.classes span{color:var(--slate);font-size:.97rem}
@media (max-width:640px){.classes{grid-template-columns:1fr}}
.refused{display:inline-flex;align-items:center;gap:.7rem;border:1px solid var(--stamp);color:var(--paper);border-radius:4px;padding:.7rem 1rem;font-size:.97rem;background:rgba(199,54,43,.08);max-width:60rem}
.refused i{font-style:normal;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stamp);border:2px solid var(--stamp);border-radius:3px;padding:.15rem .45rem;flex:none}
.thresholds-intro{margin:1.6rem 0 0}
.thresholds-intro + .thresholds{margin-top:.8rem}
/* the board: large slanted figures on a split-flap texture (from the console still) */
.thresholds{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem 2.4rem;font-family:var(--mono);font-size:.86rem;color:var(--slate)}
.thresholds>div{padding:.9rem 1.1rem .8rem;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-top-color:var(--steel);border-radius:3px;min-width:11rem}
.thresholds b{display:block;color:var(--brass);font-size:2.1rem;line-height:1;margin-bottom:.35rem}

/* steps (a real sequence): a horizontal timeline, stacking only on narrow screens */
.steps{list-style:none;margin:2rem 0 0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0 1.6rem;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:1.05rem;height:1px;background:var(--line)}
.steps li{position:relative;padding-top:3.2rem}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:2.15rem;height:2.15rem;border-radius:50%;background:var(--ink);border:1px solid var(--brass);color:var(--brass);font-size:1.1rem;display:grid;place-items:center}
.steps b{display:block;font-weight:600;margin-bottom:.35rem;text-wrap:balance}
.steps span{color:var(--slate);font-size:.95rem}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:1.6rem}.steps::before{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* features */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2rem;margin:1.6rem 0 0;padding:0;list-style:none}
.feat li{border-top:1px solid var(--line);padding-top:.9rem;font-size:.97rem}
.feat b{display:block;font-weight:600;margin-bottom:.25rem}
.feat span{color:var(--slate)}
.feat .soon{color:var(--brass-dim);font-family:var(--mono);font-size:.78rem;margin-left:.4rem}
@media (max-width:860px){.feat{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.feat{grid-template-columns:1fr}}

/* pricing */
.plans{overflow-x:auto;margin-top:1.6rem;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:.95rem}
th,td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
th{font-weight:600;color:var(--paper)}
thead th{border-bottom:2px solid var(--line);font-family:var(--display);font-style:italic;font-size:1.1rem;letter-spacing:.01em}
thead th small{display:block;font-family:var(--body);font-style:normal;font-weight:400;color:var(--slate);font-size:.85rem;margin-top:.15rem}
tbody th{font-weight:500;color:var(--slate);white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.hi,th.hi{background:rgba(210,168,59,.09)}
thead th.hi{color:var(--brass);box-shadow:inset 0 2px 0 var(--brass)}
.price{font-size:1.7rem;color:var(--brass);display:block;line-height:1.1}
.price small{font-family:var(--body);font-style:normal;font-weight:400;font-size:.8rem;color:var(--slate)}
.plans-note{margin-top:1rem;font-size:.92rem;color:var(--slate)}

/* faq */
.faq details{border-top:1px solid var(--line);padding:.9rem 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass);font-family:var(--mono);font-size:1.2rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin-top:.7rem;color:var(--paper-dim)}
.faq{max-width:44rem}

/* compare page: one table from src/data/compare.json; sticky first column on wide screens, per-vendor cards under 640px */
.cmp-intro{padding-block:4rem 2.4rem}
.cmp-intro h1{font-size:clamp(2rem,5vw,3.6rem)}
.cmp-intro .lead{font-size:1.15rem;color:var(--paper-dim);margin-top:1.3rem}
.checked{font-size:.92rem;color:var(--slate);border-left:3px solid var(--brass);padding-left:.9rem;margin-top:1.2rem}
.cmp-wrap{overflow-x:auto;margin-top:1.4rem;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.cmp{min-width:1480px;font-size:.88rem;line-height:1.45}
.cmp th,.cmp td{padding:.65rem .75rem}
.cmp thead th{background:var(--panel-2);font-size:.95rem}
.cmp thead th small{font-size:.75rem}
.cmp thead th.ours{color:var(--brass);box-shadow:inset 0 2px 0 var(--brass)}
.cmp tbody th[scope="row"]{white-space:normal;min-width:13rem;max-width:15rem;color:var(--paper);font-weight:500}
.cmp th:first-child{position:sticky;left:0;z-index:2;background:var(--panel);box-shadow:1px 0 0 var(--line)}
.cmp thead th:first-child{z-index:3;background:var(--panel-2)}
.cmp tr.cat th{position:static;background:var(--ink);color:var(--brass);font-family:var(--mono);font-style:normal;font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding-block:.55rem}
.cmp tr.cat th span{position:sticky;left:.75rem}
.cmp td.ours{background:rgba(210,168,59,.09)}
.k-coming{color:var(--hold)}
.k-unverified{color:var(--slate);font-style:italic}
.k-not_offered{color:var(--paper-dim)}
.src{font-family:var(--mono);font-size:.72rem;vertical-align:super;line-height:0;margin-left:.1rem}
.vcards{display:none;margin-top:1.4rem}
.vcard{border:1px solid var(--line);border-radius:4px;background:var(--panel);margin-bottom:.8rem}
.vcard.ours{border-color:var(--brass)}
.vcard summary{cursor:pointer;padding:.9rem 1rem;font-family:var(--display);font-style:italic;font-weight:600;font-size:1.1rem}
.vcard summary small{font-family:var(--body);font-style:normal;font-weight:400;font-size:.8rem;color:var(--slate)}
.vcard h3{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);padding:.8rem 1rem .3rem}
.vcard ul{list-style:none;margin:0;padding:0 1rem .6rem}
.vcard li{border-top:1px solid var(--line);padding:.6rem 0;font-size:.93rem}
.vcard li b{display:block;font-weight:600;color:var(--paper);font-style:normal}
@media (max-width:640px){.cmp-wrap{display:none}.vcards{display:block}}
.honest{margin:1rem 0 0;padding-left:1.2rem;color:var(--paper-dim)}
.honest li{margin-bottom:.5rem}
.sources{list-style:none;margin:1.2rem 0 0;padding:0;font-size:.88rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem 2rem}
.sources li{display:flex;gap:.7rem;align-items:baseline;border-top:1px solid var(--line);padding-top:.45rem;scroll-margin-top:1rem}
.sources li:target{background:rgba(210,168,59,.12)}
.sources .sid{font-family:var(--mono);color:var(--brass);min-width:2.6rem;flex:none}
.sources .url{display:block;font-family:var(--mono);font-size:.76rem;color:var(--slate);overflow-wrap:anywhere}
.sources .when{font-size:.78rem;color:var(--slate)}
@media (max-width:860px){.sources{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--line);padding-block:2.2rem 3rem;font-size:.9rem;color:var(--slate);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer nav{display:flex;flex-wrap:wrap;gap:1.2rem}
footer nav a{color:var(--paper-dim)}

/* the one orchestrated moment: on the home page the mark's rings draw in, then the reel fades up; nothing else moves */
@media (prefers-reduced-motion:no-preference){
  .brand svg circle{stroke-dasharray:200;stroke-dashoffset:200;animation:iris 1.1s cubic-bezier(.2,.8,.2,1) forwards}
  .brand svg circle:nth-of-type(2){animation-delay:.12s}
  .brand svg circle:nth-of-type(3){animation-delay:.24s}
  .brand svg circle:last-of-type{stroke-dasharray:0;stroke-dashoffset:0;animation:none}
  @keyframes iris{to{stroke-dashoffset:0}}
  .dossier{animation:land .7s cubic-bezier(.2,.8,.2,1) both}
  @keyframes land{from{opacity:0;transform:rotate(-4deg) translateY(18px)}to{opacity:1;transform:rotate(-1.2deg) translateY(0)}}
}

/* What is new (changelog) */
.cl-intro{padding-block:4rem 2rem;border-top:0}
.cl-intro h1{font-size:clamp(2rem,5vw,3.6rem)}
.cl-intro .lead{font-size:1.15rem;color:var(--paper-dim);margin-top:1.3rem}
.cl-note{font-size:.95rem;color:var(--paper-dim);border-left:3px solid var(--brass);padding-left:.9rem;margin-top:1.2rem}
.cl-feeds{margin-top:1rem;color:var(--slate)}
.cl-tags{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.cl-tags li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;padding:.6rem .8rem;background:var(--panel);border:1px solid var(--line);border-radius:4px}
.cl-tags .cl-links{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.92rem}
.cl-entries{display:grid;gap:1.4rem}
.entry{padding:1.3rem 1.4rem;background:var(--panel);border:1px solid var(--line);border-radius:4px;scroll-margin-top:1rem}
.entry:target{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.entry h2{font-size:1.35rem;margin:.3rem 0 .6rem}
.entry h2 a{color:var(--paper)}
.entry h2 a:hover{color:var(--brass)}
.entry p{margin:0;color:var(--paper-dim)}
.entry .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;font-family:var(--mono);font-size:.8rem;color:var(--slate)}
.tag,.badge{display:inline-block;font-family:var(--mono);font-size:.74rem;line-height:1;padding:.25rem .5rem;border-radius:2px;border:1px solid var(--line);color:var(--paper-dim);white-space:nowrap}
.badge.pending{color:var(--ink);background:var(--brass);border-color:var(--brass);font-weight:500}
.cl-filter{font-family:var(--mono);font-size:.74rem;line-height:1;padding:.3rem .6rem;border-radius:2px;border:1px solid var(--line);background:transparent;color:var(--paper-dim);cursor:pointer}
.cl-filter[aria-pressed="true"]{border-color:var(--brass);color:var(--brass)}
.entry[hidden]{display:none}

/* marketing pages (why, features, pricing, faq, migration, acceptable use, status, contact) */
.page-intro{padding-block:4rem 2.4rem;border-top:0}
.page-intro h1{font-size:clamp(2rem,5vw,3.6rem)}
.page-intro .lead{font-size:1.15rem;color:var(--paper-dim);margin-top:1.3rem}
.page-intro .cta,.next .cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem;align-items:center}
.banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;border:1px solid var(--hold);background:rgba(216,154,59,.08);border-radius:4px;padding:.75rem 1rem;margin-top:1.4rem;font-size:.97rem}
.banner b{font-family:var(--mono);font-weight:500;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hold)}
.toc{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem 1.6rem;counter-reset:t}
.toc li{counter-increment:t;display:flex;gap:.6rem;align-items:baseline}
.toc li::before{content:counter(t);font-family:var(--mono);font-size:.85rem;color:var(--brass);flex:none}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.facts li{border-top:1px solid var(--line);padding-top:.8rem;color:var(--paper-dim)}
.facts b{display:block;font-size:1.9rem;color:var(--brass);line-height:1.1}
.guide{margin:1.6rem 0 0;padding-left:1.4rem;display:grid;gap:1.1rem}
.guide li::marker{color:var(--brass);font-family:var(--mono)}
.guide b{display:block;font-weight:600;margin-bottom:.2rem}
.policy h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:2.4rem 0 .8rem}
.policy .plans table{min-width:0}
.policy ul,.policy ol{padding-left:1.3rem;margin:0 0 1rem}
.policy li{margin-bottom:.4rem}
.status-now{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.status-now li{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline;padding:.7rem .9rem;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--steel);border-radius:4px}
.status-now b{font-family:var(--mono);font-weight:500;font-size:.8rem;min-width:7.5rem}
.status-now .up{color:var(--ok)} .status-now .off{color:var(--hold)}
.mail-cta{font-family:var(--mono);font-size:1.05rem;overflow-wrap:anywhere}
@media (max-width:480px){.wrap{padding-inline:16px}}
@media (max-width:400px){.nav{gap:.6rem}.brand{font-size:1.05rem;gap:.5rem}.brand svg{width:28px;height:28px}}
.subhead{margin:2.6rem 0 .6rem}
.feat.stack{grid-template-columns:1fr;margin-top:0}
.gap-top{margin-top:1.4rem}
.policy h2.first{margin-top:0}

/* API reference (/api/): generated from openapi.json by openapi_ref.mjs */
.api-meta{font-size:.95rem;color:var(--paper-dim);border-left:3px solid var(--brass);padding-left:.9rem}
.api-toc{margin-bottom:2rem}
.api-tag{padding-block:2.2rem}
.api-tag h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.4rem}
.op{border-top:1px solid var(--line);padding:1.2rem 0 1.4rem;scroll-margin-top:1rem}
.op:target{border-top-color:var(--brass)}
.op h3{font-family:var(--mono);font-weight:500;font-size:.98rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.5rem}
.op h3 code{font-size:.98rem;overflow-wrap:anywhere}
.op h4{font-family:var(--mono);font-weight:500;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin:1rem 0 .4rem}
.op p{margin-bottom:.5rem}
.m{display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;padding:.22rem .5rem;border-radius:2px;border:1px solid var(--line);color:var(--paper)}
.m.get{border-color:var(--ok);color:var(--ok)} .m.post{border-color:var(--brass);color:var(--brass)} .m.patch,.m.put{border-color:var(--hold);color:var(--hold)} .m.delete{border-color:var(--stamp);color:var(--stamp)}
.api-fields{min-width:0;font-size:.9rem;margin:0}
.api-fields th,.api-fields td{padding:.45rem .6rem;vertical-align:top}
.api-fields td code{font-size:.88em}
.req{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stamp);margin-left:.3rem}
.api-resp{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.92rem;color:var(--paper-dim)}
.api-resp b{font-family:var(--mono);font-weight:500;color:var(--paper)}
.api-kind{font-size:.85rem;margin-top:.6rem}
.api-base{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;margin:1rem 0 0;font-size:.95rem}
.api-base dt{color:var(--slate);font-family:var(--mono);font-size:.8rem;align-self:center}
.api-base dd{margin:0}
.api-base code{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:.2rem .5rem}

/* docs (/docs/, docs.mjs): a sidebar and an article; the sidebar becomes a row of links under 860px. No script. */
.docs-intro{padding-bottom:1.8rem}
.docs-intro .crumb{font-family:var(--mono);font-size:.8rem;color:var(--slate);margin-bottom:1rem}
.docs{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:3rem;padding-block:2rem 3.6rem;border-top:1px solid var(--line)}
.docs-side{min-width:0}
.docs-nav{position:sticky;top:1rem;display:grid;gap:1.3rem;font-size:.92rem}
.docs-nav h2{font-family:var(--mono);font-style:normal;font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:0 0 .35rem}
.docs-nav a{display:block;color:var(--paper-dim);padding:.2rem 0;line-height:1.35}
.docs-nav a[aria-current="page"]{color:var(--brass)}
.docs-body{min-width:0}
.docs-body>h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2.6rem 0 .8rem;scroll-margin-top:1rem}
.docs-body>h2:first-child{margin-top:0}
.docs-body h3{margin:1.8rem 0 .6rem;scroll-margin-top:1rem}
.docs-body h4{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin:1.4rem 0 .5rem}
.docs-body pre{margin:0 0 1.2rem;font-size:.86rem}
.docs-body ul,.docs-body ol{padding-left:1.3rem;margin:0 0 1rem}
.docs-body li{margin-bottom:.4rem}
.docs-body li>ul,.docs-body li>ol{margin:.4rem 0 0}
.docs-body table{min-width:0;font-size:.92rem;margin:0}
.docs-body td,.docs-body th{padding:.55rem .7rem}
.docs-body td code,.docs-body li code,.docs-body p code{background:var(--panel-2);border-radius:3px;padding:.05rem .3rem;font-size:.86em;overflow-wrap:anywhere}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--panel);margin:0 0 1.2rem}
.callout{border-left:3px solid var(--brass);background:var(--panel);padding:.8rem 1rem;margin:0 0 1.2rem;color:var(--paper-dim)}
.callout>:last-child{margin-bottom:0}
.tabs{position:relative;margin:0 0 1.4rem;border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.tabs>input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.tabs>label{display:inline-block;padding:.6rem .95rem;font-family:var(--mono);font-size:.8rem;color:var(--paper-dim);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs>label:hover{color:var(--paper)}
.tabs>input:focus-visible+label{outline:2px solid var(--brass);outline-offset:-2px}
.tabs .panels{border-top:1px solid var(--line);padding:1rem 1rem .2rem}
.tabs .panel{display:none}
.tabs .panel>pre{background:var(--ink)}
.tabs>input:nth-of-type(1):checked~label:nth-of-type(1),.tabs>input:nth-of-type(2):checked~label:nth-of-type(2),.tabs>input:nth-of-type(3):checked~label:nth-of-type(3),.tabs>input:nth-of-type(4):checked~label:nth-of-type(4),.tabs>input:nth-of-type(5):checked~label:nth-of-type(5){color:var(--brass);border-bottom-color:var(--brass)}
.tabs>input:nth-of-type(1):checked~.panels>.panel:nth-child(1),.tabs>input:nth-of-type(2):checked~.panels>.panel:nth-child(2),.tabs>input:nth-of-type(3):checked~.panels>.panel:nth-child(3),.tabs>input:nth-of-type(4):checked~.panels>.panel:nth-child(4),.tabs>input:nth-of-type(5):checked~.panels>.panel:nth-child(5){display:block}
.cards{list-style:none;margin:1.2rem 0 1.6rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}
.cards li{margin:0}
.cards a{display:block;height:100%;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--paper)}
.cards a:hover{border-color:var(--brass);text-decoration:none}
.cards b{display:block;font-weight:600;margin-bottom:.3rem;color:var(--brass);font-family:var(--display);font-style:italic;font-size:1.1rem}
.cards span{color:var(--slate);font-size:.93rem}
.docs-twin{margin:2.6rem 0 0;font-size:.88rem;border-top:1px solid var(--line);padding-top:1rem}
@media (max-width:860px){.docs{grid-template-columns:1fr;gap:1.4rem}.docs-nav{position:static;display:flex;flex-wrap:wrap;gap:.3rem .9rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}.docs-nav>div{display:contents}.docs-nav h2{width:100%;margin:.5rem 0 0}.docs-nav a{padding:.1rem 0}}

/* the field: the sight and its dot trail, faint, upper right of every inner page's opening (not the home page, where
   the film frame carries it). Pure SVG, no weight; dimmer in light mode. */
main{position:relative}
.field{position:absolute;right:-8vw;top:-6.5rem;width:min(72vw,900px);aspect-ratio:1200/520;z-index:0;pointer-events:none;opacity:.26}
.field svg{width:100%;height:100%}
.field .trail circle{fill:var(--paper);opacity:.55}
.field .trail circle:nth-child(1){opacity:.12}.field .trail circle:nth-child(2){opacity:.2}.field .trail circle:nth-child(3){opacity:.3}.field .trail circle:nth-child(4){opacity:.42}
.field .sight{stroke:var(--red)}
.field .sight path{stroke:var(--red)}
main>*:not(.field){position:relative;z-index:1}
.page-index .field{display:none}
@media (max-width:860px){.field{width:120vw;right:-30vw;top:-1rem;opacity:.2}}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .field{opacity:.14}}
:root[data-theme="light"] .field{opacity:.14}

/* live inbox (home, under the hero): a real demo inbox in one card (src/assets/demo.js). The intro spans the card's
   full width (no mid-screen cap). Status dot: slate connecting, ok-green live with a soft pulse, stamp-red expired. */
.live{padding-block:2.6rem 3.2rem}
.live-head p{color:var(--paper-dim);margin-bottom:1.3rem}
.live-card{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--brass);border-radius:4px;padding:1.1rem 1.3rem 1rem}
.live-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.live-status{display:inline-flex;align-items:center;gap:.5rem}
.live-status i{width:.6rem;height:.6rem;border-radius:50%;background:var(--slate);flex:none}
.live-status[data-live-status="live"]{color:var(--ok)}
.live-status[data-live-status="live"] i{background:var(--ok);animation:live-pulse 2s ease-out infinite}
.live-status[data-live-status="expired"]{color:var(--stamp)}
.live-status[data-live-status="expired"] i{background:var(--stamp);animation:none}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(76,175,122,.55)}70%{box-shadow:0 0 0 .55rem rgba(76,175,122,0)}100%{box-shadow:0 0 0 0 rgba(76,175,122,0)}}
.live-ttl{font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.live-address{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:.9rem 0 1rem;padding:.8rem 1rem;background:var(--ink);border:1px solid var(--line);border-radius:3px}
.live-address code{font-size:1.08rem;color:var(--brass);overflow-wrap:anywhere;flex:1 1 auto;min-width:0}
.live-copy,.live-restart{font:inherit;font-size:.86rem;font-family:var(--mono);color:var(--paper);background:transparent;border:1px solid var(--line);border-radius:3px;padding:.4rem .75rem;cursor:pointer;flex:none}
.live-copy:hover,.live-restart:hover{border-color:var(--brass);color:var(--brass)}
.live-copy[hidden]{display:none}
.live-list{list-style:none;margin:0;padding:0}
.live-list li{display:grid;grid-template-columns:minmax(8rem,11rem) 1fr auto;gap:.3rem 1rem;align-items:baseline;padding:.7rem 0;border-top:1px solid var(--line);font-size:.95rem}
.live-list li:first-child{border-top:0}
.live-from{color:var(--paper);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-body{min-width:0;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-body b{color:var(--paper);font-weight:600;margin-right:.6rem}
.live-list time{font-family:var(--mono);font-size:.8rem;color:var(--slate);white-space:nowrap}
.live-list li.is-new{animation:live-land .8s ease-out}
@keyframes live-land{from{background:rgba(210,168,59,.22)}to{background:transparent}}
.live-empty{text-align:center;color:var(--slate);padding:1.6rem 1rem 1.2rem}
.live-empty[hidden]{display:none}
.live-empty svg{width:48px;height:48px;color:var(--brass-dim);margin-bottom:.4rem}
.live-empty p{margin:0 0 .25rem}
.live-empty b{color:var(--paper)}
.live-note{margin:.8rem 0 0;padding:.65rem .9rem;border:1px solid var(--hold);border-radius:3px;background:rgba(216,154,59,.08);font-size:.93rem;display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}
.live-note[hidden]{display:none}
.live-static{color:var(--paper-dim);margin:.6rem 0 0}
.live-fine{margin:.9rem 0 0;font-family:var(--mono);font-size:.76rem;color:var(--slate)}
@media (max-width:640px){.live-list li{grid-template-columns:1fr auto}.live-body{grid-column:1 / -1;white-space:normal}}
@media (prefers-reduced-motion:reduce){.live-status i,.live-list li.is-new{animation:none}}