/* FastHan — bright editorial theme (Hero B + Inter, chosen by Han 8 Nov 2026).
   Rebuilt 9 Nov 2026 to match the approved demo (v22) section for section:
   hero B, collage, pink steps, community cards, tool cards with numbers,
   marquee, DM phone panel, lavender privacy, calc slider, guides, FAQ,
   dark footer with CTA card. White #FFFFFF, ink #0F172A, muted #64748B,
   line #E8E8EC, primary red #E5322D (iLovePDF), red tint #FDECEA.
   Font: Inter variable 100-900, self-hosted (latin + latin-ext).
   No gradients, no glassmorphism, no purple. Pill buttons, soft borders. */

@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Inter-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/Inter-ext.woff2') format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #FFFFFF;
  --ink: #0F172A;
  --muted: #64748B;
  --line: #E8E8EC;
  --red: #E5322D;
  --red-dark: #C42722;
  --red-tint: #FDECEA;
  --red-soft: #FDECEA;
  --card: #FFFFFF;
  --nav-bg: #111113;
  --grey: #6B6B70;
  --grey-soft: #F4F4F6;
  --lav: #ECE9FB;
  --mint: #DFF5E7;
  --peach: #FFE9D6;
  --blush: #FDE8EC;
  --sky: #E3ECFD;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; line-height: 1.12; margin: 0 0 12px; letter-spacing: -0.02em; }
h1 { font-size: clamp(40px, 6vw, 68px); }
h2 { font-size: clamp(26px, 3.4vw, 36px); }
h3 { font-size: 20px; }
p { margin: 0 0 14px; }
a { color: var(--red); }
a:hover { color: var(--red-dark); }
img { max-width: 100%; }
button { font-family: 'Inter', system-ui, sans-serif; cursor: pointer; }
input, select, textarea { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 760px; }
.kicker {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--red-dark); background: var(--red-soft);
  padding: 7px 15px; border-radius: 999px; margin-bottom: 16px;
}
.red { color: var(--red); }
.section-sub { color: var(--grey); max-width: 620px; font-size: 14.5px; }

