:root{--paper:#f8f7f3;--ink:#292d27;--muted:#74766e;--orange:#e67548;--line:#dedfd5;--wall:#e9e2d3;--floor:#bfb39c}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.65}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.07;font-weight:500;letter-spacing:-.045em}h1{font-size:clamp(64px,6.7vw,99px)}h2{font-size:clamp(38px,4vw,58px)}h3{font-size:27px;letter-spacing:-.035em}.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}.container{width:min(1240px,calc(100% - 96px));margin-inline:auto}.header{position:sticky;top:0;z-index:20;background:rgba(248,247,243,.96);border-bottom:1px solid var(--line)}.nav{height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:inline-flex;align-items:center;font-size:30px;font-weight:700;letter-spacing:-1.5px;line-height:1}.logo-dot{color:var(--orange)}.logo-mark{background:var(--orange);color:var(--paper);width:36px;height:38px;display:grid;place-items:center;border-radius:9px;font-size:35px;margin-right:10px;position:relative}.logo-mark span{position:absolute;right:3px;top:3px;font-size:13px}nav{display:flex;align-items:center;gap:32px}nav>a:not(.button){font-size:13px}nav>a:hover,.footer-links a:hover{color:var(--orange)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;border:0;border-radius:6px;padding:16px 23px;font-size:13px;font-weight:600;line-height:1.4;transition:transform .2s,background .2s}.button span{font-size:20px;font-weight:400}.button:hover{transform:translateY(-3px)}.dark{background:var(--ink);color:white}.dark:hover{background:#444b3f}.orange{background:var(--orange);color:#fff}.orange:hover{background:#ce6139}.small{padding:12px 19px}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:1fr 1.02fr;gap:55px;padding-top:66px;padding-bottom:68px;align-items:center}.eyebrow,.tiny-label{font-size:10px;font-weight:600;letter-spacing:1.7px;line-height:1.5}.eyebrow{margin-bottom:24px}.status-dot{display:inline-block;height:6px;width:6px;border-radius:50%;background:var(--orange);margin-right:8px}.hero-copy{position:relative}.hero h1{position:relative;letter-spacing:-.055em}.hero h1 .serif{color:var(--orange)}.intro{max-width:395px;color:var(--muted);margin-top:27px;font-size:15px;line-height:1.8}.button-row{display:flex;align-items:center;gap:24px;margin-top:29px;flex-wrap:wrap}.text-link{font-size:12px;font-weight:600;display:inline-flex;gap:18px;align-items:center}.text-link span{font-size:19px}.text-link:hover{color:var(--orange)}.hero-note{display:flex;align-items:center;gap:13px;margin-top:36px;font-size:10px;color:var(--muted);line-height:1.7}.hero-note strong{font-weight:400;color:var(--ink)}.stacked-swatches{display:flex;padding-left:4px}.stacked-swatches i{width:29px;height:29px;border:3px solid var(--paper);border-radius:50%;margin-left:-4px;background:#b0b39c}.stacked-swatches i:nth-child(2){background:#dfb492}.stacked-swatches i:nth-child(3){background:#d4cebd}.hero-visual{height:584px;position:relative;border-radius:12px;overflow:hidden;background:#d7d3c7}.hero-visual>img{object-position:48% 50%}.image-top-label{position:absolute;top:23px;left:24px;font-size:9px;letter-spacing:1.3px;background:rgba(255,255,255,.9);padding:10px 14px;border-radius:4px}.floating-card{position:absolute;bottom:75px;right:24px;left:60px;background:rgba(248,247,243,.95);backdrop-filter:blur(8px);padding:21px 24px;border-radius:8px;box-shadow:0 12px 35px #0001;animation:float 7s ease-in-out infinite}.floating-card .tiny-label{font-size:8px;color:var(--muted)}.floating-card strong{display:block;font-weight:500;font-size:18px;margin-top:6px;letter-spacing:-.5px}.mini-swatches{display:flex;gap:8px;margin-top:13px}.mini-swatches>span{height:29px;width:29px;border-radius:50%;background:var(--swatch);border:2px solid #fff}.mini-swatches .swatch-plus{background:transparent;border:1px solid #ccc;display:grid;place-items:center}.image-caption{position:absolute;bottom:0;left:0;right:0;padding:16px 25px;background:#292d27;color:#fff;font-size:10px;display:flex;justify-content:space-between}.image-caption span{font-size:16px}.audience-strip{border-block:1px solid var(--line);padding:28px 0}.audience-strip .container{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}.audience-strip span{font-size:9px;letter-spacing:1.4px;max-width:160px}.audience-strip strong{font-size:17px;font-weight:500;letter-spacing:-.6px}.audience-strip i{color:#a5aa99;font-style:normal;font-size:24px}.section{padding-block:90px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px}.section-heading>p{color:var(--muted);max-width:340px;font-size:13px;line-height:1.9}.section-heading .eyebrow{margin-bottom:16px}.solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.solution-card{border:1px solid var(--line);border-radius:9px;overflow:hidden}.solution-image{height:330px;position:relative;overflow:hidden}.solution-image img{transition:transform .7s}.solution-card:hover img{transform:scale(1.04)}.image-pill{position:absolute;top:20px;left:20px;background:#fffdf2;padding:8px 12px;border-radius:4px;font-size:8px;letter-spacing:1.5px;font-weight:600}.solution-body{padding:27px 30px 30px}.solution-body p{color:var(--muted);font-size:13px;max-width:365px;margin:17px 0 21px}.texture-stack,.paint-chips{position:absolute;bottom:22px;right:25px;display:flex;align-items:center}.texture-stack i{width:45px;height:55px;background:repeating-linear-gradient(135deg,#dad5c9,#dad5c9 17px,#eee8de 20px,#c2b7a8 22px);border:3px solid white;margin-left:-8px;transform:rotate(-10deg);box-shadow:0 4px 10px #0002}.texture-stack i:nth-child(2){background:#aeaa9f;transform:rotate(3deg)}.texture-stack i:nth-child(3){background:#ccbea5;transform:rotate(16deg)}.paint-chips i{height:61px;width:38px;border:3px solid #fff;background:#bdc4b2;margin-left:-5px;transform:rotate(-15deg)}.paint-chips i:nth-child(2){background:#d7b79d;transform:rotate(3deg)}.paint-chips i:nth-child(3){background:#eee0cb;transform:rotate(20deg)}.coming-soon{display:flex;align-items:center;justify-content:center;gap:18px;padding-top:25px;color:var(--muted);font-size:11px}.coming-soon span:first-child{font-size:8px;letter-spacing:1.5px;padding:6px 9px;border:1px solid var(--line);border-radius:4px}.playground{background:#eeefe7;border-block:1px solid var(--line)}.demo-layout{display:grid;grid-template-columns:1.65fr 1fr;background:var(--paper);border:1px solid #d6d8ca;border-radius:10px;overflow:hidden}.room-preview{position:relative;display:grid;background:var(--wall);min-height:420px;align-content:center;transition:background .4s}.room-preview svg{display:block;width:100%;height:auto}.room-preview svg path,.room-preview svg rect{transition:fill .45s}.preview-tag{position:absolute;bottom:20px;left:20px;background:#fffdf2;padding:8px 13px;border-radius:4px;font-size:10px}.demo-controls{padding:34px}.control-heading .eyebrow{font-size:8px}.control-heading h3{margin-top:14px;font-size:26px}.mode-buttons{display:flex;background:#e9e9e0;border-radius:6px;padding:4px;margin:23px 0;gap:5px}.mode-buttons button{width:50%;border:0;background:transparent;border-radius:4px;padding:9px;font-size:12px;color:var(--muted)}.mode-buttons button.active{background:#fff;color:var(--ink);box-shadow:0 1px 5px #0001}.demo-controls>.tiny-label{font-size:8px}.swatches{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}.swatch{width:43px;height:43px;border:3px solid var(--paper);outline:1px solid transparent;border-radius:50%;background:var(--swatch);position:relative}.swatch[aria-pressed="true"]{outline-color:var(--ink)}.swatch[aria-pressed="true"]::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#292d27;font-size:14px}.swatch.tile{border-radius:5px;background:repeating-linear-gradient(135deg,var(--swatch),var(--swatch) 11px,#ffffff44 13px,var(--swatch) 15px)}.selection-description{margin:22px 0}.selection-description strong{font-size:14px;font-weight:500}.selection-description p{font-size:11px;color:var(--muted);margin-top:5px}.demo-disclaimer{font-size:10px;color:var(--muted);margin-bottom:22px}.demo-controls .button{width:100%;font-size:11px}.center-heading{text-align:center;margin-bottom:50px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:55px}.step-number{display:flex;justify-content:space-between;font-size:12px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:26px}.step-number i{font-style:normal;color:var(--orange);font-size:25px;line-height:1}.steps h3{font-size:23px}.steps p{color:var(--muted);font-size:12px;margin-top:16px;line-height:1.9}.benefits{background:#292f27;color:var(--paper)}.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.benefits .eyebrow{color:#c4c9b6}.benefits h2 .serif{color:#c1c9af}.benefits .button{margin-top:32px}.benefit-list article{display:flex;gap:25px;padding:25px 0;border-bottom:1px solid #ffffff24}.benefit-list article:last-child{border:0}.benefit-list article>span{color:#c1c9af;font-size:26px;line-height:1}.benefit-list h3{font-size:23px}.benefit-list p{font-size:12px;color:#b4baac;line-height:1.9;margin-top:12px}.faq-section{display:grid;grid-template-columns:1fr 1.2fr;gap:90px}.faq-section .eyebrow{font-size:8px}.faqs details{border-bottom:1px solid var(--line)}.faqs summary{list-style:none;padding:22px 0;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font-size:13px}.faqs summary::-webkit-details-marker{display:none}.faqs summary span{font-size:21px;color:var(--muted);line-height:1}.faqs details[open] summary span{transform:rotate(45deg)}.faqs details p{font-size:12px;color:var(--muted);padding-bottom:23px;max-width:480px}.contact{background:#eeeee5;border-block:1px solid var(--line)}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.contact-grid>div>p:not(.eyebrow){max-width:365px;font-size:13px;color:var(--muted);margin-top:25px;line-height:1.9}.contact-grid .text-link{margin-top:27px}.contact-form{background:var(--paper);padding:35px;border-radius:9px;border:1px solid var(--line)}.contact-form h3{margin-bottom:25px}.contact-form label{display:block;font-size:10px;font-weight:600;margin-bottom:17px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}input,select,textarea{display:block;width:100%;padding:13px 12px;background:#fffefa;color:var(--ink);border:1px solid #dedfd5;border-radius:4px;margin-top:6px;font-size:12px;min-width:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#94958c}select{min-height:45px}.form-note{font-size:10px;color:var(--muted);line-height:1.7;margin:5px 0 20px}.contact-form .button{width:100%}#form-status{font-size:12px;margin-top:12px;color:#934624}#form-status:empty{display:none}.booking-card{padding:45px;background:#ececdf;border:1px solid var(--line);border-radius:10px;display:grid;grid-template-columns:1.4fr 1fr;align-items:center;gap:55px}.booking-card h2{font-size:45px}.booking-card>div>p:not(.eyebrow){font-size:12px;max-width:380px;color:var(--muted);margin-top:20px}.meeting-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:9px;margin-top:25px;color:var(--muted)}.calendar-panel{background:var(--paper);padding:30px;border-radius:7px;text-align:center}.calendar-icon{font-size:36px;color:var(--orange)}.calendar-panel h3{font-size:23px;margin-top:10px}.calendar-panel p{font-size:11px;color:var(--muted);margin:16px 0 22px}.calendar-panel .button{font-size:11px}.footer{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;padding:0 0 25px}.footer .logo{font-size:25px}.footer .logo-mark{width:31px;height:32px;font-size:29px}.footer>div>p{font-size:11px;color:var(--muted);margin-top:15px}.footer-links{display:flex;gap:35px;font-size:11px;padding-top:12px}.footer-bottom{flex-basis:100%;display:flex;justify-content:space-between;margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:9px;color:var(--muted)}:focus-visible{outline:2px solid var(--orange);outline-offset:5px}.skip-link{position:fixed;top:-100px;left:15px;z-index:100;background:var(--ink);color:white;padding:10px}.skip-link:focus{top:10px}.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}.js .reveal.visible{opacity:1;transform:none}@keyframes turn{to{transform:rotate(360deg)}}@keyframes float{50%{transform:translateY(-7px)}}
@media(min-width:1500px){.hero{gap:75px}.hero-visual{height:620px}}@media(max-width:1100px){.container{width:calc(100% - 56px)}nav{gap:22px}.hero{gap:30px}.hero-visual{height:550px}.hero h1{font-size:75px}.button-row{gap:16px}.benefits-grid,.contact-grid{gap:45px}.demo-controls{padding:25px}.steps{gap:30px}}@media(max-width:800px){.nav{height:76px}.menu-toggle{display:block;background:none;border:1px solid var(--line);border-radius:5px;font-size:22px;padding:2px 10px}nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);padding:25px 28px;border-bottom:1px solid var(--line);align-items:stretch}nav.open{display:flex;flex-direction:column;gap:20px}.hero{grid-template-columns:1fr;gap:35px;padding-top:42px;padding-bottom:42px}.hero-copy{max-width:600px}.hero h1{font-size:clamp(65px,12vw,88px)}.hero h1 br:nth-of-type(2){display:none}.hero-visual{height:510px}.hero-note{margin-top:25px}.intro{max-width:460px}.audience-strip .container{justify-content:center}.audience-strip span{max-width:none;width:100%;text-align:center}.audience-strip strong{font-size:14px}.audience-strip i{font-size:17px}.section{padding-block:60px}.section-heading{align-items:flex-start;gap:25px;flex-direction:column}.section-heading>p{max-width:470px}.solution-image{height:260px}.solution-body{padding:23px}.solution-body h3{font-size:25px}.demo-layout{grid-template-columns:1fr}.room-preview{min-height:0}.demo-controls{padding:28px}.demo-controls .button{width:auto}.benefits-grid{grid-template-columns:1fr;gap:35px}.benefit-list article{padding:20px 0}.faq-section{grid-template-columns:1fr;gap:20px}.contact-grid{grid-template-columns:1fr;gap:30px}.contact-grid>div>p:not(.eyebrow){max-width:500px}.booking-card{grid-template-columns:1fr;gap:30px;padding:30px}.booking-card h2{font-size:40px}.footer-links{gap:20px}}@media(max-width:540px){.container{width:calc(100% - 36px)}.logo{font-size:26px}.logo-mark{width:32px;height:34px;font-size:30px}.hero h1{font-size:65px}.hero h1 br:nth-of-type(2){display:block}.eyebrow{font-size:8px}.hero-visual{height:420px}.floating-card{left:23px;right:23px;bottom:70px;padding:19px}.image-top-label{left:18px;top:18px;font-size:8px}.intro{font-size:14px}.hero .button-row{align-items:flex-start;flex-direction:column;gap:18px}.hero-note{font-size:9px}.audience-strip .container{gap:14px}.audience-strip i{display:none}.audience-strip strong{font-size:12px}.solution-grid{grid-template-columns:1fr;gap:25px}.solution-image{height:290px}.coming-soon{flex-wrap:wrap;gap:10px;text-align:center}.coming-soon span:last-child{display:none}.section-heading{margin-bottom:30px}.steps{grid-template-columns:1fr;gap:30px}.step-number{margin-bottom:18px}.center-heading{margin-bottom:35px}.demo-controls .button{width:100%}.contact-form{padding:24px}.form-row{grid-template-columns:1fr;gap:0}.booking-card{padding:22px}.calendar-panel{padding:23px}.booking-card h2{font-size:35px}.footer{gap:26px}.footer-links{flex-wrap:wrap}.footer-bottom{margin-top:0;gap:10px;flex-direction:column}.faqs summary{font-size:12px}.benefits .button{gap:17px;font-size:11px}.floating-card strong{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* Keep scrolling native; avoid continuous paints and blurred moving layers. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.video-hero { position: relative; width: 100%; background: #ece8df; overflow: hidden; }
.video-hero::after { content: ''; position: absolute; inset: 0 0 auto; height: 190px; background: linear-gradient(#0005, transparent); pointer-events: none; }
.room-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.video-caption { position: absolute; z-index: 1; left: max(28px, calc((100vw - 1240px) / 2)); top: 34px; pointer-events: none; color: #fff; text-shadow: 0 1px 4px #0004; }
.video-caption h1 { font-size: clamp(36px,5vw,72px); line-height: 1.05; letter-spacing: -.045em; margin-top: 12px; }
.video-caption .button { pointer-events: auto; margin-top: 22px; text-shadow: none; }
.video-caption > span { font-size: 9px; font-weight: 600; letter-spacing: 1.7px; }
.video-caption p { font-size: 14px; max-width: 400px; margin-top: 14px; line-height: 1.6; }
@media (max-width:540px) {
  .video-caption { top: 12px; left: 16px; }
  .video-caption > span { font-size: 6px; letter-spacing: 1px; }
  .video-caption p { font-size: 16px; margin-top: 2px; }
}
.stats-section { background: var(--paper); border-bottom: 1px solid var(--line); padding: 96px 0 88px; }
.stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.stat { text-align: center; padding: 0 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat-number { display: block; font-size: clamp(64px,8.4vw,128px); color: var(--ink); letter-spacing: -.06em; font-weight: 800; line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-plus { color: var(--orange); margin-left: .02em; }
.stat p { font-size: 16px; font-weight: 600; color: var(--muted); margin-top: 18px; letter-spacing: -.01em; }
.solution-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.solution-image { height: 210px; }
.solution-body { padding: 24px 20px; }
.solution-body h3 { font-size: 24px; min-height: 52px; }
.photoreal-preview { min-height: 0; background: #dcd4c6; }
.photoreal-preview img { aspect-ratio: 16/9; height: auto; }
.material-modes { display: grid; grid-template-columns: 1fr 1fr; }
.material-modes button { width: 100%; }
.video-hero::after { height: 360px; background: linear-gradient(#0008,transparent); }
@media(max-width:1100px) { .solution-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .solution-image { height: 280px; } }
@media(max-width:800px) { .video-caption h1 { font-size: 42px; } .video-caption p { font-size: 12px; max-width: 280px; } .video-caption .button { padding: 10px 14px; margin-top: 12px; } .stats-section { padding: 56px 0; } .stat { padding: 0 12px; } .stat-number { font-size: clamp(44px,9vw,72px); } .stat p { font-size: 13px; } }
@media(max-width:540px) {
  .video-caption h1 { font-size: 28px; margin-top: 6px; }
  .video-caption p { font-size: 9px; max-width: 200px; margin-top: 7px; }
  .video-caption .button { font-size: 9px; padding: 8px 11px; margin-top: 10px; gap: 14px; }
  .video-caption .button span { font-size: 14px; }
  .stat-number { font-size: clamp(28px,8.6vw,44px); }
  .stat p { font-size: 11px; margin-top: 8px; }
  .stat { padding: 0 6px; }
  .stats-section { padding: 40px 0; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-image { height: 260px; }
  .solution-body h3 { min-height: 0; }
  .video-hero::after { height: 190px; }
}
/* Honeypot: off-screen for people, still present for form-filling bots. */
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form { position: relative; }
.contact-form [aria-invalid="true"] { border-color: #c2552d; background: #fff7f3; }
.contact-form .button:disabled { opacity: .6; cursor: progress; transform: none; }
.header { background: var(--paper); }
.floating-card { backdrop-filter: none; background: #f8f7f3; animation: none; }

.js .reveal { transform: translateY(10px); transition-duration: .35s; }
.js .reveal.visible { transform: none; }

/* Entrance and interaction animations use only transforms and opacity. */
@keyframes entrance-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes image-arrive {
  from { opacity: 0; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}
.hero-copy > .eyebrow { animation: entrance-rise .65s both; }
.hero h1 { animation: entrance-rise .8s .1s both; }
.hero .intro { animation: entrance-rise .8s .2s both; }
.hero .button-row { animation: entrance-rise .8s .3s both; }
.hero-note { animation: entrance-rise .8s .4s both; }
.hero-visual > img { animation: image-arrive 1.2s .15s both; }
.button span, .text-link span { transition: transform .25s ease; }
.button:hover span, .button:focus-visible span,
.text-link:hover span, .text-link:focus-visible span { transform: translate(3px,-3px); }
.solution-card { transition: border-color .2s ease; }
.solution-card:hover { border-color: #c7c9bc; }
.swatch { transition: transform .2s ease, outline-color .2s ease; }
.swatch:hover { transform: translateY(-3px); }
.swatch:active { transform: scale(.94); }
.faqs summary span { transition: transform .25s ease; }
.faqs details[open] p { animation: entrance-rise .3s ease both; }
@media (max-width:800px) {
  nav.open { animation: entrance-rise .25s ease both; }
}
@media (prefers-reduced-motion:reduce) {
  .button:hover span, .button:focus-visible span,
  .text-link:hover span, .text-link:focus-visible span,
  .swatch:hover, .swatch:active { transform: none; }
}
.contact-success { margin: auto; width: min(460px, calc(100% - 36px)); padding: 42px 30px 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 24px 80px #0003; }
.contact-success::backdrop { background: rgb(23 32 24 / 55%); backdrop-filter: blur(4px); }
.contact-success h2 { font-size: 36px; margin: 18px 0 12px; }
.contact-success p { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 26px; }
.popup-check { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--orange); color: white; font-size: 30px; }
.popup-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; background: transparent; border: 0; color: var(--ink); font-size: 28px; cursor: pointer; }
.contact-success[open] { animation: popup-enter .25s ease-out; }
@keyframes popup-enter { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.required-mark { color: #c52e26; font-size: 12px; margin-left: 2px; }

/* Logo mark without the arrow badge. */
.logo-mark { line-height: 1; padding-bottom: 3px; }

/* Solutions dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 8px 0; color: inherit; font-size: 13px; }
.nav-dropdown-toggle::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { color: var(--orange); }
.nav-dropdown.open .nav-dropdown-toggle::after { transform: translateY(1px) rotate(-135deg); }
.dropdown-menu { display: none; position: absolute; top: calc(100% + 14px); left: -18px; min-width: 210px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 16px 40px #0000001a; z-index: 30; }
.dropdown-menu::before { content: ''; position: absolute; inset: -16px 0 auto; height: 16px; }
.dropdown-menu a { display: block; padding: 9px 12px; border-radius: 5px; font-size: 14px; }
.dropdown-menu a:hover, .dropdown-menu a:focus-visible { background: #eeeee5; color: var(--orange); }
.nav-dropdown.open .dropdown-menu { display: block; animation: entrance-rise .2s ease both; }
@media (hover: hover) and (min-width: 801px) { .nav-dropdown:hover .dropdown-menu { display: block; } }
@media (max-width: 800px) {
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 0; }
  .dropdown-menu { position: static; min-width: 0; margin-top: 10px; padding: 4px 0 0 12px; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
  .dropdown-menu a { padding: 7px 10px; }
}

/* Hero copy */
.video-caption p { max-width: 470px; }
.video-caption p strong { display: block; font-size: 1.15em; font-weight: 600; margin-bottom: 4px; }

/* Numbers: full figures need a smaller size to fit three columns. */
.stat-number { font-size: clamp(48px,6vw,88px); }
@media (max-width:800px) { .stat-number { font-size: clamp(36px,7vw,60px); } }
@media (max-width:540px) { .stat-number { font-size: clamp(22px,6.4vw,36px); } }

/* One visualizer for all products */
.audience-strip { padding: 44px 0; }
.audience-strip .container { flex-direction: column; justify-content: center; text-align: center; gap: 10px; }
.audience-strip h2 { font-size: clamp(28px,3.2vw,42px); font-weight: 700; letter-spacing: -.035em; }
.audience-strip p { font-size: clamp(16px,1.5vw,20px); color: var(--muted); letter-spacing: -.01em; }

/* FAQs: larger, heavier text for readability. */
.faq-section .eyebrow { font-size: 10px; }
.faqs summary { font-size: 17px; font-weight: 600; line-height: 1.45; padding: 24px 0; letter-spacing: -.01em; }
.faqs summary span { font-size: 24px; }
.faqs details p { font-size: 15px; line-height: 1.75; color: #565951; max-width: 560px; }
@media (max-width:540px) { .faqs summary { font-size: 16px; } .faqs details p { font-size: 14px; } }

/* Contact */
.contact-form label { font-size: 11px; }
.required-mark { font-size: 13px; font-weight: 700; color: #d92d20; }
.contact-form .button { width: auto; padding: 12px 34px; font-size: 13px; }

/* Footer */
.footer { align-items: center; gap: 24px; padding: 48px 0 40px; }
.footer-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 12px; color: var(--muted); }
.footer-contact a { font-size: 14px; font-weight: 600; color: var(--ink); }
.footer-contact a:hover { color: var(--orange); }
@media (max-width:540px) { .footer { flex-direction: column; align-items: flex-start; } .footer-contact { align-items: flex-start; } }
.footer > div > p { font-size: 13px; }

/* Solutions: category tabs with a before/after comparison */
.solutions { border-bottom: 1px solid var(--line); }
.solutions-bar { background: #ebe7de; border-bottom: 1px solid var(--line); }
.solutions-bar-inner { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.solutions-title { flex: none; font-size: 15px; font-weight: 600; letter-spacing: -.01em; padding-right: 28px; border-right: 1px solid #cfcbbf; line-height: 34px; }
.solutions-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 14px 0; }
.solutions-tabs::-webkit-scrollbar { display: none; }
.solutions-tabs button { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 14px; padding: 8px 15px; border-radius: 999px; transition: background .2s, color .2s; }
.solutions-tabs button:hover { color: var(--ink); }
.solutions-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px #0000000f; }
.solution-panel { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: 64px; align-items: center; padding-block: 72px; }
.solution-copy h2 { font-size: clamp(34px,3.6vw,52px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }
.solution-sub { margin-top: 22px; font-size: clamp(18px,1.6vw,22px); font-weight: 600; line-height: 1.35; color: #b5653f; letter-spacing: -.01em; }
.solution-text { margin-top: 16px; font-size: 16px; line-height: 1.7; color: #5d6058; max-width: 560px; }
.solution-strong { margin-top: 14px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.solution-copy .button { margin-top: 28px; }
.solution-copy > * { transition: opacity .25s ease, transform .25s ease; }
.solution-panel.switching .solution-copy > * { opacity: 0; transform: translateY(6px); }
.compare { --pos: 50%; position: relative; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: #ddd8cc; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .35s cubic-bezier(.4,0,.2,1); }
.compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare.switching img { opacity: 0; transition-duration: .18s; }
/* A plain fade is fine with "reduce motion" (the global rule turns transitions off), so the tab switch keeps it. */
.compare img { transition: opacity .35s cubic-bezier(.4,0,.2,1) !important; }
.compare.switching img { transition-duration: .18s !important; }
.compare-label { position: absolute; top: 16px; padding: 6px 11px; border-radius: 4px; background: #fffdf2e6; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; pointer-events: none; }
.compare-label-before { left: 16px; }
.compare-label-after { right: 16px; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 44px; margin-left: -22px; display: grid; place-items: center; cursor: ew-resize; touch-action: none; }
.compare-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px #0004; }
.compare-knob { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 3px 12px #0003; }
.compare-knob::before, .compare-knob::after { content: ''; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.compare-knob::before { left: 6px; border-right-color: var(--ink); }
.compare-knob::after { right: 6px; border-left-color: var(--ink); }
.compare-handle:focus-visible { outline: none; }
.compare-handle:focus-visible .compare-knob { outline: 2px solid var(--orange); outline-offset: 3px; }
.compare.empty { cursor: default; display: grid; place-items: center; background: repeating-linear-gradient(135deg,#e7e3d9,#e7e3d9 14px,#ece9e0 14px,#ece9e0 28px); }
.compare.empty img, .compare.empty .compare-label, .compare.empty .compare-handle { display: none; }
.compare-empty { display: grid; gap: 8px; text-align: center; padding: 24px; max-width: 340px; }
.compare-empty[hidden] { display: none; }
.compare-empty strong { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.compare-empty span { font-size: 14px; color: var(--muted); }
@media (max-width:1100px) { .solution-panel { gap: 40px; } }
@media (max-width:800px) {
  .solutions-bar-inner { flex-direction: column; align-items: stretch; gap: 0; padding-top: 16px; }
  .solutions-title { border: 0; padding: 0; line-height: 1.4; }
  .solutions-tabs { padding: 10px 0 12px; margin-inline: -4px; }
  .solution-panel { grid-template-columns: 1fr; gap: 32px; padding-block: 44px; }
  .solution-text, .solution-strong { font-size: 15px; }
}
@media (prefers-reduced-motion:reduce) { .solution-panel.switching .solution-copy > * { opacity: 1; transform: none; } }
.solution-copy h2 { text-wrap: balance; }
/* Centre the title and tabs; auto margins keep the first tab reachable when the strip overflows. */
.solutions-bar-inner { justify-content: center; }
.solutions-tabs { padding: 14px 6px; }
.solutions-tabs > :first-child { margin-left: auto; }
.solutions-tabs > :last-child { margin-right: auto; }
.solutions-tabs button:focus-visible { outline-offset: 1px; }
@media (max-width:800px) { .solutions-title { text-align: center; } }
.solutions-tabs { min-width: 0; }

/* Hero subtitle stays on one line where there is room for it. */
@media (min-width: 1100px) {
  .video-caption p { max-width: 640px; }
  .video-caption p strong { white-space: nowrap; }
}

/* Free-trial section (background image to be added later). */
.contact-grid > div > h2 { color: var(--ink); }
.contact-grid > div > p:not(.eyebrow) { font-size: 17px; line-height: 1.75; color: #3f433c; max-width: 470px; }
@media (max-width: 540px) { .contact-grid > div > p:not(.eyebrow) { font-size: 15px; } }

/* Footer email in regular weight. */
.footer-contact a { font-weight: 400; }
/* Login: a nav link with a person icon, before the Try free button. */
.nav-login{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.nav-login-icon{flex:none}

/* A button that sizes to its label inside the full-width demo panel. */
.demo-controls .button.short { width: auto; padding-inline: 28px; }

/* Try our demos: tabs on a dark contour background, the real visualizer in a browser window. */
.demos{position:relative;overflow:hidden;color:var(--paper);background:#24302a}
.demos::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:
  radial-gradient(circle at 85% 15%,rgba(230,117,72,.22),transparent 45%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23f8f7f3' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M-20 120C80 60 160 180 260 120S440 60 540 130'/%3E%3Cpath d='M-20 160C80 100 160 220 260 160S440 100 540 170'/%3E%3Cpath d='M-20 200C80 140 160 260 260 200S440 140 540 210'/%3E%3Cpath d='M-20 240C80 180 160 300 260 240S440 180 540 250'/%3E%3Cpath d='M-20 280C80 220 160 340 260 280S440 220 540 290'/%3E%3Cpath d='M-20 320C80 260 160 380 260 320S440 260 540 330'/%3E%3Cpath d='M-20 360C80 300 160 420 260 360S440 300 540 370'/%3E%3Cpath d='M-20 400C80 340 160 460 260 400S440 340 540 410'/%3E%3Cpath d='M-20 440C80 380 160 500 260 440S440 380 540 450'/%3E%3C/g%3E%3C/svg%3E") center/520px}
.demos-grid{position:relative;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:64px;align-items:center}
/* Large screenshots must not widen their grid column on small screens. */
.demos-grid>*,.audience-grid>*{min-width:0}
.demos h2{padding-bottom:22px;margin-bottom:18px;border-bottom:1px solid rgba(248,247,243,.25)}
.demos-list{display:flex;flex-direction:column}
.demos-list button{position:relative;border:0;background:none;color:rgba(248,247,243,.72);text-align:left;font-size:19px;padding:11px 0 11px 22px;letter-spacing:-.01em;transition:color .2s,padding .2s}
.demos-list button::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .2s}
.demos-list button:hover{color:var(--paper)}
.demos-list button[aria-selected=true]{color:var(--paper);padding-left:28px}
.demos-list button[aria-selected=true]::before{transform:scale(1)}
.demos-list button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
.window-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#ecebe5;border-bottom:1px solid var(--line)}
.window-bar i{width:10px;height:10px;border-radius:50%;background:#cfcdc4}
.window-bar span{margin-left:12px;font-size:11px;color:var(--muted);background:#fff;border-radius:6px;padding:2px 12px}
.demo-window{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.demo-shot{position:relative;aspect-ratio:16/10;background:#e9e8e3}
.demo-shot img{transition:opacity .25s}
.demo-shot img.is-loading{opacity:.35}
.demo-open{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;display:grid;place-items:center;background:rgba(230,117,72,.82);color:#fff;box-shadow:0 0 0 10px rgba(230,117,72,.18),0 16px 40px rgba(0,0,0,.25);transition:transform .2s,background .2s}
.demo-open:hover{transform:scale(1.06);background:var(--orange)}
.demo-open svg{width:46px;height:46px}
.demo-caption{padding:14px 20px;color:var(--ink);font-size:14px;border-top:1px solid var(--line)}

/* Who it's for: the visualizer on desktop and phone, beside the list of businesses. */
.audience-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center}
.audience h2{margin-bottom:44px}
.device-stack{position:relative;padding:0 40px 34px 0}
.device-browser{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(41,45,39,.16)}
.device-browser img{aspect-ratio:16/10;height:auto}
/* The phone supports the desktop view rather than competing with it. */
.device-phone{position:absolute;right:0;bottom:0;width:20%;aspect-ratio:390/844;border:3px solid var(--ink);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 18px 40px rgba(41,45,39,.24)}
.device-phone img{object-fit:cover;object-position:top}
.audience-list{display:flex;flex-direction:column;gap:30px}
.audience-list article{display:grid;grid-template-columns:44px 1fr;gap:6px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.audience-list article:last-child{border-bottom:0;padding-bottom:0}
.audience-list span{font-size:12px;font-weight:600;letter-spacing:1px;color:var(--orange);padding-top:9px}
.audience-list h3{margin-bottom:8px}
.audience-list p{color:var(--muted)}

@media(max-width:1100px){
  .demos-grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .demos-list{flex-direction:row;flex-wrap:wrap;gap:8px}
  .demos-list button{font-size:14px;padding:8px 14px;border:1px solid rgba(248,247,243,.25);border-radius:20px}
  .demos-list button::before{display:none}
  .demos-list button[aria-selected=true]{padding-left:14px;background:var(--orange);border-color:var(--orange)}
  .audience-grid{grid-template-columns:minmax(0,1fr);gap:48px}
}
@media(max-width:540px){
  .demos-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-24px;padding-inline:24px}
  .demos-list button{flex:none}
  .window-bar span{display:none}
  .demo-open{width:64px;height:64px;margin:-32px 0 0 -32px;box-shadow:0 0 0 6px rgba(230,117,72,.18)}.demo-open svg{width:28px;height:28px}
  .device-stack{padding:0 22px 24px 0}
  .device-phone{width:22%;border-width:2px;border-radius:12px}
  .audience-list{gap:22px}.audience-list article{grid-template-columns:34px 1fr;padding-bottom:20px}
}
