/* Kintsugi design system, lifted verbatim from the Win Together page so the
   two pages are genuinely the same design rather than two drifting copies.
   Source of truth stays pages/preview/wintogether/index.html for now. */

/* ── Palette sampled from the physical cover ────────────────────────────── */
:root{
  --ink:#0b1720;          /* page ground, a shade under the cover */
  --cover:#152c3c;        /* the cover navy itself */
  --panel:#1b374c;        /* raised surfaces */
  --edge:#2a5068;         /* borders */
  --gold:#e0a44a;         /* actions */
  --gold-hi:#f2bb63;
  --seam:#e8cf9a;         /* the kintsugi hairline */
  --teal:#2ecad4;         /* from the heart, used sparingly */
  --rose:#e5899b;         /* from the heart, used more sparingly still */
  --fg:#f4f7f8;
  --soft:rgba(244,247,248,.78);
  --mute:rgba(244,247,248,.55);
  --display:'Fraunces',Georgia,serif;
  --body:'Montserrat',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--body);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;margin:0}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.015em}
h3{font-size:1.28rem;letter-spacing:-.005em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.06rem,1.9vw,1.24rem);color:var(--soft);max-width:60ch}

/* ── The signature: a gold seam that breaks and mends, like the cover ───── */
.seam{position:relative;height:1px;background:linear-gradient(90deg,
      transparent, var(--seam) 8%, var(--seam) 42%, transparent 46%,
      transparent 54%, var(--seam) 58%, var(--seam) 92%, transparent);
      opacity:.5;margin:0}
.seam.mended{background:linear-gradient(90deg,transparent,var(--seam) 12%,var(--seam) 88%,transparent);opacity:.62}
.eyebrow{font-family:var(--body);font-size:.71rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--seam);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--seam);opacity:.32;max-width:120px}

section{padding:clamp(64px,9vw,116px) 0}
.tight{padding:clamp(44px,6vw,76px) 0}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{background:
   radial-gradient(120% 90% at 78% 8%, rgba(46,202,212,.10), transparent 58%),
   radial-gradient(90% 70% at 12% 92%, rgba(229,137,155,.09), transparent 62%),
   var(--cover);
   border-bottom:1px solid rgba(232,207,154,.22);padding-top:clamp(56px,8vw,92px)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,68px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1 em{font-style:normal;color:var(--seam)}
.hero .lede{margin-top:22px}
.hero-obj{position:relative}
.hero-obj img{border-radius:6px;box-shadow:0 34px 70px rgba(0,0,0,.55),0 0 0 1px rgba(232,207,154,.16)}


.yours{margin:26px 0 0;text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--seam)}
.saves{margin:6px 0 0;text-align:center;font-size:.9rem;color:var(--mute)}


.cta-row{margin-top:38px;text-align:center}
.cta-row p{margin:12px 0 0;font-size:.84rem;color:var(--mute)}
.proof-fig{margin:34px auto 0;max-width:720px}
.proof-fig img{width:100%;border-radius:10px;box-shadow:0 22px 50px rgba(0,0,0,.45);
  border:1px solid rgba(232,207,154,.12)}
.proof-fig figcaption{margin-top:12px;text-align:center;font-size:.82rem;color:var(--mute)}
.eo-single{margin:38px 0 0}
.eo-single img{width:100%;border-radius:10px;box-shadow:0 22px 50px rgba(0,0,0,.45);
  border:1px solid rgba(232,207,154,.12)}
.eo-single figcaption{margin-top:12px;text-align:center;font-size:.82rem;color:var(--mute)}
.hero-obj{margin:0}
.hero-obj figcaption{margin-top:14px;text-align:center;font-size:.82rem;color:var(--mute);
  line-height:1.5;letter-spacing:.01em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.price-tag{font-family:var(--display);font-size:1.6rem;color:var(--seam)}
.price-tag span{font-family:var(--body);font-size:.82rem;color:var(--mute);letter-spacing:.04em}

.btn{display:inline-block;background:var(--gold);color:#141414;font-family:var(--body);
  font-weight:800;font-size:.94rem;letter-spacing:.03em;padding:17px 30px;border-radius:8px;
  text-decoration:none;border:0;cursor:pointer;transition:background .18s,transform .18s}
.btn:hover{background:var(--gold-hi);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--edge)}
.btn-ghost:hover{background:rgba(255,255,255,.05);border-color:var(--seam)}

/* ── Recognition list ───────────────────────────────────────────────────── */
.recog{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;
  background:rgba(232,207,154,.16);border:1px solid rgba(232,207,154,.16);border-radius:10px;overflow:hidden}
.recog div{background:var(--cover);padding:26px 24px;font-size:.98rem;color:var(--soft)}
.recog div b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--fg);
  font-weight:600;margin-bottom:7px}


/* ── The single reader ──────────────────────────────────────────────────── */
.single-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);align-items:center}
@media(max-width:880px){.single-grid{grid-template-columns:1fr}}
.single p{color:var(--soft)}
.single strong{color:var(--fg);font-weight:600}
.single-fig{margin:0}
.single-fig img{border-radius:8px;box-shadow:0 24px 54px rgba(0,0,0,.5),0 0 0 1px rgba(232,207,154,.14)}
.single-fig figcaption{color:var(--mute);font-size:.82rem;margin-top:12px;text-align:center}

