/* products.css — composed from _fragments/, do not edit fragments after this point */

/* ═══ level1 ═══ */
/* ==========================================================================
   LEVEL 1 — free PDF capture (top of /products)
   Prefix: l1-  ·  relies on global tokens + .wrap/.btn/.mono utilities
   ========================================================================== */

.l1-section {
  padding-block: clamp(var(--s5), 6vw, var(--s7));
}

/* The page's one pastel-wash moment — never a button, never text fill */
.l1-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: center;
  background: linear-gradient(120deg, #F3D9C9, #DDE1F2, #CDE5EE);
  border-radius: 20px;
  padding: clamp(var(--s5), 5.5vw, var(--s8)) clamp(var(--s4), 4.5vw, var(--s7));
}

/* --- Chip ------------------------------------------------------------------ */
.l1-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--teal-tint, #E3F4F2);
  color: var(--teal-deep, #0F7A6E);
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .4375rem .875rem .4375rem .6875rem;
}
.l1-chip__dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal, #2BB3A3);
}

/* --- Headline + lede ------------------------------------------------------- */
.l1-title {
  margin-top: var(--s4);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.125rem, 4.6vw, 3.375rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink, #17181A);
  text-wrap: balance;
  max-width: 16ch;
}
.l1-lede {
  margin-top: var(--s4);
  max-width: 52ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--body, #4B5254);
}

/* --- Capture form ---------------------------------------------------------- */
.l1-form {
  margin-top: var(--s5);
  max-width: 440px;
  display: grid;
  gap: var(--s3);
}
.l1-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.l1-field { display: grid; gap: .375rem; min-width: 0; }

.l1-label {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--body, #4B5254);
}

