/* ==========================================================================
   Free Online Tools — design system
   1. Tokens   2. Base   3. Home   4. Content pages   5. Tool pages (legacy)
   The sidebar / top bar / footer live in js/shell.js (shadow DOM) and read
   the tokens defined here.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */

:root {
  --sf-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --sf-display: 'Sora', 'Inter', system-ui, sans-serif;
  --sf-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --sf-sidebar-w: 280px;
  --sf-rail-w: 68px;      /* the sidebar collapsed to its icons */
  --sf-topbar-h: 60px;

  /* dark is the default theme */
  color-scheme: dark;
  --sf-bg: #0a0b0f;
  --sf-bg-elev: #0e1015;
  --sf-surface: #14161c;
  --sf-surface-2: #1a1d25;
  --sf-surface-3: #232733;
  --sf-field: #0e1015;
  --sf-line: #22252e;
  --sf-line-2: #31353f;
  --sf-text: #edeef2;
  --sf-text-2: #a8acb8;
  --sf-text-3: #747986;
  --sf-accent: #9d8cff;
  --sf-accent-strong: #6f58f6;
  --sf-accent-hover: #8571ff;
  --sf-accent-soft: rgba(143, 123, 255, .14);
  --sf-lime: #c5f46b;
  --sf-lime-text: #c5f46b;
  --sf-btn-neutral: #353a48;
  --sf-btn-neutral-hover: #434959;
  --sf-success: #4ade80;
  --sf-danger: #fca5a5;
  --sf-warn: #fde047;
  --sf-shadow: 0 24px 48px -28px rgba(0, 0, 0, .7);

  /* glass: a see-through fill, a blurred backdrop and an edge lit from above.
     well = a panel set into a glass card, frost = a denser sheet for dialogs */
  --sf-glass: rgba(255, 255, 255, .05);
  --sf-glass-2: rgba(255, 255, 255, .09);
  --sf-glass-line: rgba(255, 255, 255, .1);
  --sf-glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, .07), transparent 42%);
  --sf-glass-blur: blur(20px) saturate(170%);
  --sf-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 44px -30px rgba(0, 0, 0, .8);
  --sf-well: rgba(255, 255, 255, .045);
  --sf-frost: rgba(22, 24, 31, .8);
}

:root[data-theme="light"] {
  color-scheme: light;
  --sf-bg: #f5f5f8;
  --sf-bg-elev: #ffffff;
  --sf-surface: #ffffff;
  --sf-surface-2: #f3f3f7;
  --sf-surface-3: #e8e8ef;
  --sf-field: #ffffff;
  --sf-line: #e3e3eb;
  --sf-line-2: #cdced9;
  --sf-text: #14151a;
  --sf-text-2: #4d505c;
  --sf-text-3: #7b7f8d;
  --sf-accent: #5a43e6;
  --sf-accent-strong: #5a43e6;
  --sf-accent-hover: #4a35cf;
  --sf-accent-soft: rgba(90, 67, 230, .09);
  --sf-lime: #8fcf1d;
  --sf-lime-text: #3f6212;
  --sf-btn-neutral: #6b7280;
  --sf-btn-neutral-hover: #4b5563;
  --sf-success: #15803d;
  --sf-danger: #b91c1c;
  --sf-warn: #a16207;
  --sf-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -24px rgba(16, 24, 40, .18);

  --sf-glass: rgba(255, 255, 255, .55);
  --sf-glass-2: rgba(255, 255, 255, .82);
  --sf-glass-line: rgba(22, 24, 40, .09);
  --sf-glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, .65), transparent 46%);
  --sf-glass-blur: blur(20px) saturate(180%);
  --sf-glass-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .45), 0 18px 40px -26px rgba(40, 30, 110, .32);
  --sf-well: rgba(22, 24, 40, .045);
  --sf-frost: rgba(255, 255, 255, .82);
}

@media (max-width: 1023.98px) {
  :root { --sf-sidebar-w: 0px; --sf-rail-w: 0px; }
}
/* solid surfaces for anyone who asked their system for less transparency */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme="light"] { --sf-glass: var(--sf-surface); --sf-glass-2: var(--sf-surface-2); --sf-glass-sheen: none; --sf-glass-blur: none; --sf-well: var(--sf-surface-2); --sf-frost: var(--sf-surface); }
}

/* Pages written in Bangla (/bn/): a Bengali face after the Latin one, and no tight tracking,
   which breaks up Bengali conjuncts. The face is loaded by those pages only. */
html[lang="bn"] {
  --sf-font: 'Inter', 'Noto Sans Bengali', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sf-display: 'Sora', 'Noto Sans Bengali', 'Inter', system-ui, sans-serif;
}
html[lang="bn"] :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.35; }
/* small mono caps labels: Bengali has no capitals and spaced-out letters fall apart */
html[lang="bn"] .pg :is(.label, .sf-eyebrow, dt, .field label, th, .seg label) { font-family: var(--sf-font); letter-spacing: 0; text-transform: none; }

/* ---- 2. Base ------------------------------------------------------------ */

html { scroll-padding-top: calc(var(--sf-topbar-h) + 24px); -webkit-text-size-adjust: 100%; }

html body.sf-app {
  display: block;
  margin: 0;
  min-height: 100vh;
  padding: var(--sf-topbar-h) 0 0 var(--sf-sidebar-w);
  max-width: none;   /* a few old pages capped the body itself */
  overflow-x: clip;
  color: var(--sf-text);
  font-family: var(--sf-font);
  background: var(--sf-bg);   /* one solid colour — no gradient behind the page */
  -webkit-font-smoothing: antialiased;
  transition: padding-left .3s cubic-bezier(.2, .8, .2, 1);
}
html[data-sf-nav="closed"] body.sf-app { padding-left: var(--sf-rail-w); }
html[data-theme] body.sf-app, html[data-theme] body.sf-app.gradient-bg { background: var(--sf-bg); }

body.sf-app ::selection { background: color-mix(in srgb, var(--sf-accent-strong) 45%, transparent); color: #fff; }

.sf-noscript {
  margin: 16px 24px; padding: 12px 16px; border-radius: 12px;
  background: var(--sf-surface); border: 1px solid var(--sf-line); color: var(--sf-text-2); font: 14px/1.5 var(--sf-font);
}
.sf-noscript a { color: var(--sf-accent); font-weight: 600; }

/* Plain-HTML breadcrumb, related tools and footer links for readers that do
   not run scripts. shell.js renders the real ones and removes this block. */
.sf-static-nav {
  max-width: 960px; margin: 40px auto 0; padding: 20px 24px 32px;
  border-top: 1px solid var(--sf-line); color: var(--sf-text-2); font: 14px/1.7 var(--sf-font);
}
.sf-static-nav p { margin: 0 0 8px; }
.sf-static-nav ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.sf-static-nav a { color: var(--sf-accent); font-weight: 600; }
html[data-sf-shell] .sf-static-nav { display: none; }

/* Google Translate, switched on from the language menu in the top bar: no banner, no page shift, no hover pop-ups */
html[class*="translated-"] body.sf-app { position: static !important; top: 0 !important; }
body > .skiptranslate, body > [class^="VIpgJd-"], #goog-gt-tt, #sf-translate { display: none !important; }
.goog-text-highlight, [class*="VIpgJd-yAWNEb-VIpgJd-fmcmS"] { background: none !important; box-shadow: none !important; }
/* right-to-left languages: text runs and lines up from the right; the layout itself stays as it is */
html.translated-rtl body.sf-app :is(h1, h2, h3, h4, p, li, dt, dd, label, th, td, blockquote, figcaption) { direction: rtl; }
html.translated-rtl body.sf-app :is(.prose, .article-section) :is(ul, ol) { direction: rtl; padding-left: 0; padding-right: 22px; }

@media print {
  html body.sf-app { padding: 0 !important; background: #fff !important; color: #000; }
}

/* my own pages (home / about / contact / legal) */
.sf-page *, .sf-page *::before, .sf-page *::after { box-sizing: border-box; }
.sf-page h1, .sf-page h2, .sf-page h3, .sf-page p, .sf-page ul, .sf-page ol, .sf-page figure { margin: 0; }
.sf-page a { color: inherit; text-decoration: none; }
.sf-page button { font: inherit; color: inherit; cursor: pointer; }
.sf-page svg { display: block; flex: none; }
.sf-page :focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; border-radius: 8px; }
.sf-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sf-wrap { max-width: 1560px; margin: 0 auto; padding: 0 24px; }

.sf-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 11.5px/1 var(--sf-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sf-accent);
}
.sf-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sf-lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sf-lime) 24%, transparent); }

.sf-tile {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  color: var(--c, var(--sf-accent));
  background: color-mix(in srgb, var(--c, var(--sf-accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--sf-accent)) 34%, transparent);
}
:root[data-theme="light"] .sf-tile { color: color-mix(in srgb, var(--c, var(--sf-accent)) 70%, #000); }

.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 20px;
  border: 0; border-radius: 12px; background: var(--sf-accent-strong); color: #fff !important;
  font: 600 14.5px/1 var(--sf-font); transition: transform .15s, filter .15s;
}
.sf-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.sf-btn.ghost { color: var(--sf-text) !important; }
.sf-btn.ghost:hover { border-color: var(--sf-text-3); filter: none; }

/* glass surface, shared by every card, panel and pill below */
.hero-search, .hero-panel, .stats, .tool-card, .why-item, .band, .sf-btn.ghost, .stat, .cat-link, .panel {
  background-color: var(--sf-glass); background-image: var(--sf-glass-sheen);
  border: 1px solid var(--sf-glass-line); box-shadow: var(--sf-glass-shadow);
  -webkit-backdrop-filter: var(--sf-glass-blur); backdrop-filter: var(--sf-glass-blur);
}

/* ---- 3. Home ------------------------------------------------------------ */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 72px; align-items: center;
  padding: 72px 0 48px;
}
.hero h1 {
  margin-top: 22px; font: 700 clamp(34px, 3.9vw, 52px)/1.1 var(--sf-display); letter-spacing: -.02em; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--sf-accent); }
/* the end of the headline swaps between a few phrases (js/home.js): the old one lifts out, the next rises in */
.hero-swap { display: inline-block; white-space: nowrap; transition: opacity .42s, transform .42s cubic-bezier(.2, .8, .2, 1); }
.hero-swap.is-leaving { opacity: 0; transform: translateY(-.3em); transition-duration: .24s; transition-timing-function: ease-in; }
.hero-swap.is-entering { opacity: 0; transform: translateY(.3em); transition: none; }
.hero .lede { margin-top: 20px; max-width: 50ch; font-size: 17px; line-height: 1.65; color: var(--sf-text-2); }

.hero-search {
  display: flex; align-items: center; gap: 12px; height: 56px; max-width: 560px; margin-top: 28px; padding: 0 12px 0 18px;
  border-radius: 16px; color: var(--sf-text-3);
  transition: border-color .15s, box-shadow .15s;
}
/* focusing the box changes nothing but the icon colour: no border, no ring */
.hero-search:focus-within { color: var(--sf-text-2); }
.hero-search input:focus, .hero-search input:focus-visible { outline: none; box-shadow: none; }
.hero-search input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--sf-text);
  font: 500 16px/1 var(--sf-font); -webkit-appearance: none; appearance: none;
}
.hero-search input::placeholder { color: var(--sf-text-3); }
.hero-search input::-webkit-search-cancel-button { display: none; }
.hero-search kbd, .hero-search .clear {
  flex: none; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--sf-glass-line); background: var(--sf-glass-2); color: var(--sf-text-2); font: 600 11px/1 var(--sf-mono);
}
.hero-search .clear { display: none; padding: 0; }
.hero-search.has-value .clear { display: grid; }
.hero-search.has-value kbd { display: none; }

.hero-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.hero-quick span { margin-right: 6px; font: 600 10.5px/1 var(--sf-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sf-text-3); }
.hero-quick a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--sf-glass-line);
  font-size: 13px; font-weight: 500; color: var(--sf-text-2); transition: color .15s, border-color .15s, background .15s;
}
.hero-quick a:hover { color: var(--sf-text); border-color: var(--sf-line-2); background: var(--sf-glass-2); }

/* "most used" panel */
.hero-panel {
  position: relative; padding: 8px; border-radius: 20px; box-shadow: var(--sf-glass-shadow), var(--sf-shadow);
}
.hero-panel::before {
  content: ""; position: absolute; top: -1px; left: 28px; right: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sf-accent), transparent);
}
.hp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px; }
.hp-head a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--sf-text-3); transition: color .15s; }
.hp-head a:hover { color: var(--sf-text); }
.hp-row { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border-radius: 13px; transition: background .15s; }
.hp-row:hover { background: var(--sf-glass-2); }
.hp-row .sf-tile { width: 40px; height: 40px; }
.hp-row .txt { flex: 1; min-width: 0; }
.hp-row b { display: block; font-weight: 600; font-size: 14.5px; letter-spacing: -.005em; }
.hp-row small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sf-text-3); }
.hp-row > svg { color: var(--sf-text-3); transition: transform .15s, color .15s; }
.hp-row:hover > svg { color: var(--sf-text); transform: translateX(3px); }

