/*
 * Realease.pro compact layer for phones and tablets.
 *
 * Loads after the other Realease stylesheets and only overrides below 1240px,
 * so the desktop layout stays exactly as it is. Three ranges:
 * phones up to 599px, tablets 600-1023px and small desktops 1024-1239px.
 * The same site, the same sections and copy; only spacing, type and layout.
 */

/* Small desktops and tablets */
@media (max-width: 1239px) {
  .rp .b3-sec {
    padding-block: clamp(56px, 7vw, 88px);
  }
}

/*
 * Tablets show the region tour as a list (same ranges as realease-site.css):
 * a modest map and the regions in two columns.
 */
@media (min-width: 600px) and (max-width: 960px),
  (min-width: 600px) and (max-width: 1239px) and (orientation: portrait) {
  .rp .b3t-sketch {
    width: 100%;
    max-width: 620px;
    margin: 8px auto;
  }
  .rp .b3t-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
  .rp .b3t-intro,
  .rp .b3t-end {
    grid-column: 1 / -1;
  }
}

/* Tablets and phones */
@media (max-width: 1023px) {
  .rp .b3 h2 {
    font-size: 30px;
    line-height: 1.1;
  }
  .rp .b3-hero h1 {
    font-size: 40px;
    line-height: 1.05;
  }
  .rp .b3 .lead {
    font-size: 16px;
    line-height: 1.55;
  }
  .rp .bp-shead {
    margin-bottom: 28px;
  }
  .rp .b3-steps {
    margin-top: 28px;
  }

  /* Buttons as wide as their text, on the left; the second action reads as a link */
  .rp .btn,
  .rp .b3 .btn {
    min-height: 44px;
    padding-inline: 1.15em;
    font-size: 15px;
  }
  .rp .b3-hero .actions .btn {
    flex: none;
  }
  .rp .actions {
    justify-content: flex-start;
    align-items: center;
    column-gap: 20px;
  }
  .rp .actions .btn-ghost,
  .rp .actions .btn-ghost-light {
    padding-inline: 0;
    border-color: transparent;
    background: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }

  /* Numbered lists: the number on the title line, the text right below */
  .rp .b3-fallout li,
  .rp .bp-principles > div {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-content: start;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 6px;
  }
  .rp .b3-fallout li > :not(.n),
  .rp .bp-principles > div > :not(.bp-num) {
    grid-column: 2;
    margin: 0;
  }
  .rp .b3-fallout strong,
  .rp .bp-principles h3 {
    line-height: 1.25;
  }
}

