:root{
  /* One easing curve for every transition and animation: fast start, soft landing */
  --ease:cubic-bezier(0.22,1,0.36,1);
  /* Type scale. Only these sizes are used anywhere on the site. */
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px;
  --fs-24:24px; --fs-30:30px; --fs-36:36px; --fs-48:48px; --fs-60:60px;
  --fog:#F4F5F3; --paper:#FFFFFF; --ink:#171A19; --mid:#5E6663; --line:#D9DDDA;
  --held:#0E6B52; --held-bg:#E6F1EC; --held-line:#BFDCCF;
  --due:#8C5E0A;  --due-bg:#FBF1DC;  --due-line:#EBD9A8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Bricolage Grotesque',system-ui,sans-serif;background:var(--fog);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--held)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;background:rgba(244,245,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo svg{height:30px;width:auto;display:block}
.nav a.btn{height:40px;padding:0 16px;font-size:var(--fs-14)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:12px;font-weight:600;font-size:var(--fs-16);text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-ink{background:var(--ink);color:#fff}
.btn-paper{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-wa{background:#25D366;color:#063}
.btn-wa svg{flex:none}
h1{font-size:var(--fs-36);line-height:1.05;letter-spacing:-.8px;font-weight:700;margin:0 0 14px}
@media(min-width:761px){h1{font-size:var(--fs-48);letter-spacing:-1px}}
.lede{font-size:var(--fs-18);color:var(--mid);max-width:560px;margin:0 0 26px}
section{padding:44px 0}
h2{font-size:var(--fs-24);letter-spacing:-.4px;font-weight:700;margin:0 0 8px}
@media(min-width:761px){h2{font-size:var(--fs-30)}}
.sub{color:var(--mid);margin:0 0 24px;max-width:560px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.list li{display:flex;gap:10px;font-size:var(--fs-16)}
.list .ico{flex:none;margin-top:1px;color:var(--held)}
label{display:block;font-size:var(--fs-14);color:var(--mid);margin:12px 0 6px}
input,select,textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font:inherit;font-size:var(--fs-16);color:var(--ink)}
textarea{height:88px;padding:12px 14px;resize:vertical}
.hint{font-size:var(--fs-14);color:var(--mid);margin-top:10px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0 16px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:20px;height:20px;background:var(--mid);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9L12 15L5 9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9L12 15L5 9'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq p{margin:0 0 14px;color:var(--mid);font-size:var(--fs-16)}
footer{border-top:1px solid var(--line);padding:28px 0 40px;font-size:var(--fs-14);color:var(--mid)}
footer .row{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer a{color:var(--mid)}
.sticky-cta{position:fixed;right:16px;bottom:16px;z-index:9}
[hidden]{display:none !important}
@media(min-width:761px){.sticky-cta{display:none}}
/* Pages and forms */
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:progress}
.page{padding-top:36px;padding-bottom:56px;max-width:680px}
.page h1{font-size:var(--fs-30);letter-spacing:-.6px;margin:0 0 10px}
@media(min-width:761px){.page h1{font-size:var(--fs-36)}}
.page .lede{margin-bottom:22px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{display:block;font-size:var(--fs-14);color:var(--mid);margin:16px 0 8px;padding:0}
.opt{font-weight:400;color:var(--mid)}
.opt::before{content:"· "}
.chips{display:flex;flex-wrap:wrap;gap:8px}
label.chip{margin:0;display:inline-block;position:relative;font-size:var(--fs-16);color:var(--ink)}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);cursor:pointer}
.chip input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--held);outline-offset:2px}
label.check{display:flex;gap:10px;align-items:flex-start;min-height:44px;font-size:var(--fs-16);color:var(--ink);margin:14px 0 0;cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:480px){.row2{grid-template-columns:1fr}}
input[type="datetime-local"]{min-width:0;appearance:none;-webkit-appearance:none}
.field-error{color:var(--due);font-size:var(--fs-14);margin:6px 0 0}
[aria-invalid="true"],fieldset[aria-invalid="true"] .chip span{border-color:var(--due)}
.form-alert{padding:12px 14px;border-radius:12px;background:var(--due-bg);border:1px solid var(--due-line);margin-top:16px;font-size:var(--fs-16)}
.turnstile{margin-top:18px;min-height:65px}
.trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.steps-list{margin:8px 0 0;padding-left:20px;color:var(--mid)}
.steps-list li{margin:6px 0}
.prose p,.prose li{color:var(--ink);font-size:var(--fs-16)}
.prose h2{font-size:var(--fs-20);margin:24px 0 6px}

/* Home: hero starts the request */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:start;padding-top:48px;padding-bottom:48px}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:32px;padding-top:32px}}
.starter legend{font-size:var(--fs-16);font-weight:600;color:var(--ink);margin:0 0 10px}
.starter-row{display:flex;gap:12px;align-items:flex-end;margin-top:16px}
.starter-row > div{flex:1;max-width:240px}
.starter-row label{margin-top:0}
.starter-row .btn{flex:none;min-width:160px}
@media(max-width:480px){.starter-row{flex-direction:column;align-items:stretch}.starter-row > div{max-width:none}}
.owner-link{margin:24px 0 0;font-size:var(--fs-16);color:var(--mid)}
.owner-link a{font-weight:600}

