/* Bray New Student Offer -- page-specific styles. Header, footer, .btn,
   .divider primitives and the default transparent header overlay live in
   site.css / dividers.css; the 6 offer-form copies are styled by
   css/forms.css. Neither is edited here.

   FLUID-ENGINE GRID (Phase 6 fix 2, 17.09.26)
   -------------------------------------------
   Live builds every content section with Squarespace's "fluid engine": a
   CSS grid per section with a fixed row count, 11px row/column gaps, two
   gutter columns and an explicit grid-area for each block, at two
   breakpoints (<768px: 8 columns, rows minmax(24px, auto); >=768px: 24
   columns, rows minmax(container-width * 0.0215, auto)). Blocks sit in
   fixed rows, so empty rows and gaps are part of each section's real
   height -- which is why the earlier normal-flow build ran 100-300px
   short per section. The values below are read straight from the live
   page's own inline fluid-engine CSS (raw capture in
   claude-workspace/working-files/website-netlify-migration/wayfinder/
   raw/bray-new-student-offer.html) and checked against live Playwright
   boxes at 375x812 and 1440x900 (resolved row heights, block boxes).
   Nothing here is tuned padding: every length is live's own formula.

   Site variables live uses: --sqs-site-gutter 2vw, --sqs-mobile-site-
   gutter 6vw, --sqs-site-max-width 1400px.

   Section anatomy (live -> build):
     section.page-section    -> section.fe-section  padding-top = header
                                (hero only), padding-bottom = 6vw divider
     .content-wrapper        -> .fe-wrap            padding 3.3vmax
                                (section-height--small) or 6.6vmax
                                (--medium, "A Proven System" only)
     .fluid-engine           -> .fe .fe-sN          the grid
     .fe-block > .sqs-block  -> .fe-block           grid item + flex column
     .sqs-html-content       -> .fe-content         flex item (own block
                                formatting context, so child margins stay
                                inside it, as live)

   Type: live's own Squarespace 7.1 formulas (site.css of the live site),
   so sizes track the viewport exactly as live does -- on phones (portrait,
   <768px) font size scales with viewport HEIGHT, capped at 900px:
       (X - 1) * 0.012 * min(100vh, 900px) + 1rem
   and on desktop/landscape:
       min((X - 1) * 1.2vw + 1rem, max((X - 1) * 0.012 * 1400px + 1rem, X * 1rem))
   with X = 4 (h1), 2.8 (h2), 2.2 (h3), 1.6 (h4), 1.4 (large text), 1 (body).
   Heading line-height = 1.2 * (1 + (1 - X) / 25); body text 1.5.
   At 375x812 / 1440x900 these give h1 45.232/66.4, h2 33.539/46.24,
   h3 27.693/36.16, h4 21.846/26.08, large 19.898/22.72 -- the live values.

   Colours: accent #F9AD7D (sqsrte-text-color--accent), darkAccent
   #EC6C1C. Section backgrounds sampled from the live reference: hero,
   next steps, investment and the last section use the page cream; A
   Proven System and Ready to go use peach; What You Get is navy.
   Squarespace "text highlight" spans are drawn by live as SVG shapes;
   built here per each span's own live config -- see "Text highlights"
   below. */

/* ---------- Sections ---------- */
.fe-section {
  position: relative;
  overflow: visible;
  /* -webkit-font-smoothing/-moz-osx-font-smoothing moved to site.css's
     html/body rule (Phase 7 shared polish, 17.09.26) -- every section
     inherits it now, no page-local copy needed. */
  padding: 0 0 6vw; /* live: section padding-bottom = the 6vw "rounded" divider (22.5px / 86.4px) */
}
.offer-hero { padding-top: calc(37px + 12vw); } /* live: fluid header-height formula, see site.css's header-formula comment */
@media (min-width: 800px) {
  .offer-hero { padding-top: calc(48.96875px + 2.20052vw); } /* live: fluid header-height formula, desktop segment */
}
/* Header's own 800-875.98px real live wrap band (Phase 7 tablet-fidelity
   pass) -- see site.css's .header-inner comment for the measurement;
   contact.css and bray-new-student-application-form.css already carry
   this same adjustment. */
