/* ── STATIC BAND ── */
  .static-band {
    background: #4A1614;
    padding: 0.85rem 24px;
    text-align: center;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    color: #EFE8DB;
    letter-spacing: 0.03em;
  }
  .static-band .sep {
    color: #8A6558;
    margin: 0 0.75em;
  }
  @media (max-width: 768px) {
    .static-band {
      font-size: 13px;
      line-height: 1.8;
    }
  }

  /* ── SECTION BASICS ── */
  .section-label {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .section-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--burgundy);
  }

  .section-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(36px, 3.8vw, 54px);
    font-weight: 300;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 16px;
  }

  .section-title em { font-style: italic; color: var(--burgundy); }

  .section-desc {
    font-size: 16px;
    color: var(--brown);
    line-height: 1.9;
    font-weight: 300;
    max-width: 460px;
  }

  /* ── HOW IT WORKS ── */
  .how-section {
    padding: 110px 80px;
    max-width: 1400px;
    margin: 0 auto;
  }

  .how-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 72px;
  }

  .steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--tan);
  }

  .step {
    background: var(--paper);
    padding: 44px 36px 52px;
    transition: background 0.35s;
    position: relative;
  }

  .step:hover { background: var(--cream); }
  .step:hover .step-number { color: var(--tan); }

  .step-number {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 64px;
    font-weight: 300;
    color: var(--cream);
    line-height: 1;
    margin-bottom: 28px;
  }

  .step-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 14px;
  }

  .step-desc {
    font-size: 16px;
    color: var(--brown);
    line-height: 1.85;
    font-weight: 300;
  }

  .step-accent {
    width: 24px;
    height: 2px;
    background: var(--burgundy);
    margin-bottom: 24px;
  }

  /* ── THREE-STEP VARIANT ── */
  .steps-grid.steps-three {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ── EDITIONS ── */
  .editions-section {
    background: var(--cream);
    padding: 76px 80px 68px;
  }

  .editions-inner { max-width: 1400px; margin: 0 auto; }

  .editions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
  }

  .view-all {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown);
    text-decoration: none;
    border-bottom: 1px solid var(--tan);
    padding-bottom: 3px;
    transition: all 0.3s;
  }

  .view-all:hover { color: var(--burgundy); border-color: var(--burgundy); }

  /* Product tile, then a compact row of name, price and button beneath it -
     the tile is a frame the book sits in, not a card with text stuffed under.
     The old grid drew a tan divider between two edge-to-edge panels; these are
     separate objects on the ground instead. */
  .editions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1180px;
  }

  .edition-card { cursor: pointer; }

  .edition-tile {
    position: relative;
    aspect-ratio: 7 / 6;
    /* On a short window the ratio alone made the section taller than the
       screen, so the line under the button fell below the fold on arrival. */
    max-height: 42vh;
    background: var(--paper);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }
  .edition-card:hover .edition-tile { box-shadow: 0 10px 28px rgba(34,24,19,.12); }

  .edition-tile img {
    width: auto;
    max-width: 62%;
    max-height: 76%;
    height: auto;
    display: block;
  }

  .edition-flag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: var(--tan);
    color: var(--paper);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
  }

  .edition-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
  }
  .edition-meta { min-width: 0; }

  .mini-book {
    width: 120px;
    height: 165px;
    background: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-shadow: 8px 14px 36px rgba(34,24,19,0.2);
    position: relative;
    transition: transform 0.4s;
    z-index: 1;
  }

  .edition-card:hover .mini-book { transform: translateY(-5px) rotate(-1.5deg); }

  .mini-book-inner {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(188,154,113,0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .mini-label {
    font-size: 7px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tan);
  }

  .mini-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--cream);
    text-align: center;
    line-height: 1.2;
  }

  .mini-line {
    width: 18px;
    height: 1px;
    background: var(--tan);
    opacity: 0.5;
  }



  .edition-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 23px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    margin: 0;
  }



  .edition-price {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 19px;
    color: var(--brown);
    margin-top: 3px;
  }

  .edition-price sup {
    font-size: 0.62em;
    top: -0.5em;
    margin-right: 1px;
  }

  .btn-select {
    flex: 0 0 auto;
    background: var(--burgundy);
    color: var(--paper);
    border: none;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 26px;
    cursor: pointer;
    transition: opacity 0.25s ease;
  }

  .btn-select:hover { opacity: 0.86; }

  /* ── WIDE CARD (gift) ── */
  .wide-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  /* ── TESTIMONIALS ── */
  .testimonials-marquee {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  }

  .testimonials-track {
    display: flex;
    gap: 32px;
    animation: testimonialScroll 40s linear infinite;
    width: max-content;
  }

  .testimonials-track:hover {
    animation-play-state: paused;
  }

  @keyframes testimonialScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .testimonial-pair {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-shrink: 0;
    width: 520px;
  }

  .testimonial-photo { flex-shrink: 0; }

  .testimonial-photo img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border: 0.5px solid #BC9A71;
    border-radius: 16px;
    display: block;
  }

  .testimonial-quote {
    background: #EFE8DB;
    padding: 24px 24px;
    border-radius: 16px;
    flex: 1;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ── REVIEWS ── */
  .reviews-section {
    padding: 110px 80px;
    background: var(--cream);
  }

  .reviews-inner { max-width: 1400px; margin: 0 auto; }

  .reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 60px;
  }

  .big-quote {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 42px);
    font-style: italic;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 28px;
  }

  .quote-attr {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--brown);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .quote-attr::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--burgundy);
  }

  .stars { color: var(--burgundy); letter-spacing: 2px; font-size: 13px; margin-bottom: 16px; }

  .review-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .review-card {
    background: var(--paper);
    padding: 28px 32px;
    border-left: 3px solid var(--tan);
    transition: border-color 0.3s;
  }

  .review-card:hover { border-color: var(--burgundy); }

  .review-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    font-style: italic;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 16px;
  }

  .reviewer {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--brown);
  }

  /* ── FORM ── */
  .form-section {
    background: var(--ink);
    padding: 110px 80px;
  }

  .form-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: start;
  }

  .form-left { padding-top: 8px; }

  .form-label {
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .form-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--tan);
  }

  .form-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(36px, 3.5vw, 52px);
    font-weight: 300;
    line-height: 1.2;
    color: var(--cream);
    margin-bottom: 24px;
  }

  .form-title em { font-style: italic; color: var(--tan); }

  .form-note {
    font-size: 14px;
    color: rgba(239,232,219,0.5);
    line-height: 1.9;
    margin-bottom: 44px;
    font-weight: 300;
  }

  .form-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .form-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 13px;
    color: rgba(239,232,219,0.55);
    font-weight: 300;
    line-height: 1.6;
  }

  .form-features li::before {
    content: '◆';
    color: var(--tan);
    font-size: 7px;
    flex-shrink: 0;
    margin-top: 5px;
  }

  .form-right {
    background: var(--cream);
    padding: 48px 44px;
  }

  .form-heading {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 32px;
  }

  .form-group { margin-bottom: 24px; }

  .form-group label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 10px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--tan);
    padding: 8px 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s;
    appearance: none;
  }

  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus { border-color: var(--burgundy); }

  .form-group textarea { resize: none; height: 72px; line-height: 1.6; }

  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

  .form-submit {
    width: 100%;
    background: var(--burgundy);
    color: var(--paper);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 18px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.3s;
  }

  .form-submit:hover { background: var(--burgundy-dk); }

  .form-note-small {
    font-size: 12px;
    color: var(--brown);
    text-align: center;
    margin-top: 16px;
    letter-spacing: 0.04em;
  }

  /* ── IG STRIP ── */
  .ig-section {
    padding: 80px;
    border-top: 1px solid var(--border);
  }

  .ig-inner { max-width: 1400px; margin: 0 auto; }

  .ig-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
  }

  .ig-handle {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    text-decoration: none;
    transition: color 0.3s;
  }

  .ig-handle:hover { color: var(--burgundy); }

  .ig-follow {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown);
    text-decoration: none;
    border-bottom: 1px solid var(--tan);
    padding-bottom: 2px;
    transition: all 0.3s;
  }

  .ig-follow:hover { color: var(--burgundy); border-color: var(--burgundy); }

  .ig-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
  }

  .ig-cell {
    aspect-ratio: 1;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .ig-cell:nth-child(2) { background: var(--cream); }
  .ig-cell:nth-child(3) { background: var(--tan); opacity: 0.6; }
  .ig-cell:nth-child(4) { background: var(--cream); }
  .ig-cell:nth-child(5) { background: var(--cream); }

  .ig-overlay {
    position: absolute;
    inset: 0;
    background: rgba(34,24,19,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .ig-cell:hover .ig-overlay { opacity: 1; }

  .ig-overlay span {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream);
  }

  .ig-icon { display:flex; align-items:center; justify-content:center; }

  /* ── FOOTER ── */
  footer {
    background: var(--brown);
    padding: 80px 80px 40px;
  }

  .footer-inner { max-width: 1400px; margin: 0 auto; }

  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(239,232,219,0.08);
    margin-bottom: 36px;
  }

  .footer-logo {
    margin-bottom: 18px;
    display: block;
  }

  .footer-logo img {
    height: 52px;
    width: auto;
    display: block;
    filter: brightness(0) invert(0.92) sepia(0.08) saturate(0.3);
  }

  .footer-tagline {
    font-size: 13px;
    color: var(--cream);
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 28px;
    max-width: 240px;
  }

  .footer-social { display: flex; gap: 20px; }

  .footer-social a {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream);
    text-decoration: none;
    transition: color 0.3s;
  }

  .footer-social a:hover { color: var(--tan); }

  .footer-col-title {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 22px;
  }

  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }

  .footer-links a {
    font-size: 14px;
    color: rgba(239,232,219,0.38);
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s;
  }

  .footer-links a:hover { color: var(--cream); }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-copy {
    font-size: 11px;
    color: rgba(239,232,219,0.2);
    letter-spacing: 0.05em;
  }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-left > * {
    opacity: 1;
  }

  /* ── BUYER ROTATING PHRASE ── */
  .buyer-line { line-height: 1.4; margin-bottom: 0; position: relative; z-index: 1; }
  .buyer-rotate {
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    min-width: 14em;
  }
  .buyer-phrase {
    transition: opacity 350ms ease;
  }
  .buyer-underline {
    transition: opacity 350ms ease;
  }

  /* ── HERO FORM PANEL ── */
  .hero-form-panel {
    margin-top: 0;
    position: relative;
    z-index: 1;
  }

  .hero-seal:focus-visible {
    outline: 2px solid #C4703F;
    outline-offset: 4px;
  }

  .hero-seal--primary:hover { opacity: 0.9; }
  .hero-seal--gift:hover { background: #F0E6D6 !important; }
  .hero-seal--gift:active { background: #E3D5C0 !important; }

  /* Respect reduced-motion: no animation */
  @media (prefers-reduced-motion: reduce) {
    .buyer-phrase, .buyer-underline { transition: none !important; }
  }


/* ── QUESTIONNAIRE STYLES ── */

  html, body {
    height: 100%;
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 300;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }

  /* ── NAV ── */
  :root { --nav-h: 64px; --bar-h: 64px; }

  /* Anchor jumps landed under the fixed nav, pushing the bottom of the section
     off screen - which is where the size and shipping line sits. */
  section[id], div[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,253,249,0.94);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }

  .nav-logo {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .nav-logo img {
    height: 38px;
    width: auto;
    display: block;
  }

  .nav-back {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
  }

  .nav-back:hover { color: var(--burgundy); }

  /* ── MAIN LAYOUT ── */
  .page {
    min-height: 100vh;
    padding-top: calc(var(--nav-h) + var(--bar-h));
    display: grid;
    grid-template-columns: 38% 62%;
  }

  /* LEFT PANEL — fixed context */
  .left-panel {
    background: var(--cream);
    padding: 64px 56px;
    position: sticky;
    top: calc(var(--nav-h) + var(--bar-h));
    height: calc(100vh - var(--nav-h) - var(--bar-h));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 26px;
    overflow: hidden;
  }

  .left-panel::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: var(--tan);
    opacity: 0.25;
    bottom: -80px; right: -80px;
    pointer-events: none;
  }

  .panel-eyebrow {
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .panel-eyebrow::before {
    content: '';
    width: 20px; height: 1px;
    background: var(--burgundy);
  }

  .panel-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 300;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 24px;
  }

  .panel-title em { font-style: italic; color: var(--burgundy); }

  .panel-desc {
    font-size: 16px;
    color: var(--brown);
    line-height: 1.85;
    margin-bottom: 40px;
  }

  /* Progress */
  .progress-wrap {
    margin-bottom: 40px;
  }

  .progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 10px;
  }

  .progress-bar {
    height: 2px;
    background: var(--tan);
    border-radius: 2px;
    overflow: hidden;
  }

  .progress-fill {
    height: 100%;
    background: var(--burgundy);
    border-radius: 2px;
    transition: width 0.5s ease;
    width: 0%;
  }

  /* Mini book preview */
  .book-preview {
    width: 120px;
    height: 190px;
    background: var(--ink);
    position: relative;
    box-shadow: 8px 12px 32px rgba(34,24,19,0.2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px 8px;
    overflow: hidden;
  }

  .book-preview::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(98,29,27,0.2);
  }



  /* Fore-edge. One leaf per slice of progress, so the book visibly thickens as
     the questionnaire is answered. */
  .book-shelf { position: relative; flex-shrink: 0; }

  .fore-edge {
    position: absolute;
    left: 100%;
    top: 4%;
    bottom: 4%;
    display: flex;
    gap: 0;
    pointer-events: none;
    box-shadow: 2px 3px 7px rgba(31,18,11,.22);
  }

  .fore-leaf {
    /* The panel behind is cream, so pale leaves would vanish into it. Light
       leaf, dark separation, and a shadow under the whole stack. */
    flex: 0 0 var(--leaf, 3px);
    width: var(--leaf, 3px);
    /* Warmer than paper-white, or the stack reads as a blank slab beside the
       book rather than as its pages. */
    background: linear-gradient(to bottom, #F3E9D6 0%, #E2D3B7 58%, #C0A780 100%);
    border-right: 0.5px solid rgba(74,48,30,.5);
    animation: leafIn 0.5s cubic-bezier(.2,.7,.3,1) both;
  }

  /* A brief flare on the newest leaf, so each answer registers as a moment
     rather than only as 3 more pixels of stack. */
  .fore-leaf.is-new {
    animation: leafIn 0.5s cubic-bezier(.2,.7,.3,1) both,
               leafFlare 1.1s ease-out 0.08s both;
  }

  @keyframes leafFlare {
    0%   { box-shadow: 0 0 12px 4px rgba(255,238,198,.95); filter: brightness(1.45); }
    45%  { box-shadow: 0 0 8px 2px rgba(255,238,198,.55); filter: brightness(1.2); }
    100% { box-shadow: 0 0 0 0 rgba(255,238,198,0); filter: none; }
  }

  @keyframes leafIn {
    from { opacity: 0; transform: translateX(-5px) scaleY(0.8); }
    to   { opacity: 1; transform: none; }
  }


  /* ── Live cover preview ──
     The sidebar book renders as a real cover rather than a label on a dark
     rectangle: the vibe picks the layout, the palette picks the colour, and
     Warm & Earthy recolours an actual watercolour through that palette. Every
     size below is in em off the cover's own font-size, so the same rules work
     at any width - change .book-preview.cv's font-size and the type follows. */
  .book-preview.cv {
    height: clamp(150px, 30vh, 320px);
    width: auto;
    aspect-ratio: 210 / 297;
    padding: 0;
    align-items: stretch;
    justify-content: space-between;
    background: var(--cream);
    /* Type scales with the cover, so one set of rules works at every size. */
    font-size: clamp(9.5px, 1.9vh, 20px);
  }
  .book-preview.cv::before { display: none; }

  /* The layout of the cover itself lives in cover.css, shared with the parlor. */

  .cover-note {
    max-width: 190px;
    margin: 12px 0 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    line-height: 1.45;
    color: var(--brown);
    opacity: 0.8;
  }
  .cover-note em { font-style: italic; }

  /* Labels for a screen that asks two things at once. */
  .pair-label {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin: 26px 0 10px;
  }
  .pair-label:first-of-type { margin-top: 8px; }

  .edition-chosen {
    margin: 10px 0 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brown);
  }
  .edition-chosen a {
    color: var(--burgundy);
    text-decoration: none;
    border-bottom: 1px solid var(--tan);
    margin-left: 8px;
    padding-bottom: 1px;
  }
  .edition-chosen a:hover { border-color: var(--burgundy); }
  .cover-mobile-slot { display: none; }

  /* ── The cover screens put the book first ──
     On the three screens that customise the cover, the panel stops being a
     progress readout and becomes the book: the copy and the checklist step
     back, the cover comes to the top and roughly doubles. Everywhere else the
     panel is unchanged. */
  .left-panel.cover-focus { justify-content: flex-start; }
  .left-panel.cover-focus .panel-desc { display: none; }
  .left-panel.cover-focus .panel-title { margin-bottom: 0; }
  .left-panel.cover-focus .book-preview.cv {
    height: clamp(190px, 42vh, 430px);
    font-size: clamp(12px, 2.65vh, 27px);
  }

  /* Short windows: the panel sheds what it can rather than clipping the
     progress readout off the bottom. Measured at 640-1050px tall. */
  @media (max-height: 1000px) {
    .left-panel { padding: 40px 56px; gap: 20px; }
    .panel-desc { display: none; }
  }
  /* ── Edition cards ──
     Three presentations behind ?ed=1|2|3 for review. 1 keeps the spec list,
     2 is the Willow reduction (image, name, price, button), 3 adds one line.
     Delete the [data-ed] rules once one is chosen. */
  .edition-card { overflow: hidden; }
  .edition-fine {
    margin: 10px 0 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    font-style: italic;
    color: var(--brown);
  }
  /* 2 — the Willow reduction: image, name, price, button. */


  /* ── Roadmap ──
     Replaces the accumulating tick list, which grew one line per answer and so
     said how much had been done and nothing about how much was left. It lives
     across the top rather than in the panel: it is wayfinding for the whole
     page, and the panel was carrying too much already. */
  .roadmap-bar {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    z-index: 99;
    height: var(--bar-h);
    padding: 0 48px;
    display: flex;
    align-items: center;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
  }
  .roadmap {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  /* Each stage owns a segment of the bar and is named above it, so how far
     along you are is legible without reading a word. */
  .rm-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-family: 'EB Garamond', Georgia, serif;
    /* Set for a phone and never raised for a desktop, so on a wide screen the
       stage names sat tiny above rules running the full width of the page. */
    font-size: 16px;
    line-height: 1;
    color: var(--brown);
    white-space: nowrap;
  }
  .rm-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rm-line {
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: var(--tan);
    opacity: 0.4;
    transition: background 0.3s ease, opacity 0.3s ease;
  }

  .rm-step.is-done .rm-line { background: var(--burgundy); opacity: 0.6; }
  .rm-step.is-now { color: var(--burgundy); }
  .rm-step.is-now .rm-label { font-weight: 500; }
  /* Done and current are both filled, so the current one is also thicker -
     opacity alone was too fine a distinction to carry it. */
  .rm-step.is-now .rm-line { background: var(--burgundy); opacity: 1; height: 5px; margin: -1px 0; }
  /* The current stage fills as you go through it: the track is the pale line,
     the burgundy part is how far along this stage you are (--fill). */
  .rm-step.is-now .rm-line { position: relative; overflow: hidden;
    background: color-mix(in srgb, var(--tan) 45%, transparent); }
  .rm-step.is-now .rm-line::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--fill, 100%); background: var(--burgundy); border-radius: inherit; }
  .rm-step.is-next { opacity: 0.42; }

  .rm-sub {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-left: 8px;
  }

  @media (prefers-reduced-motion: reduce) {
    .rm-line { transition: none; }
  }

  /* Narrow: the segments still tell the story, so the labels give way first. */
  @media (max-width: 1180px) {
    .roadmap-bar { padding: 0 24px; }
    .rm-step { font-size: 14px; gap: 7px; }
    .rm-sub { display: none; }
  }
  @media (max-width: 980px) {
    .rm-step { font-size: 12.5px; }
  }
  .rm-short { display: none; }

  /* Narrow: the full names cannot share 375px, so every stage shows its short
     one. All five stay named - which stage is done and which is coming is the
     point of the bar. */
  @media (max-width: 880px) {
    .roadmap-bar { padding: 0 14px; }
    .roadmap { gap: 7px; }
    .rm-step { gap: 6px; font-size: 11px; }
    .rm-full { display: none; }
    .rm-short { display: block; }
    .rm-line { height: 3px; }
    .rm-step.is-now .rm-line { height: 4px; margin: 0; }
  }


  @media (max-height: 680px) {
    .left-panel { padding: 28px 44px; gap: 14px; }
    .panel-title { font-size: 30px; margin-bottom: 0; }
    .book-preview.cv { height: clamp(120px, 24vh, 320px); }
    .left-panel.cover-focus .book-preview.cv { height: clamp(150px, 33vh, 430px); }
  }

  /* ── RIGHT PANEL — questions ── */
  .right-panel {
    padding: 80px 80px 80px 72px;
    display: flex;
    flex-direction: column;
  }

  /* ── SCREEN STATES ── */
  .screen { display: none; scroll-margin-top: 20px; }
  .screen.active { display: flex; flex-direction: column; animation: fadeUp 0.5s ease forwards; }

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

  /* ── INTRO SCREEN ── */
  .path-card {
    border: 1.5px solid var(--tan);
    padding: 32px 28px;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--paper);
    position: relative;
  }

  .path-card:hover {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .path-card.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .path-card.selected::after {
    content: '✓';
    position: absolute;
    top: 14px; right: 16px;
    color: var(--burgundy);
    font-size: 14px;
  }

  /* ── COVER GALLERY (legacy, kept for compat) ── */
  .cover-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    max-width: 560px;
    margin-bottom: 36px;
  }

  .cover-card {
    border: 1.5px solid var(--tan);
    background: var(--paper);
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }

  .cover-card:hover {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .cover-card.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .cover-card.selected::after {
    content: '✓';
    position: absolute;
    top: 10px; right: 12px;
    color: var(--paper);
    background: var(--burgundy);
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    z-index: 2;
  }

  .cover-thumb-wrap {
    width: 100%;
    aspect-ratio: 285 / 400;
    overflow: hidden;
    background: var(--cream);
  }

  .cover-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cover-card-info {
    padding: 14px 12px 16px;
  }

  .cover-card-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
  }

  .cover-card-tagline {
    font-size: 11px;
    color: var(--brown);
    line-height: 1.5;
    font-style: italic;
  }

  /* ── VIBE PICKER ── */
  .vibe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 36px;
  }

  .vibe-card {
    border: 1.5px solid var(--tan);
    background: var(--paper);
    cursor: pointer;
    transition: all 0.3s;
    padding: 24px 20px;
    position: relative;
  }

  .vibe-card:hover { border-color: var(--burgundy); }

  .vibe-card.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .vibe-card.selected::after {
    content: '';
    position: absolute;
    top: 10px; right: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--burgundy);
  }

  .vibe-swatch {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
  }

  .vibe-swatch span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }

  .vibe-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
  }

  .vibe-desc {
    font-size: 11px;
    color: var(--brown);
    line-height: 1.5;
    font-style: italic;
  }

  /* ── PALETTE PICKER ── */
  .palette-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 36px;
  }

  .palette-option {
    border: 1.5px solid var(--tan);
    background: var(--paper);
    cursor: pointer;
    transition: all 0.3s;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
  }

  .palette-option:hover { border-color: var(--burgundy); }

  .palette-option.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .palette-option.selected::after {
    content: '';
    position: absolute;
    top: 50%; right: 16px;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--burgundy);
  }

  .palette-colors {
    display: flex;
    gap: 6px;
  }

  .palette-colors span {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.08);
  }

  .palette-name {
    font-size: 13px;
    color: var(--ink);
    font-weight: 400;
  }

  .path-icon {
    margin-bottom: 14px;
    display: block;
    line-height: 1;
  }

  .path-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 6px;
  }

  .path-desc {
    font-size: 16px;
    color: var(--brown);
    line-height: 1.6;
  }

  /* ── GIFT EMAIL SCREEN ── */
  /* ── QUESTION SCREEN ── */
  .question-meta {
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .question-meta::before {
    content: '';
    width: 20px; height: 1px;
    background: var(--burgundy);
  }

  .question-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 10px;
  }

  .question-text em { font-style: italic; color: var(--burgundy); }

  /* Required-field asterisk, and the legend explaining it */
  .question-text .req {
    color: #C4703F;
    font-weight: 400;
    font-size: 0.72em;
    vertical-align: 0.34em;
    line-height: 0;
    margin-left: 4px;
  }

  .required-note {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 36px;
  }

  .required-note .req {
    color: #C4703F;
    font-size: 17px;
    line-height: 0;
    vertical-align: -2px;
    margin-right: 3px;
  }

  /* Shown on Q1 at every width; the sidebar copy is display:none under 768px. */
  .required-note-inline { margin: -22px 0 32px; }

  .question-hint {
    font-size: 19px;
    color: var(--brown);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 480px;
  }

  /* Answer input styles */
  .answer-input {
    width: 100%;
    max-width: 520px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--tan);
    padding: 12px 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s;
    margin-bottom: 48px;
  }

  .answer-input:focus { border-color: var(--burgundy); }
  .answer-input::placeholder { color: var(--tan); font-style: italic; }

  .answer-textarea {
    width: 100%;
    max-width: 520px;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--tan);
    padding: 12px 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 20px;
    overflow: hidden;
    resize: none;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s;
    resize: none;
    /* Was 140px: empty boxes that tall made the story screens look like work,
       and the long examples still ran into the line (J, 25 Sep 2026). The
       examples are a line or two now and the box grows as they type. */
    min-height: 92px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .answer-textarea:focus { border-color: var(--burgundy); }
  /* The examples are the full, flowery ones (J, 25 Sep 2026), set a size
     smaller than an answer so they read as examples. Each box grows to fit its
     example (fitExamples in index.html), so none crosses the line. */
  .answer-textarea::placeholder { color: var(--tan); font-style: italic; font-size: 15px; line-height: 1.6; }

  /* ── VOICE DICTATION ── */
  .textarea-wrap {
    position: relative;
    max-width: 520px;
    width: 100%;
  }

  .textarea-wrap .answer-textarea {
    padding-right: 0;
  }

  .mic-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
    padding: 0;
    background: none;
    border: none;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 14px;
    font-style: normal;
    color: var(--brown);
    transition: color 0.25s;
    letter-spacing: 0.03em;
  }

  .mic-bar:hover, .mic-bar:focus-visible {
    color: var(--burgundy);
  }

  .mic-bar.recording {
    color: var(--burgundy);
  }

  .mic-bar.recording .mic-bar-dot {
    animation: mic-pulse 1.5s ease-in-out infinite;
  }

  .mic-bar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tan);
    flex-shrink: 0;
    transition: background 0.25s;
  }

  .mic-bar:hover .mic-bar-dot,
  .mic-bar.recording .mic-bar-dot {
    background: var(--burgundy);
  }

  .mic-btn {
    display: none;
  }

  .mic-btn:hover {
    border-color: var(--burgundy);
    color: var(--burgundy);
  }

  .mic-btn.recording {
    border-color: var(--burgundy);
    background: var(--burgundy);
    color: var(--paper);
    animation: mic-pulse 1.5s ease-in-out infinite;
  }

  @keyframes mic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
  }

  .mic-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mic-status {
    font-size: 12px;
    color: var(--burgundy);
    font-weight: 400;
    letter-spacing: 0.05em;
  }

  .mic-status:empty {
    display: none;
  }

  .textarea-wrap .answer-textarea {
    margin-bottom: 0;
  }

  .mic-hint {
    display: none;
    pointer-events: none;
  }

  .textarea-wrap:hover .mic-hint,
  .textarea-wrap:focus-within .mic-hint {
    opacity: 1;
  }

  /* Chip options */
  .chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 520px;
    margin-bottom: 48px;
  }

  .chip {
    padding: 10px 20px;
    border: 1.5px solid var(--tan);
    background: transparent;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--brown);
    cursor: pointer;
    transition: all 0.25s;
    border-radius: 0;
  }

  .chip:hover { border-color: var(--tan); color: var(--burgundy); }
  .chip.selected { border-color: var(--burgundy); background: var(--cream); color: var(--burgundy); }

  /* Edition select cards */
  .edition-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 48px;
  }

  .edition-opt {
    border: 1.5px solid var(--tan);
    padding: 24px 20px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
  }

  .edition-opt:hover { border-color: var(--tan); }
  .edition-opt.selected { border-color: var(--burgundy); background: var(--cream); }
  .edition-opt.selected::after { content: '✓'; position: absolute; top: 12px; right: 14px; color: var(--burgundy); font-size: 13px; }

  .edition-opt-badge {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--burgundy);
    margin-bottom: 8px;
  }

  .edition-opt-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
  }

  .edition-opt-pages {
    font-size: 11px;
    color: var(--brown);
    margin-bottom: 12px;
  }

  .edition-opt-price {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 300;
    color: var(--ink);
  }

  .edition-opt-price sup { font-size: 12px; font-family: 'EB Garamond', Georgia, serif; }

  /* Navigation buttons */
  .btn-row {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-top: 36px;
  }

  .btn-next {
    background: var(--burgundy);
    color: var(--paper);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 18px 36px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
  }

  .btn-next:hover { background: var(--burgundy-dk); }
  .btn-next:disabled { background: var(--cream); cursor: not-allowed; }

  .btn-prev {
    font-size: 16px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    background: none;
    border: none;
    cursor: pointer;
    padding: 18px 0;
    transition: color 0.3s;
    font-family: 'EB Garamond', Georgia, serif;
  }

  .btn-prev:hover { color: var(--burgundy); }

  .skip-link {
    font-size: 14px;
    color: var(--brown);
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: color 0.3s;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'EB Garamond', Georgia, serif;
  }

  .skip-link:hover { color: var(--burgundy); }

  /* Form fields for gift + checkout */
  .field-group { margin-bottom: 28px; max-width: 520px; }

  .field-group label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 10px;
  }

  .field-group input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--tan);
    padding: 10px 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--ink);
    outline: none;
    transition: border-color 0.3s;
  }

  .field-group input:focus { border-color: var(--burgundy); }
  .field-group input::placeholder { color: var(--tan); font-style: italic; }

  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Review screen */
  .review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--tan);
    max-width: 520px;
    margin-bottom: 40px;
  }

  .review-item {
    background: var(--paper);
    padding: 18px 20px;
  }

  .review-label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 6px;
  }

  .review-value {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--ink);
    font-style: italic;
  }

  /* Checkout CTA */
  .checkout-summary {
    background: var(--cream);
    padding: 28px 32px;
    max-width: 520px;
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .checkout-edition-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
  }

  .checkout-edition-detail {
    font-size: 12px;
    color: var(--brown);
  }

  .checkout-price {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 32px;
    font-weight: 300;
    color: var(--ink);
    flex-shrink: 0;
  }

  .checkout-price sup { font-size: 14px; font-family: 'EB Garamond', Georgia, serif; font-weight: 300; }

  .copies-selector {
    background: var(--cream);
    padding: 20px 32px;
    max-width: 520px;
    margin-bottom: 20px;
  }
  .copies-selector-label {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 12px;
  }
  .copies-stepper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
  }
  .copies-stepper button {
    width: 36px; height: 36px;
    border: 1px solid var(--tan);
    background: var(--paper);
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
    font-family: 'EB Garamond', Georgia, serif;
    display: flex; align-items: center; justify-content: center;
  }
  .copies-stepper button:hover { background: var(--cream); }
  .copies-stepper button:disabled { opacity: 0.3; cursor: default; }
  .copies-stepper .copies-count {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 22px;
    color: var(--ink);
    min-width: 24px;
    text-align: center;
  }
  .copies-pricing {
    font-size: 13px;
    color: var(--brown);
    line-height: 1.6;
  }
  .copies-pricing .copies-total {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    color: var(--ink);
    margin-top: 6px;
  }
  .copies-note {
    font-size: 12px;
    color: var(--tan);
    font-style: italic;
    margin-top: 8px;
    line-height: 1.5;
  }

  .btn-checkout {
    width: 100%;
    max-width: 520px;
    background: var(--burgundy);
    color: var(--paper);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 16px;
  }

  .btn-checkout:hover { background: var(--burgundy-dk); }

  .save-toast {
    /* Was centred on the viewport, which is exactly where the questionnaire
       column sits — it covered whatever field you were filling in. */
    position: fixed;
    /* Clears the roadmap bar, which now occupies 64-128px and runs to the
       right edge - the toast was landing on the last stage. */
    top: 144px;
    right: 24px;
    bottom: auto;
    left: auto;
    width: fit-content;
    background: #53392A;
    color: #FFFDF9;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
  }
  .save-toast.visible { opacity: 0.55; }

  .checkout-note {
    font-size: 11px;
    color: var(--brown);
    text-align: center;
    max-width: 520px;
    letter-spacing: 0.04em;
  }

  /* Success / confirmation */
  .success-icon {
    width: 56px; height: 56px;
    border: 1.5px solid var(--burgundy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    color: var(--burgundy);
    font-size: 22px;
  }

  .success-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 300;
    color: var(--ink);
    margin-bottom: 16px;
  }

  .success-title em { font-style: italic; color: var(--burgundy); }

  .success-desc {
    font-size: 14px;
    color: var(--brown);
    line-height: 1.85;
    max-width: 460px;
    margin-bottom: 40px;
  }

  /* ── PREVIEW SCREEN ── */
  .preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    gap: 28px;
  }

  .preview-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid var(--tan);
    border-top-color: var(--burgundy);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .preview-loading-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 300;
    font-style: italic;
    color: var(--brown);
    text-align: center;
    max-width: 320px;
    line-height: 1.6;
  }

  .preview-loading-sub {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--tan);
  }

  /* Open book layout */
  .open-book {
    max-width: 640px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 20px 60px rgba(34,24,19,0.18);
    margin-bottom: 36px;
    position: relative;
  }

  /* spine shadow in middle */
  .open-book::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to right, rgba(34,24,19,0.15), rgba(34,24,19,0.05));
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
  }

  .book-page {
    background: var(--paper);
    padding: 44px 36px;
    min-height: 380px;
    position: relative;
  }

  .book-page-left {
    background: var(--cream);
    border-right: 1px solid rgba(34,24,19,0.06);
  }

  .book-page-number {
    position: absolute;
    bottom: 20px;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--tan);
  }

  .book-page-left .book-page-number { left: 36px; }
  .book-page-right .book-page-number { right: 36px; }

  .book-chapter-label {
    font-size: 8px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .book-chapter-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--tan);
  }

  .book-drop-cap {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 64px;
    font-weight: 400;
    color: var(--burgundy);
    float: left;
    line-height: 0.75;
    margin-right: 6px;
    margin-top: 8px;
  }

  .book-body-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.95;
    color: var(--ink);
  }

  .book-body-text p {
    margin-bottom: 14px;
    text-align: justify;
  }

  .book-body-text p:last-child { margin-bottom: 0; }

  .book-title-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .book-title-label {
    font-size: 8px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--tan);
    margin-bottom: 24px;
  }

  .book-title-name {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 32px;
    font-weight: 300;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 16px;
  }

  .book-title-divider {
    width: 32px;
    height: 1px;
    background: var(--tan);
    margin: 0 auto 16px;
    opacity: 0.5;
  }

  .book-title-sub {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 12px;
    font-style: italic;
    color: var(--brown);
    line-height: 1.6;
    max-width: 180px;
  }

  .book-publisher {
    position: absolute;
    bottom: 36px;
    left: 0; right: 0;
    text-align: center;
    font-size: 8px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--tan);
  }

  /* Preview actions */
  .preview-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 640px;
    margin-bottom: 12px;
  }

  .btn-regen {
    background: transparent;
    border: 1.5px solid var(--tan);
    color: var(--brown);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 13px 24px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .btn-regen:hover { border-color: var(--burgundy); color: var(--burgundy); }

  .preview-note {
    font-size: 12px;
    color: var(--brown);
    max-width: 580px;
    line-height: 1.7;
    font-style: italic;
  }

  .preview-disclaimer {
    font-size: 11px;
    color: var(--tan);
    max-width: 580px;
    margin-top: 6px;
    letter-spacing: 0.03em;
  }



  /* ── PHOTO UPLOAD ── */
  .upload-zone {
    max-width: 520px;
    border: 1.5px dashed var(--tan);
    padding: 48px 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    margin-bottom: 32px;
    background: transparent;
  }

  .upload-zone:hover { border-color: var(--burgundy); background: var(--cream); }
  .upload-zone.has-photos { border-color: var(--tan); border-style: solid; }

  .upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .upload-icon {
    margin-bottom: 16px;
    color: var(--burgundy);
    opacity: 0.6;
  }

  .upload-title {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 300;
    color: var(--ink);
    margin-bottom: 8px;
  }

  .upload-sub {
    font-size: 12px;
    color: var(--brown);
    line-height: 1.6;
  }

  .photo-previews {
    display: flex;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }

  .photo-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid var(--border);
    position: relative;
  }

  .photo-thumb-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .photo-remove {
    position: absolute;
    top: -8px; right: -8px;
    width: 20px; height: 20px;
    background: var(--burgundy);
    color: var(--paper);
    border: none;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .upload-count {
    font-size: 11px;
    color: var(--burgundy);
    letter-spacing: 0.1em;
    margin-top: 8px;
  }

  /* ── BOOK ILLUSTRATION STYLES ── */
  .book-illustration-page {
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    min-height: 380px;
    position: relative;
    overflow: hidden;
  }

  .book-illustration-page::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(34,24,19,0.08);
    pointer-events: none;
  }

  .book-pet-photo {
    width: 100%;
    height: 260px;
    object-fit: cover;
    filter: sepia(40%) contrast(1.1) brightness(0.95) saturate(0.8);
    display: block;
  }

  .book-photo-caption {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 10px;
    font-style: italic;
    font-weight: 300;
    color: var(--brown);
    text-align: center;
    margin-top: 12px;
    letter-spacing: 0.05em;
  }

  .book-no-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 260px;
    width: 100%;
    gap: 12px;
    opacity: 0.4;
  }

  .book-no-photo-text {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown);
  }


  /* ── TITLE CHOICE ── */
  .title-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 520px;
    margin-bottom: 32px;
  }

  .title-suggestion {
    border: 1.5px solid var(--tan);
    padding: 20px 18px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
  }

  .title-suggestion:hover { border-color: var(--tan); background: var(--cream); }

  /* The generator. Dashed, so it reads as an action rather than a title you
     could pick. */
  .title-reroll {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title-reroll::after { display: none !important; }
  .title-reroll .title-suggestion-text { text-align: center; }

  .title-suggestion.selected {
    border-color: var(--burgundy);
    background: var(--cream);
  }

  .title-suggestion.selected::after {
    content: '';
    position: absolute;
    top: 10px; right: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--burgundy);
  }

  .title-suggestion-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    color: var(--ink);
    line-height: 1.3;
  }

  .title-own-input {
    max-width: 520px;
    margin-bottom: 40px;
  }

  .title-own-label {
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--brown);
    margin-bottom: 10px;
    display: block;
  }

  .title-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 520px;
    margin-bottom: 24px;
  }

  .title-divider-line {
    flex: 1;
    height: 1px;
    background: var(--tan);
  }

  .title-divider-text {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brown);
  }

  .faq-content { padding: 120px 40px 80px; }

  /* ── PRODUCT SHOWCASE ── */
  .product-showcase {
    padding: 0;
    background: var(--paper);
  }

  .product-showcase-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
  }

  .product-showcase-row.reverse { direction: rtl; }
  .product-showcase-row.reverse > * { direction: ltr; }

  .product-showcase-img {
    overflow: hidden;
  }

  .product-showcase-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }

  .product-showcase-img:hover img {
    transform: scale(1.02);
  }

  .product-showcase-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px;
  }

  .product-showcase-text .section-label {
    margin-bottom: 20px;
  }

  .product-showcase-text h3 {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 300;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 20px;
  }

  .product-showcase-text h3 em {
    font-style: italic;
    color: var(--burgundy);
  }

  .product-showcase-text p {
    font-size: 15px;
    color: var(--brown);
    line-height: 1.85;
    font-weight: 300;
    max-width: 400px;
  }

  .product-showcase-row.on-cream .product-showcase-text {
    background: var(--cream);
  }

  /* ══════════════════════════════════════════════════════════ */
  /* MOBILE RESPONSIVE                                         */
  /* ══════════════════════════════════════════════════════════ */

  @media (max-width: 768px) {

    /* ── NAV ── */
    :root { --nav-h: 56px; --bar-h: 54px; }
    nav { padding: 0 16px; }
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-logo img { height: 32px; }
    .hamburger { display: flex; }

    /* ── GIFT HERO ── */
    .gift-hero { min-height: auto; padding-top: 56px; }
    .gift-hero-inner { padding: 48px 24px; }

    /* ── HERO ── */
    .hero:not(.hero--video) {
      grid-template-columns: 1fr;
      min-height: auto;
      padding-top: 56px;
    }
    .hero-left { padding: 40px 24px 36px; }
    .hero-right { padding: 0 !important; height: 50vh; min-height: 300px; }
    .hero-right img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
    .hero--video .hero-content-overlay { padding: 0 20px 24px !important; max-width: 100% !important; }
    .hero--video .hero-headline { font-size: 2rem !important; margin-bottom: 0.5rem !important; }
    .hero--video .hero-sub { font-size: 0.9rem !important; margin-bottom: 0.5rem !important; line-height: 1.45 !important; }
    .hero--video .buyer-line { font-size: 15px !important; margin-bottom: 1.5rem !important; }
    .hero-cta-row { flex-direction: column; gap: 8px !important; }
    .hero-btn { justify-content: center; text-align: center; font-size: 1rem !important; padding: 0.8rem 1.2rem !important; }
    .hero-btn--primary { max-width: none; white-space: normal; }
    .montage-track { gap: 4px !important; padding: 0 !important; transform: translate(-8%, 20%); }
    .montage-col { gap: 4px !important; flex: 0 0 45% !important; transform: none !important; }
    .montage-col img { border-radius: 0 !important; flex: none !important; object-fit: initial !important; height: auto !important; width: 100% !important; }

    /* ── HOW IT WORKS ── */
    .how-section { padding: 40px 24px; }
    .how-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
    .editions-section { padding: 64px 24px; }
    /* One step per row, but each card laid out horizontally: the number sits
       in a left gutter beside the copy rather than stacked on top of it. Saves
       roughly 60px a card, so the section reads as a list instead of three
       screens of scrolling. */
    /* .steps-grid.steps-three (two classes) outranks a bare .steps-grid, and
       a media query adds no specificity - so this has to match it or the
       three-column desktop rule wins here too, which is what was happening:
       106px columns on a phone. */
    .steps-grid,
    .steps-grid.steps-three,
    .steps-grid.steps-four { grid-template-columns: 1fr; gap: 2px; }
    .step {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: 16px;
      align-items: start;
      padding: 22px 22px 24px;
    }
    .step-number {
      font-size: 30px;
      line-height: 1;
      margin-bottom: 0;
      grid-column: 1;
      grid-row: 1 / span 2;
    }
    .step-accent { display: none; }
    .step-title { font-size: 19px; margin-bottom: 6px; grid-column: 2; grid-row: 1; }
    .step-desc { font-size: 15px; grid-column: 2; grid-row: 2; }

    /* ── EDITIONS ── */
    .editions-grid { grid-template-columns: 1fr; }
    .edition-card.wide { grid-column: span 1; }

    /* ── TESTIMONIALS ── */
    .testimonials-section { padding: 56px 24px !important; }
    .testimonial-pair { gap: 16px; width: 360px !important; }
    .testimonial-photo img { width: 120px !important; height: 120px !important; }
    .testimonial-quote { padding: 18px !important; min-height: 120px !important; }

    /* ── REVIEWS ── */
    .reviews-section { padding: 64px 24px; }
    .reviews-grid { grid-template-columns: 1fr; gap: 40px; }

    /* ── FORM SECTION ── */
    .form-section { padding: 64px 24px; }
    .form-inner { grid-template-columns: 1fr; gap: 40px; }
    .form-row { grid-template-columns: 1fr; }

    /* ── PRODUCT SHOWCASE ── */
    .product-showcase-row {
      grid-template-columns: 1fr;
      min-height: auto;
    }
    .product-showcase-row.reverse { direction: ltr; }
    .product-showcase-img { height: auto; }
    .product-showcase-img img { object-fit: contain; }
    .product-showcase-text { padding: 48px 24px; }

    /* ── INSTAGRAM ── */
    .ig-section { padding: 40px 24px; }
    .ig-grid { grid-template-columns: repeat(3, 1fr); }
    .ig-cell:nth-child(4),
    .ig-cell:nth-child(5) { display: none; }

    /* ── FOOTER ── */
    footer { padding: 48px 24px 32px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

    /* ── QUESTIONNAIRE LAYOUT ── */
    .page {
      grid-template-columns: 1fr;
      padding-top: calc(var(--nav-h) + var(--bar-h));
    }
    .left-panel {
      display: none;
    }

    /* The panel is hidden here, so the cover comes to the screen doing the
       asking - otherwise three screens in a row customise something unseen.
       It sticks, because the vibes and palettes sit below the fold: without
       this you scroll down to tap one and the thing it changes is off screen
       above you. */
    .cover-mobile-slot {
      position: sticky;
      top: calc(var(--nav-h) + var(--bar-h));
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 0 26px;
      padding: 14px 0 12px;
      background: var(--paper);
      box-shadow: 0 10px 14px -10px rgba(34,24,19,.18);
    }
    .cover-mobile-slot #coverBlock { align-items: center; }
    /* Smaller than it was, because it is on screen the whole time now. */
    .cover-mobile-slot .book-preview.cv { height: 168px; width: auto; font-size: 10.5px; }
    .cover-mobile-slot .cover-note { max-width: 300px; text-align: center; margin-top: 10px; font-size: 11px; }
    .right-panel {
      padding: 32px 24px 40px;
    }

    /* ── QUESTIONNAIRE SCREENS ── */
    .question-text { font-size: clamp(26px, 6vw, 38px); }
    .question-hint { font-size: 16px; }
    .answer-input { font-size: 18px; }
    .answer-textarea { font-size: 18px; }
    .field-row { grid-template-columns: 1fr; }
    .path-card { padding: 24px 20px; }
    .cover-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cover-card-info { padding: 10px 10px 14px; }
    .vibe-grid { grid-template-columns: 1fr; }
    .cover-card-name { font-size: 13px; }
    .cover-card-tagline { font-size: 10px; }

    /* ── CHIPS ── */
    .chip { padding: 10px 16px; font-size: 13px; }

    /* ── BUTTONS ── */
    .btn-next { padding: 16px 28px; font-size: 14px; }
    .btn-checkout { font-size: 14px; padding: 16px 24px; }

    /* ── REVIEW GRID ── */
    .review-grid { grid-template-columns: 1fr; }

    /* ── GIFTING SECTION ── */
    #gifting { padding: 56px 24px; }

    /* ── GIFT CHECKOUT ── */
    .checkout-summary { flex-direction: column; gap: 12px; align-items: flex-start; }

    /* ── FAQ PAGE ── */
    .faq-content { padding: 60px 20px 40px; }

  }

  /* ── BOOK SAMPLE VIEWER MODAL ── */
  .sample-modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(239,232,219,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
  }
  .sample-modal-overlay.active { display: flex; }

  .sample-modal-header {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; margin-bottom: 20px; width: 100%; max-width: 900px;
    position: relative;
  }
  .sample-toggle {
    display: flex; gap: 0; border: 1px solid var(--tan); border-radius: 2px; overflow: hidden;
  }
  .sample-toggle button {
    font-family: 'EB Garamond', Georgia, serif; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; padding: 8px 20px; border: none; cursor: pointer;
    background: transparent; color: var(--brown); transition: all 0.2s;
  }
  .sample-toggle button.active {
    background: var(--burgundy); color: var(--paper);
  }
  .sample-close {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    background: none; border: none; font-size: 28px; color: var(--brown);
    cursor: pointer; line-height: 1; padding: 4px 8px;
  }
  .sample-close:hover { color: var(--burgundy); }

  .sample-label { text-align: center; }
  .sample-label-primary {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 16pt;
    color: var(--brown);
  }
  .sample-label-qualifier {
    font-family: 'Inter', sans-serif;
    font-size: 10px; letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown); opacity: 0.6;
    margin-top: 0.4em;
  }
  .sample-label-ornament {
    font-size: 14pt; color: var(--burgundy);
    margin-top: 0.6em; margin-bottom: 1em;
  }

  .sample-carousel-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    min-height: 0;
    position: relative;
  }
  .sample-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .sample-carousel-track {
    display: flex;
    transition: transform 0.35s ease;
  }
  .sample-carousel-slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .sample-carousel-slide img {
    max-width: 100%;
    max-height: 65vh;
    height: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 0 8px 40px rgba(34,24,19,0.18), 0 2px 12px rgba(34,24,19,0.1);
  }
  .sample-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  .sample-carousel-nav button {
    background: none;
    border: 1px solid var(--tan);
    color: var(--brown);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 18px;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.2s;
  }
  .sample-carousel-nav button:hover {
    border-color: var(--burgundy);
    color: var(--burgundy);
  }
  .sample-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .sample-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--tan);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
  }
  .sample-dot.active {
    background: var(--burgundy);
    border-color: var(--burgundy);
  }
  .sample-page-count {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 11px;
    color: var(--brown);
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-top: 12px;
  }

  @media (max-width: 767px) {
    .sample-carousel-wrap { max-width: 100%; }
    .sample-carousel-slide { padding: 0 8px; }
    .sample-carousel-slide img { max-height: 55vh; }
    .sample-carousel-nav button { padding: 6px 14px; font-size: 10px; }
  }



