/* HOST — black glass, polished silver and architectural light. */
body[data-vertical=host] {
  --host-silver:#d9dbde;
  --host-carbon:#131314;
  --host-paper:#f1f2f3;
  background-color:#0a0b0c;
  background-image:linear-gradient(118deg,transparent 22%,#cdd0d50b 22.1%,transparent 22.35%,transparent 78%,#cdd0d50b 78.1%,transparent 78.3%),radial-gradient(ellipse at 0 0,#62666a29,transparent 55%);
  background-size:auto;
}
body[data-vertical=host]::before { background:linear-gradient(120deg,transparent 15%,#dcdee303 40%,transparent 65%); }
body[data-vertical=host] .page { background:#f0f0f1;border-color:#6f727670;box-shadow:0 0 80px #0008; }
body[data-vertical=host] :is(.topbar,.rail-wordmark) { background:#161618;border:1px solid #94979c;border-radius:3px;box-shadow:0 7px 22px #0003; }
body[data-vertical=host] .topbar { border-bottom:2px solid #c9cccf; }
body[data-vertical=host] .wordmark>span { color:#dee1e4; }
body[data-vertical=host] .rail-wordmark { box-shadow:5px 5px 0 #b5b8bc15; }
body[data-vertical=host] .rail-eyebrow { color:#c4c6c9;letter-spacing:3px; }
body[data-vertical=host] .rail-title { line-height:1.75;letter-spacing:-.04em; }
body[data-vertical=host] .rail-title em { background:none;color:#eceef0;border-bottom:1px solid #b6b9be; }
body[data-vertical=host] .rail-proof small { color:#b6b9bd; }
body[data-vertical=host] .right-rail h2 { font-style:normal;font-size:42px;letter-spacing:3px; }
body[data-vertical=host] .right-rail .index-kicker { color:#bbbec2;letter-spacing:3px; }
body[data-vertical=host] .index-nav a.is-active { color:#fff; }
body[data-vertical=host] :is(.cta,.small-cta,.mobile-sticky a:last-child) { background:linear-gradient(112deg,#ebedef,#c2c5c9 55%,#dde0e3);color:#26282b;border-color:#d9dcdf; }
body[data-vertical=host] .cta { border-radius:3px;border-width:1px;box-shadow:inset 0 0 0 3px #ffffff3b,0 7px 22px #0e101420; }
body[data-vertical=host] .cta:hover { box-shadow:inset 0 0 0 3px #fff7,0 12px 28px #0e101435; }
body[data-vertical=host] .arrow-circle { border-radius:2px;background:#292b2f;color:#f1f3f5; }
body[data-vertical=host] .small-cta { border-radius:2px; }
body[data-vertical=host] .mobile-sticky { background:#18191b;border-color:#7f8287;border-radius:4px; }
body[data-vertical=host] .mobile-sticky a { border-radius:2px; }
body[data-vertical=host] #mobile-menu { background:#1b1c1e;border-color:#999ca1;border-radius:4px; }

/* A dark opening with a diagonal silver edge, without changing the story. */
body[data-vertical=host] .hero-section { background:#131314;color:#f4f5f6; }
body[data-vertical=host] .hero-card {
  background-color:#1c1d20;
  background-image:linear-gradient(124deg,transparent 62%,#aeb2b71f 62.2%,transparent 85%),linear-gradient(165deg,#282a2d,#131314 70%);
  background-size:auto;background-repeat:no-repeat;
  border:1px solid #797d82;border-radius:4px;box-shadow:6px 6px 0 #7e818715;
  color:#f4f5f6;
}
body[data-vertical=host] .hero-card::before { content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#dddfe3,transparent 48%,#7f8389);pointer-events:none; }
body[data-vertical=host] .hero-product { background:#26282b;border:1px solid #73767c;border-radius:2px;color:#c1c4c9;letter-spacing:.06em; }
body[data-vertical=host] .hero-product strong { color:#ebedf0; }
body[data-vertical=host] .hero-eyebrow { color:#c0c3c7; }
body[data-vertical=host] .hero-card h1 { color:#f2f2f3; }
body[data-vertical=host] .hero-line { color:#ced0d4;font-weight:700;letter-spacing:-.04em; }
body[data-vertical=host] .hero-card h1 strong { color:#f6f6f7;text-shadow:2px 3px 0 #6b6e7345;transform:none;letter-spacing:-.055em; }
body[data-vertical=host] .hero-question { font-family:var(--sans);font-weight:800;color:#cbced2;letter-spacing:-.045em; }
body[data-vertical=host] .vertical-hero-lead { color:#bdc0c5; }
body[data-vertical=host] .vertical-seal { border-color:#80848b87;padding:10px 0; }
body[data-vertical=host] .vertical-seal>span { color:#dde0e3;letter-spacing:3px; }
body[data-vertical=host] .vertical-seal>strong { color:#a8acb0;border-left-color:#72767b; }
body[data-vertical=host] .vertical-seal>i { color:#c4c8ce; }
body[data-vertical=host] .hero-brand { background:#101113;border-top:1px solid #808389; }
body[data-vertical=host] .hero-brand::before { background:linear-gradient(90deg,transparent,#caced4,transparent); }
body[data-vertical=host] .hero-brand>span:last-child { color:#a6aab0; }
body[data-vertical=host] .terminal { background:#151618;color:#f3f5f7;border-color:#787e884f;border-radius:4px;box-shadow:6px 7px 0 #969ba219; }
body[data-vertical=host] .terminal-orange { color:#cdd4dc; }
body[data-vertical=host] .terminal-success { color:#c9dfd9; }
body[data-vertical=host] .terminal-dots span { color:#a7adb4; }
body[data-vertical=host] .hero-label>span { background:#e4e6e8;color:#292c30; }
body[data-vertical=host] .hero-label em { color:#5e666e; }
body[data-vertical=host] .hero-bubble { background:#e1e3e6;border-color:#92969c;border-radius:12px 12px 12px 2px;color:#303339;box-shadow:3px 4px 0 #63666c40; }
body[data-vertical=host] .hero-bubble::after { background:#e1e3e6;border-color:#92969c; }
body[data-vertical=host] .hero-lights { opacity:.48; }
body[data-vertical=host] .hero-lights .beam-gold { background:linear-gradient(#ebeff552,transparent 86%); }
body[data-vertical=host] .hero-lights .beam-blue { background:linear-gradient(#aeb8c545,transparent 86%); }
body[data-vertical=host] .hero-spark { color:#dce0e4; }
body[data-vertical=host] .hero-character { filter:drop-shadow(4px 8px 5px #0005) drop-shadow(0 0 1px #e5eaf2); }
body[data-vertical=host] .orbit { border-color:#a8aeb43d; }
body[data-vertical=host] .ticker { border-bottom-color:#777b81; }
body[data-vertical=host] .ticker span { border-color:#71747b;background:#1e2023;color:#d3d6db;border-radius:2px; }
body[data-vertical=host] .hero-feature-links a { color:#e6e9ee;background:#282b30;border-color:#686d76;border-radius:3px; }
body[data-vertical=host] .hero-feature-links a:hover { background:#383d45; }
body[data-vertical=host] .hero-feature-links a>span { color:#cbd3de; }
body[data-vertical=host] .hero-stats small { color:#b6bac0; }
body[data-vertical=host] .hero-stats>div { border-right-color:#5b6067; }
body[data-vertical=host] .hero-stats b { color:#f2f3f5; }
body[data-vertical=host] .scroll-invitation>a { color:#c8ced6; }
body[data-vertical=host] .mobile-motion { color:#b9bdc4;border-color:#747980; }

/* Architectural rules, squared controls, and silver reading surfaces. */
body[data-vertical=host] .section-kicker { font-style:normal;letter-spacing:2.6px;color:#71767d; }
body[data-vertical=host] .section h2 { line-height:1.65;letter-spacing:-.045em; }
body[data-vertical=host] mark { background:none;border-bottom:3px solid #b9bec3;padding-bottom:1px; }
body[data-vertical=host] :is(.host-demo-section,.crew-section,.customer-section,.plans-section,.faq-section) { background:#f0f0f1;border-top:1px solid #999ca1;color:#2d3035; }
body[data-vertical=host] :is(.manager-section,.screen-section,.flow-section) { background:#fbfbfc;border-top-color:#aeb2b7;color:#2d3035; }
body[data-vertical=host] .crew-tab { border:1px solid #9b9fa4;border-radius:3px;background:#fbfbfc;box-shadow:4px 4px 0 #ccced2; }
body[data-vertical=host] .crew-tab[data-app-target].is-active { border-color:#3e4146;box-shadow:4px 4px 0 #6d7177;background:#e6e8eb; }
body[data-vertical=host] .crew-tab:hover { box-shadow:4px 7px 0 #b0b4ba; }
body[data-vertical=host] :is(.app-panel,.manager-demo,.customer-demo,.plan-card,.official-screen,.plan-matrix-wrap,.inquiry-builder) { border-radius:4px;border-width:1px;border-color:#9ba0a6;box-shadow:4px 5px 0 #a7acb21f; }
body[data-vertical=host] :is(.feature-tab-row button,.plan-tab,.screen-tab,.plan-overview button,.switch-offer,.core-flow,.core-flow button,.setup-examples article) { border-radius:3px; }
body[data-vertical=host] .plan-card { border-top:3px solid #4d5158; }
body[data-vertical=host] .plan-overview button.is-selected { border-color:#6b6f76;box-shadow:0 4px 0 #9fa4aa; }
body[data-vertical=host] .flow-list li>span { border-radius:3px;background:#272a2e;color:#dadde2;box-shadow:0 0 0 1px #94999f; }
body[data-vertical=host] .faq-list details { border-color:#b3b6bb; }

/* The first chapter stays dark; the later explanatory chapters are silver. */
body[data-vertical=host] .night-section { background:#1c1d20;border-top:1px solid #85898f;color:#f3f4f5; }
body[data-vertical=host] .night-section .section-kicker { color:#a9adb3; }
body[data-vertical=host] .night-section .section-lead { color:#bdc1c6; }
body[data-vertical=host] .night-section h2 mark { background:none;border-bottom-color:#9298a0; }
body[data-vertical=host] .night-stage { border:1px solid #95999f;border-radius:4px;background:#14171b;box-shadow:6px 6px 0 #aeb3bb18,0 18px 30px #0003; }
body[data-vertical=host] :is(.stage-topline,.stage-toolbar,.night-controls,.night-relay,.stage-caption) { background:#16181b;border-color:#82878f55; }
body[data-vertical=host] .night-stage .night-floor { background:linear-gradient(132deg,transparent 43%,#c7ccd316 43.2%,transparent 72%),radial-gradient(ellipse at 45% 0,#4f5359 0,#202428 46%,#101215 100%); }
body[data-vertical=host] .night-stage .lounge-arch { background:linear-gradient(135deg,#c3c9d118,transparent);border-color:#c4cad166;border-radius:2px;box-shadow:10px 0 0 #aeb5be10; }
body[data-vertical=host] .night-stage .floor-counter { background:linear-gradient(115deg,#575c64,#262a30);border-color:#b6bbc3;box-shadow:0 8px 0 #0d0e11; }
body[data-vertical=host] .night-stage .floor-table { background:linear-gradient(120deg,#797d83,#30343a);border-color:#b6bac1;border-radius:2px; }
body[data-vertical=host] .night-stage .beam-gold { background:linear-gradient(#edf0f5a1,#bdc5d03b 45%,transparent 90%); }
body[data-vertical=host] .night-stage .beam-blue { background:linear-gradient(#c4cedc8c,#93a0b132 45%,transparent 90%); }
body[data-vertical=host] .night-stage .show-callout { border-radius:2px; }
body[data-vertical=host] .night-controls button { border-radius:3px; }
body[data-vertical=host] .night-controls button[aria-pressed=true] { background:#d5d8dd;color:#292e35;border-color:#e6e9ed; }
body[data-vertical=host] .night-controls button[aria-pressed=true] small { color:#5f666f; }
body[data-vertical=host] .night-section .fineprint,body[data-vertical=host] .stage-bottom p { color:#babec4; }
body[data-vertical=host] .night-section :is(.stage-play,.stage-replay) { border-color:#818891;background:#2a2d33;color:#dfe2e7;border-radius:3px; }
body[data-vertical=host] .night-next-chapter { color:#dce0e5;background:#2d3137;border-color:#7f858e;border-radius:3px; }
body[data-vertical=host] .night-next-chapter small { color:#b5bcc6; }
body[data-vertical=host] .night-next-chapter b { background:#cfd3d8;color:#323840;border-radius:2px; }

/* Separate colors communicate acceptance and stop states inside the devices. */
body[data-vertical=host] .host-demo-section { --host-gold:#d0d4da;--host-blue:#bac5d0; }
body[data-vertical=host] .host-demo-showcase { border-color:#8e939a;border-radius:4px;background:linear-gradient(145deg,#32363d,#171a1e 75%);box-shadow:5px 6px 0 #acb0b72b;color:#eff1f3; }
body[data-vertical=host] .host-demo-selector>button { border-radius:3px;background:#41474f7a;border-color:#949aa35c; }
body[data-vertical=host] .host-demo-selector>button[aria-pressed=true] { background:linear-gradient(115deg,#e8ebee,#c5c9cf);border-color:#e0e4e8;color:#2f353c; }
body[data-vertical=host] .host-demo-selector>button[aria-pressed=true] small { color:#6a727b; }
body[data-vertical=host] .host-demo-step { border-radius:2px; }
body[data-vertical=host] .host-demo-device-frame { background:linear-gradient(145deg,#50565ea6,#262a2fee);border-color:#121418;box-shadow:0 0 0 1px #949ca658,inset 0 1px 0 #dce1e72b,0 15px 21px #0003; }
body[data-vertical=host] .host-demo-reception { border-color:#82c8b078;background:#6fb7a31c;color:#c7f1e4;border-radius:4px; }
body[data-vertical=host] .host-demo-reception>i { background:#a7e3cf;box-shadow:0 0 8px #8ed9bd40; }
body[data-vertical=host] .host-demo-device[data-open=false] .host-demo-reception { border:1px dashed #d5bc8f;background:#ad84451c;color:#f1dfbe; }
body[data-vertical=host] .host-demo-device[data-open=false] .host-demo-reception>i { background:#d9bd8d;box-shadow:none;border-radius:1px; }
body[data-vertical=host] .host-demo-stopped { background:#282c31eb;border:1px dashed #d6ba88;color:#f1d7aa;border-radius:4px; }
body[data-vertical=host] .host-demo-stopped>span { border-color:#d9bc8b; }
body[data-vertical=host] .host-demo-signal { stroke:#c8d3da;filter:drop-shadow(0 0 3px #b7c4ce); }
body[data-vertical=host] .host-demo-signal-order { stroke:#dce0e5;filter:drop-shadow(0 0 3px #cdd2d866); }
body[data-vertical=host] .host-demo-ledger { background:#f2f3f5;border-color:#b6bbc2;border-radius:3px;color:#373f48;box-shadow:0 8px 20px #0002; }
body[data-vertical=host] .host-demo-ledger::before { background:linear-gradient(90deg,transparent,#aab0b8,#eceff2,#aab0b8,transparent); }
body[data-vertical=host] .host-demo-record-mark { background:#e2e6ea;border-color:#b6bcc3;color:#575f6a;border-radius:2px; }
body[data-vertical=host] .host-demo-tour-controls { background:#191d22;border-color:#7f879244; }
body[data-vertical=host] .host-demo-tour-controls button { background:#d7dbe0;border-color:#a2aab4;color:#363e47;border-radius:3px; }
body[data-vertical=host] .host-demo-tour-controls button:hover:not(:disabled) { background:#e9ecef; }
body[data-vertical=host] .host-demo-tour-controls button:disabled { background:#484d55;color:#cdd2d8;border-color:#838b95; }
body[data-vertical=host] .host-demo-progress>span { background:linear-gradient(90deg,#a2abb5,#e9ebef); }
body[data-vertical=host] .host-demo-setting-tags>span { border-radius:3px; }
body[data-vertical=host] .cast-section { background:linear-gradient(135deg,#34383f,#15181b 75%); }
body[data-vertical=host] .cast-device-frame { border-color:#0f1114;background:#0f1114;border-radius:15px;box-shadow:0 18px 35px #07090c66,0 0 0 1px #a9aeb64d; }
body[data-vertical=host] .cast-cards>button { border-radius:3px; }
body[data-vertical=host] :is(.statement,.contact-section) { background-color:#1c1f24;background-image:linear-gradient(120deg,transparent 58%,#c3c9d10b 58.1%,transparent 75%); }
body[data-vertical=host] .contact-bubble { border-radius:12px 12px 2px 12px;background:#dce0e4;color:#343a42;border-color:#959ca5; }
body[data-vertical=host] .contact-bubble::after { background:#dce0e4;border-color:#959ca5; }
body[data-vertical=host] .document-cta { border-radius:3px;border-color:#939aa499; }
body[data-vertical=host] .footer { background:#e5e7ea; }
body[data-vertical=host] .footer .wordmark>span { color:#626971; }

@media(max-width:540px) {
  body[data-vertical=host] .topbar { border-radius:3px; }
  body[data-vertical=host] .vertical-seal>span { letter-spacing:1.8px; }
  body[data-vertical=host] .hero-card { border-radius:3px; }
  body[data-vertical=host] .hero-card::before { width:3px; }
  body[data-vertical=host] .night-stage { box-shadow:4px 4px 0 #aeb3bb18; }
}
@media(max-width:350px) {
  body[data-vertical=host] .vertical-seal>span { letter-spacing:1.2px; }
  body[data-vertical=host] .hero-product { font-size:8px;letter-spacing:0; }
  body[data-vertical=host] .hero-bubble { border-radius:9px 9px 9px 2px; }
}
