/* logowright — the site's one stylesheet.
   Language: an editorial studio sheet (paper, ink, hairline rules, a light
   serif for statements, a condensed grotesk for section labels, a mono for
   navigation and captions). The one loud thing is the hero demo: a raster
   logo becoming a vector with its anchor points showing, in editor blue. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:300;font-display:swap;
  src:url(/static/fonts/newsreader-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;
  src:url(/static/fonts/newsreader-latin-300-italic.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(/static/fonts/archivo-latin-wdth-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  --paper:#F6F6F3; --sheet:#FBFBF9; --ink:#232325; --graphite:#6B6B67; --rule:#CBCBC6;
  --sage:#DDE4D6; --sage-ink:#3E5034; --sky:#B9D5E6; --anchor:#2F6BFF; --bad:#9B3B2E; --good:#3E5034;
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,2.2vw,28px);
  /* the page's side margins: nothing touches the screen's edges, and on a big screen
     the content stops growing at 1320px and sits in the middle */
  --side:max(clamp(12px,4vw,56px),calc((100vw - 1320px) / 2));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);
  font-stretch:100%;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--anchor);outline-offset:2px}

/* ---- navigation ---------------------------------------------------- */
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);padding:0 calc(var(--side) + var(--gutter));height:64px;
  border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:20}
.nav .brand{font:640 21px/1 var(--sans);font-stretch:72%;letter-spacing:.01em;text-transform:uppercase;
  text-decoration:none;margin-right:auto}
.nav a:not(.brand){font:400 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.nav a:not(.brand)::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);
  transform:scale(0);transition:transform .3s var(--ease),margin .3s var(--ease);margin-right:-14px}
.nav a:not(.brand):hover::before,.nav a[aria-current="page"]::before{transform:none;margin-right:0}
.nav a:not(.brand){transition:gap .3s var(--ease)}
.nav .credits{font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sage-ink);
  background:var(--sage);padding:6px 8px}

/* ---- section bars (label between two hairlines) -------------------- */
.bar-label{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px var(--gutter);
  font:600 16px/1.1 var(--sans);font-stretch:74%;text-transform:uppercase;letter-spacing:.02em;margin:0}

/* ---- the CTA chip ---------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--sage);color:var(--sage-ink);border:0;
  font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;
  text-decoration:none;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.chip::before{content:"\21B3";font-family:var(--sans);font-size:15px;line-height:1}
.chip:hover{background:var(--sky);color:var(--ink)}
.chip.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.chip.quiet:hover{background:var(--sky);box-shadow:none}
.chip.plain::before{content:none}
button.chip[disabled]{opacity:.55;cursor:default}

/* ---- hero ------------------------------------------------------------ */
.hero{position:relative;min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:grid;
  place-items:center;padding:clamp(150px,22vh,230px) var(--gutter) 72px;overflow:hidden;text-align:center}
