/* Softool. Blue does the work, red and green mark a few tools, white is everything else. */

@font-face { font-family: "Red Hat Display"; src: url(../fonts/red-hat-display-latin-wght-normal.woff2) format("woff2"); font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Display"; src: url(../fonts/red-hat-display-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 300 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Red Hat Text"; src: url(../fonts/red-hat-text-latin-wght-normal.woff2) format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Text"; src: url(../fonts/red-hat-text-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 300 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* The wordmark only: TeX Gyre Adventor Bold, the free typeface drawn to match ITC Avant Garde Gothic, cut down to capital letters */
@font-face { font-family: "Softool Wordmark"; src: url(../fonts/wordmark.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #fff;
  --ink: #0c1b3d;
  --ink-2: #45526e;
  --ink-3: #5f6b85;
  --line: #e3e8f2;
  --line-2: #c8d1e2;
  --mist: #f5f8fe;
  --mist-2: #e8eefa;
  --red: #dc2f2f;
  --red-dark: #b41f1f;
  --red-tint: #fdecec;
  --blue: #1f5ae6;
  --blue-dark: #1746c0;
  --blue-tint: #eaf1ff;
  --blue-soft: #c9d8fb;
  --green: #17803d;
  --green-tint: #e6f5ec;

  --display: "Red Hat Display", "Red Hat Text", system-ui, sans-serif;
  --text: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --float: 0 12px 32px -8px rgb(12 27 61 / .22), 0 2px 6px rgb(12 27 61 / .08);
  --lift: 0 1px 2px rgb(12 27 61 / .05), 0 8px 18px -8px rgb(31 90 230 / .28);
  --ring: 0 0 0 3px rgb(31 90 230 / .26);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 1rem/1.55 var(--text); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, canvas, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }

.wrap { width: min(100% - 40px, 1180px); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: var(--r); }
.skip:focus { top: 12px; }
.sprite { position: absolute; }

/* Icons: one colour, with a lighter layer of the same colour underneath */
.i { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.i-shade { fill: var(--i-shade, currentColor); opacity: var(--i-shade-o, .2); }
.i-line .i-shade { display: none; }
/* Shown large on a tint, icons get heavier strokes and a fuller shade so they read as solid shapes */
.tile-icon .i, .hero-facts .i, .gains .i { stroke: currentColor; stroke-width: 7; stroke-linejoin: round; --i-shade-o: .36; }

/* ---- Buttons ---------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r);
  font-weight: 600; font-size: .9375rem; line-height: 1.2; text-align: center; background: none; transition: background-color .12s, border-color .12s, color .12s; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover:not([disabled]) { background: var(--blue-dark); }
.btn-line { border-color: var(--line-2); background: var(--paper); }
.btn-line:hover:not([disabled]) { border-color: var(--ink-3); background: var(--mist); }
.btn-quiet { color: var(--ink-2); padding-inline: 12px; }
.btn-quiet:hover:not([disabled]) { background: var(--mist-2); color: var(--ink); }
.btn-danger:hover:not([disabled]) { background: var(--red-tint); color: var(--red-dark); border-color: transparent; }
.btn-lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.btn-xl { min-height: 60px; padding: 0 34px; font: 700 1.125rem/1.2 var(--display); border-radius: 14px; letter-spacing: -.005em; }
.btn-xl.btn-primary { background: linear-gradient(100deg, var(--blue), #2f7dff); box-shadow: 0 12px 22px -10px rgb(31 90 230 / .7); }
.btn-block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); }
.icon-btn:hover { background: var(--mist-2); color: var(--ink); }

/* ---- Header ----------------------------------------------------------- */
.top { border-bottom: 1px solid var(--line); background: var(--paper); }
.top-in { display: flex; align-items: center; gap: 40px; height: 70px; }
.top-logo { display: flex; align-items: center; min-height: 44px; }
.logo { display: inline-flex; align-items: center; gap: .4em; font: 700 1.5625rem/1 "Softool Wordmark", var(--display); letter-spacing: -.01em; color: var(--ink); }
/* the mark has a near-white sheet in it: a faint shadow keeps its edge visible on a white header */
.logo img { width: auto; height: 1.5em; filter: drop-shadow(0 1px 2px rgb(12 27 61 / .2)); }
.logo b { font-weight: inherit; color: var(--blue); }
.top-nav { display: flex; gap: 28px; margin-right: auto; font-size: .9375rem; font-weight: 500; color: var(--ink-2); }
.top-nav a { padding: 6px 0; }
.top-nav a:hover { color: var(--blue); }
.top-all { display: flex; align-items: center; gap: 10px; min-width: 300px; height: 44px; padding: 0 10px 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--mist);
  color: var(--ink-3); font-size: .9375rem; margin-left: auto; }
.top-all:hover { border-color: var(--blue-soft); color: var(--ink-2); }
.top-all .i { color: var(--ink); }
.top-all span { margin-right: auto; }
kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); font: 600 .75rem/1 var(--text); color: var(--ink-3); }

/* All-tools panel (native popover) */
.panel { position: fixed; inset: 78px 0 auto; width: min(100% - 24px, 1180px); max-height: calc(100dvh - 94px); margin: 0 auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); color: var(--ink); box-shadow: var(--float); }
.panel::backdrop { background: rgb(12 27 61 / .28); }
.panel-search { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
.panel-search > .i { color: var(--ink-3); }
.panel-search input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: none; font-size: 1.0625rem; }
.panel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 26px 20px; padding: 22px 20px 26px; }
.panel-list h2 { margin-bottom: 8px; padding-left: 8px; font: 600 .8125rem/1.3 var(--text); letter-spacing: 0; color: var(--ink-3); }
.panel-list a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); font-size: .9375rem; font-weight: 500; }
.panel-list a .i { color: var(--blue); --i-shade-o: .3; }
.panel-list a:hover, .panel-list a:focus-visible { background: var(--mist); }
.panel-empty { grid-column: 1 / -1; color: var(--ink-2); }