/* ── Inside the book ────────────────────────────────────────────────────── */
.inside{background:var(--cover)}
.spread{border-radius:8px;box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 1px rgba(232,207,154,.16);margin-top:34px}
.spread-note{color:var(--mute);font-size:.86rem;margin-top:14px;text-align:center}

/* ── Layers ─────────────────────────────────────────────────────────────── */
.layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;margin-top:44px}
.layer{border-top:2px solid var(--seam);padding-top:22px}
.layer .n{font-family:var(--display);font-size:.86rem;color:var(--seam);letter-spacing:.06em;margin-bottom:10px}
.layer h3{margin-bottom:10px}
.layer p{color:var(--soft);font-size:.97rem;margin:0}

/* ── Testimonials ───────────────────────────────────────────────────────── */
.quotes{background:var(--cover)}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:40px}
@media(max-width:820px){.qgrid{grid-template-columns:1fr}}
.q{break-inside:avoid;background:var(--panel);border-left:2px solid var(--seam);
   padding:26px 26px 22px;border-radius:0 8px 8px 0;margin:0 0 26px}
.q p{font-family:var(--display);font-size:1.06rem;line-height:1.5;color:var(--fg);margin:0 0 14px}
.q cite{font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--seam)}
.q.lead p{font-size:1.24rem}

/* ── What you get ───────────────────────────────────────────────────────── */
.got{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:40px}
.got li{list-style:none;background:var(--cover);border:1px solid var(--edge);border-radius:10px;
  padding:24px 22px}
.got li b{display:block;font-family:var(--display);font-size:1.08rem;margin-bottom:8px;font-weight:600}
.got li span{color:var(--soft);font-size:.94rem}
.got li.soon{opacity:.62}
.got li.soon::before{content:"Coming soon";display:inline-block;font-family:var(--body);
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(232,207,154,.16);color:var(--seam);padding:4px 9px;border-radius:99px;margin-bottom:12px}

/* ── Offer ──────────────────────────────────────────────────────────────── */
.offer{background:
  linear-gradient(180deg,var(--cover),var(--panel));
  border-top:1px solid rgba(232,207,154,.3);border-bottom:1px solid rgba(232,207,154,.3);text-align:center}
.offer .big{font-family:var(--display);font-size:clamp(3.2rem,9vw,5.4rem);color:var(--seam);
  line-height:1;margin:4px 0 0}
.offer .ship{color:var(--mute);font-size:.9rem;margin-bottom:30px}
.offer .guarantee{color:var(--mute);font-size:.85rem;margin-top:20px}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
details{border-bottom:1px solid var(--edge);padding:20px 0}
summary{cursor:pointer;font-family:var(--display);font-size:1.1rem;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--seam);font-family:var(--body);font-size:1.3rem;line-height:1;flex:0 0 auto}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;color:var(--soft);font-size:.98rem;max-width:72ch}

.narrow{max-width:820px}
.on-cover{background:var(--cover)}
.eyebrow.mid{justify-content:center}
.eyebrow.mid::after{display:none}
.guar{color:var(--mute);font-size:.83rem;margin-top:14px}
.ticks{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:18px}
/* No grid here. A grid container turns every bare text node into its own grid
   item, so "<b>Lead.</b> trailing text" became two items and the trailing text
   wrapped into the 22px marker column, one word per line. */
.ticks li{position:relative;padding-left:34px;color:var(--soft);font-size:1rem;display:block}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--seam);font-weight:700}
.ticks b{color:var(--fg);font-weight:600}
.fg-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,56px);align-items:center}
@media(max-width:880px){.fg-grid{grid-template-columns:1fr}}
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:42px}
.item{background:var(--cover);border:1px solid var(--edge);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.item .ph{background:var(--panel);aspect-ratio:16/10;overflow:hidden}
.item .ph img{width:100%;height:100%;object-fit:contain;padding:14px}
.item .bd{padding:22px 22px 24px;flex:1}
.item .kind{font-size:.63rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--seam);display:block;margin-bottom:8px}
.item h3{margin-bottom:8px}
.item p{color:var(--soft);font-size:.93rem;margin:0}
.item.soon .bd::after{content:"Coming soon, included free when it lands";display:block;margin-top:14px;
  font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--seam);opacity:.9}
.item.soon .ph{opacity:.85}
.layer .n{font-family:var(--display);font-size:2rem;color:var(--seam);line-height:1;margin-bottom:12px;opacity:.75}
.stakes{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:rgba(232,207,154,.18);
  border:1px solid rgba(232,207,154,.18);border-radius:12px;overflow:hidden;margin-top:38px}
