:root {
  --primary: #E87B35;
  --primary-hover: #D66B28;
  --primary-light: #FFF4ED;
  --primary-ink: #C45F1F;
  --primary-dim: rgba(232, 123, 53, 0.12);
  --primary-soft: #F5944D;
  --success: #16A34A;
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --tinted: #F5F5F5;
  --line: rgba(26, 26, 26, 0.10);
  --line-strong: rgba(26, 26, 26, 0.16);
  --text: #1A1A1A;
  --muted: #6B6B6B;
  --faint: #9A9A9A;
  --radius: 14px;
  --font-display: 'DM Sans', -apple-system, sans-serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--primary); color: #fff; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.15; color: var(--text); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--primary-ink); color: var(--primary-ink); }

/* Top nav */
.blog-nav { border-bottom: 1px solid var(--line); background: var(--surface); }
.blog-nav .container { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.logo-img { width: 28px; height: 28px; border-radius: 7px; }
.blog-nav-links { display: flex; align-items: center; gap: 26px; }
.blog-nav-links a { font-size: 14.5px; color: var(--muted); font-weight: 500; }
.blog-nav-links a:hover { color: var(--text); }
.blog-nav-links .btn { padding: 10px 18px; font-size: 14px; color: #fff; }

/* Breadcrumb */
.crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--faint); padding: 26px 0 0; }
.crumbs a { color: var(--faint); }
.crumbs a:hover { color: var(--primary-ink); }
.crumbs span { color: var(--muted); }

/* Article */
.post { max-width: 760px; margin: 0 auto; padding: 26px 24px 70px; }
.post-meta { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-ink); margin: 18px 0 14px; display: flex; gap: 16px; flex-wrap: wrap; }
.post h1 { font-size: clamp(30px, 4.5vw, 44px); font-weight: 800; margin-bottom: 16px; }
.post .lede { font-size: 18.5px; color: var(--muted); margin-bottom: 34px; line-height: 1.55; }
.post-body h2 { font-size: clamp(23px, 3vw, 29px); font-weight: 700; margin: 44px 0 14px; }
.post-body h3 { font-size: 19px; font-weight: 700; margin: 30px 0 10px; }
.post-body p { margin: 0 0 18px; color: #2A2A2A; }
.post-body ul, .post-body ol { margin: 0 0 18px 22px; color: #2A2A2A; }
.post-body li { margin-bottom: 8px; }
.post-body a { color: var(--primary-ink); font-weight: 500; }
.post-body a:hover { text-decoration: underline; }
.post-body strong { font-weight: 700; color: var(--text); }
.post-body blockquote { border-left: 3px solid var(--primary); padding: 4px 0 4px 18px; margin: 0 0 18px; color: var(--muted); }
.post-body hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }

.post-body figure { margin: 28px 0; }
.post-body figure.zoomable a { display: block; position: relative; cursor: zoom-in; }
.post-body figure.zoomable img { transition: border-color 0.15s ease; }
.post-body figure.zoomable a:hover img { border-color: var(--primary-soft); }
.zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(26, 26, 26, 0.82);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 7px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.post-body figure.zoomable a:hover .zoom-hint,
.post-body figure.zoomable a:focus-visible .zoom-hint { opacity: 1; }

/* Screenshot slider */
.slider { position: relative; margin: 30px 0; }
.slider:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; border-radius: var(--radius); }
.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 0;
  border-radius: var(--radius);
}
.slider-track::-webkit-scrollbar { display: none; }
.slider .slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  padding: 0 1px;
}
.slider .slide img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: block;
  background: var(--tinted);
}
.slider .slide figcaption {
  font-size: 13.5px;
  color: var(--faint);
  margin-top: 10px;
  text-align: center;
  padding: 0 8px;
}
.slider-btn {
  position: absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
  transition: opacity 0.15s ease, background 0.15s ease;
}
.slider-btn:hover:not(:disabled) { background: #fff; border-color: var(--primary-ink); color: var(--primary-ink); }
.slider-btn:disabled { opacity: 0.28; cursor: default; }
.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--line-strong);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.slider-dot.is-active { background: var(--primary); transform: scale(1.25); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 15, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.post-body figure img { border: 1px solid var(--line); border-radius: var(--radius); display: block; background: var(--tinted); min-height: 60px; }
.post-body figcaption { font-size: 13.5px; color: var(--faint); margin-top: 10px; text-align: center; }

.post-body table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14.5px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table-wrap { overflow-x: auto; margin: 26px 0; }
.table-wrap table { margin: 0; }
.post-body th { text-align: left; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--tinted); padding: 12px 14px; border-bottom: 1px solid var(--line-strong); }
.post-body td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.post-body tr:last-child td { border-bottom: none; }

