/* Reserve course page layout layer (/reserve and /en/reserve only).
   Linked last on reserve.html and en/reserve.html, so every rule here is page-scoped and overrides the
   Webflow export, opt.css and the reserve-only sheets (lesson-facts / course-choice / lesson-prices).
   Selectors anchor on `.top-bar.introduction + main` (features), `#choose-your-ride` (choice band) and
   `#choose-your-ride + main` (fees, process, notice) so the navbar's own <main class="navbar-section">
   is never matched. The Webflow navbar is intentionally not targeted anywhere in this file. */

/* ------------------------------------------------------------------ */
/* 1. Spacing tokens (phone first; tablet >= 600px; desktop >= 992px)   */
/* ------------------------------------------------------------------ */
:root {
  --rl-space-section: 28px;  /* vertical padding of every major section */
  --rl-space-heading: 20px;  /* section heading -> its content */
  --rl-space-block: 24px;    /* between large blocks inside one section */
  --rl-space-tight: 10px;    /* small label -> the object it labels */
  --rl-radius-card: 14px;
  --rl-ink: #244966;
  --rl-teal: #1d87a2;
  --rl-price: #0f4c66;
  --rl-line: #c9dfe9;
  /* Legacy rhythm token from course-choice.css now follows the heading gap above. */
  --sg-major-heading-object-gap: var(--rl-space-heading);
}
@media (min-width: 600px) {
  :root {
    --rl-space-section: 36px;
    --rl-space-heading: 24px;
    --rl-space-block: 28px;
    --rl-space-tight: 12px;
  }
}
@media (min-width: 992px) {
  :root {
    --rl-space-section: 44px;
    --rl-space-heading: 28px;
    --rl-space-block: 32px;
    --rl-space-tight: 14px;
  }
}

/* ------------------------------------------------------------------ */
/* 1b. Content width: keep text clear of the floating contact rail      */
/* ------------------------------------------------------------------ */
/* From 601px js/sg-attr.js pins a 56px-wide WeChat/LINE/booking stack 18px from the right edge (narrower screens
   get a bottom bar instead). Content scrolls underneath it, so text must stay at least 18 + 56 + 8 = 82px from
   the right edge. The containers stay centred, so the same room is mirrored on the left:
   - the feature grid's text runs to its container edge: 100% - 2 x 84px (10px clearance); from 1280px, where
     the grid has three columns, its container may grow to 1040px (at 1280px it ends 46px left of the rail);
   - fees, process and notice keep their text at least 23px inside the container (card and panel padding):
     100% - 124px leaves at least 11px.
   The choice band (#choose-your-ride) is left untouched: its symmetric centring is an owner decision. */
@media (min-width: 601px) {
  .top-bar.introduction + main > .comtainer {
    max-width: min(728px, calc(100% - 168px));
  }
  #choose-your-ride + main > .comtainer {
    max-width: min(728px, calc(100% - 124px));
  }
}
@media (min-width: 992px) {
  .top-bar.introduction + main > .comtainer {
    max-width: min(940px, calc(100% - 168px));
  }
  #choose-your-ride + main > .comtainer {
    max-width: min(940px, calc(100% - 124px));
  }
}
@media (min-width: 1280px) {
  .top-bar.introduction + main > .comtainer {
    max-width: min(1040px, calc(100% - 168px));
  }
}

/* ------------------------------------------------------------------ */
/* 2. Section rhythm: one padding token per section, headings without  */
/*    their own extra top/bottom padding                                */
/* ------------------------------------------------------------------ */
.top-bar.introduction + main .text-card.top-title {
  padding-top: var(--rl-space-section);
  padding-bottom: var(--rl-space-section);
  row-gap: var(--rl-space-heading);
}
#choose-your-ride.sg-choice {
  padding-top: var(--rl-space-section);
  padding-bottom: var(--rl-space-section);
}
#choose-your-ride .sg-choice-heading {
  padding: 0;
  margin: 0 auto var(--rl-space-heading);
}
/* Line breaking only (no box changes): avoid a lone last character in the card summaries. Progressive. */
#choose-your-ride .sg-choice-summary {
  text-wrap: pretty;
}
#choose-your-ride + main > .comtainer {
  padding-top: var(--rl-space-section);
  padding-bottom: var(--rl-space-section);
}
/* Fees, Class Process and Notice share the left-aligned heading component. */
#choose-your-ride + main .sg-section-heading-effect {
  padding: 0;
  margin: 0 0 var(--rl-space-heading) !important;
}

