/* ==========================================================================
   KNCFileHub — Design system
   Concept: physical document handling — index cards, folder tabs, a desk
   with papers on it. Cool paper background, forest ink, mustard + teal
   accents. IBM Plex Serif for headlines, IBM Plex Sans for everything else.
   ========================================================================== */

:root {
  /* Color */
  --paper: #eef0ec;
  --paper-tan: #e4ddc7;
  --surface: #fbfaf6;
  --ink: #1c2620;
  --ink-soft: #4a544c;
  --accent: #d9a441;
  --accent-ink: #5c3d0e;
  --teal: #2c6459;
  --teal-deep: #1e4740;
  --line: #c7bfa0;
  --line-soft: #dcd6c0;
  --danger: #b23b32;
  --success: #3f7d53;

  /* Per-tool accent colors */
  --tool-split: #d9a441;
  --tool-merge: #2c6459;
  --tool-convert: #8a4b32;
  --tool-qr: #3a5a8c;

  /* Type */
  --font-display: 'IBM Plex Serif', Georgia, serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 0 rgba(28, 38, 32, 0.04), 0 2px 8px rgba(28, 38, 32, 0.06);
  --shadow-lift: 0 8px 24px rgba(28, 38, 32, 0.14);
  --max-width: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; max-width: 65ch; }
p.lede { font-size: 1.15rem; color: var(--ink-soft); }

a { color: var(--teal-deep); }
a:hover { color: var(--teal); }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hidden { display: none !important; }

/* --------------------------------------------------------------------
   Header — folder-tab navigation
   -------------------------------------------------------------------- */

