/* 2026 product-visual refresh */
.wrap { width: min(1220px, calc(100% - 56px)); }
.header-inner { min-height: 78px; }
.primary-nav { gap: 24px; }
.primary-nav a { padding-block: 29px; }
.button { min-height: 46px; padding-inline: 25px; }
.button:focus-visible, .text-link:focus-visible, .primary-nav a:focus-visible { outline: 3px solid rgba(38,169,255,.42); outline-offset: 4px; }
.hero-grid { min-height: 650px; grid-template-columns: .9fr 1.1fr; gap: 76px; padding-block: 78px 88px; }
.hero h1 { font-size: clamp(50px, 4.85vw, 72px); }
.hero-lead { font-size: 16px; }
.product-preview::before { content: ""; position: absolute; inset: 15% 5% -10%; border-radius: 50%; background: rgba(38,169,255,.28); filter: blur(55px); }
.preview-window { position: relative; border-color: rgba(255,255,255,.32); border-radius: 22px; box-shadow: 0 42px 100px rgba(0,7,24,.42), inset 0 0 0 1px rgba(255,255,255,.52); transform: none; }
.preview-topbar { height: 46px; }
.preview-body { min-height: 404px; }
.preview-main { background: linear-gradient(145deg, #f8faff, #f3f6fb); }
.preview-button { padding: 8px 11px; border-radius: 5px; color: white; background: var(--blue); font-size: 7px; }
.floating-card { right: -18px; bottom: -20px; padding: 15px 18px; border: 1px solid rgba(228,233,241,.9); border-radius: 14px; box-shadow: 0 22px 55px rgba(1,13,38,.28); }
.preview-note { position: relative; display: flex; align-items: center; gap: 7px; margin: 34px 4px 0; color: rgba(255,255,255,.55); font-size: 9px; font-weight: 700; letter-spacing: .03em; }
.preview-note span { width: 7px; height: 7px; border: 2px solid #72d8ff; border-radius: 50%; }

.proof-strip { padding: 22px 0; border: 0; background: var(--soft); }
.proof-grid { gap: 12px; }
.proof-grid div { min-height: 72px; justify-content: flex-start; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 8px 24px rgba(15,29,57,.035); }
.proof-grid div:last-child { border-right: 1px solid var(--line); }
.proof-grid span { font-size: 24px; }
.section { padding-block: 104px; }
.section-heading.center { max-width: 720px; margin-bottom: 46px; }
.section-heading h2, .outcomes h2, .workflows h2, .final-cta h2 { font-size: clamp(36px, 3.7vw, 52px); }

.product-tour { overflow: hidden; border-bottom: 1px solid #e1e8f3; background: linear-gradient(180deg, #fff 0%, #f5f8fd 100%); }
.product-tour-heading { display: grid; grid-template-columns: 1.15fr .65fr; gap: 90px; align-items: end; margin-bottom: 46px; }
.product-tour-heading h2 { max-width: 760px; }
.product-tour-heading > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.showcase-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(330px, .68fr); gap: 22px; }
.showcase-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #dfe6f0; border-radius: 24px; background: white; box-shadow: 0 24px 70px rgba(20,39,75,.09); }
.showcase-primary { display: flex; flex-direction: column; }
.showcase-toolbar { min-height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid #e6ebf3; color: #58647a; background: #fafbfe; font-size: 10px; }
.showcase-toolbar > div { display: flex; gap: 5px; }
.showcase-toolbar i { width: 7px; height: 7px; border-radius: 50%; background: #cdd5e2; }
.showcase-toolbar strong { color: #22304a; font-size: 11px; }
.showcase-badge, .count-pill { margin-left: auto; padding: 6px 9px; border-radius: 999px; color: #0758a8; background: #e5f4ff; font-size: 8px; font-weight: 850; }
.showcase-badge.approved { color: #14714f; background: #e6f7ef; }
.flight-preview { flex: 1; padding: 26px; background: #f7f9fd; }
.search-summary { display: grid; grid-template-columns: 1fr 44px 1fr 1.1fr; gap: 10px; align-items: center; padding: 18px 20px; border: 1px solid #e1e7f0; border-radius: 15px; background: white; }
.search-summary > div { display: flex; flex-direction: column; gap: 4px; }
.search-summary > div:nth-of-type(2), .search-summary > div:nth-of-type(3) { padding-left: 16px; border-left: 1px solid #edf0f5; }
.search-summary small, .mini-card-heading small { color: #909aab; font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.search-summary strong { color: #16253f; font-size: 18px; }
.search-summary span { color: #8590a2; font-size: 8px; }
.search-summary > b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(145deg, var(--cyan), var(--blue)); font-size: 12px; }
.fare-card { display: grid; grid-template-columns: 42px 1.4fr 1fr auto; gap: 16px; align-items: center; margin-top: 12px; padding: 18px; border: 1px solid #e1e7f0; border-radius: 15px; background: white; }
.fare-card.selected { border-color: #79b7ff; box-shadow: 0 0 0 3px rgba(22,129,255,.08); }
.airline-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: white; background: linear-gradient(145deg, #26a9ff, #0754be); font-size: 10px; font-weight: 900; }
.airline-mark.alt { background: linear-gradient(145deg, #7458dd, #3d2a9e); }
.fare-card > div:not(.airline-mark) { display: flex; flex-direction: column; gap: 5px; }
.fare-card small, .fare-card span { color: #8590a2; font-size: 7px; }
.fare-card strong { color: #1c2942; font-size: 12px; }
.fare-card strong i { width: 28px; display: inline-block; margin: 0 7px 3px; border-top: 1px dashed #a9b2c1; }
.fare-card .seat-status { color: #168758; }
.fare-action { min-width: 70px; padding: 8px 10px; border: 1px solid var(--blue); border-radius: 8px; color: var(--blue) !important; background: white; font-size: 7px !important; font-weight: 850; text-align: center; }
.fare-action.selected { color: white !important; background: var(--blue); }
.showcase-card figcaption { display: flex; flex-direction: column; gap: 7px; padding: 20px 22px 22px; border-top: 1px solid #e6ebf2; }
.showcase-card figcaption strong { color: #1b2943; font-size: 13px; }
.showcase-card figcaption span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.showcase-side { display: grid; gap: 22px; }
.wallet-preview, .service-preview { padding-top: 22px; }
.mini-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 22px; }
.mini-card-heading > div { display: flex; flex-direction: column; gap: 5px; }
.mini-card-heading strong { color: #1f2d47; font-size: 13px; }
.wallet-total { display: flex; flex-direction: column; gap: 5px; padding: 20px 22px 14px; }
.wallet-total strong { color: #12213b; font-size: 25px; letter-spacing: -.04em; }
.wallet-total span { color: #8590a2; font-size: 8px; }
.wallet-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 22px; }
.wallet-metrics > div { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid #e5eaf2; border-radius: 11px; background: #f8faff; }
.wallet-metrics small { color: #8590a2; font-size: 7px; }
.wallet-metrics strong { color: #26344c; font-size: 10px; }
.wallet-activity { display: flex; justify-content: space-between; margin: 14px 22px 18px; padding: 11px 0; border-top: 1px solid #edf0f5; color: #647089; font-size: 8px; }
.wallet-activity b { color: var(--green); }
.service-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; margin: 0 22px; padding: 13px 0; border-bottom: 1px solid #edf0f5; }
.service-row:first-of-type { margin-top: 10px; }
.service-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #136ec8; background: #e9f4ff; font-size: 10px; font-weight: 900; }
.service-icon.urgent { color: #c56e18; background: #fff1df; }
.service-icon.done { color: #168758; background: #e6f7ef; }
.service-row > div { display: flex; flex-direction: column; gap: 3px; }
.service-row strong { color: #28354d; font-size: 8px; }
.service-row small, .service-row em { color: #8b95a7; font-size: 7px; font-style: normal; }
.tour-footnote { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 24px; padding: 20px 22px; border: 1px solid #dfe6f0; border-radius: 18px; background: rgba(255,255,255,.82); }
.tour-footnote p { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 11px; }
.tour-footnote p span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: rgba(22,155,98,.1); font-weight: 900; }

.capability-grid { gap: 18px; border: 0; }
.capability-grid article { min-height: 284px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 14px 38px rgba(20,39,75,.055); transition: transform .2s ease, box-shadow .2s ease; }
.capability-grid article:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(20,39,75,.1); }
.capability-grid .icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: #edf7ff; font-size: 23px; }
.outcomes { background: linear-gradient(180deg, #fff, #f4f7fb); }
.outcome-list { padding: 6px 26px; border: 1px solid #dfe6f0; border-radius: 22px; background: white; box-shadow: 0 18px 50px rgba(20,39,75,.06); }
.outcome-list article:last-child { border-bottom: 0; }
.steps { gap: 12px; border: 0; }
.steps article { border: 1px solid var(--line); border-radius: 16px; background: white; }
.steps article:last-child { border-right: 1px solid var(--line); }

@media (max-width: 1080px) {
  .primary-nav { gap: 17px; }
  .primary-nav a { font-size: 11px; }
  .hero-grid { gap: 48px; }
}

@media (max-width: 980px) {
  .wrap { width: min(100% - 48px, 760px); }
  .primary-nav { top: 78px; }
  .hero-grid { grid-template-columns: 1fr; }
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-side { grid-template-columns: 1fr 1fr; }
  .product-tour-heading { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  .wrap { width: min(100% - 32px, 560px); }
  .header-inner { min-height: 72px; }
  .primary-nav { top: 72px; }
  .hero-grid { gap: 46px; padding-block: 56px 70px; }
  .hero h1 { font-size: clamp(43px, 12.5vw, 58px); }
  .hero-lead { font-size: 15px; }
  .preview-body { min-height: 330px; }
  .preview-note { margin-top: 30px; }
  .proof-grid { gap: 10px; }
  .proof-grid div, .proof-grid div:nth-child(2), .proof-grid div:nth-child(-n+2) { min-height: 84px; border: 1px solid var(--line); }
  .section { padding-block: 76px; }
  .product-tour-heading { margin-bottom: 34px; }
  .flight-preview { padding: 14px; }
  .search-summary { grid-template-columns: 1fr 36px 1fr; }
  .search-summary > div:last-child { display: none; }
  .fare-card { grid-template-columns: 36px 1.25fr 1fr; gap: 10px; padding: 14px; }
  .fare-card .fare-action { grid-column: 2 / -1; }
  .showcase-side { grid-template-columns: 1fr; }
  .tour-footnote { align-items: flex-start; flex-direction: column; }
  .capability-grid { gap: 12px; }
  .capability-grid article { min-height: 250px; }
  .outcome-list { padding-inline: 20px; }
  .steps { gap: 10px; }
  .steps article, .steps article:nth-child(2), .steps article:nth-child(-n+2), .steps article:last-child { border: 1px solid var(--line); }
}

@media (max-width: 430px) {
  .preview-body aside { display: none; }
  .preview-body { grid-template-columns: 1fr; }
  .floating-card { right: 8px; max-width: calc(100% - 18px); }
  .proof-grid { grid-template-columns: 1fr; }
  .fare-card { grid-template-columns: 34px 1fr; }
  .fare-card > div:nth-of-type(3) { grid-column: 2; }
  .fare-card .fare-action { grid-column: 2; }
  .showcase-toolbar strong { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}