/* ------------------------------------------------------------------ */
/* 3. Private Lessons heading + feature list (P8)                       */
/* ------------------------------------------------------------------ */
.top-bar.introduction + main .text-card.top-title > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sg-heading-title-gap, 12px);
  margin: 0;
  text-align: center;
}
/* Same type scale and colours as the shared section headings (was #4edce9 at 1.65:1 and a 60px English line). */
.top-bar.introduction + main .text-card.top-title .heading-title-chinese.reserve {
  width: auto;
  margin: 0;
  color: var(--rl-teal);
  font-family: var(--sg-heading-zh-font, inherit);
  font-size: var(--sg-heading-zh-size, 38px);
  line-height: var(--sg-heading-zh-line-height, 1.5);
  font-weight: 700;
  letter-spacing: .03em;
  text-shadow: 2px 2px 0 #b9f0f5;
}
.top-bar.introduction + main .text-card.top-title .heading-title-en.big {
  margin: 0;
  color: #305772;
  font-size: var(--sg-heading-en-size, 40px);
  line-height: var(--sg-heading-en-line-height, 1);
}
.top-bar.introduction + main .icon-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  gap: 22px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.top-bar.introduction + main .lesson-wapper {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
/* The Lottie containers keep their markup and data attributes; only the box size changes. */
.top-bar.introduction + main .lesson-icon {
  flex: none;
  width: 56px;
  height: 56px;
}
.top-bar.introduction + main .lesson-wapper > div:not(.lesson-icon) {
  flex: 1 1 auto;
  min-width: 0;
}
.top-bar.introduction + main .lesson-head {
  width: auto;
  margin: 2px 0 4px;
  color: var(--rl-ink);
  font-size: 18px;
  line-height: 1.4;
}
/* Description: 16px at every width and #3d5566 on white (7.8:1; was #4f6878 at 5.9:1). */
.top-bar.introduction + main .lesson-text {
  width: auto;
  padding-left: 0;
  color: #3d5566;
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}
/* Icons: 56px box up to 767px, 64px from 768px at every wider width.
   Two columns from 768px: below that the rail-clear container (1b) is at most 599px wide, too narrow for two. */
@media (min-width: 768px) {
  .top-bar.introduction + main .icon-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 28px;
  }
  .top-bar.introduction + main .lesson-icon {
    width: 64px;
    height: 64px;
  }
  .top-bar.introduction + main .lesson-wapper {
    gap: 16px;
  }
  .top-bar.introduction + main .lesson-head {
    margin-top: 6px;
    font-size: 19px;
  }
}
@media (min-width: 992px) {
  .top-bar.introduction + main .icon-card {
    gap: 36px 32px;
  }
  .top-bar.introduction + main .lesson-head {
    font-size: 20px;
  }
}
/* Three columns only from 1280px, with the features container at 1040px (1b): the text column beside the 64px
   icon is then about 245px, wide enough for the longest Chinese clause of the class-size description (about
   233px at 16px) to stay on one line, so the number and its counter word are not split across lines. */
@media (min-width: 1280px) {
  .top-bar.introduction + main .icon-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* 4. Fees: price card, tables and billing notes (P1, P7, P9)           */
/* ------------------------------------------------------------------ */
#choose-your-ride + main #lesson-prices {
  margin: 0;
  padding: 16px 14px;
  border-radius: var(--rl-radius-card);
}
#choose-your-ride + main #lesson-prices > h3 {
  margin: 0 0 14px;
}
#lesson-prices .lesson-prices__single-table {
  margin: 0 0 16px;
}
#lesson-prices .lesson-prices__billing-under-table {
  margin: 0;
}
#lesson-prices .lesson-prices__multi-day {
  margin: 22px 0 0;
  padding-top: 18px;
}
#lesson-prices .lesson-prices__multi-note--below-table {
  margin: 12px 0 0;
}
#lesson-prices .lesson-prices__billing,
#lesson-prices .lesson-prices__multi-note,
#lesson-prices .lesson-prices__time-cell small {
  text-wrap: pretty;
}
/* Small grey notes were #58798c on #f4faff (4.41:1); darken to pass 4.5:1. */
#lesson-prices .lesson-prices__time-cell small {
  color: #4b6a7c;
}
/* P9: prices are the focus of both tables. */
#lesson-prices .lesson-prices__amount {
  color: var(--rl-price);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}