/* numbers strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 16px; }
.stats > div { padding: 22px 26px; }
.stats > div + div { border-left: 1px solid var(--sf-glass-line); }
.stats b { display: block; font: 700 28px/1 var(--sf-display); letter-spacing: -.02em; }
.stats span { display: block; margin-top: 10px; font: 600 10.5px/1.3 var(--sf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-text-3); }

/* search results: while the search box has text (js/home.js) the strip and the chips step aside,
   so the matches start straight under the search box */
.is-searching :is(.stats, .filters) { display: none; }
.results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.results-head[hidden] { display: none; }
.results-head h2 { margin-top: 12px; font: 700 24px/1.25 var(--sf-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.results-head .sf-btn { flex: none; }

.label { font: 600 11px/1 var(--sf-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sf-text-3); }

/* filter chips */
.filters {
  position: sticky; z-index: 5; top: var(--sf-topbar-h); display: flex; gap: 8px; margin: 28px -28px 0; padding: 14px 28px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: color-mix(in srgb, var(--sf-bg) 68%, transparent);
  -webkit-backdrop-filter: var(--sf-glass-blur); backdrop-filter: var(--sf-glass-blur);
}
.filters::-webkit-scrollbar { display: none; }
/* The chip row is far wider than the window and a mouse wheel cannot push it sideways,
   so js/home.js adds these two arrows. They are sticky children of the scroller itself,
   which keeps them pinned to the ends while the chips slide underneath. */
.f-nav {
  flex: none; position: sticky; z-index: 2; display: none; align-items: center; justify-content: center;
  width: 34px; height: 36px; border-radius: 999px; border: 1px solid var(--sf-glass-line);
  background: var(--sf-bg); color: var(--sf-text-2); transition: opacity .15s, color .15s, border-color .15s;
}
.filters[data-overflow] .f-nav { display: inline-flex; }
.f-nav.prev { left: 0; margin-right: -42px; }
.f-nav.next { right: 0; margin-left: -42px; }
.f-nav:hover { border-color: var(--sf-line-2); color: var(--sf-text); }
.f-nav[disabled] { opacity: 0; pointer-events: none; }
/* the gutter beside an arrow is painted over, so a chip does not show through it */
.f-nav::after { content: ''; position: absolute; top: -14px; bottom: -14px; width: 52px; z-index: -1; background: var(--sf-bg); }
.f-nav.prev::after { right: 50%; }
.f-nav.next::after { left: 50%; }
/* a finger drags the row already; the arrows are for a mouse */
@media (hover: none), (pointer: coarse) { .filters[data-overflow] .f-nav { display: none; } }
.filter {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--sf-glass-line); background: var(--sf-glass); color: var(--sf-text-2); font-weight: 500; font-size: 13px; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.filter:hover { border-color: var(--sf-line-2); color: var(--sf-text); }
.filter i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.filter span { font: 600 10.5px/1 var(--sf-mono); color: var(--sf-text-3); }
.filter[aria-pressed="true"] { background: var(--sf-text); border-color: transparent; color: var(--sf-bg); }
.filter[aria-pressed="true"] span { color: inherit; opacity: .6; }

/* category sections */
.cat { padding-top: 34px; scroll-margin-top: calc(var(--sf-topbar-h) + 76px); }
/* adverts between the categories (js/ads.js, owner panel → Ads); gone while a search or a filter narrows the list */
.sf-ad { padding-top: 34px; }
.sf-ad-label { margin-bottom: 10px; font: 600 10px/1 var(--sf-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sf-text-3); }
.sf-ad-banner { display: block; overflow: hidden; border-radius: 16px; background: var(--sf-surface); box-shadow: 0 0 0 1px var(--sf-glass-line); }
.sf-ad-banner img, img.sf-ad-banner { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; }
a.sf-ad-banner { transition: box-shadow .15s, transform .15s; }
a.sf-ad-banner:hover { box-shadow: 0 0 0 1px var(--sf-line-2), var(--sf-glass-shadow); transform: translateY(-1px); }
.sf-ad--adsense ins.adsbygoogle { min-height: 100px; }
.sf-ad-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; }
.sf-ad-card { display: block; overflow: hidden; border-radius: 16px; background: var(--sf-surface); box-shadow: 0 0 0 1px var(--sf-glass-line); }
.sf-ad-card img, img.sf-ad-card { display: block; width: 100%; height: auto; }
a.sf-ad-card { transition: box-shadow .15s, transform .15s; }
a.sf-ad-card:hover { box-shadow: 0 0 0 1px var(--sf-line-2), var(--sf-glass-shadow); transform: translateY(-2px); }
/* on a phone the cards slide sideways instead of stacking into a tall column */
@media (max-width: 760px) {
  .sf-ad-cards:not([style*="--n: 1"]) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sf-ad-cards::-webkit-scrollbar { display: none; }
  .sf-ad-card { scroll-snap-align: start; }
}
.sf-ad:has(ins[data-ad-status="unfilled"]), :is(.is-searching, .is-filtered) .sf-ad { display: none; }
.cat[hidden] { display: none; }
.cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cat-head h2 { display: flex; align-items: center; gap: 10px; font: 600 12px/1.2 var(--sf-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sf-text); white-space: nowrap; }
.cat-head h2::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.cat-head p { font-size: 13.5px; color: var(--sf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-head .rule { flex: 1; min-width: 20px; height: 1px; background: var(--sf-line); }
.cat-head .n { font: 600 10.5px/1 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-3); white-space: nowrap; }

/* old tool pages also use Tailwind's .grid: where they set their own columns, theirs win */
:where(body:not(.sf-tool)) .grid, :where(body.sf-tool) .grid:not([class*="grid-cols-"]) { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }

.tool-card {
  position: relative; display: flex; gap: 14px; min-height: 108px; padding: 18px; border-radius: 14px;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.tool-card[hidden] { display: none; }
.tool-card:hover, .tool-card:focus-within {
  border-color: color-mix(in srgb, var(--c) 52%, var(--sf-glass-line)); background-color: color-mix(in srgb, var(--c) 9%, var(--sf-glass-2)); transform: translateY(-2px);
  box-shadow: var(--sf-glass-shadow), 0 18px 36px -24px color-mix(in srgb, var(--c) 70%, transparent);
}
.tc-body { flex: 1; min-width: 0; padding-right: 36px; }
.tc-title { font: 600 15px/1.3 var(--sf-font); letter-spacing: -.01em; color: var(--sf-text); }
.tc-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tc-title a:focus-visible { outline: none; }
.tc-title a:focus-visible::after { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.tc-desc { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--sf-text-2); }
.tc-go {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--sf-glass-line); color: var(--sf-text-3); pointer-events: none; transition: background .18s, color .18s, border-color .18s;
}
.tool-card:hover .tc-go { background: var(--sf-text); border-color: transparent; color: var(--sf-bg); }
.tc-fav {
  position: absolute; z-index: 1; right: 16px; bottom: 12px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--sf-text-3); opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.tool-card:hover .tc-fav, .tc-fav:focus-visible, .tc-fav[aria-pressed="true"] { opacity: 1; }
.tc-fav:hover { background: var(--sf-glass-2); color: var(--sf-text); }
.tc-fav[aria-pressed="true"] { color: #f5c542; }
.tc-fav[aria-pressed="true"] svg { fill: currentColor; }
@media (hover: none) { .tc-fav { opacity: .75; } }
.badge {
  display: inline-block; margin-left: 8px; padding: 3px 6px; border-radius: 5px; vertical-align: 2px;
  font: 600 9.5px/1 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sf-lime-text); background: color-mix(in srgb, var(--sf-lime) 18%, transparent);
}

.empty { padding: 72px 20px; text-align: center; color: var(--sf-text-2); }
.empty[hidden] { display: none; }
.empty h2 { font: 700 22px/1.3 var(--sf-display); letter-spacing: -.02em; color: var(--sf-text); }
.empty p { margin: 8px 0 20px; }

/* why + closing band */
.why { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--sf-line); }
.why h2, .band h2, .pg-hero h1, .pg h2 { font-family: var(--sf-display); letter-spacing: -.025em; }
.why h2 { margin-top: 14px; max-width: 22ch; font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.15; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 32px; }
.why-item { padding: 22px; border-radius: 14px; }
.why-item h3 { margin-top: 16px; font: 600 16px/1.3 var(--sf-font); }
.why-item p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--sf-text-2); }

.band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 56px; padding: 32px 36px;
  border-radius: 18px; background-image: linear-gradient(120deg, color-mix(in srgb, var(--sf-accent-strong) 30%, transparent), transparent 62%);
}
.band h2 { font-size: 24px; font-weight: 700; line-height: 1.2; }
.band p { margin-top: 6px; color: var(--sf-text-2); }

/* Softyfy Pro teaser: the paid SEO / AEO / GEO app, between the numbers strip and the tool list */
.pro { margin-top: 56px; }
.is-searching .pro { display: none; }
.pro-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.pro-copy { flex: 1 1 520px; min-width: 0; }
.pro-copy h2 { margin-top: 14px; max-width: 24ch; font: 700 clamp(26px, 3vw, 36px)/1.15 var(--sf-display); letter-spacing: -.025em; }
.pro-copy h2 em { font-style: normal; color: var(--sf-accent); }
.pro-copy p:last-child { margin-top: 12px; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--sf-text-2); }
.pro-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pro-cta small { flex-basis: 100%; font-size: 12.5px; color: var(--sf-text-3); }
.pro-cta small a { margin-left: 6px; color: var(--sf-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pro-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.pro-col {
  position: relative; padding: 8px; border-radius: 18px;
  background-color: var(--sf-glass); background-image: var(--sf-glass-sheen);
  border: 1px solid var(--sf-glass-line); box-shadow: var(--sf-glass-shadow);
  -webkit-backdrop-filter: var(--sf-glass-blur); backdrop-filter: var(--sf-glass-blur);
}
/* a thin edge in the column's colour, like the "Most used" panel */
.pro-col::before {
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
}
.pro-col-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 12px 8px; font-size: 13px; color: var(--sf-text-2); }
.pro-col-head .label { color: var(--c); }
:root[data-theme="light"] .pro-col-head .label { color: color-mix(in srgb, var(--c) 70%, #000); }
.pro-col .badge { margin-left: 6px; }
@media (max-width: 1023.98px) {
  .pro-grid { grid-template-columns: 1fr; }
}

/* home page announcement line (text set in the Softyfy Pro owner panel) */
.sf-announce { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 10px 10px 16px; border: 1px solid color-mix(in srgb, var(--sf-accent) 35%, transparent); border-radius: 14px; background: var(--sf-accent-soft); font-size: 14px; color: var(--sf-text); }
.sf-announce[hidden] { display: none; }
.sf-announce .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sf-lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sf-lime) 24%, transparent); }
.sf-announce .txt { flex: 1; min-width: 0; line-height: 1.45; color: inherit; }
.sf-announce .txt b { font-weight: 600; color: var(--sf-accent); white-space: nowrap; }
.sf-announce a.txt:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sf-announce .x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--sf-text-3); font-size: 13px; cursor: pointer; }
.sf-announce .x:hover { background: var(--sf-surface-3); color: var(--sf-text); }