/* CTA blocks */
.post-cta { background: var(--primary-light); border: 1px solid rgba(232, 123, 53, 0.25); border-radius: var(--radius); padding: 28px 28px 26px; margin: 34px 0; }
.post-cta h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.post-cta p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.post-cta .btn { color: #fff; }
.post-cta .btn.btn-ghost { color: var(--text); }

/* FAQ */
.post-body .faq-q { margin-top: 26px; }

/* Blog index */
.blog-hero { text-align: center; padding: 64px 24px 30px; max-width: 700px; margin: 0 auto; }
.blog-hero .eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-ink); }
.blog-hero h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 800; margin: 12px 0 14px; }
.blog-hero p { color: var(--muted); font-size: 17px; }
.post-list { max-width: 760px; margin: 26px auto 80px; padding: 0 24px; display: flex; flex-direction: column; gap: 18px; }
.post-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; transition: border-color 0.15s ease, transform 0.15s ease; }
.post-card:hover { border-color: var(--primary-soft); transform: translateY(-2px); }
.post-card .date { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.post-card h2 { font-size: 21px; font-weight: 700; margin: 8px 0 8px; }
.post-card p { color: var(--muted); font-size: 15px; margin: 0; }
.post-card .more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--primary-ink); }

/* Back link */
.all-posts-link { display: inline-block; margin-top: 40px; font-weight: 600; font-size: 14.5px; color: var(--primary-ink); }
.all-posts-link:hover { text-decoration: underline; }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 56px 0 36px; background: var(--tinted); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.foot-grid h4 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; font-weight: 500; }
.foot-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot-grid a { font-size: 14px; color: var(--muted); }
.foot-grid a:hover { color: var(--text); }
.foot-brand p { font-size: 13.5px; color: var(--muted); max-width: 280px; margin-top: 14px; }
.foot-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: center; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }

@media (max-width: 720px) {
  .blog-nav-links a:not(.btn) { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .post { padding-top: 18px; }
}

/* Free tool landing pages (viewrankai.com/tools).
   Loaded after blog.css, which supplies the tokens, buttons and footer. */

[hidden] { display: none !important; }

/* ---------- Header ---------- */
.tool-nav { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 40; }
.tool-nav .container { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }
.tool-brand { display: inline-flex; align-items: center; gap: 11px; }
.tool-brand .logo-img { width: 32px; height: 32px; border-radius: 8px; }
.tool-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.tool-brand-text strong { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.tool-brand-text span { font-size: 12.5px; color: var(--primary-ink); font-weight: 600; }
.tool-nav-links { display: flex; align-items: center; gap: 24px; }
.tool-nav-links a { font-size: 14.5px; color: var(--muted); font-weight: 500; }
.tool-nav-links a:hover { color: var(--text); }
.tool-nav-links .btn { padding: 10px 18px; font-size: 14px; color: #fff; }

/* The tools menu, opening on hover for a mouse and on focus for a keyboard.
   Copied from the menu on the landing page on purpose: somebody who has seen
   one of our menus should recognise the other. */
.nav-drop { position: relative; }
.nav-drop > button {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-drop > button:hover, .nav-drop:hover > button, .nav-drop:focus-within > button { color: var(--text); }
.nav-drop > button svg { width: 11px; height: 11px; transition: transform .18s; }
.nav-drop:hover > button svg, .nav-drop:focus-within > button svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 300px; padding: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(26, 26, 26, .14);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 60;
}
/* A gap between the button and the panel would drop the hover, so bridge it. */
.nav-drop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a { display: block; padding: 11px 13px; border-radius: 11px; color: var(--text); font-size: 14.5px; }
.nav-drop-menu a:hover { background: var(--primary-light); color: var(--text); }
.nav-drop-menu strong { display: block; font-size: 14.5px; font-weight: 600; }
.nav-drop-menu span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.nav-drop-all { margin: 6px 4px 2px; padding-top: 10px; border-top: 1px solid var(--line); }
.nav-drop-all a { font-size: 13.5px; font-weight: 600; color: var(--primary-ink); padding: 8px 9px; }

/* ---------- Hero ---------- */
.tool-hero {
  background:
    radial-gradient(900px 380px at 50% -120px, rgba(232, 123, 53, 0.13), transparent 70%),
    linear-gradient(180deg, var(--primary-light) 0%, var(--bg) 62%);
  border-bottom: 1px solid var(--line);
  padding: 56px 24px 60px;
}
.tool-hero-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.tool-hero h1 {
  font-size: 46px; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 16px; line-height: 1.08;
}
.tool-sub { font-size: 19px; color: var(--muted); line-height: 1.55; max-width: 620px; margin: 0 auto 30px; }
.tool-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.tool-badge {
  font-size: 12.5px; font-weight: 600; color: var(--primary-ink);
  background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(232, 123, 53, 0.3);
  border-radius: 999px; padding: 5px 13px;
}

/* ---------- The widget ---------- */
.tool-widget {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 18px; padding: 24px; text-align: left;
  box-shadow: 0 18px 46px -22px rgba(26, 26, 26, 0.35), 0 2px 6px rgba(26, 26, 26, 0.05);
}
.tool-form { display: flex; gap: 10px; }
.tool-form input[type="url"], .tool-form input[type="text"] {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 16px;
  padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--bg); color: var(--text);
}
.tool-form input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-dim); }
.tool-form input::placeholder { color: var(--faint); }
.tool-form .btn { padding: 16px 30px; font-size: 15.5px; border-radius: 12px; }
.tool-form .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.tool-hint { font-size: 13px; color: var(--faint); margin-top: 12px; text-align: center; }

