/* Base reset — border-box everywhere so padding/border never add to an
   element's computed width (e.g. a grid item sized at 1fr) and overflow
   into a neighbor. Without this, any bordered/padded card in a tight
   multi-column grid can visually overlap the next one. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Brand tokens — see BRAND.md Section 2. Never hardcode hex values below this block. */
:root {
  --bg:        #FFFFFF;
  --bg-card:   #FFFFFF;
  --bg-nav:    #0D0D0D;
  --bg-soft:   #F7F7F5;

  --acc:       #F5A623;
  --acc-dk:    #D4890A;
  --acc-lt:    #FEF3DC;

  --tx-h:      #0D0D0D;
  --tx-b:      #3D3D3A;
  --tx-m:      #888884;

  --bdr:       #E8E8E5;
  --bdr-dk:    #D4D4CF;

  --sh-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md:     0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

  --s1: 8px;  --s2: 16px; --s3: 24px;
  --s4: 32px; --s5: 40px; --s6: 48px; --s7: 64px;

  --r:    10px;
  --r-sm: 6px;
  --r-lg: 16px;

  --nav-h: 58px;

  /* Category colours — section accents only. Never for buttons/headings/links. */
  --cat-pdf:   #EF4444;
  --cat-img:   #8B5CF6;
  --cat-aud:   #F59E0B;
  --cat-txt:   #10B981;
  --cat-vid:   #3B82F6;

  --grn:       #10B981;
  --grn-lt:    rgba(16,185,129,0.10);
}

html {
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--tx-b);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Nav — light, NOT the dark strip (dark is reserved for trust section + footer) */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bdr);
  height: var(--nav-h);
}

.site-nav__inner {
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--s3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  color: var(--tx-h);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}

.site-brand__badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background: var(--acc);
  color: var(--tx-h);
  font-weight: 700;
  font-size: 11px;
  border-radius: 4px;
  padding: 3px 7px;
  margin-left: 4px;
}

.site-nav__links {
  display: none;
  align-items: center;
  gap: var(--s4);
}

.site-nav__links a {
  color: var(--tx-m);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.site-nav__links a:hover {
  color: var(--tx-h);
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.site-btn-pro {
  display: inline-flex;
  align-items: center;
  background: var(--acc);
  color: var(--tx-h);
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--r-sm);
  padding: 8px 18px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.site-btn-pro:hover {
  background: var(--acc-dk);
  color: #fff;
}

/* Page shell */
.site-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.site-page-header {
  margin-bottom: 32px;
}

.site-page-header__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--tx-h);
}

.site-page-header__sub {
  font-size: 15px;
  color: var(--tx-m);
}

/* Counter strip */
.site-counter-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--sh-sm);
}

.site-counter {
  background: var(--bg-card);
  padding: 10px 16px;
  border: 1px solid var(--bdr);
}

.site-counter__val {
  font-size: 16px;
  font-weight: 700;
  color: var(--tx-h);
}

.site-counter__val--live {
  color: var(--grn);
}

.site-counter__label {
  font-size: 12px;
  color: var(--tx-m);
}

.site-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grn);
  display: inline-block;
  margin-right: 4px;
}

/* Search */
.site-search {
  margin-bottom: 24px;
}

.site-search__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 var(--s2);
  border-radius: var(--r);
  border: 1px solid var(--bdr-dk);
  box-shadow: var(--sh-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--tx-h);
  background: var(--bg-card);
  outline: none;
}

.site-search__input::placeholder {
  color: var(--tx-m);
}

.site-search__input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-lt), var(--sh-sm);
}

/* Tabs */
.site-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.site-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  padding: 6px 14px;
  border: 1px solid var(--bdr);
  border-radius: 99px;
  background: var(--bg-card);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.site-tab.active {
  color: var(--tx-h);
  font-weight: 600;
  border-color: var(--acc);
  background: var(--acc-lt);
}

.site-tab__count {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  color: var(--tx-m);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
}

.site-tab.active .site-tab__count {
  background: var(--acc-lt);
  color: var(--acc-dk);
}

.site-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-m);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

