/* ==========================================================================
   Free2Everyone design system
   One token set + one component layer for the whole public site.
   Pages must not ship their own ad-hoc styles.

   Full written spec (rationale, colour/type tables, breakpoint table, ad
   placement rules and sizes): see "Design system (front-end spec)" in README.md.

   Summary
   -------
   IA        iLovePDF-style tool site: hero + tool-card grid + category nav.
   Visual    apple.com-style: #fff / #f5f5f7, huge tight-tracked headlines,
             big whitespace, soft rounded cards, translucent blurred sticky nav.
   Space     4 8 12 16 24 32 48 64 96 px  (--s-1 .. --s-9)
   Radius    10 14 18 24 999             (--r-sm .. --r-pill)
   Accent    #0b6bcb is the only chromatic colour.
   Skeleton  standard side rail | 970px content column | standard side rail.
             Rails exist only at >=1440px; below that the grid collapses to a
             single full-width track with no reserved gutter.
   Ads       rail 160x600 (300x600 >=1848) | banner 970x90 / 728x90
              | mobile 320x100 (300x250 on narrow screens) | native 300x250.
             Max 3 in-content placements. Never inside .tool-stage.
   ========================================================================== */

:root{
  /* --- type ------------------------------------------------------------ */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --fs-display:clamp(38px,4.8vw,66px);
  --fs-h1:clamp(32px,3.8vw,48px);
  --fs-h2:clamp(24px,2.4vw,32px);
  --fs-h3:19px;
  --fs-lead:clamp(17px,1.35vw,21px);
  --fs-body:15px;
  --fs-sm:13px;
  --fs-xs:11.5px;
  --tracking-tight:-.022em;
  --tracking-display:-.032em;
  --tracking-wide:.08em;
  --lh-tight:1.06;
  --lh-body:1.62;

  /* --- color ----------------------------------------------------------- */
  --c-bg:#f8fbff;
  --c-bg-alt:#f1f6fd;
  --c-surface:#fff;
  --c-surface-2:#f7faff;
  --c-text:#0b1c3b;
  --c-text-2:#354665;
  --c-muted:#63718b;
  --c-line:#dfe8f4;
  --c-line-strong:#cad7e8;
  --c-accent:#105ae6;
  --c-accent-hover:#0749c8;
  --c-accent-soft:#eaf3ff;
  --c-focus:#105ae6;
  --c-success:#0a7a45;
  --c-success-bg:#eefaf2;
  --c-danger:#b42318;
  --c-danger-bg:#fef3f2;

  /* --- radius / shadow / space ----------------------------------------- */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:24px;
  --r-pill:999px;
  --sh-1:0 2px 7px rgba(22,72,142,.05);
  --sh-2:0 16px 40px rgba(22,72,142,.11);
  --sh-3:0 24px 64px rgba(22,72,142,.14);
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* --- layout ----------------------------------------------------------- */
  --header-h:60px;
  --content-max:1200px;
  --rail-w:160px;
  --rail-gap:24px;

  /* legacy aliases still referenced by the admin layer */
  --bg:var(--c-bg-alt);--card:var(--c-surface);--text:var(--c-text);--muted:var(--c-muted);
  --line:var(--c-line);--dark:#1d1d1f;--soft:#f0f0f3;--green:var(--c-success);--red:var(--c-danger);
  --radius:var(--r-md);--shadow:var(--sh-2);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--c-bg);color:var(--c-text);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
img,svg,iframe{max-width:100%}
.site-header,.header-inner,.page-frame,.page-frame>main{min-width:0;max-width:100vw}
h1,h2,h3,h4{margin:0;letter-spacing:var(--tracking-tight);line-height:1.12;font-weight:650}
p{margin:0}
hr{border:0;border-top:1px solid var(--c-line);margin:var(--s-7) 0}
code{font-family:var(--font-mono);font-size:.92em;background:var(--c-bg-alt);padding:2px 6px;border-radius:6px}

:focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:6px}
.skip-link{
  position:absolute;left:var(--s-4);top:-64px;z-index:200;background:var(--c-text);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);font-weight:600;transition:top .18s ease;
}
.skip-link:focus{top:var(--s-2)}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Page frame: centered content column + optional outer ad rails
   Rails only exist as grid tracks at >=1440px and are only injected there.
   ========================================================================== */
.page-frame{
  display:grid;grid-template-columns:minmax(0,1fr);
  column-gap:var(--rail-gap);
  width:100%;
}
.page-frame>main,.page-frame>.frame-slot{min-width:0;width:100%;max-width:var(--content-max);margin-inline:auto}
.ad-rail{display:none}

@media(min-width:1440px){
  .page-frame{
    grid-template-columns:var(--rail-w) minmax(0,var(--content-max)) var(--rail-w);
    justify-content:center;
  }
  .page-frame>main{grid-column:2;grid-row:1;max-width:var(--content-max)}
  .page-frame>.frame-slot{grid-column:2;grid-row:2;max-width:var(--content-max)}
  .ad-rail{display:block;grid-row:1;align-self:start;width:var(--rail-w);overflow:hidden}
  .ad-rail--left{grid-column:1}
  .ad-rail--right{grid-column:3}
  .ad-rail-stack{display:flex;flex-direction:column;gap:32px;width:var(--rail-w)}
}
@media(min-width:1848px){:root{--rail-w:300px}}

.page-shell{padding:var(--s-6) var(--s-5) var(--s-8)}
.wrap{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--s-6)}
.section{padding-block:var(--s-8)}
.band{background:var(--c-bg-alt)}
.band-white{background:var(--c-bg)}

/* ==========================================================================
   Header — sticky translucent glass bar
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(248,251,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07);
}
/* Keep mobile pinch compositing light without disabling native page zoom. */
@media (hover:none), (pointer:coarse){
  .site-header{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:#fff}
}
.header-inner{
  max-width:1440px;margin-inline:auto;min-height:var(--header-h);
  padding:0 var(--s-5);display:flex;align-items:center;gap:var(--s-5);
}
.brand{display:flex;align-items:center;gap:var(--s-2);font-weight:650;font-size:16px;letter-spacing:var(--tracking-tight)}
.brand-mark{
  display:block;width:40px;height:40px;border-radius:11px;object-fit:contain;flex:0 0 auto;
}
.header-nav{display:flex;align-items:center;gap:var(--s-1);flex:1;min-width:0}
.nav-link{
  display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--c-text-2);text-align:center;overflow-wrap:anywhere;
  transition:background .15s ease,color .15s ease;
}
.nav-link:hover{background:rgba(0,0,0,.05);color:var(--c-text)}
.nav-link[aria-current="page"]{color:var(--c-text);font-weight:600}
.header-actions{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.presence-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;max-width:220px;min-height:32px;padding:5px 10px;border:1px solid #cfe0fb;border-radius:var(--r-pill);background:#f4f8ff;color:#24446f;font-size:12px;font-weight:650;line-height:1.25;box-shadow:0 5px 16px rgba(16,90,230,.07)}
.header-presence{flex:0 1 auto;min-width:0;text-align:center}
.presence-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#8aa2c3;box-shadow:0 0 0 3px rgba(138,162,195,.16)}
.presence-pill[data-state="online"] .presence-dot{background:#19a868;box-shadow:0 0 0 3px rgba(25,168,104,.14)}
.presence-pill[data-state="unavailable"]{color:var(--c-muted);background:var(--c-bg-alt);border-color:var(--c-line)}

/* categories mega menu */
.nav-menu{position:relative}
.nav-menu>.nav-link{background:none;border:0;cursor:pointer;font-family:inherit}
.nav-menu>.nav-link .chev{transition:transform .2s ease}
.nav-menu[data-open="true"]>.nav-link{background:rgba(0,0,0,.05);color:var(--c-text)}
.nav-menu[data-open="true"]>.nav-link .chev{transform:rotate(180deg)}
.mega{
  position:absolute;left:0;top:calc(100% + 10px);z-index:110;
  min-width:520px;padding:var(--s-3);
  background:var(--c-surface-2);
  border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-1);
}
.nav-menu[data-open="true"] .mega{display:grid}
.mega a{
  display:flex;gap:var(--s-3);align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);
  transition:background .15s ease;
}
.mega a:hover{background:var(--c-accent-soft)}
.mega .mega-ico{flex:0 0 32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--c-surface);border:1px solid var(--c-line);color:var(--c-accent)}
.mega .mega-ico svg{width:18px;height:18px}
.mega strong{display:block;font-size:var(--fs-sm);font-weight:600}
.mega span{display:block;font-size:var(--fs-xs);color:var(--c-muted);line-height:1.45}

/* header search */
.header-search{display:flex;align-items:center;gap:6px;background:var(--c-bg-alt);border:1px solid transparent;border-radius:var(--r-pill);padding:5px 8px 5px 11px;min-width:210px}
.header-search:focus-within{border-color:var(--c-line-strong);background:#fff}
.header-search svg{width:15px;height:15px;color:var(--c-muted);flex:none}
.header-search input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:var(--fs-sm)}
.header-search button{border:0;background:none;padding:2px 4px;cursor:pointer;color:var(--c-muted);font-size:var(--fs-xs)}

