/* ==========================================================================
   HostCentral.ai – responsive rules
   Desktop ≥1440 · Laptop 1024–1439 · Tablet 768–1023 · Mobile 320–767
   ========================================================================== */

/* ---------- Large desktop (≥1440): keep composition, add breathing room ---------- */
@media (min-width: 1440px) {
  .hero-home { min-height: 720px; }
}

/* ---------- Laptop (1024–1279) ---------- */
@media (max-width: 1279px) {
  .main-nav { margin-left: 56px; }
  .main-nav ul { gap: 30px; }
  .hero-inner { grid-template-columns: 430px 1fr; }
  .hero h1 { font-size: 44px; }
  .device { transform: scale(.86); transform-origin: left top; }
  .hero-robot { width: 210px; }
  .centri-scene { width: 380px; }
  .scene-robot { width: 300px; left: 20px; }
  .hand-note { left: 200px; font-size: 26px; }
  .hand-arrow { left: 236px; }
  .centri-content { width: calc(100% - 330px); }
  .centri-grid { grid-template-columns: 1.3fr 1fr; }
  .cta-robot { left: auto; right: 22%; }
}

@media (max-width: 1100px) {
  .device { transform: scale(.74); }
  .hero-inner { grid-template-columns: 410px 1fr; }
}

/* ---------- Tablet (768–1023) ---------- */
@media (max-width: 1023px) {
  :root { --header-h: 68px; }
  .site-header { position: absolute; }
  .logo-text { font-size: 23px; }
  .logo-icon { width: 34px; height: 31px; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; padding: 0 12px; position: relative; z-index: 60; }
  .nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .25s, opacity .25s; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav { position: fixed; inset: 0 0 auto 0; top: 0; margin: 0; padding: calc(var(--header-h) + 10px) 24px 28px; background: #fff; box-shadow: 0 20px 40px rgba(10,30,80,.15); flex-direction: column; align-items: stretch; gap: 18px; transform: translateY(-105%); transition: transform .3s ease; z-index: 55; }
  .nav-open .main-nav { transform: none; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav ul a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line-2); font-size: 17px; }
  .main-nav ul a.active::after { display: none; }
  .nav-actions .btn { flex: 1; }
  body.nav-locked { overflow: hidden; }
  .nav-open .logo { position: relative; z-index: 60; }

  .hero { min-height: 0; }
  .hero-bg img { object-position: 20% bottom; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.4) 45%, rgba(255,255,255,.1) 100%); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { padding: 48px 0 24px; text-align: left; }
  .hero-visual { min-height: 0; height: 520px; }
  .device { transform: none; position: relative; left: auto; top: auto; width: 100%; max-width: 742px; margin: 0 auto; height: 500px; }
  .hero-robot { width: 170px; left: -6px; top: auto; bottom: -20px; }

  .benefits-inner { grid-template-columns: 1fr 1fr; gap: 22px 0; }
  .benefit:nth-child(3) { border-left: 0; padding-left: 24px; }

  .section { padding: 56px 0; }
  .section-head h2, .section-title { font-size: 28px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }

  .centri-section { padding: 0 0 48px; }
  .centri-scene { position: relative; width: 100%; height: 340px; }
  .centri-scene::after { background: linear-gradient(180deg, rgba(234,244,255,0) 60%, rgba(230,242,254,1) 100%); }
  .scene-robot { width: 240px; left: 50%; margin-left: -200px; }
  .hand-note { left: 50%; margin-left: 40px; top: 40px; }
  .hand-arrow { left: 50%; margin-left: 74px; top: 150px; }
  .centri-content { width: 100%; }
  .centri-content h2, .centri-content .section-sub { margin-left: 0; }
  .centri-grid { grid-template-columns: 1fr; }

  .steps { grid-template-columns: 1fr; gap: 36px; max-width: 420px; }
  .step:not(:last-child)::after { display: none; }
  .persona-grid { grid-template-columns: 1fr; }

  .cta-band::before { background: linear-gradient(90deg, #023d8f 0%, rgba(5, 72, 166, .9) 55%, rgba(10, 90, 200, .3) 100%); }
  .cta-robot { width: 170px; right: 4%; left: auto; bottom: -30px; }
  .cta-copy { max-width: 70%; padding-left: 0; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-compact-inner { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .footer-compact .footer-cols { grid-column: 1 / -1; }
  .footer-compact .footer-legal { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
}

/* ---------- Mobile (≤767) ---------- */
@media (max-width: 767px) {
  body { font-size: 14.5px; }
  .container { width: calc(100% - 32px); }
  .br-desktop { display: none; }
  .logo-text { font-size: 21px; }
  .nav-actions { flex-direction: column; }
  .hero-copy { padding: 36px 0 16px; }
  .hero h1 { font-size: 34px; }
  .hero-lead { font-size: 16px; margin-bottom: 24px; }
  .btn-row .btn { flex: 1 1 auto; }
  .btn-lg { height: 50px; padding: 0 22px; font-size: 15px; }
  .eyebrow { font-size: 11.5px; }
  .hero-visual { height: auto; padding-bottom: 120px; }
  .device { height: auto; padding: 10px; border-radius: 18px; }
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .app-split { grid-template-columns: 1fr; }
  .hero-robot { width: 130px; bottom: 0; }

  .benefits-inner { grid-template-columns: 1fr; padding: 24px 0; gap: 16px; }
  .benefit, .benefit:first-child, .benefit:nth-child(3) { border-left: 0; padding: 0; }

  .section { padding: 46px 0; }
  .section-head { margin-bottom: 26px; }
  .section-head h2, .section-title, .centri-content h2 { font-size: 25px; }
  .section-head p, .section-sub { font-size: 15px; }
  .feature-grid { grid-template-columns: 1fr; gap: 14px; }
  .feature-card { padding: 22px 22px 24px; }
  .feature-card h3 { font-size: 19px; margin-top: 16px; }

  .centri-scene { height: 300px; }
  .scene-robot { width: 200px; margin-left: -170px; }
  .hand-note { margin-left: 30px; font-size: 23px; }
  .hand-arrow { margin-left: 60px; top: 128px; width: 28px; }

  .persona-card > img { height: 190px; }
  .persona-body { padding: 20px 22px 24px; }

  .cta-band { min-height: 0; }
  .cta-inner { padding: 44px 0 190px; }
  .cta-copy { max-width: 100%; }
  .cta-band h2 { font-size: 26px; }
  .cta-band p { font-size: 15px; }
  .cta-band::before { background: linear-gradient(180deg, #023d8f 0%, rgba(5, 72, 166, .92) 55%, rgba(10, 90, 200, .1) 100%); }
  .cta-bg { object-position: 70% bottom; }
  .cta-robot { width: 150px; right: 50%; margin-right: -75px; bottom: -24px; }

  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
  .back-to-top { right: 14px; bottom: 14px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 30px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Inner pages – responsive
   ========================================================================== */
@media (max-width: 1279px) {
  .feat-bookings-grid { grid-template-columns: 420px 1fr; }
  .feat-guests-grid { grid-template-columns: 1fr; }
  .inbox-mock { max-width: 820px; }
  .ops-card { grid-template-columns: 1fr 190px; }
  .ops-card h3 { white-space: normal; }
  .how-step-1 .how-copy, .how-step-3 .how-copy { flex-basis: 440px; }
  .how-robot { width: 150px; right: 10px; }
  .how-scene { width: 18%; }
  .channels-card { width: 160px; }
  .cal-card-sm { width: 440px; }
  .how-step-2 .how-copy, .how-step-4 .how-copy { flex-basis: 400px; }
  .day-mock { width: 620px; grid-template-columns: 130px 1fr 220px; }
  .hero-pricing .hero-inner { grid-template-columns: 520px 1fr; }
  .float-visual { transform: scale(.85); transform-origin: left top; }
  .hero-ai .hero-inner { grid-template-columns: 440px 1fr; }
  .ai-visual { transform: scale(.8); transform-origin: left top; }
  .tools-nav a { font-size: 13px; gap: 8px; padding: 0 6px; }
  .tools-nav .icon-tile { width: 36px; height: 36px; font-size: 18px; }
  #photos .tool-grid { grid-template-columns: 1fr 340px; }
  .tool-grid { grid-template-columns: minmax(0,1fr) 290px; }
  .reply-mock, .alert-card { width: auto; flex: 1; }
  .trade-row { grid-template-columns: 200px minmax(0,1fr); }
  .robot-wrench { display: none; }
  .cta-slim .cta-copy { padding-left: 40px; }
  .cta-slim .cta-robot { left: auto; right: 18%; }
  .footer-compact-inner { grid-template-columns: 280px 200px 1fr; }
}

@media (max-width: 1023px) {
  .section-tabs { position: static; }
  .section-tabs-inner { grid-template-columns: 1fr 1fr; }
  .section-tabs a { height: 56px; font-size: 14px; justify-content: flex-start; padding-left: 8px; }
  .section-tabs a + a::before { display: none; }
  .feat-head { margin-left: 0; }
  .feat-bookings-grid { grid-template-columns: 1fr; }
  .cal-card { overflow-x: auto; }
  .cal-week, .cal-hero { min-width: 600px; }
  .inbox-mock { grid-template-columns: 200px 1fr 130px; }
  .inbox-side { display: none; }
  .ops-grid { grid-template-columns: 1fr; }

  .how-strip-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
  .strip-step + .strip-step::before { display: none; }
  .how-step-inner { flex-direction: column; align-items: stretch; gap: 26px; min-height: 0; padding: 20px 0; }
  .how-step-1 .how-copy, .how-step-3 .how-copy, .how-step-2 .how-copy, .how-step-4 .how-copy { flex: none; padding-left: 0; }
  .how-step-2 .how-copy, .how-step-4 .how-copy { order: -1; }
  .how-scene { display: none; }
  .how-robot { display: none; }
  .prop-form, .workflow-card { width: 100%; max-width: 560px; }
  .channels-visual { overflow-x: auto; }
  .day-mock { width: 100%; }
  .stay-flow { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .stay-flow li::after { display: none; }
  .assistant-inner { grid-template-columns: 1fr; }
  .assistant-art { height: 230px; max-width: 320px; margin: 0 auto; width: 100%; }
  .assist-cards { grid-template-columns: 1fr; }
  .faq-q, .page-pricing .faq-q { grid-template-columns: 1fr 24px; }
  .faq-short { grid-column: 1; font-size: 14px; }
  .faq-chev { grid-column: 2; grid-row: 1 / span 2; }
  .faq-a, .page-pricing .faq-a { padding-left: 26px; }

  .hero-pricing .hero-inner, .hero-ai .hero-inner { grid-template-columns: 1fr; }
  .float-visual { transform: none; min-height: 560px; max-width: 640px; }
  .hero-pricing .hero-robot { left: 0; top: 230px; }
  .plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .goals { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .not-sure-robot { width: 180px; margin-bottom: -40px; }
  .not-sure::before { background: linear-gradient(90deg, rgba(240,247,255,.96) 0%, rgba(240,247,255,.9) 70%, rgba(240,247,255,.4) 100%); }

  .ai-visual { transform: none; min-height: 400px; max-width: 700px; }
  .tools-nav { position: static; }
  .tools-nav-inner { grid-template-columns: repeat(3, 1fr); }
  .tools-nav a { height: 60px; }
  .tools-nav a + a::before { display: none; }
  .tool-grid, #photos .tool-grid { grid-template-columns: 1fr; }
  .tool-side { grid-template-columns: repeat(3, 1fr); }
  .listing-grid { grid-template-columns: 1fr; }
  .reply-row { flex-direction: column; align-items: stretch; }
  .tool-robot { display: none; }
  .trade-row { grid-template-columns: 1fr; }
  .wf-steps { grid-template-columns: 1fr; gap: 14px; }
  .wf-steps li::after { display: none; }
  .cta-slim { min-height: 0; }
  .cta-slim .cta-inner { padding: 30px 0; }
  .cta-slim .cta-copy { padding-left: 0; }
  .cta-slim .cta-robot { width: 130px; bottom: -70px; right: 4%; }
}

@media (max-width: 767px) {
  .section-tabs-inner { grid-template-columns: 1fr 1fr; }
  .section-tabs a { gap: 8px; font-size: 13px; }
  .section-tabs a .icon { width: 32px; height: 32px; padding: 7px; }
  .list-card { padding: 16px 40px 16px 16px; gap: 14px; min-height: 0; }
  .list-card .icon-tile.tile-lg { width: 52px; height: 52px; font-size: 24px; }
  .list-card h3 { font-size: 17px; }
  .list-card p { font-size: 14px; }
  .list-card p br { display: none; }
  .cal-card-top { flex-wrap: wrap; gap: 10px; }
  .inbox-mock { grid-template-columns: 1fr; }
  .inbox-chat { border-top: 1px solid var(--line-2); min-height: 360px; }
  .inbox-prop { display: none; }
  .feat-guests-copy .section-title { font-size: 26px; }
  .ops-card { grid-template-columns: 1fr; }
  .ops-card h3 { white-space: normal; }

  .how-strip-inner { grid-template-columns: 1fr; }
  .how-copy { gap: 16px; flex-direction: column; }
  .big-num { width: 52px; height: 52px; font-size: 21px; }
  .how-copy h2 { font-size: 28px; }
  .how-copy h2 br { display: none; }
  .how-copy p { font-size: 15.5px; }
  .prop-form-grid { grid-template-columns: 1fr; }
  .prop-form-grid > img { width: 100%; height: 180px; }
  .channel-lines { display: none; }
  .channels-visual { flex-direction: column; align-items: stretch; gap: 14px; overflow: visible; }
  .channels-card, .cal-card-sm { width: 100%; }
  .cal-card-sm { overflow-x: auto; }
  .workflow-card { padding: 16px; }
  .timeline li { grid-template-columns: 32px 1fr 22px; }
  .timeline .tl-ic { display: none; }
  .timeline small br { display: none; }
  .wf-booking { grid-template-columns: 56px 1fr; }
  .wf-booking .tag { grid-column: 2; justify-self: start; }
  .day-mock { grid-template-columns: 1fr; }
  .day-mock .app-side { display: none; }
  .stay-flow { grid-template-columns: 1fr; }
  .assistant-content .section-title { font-size: 25px; }
  .faq-q { padding: 14px 16px; }
  .faq-question { font-size: 15px; }
  .faq-a, .page-pricing .faq-a { padding: 0 16px 16px; }

  .hero-pricing h1 { font-size: 34px; }
  .float-visual { min-height: 0; height: 520px; transform: scale(.62); transform-origin: left top; margin-bottom: -190px; width: 620px; }
  .plan h3 { font-size: 26px; }
  .compare th, .compare td { font-size: 14px; padding: 0 10px; }
  .not-sure-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 34px 0 30px; }
  .not-sure-robot { display: none; }
  .not-sure-copy h2 { font-size: 26px; }
  .not-sure-copy p br { display: none; }

  .hero-ai h1 { font-size: 36px; }
  .ai-visual { transform: scale(.52); transform-origin: left top; width: 700px; height: 400px; margin-bottom: -190px; }
  .tools-nav-inner { grid-template-columns: 1fr 1fr; }
  .tools-nav a { height: 54px; font-size: 13px; }
  .tool-head { align-items: flex-start; }
  .tool-head .icon-tile { width: 46px; height: 46px; font-size: 22px; }
  .tool-head h2 { font-size: 22px; }
  .tool-head p { font-size: 14.5px; }
  .tool-side { grid-template-columns: 1fr; }
  #photos .ba-slider { aspect-ratio: 4 / 3; }
  .listing-tags span { padding: 8px 14px; }
  .reply-mock { grid-template-columns: 1fr; }
  .reply-side { display: none; }
  .reply-actions .btn-primary, .reply-actions .btn-outline { flex: 1 1 auto; padding: 0 16px; }
  .ins-stats { grid-template-columns: 1fr; gap: 8px; }
  .trend { height: 120px; }
  .alert-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .alert-cols { grid-template-columns: 1fr; gap: 12px; }
  .alert-cols > div { border-left: 0; padding: 0; }
  .alert-cols li { white-space: normal; }
  .trade-cards { grid-template-columns: 1fr; }
  .tool-head-sm { margin-left: 0; }
  .wf-steps { padding: 0; }
  .footer-compact-inner { grid-template-columns: 1fr; }
}

/* overflow guards */
.hero-inner > * { min-width: 0; }
@media (max-width: 1279px) {
  .benefit p { white-space: normal; }
  .footer-top { grid-template-columns: 340px 1fr; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
  .hero-inner, .hero-pricing .hero-inner, .hero-ai .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  main p:not(.hand-note) br, main small br { display: none; }
  .page-features .scene-robot { width: 200px; }
  .device-screen { overflow-x: auto; }
  .cal-hero { min-width: 520px; }
}
@media (max-width: 767px) {
  main h1 br, main h2 br, main h3 br { display: none; }
  .hero h1 br { display: inline; }
  .hero-how .app-main, .hero-how .app-side { zoom: 1; }
  .hero-how .device, .hero-pricing .device { height: auto; }
}


/* ==========================================================================
   Responsive audit fixes – 27 Oct 2026
   ========================================================================== */
/* Desktop spacing that used to be inline style="...!important" on each page.
   Moved here so tablets and phones can use their own spacing. Desktop look unchanged. */
@media (min-width: 1024px) {
  .hero-features { padding-top: 250px; padding-bottom: 250px; }
  .hero-features .hero-copy { margin-top: -130px; }
  .hero-ai, .hero-pricing { padding-top: 150px; padding-bottom: 150px; }
  .hero-how { padding-top: 200px; padding-bottom: 200px; }
}
.cta-pad-lg { padding-top: 100px; padding-bottom: 100px; }
.not-sure.not-sure-photo { background: url('/public/uploads/not-sure-bg.png') center / cover no-repeat; }
.reply-shot { display: block; width: 100%; max-width: 1000px; height: auto; aspect-ratio: 1000 / 350; }

/* Hero banners on tablets and phones.
   The important subject of every banner (dashboard + Centri robot) sits on the RIGHT of the image,
   so "cover" behind the text cropped it away. Below 1024px the text comes first on the plain hero
   colour (good contrast) and the banner follows, cropped from the right so the subject stays visible. */
@media (max-width: 1023px) {
  .hero { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
  .hero-inner { order: 1; }
  .hero-copy { padding: 32px 0 12px; }
  .hero-bg { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
  .hero-bg img { object-position: 92% center; }
  .hero-bg::after { background: linear-gradient(180deg, #eaf4ff 0%, rgba(234, 244, 255, 0) 22%); }
}
@media (max-width: 767px) {
  .hero-bg { aspect-ratio: 16 / 10; }
  .cta-pad-lg { padding-top: 48px; padding-bottom: 48px; }
}

/* Centri section: the robot is part of the background picture (left side). "cover" on a tall
   mobile section showed only sky, so on tablets/phones the picture is sized to the scene at the
   top and anchored left. The decorative hand-written note repeats the heading below it, so it is
   hidden on small screens where it could not fit next to the robot. */
@media (max-width: 1023px) {
  .centri-section { background-size: auto 340px; background-position: -20px 0; background-repeat: no-repeat; background-color: #e6f2fe; }
  .centri-scene { height: 330px; }
  .centri-scene .hand-note, .centri-scene .hand-arrow { display: none; }
}
@media (max-width: 767px) {
  .centri-section { background-size: auto 290px; background-position: -40px 0; }
  .centri-scene { height: 280px; }
}

/* Pricing: plan cards fit 320px phones */
.plans > * { min-width: 0; }
@media (max-width: 1023px) { .plans { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .plan { padding-left: 18px; padding-right: 18px; } .plan h3 { font-size: 23px; overflow-wrap: anywhere; } }

.goals > * { min-width: 0; }
@media (max-width: 1023px) { .goals { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .goal { padding-left: 16px; padding-right: 16px; } }

/* Channel pills: keep long names (Booking.com) inside the pill on small phones – 27 Oct 2026 */
@media (max-width:400px){
  .channel-hub .channel-col{flex-wrap:wrap;}
  .channel-hub .channel-col .channel-pill{width:auto;flex:1 1 150px;min-width:0;padding:0 12px;gap:8px;font-size:14px;}
}