/* =====================================================
   QUAD CLUSTER PAGES — shared styles for variants/durations/locations/packages/support
   loaded after brand.css, main.css, quad.css
   v=1
   ===================================================== */

body[data-page="quad-variant"], body[data-page="quad-duration"], body[data-page="quad-location"], body[data-page="quad-package"], body[data-page="quad-support"] { background: var(--q-paper, #FBF7F0); color: var(--q-ink, #0E0C0A); font-family: var(--q-body, 'Inter Tight', sans-serif); }

body[data-page^="quad-"] { overflow-x: hidden; max-width: 100%; }
body[data-page^="quad-"] *, body[data-page^="quad-"] *::before, body[data-page^="quad-"] *::after { box-sizing: border-box; }
body[data-page^="quad-"] img, body[data-page^="quad-"] svg { max-width: 100%; height: auto; }
body[data-page^="quad-"] .wrap { max-width: 1200px; margin: 0 auto; padding: 0 22px; width: 100%; }
@media (max-width: 540px) { body[data-page^="quad-"] .wrap { padding: 0 18px; } }

/* ============== VARIANT HERO ============== */
.qv-hero {
  position: relative;
  background: linear-gradient(180deg, #060d12 0%, #0a1418 50%, #0c1a22 100%);
  color: #FFF1E8;
  padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 4vw, 60px);
  overflow: hidden;
  border-bottom: 1px solid rgba(247,243,236,.08);
}
.qv-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.qv-hero-glow { position: absolute; width: 480px; height: 480px; top: -140px; right: -100px; border-radius: 50%; filter: blur(60px); opacity: .5; background: radial-gradient(circle, var(--tier-color, #E8652B) 0%, transparent 70%); }
.qv-hero-inner { position: relative; z-index: 2; }

.qv-bc { font-family: var(--q-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(247,243,236,.55); margin-bottom: 22px; }
.qv-bc a { color: var(--q-gold); text-decoration: none; }
.qv-bc span { color: rgba(247,243,236,.3); margin: 0 8px; }
.qv-bc span[aria-current] { color: rgba(247,243,236,.85); margin-left: 0; }

.qv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(22px, 4vw, 56px); align-items: center; }
@media (max-width: 880px) { .qv-hero-grid { grid-template-columns: 1fr; gap: 28px; } }

.qv-hero-photo { min-width: 0; }
.qv-photo-frame { position: relative; aspect-ratio: 4/3; width: 100%; max-width: 540px; margin: 0; background: #2a1208; border: 1px solid rgba(247,243,236,.18); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(232,101,43,.12); }
@media (max-width: 880px) { .qv-photo-frame { max-width: 100%; margin: 0 auto; aspect-ratio: 16/10; } }
.qv-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qv-photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,24,.4) 0%, transparent 35%); pointer-events: none; }
.qv-tier-pill { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--tier-color, var(--q-orange)); color: #FFF; font-family: var(--q-mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; padding: 6px 11px; border-radius: 4px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }

.qv-hero-text { min-width: 0; }
.qv-h1 { font-family: var(--q-display); font-weight: 400; font-size: clamp(32px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -.03em; margin: 12px 0 14px; color: #FFF1E8; word-break: normal; overflow-wrap: break-word; hyphens: auto; }
.qv-sub { font-size: clamp(14px, 1.4vw, 17px); line-height: 1.55; color: rgba(247,243,236,.82); margin: 0 0 18px; max-width: 600px; overflow-wrap: break-word; }

.qv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.qv-chip { display: inline-block; font-family: var(--q-mono); font-size: 10.5px; letter-spacing: .1em; padding: 5px 10px; border-radius: 3px; background: rgba(247,243,236,.08); color: var(--q-gold); border: 1px solid rgba(212,168,67,.3); white-space: nowrap; }

.qv-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(247,243,236,.1); margin-bottom: 22px; border-radius: 6px; overflow: hidden; }
@media (max-width: 540px) { .qv-quick { grid-template-columns: 1fr 1fr; } }
.qv-q-cell { background: rgba(10,20,24,.7); padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qv-q-l { font-family: var(--q-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: rgba(247,243,236,.55); }
.qv-q-v { font-family: var(--q-display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; color: var(--q-gold); line-height: 1.1; overflow-wrap: anywhere; }

.qv-from { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 14px 18px; background: rgba(247,243,236,.06); border-left: 3px solid var(--tier-color, var(--q-orange)); border-radius: 4px; margin-bottom: 20px; }
.qv-from-l { font-family: var(--q-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--q-gold); font-weight: 600; }
.qv-from-amt { font-family: var(--q-display); font-weight: 500; font-size: 32px; letter-spacing: -.02em; color: #FFF1E8; line-height: 1; }
.qv-from-cur { font-size: 13px; font-family: var(--q-mono); color: var(--q-orange); margin-right: 4px; letter-spacing: .05em; font-weight: 600; }
.qv-from-meta { color: rgba(247,243,236,.7); font-size: 12.5px; }

.qv-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.qv-ctas-center { justify-content: center; }
.qv-ctas .qbtn { flex: 0 1 auto; min-width: 160px; }
@media (max-width: 540px) { .qv-ctas { flex-direction: column; align-items: stretch; } .qv-ctas .qbtn { width: 100%; min-width: 0; } }

/* ============== SECTIONS ============== */
.qv-sec { padding: clamp(40px, 6vw, 80px) 0; border-bottom: 1px solid var(--q-line, rgba(14,12,10,.09)); }
.qv-sec:nth-of-type(odd) { background: var(--q-paper); }
.qv-sec:nth-of-type(even) { background: var(--q-cream, #F7F3EC); }
.qv-narrow { max-width: 880px; margin: 0 auto; padding: 0 22px; }
.qv-head { text-align: center; margin-bottom: 32px; }
.qv-h2 { font-family: var(--q-display); font-weight: 400; font-size: clamp(24px, 3.6vw, 42px); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 12px; color: var(--q-ink); overflow-wrap: break-word; hyphens: auto; }
.qv-lead { font-size: 14.5px; line-height: 1.55; color: var(--q-ink-soft); margin: 0; max-width: 640px; margin: 0 auto; overflow-wrap: break-word; }
.qv-prose p { font-size: 16px; line-height: 1.7; color: var(--q-ink); margin: 0 0 16px; overflow-wrap: break-word; }
.qv-prose p:last-child { margin-bottom: 0; }
.qv-prose a { color: var(--q-orange); text-decoration: none; border-bottom: 1px dashed rgba(232,101,43,.4); }

/* ============== BEST FOR ============== */
.qv-bestfor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .qv-bestfor-grid { grid-template-columns: 1fr; } }
.qv-bf-card { background: #FFF; border: 1px solid var(--q-line); border-left: 3px solid var(--q-orange); border-radius: 8px; padding: 22px 24px; }
.qv-bf-card-alt { border-left-color: var(--q-teal); }
.qv-bf-h { margin: 0 0 10px; font-family: var(--q-display); font-weight: 500; font-size: 19px; color: var(--q-ink); }
.qv-bf-p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--q-ink-soft); overflow-wrap: break-word; }

/* ============== PRICING ============== */
.qv-dur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; }
.qv-dur { background: #FFF; border: 1px solid var(--q-line); border-radius: 10px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; transition: transform .18s, border-color .18s, box-shadow .18s; }
.qv-dur:hover { transform: translateY(-3px); border-color: rgba(232,101,43,.4); box-shadow: 0 18px 40px -22px rgba(20,18,16,.22); }
.qv-dur.is-min { border-color: var(--q-orange); background: linear-gradient(180deg, #FFF, #FFF8F0); }
.qv-dur-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.qv-dur-time { font-family: var(--q-display); font-weight: 500; font-size: 22px; letter-spacing: -.015em; color: var(--q-ink); }
.qv-dur-tag { font-family: var(--q-mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; background: var(--q-orange); color: #FFF; font-weight: 700; }
.qv-dur-price { font-family: var(--q-display); font-weight: 500; font-size: 36px; letter-spacing: -.02em; color: var(--q-ink); line-height: 1; margin-top: 4px; }
.qv-cur { font-size: 14px; font-family: var(--q-mono); color: var(--q-orange); margin-right: 4px; letter-spacing: .05em; font-weight: 600; }
.qv-dur-meta { font-size: 12px; color: var(--q-ink-soft); margin-bottom: 10px; }
.qv-dur .qbtn { width: 100%; padding: 11px 14px; font-size: 11.5px; }

/* ============== SPECS ============== */
.qv-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1px; background: var(--q-line-strong, rgba(14,12,10,.16)); border-radius: 10px; overflow: hidden; border: 1px solid var(--q-line); }
.qv-spec { background: #FFF; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qv-sl { font-family: var(--q-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--q-orange); font-weight: 600; }
.qv-sv { font-size: 14px; color: var(--q-ink); overflow-wrap: anywhere; line-height: 1.4; }

/* ============== INCLUDED LIST ============== */
.qv-incl-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.qv-incl-list li { font-size: 13.5px; color: var(--q-ink); padding: 10px 14px 10px 36px; background: #FFF; border: 1px solid var(--q-line); border-radius: 6px; position: relative; overflow-wrap: break-word; }
.qv-incl-list li::before { content: "✓"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: var(--q-teal); color: #FFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }

/* ============== SAFETY ============== */
.qv-safety { background: #FFF; border: 1px solid var(--q-line); border-left: 3px solid var(--q-orange); border-radius: 8px; padding: 22px 24px; }
.qv-safety-ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.qv-safety-ul li { font-size: 13.5px; line-height: 1.55; color: var(--q-ink); padding-left: 26px; position: relative; overflow-wrap: break-word; }
.qv-safety-ul li::before { content: "!"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; background: var(--q-orange-soft, #FFE6D5); color: var(--q-orange-deep); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* ============== COMPARE / RELATED ============== */
.qv-rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.qv-rel { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: #FFF; border: 1px solid var(--q-line); border-radius: 8px; text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; min-width: 0; }
.qv-rel:hover { transform: translateY(-2px); border-color: rgba(232,101,43,.4); box-shadow: 0 12px 24px -16px rgba(20,18,16,.2); }
.qv-rel-h { font-family: var(--q-display); font-weight: 500; font-size: 17px; letter-spacing: -.01em; color: var(--q-ink); overflow-wrap: break-word; }
.qv-rel-p { font-size: 12.5px; color: var(--q-ink-soft); line-height: 1.5; overflow-wrap: break-word; }
.qv-rel-arrow { font-family: var(--q-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--q-orange); font-weight: 600; margin-top: 4px; }
.qv-rel-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ============== FINAL CTA ============== */
.qv-final { position: relative; background: var(--q-night, #0a1418); color: #FFF1E8; padding: clamp(56px, 7vw, 96px) 0; text-align: center; overflow: hidden; }
.qv-final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; pointer-events: none; }
.qv-final-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,24,.7) 0%, rgba(10,20,24,.9) 100%), radial-gradient(ellipse 60% 50% at 50% 100%, rgba(232,101,43,.3), transparent 70%); pointer-events: none; }
.qv-final-inner { position: relative; z-index: 1; }
.qv-final-h { font-family: var(--q-display); font-weight: 400; font-size: clamp(28px, 5vw, 56px); letter-spacing: -.025em; line-height: 1.05; margin: 8px 0 14px; color: #FFF1E8; overflow-wrap: break-word; }
.qv-final-p { color: rgba(247,243,236,.78); max-width: 580px; margin: 0 auto 24px; font-size: 14.5px; line-height: 1.55; }

/* ============== mobile fine-tune ============== */
@media (max-width: 540px) {
  .qv-h1 { font-size: clamp(28px, 9vw, 40px); }
  .qv-h2 { font-size: clamp(22px, 7vw, 30px); line-height: 1.15; }
  .qv-final-h { font-size: clamp(26px, 8vw, 40px); }
  .qv-from-amt { font-size: 28px; }
  .qv-dur-price { font-size: 30px; }
}

/* ============== DURATION HERO ============== */
.qd-hero { position: relative; background: linear-gradient(180deg, #060d12 0%, #0a1418 50%, #0c1a22 100%); color: #FFF1E8; padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); overflow: hidden; }
.qd-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.qd-hero-glow { position: absolute; width: 480px; height: 480px; top: -140px; right: -100px; border-radius: 50%; filter: blur(60px); opacity: .55; background: radial-gradient(circle, rgba(232,101,43,.7), transparent 70%); }
.qd-hero-inner { position: relative; z-index: 2; }
.qd-h1 { font-family: var(--q-display); font-weight: 400; font-size: clamp(40px, 7vw, 96px); line-height: 1.0; letter-spacing: -.04em; margin: 14px 0 18px; color: #FFF1E8; word-break: normal; overflow-wrap: break-word; hyphens: auto; }
.qd-period { color: var(--q-orange); }
.qd-sub { font-size: clamp(14px, 1.4vw, 17px); line-height: 1.55; color: rgba(247,243,236,.82); margin: 0 0 26px; max-width: 600px; overflow-wrap: break-word; }
.qd-time-circle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 132px; height: 132px; border-radius: 50%; border: 2px solid var(--q-orange); background: rgba(232,101,43,.08); margin: 0 0 22px; box-shadow: 0 0 0 6px rgba(232,101,43,.06); }
.qd-time-num { font-family: var(--q-display); font-weight: 500; font-size: 56px; letter-spacing: -.04em; color: var(--q-gold); line-height: 1; }
.qd-time-l { font-family: var(--q-mono); font-size: 11px; letter-spacing: .25em; color: var(--q-orange); font-weight: 700; margin-top: 4px; }
@media (max-width: 540px) { .qd-time-circle { width: 110px; height: 110px; } .qd-time-num { font-size: 44px; } }

.qd-hero .qv-from { background: rgba(247,243,236,.08); border-left-color: var(--q-orange); }

/* ============== LOCATION HERO ============== */
.ql-hero { position: relative; color: #FFF1E8; padding: clamp(56px, 8vw, 120px) 0 clamp(48px, 6vw, 80px); overflow: hidden; min-height: 480px; display: flex; align-items: center; }
.ql-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ql-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,20,24,.75) 0%, rgba(10,20,24,.6) 50%, rgba(10,20,24,.85) 100%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(232,101,43,.3), transparent 70%); pointer-events: none; }
.ql-hero-inner { position: relative; z-index: 2; width: 100%; }
.ql-h1 { font-family: var(--q-display); font-weight: 400; font-size: clamp(36px, 7vw, 88px); line-height: 1.02; letter-spacing: -.04em; margin: 14px 0 16px; color: #FFF1E8; word-break: normal; }
.ql-h1 .qaccent { color: var(--q-gold); font-style: italic; font-weight: 500; }
.ql-sub { font-size: clamp(14px, 1.4vw, 17px); line-height: 1.55; color: rgba(247,243,236,.85); margin: 0 0 26px; max-width: 620px; overflow-wrap: break-word; }
.ql-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: rgba(247,243,236,.12); margin-bottom: 24px; border-radius: 6px; overflow: hidden; max-width: 760px; }
.ql-f { background: rgba(10,20,24,.7); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; backdrop-filter: blur(6px); }
.ql-f-l { font-family: var(--q-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: rgba(247,243,236,.55); }
.ql-f-v { font-size: 13px; color: var(--q-gold); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }

/* ============== MINI VEHICLE CARD (for duration + location pages) ============== */
.qm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; }
.qm-card { background: #FFF; border: 1px solid var(--q-line); border-radius: 8px; padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 8px; transition: transform .18s, border-color .18s, box-shadow .18s; min-width: 0; }
.qm-card:hover { transform: translateY(-2px); border-color: rgba(232,101,43,.4); box-shadow: 0 14px 28px -18px rgba(20,18,16,.22); }
.qm-tier { font-family: var(--q-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--q-orange); font-weight: 600; }
.qm-name { margin: 0; font-family: var(--q-display); font-weight: 500; font-size: 18px; letter-spacing: -.015em; color: var(--q-ink); overflow-wrap: break-word; }
.qm-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--q-ink-soft); font-family: var(--q-mono); letter-spacing: .04em; }
.qm-meta b { color: var(--q-ink); font-weight: 600; }
.qm-price { font-family: var(--q-display); font-weight: 500; font-size: 24px; letter-spacing: -.02em; color: var(--q-ink); margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--q-line); }
.qm-cur { font-size: 12px; font-family: var(--q-mono); color: var(--q-orange); margin-right: 3px; letter-spacing: .05em; font-weight: 600; }
.qm-d { font-size: 11px; color: var(--q-ink-soft); margin-left: 4px; font-family: var(--q-body); font-weight: 400; }
.qm-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.qm-ctas .qbtn { width: 100%; padding: 9px 10px; font-size: 11px; }
.qm-link { font-family: var(--q-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--q-orange); font-weight: 600; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--q-line); }

/* qcncl-link helper */
.qcncl-link { display: block; text-align: center; margin-top: 16px; font-family: var(--q-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--q-orange); text-decoration: none; font-weight: 600; }

/* ============== PACKAGE HERO ============== */
.qpk-hero { position: relative; background: linear-gradient(180deg, #060d12 0%, #0a1418 50%, #0c1a22 100%); color: #FFF1E8; padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 4vw, 60px); overflow: hidden; }
.qpk-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.qpk-hero-glow { position: absolute; width: 480px; height: 480px; top: -140px; right: -100px; border-radius: 50%; filter: blur(60px); opacity: .5; background: radial-gradient(circle, rgba(232,101,43,.7), transparent 70%); }
.qpk-hero-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; text-align: center; }
.qpk-h1 { font-family: var(--q-display); font-weight: 400; font-size: clamp(34px, 6vw, 76px); line-height: 1.05; letter-spacing: -.04em; margin: 14px 0 16px; color: #FFF1E8; word-break: normal; overflow-wrap: break-word; hyphens: auto; }
.qpk-period { color: var(--q-orange); }
.qpk-sub { font-size: clamp(14px, 1.4vw, 17px); line-height: 1.55; color: rgba(247,243,236,.82); margin: 0 0 24px; max-width: 600px; margin: 0 auto 24px; overflow-wrap: break-word; }
.qpk-hero .qv-from { background: rgba(247,243,236,.08); border-left-color: var(--q-orange); margin: 0 auto 22px; }
.qpk-hero .qv-ctas { justify-content: center; }

/* ============== SUPPORT HERO (pricing/faq/vs/beginners) ============== */
.qsup-hero { position: relative; background: linear-gradient(180deg, #060d12 0%, #0a1418 50%, #0c1a22 100%); color: #FFF1E8; padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 4vw, 60px); overflow: hidden; }
.qsup-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.qsup-hero-glow { position: absolute; width: 480px; height: 480px; top: -140px; right: -100px; border-radius: 50%; filter: blur(60px); opacity: .55; background: radial-gradient(circle, rgba(232,101,43,.7), transparent 70%); }
.qsup-hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.qsup-h1 { font-family: var(--q-display); font-weight: 400; font-size: clamp(34px, 6vw, 76px); line-height: 1.05; letter-spacing: -.04em; margin: 14px 0 16px; color: #FFF1E8; word-break: normal; overflow-wrap: break-word; hyphens: auto; }
.qsup-sub { font-size: clamp(14px, 1.4vw, 17px); line-height: 1.55; color: rgba(247,243,236,.82); margin: 0 0 24px; max-width: 640px; overflow-wrap: break-word; }

/* ============== PRICING HUB TABLE ============== */
.qph-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 1100px; margin: 0 auto; border-radius: 10px; border: 1px solid var(--q-line); }
.qph-table { width: 100%; min-width: 640px; border-collapse: collapse; background: #FFF; }
.qph-table thead { background: linear-gradient(180deg, var(--q-teal-deep), var(--q-teal-deep)); color: #FFF1E8; }
.qph-table th { padding: 14px 16px; text-align: left; font-family: var(--q-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; }
.qph-table td { padding: 14px 16px; border-top: 1px solid var(--q-line); color: var(--q-ink); vertical-align: top; font-size: 13.5px; }
.qph-table tbody tr:nth-child(even) td { background: var(--q-cream); }
.qph-name { font-family: var(--q-display); font-weight: 500; font-size: 16px; color: var(--q-ink); text-decoration: none; }
.qph-name:hover { color: var(--q-orange); }
.qph-tier { font-family: var(--q-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--q-ink-soft); margin-top: 2px; }
.qph-num { font-family: var(--q-display); font-weight: 500; color: var(--q-ink); white-space: nowrap; }
.qph-age { font-family: var(--q-mono); font-size: 11px; letter-spacing: .1em; color: var(--q-ink-soft); white-space: nowrap; }
.qph-note { max-width: 880px; margin: 18px auto 0; padding: 0 4px; font-size: 13px; color: var(--q-ink-soft); text-align: center; line-height: 1.55; }

/* ============== FAQ CHIPS + CATEGORIES ============== */
.qfaq-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.qfaq-chip { display: inline-block; font-family: var(--q-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-radius: 4px; background: rgba(247,243,236,.08); color: var(--q-gold); border: 1px solid rgba(212,168,67,.3); text-decoration: none; transition: background .15s, color .15s; }
.qfaq-chip:hover { background: rgba(232,101,43,.18); color: #FFF1E8; }
.qfaq-cat { margin-bottom: 36px; scroll-margin-top: 100px; }
.qfaq-cat-h { margin: 0 0 16px; font-family: var(--q-display); font-weight: 500; font-size: 24px; letter-spacing: -.015em; color: var(--q-ink); padding-bottom: 8px; border-bottom: 2px solid var(--q-orange); display: inline-block; }

/* ============== VS DECISION TABLE ============== */
.qvs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 1100px; margin: 0 auto; border-radius: 10px; border: 1px solid var(--q-line); }
.qvs-table { width: 100%; min-width: 720px; border-collapse: collapse; background: #FFF; font-size: 13.5px; }
.qvs-table thead { background: var(--q-teal-deep); color: #FFF1E8; }
.qvs-table th { padding: 14px 18px; text-align: left; font-family: var(--q-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; }
.qvs-quad-h { color: var(--q-orange); }
.qvs-buggy-h { color: var(--q-gold); }
.qvs-table td { padding: 14px 18px; border-top: 1px solid var(--q-line); color: var(--q-ink); vertical-align: top; line-height: 1.5; }
.qvs-table tbody tr:nth-child(even) td { background: var(--q-cream); }
.qvs-mh { font-family: var(--q-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--q-ink-soft); font-weight: 600; min-width: 140px; }
.qvs-mq { color: var(--q-orange-deep); font-weight: 500; }
.qvs-mb { color: var(--q-teal); font-weight: 500; }

/* ============== BEGINNERS STEPS ============== */
.qbeg-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.qbeg-step { background: #FFF; border: 1px solid var(--q-line); border-left: 3px solid var(--q-orange); border-radius: 8px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.qbeg-step-n { font-family: var(--q-mono); font-size: 13px; font-weight: 700; letter-spacing: .15em; color: var(--q-orange); }
.qbeg-step h3 { margin: 0; font-family: var(--q-display); font-weight: 500; font-size: 19px; color: var(--q-ink); }
.qbeg-step p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--q-ink-soft); }
.qbeg-step-link { margin-top: auto; padding-top: 8px; font-family: var(--q-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--q-orange); text-decoration: none; font-weight: 600; }
.qbeg-list { display: flex; flex-direction: column; gap: 8px; }
.qbeg-li { padding: 12px 16px; background: #FFF; border: 1px solid var(--q-line); border-radius: 6px; font-size: 14px; line-height: 1.55; color: var(--q-ink); }
.qbeg-li b { color: var(--q-orange); font-weight: 700; margin-right: 8px; font-family: var(--q-mono); }

/* ============== mobile fine-tune ============== */
@media (max-width: 540px) {
  .qsup-h1 { font-size: clamp(28px, 8vw, 44px); }
  .qfaq-cat-h { font-size: 20px; }
}

/* fix dark-on-dark button visibility on hero sections */
.qv-hero .qbtn-line, .qd-hero .qbtn-line, .qpk-hero .qbtn-line, .qsup-hero .qbtn-line { color: #FFF1E8; border-color: rgba(247,243,236,.55); background: rgba(247,243,236,.04); }
.qv-hero .qbtn-line:hover, .qd-hero .qbtn-line:hover, .qpk-hero .qbtn-line:hover, .qsup-hero .qbtn-line:hover { background: rgba(247,243,236,.14); border-color: #FFF1E8; }

/* ============== MOBILE STACKED PRICING TABLE ============== */
@media (max-width: 640px) {
  .qph-table-wrap { overflow: visible; border: none; }
  .qph-table { display: block; width: 100%; min-width: 0; }
  .qph-table thead { display: none; }
  .qph-table tbody { display: block; }
  .qph-table tr { display: block; background: #FFF; border: 1px solid var(--q-line); border-radius: 10px; padding: 14px 16px 12px; margin-bottom: 12px; }
  .qph-table tr:nth-child(even) { background: #FFF; }
  .qph-table td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--q-line); font-size: 13.5px; }
  .qph-table td:first-child { display: block; padding: 0 0 10px; border-top: none; border-bottom: 2px solid var(--q-orange); margin-bottom: 6px; }
  .qph-table td:nth-child(2)::before { content: "30 min"; font-family: var(--q-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--q-ink-soft); font-weight: 600; }
  .qph-table td:nth-child(3)::before { content: "1 hour"; font-family: var(--q-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--q-ink-soft); font-weight: 600; }
  .qph-table td:nth-child(4)::before { content: "2 hours"; font-family: var(--q-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--q-ink-soft); font-weight: 600; }
  .qph-table td:nth-child(5)::before { content: "Age"; font-family: var(--q-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--q-ink-soft); font-weight: 600; }
  .qph-name { font-size: 17px; }
  .qph-num { font-size: 16px; }
}

/* ============== MOBILE STACKED VS TABLE ============== */
@media (max-width: 640px) {
  .qvs-table-wrap { overflow: visible; border: none; }
  .qvs-table { display: block; width: 100%; min-width: 0; font-size: 13.5px; }
  .qvs-table thead { display: none; }
  .qvs-table tbody { display: block; }
  .qvs-table tr { display: block; background: #FFF; border: 1px solid var(--q-line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
  .qvs-table tr:nth-child(even) { background: #FFF; }
  .qvs-table td { display: block; padding: 6px 0; border: none; }
  .qvs-table .qvs-mh { font-family: var(--q-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--q-ink-soft); padding-bottom: 8px; border-bottom: 2px solid var(--q-orange); margin-bottom: 6px; }
  .qvs-table .qvs-mq { padding: 8px 0 8px 0; position: relative; padding-left: 60px; color: var(--q-orange-deep); }
  .qvs-table .qvs-mq::before { content: "QUAD"; position: absolute; left: 0; top: 8px; font-family: var(--q-mono); font-size: 9px; letter-spacing: .15em; color: var(--q-orange); font-weight: 700; padding: 2px 6px; background: var(--q-orange-soft); border-radius: 3px; }
  .qvs-table .qvs-mb { padding: 8px 0 8px 60px; position: relative; color: var(--q-teal); border-top: 1px solid var(--q-line); }
  .qvs-table .qvs-mb::before { content: "BUGGY"; position: absolute; left: 0; top: 8px; font-family: var(--q-mono); font-size: 9px; letter-spacing: .15em; color: var(--q-teal); font-weight: 700; padding: 2px 6px; background: rgba(13,79,92,.1); border-radius: 3px; }
}

/* ============== HARD OVERFLOW GUARD on cluster pages ============== */
body[data-page^="quad-"] header, body[data-page^="quad-"] nav, body[data-page^="quad-"] .header-cta, body[data-page^="quad-"] .nav-toggle { max-width: 100vw; }

/* ============== H1 readability — bump weight for SOFT-axis Fraunces ============== */
.qv-h1, .qd-h1, .qpk-h1, .qsup-h1, .ql-h1 { font-weight: 500 !important; font-variation-settings: "SOFT" 50, "opsz" 144; }
@media (max-width: 540px) {
  .qv-h1, .qd-h1, .qpk-h1, .qsup-h1, .ql-h1 { font-weight: 500 !important; }
}