/* Shared styles for every app page (Explore, Products, Competitors, Market).
   Header, tokens, buttons, hero, search, filter pills, tiles and footer live here. Load with <link rel="stylesheet" href="/site.css"> */
/* ==================== THEME VARIABLES ==================== */
:root {
  color-scheme: light;
  --ink: #10172B;
  --hi: #B9A8FF;
  --bg: #EFF2F1;
  --page: linear-gradient(180deg, #F6F8F7 0%, #E8EEEC 100%);
  --s1: #ffffff;
  --s2: #E4EAE8;
  --s3: #D8E0DE;
  --footbg: #0B1022;
  --winbg: linear-gradient(180deg, #1A2245, #0E1429);
  --ln: rgba(16, 23, 43, 0.12);
  --ln-strong: rgba(16, 23, 43, 0.22);
  --tx: #10172B;
  --mu: #4A5760;
  --ac: #12857B;
  --co: #B9A8FF;
  --glow: rgba(18, 133, 123, 0.18);
  --adbg: #ffffff;
  --btnbg: #10172B;
  --btntx: #ffffff;
  --sh: 0 16px 36px -16px rgba(16, 23, 43, 0.25), 0 2px 6px rgba(16, 23, 43, 0.05);
  --sh-hover: 0 24px 50px -18px rgba(16, 23, 43, 0.35), 0 4px 12px rgba(16, 23, 43, 0.08);
  --bsh: #10172B;
  --e: cubic-bezier(0.2, 0.7, 0.2, 1);
}

:root[data-theme=dusk] {
  color-scheme: dark;
  --bg: #141517;
  --page: linear-gradient(180deg, #17181B 0%, #101113 100%);
  --s1: #222428;
  --s2: #2C2F34;
  --s3: #35393F;
  --footbg: #0A0B0D;
  --winbg: linear-gradient(180deg, #2A2C31, #1B1D21);
  --ln: rgba(255, 255, 255, 0.12);
  --ln-strong: rgba(255, 255, 255, 0.22);
  --tx: #F2F2EE;
  --mu: #B4B6B0;
  --ac: #6FDCCD;
  --co: #B9A8FF;
  --glow: rgba(111, 220, 205, 0.14);
  --adbg: #1C1E22;
  --hi: #B9A8FF;
  --ink: #141517;
  --btnbg: #F2F2EE;
  --btntx: #141517;
  --sh: 0 20px 44px -22px rgba(0, 0, 0, 0.8);
  --sh-hover: 0 30px 64px -22px rgba(0, 0, 0, 0.95), 0 6px 18px rgba(0, 0, 0, 0.6);
  --bsh: #6FDCCD;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  font: 400 15px/1.55 Inter, system-ui, -apple-system, sans-serif;
  color: var(--tx);
  background: var(--page) no-repeat fixed var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

/* Responsive Container */
.ct {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3.2vw, 48px);
}

.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-mini { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.acc { color: var(--ac); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--btnbg);
  color: var(--btntx);
  font: 600 15px Inter, sans-serif;
  padding: 0 24px;
  height: 48px;
  border-radius: 99px;
  border: 0;
  cursor: pointer;
  transition: transform .2s, opacity .2s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); opacity: .92; }

/* Hero Section */
.hero {
  position: relative;
  padding: 130px 0 28px;
  text-align: center;
  /* The glow below is wider than small screens. Clip it sideways only (it still bleeds upward
     behind the header); without this, mobile browsers widen the layout viewport to fit it. */
  overflow-x: clip;
  overflow-y: visible;
}
.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -240px;
  width: 1200px;
  max-width: 160vw;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--glow), transparent);
  pointer-events: none;
}
.hero h1 {
  font: 800 clamp(40px, 6.2vw, 84px)/1.02 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.045em;
  margin-bottom: 14px;
  color: var(--tx);
}
.hero .sub {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--mu);
  max-width: 52ch;
  margin: 0 auto;
}

/* Search and Filter Form */
.fp {
  max-width: 980px;
  width: 100%;
  margin: 28px auto 0;
}
.bs {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 66px;
  padding: 0 8px 0 24px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 99px;
  box-shadow: 0 24px 50px -25px rgba(16, 23, 43, 0.35), 0 2px 4px rgba(16, 23, 43, 0.04);
  transition: box-shadow .2s, border-color .2s;
}
.bs:focus-within {
  border-color: var(--hi);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 25%, transparent), 0 24px 50px -25px rgba(16, 23, 43, 0.35);
}
.bs input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  font-size: 17px;
}
.bs input::placeholder { color: var(--mu); opacity: .75; }
.bs .x {
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--mu);
  padding: 6px;
}
.bs .x:hover { color: var(--tx); }
.bs .btn {
  height: 50px;
  padding: 0 28px;
  background: var(--hi);
  color: var(--ink);
  font-weight: 700;
  border-radius: 99px;
  box-shadow: 0 0 0 1.5px var(--bsh), 3px 3px 0 var(--bsh);
  transition: transform .2s var(--e), box-shadow .2s var(--e), opacity .2s;
}
.bs .btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 0 0 0 1.5px var(--bsh), 5px 5px 0 var(--bsh);
  opacity: .96;
}