/* ── Family screen: the cast page and the contents page ─────────────────
   Both are drawn as pages of the book, double-ruled like a title page, so
   the owner is filling in the first page of the thing they are making. */
.cast-page, .toc-page { position: relative; border: 1px solid var(--tan); background: var(--paper); padding: 20px 18px 16px; margin-top: 6px; }
/* One hairline frame: the inner second border made the cast read as a form. */
.cast-page::before, .toc-page::before { display: none; }
.cast-title { margin: 0; text-align: center; font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-weight: 400; font-size: 22px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--burgundy); }
.cast-sub { text-align: center; font-style: italic; font-size: 14px; color: #8A7A66; margin: 2px 0 10px; }
.cast-orn { text-align: center; color: var(--burgundy); font-size: 13px; margin: 0 0 4px; }
.cast-row { display: grid; grid-template-columns: 1fr 1fr 18px; gap: 6px 12px; margin: 12px 0 0; }
.cast-row input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--tan); border-radius: 0; padding: 6px 0 4px; font-family: 'EB Garamond', Georgia, serif; font-size: 15px; font-weight: 300; color: var(--ink); outline: none; appearance: none; }
.cast-row input:focus { border-bottom-color: var(--burgundy); }
.cast-row input::placeholder { color: #B3A793; }
.cast-row .cast-name { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; }
.cast-row .cast-name::placeholder { text-transform: none; letter-spacing: 0; }
.cast-row .cast-called { font-style: italic; color: var(--burgundy); }
.cast-row .cast-note { color: var(--brown); }
/* A mic for the fields that appear as you go - the cast's one line, a
   moment's answer. Same behaviour as the wide strip under the long answers,
   sized to sit on a single line. */
.mic-inline { flex: 0 0 auto; background: none; border: 0; padding: 2px; line-height: 0;
  color: var(--tan); cursor: pointer; transition: color 0.2s; }
.mic-inline svg { width: 15px; height: 15px; display: block; }
.mic-inline:hover, .mic-inline:focus-visible { color: var(--burgundy); }
.mic-inline.recording { color: var(--burgundy); animation: mic-pulse 1.5s ease-in-out infinite; }
.cast-note-line { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; }
.cast-note-line .cast-note { flex: 1; min-width: 0; }
.ch-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Under the answer: the way in by voice, and the way to send. An unlabelled
   icon beside a button with words on it reads as nothing at all. */
.ch-under { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 6px; }
.mic-inline--labelled { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; line-height: 1.2;
  font-family: 'EB Garamond', Georgia, serif; font-size: 13px; color: var(--brown); }
.mic-inline--labelled svg { width: 13px; height: 13px; }
.mic-inline--labelled.recording { color: var(--burgundy); }
.ch-under .ch-a-hint { margin: 0; }

.cast-del { grid-column: 3; grid-row: 1 / span 2; align-self: center; background: none; border: 0; padding: 0; width: 18px;
  font-family: 'EB Garamond', Georgia, serif; font-size: 17px; line-height: 1; color: var(--tan); cursor: pointer;
  opacity: 0; transition: opacity 0.2s, color 0.2s; }
.cast-row.has-content .cast-del { opacity: 1; }
.cast-del:hover, .cast-del:focus-visible { color: var(--burgundy); opacity: 1; }
.cast-roles-lbl { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A7A66; margin: 16px 0 0; }
.cast-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.cast-roles .chip { padding: 3px 11px; font-size: 14px; border-radius: 999px; border-color: #E4D9C8; background: #FBF8F2; }
.cast-roles .chip:hover { border-color: var(--tan); }
.cast-add, .toc-add { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--burgundy); border-bottom: 1px solid var(--tan); cursor: pointer; }
.pair-optional { font-style: italic; font-family: 'EB Garamond', Georgia, serif; font-weight: 400; letter-spacing: 0; text-transform: none; color: #8A7A66; font-size: 13px; margin-left: 8px; }
.q-direction { font-size: 15px; font-style: italic; color: var(--brown); line-height: 1.5; margin: 0 0 12px; }
.toc-title { text-align: center; margin: 0 0 4px; font-family: 'Inter', system-ui, sans-serif; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--burgundy); }
.ch-row { margin: 12px 0 0; }
.ch-line { display: flex; align-items: baseline; gap: 10px; }
/* A small tan star marks each moment (it was a Roman numeral). The follow-up
   questions under a moment use a larger burgundy star, so the two stay apart. */
.ch-num { font-family: 'EB Garamond', Georgia, serif; font-size: 11px; color: var(--tan); flex: 0 0 26px; }
.ch-del { flex: 0 0 18px; background: none; border: 0; padding: 0; font-family: 'EB Garamond', Georgia, serif;
  font-size: 17px; line-height: 1; color: var(--tan); cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s; }
.ch-row.has-content .ch-del { opacity: 1; }
.ch-del:hover, .ch-del:focus-visible { color: var(--burgundy); opacity: 1; }
.ch-title { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px dotted var(--tan); border-radius: 0; padding: 4px 0 2px; font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-size: 20px; color: var(--ink); outline: none; appearance: none; }
.ch-title:focus { border-bottom-color: var(--burgundy); }
.ch-title::placeholder { color: #B3A793; font-size: 17px; }
.ch-thread { margin: 0 0 0 36px; }
.ch-q { display: block; font-style: italic; font-size: 16px; color: var(--brown); margin: 12px 0 3px; line-height: 1.4; }
.ch-q::before { content: '\2726'; font-style: normal; font-size: 10px; color: var(--burgundy); margin-right: 7px; vertical-align: 1px; }
.ch-q.thinking { color: #8A7A66; }
.ch-done { display: block; font-style: italic; font-size: 14.5px; color: #8A7A66; margin: 10px 0 2px; }
.ch-done::before { content: '\2713'; font-style: normal; font-size: 12px; color: var(--burgundy); margin-right: 7px; }
.ch-row.done .ch-num { color: var(--burgundy); }
.ch-q.thinking::after { content: '\2026'; animation: rh-dots 1.2s steps(3, end) infinite; }
@keyframes rh-dots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }
.ch-answer { display: flex; align-items: flex-end; gap: 10px; }
.ch-send { flex: 0 0 auto; background: none; border: 1px solid var(--tan); border-radius: 0; padding: 6px 13px;
  font-family: 'EB Garamond', Georgia, serif; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brown); cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s, border-color 0.2s; }
.ch-qa.has-text .ch-send { opacity: 1; }
.ch-send:hover, .ch-send:focus-visible { color: var(--burgundy); border-color: var(--burgundy); opacity: 1; }
.ch-qa.sent .ch-send { opacity: 0; pointer-events: none; }
/* The title's own Done: a phone keyboard has no obvious way to commit a
   single-line field, so the button is the way in. It goes once asked. */
.ch-send-title { opacity: 0; pointer-events: none; margin-right: 2px; }
.ch-row.has-content .ch-send-title { opacity: 1; pointer-events: auto; }
.ch-row.asked .ch-send-title { opacity: 0; pointer-events: none; }
.ch-answer .ch-a { flex: 1 1 auto; min-width: 0; }
.ch-a-hint { display: block; font-size: 13px; color: #8A7A66; margin: 5px 0 0; font-style: italic; }
.ch-a { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--tan); border-radius: 0; padding: 4px 0 3px; font-family: 'EB Garamond', Georgia, serif; font-size: 17px; font-weight: 300; line-height: 1.45; color: var(--brown); outline: none; resize: none; min-height: 32px; overflow: hidden; appearance: none; }
.ch-a:focus { border-bottom-color: var(--burgundy); }
@media (max-width: 600px) {
  .cast-page, .toc-page { padding: 16px 14px 14px; }
  .cast-title { font-size: 19px; }
  .ch-thread { margin-left: 30px; }
}
@media (prefers-reduced-motion: reduce) { .ch-q.thinking::after { animation: none; content: '\2026'; } }


/* Which photo leads. The book build makes the first one the author portrait,
   so the badge marks it and every other thumb offers to take its place. */
.photo-thumb-wrap.is-author .photo-thumb { outline: 2px solid var(--burgundy); outline-offset: -2px; }
.photo-badge, .photo-pick { position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-family: 'Inter', system-ui, sans-serif; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 2px; border: 0; }
.photo-badge { background: var(--burgundy); color: var(--paper); }
.photo-pick { background: rgba(34,24,19,0.62); color: #fff; cursor: pointer; opacity: 0; transition: opacity 0.2s; }
.photo-thumb-wrap:hover .photo-pick, .photo-pick:focus-visible { opacity: 1; }
@media (hover: none) { .photo-pick { opacity: 1; background: rgba(34,24,19,0.5); } }

/* ── The fork ───────────────────────────────────────────────────────────
   Two doors, offered once, after the cover is chosen. Same card shape as
   the editions on the homepage, so it reads as a choice and not a warning. */
.fork-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 0 0 22px; }
.fork-card {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--tan); border-radius: 0;
  padding: 26px 24px; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.fork-card:hover { border-color: var(--burgundy); box-shadow: 0 14px 30px rgba(34,24,19,0.10); transform: translateY(-2px); }
.fork-card:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.fork-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--cream); color: var(--brown); transition: background 0.25s; }
.fork-icon svg { width: 21px; height: 21px; }
.fork-card:hover .fork-icon { background: #E5DAC6; }
.fork-tag { display: inline-block; width: fit-content; margin: 20px 0 0; padding: 4px 11px;
  background: var(--cream); font-family: 'Inter', system-ui, sans-serif; font-size: 10px;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brown); }