#lesson-prices .lesson-prices__single-table .lesson-prices__amount {
  font-size: 18px;
}
/* Needs this specificity: lesson-prices.css sets weight 600 on `#lesson-prices .lesson-prices__multi-table td`.
   At normal text spacing every discount amount fits on one line (sizes below); if a user enlarges letter/word
   spacing it may wrap at its space ("Save" / amount) instead of overflowing the cell, never inside the number. */
#lesson-prices .lesson-prices__multi-table td.lesson-prices__amount {
  color: var(--rl-price);
  font-size: 15px;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: normal;
}
#lesson-prices .lesson-prices__time-cell .lesson-prices__time {
  font-weight: 600;
}
@media (min-width: 600px) {
  #choose-your-ride + main #lesson-prices {
    padding: 20px 20px 22px;
  }
  #choose-your-ride + main #lesson-prices > h3 {
    margin-bottom: 16px;
  }
  #lesson-prices .lesson-prices__single-table {
    margin-bottom: 18px;
  }
  #lesson-prices .lesson-prices__multi-day {
    margin-top: 24px;
    padding-top: 20px;
  }
  #lesson-prices .lesson-prices__multi-table td.lesson-prices__amount {
    font-size: 17px;
  }
}
@media (min-width: 992px) {
  #choose-your-ride + main #lesson-prices {
    padding: 24px 24px 26px;
  }
  #lesson-prices .lesson-prices__single-table .lesson-prices__amount {
    font-size: 20px;
  }
}

/* Table presentation (>= 768px, Webflow's tablet breakpoint): the same 4-column table. The column widths keep
   each item on one line at normal text spacing at every width from 768px (narrowest table about 600px wide):
   course name (both English names, so they behave the same), label+time pair, class size and price. If a user
   enlarges letter/word spacing, the pair and the class size may wrap (the time itself never breaks) instead of
   overflowing. The multi-day table gets the same first-column width, so the first columns of both tables line up. */
@media (min-width: 768px) {
  #lesson-prices .lesson-prices__single-table .lesson-prices__course,
  #lesson-prices .lesson-prices__multi-table .lesson-prices__course { width: 25%; }
  #lesson-prices .lesson-prices__single-table .lesson-prices__time-col { width: 34%; }
  #lesson-prices .lesson-prices__single-table .lesson-prices__party { width: 21%; }
  #lesson-prices .lesson-prices__single-table .lesson-prices__price { width: 20%; }
  #lesson-prices .lesson-prices__multi-table .lesson-prices__price { width: 37.5%; }
  #lesson-prices .lesson-prices__single-table .lesson-prices__time-line {
    white-space: normal;
  }
  #lesson-prices .lesson-prices__single-table tbody th[scope="row"],
  #lesson-prices .lesson-prices__single-table .lesson-prices__amount {
    vertical-align: middle;
  }
  #lesson-prices .lesson-prices__single-table .lesson-prices__course-name {
    font-weight: 700;
    color: #1d5f78;
  }
  #lesson-prices .lesson-prices__single-table .lesson-prices__time-cell small {
    font-size: 13px;
  }
}
/* Desktop (table at least about 810px wide): a 20% first column still fits both English course names. */
@media (min-width: 992px) {
  #lesson-prices .lesson-prices__single-table .lesson-prices__course,
  #lesson-prices .lesson-prices__multi-table .lesson-prices__course { width: 20%; }
  #lesson-prices .lesson-prices__single-table .lesson-prices__time-col { width: 37%; }
  #lesson-prices .lesson-prices__single-table .lesson-prices__party { width: 22%; }
  #lesson-prices .lesson-prices__single-table .lesson-prices__price { width: 21%; }
  #lesson-prices .lesson-prices__multi-table .lesson-prices__price { width: 40%; }
}

/* P1 card presentation (<= 767px): each course becomes one card. Table semantics are kept for assistive
   technology through the explicit ARIA roles in the markup (the display of table elements changes here). */