/* Softyfy Pro plans, under the tool columns (prices refreshed from app.softyfy.com/home.json) */
.pro-plans { margin-top: 40px; }
.pro-plans-head h3 { font: 700 22px/1.25 var(--sf-display); letter-spacing: -.02em; }
.pro-plans .pro-plans-head p { margin-top: 6px; font-size: 14.5px; color: var(--sf-text-2); }
.pro-plans-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.pro-plan {
  display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: 18px;
  background-color: var(--sf-glass); background-image: var(--sf-glass-sheen);
  border: 1px solid var(--sf-glass-line); box-shadow: var(--sf-glass-shadow);
  -webkit-backdrop-filter: var(--sf-glass-blur); backdrop-filter: var(--sf-glass-blur);
}
.pro-plan.is-pick { border-color: var(--sf-accent); box-shadow: 0 0 0 1px var(--sf-accent), var(--sf-glass-shadow); }
.pro-plan-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 17px/1.3 var(--sf-font); color: var(--sf-text); }
.pro-plan-tag { padding: 3px 8px; border-radius: 999px; font: 600 11px/1.2 var(--sf-font); color: var(--sf-accent); background: var(--sf-accent-soft); }
.pro-plan .pro-plan-blurb { margin-top: 6px; min-height: 2.9em; font-size: 13.5px; line-height: 1.45; color: var(--sf-text-2); }
.pro-plan .pro-plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.pro-plan-price b { font: 700 32px/1 var(--sf-display); letter-spacing: -.02em; color: var(--sf-text); }
.pro-plan-price span { font-size: 13px; color: var(--sf-text-3); }
.pro-plan-price span[hidden] { display: none; }
.pro-plans .pro-plan ul { display: grid; gap: 9px; margin: 20px 0 22px; padding: 0; list-style: none; font-size: 13.5px; color: var(--sf-text); }
.pro-plan li { display: flex; align-items: flex-start; gap: 9px; }
.pro-plan li svg { flex: none; margin-top: 2px; color: var(--sf-lime-text); }
.pro-plan li.no svg { color: var(--sf-text-3); }
.pro-plan .sf-btn { width: 100%; height: 42px; margin-top: auto; font-size: 14px; }
.pro-plans .pro-plans-foot { margin-top: 14px; font-size: 13px; color: var(--sf-text-3); }
/* pricing page: plan comparison and credit cost tables */
.calc-table.cmp-table { margin-top: 18px; padding: 4px 10px; border-radius: 16px; background: var(--sf-glass); box-shadow: 0 0 0 1px var(--sf-glass-line); }
.cmp-table td { color: var(--sf-text); }
.cmp-table td:first-child { color: var(--sf-text-2); }
.cmp-table thead th:not(:first-child) { color: var(--sf-text); }
.cmp-yes { font-weight: 700; color: var(--sf-lime-text); }
.cmp-no { color: var(--sf-text-3); }
.pro-plans-foot a { margin-left: 6px; color: var(--sf-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (max-width: 1140px) {
  .pro-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pro-plans-grid { grid-template-columns: 1fr; }
  .pro-plan .pro-plan-blurb { min-height: 0; }
}

/* ---- 4. Content pages (about / contact / legal) -------------------------- */

.pg { max-width: 1560px; margin: 0 auto; padding: 0 24px; }  /* the home page's column (.sf-wrap) */
.pg.narrow { max-width: 1360px; }
.pg .prose { max-width: 880px; }  /* long reading stays a comfortable line length in the wide column */
.pg-hero { padding: 60px 0 36px; }
.pg-hero h1 { margin-top: 20px; font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.08; text-wrap: balance; }
.pg-hero h1 em { font-style: normal; color: var(--sf-accent); }
.pg-hero .lede { margin-top: 16px; max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--sf-text-2); }
.pg h2 { font-size: 24px; font-weight: 700; line-height: 1.2; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat { padding: 20px 22px; border-radius: 14px; }
.stat b { display: block; font: 700 32px/1 var(--sf-display); letter-spacing: -.03em; }
.stat span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--sf-text-2); }

.pg-section { margin-top: 56px; }
.pg-section > .label + h2 { margin-top: 12px; }
.pg-section > p { margin-top: 12px; max-width: 68ch; line-height: 1.7; color: var(--sf-text-2); }
.cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 24px; }
.cat-link {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px;
  transition: border-color .18s, transform .18s, background .18s;
}
.cat-link:hover { border-color: color-mix(in srgb, var(--c) 52%, var(--sf-glass-line)); background-color: color-mix(in srgb, var(--c) 9%, var(--sf-glass-2)); transform: translateY(-2px); }
.cat-link b { display: block; font-weight: 600; font-size: 15px; }
.cat-link small { display: block; margin-top: 2px; font-size: 13px; color: var(--sf-text-3); }
.cat-link .n { margin-left: auto; font: 600 11px/1 var(--sf-mono); color: var(--sf-text-3); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.panel { padding: 28px; border-radius: 18px; }
.panel h2 { font-size: 20px; }
.contact-list { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list b { display: block; font: 600 10.5px/1 var(--sf-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sf-text-3); }
.contact-list span, .contact-list a { display: block; margin-top: 6px; line-height: 1.5; color: var(--sf-text); }
.contact-list a:hover { color: var(--sf-accent); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.form .full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 8px; font: 600 10.5px/1 var(--sf-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sf-text-3); }
.field input, .field textarea, .field select {
  display: block; width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--sf-line-2);
  background: var(--sf-field); color: var(--sf-text); font: 400 15px/1.4 var(--sf-font); transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--sf-accent); box-shadow: 0 0 0 4px var(--sf-accent-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--sf-text-3); }
.field :is(input, textarea, select):focus-visible { outline: none; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-note { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.5; color: var(--sf-text-3); }
.form-status { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: var(--sf-accent-soft); color: var(--sf-text); }
.form-status[hidden] { display: none; }

/* native tool pages */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.toolbar.foot { margin-top: 16px; }
.toolbar .grow { flex: 1; }
.sf-btn.sm { height: 38px; padding: 0 15px; border-radius: 10px; font-size: 13.5px; }
.sf-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.field.inline { display: flex; align-items: center; gap: 8px; margin-left: 6px; }
.field.inline label { margin: 0; }
.field.inline select { width: auto; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--sf-text-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--sf-accent-strong); }
.io-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.field textarea.code { min-height: 380px; font: 500 13px/1.6 var(--sf-mono); tab-size: 2; white-space: pre; overflow: auto; resize: vertical; }
.tool-status { font-size: 13.5px; line-height: 1.5; color: var(--sf-text-3); overflow-wrap: anywhere; }
.tool-status.ok { color: var(--sf-success); }
.tool-status.err { color: var(--sf-danger); }

/* formula calculators (js/calc.js): the numbers on the left, the answer on the right */
.calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.calc .form { margin-top: 18px; }
/* labels here are whole phrases, so plain text instead of the mono caps; inputs in a row line up at the bottom */
.calc .field { display: flex; flex-direction: column; justify-content: flex-end; }
.calc .field label { font: 500 13.5px/1.4 var(--sf-font); letter-spacing: 0; text-transform: none; color: var(--sf-text-2); }
.calc .tool-status { flex: 1; min-width: 180px; }
.calc-out { position: sticky; top: calc(var(--sf-topbar-h) + 20px); }
.calc-main { margin-top: 16px; }
.calc-main span { display: block; font-size: 14px; color: var(--sf-text-2); }
.calc-main b { display: block; margin-top: 6px; font: 700 clamp(30px, 3.4vw, 40px)/1.1 var(--sf-display); letter-spacing: -.02em; color: var(--sf-accent); overflow-wrap: anywhere; }
.calc-rows { margin: 20px 0 0; border-top: 1px solid var(--sf-glass-line); }
.calc-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sf-glass-line); font-size: 14.5px; }
.calc-rows > div:last-child { padding-bottom: 0; border-bottom: 0; }
.calc-rows dt { color: var(--sf-text-2); }
.calc-rows dd { margin: 0; font-weight: 600; color: var(--sf-text); text-align: right; white-space: nowrap; }
.calc-table { grid-column: 1 / -1; overflow-x: auto; }
.calc-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.calc-table :is(th, td) { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--sf-glass-line); white-space: nowrap; }
.calc-table th { font: 600 10.5px/1 var(--sf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-text-3); }
.calc-table :is(th, td):first-child { text-align: left; }
.calc-table tr:last-child td { border-bottom: 0; }
/* a list whose first column is prose: let it wrap so the code beside it is never cut off */
.calc-table.wrap td:first-child { white-space: normal; }
@media (max-width: 1140px) {
  .calc { grid-template-columns: 1fr; }
  .calc-out { position: static; }
}

