/* Lyron Coaching — dark theme, loaded after the engine's brand.css so it wins.
   The engine's designed page ships light: --dp-cream, --dp-ink and --dp-text
   are hardcoded in designed-css.js and no config key reaches them. Most of the
   page reads from those variables, so redefining them here inverts it. What is
   left is the handful of literal hex values in that file, patched below.

   Scoped to body:has(.dp) on purpose. Only the sales page goes dark; the
   checkout, thank-you and legal pages keep the light look the engine gave them.

   This file also carries layout the settings cannot express — hero order,
   bonus cover art, the story photo, the proof grid. Every such block says why
   below. The engine itself is never edited; its LICENSE forbids it, and this
   stylesheet is the hook it provides for exactly this.

   Palette: bg #0E0F11, cards #181A1D, text #EDEDEA, amber #E0A526,
   CTA green #22C55E. Colour only — nothing here moves or resizes anything. */

body:has(.dp) {
  background: #0E0F11;
  color: #EDEDEA;
}

body:has(.dp) .site-head,
body:has(.dp) .site-foot {
  background: #0E0F11;
  color: #9A9C98;
  border-color: #2A2D31;
}
body:has(.dp) .site-head .wordmark { color: #EDEDEA; }
body:has(.dp) .site-foot a { color: #E0A526; }

.dp {
  /* The surfaces and type, inverted. */
  --dp-cream: #181A1D;
  --dp-ink: #EDEDEA;
  --dp-text: #C9CBC7;
  --dp-muted: #9A9C98;
  --dp-faint: #7C7E7A;
  --dp-line: #2A2D31;
  --dp-card-line: #33373C;

  /* Deeper than the page, so the dark bands still read as bands. */
  --dp-deepest: #08090A;
  --dp-deep-card: #24272C;

  /* The exact hover green asked for; the engine would have derived #16803D. */
  --dp-accent-hover: #16A34A;

  background: #0E0F11;
}

/* ---- The CTA: the only saturated thing on the page. ---- */
.dp .dp-btn {
  color: #0E0F11;
  box-shadow: 0 10px 26px rgba(34, 197, 94, 0.20);
}
@media (hover: hover) {
  .dp .dp-btn:hover { box-shadow: 0 16px 34px rgba(34, 197, 94, 0.34); }
}

/* ---- Amber takes over every place the engine used the accent for emphasis,
        so green belongs to the button alone. ---- */
.dp .dp-price .dp-now,
.dp .dp-just,
.dp .dp-checks li::before,
.dp .dp-faq summary::after { color: var(--dp-gold); }

.dp .dp-pricebox { border-color: var(--dp-gold); }

/* The highlighter. The engine fills the whole line box with --dp-mark, which at
   58px headline size is a ~63px slab of near-white amber on a near-black page —
   enough area to glare. Two changes: a gradient paints only the band the text
   actually occupies instead of the full line box, and the colour steps down
   from the lightened #F1D79D to the brand amber, which is dimmer. Dark text on
   it still measures ~9:1, so nothing is lost in legibility. */
.dp mark {
  color: #0E0F11;
  background: linear-gradient(
    transparent 14%,
    var(--dp-gold) 14%,
    var(--dp-gold) 90%,
    transparent 90%
  );
  padding: 0 0.08em;
  border-radius: 3px;
}

/* ---- Cards and panels the engine hardcoded to #FFFFFF. ---- */
.dp .dp-card,
.dp .dp-pricebox {
  background: var(--dp-cream);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.40);
}
.dp .dp-bonus { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.40); }
.dp .dp-guarantee-box,
.dp .dp-recap { border-color: var(--dp-gold); }
.dp .dp-chips li { background: var(--dp-deep-card); }

