/* ------------------------------------------------------------------ */
    /* Self-hosted fonts (see public/shared/fonts/) — cuts the render-       */
    /* blocking Google Fonts round trip. Only 300/500 DM Sans and italic    */
    /* 400 Cormorant Garamond are shipped; every rule in this file must     */
    /* stick to those three faces.                                         */
    /* ------------------------------------------------------------------ */
    @font-face {
      font-family: "DM Sans";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url("/fonts/dm-sans.woff2") format("woff2");
    }
    @font-face {
      font-family: "DM Sans";
      font-style: normal;
      font-weight: 500;
      font-display: swap;
      src: url("/fonts/dm-sans.woff2") format("woff2");
    }
    @font-face {
      font-family: "Cormorant Garamond";
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url("/fonts/cormorant-garamond-400-italic.woff2") format("woff2");
    }

    /* ------------------------------------------------------------------ */
    /* Design tokens                                                       */
    /* ------------------------------------------------------------------ */
    :root {
      --rose: #ff5fa2;
      --orchid: #eb8dff;
      --purple: #7b6cff;
      --lilac: #9488ff;
      --mint: #3cf2d1;
      --lime: #bdff80;
      --holly: #ff5c5c;
      --cream: #f5f0ff;
      --ink: #0e0b1a;
      --ink2: #1a1430;
      --text: #e8e0ff;
      --text-dim: rgba(232,224,255,0.55);
      /* For <strong> emphasis inside dimmed body copy — dimmed less than
         --text-dim so it still reads as emphasis, but not full --text. */
      --text-strong: rgba(232,224,255,0.75);
      --card-bg: rgba(255,255,255,0.04);
      --card-border: rgba(124,77,255,0.2);
      /* Per-page hero eyebrow accent — each landing page overrides these two
         in a small inline <style> block. Defaults here are the achievement
         values. */
      --accent: var(--lilac);
      --accent-border: rgba(148,136,255,0.3);
    }

    /* ------------------------------------------------------------------ */
    /* Reset & base                                                        */
    /* ------------------------------------------------------------------ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: "DM Sans", sans-serif;
      font-weight: 300;
      min-height: 100vh;
      background: var(--ink);
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 20px 80px;
      position: relative;
      overflow-x: hidden;
    }

    /* Respect reduced-motion: the decorative background/entrance animations
       are pure ornament. Ported from the home page, extended to every page
       that shares these classes — none of the four landing pages had this
       before. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .hero-eyebrow, .hero h1, .hero p, .hero-demo, .hero-cta, .hero-features {
        opacity: 1;
      }
    }

    /* ------------------------------------------------------------------ */
    /* Stars background                                                   */
    /* ------------------------------------------------------------------ */
    .stars {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .star {
      position: absolute;
      border-radius: 50%;
      background: white;
      animation: twinkle var(--d) var(--delay) infinite ease-in-out alternate;
    }
    @keyframes twinkle {
      from { opacity: var(--min-op); transform: scale(1); }
      to   { opacity: var(--max-op); transform: scale(1.4); }
    }

    /* ------------------------------------------------------------------ */
    /* Nebulae                                                            */
    /* ------------------------------------------------------------------ */
    .nebula {
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
    }
    .nebula-1 {
      width: 600px; height: 600px;
      top: -200px; left: -100px;
      background: radial-gradient(circle, rgba(124,77,255,0.12), transparent 70%);
      animation: drift 20s infinite alternate ease-in-out;
    }
    .nebula-2 {
      width: 500px; height: 500px;
      bottom: -150px; right: -100px;
      background: radial-gradient(circle, rgba(255,107,157,0.1), transparent 70%);
      animation: drift 25s infinite alternate-reverse ease-in-out;
    }
    .nebula-3 {
      width: 400px; height: 400px;
      top: 40%; left: 55%;
      background: radial-gradient(circle, rgba(240,192,96,0.05), transparent 70%);
      animation: drift 18s infinite alternate ease-in-out;
    }
    @keyframes drift {
      from { transform: translate(0, 0) scale(1); }
      to   { transform: translate(40px, 30px) scale(1.1); }
    }

    /* ------------------------------------------------------------------ */
    /* Layout                                                             */
    /* ------------------------------------------------------------------ */
    .container {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
    }

    /* ------------------------------------------------------------------ */
    /* Animations                                                         */
    /* ------------------------------------------------------------------ */
    @keyframes riseIn {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    @keyframes shimmer {
      from { left: -100%; }
      to   { left: 150%; }
    }

    /* ------------------------------------------------------------------ */
    /* Hero                                                               */
    /* ------------------------------------------------------------------ */
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 72px 0 56px;
    }

    .hero-eyebrow {
      display: inline-block;
      font-family: "DM Sans", sans-serif;
      font-weight: 300;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      border: 1px solid var(--accent-border);
      border-radius: 100px;
      padding: 7px 20px;
      margin-bottom: 2rem;
      opacity: 0;
      animation: riseIn 0.9s 0.1s forwards;
    }

    .hero h1 {
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-size: clamp(2.4rem, 5.6vw, 4.8rem);
      font-weight: 400;
      line-height: 1.1;
      color: var(--cream);
      margin-bottom: 1.5rem;
      opacity: 0;
      animation: riseIn 0.9s 0.25s forwards;
    }
    @keyframes gradient-shift {
      from { background-position: 100% 100%; }
      to   { background-position: 0% 0%; }
    }
    .hero h1 em {
      display: inline-block;
      font-style: italic;
      font-weight: 400;
      padding-bottom: 0.15em;
      line-height: 1.2;
      background: linear-gradient(
        135deg,
        #ff5fa2 0%, #eb8dff 15%, #7b6cff 30%,
        #9488ff 50%, #7b6cff 60%, #3cf2d1 75%, #bdff80 100%
      ) 100% 100% / 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: 3s cubic-bezier(.4, 0, .6, 1) infinite alternate gradient-shift;
    }

    .hero p {
      font-family: "DM Sans", sans-serif;
      font-weight: 300;
      font-size: 1.25rem;
      color: var(--text-dim);
      line-height: 1.8;
      max-width: 540px;
      margin: 0 auto 2.5rem;
      opacity: 0;
      animation: riseIn 0.9s 0.4s forwards;
    }

    /* Hero example-video button + lightbox */
    .hero-example-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      font-size: 1rem;
      color: var(--cream);
      background: rgba(124,77,255,0.08);
      border: 1px solid rgba(124,77,255,0.25);
      border-radius: 999px;
      padding: 0.6rem 1.3rem;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, transform 0.15s;
      opacity: 0;
      animation: riseIn 0.9s 0.55s forwards;
    }
    .hero-example-btn:hover {
      border-color: var(--purple);
      background: rgba(124,77,255,0.16);
      transform: translateY(-2px);
    }
    .hero-example-btn__play {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 50%;
      background: var(--purple);
      color: #fff;
      font-size: 0.55rem;
      padding-left: 2px;
    }
    .video-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      background: rgba(14,11,26,0.88);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }
    .video-modal.open {
      display: flex;
    }
    .video-modal__video {
      max-height: 80vh;
      width: auto;
      max-width: 92vw;
      border-radius: 14px;
      border: 1px solid rgba(124,77,255,0.25);
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .video-modal__close {
      position: absolute;
      top: 1.1rem;
      right: 1.3rem;
      width: 2.4rem;
      height: 2.4rem;
      border-radius: 50%;
      border: 1px solid rgba(124,77,255,0.3);
      background: rgba(255,255,255,0.06);
      color: var(--cream);
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .video-modal__close:hover {
      background: rgba(124,77,255,0.2);
      border-color: var(--purple);
    }

    .hero-scroll-hint {
      animation: riseIn 0.9s ease both;
      animation-delay: 0.55s;
      color: var(--text-dim);
      font-size: 1rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    /* ------------------------------------------------------------------ */
    /* Form card                                                          */
    /* ------------------------------------------------------------------ */
    .form-card {
      max-width: 600px;
      width: 100%;
      margin: 0 auto;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 28px;
      padding: 52px 44px;
      backdrop-filter: blur(20px);
      box-shadow: 0 0 80px rgba(124,77,255,0.08), 0 40px 80px rgba(0,0,0,0.4);
      margin-bottom: 0;
    }

    /* ------------------------------------------------------------------ */
    /* Card section blocks inside form-card                               */
    /* ------------------------------------------------------------------ */
    .card-section {
      margin-bottom: 2.5rem;
    }
    .card-section:last-child {
      margin-bottom: 0;
    }
    .card-section-divider {
      display: none;
    }
    .card-title {
      font-family: "DM Sans", sans-serif;
      font-size: 1.4rem;
      font-weight: 500;
      color: var(--cream);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* ------------------------------------------------------------------ */
    /* Form elements                                                      */
    /* ------------------------------------------------------------------ */
    .form-group {
      margin-bottom: 1.25rem;
    }
    .form-group:last-child {
      margin-bottom: 0;
    }
    /* When a field-row is the last element in a card-section, zero out
       all inner form-group margins so the grid row adds no phantom space. */
    .card-section > .field-row:last-child .form-group {
      margin-bottom: 0;
    }
    .form-group label {
      display: block;
      font-family: "DM Sans", sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--purple);
      margin-bottom: 8px;
    }
    .form-group input[type="text"],
    .form-group input[type="number"],
    .form-group input[type="email"],
    .form-group textarea {
      width: 100%;
      padding: 0.75rem 1rem;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(124,77,255,0.2);
      border-radius: 12px;
      color: var(--text);
      font-family: "DM Sans", sans-serif;
      font-size: 0.95rem;
      font-weight: 300;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .form-group input:focus,
    .form-group textarea:focus {
      outline: none;
      border-color: var(--purple);
      background: rgba(124,77,255,0.08);
      box-shadow: 0 0 0 3px rgba(124,77,255,0.12);
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder {
      color: rgba(232,224,255,0.25);
    }
    .form-group textarea {
      min-height: 80px;
      resize: vertical;
    }

    /* Custom select dropdown */
    .custom-select {
      position: relative;
      user-select: none;
    }
    .custom-select-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.75rem 1rem;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(124,77,255,0.2);
      border-radius: 12px;
      color: var(--text);
      font-family: "DM Sans", sans-serif;
      font-size: 0.95rem;
      font-weight: 300;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .custom-select:focus .custom-select-trigger,
    .custom-select.open .custom-select-trigger {
      outline: none;
      border-color: var(--purple);
      background: rgba(124,77,255,0.08);
      box-shadow: 0 0 0 3px rgba(124,77,255,0.12);
    }
    .custom-select-value {
      color: rgba(232,224,255,0.25);
    }
    .custom-select.has-value .custom-select-value {
      color: var(--text);
    }
    .custom-select-arrow {
      flex-shrink: 0;
      transition: transform 0.2s;
    }
    .custom-select.open .custom-select-arrow {
      transform: rotate(180deg);
    }
    .custom-select-options {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: #1a0a3a;
      border: 1px solid rgba(124,77,255,0.3);
      border-radius: 12px;
      overflow: hidden;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .custom-select.open .custom-select-options {
      display: block;
    }
    .custom-select-opt {
      padding: 0.75rem 1rem;
      color: var(--text);
      font-family: "DM Sans", sans-serif;
      font-size: 0.95rem;
      font-weight: 300;
      cursor: pointer;
      transition: background 0.15s;
    }
    .custom-select-opt:hover {
      background: rgba(124,77,255,0.15);
    }
    .custom-select-opt.selected {
      color: var(--purple);
    }

    /* Field row for 2-col layout */
    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }

    /* Required asterisk */
    .required::after {
      content: " *";
      color: var(--rose);
    }

    /* Optional label */
    .optional {
      font-weight: 300;
      font-size: 0.7rem;
      color: var(--text-dim);
      letter-spacing: 0.05em;
      text-transform: none;
    }

    /* ------------------------------------------------------------------ */
    /* Textarea character counter                                         */
    /* ------------------------------------------------------------------ */
    .form-group-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px;
    }
    .form-group-header label {
      margin-bottom: 0;
    }
    .textarea-counter {
      font-family: "DM Sans", sans-serif;
      font-size: 0.72rem;
      font-weight: 300;
      color: var(--text-dim);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .textarea-counter.over-limit {
      color: #ff7070;
    }

    /* ------------------------------------------------------------------ */
    /* 2-up achievement/answer grid (achievement, pep talk, custom)        */
    /* ------------------------------------------------------------------ */
    .achievement-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }
    .achievement-grid .form-group {
      margin-bottom: 0;
    }
    .achievement-grid .form-group textarea {
      min-height: 70px;
    }
    .achievement-grid .textarea-counter {
      text-align: right;
      margin-top: 3px;
    }

    /* ------------------------------------------------------------------ */
    /* Character selector                                                 */
    /* ------------------------------------------------------------------ */
    .character-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }
    /* Base chrome + hover/selected states shared by every selectable card
       (character/video-type/tier) — each keeps only its own padding/layout
       below. */
    .character-card, .video-type-card, .tier-card {
      position: relative;
      border: 1px solid rgba(124,77,255,0.2);
      border-radius: 12px;
      background: var(--card-bg);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
      text-align: center;
    }
    .character-card:hover,
    .video-type-card:hover:not(.coming-soon),
    .tier-card:hover {
      border-color: var(--purple);
      background: rgba(124,77,255,0.1);
      color: var(--text);
      transform: translateY(-2px);
    }
    .character-card.selected,
    .video-type-card.selected,
    .tier-card.selected,
    .lang-pill.selected {
      border-color: var(--purple);
      background: rgba(124,77,255,0.18);
      color: var(--cream);
      box-shadow: 0 0 20px rgba(124,77,255,0.2);
    }
    .character-card {
      padding: 1rem 0.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
    }
    .character-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 10px;
      object-fit: cover;
    }
    .character-card .char-name {
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      font-size: 1rem;
      color: var(--cream);
    }
    .character-card .char-tagline {
      font-size: 0.9rem;
      color: var(--text-dim);
      line-height: 1.4;
    }
    .character-card.coming-soon {
      opacity: 0.55;
      cursor: not-allowed;
    }
    .character-card.coming-soon:hover {
      border-color: rgba(124,77,255,0.2);
      background: rgba(255,255,255,0.04);
      color: inherit;
      transform: none;
      box-shadow: none;
    }
    .character-card.coming-soon .coming-soon-thumb {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(124,77,255,0.18), rgba(255,255,255,0.04));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
    }

    /* ------------------------------------------------------------------ */
    /* Video type selector                                                */
    /* ------------------------------------------------------------------ */
    .video-type-cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0.6rem;
    }
    .video-type-card {
      padding: 0.85rem 0.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3rem;
    }
    .video-type-card.coming-soon {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .video-type-card .vt-icon {
      font-size: 1.4rem;
      line-height: 1;
    }
    .video-type-card .vt-name {
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      font-size: 0.8rem;
      color: var(--cream);
      line-height: 1.2;
    }
    .video-type-card .vt-promise {
      font-family: "DM Sans", sans-serif;
      font-size: 0.7rem;
      color: var(--text-dim);
      line-height: 1.25;
      margin-top: 0.25rem;
    }
    .video-type-card .vt-badge {
      position: absolute;
      top: -8px;
      right: -8px;
      background: rgba(124,77,255,0.35);
      color: rgba(232,224,255,0.7);
      font-family: "DM Sans", sans-serif;
      font-size: 0.52rem;
      font-weight: 500;
      padding: 0.15rem 0.45rem;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }
    .video-type-card .vt-checkmark {
      position: absolute;
      top: 6px;
      right: 8px;
      font-size: 0.65rem;
      color: var(--purple);
      display: none;
    }
    .video-type-card.selected .vt-checkmark { display: block; }

    /* ------------------------------------------------------------------ */
    /* Gender pills                                                       */
    /* ------------------------------------------------------------------ */
    .pill-label {
      font-family: "DM Sans", sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--purple);
      margin-bottom: 8px;
    }
    .lang-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .lang-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.45rem 1rem;
      border: 1px solid rgba(124,77,255,0.2);
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      color: var(--text-dim);
      font-family: "DM Sans", sans-serif;
      font-size: 0.85rem;
      font-weight: 300;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, color 0.2s;
    }
    .lang-pill:hover {
      border-color: var(--purple);
      color: var(--text);
      background: rgba(124,77,255,0.1);
    }
    /* .lang-pill.selected is grouped with the card family's shared
       selected-state rule above. */

    /* ------------------------------------------------------------------ */
    /* Quality tier selector                                              */
    /* ------------------------------------------------------------------ */
    .tier-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }
    .tier-card {
      padding: 1.25rem 1rem;
    }
    .tier-card input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .tier-card .tier-emoji {
      font-size: 1.4rem;
      display: block;
      margin-bottom: 0.4rem;
    }
    .tier-card .tier-name {
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      font-size: 1rem;
      color: var(--cream);
      margin-bottom: 0.2rem;
    }
    .tier-card .tier-desc {
      font-size: 0.9rem;
      color: var(--text-dim);
      margin-bottom: 0.45rem;
      line-height: 1.4;
    }
    .tier-card .tier-price {
      font-family: "DM Sans", sans-serif;
      font-size: 1.5rem;
      font-weight: 500;
      color: var(--rose);
    }
    .tier-card .tier-badge {
      position: absolute;
      top: -9px;
      right: -9px;
      background: linear-gradient(135deg, #ff5fa2 0%, #eb8dff 15%, #7b6cff 30%, #9488ff 50%, #7b6cff 60%, #3cf2d1 75%, #bdff80 100%);
      color: #fff;
      font-family: "DM Sans", sans-serif;
      font-size: 0.62rem;
      font-weight: 500;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      display: none;
    }
    .tier-card.premium .tier-badge { display: inline-block; }

    /* ------------------------------------------------------------------ */
    /* Tier comparison table                                              */
    /* ------------------------------------------------------------------ */
    .tier-comparison-wrap {
      margin-top: 1rem;
    }
    .tier-comparison {
      width: 100%;
      border-collapse: collapse;
    }
    .tier-comparison th,
    .tier-comparison td {
      padding: 0.55rem 0.75rem;
      font-size: 0.9rem;
      border-bottom: 1px solid rgba(124,77,255,0.08);
    }
    .tier-comparison th {
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--purple);
      text-align: left;
    }
    .tier-comparison th:not(:first-child) { text-align: center; }
    .tier-comparison td {
      font-family: "DM Sans", sans-serif;
      font-weight: 300;
      color: var(--text-dim);
      text-align: left;
    }
    .tier-comparison td:not(:first-child) { text-align: center; }
    .tier-comparison .check { color: var(--cream); font-weight: 500; font-size: 1rem; }
    .tier-comparison tbody tr:nth-child(-n+2) .check { color: var(--text-dim); font-weight: 300; }
    .tier-comparison tbody tr:last-child td { border-bottom: none; }
    .tier-comparison .dash { color: var(--text-dim); }
    .tier-comparison .cell-highlight { color: var(--cream); font-weight: 500; }
    .tier-comparison tr.row-keepsake td { background: rgba(124,77,255,0.07); }
    .tier-comparison tr.row-keepsake .cell-highlight { color: var(--cream); font-weight: 500; }
    .tier-card.premium {
      border-color: rgba(124,77,255,0.45);
      background: rgba(124,77,255,0.07);
    }
    .tier-card.premium::before {
      content: "";
      position: absolute; inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      pointer-events: none;
    }

    /* ------------------------------------------------------------------ */
    /* Preview result                                                     */
    /* ------------------------------------------------------------------ */
    .preview-result {
      margin-top: 1.75rem;
      padding-top: 1.75rem;
      border-top: 1px solid rgba(124,77,255,0.12);
    }
    .preview-achievement-line {
      font-family: "DM Sans", sans-serif;
      font-size: 1rem;
      color: var(--rose);
      text-align: center;
      margin-bottom: 1.25rem;
    }
    .btn-spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      flex-shrink: 0;
    }
    .preview-script-box {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(124,77,255,0.15);
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 0.4rem;
      font-family: "DM Sans", sans-serif;
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.7;
      color: var(--text-dim);
      width: 100%;
      resize: vertical;
    }
    .preview-word-count {
      font-family: "DM Sans", sans-serif;
      font-size: 0.75rem;
      font-weight: 300;
      color: var(--text-dim);
      text-align: right;
      margin-bottom: 1rem;
    }

    /* ------------------------------------------------------------------ */
    /* Buttons                                                            */
    /* ------------------------------------------------------------------ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.8rem 1.5rem;
      border: none;
      border-radius: 12px;
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      font-size: 1rem;
      cursor: pointer;
      transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
      width: 100%;
      text-decoration: none;
      position: relative;
      overflow: hidden;
    }
    .btn:hover:not(:disabled) { transform: translateY(-2px); }
    .btn:active:not(:disabled) { transform: translateY(0); }
    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn-magic {
      background: linear-gradient(135deg, #ff5fa2 0%, #eb8dff 15%, #7b6cff 30%, #9488ff 50%, #7b6cff 60%, #3cf2d1 75%, #bdff80 100%);
      color: #fff;
      padding: 18px;
      border-radius: 14px;
      letter-spacing: 0.05em;
      box-shadow: 0 8px 32px rgba(124,77,255,0.35);
    }
    .btn-magic:hover:not(:disabled) {
      box-shadow: 0 12px 40px rgba(124,77,255,0.5);
    }
    .btn-magic::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
      transform: skewX(-20deg);
    }
    .btn-magic:hover:not(:disabled)::after {
      animation: shimmer 0.6s ease forwards;
    }

    .btn-download {
      background: linear-gradient(135deg, #ff5fa2 0%, #eb8dff 15%, #7b6cff 30%, #9488ff 50%, #7b6cff 60%, #3cf2d1 75%, #bdff80 100%);
      color: #fff;
      font-weight: 500;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(124,77,255,0.35);
    }
    .btn-download:hover:not(:disabled) {
      box-shadow: 0 12px 40px rgba(124,77,255,0.5);
    }

    .btn-ghost {
      background: transparent;
      border: 1px solid var(--card-border);
      color: var(--text-dim);
      padding-top: 18px;
      padding-bottom: 18px;
    }
    .btn-ghost:hover:not(:disabled) {
      border-color: var(--purple);
      color: var(--text);
    }

    .btn-preview {
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--card-border);
      color: var(--text-dim);
      padding-top: 18px;
      padding-bottom: 18px;
    }
    .btn-preview:hover:not(:disabled) {
      border-color: var(--purple);
      color: var(--text);
      background: rgba(124,77,255,0.08);
    }

    .btn-row {
      display: flex;
      gap: 0.75rem;
      margin-top: 1rem;
    }
    .btn-row .btn { flex: 1; }

    /* Wrapper for the disabled Create Video button — enables CSS tooltip */
    .btn-tooltip-wrap {
      flex: 1;
      position: relative;
      display: flex;
    }
    .btn-tooltip-wrap .btn {
      width: 100%;
    }
    .btn-tooltip-wrap::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(14,11,26,0.92);
      border: 1px solid rgba(124,77,255,0.3);
      color: var(--text-dim);
      padding: 0.3rem 0.75rem;
      border-radius: 8px;
      font-family: "DM Sans", sans-serif;
      font-size: 0.75rem;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .btn-tooltip-wrap:hover::after {
      opacity: 1;
    }

    /* ------------------------------------------------------------------ */
    /* Generating state                                                   */
    /* ------------------------------------------------------------------ */
    .generating-section {
      text-align: center;
      padding: 5rem 2rem;
    }
    .spinner {
      width: 48px;
      height: 48px;
      border: 4px solid rgba(124,77,255,0.15);
      border-top-color: var(--purple);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 1.5rem;
    }
    .generating-section .status-text {
      font-family: "DM Sans", sans-serif;
      font-size: 1.05rem;
      color: var(--text);
      margin-bottom: 0.5rem;
    }
    .generating-section .elapsed {
      font-family: "DM Sans", sans-serif;
      font-size: 0.85rem;
      color: var(--text-dim);
    }
    .generating-hint {
      font-family: "DM Sans", sans-serif;
      font-size: 0.82rem;
      color: var(--text-dim);
      line-height: 1.6;
      margin-top: 1.25rem;
    }

    /* Certificate card in result */
    .certificate-card {
      background: rgba(124,77,255,0.06);
      border: 1px solid var(--purple);
      border-radius: 14px;
      padding: 1.1rem 1.25rem;
      text-align: center;
    }
    .cert-label {
      font-family: "DM Sans", sans-serif;
      font-size: 0.65rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--cream);
      margin: 0 0 0.5rem;
    }
    .cert-subtitle {
      font-family: "DM Sans", sans-serif;
      font-size: 0.85rem;
      color: var(--text-dim);
      margin: 0 0 0.25rem;
    }
    .cert-title {
      font-family: "DM Sans", sans-serif;
      font-size: 1.4rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      margin: 0 0 0.5rem;
      display: inline-block;
      background: linear-gradient(
        135deg,
        #ff5fa2 0%, #eb8dff 15%, #7b6cff 30%,
        #9488ff 50%, #7b6cff 60%, #3cf2d1 75%, #bdff80 100%
      ) 100% 100% / 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: 3s cubic-bezier(.4, 0, .6, 1) infinite alternate gradient-shift;
    }
    .cert-password {
      font-family: "DM Sans", sans-serif;
      font-size: 0.82rem;
      font-style: italic;
      color: var(--rose);
      margin: 0 0 0.75rem;
    }
    .cert-achievement {
      font-family: "DM Sans", sans-serif;
      font-size: 0.82rem;
      font-style: italic;
      color: var(--rose);
      margin: 0 0 0.75rem;
    }
    .cert-download-link {
      color: #7b6cff;
      font-size: 0.82rem;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      font-family: inherit;
    }
    .cert-download-link:hover {
      opacity: 0.8;
    }
    .cert-btns {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ------------------------------------------------------------------ */
    /* Print: show only certificate, fills the page                       */
    /* ------------------------------------------------------------------ */
    .print-only-certificate { display: none; }
    @media print {
      html, body {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        height: 100%;
      }
      body > *:not(.print-only-certificate) {
        display: none !important;
      }
      .print-only-certificate {
        display: block !important;
        width: 100%;
        height: 100%;
        margin: 0; padding: 0;
        overflow: hidden;
      }
      .print-only-certificate img {
        display: block;
        width: 100%; height: 100%;
        object-fit: contain;
        object-position: top center;
      }
      @page { size: A4 landscape; margin: 0; }
    }

    /* ------------------------------------------------------------------ */
    /* Result section                                                     */
    /* ------------------------------------------------------------------ */
    .result-section {
      container-type: inline-size;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      text-align: center;
    }
    .result-section h2 {
      font-family: "DM Sans", sans-serif;
      font-size: 1.4rem;
      font-style: normal;
      font-weight: 300;
      color: var(--cream);
    }
    .result-section video {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 133cqi;
      margin: 0 auto;
      border-radius: 14px;
      border: 1px solid rgba(124,77,255,0.25);
    }
    .result-section video::-webkit-media-controls-picture-in-picture-button {
      display: none;
    }
    .result-section .btn-row {
      margin-top: 0;
    }

    /* Script box in result */
    .result-script-label {
      font-family: "DM Sans", sans-serif;
      font-size: 0.65rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--purple);
      margin-bottom: 0.4rem;
      text-align: left;
    }
    .result-script-box {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(124,77,255,0.15);
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 1.25rem;
      font-family: "DM Sans", sans-serif;
      font-size: 0.95rem;
      color: var(--text-dim);
      line-height: 1.7;
      text-align: left;
    }

    /* ------------------------------------------------------------------ */
    /* Error banner                                                       */
    /* ------------------------------------------------------------------ */
    .error-banner {
      display: none;
      background: rgba(255,80,80,0.1);
      border: 1px solid rgba(255,80,80,0.3);
      border-radius: 12px;
      padding: 0.85rem 1rem;
      margin-bottom: 1.25rem;
      color: #ff9999;
      font-family: "DM Sans", sans-serif;
      font-size: 1rem;
      font-weight: 300;
    }
    .error-banner.visible { display: block; }

    .form-group .field-error {
      font-size: 0.9rem;
      color: #ff7070;
      margin-top: 5px;
      display: none;
    }
    .form-group.has-error input,
    .form-group.has-error textarea,
    .form-group.has-error .custom-select-trigger {
      border-color: rgba(255, 80, 80, 0.6);
      box-shadow: 0 0 0 3px rgba(255, 80, 80, 0.12);
    }
    .form-group.has-error .field-error {
      display: block;
    }

    /* Pronouns group error */
    .pronouns-error {
      font-size: 0.9rem;
      color: #ff7070;
      margin-top: 5px;
      display: none;
    }
    .pronouns-error.visible { display: block; }

    /* ------------------------------------------------------------------ */
    /* Confirmation section                                               */
    /* ------------------------------------------------------------------ */
    .confirmation-section {
      text-align: center;
      padding: 4rem 2rem;
    }
    .confirmation-section .confirm-icon {
      font-size: 3.5rem;
      margin-bottom: 1.25rem;
    }
    .confirmation-section h2 {
      font-family: "DM Sans", sans-serif;
      font-size: 1.4rem;
      font-weight: 500;
      color: var(--cream);
      margin-bottom: 1rem;
    }
    .confirmation-section .confirm-email {
      font-family: "DM Sans", sans-serif;
      font-size: 1rem;
      color: var(--text-dim);
      margin-bottom: 0.5rem;
    }
    .confirmation-section .confirm-hint {
      font-family: "DM Sans", sans-serif;
      font-size: 0.85rem;
      color: var(--text-dim);
      margin-bottom: 2rem;
    }

    /* ------------------------------------------------------------------ */
    /* Section visibility                                                 */
    /* ------------------------------------------------------------------ */
    .section { display: none; }
    .section.active { display: block; }

    /* ------------------------------------------------------------------ */
    /* Features strip                                                     */
    /* ------------------------------------------------------------------ */
    .features-strip {
      max-width: 600px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 44px;
      padding-right: 44px;
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      justify-content: center;
      margin-top: 56px;
      margin-bottom: 56px;
    }
    .feature-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: "DM Sans", sans-serif;
      font-size: 0.9rem;
      color: var(--text-dim);
      font-weight: 300;
      line-height: 1.5;
    }
    .feature-item .feat-icon {
      font-size: 1rem;
    }

    /* ------------------------------------------------------------------ */
    /* Footer                                                             */
    /* ------------------------------------------------------------------ */
    .footer {
      max-width: 600px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      padding: 56px 44px 1rem;
      font-family: "DM Sans", sans-serif;
      font-size: 0.8rem;
      font-weight: 300;
      color: var(--text-dim);
      position: relative;
      z-index: 1;
    }
    .footer-links { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: center; margin-bottom: 1rem; }
    .footer-links a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
    .footer-links a:hover { color: var(--orchid); }
    .footer-sep { color: var(--text-dim); }
    /* Payment-method trust row — text-only brand chips (not scraped/hotlinked
       logo images) naming what Paddle actually processes for us, to reassure
       shoppers this is a real, properly-processed checkout. */
    .footer-trust {
      /* Fixed width, independent of .footer's own max-width — on doc-page
         pages .footer goes to max-width:none (720px, matching .wrap), which
         would otherwise stretch this row's border-top wider than on home/
         the landing pages. Pinning it here keeps the line the same width
         everywhere. */
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 1.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--card-border);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
    }
    .footer-trust-label {
      font-size: 0.72rem;
      color: var(--text-dim);
    }
    .footer-trust-label a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
    .footer-trust-label a:hover { color: var(--orchid); }
    .payment-badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
    }
    /* Real mark outlines (Simple Icons, CC0 project — the marks themselves
       are still each network's trademark, used here descriptively to show
       what Paddle actually processes), not typed-out brand names. White
       fill, no chip — sits directly on the dark footer instead of a light
       box, matching the "dark background" version of each mark. */
    .payment-badge {
      display: inline-block;
      width: 40px;
      height: 22px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 80% auto;
      opacity: 0.85;
    }
    .payment-badge--visa {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z'/></svg>");
    }
    .payment-badge--mastercard {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z'/></svg>");
    }
    .payment-badge--amex {
      background-size: 90% auto;
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M16.015 14.378c0-.32-.135-.496-.344-.622-.21-.12-.464-.135-.81-.135h-1.543v2.82h.675v-1.027h.72c.24 0 .39.024.478.125.12.13.104.38.104.55v.35h.66v-.555c-.002-.25-.017-.376-.108-.516-.06-.08-.18-.18-.33-.234l.02-.008c.18-.072.48-.297.48-.747zm-.87.407l-.028-.002c-.09.053-.195.058-.33.058h-.81v-.63h.824c.12 0 .24 0 .33.05.098.048.156.147.15.255 0 .12-.045.215-.134.27zM20.297 15.837H19v.6h1.304c.676 0 1.05-.278 1.05-.884 0-.28-.066-.448-.187-.582-.153-.133-.392-.193-.73-.207l-.376-.015c-.104 0-.18 0-.255-.03-.09-.03-.15-.105-.15-.21 0-.09.017-.166.09-.21.083-.046.177-.066.272-.06h1.23v-.602h-1.35c-.704 0-.958.437-.958.84 0 .9.776.855 1.407.87.104 0 .18.015.225.06.046.03.082.106.082.18 0 .077-.035.15-.08.18-.06.053-.15.07-.277.07zM0 0v10.096L.81 8.22h1.75l.225.464V8.22h2.043l.45 1.02.437-1.013h6.502c.295 0 .56.057.756.236v-.23h1.787v.23c.307-.17.686-.23 1.12-.23h2.606l.24.466v-.466h1.918l.254.465v-.466h1.858v3.948H20.87l-.36-.6v.585h-2.353l-.256-.63h-.583l-.27.614h-1.213c-.48 0-.84-.104-1.08-.24v.24h-2.89v-.884c0-.12-.03-.12-.105-.135h-.105v1.036H6.067v-.48l-.21.48H4.69l-.202-.48v.465H2.235l-.256-.624H1.4l-.256.624H0V24h23.786v-7.108c-.27.135-.613.18-.973.18H21.09v-.255c-.21.165-.57.255-.914.255H14.71v-.9c0-.12-.018-.12-.12-.12h-.075v1.022h-1.8v-1.066c-.298.136-.643.15-.928.136h-.214v.915h-2.18l-.54-.617-.57.6H4.742v-3.93h3.61l.518.602.554-.6h2.412c.28 0 .74.03.942.225v-.24h2.177c.202 0 .644.045.903.225v-.24h3.265v.24c.163-.164.508-.24.803-.24h1.89v.24c.194-.15.464-.24.84-.24h1.176V0H0zM21.156 14.955c.004.005.006.012.01.016.01.01.024.01.032.02l-.042-.035zM23.828 13.082h.065v.555h-.065zM23.865 15.03v-.005c-.03-.025-.046-.048-.075-.07-.15-.153-.39-.215-.764-.225l-.36-.012c-.12 0-.194-.007-.27-.03-.09-.03-.15-.105-.15-.21 0-.09.03-.16.09-.204.076-.045.15-.05.27-.05h1.223v-.588h-1.283c-.69 0-.96.437-.96.84 0 .9.78.855 1.41.87.104 0 .18.015.224.06.046.03.076.106.076.18 0 .07-.034.138-.09.18-.045.056-.136.07-.27.07h-1.288v.605h1.287c.42 0 .734-.118.9-.36h.03c.09-.134.135-.3.135-.523 0-.24-.045-.39-.135-.526zM18.597 14.208v-.583h-2.235V16.458h2.235v-.585h-1.57v-.57h1.533v-.584h-1.532v-.51M13.51 8.787h.685V11.6h-.684zM13.126 9.543l-.007.006c0-.314-.13-.5-.34-.624-.217-.125-.47-.135-.81-.135H10.43v2.82h.674v-1.034h.72c.24 0 .39.03.487.12.122.136.107.378.107.548v.354h.677v-.553c0-.25-.016-.375-.11-.516-.09-.107-.202-.19-.33-.237.172-.07.472-.3.472-.75zm-.855.396h-.015c-.09.054-.195.056-.33.056H11.1v-.623h.825c.12 0 .24.004.33.05.09.04.15.128.15.25s-.047.22-.134.266zM15.92 9.373h.632v-.6h-.644c-.464 0-.804.105-1.02.33-.286.3-.362.69-.362 1.11 0 .512.123.833.36 1.074.232.238.645.31.97.31h.78l.255-.627h1.39l.262.627h1.36v-2.11l1.272 2.11h.95l.002.002V8.786h-.684v1.963l-1.18-1.96h-1.02V11.4L18.11 8.744h-1.004l-.943 2.22h-.3c-.177 0-.362-.03-.468-.134-.125-.15-.186-.36-.186-.662 0-.285.08-.51.194-.63.133-.135.272-.165.516-.165zm1.668-.108l.464 1.118v.002h-.93l.466-1.12zM2.38 10.97l.254.628H4V9.393l.972 2.205h.584l.973-2.202.015 2.202h.69v-2.81H6.118l-.807 1.904-.876-1.905H3.343v2.663L2.205 8.787h-.997L.01 11.597h.72l.26-.626h1.39zm-.688-1.705l.46 1.118-.003.002h-.915l.457-1.12zM11.856 13.62H9.714l-.85.923-.825-.922H5.346v2.82H8l.855-.932.824.93h1.302v-.94h.838c.6 0 1.17-.164 1.17-.945l-.006-.003c0-.78-.598-.93-1.128-.93zM7.67 15.853l-.014-.002H6.02v-.557h1.47v-.574H6.02v-.51H7.7l.733.82-.764.824zm2.642.33l-1.03-1.147 1.03-1.108v2.253zm1.553-1.258h-.885v-.717h.885c.24 0 .42.098.42.344 0 .243-.15.372-.42.372zM9.967 9.373v-.586H7.73V11.6h2.237v-.58H8.4v-.564h1.527V9.88H8.4v-.507'/></svg>");
    }
    .payment-badge--paypal {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z'/></svg>");
    }
    .payment-badge--applepay {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M2.15 4.318a42.16 42.16 0 0 0-.454.003c-.15.005-.303.013-.452.04a1.44 1.44 0 0 0-1.06.772c-.07.138-.114.278-.14.43-.028.148-.037.3-.04.45A10.2 10.2 0 0 0 0 6.222v11.557c0 .07.002.138.003.207.004.15.013.303.04.452.027.15.072.291.142.429a1.436 1.436 0 0 0 .63.63c.138.07.278.115.43.142.148.027.3.036.45.04l.208.003h20.194l.207-.003c.15-.004.303-.013.452-.04.15-.027.291-.071.428-.141a1.432 1.432 0 0 0 .631-.631c.07-.138.115-.278.141-.43.027-.148.036-.3.04-.45.002-.07.003-.138.003-.208l.001-.246V6.221c0-.07-.002-.138-.004-.207a2.995 2.995 0 0 0-.04-.452 1.446 1.446 0 0 0-1.2-1.201 3.022 3.022 0 0 0-.452-.04 10.448 10.448 0 0 0-.453-.003zm0 .512h19.942c.066 0 .131.002.197.003.115.004.25.01.375.032.109.02.2.05.287.094a.927.927 0 0 1 .407.407.997.997 0 0 1 .094.288c.022.123.028.258.031.374.002.065.003.13.003.197v11.552c0 .065 0 .13-.003.196-.003.115-.009.25-.032.375a.927.927 0 0 1-.5.693 1.002 1.002 0 0 1-.286.094 2.598 2.598 0 0 1-.373.032l-.2.003H1.906c-.066 0-.133-.002-.196-.003a2.61 2.61 0 0 1-.375-.032c-.109-.02-.2-.05-.288-.094a.918.918 0 0 1-.406-.407 1.006 1.006 0 0 1-.094-.288 2.531 2.531 0 0 1-.032-.373 9.588 9.588 0 0 1-.002-.197V6.224c0-.065 0-.131.002-.197.004-.114.01-.248.032-.375.02-.108.05-.199.094-.287a.925.925 0 0 1 .407-.406 1.03 1.03 0 0 1 .287-.094c.125-.022.26-.029.375-.032.065-.002.131-.002.196-.003zm4.71 3.7c-.3.016-.668.199-.88.456-.191.22-.36.58-.316.918.338.03.675-.169.888-.418.205-.258.345-.603.308-.955zm2.207.42v5.493h.852v-1.877h1.18c1.078 0 1.835-.739 1.835-1.812 0-1.07-.742-1.805-1.808-1.805zm.852.719h.982c.739 0 1.161.396 1.161 1.089 0 .692-.422 1.092-1.164 1.092h-.979zm-3.154.3c-.45.01-.83.28-1.05.28-.235 0-.593-.264-.981-.257a1.446 1.446 0 0 0-1.23.747c-.527.908-.139 2.255.374 2.995.249.366.549.769.944.754.373-.014.52-.242.973-.242.454 0 .586.242.98.235.41-.007.667-.366.915-.733.286-.417.403-.82.41-.841-.007-.008-.79-.308-.797-1.209-.008-.754.615-1.113.644-1.135-.352-.52-.9-.578-1.09-.593a1.123 1.123 0 0 0-.092-.002zm8.204.397c-.99 0-1.606.533-1.652 1.256h.777c.072-.358.369-.586.845-.586.502 0 .803.266.803.711v.309l-1.097.064c-.951.054-1.488.484-1.488 1.184 0 .72.548 1.207 1.332 1.207.526 0 1.032-.281 1.264-.727h.019v.659h.788v-2.76c0-.803-.62-1.317-1.591-1.317zm1.94.072l1.446 4.009c0 .003-.073.24-.073.247-.125.41-.33.571-.711.571-.069 0-.206 0-.267-.015v.666c.06.011.267.019.335.019.83 0 1.226-.312 1.568-1.283l1.5-4.214h-.868l-1.012 3.259h-.015l-1.013-3.26zm-1.167 2.189v.316c0 .521-.45.917-1.024.917-.442 0-.731-.228-.731-.579 0-.342.278-.56.769-.593z'/></svg>");
    }
    .payment-badge--googlepay {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M3.963 7.235A3.963 3.963 0 00.422 9.419a3.963 3.963 0 000 3.559 3.963 3.963 0 003.541 2.184c1.07 0 1.97-.352 2.627-.957.748-.69 1.18-1.71 1.18-2.916a4.722 4.722 0 00-.07-.806H3.964v1.526h2.14a1.835 1.835 0 01-.79 1.205c-.356.241-.814.379-1.35.379-1.034 0-1.911-.697-2.225-1.636a2.375 2.375 0 010-1.517c.314-.94 1.191-1.636 2.225-1.636a2.152 2.152 0 011.52.594l1.132-1.13a3.808 3.808 0 00-2.652-1.033zm6.501.55v6.9h.886V11.89h1.465c.603 0 1.11-.196 1.522-.588a1.911 1.911 0 00.635-1.464 1.92 1.92 0 00-.635-1.456 2.125 2.125 0 00-1.522-.598zm2.427.85a1.156 1.156 0 01.823.365 1.176 1.176 0 010 1.686 1.171 1.171 0 01-.877.357H11.35V8.635h1.487a1.156 1.156 0 01.054 0zm4.124 1.175c-.842 0-1.477.308-1.907.925l.781.491c.288-.417.68-.626 1.175-.626a1.255 1.255 0 01.856.323 1.009 1.009 0 01.366.785v.202c-.34-.193-.774-.289-1.3-.289-.617 0-1.11.145-1.479.434-.37.288-.554.677-.554 1.165a1.476 1.476 0 00.525 1.156c.35.308.785.463 1.305.463.61 0 1.098-.27 1.465-.81h.038v.655h.848v-2.909c0-.61-.19-1.09-.568-1.44-.38-.35-.896-.525-1.551-.525zm2.263.154l1.946 4.422-1.098 2.38h.915L24 9.963h-.965l-1.368 3.391h-.02l-1.406-3.39zm-2.146 2.368c.494 0 .88.11 1.156.33 0 .372-.147.696-.44.973a1.413 1.413 0 01-.997.414 1.081 1.081 0 01-.69-.232.708.708 0 01-.293-.578c0-.257.12-.47.363-.647.24-.173.54-.26.9-.26Z'/></svg>");
    }

    /* Same width/padding as .footer, .form-card — was declared after the
       Responsive block below, so its mobile padding override there was
       dead: an equal-specificity rule later in source always wins,
       regardless of media query, leaving FAQ stuck at the desktop 44px
       padding (narrower usable width than the footer) on small screens. */
    .faq-section {
      max-width: 600px;
      width: 100%;
      margin: 56px auto 0;
      padding-left: 44px;
      padding-right: 44px;
    }

    /* ------------------------------------------------------------------ */
    /* Responsive                                                         */
    /* ------------------------------------------------------------------ */
    @media (max-width: 580px) {
      .video-type-cards { grid-template-columns: repeat(3, 1fr); }
      .form-card { padding: 32px 24px; }
      .features-strip { padding-left: 24px; padding-right: 24px; }
      .footer { padding: 56px 24px 1rem; }
      .field-row { grid-template-columns: 1fr; row-gap: 1.25rem; }
      /* row-gap already spaces the stacked fields; the group's own bottom
         margin on top of it made the gap double (40px). The row carries the
         spacing to whatever follows instead. */
      .field-row .form-group { margin-bottom: 0; }
      .field-row:not(:last-child) { margin-bottom: 1.25rem; }
      .achievement-grid { grid-template-columns: 1fr; }
      .hero h1 { font-size: 3rem; }
      .btn-row { flex-direction: column; }
      .btn-row .btn, #generateAgainBtn { padding: 18px; }
      .faq-section { padding-left: 24px; padding-right: 24px; }
    }
    @media (max-width: 480px) {
      .character-cards { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
      .tier-cards { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    }
    .guarantee-trust {
      margin: 10px 0 0;
      font-family: "DM Sans", sans-serif;
      font-size: 0.9rem;
      font-weight: 300;
      color: var(--text-dim);
      text-align: center;
    }
    .form-features {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 1.25rem;
      justify-content: center;
      margin-top: 2.5rem;
    }
    .form-features .feature-item { font-size: 0.9rem; }
    .faq-heading {
      font-family: "DM Sans", sans-serif;
      font-size: 1rem;
      font-weight: 500;
      color: var(--cream);
      text-align: center;
      margin-bottom: 14px;
    }
    .faq-item {
      border-top: 1px solid var(--card-border);
      padding: 14px 0;
    }
    .faq-question {
      font-family: "DM Sans", sans-serif;
      font-size: 0.9rem;
      font-weight: 300;
      color: var(--text-dim);
      cursor: pointer;
      list-style: none;
      user-select: none;
    }
    .faq-question::-webkit-details-marker { display: none; }
    .faq-question::after {
      content: " +";
      font-weight: 300;
    }
    details[open] .faq-question::after { content: " −"; }
    .faq-answer {
      margin: 10px 0 0;
      font-family: "DM Sans", sans-serif;
      font-size: 0.9rem;
      font-weight: 300;
      color: var(--text-dim);
      line-height: 1.6;
    }
    .faq-answer a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
    .faq-answer a:hover { color: var(--orchid); }

    /* ------------------------------------------------------------------ */
    /* Testimonial carousel (public/shared/testimonials-carousel.js) —      */
    /* one card visible at a time, between the hero and the form. No top   */
    /* padding of its own — .hero's existing 56px bottom padding already   */
    /* provides that gap; this only adds a matching 56px below, so the     */
    /* space above and below reads the same as .hero's own rhythm.         */
    /* ------------------------------------------------------------------ */
    .testimonial-carousel {
      max-width: 600px;
      width: 100%;
      margin: 0 auto;
      padding: 0 44px 56px;
    }
    /* Real horizontal scroller with snap — native touch/trackpad scrolling
       on mobile, not a custom touch-delta handler. JS scrolls it for the
       dots and the auto-advance timer; the visitor's own finger works too,
       for free, because it's just a scrollable element. */
    .testimonial-carousel-track {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .testimonial-carousel-track::-webkit-scrollbar { display: none; }
    .testimonial-carousel .testimonial-card {
      flex: 0 0 100%;
      scroll-snap-align: center;
    }
    .testimonial-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      margin-top: 1.25rem;
    }
    /* 2rem tap target around an 8px visual dot — comfortable to hit on mobile
       without the dots themselves looking oversized. */
    .testimonial-dot {
      width: 2rem;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
    }
    .testimonial-dot::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--card-border);
      transition: background 0.15s, transform 0.15s;
    }
    .testimonial-dot.active::before {
      background: var(--orchid);
      transform: scale(1.3);
    }
    @media (max-width: 580px) {
      .testimonial-carousel { padding-left: 24px; padding-right: 24px; }
    }

    /* ------------------------------------------------------------------ */
    /* Required vs optional grouping                                       */
    /* ------------------------------------------------------------------ */
    /* Splitting the form into "the bit you must fill in" and "the bit that
       makes it better" is purely presentational — no field was added or
       removed — but it cuts the perceived length of the form in half. */
    .card-note {
      font-size: 0.8rem;
      font-weight: 300;
      color: var(--text-dim);
      line-height: 1.5;
      margin: -0.35rem 0 1.1rem;
    }
    .card-title .card-optional {
      font-size: 0.72rem;
      font-weight: 300;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-left: 0.45rem;
    }

    /* ------------------------------------------------------------------ */
    /* Hero density                                                        */
    /* ------------------------------------------------------------------ */
    /* The logo moved out of the hero and into .site-header, so the 72px of
       top padding it used to need is now dead space pushing the demo below
       the fold. The demo is what explains a category nobody has seen before,
       so the hero gives up room to get it visible sooner. */
    /* site-header's own bottom padding now supplies the space above the
       hero content, so the hero itself no longer needs top padding here —
       this override just zeroes out the base rule's 72px. */
    .hero { padding-top: 0; }

    @media (max-width: 560px) {
      .hero { padding: 0 0 36px; }
      .hero h1 { margin-bottom: 1rem; }
      .hero p { font-size: 1.05rem; line-height: 1.65; margin-bottom: 1.5rem; }
      .hero-demo__video { width: min(240px, 56vw); }
    }

    /* ------------------------------------------------------------------ */
    /* Generating / confirmation / result views: the same 48px rhythm as the */
    /* header — nav to panel (hero padding is zeroed in showSection) and    */
    /* panel to the footer links. 32px on phones, like the header.          */
    /* ------------------------------------------------------------------ */
    body:has(.section.active:not(#formSection)) .footer { padding-top: 48px; }
    @media (max-width: 580px) {
      body:has(.section.active:not(#formSection)) .footer { padding-top: 32px; }
    }

    /* ------------------------------------------------------------------ */
    /* Site header + nav (links rendered by /sparkle-products.js)          */
    /* ------------------------------------------------------------------ */
    .site-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* The three visible gaps — screen edge to logo, logo to nav text, nav
         text to the eyebrow/panel below — are all 48px. The box values are
         smaller than 48 to cancel space that is invisible: the logo file's
         transparent bottom edge (~5px) and the nav pill's own padding and
         line box (~10px on each side of the text). */
      gap: 32px;
      padding: 48px 0 38px;
      position: relative;
      z-index: 1;
    }
    .site-logo img { display: block; width: 66px; height: auto; }
    .site-nav {
      display: flex;
      justify-content: center;
      gap: 0.35rem;
      flex-wrap: wrap;
      min-height: 2.1rem;
      align-items: center;
    }
    .site-nav__link {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-dim);
      text-decoration: none;
      padding: 0.4rem 0.75rem;
      border-radius: 999px;
      transition: color 0.2s, background 0.2s;
    }
    .site-nav__link:hover { color: var(--cream); background: rgba(124,77,255,0.14); }
    .site-nav__link.is-current { color: var(--cream); background: rgba(124,77,255,0.2); }

    /* ------------------------------------------------------------------ */
    /* Language switcher (rendered by /language-switcher.js)               */
    /* Header: flag button pinned to the top-right corner of .site-header, */
    /* level with the logo — absolute, so the centred logo/nav column and  */
    /* its tuned gaps don't move. Footer: a native <select>.               */
    /* ------------------------------------------------------------------ */
    .site-header .lang-switcher {
      position: absolute;
      top: 54px;
      right: 0;
    }
    .lang-switcher { position: relative; z-index: 20; }
    .lang-switcher__button {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      min-height: 44px;
      min-width: 44px;
      padding: 0 0.7rem;
      border-radius: 999px;
      border: 1px solid var(--card-border);
      background: var(--card-bg);
      color: var(--text);
      font: inherit;
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .lang-switcher__button:hover,
    .lang-switcher__button[aria-expanded="true"] { border-color: var(--accent-border); background: rgba(255,255,255,0.08); }
    .lang-switcher__button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .lang-switcher__flag {
      display: block;
      width: 20px;
      height: 14px;
      object-fit: cover;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
      flex-shrink: 0;
    }
    .lang-switcher__caret { font-size: 0.7rem; color: var(--text-dim); }
    .lang-switcher__menu {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      width: min(240px, calc(100vw - 32px));
      max-height: min(360px, 60vh);
      overflow-y: auto;
      margin: 0;
      padding: 6px;
      list-style: none;
      border-radius: 14px;
      border: 1px solid var(--card-border);
      background: var(--ink2);
      box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    }
    .lang-switcher__menu[hidden] { display: none; }
    .lang-switcher__menu [role="option"] {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      min-height: 44px;
      padding: 0 0.75rem;
      border-radius: 10px;
      color: var(--text);
      font-size: 0.9rem;
      cursor: pointer;
    }
    .lang-switcher__menu [role="option"]:hover,
    .lang-switcher__menu [role="option"]:focus { background: rgba(255,255,255,0.08); outline: none; }
    .lang-switcher__menu [aria-selected="true"] { color: var(--cream); font-weight: 500; }
    .lang-switcher__name { flex: 1; }
    .lang-switcher__check { color: var(--accent); }
    .lang-select {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
      color: var(--text-dim);
      font-size: 0.85rem;
    }
    .lang-select select {
      min-height: 36px;
      padding: 0 0.6rem;
      border-radius: 8px;
      border: 1px solid var(--card-border);
      background: var(--ink2);
      color: var(--text);
      font: inherit;
    }

    /* ------------------------------------------------------------------ */
    /* Hero demo — inline looping preview (see /sparkle-demo.js)           */
    /* ------------------------------------------------------------------ */
    .hero-demo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.9rem;
      margin: 0 auto;
    }
    .hero-demo__video {
      /* The width/height attributes plus this ratio reserve the box before
         the poster loads — without both, the poster shifts everything below. */
      width: min(272px, 60vw);
      aspect-ratio: 9 / 16;
      height: auto;
      display: block;
      object-fit: cover;
      border-radius: 20px;
      background: var(--ink2);
      border: 1px solid rgba(124,77,255,0.25);
      box-shadow: 0 18px 50px rgba(0,0,0,0.45);
      cursor: pointer;
    }
    .hero-demo__hint {
      font-size: 0.78rem;
      color: var(--text-dim);
      display: none;
    }
    /* Autoplay refused (iOS Low Power Mode, Data Saver, reduced motion):
       say so, rather than leaving a still poster looking broken. */
    .hero-demo--needs-tap .hero-demo__hint { display: block; }

    /* ------------------------------------------------------------------ */
    /* Use-case strip — "that's my situation" at a glance                  */
    /* ------------------------------------------------------------------ */
    .use-case-strip {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      list-style: none;
      margin: 0 auto 2rem;
      padding: 0;
      max-width: 520px;
    }
    .use-case-strip li {
      font-size: 0.82rem;
      color: var(--text-dim);
      border: 1px solid var(--card-border);
      border-radius: 999px;
      padding: 0.35rem 0.85rem;
      white-space: nowrap;
    }
    /* This page's .hero p has a 2.5rem bottom margin (8px more than home's
       2rem) for its own reasons unrelated to the strip, so this pulls the
       strip back up by that difference — keeping the gap above it at the
       same 32px as home — rather than changing the shared .hero p rule. */
    /* Only above the mobile breakpoint: at 560px and below, .hero p's
       margin-bottom is 1.5rem there too (see the media query below) — same
       as home's — so no compensation is needed at that width. */
    @media (min-width: 561px) {
      .hero p + .use-case-strip { margin-top: -8px; }
      /* Pills-to-video gap matches the 56px between the video's button and
         the testimonial below it (.hero's bottom padding). */
      .use-case-strip { margin-bottom: 56px; }
    }

    /* ------------------------------------------------------------------ */
    /* Secondary cross-sell link (replaces the in-form video-type grid)    */
    /* ------------------------------------------------------------------ */
    .see-all-link {
      display: block;
      margin-top: 1.25rem;
      text-align: center;
      font-size: 0.85rem;
      color: var(--text-dim);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    .see-all-link:hover { color: var(--orchid); }

    /* ------------------------------------------------------------------ */
    /* Collapsed Standard/Premium comparison                              */
    /* ------------------------------------------------------------------ */
    .tier-compare { margin-top: 1.25rem; }
    .tier-compare > summary {
      font-family: "DM Sans", sans-serif;
      font-size: 0.85rem;
      font-weight: 300;
      color: var(--text-dim);
      cursor: pointer;
      list-style: none;
      user-select: none;
      text-align: center;
    }
    .tier-compare > summary::-webkit-details-marker { display: none; }
    .tier-compare > summary::after { content: " +"; }
    .tier-compare[open] > summary::after { content: " −"; }
    .tier-compare > summary:hover { color: var(--cream); }
    .tier-compare .tier-comparison-wrap { margin-top: 1rem; }

    @media (max-width: 560px) {
      /* Logo is already halved and centered at every width, so mobile only
         needs a smaller version of the same top/bottom rhythm — no separate
         size/scroll rules. */
      /* Phones use the same gaps as desktop (measured between element boxes):
         screen->logo 48, logo->nav 32, nav->eyebrow 38, eyebrow->h1 32,
         h1->paragraph 24, paragraph->chips 32. */
      /* Phones: screen->logo 40, logo->nav 30, nav->eyebrow 36. */
      .site-header { padding: 40px 0 36px; gap: 30px; }
      .site-header .lang-switcher { top: 46px; }
      /* Hero: eyebrow->h1 24, h1->paragraph 16, paragraph->chips 24, chips->video 40. */
      .hero-eyebrow { margin-bottom: 24px; }
      .hero h1 { margin-bottom: 16px; }
      .hero p { margin-bottom: 24px; }
      .use-case-strip { margin-bottom: 40px; }
      /* Video button to testimonials: 36px -> 54px (+50%). */
      .hero { padding-bottom: 54px; }
    }

    /* ==================================================================== */
    /* Doc pages (privacy, terms, refunds, contact, pricing, about) —        */
    /* opt-in via <body class="doc-page">                                   */
    /* ==================================================================== */
    body.doc-page { display: block; font-weight: 300; }

    .doc-page .wrap {
      max-width: 720px;
      margin: 0 auto;
    }

    .doc-page .site-header {
      padding: 2rem 0 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
      border-bottom: 1px solid var(--card-border);
      margin-bottom: 3rem;
    }

    .doc-page .site-logo {
      text-decoration: none;
    }
    .doc-page .site-logo img { display: block; width: 66px; height: auto; }

    /* Pill link, matching .site-nav__link on the homepage's video-type nav. */
    .doc-page .back-link {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--text-dim);
      text-decoration: none;
      padding: 0.4rem 0.75rem;
      border-radius: 999px;
      transition: color 0.2s, background 0.2s;
    }
    .doc-page .back-link:hover { color: var(--text); background: rgba(124,77,255,0.14); }

    /* Doc-page content */
    .doc-page .legal-header {
      margin-bottom: 2.5rem;
    }
    .doc-page .legal-header h1 {
      font-size: 2rem;
      font-weight: 500;
      letter-spacing: -0.02em;
      margin-bottom: 0.5rem;
      color: var(--text);
    }
    /* Optional subtitle under the h1 (about, pricing). */
    .doc-page .legal-header p {
      font-size: 0.9rem;
      color: var(--text-dim);
    }
    .doc-page .legal-date {
      font-size: 0.82rem;
      color: var(--text-dim);
    }

    /* Same color/size as .pricing-block h2 (pricing's section headers live
       outside .legal-body, so it needs its own copy of this rule — kept in
       sync by hand). Not var(--orchid): that's the link color, and a
       section heading shouldn't read as a link. */
    .doc-page .legal-body h2 {
      font-size: 1.3rem;
      font-weight: 500;
      color: var(--text);
      margin: 2.5rem 0 0.75rem;
    }
    .doc-page .legal-body h3 {
      font-size: 0.95rem;
      font-weight: 500;
      margin: 1.5rem 0 0.5rem;
      color: var(--text);
    }
    .doc-page .legal-body p {
      font-size: 0.9rem;
      line-height: 1.75;
      color: var(--text-dim);
      margin-bottom: 0.9rem;
    }
    .doc-page .legal-body ul {
      margin: 0.5rem 0 1rem 1.4rem;
    }
    .doc-page .legal-body li {
      font-size: 0.9rem;
      line-height: 1.7;
      color: var(--text-dim);
      margin-bottom: 0.3rem;
    }
    .doc-page .legal-body strong {
      color: var(--text-strong);
      font-weight: 500;
    }
    .doc-page .legal-body a {
      color: var(--orchid);
      text-underline-offset: 2px;
    }

    /* Footer — inherits text-align, font-weight, color and font-family from
       the app .footer rule above; only the properties that differ from the
       original legal CSS are overridden here. Higher specificity (0,2,0 vs
       0,1,0) beats both the base .footer rule and its 580px override, so
       source order doesn't matter. .footer-links needs no override here:
       its margin-bottom now matches the base rule on every page. */
    .doc-page .footer {
      max-width: none;
      padding: 2.5rem 0 1rem;
      border-top: 1px solid var(--card-border);
      margin-top: 4rem;
    }

    /* ==================================================================== */
    /* Home page (/) — product chooser, testimonials, how-it-works           */
    /* ==================================================================== */
    .hero-cta {
      max-width: 340px;
      opacity: 0;
      animation: riseIn 0.9s 0.7s forwards;
    }
    /* No margin-top of its own: the trust-badge row inside it (.form-features)
       already carries the shared 2.5rem gap used on every order form, so the
       CTA-to-badges distance matches everywhere. */
    .hero-features {
      opacity: 0;
      animation: riseIn 0.9s 0.8s forwards;
    }

    .chooser { padding: 8px 0 16px; scroll-margin-top: 20px; }
    .section-heading {
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-size: clamp(1.9rem, 4vw, 2.8rem);
      font-weight: 400;
      color: var(--cream);
      text-align: center;
      margin-bottom: 2rem;
    }
    .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    /* A new card is a copy-pasted <a class="product-card"> block — the grid
       reflows on its own. .product-card--featured promotes one card to a
       full-width band above the rest with no other markup/layout change. */
    .product-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 0.5rem;
      padding: 1.6rem 1.5rem;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
      text-decoration: none;
      color: inherit;
      transition: transform 0.15s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
    }
    .product-card[href]:hover {
      transform: translateY(-3px);
      border-color: var(--purple);
      background: rgba(124,77,255,0.09);
      box-shadow: 0 14px 36px rgba(0,0,0,0.35);
    }
    .pc-icon { font-size: 2rem; line-height: 1; }
    /* Sans-serif, same weight/size as .card-title (the form section
       headers) rather than the display serif page-level heading — a card's
       own heading reads as form-style, not hero-style. */
    .pc-headline {
      font-family: "DM Sans", sans-serif;
      font-size: 1.4rem;
      font-weight: 500;
      color: var(--cream);
      line-height: 1.25;
    }
    /* Matches .card-note (the small print under a form section title). */
    .pc-promise {
      font-size: 0.85rem;
      font-weight: 300;
      color: var(--text-dim);
      line-height: 1.6;
      flex-grow: 1;
    }
    .pc-price {
      font-size: 0.85rem;
      color: var(--text-dim);
      margin-top: 0.25rem;
    }
    .pc-price strong { color: var(--cream); font-weight: 500; }
    .pc-cta {
      margin-top: 0.4rem;
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--orchid);
    }
    .product-card[href]:hover .pc-cta { color: var(--rose); }
    /* No page behind it yet: plain div, not a link — CTA dims to read as
       "not yet clickable" (the [href]:hover rules above are already inert
       for a card with no href, for free). */
    .pc-cta--soon { color: var(--text-dim); }
    .pc-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-dim);
      border: 1px solid var(--card-border);
      border-radius: 999px;
      padding: 3px 10px;
    }
    .product-card--featured {
      grid-column: 1 / -1;
      order: -1;
      padding: 2.1rem 2rem;
      border-color: var(--rose);
      background: linear-gradient(135deg, rgba(255,95,162,0.12), rgba(124,77,255,0.12));
    }
    .product-card--featured .pc-icon { font-size: 3rem; }
    .product-card--featured .pc-headline { font-size: 2rem; }

    /* Top padding matches .steps's 64px (plus .chooser's 16px bottom
       padding = same 72px gap above both section headings). */
    .testimonials { padding: 56px 0 8px; }
    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
    /* Same neutral card chrome as .product-card, above — the "What's the
       moment?" and "What parents are saying" grids read as one system. */
    .testimonial-card {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      padding: 1.6rem 1.5rem;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 18px;
    }
    /* Decorative opening quote — italic Cormorant Garamond so it actually
       reads as a quotation mark, at 2x the size of plain body text. */
    .testimonial-quote::before {
      content: "\201C";
      display: block;
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-size: 3rem;
      font-weight: 400;
      line-height: 0.6;
      color: var(--purple);
      margin-bottom: 0.4rem;
    }
    /* Text matches .card-note; author matches .card-title. */
    .testimonial-quote {
      font-size: 0.9rem;
      font-weight: 300;
      color: var(--text-dim);
      line-height: 1.65;
      flex-grow: 1;
    }
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-family: "DM Sans", sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--cream);
    }
    /* Initial avatar, not a photo — no stock/AI face stands in for a real
       customer. A different accent color per card (cycling the palette
       below) still gives each quote its own identity at a glance. */
    .testimonial-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.2rem;
      height: 2.2rem;
      flex-shrink: 0;
      border-radius: 50%;
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-size: 1.05rem;
      font-weight: 400;
      color: var(--ink);
      background: var(--rose);
    }
    .testimonial-card:nth-of-type(2) .testimonial-avatar { background: var(--mint); }
    .testimonial-card:nth-of-type(3) .testimonial-avatar { background: var(--lime); }
    .testimonial-card:nth-of-type(4) .testimonial-avatar { background: var(--orchid); }
    .testimonial-card:nth-of-type(5) .testimonial-avatar { background: var(--lilac); }
    .testimonial-card:nth-of-type(6) .testimonial-avatar { background: var(--purple); }

    /* Top padding matches .testimonials's 56px + its own 8px bottom
       padding = same 72px gap above the "How it works" heading. */
    .steps { padding: 64px 0 8px; }
    /* Small speed callout under the heading — the whole point of this
       section is "this is fast", so say it in plain words too, not just
       via the per-step time chips below. */
    .steps-tagline {
      text-align: center;
      font-family: "DM Sans", sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--orchid);
      margin: -1.25rem 0 2rem;
    }
    .steps-list {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      list-style: none;
    }
    /* Connecting path behind the circles — turns 4 separate items into one
       visible sequence. Centers line up with equal grid columns (12.5%,
       37.5%, 62.5%, 87.5%), so a line from 12.5% to 87.5% touches every
       circle's center. */
    .steps-list::before {
      content: "";
      position: absolute;
      top: 1.65rem;
      left: 12.5%;
      right: 12.5%;
      height: 2px;
      /* Same brand gradient as .hero h1 em / .btn-magic. */
      background: linear-gradient(
        90deg,
        #ff5fa2 0%, #eb8dff 15%, #7b6cff 30%,
        #9488ff 50%, #7b6cff 60%, #3cf2d1 75%, #bdff80 100%
      );
      opacity: 0.35;
      z-index: 0;
    }
    .steps-list li {
      position: relative;
      z-index: 1;
      text-align: center;
      font-size: 0.92rem;
      color: var(--text-dim);
      line-height: 1.6;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .step-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.3rem;
      height: 3.3rem;
      margin: 0 auto 0.75rem;
      border-radius: 50%;
      /* Gradient ring using the same brand gradient as .hero h1 em /
         .btn-magic — two background layers, an opaque inner fill
         (padding-box, so the connecting line can't show through) plus the
         gradient painted out to the border (border-box). */
      border: 3px solid transparent;
      background:
        linear-gradient(var(--ink), var(--ink)) padding-box,
        linear-gradient(
          135deg,
          #ff5fa2 0%, #eb8dff 15%, #7b6cff 30%,
          #9488ff 50%, #7b6cff 60%, #3cf2d1 75%, #bdff80 100%
        ) border-box;
      box-shadow: 0 0 0 6px var(--ink), 0 0 22px rgba(124,77,255,0.35);
      font-size: 1.5rem;
      line-height: 1;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .steps-list li:hover .step-circle {
      transform: translateY(-3px) scale(1.06);
      box-shadow: 0 0 0 6px var(--ink), 0 0 26px rgba(124,77,255,0.55);
    }
    .step-title {
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      color: var(--cream);
    }
    .step-time {
      font-family: "DM Sans", sans-serif;
      font-size: 0.72rem;
      font-weight: 300;
      color: var(--orchid);
      margin-top: 0.2rem;
    }

    @media (max-width: 720px) {
      .testimonial-grid { grid-template-columns: 1fr; }
      .steps-list { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; }
      .steps-list::before { display: none; }
    }
    @media (max-width: 560px) {
      .product-grid { grid-template-columns: 1fr; }
    }

    /* ==================================================================== */
    /* About page (/about)                                                  */
    /* ==================================================================== */
    .about-portrait {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      margin: 0 auto 2.5rem;
    }
    .about-portrait img,
    .about-portrait__placeholder {
      width: 132px;
      height: 132px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid var(--card-border);
      box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    }
    .about-portrait figcaption {
      font-size: 0.8rem;
      color: var(--text-dim);
      text-align: center;
    }
    .about-photo {
      display: block;
      width: 100%;
      max-width: 420px;
      margin: 1.25rem auto 1.5rem;
      border-radius: 14px;
      border: 1px solid var(--card-border);
      box-shadow: 0 12px 32px rgba(0,0,0,0.35);
    }
    /* Short stacked lines ("A birthday wish." / …) — same paragraph style,
       tighter rhythm, no bullets: these read as a beat, not a list. */
    .about-beats p { margin-bottom: 0.3rem; }

    /* ==================================================================== */
    /* Contact page (/contact)                                              */
    /* ==================================================================== */
    .contact-form {
      margin-top: 2rem;
    }
    /* Contact's fields use the shared .form-group/.form-group label/.optional/
       input+textarea styling from the order forms above — same uppercase
       purple labels, same input chrome — so the form reads as one system.
       The submit button uses .btn.btn-magic directly in markup for the same
       reason. Only a content-driven exception stays here: a taller message
       box, since the message is the point of this form. */
    .contact-form .form-group textarea {
      min-height: 120px;
    }
    /* Contact's simpler single-pass validation always reserves this line's
       space and just sets its text (no .has-error toggle like the order
       forms), so it needs its own always-visible display — restyled to
       match the shared .field-error color/size for visual consistency. */
    .contact-form .form-group .field-error {
      display: block;
      font-size: 0.9rem;
      color: #ff7070;
      margin-top: 5px;
      min-height: 1.2em;
    }
    .form-status {
      margin-top: 1rem;
      font-size: 0.85rem;
    }
    .form-status.success { color: #7fe0b0; }
    .form-status.error { color: var(--rose); }
    .form-divider {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: var(--text-dim);
      font-size: 0.8rem;
      margin: 2rem 0;
    }
    .form-divider::before,
    .form-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--card-border);
    }

    /* ==================================================================== */
    /* Pricing page (/pricing)                                              */
    /* ==================================================================== */
    /* Scannable summary — static figures (this page has no JS and never
       reads /api/pricing), so they must be edited alongside
       config/pricing.js. */
    .price-summary-wrap { overflow-x: auto; margin: 0 0 8px; }
    .price-summary { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
    .price-summary th, .price-summary td {
      padding: 12px 10px;
      border-bottom: 1px solid var(--card-border);
      text-align: right;
      white-space: nowrap;
    }
    .price-summary th:first-child, .price-summary td:first-child { text-align: left; }
    .price-summary thead th {
      font-weight: 500;
      color: var(--text-dim);
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .price-summary td { color: var(--cream); }
    .price-summary td a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
    .price-summary td a:hover { color: var(--orchid); }

    .pricing-block {
      padding: 2rem 0;
      border-top: 1px solid var(--card-border);
    }
    .pricing-block:first-of-type {
      border-top: none;
    }
    .pricing-block h2 {
      font-size: 1.3rem;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 0.75rem;
    }
    .pricing-block p {
      font-size: 0.9rem;
      line-height: 1.75;
      color: var(--text-dim);
      margin-bottom: 1rem;
    }
    .price-row {
      display: flex;
      gap: 0.6rem;
      margin-bottom: 1.25rem;
      flex-wrap: wrap;
    }
    /* Filled pill rather than plain colored text, so these don't read as
       clickable links like .moment-cta does. */
    .price-row span {
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--cream);
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--card-border);
      padding: 0.35rem 0.85rem;
      border-radius: 999px;
    }

    /* Replaces a Standard/Premium checkmark grid: most rows were identical
       checkmarks across both tiers, repeated per moment — listing only
       what's shared and what Premium adds is shorter and easier to scan. */
    .feature-list-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--purple);
      margin: 1.1rem 0 0.5rem;
    }
    .feature-list-label:first-child { margin-top: 0; }
    .feature-list {
      list-style: none;
    }
    .feature-list li {
      display: flex;
      gap: 0.6rem;
      align-items: flex-start;
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--text-dim);
      padding: 0.25rem 0;
    }
    .feature-list li::before {
      content: "✓";
      color: var(--text-dim);
      flex-shrink: 0;
    }
    .feature-list.premium-list {
      margin: 0.4rem 0 1rem;
      padding: 0.85rem 1rem;
      background: rgba(124,77,255,0.07);
      border-radius: 12px;
    }
    .feature-list.premium-list li::before {
      content: "✦";
      color: var(--text-dim);
    }
    .feature-list.premium-list li strong { color: var(--cream); font-weight: 500; }

    /* Plain text links, matching the "What's the moment?" chooser cards
       instead of a full-width gradient button repeated per moment. */
    .moment-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--orchid);
      text-decoration: none;
      margin-top: 0.25rem;
    }
    .moment-cta:hover { color: var(--rose); }

    /* ------------------------------------------------------------------ */
    /* Cookie consent banner (public/shared/consent.js)                    */
    /* ------------------------------------------------------------------ */
    .cookie-banner {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      background: var(--ink2);
      border-top: 1px solid var(--card-border);
      padding: 1rem 1.25rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
    }
    .cookie-banner__text {
      flex: 1 1 320px;
      min-width: 0;
      font-size: 0.9rem;
      color: var(--text-dim);
    }
    .cookie-banner__title {
      font-weight: 500;
      color: var(--text);
      margin-bottom: 0.25rem;
    }
    .cookie-banner__text a {
      color: var(--orchid);
      text-decoration: underline;
    }
    .cookie-banner__actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .cookie-banner__btn {
      appearance: none;
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      font-size: 0.9rem;
      padding: 0.65rem 1.25rem;
      border-radius: 12px;
      border: 1px solid var(--card-border);
      background: transparent;
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .cookie-banner__btn:hover,
    .cookie-banner__btn:focus-visible {
      border-color: var(--orchid);
      background: rgba(124,77,255,0.08);
    }
    .cookie-banner__btn:focus-visible {
      outline: 2px solid var(--orchid);
      outline-offset: 2px;
    }
    @media (max-width: 480px) {
      .cookie-banner {
        flex-direction: column;
        align-items: stretch;
      }
      /* flex-basis: 320px on .cookie-banner__text sets a min WIDTH in the
         desktop row layout — but flex-basis tracks the main axis, so in this
         column layout it was forcing 320px of HEIGHT instead, blowing up the
         banner to half the screen. Reset it now that the axis has flipped. */
      .cookie-banner__text { flex: none; }
      .cookie-banner__actions { justify-content: flex-end; }
    }

    /* Marketing-consent checkbox on the 4 checkout forms — label text matches
       .card-note (the small print already used elsewhere on the form). */
    .consent-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }
    .consent-checkbox input[type="checkbox"] {
      accent-color: var(--orchid);
      flex-shrink: 0;
      margin-top: 0.15rem;
    }
    .consent-checkbox span {
      font-size: 0.8rem;
      font-weight: 300;
      color: var(--text-dim);
      line-height: 1.5;
    }
    /* Matches .footer-trust-label a ("Payments secured by Paddle" in the footer). */
    .consent-checkbox span a {
      color: var(--text-dim);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .consent-checkbox span a:hover {
      color: var(--orchid);
    }

    .closing-notes {
      padding-top: 1.5rem;
    }
    .fallback-row {
      margin-top: 2rem;
    }