/* ============================================================================
   PDF Toolkit — design system
   A light blue-tech interface: a white ground with a blue cast, one electric
   blue accent with a cyan partner reserved for gradients, navy-black ink, and
   depth expressed with blue-tinted shadows instead of borders.
   ----------------------------------------------------------------------------
   1.  Tokens (blue-tech palette)
   2.  Fonts, reset & base type
   3.  Layout primitives
   4.  Header & navigation
   5.  Buttons, tags, pills
   6.  Home: hero, features, trust, tools, steps, testimonials, faq, cta
   7.  Tool pages: hero, panel, dropzone, forms, file list, previews
   8.  Specialised tools: QR, text compare, ICO
   9.  Editorial pages: prose (about / privacy / terms / guide)
   10. Footer
   11. Motion & responsive
   12. Advertising slots
   ========================================================================== */

/* ==========================================================================
   1. Tokens (blue-tech palette)
   ========================================================================== */
/* --------------------------------------------------------------------------
   Blue-tech palette.
   The ground stays light — white with a blue cast rather than grey — because
   the 19 tool pages are form- and canvas-heavy and need a light surface to
   stay readable. The identity comes from one electric blue, a cyan partner
   used only in gradients, and navy-black ink instead of neutral black.
   Depth is expressed with blue-tinted shadows, never flat black.
   -------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --bg:            #f6f9ff;
  --bg-alt:        #eef3fc;
  --surface:       #ffffff;
  --surface-2:     #f7faff;
  --surface-sunk:  #eaf1fb;

  /* ink — navy-black, never neutral */
  --text:          #0a1628;
  --text-2:        #46566e;
  --text-3:        #63748e;
  --text-invert:   #ffffff;

  /* lines — blue-tinted hairlines, never heavy */
  --line:          rgba(10, 40, 90, .085);
  --line-2:        rgba(10, 40, 90, .16);

  /* accent — electric blue */
  --accent:        #0a5cff;
  --accent-hover:  #2b74ff;
  --accent-deep:   #0844c4;
  --accent-soft:   #e8efff;
  --accent-ring:   rgba(10, 92, 255, .26);

  /* the second half of every gradient */
  --cyan:          #06b6d4;
  --cyan-deep:     #0e7490;
  --cyan-soft:     #e2f7fb;

  /* supporting hues, used sparingly */
  --teal:          #0f9d8f;
  --teal-soft:     #e7f7f5;
  --amber:         #b7791f;
  --amber-soft:    #fdf6e7;
  --star:          #f2a33c;
  --rose:          #d64545;
  --rose-soft:     #fdeeee;
  --green:         #17914f;
  --green-soft:    #e6f7ee;

  /* shape */
  --r-xs: 9px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 34px;
  --r-pill: 980px;

  /* depth — blue-tinted rather than black */
  --sh-xs: 0 1px 2px rgba(10, 40, 90, .05);
  --sh-sm: 0 1px 2px rgba(10, 40, 90, .05), 0 4px 14px rgba(10, 40, 90, .055);
  --sh-md: 0 2px 6px rgba(10, 40, 90, .06), 0 16px 38px rgba(10, 40, 90, .09);
  --sh-lg: 0 10px 28px rgba(10, 40, 90, .09), 0 34px 70px rgba(10, 40, 90, .10);
  --sh-accent: 0 6px 18px rgba(10, 92, 255, .28);
  --sh-accent-lg: 0 12px 30px rgba(10, 92, 255, .34);

  /* gradients — the only place cyan is allowed */
  --grad-blue: linear-gradient(118deg, #0a5cff 0%, #2b74ff 44%, #06b6d4 100%);
  --grad-text: linear-gradient(96deg, #0a5cff 2%, #06b6d4 96%);

  /* type.
     --font-sans keeps the CJK families: 7 of the 10 locales need them, and
     the system stack renders them natively at zero download cost.
     --font-display is Sora (self-hosted, Latin only) and deliberately falls
     through to --font-sans for CJK headings. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               system-ui, "PingFang SC", "Hiragino Sans GB", "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei",
               "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* rhythm */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --gutter: 22px;
  --section-y: clamp(56px, 7vw, 104px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ==========================================================================
   Fonts — Sora is self-hosted from assets/fonts/ so the site keeps its
   zero-third-party-request property (no Google Fonts call at runtime).
   It is a variable font, so one file per subset covers every weight.
   Latin only: headings in zh / ja / ko fall through to the CJK families in
   --font-sans, which is the intent rather than a limitation.
   ========================================================================== */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/sora-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Reset & base type
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.58;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.026em;
  line-height: 1.14;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.35rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.25rem); letter-spacing: -.026em; }
h3 { font-size: 1.18rem; letter-spacing: -.015em; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a.inline { color: var(--accent); }
a.inline:hover { text-decoration: underline; }

img, svg, canvas { max-width: 100%; }
.icon { display: inline-block; vertical-align: middle; flex: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(10, 92, 255, .18); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }
.container--wide { max-width: 1280px; }

main { display: block; }

.section { padding: var(--section-y) 0 0; }
.section--tight { padding-top: clamp(36px, 4.5vw, 64px); }
.section--band { background: linear-gradient(180deg, var(--surface-2), var(--bg)); border-block: 1px solid var(--line); margin-top: var(--section-y); padding: var(--section-y) 0; }

.section__head { max-width: 660px; margin-bottom: clamp(28px, 3.6vw, 46px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { margin-bottom: 12px; }
.section__head p { color: var(--text-2); font-size: 1.075rem; margin: 0; }

.eyebrow {
  display: block;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.muted { color: var(--text-2); }
.tiny { font-size: .84rem; }

/* ==========================================================================
   4. Header & navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246, 249, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: rgba(10, 92, 255, .16); box-shadow: 0 1px 24px rgba(10, 40, 90, .05); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: 1.04rem; letter-spacing: -.015em; min-width: 0; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background-color: var(--accent);
  background-image: var(--grad-blue);
  color: #fff;
  flex: none;
}
.brand__mark svg { width: 18px; height: 18px; }
.brand--sm { font-size: .96rem; }
.brand--sm .brand__mark { width: 26px; height: 26px; border-radius: 8px; }
.brand--sm .brand__mark svg { width: 15px; height: 15px; }
.brand__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 18px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  padding: 7px 12px;
  border-radius: var(--r-xs);
  font-size: .92rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.site-nav a:hover { color: var(--accent-deep); background: var(--accent-soft); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

.site-header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* language picker ------------------------------------------------------- */
.lang { position: relative; }
.lang__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px 7px 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .7);
  font-size: .86rem; font-weight: 550; color: var(--text-2);
  cursor: pointer;
  transition: .18s var(--ease);
}
.lang__toggle:hover { color: var(--accent-deep); border-color: var(--accent); background: #fff; }
.lang__toggle svg { width: 15px; height: 15px; }
.lang__chev { transition: transform .22s var(--ease); }
.lang.is-open .lang__chev { transform: rotate(180deg); }

.lang__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  padding: 6px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: .2s var(--ease-out);
}
.lang.is-open .lang__panel { opacity: 1; visibility: visible; transform: none; }
.lang__panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  font-size: .88rem;
  color: var(--text-2);
  transition: .14s var(--ease);
}
.lang__panel a:hover { background: var(--accent-soft); color: var(--accent-deep); }
.lang__panel a[aria-current="true"] { color: var(--text); font-weight: 600; background: rgba(0, 0, 0, .04); }
.lang__panel code {
  font-family: inherit; font-size: .72rem; font-weight: 600;
  color: var(--text-3); text-transform: uppercase; letter-spacing: .04em;
}

/* mobile menu ----------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .7); color: var(--text);
  cursor: pointer;
}
.site-header__mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(246, 249, 255, .96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.site-header__mobile.is-open { display: block; }
.site-header__mobile ul { list-style: none; margin: 0; padding: 8px 0 14px; }
.site-header__mobile a { display: block; padding: 11px 0; font-weight: 550; border-bottom: 1px solid var(--line); }
.site-header__mobile a:last-child { border-bottom: 0; }

/* ==========================================================================
   5. Buttons, tags, pills
   Every button lifts on hover and carries a light sheen that sweeps across
   it once. The primary button also slides its gradient, so the colour itself
   shifts rather than just the brightness.
   ========================================================================== */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s var(--ease-spring), background .22s var(--ease),
              background-position .5s var(--ease-out), box-shadow .26s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease);
}
.btn svg { width: 17px; height: 17px; position: relative; z-index: 2; }
.btn > * { position: relative; z-index: 2; }