.tool-status { margin-top: 18px; font-size: 15px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 10px; }
.tool-spinner {
  width: 16px; height: 16px; border: 2px solid var(--primary-dim);
  border-top-color: var(--primary); border-radius: 50%; animation: tool-spin 0.7s linear infinite;
}
@keyframes tool-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tool-spinner { animation-duration: 2s; } }

.tool-error {
  margin-top: 18px; padding: 14px 16px; border-radius: 10px; font-size: 14.5px;
  background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
}
.tool-error a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Shown to somebody who has used their allowance, which makes them the most
   interested reader on the page. Neutral rather than alarmed, because running
   out of a free allowance is not an error. */
.tool-error-upsell {
  display: block; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #FECACA; color: var(--text); font-size: 14px; line-height: 1.6;
}
.tool-error-upsell a { color: var(--primary-ink); }

/* A finished transcript is a document, so it is laid out below the hero with
   the width of the page rather than the width of the form. Reading one through
   the 800px column the form sits in was reading through a keyhole. */
.tool-result { display: block; scroll-margin-top: 86px; }
.tool-result[hidden] { display: none; }
.tool-result-wrap { max-width: 1180px; margin: 0 auto; padding: 38px 24px 8px; text-align: left; }
.tool-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.tool-tab {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; padding: 8px 15px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: transparent;
  color: var(--muted); cursor: pointer;
}
.tool-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tool-controls select {
  font-family: var(--font-body); font-size: 13.5px; padding: 8px 12px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
}
.tool-spacer { flex: 1; }
.tool-mini {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600; padding: 8px 15px;
  border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); cursor: pointer;
}
.tool-mini:hover { border-color: var(--primary-ink); color: var(--primary-ink); }
.tool-output {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; max-height: 440px; overflow-y: auto; font-size: 15px; line-height: 1.7;
}
.tool-output p { margin: 0 0 14px; }
.tool-output p:last-child { margin-bottom: 0; }
.tool-output .stamp { font-family: var(--font-mono); font-size: 12.5px; color: var(--primary-ink); display: inline-block; min-width: 58px; }
.tool-line { display: flex; gap: 12px; margin-bottom: 9px; align-items: baseline; }
/* An upsell that appears under a finished transcript. */
.tool-upsell {
  margin-top: 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: var(--primary-light); border: 1px solid rgba(232, 123, 53, 0.28);
  border-radius: 12px; padding: 15px 18px;
}
.tool-upsell p { margin: 0; font-size: 14px; color: var(--text); flex: 1; min-width: 240px; }
.tool-upsell .btn { padding: 10px 18px; font-size: 14px; }

/* A visible keyboard focus ring, instantly, on anything interactive without a
   ring of its own. :where keeps it zero-specificity so control rings win. */
