/* Vizbl for Rugs — two-column shell: scrolling story (left) + sticky lead rail (right). Shares its base with /industries/vending. */
:root{
  --bg:#FAF9F7; --surface:#FFFFFF; --stone:#F1EFEB; --ink:#1E1D1B; --ink-2:#2A2826;
  --text-muted:#5A5650; --text-subtle:#6A655E; --line:#ECE9E4; --line-strong:#E6E2DC;
  --accent:#E9601F; --accent-text:#A8450F; --accent-on-dark:#FF8C52; --on-dark-muted:#BDB7B0;
  --success:#1F9D55; --ok:#1F9D55; --bad:#C23B2A;
  --font-display:'Schibsted Grotesk','Inter',system-ui,-apple-system,sans-serif;
  --font-text:'Inter',system-ui,-apple-system,sans-serif;
  --r-pill:999px; --r-card:24px; --r-card-img:18px; --r-hero:28px; --r-offer:32px; --r-dark:36px;
  --shadow-float:0 30px 60px rgba(30,29,27,.16);
  --shadow-rail:0 24px 64px rgba(30,29,27,.16),0 2px 8px rgba(30,29,27,.05);
  --gutter:64px; --section-y:96px; --top-h:72px;
  --rail-w:clamp(400px,30vw,496px); --page-max:1760px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1); /* quick start, soft landing: for the panel and the blur */
  color-scheme:light;
}
@media (max-width:1440px){:root{--gutter:40px}}
@media (max-width:900px){:root{--gutter:20px;--section-y:64px}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--font-text);-webkit-font-smoothing:antialiased}
img,video,iframe{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0;text-wrap:balance}
/* cqi = width of the nearest container (main column / rail); falls back to viewport on plain pages */
h1{font-size:clamp(40px,5.2cqi,58px);line-height:1.02;letter-spacing:-.02em}
h2{font-size:clamp(30px,3.6cqi,40px);line-height:1.08;letter-spacing:-.018em}
h3{font-size:24px;line-height:1.2;letter-spacing:-.015em}
p{margin:0}
.wrap{width:100%;max-width:var(--page-max);margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:var(--section-y)}
.muted{color:var(--text-muted)}
.eyebrow{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);font:600 13px/1 var(--font-text);color:var(--ink)}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--accent)}
.viewer-head .eyebrow{background:var(--ink-2);border-color:rgba(255,255,255,.16);color:#fff}
.eyebrow-ok{color:var(--ok)}
.eyebrow-ok::before{border-color:var(--ok)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);font:600 13px/1 var(--font-text);color:var(--ink)}
.badge::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--accent)}
.sec-head{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:760px;margin-bottom:44px}
.sec-head p{font-size:19px;color:var(--text-muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 26px;border-radius:var(--r-pill);border:0;cursor:pointer;font:700 16px/1 var(--font-text);text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease),background .15s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#F27033}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-sm{height:44px;padding:0 20px;font-size:15px}
.btn:disabled{opacity:.6;cursor:progress}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* inputs */
input[type=email],input[type=text],input[type=tel],input[type=password]{width:100%;height:54px;padding:0 18px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);font:400 16px var(--font-text);color:var(--ink)}
input::placeholder{color:#9A948C}
.err{color:var(--bad);font-size:14px}

/* header */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--top-h)}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:32px;width:auto}
.logo .logo-d{display:none}

/* ============ shell: main column + lead rail ============ */
.page{max-width:var(--page-max);margin:0 auto;padding-inline:var(--gutter)}
.page .wrap{max-width:none;padding-inline:0}
.col{min-width:0;container:main / inline-size}
.rail{min-width:0}
.panel{container:rail / inline-size} /* the panel, not the rail: at the end of the page it grows wider than its column and the content must follow */
@media (min-width:1201px){
  .page{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);gap:clamp(40px,4.5vw,80px);align-items:start}
  /* the footer is a full-width row of the grid and the rail spans both rows, so the sticky panel
     stays in view down to the very end of the page instead of scrolling off with the main column */
  main.col{grid-column:1;grid-row:1}
  .page>footer{grid-column:1;grid-row:2}
  .rail{position:sticky;top:20px;grid-column:2;grid-row:1/3}
  /* fits the screen from where it starts: its top offset (level with the clip) plus 20px below */
  .panel{max-height:calc(100vh - var(--rail-top,20px) - 20px)}
}
@media (max-width:1200px){
  .rail{padding-block:0 var(--section-y)} /* form returns below the content */
  /* no inner scrolling here: an overflow:auto box with overscroll-behavior:contain swallows the finger on iOS */
  .rail .panel-in{overflow:visible;overscroll-behavior:auto;max-height:none}
}

