/* The reset */
*,*::before,*::after{box-sizing:border-box;min-width:0}
:root{
  scrollbar-gutter:stable;text-wrap:pretty;overflow-wrap:break-word;font-synthesis:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;scroll-padding-block-start:4.5rem}
body{margin:0;min-block-size:100svh;display:flex;flex-direction:column}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0}
img,svg,video{display:block;max-inline-size:100%;block-size:auto}
input,textarea,select{font-size:max(16px,1rem)}
button,a,[role="button"]{touch-action:manipulation}
button,[role="button"]{user-select:none;-webkit-user-select:none}

/* Tokens: color, type and space */
:root{
  color-scheme:dark;
  --brand-red:oklch(54.4% 0.191 24);
  --brand-purple:oklch(41.4% 0.132 313);
  --brand-green:oklch(62.6% 0.111 126);
  --cream:oklch(94.9% 0.051 93);
  --bg:light-dark(oklch(99.4% 0.007 89),oklch(18.1% 0.005 39));
  --surface:light-dark(oklch(97.1% 0.021 89),oklch(23.1% 0.010 53));
  --raised:light-dark(oklch(93.8% 0.032 89),oklch(27.4% 0.012 56));
  --line:light-dark(oklch(89.6% 0.034 88),oklch(32.7% 0.013 58));
  --fg:light-dark(oklch(26.7% 0.006 56),oklch(95.9% 0.020 88));
  --muted:light-dark(oklch(50.2% 0.017 64),oklch(74% 0.022 75));
  --accent:light-dark(var(--brand-red),oklch(68.9% 0.163 21));
  --tag-bg:light-dark(oklch(93.6% 0.020 316),oklch(27.4% 0.039 309));
  --tag-fg:light-dark(var(--brand-purple),oklch(71.1% 0.078 313));
  --ok:light-dark(oklch(62.6% 0.111 126),oklch(75.8% 0.126 126));
  --button:var(--brand-red);
  --button-ink:oklch(100% 0 none);
  --button-hover:color-mix(in oklch,var(--button),oklch(0% 0 none) 14%);
  --header:color-mix(in oklch,var(--bg) 80%,transparent);
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --text-hero:clamp(2.25rem,1.86rem + 1.56vw,3rem);
  --text-abstract:clamp(1.25rem,1.12rem + 0.52vw,1.5rem);
  --text-section:clamp(1.625rem,1.43rem + 0.78vw,2rem);
  --space-section:clamp(4rem,3.48rem + 2.08vw,5rem);
  --gutter:clamp(1rem,0.6rem + 1.6vw,1.5rem);
  --radius:18px;
  --ease-out:cubic-bezier(.23,1,.32,1)}