/* ---- The comparison cards: tinted off the page colour, not off white. ---- */
.dp .dp-old { background: #1F1718; border-color: #5C3B38; }
.dp .dp-old h3 { color: #E89086; }
.dp .dp-crosses li::before { color: #E07A6E; }
.dp .dp-new {
  background: #141D18;
  border-color: var(--dp-gold);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.40);
}

/* ---- Eyebrows and pills: on a dark page the engine's near-black chip
        disappears. Lift the surface and put the amber on it. ---- */
.dp .dp-eyebrow,
.dp .dp-pill {
  background: var(--dp-deep-card);
  color: var(--dp-gold);
}

/* Step numbers become amber discs with dark figures, matching the modules. */
.dp .dp-step-number { background: var(--dp-gold); color: #0E0F11; }

/* ---- The wordmark: brand in front, legal entity on the legal pages. ------
   offer.businessName feeds both the legal pages and the visible site header,
   with no way to separate them. The registered name is "Lyron Revollido
   Digital Marketing Services", which above a fat-loss page reads as a
   marketing agency and quietly contradicts the offer. The trading name is
   shown here instead.

   This is scoped with the rest of the file to body:has(.dp), so only the sales
   page is affected; terms, privacy and refund keep the registered name in the
   header, and all three carry it in their body text regardless, so nothing
   legal depends on this. The DOM text is unchanged — a screen reader still
   reads the registered name, which is the same business either way. */
body:has(.dp) .site-head .wordmark { font-size: 0; }
body:has(.dp) .site-head .wordmark::before {
  content: "Lyron Coaching";
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---- Hero order: eyebrow, headline, sub, then the art. -------------------
   The engine prints the hero as headline, image, sub-headline, qualifier — so
   the line that says who this is for lands last, below the fold on a phone,
   after the promise it was meant to frame. The eyebrow qualifies *who*, the
   headline promises *what*, and the sub carries the objection it answers, so
   they belong in that order and together. The markup cannot be changed, so the
   hero becomes a flex column and the children are re-sequenced. */
.dp .dp-hero {
  display: flex;
  flex-direction: column;
}
.dp .dp-hero .dp-qualifier { order: 1; }
.dp .dp-hero h1 { order: 2; }
.dp .dp-hero .dp-sub { order: 3; }
.dp .dp-hero .dp-image,
.dp .dp-hero .dp-video { order: 4; }
.dp .dp-hero .dp-price { order: 5; }
.dp .dp-hero .dp-cta { order: 6; }

/* Restyled as an eyebrow rather than a muted footnote. Left in sentence case:
   at 110 characters, all caps stops being a label and becomes shouting. */
.dp .dp-hero .dp-qualifier {
  margin: 0 auto 14px;
  max-width: 620px;
  color: var(--dp-gold);
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* The sub now sits directly under the headline, so it carries the gap that
   used to separate it from the image. */
.dp .dp-hero .dp-sub { margin-bottom: 26px; }

/* ---- The guarantee, once. ------------------------------------------------
   Setting offer.guarantee makes the engine print the full 59 words in four
   places — the hero, the story sidebar, a strip under the lessons, and its own
   panel before the price — with no setting to choose between them. Repeating
   identical refund terms four times reads as padding and spends the strongest
   card on the page early, when the reader has no desire yet to protect.

   Three are dropped. The one kept is the panel, which sits immediately before
   the price box: a guarantee is risk reversal, and it only pays at the moment
   of the decision. The refund page is untouched — this file only ever applies
   to the sales page. */
.dp .dp-hero .dp-guarantee-box,
.dp .dp-mini-guarantee,
.dp .dp-strip { display: none; }

/* ---- The story's eyebrow. ------------------------------------------------
   The engine labels the story section "The real opportunity", which names
   nothing a reader recognises and sits oddly above a personal story. The
   heading text comes from the engine's own wording and cannot be set in the
   config, so the label is dropped and the story opens on its first line.
   .dp-two appears exactly once in the page, so this matches only that
   section and leaves the other seven eyebrows alone. */
.dp .dp-sec:has(.dp-two) > .dp-eyebrow { display: none; }

/* ---- Bonus cover art. ---------------------------------------------------
   page.bonuses accepts a title, a blurb and bullet points and nothing else —
   the schema sets additionalProperties:false, so an image key is refused. The
   covers are therefore painted onto each card. The card becomes two columns
   with the art held in the first; every real child is pushed into the second.
   The order of these four files matches the order of page.bonuses, so moving
   or adding a bonus in the settings means renumbering here too. */
.dp .dp-bonus {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
}
.dp .dp-bonus::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: center;
  aspect-ratio: 460 / 580;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.dp .dp-bonus > * { grid-column: 2; }
/* The pill is an inline-block, which shrank to its text in normal flow. As a
   grid item it stretches the full column instead, turning the little "BONUS #1"
   tag into a full-width bar. */
.dp .dp-bonus > .dp-pill { justify-self: start; }

.dp .dp-stack > .dp-bonus:nth-child(1)::before { background-image: url("/proof/bonus-1.png"); }
.dp .dp-stack > .dp-bonus:nth-child(2)::before { background-image: url("/proof/bonus-2.png"); }
.dp .dp-stack > .dp-bonus:nth-child(3)::before { background-image: url("/proof/bonus-3.png"); }
.dp .dp-stack > .dp-bonus:nth-child(4)::before { background-image: url("/proof/bonus-4.png"); }

@media (max-width: 560px) {
  /* Side by side, the art would leave the text about 150px wide. */
  .dp .dp-bonus { grid-template-columns: 1fr; row-gap: 4px; }
  .dp .dp-bonus::before {
    grid-column: 1;
    grid-row: auto;
    width: 150px;
    margin-bottom: 12px;
  }
  .dp .dp-bonus > * { grid-column: 1; }
}

/* ---- The proof section. -------------------------------------------------
   The student photos arrive at three different shapes (1.45, 1.02 and 0.80),
   which in the engine's plain grid would leave a ragged, stepped row. Cropping
   them to match would cut the weight labels off the bottom of two of them, and
   those labels are the evidence. So each cell becomes a fixed 4:3 charcoal
   tile and the photo is contained inside it: every tile is identical, nothing
   is cropped, and the tall ones simply sit framed with a little room around
   them, which reads as deliberate rather than broken. */
.dp .dp-gallery img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #181A1D;
  border-color: #33373C;
}

/* The chat screenshots are a different kind of evidence: their value is the
   text inside them, so they cannot share the photo tile. chat-1 is 907px wide
   with ~22px type; squeezed into a 347px cell that type renders at about 8px,
   which no one will read. Each screenshot therefore takes the full width of
   the grid and keeps its own proportions. They are already dark with their own
   chrome, so the tile background and border come off too. */
.dp .dp-gallery a[href*="/chat-"] {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
}
.dp .dp-gallery a[href*="/chat-"] img {
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 12px;
}

/* The four screenshots were captured at different zoom levels, so the same
   display width would render chat-1 at ~18px type and chat-3 at ~53px. Each
   is sized individually instead, to land every one near the page's own 19px
   body size. The numbers look arbitrary because they are: they are whatever
   each capture needs. */
.dp .dp-gallery a[href*="/chat-1"] { max-width: 760px; }
.dp .dp-gallery a[href*="/chat-2"] { max-width: 560px; }
.dp .dp-gallery a[href*="/chat-3"] { max-width: 420px; }
.dp .dp-gallery a[href*="/chat-4"] { max-width: 360px; }

/* Quote cards and photos both land in rows of three. With four quotes the
   fourth is left stranded against the left edge of its own row. The grid's
   tracks are fixed, so justify-content cannot move it; the item itself has to
   be placed into the middle column. This matches a lone trailing card only —
   a full last row is untouched. */
/* The gallery is excluded: its chat screenshots each take a whole row, so the
   nth-child count no longer tracks which item is actually alone on its row.
   Counting ten children there, the last one matches 3n+1 and gets shoved to
   the middle column while two siblings sit beside it. */
.dp .dp-grid3:not(.dp-gallery) > *:last-child:nth-child(3n + 1) { grid-column: 2; }
.dp .dp-grid3 > * { min-width: 0; }

@media (max-width: 700px) {
  /* The engine drops to one column here, where a forced column 2 would break
     the layout outright. */
  .dp .dp-grid3:not(.dp-gallery) > *:last-child:nth-child(3n + 1) { grid-column: auto; }
}

/* The results disclaimer, directly under the photos where the claim is made.
   The engine has no field for it, so it is placed here; the same statement is
   also written out in full in the FAQ, in real selectable text. */
.dp .dp-gallery::after {
  content: "Real students who shared their own updates. These results came from applying the program consistently over time, not in 15 to 30 days. Results may vary.";
  grid-column: 1 / -1;
  margin-top: 6px;
  color: var(--dp-muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* ---- Shadows tuned for a light page read as grey haze on a dark one. ---- */
.dp .dp-video { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); }

/* The device mockup is a transparent PNG. A radius and a drop shadow trace its
   rectangular bounding box rather than the artwork, leaving a faint floating
   box around it. Matched on the file rather than on the hero, because the
   mockup now sits in the "what you get" split instead. */
.dp .dp-image[src*="course-mockup"] {
  border-radius: 0;
  box-shadow: none;
}

/* ---- The coach's own transformation, in the story. ----------------------
   The story block has no image slot: it renders its paragraphs, the compare
   cards, a button and a sidebar, and nothing else. The engine cannot be edited
   to add one, so the photo is painted into the top of that sidebar, which sits
   level with the opening line of the story. */
.dp .dp-two .dp-side::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 3;
  background: url("/proof/coach-transformation.png") center / cover no-repeat;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  /* .dp-side is a grid, so both pseudo-elements are grid items. Without an
     explicit order the caption would land after the quote card instead of
     under the photo. */
  order: -2;
}

/* The caption, carrying the same qualifier used under the gallery. A
   transformation photo on a page headlined "15-30 Days" needs it nearby. */
.dp .dp-two .dp-side::after {
  content: "Coach Lyron's own transformation, built over time with the same system. Results may vary.";
  display: block;
  margin-top: -4px;
  color: var(--dp-muted);
  font-size: 13.5px;
  line-height: 1.55;
  order: -1;
}

@media (max-width: 820px) {
  /* The two columns stack here, which drops the sidebar — and the photo with
     it — below the story text, the compare cards and the button. The photo
     belongs with the opening line, so on small screens it is painted at the
     top of the story column instead and the sidebar version is switched off.
     The padding reserves the 4:3 image area; the caption is the element's own
     text, sitting just beneath it. */
  .dp .dp-two .dp-side::before,
  .dp .dp-two .dp-side::after { content: none; }

  .dp .dp-two > div:first-child::before {
    content: "Coach Lyron's own transformation, built over time with the same system. Results may vary.";
    display: block;
    padding-top: 75%;
    margin-bottom: 22px;
    background: url("/proof/coach-transformation.png") top center / 100% auto no-repeat;
    border-radius: 14px;
    color: var(--dp-muted);
    font-size: 13.5px;
    line-height: 1.55;
  }
}

/* The mockup is in the hero again. The engine also writes it beside the lesson
   list, where a second identical copy a few sections later just reads as a
   mistake — but the setting has to stay pointed at the mockup because the
   checkout takes its product shot from the same field. So the duplicate is
   hidden here and the lesson list takes the full width. */
.dp .dp-split { grid-template-columns: 1fr; }
.dp .dp-split > .dp-image { display: none; }