/* the sheen */
.btn::after {
  content: "";
  position: absolute;
  top: -10%; left: -130%;
  width: 55%; height: 120%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .46), transparent);
  transform: skewX(-18deg);
  transition: left .58s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.btn:hover::after { left: 135%; }
.btn--link::after, .btn--quiet::after { content: none; }

.btn--primary {
  background-color: var(--accent);
  background-image: var(--grad-blue);
  background-size: 175% 100%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: var(--sh-accent);
}
.btn--primary:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: var(--sh-accent-lg);
}
.btn--primary:active { transform: translateY(0) scale(.985); }

.btn--ghost { background: var(--surface); border-color: var(--line-2); color: var(--text); box-shadow: var(--sh-xs); }
.btn--ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(10, 92, 255, .16);
}
.btn--ghost:active { transform: translateY(0); }

.btn--quiet { background: rgba(10, 40, 90, .05); color: var(--text); }
.btn--quiet:hover { background: var(--accent-soft); color: var(--accent-deep); }

.btn--soft { background: var(--accent-soft); color: var(--accent-deep); }
.btn--soft:hover { background: #dbe8ff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10, 92, 255, .16); }

.btn--link { padding: 0; background: none; border: 0; color: var(--accent); font-weight: 600; box-shadow: none; }
.btn--link:hover { color: var(--accent-deep); text-decoration: underline; }

.btn--sm { padding: 9px 15px; font-size: .87rem; }
.btn--lg { padding: 16px 32px; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none !important; box-shadow: var(--sh-xs); }
.btn:disabled::after { content: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(10, 40, 90, .05);
  font-size: .74rem;
  font-weight: 550;
  color: var(--text-2);
  white-space: nowrap;
}
.tag-row, .tool-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.pill-note {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  font-size: .84rem;
  font-weight: 550;
  color: var(--text-2);
}
.pill-note svg { width: 15px; height: 15px; color: var(--green); }

/* ==========================================================================
   6. Home page
   Order: hero -> core features -> trust -> tools -> guide -> testimonials
          -> FAQ -> closing CTA.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------
   Light ground, a blue aura and a faint tech grid that is radially masked
   so it dissolves before it reaches the copy. Split into copy on the left
   and a real office photograph on the right. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5.6vw, 78px) 0 clamp(34px, 4.4vw, 62px);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -180px -10% auto -10%;
  height: 820px;
  background:
    radial-gradient(36% 42% at 20% 30%, rgba(10, 92, 255, .17), transparent 68%),
    radial-gradient(32% 38% at 78% 20%, rgba(6, 182, 212, .15), transparent 70%),
    radial-gradient(48% 44% at 52% 96%, rgba(10, 92, 255, .07), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10, 92, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 92, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(76% 64% at 50% 6%, #000 0%, transparent 76%);
  mask-image: radial-gradient(76% 64% at 50% 6%, #000 0%, transparent 76%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

.hero__inner {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: clamp(30px, 4vw, 62px);
}

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 15px 6px 12px;
  margin-bottom: 20px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(10, 92, 255, .17);
  box-shadow: 0 2px 10px rgba(10, 92, 255, .09);
  font-size: .82rem;
  font-weight: 550;
  color: var(--accent-deep);
}
.hero__badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(23, 145, 79, .16);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -.038em;
  line-height: 1.06;
  margin-bottom: 18px;
}
.hero__title .grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  max-width: 540px;
  color: var(--text-2);
  font-size: clamp(1.01rem, 1.5vw, 1.14rem);
  line-height: 1.56;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* the three reassurance ticks under the buttons */
.hero__points {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin: 24px 0 0; padding: 0; list-style: none;
  font-size: .875rem; font-weight: 500; color: var(--text-2);
}
.hero__points li { display: inline-flex; align-items: center; gap: 7px; }
.hero__points svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* --- the photograph ----------------------------------------------------- */
.hero__media { position: relative; }
.hero__shot {
  position: relative;
  margin: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 24px 60px rgba(10, 40, 90, .18), 0 2px 6px rgba(10, 40, 90, .06);
}
.hero__shot img { display: block; width: 100%; height: auto; }
/* a blue cast so the photograph belongs to the palette */
.hero__shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(10, 92, 255, .13) 0%, transparent 42%, rgba(6, 182, 212, .10) 100%);
  pointer-events: none;
}