.fork-title { font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-size: 27px;
  font-weight: 400; color: var(--ink); margin: 14px 0 0; line-height: 1.15; }
.fork-body { font-family: 'EB Garamond', Georgia, serif; font-size: 16px; font-weight: 300;
  line-height: 1.65; color: var(--brown); margin: 10px 0 26px; }
.fork-body b { font-weight: 400; color: var(--ink); box-shadow: inset 0 -0.38em 0 rgba(188,154,113,0.30); }
.fork-sub { display: block; margin-top: 12px; font-style: italic; font-size: 15px; color: var(--tan); }
/* One line each, or they sit at different heights and the two doors stop
   looking like equal choices. */
.fork-cta { margin-top: auto; display: flex; align-items: center; justify-content: center;
  padding: 14px 16px; border: 1px solid transparent; color: var(--paper); white-space: nowrap;
  font-family: 'EB Garamond', Georgia, serif; font-size: 14px; letter-spacing: 0.07em;
  text-transform: uppercase; transition: background-color 0.25s; }
.fork-cta--parlor { background: var(--burgundy); }
.fork-card:hover .fork-cta--parlor { background: var(--burgundy-dk); }
/* A second colour so neither door looks like the other one's hover state. */
.fork-cta--desk { background: #B2573A; }
.fork-card:hover .fork-cta--desk { background: #984830; }
/* The reassurance under the two doors. It is the line that lets someone pick
   without weighing it, so it carries rather than whispers. */
/* Centred on the cards, not on the column. .fork-grid is capped at 760px and
   left-aligned in a wider parent, so `margin: 0 auto` here centred the line in
   the parent and left it sitting right of the two doors. */
.fork-foot { font-family: 'EB Garamond', Georgia, serif; font-style: italic;
  font-size: 22px; font-weight: 500; line-height: 1.4; text-align: center;
  color: var(--brown); margin: 0 0 34px; max-width: 760px; }
@media (max-width: 780px) { .fork-foot { font-size: 19px; } }
@media (max-width: 780px) {
  .fork-grid { grid-template-columns: 1fr; gap: 16px; }
  .fork-card { padding: 22px 20px; }
  .fork-title { font-size: 24px; }
}

/* ── What's ahead ──
   Shown once when someone starts the questionnaire fresh (never on a resume
   link): how long it takes, what to have ready, and that they can leave and
   come back. The roadmap already shows the stages, so this does not. */
.ahead { position: fixed; inset: 0; z-index: 1500; background: rgba(34,24,19,.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto; opacity: 0; transition: opacity .3s; }
.ahead.is-open { opacity: 1; }
.ahead[hidden] { display: none; }
.ahead-card { background: var(--paper); width: 100%; max-width: 660px; margin: auto;
  padding: 40px 38px 34px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.25);
  transform: translateY(12px); transition: transform .35s; }
.ahead.is-open .ahead-card { transform: none; }
.ahead-card:focus { outline: none; }
.ahead-title { font-family: 'EB Garamond', Georgia, serif; font-weight: 400;
  font-size: 34px; line-height: 1.15; color: var(--ink); margin: 0 0 6px; }
.ahead-title em { color: var(--burgundy); }
.ahead-sub { font-family: 'EB Garamond', Georgia, serif; font-style: italic;
  font-size: 18px; color: var(--brown); margin: 0 0 28px; }
.ahead-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 0 0 30px; }
.ahead-item { border: 1px solid #E4D9C8; background: #FBF8F2; padding: 22px 16px 18px;
  font-family: 'EB Garamond', Georgia, serif; }
.ahead-item svg { width: 32px; height: 32px; color: var(--burgundy); margin: 0 0 8px; }
.ahead-item b { display: block; font-weight: 500; font-size: 19px; color: var(--ink);
  margin: 0 0 4px; }
.ahead-item span { display: block; font-size: 15px; line-height: 1.45; color: var(--brown); }
@media (max-width: 620px) {
  .ahead-card { padding: 28px 18px 24px; }
  .ahead-title { font-size: 28px; }
  .ahead-sub { margin-bottom: 20px; }
  .ahead-row { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
  .ahead-item { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px;
    text-align: left; padding: 14px 16px; }
  .ahead-item svg { grid-row: span 2; margin: 2px 0 0; }
}

/* ── The little things ──
   One line per habit, each marked with a small tan star, in the same underlined
   style as the family list. */
.lt-list { max-width: 520px; display: flex; flex-direction: column; gap: 6px; }
.lt-row { display: grid; grid-template-columns: 22px 1fr; align-items: baseline; gap: 8px; }
.lt-mark { font-size: 11px; color: var(--tan); text-align: center; }
.lt-line { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--tan); border-radius: 0;
  padding: 10px 0 6px; font-family: 'EB Garamond', Georgia, serif; font-size: 19px; font-weight: 300;
  color: var(--ink); outline: none; appearance: none; transition: border-color 0.3s; }
.lt-line:focus { border-bottom-color: var(--burgundy); }
.lt-line::placeholder { color: #B3A793; font-style: italic; }
.lt-note { font-size: 15px; color: var(--brown); margin-top: 12px; font-style: italic; }
.lt-add { display: inline-block; align-self: flex-start; margin: 14px 0 0 30px; font-size: 14px; color: var(--burgundy); border-bottom: 1px solid var(--tan); cursor: pointer; }
@media (max-width: 760px) { .lt-line { font-size: 17px; } }
/* On the review, the little things read as the list they were written as. */
.rv-lt { display: block; padding-left: 16px; position: relative; margin: 0 0 3px; }
.rv-lt::before { content: '\2726'; position: absolute; left: 0; top: 2px; font-size: 9px; color: var(--tan); }

/* The cast's note, behind a link until wanted. */
.cast-note-open { grid-column: 1 / 3; justify-self: start; background: none; border: 0; padding: 2px 0 0; cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; color: #8A7A66; }
.cast-note-open:hover { color: var(--burgundy); }
.cast-row .cast-note-line { display: none; }
.cast-row.note-open .cast-note-line { display: flex; }
.cast-row.note-open .cast-note-open { display: none; }
.cast-row { padding-bottom: 8px; border-bottom: 1px solid rgba(188,154,113,0.3); }
.cast-row:last-child { border-bottom: 0; }

/* The moments, folded under the cast. The line that opens them is a clear,
   tappable panel rather than a whisper (J, 25 Sep 2026). */
.days { margin-top: 26px; }
.days-open { display: flex; align-items: baseline; gap: 8px; width: 100%; max-width: 560px; text-align: left; cursor: pointer;
  background: #FBF8F2; border: 1px solid #E4D9C8; padding: 14px 18px; font-family: 'EB Garamond', Georgia, serif;
  font-size: 20px; font-weight: 500; color: var(--ink); transition: border-color 0.2s; }
.days-open:hover { border-color: var(--tan); }
.days-plus { color: var(--burgundy); font-weight: 400; }
.days-open i { font-size: 14px; font-weight: 400; color: #8A7A66; margin-left: 4px; }
.days.open .days-open { background: none; border-color: transparent; padding: 0; cursor: default; }
.days.open .days-plus { display: none; }
.days-body { display: none; }
.days.open .days-body { display: block; }
.days-hint { font-size: 16px; font-style: italic; color: var(--brown); line-height: 1.5; margin: 8px 0 0; max-width: 560px; }
@media (max-width: 760px) { .days-open { font-size: 18px; padding: 12px 14px; } }

/* ── Save & finish later, in the questionnaire's top bar ──
   Replaces the bar that sat on every screen. Short labels on a phone so it
   fits beside the way home. */
.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-save { background: none; border: 0; border-bottom: 1px solid var(--tan); padding: 0 0 2px; cursor: pointer;
  font-family: inherit; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--burgundy); }
.nav-save:hover { border-bottom-color: var(--burgundy); }
.nav-save[hidden] { display: none; }
.ns-short { display: none; }
@media (max-width: 600px) {
  .ns-long { display: none; }
  .ns-short { display: inline; }
  .nav-right { gap: 14px; }
  .nav-save, .nav-back { font-size: 11px; letter-spacing: 0.1em; }
}

/* Who they are: the name and the facts share a screen. */
.who-divider { height: 1px; background: rgba(188,154,113,0.35); max-width: 520px; margin: 4px 0 30px; }

/* The palettes appear under the styles once one is picked. */
.palette-block { margin-top: 30px; }
.palette-block[hidden] { display: none; }
.palette-label { display: block; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brown); margin-bottom: 14px; }

/* The one review answer that can be changed in place. */
.rv-inline { width: 100%; background: transparent; border: 0; border-bottom: 1px dotted var(--tan); padding: 2px 0; outline: none; }
.rv-inline:focus { border-bottom: 1px solid var(--burgundy); }

/* Loves and complaints was too busy on a phone (J, 25 Sep 2026): eight word
   chips show; the other five stay in the page, hidden, so a saved draft that
   picked one still shows it. */
.chip-extra:not(.selected) { display: none; }

/* The little things' examples are J's own, and long for one line on a phone. */
.lt-line::placeholder { font-size: 15px; }

/* "Two ways to tell it" on the Before you begin card. */
.ahead-ways { font-family: 'EB Garamond', Georgia, serif; font-size: 16px; line-height: 1.5; color: var(--brown); margin: -8px auto 24px; max-width: 520px; }
.ahead-ways b { font-weight: 500; color: var(--burgundy); }
/* The line under each way to tell it: plain facts, set apart. */
.fork-sub { font-family: 'Inter', system-ui, sans-serif; font-style: normal; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burgundy); }

/* ── Copies to different people (review screen) ── */
.ms { max-width: 520px; margin: 20px 0 28px; font-family: 'EB Garamond', Georgia, serif; color: var(--ink); }
.ms[hidden], .ms-body[hidden], .ms-open[hidden], .ms-sub[hidden], .ms-err[hidden] { display: none; }
.ms-open { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 10px; align-items: baseline; width: 100%;
  padding: 4px 0; font-family: 'EB Garamond', Georgia, serif; font-size: 19px; font-weight: 500; color: var(--ink); }
.ms-open:hover, .ms-open:focus-visible { color: var(--burgundy); }
.ms-plus { color: var(--burgundy); font-weight: 400; }
.ms-sub { font-size: 14px; color: #8A7A66; margin: 2px 0 0 19px; }
.ms-h { font-size: 20px; font-weight: 500; margin: 0 0 4px; }
.ms-p { font-size: 15px; color: var(--brown); line-height: 1.5; margin: 0 0 14px; }
.ms-copy { padding: 14px 0 12px; border-top: 1px solid #E4D9C8; }
.ms-copy:first-child { border-top: 0; padding-top: 0; }
.ms-copy-h { font-size: 17px; font-weight: 500; color: var(--burgundy); margin: 0 0 2px; }
.ms-in { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid rgba(188,154,113,0.8); border-radius: 0;
  padding: 9px 0 5px; font-family: 'EB Garamond', Georgia, serif; font-size: 16px; color: var(--ink); outline: none; }
.ms-in:focus { border-bottom-color: var(--burgundy); }
.ms-in::placeholder { color: #A89A86; font-style: normal; }
.ms-row3 { display: grid; grid-template-columns: 1.4fr 0.55fr 0.85fr; gap: 12px; }
.ms-state { text-transform: uppercase; }
.ms-state::placeholder { text-transform: none; }
.ms-line { color: var(--burgundy); }
.ms-err { font-size: 15px; color: var(--burgundy); margin: 8px 0 0; }
.faq-a strong { color: var(--ink); font-weight: 500; }

/* Pricing table on the FAQ page (J, 1 Oct 2026) */
.price-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.price-table th { text-align: left; font-weight: 500; font-size: 13px; color: var(--brown); padding: 0 12px 10px 0; }
.price-table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--border); vertical-align: top; color: var(--ink); }
.price-table td:first-child { color: var(--brown); width: 40%; }
@media (max-width: 600px) { .price-table { font-size: 15px; } .price-table td:first-child { width: 38%; } }
html.newlook .price-table, html.newlook .price-table th, html.newlook .price-table td { font-family: var(--rh-sans); }
html.newlook .price-table td { border-top-color: var(--rh-rule); }
html.newlook .price-table td:first-child, html.newlook .price-table th { color: var(--rh-stone); }