@media (max-width: 767px) {
  #lesson-prices .lesson-prices__single-table {
    overflow: visible;
  }
  #lesson-prices .lesson-prices__single-table table,
  #lesson-prices .lesson-prices__single-table tbody {
    display: block;
    width: 100%;
  }
  #lesson-prices .lesson-prices__single-table colgroup {
    display: none;
  }
  /* No header row in card mode: the rows are no longer laid out as table rows, so a kept (visually hidden)
     header row made Chrome pair cells with column headers by DOM position (e.g. the 3-4 person price was
     announced under the class-time header). Without it each cell keeps only its correct row headers, and
     each card is self-describing. */
  #lesson-prices .lesson-prices__single-table thead {
    display: none;
  }
  #lesson-prices .lesson-prices__single-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    background: #fff;
    border: 1px solid var(--rl-line);
  }
  /* A course occupies two rows: odd rows open the card (course, time, first class size), even rows close it. */
  #lesson-prices .lesson-prices__single-table tbody tr:nth-child(odd) {
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
  }
  #lesson-prices .lesson-prices__single-table tbody tr:nth-child(even) {
    margin-bottom: 12px;
    border-top: 1px dashed var(--rl-line);
    border-radius: 0 0 12px 12px;
  }
  #lesson-prices .lesson-prices__single-table tbody tr:last-child {
    margin-bottom: 0;
  }
  #lesson-prices .lesson-prices__single-table th,
  #lesson-prices .lesson-prices__single-table td {
    display: block;
    min-width: 0;
    padding: 10px 14px;
    border: 0;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: normal;
  }
  #lesson-prices .lesson-prices__single-table .lesson-prices__course-name {
    grid-column: 1 / -1;
    padding: 9px 14px;
    border-radius: 11px 11px 0 0;
    background: #dceff4;
    color: #1d5f78;
    font-size: 16px;
    font-weight: 700;
  }
  #lesson-prices .lesson-prices__single-table .lesson-prices__time-cell {
    grid-column: 1 / -1;
    padding: 10px 14px;
    border-bottom: 1px dashed var(--rl-line);
    font-size: 15px;
    line-height: 1.55;
  }
  #lesson-prices .lesson-prices__single-table .lesson-prices__time-cell small {
    margin-top: 2px;
    font-size: 13px;
  }
  #lesson-prices .lesson-prices__single-table tbody th[scope="row"] {
    padding-right: 8px;
    font-weight: 500;
    white-space: nowrap;
  }
  #lesson-prices .lesson-prices__single-table .lesson-prices__amount {
    padding-left: 8px;
    text-align: right;
    font-size: 18px;
    line-height: 1.4;
  }
  /* Multi-day table stays a table; give it readable sizes instead of the 12-13px phone defaults. */
  #lesson-prices .lesson-prices__multi-table table {
    font-size: 14px;
  }
  #lesson-prices .lesson-prices__multi-table th,
  #lesson-prices .lesson-prices__multi-table td {
    padding: 9px 7px;
  }
}
/* Discount amounts fit on one line at normal text spacing down to 320px: below 400px the multi-day cells give up
   2px of side padding and the amounts drop their letter-spacing; the English amounts, the longest ("Save" + yen
   amount), also step down to 14px, and to 13px below 360px. */
@media (max-width: 399px) {
  #lesson-prices .lesson-prices__multi-table th,
  #lesson-prices .lesson-prices__multi-table td {
    padding-left: 5px;
    padding-right: 5px;
  }
  #lesson-prices .lesson-prices__multi-table td.lesson-prices__amount {
    letter-spacing: 0;
  }
  #lesson-prices:lang(en) .lesson-prices__multi-table td.lesson-prices__amount {
    font-size: 14px;
  }
}
@media (max-width: 359px) {
  #lesson-prices:lang(en) .lesson-prices__multi-table td.lesson-prices__amount {
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------ */
/* 5. Fee poster (P10): a centred illustration, not a full-width wall   */
/* ------------------------------------------------------------------ */
#choose-your-ride + main #lesson-fee-artwork {
  width: 100%;
  max-width: 100%;
  margin: var(--rl-space-block) auto 0;
}
/* Capped at 600px from 600px wide; the `sizes` attributes in the HTML follow the rendered width
   (90vw up to 600px, then the rail-clear container 100vw - 124px, then 600px). */
@media (min-width: 600px) {
  #choose-your-ride + main #lesson-fee-artwork {
    max-width: 600px;
  }
}

/* ------------------------------------------------------------------ */
/* 6. Class process: day-type labels (P2, P3) and timelines (P4)        */
/* ------------------------------------------------------------------ */
/* Heading and full-day label stack in one column at every width (they used to share a row on desktop). */
#choose-your-ride + main .sg-process-section,
#choose-your-ride + main .sg-process-half-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 !important;
}
#choose-your-ride + main .sg-process-half-section {
  padding-top: var(--rl-space-block) !important;
}
#choose-your-ride + main .sg-process-section .class-time-title,
#choose-your-ride + main .sg-process-half-section .class-time-title {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--rl-space-tight) !important;
  padding: 6px 14px;
  font-size: 19px;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}