[data-theme="light"]{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
body{background:var(--bg);color:var(--fg);font:1.0625rem/1.47 var(--sans)}
strong,b{font-weight:600}
::selection{background:color-mix(in oklch,var(--accent) 30%,transparent)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:color-mix(in oklch,currentColor 40%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
code{font-family:var(--mono);font-size:.875em;padding:.1em .35em;border-radius:6px;background:var(--surface)}
pre{margin:0;padding:1.125rem 1.25rem;border-radius:12px;background:var(--surface);font:.8125rem/1.6 var(--mono);white-space:pre-wrap;overflow-x:auto}
pre code{padding:0;background:none;font-size:inherit}
.mono{font-family:var(--mono);font-size:.9375em}
.muted{color:var(--muted);font-size:.9375rem}
.small{font-size:.8125rem;line-height:1.45;color:var(--muted)}

/* The content grid: every page frame is one */
.content-grid{
  --content:68rem;--breakout:76rem;
  display:grid;
  grid-template-columns:
    [full-width-start] minmax(var(--gutter),1fr)
    [breakout-start] minmax(0,calc((var(--breakout) - var(--content)) / 2))
    [content-start] min(100% - var(--gutter) * 2,var(--content)) [content-end]
    minmax(0,calc((var(--breakout) - var(--content)) / 2)) [breakout-end]
    minmax(var(--gutter),1fr) [full-width-end]}
.content-grid > *{grid-column:content}
.content-grid.narrow{--content:46rem;row-gap:1.5rem;align-content:start}
main.content-grid.narrow{padding-block-start:clamp(2rem,1.6rem + 1.6vw,3rem)}
main.narrow > .test{margin-block-start:0}

/* The header and the footer */
.site-header{position:sticky;inset-block-start:0;z-index:10;background:var(--header);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-block-end:1px solid var(--line)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-block:.25rem}
.brand{display:flex;align-items:center;gap:.4rem;min-block-size:44px;text-decoration:none;color:var(--fg);font-size:1.3125rem;font-weight:600;letter-spacing:-.01em}
.brand .logo{inline-size:2rem;block-size:2rem;flex:none;margin-inline-end:.25rem}
.brand span{font-weight:400;color:var(--muted)}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem;font-size:.875rem}
.site-nav a{color:var(--fg);text-decoration:none;opacity:.85}
.theme-form{display:block;margin:0}
.theme-button{inline-size:44px;block-size:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:999px;background:transparent;color:var(--fg);cursor:pointer}
.theme-button svg{inline-size:1.125rem;block-size:auto;flex:none}
main.content-grid{flex:1 0 auto;align-content:start}
.test{justify-self:start;margin-block-start:1rem;border-radius:999px;padding:.25rem .875rem;background:var(--surface);color:var(--muted);font-size:.8125rem}
.site-footer{margin-block-start:var(--space-section);background:var(--surface);color:var(--muted);font-size:.8125rem;line-height:1.5}
.site-footer .bar{align-items:flex-start;padding-block:2rem 3rem}
.site-footer address{font-style:normal;display:flex;flex-direction:column;gap:.125rem}
.site-footer address b{color:var(--fg)}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}

/* Cards, buttons and forms: the download, update and long text pages */
.card{background:var(--surface);border-radius:var(--radius);padding:clamp(1.5rem,1.1rem + 1.6vw,2.5rem);display:flex;flex-direction:column;gap:1rem}
.card h1{font-size:clamp(1.75rem,1.55rem + 0.78vw,2.125rem);font-weight:700;line-height:1.12;letter-spacing:-.01em}
.card h2{font-size:1.3125rem;font-weight:600;line-height:1.25;margin-block-start:.5rem}
.card > :is(form,button,.button){align-self:flex-start}
button,.button{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;padding-inline:1.375rem;border:0;border-radius:999px;background:var(--button);color:var(--button-ink);font:400 1.0625rem/1.2 var(--sans);text-decoration:none;cursor:pointer}
:is(button,.button):focus-visible{outline-color:var(--button)}
:is(button,.button,.theme-button,.kinds a):active{transform:scale(.97)}
form{margin:0;display:flex;flex-direction:column;gap:.875rem;align-items:flex-start}
label{display:flex;gap:.625rem;align-items:flex-start}
label:has(> :is(input[type=text],input[type=email])){flex-direction:column;align-items:stretch;gap:.375rem;font-weight:500}
.card > form:has(input[type=text],input[type=email]),form > p:has(> label > :is(input[type=text],input[type=email])){align-self:stretch}
label:has(> :is(input[type=text],input[type=email])){max-inline-size:30rem}
label:has(> input[type=checkbox]){display:block;position:relative;padding-inline-start:1.875rem}
label > input[type=checkbox]{position:absolute;inset-inline-start:0;inset-block-start:.22rem;margin:0}
input[type=checkbox]{inline-size:1.125rem;block-size:1.125rem;margin:.22rem 0 0;flex:none;accent-color:var(--button)}
input[type=email],input[type=text]{inline-size:100%;min-block-size:44px;padding:.5rem .875rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--fg);font-family:var(--sans)}
ol,ul{margin:0;padding-inline-start:1.375rem}
li::marker{color:var(--muted)}
ul.items{list-style:none;padding:0;display:flex;flex-direction:column;gap:.75rem}

/* Text from a file (LISTING.md, the legal texts): the parent sets the space between blocks */
.flow > *{margin-block:0}
.flow > * + *{margin-block-start:var(--flow-space,.875em)}
.flow > :is(h2,h3){--flow-space:1.75em}
.flow > :is(h2,h3) + *{--flow-space:.5em}
.flow li + li{margin-block-start:.5em}
.card.prose{display:block;background:none;padding:0;border-radius:0}
.prose > *{margin-block:0}
.prose > * + *{margin-block-start:1em}
.prose > h1{font-size:var(--text-hero);line-height:1.08}
.prose > h2{margin-block-start:2em;font-size:1.5rem;font-weight:700;line-height:1.2}
.prose > h2 + *{margin-block-start:.5em}
.prose p{max-inline-size:68ch}

