/* Offer pages (/ai-skills-for-business, /3-ai-tips, its thank-you page, and the freebie's failure
   pages, which the functions serve): the loud sub-style. Composes components.css; this file only
   lines the page up on one column and lays out the few blocks that sit side by side. */

@layer sm.page {
  /* A centred hero reads well on a wide screen; on a phone the label wraps, so it starts left. */
  @media (max-width: 47.99em) {
    .sm-hero--center, .sm-hero--center .sm-hero__body { justify-items: start; text-align: start; }
  }

  /* Phones: the landing's long booking label keeps to one line; smallest phones also trade side padding. */
  @media (max-width: 30rem) { .sm-hero--center .sm-btn--lg { font-size: var(--rs-step-0); } }

  /* Phones: a shorter hero, so the booking button is on the first screen (360–414px wide). */
  @media (max-width: 30rem) {
    #ai-skills-for-business .sm-hero { padding-block-start: var(--rs-space-6); }
    #ai-skills-for-business .sm-hero h1 { font-size: var(--rs-step-4); }
    #ai-skills-for-business .sm-hero .sm-lead { font-size: var(--rs-step-0); }
  }
  .offer-nowrap { white-space: nowrap; }   /* "one-on-one" never breaks at its hyphen */

  /* ── Session landing (/ai-skills-for-business/) ── */
  /* The return line (offer-journey.js fills it): one calm line at the top of the hero, body size. */
  .offer-return:not(:empty) { max-inline-size: var(--rs-measure-narrow); font-size: var(--rs-step-0); text-align: start; }
  .offer-return a { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }

  /* The five steps beside "What to bring" once both fit; stacked, the steps come first. */
  .offer-session { display: grid; gap: var(--rs-space-6) var(--rs-space-7); align-items: start; }
  @media (min-width: 60rem) { .offer-session { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
  .offer-session .sm-steps > li > span { max-inline-size: var(--rs-measure); }
  .offer-bring { --rs-stack-gap: var(--rs-space-4); }
  .offer-bring dfn { font-style: italic; }   /* Business Snapshot is taught here, where it first appears */

  /* Plain bulleted lists ("What it isn't", "Before you pay"): the ticks are for what you get. */
  .offer-list { display: grid; gap: var(--rs-space-2); padding-inline-start: 1.25em; }
  .offer-list li::marker { color: var(--rs-fg-accent); }
  .offer-isnt { max-inline-size: var(--rs-measure); }
  .offer-isnt .sm-subheading { font-size: var(--rs-step-1); }

  /* An answer with two paragraphs keeps them apart. */
  .offer-faq .sm-faq details > div { display: grid; gap: var(--rs-space-3); }
  .offer-faq .sm-faq a { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }

  /* The booking band closes the page: the price card, under its awning, centred under its heading. */
  .offer-booking { justify-items: center; }
  .offer-booking > .sm-section-head { justify-items: center; text-align: center; }
  .offer-booking > .sm-section-head .sm-h2::after { margin-inline: auto; }   /* the underline centres with its heading */
  .offer-booking > .sm-price-card { inline-size: 100%; max-inline-size: 28rem; }
  /* Phones: the booking label keeps to one line from 360px up (320 still wraps). */
  @media (max-width: 30rem) {
    .offer-booking > .sm-price-card { padding-inline: var(--rs-space-4); }
    .offer-booking .sm-btn { padding-inline: var(--rs-space-4); }
  }

  /* Checkout and terms: the title sits inside the scrolling body (see the HTML), so on a phone
     with large text only the buttons stay fixed and the reading area keeps its height. */
  :is(#dialog-offer-checkout, #dialog-offer-terms)[open] { grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
  :is(#dialog-offer-checkout, #dialog-offer-terms) .sm-dialog__body > .sm-dialog__head { padding: var(--rs-space-5) 0 0; }
  :is(#dialog-offer-checkout, #dialog-offer-terms) :is(h2, .sm-label) { overflow-wrap: anywhere; }

  /* ── Guide landing (/3-ai-tips/): the promise gets the wider column, the form stays form-sized ── */
  .offer-guide-hero { grid-template-columns: minmax(0, 1fr); }
  .offer-guide-hero__text { max-inline-size: var(--rs-measure-narrow); color: var(--rs-fg-2); }
  .offer-guide-form { inline-size: 100%; max-inline-size: 36rem; justify-self: start; }   /* stacked: as wide as the headline above it */
  /* D20: the way out gets its own 44px line, still a text link, not a second poppy button. */
  .offer-guide-form .sm-status .sm-link-action { display: flex; inline-size: fit-content; text-decoration: underline; }
  @media (min-width: 60rem) {
    .offer-guide-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .offer-guide-hero > .sm-hero__body { grid-area: 1 / 1; }
    .offer-guide-form { grid-area: 1 / 2 / span 2; max-inline-size: 28rem; justify-self: end; }
    /* "See what's inside" follows the form in the source (and the tab order), but on a wide
       screen it sits under the promise, at the body's own rhythm. */
    .offer-guide-hero > .sm-link-action { grid-area: 2 / 1; align-self: start; margin-block-start: calc(var(--rs-space-4) - var(--rs-space-6)); }
  }

  /* Teaching copy keeps a reading measure at the offer's body size. */
  .offer-intro { max-inline-size: var(--rs-measure); font-size: var(--rs-x-body-size); }
  .offer-intro dfn { font-style: italic; }   /* the two taught words, where they are taught */
  .offer-intro:is(.sm-stack) { --rs-stack-gap: var(--rs-space-3); }

  /* Three tips: white feature cards, each led by a big forest numeral, like the guide's pages. */
  /* One column until all three fit side by side: never a 2 + 1 orphan on tablets. */
  .offer-tips, .offer-who { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .offer-tips, .offer-who { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .offer-tips > .sm-card--feature::before {
    content: counter(rs-feature);
    display: block;
    font: var(--rs-numeral-weight) var(--rs-step-5) / 0.9 var(--rs-numeral-font);
    font-variation-settings: var(--rs-numeral-vf);
    letter-spacing: var(--rs-numeral-tracking);
    font-variant-numeric: tabular-nums lining-nums;   /* the tip names line up beside 1, 2 and 3 on phones */
    color: var(--rs-x-numeral-color);
  }
  .offer-tips .sm-card__title { font-size: var(--rs-step-1); }
  @media (max-width: 47.99rem) {                             /* phones and small tablets: the numeral beside the tip, so three rows stay short */
    .offer-tips { gap: var(--rs-space-3); }
    .offer-tips > .sm-card--feature { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--rs-space-4); padding: var(--rs-space-4); }
    .offer-tips > .sm-card--feature::before { grid-row: span 2; font-size: var(--rs-step-4); }
  }

  /* The peek beside what you get; the peek fades out, because the full prompt is the reward. */
  .offer-inside__more { display: grid; gap: var(--rs-space-6) var(--rs-space-7); align-items: start; }
  @media (min-width: 56rem) { .offer-inside__more { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
  .offer-peek .sm-prompt__text { mask-image: linear-gradient(to bottom, #000 55%, rgb(0 0 0 / 0.7)); }   /* still fades, but the last line keeps ≥4.5:1 (ink at 70% on white measures 5.5:1) */

  .offer-who { padding: 0; list-style: none; align-items: stretch; }
  .offer-who .sm-card__title { font-size: var(--rs-step-1); }

  /* About: who we are (the session adds "Your guide", the J avatar), then the three proof claims, kept apart as three separate facts. */
  .offer-about { display: grid; gap: var(--rs-space-7); }
  .offer-about .sm-bio > div { flex-basis: 20rem; }
  .offer-proof { padding: 0; list-style: none; }

  .offer-faq > .sm-faq { max-inline-size: var(--rs-width-reading); }
  .offer-closing__link { font-size: var(--rs-step-2); }

  /* ── Guide thank-you (/3-ai-tips/thank-you/): first win, then the download, then done ── */
  /* A compact hero: on a phone the prompt card starts within the first screen or two. */
  .offer-thanks-hero { padding-block: var(--rs-space-6) var(--rs-space-5); }
  .offer-thanks-hero h1 { font-size: var(--rs-step-5); }
  /* The delivery line is a note, not the lead: a long email line keeps the Copy button in the first screen. */
  .offer-thanks-hero [data-email-delivery-status] { font-size: var(--rs-step-0); }
  .offer-thanks-hero a { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }
  .offer-snapshot { padding-block-start: var(--rs-space-6); }
  @media (min-width: 48rem) {
    .offer-thanks-hero { padding-block: var(--rs-space-7) var(--rs-space-6); }
    .offer-snapshot { padding-block-start: var(--rs-space-7); }
  }
  /* The card, then its steps below it (the copy says "the card above" and "the steps below");
     wide screens set the notes beside the steps. */
  .offer-snapshot__card { max-inline-size: 48rem; }
  .offer-snapshot__how { display: grid; gap: var(--rs-space-6) var(--rs-space-7); align-items: start; }
  @media (min-width: 60rem) {
    .offer-snapshot__how { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .offer-snapshot__notes { padding-block-start: calc(var(--rs-step-2) * 1.1 + var(--rs-stack-gap, var(--rs-space-4))); }   /* level with the first step, under "How to do it" */
  }
  /* Stacks inside a loose stack inherit its gap; these read as one block each. */
  :is(.offer-snapshot__card, .offer-snapshot__how > .sm-stack, .offer-inside__more > .sm-stack) { --rs-stack-gap: var(--rs-space-4); }
  /* The Copy message sits under the card's bar, next to the button, so it is on screen at the tap. */
  .offer-prompt__status:not(:empty) { margin: var(--rs-space-3) var(--rs-space-4) 0; }
  /* Live regions stay in the accessibility tree while empty, so the first message is announced. */
  .offer-prompt__status:empty { display: block; }
  .offer-guide-form > .sm-status:empty { display: block; position: absolute; }   /* absolute: no extra grid gap in the form */
  .offer-snapshot__notes > p { max-inline-size: var(--rs-measure); }
  .offer-steps > li { align-items: start; }
  .offer-steps > li > p { padding-block-start: max(0px, (2.5rem - 1lh) / 2); }   /* the first line centres on the number disc */
  @media (max-width: 24rem) { .offer-steps > li { padding-inline: var(--rs-space-3); column-gap: var(--rs-space-3); } }   /* smallest phones: give the words the width, not the padding */
  .offer-steps a { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }
  /* Inline links a thumb must hit: a 44px hit area that doesn't move the line; position keeps
     the lower half above the next line's text. */
  :is(.offer-thanks-hero, .offer-steps, .offer-done__text, .offer-faq .sm-faq, #dialog-offer-checkout .sm-dialog__body, #dialog-offer-recovery .sm-dialog__body) a { position: relative; padding-block: calc((var(--rs-target) - 1.2em) / 2); }

  .offer-download > .sm-stack { max-inline-size: var(--rs-measure); }
  @media (max-width: 24rem) { .offer-download .sm-btn--lg { font-size: var(--rs-step-0); } }   /* the smallest phones keep "Download the guide (PDF)" on one line */

  .offer-done { display: grid; gap: var(--rs-space-7); align-items: start; }
  @media (min-width: 56rem) { .offer-done { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } }
  .offer-done__text > p { max-inline-size: var(--rs-measure); }
  .offer-done__text a { overflow-wrap: anywhere; }

  /* ── Freebie failure pages (served by the functions): the h1, one line, the button, the support line ── */
  main:has(> .offer-failure) { display: grid; }   /* the hero fills the window above the footer */
  .offer-failure { grid-template-columns: minmax(0, 1fr); }
  .offer-failure h1 { font-size: var(--rs-step-5); }
  .offer-failure .sm-hero__body > p { max-inline-size: var(--rs-measure); }
  .offer-failure .sm-hero__body > p a { position: relative; padding-block: calc((var(--rs-target) - 1.2em) / 2); color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); overflow-wrap: anywhere; }

  /* The closed offer footer: the wordmark, the support line and the copyright wrap as a group. */
  .sm-masthead--foot a { overflow-wrap: anywhere; }
}