/* Custom Dropdown Filters */
.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.dd { position: relative; display: inline-block; }
.dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 99px;
  border: 1px solid var(--ln);
  background: var(--s1);
  color: var(--tx);
  font: 500 13.5px Inter, sans-serif;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
  white-space: nowrap;
  user-select: none;
}
.dd-btn:hover {
  background: var(--s2);
  border-color: color-mix(in srgb, var(--tx) 25%, transparent);
}
.dd.on .dd-btn {
  background: rgba(185, 168, 255, 0.18);
  color: var(--tx);
  border-color: rgba(185, 168, 255, 0.5);
  font-weight: 600;
}
.dd.on .dd-btn .ic { color: var(--hi); }
.dd-btn .ic { width: 15px; height: 15px; color: var(--mu); }
.dd-btn .chev { width: 13px; height: 13px; color: var(--mu); transition: transform .2s; margin-left: 2px; }
.dd[data-open="true"] .dd-btn .chev { transform: rotate(180deg); }
.dd[data-open="true"] .dd-btn {
  border-color: var(--hi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi) 25%, transparent);
}
.dd-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 14px;
  box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.15);
  padding: 6px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 3px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: ddin .18s var(--e);
}
:root[data-theme=dusk] .dd-pop {
  background: var(--s1);
  border-color: var(--ln);
  box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.85);
}
.dd-pop-right { left: auto; right: 0; }
@keyframes ddin { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.dd-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 8px;
  font: 500 13px Inter, sans-serif;
  color: var(--tx);
  cursor: pointer;
  transition: background .15s, color .15s;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
}
.dd-opt:hover { background: var(--s2); color: var(--tx); }
:root[data-theme=dusk] .dd-opt:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.dd-opt[aria-selected="true"] {
  background: rgba(185, 168, 255, 0.22);
  color: var(--tx);
  font-weight: 600;
}
.dd-opt[aria-selected="true"]::after {
  content: '✓';
  font-weight: 700;
  font-size: 12px;
  color: var(--hi);
}
.pills .rs {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--mu);
  font: 500 13.5px Inter, sans-serif;
  cursor: pointer;
  padding: 0 12px;
}
.pills .rs:hover { color: var(--tx); }

.try {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--mu);
}
.try a {
  text-decoration: underline;
  text-decoration-color: var(--ln);
  text-underline-offset: 4px;
}
.try a:hover { color: var(--tx); text-decoration-color: var(--hi); }

/* Results Bar */
.rb {
  position: sticky;
  top: 78px; /* header: 14px offset + 60px tall, plus a 4px gap */
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 36px 0 24px;
  padding: 12px 18px;
  border: 1px solid var(--ln);
  border-radius: 16px;
  /* Near-opaque instead of a backdrop blur: a sticky blurred bar is re-blurred on every scrolled frame */
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.15);
}
/* While pinned, cover the strip between the header and the bar so cards do not show through it.
   The top corners go square and the top border goes away: rounded corners would leave two small
   uncovered gaps under the strip where scrolling cards show through. */
.rb.is-stuck {
  background: var(--bg);
  border-top-color: transparent;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.35);
}
.rb.is-stuck::before {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 100%;
  height: 80px;
  background: var(--bg);
  pointer-events: none;
}
.rb-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rb h2 {
  font: 700 clamp(20px, 2.4vw, 28px)/1.1 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.03em;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12px Inter, sans-serif;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--ln);
  background: var(--s1);
  color: var(--tx);
}
.live-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2FA36B;
  box-shadow: 0 0 8px #2FA36B;
}
.live-badge.not-live { color: var(--mu); }
.live-badge.not-live i { background: var(--mu); box-shadow: none; opacity: .55; }
.lnk-action {
  background: none;
  border: 0;
  color: var(--ac);
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
:root[data-theme=dusk] .lnk-action { color: var(--hi); }

.ctl {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.search-within {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 10px;
}
.search-within:focus-within { border-color: var(--hi); }
.search-within input {
  border: 0;
  outline: 0;
  background: none;
  font-size: 13.5px;
  width: 170px;
}
.search-within input::placeholder { color: var(--mu); }
.vt {
  display: flex;
  border: 1px solid var(--ln);
  border-radius: 10px;
  overflow: hidden;
  background: var(--s1);
}
.vt button {
  height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--mu);
  font: 600 13px Inter, sans-serif;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vt button:hover { color: var(--tx); }
.vt button[aria-pressed=true] {
  background: var(--hi);
  color: var(--ink);
  font-weight: 700;
}

/* ==================== SAAS AD CARD CONTAINER ==================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  width: 100%;
}
/* At most three tiles per row, at least 280px each (Products: the API keeps any 3 consecutive
   products from different advertisers, so every row shows three different advertisers). The 1px
   keeps rounding from turning three columns into two. */
.grid.grid-max3 {
  grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 2 * clamp(16px, 2vw, 28px)) / 3 - 1px)), 1fr));
}