@media (min-width: 800px) and (max-width: 875.98px) {
  .offer-hero { padding-top: calc(54.34375px + 2.20052vw); }
}
.offer-proven { background: var(--hero-cream); }
.offer-whatyouget { background: var(--text-navy); color: var(--body-bg); }
.offer-readytogo { background: var(--hero-cream); }
.offer-samestudents { padding-bottom: 0; } /* live: page-cream bg, no divider, no bottom padding */

.fe-wrap { padding: 3.3vmax 0; }
.fe-wrap--medium { padding: 6.6vmax 0; }

/* Dividers: live draws each 'rounded' divider as a cubic valley or arch,
   6vw deep, stroked 6px and NOT clipped at the section edge (the stroke
   straddles the boundary). Shape paths are inline in the HTML. */
.fe-section > .divider svg { overflow: visible; }

/* ---------- The grid ---------- */
.fe {
  --fe-gutter: calc(6vw - 11px);
  --fe-cell: calc((1400px - 11px * 7) / 8);
  display: grid;
  position: relative;
  grid-template-columns:
    minmax(var(--fe-gutter), 1fr)
    repeat(8, minmax(0, var(--fe-cell)))
    minmax(var(--fe-gutter), 1fr);
  row-gap: 11px;
  column-gap: 11px;
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 768px) {
  .fe {
    --fe-gutter: calc(2vw - 11px);
    --fe-cell: calc((1400px - 11px * 23) / 24);
    --fe-container: min(1400px, calc(100vw - 2vw * 2));
    grid-template-columns:
      minmax(var(--fe-gutter), 1fr)
      repeat(24, minmax(0, var(--fe-cell)))
      minmax(var(--fe-gutter), 1fr);
  }
}

.fe-block {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
/* live: justify-content center on three desktop cards only */
@media (min-width: 768px) {
  .fe-center-d { justify-content: center; }
}
.fe-content { flex: 0 0 auto; }

/* Card blocks: live paints the block background over the WHOLE grid
   area (the .sqs-block fills it), and pads the text by a percentage of
   the block width. */
.fe-card { border-radius: 20px; }
.fe-card--r10 { border-radius: 10px; }
.fe-card--cream { background: var(--hero-cream); color: var(--text-navy); }
.fe-card--light { background: var(--body-bg); color: var(--text-navy); }
.fe-card--orange { background: var(--orange); color: var(--text-navy); }
.fe-card--navy { background: var(--text-navy); border-radius: 25px; }
.fe-pad-3 > .fe-content { padding: 3%; }
.fe-pad-6 > .fe-content { padding: 6%; }

/* ---------- Rich text (live .sqs-html-content rules) ---------- */
.fe-content > :first-child { margin-top: 0; }
.fe-content > :last-child { margin-bottom: 0; }
.fe-content h1,
.fe-content h2,
.fe-content h3,
.fe-content h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: normal;
  margin: 32px 0;
  overflow-wrap: normal;
}
.fe-content p { margin: 16px 0; line-height: 1.5; }
.fe-content ul,
.fe-content ol { margin: 16px 0; padding: 0 0 0 40px; line-height: 1.5; }
.fe-content li { margin: 0; }
.fe-content li > p { margin: 0.5em 0; }
.fe-content strong { font-weight: 700; }
.fe-indent { margin: 0 40px; }
.fe-content .fe-empty { font-size: 16px; } /* live: an empty paragraph in the rocket box (renders one 24px line) */
.fe-content .center { text-align: center; }