/* floating fact chips over the photo */
.hero__chip {
  position: absolute;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px 11px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(10, 40, 90, .16);
  animation: hero-float 5.5s var(--ease) infinite;
}
.hero__chip__ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
}
.hero__chip__ico svg { width: 17px; height: 17px; }
.hero__chip__txt b { display: block; font-size: .88rem; font-weight: 650; letter-spacing: -.01em; }
.hero__chip__txt small { display: block; font-size: .755rem; color: var(--text-3); }
.hero__chip--a { left: -26px; bottom: 46px; }
.hero__chip--b { right: -22px; top: 38px; animation-delay: -2.7s; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* stats strip across the full width, under the split */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(34px, 4.4vw, 58px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero__stat {
  background: rgba(255, 255, 255, .74);
  padding: 20px 16px;
  text-align: center;
}
.hero__stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.03em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__stat span { font-size: .8rem; color: var(--text-3); }

/* --- core features ------------------------------------------------------ */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(286px, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}
.feat {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out),
              border-color .34s var(--ease-out);
}
.feat:hover {
  transform: translateY(-5px);
  border-color: rgba(10, 92, 255, .26);
  box-shadow: var(--sh-lg);
}
.feat__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-sunk);
}
.feat__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out);
}
.feat:hover .feat__media img { transform: scale(1.05); }
.feat__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 92, 255, .13) 0%, transparent 46%);
  pointer-events: none;
}
.feat__badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--accent);
  box-shadow: 0 8px 22px rgba(10, 40, 90, .20);
  transition: transform .34s var(--ease-spring), color .24s var(--ease);
}
.feat__badge svg { width: 22px; height: 22px; }
.feat:hover .feat__badge { transform: translateY(-3px) scale(1.06); color: var(--accent-deep); }

.feat__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.feat__body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -.02em;
  margin-bottom: 9px;
}
.feat__body > p { font-size: .935rem; color: var(--text-2); margin: 0 0 18px; }
/* margin-top:auto pins the list to the bottom so the three cards line up */
.feat__list {
  list-style: none;
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}
.feat__list li { display: flex; align-items: flex-start; gap: 9px; font-size: .875rem; font-weight: 550; color: var(--text); }
.feat__list svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 3px; }

/* trust grid ------------------------------------------------------------ */
.trust {
  display: grid;
  /* 250px, not 268px: at the 1076px content width the larger value resolves to
     3.99 tracks, so the four home-page cards wrapped 3 + 1 and left a hole.
     auto-fit still collapses unused tracks, so the 3-item About page is fine. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.trust__item {
  background: var(--surface);
  padding: clamp(24px, 3vw, 34px);
  transition: background .3s var(--ease);
}
.trust__item:hover { background: var(--surface-2); }
.trust__item svg { width: 24px; height: 24px; color: var(--accent); margin-bottom: 14px; }
.trust__item h3 { font-size: 1.04rem; margin-bottom: 8px; }
.trust__item p { font-size: .925rem; color: var(--text-2); margin: 0; }

/* tool grid ------------------------------------------------------------- */
.toolbar-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}
.toolbar-cats a {
  padding: 8px 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: .87rem;
  font-weight: 550;
  color: var(--text-2);
  transition: .18s var(--ease);
}
.toolbar-cats a:hover { color: var(--accent-deep); border-color: var(--accent); background: var(--accent-soft); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 16px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out),
              border-color .28s var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 92, 255, .24);
  box-shadow: var(--sh-md);
}
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 110% at 100% 0%, rgba(10, 92, 255, .075), transparent 58%);
  opacity: 0;
  transition: opacity .28s var(--ease);
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; }

