/* People, the floor, and the next visit: three original feature demonstrations. */
.feature-section { position:relative; border-top:2px solid #173964; }
.feature-section h2 { line-height:1.55; }
.feature-section .section-lead { color:#526786; }
.feature-section button { -webkit-tap-highlight-color:transparent; }
.feature-section button:focus-visible,.feature-section a:focus-visible { outline:3px solid #d69f36; outline-offset:3px; }
.feature-section [role="tabpanel"]:focus-visible { outline:2px solid #d69f36; outline-offset:-4px; border-radius:10px; }
.feature-demo-bar { display:flex; align-items:center; gap:8px; padding:12px 14px; background:linear-gradient(110deg,#123a87,#0b2554); color:#e3ecff; }
.feature-demo-bar strong { font:800 15px/1.1 var(--display); letter-spacing:.2px; }
.feature-demo-bar>span:last-child { margin-left:auto; color:#f1d485; font-size:8px; font-weight:700; white-space:nowrap; }
.feature-demo-dots { display:flex; gap:3px; }
.feature-demo-dots i { display:block; height:5px; width:5px; border-radius:50%; background:#7099e5; }
.feature-demo-dots i:first-child { background:#efc765; }
.feature-demo-dots i:last-child { background:#b5c9ef; }
.feature-tab-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:13px 14px 0; }
.feature-tab-row button { min-width:0; min-height:44px; padding:8px 3px; background:#eef2fa; border:1px solid #cfdaec; border-radius:8px; color:#49628a; font-size:11px; font-weight:800; transition:background .2s,translate .35s var(--fluid),box-shadow .25s; }
.feature-tab-row button>span { color:#7284a5; font:800 10px/1 var(--display); margin-right:4px; }
.feature-tab-row button[aria-selected="true"] { color:white; background:#174ec2; border-color:#174ec2; box-shadow:0 3px 0 #c2d1ed; translate:0 -1px; }
.feature-tab-row button[aria-selected="true"]>span { color:#f4d782; }
.feature-tab-row button:hover { translate:0 -2px; }
.feature-mini-label { display:block; font:800 10px/1.3 var(--display); letter-spacing:1.5px; color:#496caa; }
.feature-example-tag { padding:2px 6px; border:1px solid #d0daea; border-radius:4px; color:#536887; font-size:8px; white-space:nowrap; }
.feature-chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:21px; }
.feature-chip-row>span { padding:4px 9px; border:1px solid #ccd8e9; border-radius:20px; background:#fff9; font-size:10px; font-weight:700; color:#45618b; }
.feature-demo-note { margin-top:15px; font-size:10px; line-height:1.9; color:#5c6f8b; }
.feature-text-link { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; padding:13px 0 3px; border-top:1px solid #c3d0e5; font-size:11px; font-weight:800; min-height:44px; }
.feature-text-link>span { color:#174ec2; font:700 21px/1 var(--display); }
.feature-text-link:hover { color:#174ec2; }
.feature-official-link { display:inline-flex; align-items:center; gap:10px; padding:11px 0; margin-top:4px; color:#526a8f; font-size:10px; text-decoration:underline; text-underline-offset:4px; }
.feature-interaction-hint { color:#5a7094; font-size:9px; margin-top:16px; text-align:center; }
.feature-replay { display:flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:6px 9px; color:#2e5291; background:white; border:1px solid #c7d5ee; border-radius:7px; font-size:9px; font-weight:700; white-space:nowrap; }
.feature-replay>span { font:700 19px/1 var(--display); }
.feature-replay:hover { background:#fcf2d8; }

/* A visible, finite tour keeps the visitor in charge of each demo. */
.demo-sample-context { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; padding:10px 14px; margin:0; color:#516887; background:#eaf0fa; border-bottom:1px solid #d6e0ee; font-size:9px; line-height:1.6; }
.demo-sample-context strong { color:#284d86; font:800 10px/1.5 var(--display); letter-spacing:.6px; }
.demo-sample-context>span { font-weight:500; }
.feature-tour-controls { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid #cedbed; background:#f0f4fb; color:#24497e; }
.feature-tour-controls>p { min-width:0; margin:0; font-size:10px; line-height:1.5; font-weight:800; }
.feature-tour-controls small { display:block; color:#587091; font-size:9px; font-weight:500; line-height:1.65; margin-top:3px; }
.feature-tour-controls button { flex:none; min-height:44px; min-width:88px; padding:9px 12px; border:1px solid #b9cce6; border-radius:9px; background:white; color:#204c92; font-size:10px; font-weight:800; cursor:pointer; }
.feature-tour-controls button:hover { background:#fbefd1; border-color:#c4a158; }
.feature-tour-controls button:disabled { background:#e5ebf4; color:#5c6f87; cursor:default; }
.feature-tour-controls button:focus-visible { outline:3px solid #b78a29; outline-offset:3px; }
[data-tour-state="playing"] [data-tour-status]::before { content:""; display:inline-block; width:6px; height:6px; background:#2263ca; border-radius:50%; margin-right:5px; box-shadow:0 0 0 3px #2263ca15; }
.feature-record-origin { color:#526b91; font-size:9px; line-height:1.7; font-weight:600; margin:0 0 9px; }
.feature-insight { min-height:46px; padding:10px 12px; margin:12px 0 0; border-left:3px solid #c29535; border-radius:0 7px 7px 0; background:#fbefd1; color:#654b1d; font-size:10px; font-weight:700; line-height:1.8; text-align:left; }
.feature-insight[data-insight-ready="false"] { opacity:0; }
.cast-showcase>.demo-sample-context { background:#09224b; color:#bbceec; border:1px solid #7592c04d; border-radius:8px; margin-bottom:13px; }
.cast-showcase>.demo-sample-context strong { color:#edcf85; }
.cast-showcase>.feature-tour-controls { margin-top:14px; border:1px solid #7592c04d; border-radius:12px; background:#0a214d; color:#edf3ff; }
.cast-showcase>.feature-tour-controls small { color:#b5c9e8; }
.cast-showcase>.feature-tour-controls button { background:#f5db98; color:#193860; border-color:#d7b76e; }
.cast-showcase>.feature-tour-controls button:disabled { background:#435675; color:#d1ddef; border-color:#6981a1; }
.cast-showcase[data-tour-state="playing"] [data-tour-status]::before { background:#efcf79; box-shadow:0 0 0 3px #efcf7915; }
/* Inactive panels reserve their natural height, with aria-hidden + inert in JS.
   A guided tab change therefore never pushes the page under the reader. */
.manager-demo[data-feature-enhanced], .customer-demo[data-feature-enhanced] { display:grid; grid-template-columns:minmax(0,1fr); }
.manager-demo[data-feature-enhanced]>.feature-demo-bar, .customer-demo[data-feature-enhanced]>.feature-demo-bar { grid-area:1 / 1; }
.manager-demo[data-feature-enhanced]>.demo-sample-context, .customer-demo[data-feature-enhanced]>.demo-sample-context { grid-area:2 / 1; }
.manager-demo[data-feature-enhanced]>.feature-tab-row { grid-area:3 / 1; }
.manager-demo[data-feature-enhanced]>.manager-panel { grid-area:4 / 1; }
.manager-demo[data-feature-enhanced]>.feature-tour-controls { grid-area:5 / 1; }
.customer-demo[data-feature-enhanced]>.customer-identity { grid-area:3 / 1; }
.customer-demo[data-feature-enhanced]>.feature-tab-row { grid-area:4 / 1; }
.customer-demo[data-feature-enhanced]>.customer-panel { grid-area:5 / 1; }
.customer-demo[data-feature-enhanced]>.feature-tour-controls { grid-area:6 / 1; }
.manager-demo[data-feature-enhanced]>.manager-panel[hidden], .customer-demo[data-feature-enhanced]>.customer-panel[hidden] { display:block!important; visibility:hidden; pointer-events:none; }
.manager-demo[data-feature-enhanced]>.manager-panel, .customer-demo[data-feature-enhanced]>.customer-panel { position:relative; z-index:1; }
/* An outgoing panel stays visual briefly, but is already hidden from navigation. */
.manager-demo[data-feature-enhanced]>.manager-panel[hidden].is-feature-leaving,
.customer-demo[data-feature-enhanced]>.customer-panel[hidden].is-feature-leaving { visibility:visible; pointer-events:none; z-index:2; }

/* D-manager: the same pocket screen changes from conversation to schedule to results. */
.manager-section { background-color:#f8faf7; }
.manager-demo { margin-top:28px; border:2px solid #143a7b; border-radius:20px; overflow:hidden; box-shadow:5px 6px 0 #1137691a; background:#fffefa; }
.manager-panel { padding:19px 18px 16px; min-height:370px; background:linear-gradient(170deg,#fffefa,#eff4fd); }
.manager-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:51px; margin-bottom:14px; }
.manager-panel-heading h3 { font-size:15px; font-weight:800; margin-top:4px; }
.manager-heading-art { width:61px; margin-top:-3px; margin-bottom:-5px; filter:drop-shadow(0 3px 0 #163d7a0b); }
.manager-conversation { display:flex; flex-direction:column; gap:11px; min-height:216px; padding:3px 0 9px; }
.manager-message { display:flex; gap:7px; align-items:flex-end; padding-right:22px; }
.manager-message>div { min-width:0; }
.manager-message-icon { display:grid; place-items:center; width:28px; height:28px; flex:none; margin-bottom:1px; border-radius:10px; color:#ffe9ad; background:#173b79; font-size:10px; font-weight:800; }
.manager-message small { display:block; margin:0 0 4px 3px; font-size:8px; color:#5b7295; }
.manager-message p { padding:10px 13px; font-size:11px; line-height:1.8; font-weight:500; color:#28456d; background:white; border:1px solid #d4dfef; border-radius:12px 12px 12px 3px; box-shadow:0 2px 4px #163a6f05; }
.manager-message-mine { justify-content:flex-end; padding-right:0; padding-left:35px; }
.manager-message-mine small { text-align:right; margin-right:3px; }
.manager-message-mine p { background:#fae9b9; border-color:#e7cb82; border-radius:12px 12px 3px 12px; color:#59451c; }
.manager-talk-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:7px; border-top:1px solid #d9e2f0; padding-top:12px; }
.manager-talk-footer>span { font-size:9px; color:#536d94; }
.manager-week-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin:18px 0; }
.manager-week-grid button { min-width:0; min-height:66px; padding:7px 2px 8px; display:flex; align-items:center; flex-direction:column; justify-content:center; background:white; border:1px solid #cedbf0; border-radius:9px; color:#1d457d; transition:background .25s,border-color .25s,translate .35s var(--fluid); }
.manager-week-grid button>span { font-size:13px; font-weight:800; }
.manager-week-grid button>small { font-size:8px; line-height:1.7; }
.manager-week-grid button>i { width:4px; height:4px; border-radius:50%; background:#1d59c4; margin-top:5px; }
.manager-week-grid .manager-day-off { color:#70809b; background:#edf1f7; border-color:#dee5f0; }
.manager-week-grid .manager-day-off>i { background:#a1afc7; }
.manager-week-grid button[aria-pressed="true"] { background:#174ec2; color:white; border-color:#174ec2; box-shadow:0 4px 0 #cedbf2; translate:0 -3px; }
.manager-week-grid button[aria-pressed="true"]>i { background:#f3d47e; }
.manager-shift-detail { padding:18px 18px 17px; border:1px solid #e4c471; border-radius:13px; background:linear-gradient(120deg,#fff8e8,#f5e5b7); color:#274574; }
.manager-shift-detail>div { display:flex; align-items:center; justify-content:space-between; gap:9px; font-size:11px; font-weight:700; }
.manager-shift-detail b { padding:3px 8px; border-radius:12px; background:#ffffff88; color:#735c26; font-size:9px; font-weight:700; }
.manager-shift-detail>strong { display:block; font:800 clamp(25px,6.5vw,35px)/1.3 var(--display); letter-spacing:0; margin-top:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.manager-shift-detail>p { font-size:9px; color:#566b87; margin-top:7px; }
.manager-rank-toolbar { display:flex; justify-content:space-between; align-items:center; gap:9px; margin:4px 0 8px; }
.manager-rank-toolbar>span { font-size:10px; font-weight:800; color:#4b6691; }
.manager-rank-toolbar>div { display:flex; gap:5px; }
.manager-rank-toolbar button { min-height:44px; min-width:66px; padding:8px 9px; border:1px solid #c7d5e9; border-radius:7px; background:#fff; color:#536887; font-size:9px; font-weight:700; }
.manager-rank-toolbar button[aria-pressed="true"] { background:#f7e5b3; border-color:#e0be66; color:#664d14; }
.manager-rank-list { display:flex; flex-direction:column; list-style:none; margin:0; padding:0; }
.manager-rank-list li { display:grid; grid-template-columns:24px 48px minmax(0,1fr) auto; column-gap:9px; align-items:center; position:relative; padding:9px 0 12px; min-width:0; border-bottom:1px solid #dbe3ee; }
.manager-rank-list li:last-child { border-bottom:none; }
.manager-rank-position { display:grid; place-items:center; min-height:25px; border-radius:7px; background:#e8eef9; color:#5c77a3; font:800 18px/1 var(--display); }
.manager-rank-list li:first-child .manager-rank-position { background:#efcf7a; color:#5b4218; }
.manager-rank-avatar { grid-column:2; grid-row:1 / span 2; width:48px; background-color:#edf2fd; border-radius:11px; }
.manager-rank-name { font-size:11px; font-weight:800; min-width:0; }
.manager-rank-list [data-rank-value] { font:800 25px/1.2 var(--display); color:#2053ab; font-variant-numeric:tabular-nums; white-space:nowrap; }
.manager-rank-track { grid-column:3 / -1; margin-top:5px; height:5px; overflow:hidden; border-radius:3px; background:#dfe8f7; }
.manager-rank-track>span { display:block; height:100%; width:100%; border-radius:3px; transform-origin:left center; background:linear-gradient(90deg,#235dd1,#89acf0); }
.manager-rank-list li:first-child .manager-rank-track>span { background:linear-gradient(90deg,#b78528,#efd280); }

/* One cast list, two touchpoints. */
.cast-section { color:#f5f7ff; background:radial-gradient(ellipse at 100% 15%,#2153a561,transparent 55%),linear-gradient(150deg,#13336f,#081d44 72%); overflow:hidden; }
.cast-section .section-kicker { color:#b4c9ed; }
.cast-section h2 em { color:#efc765; }
.cast-section .section-lead { color:#d0dff6; }
.cast-showcase { margin-top:26px; }
.cast-device-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.cast-device-tabs>button { display:flex; justify-content:center; align-items:center; gap:13px; min-height:75px; min-width:0; padding:12px 8px; border:1px solid #839fce80; border-radius:12px; background:#0a214c9c; color:#d0def7; transition:background .3s,border-color .3s,translate .45s var(--fluid); }
.cast-device-tabs small { display:block; font-size:9px; font-weight:600; text-align:left; }
.cast-device-tabs strong { display:block; font:800 26px/1.15 var(--display); text-align:left; }
.cast-device-tabs>button[aria-selected="true"] { color:#112d5c; background:linear-gradient(120deg,#f9e2a1,#edc566); border-color:#f4dc93; box-shadow:0 4px 0 #04133266; translate:0 -2px; }
.cast-device-tabs>button:hover { translate:0 -3px; }
.feature-device-icon { display:block; flex:none; width:23px; height:34px; border:2px solid currentColor; border-radius:5px; position:relative; opacity:.86; }
.feature-device-icon::after { content:""; position:absolute; height:2px; width:8px; background:currentColor; border-radius:3px; bottom:3px; left:50%; translate:-50% 0; }
.feature-device-tablet { width:36px; height:28px; border-radius:5px; }
.feature-device-tablet::after { bottom:auto; top:50%; left:3px; height:5px; width:2px; translate:0 -50%; }
.cast-device-panel { padding-top:22px; }
.cast-device-caption { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.cast-device-caption>strong { font-size:10px; color:#d5e2f8; }
.cast-device-caption>span { font-size:8px; color:#d5bc7a; }
.cast-device-frame { width:100%; max-width:310px; margin:auto; border:7px solid #031329; border-radius:27px; background:#031329; box-shadow:0 18px 35px #020b203b,0 0 0 1px #8dace42b; overflow:hidden; transition:max-width .6s var(--fluid),border-radius .6s var(--fluid); }
.cast-showcase[data-feature-enhanced] .cast-device-frame { transform-origin:50% 0; transition:border-radius .55s var(--fluid); }
#cast-showcase[data-device="order"] .cast-device-frame { max-width:100%; border-radius:16px; }
.cast-device-toolbar { position:relative; display:flex; justify-content:space-between; align-items:center; padding:8px 12px 10px; color:#dac186; background:#061c3b; }
.cast-device-toolbar>span { width:14px; height:2px; border-top:1px solid #c4aa69; border-bottom:1px solid #c4aa69; padding-top:4px; }
.cast-device-toolbar>b { font:700 10px/1 var(--display); letter-spacing:2px; }
.cast-device-toolbar>i { font-style:normal; font-size:12px; }
.cast-device-screen { padding:14px 12px 15px; background:linear-gradient(150deg,#fcfaf3,#eff3fb); color:#153260; }
.cast-list-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.cast-list-heading h3 { font:800 24px/1.1 var(--display); letter-spacing:1px; }
.cast-list-heading p { font-size:7px; font-weight:700; color:#61738e; }
.cast-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.cast-cards>button { position:relative; min-width:0; min-height:174px; overflow:hidden; border:1px solid #cbd8ec; border-radius:10px; background:white; padding:8px 3px 10px; text-align:center; transition:background .25s,border-color .25s,translate .4s var(--fluid),box-shadow .3s; }
.cast-cards>button:hover { translate:0 -3px; }
.cast-cards>button[aria-pressed="true"] { background:#fff4d5; border-color:#d4a442; box-shadow:0 3px 0 #d6b66b; translate:0 -2px; }
.cast-card-index { position:absolute; top:5px; left:5px; font:800 8px/1 var(--display); color:#7489aa; z-index:1; }
.cast-card-portrait { width:100%; max-width:108px; margin:1px auto 5px; border-radius:8px; }
.cast-cards>button>strong { display:block; color:#26446f; font-size:10px; font-weight:800; }
.cast-cards>button>small { display:block; color:#607493; font:700 9px/1.3 var(--display); letter-spacing:1.1px; margin-top:2px; }
.cast-card-time { display:block; color:#607493; font:600 10px/1.5 var(--display); margin-top:5px; white-space:nowrap; letter-spacing:-.1px; }
.cast-profile { margin-top:16px; padding:12px; border:1px solid #d9c99d; border-radius:11px; background:#f9edd0; }
.cast-profile-top { display:flex; align-items:center; gap:12px; }
.cast-profile-top>div { min-width:0; min-height:82px; }
.cast-profile-portrait { display:block; width:62px; height:64px; flex:none; position:relative; border-radius:9px; background:radial-gradient(ellipse at 50% 90%,#ead092,#fff6de 75%); }
.cast-profile-portrait>.cast-portrait { position:absolute; left:0; bottom:0; width:62px; border-radius:9px; }
.cast-profile-portrait>.feature-portrait-outgoing { pointer-events:none; z-index:2; }
.cast-profile-top small { color:#8d6b24; font:800 9px/1 var(--display); letter-spacing:1.3px; }
.cast-profile-top h4 { margin:3px 0 5px; color:#25477c; font-size:18px; line-height:1.4; }
#cast-profile-tag { display:inline-block; padding:2px 6px; border:1px solid #ddcc9d; border-radius:10px; background:#fffbef; color:#73602e; font-size:8px; }
#cast-profile-time { display:block; margin-top:5px; font:700 12px/1.4 var(--display); color:#526a8d; }
#cast-profile-copy { margin-top:10px; font-size:10px; line-height:1.9; color:#53637b; min-height:38px; }
.cast-device-home { height:4px; width:65px; border-radius:5px; background:#72819a; margin:8px auto 3px; }
#cast-showcase[data-device="order"] .cast-device-home { width:40px; height:3px; margin-top:6px; }
.cast-device-copy { font-size:10px; color:#d7e3f7; text-align:center; margin-top:18px; min-height:38px; line-height:1.9; }
.cast-benefits { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; padding-top:16px; border-top:1px solid #6b8bb649; }
.cast-benefits>span { font-size:9px; font-weight:700; color:#e0e8f6; }
.cast-benefits b { color:#efcf79; font:800 14px/1 var(--display); margin-right:5px; }
.cast-section .feature-demo-note { color:#b7c8e4; }
.cast-section .feature-text-link { color:#f0e8cd; border-color:#6b8bb657; }
.cast-section .feature-text-link>span { color:#efc765; }
.cast-section .feature-text-link:hover { color:#efc765; }

/* A POS-side customer record, using explicitly fictional data. */
.customer-section { background-color:#f7f9f7; }
.customer-plan { display:inline-flex; align-items:center; gap:6px; margin-top:20px; padding:5px 11px; background:#f6e6b6; color:#6b511b; border:1px solid #e1c474; border-radius:20px; font-size:10px; font-weight:700; }
.customer-plan>span { font-weight:900; }
.customer-demo { border:2px solid #173d79; border-radius:18px; overflow:hidden; margin-top:23px; background:#fffefa; box-shadow:5px 6px 0 #13396c18; }
.customer-demo .feature-demo-bar strong { font-size:12px; letter-spacing:.6px; }
.customer-identity { display:flex; align-items:center; gap:11px; padding:20px 18px 17px; background:linear-gradient(110deg,#f9edd0,#fffefa 72%); }
.customer-monogram { display:grid; place-items:center; width:47px; height:47px; flex:none; background:#153d86; color:#f4d686; border:2px solid #f6de9f; outline:1px solid #b9cceb; border-radius:50%; font:800 29px/1 var(--display); }
.customer-identity>div { min-width:0; }
.customer-identity small { color:#536887; font-size:8px; }
.customer-identity h3 { margin-top:2px; color:#183a70; font-size:20px; font-weight:800; }
.customer-last-visit { margin-left:auto; text-align:right; }
.customer-last-visit small { display:block; }
.customer-last-visit strong { display:block; color:#3d5c8e; font:800 25px/1.3 var(--display); letter-spacing:.5px; }
.customer-tabs { padding-top:0; }
.customer-panel { min-height:290px; padding:18px 17px 19px; background:linear-gradient(#fffefa,#f7f9fe); }
.customer-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.customer-metrics>div { min-width:0; padding:11px 4px 13px; border:1px solid #d8e1f0; border-radius:9px; background:#eef3fd; text-align:center; }
.customer-metrics small { display:block; color:#536887; font-size:9px; font-weight:500; }
.customer-metrics strong { display:block; margin-top:4px; color:#1a4dab; font:800 31px/1.1 var(--display); letter-spacing:-.5px; white-space:nowrap; }
.customer-metrics strong>span { font:800 11px/1 var(--sans); margin:0 1px; }
.customer-attributes { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:19px 0 15px; }
.customer-attributes>.feature-mini-label { color:#5b729a; font-size:8px; letter-spacing:1px; margin-right:3px; }
.customer-attributes>span:not(.feature-mini-label) { background:white; color:#46628c; border:1px solid #c7d5eb; border-radius:20px; padding:3px 8px; font-size:9px; }
.customer-memo { display:flex; gap:10px; align-items:center; padding:13px 13px 14px; border:1px solid #e3d4a9; border-radius:9px; background:#fcf0cf; color:#66502b; }
.customer-memo>span { font:700 25px/1 var(--display); color:#96712d; }
.customer-memo small { display:block; font-size:8px; color:#756132; margin-bottom:3px; }
.customer-memo p { font-size:11px; line-height:1.8; font-weight:500; }
.customer-panel-caption { color:#586e91; font-size:9px; line-height:1.8; margin-top:17px; }
.customer-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; }
.customer-panel-heading h3 { font-size:12px; font-weight:800; }
.customer-panel-heading>span { font:700 9px/1.4 var(--display); letter-spacing:.5px; color:#536887; }
.customer-visits { list-style:none; margin:0; padding:0; }
.customer-visits>li { display:grid; grid-template-columns:45px minmax(0,1fr) auto; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid #dbe4f0; position:relative; }
.customer-visits>li:last-child { border-bottom:0; }
.customer-visits time { display:block; border:1px solid #cedaee; border-radius:6px; padding:6px 2px; background:#e9f0fc; color:#375c9a; text-align:center; font:800 15px/1.2 var(--display); font-variant-numeric:tabular-nums; }
.customer-visits>li:first-child time { background:#f4e2b3; color:#6f531b; border-color:#dcc17d; }
.customer-visits>li>div { min-width:0; }
.customer-visits strong { display:block; color:#39557e; font-size:10px; font-weight:800; }
.customer-visits small { display:block; color:#61718a; font-size:8px; margin-top:4px; line-height:1.6; }
.customer-visits b { font:800 24px/1 var(--display); color:#2053a3; font-variant-numeric:tabular-nums; white-space:nowrap; }
.customer-bottles { display:flex; flex-direction:column; gap:10px; list-style:none; margin:0; padding:0; }
.customer-bottles li { display:grid; grid-template-columns:47px minmax(0,1fr) auto; gap:13px; align-items:center; padding:12px 14px; background:#f0f4fc; border:1px solid #d5dfef; border-radius:11px; }
.customer-bottles small { display:block; color:#596e90; font-size:8px; }
.customer-bottles h4 { color:#294a7d; font-size:13px; margin:3px 0 4px; }
.customer-bottles p { color:#61728d; font-size:9px; }
.customer-bottles li>strong { color:#3b5a8a; font:800 31px/1.1 var(--display); white-space:nowrap; }
.customer-bottles li>strong>span { font:700 10px/1 var(--sans); margin-left:3px; }
.customer-bottle-icon { position:relative; display:block; height:51px; width:32px; margin:13px auto 0; border:1px solid #a67e33; border-radius:8px 8px 6px 6px; background:linear-gradient(100deg,#cfa95b,#edcf88 36%,#c8a35b 80%); box-shadow:inset 4px 0 0 #fff2; }
.customer-bottle-icon::before { content:""; display:block; position:absolute; width:12px; height:17px; left:50%; translate:-50% 0; top:-16px; background:linear-gradient(90deg,#b38c43,#dec17c); border:1px solid #a98238; border-bottom:none; border-radius:3px 3px 0 0; }
.customer-bottle-icon::after { content:""; display:block; position:absolute; top:-17px; left:50%; translate:-50% 0; height:6px; width:15px; background:#183767; border-radius:2px; }
.customer-bottle-icon i { position:absolute; top:19px; left:3px; right:3px; padding:3px 0; color:#684b1e; background:#fff5d9; text-align:center; font:800 8px/1 var(--display); letter-spacing:.7px; }
.customer-bottle-blue { border-color:#6485aa; background:linear-gradient(100deg,#759bb8,#c6d7df 36%,#7695b0 80%); }
.customer-bottle-blue::before { border-color:#6b89a5; background:linear-gradient(90deg,#7c9ab1,#c5d7df); }
.customer-bottle-blue::after { background:#d4b26a; }

/* Navigation remains useful as the page becomes a guide to all four apps. */
.hero-feature-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:17px 0 6px; }
.hero-feature-links>a { display:flex; align-items:center; justify-content:center; gap:4px; min-height:44px; min-width:0; border:1px solid #b9cbe7; border-radius:8px; background:#edf3ff; color:#224b91; font-size:10px; font-weight:800; text-align:center; padding:6px 3px; transition:background .25s,translate .35s var(--fluid); }
.hero-feature-links>a:hover { background:#f9e9b5; translate:0 -2px; }
.hero-feature-links>a>span { color:#8c6b26; }
#mobile-menu { max-height:calc(100dvh - 110px); overflow-y:auto; overscroll-behavior:contain; }
.screen-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.screen-gallery { display:grid; gap:16px; }
.screen-gallery .official-screen { margin:0; }
@media(min-width:1001px) and (max-height:820px) {
  .right-rail .index-nav { margin-top:15px; }
  .right-rail .index-nav a { padding-top:6px; padding-bottom:6px; }
  .right-rail .rail-footer { margin-top:18px; }
  .right-rail .motion-toggle { margin-top:10px; }
}
@media(max-width:540px) {
  .feature-demo-bar { padding:11px 12px; }
  .feature-demo-bar>span:last-child { font-size:7px; }
  .feature-tab-row { padding-left:11px; padding-right:11px; gap:5px; }
  .feature-tab-row button { font-size:10px; }
  .feature-tab-row button>span { font-size:9px; margin-right:3px; }
  .manager-panel { padding:16px 14px; min-height:369px; }
  .manager-panel-heading h3 { font-size:14px; }
  .manager-week-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:14px; }
  .manager-week-grid button { min-height:54px; padding:5px 3px; }
  .manager-week-grid button>i { margin-top:3px; }
  .manager-shift-detail { padding:14px; }
  .manager-shift-detail>strong { font-size:clamp(25px,6.5vw,35px); margin-top:9px; }
  .manager-rank-list li { grid-template-columns:21px 43px minmax(0,1fr) auto; column-gap:7px; }
  .manager-rank-avatar { width:43px; }
  .manager-rank-list [data-rank-value] { font-size:23px; }
  .cast-device-tabs>button { gap:10px; min-height:72px; }
  .cast-device-tabs strong { font-size:24px; }
  .cast-device-frame { border-width:6px; }
  .cast-device-screen { padding-left:10px; padding-right:10px; }
  .cast-benefits { gap:7px; }
  .cast-benefits>span { font-size:8px; }
  .customer-identity { padding:17px 14px 15px; gap:9px; }
  .customer-panel { padding:17px 13px 18px; min-height:285px; }
  .customer-metrics { gap:5px; }
  .customer-metrics strong { font-size:27px; }
  .customer-metrics small { font-size:8px; }
  .customer-visits>li { grid-template-columns:41px minmax(0,1fr) auto; gap:7px; }
  .customer-visits b { font-size:21px; }
  .customer-bottles li { padding-left:11px; padding-right:11px; gap:9px; }
}
@media(max-width:370px) {
  .feature-section .section-kicker { font-size:10px; letter-spacing:1.1px; }
  .feature-section .section-lead { font-size:11px; }
  .feature-tab-row button { font-size:9px; }
  .manager-tabs button>span { display:none; }
  .manager-panel { padding-left:12px; padding-right:12px; }
  .manager-message { padding-right:4px; gap:5px; }
  .manager-message p { font-size:10px; padding:10px 11px; }
  .manager-message-mine { padding-right:0; padding-left:28px; }
  .manager-talk-footer { gap:5px; }
  .manager-talk-footer>span { font-size:8px; }
  .feature-replay { font-size:8px; padding-left:7px; padding-right:7px; }
  .manager-rank-list li { grid-template-columns:20px 36px minmax(0,1fr) auto; column-gap:6px; }
  .manager-rank-avatar { width:36px; }
  .manager-rank-name { font-size:10px; }
  .manager-rank-list [data-rank-value] { font-size:21px; }
  .manager-rank-toolbar button { min-width:62px; padding-left:6px; padding-right:6px; }
  .cast-device-tabs { gap:7px; }
  .cast-device-tabs>button { gap:8px; }
  .cast-device-tabs strong { font-size:23px; }
  .feature-device-phone { width:20px; height:31px; }
  .feature-device-tablet { width:31px; height:25px; }
  .cast-device-frame { border-width:5px; }
  .cast-device-screen { padding-left:8px; padding-right:8px; }
  .cast-cards { gap:5px; }
  .cast-card-time { font-size:9px; letter-spacing:-.2px; }
  .cast-profile { padding:10px; }
  #cast-profile-copy { font-size:10px; }
  .cast-profile-top { gap:10px; }
  .cast-benefits { grid-template-columns:1fr; gap:8px; }
  .cast-benefits>span { font-size:9px; }
  .customer-demo .feature-demo-bar strong { font-size:11px; }
  .customer-monogram { height:40px; width:40px; font-size:25px; }
  .customer-identity h3 { font-size:18px; }
  .customer-identity small { font-size:7px; }
  .customer-last-visit strong { font-size:23px; }
  .customer-panel { padding-left:11px; padding-right:11px; min-height:289px; }
  .customer-metrics strong { font-size:23px; }
  .customer-metrics strong>span { font-size:9px; }
  .customer-memo { padding:11px 9px; gap:7px; }
  .customer-memo p { font-size:10px; }
  .customer-visits>li { grid-template-columns:36px minmax(0,1fr) auto; gap:6px; }
  .customer-visits time { font-size:13px; }
  .customer-visits strong { font-size:9px; }
  .customer-visits small { font-size:7px; }
  .customer-visits b { font-size:19px; }
  .customer-panel-heading h3 { font-size:11px; }
  .customer-panel-heading>span { font-size:8px; }
  .customer-bottles li { grid-template-columns:39px minmax(0,1fr) auto; gap:8px; padding-left:9px; padding-right:9px; }
  .customer-bottles h4 { font-size:12px; }
  .customer-bottles p { font-size:8px; }
  .hero-feature-links>a { font-size:9px; }
}

.image-viewing .feature-section *, .night-theater-open .feature-section * { animation-play-state:paused!important; transition:none!important; }
.motion-off .feature-section *, html[data-motion="off"] .feature-section * { transition:none!important; }
@media(prefers-reduced-motion:reduce) {
  .feature-section * { transition:none!important; }
}