:where(a, button, select, summary, input, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Page sections ---------- */
.tool-main { max-width: 900px; margin: 0 auto; padding: 8px 24px 40px; }
.tool-main h2 {
  font-size: 29px; font-weight: 800; letter-spacing: -0.025em;
  margin: 60px 0 14px; padding-top: 30px; border-top: 1px solid var(--line);
}
.tool-main h2 + p { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 0 30px; }
.tool-main h3 { font-size: 19px; font-weight: 700; margin: 30px 0 10px; }
.tool-main p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.72; color: #333; }
.tool-main ul, .tool-main ol { margin: 0 0 18px; padding-left: 22px; }
.tool-main li { margin-bottom: 8px; font-size: 16.5px; line-height: 1.7; color: #333; }
.tool-main strong { font-weight: 700; color: var(--text); }
.tool-main a:not(.btn) { color: var(--primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tool-main code { font-family: var(--font-mono); font-size: 0.88em; background: var(--tinted); padding: 2px 6px; border-radius: 5px; }

/* Prose keeps a readable measure and sits on the page's left edge. */
.tool-main > p, .tool-main > ul:not(.steps), .tool-main > ol:not(.steps) { max-width: 720px; }

/* Steps: open numbered columns rather than boxed cards. Each step starts on a
   short accent rule and the number sits in line with its heading. */
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; padding: 0; margin: 8px 0 20px; }
.step { border-top: 2px solid var(--primary); padding: 18px 0 0; margin: 0; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; background: var(--primary); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; flex: 0 0 auto;
}
.step h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; margin: 0 0 9px; }
.step p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.6; }

/* Features: hairline rows in two columns rather than a wall of same-size
   cards. A small accent square marks each heading. */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin: 8px 0 24px; }
.feature { border-top: 1px solid var(--line); padding: 16px 0 18px; }
.feature h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 7px; }
.feature h3::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); margin-right: 9px; vertical-align: 1px; }
.feature p { font-size: 14.8px; color: var(--muted); margin: 0; line-height: 1.6; }

