/* Meridian launch pages — design system v3: Swiss Modernism 2.0
   (ui-ux-pro-max style #50). Rules: Inter/Helvetica only, strict grid,
   mathematical spacing, black/white/#F5F5F5 + ONE red accent (#E30613),
   no gradients, no rounded corners, thin 1px rules, minimal decoration.
   Class names kept from v2 so FE/OTO/JV views work unchanged. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root {
  --sw-black: #0a0a0a;
  --sw-ink: #1a1a1a;
  --sw-mid: #555555;
  --sw-faint: #8a8a8a;
  --sw-line: #e0e0e0;
  --sw-grey: #f5f5f5;
  --sw-white: #ffffff;
  --sw-red: #e30613;
  --sw-red-dk: #c10511;
}

.sl { max-width: 860px; margin: 0 auto; padding: 56px 24px; color: var(--sw-ink);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.sl h1 { font-family: 'Inter', 'Helvetica Neue', sans-serif; font-weight: 800; font-size: clamp(36px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.03em; color: var(--sw-black); }
.sl h1 em { color: var(--sw-red); font-style: normal; }
.sl h2 { font-family: 'Inter', 'Helvetica Neue', sans-serif; font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--sw-black); }
.sl h3 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.sl p { font-size: 16.5px; line-height: 1.65; margin-bottom: 14px; color: #333; }
.sl li { font-size: 16px; line-height: 1.55; margin: 8px 0 8px 20px; }
.sl .small { font-size: 13px; color: var(--sw-faint); font-weight: 400; }
.sl .center, .sl.center { text-align: center; }
.sl a { color: var(--sw-red); }
.sl a.cta { color: #fff; }
.sl a.no-thanks { color: var(--sw-faint); }

/* section kicker — small caps label above every h2 */
.kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sw-red); margin-bottom: 12px; }

/* ---------------------------------------------------------------- bands
   Swiss: white field, grey field, black field. Sections separated by
   1px rules instead of color washes. */
