/* Shared landing-page styles — extracted from the per-page inline <style>
   blocks so design tweaks are a one-file edit. Linked by every converter /
   tool landing page (subdir pages use ../landing.css).

   2026-07 visual upgrade: tokens + nav aligned with converter.html (the
   canonical design reference) so navigating between the app and the landing
   pages no longer shifts shade or header. Adds depth (grid texture, aurora
   glow, elevated cards), a glass sticky nav, refined type, focus-visible
   rings and reduced-motion support. Class contract unchanged — no page
   markup was touched. */
html{scroll-padding-top:88px;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Token family matches converter.html :root — one palette across the site. */
:root{
  --bg:#0d0d0f;--bg2:#141417;--bg3:#1c1c21;
  --accent:#c8f03c;--accent-soft:rgba(200,240,60,.12);
  --text:#f0f0ec;--muted:#8a8a93;--muted2:#5a5a63;
  --border:rgba(255,255,255,0.08);--border-h:rgba(255,255,255,0.18);
  --r:14px;--sans:'Syne',sans-serif;--mono:'DM Mono',monospace;
}
::selection{background:rgba(200,240,60,.28);color:#fff}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;line-height:1.6;overflow-x:hidden}
/* Subtle blueprint grid — same texture as converter.html, so the whole site
   reads as one product. Sits behind everything, never intercepts input. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px}
/* Aurora — a single soft lime glow anchored to the hero. Fixed + faint so it
   adds depth without hurting text contrast or printing. */
body::after{content:'';position:fixed;top:-260px;left:50%;transform:translateX(-50%);width:1100px;height:640px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(200,240,60,.10) 0%,rgba(200,240,60,.035) 38%,transparent 68%)}
/* Content sits above the texture layers. */
body>nav,main,.fmly-ft{position:relative;z-index:1}

/* ── NAV — glass sticky bar, mirrors converter.html's unified nav ──────────
   Three-column grid (1fr auto 1fr) so the menu sits at the TRUE viewport
   centre regardless of logo / CTA widths — identical mechanism to the unified
   nav on converter/pricing/api. On mobile .nav-links is display:none, leaving
   logo left + CTA right via the same justify-self anchors.
   Scoped to body>nav so the footer's inner <nav class="fmly-ft-nav"> can't
   inherit page-header padding/borders (it silently did before). */
body>nav{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 48px;height:64px;
  border-bottom:1px solid var(--border);background:rgba(13,13,15,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.logo{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none;justify-self:start}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:28px;list-style:none;justify-self:center}
.nav-links a{color:#a5a5ad;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.2px;transition:color .15s}
.nav-links a:hover{color:#fff}
.nav-cta{padding:9px 20px;background:var(--accent);color:#000;border:none;border-radius:9px;font-weight:700;font-size:13px;cursor:pointer;text-decoration:none;justify-self:end;
  box-shadow:0 0 0 1px rgba(200,240,60,.25),0 4px 14px rgba(200,240,60,.16);transition:transform .15s,box-shadow .15s,filter .15s}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 0 0 1px rgba(200,240,60,.35),0 6px 20px rgba(200,240,60,.22)}

main{max-width:920px;margin:0 auto;padding:88px 48px 120px}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ── HERO ── */
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid rgba(200,240,60,.22);border-radius:100px;padding:7px 18px;font-size:12px;font-family:var(--mono);color:var(--accent);margin-bottom:26px;animation:fadeUp .5s ease both;
  box-shadow:0 0 22px rgba(200,240,60,.08) inset}
h1{font-size:58px;font-weight:800;letter-spacing:-.035em;margin-bottom:18px;animation:fadeUp .5s .08s ease both;line-height:1.04;text-wrap:balance}
h1 em{font-style:normal;background:linear-gradient(120deg,#dcff5c 0%,var(--accent) 45%,#9fd41f 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:#b4b4bc;font-size:18px;margin-bottom:40px;max-width:580px;animation:fadeUp .5s .16s ease both;line-height:1.65}
.hero-cta{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#000;font-weight:800;font-size:16px;padding:16px 34px;border-radius:12px;text-decoration:none;animation:fadeUp .5s .24s ease both;
  box-shadow:0 0 0 1px rgba(200,240,60,.3),0 10px 32px rgba(200,240,60,.22);transition:transform .18s,box-shadow .18s,filter .18s}
.hero-cta:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 0 0 1px rgba(200,240,60,.4),0 16px 44px rgba(200,240,60,.3)}
.hero-cta:active{transform:translateY(0)}
.hero-note{color:var(--muted2);font-size:13px;margin-top:16px;font-family:var(--mono);letter-spacing:.01em;animation:fadeUp .5s .3s ease both}

/* ── BENEFITS — elevated cards with icon chips + hover lift ── */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:76px 0}
.benefit{background:linear-gradient(180deg,#16161a 0%,#121215 100%);border:1px solid var(--border);border-radius:var(--r);padding:26px 24px;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.benefit:hover{transform:translateY(-3px);border-color:var(--border-h);box-shadow:0 14px 34px rgba(0,0,0,.4),0 0 0 1px rgba(200,240,60,.06)}
.benefit-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;color:var(--accent);
  background:var(--accent-soft);border:1px solid rgba(200,240,60,.2);border-radius:12px}
/* When i18n-landing.js upgrades the decorative emoji to line-icons, render them
   lime at a consistent size. No effect on rows whose icons stay as emoji. */
.benefit-icon svg{width:24px;height:24px;display:inline-block;vertical-align:middle}
.benefit-title{font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.benefit-text{color:var(--muted);font-size:14px;line-height:1.65}

/* ── SECTION TITLES — lime kicker dash above ── */
.section-title{font-size:32px;font-weight:800;letter-spacing:-.02em;margin-bottom:36px}
.section-title::before{content:'';display:block;width:28px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),rgba(200,240,60,.25));margin-bottom:14px}

/* ── STEPS ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:84px}
.step{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border:1px solid var(--border);border-radius:var(--r);background:rgba(255,255,255,.014);
  transition:border-color .2s ease}
.step:hover{border-color:var(--border-h)}
.step-num{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);border:1px solid rgba(200,240,60,.35);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--accent);
  box-shadow:0 0 14px rgba(200,240,60,.12)}
.step-title{font-size:16px;font-weight:700;letter-spacing:-.01em}
.step-text{color:var(--muted);font-size:14px;line-height:1.65}

/* ── FAQ — card rows instead of bare dividers ── */
.faq-q{border:1px solid var(--border);border-radius:12px;background:var(--bg2);padding:4px 22px;margin-bottom:10px;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.faq-q:hover{border-color:var(--border-h)}
.faq-q[open]{border-color:rgba(200,240,60,.28);background:#15151a}
.faq-q summary{font-size:15px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";color:var(--accent);font-size:22px;flex-shrink:0;transition:transform .2s ease}
.faq-q[open] summary::after{content:"+";transform:rotate(45deg)}
.faq-q p{color:#b0b0b8;font-size:14px;margin:0 0 18px;line-height:1.7}

/* ── RELATED ── */
.related{margin-top:76px}
.related-title{font-size:13px;font-weight:600;color:var(--muted2);margin-bottom:16px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.related-links{display:flex;flex-wrap:wrap;gap:10px}
.related-link{background:var(--bg2);border:1px solid var(--border);border-radius:100px;padding:9px 18px;text-decoration:none;color:#c8c8ce;font-size:13px;font-weight:600;
  transition:border-color .2s,color .2s,background .2s,transform .15s}
.related-link:hover{border-color:rgba(200,240,60,.45);color:#fff;background:rgba(200,240,60,.06);transform:translateY(-1px)}

/* ── CALLOUTS ── */
.callout-warn{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.22);border-left:3px solid #fbbf24;border-radius:10px;padding:18px 22px;margin:32px 0;font-size:14px;color:#ddd;line-height:1.65}
.callout-warn strong{color:#fbbf24}
.callout-ok{background:rgba(200,240,60,.05);border:1px solid rgba(200,240,60,.18);border-left:3px solid var(--accent);border-radius:10px;padding:18px 22px;margin:32px 0;font-size:14px;color:#ddd;line-height:1.65}
.callout-ok strong{color:var(--accent)}

/* ── A11Y + polish ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
html{scrollbar-color:#2e2e35 var(--bg)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a2a30;border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3a3a42}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(max-width:900px){body>nav{padding:0 20px}.nav-links{display:none}main{padding:48px 20px}h1{font-size:38px}.benefits,.steps{grid-template-columns:1fr}body::after{width:140vw}}
/* FORMATLY_MOBILE_480 */
@media(max-width:480px){main{padding:32px 16px}h1{font-size:29px}.hero-sub{font-size:15px}.hero-cta{font-size:14px;padding:14px 24px}.benefit{padding:20px 16px}.section-title{font-size:24px}}

/* ── footer ── */
.fmly-ft{border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.015) 0%,transparent 40%),var(--bg);padding:40px 24px;margin-top:72px;font-family:var(--sans)}
.fmly-ft-row{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between}
.fmly-ft-logo{font-size:18px;font-weight:800;letter-spacing:-.02em;color:#fff;text-decoration:none}
.fmly-ft-logo span{color:var(--accent)}
.fmly-ft-nav{display:flex;flex-wrap:wrap;gap:20px}
.fmly-ft-nav a{color:#9a9aa2;text-decoration:none;font-size:13px;font-weight:600;transition:color .15s}
.fmly-ft-nav a:hover{color:#fff}
.fmly-ft-legal{max-width:1100px;margin:20px auto 0;font-family:var(--mono);font-size:11px;color:var(--muted2);letter-spacing:.03em;line-height:1.7}

/* ── TOOLS DIRECTORY (tools.html) ──
   The 145 anchors are static HTML; search and the category chips only toggle
   [hidden] on what is already rendered. Wider than the 920px prose column,
   because a directory is scanned, not read. */
.tl-wrap{max-width:1180px}
.tl-controls{display:flex;flex-direction:column;gap:16px;margin:0 0 44px}
.tl-search{width:100%;max-width:520px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:13px 16px;color:var(--text);font-family:var(--sans);font-size:15px;transition:border-color .2s}
.tl-search:focus{outline:none;border-color:rgba(200,240,60,.45)}
.tl-search::placeholder{color:var(--muted2)}
.tl-chips{display:flex;flex-wrap:wrap;gap:9px}
.tl-chip{background:var(--bg2);border:1px solid var(--border);border-radius:100px;padding:8px 17px;color:#c8c8ce;
  font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.tl-chip:hover{border-color:rgba(200,240,60,.35);color:#fff}
.tl-chip.is-on{background:var(--accent-soft);border-color:rgba(200,240,60,.5);color:var(--accent)}
.tl-sec{margin-bottom:52px}
.tl-sec[hidden]{display:none}
.tl-n{color:var(--muted2);font-weight:500}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px;margin-top:18px}
.tl-card{display:flex;flex-direction:column;gap:5px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:15px 17px;text-decoration:none;transition:border-color .2s,background .2s,transform .15s}
.tl-card[hidden]{display:none}
.tl-card:hover{border-color:rgba(200,240,60,.45);background:rgba(200,240,60,.05);transform:translateY(-2px)}
.tl-card-t{color:#f0f0ec;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.tl-card:hover .tl-card-t{color:var(--accent)}
.tl-card-d{color:var(--muted);font-size:12.5px;line-height:1.5}
.tl-none{color:var(--muted);font-size:15px;padding:28px 0}
@media(max-width:640px){
  .tl-wrap{padding-left:20px;padding-right:20px}
  .tl-grid{grid-template-columns:1fr}
}