:root{--ink:#102b3b;--teal:#07787b;--soft:#edf4f3;--line:#d2dfdf;--muted:#526a76;--yellow:#f5ce61}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.7 'DM Sans',sans-serif}a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}button,input,select,textarea{font:inherit}img{max-width:100%;height:auto}figure{margin:0}h1,h2,h3{font-family:Manrope,sans-serif;letter-spacing:-1.4px;line-height:1.14;font-weight:600;margin:0}h1{font-size:clamp(42px,4.7vw,68px)}h2{font-size:clamp(34px,3.6vw,50px)}h3{font-size:24px;letter-spacing:-.65px}p{color:var(--muted);margin:20px 0;line-height:1.75}a:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #07787b;outline-offset:5px}.shell{width:min(1240px,calc(100% - 72px));margin:0 auto}.kicker{display:block;font-size:12px;letter-spacing:1.9px;font-weight:700;color:var(--teal);margin-bottom:23px}.opening{background:var(--soft);padding:66px 0 0}.opening-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:55px;align-items:center}.opening-copy{padding:10px 0 26px}.opening-copy h1 em{font-style:normal;color:var(--teal)}.opening-copy>p{max-width:510px;font-size:18px;margin:26px 0}.opening-photo{position:relative;height:450px;overflow:hidden;border-radius:10px 10px 10px 80px}.opening-photo img{width:100%;height:100%;object-fit:cover;display:block}.opening-photo span{position:absolute;bottom:0;left:0;right:0;padding:55px 30px 28px;background:linear-gradient(rgba(16,43,59,0) 0%,rgba(16,43,59,.80) 25%,rgba(16,43,59,.95) 100%);color:#fff;font:500 26px Manrope,sans-serif;letter-spacing:-.6px} .actions{display:flex;gap:14px;flex-wrap:wrap}.action{display:inline-flex;justify-content:center;align-items:center;padding:14px 23px;border-radius:6px;font-size:14px;font-weight:700;line-height:1.4;border:1px solid var(--teal);transition:transform .2s}.action:hover{transform:translateY(-2px);text-decoration:none}.action.primary{background:var(--teal);color:white}.action.secondary{background:transparent;color:var(--ink);border-color:#6f8691}.action.yellow{color:var(--ink);background:var(--yellow);border-color:var(--yellow)}.smallprint{display:block;font-size:13px;color:var(--muted);margin-top:17px}.reassurance{display:flex;justify-content:space-between;gap:20px;padding:25px 0;margin-top:45px;border-top:1px solid #c8d9d8;font-size:14px;font-weight:600}.reassurance span:before{content:'✓';color:var(--teal);margin-right:10px}.chapter{padding:100px 0;border-bottom:1px solid var(--line);scroll-margin-top:0}.chapter-heading{display:grid;grid-template-columns:1.25fr 1fr;gap:90px;align-items:end;margin-bottom:55px}.chapter-heading>p{margin:0;max-width:470px;font-size:17px}.guest-flow{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}.step-heading{display:flex;align-items:center;gap:15px;margin-bottom:24px}.step-heading>span{font-size:13px;color:var(--teal);border-top:1px solid var(--teal);padding-top:5px}.step-heading h3{font-size:22px}.screenshot{background:#edf4f3;padding:22px;display:flex;justify-content:center;border-radius:9px}.screenshot img{width:100%;height:465px;object-fit:contain;display:block}.guest-flow p{font-size:15px}.section-links{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:32px;font-size:14px;font-weight:600}.section-links a{text-decoration:underline;text-underline-offset:5px}.operations{background:#f2f6f5}.operations-grid{display:grid;grid-template-columns:1fr .9fr;gap:90px;align-items:start}.controls-copy article{display:grid;grid-template-columns:30px 1fr;gap:16px;padding:25px 0;border-top:1px solid #c6d8d5}.controls-copy article>span{font-size:12px;color:var(--teal);font-weight:700;padding-top:4px}.controls-copy h3{font-size:23px}.controls-copy p{margin:12px 0 0;font-size:15px}.ops-main{background:white;padding:27px 32px;border-radius:10px;border:1px solid var(--line)}.ops-main img{display:block;max-height:730px;width:100%;object-fit:contain}.ops-main figcaption{text-align:center;font-size:13px;color:var(--muted);margin-top:18px}.wide-screens{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin-top:55px}.wide-screens figure{padding:25px;background:white;border:1px solid var(--line);border-radius:9px}.wide-screens img{height:340px;width:100%;object-fit:contain;display:block}.wide-screens figcaption{padding-top:22px;border-top:1px solid var(--line);margin-top:22px}.wide-screens figcaption strong{font:600 21px Manrope,sans-serif;display:block}.wide-screens figcaption span{font-size:14px;color:var(--muted);display:block;margin-top:8px}.paid-note{margin-top:50px;padding:30px 0;border-top:1px solid #c6d8d5;border-bottom:1px solid #c6d8d5;display:grid;grid-template-columns:1fr 1.2fr auto;gap:30px;align-items:center}.paid-note h3{font-size:22px}.paid-note p{margin:0;font-size:15px}.paid-note a{font-size:14px;font-weight:700;text-decoration:underline}.setup-columns{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line);padding-top:32px}.setup-columns ul{list-style:none;padding:0;margin:0}.setup-columns li{padding:10px 0;font-size:16px}.setup-columns li:before{content:'✓';color:var(--teal);margin-right:12px}.pilot-banner{margin-top:46px;background:var(--ink);color:white;border-radius:10px;padding:45px 48px;display:grid;grid-template-columns:1.5fr 1fr;gap:75px;align-items:center}.pilot-banner .kicker{color:var(--yellow)}.pilot-banner h3{font-size:38px;letter-spacing:-1px}.pilot-banner p{color:#c2d4da;font-size:16px;max-width:600px}.pilot-banner>div:nth-child(2){display:flex;align-items:flex-start;flex-direction:column}.pilot-secondary{color:#fff;font-size:14px;text-decoration:underline;margin-top:20px} /* The pilot banner is var(--ink) #102b3b. The house .action.secondary is transparent with color:var(--ink), which on this banner is ink-on-ink = 1.000:1 -- invisible. These two declarations are what make a secondary BUTTON usable here: #ffffff label = 14.678:1, and a #b9d0d8 border = 10.185:1, well over the 3:1 that SC 1.4.11 asks of a control boundary. .pilot-secondary above is kept because older markup may still use it. */ .pilot-banner .action.secondary{background:transparent;color:#fff;border-color:#b9d0d8} .pilot-banner .pilot-actions-row{margin-top:4px}.pilot-banner .smallprint{color:#b9d0d8}.pilot-evidence{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-top:20px}.pilot-evidence p{max-width:880px;font-size:14px}.pilot-evidence a{font-size:14px;white-space:nowrap;text-decoration:underline}.pricing-section{background:#f2f6f5}.plan-table-wrap{overflow:auto}.plan-table{width:100%;border-collapse:collapse;font-size:15px;text-align:left;background:white}.plan-table thead{background:var(--ink);color:white}.plan-table th,.plan-table td{padding:23px 22px;border-bottom:1px solid var(--line);vertical-align:top}.plan-table thead th{font-size:13px;font-weight:500}.plan-table tbody th{width:19%;font:600 19px/1.5 Manrope,sans-serif;letter-spacing:-.5px}.plan-table td:nth-child(2){width:19%}.plan-table td:nth-child(3){width:20%}.plan-table td:nth-child(4){font-size:14px;color:var(--muted)}.plan-table strong{font-size:23px;white-space:nowrap;font-weight:600}.plan-table small{display:block;font:500 12px 'DM Sans',sans-serif;color:var(--teal);letter-spacing:0;margin-top:5px}.plan-table td span:not([dir]){display:block;font-size:13px;color:var(--muted)}.plan-table .recommended{background:#e4f1ed}.calculator{margin-top:35px;padding:32px 0;display:grid;grid-template-columns:1fr .7fr .7fr;gap:25px;border-top:1px solid #c6d8d5;border-bottom:1px solid #c6d8d5;align-items:center}.calculator .kicker{margin-bottom:12px}.calculator p{font-size:14px;margin:10px 0}.calculator label{font-size:14px;font-weight:500}.calculator input{display:block;width:100%;margin-top:10px;padding:13px;border:1px solid #52616b;border-radius:5px;background:white;color:var(--ink)}.calc-result{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line);padding-top:22px}.calc-result strong{font:600 25px Manrope,sans-serif;letter-spacing:-.7px;color:var(--teal);white-space:nowrap}.calc-result span{font-size:14px;color:var(--muted);max-width:620px}.pricing-footnote{font-size:14px}.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}.faq-list details{padding:22px 0;border-bottom:1px solid var(--line)}.faq-list summary{cursor:pointer;display:flex;justify-content:space-between;gap:25px;font-weight:500;list-style:none}.faq-list summary:after{content:'+';font-size:23px;font-weight:400;color:var(--teal)}.faq-list details[open] summary:after{content:'−'}.faq-list p{font-size:15px;margin-bottom:4px}.contact-section{background:#e6f1ee}.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:90px}.founder{display:flex;align-items:center;gap:18px;margin-top:30px}.founder img{width:62px;height:62px;border-radius:50%;object-fit:cover}.founder p{font-size:14px;margin:0}.contact-addresses{margin-top:30px}.contact-addresses a{display:block;font-size:19px;margin-top:18px}.contact-addresses span{font-size:13px;color:var(--muted)}.contact-form{background:white;padding:34px;border-radius:9px}.contact-form form{margin:0}.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form label{display:block;font-size:14px;font-weight:500;margin-bottom:18px}.contact-form input:not([type=hidden]):not([type=checkbox]),.contact-form textarea,.contact-form select{display:block;background:#fff;border:1px solid #52616b;border-radius:5px;color:var(--ink);width:100%;padding:11px;margin-top:8px}.contact-form textarea{min-height:130px;resize:vertical}.contact-form .helper{font-size:13px;color:var(--muted);margin-bottom:20px}.contact-form .btn-submit{background:var(--teal);border:0;border-radius:5px;color:white;font-weight:700;font-size:14px;padding:14px 26px;cursor:pointer}.reading{padding:55px 0}.reading-links{display:flex;gap:20px 35px;flex-wrap:wrap;font-size:15px}.reading-links a{text-decoration:underline;text-underline-offset:5px}@media(max-width:1050px){.shell{width:calc(100% - 48px)}.opening-grid{gap:35px}.chapter-heading{gap:45px}.operations-grid{gap:45px}.contact-grid{gap:45px}.paid-note{grid-template-columns:1fr 1fr}.paid-note>a{grid-column:1/-1}.screenshot img{height:390px}}@media(max-width:800px){.opening-grid,.chapter-heading,.operations-grid,.faq-grid,.contact-grid{grid-template-columns:1fr}.opening-photo{height:350px}.opening{padding-top:45px}.reassurance{display:grid;grid-template-columns:1fr 1fr;font-size:13px}.chapter{padding:65px 0}.chapter-heading{gap:25px;margin-bottom:35px}.chapter-heading>p{max-width:none;font-size:16px}.guest-flow{grid-template-columns:1fr;gap:35px}.guest-flow article{display:grid;grid-template-columns:1fr 1.3fr;gap:20px}.guest-flow .step-heading{flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:0;padding-top:25px;grid-column:1}.guest-flow .screenshot{grid-column:2;grid-row:1/3}.guest-flow p{grid-column:1;margin:0}.screenshot img{height:420px}.wide-screens{grid-template-columns:1fr;gap:28px}.ops-main{max-width:600px;width:100%;margin:auto}.ops-main img{max-height:640px}.setup-columns{gap:25px}.pilot-banner{padding:32px;grid-template-columns:1fr;gap:25px}.pilot-evidence{align-items:flex-start;flex-direction:column;gap:0}.pilot-evidence a{white-space:normal}.plan-table{min-width:750px}.calculator{grid-template-columns:1fr 1fr}.calculator>div:first-child{grid-column:1/-1}.calc-result{align-items:flex-start;flex-direction:column;gap:12px}.faq-grid{gap:25px}}@media(max-width:480px){.opening-photo span{font-size:23px;padding-top:70px;text-shadow:0 1px 3px rgba(16,43,59,.85)}.shell{width:calc(100% - 36px)}h1{font-size:42px;letter-spacing:-1.4px}h2{font-size:34px}.opening-copy>p{font-size:16px}.opening-photo{height:300px;border-radius:8px 8px 8px 50px}.action{padding:13px 18px}.smallprint{font-size:12px}.reassurance{gap:15px;font-size:12px}.guest-flow article{display:block}.guest-flow .step-heading{padding:0;flex-direction:row;align-items:center;margin-bottom:20px}.guest-flow p{margin-top:20px}.screenshot img{height:470px}.setup-columns,.paid-note{grid-template-columns:1fr;gap:25px}.paid-note>a{grid-column:auto}.pilot-banner{padding:27px}.pilot-banner h3{font-size:32px}.contact-form{padding:25px}.contact-form .row{grid-template-columns:1fr;gap:0}.calc-result strong{font-size:23px;white-space:normal}.wide-screens figure{padding:18px}.wide-screens img{height:260px}.kicker{font-size:11px;letter-spacing:1.5px}.reading-links{flex-direction:column;gap:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}} .inline-detail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:30px;padding:20px 0}.inline-detail summary{cursor:pointer;color:var(--teal);font-size:16px;font-weight:600}.inline-body{padding:10px 0;max-width:1100px}.inline-body p{font-size:16px}.inline-body .qr-example{max-width:min(320px,100%);width:auto;display:block;margin:25px auto}.inline-shots{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin:30px 0}.inline-shots img{width:100%;height:340px;object-fit:contain;background:white}.inline-shots figcaption{font-size:14px;color:var(--muted);margin-top:15px}@media(max-width:700px){.inline-shots{grid-template-columns:1fr}.inline-shots img{height:280px}} .pilot-banner a:focus-visible,.pilot-banner button:focus-visible{outline:3px solid #f5ce61!important}p a:not(.action):not(.pilot-secondary){text-decoration:underline;text-underline-offset:3px} #full-walkthrough{margin:6px 0 18px} .screenshot video{display:block;width:100%;height:465px;object-fit:contain;background:var(--ink);border-radius:6px}@media(max-width:1050px){.screenshot video{height:390px}}@media(max-width:800px){.screenshot video{height:420px}}@media(max-width:480px){.screenshot video{height:470px}} .screenshot.film video{height:auto;aspect-ratio:16/9;object-fit:contain;align-self:center}.screenshot.film{align-items:center} .feature-pair{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin-top:50px;padding-top:32px;border-top:1px solid #c6d8d5}.feature-pair h3{font-size:22px}.feature-pair p{margin:12px 0 0;font-size:15px}@media(max-width:800px){.feature-pair{grid-template-columns:1fr;gap:28px}} /* Floating media. The media area keeps a fixed HEIGHT so all four steps align, but has no panel: the element itself is sized to the media's own aspect, so the radius and shadow hug the phone rather than drawing a box around letterbox bands -- which is what made the clips look like they sat on white cards. */ .screenshot.bare{background:none;padding:0;border-radius:0;height:465px;display:flex;align-items:center;justify-content:center} .screenshot.bare video,.screenshot.bare img{width:auto;height:auto;max-height:100%;max-width:100%;object-fit:contain;background:none;border-radius:16px;box-shadow:0 22px 45px -20px rgba(16,43,59,.5)} .screenshot.film.bare video{border-radius:10px} @media(max-width:1050px){.screenshot.bare{height:390px}} @media(max-width:800px){.screenshot.bare{height:420px}} @media(max-width:480px){.screenshot.bare{height:470px}} .flow-video{margin:0 0 34px}.flow-video video{display:block;width:100%;aspect-ratio:16/9;background:var(--ink);border-radius:10px}.flow-video figcaption{font-size:14px;color:var(--muted);margin-top:12px} /* Three-step flow graphic. Inline SVG so it is crisp at any size, inherits the theme tokens, and its labels are ordinary translatable text rather than baked pixels. */ @media(max-width:800px){.flow-graphic{margin-top:26px}} /* A chevron that actually travels the wire, over the marching dashes. translate on a path element is GPU-cheap and, being a CSS animation, it is switched off by the page's existing prefers-reduced-motion rule along with everything else. */ /* One runner crosses the whole flow; each box appears as it arrives. Staged with a per-box --d delay on a shared 4s cycle so the arrow and the reveals stay in step. CSS animation, so the page's prefers-reduced-motion rule stops all of it at once. */ /* Three-step flow graphic. One block, written once -- the previous version was assembled by repeated regex edits that left orphan keyframe fragments at top level and broke the parser. */ .flow-graphic{margin:40px 0 0} .flow-graphic svg{width:100%;height:auto;display:block} .flow-graphic .fg-v{font:600 15px Manrope,sans-serif;fill:#102b3b;letter-spacing:-.3px} .flow-graphic .fg-l{font:600 15px Manrope,sans-serif;fill:#102b3b;letter-spacing:-.3px} .flow-graphic figcaption{font-size:14px;color:var(--muted);margin-top:14px;text-align:center} .flow-graphic .fg-ico{opacity:.22;animation:fg-pop 4s ease-out infinite;animation-delay:var(--d)} .flow-graphic .fg-runline{stroke-dasharray:110 428;stroke-dashoffset:110;animation:fg-sweep 4s cubic-bezier(.4,0,.6,1) infinite} .flow-graphic .fg-r2{animation-delay:1.3s} @keyframes fg-sweep{0%{stroke-dashoffset:110}45%{stroke-dashoffset:-428}100%{stroke-dashoffset:-428}} @keyframes fg-pop{0%{opacity:.22}7%{opacity:1}72%{opacity:1}100%{opacity:.22}} @media(max-width:800px){.flow-graphic{margin-top:26px}} /* Sun, sand and navy: distinct chapters without a wall of white. */ :root{--teal:#244b63;--soft:#f1e4c8;--line:#d8d1c2;--muted:#52616b} body{background:#fbf7ee} .opening{background:#f1e4c8} .screenshot{background:#e9ddc7} .operations{background:#e6edf1} .pricing-section{background:#eae0cd} .contact-section,.inline-requests{background:#dce6ed} .reading{background:#efe3ca} .action.primary,.contact-form .btn-submit{background:#102b3b} .action.secondary{border-color:#837b5f} .reassurance,.controls-copy article,.paid-note{border-color:#b8c4ca} .reassurance{border-color:#cbbd9d} .plan-table .recommended{background:#fff0bc} .contact-form,.ops-main,.wide-screens figure{background:#fffdf8} /* ---- audience split: guest journey above, hotel guarantees below ------------- */ .audience{font:700 12px/1 Manrope,sans-serif;letter-spacing:1.9px;text-transform:uppercase; color:var(--teal);margin:0 0 16px} .reassurance{flex-wrap:wrap} .reassurance .audience{flex:0 0 100%;grid-column:1/-1;margin:0 0 4px} .feature-pair.one-up{grid-template-columns:1fr} .feature-pair.one-up article{max-width:900px} /* ---- WCAG 1.4.11: text-input borders --------------------------------------- The input border was #798d8e. Against the pricing section's #eae0cd that measures 2.67:1 -- below the 3:1 required for the visual boundary of a non-text UI component (.calculator input sits directly on .pricing-section, which has no intervening panel). #52616b is the existing --muted token, so no new colour enters the palette, and it clears the bar on every surface an input can land on: 4.89:1 on #eae0cd (pricing), 6.30:1 on #fffdf8 (contact card), 5.99:1 on #fbf7ee (body) and 6.40:1 against the field's own white fill. The literal nearest passing colour was #718485 at 3.00:1 -- rejected because a 1px border with 0.3% headroom is one background tweak away from failing again. No !important: the eight one-pager index pages carry no in-page