:root {
    /* PAPER-INSPIRED PALETTE — beige undertone, black writing */
    --navy: #f0e9dc;          /* was dark navy — now paper cream (primary bg) */
    --navy-2: #faf5e8;         /* was card navy — now surface (lighter cream) */
    --ivory: #17202e;          /* was ivory text — now dark ink */
    --teal: #17202e;           /* was random green — now dark ink for consistency */
    --teal-dim: rgba(23,32,46,0.08);
    --amber: #b8935c;          /* warm gold matching cert */
    --blush: #a06565;
    --muted: #6a6f7a;
    --line: rgba(184,147,92,0.25);
    --red: #d4494a;
  }
  * { margin:0; padding:0; box-sizing:border-box; }

  /* ══════════ STOCK WITH LOVE WORDMARK ══════════ */
  .brand-mark {
    display: inline-flex; flex-direction: column; align-items: center;
    line-height: 1; user-select: none;
  }
  .bm-name {
    font-family: 'Playfair Display', serif; font-style: normal; font-weight: 800;
    font-size: 34px; letter-spacing: -0.02em; color: var(--ivory);
    line-height: 1;
  }
  .bm-tag {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400;
    font-size: 12px; color: var(--amber); letter-spacing: .06em;
    margin-top: 4px;
  }
  /* Full wordmark stack — used on the certificate */
  .wordmark {
    display: flex; flex-direction: column; align-items: center; line-height: 1;
  }
  .wm-name {
    font-family: 'Playfair Display', serif; font-style: normal; font-weight: 800;
    letter-spacing: -0.02em;
  }
  .wm-tag-line {
    display: inline-flex; align-items: center; gap: 14px;
  }
  .wm-rule {
    display: inline-block; height: 1px; width: 44px;
    background: var(--wm-accent, #b8935c);
  }
  .wm-tag-text {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400;
    color: var(--wm-accent, #b8935c);
  }
  .wm-heart { color: var(--wm-accent, #b8935c); }
  .wm-sub {
    font-family: 'Archivo', sans-serif; font-weight: 500;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--wm-ink, #17202e);
  }
  body {
    background: var(--navy);
    color: var(--ivory);
    font-family: 'Archivo', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }
  .bg {
    position: fixed; inset: 0; z-index: 0;
    background:
      radial-gradient(ellipse 70% 50% at 85% 0%, rgba(184,147,92,0.10), transparent 60%),
      radial-gradient(ellipse 50% 60% at 0% 100%, rgba(26,126,105,0.05), transparent 60%),
      var(--navy);
  }
  .bg::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 40% at 100% 30%, rgba(184,147,92,0.045), transparent 65%);
    pointer-events: none;
  }
  main { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 32px 100px; }

  header { display:flex; align-items:center; justify-content:space-between; padding: 28px 0; }
  .brand { display:flex; align-items:center; gap: 12px; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-word { font-family:'Fraunces', serif; font-size: 27px; font-weight: 600; letter-spacing: .01em; }
  .logo-word em { font-style: italic; color: var(--teal); }
  .logo-tag { font-family:'IBM Plex Mono',monospace; font-size: 9px; letter-spacing:.22em; text-transform:uppercase; color: var(--muted); margin-top: 1px; }
  .mode-switch {
    display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
    background: rgba(23,32,46,0.04);
  }
  .mode-btn {
    padding: 10px 26px; background: transparent; border: none; cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); transition: all .25s;
  }
  .mode-btn.active { background: var(--teal); color: var(--navy); font-weight: 500; }

  .view { display: none; animation: fade .5s ease; }
  .view.active { display: block; }
  @keyframes fade { from { opacity: 0; transform: translateY(12px);} to { opacity:1; transform:none; } }

  /* ══════════ WIZARD ══════════ */
  .wizard-hero { text-align: center; padding: 40px 0 32px; }
  .hero-logo { width: 74px; height: 74px; margin: 0 auto 18px; animation: markIn 1.2s cubic-bezier(.2,.8,.3,1) both; }
  @keyframes markIn { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
  .wizard-hero h1 {
    font-family: 'Fraunces', serif; font-weight: 300;
    font-size: clamp(38px, 5.5vw, 62px); line-height: 1.05; letter-spacing: -0.01em;
  }
  .wizard-hero h1 em { font-style: italic; color: var(--teal); }
  .wizard-hero p { color: var(--muted); margin-top: 14px; font-size: 15px; max-width: 580px; margin-left:auto; margin-right:auto; line-height:1.7; }
  .wizard-hero p b { color: var(--amber); font-weight:600; }

  .progress { display:flex; align-items:center; justify-content:center; margin: 34px auto 38px; max-width: 640px; }
  .p-step { display:flex; align-items:center; gap:10px; }
  .p-dot {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-size: 13px; color: var(--muted);
    transition: all .3s; background: var(--navy-2);
  }
  .p-step.done .p-dot { background: var(--teal); border-color: var(--teal); color: var(--navy); }
  .p-step.now .p-dot { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 0 4px var(--teal-dim); }
  .p-label { font-family:'IBM Plex Mono',monospace; font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }
  .p-step.now .p-label { color: var(--ivory); }
  .p-line { width: 44px; height: 1px; background: var(--line); margin: 0 12px; }

  /* ══════════ WIZARD CARD — modernised, warm, layered ══════════ */
  .wizard-card {
    max-width: 780px; margin: 0 auto;
    position: relative;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184,147,92,0.09), transparent 60%),
      linear-gradient(180deg, #fbf6ea 0%, #f4ecdb 100%);
    border: 1px solid rgba(184,147,92,0.20);
    border-radius: 24px; padding: 48px 52px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 40px 80px -30px rgba(23,32,46,0.14),
      0 12px 30px -8px rgba(184,147,92,0.10);
  }
  /* Subtle top ornament — a thin gold rule with a heart */
  .wizard-card::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 96px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity: 0.55;
  }
  .wz-panel { display: none; }
  .wz-panel.active { display: block; animation: fade .4s ease; }

  /* Title — Playfair, italic accent, small ornament */
  .wz-title {
    font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 400;
    color: var(--ivory);
    margin-bottom: 6px; letter-spacing: -0.01em;
    display: flex; align-items: baseline; gap: 10px; justify-content: center;
    text-align: center;
  }
  .wz-title em {
    font-style: italic; color: var(--amber);
    font-weight: 400;
    position: relative;
  }
  .wz-title em::after {
    content: '';
    position: absolute; left: 8%; right: 8%; bottom: -3px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
  }
  .wz-sub {
    font-family: 'Fraunces', serif;
    font-size: 13px; color: #6a6f7a; line-height:1.65; margin-bottom: 28px;
    text-align: center;
    max-width: 460px; margin-left: auto; margin-right: auto;
    text-wrap: pretty;
  }
  .wz-sub b { color: var(--amber); font-weight: 600; }

  /* AMOUNT hero — bigger, warmer */
  .amount-hero {
    display:flex; align-items:baseline; justify-content:center; gap: 6px;
    margin: 20px 0 4px;
  }
  .amount-hero .cur {
    font-family:'Playfair Display', serif; font-style: italic;
    font-size: 36px; color: var(--amber); font-weight: 400;
  }
  .amount-input {
    background: transparent; border: none; outline: none;
    font-family: 'Playfair Display', serif; font-size: 88px; font-weight: 700;
    color: var(--ivory); width: 260px; text-align: center;
    border-bottom: 1px solid rgba(184,147,92,0.35);
    letter-spacing: -0.02em;
    transition: border-color .2s;
  }
  .amount-input:focus { border-color: var(--amber); }

  .amount-min-note {
    text-align: center; margin: 12px 0 6px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--muted); transition: color .2s;
  }
  .amount-min-note b { color: var(--amber); font-weight: 600; }
  .amount-min-note.warn { color: var(--red); animation: shake .4s; }
  .amount-min-note.warn b { color: var(--red); }
  @keyframes shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
  }

  /* Preset chips — modern pills, dark-fill on selected */
  .chips { display:flex; gap: 10px; justify-content: center; margin: 26px 0 8px; flex-wrap: wrap; }
  .chip {
    padding: 10px 20px; border-radius: 999px;
    border: 1px solid rgba(184,147,92,0.35);
    background: rgba(255,255,255,0.55);
    color: var(--ivory);
    font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all .2s;
  }
  .chip:hover {
    border-color: var(--amber); background: rgba(255,255,255,0.85);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(184,147,92,0.15);
  }
  .chip.on {
    background: var(--ivory); color: #f7ecd6;
    border-color: var(--ivory);
    box-shadow: 0 6px 16px rgba(23,32,46,0.25);
  }

  /* Occasion tiles — modern, warm gold accents */
  .occasions { display:grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-top: 30px; }
  .occ {
    padding: 16px 6px; text-align:center;
    border: 1px solid rgba(184,147,92,0.25);
    background: rgba(255,255,255,0.55);
    border-radius: 14px;
    cursor:pointer; transition: all .2s;
    font-family: 'Fraunces', serif;
    font-size: 11px; color: #4a5262; font-weight: 500;
    line-height: 1.2;
  }
  .occ span { display:block; font-size: 22px; margin-bottom: 6px; }
  .occ:hover {
    border-color: var(--amber); background: rgba(255,255,255,0.85);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(184,147,92,0.15);
  }
  .occ.on {
    border-color: var(--amber);
    background: linear-gradient(180deg, rgba(184,147,92,0.15), rgba(184,147,92,0.05));
    color: var(--ivory);
    box-shadow: 0 8px 20px rgba(184,147,92,0.15), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  .occ-other-wrap {
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease, margin .35s ease;
    margin-top: 0;
  }
  .occ-other-wrap.on {
    max-height: 80px;
    margin-top: 12px;
  }
  .occ-other-input {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(184,147,92,0.35);
    background: rgba(255,255,255,0.7);
    color: var(--ivory);
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
  }
  .occ-other-input:focus { border-color: var(--amber); background: rgba(255,255,255,0.95); }
  .occ-other-input::placeholder { color: rgba(106,111,122,0.6); }

  .suggest-toggle { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
  .stg {
    padding: 20px 18px; border: 1px solid rgba(184,147,92,0.25);
    background: rgba(255,255,255,0.55);
    border-radius: 14px;
    cursor: pointer; transition: all .2s; text-align:left;
  }
  .stg:hover { border-color: var(--amber); background: rgba(255,255,255,0.85); }
  .stg.on {
    border-color: var(--amber);
    background: linear-gradient(180deg, rgba(184,147,92,0.12), rgba(184,147,92,0.03));
    box-shadow: 0 6px 16px rgba(184,147,92,0.12);
  }
  .stg-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600; font-size: 15px;
    color: var(--ivory);
    display:flex; gap:8px; align-items:center;
  }
  .stg-desc {
    font-family: 'Fraunces', serif;
    font-size: 12px; color: #6a6f7a; margin-top: 6px; line-height:1.55;
  }
  .search-bar {
    display:flex; align-items:center; gap:12px;
    border: 1px solid rgba(184,147,92,0.30); border-radius: 12px; padding: 13px 18px;
    background: rgba(255,255,255,0.7); margin-bottom: 14px;
  }
  .search-bar input { flex:1; background:transparent; border:none; outline:none; color: var(--ivory); font-family:'Archivo',sans-serif; font-size: 15px; }
  .search-bar input::placeholder { color: rgba(106,111,122,0.6); }
  .stock-list { display:flex; flex-direction:column; gap: 8px; max-height: 300px; overflow-y:auto; }
  .stock-row {
    display:flex; align-items:center; gap: 14px;
    padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px;
    cursor: pointer; transition: all .2s;
  }
  .stock-row:hover { border-color: rgba(35,184,153,0.5); }
  .stock-row.on { border-color: var(--teal); background: var(--teal-dim); }
  .s-check {
    width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size: 13px; color: transparent;
    transition: all .2s; flex-shrink: 0;
  }
  .stock-row.on .s-check { background: var(--teal); border-color: var(--teal); color: var(--navy); }
  .s-logo { width: 38px; height: 38px; border-radius: 10px; background: rgba(23,32,46,0.06); display:flex; align-items:center; justify-content:center; font-size: 19px; }
  .s-meta { flex: 1; }
  .s-tick { font-family:'IBM Plex Mono',monospace; font-size: 15px; font-weight:500; }
  .s-name { font-size: 12px; color: var(--muted); }
  .s-price { text-align:right; }
  .s-val { font-family:'IBM Plex Mono',monospace; font-size: 13px; }
  .s-chg { font-family:'IBM Plex Mono',monospace; font-size: 11px; color: var(--teal); }
  .s-chg.neg { color: var(--red); }
  .sel-count { font-family:'IBM Plex Mono',monospace; font-size: 11px; color: var(--amber); margin-top: 12px; letter-spacing:.06em; }
  .wz-block-label {
    font-family:'IBM Plex Mono',monospace; font-size: 11px; letter-spacing:.14em;
    text-transform: uppercase; color: var(--teal); margin: 8px 0 14px;
    padding-bottom: 8px; border-bottom: 1px solid var(--line);
  }
  .wz-block-label:not(:first-child) { margin-top: 24px; }
  .asset-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  .atab {
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
    background: transparent; color: var(--muted); cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em;
    transition: all .18s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .atab.on { border-color: var(--teal); color: var(--teal); background: var(--teal-dim); }

  /* face-value display toggle */
  .face-toggle { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
  .face {
    border: 1px solid var(--line); border-radius: 12px; padding: 16px;
    cursor: pointer; transition: all .2s; text-align:center;
  }
  .face:hover { border-color: rgba(35,184,153,0.5); }
  .face.on { border-color: var(--teal); background: var(--teal-dim); }
  .face-big { font-family:'Fraunces',serif; font-size: 24px; font-weight: 400; }
  .face-cap { font-family:'IBM Plex Mono',monospace; font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-top: 6px; line-height:1.5; }
  .face-note { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.55; font-style: italic; }
  #faceStockSel { margin-top: 12px; display: none; }
  #faceStockSel select {
    width: 100%; background: var(--navy); border: 1px solid var(--line); color: var(--ivory);
    padding: 12px 14px; border-radius: 10px; font-family:'IBM Plex Mono',monospace; font-size: 13px; outline: none;
  }

  .f-row { margin-bottom: 18px; }
  .f-label { display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-bottom:8px; }
  .f-input {
    width:100%; background: rgba(255,255,255,0.7); border:1px solid var(--line);
    border-radius: 10px; color: var(--ivory); padding: 13px 16px;
    font-family:'Archivo',sans-serif; font-size:14px; outline:none; transition: border .2s;
  }
  .f-input:focus { border-color: var(--teal); }
  textarea.f-input { min-height: 80px; resize: vertical; }
  /* AI writer */
  .ai-writer {
    display: flex; align-items: center; gap: 14px; margin-top: 12px;
    flex-wrap: wrap;
  }
  .ai-writer-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px;
    background: linear-gradient(135deg, rgba(184,147,92,0.14) 0%, rgba(184,147,92,0.04) 100%);
    border: 1px solid rgba(184,147,92,0.40);
    color: var(--ivory);
    font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer; transition: all .22s;
  }
  .ai-writer-btn:hover {
    border-color: var(--amber);
    background: linear-gradient(135deg, rgba(184,147,92,0.22) 0%, rgba(184,147,92,0.08) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(184,147,92,0.14);
  }
  .ai-writer-btn:disabled { opacity: 0.65; cursor: wait; transform: none; }
  .ai-spark { font-size: 14px; }
  .ai-spark.spinning { animation: aiPulse 1s ease-in-out infinite; }
  @keyframes aiPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }
  .ai-writer-hint {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 11px; color: var(--muted); flex: 1; min-width: 200px; line-height: 1.5;
  }
  .ai-suggestions {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    margin-top: 14px;
  }
  .ai-sug {
    padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(184,147,92,0.22);
    cursor: pointer; transition: all .22s;
  }
  .ai-sug:hover {
    border-color: var(--amber);
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(184,147,92,0.12);
  }
  .ai-sug-tone {
    font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
  }
  .ai-sug-text {
    font-family: 'Fraunces', serif;
    font-size: 14px; color: var(--ivory); line-height: 1.55;
  }

  .fmt-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .fmt {
    border: 1px solid var(--line); border-radius: 14px; padding: 20px;
    cursor: pointer; transition: all .2s; position: relative;
  }
  .fmt:hover { border-color: rgba(35,184,153,0.5); }
  .fmt.on { border-color: var(--teal); background: var(--teal-dim); }
  .fmt-icon { font-size: 26px; margin-bottom: 10px; }
  .fmt-name { font-weight: 700; font-size: 14px; }
  .fmt-price { font-family:'IBM Plex Mono',monospace; font-size: 12px; color: var(--teal); margin-top: 4px; }
  .fmt-desc { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.55; }

  /* Payment method picker */
  .pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .pay {
    border: 1px solid var(--line); border-radius: 12px; padding: 14px 10px;
    cursor: pointer; transition: all .2s; text-align: center; position: relative;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .pay:hover { border-color: rgba(35,184,153,0.5); }
  .pay.on { border-color: var(--teal); background: var(--teal-dim); }
  .pay-icon {
    height: 32px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 6px;
  }
  .pay-name {
    font-size: 12px; font-weight: 700; color: var(--ivory);
    display: flex; align-items: center; justify-content: center; gap: 4px;
  }
  .pay-sub {
    font-size: 10px; color: var(--muted); margin-top: 3px;
    font-family: 'IBM Plex Mono', monospace; line-height: 1.4;
  }
  #shipFields { display:none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
  .ship-2col { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }

  .sum-row { display:flex; justify-content:space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
  .sum-row:last-of-type { border: none; }
  .sum-l { color: var(--muted); font-family:'IBM Plex Mono',monospace; font-size:12px; }
  .sum-v { font-family:'IBM Plex Mono',monospace; }
  .sum-v.hl { color: var(--teal); font-weight: 500; }

  .wz-nav {
    display: flex; flex-direction: column; gap: 10px; margin-top: 28px;
  }
  .wz-nav-row {
    display: flex; gap: 10px;
  }
  .btn {
    padding: 16px 20px; border-radius: 14px; cursor: pointer;
    font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600;
    letter-spacing: 0.02em;
    transition: all .22s; border: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    width: 100%;
    min-height: 54px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  .btn-go {
    background: linear-gradient(180deg, #1f2b3d 0%, #14202f 100%);
    color: #f7ecd6;
    box-shadow: 0 8px 20px rgba(23,32,46,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .btn-go:hover {
    box-shadow: 0 12px 28px rgba(23,32,46,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
    transform: translateY(-1px);
  }
  .btn-go:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(23,32,46,0.22); }
  .btn-back {
    background: transparent; color: #6a6f7a;
    border: 1px solid rgba(184,147,92,0.35);
    width: auto; min-width: 100px; flex-shrink: 0;
  }
  .btn-back:hover { color: var(--ivory); border-color: var(--amber); background: rgba(255,255,255,0.4); }
  .btn-outline {
    background: transparent; color: var(--ivory);
    border: 1px solid var(--ivory);
  }
  .btn-outline:hover { background: var(--ivory); color: #f7ecd6; }

  /* ══════════ PAYMENT INSTRUCTIONS OVERLAY ══════════ */
  .pay-overlay {
    position: fixed; inset: 0; z-index: 250;
    background: rgba(23,32,46,0.55);
    backdrop-filter: blur(14px);
    display: none; align-items: flex-start; justify-content: center;
    padding: 32px 20px; overflow-y: auto;
    animation: fade .3s ease;
  }
  .pay-overlay.open { display: flex; }
  .pay-wrap {
    max-width: 560px; width: 100%;
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(184,147,92,0.08), transparent 60%),
      linear-gradient(180deg, #fbf6ea 0%, #f4ecdb 100%);
    border: 1px solid rgba(184,147,92,0.25);
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 40px 100px -20px rgba(0,0,0,0.4);
    position: relative;
  }
  .pay-wrap::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 96px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity: 0.55;
  }
  .pay-topbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
  }
  .pay-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: none;
    font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); cursor: pointer;
    transition: color .2s;
    padding: 6px 0;
  }
  .pay-back:hover { color: var(--ivory); }
  .pay-ref-badge {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted);
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(184,147,92,0.2);
  }
  .pay-ref-badge span { color: var(--ivory); font-weight: 500; }

  /* Header */
  .pay-header { text-align: center; margin-bottom: 22px; }
  .pay-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #d8b96b 0%, #b18a3d 100%);
    color: #fbf6ea;
    margin: 0 auto 14px;
    box-shadow: 0 10px 24px rgba(184,147,92,0.28);
    animation: checkPop .5s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes checkPop {
    0% { transform: scale(0.3); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
  }
  .pay-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
    margin-bottom: 12px;
  }
  .pay-title {
    font-family: 'Playfair Display', serif; font-weight: 400;
    font-size: clamp(22px, 3vw, 28px);
    color: var(--ivory); line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .pay-title em {
    font-style: italic; font-weight: 600;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Countdown timer */
  .pay-timer {
    text-align: center;
    padding: 16px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(184,147,92,0.22);
    border-radius: 14px;
    margin-bottom: 20px;
    transition: border-color .3s, background .3s;
  }
  .pay-timer.warn { border-color: rgba(212,73,74,0.4); background: rgba(212,73,74,0.06); }
  .pay-timer.expired { border-color: var(--red); background: rgba(212,73,74,0.1); }
  .pt-label {
    font-family: 'Archivo', sans-serif; font-weight: 500;
    font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .pt-clock {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 34px; color: var(--ivory);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 8px;
  }
  .pay-timer.warn .pt-clock { color: #a04549; }
  .pay-timer.expired .pt-clock { color: var(--red); }
  .pt-sub {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 11px; color: var(--muted);
    line-height: 1.5;
  }

  /* Payment details card */
  .pay-details {
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbf6ea 100%);
    border: 1px solid rgba(184,147,92,0.28);
    border-radius: 16px;
    margin-bottom: 22px;
    position: relative;
    box-shadow: 0 6px 16px -6px rgba(23,32,46,0.08);
  }
  .pd-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(184,147,92,0.28);
    margin-bottom: 14px;
  }
  .pd-brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Archivo', sans-serif; font-weight: 800;
    letter-spacing: -.02em;
  }
  .pd-copy {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(23,32,46,0.06);
    border: 1px solid rgba(184,147,92,0.25);
    color: var(--ivory);
    font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; transition: all .2s;
  }
  .pd-copy:hover { border-color: var(--amber); background: rgba(184,147,92,0.10); }
  .pd-copy.copied { color: #1a7e69; border-color: #1a7e69; background: rgba(26,126,105,0.08); }
  .pd-rows { display: flex; flex-direction: column; gap: 10px; }
  .pd-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 3px 0;
  }
  .pd-label {
    font-family: 'Archivo', sans-serif; font-weight: 500;
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
  }
  .pd-value {
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: 15px; color: var(--ivory);
    text-align: right;
    letter-spacing: -.005em;
  }
  .pd-value.mono {
    font-family: 'IBM Plex Mono', monospace; font-weight: 500;
    font-size: 14px;
  }
  .pd-value.big {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 20px;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .pd-value.ref {
    font-family: 'IBM Plex Mono', monospace; font-weight: 600;
    font-size: 14px; color: var(--amber);
    letter-spacing: .04em;
  }
  .pd-hint {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 11px; color: var(--muted);
    margin-top: 14px; padding-top: 12px;
    border-top: 1px dashed rgba(184,147,92,0.2);
    line-height: 1.55;
  }

  /* 3-step instructions */
  .pay-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
  .pay-step {
    display: flex; gap: 14px; align-items: flex-start;
  }
  .pay-step-n {
    flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(184,147,92,0.15);
    border: 1px solid rgba(184,147,92,0.35);
    color: var(--amber);
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  .pay-step-body { flex: 1; }
  .pay-step-t {
    font-family: 'Playfair Display', serif; font-weight: 600;
    font-size: 14px; color: var(--ivory);
    letter-spacing: -.005em;
  }
  .pay-step-d {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 12px; color: var(--muted);
    margin-top: 2px; line-height: 1.55;
  }

  /* Upload dropzone */
  .pay-upload-wrap { margin-bottom: 18px; }
  .pay-upload {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 32px 20px;
    background: rgba(255,255,255,0.55);
    border: 2px dashed rgba(184,147,92,0.35);
    border-radius: 16px;
    cursor: pointer; transition: all .22s;
    text-align: center;
  }
  .pay-upload:hover, .pay-upload.dragging {
    border-color: var(--amber);
    background: rgba(255,255,255,0.85);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(184,147,92,0.14);
  }
  .pu-icon {
    color: var(--amber);
    margin-bottom: 12px;
  }
  .pu-title {
    font-family: 'Playfair Display', serif; font-weight: 600;
    font-size: 16px; color: var(--ivory);
    margin-bottom: 4px;
  }
  .pu-sub {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 11px; color: var(--muted); line-height: 1.5;
    max-width: 320px;
  }
  .pu-drop-hint {
    margin-top: 10px;
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--amber); opacity: 0.7;
  }

  /* Preview after upload */
  .pay-preview {
    display: flex; gap: 14px; align-items: stretch;
    padding: 12px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(184,147,92,0.30);
    border-radius: 14px;
    animation: fade .25s ease;
  }
  .pp-thumb {
    width: 96px; height: 96px;
    border-radius: 10px; overflow: hidden;
    background: rgba(23,32,46,0.06);
    border: 1px solid rgba(184,147,92,0.18);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .pp-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .pp-info {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    gap: 4px;
  }
  .pp-name {
    font-family: 'Playfair Display', serif; font-weight: 600;
    font-size: 14px; color: var(--ivory);
    word-break: break-all;
  }
  .pp-size {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    color: var(--muted); letter-spacing: .08em;
  }
  .pp-remove {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 4px;
    background: transparent; border: none;
    font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--red); cursor: pointer;
    padding: 4px 0;
  }
  .pp-remove:hover { text-decoration: underline; }

  .pay-confirm {
    width: 100%;
    margin-bottom: 12px;
  }
  .pay-confirm:disabled {
    opacity: 0.5; cursor: not-allowed;
    background: linear-gradient(180deg, #6b7484 0%, #4d5666 100%) !important;
  }
  .pay-skip {
    text-align: center;
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 12px; color: var(--muted);
    cursor: pointer; padding: 6px;
  }
  .pay-skip:hover { color: var(--ivory); text-decoration: underline; }
  .pay-security {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(184,147,92,0.15);
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--muted);
  }

  /* State banner — shown when opening via URL for non-awaiting orders */
  .pay-state-banner {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px; border-radius: 14px;
    margin-bottom: 18px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(184,147,92,0.3);
  }
  .pay-state-banner.review  { background: linear-gradient(135deg, rgba(214,124,30,0.12), rgba(214,124,30,0.04)); border-color: rgba(214,124,30,0.4); }
  .pay-state-banner.ok      { background: linear-gradient(135deg, rgba(26,126,105,0.10), rgba(26,126,105,0.02)); border-color: rgba(26,126,105,0.4); }
  .pay-state-banner.bad     { background: linear-gradient(135deg, rgba(212,73,74,0.10), rgba(212,73,74,0.02)); border-color: rgba(212,73,74,0.4); }
  .pay-state-banner.gone    { background: rgba(106,111,122,0.06); border-color: rgba(106,111,122,0.3); }
  .psb-icon { font-size: 26px; flex-shrink: 0; line-height: 1; }
  .psb-body { flex: 1; }
  .psb-title {
    font-family: 'Playfair Display', serif; font-weight: 600;
    font-size: 16px; color: var(--ivory); line-height: 1.25;
    margin-bottom: 4px;
  }
  .psb-sub {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 12px; color: var(--muted); line-height: 1.55;
  }

  /* Return-later block (link + email placeholder) */
  .pay-return {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 16px 18px; border-radius: 14px;
    margin-top: 14px;
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(184,147,92,0.22);
  }
  .pr-icon {
    color: var(--amber); flex-shrink: 0;
    margin-top: 2px;
  }
  .pr-body { flex: 1; min-width: 0; }
  .pr-title {
    font-family: 'Playfair Display', serif; font-weight: 600;
    font-size: 14px; color: var(--ivory); margin-bottom: 4px;
  }
  .pr-sub {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 12px; color: var(--muted); line-height: 1.55;
    margin-bottom: 10px;
  }
  .pr-sub b { font-style: normal; color: var(--ivory); font-weight: 500; }
  .pr-link-row {
    display: flex; gap: 6px; align-items: stretch;
    margin-bottom: 8px;
  }
  .pr-link {
    flex: 1; min-width: 0;
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid rgba(184,147,92,0.3);
    background: rgba(255,255,255,0.7);
    color: var(--ivory);
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: .02em; outline: none;
    overflow: hidden; text-overflow: ellipsis;
  }
  .pr-copy {
    padding: 6px 14px; border-radius: 8px;
    background: var(--ivory); color: #f7ecd6;
    border: none;
    font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; transition: all .2s;
    flex-shrink: 0;
  }
  .pr-copy:hover { background: #0f1a2a; }
  .pr-copy.copied { background: #1a7e69; }
  .pr-devnote {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    color: var(--muted); letter-spacing: .08em; line-height: 1.5;
    padding-top: 8px; border-top: 1px dashed rgba(184,147,92,0.15);
    margin-top: 4px;
  }

  /* COD variant — no timer, simpler layout */
  .pay-wrap.cod .pay-timer,
  .pay-wrap.cod .pay-steps,
  .pay-wrap.cod .pay-upload-wrap,
  .pay-wrap.cod .pay-security { display: none; }
  .pay-wrap.cod .pay-confirm { background: linear-gradient(180deg, #1f2b3d 0%, #14202f 100%); opacity: 1; }

  @media (max-width: 560px) {
    .pay-wrap { padding: 22px 18px; border-radius: 20px; }
    .pt-clock { font-size: 28px; }
    .pay-title { font-size: 20px; }
    .pp-thumb { width: 78px; height: 78px; }
  }

  /* ══════════ LOGIN OVERLAY ══════════ */
  .login-ov {
    position: fixed; inset: 0; z-index: 260;
    background: rgba(23,32,46,0.6);
    backdrop-filter: blur(14px);
    display: none; align-items: flex-start; justify-content: center;
    padding: 32px 20px; overflow-y: auto;
    animation: fade .3s ease;
  }
  .login-ov.open { display: flex; }
  .login-wrap {
    max-width: 540px; width: 100%;
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(184,147,92,0.08), transparent 60%),
      linear-gradient(180deg, #fbf6ea 0%, #f4ecdb 100%);
    border: 1px solid rgba(184,147,92,0.25);
    border-radius: 24px;
    padding: 32px 28px 24px;
    box-shadow: 0 40px 100px -20px rgba(0,0,0,0.4);
    position: relative;
  }
  .login-wrap::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 96px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity: 0.55;
  }
  .login-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.5); border: 1px solid rgba(184,147,92,0.2);
    color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .2s;
  }
  .login-close:hover { color: var(--ivory); border-color: var(--amber); background: rgba(255,255,255,0.9); }

  .login-brand {
    text-align: center; margin-bottom: 22px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .login-mark { width: 40px; height: 40px; color: var(--amber); }
  .login-mark { --lg-stroke: var(--amber); --lg-heart: var(--amber); }
  .login-word {
    font-family: 'Playfair Display', serif; font-weight: 800;
    font-size: 32px; letter-spacing: -0.02em; color: var(--ivory);
    line-height: 1; margin-top: 4px;
  }
  .login-tagline {
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 13px; color: var(--amber);
  }

  .login-tabs {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 8px; margin-bottom: 22px;
  }
  .login-tab {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 10px; border-radius: 12px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(184,147,92,0.2);
    cursor: pointer; transition: all .22s;
    text-align: left;
    color: var(--ivory);
  }
  .login-tab:hover { border-color: var(--amber); background: rgba(255,255,255,0.85); transform: translateY(-1px); }
  .login-tab.on {
    background: linear-gradient(180deg, rgba(184,147,92,0.18), rgba(184,147,92,0.06));
    border-color: var(--amber);
    box-shadow: 0 6px 14px rgba(184,147,92,0.15);
  }
  .lt-icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
  .lt-body { flex: 1; min-width: 0; }
  .lt-t {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 13px; color: var(--ivory); line-height: 1.1;
  }
  .lt-d {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.2;
  }

  .login-form { animation: fade .25s ease; }
  .lf-header { text-align: center; margin-bottom: 20px; }
  .lf-header h3 {
    font-family: 'Playfair Display', serif; font-weight: 400;
    font-size: 22px; color: var(--ivory); line-height: 1.2;
    margin: 0 0 6px;
  }
  .lf-header p {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 13px; color: var(--muted); line-height: 1.55;
    margin: 0;
  }
  .lf-fields { display: flex; flex-direction: column; gap: 12px; }
  .lf-row { display: flex; flex-direction: column; gap: 4px; }
  .lf-label {
    font-family: 'Archivo', sans-serif; font-weight: 500;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--muted);
  }
  .lf-input {
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(184,147,92,0.30);
    background: rgba(255,255,255,0.6);
    color: var(--ivory);
    font-family: 'Fraunces', serif; font-size: 14px;
    outline: none; transition: all .2s;
  }
  .lf-input:focus { border-color: var(--amber); background: rgba(255,255,255,0.95); box-shadow: 0 0 0 3px rgba(184,147,92,0.12); }
  .lf-submit { margin-top: 6px; width: 100%; }
  .lf-switch {
    background: transparent; border: none;
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 12px; color: var(--amber);
    cursor: pointer; margin-top: 4px; padding: 6px;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(184,147,92,0.4);
  }
  .lf-switch:hover { color: var(--ivory); }

  .login-error {
    margin-top: 14px; padding: 10px 14px; border-radius: 10px;
    background: rgba(212,73,74,0.10); border: 1px solid rgba(212,73,74,0.35);
    color: var(--red);
    font-family: 'Fraunces', serif; font-style: italic; font-size: 12px;
    text-align: center;
    animation: shake .35s ease;
  }

  .login-demo-note {
    margin-top: 20px; padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.4);
    border: 1px dashed rgba(184,147,92,0.28);
  }
  .ldn-title {
    font-family: 'Archivo', sans-serif; font-weight: 700;
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--amber); margin-bottom: 10px;
  }
  .ldn-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
    font-family: 'Fraunces', serif; font-size: 11px;
    color: var(--ivory); line-height: 1.5;
  }
  .ldn-grid > div:last-child { grid-column: 1 / -1; }
  .ldn-grid b { color: var(--amber); font-weight: 600; }
  .ldn-grid code {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    background: rgba(23,32,46,0.06); padding: 1px 5px; border-radius: 4px;
  }
  .ldn-warn {
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(184,147,92,0.2);
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    color: var(--muted); letter-spacing: .06em; line-height: 1.55;
  }
  .ldn-warn code {
    font-family: 'IBM Plex Mono', monospace;
    background: rgba(23,32,46,0.06); padding: 1px 4px; border-radius: 3px;
  }

  /* ══════════ USER PILL & SIGN IN BUTTON (header) ══════════ */
  .user-area {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: 12px;
  }
  .btn-signin {
    padding: 13px 30px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(184,147,92,0.14) 0%, rgba(184,147,92,0.05) 100%);
    border: 1.5px solid rgba(184,147,92,0.55);
    color: var(--ivory);
    font-family: 'Archivo', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer; transition: all .2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(184,147,92,0.12);
  }
  .btn-signin:hover { border-color: var(--amber); background: linear-gradient(180deg, rgba(184,147,92,0.24) 0%, rgba(184,147,92,0.10) 100%); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(184,147,92,0.22); }
  .user-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px; border-radius: 999px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(184,147,92,0.3);
    cursor: pointer; transition: all .2s;
    position: relative;
  }
  .user-pill:hover { border-color: var(--amber); background: rgba(255,255,255,0.9); }
  .up-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #d8b96b, #b18a3d);
    color: #f7ecd6;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px;
  }
  .up-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
  .up-name {
    font-family: 'Playfair Display', serif; font-weight: 600;
    font-size: 12px; color: var(--ivory);
    max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .up-role {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--amber);
    margin-top: 1px;
  }
  .user-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 200px; padding: 8px; border-radius: 12px;
    background: linear-gradient(180deg, #fbf6ea 0%, #f4ecdb 100%);
    border: 1px solid rgba(184,147,92,0.28);
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.25);
    display: none; z-index: 300;
  }
  .user-menu.open { display: block; animation: fade .2s ease; }
  .um-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 12px; border-radius: 8px;
    background: transparent; border: none;
    font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 500;
    color: var(--ivory); cursor: pointer;
    transition: background .15s;
  }
  .um-item:hover { background: rgba(184,147,92,0.10); }
  .um-item.logout { color: var(--red); border-top: 1px dashed rgba(184,147,92,0.2); margin-top: 4px; padding-top: 12px; }

  @media (max-width: 720px) {
    .login-tabs { grid-template-columns: 1fr; }
    .login-tab { padding: 10px 12px; }
    .ldn-grid { grid-template-columns: 1fr; }
    .up-text { display: none; }
    .user-pill { padding: 4px; }
  }

  .cert-overlay {
    position: fixed; inset: 0; z-index: 200; background: rgba(12,22,32,0.93);
    backdrop-filter: blur(12px); display: none; align-items:flex-start; justify-content:center;
    padding: 32px 24px; overflow-y: auto;
  }
  .cert-overlay.open { display: flex; }
  .cert-wrap { max-width: 880px; width: 100%; }
  .cert-actions { display:flex; gap: 12px; justify-content:space-between; margin-bottom: 16px; flex-wrap:wrap; align-items:center; }
  .cert-tabs { display:flex; border: 1px solid var(--line); border-radius: 999px; overflow:hidden; }
  .cert-tab {
    padding: 9px 22px; background: transparent; border: none; cursor: pointer;
    font-family:'IBM Plex Mono',monospace; font-size: 11px; letter-spacing:.1em; text-transform:uppercase;
    color: var(--muted); transition: all .2s;
  }
  .cert-tab.active { background: var(--amber); color: var(--ivory); font-weight: 600; }
  .cert-pane { display: none; }
  .cert-pane.active { display: block; animation: fade .4s ease; }

  /* ══════════════════════════════════════════════════════════
     STOCK WITH LOVE CERTIFICATE — reference-inspired design
     Cream background · muted-gold accents · elegant serif italic
     ══════════════════════════════════════════════════════════ */
  .certificate {
    --wm-accent: #b8935c;
    --wm-ink: #17202e;
    --paper: #f0e9dc;
    background: var(--paper);
    color: var(--wm-ink);
    aspect-ratio: 1.414 / 1;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0,0,0,0.6);
    font-family: 'Playfair Display', serif;
  }
  /* Rising chart — as ambient background element */
  .cert-chart {
    position: absolute;
    top: 20%; left: 4%;
    width: 92%; height: 55%;
    pointer-events: none;
    opacity: .85;
    z-index: 1;
  }
  .cert-chart .chart-line {
    fill: none;
    stroke: var(--wm-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cert-chart .chart-fill { fill: url(#chartFillGrad); }
  .cert-chart .chart-dot {
    fill: var(--wm-accent);
    stroke: var(--paper);
    stroke-width: 3;
  }

  .cert-inner {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; flex-direction: column;
    padding: 5% 6% 4.5%;
  }

  /* ── WORDMARK ── */
  .cert-wordmark { align-items: center; text-align: center; gap: 0; }
  .cert-wm-name {
    font-size: clamp(38px, 6.8vw, 82px);
    color: var(--wm-ink);
    line-height: 1;
  }
  .cert-wm-tag { gap: clamp(10px, 1.8vw, 22px); margin-top: clamp(4px, 0.8vw, 10px); }
  .cert-wm-tag .wm-rule { width: clamp(28px, 4.5vw, 60px); background: var(--wm-accent); }
  .cert-wm-tag .wm-tag-text {
    font-size: clamp(14px, 2vw, 22px);
    letter-spacing: 0;
  }
  .cert-wm-heart {
    font-size: clamp(10px, 1.4vw, 15px);
    margin-top: clamp(4px, 0.6vw, 8px);
    line-height: 1;
  }
  .cert-wm-sub {
    font-size: clamp(9px, 1.15vw, 12px);
    letter-spacing: 0.35em;
    margin-top: clamp(8px, 1.3vw, 14px);
  }

  /* ── Personal message ── */
  .cert-message {
    text-align: center; font-style: italic;
    font-family: 'Playfair Display', serif;
    color: #52586a;
    font-size: clamp(9px, 1.2vw, 13px);
    margin-top: 1.5%;
    max-width: 70%;
    align-self: center;
    line-height: 1.55;
  }
  .cert-message:empty { display: none; }

  /* ── 3-column footer ── */
  .cert-columns {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 3%;
    margin-top: auto;
    padding-top: 3%;
  }
  .cert-col {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    position: relative;
  }
  .cert-col + .cert-col::before {
    content: '';
    position: absolute; left: -1.5%; top: 15%; bottom: 15%;
    width: 1px; background: rgba(184,147,92,0.35);
  }
  .cc-label {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(7px, 0.9vw, 10px);
    font-weight: 500;
    color: var(--wm-accent);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: clamp(6px, 1vw, 12px);
  }
  .cc-name {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(18px, 2.8vw, 34px);
    font-weight: 400;
    color: var(--wm-ink);
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  .cc-currency {
    font-size: 60%; color: var(--wm-accent);
    vertical-align: super; margin-right: 2px;
  }
  .cc-script {
    font-family: 'Sacramento', 'Dancing Script', cursive;
    font-size: clamp(22px, 3.6vw, 40px);
    color: var(--wm-ink);
    line-height: 1.1;
    padding-bottom: 0.15em;
  }
  .cc-heart { color: var(--wm-accent); font-family: 'Playfair Display', serif; }
  .cc-sub {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(7px, 0.85vw, 10px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6a6f7a;
    margin-top: 4px;
  }
  .cc-underline {
    width: 55%; height: 1px;
    background: var(--wm-accent);
    margin: clamp(6px, 1.1vw, 12px) auto clamp(6px, 1.1vw, 12px);
    opacity: 0.7;
  }
  .cc-foot {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(7px, 0.85vw, 10px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6a6f7a;
  }

  /* ── Bottom decorative line + tagline ── */
  .cert-footline {
    display: flex; align-items: center; gap: 10px;
    margin: 2.5% 8% 1%;
  }
  .cf-rule { flex: 1; height: 1px; background: rgba(184,147,92,0.5); }
  .cf-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(20px, 2.8vw, 28px); height: clamp(20px, 2.8vw, 28px);
    border: 1px solid var(--wm-accent);
    border-radius: 50%;
    padding: 3px;
    --lg-stroke: var(--wm-accent);
    --lg-heart: var(--wm-accent);
  }
  .cf-icon svg { width: 100%; height: 100%; }
  .cert-motto {
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    font-size: clamp(8px, 1vw, 11px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--wm-ink);
    line-height: 1.5;
  }

  /* ── PER-OCCASION ACCENT TWEAKS (subtle) ── */
  .certificate.occ-birthday   { --wm-accent: #c99a3c; }
  .certificate.occ-wedding    { --wm-accent: #a06565; }
  .certificate.occ-newbaby    { --wm-accent: #7ba6b8; }
  .certificate.occ-graduation { --wm-accent: #6c8a5f; }
  .certificate.occ-anniversary{ --wm-accent: #a06565; }
  .certificate.occ-other      { --wm-accent: #b8935c; }

  /* ══════════════════════════════════════════════════════
     THE STOCK WITH LOVE BOX — LUXURY PACKAGE PRESENTATION
     Matte black rigid box with gold-foil details,
     magnetic closure, cream interior, soft-touch finish.
     ══════════════════════════════════════════════════════ */
  .pkg-showcase {
    display: flex; flex-direction: column; align-items: center;
    padding: 30px 0 20px;
    color: var(--ivory);
  }

  /* ══════════ PRODUCT PHOTOGRAPHY ══════════ */
  .pkg-gallery {
    display: grid; grid-template-columns: 1.62fr 1fr;
    gap: 18px; width: 100%; max-width: 960px;
    margin: 0 auto 26px; align-items: start;
  }
  .pkg-shot { margin: 0; position: relative; }

  /* Frame: soft warm mat around the photo so the light backgrounds
     in both shots read as intentional rather than washed out */
  .pkg-shot-frame {
    position: relative; overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(160deg, #f6efe2 0%, #ece2d0 100%);
    padding: 6px;
    box-shadow:
      0 24px 54px -20px rgba(23,32,46,0.30),
      0 6px 16px -6px rgba(23,32,46,0.12),
      0 1px 0 rgba(255,255,255,0.85) inset;
    transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
  }
  .pkg-shot:hover .pkg-shot-frame {
    transform: translateY(-3px);
    box-shadow:
      0 34px 68px -22px rgba(23,32,46,0.36),
      0 8px 20px -6px rgba(23,32,46,0.14),
      0 1px 0 rgba(255,255,255,0.9) inset;
  }
  .pkg-shot img {
    display: block; width: 100%; height: auto;
    border-radius: 10px;
    /* subtle lift — the source shots are a touch flat */
    filter: saturate(1.04) contrast(1.03);
  }
  /* Inner edge so the photo has a defined boundary against the mat */
  .pkg-shot-frame::after {
    content: ''; position: absolute; inset: 6px;
    border-radius: 10px; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(23,32,46,0.07),
                inset 0 1px 3px rgba(23,32,46,0.05);
  }
  .pkg-shot figcaption {
    margin-top: 12px; text-align: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .pkg-shot figcaption b { color: var(--amber); font-weight: 500; }

  /* ══════════ LIVE PERSONALISATION ══════════ */
  .pkg-perso {
    width: 100%; max-width: 940px; margin: 0 auto 28px;
    padding: 20px 24px; border-radius: 16px;
    background: linear-gradient(180deg, #fbf6ea 0%, #f2eade 100%);
    border: 1px solid rgba(184,147,92,0.28);
  }
  .pp-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
    padding-bottom: 12px; border-bottom: 1px dashed rgba(184,147,92,0.28);
  }
  .pp-eyebrow {
    font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 10px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
  }
  .pp-live {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  }
  .pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; }
  .pp-field-wide { grid-column: 1 / -1; }
  .pp-k {
    font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 9px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--amber);
    margin-bottom: 6px;
  }
  .pp-v { color: var(--ivory); line-height: 1.35; }
  .pp-script {
    font-family: 'Sacramento', 'Playfair Display', serif;
    font-size: 30px; line-height: 1.15;
  }
  .pp-script.is-placeholder { color: rgba(106,111,122,0.5); }
  .pp-msg {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 13.5px; line-height: 1.6; color: #4a5262;
  }
  .pp-msg.is-placeholder { color: rgba(106,111,122,0.6); }

  @media (max-width: 780px) {
    .pkg-gallery { grid-template-columns: 1fr; max-width: 520px; }
    .pp-grid { grid-template-columns: 1fr; gap: 14px; }
    .pp-script { font-size: 26px; }
  }

  /* FEATURE STRIP */
  .pkg-features {
    display: grid; grid-template-columns: repeat(5,1fr); gap: 12px;
    margin-top: 34px; width: 100%; max-width: 760px;
    margin-left: auto; margin-right: auto;
  }
  .pkg-feat {
    text-align: center; padding: 20px 10px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(184,147,92,0.20);
    border-radius: 14px;
    transition: all .25s;
  }
  .pkg-feat:hover {
    transform: translateY(-2px);
    border-color: rgba(184,147,92,0.50);
    background: rgba(255,255,255,0.75);
    box-shadow: 0 6px 16px rgba(184,147,92,0.12);
  }
  .pkg-feat-icon {
    width: 32px; height: 32px; margin: 0 auto 10px;
    color: var(--amber);
  }
  .pkg-feat-t {
    font-family: 'Archivo', sans-serif;
    font-size: 10px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--ivory);
    line-height: 1.4;
  }

  @media (max-width: 720px) {
    .pkg-hero { aspect-ratio: 1.4 / 1; }
    .pkg-features { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  }
    display: flex; flex-direction: column; align-items: center;
    padding: 40px 0 20px;
    perspective: 1400px;
    perspective-origin: 50% 30%;
  }
  /* ══════════ LEGACY box classes kept for backwards compatibility ══════════ */
  .box-stage {
    display: flex; flex-direction: column; align-items: center;
    padding: 30px 0 10px;
    perspective: 1200px;
  }
  .giftbox {
    position: relative; width: min(560px, 92%); cursor: pointer;
  }
  .box-base {
    background: linear-gradient(160deg, #14283a, #0d1b28 70%);
    border: 1px solid rgba(229,176,74,0.35);
    border-radius: 6px;
    aspect-ratio: 1.5/1;
    position: relative;
    box-shadow: 0 50px 100px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
  }
  .box-base::before {
    content:''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 30% 20%, rgba(35,184,153,0.10), transparent 60%),
      repeating-linear-gradient(115deg, transparent, transparent 26px, rgba(229,176,74,0.03) 26px, rgba(229,176,74,0.03) 27px);
  }
  .box-cert-peek {
    position: absolute; left: 8%; right: 8%; top: 16%;
    background: #f8f5ec;
    border-radius: 3px;
    padding: 5% 6%;
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
    transform: rotate(-1.2deg);
    text-align: center;
    color: #17202e;
    font-family:'Fraunces',serif;
    transition: transform .5s cubic-bezier(.2,.8,.3,1);
    border: 1px solid rgba(178,138,46,0.5);
  }
  .giftbox:hover .box-cert-peek { transform: rotate(0deg) translateY(-14px); }
  .peek-brand { font-size: clamp(11px,1.6vw,16px); font-weight:600; }
  .peek-brand em { font-style: italic; color: #b28a2e; }
  .peek-line { font-family:'IBM Plex Mono',monospace; font-size: clamp(5px,0.8vw,8px); letter-spacing:.25em; text-transform:uppercase; color:#8a7d5e; margin-top: 3px; }
  .peek-val { font-size: clamp(16px,2.6vw,28px); font-weight: 300; margin-top: 6px; }
  .box-lid {
    position: absolute; inset: -3% -2% auto -2%;
    height: 34%;
    background: linear-gradient(165deg, #1a3247, #11212f 75%);
    border: 1px solid rgba(229,176,74,0.5);
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    transform-origin: top center;
    transition: transform .7s cubic-bezier(.2,.8,.3,1);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    z-index: 3;
  }
  .giftbox.open .box-lid { transform: rotateX(96deg) translateY(-10px); }
  .box-lid svg { width: 30px; height: 30px; }
  .lid-word { font-family:'Fraunces',serif; font-size: 22px; font-weight: 600; color: var(--ivory); letter-spacing:.02em; }
  .lid-word em { font-style: italic; color: var(--amber); }
  /* ribbon */
  .ribbon-v {
    position: absolute; top: -6%; bottom: -2%; left: 50%; width: 7%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #c9973a, #e5b04a 45%, #c9973a);
    z-index: 4; border-radius: 2px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    transition: opacity .4s, transform .5s;
  }
  .ribbon-bow {
    position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
    z-index: 5; font-size: 44px;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4));
    transition: opacity .4s, transform .5s;
  }
  .giftbox.open .ribbon-v { opacity: 0; transform: translateX(-50%) translateY(20px); }
  .giftbox.open .ribbon-bow { opacity: 0; transform: translateX(-50%) scale(.6) translateY(-16px); }
  .box-hint {
    margin-top: 26px; font-family:'IBM Plex Mono',monospace; font-size: 11px;
    letter-spacing:.14em; text-transform:uppercase; color: var(--muted);
  }
  .box-contents {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
    margin-top: 30px; width: 100%; max-width: 720px;
  }
  .bc {
    border: 1px solid var(--line); border-radius: 12px; padding: 16px 12px;
    text-align: center; background: var(--navy-2);
  }
  .bc-i { font-size: 22px; }
  .bc-t { font-size: 11px; font-weight: 700; margin-top: 8px; }
  .bc-d { font-size: 10px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

  /* ══════════ HERO — TWO COLUMN ══════════ */
  .hero-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    padding: 44px 0 20px;
    align-items: start;
  }
  .hero-left {
    padding-top: 20px;
    display: flex; flex-direction: column;
    text-align: left;
  }
  .hero-right-col {
    position: relative;
    display: flex; flex-direction: column;
    gap: 20px;
  }

  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--amber);
    margin-bottom: 22px;
    align-self: flex-start;
  }
  .live-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--amber); flex-shrink: 0;
    animation: blink 1.8s ease-in-out infinite;
  }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

  /* "A gift that grows" — editorial italic serif */
  .hero-tag {
    font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400;
    font-size: clamp(56px, 6.2vw, 84px);
    color: var(--ivory);
    line-height: 1.0;
    margin-top: 0;
    letter-spacing: -0.015em;
  }
  .hero-tag-sub {
    font-family: 'Archivo', sans-serif; font-weight: 500;
    font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--amber);
    margin-top: 22px;
    margin-bottom: 26px;
  }

  /* Paragraph — comfortable measure, better rhythm */
  .hero-p {
    font-family: 'Fraunces', serif; font-weight: 400;
    font-size: 16px; color: #4a5262; line-height: 1.75;
    max-width: 540px; margin-bottom: 34px;
    text-wrap: pretty;
    letter-spacing: 0.005em;
  }
  .hero-p b {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
    color: var(--ivory);
  }

  .hero-trust {
    display: flex; align-items: center; gap: 0; margin-bottom: 8px; flex-wrap: wrap;
    justify-content: flex-start;
  }
  .trust-item { text-align: left; padding: 0 24px 0 0; margin-right: 24px; position: relative; }
  .trust-item:not(:last-child)::after {
    content:''; position: absolute; right: 0; top: 10%; bottom: 10%;
    width: 1px; background: var(--line);
  }
  .ti-val { display: block; font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--ivory); }
  .ti-l { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
  .trust-sep { display: none; }

  /* ══════════ MOST GIFTED LEADERBOARD ══════════ */
  .top-gifted {
    margin-top: 40px;
    padding: 24px 26px;
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(184,147,92,0.06), transparent 60%),
      linear-gradient(180deg, #fbf6ea 0%, #f4ecdb 100%);
    border: 1px solid rgba(184,147,92,0.20);
    border-radius: 20px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.85) inset,
      0 20px 40px -18px rgba(23,32,46,0.08);
    position: relative;
  }
  .top-gifted::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 72px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity: 0.55;
  }
  .tg-head { margin-bottom: 18px; }
  .tg-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--amber);
    margin-bottom: 6px;
  }
  .tg-heading {
    font-family: 'Playfair Display', serif; font-weight: 400;
    font-size: clamp(19px, 2vw, 24px);
    color: var(--ivory); line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .tg-heading em {
    font-style: italic; color: var(--ivory);
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .tg-list { display: flex; flex-direction: column; gap: 6px; }
  .tg-row {
    display: grid;
    grid-template-columns: 22px 60px 1fr 42px;
    gap: 12px; align-items: center;
    padding: 8px 4px;
    border-bottom: 1px dashed rgba(184,147,92,0.15);
    transition: all .18s;
    cursor: pointer;
  }
  .tg-row:last-child { border-bottom: none; }
  .tg-row:hover {
    background: rgba(255,255,255,0.5);
    border-radius: 6px;
    padding: 8px 10px;
  }
  .tg-rank {
    font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400;
    font-size: 14px; color: var(--amber); text-align: center;
  }
  .tg-row:nth-child(-n+3) .tg-rank {
    font-weight: 700; font-size: 16px;
    color: var(--ivory);
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .tg-ticker {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 13px; color: var(--ivory);
    letter-spacing: 0.01em;
  }
  .tg-bar-wrap {
    height: 6px; border-radius: 999px;
    background: rgba(184,147,92,0.14);
    overflow: hidden; position: relative;
  }
  .tg-bar {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--amber) 0%, #d8b96b 100%);
    width: var(--w, 50%);
    transition: width 1.2s cubic-bezier(.2,.8,.3,1);
  }
  .tg-pct {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
    color: var(--muted); text-align: right;
  }

  /* Compact wizard card in the right column */
  .hero-right-col .wizard-card {
    max-width: 100%;
    padding: 32px 34px;
  }
  .hero-right-col .progress {
    margin: 0 auto 6px;
  }

  /* Legacy market card holder — no longer rendered */
  .hero-right { display: none; }
  .market-card { display: none; }

  /* ══════════ MARKET SNAPSHOT ══════════ */
  .market-snapshot {
    max-width: 100%;
    margin: 40px 0 30px;
    padding: 28px 32px;
    background:
      radial-gradient(ellipse 90% 60% at 50% 0%, rgba(184,147,92,0.07), transparent 60%),
      linear-gradient(180deg, #fbf6ea 0%, #f4ecdb 100%);
    border: 1px solid rgba(184,147,92,0.20);
    border-radius: 22px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 30px 60px -24px rgba(23,32,46,0.10),
      0 10px 24px -8px rgba(184,147,92,0.08);
    position: relative;
  }
  .market-snapshot::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 90px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity: 0.55;
  }
  .ms-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
  }
  .ms-title { flex: 1; min-width: 240px; }
  .ms-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--amber);
    margin-bottom: 10px;
  }
  .ms-heading {
    font-family: 'Playfair Display', serif; font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--ivory); line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .ms-heading em {
    font-style: italic; color: var(--ivory);
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .ms-sub {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 13px; color: var(--muted); margin-top: 8px;
    max-width: 480px;
  }
  .ms-refresh {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(184,147,92,0.35);
    color: var(--ivory);
    font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; transition: all .22s;
    flex-shrink: 0;
  }
  .ms-refresh:hover {
    border-color: var(--amber);
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
  }
  .ms-refresh.spinning svg { animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .ms-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
  .ms-tile {
    padding: 14px 16px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(184,147,92,0.18);
    border-radius: 14px;
    transition: all .22s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .ms-tile:hover {
    border-color: var(--amber);
    background: rgba(255,255,255,0.92);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(184,147,92,0.14);
  }
  .ms-tile-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 4px;
  }
  .ms-tile-t {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 14px; color: var(--ivory); letter-spacing: 0;
  }
  .ms-tile-b {
    font-family: 'IBM Plex Mono', monospace; font-size: 8px;
    color: var(--muted); letter-spacing: .12em; text-transform: uppercase;
  }
  .ms-tile-n {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 10px; color: var(--muted); line-height: 1.3;
    margin-bottom: 10px;
  }
  .ms-tile-p {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 20px; color: var(--ivory);
    letter-spacing: -.01em;
    display: flex; align-items: baseline;
  }
  .ms-tile-p .ms-cur {
    font-size: 11px; color: var(--amber);
    margin-right: 2px; font-style: italic; font-weight: 400;
    vertical-align: super;
  }
  .ms-tile-d {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
    margin-top: 3px; display: flex; align-items: center; gap: 4px;
  }
  .ms-tile-d.up { color: #1a7e69; }
  .ms-tile-d.down { color: var(--red); }
  .ms-tile-chart {
    margin-top: 8px; height: 26px;
    display: block;
  }
  .ms-tile-chart svg { width: 100%; height: 100%; overflow: visible; }
  .ms-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 20px; gap: 12px; flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
    padding-top: 16px; border-top: 1px solid rgba(184,147,92,0.15);
  }
  .ms-note { flex: 1; }
  .ms-time { color: var(--amber); }

  /* Mobile: stack + reflow */
  @media (max-width: 900px) {
    .hero-split {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 24px 0 12px;
    }
    .hero-left { padding-top: 0; }
    .hero-tag { font-size: 44px; text-align: center; }
    .hero-tag-sub, .hero-eyebrow { align-self: center; }
    .hero-p { text-align: center; margin-left: auto; margin-right: auto; }
    .hero-trust { justify-content: center; }
    .trust-item { padding: 0 14px; margin-right: 14px; }
    .ms-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 600px) {
    .ms-grid { grid-template-columns: repeat(2, 1fr); }
    .market-snapshot { padding: 22px 18px; }
  }
  }
  .market-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--teal), var(--amber));
  }
  .mc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
  .mc-brand { display: flex; align-items: center; gap: 7px; font-family: 'Fraunces', serif; font-size: 15px; font-weight: 600; }
  .mc-live { display: flex; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .15em; color: var(--teal); }
  .mc-ticker-strip { overflow: hidden; margin-bottom: 12px; }
  .mc-ticker-inner { display: flex; gap: 20px; animation: mtick 18s linear infinite; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
  .mt-item { display: flex; gap: 5px; color: var(--muted); }
  .mt-up { color: var(--teal); }
  .mt-dn { color: var(--red); }
  @keyframes mtick { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  .mc-chart { position: relative; margin-bottom: 14px; }
  .chart-svg { width: 100%; height: 80px; display: block; }
  .chart-label { position: absolute; top: 6px; left: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing:.08em; color: var(--muted); }

  .mc-gift-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 14px; background: rgba(35,184,153,0.06); border: 1px solid rgba(35,184,153,0.18);
    border-radius: 12px; margin-bottom: 12px;
  }
  .mc-gift-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing:.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
  .mc-gift-amount { font-family: 'Fraunces', serif; font-size: 30px; font-weight: 300; color: var(--ivory); }
  .mc-gift-shares { font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 500; color: var(--teal); }
  .mc-gift-note { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted); margin-top: 3px; letter-spacing:.04em; }

  .mc-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  .mc-pill {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; padding: 5px 10px;
    border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
    cursor: pointer; transition: all .18s; white-space: nowrap;
  }
  .mc-pill:hover, .mc-pill.on { border-color: var(--teal); color: var(--teal); background: var(--teal-dim); }
  .mc-footer { display: flex; justify-content: space-between; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--muted); letter-spacing: .08em; margin-top: 4px; }
  .mc-powered { color: var(--amber); }
  .mc-secure { color: var(--muted); }

  /* ticker tape */
  .hero-tape {
    overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 9px 0; margin-bottom: 40px;
    background: rgba(23,32,46,0.02);
  }
  .tape-inner { display: flex; gap: 56px; animation: ticker 28s linear infinite; white-space: nowrap; }
  .tape-item { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
  .tape-up { color: var(--teal); }
  .tape-dn { color: var(--red); }
  @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  @media (max-width: 780px) {
    .hero-section { padding: 28px 0 20px; }
    .hero-centered { max-width: 100%; }
    .hero-h1 { white-space: normal; }
    .hero-cta { width: 100%; }
    .hero-trust { gap: 0; }
    .trust-item { padding: 0 14px; }
    .hero-tape { margin-bottom: 24px; }
  }

  /* ══════════ ADMIN ══════════ */
  .admin-hero { padding: 40px 0 24px; }
  .admin-h1 { font-family:'Fraunces',serif; font-weight:300; font-size: clamp(32px,4vw,52px); letter-spacing:-.01em; line-height:1.05; }
  .admin-h1 em { font-style: italic; color: var(--teal); }
  .admin-p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 12px; max-width: 640px; }
  .admin-kpis {
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden; margin: 28px 0 28px;
  }
  .akpi { background: var(--navy-2); padding: 20px 22px; }
  .akpi-num { font-family:'Fraunces',serif; font-size: 30px; font-weight: 400; color: var(--teal); }
  .akpi-cap { font-family:'IBM Plex Mono',monospace; font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-top: 6px; }
  .admin-toolbar { display:flex; justify-content:space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; align-items:center; }
  .admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .admin-toolbar-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .admin-search {
    min-width: 240px; padding: 10px 14px; font-size: 13px;
    background: var(--navy-2);
  }
  .admin-btn-sm { padding: 10px 16px; font-size: 12px; min-height: 40px; width: auto; border-radius: 10px; }
  .orders-table-wrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--navy-2); }
  .orders-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .orders-table thead { background: rgba(23,32,46,0.03); }
  .orders-table th {
    text-align: left; padding: 14px 16px;
    font-family:'IBM Plex Mono',monospace; font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--line);
  }
  .orders-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ivory); vertical-align: middle; }
  .orders-table tr:last-child td { border-bottom: none; }
  .orders-table tr.row { cursor: pointer; transition: background .15s; }
  .orders-table tr.row:hover { background: rgba(35,184,153,0.05); }
  .ot-code { font-family:'IBM Plex Mono',monospace; font-size: 12px; color: var(--amber); }
  .ot-date { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .ot-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .ot-value { font-family:'IBM Plex Mono',monospace; color: var(--teal); font-weight: 500; }
  .ot-badge {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-family:'IBM Plex Mono',monospace; font-size: 10px; letter-spacing:.06em; text-transform:uppercase;
    border: 1px solid;
  }
  .ot-badge.b-awaiting_print { color: var(--amber); border-color: rgba(229,176,74,0.4); background: rgba(229,176,74,0.08); }
  .ot-badge.b-shipped        { color: #7fd4ff; border-color: rgba(127,212,255,0.4); background: rgba(127,212,255,0.08); }
  .ot-badge.b-delivered_digital { color: var(--teal); border-color: rgba(35,184,153,0.4); background: rgba(35,184,153,0.08); }
  .ot-badge.b-claimed        { color: #b48fff; border-color: rgba(180,143,255,0.4); background: rgba(180,143,255,0.08); }
  .ot-badge.b-cancelled      { color: var(--red); border-color: rgba(239,100,97,0.4); background: rgba(239,100,97,0.08); }

  /* Payment status badges */
  .pay-badge {
    display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
    font-family:'IBM Plex Mono',monospace; font-size: 10px; letter-spacing:.06em; text-transform: uppercase;
    border: 1px solid; white-space: nowrap;
  }
  .pay-badge.pay-awaiting_receipt { color: var(--amber); border-color: rgba(184,147,92,0.45); background: rgba(184,147,92,0.10); }
  .pay-badge.pay-under_review     { color: #d67c1e; border-color: rgba(214,124,30,0.45); background: rgba(214,124,30,0.10); font-weight: 600; }
  .pay-badge.pay-approved         { color: #1a7e69; border-color: rgba(26,126,105,0.45); background: rgba(26,126,105,0.10); }
  .pay-badge.pay-rejected         { color: var(--red);   border-color: rgba(212,73,74,0.45); background: rgba(212,73,74,0.10); }
  .pay-badge.pay-expired          { color: var(--muted); border-color: rgba(106,111,122,0.45); background: rgba(106,111,122,0.08); }
  .pay-badge.pay-cod_pending      { color: #806040; border-color: rgba(184,147,92,0.45); background: rgba(184,147,92,0.10); }
  .pay-badge.pay-cod_paid         { color: #1a7e69; border-color: rgba(26,126,105,0.45); background: rgba(26,126,105,0.10); }

  /* Tab count badge (on Review Receipts tab) */
  .atab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 6px; min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 999px;
    background: var(--red); color: white;
    font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 700;
    line-height: 1;
    animation: badgePulse 2s ease-in-out infinite;
  }
  @keyframes badgePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

  /* Alert KPI when reviews are pending */
  .akpi.akpi-alert {
    background: linear-gradient(180deg, rgba(214,124,30,0.10), rgba(214,124,30,0.03));
    border-color: rgba(214,124,30,0.45);
  }
  .akpi.akpi-alert .akpi-num { color: #d67c1e; }

  /* Receipt-uploaded dot next to payment method */
  .rc-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #1a7e69; margin-left: 6px; vertical-align: middle;
    box-shadow: 0 0 0 2px rgba(26,126,105,0.15);
  }

  /* Highlighted table row for orders under review */
  .orders-table tr.row-review td {
    background: linear-gradient(90deg, rgba(214,124,30,0.05), transparent 60%);
    border-left: 2px solid #d67c1e;
  }
  .orders-table tr.row-review:hover td {
    background: linear-gradient(90deg, rgba(214,124,30,0.10), transparent 60%);
  }

  /* Drawer receipt review section */
  .dr-section-review {
    background: linear-gradient(180deg, rgba(214,124,30,0.06), rgba(214,124,30,0.02));
    border: 1px solid rgba(214,124,30,0.28);
    border-radius: 12px; padding: 16px; margin-bottom: 18px;
  }
  .dr-receipt-thumb {
    display: flex; justify-content: center;
    margin: 12px 0 14px;
    background: rgba(23,32,46,0.04);
    border: 1px solid var(--line);
    border-radius: 10px; overflow: hidden;
    max-height: 320px;
  }
  .dr-receipt-thumb img {
    max-width: 100%; max-height: 320px; cursor: zoom-in;
    display: block; object-fit: contain;
  }
  .dr-receipt-pdf {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 40px 20px;
    font-family: 'Playfair Display', serif; font-size: 18px; color: var(--ivory);
    cursor: pointer;
    width: 100%;
  }
  .dr-receipt-pdf:hover { background: rgba(184,147,92,0.05); }
  .dr-receipt-meta {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px; margin-bottom: 12px;
    background: rgba(255,255,255,0.4);
    border-radius: 8px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    color: var(--muted);
  }
  .dr-receipt-meta b { color: var(--ivory); font-weight: 500; }
  .dr-review-actions {
    display: grid; grid-template-columns: 2fr 1fr; gap: 8px;
    margin-top: 14px;
  }
  .dr-approve {
    background: linear-gradient(180deg, #1e8a72 0%, #14614f 100%);
    color: #f7ecd6; border: none;
    box-shadow: 0 6px 14px rgba(30,138,114,0.28);
  }
  .dr-approve:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(30,138,114,0.34); }
  .dr-reject {
    background: transparent; color: var(--red);
    border: 1px solid rgba(212,73,74,0.45);
  }
  .dr-reject:hover { background: rgba(212,73,74,0.08); border-color: var(--red); }

  .empty-orders { padding: 60px 20px; text-align: center; color: var(--ivory); font-size: 15px; }

  /* order drawer */
  .drawer-overlay {
    position: fixed; inset: 0; z-index: 150; background: rgba(12,22,32,0.7);
    backdrop-filter: blur(6px); display: none; justify-content: flex-end;
  }
  .drawer-overlay.open { display: flex; }
  .drawer {
    width: min(520px, 100%); height: 100%; background: var(--navy-2);
    border-left: 1px solid var(--teal); padding: 32px; overflow-y: auto;
    animation: drawerIn .3s cubic-bezier(.2,.8,.2,1);
  }
  @keyframes drawerIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
  .dr-close { background: transparent; border: none; color: var(--muted); font-size: 22px; cursor: pointer; float: right; }
  .dr-code { font-family:'IBM Plex Mono',monospace; color: var(--amber); font-size: 13px; }
  .dr-title { font-family:'Fraunces',serif; font-size: 26px; font-weight: 400; margin: 6px 0 4px; }
  .dr-meta { font-family:'IBM Plex Mono',monospace; font-size: 11px; color: var(--muted); letter-spacing:.06em; }
  .dr-section {
    margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line);
  }
  .dr-h {
    font-family:'IBM Plex Mono',monospace; font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px;
  }
  .dr-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
  .dr-row span:first-child { color: var(--muted); }
  .dr-block { background: rgba(255,255,255,0.6); border: 1px solid var(--line); border-radius: 10px; padding: 14px; font-size: 13px; line-height: 1.7; }
  .dr-block b { color: var(--ivory); }
  .dr-block a { color: var(--teal); text-decoration: none; }
  .dr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }

  @media (max-width: 800px) {
    .admin-kpis { grid-template-columns: 1fr 1fr; }
    .orders-table { display: block; overflow-x: auto; }
    .admin-search { min-width: 180px; flex: 1; }
    .drawer { padding: 22px; }
  }

  @media print {
    body:not(.inv-printing) * { visibility: hidden; }
    .cert-overlay, .cert-overlay * { visibility: visible; }
    .cert-overlay { position: absolute; inset: 0; background: white; padding: 0; }
    .cert-actions, .cert-tabs, #paneBox { display: none !important; }
    #paneCert { display: block !important; }
    .certificate { box-shadow: none; width: 100%; }
  }

  /* ══════════ BROKER PITCH ══════════ */
  .pitch-hero { padding: 56px 0 30px; max-width: 880px; }
  .eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono',monospace; font-size: 11px; letter-spacing:.2em; text-transform:uppercase;
    color: var(--amber); margin-bottom: 20px;
  }
  .eyebrow::before { content:''; width: 30px; height:1px; background: var(--amber); }
  .pitch-hero h1 {
    font-family:'Fraunces',serif; font-weight:300;
    font-size: clamp(38px, 5vw, 60px); line-height: 1.06; letter-spacing:-.01em;
  }
  .pitch-hero h1 em { font-style: italic; color: var(--teal); }
  .pitch-hero > p { color: var(--muted); font-size: 16px; line-height: 1.75; margin-top: 20px; max-width: 700px; }
  .pitch-hero > p b { color: var(--ivory); }

  .kpi-band {
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: 16px;
    overflow: hidden; margin: 44px 0 60px;
  }
  .kpi { background: var(--navy-2); padding: 28px 24px; }
  .kpi-num { font-family:'Fraunces',serif; font-size: 38px; font-weight: 400; color: var(--teal); }
  .kpi-num small { font-size: 19px; color: var(--muted); }
  .kpi-cap { font-family:'IBM Plex Mono',monospace; font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); margin-top: 8px; line-height: 1.6; }

  .p-section { margin-bottom: 70px; }
  .p-h { font-family:'Fraunces',serif; font-size: 32px; font-weight: 400; margin-bottom: 8px; }
  .p-h em { font-style: italic; color: var(--amber); }
  .p-sub { color: var(--muted); font-size: 14px; margin-bottom: 30px; max-width: 680px; line-height: 1.7; }
  .p-sub b { color: var(--teal); }

  .cash-flow { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 980px; }
  .cf { border: 1px solid var(--line); border-radius: 14px; padding: 24px 20px; background: var(--navy-2); position: relative; }
  .cf-step { font-family:'IBM Plex Mono',monospace; font-size: 10px; letter-spacing:.15em; color: var(--amber); text-transform:uppercase; }
  .cf-title { font-weight: 700; font-size: 15px; margin: 8px 0; }
  .cf-desc { font-size: 12px; color: var(--muted); line-height: 1.65; }
  .cf-desc b { color: var(--teal); }
  .cf:not(:last-child)::after {
    content:'→'; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
    color: var(--teal); font-size: 16px; z-index: 2;
  }

  .cac-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .cac-card { border:1px solid var(--line); border-radius: 16px; padding: 30px; background: var(--navy-2); }
  .cac-card.win { border-color: var(--teal); background: linear-gradient(160deg, rgba(35,184,153,0.08), var(--navy-2) 60%); }
  .cac-tag { font-family:'IBM Plex Mono',monospace; font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); margin-bottom: 16px; }
  .cac-card.win .cac-tag { color: var(--teal); }
  .cac-big { font-family:'Fraunces',serif; font-size: 52px; font-weight: 300; line-height: 1; }
  .cac-big small { font-size: 18px; color: var(--muted); }
  .cac-list { margin-top: 22px; }
  .cac-item { display:flex; gap: 10px; font-size: 13px; color: var(--muted); padding: 7px 0; line-height: 1.55; }
  .cac-item::before { content:'—'; color: var(--muted); flex-shrink:0; }
  .cac-card.win .cac-item::before { content:'✓'; color: var(--teal); }
  .cac-card.win .cac-item { color: rgba(247,245,239,0.85); }

  .deal-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
  .deal { border: 1px solid var(--line); border-radius: 16px; padding: 30px; background: var(--navy-2); transition: all .25s; position: relative; }
  .deal:hover { transform: translateY(-4px); border-color: rgba(35,184,153,0.5); }
  .deal.rec { border-color: var(--amber); }
  .deal.rec::after {
    content:'RECOMMENDED'; position:absolute; top: -11px; left: 24px;
    font-family:'IBM Plex Mono',monospace; font-size: 9px; letter-spacing:.2em;
    background: var(--amber); color: var(--ivory); padding: 4px 12px; border-radius: 999px; font-weight: 500;
  }
  .deal-name { font-family:'Fraunces',serif; font-size: 23px; margin-bottom: 4px; }
  .deal-tag { font-family:'IBM Plex Mono',monospace; font-size: 11px; color: var(--teal); letter-spacing:.1em; text-transform: uppercase; }
  .deal-body { margin-top: 18px; font-size: 13px; color: var(--muted); line-height: 1.7; }
  .deal-body b { color: var(--ivory); }

  .obj-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .obj { border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: var(--navy-2); }
  .obj-q { font-weight: 700; font-size: 14px; margin-bottom: 10px; display:flex; gap:10px; }
  .obj-q::before { content:'Q'; color: var(--amber); font-family:'Fraunces',serif; font-style:italic; }
  .obj-a { font-size: 13px; color: var(--muted); line-height: 1.7; }
  .obj-a b { color: var(--teal); }

  .cta-panel {
    border: 1px solid var(--teal); border-radius: 20px;
    background: linear-gradient(140deg, rgba(35,184,153,0.1), var(--navy-2) 65%);
    padding: 48px; text-align: center;
  }
  .cta-panel h2 { font-family:'Fraunces',serif; font-size: 36px; font-weight: 300; }
  .cta-panel h2 em { font-style:italic; color: var(--teal); }
  .cta-panel p { color: var(--muted); margin: 14px auto 28px; max-width: 540px; font-size: 14px; line-height: 1.7; }

  /* ══════════ ADMIN AUTH GATE ══════════ */
  .admin-gate {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 90px 20px 100px; max-width: 520px; margin: 0 auto;
  }
  .ag-lock { font-size: 46px; margin-bottom: 18px; opacity: .85; }
  .ag-title {
    font-family: 'Playfair Display', serif; font-weight: 400; font-size: 34px;
    color: var(--ivory); margin: 0 0 10px; letter-spacing: -.01em;
  }
  .ag-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .ag-sub {
    font-family: 'Fraunces', serif; font-style: italic; font-size: 14px;
    color: var(--muted); line-height: 1.7; margin: 0 0 24px; text-wrap: pretty;
  }
  .ag-note {
    margin-top: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  }
  .ag-note a { color: var(--amber); cursor: pointer; text-decoration: none; }
  .ag-note a:hover { text-decoration: underline; }

  /* ══════════ CUSTOMER ORDER CARDS ══════════ */
  .acct-order {
    display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
    padding: 18px 22px; margin-bottom: 10px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(184,147,92,0.20); border-radius: 14px;
    cursor: pointer; transition: all .2s;
  }
  .acct-order:hover {
    transform: translateY(-2px); border-color: var(--amber);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 24px -10px rgba(184,147,92,0.28);
  }
  .ao-l { min-width: 0; }
  .ao-code {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 5px;
  }
  .ao-title {
    font-family: 'Playfair Display', serif; font-weight: 600; font-size: 17px;
    color: var(--ivory); line-height: 1.3; margin-bottom: 4px;
  }
  .ao-meta {
    font-family: 'Fraunces', serif; font-style: italic; font-size: 12px;
    color: var(--muted); line-height: 1.55;
  }
  .ao-reject {
    margin-top: 8px; padding: 8px 12px; border-radius: 8px;
    background: rgba(212,73,74,0.08); border-left: 3px solid var(--red);
    font-family: 'Fraunces', serif; font-size: 12px; color: var(--red);
  }
  .ao-r { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; text-align: right; }
  .ao-amount {
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 21px; line-height: 1;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .ao-inv {
    margin-top:2px; padding:5px 12px; border-radius:999px; cursor:pointer;
    background:rgba(255,255,255,.7); border:1px solid rgba(184,147,92,.4); color:var(--ivory);
    font-family:'Archivo',sans-serif; font-size:10px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; transition:.18s;
  }
  .ao-inv:hover{border-color:var(--amber); background:#fff}
  .ao-cta {
    font-family: 'Archivo', sans-serif; font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: #d67c1e;
  }

  /* ══════════ CFI PARTNER DASHBOARD ══════════ */
  .pdash-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; flex-wrap: wrap; margin-bottom: 8px;
  }
  .pdash-tag {
    padding: 8px 14px; border-radius: 999px; white-space: nowrap;
    background: rgba(184,147,92,0.10); border: 1px solid rgba(184,147,92,0.32);
    font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
  }
  .pdash-panel {
    padding: 26px 28px; margin-bottom: 18px;
    background: linear-gradient(180deg, #fbf6ea 0%, #f4ecdb 100%);
    border: 1px solid rgba(184,147,92,0.22); border-radius: 18px;
  }
  .pdash-panel-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  }
  .pdash-h2 {
    font-family: 'Playfair Display', serif; font-weight: 400; font-size: 22px;
    color: var(--ivory); margin: 0; letter-spacing: -.01em;
  }
  .pdash-h2 em {
    font-style: italic;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .pdash-note {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  }
  .pdash-rows { display: flex; flex-direction: column; }
  .pdash-row {
    display: grid; grid-template-columns: 130px 1fr auto 60px 130px;
    gap: 14px; align-items: center; padding: 13px 4px;
    border-bottom: 1px dashed rgba(184,147,92,0.18);
  }
  .pdash-row:last-child { border-bottom: none; }
  .pdash-row.tiers { grid-template-columns: 1fr auto; }
  .pdr-code {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    color: var(--amber); letter-spacing: .03em;
  }
  .pdr-name {
    font-family: 'Playfair Display', serif; font-weight: 500; font-size: 14px; color: var(--ivory);
  }
  .pdr-value {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); text-align: right;
  }
  .pdr-bounty {
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 15px; text-align: right;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .pdr-status {
    padding: 4px 10px; border-radius: 999px; text-align: center; border: 1px solid;
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  }
  .pdr-status.claimed { color:#1a7e69; border-color:rgba(26,126,105,.4); background:rgba(26,126,105,.07); }
  .pdr-status.pending { color:#d67c1e; border-color:rgba(214,124,30,.4); background:rgba(214,124,30,.07); }
  .pdr-status.kyc     { color:#3d7ea6; border-color:rgba(61,126,166,.4); background:rgba(61,126,166,.07); }
  .pdash-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-top: 18px; padding: 18px 20px;
    background: linear-gradient(135deg, rgba(184,147,92,0.10), rgba(184,147,92,0.02));
    border: 1px solid rgba(184,147,92,0.28); border-radius: 14px;
  }
  .pdb-l {
    font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 9px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
  }
  .pdb-v { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--ivory); font-weight: 500; }
  .pdb-v.big {
    font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .pdash-foot {
    margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(184,147,92,0.2);
    font-family: 'Fraunces', serif; font-style: italic; font-size: 12px;
    color: var(--muted); line-height: 1.65;
  }
  @media (max-width: 820px) {
    .pdash-row { grid-template-columns: 1fr auto; gap: 8px; }
    .pdr-code, .pdr-value { grid-column: 1 / -1; text-align: left; }
    .pdash-strip { grid-template-columns: 1fr 1fr; }
    .acct-order { grid-template-columns: 1fr; }
    .ao-r { align-items: flex-start; text-align: left; flex-direction: row; gap: 12px; align-items: center; }
  }

  .ob-wrap{font-family:'Archivo',sans-serif}
  .ob-title{font-family:'Playfair Display',serif;font-weight:400;font-size:26px;color:var(--ivory);margin:0 0 14px}
  .ob-status{padding:13px 16px;border-radius:9px;font-family:'Fraunces',serif;font-size:13px;line-height:1.6;margin-bottom:14px}
  .ob-status.ob-ok{background:rgba(26,126,105,.08);border:1px solid rgba(26,126,105,.35);color:#146b58}
  .ob-status.ob-warn{background:rgba(214,124,30,.09);border:1px solid rgba(214,124,30,.4);color:#a8631a}
  .ob-count{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .ob-item{padding:14px 16px;border-radius:10px;background:#FBF8F1;border:1px solid rgba(184,147,92,.24);margin-bottom:10px}
  .ob-item.ob-sent{border-left:3px solid #1a7e69}
  .ob-item.ob-queued{border-left:3px solid #d67c1e}
  .ob-item.ob-failed{border-left:3px solid var(--red)}
  .ob-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:4px}
  .ob-subj{font-family:'Playfair Display',serif;font-weight:600;font-size:14px;color:var(--ivory)}
  .ob-badge{padding:3px 9px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid;white-space:nowrap}
  .ob-b-sent{color:#1a7e69;border-color:rgba(26,126,105,.4);background:rgba(26,126,105,.07)}
  .ob-b-queued{color:#d67c1e;border-color:rgba(214,124,30,.4);background:rgba(214,124,30,.07)}
  .ob-b-failed{color:var(--red);border-color:rgba(212,73,74,.4);background:rgba(212,73,74,.07)}
  .ob-meta{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--muted);margin-bottom:8px}
  .ob-body{font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.65;color:var(--ivory);white-space:pre-wrap;word-break:break-word;margin:0;padding:10px 12px;background:rgba(255,255,255,.6);border-radius:7px;max-height:260px;overflow:auto}

  .pr-wa{margin-top:12px;padding-top:11px;border-top:1px dashed rgba(184,147,92,.22)}
  .pr-wa-t{font-family:'Playfair Display',serif;font-weight:600;font-size:13px;color:var(--ivory);margin-bottom:3px}
  .pr-wa-d{font-family:'Fraunces',serif;font-style:italic;font-size:11.5px;color:var(--muted);line-height:1.55;margin-bottom:9px}
  .pr-wa-btn{padding:8px 15px;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.75);
    border:1px solid rgba(184,147,92,.4);color:var(--ivory);font-family:'Archivo',sans-serif;
    font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:.18s}
  .pr-wa-btn:hover{border-color:var(--amber);background:#fff}
  .pr-wa-btn.copied{background:#1a7e69;border-color:#1a7e69;color:#fff}
  /* ══════════ INVOICE OVERLAY ══════════ */
  .inv-overlay{position:fixed; inset:0; z-index:400; background:#D6CDBA; display:none; flex-direction:column; overflow-y:auto}
  .inv-overlay.open{display:flex}
  .inv-bar{position:sticky; top:0; z-index:2; display:flex; gap:10px; align-items:center; padding:14px 22px; background:var(--ivory); box-shadow:0 2px 12px rgba(0,0,0,.18)}
  .inv-bar-t{margin-right:auto; font-family:'Playfair Display',serif; font-size:16px; color:#F7ECD6}
  .inv-btn{padding:9px 17px; border-radius:999px; cursor:pointer; border:1px solid rgba(184,147,92,.5); background:transparent; color:#F7ECD6; font-family:'Archivo',sans-serif; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:.18s; white-space:nowrap}
  .inv-btn:hover{border-color:var(--amber); background:rgba(184,147,92,.16)}
  .inv-btn-go{background:var(--amber); border-color:var(--amber); color:#fff}
  .inv-sheet{max-width:820px; width:100%; margin:26px auto 60px; background:#F0E9DC; padding:46px 50px 38px; box-shadow:0 22px 56px -20px rgba(23,32,46,.32)}

  .iv-head{display:flex; justify-content:space-between; align-items:flex-start; gap:30px; margin-bottom:32px}
  .iv-logo{width:186px; height:auto; display:block; margin-bottom:11px}
  .iv-issuer{font-family:'IBM Plex Mono',monospace; font-size:9.5px; line-height:1.85; color:var(--muted)}
  .iv-doc{text-align:right; flex-shrink:0}
  .iv-type{font-family:'Playfair Display',serif; font-size:29px; font-weight:600; letter-spacing:-.01em; margin-bottom:8px; color:var(--ivory)}
  .iv-meta{font-family:'IBM Plex Mono',monospace; font-size:10px; line-height:1.95; color:var(--muted)}
  .iv-meta b{color:var(--ivory); font-weight:500}
  .iv-rule{height:1px; background:rgba(184,147,92,.3); margin:0 0 24px}
  .iv-parties{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-bottom:26px}
  .iv-lbl{font-family:'Archivo',sans-serif; font-weight:600; font-size:8.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin-bottom:8px}
  .iv-party{font-family:'Fraunces',serif; font-size:13px; line-height:1.75; color:var(--ivory)}
  .iv-party .nm{font-weight:600; font-size:15px; display:block; margin-bottom:2px}
  .iv-held{border:1px solid rgba(61,126,166,.34); border-left:3px solid #3D7EA6; background:#FBF8F1; border-radius:7px; padding:17px 21px; margin-bottom:18px}
  .iv-held-top{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:9px}
  .iv-held-t{font-family:'Playfair Display',serif; font-size:16px; font-weight:600; color:var(--ivory)}
  .iv-held-amt{font-family:'Playfair Display',serif; font-size:21px; font-weight:700; color:var(--ivory); white-space:nowrap}
  .iv-held-rows{font-family:'IBM Plex Mono',monospace; font-size:10px; line-height:1.9; color:var(--muted)}
  .iv-held-rows b{color:var(--ivory); font-weight:500}
  .iv-held-note{margin-top:10px; padding-top:9px; border-top:1px dashed rgba(61,126,166,.3); font-family:'Fraunces',serif; font-style:italic; font-size:11px; line-height:1.6; color:#3D7EA6}
  .iv-table{width:100%; border-collapse:collapse}
  .iv-table th{font-family:'Archivo',sans-serif; font-weight:600; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); text-align:left; padding:0 0 9px; border-bottom:1px solid rgba(184,147,92,.3)}
  .iv-table th.r,.iv-table td.r{text-align:right}
  .iv-table td{font-family:'Fraunces',serif; font-size:12.5px; color:var(--ivory); padding:10px 0; border-bottom:1px solid rgba(184,147,92,.16); vertical-align:top}
  .iv-table td .sub{font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--muted); display:block; margin-top:3px}
  .iv-table td.r{font-family:'IBM Plex Mono',monospace; font-size:12px; white-space:nowrap}
  .iv-tot{display:flex; justify-content:flex-end; margin-top:13px}
  .iv-tot-in{width:290px}
  .iv-tot-r{display:flex; justify-content:space-between; padding:6px 0; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted)}
  .iv-tot-r b{color:var(--ivory); font-weight:500}
  .iv-grand{display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; padding-top:12px; border-top:2px solid var(--ivory)}
  .iv-grand span{font-family:'Archivo',sans-serif; font-weight:600; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
  .iv-grand b{font-family:'Playfair Display',serif; font-size:25px; font-weight:700; color:var(--ivory)}
  .iv-pay{margin-top:26px; padding:16px 20px; border-radius:8px; background:#FBF8F1; border:1px solid rgba(184,147,92,.34); display:grid; grid-template-columns:1fr 1fr; gap:7px 24px}
  .iv-pay-r{font-family:'IBM Plex Mono',monospace; font-size:10.5px; line-height:1.75; color:var(--muted)}
  .iv-pay-r b{color:var(--ivory); font-weight:500}
  .iv-foot{margin-top:24px; padding-top:15px; border-top:1px solid rgba(184,147,92,.3); font-family:'IBM Plex Mono',monospace; font-size:8.5px; line-height:1.9; color:var(--muted)}
  .iv-thanks{font-family:'Playfair Display',serif; font-style:italic; font-size:14px; color:var(--amber); margin-top:20px; text-align:center}
  .iv-empty{padding:50px 20px; text-align:center; font-family:'Fraunces',serif; font-style:italic; color:var(--muted)}

  @media print{
    /* Zero page margin so the beige runs edge to edge; the sheet
       carries the margin as padding instead. */
    @page{size:A4; margin:0}
    /* The overlay lives inside <main>, so hide siblings along the whole
       ancestor chain, not just top-level children of body. */
    body.inv-printing > div,
    body.inv-printing > svg,
    body.inv-printing > header,
    body.inv-printing > footer{display:none !important}
    body.inv-printing > main > *:not(.inv-overlay){display:none !important}
    body.inv-printing > main{display:block !important; padding:0 !important; margin:0 !important; max-width:none !important}
    body.inv-printing{background:#F0E9DC !important; padding:0 !important; margin:0 !important;
      -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
    body.inv-printing .inv-overlay{display:block !important; position:static !important; background:#F0E9DC !important; overflow:visible !important; inset:auto !important}
    body.inv-printing .inv-overlay,
    body.inv-printing .inv-overlay *{visibility:visible !important}
    .inv-bar{display:none !important}
    .inv-sheet{max-width:none; margin:0; padding:11mm; box-shadow:none; background:#F0E9DC !important}
    .iv-head{margin-bottom:22px}
    .iv-logo{width:156px; margin-bottom:8px}
    .iv-type{font-size:24px}
    .iv-parties{margin-bottom:19px}
    .iv-held{padding:13px 17px; margin-bottom:14px; break-inside:avoid}
    .iv-table td{padding:7px 0}
    .iv-pay{margin-top:18px; padding:12px 16px}
    .iv-foot{margin-top:16px; font-size:8px; line-height:1.7}
    .iv-thanks{margin-top:14px}
  }
  @media(max-width:640px){
    .inv-sheet{padding:26px 20px; margin:14px auto 40px}
    .iv-head,.iv-parties,.iv-pay{grid-template-columns:1fr; flex-direction:column; gap:16px}
    .iv-doc{text-align:left}
  }

  /* ══════════════════════════════════════════════════
     CFI PARTNER PAGE
     ══════════════════════════════════════════════════ */
  .cfi-hero {
    display: grid; grid-template-columns: 180px 1fr; gap: 42px;
    align-items: center; padding: 56px 0 34px;
  }
  .cfi-hero-mark img {
    width: 100%; height: auto; display: block;
    border-radius: 16px;
    box-shadow: 0 18px 40px -14px rgba(195,14,47,0.34), 0 3px 10px rgba(23,32,46,0.10);
  }
  .cfi-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--amber);
    margin-bottom: 12px;
  }
  .cfi-h1 {
    font-family: 'Playfair Display', serif; font-weight: 400;
    font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05;
    color: var(--ivory); letter-spacing: -.015em; margin: 0 0 16px;
  }
  .cfi-lede {
    font-family: 'Fraunces', serif; font-size: 16px; line-height: 1.75;
    color: #4a5262; max-width: 640px; margin: 0 0 18px; text-wrap: pretty;
  }
  .cfi-hero-meta {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
  .cfi-hero-meta i { color: rgba(184,147,92,0.6); font-style: normal; }

  .cfi-sec-head { margin-bottom: 26px; }
  .cfi-two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: start; }
  .cfi-prose p {
    font-family: 'Fraunces', serif; font-size: 14.5px; line-height: 1.85;
    color: #4a5262; margin: 0 0 15px; text-wrap: pretty;
  }
  .cfi-prose b { color: var(--ivory); font-weight: 600; }

  .cfi-facts-panel {
    padding: 22px 24px; border-radius: 16px;
    background: linear-gradient(180deg, #fbf6ea 0%, #f2eade 100%);
    border: 1px solid rgba(184,147,92,0.26);
  }
  .cfi-fact-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 10px 0; border-bottom: 1px dashed rgba(184,147,92,0.22);
  }
  .cfi-fact-row:last-of-type { border-bottom: none; }
  .cfr-k {
    font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 9.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted); flex-shrink: 0;
  }
  .cfr-v {
    font-family: 'Playfair Display', serif; font-weight: 600; font-size: 14px;
    color: var(--ivory); text-align: right;
  }
  .cfr-v sup { color: var(--amber); font-size: 9px; }
  .cfi-fact-note {
    margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(184,147,92,0.18);
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    color: var(--muted); letter-spacing: .04em; line-height: 1.5;
  }

  .cfi-why { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .cfi-why-card {
    padding: 26px 28px; border-radius: 16px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(184,147,92,0.22);
    transition: all .2s;
  }
  .cfi-why-card:hover {
    border-color: var(--amber); background: rgba(255,255,255,0.85);
    transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(184,147,92,0.24);
  }
  .cwc-n {
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 13px;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
  }
  .cwc-t {
    font-family: 'Playfair Display', serif; font-weight: 600; font-size: 19px;
    color: var(--ivory); margin: 0 0 9px; line-height: 1.28;
  }
  .cwc-d {
    font-family: 'Fraunces', serif; font-size: 13.5px; line-height: 1.7;
    color: var(--muted); margin: 0; text-wrap: pretty;
  }

  /* the two-sided split */
  .cfi-split {
    display: grid; grid-template-columns: 1fr 110px 1fr; gap: 0; align-items: stretch;
  }
  .cfi-side {
    padding: 28px 30px; border-radius: 18px;
    border: 1px solid rgba(184,147,92,0.24);
  }
  .cfi-side-us   { background: linear-gradient(180deg, #fbf6ea 0%, #f2eade 100%); }
  .cfi-side-them { background: linear-gradient(180deg, #ffffff 0%, #faf6f1 100%); }
  .cs-brand {
    font-family: 'Playfair Display', serif; font-weight: 800; font-size: 24px;
    color: var(--ivory); letter-spacing: -.02em; margin-bottom: 4px;
  }
  .cs-brand i { font-weight: 400; font-size: 14px; color: var(--amber); font-style: italic; }
  .cs-brand-cfi { display: flex; align-items: center; gap: 11px; font-size: 18px; }
  .cs-brand-cfi img { width: 38px; height: 38px; border-radius: 7px; display: block; }
  .cs-role {
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--amber);
    margin-bottom: 18px;
  }
  .cs-list { list-style: none; padding: 0; margin: 0; }
  .cs-list li {
    position: relative; padding: 8px 0 8px 20px;
    font-family: 'Fraunces', serif; font-size: 13.5px; line-height: 1.55; color: #4a5262;
    border-bottom: 1px dashed rgba(184,147,92,0.18);
  }
  .cs-list li:last-child { border-bottom: none; }
  .cs-list li::before {
    content: ''; position: absolute; left: 3px; top: 15px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--amber);
  }
  .cfi-handover {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  }
  .ch-line { flex: 1; width: 1px; background: linear-gradient(180deg, transparent, rgba(184,147,92,0.5), transparent); }
  .ch-badge {
    font-family: 'IBM Plex Mono', monospace; font-size: 8.5px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
    text-align: center; line-height: 1.5;
    padding: 9px 7px; border-radius: 999px;
    border: 1px solid rgba(184,147,92,0.4); background: rgba(255,255,255,0.7);
  }
  .cfi-guard {
    margin-top: 20px; padding: 18px 24px; border-radius: 14px;
    background: var(--ivory); color: #cfd6e0;
    font-family: 'Fraunces', serif; font-size: 13.5px; line-height: 1.7;
  }
  .cfi-guard b { color: #fff; font-weight: 600; }

  .cfi-closing {
    text-align: center; padding: 40px 20px 30px;
    border-top: 1px solid rgba(184,147,92,0.2);
  }
  .cfi-closing-t {
    font-family: 'Playfair Display', serif; font-size: 24px; color: var(--ivory); margin: 0 0 7px;
  }
  .cfi-closing-d {
    font-family: 'Fraunces', serif; font-style: italic; font-size: 13.5px;
    color: var(--muted); margin: 0 auto 20px; max-width: 460px; line-height: 1.65;
  }
  .cfi-disclaimer {
    margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(184,147,92,0.16);
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; line-height: 1.75;
    color: var(--muted); letter-spacing: .03em; text-align: center; max-width: 780px;
    margin-left: auto; margin-right: auto;
  }

  @media (max-width: 900px) {
    .cfi-hero { grid-template-columns: 1fr; gap: 24px; padding: 34px 0 24px; }
    .cfi-hero-mark img { max-width: 130px; }
    .cfi-two { grid-template-columns: 1fr; gap: 24px; }
    .cfi-why { grid-template-columns: 1fr; }
    .cfi-split { grid-template-columns: 1fr; gap: 14px; }
    .cfi-handover { flex-direction: row; padding: 4px 0; }
    .ch-line { width: auto; height: 1px; flex: 1;
      background: linear-gradient(90deg, transparent, rgba(184,147,92,0.5), transparent); }
  }

  /* ══════════ ADMIN CLASSIFICATION BLOCK ══════════ */
  .dr-section-classify {
    background: linear-gradient(180deg, rgba(61,126,166,0.07), rgba(61,126,166,0.02));
    border: 1px solid rgba(61,126,166,0.28);
    border-radius: 12px; padding: 16px; margin-bottom: 18px;
  }
  .cls-lead {
    font-family: 'Fraunces', serif; font-size: 12.5px; color: var(--muted);
    line-height: 1.6; margin: 6px 0 14px;
  }
  .cls-lead b { color: var(--ivory); font-weight: 600; }
  .cls-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .cls-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 12px 14px; border-radius: 11px; cursor: pointer;
    background: rgba(255,255,255,0.6);
    border: 1.5px solid rgba(184,147,92,0.25);
    transition: all .18s; text-align: left; font-family: 'Archivo', sans-serif;
  }
  .cls-btn:hover { border-color: var(--amber); background: rgba(255,255,255,0.9); }
  .cls-btn.on {
    border-color: #3d7ea6; background: rgba(61,126,166,0.10);
    box-shadow: 0 4px 12px rgba(61,126,166,0.14);
  }
  .cls-i { font-size: 15px; color: #3d7ea6; line-height: 1; }
  .cls-t { font-size: 13px; font-weight: 700; color: var(--ivory); margin-top: 3px; }
  .cls-d { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
  .cls-acct { margin-top: 12px; }
  .cls-warn {
    margin-top: 10px; padding: 8px 11px; border-radius: 7px;
    background: rgba(214,124,30,0.09); border-left: 3px solid #d67c1e;
    font-family: 'Fraunces', serif; font-size: 11.5px; color: #a8631a; line-height: 1.5;
  }
  .cls-done {
    margin-top: 11px; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .08em; text-transform: uppercase; color: #1a7e69;
  }

  /* ══════════ PARTNER REFERRAL CARDS ══════════ */
  .ref-list { display: flex; flex-direction: column; gap: 10px; }
  .ref-card {
    display: grid;
    grid-template-columns: 2.1fr 0.85fr 1.5fr 1fr 1.25fr;
    gap: 18px; align-items: center;
    padding: 16px 18px; border-radius: 13px;
    background: rgba(255,255,255,0.62);
    border: 1px solid rgba(184,147,92,0.20);
    transition: all .18s;
  }
  .ref-card:hover { border-color: var(--amber); background: rgba(255,255,255,0.9); }
  .ref-card.ref-overdue { border-color: rgba(212,73,74,0.45); background: rgba(212,73,74,0.04); }
  .ref-main { min-width: 0; }
  .ref-code {
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    letter-spacing: .1em; color: var(--amber); margin-bottom: 4px;
  }
  .ref-rel { color: var(--muted); margin-left: 8px; letter-spacing: .04em; }
  .ref-name {
    font-family: 'Playfair Display', serif; font-weight: 600;
    font-size: 16px; color: var(--ivory); line-height: 1.25;
  }
  .ref-contact {
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
    margin-top: 4px; word-break: break-all;
  }
  .ref-contact a { color: var(--muted); text-decoration: none; }
  .ref-contact a:hover { color: var(--amber); text-decoration: underline; }
  .ref-dot { color: rgba(184,147,92,0.5); margin: 0 5px; }
  .ref-col { min-width: 0; }
  .ref-sub {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    color: var(--muted); margin-top: 3px; letter-spacing: .04em;
  }
  .ref-cls { display: flex; align-items: center; gap: 7px; margin-top: 7px; flex-wrap: wrap; }
  .cls-chip {
    padding: 3px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace; font-size: 8.5px;
    letter-spacing: .1em; text-transform: uppercase;
  }
  .cls-chip.newc     { color:#1a7e69; border-color:rgba(26,126,105,.42); background:rgba(26,126,105,.07); }
  .cls-chip.existing { color:#3d7ea6; border-color:rgba(61,126,166,.42); background:rgba(61,126,166,.07); }
  .cls-chip.pending  { color:#d67c1e; border-color:rgba(214,124,30,.42); background:rgba(214,124,30,.07); }
  .cls-acctno {
    font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
    color: var(--ivory); letter-spacing: .04em;
  }
  .cls-acctno.missing { color: var(--muted); font-style: italic; }
  .ref-k {
    font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 8.5px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
  }
  .ref-amount {
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 19px;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .ref-picks {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
    color: var(--ivory); line-height: 1.5;
  }
  .ref-date { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ivory); }
  .ref-date.is-overdue { color: var(--red); font-weight: 600; }
  .ref-late {
    display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
    background: rgba(212,73,74,0.14); color: var(--red);
    font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  }
  .ref-col-act { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
  .ref-status {
    padding: 4px 11px; border-radius: 999px; border: 1px solid; white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace; font-size: 9px;
    letter-spacing: .1em; text-transform: uppercase;
  }
  .ref-status.st-new       { color:#d67c1e; border-color:rgba(214,124,30,.42); background:rgba(214,124,30,.07); }
  .ref-status.st-contacted { color:#3d7ea6; border-color:rgba(61,126,166,.42); background:rgba(61,126,166,.07); }
  .ref-status.st-kyc       { color:#7a5cb0; border-color:rgba(122,92,176,.42); background:rgba(122,92,176,.07); }
  .ref-status.st-opened    { color:#1a7e69; border-color:rgba(26,126,105,.42); background:rgba(26,126,105,.07); }
  .ref-select {
    width: 100%; padding: 6px 9px; border-radius: 8px;
    border: 1px solid rgba(184,147,92,0.32); background: rgba(255,255,255,0.85);
    font-family: 'Archivo', sans-serif; font-size: 10.5px; color: var(--ivory);
    cursor: pointer; outline: none;
  }
  .ref-select:hover { border-color: var(--amber); }
  .ref-empty { padding: 56px 20px; text-align: center; }
  .ref-empty-i { font-size: 38px; margin-bottom: 12px; opacity: .55; }
  .ref-empty-t {
    font-family: 'Playfair Display', serif; font-size: 20px; color: var(--ivory); margin-bottom: 7px;
  }
  .ref-empty-d {
    font-family: 'Fraunces', serif; font-style: italic; font-size: 13px;
    color: var(--muted); line-height: 1.65;
  }
  @media (max-width: 1050px) {
    .ref-card { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ref-main { grid-column: 1 / -1; }
    .ref-col-wide { grid-column: 1 / -1; }
  }

  /* ══════════ NEW ORDER-FORM FIELDS ══════════ */
  .f-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .f-hint {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.45;
  }
  .f-hint-warn { color: #b3541e !important; font-style: normal !important; }
  .consent-row { margin-top: 4px; margin-bottom: 18px; }
  .consent-box {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 13px 15px; border-radius: 11px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(184,147,92,0.25);
    cursor: pointer; transition: all .18s;
  }
  .consent-box:hover { border-color: var(--amber); background: rgba(255,255,255,0.8); }
  .consent-box input { position: absolute; opacity: 0; width: 0; height: 0; }
  .consent-mark {
    flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px;
    border-radius: 5px; border: 1.5px solid rgba(184,147,92,0.55);
    background: #fff; position: relative; transition: all .18s;
  }
  .consent-box input:checked + .consent-mark {
    background: var(--amber); border-color: var(--amber);
  }
  .consent-box input:checked + .consent-mark::after {
    content: ''; position: absolute; left: 5px; top: 1.5px;
    width: 4px; height: 9px; border: solid #fff;
    border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .consent-text {
    font-family: 'Fraunces', serif; font-size: 11.5px;
    color: var(--muted); line-height: 1.55;
  }
  .consent-text b { color: var(--ivory); font-weight: 600; }
  @media (max-width: 600px) { .f-grid-2 { grid-template-columns: 1fr; } }

  /* ══════════ CFI ABOUT BLOCK ══════════ */
  .cfi-about-head {
    display: grid; grid-template-columns: 200px 1fr; gap: 30px;
    align-items: center; margin-bottom: 26px;
  }
  /* Logo slot — swap the inner markup for CFI's real artwork */
  .cfi-logo-slot {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 26px 18px; border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbf6ea 100%);
    border: 1px dashed rgba(184,147,92,0.45);
    text-align: center;
  }
  .cfi-logo-text {
    font-family: 'Archivo', sans-serif; font-weight: 800;
    font-size: 38px; letter-spacing: -.02em; color: var(--ivory); line-height: 1;
  }
  .cfi-logo-sub {
    font-family: 'Archivo', sans-serif; font-weight: 500;
    font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--amber); margin-top: 7px;
  }
  .cfi-lead {
    font-family: 'Fraunces', serif; font-size: 15px; line-height: 1.75;
    color: #4a5262; margin: 0 0 12px; text-wrap: pretty;
  }
  .cfi-placeholder-note {
    padding: 10px 14px; border-radius: 8px;
    background: rgba(214,124,30,0.07); border: 1px solid rgba(214,124,30,0.28);
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; line-height: 1.6;
    color: #a8631a; letter-spacing: .02em;
  }
  .cfi-facts {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 30px;
  }
  .cfi-fact {
    padding: 16px 18px; border-radius: 12px;
    background: rgba(255,255,255,0.55); border: 1px solid rgba(184,147,92,0.20);
  }
  .cfi-fact-k {
    font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 9px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  }
  .cfi-fact-v {
    font-family: 'Playfair Display', serif; font-weight: 600; font-size: 15px; color: var(--ivory);
  }
  .cfi-fit-h {
    font-family: 'Playfair Display', serif; font-weight: 400; font-size: 22px;
    color: var(--ivory); margin-bottom: 16px; letter-spacing: -.01em;
  }
  .cfi-fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .cfi-fit-item {
    padding: 20px 22px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.35) 100%);
    border: 1px solid rgba(184,147,92,0.20);
  }
  .cfi-fit-n {
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 13px;
    background: linear-gradient(135deg, var(--amber) 0%, #d8b96b 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
  }
  .cfi-fit-t {
    font-family: 'Playfair Display', serif; font-weight: 600; font-size: 16px;
    color: var(--ivory); margin-bottom: 6px; line-height: 1.3;
  }
  .cfi-fit-d {
    font-family: 'Fraunces', serif; font-size: 13px; line-height: 1.65; color: var(--muted);
  }
  .cfi-partner-strip {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-top: 24px; padding: 18px 22px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(184,147,92,0.10), rgba(184,147,92,0.02));
    border: 1px solid rgba(184,147,92,0.28);
  }
  .cfi-strip-label {
    font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 9px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
  }
  .cfi-strip-items { display: flex; gap: 8px; flex-wrap: wrap; }
  .cfi-chip {
    padding: 6px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.7); border: 1px solid rgba(184,147,92,0.30);
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: .06em; color: var(--ivory);
  }
  /* 5-step flow */
  .cash-flow-5 { grid-template-columns: repeat(5, 1fr) !important; }

  @media (max-width: 1000px) {
    .cash-flow-5 { grid-template-columns: repeat(2, 1fr) !important; }
  }
  @media (max-width: 820px) {
    .cfi-about-head { grid-template-columns: 1fr; gap: 20px; }
    .cfi-facts { grid-template-columns: 1fr 1fr; }
    .cfi-fit-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .cash-flow-5 { grid-template-columns: 1fr !important; }
  }

  /* ══════════ SWAPPED LAYOUT MODIFIERS ══════════ */
  /* Market snapshot when it sits in the narrow hero column */
  .market-snapshot--hero {
    margin: 34px 0 0; padding: 22px 22px 18px;
    border-radius: 18px;
  }
  .market-snapshot--hero .ms-header { margin-bottom: 16px; align-items: center; }
  .market-snapshot--hero .ms-heading { font-size: 20px; }
  .market-snapshot--hero .ms-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .market-snapshot--hero .ms-tile { padding: 11px 12px; border-radius: 11px; }
  .market-snapshot--hero .ms-tile-t { font-size: 12px; }
  .market-snapshot--hero .ms-tile-b { font-size: 7px; }
  .market-snapshot--hero .ms-tile-n { font-size: 9px; margin-bottom: 7px; }
  .market-snapshot--hero .ms-tile-p { font-size: 16px; }
  .market-snapshot--hero .ms-tile-d { font-size: 10px; }
  .market-snapshot--hero .ms-tile-chart { height: 20px; margin-top: 6px; }
  .market-snapshot--hero .ms-refresh { padding: 8px 13px; font-size: 10px; }
  .market-snapshot--hero .ms-footer { margin-top: 14px; padding-top: 12px; font-size: 8px; }

  /* Leaderboard when it runs full width below the hero */
  .top-gifted--wide {
    margin: 40px 0 30px; padding: 28px 32px;
    border-radius: 22px;
  }
  .top-gifted--wide .tg-head { margin-bottom: 22px; }
  .top-gifted--wide .tg-heading { font-size: clamp(22px, 2.4vw, 30px); }
  .top-gifted--wide .tg-sub {
    font-family: 'Fraunces', serif; font-style: italic;
    font-size: 13px; color: var(--muted); margin-top: 8px; max-width: 520px;
  }
  /* Two columns of five so ten rows don't create a tall stack */
  .top-gifted--wide .tg-list {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px 40px;
  }
  .top-gifted--wide .tg-row { grid-template-columns: 26px 66px 1fr 46px; padding: 10px 6px; }
  .top-gifted--wide .tg-ticker { font-size: 14px; }
  .top-gifted--wide .tg-bar-wrap { height: 7px; }

  @media (max-width: 900px) {
    .market-snapshot--hero .ms-grid { grid-template-columns: repeat(3, 1fr); }
    .top-gifted--wide .tg-list { grid-template-columns: 1fr; gap: 0; }
    .top-gifted--wide { padding: 22px 18px; }
  }
  @media (max-width: 560px) {
    .market-snapshot--hero .ms-grid { grid-template-columns: repeat(2, 1fr); }
    .btn-signin { padding: 11px 20px; font-size: 12px; letter-spacing: .1em; }
  }

  .overlay {
    position: fixed; inset: 0; z-index: 100; background: rgba(12,22,32,0.85);
    backdrop-filter: blur(10px); display:flex; align-items:center; justify-content:center;
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .overlay.open { opacity: 1; pointer-events: all; }
  .modal {
    background: var(--navy-2); border: 1px solid var(--teal); border-radius: 20px;
    padding: 44px; max-width: 480px; width: 90%; text-align: center;
    transform: translateY(16px); transition: transform .3s;
  }
  .overlay.open .modal { transform: none; }
  .modal h2 { font-family:'Fraunces',serif; font-size: 32px; font-weight: 300; margin: 14px 0 10px; }
  .modal p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 24px; }

  @media (max-width: 900px) {
    .kpi-band, .occasions { grid-template-columns: 1fr 1fr; }
    .cac-grid, .deal-grid, .obj-grid, .suggest-toggle, .fmt-grid, .ship-2col, .face-toggle { grid-template-columns: 1fr; }
    .pay-grid { grid-template-columns: 1fr 1fr; }
    .cash-flow { grid-template-columns: 1fr 1fr; }
    .cf::after { display:none; }
    .wizard-card { padding: 22px 18px; }
    .p-label { display: none; }
    main { padding: 0 14px 80px; }
    .box-contents { grid-template-columns: 1fr 1fr; }
    header { padding: 18px 0; }
    .mode-switch { display: none; }
    .wizard-hero { padding: 28px 0 22px; }
    .hero-logo { width: 54px; height: 54px; }
    .wizard-hero h1 { font-size: 34px; }
    .amount-input { font-size: 60px; width: 200px; }
    .progress { margin: 22px auto 28px; }
    .wz-title { font-size: 22px; }
    .cert-overlay { padding: 16px 12px; }
    .cert-actions { flex-direction: column; gap: 10px; }
    .cert-tabs { width: 100%; justify-content: center; }
    .cert-tab { flex: 1; text-align: center; }
  }

  /* Ensure buttons are always tappable on mobile */
  @media (max-width: 480px) {
    main { padding: 0 12px 80px; }
    .wizard-card { padding: 18px 14px; border-radius: 14px; }
    .occasions { grid-template-columns: repeat(2,1fr); }
    .chip { padding: 10px 14px; font-size: 13px; }
    .wz-nav { margin-top: 24px; gap: 10px; }
    .btn { min-height: 54px; font-size: 15px; border-radius: 10px; }
    .amount-input { font-size: 56px; width: 180px; }
    .mode-switch { display: none; }
    #mobilePartnerBtn {
      display: inline-block !important;
      font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing:.06em;
      color: var(--muted); background: transparent; border: none;
      text-decoration: underline; cursor: pointer; padding: 4px 0;
    }
  }
/* ══════════ NEW BRAND LOGO ══════════ */
.brand-logo { height: 46px; width: auto; display: block; }
.login-logo { height: 62px; width: auto; display: block; margin: 0 auto 14px; }
@media (max-width: 640px) { .brand-logo { height: 36px; } }