/* Hotels by Tern landing page. Builds on the UC2026 launch styles (uc2026-page.css + uc2026-layout.css). */
.hbt-page main > section { scroll-margin-top: 9rem; }
.hbt-page .hbt-section { padding-block: 64px; }
.hbt-page .hbt-section + .hbt-section { border-top: 1px solid rgb(0 0 0 / .06); }
.hbt-page .hbt-head { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.hbt-page .hbt-head h2 { font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--uc-ink); text-wrap: balance; }
.hbt-page .hbt-head p:not(.uc-v2-kicker) { font-size: 16px; line-height: 1.5; margin-top: 14px; color: var(--uc-muted); }
.hbt-page .hbt-note { max-width: 640px; margin: 24px auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--uc-muted); }
.hbt-page .hbt-note a, .hbt-page .hbt-link { color: var(--uc-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Shared CTA row + hero demo frame */
.hbt-page .hbt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.hbt-page .hbt-hero-capture { position: relative; max-width: 980px; margin: 0 auto; }

/* Old way vs. Tern */
.hbt-compare { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .hbt-compare { grid-template-columns: 1fr 1fr; } }
.hbt-compare > div { padding: 28px; border-radius: 14px; background: #eef1ee; }
.hbt-compare > div.hbt-compare-tern { background: #173e40; color: #fff; }
.hbt-compare span { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.hbt-compare strong { display: block; margin: 10px 0 8px; font-size: 44px; line-height: 1; letter-spacing: -.03em; }
.hbt-compare p { font-size: 15px; line-height: 1.5; }

/* Stats */
.hbt-stats { display: grid; grid-template-columns: 1fr; gap: 8px; max-width: 900px; margin: 24px auto 0; }
@media (min-width: 640px) { .hbt-stats { grid-template-columns: 1fr 1fr; } }
.hbt-stats > div { padding: 24px; border-radius: 14px; background: #fff; }
.hbt-stats strong { display: block; font-size: 40px; line-height: 1; letter-spacing: -.03em; color: var(--uc-ink); }
.hbt-stats p { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--uc-muted); text-wrap: balance; }
/* Support stats are phrases, not numbers: smaller so both fit on one line. */
#support .hbt-stats strong { font-size: 32px; letter-spacing: -.02em; }

/* Feature trios with a capture underneath */
.hbt-cards h3 { font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--uc-ink); }
.hbt-cards p { font-size: 14px; line-height: 1.5; color: var(--uc-muted); }

/* Booking journey (hbt-section-booking.htm): step copy beside a static frame of the hero demo.
   On desktop each step sticks under the header and the next slides up over it. hotels-journey.js sets
   --hbj-cover (0 to 1) as the next step closes in: the copy holds until about halfway, then fades
   out just before the next step's copy reaches it; the frame shrinks
   and fades as it is covered. Phones and reduced motion get a plain list. */
.hbj { display: grid; gap: 56px; max-width: 1080px; margin: 40px auto 0; padding: 0; list-style: none; }
.hbj-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hbj-copy { align-self: center; }
.hbj-num { display: block; margin-bottom: 8px; color: #0b668d; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.hbj-copy h3 { font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--uc-ink); }
.hbj-copy p { margin-top: 8px; max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--uc-muted); }
.hbj-visual { min-width: 0; }
@media (min-width: 900px) {
  .hbj { gap: 120px; }
  .hbj-step { --hbj-cover: 0; position: sticky; top: 120px; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; min-height: 460px; }
  .hbj-copy { opacity: calc(1 - clamp(0, (var(--hbj-cover) - .45) / .4, 1)); }
  .hbj-visual { opacity: calc(1 - var(--hbj-cover)); transform: scale(calc(1 - var(--hbj-cover) * .08)); transform-origin: 50% 0; }
}

/* The static frames: same type, colors and data as the hero demo. */
.hbj-window { overflow: hidden; border: 1px solid #1118271a; border-radius: 12px; background: #fff; color: #111827; font-size: 13px; line-height: 1.45; text-align: left; box-shadow: 0 24px 60px -30px #11182745; }
.hbj-window strong { font-weight: 600; }
.hbj-bar { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-bottom: 1px solid #e5e7eb; font-size: 13px; }
.hbj-bar > img { width: 20px; height: 20px; }
.hbj-bar-client { justify-content: space-between; color: #6b7280; font-size: 12px; }
.hbj-bar-client .hbj-brand { width: auto; height: 30px; }
.hbj-tabs { display: flex; gap: 14px; margin-left: auto; color: #6b7280; font-size: 12px; }
.hbj-tabs .is-on { color: #0b668d; }
.hbj-body { display: grid; gap: 12px; padding: 18px; background: #f8fafb; }
.hbj-label { font-size: 15px; font-weight: 600; color: #111827; }
.hbj-hotel { display: flex; align-items: center; gap: 12px; }
.hbj-hotel > img { width: 72px; height: 54px; flex-shrink: 0; border-radius: 6px; object-fit: cover; }
.hbj-hotel > div { display: grid; min-width: 0; }
.hbj-hotel span { color: #6b7280; font-size: 12px; }
.hbj-hotel-row { padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.hbj-hotel-row > img { width: 56px; height: 42px; }
.hbj-hotel .hbj-accent { color: #0b668d; }
.hbj-rate { display: grid; gap: 4px; padding: 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.hbj-rate > span { color: #6b7280; font-size: 12px; }
.hbj-rate.is-chosen { border-color: #0b668d; box-shadow: 0 0 0 1px #0b668d; background: #f0f8fb; }
.hbj-rate-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hbj-radio { width: 15px; height: 15px; flex-shrink: 0; border: 1px solid #cbd1d8; border-radius: 50%; background: #fff; }
.hbj-rate.is-chosen .hbj-radio { border: 4px solid #0b668d; }
.hbj-rate-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; color: #6b7280; font-size: 12px; }
.hbj-commission { color: #0b668d; }
.hbj-price { display: grid; justify-items: end; color: #111827; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hbj-price small { color: #6b7280; font-size: 11px; font-weight: 400; }
.hbj-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; color: #267052; font-size: 12px; }
.hbj-checks li { display: flex; align-items: center; gap: 4px; }
.hbj-checks .material-icons { font-size: 14px; }
.hbj-button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 6px; background: #0b668d; color: #fff; font-size: 13px; font-weight: 600; }
.hbj-button .material-icons { font-size: 16px; }
.hbj-button.is-done { background: #e4f3eb; color: #216247; }
.hbj-button.is-ghost { padding: 7px 12px; border: 1px solid #d1d5db; background: #fff; color: #374151; font-weight: 500; }
.hbj-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.hbj-card > div { display: grid; flex: 1; }
.hbj-card span { color: #6b7280; font-size: 12px; }
.hbj-card .material-icons { font-size: 20px; color: #374151; }
.hbj-card .hbj-ok { color: #0b668d; }
.hbj-total { display: flex; justify-content: space-between; font-size: 14px; }
.hbj-total strong { font-variant-numeric: tabular-nums; }
.hbj-confirmed { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 8px; background: #e4f3eb; color: #216247; }
.hbj-confirmed .material-icons { font-size: 20px; }
.hbj-confirmed > span:last-child { margin-left: auto; color: #4b6b5c; font-size: 12px; }
.hbj-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.hbj-fields span { display: block; color: #6b7280; font-size: 12px; }
.hbj-fields strong { font-variant-numeric: tabular-nums; }
.hbj-fields em { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: #e4f3eb; color: #216247; font-size: 11px; font-style: normal; font-weight: 600; }
.hbj-actions { display: flex; gap: 8px; }
@media (max-width: 480px) {
  .hbj-bar-client > span { display: none; }
  .hbj-tabs > span:first-child { display: none; }
}

/* Simple card grids (use cases, agency control) */
.hbt-cards { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .hbt-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .hbt-cards[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } .hbt-cards[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } }
.hbt-cards > div { padding: 22px; border-radius: 14px; background: #fff; }
.hbt-cards .material-icons { display: block; margin-bottom: 12px; font-size: 28px; color: #38656a; }
.hbt-cards h3 + p { margin-top: 6px; }

/* Commission week strip: Saturday to Friday */
.hbt-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 900px; margin: 0 auto; }
.hbt-week > div { position: relative; padding: 14px 6px 40px; border-radius: 10px; background: #fff; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--uc-muted); }
.hbt-week .hbt-week-stay { background: #dde8e4; color: var(--uc-ink); }
.hbt-week .hbt-week-paid { background: #173e40; color: #fff; }
.hbt-week small { position: absolute; left: 4px; right: 4px; bottom: 10px; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.2; }

/* Day one vs. roadmap */
.hbt-table-wrap { position: relative; max-width: 980px; margin: 0 auto; overflow-x: auto; border-radius: 14px; background: #fff; }
.hbt-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 1.5; text-align: left; }
.hbt-table th, .hbt-table td { padding: 14px 18px; border-bottom: 1px solid rgb(0 0 0 / .06); vertical-align: top; }
.hbt-table thead th { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--uc-muted); }
.hbt-table tbody th { font-weight: 600; color: var(--uc-ink); width: 24%; }
.hbt-table td { color: var(--uc-muted); }
.hbt-table tr:last-child > * { border-bottom: 0; }

/* Final CTA */
.hbt-page .hbt-cta { text-align: center; }
.hbt-page .hbt-cta .hbt-actions { margin-top: 24px; }

@media (max-width: 700px) {
  .hbt-page .hbt-section { padding-block: 48px; }
  .hbt-page .hbt-head h2 { font-size: 26px; }
  .hbt-compare strong { font-size: 36px; }
  .hbt-week > div { padding: 10px 2px 38px; font-size: 10px; }
  .hbt-week small { font-size: 9px; }
  .hbt-week .hbt-week-long { display: none; }
}

/* Dark mode */
.dark .hbt-compare > div:not(.hbt-compare-tern),
.dark .hbt-stats > div,
.dark .hbt-cards > div,
.dark .hbt-week > div:not(.hbt-week-stay):not(.hbt-week-paid),
.dark .hbt-table-wrap { background: var(--color-background-8, #1b1b1d); }
.hbt-compare > div.hbt-compare-tern p { color: rgb(255 255 255 / .85); }
.hbt-week small::first-letter { text-transform: uppercase; }

/* Booking demo in the hero: no frame around the app window (UC2026 wraps it in a padded sky panel). */
.uc-v2 .hbt-hero .hb-demo { margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 12px; }
.uc-v2 .hbt-hero .hb-window { border: 1px solid #1118271a; box-shadow: 0 30px 80px -30px #11182745; }

/* Hero column is ~640px wide, narrower than the desktop canvas the booking demo was drawn for. */
@media (min-width: 1024px) {
  .uc-v2 .hbt-hero .hb-stay-benefits { display: none; }
  .uc-v2 .hbt-hero .hb-stay-footer { padding: 12px 16px; }
}

#commission .hbs-panel { max-width: 916px; margin: 16px auto 0; }
/* Cards sit right under the animation, at the same 8px gutter as between the cards. */
#commission .hbs-panel + .hbt-stats { margin-top: 0; }
/* Same cloud-backed stage as the hotel library frame (uc2026-page.css). */
.uc-v2 .hbs-stage {
  border-radius: 20px;
  background-color: #dce7ed;
  background-image: linear-gradient(#edf3f54d, #edf3f570), url('/images/launch/uc2026/prototype-sky-near.png'), url('/images/launch/uc2026/prototype-sky-plate.png');
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% auto, 100% 100%;
  background-position: center, center 85%, center;
}

/* Commission statement demo (hbt-statement-demo.htm): Tern-sent weekly statement.
   hotels-statement-demo.js adds .is-in to each row and approves at the end. */
.hbs-window { position: relative; margin: 0 auto; overflow: hidden; border: 1px solid #1118271a; border-radius: 12px; background: #fff; color: #111827; font-size: 13px; line-height: 1.4; box-shadow: 0 24px 60px -30px #11182740; }
.hbs-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 16px; }
.hbs-title { font-size: 16px; font-weight: 600; }
.hbs-pill { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: #475569; font-size: 11px; font-weight: 600; vertical-align: 2px; }
.hbs-meta { margin-top: 4px; color: #6b7280; font-size: 12px; }
.hbs-approve { display: inline-grid; flex-shrink: 0; padding: 8px 14px; border-radius: 6px; background: #0b668d; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background .25s, transform .15s; }
.hbs-approve > span { grid-area: 1 / 1; transition: opacity .2s; }
.hbs-approve .material-icons { font-size: 14px; vertical-align: -2px; }
.hbs-approve-b { opacity: 0; }
.hbs-approve.is-press { transform: scale(.96); }
.hbs-approve.is-approved { background: #216247; }
.hbs-approve.is-approved .hbs-approve-a { opacity: 0; }
.hbs-approve.is-approved .hbs-approve-b { opacity: 1; }
.hbs-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 22px 16px; }
.hbs-totals > div { padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; }
.hbs-totals > div > span { display: block; color: #6b7280; font-size: 12px; }
.hbs-totals strong { display: block; margin-top: 4px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hbs-table { border-top: 1px solid #e5e7eb; }
.hbs-row { display: grid; grid-template-columns: 1fr 1.7fr 1fr 1fr 96px; gap: 12px; align-items: center; padding: 9px 22px; border-bottom: 1px solid #f1f3f5; }
.hbs-row:last-child { border-bottom: 0; }
.hbs-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbs-head { padding-block: 10px; background: #f9fafb; color: #6b7280; font-size: 12px; }
.hbs-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hbs-head .hbs-amt { font-weight: 400; }
.hbs-conf { color: #4b5563; font-variant-numeric: tabular-nums; }
.hbs-row[data-hbs-row] { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, background-color 1.2s ease; }
.hbs-row[data-hbs-row].is-in { opacity: 1; transform: none; animation: hbs-arrive 1.4s ease; }
@keyframes hbs-arrive { 0% { background-color: #eef7f2; } 100% { background-color: transparent; } }

.hbs-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 20px; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 2px #0000004d); transition: transform .7s cubic-bezier(.45, 0, .2, 1), opacity .3s; }
.hbs-cursor.is-shown { opacity: 1; }

@media (max-width: 700px) {
  .hbs-top { flex-direction: column; padding: 16px 14px 12px; }
  .hbs-totals { gap: 6px; padding: 0 14px 12px; }
  .hbs-totals > div { padding: 10px; }
  .hbs-totals strong { font-size: 14px; }
  .hbs-row { grid-template-columns: 1fr 72px; gap: 8px; padding-inline: 14px; }
  .hbs-row > span:nth-child(1), .hbs-row > span:nth-child(3), .hbs-row > .hbs-conf { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hbs-row[data-hbs-row], .hbs-approve, .hbs-approve > span, .hbs-cursor { transition: none; animation: none; }
}

/* Opportunity statement (hbt-section-use-cases.htm): one line of copy framed in a dark gray card. */
.hbt-quote-card { max-width: 900px; margin: 0 auto; padding: clamp(24px, 4vw, 40px); padding-right: clamp(24px, 12vw, 160px); border-radius: 14px; background: #24282c; color: #fff; text-align: left; }
.hbt-quote-card p { color: #fff; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.4; font-weight: 500; letter-spacing: -.015em; text-wrap: pretty; }
/* Closing section: buttons sit under the cards. */
.hbt-page .hbt-cta .hbt-cards { text-align: left; }
.hbt-banner-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
.uc-v2 .hbt-page .uc-product-cta-banner, .uc-v2.hbt-page .uc-product-cta-banner { background: #fff; }
.dark .uc-v2 #get-started .uc-product-cta-banner, .dark.uc-v2 #get-started .uc-product-cta-banner { background: var(--color-background-8, #1b1b1d); }

/* One content column for every section except 30 min / 30 sec (#why). Its edges line up with the
   library animation's visible frame, which sits inside an 8px p-2 wrapper. */
.hbt-page { --hbt-content: 1136px; }
.hbt-page :is(#support .hbt-stats, #commission .hbt-week, #commission .hbt-stats, .hbt-quote-card, .hbj, #get-started .hbt-cards, #faq .hbt-faq-layout) { max-width: var(--hbt-content); margin-inline: auto; }
.hbt-page #commission .hbs-panel { max-width: calc(var(--hbt-content) + 16px); }

/* FAQ (hbt-faq.htm): a narrow left column (FAQs title + office hours, stays in view) beside native <details> rows. */
.hbt-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.hbt-faq-list { display: grid; gap: 8px; }
.hbt-faq-item { border: 1px solid #e3e7ea; border-radius: 8px; background: #fff; }
.hbt-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
.hbt-faq-item summary::-webkit-details-marker { display: none; }
.hbt-faq-item summary:focus-visible { outline: 2px solid #0b668d; outline-offset: 2px; border-radius: 8px; }
.hbt-faq-icon { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.hbt-faq-icon::before, .hbt-faq-icon::after { content: ''; position: absolute; top: 6px; left: 0; width: 14px; height: 2px; border-radius: 1px; background: var(--uc-ink); }
.hbt-faq-icon::after { transform: rotate(90deg); }
.hbt-faq-item[open] .hbt-faq-icon::after { display: none; }
.hbt-faq-item > p { margin: 0 22px; padding: 16px 0 20px; border-top: 1px solid #e3e7ea; }
.hbt-faq-side h2 { margin-bottom: 20px; font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--uc-ink); }
.hbt-office-hours { padding: 22px; border: 1px solid #e3e7ea; border-radius: 8px; background: #fff; }
.hbt-office-hours h3 { font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--uc-ink); text-wrap: balance; }
.hbt-office-hours > p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--uc-muted); }
.hbt-office-hours ul { margin: 16px 0 0; padding: 0; list-style: none; }
.hbt-office-hours li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #eef0f2; font-size: 14px; font-weight: 600; color: var(--uc-ink); }
@media (min-width: 900px) {
  .hbt-faq-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 32px; }
  .hbt-faq-side { position: sticky; top: 120px; }
}
.dark .hbt-faq-item, .dark .hbt-office-hours { background: var(--color-background-8, #1b1b1d); border-color: #2a2f33; }

/* Closer (hbt-section-closer.htm): more room above and below than the homepage section's 64px. */
.uc-v2.uc-compact.hbt-page main > #hotels-by-tern.uc-hotels-recap { padding-block: 120px; }
@media (max-width: 700px) { .uc-v2.uc-compact.hbt-page main > #hotels-by-tern.uc-hotels-recap { padding-block: 80px; } }

/* Phone pass. */
@media (max-width: 700px) {
  /* Stat phrases ("10% commission", "Every stay reconfirmed") fit on one line. */
  .hbt-page .hbt-stats strong { font-size: 28px; }
  .hbt-page #support .hbt-stats strong { font-size: 24px; }
}
/* Journey panel header: one line, trip name truncates before the tab wraps. */
.hbj-bar strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbj-tabs, .hbj-tabs span { flex-shrink: 0; white-space: nowrap; }
/* Close banner spans the same width as its trust cards (the UC2026 banner insets 8px for p-2 cards). */
.hbt-page #get-started .uc-product-cta-banner { max-width: var(--hbt-content); margin-inline: auto; }