/* 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,
.ds-app h2 .ds-h-phone { 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.miss { box-shadow: inset 0 0 0 2px #c2410c; border-radius: 14px; }
  #search .hb-lab .req-star { color: #c2410c; font-weight: 800; }
  #search .hb-bar-note {
    display: none;
    margin: 10px 0 0;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
  }
  #search .hb-bar-note.on { display: block; }
  #search .search-miss,
  #search .search-miss.on { display: 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 #wxWater { order: 3; }
  #search #wxUv { order: 4; }
  #search .wx-time { order: 5; margin: 0; font-size: 13px; color: #cfe4f2; display: inline-flex; align-items: center; }
  #search .wx-time::before { content: "\00B7"; margin-right: 6px; color: #8fe9df; }
  #search .wx-meta { font-size: 13px; font-weight: 700; color: #cfe4f2; }
  #search .wx-uv { color: #42f5e6; }
  #search .uv-q { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 5px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 800; line-height: 1; }

  /* ---- 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: 14px auto 0;
    padding: 0;
    display: block;
  }
  .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: block;
    position: static;
    width: 100%;
    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: one horizontal article card under the search hero */
  .ds-explore .fteaser { flex-direction: row; align-items: stretch; height: 100%; }
  .ds-explore .fteaser-img { flex: 0 0 38%; width: 38%; height: auto; min-height: 168px; }
  .ds-explore .fteaser-body {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 18px 24px; text-align: left;
  }
  .ds-explore .fteaser-kick { padding: 0; }
  .ds-explore .fteaser-body h3 { padding: 0; margin: 6px 0 8px; font-size: 20px; 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 ----
     Compact navy strip: the download line and the official Play badge.
     No photo, no phone mockup, no second download button. Upright tablets
     restore the two-column band in the 600-1024 block below. */
  .ds-app {
    display: block;
    width: auto;
    max-width: none;
    margin: 12px 16px 10px;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background-image: none;
    background: #0b1b2b;
    box-shadow: 0 8px 22px rgba(6, 47, 58, .18);
    min-height: 0;
  }
  .ds-app::before { display: none; }
  .ds-app-in {
    position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: center; gap: 12px; padding: 16px 16px 18px; text-align: center;
  }
  .ds-app-txt { width: 100%; }
  .ds-app-kick,
  .ds-app p,
  .ds-dl,
  .ds-phone { display: none; }
  .ds-app h2 {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.2px;
    color: #fff;
    margin: 0 auto;
    max-width: 280px;
    text-shadow: none;
  }
  .ds-app h2 .ds-h-long,
  .ds-app h2 .ds-h-short { display: none; }
  .ds-app h2 .ds-h-phone { display: inline; }
  .ds-app-cta { display: flex; flex-direction: column; align-items: center; gap: 0; width: auto; }
  .ds-play { display: inline-block; line-height: 0; text-decoration: none; }
  .ds-play img { display: block; height: 56px; 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 {
    display: block;
    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,
  .ds-app h2 .ds-h-phone { display: none; }
  .ds-app h2 .ds-h-short { display: inline; }
  .ds-phone {
    display: block;
    order: 2;
    flex: 0 0 auto;
    width: 124px;
    height: 236px;
    border-radius: 24px;
    border: 4px solid #0b1b2b;
    overflow: hidden;
    position: relative;
    background: #0b1b2b;
    box-shadow: 0 10px 24px rgba(6, 47, 58, .22);
  }
  .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 { order: 3; gap: 0; align-items: center; margin-top: 4px; }
  .ds-dl { display: none; }
  .ds-play img { height: 52px; }
}

/* ---- game teaser (600px and up) ----
   Closed teaser after the FAQ. Play starts the game in place. Phones use the
   same slot, with the running game and its title block. */
@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-shot .game-hit { display: 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; }
}