:root {
    --navy: #002035;
    --navy-deep: #001525;
    --coral: #FC4C4C;
    --bg-warm: #F5F3EF;
    --bg-cream: #FAF8F4;
    --line: rgba(0, 32, 53, 0.12);
    --line-strong: rgba(0, 32, 53, 0.25);
    --muted: rgba(0, 32, 53, 0.55);
    --success: #4caf7e;
    --shadow-soft: 0 1px 2px rgba(0, 32, 53, 0.04), 0 8px 24px rgba(0, 32, 53, 0.06);
    --shadow-lift: 0 2px 4px rgba(0, 32, 53, 0.06), 0 24px 48px rgba(0, 32, 53, 0.10);
    --parchment: #EDE6D3;

    /* NØA token logo */
    --noa-logo: url('../assets/images/noa-logo.png');
    --noa-logo-white: url('../assets/images/noa-logo-white.png');

    /* Order colors — heraldic */
    --squire-bg: #4a5d3f;       /* sage green - young, learning */
    --squire-accent: #a8b89c;
    --defender-bg: #2a4a5c;     /* steel blue - guardian */
    --defender-accent: #8fb1c4;
    --knight-bg: #6b2c2c;       /* deep red - courage */
    --knight-accent: #c97070;
    --camelot-bg: #3d2d5c;      /* royal purple */
    --camelot-accent: #b39ce0;
    --excalibur-bg: #1a3d4d;    /* arcane teal - mystic */
    --excalibur-accent: #7dd0e0;
    --grail-bg: #5c3d0a;        /* sacred gold/bronze */
    --grail-accent: #e8c46f;
  }

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

  html, body {
    background: var(--bg-warm);
    color: var(--navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

  body {
    background-image:
      radial-gradient(circle at 12% 8%, rgba(252, 76, 76, 0.06), transparent 45%),
      radial-gradient(circle at 88% 92%, rgba(0, 32, 53, 0.05), transparent 50%);
    padding: 48px 24px;
  }

  .shell { max-width: 1100px; margin: 0 auto; }

  /* Header */
  .brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }

  .brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.01em;
  }

  .brand-mark::before {
    content: "";
    width: 36px; height: 36px;
    background: var(--noa-logo) center/contain no-repeat;
    flex-shrink: 0;
  }

  .brand-meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    color: var(--muted);
  }

  /* Hero */
  .hero {
    text-align: center;
    margin-bottom: 56px;
    padding: 0 20px;
  }

  .hero-logo {
    width: 72px;
    height: 72px;
    background: var(--noa-logo) center/contain no-repeat;
    margin: 0 auto 24px;
    filter: drop-shadow(0 4px 16px rgba(0, 32, 53, 0.15));
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-weight: 600;
    color: var(--coral);
    margin-bottom: 24px;
  }

  .eyebrow::before, .eyebrow::after {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--coral);
  }

  h1 {
    font-family: 'Cinzel', serif;
    font-weight: 500;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
  }

  h1 em {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    color: var(--coral);
    letter-spacing: -0.01em;
  }

  .lede {
    font-size: 16px;
    color: var(--muted);
    max-width: 620px;
    margin: 0 auto;
    font-style: italic;
    font-family: 'Fraunces', serif;
    font-weight: 300;
  }

  /* Stepper */
  .stepper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-bottom: 40px;
    background: var(--bg-cream);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .step {
    padding: 16px 20px;
    border-right: 1px solid var(--line);
    transition: all 0.25s ease;
  }

  .step:last-child { border-right: none; }

  .step-num {
    font-family: 'Fraunces', serif;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
    letter-spacing: 0.05em;
  }

  .step-name {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
  }

  .step.active { background: var(--navy); }
  .step.active .step-num { color: var(--coral); }
  .step.active .step-name { color: var(--bg-cream); }

  .step.complete { background: rgba(76, 175, 126, 0.08); }
  .step.complete .step-num { color: var(--success); }
  .step.complete .step-name::before { content: "✓ "; color: var(--success); }

  /* Order Grid */
  .orders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }

  .order-card {
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    overflow: hidden;
    color: var(--bg-cream);
    min-height: 480px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
  }

  .order-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* Card backgrounds per order */
  .order-card.squire {
    background: linear-gradient(165deg, var(--squire-bg) 0%, #2d3826 60%, #1a2114 100%);
  }
  .order-card.defender {
    background: linear-gradient(165deg, var(--defender-bg) 0%, #1a2f3c 60%, #0d1820 100%);
  }
  .order-card.knight {
    background: linear-gradient(165deg, var(--knight-bg) 0%, #421a1a 60%, #2a0e0e 100%);
  }
  .order-card.camelot {
    background: linear-gradient(165deg, var(--camelot-bg) 0%, #251c3a 60%, #14101f 100%);
  }
  .order-card.excalibur {
    background: linear-gradient(165deg, var(--excalibur-bg) 0%, #0e2530 60%, #07141a 100%);
  }
  .order-card.grail {
    background: linear-gradient(165deg, var(--grail-bg) 0%, #3a2806 60%, #1f1503 100%);
  }

  .order-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.025) 2px, rgba(255, 255, 255, 0.025) 4px);
    pointer-events: none;
  }

  /* Subtle shimmer */
  .order-card::after {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(135deg, transparent 42%, rgba(255, 255, 255, 0.08) 50%, transparent 58%);
    animation: shimmer 9s linear infinite;
    pointer-events: none;
  }

  @keyframes shimmer {
    0% { transform: translate(-30%, -30%) rotate(0deg); }
    100% { transform: translate(-30%, -30%) rotate(360deg); }
  }

  .order-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
  }

  .order-card:has(input:checked) {
    border-color: var(--coral);
    box-shadow: 0 0 0 4px rgba(252, 76, 76, 0.15), 0 16px 40px rgba(0, 32, 53, 0.18);
  }

  /* Selected check */
  .order-check {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--coral);
    color: var(--bg-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.25s ease;
    z-index: 4;
  }

  .order-card:has(input:checked) .order-check {
    opacity: 1;
    transform: scale(1);
  }

  /* Tier rank badge */
  .order-rank {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 5px 10px;
    border: 1px solid currentColor;
    border-radius: 2px;
    z-index: 3;
    opacity: 0.7;
  }

  /* Sigil container */
  .order-sigil {
    padding: 40px 20px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
  }

  .order-sigil svg {
    width: 110px;
    height: 110px;
    filter: drop-shadow(0 0 18px currentColor);
  }

  .squire .order-sigil { color: var(--squire-accent); }
  .defender .order-sigil { color: var(--defender-accent); }
  .knight .order-sigil { color: var(--knight-accent); }
  .camelot .order-sigil { color: var(--camelot-accent); }
  .excalibur .order-sigil { color: var(--excalibur-accent); }
  .grail .order-sigil { color: var(--grail-accent); }

  /* Order body */
  .order-body {
    padding: 0 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
  }

  .order-name {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .order-tagline {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 12px;
    text-align: center;
    opacity: 0.7;
    margin-bottom: 18px;
    letter-spacing: 0.04em;
  }

  .squire .order-tagline { color: var(--squire-accent); }
  .defender .order-tagline { color: var(--defender-accent); }
  .knight .order-tagline { color: var(--knight-accent); }
  .camelot .order-tagline { color: var(--camelot-accent); }
  .excalibur .order-tagline { color: var(--excalibur-accent); }
  .grail .order-tagline { color: var(--grail-accent); }

  .order-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.25;
    margin-bottom: 16px;
  }

  .squire .order-divider { color: var(--squire-accent); }
  .defender .order-divider { color: var(--defender-accent); }
  .knight .order-divider { color: var(--knight-accent); }
  .camelot .order-divider { color: var(--camelot-accent); }
  .excalibur .order-divider { color: var(--excalibur-accent); }
  .grail .order-divider { color: var(--grail-accent); }

  .order-description {
    font-size: 12px;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 20px;
    flex: 1;
  }

  .order-price {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 16px;
    text-align: center;
  }

  .order-price-label {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    opacity: 0.55;
    margin-bottom: 4px;
  }

  .order-price-value {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .order-price-vat {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.5;
    margin-top: 2px;
  }

  /* NØA tokens block within order card */
  .order-tokens {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.2);
    position: relative;
  }

  .order-tokens-bonus {
    position: absolute;
    top: -9px;
    right: 12px;
    background: var(--coral);
    color: var(--bg-cream);
    padding: 3px 9px;
    border-radius: 12px;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .order-tokens-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    opacity: 0.7;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .order-tokens-row.highlight {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 1;
    margin-bottom: 0;
    font-family: 'Fraunces', serif;
    text-transform: none;
    font-size: 13px;
    letter-spacing: 0;
    align-items: baseline;
  }

  .order-tokens-row.highlight .accent {
    color: var(--coral);
    font-weight: 600;
    font-size: 16px;
  }
  .squire .order-tokens-row.highlight .accent { color: var(--squire-accent); }
  .defender .order-tokens-row.highlight .accent { color: var(--defender-accent); }
  .knight .order-tokens-row.highlight .accent { color: var(--knight-accent); }
  .camelot .order-tokens-row.highlight .accent { color: var(--camelot-accent); }
  .excalibur .order-tokens-row.highlight .accent { color: var(--excalibur-accent); }
  .grail .order-tokens-row.highlight .accent { color: var(--grail-accent); }

  /* Inline NØA logo icoon */
  .noa-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--noa-logo-white) center/contain no-repeat;
    vertical-align: -2px;
    margin-right: 4px;
  }

  /* Donkere variant voor gebruik op lichte achtergronden */
  .noa-icon.on-light {
    background-image: var(--noa-logo);
  }

  /* Larger version voor selection bar / review */
  .noa-icon-md {
    width: 18px; height: 18px;
    vertical-align: -3px;
    margin-right: 5px;
  }


  /* Selection summary bar (sticky-ish on step 1) */
  .selection-bar {
    background: var(--bg-cream);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow-soft);
  }

  .selection-info {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .selection-sigil {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--navy);
  }

  .selection-sigil svg { width: 26px; height: 26px; }

  .selection-text {
    display: flex;
    flex-direction: column;
  }

  .selection-label {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    margin-bottom: 2px;
  }

  .selection-name {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .selection-tokens {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--coral);
    margin-top: 2px;
  }

  .selection-price {
    font-family: 'Fraunces', serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--coral);
  }

  /* Card */
  .card {
    background: var(--bg-cream);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 40px;
    box-shadow: var(--shadow-soft);
    max-width: 720px;
    margin: 0 auto;
  }

  /* Step panels */
  .step-panel { display: none; animation: fade 0.3s ease; }
  .step-panel.active { display: block; }

  @keyframes fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .section-label {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .section-label::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--coral);
    border-radius: 50%;
  }

  .section-title {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }

  .section-desc {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 28px;
  }

  /* Form fields */
  .field-group { display: grid; gap: 20px; margin-bottom: 24px; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .field { display: flex; flex-direction: column; gap: 6px; }

  label {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--navy);
  }

  label .required { color: var(--coral); }

  .field-hint {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.4;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-strong);
    padding: 10px 0 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: var(--navy);
    transition: border-color 0.2s ease;
    border-radius: 0;
  }

  input:focus, select:focus {
    outline: none;
    border-bottom-color: var(--coral);
  }

  input::placeholder { color: rgba(0, 32, 53, 0.35); }

  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23002035' stroke-width='1.2' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    cursor: pointer;
    padding-right: 20px;
  }

  /* Buyer type */
  .buyer-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
  }

  .buyer-type {
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
  }

  .buyer-type:hover { border-color: var(--navy); }

  .buyer-type input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .buyer-type-name {
    font-family: 'Fraunces', serif;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 4px;
  }

  .buyer-type-desc {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.4;
  }

  .buyer-type:has(input:checked) {
    background: var(--navy);
    border-color: var(--navy);
  }

  .buyer-type:has(input:checked) .buyer-type-name { color: var(--bg-cream); }
  .buyer-type:has(input:checked) .buyer-type-desc { color: rgba(245, 243, 239, 0.65); }

  .business-fields { display: none; }
  .business-fields.visible { display: block; }

  /* Payment methods */
  .payment-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .pay-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.18s ease;
  }

  .pay-option:hover { border-color: var(--navy); }

  .pay-option input[type="radio"] {
    appearance: none;
    width: 16px; height: 16px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
    margin: 0;
    position: relative;
    flex-shrink: 0;
  }

  .pay-option input[type="radio"]:checked { border-color: var(--coral); }

  .pay-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--coral);
    border-radius: 50%;
  }

  .pay-option:has(input:checked) {
    border-color: var(--navy);
    background: rgba(0, 32, 53, 0.03);
  }

  .pay-name { font-size: 13px; font-weight: 600; }
  .pay-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }

  /* Checkboxes */
  .check-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }

  .check-row:last-of-type { border-bottom: 1px solid var(--line); }

  input[type="checkbox"] {
    appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--line-strong);
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
    position: relative;
    transition: all 0.18s ease;
  }

  input[type="checkbox"]:checked {
    background: var(--navy);
    border-color: var(--navy);
  }

  input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid var(--bg-cream);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
  }

  .check-row label {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--navy);
    line-height: 1.5;
    cursor: pointer;
  }

  .check-row a {
    color: var(--coral);
    text-decoration: none;
    border-bottom: 1px solid var(--coral);
  }

  /* Review */
  .review-section {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 24px;
    margin-bottom: 16px;
  }

  .review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .review-title {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
  }

  .review-edit {
    font-size: 11px;
    color: var(--coral);
    text-decoration: none;
    border-bottom: 1px solid var(--coral);
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0 0 1px;
    font-family: inherit;
  }

  .review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
  }

  .review-item .review-label {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 3px;
  }

  .review-item .review-value {
    font-size: 14px;
    font-weight: 500;
  }

  /* Featured order in review */
  .review-order-feature {
    background: var(--navy);
    color: var(--bg-cream);
    padding: 24px 28px;
    border-radius: 3px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
  }

  .review-order-feature::before {
    content: "";
    position: absolute;
    top: -50%; right: -10%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(252, 76, 76, 0.25), transparent 65%);
  }

  .review-order-sigil {
    width: 56px; height: 56px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  .review-order-sigil svg { width: 100%; height: 100%; }

  .review-order-info {
    position: relative;
    z-index: 1;
    flex: 1;
  }

  .review-order-name {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .review-order-tagline {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 12px;
    opacity: 0.7;
  }

  .review-order-tokens {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 500;
    color: var(--coral);
    letter-spacing: 0.02em;
  }

  .review-order-price {
    position: relative;
    z-index: 1;
    font-family: 'Fraunces', serif;
    font-size: 26px;
    color: var(--coral);
  }

  /* Buttons */
  .step-nav {
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .btn {
    padding: 16px 28px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s ease;
    border: none;
  }

  .btn-primary {
    background: var(--coral);
    color: var(--bg-cream);
    flex: 1;
  }

  .btn-primary:hover {
    background: var(--navy);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lift);
  }

  .btn-primary:disabled {
    background: var(--line-strong);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .btn-secondary {
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--line-strong);
  }

  .btn-secondary:hover { border-color: var(--navy); }

  .secure-note {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .secure-note::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--success);
    border-radius: 50%;
  }

  /* Lore banner */
  .lore-banner {
    background: rgba(0, 32, 53, 0.04);
    border-left: 3px solid var(--navy);
    padding: 16px 20px;
    margin-bottom: 28px;
    border-radius: 0 3px 3px 0;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--navy);
    line-height: 1.6;
  }

  /* Footer */
  footer {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
  }

  footer a { color: var(--muted); text-decoration: none; }
  footer a:hover { color: var(--coral); }

  /* Success */
  .success-screen {
    text-align: center;
    padding: 40px 20px;
  }

  .success-icon {
    width: 88px; height: 88px;
    margin: 0 auto 24px;
    border: 2px solid var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    font-size: 38px;
  }

  .success-screen h2 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
  }

  .success-screen p {
    color: var(--muted);
    max-width: 480px;
    margin: 0 auto 24px;
  }

  .ref-code {
    display: inline-block;
    padding: 12px 24px;
    background: var(--navy);
    color: var(--bg-cream);
    border-radius: 2px;
    font-family: 'Fraunces', serif;
    font-size: 16px;
    letter-spacing: 0.08em;
  }

  /* Responsive */
  @media (max-width: 900px) {
    .orders-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 640px) {
    body { padding: 24px 16px; }
    .card { padding: 24px; }
    .orders-grid { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .payment-methods { grid-template-columns: 1fr; }
    .buyer-type-grid { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .stepper { grid-template-columns: 1fr; }
    .step { border-right: none; border-bottom: 1px solid var(--line); }
    .step:last-child { border-bottom: none; }
    .selection-bar { flex-direction: column; align-items: flex-start; }
    .review-order-feature { flex-direction: column; text-align: center; }
    footer { flex-direction: column; gap: 8px; }
  }