/* Name & Rename — merged shell for the Campaign Naming Generator + Bulk Rename.
   nm- prefixed. Only the tab strip + the bridge note live here; each pane keeps
   its own tool's stylesheet untouched (.cn-app / .br-app, incl. their
   .X-app .panel{padding:22px} fix for the global section padding). */
.nm-tabsbar{margin:18px auto 0}
.nm-tabs{display:inline-flex;align-self:flex-start;background:#f1f3f7;border:1px solid #e5e9f0;border-radius:12px;padding:4px;gap:3px;flex-wrap:wrap}
.nm-tab{border:0;background:transparent;color:#5b6575;font-size:.92rem;font-weight:800;padding:10px 18px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color .14s,background .14s}
.nm-tab:hover{color:#2c3543}
.nm-tab i{font-size:.9em}
.nm-tab.active{background:#fff;box-shadow:0 1px 4px rgba(20,30,60,.16)}
.nm-tab.active[data-pane="campaigns"]{color:#059669}
.nm-tab.active[data-pane="rename"]{color:#b45309}
.nm-pane[hidden]{display:none}
.nm-pane>.app{margin-top:14px}

/* bridge landing note (rename pane): "using N generated campaign names" */
.br-names-note{display:flex;gap:9px;align-items:flex-start;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:12px 16px;font-size:.88rem;color:#854d0e;line-height:1.5}
.br-names-note[hidden]{display:none}
.br-names-note>i{color:#d97706;margin-top:2px}
.br-names-note b{color:#78350f}
.br-names-clear{border:0;background:none;color:#b45309;font-weight:800;cursor:pointer;text-decoration:underline;padding:0;font:inherit}

/* dark mode */
html.dark .nm-tabs{background:#23262d;border-color:#343943}
html.dark .nm-tab{color:#9aa3b2}
html.dark .nm-tab:hover{color:#d7dbe2}
html.dark .nm-tab.active{background:#33373f}
html.dark .nm-tab.active[data-pane="campaigns"]{color:#34d399}
html.dark .nm-tab.active[data-pane="rename"]{color:#fbbf24}
html.dark .br-names-note{background:#2a2410;border-color:#5a4718;color:#d9c58a}
html.dark .br-names-note b{color:#fde68a}
html.dark .br-names-clear{color:#fbbf24}

/* ════════════════════════════════════════════════════════════════
   HERO — one mascot band for the whole Name & Rename tool (2026-07-19)
   ⚠️ Art is 3:1 (much wider than the band is tall). Do NOT use `cover`
   here: a band taller than bandW/3 would scale it up and crop it
   HORIZONTALLY, eating the left space the glass card sits on.
   Instead `100% auto` + bottom anchor = the image always spans the full
   width and never crops; extra band height becomes space ABOVE the art,
   filled by a horizontal gradient sampled from the image's own top edge
   (x=0/25/50/75/100% → #fbfbfd,#646488,#585b84,#52557e,#2a2f4d).
   Card height is therefore free to change. Same trick as the ZIP tool.
   ════════════════════════════════════════════════════════════════ */
/* aspect-ratio (not a fixed min-height) so the band tracks the image's 3:1 at EVERY
   viewport width — a fixed height clips the art's top on wide screens. If the card is
   taller than width/3 the band simply grows and the gradient fills the sky above. */
.nm-hero{display:flex;align-items:center;position:relative;overflow:hidden;border-radius:22px;margin-bottom:14px;padding:0 clamp(14px,3vw,40px);min-height:280px;
  border:1px solid #e2ddf0;
  background:url(img/hero-naming.jpg?v=1) right center/cover no-repeat,
             linear-gradient(90deg,#fbfbfd 0%,#646488 25%,#585b84 50%,#52557e 75%,#2a2f4d 100%)}
.nm-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(245,244,251,.58) 0%,rgba(245,244,251,.44) 36%,rgba(245,244,251,.42) 54%,transparent 70%)}

/* aspect-as-a-FLOOR: a 0-width flex spacer whose %-padding = width/3 keeps the band at
   least as tall as the 3:1 art at any viewport, while still letting a TALLER card grow it
   (plain `aspect-ratio` fixes the height and clips the card under overflow:hidden). */
html.dark .nm-hero{border-color:#302a42}
html.dark .nm-hero::before{background:linear-gradient(100deg,rgba(19,17,28,.74) 0%,rgba(19,17,28,.54) 38%,rgba(19,17,28,.36) 56%,transparent 72%)}
@media(max-width:820px){.nm-hero{aspect-ratio:auto;min-height:0}}

.nm-hero-widget{position:relative;z-index:1;width:min(560px,50%);max-width:100%;margin:14px 0;min-height:200px;justify-content:space-between;display:flex;flex-direction:column;gap:6px;
  padding:clamp(14px,1.5vw,18px);border-radius:20px;background:rgba(255,255,255,.41);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(255,255,255,.64);box-shadow:0 24px 55px rgba(40,26,80,.2)}
html.dark .nm-hero-widget{background:rgba(22,18,34,.62);border-color:rgba(150,130,210,.2);box-shadow:0 24px 55px rgba(0,0,0,.5)}
@media(max-width:820px){.nm-hero-widget{width:auto;max-width:none;min-height:0;max-height:none}}

.nm-hero-tools{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:-2px 0 -6px}
.nm-hero-brand{display:flex;flex-direction:column}
.nm-hero-title{font-size:clamp(22px,2.4vw,29px);font-weight:900;letter-spacing:-.02em;line-height:1.05;color:#1c1b2e;margin:0 0 5px}
html.dark .nm-hero-title{color:#f0edfa}
.nm-hero-sub{font-size:13px;line-height:1.5;color:#585470;margin:0;max-width:42ch}
html.dark .nm-hero-sub{color:#aca6c2}

/* in-card trust chips (2×2, borderless) */
.nm-hchips{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:0;padding:10px 0 0;border-top:1px solid rgba(110,95,150,.18)}
.nm-hchip{display:flex;align-items:center;gap:9px;min-width:0}
.nm-hchip>i{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:#fef3e0;color:#c2760a;font-size:12px}
.nm-hchip strong{display:block;font-size:11.5px;font-weight:800;color:#1c1b2e;line-height:1.15}
.nm-hchip span{display:block;font-size:10px;color:#6b7280;font-weight:600;margin-top:1px}
html.dark .nm-hchips{border-top-color:rgba(160,140,220,.24)}
html.dark .nm-hchip strong{color:#f0edfa}
html.dark .nm-hchip span{color:#aca6c2}
html.dark .nm-hchip>i{background:rgba(214,158,46,.22);color:#f5c661}

/* compact per-pane header (the band above carries the pitch) */
.nm-panehead{margin-bottom:14px}
.nm-panehead-sub{font-size:12.5px;line-height:1.55;color:#6b7280;margin:8px 0 0;max-width:74ch}
html.dark .nm-panehead-sub{color:#9aa5ba}

/* ════════════════════════════════════════════════════════════════
   PRICE / FEATURE COMPARISON — one block for the whole tool, sits
   BELOW both panes so it isn't repeated. Self-contained (amber, to
   match the tool's t-amber accent) — do NOT reuse another tool's
   *-cmp CSS: those are scoped to their own .X-app root.
   Hidden for paying users via body.is-premium.
   ════════════════════════════════════════════════════════════════ */
.nm-cmpwrap{margin-top:4px}
.nm-cmp{padding:clamp(20px,3vw,34px)}
.nm-cmp-head{text-align:center;max-width:820px;margin:0 auto 22px}
.nm-cmp-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#b45309;background:#fef3e0;border:1px solid #fbdfae;padding:5px 12px;border-radius:99px;margin-bottom:13px}
.nm-cmp-head h2{font-size:clamp(20px,2.5vw,28px);font-weight:900;letter-spacing:-.02em;line-height:1.22;margin:0 0 9px;text-wrap:balance;color:#1c1b2e}
.nm-cmp-hl{background:linear-gradient(100deg,#b45309,#d97706 50%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}
html.dark .nm-cmp-head h2{color:#f0edfa}
html.dark .nm-cmp-hl{background:linear-gradient(100deg,#f5c661,#fbbf24 50%,#fde68a);-webkit-background-clip:text;background-clip:text;color:transparent}
.nm-cmp-sub{color:#585470;font-size:14.5px;line-height:1.6;margin:0}
html.dark .nm-cmp-sub{color:#aca6c2}

.nm-cmp-value{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 22px;padding:18px 24px;border-radius:18px;background:linear-gradient(120deg,#fef3e0,rgba(240,180,90,.16));border:1px solid #fbdfae}
.nm-cmp-value-num{flex:0 0 auto;display:flex;align-items:flex-end;font-size:54px;font-weight:900;letter-spacing:-.03em;color:#b45309;line-height:1}
.nm-cmp-approx{font-size:24px;font-weight:700;margin-right:2px;opacity:.7;align-self:center}
.nm-cmp-per{font-size:18px;font-weight:800;margin-left:5px;margin-bottom:7px}
.nm-cmp-value-body{flex:1 1 260px;font-size:14.5px;line-height:1.6;color:#282344}
html.dark .nm-cmp-value{background:linear-gradient(120deg,rgba(110,80,30,.4),rgba(80,60,25,.22));border-color:#5a4718}
html.dark .nm-cmp-value-num{color:#f5c661}
html.dark .nm-cmp-value-body{color:#e2ddf2}
.nm-cmp-cta{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-weight:800;font-size:13.5px;color:#b45309;text-decoration:none}
html.dark .nm-cmp-cta{color:#f5c661}
.nm-cmp-cta:hover{text-decoration:underline}

.nm-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;border:1px solid #e7ebf2}
html.dark .nm-cmp-scroll{border-color:#302a42}
.nm-cmp-table{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;font-size:14px}
.nm-cmp-table th,.nm-cmp-table td{padding:13px 16px;text-align:center;border-bottom:1px solid #eef1f6;vertical-align:middle}
html.dark .nm-cmp-table th,html.dark .nm-cmp-table td{border-color:#2a2440}
.nm-cmp-table tbody th{text-align:left;font-weight:700;color:#241f3a;width:26%}
html.dark .nm-cmp-table tbody th{color:#e8e4f2}
.nm-cmp-table thead th{font-size:15px;font-weight:800;color:#334;vertical-align:bottom}
html.dark .nm-cmp-table thead th{color:#cdc7de}
.nm-cmp-table thead .nm-cmp-flabel{width:26%}
.nm-cmp-table tbody tr:last-child th,.nm-cmp-table tbody tr:last-child td{border-bottom:0}
.nm-cmp-sublabel{display:block;font-size:10.5px;font-weight:600;color:#6b7280;margin-top:4px;line-height:1.35}
html.dark .nm-cmp-sublabel{color:#9d96b4}
.nm-cmp-col-us{background:#fef7ec}
html.dark .nm-cmp-col-us{background:rgba(214,158,46,.14)}
thead .nm-cmp-col-us{background:linear-gradient(180deg,#f59e0b,#b45309);color:#fff;border-radius:13px 13px 0 0;border-bottom:0}
/* ⚠️ must re-state the header gradient for dark: `html.dark .nm-cmp-col-us` (0,2,1) outranks
   `thead .nm-cmp-col-us` (0,1,1), so the dark CELL tint would flatten the header. */
html.dark .nm-cmp-table thead th.nm-cmp-col-us{background:linear-gradient(180deg,#d97706,#8f4208);color:#fff}
html.dark .nm-cmp-table thead th.nm-cmp-col-us .nm-cmp-sublabel{color:rgba(255,255,255,.82)}
.nm-cmp-badge{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.9;margin-bottom:3px}
.nm-cmp-note{display:block;font-size:11px;color:#6b7280;font-weight:600;margin-top:3px;line-height:1.4}
.nm-cmp-y,.nm-cmp-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff}
.nm-cmp-y{background:#b45309;font-size:12px}
.nm-cmp-n{background:#cfd6dc;font-size:11px}
.nm-cmp-na{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f1f3f7;color:#6b7280;font-size:12px;font-weight:800}
html.dark .nm-cmp-n{background:#413a58}
html.dark .nm-cmp-na{background:#2b2740;color:#9d96b4}
.nm-cmp-pertool{display:block;margin-top:3px;font-weight:800;font-size:12.5px;color:#b45309}
.nm-cmp-fine{margin:14px 4px 0;font-size:11.5px;color:#6b7280;line-height:1.55;text-align:center}
html.dark .nm-cmp-fine{color:#a49eb8}
/* dark: theme the CELL first — a bare .nm-cmp-note (0,1,0) loses to `.nm-cmp-table td` (0,2,0) */
html.dark .nm-cmp-table td{color:#e4e0f0}
html.dark .nm-cmp-table td .nm-cmp-pertool{color:#f5c661}
html.dark .nm-cmp-table td .nm-cmp-note,html.dark .nm-cmp-table th .nm-cmp-note{color:#9d96b4}
body.is-premium .nm-cmp{display:none}
@media(max-width:820px){.nm-cmp-value-num{font-size:42px}}

/* ════════════════════════════════════════════════════════════════
   WORDMARK IN LINE 1 (2026-07-19)
   Sizes the Anton wordmark down so it can sit INLINE in .nm-hero-tools
   next to the row's controls instead of stacking above them.
   ⚠️ core/shell.css carries the shared big-wordmark rule
      .tool :is(h1,h2):has(> [class*="title-accent"]){font-family:Anton;
       font-size:clamp(34px,3.6vw,50px)}  → specificity (0,2,1).
   Three classes here = (0,3,0), which outranks it without !important.
   font-family is deliberately NOT touched — the Anton identity stays.
   Until the markup moves .nm-hero-title inside .nm-hero-tools this rule
   simply does not match; that is expected.
   No margin/padding is added — the card stays pinned at 408px.
   ════════════════════════════════════════════════════════════════ */
.nm-app .nm-hero-tools .nm-hero-title{font-size:clamp(19px,2.1vw,26px);line-height:1.05;margin:0;white-space:nowrap}

/* Short hero (2026-07-22, no upload zone lives in this hero): 280 band.
   shell.css re-pins the family to 460 in the 1100–1339px range — this sheet
   loads later, so the same-specificity override wins there too. */
@media(min-width:1100px) and (max-width:1339px){
  .tool .nm-hero{min-height:280px}
}