.site-header {
  background: var(--paper-tan);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform 0.25s ease;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 14px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.brand__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.tabnav {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabnav a {
  display: block;
  padding: 0.85rem 1rem 0.7rem;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  position: relative;
  top: 1px;
}

.tabnav a:hover {
  color: var(--ink);
  background: rgba(251, 250, 246, 0.5);
}

.tabnav a.is-active {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
}

.header-actions {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  margin-bottom: 12px;
}

@media (max-width: 780px) {
  .tabnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 0.5rem 1.5rem 1rem;
    z-index: 40;
  }
  .tabnav.is-open { display: flex; }
  .tabnav a {
    border-radius: var(--radius);
    top: 0;
  }
  .menu-toggle { display: block; }
  .site-header__inner { align-items: center; min-height: 60px; }
  .brand { padding-bottom: 0; }
  .menu-toggle { margin-bottom: 0; }
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: #c1922f;
}
.btn-primary:hover { background: #e2ad4f; color: var(--accent-ink); }

.btn-teal {
  background: var(--teal);
  color: #fff;
}
.btn-teal:hover { background: var(--teal-deep); color: #fff; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover { background: var(--surface); color: var(--ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
  padding: 0.5rem 0.8rem;
}
.btn-ghost:hover { color: var(--ink); background: rgba(0,0,0,0.03); }

.btn-danger-outline {
  background: transparent;
  color: var(--danger);
  border-color: #ddb9b5;
}
.btn-danger-outline:hover { background: #fbf1f0; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------------------------------------------
   Homepage — hero
   -------------------------------------------------------------------- */

.hero {
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
  position: relative;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.hero h1 { margin-bottom: 0.6em; }
.hero .lede { margin-bottom: 1.75rem; }

.hero__ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .hero__ctas { justify-content: center; }
}

/* The "desk" — a small stack of scattered document shapes */
.hero__stack {
  position: relative;
  height: 320px;
}

.desk-sheet {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(14px) rotate(var(--r, 0deg));
  animation: settle 0.6s ease forwards;
  animation-delay: var(--d, 0s);
}

@keyframes settle {
  to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .desk-sheet { opacity: 1; transform: rotate(var(--r, 0deg)); animation: none; }
}

.desk-sheet--pdf {
  width: 195px; height: 245px;
  top: 20px; left: 100px;
  --r: -5deg; --d: 0s;
  z-index: 3;
  padding: 18px;
}
.desk-sheet--pdf .desk-sheet__line { height: 6px; background: var(--line-soft); border-radius: 3px; margin-bottom: 10px; }
.desk-sheet--pdf .desk-sheet__line:nth-child(3) { width: 70%; }
.desk-sheet--pdf .desk-sheet__badge {
  position: absolute; bottom: 16px; left: 18px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  color: var(--tool-split);
  border: 1.5px solid var(--tool-split);
  border-radius: 4px;
  padding: 2px 8px;
}

/* Tucked mostly behind the PDF sheet — just a sliver of each shows at
   the edges, like papers peeking out from underneath rather than
   scattered separately across the scene. */
.desk-sheet--image {
  width: 170px; height: 140px;
  top: 5px; left: 135px;
  --r: 7deg; --d: 0.1s;
  z-index: 1;
  background: linear-gradient(135deg, #efe6cf, #d9c79a);
}

.desk-sheet--qr {
  width: 110px; height: 110px;
  bottom: 15px; left: 115px;
  --r: -3deg; --d: 0.2s;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 3px;
  padding: 12px;
}
.desk-sheet--qr span { background: var(--ink); border-radius: 1px; }
.desk-sheet--qr span:nth-child(3n) { background: transparent; }
.desk-sheet--qr span:nth-child(7n) { background: var(--tool-qr); }

.desk-sheet--merge {
  width: 170px; height: 115px;
  top: 130px; left: 55px;
  --r: 4deg; --d: 0.3s;
  z-index: 1;
  background: var(--paper-tan);
}

/* Below 900px, the illustration becomes a small faded watermark behind
   the headline instead of a layout column. It's pulled out of document
   flow with position:absolute and a fixed width/height (not a stretchy
   percentage), so it can't affect the height of anything around it —
   "Pick a tool" always follows directly after the buttons regardless
   of how this renders.
   NOTE: this block must stay AFTER the base ".hero__stack { position:
   relative; height: 320px; }" rule above — equal-specificity CSS rules
   are resolved by source order, so placing this earlier let the desktop
   rule silently win on mobile and reintroduce the exact gap bug this
   is meant to fix. */
@media (max-width: 900px) {
  .hero { padding: 2.75rem 0 2rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 0; text-align: center; }

  .hero__copy { position: relative; z-index: 2; }
  .hero__copy h1,
  .hero__copy .lede {
    text-shadow: 0 0 20px var(--paper), 0 0 20px var(--paper), 0 0 10px var(--paper);
  }

  .hero__stack {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 320px;
    height: 300px;
    transform: translateX(-50%);
    opacity: 0.22;
    filter: saturate(0.55);
    pointer-events: none;
    z-index: 1;
  }
}

@media (max-width: 420px) {
  .hero__stack { width: 260px; height: 250px; transform: translateX(-50%) scale(0.85); }
}

/* --------------------------------------------------------------------
   Tool index cards
   -------------------------------------------------------------------- */

.tools {
  padding: 1rem 0 4rem;
}

.tools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.tool-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  --tool-color: var(--teal);
}

.tool-card:hover {
  box-shadow: var(--shadow-lift);
  border-color: var(--tool-color);
}

/* folded-corner detail, colored per tool */
.tool-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 28px 28px 0;
  border-color: transparent var(--tool-color) transparent transparent;
  border-top-right-radius: var(--radius-lg);
  opacity: 0.9;
}

.tool-card--split { --tool-color: var(--tool-split); }
.tool-card--merge { --tool-color: var(--tool-merge); }
.tool-card--convert { --tool-color: var(--tool-convert); }
.tool-card--qr { --tool-color: var(--tool-qr); }

.tool-card__icon {
  width: 40px; height: 40px;
  color: var(--tool-color);
  margin-bottom: 1rem;
}
.tool-card__icon svg { width: 100%; height: 100%; }

.tool-card h3 { margin-bottom: 0.35em; }
.tool-card p { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 0; }

/* --------------------------------------------------------------------
   How it works — legitimate numbered sequence
   -------------------------------------------------------------------- */

.steps {
  background: var(--paper-tan);
  padding: 3.5rem 0;
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 780px) {
  .steps__grid { grid-template-columns: 1fr; }
}

.step__num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.step h3 { margin-bottom: 0.35em; }
.step p { color: var(--ink-soft); font-size: 0.95rem; }

/* --------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------- */

.trust {
  padding: 3rem 0;
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 780px) {
  .trust__grid { grid-template-columns: 1fr; }
}

.trust__item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.trust__item svg {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 2px;
}

.trust__item h4 { margin: 0 0 0.25em; font-family: var(--font-body); font-weight: 600; font-size: 1rem; }
.trust__item p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */

.site-footer {
  background: var(--paper-tan);
  border-top: 1px solid var(--line);
  padding: 3rem 0 2rem;
  margin-top: 3rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 780px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

.footer__brand p {
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 32ch;
}

.footer__col h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0 0 0.75em;
  color: var(--ink);
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__col li { margin-bottom: 0.5em; }

.footer__col a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer__col a:hover { color: var(--teal-deep); }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------
   Tool page shell
   -------------------------------------------------------------------- */

.tool-page {
  padding: 2.5rem 0 4rem;
}

.tool-page__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2rem;
}

.tool-page__eyebrow-icon {
  width: 44px; height: 44px;
  margin: 0 auto 1rem;
  color: var(--page-color, var(--teal));
}
.tool-page__eyebrow-icon svg { width: 100%; height: 100%; }

.tool-page__header p { margin: 0.5em auto 0; color: var(--ink-soft); }

.sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem;
  box-shadow: var(--shadow-card);
  position: relative;
}

@media (max-width: 560px) {
  .sheet { padding: 1.5rem 1.25rem; }
}

/* --------------------------------------------------------------------
   Upload dropzone — an open folder / inbox slot
   -------------------------------------------------------------------- */

.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: 3rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--page-color, var(--teal));
  background: var(--surface);
}

