/* Shared Ideal brand treatment. Business-card navy #09192f with burgundy and coral from Ideal_POS_Postcard_9x6.pdf. */
:root {
  --ink: #09192f;
  --panel: #10243d;
  --raised: #18324f;
  --burgundy: #8b2c3b;
  --coral: #e5566a;
  --navy: #f8f9fb;
  --accent: #8b2c3b;
  --paper: #09192f;
  --muted: #bbc5cf;
  --line: #394654;
  --blue: #f17d8d;
  --light: #10243d;
  color-scheme: dark;
}
body { background: var(--ink); color: #f8f9fb; }
h1, h2 { font-weight: 800; letter-spacing: -.05em; }
h1 em { color: var(--coral); }
h3 { font-weight: 700; }
.eyebrow { color: #c5ced7; letter-spacing: .18em; }
.dot { background: var(--coral); }
:focus-visible { outline-color: #f996a4; }
header { height: 116px; background: #09192f; border-bottom: 1px solid var(--line); gap: 24px; }
html { scroll-padding-top: 132px; }
header nav a { color: #e5e9ee; }
header nav a:hover, .text-link:hover, .text-button:hover { color: #ff9cac; }
.button { background: var(--burgundy); color: #fff; border: 1px solid #bc4b5d; font-weight: 700; border-radius: 5px; }
.button:hover { background: #a33548; }
.menu, .close { color: #fff; }
/* A CSS badge preserves the exact supplied logo artwork and its proportions. */
.logo-frame, header .logo-frame, footer .logo-frame {
  display: grid; place-items: center; position: relative; overflow: hidden;
  width: 224px; height: 94px; aspect-ratio: auto; flex-shrink: 0;
  border-radius: 50%; background: #fff; border: 2px solid #8b2c3b;
  box-shadow: 0 0 0 4px #ffffff0a, 0 8px 24px #0005;
}
.logo-frame img {
  position: static; display: block; width: 90%; height: 84%; max-width: 100%;
  object-fit: contain; left: auto; top: auto;
}
.page-brand .logo-frame { width: 260px; height: 112px; }
.hero { background: var(--ink); }
.hero-copy { padding-top: 56px; padding-bottom: 48px; }
.intro, .lead { color: var(--muted); }
.hero-phone { color: var(--muted); }
.hero-phone a, .partner-identity strong { color: #fff; }
.hero-phone a:hover { color: #ff9cac; }
.marketing-site .hero-visual { background: #10243d; border-left: 7px solid var(--burgundy); }
.marketing-site .hero-visual .terminal { object-fit: cover; object-position: 63% center; }
.marketing-site .hero-visual:after { background: linear-gradient(180deg,#09192f30,transparent 40%,#09192fb8); mix-blend-mode: normal; }
.marketing-site .visual-label { display: flex; gap: 11px; align-items: center; padding: 13px 16px; background: var(--ink); color: #fff; font-weight: 800; font-size: 11px; }
.visual-bottom { color: #fff; }
.float-card { background: #09192fed; border-color: #5a6572; color: #fff; box-shadow: 0 12px 32px #0005; }
.check { background: var(--burgundy); color: #fff; }
.ribbon { background: var(--burgundy); color: #fff; padding-top: 28px; padding-bottom: 28px; }
.ribbon b { color: #ffc1cb; }
.feature-icon { color: #f17d8d; }
.feature-grid a { color: #f7c1c9; }
.feature-grid a:hover { color: #fff; }
.section-top, .feature-grid article { border-color: var(--line); }
.index { color: #acb8c5; }
.restaurant-section { background: #122b48; }
.restaurant-copy .eyebrow { color: #f4a5b2; }
.restaurant-copy>p:not(.eyebrow), #type-panel p { color: #c8d0da; }
.tabs button { border-color: #758394; color: #e4e9ee; }
.tabs button:hover { border-color: #f17d8d; }
.tabs button[aria-selected=true] { background: var(--burgundy); border-color: #dd7585; color: #fff; }
.hardware { background: #0d2039; }
.hardware-card { background: #17314f; border-color: #465568; color: #fff; }
.hardware-card:hover { border-color: #dc7181; background: #1d3b5e; }
.product-number { color: #c2ccd8; }
.product-title>span { color: #f48a9a; }
.hardware-card img { border-radius: 5px; }
.about { background: var(--burgundy); }
.about .eyebrow { color: #ffccd4; }
.about p:not(.eyebrow) { color: #f1dce0; }
.about .button { background: #09192f; border-color: #cc7b89; }
.about .button:hover { background: #18324f; }
.steps article { border-color: #bc6b78; }
.steps article>span { color: #ffc4cf; }
.contact { background: #10243d; border-top: 5px solid var(--burgundy); }
.contact h2 { color: #fff; }
.contact h2::after { content: ''; display: block; width: 70px; height: 5px; margin-top: 30px; background: var(--coral); }
.contact-copy>p:not(.eyebrow), .contact-detail { color: #c5ced8; }
.contact-copy>a:hover { color: #ff9cac; }
input, select, textarea { background: #09192f; color: #fff; border-color: #637284; }
input::placeholder, textarea::placeholder { color: #b0bdcb; opacity: 1; }
input:focus, select:focus, textarea:focus { outline-color: #f996a4; }
.optional, .form-note, .consent { color: #c0cbd7; }
.consent input { accent-color: var(--coral); }
.partner-identity img, .footer-partner img, .partner img {
  background: #fff; border-radius: 6px; padding: 8px; object-fit: contain;
}
footer { background: #071323; border-top: 1px solid var(--line); }
footer>small { color: #a9b4c1; }
dialog { background: #122b48; color: #fff; border: 1px solid #5e6a79; }
dialog::backdrop { background: #040d19d9; }
dialog .eyebrow { color: #f4a5b2; }
.skip { background: #fff; color: #09192f; }
.arrow-icon { display: inline-block; width: .95em; height: .95em; flex-shrink: 0; vertical-align: -.08em; margin-left: .15em; }
.simple { border-top: 4px solid var(--burgundy); padding-top: 32px; }
.simple p a { color: #ffc1cd; text-decoration: underline; }

/* The training page shares the brand without changing lessons or saved progress. */
.training-site .hero-visual { background: #123349; border-left: 7px solid var(--burgundy); }
.training-site .hero-visual:after { background: #123349; }
.training-site .hero-meta b { color: #fff; }
.training-site .resume { color: #ff9cac; }
.training-site .hero-play { background: #10243d; color: #fff; border-color: #637284; }
.training-site .hero-play small { color: #bdc8d4; }
.training-site .path { background: transparent; color: #fff; }
.training-site .path:hover h3, .training-site .path:hover .path-footer { color: #ff9cac; }
.training-site .path:hover { border-color: #f17d8d; }
.training-site .lesson, .training-site .lesson-sidebar { background: #09192f; }
.training-site .video-shell { background: #040d19; }
.training-site .icon-button, .training-site select { background: #18324f; color: #fff; }
.training-site .text-button { color: #f8c1cb; }
.training-site .search input { color: #fff; }
.training-site .chapter { background: #09192f; color: #fff; }
.training-site .chapter:hover { background: #1d3b5e; }
.training-site .chapter.active { background: #442631; border-left-color: #ed8293; }
.training-site .chapter.active .name { color: #ffc2ce; }
.training-site .chapter.reviewed .number { color: #9cddbc; }
.training-site .lesson-steps li span, .training-site .transcript-item button { color: #ff9cac; }
.training-site progress { background: #394654; accent-color: #e5566a; }
.training-site progress::-webkit-progress-bar { background: #394654; }
.training-site progress::-webkit-progress-value { background: #e5566a; }
.training-site .practice { background: #632532; }
.training-site .practice .check { background: transparent; border-color: #ac6875; }
.training-site .practice-copy>p:not(.eyebrow), .training-site .check small { color: #efdae0; }
.training-site .support { background: #122b48; }
.training-site .phone span, .training-site .support-site { color: #ff9cac; }
.training-site #toast { background: #8b2c3b; border: 1px solid #f996a4; }

@media (min-width: 761px) and (max-width: 1100px) {
  header { gap: 16px; padding-left: 3%; padding-right: 3%; }
  header .logo-frame { width: 178px; height: 80px; }
  header nav { gap: 14px; font-size: 12px; }
  header nav a { white-space: nowrap; }
  header>.button { font-size: 12px; padding: 12px 14px; gap: 14px; }
}
@media (max-width: 760px) {
  header { height: 92px; gap: 12px; }
  header .logo-frame, .training-site header .logo-frame { width: 154px; height: 70px; }
  footer .logo-frame { width: 202px; height: 88px; }
  html { scroll-padding-top: 108px; }
  nav { top: 92px; background: #10243d; border-color: #465568; }
  .hero-copy { padding: 42px 6%; }
  .marketing-site h1 { font-size: clamp(38px, 11.4vw, 70px); }
  .training-site .actions { flex-wrap: wrap; gap: 20px; }
  .marketing-site .hero-visual { min-height: 470px; border-left: 0; border-top: 5px solid var(--burgundy); }
  .marketing-site .hero-visual .terminal { object-fit: cover; object-position: 62% 58%; }
  .marketing-site .visual-label { left: 6%; }
  .marketing-site .float-card { left: 6%; }
  .training-site .hero-visual { border-left: 0; border-top: 5px solid var(--burgundy); }
}
@media (max-width: 360px) {
  header { gap: 8px; }
  header .logo-frame { width: 136px; height: 64px; }
  header>.button { white-space: nowrap; padding: 11px 8px; font-size: 11px; gap: 7px; }
  .menu { padding: 3px; font-size: 22px; }
}
@media print {
  .training-site .practice { background: white; color: black; }
  .training-site .practice-copy>p:not(.eyebrow), .training-site .check small { color: #333; }
}

/* White writing surfaces add contrast while the workspace stays business-card navy. */
@media screen {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select, textarea, .field select, .field textarea, .training-site select, .training-site .search input {
    color-scheme: light;
    background: #ffffff;
    color: #09192f;
    border-color: #c8d3df;
    caret-color: #8b2c3b;
    box-shadow: 0 1px 3px #00000012;
  }
  input::placeholder, textarea::placeholder, .field input::placeholder, .field textarea::placeholder { color:#65768b; opacity:1; }
  input[readonly], .field input[readonly], input:disabled, select:disabled, textarea:disabled { background:#e9eef4; color:#45576e; }
  .search, .search-field, .password, .password-input, .training-site .search { background:#fff; color:#45576e; border-color:#c8d3df; color-scheme:light; }
  .password button, .password-input button, .search > svg, .search-field > svg, .training-site .search > svg { color:#45576e; }
  .password button:hover, .password-input button:hover { background:#edf1f6; }
  .password input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  .password-input input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  .search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  .search-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]) { box-shadow:none; }
  input:focus, select:focus, textarea:focus { border-color:#e5566a; outline-color:#e5566a; }
  .search:focus-within, .search-field:focus-within, .password:focus-within, .password-input:focus-within { outline:3px solid #e5566a; outline-offset:3px; }
}