/* document builders (js/docgen.js and the generator pages): the form on the left, the printable sheet on the right */
.pg.wide { max-width: 1560px; }
.doc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.doc-form h3 { margin: 26px 0 0; font: 600 15px/1.3 var(--sf-font); color: var(--sf-text); }
.doc-form h3:first-child { margin-top: 0; }
.doc-form .form { margin-top: 12px; gap: 12px; }
.doc .field label, .tool-form .field label { margin: 0; font: 500 13px/1.4 var(--sf-font); letter-spacing: 0; text-transform: none; color: var(--sf-text-2); }
.doc .field label > :is(input, select, textarea), .tool-form .field label > :is(input, select, textarea) { margin-top: 6px; }
.doc .field :is(input, select, textarea) { padding: 10px 12px; border-radius: 10px; font-size: 14.5px; }
.doc .field textarea, .tool-form .field textarea { min-height: 0; }
.doc-logo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.doc-rows { display: grid; gap: 10px; margin: 12px 0; }
.doc-row { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; padding: 10px 42px 10px 10px; border-radius: 12px; background: var(--sf-well); }
.doc-row input { min-width: 0; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--sf-line-2); background: var(--sf-field); color: var(--sf-text); font: 400 14px/1.3 var(--sf-font); }
.doc-row input:focus { outline: 0; border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.doc-row input.wide { grid-column: 1 / -1; }
.doc-row.pair { grid-template-columns: minmax(0, 1fr) 118px; }
.doc-row output { align-self: center; justify-self: end; font-weight: 600; font-size: 14px; color: var(--sf-text); white-space: nowrap; }
.doc-row .doc-x { position: absolute; top: 9px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--sf-text-3); }
.doc-row .doc-x:hover { background: var(--sf-glass-2); color: var(--sf-danger); }
.doc-preview { min-width: 0; }
.doc-preview .doc-actions { margin-bottom: 12px; }
.doc-preview .doc-note { margin-top: 12px; }
.doc-scroll { overflow-x: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--sf-line), var(--sf-shadow); }
.doc-scroll:has(.ship-label) { width: fit-content; max-width: 100%; }
/* the sheet is paper: white with dark ink in both themes */
.doc-sheet { min-width: 560px; min-height: 420px; padding: 44px 44px 48px; background: #fff; color: #16171c; font: 400 13.5px/1.5 var(--sf-font); overflow-wrap: anywhere; }
.doc-sheet p { color: #4b4e59; }
.ds-head { display: flex; justify-content: space-between; gap: 24px; }
.ds-from img { display: block; max-width: 160px; max-height: 64px; margin-bottom: 12px; }
.ds-from b, .ds-parties b { display: block; font-size: 15px; font-weight: 600; }
.ds-title { text-align: right; }
.doc-sheet .ds-title h2 { font: 700 26px/1.1 var(--sf-display); letter-spacing: .01em; text-transform: uppercase; color: #16171c; }
.ds-title dl { margin: 12px 0 0; }
.ds-title dl div { display: flex; justify-content: flex-end; gap: 12px; padding: 1px 0; }
.ds-title dt { color: #6b6f7b; }
.ds-title dd { min-width: 96px; margin: 0; font-weight: 600; }
.ds-title dd:empty { border-bottom: 1px solid #c9cbd3; }
.ds-parties { display: flex; gap: 32px; margin-top: 28px; }
.ds-parties > div { flex: 1; min-width: 0; }
.ds-from span, .ds-parties span, .ds-notes span { display: block; margin-bottom: 4px; font: 600 10px/1 var(--sf-mono); letter-spacing: .14em; text-transform: uppercase; color: #8a8e9a; }
.ds-line { display: block; height: 24px; border-bottom: 1px solid #c9cbd3; }
.ds-items { width: 100%; margin-top: 28px; border-collapse: collapse; }
.ds-items th { padding: 8px 10px; border-bottom: 2px solid #16171c; font: 600 10.5px/1.2 var(--sf-mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.ds-items td { padding: 10px; border-bottom: 1px solid #e4e5ea; vertical-align: top; }
.ds-items .r { text-align: right; white-space: nowrap; }
.ds-items tr.blank td { height: 34px; }
.ds-items tr.sub td { font-weight: 600; border-bottom-color: #16171c; }
.ds-items tr.key td { font-weight: 700; font-size: 14.5px; border-top: 2px solid #16171c; border-bottom: 2px solid #16171c; }
.ds-items tr.group td { padding-top: 18px; border-bottom: 0; font: 600 10.5px/1.2 var(--sf-mono); letter-spacing: .1em; text-transform: uppercase; color: #6b6f7b; }
.ds-totals { width: min(290px, 100%); margin: 18px 0 0 auto; }
.ds-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 10px; }
.ds-totals b { font-weight: 600; white-space: nowrap; }
.ds-totals .grand { margin-top: 6px; padding: 10px; border-top: 2px solid #16171c; font-size: 15.5px; }
.ds-totals .grand b { font-weight: 700; }
.ds-notes { margin-top: 32px; }
.ds-sign { display: flex; gap: 40px; margin-top: 56px; }
.ds-sign > div { flex: 1; }
.ds-sign i { display: block; height: 28px; border-bottom: 1px solid #16171c; }
.ds-sign span { display: block; margin-top: 6px; font-size: 12px; color: #6b6f7b; }
/* a shipping label is a sheet with a fixed physical size, printed on a page of exactly that size */
@page label { size: 4in 6in; margin: 0; }
.doc-sheet.ship-label { page: label; width: 4in; min-width: 4in; min-height: 6in; padding: .22in; display: flex; flex-direction: column; font-size: 13px; }
.ship-label .lb-from { padding-bottom: .12in; border-bottom: 2px solid #16171c; font-size: 11.5px; }
.ship-label .lb-to { flex: 1; padding: .2in 0; }
.ship-label .lb-to b { display: block; font-size: 21px; line-height: 1.2; }
.ship-label .lb-to div { margin-top: 6px; font-size: 16px; line-height: 1.35; }
.ship-label .lb-meta { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid #16171c; border-bottom: 2px solid #16171c; }
.ship-label .lb-meta > div { padding: .08in .06in; }
.ship-label .lb-meta > div + div { border-left: 2px solid #16171c; }
.ship-label .lb-meta b { display: block; font-size: 15px; }
.ship-label .lb-code { padding-top: .12in; text-align: center; }
.ship-label .lb-code svg { max-width: 100%; height: auto; }
.ship-label span { display: block; font: 600 9px/1.2 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: #6b6f7b; }
.ship-label .lb-flag { margin-top: .1in; padding: .06in; border: 2px solid #16171c; font: 700 15px/1 var(--sf-display); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
/* barcodes and other generated artwork sit on white so they scan and print as they look */
.code-stage { display: grid; place-items: center; min-height: 200px; padding: 24px; border-radius: 12px; background: #fff; overflow: auto; }
.code-stage svg { max-width: 100%; height: auto; }
.calc-out .code-stage { margin-top: 14px; }
.tool-form h3 { margin: 24px 0 0; font: 600 15px/1.3 var(--sf-font); color: var(--sf-text); }
.calc-out > .tool-status, .calc-out > .results { margin-top: 12px; }
/* results that can run longer than the screen scroll with the page instead of sticking */
.calc-out.flow { position: static; }
.result-card { padding: 18px 20px; border-radius: 14px; background: var(--sf-well); }
.result-card + .result-card { margin-top: 12px; }
.result-card .toolbar { margin-bottom: 10px; }
.result-card pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/1.65 var(--sf-font); color: var(--sf-text); }

/* file tools (js/filekit.js): a drop zone, the chosen file, a preview stage and a progress bar */
.drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 200px; padding: 28px 20px; border: 1.5px dashed var(--sf-line-2); border-radius: 16px;
  background: var(--sf-well); color: var(--sf-text-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.is-over { border-color: var(--sf-accent); background: var(--sf-accent-soft); }
.drop:focus-within { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
.drop[hidden] { display: none; }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop .sf-tile { width: 52px; height: 52px; border-radius: 14px; }
.drop-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.drop b { font-size: 16px; font-weight: 600; color: var(--sf-text); }
.drop b u { color: var(--sf-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.drop small { font-size: 13px; color: var(--sf-text-3); }
.drop.compact { min-height: 0; flex-direction: row; gap: 12px; padding: 14px 16px; text-align: left; }
.drop.compact .sf-tile { width: 40px; height: 40px; border-radius: 11px; }
.drop.compact b { font-size: 14.5px; }
.file-chip { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--sf-well); }
.file-chip[hidden] { display: none; }
.file-chip .txt { flex: 1; min-width: 0; }
.file-chip b { display: block; font-weight: 600; font-size: 14px; color: var(--sf-text); overflow-wrap: anywhere; }
.file-chip small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sf-text-3); }
.file-chip button { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--sf-text-3); }
.file-chip button:hover { background: var(--sf-glass-2); color: var(--sf-danger); }
.stage { position: relative; display: grid; place-items: center; min-height: 240px; padding: 16px; border-radius: 14px; background: var(--sf-well); overflow: hidden; }
.stage[hidden] { display: none; }
.stage > img, .stage > canvas { display: block; max-width: 100%; max-height: 560px; height: auto; }
/* a chequered backdrop shows which parts of an image are transparent */
.stage.checker { background-color: #fff; background-image: conic-gradient(#e7e8ee 25%, transparent 0 50%, #e7e8ee 0 75%, transparent 0); background-size: 18px 18px; }
.progress { height: 6px; margin-top: 14px; border-radius: 6px; background: var(--sf-surface-3); overflow: hidden; }
.progress[hidden] { display: none; }
.progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--sf-accent-strong); transition: width .2s; }
/* a chosen file replaces the drop zone in the same spot */
.tool-form .drop[hidden] + .file-chip { margin-top: 0; }
.field label.check { display: inline-flex; margin: 0; }
.tool-form .drop + .form, .tool-form .file-chip + .form { margin-top: 18px; }
/* two or three choices that read better side by side than in a menu */
.seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 12px; background: var(--sf-well); border: 1px solid var(--sf-line); }
.seg label { position: relative; padding: 8px 14px; border-radius: 9px; font: 500 13.5px/1.2 var(--sf-font); color: var(--sf-text-2); cursor: pointer; transition: background .15s, color .15s; }
.seg label:hover { color: var(--sf-text); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--sf-surface-3); color: var(--sf-text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--sf-accent); outline-offset: 1px; }
:root[data-theme="light"] .seg label:has(input:checked) { background: #fff; }
.tool-form .field textarea.big { min-height: 220px; }
.tool-form .field textarea.mono, .tool-form .field input.mono { font: 500 13.5px/1.6 var(--sf-mono); }
.out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 38px; }
.calc-out .out-head + * { margin-top: 12px; }
.out-meta { font-size: 12.5px; color: var(--sf-text-3); }
.out-gap { margin-top: 16px; }
.stack > * + * { margin-top: 20px; }
.words-out { font: 600 clamp(19px, 2vw, 23px)/1.45 var(--sf-display); letter-spacing: -.01em; color: var(--sf-accent); overflow-wrap: anywhere; }
.words-out:lang(bn) { font-family: var(--sf-font); letter-spacing: 0; }
/* text compare: additions in green, removals struck through in red */
.diff-view {
  margin-top: 14px; min-height: 120px; max-height: 560px; padding: 16px 18px; overflow: auto; border-radius: 12px;
  background: var(--sf-field); border: 1px solid var(--sf-line); color: var(--sf-text);
  font: 400 14.5px/1.75 var(--sf-font); white-space: pre-wrap; overflow-wrap: anywhere;
}
.diff-view ins { text-decoration: none; color: inherit; border-radius: 3px; background: color-mix(in srgb, #22c55e 26%, transparent); }
.diff-view del { color: inherit; border-radius: 3px; background: color-mix(in srgb, #ef4444 24%, transparent); text-decoration-color: color-mix(in srgb, #ef4444 80%, transparent); }
.diff-view del + ins { margin-left: 2px; }
.diff-empty { color: var(--sf-text-3); white-space: normal; }
.panel > .io-grid:first-child { margin-top: 0; }
.diff-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 13px; }
.diff-stats div { display: flex; align-items: center; gap: 6px; }
.diff-stats dt { color: var(--sf-text-3); }
.diff-stats dt.add::before, .diff-stats dt.del::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 3px; background: #22c55e; }
.diff-stats dt.del::before { background: #ef4444; }
.diff-stats dd { margin: 0; font-weight: 600; color: var(--sf-text); }
/* layout rules such as .calc .field { display: flex } must not undo the hidden attribute */
.tool-form [hidden] { display: none !important; }
.tool-form :is(.drop, .file-chip):not(:first-child) { margin-top: 18px; }
.tool-form .calc-rows dd { white-space: normal; overflow-wrap: anywhere; }
.calc-rows dd[data-fmt="text"] { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.field input[type="range"] { height: 28px; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--sf-accent-strong); cursor: pointer; }
.range-val { color: var(--sf-text); font-weight: 600; }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; margin-top: 18px; }
.file-btn { position: relative; overflow: hidden; cursor: pointer; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* password generator */
.pw-meter { height: 8px; margin-top: 14px; border-radius: 8px; background: var(--sf-surface-3); overflow: hidden; }
.pw-meter i { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: #ef4444; transition: width .25s, background .25s; }
.pw-meter[data-level="1"] i { background: #f59e0b; }
.pw-meter[data-level="2"] i { background: #eab308; }
.pw-meter[data-level="3"] i { background: #22c55e; }
.pw-meter[data-level="4"] i { background: #10b981; }
.calc-out .pw-verdict { margin-top: 10px; font-size: 14px; color: var(--sf-text-3); }
.pw-verdict b { color: var(--sf-text); font-weight: 600; }
.calc-out .pw-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pw-list li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--sf-well); }
.pw-list code { flex: 1; min-width: 0; font: 500 14.5px/1.45 var(--sf-mono); color: var(--sf-text); overflow-wrap: anywhere; }
/* hash generator */
.hash-rows { display: grid; gap: 10px; margin: 14px 0 0; }
.hash-row { padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--sf-well); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.hash-row dt { font: 600 10.5px/1 var(--sf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-text-3); }
.hash-row dd { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.hash-row code { flex: 1; min-width: 0; font: 500 13px/1.5 var(--sf-mono); color: var(--sf-text); overflow-wrap: anywhere; }
.hash-row.is-match { border-color: var(--sf-success); background: color-mix(in srgb, var(--sf-success) 10%, transparent); }
.calc-out > [data-verdict]:empty { display: none; }
/* timestamp converter */
.ts-now { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ts-big { display: block; margin: 10px 0 6px; font: 700 clamp(30px, 4vw, 42px)/1.05 var(--sf-mono); letter-spacing: -.02em; color: var(--sf-accent); }
.uuid-report:not(:empty) { margin-top: 4px; }
/* GPA rows */
.doc-row select { min-width: 0; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--sf-line-2); background: var(--sf-field); color: var(--sf-text); font: 400 14px/1.3 var(--sf-font); }
.doc-row select:focus { outline: 0; border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); }
.doc-row.gpa-row { grid-template-columns: minmax(0, 1fr) 84px 116px; align-items: center; }
.doc-row.gpa-row.no-credit { grid-template-columns: minmax(0, 1fr) 116px auto; }
.gpa-opt { font-size: 12.5px; white-space: nowrap; }
@media (max-width: 560px) {
  .doc-row.gpa-row, .doc-row.gpa-row.no-credit { grid-template-columns: 1fr 1fr; }
  .gpa-row > [data-f="name"] { grid-column: 1 / -1; }
}
/* Bangla date */
.bn-today { display: block; margin-top: 10px; font: 600 clamp(22px, 2.6vw, 30px)/1.3 var(--sf-font); color: var(--sf-accent); }
.panel .bn-big { margin-top: 18px; font: 600 24px/1.35 var(--sf-font); color: var(--sf-accent); }
/* sleep calculator */
.calc-out .sleep-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.sleep-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--sf-well); border: 1px solid transparent; }
.sleep-list li.is-best { border-color: color-mix(in srgb, var(--sf-accent) 45%, transparent); }
.sleep-list b { font: 700 24px/1.2 var(--sf-display); letter-spacing: -.01em; color: var(--sf-text); }
.sleep-list li.is-best b { color: var(--sf-accent); }
.sleep-list span { font-size: 13px; color: var(--sf-text-3); }
.tool-form .seg + .form { margin-top: 18px; }
/* SEO tools */
.count { float: right; font: 600 11.5px/1.4 var(--sf-mono); color: var(--sf-text-3); }
.count.good { color: var(--sf-success); }
.count.short { color: var(--sf-warn); }
.count.over { color: var(--sf-danger); }
.share-card { overflow: hidden; margin-top: 12px; border-radius: 12px; border: 1px solid #dadde1; background: #f0f2f5; color: #1c1e21; }
.sc-img { aspect-ratio: 1.91 / 1; background: #d8dadf center / cover no-repeat; }
.sc-img[hidden] { display: none; }
.sc-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.sc-host { font: 400 12px/1.3 var(--sf-font); color: #606770; }
.sc-title { font: 600 16px/1.3 var(--sf-font); color: #1c1e21; overflow-wrap: anywhere; }
.sc-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.35; color: #606770; }
/* the search result is drawn on white with the colours search pages use, in both themes */
.serp-stage { margin-top: 12px; padding: 22px 20px; border-radius: 12px; background: #fff; overflow-x: auto; }
.serp-card { width: 600px; max-width: 100%; font-family: Arial, Helvetica, sans-serif; }
.serp-card.mobile { width: 360px; }
.serp-site { display: flex; align-items: center; gap: 10px; min-width: 0; }
.serp-site > span:last-child { min-width: 0; }
.serp-fav { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0; font: 700 12px/1 Arial, sans-serif; color: #5f6368; }
.serp-site b { display: block; font: 400 14px/20px Arial, sans-serif; color: #202124; }
.serp-site small { display: block; font: 400 12px/18px Arial, sans-serif; color: #4d5156; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-card .serp-title { margin-top: 8px; font: 400 20px/26px Arial, sans-serif; color: #1a0dab; overflow-wrap: anywhere; }
.serp-card .serp-desc { margin-top: 4px; font: 400 14px/22px Arial, sans-serif; color: #4d5156; overflow-wrap: anywhere; }
.serp-desc span { color: #70757a; }
.serp-desc b { font-weight: 700; color: #474747; }
.px-meter { position: relative; height: 6px; margin: -6px 0 14px; border-radius: 6px; background: var(--sf-surface-3); }
.px-meter i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--sf-success); transition: width .2s; }
.px-meter.over i { background: var(--sf-danger); }
.px-meter span { position: absolute; top: 10px; right: 0; font: 600 11px/1 var(--sf-mono); color: var(--sf-text-3); }
.bot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.bot-grid small, .ai-list small { font-size: 12px; color: var(--sf-text-3); }
.ai-list { display: grid; gap: 10px; margin-top: 14px; }
.ai-list .check { align-items: flex-start; }
.ai-list .check input { margin-top: 2px; }
.ai-list b { font-weight: 600; color: var(--sf-text); }
.robots-test { margin-top: 24px; border-top: 1px solid var(--sf-glass-line); }
.calc-out .robots-verdict { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.robots-verdict b { font: 700 20px/1.2 var(--sf-display); }
.robots-verdict b.ok { color: var(--sf-success); }
.robots-verdict b.no { color: var(--sf-danger); }
.robots-verdict span { font-size: 13.5px; line-height: 1.5; color: var(--sf-text-2); }
.kd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.kd-stats > div { padding: 12px; border-radius: 12px; background: var(--sf-well); }
.kd-stats dt { font: 600 10px/1.2 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-3); }
.kd-stats dd { margin: 6px 0 0; font: 700 19px/1.1 var(--sf-display); color: var(--sf-text); }
.calc-out .kd-target { margin-top: 14px; font-size: 15px; color: var(--sf-text-2); }
.calc-out .kd-target:empty { display: none; }
.kd-target b { color: var(--sf-text); }
.kd-target.good b { color: var(--sf-success); }
.kd-target.high b { color: var(--sf-danger); }
.kd-table :is(th, td):nth-child(2) { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.kd-table td:first-child { color: var(--sf-text-3); }
.calc-table td.empty-row { text-align: left; white-space: normal; color: var(--sf-text-3); }
@media (max-width: 560px) { .kd-stats { grid-template-columns: 1fr 1fr; } }
/* image tools */
.tool-form .form.first { margin-top: 0; }
.calc-out .img-list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.img-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: var(--sf-well); }
.img-row img { flex: none; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: #fff; }
.img-row .txt { flex: 1; min-width: 0; }
.img-row b { display: block; font-size: 14px; font-weight: 600; color: var(--sf-text); overflow-wrap: anywhere; }
.img-row small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sf-text-3); }
.img-row em { font-style: normal; font-weight: 600; }
.img-row em.down { color: var(--sf-success); }
.img-row em.up { color: var(--sf-warn); }
.tool-form .picked:not(:empty) { margin-top: 10px; }
/* editors: the picture on the left, the controls beside it */
.crop-work { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.panel.crop-panel { padding: 12px; }
.crop-stage { height: min(66vh, 600px); border-radius: 12px; overflow: hidden; background: var(--sf-well); }
.crop-stage img { display: block; max-width: 100%; }
.panel.crop-side { position: sticky; top: calc(var(--sf-topbar-h) + 20px); padding: 22px; }
.crop-side > :not(:first-child) { margin-top: 14px; }
.crop-side .form { gap: 12px; }
.crop-side .form:not(.pair) { grid-template-columns: 1fr; }
.field input[type="color"] { height: 46px; padding: 5px; cursor: pointer; }
.field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 8px; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-grid .sf-btn { width: 100%; padding: 0 10px; }
@media (max-width: 1140px) {
  .crop-work { grid-template-columns: 1fr; }
  .panel.crop-side { position: static; }
}
/* passport photo: an oval inside the crop box shows where the head goes */
.pp-stage .cropper-view-box::after { content: ""; position: absolute; top: 9%; right: 21%; bottom: 25%; left: 21%; border: 2px dashed rgba(255, 255, 255, .9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.crop-panel .pp-hint { margin-top: 10px; text-align: center; }
.pp-sheet { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--sf-line); }
.pp-sheet:not([src]) { display: none; }
/* colour picker */
.pick-stage { position: relative; display: grid; place-items: center; min-height: 300px; border-radius: 12px; background: var(--sf-well); }
.pick-stage canvas[data-view] { display: block; max-width: 100%; max-height: 620px; height: auto; cursor: crosshair; touch-action: none; }
.loupe { position: absolute; width: 132px; height: 132px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); pointer-events: none; image-rendering: pixelated; }
.pick-now { display: flex; align-items: flex-start; gap: 14px; }
.pick-swatch { flex: none; width: 64px; height: 64px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 1px var(--sf-line); }
.pick-codes { flex: 1; min-width: 0; display: grid; gap: 6px; margin: 0; }
.pick-codes div { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.pick-codes dt { font: 600 10px/1 var(--sf-mono); letter-spacing: .12em; color: var(--sf-text-3); }
.pick-codes dd { display: contents; }
.pick-codes code { font: 500 12.5px/1.3 var(--sf-mono); color: var(--sf-text); overflow-wrap: anywhere; }
.pick-codes .sf-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 6px; }
.crop-side .pick-label { margin-top: 18px; }
.swatch-row:not(:empty) { margin-top: 8px; }
.chip-swatch { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border-radius: 9px; border: 1px solid var(--sf-line); background: var(--sf-well); font: 500 12px/1 var(--sf-mono); color: var(--sf-text); cursor: pointer; }
.chip-swatch:hover { border-color: var(--sf-line-2); }
.chip-swatch i { width: 20px; height: 20px; border-radius: 6px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.chip-swatch small { color: var(--sf-text-3); }
/* favicon */
.fav-tab { display: flex; align-items: center; gap: 8px; max-width: 240px; margin-top: 12px; padding: 9px 12px; border-radius: 10px 10px 0 0; background: var(--sf-surface-3); font-size: 12.5px; color: var(--sf-text); }
.fav-tab i { flex: none; width: 16px; height: 16px; background: center / contain no-repeat; }
.fav-tab span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fav-tab b { font-weight: 400; color: var(--sf-text-3); }
.fav-previews { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; min-height: 60px; padding: 16px; border-radius: 0 12px 12px 12px; background-color: #fff; background-image: conic-gradient(#eceef2 25%, transparent 0 50%, #eceef2 0 75%, transparent 0); background-size: 14px 14px; }
.fav-previews figure { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.fav-previews figcaption { font: 600 10.5px/1 var(--sf-mono); color: #6b6f7b; }
/* OCR */
.ocr-thumb { display: block; max-width: 100%; max-height: 220px; margin-top: 14px; border-radius: 10px; object-fit: contain; background: var(--sf-well); }
/* background remover: the result with the original laid over it, cut back by a slider */
.bg-stage { min-height: 320px; }
.seg.bg-seg { display: grid; grid-template-columns: 1fr 1fr; }
.bg-seg label { text-align: center; }
.bg-cmp { --x: 0%; position: relative; max-width: 100%; line-height: 0; }
.bg-cmp canvas { display: block; max-width: 100%; max-height: 600px; height: auto; }
.bg-orig { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 calc(100% - var(--x)) 0 0); pointer-events: none; }
.bg-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); pointer-events: none; }
.bg-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E") center / 18px no-repeat; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.bg-slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.bg-cmp.wipe .bg-orig { transition: clip-path .9s cubic-bezier(.4, 0, .2, 1); }
.bg-cmp.wipe .bg-handle { transition: left .9s cubic-bezier(.4, 0, .2, 1); }
.bg-cmp.busy .bg-handle, .bg-cmp.busy .bg-slider { display: none; }
.bg-busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 24px; background: rgba(10, 11, 15, .62); color: #fff; text-align: center; }
.bg-busy[hidden] { display: none; }
.bg-busy b { font-size: 15px; font-weight: 600; }
.bg-busy small { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.bg-busy .progress { width: min(320px, 64vw); margin: 6px 0 2px; background: rgba(255, 255, 255, .18); }
.bg-sw-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-sw { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 1px var(--sf-line); cursor: pointer; }
.bg-sw[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px var(--sf-bg), 0 0 0 4px var(--sf-accent); }
.crop-panel .bg-hint { margin-top: 10px; text-align: center; }
/* PDF tools */
.tool-form .seg-note:not(:empty) { margin-top: 8px; }
.tool-form .fine-print { margin-top: 12px; }
.cmp-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.cmp-sizes > div { padding: 12px; border-radius: 12px; background: var(--sf-well); }
.cmp-sizes dt { font: 600 10px/1.2 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-3); }
.cmp-sizes dd { margin: 6px 0 0; font: 700 19px/1.1 var(--sf-display); color: var(--sf-text); }
.cmp-sizes .saved dd { color: var(--sf-success); }
.cmp-result .sf-btn { width: 100%; }
.pdf-result { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--sf-well); }
.pdf-result .txt { flex: 1; min-width: 0; }
.pdf-result b { display: block; font-size: 14px; font-weight: 600; color: var(--sf-text); overflow-wrap: anywhere; }
.pdf-result small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--sf-text-3); }
.progress.indeterminate i { width: 35%; animation: sf-indet 1.2s ease-in-out infinite; }
@keyframes sf-indet { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.more-opts { margin-top: 18px; font-size: 14px; color: var(--sf-text-2); }
.more-opts summary { cursor: pointer; }
.sf-btn.full { width: 100%; }
.crop-side > .side-h { margin-top: 22px; }
/* sign PDF */
.panel.sp-panel { padding: 16px; }
.sp-pages { display: flex; flex-direction: column; align-items: center; gap: 32px; max-height: 80vh; overflow: auto; padding: 8px 6px 28px; border-radius: 12px; background: var(--sf-well); }
.sp-page { position: relative; flex: none; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .28); }
.sp-page canvas { display: block; }
.sp-num { position: absolute; left: 0; bottom: -20px; font: 600 10.5px/1 var(--sf-mono); color: var(--sf-text-3); }
.is-placing .sp-page { cursor: crosshair; }
.is-placing .sp-page:hover { outline: 2px dashed var(--sf-accent); outline-offset: 3px; }
.sp-panel .sp-hint { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: var(--sf-accent-soft); font-size: 14px; color: var(--sf-text); }
.sp-item { position: absolute; cursor: move; touch-action: none; outline: 1px dashed rgba(90, 67, 230, .75); }
.sp-item img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-select: none; user-select: none; }
.sp-item:hover, .sp-item.is-active { outline: 2px solid #5a43e6; }
.sp-item .sp-x { position: absolute; top: -11px; right: -11px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #ef4444; color: #fff; font: 700 14px/1 var(--sf-font); cursor: pointer; }
.sp-size { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 4px; background: #5a43e6; cursor: nwse-resize; }
.sig-pad { display: block; width: 100%; height: 170px; margin-top: 12px; border-radius: 12px; border: 1px dashed #c4c6cc; background: #fff; touch-action: none; cursor: crosshair; }
.sig-up { display: block; max-width: 100%; max-height: 120px; margin-top: 10px; padding: 6px; border-radius: 8px; background: #fff; }
/* QR code */
.qr-stage canvas { display: block; width: 100%; max-width: 300px; height: auto; }
.qr-stage.is-empty canvas { visibility: hidden; }
.qr-payload { margin-top: 12px; font-size: 13px; color: var(--sf-text-3); }
.qr-payload summary { cursor: pointer; }
.qr-payload pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sf-well); font: 500 12.5px/1.5 var(--sf-mono); color: var(--sf-text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
/* domain, DNS and server checks */
.calc-out .net-result { margin-top: 12px; }
.net-result > :not(:first-child) { margin-top: 14px; }
.verdict { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--sf-line-2); background: var(--sf-well); }
.verdict b { font: 700 17px/1.3 var(--sf-display); color: var(--sf-text); overflow-wrap: anywhere; }
.verdict span { font-size: 13.5px; line-height: 1.5; color: var(--sf-text-2); overflow-wrap: anywhere; }
.verdict.big b { font-size: 26px; }
.verdict.good { border-color: color-mix(in srgb, var(--sf-success) 45%, transparent); background: color-mix(in srgb, var(--sf-success) 9%, transparent); }
.verdict.good b { color: var(--sf-success); }
.verdict.bad { border-color: color-mix(in srgb, var(--sf-danger) 50%, transparent); background: color-mix(in srgb, var(--sf-danger) 9%, transparent); }
.verdict.bad b { color: var(--sf-danger); }
.verdict.warn { border-color: color-mix(in srgb, var(--sf-warn) 50%, transparent); background: color-mix(in srgb, var(--sf-warn) 9%, transparent); }
.verdict.warn b { color: var(--sf-warn); }
.note-list { display: grid; gap: 6px; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--sf-text-2); }
.chain-list, .hop-list, .sec-list, .port-list, .ping-bars, .idea-list { padding: 0; list-style: none; }
.chain-list, .hop-list, .sec-list, .port-list { display: grid; gap: 8px; }
.chain-list li { padding: 10px 12px; border-radius: 10px; background: var(--sf-well); }
.chain-list b, .hop-list b, .sec-list b { display: block; font-size: 14px; font-weight: 600; color: var(--sf-text); overflow-wrap: anywhere; }
.chain-list small, .hop-list small, .sec-list small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--sf-text-3); overflow-wrap: anywhere; }
.hop-list li { padding: 10px 12px 10px 14px; border-left: 3px solid var(--sf-line-2); border-radius: 8px; background: var(--sf-well); }
.hop-list li.hop { border-left-color: var(--sf-warn); }
.hop-list li.good { border-left-color: var(--sf-success); }
.hop-list li.bad { border-left-color: var(--sf-danger); }
.hop-list b { font-family: var(--sf-mono); font-size: 13px; }
.hop-list span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--sf-text); overflow-wrap: anywhere; }
.sec-list li { position: relative; padding: 8px 12px 8px 32px; border-radius: 10px; background: var(--sf-well); }
.sec-list li::before { position: absolute; top: 8px; left: 12px; font-weight: 700; }
.sec-list li.yes::before { content: "✓"; color: var(--sf-success); }
.sec-list li.no::before { content: "✕"; color: var(--sf-danger); }
.grade { display: inline-grid; place-items: center; min-width: 34px; height: 24px; margin-left: 8px; padding: 0 8px; border-radius: 7px; background: #dc2626; color: #fff; font: 700 12.5px/1 var(--sf-mono); vertical-align: middle; }
.grade.g-A { background: #16a34a; }
.grade.g-B { background: #65a30d; }
.grade.g-C { background: #ca8a04; }
.grade.g-D { background: #ea580c; }
.hdr-table td { text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: 13px; }
.hdr-table td:first-child { width: 34%; font-weight: 600; color: var(--sf-text); }
.ping-bars { display: grid; gap: 6px; }
.ping-bars li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 84px; align-items: center; gap: 10px; font-size: 13px; }
.ping-bars span { font-family: var(--sf-mono); color: var(--sf-text-3); }
.ping-bars i { width: var(--w); height: 10px; border-radius: 6px; background: var(--sf-success); }
.ping-bars li:not(.open) i { background: var(--sf-danger); opacity: .45; }
.ping-bars b { font: 600 13px/1 var(--sf-mono); text-align: right; color: var(--sf-text); }
.port-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--sf-well); }
.port-list b { font: 700 14px/1 var(--sf-mono); color: var(--sf-text); }
.port-list span { font-size: 13.5px; color: var(--sf-text-2); }
.port-list em { font-size: 13px; font-style: normal; font-weight: 600; }
.port-list .open em { color: var(--sf-success); }
.port-list .closed em { color: var(--sf-text-3); }
.port-list .filtered em { color: var(--sf-warn); }
.perm-grid { width: 100%; margin-top: 16px; border-collapse: collapse; }
.perm-grid :is(th, td) { padding: 10px; border-bottom: 1px solid var(--sf-glass-line); text-align: center; }
.perm-grid tbody th { text-align: left; font-weight: 600; color: var(--sf-text); }
.perm-grid thead th { font: 600 10.5px/1 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-3); }
.perm-grid input { width: 20px; height: 20px; accent-color: var(--sf-accent-strong); cursor: pointer; }
.calc-out .chmod-big { margin-top: 10px; }
.chmod-big b { font: 700 clamp(24px, 3vw, 32px)/1.15 var(--sf-mono); letter-spacing: .03em; color: var(--sf-accent); overflow-wrap: anywhere; }
.calc-out .note-list:not(:empty) { margin-top: 12px; }
.cmd { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sf-line); background: var(--sf-field); font: 500 13px/1.5 var(--sf-mono); color: var(--sf-text); overflow-wrap: anywhere; }
.calc-out .cron-human { margin-top: 8px; font: 600 18px/1.45 var(--sf-display); color: var(--sf-text); }
.calc-out .next-list { display: grid; gap: 4px; margin-top: 8px; padding-left: 22px; font-size: 14px; color: var(--sf-text-2); }
.calc-out .bits { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--sf-well); font: 500 12.5px/1.7 var(--sf-mono); color: var(--sf-text-2); white-space: pre; overflow-x: auto; }
.bits:empty { display: none; }
.code-rows { display: grid; gap: 8px; margin: 12px 0 0; }
.code-rows > div { padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--sf-well); }
.code-rows dt { font: 600 10.5px/1 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-3); }
.code-rows dd { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.code-rows code { flex: 1; min-width: 0; font: 500 13.5px/1.5 var(--sf-mono); color: var(--sf-text); overflow-wrap: anywhere; }
.raw-box { font-size: 13px; color: var(--sf-text-2); }
.raw-box summary { cursor: pointer; }
.raw-box pre { max-height: 380px; margin: 8px 0 0; padding: 12px; overflow: auto; border-radius: 10px; background: var(--sf-well); font: 500 12px/1.55 var(--sf-mono); color: var(--sf-text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.dns-record { display: grid; gap: 8px; margin: 12px 0 0; }
.dns-record > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--sf-well); }
.dns-record dt { font: 600 10.5px/1.4 var(--sf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-3); }
.dns-record dd { margin: 0; font: 500 13.5px/1.55 var(--sf-mono); color: var(--sf-text); overflow-wrap: anywhere; }
.calc-out .lookups { margin-top: 12px; font-size: 14px; color: var(--sf-text-2); }
.lookups b.ok { color: var(--sf-success); }
.lookups b.near { color: var(--sf-warn); }
.lookups b.over { color: var(--sf-danger); }
.calc-out .puny-out { margin-top: 10px; font: 600 22px/1.4 var(--sf-mono); color: var(--sf-accent); overflow-wrap: anywhere; }
.calc-out .calc-table:not(:first-child) { margin-top: 14px; }
.tool-form .tld-label { margin-top: 18px; }
.tld-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: 10px; }
.idea-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 0; }
.idea-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: var(--sf-well); font-size: 14px; }
.idea-list b { flex: 1; min-width: 0; font-weight: 600; color: var(--sf-text); overflow-wrap: anywhere; }
.idea-list em { font-size: 12px; font-style: normal; font-weight: 600; color: var(--sf-text-3); }
.idea-list li.free, .idea-list li.likely { border-color: color-mix(in srgb, var(--sf-success) 45%, transparent); }
.idea-list li.free em, .idea-list li.likely em { color: var(--sf-success); }
.idea-list li.taken b { color: var(--sf-text-3); text-decoration: line-through; }
.idea-list a { font-size: 12px; color: var(--sf-accent); }
.ip-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ip-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ip-big { font: 700 clamp(20px, 2.6vw, 30px)/1.2 var(--sf-mono); color: var(--sf-accent); overflow-wrap: anywhere; }
.panel .ptr { margin-top: 8px; font: 500 15px/1.4 var(--sf-mono); color: var(--sf-text); overflow-wrap: anywhere; }
@media (max-width: 760px) { .ip-hero { grid-template-columns: 1fr; } }
/* DNS lookup, propagation, email and blocklist checks */
.rr h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font: 700 15px/1.3 var(--sf-mono); color: var(--sf-text); }
.rr h3 small { font: 500 12.5px/1.4 var(--sf-font); color: var(--sf-text-3); }
.rr-table td { font: 500 13px/1.5 var(--sf-mono); }
.rr-table td:nth-child(2) { text-align: left; white-space: normal; overflow-wrap: anywhere; color: var(--sf-text); }
.rr-table td:first-child { width: 28%; color: var(--sf-text-3); overflow-wrap: anywhere; }
.rr-table td:last-child { width: 72px; color: var(--sf-text-3); }
.rr-table td b { font-size: 11px; color: var(--sf-text-3); }
.row-form { grid-template-columns: var(--cols, minmax(0, 1fr)); }
.row-form .field { grid-column: auto; }
.dns-out { padding-top: 22px; }
.prop-table { margin-top: 14px; }
.prop-table td { vertical-align: top; }
.prop-table th:nth-child(2) { padding-left: 30px; text-align: left; }
.prop-table td:first-child b { display: block; font-weight: 600; color: var(--sf-text); }
.prop-table td:first-child small { display: block; font-size: 12px; color: var(--sf-text-3); }
.prop-table td.ans { position: relative; padding-left: 30px; text-align: left; white-space: normal; overflow-wrap: anywhere; font: 500 13px/1.55 var(--sf-mono); color: var(--sf-text); }
.prop-table td.ans::before { position: absolute; top: 10px; left: 10px; font: 700 13px/1.55 var(--sf-font); }
.prop-table tr.wait td.ans { color: var(--sf-text-3); }
.prop-table tr.wait td.ans::before { content: "…"; color: var(--sf-text-3); }
.prop-table tr.ok td.ans::before { content: "✓"; color: var(--sf-success); }
.prop-table tr.old td.ans::before { content: "✕"; color: var(--sf-warn); }
.prop-table tr.old td.ans { color: var(--sf-warn); }
.prop-table tr.none td.ans::before { content: "–"; color: var(--sf-text-3); }
.prop-table tr.none td.ans { color: var(--sf-text-3); }
.prop-table tr.err td.ans::before { content: "!"; color: var(--sf-danger); }
.prop-table tr.err td.ans { font-family: inherit; color: var(--sf-danger); }
[data-summary]:not(:empty) { margin-bottom: 4px; }
.mail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; gap: 12px; }
.mail-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--sf-line-2); background: var(--sf-well); }
.mc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.mc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-text-3); transform: translateY(-1px); }
.mail-card.good .mc-dot { background: var(--sf-success); }
.mail-card.warn .mc-dot { background: var(--sf-warn); }
.mail-card.bad .mc-dot { background: var(--sf-danger); }
.mail-card.bad { border-color: color-mix(in srgb, var(--sf-danger) 40%, transparent); }
.mail-card.warn { border-color: color-mix(in srgb, var(--sf-warn) 40%, transparent); }
.mc-head b { font-size: 14.5px; font-weight: 700; color: var(--sf-text); }
.mc-head em { flex-basis: 100%; padding-left: 20px; font-size: 13.5px; font-style: normal; line-height: 1.5; color: var(--sf-text-2); }
.mail-card .dns-val { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--sf-field); font: 500 12.5px/1.55 var(--sf-mono); color: var(--sf-text); overflow-wrap: anywhere; }
.mail-card .note-list, .mail-card .out-meta { margin-top: 10px; }
.sf-page .mx-list { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font: 500 13px/1.5 var(--sf-mono); color: var(--sf-text); }
.mx-list li { overflow-wrap: anywhere; }
.mx-list b { display: inline-block; min-width: 34px; color: var(--sf-text-3); }
.bl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.sf-page .bl-list { margin-top: 10px; }
.bl-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: var(--sf-well); }
.bl-list b { font-size: 13.5px; font-weight: 600; color: var(--sf-text); }
.bl-list small { grid-column: 1 / -1; font: 500 11px/1.4 var(--sf-mono); color: var(--sf-text-3); overflow-wrap: anywhere; }
.bl-list em { font-size: 12.5px; font-style: normal; font-weight: 600; text-align: right; }
.bl-list .clean em { color: var(--sf-success); }
.bl-list .unknown em { color: var(--sf-text-3); }
.bl-list .listed { border-color: color-mix(in srgb, var(--sf-danger) 50%, transparent); }
.bl-list .listed em { color: var(--sf-danger); }
.bl-list a { grid-column: 1 / -1; margin-top: 4px; font-size: 12.5px; color: var(--sf-accent); }
@media (max-width: 760px) { .row-form { grid-template-columns: 1fr; } }
/* certificate decoder */
.cert-out > :not(:first-child) { margin-top: 16px; }
.cert-card { padding: 22px 24px; border-radius: 16px; background-color: var(--sf-glass); background-image: var(--sf-glass-sheen); border: 1px solid var(--sf-glass-line); box-shadow: var(--sf-glass-shadow); }
.cc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.cc-role { flex-basis: 100%; font: 600 10.5px/1 var(--sf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-text-3); }
.cc-head b { font: 700 20px/1.3 var(--sf-display); color: var(--sf-text); overflow-wrap: anywhere; }
.cc-head em { font-size: 13px; font-style: normal; font-weight: 600; color: var(--sf-text-3); }
.cc-head em.good { color: var(--sf-success); }
.cc-head em.warn { color: var(--sf-warn); }
.cc-head em.bad { color: var(--sf-danger); }
.cert-card .calc-rows dt { flex: none; width: 34%; }
.cert-card .note-list:not(:empty), .cert-card .raw-box { margin-top: 12px; }
code.fp { font: 500 12.5px/1.5 var(--sf-mono); overflow-wrap: anywhere; }
@media (max-width: 1140px) {
  .doc { grid-template-columns: 1fr; }
}
@media print {
  .pg:has(.doc) > :not(.doc), .doc > :not(.doc-preview), .doc-preview > :not(.doc-scroll), body.sf-app ins.adsbygoogle, .google-auto-placed { display: none !important; }
  .pg:has(.doc) { max-width: none; padding: 0; }
  .doc { display: block; }
  .doc-scroll { overflow: visible; border-radius: 0; box-shadow: none; }
  .doc-sheet { min-width: 0; min-height: 0; padding: 0; }
  .doc-sheet.ship-label { padding: .22in; }
  .ds-items tr, .ds-totals, .ds-notes, .ds-sign { break-inside: avoid; }
  /* a barcode prints on its own */
  .pg:has(.code-stage) > :not(.calc), .calc:has(.code-stage) > :not(.calc-out), .calc-out:has(.code-stage) > :not(.code-stage) { display: none !important; }
  .calc-out:has(.code-stage) { position: static; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--sf-surface-3); color: var(--sf-text); font: 500 .88em var(--sf-mono); }
@media (max-width: 860px) {
  .io-grid { grid-template-columns: 1fr; }
  .field textarea.code { min-height: 240px; }
}

/* long-form text */
.prose { font-size: 16px; line-height: 1.75; color: var(--sf-text-2); }
.prose h2 { margin: 44px 0 12px; font: 700 23px/1.25 var(--sf-display); letter-spacing: -.02em; color: var(--sf-text); }
.prose h3 { margin: 30px 0 10px; font: 600 18px/1.3 var(--sf-font); color: var(--sf-text); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--sf-text-3); }
.prose strong, .prose b { color: var(--sf-text); font-weight: 600; }
.prose a { color: var(--sf-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sf-accent) 40%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }
.prose > :first-child { margin-top: 0; }
.prose .updated { font: 600 11px/1 var(--sf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sf-text-3); }

@media (max-width: 1240px) {
  .hero { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
  .is-searching .hero-panel { display: none; }  /* stacked, it would sit between the search box and its results */
}
@media (max-width: 760px) {
  .sf-wrap, .pg { padding: 0 20px; }
  .hero { padding: 40px 0 32px; }
  .hero .lede { font-size: 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div { padding: 18px 20px; }
  .stats > div:nth-child(3) { border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--sf-glass-line); }
  .filters { margin: 20px -20px 0; padding: 12px 20px; }
  .cat-head p { display: none; }
  .grid { grid-template-columns: 1fr; }
  .band { padding: 24px; }
  .contact-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .pg-hero { padding: 36px 0 28px; }
  .panel { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card, .cat-link, .sf-btn, .hp-row, .hp-row > svg, .f-nav { transition: none; }
}

/* ---- 5. Tool pages (legacy markup) --------------------------------------- */
/* Tool pages keep their original markup: Tailwind utilities plus a little
   per-page CSS. These rules re-map their colours and spacing onto the tokens
   so every tool sits naturally inside the shell, in both themes. */

/* Tailwind's preflight gives every element a light-grey border colour. */
:where(body.sf-tool) *, :where(body.sf-tool) ::before, :where(body.sf-tool) ::after { border-color: var(--sf-line); }

/* layout: the old pages left room for a fixed top nav and centred the tool in the viewport */
body.sf-tool > .min-h-screen, body.sf-tool > * > .min-h-screen { min-height: 0 !important; }
body.sf-tool > :is(main, div, section, header):is(.pt-16, .pt-20, .pt-24, .pt-28, .pt-32) { padding-top: 36px !important; }
body.sf-tool > :is(main, div, section, header):is(.mt-16, .mt-20, .mt-24, .mt-28) { margin-top: 36px !important; }
body.sf-tool > :is(main, div, section):is(.pt-16, .pt-20, .pt-24, .pt-28, .pt-32):has(> :is(.py-8, .py-10, .py-12, .py-16, .mt-8, .mt-10, .mt-12):first-child) { padding-top: 0 !important; }
body.sf-tool > :is(main, div, section):is(.py-16, .py-20, .py-24) { padding-top: 40px !important; }
body.sf-tool > .flex.items-center { align-items: flex-start; }
body.sf-tool > :is(.flex, main, .container) { padding-left: 24px; padding-right: 24px; }
/* width: the tool sits in the same 1560px column, with the same 24px gutters, as the home page (.sf-wrap) */
body.sf-tool > :is(.flex, main, .container, .mx-auto, .pt-16, .pt-20, .pt-24, .pt-28):not(.fixed, .bg-white) { box-sizing: border-box; width: 100%; max-width: 1560px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px; padding-right: 24px; }
body.sf-tool > :is(.container, .mx-auto).bg-white:not(.fixed),
html body.sf-tool[data-sf-page="pdftoaudio"] > .container { box-sizing: border-box; width: calc(100% - 48px); max-width: 1512px !important; margin-left: auto !important; margin-right: auto !important; }
body.sf-tool > :not(.fixed) > :is(.max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .container, .converter, .converter-card, .converter-container, :is(.max-w-2xl, .max-w-3xl).bg-white),
body.sf-tool > :not(.fixed) > * > :is(.max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl, .container, .converter, .converter-card, .converter-container, :is(.max-w-2xl, .max-w-3xl).bg-white) { width: 100%; max-width: none !important; }
body.sf-tool > :is(.flex, main, .container, .mx-auto, .pt-16, .pt-20, .pt-24, .pt-28):not(.fixed) > [class*="px-"]:not([class*="bg-"]) { padding-left: 0; padding-right: 0; }
/* long words and wide fields must not push a grid column past the screen edge */
body.sf-tool .grid > * { min-width: 0; }
body.sf-tool :is(input, select, textarea, pre) { max-width: 100%; }

/* type */
body.sf-tool :is(h1, h2) { font-family: var(--sf-display); letter-spacing: -.02em; }
body.sf-tool h1 { text-wrap: balance; }

/* neutral scale */
body.sf-tool .bg-white { background-color: var(--sf-glass); }
body.sf-tool :is(.bg-gray-50, .bg-gray-100, .bg-slate-50, .bg-slate-100) { background-color: var(--sf-well); }
body.sf-tool :is(.bg-gray-200, .bg-gray-300, .bg-slate-200) { background-color: var(--sf-surface-3); }
body.sf-tool :is(.bg-gray-500, .bg-gray-600):not([class*="bg-opacity"]) { background-color: var(--sf-btn-neutral); }
body.sf-tool :is(.text-gray-900, .text-gray-800, .text-black, .text-slate-900, .text-slate-800) { color: var(--sf-text); }
body.sf-tool :is(.text-gray-700, .text-gray-600, .text-slate-700, .text-slate-600) { color: var(--sf-text-2); }
body.sf-tool :is(.text-gray-500, .text-gray-400, .text-slate-500) { color: var(--sf-text-3); }
body.sf-tool :is(.border-gray-100, .border-gray-200, .border-gray-300, .border-slate-200) { border-color: var(--sf-line-2); }
body.sf-tool :is(.border-gray-400, .border-gray-500) { border-color: var(--sf-text-3); }
body.sf-tool :is(.divide-gray-100, .divide-gray-200) > * + * { border-color: var(--sf-line); }
body.sf-tool :is(.hover\:bg-gray-50, .hover\:bg-gray-100, .hover\:bg-gray-200):hover { background-color: var(--sf-surface-3); }
body.sf-tool :is(.hover\:bg-gray-300, .hover\:bg-gray-400):hover { background-color: var(--sf-line-2); }
body.sf-tool :is(.hover\:bg-gray-600, .hover\:bg-gray-700):hover { background-color: var(--sf-btn-neutral-hover); }
body.sf-tool :is(.hover\:text-gray-700, .hover\:text-gray-900):hover { color: var(--sf-text); }
body.sf-tool :is(.hover\:border-gray-300, .hover\:border-gray-400):hover { border-color: var(--sf-text-3); }

/* brand colours (indigo / blue) follow the accent */
body.sf-tool :is(.bg-indigo-500, .bg-indigo-600, .bg-blue-500, .bg-blue-600, .peer:checked ~ .peer-checked\:bg-indigo-600) { background-color: var(--sf-accent-strong); }
body.sf-tool :is(.hover\:bg-indigo-400, .hover\:bg-indigo-700, .hover\:bg-blue-600, .hover\:bg-blue-700):hover { background-color: var(--sf-accent-hover); }
body.sf-tool :is(.text-indigo-600, .text-indigo-700, .text-indigo-800, .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800) { color: var(--sf-accent); }
body.sf-tool :is(.hover\:text-indigo-600, .hover\:text-blue-600, .hover\:text-blue-800):hover { color: var(--sf-accent); }
body.sf-tool :is(.border-indigo-500, .border-indigo-600, .border-blue-500, .border-blue-600) { border-color: var(--sf-accent); }
body.sf-tool :is(.border-indigo-200, .border-blue-200) { border-color: color-mix(in srgb, var(--sf-accent) 34%, transparent); }
body.sf-tool :is(.hover\:border-blue-400, .hover\:border-indigo-400):hover { border-color: var(--sf-accent); }
body.sf-tool :is(.bg-indigo-50, .bg-indigo-100, .bg-blue-50, .bg-blue-100) { background-color: var(--sf-accent-soft); }
body.sf-tool :is(.hover\:bg-indigo-50, .hover\:bg-indigo-100):hover { background-color: var(--sf-accent-soft); }

/* status tints — only the dark theme needs new values */
:root:not([data-theme="light"]) body.sf-tool :is(.bg-green-50, .bg-green-100) { background-color: rgba(74, 222, 128, .12); }
:root:not([data-theme="light"]) body.sf-tool :is(.bg-red-50, .bg-red-100) { background-color: rgba(248, 113, 113, .13); }
:root:not([data-theme="light"]) body.sf-tool :is(.bg-yellow-50, .bg-yellow-100) { background-color: rgba(250, 204, 21, .11); }
:root:not([data-theme="light"]) body.sf-tool :is(.hover\:bg-pink-50):hover { background-color: rgba(244, 114, 182, .12); }
:root:not([data-theme="light"]) body.sf-tool :is(.text-green-500, .text-green-600, .text-green-700, .text-green-800) { color: #86efac; }
:root:not([data-theme="light"]) body.sf-tool :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800, .hover\:text-red-600:hover, .hover\:text-red-700:hover) { color: #fca5a5; }
:root:not([data-theme="light"]) body.sf-tool :is(.text-yellow-500, .text-yellow-600, .text-yellow-700, .text-yellow-800) { color: #fde047; }
:root:not([data-theme="light"]) body.sf-tool :is(.text-pink-600, .text-pink-700) { color: #f9a8d4; }
:root:not([data-theme="light"]) body.sf-tool :is(.text-purple-600) { color: #c4b5fd; }
:root:not([data-theme="light"]) body.sf-tool :is(.text-sky-500, .text-sky-600, .text-sky-700, .text-sky-800) { color: #7dd3fc; }
:root:not([data-theme="light"]) body.sf-tool :is(.border-green-200) { border-color: rgba(74, 222, 128, .32); }
:root:not([data-theme="light"]) body.sf-tool :is(.border-yellow-200) { border-color: rgba(250, 204, 21, .32); }
:root:not([data-theme="light"]) body.sf-tool :is(.border-red-400, .border-red-500, .border-red-600) { border-color: rgba(248, 113, 113, .6); }

/* cards: the same glass as the home page. A hairline ring stands in for the border so the old box sizes stay put.
   The later lines pick up the main cards of the few pages that bring their own layout. */
body.sf-tool :is(.bg-white:is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl), .card, .article-section),
body.sf-tool :is(.converter, .article, .converter-container, .converter-card, .article-content, .stat-card),
body.sf-tool :is(#tool-section, #content-section, #article-section),
body.sf-tool:is([data-sf-page="pnrtopdf"], [data-sf-page="pdftoaudio"]) > .container {
  background-color: var(--sf-glass); background-image: var(--sf-glass-sheen);
  box-shadow: 0 0 0 1px var(--sf-glass-line), var(--sf-glass-shadow);
  -webkit-backdrop-filter: var(--sf-glass-blur); backdrop-filter: var(--sf-glass-blur);
}
/* dialogs float over the page, so they get the denser sheet */
body.sf-tool .fixed > .bg-white { background-color: var(--sf-frost); box-shadow: 0 0 0 1px var(--sf-glass-line), 0 30px 80px -20px rgba(0, 0, 0, .6); -webkit-backdrop-filter: var(--sf-glass-blur); backdrop-filter: var(--sf-glass-blur); }
body.sf-tool .gradient-bg { background: none; }

/* ---- form controls: one look for every text field, select, checkbox, radio, slider and button ---- */

/* text fields, selects, textareas */
body.sf-tool :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
  border-style: solid; border-color: var(--sf-line-2); border-radius: 11px;
  background-color: var(--sf-field); color: var(--sf-text); font-family: var(--sf-font); line-height: 1.4;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
body.sf-tool :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):not(.border-0, .border-none) { border-width: 1px; }
body.sf-tool :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select):not(.h-full) { min-height: 44px; }
body.sf-tool :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):not([class*="p-"], [class*="px-"], [class*="pl-"]) { padding: 10px 14px; }
body.sf-tool :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):not([class*="text-"]) { font-size: 14.5px; }
body.sf-tool :is(input, select, textarea)::placeholder { color: var(--sf-text-3); opacity: 1; }
body.sf-tool :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):hover:not(:focus, :disabled, [data-sf-open]) { border-color: var(--sf-text-3); }
body.sf-tool :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea):focus {
  outline: 0; border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft); --tw-ring-color: transparent;
}
body.sf-tool :is(input, select, textarea):disabled, body.sf-tool :is(input, textarea)[readonly]:not([class*="bg-"]) { opacity: .65; }
body.sf-tool :is(input, select, textarea, button):disabled { cursor: not-allowed; }

/* select: our own chevron instead of the platform arrow. The option list is drawn by js/shell.js,
   which marks the select it is open for with data-sf-open. */
body.sf-app select:not([multiple], [size]) {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b90a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
}
body.sf-app select[data-sf-open] {
  border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--sf-accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b90a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}
body.sf-tool select option { background: var(--sf-surface); color: var(--sf-text); }

/* checkboxes and radios */
body.sf-app input:is([type="checkbox"], [type="radio"]):not(.sr-only, .peer, .hidden) {
  -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; padding: 0; vertical-align: middle; cursor: pointer;
  border: 1.5px solid var(--sf-text-3); border-radius: 6px; background: var(--sf-field) center / 12px 12px no-repeat;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
body.sf-app input[type="radio"]:not(.sr-only, .peer, .hidden) { border-radius: 50%; }
body.sf-app input:is([type="checkbox"], [type="radio"]):not(.sr-only, .peer, .hidden):hover:not(:disabled) { border-color: var(--sf-accent); }
body.sf-app input:is([type="checkbox"], [type="radio"]):not(.sr-only, .peer, .hidden):checked { background-color: var(--sf-accent-strong); border-color: var(--sf-accent-strong); }
body.sf-app input[type="checkbox"]:not(.sr-only, .peer, .hidden):checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
}
body.sf-app input[type="radio"]:not(.sr-only, .peer, .hidden):checked { background-image: radial-gradient(circle, #fff 0 3.5px, transparent 4px); background-size: 100% 100%; }
body.sf-app input:is([type="checkbox"], [type="radio"]):focus { outline: 0; box-shadow: none; --tw-ring-shadow: 0 0 #0000; --tw-ring-offset-shadow: 0 0 #0000; }
body.sf-app input:is([type="checkbox"], [type="radio"]):focus-visible { box-shadow: 0 0 0 3px var(--sf-accent-soft); }
body.sf-app input:is([type="checkbox"], [type="radio"]):disabled { opacity: .5; }
body.sf-app label:has(> input:is([type="checkbox"], [type="radio"])) { cursor: pointer; }

/* sliders */
body.sf-tool input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 6px; padding: 0; border: 0; border-radius: 999px; background-color: var(--sf-surface-3);
  accent-color: var(--sf-accent-strong); cursor: pointer;
}
body.sf-tool input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--sf-accent-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .15s;
}
body.sf-tool input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 4px solid var(--sf-accent-strong); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
body.sf-tool input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--sf-surface-3); }
body.sf-tool input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
body.sf-tool input[type="range"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--sf-accent-soft); }

/* file pickers */
body.sf-tool input[type="file"] { color: var(--sf-text-2); font-size: 13.5px; }
body.sf-tool input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 15px; border: 0; border-radius: 10px; background: var(--sf-surface-3); color: var(--sf-text);
  font: 600 13px var(--sf-font); cursor: pointer; transition: background-color .15s;
}
body.sf-tool input[type="file"]:hover::file-selector-button { background: var(--sf-line-2); }

/* buttons (real buttons, plus the links and labels the tools dress up as buttons) */
body.sf-tool :is(button, a, label, input[type="submit"], input[type="button"]):is(.bg-indigo-500, .bg-indigo-600, .bg-blue-500, .bg-blue-600, .bg-green-500, .bg-green-600, .bg-red-500, .bg-red-600, .bg-gray-200, .bg-gray-300, .bg-gray-500, .bg-gray-600, .bg-yellow-500, .bg-purple-600, .bg-pink-500, .bg-pink-600) {
  font-family: var(--sf-font); font-weight: 600; letter-spacing: -.005em;
  transition: background-color .15s, color .15s, box-shadow .15s, transform .15s, filter .15s;
}
/* pills become the site's rounded rectangle; icon-only circles keep their shape */
body.sf-tool :is(button, a, label).rounded-full:is([class*="px-"]):is([class*="bg-"]) { border-radius: 11px; }
body.sf-tool :is(button, a, label):is(.rounded, .rounded-md, .rounded-lg):is([class*="bg-"]):is([class*="px-"], [class*="py-"], .w-full) { border-radius: 11px; }

/* primary */
body.sf-tool :is(button, a, label, input[type="submit"]):is(.bg-indigo-500, .bg-indigo-600, .bg-blue-500, .bg-blue-600, .bg-purple-600, .bg-pink-600) {
  background-color: var(--sf-accent-strong); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -14px var(--sf-accent-strong);
}
body.sf-tool :is(button, a, label, input[type="submit"]):is(.bg-indigo-500, .bg-indigo-600, .bg-blue-500, .bg-blue-600, .bg-purple-600, .bg-pink-600):hover:not(:disabled) { background-color: var(--sf-accent-hover); }
/* success / download */
body.sf-tool :is(button, a, label):is(.bg-green-500, .bg-green-600) { background-color: #16a34a; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
body.sf-tool :is(button, a, label):is(.bg-green-500, .bg-green-600):hover:not(:disabled) { background-color: #15803d; }
/* neutral: quiet outlined button */
body.sf-tool :is(button, a, label):is(.bg-gray-200, .bg-gray-300, .bg-gray-500, .bg-gray-600):not(.absolute) {
  background-color: var(--sf-glass-2); color: var(--sf-text); box-shadow: inset 0 0 0 1px var(--sf-line-2);
}
body.sf-tool :is(button, a, label):is(.bg-gray-200, .bg-gray-300, .bg-gray-500, .bg-gray-600):not(.absolute):hover:not(:disabled) { background-color: var(--sf-surface-3); box-shadow: inset 0 0 0 1px var(--sf-text-3); }
/* destructive / reset: red outline rather than a solid red block */
body.sf-tool :is(button, a, label):is(.bg-red-500, .bg-red-600):not(.absolute) {
  background-color: color-mix(in srgb, #ef4444 13%, transparent); color: var(--sf-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 42%, transparent);
}
body.sf-tool :is(button, a, label):is(.bg-red-500, .bg-red-600):not(.absolute):hover:not(:disabled) { background-color: color-mix(in srgb, #ef4444 24%, transparent); }

body.sf-tool .btn:hover { transform: translateY(-1px); }
body.sf-tool :is(button, input[type="submit"], input[type="button"]):disabled { opacity: .5; transform: none; filter: none; }
body.sf-tool :is(button, a, label, summary, [role="button"]):focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }

/* shared template pieces */
body.sf-tool .drop-zone { border-color: var(--sf-line-2); }
body.sf-tool .drop-zone.dragover { border-color: var(--sf-accent); background-color: var(--sf-accent-soft); }
body.sf-tool :is(.progress-bar, .progress-bar-animated) { background: linear-gradient(90deg, var(--sf-accent-strong), var(--sf-accent)); }
body.sf-tool .unit-btn.active { background-color: var(--sf-accent-strong); color: #fff; }
body.sf-tool .unit-toggle { background-color: var(--sf-surface-3); }
body.sf-tool .unit-toggle button { color: var(--sf-text-2); }
body.sf-tool .unit-toggle button.active { background-color: var(--sf-surface); color: var(--sf-accent); }
body.sf-tool .skeleton { background: linear-gradient(90deg, var(--sf-surface-2) 25%, var(--sf-surface-3) 50%, var(--sf-surface-2) 75%); background-size: 200% 100%; }
body.sf-tool hr { border-color: var(--sf-line); }
body.sf-tool :is(code, kbd):not([class]) { background-color: var(--sf-surface-3); color: var(--sf-text); }

/* the SEO article under every tool */
html body.sf-tool .article-section {
  max-width: 860px; margin: 48px auto 0; padding: 40px 44px; border-radius: 18px; color: var(--sf-text-2);
}
/* the guide card spans the same column as the tool above it; its text keeps a readable line length */
html body.sf-tool .article-section { box-sizing: border-box; width: 100%; max-width: 1512px; }
html body.sf-tool > .article-section { width: calc(100% - 48px); }
html body.sf-tool .article-section > * { max-width: 920px; }
html body.sf-tool .article-section :is(h2, h3, h4) { color: var(--sf-text); }
html body.sf-tool .article-section h2 { border-bottom-color: var(--sf-line); }
html body.sf-tool .article-section h3 { font-family: var(--sf-display); letter-spacing: -.015em; }
html body.sf-tool .article-section h4 { border-left-color: var(--sf-accent); }
html body.sf-tool .article-section :is(p, li) { color: var(--sf-text-2); }
html body.sf-tool .article-section strong { color: var(--sf-text); }
html body.sf-tool .article-section a { color: var(--sf-accent); }
html body.sf-tool .article-section code { background-color: var(--sf-surface-3); color: var(--sf-text); }
html body.sf-tool .article-section :is(th, td) { border-color: var(--sf-line); }
html body.sf-tool .article-section th { background-color: var(--sf-well); color: var(--sf-text); }

/* SweetAlert dialogs used by the converters */
body.sf-tool .swal2-popup { background: var(--sf-frost); color: var(--sf-text); border-radius: 18px; box-shadow: 0 0 0 1px var(--sf-glass-line), 0 30px 80px -20px rgba(0, 0, 0, .6); -webkit-backdrop-filter: var(--sf-glass-blur); backdrop-filter: var(--sf-glass-blur); }
body.sf-tool :is(.swal2-title, .swal2-html-container) { color: inherit; }
body.sf-tool .swal2-html-container { color: var(--sf-text-2); }
body.sf-tool .swal2-styled.swal2-confirm { background-color: var(--sf-accent-strong); border-radius: 10px; }
body.sf-tool .swal2-styled.swal2-cancel { background-color: var(--sf-btn-neutral); border-radius: 10px; }
body.sf-tool .swal2-timer-progress-bar { background: var(--sf-accent); }

@media (max-width: 760px) {
  body.sf-tool > :is(.flex, main, .container) { padding-left: 8px; padding-right: 8px; }
  /* the home page's phone gutter (.sf-wrap) */
  body.sf-tool > :is(.flex, main, .container, .mx-auto, .pt-16, .pt-20, .pt-24, .pt-28):not(.fixed, .bg-white) { padding-left: 20px; padding-right: 20px; }
  body.sf-tool > :is(.container, .mx-auto).bg-white:not(.fixed),
  html body.sf-tool[data-sf-page="pdftoaudio"] > .container { width: calc(100% - 40px); }
  body.sf-tool table { display: block; max-width: 100%; overflow-x: auto; }
  html body.sf-tool .article-section { margin: 32px 0 0; padding: 26px 20px; }
  html body.sf-tool > .article-section { width: calc(100% - 40px); margin: 32px auto 0; }
}

/* ---- 6. Individual tool pages -------------------------------------------- */
/* A few tools were built with their own page chrome; bring it in line. */

/* coloured title bars become plain page headings */
html body.sf-tool:is([data-sf-page="doctopdf"], [data-sf-page="rartopdf"], [data-sf-page="pdftoppt"]) > header {
  margin: 0; padding: 44px 24px 12px; border-radius: 0; background: none; box-shadow: none; color: var(--sf-text); text-align: center; animation: none;
}
html body.sf-tool:is([data-sf-page="doctopdf"], [data-sf-page="rartopdf"], [data-sf-page="pdftoppt"]) > header h1 { color: var(--sf-text); font-size: clamp(28px, 3.4vw, 40px); }
html body.sf-tool[data-sf-page="pdftoppt"] > header p { color: var(--sf-text-2); }
html body.sf-tool[data-sf-page="pdftoppt"] > header .header-icon { display: none; }
/* their closing note stays, as a quiet line above the site footer */
html body.sf-tool > footer { margin-top: 32px; padding: 0 24px; background: none; color: var(--sf-text-3); font-size: 13px; line-height: 1.6; text-align: center; }
html body.sf-tool > footer p:first-child:has(#currentYear) { display: none; }

/* the shell owns the theme switch */
body.sf-tool #toggleDarkMode { display: none; }

html body.sf-tool a.cta-button { color: #fff; }
html body.sf-tool .tab-btn.active { background-color: var(--sf-accent-strong); border-color: var(--sf-accent-strong); color: #fff; }
html[data-theme="dark"] body.sf-tool .call-to-action[style] { background-color: color-mix(in srgb, #ef4444 12%, transparent) !important; }

/* share links */
body.sf-tool .social-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
body.sf-tool .social-share a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--sf-glass-2);
  box-shadow: inset 0 0 0 1px var(--sf-line-2); color: var(--sf-text-2); font: 600 13px var(--sf-font); text-decoration: none; transition: color .15s, box-shadow .15s;
}
body.sf-tool .social-share a:hover { color: var(--sf-text); box-shadow: inset 0 0 0 1px var(--sf-text-3); }