/* lead panel */
.panel{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-rail)}
.panel-in{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:38px 40px 42px;border-radius:inherit;display:flex;flex-direction:column;gap:26px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.panel-head{display:flex;flex-direction:column;gap:10px}
.panel-badge{align-self:flex-start;gap:8px;margin-left:-4px;margin-bottom:5px;color:#0B7A3E;border-color:rgba(16,220,110,.35);
  background:linear-gradient(110deg,#E8FFE9 0%,#B9FBC6 22%,#DDFFE0 45%,#A8F5D0 68%,#CFFFDA 85%,#E8FFE9 100%);
  background-size:260% 100%;animation:badge-shimmer 5s linear infinite;
  box-shadow:0 0 0 1px rgba(16,220,110,.14),0 2px 14px rgba(16,220,110,.28)}
@keyframes badge-shimmer{0%{background-position:0% 0}100%{background-position:-260% 0}}
.panel-badge::before{display:none}
.panel-badge i{font-style:normal;font-size:8px;color:rgba(11,122,62,.5);line-height:1}
.panel-head h2{font-size:31px;line-height:1.12;letter-spacing:-.02em}
.panel-head .muted{font-size:15.5px}

/* ============ hero ============ */
.hero{padding-block:40px 56px}
.hero-logo{margin-bottom:6px}
.hero-logo img{height:45px;width:auto}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4cqi,56px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.hero-sub{font-size:20px;color:var(--text-muted);max-width:34em}
.two-pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.two-pains li{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.two-pains b{font-size:16px;line-height:1.3}
.two-pains span{font-size:14.5px;color:var(--text-muted)}
.hero-art{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:flex-end;padding:24px 48px 24px 0}
/* blurred rectangle behind the video: video-sized, flush with the column's right edge, shifted down */
.hero-art::before{content:"";position:absolute;right:0;top:calc(50% + 26px);transform:translateY(-50%);
  width:clamp(240px,32cqi,380px);aspect-ratio:720/1554;background:#D8D3CB;border-radius:36px;filter:blur(30px)}
.hero-video{position:relative;margin:0;width:100%;max-width:clamp(240px,32cqi,380px);aspect-ratio:720/1554;border-radius:var(--r-hero);overflow:hidden;background:#111;box-shadow:var(--shadow-float)}
.hero-video video{width:100%;height:100%;object-fit:cover}
.sound{position:absolute;right:14px;top:14px;font:600 13px/1 var(--font-text);color:#fff;background:rgba(20,19,18,.7);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);padding:9px 13px;cursor:pointer}
@container main (max-width:640px){
  .hero{padding-block:28px 44px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-video{max-width:320px}
  .hero-art{justify-content:center;padding:24px 0}
  .hero-art::before{right:auto;left:50%;width:320px;transform:translate(calc(-50% + 22px),-50%)}
}
@container main (max-width:560px){
  .two-pains{grid-template-columns:1fr}
  .hero-sub{font-size:18px}
}

/* ============ quick email card ============ */
.qsec{padding-block:0 72px} /* same gap below the card as the recordings leave above it */
@container main (max-width:920px){.qsec{padding-bottom:56px}}
.quick-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 48px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 36px;box-shadow:0 14px 40px rgba(30,29,27,.07)}
.quick{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:640px}

.quick label{font-size:14px;color:var(--text-muted)}
.quick-row{display:flex;gap:10px}
.quick-row input{flex:1}
.assure{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--text-muted)}
.assure span::before{content:"✓";color:var(--success);font-weight:700;margin-right:6px}
.quick-card .assure{flex-direction:column;flex-wrap:nowrap;gap:10px;font-size:15px;border-left:1px solid var(--line);padding-left:40px;align-self:center}
@container main (max-width:760px){
  .quick-card{grid-template-columns:1fr;padding:22px}
  .quick-card .assure{flex-direction:row;flex-wrap:wrap;gap:6px 18px;border-left:0;padding-left:0;font-size:14px}
}
@container main (max-width:560px){
  .quick-row{flex-direction:column}
  .quick-row input{flex:none;width:100%} /* flex:1 in a column collapsed the field's height */
  .quick-row .btn{width:100%}
}

/* ============ live viewer ============ */
.viewer-card{background:var(--ink);color:#fff;border-radius:var(--r-dark);padding:clamp(24px,3.4cqi,44px)}
.viewer-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:28px}
.viewer-head h2{color:#fff}
.viewer-head p{color:var(--on-dark-muted);font-size:18px}
.viewer-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px}
.viewer-grid>*{min-width:0}
.models{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.models button{width:100%;text-align:left;background:var(--ink-2);color:#fff;border:1px solid transparent;border-radius:16px;padding:14px 16px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px}
.models button small{font-size:12.5px;color:var(--on-dark-muted)}
.models button b{font-size:16px}
.models button span{font-size:13px;color:var(--on-dark-muted)}
.models button[aria-pressed=true]{background:linear-gradient(160deg,#FFFFFF 0%,#F3F0EA 100%);color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.models button[aria-pressed=true] small,.models button[aria-pressed=true] span{color:var(--text-muted)}
.stage{position:relative;background:radial-gradient(50% 50% at 50% 50%,#5C5855 0%,#383733 100%);border-radius:24px;overflow:hidden;min-height:clamp(400px,52cqi,560px)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stage-note{margin-top:14px;font-size:14px;color:var(--on-dark-muted)}
@container main (max-width:860px){
  .viewer-card{border-radius:28px}
  .viewer-head{grid-template-columns:1fr;gap:12px}
  .viewer-grid{grid-template-columns:1fr}
  .models{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .models li{flex:0 0 200px;scroll-snap-align:start}
  .stage{min-height:420px}
}

/* ============ two steps ============ */
.shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.shots li{position:relative;display:flex;flex-direction:column;gap:16px}
.shots img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-card-img);background:var(--stone)}
.shots li>div{display:flex;flex-direction:column;gap:4px}
.shots .n{position:absolute;top:14px;right:14px;z-index:1;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font:700 15px/36px var(--font-text);text-align:center;box-shadow:0 4px 14px rgba(30,29,27,.25)}
.shots b{font:600 19px/1.3 var(--font-display);letter-spacing:-.015em}
.shots p{font-size:16px}
@container main (max-width:680px){.shots{grid-template-columns:1fr}}

/* iPad AR recordings */
.ipad{margin:0 0 72px;display:flex;flex-direction:column;gap:32px}
.ipad-head{max-width:720px}
.ipad-head h3{margin:14px 0 12px}
.ipad-head p{font-size:17px;margin:0}
.ipad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ipad-grid>*{min-width:0}
.ipad figure{margin:0;display:flex;flex-direction:column;gap:12px}
.ipad video{width:100%;height:auto;aspect-ratio:720/1030;object-fit:cover;border-radius:var(--r-card-img);background:var(--ink);display:block}
.ipad figcaption{font-size:16px;color:var(--text-muted)}
.ipad figcaption b{color:var(--ink)}
@container main (max-width:920px){
  .ipad{gap:24px;margin-bottom:56px}
}
@container main (max-width:700px){
  .ipad-grid{grid-template-columns:1fr}
  .ipad figure{max-width:440px}
}
@container main (max-width:560px){
  .ipad-grid{gap:18px}
  .ipad figcaption{font-size:14px}
}

/* ============ proof ============ */
.nums{background:var(--stone);border-radius:var(--r-offer);padding:clamp(24px,3cqi,44px);display:flex;flex-direction:column;gap:28px}
.q{margin:0;font:600 clamp(28px,3.4cqi,38px)/1.12 var(--font-display);letter-spacing:-.02em}
.q cite{display:block;margin-top:14px;font:500 15px/1 var(--font-text);letter-spacing:0;font-style:normal;color:var(--text-muted)}
.num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.num-grid>*{min-width:0}
.num{background:var(--surface);border-radius:18px;padding:20px}
.num b{display:block;font:600 36px/1 var(--font-display);letter-spacing:-.02em}
.num span{display:block;margin-top:8px;font-size:15px;color:var(--text-muted)}
@container main (max-width:800px){.num-grid{grid-template-columns:1fr 1fr}}
@container main (max-width:560px){.num b{font-size:30px}.num{padding:16px}}

/* ============ objections ============ */
.objs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.objs li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px;display:flex;flex-direction:column;gap:8px}
.objs b{font:600 19px/1.3 var(--font-display);letter-spacing:-.015em}
.objs span{color:var(--text-muted)}
.objs span::before{content:"→ ";color:var(--accent);font-weight:700}
@container main (max-width:680px){.objs{grid-template-columns:1fr}}


/* ============ lead form (inside the panel) ============ */
.form{display:flex;flex-direction:column;gap:18px;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:12px;border:0;margin:0;padding:0;min-width:0}
.field>label,.field legend{font-weight:600;font-size:15px;padding:0}
fieldset.field{display:block}
fieldset.field legend{display:block;margin-bottom:14px}
fieldset.field .err{margin-top:10px}
.hint{font-weight:400;color:var(--text-subtle);font-size:13px}
.field.invalid input{border-color:var(--bad)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* role tabs */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--stone);border-radius:16px;padding:4px}
.tab{position:relative;min-width:0}
.tab input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tab span{display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;justify-content:center;height:100%;padding:10px 8px;border-radius:12px;cursor:pointer}
.tab b{font-size:14.5px;line-height:1.2;letter-spacing:-.01em}
.tab small{font-size:12px;line-height:1.25;color:var(--text-subtle)}
.tab input:checked+span{background:var(--surface);box-shadow:0 1px 3px rgba(30,29,27,.14),0 0 0 1px var(--line-strong)}
.tab input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:38px;padding:7px 14px;border:0;border-radius:var(--r-pill);font-weight:400;font-size:13.5px;color:var(--text-muted);background:#F6F4F0;cursor:pointer;transition:background .15s var(--ease)}
.chip span:hover{background:var(--stone)}
.chip input:checked+span{background:var(--ink);color:#fff;font-weight:500}
.chip input:checked+span:hover{background:var(--ink-2)}
.chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@container rail (max-width:520px){.two{grid-template-columns:1fr}}
.form-actions{display:flex;gap:10px}
.btn-mail{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);padding:0 16px;gap:10px;flex:none}
.btn-mail:hover{background:var(--bg)}
.mail-label{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.mail-label b{font:600 13px/1 var(--font-text)}
.mail-label small{font:400 11.5px/1 var(--font-text);color:var(--text-subtle)}
.form .btn-primary{width:100%}
.form-actions .btn-primary{flex:1;width:auto}
.fine{font-size:12.5px;color:var(--text-subtle);line-height:1.5}
.fine a{color:var(--text-subtle)}
.done{display:flex;flex-direction:column;gap:10px}
.done .big{font:600 22px/1.25 var(--font-display);letter-spacing:-.015em}
.opt{font-weight:400;color:var(--text-subtle)}

/* ============ footer ============ */
footer{padding-block:32px 40px;font-size:14px;color:var(--text-muted)}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:18px 32px;align-items:center;border-top:1px solid var(--line);padding-top:28px}
.foot-brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.foot-logo img{display:block;height:26px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:500;text-decoration:none}
.foot-links a:hover{color:var(--accent-text)}
.legal{display:flex;flex-wrap:wrap;gap:6px 18px}
.legal a{color:var(--text-muted)}
footer .legal{grid-column:1/-1;font-size:13px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* ============ sticky mobile CTA ============ */
.mcta{display:none}
@media (max-width:700px){
  /* the help chat bubble sits bottom-right, 60×60 plus its offsets: the bar leaves that corner free */
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px calc(60px + 36px) calc(10px + env(safe-area-inset-bottom,0px)) 16px;background:var(--surface);border-top:1px solid var(--line);transition:transform .25s var(--ease)}
  .mcta.hide{transform:translateY(110%)}
  .mcta .btn{flex:1}
  body{padding-bottom:0}
}

/* ============ thank-you page reuse ============ */
.ty{max-width:720px}
.next{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.next li{display:grid;grid-template-columns:30px 1fr;gap:12px}
.next .n{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--ink);font:700 14px/30px var(--font-text);text-align:center}
.cal{margin-top:28px;border-radius:24px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.cal .calendly-inline-widget{min-width:320px;height:700px}
@media (max-width:640px){.cal .calendly-inline-widget{height:1000px}}

/* ============ booking modal (the thank-you page, in place) ============ */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(30,29,27,.58);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-card{position:relative;width:min(1040px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-radius:28px;box-shadow:var(--shadow-float);animation:modal-in .28s var(--ease-out)}
.modal-body{display:flex;flex-direction:column;gap:14px;padding:44px 48px 40px}
.modal-body h2{margin-top:4px}
.modal-sub{font-size:18px;color:var(--text-muted);max-width:60ch}
.modal-alt{font-size:15px}
.modal .cal{margin-top:14px}
.modal .next{margin-top:12px}
.modal-x{position:sticky;top:14px;float:right;margin:14px 14px -58px 0;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.modal-x:hover{background:var(--stone)}
.modal-x:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
body.modal-open{overflow:hidden}
@keyframes modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .modal{padding:0;align-items:flex-end}
  .modal-card{max-height:100dvh;border-radius:24px 24px 0 0}
  .modal-body{padding:28px 20px 32px}
  .modal-sub{font-size:16px}
}
.done .btn{align-self:flex-start;margin-top:6px}

/* emoji in the top-right corner of each number island */
.num{position:relative}
.num-emoji{position:absolute;top:20px;right:20px;font-size:24px;line-height:1;font-style:normal}
/* keep the headline clear of the emoji in the top-right corner */
.num b{padding-right:36px}
@container main (max-width:560px){.num-emoji{top:16px;right:16px;font-size:20px}}

/* label kept for screen readers, not drawn */
.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}

/* ============ end of page: the rail slides to the centre, the page behind it blurs ============ */
.rail-dim{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;background:rgba(30,29,27,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .4s var(--ease-out)}
body.rail-focus .rail-dim{opacity:1;pointer-events:auto;cursor:pointer} /* a click outside the panel closes it, like the button */
@media (min-width:1201px){
  .rail{z-index:25}
  .panel{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),width .45s var(--ease-out);will-change:transform}
  body.rail-focus .panel{width:var(--rail-focus-w,auto);transform:translate(var(--rail-shift,0px),var(--rail-shift-y,0px));box-shadow:0 40px 100px rgba(30,29,27,.30),0 8px 24px rgba(30,29,27,.10)}
}
@media (prefers-reduced-motion:reduce){.panel,.rail-dim{transition:none}}

/* short screens: when the panel has to scroll, the badge goes */
@media (min-width:1201px){
  .panel.compact .panel-badge{display:none}
  .panel.compact .panel-head{gap:6px}
  /* still short: the intro paragraph and the step-1 footnote go too (the consent text on step 2 stays) */
  .panel.compact .panel-head .muted,.panel.compact #step1 .fine,.panel.compact #f-site .hint{display:none}
}

/* ============ phones: the panel runs edge to edge, controls get tighter ============ */
@media (max-width:700px){
  .rail{margin-inline:calc(-1 * var(--gutter));padding-bottom:0}
  .panel{border-radius:0;border-left:0;border-right:0;box-shadow:none}
  .panel-in{padding:28px var(--gutter) 32px;gap:20px}
  .panel-head h2{font-size:27px}
  .panel-head .muted{font-size:15px}
  .panel .form{gap:14px}
  .panel input[type=email],.panel input[type=text],.panel input[type=tel],.panel input[type=password]{height:48px;padding:0 14px;border-radius:12px;font-size:16px}
  .panel .field>label,.panel .field legend{font-size:14px}
  .panel fieldset.field legend{margin-bottom:10px}
  .panel .chip span{min-height:34px;padding:6px 12px;font-size:13px}
  .panel .tab span{padding:8px 6px}
  .panel .tab b{font-size:13.5px}
  .panel .tab small{font-size:11.5px}
  .panel .btn{height:50px}
  .panel .btn-mail{padding:0 14px}
  .panel .btn-mail .mail-label small{display:none}
}

/* close button for the centred panel: hidden until the panel is in focus, then fades in with it */
.rail-x{display:none;position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .3s var(--ease-out),background .15s var(--ease)}
.rail-x:hover{background:var(--stone)}
.rail-x:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (min-width:1201px){
  .panel{position:relative}
  body.rail-focus .rail-x{display:flex;opacity:1}
}

/* short viewports (13" laptops): the clip is not centred against the copy but starts level with the
   logo, so the panel, which follows the clip's top edge, does not leave a hole above itself */
@media (min-width:1201px) and (max-height:820px){
  .hero-grid{align-items:start}
  .hero-art{padding-top:0;align-items:flex-start}
  .hero-art::before{top:26px;transform:none}
}

/* phones: the dark viewer card and the case-study panel run edge to edge, as bands, not boxes */
@media (max-width:700px){
  .viewer-card,.nums{margin-inline:calc(-1 * var(--gutter));border-radius:0;padding-inline:var(--gutter)}
  .viewer-card{padding-block:40px}
  .nums{padding-block:36px}
}

/* short viewports on the wide layout (13" laptops): a tighter panel so the whole form fits the screen */
@media (min-width:1201px) and (max-height:820px){
  .panel-in{padding:28px 32px 30px;gap:18px}
  .panel-head{gap:6px}
  .panel-head h2{font-size:24px;line-height:1.14}
  .panel-head .muted{font-size:14px;line-height:1.45}
  .panel .form{gap:14px}
  .panel .field>label,.panel .field legend{font-size:14px}
  .panel fieldset.field legend{margin-bottom:8px}
  .panel .chips{gap:6px}
  .panel .chip span{min-height:32px;padding:5px 11px;font-size:13px}
  .panel .tab span{padding:7px 6px}
  .panel .tab b{font-size:13.5px}
  .panel .tab small{font-size:11.5px}
  .panel input[type=email],.panel input[type=text],.panel input[type=tel],.panel input[type=password]{height:46px}
  .panel .btn{height:48px}
  .panel .fine{font-size:12px}
}

/* success state: the head gives way, the shimmering badge and the heading move into the done block */
.panel.is-done .panel-head{display:none}
.done{gap:12px}
.done .panel-badge{margin-bottom:4px}
.panel.compact .done .panel-badge{display:inline-flex} /* compact mode hides the head's badge, not this one */
.done h2{font-size:31px;line-height:1.12;letter-spacing:-.02em}
.done .muted{font-size:15.5px}
.done .btn{align-self:stretch;margin-top:8px}
@media (min-width:1201px) and (max-height:820px){.done h2{font-size:24px}.done .muted{font-size:14px}}

/* ============ rugs: the try-on gallery inside the dark card ============ */
.rugs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.rugs button{width:100%;text-align:left;background:var(--ink-2);color:#fff;border:1px solid transparent;border-radius:18px;padding:10px 10px 14px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:8px;transition:transform .2s var(--ease),background .2s var(--ease)}
.rugs button:hover{background:#34322F;transform:translateY(-2px)}
.rugs button img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;border-radius:12px;background:#fff}
.rugs button small{font-size:12px;color:var(--on-dark-muted);margin-top:4px}
.rugs button b{font-size:14.5px;line-height:1.25}
.rugs button span{font-size:13px;color:var(--on-dark-muted)}
.rugs .go{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font:600 13px/1 var(--font-text);color:var(--accent-on-dark)}
.rugs .go::after{content:"\2192"}
.gallery-foot{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:22px;font-size:14px;color:var(--on-dark-muted)}
.gallery-foot span::before{content:"\2713";color:#5CE28F;font-weight:700;margin-right:6px}
@container main (max-width:820px){.rugs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container main (max-width:600px){
  .rugs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;gap:10px}
  .rugs li{flex:0 0 170px;scroll-snap-align:start}
}

/* ============ video stubs: dark frames where the clips will go ============ */
.stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;border-radius:var(--r-card-img);background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 10px,transparent 10px 24px),linear-gradient(160deg,#2E2C29 0%,#1E1D1B 100%);color:#fff;text-align:center;padding:24px;overflow:hidden}
.stub::before{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);transform:translate(-50%,calc(-50% - 40px))}
.stub .play{position:absolute;left:50%;top:50%;width:0;height:0;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;transform:translate(calc(-50% + 3px),calc(-50% - 40px))}
.stub b{font:600 13px/1.3 var(--font-text);letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark-muted);margin-top:52px}
.stub span{font-size:14px;line-height:1.45;color:var(--on-dark-muted);max-width:26ch}
.stub.tall{aspect-ratio:9/16}
/* two recordings, the same height: the laptop screencast (16:9) beside the phone clip (720×1468, the
   iPhone recording minus its status bar). Column ratio = (16/9) / (720/1468). */
.ipad-grid{grid-template-columns:3.625fr 1fr;align-items:start}
.ipad figure.wide video{aspect-ratio:16/9}
.ipad figure.tall .stub,.ipad figure.tall video{aspect-ratio:720/1468}
.ipad .stub span{max-width:34ch}
.ipad figure.tall .stub span{max-width:22ch;font-size:13px}
@container main (max-width:700px){
  .ipad-grid{grid-template-columns:1fr}
  .ipad figure.wide{max-width:none}
  .ipad figure.tall{max-width:320px}
}

/* ============ FAQ ============ */
.faq{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:860px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0 24px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:600 18px/1.3 var(--font-display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);font:500 18px/26px var(--font-text);text-align:center;color:var(--text-muted);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;color:var(--text-muted);max-width:68ch}
.faq .a p+p{margin-top:10px}
.faq .a ol{margin:10px 0 0;padding-left:20px}
.faq .a li+li{margin-top:4px}

/* launch numbers: smaller figures than the vending case-study block */
.nums h2{font-size:clamp(26px,3.2cqi,36px)}
.nums .num b{font-size:22px}
.nums .num span{font-size:14.5px}
@container main (max-width:560px){.nums .num b{font-size:20px}}
.nums .lead{font-size:18px;color:var(--text-muted);max-width:60ch}

/* ============ launch block: real rugs from the demo store instead of emoji ============ */
.nums.launch{position:relative;overflow:hidden;background-color:var(--stone);
  background-image:repeating-linear-gradient(90deg,rgba(30,29,27,.028) 0 1px,transparent 1px 5px),
                   repeating-linear-gradient(0deg,rgba(30,29,27,.022) 0 1px,transparent 1px 5px)}
.nums.launch>*{position:relative;z-index:1}
.nums.launch::after{content:"";position:absolute;z-index:0;right:-80px;top:-80px;width:250px;height:250px;
  background:url(/rugs/assets/img/rug-round.jpg) center/contain no-repeat;mix-blend-mode:multiply;pointer-events:none}
.num.lc{display:flex;flex-direction:column;padding:10px 10px 20px;box-shadow:0 1px 2px rgba(30,29,27,.04)}
.num.lc b,.num.lc>span{padding-inline:10px}
.lc-vis{position:relative;height:150px;margin-bottom:18px;border-radius:12px;background:#EDE8E0;overflow:hidden}
.lc-vis img{display:block;mix-blend-mode:multiply}
/* No 3D: one top-down photo and its two dimensions, like a spec sheet */
.lc-spec img{position:absolute;left:50%;top:58%;height:96px;width:auto;transform:translate(-50%,-50%)}
.lc-dim{position:absolute;font:500 11px/1 var(--font-text);color:var(--text-subtle);white-space:nowrap;text-align:center}
.lc-dim-w{top:14px;left:50%;width:72px;margin-left:-36px;padding-bottom:5px;border-bottom:1px solid #A39C91}
.lc-dim-h{top:58%;left:calc(50% + 52px);width:96px;padding-bottom:5px;border-bottom:1px solid #A39C91;transform:translate(-50%,-50%) rotate(90deg)}
/* ~1 day: the catalog as a contact sheet */
.lc-cat{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:6px;padding:8px}
.lc-cat i{display:grid;place-items:center;background:#F7F4EF;border-radius:8px;overflow:hidden;font-style:normal}
.lc-cat img{width:78%;height:78%;object-fit:contain}
.lc-cat .more{font:600 13px/1 var(--font-display);color:var(--ink);letter-spacing:-.01em}
/* 30 min: the two lines it takes, and the button they add */
.lc-code{display:flex;flex-direction:column;justify-content:space-between;padding:16px;background:var(--ink)}
.lc-code code{font:11.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:#E8E2D8;white-space:pre}
.lc-code em{font-style:normal;color:var(--accent-on-dark)}
.lc-code u{text-decoration:none;color:var(--on-dark-muted)}
.lc-code s{text-decoration:none;color:#F3EDE4}
.lc-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);background:#fff;color:var(--ink);font:600 12.5px/1 var(--font-text)}
.lc-btn i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* Any shape: four real cut-outs side by side */
.lc-shapes{display:flex;align-items:center;justify-content:center;gap:2px;padding:0 6px}
.lc-shapes img{flex:1;min-width:0;height:96px;object-fit:contain}
@container main (max-width:900px){.nums.launch::after{display:none}}
@container main (max-width:560px){.lc-vis{height:132px}.lc-shapes img{height:80px}}