.hero-copy{position:relative;z-index:2;max-width:760px}
.hero h1{font:300 clamp(41.4px,6.66vw,93.6px)/.98 var(--serif);letter-spacing:-.025em;margin:0 0 26px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .ln>span{display:inline-block}
.hero .lede{font-size:clamp(17px,1.45vw,19px);color:var(--graphite);max-width:34em;margin:0 auto 30px}
.hero .actions{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.hero .actions .hint{font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
/* signed out, the hero signs you in itself, in two lines */
.hero-signin{display:flex;flex-direction:column;align-items:center;gap:12px}
.hs-line{display:flex;align-items:center;justify-content:center;gap:12px 14px;flex-wrap:wrap}
.hs-form{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;justify-content:center}
.hs-form input{flex:0 1 280px;width:280px;height:40px;padding:0 12px}
.hs-form .chip{min-height:40px}
.hero-signin .gbtn{width:auto;min-height:40px;padding:0 14px 0 12px}
.hero-signin .hint{font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.hero-signin .as-typed{text-transform:none}
/* Cloudflare's bot check: takes no room unless it shows a box to click (5 Nov) */
.ts-box{display:flex;justify-content:center}.ts-box iframe{margin-top:12px}
.hero-signin .ts-box{margin-top:-12px}
.or-mini{font:400 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
/* where else it works: a quiet row of names under the CTA */
.hero .works-in{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px 18px;margin:30px 0 0;
  font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.hero .works-in a{color:var(--ink);text-decoration:none;padding-bottom:4px;border-bottom:1px solid var(--rule)}
.hero .works-in a:hover{border-bottom-color:var(--ink)}

/* the demo: a raster at 10 o'clock, its vector at 2 o'clock, an arc between */
.demo{position:absolute;inset:0;z-index:1;pointer-events:none}
.demo .arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.demo .arc path{fill:none;stroke:var(--ink);stroke-opacity:.35;stroke-width:1;stroke-dasharray:3 6}
.demo .arc circle{fill:var(--anchor)}
/* 10 and 2 o'clock around the headline: out to the sides, level with its top */
.card{position:absolute;margin:0;top:clamp(56px,calc(11vh + 16px),136px);width:clamp(150px,15vw,236px);pointer-events:auto}
.card.before{left:clamp(56px,calc(5vw + 40px),136px)}
.card.after{right:clamp(56px,calc(5vw + 40px),136px)}
.card .frame{aspect-ratio:1/1;border:1px solid var(--rule);background:var(--sheet);display:grid;place-items:center;
  overflow:hidden;position:relative;transition:background-color .35s ease}
.card .frame img{width:100%;height:100%;object-fit:contain}
.card .frame svg{width:100%;height:100%;overflow:visible}
.card .cap{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font:400 11.5px/1.2 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);text-align:left}
.card .cap b{font-weight:500;color:var(--ink)}
.vec path{vector-effect:non-scaling-stroke}
.vec .outline path{fill:none;stroke:var(--anchor);stroke-width:1}
/* anchor points: small circles, white inside a 1px blue ring, the same at any size */
.vec .anchors .ring,.vec .selected .on{fill:none;stroke:var(--anchor);stroke-width:5px;stroke-linecap:round}
.vec .anchors .core{fill:none;stroke:#fff;stroke-width:3px;stroke-linecap:round}
.vec.dense .anchors .ring{stroke-width:4px}
.vec.dense .anchors .core{stroke-width:2px}
/* one curve selected: its anchors filled, its two handles out to small dots */
.vec .selected .arm{fill:none;stroke:var(--anchor);stroke-width:1}
.vec .selected .knob{fill:none;stroke:var(--anchor);stroke-width:3.5px;stroke-linecap:round}
.before .frame img{transition:opacity .45s ease}

/* ---- page body: an index rail + content --------------------------------- */
.page{display:grid;grid-template-columns:240px minmax(0,1fr);border-top:1px solid var(--rule)}
.content>section:first-child>.bar-label{border-top:0}
.rail{border-right:1px solid var(--rule);padding:22px var(--gutter)}
.rail ol{list-style:none;margin:0;padding:0;position:sticky;top:96px}
.rail a{display:flex;align-items:center;gap:10px;font:400 12px/1.9 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;color:var(--graphite)}
.rail a::before{content:"";width:5px;height:5px;border-radius:50%;background:transparent}
.rail a.on,.rail a:hover{color:var(--ink)}
.rail a.on::before,.rail a:hover::before{background:var(--ink)}
.rail a::before{transition:background-color .3s ease}
.rail a{transition:color .3s ease}
.content>section{scroll-margin-top:64px}
.content>section+section{margin-top:0}
.content .bar-label{border-left:0}
.block{padding:clamp(28px,4vw,56px) var(--gutter) clamp(40px,6vw,88px)}
.statement{font:300 clamp(30px,3.6vw,52px)/1.12 var(--serif);letter-spacing:-.015em;margin:0;max-width:24em}
.aside{max-width:30em;margin:clamp(28px,4vw,56px) 0 0 auto;color:var(--ink)}
.aside p{margin:0 0 1em}
.cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-top:1px solid var(--rule)}
.cols>div{padding:clamp(22px,3vw,36px) var(--gutter) clamp(30px,4vw,52px);border-right:1px solid var(--rule)}
.cols>div:last-child{border-right:0}
.cols h3{font:300 clamp(28px,2.7vw,40px)/1.05 var(--serif);letter-spacing:-.01em;margin:0 0 18px}
.cols p{margin:0 0 .8em;max-width:30em}
.cols .step{font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--graphite);display:block;margin-bottom:14px}
.list{list-style:none;padding:0;margin:0}
.list li{padding:10px 0;border-bottom:1px solid var(--rule)}
.list li:first-child{border-top:1px solid var(--rule)}

/* ---- the converter (the working app) --------------------------------------- */
.tool{padding:clamp(24px,3.5vw,48px) var(--gutter) clamp(40px,5vw,72px)}
.panel{border:1px solid var(--rule);background:var(--sheet);padding:clamp(20px,2.6vw,32px);max-width:880px}
.panel strong{font:300 26px/1.15 var(--serif);display:block;margin-bottom:6px}
.small{font-size:14px;color:var(--graphite)}
input{font:inherit;padding:11px 12px;border:1px solid var(--rule);background:#fff;color:var(--ink);
  min-width:0;flex:1 1 240px;border-radius:0}
input:focus{outline:2px solid var(--anchor);outline-offset:-1px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#drop{border:1px dashed var(--ink);background:var(--sheet);padding:clamp(40px,7vw,80px) 20px;text-align:center;
  cursor:pointer;max-width:880px;transition:background .15s}
#drop.over{background:var(--sage)}
#drop h2{font:300 clamp(26px,2.6vw,36px)/1.1 var(--serif);margin:0 0 10px}
#drop p{margin:0;font:400 12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.bar{height:2px;background:var(--rule);overflow:hidden;margin:18px 0 10px}
.bar>i{display:block;height:100%;width:28%;background:var(--anchor);animation:slide 1.3s ease-in-out infinite}
@keyframes slide{0%{margin-left:-28%}100%{margin-left:100%}}
.badge{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 9px}
.badge.pass{background:var(--sage);color:var(--sage-ink)}
.badge.fail{background:#F1DDD8;color:var(--bad)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);margin:20px 0 4px}
.stat{padding:12px 14px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat b{display:block;font:300 30px/1.1 var(--serif)}
.stat span{font:400 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.preview{border:1px solid var(--rule);margin-top:18px;min-height:200px;display:flex;align-items:center;justify-content:center;
  padding:20px;background:repeating-conic-gradient(rgba(35,35,37,.05) 0% 25%,transparent 0% 50%) 50%/18px 18px}
.preview img{max-width:100%;max-height:300px}
/* notes and refusals: hairline rows like the rest of the site, no coloured side bar (owner, 1 Nov) */
.note{border-top:1px solid var(--rule);padding:12px 0;margin:0;font-size:15px}
.note:first-child{margin-top:14px}
.note:last-child{border-bottom:1px solid var(--rule)}
.refusal{padding:0}
.refusal h3{font:300 26px/1.15 var(--serif);margin:0 0 6px}
.reason-code{font:400 12px var(--mono);color:var(--graphite)}

/* ---- tables, prose pages ------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:15px}
td,th{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:600 13px/1.2 var(--sans);font-stretch:74%;text-transform:uppercase;letter-spacing:.02em}
.mono,code{font-family:var(--mono);font-size:13.5px}
pre{overflow-x:auto;background:var(--sheet);border:1px solid var(--rule);padding:14px;font:13px/1.55 var(--mono)}
.prose{max-width:46em}
.prose h3{font:300 26px/1.2 var(--serif);margin:28px 0 8px}
.prose h3:first-child{margin-top:0}
.prose li{margin-bottom:.4em}
.doc{padding:clamp(28px,4vw,56px) calc(var(--side) + var(--gutter)) 80px;min-height:calc(100vh - 116px)}
.doc h1{font:300 clamp(40px,5vw,68px)/1 var(--serif);letter-spacing:-.02em;margin:0 0 18px}
.doc .lede{color:var(--graphite);max-width:36em;margin:0 0 32px}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);margin:8px 0 28px}
.pack{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px}
.pack h3{font:600 15px/1 var(--sans);font-stretch:74%;text-transform:uppercase;letter-spacing:.02em;margin:0 0 14px}
.pack .price{font:300 48px/1 var(--serif);margin:0 0 6px;color:var(--ink)}
.pack p{margin:0 0 18px;color:var(--graphite)}
/* the one button to press now, "selected like a vector" (6 Nov): a 1 px anchor-blue frame
   4 px out, a round point on each corner (the hero's round points). The frame fades in and
   the points scale in with the site's ease, .05 s apart (the nav dot, the wordmark's
   stagger), once each time it moves; on hover they step out 2 px. */
.is-next{position:relative;outline:1px solid var(--anchor);outline-offset:4px;animation:lt-frame .3s var(--ease) both}
.sel{position:absolute;inset:-8.5px;pointer-events:none}
.sel i{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--anchor);
  transform:scale(0);animation:lt-handle .3s var(--ease) forwards;transition:translate .3s var(--ease)}
.sel i:nth-child(1){left:0;top:0;animation-delay:.1s}.sel i:nth-child(2){right:0;top:0;animation-delay:.15s}
.sel i:nth-child(3){right:0;bottom:0;animation-delay:.2s}.sel i:nth-child(4){left:0;bottom:0;animation-delay:.25s}
.is-next:hover .sel i:nth-child(1){translate:-2px -2px}.is-next:hover .sel i:nth-child(2){translate:2px -2px}
.is-next:hover .sel i:nth-child(3){translate:2px 2px}.is-next:hover .sel i:nth-child(4){translate:-2px 2px}
.sel.still i{animation:none;transform:none}
@keyframes lt-frame{from{outline-color:transparent}to{outline-color:var(--anchor)}}
@keyframes lt-handle{to{transform:none}}
@media (prefers-reduced-motion:reduce){.is-next{animation:none}.sel i{animation:none;transform:none;transition:none}}
/* the workspace (5 Nov): while you convert or edit, the page is only your logos */
body.work .hero,body.work .home>section:not(#convert):not(#recent),body.work .foot.big{display:none}
body:not(.work) #convert,body:not(.work) #recent,body.library #convert{display:none}
body.work .home{border-top:0;min-height:calc(100vh - 64px)}
.lib-only{display:none!important}body.library .lib-only{display:inline-flex!important}
.recent .head-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));border-top:1px solid var(--rule)}
.rgrid:empty{display:none}
.rcard{appearance:none;border:0;border-radius:0;background:var(--paper);padding:14px var(--gutter) 16px;display:flex;
  box-shadow:inset -1px -1px 0 var(--rule);
  flex-direction:column;gap:10px;text-align:left;cursor:pointer;font:inherit;color:inherit;min-width:0}
.rcard:hover{background:var(--sheet)}
.rcard[aria-current="true"]{background:var(--sheet);box-shadow:inset 0 2px 0 var(--ink),inset -1px -1px 0 var(--rule)}
.rthumb{aspect-ratio:1/1;border:1px solid var(--rule);background:var(--sheet);display:grid;place-items:center;overflow:hidden}
.rthumb img{max-width:78%;max-height:78%;object-fit:contain}
.rtxt{display:flex;flex-direction:column;gap:4px;min-width:0}
.rtxt b{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtxt span{font:400 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.recent .sec-note{padding:12px var(--gutter) 22px;margin:0}
.news{display:flex;gap:10px;align-items:center;margin:14px 0 0;cursor:pointer}
.news input{width:auto;margin:0}
/* the blog (5 Nov) */
.blist{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--rule);max-width:980px}
.bpost a{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:24px;row-gap:6px;padding:22px 0;
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.bpost a:hover .bt{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.bpost time,.post-meta{font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.bpost time{grid-row:span 3;padding-top:6px}
.bt{font:300 clamp(24px,2.4vw,32px)/1.15 var(--serif);letter-spacing:-.01em}
.bd{color:var(--graphite)}
.bm{font:400 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.post{max-width:44em}
.post-meta a{color:inherit}
.post h1{margin-top:14px}
.post-body{font-size:18px;line-height:1.65}
.post-body h2{font:300 clamp(26px,2.6vw,34px)/1.15 var(--serif);margin:44px 0 12px}
.post-body h3{font:600 17px/1.2 var(--sans);font-stretch:80%;margin:30px 0 8px}
.post-body img{max-width:100%;height:auto;border:1px solid var(--rule);background:var(--sheet)}
.post-body blockquote{margin:24px 0;padding:2px 0 2px 20px;border-left:2px solid var(--ink);color:var(--graphite)}
.post-body code{font:14px/1.5 var(--mono);background:var(--sheet);padding:1px 5px}
.post-body pre code{padding:0;background:none}
.post-body a{color:var(--ink);text-underline-offset:3px}
.post-tags{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 0}
.post-tags span{font:400 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;
  border:1px solid var(--rule);color:var(--graphite)}
.post-end{margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--rule);display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.post-end p{margin:0;font:300 22px/1.25 var(--serif)}
@media (max-width:640px){.bpost a{grid-template-columns:1fr}.bpost time{grid-row:auto;padding:0}}
/* monthly plans (5 Nov) */
.price-head{font:600 15px/1 var(--sans);font-stretch:74%;text-transform:uppercase;letter-spacing:.02em;margin:34px 0 12px}
.pack .price .per{display:block;margin-top:10px;font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.pack.current{background:var(--sheet);box-shadow:inset 0 2px 0 var(--ink)}
.plan-note{max-width:46em;margin:-12px 0 8px}
.plain-link{font:400 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);
  text-decoration:underline;text-underline-offset:4px;align-self:center;margin-left:6px}
.plain-link:hover{color:var(--ink)}
fieldset.why{border:0;padding:0;margin:22px 0 4px;display:flex;flex-direction:column;gap:8px}
fieldset.why legend{margin-bottom:8px}
fieldset.why label{display:flex;gap:10px;align-items:center;cursor:pointer}
fieldset.why input{width:auto;margin:0}
.c-acts{margin-top:22px}

/* ---- footer --------------------------------------------------------------- */
.foot{border-top:1px solid var(--rule)}
.foot .closing{padding:clamp(40px,6vw,96px) var(--gutter);display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap}
.foot .closing p{font:300 clamp(34px,4.4vw,64px)/1.02 var(--serif);letter-spacing:-.02em;margin:0;max-width:12em}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px;padding:16px calc(var(--side) + var(--gutter));border-top:1px solid var(--rule);
  font:400 12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.foot nav a{text-decoration:none;color:var(--graphite)}
.foot nav span{margin-left:auto;color:var(--graphite)}

/* ---- sign-in card: Continue with Google, or an emailed code ------------------ */
.panel.signin{max-width:440px}
.signin strong{margin-bottom:4px}
.signin>.small{margin:0 0 18px}
.signin #login-msg{margin:14px 0 0}
.stack{display:flex;flex-direction:column;gap:10px}
.stack input{flex:none;width:100%}
.stack>.chip{justify-content:center;padding:13px 12px}
/* Google's button in its own "Neutral" theme (developers.google.com/identity/branding-guidelines):
   fill #F2F2F2, no stroke, #1F1F1F 14/20 medium text, the standard colour G; 12px before the G,
   10px after it, 12px after the text. Owner, 6 Nov: the Light theme's dark line plus the blue
   selection frame read as two frames. The border stays, transparent: same size, and it shows
   in Windows' high-contrast mode. Hover: Google gives none; this step is ours. */
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;
  padding:0 12px;background:#F2F2F2;border:1px solid transparent;color:#1F1F1F;
  font:500 14px/20px var(--sans);font-stretch:100%;text-decoration:none;transition:background-color .2s ease}
.gbtn:hover{background:#E8E8E8}
.gbtn img{width:18px;height:18px;flex:none}
.or{display:flex;align-items:center;gap:12px;margin:16px 0;font:400 11.5px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--graphite)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--rule)}

/* ---- the home page: everything at a glance, cells split by hairlines --------- */
.home{border-top:1px solid var(--rule);margin:0 var(--side);border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.home>section{scroll-margin-top:64px}
.cell-head,.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;
  padding:0 var(--gutter);border-bottom:1px solid var(--rule)}
.cell-head h2,.sec-head h2{font:600 16px/1.1 var(--sans);font-stretch:74%;text-transform:uppercase;letter-spacing:.02em;margin:0}
.link{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  display:inline-flex;gap:8px;align-items:center;align-self:flex-start}
.link::before{content:"\21B3";font-family:var(--sans);font-size:15px;line-height:1}
.sec-head .link{align-self:center}
/* your logo: only while there is one */
.job{border-bottom:1px solid var(--rule)}
.job .tool{padding:clamp(18px,2vw,26px) var(--gutter) clamp(28px,3vw,40px)}
/* your logos: the tabs (one per logo), then the image you sent | what comes back */
.job .head-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.job .head-acts .hint{font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.job .sec-head{min-height:52px;padding-top:6px;padding-bottom:6px}
.queue{display:flex;background:var(--paper);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:thin}
.qtab{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-width:170px;max-width:240px;padding:10px 16px 10px var(--gutter);
  background:var(--paper);border:0;border-right:1px solid var(--rule);cursor:pointer;text-align:left;color:var(--ink);font:inherit;
  box-shadow:inset 0 -2px 0 transparent;transition:background-color .25s ease,box-shadow .25s ease}
.qtab:hover{background:var(--sheet)}
.qtab[aria-selected="true"]{background:var(--sheet);box-shadow:inset 0 -2px 0 var(--ink)}
.qtab img{width:38px;height:38px;flex:none;object-fit:contain;border:1px solid var(--rule);background:#fff}
.qtab .qt{display:flex;flex-direction:column;gap:4px;min-width:0}
.qtab .qn{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtab .qs{font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.qtab[data-state="done"] .qs{color:var(--sage-ink)}
.qtab[data-state="refused"] .qs,.qtab[data-state="nocredit"] .qs{color:var(--bad)}
.job .sec-note.small{padding:12px var(--gutter) 0}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.pcell{margin:0;min-width:0}
.pair .frame{height:clamp(260px,34vw,460px);border:1px solid var(--rule);background:var(--sheet);display:grid;place-items:center;
  overflow:hidden;position:relative}
.pair .frame.checker{background:repeating-conic-gradient(rgba(35,35,37,.05) 0% 25%,transparent 0% 50%) 50%/18px 18px,var(--sheet)}
/* the whole image always fits its frame, whatever its size (a 2048 px one was cut off) */
.pair .frame img{position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);max-width:none;
  object-fit:contain;display:block}
#svg-preview{animation:lt-in .5s ease both}
.pair .cap{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font:400 11.5px/1.2 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.pair .cap b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* waiting: how far along, in numbers and in words */
.run{width:min(420px,84%);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.run .pct{font:300 clamp(54px,6vw,92px)/.9 var(--serif);letter-spacing:-.03em;margin:0;font-variant-numeric:tabular-nums}
.run-status{margin:0;font-size:17px;line-height:1.35;display:flex;align-items:center;gap:10px}
#run-status.in{animation:lt-status .45s var(--ease) both}
@keyframes lt-status{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* a small live dot that breathes while it works */
.live{flex:none;width:7px;height:7px;border-radius:50%;background:var(--anchor);animation:lt-breathe 1.4s ease-in-out infinite}
@keyframes lt-breathe{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
/* the bar: how far, and a pulse that runs only through the blue part (owner, 1 Nov) */
.meter{position:relative;align-self:stretch;height:4px;background:var(--rule);overflow:hidden;margin:4px 0 2px}
.meter>i{position:relative;display:block;height:100%;width:0;background:var(--anchor);overflow:hidden}
.meter>i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:lt-pulse 1.5s ease-in-out infinite}
@keyframes lt-pulse{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.run-note{margin:0}
.run .chip{margin-top:6px}
/* not converted: the reason, in the same place the result would be */
.ref-frame{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;
  padding:clamp(18px,2.4vw,32px);text-align:left;overflow:auto}
.ref-frame .preview{margin-top:10px;min-height:120px}
.pair .ref-frame{align-items:flex-start;justify-items:start}
/* under the result */
.done-bar{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.done-bar .small{margin:0}
.dl-row{margin-top:14px}
/* the editor: the SVG large, its points and handles in editor blue */
.editor{margin:0}
.ed-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.ed-group{display:flex;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.ed-group.end{margin-left:auto}
.tool-btn{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);border:0;padding:9px 9px;cursor:pointer;min-height:34px;
  transition:background-color .2s ease,color .2s ease}
.tool-btn:hover{background:var(--sky)}
.tool-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tool-btn:disabled{opacity:.4;cursor:default;background:var(--paper)}
.tool-btn.colour input{width:22px;height:18px;padding:0;border:1px solid var(--rule);background:none;cursor:pointer;flex:none;min-width:0}
.tool-btn.colour input:disabled{cursor:default}
.ed-range{display:flex;align-items:center;background:var(--paper);padding:0 10px}
.ed-range input{width:72px;flex:none;padding:0;border:0;background:none;accent-color:var(--anchor)}
.ed-file select{font:500 11.5px/1 var(--mono);letter-spacing:.04em;background:var(--paper);color:var(--ink);border:0;
  padding:9px 8px;min-height:34px;cursor:pointer}
.ed-saved{display:flex;align-items:center;background:var(--paper);padding:0 10px;font:400 11px/1 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--sage-ink);min-width:0}
.ed-saved:empty{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ed-stage{height:clamp(380px,64vh,760px);border:1px solid var(--rule);position:relative;overflow:hidden;touch-action:none;
  background:repeating-conic-gradient(rgba(35,35,37,.05) 0% 25%,transparent 0% 50%) 50%/18px 18px,#fff}
.ed-canvas{width:100%;height:100%;outline:none;--mix:.45}
.ed-canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--anchor)}
.ed-svg{width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.ed-canvas.adding .ed-svg{cursor:crosshair}
.ed-canvas.grab .ed-svg,.ed-canvas.grab .ed-svg *{cursor:grab!important}
.ed-canvas.panning .ed-svg,.ed-canvas.panning .ed-svg *{cursor:grabbing!important}
.ed-svg [data-ed="under"]{pointer-events:none}
.ed-svg [data-ed="ui"] *{vector-effect:non-scaling-stroke}
.ed-svg .ed-line{fill:none;stroke:var(--anchor);stroke-width:1.5px;pointer-events:stroke}
.ed-svg .ed-all{fill:none;stroke:var(--anchor);stroke-width:1px;stroke-opacity:.85;pointer-events:none}
.ed-svg .ed-hover{fill:none;stroke:var(--anchor);stroke-width:1px;stroke-opacity:.6;pointer-events:none}
.ed-svg .ed-arm{stroke:var(--anchor);stroke-width:1px;pointer-events:none}
.ed-svg .ed-knob{fill:#fff;stroke:var(--anchor);stroke-width:1.5px;cursor:grab}
.ed-svg .ed-pt{fill:#fff;stroke:var(--anchor);stroke-width:1.5px;cursor:move}
.ed-svg .ed-pt.on{fill:var(--anchor)}
.ed-canvas.orig .ed-svg>:not([data-ed]){opacity:var(--mix)}
.ed-canvas.diff .ed-svg>:not([data-ed]){mix-blend-mode:difference}
.ed-svg [data-ed="black"]{pointer-events:none}
.ed-canvas.outline .ed-svg path:not(.ed-line):not(.ed-hover):not(.ed-all),.ed-canvas.outline .ed-svg rect{fill:none!important;
  stroke:var(--ink)!important;stroke-width:1px!important;vector-effect:non-scaling-stroke;opacity:1!important}
.ed-help{margin:10px 0 0}
.dropzone p small{display:block;margin-top:12px;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
/* the account's recent logos: the image you sent | what came back, then Open */
.jobs{margin-top:4px}
.jrow{display:grid;grid-template-columns:64px 64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--rule)}
.jthumb{width:64px;height:64px;border:1px solid var(--rule);display:grid;place-items:center;overflow:hidden;
  background:repeating-conic-gradient(rgba(35,35,37,.05) 0% 25%,transparent 0% 50%) 50%/10px 10px,#fff}
.jthumb img{max-width:56px;max-height:56px;object-fit:contain;display:block}
.jthumb.gone{background:var(--sheet)}
.jthumb.gone::after{content:"—";color:var(--graphite);font:400 12px/1 var(--mono)}
.jtxt{display:flex;flex-direction:column;gap:4px;min-width:0}
.jtxt b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* billing rows: the same hairline rows, without the two thumbnails */
.jrow.brow{grid-template-columns:minmax(0,1fr) auto}
.jacts .busy{opacity:.5;pointer-events:none}
/* three columns side by side */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border-bottom:1px solid var(--rule)}
.trio .col{background:var(--paper);display:flex;flex-direction:column;min-width:0}
.steps,.facts{list-style:none;margin:0;padding:4px var(--gutter) 18px}
.steps li,.facts li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.45}
.steps li:last-child,.facts li:last-child{border-bottom:0}
.steps li{display:flex;gap:14px}
.steps .n{flex:none;font:400 12px/1.6 var(--mono);color:var(--graphite);padding-top:2px}
/* the statement */
.intro{padding:clamp(40px,6vw,90px) var(--gutter);border-bottom:1px solid var(--rule)}
.intro .statement{font-size:clamp(32px,4.2vw,62px);line-height:1.08;max-width:none}
.statement.indent{text-indent:16%}
.intro-more{margin:clamp(24px,3vw,40px) 0 0 50%;max-width:30em}
.intro-more p{margin:0;font-size:clamp(17px,1.35vw,19px)}
/* pricing and tools: everything side by side */
.home-sec{border-bottom:1px solid var(--rule)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--rule);
  border-bottom:1px solid var(--rule)}
.plan{background:var(--paper);padding:22px var(--gutter) 26px;display:flex;flex-direction:column}
.plan h3{font:600 15px/1 var(--sans);font-stretch:74%;text-transform:uppercase;letter-spacing:.02em;margin:0 0 14px}
.plan .price{font:300 clamp(44px,4vw,60px)/1 var(--serif);letter-spacing:-.02em;margin:0}
.plan .logos{margin:12px 0 2px}
.plan .each{margin:0 0 18px;font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.plan .buy{align-self:flex-start;margin-top:auto}
.sec-note{margin:0;padding:16px var(--gutter);max-width:56em;color:var(--graphite);font-size:15px}
.sec-note.small{padding-top:0}
.sec-note:empty{display:none}
.cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule)}
.cols4>div{background:var(--paper);padding:22px var(--gutter) 30px}
.cols4 h3{font:300 clamp(24px,2.1vw,30px)/1.1 var(--serif);margin:0 0 10px}
.cols4 p{margin:0;max-width:24em}
/* how to add each tool: the steps, the address to paste, the plugin to download */
.tool-card{display:flex;flex-direction:column;gap:12px}
.tool-card .how{margin:0;padding-left:18px;font-size:14px;color:var(--graphite);display:flex;flex-direction:column;gap:4px}
.tool-card .how b{color:var(--ink);font-weight:500}
.tool-card .chip{align-self:flex-start}
.addr{display:flex;align-items:stretch;border:1px solid var(--rule);background:var(--sheet);min-width:0}
.addr code{flex:1;min-width:0;padding:8px 10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr .copy{border-left:1px solid var(--rule);box-shadow:none;flex:none}
/* other tools vs logowright: the image, another tool's vector, ours; one row of three */
.cmp-lead{padding:clamp(18px,2vw,26px) var(--gutter) clamp(18px,2vw,24px);max-width:46em}
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
  border-top:1px solid var(--rule)}
.cmp-cell{margin:0;background:var(--paper);padding:clamp(16px,1.8vw,24px) var(--gutter) clamp(14px,1.6vw,20px);min-width:0}
.cmp .frame{aspect-ratio:1/1;border:1px solid var(--rule);background:var(--sheet);overflow:hidden;display:grid;
  place-items:center;transition:background-color .35s ease}
.cmp .frame img,.cmp .frame svg{width:100%;height:100%;display:block;object-fit:contain}
.cmp .cap{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font:400 11.5px/1.2 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.cmp .cap b{font-weight:500;color:var(--ink)}
/* the other tool's file as it comes: its own thin seams, at its own scale */
.vec .as-is path{vector-effect:none}

/* the API and the two promises: one row each, a label, the words, and for the API its example */
.srow{display:grid;grid-template-columns:200px minmax(0,1.15fr) minmax(0,1fr);gap:18px 40px;align-items:start;
  padding:clamp(22px,2.6vw,34px) var(--gutter);border-bottom:1px solid var(--rule)}
.rows .srow:last-child{border-bottom:0}
.srow-label{font:600 16px/1.3 var(--sans);font-stretch:74%;text-transform:uppercase;letter-spacing:.02em;margin:0;padding-top:4px}
.srow-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.srow-main.wide{grid-column:2 / -1;max-width:46em}
.say{font:300 clamp(21px,1.8vw,26px)/1.3 var(--serif);margin:0}
.srow .code{margin:0;background:var(--sheet);border:1px solid var(--rule);padding:12px 14px;font:12.5px/1.6 var(--mono);
  overflow-x:auto;white-space:pre}
/* a file dragged over the page */
.dropzone{position:fixed;inset:12px;z-index:70;border:1.5px dashed var(--ink);background:rgba(246,246,243,.94);
  display:grid;place-items:center;pointer-events:none}
.dropzone p{font:300 clamp(28px,3vw,42px)/1.1 var(--serif);margin:0}
/* the big footer */
.foot.big{border-top:1px solid var(--rule);padding-top:clamp(40px,5vw,72px);overflow:hidden;margin:0 var(--side)}
.foot-grid{display:grid;grid-template-columns:1fr minmax(0,560px);gap:40px;padding:0 var(--gutter)}
.foot-tag{font:400 11.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:0}
.foot-main{display:flex;flex-direction:column;gap:22px}
.foot-blurb{font:300 clamp(24px,2.2vw,30px)/1.2 var(--serif);margin:0}
.chip.wide{justify-content:center;width:100%;padding:14px 12px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.foot.big .foot-cols nav{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0;border:0;
  font:400 12px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.foot.big .foot-cols nav a{color:var(--ink)}
.foot-tm{font:400 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin:0}
.wordmark{display:flex;white-space:nowrap;padding:clamp(56px,9vw,150px) var(--gutter) 0;margin-bottom:-.13em;
  font:640 100px/.9 var(--sans);font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);overflow:hidden}
/* flex:none: a letter keeps its own width. Its overflow:hidden (the mask for the rise) would
   otherwise let the flex row squeeze it on a phone and cut off its right side (O read as C) */
.wordmark .ch{display:inline-block;flex:none;overflow:hidden;padding-bottom:.02em}
.wordmark .ch>span{display:inline-block}
.fx .rise-chars .ch>span{transform:translateY(105%);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.fx .rise-chars.in .ch>span{transform:none}

/* ---- motion (fx.js adds .fx to <html>; none of it without JavaScript) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
/* plain links in text dim a little on hover */
.prose a,.lede a,.cols p a,.aside a,.foot nav a,.link{transition:opacity .3s ease}
.prose a:hover,.lede a:hover,.cols p a:hover,.aside a:hover,.foot nav a:hover,.link:hover{opacity:.5}
/* the hero comes in: headline lines rise, then the rest fades up */
@keyframes lt-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes lt-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lt-in{from{opacity:0}to{opacity:1}}
.hero h1 .ln>span{animation:lt-rise 1s var(--ease) both}
.hero h1 .ln+.ln>span{animation-delay:.1s}
.hero .lede{animation:lt-up .9s var(--ease) .3s both}
.hero .actions,.hero .hero-signin{animation:lt-up .9s var(--ease) .42s both}
.hero .works-in{animation:lt-up .9s var(--ease) .52s both}
.demo{animation:lt-in 1.2s ease .2s both}
/* statements rise line by line as they come into view */
.fx .rise .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;text-indent:0}
.fx .rise .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease)}
.fx .rise.in .w>span{transform:none}
/* blocks fade up, one after another */
.fx .up{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s var(--ease)}
.fx .up.in{opacity:1;transform:none}
/* a curtain between pages */
body::after{content:"";position:fixed;inset:0;z-index:60;background:var(--sheet);border-top:1px solid var(--rule);
  transform:translateY(100%);transition:transform .55s cubic-bezier(.76,0,.24,1);pointer-events:none}
html.leaving body::after{transform:none}
html.leaving body>*{transform:translateY(-5vh);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.fx body{animation:lt-in .45s ease both}
/* the phone menu */
.menu-btn{display:none;width:34px;height:34px;border:0;background:none;padding:0;margin-left:2px;cursor:pointer;
  position:relative;color:var(--ink)}
.menu-btn i{position:absolute;left:4px;right:4px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.menu-btn i:first-child{top:13px}
.menu-btn i:last-child{top:20px}
.nav.open .menu-btn i:first-child{transform:translateY(3.5px) rotate(40deg)}
.nav.open .menu-btn i:last-child{transform:translateY(-3.5px) rotate(-40deg)}
.menu{display:none}

/* ---- small screens --------------------------------------------------------- */
@media (max-width:1100px){
  .page{grid-template-columns:1fr}
  .rail{display:none}
}
@media (max-width:1180px){
  .hero{padding-top:calc(clamp(150px,22vw,250px) + 90px)}
  .card{top:44px;width:clamp(130px,22vw,220px)}
  .card.before{left:calc(9vw + 40px)}
  .card.after{right:calc(9vw + 40px)}
}
@media (max-width:820px){
  .nav{height:56px;gap:14px}
  .nav>a:not(.brand):not(#nav-account){display:none}
  .menu-btn{display:block}
  .menu{display:flex;flex-direction:column;position:fixed;top:56px;left:0;right:0;z-index:19;background:var(--paper);
    border-bottom:1px solid var(--rule);padding:8px calc(var(--side) + var(--gutter)) 18px;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .35s var(--ease),visibility 0s .35s}
  .nav.open .menu{opacity:1;transform:none;visibility:visible;transition:opacity .3s ease,transform .35s var(--ease)}
  .menu a{display:flex;align-items:center;gap:8px;padding:11px 0;font:400 13px/1 var(--mono);letter-spacing:.08em;
    text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule)}
  .menu a:last-child{border-bottom:0}
  .menu a[aria-current="page"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
  .hero{padding-top:calc(40vw + 96px);min-height:auto;padding-bottom:56px}
  .card{top:38px;width:40vw}
  .card.before{left:5vw}
  .card.after{right:5vw}
  .card .cap{flex-direction:column;gap:3px}
  .hero .works-in>span{flex-basis:100%}      /* the label on its own line, the names together below it */
  .hs-form{width:100%}
  .hs-form input{flex:1 1 100%;width:auto}
  .trio{grid-template-columns:1fr}
  /* other tools vs logowright on a phone: the image small on its own line, the two vectors side by side */
  .cmp{grid-template-columns:1fr 1fr}
  .cmp-cell.in{grid-column:1 / -1;display:flex;align-items:center;gap:14px}
  .cmp-cell.in .frame{width:72px;flex:none}
  .cmp-cell.in .cap{margin-top:0;flex-direction:column;gap:3px}
  .cmp .cap{flex-direction:column;gap:3px}
  .srow{grid-template-columns:1fr;gap:12px}
  .srow-main.wide{grid-column:auto}
  .cols4{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}
  .statement.indent{text-indent:10%}
  .intro-more{margin-left:0}
  .foot-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .cols{--n:1!important}
  .cols>div{border-right:0;border-bottom:1px solid var(--rule)}
  .cols>div:last-child{border-bottom:0}
  .aside{margin-left:0}
  .grid{grid-template-columns:1fr 1fr 1fr}
  .pair{gap:10px}
  .pair .frame{height:46vw}
  .pair .cap{flex-direction:column;gap:3px}
  .run{width:88%;gap:6px}
  .run .pct{font-size:44px}
  .run-status{font-size:14px}
  .run-note{display:none}
  .ref-frame{padding:12px;gap:8px;font-size:14px}
  .ref-frame .refusal h3{font-size:20px}
  .qtab{min-width:150px}
  .ed-stage{height:62vh}
  .ed-group.end{margin-left:0}
  .jrow{grid-template-columns:48px 48px minmax(0,1fr);gap:10px}
  .jthumb{width:48px;height:48px}
  .jthumb img{max-width:42px;max-height:42px}
  .jacts{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:420px){
  .nav .credits{display:none}                /* brand, Convert and Account must fit a small phone */
  .cols4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  body::after{display:none}
}