.l1-input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink, #17181A);
  background: #FFFFFF;
  border: 1.5px solid #E1E7E7;
  border-radius: 12px;
  padding: .75rem .9375rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.l1-input::placeholder { color: var(--faint, #9AA0A0); }
.l1-input:focus {
  outline: none;
  border-color: var(--teal, #2BB3A3);
  box-shadow: 0 0 0 3px var(--teal-tint, #E3F4F2);
}

/* Honeypot — visually hidden, still submittable by bots */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.l1-submit { justify-self: start; margin-top: .25rem; }

/* Confirmation swap target (widgets.js removes [hidden]) */
.l1-form-done {
  background: #FFFFFF;
  border: 1.5px solid var(--teal, #2BB3A3);
  border-radius: 12px;
  padding: var(--s3) var(--s4);
  font-size: 1rem;
  font-weight: 500;
  color: var(--teal-deep, #0F7A6E);
  box-shadow: 0 10px 26px rgba(23,24,26,.07);
}

/* --- PDF thumbnail placeholder --------------------------------------------- */
.l1-preview { display: grid; justify-items: center; }

.l1-thumb {
  width: min(340px, 100%);
  background: #FFFFFF;
  border-radius: 14px;
  padding: var(--s3);
  box-shadow: 0 10px 26px rgba(23,24,26,.07);
  transform: rotate(1.5deg);
}

/* Stylized page-1 mock — decorative only */
.l1-mock__page {
  display: flex;
  flex-direction: column;
  gap: .6875rem;
  aspect-ratio: 17 / 22;
  background: #FFFFFF;
  border: 1px solid var(--hairline, #E8ECEC);
  border-radius: 8px;
  padding: 1.375rem 1.25rem;
}
.l1-mock__tag {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #6E7276);
  margin-bottom: .25rem;
}
.l1-mock__bar {
  display: block;
  height: 8px;
  width: var(--w, 100%);
  border-radius: 999px;
  background: var(--hairline, #E8ECEC);
}
.l1-mock__bar--title {
  height: 14px;
  width: 72%;
  background: #D6DCDC;
  margin-bottom: .25rem;
}
/* The one annotation moment — teal-mist highlight block */
.l1-mock__note {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--teal-tint, #E3F4F2);
  border-left: 3px solid var(--teal, #2BB3A3);
  border-radius: 6px;
  padding: .6875rem .75rem;
  margin-block: .125rem;
}
.l1-mock__bar--note { background: rgba(15,122,110,.28); height: 7px; }

.l1-caption {
  margin-top: var(--s3);
  font-size: .875rem;
  color: var(--muted, #6E7276);
  text-align: center;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 767px) {
  .l1-panel {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
  .l1-title { max-width: none; }
  .l1-form { max-width: none; }
  .l1-thumb { transform: none; width: min(300px, 100%); }
  .l1-submit { justify-self: stretch; width: 100%; }
}
@media (max-width: 420px) {
  .l1-form__row { grid-template-columns: 1fr; }
}

/* ═══ level2 ═══ */
/* ==========================================================================
   Level 2 — Contract Review section (.cr-)
   Shared grid + complete base card. Level 3 adds only .cr-card--senior
   overrides on top of this base.
   ========================================================================== */

/* Section heading: sentence case copy, weight capped at 600, measure ≤640px */
.cr-heading { font-weight: 600; }
.cr-intro {
  margin-top: var(--s3);
  max-width: var(--measure);
  margin-inline: auto;
}

/* --- Grid: two columns ≥900px, stacked below ------------------------------ */
.cr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
  align-items: stretch; /* senior card may elevate; base never constrains it */
}
@media (min-width: 900px) {
  .cr-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Base card (complete surface — senior variant only overrides) --------- */
.cr-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #FFFFFF;
  border: 1px solid #E8ECEC;
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: var(--s5);
}

/* Icon tile: white 12px-radius tile, soft shadow, single accent glyph */
.cr-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E8ECEC;
  box-shadow: 0 6px 16px rgba(23, 24, 26, .07);
  color: var(--sky); /* glyph accent — Redline card: sky #4A90E2 */
  margin-bottom: var(--s4);
}
.cr-icon svg { display: block; }

/* Card typography */
.cr-card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cr-card__price {
  font-family: var(--display);
  font-weight: 600;
  /* proportional figures: tabular cells give the comma a full digit width
     and "$2,000" renders gappy at display size; tabular stays for columns */
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-top: var(--s1);
}
.cr-card__what {
  margin-top: var(--s3);
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--body);
  max-width: 52ch;
}

/* Chip: teal mist bg, deep teal text, solid 7px dot */
.cr-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--s3);
  background: #E3F4F2;
  color: #0F7A6E;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  padding: .375rem .875rem;
  white-space: nowrap;
}
.cr-chip__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Chip row — senior card carries two chips (turnaround + no meeting) */
.cr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.cr-chips .cr-chip { margin-top: var(--s3); }

/* Tier comparison table under the two cards */
.cr-compare {
  margin-top: var(--s6);
  max-width: 820px;
  margin-inline: auto;
}
.cr-compare .data-table th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Deliverables list */
.cr-list {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}
.cr-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 52ch;
}
.cr-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

/* Boundary line — matter-of-fact, quiet. margin-top:auto pins the
   boundary + CTA pair to the card bottom so both cards' buttons align. */
.cr-boundary {
  margin-top: auto;
  padding-top: var(--s4);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
}
.cr-card__cta { margin-top: var(--s4); }

@media (max-width: 420px) {
  .cr-card { padding: var(--s4); }
  .cr-card__cta { align-self: stretch; }
}

/* ═══ level3 ═══ */
/* ==========================================================================
   Level 3 — Full Contract Review (senior card) + /thank-you/review page.
   Scope: .cr-card--senior overrides on top of level2.css, plus l3- styles
   for thank-you-review.html.
   ========================================================================== */

/* --- Senior card ---------------------------------------------------------- */
.cr-card--senior {
  position: relative;
  overflow: hidden;
  border-color: rgba(43, 179, 163, .35);
  box-shadow: 0 10px 26px rgba(23, 24, 26, .07);
}

/* The signature gradient — its single appearance on the products page.
   A slim progress-bar accent across the top of the card. Never a button. */
.cr-card--senior::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), var(--sky));
}

/* Slightly raised beside the Redline card on desktop */
@media (min-width: 900px) {
  .cr-card--senior { transform: translateY(-4px); }
}

/* Head row: icon tile left, flagship chip right */
.cr-card--senior .cr-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
}
.cr-card--senior .cr-card__head .cr-chip { margin-top: 0; }

/* Glyph accent — senior card: teal */
.cr-card--senior .cr-icon { color: var(--teal); }

/* Foot pins guarantee + CTA to the card bottom so both cards' buttons align
   (mirrors .cr-boundary's margin-top:auto in the base card). */
.cr-card--senior .cr-card__foot {
  margin-top: auto;
  padding-top: var(--s4);
  width: 100%;
}

/* Guarantee strip — teal mist, verbatim promise from the guarantee section */
.cr-card--senior .cr-guarantee {
  background: var(--teal-tint);
  border: 1px solid rgba(43, 179, 163, .28);
  border-radius: 12px;
  padding: var(--s3) var(--s4);
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--body);
}
.cr-card--senior .cr-guarantee__label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--teal-deep);
  margin-bottom: .25rem;
}
.cr-card--senior .cr-guarantee strong {
  color: var(--ink);
  font-weight: 600;
}

