/* Copy follows src/lib/funnels/sales-scripts.ts.

   The library mockups only ever designed the hero of an offer page. The copy
   sections under it are laid out HERE as a sales page, one composition per
   beat, so the page has rhythm instead of a stack of identical boxes:

     pain        big title, then the points as the design's own notes (Confetti: taped sticky notes)
     gain        ONE full-width band in the offer's colour, numbered points like the home page
     story       centred, like a letter
     offer, faq  open two columns on the page: title left, content right
     inside      numbered rows, like the home page offer list
     ctaBand     one large centred line
     the ask     the design's closing band (closeWithAsk in template-content.ts)

   Blueprint and Harbor keep their own light/dark section panels. */

/* ── Base: open sections on the page ───────────────────────────────────── */
html[data-suite]:not([data-suite=blueprint]):not([data-suite=harbor]) .screen .script-section:not(.closing):not([data-script-beat=gain]) { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
html[data-suite] .screen .script-section { padding-top: clamp(72px, 9vw, 128px) !important; padding-bottom: 0 !important; }
html[data-suite] .screen .script-section[data-script-beat] .script-copy { max-width: none; width: 100%; padding: 0; background: none; border: 0; box-shadow: none; transform: none; }
html[data-suite] .screen .script-section:has(+ .closing), html[data-suite] .screen .script-section:last-of-type:not(.closing) { padding-bottom: clamp(72px, 9vw, 128px) !important; }

.script-section h2 { font-family: var(--display); font-size: clamp(38px, 4.8vw, 68px); line-height: 1.04; font-weight: 400; letter-spacing: -.02em; margin: 0 0 30px; max-width: 16ch; text-wrap: balance; }
html[data-suite=rally] .script-section h2 { font-weight: 800; }
.script-section h2::before { content: var(--script-kicker, none); display: block; width: fit-content; margin: 0 0 20px; font: 700 12px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
html[data-suite=confetti] .script-section h2::before { border: 2px dashed var(--accent); padding: 8px 14px; transform: rotate(-3deg); }
html[data-suite=rally] .script-section h2::before { background: var(--ink); color: var(--paper); padding: 7px 12px; }
html[data-suite=blueprint] .script-section h2::before { font-family: var(--mono, var(--body)); font-weight: 400; border: 1px solid currentColor; padding: 5px 10px; color: inherit; }
.script-section :is(.script-copy, .script-body) > p { max-width: 640px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; margin: 18px 0 0; }
.script-section :is(.script-copy, .script-body) > :first-child { margin-top: 0; }
.script-section :is(.script-copy, .script-body) > :is(.cta, .btn, .booking-button) { margin-top: 28px; }

[data-script-beat=pain] { --script-kicker: "Sound familiar?"; }
[data-script-beat=gain] { --script-kicker: "What changes"; }
[data-script-beat=story] { --script-kicker: "A note from me"; }
[data-script-beat=offer] { --script-kicker: "What you get"; }
[data-script-beat=inside] { --script-kicker: "What\2019s inside"; }
[data-script-beat=curriculum] { --script-kicker: "Step by step"; }
[data-script-beat=faq] { --script-kicker: "Good to know"; }
[data-script-beat=checkout] { --script-kicker: "Your investment"; }
[data-script-beat=delivery] { --script-kicker: "Your download"; }
[data-script-beat=upsell] { --script-kicker: "Your next step"; }
[data-script-beat=ctaBand] { --script-kicker: none; }

/* Lists: default marker is a small accent dot; ticks where it is what they get */
.script-list { list-style: none; padding: 0; margin: 0; counter-reset: pt; }
.script-list li { counter-increment: pt; position: relative; line-height: 1.55; font-size: clamp(17px, 1.3vw, 19px); }
.script-section :is(.script-copy, .script-body) > p + .script-list { margin-top: 22px; }

/* ── Two-column beats: offer, faq, checkout, delivery, upsell ──────────── */
@media (min-width: 900px) {
  html[data-suite] .screen .script-section:is([data-script-beat=offer],[data-script-beat=faq],[data-script-beat=checkout],[data-script-beat=delivery],[data-script-beat=upsell],[data-script-beat=gain]):not(.closing) .script-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 7vw, 120px); align-items: start; }
  html[data-suite] .screen .script-section[data-script-beat] .script-copy > h2 { grid-column: 1; grid-row: 1; }
  html[data-suite] .screen .script-section[data-script-beat] .script-copy > .motion-rule { grid-column: 1; grid-row: 2; align-self: start; }
  html[data-suite] .screen .script-section[data-script-beat] .script-copy > .script-body { grid-column: 2; grid-row: 1 / span 2; padding-top: 6px; }
}
:is([data-script-beat=offer],[data-script-beat=delivery],[data-script-beat=upsell],[data-script-beat=checkout]) .script-list li { padding: 14px 0 14px 38px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
:is([data-script-beat=offer],[data-script-beat=delivery],[data-script-beat=upsell],[data-script-beat=checkout]) .script-list li:first-child { border-top: 0; }
:is([data-script-beat=offer],[data-script-beat=delivery],[data-script-beat=upsell],[data-script-beat=checkout]) .script-list li::before { content: "\2713"; position: absolute; left: 0; top: 13px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 13px/1 var(--body); }

/* Questions */
.script-section details { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding: 20px 0; }
.script-section details:last-of-type { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.script-section summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-weight: 700; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.4; }
.script-section summary::-webkit-details-marker { display: none; }
.script-section summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 400; font-size: 18px; line-height: 1; }
.script-section details[open] summary::after { content: "\2212"; }
.script-section details p { max-width: 620px; line-height: 1.7; margin: 12px 0 0; }