.tool-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  transition: transform .28s var(--ease-spring), background .28s var(--ease);
}
.tool-icon svg { width: 22px; height: 22px; }
.tool-icon--lg { width: 58px; height: 58px; border-radius: 17px; }
.tool-icon--lg svg { width: 28px; height: 28px; }
.card:hover .tool-icon { transform: scale(1.07); background: #dbe8ff; }

.card__title { font-size: 1.02rem; font-weight: 650; letter-spacing: -.012em; }
.card__desc { font-size: .9rem; color: var(--text-2); flex: 1; margin: 0; }
.card__more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .85rem; font-weight: 600; color: var(--accent);
  opacity: 0; transform: translateX(-4px);
  transition: .24s var(--ease);
}
.card__more svg { width: 14px; height: 14px; }
.card:hover .card__more { opacity: 1; transform: none; }

/* numbered steps -------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 26px;
  counter-reset: step;
}
.step { position: relative; padding-top: 46px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: var(--grad-blue);
  color: #fff;
  font-size: .84rem;
  font-weight: 650;
  box-shadow: 0 4px 12px rgba(10, 92, 255, .28);
}
.step h3 { font-size: 1.02rem; margin-bottom: 7px; }
.step p { font-size: .92rem; color: var(--text-2); margin: 0; }

/* testimonials ---------------------------------------------------------- */
.tst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.tst {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 28px 26px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              border-color .3s var(--ease-out);
}
.tst:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 92, 255, .22);
  box-shadow: var(--sh-md);
}
/* oversized quote glyph in the top-right corner. line-height:1 keeps the ink
   inside the card — at a smaller offset the glyph's ink sits above the box
   and gets clipped into an unreadable smudge. */
.tst::before {
  content: "\201C";
  position: absolute;
  top: -2px; right: 20px;
  font-family: var(--font-display);
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(10, 92, 255, .11);
  pointer-events: none;
}
.tst__stars { display: flex; gap: 3px; color: var(--star); }
/* icon_svg() emits fill="none" stroke="currentColor" as presentation
   attributes; a CSS rule wins over those, so the star can be filled. */
.tst__stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.tst blockquote {
  position: relative;
  margin: 0;
  flex: 1;
  font-size: .985rem;
  line-height: 1.62;
  color: var(--text);
}
.tst__who {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.tst__ava {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: var(--grad-blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.tst__who b { display: block; font-size: .925rem; font-weight: 650; }
.tst__who small { display: block; font-size: .815rem; color: var(--text-3); }

/* faq accordion --------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--line); }
.faq {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.012em;
  transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-deep); }
.faq summary .faq__mark {
  margin-left: auto;
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 40, 90, .06);
  color: var(--text-2);
  transition: transform .26s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.faq summary .faq__mark svg { width: 13px; height: 13px; }
.faq[open] summary .faq__mark { transform: rotate(180deg); background: var(--accent-soft); color: var(--accent); }
.faq__body {
  padding: 0 38px 22px 0;
  color: var(--text-2);
  font-size: .96rem;
  animation: faq-in .3s var(--ease-out);
}
.faq__body p { margin: 0 0 .8em; }
.faq__body p:last-child { margin: 0; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.faq-group + .faq-group { margin-top: 42px; }
.faq-group > h2 { font-size: 1.2rem; margin-bottom: 6px; }

/* closing cta -----------------------------------------------------------
   The one saturated moment on the page, but still light: a blue-tinted
   panel with the same grid as the hero, not a dark band. */
.cta-band {
  position: relative;
  overflow: hidden;
  margin-top: var(--section-y);
  padding: clamp(46px, 5.8vw, 80px) var(--gutter);
  text-align: center;
  background:
    radial-gradient(58% 118% at 12% 0%, rgba(10, 92, 255, .15), transparent 62%),
    radial-gradient(52% 108% at 88% 100%, rgba(6, 182, 212, .16), transparent 66%),
    linear-gradient(180deg, #edf3ff 0%, #e8f6fd 100%);
  border-block: 1px solid rgba(10, 92, 255, .14);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10, 92, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 92, 255, .06) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 90% at 50% 50%, #000 0%, transparent 78%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
  font-family: var(--font-display);
  margin-bottom: 12px;
  letter-spacing: -.03em;
}
.cta-band p { color: var(--text-2); max-width: 560px; margin: 0 auto 28px; }
.cta-band .btn-row { justify-content: center; }

/* ==========================================================================
   7. Tool pages
   ========================================================================== */
.tool-hero { padding: clamp(30px, 4vw, 52px) 0 0; }
.breadcrumb {
  display: flex; align-items: center; gap: 7px;
  font-size: .86rem; color: var(--text-3);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--text-2); }
.breadcrumb a:hover { color: var(--accent-deep); }
.breadcrumb svg { width: 13px; height: 13px; opacity: .6; }

.tool-hero__head { display: flex; align-items: flex-start; gap: 20px; }
.tool-hero__title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 10px; }
.tool-hero__desc { color: var(--text-2); font-size: 1.04rem; max-width: 620px; margin: 0 0 14px; }

.panel {
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  padding: clamp(22px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.panel + .panel { margin-top: 20px; }
.panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.panel__head h2 { font-size: 1.14rem; }
.panel--plain { background: none; border: 0; box-shadow: none; padding: 0; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: 14px; }

.hint {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--surface-sunk);
  border-radius: var(--r-md);
  font-size: .89rem;
  color: var(--text-2);
  line-height: 1.55;
}
.hint code, .prose code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(10, 40, 90, .06);
  font-family: var(--font-mono);
  font-size: .88em;
}

/* dropzone -------------------------------------------------------------- */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: clamp(30px, 5vw, 52px) 24px;
  text-align: center;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  transition: .22s var(--ease);
}
.dropzone:hover, .dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.dropzone__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 12px;
  border-radius: 15px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--sh-sm);
}
.dropzone__title { font-weight: 600; font-size: 1.03rem; color: var(--text); }
.dropzone:hover .dropzone__title, .dropzone.drag-over .dropzone__title { color: var(--accent-deep); }
.dropzone__sub { font-size: .87rem; }
.dropzone__cta {
  margin-top: 16px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: #fff;
  font-size: .87rem;
  font-weight: 600;
}
.dropzone input[type=file] { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; }

