/* Promark · public site. Photos carry the page; type stays quiet. Phone-first. */
:root {
  --sea-900: #08344a; --sea-700: #0b4f6c; --sea-500: #1374a0; --sea-300: #4fb3d9; --sea-50: #e8f4f9;
  --sun: #f58a3c; --sun-dark: #dd7225; --sun-soft: #fff1e6;
  --ink: #1c2b33; --ink-2: #45545e; --muted: #728590; --line: #e1e8ed; --soft: #f4f8fa; --sand: #faf5ec;
  --wa: #25a85a; --wa-dark: #1e8c4a; --ok: #2e7d4f; --ok-soft: #e6f5ec; --bad: #c03a1f; --bad-soft: #fdeee9;
  --r: 14px; --shadow: 0 8px 28px rgba(11,79,108,.09);
  --ctl-selected: var(--sea-500); --ctl-focus: var(--sea-500); --ctl-focus-ring: rgba(19,116,160,.2);
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--ink); background: #fff; }
a { color: var(--sea-500); text-decoration: none; } a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.015em; }
h1 { font-size: clamp(28px, 5.5vw, 46px); font-weight: 800; }
h2 { font-size: clamp(22px, 3.4vw, 32px); font-weight: 800; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 10px; } .lead { font-size: 17px; color: var(--ink-2); max-width: 60ch; } .muted { color: var(--muted); } .mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sun-dark); margin-bottom: 6px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; } .wrap.narrow { max-width: 760px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--sea-50); color: var(--sea-700); white-space: nowrap; }
.pill.sun { background: var(--sun-soft); color: var(--sun-dark); } .pill.ok { background: var(--ok-soft); color: var(--ok); }
.btn { border-radius: 999px; }
.btn.book { background: var(--sun); border-color: var(--sun); color: #fff; } .btn.book:hover { background: var(--sun-dark); }
.btn.sea { background: var(--sea-500); border-color: var(--sea-500); color: #fff; } .btn.sea:hover { background: var(--sea-700); }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; } .btn.wa:hover { background: var(--wa-dark); }
.btn.wa::before, .wa-ico::before { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 12 12 0 0 0 4.6 4c.6.3 1.1.4 1.5.5.6.2 1.2.2 1.6.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.5-.3z'/></svg>") center/contain no-repeat; }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; } .btn.ghost:hover { background: rgba(255,255,255,.14); }
.btn.light { background: #fff; border-color: #fff; color: var(--sea-700); }

.insurance { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fffdf6; } .insurance p { margin: 0 0 6px; } .insurance a { word-break: break-all; font-weight: 700; }
.dob { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr; gap: 8px; max-width: 420px; } .ins-names { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; font-weight: 600; } .ins-names span { color: var(--sea-700); }
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0 6px; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.payto { display: grid; gap: 14px; margin: 12px 0; align-items: start; }
.qr-box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .qr-box .qr { width: 100%; max-width: 220px; border-radius: 10px; border: 1px solid var(--line); } .qr-box .hint { max-width: 36ch; }
@media (min-width: 560px) { .payto { grid-template-columns: 240px 1fr; } }
.terms h2 { font-size: 18px; margin: 26px 0 8px; } .terms p { margin: 0 0 12px; line-height: 1.6; } .terms { max-width: 760px; }
.agree { align-items: flex-start; } .agree .box { margin-top: 1px; } .agree span.t { line-height: 1.45; }

/* header: logo, language, WhatsApp, menu. Fits a 320px phone. */
.site-head { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 8px; min-height: 56px; }
.brand { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand .logo { height: 30px; width: auto; display: block; } @media (min-width: 960px) { .brand .logo { height: 40px; } .site-head .wrap { min-height: 64px; } }
.section-logo { height: 46px; width: auto; display: block; margin-bottom: 10px; }
.foot-logo { width: 96px; height: 96px; border-radius: 50%; display: block; margin-bottom: 12px; }
.site-nav { display: none; gap: 2px; margin-left: 8px; }
.site-nav a { white-space: nowrap; padding: 0 12px; border-radius: 999px; color: var(--ink-2); font-weight: 700; min-height: 40px; display: inline-flex; align-items: center; } .site-nav a:hover { background: var(--soft); text-decoration: none; }
.langs { display: flex; gap: 0; margin-left: auto; flex: none; }
.langs a { min-width: 36px; min-height: 40px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 700; } .langs a.on { background: var(--sea-50); color: var(--sea-700); }
@media (min-width: 400px) { .langs a { min-width: 40px; padding: 0 8px; } }
.site-head .btn.wa { width: 40px; min-height: 40px; padding: 0; white-space: nowrap; flex: none; } .site-head .btn.wa .t { display: none; }
.menu-btn { width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.menu-btn span { width: 18px; height: 2px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
.mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; } .mobile-nav.open { display: block; }
.mobile-nav a { display: flex; align-items: center; min-height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink); font-size: 16px; }
@media (min-width: 1100px) { .site-nav { display: flex; } .menu-btn { display: none; } .site-head .btn.wa { width: auto; padding: 0 16px; } .site-head .btn.wa .t { display: inline; } }

/* hero */
.hero { position: relative; min-height: clamp(460px, 72vh, 680px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--sea-900); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,52,74,.1) 0%, rgba(8,52,74,.2) 40%, rgba(8,52,74,1) 100%); }
.hero .wrap { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 36px; width: 100%; }
.hero h1 { max-width: 16ch; text-shadow: 0 2px 24px rgba(0,0,0,.3); } .hero .lead { color: rgba(255,255,255,.9); margin-top: 10px; max-width: 46ch; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .cta-row .btn { min-height: var(--ctl-h-lg); padding-left: 22px; padding-right: 22px; }
.trust { display: flex; gap: 6px 20px; flex-wrap: wrap; margin-top: 22px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85); } .trust span::before { content: "✓"; margin-right: 6px; color: #9be1ff; }
@media (min-width: 800px) { .hero .wrap { padding-bottom: 60px; } }
.hero-band { background: var(--sea-900); color: #fff; padding: 4px 0 28px; } .hero-band .lead { color: rgba(255,255,255,.9); margin: 0; max-width: 60ch; } .hero-band .trust { margin-top: 14px; }

/* sections */
.block { padding: 44px 0; } .block.alt { background: var(--soft); } .block.sand { background: var(--sand); }
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .block-head .lead { margin: 6px 0 0; }

/* cards: the title link stretches over the whole card, so any tap on it opens the product */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.card:hover { box-shadow: 0 12px 36px rgba(11,79,108,.16); }
.card:active { transform: scale(.995); }
.card-link { color: inherit; } .card-link:hover { text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r); }
.card-link:focus-visible { outline: none; } .card-link:focus-visible::after { box-shadow: inset 0 0 0 3px var(--sea-300); }
.card:hover .card-link { color: var(--sea-700); }
.card .photo { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sea-50); }
.card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .card:hover .photo img { transform: scale(1.03); }
.card .photo .pill { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.92); }
.card .photo .code { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 9px; background: rgba(8,52,74,.75); color: #fff; font-weight: 800; font-size: 16px; display: grid; place-items: center; backdrop-filter: blur(4px); }
.card .photo.placeholder, .gallery.placeholder { display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 40px; font-weight: 800; background: linear-gradient(135deg, var(--sea-300), var(--sea-700)); }
.card .photo.placeholder.charter, .gallery.placeholder.charter { background: linear-gradient(135deg, #f5a524, #c2410c); }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { font-size: 19px; } .card-body .sub { color: var(--ink-2); margin: -4px 0 0; }
.meta { display: flex; gap: 4px 12px; flex-wrap: wrap; color: var(--muted); font-size: 14px; font-weight: 600; margin: 0; }
.price { margin: 2px 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .price small { color: var(--muted); font-size: 14px; } .price .alt { color: var(--ink-2); font-size: 14px; }
.card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.card-actions .btn { flex: 1; position: relative; z-index: 2; }

/* photo gallery: swipe on phones, arrows and thumbnails on computers, tap for full screen */
.gallery { position: relative; border-radius: var(--r); aspect-ratio: 4 / 3; }
.gallery:not(.placeholder) { aspect-ratio: auto; }
.gal-view { position: relative; }
.gal-track { display: flex; aspect-ratio: 4 / 3; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r); background: var(--sea-50); scrollbar-width: none; overscroll-behavior-x: contain; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-item { flex: 0 0 100%; scroll-snap-align: center; cursor: zoom-in; } .gal-item img { width: 100%; height: 100%; object-fit: cover; }
.gal-count { position: absolute; right: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(8,52,74,.7); color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; display: none; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.gal-nav.prev { left: 10px; } .gal-nav.next { right: 10px; }
.gal-thumbs { display: none; }
@media (hover: hover) { .gal-nav { display: grid; } }
@media (min-width: 720px) {
  .gal-track { aspect-ratio: 16 / 10; }
  .gal-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
  .gal-thumbs img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 8px; cursor: zoom-in; } .gal-thumbs a:hover img { opacity: .85; }
}

/* cruise: photos beside the next sailings; each sailing row is one tap to the booking form */
.split { display: grid; grid-template-columns: 1fr; gap: 16px; }
.sail-list { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.sail-head { padding: 14px 16px 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sail-list .row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); color: inherit; }
.sail-list a.row:hover { background: var(--soft); text-decoration: none; }
.sail-list .row.full { color: var(--muted); } .sail-list .row.full .seats b { color: var(--muted); }
.sail-list .d { font-weight: 800; font-size: 16px; line-height: 1.25; } .sail-list .d small { display: block; font-weight: 600; color: var(--muted); font-size: 13px; }
.sail-list .seats { margin-left: auto; text-align: right; font-size: 14px; color: var(--muted); font-weight: 600; } .sail-list .seats b { display: block; color: var(--ink); font-size: 14px; white-space: nowrap; }
.sail-list .bar { display: block; height: 5px; border-radius: 3px; background: var(--line); width: 72px; margin: 4px 0 0 auto; overflow: hidden; } .sail-list .bar i { display: block; height: 100%; background: var(--sea-300); }
.sail-list .empty { padding: 16px; color: var(--muted); }
.sail-list .row.more { font-weight: 700; color: var(--sea-500); justify-content: space-between; min-height: 46px; } .sail-list .row.more::after { content: "›"; font-size: 22px; line-height: 1; }
@media (min-width: 800px) { .split { grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; } }

/* how it works + faq */
.policy { white-space: pre-line; color: var(--ink-2); }

/* footer */
.site-foot { background: var(--sea-900); color: rgba(255,255,255,.82); padding: 40px 0; font-size: 15px; }
.site-foot .wrap { display: grid; grid-template-columns: 1fr; gap: 22px; } .site-foot a { color: #fff; } .site-foot .muted { color: rgba(255,255,255,.55); }
.site-foot h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
@media (min-width: 720px) { .site-foot .wrap { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot .foot-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 20px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; } .foot-links a { color: #c9d6de; padding: 6px 0; } .foot-links a:hover { text-decoration: underline; }

/* product page */
.crumbs { font-size: 14px; color: var(--muted); padding: 12px 0 8px; margin: 0; } .crumbs a { color: var(--ink-2); font-weight: 600; }
.crumbs a::before, .crumbs a.back::before { content: "‹ "; }
.prod { display: grid; grid-template-columns: 1fr; gap: 20px; padding-bottom: 44px; }
.event-when { font-size: 20px; margin: 6px 0 4px; color: var(--ink); line-height: 1.35; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 16px 0; }
.facts div { background: var(--soft); border-radius: 10px; padding: 10px 12px; }
.facts dt { font-size: 13px; font-weight: 600; color: var(--muted); } .facts dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; }
.from-sg { background: var(--soft); border-radius: 12px; padding: 16px 18px; margin: 4px 0 8px; } .from-sg h2 { font-size: 18px; margin: 0 0 8px; } .from-sg p:last-child { margin-bottom: 0; }
.route { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 16px; } .route span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 14px; }
.buybox { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; }
.buybox .price { margin-bottom: 8px; } .buybox .btn { width: 100%; margin-top: 12px; } .buybox ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11,79,108,.08); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); }
.buybar .wrap { display: flex; align-items: center; gap: 12px; } .buybar .price { margin: 0; flex: none; gap: 4px; } .buybar .price b { font-size: 21px; } .buybar .btn { flex: 1; }
body.has-buybar .site-foot { padding-bottom: 96px; }
@media (min-width: 860px) { .prod { grid-template-columns: 1.3fr .9fr; align-items: start; } .buybox { position: sticky; top: 80px; } .buybar { display: none; } body.has-buybar .site-foot { padding-bottom: 40px; } }

/* booking form */
.book-head { padding: 4px 0 12px; } .book-head .sub { color: var(--ink-2); margin: 4px 0 0; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 2px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.panel h3 { padding: 14px 0 2px; }
.panel > .frow:first-child { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
turbo-frame { display: block; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.slot-empty { color: var(--muted); padding: 6px 0; }
.totalbar { position: sticky; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11,79,108,.08); padding: 8px 0 max(8px, env(safe-area-inset-bottom)); margin-top: 8px; }
.totalbar .wrap { display: flex; align-items: center; gap: 12px; }
.totalbar .tot { line-height: 1.15; min-width: 0; } .totalbar .tot small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; } .totalbar .tot b { font-size: 22px; font-weight: 800; }
.totalbar .btn { flex: 1; }

/* pay page */
.hold { background: var(--sand); border-radius: var(--r); padding: 14px 16px; margin: 14px 0; font-size: 20px; font-weight: 600; line-height: 1.35; }
.hold .countdown { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sun-dark); white-space: nowrap; }
.kv { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 12px 0; }
.kv div { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--soft); border-radius: 10px; padding: 6px 8px 6px 12px; min-height: 48px; }
.kv dt { font-size: 14px; font-weight: 600; color: var(--muted); } .kv dd { margin: 0; font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.timeline { list-style: none; padding: 0; margin: 10px 0 0; } .timeline li { display: flex; gap: 12px; padding: 6px 0; color: var(--ink-2); } .timeline li::before { content: "○"; color: var(--sea-300); } .timeline li.done::before { content: "●"; color: var(--ok); }
.flash { max-width: 760px; margin: 12px auto 0; padding: 0 16px; }
/* Transfer as a second button under "Pay now", not a link below a line (27 Oct: 7 of 11 guests who went to Stripe's
   page left without trying; 2 of them came back and paid by transfer). */
.alt-pay { margin-top: 12px; } .alt-pay > summary { cursor: pointer; font-weight: 700; font-size: 16px; color: var(--sea-700); list-style: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 8px 18px; border: 1.5px solid var(--sea-500); border-radius: 999px; background: #fff; text-align: center; } .alt-pay > summary:hover { background: var(--sea-50, #f0f7fb); } .alt-pay[open] > summary { margin-bottom: 6px; } .alt-pay > summary::-webkit-details-marker { display: none; } .alt-pay > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; } .alt-pay[open] > summary::before { transform: rotate(45deg); } .alt-pay > h2 { margin-top: 10px; }

.directions { margin-top: 32px; } .directions h2 { margin: 0 0 12px; } .dir-grid { display: grid; gap: 14px; } @media (min-width: 720px) { .dir-grid { grid-template-columns: 5fr 7fr; align-items: start; } .dir-grid.solo { grid-template-columns: 1fr; } } .dir-media video, .dir-media img { width: 100%; border-radius: 12px; display: block; background: #000; } .dir-media video { aspect-ratio: 16 / 9; object-fit: cover; } .dir-media img { background: none; } .dir-text p { margin: 0 0 10px; line-height: 1.55; } .dir-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.input.promo.ok { border-color: var(--ok); } .input.promo.bad { border-color: var(--bad); } .promo-msg:empty { display: none; }

/* Questions: /faq and the "Good to know" boxes on product and booking pages */
.faq-search { display: block; margin: 16px 0 8px; } .faq-search .input { width: 100%; }
.faq-group { margin-top: 26px; } .faq-group h2 { font-size: 20px; margin: 0 0 4px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); scroll-margin-top: 72px; }
.faq-item > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; font-weight: 700; color: var(--ink); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: 0 0 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-a { padding: 0 0 12px; color: var(--ink-2); position: relative; max-width: 68ch; } .faq-a p { margin: 0 0 8px; }
.faq-link { position: absolute; right: 0; bottom: 12px; color: var(--muted); font-weight: 700; opacity: 0; } .faq-item:hover .faq-link, .faq-item:focus-within .faq-link { opacity: 1; }
.faq-empty { margin-top: 22px; }
.faq-inline { margin-top: 32px; } .faq-inline h2 { font-size: 20px; margin: 0 0 4px; } .faq-more { margin-top: 10px; font-weight: 700; }

/* floating WhatsApp button on phones; hidden where the page already has its own bar */
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 52px; height: 52px; border-radius: 50%; background: var(--wa); box-shadow: 0 8px 24px rgba(37,168,90,.4); display: grid; place-items: center; }
.fab .wa-ico::before { width: 28px; height: 28px; display: block; }
@media (min-width: 800px) { .fab { display: none; } }
body.has-bar .fab, body.has-buybar .fab { display: none; }

/* member page */
.member-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 18px 0 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sand); }
.member-balance b { font-size: 44px; font-weight: 800; line-height: 1; } .member-balance span { font-size: 18px; font-weight: 700; color: var(--ink-2); }
.member-balance small { flex: 1 0 100%; color: var(--muted); font-size: 14px; }
.member-book { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.member-rides { width: 100%; border-collapse: collapse; font-size: 15px; } .member-rides td { padding: 10px 0; border-bottom: 1px solid var(--line); } .member-rides td.n { text-align: right; font-weight: 700; white-space: nowrap; }

/* Ocean Diary voyages: one long page, photos first, the enquiry form at the end */
.od-facts { margin: 0; }
.od-list { margin: 12px 0 14px; padding-left: 20px; color: var(--ink-2); } .od-list li { margin: 6px 0; }
/* team building: the video beside the words on computers, under them on phones; company photos in a grid */
.tb-top { background: var(--sea-900); color: #fff; } .tb-top h1 { color: #fff; max-width: 16ch; } .tb-top .lead { color: rgba(255,255,255,.9); margin-top: 10px; max-width: 46ch; }
.tb-top .wrap { display: grid; gap: 24px; align-items: center; }
.tb-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); background: #000; }
@media (min-width: 900px) { .tb-top .wrap { grid-template-columns: 1fr 1.3fr; } }
.tb-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .tb-photos figure { margin: 0; } .tb-photos figcaption { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--ink-2); } .tb-photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
@media (min-width: 720px) { .tb-photos { grid-template-columns: repeat(4, 1fr); } }
.tb-steps { margin: 12px 0 18px; padding-left: 22px; color: var(--ink-2); } .tb-steps li { margin: 8px 0; } .tb-pick { margin: 0 0 -2px; }
.tb-boats { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }   /* five boats fit one row on a computer */
.tb-packs { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }   /* three packages fill the row */
.tb-every { margin-top: 22px; } .tb-every h3 { margin: 0 0 4px; } .tb-terms { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); max-width: 70ch; }
.od-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .od-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.od-route { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; }
.od-route-photo { width: calc(100% + 32px); max-width: none; margin: -16px -16px 14px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r) var(--r) 0 0; }
.od-days { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
.od-days li { display: grid; grid-template-columns: 86px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); } .od-days b { color: var(--ink); }
.od-boats { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; align-items: start; }
.od-boat-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.od-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0 4px; } .od-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.od-option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0 2px; border-top: 1px solid var(--line); margin-top: 6px; }
.od-option > div { flex: 1 1 180px; } .od-option small { display: block; color: var(--muted); font-size: 14px; } .od-option .price { margin: 0; } .od-option .price b { font-size: 20px; }
.od-people { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.od-people article { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.od-people img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; } .od-people p.muted { margin: 0; font-size: 15px; }
.od-teaser { color: #fff; text-decoration: none !important; display: grid; grid-template-columns: 1fr; border-radius: var(--r); overflow: hidden; background: var(--sea-900); color: #fff; box-shadow: var(--shadow); }
.od-teaser img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .od-teaser > div { padding: 20px; } .od-teaser .lead { color: rgba(255,255,255,.85); margin-top: 8px; }
@media (min-width: 720px) { .od-people { grid-template-columns: 1fr 1fr; } .od-teaser { grid-template-columns: 1.2fr 1fr; align-items: center; } .od-teaser > div { padding: 28px; } }
@media (min-width: 900px) { .od-boats { grid-template-columns: 1.4fr 1fr; } }
.od-people .od-noface { width: 96px; height: 96px; border-radius: 50%; background: var(--sea-50); display: block; }
.ins-waiting a { color: var(--sun-dark); font-weight: 700; }
/* A switched-off package: its page says so instead of offering to book. */
.closed { margin: 10px 0; font-weight: 700; color: var(--ink-2); } .buybar .closed { display: none; }
/* Time Track: Joe's poster's look (Oct 2026). Night water, a neon lime stroke, heavy italic capitals, a podium in
   gold, silver and bronze. Only the race's pages wear it; its booking form stays like every other checkout. */
:root { --tt-bg: #070b10; --tt-panel: rgba(255,255,255,.06); --tt-line: rgba(255,255,255,.14); --tt-volt: #d4ff2a; --tt-volt-ink: #0b1200;
  --tt-gold: #f2c14e; --tt-silver: #cfd6dd; --tt-bronze: #d08a54; }
.tt { color: #fff; background-color: var(--tt-bg); }
.tt a:not(.btn) { color: #fff; text-decoration: underline; text-decoration-color: var(--tt-volt); text-underline-offset: 3px; }
.tt-display { font-family: "Arial Black", "Helvetica Neue", Arial, "PingFang SC", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; margin: 0; color: #fff; }
.tt-display small { display: block; font-size: .42em; letter-spacing: .02em; margin-bottom: .1em; }
.tt-display .spaced { display: block; font-size: .36em; font-style: normal; letter-spacing: .32em; margin-top: .35em; }
.tt-volt { color: var(--tt-volt); text-shadow: 0 0 24px rgba(212,255,42,.25); }
.tt-tag { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.tt-stroke { display: inline-block; background: var(--tt-volt); color: var(--tt-volt-ink); padding: 6px 18px 6px 14px; transform: skew(-10deg); border-radius: 3px 16px 3px 16px; box-shadow: 0 6px 24px rgba(212,255,42,.22); }
.tt-stroke > span { display: inline-block; transform: skew(10deg); font-weight: 800; } .tt-stroke b { font-family: "Arial Black", Arial, sans-serif; font-style: italic; font-size: 1.6em; }
.btn.volt { background: var(--tt-volt); border-color: var(--tt-volt); color: var(--tt-volt-ink); } .btn.volt:hover { background: #c3ef12; }
.tt .btn.ghost { border-color: rgba(255,255,255,.5); }
.tt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; } .tt-acts .closed { color: #fff; margin: 0; }

/* The race's page: the poster up top, the usual rules and buy box below. */
.tt-hero { padding: 4px 0 40px; background-image: radial-gradient(120% 90% at 75% 0%, #24445e 0%, #0d1a26 45%, var(--tt-bg) 80%); }
.tt-hero .crumbs a { color: rgba(255,255,255,.8); text-decoration: none; } .tt-hero .tt-tag { margin-top: 18px; }
.tt-hero h1 { font-size: clamp(44px, 12vw, 92px); }
.tt-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; } .tt-meta span { padding: 6px 12px; border-radius: 999px; background: var(--tt-panel); border: 1px solid var(--tt-line); font-weight: 700; font-size: 14px; }
.tt-addr { margin: 10px 0 0; font-size: 14px; color: rgba(255,255,255,.72); }
.tt-price { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 26px 0 0; } .tt-price .extra { color: rgba(255,255,255,.82); font-weight: 700; padding-left: 16px; border-left: 2px solid var(--tt-line); }
.tt-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; } .tt-steps li { padding: 12px 14px; border-radius: 12px; background: var(--tt-panel); border: 1px solid var(--tt-line); }
.tt-steps b { display: block; font-style: italic; text-transform: uppercase; letter-spacing: .02em; } .tt-steps span { font-size: 14px; color: rgba(255,255,255,.7); }
@media (min-width: 720px) { .tt-hero { padding-bottom: 56px; } .tt-steps { grid-template-columns: repeat(3, 1fr); max-width: 760px; } }
.tt-prizes { margin: 28px 0 0; max-width: 760px; } .tt-prizes h2 { margin: 0 0 10px; font-size: 15px; font-style: italic; text-transform: uppercase; letter-spacing: .04em; color: var(--tt-volt); }
.tt-prizes ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .tt-prizes li { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--tt-panel); border: 1px solid var(--tt-line); }
.tt-prizes li span { min-width: 34px; font-weight: 800; font-style: italic; color: var(--tt-volt); } .tt-prizes li:first-child b { font-size: 18px; }
.tt-prizes p { margin: 10px 0 0; font-size: 14px; color: rgba(255,255,255,.7); }
.wrap.after-hero { padding-top: 28px; } .race-rules { margin: 0; } .gallery + .race-rules { margin-top: 22px; }

/* The board: each round's podium. */
.tt-page { padding: 44px 0 96px; min-height: 70vh; background-image: radial-gradient(110% 60% at 50% 0%, #1d3a52 0%, var(--tt-bg) 70%); }
@media (min-width: 720px) { .tt-page { padding-top: 72px; } }
.tt-page h1 { font-size: clamp(42px, 10vw, 76px); } .tt-page .intro { margin: 18px 0 0; color: rgba(255,255,255,.75); max-width: 52ch; }
.tt-page .note { margin: 14px 0 0; color: rgba(255,255,255,.65); } .tt-page .next { margin: 0; color: rgba(255,255,255,.85); flex-basis: 100%; }
.tt-round { margin-top: 40px; } .tt-round h2 { margin: 0 0 16px; font-size: 15px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.podium li { --c: var(--tt-silver); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "medal place time" "medal name time"; align-items: center; gap: 2px 14px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.podium .p1 { --c: var(--tt-gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tt-gold) 30%, transparent), 0 12px 40px rgba(242,193,78,.18); } .podium .p3 { --c: var(--tt-bronze); }
.podium .medal { grid-area: medal; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-style: italic; font-size: 20px; color: #1a1406; background: radial-gradient(circle at 35% 30%, #fff 0%, var(--c) 45%, color-mix(in srgb, var(--c) 60%, #000) 100%); }
.podium .place { grid-area: place; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.podium .name { grid-area: name; font-size: 18px; font-weight: 800; }
.podium .time { grid-area: time; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.podium .p1 .time { color: var(--tt-volt); }
.podium.waiting .name, .podium.waiting .time { color: rgba(255,255,255,.4); }
@media (min-width: 720px) {
  .podium { grid-template-columns: repeat(3, 1fr); grid-template-areas: "p2 p1 p3"; align-items: end; gap: 14px; }
  .podium li { grid-template-columns: 1fr; grid-template-areas: "medal" "place" "name" "time"; justify-items: center; text-align: center; padding: 22px 14px; gap: 6px; }
  .podium .p1 { grid-area: p1; padding-top: 34px; padding-bottom: 34px; } .podium .p2 { grid-area: p2; } .podium .p3 { grid-area: p3; }
  .podium .p1 .medal { width: 56px; height: 56px; font-size: 24px; } .podium .p1 .time { font-size: 32px; }
}

/* On the home page, while there are times to book: the race's card in the same colours. */
.race-strip { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "date head" "body body" "acts acts"; gap: 14px 16px; align-items: center; margin: 0 0 24px; padding: 20px; border-radius: var(--r); color: #fff; box-shadow: var(--shadow);
  background: radial-gradient(120% 140% at 85% 0%, #24445e 0%, #0d1a26 45%, var(--tt-bg) 85%); }
.race-strip::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 72px; opacity: .1; pointer-events: none;   /* a chequered flag's edge */
  background: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0) 0 0 / 24px 24px; }
.race-strip .date { grid-area: date; align-self: start; margin: 0; width: 64px; border-radius: 12px; background: #fff; color: var(--tt-bg); text-align: center; overflow: hidden; line-height: 1.1; }
.race-strip .date small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 0 3px; }
.race-strip .date small:first-child { background: var(--tt-volt); color: var(--tt-volt-ink); } .race-strip .date b { display: block; font-size: 28px; font-weight: 800; padding-top: 4px; }
.race-strip .head { grid-area: head; } .race-strip .body { grid-area: body; }   /* not positioned: the title's link covers the whole card, like a package card */
.race-strip:hover .card-link { color: var(--tt-volt); }
.race-strip .eyebrow { margin: 0 0 6px; color: var(--tt-volt); } .race-strip h3 { margin: 0; font-size: 26px; }
.race-strip .lead { margin: 0; color: rgba(255,255,255,.86); max-width: 52ch; }
.race-strip .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; } .race-strip .chips span { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid var(--tt-line); color: #fff; }
.race-strip .acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 10px; position: relative; z-index: 2; } .race-strip .acts .btn { flex: 1 1 160px; justify-content: center; }
@media (min-width: 860px) { .race-strip { grid-template-columns: auto 1fr auto; grid-template-areas: "date head acts" "date body acts"; align-items: end; padding: 24px 104px 24px 24px; gap: 8px 24px; }
  .race-strip .body { align-self: start; } .race-strip .date { width: 76px; } .race-strip .date b { font-size: 34px; }
  .race-strip .acts { align-self: center; flex-direction: column; } .race-strip .acts .btn { flex: none; } }

/* Halloween: an event page can wear the night (Product spec "theme": "halloween", Zhenyi 21 Oct): dusk purple to
   near-black, pumpkin orange for the date and the button. Only the page's own content; header and checkout stay. */
.theme-halloween main { --ink: #f6f0fb; --ink-2: #dcd2e8; --muted: #a798ba; --line: rgba(255,255,255,.12); --soft: rgba(255,255,255,.07);
  --sun: #ff7a1a; --sun-dark: #e8650a; --hw-glow: rgba(255,122,26,.35);
  color: var(--ink); background: radial-gradient(130% 55% at 50% 0%, #2d1a45 0%, #160f22 55%, #0d0914 100%); }
.theme-halloween .crumbs a { color: var(--ink-2); }
.theme-halloween .prod h1 { font-size: clamp(30px, 7vw, 46px); letter-spacing: -.01em; }
.theme-halloween .event-when { color: var(--sun); font-size: 22px; text-shadow: 0 0 22px var(--hw-glow); }
.theme-halloween .event-when::before { content: "🎃 "; }
.theme-halloween .buybox { background: #1c1329; border-color: rgba(255,122,26,.35); box-shadow: 0 0 0 1px rgba(255,122,26,.12), 0 18px 40px rgba(0,0,0,.45); }
.theme-halloween .buybar { background: #160f22; border-top-color: rgba(255,122,26,.35); box-shadow: 0 -8px 24px rgba(0,0,0,.5); }
.theme-halloween .btn.book { box-shadow: 0 6px 24px var(--hw-glow); }
.theme-halloween .gallery img { border-radius: var(--r); }
.theme-halloween .gal-nav { background: rgba(13,9,20,.72); color: #fff; box-shadow: 0 0 0 1px rgba(255,122,26,.4); }
.theme-halloween main a:not(.btn) { color: #ffb27a; }
.theme-halloween .site-foot { background: #0d0914; }
.photo-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
/* The pink jet ski (23 Oct): its tick on the form, and a heart on the times it's still free. */
.pink-pick { font-weight: 600; }
.pink-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #fdebf3; color: #8c2453; font-weight: 600; font-size: 15px; max-width: 60ch; }
/* A package page that picks up from the ad it came from (Opening, 27 Oct), the ride in four steps, and questions that open. */
.opening { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.opening-media { display: block; width: 100%; max-height: 78vh; object-fit: cover; border-radius: var(--r); background: var(--soft); }
.ticks { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; max-width: 60ch; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-2); } .ticks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--sea-50); color: var(--sea-700); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.opening-book { margin-top: 16px; } .opening-book .btn { width: 100%; max-width: 360px; }
.pkg-title { font-size: 24px; }
.steps { margin: 22px 0 8px; } .steps h2 { font-size: 18px; margin: 0 0 10px; }
.steps ol { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { counter-increment: step; position: relative; padding-left: 40px; min-height: 28px; color: var(--ink-2); max-width: 62ch; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--sun); color: #fff; font-weight: 800; display: grid; place-items: center; }
.from-sg .faq-item:last-child { border-bottom: 0; } .from-sg .faq-item > summary { min-height: 40px; }
/* Boat pages: Promark Cruise's Google rating under the name, and a sharing cruise's next sailings (27 Oct). */
.rating { margin: 6px 0 0; font-weight: 700; font-size: 15px; } .rating a { color: var(--ink-2); } .rating .stars { color: #f5a524; letter-spacing: 1px; }
.prod-sailings { margin: 18px 0 6px; }

/* Gift voucher page (27 Oct): a card to screenshot or print. Joe's design goes in --gift-bg later. */
.gift-page { padding-top: 22px; padding-bottom: 56px; }
/* The picture (27 Oct, made simple on purpose: sunrise, a few waves, the middle left plain for the words) is 2:3, so the
   card stays a portrait card on wide screens and the sun and waves aren't cropped off. */
.gift-card { --gift-bg: url("/assets/gift-bg-6d124a43.jpg"), linear-gradient(160deg, #fff6ec 0%, #e8f3fa 100%); background: var(--gift-bg); background-size: cover; background-position: center; border: 1px solid var(--line); border-radius: 20px; padding: 34px 22px 92px; text-align: center; max-width: 420px; margin-inline: auto; }
.gift-card h1 { margin: 6px 0 4px; font-size: 28px; line-height: 1.2; }
.gift-kicker { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sea-700); font-weight: 700; }
.gift-ride { margin: 0; font-size: 18px; font-weight: 600; }
.gift-message { margin: 14px auto 0; max-width: 30ch; font-size: 17px; font-style: italic; overflow-wrap: anywhere; }
.gift-from { margin: 8px 0 0; color: var(--ink-2); }
.gift-qr-box { margin: 18px auto 8px; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; padding: 10px; border-radius: 12px; }
.gift-qr-box small { color: var(--ink-2); }
.gift-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 14px; color: var(--ink-2); }
.gift-banner { margin-bottom: 16px; }
.gift-door { margin: 10px 0 0; font-size: 15px; } .gift-door a { font-weight: 600; }
@media print { .gift-page ~ *, .gift-page .btn { display: none !important; } .gift-card { border: 0; } }

/* A date in JB (30 Oct): a guide page, the day as a timeline, then which jet ski and what it costs for two */
.date-hero { margin: 18px 0 0; } .date-top .lead { margin-top: 14px; }
.date-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); margin: 6px 0 10px; } .date-hero .date-photo { aspect-ratio: 16 / 10; margin: 0; }
.date-ph { display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; background: repeating-linear-gradient(135deg, var(--soft) 0 12px, #fff 12px 24px); border: 1px dashed var(--line); color: var(--muted); font-size: 14px; }
.date-ph span { max-width: 32ch; }
.date-plan h3 { margin: 0 0 10px; } .date-plan li { grid-template-columns: 70px 1fr; padding: 14px 0; }
.date-which { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.date-choice { color: inherit; text-decoration: none !important; } .date-choice b { font-size: 18px; } .date-choice span span { color: var(--ink-2); }
.date-choice:hover { border-color: var(--sea-300); } .date-art { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: contain; background: var(--soft); border-radius: var(--r) var(--r) 0 0; }
img.date-art { width: 56%; max-width: 220px; margin: 12px auto 0; background: none; }   /* smaller on phones (Zhenyi, 30 Oct) */ .date-art.date-ph { border: 0; border-bottom: 1px dashed var(--line); }
@media (min-width: 640px) { .date-which { grid-template-columns: 1fr 1fr; } }
.date-pink { margin-top: 14px; color: var(--ink-2); } .date-day { margin: 16px 0 4px; }
.date-cost { width: 100%; max-width: 520px; border-collapse: collapse; margin: 12px 0 8px; } .date-cost td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.date-cost td.n { text-align: right; font-weight: 700; white-space: nowrap; padding-left: 12px; } .date-cost tr.total td { font-weight: 800; border-bottom: 0; font-size: 17px; }
.date-cost tr.total small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }

/* A jet ski package's first screen (30 Oct): what it is, the price for each way to ride with its drawing, the next free
   times as chips, what's included, who can ride. Each price and time opens the booking form set to it. */
.glance { margin: 4px 0 18px; } .glance .eyebrow { margin: 0; } .glance-title { margin: 2px 0 0; }
.glance-sub { margin: 4px 0 14px; color: var(--ink-2); font-weight: 600; }
.glance-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gp { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: inherit; text-decoration: none !important; box-shadow: var(--shadow); }
.gp:hover { border-color: var(--sea-300); } .gp-art { grid-row: 1 / 3; width: 58px; aspect-ratio: 5 / 3; object-fit: contain; }
.gp b { font-size: 20px; line-height: 1.1; color: var(--ink); align-self: end; } .gp span { font-size: 12px; color: var(--ink-2); line-height: 1.25; align-self: start; }
.glance-min { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.glance-times { margin-top: 14px; } .glance-times .lbl { margin: 0 0 6px; font-weight: 700; }
.glance-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.glance-chips .chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--sea-300); border-radius: 999px; background: var(--sea-50); color: var(--sea-700); font-weight: 700; text-decoration: none !important; }
.glance-chips .chip.more { background: #fff; border-color: var(--line); color: var(--ink-2); font-weight: 600; }
.glance-inc { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; color: var(--ink-2); font-size: 15px; }
.glance-inc li::before { content: "✓"; color: var(--sea-500); font-weight: 800; margin-right: 6px; }
.glance-who { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
/* The sunset cruise's version (30 Oct): three price tiles without drawings, dates as chips, the dates already full. */
.glance-prices.three { grid-template-columns: repeat(3, 1fr); } .gp.plain { grid-template-columns: 1fr; text-align: center; padding: 10px 6px; }
.gp.plain b, .gp.plain span { align-self: auto; }
.glance-chips .chip small { margin-left: 6px; font-weight: 600; color: var(--ink-2); }
.glance-full { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.glance .rating { margin: 0 0 12px; }
.glance-guests { margin: 14px 0 0; } .glance-guests img { display: block; width: 100%; max-width: 520px; border-radius: var(--r); }