/* Badges */
.badge-scale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 11.5px Inter, sans-serif;
  padding: 4px 9px;
  border-radius: 99px;
  /* Solid, no backdrop blur: dozens of blurred badges on a scrolling grid make scrolling stutter */
  background: rgba(18, 19, 22, 0.88);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.badge-scale.hot {
  background: linear-gradient(135deg, #FF6B4A, #F03D68);
  color: #fff;
}
.badge-scale.win {
  background: linear-gradient(135deg, #E5A93C, #FFD23F);
  color: #10172B;
}
.badge-scale.new {
  background: rgba(18, 133, 123, 0.88);
  color: #fff;
}
/* No ad is running any more: muted, never styled as scaling */
.badge-scale.ended {
  background: rgba(18, 19, 22, 0.78);
  color: #E4E6EA;
  box-shadow: none;
}
.badge-scale svg, .badge-format svg { flex: none; }
.badge-format {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 600 11px Inter, sans-serif;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(18, 19, 22, 0.88);
  color: #fff;
}
.badge-group { display: inline-flex; align-items: center; gap: 6px; }
/* Badges listed top to bottom (e.g. one per ad format in a tile corner) */
.badge-stack { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; }


/* Skeleton Loading Cards */
.skel-card {
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 18px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  animation: skel-pulse 1.4s ease-in-out infinite;
}
@keyframes skel-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: .9; }
}
.skel-head { height: 60px; background: var(--s2); margin-bottom: 2px; }
.skel-media { aspect-ratio: 4 / 5; background: var(--s2); margin-bottom: 12px; }
.skel-line { height: 16px; background: var(--s2); border-radius: 4px; margin: 6px 16px; }
.skel-line.w-60 { width: 60%; }
.skel-line.w-80 { width: 80%; }
.skel-line.w-40 { width: 40%; }
.skel-foot { height: 46px; background: var(--s2); margin-top: auto; }


/* Footer */
/* Tool pages ship the footer in their HTML for crawlers. It shows once site.js has run (when the
   page is parsed), below the content the page script renders, so it never shifts on screen. */