/* form controls --------------------------------------------------------- */
label.field, .field-label {
  display: block;
  margin: 20px 0 7px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--text);
}
label.field:first-child { margin-top: 0; }

input[type=text], input[type=email], input[type=number], input[type=url],
select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .95rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-ring);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }

.field-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field-inline input[type=number] { width: 96px; }
.field-inline input[type=range] { flex: 1; min-width: 130px; }

input[type=range] { width: 100%; accent-color: var(--accent); height: 22px; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2363748e' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 38px;
}

/* segmented control ----------------------------------------------------- */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
}
.seg label {
  padding: 8px 14px;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 550;
  color: var(--text-2);
  cursor: pointer;
  transition: .16s var(--ease);
}
.seg label:hover { color: var(--text); }
.seg input { display: none; }
.seg label:has(input:checked) {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--sh-xs);
}
.seg label:has(input:checked) span { font-weight: 600; }

.mode-btn {
  padding: 8px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: .87rem;
  font-weight: 550;
  color: var(--text-2);
  cursor: pointer;
  transition: .16s var(--ease);
}
.mode-btn:hover { color: var(--text); border-color: rgba(0, 0, 0, .22); }
.mode-btn.active { background: var(--text); border-color: var(--text); color: #fff; }

.color-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.color-preset {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: .15s var(--ease);
}
.color-preset:hover { transform: scale(1.1); }
.color-preset.active { border-color: var(--text); }

/* progress & status ----------------------------------------------------- */
.progress {
  display: none;
  height: 6px;
  margin-top: 18px;
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), #2bb3a3);
  transition: width .24s var(--ease);
}

.status { margin-top: 14px; font-size: .9rem; font-weight: 550; color: var(--text-2); min-height: 1.2em; }
.status:empty { margin: 0; min-height: 0; }
.status.is-ok { color: var(--green); }
.status.is-error { color: var(--rose); }

/* file list ------------------------------------------------------------- */
.file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.file-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: .16s var(--ease);
}
.file-item.dragging { opacity: .45; background: var(--accent-soft); }
.file-item.drag-over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.drag-handle { color: var(--text-3); cursor: grab; display: flex; }
.drag-handle:active { cursor: grabbing; }
.file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-name { font-size: .91rem; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pages, .file-size { font-size: .78rem; color: var(--text-3); }
.remove-file {
  border: 0; background: none; color: var(--text-3);
  padding: 5px 8px; border-radius: 8px; cursor: pointer;
  font-size: 1rem; line-height: 1;
  transition: .15s var(--ease);
}
.remove-file:hover { background: var(--rose-soft); color: var(--rose); }
.empty-message, .empty-hint { padding: 20px; text-align: center; color: var(--text-3); font-size: .89rem; }

.file-info-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 16px; padding: 13px 17px;
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  font-size: .9rem;
}
.file-info-bar b { color: var(--accent-deep); }

/* previews -------------------------------------------------------------- */
.preview-wrap { display: block; margin-top: 20px; }
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.preview-item {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
  cursor: grab;
  transition: .16s var(--ease);
}
.preview-item:hover { border-color: var(--line-2); box-shadow: var(--sh-sm); }
.preview-item.dragging { opacity: .45; border-style: dashed; border-color: var(--accent); }
.preview-item.drag-over-before { box-shadow: inset 3px 0 0 var(--accent); }
.preview-item .page-thumb { display: block; width: 100%; background: #fff; }
.preview-item .page-info {
  padding: 5px 7px;
  border-top: 1px solid var(--line);
  font-size: .76rem;
  color: var(--text-2);
  text-align: center;
}
.checkbox-wrap { position: absolute; top: 7px; left: 7px; z-index: 2; }
.checkbox-wrap input { width: 16px; height: 16px; }
.action-btns { position: absolute; top: 7px; right: 7px; display: none; gap: 4px; }
.preview-item:hover .action-btns { display: flex; }
.btn-icon-download {
  border: 0; padding: 3px 8px; border-radius: 7px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--sh-sm);
  cursor: pointer; font-size: .8rem;
}