.fe-content h1 { line-height: 1.056;  font-size: calc(3 * 0.012 * min(100vh, 900px) + 1rem); }
.fe-content h2 { line-height: 1.1136; font-size: calc(1.8 * 0.012 * min(100vh, 900px) + 1rem); }
.fe-content h3 { line-height: 1.1424; font-size: calc(1.2 * 0.012 * min(100vh, 900px) + 1rem); }
.fe-content h4 { line-height: 1.1712; font-size: calc(0.6 * 0.012 * min(100vh, 900px) + 1rem); }
.fe-content .lg { font-size: calc(0.4 * 0.012 * min(100vh, 900px) + 1rem); }
@media (min-width: 768px), (orientation: landscape) {
  .fe-content h1 { font-size: min(calc(3 * 1.2vw + 1rem), max(calc(3 * 0.012 * 1400px + 1rem), 4rem)); }
  .fe-content h2 { font-size: min(calc(1.8 * 1.2vw + 1rem), max(calc(1.8 * 0.012 * 1400px + 1rem), 2.8rem)); }
  .fe-content h3 { font-size: min(calc(1.2 * 1.2vw + 1rem), max(calc(1.2 * 0.012 * 1400px + 1rem), 2.2rem)); }
  .fe-content h4 { font-size: min(calc(0.6 * 1.2vw + 1rem), max(calc(0.6 * 0.012 * 1400px + 1rem), 1.6rem)); }
  .fe-content .lg { font-size: min(calc(0.4 * 1.2vw + 1rem), max(calc(0.4 * 0.012 * 1400px + 1rem), 1.4rem)); }
}