footer.sf[data-wait] { display: none; }
footer.sf {
  margin-top: 100px;
  background: var(--footbg);
  color: #e6f2f1;
  padding: 48px 0 0;
  overflow: hidden;
}
.fi {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 40px;
  padding-bottom: 24px;
}
footer.sf nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: 14px;
}
footer.sf nav a { color: #A9B1D1; transition: color .15s; }
footer.sf nav a:hover { color: #fff; }
footer.sf small { display: block; color: #A9B1D1; font-size: 13px; }
.giant {
  font: 800 clamp(54px, 15.5vw, 220px)/0.82 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.06em;
  text-align: center;
  white-space: nowrap;
  margin: 18px 0 -.14em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}
:root[data-theme=dusk] .giant {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 90%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Footer logo (markup from site.js): same mark and type as the header logo */
footer.sf .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font: 700 17px/1.2 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.02em;
  white-space: nowrap;
}
footer.sf .mk {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #10172B;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
footer.sf .mk img { display: block; width: 88%; height: 88%; object-fit: contain; }


/* ==================== SHARED PAGE BLOCKS ==================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Native <select> styled like the Explore filter pills */
.sel { position: relative; display: inline-flex; align-items: center; }
.sel select {
  appearance: none;
  -webkit-appearance: none;
  height: 42px;
  padding: 0 36px 0 16px;
  border-radius: 99px;
  border: 1px solid var(--ln);
  background: var(--s1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 12px;
  color: var(--tx);
  font: 500 13.5px Inter, sans-serif;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.sel select:hover { background-color: var(--s2); border-color: color-mix(in srgb, var(--tx) 25%, transparent); }
.sel select:focus-visible { outline: 0; border-color: var(--hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi) 25%, transparent); }
.sel select option { background: var(--s1); color: var(--tx); }
/* With the designed list (site.js .cs-btn laid over the select): hover, focus and open state */
.sel:hover select:not(:disabled) { background-color: var(--s2); border-color: color-mix(in srgb, var(--tx) 25%, transparent); }
.sel .cs-btn:focus-visible { outline: 0; }
.sel:has(> .cs-btn:focus-visible) select,
.sel select[data-cs-open] { border-color: var(--hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi) 25%, transparent); }
.sel select[data-cs-open] { background-color: var(--s1); }
.sel select:disabled { opacity: .55; cursor: default; }

/* Country selector (countries.js) in the same pill shape as the other filters */
.pills .g-country-trigger {
  height: 42px;
  padding: 0 16px;
  border-radius: 99px;
  font: 500 13.5px Inter, sans-serif;
  background: var(--s1);
  border: 1px solid var(--ln);
}

/* Niche chips */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.n-pill {
  height: 36px;
  padding: 0 14px;
  border-radius: 99px;
  border: 1px solid var(--ln);
  background: var(--s1);
  color: var(--mu);
  font: 500 13px Inter, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.n-pill:hover { color: var(--tx); background: var(--s2); }
.n-pill.active {
  background: rgba(185, 168, 255, 0.18);
  border-color: rgba(185, 168, 255, 0.5);
  color: var(--tx);
  font-weight: 600;
}
/* Opt-in: on phones the chips become one row that scrolls sideways instead of many wrapped rows */
@media(max-width: 540px) {
  .chips.chips-scroll {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(16px, 3.2vw, 48px));
    padding: 2px clamp(16px, 3.2vw, 48px) 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
  }
  .chips.chips-scroll::-webkit-scrollbar { display: none; }
  .chips.chips-scroll .n-pill { flex: none; }
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 20px;
  color: var(--mu);
}
.empty-state h3 { font: 700 20px "Bricolage Grotesque", Inter, sans-serif; color: var(--tx); margin-bottom: 6px; }
.empty-state p { max-width: 56ch; margin: 0 auto; }
.empty-state p + p { margin-top: 6px; }
.empty-state .btn { margin-top: 18px; }

/* Panel surface (used by the Market cards and modals) */
.surface {
  background: var(--adbg);
  border: 1px solid var(--ln);
  border-radius: 18px;
  box-shadow: var(--sh);
  color: var(--tx);
}

/* ==================== TILES (Products, Competitors) ==================== */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--adbg);
  border: 1px solid var(--ln);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh);
  color: var(--tx);
  transition: transform .25s var(--e), box-shadow .25s var(--e), border-color .25s var(--e);
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-hover);
  border-color: rgba(185, 168, 255, 0.45);
}
/* Keyboard users see which tile the focused button belongs to */
.tile:focus-within { border-color: rgba(185, 168, 255, 0.6); }
.tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--ln);
  background: var(--s1);
}
.tile-id { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.tile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--s2);
  border: 1px solid var(--ln);
}
.tile-names { min-width: 0; }
.tile-name {
  font: 700 14.5px/1.25 Inter, sans-serif;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--mu);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-tag {
  flex: none;
  font: 700 11px Inter, sans-serif;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  color: var(--ac);
  background: var(--s2);
}
/* The frame has a fixed aspect ratio, so lazy images never shift the layout when they load */
.tile-media { position: relative; width: 100%; aspect-ratio: 4 / 5; background: var(--s2); overflow: hidden; }
.tile-media.square { aspect-ratio: 1 / 1; }
.tile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--e);
}
.tile:hover .tile-media img { transform: scale(1.025); }
/* No usable image (missing, expired on the CDN, or failed through the proxy): a hatched,
   labelled frame that cannot be mistaken for a product photo */
