/* Complete Editions, start-tonight results style (sleep and calm editions), 2026-11-05.
   The archetype's palette is mapped onto the Dream Life Tracks tokens in dlt-kit/css/dlt-base.css:
   band = the live navy banner (the product and its claims), pop = aqua on dark / teal on light (the result),
   button = the live gold pill (buy). Backgrounds are the site's own ($D_BG). Body 18px desktop, 17px phone,
   nothing meant to be read under 16px. */
:root {
  --tn-band: var(--dlt-navy);
  --tn-band-deep: var(--dlt-navy-deep);
  --tn-pop: var(--dlt-aqua);
  --tn-res: var(--dlt-teal);
  --tn-btn: var(--dlt-gold);
  --tn-panel: var(--dlt-sky);
  --tn-hi: #e3f2fb;
  --tn-lo: #fffbea;
  --tn-shadow: 0 16px 40px rgba(17, 42, 79, .13);
}
body.tn { font-size: 18px; line-height: 1.65; color: var(--dlt-ink); background: #fff; }
.tn main { display: block; }
.tn figure { margin: 0; }
.tn-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.tn-narrow { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.tn-c { text-align: center; }
.tn b { color: var(--dlt-ink-dark); }
.tn .tn-res, .tn b.tn-res { color: var(--tn-res); }
.tn h1, .tn h2, .tn h3 { text-wrap: balance; }

/* Kit pieces brought up to the readable sizes */
.tn .dlt-topbar nav a { font-size: 16px; }
.tn .dlt-buy small, .tn .dlt-pay-note { font-size: 16px; }
.tn .dlt-testimonial blockquote { font-size: 17px; font-style: italic; }
.tn .dlt-testimonial figcaption { font-size: 16px; }
.tn .dlt-t-head { font-style: normal; }
.tn .dlt-support p, .tn .dlt-btn-blue { font-size: 16px; }
.tn .dlt-disclaimer { font-size: 16px; line-height: 1.55; }
.tn .dlt-footer { font-size: 16px; }
.tn .dlt-faq summary { font-size: 18px; }

/* Bands: full bleed, one centred Title Case headline, result words in aqua */
.tn-band { background: var(--tn-band); color: #fff; text-align: center; padding: 56px 0; }
.tn-band.deep { background: var(--tn-band-deep) url('/wp-content/uploads/2020/03/blue-bg-dreamlife.jpg') center / cover no-repeat; }
.tn-band h1, .tn-band h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); line-height: 1.28; font-weight: 800; max-width: 860px; margin: 0 auto; }
.tn-band h1 { font-size: clamp(29px, 3.6vw, 42px); }
.tn-band em { font-style: normal; color: var(--tn-pop); }
.tn-bsub { max-width: 760px; margin: 18px auto 0; font-size: 18px; color: #dce8f5; }
.tn-bsub b { color: #fff; }
.tn-hero { padding: 64px 0 60px; }
.tn-hero .tn-bsub { font-size: 19px; }

/* Blocks */
.tn-block { padding: 64px 0; }
.tn-block.soft { background: var(--tn-panel); }
.tn-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.tn-split.mid { align-items: center; }
.tn-pic img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--tn-shadow); }
.tn-pic figcaption { font-size: 16px; color: #5d6877; margin-top: 10px; text-align: center; }
.tn-sticky { position: sticky; top: 24px; }
.tn-lead { font-size: 21px; line-height: 1.45; font-weight: 700; color: var(--dlt-navy); }
.tn-h2 { font-size: clamp(25px, 2.8vw, 32px); line-height: 1.3; font-weight: 800; color: var(--dlt-navy); margin-bottom: 26px; }
.tn-h3 { font-size: clamp(22px, 2.3vw, 27px); line-height: 1.3; font-weight: 800; color: var(--dlt-navy); margin-bottom: 14px; }
.tn-h2 em, .tn-h3 em { font-style: normal; color: var(--tn-res); }
.tn-dots { list-style: none; padding: 0; margin: 0 0 1.2em; }
.tn-dots li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.tn-dots li::before { content: ''; position: absolute; left: 3px; top: .52em; width: 12px; height: 12px; border-radius: 50%; background: var(--tn-pop); box-shadow: 0 0 0 4px rgba(51, 203, 190, .18); }
.tn-dots b { color: var(--dlt-navy); }

/* The three-track render: the three real package mockups fanned out */
.tn-fan { position: relative; width: 100%; aspect-ratio: 1 / .82; max-width: 460px; margin: 0 auto; }
.tn-fan img { position: absolute; width: 62%; height: auto; filter: drop-shadow(0 14px 22px rgba(17, 42, 79, .28)); }
.tn-fan img:nth-child(1) { left: 19%; top: 0; z-index: 3; }
.tn-fan img:nth-child(2) { left: 0; top: 22%; z-index: 2; transform: rotate(-4deg); }
.tn-fan img:nth-child(3) { right: 0; top: 22%; z-index: 1; transform: rotate(4deg); }
.tn-inside { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.tn-inside a { display: inline-block; background: #fff; border: 1px solid var(--dlt-line); border-radius: 50px; padding: 8px 16px; font-weight: 700; font-size: 16px; color: var(--dlt-navy); text-decoration: none; }
.tn-inside a:hover { border-color: var(--tn-pop); color: var(--tn-res); }
.tn-instead { background: var(--tn-panel); border-left: 5px solid var(--tn-pop); border-radius: 12px; padding: 16px 20px; margin: 22px 0 0; }
.tn-instead p:last-child { margin-bottom: 0; }

/* Horizons */
.tn-stage + .tn-stage { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--dlt-line); }
.tn-dose { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--dlt-line); border-left: 5px solid var(--tn-btn); border-radius: 12px; padding: 12px 18px; margin: 0 0 18px; }
.tn-dose img { width: 54px; height: auto; flex: none; }
.tn-dose p { margin: 0; }
.tn-side { background: var(--tn-panel); border-radius: 12px; padding: 16px 20px; margin-top: 8px; }
.tn-side p:last-child { margin: 0; }

/* Buyer wall: kit testimonials only, in a 760px column */
.tn-wall { max-width: 780px; margin: 0 auto; display: grid; gap: 18px; }
.tn-wall .dlt-testimonial { box-shadow: 0 8px 24px rgba(17, 42, 79, .07); border-color: #e3ebf3; grid-template-columns: 80px 1fr; }
.tn-wall .dlt-testimonial img, .tn-wall .dlt-initials { width: 80px; height: 80px; }
.tn-steve { display: flex; gap: 20px; align-items: center; max-width: 780px; margin: 0 auto 30px; }
.tn-steve img { width: 96px; height: 96px; border-radius: 50%; flex: none; object-fit: cover; background: var(--tn-panel); }
.tn-steve p { margin: 0; }

/* Components grid */
.tn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 8px; }
.tn-card { text-align: center; }
.tn-card .tn-img { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #ececec; }
.tn-card .tn-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-card .tn-img img.contain { object-fit: contain; background: #fff; }
.tn-card h3 { font-size: 20px; line-height: 1.3; color: var(--tn-band); margin: 14px 0 6px; }
.tn-card p { font-size: 17px; margin: 0; }
.tn-from { display: block; font-size: 16px; font-weight: 600; color: var(--tn-res); margin-top: 8px; }
.tn-from a { color: inherit; }
.tn-card.worst .tn-img { box-shadow: 0 0 0 4px var(--tn-btn); }

/* Worst-symptom block */
.tn-lines p { font-size: 19px; }
.tn-lines p.tn-try { font-size: 22px; font-weight: 800; color: var(--dlt-navy); margin-top: 26px; }
.tn-try em { font-style: normal; color: var(--tn-res); }
.tn-quote { background: var(--tn-panel); border-radius: 14px; padding: 22px 26px; margin: 24px 0; }
.tn-quote p { font-style: italic; }
.soft .tn-quote { background: #fff; border: 1px solid var(--dlt-line); }
.tn-quote cite { display: block; font-style: normal; font-weight: 700; color: var(--dlt-navy); font-size: 16px; }

/* Companion tracks (the bonuses of this archetype) */
.tn-comp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 44px; align-items: center; }
.tn-comp + .tn-comp { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--dlt-line); }
.tn-comp img { display: block; width: 100%; max-width: 380px; margin: 0 auto; height: auto; filter: drop-shadow(0 14px 22px rgba(17, 42, 79, .25)); }
.tn-comp .tn-worth { font-weight: 700; color: var(--dlt-navy); }
.tn-comp .tn-worth a { color: var(--tn-res); }
.tn-avoid { background: #fff; border: 1px solid var(--dlt-line); border-radius: 14px; padding: 26px 28px; margin-top: 56px; }
.tn-avoid ol { margin: 0; padding-left: 1.3em; }
.tn-avoid li { margin-bottom: 10px; }

/* Stay the course: quiet, one-line paragraphs */
.tn-course p { margin-bottom: .85em; }
.tn-course .tn-pic { margin: 10px 0 26px; }

/* Packages */
.tn-pk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1040px; margin: 0 auto; align-items: start; }
.tn-pk-card { background: #fff; border: 1px solid var(--dlt-line); border-radius: 16px; padding: 26px 22px 24px; text-align: center; }
.tn-pk-card.hi { background: var(--tn-hi); border: 2px solid var(--tn-pop); transform: translateY(-12px); box-shadow: var(--tn-shadow); }
.tn-pk-card.lo { background: var(--tn-lo); }
.tn-pk-flag { display: inline-block; background: var(--tn-band); color: #fff; font-size: 16px; font-weight: 700; border-radius: 50px; padding: 4px 14px; margin-bottom: 10px; }
.tn-pk-card h3 { font-size: 22px; line-height: 1.25; color: var(--dlt-navy); margin: 0 0 4px; text-transform: uppercase; letter-spacing: .02em; }
.tn-pk-what { font-size: 17px; margin: 0 0 12px; }
.tn-pk-save { font-weight: 800; color: var(--tn-res); margin: 0 0 6px; }
.tn-pk-price { font-size: 38px; font-weight: 800; color: var(--dlt-red); line-height: 1.1; margin: 4px 0 2px; }
.tn-pk-card.hi .tn-pk-price { font-size: 46px; }
.tn-pk-card.lo .tn-pk-price { color: #5d6877; }
.tn-pk-unit { font-size: 16px; color: #5d6877; margin: 0 0 16px; }
.tn-pk-pics { display: flex; justify-content: center; margin: 4px 0 14px; }
.tn-pk-pics img { width: 40%; height: auto; margin: 0 -4%; filter: drop-shadow(0 8px 14px rgba(17, 42, 79, .22)); }
.tn-pk-pics.one img { width: 62%; margin: 0; }
.tn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--tn-btn); color: #111; border-radius: 50px; padding: 15px 18px; font-weight: 800; font-size: 19px; text-decoration: none; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(207, 144, 7, .28); transition: transform .15s, box-shadow .15s; }
.tn-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(207, 144, 7, .35); }
.tn-btn svg { width: 22px; height: 22px; flex: none; }
.tn-pk-card.hi .tn-btn { font-size: 21px; padding: 18px; }
.tn-btn.ghost { background: #fff; border: 2px solid var(--dlt-line); box-shadow: none; color: var(--dlt-navy); font-size: 17px; }
.tn-pk-card .dlt-pay-note img { max-width: 230px; }
.tn-pk-list { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; }
.tn-pk-list li { font-size: 16px; padding: 7px 0 7px 26px; border-top: 1px solid rgba(17, 42, 79, .08); position: relative; }
.tn-pk-list li::before { content: '✓'; position: absolute; left: 4px; color: var(--tn-res); font-weight: 800; }
.tn-pk-list a { font-weight: 700; }
.tn-pk-total { font-size: 17px; font-weight: 700; color: var(--dlt-navy); margin: 14px 0 0; }

/* FAQ: open text, no accordion */
.tn-faq h3 { font-size: 20px; line-height: 1.35; color: var(--dlt-navy); margin: 30px 0 8px; }
.tn-faq h3:first-child { margin-top: 0; }

/* Guarantee and the closing note */
.tn .dlt-guarantee { max-width: 900px; margin: 0 auto; }
.tn-note { font-size: 16px; color: #4f5966; max-width: 860px; margin: 0 auto; text-align: center; }

/* Gentle fade-up on blocks, only with scripts on and motion allowed */
.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; } }

@media (max-width: 860px) {
  .tn .dlt-topbar nav { display: none; }
  .tn-split, .tn-comp { grid-template-columns: 1fr; gap: 28px; }
  .tn-sticky { position: static; }
  .tn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .tn-pk { grid-template-columns: 1fr; max-width: 480px; gap: 26px; }
  .tn-pk-card.hi { transform: none; order: -1; }
  .tn-pic { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 600px) {
  body.tn { font-size: 17px; }
  .tn-band { padding: 40px 0; }
  .tn-block { padding: 46px 0; }
  .tn-wrap, .tn-narrow { padding: 0 16px; }
  .tn-lines p { font-size: 18px; }
  .tn-wall .dlt-testimonial { grid-template-columns: 60px 1fr; padding: 18px; }
  .tn-wall .dlt-testimonial img, .tn-wall .dlt-initials { width: 60px; height: 60px; }
  .tn-steve { flex-direction: column; text-align: center; }
  .tn-avoid { padding: 20px 18px; }
  .tn-quote { padding: 18px; }
}
@media (max-width: 420px) {
  .tn-grid { grid-template-columns: 1fr; }
  .tn .dlt-bar-sep, .tn .dlt-track-logo { display: none; }
}