/* Tool grid / cards — signature element: category-coloured left border.
   Mobile-first: one column by default (a single tool card should never
   look half-empty next to a blank cell), widening at larger breakpoints. */
.site-tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: 64px;
}

.site-tool-card-wrap {
  display: flex;
}

.site-tool-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-left: 3px solid var(--tool-accent, var(--tx-m));
  border-radius: var(--r-lg);
  padding: var(--s2);
  box-shadow: var(--sh-sm);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
  text-decoration: none;
}

.site-tool-card:hover {
  border-color: var(--acc);
  border-left-color: var(--acc);
  box-shadow: var(--sh-md), 0 0 0 3px var(--acc-lt);
  transform: translateY(-2px);
}

.site-tool-card__icon {
  font-size: 20px;
  display: block;
  margin-bottom: 6px;
}

.site-tool-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-h);
  margin-bottom: 4px;
}

.site-tool-card__desc {
  font-size: 12px;
  color: var(--tx-m);
  line-height: 1.55;
  margin-bottom: 8px;
}

.site-tool-card__footer {
  padding-top: 6px;
  border-top: 1px solid var(--bdr);
}

.site-tool-card__free {
  font-size: 10px;
  font-weight: 600;
  color: #065F46;
  background: #ECFDF5;
  padding: 2px 7px;
  border-radius: 4px;
}

.site-empty {
  grid-column: 1 / -1;
  color: var(--tx-m);
  text-align: center;
  padding: 40px;
}

/* Trust strip */
.site-trust-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
  margin-bottom: 64px;
}

.site-trust-item {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--sh-sm);
  height: 100%;
}

.site-trust-item__text {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-h);
}

/* Pro strip */
.site-pro-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  text-align: center;
  background: var(--bg-nav);
  border-radius: var(--r-lg);
  padding: 24px 32px;
}

.site-pro-strip__right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-pro-strip__left h2 {
  font-size: 18px;
  font-weight: 800;
  color: #F5F5F0;
}

.site-pro-strip__left p {
  font-size: 14px;
  color: #A8A8A2;
  max-width: 480px;
  margin: 0 auto;
}

.site-pro-strip__price {
  font-size: 18px;
  font-weight: 800;
  color: var(--acc);
  margin-bottom: 4px;
}

.site-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--acc);
  color: var(--tx-h);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r-sm);
  padding: 13px 24px;
  border: none;
  letter-spacing: -0.2px;
  text-decoration: none;
  cursor: pointer;
}

.site-btn-primary:hover {
  background: var(--acc-dk);
  color: #fff;
}

.site-btn-primary:disabled {
  background: var(--bdr-dk);
  color: var(--tx-m);
  cursor: not-allowed;
}

/* Footer — same light treatment as the nav, not the dark strip.
   Mobile: centered, stacked (brand, then tagline, then links row).
   Desktop (768px+): a single row, brand/tagline/links spread apart. */
.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--bdr);
  padding: var(--s5) var(--s3);
  margin-top: 64px;
}

.site-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s2);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
}

.site-footer__links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--tx-h);
}

.site-footer__note {
  font-size: 12px;
  color: var(--tx-m);
}

/* Coming soon pages */
.site-coming-soon {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding-top: 96px;
  padding-bottom: 96px;
}

.site-coming-soon h1 {
  color: var(--tx-h);
  font-weight: 800;
  margin-bottom: 16px;
}

.site-coming-soon p {
  color: var(--tx-m);
  margin-bottom: 24px;
}

/* ============================================================
   Tool page — shared upload/convert/download experience.
   Used by every tool in pdf/, and by future categories that
   follow the same one-file-in, one-file-out pattern.
   ============================================================ */

.tool-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s5) var(--s3) var(--s6);
}

/* Wider variant for a tool whose card content needs more horizontal room
   than the standard file-list layout — currently only Organize PDF's page
   thumbnail grid, which reads far better with more columns visible at
   once. Still centered and still shrinks to the same breakpoints as every
   other tool page; only the upper max-width ceiling changes. */
.tool-page--wide {
  max-width: 1400px;
}

/* Centered row used for the submit/download button and the reset link —
   framework-independent so it centers regardless of whether Bootstrap
   loaded. */