.tile-noimg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  font: 600 12px/1.4 Inter, sans-serif;
  color: var(--mu);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--tx) 5%, transparent) 11px 22px),
    var(--s2);
}
.tile-noimg svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.tile-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.tile-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; flex: 1; }
/* Always two lines tall (clamped), so tiles in a row line up whatever the title length */
.tile-title {
  min-height: 2.6em;
  font: 700 14px/1.3 Inter, sans-serif;
  color: var(--tx);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-copy {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mu);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Labelled facts in a two-column grid; every value is one line (ellipsis + title for the rest) */
.tile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--ln);
}
.tile-fact { min-width: 0; }
.tile-fact.wide { grid-column: 1 / -1; }
.tile-fact dt {
  font: 600 10.5px/14px Inter, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mu);
}
.tile-fact dd {
  margin: 2px 0 0;
  font: 600 13px/18px Inter, sans-serif;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-fact dd.is-none { color: var(--mu); font-weight: 500; }
/* line-height 1: a smaller font with the full line height would make the line box taller */
.tile-fact dd small { font: 500 12px/1 Inter, sans-serif; color: var(--mu); }
.tile-foot { display: flex; gap: 8px; padding: 0 16px 16px; margin-top: auto; }
.tile-btn {
  flex: 1;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;
  border: 1px solid var(--ln);
  background: var(--s2);
  color: var(--tx);
  font: 600 12.5px Inter, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .15s, opacity .15s;
}
.tile-btn:hover { background: color-mix(in srgb, var(--tx) 8%, var(--s2)); }
.tile-btn.primary { background: var(--hi); color: #10172B; border: 0; font-weight: 700; }
.tile-btn.primary:hover { opacity: .92; transform: translateY(-1px); }
.tile-btn.fit { flex: none; padding: 0 16px; }
/* Square icon-only button (e.g. open the landing page); needs an aria-label */
.tile-btn.ico { flex: none; width: 38px; padding: 0; }

/* Loading tile: the real tile markup with text-shaped blocks, so the geometry is identical
   (same head, media frame, title, facts and foot) and nothing moves when data arrives */
.tile.is-skel { animation: skel-pulse 1.4s ease-in-out infinite; }
.tile.is-skel:hover { transform: none; box-shadow: var(--sh); border-color: var(--ln); }
.tile.is-skel .tile-tag,
.tile.is-skel .tile-btn { color: transparent; background: var(--s2); border-color: transparent; }
/* Text-shaped block (inside .tile.is-skel). Shorter than the line height, so it never changes it.
   Named tile-sk because Explore, Competitors and Market have their own .sk classes. */
.tile-sk {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: .8em;
  border-radius: 4px;
  background: var(--s2);
}
.tile-sk.w-25 { width: 25%; }
.tile-sk.w-60 { width: 60%; }
.tile-sk.w-75 { width: 75%; }
.tile-sk.w-90 { width: 90%; }
.tile-sk.em-4 { width: 4em; }
.tile-sk.em-6 { width: 6em; }
.tile-sk.em-9 { width: 9em; }
.tile-sk.em-12 { width: 12em; }

@media (prefers-reduced-motion: reduce) {
  .tile, .tile-media img { transition: none; }
  .tile:hover { transform: none; }
  .tile:hover .tile-media img { transform: none; }
  .tile.is-skel, .skel-card { animation: none; }
}

/* Competitor tile extras */
.tile-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px 0; }
.tile-metric { background: var(--s2); border-radius: 12px; padding: 10px 6px; text-align: center; min-width: 0; }
.tile-metric b { display: block; font: 800 16px "Bricolage Grotesque", Inter, sans-serif; color: var(--tx); }
.tile-metric span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--mu); }
.tile-strip-title { padding: 14px 16px 8px; font: 700 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); }
.tile-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 16px 14px; }
.tile-strip a { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--s2); }
.tile-strip img { width: 100%; height: 100%; object-fit: cover; }
.tile-strip em {
  position: absolute;
  left: 5px;
  bottom: 5px;
  font: 600 10px Inter, sans-serif;
  font-style: normal;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
}

@media(max-width: 1080px) {
  .rb { position: static; flex-direction: column; align-items: stretch; }
  .ctl { margin-left: 0; width: 100%; justify-content: space-between; }
  .search-within { flex: 1; }
  .search-within input { width: 100%; }
}
@media(max-width: 768px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .hero { padding-top: 100px; }
}
@media(max-width: 540px) {
  .bs { height: 54px; padding: 0 6px 0 16px; }
  .bs input { font-size: 15px; }
  .bs .btn { height: 42px; padding: 0 18px; font-size: 13.5px; }
  .grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
}

/* ==================== LIVE LOADING PROGRESS (public/live.js createProgress) ==================== */
.lp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--ln);
  border-radius: 14px;
  background: var(--s1);
  font: 500 13.5px/1.4 Inter, sans-serif;
  color: var(--tx);
}
.lp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.lp-text { min-width: 0; overflow-wrap: anywhere; }
.lp-stop {
  flex: none;
  height: 30px;
  padding: 0 14px;
  border-radius: 99px;
  border: 1px solid var(--ln-strong);
  background: var(--s2);
  color: var(--tx);
  font: 600 12.5px Inter, sans-serif;
  cursor: pointer;
}
.lp-stop:hover { border-color: var(--hi); }
.lp-bar { height: 4px; border-radius: 99px; background: var(--s2); overflow: hidden; }
.lp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ac), var(--hi)); transition: width .35s var(--e); }
.lp[data-state="loading"] .lp-bar i { animation: lp-pulse 1.6s ease-in-out infinite; }
.lp[data-state="done"] { color: var(--mu); }
.lp[data-state="error"] { border-color: rgba(240, 61, 104, 0.45); }
.lp[data-state="error"] .lp-bar i { background: #F03D68; }
@keyframes lp-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .lp-bar i { transition: none; }
  .lp[data-state="loading"] .lp-bar i { animation: none; }
}

