/* DiveScanner - desktop / landscape-tablet search bar (owner-approved redesign).
 *
 * Applies ONLY at min-width:1025px. Below that (phones, portrait tablets and
 * 1024-wide tablets) this file does nothing and the existing search card is
 * untouched - mobile keeps today's working search exactly as it is.
 *
 * Mechanism: the bar (.hb) is an additive shell at the top of .search-card.
 * The existing working sections (destination, month, marine life, experience,
 * dives) stay exactly where they live in the DOM; at desktop they are hidden
 * and shown one at a time as a white panel under the bar, driven by a
 * data-hb attribute on .search-card. No control is moved or rebuilt. */

/* Base state on every screen: the bar does not exist visually. Only the
   desktop media query below turns it on, so phones and portrait tablets are
   untouched and resizing across the breakpoint is safe in both directions. */
#search .hb { display: none; }
#search .hb-buddy { display: none; }
#search .hb-supp { display: none; }
.ds-app h2 .ds-h-short { display: none; }
/* Each sentence of the app heading wraps as a whole phrase, never mid-thought,
   on every screen size. */
.ds-app h2 .ds-hs { display: inline-block; }

@media (min-width: 1025px) {

  /* The card becomes a transparent shell; the bar carries the white box look. */
  #search .search-card {
    width: 100%;
    max-width: 1100px;
    background: none;
    border: none;
    padding: 0;
    position: relative;
    z-index: 4;
    text-align: left;
  }
  #search .search-intro { display: none; }
  #search .search-btn { display: none; }

  /* ---- the bar ---- */
  #search .hb { display: flex; gap: 12px; align-items: stretch; text-align: left; }
  #search .hb-bar {
    flex: 1;
    min-width: 0;
    display: flex;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(2, 11, 32, .35);
  }
  #search .hb-seg {
    position: relative;
    /* size to content and share the spare space, so a long value uses the room
       it needs instead of every segment taking a fixed quarter; min-width:0
       lets a segment shrink so its value ellipsizes rather than overflowing
       the bar and pushing Compare outside the container. */
    flex: 1 1 auto;
    min-width: 0;
    min-height: 78px;
    padding: 14px 34px 14px 18px;
    border: none;
    border-right: 1px solid #e9edf2;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
  }
  #search .hb-seg:last-of-type { border-right: none; }
  #search .hb-seg:focus-visible { outline: 3px solid rgba(66, 245, 230, .65); outline-offset: -3px; border-radius: 14px; }
  #search .hb-lab {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #6b7d8d;
    white-space: nowrap;
  }
  #search .hb-val {
    font-size: 19px;
    font-weight: 800;
    color: #0a2747;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #search .hb-opt {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #8d38cd;
  }
  #search .hb-caret {
    position: absolute;
    right: 14px;
    top: 24px;
    color: #842dc4;
    font-size: 13px;
    transition: transform .15s;
  }
  #search .hb-seg[aria-expanded="true"] .hb-caret { transform: rotate(180deg); }
  #search .hb-go {
    flex: 0 0 156px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--teal);
    color: #062f3a;
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 18px 44px rgba(2, 11, 32, .35);
    transition: background .15s, transform .05s;
  }
  #search .hb-go:hover { background: var(--teal-h); }
  #search .hb-go:active { transform: translateY(1px); }

  /* ---- sections become panels, one open at a time ---- */
  #search .search-card .dest-section,
  #search .search-card #hbWhenSec,
  #search .search-card .see-box,
  #search .search-card #hbExpSec,
  #search .search-card #hbDivesSec { display: none; }

  #search .search-card[data-hb="dest"] .dest-section,
  #search .search-card[data-hb="when"] #hbWhenSec,
  #search .search-card[data-hb="life"] .see-box,
  #search .search-card[data-hb="exp"] #hbExpSec,
  #search .search-card[data-hb="exp"] #hbDivesSec {
    display: block;
    background: #fff;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 18px 44px rgba(2, 11, 32, .35);
    margin: 12px 0 0;
    text-align: left;
  }
  /* Experience opens certification + dives logged as one visual panel. */
  #search .search-card[data-hb="exp"] #hbExpSec {
    border-radius: 16px 16px 0 0;
    padding-bottom: 8px;
    box-shadow: 0 -10px 30px rgba(2, 11, 32, .18);
  }
  #search .search-card[data-hb="exp"] #hbDivesSec {
    border-radius: 0 0 16px 16px;
    margin-top: 0;
    padding-top: 8px;
  }

  /* ---- solo checkbox + buddy link under the bar ---- */
  #search .solo-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    margin-top: 14px;
    height: 24px;
    cursor: pointer;
  }
  #search .solo-box::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    flex: 0 0 auto;
  }
  #search .solo-box.on::before {
    content: "\2713";
    display: grid;
    place-items: center;
    background: var(--teal);
    border-color: var(--teal);
    color: #062f3a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }
  #search .solo-box .solo-text { display: inline-flex; align-items: center; }
  #search .solo-box .solo-text strong { display: none; }
  #search .solo-box .solo-text small { display: none; }
  #search .solo-box .solo-text small.hb-supp { display: inline; color: #fff; font-size: 15px; font-weight: 800; line-height: 1; }
  #search .solo-box .solo-tag { display: none; }
  #search .solo-box { align-items: center; vertical-align: top; }

  #search .hb-buddy {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    margin-left: 22px;
    margin-top: 14px;
    height: 24px;
    color: #8fe9df;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  #search .hb-buddy:hover { text-decoration: underline; }

  /* ---- weather: same slim pill as mobile, under the headline ----
     The aside stays first in the DOM; the hero becomes a flex column and
     order places the pill between the H1 and the search bar. The absolute
     side widgets are out of flow and unaffected. Below 1025px none of this
     applies. */
  #search { display: flex; flex-direction: column; align-items: center; }
  #search > .eyebrow { order: 1; }
  #search > h1 { order: 2; }
  #search > .wx { order: 3; position: static; width: auto; max-width: 100%; margin: 0 0 22px; text-align: center; z-index: auto; }
  #search > .search-card { order: 4; }
  #search > .trust-bar { order: 5; }
  #search .wxcard { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; background: linear-gradient(135deg, rgba(66, 245, 230, .20), rgba(10, 106, 138, .26)); border: 1px solid rgba(66, 245, 230, .5); box-shadow: 0 5px 16px rgba(3, 20, 35, .22); border-radius: 13px; padding: 9px 18px; }
  #search .wx-head, #search .wx-region, #search .wx-cond, #search .wx-cta { display: none; }
  #search .wx-left { display: contents; }
  #search .wx-dest { order: 1; margin: 0; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; }
  #search .wx-dest::after { content: "\00B7"; margin-left: 9px; color: #8fe9df; }
  #search .wx-weather { order: 2; margin: 0; gap: 6px; display: flex; align-items: center; }
  #search .wx-temp { order: 0; margin: 0; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: 0; color: #fff; }
  #search .wx-emoji { order: 1; font-size: 16px; }
  #search .wx-time { order: 3; margin: 0; font-size: 13px; color: #cfe4f2; display: inline-flex; align-items: center; }
  #search .wx-time::before { content: "\00B7"; margin-right: 6px; color: #8fe9df; }

  /* ---- explore band: featured guide, game, partner ----
     Three equal cards under the hero. Each is label, title, media, link, with
     the three media areas starting on the same line (a fixed header height)
     and the three links pinned to the bottom. The featured teaser and the
     game strip keep their own markup and only change position via CSS order.
     The old absolutely-positioned side widgets are replaced by these cards. */
  #search .hero-promo { display: none; }

  /* the phone frame in the app band (these rules were lost in an earlier
     cleanup, which left the play button unstyled on desktop) */
  .ds-phone {
    flex: 0 0 124px; height: 236px; border-radius: 22px; border: 4px solid #0b1b2b;
    overflow: hidden; position: relative; background: #0b1b2b; box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
  }
  .ds-phone img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
  .ds-phone iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .ds-phone .pl {
    position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 38px;
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  }
  .ds-phone .pl:focus-visible { outline: 3px solid #5ef0df; outline-offset: -3px; }
  .ds-phone .circ {
    width: 44px; height: 44px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  }
  .ds-phone .circ svg { width: 15px; height: 17px; }
  .ds-phone .cap {
    font-size: 11.5px; font-weight: 800; color: #fff; text-align: center;
    line-height: 1.3; text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  }


  .ds-explore {
    /* exactly the search bar's width, so the page lines up: the card sits in
       the hero's 24px padding, so the band matches with the same inset. */
    width: calc(100% - 48px);
    max-width: 1100px;
    margin: 26px auto 10px;
    padding: 0;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .ds-ecard, .ds-explore .fteaser {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4ecf2;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(6, 47, 58, .10);
    overflow: hidden;
  }
  .ds-explore .hero-teaser { display: flex; position: static; width: auto; margin: 0; z-index: auto; }
  .ds-explore .fteaser { width: 100%; }

  .ds-ehead { padding: 15px 16px 0; height: 84px; box-sizing: border-box; }
  .ds-ekick, .ds-explore .fteaser-kick {
    font-size: 10px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: #0f9f9b; margin: 0;
  }
  .ds-etitle, .ds-explore .fteaser-body h3 {
    font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700;
    color: #0b1b2b; letter-spacing: -.2px; line-height: 1.22; margin: 5px 0 0;
  }
  .ds-esub { font-size: 12.5px; color: #5a6b7b; margin-top: 3px; }
  .ds-efoot { margin-top: auto; padding: 12px 16px 14px; }
  .ds-ecta, .ds-explore .fteaser-cta { font-weight: 800; color: #0f9f9b; font-size: 13px; text-decoration: none; }
  .ds-ecta:hover, .ds-explore .fteaser-cta:hover { text-decoration: underline; }

  /* featured guide: a compact horizontal card - photo beside the text, the
     usual teaser shape, not a hero-sized block */
  .ds-explore .fteaser { flex-direction: row; align-items: stretch; }
  .ds-explore .fteaser-img { flex: 0 0 340px; height: auto; min-height: 200px; }
  .ds-explore .fteaser-body {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 20px 24px; text-align: left;
  }
  .ds-explore .fteaser-kick { padding: 0; }
  .ds-explore .fteaser-body h3 { padding: 0; margin: 6px 0 10px; font-size: 21px; height: auto; }
  .ds-explore .fteaser-cta { padding: 0; margin-top: 2px; }
  .ds-explore .fteaser-pill { top: 8px; left: 8px; }

  /* game */
  .ds-explore .game-strip { margin: 0; padding: 0; height: 190px; display: flex; align-items: center; background: #eef4fb; }
  .ds-explore .game-strip iframe { display: block; width: 100%; aspect-ratio: 700/240; border: 0; }

  /* partner */
  .ds-pmedia { height: 190px; display: block; overflow: hidden; }
  .ds-pmedia img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .ds-partner-card .ds-pgo {
    display: inline-block; background: #f98426; color: #fff; font-weight: 800;
    font-size: 13px; padding: 11px 18px; border-radius: 10px; text-decoration: none;
  }
  .ds-partner-card .ds-pgo:hover { background: #e0761a; }

  /* the booking partner as a marked link beside the dive buddy link */
  #search .ds-partnerlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    vertical-align: top;
    margin-left: 22px;
    margin-top: 14px;
    height: 24px;
    color: #ffd9a8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  #search .ds-partnerlink svg { width: 16px; height: 16px; flex: 0 0 auto; }
  #search .ds-partnerlink .tag {
    font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: #04222b; background: #f5b301; border-radius: 5px; padding: 2px 6px;
  }
  #search .ds-partnerlink:hover .lab { text-decoration: underline; }

  /* ---- app band ----
     Sits under the three cards, same width, on the destination cover photo.
     The phone plays the promo in place: nothing loads from the video host
     until the diver presses play. */
  .ds-app {
    width: calc(100% - 48px);
    max-width: 1100px;
    margin: 20px auto 30px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 290px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('/assets/img/app-band-manta.jpg');
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 28px rgba(6, 47, 58, .22);
  }
  .ds-app::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 26, 48, .72) 0%, rgba(4, 26, 48, .62) 55%, rgba(4, 26, 48, .30) 100%);
  }
  .ds-app-in { position: relative; z-index: 2; display: flex; align-items: center; gap: 34px; width: 100%; padding: 30px 34px; }
  .ds-app-txt { flex: 1; text-align: center; }
  .ds-app-kick { font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #5ef0df; }
  .ds-app h2 {
    font-family: 'Space Grotesk', sans-serif; font-size: 25px; line-height: 1.24; font-weight: 700;
    color: #fff; letter-spacing: -.4px; margin: 10px auto 9px; max-width: 520px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
  }
  .ds-app p { font-size: 14.5px; line-height: 1.55; color: #e4f0fa; margin: 0 auto 20px; max-width: 470px; }
  .ds-app-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .ds-dl {
    display: inline-flex; align-items: center; gap: 8px; background: #5ef0df; color: #04222b;
    font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 700; border-radius: 11px;
    padding: 13px 22px; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  }
  .ds-dl:hover { background: #42f5e6; }
  .ds-play { display: inline-block; line-height: 0; text-decoration: none; }
  .ds-play img { display: block; height: 66px; width: auto; }

}

/* Below 1025px the band is not used: the existing mobile shell keeps the
   featured teaser, the game strip and the partner card exactly as they are. */
@media (max-width: 1024px) {
  .ds-explore { display: contents; }

  /* ---- app band on phones and portrait tablets ----
     Same band, stacked: text, then the phone, then the actions. It matches the
     featured article card above it, so the column stays tidy. */
  .ds-app {
    display: block;
    width: auto;
    max-width: 780px;
    margin: 16px auto 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-image: url('/assets/img/app-band-manta.jpg');
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 22px rgba(6, 47, 58, .20);
  }
  .ds-app::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 26, 48, .62) 0%, rgba(4, 26, 48, .80) 100%);
  }
  .ds-app-in {
    position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: center; gap: 16px; padding: 22px 18px 24px; text-align: center;
  }
  .ds-app-txt { width: 100%; }
  .ds-app-kick { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #5ef0df; }
  .ds-app h2 {
    font-family: 'Space Grotesk', sans-serif; font-size: 19px; line-height: 1.28; font-weight: 700;
    color: #fff; letter-spacing: -.3px; margin: 8px 0 7px; text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  }
  /* heading and subheading share one measure so their lines end together */
  .ds-app h2, .ds-app p { max-width: 330px; margin-left: auto; margin-right: auto; }
  .ds-app p { font-size: 13.5px; line-height: 1.5; color: #e4f0fa; margin-bottom: 0; }
  .ds-phone {
    width: 158px; height: 300px; border-radius: 24px; border: 4px solid #0b1b2b;
    overflow: hidden; position: relative; background: #0b1b2b; box-shadow: 0 12px 26px rgba(0, 0, 0, .4);
  }
  .ds-phone img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
  .ds-phone iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .ds-phone .pl {
    position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 44px;
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  }
  .ds-phone .pl:focus-visible { outline: 3px solid #5ef0df; outline-offset: -3px; }
  .ds-phone .circ {
    width: 54px; height: 54px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  }
  .ds-phone .circ svg { width: 18px; height: 20px; }
  .ds-phone .cap { font-size: 12.5px; font-weight: 800; color: #fff; line-height: 1.3; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
  .ds-app-cta { display: flex; flex-direction: column; align-items: center; gap: 11px; width: 100%; }
  .ds-dl {
    display: flex; align-items: center; justify-content: center; background: #5ef0df; color: #04222b;
    font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; border-radius: 12px;
    padding: 14px 20px; text-decoration: none; width: 100%; max-width: 300px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  }
  .ds-play { display: inline-block; line-height: 0; text-decoration: none; }
  .ds-play img { display: block; height: 66px; width: auto; }

  /* the game's title block, sitting above the game on small screens */
  .ds-ghead { max-width: 780px; margin: 20px auto 9px; padding: 0 16px; text-align: center; }
  .ds-ghead .ds-ekick { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #0f9f9b; }
  .ds-ghead .ds-etitle {
    font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700;
    color: #0b1b2b; letter-spacing: -.2px; line-height: 1.24; margin-top: 4px;
  }
  .ds-ghead .ds-esub { font-size: 12.5px; color: #5a6b7b; margin-top: 3px; }
}

/* ---- portrait tablet (768 to 1024) ----
   Wider than a phone, so the width is used: the featured photo runs full
   width, and the partner sits centred and short, not split across the width. */
@media (min-width: 768px) and (max-width: 1024px) {

  /* Featured article: a horizontal card. The photo stays big enough to read at
     arm's length without the card taking a third of the screen. One container
     width, 640px, is used by every block on this screen so the column lines up. */
  .ds-msearch .hero-teaser { max-width: 640px; margin: 16px auto 0; }
  .ds-msearch .fteaser { flex-direction: row; align-items: stretch; border-radius: 14px; overflow: hidden; }
  .ds-msearch .fteaser-img { width: auto; flex: 0 0 240px; height: auto; min-height: 150px; }
  .ds-msearch .fteaser-body {
    flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 14px 18px;
  }
  .ds-msearch .fteaser-body h3 { font-size: 18px; margin: 5px 0 8px; }

  /* the partner and the game keep the same 640px container */
  .ds-partner { max-width: 640px; }
  .ds-ghead { max-width: 640px; }

  /* partner: name and button together, centred, and shorter */
  .ds-partner { padding: 10px 14px; justify-content: center; gap: 14px; }
  .ds-partner > div { display: flex; align-items: center; gap: 10px; }
  .ds-partner .pl, .ds-partner .sub { display: none; }
  .ds-partner .nm { font-size: 15px; }
  .ds-partner .ds-ptag {
    display: inline-block;
    font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    color: #8a6a12; background: #fdf1d6; border: 1px solid #f3dca6; border-radius: 5px; padding: 2px 6px;
  }
  .ds-partner .go { margin-left: 0; padding: 8px 14px; font-size: 12.5px; }
  .ds-explore .ds-ehead, .ds-explore .ds-efoot, .ds-explore .ds-pmedia { display: none; }
}

/* ---- app band on any upright tablet (600 to 1024) ----
   Real tablets held upright report widths from about 600px, so the two-column
   band starts there rather than at 768. Phones keep the stacked band. The
   message column carries the heading and its subheading in one container at one
   width, beside the phone and the store badge. */
@media (min-width: 600px) and (max-width: 1024px) {

  .ds-app {
    background-image: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    max-width: 780px;
    margin: 22px auto 4px;
    min-height: 0;
  }
  .ds-app::before { display: none; }
  .ds-app-in {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 0;
    text-align: center;
  }
  /* the message column is centred against the phone beside it */
  /* One centred column: heading, subheading and badge share one container and
     one alignment, so nothing reads as a separate block. */
  .ds-app-txt {
    order: 1;
    width: auto;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .ds-app-kick { display: none; }
  .ds-app h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: #0b1b2b;
    margin: 0;
    max-width: 260px;
    text-shadow: none;
  }
  /* the subheading sits in the same container, at the same width */
  .ds-app p {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #40566b;
    margin: 0;
    max-width: 260px;
  }
  /* the short heading replaces the full line here */
  .ds-app h2 .ds-h-long { display: none; }
  .ds-app h2 .ds-h-short { display: inline; }
  .ds-phone { order: 2; flex: 0 0 auto; width: 124px; height: 236px; box-shadow: 0 10px 24px rgba(6, 47, 58, .22); }
  .ds-app-cta { order: 3; gap: 0; align-items: center; margin-top: 4px; }
  .ds-dl { display: none; }
  .ds-play img { height: 52px; }
}

/* ---- game teaser (600px and up) ----
   From 600px the game stops being a running canvas in the middle of the page
   and becomes a closed teaser after the FAQ, where the diver has finished the
   task. It starts only when play is pressed, so it can never take over the
   page scroll on a touch screen. Phones keep today's sliding game untouched. */
@media (min-width: 600px) {

  .ds-ghead { display: none; }

  .ds-gteaser {
    width: calc(100% - 48px);
    max-width: 640px;
    margin: 24px auto 28px;
    background: linear-gradient(120deg, #0b3f57 0%, #0f6d7d 100%);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    box-shadow: 0 10px 26px rgba(6, 47, 58, .18);
  }
  .ds-gt-txt { flex: 1; min-width: 0; }
  .ds-gt-kick { font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: #5ef0df; }
  .ds-gteaser h3 {
    font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700;
    color: #fff; margin: 5px 0 4px; letter-spacing: -.3px;
  }
  .ds-gteaser p { font-size: 13px; line-height: 1.5; color: #cfe8f2; margin: 0 0 10px; }
  .ds-gt-go {
    display: inline-flex; align-items: center; gap: 8px; background: #5ef0df; color: #04222b;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13.5px;
    border-radius: 11px; padding: 9px 15px; text-decoration: none;
  }
  .ds-gt-go:hover { background: #42f5e6; }

  /* the preview: the real game, held still and untouchable until play */
  .ds-gt-shot {
    flex: 0 0 230px; height: 104px; border-radius: 12px; overflow: hidden;
    position: relative; background: #8ed8f2;
  }
  .ds-gt-shot .game-strip { max-width: none; margin: 0; padding: 0; height: 100%; background: none; }
  .ds-gt-shot .game-strip iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
  .ds-gt-ov {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(4, 26, 48, .30); border: 0; padding: 0; cursor: pointer;
  }
  .ds-gt-ov:focus-visible { outline: 3px solid #5ef0df; outline-offset: -3px; }
  .ds-gt-circ {
    width: 44px; height: 44px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  }

  /* Once play is pressed the game takes a real playing size, in place. The
     title block sits centred directly above it, in the same container. */
  .ds-gteaser.is-live { flex-direction: column; align-items: center; text-align: center; }
  .ds-gteaser.is-live .ds-gt-txt { flex: 0 0 auto; width: 100%; }
  .ds-gteaser.is-live .ds-gt-shot {
    flex: 0 0 auto; align-self: stretch; width: 100%; height: auto; aspect-ratio: 700 / 240;
  }
  .ds-gteaser.is-live .ds-gt-shot .game-strip iframe { pointer-events: auto; }
}

@media (min-width: 1025px) {
  .ds-gteaser { max-width: 1100px; gap: 26px; padding: 18px 22px; margin: 26px auto 30px; }
  .ds-gteaser h3 { font-size: 21px; margin: 7px 0 5px; }
  .ds-gteaser p { font-size: 14px; margin: 0 0 12px; }
  .ds-gt-go { font-size: 14.5px; padding: 11px 18px; }
  .ds-gt-shot { flex: 0 0 360px; height: 132px; }
}