@import url("brand-tokens.b941f3a94112.css?v=cobalt-20260920-fonts");
:root {
  --teal: var(--ssc-primary);
  --teal-dark: var(--ssc-primary);
  --blue: var(--ssc-action);
  --blue-dark: #0053b5;
  --gold: var(--ssc-accent);
  --paper: var(--ssc-background);
  --ink: var(--ssc-ink);
  --muted: var(--ssc-muted);
  --line: var(--ssc-line);
  --white: #fff;
  --serif: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Public SaaS plan selection */
.preview-plan-grid {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.preview-plan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid rgba(17, 66, 59, .16);
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 18px 45px rgba(17, 66, 59, .08);
}
.preview-plan-card h2, .preview-plan-card p { margin: 0; }
.preview-plan-card ul { padding-left: 20px; margin: 0 0 8px; }
.preview-plan-card .preview-button { margin-top: auto; text-align: center; }
.preview-plan-price { display: flex; align-items: baseline; gap: 6px; color: #123f39; }
.preview-plan-price strong { font-family: var(--ssc-heading); font-size: 46px; line-height: 1; }
@media (max-width: 820px) {
  .preview-plan-grid { grid-template-columns: 1fr; width: min(100% - 28px, 560px); }
}

/* Management & Growth Review */
.preview-review{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr);gap:clamp(28px,5vw,72px);max-width:1180px;margin:32px auto 72px;padding:clamp(24px,4vw,52px);background:#e9f0ed;border:1px solid rgba(21,63,55,.12);border-radius:24px}
.preview-review__intro h2{font-family:var(--ssc-heading);font-size:clamp(30px,3.2vw,46px);line-height:1.05;margin:8px 0 18px;color:#153f37}
.preview-review__intro p,.preview-review__intro li{color:#506b65;line-height:1.55}
.preview-review__intro ul{padding-left:20px;margin-top:24px}
.preview-review__form{background:#fff;border:1px solid rgba(21,63,55,.14);border-radius:18px;padding:clamp(20px,3vw,36px);box-shadow:0 16px 40px rgba(21,63,55,.08)}
.preview-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.preview-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.preview-field--wide{grid-column:1/-1}
.preview-field label{font-size:13px;font-weight:800;letter-spacing:.03em;color:#294f47}
.preview-field input:not([type=checkbox]):not([type=radio]),.preview-field select,.preview-field textarea{box-sizing:border-box;width:100%;padding:12px 13px;border:1px solid #bdcbc7;border-radius:8px;background:#fff;color:#173f37;font:inherit}
.preview-field textarea{resize:vertical;min-height:118px}
.preview-field input:focus,.preview-field select:focus,.preview-field textarea:focus{outline:3px solid rgba(71,124,145,.22);border-color:#477c91}
.preview-checkbox{display:flex;align-items:flex-start;gap:10px;font-weight:500!important;letter-spacing:0!important;line-height:1.4}
.preview-checkbox input{width:18px;height:18px;margin-top:1px;accent-color:#477c91}
.preview-field-errors,.preview-form-errors{color:#a02929;font-size:13px}
.preview-form-errors{background:#fff1ef;border:1px solid #e5a39b;border-left:5px solid #a02929;border-radius:12px;margin:0 0 20px;padding:16px 18px}
.preview-form-errors strong{display:block;font-size:18px;margin-bottom:4px}
.preview-form-errors p{color:#682020;margin:0 0 8px}
.preview-form-errors a{color:#762020;font-weight:700;text-decoration:underline}
.preview-form-errors:focus{outline:3px solid rgba(71,124,145,.32);outline-offset:3px}
.self-service-signup{margin-top:48px}.self-service-signup h1,.payment-shell h1{font:600 clamp(38px,5vw,64px)/1 var(--ssc-heading);margin:8px 0 18px}.signup-plan-summary,.payment-card dl{display:grid;gap:12px;margin:28px 0}.signup-plan-summary div,.payment-card dl div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #d8dfdc;padding-bottom:10px}.signup-plan-summary dt,.payment-card dt{color:#61736f}.signup-plan-summary dd,.payment-card dd{font-weight:800;margin:0}.payment-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:64px;align-items:center;max-width:1180px;margin:60px auto;padding:0 28px}.payment-card{background:#fff;border:1px solid #d8dfdc;border-radius:20px;box-shadow:0 18px 50px rgba(16,54,47,.12);padding:34px}.payment-card h2{font:600 30px var(--ssc-heading);margin:18px 0 0}.payment-mode{display:inline-block;background:#e7f3ef;color:#135a4c;border-radius:99px;padding:7px 11px;font-weight:800;font-size:12px}.payment-price{color:#153f37;font:600 54px var(--ssc-heading);margin:12px 0}.payment-price small{font:500 15px system-ui;color:#61736f}.payment-card .preview-button{width:100%;margin-top:18px}@media(max-width:800px){.payment-shell{grid-template-columns:1fr;gap:24px;margin-top:34px}.self-service-signup{margin-top:24px}}
.preview-field-errors ul,.preview-form-errors ul{margin:0;padding-left:18px}
.preview-field--error input:not([type=radio]),.preview-field--error select,.preview-field--error textarea{border-color:#a02929}
.preview-form-privacy{font-size:12px;line-height:1.45;color:#61736f;margin:18px 0}
.preview-form-success{border-left:5px solid #2d8061;background:#eef8f3;padding:22px;border-radius:10px;color:#173f37}
.preview-form-success strong{font-family:var(--ssc-heading);font-size:25px}
.preview-form-success p{line-height:1.55;margin-bottom:0}
@media(max-width:800px){.preview-review{grid-template-columns:1fr;margin-inline:16px}.preview-form-grid{grid-template-columns:1fr}.preview-field--wide{grid-column:auto}}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fbf9f4; font-family: var(--sans); line-height: 1.5; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.preview-skip { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; color: white; background: var(--teal-dark); transform: translateY(-150%); }
.preview-skip:focus { transform: none; }
.preview-notice { position: fixed; z-index: 30; right: 15px; bottom: 15px; padding: 7px 11px; color: #4d3608; background: #f8d889; border-radius: 6px; font-size: 11px; font-weight: 750; }

.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1440px; min-height: 76px; margin: auto; padding: 10px clamp(24px, 5vw, 70px); border-bottom: 1px solid var(--line); }
.preview-logo { display: grid; grid-template-rows: 35px 14px; width: 340px; height: 51px; overflow: hidden; text-decoration: none; }
.preview-logo-art { display: block; height: 35px; overflow: hidden; }
.preview-logo-art img { width: 315px; height: 63px; object-fit: contain; object-position: left top; transform: translateY(-5px); }
.preview-logo small { align-self: start; margin: -1px 0 0 74px; color: var(--blue); font-size: 11px; font-weight: 750; line-height: 1; white-space: nowrap; }
.preview-nav { display: flex; align-items: center; gap: clamp(17px, 2vw, 30px); font-size: 13px; font-weight: 650; }
.preview-nav a { position: relative; text-decoration: none; }
.preview-nav a:not(.preview-button)::after { position: absolute; right: 0; bottom: -6px; left: 0; height: 2px; content: ""; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.preview-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.preview-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 22px; color: white; background: var(--blue); border: 0; border-radius: 5px; font: inherit; font-weight: 750; text-align: center; text-decoration: none; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.preview-button:hover { background: var(--blue-dark); transform: translateY(-2px); }
.preview-button--small { min-width: 190px; min-height: 42px; padding: 7px 16px; font-size: 12px; line-height: 1.15; }
.preview-button--full { width: 100%; }
.preview-button--trial { background: var(--gold); color: var(--ink); }
.preview-button--ghost { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.preview-button--ghost:hover { background: rgba(0, 107, 230, .08); color: var(--blue); }
.preview-nav a:not(.preview-button)[href*="login"] { font-weight: 650; }
.preview-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.preview-hero-actions .preview-hero-cta { min-width: 0; }
.preview-hero-reassure { margin: 12px 0 0; font-size: 14px; color: #506b65; }
.preview-review--closing { align-items: center; }
.preview-review__talk { margin-top: 10px; font-size: 15px; }
.preview-review__talk a { color: var(--blue); font-weight: 700; }
/* Sign-up, walkthrough 27 option A: one column of choices, then the fields
   beside a summary that carries the price, the date and the button. */
.signup-a { max-width: 1040px; margin: 40px auto; padding: 0 20px; }
.signup-a h1 { font: 600 clamp(32px, 4.4vw, 52px)/1.05 var(--ssc-heading); margin: 0 0 8px; color: var(--ink); }
.signup-a__lead { color: #506b65; margin: 0 0 24px; font-size: 17px; }
.signup-a__count { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.signup-a__count label { font-weight: 800; color: var(--ink); }
.signup-a__count input { width: 110px; font: inherit; font-size: 18px; padding: 9px 12px; border: 1px solid #bdcbc7; border-radius: 8px; }
.signup-a__plans, .signup-a__term { border: 0; margin: 0; padding: 0; }
.signup-a__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.signup-a__plan { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 14px; background: #fff; border: 1px solid #d8dfdc; border-radius: 12px; cursor: pointer; }
.signup-a__plan input { position: absolute; opacity: 0; pointer-events: none; }
.signup-a__plan.is-selected { border: 2px solid var(--blue); background: #f2f7ff; }
.signup-a__plan:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.signup-a__plan strong { font-size: 17px; color: var(--ink); }
.signup-a__plan small { color: #61736f; line-height: 1.4; }
.signup-a__price { font-size: 24px; font-weight: 800; color: var(--ink); }
.signup-a__price small { font-size: 14px; font-weight: 500; }
.signup-a__tag { position: absolute; top: -11px; left: 12px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.signup-a__term { display: inline-flex; border: 1px solid #cfddec; border-radius: 999px; overflow: hidden; margin-bottom: 22px; }
.signup-a__term-option { display: flex; align-items: center; gap: 6px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.signup-a__term-option:has(input:checked) { background: var(--ink); color: #fff; }
.signup-a__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.signup-a__fields { display: grid; gap: 14px; }
.signup-a__summary { position: sticky; top: 16px; background: #f7f9fc; border: 1px solid #d8dfdc; border-radius: 14px; padding: 18px; }
.signup-a__row { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; }
.signup-a__big { font-size: 24px; font-weight: 800; }
.signup-a__summary p { color: #506b65; font-size: 14px; line-height: 1.5; margin: 10px 0; }
.signup-a__small { font-size: 13px !important; }
.signup-a .signup-help { margin-top: 26px; }
.signup-a .signup-help summary { cursor: pointer; list-style: none; }
.signup-a__visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .signup-a { margin-top: 20px; }
  .signup-a__plans { grid-template-columns: 1fr; }
  .signup-a__grid { grid-template-columns: 1fr; }
  .signup-a__summary { position: static; }
}
.preview-button--trial:hover { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.signup-help { margin-top: 28px; border: 1px solid #d8dfdc; border-radius: 16px; background: #fff; box-shadow: 0 12px 34px rgba(16,54,47,.10); overflow: hidden; }
.signup-help__head { background: var(--ink); color: #fff; font-weight: 800; padding: 12px 16px; }
.signup-help__log { padding: 12px 16px; display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.signup-help__log p { margin: 0; padding: 8px 11px; border-radius: 10px; background: #f3f6f5; line-height: 1.45; }
.signup-help__log p.mine { background: #e7f0ff; margin-left: 32px; }
.signup-help__suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.signup-help__suggest button { border: 1px solid #cfddec; background: #fff; color: var(--blue); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 14px; cursor: pointer; }
.signup-help__form { display: flex; gap: 8px; border-top: 1px solid #d8dfdc; padding: 10px 12px; }
.signup-help__form input { flex: 1; min-width: 0; font: inherit; padding: 9px 11px; border: 1px solid #cfddec; border-radius: 8px; }
.signup-help__form .preview-button { min-height: 40px; padding: 7px 14px; }
.preview-button:focus-visible, .preview-nav a:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.preview-hero { display: grid; grid-template-columns: minmax(390px, .86fr) minmax(560px, 1.14fr); align-items: center; gap: clamp(35px, 5vw, 75px); max-width: 1440px; min-height: 620px; margin: auto; padding: 50px clamp(24px, 5vw, 70px) 155px; }
.preview-hero-copy { align-self: center; }
.preview-hero h1 { max-width: 590px; margin: 0; color: var(--teal-dark); font-family: var(--serif); font-size: clamp(48px, 3.85vw, 56px); font-weight: 600; letter-spacing: -.038em; line-height: .98; }
.preview-lead { margin: 17px 0 20px; color: var(--muted); font-size: 17px; }
.preview-hero-cta { min-width: 290px; font-size: 14px; }
.preview-hero-features { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 29px; }
.preview-hero-features article { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 13px; background: rgba(255,255,255,.74); border: 1px solid var(--line); border-radius: 7px; }
.preview-feature-icon { display: inline-flex; flex: 0 0 45px; align-items: center; justify-content: center; width: 45px; height: 45px; color: white; background: var(--blue); border-radius: 50%; font-size: 18px; }
.preview-hero-features h2 { margin: 0 0 2px; color: var(--teal-dark); font-size: 13px; }
.preview-hero-features p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.35; }

/* Exact device construction: 2px shell + 3px screen inset. */
.preview-product-stage { --tilt-x: 0deg; --tilt-y: 0deg; position: relative; align-self: center; padding: 0 0 66px 62px; perspective: 1500px; }
.preview-laptop { position: relative; z-index: 2; width: 100%; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; transition: transform .22s ease-out; }
.preview-laptop-screen { position: relative; overflow: hidden; padding: 3px; background: #050606; border: 2px solid #111412; border-radius: 12px 12px 4px 4px; box-shadow: 0 18px 36px rgba(20,32,28,.2), inset 0 0 0 1px #454a47; }
.preview-laptop-camera { position: absolute; z-index: 5; top: 3px; left: 50%; width: 3px; height: 3px; background: #1f3537; border-radius: 50%; transform: translateX(-50%); }
.preview-laptop .preview-dashboard { height: 390px; padding: 13px; overflow: hidden; background: white; border: 0; border-radius: 7px; box-shadow: none; }
.preview-laptop-base { position: relative; left: -5%; width: 110%; height: 13px; background: linear-gradient(180deg, #f1f2f1 0%, #c9cccb 35%, #858b88 100%); border-top: 1px solid white; border-radius: 1px 1px 48% 48% / 1px 1px 9px 9px; box-shadow: 0 11px 18px rgba(20,32,28,.18); }
.preview-laptop-base::after { position: absolute; right: 3%; bottom: -3px; left: 3%; height: 3px; content: ""; background: #747a77; border-radius: 0 0 50% 50%; }
.preview-laptop-base span { display: block; width: 17%; height: 4px; margin: auto; background: linear-gradient(#929895, #d0d2d1); border-radius: 0 0 5px 5px; }
.preview-dashboard-bar { display: flex; align-items: center; gap: 7px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.preview-dashboard-bar img { width: 84px; height: 20px; object-fit: contain; object-position: left; }
.preview-dashboard-bar strong { margin-right: auto; color: var(--teal); font-size: 10px; }
.preview-dashboard-bar > span { padding: 3px 7px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; font-size: 8px; }
.preview-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 10px 0; }
.preview-kpis article { padding: 8px; background: #f7f9f7; border: 1px solid #e5eae6; border-radius: 5px; }
.preview-kpis small, .preview-kpis span { display: block; color: var(--muted); font-size: 7px; }
.preview-kpis strong { display: block; margin: 2px 0; color: var(--teal-dark); font-family: var(--serif); font-size: 15px; }
.preview-kpis span { color: #287a51; }
.preview-chart { display: flex; align-items: end; gap: 8px; height: 115px; padding: 19px 15px 0; background: repeating-linear-gradient(0deg, transparent 0 27px, #e8ece9 28px); border-radius: 5px; }
.preview-chart i { flex: 1; height: 35%; background: var(--blue); border-radius: 3px 3px 0 0; }
.preview-chart i:nth-child(2) { height: 48%; }.preview-chart i:nth-child(3) { height: 42%; }.preview-chart i:nth-child(4) { height: 67%; }.preview-chart i:nth-child(5) { height: 58%; }.preview-chart i:nth-child(6) { height: 75%; }.preview-chart i:nth-child(7) { height: 70%; }.preview-chart i:nth-child(8) { height: 89%; background: var(--teal); }
.preview-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.preview-dashboard-grid article { padding: 9px; background: #f7f9f7; border: 1px solid #e5eae6; border-radius: 5px; }
.preview-dashboard-grid strong, .preview-dashboard-grid span { display: block; font-size: 8px; }
.preview-dashboard-grid span { color: var(--muted); }
.preview-dashboard-grid b { color: var(--teal-dark); background: var(--gold); border-radius: 50%; }
.preview-lines { height: 22px; margin-top: 8px; background: repeating-linear-gradient(0deg, #d8e1da 0 1px, transparent 1px 7px); }
.preview-demo-label { margin: 7px 0 0; color: var(--muted); font-size: 7px; text-align: right; }

/* Exact phone construction: 3px frame around the screen. */
.preview-phone { position: absolute; z-index: 6; left: 0; bottom: 20px; width: 151px; height: 316px; padding: 3px; overflow: visible; color: var(--ink); background: linear-gradient(145deg, #393e3b, #050606); border: 1px solid #050606; border-radius: 27px; box-shadow: 0 17px 32px rgba(20,32,28,.3), inset 0 0 0 1px #737875; }
.preview-phone-screen { height: 100%; padding: 16px 8px 9px; overflow: hidden; background: var(--paper); border-radius: 23px; }
.preview-phone-speaker { position: absolute; z-index: 8; top: 5px; left: 50%; width: 45px; height: 14px; background: #050606; border-radius: 0 0 9px 9px; transform: translateX(-50%); }
.preview-phone::before { position: absolute; top: 62px; left: -3px; width: 2px; height: 35px; content: ""; background: #747a77; border-radius: 2px 0 0 2px; box-shadow: 0 43px 0 #747a77; }
.preview-phone::after { position: absolute; top: 86px; right: -3px; width: 2px; height: 50px; content: ""; background: #747a77; border-radius: 0 2px 2px 0; }
.preview-phone-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.preview-phone-nav img { width: 89px; height: 22px; object-fit: contain; object-position: left; }
.preview-phone-nav span { color: var(--teal); font-size: 9px; }
.preview-phone h2 { margin: 0; color: var(--teal-dark); font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: -.025em; line-height: 1; }
.preview-phone p { margin: 8px 0; color: var(--muted); font-size: 7px; line-height: 1.35; }
.preview-phone-cta { display: block; padding: 7px 4px; color: white; background: var(--blue); border-radius: 4px; font-size: 7px; font-weight: 750; text-align: center; }
.preview-phone-boundary { margin: 8px 0; padding: 6px 3px; color: var(--teal-dark); background: #e1e8e4; border-radius: 4px; font-size: 6px; text-align: center; }
.preview-phone article { display: flex; align-items: center; gap: 5px; padding: 6px; background: white; border: 1px solid var(--line); border-radius: 5px; }
.preview-phone article .preview-feature-icon { flex-basis: 26px; width: 26px; height: 26px; font-size: 9px; }
.preview-phone article strong, .preview-phone article small { display: block; font-size: 6px; }
.preview-phone article small { color: var(--muted); }
.preview-boundary-card { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; margin: 13px 0 0 86px; color: var(--teal-dark); background: #e1e8e4; border-radius: 5px; font-family: var(--serif); font-size: 12px; }

/* Foreground product dashboard, deliberately overlapping the device theatre. */
.preview-application { position: relative; z-index: 10; display: grid; grid-template-columns: 168px 1fr; width: min(1040px, calc(100% - 48px)); margin: -142px max(24px, calc((100vw - 1400px)/2)) 95px auto; overflow: hidden; background: white; border: 1px solid #cbd4ce; border-radius: 8px; box-shadow: 0 20px 45px rgba(20,32,28,.17); }
.preview-application aside { padding: 18px 12px; color: white; background: linear-gradient(180deg, var(--teal), #0b6673); }
.preview-app-logo { display: flex; align-items: center; min-height: 43px; margin-bottom: 18px; padding: 4px; background: var(--paper); border-radius: 4px; }
.preview-application aside .preview-app-logo img { width: 100%; height: 34px; object-fit: contain; }
.preview-application aside nav { display: grid; gap: 5px; }
.preview-application aside nav > * { display: block; padding: 8px 9px; border-radius: 4px; font-size: 10px; }
.preview-application aside nav strong { background: rgba(255,255,255,.2); }
.preview-application aside nav b { display: inline-flex; justify-content: center; width: 17px; color: var(--teal-dark); background: var(--gold); border-radius: 50%; }
.preview-application-main { min-width: 0; padding: 18px; }
.preview-application-heading { display: flex; align-items: center; gap: 8px; }
.preview-application-heading h2 { margin: 0 auto 0 0; font-family: var(--serif); font-size: 19px; }
.preview-application-heading span { padding: 4px 9px; border: 1px solid var(--line); border-radius: 4px; font-size: 9px; }
.preview-application-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.preview-application-kpis article, .preview-application-tables article { padding: 10px; border: 1px solid var(--line); border-radius: 5px; transition: transform .18s ease, border-color .18s ease; }
.preview-application-kpis article:hover, .preview-application-tables article:hover { border-color: #a5b6ad; transform: translateY(-3px); }
.preview-application-kpis small, .preview-application-kpis strong, .preview-application-kpis em { display: block; }
.preview-application-kpis small { font-size: 8px; }.preview-application-kpis strong { margin: 5px 0; color: var(--teal-dark); font-family: var(--serif); font-size: 17px; }.preview-application-kpis em { color: #24794d; font-size: 8px; font-style: normal; }
.preview-application .negative { color: #d4473c !important; }
.preview-application-tables { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 8px; }
.preview-application-tables h3 { margin: 0 0 8px; font-size: 10px; }
.preview-application-tables ol, .preview-application-tables ul { margin: 0; padding: 0; list-style: none; }
.preview-application-tables li { display: flex; justify-content: space-between; gap: 7px; padding: 6px 0; border-bottom: 1px solid #edf0ed; font-size: 8px; }

.preview-brand-statement { display: grid; grid-template-columns: minmax(260px, 430px) minmax(300px, 540px); align-items: center; justify-content: center; gap: 75px; max-width: 1120px; margin: 70px auto 90px; padding: 45px 25px; border-top: 2px solid var(--gold); }
.preview-brand-statement img { width: 100%; }.preview-brand-statement p { margin: 0; color: var(--teal-dark); font-size: clamp(21px, 2vw, 29px); }
.preview-kicker { margin: 0 0 10px; color: var(--teal); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.preview-review { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; margin: 0 auto 60px; padding: 24px 30px; background: #e6eeeb; border-radius: 8px; }
.preview-review h2 { margin: 0; font-family: var(--serif); font-size: clamp(29px, 2.8vw, 42px); font-weight: 600; line-height: 1.02; }.preview-review p { max-width: 710px; margin: 12px 0 0; color: var(--muted); }
.preview-review .preview-kicker { margin-bottom: 7px; }
.preview-review .preview-button { flex: 0 0 auto; min-width: 175px; padding-inline: 19px; white-space: nowrap; }
.preview-footer { display: flex; justify-content: space-between; padding: 25px clamp(24px, 5vw, 70px); color: #d8e3df; background: var(--teal-dark); font-size: 12px; }
.preview-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }

/* Login shares the same brand system. */
.preview-login-page { min-height: 100vh; background: #ecf0eb; }
.preview-login-shell { display: grid; grid-template-columns: minmax(420px,.9fr) minmax(520px,1.1fr); min-height: 100vh; }
.preview-login-story { display: flex; flex-direction: column; justify-content: space-between; gap: 65px; padding: clamp(38px,6vw,85px); color: white; background: radial-gradient(circle at 80% 15%, rgba(71,124,145,.7), transparent 36%), var(--teal-dark); }
.preview-login-logo { display: grid; max-width: 520px; padding: 9px 13px; background: var(--paper); border-radius: 5px; text-decoration: none; }.preview-login-logo span { display: block; height: 55px; overflow: hidden; }.preview-login-logo img { width: 390px; height: 78px; object-fit: contain; object-position: left top; transform: translateY(-7px); }.preview-login-logo small { margin-left: 88px; color: var(--blue); font-size: 12px; font-weight: 750; }
.preview-login-story h1, .preview-login-form h2 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.04; }.preview-login-story h1 { max-width: 630px; font-size: clamp(42px,4.6vw,67px); }.preview-login-story > div > p:last-child { color: #d2dfdb; }
.preview-login-assurances { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }.preview-login-assurances li { padding: 7px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 12px; }
.preview-login-form { align-self: center; width: min(540px,calc(100% - 44px)); margin: 40px auto; padding: 48px; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 45px rgba(20,80,90,.12); }.preview-back-link { display: inline-block; margin-bottom: 38px; color: var(--blue); font-weight: 700; }.preview-login-form h2 { font-size: 42px; }.preview-login-form > p { color: var(--muted); }.preview-login-form form { display: grid; gap: 18px; margin-top: 26px; }.preview-form-field { display: grid; gap: 6px; }.preview-form-field label { color: var(--teal); font-size: 13px; font-weight: 800; }.preview-form-field input { width: 100%; min-height: 50px; padding: 10px 13px; border: 1px solid #bfcac3; border-radius: 4px; font: inherit; }.preview-login-help { margin-top: 22px; font-size: 12px; }.preview-login-boundary { display: grid; margin-top: 22px; padding: 14px; color: var(--muted); background: #eef4f1; border-left: 4px solid var(--gold); font-size: 12px; }.preview-login-boundary strong { color: var(--teal); }

/* Motion changes opacity/position only; it never changes device geometry. */
.motion-ready .preview-header { animation: nav-in .42s ease-out both; }
.motion-ready .preview-hero-copy h1 { animation: rise-in .58s .07s cubic-bezier(.2,.7,.2,1) both; }.motion-ready .preview-lead { animation: rise-in .48s .18s ease-out both; }.motion-ready .preview-hero-cta { animation: rise-in .48s .27s ease-out both; }.motion-ready .preview-hero-features article:first-child { animation: rise-in .45s .37s ease-out both; }.motion-ready .preview-hero-features article:last-child { animation: rise-in .45s .45s ease-out both; }
.motion-ready .preview-laptop { animation: laptop-in .68s .14s cubic-bezier(.2,.75,.2,1) both; }.motion-ready .preview-phone { animation: phone-in .58s .48s cubic-bezier(.2,.75,.2,1) both; }.motion-ready .preview-boundary-card { animation: rise-in .4s .7s ease-out both; }
.motion-ready .preview-chart i { transform-origin: bottom; animation: bar-grow .65s .78s cubic-bezier(.2,.75,.2,1) both; }
.motion-ready .preview-application, .motion-ready .preview-brand-statement, .motion-ready .preview-review { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }.motion-ready .is-visible { opacity: 1; transform: none; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-12px); } } @keyframes rise-in { from { opacity: 0; transform: translateY(16px); } } @keyframes laptop-in { from { opacity: 0; transform: translateX(38px); } } @keyframes phone-in { from { opacity: 0; transform: translateY(30px) rotate(-3deg); } } @keyframes bar-grow { from { transform: scaleY(0); } }

@media (max-width: 1040px) {
  .preview-header { flex-wrap: wrap; }
  .preview-nav { width: 100%; flex-wrap: wrap; gap: 6px 16px; }
  .preview-nav > a:not(.preview-button) { display: inline-flex; align-items: center; min-height: 44px; }
  .preview-hero { grid-template-columns: 1fr; padding-bottom: 80px; }
  .preview-hero h1 { max-width: 670px; font-size: 42px; }
  .preview-product-stage { width: min(760px,100%); margin: auto; }
  .preview-application { width: calc(100% - 40px); margin: 15px 20px 80px; }
  .preview-application-kpis { grid-template-columns: 1fr 1fr; }.preview-application-tables { grid-template-columns: 1fr; }
  .preview-login-shell { grid-template-columns: 1fr; }.preview-login-story { min-height: 500px; }
}
@media (max-width: 680px) {
  .preview-header { min-height: 58px; padding: 7px 17px; }.preview-logo { grid-template-rows: 29px 11px; width: 235px; height: 42px; }.preview-logo-art { height: 29px; }.preview-logo-art img { width: 205px; height: 41px; transform: translateY(-4px); }.preview-logo small { margin: -1px 0 0 48px; font-size: 8px; }.preview-nav .preview-button { min-width: auto; padding: 8px 10px; font-size: 9px; }
  .preview-hero { min-height: auto; gap: 37px; padding: 42px 18px 55px; }.preview-hero h1 { font-size: clamp(31px,9vw,34px); }.preview-lead { font-size: 16px; }.preview-hero-cta { width: 100%; min-width: 0; }.preview-hero-features { grid-template-columns: 1fr; margin-top: 20px; }
  .preview-product-stage { padding: 0 0 50px 27px; }.preview-laptop .preview-dashboard { height: 275px; padding: 7px; }.preview-laptop .preview-dashboard-grid { display: none; }.preview-laptop .preview-chart { height: 80px; }.preview-laptop .preview-kpis strong { font-size: 10px; }.preview-laptop .preview-kpis span { display: none; }
  .preview-phone { bottom: 4px; width: 116px; height: 246px; }.preview-phone h2 { font-size: 12px; }.preview-phone-nav img { width: 70px; }.preview-phone article { display: none; }.preview-boundary-card { min-height: 36px; margin-left: 60px; font-size: 9px; }
  .preview-application { grid-template-columns: 1fr; }.preview-application aside { display: none; }.preview-application-main { padding: 12px; }.preview-application-heading span { display: none; }.preview-application-kpis { grid-template-columns: 1fr 1fr; }.preview-application-kpis strong { font-size: 13px; }
  .preview-brand-statement { grid-template-columns: 1fr; gap: 25px; margin: 35px 18px 55px; padding: 30px 0; }.preview-review { align-items: flex-start; flex-direction: column; margin: 0 18px 50px; padding: 20px; }.preview-review .preview-button { width: 100%; }.preview-footer { flex-wrap: wrap; gap: 10px; }
  .preview-login-story { min-height: 470px; padding: 32px 22px; }.preview-login-form { padding: 30px 24px; }.preview-login-form h2 { font-size: 34px; }
}

/* Product and Solutions sales pages — Cobalt Current. */
.preview-page-hero-actions { display:flex; align-items:center; gap:22px; margin-top:30px; }.preview-page-hero-actions .preview-button { display:inline-flex; width:auto; min-width:220px; }.preview-text-link { color:#0057bd; font-weight:800; text-decoration:none; }.preview-text-link:hover { text-decoration:underline; }
.product-system { display:grid; grid-template-columns:minmax(410px,.96fr) minmax(500px,1.04fr); gap:clamp(42px,5vw,72px); padding:58px clamp(28px,5vw,64px); color:#fff; background:linear-gradient(135deg,#061f43,#08396f 58%,#006b71); border-radius:22px; box-shadow:0 28px 70px rgba(8,43,89,.22); align-items:start; }
.product-system-copy h2,.solution-roles-heading h2,.solution-shared h2 { margin:8px 0 18px; font:750 clamp(34px,4vw,52px)/1.05 Manrope,Inter,sans-serif; letter-spacing:-.04em; }.product-system-copy h2 { color:#fff; }.product-system-copy > p:not(.preview-kicker) { color:#c9deed; font-size:17px; }.product-system .preview-kicker { color:#65dfce; }
.product-system-copy ol { margin:32px 0 0; padding:0; list-style:none; }.product-system-copy li { display:grid; grid-template-columns:42px 1fr; gap:15px; padding:16px 0; border-top:1px solid rgba(255,255,255,.17); }.product-system-copy li > span { display:grid; width:34px; height:34px; place-items:center; color:#05294b; background:#65dfce; border-radius:9px; font:800 10px/1 Inter,sans-serif; }.product-system-copy li b { color:#fff; font-size:17px; }.product-system-copy li p { margin:4px 0 0; color:#bed3e3; font-size:14px; }
.product-system-ui { align-self:start; margin-top:38px; padding:26px; color:#0d2038; background:#fff; border:1px solid rgba(255,255,255,.6); border-radius:17px; box-shadow:0 25px 60px rgba(0,0,0,.24); }.product-ui-bar { display:flex; justify-content:space-between; align-items:center; padding-bottom:17px; border-bottom:1px solid #d8e3ed; color:#082b59; font:750 18px/1 Manrope,sans-serif; }.product-ui-bar b { padding:7px 10px; color:#91370f; background:#fff0e8; border-radius:999px; font:800 10px/1 Inter,sans-serif; }.product-ui-kpis { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0; }.product-ui-kpis article { display:grid; gap:5px; padding:16px; background:#f5f9ff; border:1px solid #d6e2ed; border-radius:10px; }.product-ui-kpis small { color:#60788d; }.product-ui-kpis strong { color:#082b59; font:800 25px/1 Inter,sans-serif; }.product-ui-kpis em { color:#00745f; font-style:normal; font-size:11px; font-weight:800; }
.product-ui-alert { display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center; padding:15px; background:#fff9f5; border:1px solid #f1d5c5; border-radius:10px; }.product-ui-alert i { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:#ff7a35; border-radius:9px; font-style:normal; font-weight:900; }.product-ui-alert div { display:grid; gap:3px; }.product-ui-alert div b { color:#613117; }.product-ui-alert div span { color:#806251; font-size:11px; }.product-ui-alert button { padding:8px 11px; color:#fff; background:#006be6; border:0; border-radius:7px; font-weight:800; }.product-ui-flow { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:19px; color:#47657e; font-size:10px; font-weight:800; }.product-ui-flow span { padding:8px; background:#edf5fc; border-radius:7px; }.product-system-ui > p { margin:18px 0 0; color:#6b7e8e; font-size:10px; text-align:right; }
.product-boundary { display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; margin:28px 0 70px; }.product-boundary article { min-height:190px; padding:27px; background:#fff; border:1px solid #cadbeb; border-radius:14px; box-shadow:0 12px 32px rgba(8,43,89,.08); }.product-boundary article > span { color:#006be6; font:850 11px/1 Inter,sans-serif; letter-spacing:.1em; }.product-boundary h2 { margin:22px 0 9px; color:#082b59; font:750 24px/1.1 Manrope,sans-serif; }.product-boundary p { margin:0; color:#52677e; }.product-boundary > i { display:grid; width:42px; height:42px; place-items:center; color:#fff; background:linear-gradient(135deg,#006be6,#00a98f); border-radius:50%; font-style:normal; font-size:22px; box-shadow:0 8px 20px rgba(0,107,230,.2); }
.solution-roles { margin-bottom:68px; }.solution-roles-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.45fr); gap:18px 50px; align-items:end; max-width:1050px; margin-bottom:35px; }.solution-roles-heading .preview-kicker { grid-column:1/-1; margin-bottom:-5px; }.solution-roles-heading h2 { margin:0; color:#082b59; }.solution-roles-heading > p:last-child { margin:0; color:#52677e; font-size:17px; }
.solution-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.solution-role-grid article { padding:30px; background:#fff; border:1px solid #cadbeb; border-radius:15px; box-shadow:0 14px 36px rgba(8,43,89,.08); }.solution-role-grid article > span { color:#007b69; font:800 11px/1 Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase; }.solution-role-grid h3 { max-width:560px; margin:24px 0 26px; color:#082b59; font:750 25px/1.12 Manrope,sans-serif; }.solution-role-grid dl { display:grid; gap:15px; margin:0; }.solution-role-grid dl > div { display:grid; grid-template-columns:90px 1fr; gap:12px; padding-top:14px; border-top:1px solid #dbe5ef; }.solution-role-grid dt { color:#006be6; font-size:12px; font-weight:850; text-transform:uppercase; }.solution-role-grid dd { margin:0; color:#52677e; }
.solution-shared { display:grid; grid-template-columns:1fr .7fr; gap:55px; align-items:end; margin-bottom:70px; padding:42px; color:#fff; background:linear-gradient(120deg,#082b59,#006b71); border-radius:18px; }.solution-shared .preview-kicker { color:#65dfce; }.solution-shared h2 { margin-bottom:0; color:#fff; }.solution-shared > p { color:#d5e8ee; font-size:17px; line-height:1.65; }
@media(max-width:1050px){.product-system{grid-template-columns:1fr}.product-system-ui{width:100%;box-sizing:border-box;margin-top:0}.product-boundary{grid-template-columns:1fr}.product-boundary>i{justify-self:center;margin-block:-8px}.solution-roles-heading,.solution-shared{grid-template-columns:1fr}.solution-role-grid{grid-template-columns:1fr}}
@media(max-width:680px){.product-system{padding:36px 20px;border-radius:14px}.product-ui-flow{align-items:stretch;flex-direction:column}.product-ui-flow i{align-self:center;transform:rotate(90deg)}.product-boundary{margin-bottom:48px}.solution-role-grid article{padding:23px}.solution-role-grid dl>div{grid-template-columns:1fr}.solution-shared{padding:28px 22px}}

.pricing-intro { display:grid; grid-template-columns:1fr .7fr; gap:55px; align-items:end; margin-bottom:34px; padding:38px 42px; color:#fff; background:linear-gradient(120deg,#082b59,#006b71); border-radius:18px; box-shadow:0 20px 48px rgba(8,43,89,.18); }.pricing-intro .preview-kicker { color:#6be1d1; }.pricing-intro h2,.pricing-outlay h2,.pricing-steps h2 { margin:7px 0 0; color:#fff; font:750 clamp(31px,3.7vw,48px)/1.06 Manrope,Inter,sans-serif; letter-spacing:-.035em; }.pricing-intro > p { margin:0; color:#d5e7ef; font-size:17px; line-height:1.65; }
.preview-plan-grid { width:100%; }.preview-plan-card { position:relative; border-color:#c8d9e9; background:#fff; box-shadow:0 15px 38px rgba(8,43,89,.10); }.preview-plan-card--featured { border:2px solid #006be6; box-shadow:0 22px 50px rgba(0,107,230,.18); transform:translateY(-8px); }.preview-plan-badge { position:absolute; top:-14px; right:20px; padding:7px 11px; color:#fff; background:#006be6; border-radius:999px; font:800 10px/1 Inter,sans-serif; }.preview-plan-card .preview-kicker { color:#00635b; }.preview-plan-price { color:#082b59; }.preview-plan-price strong { color:#082b59; font-family:Inter,sans-serif; font-weight:850; }.preview-plan-card ul { display:grid; gap:8px; color:#405b73; }.preview-plan-card li::marker { color:#00a98f; }
.pricing-outlay { margin:70px 0; }.pricing-outlay-heading { max-width:800px; }.pricing-outlay-heading h2 { color:#082b59; }.pricing-outlay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:30px; }.pricing-outlay-grid article { padding:26px; background:#fff; border:1px solid #cbdceb; border-radius:14px; }.pricing-outlay-grid span { color:#006be6; font:850 10px/1 Inter,sans-serif; letter-spacing:.1em; text-transform:uppercase; }.pricing-outlay-grid h3 { margin:22px 0 9px; color:#082b59; font:750 21px/1.15 Manrope,sans-serif; }.pricing-outlay-grid p { margin:0; color:#52677e; }
.pricing-steps { display:grid; grid-template-columns:.7fr 1.3fr; gap:60px; margin:0 0 65px; padding:42px; background:#e7f2ff; border:1px solid #c7d9e9; border-radius:18px; }.pricing-steps h2 { color:#082b59; }.pricing-steps ol { display:grid; margin:0; padding:0; list-style:none; }.pricing-steps li { display:grid; grid-template-columns:38px 1fr; gap:15px; padding:16px 0; border-bottom:1px solid #c5d8e8; }.pricing-steps li:last-child { border-bottom:0; }.pricing-steps li > b { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:linear-gradient(135deg,#006be6,#00a98f); border-radius:9px; }.pricing-steps li span { display:grid; gap:4px; color:#52677e; }.pricing-steps li strong { color:#082b59; }
@media(max-width:900px){.pricing-intro,.pricing-steps{grid-template-columns:1fr}.pricing-outlay-grid{grid-template-columns:1fr}.preview-plan-card--featured{transform:none}}
@media(max-width:680px){.pricing-intro,.pricing-steps{padding:28px 22px}.pricing-outlay{margin-block:48px}}

/* Short Stay Control identity v3 — approved Interlock + Indigo Intelligence. */
body,
.preview-login-page { background: var(--ssc-background); color: var(--ssc-ink); }

.preview-header {
  max-width: none;
  min-height: 82px;
  padding: 13px clamp(22px, 5vw, 76px);
  background: rgba(255, 255, 255, .94);
  border-color: var(--ssc-line);
  box-shadow: 0 1px 0 rgba(36, 38, 64, .03);
}
.preview-logo {
  display: flex;
  width: min(355px, 42vw);
  height: auto;
  overflow: visible;
  align-items: center;
}
.preview-logo-art { height: auto; overflow: visible; }
.preview-logo-art img {
  width: 340px;
  height: auto;
  object-fit: contain;
  transform: none;
}
.preview-logo small { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.preview-nav { color: var(--ssc-primary); font-size: 14px; }
.preview-nav a:not(.preview-button)::after { background: var(--ssc-action); }
.preview-nav [aria-current="page"] { color: var(--ssc-action); }

.preview-button {
  min-height: 46px;
  background: var(--ssc-action);
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(98, 87, 200, .18);
  transition: background var(--ssc-motion-standard, 200ms) ease, box-shadow var(--ssc-motion-standard, 200ms) ease, transform var(--ssc-motion-standard, 200ms) ease;
}
.preview-button:hover { background: #4c43aa; box-shadow: 0 10px 22px rgba(76, 67, 170, .24); }
.preview-button:focus-visible,
.preview-nav a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 3px solid var(--ssc-action); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(232, 121, 95, .38); }

.preview-notice {
  color: var(--ssc-primary);
  background: #fbe2dc;
  border: 1px solid rgba(232, 121, 95, .34);
  border-radius: 999px;
}
.preview-hero {
  min-height: 650px;
  background: radial-gradient(circle at 86% 18%, rgba(98, 87, 200, .10), transparent 28%);
}
.preview-hero h1,
.preview-page-hero h1,
.preview-review h2,
.preview-page-cta h2,
.preview-contact-card h2,
.preview-login-story h1,
.preview-login-form h2,
.preview-plan-price strong,
.payment-price,
.payment-card h2,
.self-service-signup h1,
.payment-shell h1 {
  color: var(--ssc-primary);
  font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}
.preview-hero h1 { line-height: 1.04; }
.preview-lead { color: var(--ssc-muted); font-size: 18px; }
.preview-hero-features article,
.preview-page-grid article,
.preview-trust-sections article,
.preview-plan-card {
  background: rgba(255, 255, 255, .92);
  border-color: var(--ssc-line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(36, 38, 64, .06);
}
.preview-feature-icon {
  color: white;
  background: var(--ssc-action);
  border-radius: 10px;
}
.preview-hero-features h2,
.preview-page-grid h2,
.preview-trust-sections h2 { color: var(--ssc-primary); font-family: Manrope, Inter, sans-serif; font-weight: 700; }

.preview-chart i { background: var(--ssc-action); }
.preview-chart i:nth-child(8) { background: var(--ssc-primary); }
.preview-kpis article,
.preview-dashboard-grid article { background: var(--ssc-background); border-color: var(--ssc-line); }
.preview-kpis strong,
.preview-application-kpis strong,
.preview-dashboard-bar strong { color: var(--ssc-primary); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.preview-phone-screen { background: var(--ssc-background); }
.preview-phone h2 { color: var(--ssc-primary); font-family: Manrope, Inter, sans-serif; }
.preview-phone-cta { background: var(--ssc-action); }
.preview-phone-boundary,
.preview-boundary-card { color: var(--ssc-primary); background: var(--ssc-supporting); font-family: Inter, sans-serif; }

.preview-application {
  border-color: var(--ssc-line);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(36, 38, 64, .15);
}
.preview-application aside { background: var(--ssc-primary); }
.preview-app-logo { background: white; border-radius: 8px; }
.preview-application aside nav strong { border-left: 3px solid var(--ssc-accent); background: rgba(255, 255, 255, .12); }
.preview-application aside nav b { color: var(--ssc-primary); background: #fbe2dc; }
.preview-application-heading h2 { font-family: Manrope, Inter, sans-serif; color: var(--ssc-primary); }
.preview-application-kpis article,
.preview-application-tables article { border-color: var(--ssc-line); border-radius: 9px; }

.preview-brand-statement { border-top-color: var(--ssc-accent); }
.preview-brand-statement p { color: var(--ssc-primary); }
.preview-kicker { color: var(--ssc-action); }
.preview-review,
.preview-page-cta,
.preview-contact-card { background: var(--ssc-supporting); border: 1px solid var(--ssc-line); border-radius: 14px; }
.preview-review__form,
.payment-card { border-color: var(--ssc-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(36, 38, 64, .09); }
.preview-review__intro h2 { color: var(--ssc-primary); font-family: Manrope, Inter, sans-serif; font-weight: 700; }
.preview-field label,
.preview-form-field label { color: var(--ssc-primary); }
.preview-field input:not([type=checkbox]):not([type=radio]),
.preview-field select,
.preview-field textarea,
.preview-form-field input { min-height: 46px; border-color: #aaa7b6; border-radius: 8px; }
.preview-field input:focus,
.preview-field select:focus,
.preview-field textarea:focus { outline: 3px solid rgba(232, 121, 95, .48); border-color: var(--ssc-action); }
.preview-checkbox input { width: 20px; height: 20px; accent-color: var(--ssc-action); }

.preview-page-grid article > span { background: var(--ssc-action); border-radius: 8px; }
.preview-page-notice { color: var(--ssc-primary); background: #fbe2dc; border-left-color: var(--ssc-accent); border-radius: 8px; }
.preview-trust-table-wrap { border-color: var(--ssc-line); border-radius: 12px; }
.preview-trust-table th { color: var(--ssc-primary); background: var(--ssc-supporting); }
.preview-footer { color: #e9e7f2; background: var(--ssc-primary); }

.preview-value-section { max-width: 1280px; margin: 0 auto 90px; padding: 70px clamp(22px, 4vw, 54px); }
.preview-section-heading { max-width: 780px; }
.preview-section-heading h2,
.preview-process h2 { margin: 0; color: var(--ssc-primary); font-family: Manrope, Inter, sans-serif; font-size: clamp(34px, 4vw, 54px); line-height: 1.08; letter-spacing: -.035em; }
.preview-section-heading > p:last-child { margin: 20px 0 0; color: var(--ssc-muted); font-size: 18px; }
.preview-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; }
.preview-value-grid article { padding: 28px; background: white; border: 1px solid var(--ssc-line); border-radius: 14px; box-shadow: 0 12px 30px rgba(36, 38, 64, .06); }
.preview-value-grid article > span { display: inline-grid; width: 36px; height: 36px; place-items: center; color: var(--ssc-primary); background: #fbe2dc; border-radius: 8px; font-size: 12px; font-weight: 800; }
.preview-value-grid h3 { margin: 28px 0 10px; color: var(--ssc-primary); font-family: Manrope, Inter, sans-serif; font-size: 22px; }
.preview-value-grid p { margin: 0; color: var(--ssc-muted); }
.preview-process { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(520px, 1.3fr); gap: 55px; max-width: 1280px; margin: 0 auto 90px; padding: 48px clamp(22px, 4vw, 54px); color: white; background: var(--ssc-primary); border-radius: 18px; }
.preview-process .preview-kicker { color: #c9c4ff; }
.preview-process h2 { color: white; }
.preview-process ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.preview-process li { display: grid; grid-template-columns: 95px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.preview-process li:first-child { padding-top: 0; }
.preview-process li:last-child { padding-bottom: 0; border-bottom: 0; }
.preview-process b { color: #f5a895; font-family: Manrope, Inter, sans-serif; font-size: 21px; }
.preview-process span { color: #e9e7f2; }

.preview-login-story {
  background: radial-gradient(circle at 82% 16%, rgba(98, 87, 200, .75), transparent 34%), var(--ssc-primary);
}
.preview-login-logo { background: white; border-radius: 10px; }
.preview-login-logo span { height: 58px; }
.preview-login-logo img { width: 390px; height: 65px; transform: none; }
.preview-login-logo small { color: var(--ssc-action); }
.preview-login-form { border-color: var(--ssc-line); border-radius: 14px; box-shadow: 0 18px 45px rgba(36, 38, 64, .12); }
.preview-login-boundary { background: var(--ssc-supporting); border-left-color: var(--ssc-accent); }
.preview-login-boundary strong { color: var(--ssc-primary); }

@media (max-width: 680px) {
  .preview-header { min-height: 64px; padding: 10px 14px; }
  .preview-logo { width: min(215px, 57vw); height: auto; }
  .preview-logo-art { height: auto; }
  .preview-logo-art img { width: 100%; height: auto; transform: none; }
  .preview-nav .preview-button { min-height: 44px; }
  .preview-hero { background: none; }
  .preview-value-section { margin-bottom: 45px; padding: 45px 4px; }
  .preview-value-grid { grid-template-columns: 1fr; }
  .preview-process { grid-template-columns: 1fr; gap: 30px; margin-inline: 0; padding: 34px 24px; border-radius: 14px; }
  .preview-process li { grid-template-columns: 70px 1fr; }
}

/* Manual customer activation, used until automated billing is connected. */
.approval-shell { width: min(1180px, calc(100% - 40px)); margin: 48px auto 80px; }
.approval-shell > p { max-width: 760px; }
.approval-section { margin-top: 36px; }
.approval-section h2 { display: flex; align-items: center; gap: 12px; }
.approval-section h2 span { border-radius: 999px; background: #e7f2ef; padding: 4px 10px; font: 700 14px/1 sans-serif; }
.approval-card { display: grid; grid-template-columns: minmax(0,.8fr) minmax(420px,1.2fr); gap: 36px; margin: 18px 0; padding: 28px; border: 1px solid #d7dfdc; border-radius: 20px; background: #fff; box-shadow: 0 12px 35px rgba(8,48,43,.07); }
.approval-card h3 { margin-top: 0; }
.approval-card dl { display: grid; gap: 10px; }
.approval-card dl div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.approval-card dt { color: #61716d; }
.approval-card dd { margin: 0; font-weight: 700; }
.approval-actions { display: grid; gap: 16px; }
.approval-actions form { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: end; }
.approval-actions label { grid-column: 1/-1; font-weight: 700; }
.approval-actions input { min-width: 0; padding: 13px 14px; border: 1px solid #b7c4c0; border-radius: 10px; font: inherit; }
.approval-message, .approval-empty { margin-top: 20px; padding: 16px 18px; border-left: 5px solid #17815b; border-radius: 10px; background: #e9f6f0; }
.approval-message--error { border-color: #b42318; background: #fff0ee; }
.approval-recent { overflow: hidden; border: 1px solid #d7dfdc; border-radius: 16px; background: #fff; }
.approval-recent > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; padding: 15px 18px; border-bottom: 1px solid #e2e7e5; }
.approval-recent > div:last-child { border-bottom: 0; }
.payment-next-steps { padding-left: 22px; line-height: 1.7; }
@media (max-width: 800px) { .approval-card { grid-template-columns: 1fr; } .approval-actions form { grid-template-columns: 1fr; } .approval-recent > div { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .preview-application, .preview-brand-statement, .preview-review { opacity: 1 !important; transform: none !important; }
}

/* Identity v4 — connected control: high-energy structure without visual noise. */
.preview-header {
  background: rgba(247, 248, 252, .92);
  border-bottom: 1px solid rgba(88, 71, 245, .18);
  box-shadow: 0 8px 30px rgba(23, 25, 54, .07);
  backdrop-filter: blur(16px);
}
.preview-button {
  background: linear-gradient(135deg, var(--ssc-action), #4332d8);
  box-shadow: 0 10px 24px rgba(88, 71, 245, .30);
}
.preview-button:hover {
  background: linear-gradient(135deg, #6859ff, #3928c8);
  box-shadow: 0 14px 30px rgba(88, 71, 245, .38);
}
.preview-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 18%, rgba(0, 169, 206, .22), transparent 24%),
    radial-gradient(circle at 92% 52%, rgba(88, 71, 245, .24), transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #f3f1ff 52%, #e8f8fb 100%);
}
.preview-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .55;
  background-image:
    linear-gradient(rgba(88, 71, 245, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 71, 245, .07) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(110deg, transparent 7%, black 58%, transparent 96%);
}
.preview-hero > * { position: relative; z-index: 1; }
.preview-notice {
  color: #3e24ae;
  background: #ece9ff;
  border-color: rgba(88, 71, 245, .30);
}
.preview-kicker { color: #4938d7; }
.preview-feature-icon,
.preview-page-grid article > span {
  background: linear-gradient(145deg, var(--ssc-action), var(--ssc-connection));
  box-shadow: 0 7px 16px rgba(88, 71, 245, .24);
}
.preview-hero-features article,
.preview-page-grid article,
.preview-trust-sections article,
.preview-plan-card,
.preview-value-grid article {
  border-color: rgba(88, 71, 245, .18);
  box-shadow: 0 16px 38px rgba(23, 25, 54, .10);
}
.preview-hero-features article:hover,
.preview-page-grid article:hover,
.preview-value-grid article:hover {
  border-color: rgba(0, 169, 206, .62);
  box-shadow: 0 20px 45px rgba(35, 38, 104, .16);
  transform: translateY(-4px);
}
.preview-chart i { background: linear-gradient(180deg, #786aff, var(--ssc-action)); }
.preview-chart i:nth-child(3n) { background: linear-gradient(180deg, #27c4df, var(--ssc-connection)); }
.preview-chart i:nth-child(8) { background: linear-gradient(180deg, #ff8a70, var(--ssc-accent)); }
.preview-application { border-color: rgba(88, 71, 245, .25); box-shadow: 0 26px 65px rgba(23, 25, 54, .22); }
.preview-application aside {
  background: linear-gradient(180deg, #171936 0%, #252861 100%);
}
.preview-application aside nav strong {
  border-left-color: #22c2df;
  background: linear-gradient(90deg, rgba(0, 169, 206, .28), rgba(88, 71, 245, .18));
}
.preview-phone-cta { background: linear-gradient(135deg, var(--ssc-action), #4332d8); }
.preview-boundary-card,
.preview-phone-boundary { background: #e1f7fb; border-color: rgba(0, 169, 206, .28); }
.preview-value-grid article > span {
  color: white;
  background: linear-gradient(135deg, var(--ssc-action), var(--ssc-connection));
}
.preview-process {
  background:
    radial-gradient(circle at 90% 10%, rgba(0, 169, 206, .30), transparent 27%),
    linear-gradient(135deg, #171936 0%, #252861 58%, #312687 100%);
  box-shadow: 0 25px 60px rgba(23, 25, 54, .25);
}
.preview-process .preview-kicker { color: #61d9ed; }
.preview-process b { color: #ff8d74; }
.preview-review,
.preview-page-cta,
.preview-contact-card {
  background: linear-gradient(135deg, #eef0ff, #e4f7fa);
  border-color: rgba(88, 71, 245, .22);
}
.preview-page-notice,
.preview-login-boundary { background: #fff0ec; border-left-color: var(--ssc-accent); }
.preview-login-story {
  background:
    radial-gradient(circle at 82% 16%, rgba(0, 169, 143, .38), transparent 29%),
    radial-gradient(circle at 18% 88%, rgba(0, 107, 230, .50), transparent 36%),
    var(--ssc-primary);
}
.preview-login-story h1,
.preview-login-story .preview-kicker--light,
.preview-login-assurances { color: #fff; }
.preview-login-story > div > p:last-child { color: #e6f2ff; }
.preview-footer { background: linear-gradient(110deg, #171936, #252861); }

@media (max-width: 680px) {
  .preview-hero {
    background: linear-gradient(155deg, #fff 0%, #f2efff 62%, #e6f8fb 100%);
  }
}

/* Live palette comparison — identical layout, three distinct brand moods. */
.palette-compare {
  display: flex;
  position: relative;
  z-index: 5;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  color: var(--ssc-muted);
  background: #fff;
  border-bottom: 1px solid var(--ssc-line);
  font: 700 12px/1.2 Inter, sans-serif;
}
.palette-compare a {
  padding: 7px 11px;
  color: var(--ssc-primary);
  border: 1px solid var(--ssc-line);
  border-radius: 999px;
  text-decoration: none;
}
.palette-compare a:hover { border-color: var(--ssc-action); }
.palette-compare a[aria-current="true"] { color: #fff; background: var(--ssc-primary); border-color: var(--ssc-primary); }

/* B — Cobalt Current: precise, energetic and operational. */
.palette-cobalt {
  --ssc-primary: #082b59;
  --ssc-action: #006be6;
  --ssc-connection: #00a98f;
  --ssc-accent: #ff7a35;
  --ssc-background: #f5f9ff;
  --ssc-supporting: #e6f2ff;
  --ssc-ink: #0d2038;
  --ssc-muted: #52677e;
  --ssc-line: #cfddec;
  --blue-dark: #0053b5;
}
.palette-cobalt .preview-button { background: linear-gradient(135deg, #006be6, #0053b5); box-shadow: 0 10px 24px rgba(0, 107, 230, .30); }
.palette-cobalt .preview-button:hover { background: linear-gradient(135deg, #1680f5, #004aa4); }
.palette-cobalt .preview-hero {
  background:
    radial-gradient(circle at 76% 16%, rgba(0, 169, 143, .24), transparent 24%),
    radial-gradient(circle at 94% 55%, rgba(0, 107, 230, .23), transparent 34%),
    linear-gradient(145deg, #fff 0%, #eff7ff 52%, #e5fbf6 100%);
}
.palette-cobalt .preview-notice { color: #004c91; background: #e5f3ff; border-color: rgba(0, 107, 230, .30); }
.palette-cobalt .preview-kicker { color: #005cc5; }
.palette-cobalt .preview-process,
.palette-cobalt .preview-application aside,
.palette-cobalt .preview-footer {
  background: linear-gradient(135deg, #082b59 0%, #064a7a 58%, #006f78 100%);
}
.palette-cobalt .preview-review,
.palette-cobalt .preview-page-cta,
.palette-cobalt .preview-contact-card { background: linear-gradient(135deg, #e7f2ff, #ddf8f1); }

/* C — Ember Signal: confident, human and commercially decisive. */
.palette-ember {
  --ssc-primary: #351840;
  --ssc-action: #9b2fc0;
  --ssc-connection: #e53e6d;
  --ssc-accent: #ff9d16;
  --ssc-background: #fff9f7;
  --ssc-supporting: #f8eaf5;
  --ssc-ink: #28172d;
  --ssc-muted: #705d70;
  --ssc-line: #ead5e4;
  --blue-dark: #792097;
}
.palette-ember .preview-button { background: linear-gradient(135deg, #9b2fc0, #762094); box-shadow: 0 10px 24px rgba(155, 47, 192, .30); }
.palette-ember .preview-button:hover { background: linear-gradient(135deg, #ad3bd3, #68167f); }
.palette-ember .preview-hero {
  background:
    radial-gradient(circle at 74% 16%, rgba(255, 157, 22, .22), transparent 22%),
    radial-gradient(circle at 94% 52%, rgba(229, 62, 109, .23), transparent 34%),
    linear-gradient(145deg, #fff 0%, #fff1ed 50%, #f5e8fb 100%);
}
.palette-ember .preview-notice { color: #7a2144; background: #ffe8ef; border-color: rgba(229, 62, 109, .30); }
.palette-ember .preview-kicker { color: #8b258d; }
.palette-ember .preview-feature-icon,
.palette-ember .preview-page-grid article > span,
.palette-ember .preview-value-grid article > span { background: linear-gradient(145deg, #9b2fc0, #e53e6d); }
.palette-ember .preview-process,
.palette-ember .preview-application aside,
.palette-ember .preview-footer {
  background: linear-gradient(135deg, #351840 0%, #65234e 58%, #8a2c45 100%);
}
.palette-ember .preview-process .preview-kicker { color: #ffc157; }
.palette-ember .preview-review,
.palette-ember .preview-page-cta,
.palette-ember .preview-contact-card { background: linear-gradient(135deg, #faeafa, #fff0e8); }

@media (max-width: 680px) {
  .palette-compare { justify-content: flex-start; overflow-x: auto; }
  .palette-compare span { display: none; }
  .palette-compare a { flex: 0 0 auto; }
}

/* Selected master palette — B, Cobalt Current. */
.preview-button { background: linear-gradient(135deg, #006be6, #0053b5); box-shadow: 0 10px 24px rgba(0, 107, 230, .30); }
.preview-button:hover { background: linear-gradient(135deg, #1680f5, #004aa4); }
.preview-hero {
  background:
    radial-gradient(circle at 76% 16%, rgba(0, 169, 143, .24), transparent 24%),
    radial-gradient(circle at 94% 55%, rgba(0, 107, 230, .23), transparent 34%),
    linear-gradient(145deg, #fff 0%, #eff7ff 52%, #e5fbf6 100%);
}
.preview-notice { color: #004c91; background: #e5f3ff; border-color: rgba(0, 107, 230, .30); }
.preview-kicker { color: #005cc5; }
.preview-process,
.preview-application aside,
.preview-footer { background: linear-gradient(135deg, #082b59 0%, #064a7a 58%, #006f78 100%); }
.preview-review,
.preview-page-cta,
.preview-contact-card { background: linear-gradient(135deg, #e7f2ff, #ddf8f1); }

.preview-story {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.28fr);
  gap: clamp(38px, 6vw, 88px);
  max-width: 1280px;
  margin: 30px auto 90px;
  padding: 64px clamp(24px, 5vw, 70px);
  color: #fff;
  background: linear-gradient(135deg, #061f43 0%, #08366c 55%, #006b71 100%);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(8, 43, 89, .24);
}
.preview-story-copy > h2 { margin: 8px 0 18px; color: #fff; font: 750 clamp(34px, 4vw, 54px)/1.04 Manrope, Inter, sans-serif; letter-spacing: -.04em; }
.preview-story-copy > p:not(.preview-kicker) { color: #cfe4f4; font-size: 17px; }
.preview-story .preview-kicker { color: #62e1cf; }
.preview-story-controls { display: flex; align-items: center; gap: 12px; margin: 30px 0; }
.preview-story-controls button { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.34); border-radius: 50%; font-size: 20px; cursor: pointer; }
.preview-story-controls button:hover { background: #006be6; border-color: #65aaff; }
.preview-story-controls span { color: #b8cee3; font-size: 12px; letter-spacing: .08em; }
.preview-story-controls b { color: #fff; font-size: 17px; }
.preview-story-tabs { display: grid; gap: 7px; }
.preview-story-tabs button { padding: 12px 14px; color: #bcd1e2; background: transparent; border: 0; border-left: 2px solid rgba(255,255,255,.20); text-align: left; font: 700 15px/1.2 Inter, sans-serif; cursor: pointer; }
.preview-story-tabs button b { display: inline-block; width: 34px; color: #60ddcc; }
.preview-story-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(90deg, rgba(0,169,143,.22), transparent); border-left-color: #39d4bd; }
.preview-story-stage { display: grid; min-height: 465px; align-items: stretch; }
.preview-story-stage article { display: grid; grid-template-rows: 1fr auto; padding: clamp(24px, 4vw, 44px); overflow: hidden; color: #0d2038; background: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 18px; box-shadow: 0 25px 55px rgba(0,0,0,.20); }
.preview-story-stage article[hidden] { display: none; }
.preview-story-stage article > div:last-child { padding-top: 24px; border-top: 1px solid #dce5ef; }
.story-label { color: #00635b; font: 800 11px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.preview-story-stage h3 { max-width: 560px; margin: 10px 0; color: #082b59; font: 750 clamp(25px, 3vw, 37px)/1.08 Manrope, Inter, sans-serif; letter-spacing: -.025em; }
.preview-story-stage p { margin: 0; color: #52677e; }
.story-network { position: relative; min-height: 220px; }
.story-network i { position: absolute; width: 72px; height: 72px; background: #eef6ff; border: 2px solid #006be6; border-radius: 16px; box-shadow: 0 10px 24px rgba(0,107,230,.15); }
.story-network i::after { position: absolute; inset: 25px; content: ""; background: #006be6; border-radius: 50%; }
.story-network i:nth-child(1) { top: 5px; left: 5%; }.story-network i:nth-child(2) { top: 5px; right: 5%; }.story-network i:nth-child(3) { bottom: 8px; left: 5%; }.story-network i:nth-child(4) { right: 5%; bottom: 8px; }
.story-network span { position: absolute; top: 50%; left: 50%; width: 92px; height: 92px; transform: translate(-50%,-50%); background: linear-gradient(135deg,#006be6,#00a98f); border: 10px solid #e3f8f4; border-radius: 24px; box-shadow: 0 0 0 1px #8fe0d2, 0 16px 35px rgba(0,107,230,.24); }
.story-network::before,.story-network::after { position:absolute; top:50%; left:14%; right:14%; height:2px; content:""; background:linear-gradient(90deg,#006be6,#00a98f,#006be6); }.story-network::after { top:12%; bottom:12%; left:50%; width:2px; height:auto; }
.story-exceptions { display: grid; align-content: center; gap: 11px; min-height: 220px; }
.story-exceptions span { justify-self: start; padding: 9px 13px; color: #87320d; background: #fff0e8; border-radius: 999px; font-weight: 800; }
.story-exceptions i { padding: 15px 17px; color: #213e5e; background: #f4f8fd; border: 1px solid #d6e1ee; border-left: 5px solid #ff7a35; border-radius: 9px; font-style: normal; font-weight: 700; }
.story-result { display: grid; min-height: 220px; align-content: center; color: #006be6; }
.story-result small { color: #52677e; font-weight: 700; }.story-result strong { color: #082b59; font: 800 48px/1.1 Inter,sans-serif; font-variant-numeric: tabular-nums; }.story-result span { color: #00745f; font-weight: 800; }.story-result svg { width: 100%; height: 90px; margin-top: 18px; }

@media (max-width: 900px) { .preview-story { grid-template-columns: 1fr; margin-inline: 18px; }.preview-story-tabs { grid-template-columns: repeat(3,1fr); }.preview-story-tabs button { border-left: 0; border-bottom: 2px solid rgba(255,255,255,.2); }.preview-story-tabs button[aria-selected="true"] { border-bottom-color: #39d4bd; } }
@media (max-width: 680px) { .preview-story { margin: 12px 0 55px; padding: 38px 20px; border-radius: 0; }.preview-story-stage { min-height: 430px; }.preview-story-tabs button { padding-inline: 5px; font-size: 12px; }.preview-story-tabs button b { display:block; width:auto; margin-bottom:5px; } }

.preview-people { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:clamp(34px,6vw,82px); max-width:1280px; margin:0 auto 95px; padding:0 clamp(22px,4vw,54px); align-items:center; }
.preview-people-image { position:relative; min-height:500px; overflow:hidden; background:#082b59; border-radius:20px; box-shadow:0 24px 58px rgba(8,43,89,.20); }
.preview-people-image img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center; }
.preview-people-image::after { position:absolute; inset:45% 0 0; content:""; background:linear-gradient(transparent,rgba(4,24,50,.84)); }
.preview-people-image span { position:absolute; z-index:1; right:26px; bottom:24px; left:26px; max-width:480px; color:#fff; font:750 clamp(20px,2vw,28px)/1.16 Manrope,Inter,sans-serif; }
.preview-people-copy h2 { margin:8px 0 20px; color:#082b59; font:750 clamp(34px,4vw,52px)/1.05 Manrope,Inter,sans-serif; letter-spacing:-.04em; }
.preview-people-copy > p:not(.preview-kicker) { color:#52677e; font-size:17px; line-height:1.65; }
.preview-people-copy ul { display:grid; gap:0; margin:30px 0 0; padding:0; list-style:none; }
.preview-people-copy li { display:grid; grid-template-columns:150px 1fr; gap:18px; padding:17px 0; border-top:1px solid #cfddec; }
.preview-people-copy li b { color:#082b59; }.preview-people-copy li span { color:#52677e; }
@media (max-width:900px) { .preview-people { grid-template-columns:1fr; }.preview-people-image { min-height:430px; }.preview-people-copy { max-width:680px; } }
@media (max-width:680px) { .preview-people { margin-bottom:58px; padding-inline:18px; }.preview-people-image { min-height:390px; border-radius:14px; }.preview-people-image img { object-position:58% center; }.preview-people-copy li { grid-template-columns:1fr; gap:4px; } }

.preview-testimonial { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(520px,1.2fr); gap:clamp(36px,6vw,84px); max-width:1280px; margin:76px auto 90px; padding:0 clamp(22px,4vw,54px); align-items:center; }
.preview-testimonial-copy h2 { margin:8px 0 18px; color:#082b59; font:750 clamp(34px,4vw,52px)/1.05 Manrope,Inter,sans-serif; letter-spacing:-.04em; }.preview-testimonial-copy > p:not(.preview-kicker) { color:#52677e; font-size:17px; line-height:1.65; }
.preview-testimonial-proof { display:grid; gap:10px; margin-top:28px; }.preview-testimonial-proof span { display:flex; gap:12px; align-items:center; color:#234666; font-weight:700; }.preview-testimonial-proof b { display:grid; width:32px; height:32px; place-items:center; color:#fff; background:linear-gradient(135deg,#006be6,#00a98f); border-radius:9px; font-size:10px; }
.preview-video-card { overflow:hidden; background:#fff; border:1px solid #c7d9ea; border-radius:18px; box-shadow:0 22px 55px rgba(8,43,89,.17); }.preview-video-card video { display:block; width:100%; aspect-ratio:16/9; background:#082b59; object-fit:cover; }.preview-video-card > p { margin:0; padding:15px 20px; color:#52677e; background:#f5f9ff; border-top:1px solid #dce6f0; font-size:12px; }.preview-video-card > p b { color:#082b59; }
.preview-youtube-player { display:block; width:100%; aspect-ratio:16/9; background:#082b59; border:0; }
.preview-video-placeholder { display:grid; min-height:355px; place-items:center; align-content:center; gap:18px; padding:30px; color:#fff; text-align:center; background:radial-gradient(circle at 70% 20%,rgba(0,169,143,.45),transparent 28%),linear-gradient(135deg,#061f43,#075a76); }.preview-video-placeholder > span { display:grid; width:74px; height:74px; place-items:center; padding-left:5px; background:#006be6; border:2px solid rgba(255,255,255,.7); border-radius:50%; box-shadow:0 15px 35px rgba(0,0,0,.25); font-size:25px; }.preview-video-placeholder div { display:grid; gap:7px; }.preview-video-placeholder b { font:750 24px/1.1 Manrope,sans-serif; }.preview-video-placeholder small { color:#cfe6f1; font-size:14px; }
.preview-video-attribution { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; padding:18px 20px 4px; }.preview-video-attribution b { color:#082b59; }.preview-video-attribution span { color:#52677e; }.preview-video-attribution p { grid-column:1/-1; margin:7px 0 0; color:#334f68; }
@media (max-width:900px) { .preview-testimonial { grid-template-columns:1fr; }.preview-testimonial-copy { max-width:700px; } }
@media (max-width:680px) { .preview-testimonial { margin:52px auto 62px; padding-inline:18px; }.preview-video-placeholder { min-height:250px; } }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.preview-hero-carousel { min-height:570px; padding-bottom:58px; }
.preview-hero-slide { position:relative; min-height:500px; }
.preview-hero-slide[hidden] { display:none; }
.preview-hero-carousel-controls { display:flex; position:absolute; z-index:8; right:0; bottom:0; left:62px; align-items:center; justify-content:center; gap:10px; }
.preview-hero-carousel-controls > button { display:grid; width:36px; height:36px; flex:0 0 auto; place-items:center; color:#082b59; background:#fff; border:1px solid #b8cce0; border-radius:50%; font-size:18px; cursor:pointer; box-shadow:0 5px 15px rgba(8,43,89,.10); }
.preview-hero-carousel-controls > button:hover { color:#fff; background:#006be6; border-color:#006be6; }
.preview-hero-carousel-controls > div { display:flex; gap:5px; padding:5px; background:rgba(255,255,255,.90); border:1px solid #cfddec; border-radius:999px; box-shadow:0 7px 20px rgba(8,43,89,.10); backdrop-filter:blur(10px); }
.preview-hero-carousel-controls [role="tab"] { padding:7px 11px; color:#52677e; background:transparent; border:0; border-radius:999px; font:700 11px/1 Inter,sans-serif; cursor:pointer; }
.preview-hero-carousel-controls [role="tab"][aria-selected="true"] { color:#fff; background:#082b59; }
.preview-hero-carousel-controls > .preview-carousel-toggle { width:auto; min-width:58px; padding:0 11px; color:#fff; background:#006be6; border-color:#006be6; border-radius:999px; font:750 10px/1 Inter,sans-serif; }
.preview-hero-carousel-controls > .preview-carousel-toggle:hover { background:#0053b5; }
.preview-hero-carousel-controls > .preview-carousel-toggle[aria-pressed="true"] { color:#082b59; background:#fff; border-color:#8eabc7; }
.preview-hero-people { min-height:500px; overflow:hidden; background:#082b59; border-radius:18px; box-shadow:0 25px 58px rgba(8,43,89,.24); }
.preview-hero-people img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center; }
.preview-hero-people::after { position:absolute; inset:38% 0 0; content:""; background:linear-gradient(transparent,rgba(4,24,50,.94)); }
.preview-hero-people > div { position:absolute; z-index:1; right:32px; bottom:32px; left:32px; color:#fff; }
.preview-hero-people span { color:#63e1cf; font:800 11px/1 Inter,sans-serif; letter-spacing:.11em; text-transform:uppercase; }
.preview-hero-people h2 { max-width:600px; margin:10px 0; color:#fff; font:750 clamp(26px,3vw,40px)/1.06 Manrope,Inter,sans-serif; letter-spacing:-.035em; }
.preview-hero-people p { margin:0; color:#d7e8f4; font-size:16px; }
.preview-hero-workflow { min-height:500px; box-sizing:border-box; padding:clamp(24px,4vw,42px); background:#fff; border:1px solid #bfd4e8; border-radius:18px; box-shadow:0 25px 58px rgba(8,43,89,.20); }
.hero-workflow-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; color:#082b59; }.hero-workflow-head > span { font:750 26px/1 Manrope,sans-serif; }.hero-workflow-head > b { padding:8px 11px; color:#87320d; background:#fff0e8; border-radius:999px; font-size:11px; }
.hero-workflow-row { display:grid; grid-template-columns:38px 1fr auto; gap:14px; align-items:center; padding:16px 0; border-top:1px solid #dce5ef; }.hero-workflow-row i { display:grid; width:34px; height:34px; place-items:center; color:#006be6; background:#e5f3ff; border-radius:9px; font-style:normal; font-weight:800; }.hero-workflow-row span { display:grid; gap:3px; color:#153a61; }.hero-workflow-row small { color:#657b91; }.hero-workflow-row em { color:#00745f; font-style:normal; font-size:12px; font-weight:800; }.hero-workflow-row--active { margin-inline:-14px; padding-inline:14px; background:#fff9f5; border-radius:10px; }.hero-workflow-row--active i { color:#fff; background:#ff7a35; }.hero-workflow-row--active em { color:#a13d10; }
.hero-workflow-result { display:grid; gap:7px; margin-top:20px; padding:20px; color:#fff; background:linear-gradient(135deg,#082b59,#006b71); border-radius:12px; }.hero-workflow-result small { color:#74e0d1; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.hero-workflow-result strong { font:750 20px/1.2 Manrope,sans-serif; }
@media (max-width:1100px) { .preview-hero-carousel-controls > div { max-width:390px; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }.preview-hero-carousel-controls > div::-webkit-scrollbar { display:none; } }
@media (max-width:900px) { .preview-hero-carousel { min-height:590px; }.preview-hero-carousel-controls { left:27px; } }
@media (max-width:680px) { .preview-hero-carousel { min-height:390px; padding:0 0 60px; }.preview-hero-slide,.preview-hero-people,.preview-hero-workflow { min-height:330px; }.preview-hero-carousel-controls { left:0; gap:5px; }.preview-hero-carousel-controls > div { max-width:205px; }.preview-hero-carousel-controls [role="tab"] { padding:7px 8px; }.preview-hero-carousel-controls > .preview-carousel-toggle { min-width:48px; padding-inline:8px; }.preview-hero-people > div { right:20px; bottom:20px; left:20px; }.preview-hero-people img { object-position:58% center; }.preview-hero-workflow { padding:18px; }.hero-workflow-head > span { font-size:20px; }.hero-workflow-row { padding-block:11px; }.hero-workflow-result { margin-top:12px; padding:15px; } }

/* First-pass public marketing pages. */
.preview-marketing-page main { max-width: 1280px; margin: auto; padding: 0 28px 80px; }
.preview-nav [aria-current="page"] { color: var(--blue); }
.preview-nav [aria-current="page"]::after { transform: scaleX(1) !important; }
.preview-page-hero { max-width: 930px; padding: 95px 0 65px; }
.preview-page-hero h1 { margin: 0; color: var(--teal-dark); font-family: var(--serif); font-size: clamp(46px, 6vw, 78px); font-weight: 600; letter-spacing: -.04em; line-height: .98; }
.preview-page-hero > p:last-child { max-width: 780px; margin: 25px 0 0; color: var(--muted); font-size: 19px; }
.preview-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.preview-page-grid article { min-height: 220px; padding: 25px; background: white; border: 1px solid var(--line); border-radius: 7px; transition: transform .18s ease, border-color .18s ease; }
.preview-page-grid article:hover { border-color: #9eb1a7; transform: translateY(-3px); }
.preview-page-grid article > span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: white; background: var(--blue); border-radius: 50%; font-size: 11px; font-weight: 800; }
.preview-page-grid h2 { margin: 28px 0 8px; color: var(--teal-dark); font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.08; }
.preview-page-grid p { margin: 0; color: var(--muted); }
.preview-page-notice { margin: 22px 0 0; padding: 15px 18px; color: #64470c; background: #fff1cc; border-left: 4px solid var(--gold); font-size: 13px; }
.preview-page-cta, .preview-contact-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 60px; padding: 30px; background: #e6eeeb; border-radius: 8px; }
.preview-page-cta h2, .preview-contact-card h2 { margin: 0; color: var(--teal-dark); font-family: var(--serif); font-size: clamp(29px, 3vw, 42px); font-weight: 600; line-height: 1.05; }
.preview-page-cta p, .preview-contact-card p { margin: 10px 0 0; color: var(--muted); }
.preview-page-cta .preview-button, .preview-contact-card .preview-button { flex: 0 0 auto; white-space: nowrap; }
.preview-footer a { color: white; }
.preview-trust-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.preview-trust-sections article { padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.preview-trust-sections h2 { margin: 0 0 13px; color: var(--teal-dark); font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.08; }

/* Signup is a form journey, not the compact homepage review CTA. Keep its
   layout independent so a change to the marketing CTA cannot squeeze fields. */
.self-service-signup {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,460px);
  align-items:start;
  gap:clamp(28px,4vw,56px);
  width:min(1180px,calc(100% - 32px));
  max-width:none;
  margin:36px auto 64px;
  padding:clamp(22px,3vw,40px);
  border:1px solid var(--ssc-line);
  border-radius:18px;
  background:linear-gradient(120deg,#eaf4ff,#e5faf7);
}
.self-service-signup h1 {
  max-width:15ch;
  margin:7px 0 18px;
  font-size:clamp(36px,3.6vw,49px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.self-service-signup .preview-review__intro p {max-width:52ch;}
.self-service-signup .preview-review__form {width:100%;padding:clamp(22px,2.5vw,34px);}
.self-service-signup .preview-form-grid {grid-template-columns:1fr;gap:15px;}
.self-service-signup .preview-field--wide {grid-column:auto;}
.self-service-signup .preview-field label {color:var(--ssc-primary);font-size:14px;}
.self-service-signup .preview-field input:not([type=checkbox]) {min-height:46px;}
.self-service-signup .preview-button {width:100%;min-width:0;white-space:normal;}
@media (max-width:820px) {
  .self-service-signup {grid-template-columns:1fr;gap:24px;width:100%;margin:16px 0 40px;}
  .self-service-signup h1 {max-width:20ch;}
}
.preview-trust-sections p { margin: 0 0 12px; color: var(--muted); }
.preview-trust-sections p:last-child { margin-bottom: 0; }
.preview-trust-sections ul { margin: 0; padding-left: 21px; color: var(--muted); }
.preview-trust-sections li + li { margin-top: 9px; }
.preview-trust-table-wrap { margin-top: 28px; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.preview-trust-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.preview-trust-table th, .preview-trust-table td { padding: 15px 17px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.preview-trust-table th { color: #294f47; background: #edf3f1; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.preview-trust-table tr:last-child td { border-bottom: 0; }

@media (max-width: 900px) {
  .preview-page-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .preview-marketing-page main { padding-inline: 18px; }
  .preview-page-hero { padding: 60px 0 42px; }
  .preview-page-hero h1 { font-size: 39px; }
  .preview-page-hero > p:last-child { font-size: 17px; }
  .preview-page-grid { grid-template-columns: 1fr; }
  .preview-page-grid article { min-height: 0; }
  .preview-trust-sections { grid-template-columns: 1fr; }
  .preview-page-cta, .preview-contact-card { align-items: flex-start; flex-direction: column; padding: 22px; }
  .preview-page-cta .preview-button, .preview-contact-card .preview-button { width: 100%; white-space: normal; }
}

/* Disabled experiment: dashboard-aligned public system. Retained temporarily for comparison only. */
@media (max-width: 0px) {
:root {
  --ssc-primary: #071d3d;
  --ssc-action: #0869e8;
  --ssc-connection: #31d1ca;
  --ssc-background: #f3f6fa;
  --ssc-supporting: #eaf3ff;
  --ssc-ink: #092348;
  --ssc-muted: #63758b;
  --ssc-line: #c9d7e7;
  --ssc-success: #0b8b66;
  --ssc-warning: #d76613;
  --ssc-error: #bd3434;
  --teal: var(--ssc-primary);
  --teal-dark: var(--ssc-primary);
  --blue: var(--ssc-action);
  --blue-dark: #0558c5;
  --paper: var(--ssc-background);
  --ink: var(--ssc-ink);
  --muted: var(--ssc-muted);
  --line: var(--ssc-line);
}

body,
.preview-login-page {
  color: var(--ssc-ink);
  background: var(--ssc-background);
}

.preview-header {
  position: relative;
  z-index: 20;
  min-height: 72px;
  padding: 9px clamp(22px, 4vw, 58px);
  color: #fff;
  background: var(--ssc-primary);
  border: 0;
  box-shadow: 0 8px 24px rgba(7, 29, 61, .14);
  backdrop-filter: none;
}
.preview-logo {
  width: min(318px, 39vw);
  padding: 7px 12px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 8px;
}
.preview-logo-art img { width: 100%; }
.preview-nav { color: #eaf3ff; }
.preview-nav a:not(.preview-button)::after { background: var(--ssc-connection); }
.preview-nav [aria-current="page"] { color: #fff; }

.preview-button,
.palette-cobalt .preview-button {
  color: #fff;
  background: var(--ssc-action);
  border: 1px solid #0869e8;
  border-radius: 7px;
  box-shadow: 0 7px 18px rgba(8, 105, 232, .20);
}
.preview-button:hover,
.palette-cobalt .preview-button:hover {
  background: #0558c5;
  border-color: #0558c5;
  box-shadow: 0 10px 22px rgba(8, 105, 232, .26);
}
.preview-header .preview-button {
  color: var(--ssc-primary);
  background: var(--ssc-connection);
  border-color: var(--ssc-connection);
  box-shadow: none;
}
.preview-header .preview-button:hover { background: #68e1dc; border-color: #68e1dc; }

.preview-hero,
.palette-cobalt .preview-hero {
  min-height: 620px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(49,209,202,.13) 1px, transparent 1px),
    linear-gradient(rgba(49,209,202,.13) 1px, transparent 1px),
    linear-gradient(118deg, #fff 0%, #f3f6fa 64%, #eaf3ff 100%);
  background-size: 54px 54px, 54px 54px, auto;
}
.preview-hero::before {
  opacity: 1;
  background: radial-gradient(circle at 83% 22%, rgba(49,209,202,.20), transparent 30%);
  mask-image: none;
}
.preview-hero h1 { max-width: 610px; color: var(--ssc-primary); font-size: clamp(43px, 3.55vw, 52px); line-height: 1.03; }
.preview-lead { color: var(--ssc-muted); }
.preview-kicker { color: #075cc9; }

.preview-hero-features article,
.preview-page-grid article,
.preview-trust-sections article,
.preview-plan-card,
.preview-value-grid article,
.preview-story-stage article,
.preview-hero-workflow {
  background: #fff;
  border: 1px solid var(--ssc-line);
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(7,29,61,.08);
}
.preview-feature-icon,
.preview-page-grid article > span,
.preview-value-grid article > span {
  color: var(--ssc-primary);
  background: #c9f4f1;
  border: 1px solid #73ddd7;
  border-radius: 7px;
  box-shadow: none;
}
.preview-hero-features article:hover,
.preview-page-grid article:hover,
.preview-value-grid article:hover {
  border-color: #7da9dc;
  box-shadow: 0 12px 30px rgba(7,29,61,.12);
  transform: translateY(-2px);
}

.preview-laptop-screen,
.preview-phone { box-shadow: 0 18px 38px rgba(7,29,61,.24); }
.preview-laptop .preview-dashboard,
.preview-phone-screen { background: #fff; }
.preview-kpis article,
.preview-dashboard-grid article,
.preview-application-kpis article,
.preview-application-tables article { background: #fff; border-color: var(--ssc-line); }
.preview-chart { background-color: #f7f9fc; }
.preview-chart i,
.preview-chart i:nth-child(3n) { background: var(--ssc-action); }
.preview-chart i:nth-child(2n) { background: #3e86df; }
.preview-chart i:nth-child(8) { background: var(--ssc-connection); }
.preview-phone-cta { background: var(--ssc-action); }
.preview-phone-boundary,
.preview-boundary-card { color: var(--ssc-primary); background: #e5faf8; border: 1px solid #a4e8e4; }

.preview-application {
  background: #fff;
  border: 1px solid var(--ssc-line);
  border-radius: 11px;
  box-shadow: 0 12px 34px rgba(7,29,61,.13);
}
.preview-application aside,
.palette-cobalt .preview-application aside { background: var(--ssc-primary); }
.preview-application aside nav strong {
  border-left-color: var(--ssc-connection);
  background: rgba(49,209,202,.16);
}
.preview-application aside nav b { color: var(--ssc-primary); background: var(--ssc-connection); }

.preview-story,
.preview-process,
.palette-cobalt .preview-process {
  background: var(--ssc-primary);
  border: 1px solid #123b70;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(7,29,61,.16);
}
.preview-story .preview-kicker,
.preview-process .preview-kicker { color: var(--ssc-connection); }
.preview-story-tabs button[aria-selected="true"] {
  background: rgba(49,209,202,.13);
  border-color: var(--ssc-connection);
}
.preview-story-controls button:hover { background: var(--ssc-action); border-color: var(--ssc-action); }

.preview-review,
.preview-page-cta,
.preview-contact-card,
.palette-cobalt .preview-review,
.palette-cobalt .preview-page-cta,
.palette-cobalt .preview-contact-card {
  background: #eaf3ff;
  border: 1px solid #b8cde7;
  border-radius: 10px;
}
.preview-testimonial,
.preview-people { color: var(--ssc-ink); }
.preview-video-card { border-color: var(--ssc-line); border-radius: 10px; }
.preview-notice {
  color: #7e3d08;
  background: #fff2e6;
  border: 1px solid #f0c7a5;
}
.preview-footer,
.palette-cobalt .preview-footer { background: var(--ssc-primary); }

.preview-page-hero h1,
.preview-section-heading h2,
.preview-process h2 { color: var(--ssc-primary); }
.preview-process h2 { color: #fff; }
.preview-plan-card { background: #fff; }
.preview-plan-card--featured { border-color: #78a8e2; box-shadow: 0 12px 34px rgba(7,29,61,.12); }

@media (max-width: 1040px) {
  .preview-header { background: var(--ssc-primary); }
  .preview-nav { width: 100%; justify-content: center; }
}
@media (max-width: 680px) {
  .preview-header { min-height: 64px; padding: 8px 14px; }
  .preview-logo { width: min(218px, 62vw); padding: 6px 9px; }
  .preview-nav { gap: 12px; padding-top: 7px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .preview-nav::-webkit-scrollbar { display: none; }
  .preview-nav a { flex: 0 0 auto; }
  .preview-hero,
  .palette-cobalt .preview-hero {
    background:
      linear-gradient(90deg, rgba(49,209,202,.09) 1px, transparent 1px),
      linear-gradient(rgba(49,209,202,.09) 1px, transparent 1px),
      #f3f6fa;
    background-size: 42px 42px;
  }
  .preview-hero h1 { font-size: clamp(31px, 9vw, 35px); }
}
}

/* Signup: the commitment choice. The most commercial decision on the page,
   so it gets room and each option carries its own price. */
.preview-commitment { margin: 0; padding: 14px 16px; border: 1px solid var(--ssc-line); border-radius: 12px; background: #fff; }
.preview-commitment legend { padding: 0 6px; font-weight: 700; color: var(--ssc-primary); }
.preview-commitment ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* The whole row is the target, not the circle: a 6px circle is a poor thing
   to ask anyone to hit, and it is where the choice was being missed. */
.preview-commitment li label { display: flex; gap: 12px; align-items: center; cursor: pointer; padding: 12px 14px; min-height: 44px; border: 1px solid var(--ssc-line); border-radius: 10px; font-weight: 600; color: var(--ssc-ink); }
.preview-commitment li label:hover { border-color: var(--ssc-action); background: var(--ssc-supporting); }
.preview-commitment li input[type="radio"] { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; accent-color: var(--ssc-action); }
.preview-commitment li:has(input:checked) label { border-color: var(--ssc-action); border-width: 2px; background: var(--ssc-supporting); }
.preview-commitment li label:focus-within { outline: 3px solid rgba(0,107,230,.25); outline-offset: 2px; }
.preview-commitment small { display: block; margin-top: 10px; color: var(--ssc-muted); font-weight: 400; }
/* What the button will actually do, in one line, right above it. */
.preview-charge-summary { margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--ssc-supporting); color: var(--ssc-primary); font-weight: 700; }

/* Pricing: one button per commitment term, so plan and length are chosen
   together beside the figures that explain them. */
.preview-plan-terms { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.preview-plan-terms .preview-button { display: block; width: 100%; text-align: center; white-space: normal; }
.preview-plan-terms-lead { margin: 16px 0 6px; font-weight: 700; color: var(--ssc-primary); }

/* Button variants, last so they win over every palette rule above
   (walkthrough 28; Edwin, 29 Sep 2026: the trial button rendered blue on
   blue). The trial button is the brand orange and nothing else is; the demo
   button is outlined. */
.preview-button.preview-button--trial,
.preview-header .preview-button.preview-button--trial,
.palette-cobalt .preview-button.preview-button--trial {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 7px 18px rgba(255, 122, 53, .28);
}
.preview-button.preview-button--trial:hover,
.preview-header .preview-button.preview-button--trial:hover,
.palette-cobalt .preview-button.preview-button--trial:hover {
  background: var(--gold);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink) inset;
}
.preview-button.preview-button--ghost,
.preview-header .preview-button.preview-button--ghost,
.palette-cobalt .preview-button.preview-button--ghost {
  background: transparent;
  border: 1px solid var(--ssc-action);
  color: var(--ssc-action);
  box-shadow: none;
}
.preview-button.preview-button--ghost:hover,
.preview-header .preview-button.preview-button--ghost:hover,
.palette-cobalt .preview-button.preview-button--ghost:hover {
  background: rgba(0, 107, 230, .08);
  border-color: var(--ssc-action);
  color: var(--ssc-action);
}
/* Two buttons in the header: no forced width, so the row fits on one line. */
.preview-header .preview-button--small { min-width: 0; }

/* Walkthrough 29: the demo form page. Steps down the side, the form from the
   top of the page; on a phone the form comes first. */
.demo-entry { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: 40px; align-items: start; max-width: 1240px; margin: 0 auto 64px; padding: 0 clamp(16px, 4vw, 48px); }
.demo-entry__side h2 { font: 800 18px var(--ssc-heading); margin: 4px 0 16px; color: var(--ink); }
.demo-entry__steps { list-style: none; margin: 0; padding: 0; }
.demo-entry__steps li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; margin: 0 0 20px; }
.demo-entry__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ssc-supporting); color: var(--ssc-action); font-weight: 800; }
.demo-entry__steps b { display: block; font-size: 16px; color: var(--ink); }
.demo-entry__steps span { color: var(--ssc-muted); font-size: 15px; }
.demo-entry__trust { list-style: none; margin: 12px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ssc-line); display: grid; gap: 8px; font-size: 15px; }
.demo-entry__trust li::before { content: "\2713"; color: var(--ssc-connection); font-weight: 800; margin-right: 8px; }
.demo-entry__form { background: #fff; border: 1px solid var(--ssc-line); border-radius: 18px; padding: clamp(18px, 3vw, 32px); box-shadow: 0 16px 40px rgba(8, 43, 89, .09); }
.demo-entry__title { font: 800 22px var(--ssc-heading); margin: 0 0 4px; color: var(--ink); }
.demo-entry__sub { color: var(--ssc-muted); margin: 0 0 18px; font-size: 15px; }
.demo-entry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-entry__field { margin: 0 0 14px; }
.demo-entry__field select { box-sizing: border-box; width: 100%; padding: 12px 13px; border: 1px solid #bdcbc7; border-radius: 8px; font: inherit; background: #fff; }
.demo-entry__other { display: none; }
.demo-entry__other.is-open { display: block; }
.demo-entry__note { font-size: 14px; color: var(--ssc-muted); background: var(--ssc-supporting); border-radius: 9px; padding: 10px 12px; margin: -4px 0 14px; }
.demo-entry__optional { margin: 2px 0 14px; }
.demo-entry__tick { margin: 0 0 10px; font-size: 14px; }
.demo-entry__tick.is-bad { color: #a02929; }
.demo-entry__submit { min-height: 52px; font-size: 17px; margin-top: 6px; }
.demo-entry__reassure { text-align: center; color: var(--ssc-muted); font-size: 14px; margin: 10px 0 2px; }
.demo-entry__alt { text-align: center; font-size: 14px; margin: 6px 0 0; }
.demo-entry__alt a { color: var(--ssc-action); font-weight: 700; }
@media (max-width: 860px) {
  .demo-entry { grid-template-columns: 1fr; gap: 28px; }
  .demo-entry__form { order: 1; }
  .demo-entry__side { order: 2; }
}
@media (max-width: 520px) {
  .demo-entry__row { grid-template-columns: 1fr; }
}


/* Launch pricing: property-count slider above the plan cards (30 Sep 2026). */
.pricing-slider { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; gap:14px 24px; align-items:center; padding:24px 30px; background:#fff; border:1px solid #c8d9e9; border-radius:18px; box-shadow:0 15px 38px rgba(8,43,89,.10); margin-bottom:10px; }
.pricing-slider__label { color:#082b59; font:750 22px/1.2 Inter,sans-serif; }
.pricing-slider__stepper { display:flex; align-items:center; gap:8px; }
.pricing-slider__step { width:44px; height:44px; border:0; border-radius:10px; color:#fff; background:#006be6; font:800 22px/1 Inter,sans-serif; cursor:pointer; }
.pricing-slider__step:focus-visible, .pricing-slider__number:focus-visible, .pricing-slider__range:focus-visible { outline:3px solid #6be1d1; outline-offset:2px; }
.pricing-slider__number { width:72px; height:44px; text-align:center; color:#082b59; font:800 22px/1 Inter,sans-serif; border:1px solid #c8d9e9; border-radius:10px; }
.pricing-slider__range { grid-column:1 / -1; width:100%; accent-color:#006be6; }
.pricing-slider__note { grid-column:1 / -1; margin:0; color:#405b73; font-size:14px; }
.preview-plan-badge[hidden] { display:none; }
@media(max-width:700px){.pricing-slider{grid-template-columns:1fr}.pricing-slider__label{font-size:19px}}

/* Walkthrough 32: the sign-up price card and slider, same pattern as Plan & billing. */
.signup-a__slider { margin: 0 0 22px; }
.signup-a__amount { display:flex; align-items:baseline; gap:8px; margin:0; color:#082b59; }
.signup-a__amount strong { font:850 40px/1 Inter,sans-serif; }
.signup-a__amount span { font:600 15px/1.3 Inter,sans-serif; color:#4a6078; }
.signup-a__sentence { margin:12px 0 0; font-size:15px; line-height:1.55; color:#23405e; }
.signup-a__how { margin:14px 0 4px; border-top:1px solid #e6edf5; padding-top:10px; }
.signup-a__how summary { cursor:pointer; color:#006be6; font-weight:600; }
.signup-a__row--total { font-weight:800; }
.signup-a__summary .signup-a__amount, .signup-a__summary .signup-a__amount strong { color:#082b59; }

/* Walkthrough 37: a header tab with pages under it (Solutions). */
.preview-nav-group { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.preview-nav-toggle { min-width: 32px; min-height: 32px; border: 0; background: transparent; color: inherit; font-size: 12px; cursor: pointer; border-radius: 6px; }
.preview-nav-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.preview-nav-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; min-width: 240px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px rgba(8, 43, 89, .14); }
.preview-nav-menu[hidden] { display: none; }
.preview-nav-menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ssc-primary, #082b59); white-space: nowrap; }
.preview-nav-menu a:hover, .preview-nav-menu a[aria-current="page"] { background: var(--ssc-support, #eaf3ff); }
.preview-nav .preview-nav-menu a::after { display: none; }
@media (max-width: 760px) {
  .preview-nav-menu { position: static; min-width: 0; box-shadow: none; margin-top: 6px; }
  .preview-nav-group { flex-wrap: wrap; }
}
.preview-spotlight { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; max-width: 1180px; margin: 0 auto 48px; padding: 28px 32px; border: 1px solid var(--line); border-left: 6px solid var(--ssc-action, #006be6); border-radius: 16px; background: #fff; }
.preview-spotlight > div { max-width: 720px; }
.preview-spotlight h2 { margin: 0 0 8px; }

/* Product page photos (3 Oct 2026). */
.preview-page-hero--photo { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 52px; align-items: center; }
.preview-page-hero--photo .preview-page-hero-copy > p:not(.preview-kicker) { max-width: 620px; margin: 25px 0 0; color: var(--muted); font-size: 19px; }
.preview-page-hero-photo { margin: 0; }
.preview-page-hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 20px; box-shadow: 0 24px 60px rgba(13, 32, 56, .16); }
.product-jobs { padding: 70px 0 30px; }
.product-jobs-heading h2 { margin: 6px 0 28px; color: var(--teal-dark); font-family: var(--serif); font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.product-jobs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.product-jobs-grid article { background: #fff; border: 1px solid rgba(13, 32, 56, .08); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 34px rgba(13, 32, 56, .07); }
.product-jobs-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.product-jobs-grid h3 { margin: 20px 22px 8px; color: var(--teal-dark); font-size: 20px; line-height: 1.25; }
.product-jobs-grid p { margin: 0 22px 24px; color: var(--muted); font-size: 16px; line-height: 1.55; }
@media (max-width: 900px) {
  .preview-page-hero--photo { grid-template-columns: 1fr; gap: 32px; }
  .product-jobs-grid { grid-template-columns: 1fr; }
}
/* The "How it works" panel ran off the right edge on phones (found 3 Oct 2026). */
@media (max-width: 1050px) { .product-system { grid-template-columns: minmax(0, 1fr); } .product-system > * { min-width: 0; } }
@media (max-width: 680px) { .product-system-ui { padding: 18px; } .product-ui-kpis strong { font-size: 20px; } .product-ui-alert { grid-template-columns: 34px 1fr; } .product-ui-alert button { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 680px) { .product-ui-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .product-ui-kpis article { min-width: 0; padding: 12px; } }

/* Product page: every feature card is a link (3 Oct 2026). */
.preview-page-grid--links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.preview-link-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; background: #fff; border: 1px solid rgba(13, 32, 56, .1); border-radius: 18px; padding: 26px; box-shadow: 0 10px 28px rgba(13, 32, 56, .06); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.preview-link-card > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #006be6; color: #fff; font: 800 11px/1 Inter, sans-serif; }
.preview-link-card h2 { margin: 18px 0 8px; color: var(--teal-dark); font-size: 22px; line-height: 1.2; }
.preview-link-card p { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.preview-link-card b { margin-top: auto; color: #0057bd; font-size: 15px; }
.preview-link-card b i { font-style: normal; display: inline-block; transition: transform .15s ease; }
.preview-link-card:hover { transform: translateY(-3px); border-color: #006be6; box-shadow: 0 18px 40px rgba(0, 107, 230, .14); }
.preview-link-card:hover b i { transform: translateX(4px); }
.preview-link-card:focus-visible { outline: 3px solid #006be6; outline-offset: 3px; }
@media (max-width: 900px) { .preview-page-grid--links { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .preview-link-card, .preview-link-card b i { transition: none; } .preview-link-card:hover { transform: none; } }

/* The open Solutions menu sat behind the homepage hero (Edwin, 5 Oct 2026):
   the header had no stacking layer of its own, so the hero, later in the
   page, painted over it. The header always sits above the page content. */
.preview-header { position: relative; z-index: 50; }

/* Walkthrough 48 (Edwin, 5 Oct 2026, Option B): orange means "do it". Every
   solid button on the public site is Signal Orange with Deep Ink text (6.3 to
   1; white on orange is 2.6 to 1 and fails), so each page's one main action
   is the only warm colour on a blue page. A second choice is outlined, as
   the demo button is. Last in the file so no palette rule can turn it blue. */
.preview-button:not(.preview-button--ghost):not(.preview-button--secondary),
.palette-cobalt .preview-button:not(.preview-button--ghost):not(.preview-button--secondary),
.preview-header .preview-button:not(.preview-button--ghost):not(.preview-button--secondary) {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--ink);
  box-shadow: 0 7px 18px rgba(255, 122, 53, .28);
}
.preview-button:not(.preview-button--ghost):not(.preview-button--secondary):hover,
.palette-cobalt .preview-button:not(.preview-button--ghost):not(.preview-button--secondary):hover,
.preview-header .preview-button:not(.preview-button--ghost):not(.preview-button--secondary):hover {
  background: var(--gold);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink) inset;
}
.preview-button.preview-button--secondary,
.palette-cobalt .preview-button.preview-button--secondary {
  background: transparent;
  border: 1px solid var(--ssc-action);
  color: var(--ssc-action);
  box-shadow: none;
}
.preview-button.preview-button--secondary:hover,
.palette-cobalt .preview-button.preview-button--secondary:hover {
  background: rgba(0, 107, 230, .08);
  border-color: var(--ssc-action);
  color: var(--ssc-action);
}
/* On the dark pricing panel an outlined button is white: Current Blue on
   Control Navy is not an approved pairing. */
.pricing-intro .preview-button.preview-button--ghost,
.pricing-intro .preview-button.preview-button--ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .06);
}

/* ---- Films (19 Oct 2026): hero Video slide, homepage promo, /tour/ ---- */
.preview-laptop-camera { pointer-events: none; }
.tour-hero-film { position: relative; z-index: 2; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: inherit; background: #0d2038; }
.tour-hero-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tour-hero-play { position: absolute; right: 6%; bottom: 9%; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: 999px; background: #ff7a35; color: #0d2038; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 30px rgba(13, 32, 56, .35); }
.tour-hero-film:focus-visible { outline: 3px solid #ff7a35; outline-offset: -3px; }
.tour-promo, .tour-frame { position: relative; }
.tour-promo video, .tour-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0d2038; }
.tour-frame video { border-radius: 18px; }
.tour-promo-cta, .tour-frame-cta { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 26px; border-radius: 999px; background: #ff7a35; color: #0d2038; font-weight: 800; font-size: 18px; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 28px rgba(13, 32, 56, .35); }
.tour-promo-cta[hidden], .tour-frame-cta[hidden] { display: none; }
.tour-promo-switch { margin: 0; padding: 4px 20px; font-size: 14px; color: #52677e; background: #f5f9ff; border-top: 1px solid #dce6f0; }
.tour-promo-switch button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: #006be6; font: inherit; text-decoration: underline; cursor: pointer; }
.preview-marketing-page main.tour-page { max-width: 1120px; margin: 0 auto; padding: 28px 16px 56px; color: #0d2038; }
/* Tour hero: copy left, film card right (550px wide, the Hostaway page frame plus 15%), so the figures sit on the first screen. */
.tour-page-hero { display: grid; grid-template-columns: minmax(0, 1fr) 580px; grid-template-rows: auto auto; column-gap: clamp(28px, 4vw, 56px); align-items: center; align-content: center; padding: 36px clamp(24px, 4vw, 48px); color: #fff; background: linear-gradient(135deg, #061f43, #08396f 58%, #006b71); border-radius: 22px; box-shadow: 0 28px 70px rgba(8, 43, 89, .22); }
.tour-page-hero .preview-kicker { color: #65dfce; }
.tour-hero-copy { align-self: end; }
.tour-hero-card { grid-column: 2; grid-row: 1 / 3; display: grid; gap: 10px; justify-items: center; padding: 14px; background: #fff; border: 1px solid rgba(255, 255, 255, .6); border-radius: 17px; box-shadow: 0 25px 60px rgba(0, 0, 0, .24); color: #0d2038; }
.tour-hero-card .tour-frame { width: 100%; }
.tour-hero-card .tour-frame video { border-radius: 12px; }
.tour-hero-foot { grid-column: 1; align-self: start; }
/* On the dark band the outlined button is white, not blue (Codex review, 22 Oct 2026: blue on navy failed contrast). */
.tour-page-hero .preview-button.preview-button--ghost { border-color: #fff; color: #fff; }
.tour-page-hero .preview-button.preview-button--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.tour-page h1 { max-width: 520px; margin: 6px 0 14px; font: 750 clamp(28px, 3.2vw, 40px)/1.08 Manrope, Inter, sans-serif; letter-spacing: -.03em; }
.tour-switch { display: inline-flex; gap: 4px; margin: 0; padding: 4px; border-radius: 999px; background: #e6edf6; }
.tour-switch button { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: #0d2038; font: 600 15px/1 inherit; cursor: pointer; }
.tour-switch button[aria-pressed="true"] { background: #0d2038; color: #fff; }
.tour-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 10px; }
.tour-note { max-width: 480px; margin: 0; color: #c9deed; font-size: 14px; }
.tour-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0 0; }
.tour-proof article { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #fff; border: 1px solid #d9e2ee; border-radius: 16px; }
.tour-proof span { font-size: 14px; }
.tour-proof strong { color: #ff7a35; font-size: 26px; }
.tour-more { margin-top: 20px; }
.tour-more h2 { margin: 0 0 8px; font-size: 18px; }
.tour-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.tour-list button { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #d9e2ee; border-radius: 12px; background: #fff; color: #0d2038; font: inherit; text-align: left; cursor: pointer; }
.tour-list button[aria-current="true"] { border-color: #ff7a35; box-shadow: 0 0 0 2px #ff7a35 inset; }
.tour-list small { color: #3d4f66; }
@media (max-width: 1000px) { .tour-page-hero { grid-template-columns: 1fr; row-gap: 16px; padding: 24px 18px; } .tour-hero-card, .tour-hero-foot { grid-column: 1; grid-row: auto; } .tour-hero-card { width: 100%; box-sizing: border-box; } }
@media (max-width: 680px) { .preview-marketing-page main.tour-page { padding: 12px 12px 40px; } .tour-page-hero { padding: 18px 14px; border-radius: 16px; } .tour-page h1 { font-size: 26px; } .tour-hero-play { right: 4%; bottom: 6%; padding: 8px 14px; font-size: 13px; } .tour-promo-cta, .tour-frame-cta { top: 45%; font-size: 16px; padding: 10px 20px; } }

/* Footer social links: inline icons, white like the other footer links. */
.preview-footer .ssc-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px 0; border-radius: 50%; color: var(--white); }
.preview-footer .ssc-social:hover { background: rgba(255, 255, 255, .14); }
.preview-footer .ssc-social:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }