/* VisitorFix
   Paper white, black ink, one highlighter yellow: it marks the thing a visitor ran into, and the button that fixes it.
   Archivo Expanded (wide and heavy) for headlines, Instrument Sans for everything else. IBM Plex Mono appears only
   inside the things the product really produces: problem records, fix prompts, script tags and the terminal.
   All three are SIL Open Font License fonts served from this site.
   The hero sequence and the six small drawings are the only things that move on their own; both stop for
   visitors who ask for reduced motion. Everything else moves only in answer to a click. */

@font-face{font-family:"Archivo Expanded";src:url("/fonts/ArchivoExpanded-Latin1.woff2") format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/InstrumentSans-Latin1.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2");font-weight:500 600;font-display:swap}

:root{
  --paper:#FFFFFF; --ledger:#F1F2F4; --rule:#DADDE2; --rule-2:#B6BBC4;
  --ink:#000000; --text:#23262C; --dim:#5E636D;
  --mark:#FFE14A; --mark-2:#FFD500; --mark-soft:#FFF4B8;
  --broken:#D92D20; --broken-soft:#FDECEA; --warn:#A34A06; --warn-soft:#FFF1E0; --fixed:#067647; --fixed-soft:#E5F4EC;
  --f-d:"Archivo Expanded","Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --f:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --max:1200px; --pad:clamp(20px,4vw,40px); --hd:64px;
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hd) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.55 var(--f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
p,li,dd{text-wrap:pretty}
ul,ol{margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
code{font-family:var(--f-mono);font-size:.88em}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
::selection{background:var(--mark)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap.mid{max-width:1040px}
.wrap.narrow{max-width:760px}
.dim{color:var(--dim)}
.fine{font-size:14px;line-height:1.5;color:var(--dim)}
.num{font-variant-numeric:tabular-nums}
.ul{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.ul:hover{text-decoration-color:var(--ink)}
.fine a,.lede a,.prose a,.faq-a a,.note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.fine a:hover,.lede a:hover,.prose a:hover,.faq-a a:hover,.note a:hover{text-decoration-color:var(--ink)}

/* headline type: Archivo Expanded, wide and heavy */
.h1,.h2,.h3{font-family:var(--f-d);font-weight:800;letter-spacing:-.035em;line-height:1}
.h1{font-size:clamp(36px,5.2vw,64px);letter-spacing:-.045em;line-height:.98}
.h2{font-size:clamp(28px,3.6vw,46px)}
.h3{font-size:clamp(19px,1.7vw,22px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.lede{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--text);max-width:36em}

/* ---------- buttons ---------- */
.btn{--h:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 20px;border-radius:7px;border:1.5px solid transparent;
  font:600 16px/1 var(--f);text-decoration:none;white-space:nowrap;cursor:pointer;background:var(--ink);color:#fff;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn.sm{--h:36px;padding:0 13px;font-size:14.5px;border-radius:6px}
.btn.lg{--h:54px;padding:0 26px;font-size:17px}
.btn:hover{background:#2A2D33}
.btn-mark{background:var(--mark);color:var(--ink);border-color:var(--ink)}
.btn-mark:hover{background:var(--mark-2)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn-line:hover{background:transparent;border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--mark)}
.btn-ghost-dark{background:transparent;color:#fff;border-color:#4A4E57}
.btn-ghost-dark:hover{background:transparent;border-color:#fff}
.btn-danger{background:#fff;color:var(--broken);border-color:#F1B8B2}
.btn-danger:hover{background:var(--broken);color:#fff;border-color:var(--broken)}
.btn.link{background:none;border:0;height:auto;padding:8px 10px;color:var(--text);font-weight:500;font-size:15px;line-height:1.55}
.btn.link:hover{color:var(--ink);background:var(--ledger)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* the copy button swaps its label for a tick when it worked */
.copy{position:relative}
.copy .tick{display:none;width:15px;height:15px}
.copy.copied .tick{display:block;animation:pop .35s var(--ease-out)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);border-bottom:1px solid transparent;transition:border-color .2s}
.hd.solid,.hd.app{border-bottom-color:var(--rule)}
@supports (backdrop-filter:blur(8px)){.hd{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px)}}
.hd-in{display:flex;align-items:center;gap:20px;height:var(--hd)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 17px/1 var(--f-d);letter-spacing:-.04em;flex:none}
.brand svg{width:28px;height:28px;flex:none}
.hd-nav{display:none;align-items:center;gap:2px;margin-left:auto}
.hd-nav a,.hd-nav .btn.link{color:var(--text);text-decoration:none;font-size:15px;font-weight:500;padding:8px 11px;border-radius:6px}
.hd-nav a:hover{color:var(--ink);background:var(--ledger)}
.hd-nav a[aria-current="page"]{color:var(--ink);background:linear-gradient(var(--mark),var(--mark)) no-repeat 11px calc(100% - 6px)/calc(100% - 22px) 5px}
.hd-nav form{margin:0}
.hd-act{display:flex;align-items:center;gap:6px;margin-left:auto}
.hd-nav + .hd-act{margin-left:12px}
.hd-login{color:var(--text);text-decoration:none;font-size:15px;font-weight:500;padding:8px 10px;border-radius:6px}
.hd-login:hover{color:var(--ink);background:var(--ledger)}
@media (min-width:960px){.hd-nav{display:flex}}
/* the signed-in nav always shows: three short links */
.hd.app .hd-nav{display:flex}
@media (max-width:520px){.hd.app .hd-nav a,.hd.app .hd-nav .btn.link{padding:8px 7px;font-size:14px}.hd.app .brand span{display:none}}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,9vw,112px) 0}
.sec + .sec{border-top:1px solid var(--rule)}
.sec.ledger{background:var(--ledger);border-top:0}
.sec.ink{background:var(--ink);color:#C9CCD3;border-top:0}
.sec.ink + .sec{border-top:0}
.sec.ledger + .sec{border-top:0}
.sec.ink h2,.sec.ink h3{color:#fff}
.sec-head{display:grid;gap:18px 48px;margin-bottom:clamp(36px,5vw,56px)}
.sec-head .lede{color:inherit}
@media (min-width:900px){.sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}.sec-head .lede{justify-self:start}}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vw,88px) 0 clamp(56px,8vw,96px)}
.hero-grid{display:grid;gap:48px;align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:56px}}
.hero .h1{margin-bottom:24px}
.hero .lede{margin-bottom:30px}
.hero .fine{margin-top:14px}
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px;padding-top:22px;border-top:1px solid var(--rule);max-width:560px}
.facts3 b{display:block;font:800 clamp(20px,2vw,26px)/1.05 var(--f-d);letter-spacing:-.04em;color:var(--ink);margin-bottom:6px}
.facts3 span{display:block;font-size:14px;line-height:1.4;color:var(--dim)}
@media (max-width:520px){.facts3{grid-template-columns:1fr;gap:12px}.facts3 > div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline}.facts3 b{margin:0}}

/* the stage: a visitor's phone, the problem record it produces, and the fix prompt.
   Sized off its own width so it scales as one picture. */
.stage{container-type:inline-size;position:relative;width:100%;max-width:600px;justify-self:center}
.stage-in{position:relative;aspect-ratio:600/540;font-size:max(9px,calc(100cqi / 40))}
.device{position:absolute;left:0;top:2%;width:38%;height:90%;border:.16em solid var(--ink);border-radius:2.2em;background:#fff;padding:.5em;overflow:visible;z-index:1}
.device::before{content:"";position:absolute;left:50%;top:.55em;width:28%;height:.55em;border-radius:1em;background:var(--ink);transform:translateX(-50%)}
.d-screen{position:relative;height:100%;border-radius:1.6em;background:var(--ledger);overflow:hidden;padding:1.9em .9em .9em}
.d-url{font:500 .62em/1 var(--f);color:var(--dim);background:#fff;border-radius:2em;padding:.55em .9em;margin-bottom:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--rule)}
.d-brand{font:800 .82em/1.1 var(--f-d);letter-spacing:-.04em;color:var(--ink);margin-bottom:.9em}
.d-h{font:700 1.08em/1.15 var(--f);color:var(--ink);margin-bottom:.5em;letter-spacing:-.01em}
.d-line{height:.5em;border-radius:1em;background:#D9DCE1;margin:.45em 0}
.d-line.w80{width:80%}.d-line.w60{width:60%}.d-line.w45{width:45%}.d-line.w70{width:70%}
.d-card{background:#fff;border-radius:.9em;padding:.9em;margin:1em 0;border:1px solid var(--rule)}
.d-price{font:700 1.5em/1 var(--f);color:var(--ink);margin:.25em 0 .7em}
.d-price small{font-size:.5em;font-weight:500;color:var(--dim)}
.d-btn{position:relative;display:block;width:100%;text-align:center;font:600 .8em/1 var(--f);color:#fff;background:#2B2F36;border-radius:.6em;padding:1em 0}
.d-input{font:400 .72em/1 var(--f);color:var(--dim);background:#fff;border:1px solid var(--rule-2);border-radius:.55em;padding:.85em .8em;margin:.35em 0 .8em}
.d-label{font:600 .66em/1 var(--f);color:var(--text);margin-top:.6em}
.d-table{position:relative;width:235%;margin-top:.8em;border:1px solid var(--rule-2);border-radius:.5em;background:#fff;font:500 .62em/1 var(--f);display:grid;grid-template-columns:repeat(5,1fr)}
.d-table span{padding:.9em .7em;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);white-space:nowrap;color:var(--text)}
.d-table span:nth-child(-n+5){font-weight:700;color:var(--ink);background:var(--ledger)}
.d-screen[data-screen] .scr{display:none}
.d-screen[data-screen="pricing"] .scr-pricing,.d-screen[data-screen="signup"] .scr-signup,.d-screen[data-screen="menu"] .scr-menu{display:block}
.swipe{position:absolute;left:22%;top:58%;width:56%;height:1.6em;opacity:0;z-index:2}
.swipe svg{width:100%;height:100%;overflow:visible}

/* taps */
.taps{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.taps i{position:absolute;left:-1.1em;top:-1.1em;width:2.2em;height:2.2em;border-radius:50%;border:.16em solid var(--ink);background:rgba(255,225,74,.55);opacity:0}
.stage.s-tap .taps i{animation:tap .62s var(--ease-out) both}
.stage.s-tap .taps i:nth-child(2){animation-delay:.38s}
.stage.s-tap .taps i:nth-child(3){animation-delay:.62s}
.stage.s-tap .taps i:nth-child(4){animation-delay:.84s}
@keyframes tap{0%{transform:scale(.3);opacity:0}25%{opacity:1}100%{transform:scale(1.7);opacity:0}}
.stage.s-tap .scr-signup .d-btn{animation:busy 1.4s .2s steps(1) both}
@keyframes busy{0%{color:transparent}100%{color:#fff}}
.d-btn.alt{background:#fff;color:var(--ink);border:1px solid var(--rule-2)}
.swipe{display:none}
.d-screen[data-screen="menu"] ~ .swipe{display:block}
.stage.s-tap .swipe{animation:swipe 1.3s .5s var(--ease) both}
@keyframes swipe{0%{opacity:0;transform:translateX(-30%)}30%{opacity:1}100%{opacity:0;transform:translateX(30%)}}

/* the problem record */
.record{position:absolute;left:30%;top:7%;width:70%;background:#fff;border:.13em solid var(--ink);border-radius:.6em;padding:1.15em 1.25em 1.1em;z-index:2}
.rec-top{display:flex;align-items:baseline;justify-content:space-between;gap:1em;padding-bottom:.75em;border-bottom:.13em solid var(--ink);margin-bottom:.4em}
.rec-top b{font:800 1.12em/1 var(--f-d);letter-spacing:-.04em;color:var(--ink)}
.rec-top span{font:500 .78em/1 var(--f);color:var(--dim);white-space:nowrap}
.rec-rows{display:grid;grid-template-columns:auto 1fr;column-gap:1.1em;margin:0}
.rec-rows dt,.rec-rows dd{margin:0;padding:.55em 0;border-bottom:1px solid var(--rule)}
.rec-rows dt{font:500 .78em/1.5 var(--f);color:var(--dim);white-space:nowrap}
.rec-rows dd{font:400 .82em/1.45 var(--f-mono);color:var(--ink);min-width:0;overflow-wrap:anywhere}
.rec-rows dd span{display:inline-block;max-width:100%;vertical-align:top;clip-path:inset(0 100% 0 0)}
.rec-rows dt{opacity:0}
.stage.s-fill .rec-rows dt{opacity:1;transition:opacity .2s}
.stage.s-fill .rec-rows dd span{clip-path:inset(0 0 0 0);transition:clip-path .55s steps(18,end)}
.stage.s-fill .rec-rows > :nth-child(3),.stage.s-fill .rec-rows > :nth-child(4) span{transition-delay:.3s}
.stage.s-fill .rec-rows > :nth-child(5),.stage.s-fill .rec-rows > :nth-child(6) span{transition-delay:.6s}
.stage.s-fill .rec-rows > :nth-child(7),.stage.s-fill .rec-rows > :nth-child(8) span{transition-delay:.9s}
.stage.s-fill .rec-rows > :nth-child(9),.stage.s-fill .rec-rows > :nth-child(10) span{transition-delay:1.2s}
.rec-rows dd span.hl{background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 55%/0% 86%;padding:0 .15em;margin:0 -.15em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.stage.s-mark .rec-rows dd span.hl{background-size:100% 86%;transition:clip-path .55s steps(18,end),background-size .5s var(--ease)}
.rec-sev{display:flex;align-items:center;gap:.5em;margin-top:.8em;font:600 .78em/1 var(--f);opacity:0;transition:opacity .25s}
.stage.s-mark .rec-sev{opacity:1}
.rec-sev i{width:.62em;height:.62em;border-radius:50%;background:currentColor}
.rec-sev.critical{color:var(--broken)}.rec-sev.warning{color:var(--warn)}.rec-sev.minor{color:var(--dim)}

/* the fix prompt that comes out of it */
.pcard{position:absolute;left:22%;top:63%;width:78%;background:var(--ink);color:#E7E9ED;border-radius:.6em;padding:1em 1.15em 1.1em;z-index:3;opacity:0;transform:translateY(1.2em)}
.stage.s-prompt .pcard{opacity:1;transform:none;transition:opacity .35s,transform .5s var(--ease-out)}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.75em}
.pc-top span{font:600 .82em/1 var(--f);color:#fff}
.pc-btn{display:inline-flex;align-items:center;gap:.4em;font:600 .74em/1 var(--f);color:var(--ink);background:var(--mark);border-radius:.45em;padding:.6em .8em;white-space:nowrap;transition:transform .15s}
.pc-btn .ok{display:none}
.stage.s-copied .pc-btn{transform:scale(.96)}
.stage.s-copied .pc-btn .go{display:none}
.stage.s-copied .pc-btn .ok{display:inline}
.pc-text{font:400 .74em/1.55 var(--f-mono);color:#C9CCD3;max-height:4.65em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.stage.fade .record,.stage.fade .pcard,.stage.fade .d-screen>*{opacity:0;transition:opacity .3s}
.stage-note{font-size:13px;color:var(--dim);margin-top:12px}

/* narrow pictures: the record sits under the phone's corner, and the prompt under that */
@container (max-width:440px){
  .stage-in{aspect-ratio:auto;height:auto;font-size:max(10px,calc(100cqi / 30));display:grid;grid-template-columns:44% 1fr}
  .device{position:relative;grid-row:1/3;width:auto;height:34em;top:0}
  .record{position:relative;left:auto;top:auto;width:auto;margin:3em 0 0 -12%;align-self:start}
  .pcard{position:relative;left:auto;top:auto;width:auto;grid-column:1/-1;margin-top:-2.5em}
}

/* ---------- problem log ---------- */
.log-grid{display:grid;gap:40px}
@media (min-width:1000px){.log-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px}}
.tbl-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.tbl-head b{font:700 16px/1.2 var(--f);color:var(--ink)}
.tbl-head span{font-size:14px;color:var(--dim)}
.plog{width:100%;border-collapse:collapse;font-size:15px}
.plog th{text-align:left;font-weight:500;font-size:13px;color:var(--dim);padding:10px 12px 10px 0;border-bottom:1px solid var(--rule)}
.plog td{padding:14px 12px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}
.plog td:last-child,.plog th:last-child{padding-right:0;text-align:right;white-space:nowrap}
.plog .h{color:var(--ink);margin-top:7px}
.plog .who{color:var(--dim);font-size:13.5px;margin-top:3px}
.plog .vis{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
@media (max-width:640px){.plog .hide-s{display:none}}
.sev{display:inline-flex;align-items:center;gap:7px;font:600 13.5px/1 var(--f);white-space:nowrap}
.sev::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.sev.critical{color:var(--broken)}.sev.warning{color:var(--warn)}.sev.minor{color:var(--dim)}
.first{background:#fff;border:1.5px solid var(--ink);border-radius:10px;padding:24px;align-self:start}
.first-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.first-top b{font:700 16px/1.2 var(--f);color:var(--ink)}
.first h3{font:600 19px/1.35 var(--f);color:var(--ink);margin:10px 0 16px;letter-spacing:-.005em}
.why{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:14.5px;margin:0 0 18px}
.why dt{color:var(--dim)}
.why dd{margin:0;color:var(--ink)}
.first .sheet{margin-top:4px}

/* ---------- sheet: anything the product hands you to copy ---------- */
.sheet{border:1.5px solid var(--ink);border-radius:9px;background:#fff;overflow:hidden}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 9px 9px 14px;background:var(--ledger);border-bottom:1px solid var(--rule)}
.sheet-top > span{font:600 14px/1.2 var(--f);color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
pre.prompt{margin:0;padding:16px 16px 18px;font:400 13.5px/1.62 var(--f-mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;max-height:none}
.sheet.ink{background:#0C0D0F;border-color:#0C0D0F}
.sheet.ink .sheet-top{background:#1B1D21;border-bottom-color:#2B2E34}
.sheet.ink .sheet-top > span{color:#fff}
.sheet.ink pre.prompt{color:#D7DAE0}
.sheet.short pre.prompt{max-height:9.8em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}

/* ---------- what it catches ---------- */
.catch{display:grid;border-top:2px solid var(--ink)}
@media (min-width:860px){.catch{grid-template-columns:1fr 1fr;column-gap:56px}}
.catch li{list-style:none;display:grid;grid-template-columns:112px 1fr;gap:22px;align-items:start;padding:26px 0;border-bottom:1px solid var(--rule)}
.catch h3{font:700 19px/1.25 var(--f);color:var(--ink);margin:2px 0 6px;letter-spacing:-.01em}
.catch p{font-size:16px;color:var(--text)}
.catch-note{margin-top:18px}
@media (max-width:420px){.catch li{grid-template-columns:84px 1fr;gap:16px}}

/* the small drawings: ink lines, the visitor's moment in yellow, failure in red. They play while on screen. */
.dr{width:100%;height:auto;overflow:visible}
.dr .k{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dr .kf{fill:var(--ink)}
.dr .m{fill:var(--mark);stroke:var(--ink);stroke-width:2}
.dr .r{fill:none;stroke:var(--broken);stroke-width:2;stroke-linecap:round}
.dr .rf{fill:var(--broken)}
.dr .soft{fill:var(--ledger)}
.dr .t{font:700 11px var(--f);fill:#fff}
.dr .ring,.dr .ring2,.dr .ring3,.dr .ring4,.dr .slide,.dr .pop,.dr .arrow,.dr .torn{transform-box:fill-box;transform-origin:center}
.dr .ring,.dr .ring2,.dr .ring3,.dr .ring4{opacity:0}
.dr .slide{transform-origin:left center}
.dr .pop,.dr .torn{opacity:0}
.dr.play .ring{animation:dr-ring 2.6s var(--ease-out) infinite}
.dr.play .ring2{animation:dr-ring 2.6s .2s var(--ease-out) infinite}
.dr.play .ring3{animation:dr-ring 2.6s .4s var(--ease-out) infinite}
.dr.play .ring4{animation:dr-ring 2.6s .6s var(--ease-out) infinite}
@keyframes dr-ring{0%{transform:scale(.4);opacity:0}12%{opacity:1}45%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.dr.play .slide{animation:dr-slide 3.2s var(--ease) infinite}
@keyframes dr-slide{0%,15%{transform:scaleX(.62)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(.62)}}
.dr.play .pop{animation:dr-pop 3.2s var(--ease-out) infinite}
@keyframes dr-pop{0%,30%{opacity:0;transform:scale(.6)}40%,85%{opacity:1;transform:none}100%{opacity:0}}
.dr.play .arrow{animation:dr-arrow 3.2s var(--ease) infinite}
@keyframes dr-arrow{0%{opacity:0;transform:translateX(-6px)}20%,70%{opacity:1;transform:none}100%{opacity:0}}
.dr.play .torn{animation:dr-pop 3.6s var(--ease-out) infinite}
.dr.done .ring,.dr.done .pop,.dr.done .arrow,.dr.done .torn{opacity:1}
.dr.done .slide{transform:none}

/* ---------- how it works ---------- */
.steps{display:grid;gap:0;counter-reset:s;border-top:2px solid var(--ink)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;border-top:0}}
.steps > li{list-style:none;counter-increment:s;padding:26px 0;border-bottom:1px solid var(--rule)}
@media (min-width:900px){.steps > li{border-top:2px solid var(--ink);border-bottom:0;padding-top:22px}}
.steps > li::before{content:counter(s);display:block;font:800 40px/1 var(--f-d);letter-spacing:-.05em;color:var(--ink);margin-bottom:18px}
.steps h3{font:700 20px/1.25 var(--f);color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.steps p{font-size:16px}
.steps .sheet{margin-top:18px}
.steps pre.prompt{font-size:12.5px;padding:12px 14px}

/* ---------- sample with builder picker ---------- */
.picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.picker button{border:1.5px solid var(--rule-2);background:#fff;border-radius:999px;padding:8px 14px;font:600 14.5px/1 var(--f);color:var(--text);cursor:pointer;transition:border-color .15s,background-color .15s}
.picker button:hover{border-color:var(--ink)}
.picker button[aria-selected="true"]{background:var(--mark);border-color:var(--ink);color:var(--ink)}
.sample-grid{display:grid;gap:36px}
@media (min-width:960px){.sample-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:start}}
.sample-notes{display:grid;gap:22px}
.sample-notes h3{font:700 17px/1.3 var(--f);color:var(--ink);margin-bottom:4px}
.sample-notes p{font-size:15.5px}
.sample-notes > div{padding-top:16px;border-top:1px solid var(--rule)}
.sample-notes > div:first-child{border-top:2px solid var(--ink)}
pre.prompt .bl{background:var(--mark-soft)}
pre.prompt .ev{color:#3A3E46}

/* ---------- editors (dark) ---------- */
.ed-grid{display:grid;gap:40px}
@media (min-width:960px){.ed-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}}
.ed-grid .lede{color:#C9CCD3;margin:18px 0 26px}
.ed-list{display:grid;gap:12px;margin-bottom:28px}
.ed-list li{list-style:none;padding-left:22px;position:relative;font-size:16px}
.ed-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--mark);border-radius:2px}
.term{background:#0C0D0F;border:1px solid #2B2E34;border-radius:12px;overflow:hidden}
.term-top{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid #2B2E34}
.term-top i{width:10px;height:10px;border-radius:50%;background:#3A3D44}
.term-top span{margin-left:8px;font:500 13px/1 var(--f);color:#8A8F99}
.term-body{padding:18px 18px 22px;font:400 13.5px/1.7 var(--f-mono);color:#C9CCD3;overflow-x:auto}
.term-body p{white-space:pre-wrap;overflow-wrap:anywhere}
.term-body .you{color:#fff}
.term-body .you::before{content:"> ";color:var(--mark)}
.term-body .cmd::before{content:"$ ";color:#8A8F99}
.term-body .tool{color:#9DA3AE}
.term-body .tool b{font-weight:500;color:var(--mark)}
.term-body .done{color:#7BD3A4}
.term-body .gap{height:10px}
.cursor{display:inline-block;width:.55em;height:1.05em;background:var(--mark);vertical-align:-.15em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- privacy ---------- */
.two{display:grid;gap:32px}
@media (min-width:860px){.two{grid-template-columns:1fr 1fr;gap:56px}}
.two h3{font:700 18px/1.3 var(--f);color:var(--ink);padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.checks li{list-style:none;display:grid;grid-template-columns:22px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:16px}
.checks svg{width:18px;height:18px;margin-top:3px}
.checks .yes path{stroke:var(--ink)}
.checks .no path{stroke:var(--broken)}

/* ---------- plans ---------- */
.plans{display:grid;border-top:2px solid var(--ink)}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan{position:relative;padding:28px 0 32px;border-bottom:1px solid var(--rule)}
@media (min-width:900px){.plan{padding:28px 32px 34px;border-bottom:0;border-left:1px solid var(--rule)}.plan:first-child{border-left:0;padding-left:0}}
.plan h3{font:700 19px/1.2 var(--f);color:var(--ink);display:flex;align-items:center;gap:10px}
.plan .badge{font:600 12.5px/1 var(--f);color:var(--ink);background:var(--mark);border-radius:4px;padding:5px 7px}
.plan .price{font:800 48px/1 var(--f-d);letter-spacing:-.05em;color:var(--ink);margin:18px 0 4px}
.plan .price span{font:500 15px/1 var(--f);letter-spacing:0;color:var(--dim);margin-left:4px}
.plan .for{font-size:15px;color:var(--dim);margin-bottom:20px}
.plan ul{display:grid;gap:10px;margin:0 0 26px}
.plan li{list-style:none;display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:15.5px;line-height:1.45}
.plan li svg{width:15px;height:15px;margin-top:4px}
.plan li svg path{stroke:var(--ink)}
.plan.featured::before{content:"";position:absolute;left:0;right:0;top:-2px;height:6px;background:var(--mark)}
@media (min-width:900px){.plan.featured::before{left:-1px}}
.plan.current{background:linear-gradient(var(--mark-soft),var(--mark-soft))}
@media (max-width:899px){.plan.current{padding-left:18px;padding-right:18px}}
.current-label{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--f);color:var(--ink);height:46px}
.current-label::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--fixed)}
.plans-note{margin-top:22px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:32px}
@media (min-width:900px){.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}}
.faq-grid .h2{margin-bottom:18px}
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0;cursor:pointer;font:600 17px/1.35 var(--f);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#000;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px}
.faq .pm{position:relative;width:14px;height:14px;flex:none}
.faq .pm::before,.faq .pm::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--ink);transition:transform .25s var(--ease)}
.faq .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq-a{padding:0 0 22px;font-size:16px;max-width:40em}
details.anim > summary + *{overflow:hidden}
.faq-a p + p{margin-top:10px}

/* ---------- closing + footer (ink) ---------- */
.close{padding:clamp(72px,10vw,120px) 0 clamp(56px,7vw,80px)}
.close .h1{color:#fff;margin-bottom:20px;max-width:12em}
.close p{color:#C9CCD3;max-width:34em;margin-bottom:30px;font-size:18px}
.ft{background:var(--ink);color:#9DA3AE;font-size:14.5px}
.ft a{color:#C9CCD3;text-decoration:none}
.ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft-top{display:grid;gap:36px;padding:56px 0 40px;border-top:1px solid #2B2E34}
@media (min-width:860px){.ft-top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ft .brand{color:#fff;margin-bottom:14px}
.ft h4{font:600 14px/1 var(--f);color:#fff;margin-bottom:14px}
.ft ul{display:grid;gap:10px}
.ft li{list-style:none}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px 0 30px;border-top:1px solid #2B2E34;font-size:13px;color:#7C818B}
.ft.slim{background:#fff;color:var(--dim);border-top:1px solid var(--rule)}
.ft.slim a{color:var(--dim)}
.ft.slim a:hover{color:var(--ink)}
.ft.slim .ft-bot{border-top:0;padding-top:22px;padding-bottom:22px}

/* =================== the app =================== */
.app-main{padding-top:clamp(28px,4vw,48px);padding-bottom:80px;min-height:calc(100vh - var(--hd) - 70px)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-bottom:28px}
.page-head .h2{font-size:clamp(28px,3.2vw,40px)}
.page-head p{margin-top:8px}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--dim);text-decoration:none;margin-bottom:10px}
.back:hover{color:var(--ink)}
.back svg{width:14px;height:14px}

/* notes and notices */
.notice{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:8px;background:var(--mark-soft);border:1px solid #F0D560;color:var(--ink);margin-bottom:16px;font-size:15.5px}
.notice::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--ink);margin-top:7px}
.notice.error{background:var(--broken-soft);border-color:#F4C2BC}
.notice.error::before{background:var(--broken)}
.notice.ok{background:var(--fixed-soft);border-color:#B5DEC6}
.notice.ok::before{background:var(--fixed)}
.error{color:var(--broken);font-weight:500}

/* sites list */
.sites{border-top:2px solid var(--ink)}
.sites li{list-style:none;border-bottom:1px solid var(--rule)}
.site-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding:20px 12px;margin:0 -12px;text-decoration:none;border-radius:8px;transition:background-color .15s}
.site-row:hover{background:var(--ledger)}
.site-name{font:700 19px/1.25 var(--f);color:var(--ink);letter-spacing:-.01em}
.site-sub{grid-column:1;font-size:14.5px;color:var(--dim)}
.site-status{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 14px}
@media (max-width:560px){.site-row{grid-template-columns:1fr}.site-status{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:6px}}
.state{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f);color:var(--ink)}
.state::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.state.ok{color:var(--fixed)}
.state.waiting{color:var(--warn)}
.state.waiting::before{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.25}}

.empty{padding:48px 0;border-top:2px solid var(--ink);max-width:640px}
.empty h2{font:800 clamp(24px,2.6vw,30px)/1.1 var(--f-d);letter-spacing:-.04em;margin-bottom:10px}
.empty p{margin-bottom:22px;color:var(--text)}
.issues .empty{border-top:0;padding-top:36px}
.empty .sheet{margin:24px 0}

/* forms */
.form{display:grid;gap:8px;max-width:520px}
.form label{font:600 15px/1.3 var(--f);color:var(--ink);margin-top:12px}
.form label:first-of-type{margin-top:0}
.form .opt{font-weight:400;color:var(--dim)}
.form input,.form select{height:48px;padding:0 14px;border:1.5px solid var(--rule-2);border-radius:7px;background:#fff;font-size:16px;color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
.form select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 15px center;padding-right:40px}
.form input:hover,.form select:hover{border-color:var(--ink)}
.form input:focus,.form select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--mark)}
.form .hint{font-size:14px;color:var(--dim)}
.form .btn{justify-self:start;margin-top:18px}
.split{display:grid;gap:36px;padding:clamp(24px,5vw,64px) 0}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}}
.split .h1{font-size:clamp(34px,4.4vw,54px);margin-bottom:18px}
.split .aside{display:grid;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--rule)}
.split .aside li{list-style:none;display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:15.5px}
.split .aside svg{width:15px;height:15px;margin-top:4px}
.split .aside svg path{stroke:var(--ink)}
.panel{border:1.5px solid var(--ink);border-radius:12px;padding:clamp(22px,3vw,32px);background:#fff}
.panel h2{font:700 21px/1.25 var(--f);color:var(--ink);margin-bottom:6px}
.panel > p{margin-bottom:18px}
.dev{margin-top:16px;padding:12px 14px;border:1px dashed var(--rule-2);border-radius:8px;font-size:14.5px}
.dev a{font-weight:600}
.danger-zone{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule);max-width:620px}
.danger-zone h2{font:700 18px/1.3 var(--f);color:var(--ink);margin-bottom:6px}
.danger-zone p{margin-bottom:16px;font-size:15.5px}
.narrow-col{max-width:640px}

/* site page: install */
.install{margin-bottom:28px;border:1.5px solid var(--ink);border-radius:12px;background:#fff;overflow:hidden}
.install.done{border-color:#9FD3B6;background:var(--fixed-soft)}
.install summary{position:relative;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:16px 50px 16px 18px;cursor:pointer}
.install summary::-webkit-details-marker{display:none}
.install-title{display:inline-flex;align-items:center;gap:10px;font:700 17px/1.3 var(--f);color:var(--ink)}
.install-title::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--warn);animation:breathe 1.6s ease-in-out infinite}
.install.done .install-title::before{background:var(--fixed);animation:none}
.install summary .dim{font-size:14.5px}
.install .chev{position:absolute;right:20px;top:21px;width:14px;height:14px;transition:transform .25s var(--ease)}
.install details[open] .chev{transform:rotate(180deg)}
.install-body{padding:2px 18px 20px;display:grid;gap:14px}
.install.done .install-body{background:#fff;border-top:1px solid #B5DEC6;padding-top:18px}
.install-body > p{font-size:15.5px}

.upsell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 18px;margin-bottom:24px;border-radius:10px;background:var(--mark-soft);border:1px solid #F0D560}
.upsell p{font-size:15.5px;color:var(--ink);max-width:46em}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.tabs a{position:relative;padding:12px 14px;text-decoration:none;font:600 15.5px/1 var(--f);color:var(--dim)}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink)}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:5px;background:var(--mark);border-radius:2px 2px 0 0}
.tabs .n{font-weight:500;color:var(--dim);margin-left:4px;font-variant-numeric:tabular-nums}

/* a problem */
.issue{display:grid;grid-template-columns:4px minmax(0,1fr);column-gap:20px;padding:26px 0;border-bottom:1px solid var(--rule);transition:opacity .3s,transform .35s var(--ease)}
.issue::before{content:"";grid-row:1/20;border-radius:2px;background:var(--rule)}
.issue.critical::before{background:var(--broken)}
.issue.warning::before{background:#E8A34B}
.issue > *{grid-column:2;min-width:0}
.issue-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:10px}
.tag{font:500 13px/1 var(--f);color:var(--dim);border:1px solid var(--rule);border-radius:4px;padding:5px 7px}
.tag.back{color:var(--broken);border-color:#F4C2BC;background:var(--broken-soft)}
.summary{font:600 19px/1.4 var(--f);color:var(--ink);letter-spacing:-.005em;max-width:46em}
.facts{display:flex;flex-wrap:wrap;gap:4px 18px;margin:10px 0 0;font-size:14px;color:var(--dim)}
.facts li{list-style:none}
.facts .path{font-family:var(--f-mono);font-size:13px;color:var(--ink)}
.tech{margin-top:12px}
.tech code{display:inline;font-size:13px;color:var(--ink);background:var(--mark-soft);border-radius:3px;padding:2px 5px;overflow-wrap:anywhere;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.issue .sheet{margin-top:16px}
.issue-actions{display:flex;gap:10px;margin-top:14px}
.issue-actions form{margin:0}
.locked{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;padding:16px 18px;border:1.5px dashed var(--rule-2);border-radius:9px}
.locked p{font-size:15px;color:var(--text);max-width:40em}
.pending{margin-top:14px;font-size:15px}
.issue.leaving{opacity:0;transform:translateX(16px)}

/* connect page */
.connect-steps{counter-reset:c;border-top:2px solid var(--ink);max-width:860px}
.connect-steps > li{list-style:none;counter-increment:c;position:relative;padding:28px 0 28px 72px;border-bottom:1px solid var(--rule)}
.connect-steps > li::before{content:counter(c);position:absolute;left:0;top:26px;font:800 30px/1 var(--f-d);letter-spacing:-.05em;color:var(--ink)}
.connect-steps h2{font:700 20px/1.25 var(--f);color:var(--ink);margin-bottom:10px}
.connect-steps h3{font:600 16px/1.3 var(--f);color:var(--ink);margin:18px 0 6px}
.connect-steps p{font-size:15.5px;margin-bottom:10px}
.connect-steps form{margin-top:12px}
.keys{display:grid;margin:4px 0 6px}
.keys li{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.keys li form{margin:0 0 0 auto}
.new-key{margin-bottom:28px;max-width:860px}
.new-key p{margin-bottom:12px}
@media (max-width:560px){.connect-steps > li{padding-left:0}.connect-steps > li::before{position:static;display:block;margin-bottom:12px}}

/* legal pages */
.prose{max-width:720px;padding:clamp(32px,5vw,64px) 0 96px}
.prose .h1{font-size:clamp(34px,4.4vw,52px);margin-bottom:24px}
.prose h2{font:700 21px/1.3 var(--f);color:var(--ink);margin:40px 0 12px;padding-top:20px;border-top:1px solid var(--rule)}
.prose p,.prose li{font-size:17px;line-height:1.65}
.prose p{margin-bottom:14px}
.prose ul{padding-left:0;margin:0 0 14px}
.prose li{list-style:none;position:relative;padding-left:20px;margin-bottom:8px}
.prose li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;background:var(--ink);border-radius:1px}
.prose .updated{font-size:14.5px;color:var(--dim);margin-bottom:28px}

/* message pages */
.msg{max-width:620px;padding:clamp(40px,8vw,96px) 0}
.msg .h1{font-size:clamp(32px,4vw,48px);margin-bottom:16px}
.msg p{margin-bottom:24px;font-size:18px}

/* ---------- reduced motion: everything rests at its finished state ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .state.waiting::before,.install-title::before,.cursor{animation:none!important}
}

/* =================== the problem feed =================== */
.pulse{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 24px;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.pulse > div{padding:16px 16px 18px;border-left:1px solid var(--rule)}
.pulse > div:first-child{border-left:0;padding-left:0}
.pulse dt{font-size:13.5px;color:var(--dim);line-height:1.3}
.pulse dd{margin:6px 0 0;font:800 30px/1 var(--f-d);letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.pulse .hot dd{color:var(--broken)}
@media (max-width:760px){.pulse{grid-template-columns:repeat(3,minmax(0,1fr))}.pulse > div:nth-child(n+4){display:none}.pulse > div{padding:12px 12px 14px}.pulse dt{font-size:12.5px}.pulse dd{font-size:24px}}
.feed-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;border-bottom:1px solid var(--rule);margin-bottom:0}
.feed-bar .tabs{border-bottom:0;margin-bottom:0}
.feed-tools{padding-bottom:8px}
.filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--rule-2);background:#fff;border-radius:999px;padding:7px 12px;font:600 14px/1 var(--f);color:var(--text);cursor:pointer;transition:border-color .15s,background-color .15s}
.chip span{font-weight:500;color:var(--dim);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--mark);border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"] span{color:var(--ink)}
.chip.critical::before,.chip.warning::before,.chip.minor::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dim)}
.chip.critical::before{background:var(--broken)}
.chip.warning::before{background:#E8A34B}
.page-pick select{height:38px;border:1.5px solid var(--rule-2);border-radius:7px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;-webkit-appearance:none;padding:0 34px 0 12px;font:500 14px/1 var(--f);color:var(--ink);max-width:260px}
.page-pick select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--mark)}
.filter-empty{padding:28px 0}

.issue-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.issue-top .issue-head{margin-bottom:10px}
.spark{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.spark svg{display:block}
.spark rect.off{fill:var(--rule)}
.spark rect.on{fill:var(--ink)}
.issue.critical .spark rect.on{fill:var(--broken)}
.issue.warning .spark rect.on{fill:#C76E12}
.spark figcaption{font-size:11.5px;color:var(--dim);line-height:1}
.tag.new{color:var(--ink);border-color:var(--ink);background:var(--mark)}
.tag.ok{color:var(--fixed);border-color:#B5DEC6;background:var(--fixed-soft)}
.facts .on-device{display:inline-flex;align-items:center;gap:5px}
.facts .on-device svg{width:15px;height:15px;color:var(--ink)}
.issue:target{animation:target 2.4s var(--ease-out)}
@keyframes target{0%,30%{background:var(--mark-soft)}100%{background:transparent}}
.issue-actions{align-items:center}
.issue-actions .btn.link{font-size:14.5px;color:var(--dim)}
.issue-actions .btn.link:hover{color:var(--ink)}

.sheet.fix .sheet-top{padding-left:6px}
.fix-toggle{display:inline-flex;align-items:center;gap:8px;min-width:0;border:0;background:none;padding:6px 8px;border-radius:6px;font:600 14px/1.2 var(--f);color:var(--ink);cursor:pointer}
.fix-toggle:hover{background:rgba(0,0,0,.05)}
.fix-toggle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fix-toggle .chev{width:13px;height:13px;flex:none;transition:transform .25s var(--ease)}
.fix-toggle[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.sheet.fix.collapsed .sheet-top{border-bottom:0}
.sheet.fix.collapsed pre.prompt{display:none}
.spin{display:inline-block;width:12px;height:12px;margin-right:8px;border:2px solid var(--rule-2);border-top-color:var(--ink);border-radius:50%;vertical-align:-1px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =================== alerts page =================== */
.settings{max-width:760px;border-top:2px solid var(--ink);margin-bottom:56px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.set-row h2{font:700 18px/1.3 var(--f);color:var(--ink);margin-bottom:4px}
.set-row p{font-size:15px;color:var(--text);max-width:34em}
.settings .locked{margin:0 0 4px}
.settings > .btn{margin-top:22px}
.switch{position:relative;display:inline-block;width:52px;height:30px;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch span[aria-hidden]{position:absolute;inset:0;border-radius:999px;background:var(--rule-2);transition:background-color .2s}
.switch span[aria-hidden]::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.switch input:checked + span{background:var(--ink)}
.switch input:checked + span::after{transform:translateX(22px);background:var(--mark)}
.switch input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
.switch input:disabled + span{opacity:.4}
.sel select{height:44px;border:1.5px solid var(--rule-2);border-radius:7px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;-webkit-appearance:none;padding:0 38px 0 14px;font:500 15px/1 var(--f);color:var(--ink)}
.sel select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--mark)}
@media (max-width:560px){.set-row{flex-direction:column;align-items:flex-start;gap:12px}}
.ch-sec{max-width:760px;padding-top:28px;border-top:1px solid var(--rule)}
.ch-sec > .dim{margin:8px 0 20px}
.channels{border-top:2px solid var(--ink);margin-bottom:24px}
.channels li{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.ch-name{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ch-name b{font-size:16px;color:var(--ink)}
.ch-name code{font-size:12.5px;color:var(--dim)}
.ch-status{grid-column:1}
.ch-act{grid-column:2;grid-row:1/3;display:flex;gap:6px;align-items:center}
.ch-act form{margin:0}
.state.bad{color:var(--broken)}
.state.paused{color:var(--dim)}
.add-ch{max-width:560px}
.howto{margin-top:22px;max-width:640px;border-top:1px solid var(--rule)}
.howto summary{cursor:pointer;padding:14px 0;font-weight:600;color:var(--ink)}
.howto h3{font:700 15px/1.3 var(--f);color:var(--ink);margin:8px 0 4px}
.howto p{font-size:15px;margin-bottom:10px}
@media (max-width:560px){.channels li{grid-template-columns:1fr}.ch-act{grid-column:1;grid-row:auto}}

/* =================== adding a site =================== */
.btn svg{width:16px;height:16px;flex:none}
.btn.lg svg{width:18px;height:18px}

/* empty dashboard */
.welcome{display:grid;gap:40px;border-top:2px solid var(--ink);padding-top:clamp(28px,4vw,44px)}
@media (min-width:980px){.welcome{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}}
.welcome .h2{margin-bottom:14px}
.welcome .lede{margin-bottom:26px}
.mini-steps{counter-reset:m;display:grid;gap:0;margin:0 0 30px;border-top:1px solid var(--rule)}
.mini-steps li{list-style:none;counter-increment:m;position:relative;padding:14px 0 14px 46px;border-bottom:1px solid var(--rule)}
.mini-steps li::before{content:counter(m);position:absolute;left:0;top:12px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font:800 14px/1 var(--f-d);color:var(--ink);background:#fff}
.mini-steps li:first-child::before{background:var(--mark)}
.mini-steps b{display:block;font:600 16.5px/1.35 var(--f);color:var(--ink)}
.mini-steps span{display:block;font-size:15px;color:var(--dim);margin-top:2px}
.preview{margin:0;position:relative}
.preview figcaption{font-size:13.5px;color:var(--dim);margin-bottom:10px}
.preview-card{border:1.5px solid var(--ink);border-radius:12px;background:#fff;padding:22px 22px 22px 24px;grid-template-columns:4px minmax(0,1fr);box-shadow:8px 8px 0 var(--mark)}
.preview-card.issue{padding:22px;border-bottom:1.5px solid var(--ink)}
.preview-card .summary{font-size:18px}
.preview-card .sheet{margin-top:16px}
.preview-card .sheet-top .btn{pointer-events:none}
@media (max-width:560px){.preview-card{box-shadow:5px 5px 0 var(--mark)}}

/* sites list */
.site-row{grid-template-columns:44px minmax(0,1fr) auto;column-gap:16px}
.site-mark{grid-row:1/3;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--ledger);border:1.5px solid var(--rule-2);font:800 18px/1 var(--f-d);color:var(--ink);letter-spacing:-.04em}
.site-mark.ok{border-color:#9FD3B6;background:var(--fixed-soft)}
.site-mark.warm{border-color:#F0C27A;background:var(--warn-soft)}
.site-mark.hot{border-color:#F4A49B;background:var(--broken-soft)}
.site-row .site-name,.site-row .site-sub{grid-column:2}
.site-row .site-status{grid-column:3}
@media (max-width:560px){.site-row{grid-template-columns:44px minmax(0,1fr)}.site-row .site-status{grid-column:2;grid-row:auto}}
.add-row{border-bottom:0!important}
.add-row a{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:center;padding:18px 12px;margin:10px -12px 0;border:1.5px dashed var(--rule-2);border-radius:12px;text-decoration:none;transition:border-color .15s,background-color .15s}
.add-row a:hover{border-color:var(--ink);background:var(--mark-soft)}
.add-row .site-mark.add{background:#fff;border-style:dashed}
.add-row .site-mark svg{width:18px;height:18px}
.add-row a:hover .site-mark.add{background:var(--mark);border-style:solid;border-color:var(--ink)}
.add-name{font:700 17px/1.25 var(--f);color:var(--ink)}
.add-row .site-sub{grid-column:2}

/* add-site form */
.add-site{display:grid;gap:36px;padding-top:4px}
@media (min-width:980px){.add-site{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:56px;align-items:start}}
.site-form{max-width:none}
.site-form > input,.site-form .prefixed{max-width:520px}
.builders{border:0;margin:18px 0 0;padding:0;min-width:0}
.builders legend{font:600 15px/1.3 var(--f);color:var(--ink);padding:0;margin-bottom:10px}
.builder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.builder-tile{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--rule-2);border-radius:10px;background:#fff;cursor:pointer;margin:0!important;font:600 15px/1.2 var(--f)!important;transition:border-color .15s,background-color .15s,box-shadow .15s}
.builder-tile:hover{border-color:var(--ink)}
.builder-tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.bt-mark{width:32px;height:32px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--ledger);font:800 13px/1 var(--f-d);letter-spacing:-.03em;color:var(--ink);transition:background-color .15s}
.bt-name{color:var(--ink)}
.builder-tile:has(input:checked),.builder-tile.is-on{border-color:var(--ink);background:var(--mark-soft);box-shadow:3px 3px 0 var(--ink)}
.builder-tile:has(input:checked) .bt-mark,.builder-tile.is-on .bt-mark{background:var(--mark)}
.builder-tile:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.builders .hint{margin-top:10px}
.prefixed{display:flex;align-items:stretch;border:1.5px solid var(--rule-2);border-radius:7px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.prefixed span{display:flex;align-items:center;padding:0 4px 0 14px;font:400 16px/1 var(--f-mono);color:var(--dim);background:#fff}
.prefixed input{border:0!important;box-shadow:none!important;padding-left:2px!important;height:46px!important}
.prefixed:hover{border-color:var(--ink)}
.prefixed:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--mark)}
.add-aside{display:grid;gap:22px}
@media (min-width:980px){.add-aside{position:sticky;top:calc(var(--hd) + 24px)}}
.pv-note{font-size:13px;white-space:nowrap}
.mini-steps.next{margin:0}
pre.prompt.flash{animation:flash 1s var(--ease-out)}
@keyframes flash{0%{background:var(--mark-soft)}100%{background:transparent}}
.mini-steps b span{display:inline;font-size:inherit;color:inherit;margin:0}
@media (max-width:560px){.pv-note{display:none}.preview .sheet-top .btn{display:none}}