.tool-action-row {
  text-align: center;
  margin-top: var(--s3);
}

.tool-hidden {
  display: none !important;
}

.tool-page__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  text-decoration: none;
  margin-bottom: var(--s3);
}

.tool-page__back:hover {
  color: var(--tx-h);
}

.tool-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tool-accent, var(--tx-m));
  margin-bottom: var(--s1);
}

.tool-page__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tool-accent, var(--tx-m));
  display: inline-block;
}

.tool-page__title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--tx-h);
  margin-bottom: 8px;
}

.tool-page__sub {
  font-size: 15px;
  color: var(--tx-m);
  margin-bottom: var(--s4);
}

/* Card shell that hosts whichever state (idle / selected / processing /
   success / error) is currently showing. One border, one shadow, one
   radius — only the contents inside change between states. */
.tool-card-shell {
  background: var(--bg-card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--s4);
  margin-bottom: var(--s3);
}

/* Dropzone — idle state */
.dropzone {
  display: block;
  border: 2px dashed var(--bdr-dk);
  border-radius: var(--r);
  padding: var(--s5) var(--s3);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--acc);
  background: var(--acc-lt);
}

.dropzone.is-dragover {
  border-color: var(--acc);
  background: var(--acc-lt);
}

.dropzone__icon {
  font-size: 32px;
  display: block;
  margin-bottom: var(--s2);
  line-height: 1;
}

.dropzone__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx-h);
  margin-bottom: 4px;
}

.dropzone__hint {
  font-size: 13px;
  color: var(--tx-m);
}

.dropzone__hint .dropzone__browse {
  color: var(--acc-dk);
  font-weight: 600;
  text-decoration: underline;
}

.dropzone input[type="file"] {
  /* Visually hidden but still focusable/clickable for accessibility —
     never display:none, which breaks keyboard and screen-reader use. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Selected-file state — replaces the dropzone once file(s) are chosen.
   One or many rows stacked with a gap; a single-file tool just renders
   one row. */
.tool-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.tool-file-list__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 4px var(--s1) 0;
}

.tool-file-list__summary {
  font-size: 12px;
  color: var(--tx-m);
}

.tool-file-list__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--s1);
}

.tool-file-picked {
  display: flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: var(--s2);
}

.tool-file-picked__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--tool-accent-lt, var(--acc-lt));
  color: var(--tool-accent, var(--acc-dk));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.tool-file-picked__info {
  flex: 1;
  min-width: 0;
}

.tool-file-picked__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-file-picked__size {
  font-size: 12px;
  color: var(--tx-m);
}

.tool-file-picked__estimate {
  font-size: 12px;
  color: #065F46;
  font-weight: 600;
}

.tool-file-picked__estimate:empty {
  display: none;
}

.tool-file-picked__remove {
  background: none;
  border: none;
  color: var(--tx-m);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.tool-file-picked__remove:hover {
  color: var(--tx-h);
  background: var(--bg-soft);
}

/* Reorderable card-grid variant (opt-in via [data-file-list][data-reorderable]
   on the tool's dropzone/form — currently only Merge PDF, where upload
   order is the merge order and worth showing/dragging explicitly).
   Falls back to the plain stacked-row list above for every other tool,
   where order has no effect on the result. */
.tool-file-list[data-reorderable] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s2);
}

/* The list footer (file count + add more/clear all) is appended as a
   grid child alongside the cards, but must always read as its own
   full-width line below them, not squeezed into leftover column space. */
.tool-file-list[data-reorderable] .tool-file-list__footer {
  grid-column: 1 / -1;
}

.tool-file-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: var(--s2);
  cursor: grab;
  background: var(--bg);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tool-file-card:active {
  cursor: grabbing;
}

.tool-file-card.is-dragging {
  opacity: 0.4;
}

.tool-file-card.is-drop-target {
  border-color: var(--tool-accent, var(--acc-dk));
  box-shadow: 0 0 0 2px var(--tool-accent-lt, var(--acc-lt));
}

.tool-file-card__order {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--tool-accent, var(--acc-dk));
  background: var(--tool-accent-lt, var(--acc-lt));
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.tool-file-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
}