/* ── pain: the title, then the points as the design's notes ────────────── */
[data-script-beat=pain] .script-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); margin-top: 8px; }
[data-script-beat=pain] .script-list li { padding: 22px 0 0; border-top: 2px solid var(--ink); font-family: var(--display); font-size: clamp(21px, 1.8vw, 27px); line-height: 1.25; }
[data-script-beat=pain] .script-list li::before { content: counter(pt, decimal-leading-zero); display: block; margin-bottom: 14px; font: 700 12px/1 var(--body); letter-spacing: .14em; color: var(--accent); }
[data-script-beat=pain] .script-body > p:last-child { margin-top: clamp(28px, 3vw, 44px); font-family: var(--display); font-size: clamp(22px, 2vw, 30px); color: var(--accent); }
/* Confetti: taped sticky notes, like the hero */
html[data-suite=confetti] [data-script-beat=pain] .script-list { gap: clamp(22px, 3vw, 44px); padding: 14px 8px 10px; }
html[data-suite=confetti] [data-script-beat=pain] .script-list li { position: relative; padding: 38px 28px 32px; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 5px 7px 0 var(--ink); background: var(--offer-surface, var(--soft)); text-align: center; }
html[data-suite=confetti] [data-script-beat=pain] .script-list li:nth-child(1) { transform: rotate(-2.2deg); }
html[data-suite=confetti] [data-script-beat=pain] .script-list li:nth-child(2) { transform: rotate(1.6deg) translateY(14px); background: var(--paper); }
html[data-suite=confetti] [data-script-beat=pain] .script-list li:nth-child(3) { transform: rotate(-1deg); }
html[data-suite=confetti] [data-script-beat=pain] .script-list li::before { color: var(--ink); opacity: .55; }
html[data-suite=confetti] [data-script-beat=pain] .script-list li::after { content: ""; position: absolute; left: 50%; top: -13px; width: 84px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: color-mix(in srgb, var(--accent) 22%, transparent); }
html[data-suite=confetti] [data-script-beat=pain] .script-body > p:last-child { transform: rotate(-2deg); margin-top: clamp(40px, 4vw, 60px); }

