/* airbnb-host page styles — v1.0 */
:root{
    --rausch:#15A878;--rausch-2:#0E7A57;--rausch-3:#0A5E43;
    --text:#222222;--text-2:#717171;
    --hairline:#DDDDDD;--hairline-2:#EBEBEB;
    --bg-soft:#F7F7F7;--bg-cream:#E2F4EC;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
    color:var(--text);background:#fff;
    font-size:16px;line-height:1.5;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  }
  a{color:inherit}

  .nav-bar{
    position:sticky;top:0;z-index:100;background:#fff;
    border-bottom:1px solid var(--hairline);
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:14px 40px;height:84px;column-gap:24px;
  }
  .nav-brand{display:inline-flex;align-items:center;gap:8px;color:#15A878;text-decoration:none;flex-shrink:0;justify-self:start}
  .nav-brand .logo-mark{width:34px;height:34px}
  .nav-brand .logo-word{font-size:24px;font-weight:800;letter-spacing:-0.02em;line-height:1;color:#15A878}
  /* Botify mark rendered as a green silhouette via CSS mask — keeps
     the original logo's shape but recolours it to the page's green. */
  .nav-brand .brand-mark-green{
    display:inline-block;width:34px;height:34px;
    background-color:#15A878;
    -webkit-mask:url('/img/botify-logo.png') center / contain no-repeat;
            mask:url('/img/botify-logo.png') center / contain no-repeat;
  }
  .nav-cats{display:flex;align-items:center;gap:28px;justify-self:center}
  .nav-cat{
    position:relative;display:inline-flex;align-items:center;gap:10px;
    text-decoration:none;color:var(--text-2);font-weight:500;font-size:15px;
    padding:8px 4px;cursor:pointer;
  }
  .nav-cat img{width:40px;height:40px;object-fit:contain;display:block}
  .nav-cat.is-active{color:var(--text);font-weight:600}
  .nav-cat.is-active::after{
    content:'';position:absolute;left:50%;right:auto;bottom:-12px;
    height:2px;width:42px;background:var(--text);transform:translateX(-50%);
    border-radius:2px;
  }
  .nav-cat .badge{
    position:absolute;top:-6px;left:30px;
    background:#3F77F4;color:#fff;font-size:10px;font-weight:700;
    padding:2px 6px;border-radius:6px;letter-spacing:0.03em;
  }
  .nav-right{display:inline-flex;align-items:center;gap:10px;justify-self:end}
  .nav-icon{
    width:42px;height:42px;border:1px solid var(--hairline);background:#fff;
    border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--text);transition:box-shadow 150ms;
  }
  .nav-icon:hover{box-shadow:0 2px 10px rgba(0,0,0,0.10)}
  .nav-icon svg{width:18px;height:18px}
  .nav-bar .nav-cta{
    background:linear-gradient(135deg,var(--rausch) 0%,var(--rausch-2) 50%,var(--rausch-3) 100%);
    color:#fff;text-decoration:none;font-weight:600;font-size:14px;
    padding:10px 18px;border-radius:999px;
    display:inline-flex;align-items:center;
    transition:filter 150ms;
  }
  .nav-bar .nav-cta:hover{filter:brightness(0.95)}
  @media (max-width:1023px){
    /* Two-row nav on mobile: top row keeps the brand-left and the
       globe+menu-right, and the three category tabs slide down to
       their own row beneath it with a bottom hairline. */
    .nav-bar{
      grid-template-columns:auto 1fr auto;
      grid-template-rows:auto auto;
      padding:10px 18px 0;
      height:auto;
      column-gap:12px;row-gap:6px;
    }
    .nav-brand{grid-row:1;grid-column:1}
    .nav-right{grid-row:1;grid-column:3;justify-self:end}
    .nav-cats{
      grid-row:2;grid-column:1 / -1;
      display:flex;justify-content:space-around;
      width:100%;gap:0;
      padding:6px 0 10px;margin:0 -18px;
      border-top:1px solid var(--hairline-2);
    }
    .nav-cat{flex-direction:column;gap:4px;font-size:13px;padding:6px 0;text-align:center;min-width:0}
    .nav-cat img,.nav-cat svg{width:36px;height:36px}
    .nav-cat .badge{left:auto;right:-6px;top:-2px}
    .nav-cat.is-active::after{bottom:-6px;width:34px}
  }
  @media (max-width:480px){
    .nav-bar{padding:8px 14px 0}
    .nav-cats{margin:0 -14px}
    .nav-cat{font-size:12px}
    .nav-cat svg{width:32px;height:32px}
  }

  .hero{text-align:center;padding:56px 24px 16px;max-width:720px;margin:0 auto}
  .hero h1{font-size:40px;font-weight:700;letter-spacing:-0.02em;line-height:1.1;margin:0 0 18px;color:var(--text)}
  .hero .stat-row{font-size:14px;color:var(--text-2);display:inline-flex;gap:8px;align-items:center;margin:0 0 12px}
  .hero .stat-row strong{color:var(--text);font-weight:600}
  /* Range slider — native input restyled to match the Airbnb look. */
  .hero .nights-slider{width:340px;max-width:100%;margin:6px auto 14px;position:relative;height:24px;display:flex;align-items:center}
  .hero .nights-slider input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:4px;
    background:linear-gradient(to right,var(--text) 0%,var(--text) var(--fill,60%),var(--hairline) var(--fill,60%),var(--hairline) 100%);
    border-radius:999px;outline:none;margin:0;cursor:pointer;
  }
  .hero .nights-slider input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:24px;height:24px;background:#fff;border:1px solid var(--hairline);
    border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,0.18);cursor:grab;
    transition:transform 120ms ease,box-shadow 150ms ease;
  }
  .hero .nights-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.08);box-shadow:0 4px 12px rgba(0,0,0,0.22)}
  .hero .nights-slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(0.95)}
  .hero .nights-slider input[type=range]::-moz-range-thumb{
    width:24px;height:24px;background:#fff;border:1px solid var(--hairline);
    border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,0.18);cursor:grab;
  }
  .hero .est-link{font-size:14px;color:var(--text);text-decoration:none}
  .hero .est-link u{text-decoration:underline}
  /* Animated counter pop when the user adjusts the slider */
  .hero h1 .amount{
    display:inline-block;transition:transform 220ms cubic-bezier(0.34,1.56,0.64,1);
  }
  .hero h1 .amount.bump{transform:scale(1.08)}

  .search-pill{
    display:inline-flex;align-items:center;gap:14px;
    margin:32px auto 16px;padding:8px 8px 8px 20px;
    border:1px solid var(--hairline);border-radius:999px;
    box-shadow:0 1px 2px rgba(0,0,0,0.08);font-size:15px;background:#fff;
  }
  .search-pill .ico-search{width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,var(--rausch) 0%,var(--rausch-2) 100%);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .search-pill span.sep{color:var(--hairline)}
  .search-pill .chev{width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#fff}

  /* benefit pill — the row above the slider showing live total */
  .benefit-pill{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--bg-soft);border-radius:999px;padding:10px 16px;
    color:var(--text);font-size:13px;font-weight:500;
    margin:0 0 24px;animation:slidefade 600ms ease both;
  }
  .benefit-pill .dot{width:8px;height:8px;border-radius:999px;background:var(--rausch);box-shadow:0 0 0 0 rgba(21,168,120,0.4);animation:pulse 2s infinite}
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(21,168,120,0.45)}
    70%{box-shadow:0 0 0 10px rgba(21,168,120,0)}
    100%{box-shadow:0 0 0 0 rgba(21,168,120,0)}
  }
  @keyframes slidefade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

  /* ===== "Curious about hosting?" card — Airbnb host page style =====
     Cream/peach background, two-character illustration on the left,
     copy + black pill on the right. Lifts on hover. */
  .curious{
    max-width:760px;margin:24px auto 96px;padding:28px 28px;
    background:var(--bg-cream);border-radius:18px;
    display:grid;grid-template-columns:160px 1fr auto;gap:22px;align-items:center;
    transition:transform 240ms cubic-bezier(0.34,1.56,0.64,1),box-shadow 240ms ease;
  }
  .curious:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,0.10)}
  .curious .illus{width:160px;height:140px;display:block}
  .curious .illus svg{width:100%;height:100%}
  .curious h3{font-size:18px;font-weight:600;margin:0 0 4px}
  .curious p{margin:0;color:var(--text);font-size:14px;line-height:1.45}
  .curious .btn-dark{align-self:center;flex-shrink:0;white-space:nowrap}

  .btn-dark{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:999px;background:var(--text);color:#fff;text-decoration:none;font-size:14px;font-weight:600;transition:background 150ms,transform 120ms ease;border:0;cursor:pointer}
  .btn-dark:hover{background:#000;transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,0.18)}
  .btn-dark:active{transform:translateY(0)}

  /* Scroll-in reveal: fades + lifts the section into view */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity 700ms ease,transform 700ms cubic-bezier(0.22,0.61,0.36,1)}
  .reveal.visible{opacity:1;transform:translateY(0)}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .phone-card .phone-frame,.benefit-pill .dot{animation:none!important}
  }

  .section{max-width:760px;margin:0 auto 96px;padding:0 24px}
  .section h2{font-size:30px;font-weight:700;text-align:center;margin:0 0 8px;letter-spacing:-0.02em;line-height:1.1}
  .section .intro{text-align:center;color:var(--text-2);font-size:16px;margin:0 auto 32px;max-width:480px}

  .join-rows{display:grid;gap:14px;margin-top:20px}
  .join-row{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;padding:18px;border-radius:12px;transition:background 200ms ease}
  .join-row:hover{background:var(--bg-soft)}
  .join-row .ico{width:40px;height:40px;color:var(--text);transition:transform 280ms cubic-bezier(0.34,1.56,0.64,1)}
  .join-row:hover .ico{transform:scale(1.08) rotate(-2deg)}
  .join-row .ico svg{width:100%;height:100%}
  .join-row h4{font-size:17px;font-weight:600;margin:0 0 4px}
  .join-row p{margin:0;color:var(--text-2);font-size:15px;line-height:1.45}

  /* Auto-scrolling co-host carousel — hover or touch to pause,
     drag horizontally to override, side arrow buttons for manual step. */
  .cohost-rail{position:relative;margin:0 -24px 28px;overflow:hidden}
  .cohost-track{
    display:flex;gap:20px;
    padding:8px 24px;overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
    cursor:grab;
    scroll-behavior:smooth;
  }
  .cohost-track::-webkit-scrollbar{display:none}
  .cohost-track:active{cursor:grabbing}
  .cohost-track > .cohost-card{
    flex:0 0 220px;scroll-snap-align:start;
  }
  /* Side arrows */
  .rail-btn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border-radius:999px;
    background:#fff;border:1px solid var(--hairline);
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;color:var(--text);z-index:3;
    transition:transform 150ms ease,box-shadow 150ms ease,opacity 200ms;
  }
  .rail-btn:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 6px 16px rgba(0,0,0,0.18)}
  .rail-btn.prev{left:8px}
  .rail-btn.next{right:8px}
  .rail-btn svg{width:18px;height:18px}
  /* Edge fade so cards near the rail edges look like they continue. */
  .cohost-rail::before,.cohost-rail::after{
    content:'';position:absolute;top:0;bottom:0;width:48px;pointer-events:none;z-index:2;
  }
  .cohost-rail::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
  .cohost-rail::after{right:0;background:linear-gradient(-90deg,#fff,rgba(255,255,255,0))}
  @media (max-width:833px){
    .cohost-track > .cohost-card{flex:0 0 180px}
    .rail-btn{display:none}
  }

  /* Popovers anchored to the globe + menu icons */
  .nav-popover{
    position:absolute;top:64px;right:16px;
    min-width:240px;background:#fff;
    border:1px solid var(--hairline);border-radius:14px;
    box-shadow:0 12px 32px rgba(0,0,0,0.14);
    padding:8px;z-index:200;
    opacity:0;transform:translateY(-6px) scale(0.98);pointer-events:none;
    transition:opacity 160ms ease,transform 160ms ease;
  }
  .nav-popover.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .nav-popover a,.nav-popover button{
    display:flex;align-items:center;gap:10px;
    width:100%;border:0;background:transparent;
    padding:10px 12px;border-radius:10px;cursor:pointer;
    text-align:left;color:var(--text);text-decoration:none;font-size:14px;
  }
  .nav-popover a:hover,.nav-popover button:hover{background:var(--bg-soft)}
  .nav-popover .sep{height:1px;background:var(--hairline-2);margin:4px 0}
  .nav-popover .ttl{font-size:11px;color:var(--text-2);padding:8px 12px 4px;text-transform:uppercase;letter-spacing:0.04em}
  .cohost-card{background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:20px 16px;text-align:center;box-shadow:0 6px 16px rgba(0,0,0,0.04);transition:transform 220ms cubic-bezier(0.34,1.56,0.64,1),box-shadow 220ms ease}
  .cohost-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,0.10)}
  .cohost-card .avatar{transition:transform 240ms ease}
  .cohost-card:hover .avatar{transform:scale(1.06)}
  .cohost-card .avatar{width:78px;height:78px;border-radius:999px;margin:0 auto 12px;overflow:hidden;background:var(--bg-soft)}
  .cohost-card .avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .cohost-card h4{font-size:16px;font-weight:600;margin:0 0 2px}
  .cohost-card .loc{font-size:12px;color:var(--text-2);margin:0 0 12px;padding:0 4px;min-height:32px}
  .cohost-card .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid var(--hairline-2);padding-top:10px}
  .cohost-card .stats div{font-size:11px;color:var(--text-2)}
  .cohost-card .stats strong{display:block;color:var(--text);font-size:14px;font-weight:600}
  .center-cta{text-align:center}

  .aircover{max-width:720px;margin:0 auto 96px;padding:0 24px;text-align:center}
  .aircover-logo{color:var(--rausch);font-weight:800;font-size:36px;letter-spacing:-0.04em;margin:0 0 4px}
  .aircover-logo span{font-size:14px;color:var(--text);display:block;font-weight:500;letter-spacing:0;margin-top:-4px}
  .aircover h2{font-size:30px;font-weight:700;margin:24px 0 8px}
  .aircover .intro{color:var(--text-2);margin-bottom:28px}
  .check-list{text-align:left;max-width:600px;margin:0 auto 24px}
  .check-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px 8px;border-bottom:1px solid var(--hairline-2);align-items:center}
  .check-row:last-child{border-bottom:0}
  .check-row span{font-size:15px}
  .check-row .ok{width:18px;height:18px;color:var(--text)}
  .fine-print{font-size:12px;color:var(--text-2);line-height:1.5;margin:16px auto 24px;max-width:600px}
  .fine-print a{color:var(--text)}

  .features-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px;margin:0 auto}
  .feature-card{background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:20px;text-align:center;transition:transform 220ms ease,box-shadow 220ms ease}
  .feature-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,0.08)}
  .feature-card .ic svg{transition:transform 240ms ease}
  .feature-card:hover .ic svg{transform:scale(1.1) rotate(-4deg)}
  .feature-card .ic{width:40px;height:40px;margin:0 auto 12px;display:inline-flex;align-items:center;justify-content:center;color:var(--rausch)}
  .feature-card h4{font-size:16px;margin:0 0 6px;font-weight:600}
  .feature-card p{margin:0;color:var(--text-2);font-size:13px;line-height:1.45}
  .plus-label{text-align:center;color:var(--text-2);font-size:14px;margin:32px 0 18px}

  .phones-section{text-align:center;max-width:880px;margin:0 auto 96px;padding:0 24px}
  .phones-section h2{font-size:30px;margin:0 0 32px;font-weight:700}
  .phones{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 28px;align-items:end}
  .phone-card{text-align:center}
  .phone-frame{width:260px;max-width:100%;margin:0 auto 16px;border:8px solid var(--text);border-radius:36px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,0.18);aspect-ratio:9/19;background:#fff;position:relative;transition:transform 320ms cubic-bezier(0.34,1.56,0.64,1)}
  .phone-card:hover .phone-frame{transform:translateY(-6px) rotate(-1deg)}
  /* Subtle floating animation on the phones — like Airbnb's hero */
  @keyframes phonefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .phone-card:nth-child(1) .phone-frame{animation:phonefloat 6s ease-in-out infinite}
  .phone-card:nth-child(2) .phone-frame{animation:phonefloat 6s ease-in-out -3s infinite}
  .phone-frame img{width:100%;height:100%;object-fit:cover}
  .phone-card .cap-title{font-size:14px;font-weight:600;margin:4px 0}
  .phone-card .cap-sub{font-size:13px;color:var(--text-2);margin:0 auto;line-height:1.4;max-width:240px}

  .faq-wrap{background:var(--bg-soft);padding:64px 24px}
  .faq-inner{max-width:760px;margin:0 auto}
  .faq-wrap h2{font-size:30px;font-weight:700;text-align:center;margin:0 0 28px}
  .faq details{border-bottom:1px solid var(--hairline);padding:18px 0}
  .faq details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:600}
  .faq details summary::-webkit-details-marker{display:none}
  .faq details summary .chev{transition:transform 200ms}
  .faq details[open] summary .chev{transform:rotate(180deg)}
  .faq .qa{padding:14px 0 4px}
  .faq .qa h5{margin:14px 0 4px;font-size:14px;font-weight:600}
  .faq .qa p{margin:0 0 4px;font-size:14px;color:var(--text-2);line-height:1.55}
  .faq .qa a{color:var(--text)}
  .still-q{text-align:center;padding:40px 0 8px}
  .still-q h3{font-size:22px;margin:0 0 6px;font-weight:600}
  .still-q p{color:var(--text-2);margin:0 0 16px;font-size:15px}
  .ask-note{font-size:12px;color:var(--text-2);text-align:center;max-width:700px;margin:36px auto 0;line-height:1.5}
  .ask-note a{color:var(--text)}

  footer.site-foot{background:var(--bg-soft);border-top:1px solid var(--hairline);padding:48px 40px 28px;color:var(--text)}
  footer.site-foot .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1280px;margin:0 auto}
  footer.site-foot h4{font-size:14px;font-weight:600;margin:0 0 14px}
  footer.site-foot ul{list-style:none;margin:0;padding:0}
  footer.site-foot li{padding:4px 0}
  footer.site-foot a{color:var(--text);text-decoration:none;font-size:14px}
  footer.site-foot a:hover{text-decoration:underline}
  .foot-legal{border-top:1px solid var(--hairline);margin-top:36px;padding-top:20px;max-width:1280px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--text-2)}
  .foot-legal a{color:var(--text-2)}

  .stickybar{display:none}

  @media (max-width:833px){
    .nav-bar{padding:12px 18px}
    .hero{padding:32px 18px 8px}
    .hero h1{font-size:28px}
    .search-pill{font-size:13px;padding:6px 6px 6px 14px;gap:8px}
    .map-wrap{aspect-ratio:4/3}
    .curious{grid-template-columns:1fr;text-align:center;gap:12px;max-width:92%;padding:20px;justify-items:center}
    .curious .illus{margin:0 auto}
    .curious .btn-dark{margin:0 auto}
    .cohost-grid{grid-template-columns:1fr 1fr;gap:14px}
    .phones{grid-template-columns:1fr}
    .features-row{grid-template-columns:1fr}
    .section h2,.faq-wrap h2,.phones-section h2{font-size:24px}
    footer.site-foot .cols{grid-template-columns:1fr;gap:28px}
    .stickybar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:100;background:#fff;border-top:1px solid var(--hairline);padding:12px 16px;justify-content:stretch}
    .stickybar .nav-cta{background:linear-gradient(135deg,var(--rausch) 0%,var(--rausch-2) 50%,var(--rausch-3) 100%);color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:14px 22px;border-radius:999px;flex:1;display:inline-flex;align-items:center;justify-content:center;text-align:center}
    body{padding-bottom:80px}
  }