/* The front page */
.hero{padding-block:clamp(3rem,2.2rem + 3.2vw,5rem) 1rem}
.eyebrow{font-size:1.0625rem;font-weight:600;color:var(--accent);margin-block-end:.75rem}
.hero h1{max-inline-size:22ch;font-size:var(--text-hero);line-height:1.08;font-weight:700;letter-spacing:-.015em}
.lede{margin-block-start:1.5rem;max-inline-size:40rem;font-size:var(--text-abstract);line-height:1.33}
.agent-hint{margin-block-start:1.5rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem;font-size:.9375rem;color:var(--muted)}
.agent-hint a{text-decoration:none}
.list-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-block-end:1.5rem}
.list-head h2,.section h2{font-size:var(--text-section);font-weight:700;line-height:1.15;letter-spacing:-.005em}
.kinds{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.9375rem}
.kinds a{display:inline-flex;align-items:center;min-block-size:44px;padding-inline:1rem;border-radius:999px;background:var(--surface);color:var(--fg);text-decoration:none}
.kinds a[aria-current]{background:var(--fg);color:var(--bg)}
#tools{padding-block-start:var(--space-section)}
.tool-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:2.5rem 1.5rem}
.tool-card{position:relative;display:flex;flex-direction:column;gap:1rem}
.tool-card .cover{inline-size:100%;aspect-ratio:1200/630}
.tool-card h3{font-size:1.1875rem;font-weight:600;line-height:1.25}
.row-link{color:inherit;text-decoration:none}
.row-link::after{content:"";position:absolute;inset:0}
.row-link:focus-visible{outline:2px solid transparent}
.tool-card:has(.row-link:focus-visible){outline:2px solid var(--accent);outline-offset:6px;border-radius:var(--radius)}
.tool-text{display:flex;flex-direction:column;gap:.375rem}
.pitch{color:var(--muted);font-size:.9375rem;line-height:1.45}
.tool-facts{display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:.875rem;color:var(--muted)}
.tool-facts .tool-price{margin-inline-start:auto;color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.empty{padding-block:1rem;color:var(--muted)}
.section{padding-block-start:var(--space-section)}
.section h2{margin-block-end:1.5rem}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}
.steps li{padding:1.75rem;border-radius:var(--radius);background:var(--surface);display:flex;flex-direction:column;gap:.5rem}
.steps .n{display:grid;place-items:center;inline-size:2rem;block-size:2rem;margin-block-end:.5rem;border-radius:999px;background:var(--button);color:var(--button-ink);font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums}
.steps h3{font-size:1.3125rem;font-weight:600;line-height:1.25}
.steps p{color:var(--muted)}
.agents{display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:flex-start}
.agents > div{flex:1 1 20rem;display:flex;flex-direction:column;gap:1rem}
.agents > div h2{margin-block-end:0}
.agents > div p{color:var(--muted)}
.agents pre{flex:999 1 32rem;min-inline-size:50%}

/* Covers: a picture of 1200 x 630, or one made from the tool's name */
.cover{display:block;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);overflow:clip;object-fit:cover}
.cover-made{display:flex;flex-direction:column;justify-content:space-between;padding:1.125rem 1.25rem;border:0;background:var(--brand-green);color:oklch(100% 0 none)}
.cover-logo{inline-size:2.5rem;block-size:2.5rem}
.cover-name{font-size:1.5rem;font-weight:700;line-height:1.1;letter-spacing:-.01em}