/* The selling block */
.tool-band {
  background: linear-gradient(135deg, var(--primary-light), #FFFBF8);
  border: 1px solid rgba(232, 123, 53, 0.28);
  border-radius: 18px; padding: 38px 34px; margin: 30px 0 10px; text-align: center;
}
.tool-band-inner { max-width: 620px; margin: 0 auto; }
.tool-band h3 { font-size: 24px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.02em; }
.tool-band p { font-size: 16.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.65; }
.tool-band p:last-of-type { margin-bottom: 22px; }
.tool-band .btn { color: #fff; }

/* Comparison table */
.tool-main .table-wrap { overflow-x: auto; margin: 0 0 22px; }
.tool-main table { width: 100%; border-collapse: collapse; font-size: 15.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tool-main th, .tool-main td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.tool-main th { background: var(--tinted); font-family: var(--font-display); font-weight: 700; font-size: 14.5px; }
.tool-main tr:last-child td { border-bottom: none; }

/* FAQ accordion */
.faq-list { max-width: 760px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.faq-item summary {
  cursor: pointer; padding: 16px 46px 16px 20px; font-family: var(--font-display);
  font-weight: 600; font-size: 16.5px; position: relative; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 21px; color: var(--primary-ink); font-weight: 600; line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-answer { padding: 16px 20px 4px; }
.faq-answer p { font-size: 15.5px; margin-bottom: 12px; }

.section-head { scroll-margin-top: 90px; }

/* ---------- Tools hub ---------- */
.tools-hub { max-width: 1000px; margin: 0 auto; padding: 54px 24px 70px; }
.tools-hub-head { text-align: center; margin-bottom: 44px; }
.tools-hub-head h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 14px; }
.tools-hub-head p { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0 auto; }
.tools-group { margin-bottom: 40px; }
.tools-group h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.tools-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tools-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; transition: border-color 0.15s ease, transform 0.15s ease; }
.tools-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.tools-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.tools-card p { font-size: 14.5px; color: var(--muted); margin: 0 0 14px; }
.tools-card .more { font-size: 14px; font-weight: 600; color: var(--primary-ink); }

@media (max-width: 860px) {
  .tool-nav-links a:not(.btn), .tool-nav-links .nav-drop { display: none; }
}
/* The narrowest phones: the brand and the button cannot share 320px at full
   size, so both give a little and the row may wrap instead of overflowing. */
@media (max-width: 420px) {
  .tool-nav .container { flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 8px; padding-bottom: 8px; row-gap: 2px; }
  .tool-nav-links .btn { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  .tool-brand-text span { font-size: 11px; }
}
@media (max-width: 700px) {
  .tool-hero { padding: 38px 18px 44px; }
  .tool-hero h1 { font-size: 33px; }
  .tool-sub { font-size: 17px; margin-bottom: 24px; }
  .tool-widget { padding: 18px; border-radius: 15px; }
  .tool-form { flex-direction: column; }
  .tool-main h2 { font-size: 25px; margin-top: 44px; }
  .feature-grid { grid-template-columns: 1fr; gap: 0; }
  .tool-main p, .tool-main li { font-size: 16px; }
  .tool-band { padding: 28px 20px; }
  .tools-hub-head h1 { font-size: 32px; }
}

/* ── Transcript reader ────────────────────────────────────────────────────
   Shared by the widget on a tool landing page and by the per-video pages at
   /tools/youtube-transcript/{id}, which link this file. Change it once here. */

.tp-cols { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; }
.tp-aside { display: flex; flex-direction: column; gap: 13px; }
.tp-player { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; }
.tp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-actions button {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 10px 15px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tp-actions button:hover { border-color: var(--primary); color: var(--primary-ink); }
.tp-actions button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.tp-actions button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.tp-actions button[aria-pressed="true"] { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-light); }

.tp-aside select {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 10px 13px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
}

.tp-menu { position: relative; }
.tp-menu-list {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 205px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(26, 26, 26, .13); padding: 6px;
}
.tp-menu-list button { display: block; width: 100%; text-align: left; border: 0; padding: 10px 12px; border-radius: 8px; font-weight: 500; background: transparent; }
.tp-menu-list button:hover { background: var(--primary-light); color: var(--primary-ink); }

.tp-search { display: flex; gap: 10px; align-items: center; }
.tp-search input {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: 14.5px;
  padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
}
.tp-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.tp-count { font-size: 13px; color: var(--muted); white-space: nowrap; }

.tp-body { min-width: 0; }
.tp-line { display: flex; gap: 14px; margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; cursor: pointer; line-height: 1.72; transition: background .12s; }
.tp-line:hover { background: var(--tinted); }
.tp-line.is-active { background: var(--primary-light); }
.tp-line[hidden] { display: none; }
.tp-time { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--primary-ink); padding-top: 5px; font-variant-numeric: tabular-nums; }
.tp-hide-times .tp-time { display: none; }
.tp-text mark { background: #FFE9A8; padding: 0 2px; border-radius: 3px; }
.tp-empty { padding: 24px; text-align: center; color: var(--muted); }

.tp-note { margin-top: 34px; padding: 22px 24px; border-radius: var(--radius); background: var(--tinted); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.7; }
.tp-note p { margin: 0 0 12px; }
.tp-note p:last-child { margin: 0; }
.tp-note a { color: var(--primary-ink); font-weight: 600; }

.tp-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--text); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; z-index: 70; }
.tp-toast[hidden] { display: none; }

/* What a finished transcript looks like: a head of its own, a roomy two column
   layout, and a player that stays with you as you read. The page at
   /tools/youtube-transcript/{id} and the tool that just made the transcript
   both wear this, so a transcript looks the same wherever somebody meets it. */
.tp-head { margin-bottom: 26px; }
.tp-head h1, .tp-head h2 {
  font-family: var(--font-display); font-size: clamp(24px, 20px + 1.5vw, 34px);
  line-height: 1.22; letter-spacing: -0.02em; margin: 0 0 12px;
}
.tp-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; color: var(--muted); }
.tp-meta a { color: var(--primary-ink); font-weight: 600; }
.tp-meta .dot { opacity: .4; }
.tp-cols.tp-roomy { gap: 32px; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.tp-roomy .tp-aside { position: sticky; top: 92px; }

/* TikTok and Instagram. Two differences from YouTube, and both come from the
   platforms rather than from us: their videos stand up rather than lie down,
   and their embeds take no seek instruction from the page around them, so a
   line is something you read here, not something you press. */
/* Each platform's embed carries its own header and buttons, and Instagram's
   are taller, so the box is sized to what each one actually needs rather than
   cropping the video. */
.tp-player.is-portrait { padding-top: 0; height: 600px; background: transparent; }
.tp-player.is-portrait iframe { position: static; height: 100%; border-radius: var(--radius); }
[data-platform="instagram"] .tp-player.is-portrait { height: 640px; }
.tp-cols.is-portrait, .tp-cols.tp-roomy.is-portrait { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }

.tp-transcript.tp-static .tp-line { cursor: default; }
.tp-transcript.tp-static .tp-line:hover { background: transparent; }

@media (max-width: 900px) {
  .tp-cols, .tp-cols.tp-roomy,
  .tp-cols.is-portrait, .tp-cols.tp-roomy.is-portrait { grid-template-columns: 1fr; }
  .tp-roomy .tp-aside { position: static; }
  .tool-result-wrap { padding: 26px 18px 8px; }
  .tp-player.is-portrait,
  [data-platform="instagram"] .tp-player.is-portrait { height: 620px; }
  .tp-player.is-portrait iframe { display: block; margin: 0 auto; max-width: 325px; }
}

/* ── One-click actions on a transcript ─────────────────────────────────── */

.tp-tools { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tp-tool-set { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tp-tool-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.tp-tool-set button {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tp-tool-set button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-light); }
.tp-tool-set button:disabled { opacity: .5; cursor: default; }
.tp-tool-set button[aria-pressed="true"] { border-color: var(--primary); color: var(--primary-ink); background: var(--primary-light); }
.tp-tool-set button.is-working { border-color: var(--primary); color: var(--primary-ink); }
.tp-tool-note { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }

.tp-answer { margin-bottom: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.tp-answer[hidden] { display: none; }
.tp-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--primary-light); border-bottom: 1px solid var(--line); }
.tp-answer-head h3 { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; margin: 0; color: var(--primary-ink); }
.tp-answer-close { border: 0; background: transparent; font-size: 14px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.tp-answer-close:hover { background: rgba(26, 26, 26, .07); color: var(--text); }
.tp-answer-body { padding: 18px; font-size: 15px; line-height: 1.7; }
.tp-answer-body p { margin: 0 0 12px; }
.tp-answer-body p:last-child { margin: 0; }
.tp-answer-body ul { margin: 0 0 12px; padding-left: 20px; }
.tp-answer-body li { margin-bottom: 8px; }
.tp-answer-body dl { margin: 0; }
.tp-answer-body dt { font-weight: 700; margin-bottom: 4px; }
.tp-answer-body dd { margin: 0 0 14px; color: var(--muted); }
.tp-answer-wait { color: var(--muted); }
.tp-answer-problem { color: #B4231B; }

/* Answers already written for this video, rendered by the server so search
   engines and assistants read them without running anything. */
.tp-insights { margin-top: 38px; }
.tp-insights > h2 { font-family: var(--font-display); font-size: 22px; margin: 0 0 6px; }
.tp-insights > p.tp-insights-sub { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.tp-insight { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; background: var(--surface); }
.tp-insight h3 { font-family: var(--font-display); font-size: 17px; margin: 0 0 12px; }
.tp-insight p { margin: 0 0 12px; line-height: 1.7; }
.tp-insight p:last-child { margin: 0; }
.tp-insight ul { margin: 0; padding-left: 20px; }
.tp-insight li { margin-bottom: 8px; line-height: 1.65; }
.tp-insight dt { font-weight: 700; margin-bottom: 4px; }
.tp-insight dd { margin: 0 0 14px; color: var(--muted); line-height: 1.65; }

/* The video's own address, shown rather than hidden. Hidden text aimed at
   search engines is the sort of thing that gets a page demoted. */
.tp-source { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--tinted); font-size: 13px; }
.tp-source span { color: var(--muted); }
.tp-source a { font-family: var(--font-mono); font-size: 12.5px; color: var(--primary-ink); word-break: break-all; }

@media (max-width: 700px) {
  .tp-tools { padding: 14px; }
  .tp-tool-set button { font-size: 13px; padding: 7px 11px; }
}

/* Intro line under the page heading. Real sentences, which the page needs
   above the transcript for both readers and search engines. */
.tp-intro { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: var(--muted); max-width: 780px; }
.tp-intro strong { color: var(--text); font-weight: 600; }

/* Footer for the tool pages. Four columns, because the last one has to explain
   what ViewRank AI is to someone who has never heard of it. */
.foot-grid.is-tools { grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr; gap: 34px; }
.foot-grid.is-tools > div > p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.foot-bottom.is-tools { flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; }
.foot-bottom.is-tools p { margin: 0; max-width: 720px; }
.foot-bottom.is-tools a { color: var(--muted); }
.foot-bottom.is-tools a:hover { color: var(--text); }

@media (max-width: 900px) {
  .foot-grid.is-tools { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .foot-grid.is-tools { grid-template-columns: 1fr; gap: 28px; }
}

/* Search sits above the transcript, where what it searches is in view. */
.tp-search.is-wide { margin-bottom: 16px; }
.tp-search.is-wide input { font-size: 15px; padding: 13px 15px; }
.tp-body > [data-answer-host]:empty { display: none; }

/* The footer is a different section, so it reads as one. */
footer { background: linear-gradient(180deg, var(--primary-light) 0%, #FFF7F1 100%); border-top: 1px solid rgba(232, 123, 53, 0.22); }
footer .foot-grid h4 { color: var(--primary-ink); }
footer .foot-grid a { color: #5C4636; }
footer .foot-grid a:hover { color: var(--primary-ink); }
footer .foot-brand p, footer .foot-grid > div > p { color: #6B5647; }
footer .foot-bottom { border-top-color: rgba(232, 123, 53, 0.22); color: #7A6555; }
footer .foot-bottom.is-tools a { color: #7A6555; text-decoration: underline; text-underline-offset: 2px; }
footer .foot-bottom.is-tools a:hover { color: var(--primary-ink); }

/* ---- Thumbnail tool ---- */

/* Each link becomes its own tag with a cross on it, the way YouTube's tag box
   behaves while you upload. The box holds the tags and the typing cursor
   together, so it still reads as one input. */
.tool-form.is-thumb { align-items: flex-start; }
.thumb-chipbox {
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 11px 12px; min-height: 58px; max-height: 210px; overflow-y: auto; cursor: text;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px;
}
.thumb-chipbox:focus-within { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-dim); }
.thumb-chipbox input {
  flex: 1; min-width: 190px; border: 0; outline: none; background: none;
  font-family: var(--font-body); font-size: 15.5px; color: var(--text); padding: 6px 4px;
}
.thumb-chipbox input::placeholder { color: var(--faint); }

.thumb-chip {
  display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  background: var(--primary-light); border: 1px solid rgba(232, 123, 53, 0.28);
  border-radius: 8px; padding: 5px 4px 5px 10px; font-size: 13.5px; line-height: 1.3;
  color: var(--primary-ink); font-weight: 600;
}
.thumb-chip-text { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-chip-x {
  border: 0; background: none; cursor: pointer; color: var(--primary-ink);
  font-size: 17px; line-height: 1; padding: 0 5px; border-radius: 5px; opacity: 0.55;
  font-family: var(--font-body);
}
.thumb-chip-x:hover, .thumb-chip-x:focus-visible { opacity: 1; background: rgba(232, 123, 53, 0.2); outline: none; }

/* One video's results. */
.thumb-results { margin-top: 22px; text-align: left; }
.thumb-video { margin-bottom: 30px; }
.thumb-video:last-child { margin-bottom: 0; }
/* A line between videos, so a long list reads as separate items. */
.thumb-video + .thumb-video { border-top: 1px solid var(--line); padding-top: 30px; }
.thumb-video-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.thumb-title { margin: 0; font-weight: 700; font-size: 16.5px; }
.thumb-title a { color: var(--text); text-decoration: none; }
.thumb-title a:hover { color: var(--primary-ink); text-decoration: underline; }
.thumb-channel { margin: 0; color: var(--muted); font-size: 14px; }
.thumb-badge { font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--primary-ink); background: var(--primary-light); border-radius: 999px; padding: 3px 10px; }
.thumb-gone { margin: 0; color: var(--muted); font-size: 14.5px; }

/* The size cards. The picture sits on the left and what you can do with it
   on the right, which halves the height of a long list. Every image box
   reserves its shape before the image arrives, so nothing jumps. */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 14px; }
.thumb-grid.is-single { grid-template-columns: 1fr; }
.thumb-card {
  display: flex; align-items: flex-start; gap: 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 14px;
}
.thumb-card.is-hero { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.thumb-frame {
  /* The shape comes from the picture itself, set on the element. */
  flex: 0 0 auto; width: 268px; border-radius: 9px; overflow: hidden;
  background: var(--tinted); display: flex; align-items: center; justify-content: center;
}
.thumb-frame.is-portrait { width: 146px; }
.thumb-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* A tall picture beside a short stack of buttons leaves a column of nothing,
   so the controls sit against the middle of it instead of the top. */
.thumb-card.is-portrait { align-items: center; }
.thumb-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
/* A smaller version gets a smaller card to match its smaller picture. These
   sit several to a row, so the picture goes above its buttons rather than
   beside them, which would leave neither enough room. */
.thumb-card.is-compact { flex-direction: column; align-items: flex-start; gap: 11px; padding: 12px; height: 100%; }
.thumb-card.is-compact .thumb-card-body { gap: 9px; padding-top: 0; width: 100%; }
/* Cards in a row are as tall as the tallest, so without this the buttons
   under a small picture float in the middle with a gap beneath them. */
.thumb-card.is-compact .thumb-actions { margin-top: auto; }
.thumb-card.is-compact .thumb-meta strong { font-size: 14.5px; }
.thumb-card.is-compact .thumb-actions button { padding: 6px 10px; font-size: 12.5px; }
.thumb-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.thumb-meta strong { font-size: 15.5px; }
.thumb-meta span { color: var(--muted); font-size: 13px; }
.thumb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.thumb-actions button {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  border-radius: 9px; padding: 7px 11px; font-size: 13px; font-family: var(--font-body);
  font-weight: 600; cursor: pointer;
}
.thumb-actions button:hover { border-color: var(--primary); color: var(--primary-ink); }
.thumb-actions button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.thumb-actions button.primary:hover { opacity: 0.9; color: #fff; }
.thumb-actions button[disabled] { opacity: 0.6; cursor: wait; }

/* The frames strip stays folded away: they are not the thumbnail, and the
   label matters more than the pictures. */
.thumb-frames { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--tinted); padding: 12px 16px; }
.thumb-frames summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--primary-ink); }
.thumb-frames-note { margin: 10px 0 14px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.thumb-frames .thumb-grid { margin-bottom: 4px; }

/* Everything smaller than the biggest waits behind one line, so twenty
   videos stay scannable. The line sits in the space beside the picture that
   was otherwise empty, rather than adding a row under every card. */
.thumb-more-toggle {
  align-self: flex-start; margin-top: auto; border: 0; background: none; cursor: pointer;
  padding: 4px 0; font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--primary-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(232, 123, 53, 0.4);
}
.thumb-more-toggle:hover { text-decoration-color: currentColor; }
/* The smaller cards are small, so two fit side by side and the list of them
   stays short. */
.thumb-more-panel { margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); }
@media (max-width: 520px) { .thumb-more-panel { grid-template-columns: 1fr 1fr; } }

/* The save-everything bar for a pasted list, with the size and format choice
   in it, because not everybody wants the biggest of everything. */
.thumb-bulkbar {
  margin-top: 20px; display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--primary-light); padding: 16px 18px 18px; text-align: left;
}
.thumb-bulk-head h3 {
  margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text);
}
.thumb-bulk-text { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }
/* The button sits at the far right of the same row as the menus. */
.thumb-bulk-controls { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.thumb-bulk-controls .btn { margin-left: auto; }
.thumb-field { display: inline-flex; flex-direction: column; gap: 5px; min-width: 0; }
.thumb-field > span { font-size: 12px; color: var(--primary-ink); font-weight: 700; letter-spacing: 0.2px; }
.thumb-field select {
  font-family: var(--font-body); font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  /* Room on the right for the arrow, which otherwise sits against the edge. */
  padding: 10px 36px 10px 12px; max-width: 100%;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23A8624B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  cursor: pointer;
}
.thumb-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.thumb-bulkbar .btn { padding: 11px 20px; font-size: 14.5px; white-space: nowrap; }
.thumb-bulkbar .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* The visible date under the page content. */
.tool-updated { margin: 40px 0 0; font-size: 13px; color: var(--muted); }

/* One column below the point where two horizontal cards stop fitting. */
@media (max-width: 900px) {
  .thumb-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .tool-form.is-thumb { flex-direction: column; align-items: stretch; }
  .thumb-chipbox { width: 100%; max-height: 168px; }
  .tool-form.is-thumb .btn { width: 100%; }
  .thumb-chip-text { max-width: 100%; }
  .thumb-bulkbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .thumb-bulk-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
  /* Size holds the longest wording, so it gets the full width rather than
     being cut to "The biggest o". */
  .thumb-bulk-controls .thumb-field:first-child { grid-column: 1 / -1; }
  .thumb-bulk-controls .btn { grid-column: 1 / -1; width: 100%; }
  .thumb-field select { width: 100%; }
}

/* On a phone the picture goes back above the buttons, because a thumbnail
   shrunk to sit beside them is too small to judge. */
@media (max-width: 560px) {
  .thumb-card { flex-direction: column; gap: 12px; padding: 12px; }
  .thumb-frame { width: 100%; }
  .thumb-frame.is-portrait { width: 100%; max-width: 200px; align-self: center; }
  .thumb-card.is-portrait { align-items: stretch; }
  .thumb-card-body { width: 100%; }
  .thumb-actions button { flex: 1 1 auto; }
  .thumb-video-head { gap: 6px; }
  .thumb-title { font-size: 15.5px; }
}