@font-face{font-family:Inter;src:url('assets/Inter-Variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{font-family:Manrope,Arial,sans-serif;color:#24231f;background:#f8f6f0;font-synthesis:none;scroll-behavior:smooth;--ink:#24231f;--muted:#686963;--line:#e5e2d9;--accent:#a33526;--accent-dark:#792315;--paper:#fff;--warm:#fff1e8}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}img{max-width:100%}[hidden]{display:none!important}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e18c63;outline-offset:3px}
.demo-strip{text-align:center;background:#24231f;color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;padding:9px 16px}.topbar{max-width:1440px;margin:auto;padding:18px clamp(22px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px}.wordmark{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.055em;text-decoration:none}.wordmark b{color:var(--accent)}.top-actions{display:flex;align-items:center;gap:18px}.eyebrow,.overline{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.eyebrow{color:var(--muted)}#lang{border:1px solid #d8d5cb;background:#fff;color:var(--ink);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:800;min-width:42px}
main{max-width:1440px;margin:auto;padding:0 clamp(12px,2vw,28px)}.hero{min-height:340px;background:#e8c8b3;display:grid;grid-template-columns:1fr .9fr;overflow:hidden;border-radius:14px}.hero-copy{padding:clamp(32px,5vw,74px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;z-index:1}.hero .overline{color:#792315;margin:0 0 18px}.hero h1{font-size:clamp(39px,5vw,69px);line-height:1.04;letter-spacing:-.068em;margin:0;max-width:700px}.hero p:not(.overline){font-size:15px;line-height:1.65;max-width:480px;margin:22px 0 24px}.hero a{background:var(--accent);color:#fff;text-decoration:none;border-radius:8px;font-size:13px;font-weight:800;padding:13px 17px}.hero a:hover,.primary-button:hover{background:var(--accent-dark)}.hero>img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:65% center}
.state-bar{margin:22px 0 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.state-bar strong{font-size:13px}.state-bar small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.state-buttons{display:flex;flex-wrap:wrap;gap:7px}.state-button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 13px;font-size:11px;font-weight:800}.state-button.active{background:#24231f;color:#fff;border-color:#24231f}
.order-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.78fr);gap:34px;padding:clamp(35px,5vw,70px) clamp(8px,3vw,44px) 76px;align-items:start}.section-intro .overline,.summary .overline{color:var(--accent);margin:0 0 8px}.section-intro h2,.summary h2{font-size:clamp(27px,3vw,40px);letter-spacing:-.055em;margin:0}.section-intro>p:last-child{color:var(--muted);font-size:13px;margin:10px 0 22px}.product{display:grid;grid-template-columns:185px 1fr;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.product-image{min-height:205px;background:#ebd3c3}.product-image img{height:100%;width:100%;object-fit:cover;object-position:78% center}.product-copy{padding:20px 23px}.product-top{display:flex;justify-content:space-between;align-items:start;gap:12px}.product-top strong{font-size:18px;white-space:nowrap}.pill{font-size:10px;font-weight:800;color:#8d371e;background:#f9e9d6;padding:5px 8px;border-radius:999px}.product h3{font-size:21px;letter-spacing:-.04em;margin:13px 0 7px}.product-copy>p{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 17px}.quantity{border-top:1px solid var(--line);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:800}.stepper{display:flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:8px;padding:3px}.stepper button{border:0;background:#f6f4ee;color:var(--ink);border-radius:5px;width:30px;height:30px;font-size:19px;line-height:1}.stepper button:hover{background:#ede7dc}.stepper output{min-width:13px;text-align:center}.inline-empty{border:1px dashed #d7cbbb;border-radius:8px;margin-top:15px;padding:15px 18px;color:#775c4e;background:#fffaf5;font-size:12px}
.form-heading{margin:42px 0 20px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.fields label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:800}.fields label.wide{grid-column:1/-1}.fields input,.fields select{width:100%;border:1px solid #d5d4cd;background:#fff;color:var(--ink);border-radius:8px;padding:12px 13px;font-size:13px;min-height:45px}.fields input[aria-invalid=true]{border-color:#ba3b2e;background:#fff9f8}.field-error{min-height:16px;font-size:11px;color:#a12d22;font-weight:700}.form-note{font-size:11px;line-height:1.6;color:var(--muted);margin:17px 0}.primary-button{border:0;background:var(--accent);color:#fff;padding:13px 18px;border-radius:8px;font-size:12px;font-weight:800}.form-status{margin-top:13px;padding:13px 15px;background:#edf5eb;color:#28532b;border-radius:8px;font-size:12px;line-height:1.5}.form-status.error{background:#fff0ed;color:#8f281e}
.summary{position:sticky;top:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:25px}.summary-head{padding-bottom:20px;border-bottom:1px solid var(--line)}.summary h2{font-size:30px}.summary dl{margin:0}.summary dl>div{display:flex;justify-content:space-between;gap:14px;padding:13px 0;font-size:12px}.summary dt{color:var(--muted)}.summary dd{margin:0;font-weight:800}.summary .total{border-top:1px solid var(--line);margin-top:3px;padding-top:19px;font-size:17px}.summary .total dt{color:var(--ink);font-weight:800}.summary-note{font-size:11px;line-height:1.6;color:var(--muted);margin:2px 0 24px}.status-card{border-radius:9px;background:#f7f5ee;display:flex;align-items:start;gap:10px;padding:14px}.status-dot{height:9px;width:9px;flex:none;background:#c3c1b8;border-radius:50%;margin-top:4px}.status-card strong{font-size:12px}.status-card p{margin:3px 0 0;color:#696b64;font-size:11px;line-height:1.4}.timeline{counter-reset:item;list-style:none;padding:6px 0 0 14px;margin:14px 0 20px;border-left:1px solid #d7d5cb}.timeline li{position:relative;padding:0 0 15px 14px;font-size:11px;color:#85857f}.timeline li:before{content:'';position:absolute;left:-19px;top:3px;height:8px;width:8px;border-radius:50%;background:#d7d5cb}.timeline li:first-child{color:#393a34;font-weight:800}.timeline li:first-child:before{background:var(--accent)}.operator{border-top:1px solid var(--line);padding-top:15px;font-size:11px}.operator summary{cursor:pointer;font-weight:800;color:#484943}.operator p{line-height:1.6;color:var(--muted);margin:9px 0 0}footer{max-width:1440px;margin:auto;border-top:1px solid var(--line);padding:24px clamp(24px,5vw,70px) 35px;display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted)}footer a{color:var(--accent);font-weight:800;text-decoration:none}
@media(max-width:900px){.order-layout{grid-template-columns:1fr}.summary{position:static;max-width:none}.hero{grid-template-columns:1fr .72fr}.hero h1{font-size:clamp(34px,5vw,54px)}}
@media(max-width:650px){.topbar{padding:16px 20px}.eyebrow{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:32px 26px}.hero>img{min-height:200px;max-height:230px}.state-bar{align-items:start;flex-direction:column}.order-layout{padding:35px 8px 55px;gap:22px}.product{grid-template-columns:110px 1fr}.product-image{min-height:180px}.product-copy{padding:16px}.product h3{font-size:18px}.product-top strong{font-size:15px}.fields{grid-template-columns:1fr;gap:9px}.fields label.wide{grid-column:auto}.summary{padding:20px}footer{flex-direction:column}}
@media(max-width:400px){.product{grid-template-columns:1fr}.product-image{height:160px;min-height:0}.product-image img{object-position:center 50%}.state-button{padding:8px 10px}}
.timeline[data-stage=assigned] li:nth-child(-n+2){color:#393a34;font-weight:800}.timeline[data-stage=assigned] li:nth-child(2):before{background:var(--accent)}

/* Red Hub Pro brandbook applied to the customer journey demo. */
:root{font-family:Inter,'Segoe UI',sans-serif;color:#232836;background:#F6F7FA;--ink:#232836;--muted:#616B7D;--line:#E0E3EB;--primary:#B52442;--primary-hover:#A01F3A;--primary-pressed:#861A30;--focus:#3067BE;--selected:#FBE8ED;--input-border:#7B879B}
body{font:400 14px/1.5 Inter,'Segoe UI',sans-serif;background:#F6F7FA;color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.demo-strip{background:#232836;font-size:12px;font-weight:500;letter-spacing:0;padding:8px 16px}.topbar{min-height:64px;padding:12px clamp(16px,4vw,48px)}.wordmark{gap:10px;font-size:18px;font-weight:600;letter-spacing:-.02em}.wordmark img{width:24px;height:24px}.wordmark b{color:inherit;font-weight:600}.eyebrow,.overline{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}.eyebrow{color:var(--muted)}#lang{min-width:44px;min-height:40px;border:1px solid var(--input-border);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:600}#lang:hover{background:#F1F3F7}
main{padding:0 clamp(16px,2vw,24px)}.hero{min-height:360px;border-radius:12px}.hero-copy{padding:clamp(32px,4vw,48px)}.hero .overline{color:#685239;margin-bottom:16px}.hero h1{font-size:clamp(36px,4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.035em}.hero p:not(.overline){font-size:14px;line-height:1.5;margin:24px 0}.hero a,.primary-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;background:var(--primary);color:#fff;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600;line-height:1.4;transition:background-color .16s ease}.hero a:hover,.primary-button:hover{background:var(--primary-hover)}.hero a:active,.primary-button:active{background:var(--primary-pressed)}
.state-bar{margin-top:24px;border-radius:12px;padding:16px 24px;gap:16px}.state-bar strong{font-size:14px;font-weight:600}.state-bar small{font-size:12px;line-height:1.45}.state-button{min-height:40px;border:1px solid var(--input-border);border-radius:8px;padding:8px 12px;font-size:14px;font-weight:500;transition:background-color .16s ease}.state-button:hover{background:#F1F3F7}.state-button.active{background:var(--selected);color:var(--ink);border-color:var(--primary);font-weight:600}.state-button.active:hover{background:var(--selected)}
.order-layout{gap:32px;padding-block:48px 64px}.section-intro .overline,.summary .overline{color:var(--muted)}.section-intro h2,.summary h2{font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.025em}.section-intro>p:last-child{font-size:14px;line-height:1.5;margin:8px 0 24px}.product,.summary{border-color:var(--line);border-radius:12px}.product-copy{padding:24px}.product-top strong{font-size:18px;font-weight:600}.pill{font-size:12px;font-weight:500;color:#685239}.product h3{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:0}.product-copy>p{font-size:14px;line-height:1.5}.quantity{font-size:14px;font-weight:500}.stepper button{border-radius:8px;min-width:36px;min-height:36px}.inline-empty{font-size:14px;line-height:1.5}.form-heading{margin:32px 0 24px}.fields{gap:16px}.fields label{font-size:14px;font-weight:500}.fields input,.fields select{min-height:44px;border-color:var(--input-border);border-radius:8px;font-size:14px}.fields input[aria-invalid=true]{border-color:#AC2436;background:#FDECEF}.field-error{font-size:12px;font-weight:500;color:#AC2436}.form-note,.summary-note{font-size:12px;line-height:1.45}.form-status{font-size:14px;line-height:1.5;background:#E8F5EE;color:#176746}.form-status.error{background:#FDECEF;color:#AC2436}
.summary{padding:24px}.summary dl>div{font-size:14px}.summary .total{font-size:18px}.status-card{background:#F1F3F7;border-radius:8px}.status-card strong{font-size:14px;font-weight:600}.status-card p{font-size:12px;line-height:1.45}.timeline li,.operator{font-size:12px}.timeline li:first-child{color:#85857f;font-weight:400}.timeline li:first-child:before{background:#d7d5cb}.timeline[data-stage=assigned] li:nth-child(-n+2){color:var(--ink);font-weight:600}.timeline[data-stage=assigned] li:nth-child(-n+2):before{background:var(--primary)}.operator summary{font-weight:600}.operator p{font-size:12px}.topbar,.state-bar,.product,.summary,footer{border-color:var(--line)}footer{font-size:12px;padding:24px clamp(16px,4vw,48px) 32px}footer a{color:var(--primary);font-weight:600}
@media(max-width:900px){.hero h1{font-size:clamp(34px,5vw,44px)}}
@media(max-width:650px){.topbar{padding:12px 16px}.hero-copy{padding:32px 24px}.state-bar{padding:16px}.order-layout{padding:32px 0 48px;gap:24px}.product-copy{padding:16px}.summary{padding:20px}.section-intro h2,.summary h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.hero a,.primary-button,.state-button{transition:none}}