html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

:root {
  color-scheme: light;
      --bg-1: #fff7ea;
      --bg-2: #fde8ff;
      --bg-3: #e9f6ff;
      --ink: #191932;
      --ink-soft: #474763;
      --brand-coral: #ff5f6d;
      --brand-gold: #ffcc3f;
      --brand-blue: #0ea5e9;
      --card: rgba(255, 255, 255, 0.82);
      --border: rgba(25, 25, 50, 0.12);
      --shadow: 0 18px 45px rgba(25, 25, 50, 0.14);
      --panel-bg: rgba(255, 255, 255, 0.84);
      --panel-border: rgba(25, 25, 50, 0.14);
      --field-bg: rgba(255, 255, 255, 0.95);
      --field-text: #0f172a;
      --muted: #6b7280;
      --chip-bg: rgba(255, 255, 255, 0.72);
      --success-bg: rgba(16, 185, 129, 0.14);
      --success-border: rgba(16, 185, 129, 0.48);
      --success-text: #065f46;
      --error-bg: rgba(239, 68, 68, 0.14);
      --error-border: rgba(239, 68, 68, 0.46);
      --error-text: #7f1d1d;
      --warning-bg: rgba(245, 158, 11, 0.14);
      --warning-border: rgba(245, 158, 11, 0.48);
      --warning-text: #92400e;
      --radius-xl: 26px;
      --radius-lg: 18px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: "Sora", sans-serif;
      color: var(--ink);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* The creator page (body.creator-page) owns its own background entirely via
       creator.css's body[data-background=...] rules, driven by what the creator picked - never
       this decorative site gradient. Scoped out here (rather than relying on creator.css's
       attribute selector to just win on specificity) because :root[data-theme="dark"] body below
       has higher specificity than body[data-background=...] and was silently overriding the
       creator's chosen background whenever the visitor's own site theme was dark, regardless of
       what the creator actually picked. */
    body:not(.creator-page) {
      background:
        radial-gradient(circle at 10% 8%, rgba(255, 95, 109, 0.22), transparent 34%),
        radial-gradient(circle at 92% 16%, rgba(14, 165, 233, 0.24), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(255, 204, 63, 0.16), transparent 40%),
        linear-gradient(120deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3));
      background-attachment: fixed;
    }

    .orb {
      position: fixed;
      border-radius: 999px;
      pointer-events: none;
      z-index: -1;
      filter: blur(50px);
      animation: drift 16s ease-in-out infinite alternate;
    }

    .orb.one { width: 260px; height: 260px; background: rgba(255, 95, 109, 0.34); top: 10%; left: -60px; }
    .orb.two { width: 340px; height: 340px; background: rgba(14, 165, 233, 0.28); right: -110px; top: 38%; animation-delay: 1.2s; }
    .orb.three { width: 220px; height: 220px; background: rgba(0, 195, 154, 0.3); bottom: 8%; left: 8%; animation-delay: 2.4s; }
    .orb.four { width: 200px; height: 200px; background: rgba(255, 204, 63, 0.3); top: 64%; right: 18%; animation-delay: 3.6s; }

    @keyframes drift {
      from { transform: translateY(0) translateX(0) scale(1); }
      to { transform: translateY(-36px) translateX(30px) scale(1.08); }
    }

    @media (prefers-reduced-motion: reduce) {
      .orb { animation: none; }
    }

    .site { width: min(1120px, 92%); margin: 0 auto; padding: 52px 0 70px; }
    .nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; }

    .nav-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .theme-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(25, 25, 50, 0.14);
      background: rgba(255, 255, 255, 0.82);
      box-shadow: 0 6px 16px rgba(25, 25, 50, 0.1);
    }

    .theme-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--ink-soft);
      letter-spacing: 0.01em;
    }

    .theme-select {
      border: 1px solid rgba(25, 25, 50, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.95);
      color: #0f172a;
      font-family: "Sora", sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      padding: 5px 24px 5px 10px;
      appearance: none;
      background-image:
        linear-gradient(45deg, transparent 50%, #334155 50%),
        linear-gradient(135deg, #334155 50%, transparent 50%);
      background-position:
        calc(100% - 14px) calc(50% - 3px),
        calc(100% - 9px) calc(50% - 3px);
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
    }

    .theme-select:focus {
      outline: 2px solid rgba(14, 165, 233, 0.45);
      outline-offset: 2px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: "Bricolage Grotesque", sans-serif;
      font-weight: 800;
      font-size: 1.45rem;
      text-decoration: none;
      color: var(--ink);
      letter-spacing: -0.02em;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      padding: 7px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      object-fit: contain;
      background: linear-gradient(135deg, var(--brand-coral), #ff7f50);
      box-shadow: 0 10px 20px rgba(255, 95, 109, 0.35);
    }

    .nav-btn {
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, #111827, #33335c);
      color: #fff;
      font-family: "Sora", sans-serif;
      font-weight: 600;
      font-size: 0.92rem;
      padding: 12px 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.18s ease, box-shadow 0.2s ease;
      box-shadow: 0 8px 22px rgba(17, 24, 39, 0.22);
    }

    .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17, 24, 39, 0.28); }

    .hero {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 30px;
      align-items: center;
      margin-bottom: 34px;
    }

    /* Without this, a grid item's minimum width defaults to its content's min-content size.
       The nowrap headline phrase's min-content is its full rendered width, so on a long
       phrase the browser was forcing this column wider than its 1.1fr share to fit it -
       squeezing the preview card column in the process. min-width:0 lets the column actually
       respect the fr split; fitPhraseFontSize() in landing-preview.js keeps the phrase from
       overflowing it instead. */
    .hero-copy {
      min-width: 0;
    }

    @media (min-width: 981px) {
      .hero {
        align-items: start;
        margin-bottom: 48px;
      }
    }

    .headline {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: clamp(2rem, 5vw, 4.1rem);
      line-height: 1.06;
      letter-spacing: -0.03em;
      margin-bottom: 16px;
    }

    .headline-lead { font-weight: 800; }

    .gradient-word {
      background: linear-gradient(110deg, #ff5f6d, #ffcc3f 40%, #0ea5e9);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .typing-phrase {
      font-weight: 500;
      background-repeat: no-repeat;
      white-space: nowrap;
      display: inline-block;
      max-width: 100%;
    }

    .typing-cursor {
      display: inline-block;
      width: 0.05em;
      height: 0.82em;
      vertical-align: -0.08em;
      background: var(--ink);
      margin-left: 2px;
      animation: typing-cursor-blink 1s step-end infinite;
    }

    @keyframes typing-cursor-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    .scroll-cue {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 12px 18px;
      border-radius: 14px;
      background: linear-gradient(120deg, rgba(255, 95, 109, 0.14), rgba(255, 204, 63, 0.14), rgba(14, 165, 233, 0.14));
      border: 1px solid rgba(255, 127, 80, 0.28);
      font-family: "Sora", sans-serif;
      font-size: 0.93rem;
      font-weight: 700;
      text-decoration: none;
      opacity: 0;
      transform: translateX(-6px);
      pointer-events: none;
      transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .scroll-cue span {
      color: var(--brand-coral);
    }

    .scroll-cue i {
      color: var(--brand-coral);
      animation: scroll-cue-nudge 1.6s ease-in-out infinite;
    }

    .scroll-cue.is-visible {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    .scroll-cue:hover {
      background: linear-gradient(120deg, rgba(255, 95, 109, 0.22), rgba(255, 204, 63, 0.22), rgba(14, 165, 233, 0.22));
      border-color: rgba(255, 127, 80, 0.45);
    }

    @keyframes scroll-cue-nudge {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(5px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .scroll-cue i { animation: none; }
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .subtext { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.72; margin-bottom: 22px; max-width: 60ch; }

    .slug-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      width: min(460px, 100%);
      box-shadow: var(--shadow);
      margin-bottom: 24px;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .slug-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 34px rgba(25, 25, 50, 0.18);
    }

    .slug-card-arrow {
      margin-left: auto;
      color: var(--ink-soft);
      transition: transform 0.2s ease;
    }

    .slug-card:hover .slug-card-arrow {
      transform: translateX(4px);
    }

    .slug-card span { color: #6b7280; font-size: 0.95rem; white-space: nowrap; }
    .slug-card strong {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: 1.05rem;
      letter-spacing: -0.01em;
      color: #111827;
      overflow-wrap: anywhere;
    }

    .slug-card strong span { display: inline-block; opacity: 1; transition: opacity 0.24s ease 0.06s; }
    .slug-card.is-swapping strong span { opacity: 0; transition: opacity 0.2s ease; }

    .slug-card .slug-card-at {
      color: transparent;
      font-weight: 800;
      transform: scale(1);
      transition: opacity 0.24s ease 0.06s, transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
    }
    .slug-card.is-swapping .slug-card-at { transform: scale(0.6); }

    @media (prefers-reduced-motion: reduce) {
      .slug-card-at { transition: opacity 0.24s ease 0.06s; }
    }

    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

    .btn {
      border-radius: 14px;
      padding: 12px 18px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: "Sora", sans-serif;
      font-weight: 700;
      font-size: 0.93rem;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-main { color: #111827; background: linear-gradient(130deg, var(--brand-gold), #ffd96d); box-shadow: 0 12px 25px rgba(255, 204, 63, 0.4); }
    .btn-alt { color: #111827; background: rgba(255, 255, 255, 0.8); border-color: var(--border); }
    .btn-main:hover, .btn-alt:hover { transform: translateY(-2px); }

    .preview-example-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 2;
      margin: 0;
      padding: 5px 11px;
      border-radius: 999px;
      background: rgba(10, 10, 20, 0.55);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      color: #fff;
      font-family: "Sora", sans-serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    /* "you" gets a bouncy pop-in on load plus a slow gradient shimmer loop after, so it reads
       as the emphasized, symbolic word rather than just more static label text. */
    .preview-example-tag .gradient-word {
      display: inline-block;
      font-weight: 800;
      background-size: 220% 100%;
      animation:
        tag-you-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards,
        tag-you-shimmer 3.4s ease-in-out 1s infinite;
    }

    @keyframes tag-you-pop {
      0% { transform: scale(0.3); opacity: 0; }
      65% { transform: scale(1.25); opacity: 1; }
      100% { transform: scale(1); }
    }

    @keyframes tag-you-shimmer {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    @media (prefers-reduced-motion: reduce) {
      .preview-example-tag .gradient-word { animation: none; }
    }

    /* Fixed-footprint wrapper: the card inside can grow or shrink freely per look without
       ever pushing the rest of the page around, since it's taken out of document flow. */
    .preview-slot {
      position: relative;
      height: 512px;
    }

    /* Floating activity chips overlaid on the hero mockup, echoing the "live product in use"
       feel of the sites that inspired this - but kept truthful to what SotoLink actually does
       (clicks, shortlinks, bot blocking) rather than a generic monetization pitch. Positioned
       inset from the slot's own edges (never negative left/right) so they can't push the page
       into horizontal overflow at any breakpoint; only top/bottom are allowed to poke past the
       card, since vertical overflow here is harmless. Only one is shown at a time (see the cycle
       in index.php's inline script, which toggles .is-active) rather than all three permanently
       cluttering the mockup - each one fades/rises in, holds briefly, then clears before the
       next takes its place. */
    .hero-notify {
      position: absolute;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 14px 9px 9px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      font-family: "Sora", sans-serif;
      font-size: 0.82rem;
      color: var(--ink);
      white-space: nowrap;
      opacity: 0;
      transform: translateY(10px) scale(0.94);
      pointer-events: none;
      transition: opacity 0.45s ease, transform 0.45s ease;
    }

    .hero-notify.is-active {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .hero-notify strong { font-weight: 700; }

    .hero-notify-icon {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 0.76rem;
      flex: 0 0 auto;
    }

    .hero-notify--clicks { top: -14px; right: 20px; border-radius: 999px; }
    .hero-notify--clicks .hero-notify-icon { background: #0ea5e9; border-radius: 50%; }

    .hero-notify--shield { top: -40px; left: 20px; }
    .hero-notify--shield .hero-notify-icon { background: #1e293b; }

    .hero-notify--link { bottom: -14px; right: 24px; }
    .hero-notify--link .hero-notify-icon { background: #fb7185; border-radius: 50%; }

    @media (prefers-reduced-motion: reduce) {
      .hero-notify { transition: none; }
    }

    /* Below 980px the hero stacks to one column, so the mockup sits directly under the copy
       with no headroom for chips poking above its top edge - inset them instead. */
    @media (max-width: 980px) {
      .hero-notify--clicks { top: 12px; right: 14px; }
      .hero-notify--shield { top: 44px; left: 14px; bottom: auto; }
    }

    @media (max-width: 640px) {
      .hero-notify { display: none; }
    }

    .preview {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      padding: 0;
      width: 100%;
      min-height: 460px;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(25, 25, 50, 0.09);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }

    .preview[data-background="gradient"] { background: linear-gradient(165deg, var(--preview-accent, #ff5f6d), var(--preview-secondary, #0ea5e9)); }
    .preview[data-background="solid"] { background: var(--preview-accent, #ff5f6d); }
    .preview[data-background="midnight"] { background: linear-gradient(165deg, #0b0f1a, #1b2036 60%, #101425); }

    .preview-banner {
      position: relative;
      height: 92px;
      flex: 0 0 92px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.14);
    }

    .preview-banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Tints each banner photo toward the card's own accent color so it reads as one
       branded piece instead of a random stock photo dropped into a template. */
    .preview-banner::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(155deg, var(--preview-accent, #ff5f6d) 0%, var(--preview-secondary, #0ea5e9) 120%);
      mix-blend-mode: color;
      opacity: 0.65;
      pointer-events: none;
    }

    .preview-identity {
      position: relative;
      flex: 0 0 auto;
      margin-top: -28px;
      padding: 0 16px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* "Photo" layout: the banner photo becomes the whole card's backdrop (poster-style)
       instead of a thin strip above a plain body - a structurally different look, not
       just a recolor, for the personas where a full-bleed photo actually fits. */
    #previewCard[data-layout="photo"] {
      background: #0a0a0f;
    }

    #previewCard[data-layout="photo"] .preview-banner {
      position: absolute;
      inset: 0;
      height: 100%;
      flex: none;
      z-index: 0;
    }

    #previewCard[data-layout="photo"] .preview-banner::after {
      background: linear-gradient(190deg, rgba(8, 8, 16, 0.1) 0%, rgba(8, 8, 16, 0.35) 45%, rgba(8, 8, 16, 0.88) 100%);
      mix-blend-mode: normal;
      opacity: 1;
    }

    #previewCard[data-layout="photo"] .preview-identity {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      margin-top: 128px;
    }

    #previewCard[data-layout="photo"] .preview-blocks {
      position: relative;
      z-index: 1;
      justify-content: flex-end;
    }

    #previewCard[data-layout="photo"] .platform-item {
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.28);
      color: #fff;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      box-shadow: none;
    }

    #previewCard[data-layout="photo"] .platform-item-icon {
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
    }

    #previewCard[data-layout="photo"] .platform-item-arrow { color: rgba(255, 255, 255, 0.7); }

    /* "Minimal" layout: no banner strip at all - identity sits directly on the card's own
       background color/gradient, no separate "card body" framing underneath it. */
    #previewCard[data-layout="minimal"] .preview-banner { display: none; }
    #previewCard[data-layout="minimal"] .preview-identity { margin-top: 30px; }

    /* Monochrome icon treatment: brand glyph icons (font icons, not the colored badge images -
       those don't survive a filter) rendered flat white, matching templates that keep every
       icon the same neutral tone instead of full-color brand badges. */
    #previewCard[data-icon-style="mono"] .platform-item-icon i {
      color: #fff;
    }

    .avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #fda4af, #7dd3fc);
      background-size: cover;
      background-position: center;
      border: 3px solid #fff;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
      margin-bottom: 8px;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    #previewCard[data-chip="bold"] .avatar { border-color: var(--preview-chip, var(--preview-accent, #fff)); }
    #previewCard[data-chip="dark"] .avatar { border-color: #0c0a14; }
    #previewCard[data-chip="outline"] .avatar {
      border-color: rgba(255, 255, 255, 0.55);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 6px 14px rgba(0, 0, 0, 0.25);
    }

    .preview-handle {
      margin: 0;
      color: #fff;
      font-weight: 800;
      font-size: 0.92rem;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    .preview-bio {
      margin: 3px 0 0;
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.72rem;
      font-weight: 600;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    .preview-blocks {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      padding: 4px 16px 18px;
      overflow: hidden;
    }

    .platform-list { display: grid; gap: 8px; }

    .platform-item {
      display: flex;
      align-items: center;
      gap: 10px;
      border-radius: 16px;
      padding: 9px 12px;
      background: rgba(255, 255, 255, 0.95);
      border: none;
      font-size: 0.85rem;
      color: #0f172a;
      font-weight: 700;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
      transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }

    .platform-item-icon {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--preview-accent, #94a3b8) 14%, #f1f5f9);
      color: #475569;
      flex: 0 0 auto;
      overflow: hidden;
      font-size: 0.76rem;
      transition: background 0.3s ease, color 0.3s ease;
    }

    /* Chip styles - each "look" picks one so cards read as genuinely different, not just recolored. */
    #previewCard[data-chip="dark"] .platform-item {
      background: rgba(12, 10, 20, 0.82);
      color: #f8fafc;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
    }
    #previewCard[data-chip="dark"] .platform-item-icon { background: rgba(255, 255, 255, 0.14); color: #f8fafc; }
    #previewCard[data-chip="dark"] .platform-item-arrow { color: rgba(248, 250, 252, 0.65); }

    #previewCard[data-chip="outline"] .platform-item {
      background: rgba(255, 255, 255, 0.06);
      border: 1.5px solid rgba(255, 255, 255, 0.4);
      color: #fff;
      box-shadow: none;
    }
    #previewCard[data-chip="outline"] .platform-item-icon { background: rgba(255, 255, 255, 0.14); color: #fff; }
    #previewCard[data-chip="outline"] .platform-item-arrow { color: rgba(255, 255, 255, 0.65); }

    #previewCard[data-chip="bold"] .platform-item {
      background: var(--preview-chip, var(--preview-accent, #ff5f6d));
      color: #fff;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
    #previewCard[data-chip="bold"] .platform-item-icon { background: rgba(255, 255, 255, 0.24); color: #fff; }
    #previewCard[data-chip="bold"] .platform-item-arrow { color: rgba(255, 255, 255, 0.8); }

    .platform-item-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .platform-item-label {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .platform-item-arrow {
      flex: 0 0 auto;
      color: #94a3b8;
      font-size: 0.7rem;
    }

    .platform-item-sr-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }

    /* Icons layout: circular icon-only chips in a wrapped row, label kept for accessibility only. */
    .platform-list--icons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .platform-list--icons .platform-item {
      width: 46px;
      height: 46px;
      padding: 0;
      justify-content: center;
    }

    .platform-list--icons .platform-item-icon {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    /* Grid layout: icon-over-label tiles, three per row. */
    .platform-list--grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .platform-list--grid .platform-item {
      flex-direction: column;
      text-align: center;
      padding: 10px 6px;
      gap: 6px;
    }

    .platform-list--grid .platform-item-icon {
      width: 32px;
      height: 32px;
      border-radius: 10px;
    }

    .platform-list--grid .platform-item-label {
      width: 100%;
      white-space: normal;
      overflow-wrap: anywhere;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 0.7rem;
    }

    .preview[data-button="pill"] .platform-item { border-radius: 999px; }
    .preview[data-button="square"] .platform-item { border-radius: 8px; }

    .preview[data-button="pill"] .platform-list--icons .platform-item,
    .preview[data-button="square"] .platform-list--icons .platform-item,
    .platform-list--icons .platform-item {
      border-radius: 50%;
    }

    .preview[data-font="sora"] { font-family: "Sora", sans-serif; }
    .preview[data-font="bricolage"] { font-family: "Bricolage Grotesque", sans-serif; }
    .preview[data-font="poppins"] { font-family: "Poppins", sans-serif; }
    .preview[data-font="manrope"] { font-family: "Manrope", sans-serif; }

    /* Swap transition: a carousel-style slide - the outgoing look slides out to the left and
       fades, then the incoming look starts just off-screen to the right and slides into place.
       No blur flash, no per-child choreography, and it hides the height change between looks. */
    .preview {
      transition: background 0.5s ease, min-height 0.35s ease, transform 0.32s ease, opacity 0.32s ease;
    }

    /* ID-scoped so this reliably beats .reveal.is-visible's own transform/opacity, which share
       the same specificity as a plain class selector and would otherwise win by source order. */
    #previewCard.is-leaving {
      transform: translateX(-28px);
      opacity: 0;
    }

    #previewCard.is-entering {
      transform: translateX(28px);
      opacity: 0;
      transition: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .preview.is-leaving,
      .preview.is-entering {
        transform: none;
        transition: opacity 0.2s ease;
      }
    }

    .preview-gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .preview-gallery-item {
      border-radius: 10px;
      overflow: hidden;
      aspect-ratio: 1 / 0.62;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
    }

    .preview-gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .preview-music-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      padding: 10px 12px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
    }

    .preview-music-cover {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 10px;
      overflow: hidden;
      background: linear-gradient(135deg, var(--preview-accent, #ff5f6d), var(--preview-secondary, #0ea5e9));
      flex: 0 0 auto;
      display: block;
    }

    .preview-music-cover img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .preview-music-play-icon {
      position: absolute;
      inset: 0;
      margin: auto;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.42);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 0.62rem;
    }

    .preview-music-meta {
      flex: 1 1 auto;
      min-width: 0;
    }

    .preview-music-title {
      margin: 0;
      font-weight: 700;
      color: #0f172a;
      font-size: 0.88rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .preview-music-artist {
      margin: 0;
      color: #64748b;
      font-size: 0.76rem;
    }

    .preview-video-frame {
      position: relative;
      width: 100%;
      padding-top: 38%;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
    }

    .preview-video-frame img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .preview-video-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.55);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 0.9rem;
    }

    .preview-featured-card {
      position: relative;
      min-height: 140px;
      border-radius: 16px;
      background-size: cover;
      background-position: center;
      background-color: var(--preview-accent, #ff5f6d);
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    }

    .preview-featured-scrim {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.68) 100%);
    }

    .preview-featured-label {
      position: relative;
      z-index: 1;
      color: #fff;
      font-weight: 800;
      font-size: 0.9rem;
      padding: 12px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    .preview[data-button="pill"] .preview-featured-card { border-radius: 28px; }
    .preview[data-button="square"] .preview-featured-card { border-radius: 8px; }

    /* --- Platform logos marquee: same duplicated-track loop trick as the trending-creators
       marquee further down the page (see .popular-pages-track), just with its own class names
       since the two tracks hold very differently-shaped items (icon chips vs. profile cards). --- */
    .platforms-marquee-section { margin-bottom: 36px; }

    .platforms-marquee-label {
      text-align: center;
      font-family: "Sora", sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--ink-soft);
      margin-bottom: 16px;
    }

    .platforms-marquee {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }

    .platforms-track {
      display: flex;
      width: max-content;
      gap: 12px;
      animation: platforms-scroll 34s linear infinite;
    }

    .platforms-marquee:hover .platforms-track { animation-play-state: paused; }

    @keyframes platforms-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .platforms-track { animation: none; }
      .platforms-marquee { overflow-x: auto; }
    }

    .platform-chip {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--border);
      font-family: "Sora", sans-serif;
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--ink-soft);
      white-space: nowrap;
    }

    .platform-chip img { width: 18px; height: 18px; object-fit: contain; border-radius: 5px; }

    .features--bento { margin-bottom: 36px; text-align: center; }
    .features--bento > h2 {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 22px;
    }

    /* Bento layout: a 6-column track lets three plain tiles share a row (span 2 apiece) while
       the two visual-forward tiles (analytics, deeplinks) pair off in their own full-width row -
       row height is set by whichever tile in that row is tallest, so pairing similarly-dense
       tiles together (rather than mixing a plain tile with a visual one) keeps every row tight
       instead of leaving dead space next to the shorter tile. */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
      text-align: left;
    }

    .feature { grid-column: span 2; }

    /* One softened, one squared-off corner - a small nudge so the two "featured" tiles read as
       a distinct, higher-attention pair rather than just wider copies of the plain tiles. */
    .feature--wide { grid-column: span 3; border-radius: 28px 28px 28px 6px; }

    .feature {
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(25, 25, 50, 0.08);
      border-radius: var(--radius-lg);
      padding: 18px;
      box-shadow: 0 10px 26px rgba(25, 25, 50, 0.08);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .feature:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(25, 25, 50, 0.14); }

    .feature-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #fff;
      margin-bottom: 12px;
      font-size: 1.05rem;
    }

    /* Icon badges alternate between a rounded square and a circle - simple, recognizable shapes
       rather than hexagons/blobs that read as a rendering glitch more than a design choice. Flat
       solid fills instead of gradients here - the gradient treatment is reserved for the handful
       of spots on the page that are showing an actual customizable/branded surface (the headline
       text, the CTA button, the phone mockup's own background), not every small icon chip. */
    .feature:nth-child(1) .feature-icon { background: #ff5f6d; }
    .feature:nth-child(2) .feature-icon { background: #fb7185; border-radius: 50%; }
    .feature:nth-child(3) .feature-icon { background: #6366f1; }
    .feature:nth-child(4) .feature-icon { background: #0ea5e9; border-radius: 50%; }
    .feature:nth-child(5) .feature-icon { background: #22c55e; border-radius: 50%; }
    .feature:nth-child(6) .feature-icon { background: #475569; }
    .feature:nth-child(7) .feature-icon { background: #14b8a6; }

    .feature h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.2rem; margin-bottom: 8px; letter-spacing: -0.01em; }
    .feature p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.58; }

    @media (max-width: 980px) {
      .bento-grid { grid-template-columns: 1fr; }
      .feature, .feature--wide { grid-column: 1 / -1; }
    }

    .how-it-works { margin-bottom: 36px; text-align: center; }
    .how-it-works > h2 {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 28px;
    }

    .steps {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 18px;
    }

    .step {
      flex: 1 1 0;
      max-width: 260px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 26px 20px;
      text-align: center;
      position: relative;
    }

    .step-number {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: "Bricolage Grotesque", sans-serif;
      font-weight: 800;
      font-size: 0.85rem;
      color: #111827;
      background: linear-gradient(130deg, var(--brand-gold), #ffd96d);
      box-shadow: 0 8px 16px rgba(255, 204, 63, 0.4);
    }

    .step-icon {
      width: 40px;
      height: 40px;
      margin: 10px auto 18px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 1rem;
      background: var(--brand-coral);
    }

    .step:nth-child(1) .step-icon { background: var(--brand-coral); }
    .step:nth-child(3) .step-icon { background: #8b5cf6; }
    .step:nth-child(5) .step-icon { background: var(--brand-blue); }

    .step h3 { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.08rem; margin-bottom: 8px; letter-spacing: -0.01em; }
    .step p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }

    .step-connector {
      flex: 0 0 auto;
      align-self: center;
      color: var(--ink-soft);
      opacity: 0.4;
      font-size: 1.1rem;
      margin-top: -20px;
    }

    @media (max-width: 820px) {
      .steps { flex-direction: column; align-items: stretch; gap: 26px; }
      .step { max-width: none; }
      .step-connector { display: none; }
    }

    .spotlight-visual {
      height: 132px;
      border-radius: 16px;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(160deg, rgba(255, 95, 109, 0.08), rgba(14, 165, 233, 0.08));
    }

    /* --- Deeplink spotlight: a "before/after" pair of chips demonstrating the in-app-browser
       escape - the left chip reads as stuck (muted, dashed, a faint jitter), the right as
       resolved (bright, glowing) so the contrast reads without needing to explain it. --- */
    .deeplink-demo { display: flex; align-items: center; gap: 14px; }

    .deeplink-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 84px;
      height: 84px;
      border-radius: 16px;
      flex: 0 0 auto;
    }

    .deeplink-panel i { font-size: 1.6rem; }

    .deeplink-panel-label {
      font-family: "Sora", sans-serif;
      font-size: 0.62rem;
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
    }

    /* The shape shift (boxed-in square -> open circle) carries the same "stuck vs. resolved"
       idea as the color/animation do, so it still reads even with color perception aside. */
    .deeplink-panel--before {
      background: rgba(107, 114, 128, 0.14);
      color: #6b7280;
      border: 1px dashed rgba(107, 114, 128, 0.4);
      border-radius: 12px;
      animation: deeplink-stuck-jitter 2.6s ease-in-out infinite;
    }

    .deeplink-panel--after {
      background: rgba(14, 165, 233, 0.14);
      color: #0ea5e9;
      border: 1px solid rgba(14, 165, 233, 0.35);
      border-radius: 50%;
      animation: deeplink-glow 2.6s ease-in-out infinite;
    }

    .deeplink-arrow { color: var(--brand-coral); font-size: 1.1rem; animation: deeplink-arrow-nudge 1.6s ease-in-out infinite; }

    @keyframes deeplink-stuck-jitter {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-2px); }
      40% { transform: translateX(2px); }
      60% { transform: translateX(-1px); }
      80% { transform: translateX(1px); }
    }

    @keyframes deeplink-glow {
      0%, 100% { box-shadow: 0 0 0 rgba(14, 165, 233, 0); }
      50% { box-shadow: 0 0 16px rgba(14, 165, 233, 0.4); }
    }

    @keyframes deeplink-arrow-nudge {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(4px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .deeplink-panel--before, .deeplink-panel--after, .deeplink-arrow { animation: none; }
    }

    /* --- Analytics spotlight: bars sit flat at height 0 until the card scrolls into view (the
       shared .reveal/.is-visible mechanism below toggles them), then grow to their --h value -
       reads as "the data coming in" rather than a static, already-finished chart. --- */
    .mini-chart {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      height: 100px;
      width: 100%;
      padding: 0 6px;
    }

    .mini-chart-bar {
      flex: 1 1 0;
      height: 0;
      background: #0ea5e9;
      border-radius: 6px 6px 2px 2px;
      transition: height 0.9s cubic-bezier(0.34, 1.06, 0.64, 1);
    }

    .mini-chart-bar:last-child { background: var(--brand-coral); }

    .feature.is-visible .mini-chart-bar { height: var(--h); }

    .mini-chart-bar:nth-child(1) { transition-delay: 0.05s; }
    .mini-chart-bar:nth-child(2) { transition-delay: 0.12s; }
    .mini-chart-bar:nth-child(3) { transition-delay: 0.19s; }
    .mini-chart-bar:nth-child(4) { transition-delay: 0.26s; }
    .mini-chart-bar:nth-child(5) { transition-delay: 0.33s; }
    .mini-chart-bar:nth-child(6) { transition-delay: 0.4s; }
    .mini-chart-bar:nth-child(7) { transition-delay: 0.47s; }

    @media (prefers-reduced-motion: reduce) {
      .mini-chart-bar { transition: none; }
    }

    @media (max-width: 980px) {
      .spotlight-grid { grid-template-columns: 1fr; }
    }

    .pricing { margin-bottom: 36px; text-align: center; }
    .pricing > h2 {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 26px;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      text-align: left;
      align-items: stretch;
    }

    .pricing-card {
      display: flex;
      flex-direction: column;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 26px;
      position: relative;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .pricing-card:hover { transform: translateY(-4px); }
    /* :hover never fires on touch, so a tap here had no feedback at all - a quick press-down
       scale gives touch users the same "this is interactive" cue desktop gets from the lift. */
    .pricing-card:active { transform: scale(0.98); }

    /* The featured card (Pro, or Concierge when that's what a visitor is steered toward) reads as
       the recommended pick via three cues layered together: a heavier border, a slight scale/
       elevation over its neighbors, and a soft tinted backdrop - not just the badge text alone. */
    .pricing-card--featured {
      border: 2px solid var(--brand-coral);
      background: linear-gradient(180deg, rgba(255, 95, 109, 0.06), var(--card) 55%);
      box-shadow: 0 18px 40px -18px rgba(255, 95, 109, 0.35), var(--shadow);
      /* A little extra headroom under the "Most Popular" badge sitting on the top border -
         without it the price/name felt cramped right under the badge compared to its
         unbadged neighbors. */
      padding-top: 34px;
      transform: scale(1.045);
      z-index: 1;
    }

    .pricing-card--featured:hover { transform: scale(1.045) translateY(-4px); }
    /* Scaled down from its own 1.045 baseline (not the plain cards' 1 -> 0.98) so the tap feedback
       reads as a press relative to this card's own resting size, not a sudden size mismatch. */
    .pricing-card--featured:active { transform: scale(1.015); }

    .pricing-card-value-note {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--brand-coral);
      margin: -12px 0 18px;
    }

    .pricing-card--concierge .pricing-card-value-note { color: #7c3aed; }

    .pricing-card-badge {
      position: absolute;
      top: -13px;
      left: 26px;
      background: var(--brand-coral);
      color: #fff;
      font-family: "Sora", sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      padding: 4px 12px;
      border-radius: 999px;
    }

    .pricing-card-name {
      font-family: "Sora", sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--ink-soft);
      margin-bottom: 10px;
    }

    .pricing-card-price {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: 2rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--ink);
    }

    .pricing-card-period { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 18px; }

    .pricing-card-list { list-style: none; flex: 1 1 auto; margin-bottom: 22px; }
    .pricing-card-list li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      font-size: 0.88rem;
      color: var(--ink-soft);
      line-height: 1.5;
      padding: 7px 0;
      border-bottom: 1px solid var(--border);
    }
    .pricing-card-list li:last-child { border-bottom: none; }
    .pricing-card-list li i { color: #4ade80; margin-top: 3px; flex: 0 0 auto; }

    .pricing-card-btn {
      display: block;
      text-align: center;
      padding: 12px 18px;
      border-radius: 12px;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      color: var(--ink);
      font-family: "Sora", sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      text-decoration: none;
      transition: transform 0.2s ease;
    }
    .pricing-card-btn:hover { transform: translateY(-2px); }

    .pricing-card-btn--featured { background: var(--brand-coral); border-color: var(--brand-coral); color: #fff; }

    .pricing-card--concierge { border-color: #7c3aed; background: linear-gradient(180deg, rgba(124, 58, 237, 0.08), var(--card) 55%); box-shadow: 0 18px 40px -18px rgba(124, 58, 237, 0.35), var(--shadow); }
    .pricing-card--concierge .pricing-card-badge { background: #7c3aed; }
    .pricing-card-btn--concierge { background: linear-gradient(135deg, #a78bfa, #7c3aed); border-color: #7c3aed; color: #fff; }

    @media (max-width: 980px) {
      .pricing-grid { grid-template-columns: 1fr; }
      .pricing-card--featured { order: -1; transform: none; }
      .pricing-card--featured:hover { transform: translateY(-4px); }
    }

    .popular-pages {
      margin-bottom: 36px;
      text-align: center;
    }

    .popular-pages h2 {
      margin-bottom: 22px;
    }

    /* Auto-scrolling marquee instead of a static grid - the track holds the card list twice
       (see index.php) and slides exactly one set-width via keyframe below, so the loop reads as
       continuous. Edge mask fades cards in/out at the row's ends instead of hard-cropping them. */
    .popular-pages-marquee {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }

    .popular-pages-track {
      display: flex;
      width: max-content;
      gap: 14px;
      animation: popular-pages-scroll 42s linear infinite;
    }

    .popular-pages-marquee:hover .popular-pages-track,
    .popular-pages-marquee:focus-within .popular-pages-track {
      animation-play-state: paused;
    }

    @keyframes popular-pages-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .popular-pages-track { animation: none; }
      .popular-pages-marquee { overflow-x: auto; }
    }

    /* Touch devices have no hover/focus-within state to pause the marquee with, so without this
       it just scrolls on its own forever with no way to stop it or land on a full card - swap to
       a manually swipeable, snap-aligned row instead. The track's second half (a purely visual
       echo that makes the auto-scroll loop seamless - see the PHP comment above
       .popular-pages-track's markup) has nothing to seamlessly loop into here, so it's hidden
       rather than left as a confusing repeat of the same cards after a swipe. */
    @media (hover: none) {
      .popular-pages-track {
        animation: none;
      }

      .popular-pages-marquee {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }

      .popular-page-card {
        scroll-snap-align: center;
      }

      .popular-pages-track a[aria-hidden="true"] {
        display: none;
      }
    }

    .popular-page-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      flex: 0 0 168px;
      width: 168px;
      background: rgba(255, 255, 255, 0.78);
      border: 1px solid rgba(25, 25, 50, 0.08);
      border-radius: var(--radius-lg);
      padding: 20px 14px;
      box-shadow: 0 10px 26px rgba(25, 25, 50, 0.08);
      text-decoration: none;
      color: inherit;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .popular-page-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 28px rgba(25, 25, 50, 0.14);
    }

    .popular-page-card:active {
      transform: scale(0.97);
    }

    .popular-page-card.is-top-rank {
      border-color: rgba(255, 204, 63, 0.55);
      box-shadow: 0 12px 28px rgba(255, 204, 63, 0.22);
    }

    .popular-pages-more {
      margin-top: 24px;
    }

    .popular-pages-more a {
      color: #0ea5e9;
      font-weight: 700;
      text-decoration: none;
    }

    .popular-pages-more a:hover {
      text-decoration: underline;
    }

    .popular-page-rank {
      align-self: flex-start;
      font-family: "Bricolage Grotesque", sans-serif;
      font-weight: 800;
      font-size: 0.7rem;
      letter-spacing: 0.03em;
      color: var(--ink-soft);
      background: rgba(127, 127, 127, 0.14);
      padding: 3px 9px;
      border-radius: 999px;
    }

    .popular-page-card.is-top-rank .popular-page-rank {
      color: #92400e;
      background: linear-gradient(135deg, #ffe28a, #ffc247);
    }

    .popular-page-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      /* Deliberately no border here - it was a purely decorative ring using the creator's
         accent_color, unrelated to their real page's own avatar_border setting, so a creator
         with borders turned off on their actual page saw one here anyway. */
      flex: 0 0 auto;
    }

    .popular-page-avatar-fallback {
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--accent, #ff5f6d), var(--secondary, #0ea5e9));
      color: #fff;
      font-family: "Bricolage Grotesque", sans-serif;
      font-weight: 800;
      font-size: 1.3rem;
    }

    .popular-page-name {
      font-family: "Bricolage Grotesque", sans-serif;
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--ink);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .popular-page-handle {
      font-size: 0.76rem;
      color: var(--ink-soft);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .popular-page-views {
      font-size: 0.74rem;
      font-weight: 700;
      /* Deliberately NOT --accent here (unlike the avatar ring below) - that's a color the
         creator picked for their own buttons/backgrounds, with no guarantee it's readable as
         text against this card's fixed background. A dark accent color could pair fine with a
         white button label but go nearly invisible here. --brand-coral is a fixed, theme-safe
         color already proven readable in both modes (same one .section-kicker uses above). */
      color: var(--brand-coral);
    }

    .brand-recognition {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 28px;
      align-items: center;
      margin-bottom: 36px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--panel-border);
      background: var(--panel-bg);
      box-shadow: var(--shadow);
      padding: 30px;
    }

    .section-kicker {
      font-family: "Sora", sans-serif;
      font-weight: 700;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--brand-coral);
      margin-bottom: 8px;
    }

    .brand-copy h2 {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: clamp(1.5rem, 3vw, 2.1rem);
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 10px;
    }

    .brand-copy > p:not(.section-kicker) {
      color: var(--ink-soft);
      font-size: 0.95rem;
      line-height: 1.6;
      max-width: 52ch;
      margin-bottom: 18px;
    }

    .brand-points {
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .brand-points li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.92rem;
      color: var(--ink);
      line-height: 1.5;
    }

    .brand-points i {
      color: var(--brand-blue);
      margin-top: 3px;
    }

    .brand-swatches {
      display: grid;
      gap: 14px;
    }

    .brand-swatch-card {
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 14px;
      border: 1px solid var(--panel-border);
      box-shadow: 0 10px 22px rgba(25, 25, 50, 0.08);
      padding: 16px;
    }

    .brand-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      /* Was a flat white ring - fine for separating a coral/gold/blue dot from a light card, but
         a dark dot (--midnight) against a dark-mode card is dark-on-dark either way, and a white
         ring at 50% opacity over a dark background isn't bright enough to rescue it. --panel-border
         is already tuned per-theme to read against a card background specifically, regardless of
         what color sits inside the ring. */
      box-shadow: 0 0 0 3px var(--panel-border);
    }

    .brand-dot--coral { background: var(--brand-coral); }
    .brand-dot--gold { background: var(--brand-gold); }
    .brand-dot--blue { background: var(--brand-blue); }
    .brand-dot--violet { background: #8b5cf6; }
    .brand-dot--green { background: #22c55e; }
    .brand-dot--midnight { background: #1e293b; }

    .brand-swatch-card p {
      margin-left: auto;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--ink-soft);
    }

    .proof {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }

    .stat {
      border-radius: 14px;
      padding: 18px 15px;
      border: 1px solid rgba(25, 25, 50, 0.1);
      background: rgba(255, 255, 255, 0.8);
      text-align: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .stat:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(25, 25, 50, 0.12); }

    .stat-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      margin: 0 auto 10px;
      color: #fff;
      font-size: 0.9rem;
    }

    .stat:nth-child(1) .stat-icon { background: var(--brand-coral); }
    .stat:nth-child(2) .stat-icon { background: var(--brand-blue); }
    .stat:nth-child(3) .stat-icon { background: #1e293b; }
    .stat:nth-child(4) .stat-icon { background: #8b5cf6; }

    .stat strong {
      display: block;
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: 1.5rem;
      letter-spacing: -0.02em;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .stat span { font-size: 0.82rem; color: #475569; line-height: 1.3; display: block; }

    /* A soft radial glow anchored to the corner (rather than a flat panel background) so the
       final CTA reads as a bit more of a "moment" than the plainer panels above it. Clipped by
       the section's own overflow:hidden so it can't bleed into surrounding content. */
    .footer-cta {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      color: var(--ink);
      padding: 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      box-shadow: var(--shadow);
    }

    .footer-cta-glow {
      position: absolute;
      top: -40%;
      right: -10%;
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, rgba(255, 204, 63, 0.32), rgba(255, 95, 109, 0.16) 46%, transparent 70%);
      pointer-events: none;
    }

    .footer-cta-copy { position: relative; z-index: 1; }
    .footer-cta > .btn { position: relative; z-index: 1; }

    .footer-cta h2 { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.3rem); letter-spacing: -0.02em; margin-bottom: 8px; }
    .footer-cta p:not(.section-kicker) { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.58; max-width: 55ch; }

    .footer-cta .btn-main { gap: 8px; }
    .footer-cta .btn-main i { font-size: 0.8rem; transition: transform 0.2s ease; }
    .footer-cta .btn-main:hover i { transform: translateX(3px); }

    .site-footer {
      margin-top: 16px;
      border-radius: 8px;
      padding: 14px 16px;
      border: 1px solid rgba(25, 25, 50, 0.1);
      background: var(--panel-bg);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .site-footer p {
      color: #475569;
      font-size: 0.85rem;
    }

    /* Progressive enhancement (assets/js/footer-reveal.js adds this class only once it can
       observe .footer-sentinel), so a no-JS visitor keeps the plain, always-visible footer
       above instead of a permanently hidden fixed one. */
    .footer-sentinel {
      height: 0;
    }

    .has-footer-reveal .site-footer {
      position: fixed;
      left: 50%;
      bottom: 18px;
      z-index: 950;
      width: min(1120px, 92%);
      margin-top: 0;
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 130%);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    }

    .has-footer-reveal .site-footer.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }

    .has-footer-reveal .footer-sentinel {
      height: 110px;
    }

    @media (prefers-reduced-motion: reduce) {
      .has-footer-reveal .site-footer {
        transition-duration: 0.01ms;
      }
    }

    .legal-page .site {
      padding-bottom: 36px;
    }

    .legal-shell {
      width: min(820px, 100%);
      margin: 34px auto 0;
      padding: clamp(24px, 5vw, 48px);
      border: 1px solid var(--panel-border);
      border-radius: 12px;
      background: var(--panel-bg);
      box-shadow: var(--shadow);
    }

    .legal-header {
      border-bottom: 1px solid var(--panel-border);
      margin-bottom: 26px;
      padding-bottom: 22px;
    }

    .legal-title {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: clamp(2rem, 5vw, 3rem);
      letter-spacing: -0.03em;
      margin: 6px 0 10px;
    }

    .legal-updated {
      color: var(--muted);
      font-size: 0.8rem;
    }

    .legal-section + .legal-section {
      border-top: 1px solid var(--panel-border);
      margin-top: 24px;
      padding-top: 24px;
    }

    .legal-section h2 {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: 1.15rem;
      margin-bottom: 8px;
    }

    .legal-section p,
    .legal-section li {
      color: var(--ink-soft);
      font-size: 0.9rem;
      line-height: 1.7;
    }

    .legal-section ul {
      display: grid;
      gap: 7px;
      margin: 10px 0 0 20px;
    }

    .auth-page .site {
      padding-bottom: 36px;
    }

    .auth-main {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
      gap: 18px;
      margin-bottom: 18px;
    }

    .gate-shell {
      width: min(480px, 92%);
      margin: 24px auto 60px;
      text-align: center;
    }

    .gate-shell .auth-title,
    .gate-shell .auth-copy {
      text-align: center;
    }

    .gate-shell .auth-form {
      text-align: left;
    }

    .gate-shell .auth-form .cf-turnstile {
      display: flex;
      justify-content: center;
      margin: 0 auto;
    }

    .gate-icon {
      font-size: 2rem;
      color: var(--brand-blue);
      margin-bottom: 14px;
    }

    .fa-spin {
      display: inline-block;
      animation: fa-spin-rotate 0.9s linear infinite;
    }

    @keyframes fa-spin-rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* DVD-screensaver-style bouncing "404" - the classic corner-hit-color-change bit, done
       in CSS keyframes since the path just needs to look plausible, not be physically simulated. */
    .dvd-stage {
      position: relative;
      width: 100%;
      max-width: 340px;
      height: 180px;
      margin: 4px auto 22px;
      border-radius: 12px;
      background: #0a0a14;
      overflow: hidden;
    }

    .dvd-bouncer {
      position: absolute;
      top: 0;
      left: 0;
      font-family: "Bricolage Grotesque", sans-serif;
      font-weight: 800;
      font-size: 1.8rem;
      letter-spacing: -0.02em;
      white-space: nowrap;
      color: #ff5f6d;
      animation: dvd-bounce 9s linear infinite;
    }

    /* Bounds measured against the actual rendered box: .dvd-stage is ~333px wide (up to its
       340px max-width) by a fixed 180px tall, and the "404" text itself renders at ~55x35px - so
       the true reachable range for its top-left corner is x:[0,278] y:[0,145] (stage size minus
       the text's own size), not the stage's raw width/height. A waypoint that stopped short of
       that (the previous values maxed out around x:210 y:118) left a visible gap between the text
       and the box edge on every "wall hit", reading as if it never actually reached the wall. 270/
       145 keeps a few px of safety margin under the true 278/145 max so it never clips out from
       under overflow:hidden on the narrower end of the stage's width range.

       Color changes on every wall hit, not just the corners - each new color is also declared one
       stop earlier at the same value ("held flat") so it doesn't gradually blend in during the
       preceding glide, only snaps the instant it lands on that wall. */
    @keyframes dvd-bounce {
      0%     { transform: translate(0px, 0px); color: #ff5f6d; }     /* top-left corner */
      10.9%  { color: #ff5f6d; }
      11%    { transform: translate(270px, 60px); color: #ffcc3f; }  /* right wall */
      21.9%  { color: #ffcc3f; }
      22%    { transform: translate(150px, 145px); color: #0ea5e9; } /* bottom wall */
      32.9%  { color: #0ea5e9; }
      33%    { transform: translate(0px, 90px); color: #22c55e; }    /* left wall */
      43.9%  { color: #22c55e; }
      44%    { transform: translate(100px, 0px); color: #a855f7; }   /* top wall */
      54.9%  { color: #a855f7; }
      55%    { transform: translate(270px, 145px); color: #ec4899; } /* bottom-right corner */
      65.9%  { color: #ec4899; }
      66%    { transform: translate(70px, 0px); color: #06b6d4; }    /* top wall */
      76.9%  { color: #06b6d4; }
      77%    { transform: translate(0px, 145px); color: #f59e0b; }   /* bottom-left corner */
      87.9%  { color: #f59e0b; }
      88%    { transform: translate(0px, 60px); color: #8b5cf6; }    /* left wall */
      99.9%  { color: #8b5cf6; }
      100%   { transform: translate(0px, 0px); color: #ff5f6d; }     /* top-left corner (loop) */
    }

    @media (prefers-reduced-motion: reduce) {
      .dvd-bouncer {
        animation: none;
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }

    .mascot-404-debug {
      margin: 10px 0 0;
      font-size: 0.72rem;
      color: var(--ink-soft);
    }

    .mascot-404-debug code {
      font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      background: rgba(25, 25, 50, 0.06);
      padding: 2px 6px;
      border-radius: 6px;
    }

    @media (prefers-reduced-motion: reduce) {
      .mascot-404 {
        animation: none;
      }
    }

    .go-page {
      position: relative;
      z-index: 0;
      min-height: 100vh;
    }

    .go-page[data-background="gradient"] {
      background: linear-gradient(165deg, var(--accent), var(--secondary));
    }

    .go-page[data-background="solid"] {
      background: var(--accent);
    }

    .go-page[data-background="midnight"] {
      background: linear-gradient(165deg, #0b0f1a, #1b2036 60%, #101425);
    }

    .go-page::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.24));
    }

    .go-background-image {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background-size: cover;
      background-repeat: no-repeat;
      filter: blur(30px);
      transform: scale(1.15);
    }

    .auth-panel {
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      padding: 24px;
    }

    .auth-kicker {
      color: var(--muted);
      font-weight: 700;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .auth-title {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: clamp(1.7rem, 3.5vw, 2.45rem);
      line-height: 1.02;
      letter-spacing: -0.02em;
      margin-bottom: 10px;
    }

    .auth-copy {
      color: var(--ink-soft);
      font-size: 0.94rem;
      line-height: 1.65;
      margin-bottom: 16px;
      max-width: 56ch;
    }

    .auth-alert {
      border-radius: 12px;
      border: 1px solid transparent;
      padding: 10px 12px;
      font-size: 0.86rem;
      line-height: 1.5;
      margin-bottom: 4px;
    }

    .auth-alert-success {
      background: var(--success-bg);
      border-color: var(--success-border);
      color: var(--success-text);
    }

    .auth-alert-error {
      background: var(--error-bg);
      border-color: var(--error-border);
      color: var(--error-text);
    }

    .auth-error-list {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 4px;
    }

    .js-ready .auth-alert {
      display: none;
    }

    .toast-stack {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 1500;
      display: grid;
      gap: 10px;
      width: min(380px, calc(100vw - 24px));
    }

    .toast {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      border-radius: 12px;
      border: 1px solid var(--panel-border);
      background: var(--panel-bg);
      color: var(--ink);
      box-shadow: var(--shadow);
      padding: 11px 12px;
      font-size: 0.86rem;
      line-height: 1.45;
      opacity: 0;
      transform: translateY(-8px);
      animation: toast-in 0.2s ease forwards;
    }

    .toast.is-leaving {
      animation: toast-out 0.24s ease forwards;
    }

    .toast-success {
      background: var(--success-bg);
      border-color: var(--success-border);
      color: var(--success-text);
    }

    .toast-error {
      background: var(--error-bg);
      border-color: var(--error-border);
      color: var(--error-text);
    }

    .toast-message {
      flex: 1 1 auto;
      word-break: break-word;
    }

    .toast-close {
      border: 0;
      background: transparent;
      color: currentColor;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      padding: 0;
      opacity: 0.72;
      transition: opacity 0.16s ease;
    }

    .toast-close:hover {
      opacity: 1;
    }

    @keyframes toast-in {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes toast-out {
      from {
        opacity: 1;
        transform: translateY(0);
      }

      to {
        opacity: 0;
        transform: translateY(-8px);
      }
    }

    .auth-form {
      display: grid;
      gap: 12px;
    }

    .form-field {
      display: grid;
      gap: 6px;
    }

    .form-field label {
      color: var(--ink-soft);
      font-size: 0.84rem;
      font-weight: 700;
    }

    .form-field input {
      width: 100%;
      border-radius: 12px;
      border: 1px solid var(--panel-border);
      background: var(--field-bg);
      color: var(--field-text);
      padding: 11px 12px;
      font-size: 0.9rem;
      font-family: "Sora", sans-serif;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-field input:focus {
      outline: none;
      border-color: rgba(14, 165, 233, 0.55);
      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
    }

    .form-help {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.45;
    }

    .form-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .form-check {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--ink-soft);
      font-size: 0.82rem;
      line-height: 1.5;
    }

    .form-check input {
      width: 14px;
      height: 14px;
      accent-color: #0ea5e9;
      flex: 0 0 auto;
    }

    .auth-submit {
      width: 100%;
      border: 0;
      cursor: pointer;
      margin-top: 4px;
    }

    /* go.php's hold-to-unlock gate: a single fill bar sweeping across the button on press,
       instead of the ring+badge treatment used on-page for featured/list/grid links - this is
       one plain button on its own page, not several small icons in a row, so it doesn't need
       that same machinery. */
    .hold-continue-btn {
      position: relative;
      overflow: hidden;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
      touch-action: none;
    }

    .hold-continue-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .hold-continue-fill {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.28);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.2s ease-out;
      pointer-events: none;
    }

    .hold-continue-btn.is-holding .hold-continue-fill {
      transition: transform 900ms linear;
      transform: scaleX(1);
    }

    .hold-continue-label {
      position: relative;
      z-index: 1;
    }

    .auth-meta {
      margin-top: 12px;
      color: var(--ink-soft);
      font-size: 0.86rem;
    }

    .auth-link {
      color: var(--brand-blue);
      text-decoration: none;
      font-weight: 700;
    }

    .auth-link:hover {
      text-decoration: underline;
    }

    .auth-side {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 16px;
    }

    .auth-side-title {
      font-family: "Bricolage Grotesque", sans-serif;
      font-size: clamp(1.3rem, 3vw, 1.9rem);
      letter-spacing: -0.02em;
      line-height: 1.08;
      margin-bottom: 12px;
    }

    .auth-benefits {
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .auth-benefits li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--ink-soft);
      font-size: 0.9rem;
      line-height: 1.55;
    }

    .auth-benefits i {
      color: var(--brand-blue);
      margin-top: 3px;
      font-size: 0.8rem;
    }

    .auth-env {
      border-radius: 14px;
      border: 1px dashed var(--panel-border);
      background: var(--chip-bg);
      padding: 12px 14px;
    }

    .auth-env strong {
      display: block;
      font-size: 0.84rem;
      margin-bottom: 6px;
      color: var(--ink);
      font-family: "Bricolage Grotesque", sans-serif;
      letter-spacing: -0.01em;
    }

    .auth-env p {
      margin: 0;
      color: var(--ink-soft);
      font-size: 0.82rem;
      line-height: 1.5;
    }

    .footer-links {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: #0f172a;
      text-decoration: none;
      font-size: 0.86rem;
      font-weight: 600;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(25, 25, 50, 0.12);
      background: rgba(255, 255, 255, 0.85);
      transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    }

    .footer-links a:hover {
      transform: translateY(-1px);
      border-color: rgba(14, 165, 233, 0.5);
      background-color: #fff;
    }

    /* Day/night theme toggle - kept quiet on purpose; it's a utility control, not a focal point. */
    .day-toggle {
      position: relative;
      width: 52px;
      height: 28px;
      padding: 0;
      flex: 0 0 auto;
      border: 1px solid rgba(25, 25, 50, 0.14);
      border-radius: 999px;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.7);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: background 0.4s ease, border-color 0.4s ease, transform 0.18s ease;
    }

    .day-toggle:hover { transform: translateY(-1px); }
    .day-toggle:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }

    .day-toggle-stars { display: none; }

    .day-toggle-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
      display: grid;
      place-items: center;
      transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.4s ease, box-shadow 0.4s ease;
    }

    .day-toggle-thumb i {
      position: absolute;
      font-size: 0.6rem;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .day-toggle-thumb .fa-sun { color: #c9a227; opacity: 1; transform: scale(1) rotate(0deg); }
    .day-toggle-thumb .fa-moon { color: #94a3b8; opacity: 0; transform: scale(0.5) rotate(-90deg); }

    :root[data-theme="dark"] .day-toggle {
      background: rgba(15, 24, 42, 0.75);
      border-color: rgba(149, 164, 202, 0.3);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    :root[data-theme="dark"] .day-toggle-thumb {
      transform: translateX(24px);
      background: #263149;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    :root[data-theme="dark"] .day-toggle-thumb .fa-sun { opacity: 0; transform: scale(0.5) rotate(90deg); }
    :root[data-theme="dark"] .day-toggle-thumb .fa-moon { opacity: 1; transform: scale(1) rotate(0deg); color: #8b96ad; }

    @media (prefers-reduced-motion: reduce) {
      .day-toggle,
      .day-toggle-thumb,
      .day-toggle-thumb i,
      .day-toggle-star {
        transition-duration: 0.01ms;
      }

      .typing-cursor {
        animation: none;
        opacity: 1;
      }
    }

    .reveal {
      opacity: 0;
      transform: translateY(24px) scale(0.99);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Gentle idle bounce on the cards peeking in at the bottom of the first screen - an
       enticing "there's more below" cue. Driven by its own .entice-bounce class (set in JS)
       rather than the reveal system's .is-visible, since that lands too early (18% threshold)
       to ever leave the bounce condition true. Stops on first scroll or after a few seconds. */
    .features.entice-bounce .feature:nth-child(-n+3) {
      animation: feature-peek-bounce 2.1s ease-in-out infinite;
    }

    @keyframes feature-peek-bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-14px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .features.entice-bounce .feature:nth-child(-n+3) {
        animation: none;
      }
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ink: #e8edff;
        --ink-soft: #b7c1db;
        --card: rgba(15, 24, 42, 0.86);
        --border: rgba(149, 164, 202, 0.3);
        --shadow: 0 20px 42px rgba(0, 0, 0, 0.42);
        --panel-bg: rgba(14, 22, 38, 0.88);
        --panel-border: rgba(149, 164, 202, 0.35);
        --field-bg: rgba(15, 24, 42, 0.9);
        --field-text: #e8edff;
        --muted: #a8b4d3;
        --chip-bg: rgba(9, 14, 27, 0.8);
        --success-bg: rgba(16, 185, 129, 0.2);
        --success-border: rgba(52, 211, 153, 0.55);
        --success-text: #6ee7b7;
        --error-bg: rgba(239, 68, 68, 0.2);
        --error-border: rgba(248, 113, 113, 0.56);
        --error-text: #fca5a5;
        --warning-bg: rgba(245, 158, 11, 0.22);
        --warning-border: rgba(251, 191, 36, 0.55);
        --warning-text: #fcd34d;
      }

      /* :not(.creator-page) - a creator's own background_style choice (creator.css's
         body[data-background="..."] rules) must never be overridden by the marketing
         site's dark-mode glow, which otherwise wins on specificity alone. */
      :root:not([data-theme="light"]) body:not(.creator-page) {
        background:
          radial-gradient(circle at 12% 12%, rgba(255, 95, 109, 0.2), transparent 34%),
          radial-gradient(circle at 90% 10%, rgba(14, 165, 233, 0.22), transparent 30%),
          radial-gradient(circle at 50% 100%, rgba(255, 204, 63, 0.12), transparent 40%),
          linear-gradient(120deg, #0a1020, #1a1a2f 54%, #0a1a2b);
        background-attachment: fixed;
      }

      :root:not([data-theme="light"]) .orb.one { background: rgba(255, 95, 109, 0.24); }
      :root:not([data-theme="light"]) .orb.two { background: rgba(14, 165, 233, 0.2); }
      :root:not([data-theme="light"]) .orb.three { background: rgba(0, 195, 154, 0.22); }
      :root:not([data-theme="light"]) .orb.four { background: rgba(255, 204, 63, 0.2); }

      :root:not([data-theme="light"]) .brand-mark { box-shadow: 0 10px 20px rgba(255, 95, 109, 0.28); }
      :root:not([data-theme="light"]) .nav-btn { background: linear-gradient(135deg, #2d4168, #1f2d4d); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); }
      :root:not([data-theme="light"]) .theme-toggle { background: rgba(14, 22, 38, 0.88); border-color: rgba(149, 164, 202, 0.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
      :root:not([data-theme="light"]) .theme-label { color: #c3cee8; }
      :root:not([data-theme="light"]) .theme-select { background-color: rgba(21, 34, 60, 0.92); border-color: rgba(149, 164, 202, 0.32); color: #e8edff; }
      :root:not([data-theme="light"]) .theme-select {
        background-image:
          linear-gradient(45deg, transparent 50%, #c3cee8 50%),
          linear-gradient(135deg, #c3cee8 50%, transparent 50%);
      }

      :root:not([data-theme="light"]) .slug-card,
      :root:not([data-theme="light"]) .platform-item,
      :root:not([data-theme="light"]) .feature,
      :root:not([data-theme="light"]) .popular-page-card,
      :root:not([data-theme="light"]) .stat,
      :root:not([data-theme="light"]) .site-footer,
      :root:not([data-theme="light"]) .footer-links a {
        background: rgba(14, 22, 38, 0.88);
        border-color: rgba(149, 164, 202, 0.3);
      }

      :root:not([data-theme="light"]) .popular-page-views {
        color: #ffb4bd;
      }

      :root:not([data-theme="light"]) .preview,
      :root:not([data-theme="light"]) .screen {
        border-color: rgba(149, 164, 202, 0.28);
      }

      :root:not([data-theme="light"]) .screen {
        background: linear-gradient(160deg, #0e182b, #15223c);
      }

      :root:not([data-theme="light"]) .btn-alt {
        color: #e8edff;
        background: rgba(15, 24, 42, 0.9);
        border-color: rgba(149, 164, 202, 0.35);
      }

      :root:not([data-theme="light"]) .slug-card span,
      :root:not([data-theme="light"]) .site-footer p,
      :root:not([data-theme="light"]) .stat span {
        color: #a8b4d3;
      }

      :root:not([data-theme="light"]) .slug-card strong,
      :root:not([data-theme="light"]) .mini-user,
      :root:not([data-theme="light"]) .platform-item,
      :root:not([data-theme="light"]) .stat strong,
      :root:not([data-theme="light"]) .footer-links a {
        color: #e8edff;
      }

      :root:not([data-theme="light"]) .img-placeholder {
        color: #c7d3ef;
        border-color: rgba(149, 164, 202, 0.42);
        background:
          linear-gradient(130deg, rgba(255, 95, 109, 0.18), rgba(14, 165, 233, 0.2)),
          repeating-linear-gradient(-45deg, rgba(18, 29, 49, 0.92), rgba(18, 29, 49, 0.92) 8px, rgba(24, 38, 61, 0.95) 8px, rgba(24, 38, 61, 0.95) 16px);
      }

      :root:not([data-theme="light"]) .platform-item i { color: #60a5fa; }

      :root:not([data-theme="light"]) .footer-links a:hover {
        background-color: #1a2947;
        border-color: rgba(96, 165, 250, 0.55);
      }
    }

    @media (max-width: 820px) {
      .nav {
        flex-wrap: wrap;
        gap: 10px;
      }

      .nav-controls {
        justify-content: flex-end;
      }

      .hero {
        gap: 22px;
      }

      .slug-card span {
        white-space: normal;
      }
    }

    @media (max-width: 980px) {
      .hero { grid-template-columns: 1fr; }
      .preview-slot { max-width: 640px; height: 560px; }
      .preview { max-width: 640px; min-height: 440px; }
      .proof { grid-template-columns: 1fr 1fr; }
      .brand-recognition { grid-template-columns: 1fr; }
      .brand-swatches { grid-template-columns: 1fr 1fr; }
      .auth-main { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .site { width: min(1120px, 94%); }
      .nav { margin-bottom: 18px; }
      .nav-btn { padding: 10px 14px; font-size: 0.85rem; }
      .toast-stack {
        top: 12px;
        right: 12px;
      }
      .theme-toggle { width: 100%; justify-content: space-between; }
      .theme-select { flex: 1 1 auto; max-width: 180px; }
      .subtext { font-size: 0.97rem; }
      .preview-slot { height: 550px; }
      .preview { min-height: 420px; }
      .proof { grid-template-columns: 1fr; }
      .brand-recognition { padding: 20px; }
      .brand-swatches { grid-template-columns: 1fr; }
      .footer-cta { padding: 20px; }
      .slug-card { align-items: flex-start; flex-direction: column; gap: 6px; }
      .slug-card-arrow { display: none; }
      .auth-panel { padding: 18px; }
      .auth-form { gap: 10px; }
      .form-options { flex-direction: column; align-items: flex-start; }
      .site-footer { justify-content: center; }
      .site-footer p { text-align: center; }
      .footer-links { justify-content: center; }
      .has-footer-reveal .site-footer { width: min(1120px, 94%); }
      .has-footer-reveal .footer-sentinel { height: 170px; }
    }

    @media (max-width: 480px) {
      .site {
        width: min(1120px, 96%);
        padding: 20px 0 42px;
      }

      .nav-controls {
        justify-content: stretch;
      }

      .headline {
        font-size: clamp(1.75rem, 10vw, 2.4rem);
      }

      .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .btn,
      .nav-btn {
        width: 100%;
      }

      .nav-controls .nav-btn {
        width: auto;
      }

      .theme-select {
        max-width: none;
      }

      .auth-side-title {
        font-size: clamp(1.22rem, 6vw, 1.6rem);
      }

      .preview-slot {
        height: 505px;
      }

      .preview {
        min-height: 380px;
      }

      .img-placeholder {
        height: 124px;
        font-size: 0.82rem;
      }

      .platform-item {
        padding: 8px 10px;
        font-size: 0.83rem;
      }

      .footer-links {
        width: 100%;
      }

      .footer-links a {
        flex: 1 1 100%;
        text-align: center;
      }

      .has-footer-reveal .site-footer {
        width: min(1120px, 96%);
      }

      .has-footer-reveal .footer-sentinel {
        height: 320px;
      }
    }

    :root[data-theme="dark"] {
      color-scheme: dark;
      --ink: #e8edff;
      --ink-soft: #b7c1db;
      --card: rgba(15, 24, 42, 0.86);
      --border: rgba(149, 164, 202, 0.3);
      --shadow: 0 20px 42px rgba(0, 0, 0, 0.42);
      --panel-bg: rgba(14, 22, 38, 0.88);
      --panel-border: rgba(149, 164, 202, 0.35);
      --field-bg: rgba(15, 24, 42, 0.9);
      --field-text: #e8edff;
      --muted: #a8b4d3;
      --chip-bg: rgba(9, 14, 27, 0.8);
      --success-bg: rgba(16, 185, 129, 0.2);
      --success-border: rgba(52, 211, 153, 0.55);
      --success-text: #6ee7b7;
      --error-bg: rgba(239, 68, 68, 0.2);
      --error-border: rgba(248, 113, 113, 0.56);
      --error-text: #fca5a5;
      --warning-bg: rgba(245, 158, 11, 0.22);
      --warning-border: rgba(251, 191, 36, 0.55);
      --warning-text: #fcd34d;
    }

    :root[data-theme="dark"] body:not(.creator-page) {
      background:
        radial-gradient(circle at 12% 12%, rgba(255, 95, 109, 0.2), transparent 34%),
        radial-gradient(circle at 90% 10%, rgba(14, 165, 233, 0.22), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(255, 204, 63, 0.12), transparent 40%),
        linear-gradient(120deg, #0a1020, #1a1a2f 54%, #0a1a2b);
      background-attachment: fixed;
    }

    :root[data-theme="dark"] .orb.one { background: rgba(255, 95, 109, 0.24); }
    :root[data-theme="dark"] .orb.two { background: rgba(14, 165, 233, 0.2); }
    :root[data-theme="dark"] .orb.three { background: rgba(0, 195, 154, 0.22); }
    :root[data-theme="dark"] .orb.four { background: rgba(255, 204, 63, 0.2); }

    :root[data-theme="dark"] .brand-mark { box-shadow: 0 10px 20px rgba(255, 95, 109, 0.28); }
    :root[data-theme="dark"] .nav-btn { background: linear-gradient(135deg, #2d4168, #1f2d4d); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); }
    :root[data-theme="dark"] .theme-toggle { background: rgba(14, 22, 38, 0.88); border-color: rgba(149, 164, 202, 0.3); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); }
    :root[data-theme="dark"] .theme-label { color: #c3cee8; }
    :root[data-theme="dark"] .theme-select { background-color: rgba(21, 34, 60, 0.92); border-color: rgba(149, 164, 202, 0.32); color: #e8edff; }
    :root[data-theme="dark"] .theme-select {
      background-image:
        linear-gradient(45deg, transparent 50%, #c3cee8 50%),
        linear-gradient(135deg, #c3cee8 50%, transparent 50%);
    }

    :root[data-theme="dark"] .slug-card,
    :root[data-theme="dark"] .platform-item,
    :root[data-theme="dark"] .feature,
    :root[data-theme="dark"] .popular-page-card,
    :root[data-theme="dark"] .stat,
    :root[data-theme="dark"] .site-footer,
    :root[data-theme="dark"] .footer-links a {
      background: rgba(14, 22, 38, 0.88);
      border-color: rgba(149, 164, 202, 0.3);
    }

    /* --brand-coral reads fine on the light card background, but red against this card's dark
       navy is a "color vibration" readability problem at this small a size even though the raw
       luminance contrast is technically passable - a pastel tint of the same hue fixes it without
       abandoning the brand color entirely. */
    :root[data-theme="dark"] .popular-page-views {
      color: #ffb4bd;
    }

    :root[data-theme="dark"] .preview,
    :root[data-theme="dark"] .screen {
      border-color: rgba(149, 164, 202, 0.28);
    }

    :root[data-theme="dark"] .screen {
      background: linear-gradient(160deg, #0e182b, #15223c);
    }

    :root[data-theme="dark"] .btn-alt {
      color: #e8edff;
      background: rgba(15, 24, 42, 0.9);
      border-color: rgba(149, 164, 202, 0.35);
    }

    :root[data-theme="dark"] .slug-card span,
    :root[data-theme="dark"] .site-footer p,
    :root[data-theme="dark"] .stat span {
      color: #a8b4d3;
    }

    :root[data-theme="dark"] .slug-card strong,
    :root[data-theme="dark"] .mini-user,
    :root[data-theme="dark"] .platform-item,
    :root[data-theme="dark"] .stat strong,
    :root[data-theme="dark"] .footer-links a {
      color: #e8edff;
    }

    :root[data-theme="dark"] .img-placeholder {
      color: #c7d3ef;
      border-color: rgba(149, 164, 202, 0.42);
      background:
        linear-gradient(130deg, rgba(255, 95, 109, 0.18), rgba(14, 165, 233, 0.2)),
        repeating-linear-gradient(-45deg, rgba(18, 29, 49, 0.92), rgba(18, 29, 49, 0.92) 8px, rgba(24, 38, 61, 0.95) 8px, rgba(24, 38, 61, 0.95) 16px);
    }

    :root[data-theme="dark"] .platform-item i { color: #60a5fa; }

    :root[data-theme="dark"] .footer-links a:hover {
      background-color: #1a2947;
      border-color: rgba(96, 165, 250, 0.55);
    }

    :root[data-theme="light"] {
      color-scheme: light;
      --ink: #191932;
      --ink-soft: #474763;
      --card: rgba(255, 255, 255, 0.82);
      --border: rgba(25, 25, 50, 0.12);
      --shadow: 0 18px 45px rgba(25, 25, 50, 0.14);
      --panel-bg: rgba(255, 255, 255, 0.84);
      --panel-border: rgba(25, 25, 50, 0.14);
      --field-bg: rgba(255, 255, 255, 0.95);
      --field-text: #0f172a;
      --muted: #6b7280;
      --chip-bg: rgba(255, 255, 255, 0.72);
      --success-bg: rgba(16, 185, 129, 0.14);
      --success-border: rgba(16, 185, 129, 0.48);
      --success-text: #065f46;
      --error-bg: rgba(239, 68, 68, 0.14);
      --error-border: rgba(239, 68, 68, 0.46);
      --error-text: #7f1d1d;
      --warning-bg: rgba(245, 158, 11, 0.14);
      --warning-border: rgba(245, 158, 11, 0.48);
      --warning-text: #92400e;
    }

    :root[data-theme="light"] body:not(.creator-page) {
      background:
        radial-gradient(circle at 10% 8%, rgba(255, 95, 109, 0.22), transparent 34%),
        radial-gradient(circle at 92% 16%, rgba(14, 165, 233, 0.24), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(255, 204, 63, 0.16), transparent 40%),
        linear-gradient(120deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3));
      background-attachment: fixed;
    }

    :root[data-theme="light"] .orb.one { background: rgba(255, 95, 109, 0.34); }
    :root[data-theme="light"] .orb.two { background: rgba(14, 165, 233, 0.28); }
    :root[data-theme="light"] .orb.three { background: rgba(0, 195, 154, 0.3); }
    :root[data-theme="light"] .orb.four { background: rgba(255, 204, 63, 0.3); }

    :root[data-theme="light"] .nav-btn:not(.nav-btn-ghost) { background: linear-gradient(135deg, #111827, #33335c); color: #fff; box-shadow: 0 8px 22px rgba(17, 24, 39, 0.22); }
    :root[data-theme="light"] .theme-toggle { background: rgba(255, 255, 255, 0.82); border-color: rgba(25, 25, 50, 0.14); box-shadow: 0 6px 16px rgba(25, 25, 50, 0.1); }
    :root[data-theme="light"] .theme-label { color: var(--ink-soft); }
    :root[data-theme="light"] .theme-select { background-color: rgba(255, 255, 255, 0.95); border-color: rgba(25, 25, 50, 0.16); color: #0f172a; }
    :root[data-theme="light"] .theme-select {
      background-image:
        linear-gradient(45deg, transparent 50%, #334155 50%),
        linear-gradient(135deg, #334155 50%, transparent 50%);
    }

    :root[data-theme="light"] .slug-card,
    :root[data-theme="light"] .platform-item,
    :root[data-theme="light"] .feature,
    :root[data-theme="light"] .popular-page-card,
    :root[data-theme="light"] .stat,
    :root[data-theme="light"] .site-footer,
    :root[data-theme="light"] .footer-links a {
      background: rgba(255, 255, 255, 0.85);
      border-color: rgba(25, 25, 50, 0.12);
    }

    :root[data-theme="light"] .preview,
    :root[data-theme="light"] .screen {
      border-color: rgba(25, 25, 50, 0.09);
    }

    :root[data-theme="light"] .screen {
      background: linear-gradient(160deg, #ffffff, #f4f9ff);
    }

    :root[data-theme="light"] .btn-alt {
      color: #111827;
      background: rgba(255, 255, 255, 0.8);
      border-color: rgba(25, 25, 50, 0.12);
    }

    :root[data-theme="light"] .slug-card span,
    :root[data-theme="light"] .site-footer p,
    :root[data-theme="light"] .stat span {
      color: #475569;
    }

    :root[data-theme="light"] .slug-card strong,
    :root[data-theme="light"] .mini-user,
    :root[data-theme="light"] .platform-item,
    :root[data-theme="light"] .stat strong,
    :root[data-theme="light"] .footer-links a {
      color: #0f172a;
    }

    :root[data-theme="light"] .img-placeholder {
      color: #334155;
      border-color: rgba(25, 25, 50, 0.26);
      background:
        linear-gradient(130deg, rgba(255, 95, 109, 0.2), rgba(14, 165, 233, 0.18)),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75) 8px, rgba(255, 255, 255, 0.4) 8px, rgba(255, 255, 255, 0.4) 16px);
    }

    :root[data-theme="light"] .platform-item i { color: #2563eb; }

    :root[data-theme="light"] .footer-links a:hover {
      background-color: #fff;
      border-color: rgba(14, 165, 233, 0.5);
    }

.cookie-consent-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #14141a;
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.cookie-consent-text {
  flex: 1 1 260px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.cookie-consent-text a {
  color: #fff;
  text-decoration: underline;
}

.cookie-consent-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.cookie-consent-btn {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.cookie-consent-decline {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.cookie-consent-accept {
  background: #fff;
  color: #14141a;
    }

/* Login: Keep me signed in and Forgot your password on one line under the password; the Soto Core sign in below the form. */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.auth-row .form-check { margin: 0; white-space: nowrap; }
.auth-row .auth-link { white-space: nowrap; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; text-align: center; }
.auth-or::before, .auth-or::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, 0.14); }
.auth-sotocore { background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); }
.auth-sotocore:hover { background: #111; }
.auth-sotocore { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.auth-sotocore-mark { height: 12px; width: auto; display: inline-block; vertical-align: middle; }