/* Primary CTA — ink pill from .btn, full width on the flagship */
.cr-card--senior .cr-card__cta {
  margin-top: var(--s4);
  align-self: stretch;
  width: 100%;
}

/* --- /thank-you/review ---------------------------------------------------- */
.l3-thanks { padding-block: var(--s7) var(--s8); }
.l3-thanks__intro {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.l3-steps {
  display: grid;
  gap: var(--s4);
  max-width: 780px;
  margin: var(--s6) auto 0;
}
.l3-step {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--s5);
}
.l3-step h3 { margin-top: var(--s1); font-weight: 600; }
.l3-step .prose { margin-top: var(--s2); }
.l3-step .prose a {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
}
.l3-step .prose a:hover { text-decoration: underline; }

.l3-note {
  font-size: .9375rem;
  color: var(--muted);
}

.l3-cta {
  margin-top: var(--s4);
}

@media (max-width: 420px) {
  .l3-step { padding: var(--s4); }
}

/* ═══ level4 ═══ */
/* ==========================================================================
   LEVEL 4 — The Physicians' Lounge (waitlist mode)
   All classes prefixed l4-. Neutral canvas + mists only — no gradients
   (Level 3 owns the page's single gradient moment). Violet is this
   section's chip accent; tools carry one saturated glyph each.
   ========================================================================== */

.l4-section {
  --l4-violet:      #7B61FF;
  --l4-violet-deep: #5B45D9;  /* readable deep violet for text on mist */
  --l4-violet-mist: #EEEAFD;

  background: #FBFCFC;
  padding-block: var(--s8);
  border-top: 1px solid var(--hairline);
}

/* --- Header ---------------------------------------------------------------- */
.l4-head {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}

.l4-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--l4-violet-deep);
  background: var(--l4-violet-mist);
  border-radius: 999px;
  padding: .375rem .875rem;
  margin-bottom: var(--s4);
}
.l4-chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--l4-violet);
}

.l4-title {
  font-weight: 600; /* Lounge headlines stay <= 600 */
}

.l4-lede {
  margin-top: var(--s3);
  max-width: var(--measure);
  margin-inline: auto;
}

.l4-who {
  margin-top: var(--s3);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--body);
}