/* Starter search note (MASLive.STARTER): shown while a page runs the shared starter search */
.starter-note {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 980px;
  margin: 22px auto 0;
  padding: 12px 16px;
  text-align: left;
  background: var(--s1);
  border: 1px solid var(--ln);
  border-radius: 16px;
  box-shadow: var(--sh);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--mu);
}
.starter-note[hidden] { display: none; }
.starter-note b { color: var(--tx); font-weight: 700; }
.starter-note .starter-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hi) 26%, var(--s1));
  color: var(--ink);
}
:root[data-theme=dusk] .starter-note .starter-ic { color: var(--hi); background: color-mix(in srgb, var(--hi) 14%, var(--s1)); }
.starter-note .starter-ic svg { width: 16px; height: 16px; }
.starter-note p { margin: 0; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }

/* Smooth scrolling of long result grids (class set by site.js while the page scrolls): no hover
   lift / shadow / image zoom repaints on the cards the pointer passes over */
.is-scrolling .grid,
.is-scrolling #grid,
.is-scrolling #tb { pointer-events: none; }

/* Cards far outside the screen are not laid out or painted until they come near
   (the browser keeps their last size, so the scrollbar and positions stay stable) */
#grid > .ad-card[data-id],
#productsGrid > .tile:not(.is-skel),
#competitorsGrid > .comp-tile:not(.comp-skel),
#dosGrid > .ad-tile:not(.is-skel) {
  content-visibility: auto;
  contain-intrinsic-size: auto 560px;
}

/* ---------- Export (public/export.js): menu, progress panel, selection bar ---------- */
.xm {
  position: fixed;
  z-index: 260;
  width: min(360px, calc(100vw - 16px));
  padding: 8px;
  border: 1px solid var(--ln);
  border-radius: 16px;
  background: var(--s1);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45);
  animation: ddin .16s var(--e);
}
.xm-head { margin: 4px 10px 8px; font: 700 11.5px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); }
.xm-item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--tx);
  text-align: left;
  cursor: pointer;
}
.xm-item:hover, .xm-item:focus-visible { background: var(--s2); outline: none; }
.xm-item:focus-visible { box-shadow: 0 0 0 2px var(--hi) inset; }
.xm-t { font: 700 14px Inter, sans-serif; }
.xm-t em { margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: var(--hi); color: #10172B; font: 700 10.5px Inter, sans-serif; font-style: normal; vertical-align: 1px; }
.xm-s { font-size: 12.5px; color: var(--mu); line-height: 1.4; }
/* ZIP choices for a visitor without an account (public/auth.js) */
.xm-t em.xm-lock { display: inline-flex; align-items: center; gap: 4px; background: var(--s3); color: var(--tx); }
.xm-t em.xm-lock .mas-lock { width: 11px; height: 11px; }

.xp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 250;
  width: min(380px, calc(100vw - 24px));
}
.xp[hidden] { display: none; }
.xp-list { display: grid; gap: 10px; }
.xp-item {
  padding: 14px 14px 12px;
  border: 1px solid var(--ln);
  border-radius: 16px;
  background: var(--s1);
  color: var(--tx);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.5);
  animation: barin .25s var(--e);
}
.xp-top { display: flex; align-items: flex-start; gap: 10px; }
.xp-ic {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--s2);
  font: 700 14px Inter, sans-serif;
}
.xp-item.is-building .xp-ic { border: 2.5px solid var(--s2); border-top-color: var(--hi); background: none; animation: xp-spin .9s linear infinite; }
.xp-item.is-ready .xp-ic { background: #12857B; color: #fff; }
.xp-item.is-failed .xp-ic, .xp-item.is-cancelled .xp-ic { background: color-mix(in srgb, #E5484D 18%, var(--s2)); color: #E5484D; }
.xp-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.xp-txt b { font: 700 14px Inter, sans-serif; overflow-wrap: anywhere; }
.xp-txt span { font-size: 12.5px; color: var(--mu); line-height: 1.45; overflow-wrap: anywhere; }
.xp-x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--mu); font-size: 20px; line-height: 1; cursor: pointer; }
.xp-x:hover { background: var(--s2); color: var(--tx); }
.xp-bar { height: 6px; margin: 12px 0 0; border-radius: 99px; background: var(--s2); overflow: hidden; }
.xp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ac, #12857B), var(--hi)); transition: width .4s var(--e); }
.xp-note { margin: 8px 0 0; font-size: 11.5px; color: var(--mu); overflow-wrap: anywhere; }
.xp-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  margin-top: 12px;
  border-radius: 12px;
  background: var(--hi);
  color: #10172B;
  font: 700 14px Inter, sans-serif;
  text-decoration: none;
}
.xp-dl:hover { filter: brightness(1.04); }
.xp-dl:focus-visible { outline: 2px solid var(--tx); outline-offset: 2px; }
.xp-dl small { font: 600 12px Inter, sans-serif; opacity: .75; }
@keyframes xp-spin { to { transform: rotate(360deg); } }

