/* Complete Edition pages, confessional-story style (built 2026-11-05).
   A long letter in a white card with a dark border, laid over one of the site's own backgrounds.
   Every colour maps onto the Dream Life Tracks tokens in /dlt-kit/css/dlt-base.css; the only font is Montserrat.
   Devices: giant quoted headlines, red accent words, teal hand-drawn underlines, brushstroke bands,
   gold highlighter marks, red ribbons, numbered tags, alternating technique cards, a sticky note,
   a polaroid, tinted speech bubbles, gold buy pills and a desktop-only exit pop. */
:root {
  --csp-ink: var(--dlt-navy-deep, #112a4f);   /* giant headlines */
  --csp-body: #33363b;                         /* body copy */
  --csp-hot: var(--dlt-red, #ce0e0e);          /* accent words, sub-headlines */
  --csp-hot-dark: var(--dlt-red-dark, #b21a1a);/* ribbons, numbered tags */
  --csp-dark: var(--dlt-navy-deep, #112a4f);   /* dark technique cards */
  --csp-light: var(--dlt-sky, #eff4fb);        /* light cards, the three-things panel */
  --csp-gold: var(--dlt-gold-soft, #fcd16e);   /* highlighter, sticky note */
  --csp-gold-ink: #ffd75e;                     /* accent words inside dark cards */
  --csp-teal: var(--dlt-teal, #167a7f);        /* hand-drawn underlines, ticks */
  --csp-brush: #1d2128;                        /* brushstroke bands */
  --csp-bubble-1: #e6f0fa;
  --csp-bubble-2: #dff3f1;
  --csp-bubble-3: #fbf1d8;
}

body.csp { font-size: 18px; line-height: 1.65; color: var(--csp-body); background: var(--dlt-navy-deep) center top / cover fixed no-repeat; }
body.csp .csp-bg { position: fixed; inset: 0; z-index: -1; background: inherit; }

/* Header over the site background */
.csp-head { color: #fff; padding: 22px 20px 30px; text-align: center; background: linear-gradient(rgba(17,42,79,.55), rgba(17,42,79,.25)); }
.csp-head-in { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.csp-head .csp-logo img { display: block; height: 40px; width: auto; }
.csp-mark { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.csp-word { font-style: italic; font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.csp-word small { display: block; font-style: normal; font-weight: 500; font-size: 16px; letter-spacing: .02em; opacity: .92; margin-top: 4px; }
.csp-rule { width: 2px; align-self: stretch; min-height: 54px; background: rgba(255,255,255,.55); }
.csp-tag { font-weight: 600; font-size: 18px; text-align: left; max-width: 300px; line-height: 1.35; }
.csp-tag u { text-decoration-color: var(--csp-hot); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* The letter card */
.csp-letter { max-width: 880px; margin: 0 auto 48px; background: #fff; border: 4px solid var(--csp-ink); border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 56px 56px 40px; overflow: hidden; }
.csp-letter p { margin: 0 0 1.05em; }
.csp-letter b, .csp-letter strong { color: #1f2329; }
.csp-letter a { color: var(--dlt-teal); }
.csp-letter section { margin: 0 0 28px; }
.csp-letter section::after { content: ''; display: table; clear: both; }

.csp-h1 { font-size: 54px; line-height: 1.12; font-weight: 800; color: var(--csp-ink); text-align: center; margin: 0 0 18px; letter-spacing: -.015em; }
.csp-big { font-size: 44px; line-height: 1.15; font-weight: 800; color: var(--csp-ink); text-align: center; margin: 40px 0 22px; letter-spacing: -.01em; }
.csp-sub { font-size: 28px; line-height: 1.3; font-weight: 600; color: var(--csp-ink); text-align: center; margin: 0 0 34px; }
.csp-h2 { font-size: 32px; line-height: 1.25; font-weight: 800; color: var(--csp-hot); text-align: center; margin: 34px 0 18px; }
.csp-h3 { font-size: 26px; line-height: 1.3; font-weight: 800; color: var(--csp-ink); margin: 26px 0 12px; }
.hot { color: var(--csp-hot); font-weight: 700; }
.csp-letter b.hot, .csp-letter strong.hot { color: var(--csp-hot); }
.ul { text-decoration: underline wavy var(--csp-teal); text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
.csp-center { text-align: center; }
.csp-lead { font-size: 21px; }

/* Brushstroke band */
.csp-brush { background: var(--csp-brush); color: #fff; font-weight: 800; font-size: 28px; line-height: 1.3; text-align: center; padding: 26px 34px; margin: 30px -10px; transform: rotate(-1.2deg);
  clip-path: polygon(0 8%, 4% 0, 18% 6%, 33% 1%, 52% 7%, 70% 0, 86% 6%, 100% 2%, 99% 40%, 100% 92%, 88% 100%, 70% 93%, 50% 100%, 31% 94%, 14% 100%, 2% 95%, 1% 55%); }
.csp-brush.r { transform: rotate(1deg); }
.csp-brush em { font-style: normal; color: var(--csp-gold-ink); }

/* Highlighter mark */
.csp-hl { display: block; width: fit-content; max-width: 100%; margin: 26px auto; position: relative; font-weight: 700; font-style: italic; font-size: 24px; line-height: 1.35; color: #1f2329; padding: 6px 16px; z-index: 0; text-align: center; }
.csp-hl::before { content: ''; position: absolute; inset: 2px -6px; background: var(--csp-gold); transform: rotate(-1.4deg) skewX(-6deg); border-radius: 3px 14px 4px 12px; z-index: -1; }
.csp-hl.arrow { padding-left: 64px; }
.csp-hl.arrow::after { content: ''; position: absolute; left: 4px; top: 50%; width: 46px; height: 3px; background: #1f2329; transform: translateY(-50%) rotate(-8deg); box-shadow: 34px -6px 0 -1px transparent; }
mark.csp-mk { background: linear-gradient(transparent 12%, var(--csp-gold) 12%, var(--csp-gold) 88%, transparent 88%); padding: 0 .2em; }

/* Ribbon with the method name */
.csp-ribbon { position: relative; background: var(--csp-hot-dark); color: #fff; margin: 34px -20px; padding: 22px 30px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; }
.csp-ribbon::before, .csp-ribbon::after { content: ''; position: absolute; bottom: -14px; border: 7px solid #6f0d0d; }
.csp-ribbon::before { left: 0; border-left-color: transparent; border-bottom-color: transparent; }
.csp-ribbon::after { right: 0; border-right-color: transparent; border-bottom-color: transparent; }
.csp-ribbon strong { color: #fff; font-size: 36px; line-height: 1.15; font-weight: 800; font-style: italic; display: block; }
.csp-ribbon span { display: block; font-size: 18px; margin-top: 6px; color: #ffe9e9; }
.csp-ribbon img { width: 120px; height: auto; background: #fff; border-radius: 50%; padding: 10px; }

/* Numbered tags (three choices, three things, two roads) */
.csp-tags { list-style: none; margin: 26px 0; padding: 0; counter-reset: tag; }
.csp-tags > li { counter-increment: tag; position: relative; margin: 0 0 22px; padding: 0 0 0 76px; min-height: 56px; }
.csp-tags > li::before { content: counter(tag); position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--csp-hot-dark); color: #fff; font-weight: 800; font-size: 28px; display: grid; place-items: center; box-shadow: 4px 4px 0 rgba(178,26,26,.22); }
.csp-tags > li > b:first-child, .csp-tags > li > strong:first-child { display: block; font-size: 23px; line-height: 1.3; color: var(--csp-hot-dark); margin-bottom: 4px; }
.csp-panel { background: var(--csp-light); border-radius: 10px; padding: 30px 30px 10px; margin: 26px 0; }

/* Floated pictures */
.csp-fig { margin: 6px 0 18px; width: 300px; }
.csp-fig img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.csp-fig.r { float: right; margin-left: 28px; }
.csp-fig.l { float: left; margin-right: 28px; }
.csp-fig.wide { width: 100%; float: none; margin: 18px 0 26px; }
.csp-fig.sm { width: 220px; }

/* Afterglow band */
.csp-glow { background: #fff6d8; border-top: 3px solid var(--csp-gold); border-bottom: 3px solid var(--csp-gold); margin: 30px -56px; padding: 26px 56px; text-align: center; font-size: 27px; line-height: 1.35; font-weight: 800; color: var(--csp-ink); }

/* What Steve says on the track */
.csp-quote { margin: 26px 0; padding: 24px 28px 20px; border-left: 6px solid var(--dlt-teal); background: #f4f9f9; border-radius: 0 10px 10px 0; }
.csp-quote p { font-size: 20px; font-style: italic; color: #1f2329; margin: 0 0 .7em; }
.csp-quote cite { display: block; font-style: normal; font-weight: 700; font-size: 16px; color: var(--dlt-teal); }

/* Sticky note */
.csp-sticky { float: right; width: 300px; margin: 6px 0 18px 28px; background: #fff3b8; padding: 22px 22px 12px; transform: rotate(2deg); box-shadow: 0 10px 22px rgba(0,0,0,.16); }
.csp-sticky b { display: block; font-size: 19px; margin-bottom: 8px; color: #1f2329; }
.csp-sticky ul { list-style: none; margin: 0; padding: 0; }
.csp-sticky li { position: relative; padding-left: 30px; margin-bottom: 8px; font-size: 17px; line-height: 1.45; }
.csp-sticky li::before { content: ''; position: absolute; left: 4px; top: 4px; width: 9px; height: 15px; border: solid var(--csp-teal); border-width: 0 3px 3px 0; transform: rotate(40deg); }

/* Phone screen */
.csp-phone { float: right; width: 260px; margin: 4px 0 18px 28px; background: #1d2128; border-radius: 30px; padding: 16px 12px 22px; box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.csp-phone-in { background: #f2f4f7; border-radius: 18px; padding: 16px 12px 12px; min-height: 260px; }
.csp-msg { background: #2f7cf6; color: #fff; border-radius: 16px 16px 4px 16px; padding: 8px 12px; margin: 0 0 8px auto; width: fit-content; max-width: 88%; font-size: 16px; line-height: 1.35; }
.csp-msg.typing { background: #fff; color: #555; border: 1px dashed #b9c0ca; }
.csp-msg-meta { text-align: right; color: #666; font-size: 16px; margin-top: 2px; }

/* Technique cards */
.csp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 26px 0; }
.csp-card { border-radius: 8px; padding: 26px 24px 22px; text-align: center; border: 1px solid #dde3ea; }
.csp-card.dark { background: var(--csp-dark); color: #fff; border-color: var(--csp-dark); }
.csp-card.light { background: var(--csp-light); color: var(--csp-body); }
.csp-card .lead { display: block; font-weight: 800; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 6px; color: var(--csp-hot); }
.csp-card.dark .lead { color: var(--csp-gold-ink); }
.csp-card h3 { font-size: 26px; line-height: 1.2; font-weight: 800; margin: 0 0 10px; color: var(--csp-ink); }
.csp-card.dark h3 { color: #fff; }
.csp-card h3 em { font-style: normal; color: var(--csp-hot); }
.csp-card.dark h3 em { color: var(--csp-gold-ink); }
.csp-card p { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 0 0 10px; }
.csp-card.dark p { color: #f1f4f8; }
.csp-card .from { display: block; font-size: 16px; font-weight: 500; opacity: .85; }
.csp-card .from a { color: inherit; }
.csp-cards .csp-brush { grid-column: 1 / -1; margin: 8px 0; font-size: 26px; }

/* Polaroid */
.csp-polaroid { float: left; width: 230px; margin: 6px 30px 18px 0; background: #fff; padding: 12px 12px 14px; box-shadow: 0 10px 26px rgba(0,0,0,.2); transform: rotate(-2.5deg); text-align: center; }
.csp-polaroid img { display: block; width: 100%; height: auto; background: var(--csp-light); }
.csp-polaroid figcaption { font-weight: 700; font-style: italic; font-size: 17px; margin-top: 8px; color: #1f2329; }
.csp-smile { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--dlt-gold); vertical-align: -.05em; margin-left: .2em; position: relative; }
.csp-smile::after { content: ''; position: absolute; left: 22%; right: 22%; top: 38%; height: 32%; border-bottom: .09em solid #1f2329; border-radius: 0 0 50% 50%; }

/* Speech bubbles (dlt_testimonial() output) */
.csp-bubbles { display: flex; flex-direction: column; gap: 34px; margin: 28px 0 10px; }
.csp-bubbles .dlt-testimonial { position: relative; width: 74%; border: 0; border-radius: 14px; padding: 24px 26px; background: var(--csp-bubble-1); grid-template-columns: 64px 1fr; overflow: visible; }
.csp-bubbles .dlt-testimonial:nth-child(3n+2) { background: var(--csp-bubble-2); }
.csp-bubbles .dlt-testimonial:nth-child(3n+3) { background: var(--csp-bubble-3); }
.csp-bubbles .dlt-testimonial:nth-child(even) { margin-left: auto; }
.csp-bubbles .dlt-testimonial::after { content: ''; position: absolute; bottom: -20px; left: 40px; border-style: solid; border-width: 20px 22px 0 0; border-color: var(--csp-bubble-1) transparent transparent transparent; }
.csp-bubbles .dlt-testimonial:nth-child(3n+2)::after { border-top-color: var(--csp-bubble-2); }
.csp-bubbles .dlt-testimonial:nth-child(3n+3)::after { border-top-color: var(--csp-bubble-3); }
.csp-bubbles .dlt-testimonial:nth-child(even)::after { left: auto; right: 40px; border-width: 20px 0 0 22px; }
.csp-bubbles .dlt-testimonial blockquote { font-size: 18px; }
.csp-bubbles .dlt-t-head { color: var(--csp-hot); font-size: 22px; line-height: 1.3; margin-bottom: .4em; }
.csp-bubbles .dlt-testimonial figcaption { font-size: 16px; }
.csp-bubbles .dlt-testimonial figcaption span { display: block; }
.csp-note { font-size: 16px; color: #5b636e; text-align: center; }

/* Three tracks */
.csp-tracks { display: grid; gap: 22px; margin: 24px 0; }
.csp-track { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; background: #fff; border: 2px solid var(--dlt-line, #dfe6ee); border-radius: 12px; padding: 20px 24px; }
.csp-track img { width: 100%; height: auto; }
.csp-track h3 { font-size: 24px; margin: 0 0 6px; color: var(--csp-ink); }
.csp-track h3 small { display: block; font-size: 16px; font-weight: 700; color: var(--csp-hot); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.csp-track p { margin: 0 0 8px; }
.csp-track .price { font-weight: 700; color: var(--csp-ink); }

/* Price and stack */
.csp-pkgs { display: flex; justify-content: center; align-items: flex-end; margin: 18px auto 8px; max-width: 560px; }
.csp-pkgs img { width: 34%; height: auto; margin: 0 -2%; }
.csp-pkgs img:nth-child(2) { width: 40%; position: relative; z-index: 1; }
.csp-stack { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 19px; }
.csp-stack td { padding: 12px 6px; border-bottom: 1px dashed #c9d1db; vertical-align: top; }
.csp-stack td:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.csp-stack tr.sum td { border-bottom: 2px solid var(--csp-ink); color: #555; }
.csp-stack tr.you td { border: 0; font-size: 24px; font-weight: 800; color: var(--csp-hot); padding-top: 16px; }
.csp-price { text-align: center; font-size: 26px; font-weight: 700; color: var(--csp-ink); margin: 18px 0; }
.csp-price b { font-size: 46px; color: var(--csp-hot); display: block; line-height: 1.15; }

/* Buy button */
.csp-cta { text-align: center; margin: 30px 0 10px; }
.csp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: 74%; max-width: 100%; background: linear-gradient(#f7c937, var(--dlt-gold, #f2bb09) 55%, var(--dlt-gold-deep, #cf9007)); color: #010200; border: 2px solid var(--dlt-gold-deep, #cf9007); border-radius: 50px; padding: 18px 26px; font-weight: 800; font-size: 30px; line-height: 1.2; text-decoration: none; box-shadow: 0 8px 20px rgba(207,144,7,.35); transition: transform .15s, box-shadow .15s; }
.csp-letter a.csp-btn { color: #010200; }
.csp-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(207,144,7,.45); }
.csp-btn svg { width: 34px; height: 34px; flex: 0 0 auto; }
.csp-cta .dlt-pay-note { font-size: 16px; }
.csp-fine { text-align: center; font-size: 16px; color: #555; margin: 8px 0 0; }

/* Guarantee */
.csp-letter .dlt-guarantee { margin: 26px 0; }
.csp-letter .dlt-guarantee p { font-size: 18px; }

/* P.S. */
.csp-ps p { font-size: 19px; }
.csp-ps b.ps { color: var(--csp-hot); }
.csp-yes { font-size: 26px; line-height: 1.4; font-weight: 800; color: var(--csp-ink); text-align: center; margin: 30px 0 0; }

/* Exit pop */
.csp-exit { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.6); padding: 16px; }
.csp-exit.open { display: flex; }
.csp-exit-box { position: relative; width: 540px; max-width: 100%; max-height: 92vh; overflow: auto; background: #fff; border-radius: 8px; padding: 32px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.csp-exit-box h2 { color: var(--csp-hot); font-size: 30px; line-height: 1.2; margin: 0 0 12px; padding-right: 24px; }
.csp-exit-box img { float: left; width: 140px; margin: 0 18px 10px 0; }
.csp-exit-box p { font-size: 18px; }
.csp-exit-box .csp-btn { width: 100%; font-size: 22px; padding: 14px 18px; clear: both; }
.csp-exit-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 32px; line-height: 1; cursor: pointer; color: #555; padding: 4px 8px; }
.csp-exit-no { display: block; margin: 14px auto 0; background: none; border: 0; color: #666; font-size: 16px; text-decoration: underline; cursor: pointer; font-family: inherit; }

/* Fade-up */
.js .fx { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .fx.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .fx { opacity: 1; transform: none; transition: none; } .csp-btn { transition: none; } }

/* Phones */
@media (max-width: 760px) {
  body.csp { font-size: 17px; background-attachment: scroll; }
  .csp-head { padding: 16px 16px 22px; }
  .csp-word { font-size: 27px; }
  .csp-rule { display: none; }
  .csp-tag { text-align: center; font-size: 17px; }
  .csp-letter { border-width: 0; border-top: 4px solid var(--csp-ink); border-radius: 0; padding: 32px 20px 24px; margin-bottom: 0; }
  .csp-h1 { font-size: 35px; }
  .csp-big { font-size: 31px; margin-top: 32px; }
  .csp-sub { font-size: 22px; }
  .csp-h2 { font-size: 26px; }
  .csp-h3 { font-size: 22px; }
  .csp-lead { font-size: 19px; }
  .csp-brush { font-size: 22px; padding: 20px 18px; margin: 24px 0; }
  .csp-hl { font-size: 20px; }
  .csp-hl.arrow { padding-left: 16px; }
  .csp-hl.arrow::after { display: none; }
  .csp-ribbon { margin: 28px -20px; grid-template-columns: 1fr; padding: 20px; }
  .csp-ribbon img { display: none; }
  .csp-ribbon strong { font-size: 28px; }
  .csp-fig, .csp-fig.r, .csp-fig.l, .csp-fig.sm, .csp-sticky, .csp-phone, .csp-polaroid { float: none; width: 100%; margin: 10px 0 20px; }
  .csp-phone { max-width: 280px; margin: 10px auto 20px; }
  .csp-polaroid { max-width: 260px; margin: 10px auto 20px; }
  .csp-sticky { transform: rotate(1deg); }
  .csp-glow { margin: 26px -20px; padding: 22px 20px; font-size: 22px; }
  .csp-cards { grid-template-columns: 1fr; }
  .csp-card h3 { font-size: 23px; }
  .csp-card p { font-size: 17px; }
  .csp-bubbles .dlt-testimonial { width: 100%; grid-template-columns: 1fr; }
  .csp-bubbles .dlt-testimonial img, .csp-bubbles .dlt-initials { grid-row: auto; width: 56px; height: 56px; }
  .csp-bubbles .dlt-testimonial figcaption { grid-column: 1; }
  .csp-bubbles .dlt-testimonial:nth-child(even)::after { right: auto; left: 40px; border-width: 20px 22px 0 0; }
  .csp-track { grid-template-columns: 1fr; text-align: center; padding: 18px 16px; }
  .csp-track img { max-width: 220px; margin: 0 auto; }
  .csp-stack { font-size: 17px; }
  .csp-stack tr.you td { font-size: 21px; }
  .csp-price b { font-size: 38px; }
  .csp-btn { width: 100%; font-size: 24px; padding: 16px 18px; gap: 10px; }
  .csp-btn svg { width: 28px; height: 28px; }
  .csp-yes { font-size: 22px; }
  .csp-exit-box { padding: 26px 20px; }
  .csp-exit-box img { float: none; display: block; margin: 0 auto 12px; }
  .csp-exit-box h2 { font-size: 26px; }
}
.csp-letter .dlt-pay-note { font-size: 16px; }
body.csp .dlt-btn-blue { font-size: 16px; }
/* Headings and bands never wrap beside a floated picture */
.csp-big, .csp-h2, .csp-brush, .csp-hl, .csp-glow, .csp-quote, .csp-ribbon, .csp-cards, .csp-panel, .csp-tags { clear: both; }