/* ── gain: ONE band in the offer's colour, numbered points ─────────────── */
html[data-suite]:not([data-suite=blueprint]):not([data-suite=harbor]) .screen .script-section[data-script-beat=gain] { background: var(--offer-surface, var(--soft)) !important; margin-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px) !important; }
html[data-suite=confetti] .screen .script-section[data-script-beat=gain] { border-radius: 60px 60px 0 0 !important; }
html[data-suite=honey] .screen .script-section[data-script-beat=gain] { border-radius: 38px 38px 0 0 !important; }
html[data-suite=grove] .screen .script-section[data-script-beat=gain] { border-radius: 120px 120px 0 0 !important; }
[data-script-beat=gain] .script-list li { padding: 18px 0 18px 64px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: clamp(18px, 1.4vw, 21px); }
[data-script-beat=gain] .script-list li:first-child { border-top: 0; }
[data-script-beat=gain] .script-list li::before { content: counter(pt, decimal-leading-zero); position: absolute; left: 0; top: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); font: 400 16px/1 var(--display); }
html[data-suite=confetti] [data-script-beat=gain] .script-list li:nth-child(2)::before { transform: rotate(-12deg); }
html:is([data-suite=rally],[data-suite=atelier]) [data-script-beat=gain] .script-list li::before { border-radius: 0; }

/* ── story: centred, like a letter ─────────────────────────────────────── */
html[data-suite] .screen [data-script-beat=story] :is(.script-copy, h2), html[data-suite] .screen [data-script-beat=ctaBand]:not(.closing) :is(.script-copy, h2, .script-body > p) { text-align: center; }
[data-script-beat=story] h2 { margin-inline: auto; max-width: 20ch; }
[data-script-beat=story] h2::before { margin-inline: auto; }
[data-script-beat=story] .script-body { max-width: 700px; margin: 0 auto; }
[data-script-beat=story] .script-body > p { margin-inline: auto; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.65; }
html[data-suite=confetti] [data-script-beat=story] .script-body { position: relative; padding: clamp(34px, 4vw, 52px); background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 8px 0 var(--ink); transform: rotate(-1deg); }
html[data-suite=confetti] [data-script-beat=story] .script-body::before { content: ""; position: absolute; left: 50%; top: -14px; width: 110px; height: 26px; transform: translateX(-50%) rotate(2deg); background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── inside / curriculum: numbered rows, like the home page offer list ─── */
:is([data-script-beat=inside],[data-script-beat=curriculum]) .script-list { margin-top: 8px; }
:is([data-script-beat=inside],[data-script-beat=curriculum]) .script-list li { display: grid; grid-template-columns: 64px 1fr; align-items: center; padding: 22px 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-family: var(--display); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; }
:is([data-script-beat=inside],[data-script-beat=curriculum]) .script-list li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
:is([data-script-beat=inside],[data-script-beat=curriculum]) .script-list li::before { content: counter(pt, decimal-leading-zero); width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); font: 400 16px/1 var(--display); }
html:is([data-suite=rally],[data-suite=atelier],[data-suite=blueprint]) :is([data-script-beat=inside],[data-script-beat=curriculum]) .script-list li::before { border-radius: 0; }

/* ── ctaBand: one large centred line ───────────────────────────────────── */
[data-script-beat=ctaBand]:not(.closing) h2 { margin-inline: auto; max-width: 18ch; font-size: clamp(40px, 5.4vw, 76px); }
[data-script-beat=ctaBand]:not(.closing) .script-body > p { margin-inline: auto; }
html[data-suite=confetti] [data-script-beat=ctaBand]:not(.closing) h2::before { content: "\2733"; border: 0; padding: 0; transform: none; margin: 0 auto 18px; font: 400 34px/1 var(--display); letter-spacing: 0; color: var(--accent); }