/* ---- Hero ------------------------------------------------------------- */
.hero { padding: 84px 0 96px; overflow: hidden; background: radial-gradient(720px 440px at 78% 48%, #e3ecff, rgb(227 236 255 / 0) 72%), var(--mist); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.375rem); font-weight: 900; line-height: 1.02; letter-spacing: -.04em; }
h1 em, h2 em { font-style: normal; color: var(--blue); }
.hero-lead { max-width: 33em; margin-top: 24px; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 16px 20px; margin-top: 36px; }
.hero-facts li { display: flex; align-items: center; gap: 11px; font-size: .8125rem; line-height: 1.4; color: var(--ink-3); white-space: nowrap; }
.hero-facts strong { display: block; font-weight: 700; font-size: .9375rem; color: var(--ink); }
/* An icon on a white disc: hero facts and the three gains */
.hero-facts .i.is-green { color: var(--green); }
.hero-facts .i, .gains .i { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: var(--paper); color: var(--blue); box-shadow: var(--lift); }

.hero-drop { position: relative; max-width: 460px; width: 100%; margin-left: auto; filter: drop-shadow(0 24px 34px rgb(31 70 160 / .16)); }
.hero-sheet { position: absolute; inset: 0; border-radius: 26px; transition: transform .22s ease; }
.hero-sheet-b { background: #d5e2ff; transform: rotate(5deg) translate(14px, -4px); }
.hero-sheet-r { background: #fbe3e6; transform: rotate(-4deg) translate(-14px, 10px); }
/* The card is a sheet of paper: its corner is cut off and a blue flap is folded over it */
.sheet { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 410px; padding: 48px 40px 40px; text-align: center; cursor: pointer;
  background: var(--paper); border-radius: 26px; clip-path: polygon(0 0, calc(100% - 58px) 0, 100% 58px, 100% 100%, 0 100%); }
.sheet::before { content: ""; position: absolute; z-index: 1; top: 0; right: 0; width: 58px; height: 58px; background: linear-gradient(45deg, var(--blue) 35%, #5d8cf8); clip-path: polygon(0 0, 100% 100%, 0 100%); border-bottom-left-radius: 14px; }
.sheet::after { content: ""; position: absolute; inset: 12px; border: 1.5px dashed var(--blue-soft); border-radius: 16px; pointer-events: none; transition: border-color .15s; }
.sheet:hover::after, .sheet:focus-within::after, .hero-drop.is-over .sheet::after { border-color: var(--blue); }
.sheet-icon { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); font-size: 1.875rem; }
.sheet strong { font: 800 1.5rem/1.15 var(--display); letter-spacing: -.02em; }
.sheet-hint { max-width: 25em; margin-bottom: 10px; color: var(--ink-2); font-size: .9375rem; }
.sheet .btn { min-width: 214px; --i-shade-o: 0; }
.sheet-safe { font-size: .8125rem; color: var(--ink-3); }
.hero-drop.is-over .sheet { background: #f7faff; }
.hero-drop.is-over .hero-sheet-b { transform: rotate(9deg) translate(24px, -4px); }
.hero-drop.is-over .hero-sheet-r { transform: rotate(-7deg) translate(-24px, 10px); }
.hero-curl { position: absolute; right: -8px; bottom: -40px; width: 74px; fill: none; stroke: #a9bdee; stroke-width: 1.5; stroke-linecap: round; }

/* ---- Tool directory --------------------------------------------------- */
.dir { padding: 68px 0 64px; scroll-margin-top: 12px; }
.dir-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-bottom: 26px; }
.dir-head h2 { font-size: 2.125rem; font-weight: 800; letter-spacing: -.03em; }
.dir-sub { margin-top: 8px; color: var(--ink-3); }
.dir-head:has(.dir-picked:not([hidden])) .dir-sub { display: none; }
.dir-picked { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--blue-tint); color: var(--blue-dark); font-size: .9375rem; font-weight: 600; }
.search { display: flex; align-items: center; gap: 10px; width: min(100%, 420px); height: 50px; margin-left: auto; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper); color: var(--ink); }
.search:focus-within { border-color: var(--blue); box-shadow: var(--ring); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); }
.search input::placeholder, .panel-search input::placeholder { color: var(--ink-3); }

.dir-group { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px 28px; padding: 30px 0; }
.dir-group ~ .dir-group { border-top: 1px solid var(--line); }
.dir-group h3 { margin-top: 14px; font-size: 1.25rem; font-weight: 800; }
.dir-group header p { max-width: 15em; margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
.dir-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
.tile { position: relative; display: flex; gap: 14px; height: 100%; padding: 16px 34px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.tile::after { content: ""; position: absolute; top: 23px; right: 17px; width: 7px; height: 7px; border: solid #97a3bd; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.tile:hover { border-color: var(--blue-soft); box-shadow: var(--lift); }
.tile:hover::after { border-color: var(--blue); }
.tile-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 13px; background: var(--blue-tint); color: var(--blue); font-size: 1.5rem; }
.tile-icon[data-tone="red"] { background: var(--red-tint); color: var(--red); }
.tile-icon[data-tone="green"] { background: var(--green-tint); color: var(--green); }
.tile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile-text strong { font-weight: 700; font-size: .96875rem; line-height: 1.3; }
.tile-text span { font-size: .875rem; line-height: 1.45; color: var(--ink-3); text-wrap: balance; }
.dir-empty { padding: 28px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.dir .is-dim { opacity: .32; }

/* ---- Your files stay with you ----------------------------------------- */
.how { padding: 88px 0 84px; background: var(--mist); }
.how > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px 56px; align-items: start; }
.how-copy { padding-top: 22px; }
.how h2 { font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: 900; letter-spacing: -.035em; }
.how-copy p { max-width: 34em; margin-top: 16px; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.way { display: flex; flex-direction: column; align-items: center; padding: 26px 20px 24px; border: 1.5px solid transparent; border-radius: var(--r-xl); background: rgb(255 255 255 / .62); text-align: center; }
.way-us { border-color: var(--blue); background: var(--paper); box-shadow: 0 18px 34px -22px rgb(31 90 230 / .5); }
.way h3 { font: 800 1.0625rem/1.2 var(--display); letter-spacing: -.01em; }
.way h3 .logo { font-size: 1.125rem; }
.way-sub { margin-top: 6px; font-size: .9375rem; color: var(--ink-3); }
.way-note { margin-top: auto; font-size: .9375rem; line-height: 1.5; color: var(--ink-3); }
.way-us .way-note { font-weight: 500; color: var(--blue-dark); }
.ill { width: min(100%, 210px); margin: 16px 0 14px; }
.ill-screen { fill: var(--blue-tint); stroke: var(--blue); stroke-width: 4; }
.ill-soft { fill: var(--blue-soft); }
.ill-page { fill: #fff; stroke: var(--blue-soft); stroke-width: 1.5; }
.ill-blue { fill: var(--blue); }
.ill-rim { stroke: #fff; stroke-width: 3; }
.ill-text, .ill-tick, .ill-hop { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ill-tick { stroke: #fff; }
.ill-hop { stroke: #8b9bc0; stroke-width: 2.5; }
.gains { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; }
.gains li { display: flex; align-items: flex-start; gap: 18px; }
.gains .i { width: 60px; height: 60px; padding: 15px; }
.gains h3 { margin-top: 5px; font-size: 1.0625rem; font-weight: 800; letter-spacing: -.015em; }
.gains p { margin-top: 6px; color: var(--ink-2); font-size: .9375rem; line-height: 1.6; }

/* ---- FAQ -------------------------------------------------------------- */
.faq { padding: 88px 0; }
.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; }
.faq h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); font-weight: 900; letter-spacing: -.035em; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 2px; font-weight: 600; font-size: 1.03125rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat; transition: transform .18s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--blue); }
.faq details p { max-width: 62ch; padding: 0 2px 22px; color: var(--ink-2); line-height: 1.65; }

/* ---- Footer ----------------------------------------------------------- */
.foot { padding: 60px 0 28px; background: var(--ink); color: #c3cbdb; font-size: .9rem; }
.foot .logo { color: #fff; }
.foot .logo b { color: #4d86ff; }
/* Seven groups of tools need the full width, so the brand line sits above them */
.foot-top { display: grid; gap: 34px; }
.foot-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-bottom: 30px; border-bottom: 1px solid rgb(255 255 255 / .14); }
.foot-brand p { max-width: 48ch; line-height: 1.55; }
.foot-tools { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 30px 18px; }
.foot-tools h2 { margin-bottom: 10px; font: 600 .875rem/1.3 var(--text); letter-spacing: 0; color: #fff; }
.foot-tools li + li { margin-top: 6px; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .14); }
.foot-bottom nav { display: flex; gap: 22px; }

/* ---- Text pages ------------------------------------------------------- */
.prose { max-width: 760px; padding: 64px 0 96px; }
.prose h1 { font-size: clamp(2.125rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.04em; }
.prose h2 { margin-top: 44px; font-size: 1.375rem; font-weight: 800; }
.prose p, .prose ul { margin-top: 14px; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.prose .prose-lead { margin-top: 22px; font-size: 1.25rem; line-height: 1.55; color: var(--ink); }
.prose .prose-meta { font-size: .875rem; color: var(--ink-3); }
.prose ul { padding-left: 22px; list-style: disc; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.prose a.btn { color: #fff; text-decoration: none; }
.prose-center { text-align: center; margin-inline: auto; padding-block: 110px 140px; }
.prose-center p { margin-top: 20px; }

/* ---- Responsive: site chrome ------------------------------------------ */
@media (max-width: 1120px) {
  .top-in { gap: 28px; }
  .top-all { min-width: 216px; }
  .dir-group { grid-template-columns: 190px minmax(0, 1fr); }
  .dir-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .top-nav a:nth-child(n+4) { display: none; }
  .hero-in { gap: 44px; }
  .how > .wrap, .faq-in { grid-template-columns: minmax(0, 1fr); }
  .foot-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .top-nav { display: none; }
  .hero { padding: 48px 0 76px; }
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-drop { margin-inline: auto; }
  .sheet { min-height: 340px; }
  .dir { padding-top: 52px; }
  .dir-group { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .dir-group header { display: flex; align-items: center; gap: 12px; }
  .dir-group header .tile-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 1.25rem; }
  .dir-group h3 { margin-top: 0; }
  .dir-group header p { display: none; }
  .gains { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .how, .faq { padding: 64px 0; }
  /* links stacked this tightly need a taller hit area on touch screens */
  .foot-tools li + li { margin-top: 0; }
  .foot-tools a, .foot-bottom a { display: inline-block; padding-block: 7px; }
  .foot-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 32px, 1180px); }
  .top-in { gap: 16px; height: 60px; }
  .top-all { min-width: 0; }
  .top-all kbd { display: none; }
  .panel { inset: 66px 0 auto; max-height: calc(100dvh - 78px); }
  .hero-lead { font-size: 1.0625rem; }
  .hero-facts { flex-direction: column; margin-top: 28px; }
  .hero-sheet-b { transform: rotate(3deg) translate(4px, 0); }
  .hero-sheet-r { transform: rotate(-2.5deg) translate(-4px, 6px); }
  .hero-curl { display: none; }
  .sheet { padding: 40px 26px 34px; }
  .search { width: 100%; }
  .dir-head h2 { font-size: 1.75rem; }
  .dir-tools, .ways { grid-template-columns: minmax(0, 1fr); }
  .foot-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrow phones: logo and search no longer fit side by side, so search shrinks to its icon */
@media (max-width: 420px) {
  .top-all { justify-content: center; width: 44px; padding: 0; }
  .top-all span { display: none; }
}

/* ======================================================================
   Tool pages
   ====================================================================== */
.tool-band { overflow: hidden; background: linear-gradient(rgb(255 255 255 / 0) 58%, var(--paper)), radial-gradient(560px 320px at 86% 46%, #d3e2ff, rgb(211 226 255 / 0) 72%), radial-gradient(360px 220px at 60% -10%, #e6eeff, rgb(230 238 255 / 0) 70%), var(--mist); }
.tool-head { position: relative; padding-block: 22px 38px; padding-right: 470px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: .875rem; color: var(--ink-3); }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 13px 0 9px; border: solid #97a3bd; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.crumbs a { display: flex; }
.crumbs a:hover { color: var(--blue); }
.crumbs .i { font-size: 1.0625rem; --i-shade-o: 0; }
.crumbs [aria-current] { font-weight: 500; color: var(--ink-2); }
.tool-title { margin-top: 30px; }
.tool-title h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 900; line-height: 1.04; letter-spacing: -.04em; }
.tool-title p { max-width: 30em; margin-top: 10px; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.tool-facts { margin-top: 28px; }
/* What goes in, the tool, what comes out. Its bottom edge is cut off by the band, as if the sheet slides in behind the drop area. */
.tool-art { position: absolute; right: -6px; bottom: 0; width: 466px; filter: drop-shadow(0 14px 16px rgb(31 70 160 / .16)); }
.art-sheet { fill: #fff; stroke: #dce6fb; }
.art-fold { fill: var(--blue-soft); }
.art-lines { fill: none; stroke: #e2e9f8; stroke-width: 4; stroke-linecap: round; }
.art-tag { fill: var(--blue); }
.art-tag[data-tone="red"] { fill: var(--red); }
.art-tag[data-tone="green"] { fill: var(--green); }
.art-tag-text { fill: #fff; font: 800 10px var(--display); letter-spacing: .02em; }
.art-wire { fill: none; stroke: #6f97f2; stroke-width: 1.5; stroke-dasharray: 5 5; }
.art-hub { fill: var(--blue); stroke: #fff; stroke-width: 3; }
.art-done { fill: #1ea456; }
.art-on { color: #fff; fill: #fff; stroke: #fff; stroke-width: 9; --i-shade-o: 0; }
/* Once a file is in, the head shrinks to the title so the work area is near the top */
body:has(.stage:not([data-state="idle"])) {
  .tool-facts, .tool-art { display: none; }
  .tool-head { padding-right: 0; padding-bottom: 26px; }
  .tool-title { margin-top: 16px; }
  .tool-title h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
  .tool-title p { max-width: none; margin-top: 4px; font-size: 1.0625rem; }
}

.tool { padding-bottom: 88px; }

/* Empty state: the drop area */
/* A dashed frame with a white gap inside it, then a pale panel with two soft waves */
.drop { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 46px 40px 38px; text-align: center; border: 1.5px dashed #8fb0f5; border-radius: 22px; box-shadow: inset 0 0 0 7px var(--paper);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0 70c80 10 120 70 160 130s100 90 240 100H0z' fill='%231f5ae6' fill-opacity='.06'/%3E%3Cpath d='M0 160c60 0 100 40 130 80s70 60 110 60H0z' fill='%231f5ae6' fill-opacity='.05'/%3E%3C/svg%3E") left bottom / 44% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M400 60c-80 20-110 80-150 140s-110 90-250 100h400z' fill='%231f5ae6' fill-opacity='.05'/%3E%3Cpath d='M400 170c-50 10-80 40-110 70s-70 55-120 60h230z' fill='%231f5ae6' fill-opacity='.05'/%3E%3C/svg%3E") right bottom / 44% 100% no-repeat,
    linear-gradient(#eaf1ff, #f6f9ff); }
.drop-art { width: 96px; overflow: visible; filter: drop-shadow(0 10px 12px rgb(31 70 160 / .18)); }
.ill-sheet { fill: #fff; }
.drop h2 { margin-top: 4px; font-size: clamp(1.5rem, 2.8vw, 1.9375rem); font-weight: 800; letter-spacing: -.03em; }
.drop-hint { color: var(--ink-2); }
.drop .btn-xl { min-width: 300px; margin-top: 8px; gap: 12px; --i-shade-o: 0; }
.drop .btn-xl .i { font-size: 1.375rem; }
.drop-extra:empty { display: none; }
.drop-extra { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.drop-facts { justify-content: space-between; width: 100%; margin-top: 30px; text-align: left; }
.drop-facts .i { width: 50px; height: 50px; padding: 12px; }
.stage:not([data-state="idle"]) > .drop { display: none; }

/* Full-window drop target */
.dropping::after { content: "Drop to add"; position: fixed; inset: 12px; z-index: 40; display: grid; place-items: center; border: 3px dashed var(--blue); border-radius: 24px;
  background: rgb(235 240 254 / .92); color: var(--blue-dark); font: 800 1.75rem var(--display); pointer-events: none; }

/* Workspace */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 20px; align-items: start; }
.work-main { min-height: 440px; padding: 16px 18px 20px; border-radius: var(--r-xl); background: var(--mist); }
.work-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 42px; margin-bottom: 14px; }
.work-bar p { margin-right: auto; font-weight: 600; font-size: .9375rem; }
.work-bar p span { font-weight: 400; color: var(--ink-3); }
.work-size { font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.work-side { position: sticky; top: 16px; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--paper); }
.work-opts { flex: 1; min-height: 0; padding: 20px 20px 4px; overflow-y: auto; overscroll-behavior: contain; }
.work-opts > h2 { margin-bottom: 16px; font-size: 1.1875rem; font-weight: 800; }
.work-go { padding: 16px 20px 20px; }
.work-go .btn { width: 100%; }
.work-why { margin-top: 10px; font-size: .84375rem; color: var(--ink-3); text-align: center; }
.stage:not([data-state="work"]) > .work { display: none; }

/* Notices */
.notice { display: flex; gap: 10px; margin-bottom: 14px; padding: 11px 14px; border-radius: var(--r); background: var(--blue-tint); color: #173584; font-size: .90625rem; line-height: 1.5; }
.notice .i { margin-top: 2px; }
.notice-warn { background: var(--red-tint); color: #8f1b1b; }
.notice p + p { margin-top: 4px; }

/* File cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; }
.card { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.card-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 6px; border-radius: var(--r-sm); background: var(--mist); overflow: hidden; }
.card-thumb canvas, .card-thumb img { position: absolute; inset: 8px; margin: auto; max-width: calc(100% - 16px); max-height: calc(100% - 16px); width: auto; height: auto; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgb(15 28 54 / .1); }
.card-thumb > .i { font-size: 2.75rem; color: var(--blue); --i-shade-o: .3; }
.card-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; font-size: .84375rem; line-height: 1.35; overflow-wrap: anywhere; }
.card-meta { font-size: .78125rem; color: var(--ink-3); }
.card-x { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink-2); font-size: .8125rem; }
.card-x:hover { border-color: var(--red); background: var(--red); color: #fff; }
.card-n { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; font-size: .75rem; }
.card-lock { position: absolute; top: 9px; left: 9px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .8125rem; --i-shade-o: 0; }
.card-n + .card-lock { left: 38px; }
.is-sortable > .card, .is-sortable > .pg { cursor: grab; }
.is-sortable > :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: var(--r-lg); }
.sortable-ghost { opacity: .3; }
.sortable-chosen { box-shadow: var(--float); }
.card-add { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 180px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: none; color: var(--ink-2); font-weight: 600; font-size: .875rem; }
.card-add:hover { border-color: var(--blue); color: var(--blue); background: var(--paper); }
.card-add .i { font-size: 1.5rem; }

/* Page grid */
.pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 22px; }
.pg { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pg-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--r-sm); background: none; }
.pg-thumb canvas, .pg-blank { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgb(15 28 54 / .1); border-radius: 2px; }
.pg-blank { width: 72%; height: 100%; }
.pg-n { font-size: .78125rem; font-weight: 600; color: var(--ink-2); }
.pg-n small { font-weight: 400; color: var(--ink-3); }
button.pg-thumb { cursor: pointer; }
button.pg-thumb:hover canvas { box-shadow: 0 0 0 2px var(--line-2), 0 2px 6px rgb(15 28 54 / .1); }
.pg.is-on .pg-thumb canvas { box-shadow: 0 0 0 3px var(--blue); }
.pg.is-on .pg-thumb::after { content: ""; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat; }
.pages[data-tone="red"] .pg.is-on .pg-thumb canvas { box-shadow: 0 0 0 3px var(--red); opacity: .38; }
.pages[data-tone="red"] .pg.is-on .pg-thumb::after { background-color: var(--red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); }
.pg-tools { position: absolute; top: 6px; left: 50%; z-index: 1; display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--ink); transform: translateX(-50%); opacity: 0; transition: opacity .12s; }
.pg:hover .pg-tools, .pg:focus-within .pg-tools { opacity: 1; }
.pg-tools button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: #fff; font-size: .9375rem; --i-shade-o: 0; }
.pg-tools button:hover { background: rgb(255 255 255 / .2); }
@media (hover: none) { .pg-tools { opacity: 1; } }
.pg-cut { position: absolute; top: 0; right: -22px; z-index: 1; display: grid; place-items: center; width: 22px; height: calc(100% - 24px); padding: 0; border: 0; background: none; color: var(--ink-3); }
.pg-cut::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed transparent; transform: translateX(-50%); }
.pg-cut .i { position: relative; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--line); --i-shade-o: 0; }
.pg-cut:hover .i { color: var(--red); box-shadow: 0 0 0 1.5px var(--red); }
.pg-cut[aria-pressed="true"]::before { border-left-color: var(--red); }
.pg-cut[aria-pressed="true"] .i { background: var(--red); color: #fff; box-shadow: none; }
.pg:last-child .pg-cut { display: none; }

/* Live preview */
.preview { margin-bottom: 18px; }
.preview-bar { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; font-weight: 600; font-size: .875rem; color: var(--ink-2); }
.preview-bar .icon-btn[disabled] { opacity: .3; cursor: default; }
.preview-page { display: grid; place-items: center; min-height: 300px; }
.preview-page canvas { width: auto; height: auto; max-width: 100%; max-height: 64vh; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 8px 22px -6px rgb(15 28 54 / .2); }

/* Page editor */
.ed-bar { position: sticky; top: 8px; z-index: 6; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 6px 16px -8px rgb(15 28 54 / .22); }
.ed-tools { display: flex; gap: 2px; padding: 6px; overflow-x: auto; scrollbar-width: thin; }
.ed-tools button { display: grid; justify-items: center; gap: 3px; flex: none; min-width: 54px; padding: 7px 4px 5px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font-weight: 600; font-size: .6875rem; --i-shade-o: .18; }
.ed-tools button .i { font-size: 1.25rem; }
.ed-tools button:hover:not([disabled]) { background: var(--mist); color: var(--ink); }
.ed-tools button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.ed-tools button[disabled] { opacity: .35; cursor: default; }
.ed-gap { flex: 1; min-width: 8px; }
.ed-props { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); }
.ed-props > * { flex: none; }
.ed-props p { margin-right: auto; }
.ed-props .btn { min-height: 34px; padding: 0 12px; font-size: .84375rem; }
.ed-props .btn-danger { margin-left: auto; }
.ed-colors { display: flex; align-items: center; gap: 6px; }
.ed-colors button { width: 24px; height: 24px; padding: 0; border: 2px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.ed-colors button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--blue); }
.ed-colors input { width: 30px; height: 28px; padding: 1px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper); cursor: pointer; }
.ed-size { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.ed-size select { height: 34px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); font-weight: 400; }

.ed-pages { display: grid; justify-items: center; gap: 30px; padding-bottom: 12px; }
.ed-page { position: relative; width: 100%; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 8px 20px -10px rgb(15 28 54 / .3); }
.ed-page > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-layer { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.ed-no { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.ed:not([data-mode="select"]) .ed-layer { cursor: crosshair; touch-action: none; }
.ed[data-mode="text"] .ed-layer, .ed[data-mode="date"] .ed-layer { cursor: text; touch-action: pan-y; }
.ed[data-mode="place"] .ed-layer { cursor: copy; touch-action: pan-y; }

.ob { position: absolute; left: calc(var(--x) * var(--s) * 1px); top: calc(var(--y) * var(--s) * 1px); width: calc(var(--w) * var(--s) * 1px); height: calc(var(--h) * var(--s) * 1px); cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; }
.ob[data-type="text"] { width: auto; height: auto; }
.ob-text { min-width: 6px; min-height: 1.2em; font-size: calc(var(--fs) * var(--s) * 1px); line-height: 1.2; white-space: pre; outline: 0; }
.ob.is-editing, .ob.is-editing .ob-text { cursor: text; user-select: text; -webkit-user-select: text; }
.ob > svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }   /* the box around the shape takes the clicks, so handles stay reachable */
.ob img { width: 100%; height: 100%; pointer-events: none; }
.ob:hover { outline: 1px dashed var(--blue); outline-offset: 3px; }
.ob.is-sel { outline: 1.5px solid var(--blue); outline-offset: 3px; }
.ob-h { display: none; position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px; border: 2px solid var(--blue); border-radius: 50%; background: #fff; }
.ob-h::after { content: ""; position: absolute; inset: -9px; }
.ob.is-sel .ob-h { display: block; }
.ob-h[data-h^="n"] { top: 0; }
.ob-h[data-h^="s"] { top: 100%; }
.ob-h[data-h="e"], .ob-h[data-h="w"] { top: 50%; }
.ob-h[data-h$="w"] { left: 0; }
.ob-h[data-h$="e"] { left: 100%; }
.ob-h[data-h="n"], .ob-h[data-h="s"] { left: 50%; }
.ob-h[data-h="nw"], .ob-h[data-h="se"] { cursor: nwse-resize; }
.ob-h[data-h="ne"], .ob-h[data-h="sw"] { cursor: nesw-resize; }
.ob-h[data-h="n"], .ob-h[data-h="s"] { cursor: ns-resize; }
.ob-h[data-h="e"], .ob-h[data-h="w"] { cursor: ew-resize; }
.ob-h[data-h^="p"] { cursor: crosshair; }
.ob-x { display: none; position: absolute; z-index: 1; top: -32px; right: -8px; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: .75rem; --i-shade-o: 0; }
.ob.is-sel:not(.is-editing) .ob-x { display: grid; }
.ob-x:hover { background: var(--red); }

/* Crop frame: the part outside it is dimmed, handles stay inside the page */
.ob[data-shape="crop"], .ob[data-shape="crop"]:hover { outline: 2px solid var(--blue); outline-offset: -2px; box-shadow: 0 0 0 9999px rgb(15 28 54 / .55); }
.ob[data-shape="crop"] .ob-h { display: block; width: 16px; height: 16px; margin: 0; border-radius: 3px; }
.ob[data-shape="crop"] .ob-h[data-h="n"] { margin: 0 0 0 -8px; }
.ob[data-shape="crop"] .ob-h[data-h="ne"] { margin: 0 0 0 -16px; }
.ob[data-shape="crop"] .ob-h[data-h="e"] { margin: -8px 0 0 -16px; }
.ob[data-shape="crop"] .ob-h[data-h="se"] { margin: -16px 0 0 -16px; }
.ob[data-shape="crop"] .ob-h[data-h="s"] { margin: -16px 0 0 -8px; }
.ob[data-shape="crop"] .ob-h[data-h="sw"] { margin: -16px 0 0; }
.ob[data-shape="crop"] .ob-h[data-h="w"] { margin: -8px 0 0; }

/* Signature dialog */
dialog.sig { width: min(100% - 24px, 640px); }
dialog.sig .seg, dialog.sig .ed-colors { margin-top: 12px; }
dialog.sig .input { margin-top: 14px; }
.sig-pad { width: 100%; height: auto; margin-top: 14px; border: 1.5px dashed var(--line-2); border-radius: var(--r); background: #fff; touch-action: none; cursor: crosshair; }
.sig-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.sig-row .hint, .sig-shown .hint { font-size: .84375rem; color: var(--ink-3); }
.sig-fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sig-fonts button { min-height: 76px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; font-size: 1.875rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-fonts button[aria-checked="true"] { border-color: var(--blue); box-shadow: var(--ring); }
.sig-shown { display: grid; place-items: center; min-height: 120px; margin: 12px 0; padding: 12px; border: 1.5px dashed var(--line-2); border-radius: var(--r); text-align: center; }
.sig-shown img { max-height: 140px; }
.sig-error { min-height: 1.4em; margin: 10px 0 0; font-size: .875rem; color: var(--red-dark); }

/* Compare */
.cmp-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.cmp-file { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; min-height: 50px; padding: 4px 6px 4px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.cmp-file > span { flex: none; font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.cmp-file strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .9375rem; }
.cmp-file .btn { min-height: 36px; margin-left: auto; }
.cmp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.cmp-summary { font-weight: 600; }
.cmp-mode { min-width: 300px; background: var(--paper); border: 1px solid var(--line); }
.cmp-page { margin-bottom: 12px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.cmp-page h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 .9375rem/1.3 var(--text); letter-spacing: 0; }
.cmp-chip { padding: 2px 9px; border-radius: 999px; background: var(--mist-2); color: var(--ink-2); font-weight: 600; font-size: .75rem; }
.cmp-chip.is-changed { background: var(--ink); color: #fff; }
.cmp-text { max-width: 86ch; font-size: .9375rem; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmp-text del, .cmp-text ins { padding: 1px 3px; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cmp-text del { background: var(--red-tint); color: var(--red-dark); text-decoration: line-through; }
.cmp-text ins { background: var(--blue-tint); color: var(--blue-dark); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cmp-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp-pics figure { min-width: 0; }
.cmp-pics figcaption { margin-bottom: 5px; font-size: .8125rem; font-weight: 600; color: var(--ink-3); }
.cmp-pics canvas { width: 100%; height: auto; background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
.cmp-none, .cmp-same { font-size: .875rem; color: var(--ink-3); }
.cmp-same { margin-bottom: 12px; padding: 0 4px; }

/* Option fields */
.field { margin-bottom: 16px; }
.field > label, .field > .label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .875rem; }
.field .hint { margin-top: 6px; font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
.input, .field select, .field textarea { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); }
.field textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: var(--ring); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: flex; padding: 3px; border-radius: var(--r); background: var(--mist-2); }
.seg label { flex: 1; min-width: 0; margin: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; place-items: center; min-height: 36px; padding: 4px 8px; border-radius: 8px; font-weight: 500; font-size: .875rem; line-height: 1.2; text-align: center; color: var(--ink-2); cursor: pointer; }
.seg input:checked + span { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(15 28 54 / .16); }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.field > label.check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; font-size: .9375rem; cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.field input[type="range"] { width: 100%; accent-color: var(--blue); }
.field input[type="color"] { width: 48px; height: 42px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); cursor: pointer; }
.range-out { float: right; font-weight: 400; color: var(--ink-3); }
.grid9 { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.grid9 button { height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper); }
.grid9 button:hover { border-color: var(--blue); }
.grid9 button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); }
.grid9 button[disabled] { visibility: hidden; }
.pw { position: relative; }
.pw .input { padding-right: 44px; }
.pw .icon-btn { position: absolute; top: 3px; right: 3px; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; }
.choice input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.choice strong { display: block; font-weight: 600; font-size: .9375rem; }
.choice small { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); }

/* Working */
.busy { display: grid; place-content: center; justify-items: center; gap: 14px; min-height: 380px; padding: 48px 24px; border-radius: var(--r-xl); background: var(--mist); text-align: center; }
.busy h2 { font-size: 1.5rem; font-weight: 800; }
.busy p { min-height: 1.5em; color: var(--ink-2); }
.bar { width: min(420px, 78vw); height: 8px; border-radius: 4px; background: var(--mist-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--blue); transition: width .2s; }
.bar.is-unknown i { width: 34%; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

.stage:not([data-state="busy"]) > .busy, .stage:not([data-state="done"]) > .done { display: none; }

/* Finished */
.done { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 48px 24px 40px; border-radius: var(--r-xl); background: var(--mist); text-align: center; }
.done-mark { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1.75rem; --i-shade-o: 0; }
.done h2 { margin-top: 8px; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.03em; }
.done-note { max-width: 56ch; color: var(--ink-2); }
.done-notes { display: grid; gap: 6px; max-width: 64ch; margin-top: 4px; padding-left: 20px; list-style: disc; text-align: left; color: var(--ink-2); }
.done-files { display: grid; gap: 8px; width: min(100%, 560px); max-height: 264px; margin-top: 14px; overflow-y: auto; text-align: left; }
.done-file { display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.done-file > .i { font-size: 1.5rem; color: var(--blue); --i-shade-o: .3; }
.done-file strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .9375rem; }
.done-file span { flex: none; font-size: .84375rem; color: var(--ink-3); }
.done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.done-next { width: min(100%, 860px); margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.done-next h3 { margin-bottom: 12px; font: 600 .9375rem var(--text); letter-spacing: 0; color: var(--ink-2); }
.done-next ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.done-next button { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper); font-weight: 600; font-size: .9375rem; }
.done-next button .i { color: var(--blue); --i-shade-o: .3; }
.done-next button:hover { border-color: var(--blue); color: var(--blue-dark); }

/* Dialogs */
dialog { width: min(100% - 32px, 440px); padding: 26px; border: 0; border-radius: var(--r-xl); background: var(--paper); color: var(--ink); box-shadow: var(--float); }
dialog::backdrop { background: rgb(15 28 54 / .5); }
dialog h2 { margin-bottom: 8px; font-size: 1.3125rem; font-weight: 800; }
dialog p { margin-bottom: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
dialog.wide { width: min(100% - 24px, 720px); }
textarea.code { height: auto; min-height: 220px; padding: 10px 12px; font: .875rem/1.5 ui-monospace, Consolas, monospace; resize: vertical; }

/* Under the tool */
.steps, .about, .faq-tool, .more { margin-top: 60px; }
.steps h2, .about h2, .faq-tool h2, .more h2 { margin-bottom: 20px; font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 800; letter-spacing: -.03em; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sec-sub { margin: -12px 0 20px; color: var(--ink-3); }
.steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  box-shadow: 0 12px 24px -20px rgb(31 70 160 / .35); text-align: center; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #dbe6ff;
  font: 800 1.1875rem/1 var(--display); color: var(--blue); }
.step-art { width: 196px; margin: 2px 0 14px; overflow: visible; filter: drop-shadow(0 8px 10px rgb(31 70 160 / .14)); }
.steps h3 { font-size: 1.125rem; font-weight: 800; letter-spacing: -.015em; }
.steps p { max-width: 19em; margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
/* What the tool does, in plain words: a pale panel with the heading beside the text */
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 14px 56px; align-items: start; padding: 36px 40px; border-radius: var(--r-xl); background: var(--mist); }
.about h2 { margin-bottom: 0; }
.about p { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.expand { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 6px 2px; border: 0; background: none; color: var(--blue); font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.expand::after { content: ""; width: 20px; height: 20px; border: 1.5px solid; border-radius: 50%; transition: transform .18s;
  background: linear-gradient(currentColor, currentColor) center / 9px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 9px no-repeat; }
.expand[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-tool { padding: 0; }
.faq-tool .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; border: 0; }
.faq-tool details { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.faq-tool summary { justify-content: flex-start; gap: 14px; padding: 11px 18px 11px 11px; font-size: 1rem; }
.faq-tool summary::after { margin-left: auto; }
.faq-tool summary .tile-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 1.25rem; }
.faq-tool details p { padding: 2px 18px 18px 65px; }
.more .tile { align-items: center; }
.more .tile::after { top: 50%; margin-top: -4px; border-color: var(--ink); }

/* Four facts no longer fit on one line: two tidy columns instead of a ragged wrap */
@media (max-width: 1160px) {
  .drop-facts { display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-evenly; }
}
@media (max-width: 1000px) {
  .tool-head { padding-right: 0; }
  .tool-art { display: none; }
}
@media (max-width: 900px) {
  /* One column: files first, options under them */
  .work { grid-template-columns: minmax(0, 1fr); }
  .work-main { min-height: 0; }
  .work-side { position: static; max-height: none; }
  .work-go { display: grid; justify-items: center; border-top: 1px solid var(--line); }
  .work-go .btn { max-width: 560px; }
  .ed-bar { top: 6px; }
  .steps ol, .about, .faq-tool .faq-list { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone or tablet held upright, the action button is pinned to the bottom of the screen so it is always in reach.
   Not when the screen is short (a phone on its side): there it would cover too much of the page being worked on. */
@media (max-width: 900px) and (min-height: 480px) {
  .work-opts { padding-bottom: 14px; }
  .work-go { position: fixed; inset: auto 0 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -10px 22px -14px rgb(12 27 61 / .3); }
  .work-go .btn { min-height: 52px; }
  .work-why { margin-top: 6px; font-size: .8125rem; }
  body:has(.stage[data-state="work"]) .foot { padding-bottom: 120px; }
}
@media (max-width: 560px) {
.tool-head { padding-block: 16px 26px; }
  .tool-title { margin-top: 20px; }
  .tool-title p { margin-top: 6px; font-size: 1rem; }
  .drop { padding: 34px 20px 28px; }
  .drop .btn-xl { min-width: 0; width: 100%; }
  .drop-facts { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  .drop-facts li { white-space: normal; }
  .faq-tool details p { padding-left: 18px; }
  .btn-xl { min-height: 56px; padding: 0 26px; font-size: 1.0625rem; }
  .work-main { padding: 12px 12px 16px; }
  /* Count and "Start over" share the first line; the other buttons take the next one */
  .work-bar p { flex: 1; margin-right: 0; }
  .work-bar .btn { min-height: 38px; padding: 0 12px; font-size: .875rem; }
  .work-bar .btn-quiet { order: 1; }
  .work-bar::after { content: ""; order: 2; flex-basis: 100%; margin-top: -8px; }
  .work-bar > .btn:not(.btn-quiet) { order: 3; }
  .done-actions { flex-direction: column; width: min(100%, 340px); }
  .done-actions .btn { width: 100%; }
  .crumbs li:nth-child(3) { display: none; }   /* home, All tools, this tool: the category would push it onto two lines */
  /* The hint under the editor's tools wraps instead of running off the side */
  .ed-props p { flex: 1 1 0; min-width: 0; font-size: .8125rem; line-height: 1.3; white-space: normal; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
  .pages { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px 20px; }
  .steps, .about, .faq-tool, .more { margin-top: 52px; }
  .about { padding: 26px 22px; }
}

/* Fingers need bigger targets than a mouse pointer */
@media (pointer: coarse) {
  .card-x { width: 36px; height: 36px; }
  .pg-tools button { width: 32px; height: 32px; }
  .pg-cut::after { content: ""; position: absolute; inset: 0 -6px; }
  .grid9 { grid-template-columns: repeat(3, 44px); }
  .grid9 button { height: 36px; }
  .ed-colors button { width: 32px; height: 32px; }
  .ed-colors input { width: 40px; height: 34px; }
  .field input[type="range"] { min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}