/* Where the deposit is */
.rail-panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px}
.rail-panel h2{font-size:var(--fs-18);letter-spacing:0;margin:0 0 18px}
.rail{list-style:none;margin:0;padding:0}
.rail li{position:relative;padding:0 0 20px 34px}
.rail li::before{content:"";position:absolute;left:7px;top:5px;width:14px;height:14px;border-radius:50%;border:2px solid #B9C0BC;background:var(--paper);box-sizing:border-box}
.rail li::after{content:"";position:absolute;left:13px;top:21px;bottom:-3px;width:2px;background:var(--line)}
.rail li:last-child{padding-bottom:6px}
.rail li:last-child::after{display:none}
.rail .rail-done::before{background:var(--held);border-color:var(--held)}
.rail .rail-done::after{background:var(--held)}
.rail .rail-now::before{border-color:var(--held);box-shadow:0 0 0 4px var(--held-bg)}
.rail b{display:block;font-size:var(--fs-16)}
.rail span{display:block;color:var(--mid);font-size:var(--fs-14)}
.rail-foot{margin:8px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:var(--fs-14);color:var(--mid)}

/* Full-width bands and the handover record */
.band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:start}
@media(max-width:860px){.proof{grid-template-columns:1fr;gap:28px}}
.flow{counter-reset:step;list-style:none;margin:16px 0 0;padding:0}
.flow li{counter-increment:step;position:relative;padding:14px 0 14px 44px;border-top:1px solid var(--line);color:var(--mid);font-size:var(--fs-16)}
.flow li:first-child{border-top:0}
.flow li::before{content:counter(step);position:absolute;left:0;top:13px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:var(--fs-12);display:flex;align-items:center;justify-content:center}
.flow b{color:var(--ink)}
.slip{margin:0;background:var(--fog);border:1px dashed #B9C0BC;border-radius:14px;padding:18px 20px}
.slip figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;margin-bottom:8px}
.slip-tag{font-size:var(--fs-12);font-weight:600;color:var(--due);background:var(--due-bg);border:1px solid var(--due-line);padding:2px 8px;border-radius:999px}
.slip dl{margin:0}
.slip dl div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:var(--fs-14)}
.slip dt{color:var(--mid)}
.slip dd{margin:0}
.ok::before{content:"";display:inline-block;width:1em;height:1em;margin-right:.35em;vertical-align:-.15em;background:var(--held);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM16.0303 8.96967C16.3232 9.26256 16.3232 9.73744 16.0303 10.0303L11.0303 15.0303C10.7374 15.3232 10.2626 15.3232 9.96967 15.0303L7.96967 13.0303C7.67678 12.7374 7.67678 12.2626 7.96967 11.9697C8.26256 11.6768 8.73744 11.6768 9.03033 11.9697L10.5 13.4393L12.7348 11.2045L14.9697 8.96967C15.2626 8.67678 15.7374 8.67678 16.0303 8.96967Z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat}
.slip-sign{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:12px;border-top:1px dashed #B9C0BC;font-size:var(--fs-14);font-weight:600}

/* Gear you can ask for */
.gear{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
@media(max-width:760px){.gear{grid-template-columns:1fr}}
.gear a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;min-height:64px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.gear a::after{content:"Ask \2192";grid-column:2;grid-row:1 / span 2;font-size:var(--fs-14);font-weight:600;color:var(--held)}
.gear b{font-size:var(--fs-18)}
.gear span{font-size:var(--fs-14);color:var(--mid)}
.gear a:hover b,.gear a:focus-visible b{text-decoration:underline}

/* Home hero: a camera viewfinder over a dark band */
.hero-band{background:#121514;color:#fff;overflow:hidden}
.hero-band .lede,.hero-band .owner-link,.hero-band .starter label{color:#B9C2BE}
.hero-band .rail-panel{color:var(--ink)}
@media(min-width:861px){.hero-band .hero{align-items:center}}
.hero-band .hint{color:#9AA4A0}
.hero-band .owner-link a{color:#8FCB98}
.hero-band .starter legend{color:#fff}
.hero-band .chip span{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.hero-band .chip input:checked + span{background:#8FCB98;border-color:#8FCB98;color:#0B1A12}
.hero-band .chip input:focus-visible + span{outline-color:#8FCB98}
.hero-band input[type="date"]{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff;color-scheme:dark}
.hero-band .btn-ink{background:#8FCB98;color:#0B1A12}
.hero-band .btn-ink:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero-title .line > span{display:block}
.hero-title .accent{color:#8FCB98}
.vf{position:relative;padding:40px 28px 30px}
@media(max-width:480px){.vf{padding:36px 16px 24px}}
.vf-hud{position:absolute;inset:0;pointer-events:none}
.vf-corner{position:absolute;width:22px;height:22px;border:0 solid rgba(255,255,255,.55)}
.vf-corner.tl{top:0;left:0;border-top-width:2px;border-left-width:2px}
.vf-corner.tr{top:0;right:0;border-top-width:2px;border-right-width:2px}
.vf-corner.bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.vf-corner.br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.vf-rec,.vf-tc{position:absolute;top:12px;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
.vf-rec{left:30px;display:flex;align-items:center;gap:6px;color:#fff}
.vf-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#E5484D}
.vf-tc{right:30px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
@media(max-width:480px){.vf-rec{left:22px}.vf-tc{right:22px}}
.ticker{border-top:1px solid rgba(255,255,255,.1);padding:14px 0;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:inline-flex}
.ticker-track span{font-size:var(--fs-14);color:#9AA4A0;padding:0 18px;position:relative}
.ticker-track span::after{content:"\00B7";position:absolute;right:-3px;color:#5E6663}
.gear a::after{transition:transform .3s var(--ease)}
.gear a:hover::after{transform:translateX(4px)}

/* Motion: only for people who haven't asked for less of it */
@media (prefers-reduced-motion: no-preference){
  .hero-title .line > span{animation:vouch-rise .9s var(--ease) both}
  .hero-title .line + .line > span{animation-delay:.12s}
  .hero-copy > .lede,.hero-copy > .starter,.hero-copy > .owner-link{animation:vouch-fade-up .7s var(--ease) both}
  .hero-copy > .lede{animation-delay:.3s}
  .hero-copy > .starter{animation-delay:.42s}
  .hero-copy > .owner-link{animation-delay:.54s}
  .vf-corner{animation:vouch-frame .8s var(--ease) both .1s}
  .vf-rec::before{animation:vouch-blink 1.2s steps(2,start) infinite}
  .rail-panel{animation:vouch-fade-up .8s var(--ease) both .5s}
  .ticker-track{animation:vouch-tick 70s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}

  /* The deposit visibly moves: each stop lights up in turn and the line fills behind it */
  .rail li::before{animation:vouch-stop 9s var(--ease) infinite}
  .rail li::after{background:linear-gradient(var(--held),var(--held)) top/100% 0% no-repeat,var(--line);animation:vouch-fill 9s var(--ease) infinite}
  .rail li:nth-child(2)::before,.rail li:nth-child(2)::after{animation-delay:3s}
  .rail li:nth-child(3)::before{animation-delay:6s}

  html.motion .reveal{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  html.motion .reveal.in{opacity:1;transform:none}
  html.motion .slip .ok::before{display:inline-block;margin-right:.3em;transform:scale(0);transition:transform .35s var(--ease)}
  html.motion .slip.in .ok::before{transform:scale(1)}
  html.motion .slip dl div:nth-child(2) .ok::before{transition-delay:.45s}
  html.motion .slip dl div:nth-child(3) .ok::before{transition-delay:.65s}
  html.motion .slip dl div:nth-child(4) .ok::before{transition-delay:.85s}
  html.motion .slip .slip-sign span{display:inline-block;opacity:0;transform:scale(1.25) rotate(-4deg);transition:opacity .3s var(--ease),transform .4s var(--ease)}
  html.motion .slip.in .slip-sign span{opacity:1;transform:none}
  html.motion .slip.in .slip-sign span:nth-child(1){transition-delay:1.1s}
  html.motion .slip.in .slip-sign span:nth-child(2){transition-delay:1.35s}
}
@keyframes vouch-rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes vouch-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vouch-frame{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}
@keyframes vouch-blink{to{visibility:hidden}}
@keyframes vouch-tick{to{transform:translateX(-50%)}}
@keyframes vouch-stop{
  0%,30%{background:var(--held);border-color:var(--held);box-shadow:0 0 0 5px var(--held-bg)}
  36%,100%{background:var(--paper);border-color:#B9C0BC;box-shadow:none}
}
@keyframes vouch-fill{0%{background-size:100% 0%,auto}30%{background-size:100% 100%,auto}92%{background-size:100% 100%,auto}100%{background-size:100% 0%,auto}}

/* Journey: where you are in the rental or listing */
.journey{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.journey li{position:relative;padding-top:24px;font-size:var(--fs-12);line-height:1.3;color:var(--mid);text-align:center}
.journey li::before{content:"";position:absolute;top:2px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid #B9C0BC;background:var(--fog);box-sizing:border-box;z-index:1}
.journey li::after{content:"";position:absolute;top:8px;left:calc(-50% + 7px);right:calc(50% + 7px);height:2px;background:var(--line)}
.journey li:first-child::after{display:none}
.journey .is-done{color:var(--ink)}
.journey .is-done::before{background:var(--held);border-color:var(--held)}
.journey .is-done::after,.journey .is-now::after{background:var(--held)}
.journey .is-now{color:var(--ink);font-weight:600}
.journey .is-now::before{border-color:var(--held);background:var(--paper);box-shadow:0 0 0 4px var(--held-bg)}
.btn.is-sending{position:relative;overflow:hidden}

@media (prefers-reduced-motion: no-preference){
  /* The current stop is live: the line draws into it, then it keeps a slow pulse */
  .journey li{animation:vouch-fade-up .5s var(--ease) both}
  .journey li:nth-child(2){animation-delay:.06s}
  .journey li:nth-child(3){animation-delay:.12s}
  .journey li:nth-child(4){animation-delay:.18s}
  .journey .is-now::before{animation:vouch-pulse 2.4s var(--ease) infinite}
  .journey .is-now::after{background:linear-gradient(var(--held),var(--held)) left/0% 100% no-repeat,var(--line);animation:vouch-line .9s .35s var(--ease) forwards}
  .page form.card{animation:vouch-fade-up .6s .12s var(--ease) both}
  /* Picking a gear type answers back */
  .chip input:checked + span{animation:vouch-pop .22s var(--ease)}
  /* Sending is visibly in progress until the server answers */
  .btn.is-sending::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:40%;background:#8FCB98;animation:vouch-send 1.1s var(--ease) infinite}
  .field-error:not([hidden]){animation:vouch-fade-up .25s var(--ease)}
  /* The reference is logged: the ticket stamps in, then the steps follow */
  .ticket{animation:vouch-stamp .5s .1s var(--ease) both}
  #thanks-steps li{animation:vouch-fade-up .5s var(--ease) both}
  #thanks-steps li:nth-child(1){animation-delay:.45s}
  #thanks-steps li:nth-child(2){animation-delay:.55s}
  #thanks-steps li:nth-child(3){animation-delay:.65s}
}
@keyframes vouch-pulse{0%,100%{box-shadow:0 0 0 4px var(--held-bg)}50%{box-shadow:0 0 0 9px rgba(14,107,82,.07)}}
@keyframes vouch-line{to{background-size:100% 100%,auto}}
@keyframes vouch-pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:none}}
@keyframes vouch-send{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes vouch-stamp{from{opacity:0;transform:scale(1.08) rotate(-1.5deg)}to{opacity:1;transform:none}}

/* Optional fields, folded */
.more{margin-top:20px;border-top:1px solid var(--line)}
.more summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-16);color:var(--held);list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";display:inline-block;width:14px;font-weight:700}
.more[open] summary::before{content:"\2013"}
.more summary .opt{font-weight:400}

/* Thanks: the reference is the thing to keep */
.ticket{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--paper);border:1px dashed #B9C0BC;border-radius:14px;padding:16px 18px;margin:6px 0 18px}
.ticket-label{display:block;font-size:var(--fs-14);color:var(--mid)}
.ticket-ref{display:block;font-size:var(--fs-30);font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums}
@media(min-width:481px){.ticket-ref{font-size:var(--fs-36)}}
.ticket .btn{height:44px;padding:0 16px;font-size:var(--fs-14)}
.next-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* Named text styles (weights cap at 700)
   heading-display  60 desktop / 36 phone, 700  the tagline section
   heading-1        48 desktop / 36 phone, 700  page hero h1
   heading-2        30 desktop / 24 phone, 700  section h2
   heading-3        36 desktop / 30 phone, 700  form and info page h1
   title            18, 700                     card and list titles
   body             16, 400                     running text, form fields
   body-small       14, 400                     secondary text, labels, hints, footer
   caption          12, 600                     badges, step labels, timecode, fine print */
.heading-display{font-size:var(--fs-36);line-height:1.1;font-weight:700;letter-spacing:-.6px}
@media(min-width:761px){.heading-display{font-size:var(--fs-60);line-height:1.05;letter-spacing:-1.2px}}
.title{font-size:var(--fs-18);font-weight:700}
.body{font-size:var(--fs-16)}
.body-small{font-size:var(--fs-14)}
.caption{font-size:var(--fs-12);font-weight:600}

/* Text never strands one word on its own line */
h1,h2,h3,.hero-title .line > span{text-wrap:balance}
p,li,dd{text-wrap:pretty}

/* Shared: a primary button with a quiet second option beside it */
.eyebrow{margin:0 0 14px;font-size:var(--fs-14);font-weight:600;letter-spacing:.02em;color:#8FCB98}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.cta-note{margin:0;font-size:var(--fs-14);color:var(--mid)}
.hero-band .cta-note{color:#B9C2BE}
.text-link{font-weight:600;display:inline-block;padding:12px 0}
.trust-line{margin:24px 0 0;font-size:var(--fs-14);color:var(--mid)}
.card-title{font-size:var(--fs-18);margin:0 0 14px}
.closer{text-align:left}
.closer .sub{margin-bottom:20px}

/* Partners: the three ways a rental goes wrong */
.pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:860px){.pains{grid-template-columns:1fr}}
.pains li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column}
.pains b{font-size:var(--fs-18)}
.pains p{margin:6px 0 0;font-size:var(--fs-16);color:var(--mid)}
.pains .fix{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);color:var(--ink)}
.pains li > p:nth-of-type(1){margin-bottom:16px}
.fix span{display:block;font-size:var(--fs-12);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--held);margin-bottom:4px}

/* Home: an example quote, so the first price question has an answer */
.hero-side{display:flex;flex-direction:column;gap:16px}
.quote{margin:0;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:18px 22px}
.quote figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;margin-bottom:4px}
.quote-item{margin:0 0 10px;font-size:var(--fs-14);color:var(--mid)}
.quote dl{margin:0}
.quote dl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:9px 0;border-top:1px solid var(--line);font-size:var(--fs-14)}
.quote dt b{display:block;font-size:var(--fs-16);color:var(--ink)}
.quote dt span{color:var(--mid)}
.quote dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.quote-foot{margin:6px 0 0;font-size:var(--fs-14);color:var(--mid)}
.hero-band .trust-line{margin:0;color:#9AA4A0;font-size:var(--fs-14)}
@media (prefers-reduced-motion: no-preference){
  .quote{animation:vouch-fade-up .8s var(--ease) both .65s}
  .hero-band .trust-line{animation:vouch-fade-up .8s var(--ease) both .75s}
}

/* Home: a pointer for rental businesses inside the owners section */
.biz-link{margin:16px 0 0;font-size:var(--fs-16);color:var(--mid)}
.biz-link a{font-weight:600}

/* A four-stop rail (partners) keeps the same pace as the three-stop one */
@media (prefers-reduced-motion: no-preference){
  .rail-4 li::before,.rail-4 li::after{animation-duration:12s}
  .rail-4 li::before{animation-name:vouch-stop4}
  .rail-4 li::after{animation-name:vouch-fill4}
  .rail-4 li:nth-child(4)::before{animation-delay:9s}
  .rail-4 li:nth-child(3)::after{animation-delay:6s}
}

/* Header: one renter action, a quiet way in for owners */
.nav-actions{display:flex;align-items:center;gap:20px}
.nav-link{font-size:var(--fs-14);font-weight:600;color:var(--ink);text-decoration:none;padding:12px 0}
.nav-link:hover,.nav-link:focus-visible{text-decoration:underline}
@media(max-width:480px){.nav-link{display:none}}
.nav a.btn{height:44px}
#quote{scroll-margin-top:88px}

/* Tap targets and the reassurance line */
.hero-band .hint{font-size:var(--fs-14)}
@media(max-width:760px){
  footer .row > div:last-child a{display:inline-block;padding:14px 0}
  .sticky-cta{bottom:max(16px,env(safe-area-inset-bottom))}
}

/* More air between sections on desktop; the hero keeps its own spacing */
@media(min-width:861px){section:not(.hero-band){padding:64px 0}}

/* Home: gear you can ask for, as photo tiles */
.gear-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:760px){.gear-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.gear-tiles a{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink)}
.gear-tiles img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#1F2624}
.tile-text{display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px;flex:1}
.tile-text b{font-size:var(--fs-18);display:flex;justify-content:space-between;align-items:center;gap:8px}
.ask{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-14);font-weight:600;color:var(--held);white-space:nowrap}
.tile-text > span{font-size:var(--fs-14);color:var(--mid)}
.gear-tiles a:hover b,.gear-tiles a:focus-visible b{text-decoration:underline}
.gear-tiles a:focus-visible{outline:2px solid var(--held);outline-offset:2px}
@media(max-width:480px){.tile-text{padding:10px 12px 12px}.tile-text b{font-size:var(--fs-16)}.ask-label{display:none}}
.gear-more{margin:20px 0 0;font-size:var(--fs-16);color:var(--mid)}
.gear-more a{font-weight:600}
.gear-note{margin:6px 0 0;font-size:var(--fs-12);color:var(--mid)}
@media (prefers-reduced-motion: no-preference){
  .gear-tiles img{transition:transform .5s var(--ease)}
  .gear-tiles a:hover img{transform:scale(1.03)}
}
/* Keep the footer links clear of the floating button on phones: button height (52px) + 24px.
   Same breakpoint as the button itself, so there's no width where it covers the links. */
@media(max-width:760px){body:has(.sticky-cta) footer{padding-bottom:76px}}

/* 404 */
.notfound{padding-top:96px;padding-bottom:96px}
.notfound h1{margin-bottom:24px}

/* Skip link: off screen until a keyboard user tabs to it */
.skip{position:fixed;left:16px;top:8px;z-index:100;padding:12px 16px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none;outline:2px solid var(--held);outline-offset:2px}
main:focus{outline:none}

/* Reduced motion: no smooth scrolling either */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* Tagline: each word lights up as it crosses the middle of the screen */
.tagline-band{padding:64px 0}
@media(min-width:861px){section.tagline-band{padding:96px 0}}
.tagline{margin:0;max-width:680px;color:var(--ink)}
.tl-line{display:block}
.tl-accent{color:var(--held)}
html.motion .tagline .w{color:#858D89;transition:color .6s var(--ease)}
html.motion .tagline .tl-accent .w{color:#4E9A82}
html.motion .tagline .w.on{color:var(--ink)}
html.motion .tagline .tl-accent .w.on{color:var(--held)}

/* Hero photograph: the first screen's focal point */
.hero-media{position:relative;margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#1F2624}
.hero-media img{display:block;width:100%;height:auto;aspect-ratio:1000/1239;object-fit:cover}
@media(max-width:860px){.hero-media img{aspect-ratio:4/3;object-position:center 30%}}
.hero-chip{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;width:fit-content;max-width:calc(100% - 24px);padding:8px 12px;border-radius:999px;background:rgba(18,21,20,.82);color:#fff;font-size:var(--fs-14);font-weight:600}
.chip-dot{width:8px;height:8px;border-radius:50%;background:#8FCB98;flex:none}

/* Where the money goes: the trust cards that used to sit in the hero */
.money-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
@media(max-width:860px){.money-grid{grid-template-columns:1fr;gap:16px}}
.money .trust-line{margin-top:16px}

@keyframes vouch-stop4{
  0%,22.5%{background:var(--held);border-color:var(--held);box-shadow:0 0 0 5px var(--held-bg)}
  27%,100%{background:var(--paper);border-color:#B9C0BC;box-shadow:none}
}
@keyframes vouch-fill4{0%{background-size:100% 0%,auto}22.5%{background-size:100% 100%,auto}92%{background-size:100% 100%,auto}100%{background-size:100% 0%,auto}}

/* Screen-reader-only text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Loops pause when off screen or when the tab is hidden */
.ticker.is-off .ticker-track,.tab-hidden .ticker-track,
.rail-panel.is-off .rail li::before,.rail-panel.is-off .rail li::after,
.tab-hidden .rail li::before,.tab-hidden .rail li::after,
.vf.is-off .vf-rec::before,.tab-hidden .vf-rec::before{animation-play-state:paused}

@media (prefers-reduced-motion: no-preference){
  /* Section headings: words rise into place, 60ms apart */
  html.motion .is-split .sw{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i) * 60ms)}
  html.motion .is-split.in .sw{opacity:1;transform:none}
  /* Hero intro: copy first (existing), then the photograph opens, then its caption */
  .hero-media{animation:vouch-media 1.1s var(--ease) both .2s}
  .hero-chip{animation:vouch-fade-up .7s var(--ease) both .9s}
}
@keyframes vouch-media{from{opacity:0;transform:scale(1.04);clip-path:inset(8% 0 8% 0 round 16px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 16px)}}

/* Icons: Solar set via Iconify, inlined (no icon script at runtime) */
.ico-arrow{display:block}
/* Phones: the caption sits under the photograph instead of covering it */
@media(max-width:480px){.hero-chip{position:static;width:auto;max-width:none;border-radius:0;background:transparent;padding:12px 14px}}