.band { padding: 0; }
.band > .sl { padding-top: 64px; padding-bottom: 64px; }
.band-white { background: var(--sw-white); border-top: 1px solid var(--sw-line); }
.band-cream { background: var(--sw-grey); border-top: 1px solid var(--sw-line); }
.band-brand { background: var(--sw-white); border-top: 4px solid var(--sw-black); }
.band-navy { background: var(--sw-black); color: #eee; }
.band-navy h1, .band-navy h2 { color: #fff; }
.band-navy p, .band-navy .subhead { color: #c9c9c9; }
.band-navy .cta-sub { color: #8a8a8a; }
.band-navy .kicker { color: var(--sw-red); }
/* hero band — white, 12px red rule on top (variant K) */
.band-hero { background: var(--sw-white); border-top: 12px solid var(--sw-red); }

/* hero grid: text left (7 cols), book right (5 cols), top-aligned with H1 */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; text-align: left; }
.hg-a .cta { margin-left: 0; }
.hg-a .cta-sub, .hg-a .wbtn { text-align: left; }
.hg-a .countdown { justify-content: flex-start; }
.figcap { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sw-faint); margin-top: 20px; }

/* hero book mockup — CSS-only 3D + slow float; zero extra assets/JS.
   Outer carries the float, inner carries the tilt (transforms don't clash). */
.heromock { perspective: 1300px; width: min(100%, 360px); margin: 0 auto; animation: heromock-float 7s ease-in-out infinite; }
.heromock-inner { position: relative; transform: rotateY(-17deg) rotateX(1.5deg); transform-style: preserve-3d; transition: transform .5s ease; }
.heromock:hover .heromock-inner { transform: rotateY(-7deg) rotateX(1deg); }
.heromock-inner img { display: block; width: 100%; height: auto; border: 0; border-radius: 2px 5px 5px 2px; box-shadow: 26px 34px 60px rgba(10, 10, 10, .3); }
.heromock-inner::before { /* page block on the fore edge */
  content: ""; position: absolute; top: 1.2%; bottom: 1.2%; right: -20px; width: 20px;
  background: linear-gradient(90deg, #dcdcdc 0%, #f7f7f7 12%, #dcdcdc 24%, #f7f7f7 36%, #dcdcdc 48%, #f7f7f7 60%, #dcdcdc 72%, #f7f7f7 84%, #cfcfcf 100%);
  transform: rotateY(78deg) translateX(10px); transform-origin: left center; border-radius: 0 3px 3px 0; }
.heromock-inner::after { /* thin red spine accent — the one allowed color */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--sw-red); border-radius: 2px 0 0 2px; }
@keyframes heromock-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------------------------------------------------------------- scarcity */
.scarcebar { display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--sw-black); color: #fff; text-align: center; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 8px 14px; position: relative; }
.scarcebar b { color: #fff; font-weight: 800; border-bottom: 2px solid var(--sw-red); }
.scarcebar .scarcemsg { flex: 1; }
.scarcebar .scarcelogin { flex: 0 0 auto; color: #fff; text-decoration: none; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; border: 1px solid rgba(255,255,255,.55); padding: 6px 14px; transition: background .12s ease, border-color .12s ease; }
.scarcebar .scarcelogin:hover { background: var(--sw-red); border-color: var(--sw-red); }
.scarcebar.hidden { display: none; }
@media (max-width: 560px) { .scarcebar { flex-direction: column; gap: 8px; } }

/* ---------------------------------------------------------------- hero */
.eyebrow { display: inline-block; border: 0; background: transparent; border-radius: 0; padding: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sw-red); }
.subhead { font-size: 18px; line-height: 1.6; color: #333; }
.subhead b { color: var(--sw-red); }
.hero-media { max-width: 640px; margin: 24px auto; overflow: hidden; border: 1px solid var(--sw-line); }
.hero-media img, .hero-media iframe { display: block; width: 100%; height: auto; border: 0; }

/* book mockup — flattened: Swiss shows the object plainly */
.book3d { width: 260px; margin: 34px auto 10px; }
.book3d-inner { position: relative; }
.book3d img { display: block; width: 100%; height: auto; border: 1px solid var(--sw-line); box-shadow: none; }

/* ---------------------------------------------------------------- buttons */
.cta { display: block; max-width: 430px; margin: 26px auto 8px; text-align: center; background: var(--sw-red); color: #fff; font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-radius: 0; padding: 18px 32px; box-shadow: none; text-decoration: none; transition: background .12s ease; }
.cta:hover { text-decoration: none; background: var(--sw-red-dk); transform: none; box-shadow: none; }
.cta::after { content: " \2192"; }
.cta-sub { text-align: center; font-size: 12.5px; color: var(--sw-faint); letter-spacing: .02em; }
.wbtn { text-align: center; margin: 22px 0 8px; }
.wbtn img { max-width: 340px; width: 100%; height: auto; }
.hg-a .wbtn img { max-width: 340px; }

/* ---------------------------------------------------------------- founder */
.founder { background: var(--sw-white); border: 1px solid var(--sw-line); border-left: 4px solid var(--sw-black); border-radius: 0; padding: 28px 30px; box-shadow: none; }
.founder .sig { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 800; font-size: 15px; letter-spacing: .02em; margin-top: 12px; color: var(--sw-black); }

/* ---------------------------------------------------------------- pull quote */
.pullquote { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2; letter-spacing: -0.02em; text-align: left; color: var(--sw-black); max-width: 640px; margin: 0 auto; padding: 4px 0 4px 24px; border-left: 6px solid var(--sw-red); }
.pullquote:before, .pullquote:after { content: none; }

/* ---------------------------------------------------------------- compare */
.twocol { display: grid; gap: 16px; grid-template-columns: 1fr; }
.col-bad, .col-good { border-radius: 0; padding: 22px 24px; box-shadow: none; background: var(--sw-white); border: 1px solid var(--sw-line); }
.col-bad { border-top: 4px solid var(--sw-black); }
.col-good { border-top: 4px solid var(--sw-red); }
.col-bad h3 { color: var(--sw-black); }
.col-good h3 { color: var(--sw-red); }
.twocol li { margin-left: 2px; list-style: none; padding-left: 28px; position: relative; font-size: 15px; }
.col-bad li:before { content: "\2717"; position: absolute; left: 0; top: 1px; color: var(--sw-black); font-weight: 800; }
.col-good li:before { content: "\2713"; position: absolute; left: 0; top: 1px; color: var(--sw-red); font-weight: 800; }

/* ---------------------------------------------------------------- bullets */
.fascin li { list-style: none; margin-left: 0; padding-left: 30px; position: relative; margin-bottom: 13px; }
.fascin li:before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 0; background: var(--sw-red); box-shadow: none; }
.band-navy .fascin li:before { box-shadow: none; }

/* ---------------------------------------------------------------- steps */
.steps { display: grid; gap: 16px; grid-template-columns: 1fr; counter-reset: step; }
.step { background: var(--sw-white); border: 1px solid var(--sw-line); border-radius: 0; padding: 22px 22px 22px 84px; position: relative; margin-bottom: 0; box-shadow: none; }
.step:before { counter-increment: step; content: "0" counter(step); position: absolute; left: 22px; top: 16px; width: auto; height: auto; border-radius: 0; background: none; color: var(--sw-red); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; display: block; box-shadow: none; font-family: 'Inter', sans-serif; }
.step:not(:last-child):after { content: none; }

/* ---------------------------------------------------------------- features */
.fgrid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.fcell { background: var(--sw-white); border: 1px solid var(--sw-line); border-top: 1px solid var(--sw-line); border-radius: 0; padding: 20px 22px; box-shadow: none; transition: none; }
.fcell:hover { transform: none; box-shadow: none; border-color: var(--sw-black); }
.fcell b { display: block; margin-bottom: 5px; font-size: 16px; letter-spacing: -0.01em; }
.fcell .fname { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--sw-red); margin-top: 10px; font-weight: 800; }
.fcell .ficon { display: block; width: 30px; height: 30px; margin-bottom: 12px; color: var(--sw-red); }
.fcell .ficon svg { display: block; width: 30px; height: 30px; }

/* ---------------------------------------------------------------- gallery */
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.gallery figure { margin: 0; }
.gallery a { display: block; background: var(--sw-white); border-radius: 0; overflow: hidden; border: 1px solid var(--sw-line); box-shadow: none; transition: border-color .12s ease; transform: none; }
.gallery figure:nth-child(odd) a, .gallery figure:nth-child(even) a { transform: none; }
.gallery a:hover { transform: none; box-shadow: none; border-color: var(--sw-black); }
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sw-faint); padding: 9px 11px; background: var(--sw-white); border-top: 1px solid var(--sw-line); }
.lightbox { position: fixed; inset: 0; background: rgba(10, 10, 10, .94); display: none; align-items: center; justify-content: center; z-index: 60; padding: 20px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; }

/* ------------------------------------------------------- market receipts */
.proofgrid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 24px; }
.proofshot { margin: 0; border: 1px solid var(--sw-line); background: var(--sw-white); }
.proofshot a { display: block; }
.proofshot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--sw-line); }
.proofshot figcaption { padding: 15px 18px 17px; font-size: 13.5px; line-height: 1.55; color: #333; }
.proofshot figcaption b { display: block; color: var(--sw-red); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; margin-bottom: 7px; }
.proofshot figcaption u { text-decoration-color: var(--sw-red); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- tables */
.sl table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--sw-white); border-radius: 0; border: 1px solid var(--sw-line); box-shadow: none; }
.sl th, .sl td { border-bottom: 1px solid var(--sw-line); padding: 13px 14px; text-align: left; vertical-align: top; }
.sl th { background: var(--sw-black); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.sl tr:last-child td { border-bottom: 0; }
.sl tr:nth-child(even) td { background: var(--sw-grey); }
.tablewrap { overflow-x: auto; }

/* ---------------------------------------------------------------- price */
.pricebox { position: relative; background: var(--sw-white); border-radius: 0; padding: 40px 30px 34px; text-align: center; border: 3px solid var(--sw-black); background-image: none; box-shadow: none; }
.pricebox h2 { margin-bottom: 8px; }
.price-old { font-size: 15px; color: var(--sw-faint); text-decoration: line-through; margin-top: 10px; }
.price-now { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 72px; color: var(--sw-black); line-height: 1.02; letter-spacing: -0.04em; }
.guarantee { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; border: 1px solid var(--sw-black); border-radius: 0; padding: 12px 18px; font-size: 13.5px; background: var(--sw-white); text-align: left; }
.seal { flex: 0 0 40px; width: 40px; height: 40px; }

/* ---------------------------------------------------------------- straight / not */
.straight { background: var(--sw-black); color: #d9d9d9; border-radius: 0; padding: 30px 28px; box-shadow: none; background-image: none; }
.straight h2 { color: #fff; }
.straight p, .straight li { color: #c4c4c4; }
.straight li { margin-left: 0; list-style: none; padding-left: 26px; position: relative; }
.straight li:before { content: "\2013"; position: absolute; left: 4px; color: var(--sw-red); font-weight: 800; }
.notbox { border: 1px solid var(--sw-line); border-left: 6px solid var(--sw-red); background: var(--sw-grey); border-radius: 0; padding: 26px 28px; box-shadow: none; }
.notbox h2 { color: var(--sw-black); }

/* ---------------------------------------------------------------- FAQ */
.faq details { background: var(--sw-white); border: 1px solid var(--sw-line); border-radius: 0; margin-bottom: -1px; padding: 0; overflow: hidden; }
.faq details[open] { border-color: var(--sw-black); box-shadow: none; position: relative; z-index: 1; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 15.5px; letter-spacing: -0.01em; padding: 16px 18px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; float: right; color: var(--sw-red); font-weight: 800; font-size: 20px; line-height: 1; }
.faq details[open] summary { background: var(--sw-grey); }
.faq details[open] summary:after { content: "\2212"; }
.faq .fa-body { padding: 14px 18px 18px; font-size: 15px; line-height: 1.6; color: #333; border-top: 1px solid var(--sw-line); }

/* ---------------------------------------------------------------- countdown */
.countdown { display: flex; gap: 8px; justify-content: center; margin: 22px 0 6px; }
.cd-cell { background: var(--sw-white); border: 1px solid var(--sw-black); backdrop-filter: none; color: var(--sw-black); border-radius: 0; min-width: 64px; padding: 10px 6px; text-align: center; }
.cd-cell b { display: block; font-size: 26px; font-weight: 800; font-family: 'Inter', sans-serif; letter-spacing: -0.02em; }
.cd-cell span { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--sw-red); }
.band-white .cd-cell, .band-cream .cd-cell { background: var(--sw-white); border-color: var(--sw-black); }
.band-navy .cd-cell { background: transparent; border-color: #fff; color: #fff; }

/* ---------------------------------------------------------------- PS + footer */
.psblock p { font-size: 16px; background: var(--sw-white); border: 1px solid var(--sw-line); border-left: 4px solid var(--sw-red); border-radius: 0; padding: 16px 20px; box-shadow: none; }
.psblock b { color: var(--sw-black); }
.finefoot { font-size: 11.5px; color: var(--sw-faint); line-height: 1.6; }

/* ---------------------------------------------------------------- OTO */
.oto-topbar { background: var(--sw-red); color: #fff; text-align: center; font-family: 'Inter', 'Helvetica Neue', sans-serif; font-weight: 800; letter-spacing: .1em; padding: 13px 14px; font-size: 13.5px; box-shadow: none; }
.oto { background: var(--sw-white); }
.oto .sl { max-width: 760px; }
.unlock-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.no-thanks { display: block; text-align: center; margin-top: 24px; font-size: 13.5px; color: var(--sw-faint); }
.oto-congrats { background: var(--sw-grey); border: 1px solid var(--sw-line); border-left: 4px solid var(--sw-red); padding: 18px 22px; font-size: 15px; line-height: 1.6; color: #333; }
.oto-congrats b { display: block; color: var(--sw-red); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; margin-bottom: 7px; }
.otoshelf { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 16px; }
.otoshelf figure { margin: 0; border: 1px solid var(--sw-line); background: var(--sw-white); }
.otoshelf img { display: block; width: 100%; height: auto; }
.otoshelf figcaption { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sw-faint); padding: 8px 10px; border-top: 1px solid var(--sw-line); }

/* ---------------------------------------------------------------- JV */
.jv-hero-num { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.15em; color: var(--sw-red); letter-spacing: -0.03em; }
.jv-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 860px; margin: 0 auto; padding: 14px 24px; font-family: 'Inter', 'Helvetica Neue', sans-serif; border-bottom: 1px solid var(--sw-line); }
.jv-topbar a { font-size: 13.5px; font-weight: 600; color: var(--sw-ink); text-decoration: none; }
.jv-topbar a.jv-topcta { background: var(--sw-red); color: #fff; padding: 10px 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }
.jv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.jv-chips span { border: 1px solid var(--sw-black); padding: 7px 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.jv-contest .fcell b { font-size: 17px; }
.recips { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-top: 16px; }
.recips figure { margin: 0; border: 1px solid var(--sw-line); background: var(--sw-white); }
.recips img { display: block; width: 100%; height: auto; }
.vendorcard { background: var(--sw-black); color: #ddd; padding: 36px 28px; text-align: center; }
.vendorcard h2, .vendorcard b { color: #fff; }
.vendorcard p { color: #c4c4c4; }
.vendorcard .kicker { color: var(--sw-red); }
.vendor-ava { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; margin: 6px auto 14px; display: block; }
.vendor-links { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.vendor-links a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--sw-red); align-self: center; padding-bottom: 2px; }
.reviewbox .sig { font-weight: 800; color: var(--sw-black); margin-top: 14px; }
.swipe { background: var(--sw-white); border: 1px solid var(--sw-line); border-radius: 0; padding: 22px 24px; margin-bottom: 16px; box-shadow: none; }
.swipe .subj { font-size: 13px; color: var(--sw-mid); margin-bottom: 10px; }
.swipe pre { white-space: pre-wrap; font-family: inherit; font-size: 15px; line-height: 1.55; background: var(--sw-grey); border-radius: 0; padding: 16px; border: 1px solid var(--sw-line); }
.reviewbox { background: var(--sw-grey); border: 1px solid var(--sw-black); border-radius: 0; padding: 22px 24px; box-shadow: none; }
.reviewbox code { background: var(--sw-white); padding: 3px 9px; border-radius: 0; font-size: 14px; border: 1px solid var(--sw-line); }

@media (min-width: 640px) {
  .otoshelf { grid-template-columns: repeat(4, 1fr); }
  .recips { grid-template-columns: repeat(3, 1fr); }
  .jv-contest { grid-template-columns: repeat(3, 1fr); }
  .twocol { grid-template-columns: 1fr 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .unlock-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: 1fr 1fr 1fr; }
  .step { padding: 70px 22px 22px 22px; }
  .step:before { left: 22px; top: 18px; }
}
@media (min-width: 820px) {
  .hero-grid { grid-template-columns: 7fr 5fr; }
  .hg-b { margin-top: 190px; } /* book top lines up with H1 line 3 */
  .heromock { margin: 0 0 0 auto; }
}

/* ---------------------------------------------------- a11y (ui-ux-pro-max) */
.faq summary { cursor: pointer; }
.cta:focus-visible, .sl a:focus-visible, .faq summary:focus-visible, .no-thanks:focus-visible {
  outline: 3px solid var(--sw-red); outline-offset: 3px; }
.band-navy a:focus-visible, .straight a:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hero-frame { animation: none !important; }
  .hero-frame, .onecol .gallery a, .onecol .wshelf figure { transition: none !important; }
  .onecol .gallery a:hover, .onecol .wshelf figure:hover { transform: none; }
  .cta, .gallery a, .heromock-inner { transition: none !important; }
  .heromock { animation: none !important; }
  .heromock:hover .heromock-inner { transform: rotateY(-17deg) rotateX(1.5deg); }
}

/* World Editions band (FE) — black field, white cards, the red accent kept */
.band-world { background: var(--sw-black); color: #e8e8e8; border-top: 1px solid var(--sw-black); }
.band-world h2 { color: #fff; }
.band-world .subhead, .band-world .wlist { color: #c9c9c9; }
.band-world .kicker { color: var(--sw-red); }
.wchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.wchips span { border: 1px solid #fff; color: #fff; padding: 7px 14px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.wlist { margin-top: 14px; font-size: 13.5px; line-height: 1.6; }
.wshelf { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
.wshelf figure { margin: 0; background: #fff; }
.wshelf a { display: block; }
.wshelf img { display: block; width: 100%; height: auto; }
.wshelf figcaption { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #555; padding: 8px 10px; border-top: 1px solid var(--sw-line); }
.band-world .wgrid { margin-top: 22px; }
.band-world .fcell { color: var(--sw-black); }
.band-world .wnote { color: #9a9a9a; margin-top: 16px; }
@media (min-width: 760px) {
  .wshelf { grid-template-columns: repeat(4, 1fr); }
  .band-world .wgrid { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------- one-column letter (FE page)
   The sales letter reads top to bottom in a single column: the hero banner
   sits above the copy, and every grid collapses to one track at every width.
   Scoped to .onecol so the JV and OTO pages keep their two-up layouts. */
/* Hero banner in a printed-mat frame: white border, hairline, soft shadow and
   the brand rule on top. It lifts once on load; hover only deepens the shadow
   (the image is not a link, so nothing should move under the cursor). */
.hero-frame {
  position: relative; margin: 26px 0 30px; padding: 10px;
  background: var(--sw-white); border: 1px solid var(--sw-line);
  box-shadow: 0 18px 46px rgba(10, 10, 10, .14);
  animation: heroRise .7s cubic-bezier(.2, .7, .3, 1) both;
  transition: box-shadow .25s ease;
}
.hero-frame::before {
  content: ''; position: absolute; top: -1px; left: -1px; right: -1px;
  height: 4px; background: var(--sw-red);
}
.hero-frame:hover { box-shadow: 0 24px 60px rgba(10, 10, 10, .22); }
.hero-banner { display: block; width: 100%; height: auto; }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.onecol .hero-grid,
.onecol .fgrid,
.onecol .gallery,
.onecol .proofgrid,
.onecol .wshelf,
.onecol .band-world .wgrid,
.onecol .otoshelf,
.onecol .unlock-grid { grid-template-columns: 1fr; }
/* Page renders are 588px wide originals - never draw them larger than that,
   or they go soft on a retina screen. The World Editions shelf keeps two
   columns (two rows of two) so each page lands near 300px: about 600 device
   pixels, which is the file's own resolution. */
.onecol .gallery,
.onecol .wshelf { grid-template-columns: 1fr 1fr; max-width: 660px; margin-left: auto; margin-right: auto; }
.onecol .gallery figure, .onecol .wshelf figure { max-width: none; width: 100%; }
/* The full-wrap cover is landscape - it gets the whole row. */
.onecol .gallery figure.wide { grid-column: 1 / -1; }
/* On a phone two columns would put each page at ~160px - unreadable. */
@media (max-width: 560px) {
  .onecol .gallery,
  .onecol .wshelf { grid-template-columns: 1fr; max-width: 420px; }
}
/* Same framing as the hero: a real page lying on the band, not a flat crop. */
.onecol .gallery a, .onecol .wshelf figure {
  box-shadow: 0 14px 34px rgba(10, 10, 10, .16); transition: box-shadow .25s ease, transform .25s ease;
}
/* On the black band the page needs an edge, or it bleeds into the field. */
.onecol .band-world .wshelf figure { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 18px 44px rgba(0, 0, 0, .6); }
.onecol .gallery a:hover, .onecol .wshelf figure:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(10, 10, 10, .24); }
.onecol .band-world .wshelf figure:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 26px 58px rgba(0, 0, 0, .75); }
.onecol .step { padding: 70px 22px 22px 22px; }
.onecol .step:before { left: 22px; top: 18px; }

/* Hero opener, centred and set larger than body copy — it is the one
   paragraph every visitor reads before deciding to keep scrolling. */
.hero-center { text-align: center; }
.hero-center .hero-lead {
  max-width: 34em; margin: 20px auto 0;
  font-size: clamp(18px, 2.1vw, 22px); line-height: 1.5; color: var(--sw-ink);
}
.hero-center .hero-lead b { color: var(--sw-red); }
.hero-center .hero-banner { margin-top: 34px; }
.hero-center .hero-badges {
  max-width: 40em; margin: 16px auto 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sw-faint); line-height: 1.9;
}

/* Sample-pack box, mid-letter CTAs and the beginner step row (FE page) */
.samplebox {
  max-width: 40em; margin: 26px auto 0; padding: 22px 24px;
  background: var(--sw-grey); border: 1px solid var(--sw-black); border-left: 6px solid var(--sw-red);
  text-align: left;
}
.samplebox b { display: block; font-size: 17px; margin-bottom: 8px; }
.samplebox p { font-size: 15px; line-height: 1.55; margin-bottom: 10px; }
.cta-ghost, .sl a.cta.cta-ghost { background: var(--sw-white); color: var(--sw-black); border: 2px solid var(--sw-black); font-size: 15px; padding: 14px 24px; margin: 4px 0 0; max-width: none; }
.cta-ghost:hover, .sl a.cta.cta-ghost:hover { background: var(--sw-black); color: #fff; }
.ctamid { margin: 36px 0 8px; padding-top: 10px; border-top: 1px solid var(--sw-line); }
.cta-note { margin-top: 4px; color: var(--sw-mid); }
.firstten .step b { color: var(--sw-black); }

/* ------------------------------------------------- reviewer quotes (15b) */
.quotes { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 720px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.qcard { background: var(--sw-white); border: 1px solid var(--sw-line);
  border-left: 4px solid var(--sw-red); padding: 20px 22px; margin: 0; }
.qcard blockquote { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55;
  color: var(--sw-black); }
.qcard blockquote:before { content: "\201C"; }
.qcard blockquote:after { content: "\201D"; }
.qcard figcaption { font-family: 'Inter', sans-serif; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--sw-faint); }
.ctamid-dark { border-top-color: rgba(255, 255, 255, .25); }
.ctamid-dark .cta-sub, .ctamid-dark .cta-note { color: #b9b9b9; }

/* The old-way/Meridian-way block stays side by side inside the one-column
   letter - reading the two lists against each other IS the point. It only
   stacks on a phone, where 2 x 190px would be unreadable. */
.onecol .twocol { grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 620px) { .onecol .twocol { grid-template-columns: 1fr; } }

/* The nine templates read as a shelf: 3 rows of 3. */
.onecol .fgrid.three-up { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.onecol .fgrid.three-up .fcell { padding: 18px 16px; }
.onecol .fgrid.three-up .fcell b { font-size: 15px; }
.onecol .fgrid.three-up .fcell { font-size: 13.5px; line-height: 1.5; }
.onecol .fgrid.three-up .fname { font-size: 10px; letter-spacing: .06em; }
@media (max-width: 760px) { .onecol .fgrid.three-up { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .onecol .fgrid.three-up { grid-template-columns: 1fr; } }

/* The three workflow steps read left to right, like the steps themselves.
   The number already sits above the text inside .onecol, so a narrow column
   suits it. Two-up, then stacked, as the screen narrows. */
.onecol .steps { grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .onecol .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .onecol .steps { grid-template-columns: 1fr; } }