.floating-tooltip {
  position: fixed; z-index: 999;
  display: none;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(29, 29, 31, .9);
  color: #fff;
  font-size: .78rem;
  font-weight: 550;
  white-space: nowrap;
  pointer-events: none;
}

/* bookmark tree --------------------------------------------------------- */
.bookmark-tree {
  max-height: 340px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: auto;
}
.bookmark-tree-item { font-size: .89rem; }
.bookmark-tree-label { display: flex; align-items: center; gap: 9px; padding: 5px 4px; }
.bookmark-tree-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-tree-page { font-size: .78rem; color: var(--text-3); }
.bookmark-tree-children { margin-left: 8px; padding-left: 9px; border-left: 1px dashed var(--line-2); }

/* canvas / spread ------------------------------------------------------- */
.canvas-wrap {
  display: flex; justify-content: center;
  margin-top: 12px; padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: auto;
}
#split-book-preview-canvas { max-width: 100%; border-radius: 8px; box-shadow: var(--sh-sm); cursor: col-resize; }
.kv { font-size: .89rem; color: var(--text-2); }
.kv b { color: var(--text); }

/* ==========================================================================
   8. Specialised tools
   ========================================================================== */
.qr-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.qr-box {
  display: flex; flex-direction: column;
  padding: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.qr-box--preview { background: var(--surface); align-items: center; justify-content: center; }
.qr-preview {
  display: grid; place-items: center;
  width: 100%; min-height: 250px; aspect-ratio: 1 / 1;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.qr-preview canvas, .qr-preview img { max-width: 100%; max-height: 100%; }
.qr-hint { margin-top: 12px; color: var(--text-3); font-size: .9rem; text-align: center; }
.qr-charcount { margin-top: 6px; font-size: .82rem; color: var(--text-3); text-align: right; }
.qr-charcount.warn { color: var(--rose); font-weight: 600; }
.qr-charcount.caution { color: var(--amber); font-weight: 600; }

.cmp-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.cmp-status { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--text-2); }
.cmp-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(47, 158, 68, .6); }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; }
.cmp-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--text-2); }
.cmp-swatch { width: 15px; height: 15px; border-radius: 5px; border: 1px solid var(--line-2); }
.cmp-swatch.ins { background: #b7ebd2; }
.cmp-swatch.del { background: #ffc9c5; }

.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmp-panel {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.cmp-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface-sunk);
  font-size: .95rem;
  font-weight: 650;
}
.cmp-panel__head .cnt {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .06);
  font-size: .77rem;
  font-weight: 550;
}
.cmp-editor {
  flex: 1; min-height: 240px;
  padding: 16px;
  background: #fff;
  font-size: 15px;
  line-height: 1.7;
  outline: none;
  overflow: auto;
}
.cmp-editor[contenteditable="true"]:empty::before { content: attr(data-ph); color: var(--text-3); }
.cmp-editor--out { background: #f7fcfa; }
.hl-ins { background: #b7ebd2; border-radius: 3px; padding: 0 2px; }
.hl-del { background: #ffc9c5; border-radius: 3px; padding: 0 2px; color: #7a3b38; text-decoration: line-through; }

.cmp-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 16px 0; padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.cmp-stat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: .87rem;
}
.cmp-stat.add b { color: var(--green); }
.cmp-stat.del b { color: var(--rose); }

.ico-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; }
.ico-box { padding: 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.ico-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ico-srcinfo {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.ico-srcinfo img {
  width: 50px; height: 50px; border-radius: 9px; object-fit: contain;
  border: 1px solid var(--line);
  background: conic-gradient(#eee 0 25%, #fff 0 50%, #eee 0 75%, #fff 0) 0 0/12px 12px;
}
.ico-srcinfo__meta { flex: 1; min-width: 0; }
.ico-srcinfo__meta b { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico-srcinfo__meta span { font-size: .8rem; color: var(--text-2); }

.ico-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.ico-size input { display: none; }
.ico-size span {
  display: block; padding: 8px 4px;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: .15s var(--ease);
}
.ico-size span:hover { border-color: var(--accent); }
.ico-size input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.ico-size b { display: block; font-size: .84rem; font-weight: 600; }
.ico-size small { display: block; margin-top: 1px; font-size: .68rem; color: var(--text-3); }

.ico-colorline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ico-colorline input[type=color] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); cursor: pointer; }
.ico-colorline__hint { font-size: .78rem; color: var(--text-3); }
.ico-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.ico-swatch {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: .14s var(--ease);
}
.ico-swatch:hover { transform: scale(1.12); }
.ico-swatch.is-sel { border-color: var(--text); }
.ico-swatch--tr { background: conic-gradient(#ddd 0 25%, #fff 0 50%, #ddd 0 75%, #fff 0) 0 0/9px 9px !important; }

.ico-previews { display: flex; flex-wrap: wrap; gap: 14px; }
.ico-pv {
  min-width: 100px; padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-align: center;
  transition: .15s var(--ease);
}
.ico-pv:hover { border-color: var(--accent); box-shadow: var(--sh-sm); }
.ico-pv__box {
  display: grid; place-items: center;
  height: 96px; margin-bottom: 8px;
  border-radius: 8px;
  background: conic-gradient(#f0f0f0 0 25%, #fff 0 50%, #f0f0f0 0 75%, #fff 0) 0 0/14px 14px;
}
.ico-pv__box canvas { max-width: 96px; max-height: 96px; image-rendering: pixelated; }
.ico-pv b { display: block; font-size: .82rem; color: var(--text-2); }
.ico-pv a { font-size: .78rem; font-weight: 600; color: var(--accent); }
.ico-pv a:hover { text-decoration: underline; }

.ico-browser { max-width: 520px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--sh-sm); }
.ico-browser__bar { display: flex; align-items: flex-end; gap: 10px; padding: 8px 12px 0; background: #f0f1f5; }
.ico-browser__dots { display: flex; gap: 6px; padding-bottom: 12px; }
.ico-browser__dots i { width: 10px; height: 10px; border-radius: 50%; }
.ico-browser__dots i:nth-child(1) { background: #fc605c; }
.ico-browser__dots i:nth-child(2) { background: #fdbc40; }
.ico-browser__dots i:nth-child(3) { background: #34c749; }
.ico-browser__tab { display: flex; align-items: center; gap: 8px; min-width: 190px; padding: 8px 16px; background: #fff; border-radius: 10px 10px 0 0; font-size: .82rem; }
.ico-browser__tab img { width: 16px; height: 16px; }
.ico-browser__tab em { font-style: normal; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico-browser__url { padding: 8px 14px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--text-3); }

.ico-toast {
  position: fixed; left: 50%; bottom: 40px; z-index: 1100;
  padding: 11px 21px;
  border-radius: var(--r-pill);
  background: rgba(29, 29, 31, .93);
  color: #fff;
  font-size: .88rem;
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
  transition: .26s var(--ease-out);
  pointer-events: none;
}
.ico-toast.show { opacity: 1; transform: translateX(-50%); }

/* ==========================================================================
   9. Editorial pages
   ========================================================================== */
.page-hero { padding: clamp(38px, 5.5vw, 74px) 0 clamp(24px, 3vw, 38px); }
.page-hero h1 { margin-bottom: 16px; }
.page-hero .lead { max-width: 640px; color: var(--text-2); font-size: clamp(1.04rem, 1.7vw, 1.2rem); line-height: 1.5; }
.page-hero--center { text-align: center; }
.page-hero--center .lead { margin-inline: auto; }

.prose { max-width: var(--maxw-narrow); }
.prose h2 {
  margin: clamp(38px, 4.4vw, 56px) 0 14px;
  font-size: clamp(1.28rem, 2.2vw, 1.62rem);
  padding-top: 4px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 10px; font-size: 1.1rem; }
.prose p, .prose li { color: var(--text-2); font-size: 1.005rem; line-height: 1.68; }
.prose p { margin: 0 0 1.05em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.prose li { margin-bottom: .45em; }
.prose strong { color: var(--text); font-weight: 650; }
.prose a { color: var(--accent); }
.prose a:hover { text-decoration: underline; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
.prose blockquote {
  margin: 24px 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--line-2);
  color: var(--text-2);
  font-style: italic;
}

.updated { display: inline-block; margin-bottom: 26px; font-size: .85rem; color: var(--text-3); }

.toc {
  margin-bottom: 40px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.toc h2 { font-size: .82rem !important; margin: 0 0 12px !important; padding: 0 !important; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: 6px; }
.toc a { color: var(--text-2); font-size: .94rem; }
.toc a:hover { color: var(--accent); }

/* contact --------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(26px, 4vw, 54px); align-items: start; }
.contact-card {
  padding: clamp(22px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.contact-mail {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px;
  background: var(--accent-soft);
  border-radius: var(--r-md);
  font-weight: 600;
  color: var(--accent-deep);
  word-break: break-all;
}
.contact-mail svg { width: 20px; height: 20px; flex: none; }
.contact-mail:hover { background: #e3eeff; }

.info-list { display: grid; gap: 20px; margin: 26px 0 0; }
.info-item { display: flex; gap: 14px; }
.info-item > svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 3px; }
.info-item h3 { font-size: .99rem; margin-bottom: 4px; }
.info-item p { font-size: .92rem; color: var(--text-2); margin: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }

.form-note {
  margin-top: 14px;
  padding: 13px 16px;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  font-size: .86rem;
  color: var(--text-2);
}

/* guide articles -------------------------------------------------------- */
.article { padding: 30px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.article:first-of-type { border-top: 0; }
.article h2 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); margin-bottom: 12px; }
.article p { color: var(--text-2); font-size: 1.005rem; line-height: 1.68; margin: 0; }
.article__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .82rem; color: var(--text-3); }

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer {
  margin-top: var(--section-y);
  padding: clamp(40px, 5vw, 62px) 0 30px;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  font-size: .9rem;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 34px 26px;
}
.site-footer__about { max-width: 320px; }
.site-footer__about p { margin: 14px 0 0; color: var(--text-2); font-size: .88rem; line-height: 1.55; }
.site-footer__col h3 {
  margin-bottom: 13px;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer__col a { color: var(--text-2); font-size: .89rem; }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__langs { display: flex; flex-wrap: wrap; gap: 6px; }
.site-footer__langs a {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .8rem;
  color: var(--text-2);
}
.site-footer__langs a:hover { border-color: var(--accent); color: var(--accent-deep); }
.site-footer__langs a[aria-current="true"] { background: var(--text); border-color: var(--text); color: #fff; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin-top: 44px; padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: .83rem;
  color: var(--text-3);
}
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; }
.site-footer__bottom a { color: var(--text-3); }
.site-footer__bottom a:hover { color: var(--accent); }

#backToTop {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 44px; height: 44px;
  display: none; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--sh-md);
  color: var(--text);
  cursor: pointer;
  transition: .2s var(--ease);
}
#backToTop.show { display: grid; }
#backToTop:hover { transform: translateY(-2px); color: var(--accent); }
.icon-up { transform: rotate(180deg); }

/* ==========================================================================
   11. Motion & responsive
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__about { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 900px) {
  .qr-layout, .cmp-grid, .ico-layout, .contact-grid { grid-template-columns: 1fr; }
  .ico-sizes { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { justify-content: space-between; }
  .site-header__actions { margin-left: 0; }
  .lang__panel { grid-template-columns: 1fr 1fr; }
  .tool-hero__head { flex-direction: column; gap: 16px; }
  .hero__stats { gap: 26px; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .steps { gap: 22px; }
  .site-footer__top { grid-template-columns: 1fr; }
  .faq__body { padding-right: 0; }
  .btn { padding: 11px 18px; }
  /* The header CTA is 122px of the ~354px available here, which pushed the
     menu button 27px off-screen. It points at /#tools, which the mobile menu
     already offers, so drop it rather than squeeze the brand. */
  .site-header__cta { display: none; }
}

/* --- home page --------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; gap: 38px; }
  .hero__sub { max-width: none; }
  .hero__media { max-width: 640px; }
  .hero__chip--a { left: -8px; bottom: 24px; }
  .hero__chip--b { right: -8px; top: 22px; }
}

@media (max-width: 720px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  /* one chip is enough on a phone; two start covering the photograph */
  .hero__chip--b { display: none; }
  .hero__chip--a { left: 10px; bottom: 10px; }
}

@media (max-width: 560px) {
  .feat-grid, .tst-grid { grid-template-columns: 1fr; }
  .hero__chip { padding: 8px 13px 8px 9px; gap: 9px; }
  .hero__chip__ico { width: 29px; height: 29px; border-radius: 9px; }
  .hero__chip__ico svg { width: 15px; height: 15px; }
  .hero__chip__txt b { font-size: .82rem; }
  .hero__chip__txt small { font-size: .7rem; }
  .hero__points { gap: 6px 14px; font-size: .84rem; }
}

/* print: strip the chrome, keep the tool */
@media print {
  .site-header, .site-footer, #backToTop, .cta-band, .ad-slot { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   12. Advertising slots
   Every publisher ID, unit ID, on/off switch and reserved height lives in
   inc/config.php §7 — templates only call ad('slot_key').
   ========================================================================== */
.ad-slot {
  width: 100%;
  max-width: var(--maxw);
  margin: clamp(30px, 4vw, 54px) auto;
  padding: 0 var(--gutter);
}
/* Used where the surrounding layout already provides a .container. */
.ad-slot--flush { max-width: none; padding-inline: 0; }

.ad-slot__label {
  display: block;
  margin-bottom: 9px;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-3);
}

/* Reserve the slot's height so a late-loading unit cannot shift the page. */
.ad-slot .adsbygoogle {
  display: block;
  min-height: var(--ad-h, 280px);
}

/* Preview box — rendered instead of the <ins> while ADSENSE_CLIENT is still
   the placeholder ID, so the layout can be reviewed before launch. */
.ad-slot.is-preview .ad-slot__box {
  display: grid;
  place-items: center;
  min-height: var(--ad-h, 280px);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: .78rem;
  letter-spacing: .05em;
}

/* A unit Google could not fill is marked data-ad-status="unfilled". Collapsing
   it keeps the page from showing a tall empty hole where an ad did not serve.
   (Google still reserves the space, so this is a deliberate choice, not a fix
   for a bug.) */
.ad-slot:has(.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* --- Full-width-responsive units on phones -------------------------------
   Below a 488px viewport Google stops sizing to the slot and draws a 1:1
   square as wide as the VIEWPORT. Measured, not guessed: at 487px the unit is
   487x487, at 488px it is 452x280. So under that breakpoint the slot has to
   drop its gutter and go full-bleed, or the ad overflows the page by one
   gutter on each side. Only applies while ADSENSE_FULL_WIDTH is on. */
@media (max-width: 487px) {
  .ad-slot--fw { padding-inline: 0; }
  /* width:auto is required — .ad-slot is width:100%, which pins the box to the
     container and makes a negative margin slide it instead of widening it. */
  .ad-slot--fw.ad-slot--flush { width: auto; margin-inline: calc(-1 * var(--gutter)); }
  .ad-slot--fw .adsbygoogle,
  .ad-slot--fw.is-preview .ad-slot__box { min-height: var(--ad-h-sm, 100vw); }
}

@media (max-width: 560px) {
  .ad-slot { margin-block: 26px; }
}