/* ---------- Colour + highlight treatments ---------- */
.fe-content .accent { color: #F9AD7D; }
.fe-content .accent-dark { color: var(--orange); }
/* Text highlights: each live span carries its own Squarespace
   TextAttributes config (shape / colour / thickness), read from the raw
   capture. Live draws them as SVG shapes; built here with CSS:
     underline(Curve) -> text-decoration at the configured thickness
     marker           -> solid background box
     cross            -> red X drawn over the text (isFront) */
.u { text-decoration: underline; }
.hl { text-decoration-line: underline; text-decoration-thickness: 0.1em; text-decoration-skip-ink: none; text-underline-offset: 0.12em; }
.hl-accent { text-decoration-color: #F9AD7D; }           /* accent (and dark-section theme colour) */
.hl-theme { text-decoration-color: currentColor; }        /* light-section theme colour */
.hl-dark { text-decoration-color: var(--orange); }        /* darkAccent */
.offer-hero-overline strong {                              /* underlineCurve, accent, 0.2em */
  text-decoration: underline;
  text-decoration-color: #F9AD7D;
  text-decoration-thickness: 0.2em;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.1em;
}
.hl-box-black { background: #000; color: #F9AD7D; padding: 0 4px; }  /* marker, section theme colour */
.hl-box-peach { background: #F9AD7D; color: var(--text-navy); padding: 0 2px; }  /* marker, accent */
.price-strike { position: relative; white-space: nowrap; }
.price-strike::after {                                     /* cross, red at 36-45% alpha, 0.1em */
  content: "";
  position: absolute;
  inset: 0.1em 0 0.05em;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.05em), rgba(250, 8, 8, 0.4) calc(50% - 0.05em), rgba(250, 8, 8, 0.4) calc(50% + 0.05em), transparent calc(50% + 0.05em)),
    linear-gradient(to bottom right, transparent calc(50% - 0.05em), rgba(250, 8, 8, 0.4) calc(50% - 0.05em), rgba(250, 8, 8, 0.4) calc(50% + 0.05em), transparent calc(50% + 0.05em));
  pointer-events: none;
}
.price-new { color: rgb(3, 205, 71); }
.fe-card--orange, .fe-card--orange * { color: var(--text-navy); }

/* ---------- Media blocks ---------- */
/* Native video: live's Plyr box is 16:9 at the block's full width, top
   of the block. */
.fe-media video { display: block; width: 100%; height: auto; }

/* YouTube facade (11 embeds, click-to-load; live's sqs-video-wrapper is a
   cover image + play icon, iframe only created on click). Live wrapper
   aspect = padding-bottom 56.5% of the block width. */
.yt-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  aspect-ratio: 200 / 113;
  overflow: hidden;
}
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-facade-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-facade-play svg { width: 33px; height: 33px; display: block; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)); }
/* live icon: Squarespace play-button@2x.png at background-size 33px -- a plain white triangle, no disc */
.yt-facade.is-playing .yt-facade-play,
.yt-facade.is-playing img { display: none; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ---------- Apply buttons (6 lightbox triggers) ----------
   live button.lightbox-handle: 16px Almarai 700, line-height normal,
   16px 20.8px padding, 10px radius (191x49). Centred in its block
   except in the hero (left). */
.fe-button .rl-lightbox-trigger {
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  padding: 16px 20.8px;
  border-radius: 10px;
}
.fe-button--left .rl-lightbox-trigger { margin: 0; }
.btn-peach { background: #F9AD7D; color: #000; }

/* ---- generated: live fluid-engine rows + per-block grid areas ---- */
.fe-s0 { grid-template-rows: repeat(26, minmax(24px, auto)); }
.fe-s1 { grid-template-rows: repeat(100, minmax(24px, auto)); }
.fe-s2 { grid-template-rows: repeat(112, minmax(24px, auto)); }
.fe-s3 { grid-template-rows: repeat(54, minmax(24px, auto)); }
.fe-s4 { grid-template-rows: repeat(81, minmax(24px, auto)); }
.fe-s5 { grid-template-rows: repeat(23, minmax(24px, auto)); }
.fe-s6 { grid-template-rows: repeat(100, minmax(24px, auto)); }
.b-hero-text { grid-area: 1/2/15/10; z-index: 1; }
.b-hero-video { grid-area: 17/2/25/10; z-index: 3; }
.b-hero-step1 { grid-area: 16/2/18/10; z-index: 2; }
.b-hero-step2 { grid-area: 24/2/26/10; z-index: 3; }
.b-hero-btn { grid-area: 25/2/27/10; z-index: 5; }
.b-proven-t1 { grid-area: 10/2/20/10; z-index: 2; }
.b-proven-v1 { grid-area: 3/2/11/10; z-index: 2; }
.b-proven-h2 { grid-area: 1/2/4/10; z-index: 1; }
.b-proven-t2 { grid-area: 27/2/36/10; z-index: 3; }
.b-proven-v2 { grid-area: 20/2/28/10; z-index: 3; }
.b-proven-v3 { grid-area: 36/2/44/10; z-index: 3; }
.b-proven-t3 { grid-area: 43/2/51/10; z-index: 4; }
.b-proven-t4 { grid-area: 58/2/67/10; z-index: 3; }
.b-proven-v4 { grid-area: 51/2/59/10; z-index: 3; }
.b-proven-t5 { grid-area: 74/2/83/10; z-index: 4; }
.b-proven-v5 { grid-area: 67/2/75/10; z-index: 4; }
.b-proven-t6 { grid-area: 90/2/99/10; z-index: 5; }
.b-proven-v6 { grid-area: 83/2/91/10; z-index: 4; }
.b-proven-btn { grid-area: 99/2/101/10; z-index: 7; }
.b-wyg-intro { grid-area: 1/2/13/10; z-index: 1; }
.b-wyg-first { grid-area: 19/2/28/10; z-index: 4; }
.b-wyg-video { grid-area: 13/2/21/10; z-index: 3; }
.b-wyg-list { grid-area: 28/2/95/10; z-index: 2; }
.b-wyg-reminder { grid-area: 95/2/110/10; z-index: 6; }
.b-wyg-btn { grid-area: 111/2/113/10; z-index: 7; }
.b-ns-h2 { grid-area: 1/2/9/10; z-index: 1; }
.b-ns-1 { grid-area: 4/2/11/10; z-index: 2; }
.b-ns-2 { grid-area: 12/2/18/10; z-index: 3; }
.b-ns-3 { grid-area: 19/2/26/10; z-index: 4; }
.b-ns-4 { grid-area: 27/2/35/10; z-index: 3; }
.b-ns-5 { grid-area: 36/2/43/10; z-index: 4; }
.b-ns-6 { grid-area: 44/2/52/10; z-index: 5; }
.b-ns-btn { grid-area: 53/2/55/10; z-index: 7; }
.b-inv-intro { grid-area: 1/2/16/10; z-index: 1; }
.b-inv-rocket { grid-area: 16/2/48/10; z-index: 2; }
.b-inv-orange { grid-area: 48/2/50/10; z-index: 4; }
.b-inv-price { grid-area: 51/2/67/10; z-index: 2; }
.b-inv-pricebox { grid-area: 67/2/73/10; z-index: 3; }
.b-inv-trial { grid-area: 74/2/82/10; z-index: 3; }
.b-rdy-card { grid-area: 2/2/10/10; z-index: 4; }
.b-rdy-apply { grid-area: 11/2/22/10; z-index: 4; }
.b-rdy-btn { grid-area: 22/2/24/10; z-index: 7; }
.b-ss-h2 { grid-area: 1/2/7/10; z-index: 1; }
.b-ss-t1 { grid-area: 14/2/24/10; z-index: 3; }
.b-ss-v1 { grid-area: 7/2/15/10; z-index: 2; }
.b-ss-v2 { grid-area: 24/2/32/10; z-index: 3; }
.b-ss-t2 { grid-area: 31/2/39/10; z-index: 4; }
.b-ss-t3 { grid-area: 46/2/57/10; z-index: 4; }
.b-ss-v3 { grid-area: 39/2/47/10; z-index: 3; }
.b-ss-v4 { grid-area: 57/2/65/10; z-index: 4; }
.b-ss-t4 { grid-area: 64/2/72/10; z-index: 4; }
.b-ss-t5 { grid-area: 79/2/89/10; z-index: 5; }
.b-ss-v5 { grid-area: 72/2/80/10; z-index: 4; }
.b-ss-h3 { grid-area: 90/2/99/10; z-index: 2; }
.b-ss-btn { grid-area: 99/2/101/10; z-index: 7; }
@media (min-width: 768px) {
  .fe-s0 { grid-template-rows: repeat(14, minmax(calc(var(--fe-container) * 0.0215), auto)); }
  .fe-s1 { grid-template-rows: repeat(31, minmax(calc(var(--fe-container) * 0.0215), auto)); }
  .fe-s2 { grid-template-rows: repeat(63, minmax(calc(var(--fe-container) * 0.0215), auto)); }
  .fe-s3 { grid-template-rows: repeat(23, minmax(calc(var(--fe-container) * 0.0215), auto)); }
  .fe-s4 { grid-template-rows: repeat(62, minmax(calc(var(--fe-container) * 0.0215), auto)); }
  .fe-s5 { grid-template-rows: repeat(20, minmax(calc(var(--fe-container) * 0.0215), auto)); }
  .fe-s6 { grid-template-rows: repeat(42, minmax(calc(var(--fe-container) * 0.0215), auto)); }
  .b-hero-text { grid-area: 1/3/14/15; }
  .b-hero-video { grid-area: 2/16/11/25; }
  .b-hero-step1 { grid-area: 1/16/3/24; }
  .b-hero-step2 { grid-area: 11/16/13/24; }
  .b-hero-btn { grid-area: 12/16/15/21; }
  .b-proven-t1 { grid-area: 9/2/17/10; }
  .b-proven-v1 { grid-area: 3/2/10/10; }
  .b-proven-h2 { grid-area: 1/7/3/21; }
  .b-proven-t2 { grid-area: 9/10/16/18; }
  .b-proven-v2 { grid-area: 3/10/10/18; }
  .b-proven-v3 { grid-area: 3/18/10/26; }
  .b-proven-t3 { grid-area: 9/18/15/26; }
  .b-proven-t4 { grid-area: 22/2/29/10; }
  .b-proven-v4 { grid-area: 16/2/23/10; }
  .b-proven-t5 { grid-area: 22/10/29/18; }
  .b-proven-v5 { grid-area: 16/10/23/18; }
  .b-proven-t6 { grid-area: 22/18/29/26; }
  .b-proven-v6 { grid-area: 16/18/23/26; }
  .b-proven-btn { grid-area: 30/11/32/17; }
  .b-wyg-intro { grid-area: 1/5/10/23; }
  .b-wyg-first { grid-area: 10/12/17/23; }
  .b-wyg-video { grid-area: 10/4/17/12; }
  .b-wyg-list { grid-area: 17/5/49/23; }
  .b-wyg-reminder { grid-area: 49/7/60/21; }
  .b-wyg-btn { grid-area: 61/11/63/17; }
  .b-ns-h2 { grid-area: 1/5/3/23; }
  .b-ns-1 { grid-area: 3/4/10/10; }
  .b-ns-2 { grid-area: 3/11/10/17; }
  .b-ns-3 { grid-area: 3/18/10/24; }
  .b-ns-4 { grid-area: 11/4/19/10; }
  .b-ns-5 { grid-area: 11/11/19/17; }
  .b-ns-6 { grid-area: 11/18/19/24; }
  .b-ns-btn { grid-area: 21/11/24/17; }
  .b-inv-intro { grid-area: 1/7/13/21; }
  .b-inv-rocket { grid-area: 13/6/33/22; }
  .b-inv-orange { grid-area: 33/7/36/21; }
  .b-inv-price { grid-area: 37/6/50/22; }
  .b-inv-pricebox { grid-area: 50/6/56/22; }
  .b-inv-trial { grid-area: 57/6/63/22; }
  .b-rdy-card { grid-area: 1/6/9/22; }
  .b-rdy-apply { grid-area: 10/6/18/22; }
  .b-rdy-btn { grid-area: 18/11/21/17; }
  .b-ss-h2 { grid-area: 1/5/6/23; }
  .b-ss-t1 { grid-area: 12/2/20/10; }
  .b-ss-v1 { grid-area: 6/2/13/10; }
  .b-ss-v2 { grid-area: 6/10/13/18; }
  .b-ss-t2 { grid-area: 12/10/19/18; }
  .b-ss-t3 { grid-area: 25/6/33/14; }
  .b-ss-v3 { grid-area: 19/6/26/14; }
  .b-ss-v4 { grid-area: 6/18/13/26; }
  .b-ss-t4 { grid-area: 12/18/18/26; }
  .b-ss-t5 { grid-area: 25/14/33/22; }
  .b-ss-v5 { grid-area: 19/14/26/22; }
  .b-ss-h3 { grid-area: 34/5/39/23; }
  .b-ss-btn { grid-area: 40/11/43/17; }
}
/* ---- end generated ---- */

/* ---------- Shared: lightbox trigger buttons + modal (6 offer-form
   copies) ---------- */

.rl-modal[hidden] { display: none; }
.rl-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22.5px;
  overflow-y: auto;
}
.rl-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.rl-modal-dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  max-width: 520px;
  width: 100%;
  margin: 40px 0;
}
@media (min-width: 800px) { .rl-modal-dialog { padding: 40px 36px; } }
.rl-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-navy);
}
.rl-modal-title { font-size: 20px; margin: 0 0 20px; padding-right: 24px; }
body.modal-open { overflow: hidden; }
.rl-modal-form { margin: 0; }