/* --- Pricing card ----------------------------------------------------------- */
.l4-pricing {
  max-width: 820px;
  margin: var(--s6) auto 0;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.l4-pricing__head {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--hairline);
  background: #FBFCFC;
}
.l4-pricing__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.l4-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.l4-plan {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: var(--s4);
}
.l4-plan + .l4-plan { border-left: 1px solid var(--hairline); }

.l4-plan__name {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.l4-plan__price {
  display: flex;
  align-items: baseline;
  gap: .125rem;
  color: var(--ink);
}
.l4-num {
  font-family: var(--display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 1.75rem;
  color: var(--ink);
}
.l4-num--sm { font-size: 1em; letter-spacing: -0.01em; }
.l4-per {
  font-size: .9375rem;
  color: var(--muted);
}
.l4-plan__meta {
  font-size: .875rem;
  line-height: 1.55;
  color: var(--body);
}

.l4-perks {
  list-style: none;
  margin: 0;
  padding: var(--s4);
  border-top: 1px solid var(--hairline);
  background: #FBFCFC;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.l4-perk {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--body);
}
.l4-perk strong { color: var(--ink); font-weight: 600; }
.l4-perk__dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--l4-violet);
  margin-top: .5rem;
}

/* --- Member tools ------------------------------------------------------------ */
.l4-tools { margin-top: var(--s6); }

.l4-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}

.l4-tool {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: var(--s4);
}

.l4-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  box-shadow: 0 4px 12px rgba(23,24,26,.07);
  margin-bottom: var(--s3);
}
.l4-glyph { width: 22px; height: 22px; }
.l4-glyph--teal   { color: var(--teal); }
.l4-glyph--sky    { color: var(--sky); }
.l4-glyph--coral  { color: var(--orange); }
.l4-glyph--violet { color: var(--l4-violet); }

.l4-tool__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.l4-tool__text {
  margin-top: .5rem;
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--body);
}

/* --- CTA --------------------------------------------------------------------- */
.l4-cta {
  margin-top: var(--s6);
  text-align: center;
}
.l4-cta__note {
  margin-top: var(--s3);
  font-size: .875rem;
  color: var(--muted);
}

/* --- Responsive --------------------------------------------------------------- */
@media (max-width: 980px) {
  .l4-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .l4-section { padding-block: var(--s7); }
  .l4-plans { grid-template-columns: 1fr; }
  .l4-plan + .l4-plan { border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .l4-grid { grid-template-columns: 1fr; }
}

/* ═══ brand v2: kit duotone icons render as imgs inside the tiles ═══ */
.cr-icon img, .l4-tile img { display: block; }

/* ═══ playbook ═══ */
/* ==========================================================================
   PLAYBOOK — $97 digital download (between Level 1 and Contract Review)
   Prefix: pb-  ·  violet is this card's accent, mist chip only
   ========================================================================== */

.pb-section {
  --pb-violet:      #7B61FF;
  --pb-violet-deep: #5B45D9;
  --pb-violet-mist: #EEEAFD;
  padding-block: clamp(var(--s5), 5vw, var(--s7));
}

.pb-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--hairline, #E8ECEC);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  padding: clamp(var(--s5), 5vw, var(--s7)) clamp(var(--s4), 4.5vw, var(--s7));
}

.pb-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--pb-violet-mist);
  color: var(--pb-violet-deep);
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .4375rem .875rem .4375rem .6875rem;
}
.pb-chip__dot {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pb-violet);
}

.pb-title {
  margin-top: var(--s4);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

/* Price — Schibsted data moment, same treatment as the review cards */
.pb-price {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.875rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-top: var(--s1);
}

.pb-what {
  margin-top: var(--s3);
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--body);
  max-width: 52ch;
}

.pb-list {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}
.pb-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 52ch;
}
.pb-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pb-violet);
}

.pb-cta { margin-top: var(--s5); }
.pb-note {
  margin-top: var(--s2);
  font-size: .875rem;
  color: var(--muted);
}