/* The tool page */
.crumbs{padding-block-start:2rem;display:flex;flex-wrap:wrap;gap:.375rem;font-size:.875rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs [aria-current]{color:var(--fg)}
.tool-head{padding-block:1.5rem 2.5rem}
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;font-size:.875rem;color:var(--muted)}
.tag{display:inline-block;padding:.125rem .625rem;border-radius:999px;background:var(--tag-bg);color:var(--tag-fg);font-size:.8125rem;font-weight:500}
.tag.line{background:none;padding-inline:0;color:var(--muted);font-weight:400}
.tool-head h1{margin-block-start:.75rem;font-size:var(--text-hero);line-height:1.08;font-weight:700;letter-spacing:-.015em}
.tool-head .pitch{margin-block-start:1rem;max-inline-size:40rem;font-size:var(--text-abstract);line-height:1.33;color:var(--fg)}
.tool-top,.tool-body{display:flex;flex-wrap:wrap;align-items:flex-start}
.tool-top{gap:1.5rem 2.5rem}
.tool-media{flex:999 1 0;min-inline-size:55%;margin:0}
.tool-media .cover,.video{inline-size:100%;aspect-ratio:1200/630}
.tool-media .cover-made{padding:clamp(1.25rem,0.9rem + 1.4vw,2.25rem)}
.tool-media .cover-made .cover-logo{inline-size:clamp(2.5rem,1.8rem + 2.8vw,4rem);block-size:auto}
.tool-media .cover-made .cover-name{font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem)}
.video{aspect-ratio:16/9;border-radius:var(--radius);overflow:clip;background:var(--surface)}
.video iframe{display:block;inline-size:100%;block-size:100%;border:0}
.tool-media figcaption{margin-block-start:.75rem;font-size:.875rem;color:var(--muted)}
.buy{flex:1 1 20rem;padding:1.75rem;border-radius:var(--radius);background:var(--surface);display:flex;flex-direction:column;gap:1.125rem}
.price{font-size:2rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.refund-rule{font-size:.875rem;line-height:1.45;color:var(--muted)}
.buy .button{inline-size:100%;min-block-size:48px}
.buy-facts{list-style:none;margin:0;padding:1rem 0 0;border-block-start:1px solid var(--line);display:flex;flex-direction:column;gap:.5rem;font-size:.9375rem;color:var(--muted)}
.buy-facts li{display:flex;align-items:start;gap:.625rem}
.buy-facts svg{flex:none;inline-size:1em;block-size:1lh;color:var(--ok)}
.tool-body{gap:3rem 4rem;padding-block-start:4rem}
.tool-body article{flex:999 1 0;min-inline-size:55%;display:flex;flex-direction:column;gap:3.5rem}
.tool-body article h2{font-size:var(--text-section);font-weight:700;line-height:1.15;letter-spacing:-.005em}
.tool-body article h3{font-size:1.3125rem;font-weight:600;line-height:1.25}
.tool-body article :is(p,li){max-inline-size:68ch}
.side{flex:1 1 18rem;display:flex;flex-direction:column;gap:2rem;font-size:.9375rem;line-height:1.47}
.side section{padding-block-start:1.25rem;border-block-start:1px solid var(--line)}
.side h2{font-size:1.0625rem;font-weight:600}
.changes{display:flex;flex-direction:column;gap:1.5rem}
.changes h3{display:flex;flex-wrap:wrap;gap:.25rem .875rem;align-items:baseline}
.changes time{font-weight:400;font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Hover only where hover exists; motion only where it is welcome */
@media (hover:hover) and (pointer:fine){
  .site-nav a:hover{opacity:1;text-decoration:underline}
  .site-footer a:hover,.crumbs a:hover,.agent-hint a:hover{text-decoration:underline}
  .theme-button:hover{background:var(--surface)}
  :is(button,.button):hover{background:var(--button-hover)}
  .kinds a:not([aria-current]):hover{background:var(--raised)}
  .tool-card:hover h3{color:var(--accent)}
  .tool-card:hover .cover{filter:brightness(1.06)}
}
@media (prefers-reduced-motion:no-preference){
  :is(button,.button,.theme-button,.kinds a){transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out)}
}
@media (max-width:35rem){
  .tool-media,.tool-body article{min-inline-size:100%}
  .bar{flex-wrap:nowrap;gap:.5rem}
  .brand{font-size:1.0625rem;white-space:nowrap}
  .site-nav{flex-wrap:nowrap;gap:.75rem;white-space:nowrap}
  .site-nav .home{display:none}
  .brand span{display:none}
  .brand .logo{inline-size:1.75rem;block-size:1.75rem}
}
@media print{
  .site-header,.theme-form{display:none}
  :root{color-scheme:light}
}