.tool-file-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--tx-h);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-file-card__size {
  font-size: 11px;
  color: var(--tx-m);
}

.tool-file-card__remove {
  background: none;
  border: none;
  color: var(--tx-m);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-sm);
}

.tool-file-card__remove:hover {
  color: var(--tx-h);
  background: var(--bg-soft);
}

/* Organize PDF's page grid — same drag-to-reorder card mechanics as
   .tool-file-card above, but each card is a page thumbnail (with a rotate
   preview and a delete/restore toggle) rather than a picked file. */
.page-organizer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.page-organizer__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-m);
}

.page-organizer__toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.site-btn-primary--compact {
  padding: 9px 18px;
  font-size: 13px;
}

.page-organizer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.page-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: var(--s2);
  cursor: grab;
  background: var(--bg);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.page-card:active {
  cursor: grabbing;
}

.page-card.is-dragging {
  opacity: 0.4;
}

.page-card.is-drop-target {
  border-color: var(--tool-accent, var(--acc-dk));
  box-shadow: 0 0 0 2px var(--tool-accent-lt, var(--acc-lt));
}

.page-card.is-deleted {
  opacity: 0.35;
  cursor: default;
}

.page-card__order {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--tool-accent, var(--acc-dk));
  background: var(--tool-accent-lt, var(--acc-lt));
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.page-card__thumb-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-soft);
  border-radius: var(--r-sm);
}

.page-card__thumb {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.15s ease;
}

.page-card__actions {
  display: flex;
  gap: 4px;
}

.page-card__action {
  background: none;
  border: none;
  color: var(--tx-m);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}

.page-card__action:hover {
  color: var(--tx-h);
  background: var(--bg-soft);
}

/* Processing state — brief inline indicator for the synchronous
   single-file form only (see .batch-progress below for the richer
   batch polling page display). */
.tool-processing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2) 0;
  margin-top: var(--s3);
}

.tool-spinner {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--bdr);
  border-top-color: var(--acc);
  animation: tool-spin 0.7s linear infinite;
}

@keyframes tool-spin {
  to { transform: rotate(360deg); }
}

.tool-processing__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--tx-b);
}

/* Batch progress — the richer display on the async batch polling page
   (word_to_pdf_batch_pending.html), distinct from .tool-processing's
   brief inline single-file indicator above. */
.batch-progress {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: var(--s3) 0;
}

.batch-progress__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx-m);
}

.batch-progress__count {
  font-size: 32px;
  font-weight: 800;
  color: var(--tx-h);
  letter-spacing: -0.5px;
  margin: 4px 0 var(--s3);
  font-variant-numeric: tabular-nums;
}

.tool-progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 99px;
  background: var(--bdr);
  overflow: hidden;
}

.tool-progress-bar__fill {
  height: 100%;
  background: var(--acc);
  border-radius: 99px;
  transition: width 0.4s ease;
}

.batch-progress__caption {
  font-size: 13px;
  color: var(--tx-m);
  margin-top: var(--s3);
}

/* Success state */
.tool-result {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) 0;
}

.tool-result__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grn-lt);
  color: #065F46;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.tool-result__text {
  flex: 1;
}

.tool-result__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx-h);
}

.tool-result__sub {
  font-size: 12px;
  color: var(--tx-m);
}

.tool-reset-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx-m);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}

.tool-reset-link:hover {
  color: var(--tx-h);
}

/* Compress PDF's live size estimate — extra_fields_template, shown between
   the dropzone and submit button once file(s) are picked. Compression
   itself runs at one fixed strength with no user-facing control, so this
   is the only thing rendered here. */
.compress-options {
  margin-top: var(--s3);
}

.compress-options__estimate {
  margin-top: var(--s3);
  padding: var(--s2);
  background: var(--grn-lt);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--r-sm);
}

.compress-options__estimate-label {
  display: block;
  font-size: 12px;
  color: var(--tx-m);
  margin-bottom: 4px;
}

.compress-options__estimate-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 18px;
}

.compress-options__estimate-value strong {
  color: #065F46;
}