.xbar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 240;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 18px;
  border-radius: 99px;
  background: var(--btnbg);
  color: var(--btntx);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.55);
  font: 600 14px Inter, sans-serif;
  white-space: nowrap;
  animation: barin .25s var(--e);
}
.xbar[hidden] { display: none; }
.xbar-n { margin-right: 6px; }
.xbar button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--btntx) 25%, transparent);
  border-radius: 99px;
  background: none;
  color: inherit;
  font: 600 13.5px Inter, sans-serif;
  cursor: pointer;
}
.xbar button:hover { background: color-mix(in srgb, var(--btntx) 14%, transparent); }
.xbar button:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
.xbar .xbar-go { background: var(--hi); color: #10172B; border: 0; font-weight: 700; }
.xbar .xbar-go:hover { background: var(--hi); filter: brightness(1.05); }
.xbar-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes barin { from { opacity: 0; transform: translate(-50%, 20px); } }
.xp-item { animation-name: xp-in; }
@keyframes xp-in { from { opacity: 0; transform: translateY(14px); } }
/* The export panel sits above a selection bar on phones */
@media (max-width: 540px) {
  .xp { right: 12px; left: 12px; width: auto; bottom: 84px; max-height: calc(100vh - 170px); overflow-y: auto; overscroll-behavior: contain; }
  .xbar { left: 12px; right: 12px; transform: none; justify-content: space-between; padding-left: 16px; }
  @keyframes barin { from { opacity: 0; transform: translateY(20px); } }
}

/* Select box on product / advertiser / ad tiles (pages with MASExport) */
.xpick { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; cursor: pointer; }
.xpick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.xpick span { display: block; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--ln-strong, var(--ln)); background: var(--s2); transition: background .15s, border-color .15s; pointer-events: none; }
.xpick:hover span { border-color: var(--hi); }
.xpick input:focus-visible + span { outline: 2px solid var(--hi); outline-offset: 2px; }
.xpick input:checked + span { background: var(--hi); border-color: var(--hi); }
.xpick input:checked + span::after { content: ''; display: block; width: 5px; height: 10px; border: solid #10172B; border-width: 0 2px 2px 0; transform: translate(7px, 3px) rotate(45deg); }
.tile.is-picked { border-color: var(--hi); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hi) 60%, transparent), var(--sh); }
/* Select box over an ad's image (Competitor Spy dossier) */
.xpick.xpick-float { position: absolute; right: 8px; bottom: 8px; z-index: 4; border-radius: 9px; background: rgba(18, 19, 22, 0.55); }
.xpick.xpick-float span { border-color: rgba(255, 255, 255, 0.85); background: rgba(18, 19, 22, 0.35); }
.xpick.xpick-float input:checked + span { background: var(--hi); border-color: var(--hi); }

/* ==================== ABOUT + FAQ BELOW EACH TOOL (markup: scratch/seo/apply_sections.js) ====================
   Same look as the homepage "Frequently asked questions" section: big heading on the left (sticky on
   wide screens), cards with a + / – on the right. */
.more { padding: clamp(72px, 9vw, 120px) 0 0; }
.more-in { max-width: 1120px; margin: 0 auto; }
.more h2 {
  font: 700 clamp(28px, 3.6vw, 44px)/1.08 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.035em;
  color: var(--tx);
  margin-bottom: 16px;
}
.more-about {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px 64px;
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.more-about p { color: var(--mu); font-size: 16px; line-height: 1.65; max-width: 62ch; margin-bottom: 14px; }
.more-about p:first-of-type { color: var(--tx); font-size: 18px; }
.more-learn { padding: 22px 24px; }
.more-learn h3, .gd-side h3 { font: 700 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); margin-bottom: 10px; }
.more-learn ul { list-style: none; display: grid; gap: 2px; }
.more-learn a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  margin: 0 -12px;
  border-radius: 12px;
  font-weight: 600;
  color: var(--tx);
  transition: background .15s;
}
.more-learn a::after { content: '→'; color: var(--ac); flex: none; }
.more-learn a:hover { background: var(--s2); }
.more-faq { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); gap: 24px 64px; align-items: start; }
.more-faq > h2 { position: sticky; top: 110px; }

