@font-face{font-family:'Geist';src:url('../fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

/* The extension is deliberately monochrome ("Plain, Executed"), so the page is
   too: the accent is the graphite of the brand mark rather than a colour the
   product does not use. */
:root{
  --bg:#ffffff; --bg-soft:#F5F6F8; --bg-card:#ffffff;
  --text:#16161A; --text-dim:#565660; --text-faint:#8C8C95;
  --border:rgba(0,0,0,.09); --border-strong:rgba(0,0,0,.15);
  --accent:#26282d; --accent-2:#3c4046; --accent-3:#71717a;
  --radius:16px; --container:1080px; --pad-section:clamp(48px,7vw,96px);
  --shadow:0 1px 2px rgba(16,24,40,.06),0 12px 32px rgba(16,24,40,.08);
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.08;letter-spacing:-.02em;font-weight:600;margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
@keyframes reveal-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal{animation:reveal-in .6s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}html{scroll-behavior:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:15.5px;
  padding:12px 22px;border-radius:999px;background:var(--accent);color:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.12);transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,22,32,.24);background:#101216}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--border-strong);box-shadow:none}
.btn.ghost:hover{background:var(--bg-soft);box-shadow:none}
.btn.sm{padding:9px 16px;font-size:14px}
/* the store mark inside a button: sized to the label, never recoloured */
.btn .mark{width:18px;height:18px;flex:none;margin-left:-2px}
.btn.sm .mark{width:16px;height:16px}

/* nav */
#nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:60px}
.nav-left{display:flex;align-items:center;gap:14px}
.nav-back{color:var(--text-dim);font-size:15px}.nav-back:hover{color:var(--text)}
.nav-title{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px}
.nav-title img{width:23px;height:23px}

/* hero */
#hero{padding:clamp(44px,7vw,86px) 0 clamp(20px,4vw,44px);text-align:center;
  background:radial-gradient(120% 130% at 50% -10%,#eef0f3 0%,#fff 46%)}
.hero-icon{width:96px;height:96px;margin:0 auto 26px;border-radius:26px;box-shadow:var(--shadow)}
.eyebrow{font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-3);margin:0 0 16px;font-weight:600}
#hero h1{font-size:clamp(36px,6.2vw,62px);letter-spacing:-.035em;margin:0 auto 18px;max-width:16ch}
#hero h1 .grad{background:linear-gradient(100deg,var(--accent-2),var(--accent-3));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--text-dim);font-size:clamp(17px,2.2vw,21px);max-width:640px;margin:0 auto 30px}
.hero-cta{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.hero-note{color:var(--text-faint);font-size:13.5px;margin:16px 0 0}
.hero-note a{color:var(--text-dim);text-decoration:underline;text-underline-offset:2px}

/* screenshots */
.shot{margin:clamp(34px,5vw,60px) auto 0;max-width:920px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border-strong);
  box-shadow:0 30px 80px rgba(16,24,40,.18),0 4px 12px rgba(16,24,40,.08)}
.shot img{width:100%;height:auto}
.shot-cap{color:var(--text-faint);font-size:13.5px;text-align:center;margin:14px 0 0}

/* sections */
.section{padding:var(--pad-section) 0;border-top:1px solid var(--border)}
.section.alt{background:var(--bg-soft)}
.section h2{font-size:clamp(25px,3.6vw,36px);margin:0 0 10px}
.section .sub{color:var(--text-dim);margin:0 0 36px;max-width:660px}
.feat{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.f{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.f .k{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,#f1f2f4,#e4e6ea);color:var(--accent);font-size:18px}
.f h3{font-size:18px;margin:0 0 8px}
.f p{color:var(--text-dim);font-size:15px;line-height:1.55;margin:0}

/* install steps (same rules as the pdf-page-remover page) */
.steps{counter-reset:s;display:grid;gap:16px;max-width:720px;margin:0}
.steps li{list-style:none;position:relative;padding-left:52px;color:var(--text-dim);font-size:15.5px;line-height:1.5}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;
  width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-weight:600;font-size:15px;
  display:grid;place-items:center}
.steps b{color:var(--text)}
.steps code{background:#fff;border:1px solid var(--border);border-radius:6px;padding:1px 7px;font-size:13.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cta-left{justify-content:flex-start;margin:0 0 34px}
.subhead{font-size:clamp(19px,2.2vw,23px);margin:8px 0 10px;letter-spacing:-.01em}
.section .sub.narrow{margin-bottom:22px}
.steps + .callout{margin-top:30px}
.nav-right{display:flex;align-items:center;gap:10px}
/* on a phone the bar holds the store link and drops Privacy, which the footer
   and the in-page section both still link. The label is two words that must not
   wrap inside the pill, so it also loses some padding to stay on one line. */
@media (max-width:560px){.nav-right .ghost{display:none}
  .nav-right .btn{white-space:nowrap;padding:8px 14px;font-size:13.5px}
  .nav-back{display:none}
  .nav-left{min-width:0;gap:10px}
  .nav-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}
/* below this the product name starts to truncate, and the name is worth more
   than the mark it sits next to */
@media (max-width:400px){.nav-title img{display:none}}

/* privacy callout */
.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow);max-width:760px}
.callout h3{font-size:19px;margin:0 0 10px}
.callout p{color:var(--text-dim);font-size:15.5px;margin:0 0 14px}
.callout ul{color:var(--text-dim);font-size:15.5px;margin:0 0 16px;padding-left:1.15em}
.callout li{margin:0 0 6px}
.callout a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* footer */
footer.site{border-top:1px solid var(--border);padding-block:40px;color:var(--text-faint);font-size:14px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--text-dim)}.foot a:hover{color:var(--text)}

/* ── Exchange demo ────────────────────────────────────────────────────────
   A coded mock of the hub, not a screenshot, so it stays sharp at any width
   and survives a UI re-shoot. Same pattern as the pdf-page-remover hero:
   markup here, a timed sequence in the page's inline script, and a static
   end-state under prefers-reduced-motion. */
.demo{position:relative;background:var(--bg-card);user-select:none}
.demo .dm-bar{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--border);
  background:linear-gradient(#fff,#fafbfc)}
.dm-brand{width:21px;height:21px;border-radius:6px;background:var(--accent);color:#fff;display:grid;
  place-items:center;font-size:12px;flex:none}
.dm-name{font-weight:600;font-size:12.5px;letter-spacing:-.01em;flex:none}
.dm-omni{flex:1;min-width:0;height:24px;border:1px solid var(--border-strong);border-radius:7px;
  background:#fff;display:flex;align-items:center;padding:0 9px;color:var(--text-faint);font-size:11px;
  white-space:nowrap;overflow:hidden}
.dm-btn{flex:none;height:24px;display:inline-flex;align-items:center;gap:4px;padding:0 9px;font-size:11px;
  font-weight:500;border:1px solid var(--border-strong);border-radius:7px;background:#fff;color:var(--text)}
.dm-btn.icon{padding:0 6px;color:var(--text-dim)}
/* the one the whole section is about */
.dm-btn.dm-x{position:relative;transition:transform .16s,box-shadow .16s,background .16s,color .16s}
.dm-btn.dm-x::after{content:"";position:absolute;inset:-5px;border-radius:11px;border:2px solid var(--accent);
  opacity:0;transform:scale(.86);transition:opacity .22s,transform .22s}
.demo.is-aim .dm-btn.dm-x::after{opacity:1;transform:scale(1);animation:dm-ring 1.3s ease-out infinite}
.demo.is-press .dm-btn.dm-x{transform:scale(.94);background:var(--accent);color:#fff;border-color:var(--accent)}
.demo.is-run .dm-btn.dm-x{background:var(--accent);color:#fff;border-color:var(--accent)}
@keyframes dm-ring{0%{box-shadow:0 0 0 0 rgba(38,40,45,.28)}70%{box-shadow:0 0 0 9px rgba(38,40,45,0)}
  100%{box-shadow:0 0 0 0 rgba(38,40,45,0)}}

/* gate pill: FILL every panel, then SEND, which is what "all or nothing" means */
.dm-gate{position:absolute;top:34%;left:50%;transform:translate(-50%,calc(-50% - 6px));z-index:6;opacity:0;
  padding:4px 11px;border-radius:999px;font-size:11px;font-weight:600;background:var(--accent);color:#fff;
  box-shadow:0 6px 18px rgba(16,24,40,.22);transition:opacity .2s,transform .2s;white-space:nowrap}
.dm-gate.show{opacity:1;transform:translate(-50%,-50%)}

.dm-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);overflow:hidden;
  height:clamp(196px,25vw,248px)}
.dm-p{background:var(--bg-card);display:flex;flex-direction:column;min-width:0;min-height:0;padding:9px 9px 8px}
.dm-ptitle{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;margin-bottom:8px;flex:none}
.dm-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-3);flex:none}
.dm-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:5px}
.dm-l{height:6px;border-radius:3px;background:#e9eaee}
.dm-l.w9{width:92%}.dm-l.w7{width:74%}.dm-l.w5{width:56%}.dm-l.w8{width:84%}
/* the critique that comes back */
.dm-crit{margin:7px 0 0;padding-top:8px;border-top:1px solid var(--border);font-size:10.5px;
  line-height:1.45;color:var(--text-dim);opacity:0;transform:translateY(5px);
  transition:opacity .3s,transform .3s}
.dm-crit b{color:var(--text);font-weight:600}
.dm-crit.show{opacity:1;transform:none}
/* composer, where the other panels' answers land */
.dm-in{flex:none;margin-top:8px;min-height:30px;border:1px solid var(--border-strong);border-radius:8px;
  background:#fff;padding:5px 7px;display:flex;flex-wrap:wrap;gap:3px;align-content:flex-start;
  font-size:10px;color:var(--text-faint);transition:border-color .2s,box-shadow .2s}
.dm-in .ph{color:var(--text-faint)}
.dm-in.filling .ph,.dm-in.filled .ph{display:none}
.dm-in.filled{border-color:var(--accent);box-shadow:0 0 0 2px rgba(38,40,45,.07)}
.dm-in.sent{border-color:var(--border-strong);box-shadow:none}
.dm-tag{display:none;align-items:center;gap:3px;padding:1px 6px;border-radius:999px;font-size:9.5px;
  font-weight:600;background:var(--bg-soft);border:1px solid var(--border);color:var(--text)}
.dm-tag.on{display:inline-flex;animation:dm-pop .22s cubic-bezier(.2,.9,.3,1.4) both}
.dm-ask{display:none;width:100%;font-size:9.5px;color:var(--text-dim);margin-top:1px}
.dm-ask.on{display:block;animation:dm-pop .22s ease both}
@keyframes dm-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* a chip carrying one panel's answer to another panel's composer */
.dm-chip{position:absolute;top:0;left:0;z-index:5;padding:2px 8px;border-radius:999px;font-size:10px;
  font-weight:600;background:var(--accent);color:#fff;white-space:nowrap;pointer-events:none;
  box-shadow:0 6px 16px rgba(16,24,40,.28);opacity:0}

.dm-cursor{position:absolute;top:0;left:0;z-index:7;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));margin:-3px 0 0 -3px}

@media (max-width:560px){
  .dm-name,.dm-omni,.dm-btn.icon{display:none}
  .dm-btn{font-size:10px;padding:0 7px}
  .dm-panels{height:clamp(196px,52vw,232px)}
  .dm-crit{font-size:9.5px}
  .dm-body .dm-l:nth-of-type(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){
  .dm-cursor,.dm-chip{display:none}
  .dm-btn.dm-x::after{animation:none}
}