/* ── The ask ends the page on the design's own closing band ────────────── */
html[data-suite] .screen .script-section.closing { padding-top: clamp(64px, 7vw, 96px) !important; padding-bottom: clamp(64px, 7vw, 96px) !important; background: var(--ink) !important; color: var(--paper); display: block; }
html[data-suite=confetti] .screen .script-section.closing { border-radius: 0 0 60px 0 !important; }
html[data-suite=grove] .screen .script-section.closing { background: var(--accent) !important; color: var(--on-accent); }
html[data-suite=muse] .screen .script-section.closing { background: var(--accent) !important; }
html:is([data-suite=petal],[data-suite=cove],[data-suite=honey]) .screen .script-section.closing { background: var(--soft) !important; color: var(--ink); }
html[data-suite=blueprint] .screen .script-section.closing { background: var(--signal) !important; color: var(--slate); }
html[data-suite] .screen .script-section.closing[data-script-beat] .script-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
html[data-suite] .screen .script-section.closing .script-copy > h2 { flex: 1 1 420px; max-width: 720px; margin: 0; font-size: clamp(34px, 4.2vw, 60px); }
html[data-suite] .screen .script-section.closing h2::before, html[data-suite] .screen .script-section.closing .motion-rule { display: none; }
html[data-suite] .screen .script-section.closing .script-body { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
html[data-suite] .screen .script-section.closing .script-body > :is(.cta, .btn, .booking-button) { margin: 0; }
html[data-suite] .screen .script-section.closing .script-body > p { margin: 0; opacity: .8; font-size: 15px; max-width: 320px; }
html[data-suite=grove] .screen .script-section.closing .cta { background: var(--paper); color: var(--ink); }
html:is([data-suite=muse],[data-suite=atelier]) .screen .script-section.closing .cta { color: var(--paper); border-color: var(--paper); }

.script-illustrated { display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center; }
.script-illustrated .ph { min-width:0; }
html:is([data-suite=blueprint],[data-suite=harbor]) .script-section .btn-solid { background:var(--ink);color:var(--paper); }
html[data-suite=blueprint] .script-section .btn-solid { background:var(--slate);color:var(--on-dark); }

@media (max-width: 899px) {
  [data-script-beat=pain] .script-list { grid-template-columns: 1fr; }
  html[data-suite=confetti] [data-script-beat=pain] .script-list li:nth-child(2) { transform: rotate(1.4deg); }
  .script-section a { max-width: 100%; white-space: normal; }
  .script-illustrated { grid-template-columns: 1fr; }
}

/* Offer colours are shared by the homepage and the matching journey. */
html[data-suite=confetti] {
  --offer-free:#e2d4ee;
  --offer-low:#f3c6ac;
  --offer-high:#e1e7aa;
}
html[data-suite=confetti][data-palette=alternate] {
  --offer-free:#d7e5eb;
  --offer-low:#f1dec4;
  --offer-high:#d1dfa1;
}
html[data-suite=confetti][data-custom-palette=true] {
  --offer-free:color-mix(in oklch,var(--paper) 72%,var(--soft));
  --offer-low:color-mix(in oklch,var(--paper) 35%,var(--soft));
  --offer-high:var(--soft);
}
html[data-suite=confetti] #main>.section { background:var(--paper); }
html[data-suite=confetti] #main .offer-list { display:grid;gap:18px; }
html[data-suite=confetti] #main .offer { padding:32px 28px;border:1px solid var(--line);border-radius:14px; }
html[data-suite=confetti] #main .offer:nth-child(1) { background:var(--offer-free); }
html[data-suite=confetti] #main .offer:nth-child(2) { background:var(--offer-low); }
html[data-suite=confetti] #main .offer:nth-child(3) { background:var(--offer-high); }
html[data-suite=confetti] :is(#free,#freeok) { --offer-surface:var(--offer-free); }
html[data-suite=confetti] :is(#paid,#paidok) { --offer-surface:var(--offer-low); }
html[data-suite=confetti] :is(#high,#highok) { --offer-surface:var(--offer-high); }
html[data-suite=confetti] :is(#free,#paid,#high) .capture { background:var(--offer-surface); }
html[data-suite=confetti] :is(#freeok,#paidok,#highok) .success { background:var(--offer-surface); }
html[data-suite=confetti] :is(#waitlist,#waitlistok) { --offer-surface:var(--offer-low); }
html[data-suite=confetti] :is(#session,#sessionpay,#sessionbook,#sessionok,#call,#callbook,#callok) { --offer-surface:var(--offer-high); }
html[data-suite=confetti] #waitlist .capture, html[data-suite=confetti] #waitlistok .success { background:var(--offer-surface); }
@media(max-width:760px) { html[data-suite=confetti] #main .offer { padding:25px 20px; } }