/* ══════════════════════════════════════════════════════════
       TOKENS
    ══════════════════════════════════════════════════════════ */
      :root {
        --p: #7c3aed;
        --p-h: #6d28d9;
        --p-lt: #ede9fe;
        --p-llt: #EFF1F6;
        --success: #10b981;
        --warn: #f59e0b;
        --danger: #ef4444;
        --text: #0f0a1e;
        --text-2: #4b4b6a;
        --text-3: #8888aa;
        --border: #e4e4f0;
        --bg: #ffffff;
        --bg-2: #EFF1F6;
        --bg-3: #f1f0f8;
        --shadow-sm:
          0 1px 3px rgba(15, 10, 30, 0.06), 0 1px 2px rgba(15, 10, 30, 0.04);
        --shadow-md:
          0 4px 16px rgba(124, 58, 237, 0.08), 0 1px 4px rgba(15, 10, 30, 0.06);
        --shadow-lg: 0 12px 40px rgba(15, 10, 30, 0.1);
        --r-sm: 6px;
        --r-md: 10px;
        --r-lg: 16px;
        --r-xl: 20px;
        --font: "Be Vietnam Pro", sans-serif;
        --ease: cubic-bezier(0.4, 0, 0.2, 1);
        --nav-h: 64px;
      }

      /* ══════════════════════════════════════════════════════════
       RESET
    ══════════════════════════════════════════════════════════ */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
        font-size: 15px;
      }
      body {
        font-family: var(--font);
        color: var(--text);
        background: var(--bg-2);
        line-height: 1.6;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      ul,
      ol {
        padding-left: 1.4em;
      }

      /* top nav is provided by ../styles/topNav.css + createTopNav.js */

      /* ══════════════════════════════════════════════════════════
       HERO  —  Proposify layout, purple color base
    ══════════════════════════════════════════════════════════ */
      #hero {
        background: linear-gradient(160deg, #1a0533 0%, #2d0a6e 55%, #3b0d8f 100%);
        padding: 88px 24px 104px;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      /* subtle bottom glow */
      #hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse 55% 45% at 50% 115%, rgba(124,58,237,0.45) 0%, transparent 70%),
          radial-gradient(ellipse 35% 30% at 15% 0%,   rgba(196,181,253,0.08) 0%, transparent 60%);
        pointer-events: none;
      }
      /* decorative dot grid top-right — like Proposify */
      #hero::after {
        content: "";
        position: absolute;
        top: 0; right: 0;
        width: 300px; height: 300px;
        background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1.5px, transparent 1.5px);
        background-size: 24px 24px;
        pointer-events: none;
      }
      .hero-inner {
        position: relative;
        z-index: 1;
        max-width: 680px;
        margin: 0 auto;
      }
      .hero-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: rgba(196,181,253,0.15);
        border: 1px solid rgba(196,181,253,0.3);
        color: #c4b5fd;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        padding: 5px 16px;
        border-radius: 20px;
        margin-bottom: 24px;
      }
      .hero-chip svg {
        width: 14px;
        height: 14px;
      }
      #hero h1 {
        font-size: clamp(26px, 4vw, 48px);
        font-weight: 800;
        color: #fff;
        line-height: 1.1;
        letter-spacing: -0.5px;
        margin-bottom: 18px;
      }
      #hero h1 span {
        color: #c4b5fd;
      }
      #hero p {
        font-size: 16.5px;
        color: rgba(255, 255, 255, 0.7);
        max-width: 520px;
        margin: 0 auto 36px;
        line-height: 1.65;
      }
      .hero-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
      }
      .hero-pill {
        background: rgba(255, 255, 255, 0.09);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: rgba(255, 255, 255, 0.82);
        font-size: 12.5px;
        font-weight: 500;
        padding: 5px 15px;
        border-radius: 20px;
        transition: background 0.2s;
      }
      .hero-pill:hover { background: rgba(255,255,255,0.15); }

      /* ══════════════════════════════════════════════════════════
       MAIN LAYOUT
    ══════════════════════════════════════════════════════════ */
      #main-wrap {
        max-width: 1280px;
        margin: 0 auto;
        padding: 32px 24px 64px;
        display: grid;
        grid-template-columns: 1fr 440px;
        gap: 24px;
        align-items: flex-start;
      }

      /* ══════════════════════════════════════════════════════════
       FORM PANEL — modern card-free step layout
    ══════════════════════════════════════════════════════════ */
      #formCol {}

      /* Top bar above the form */
      .form-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 12px;
      }
      .form-topbar-title {
        font-size: 20px;
        font-weight: 800;
        color: var(--text);
        letter-spacing: -.3px;
      }
      .form-topbar-title span { color: var(--p); }
      .form-topbar-meta {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* Template pill tabs */
      .tpl-tabs {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .tpl-tab {
        padding: 5px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        border: 1.5px solid var(--border);
        background: #fff;
        color: var(--text-2);
        cursor: pointer;
        transition: all .18s;
        font-family: var(--font);
      }
      .tpl-tab:hover { border-color: var(--p); color: var(--p); }
      .tpl-tab.active {
        background: var(--p);
        border-color: var(--p);
        color: #fff;
      }

      /* Currency + hidden select */
      .currency-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: 20px;
        padding: 5px 12px 5px 10px;
        font-size: 12px;
        font-weight: 700;
        color: var(--text-2);
        cursor: pointer;
        white-space: nowrap;
      }
      .currency-wrap svg { width: 13px; height: 13px; color: var(--text-3); }
      .currency-wrap select {
        position: absolute;
        inset: 0;
        opacity: 0;
        width: 100%;
        cursor: pointer;
        border: none;
        padding: 0;
        font-size: 13px;
      }
      #currencyLabel { pointer-events: none; }

      /* ── STEP ACCORDION SECTIONS ── */
      .form-steps {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .form-step {
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: 14px;
        overflow: hidden;
        transition: border-color .2s, box-shadow .2s;
      }
      .form-step.active {
        border-color: var(--p);
        box-shadow: 0 0 0 3px rgba(124,58,237,.07);
      }
      .form-step.done { border-color: #10b981; }

      /* Step header — click to expand */
      .step-hd {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        cursor: pointer;
        user-select: none;
        position: relative;
      }
      .step-hd:hover { background: #fafafe; }

      /* Numbered circle */
      .step-num {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: var(--p-lt);
        color: var(--p);
        font-size: 13px; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        transition: background .2s, color .2s;
      }
      .form-step.active .step-num {
        background: var(--p); color: #fff;
      }
      .form-step.done .step-num {
        background: #10b981; color: #fff;
      }
      .form-step.done .step-num::after {
        content: "✓";
      }
      .form-step.done .step-num-text { display: none; }

      .step-info { flex: 1; }
      .step-title {
        font-size: 14px; font-weight: 700; color: var(--text);
        line-height: 1.2;
      }
      .step-subtitle {
        font-size: 12px; color: var(--text-3); margin-top: 2px;
      }

      /* Chevron toggle */
      .step-chevron {
        width: 22px; height: 22px;
        color: var(--text-3);
        transition: transform .25s;
        flex-shrink: 0;
      }
      .form-step.active .step-chevron { transform: rotate(180deg); color: var(--p); }

      /* Step body */
      .step-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s cubic-bezier(.4,0,.2,1);
      }
      .form-step.active .step-body { max-height: 1400px; }

      .step-body-inner {
        padding: 4px 20px 20px;
        border-top: 1px solid var(--border);
      }

      /* ══════════════════════════════════════════════════════════
       FORM ELEMENTS
    ══════════════════════════════════════════════════════════ */
      .form-group { margin-bottom: 12px; }
      .form-row {
        display: grid;
        gap: 12px;
        margin-bottom: 12px;
      }
      .form-row-2 { grid-template-columns: 1fr 1fr; }
      .form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

      label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: var(--text-2);
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: .4px;
      }
      label .req { color: var(--danger); margin-left: 2px; }
      label .opt { color: var(--text-3); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }

      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="date"],
      textarea,
      select {
        width: 100%;
        padding: 10px 13px;
        border: 1.5px solid var(--border);
        border-radius: 8px;
        font-family: var(--font);
        font-size: 13.5px;
        color: var(--text);
        background: var(--bg);
        outline: none;
        transition: border-color .18s, box-shadow .18s;
      }
      input[type="date"] { cursor: pointer; color-scheme: light; }
      input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: .55; cursor: pointer;
        filter: invert(28%) sepia(80%) saturate(600%) hue-rotate(230deg);
      }
      input:focus, textarea:focus, select:focus {
        border-color: var(--p);
        box-shadow: 0 0 0 3px rgba(124,58,237,.1);
      }
      input::placeholder, textarea::placeholder {
        color: var(--text-3); font-weight: 400;
      }
      textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
      select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238888aa' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 32px;
        cursor: pointer;
      }

      /* ── Logo upload ── */
      #logoUploadWrap {
        border: 2px dashed var(--border);
        border-radius: 10px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        text-align: center;
        transition: border-color .2s, background .2s;
        min-height: 88px;
        position: relative;
        background: #fafafe;
      }
      #logoUploadWrap:hover { border-color: var(--p); background: var(--p-llt); }
      #logoUploadWrap svg { color: var(--text-3); width: 22px; height: 22px; }
      #logoUploadWrap span { font-size: 12.5px; color: var(--text-3); font-weight: 500; }
      #logoUploadWrap small { font-size: 11px; color: var(--text-3); }
      #logoInput { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
      #logoPreview { display: none; width: 100%; max-height: 64px; object-fit: contain; border-radius: 6px; }
      #logoPreview.visible { display: block; }

      /* ── Line Items ── */
      #lineItemsSection {
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 12px;
      }
      .li-head {
        display: grid;
        grid-template-columns: 1fr 72px 90px 88px 32px;
        gap: 6px;
        padding: 9px 14px;
        background: var(--p);
        color: rgba(255,255,255,.9);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
      }
      .li-rows { padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; }
      .li-row {
        display: grid;
        grid-template-columns: 1fr 72px 90px 88px 32px;
        gap: 6px;
        align-items: center;
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: 8px;
        padding: 7px 8px;
        transition: box-shadow .15s, border-color .15s;
      }
      .li-row:focus-within {
        box-shadow: 0 0 0 2px rgba(124,58,237,.15);
        border-color: var(--p);
      }
      .li-row input {
        border: none; padding: 3px 5px; font-size: 13px;
        background: transparent; box-shadow: none;
      }
      .li-row input:focus { border: none; box-shadow: none; outline: none; }
      .li-amount {
        font-size: 13px; font-weight: 700; color: var(--p);
        text-align: right; padding-right: 2px;
      }
      .li-del-btn {
        width: 26px; height: 26px; border: none; border-radius: 6px;
        background: rgba(239,68,68,.08); color: var(--danger);
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        transition: background .15s; flex-shrink: 0;
      }
      .li-del-btn:hover { background: rgba(239,68,68,.18); }
      .li-del-btn svg { width: 13px; height: 13px; }
      .li-add-wrap { padding: 8px 12px 12px; }
      .li-add-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 16px; border-radius: 8px;
        border: 1.5px dashed var(--p); background: transparent;
        color: var(--p); font-family: var(--font);
        font-size: 12.5px; font-weight: 700;
        cursor: pointer; transition: background .15s;
      }
      .li-add-btn:hover { background: var(--p-llt); }
      .li-add-btn svg { width: 14px; height: 14px; }

      /* ── Financials inline row ── */
      .fin-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 0;
      }
      .fin-input-wrap {
        position: relative;
      }
      .fin-input-wrap .fin-suffix {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        font-weight: 700;
        color: var(--text-3);
        pointer-events: none;
      }
      .fin-input-wrap input { padding-right: 32px; }

      /* ── Totals panel ── */
      #totalsBox {
        background: #fff;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        margin-top: 12px;
      }
      .totals-inner { padding: 14px 16px 0; }
      .totals-row {
        display: flex; justify-content: space-between; align-items: center;
        padding: 7px 0; font-size: 13.5px;
        border-bottom: 1px solid var(--border);
      }
      .totals-row:last-of-type { border-bottom: none; }
      .totals-row .label { color: var(--text-2); font-weight: 500; }
      .totals-row .val { font-weight: 700; color: var(--text); }
      .totals-row.discount .val { color: var(--success); }
      .totals-row.tax .val { color: var(--warn); }
      .totals-total {
        display: flex; justify-content: space-between; align-items: center;
        padding: 14px 16px;
        background: linear-gradient(135deg, var(--p) 0%, #6d28d9 100%);
        color: #fff;
        margin-top: 0;
      }
      .totals-total .label { font-size: 13px; font-weight: 700; opacity: .85; }
      .totals-total .val { font-size: 22px; font-weight: 800; }

      /* ── Generate button ── */
      #generateBtn {
        width: 100%;
        margin-top: 16px;
        padding: 15px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--p) 0%, #6d28d9 100%);
        color: #fff;
        font-family: var(--font);
        font-size: 15px;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        letter-spacing: -.2px;
        transition: opacity .18s, transform .15s;
        box-shadow: 0 4px 20px rgba(124,58,237,.35);
      }
      #generateBtn:hover { opacity: .92; transform: translateY(-1px); }
      #generateBtn:active { transform: translateY(0); opacity: 1; }
      #generateBtn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
      #generateBtn svg {
        width: 18px; height: 18px;
      }
      .spin { animation: spin 1s linear infinite; }
      @keyframes spin { to { transform: rotate(360deg); } }

      /* ══════════════════════════════════════════════════════════
       OUTPUT PANEL (right sticky column) — PREMIUM REDESIGN
    ══════════════════════════════════════════════════════════ */
      #outputCol {
        position: sticky;
        top: calc(var(--nav-h) + 20px);
      }

      #outputCard {
        background: var(--bg);
        border: 1px solid rgba(124, 58, 237, 0.2);
        border-radius: var(--r-xl);
        box-shadow:
          0 8px 32px rgba(124, 58, 237, 0.13),
          0 2px 8px rgba(15, 10, 30, 0.06);
        overflow: hidden;
      }

      /* ── Top header bar: dots + title only ── */
      .output-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 13px 18px;
        background: linear-gradient(
          135deg,
          #160428 0%,
          #2d0a6e 55%,
          #4c1d95 100%
        );
        border-bottom: none;
      }
      .output-header-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .output-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .output-dot.red {
        background: #ff5f57;
        box-shadow: 0 0 5px #ff5f57aa;
      }
      .output-dot.yellow {
        background: #febc2e;
        box-shadow: 0 0 5px #febc2eaa;
      }
      .output-dot.green {
        background: #28c840;
        box-shadow: 0 0 5px #28c840aa;
      }
      .output-title {
        font-size: 12.5px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.75);
        letter-spacing: 0.4px;
        margin-left: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .output-title svg {
        width: 13px;
        height: 13px;
        color: #c4b5fd;
      }

      /* Status badge on the right of the header */
      .output-status-badge {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: rgba(196, 181, 253, 0.8);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 3px 10px;
        border-radius: 20px;
        text-transform: uppercase;
      }

      /* ── Action buttons bar: 3 distinct cards ── */
      .output-actions-bar {
        display: grid;
        grid-template-columns: 1fr 1.4fr 1fr;
        gap: 0;
        border-bottom: 1px solid var(--border);
        background: #faf9ff;
      }

      .out-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 14px 10px 12px;
        border: none;
        background: transparent;
        font-family: var(--font);
        cursor: pointer;
        transition:
          background 0.18s,
          transform 0.12s;
        position: relative;
      }
      .out-action-btn + .out-action-btn {
        border-left: 1px solid var(--border);
      }
      .out-action-btn:hover {
        transform: translateY(-1px);
      }
      .out-action-btn:active {
        transform: translateY(0);
      }

      /* Icon circles — each btn has unique color */
      .out-action-btn .btn-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: box-shadow 0.18s;
      }
      .out-action-btn .btn-label {
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.2px;
        line-height: 1;
      }
      .out-action-btn svg {
        width: 16px;
        height: 16px;
      }

      /* Preview — indigo/violet */
      #previewBtn .btn-icon {
        background: #ede9fe;
        color: #7c3aed;
      }
      #previewBtn .btn-label {
        color: #7c3aed;
      }
      #previewBtn:hover {
        background: #ede9fe;
      }
      #previewBtn:hover .btn-icon {
        box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
      }

      /* Download PDF — gradient purple (the hero) */
      #downloadBtn {
        background: linear-gradient(160deg, #2d0a6e 0%, #7c3aed 100%);
        position: relative;
        overflow: hidden;
      }
      #downloadBtn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          160deg,
          rgba(255, 255, 255, 0.07) 0%,
          transparent 60%
        );
        pointer-events: none;
      }
      #downloadBtn .btn-icon {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
      }
      #downloadBtn .btn-label {
        color: #fff;
        font-size: 12px;
      }
      #downloadBtn:hover {
        background: linear-gradient(160deg, #3b0d8f 0%, #9333ea 100%);
      }
      #downloadBtn:hover .btn-icon {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
      }

      /* Print — slate/dark */
      #printBtn .btn-icon {
        background: #f1f5f9;
        color: #475569;
      }
      #printBtn .btn-label {
        color: #475569;
      }
      #printBtn:hover {
        background: #f8fafc;
      }
      #printBtn:hover .btn-icon {
        box-shadow: 0 4px 14px rgba(71, 85, 105, 0.2);
      }

      /* keep .out-btn for modal/preview only — hidden from the main panel */
      .out-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 13px;
        border-radius: var(--r-sm);
        border: 1.5px solid var(--border);
        background: var(--bg);
        color: var(--text-2);
        font-family: var(--font);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition:
          border-color 0.15s,
          color 0.15s,
          background 0.15s;
      }
      .out-btn:hover {
        border-color: var(--p);
        color: var(--p);
        background: var(--p-llt);
      }
      .out-btn svg {
        width: 13px;
        height: 13px;
      }
      .out-btn-primary {
        background: var(--p);
        color: #fff !important;
        border-color: var(--p);
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
      }
      .out-btn-primary:hover {
        background: var(--p-h);
        border-color: var(--p-h);
        color: #fff !important;
      }
      .out-btn-primary.loading {
        opacity: 0.75;
        cursor: not-allowed;
      }

      #outputBody {
        min-height: 320px;
        max-height: 560px;
        overflow-y: auto;
        padding: 24px;
      }

      /* Default/idle state */
      #outputIdle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        min-height: 280px;
        text-align: center;
      }
      #outputIdle .idle-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ede9fe, #ddd6fe);
        color: var(--p);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow:
          0 0 0 12px rgba(124, 58, 237, 0.06),
          0 0 0 24px rgba(124, 58, 237, 0.03);
        animation: pulse-idle 3s ease-in-out infinite;
      }
      @keyframes pulse-idle {
        0%,
        100% {
          box-shadow:
            0 0 0 10px rgba(124, 58, 237, 0.07),
            0 0 0 22px rgba(124, 58, 237, 0.03);
        }
        50% {
          box-shadow:
            0 0 0 16px rgba(124, 58, 237, 0.1),
            0 0 0 30px rgba(124, 58, 237, 0.04);
        }
      }
      #outputIdle .idle-icon svg {
        width: 32px;
        height: 32px;
      }
      #outputIdle h3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--text);
      }
      #outputIdle p {
        font-size: 13px;
        color: var(--text-3);
        max-width: 200px;
        line-height: 1.6;
      }

      /* Rendered markdown */
      #invoiceOutput {
        display: none;
      }
      #invoiceOutput.visible {
        display: block;
      }

      .invoice-rendered {
        font-size: 13.5px;
        line-height: 1.7;
        color: var(--text);
      }
      .invoice-rendered h1,
      .invoice-rendered h2,
      .invoice-rendered h3 {
        color: var(--p);
        margin: 16px 0 8px;
        font-weight: 700;
      }
      .invoice-rendered h1 {
        font-size: 20px;
      }
      .invoice-rendered h2 {
        font-size: 16px;
      }
      .invoice-rendered h3 {
        font-size: 14px;
      }
      .invoice-rendered p {
        margin-bottom: 8px;
      }
      .invoice-rendered table {
        width: 100%;
        border-collapse: collapse;
        margin: 12px 0;
        font-size: 12.5px;
      }
      .invoice-rendered th {
        background: var(--p);
        color: #fff;
        padding: 8px 10px;
        text-align: left;
        font-weight: 700;
      }
      .invoice-rendered td {
        padding: 7px 10px;
        border-bottom: 1px solid var(--border);
      }
      .invoice-rendered tr:nth-child(even) td {
        background: var(--bg-2);
      }
      .invoice-rendered strong {
        color: var(--text);
      }
      .invoice-rendered hr {
        border: none;
        border-top: 2px solid var(--border);
        margin: 16px 0;
      }
      .invoice-rendered ul,
      .invoice-rendered ol {
        margin: 8px 0 8px 1.2em;
      }

      /* Success bar */
      #successBar {
        display: none;
        align-items: center;
        gap: 8px;
        padding: 11px 20px;
        background: linear-gradient(90deg, #064e3b, #065f46);
        border-top: 1px solid rgba(16, 185, 129, 0.3);
        font-size: 13px;
        font-weight: 600;
        color: #6ee7b7;
      }
      #successBar.visible {
        display: flex;
      }
      #successBar svg {
        width: 16px;
        height: 16px;
        color: #34d399;
      }

      /* Stream cursor */
      .stream-cursor {
        display: inline-block;
        width: 2px;
        height: 1em;
        background: var(--p);
        margin-left: 2px;
        animation: blink 0.8s steps(1) infinite;
        vertical-align: text-bottom;
      }
      @keyframes blink {
        50% {
          opacity: 0;
        }
      }

      /* ══════════════════════════════════════════════════════════
       HOW IT WORKS  —  Proposify alternating step layout
    ══════════════════════════════════════════════════════════ */
      #howItWorks {
        background: #EFF1F6;
        padding: 96px 24px;
        border-bottom: 1px solid var(--border);
      }

      .hiw-eyebrow {
        text-align: center;
        margin-bottom: 80px;
      }
      .hiw-eyebrow .chip {
        display: inline-block;
        background: var(--p-lt);
        color: var(--p);
        font-size: 11px; font-weight: 800;
        letter-spacing: 1px; text-transform: uppercase;
        padding: 5px 16px; border-radius: 20px; margin-bottom: 16px;
      }
      .hiw-eyebrow h2 {
        font-size: clamp(26px, 3.5vw, 42px);
        font-weight: 800; color: var(--text);
        letter-spacing: -0.4px; margin-bottom: 12px;
      }
      .hiw-eyebrow p {
        font-size: 16px; color: var(--text-2);
        max-width: 400px; margin: 0 auto; line-height: 1.6;
      }

      /* Steps wrapper */
      .hiw-steps {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      /* Single step row */
      .hiw-step {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: center;
        padding: 72px 0;
        border-bottom: 1px solid rgba(124,58,237,0.12);
      }
      .hiw-step:last-child { border-bottom: none; }

      /* Flip every even step: visual left, text right */
      .hiw-step:nth-child(even) .hiw-step-text { order: 2; }
      .hiw-step:nth-child(even) .hiw-step-visual { order: 1; }

      /* Text side */
      .hiw-step-text {}
      .hiw-step-num {
        font-size: 13px; font-weight: 800;
        color: var(--p); letter-spacing: 2px;
        margin-bottom: 16px; display: block;
        font-variant-numeric: tabular-nums;
      }
      /* underline accent below number */
      .hiw-step-num::after {
        content: "";
        display: block;
        width: 28px; height: 2px;
        background: var(--p);
        border-radius: 2px;
        margin-top: 6px;
        opacity: 0.5;
      }
      .hiw-step-text h3 {
        font-size: clamp(26px, 3vw, 38px);
        font-weight: 800; color: var(--text);
        line-height: 1.1; letter-spacing: -0.5px;
        margin-bottom: 18px;
      }
      .hiw-step-text p {
        font-size: 15.5px; color: var(--text-2);
        line-height: 1.75; max-width: 380px;
      }
      .hiw-step-text p strong { color: var(--text); font-weight: 700; }

      /* Visual side — mock UI panel */
      .hiw-step-visual {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 28px;
        box-shadow: 0 8px 40px rgba(124,58,237,0.10);
        position: relative;
        overflow: hidden;
      }
      .hiw-step-visual::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--p) 0%, #a78bfa 100%);
      }

      /* Mock UI elements inside visuals */
      .mock-label {
        font-size: 10px; font-weight: 800; letter-spacing: 1px;
        text-transform: uppercase; color: var(--text-3);
        margin-bottom: 14px;
      }
      .mock-field {
        background: var(--bg-2); border: 1.5px solid var(--border);
        border-radius: 8px; padding: 10px 14px;
        font-size: 13px; color: var(--text-2);
        margin-bottom: 8px;
      }
      .mock-field.active {
        border-color: var(--p);
        box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
        color: var(--text);
      }
      .mock-row-item {
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 12px; border-radius: 8px; margin-bottom: 4px;
        font-size: 13px; color: var(--text-2);
        background: var(--bg-2);
      }
      .mock-row-item.highlight {
        background: var(--p-lt); color: var(--p); font-weight: 700;
      }
      .mock-tag {
        font-size: 10px; font-weight: 700; padding: 2px 8px;
        border-radius: 20px; background: var(--p-lt); color: var(--p);
      }
      .mock-tag.green { background: #d1fae5; color: #065f46; }
      .mock-divider { height: 1px; background: var(--border); margin: 12px 0; }
      .mock-total-row {
        display: flex; align-items: center; justify-content: space-between;
        background: var(--p); border-radius: 10px; padding: 12px 16px; margin-top: 10px;
      }
      .mock-total-row span { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8); }
      .mock-total-row strong { font-size: 18px; font-weight: 800; color: #fff; }
      .mock-template-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
      }
      .mock-tpl {
        border: 2px solid var(--border); border-radius: 10px;
        padding: 16px 10px; text-align: center;
        font-size: 11px; font-weight: 700; color: var(--text-2);
        cursor: pointer; transition: all 0.15s;
      }
      .mock-tpl.active {
        border-color: var(--p); color: var(--p); background: var(--p-llt);
      }
      .mock-tpl-icon {
        font-size: 20px; margin-bottom: 6px; display: block;
      }
      .mock-btn {
        width: 100%; margin-top: 16px; padding: 12px;
        background: var(--p); color: #fff; border: none;
        border-radius: 10px; font-size: 13px; font-weight: 800;
        cursor: pointer; text-align: center;
      }

      @media (max-width: 860px) {
        .hiw-step {
          grid-template-columns: 1fr;
          gap: 36px; padding: 48px 0;
        }
        .hiw-step:nth-child(even) .hiw-step-text { order: 1; }
        .hiw-step:nth-child(even) .hiw-step-visual { order: 2; }
        .hiw-step-text h3 { font-size: 26px; }
      }

      /* ══════════════════════════════════════════════════════════
       FEATURES STRIP  —  Proposify card layout, purple base
    ══════════════════════════════════════════════════════════ */
      #featuresStrip {
        background: #EFF1F6;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 56px 24px;
      }
      .features-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
      .feat-card {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 28px 22px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: box-shadow 0.2s, transform 0.2s;
      }
      .feat-card:hover {
        box-shadow: 0 6px 24px rgba(124,58,237,0.12);
        transform: translateY(-3px);
      }
      .feat-icon {
        width: 48px;
        height: 48px;
        border-radius: var(--r-md);
        background: var(--p-lt);
        color: var(--p);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .feat-icon svg {
        width: 22px;
        height: 22px;
      }
      .feat-card h3 { font-size: 14.5px; font-weight: 700; }
      .feat-card p  { font-size: 13px; color: var(--text-2); line-height: 1.55; }

      /* ══════════════════════════════════════════════════════════
       SEO ABOUT SECTION
    ══════════════════════════════════════════════════════════ */
      #aboutSection {
        background: #EFF1F6;
        padding: 96px 24px;
      }
      .about-header {
        text-align: center;
        margin-bottom: 56px;
      }
      .about-header .chip {
        display: inline-block;
        background: var(--p-lt);
        color: var(--p);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 5px 16px;
        border-radius: 20px;
        margin-bottom: 14px;
      }
      .about-header h2 {
        font-size: clamp(26px, 3.5vw, 42px);
        font-weight: 800;
        color: var(--text);
        margin-bottom: 14px;
        letter-spacing: -0.4px;
        line-height: 1.15;
      }
      .about-header p {
        font-size: 16.5px;
        color: var(--text-2);
        max-width: 520px;
        margin: 0 auto;
        line-height: 1.65;
      }
      .about-area {
        max-width: 760px;
        margin: 0 auto;
      }
      .about-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      /* Card */
      .about-item {
        background: #fff;
        border: 1px solid var(--border);
        border-left: 4px solid var(--p);
        border-radius: 0 16px 16px 0;
        padding: 32px 36px;
        transition: box-shadow 0.2s;
      }
      .about-item:hover {
        box-shadow: 0 6px 28px rgba(124,58,237,0.09);
      }
      .about-item > h3 {
        font-size: 19px;
        font-weight: 800;
        color: var(--text);
        margin-bottom: 18px;
        line-height: 1.2;
        letter-spacing: -0.3px;
      }
      .about-item > h3::before { display: none; }

      /* Paragraph */
      .about-item-content p {
        font-size: 15.5px;
        color: var(--text-2);
        line-height: 1.85;
        margin-bottom: 10px;
      }
      .about-item-content p:last-child { margin-bottom: 0; }

      /* Shared row */
      .about-row {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 14px 10px;
        border-radius: 10px;
        transition: background 0.15s;
        cursor: default;
      }
      .about-row + .about-row { border-top: 1px solid var(--border); }
      .about-row:hover { background: var(--p-llt); border-top-color: transparent; }
      .about-row:hover + .about-row { border-top-color: transparent; }

      /* Number badge — solid purple, white text */
      .about-badge {
        min-width: 32px;
        height: 32px;
        border-radius: 10px;
        background: var(--p);
        color: #fff;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 1px;
      }
      /* Check badge — light purple fill */
      .about-badge.round {
        border-radius: 50%;
        background: var(--p-lt);
        color: var(--p);
        font-size: 14px;
      }

      /* Row body — label on top, desc below */
      .about-row-body { flex: 1; }
      .about-row-label {
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 3px;
        line-height: 1.3;
      }
      .about-row-text {
        font-size: 14.5px;
        color: var(--text-2);
        line-height: 1.7;
      }

      .custom-link { color: var(--p); font-weight: 600; }
      .custom-link:hover { text-decoration: underline; }

      @media (max-width: 600px) {
        .about-item { padding: 24px 20px; }
        .about-item > h3 { font-size: 17px; }
        .about-row { padding: 11px 6px; gap: 10px; }
        .about-row-text { font-size: 14px; }
      }

      /* ══════════════════════════════════════════════════════════
       WHY BANNER  —  Proposify "Why use" dark 3-col icon layout
    ══════════════════════════════════════════════════════════ */
      #whyBanner {
        background: linear-gradient(160deg, #1a0533 0%, #2d0a6e 60%, #3b0d8f 100%);
        padding: 96px 24px;
        position: relative;
        overflow: hidden;
      }
      #whyBanner::after {
        content: "";
        position: absolute; top: 0; right: 0;
        width: 340px; height: 340px;
        background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
        background-size: 24px 24px;
        pointer-events: none;
      }
      .why-inner {
        max-width: 960px;
        margin: 0 auto;
        position: relative; z-index: 1;
      }
      .why-header {
        text-align: center;
        margin-bottom: 64px;
      }
      .why-header h2 {
        font-size: clamp(26px, 3.5vw, 42px);
        font-weight: 800; color: #fff;
        letter-spacing: -0.4px; margin-bottom: 12px;
      }
      .why-header p {
        font-size: 16px; color: rgba(255,255,255,0.55);
        max-width: 420px; margin: 0 auto;
      }

      /* 3 columns — icon top, label, paragraph */
      .why-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-bottom: 64px;
      }
      .why-card {
        padding: 0 48px 0 0;
      }
      .why-card:not(:last-child) {
        border-right: 1px solid rgba(255,255,255,0.1);
        margin-right: 0;
      }
      .why-card:not(:first-child) {
        padding-left: 48px;
        padding-right: 48px;
      }
      .why-card:last-child { padding-right: 0; }

      /* Outline icon circle */
      .why-card-icon {
        width: 48px; height: 48px;
        border-radius: 50%;
        border: 1.5px solid rgba(196,181,253,0.4);
        color: #c4b5fd;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 24px;
      }
      .why-card-icon svg { width: 22px; height: 22px; }
      .why-card h3 {
        font-size: 16px; font-weight: 800;
        color: #fff; margin-bottom: 12px;
        letter-spacing: -0.1px;
      }
      .why-card p {
        font-size: 14px; color: rgba(255,255,255,0.55);
        line-height: 1.72;
      }

      /* CTA box */
      .why-cta-box {
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 56px;
        display: flex; align-items: center;
        justify-content: space-between; gap: 32px;
        flex-wrap: wrap;
      }
      .why-cta-box h3 {
        font-size: clamp(20px, 2.5vw, 28px);
        font-weight: 800; color: #fff;
        letter-spacing: -0.3px;
        max-width: 480px; line-height: 1.2;
      }
      .why-cta-btn {
        display: inline-flex; align-items: center; gap: 8px;
        background: #c4b5fd; color: #1a0533;
        font-family: var(--font);
        font-size: 14px; font-weight: 800;
        padding: 14px 28px; border-radius: 10px;
        border: none; cursor: pointer; white-space: nowrap;
        text-decoration: none;
        transition: background 0.2s, transform 0.15s;
        flex-shrink: 0;
      }
      .why-cta-btn:hover { background: #ddd6fe; transform: translateY(-2px); }
      .why-cta-btn svg { width: 16px; height: 16px; }

      @media (max-width: 768px) {
        .why-grid { grid-template-columns: 1fr; gap: 40px; }
        .why-card,
        .why-card:not(:first-child),
        .why-card:last-child { padding: 0; border-right: none; }
        .why-cta-box { flex-direction: column; align-items: flex-start; }
      }

      /* ══════════════════════════════════════════════════════════
       FAQ SECTION  —  Proposify "Got questions?" layout
    ══════════════════════════════════════════════════════════ */
      #faqSection {
        background: #EFF1F6;
        padding: 80px 24px;
      }
      .faq-header {
        text-align: center;
        margin-bottom: 44px;
      }
      .faq-header .chip {
        display: inline-block;
        background: var(--p-lt);
        color: var(--p);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 5px 16px;
        border-radius: 20px;
        margin-bottom: 14px;
      }
      .faq-header h2 {
        font-size: clamp(22px, 3vw, 32px);
        font-weight: 800;
        margin-bottom: 10px;
      }
      .faq-header p {
        font-size: 14.5px;
        color: var(--text-2);
      }

      .faq-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 760px;
        margin: 0 auto;
      }

      .faq-item {
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: var(--r-md);
        overflow: hidden;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }
      .faq-item.open {
        border-color: var(--p);
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08);
      }
      .faq-q {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        cursor: pointer;
        user-select: none;
        gap: 12px;
      }
      .faq-q-text {
        font-size: 14.5px;
        font-weight: 600;
        color: var(--text);
        flex: 1;
        line-height: 1.4;
      }
      .faq-q-icon {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--bg-2);
        color: var(--text-3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.2s,
          color 0.2s,
          transform 0.3s var(--ease);
      }
      .faq-item.open .faq-q-icon {
        background: var(--p);
        color: #fff;
        transform: rotate(45deg);
      }
      .faq-q-icon svg {
        width: 14px;
        height: 14px;
      }
      .faq-a {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.35s var(--ease),
          padding 0.35s var(--ease);
        padding: 0 20px;
      }
      .faq-a.open {
        max-height: 600px;
        padding-bottom: 18px;
      }
      .faq-a p {
        font-size: 13.5px;
        color: var(--text-2);
        line-height: 1.7;
      }


      /* ══════════════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════════════ */
      @media (max-width: 1024px) {
        #main-wrap {
          grid-template-columns: 1fr;
        }
        #outputCol {
          position: static;
          order: -1;
        }
        #outputCard { max-height: none; }
        #outputBody { max-height: 500px; }
      }

      @media (max-width: 768px) {
        .features-inner  { grid-template-columns: 1fr 1fr; }
        .about-grid      { grid-template-columns: 1fr; }
        .why-grid        { grid-template-columns: 1fr 1fr; }
        .form-row-2      { grid-template-columns: 1fr; }
        .form-row-3      { grid-template-columns: 1fr 1fr; }
        .tpl-tabs        { gap: 4px; }
        .tpl-tab         { font-size: 11px; padding: 5px 10px; }
        .li-head         { grid-template-columns: 1fr 60px 72px 72px 28px; font-size: 9px; }
        .li-row          { grid-template-columns: 1fr 60px 72px 72px 28px; }
      }

      @media (max-width: 540px) {
        #main-wrap       { padding: 16px 14px 40px; }
        .features-inner  { grid-template-columns: 1fr; }
        .why-grid        { grid-template-columns: 1fr; }
        .form-row-3      { grid-template-columns: 1fr; }
        .form-topbar     { flex-direction: column; align-items: flex-start; }
        .tpl-tabs        { flex-wrap: wrap; }
        .li-head         { display: none; }
        .li-row          { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 6px; }
        .li-row .li-desc { grid-column: 1 / -1; }
        .li-amount       { text-align: left; }
        .step-body-inner { padding: 4px 14px 16px; }
      }
      /* ══════════════════════════════════════════════════════════
       OUTPUT ACTION BUTTONS — responsive label hiding
    ══════════════════════════════════════════════════════════ */
      @media (max-width: 520px) {
        .out-btn .btn-label {
          display: none;
        }
      }

      /* ══════════════════════════════════════════════════════════
       PREVIEW MODAL
    ══════════════════════════════════════════════════════════ */
      #previewModal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2000;
        background: rgba(15, 10, 30, 0.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        justify-content: center;
        align-items: flex-start;
        padding: 24px 16px 40px;
        overflow-y: auto;
      }
      #previewModal.open {
        display: flex;
      }

      .preview-paper {
        background: #fff;
        width: 100%;
        max-width: 800px;
        border-radius: var(--r-xl);
        box-shadow: 0 32px 96px rgba(15, 10, 30, 0.35);
        flex-shrink: 0;
        margin: auto 0;
        overflow: hidden;
      }

      .preview-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px;
        background: var(--bg-2);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 10;
      }
      .preview-toolbar-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .preview-toolbar-title svg {
        color: var(--p);
      }
      .preview-toolbar-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
      }

      .preview-close-btn {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: var(--bg-3);
        color: var(--text-2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.15s,
          color 0.15s;
        flex-shrink: 0;
      }
      .preview-close-btn:hover {
        background: var(--danger);
        color: #fff;
      }
      .preview-close-btn svg {
        width: 14px;
        height: 14px;
      }

      .preview-body {
        padding: 48px 56px;
      }
      .preview-body .invoice-rendered table {
        width: 100%;
        border-collapse: collapse;
        margin: 12px 0;
        font-size: 13px;
      }
      .preview-body .invoice-rendered th {
        background: var(--p);
        color: #fff;
        padding: 8px 12px;
        text-align: left;
        font-weight: 700;
      }
      .preview-body .invoice-rendered td {
        padding: 7px 12px;
        border-bottom: 1px solid var(--border);
      }
      .preview-body .invoice-rendered tr:nth-child(even) td {
        background: var(--bg-2);
      }

      @media (max-width: 640px) {
        .preview-body {
          padding: 24px 20px;
        }
        #previewModal {
          padding: 0;
          align-items: stretch;
        }
        .preview-paper {
          border-radius: 0;
          min-height: 100dvh;
        }
      }
      /* ══════════════════════════════════════════════════════════
       INVOICE TEMPLATE — scoped under .inv-tpl
    ══════════════════════════════════════════════════════════ */
      .inv-tpl {
        font-family: "DM Mono", "Courier New", monospace;
        background: #faf8f3;
        color: #0a0a0a;
        max-width: 760px;
        margin: 0 auto;
        padding: 48px 52px 48px 58px;
        position: relative;
        border-left: 6px solid #c8a96e;
        line-height: 1.6;
      }
      .inv-hd {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 32px;
      }
      .inv-brand-name {
        font-family: "Playfair Display", Georgia, serif;
        font-size: 26px;
        font-weight: 900;
        color: #0a0a0a;
        line-height: 1;
      }
      .inv-brand-name span { color: #c8a96e; }
      .inv-brand-tag {
        font-size: 9px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #7a7265;
        margin-top: 5px;
      }
      .inv-lbl-block { text-align: right; }
      .inv-lbl-word {
        font-family: "Playfair Display", Georgia, serif;
        font-size: 36px;
        font-weight: 400;
        color: #0a0a0a;
        opacity: 0.12;
        line-height: 1;
      }
      .inv-num {
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #8b6914;
        margin-top: 4px;
      }
      .inv-rule {
        height: 1px;
        background: linear-gradient(90deg, #c8a96e 0%, #e2ddd4 60%, transparent 100%);
        margin: 20px 0 28px;
      }
      .inv-meta {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 18px;
        margin-bottom: 32px;
      }
      .inv-meta-blk label {
        font-size: 8px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #7a7265;
        display: block;
        margin-bottom: 5px;
      }
      .inv-meta-blk p {
        font-size: 12px;
        font-weight: 500;
        color: #0a0a0a;
      }
      .inv-parties {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        margin-bottom: 36px;
        padding: 22px 26px;
        background: #f0ece3;
        border-left: 3px solid #c8a96e;
      }
      .inv-party label {
        font-size: 8px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #8b6914;
        display: block;
        margin-bottom: 8px;
      }
      .inv-party-name {
        font-family: "Playfair Display", Georgia, serif;
        font-size: 16px;
        font-weight: 700;
        color: #0a0a0a;
        margin-bottom: 5px;
      }
      .inv-party p { font-size: 11px; color: #7a7265; line-height: 1.8; }
      .inv-tbl { width: 100%; border-collapse: collapse; }
      .inv-tbl thead tr { border-bottom: 2px solid #0a0a0a; }
      .inv-tbl thead th {
        font-size: 8px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #7a7265;
        padding: 0 0 11px;
        font-weight: 400;
        text-align: left;
      }
      .inv-tbl thead th.tc, .inv-tbl tbody td.tc { text-align: center; }
      .inv-tbl thead th.tr, .inv-tbl tbody td.tr { text-align: right; }
      .inv-tbl tbody tr { border-bottom: 1px solid #e2ddd4; }
      .inv-tbl tbody tr:last-child { border-bottom: none; }
      .inv-tbl tbody td { padding: 13px 0; font-size: 12px; color: #0a0a0a; vertical-align: top; }
      .inv-item-nm { font-size: 12px; font-weight: 500; }
      .inv-tots-wrap {
        display: flex;
        justify-content: flex-end;
        border-top: 2px solid #0a0a0a;
        padding-top: 16px;
      }
      .inv-tots { width: 250px; border-collapse: collapse; }
      .inv-tots td { padding: 4px 0; font-size: 11px; color: #7a7265; }
      .inv-tots td:last-child { text-align: right; color: #0a0a0a; }
      .inv-tots .inv-tot-final td {
        padding-top: 12px;
        border-top: 1px solid #e2ddd4;
        font-family: "Playfair Display", Georgia, serif;
      }
      .inv-tots .inv-tot-final td:first-child { font-size: 15px; font-weight: 700; color: #0a0a0a; }
      .inv-tots .inv-tot-final td:last-child { font-size: 20px; font-weight: 700; color: #8b6914; }
      .inv-foot {
        margin-top: 40px;
        padding-top: 20px;
        border-top: 1px solid #e2ddd4;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 20px;
      }
      .inv-foot-note label {
        font-size: 8px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #7a7265;
        display: block;
        margin-bottom: 5px;
      }
      .inv-foot-note p { font-size: 11px; color: #7a7265; line-height: 1.7; max-width: 280px; }
      .inv-sig-ln { width: 120px; height: 1px; background: #0a0a0a; margin-bottom: 5px; margin-left: auto; }
      .inv-sig-lbl { font-size: 9px; letter-spacing: 1px; color: #7a7265; text-transform: uppercase; text-align: right; }