/* =========================================================================
   TopSchool brand fonts — local @font-face block.

   Imported by BaseLayout.astro alongside app-foundation.css and
   brand-tokens.css. Replaces the Google Fonts <link> previously in the head.

   Files are served from /public/fonts/ at the project root. Astro is
   mounted under base: '/solutions' (see astro.config.mjs); Vite rewrites
   the absolute url() paths below to include the base prefix at build
   time, so the production output resolves to /solutions/fonts/<file>.
   In dev, the inlined CSS still shows /fonts/ — that's fine.
   ========================================================================= */

/* ─────────── Inter (body) ─────────── */
@font-face {
  font-family: 'TopSchoolOfferInter';
  src: url('https://topschool.ai/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TopSchoolOfferInter';
  src: url('https://topschool.ai/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TopSchoolOfferInter';
  src: url('https://topschool.ai/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TopSchoolOfferInter';
  src: url('https://topschool.ai/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─────────── Satoshi (display, decks + selected display moments) ─────────── */
@font-face {
  font-family: 'TopSchoolOfferSatoshi';
  src: url('https://topschool.ai/fonts/Satoshi-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TopSchoolOfferSatoshi';
  src: url('https://topschool.ai/fonts/Satoshi-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TopSchoolOfferSatoshi';
  src: url('https://topschool.ai/fonts/Satoshi-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TopSchoolOfferSatoshi';
  src: url('https://topschool.ai/fonts/Satoshi-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.plai-offer {
  --offer-ink: var(--ts-text-ink, #0d1b2a);
  --offer-muted: var(--ts-text-primary, #464d62);
  --offer-orange: var(--ts-intent-brand-bg, #f4612b);
  --offer-border: var(--ts-border-default, #dce2ea);
  width: min(960px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  color: var(--offer-ink);
  background: var(--ts-surface-base, #fff);
  box-shadow: var(--ts-shadow-modal, 0 28px 80px #0d1b2a38);
  font-family: var(--ts-font-sans, 'Inter', sans-serif);
  overflow: hidden;
}
.plai-offer::backdrop { background: rgb(13 27 42 / 62%); }
html:has(.plai-offer[open]) { overflow: hidden; }
.plai-offer *, .plai-offer *::before, .plai-offer *::after { box-sizing: border-box; }
.plai-offer [hidden] { display: none !important; }
.plai-offer__scroll { overflow-y: auto; max-height: calc(100dvh - 48px); overscroll-behavior: contain; scrollbar-gutter: stable; }
.plai-offer__layout { display: grid; grid-template-columns: 43% 57%; }
.plai-offer__close { position: absolute; z-index: 2; inset: 10px 10px auto auto; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--offer-border); border-radius: 50%; background: #fff; color: var(--offer-ink); cursor: pointer; }
.plai-offer__close:hover { background: var(--ts-surface-sunken, #f5f7f9); }
.plai-offer :is(button, input, select, a):focus-visible { outline: 3px solid var(--ts-text-link, #067ba5); outline-offset: 3px; }
.plai-offer__story { display: flex; flex-direction: column; padding: 38px 32px 30px; background: var(--ts-surface-sunken, #f5f7f9); border-right: 1px solid var(--offer-border); }
.plai-offer__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.plai-offer__eyebrow span { border-left: 1px solid var(--ts-border-strong, #bac7d6); padding-left: 10px; font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.plai-offer h2 { margin: 0; font-family: var(--ts-font-display, 'Satoshi', sans-serif); }
.plai-offer__question { display: block; max-width: 270px; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.025em; }
.plai-offer__headline { display: block; margin-top: 10px; font-size: 64px; font-weight: 900; line-height: .99; letter-spacing: -.055em; }
.plai-offer__headline em { font-style: normal; color: var(--offer-ink); text-decoration: underline; text-decoration-color: var(--offer-orange); text-underline-offset: 8px; text-decoration-thickness: 5px; }
.plai-offer__product { margin: 24px 0 0; font-size: 14px; font-weight: 600; }
.plai-offer__description { margin: 13px 0 0; color: var(--offer-muted); font-size: 14px; line-height: 1.65; }
.plai-offer__trust { display: flex; align-items: center; gap: 6px; margin: 18px 0 26px; font-size: 11px; line-height: 1.5; font-weight: 500; white-space: nowrap; }
.plai-offer__trust svg { flex-shrink: 0; }
.plai-offer__deadline { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--offer-border); }
.plai-offer__timer-label { margin: 0 0 13px; font-size: 12px; font-weight: 600; }
.plai-offer__timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.plai-offer__timer > div { text-align: center; padding: 10px 3px 8px; border: 1px solid var(--offer-border); border-radius: 10px; background: var(--ts-surface-base, #fff); }
.plai-offer__timer strong { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plai-offer__timer span { display: block; margin-top: 4px; color: var(--offer-muted); font-size: 10px; }
.plai-offer__end { margin: 12px 0 0; color: var(--offer-muted); font-size: 11px; line-height: 1.6; }
.plai-offer__end strong { font-weight: 600; }
.plai-offer__end span { display: block; }
.plai-offer__signup { min-width: 0; padding: 38px 34px 22px; }
.plai-offer__form-intro { margin-bottom: 24px; padding-right: 18px; }
.plai-offer__step { margin: 0 0 8px; color: var(--offer-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.plai-offer__form-intro h3 { margin: 0; color: var(--offer-ink); font-family: var(--ts-font-display, 'Satoshi', sans-serif); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.035em; }
.plai-offer__form-intro > p:last-child { margin: 8px 0 0; color: var(--offer-muted); font-size: 13px; line-height: 1.5; }
.plai-offer__review-form { display: grid; gap: 17px; }
.plai-offer__names { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plai-offer__review-form :is(label, legend) { color: var(--offer-ink); font-size: 12px; font-weight: 600; line-height: 1.5; }
.plai-offer__review-form label { display: block; min-width: 0; }
.plai-offer__review-form label > span[aria-hidden] { color: var(--offer-muted); }
.plai-offer__review-form small { margin-left: 4px; color: var(--offer-muted); font-size: 10px; font-weight: 400; }
.plai-offer__review-form :is(input:not([type=radio]), select) { display: block; width: 100%; min-height: 46px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--ts-border-strong, #bac7d6); border-radius: 8px; background: #fff; color: var(--offer-ink); font: 400 16px/1.4 var(--ts-font-sans, 'Inter', sans-serif); }
.plai-offer__review-form input::placeholder { color: var(--offer-muted); opacity: .8; }
.plai-offer__review-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.plai-offer__review-form legend { margin-bottom: 5px; padding: 0; }
.plai-offer__choices label { display: flex; align-items: center; gap: 9px; min-height: 38px; font-size: 12px; font-weight: 400; cursor: pointer; }
.plai-offer__choices input { width: 18px; height: 18px; margin: 0; accent-color: var(--offer-ink); flex-shrink: 0; }
.plai-offer__submit { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; min-height: 50px; padding: 12px; border: 0; border-radius: 9px; background: var(--offer-orange); color: var(--offer-ink); font: 700 15px/1.4 var(--ts-font-sans, 'Inter', sans-serif); cursor: pointer; }
.plai-offer__submit:hover { background: var(--ts-intent-brand-bg-hover, #da4a28); }
.plai-offer__submit span { font-size: 20px; font-weight: 400; }
.plai-offer__legal { margin: -3px 0 0; color: var(--offer-muted); font-size: 11px; line-height: 1.6; }
.plai-offer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.plai-offer__review-note { margin: 15px 0 0; color: var(--offer-muted); font-size: 10px; text-align: center; }
.plai-offer__preview-result, .plai-offer__load { color: var(--offer-muted); font-size: 13px; line-height: 1.6; }

/* Official new-editor developer embed: inherited variables stay inside this
   wrapper. HubSpot owns validation, field values and CRM submission. */
.plai-offer__form-skin {
  --hsf-global__font-family: var(--ts-font-sans, 'Inter', sans-serif);
  --hsf-global__font-size: 16px;
  --hsf-global__color: var(--offer-ink);
  --hsf-background__background-color: transparent;
  --hsf-background__padding: 0;
  --hsf-background__border-width: 0;
  --hsf-row__horizontal-spacing: 14px;
  --hsf-row__vertical-spacing: 17px;
  --hsf-module__vertical-spacing: 17px;
  --hsf-field-label__font-family: var(--ts-font-sans, 'Inter', sans-serif);
  --hsf-field-label__font-size: 12px;
  --hsf-field-label__color: var(--offer-ink);
  --hsf-field-input__font-family: var(--ts-font-sans, 'Inter', sans-serif);
  --hsf-field-input__color: var(--offer-ink);
  --hsf-field-input__background-color: white;
  --hsf-field-input__border-color: var(--ts-border-strong, #bac7d6);
  --hsf-field-input__border-radius: 8px;
  --hsf-field-input__padding: 10px 12px;
  --hsf-richtext__font-family: var(--ts-font-sans, 'Inter', sans-serif);
  --hsf-richtext__font-size: 10px;
  --hsf-richtext__color: var(--offer-muted);
  --hsf-button__font-family: var(--ts-font-sans, 'Inter', sans-serif);
  --hsf-button__font-size: 15px;
  --hsf-button__width: 100%;
  --hsf-button__color: var(--offer-ink);
  --hsf-button__background-color: var(--offer-orange);
  --hsf-button__border-radius: 9px;
  --hsf-button__padding: 14px 16px;
}
.plai-offer__form-skin .hsfc-FieldLabel { font-weight: 600; }
.plai-offer__form-skin .hsfc-TextInput { min-height: 46px; font-size: 16px; }
.plai-offer__form-skin .hsfc-Button { width: 100%; min-height: 50px; font-weight: 700; }
.plai-offer__form-skin .hsfc-FieldLabel:has(.hsfc-RadioInput) { font-weight: 400; }

@media (max-width: 900px) {
  .plai-offer { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .plai-offer__scroll { max-height: calc(100dvh - 24px); scrollbar-gutter: auto; }
  .plai-offer__layout { grid-template-columns: minmax(0, 1fr); }
  .plai-offer__close { inset: 5px 5px auto auto; }
  .plai-offer__story { padding: 24px 22px 21px; border-right: 0; border-bottom: 1px solid var(--offer-border); }
  .plai-offer__eyebrow { margin-bottom: 18px; font-size: 11px; padding-right: 30px; }
  .plai-offer__eyebrow span { font-size: 9px; }
  .plai-offer__question { max-width: none; font-size: 17px; }
  .plai-offer__headline { margin-top: 5px; font-size: clamp(38px, 10.8vw, 50px); line-height: 1.1; white-space: nowrap; }
  .plai-offer__desktop-break { display: none; }
  .plai-offer__headline em { text-underline-offset: 5px; text-decoration-thickness: 3px; }
  .plai-offer__product { margin-top: 13px; font-size: 12px; }
  .plai-offer__description { margin-top: 10px; font-size: 13px; line-height: 1.55; }
  .plai-offer__trust { margin: 12px 0 16px; font-size: 10px; }
  .plai-offer__deadline { padding-top: 15px; }
  .plai-offer__timer-label { margin-bottom: 10px; font-size: 11px; }
  .plai-offer__timer { gap: 7px; }
  .plai-offer__timer > div { padding: 8px 3px 7px; }
  .plai-offer__timer strong { font-size: 25px; }
  .plai-offer__end { margin-top: 9px; font-size: 10px; }
  .plai-offer__end span { display: inline; margin-left: 5px; }
  .plai-offer__signup { padding: 22px; }
  .plai-offer__form-intro { margin-bottom: 20px; padding-right: 0; }
  .plai-offer__step { margin-bottom: 6px; font-size: 10px; }
  .plai-offer__form-intro h3 { font-size: 23px; }
  .plai-offer__form-intro > p:last-child { font-size: 12px; margin-top: 6px; }
  .plai-offer__review-form { gap: 16px; }
  .plai-offer__names { gap: 10px; }
  .plai-offer__review-form :is(label, legend) { font-size: 12px; }
  .plai-offer__review-form small { font-size: 10px; }
  .plai-offer__choices label { min-height: 44px; font-size: 12px; }
  .plai-offer__form-skin .hsfc-FieldLabel:has(.hsfc-RadioInput) { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 350px) {
  .plai-offer__story, .plai-offer__signup { padding-inline: 18px; }
  .plai-offer__names { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .plai-offer__headline { font-size: 35px; }
}

.plai-offer { --ts-font-sans: 'TopSchoolOfferInter', sans-serif; --ts-font-display: 'TopSchoolOfferSatoshi', sans-serif; }