@media(max-width:760px){.stakes{grid-template-columns:1fr}}
.stakes>div{background:var(--cover);padding:28px 30px}
.stakes .from b{display:block;color:var(--rose);font-family:var(--display);font-size:1.02rem;margin-bottom:6px;font-weight:600}
.stakes .to b{display:block;color:var(--seam);font-family:var(--display);font-size:1.02rem;margin-bottom:6px;font-weight:600}
.stakes p{color:var(--soft);font-size:.94rem;margin:0}
.stakes .hd{background:var(--panel);padding:15px 24px;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--mute)}
.cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,54px);align-items:center}
@media(max-width:880px){.cred-grid{grid-template-columns:1fr}}
.cred-grid img{border-radius:10px;box-shadow:0 24px 54px rgba(0,0,0,.5)}
.cred p{color:var(--soft)}
.stat{display:flex;gap:34px;flex-wrap:wrap;margin-top:26px;padding-top:24px;border-top:1px solid var(--edge)}
.stat div b{display:block;font-family:var(--display);font-size:1.9rem;color:var(--seam);line-height:1}
.stat div span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.stack{max-width:600px;margin:34px auto 0;text-align:left}
.stack .row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;
  border-bottom:1px solid var(--edge);font-size:.94rem;color:var(--soft)}
.stack .row span{color:var(--mute);white-space:nowrap}
.stack .row.soon span::after{content:" \00b7 soon";color:var(--seam);font-size:.8em}
.stack .tot{display:flex;justify-content:space-between;padding:15px 0 0;font-weight:700;color:var(--fg)}
.stack .tot span{color:var(--seam)}
.closer{text-align:center;background:var(--cover);border-top:1px solid rgba(232,207,154,.24)}
.closer h2 em{font-style:normal;color:var(--seam);display:block}


.layer img{border-radius:8px;margin-bottom:18px;box-shadow:0 14px 34px rgba(0,0,0,.42);
  border:1px solid rgba(232,207,154,.14)}
.toc{counter-reset:m;list-style:none;padding:0;margin:26px 0 0;
  columns:2;column-gap:30px;font-size:.9rem}
@media(max-width:640px){.toc{columns:1}}
.toc li{counter-increment:m;break-inside:avoid;padding:7px 0 7px 32px;position:relative;
  color:var(--soft);border-bottom:1px solid rgba(255,255,255,.06)}
.toc li::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:7px;
  font-family:var(--display);color:var(--seam);font-size:.82rem;opacity:.8}
.stakes .hd.to{color:var(--seam)}
.stakes .hd{grid-column:auto}
@media(max-width:760px){.stakes .hd{grid-column:1/-1}}
.nudge{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:center;
  max-width:720px;margin:38px auto 0;text-align:left;background:rgba(11,23,32,.5);
  border:1px solid var(--edge);border-radius:12px;padding:24px}
@media(max-width:620px){.nudge{grid-template-columns:1fr;text-align:center}}
.nudge img{border-radius:8px;width:100%}
.nudge p{color:var(--soft);font-size:.94rem;margin:0 0 10px}


.cstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media(max-width:760px){.cstrip{grid-template-columns:1fr}}
.cstrip figure{margin:0}
.cstrip img{border-radius:10px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  box-shadow:0 18px 42px rgba(0,0,0,.46);border:1px solid rgba(232,207,154,.12)}


.bp-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px;margin-top:34px;align-items:start}
@media(max-width:900px){.bp-grid{grid-template-columns:1fr}}
.bookproof .q{background:rgba(232,207,154,.07);border-left:2px solid var(--seam)}


.mini{margin:26px auto 0;max-width:420px}
.mini img{border-radius:8px;border:1px solid rgba(232,207,154,.16);opacity:.92}


.object-band{padding:clamp(34px,5vw,60px) 0;background:var(--cover);
  border-bottom:1px solid rgba(232,207,154,.14)}
.ob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.ob-grid{grid-template-columns:1fr}}
.ob-grid figure{margin:0}
.ob-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;
  box-shadow:0 20px 46px rgba(0,0,0,.48);border:1px solid rgba(232,207,154,.12)}
.ob-grid figcaption{margin-top:11px;text-align:center;font-size:.8rem;
  letter-spacing:.04em;color:var(--mute)}


.object-band figure img{width:100%;border-radius:12px;box-shadow:0 26px 60px rgba(0,0,0,.5);
  border:1px solid rgba(232,207,154,.14)}
.object-band figcaption{margin-top:14px;text-align:center;font-size:.86rem;color:var(--mute)}
.pairband{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
@media(max-width:760px){.pairband{grid-template-columns:1fr}}
.pairband figure{margin:0}
.pairband img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;
  box-shadow:0 18px 42px rgba(0,0,0,.45);border:1px solid rgba(232,207,154,.12)}
.pairband figcaption{margin-top:10px;font-size:.79rem;color:var(--mute);text-align:center}
.cstrip.two{grid-template-columns:1fr 1fr;max-width:820px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.cstrip.two{grid-template-columns:1fr}}
.cstrip figcaption{margin-top:11px;text-align:center;font-size:.79rem;color:var(--mute)}
.stakes .pic{padding:0}
.stakes .pic img{width:100%;height:auto;display:block}
.big-cta{font-size:1.02rem;padding:19px 36px}

:focus-visible{outline:2px solid var(--seam);outline-offset:3px}