.compress-options__estimate-original {
  font-size: 13px;
  color: var(--tx-m);
  text-decoration: line-through;
}

.compress-options__estimate-percent {
  font-size: 13px;
  font-weight: 600;
  color: #065F46;
}

/* Star rating — shown under every tool's result, shared across all
   categories via _upload_tool.html so a new tool gets it for free. */
.tool-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding-top: var(--s4);
  margin-top: var(--s4);
  border-top: 1px solid var(--bdr);
  text-align: center;
}

.tool-rating__prompt,
.tool-rating__thanks {
  font-size: 15px;
  font-weight: 600;
  color: var(--tx-h);
}

.tool-rating__thanks {
  color: var(--acc-dk);
}

.tool-rating__stars {
  display: flex;
  gap: 8px;
}

.tool-rating__star {
  background: none;
  border: none;
  padding: 4px;
  font-size: 40px;
  line-height: 1;
  color: var(--bdr-dk);
  cursor: pointer;
  transition: color 0.12s, transform 0.12s;
}

.tool-rating__star:hover,
.tool-rating__star:focus-visible {
  transform: scale(1.15);
}

.tool-rating__stars:hover .tool-rating__star.is-hover,
.tool-rating__star.is-selected {
  color: var(--acc);
}

.tool-rating__star:disabled {
  cursor: default;
}

/* Error state */
.tool-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s2);
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  border-radius: var(--r);
  margin-bottom: var(--s3);
}

.tool-error__icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.4;
}

.tool-error__text {
  font-size: 14px;
  color: #7F1D1D;
  line-height: 1.5;
}

/* Info row under the card — sets expectations before upload */
.tool-page__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  font-size: 12px;
  color: var(--tx-m);
}

.tool-page__meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ============================================================
   Homepage / nav / footer — responsive breakpoints
   (BRAND.md: 375 / 480 / 768 / 1024)
   ============================================================ */

@media (min-width: 480px) {
  .site-tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .site-nav__links {
    display: flex;
  }

  .site-tool-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-pro-strip {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .site-pro-strip__left p {
    margin: 0;
  }

  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .site-footer__links {
    justify-content: flex-end;
  }

  .site-pro-strip__right {
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  .site-tool-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .site-page {
    padding: var(--s3) var(--s2) var(--s5);
  }

  .site-page-header__title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .site-counter-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-tool-grid {
    gap: var(--s2);
  }

  .site-page-header__title {
    font-size: 20px;
  }
}

@media (max-width: 375px) {
  .site-counter-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-page {
    padding: var(--s3) var(--s2) var(--s4);
  }
}

/* ============================================================
   Tool page — responsive breakpoints (BRAND.md: 375 / 480 / 768 / 1024)
   ============================================================ */

@media (max-width: 768px) {
  .tool-page {
    padding: var(--s4) var(--s2) var(--s5);
  }

  .tool-page__title {
    font-size: 26px;
  }

  .tool-card-shell {
    padding: var(--s3);
  }
}

@media (max-width: 480px) {
  .tool-page {
    padding: var(--s3) var(--s2) var(--s4);
  }

  .tool-page__title {
    font-size: 22px;
  }

  .tool-page__sub {
    font-size: 14px;
  }

  .tool-card-shell {
    padding: var(--s2);
  }

  .dropzone {
    padding: var(--s4) var(--s2);
  }

  .dropzone__icon {
    font-size: 28px;
  }

  .site-btn-primary {
    width: 100%;
  }

  .tool-file-picked {
    flex-wrap: wrap;
  }

  .tool-file-picked__remove {
    margin-left: auto;
  }

  .tool-file-list__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }

  .tool-file-list[data-reorderable] {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }

  .tool-page__meta {
    flex-direction: column;
    align-items: center;
    gap: var(--s1);
  }
}

@media (max-width: 375px) {
  .tool-page {
    padding: var(--s3) var(--s2) var(--s3);
  }

  .tool-page__title {
    font-size: 20px;
  }

  .dropzone {
    padding: var(--s3) var(--s2);
  }

  .dropzone__hint {
    font-size: 12px;
  }
}