/* Tablets: use the width for two columns instead of one stretched phone column */
@media (min-width: 600px) and (max-width: 1023px) {
  .rp .b3-split,
  .rp .b3-fallout,
  .rp .b3-inc,
  .rp .b3-terms,
  .rp .b3-agenda {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }
  .rp .b3-fallout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rp .b3-hero > .wrap {
    gap: 28px;
  }
  .rp .b3-stage {
    max-width: 560px;
  }
  .rp .b3 .b3-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  :root:has(.rp) footer nav > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablets with the step list: the list beside the screen, as on desktop */
@media (min-width: 641px) and (max-width: 960px) {
  .rp .b3-steps {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }
}

/* Phones */
@media (max-width: 599px) {
  /* Rhythm */
  .rp .b3-sec {
    padding-block: 40px;
  }
  .rp .b3-faq {
    padding-top: 44px;
  }
  .rp .bp-shead {
    margin-bottom: 20px;
    gap: 12px;
  }
  .rp .bp-shead > div,
  .rp .b3-head {
    gap: 12px;
  }

  /* The product board fits the screen instead of scrolling sideways */
  .rp .b3-shot .img {
    overflow-x: visible;
  }
  .rp .b3-shot .img img {
    width: 100%;
    max-width: 100%;
  }

  /* Type: four sizes for running text */
  .rp .b3 h2 {
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
  .rp .b3 h3 {
    font-size: 19px;
    line-height: 1.2;
  }
  .rp .b3 .lead,
  .rp .b3 .lead p {
    font-size: 15.5px;
    line-height: 1.55;
  }
  .rp .b3 .eyebrow {
    font-size: 11px;
  }

  /* Mockups read as proof beside the text; on a phone they are shown smaller */
  .rp .b3-frame,
  .rp .b3-notif,
  .rp .b3-panel,
  .rp .b3-trackcard {
    zoom: 0.88;
  }

  /* Hero */
  .rp .b3-hero {
    padding-bottom: 40px;
  }
  .rp .b3-hero > .wrap {
    gap: 24px;
  }
  .rp .b3-hero h1 {
    margin-block: 14px 14px;
    font-size: 32px;
    line-height: 1.06;
  }
  .rp .b3-hero .actions {
    margin-top: 22px;
    gap: 8px;
  }
  .rp .btn,
  .rp .b3 .btn,
  .rp .actions .btn-ghost,
  .rp .actions .btn-ghost-light {
    min-height: 42px;
  }
  .rp .b3 .b3-trust {
    margin-top: 16px;
    gap: 4px 14px;
    font-size: 13px;
  }
  .rp .b3-brands {
    margin-top: 12px;
    gap: 8px;
  }
  .rp .b3-pills {
    flex-wrap: wrap;
    gap: 6px;
  }
  .rp .b3-pills button {
    min-height: 34px;
    padding-inline: 10px;
    gap: 6px;
    font-size: 13px;
  }

  /* Region strip: the areas wrap onto a next line, nothing scrolls sideways */
  .rp .b3-strip .wrap {
    padding-block: 20px;
    row-gap: 14px;
  }
  .rp .b3-strip .lbl {
    margin-bottom: 10px;
  }
  .rp .b3-rgs {
    flex-wrap: wrap;
    gap: 6px;
  }
  .rp .b3-rgs a {
    min-height: 32px;
    padding-inline: 11px;
    font-size: 13px;
  }
  .rp .b3-mkt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    padding-top: 14px;
  }
  .rp .b3-mkt .num {
    font-size: 32px;
  }
  .rp .b3-mkt p {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.4;
  }
  .rp .b3-mkt > :not(.num, p) {
    grid-column: 1 / -1;
  }

  /* The gap: loose messages against one shared screen */
  .rp .b3-split .before,
  .rp .b3-split .after {
    padding: 18px 16px;
  }
  .rp .b3-split .sub {
    font-size: 14px;
  }
  .rp .b3 .b3-split .loose {
    margin-top: 14px;
    gap: 6px;
  }
  .rp .b3-split .loose li {
    padding: 9px 12px;
    font-size: 14px;
  }
  .rp .b3-split .b3-trackcard {
    margin-top: 14px;
  }
  .rp .b3-fallout {
    margin-top: 24px;
    gap: 0;
  }
  .rp .b3-fallout li,
  .rp .bp-principles > div {
    padding-block: 14px;
  }
  .rp .b3-fallout strong,
  .rp .bp-principles h3 {
    font-size: 18px;
  }
  .rp .bp-principles p {
    font-size: 14.5px;
    line-height: 1.5;
  }
  .rp .b3-fallout p {
    font-size: 14.5px;
    line-height: 1.5;
  }

  /*
   * Seven steps: seven numbered dots that fit the width. The step name stays
   * the tab's accessible name and shows in the screen below ("Stap 1 van 7").
   */
  .rp .b3-steps {
    margin-top: 22px;
    gap: 14px;
  }
  .rp .b3-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
  .rp .b3-tabs button {
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }
  .rp .b3-tabs button .n {
    font-size: 13px;
  }
  .rp .bp-aside {
    margin-top: 16px;
  }

  /* Region tour as a list */
  .rp .b3t-intro {
    padding-top: 44px;
  }
  .rp .b3t h2 {
    margin-block: 12px 14px;
  }
  .rp .b3t .b3-rules {
    margin-block: 16px 16px;
  }
  .rp .b3t-stop {
    padding-block: 16px;
  }
  .rp .b3t h3 {
    margin-top: 8px;
    font-size: 20px;
  }
  .rp .b3t-panel p {
    margin-top: 4px;
    font-size: 14.5px;
    line-height: 1.5;
  }
  /* Per region one line of actions: the areas as a small link, the talk link beside it */
  .rp .b3t-stop > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
  }
  .rp .b3t-stop > div > :not(.b3t-more, .b3t-go) {
    flex: 0 0 100%;
  }
  .rp .b3t-stop .b3t-st {
    max-width: fit-content;
  }
  /* The area list folds open below both links */
  .rp .b3t-stop .b3t-areas {
    order: 1;
  }
  .rp .b3t-more,
  .rp .b3t-go {
    min-height: 36px;
    margin-top: 6px;
    font-size: 14px;
  }
  .rp .b3t-more {
    gap: 6px;
    padding-inline: 0;
    border-color: transparent;
    background: none;
  }
  .rp .b3t-end {
    padding: 28px 0 44px;
  }
  .rp .b3t-end h3 {
    font-size: 22px;
  }

  /* Rules lists (numbered lines under a heading) */
  .rp .b3-rules {
    margin-block: 16px 20px;
  }
  .rp .b3-rules li {
    padding-block: 10px;
    font-size: 14.5px;
    line-height: 1.5;
  }

  /* Leads */
  .rp .b3-leads > .wrap,
  .rp .b3-get > .wrap {
    gap: 24px;
  }
  .rp .b3-leads h2,
  .rp .b3-get h2 {
    margin-block: 12px 14px;
  }
  .rp .bp-badges {
    gap: 6px;
  }

  /* What you get */
  .rp .b3-inc {
    margin-top: 16px;
  }
  .rp .b3-inc li {
    padding-block: 11px;
    column-gap: 10px;
    grid-template-columns: 28px minmax(0, 1fr);
    font-size: 14.5px;
    line-height: 1.45;
  }

  /* The offer */
  .rp .b3-offerbox {
    padding: 20px 16px;
    gap: 20px;
  }
  .rp .b3-terms {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Brand choice on the product page: three small tiles on one row */
  .rp .b3 .b3-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .rp .b3-tiles button {
    min-height: 40px;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 999px;
  }
  .rp .b3-tiles button {
    justify-content: center;
    text-align: center;
  }
  .rp .b3-tiles .txt {
    min-width: 0;
    font-size: 13px;
    white-space: nowrap;
  }
  .rp .b3-tiles .mark,
  .rp .b3-tiles .txt > :not(:first-child),
  .rp .b3-tiles .on {
    display: none;
  }

  /* Sub pages: the same rhythm and heading size as the home page */
  .rp .bp-sec {
    padding-block: 40px;
  }
  .rp .b3 .bp-head h1,
  .rp .page-head h1 {
    font-size: 32px;
    line-height: 1.06;
  }
  .rp .bp-head .actions {
    margin-top: 22px;
  }

  /* FAQ */
  .rp .b3-faq > .wrap {
    gap: 20px;
  }
  .rp .b3-faq h2 {
    margin-top: 12px;
  }
  .rp .b3 .faq summary {
    padding-block: 13px;
    font-size: 16px;
  }

  /* Close */
  .rp .b3-close {
    padding-block: 36px;
    margin-bottom: 20px;
  }
  .rp .b3-close > .wrap {
    gap: 20px;
  }
  .rp .b3-close h2 {
    margin-block: 12px 12px;
  }
  .rp .b3-close .actions {
    margin-top: 20px;
  }
  .rp .b3-openpill {
    margin-top: 16px;
  }
  .rp .b3-agenda li {
    padding-block: 12px;
    font-size: 14.5px;
  }

  /* Footer (platform markup, so only on the Realease pages) */
  :root:has(.rp) footer .container {
    padding-top: 36px;
    gap: 24px;
  }
  :root:has(.rp) footer nav > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }
}

/*
 * Method on phones: each step is a row with its name and one line, and opens
 * to what the buyer sees, what the office does and the screen. Step 1 starts
 * open. Above 599px every step stays open and the fold button is not there.
 */
@media (max-width: 599px) {
  .rp .bp-chapters {
    gap: 12px;
  }
  .rp .bp-chapter:not(.open) {
    padding-block: 18px;
  }
  .rp .bp-chapter:not(.open) .bp-chapter-title p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .rp .bp-chapter:not(.open) .bp-chapter-copy > :not(.bp-chapter-title),
  .rp .bp-chapter:not(.open) .bp-chapter-screen {
    display: none;
  }
  .rp .bp-chapter-fold {
    min-height: 36px;
    margin-top: 0;
    justify-self: start;
    gap: 6px;
    padding-inline: 0;
    border-color: transparent;
    background: none;
    font-size: 14px;
  }
  .rp .bp-chapter-fold:hover {
    border-color: transparent;
  }
}
@media (min-width: 600px) {
  .rp .bp-chapter-fold {
    display: none;
  }
}