/* Cover in a floating card, mirroring the Level 1 thumb's tilt */
.pb-preview { display: grid; justify-items: center; }
.pb-cover {
  width: min(440px, 100%);
  background: #FFFFFF;
  border: 1px solid var(--hairline, #E8ECEC);
  border-radius: 14px;
  padding: var(--s3);
  box-shadow: 0 10px 26px rgba(23,24,26,.07);
  transform: rotate(-1.5deg);
}
.pb-cover__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--hairline, #E8ECEC);
}
.pb-caption {
  margin-top: var(--s3);
  font-size: .875rem;
  color: var(--muted);
  text-align: center;
}

/* One-line upsell under the free-PDF form */
.l1-upsell {
  margin-top: var(--s4);
  font-size: .9375rem;
  color: var(--body);
}
.l1-upsell a {
  color: var(--teal-deep);
  font-weight: 600;
  text-decoration: none;
}
.l1-upsell a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .pb-panel { grid-template-columns: 1fr; gap: var(--s5); }
  .pb-cover { transform: none; width: min(360px, 100%); }
  .pb-cta { align-self: stretch; width: 100%; text-align: center; }
}

/* --- /thank-you/playbook --------------------------------------------------- */
.pbty { padding-block: var(--s7) var(--s8); }
.pbty__intro {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.pbty__email {
  margin-top: var(--s3);
  font-size: .9375rem;
  color: var(--muted);
}
.pbty__dl { margin-top: var(--s5); }
.pbty__fallback {
  margin-top: var(--s3);
  font-size: .875rem;
  color: var(--muted);
}
.pbty__fallback a { color: var(--teal-deep); font-weight: 600; text-decoration: none; }
.pbty__fallback a:hover { text-decoration: underline; }

/* Next step — the Redline card */
.pbty-next {
  max-width: 620px;
  margin: var(--s7) auto 0;
  background: var(--canvas, #FBFCFC);
  border: 1px solid var(--hairline, #E8ECEC);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: var(--s5);
  text-align: left;
}
.pbty-next__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pbty-next__title {
  margin-top: var(--s2);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pbty-next__price {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: var(--s1);
}
.pbty-next__text {
  margin-top: var(--s3);
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--body);
}
.pbty-next__cta { margin-top: var(--s4); }

/* ==========================================================================
   Product-card thumbnail (Redline + Full Review). Same crop, same frame;
   the Full Review adds a DOM overlay via data-walkthrough="true".
   Source: assets/products/contract-review-annotated-source.png (never served)
   ========================================================================== */
.cr-thumb {
  width: 100%;
  margin: var(--s4) 0 0;
}
.cr-thumb__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  background: #FFFFFF;
  transition: transform 200ms ease-out;
}
.cr-thumb__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 20%;
}
.cr-thumb__fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 60%, rgba(255, 255, 255, .92) 100%);
}
@media (hover: hover) and (pointer: fine) {
  .cr-card:hover .cr-thumb__frame { transform: scale(1.02); }
  .cr-card:hover .cr-thumb__play { transform: translate(-50%, -50%) scale(1.06); }
}
.cr-thumb__caption {
  margin-top: var(--s2);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Overlay: pure decoration, CSS-gated on the data attribute */
.cr-thumb__play,
.cr-thumb__chip { display: none; pointer-events: none; }
.cr-thumb[data-walkthrough="true"] .cr-thumb__play {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 16px rgba(15, 23, 42, .24);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease-out;
}
.cr-thumb__tri {
  width: 0;
  height: 0;
  margin-left: 2px; /* optical centering */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 18px solid var(--teal);
}
.cr-thumb[data-walkthrough="true"] .cr-thumb__chip {
  display: inline-block;
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(15, 23, 42, .86);
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .cr-thumb__frame,
  .cr-thumb__play { transition: none; }
  .cr-card:hover .cr-thumb__frame { transform: none; }
  .cr-card:hover .cr-thumb__play { transform: translate(-50%, -50%); }
}