/* ============ scroll-scrub hero ============
         Static by default (no JS, reduced motion, Save-Data, or no video):
         title and tagline stack over the branded backdrop. hotels.js adds
         .is-live to overlay them and drive both from video progress. */
      .scrub { padding: 0; border-top: 0; }
      .scrub-stage {
        position: relative;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: min(calc(100vh - 64px), 600px);
        overflow: hidden;
        isolation: isolate;
        color: #fff;
        background:
          radial-gradient(ellipse 55% 70% at 12% -10%, rgba(37, 99, 235, 0.45), transparent 70%),
          radial-gradient(ellipse 60% 70% at 50% 120%, var(--heat-20), transparent 65%),
          #0b0d1c;
      }
      .scrub-video {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform-origin: center;
        pointer-events: none;
      }
      .scrub.is-live .scrub-video { will-change: transform; }
      .scrub-shade {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          linear-gradient(180deg, rgba(10, 14, 40, 0.5), rgba(10, 14, 40, 0.06) 32%, rgba(10, 14, 40, 0.16) 64%, rgba(10, 14, 40, 0.68)),
          radial-gradient(ellipse 70% 55% at 50% 42%, rgba(26, 23, 108, 0.3), transparent 72%);
      }
      .scrub-heading {
        position: relative;
        z-index: 2;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 28px;
        padding: clamp(56px, 9vw, 100px) 6% 0;
        margin: 0;
        text-align: center;
        font-weight: inherit;
        pointer-events: none;
      }
      .scrub-title {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .scrub-kicker { color: rgba(255, 255, 255, 0.74); margin-bottom: 16px; }
      .scrub-line {
        display: block;
        max-width: 15ch;
        font-size: clamp(2rem, 4.6vw, 3.8rem);
        font-weight: 600;
        line-height: 1.02;
        letter-spacing: -0.045em;
        text-wrap: balance;
        text-shadow: 0 3px 24px rgba(0, 0, 0, 0.45);
      }
      .scrub-tagline {
        display: block;
        max-width: 20ch;
        font-size: clamp(1.4rem, 3vw, 2.4rem);
        font-weight: 600;
        line-height: 1.12;
        letter-spacing: -0.035em;
        text-wrap: balance;
        text-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
      }
      /* Arrow blue, lightened for a dark film */
      .scrub-tagline em {
        font-style: normal;
        text-shadow: none;
        background: linear-gradient(92deg, #8fb4ff, #b9b0ff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        filter: drop-shadow(0 3px 18px rgba(10, 14, 40, 0.55));
      }
      .scrub-hint,
      .scrub-skip,
      .scrub-progress { display: none; }
      /* guest question box over the film */
      .scrub-ask {
        position: relative;
        z-index: 4;
        margin-top: clamp(28px, 4vw, 44px);
        padding: 0 20px clamp(56px, 8vw, 96px);
      }

      .scrub.is-live .scrub-stage {
        height: min(calc(100vh - 64px), 640px);
        height: min(calc(100dvh - 64px), 640px);
        min-height: 440px;
      }
      .scrub.is-live .scrub-heading {
        position: absolute;
        /* title centred in the top two thirds; the question box follows it, clear of the cookie banner */
        inset: 0 0 34% 0;
        padding: 0 6%;
        place-items: center;
      }
      .scrub.is-live .scrub-ask {
        position: absolute;
        top: 62%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0 20px;
      }
      .scrub.is-live .scrub-heading > span { grid-area: 1 / 1; will-change: transform, filter, opacity; }
      .scrub.is-live .scrub-tagline { opacity: 0; }
      .scrub.is-scrubbing .scrub-stage { touch-action: none; }
      .scrub.is-live .scrub-hint {
        position: absolute;
        left: 50%;
        bottom: clamp(14px, 2.6vh, 26px);
        z-index: 3;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--mono);
        font-size: 0.68rem;
        font-weight: 500;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.75);
        pointer-events: none;
        transition: opacity 0.4s ease;
      }
      .scrub.is-started .scrub-hint { opacity: 0; }
      .scrub-hint svg { animation: scrub-bounce 1.6s ease-in-out infinite; }
      @keyframes scrub-bounce {
        0%, 100% { transform: translateY(0); opacity: 0.5; }
        50% { transform: translateY(5px); opacity: 1; }
      }
      .scrub.is-scrubbing .scrub-skip {
        position: absolute;
        right: clamp(14px, 2.5vw, 28px);
        bottom: clamp(14px, 2.4vw, 24px);
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--mono);
        font-size: 0.64rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.82);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 8px;
        padding: 8px 12px;
        cursor: pointer;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: background-color 0.16s ease, border-color 0.16s ease;
      }
      .scrub-skip:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); }
      .scrub.is-live .scrub-progress {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: block;
        height: 2px;
        background: rgba(255, 255, 255, 0.14);
      }
      .scrub-progress i {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--geo), var(--violet-600) 55%, var(--heat));
        transform: scaleX(0);
        transform-origin: left center;
      }
      @media (max-width: 520px) {
        .scrub.is-live .scrub-hint { display: none; }
      }

      /* ============ ask like a guest ============ */
      .ask { text-align: center; overflow: hidden; }
      .ask::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(var(--a8) 1px, transparent 1px);
        background-size: 22px 22px;
        mask-image: radial-gradient(ellipse 72% 58% at 50% 22%, #000 25%, transparent 72%);
        -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 22%, #000 25%, transparent 72%);
        pointer-events: none;
      }
      .ask::after {
        content: "";
        position: absolute;
        top: -200px;
        left: 50%;
        transform: translateX(-50%);
        width: min(920px, 120vw);
        height: 480px;
        background:
          radial-gradient(closest-side at 38% 45%, var(--heat-12), transparent 68%),
          radial-gradient(closest-side at 68% 40%, rgba(37, 99, 235, 0.12), transparent 70%);
        pointer-events: none;
      }
      .ask > * { position: relative; z-index: 1; }
      .ask .h-display { max-width: 820px; margin: 0 auto 20px; font-size: clamp(1.9rem, 4vw, 3.1rem); }
      .ask .lede { margin: 0 auto clamp(36px, 5vw, 52px); max-width: 640px; }

      /* guest query box — collapses to a pill, springs open into a prompt card */
      .gq {
        --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        text-align: left;
        transition: max-width 0.4s var(--spring);
      }
      .gq.is-expanded { max-width: 620px; }
      .gq-tray-slot {
        position: relative;
        z-index: 0;
        height: 0;
        overflow: hidden;
        transition: height 0.4s var(--spring);
      }
      .gq.is-expanded.is-tray .gq-tray-slot { height: 62px; }
      .gq-tray {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: -8px;
        height: 62px;
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding: 9px 10px 16px;
        overflow-x: auto;
        scrollbar-width: none;
        border: 1px solid var(--a10);
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
        background: var(--bg-lighter);
        opacity: 0;
        transform: translateY(100%);
        transition: transform 0.4s var(--spring), opacity 0.3s ease-out;
        touch-action: pan-x;
      }
      .gq-tray::-webkit-scrollbar { display: none; }
      .gq.is-expanded.is-tray .gq-tray { opacity: 1; transform: none; }
      .gq-tray-label {
        flex-shrink: 0;
        align-self: center;
        margin: -6px 4px 0 2px;
        font-family: var(--mono);
        font-size: 0.6rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--faint);
      }
      .gq-chip {
        flex-shrink: 0;
        font-family: var(--sans);
        font-size: 0.78rem;
        font-weight: 550;
        color: var(--ink-soft);
        background: var(--bg-card);
        border: 1px solid var(--a10);
        border-radius: 100px;
        padding: 6px 11px;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.2s var(--spring);
        animation: gq-chip-in 0.4s var(--spring) backwards;
      }
      .gq-chip:hover { border-color: var(--a24); transform: translateY(-1px); }
      .gq-chip[aria-pressed="true"] { border-color: var(--heat-40); background: var(--heat-8); color: var(--heat-strong); }
      @keyframes gq-chip-in { from { opacity: 0; transform: translateY(10px) scale(0.92); } }

      .gq-card {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 48px;
        border: 1px solid transparent;
        border-radius: 24px;
        background:
          linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
          linear-gradient(var(--a12), var(--a12)) border-box;
        box-shadow: 0 1px 2px rgba(18, 20, 40, 0.05), 0 16px 48px -24px rgba(18, 20, 40, 0.2);
        overflow: hidden;
        transition: height 0.4s var(--spring), box-shadow 0.25s ease;
      }
      .gq.is-smooth .gq-card { transition: height 0.15s ease-out, box-shadow 0.25s ease; }
      .gq.is-expanded .gq-card { overflow: visible; cursor: text; }
      .gq-card:focus-within {
        background:
          linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
          linear-gradient(120deg, var(--geo), var(--violet-600) 55%, var(--heat)) border-box;
        box-shadow: 0 1px 2px rgba(18, 20, 40, 0.05), 0 20px 56px -24px rgba(58, 65, 219, 0.25);
      }
      .gq-input {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        width: 100%;
        height: 68px;
        resize: none;
        border: 0;
        border-radius: 24px;
        background: transparent;
        padding: 14px 52px 14px 18px;
        font-family: var(--sans);
        line-height: 22px;
        color: var(--ink);
        overflow-y: hidden;
        opacity: 0;
        transform: translateY(-4px) scale(0.95);
        pointer-events: none;
        transition: opacity 0.3s ease-out, transform 0.3s ease-out, height 0.4s var(--spring);
      }
      .gq.is-smooth .gq-input { transition: height 0.15s ease-out; }
      .gq-input:focus,
      .gq-input:focus-visible { outline: none; }
      .gq-input::placeholder { color: var(--faint); font-weight: 500; }
      .gq-input.is-scroll { overflow-y: auto; }
      .gq.is-expanded .gq-input { opacity: 1; transform: none; pointer-events: auto; }
      .gq.is-recording .gq-input { pointer-events: none; }
      .gq-open {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        height: 46px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 52px 0 16px;
        border: 0;
        border-radius: 24px;
        background: none;
        font-family: var(--sans);
        font-size: 0.93rem;
        font-weight: 500;
        color: var(--faint);
        text-align: left;
        white-space: nowrap;
        cursor: text;
        transition: opacity 0.4s var(--spring), transform 0.4s var(--spring);
      }
      .gq-open svg { flex-shrink: 0; color: var(--faint); }
      .gq-open .ph { overflow: hidden; text-overflow: ellipsis; }
      .gq-open .ph.is-swap { animation: gq-ph 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
      @keyframes gq-ph { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
      .gq.is-expanded .gq-open { opacity: 0; transform: translateY(4px) scale(1.04); pointer-events: none; }
      .gq-fade {
        position: absolute;
        left: 18px;
        right: 52px;
        z-index: 2;
        height: 26px;
        opacity: 0;
        pointer-events: none;
      }
      .gq-fade.is-top { top: 1px; background: linear-gradient(var(--bg-card) 30%, transparent); }
      .gq-fade.is-bottom { background: linear-gradient(transparent, var(--bg-card) 70%); transition: top 0.4s var(--spring); }

      .gq-actions {
        position: absolute;
        left: 8px;
        right: 48px;
        bottom: 8px;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 2px;
        opacity: 0;
        filter: blur(4px);
        transform: translateY(8px);
        pointer-events: none;
        transition: opacity 0.3s var(--spring), filter 0.3s var(--spring), transform 0.3s var(--spring);
      }
      .gq.is-expanded:not(.is-recording) .gq-actions { opacity: 1; filter: none; transform: none; pointer-events: auto; }
      .gq-tool {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 30px;
        padding: 0 9px;
        border: 0;
        border-radius: 100px;
        background: transparent;
        font-family: var(--sans);
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
      }
      .gq-tool:hover,
      .gq-tool[aria-expanded="true"] { background: var(--a6); color: var(--ink); }
      .gq-tool img { width: 15px; height: 15px; border-radius: 4px; object-fit: contain; opacity: 0.85; }
      .gq-tool:hover img { opacity: 1; }
      .gq-tool .bar { transition: opacity 0.3s ease; }
      .gq-plus { margin-left: auto; width: 30px; padding: 0; justify-content: center; }
      .gq-plus svg { transition: transform 0.3s var(--spring); }
      .gq-plus[aria-expanded="true"] svg { transform: rotate(45deg); }

      /* label that springs to the width of its next value */
      .m-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition: width 0.3s var(--spring);
      }
      .m-measure { visibility: hidden; white-space: nowrap; padding: 0 2px; }
      .m-text {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
      .m-text.is-in { animation: gq-morph 0.3s ease both; }
      @keyframes gq-morph { from { opacity: 0; transform: scale(0.95); } }

      .gq-menu {
        position: absolute;
        bottom: calc(100% + 10px);
        left: 0;
        z-index: 50;
        width: 196px;
        padding: 4px;
        border: 1px solid var(--a10);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 18px 48px -16px rgba(18, 20, 40, 0.28);
        opacity: 0;
        transform: translateY(12px) scale(0.95);
        transform-origin: bottom left;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.4s var(--spring);
      }
      .gq-menu.is-open { opacity: 1; transform: none; pointer-events: auto; transition-timing-function: ease, cubic-bezier(0.34, 1.56, 0.64, 1); }
      .gq-menu-list { position: relative; display: flex; flex-direction: column; gap: 2px; }
      .gq-hl {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        height: 32px;
        border-radius: 11px;
        background: var(--a6);
        opacity: 0;
        pointer-events: none;
      }
      .gq-menu-item {
        display: flex;
        align-items: center;
        gap: 9px;
        height: 32px;
        padding: 0 10px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--ink-soft);
        text-align: left;
        cursor: pointer;
      }
      .gq-menu-item img { width: 15px; height: 15px; border-radius: 4px; object-fit: contain; }
      .gq-menu-item[aria-checked="true"] { color: var(--ink); font-weight: 600; }
      .gq-menu-item[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-family: var(--mono); font-size: 0.72rem; color: var(--heat-strong); }

      .gq-wave {
        position: absolute;
        right: 48px;
        bottom: 8px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 3px;
        width: 0;
        height: 32px;
        opacity: 0;
        transform: translateX(16px);
        pointer-events: none;
        transition: width 0.4s var(--spring), opacity 0.4s var(--spring), transform 0.4s var(--spring);
      }
      .gq.is-recording .gq-wave { width: 64px; opacity: 1; transform: none; }
      .gq-wave i { width: 4px; height: 4px; border-radius: 4px; background: var(--heat); transition: height 75ms ease-out; }
      .gq-voice-note {
        position: absolute;
        left: 18px;
        bottom: 14px;
        z-index: 10;
        font-family: var(--mono);
        font-size: 0.62rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--heat-strong);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }
      .gq.is-recording .gq-voice-note { opacity: 1; }
      .gq-action {
        position: absolute;
        right: 7px;
        bottom: 7px;
        z-index: 10;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        background: var(--heat);
        color: #fff;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(18, 20, 40, 0.12);
        transition: background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
      }
      .gq-action:hover { background: var(--heat-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 16px var(--heat-20); }
      .gq-action:active { transform: scale(0.94); }
      .gq-action .ico {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        opacity: 0;
        transform: scale(0.5) rotate(45deg);
        filter: blur(1px);
        transition: opacity 0.3s var(--spring), transform 0.3s var(--spring), filter 0.3s var(--spring);
      }
      .gq-action .ico-mic { transform: scale(0.5) rotate(-45deg); }
      .gq-action[data-mode="send"] .ico-send,
      .gq-action[data-mode="mic"] .ico-mic,
      .gq-action[data-mode="stop"] .ico-stop { opacity: 1; transform: none; filter: none; }

      .gq-examples {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-width: 780px;
        margin: 26px auto 0;
      }
      .gq-ex {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        max-width: 100%;
        padding: 6px 13px 6px 7px;
        border: 1px solid var(--a10);
        border-radius: 100px;
        background: var(--bg-card);
        font-family: var(--sans);
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--ink-soft);
        cursor: pointer;
        transition: border-color 0.16s ease, transform 0.16s ease;
      }
      .gq-ex:hover { border-color: var(--heat-40); transform: translateY(-1px); }
      .gq-ex .tag {
        flex-shrink: 0;
        font-family: var(--mono);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--heat-strong);
        background: var(--heat-8);
        border-radius: 100px;
        padding: 3px 8px;
      }
      .gq-ex .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

      .gq-answer { max-width: 760px; margin: clamp(32px, 4vw, 44px) auto 0; text-align: left; scroll-margin-top: 88px; }
      .gq-answer[hidden] { display: none; }
      .gq-answer .offer-visual:hover { transform: none; }
      .gq-answer .offer-visual-bar .name { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); }
      .gq-answer .offer-visual-bar img { width: 16px; height: 16px; border-radius: 4px; }
      .gq-answer .badge { color: var(--heat-strong); border-color: var(--heat-20); background: var(--heat-8); }
      .gq-lines {
        padding: 18px 20px 14px;
        font-family: var(--mono);
        font-size: 0.78rem;
        line-height: 1.85;
        color: var(--ink-soft);
        min-height: 220px;
      }
      .gq-lines .ln { opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; }
      .gq-lines .ln.is-on { opacity: 1; transform: none; }
      .gq-lines .q {
        font-family: var(--sans);
        font-size: 1.02rem;
        font-weight: 550;
        letter-spacing: -0.012em;
        line-height: 1.45;
        color: var(--ink);
        margin: 2px 0 6px;
      }
      .gq-lines .sec {
        margin-top: 14px;
        font-size: 0.64rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--faint);
      }
      .gq-lines .row { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
      .gq-lines .k { color: var(--faint); }
      .gq-lines .ok::before { content: "✓  "; color: #0c8a4d; font-weight: 600; }
      .gq-lines .to::before { content: "→  "; color: var(--heat-strong); font-weight: 600; }
      .gq-lines .hi { color: var(--geo); }
      .gq-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px 16px;
        border-top: 1px solid var(--a8);
        background: var(--bg-lighter);
      }
      .gq-foot p {
        font-family: var(--mono);
        font-size: 0.62rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--faint);
      }
      .gq-foot .row { display: flex; gap: 8px; flex-wrap: wrap; }
      @media (max-width: 560px) {
        .gq-lines .row { grid-template-columns: 1fr; gap: 0; }
        .gq-lines .row .k { font-size: 0.66rem; letter-spacing: 0.06em; }
        .gq-tool.is-engine .m-wrap { display: none; }
      }

      /* ============ intents ============ */
      .intent-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        margin-top: clamp(36px, 4.5vw, 56px);
        border: 1px solid var(--a8);
        border-radius: var(--r-lg);
        background: var(--a8);
        overflow: hidden;
      }
      .intent-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: clamp(22px, 2.6vw, 30px);
        background: var(--bg-card);
        transition: background-color 0.2s ease;
      }
      .intent-card:hover { background: var(--bg-lighter); }
      .intent-card .t-badge {
        align-self: flex-start;
        font-family: var(--mono);
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--geo);
        background: var(--geo-soft);
        border: 1px solid rgba(37, 99, 235, 0.24);
        padding: 4px 9px;
        border-radius: 6px;
      }
      .intent-card h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; }
      .intent-card dl { display: grid; gap: 12px; font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
      .intent-card dt {
        margin-bottom: 3px;
        font-family: var(--mono);
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--faint);
      }
      .intent-try {
        margin-top: auto;
        padding: 6px 0 0;
        border: 0;
        background: none;
        cursor: pointer;
        font-family: var(--sans);
        color: var(--geo);
      }
      @media (max-width: 900px) { .intent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      @media (max-width: 620px) { .intent-grid { grid-template-columns: 1fr; } }

      .thesis-tiles.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .process-grid.is-six .process-step .num { margin-bottom: 28px; color: var(--geo); }

      /* ============ page navigation: breadcrumb + on this page ============ */
      .page-nav { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
      .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
      .crumbs a { color: var(--geo); text-decoration: none; }
      .crumbs a:hover { text-decoration: underline; }
      .crumbs [aria-current] { color: var(--ink-soft); }
      .jump { display: flex; flex-wrap: wrap; gap: 6px; }
      .jump a {
        padding: 6px 11px;
        border: 1px solid var(--a10);
        border-radius: 100px;
        background: var(--bg-card);
        font-size: 0.78rem;
        font-weight: 550;
        color: var(--ink-soft);
        text-decoration: none;
        transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
      }
      .jump a:hover { border-color: rgba(37, 99, 235, 0.4); color: var(--geo); background: var(--geo-soft); }

      /* ============ animated blue scenes (shared with the Journal: /blog/intent-news.css) ============ */
      .scene-banner { margin-top: clamp(32px, 4.5vw, 52px); }
      .scene-banner .signal-thumb { border-radius: var(--r-lg); box-shadow: 0 30px 80px -40px rgba(26, 23, 108, 0.6); }

      /* ============ how AI chooses: prose, photos, table ============ */
      .choose-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
      .choose-copy h3 { margin: 26px 0 8px; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; }
      .choose-copy p { color: var(--muted); line-height: 1.75; }
      .choose-copy .lede { margin-top: 16px; color: var(--muted); }
      .choose-callout {
        margin-top: 26px;
        padding: 18px 20px;
        border-left: 3px solid var(--geo);
        border-radius: 0 var(--r-md) var(--r-md) 0;
        background: var(--geo-soft);
        color: var(--ink-soft);
        line-height: 1.65;
      }
      .photo-figure { margin: 0; }
      .photo-figure img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 24px 60px -36px rgba(18, 20, 40, 0.45); }
      .photo-figure figcaption { margin-top: 10px; font-size: 0.8rem; line-height: 1.55; color: var(--muted); }
      .photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
      .photo-row img { width: 100%; height: auto; border-radius: var(--r-md); }
      .data-table { margin-top: clamp(36px, 5vw, 56px); overflow-x: auto; border: 1px solid var(--a10); border-radius: var(--r-lg); background: var(--bg-card); }
      .data-table table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.9rem; line-height: 1.55; }
      .data-table caption { padding: 14px 18px; text-align: left; font-size: 0.82rem; color: var(--ink-soft); background: var(--geo-soft); }
      .data-table th, .data-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--a8); }
      .data-table thead th { font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--geo); }
      .data-table tbody th { font-weight: 600; color: var(--ink); }
      .data-table td { color: var(--muted); }
      .data-table code { font-family: var(--mono); font-size: 0.78rem; color: var(--violet-700); }
      @media (min-width: 901px) { .choose-media { position: sticky; top: 96px; } }
      @media (max-width: 900px) { .choose-grid { grid-template-columns: 1fr; } }

      /* ============ intent photos ============ */
      .intent-card { padding-top: 0; }
      .intent-card .intent-photo { margin: 0 calc(-1 * clamp(22px, 2.6vw, 30px)) 4px; }
      .intent-card .intent-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

      /* ============ product illustrations with the console over them ============ */
      .offer-art { position: relative; }
      .offer-art > img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: 0 30px 70px -40px rgba(26, 23, 108, 0.55); }
      .offer-art > .offer-visual { position: absolute; right: -14px; bottom: -40px; width: 74%; }
      .offer.is-flip .offer-art { order: -1; }
      @media (max-width: 880px) {
        .offer.is-flip .offer-art { order: 0; }
        .offer-art > .offer-visual { position: relative; right: auto; bottom: auto; width: auto; margin: -56px 14px 0; }
      }

      /* ============ glossary ============ */
      .glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: clamp(28px, 4vw, 44px); }
      .glossary > div { padding: 18px 0; border-top: 1px solid var(--a8); }
      .glossary dt { font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
      .glossary dt span { margin-left: 8px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--geo); }
      .glossary dd { margin-top: 6px; font-size: 0.92rem; line-height: 1.65; color: var(--muted); }
      @media (max-width: 720px) { .glossary { grid-template-columns: 1fr; } }
      /* ============ at a glance (answer-first summary) ============ */
      .glance-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: clamp(28px, 5vw, 64px);
        align-items: start;
      }
      .glance-grid .lede { margin-top: 16px; }
      .glance-facts {
        display: grid;
        border: 1px solid var(--a10);
        border-radius: var(--r-lg);
        background: var(--bg-card);
        overflow: hidden;
      }
      .glance-facts > div { padding: 18px 22px; border-top: 1px solid var(--a8); }
      .glance-facts > div:first-child { border-top: 0; }
      .glance-facts dt {
        margin-bottom: 4px;
        font-family: var(--mono);
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--geo);
      }
      .glance-facts dd { font-size: 0.93rem; line-height: 1.6; color: var(--ink-soft); }
      @media (max-width: 860px) { .glance-grid { grid-template-columns: 1fr; } }

      /* ============ hotel guides with thumbnails ============ */
      .guide-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }
      .guide-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--a10);
        border-radius: var(--r-lg);
        background: var(--bg-card);
        color: inherit;
        text-decoration: none;
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .guide-card:hover { transform: translateY(-3px); border-color: var(--a16); box-shadow: 0 20px 48px -28px rgba(18, 20, 40, 0.28); }
      .guide-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--a4); }
      .guide-card .copy { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
      .guide-card .meta {
        font-family: var(--mono);
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: var(--geo);
      }
      .guide-card h3 { font-size: 1.02rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
      .guide-card p { font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
      .guide-card .read { margin-top: auto; padding-top: 6px; font-size: 0.86rem; font-weight: 550; color: var(--ink); }
      .guide-card .read .arr { color: var(--geo); transition: transform 0.16s ease; display: inline-block; }
      .guide-card:hover .read .arr { transform: translateX(3px); }
      .answers-head { margin: clamp(36px, 5vw, 52px) 0 4px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }
      .answers-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
        list-style: none;
      }
      .answers-list a {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--a8);
        font-size: 0.92rem;
        color: var(--ink-soft);
        text-decoration: none;
      }
      .answers-list a:hover { color: var(--ink); }
      .answers-list .arr { flex-shrink: 0; color: var(--geo); }
      @media (max-width: 900px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      @media (max-width: 620px) { .guide-grid, .answers-list { grid-template-columns: 1fr; } }