.faq details {
  border: 1px solid var(--ln);
  border-radius: 14px;
  background: var(--s1);
  margin-bottom: 10px;
  box-shadow: 0 12px 30px -16px rgba(20, 70, 80, 0.4);
}
:root[data-theme=dusk] .faq details { box-shadow: var(--sh); }
.faq details[open] { border-color: var(--ac); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  border-radius: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font: 600 17px/1.35 Inter, sans-serif; color: var(--tx); }
.faq summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--mu); flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
.faq details p { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.6; color: var(--mu); }
@media (max-width: 900px) {
  .more-about, .more-faq { grid-template-columns: minmax(0, 1fr); }
  .more-faq > h2 { position: static; }
}

/* ==================== GUIDES (/guides, built by scratch/seo/build_guides.js) ==================== */
.gd .hero h1 { font-size: clamp(34px, 5.2vw, 64px); max-width: 20ch; margin-inline: auto; }
.gd .hero .sub { max-width: 60ch; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-bottom: 18px; font-size: 14px; color: var(--mu); }
.crumbs a { color: var(--tx); text-decoration: underline; text-decoration-color: var(--ln-strong); text-underline-offset: 3px; }
.crumbs a:hover { text-decoration-color: var(--ac); }
.crumbs [aria-hidden] { opacity: .6; }
.gd-meta { margin-top: 14px; font-size: 14px; color: var(--mu); }
.gd-wrap { max-width: 1120px; margin: 0 auto; padding-top: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px 64px; align-items: start; }
.gd-body { min-width: 0; max-width: 720px; }
.gd-short { padding: 22px 26px; margin-bottom: 40px; }
.gd-short h2, .gd-toc h2 { font: 700 12px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); margin-bottom: 8px; }
.gd-body .gd-short p { margin-bottom: 0; font-size: 17px; line-height: 1.65; color: var(--tx); }
.gd-body > section > h2, .gd-body .gd-faq > h2, .gd-more > h2 {
  font: 700 clamp(24px, 3vw, 32px)/1.15 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.03em;
  color: var(--tx);
  margin: 48px 0 14px;
  scroll-margin-top: 100px;
}
.gd-body > section:first-of-type > h2 { margin-top: 0; }
.gd-body p, .gd-body li { font-size: 17px; line-height: 1.7; color: var(--mu); }
.gd-body p { margin-bottom: 16px; }
.gd-body b { color: var(--tx); font-weight: 600; }
.gd-body ol, .gd-body ul { padding-left: 1.4em; margin: 0 0 18px; display: grid; gap: 10px; }
.gd-body li::marker { color: var(--ac); font-weight: 700; }
.gd-body a:not(.btn), .gd-side a { color: var(--tx); text-decoration: underline; text-decoration-color: var(--ac); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gd-try {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin: 26px 0 10px;
  padding: 18px 20px 18px 24px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--hi) 16%, var(--s1));
  border: 1px solid color-mix(in srgb, var(--hi) 45%, transparent);
}
.gd-try p { margin: 0; font-size: 16px; font-weight: 500; color: var(--tx); }
.gd-try .btn { height: 44px; padding: 0 20px; }
.gd-faq { margin-top: 8px; }
.gd-side { position: sticky; top: 110px; display: grid; gap: 16px; }
.gd-toc, .gd-tools { padding: 20px 22px; }
.gd-toc ol { list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.gd-toc a { color: var(--mu); text-decoration: none; }
.gd-toc a:hover { color: var(--tx); }
.gd-tools ul { list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.gd-more { max-width: 1120px; margin: 0 auto; padding-top: clamp(40px, 6vw, 72px); }
.gd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.gd-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--adbg);
  border: 1px solid var(--ln);
  box-shadow: var(--sh);
  color: var(--tx);
  transition: transform .25s var(--e), box-shadow .25s var(--e), border-color .25s var(--e);
}
.gd-card:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); border-color: rgba(185, 168, 255, 0.45); }
.gd-card h2, .gd-card h3 { font: 700 19px/1.25 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -.02em; color: var(--tx); }
.gd-card p { font-size: 15px; line-height: 1.55; color: var(--mu); }
.gd-card span { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--ac); }
.gd-index .gd-cards { max-width: 1120px; margin: clamp(24px, 4vw, 48px) auto 0; }
@media (max-width: 1000px) {
  .gd-wrap { grid-template-columns: minmax(0, 1fr); }
  .gd-body { max-width: none; }
  .gd-side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .gd-card, .more-learn a { transition: none; }
  .gd-card:hover { transform: none; }
}