/* ---------- header: floating black Dynamic Island pill (demo v19) ---------- */
.site-header {
  position: sticky; top: 12px; z-index: 60;
  background: transparent;
  display: flex; justify-content: center;
  padding: 12px 14px 4px;
  pointer-events: none;
}
.header-in {
  --ease-island: cubic-bezier(0.22, 1, 0.36, 1);
  --island-scale: 1;
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--nav-bg); border-radius: 999px;
  padding: 8px 10px 8px 18px;
  box-shadow: 0 18px 44px rgba(20, 20, 20, 0.28);
  max-width: 100%;
  transform-origin: top center;
  scale: var(--island-scale);
  transition: scale 0.45s var(--ease-island), padding 0.45s var(--ease-island),
    gap 0.45s var(--ease-island), box-shadow 0.45s var(--ease-island);
  animation: island-in 0.85s var(--ease-island) 0.08s both;
}
.header-in:hover { --island-scale: 1.012; box-shadow: 0 22px 52px rgba(20, 20, 20, 0.32); }
.header-in.is-shrunk:hover { --island-scale: 0.977; }
.header-in .logo-mark { transition: width 0.45s var(--ease-island), height 0.45s var(--ease-island), font-size 0.45s var(--ease-island); }
.header-in.is-shrunk .logo-mark { width: 26px; height: 26px; font-size: 15px; }
.header-in .logo-word { transition: font-size 0.45s var(--ease-island); }
.header-in.is-shrunk .logo-word { font-size: 17px; }
.header-in .site-nav a { transition: background 0.15s ease, color 0.15s ease, padding 0.45s var(--ease-island), font-size 0.45s var(--ease-island); }
.header-in.is-shrunk .site-nav a { padding: 6px 11px; font-size: 12.5px; }
.header-in .site-nav select.lang-switch { transition: background 0.15s ease, padding 0.45s var(--ease-island); }
.header-in.is-shrunk .site-nav select.lang-switch { padding: 6px 9px; }
.header-in .btn-nav-cta { transition: background 0.15s ease, transform 0.15s ease, padding 0.45s var(--ease-island), font-size 0.45s var(--ease-island); }
.header-in.is-shrunk .btn-nav-cta { padding: 8px 15px; font-size: 12.5px; }
@keyframes island-in {
  from { transform: translateY(-18px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; margin-right: 6px; flex: none; }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-weight: 900; font-size: 18px; line-height: 1;
}
.logo-word { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: #fff; }
.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.site-nav a {
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
.site-nav a:hover { background: rgba(255, 255, 255, 0.12); }
.site-nav a.on { background: #fff; color: var(--ink); }
.site-nav select.lang-switch {
  font-size: 13px; font-weight: 600; color: #fff;
  background: transparent; border: none; border-radius: 999px;
  padding: 8px 6px; cursor: pointer; max-width: 130px;
}
.site-nav select.lang-switch option { color: var(--ink); }
.site-nav .btn-nav-cta {
  flex: none; border: none; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 13px; font-weight: 700;
  padding: 10px 18px; margin-left: 4px; white-space: nowrap;
}
.site-nav .btn-nav-cta:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- buttons (pills) ---------- */
.btn {
  display: inline-block; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  padding: 13px 24px; border-radius: 999px;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-stamp { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(229, 50, 45, 0.35); }
.btn-stamp:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-1px); color: #fff; }
.btn-stamp:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); }
.btn-ghost:hover { transform: translateY(-1px); border-color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; transform: translateY(-1px); }

/* ---------- privacy badge (clean red pill) ---------- */
.stamp {
  display: inline-block;
  background: var(--red-tint); color: var(--red);
  font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
}
.stamp.small { font-size: 11px; padding: 5px 10px; }

/* ---------- hero B (bright editorial, left-aligned — demo v22) ---------- */
.hero-b { padding: 4px 0 6px; background: #fff; }
.hero-b-in { padding-top: 0; }
.hero-b-title { font-size: clamp(52px, 8.6vw, 108px); line-height: 0.95; letter-spacing: -0.03em; margin: 8px 0 26px; }
.hero-b-title .red { color: var(--red); }
.hero-b-rule { height: 8px; background: var(--ink); border-radius: 999px; overflow: hidden; margin-bottom: 30px; }
.hero-b-rule i { display: block; height: 100%; width: 18%; background: var(--red); }
.hero-b-meta { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 36px; align-items: start; }
.hero-b-sub { font-size: 17px; line-height: 1.65; color: #3F3F45; max-width: 52ch; margin: 0; }
.hero-b-side { justify-self: end; text-align: right; }
.hero-b-cta { margin: 0 0 10px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.hero-b-note { font-size: 12.5px; color: var(--grey); margin: 0; }
.hero-b-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.mini-tool { display: flex; align-items: center; gap: 12px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 16px; background: #fff; text-decoration: none; color: var(--ink); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.mini-tool:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20,20,20,0.08); color: var(--ink); }
.mini-tool-ic { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 11px; background: var(--red-soft); color: var(--red); }
.mini-tool[data-cat="image"] .mini-tool-ic { background: var(--mint); color: #177A4C; }
.mini-tool-ic svg { width: 100%; height: 100%; display: block; }
.mini-tool-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mini-tool-tx b { font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-tool-tx small { font-size: 11px; color: var(--grey); font-weight: 600; }
.mini-tool-arrow { font-weight: 700; color: var(--grey); flex: none; }

/* ---------- collage opener: white card, papers + floating chips + stats ---------- */
.collage-section { padding: 108px 0 0; }
.hero-b + .collage-section { padding-top: 54px; }
.collage-card {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: 32px;
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.07);
  padding: 44px;
}
.collage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.collage-copy h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 500; line-height: 1.15; margin-bottom: 14px; }
.collage-copy p { color: var(--grey); font-size: 14.5px; max-width: 42ch; }
.stamp-row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px; }
.stamp-row .stamp { background: var(--blush); color: #8A2432; }
.stamp-row .stamp:nth-child(2) { background: var(--mint); color: #14532D; }
.stamp-row .stamp:nth-child(3) { background: var(--sky); color: #1E3A5F; }
.paper-stack { display: flex; flex-direction: column; gap: 13px; position: relative; }
.paper {
  position: relative; width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 14px 34px rgba(20, 20, 20, 0.08);
  padding: 15px 18px; text-align: left;
}
.paper-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.paper-lines { display: block; height: 36px; border-radius: 4px; background: repeating-linear-gradient(to bottom, #EBEBF0 0 2px, transparent 2px 12px); }
.paper .paper-stamp {
  position: absolute; right: 14px; bottom: 14px;
  background: var(--red-soft); color: var(--red-dark);
  font-weight: 700; font-size: 11.5px; letter-spacing: 0.03em;
  padding: 5px 12px; border-radius: 999px;
}
.paper.p2 .paper-stamp { background: var(--peach); color: #8A4B12; }
.paper.p3 .paper-stamp { background: var(--mint); color: #14532D; }
.paper.p1 { transform: rotate(-1.1deg); }
.paper.p2 { transform: rotate(0.8deg); }
.paper.p3 { transform: rotate(-0.6deg); }
.float-chip {
  position: absolute; z-index: 3;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.12);
  font-size: 12px; font-weight: 700; color: var(--ink);
  padding: 8px 14px; display: inline-flex; align-items: center; gap: 7px;
}
.float-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }
.float-chip.fc1 { top: -16px; right: 12%; transform: rotate(3deg); }
.float-chip.fc2 { bottom: 34%; left: -22px; transform: rotate(-4deg); }
.float-chip.fc2 i { background: #1F9D63; }
.float-chip.fc3 { bottom: -14px; right: 20%; transform: rotate(2deg); }
.float-chip.fc3 i { background: #7C6BD9; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; border-top: 1px solid var(--line); padding-top: 34px; }
.stat-card { display: flex; align-items: center; gap: 16px; text-align: left; }
.stat-icon {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.stat-card:nth-child(1) .stat-icon { background: var(--red-soft); color: var(--red); }
.stat-card:nth-child(2) .stat-icon { background: var(--lav); color: #5B4BC4; }
.stat-card:nth-child(3) .stat-icon { background: var(--mint); color: #14532D; }
.stat-icon svg { width: 25px; height: 25px; display: block; }
.stat-text { display: block; min-width: 0; }
.stat-text b { font-weight: 500; font-size: 42px; display: block; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.stat-text span { display: block; margin-top: 5px; font-weight: 600; font-size: 12.5px; color: var(--grey); }

/* ---------- steps: light-pink card, big numbers ---------- */
.steps-section { padding: 22px 0 0; }
.mint-card { background: var(--blush); border-radius: 32px; padding: 46px; }
.mint-card h2 { color: var(--ink); max-width: 520px; }
.steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps li { background: rgba(255, 255, 255, 0.65); border-radius: 22px; padding: 24px; }
.step-badge { font-weight: 500; font-size: 50px; line-height: 1; display: block; margin-bottom: 12px; color: var(--ink); }
.steps li:nth-child(2) .step-badge { color: var(--red); }
.steps strong { font-weight: 700; font-size: 19px; display: block; margin-bottom: 7px; }
.steps p { color: #5F4750; font-size: 13.5px; margin: 0; }
.step-dots { display: flex; gap: 8px; margin-top: 26px; }
.step-dots i { width: 34px; height: 5px; border-radius: 999px; background: var(--ink); opacity: 0.18; display: block; }

/* ---------- community: four coloured job cards ---------- */
.community-section { padding: 84px 0 0; }
.comm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; align-items: start; }
.comm-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 24px; padding: 24px 22px; min-height: 302px;
  text-decoration: none; color: var(--ink); overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.comm-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(20, 20, 20, 0.10); color: var(--ink); }
.comm-card.tall { min-height: 352px; }
.comm-card.mid { margin-top: 42px; }
.comm-card.c1 { background: var(--lav); }
.comm-card.c2 { background: var(--mint); }
.comm-card.c3 { background: var(--peach); }
.comm-card.c4 { background: var(--sky); }
.comm-icon {
  width: 58px; height: 58px; padding: 15px; border-radius: 18px;
  background: #fff; color: var(--red);
  box-shadow: 0 10px 24px rgba(20, 20, 20, 0.08);
}
.comm-card.c2 .comm-icon { color: #177A4C; }
.comm-card.c3 .comm-icon { color: #B05E14; }
.comm-card.c4 .comm-icon { color: #2B50A6; }
.comm-icon svg { width: 100%; height: 100%; display: block; }
.comm-card h3 { font-size: 20px; margin: auto 0 8px; padding-top: 20px; }
.comm-card p { font-size: 13px; line-height: 1.55; color: #4A4A52; margin: 0; }
.comm-play {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: #111113; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(20, 20, 20, 0.28);
}
.comm-play svg { width: 18px; height: 18px; display: block; margin-left: 3px; }
.comm-arrow { padding-top: 18px; font-size: 13px; font-weight: 700; color: var(--red-dark); }

/* ---------- tools grid (numbered cards, filter tabs with counts) ---------- */
.tools-section { padding: 84px 0 8px; }
.cat-tabs { display: flex; gap: 9px; flex-wrap: wrap; margin: 24px 0 28px; }
.cat-tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grey-soft); border: none; border-radius: 999px;
  padding: 10px 17px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.cat-tab .tab-ic { display: inline-flex; width: 16px; height: 16px; flex: none; color: var(--red); }
.cat-tab .tab-ic svg { width: 100%; height: 100%; display: block; }
.cat-tab .tab-count {
  font-size: 11px; font-weight: 700; line-height: 1;
  background: #fff; border-radius: 999px; padding: 3px 7px; color: var(--grey);
}
.cat-tab:hover { transform: translateY(-1px); background: #EBEBEF; }
.cat-tab.on { background: var(--ink); color: #fff; }
.cat-tab.on .tab-ic { color: #fff; }
.cat-tab.on .tab-count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 16px; }
.tool-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: 20px; min-height: 216px; text-decoration: none; color: var(--ink);
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(20, 20, 20, 0.10); border-color: #DCDCE2; color: var(--ink); }
.tool-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tool-cat {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  background: var(--blush); color: #8A2432;
  padding: 5px 11px; border-radius: 999px;
}
.tool-card[data-cat="image"] .tool-cat { background: var(--mint); color: #14532D; }
.tool-idx { font-weight: 800; font-size: 15px; color: #C6C6CD; }
.tool-icon {
  width: 54px; height: 54px; padding: 14px; margin-top: 20px;
  background: var(--red-soft); border-radius: 16px; color: var(--red);
}
.tool-card[data-cat="image"] .tool-icon { background: var(--mint); color: #177A4C; }
.tool-icon svg { width: 100%; height: 100%; display: block; }
.tool-main { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.tool-name { font-weight: 700; font-size: 19px; line-height: 1.2; }
.tool-desc { font-size: 12.5px; line-height: 1.55; color: var(--grey); }
.tool-arrow {
  margin-top: auto; align-self: flex-end;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--grey-soft); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}
.tool-card:hover .tool-arrow { background: var(--ink); color: #fff; }

/* ---------- partner strip: horizontal marquee + progress line ---------- */
.partner-section { padding: 84px 0 0; }
.marquee { overflow: hidden; margin-top: 30px; padding: 6px 0 14px; }
.marquee-track { display: flex; gap: 16px; width: max-content; will-change: transform; }
.mq-card {
  flex: none; width: 228px; min-height: 128px;
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 18px; text-decoration: none; color: var(--ink);
  box-shadow: 0 10px 26px rgba(20, 20, 20, 0.05);
}
.mq-card:hover { color: var(--ink); border-color: #DCDCE2; }
.mq-icon { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--red-soft); color: var(--red); }
.mq-card[data-cat="image"] .mq-icon { background: var(--mint); color: #177A4C; }
.mq-icon svg { width: 100%; height: 100%; display: block; }
.mq-name { font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.mq-cat { font-size: 11px; font-weight: 700; color: var(--grey); letter-spacing: 0.02em; }
.partner-progress { height: 4px; border-radius: 999px; background: var(--red-soft); overflow: hidden; margin-top: 8px; }
.partner-progress i { display: block; height: 100%; width: 0; background: var(--red); border-radius: 999px; }

/* ---------- DM panel: pink card, phone anchor, chat bubbles ---------- */
.dm-section { padding: 22px 0 0; }
.dm-card { background: var(--blush); border-radius: 32px; padding: 48px 48px 0; overflow: hidden; position: relative; }
.dm-card h2 { max-width: 560px; }
.dm-card .section-sub { color: #6E4A52; }
.dm-stage { position: relative; margin-top: 10px; }
.dm-stage .phone { margin: 34px auto -64px; }
.phone {
  width: 252px; margin: 46px auto -74px;
  background: #000; border: 3px solid #34343B; border-radius: 40px;
  padding: 10px; text-align: left;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.45);
  position: relative; z-index: 2;
}
.phone-screen { background: #fff; border-radius: 30px; padding: 14px 14px 16px; min-height: 308px; position: relative; overflow: hidden; }
.phone-notch { width: 74px; height: 20px; background: #111113; border-radius: 999px; margin: 0 auto 14px; }
.phone-app { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.phone-app .logo-mark { width: 22px; height: 22px; font-size: 13px; }
.phone-app b { font-size: 13.5px; font-weight: 700; color: var(--ink); text-transform: lowercase; }
.mini-file {
  display: flex; align-items: center; gap: 9px;
  background: #FAFAFB; border: 1px solid var(--line); border-radius: 13px;
  padding: 9px 11px; margin-bottom: 8px;
}
.mf-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--red-soft); color: var(--red); display: inline-flex; align-items: center; justify-content: center; }
.mf-ic svg { width: 14px; height: 14px; display: block; }
.mf-name { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-chip { flex: none; font-size: 9.5px; font-weight: 700; background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 8px; }
.phone-btn { display: block; text-align: center; background: var(--red); color: #fff; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 10px; margin-top: 12px; }
.phone-bar { height: 5px; border-radius: 999px; background: var(--grey-soft); margin-top: 12px; overflow: hidden; }
.phone-bar i { display: block; height: 100%; width: 72%; background: var(--red); border-radius: 999px; }
.bubble {
  position: absolute; z-index: 3; max-width: 248px;
  background: #fff; border-radius: 18px; padding: 13px 16px;
  font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--ink);
  box-shadow: 0 16px 36px rgba(122, 44, 58, 0.14);
}
.bubble small { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 700; color: var(--red); letter-spacing: 0.03em; }
.bubble.b1 { left: 2%; top: 26px; }
.bubble.b2 { right: 2%; top: 108px; }
.bubble.b3 { left: 4%; bottom: 128px; }
.bubble.b4 { right: 3%; bottom: 44px; }

/* ---------- privacy section (lavender card, tablet mockup left) ---------- */
.privacy-section { padding: 22px 0 0; }
.privacy-in {
  background: var(--lav); border-radius: 32px; padding: 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.privacy-section h2 { color: var(--ink); }
.privacy-section p { color: #4A4560; font-size: 14px; }
.tablet-wrap { position: relative; padding: 18px; }
.br { position: absolute; width: 34px; height: 34px; border: 0 solid #F5A623; }
.br-tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 12px; }
.br-tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 12px; }
.br-bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 12px; }
.br-br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 12px; }
.tablet { background: #111113; border-radius: 24px; padding: 12px; box-shadow: 0 26px 54px rgba(38, 32, 84, 0.25); }
.devtools { background: #fff; border-radius: 15px; padding: 20px; font-size: 13px; min-height: 190px; }
.dt-tab { display: inline-block; background: var(--ink); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 700; font-size: 12px; margin-bottom: 14px; }
.dt-row { display: block; color: var(--grey); padding: 4px 0; font-weight: 500; }
.dt-row.ok { color: #177A4C; font-weight: 600; }
.benefits { margin: 0 0 6px; }
.benefit { display: flex; gap: 13px; align-items: flex-start; padding: 13px 15px; border-radius: 18px; margin-bottom: 6px; }
.benefit.hl { background: #fff; box-shadow: 0 14px 34px rgba(38, 32, 84, 0.10); }
.benefit .b-ic {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--mint); color: #14532D;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.benefit .b-ic svg { width: 15px; height: 15px; display: block; }
.benefit p { margin: 0; }
.privacy-in .btn { margin-top: 14px; }

/* Privacy idle loop — CSS keyframes (round 4, 9 Nov).
   WHY CSS, not GSAP: the GSAP loop was driven by requestAnimationFrame
   on the main thread. In the live browser the tab's rAF is throttled
   while idle, so two live screenshots 5s apart came out IDENTICAL even
   though the loop runs fine locally (Playwright pixel-diff: 22,400 px /
   2.5% of the privacy region changed in 5s). CSS transform/opacity
   animations are compositor-driven and advance on every produced frame,
   so the section stays visibly alive in the live browser too.
   Same visual parameters as the demo / round 3: tablet -12px over a
   6.8s cycle, bracket scale 1.22 + opacity 0.6 over 3.8s, Network rows
   opacity 0.35 over 2.4s staggered, benefit icon scale 1.24 over 2.1s.
   Individual `translate`/`scale` properties let the float and the
   breathe compose on the same element (.br). */
@keyframes priv-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes priv-breathe { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.22; opacity: 0.6; } }
@keyframes priv-wave { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes priv-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.24; } }
.privacy-in .tablet { animation: priv-float 6.8s ease-in-out infinite; will-change: translate; }
.privacy-in .br { animation: priv-float 6.8s ease-in-out infinite, priv-breathe 3.8s ease-in-out infinite; will-change: translate, scale, opacity; }
.privacy-in .br-tr { animation-delay: 0s, -0.24s; }
.privacy-in .br-bl { animation-delay: 0s, -0.48s; }
.privacy-in .br-br { animation-delay: 0s, -0.72s; }
.privacy-in .dt-row { animation: priv-wave 2.4s ease-in-out infinite; will-change: opacity; }
.privacy-in .dt-row:nth-child(3) { animation-delay: -0.45s; }
.privacy-in .dt-row:nth-child(4) { animation-delay: -0.9s; }
.privacy-in .b-ic { animation: priv-pulse 2.1s ease-in-out infinite; will-change: scale; }
@media (prefers-reduced-motion: reduce) {
  .privacy-in .tablet, .privacy-in .br, .privacy-in .dt-row, .privacy-in .b-ic { animation: none; }
}

/* ---------- calculator: slider + count + tilted file card ---------- */
.calc-section { padding: 22px 0 0; }
.calc-card {
  background: #fff; border: 1px solid var(--line); border-radius: 32px;
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.07);
  padding: 48px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center;
}
.calc-num { font-size: clamp(46px, 6vw, 68px); font-weight: 500; line-height: 1; color: var(--red); letter-spacing: -0.02em; margin: 18px 0 4px; }
.calc-unit { font-size: 14px; font-weight: 600; color: var(--grey); }
.calc-slider-row { margin-top: 30px; }
.calc-slider-row label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.calc-slider-row label output { color: var(--red-dark); font-weight: 700; }
.calc-slider-row input[type="range"] { width: 100%; accent-color: var(--red); height: 28px; cursor: pointer; }
.calc-note { font-size: 12px; color: var(--grey); margin-top: 16px; max-width: 44ch; }
.calc-visual { perspective: 950px; }
.calc-photo {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 30px 60px rgba(20, 20, 20, 0.14);
  padding: 22px; transform: rotate(-3deg);
}
.calc-photo .cp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.calc-photo .cp-head b { font-size: 14px; font-weight: 700; text-transform: lowercase; }
.calc-photo .paper { box-shadow: none; margin-bottom: 10px; }
.cp-done {
  display: inline-block; margin-top: 6px;
  background: var(--mint); color: #14532D;
  font-weight: 700; font-size: 12px; padding: 7px 15px; border-radius: 999px;
}

/* ---------- guides ---------- */
.guides-section { padding: 84px 0 0; }
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; align-items: start; }
.guide-card {
  position: relative; display: block; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  padding: 26px 24px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(20, 20, 20, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(20, 20, 20, 0.10); color: var(--ink); }
.guide-card.raise { transform: translateY(-14px); box-shadow: 0 24px 50px rgba(20, 20, 20, 0.11); }
.guide-card.raise:hover { transform: translateY(-17px); }
.guide-card .tri { position: absolute; top: 0; right: 0; width: 54px; height: 54px; background: var(--blush); clip-path: polygon(100% 0, 0 0, 100% 100%); }
.guide-card:nth-child(2) .tri { background: var(--peach); }
.guide-card:nth-child(3) .tri { background: var(--lav); }
.guide-tag { display: inline-block; font-size: 11px; font-weight: 700; background: var(--grey-soft); color: var(--ink); padding: 5px 11px; border-radius: 999px; margin-bottom: 16px; }
.guide-card h3 { font-size: 20px; margin-bottom: 8px; padding-right: 26px; }
.guide-card p { font-size: 13px; color: var(--grey); margin: 0 0 18px; }
.guide-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: var(--red); }
.guide-meta .gm-arrow { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

/* ---------- faq (plain ruled list, demo v22) ---------- */
.faq-section { padding: 84px 0 86px; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 0 4px; }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { cursor: pointer; font-weight: 600; font-size: 15px; padding: 18px 0; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; float: right; color: var(--red); font-size: 22px; font-weight: 700; line-height: 1; }
.faq-list details[open ] summary { color: var(--red-dark); }
.faq-list details[open ] summary::after { content: '–'; }
.faq-list details p { color: var(--grey); font-size: 13.5px; padding-bottom: 18px; max-width: 68ch; }

/* ---------- footer: dark card with CTA on top ---------- */
.site-footer { padding: 4px 14px 14px; }
.footer-card {
  background: #111113; color: #fff;
  border-radius: 36px; max-width: 1240px; margin: 0 auto;
  padding: 22px 40px 0; overflow: hidden;
}
.footer-cta {
  background: var(--red-soft); border-radius: 26px;
  text-align: center; padding: 46px 24px; color: var(--ink);
}
.footer-cta h3 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 500; line-height: 1.15; max-width: 640px; margin: 0 auto 12px; }
.footer-cta p { color: #6E3B38; font-size: 14px; max-width: 480px; margin: 0 auto 22px; }
.footer-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 46px 0 0; }
.footer-brand .logo-mark { background: var(--red); }
.footer-brand strong { font-weight: 700; font-size: 21px; margin-left: 8px; letter-spacing: -0.02em; text-transform: lowercase; }
.footer-brand p { color: #9A9AA2; font-size: 13px; margin-top: 12px; max-width: 30ch; }
.footer-col h3 { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.footer-col a { display: block; color: #9A9AA2; text-decoration: none; font-size: 13px; padding: 3px 0; }
.footer-col a:hover { color: #fff; }
.footer-col a.on { color: #fff; font-weight: 700; }
.footer-note { border-top: 1px solid #2A2A2E; margin-top: 36px; padding-top: 20px; }
.footer-note p { color: #7E7E86; font-size: 12px; margin: 0; }
.bigword {
  font-weight: 500; font-size: clamp(64px, 15.5vw, 205px); line-height: 0.85;
  letter-spacing: -0.03em; color: #1E1E23; text-align: center;
  white-space: nowrap; user-select: none; margin-top: 22px; text-transform: lowercase;
}

/* ---------- tool page ---------- */
.tool-page { padding: 48px 0 64px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.tool-head { max-width: 760px; margin-bottom: 28px; }
.tool-short { font-size: 17px; }
.privacy-badge { margin-top: 16px; }
.workspace {
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 24px; margin-bottom: 48px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.dropzone {
  border: 2px dashed var(--line); border-radius: 14px;
  background: #F8FAFC;
  padding: 36px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.dropzone:hover, .dropzone.drag { border-color: var(--red); background: var(--red-tint); }
.dropzone strong { font-size: 17px; }
.dropzone span { font-size: 13px; color: var(--muted); }
.dz-icon { width: 44px; height: 44px; color: var(--red); }
.dz-icon svg { width: 100%; height: 100%; }
.dz-btn { margin-top: 8px; }
.file-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.file-chip {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #F8FAFC;
  padding: 10px 12px; font-size: 13px;
}
.file-chip .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.file-chip .fmeta { color: var(--muted); white-space: nowrap; }
.file-chip button {
  background: none; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 700; color: var(--ink);
}
.file-chip button:hover { border-color: var(--red); color: var(--red); }
.options { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: end; }
.opt-group { display: flex; flex-direction: column; gap: 6px; }
.opt-group > span, .opt-group label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.opt-group input[type="text"], .opt-group input[type="number"], .opt-group input[type="date"], .opt-group select {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; min-width: 160px;
}
.opt-group input:focus, .opt-group select:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; }
.radio-pill span {
  display: inline-block; border: 1.5px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 700; background: #fff; cursor: pointer;
}
.radio-pill input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.radio-pill input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.progress { margin-top: 18px; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.progress-bar { flex: 1; height: 12px; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: #F1F5F9; }
.progress-bar span { display: block; height: 100%; width: 0%; background: var(--red); transition: width .2s ease; }
.error {
  margin-top: 18px; border: 1.5px solid var(--red); background: var(--red-tint); color: #8A1F10;
  border-radius: 12px; padding: 14px 16px; font-size: 14px;
}
.results { margin-top: 20px; }
.results h3 { font-size: 18px; }
.result-card {
  border: 1.5px solid var(--line); border-radius: 14px; background: #F8FAFC;
  padding: 16px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.result-card .rinfo { flex: 1; min-width: 180px; }
.result-card .rname { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.result-card .rmeta { font-size: 13px; color: var(--muted); }
.result-thumb { width: 96px; height: 96px; object-fit: cover; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.compare figure { margin: 0; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.compare figcaption { padding: 8px 12px; font-size: 12px; font-weight: 700; background: #F8FAFC; border-top: 1.5px solid var(--line); }
.compare img { display: block; width: 100%; height: auto; }
.checker { background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.privacy-note { font-size: 13px; color: var(--muted); margin-top: 18px; border-top: 1.5px dashed var(--line); padding-top: 14px; }

/* guide / how-to / why */
.guide { max-width: 760px; margin-bottom: 48px; }
.guide p { font-size: 15.5px; }
.howto { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.howto li { display: flex; gap: 12px; align-items: baseline; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.step-n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--red); color: #fff; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; transform: translateY(4px);
}
.why { border: 1.5px solid var(--red); border-radius: 14px; background: var(--red-tint); padding: 18px 20px; }
.why strong { color: var(--red); }
.why p { margin: 6px 0 0; }
.tool-faq { padding-top: 0; }
.related { border-top: 1.5px dashed var(--line); padding-top: 40px; }

/* ---------- info pages ---------- */
.info-page { padding: 48px 0 64px; }
.info-page h1 { margin-bottom: 20px; }
.info-page h2 { font-size: 22px; margin-top: 32px; }
.updated { font-size: 13px; color: var(--muted); }
.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.contact-form input, .contact-form textarea {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px; background: var(--card);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.contact-form .btn { align-self: flex-start; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-b-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-b-meta { grid-template-columns: 1fr; }
  .hero-b-side { justify-self: start; text-align: left; }
  .hero-b-cta { justify-content: flex-start; }
  .collage-grid { grid-template-columns: 1fr; gap: 28px; }
  .privacy-in { grid-template-columns: 1fr; gap: 28px; }
  .steps { grid-template-columns: 1fr; }
  .comm-grid { grid-template-columns: repeat(2, 1fr); }
  .comm-card.mid { margin-top: 0; }
  .guides-grid { grid-template-columns: 1fr; }
  .guide-card.raise { transform: none; }
  .calc-card { grid-template-columns: 1fr; gap: 32px; }
  .footer-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .header-in { flex-wrap: wrap; justify-content: center; border-radius: 28px; padding: 10px 14px; row-gap: 4px; }
  .site-nav { flex-wrap: wrap; justify-content: center; }
  .stats-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .collage-card { padding: 28px 22px; border-radius: 26px; }
  .mint-card { padding: 30px 22px; border-radius: 26px; }
  .footer-card { padding: 16px 20px 0; border-radius: 28px; }
  .footer-in { grid-template-columns: 1fr; }
  .wrap { padding: 0 16px; }
  .float-chip { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 14px; }
  .site-nav a { padding: 6px 9px; font-size: 12px; }
  .hero-b-strip { grid-template-columns: 1fr 1fr; gap: 9px; }
  .hero-b-title { font-size: clamp(42px, 13vw, 58px); }
  .comm-grid { grid-template-columns: 1fr; }
  .dm-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 26px; }
  .dm-stage .phone { order: -1; margin: 20px auto 4px; }
  .bubble { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 88%; max-width: 320px; }
  .compare { grid-template-columns: 1fr; }
  .workspace { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .header-in, .tool-card, .guide-card, .btn, .mini-tool, .comm-card, .mq-card { transition: none; }
  .header-in { animation: none; }
  /* Marquee is GSAP scroll-scrubbed; under reduced motion GSAP never runs,
     so the track becomes a wrapped grid showing every tool instead. */
  .marquee-track { flex-wrap: wrap; width: auto; }
}