.dropzone__icon {
  width: 52px; height: 52px;
  margin: 0 auto 1rem;
  color: var(--page-color, var(--teal));
}
.dropzone__icon svg { width: 100%; height: 100%; }

.dropzone h3 { margin-bottom: 0.35em; font-size: 1.15rem; }
.dropzone p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------
   Alerts / status
   -------------------------------------------------------------------- */

.alert {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

.alert-success { background: #eaf3ec; color: #24492f; border: 1px solid #bcdcc4; }
.alert-error { background: #fbeceb; color: #6b241d; border: 1px solid #eec3bf; }
.alert-info { background: #eaf0f6; color: #1e3a56; border: 1px solid #c3d6e7; }

.alert h4 { margin: 0 0 0.2em; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; }
.alert p { margin: 0; }

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------
   Option list (split method choice, etc.)
   -------------------------------------------------------------------- */

.option-list { display: flex; flex-direction: column; gap: 0.75rem; }

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.option-row:hover { border-color: var(--page-color, var(--teal)); background: var(--surface); }

.option-row h4 { margin: 0 0 0.2em; font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.option-row p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.option-row__chev { color: var(--ink-soft); flex-shrink: 0; width: 18px; height: 18px; }

/* --------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------- */

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--ink);
}

.field__hint {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

input:focus, select:focus {
  border-color: var(--page-color, var(--teal));
}

input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.range-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 0.75rem;
}

@media (max-width: 480px) {
  .range-row { grid-template-columns: 1fr 1fr; }
  .range-row .btn { grid-column: span 2; }
}

.page-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 0.15rem;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------
   File list (merge / multi-upload)
   -------------------------------------------------------------------- */

.file-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.file-list li svg { width: 18px; height: 18px; color: var(--page-color, var(--teal)); flex-shrink: 0; }
.file-list li .file-list__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list li button {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); padding: 4px; line-height: 0;
}
.file-list li button:hover { color: var(--danger); }

/* --------------------------------------------------------------------
   Loading state
   -------------------------------------------------------------------- */

.loading-state {
  text-align: center;
  padding: 2.5rem 1rem;
}

.spinner {
  width: 36px; height: 36px;
  margin: 0 auto 1rem;
  border: 3px solid var(--line);
  border-top-color: var(--page-color, var(--teal));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.6s; }
}

.loading-state p { color: var(--ink-soft); }

/* --------------------------------------------------------------------
   Result / download panel
   -------------------------------------------------------------------- */

.result-panel {
  text-align: center;
  padding: 1rem 0;
}

.result-panel__icon {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  color: var(--success);
}
.result-panel__icon svg { width: 100%; height: 100%; }

.result-panel h3 { margin-bottom: 0.35em; }
.result-panel p { color: var(--ink-soft); margin-bottom: 1.5rem; }

.result-panel__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.qr-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.qr-preview img,
.qr-preview canvas {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
}

/* --------------------------------------------------------------------
   Simple content pages (privacy, terms, about)
   -------------------------------------------------------------------- */

.content-page {
  padding: 3rem 0 4rem;
  max-width: 760px;
  margin: 0 auto;
}

.content-page h2 { margin-top: 1.75em; }
.content-page ul, .content-page ol { color: var(--ink-soft); }
.content-page .updated { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 2rem; }

/* --------------------------------------------------------------------
   FAQ sections — real visible content paired with FAQPage schema.
   Answer engines and generative engines pull directly from these, so
   the answers stay concise and self-contained rather than teasing
   "read more" the way a marketing page might.
   -------------------------------------------------------------------- */

.faq {
  padding: 3rem 0 4rem;
}

.faq__list {
  max-width: 720px;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
}

.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--ink-soft);
  flex-shrink: 0;
  line-height: 1;
}

.faq__item[open] summary::after { content: "\2212"; }

.faq__item p {
  margin: 0;
  padding: 0 1.25rem 1.1rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------
   Range slider (quality control on the converter)
   -------------------------------------------------------------------- */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--page-color, var(--teal));
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--page-color, var(--teal));
  border: 2px solid var(--surface);
  cursor: pointer;
}