@media (min-width: 600px) {
  #choose-your-ride + main .sg-process-section .class-time-title,
  #choose-your-ride + main .sg-process-half-section .class-time-title {
    font-size: 21px;
  }
}
@media (min-width: 992px) {
  #choose-your-ride + main .sg-process-section .class-time-title,
  #choose-your-ride + main .sg-process-half-section .class-time-title {
    padding: 7px 16px;
    font-size: 23px;
  }
}
#choose-your-ride + main .timeline_inner.sg-paper-collage-flow {
  margin: 0;
}
/* Card internals: Webflow's 1em row gap plus the 1ch/4ch indents left the description floating away
   from (and indented against) its title. */
#choose-your-ride + main .sg-paper-collage-flow .timeline_item {
  row-gap: 6px;
}
#choose-your-ride + main .sg-paper-collage-flow .time-title {
  margin: 0;
  padding-left: 0;
}
#choose-your-ride + main .sg-paper-collage-flow .time-text {
  padding-left: 0;
  text-wrap: pretty;
}
/* Time labels on the desktop axis: #1b8797 on #f8fcfe was 4.10:1. */
#choose-your-ride + main .sg-paper-collage-flow .time-mobile {
  color: #11707d;
}
/* P4 (<= 700px, where the time column became 58px wide): the time moves into its card as a small tag
   and the axis keeps only the line and dots. IX2 still fades the same .timeline_item elements. */
@media (max-width: 700px) {
  #choose-your-ride + main .sg-paper-collage-flow {
    padding: 16px 12px 18px 10px;
  }
  #choose-your-ride + main .sg-paper-collage-flow .timeline_grid,
  #choose-your-ride + main .sg-paper-collage-flow .timeline_grid.half {
    gap: 12px;
    padding-left: 30px;
  }
  #choose-your-ride + main .sg-paper-collage-flow .timeline_grid::before {
    left: 10px;
    top: 26px;
    bottom: 26px;
  }
  #choose-your-ride + main .sg-paper-collage-flow .timeline_grid > .timeline_item-wrap:not(.is-hidden-mobile)::before,
  #choose-your-ride + main .sg-paper-collage-flow .timeline_grid > .timeline_item::before {
    left: -27px;
    top: 17px;
    width: 16px;
    height: 16px;
  }
  #choose-your-ride + main .sg-paper-collage-flow .timeline_item {
    padding: 12px 14px 14px !important;
  }
  /* The transparent border (padding reduced by the same 1px) keeps the pill's outline in forced-colors mode. */
  #choose-your-ride + main .sg-paper-collage-flow .time-mobile {
    position: static;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 6px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #e3f3f5;
    color: #0f6470;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
  }
  #choose-your-ride + main .sg-paper-collage-flow .time-title {
    font-size: 18px;
  }
  #choose-your-ride + main .sg-paper-collage-flow .time-text {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* ------------------------------------------------------------------ */
/* 7. Notice: frame (P6) and tabs (P5)                                  */
/* ------------------------------------------------------------------ */
/* The clip-path cut the 1px border into four stray fragments and hid the offset shadow entirely.
   The section now reads like Fees and Class Process: heading, then the paper tabs and paper content box. */
#choose-your-ride + main #notice.sg-paper-collage-notice {
  padding: 0 !important;
  border: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}
/* /reserve#notice (footer and chat links) lands with a little air above the heading instead of flush. */
#notice {
  scroll-margin-top: 28px;
}
#notice .tabs-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--rl-space-tight);
  overflow: visible;
}
#notice .tab-link,
#notice .tab-link.w--current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 18px;
  font-size: 17px;
  line-height: 1.4;
}
/* Tab edges reach 3:1. Other tabs: dashed #a9823a (3.5:1 on their #fffdf3 paper and on white; was #d3bf85 at 1.8:1).
   Current tab: solid #a8781e (3.1:1 on #ffe39a, 3.9:1 on white; was #c9962f at 2.1:1) plus deeper paper colour;
   the inset ring adds weight without changing the box size, so switching tabs does not shift the row. */