/* hamburger */
.nav-toggle{
  display:none;align-items:center;justify-content:center;width:38px;height:38px;
  margin-left:auto;border:1px solid var(--c-line);background:#fff;border-radius:var(--r-sm);cursor:pointer;
}
.nav-toggle .bars{display:block;width:16px;height:11px;position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after,.nav-toggle .bars i{
  content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--c-text);border-radius:2px;transition:.22s ease;
}
.nav-toggle .bars::before{top:0}
.nav-toggle .bars i{top:4.75px}
.nav-toggle .bars::after{bottom:0}
.nav-toggle[aria-expanded="true"] .bars::before{top:4.75px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{bottom:4.75px;transform:rotate(-45deg)}
.nav-toggle[aria-expanded="true"] .bars i{opacity:0}

/* mobile drawer */
.mobile-nav{display:none;border-top:1px solid var(--c-line);background:var(--c-surface-2);padding:var(--s-4) var(--s-5) var(--s-6)}
.mobile-nav[data-open="true"]{display:block}
.mobile-nav .m-search{display:flex;gap:var(--s-2);margin-bottom:var(--s-4)}
.mobile-nav .m-search input{flex:1;min-width:0;border:1px solid var(--c-line);border-radius:var(--r-md);padding:12px 14px;background:#fff;outline:none}
.mobile-nav .m-search input:focus{border-color:var(--c-accent)}
.mobile-nav h2{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--c-muted);font-weight:600;margin:var(--s-4) 0 var(--s-2)}
.mobile-nav a{display:flex;align-items:center;gap:var(--s-3);padding:12px 10px;border-radius:var(--r-md);font-weight:500}
.mobile-nav a:hover,.mobile-nav a:focus-visible{background:var(--c-bg-alt)}
.mobile-nav .m-ico{width:26px;height:26px;display:grid;place-items:center;color:var(--c-accent)}
.mobile-nav .m-ico svg{width:18px;height:18px}

@media(max-width:1120px){.header-search{min-width:0;width:170px}}
@media(max-width:1000px){.header-nav .nav-link.opt{display:none}}
@media(max-width:1040px){
  :root{--header-h:92px}
  .header-nav,.header-actions{display:none}
  .nav-toggle{display:inline-flex}
  .header-inner{min-height:var(--header-h);padding:7px var(--s-4);gap:7px var(--s-3);flex-wrap:wrap}
  .brand{order:1}
  .nav-toggle{order:2}
  .header-presence{order:3;flex:1 0 100%;max-width:100%;min-height:30px;padding:4px 10px;font-size:12px;white-space:normal}
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--c-line-strong);background:#fff;color:var(--c-text);
  border-radius:var(--r-pill);padding:10px 18px;font-size:var(--fs-sm);font-weight:550;
  cursor:pointer;text-align:center;overflow-wrap:anywhere;transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.btn:hover{background:var(--c-bg-alt)}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.btn.primary:hover{background:var(--c-accent-hover);border-color:var(--c-accent-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--c-text-2)}
.btn.ghost:hover{background:rgba(0,0,0,.05);color:var(--c-text)}
.btn.lg{padding:13px 26px;font-size:var(--fs-body)}
.btn.block{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:5px;color:var(--c-accent);font-size:var(--fs-sm);font-weight:550}
.link-arrow:hover{text-decoration:underline}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{text-align:center;padding:var(--s-7) var(--s-4) var(--s-6);max-width:820px;margin-inline:auto}
.hero h1{font-size:var(--fs-display);letter-spacing:var(--tracking-display);line-height:var(--lh-tight);margin:var(--s-3) 0 var(--s-4);font-weight:650}
.hero .lead{font-size:var(--fs-lead);color:var(--c-muted);line-height:1.45;max-width:660px;margin-inline:auto}
.eyebrow{
  display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--c-accent);margin:0;
}
.search-hero{display:flex;gap:var(--s-2);max-width:600px;margin:var(--s-6) auto var(--s-3)}
.search-hero .field-wrap{
  flex:1;min-width:0;display:flex;align-items:center;gap:var(--s-2);
  background:var(--c-bg-alt);border:1px solid transparent;border-radius:var(--r-pill);padding:0 var(--s-4);
  transition:border-color .15s ease,background .15s ease;
}
.search-hero .field-wrap:focus-within{background:#fff;border-color:var(--c-accent);box-shadow:var(--sh-1)}
.search-hero .field-wrap svg{width:17px;height:17px;color:var(--c-muted);flex:none}
.search-hero input{flex:1;min-width:0;border:0;background:none;outline:none;padding:14px 0;font-size:var(--fs-body)}
.search-examples{font-size:var(--fs-sm);color:var(--c-muted)}
.search-examples a{color:var(--c-accent)}
.search-examples a:hover{text-decoration:underline}
.search-examples span{padding-inline:4px;color:var(--c-line-strong)}

.home-main{padding-top:1px}
.home-hero{text-align:center;max-width:920px;margin:0 auto;padding:42px 24px 26px}
.home-hero h1{font-size:var(--fs-display);letter-spacing:-.045em;line-height:1.02;background:linear-gradient(110deg,#071b43 25%,#105ae6 72%,#21a9ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-hero>p:not(.search-examples){max-width:720px;margin:12px auto 0;color:var(--c-muted);font-size:var(--fs-lead);line-height:1.4}
.hero-benefits{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 10px;max-width:860px;margin:18px auto 0;padding:0;list-style:none}
.hero-benefits li{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 12px;border:1px solid #cfe0f4;border-radius:999px;background:#fff;color:#17345d;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(17,55,96,.05)}
.hero-benefits li::before{content:'✓';display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e5f7ed;color:#16834c;font-size:12px;font-weight:900}
/* Page-memory chatbot: collapsed launcher plus a viewport-safe floating panel. */
.assistant-widget{position:fixed;z-index:130;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.assistant-launcher{position:relative;display:grid;place-items:center;width:64px;height:64px;padding:0;border:0;border-radius:50%;background:linear-gradient(145deg,#1d75f0,#0847c7);color:#fff;box-shadow:0 16px 36px rgba(8,71,199,.34);cursor:pointer;pointer-events:auto;transition:transform .2s ease,box-shadow .2s ease}
.assistant-launcher::before{position:absolute;inset:-7px;border:2px solid rgba(16,90,230,.2);border-radius:50%;content:"";animation:assistant-pulse 2.8s ease-out infinite}
.assistant-launcher:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 42px rgba(8,71,199,.42)}
.assistant-launcher:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 5px var(--c-focus),0 18px 40px rgba(8,71,199,.4)}
.assistant-launcher-icon,.assistant-launcher-icon svg{display:block;width:34px;height:34px}
.assistant-launcher-icon svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.assistant-launcher-icon circle{fill:currentColor;stroke:none}
@keyframes assistant-pulse{0%,45%{opacity:.65;transform:scale(.88)}75%,100%{opacity:0;transform:scale(1.18)}}
/* Launcher tip: clarifies the floating button opens a tool-finding bot, not human support.
   Shown once per browser; hidden automatically while the panel itself is open. */
.assistant-hint{position:relative;box-sizing:border-box;width:max-content;max-width:min(230px,calc(100vw - 56px));margin:0 0 10px;pointer-events:auto}
.assistant-hint[hidden]{display:none}
[data-open="true"] .assistant-hint{display:none}
.assistant-hint-open{all:unset;box-sizing:border-box;display:block;width:100%;padding:10px 26px 10px 14px;border:1px solid #cbdcf2;border-radius:16px;background:#fff;box-shadow:0 14px 34px rgba(13,43,91,.2);color:var(--c-text-2);font:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere;word-break:break-word}
.assistant-hint-open:hover,.assistant-hint-open:focus-visible{border-color:var(--c-accent)}
.assistant-hint-open:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.assistant-hint-open strong{display:block;margin-bottom:2px;color:var(--c-accent);font-size:12.5px;font-weight:800;line-height:1.3}
.assistant-hint-open span{display:block;color:var(--c-muted);font-size:11px;line-height:1.35}
.assistant-hint-close{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--c-muted);cursor:pointer}
.assistant-hint-close:hover{background:var(--c-accent-soft);color:var(--c-accent)}
.assistant-hint-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.assistant-panel{position:absolute;right:0;bottom:80px;display:flex;flex-direction:column;width:min(410px,calc(100vw - 40px));/* The panel sits 80px above the widget box and the widget box sits on the safe-area inset
   (>=20px); that leaves a viewport-safe budget of (100dvh - 116px). The panel takes 80% of that
   budget, so it grows upward from the launcher and keeps the same gap below it.
   100dvh keeps mobile URL-bar collapse from changing the height mid-scroll; 100vh is the fallback. */
height:calc((100vh - 116px)*.8);height:calc((100dvh - 96px - max(20px,env(safe-area-inset-bottom)))*.8);max-height:calc((100vh - 116px)*.8);max-height:calc((100dvh - 96px - max(20px,env(safe-area-inset-bottom)))*.8);min-height:288px;overflow:hidden;border:1px solid #cbdcf2;border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(13,43,91,.25);pointer-events:auto;transform-origin:bottom right;animation:assistant-open .2s ease-out}
.assistant-panel[hidden]{display:none}
@keyframes assistant-open{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.assistant-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:0 0 auto;padding:11px 18px 9px;background:linear-gradient(135deg,#eaf3ff,#f8fbff);border-bottom:1px solid #d8e6f8}
.assistant-copy,.assistant-chat,.assistant-controls,.assistant-messages{min-width:0}
.assistant-copy{min-width:0}
.assistant-copy .eyebrow{color:var(--c-accent);font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-wide);text-transform:uppercase}
.assistant-copy h2{margin-top:1px;font-size:18px;line-height:1.2;overflow-wrap:anywhere;word-break:break-word}
/* States plainly that this is an AI bot, not human support; replaces the old generic blurb
   in the same slot so the header keeps its existing height budget instead of growing the panel. */
.assistant-copy>p:last-child{margin-top:2px;color:var(--c-muted);font-size:11.5px;line-height:1.3;overflow-wrap:anywhere;word-break:break-word}
.assistant-close{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;padding:0;border:1px solid #c7d7ea;border-radius:50%;background:#fff;color:var(--c-text-2);cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease}
.assistant-close:hover{background:var(--c-accent-soft);color:var(--c-accent);transform:scale(1.04)}
.assistant-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.assistant-chat{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;padding:7px 12px 9px;background:#fff}
.assistant-messages{display:flex;flex:1 1 auto;min-height:0;flex-direction:column;gap:9px;padding:2px 3px 6px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
.assistant-message{display:flex;align-items:flex-end;gap:8px;max-width:88%;min-width:0}
.assistant-message.is-user{align-self:flex-end;justify-content:flex-end}
.assistant-message.is-bot{align-self:flex-start}
.assistant-avatar{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--c-accent);color:#fff;font-size:9px;font-weight:800;letter-spacing:-.03em}
.assistant-bubble{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:10px 13px;border-radius:17px 17px 17px 5px;background:#f1f5fb;color:var(--c-text-2);font-size:var(--fs-sm);line-height:1.5;overflow-wrap:anywhere;word-break:break-word}
.assistant-message.is-user .assistant-bubble{border-radius:17px 17px 5px 17px;background:var(--c-accent);color:#fff}
.assistant-message.is-working .assistant-bubble{color:var(--c-muted);font-style:italic}
.assistant-message.is-success .assistant-bubble{background:var(--c-success-bg);color:var(--c-success)}
.assistant-message.is-error .assistant-bubble{background:var(--c-danger-bg);color:var(--c-danger)}
.assistant-detail{display:block;max-width:100%;font-size:var(--fs-xs);color:inherit;overflow-wrap:anywhere;word-break:break-word}
.assistant-action{display:inline-flex;align-items:center;max-width:100%;padding:7px 11px;border-radius:10px;background:#fff;border:1px solid currentColor;color:var(--c-accent);font-size:var(--fs-xs);font-weight:750;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
.assistant-action:hover{text-decoration:underline;text-underline-offset:2px}
/* The /chat "let the assistant do it here" choice sits beside the open-the-tool link and has to
   read as its equal, so it borrows the link's chrome and only restores what a <button> loses. */
.assistant-action-chat{font:inherit;font-size:var(--fs-xs);font-weight:750;cursor:pointer}
.assistant-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.assistant-options button[aria-pressed=true]{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.assistant-suggestions{display:flex;flex:0 0 auto;flex-wrap:nowrap;align-items:center;gap:6px;max-width:100%;padding:5px 3px;overflow:hidden}
.assistant-suggestions button[hidden]{display:none}
.assistant-suggestions button{flex:0 0 auto;max-width:100%;padding:5px 10px;border:1px solid #cbdcf2;border-radius:var(--r-pill);background:#f7faff;color:var(--c-accent);font:inherit;font-size:var(--fs-xs);line-height:1.3;cursor:pointer;white-space:nowrap}
.assistant-suggestions button:hover{background:var(--c-accent-soft)}
.assistant-controls{display:flex;flex:0 0 auto;gap:8px;align-items:stretch}
.assistant-controls input{width:100%;min-width:0;padding:9px 14px;border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:#fff;outline:none;overflow-wrap:anywhere}
.assistant-controls input:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(16,90,230,.12)}
.assistant-controls .btn{flex:0 1 auto;min-width:92px;white-space:normal;overflow-wrap:anywhere}
.assistant-controls .btn:disabled{cursor:wait;opacity:.65}
.assistant-privacy{flex:0 0 auto;margin:5px 3px 0;color:var(--c-muted);font-size:10.5px;line-height:1.3;overflow-wrap:anywhere}
/* Panel-wide drop prompt. Absolutely positioned inside the (already position:absolute) panel
   so it masks the conversation without taking part in layout: the panel height, the message
   scroll area and the upload box keep their exact measurements while a file is dragged over. */
.assistant-drop-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:24px;border:3px dashed var(--c-accent);border-radius:24px;background:rgba(239,246,255,.95);color:var(--c-accent);font-size:var(--fs-md);font-weight:800;line-height:1.4;text-align:center;overflow-wrap:anywhere;word-break:break-word;pointer-events:none}
.assistant-drop-overlay[hidden]{display:none}
.assistant-panel.is-file-dragging .assistant-upload{border-color:var(--c-accent);background:var(--c-accent-soft)}
@media(max-width:520px){.assistant-drop-overlay{padding:16px;border-radius:20px}}

/* Two rows: a centered bold prompt, then one row of Choose files / size hint / Clear files.
   The box spans the same width as the shortcut strip and the input row below it. */
.assistant-upload{box-sizing:border-box;align-self:stretch;width:100%;flex:0 0 auto;margin:0 0 6px;padding:5px 10px;border:2px dashed #a8c2e5;border-radius:14px;background:#f7faff;transition:border-color .15s ease,background .15s ease}
.assistant-dropzone{display:flex;min-height:0;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:1px;color:var(--c-text-2);text-align:center;cursor:pointer;overflow-wrap:anywhere;word-break:break-word}
.assistant-dropzone strong{font-size:var(--fs-sm);font-weight:800;line-height:1.3}
.assistant-file-help{flex:1 1 auto;min-width:0;color:var(--c-muted);font-size:11px;line-height:1.35;text-align:center;overflow-wrap:anywhere;word-break:break-word}
.assistant-file-button{display:inline-flex;flex:0 0 auto;align-items:center;padding:4px 9px;border:1px solid #b7cae5;border-radius:999px;background:#fff;color:var(--c-accent);font-size:11px;font-weight:750;line-height:1.35;cursor:pointer;overflow-wrap:anywhere;word-break:break-word}
.assistant-upload:hover,.assistant-upload.is-dragging{border-color:var(--c-accent);background:var(--c-accent-soft)}
.assistant-dropzone:focus-visible{outline:3px solid rgba(16,90,230,.22);outline-offset:2px;border-radius:9px}
.assistant-file-status{margin-top:4px;color:var(--c-muted);font-size:11px;line-height:1.35;overflow-wrap:anywhere}
/* Keep the live region in the accessibility tree, but let it take no room while it is empty. */
.assistant-file-status:empty{margin-top:0}
.assistant-file-list{display:flex;max-height:78px;flex-direction:column;gap:4px;margin:5px 0 0;padding:0;overflow:auto;list-style:none}
.assistant-file-list:empty{display:none}.assistant-file-list li{display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;padding:5px 7px;border-radius:8px;background:#eef4fb;color:var(--c-text-2);font-size:11px;line-height:1.3}
.assistant-file-list li.is-invalid{border:1px solid #efb8b8;background:#fff1f1;color:#842424}.assistant-file-list li.is-valid{border:1px solid #b9ddc7;background:#effaf3}.assistant-file-list li.is-checking{border:1px solid #c7d7ea}
.assistant-file-list li span{min-width:0;overflow-wrap:anywhere;word-break:break-word}.assistant-file-detail{display:flex;flex-direction:column;gap:2px}.assistant-file-item-status{display:block;color:inherit;font-size:10px;font-weight:750;white-space:normal;overflow-wrap:anywhere}.assistant-file-list button,.assistant-file-actions button{flex:0 0 auto;border:1px solid #c7d7ea;border-radius:8px;background:#fff;color:var(--c-text-2);font:inherit;cursor:pointer}
.assistant-file-list button{width:26px;height:26px;padding:0;font-size:18px}.assistant-file-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;min-width:0}.assistant-file-actions-end{display:flex;flex:0 0 auto;min-width:0;align-items:center;justify-content:flex-end;gap:6px}.assistant-file-actions button{max-width:100%;padding:4px 8px;font-size:11px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.assistant-file-actions button:disabled{opacity:.45;cursor:default}
.assistant-invalid-summary{margin:7px 0 5px;padding-left:18px;font-size:11px;line-height:1.4;overflow-wrap:anywhere;word-break:break-word}.assistant-invalid-summary li+li{margin-top:3px}
.assistant-result-preview{display:block;width:min(180px,100%);max-height:130px;border:1px solid rgba(0,0,0,.12);border-radius:9px;object-fit:contain;background:#fff}
.assistant-retry{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid currentColor;border-radius:9px;background:#fff;color:var(--c-danger);font:inherit;font-size:var(--fs-xs);font-weight:750;line-height:1.35;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
@media(min-width:1440px){.assistant-widget{right:calc(var(--rail-w) + var(--rail-gap) + 32px)}}
@media(max-width:520px){.assistant-widget{right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));left:max(10px,env(safe-area-inset-left));align-items:flex-end}.assistant-panel{right:0;bottom:76px;width:100%;height:calc((100vh - 102px)*.8);height:calc((100dvh - 92px - max(10px,env(safe-area-inset-bottom)))*.8);max-height:calc((100vh - 102px)*.8);max-height:calc((100dvh - 92px - max(10px,env(safe-area-inset-bottom)))*.8);min-height:240px;border-radius:20px}.assistant-header{padding:8px 12px 7px}.assistant-copy h2{font-size:17px}.assistant-chat{padding:6px 9px 8px}.assistant-message{max-width:94%}.assistant-controls{gap:6px}.assistant-controls input{padding-inline:10px}.assistant-controls .btn{min-width:68px;padding-inline:10px}.assistant-bubble{padding:9px 11px}.assistant-avatar{flex-basis:27px;width:27px;height:27px}.assistant-launcher{width:58px;height:58px}.assistant-launcher-icon,.assistant-launcher-icon svg{width:31px;height:31px}.assistant-dropzone{min-height:0;padding:1px}.assistant-file-list{max-height:72px}
/* Narrow phones: the panel's own subtitle already explains the bot, so skip the floating
   tip bubble entirely rather than risk it overlapping the launcher or clipping at the edge. */
.assistant-hint{display:none}}
@media(max-height:560px){.assistant-panel{bottom:70px;height:calc((100vh - 98px)*.8);height:calc((100dvh - 78px - max(20px,env(safe-area-inset-bottom)))*.8);max-height:calc((100vh - 98px)*.8);max-height:calc((100dvh - 78px - max(20px,env(safe-area-inset-bottom)))*.8);min-height:0}.assistant-header{padding-block:6px}.assistant-copy>p:last-child{display:none}.assistant-suggestions{padding-block:4px}.assistant-privacy{margin-top:3px}}
@media(prefers-reduced-motion:reduce){.assistant-launcher,.assistant-close,.assistant-panel{animation:none;transition:none}.assistant-launcher::before{animation:none;display:none}}
body.tool-immersive .assistant-widget{display:none}
body.tool-immersive .privacy-strip{display:none}

/* Full-page assistant (/chat). Same widget markup and the same data-assistant-* hooks as the
   floating panel — the page keeps a short heading, adds the site's tool rail above the panel and
   turns the panel itself into a tall conversation column that owns most of the viewport. The
   floating panel's shortcut chips and standing drop box are not rendered here at all. Rules live
   after the floating panel's media queries and win on specificity, so nothing above needs editing. */
.assistant-widget.assistant-fullpage{position:static;z-index:auto;right:auto;bottom:auto;box-sizing:border-box;display:flex;flex-direction:column;width:100%;max-width:1080px;margin:0 auto;padding:clamp(10px,2vw,18px) 16px 26px;align-items:stretch;pointer-events:auto}
.assistant-fullpage .assistant-launcher,.assistant-fullpage .assistant-hint,.assistant-fullpage .assistant-header{display:none}
.assistant-hub-head{margin:0 0 clamp(8px,1.4vw,12px);text-align:center}
.assistant-hub-title{margin:0;font-size:clamp(19px,2.4vw,27px);font-weight:800;line-height:1.16;letter-spacing:-.02em;overflow-wrap:anywhere;word-break:break-word}
.assistant-hub-subtitle{max-width:760px;margin:5px auto 0;color:var(--c-muted);font-size:var(--fs-xs);line-height:1.4;overflow-wrap:anywhere}
/* Tool rail: the same registry rows the homepage grid renders, as compact icon + name links to
   /tool/<slug>. Exactly one row is visible and the remainder scrolls sideways inside the rail, so
   the rail never wraps and never pushes the conversation below the fold. */
.assistant-hub-tools{flex:0 0 auto;margin:0 0 clamp(8px,1.4vw,12px)}
.assistant-hub-tools-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.assistant-hub-tools-head h2{font-size:var(--fs-md);font-weight:750;letter-spacing:-.01em}
.assistant-hub-tools-all{font-size:var(--fs-sm);font-weight:700;color:var(--c-accent)}
.assistant-hub-grid{display:flex;flex-wrap:nowrap;gap:8px;padding:2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.assistant-hub-tool{display:flex;flex:0 0 auto;width:158px;align-items:center;gap:9px;min-width:0;padding:9px 11px;border:1px solid var(--c-line);border-radius:12px;background:#fff;color:var(--c-text-2);font-size:var(--fs-sm);font-weight:650;line-height:1.25;text-decoration:none;transition:border-color .15s ease,background .15s ease,color .15s ease}
.assistant-hub-tool:hover{border-color:var(--c-accent);background:var(--c-accent-soft);color:var(--c-accent)}
.assistant-hub-tool:focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}
.assistant-hub-tool-icon{display:grid;flex:0 0 30px;place-items:center;width:30px;height:30px;border-radius:9px;background:#eef4fd;color:var(--c-accent)}
.assistant-hub-tool-icon svg{width:18px;height:18px}
.assistant-hub-tool-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Tool popout: a rail tile runs its tool here instead of navigating to /tool/<slug>. The panel is
   sized to the content width the shared tool-embed.css lays out at (~1000px); the tool's own .app
   is untouched. The frame keeps scrolling="no" and is grown to its content by the same
   auto-height logic the standalone tool page uses, so the body only scrolls past 90vh. */
.tool-popout{--tool-popout-gutter:clamp(12px,3vw,32px);position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:var(--tool-popout-gutter)}
.tool-popout[hidden]{display:none}
.tool-popout-overlay{position:absolute;inset:0;background:rgba(9,26,56,.55);backdrop-filter:blur(2px)}
.tool-popout-panel{position:relative;isolation:isolate;contain:paint;display:flex;flex-direction:column;width:min(1000px,100%);max-height:90vh;max-height:90dvh;box-sizing:border-box;background:var(--c-surface);border:2px solid var(--c-line-strong);border-radius:var(--r-xl);box-shadow:var(--sh-2);overflow:hidden}
.tool-popout-bar{position:relative;z-index:2;display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:var(--s-4);padding:12px var(--s-5);border-bottom:1px solid var(--c-line);background:var(--c-surface-2)}
.tool-popout-bar strong{min-width:0;overflow:hidden;font-size:var(--fs-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.tool-popout-actions{display:flex;flex:0 0 auto;align-items:center;gap:8px}
.tool-popout-close,.tool-popout-expand{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;border:1px solid var(--c-line);border-radius:var(--r-pill);background:#fff;color:var(--c-text-2);padding:6px 10px;font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer}
.tool-popout-close:hover,.tool-popout-expand:hover{border-color:var(--c-accent);color:var(--c-accent)}
.tool-popout-close svg,.tool-popout-expand svg{width:14px;height:14px}
/* One button, two states: the icon follows aria-pressed so the pressed control reads as "leave
   the viewport-filling state" rather than repeating the same arrows. */
.tool-popout-expand [data-icon-exit],.tool-popout-expand[aria-pressed="true"] [data-icon-enter]{display:none}
.tool-popout-expand[aria-pressed="true"] [data-icon-exit]{display:block}
.tool-popout-expand[aria-pressed="true"]{border-color:var(--c-accent);color:var(--c-accent)}
.tool-popout-viewport{position:relative;z-index:1;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;border-radius:0 0 calc(var(--r-xl) - 2px) calc(var(--r-xl) - 2px);background:#fff}
.tool-popout-body{position:relative;width:100%;height:100%;max-width:100%;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;background:#fff}
.tool-popout-body .tool-frame{display:block;width:100%;max-width:100%;border:0;background:#fff}
.tool-popout[data-popout-kind="editor"] .tool-popout-body{overflow:hidden;scrollbar-gutter:auto}
.tool-popout[data-popout-kind="editor"] .tool-popout-body .tool-frame-contained{width:100%;height:100%;min-height:0;max-height:100%}
/* An editor workspace is the tallest thing a popout carries, so it gets a little more of the
   window — still framed, and still with the page visible around it, which is the default for
   every tool. Only the button below takes that framing away. */
.tool-popout[data-popout-kind="editor"] .tool-popout-panel{height:min(820px,92vh);height:min(820px,92dvh);max-height:92vh;max-height:92dvh}
/* Full-screen keeps one continuous, rounded shell.  The gutter is deliberately retained: the
   panel owns the border and clips the body scrollbar rather than letting a viewport scrollbar
   escape through square corners. */
.tool-popout[data-popout-fullscreen="true"]{--tool-popout-gutter:clamp(8px,1.5vw,20px)}
.tool-popout[data-popout-fullscreen="true"] .tool-popout-panel{width:100%;max-width:none;height:calc(100vh - (var(--tool-popout-gutter) * 2));height:calc(100dvh - (var(--tool-popout-gutter) * 2));max-height:none}
.tool-popout[data-popout-fullscreen="true"]:not([data-popout-kind="editor"]) .tool-popout-body .tool-frame{min-height:100%}
html.tool-popout-open,body.tool-popout-open{overflow:hidden}
/* Conversation column: the page's main surface, so it takes the height the floating panel cannot.
   The message log grows and scrolls; the composer stays pinned to the bottom of the panel. */
/* The panel takes whatever the site header, the heading and the single-row rail leave of the first
   screen (about 275px together, plus the wrapper's bottom padding), with a floor so a short window
   still gets a usable message log. */
.assistant-fullpage .assistant-panel{position:static;width:100%;height:clamp(400px,calc(100vh - 300px),820px);height:clamp(400px,calc(100dvh - 300px),820px);min-height:0;max-height:none;border-radius:22px;box-shadow:0 18px 48px rgba(13,43,91,.12);transform:none;animation:none}
.assistant-fullpage .assistant-chat{flex:1 1 auto;min-height:0;padding:16px 18px 18px}
.assistant-fullpage .assistant-messages{flex:1 1 auto;min-height:0;max-height:none;gap:12px;padding:2px 6px 10px}
.assistant-fullpage .assistant-message{max-width:min(720px,88%)}
/* The random shortcut strip stays a floating-panel affordance. */
.assistant-fullpage .assistant-suggestions{display:none}
/* No standing drop box here: the wrapper only carries the queue readout, which collapses to
   nothing while nothing is selected and no run can be cancelled. Files still arrive through the
   composer's "+" or by dropping onto the panel. */
.assistant-upload-quiet{margin:0;padding:0;border:0;background:none}
.assistant-panel.is-file-dragging .assistant-upload-quiet{border:0;background:none}
.assistant-upload-quiet .assistant-file-actions{margin:2px 0 6px}
.assistant-upload-quiet:not(:has(.assistant-file-list li)):not(:has([data-assistant-cancel]:not([hidden]))) .assistant-file-actions{display:none}
/* Composer: one large field with the "+" attach control (it targets the existing hidden file
   input) on the left and the round submit button on the right. */
.assistant-composer{align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--c-line-strong);border-radius:20px;background:#fff}
.assistant-composer:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(16,90,230,.12)}
.assistant-composer input{order:2;flex:1 1 auto;padding:12px 4px;border:0;border-radius:0;font-size:var(--fs-md)}
.assistant-composer input:focus{border-color:transparent;box-shadow:none}
.assistant-attach{display:grid;order:1;flex:0 0 40px;place-items:center;width:40px;height:40px;border:1px solid var(--c-line);border-radius:50%;background:#fff;color:var(--c-text-2);cursor:pointer}
.assistant-attach:hover{border-color:var(--c-accent);color:var(--c-accent)}
.assistant-attach svg,.assistant-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.assistant-composer .assistant-send{display:grid;order:3;flex:0 0 44px;place-items:center;width:44px;height:44px;min-width:0;padding:0;border-radius:50%}
.hero-assistant{margin-top:14px}
@media(max-width:520px){.assistant-widget.assistant-fullpage{padding:14px 10px 26px}.assistant-fullpage .assistant-panel{border-radius:18px}.assistant-fullpage .assistant-chat{padding:10px 10px 12px}.assistant-fullpage .assistant-message{max-width:94%}.assistant-hub-grid{gap:6px}.assistant-hub-tool{width:138px;padding:8px 9px;gap:7px}.assistant-hub-tool-icon{flex-basis:26px;width:26px;height:26px}.assistant-hub-tool-icon svg{width:16px;height:16px}.assistant-composer{gap:6px;padding:6px 8px}.assistant-composer input{padding:10px 2px}.assistant-composer .assistant-send{flex-basis:40px;width:40px;height:40px}}
.hero-ad{padding-inline:0}
.hero-ad .ad-slot{margin:12px auto 18px}
.hero-ad .ad-custom img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.hero-ad .ad-box{border-radius:16px;background:rgba(255,255,255,.6)}
.ad-hero-banner{position:relative;display:flex;align-items:center;width:100%;height:100%;min-width:0;padding:10px clamp(26px,5vw,64px);overflow:hidden;background:#eff6ff;border-left:4px solid #1768ed;text-align:left}
.ad-hero-logo{position:relative;z-index:1;flex:none;width:68px!important;height:68px!important;object-fit:contain}
.ad-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;margin-left:20px;line-height:1.15}
.ad-hero-copy strong{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.035em;color:#09204b}
.ad-hero-copy>span{margin-top:4px;font-size:clamp(13px,1.5vw,17px);color:#405b85;overflow-wrap:anywhere}
.ad-hero-copy small{margin-top:7px;font-size:11px;font-weight:700;letter-spacing:.09em;color:#155bdb}
.ad-hero-decor,.ad-hero-decor::after{position:absolute;border-radius:50%;content:"";pointer-events:none}
.ad-hero-decor{right:-22px;top:-48px;width:150px;height:150px;background:#b9dcf6}
.ad-hero-decor::after{right:12px;top:116px;width:116px;height:116px;background:#eee5d1}

/* ==========================================================================
   Category chip rail
   ========================================================================== */
.chip-rail{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);padding:0 var(--s-4) var(--s-6)}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--r-pill);
  background:var(--c-bg-alt);color:var(--c-text-2);font-size:var(--fs-sm);font-weight:550;
  transition:background .15s ease,color .15s ease;
}
.chip svg{width:15px;height:15px}
.chip:hover{background:#eaeaee;color:var(--c-text)}
.chip.active{background:var(--c-text);color:#fff}
.home-chips,.listing-chips{padding-bottom:22px;max-width:var(--content-max);margin-inline:auto}

/* Publisher-written home guidance: practical context before and after the tool catalogue. */
.home-publisher-intro{padding-block:30px 46px}
.home-publisher-intro>.eyebrow{margin-bottom:9px}
.home-publisher-intro>h2,.home-workflow h2,.home-limits h2,.home-faq>h2{font-size:var(--fs-h2);letter-spacing:var(--tracking-display)}
.home-publisher-intro>p:last-of-type{max-width:78ch;margin-top:12px;color:var(--c-text-2);font-size:16px;line-height:1.7}
.home-publisher-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.home-publisher-areas article{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid var(--c-line);border-radius:var(--r-xl);background:var(--c-surface);box-shadow:var(--sh-1)}
.home-publisher-areas h3{font-size:19px;letter-spacing:var(--tracking-tight)}
.home-publisher-areas p{margin-top:10px;color:var(--c-muted);line-height:1.65}
.home-publisher-areas a{align-self:flex-start;margin-top:auto;padding-top:16px;color:var(--c-accent);font-weight:650}
.home-publisher-areas a:hover{text-decoration:underline}
.home-publisher-detail{padding:56px 0 70px;border-top:1px solid var(--c-line);background:linear-gradient(180deg,var(--c-surface-2),#fff)}
.home-workflow{display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);gap:44px;align-items:start}
.home-workflow>div>p:last-child{max-width:48ch;margin-top:12px;color:var(--c-muted);line-height:1.65}
.home-workflow ol{display:grid;gap:12px;list-style:none;counter-reset:home-step;padding:0;margin:0}
.home-workflow li{counter-increment:home-step;position:relative;padding:18px 20px 18px 58px;border:1px solid var(--c-line);border-radius:var(--r-lg);background:#fff}
.home-workflow li::before{content:counter(home-step);position:absolute;top:18px;left:18px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--c-accent);color:#fff;font-size:12px;font-weight:750}
.home-workflow strong,.home-workflow span{display:block}.home-workflow span{margin-top:5px;color:var(--c-muted);line-height:1.6}
.home-limits{max-width:84ch;margin:48px auto 0;padding:28px;border:1px solid #cfe0f4;border-radius:var(--r-xl);background:#f5f9ff}
.home-limits p{margin-top:12px;color:var(--c-text-2);line-height:1.72}
.home-faq{max-width:84ch;margin:46px auto 0}
.home-faq>h2{margin-bottom:14px}
.home-faq details{border-top:1px solid var(--c-line);padding:17px 0}.home-faq details:last-of-type{border-bottom:1px solid var(--c-line)}
.home-faq summary{cursor:pointer;font-weight:650}.home-faq details p{max-width:76ch;padding-top:10px;color:var(--c-muted);line-height:1.65}
.home-report-link{margin-top:18px}.home-report-link a{color:var(--c-accent);font-weight:650}.home-report-link a:hover{text-decoration:underline}

/* ==========================================================================
   Section headings
   ========================================================================== */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-5)}
.section-head h2{font-size:var(--fs-h2);letter-spacing:var(--tracking-display)}
.section-head p{margin-top:6px;color:var(--c-muted);font-size:var(--fs-sm);max-width:62ch}

/* ==========================================================================
   Tool cards
   ========================================================================== */
.tool-section{padding:34px 0 46px;border-top:1px solid rgba(202,215,232,.65)}
.tool-section:nth-of-type(even){background:linear-gradient(180deg,rgba(241,246,253,.72),rgba(248,251,255,.9))}
.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.tool-card{
  display:grid;grid-template-columns:50px minmax(0,1fr);grid-template-rows:auto auto;column-gap:15px;row-gap:13px;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);
  padding:25px;min-height:196px;
  transition:transform .22s cubic-bezier(.25,.6,.3,1),box-shadow .22s ease,border-color .22s ease;
}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.tool-card:focus-visible{transform:translateY(-3px);box-shadow:var(--sh-2)}
.tool-card .tool-icon{
  grid-column:1;grid-row:1;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(145deg,#e5f4ff,#eef2ff);color:var(--c-accent);flex:none;
}
.tool-card .tool-icon svg{width:24px;height:24px}
.tool-card-copy{grid-column:2;grid-row:1;min-width:0}
.tool-card h3{max-width:100%;font-size:18px;letter-spacing:var(--tracking-tight);font-weight:650;display:block;overflow-wrap:anywhere}
.tool-card p{max-width:100%;margin-top:7px;color:var(--c-muted);font-size:var(--fs-sm);line-height:1.5;display:block;overflow-wrap:anywhere}
.tool-card .format-line{
  grid-column:1/-1;align-self:end;font-size:var(--fs-xs);color:var(--c-accent);letter-spacing:.02em;font-weight:600;
  overflow-wrap:anywhere;
}
.band .tool-card{background:#fff}

@media(min-width:1200px){.tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:768px) and (max-width:1199px){.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.tool-card{grid-template-columns:46px minmax(0,1fr);padding:21px;min-height:190px}.tool-card .tool-icon{width:46px;height:46px}}
@media(min-width:768px) and (max-width:900px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ========================================================================== 
   Purchased ad slots — unsold wrappers collapse without reserving space
   ========================================================================== */
.hero-ad:empty,.tool-workspace-ad:empty,.frame-slot:empty{display:none!important}
.ad-slot{margin-block:var(--s-6);display:flex;flex-direction:column;min-width:0;max-width:100%}
.ad-slot--banner,.ad-slot--footer{width:728px;min-height:0;margin-inline:auto}
.ad-slot--footer{margin-top:0;margin-bottom:var(--s-7);padding:0}
.ad-slot--native{grid-column:1/-1;width:300px;min-height:0;margin:0;justify-self:center}
.ad-slot--rail{width:160px;min-height:0;margin:0}
/* In-grid leaderboard: owns a whole .tool-grid row after a section's last card. */
.ad-slot--grid{
  grid-column:1/-1;width:100%;max-width:100%;min-height:0;margin:0;margin-inline:0;justify-self:stretch;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:center;
}
.ad-slot--grid .ad-label{grid-row:1;grid-column:1;margin:0;text-align:left;line-height:1.2}
.ad-slot--grid .ad-cta{grid-row:1;grid-column:2;margin:0;padding:0;justify-self:end;line-height:1.2;text-align:right}
.ad-slot--grid .ad-box,.ad-slot--grid .ad-custom,.ad-slot--grid .ad-live{
  grid-row:2;grid-column:1/-1;width:100%;max-width:100%;height:90px;min-height:90px;padding-block:0;
}
.ad-slot--grid .ad-box{flex-direction:row;flex-wrap:wrap;gap:10px;background:var(--c-surface);border-style:dashed}
/* Creatives are centred inside the strip; the outline keeps the full-row extent readable. */
.ad-slot--grid .ad-custom,.ad-slot--grid .ad-live{border:1px solid var(--c-line);background:var(--c-surface)}
.ad-box{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  flex:none;border:1px dashed var(--c-line-strong);border-radius:var(--r-lg);
  background:var(--c-surface-2);color:var(--c-muted);text-align:center;padding:var(--s-4);
}
.ad-slot--banner .ad-box,.ad-slot--banner .ad-custom,.ad-slot--banner .ad-live,
.ad-slot--footer .ad-box,.ad-slot--footer .ad-custom,.ad-slot--footer .ad-live{width:728px;height:90px;min-height:90px}
.ad-slot--native .ad-box,.ad-slot--native .ad-custom,.ad-slot--native .ad-live{width:300px;height:250px;min-height:250px}
.ad-slot--rail .ad-box,.ad-slot--rail .ad-custom,.ad-slot--rail .ad-live{width:160px;height:600px;min-height:600px}
.ad-box strong{font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em;color:var(--c-text-2)}
.ad-box span{font-size:var(--fs-xs)}
.ad-size-hint{font-variant-numeric:tabular-nums;color:var(--c-muted)}
.ad-slot--native .ad-box{background:var(--c-surface);border-style:dashed}
.ad-live{display:block;min-width:0;overflow:hidden}
.ad-live ins{display:block;width:100%!important;height:100%!important}
.ad-label{display:block;font-size:var(--fs-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:#9a9aa0;text-align:center;margin-bottom:6px}
.ad-custom{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--r-lg);background:var(--c-surface-2);color:inherit;text-decoration:none}
.ad-custom img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.ad-custom>div,.ad-custom>p,.ad-custom>span{max-width:100%;overflow-wrap:anywhere}
.ad-cta{display:block;align-self:center;max-width:100%;margin-top:8px;padding:2px 6px;color:var(--c-muted);font-size:var(--fs-xs);line-height:1.4;text-align:center;text-decoration:none;overflow-wrap:anywhere}
.ad-cta:hover{text-decoration:underline;color:var(--c-text-2)}
.ad-slot--rail .ad-cta{font-size:11px;padding-inline:0}
.ad-slot--rail .ad-custom{min-width:0}
@media(min-width:1440px){
  .ad-slot--banner,.ad-slot--footer{width:970px}
  .ad-slot--banner .ad-box,.ad-slot--banner .ad-custom,.ad-slot--banner .ad-live,
  .ad-slot--footer .ad-box,.ad-slot--footer .ad-custom,.ad-slot--footer .ad-live{width:970px;height:90px;min-height:90px}
}
@media(min-width:1848px){
  .ad-slot--rail{width:300px}
  .ad-slot--rail .ad-box,.ad-slot--rail .ad-custom,.ad-slot--rail .ad-live{width:300px;height:600px;min-height:600px}
}
@media(min-width:800px) and (max-width:1439px){
  .ad-slot--banner,.ad-slot--footer{width:728px}
}
@media(min-width:368px) and (max-width:799px){
  .ad-slot--banner,.ad-slot--footer{width:320px}
  .ad-slot--banner .ad-box,.ad-slot--banner .ad-custom,.ad-slot--banner .ad-live,
  .ad-slot--footer .ad-box,.ad-slot--footer .ad-custom,.ad-slot--footer .ad-live{width:320px;height:100px;min-height:100px}
}
@media(min-width:348px) and (max-width:367px){
  .ad-slot--banner,.ad-slot--footer{width:300px}
  .ad-slot--banner .ad-box,.ad-slot--banner .ad-custom,.ad-slot--banner .ad-live,
  .ad-slot--footer .ad-box,.ad-slot--footer .ad-custom,.ad-slot--footer .ad-live{width:300px;height:250px;min-height:250px}
}
@media(max-width:347px){.ad-slot--banner,.ad-slot--footer{display:none}}
@media(max-width:331px){.ad-slot--native{display:none}}
/* In-grid leaderboard degrades by height only — the width always follows the grid row, so it can never overflow. */
@media(min-width:768px) and (max-width:1199px){
  .ad-slot--grid .ad-box,.ad-slot--grid .ad-custom,.ad-slot--grid .ad-live{height:90px;min-height:90px}
}
@media(max-width:767px){
  .ad-slot--grid{column-gap:8px}
  .ad-slot--grid .ad-box,.ad-slot--grid .ad-custom,.ad-slot--grid .ad-live{height:100px;min-height:100px}
}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* legacy ad classes still emitted by f2e_ad() */
.ad-placeholder{min-height:110px;border:1px dashed var(--c-line-strong);border-radius:var(--r-lg);background:var(--c-surface-2);color:var(--c-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--s-5) 0;text-align:center}
.ad-placeholder span{font-size:var(--fs-xs)}
.google-ad-wrap{min-height:110px;margin:var(--s-5) 0;text-align:center}

/* ==========================================================================
   Tool page
   ========================================================================== */
.breadcrumbs{font-size:var(--fs-sm);color:var(--c-muted);padding:var(--s-5) 0}
.breadcrumbs a:hover{color:var(--c-text);text-decoration:underline}
.breadcrumbs span{color:var(--c-text-2)}
/* the workspace: no ads, no overlays, nothing on top of it */
.tool-stage{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1)}
.tool-stage-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:12px var(--s-5);border-bottom:1px solid var(--c-line);background:var(--c-surface-2)}
.tool-stage-bar strong{font-size:var(--fs-sm);font-weight:600}
.tool-stage-actions{display:flex;align-items:center;gap:var(--s-2)}
.safe-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--c-muted);padding:4px 10px;border:1px solid var(--c-line);border-radius:var(--r-pill);background:#fff}
.safe-badge svg{width:12px;height:12px}
.tool-fullscreen-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--c-line);border-radius:var(--r-pill);background:#fff;color:var(--c-text-2);padding:6px 10px;font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer}
.tool-fullscreen-toggle:hover{border-color:var(--c-accent);color:var(--c-accent)}
.tool-popout-toggle{text-decoration:none}
.tool-fullscreen-toggle svg{width:14px;height:14px}
.tool-drop-guard{position:fixed;z-index:120;left:50%;bottom:24px;transform:translateX(-50%);padding:10px 16px;border-radius:var(--r-pill);background:var(--c-text);color:#fff;font-size:var(--fs-sm);box-shadow:var(--sh-2);pointer-events:none}
.tool-frame{display:block;border:0;width:100%;height:auto;min-height:480px;background:#fff;overflow:hidden}
.page-frame--tool{grid-template-columns:minmax(0,1fr);column-gap:0}
.page-frame--tool>.tool-page{grid-column:1;grid-row:1;max-width:none}
.page-frame--tool>.frame-slot{grid-column:1;grid-row:2}
.page-frame--tool>.ad-rail{display:none}
.tool-page>.wrap{width:100%;max-width:none;padding-inline:24px}
.tool-page>.wrap>.tool-stage{width:100%;max-width:none}
.tool-page>.wrap>.breadcrumbs,.tool-page>.wrap>.tool-notes,.tool-page>.wrap>.ad-slot{max-width:1120px;margin-inline:auto}
.tool-page--adaptive-preview .tool-workspace-ad{display:none}
@media(min-width:1440px){
  .page-frame--tool{grid-template-columns:var(--rail-w) minmax(0,var(--content-max)) var(--rail-w);column-gap:var(--rail-gap);justify-content:center}
  .page-frame--tool>.tool-page{grid-column:2;grid-row:1;width:100%;margin:0}
  .page-frame--tool>.frame-slot{grid-column:2;grid-row:2;width:100%;max-width:none}
  .page-frame--tool>.ad-rail{display:block}
  .page-frame--tool>.ad-rail--left{grid-column:1}
  .page-frame--tool>.ad-rail--right{grid-column:3}
  .tool-page>.wrap>.ad-slot{max-width:none;margin-left:-24px;margin-right:-24px}

  /* Adaptive workspaces always use the standard 160 x 600 rail creative,
     including ultra-wide screens where other pages may opt into 300 x 600. */
  .page-frame--adaptive-preview{
    width:min(100%,1568px);margin-inline:auto;
    grid-template-columns:160px minmax(0,1fr) 160px
  }
  .page-frame--adaptive-preview>.ad-rail,
  .page-frame--adaptive-preview .ad-rail-stack,
  .page-frame--adaptive-preview .ad-slot--rail{width:160px}
  .page-frame--adaptive-preview .ad-slot--rail .ad-box,
  .page-frame--adaptive-preview .ad-slot--rail .ad-custom,
  .page-frame--adaptive-preview .ad-slot--rail .ad-live{
    width:160px;height:600px;min-height:600px
  }
}

@media(max-width:799px){
  .tool-page--adaptive-preview .tool-workspace-ad{
    display:block;width:100%;max-width:100%;margin:18px auto;overflow:hidden
  }
  .tool-page--adaptive-preview .tool-workspace-ad>.ad-slot--banner{
    display:flex!important;width:min(320px,100%)!important;max-width:100%;
    margin:0 auto
  }
  .tool-page--adaptive-preview .tool-workspace-ad>.ad-slot--banner .ad-box,
  .tool-page--adaptive-preview .tool-workspace-ad>.ad-slot--banner .ad-custom,
  .tool-page--adaptive-preview .tool-workspace-ad>.ad-slot--banner .ad-live{
    width:100%!important;height:90px;min-height:90px
  }
}

body.tool-immersive{overflow:hidden}
body.tool-immersive .skip-link,body.tool-immersive .page-frame--tool>.ad-rail,body.tool-immersive .page-frame--tool>.frame-slot,body.tool-immersive .tool-page>.wrap>*:not(.tool-stage),body.tool-immersive .tool-page>section,body.tool-immersive .site-footer{display:none!important}
body.tool-immersive .page-frame--tool{display:block}
body.tool-immersive .tool-page,body.tool-immersive .tool-page>.wrap{max-width:none;width:100%;padding:0;margin:0}
body.tool-immersive .tool-page>.wrap>.tool-stage{position:fixed;z-index:90;inset:var(--header-h) 0 0;width:auto;max-width:none;display:flex;flex-direction:column;border:0;border-radius:0;box-shadow:none}
body.tool-immersive .tool-stage-bar{flex:0 0 auto}
body.tool-immersive .tool-frame{flex:1 1 auto;height:auto!important;min-height:0!important}

.listing-hero{max-width:var(--content-max);margin-inline:auto;padding:34px 32px 20px}
.listing-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:36px}
.listing-hero h1{font-size:var(--fs-h1);letter-spacing:-.04em;margin-top:14px}
.listing-hero-row>div>p{color:var(--c-muted);font-size:16px;margin-top:9px;max-width:620px}
.compact-search{display:flex;align-items:center;gap:10px;width:min(440px,100%);padding:5px 5px 5px 16px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.compact-search svg{width:18px;color:var(--c-muted)}
.compact-search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:10px 0}
.compact-search button{border:0;border-radius:var(--r-pill);background:var(--c-accent);color:#fff;padding:10px 18px;font-weight:650;cursor:pointer}
.listing-results{padding-top:34px}
.search-listing-hero{padding-top:44px}
.search-listing-hero .search-examples{margin-top:13px}
.category-publisher-intro{padding-block:28px 38px}
.category-publisher-intro>.eyebrow{margin-bottom:8px}
.category-publisher-intro h2,.category-publisher-detail h2{font-size:var(--fs-h2);letter-spacing:var(--tracking-display)}
.category-publisher-intro p:not(.eyebrow){max-width:82ch;margin-top:12px;color:var(--c-text-2);font-size:16px;line-height:1.7}
.category-publisher-detail{padding:52px 0 66px;border-top:1px solid var(--c-line);background:var(--c-surface-2)}
.category-publisher-detail article,.category-faq{max-width:84ch;margin-inline:auto}
.category-publisher-detail article p{margin-top:12px;color:var(--c-text-2);line-height:1.72}
.category-faq{margin-top:38px}.category-faq>h2{margin-bottom:12px}
.category-faq details{padding:17px 0;border-top:1px solid var(--c-line)}.category-faq details:last-child{border-bottom:1px solid var(--c-line)}
.category-faq summary{cursor:pointer;font-weight:650}.category-faq p{max-width:76ch;padding-top:10px;color:var(--c-muted);line-height:1.65}

.trust-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-block:44px 58px}
.trust-strip>div{display:flex;align-items:flex-start;gap:12px;min-width:0}
.trust-strip>div>svg{width:20px;flex:0 0 20px;color:var(--c-accent);margin-top:1px}
.trust-strip span{display:flex;flex-direction:column;gap:4px}.trust-strip strong{font-size:14px}.trust-strip small{color:var(--c-muted);line-height:1.45}

.tool-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-5)}
.note-card{background:var(--c-bg-alt);border-radius:var(--r-lg);padding:var(--s-5)}
.note-card .tool-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--c-accent);margin-bottom:var(--s-3)}
.note-card .tool-icon svg{width:18px;height:18px}
.note-card strong{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:4px}
.note-card p{color:var(--c-muted);font-size:var(--fs-sm)}
@media(max-width:760px){.tool-notes{grid-template-columns:1fr}}

/* GEO answer, how-to and FAQ: always follows the workspace. */
.tool-geo{max-width:960px;margin:var(--s-6) auto 0;display:grid;gap:var(--s-5);min-width:0}
.tool-answer,.tool-howto,.tool-faq{min-width:0;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-xl);padding:var(--s-6);overflow-wrap:anywhere}
.tool-geo h2{font-size:var(--fs-h3);margin:0 0 var(--s-3);letter-spacing:var(--tracking-display)}
.tool-answer .eyebrow{margin-bottom:var(--s-2)}
.tool-answer>p:last-child{color:var(--c-text-2);line-height:var(--lh-body);max-width:76ch}
.tool-howto ol{list-style:none;counter-reset:geo-step;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);padding:0;margin:0}
.tool-howto li{counter-increment:geo-step;position:relative;min-width:0;padding:var(--s-4) var(--s-4) var(--s-4) 54px;border-radius:var(--r-lg);background:var(--c-bg-alt)}
.tool-howto li::before{content:counter(geo-step);position:absolute;left:16px;top:16px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--c-accent);color:#fff;font-size:var(--fs-xs);font-weight:700}
.tool-howto strong,.tool-howto span{display:block}.tool-howto span{margin-top:4px;color:var(--c-muted);font-size:var(--fs-sm);line-height:1.5}
.tool-faq details{border-top:1px solid var(--c-line);padding:var(--s-4) 0}.tool-faq details:last-child{padding-bottom:0}.tool-faq summary{cursor:pointer;font-weight:650;color:var(--c-text)}
.tool-faq details p{padding-top:var(--s-3);color:var(--c-muted);line-height:1.55;max-width:76ch}
.geo-editor{margin:var(--s-5) 0;padding:var(--s-5);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface-2);min-width:0}
.geo-editor-head,.geo-repeat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3)}
.geo-editor-head h3,.geo-repeat h4{margin:0}.geo-editor-head p{color:var(--c-muted);font-size:var(--fs-sm);margin-top:4px}
.geo-status{flex:0 0 auto;padding:4px 9px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--c-line);font-size:var(--fs-xs);font-weight:650}
.geo-word-count{float:right;color:var(--c-muted);font-size:var(--fs-xs);font-weight:500}.geo-word-count.over{color:var(--c-danger);font-weight:700}
.geo-repeat{margin-top:var(--s-5)}.geo-repeat-head{align-items:center;margin-bottom:var(--s-3)}.geo-repeat-head .btn{margin:0;padding:7px 11px}
.geo-row{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(260px,1.3fr) auto;align-items:start;gap:var(--s-2);margin-bottom:var(--s-2);min-width:0}
.geo-row input,.geo-row textarea{min-width:0;margin:0}.geo-row [data-geo-remove]{margin-top:8px;overflow-wrap:anywhere}
@media(max-width:760px){.tool-geo{width:100%;max-width:100%;gap:var(--s-4)}.tool-answer,.tool-howto,.tool-faq{padding:var(--s-5)}.tool-howto ol{grid-template-columns:1fr}.geo-editor{padding:var(--s-4)}.geo-row{grid-template-columns:minmax(0,1fr)}.geo-row [data-geo-remove]{justify-self:start}.geo-editor-head{flex-direction:column}}
.tool-guidance{max-width:960px;margin:var(--s-5) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.privacy-links{max-width:960px;margin:24px auto;display:flex;flex-wrap:wrap;gap:12px 24px;line-height:1.6}
.contact-ad-options{padding:16px;border:1px solid var(--c-line);border-radius:12px}.contact-ad-options summary{cursor:pointer;font-weight:600}.contact-ad-options .form-grid{margin-top:16px}.contact-ad-options[hidden]{display:none}
.tool-example{max-width:960px;margin:24px auto;padding:24px;border:1px solid var(--c-line);border-radius:var(--r-lg);line-height:1.7}.tool-example p{margin-top:12px;color:var(--c-text-2)}
.tool-guidance article{min-width:0;padding:var(--s-5);border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface-2)}
.tool-guidance h2{font-size:17px;letter-spacing:var(--tracking-tight)}.tool-guidance p{margin-top:9px;color:var(--c-text-2);line-height:1.65}
@media(max-width:900px){.tool-guidance{grid-template-columns:1fr}}@media(max-width:760px){.tool-guidance article{padding:var(--s-4)}}

/* ==========================================================================
   Prose / SEO article
   ========================================================================== */
.prose{max-width:74ch;margin-inline:auto;color:var(--c-text-2)}
.prose h1{font-size:var(--fs-h1);letter-spacing:var(--tracking-display);color:var(--c-text);margin-bottom:var(--s-5)}
.prose h2{font-size:var(--fs-h2);letter-spacing:var(--tracking-display);color:var(--c-text);margin:var(--s-7) 0 var(--s-3)}
.prose h3{font-size:var(--fs-h3);color:var(--c-text);margin:var(--s-6) 0 var(--s-2)}
.prose p{margin-bottom:var(--s-4);line-height:var(--lh-body)}
.prose ul,.prose ol{margin:0 0 var(--s-4);padding-left:1.3em}
.prose li{margin-bottom:6px}
.prose a{color:var(--c-accent);text-decoration:underline}
.prose-panel{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-xl);padding:var(--s-7)}
@media(max-width:640px){.prose-panel{padding:var(--s-5)}}
.related-searches{border-top:1px solid var(--c-line);margin-top:var(--s-6);padding-top:var(--s-4)}
.related-searches h3{margin-top:0}
.related-searches p{font-size:var(--fs-sm);color:var(--c-muted)}
.tool-report-line{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--c-line);font-size:var(--fs-sm);color:var(--c-muted)}
.tool-report-line a{color:var(--c-accent)}
.tool-report-line a:hover{text-decoration:underline}

/* ==========================================================================
   Forms / panels (public)
   ========================================================================== */
.narrow-page{max-width:560px;margin:var(--s-8) auto var(--s-9);padding:0 var(--s-5)}
.panel{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-xl);padding:var(--s-6);margin-bottom:var(--s-5)}
.panel h1{font-size:var(--fs-h2);letter-spacing:var(--tracking-display);margin-bottom:var(--s-2)}
.panel h2{font-size:var(--fs-h3);margin-bottom:var(--s-3)}
.panel label,.admin-login-card label{display:block;font-size:var(--fs-sm);font-weight:550;margin:var(--s-4) 0 6px}
.panel input,.panel textarea,.panel select,.admin-login-card input{
  width:100%;border:1px solid var(--c-line-strong);border-radius:var(--r-md);
  padding:11px 13px;background:#fff;outline:none;transition:border-color .15s ease;
}
.panel input:focus,.panel textarea:focus,.panel select:focus,.admin-login-card input:focus{border-color:var(--c-accent)}
.panel input:disabled{background:var(--c-bg-alt);color:var(--c-muted)}
.panel form>.btn,.panel form>button{margin-top:var(--s-5)}
.muted{color:var(--c-muted)}
.small-note{font-size:var(--fs-sm);color:var(--c-muted);margin-top:var(--s-4)}
.small-note a{color:var(--c-accent)}
.oauth-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  border:1px solid var(--c-line-strong);background:#fff;border-radius:var(--r-md);
  padding:14px 16px;margin:var(--s-2) 0;text-align:left;font-weight:550;
}
.oauth-btn span{font-size:var(--fs-xs);color:var(--c-muted);font-weight:400}
.oauth-btn:disabled{opacity:.65}
.cloud-account-note{margin:16px 0 0;padding:13px 15px;border:1px solid #bfe7d1;border-radius:var(--r-md);background:var(--c-success-bg);color:#22543d;font-size:var(--fs-sm);line-height:1.55}
.cloud-open-button{min-height:34px;padding:6px 10px;border:1px solid var(--c-line);border-radius:999px;background:#fff;color:var(--c-text);font:inherit;font-size:12px;font-weight:650;cursor:pointer}.cloud-open-button:hover{border-color:var(--c-accent);color:var(--c-accent)}.cloud-open-button:disabled{opacity:.58;cursor:wait}.cloud-status{min-height:0;padding:0 16px;color:var(--c-muted);font-size:12px}.cloud-status:not(:empty){padding-top:7px;padding-bottom:7px;border-bottom:1px solid var(--c-line)}.cloud-status.is-error{color:#b42318}.cloud-picker-modal{position:fixed;z-index:130;inset:0;display:grid;place-items:center;padding:18px;background:rgba(8,21,48,.64)}.cloud-picker-card{display:flex;flex-direction:column;width:min(680px,100%);max-height:min(720px,86vh);overflow:hidden;border:1px solid var(--c-line);border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.28)}.cloud-picker-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--c-line)}.cloud-picker-head button{width:34px;height:34px;border:0;border-radius:50%;background:var(--c-bg-alt);font-size:23px;cursor:pointer}.cloud-picker-path{padding:10px 18px;color:var(--c-muted);font-size:13px;border-bottom:1px solid var(--c-line)}.cloud-picker-list{display:grid;overflow:auto;padding:8px}.cloud-picker-row{width:100%;padding:12px 14px;border:0;border-radius:10px;background:#fff;color:var(--c-text);font:inherit;text-align:left;cursor:pointer}.cloud-picker-row:hover,.cloud-picker-row:focus{background:var(--c-accent-soft);outline:none}
.cloud-tools-link{display:inline-flex;margin-top:12px}.cloud-tools-link[hidden]{display:none}
.alert{padding:12px 14px;border-radius:var(--r-md);margin-bottom:var(--s-4);font-size:var(--fs-sm)}
.alert.success{background:var(--c-success-bg);color:var(--c-success);border:1px solid #bfe7d1}
.alert.error{background:var(--c-danger-bg);color:var(--c-danger);border:1px solid #f6cfcb}
.empty-state{background:var(--c-bg-alt);border-radius:var(--r-xl);padding:var(--s-8) var(--s-5);text-align:center;color:var(--c-muted)}
.empty-state strong{color:var(--c-text)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:#071a3a;color:#fff;border-top:1px solid #132e59;padding:var(--s-8) var(--s-5) var(--s-6);font-size:var(--fs-sm)}
.footer-inner{max-width:var(--content-max);margin-inline:auto}
.footer-cols{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:var(--s-6)}
.footer-brand p{color:#aebbd0;margin-top:var(--s-3);max-width:34ch;line-height:1.55}
.footer-col h2{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:#fff;font-weight:600;margin-bottom:var(--s-3)}
.footer-col a{display:block;color:#aebbd0;padding:5px 0;transition:color .15s ease}
.footer-col a:hover{color:#fff}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid #1b3964;color:#8fa1bd;font-size:var(--fs-xs)}
@media(max-width:960px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}.footer-brand{grid-column:1/-1}}
@media(max-width:520px){.footer-cols{grid-template-columns:1fr}}

/* ==========================================================================
   Admin + recovery layer (unchanged behaviour, retokenised colours)
   ========================================================================== */
.admin-login-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--c-bg-alt)}
.admin-login-card{width:min(420px,100%);background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:var(--sh-2)}
.admin-login-card .btn{width:100%;margin-top:var(--s-4)}
.admin-top{height:62px;background:#fff;border-bottom:1px solid var(--c-line);display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.admin-top>div:last-child{display:flex;gap:14px}
.admin-top a{margin-left:12px}
.admin-layout{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 62px);background:var(--c-bg-alt)}
.admin-sidebar{background:#fff;border-right:1px solid var(--c-line);padding:14px;display:flex;flex-direction:column;gap:4px}
.admin-sidebar a{padding:10px 12px;border-radius:9px;font-weight:600;font-size:var(--fs-sm)}
.admin-sidebar a.active,.admin-sidebar a:hover{background:var(--c-bg-alt)}
.admin-main{padding:24px;max-width:1400px;width:100%}
.admin-main h1{font-size:30px}
.admin-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:16px}
.admin-page-head h1{margin-bottom:4px}
.admin-page-head p{margin:0;color:var(--c-muted)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.metric-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md);padding:16px}
.metric-card span{display:block;color:var(--c-muted);font-size:12px}
.metric-card strong{font-size:24px;display:block;margin-top:5px}
.admin-two-col{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:16px}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{text-align:left;padding:11px 9px;border-bottom:1px solid var(--c-line);vertical-align:top}
.admin-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted)}
.admin-table small{color:var(--c-muted)}
.admin-table form{display:inline}
.admin-table td{max-width:420px}
.admin-table code{white-space:normal;word-break:break-word}
.admin-table-scroll{max-width:100%;overflow:auto}.totp-qr{display:grid;place-items:center;min-height:220px;margin:18px 0;padding:12px;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-md)}.totp-qr img,.totp-qr canvas{max-width:100%;height:auto}.totp-secret{display:grid;gap:6px}.totp-secret code{padding:10px;border-radius:8px;background:var(--c-bg-alt);overflow-wrap:anywhere;letter-spacing:.08em}.cloud-setup-notes{margin-top:24px;padding:18px;border-radius:var(--r-md);background:var(--c-bg-alt)}.cloud-setup-notes h2 .small-note{font-weight:500}.cloud-config-status{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.cloud-config-status span{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid var(--c-line);border-radius:999px;background:#fff;font-size:12px;font-weight:700}.cloud-config-status .is-ready{border-color:#a9dfc3;background:#edf9f3;color:#087443}.cloud-config-status .is-pending{border-color:#f1c7bd;background:#fff3f0;color:#b42318}.cloud-app-fields{margin-top:20px}.cloud-app-fields small{display:block;margin:4px 0;color:var(--c-muted);font-weight:400}.cloud-app-fields code{font-size:inherit}
.privacy-strip{border-bottom:1px solid #b8d5ff;background:#eaf3ff;color:#083d9e}.privacy-strip a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:7px 16px;color:inherit;text-align:center;text-decoration:none;font-size:13px}.privacy-strip strong{white-space:nowrap}.privacy-page{padding:clamp(42px,7vw,88px) 16px}.privacy-hero{width:min(860px,100%);margin:0 auto 36px;text-align:center}.privacy-hero h1{font-size:clamp(38px,6vw,68px);margin:10px 0 14px}.privacy-hero>p{font-size:clamp(17px,2vw,21px);line-height:1.65;color:var(--c-muted)}.privacy-proof{display:inline-flex;margin-top:18px;padding:10px 15px;border-radius:999px;background:#e9f8f0;color:#087443;font-weight:750}.privacy-grid{width:min(960px,100%);margin:auto;display:grid;gap:16px}.privacy-card{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:clamp(20px,3vw,30px);background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);box-shadow:var(--sh-1)}.privacy-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--c-accent-soft);color:var(--c-accent)}.privacy-icon svg{width:23px;height:23px}.privacy-card h2{margin:1px 0 8px}.privacy-card p{margin:0;color:var(--c-muted);line-height:1.7}
.privacy-technical{width:min(960px,100%);margin:16px auto 0;padding:14px 16px;border-radius:var(--r-md);background:var(--c-bg-alt);color:var(--c-muted);font-size:13px;line-height:1.6}
@media(max-width:640px){.privacy-strip a{align-items:flex-start;gap:3px;flex-direction:column;min-height:0;padding:7px 12px;text-align:left;font-size:11px}.privacy-strip strong{font-size:12px}.privacy-card{grid-template-columns:1fr}.oauth-btn{align-items:flex-start;flex-direction:column;padding:12px 14px}.oauth-btn span{line-height:1.4}.cloud-account-note{padding:11px 12px}.cloud-open-button{padding:5px 7px;font-size:10px}.cloud-picker-modal{padding:8px}.cloud-picker-card{max-height:92vh;border-radius:14px}.cloud-config-status{display:grid}.cloud-config-status span{border-radius:10px}}
.preview-label{padding:10px;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:9px;margin:10px 0}
.check{display:flex!important;align-items:center;gap:8px}
.check input{width:auto!important}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.span2{grid-column:1/-1}
.tool-form{margin-top:16px;scroll-margin-top:16px}
.tool-form:target{border-color:#9bbdf4;box-shadow:0 0 0 3px rgba(16,90,230,.1)}
.seo-editor{margin:10px 0;padding:18px;border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-surface-2)}
.seo-editor h3{margin:0 0 14px;font-size:16px}
.seo-counter{float:right;margin-left:10px;color:var(--c-muted);font-size:12px;font-weight:500}
.seo-counter.over{color:var(--c-danger);font-weight:700}
.seo-over{border-color:var(--c-danger)!important;box-shadow:0 0 0 3px rgba(214,57,57,.08)}
.serp-preview{margin-top:16px;padding:16px;border:1px solid var(--c-line);border-radius:12px;background:#fff;font-family:Arial,sans-serif}
.serp-preview .serp-url{display:block;color:#202124;font-size:12px;overflow-wrap:anywhere}
.serp-preview .serp-title{display:block;margin-top:6px;color:#1a0dab;font-size:19px;line-height:1.25;font-weight:400;overflow-wrap:anywhere}
.serp-preview .serp-description{margin:5px 0 0;color:#4d5156;font-size:13px;line-height:1.4;display:block;overflow-wrap:anywhere}
.current-og{display:inline-block;margin-top:6px;font-size:12px}
.seo-missing-badge{display:inline-block;margin:5px 0 0 8px;padding:3px 7px;border-radius:999px;background:#fff0d5;color:#8b4d00;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}
.creator-page{padding-top:var(--s-7);padding-bottom:var(--s-8)}
.staff-operations{display:grid;grid-template-columns:2fr 1.25fr 1fr;gap:16px;margin:18px 0}
.staff-operations>.panel{margin:0;min-width:0;overflow:auto}
.inline-search{display:flex;gap:10px;max-width:680px;align-items:center}
.inline-search input{flex:1}
.linkbtn{border:0;background:none;padding:3px 6px;color:var(--c-accent);text-decoration:underline;cursor:pointer}
.dangertext{color:var(--c-danger)!important}
.ad-safety{background:var(--c-surface-2);color:var(--c-muted)}
@media(max-width:1050px){.admin-two-col,.staff-operations{grid-template-columns:1fr}}
@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .site-header,.header-inner,.page-frame,.page-frame>main,.home-hero,.tool-section,.listing-hero{width:100%;max-width:100%;min-width:0}
  .header-inner{padding-inline:16px}.brand{min-width:0}.brand>span{overflow-wrap:anywhere}
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{border-right:0;border-bottom:1px solid var(--c-line);flex-direction:row;overflow:auto}
  .admin-sidebar a{overflow-wrap:anywhere}
  .metric-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .span2{grid-column:auto}
}

/* ==========================================================================
   Responsive tail
   ========================================================================== */
@media(max-width:760px){
  .hero{padding:var(--s-6) var(--s-3) var(--s-5)}
  .page-shell{padding:var(--s-5) var(--s-4) var(--s-7)}
  .section{padding-block:var(--s-6)}
  .section-head{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
  .wrap{padding-inline:16px}
  .home-hero{padding:25px 16px 14px}
  .home-hero h1{font-size:36px;overflow-wrap:anywhere}
  .home-hero>p:not(.search-examples){font-size:15px;line-height:1.35;margin-top:8px}
  .hero-benefits{gap:7px;margin-top:14px}.hero-benefits li{min-height:30px;padding:5px 9px;font-size:12px}
  .hero-ad .ad-slot{margin:8px auto 12px}
  .ad-hero-banner{padding:8px 16px;border-left-width:3px}.ad-hero-logo{width:58px!important;height:58px!important}.ad-hero-copy{margin-left:12px}.ad-hero-copy strong{font-size:17px}.ad-hero-copy>span{margin-top:2px;font-size:11px;overflow-wrap:anywhere}.ad-hero-copy small{display:none}.ad-hero-decor{right:-48px;top:-65px}
  .home-chips,.listing-chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 16px 14px}.home-chips::-webkit-scrollbar,.listing-chips::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;padding:7px 13px}
  .home-publisher-intro{padding-block:22px 34px}.home-publisher-intro>h2,.home-workflow h2,.home-limits h2,.home-faq>h2{font-size:25px}.home-publisher-intro>p:last-of-type{font-size:15px;line-height:1.6}.home-publisher-areas{grid-template-columns:1fr;gap:12px;margin-top:20px}.home-publisher-areas article{padding:19px}
  .home-publisher-detail{padding:38px 0 48px}.home-workflow{grid-template-columns:1fr;gap:22px}.home-workflow li{padding:16px 16px 16px 52px}.home-workflow li::before{top:16px;left:15px}.home-limits{margin-top:32px;padding:20px}.home-faq{margin-top:32px}
  .tool-section{padding:20px 0 30px}.section-head{margin-bottom:15px}.section-head h2{font-size:24px}.section-head p{display:none}
  .tool-grid{width:100%;max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:13px}
  .tool-card{width:100%;max-width:100%;min-width:0;grid-template-columns:46px minmax(0,1fr);min-height:126px;padding:17px;column-gap:13px;row-gap:8px}.tool-card .tool-icon{width:46px;height:46px}.tool-card p{margin-top:4px;overflow-wrap:anywhere}.tool-card .format-line{font-size:10.5px;min-width:0}
  .listing-hero{padding:24px 16px 14px}.listing-hero-row{display:block}.listing-hero h1{font-size:34px}.compact-search{margin-top:16px;width:100%}.listing-results{padding-top:22px}
  .category-publisher-intro{padding-block:22px 30px}.category-publisher-intro h2,.category-publisher-detail h2{font-size:25px}.category-publisher-intro p:not(.eyebrow){font-size:15px;line-height:1.62}.category-publisher-detail{padding:38px 0 48px}.category-faq{margin-top:30px}
  .trust-strip{grid-template-columns:1fr;padding-block:30px 46px;gap:10px}
  .tool-page .wrap{width:100%;max-width:100%;min-width:0}
  .tool-stage{border-radius:16px;width:100%;max-width:100%;min-width:0;overflow:hidden}.tool-stage-bar{padding:10px 12px;min-width:0;gap:8px;flex-wrap:wrap}.tool-stage-bar strong{min-width:0;overflow-wrap:anywhere}.tool-stage-actions{gap:5px;flex-wrap:wrap}.safe-badge{font-size:10px;padding:4px 7px;text-align:center;overflow-wrap:anywhere}.tool-fullscreen-toggle{padding:6px;flex-wrap:wrap}.tool-fullscreen-toggle span{position:static;width:auto;height:auto;overflow:visible;clip:auto;overflow-wrap:anywhere}.tool-frame{display:block;width:100%;max-width:100%;min-width:0;overflow:hidden}
  /* Popout on small screens remains a complete card so its lower corners and scrollbar stay
     inside the same clipping shell as the title bar. */
  .tool-popout{--tool-popout-gutter:12px;padding:var(--tool-popout-gutter);align-items:center}
  .tool-popout-panel{width:100%;max-width:100%;min-width:0;max-height:calc(100vh - (var(--tool-popout-gutter) * 2));max-height:calc(100dvh - (var(--tool-popout-gutter) * 2));border-radius:16px}
  .tool-popout-bar{padding:10px 12px;gap:8px}
  .tool-popout-actions{gap:5px}
  .tool-popout-close,.tool-popout-expand{padding:6px 8px}.tool-popout-close span,.tool-popout-expand span{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Locale controls and long-word resilience. */
.locale-menu{position:relative}.locale-button{max-width:170px;overflow-wrap:anywhere}.locale-options{position:absolute;z-index:90;right:0;top:calc(100% + 8px);display:none;min-width:190px;padding:7px;background:#fff;border:1px solid var(--c-line);border-radius:12px;box-shadow:0 14px 36px rgba(16,33,58,.18)}.locale-menu.open .locale-options{display:grid}.locale-options a{padding:9px 11px;border-radius:8px;color:var(--c-text);overflow-wrap:anywhere}.locale-options a:hover,.locale-options a[aria-current="page"]{background:var(--c-surface-2);color:var(--c-accent)}
.mobile-locales{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}.mobile-locales a{min-width:0;overflow-wrap:anywhere}
.language-suggestion{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 16px;background:#eaf3ff;border-bottom:1px solid #c8dcfb;font-size:14px}.language-suggestion button{border:0;background:transparent;font-size:21px;cursor:pointer;color:var(--c-muted)}
.tool-card,.section-head,.footer-col,.mega a{min-width:0}.tool-card h3,.tool-card p,.section-head h2,.footer-col a{overflow-wrap:anywhere}
.locale-editor-tabs{margin:16px 0;padding:16px;border:1px solid var(--c-line);border-radius:14px}.locale-editor-tabs details{margin:8px 0;border:1px solid var(--c-line);border-radius:10px;padding:10px}.locale-editor-tabs summary{font-weight:750;cursor:pointer}.locale-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:12px}.locale-editor-grid .geo-row{margin-top:7px}
@media(max-width:1200px){.header-actions .locale-menu{display:none}}
@media(max-width:760px){.locale-editor-grid{grid-template-columns:1fr}.locale-editor-grid .span2{grid-column:auto}}

/* Tool suggestion: one focused, privacy-minimal public form. */
.suggest-link{white-space:nowrap}.suggest-page{padding:clamp(32px,7vw,84px) 16px}.suggest-card{width:min(720px,100%);margin:auto;padding:clamp(22px,4vw,42px);background:#fff;border:1px solid var(--c-line);border-radius:var(--r-xl);box-shadow:var(--sh-1)}.suggest-card h1{font-size:clamp(32px,5vw,52px);margin:4px 0 12px}.suggest-card .lead{color:var(--c-muted);font-size:18px;line-height:1.6}.suggest-privacy{margin:18px 0;padding:12px 14px;border-radius:var(--r-md);background:var(--c-bg-alt);color:var(--c-muted);font-size:var(--fs-sm)}.suggest-form{display:grid;gap:8px;margin-top:24px}.suggest-form label{font-weight:650;margin-top:10px}.suggest-form input,.suggest-form textarea{width:100%;border:1px solid var(--c-line);border-radius:var(--r-md);padding:12px 14px;font:inherit;background:#fff}.suggest-form input:focus,.suggest-form textarea:focus{outline:2px solid rgba(16,90,230,.18);border-color:var(--c-accent)}.suggest-form small{color:var(--c-muted)}.suggest-form .btn{justify-self:start;margin-top:8px}.suggest-form .btn:disabled{opacity:.65;cursor:wait}.suggest-status{min-height:22px;margin-top:8px;font-size:var(--fs-sm)}.suggest-status.is-working{color:var(--c-muted)}.suggest-status.is-success{color:#087443}.suggest-status.is-error{color:#b42318}
@media(max-width:1250px) and (min-width:1041px){.header-search{width:140px}.header-nav>.nav-link{padding-inline:8px}}
@media(max-width:520px){.suggest-page{padding:22px 12px}.suggest-card{padding:20px 16px;border-radius:18px}.suggest-card .lead{font-size:16px}}

/* Compact outer shell for every tool route on phones. */
@media(max-width:640px){
  .tool-page>.wrap{padding-inline:8px!important}
  .tool-page>.wrap>.breadcrumbs{padding:10px 2px!important;font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tool-stage{border-radius:12px!important}
  .tool-stage-bar{flex-wrap:nowrap!important;min-height:42px;padding:6px 8px!important;gap:6px!important}
  .tool-stage-bar>strong{min-width:0!important;font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tool-stage-actions{flex:0 0 auto!important;flex-wrap:nowrap!important;gap:4px!important}
  .safe-badge{display:none!important}
  .tool-fullscreen-toggle{width:32px!important;height:32px!important;padding:6px!important;justify-content:center!important}
  .tool-fullscreen-toggle span{display:none!important}
  .tool-fullscreen-toggle svg{width:14px;height:14px}
  .tool-frame{width:100%!important;max-width:100%!important;min-width:0!important}
}
.tool-critical-notice{margin:0 0 16px;padding:14px 18px;border:1px solid #c8dafa;border-radius:14px;background:#f1f6ff;color:#263e63;line-height:1.65;overflow-wrap:anywhere}
.tool-critical-notice p{margin:4px 0 0}