@font-face {
      font-family: 'Aeonik';
      src: url('../assets/brand/fonts/Aeonik-Regular.woff2') format('woff2'),
           url('../assets/brand/fonts/Aeonik-Regular.ttf') format('truetype');
      font-weight: 400 500;
      font-display: swap;
    }
    @font-face {
      font-family: 'Aeonik';
      src: url('../assets/brand/fonts/Aeonik-Bold.woff2') format('woff2'),
           url('../assets/brand/fonts/Aeonik-Bold.ttf') format('truetype');
      font-weight: 700;
      font-display: swap;
    }
    @font-face {
      font-family: 'Aeonik';
      src: url('../assets/brand/fonts/Aeonik-Thin.woff2') format('woff2'),
           url('../assets/brand/fonts/Aeonik-Thin.ttf') format('truetype');
      font-weight: 300;
      font-display: swap;
    }
    @font-face {
      font-family: 'DiscoveryFs';
      src: url('../assets/brand/fonts/DiscoveryFs-Medium.woff2') format('woff2'),
           url('../assets/brand/fonts/DiscoveryFs-Medium.ttf') format('truetype');
      font-weight: 500;
      font-display: swap;
    }
    @font-face {
      font-family: 'DiscoveryFs';
      src: url('../assets/brand/fonts/DiscoveryFs-Light.woff2') format('woff2'),
           url('../assets/brand/fonts/DiscoveryFs-Light.ttf') format('truetype');
      font-weight: 300;
      font-display: swap;
    }

    :root {
      --purple:    #712EAC;
      --green:     #C5E6A2;
      --blackhole: #201E4B;
      --natural:   #ECE9E7;
      --white:     #F6F4F1;
      --purple-tint: #f3e8fc;
      --green-tint:  #e8f5d8;
      --shadow-sm: rgba(32,30,75,0.09) 0px 2px 8px;
      --shadow-md: rgba(32,30,75,0.12) 0px 6px 20px;
      --max-w: 1080px;
    }

    /* ===== DATA-LANG TOGGLE (UI language) ===== */
    .lang-he [data-lang="en"] { display: none; }
    .lang-en [data-lang="he"] { display: none; }

    /* ===== BASE ===== */
    /* Free, redistributable fonts (OFL) for user carousels — the brand fonts above stay UI/demo-only */
    @font-face {
      font-family: 'Heebo'; font-weight: 400 700; font-display: swap;
      src: url('fonts/heebo-400-hebrew.woff2') format('woff2');
      unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
    }
    @font-face {
      font-family: 'Heebo'; font-weight: 400 700; font-display: swap;
      src: url('fonts/heebo-400-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Rubik'; font-weight: 400 700; font-display: swap;
      src: url('fonts/rubik-400-hebrew.woff2') format('woff2');
      unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
    }
    @font-face {
      font-family: 'Rubik'; font-weight: 400 700; font-display: swap;
      src: url('fonts/rubik-400-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Assistant'; font-weight: 400 700; font-display: swap;
      src: url('fonts/assistant-400-hebrew.woff2') format('woff2');
      unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
    }
    @font-face {
      font-family: 'Assistant'; font-weight: 400 700; font-display: swap;
      src: url('fonts/assistant-400-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: 'Secular One'; font-weight: 400; font-display: swap;
      src: url('fonts/secularone-400-hebrew.woff2') format('woff2');
      unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
    }
    @font-face {
      font-family: 'Secular One'; font-weight: 400; font-display: swap;
      src: url('fonts/secularone-400-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
    }
    .lang-he body { font-family: 'DiscoveryFs', 'Arial', sans-serif; direction: rtl; text-align: right; }
    .lang-en body { font-family: 'Aeonik', 'Arial', sans-serif; font-weight: 500; direction: ltr; text-align: left; }
    body {
      background: var(--natural);
      color: var(--blackhole);
      font-size: 16px;
      line-height: 1.6;
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }
    *, *::before, *::after { box-sizing: border-box; }
    a { text-decoration: none; color: inherit; }
    button, input, select, textarea { font-family: inherit; }

    /* ===== NAV ===== */
    .nav {
      position: sticky; top: 0; z-index: 200;
      background: var(--natural);
      border-bottom: 1px solid rgba(32,30,75,.10);
      height: 72px;
    }
    .nav-inner {
      max-width: var(--max-w);
      margin: 0 auto; padding: 0 28px;
      height: 100%; display: flex; align-items: center; gap: 16px;
    }
    .nav-logo { height: 42px; width: auto; flex-shrink: 0; }
    .nav-back {
      font-size: 13px; color: rgba(32,30,75,.55);
      display: flex; align-items: center; gap: 5px;
      transition: color .15s;
    }
    .nav-back:hover { color: var(--blackhole); }
    .nav-spacer { flex: 1; }
    .lang-toggle {
      background: none; border: 1.5px solid rgba(32,30,75,.18);
      border-radius: 7px; padding: 5px 12px; font-size: 13px; font-weight: 600;
      color: var(--blackhole); cursor: pointer; transition: border-color .15s;
    }
    .lang-toggle:hover { border-color: var(--purple); color: var(--purple); }
    .lang-toggle .lbl-en { display: none; }
    .lang-en .lang-toggle .lbl-he { display: none; }
    .lang-en .lang-toggle .lbl-en { display: inline; }

    /* ===== PAGE HEADER ===== */
    .page-header {
      background:
        radial-gradient(ellipse at 60% 110%, rgba(113,46,172,.55) 0%, transparent 65%),
        radial-gradient(ellipse at 20% 80%, rgba(113,46,172,.25) 0%, transparent 55%),
        var(--blackhole);
      padding: 60px 28px 110px;
      text-align: center;
    }
    .page-eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 6px 16px; border-radius: 99px;
      background: rgba(198,231,163,.12); border: 1px solid rgba(198,231,163,.28);
      color: var(--green); font-size: 12px; font-weight: 600; letter-spacing: .4px;
      text-transform: uppercase; margin-bottom: 22px;
    }
    .page-h1 {
      font-size: clamp(26px, 4.5vw, 48px); font-weight: 500;
      line-height: 1.1; letter-spacing: -1px; color: var(--natural);
      margin: 0 auto 16px; max-width: 680px; text-wrap: balance;
    }
    .page-h1 em { font-style: normal; color: var(--green); }
    .li-icon { width: .75em; height: .75em; vertical-align: middle; border-radius: 4px; margin-inline-start: 6px; display: inline-block; }
    .page-sub {
      font-size: 17px; font-weight: 300; color: rgba(236,233,231,.65);
      max-width: 540px; margin: 0 auto; line-height: 1.65;
    }
    .lang-en .page-h1 { font-weight: 700; letter-spacing: -.5px; }
    .lang-en .page-sub { font-weight: 400; }

    /* ===== TOOL CARD ===== */
    .tool-wrap {
      max-width: var(--max-w);
      margin: 0 auto; padding: 48px 28px 80px;
    }
    .tool-wrap--form {
      padding-top: 0; padding-bottom: 0;
      margin-top: -72px;
      position: relative; z-index: 10;
    }
    .tool-card {
      background: var(--white);
      border: 1.5px solid rgba(32,30,75,.10);
      border-radius: 20px; padding: 44px 48px;
      box-shadow:
        rgba(32,30,75,.18) 0px 20px 60px,
        rgba(113,46,172,.12) 0px 4px 24px,
        rgba(255,255,255,.8) 0px 1px 0px inset;
    }
    .gen-form { display: flex; flex-direction: column; gap: 22px; }
    .gen-field { display: flex; flex-direction: column; gap: 8px; }
    .gen-label { font-weight: 500; color: var(--blackhole); font-size: 15px; }
    .gen-input, .gen-select {
      background: var(--natural); border: 1.5px solid rgba(32,30,75,.15);
      border-radius: 10px; padding: 12px 16px; font-size: 15px; color: var(--blackhole);
      outline: none; transition: border-color .2s; width: 100%;
    }
    .gen-input:focus, .gen-select:focus { border-color: var(--purple); }
    .gen-row { display: flex; gap: 18px; flex-wrap: wrap; }
    .gen-row .gen-field { flex: 1; min-width: 160px; }
    .seg {
      display: inline-flex; background: var(--natural);
      border: 1.5px solid rgba(32,30,75,.15); border-radius: 10px; padding: 3px; gap: 3px;
    }
    .seg button {
      border: none; background: none; padding: 8px 20px; font-size: 14px; font-weight: 600;
      border-radius: 8px; color: rgba(32,30,75,.55); cursor: pointer; transition: background .15s, color .15s;
    }
    .seg button.on { background: var(--white); color: var(--purple); box-shadow: var(--shadow-sm); }
    .gen-submit-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

    /* No-AI (free) mode: hide the AI generator, promote the blank-start as the primary CTA.
       Mode-specific copy (data-ai-only / data-noai-only) is pruned from the DOM at init in JS,
       so it composes cleanly with the language toggle. */
    .no-ai #gen-topic-field, .no-ai #gen-submit, .no-ai .gen-hint, .no-ai #gen-loading { display: none; }
    .no-ai .gen-blank-link {
      background: var(--purple); color: #ECE9E7; border: none; border-radius: 12px;
      padding: 14px 26px; font-size: 15.5px; font-weight: 700; cursor: pointer;
      box-shadow: var(--shadow-sm); text-decoration: none;
    }
    .no-ai .gen-blank-link:hover { opacity: .92; transform: translateY(-1px); }
    .gen-btn {
      background: var(--purple); color: var(--white); border: none;
      border-radius: 10px; padding: 15px 32px; font-size: 16px; font-weight: 600;
      cursor: pointer; transition: opacity .18s, transform .15s;
    }
    .gen-btn:hover { opacity: .88; transform: translateY(-1px); }
    .gen-btn:active { transform: translateY(0); }
    .gen-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
    .gen-hint { font-size: 13px; color: rgba(32,30,75,.42); margin: 0; }
    .gen-disclaimer {
      margin-top: 18px; padding: 13px 16px; border-radius: 12px;
      background: rgba(113,46,172,.06); border: 1px solid rgba(113,46,172,.16);
      font-size: 13px; line-height: 1.6; color: rgba(32,30,75,.7);
    }
    .gen-blank-link {
      background: none; border: none; padding: 0; font-size: 13px;
      color: var(--purple); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
    }

    /* Loading */
    .gen-loading { text-align: center; padding: 34px 0 10px; color: rgba(32,30,75,.5); font-size: 15px; display: none; }
    .gen-spinner {
      width: 38px; height: 38px; margin: 0 auto 14px;
      border: 3px solid rgba(113,46,172,.2); border-top-color: var(--purple);
      border-radius: 50%; animation: spin .75s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Error */
    .gen-error {
      background: rgba(192,57,43,.08); border: 1.5px solid rgba(192,57,43,.2);
      border-radius: 10px; padding: 14px 18px; font-size: 15px; color: #B3261E;
      display: none; margin-top: 18px;
    }

    /* ===== EDITOR ===== */
    .editor-wrap { display: none; }
    .editor-grid { display: grid; grid-template-columns: 400px 1fr; gap: 24px; align-items: start; }
    .editor-panel {
      background: var(--white); border: 1.5px solid rgba(32,30,75,.10);
      border-radius: 18px; box-shadow: var(--shadow-sm); overflow: hidden;
    }
    .tabs { display: flex; border-bottom: 1.5px solid rgba(32,30,75,.08); }
    .tabs button {
      flex: 1; background: none; border: none; padding: 13px 6px; font-size: 13.5px; font-weight: 600;
      color: rgba(32,30,75,.5); cursor: pointer; border-bottom: 2.5px solid transparent;
      transition: color .15s, border-color .15s; white-space: nowrap;
    }
    .tabs button.on { color: var(--purple); border-bottom-color: var(--purple); }
    .tab-body { padding: 20px; display: none; max-height: 560px; overflow-y: auto; }
    .tab-body.on { display: block; }

    /* Slides tab */
    .slide-row {
      border: 1.5px solid rgba(32,30,75,.10); border-radius: 12px;
      padding: 12px 14px; margin-bottom: 10px; background: var(--white);
    }
    .slide-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .slide-badge {
      font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
      padding: 3px 9px; border-radius: 99px; background: rgba(113,46,172,.10); color: var(--purple);
      font-family: 'Aeonik','Arial',sans-serif;
    }
    .slide-badge.b-intro { background: rgba(198,231,163,.45); color: #3a5c1a; }
    .slide-badge.b-outro { background: rgba(32,30,75,.10); color: var(--blackhole); }
    .slide-row-tools { margin-inline-start: auto; display: flex; gap: 4px; }
    .icon-btn {
      background: none; border: 1px solid rgba(32,30,75,.14); border-radius: 6px;
      width: 26px; height: 26px; font-size: 13px; line-height: 1; cursor: pointer;
      color: rgba(32,30,75,.55); transition: border-color .15s, color .15s;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .icon-btn:hover { border-color: var(--purple); color: var(--purple); }
    .icon-btn:disabled { opacity: .3; cursor: default; }
    .slide-row input, .slide-row textarea {
      width: 100%; background: var(--natural); border: 1.5px solid rgba(32,30,75,.12);
      border-radius: 8px; padding: 8px 11px; font-size: 14px; color: var(--blackhole);
      outline: none; transition: border-color .15s;
    }
    .slide-row input:focus, .slide-row textarea:focus { border-color: var(--purple); }
    .slide-row textarea { resize: vertical; min-height: 56px; margin-top: 7px; }
    .add-slide-btn {
      width: 100%; background: none; border: 1.5px dashed rgba(113,46,172,.4); border-radius: 12px;
      padding: 11px; font-size: 14px; font-weight: 600; color: var(--purple); cursor: pointer;
      transition: background .15s;
    }
    .add-slide-btn:hover { background: rgba(113,46,172,.05); }
    .add-slide-btn:disabled { opacity: .35; cursor: default; }

    /* Branding tab */
    .brand-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
    .brand-field label { font-size: 13.5px; font-weight: 600; color: var(--blackhole); }
    .brand-toggle-row { display: flex; align-items: center; gap: 10px; }
    .brand-field input[type="text"] {
      background: var(--natural); border: 1.5px solid rgba(32,30,75,.12); border-radius: 8px;
      padding: 9px 12px; font-size: 14px; color: var(--blackhole); outline: none;
    }
    .brand-field input[type="text"]:focus { border-color: var(--purple); }
    .photo-row { display: flex; align-items: center; gap: 12px; }
    .photo-preview {
      width: 54px; height: 54px; border-radius: 50%; background: var(--natural);
      border: 1.5px solid rgba(32,30,75,.14); object-fit: cover; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; color: rgba(32,30,75,.3); overflow: hidden;
    }
    .photo-preview img { width: 100%; height: 100%; object-fit: cover; }
    .mini-btn {
      background: none; border: 1.5px solid rgba(32,30,75,.16); border-radius: 8px;
      padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--blackhole);
      cursor: pointer; transition: border-color .15s, color .15s;
    }
    .mini-btn:hover { border-color: var(--purple); color: var(--purple); }
    .mini-btn.copied { border-color: #2a7010; color: #2a7010; }
    .check-row { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; user-select: none; }
    .check-row input { accent-color: var(--purple); width: 16px; height: 16px; }

    /* Design tab */
    .design-label { font-size: 13.5px; font-weight: 600; color: var(--blackhole); margin: 0 0 8px; }
    .design-label + .palette-grid, .font-chips + .design-label { margin-top: 16px; }
    .font-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
    .font-chip {
      padding: 9px 16px; border: 1.5px solid rgba(32,30,75,.14); border-radius: 10px;
      background: var(--white); font-size: 15.5px; cursor: pointer; color: var(--blackhole);
      transition: border-color .15s;
    }
    .font-chip:hover { border-color: var(--purple); }
    .font-chip.on { border-color: var(--purple); box-shadow: 0 0 0 1.5px var(--purple) inset; }
    .palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .palette-chip {
      border: 2px solid rgba(32,30,75,.10); border-radius: 12px; padding: 8px; cursor: pointer;
      background: var(--white); transition: border-color .15s; text-align: center;
    }
    .palette-chip.on { border-color: var(--purple); }
    .palette-swatch { height: 40px; border-radius: 8px; position: relative; overflow: hidden; }
    .palette-swatch i { position: absolute; inset-block: 0; width: 33.4%; }
    .palette-name { font-size: 11.5px; font-weight: 600; margin-top: 6px; color: rgba(32,30,75,.65); }
    .custom-colors { display: none; gap: 12px; margin-top: 14px; }
    .custom-colors.on { display: flex; flex-wrap: wrap; }
    .custom-color-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: rgba(32,30,75,.65); }
    .custom-color-field input { width: 52px; height: 34px; border: 1.5px solid rgba(32,30,75,.14); border-radius: 8px; padding: 2px; background: var(--white); cursor: pointer; }

    /* Settings tab */
    .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(32,30,75,.07); }
    .setting-row:last-child { border-bottom: none; }
    .setting-label { font-size: 14px; font-weight: 600; }
    .switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .switch i {
      position: absolute; inset: 0; background: rgba(32,30,75,.18); border-radius: 99px;
      transition: background .15s; cursor: pointer;
    }
    .switch i::after {
      content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
      width: 16px; height: 16px; background: var(--white); border-radius: 50%; transition: transform .15s;
    }
    .switch input:checked + i { background: var(--purple); }
    .switch input:checked + i::after { transform: translateX(18px); }
    [dir="rtl"] .switch input:checked + i::after { transform: translateX(-18px); }
    .setting-row input[type="text"] {
      background: var(--natural); border: 1.5px solid rgba(32,30,75,.12); border-radius: 8px;
      padding: 7px 11px; font-size: 13.5px; width: 130px; outline: none; color: var(--blackhole);
    }

    /* ===== PREVIEW ===== */
    .preview-col { min-width: 0; }
    .preview-strip {
      display: flex; gap: 16px; overflow-x: auto; padding: 8px 4px 16px;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    }
    .pv-frame {
      position: relative; flex-shrink: 0; scroll-snap-align: center;
      width: calc(1080px * var(--pv-scale, .27));
      height: calc(1350px * var(--pv-scale, .27));
      border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-md);
    }
    .pv-frame .slide {
      position: absolute; top: 0; left: 0;
      transform: scale(var(--pv-scale, .27)); transform-origin: top left;
    }
    .pv-count { font-size: 13px; color: rgba(32,30,75,.5); margin: 0 0 10px; }
    .demo-badge {
      background: rgba(113,46,172,.08); border: 1.5px solid rgba(113,46,172,.25);
      color: var(--blackhole); border-radius: 10px; padding: 9px 13px;
      font-size: 13px; line-height: 1.5; margin: 0 0 12px;
    }
    .dl-demo-note { color: #B3261E; font-size: 13.5px; margin: 10px 0 0; display: none; }

    /* ===== TAB TOUR (animated coachmarks) ===== */
    .tabs .tour-replay {
      flex: 0 0 auto; margin-inline-start: auto; margin-inline-end: 8px;
      width: 26px; height: 26px; padding: 0; border-radius: 50%;
      border: 1.5px solid rgba(32,30,75,.25); background: var(--white);
      color: rgba(32,30,75,.55); font-size: 14px; font-weight: 700; cursor: pointer;
      align-self: center; line-height: 1;
    }
    .tour-replay:hover { border-color: var(--purple); color: var(--purple); }
    .tour-pulse { position: relative; z-index: 61; }
    .tour-pulse::after {
      content: ''; position: absolute; inset: -4px; border-radius: 12px;
      border: 2.5px solid var(--purple); pointer-events: none;
      animation: tourpulse 1.4s ease-out infinite;
    }
    @keyframes tourpulse {
      0% { opacity: 1; transform: scale(1); }
      70% { opacity: 0; transform: scale(1.13); }
      100% { opacity: 0; transform: scale(1.13); }
    }
    .tour-pop {
      position: fixed; z-index: 60; width: min(330px, calc(100vw - 32px));
      background: var(--white); border: 1.5px solid rgba(113,46,172,.35);
      border-radius: 14px; padding: 16px 18px; box-shadow: 0 14px 40px rgba(32,30,75,.22);
      animation: tourpop .28s ease-out;
    }
    @keyframes tourpop {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tour-pop::before {
      content: ''; position: absolute; top: -7px; inset-inline-start: var(--arrow-x, 24px);
      width: 12px; height: 12px; background: var(--white); transform: rotate(45deg);
      border-top: 1.5px solid rgba(113,46,172,.35); border-inline-start: 1.5px solid rgba(113,46,172,.35);
    }
    .tour-pop h4 { margin: 0 0 6px; font-size: 15.5px; color: var(--blackhole); }
    .tour-pop p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: rgba(32,30,75,.75); }
    .tour-foot { display: flex; align-items: center; gap: 8px; }
    .tour-dots { display: flex; gap: 5px; margin-inline-end: auto; }
    .tour-dots i {
      width: 7px; height: 7px; border-radius: 50%; background: rgba(32,30,75,.18);
      transition: background .2s, transform .2s;
    }
    .tour-dots i.on { background: var(--purple); transform: scale(1.25); }
    .tour-next {
      background: var(--purple); color: #ECE9E7; border: none; border-radius: 9px;
      padding: 7px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
    }
    .tour-skip {
      background: none; border: none; color: rgba(32,30,75,.5);
      font-size: 13px; cursor: pointer; padding: 7px 4px;
    }
    .dl-btn.shake { animation: dlshake .4s; }
    @keyframes dlshake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-6px); }
      75% { transform: translateX(6px); }
    }

    /* ===== SLIDE (true 1080x1350 canvas, scaled for preview) ===== */
    .slide {
      width: 1080px; height: 1350px;
      background: var(--s-bg); color: var(--s-text);
      display: flex; flex-direction: column;
      padding: 96px 90px 80px;
      overflow: hidden;
    }
    /* Slide font comes from the font picker (inline style); the brand font applies only in demo mode */
    .slide.slide-he { direction: rtl; text-align: right; }
    .slide.slide-en { direction: ltr; text-align: left; }
    .sl-topbar { display: flex; align-items: center; min-height: 64px; }
    .sl-num {
      font-weight: 700; font-size: 34px;
      background: var(--s-accent); color: var(--s-bg);
      width: 64px; height: 64px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .sl-accent-bar { width: 130px; height: 14px; border-radius: 99px; background: var(--s-accent); }
    .sl-main { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow: hidden; min-height: 0; }
    .sl-title {
      font-weight: 700; margin: 0;
      font-size: calc(68px * var(--tscale, 1)); line-height: 1.18; letter-spacing: -1px;
      overflow-wrap: break-word;
    }
    .slide-brandfont.slide-he .sl-title { font-weight: 500; }
    .sl-body {
      font-size: calc(42px * var(--tscale, 1)); line-height: 1.5; margin: 34px 0 0;
      color: var(--s-text); opacity: .82; font-weight: 300; overflow-wrap: break-word;
    }
    .slide-en .sl-body { font-weight: 400; }
    .slide-intro .sl-title { font-size: calc(92px * var(--tscale, 1)); line-height: 1.12; }
    .slide-intro .sl-body { font-size: calc(44px * var(--tscale, 1)); }
    .slide-outro .sl-title { font-size: calc(80px * var(--tscale, 1)); color: var(--s-accent); }
    .sl-footer {
      display: flex; align-items: center; gap: 24px; min-height: 110px; margin-top: 44px;
    }
    .sl-avatar {
      width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
      border: 3px solid var(--s-accent); flex-shrink: 0;
    }
    .sl-avatar-ph {
      width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
      border: 3px dashed var(--s-accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 44px; line-height: 1;
    }
    .sl-placeholder { opacity: .5; }
    .sl-author { min-width: 0; }
    .sl-author-name { font-size: 32px; font-weight: 700; margin: 0; line-height: 1.25; }
    .slide-brandfont.slide-he .sl-author-name { font-weight: 500; }
    .sl-author-handle { font-size: 26px; margin: 2px 0 0; opacity: .6; line-height: 1.25; direction: ltr; unicode-bidi: isolate; }
    .slide-brandfont .sl-author-handle, .slide-brandfont .sl-num { font-family: 'Aeonik','Arial',sans-serif; }
    .sl-swipe {
      margin-inline-start: auto; font-size: 28px; font-weight: 600;
      color: var(--s-accent); white-space: nowrap; align-self: center;
    }

    /* ===== POST KIT (caption + first comment) ===== */
    .copy-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
    .arch-note { font-size: 12.5px; color: rgba(32,30,75,.45); margin: 0; }
    .copy-card {
      background: var(--white); border: 1.5px solid rgba(32,30,75,.10);
      border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm);
    }
    .copy-card-head {
      display: flex; align-items: center; gap: 10px; margin-bottom: 9px;
      font-size: 13.5px; font-weight: 600; color: var(--blackhole);
    }
    .copy-card-head .mini-btn { margin-inline-start: auto; padding: 5px 12px; font-size: 12px; }
    .copy-card textarea {
      width: 100%; background: var(--natural); border: 1.5px solid rgba(32,30,75,.10);
      border-radius: 9px; padding: 10px 12px; font-size: 14px; line-height: 1.6;
      color: var(--blackhole); outline: none; resize: vertical;
    }
    .copy-card textarea:focus { border-color: var(--purple); }

    /* ===== DOWNLOAD BAR ===== */
    .dl-bar {
      display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
      background: var(--white); border: 1.5px solid rgba(32,30,75,.10);
      border-radius: 16px; padding: 18px 22px; margin-top: 18px; box-shadow: var(--shadow-sm);
    }
    .dl-btn {
      background: var(--blackhole); color: var(--white); border: none;
      border-radius: 10px; padding: 14px 30px; font-size: 15.5px; font-weight: 600;
      cursor: pointer; transition: opacity .18s, transform .15s;
      display: inline-flex; align-items: center; gap: 9px;
    }
    .dl-btn:hover { opacity: .9; transform: translateY(-1px); }
    .dl-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
    .dl-progress { font-size: 14px; color: rgba(32,30,75,.55); margin: 0; }
    .dl-note { font-size: 12.5px; color: rgba(32,30,75,.4); margin: 0; flex-basis: 100%; }

    /* ===== EMAIL MODAL ===== */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 500; display: none;
      background: rgba(32,30,75,.55); backdrop-filter: blur(3px);
      align-items: center; justify-content: center; padding: 24px;
    }
    .modal-overlay.on { display: flex; }
    .modal {
      background: var(--white); border-radius: 20px; padding: 36px 38px;
      max-width: 440px; width: 100%; box-shadow: rgba(32,30,75,.35) 0 24px 80px;
      position: relative;
    }
    .modal-close {
      position: absolute; top: 14px; inset-inline-end: 16px;
      background: none; border: none; font-size: 22px; color: rgba(32,30,75,.4);
      cursor: pointer; line-height: 1;
    }
    .modal h3 { margin: 0 0 8px; font-size: 21px; }
    .modal p { margin: 0 0 20px; font-size: 14px; color: rgba(32,30,75,.6); line-height: 1.6; }
    .modal form { display: flex; flex-direction: column; gap: 12px; }
    .modal input {
      background: var(--natural); border: 1.5px solid rgba(32,30,75,.15); border-radius: 10px;
      padding: 12px 15px; font-size: 15px; color: var(--blackhole); outline: none;
    }
    .modal input:focus { border-color: var(--purple); }
    .gate-consent {
      display: flex; align-items: flex-start; gap: 9px;
      font-size: 12.5px; line-height: 1.5; color: rgba(32,30,75,.62);
      text-align: start; cursor: pointer;
    }
    .gate-consent input[type="checkbox"] {
      width: 17px; height: 17px; margin: 1px 0 0; flex-shrink: 0;
      accent-color: var(--purple); cursor: pointer;
    }
    .gate-consent-err {
      display: none; font-size: 12.5px; color: #B3261E;
      margin: -2px 0 0 !important; text-align: start;
    }
    .modal .gen-btn { width: 100%; }
    .modal-privacy { font-size: 11.5px; color: rgba(32,30,75,.4); margin: 4px 0 0 !important; text-align: center; }

    /* ===== HOW-TO / FAQ ===== */
    .section-title { font-size: 24px; font-weight: 700; margin: 0 0 22px; }
    .lang-he .section-title { font-weight: 500; }
    .howto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .howto-card {
      background: var(--white); border: 1.5px solid rgba(32,30,75,.10);
      border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm);
    }
    .howto-num {
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(113,46,172,.12); color: var(--purple);
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; font-family: 'Aeonik','Arial',sans-serif;
      margin-bottom: 12px;
    }
    .howto-card h4 { margin: 0 0 6px; font-size: 15px; }
    .howto-card p { margin: 0; font-size: 13.5px; color: rgba(32,30,75,.65); line-height: 1.6; }
    @media (max-width: 860px) { .howto-grid { grid-template-columns: repeat(2, 1fr); } }

    .faq-list { display: flex; flex-direction: column; gap: 8px; }
    .explain-item { border: 1.5px solid rgba(32,30,75,.10); border-radius: 12px; overflow: hidden; background: var(--white); }
    .explain-item[open] { border-color: rgba(113,46,172,.18); }
    .explain-summary {
      cursor: pointer; padding: 14px 18px; font-size: 14px; font-weight: 600;
      color: var(--blackhole); list-style: none; display: flex; align-items: center;
      gap: 10px; user-select: none;
    }
    .explain-summary::-webkit-details-marker { display: none; }
    .explain-chevron {
      color: var(--purple); font-size: 15px; font-family: 'Aeonik','Arial',sans-serif;
      flex-shrink: 0; width: 20px; text-align: center; line-height: 1;
    }
    .explain-chevron::before { content: '+'; }
    .explain-item[open] .explain-chevron::before { content: '−'; }
    .explain-body { padding: 4px 18px 16px; font-size: 14px; line-height: 1.7; color: rgba(32,30,75,.72); }
    .explain-body p { margin: 0; }

    /* ===== EXPORT HOLDER (off-screen, unscaled) ===== */
    #export-holder {
      position: fixed; top: 0; left: -12000px;
      width: 1080px; height: 1350px; overflow: hidden; pointer-events: none;
    }

    /* Footer (navy/green brand footer) */
    .site-footer { background:var(--blackhole); border-top:1px solid rgba(236,233,231,.08); padding:52px 5% 32px; }
    .foot-inner { max-width:1120px; margin:0 auto; }
    .footer-grid { display:grid; grid-template-columns:repeat(3, max-content); justify-content:space-evenly; margin-bottom:40px; }
    .footer-brand-col { display:flex; flex-direction:row; align-items:flex-start; justify-content:center; gap:44px; align-self:start; }
    .footer-brand-sub { display:flex; flex-direction:column; align-items:center; text-align:center; }
    .footer-brand-lockup { display:flex; align-items:flex-end; justify-content:center; height:58px; margin-bottom:14px; text-decoration:none; }
    .footer-logo-mark { display:block; width:58px; height:58px; flex-shrink:0; background:var(--green); -webkit-mask:url('../assets/brand/logo-icon.svg') no-repeat center/contain; mask:url('../assets/brand/logo-icon.svg') no-repeat center/contain; }
    .footer-tagline { font-size:14px; font-weight:700; color:rgba(236,233,231,.62); line-height:1.6; max-width:220px; margin:0 auto; }
    .footer-og-lockup { display:flex; align-items:flex-end; justify-content:center; height:58px; margin:0 auto 14px; text-decoration:none; }
    .footer-og-mark { display:block; width:112px; height:53px; flex-shrink:0; background:var(--green); -webkit-mask:url('../assets/brand/goodies-transparent.png') no-repeat center/contain; mask:url('../assets/brand/goodies-transparent.png') no-repeat center/contain; }
    .footer-og-tagline { font-size:14px; font-weight:700; color:rgba(236,233,231,.55); line-height:1.6; max-width:220px; margin:0 auto; }
    .footer-col-title { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--green); margin-bottom:16px; }
    .footer-links { display:flex; flex-direction:column; gap:10px; }
    .footer-links a { font-size:14px; font-weight:300; color:rgba(236,233,231,.68); text-decoration:none; transition:color .15s; }
    .footer-links a:hover { color:var(--green); }
    .footer-socials { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
    .footer-socials a { color:rgba(236,233,231,.55); transition:color .15s, transform .15s; display:flex; align-items:center; }
    .footer-socials a:hover { color:var(--green); transform:translateY(-2px); }
    .footer-socials svg { width:20px; height:20px; fill:currentColor; stroke:none; }
    .footer-email { display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:14px; color:rgba(236,233,231,.68); text-decoration:none; transition:color .15s; }
    .footer-email:hover { color:var(--green); }
    .footer-email-icon { width:18px; height:18px; flex-shrink:0; }
    .footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:24px; border-top:1px solid rgba(236,233,231,.08); flex-wrap:wrap; gap:12px; }
    .footer-copy { font-size:12px; color:rgba(236,233,231,.42); text-decoration:none; }
    @media(max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; justify-content:normal; gap:32px; } }
    @media(max-width:600px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } .footer-col-links{ display:none; } .footer-brand-col{ flex-direction:column; align-items:center; gap:0; } .footer-og-lockup{ margin:22px auto 12px; } }

    /* Mobile */
    @media (max-width: 920px) {
      .editor-grid { grid-template-columns: 1fr; }
      .tab-body { max-height: none; }
    }
    @media (max-width: 600px) {
      .tool-card { padding: 28px 20px; }
      .gen-btn { width: 100%; text-align: center; }
      .gen-submit-row { flex-direction: column; align-items: stretch; gap: 10px; }
      .page-header { padding: 44px 20px 40px; }
      .pv-frame { --pv-scale: .22; }
      .howto-grid { grid-template-columns: 1fr; }
    }