#notice .tab-link {
  border-color: #a9823a;
}
#notice .tab-link.w--current {
  border: 1px solid #a8781e;
  background: #ffe39a;
  box-shadow: inset 0 0 0 1px #a8781e, 3px 3px 0 #efdcae;
}
#notice .tab-link .notice-text {
  width: auto;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
}
#notice .tabs-content {
  background: #fff;
}
/* One paper frame instead of a beige frame plus Webflow's inner blue border. */
#notice .tabs-content .show {
  padding: 14px 14px 16px;
  border: 0;
  font-size: 16px;
  line-height: 1.85;
  text-wrap: pretty;
}
@media (min-width: 600px) {
  #notice .tabs-content .show {
    padding: 18px 22px 20px;
    font-size: 17px;
    line-height: 1.9;
  }
}
/* 2x2 grid until all four tabs fit on one row in both languages, never 3+1. The single row needs about 449px
   of menu width for the Chinese labels (4 x 106px tabs + 3 gaps); the menu is 90% of the layout width up to
   600px (486px at 540px, about 471px even with a 17px desktop scrollbar) and the rail-clear container
   (100% - 124px, at least 477px) from 601px. */
@media (max-width: 539px) {
  #notice .tabs-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #notice .tab-link,
  #notice .tab-link.w--current {
    padding: 8px 10px;
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* 8. Bottom call to action (P11)                                       */
/* ------------------------------------------------------------------ */
a.ready-section {
  padding: var(--rl-space-section) 0;
  background: #f1faff;
  color: var(--rl-ink);
  text-decoration: none;
}
/* flex-wrap only kicks in when the text cannot fit beside the plane (e.g. enlarged text): it then drops below. */
a.ready-section .animate-bar-container {
  flex-wrap: wrap;
  gap: 16px clamp(16px, 4vw, 48px);
  margin-inline: auto;
  padding: 0 16px;
}
/* The .w-container clearfix pseudo-elements would be empty flex items here and take a share of `gap`. */
a.ready-section .animate-bar-container::before,
a.ready-section .animate-bar-container::after {
  content: none;
  display: none;
}
a.ready-section .bar-animation {
  flex: none;
  margin: 0;
}
a.ready-section .ready-text-contain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
a.ready-section .end-text {
  margin: 0;
  color: var(--rl-ink);
  font-size: 26px;
  line-height: 1.3;
  text-align: left;
  text-shadow: none;
}
/* The transparent border keeps the pill's outline in forced-colors mode, where backgrounds and shadows are dropped;
   the padding is 2px smaller than the visual inset so the button keeps its size. */
a.ready-section .end-text.next {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 20px 8px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #176379;
  box-shadow: 0 4px 0 #0e4656;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* Decorative chevron drawn with borders, so no text is added for screen readers. */
a.ready-section .end-text.next::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
a.ready-section:hover .end-text.next {
  background: #0f5466;
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #0b3a47;
}
a.ready-section:hover .end-text.next::after {
  transform: translateX(3px) rotate(45deg);
}
/* Keep the global focus ring inside the full-bleed link and repeat it on the button itself. */
a.ready-section:focus-visible {
  outline-offset: -6px !important;
}
a.ready-section:focus-visible .end-text.next {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0b66c3;
}
@media (max-width: 359px) {
  /* Narrow phones: a smaller plane keeps the heading and the button label on one line each at 320px. */
  a.ready-section .bar-animation {
    width: 76px;
    height: 76px;
  }
  a.ready-section .end-text {
    font-size: 24px;
  }
  a.ready-section .end-text.next {
    gap: 10px;
    min-height: 46px;
    padding: 7px 16px 7px 18px;
    font-size: 17px;
  }
}
@media (min-width: 600px) {
  a.ready-section .end-text {
    font-size: 32px;
  }
  a.ready-section .end-text.next {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  a.ready-section .end-text {
    font-size: 38px;
  }
  a.ready-section .end-text.next {
    min-height: 54px;
    padding: 10px 24px 10px 28px;
    font-size: 22px;
  }
}

/* ------------------------------------------------------------------ */
/* 9. Motion preferences                                                */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* Webflow IX2 writes an inline opacity (0.25 -> 1 while scrolling) on the timeline cards; that is the only
     thing it dims inside the timeline. Keep every card fully opaque and still, whatever IX2 writes. */
  #choose-your-ride + main .sg-paper-collage-flow .timeline_item,
  #choose-your-ride + main .sg-paper-collage-flow [style*="opacity"] {
    opacity: 1 !important;
  }
  #choose-your-ride + main .sg-paper-collage-flow .timeline_item {
    transform: none !important;
  }
  a.ready-section .end-text.next,
  a.ready-section .end-text.next::after {
    transition: none;
  }
  a.ready-section:hover .end-text.next {
    transform: none;
  }
  a.ready-section:hover .end-text.next::after {
    transform: rotate(45deg);
  }
}