:root {
    --mk-bg: #07111f;
    --mk-panel-light: #f5f8fc;
    --mk-text: #f8fbff;
    --mk-ink: #102035;
    --mk-muted-dark: #5d6d80;
    --mk-line: rgba(255, 255, 255, .1);
    --mk-blue: #4f8cff;
    --mk-blue-dark: #2867dc;
    --mk-cyan: #4cc9f0;
    --mk-green: #5de2ac;
    --mk-shadow: 0 28px 80px rgba(1, 8, 18, .36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.marketing-body { min-width: 320px; overflow-x: hidden; background: var(--mk-bg); color: var(--mk-text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.marketing-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 10px 14px; border-radius: 10px; background: white; color: #07111f; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.marketing-header { position: sticky; top: 0; z-index: 100; background: rgba(7, 17, 31, .82); border-bottom: 1px solid rgba(255, 255, 255, .07); backdrop-filter: blur(18px); }
.nav-shell { width: min(1180px, calc(100% - 40px)); min-height: 78px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.marketing-brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; letter-spacing: -.025em; white-space: nowrap; }
.marketing-brand img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 24px rgba(79, 140, 255, .22); }
.marketing-brand strong { color: white; }
.marketing-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 700; color: #c3d0df; }
.marketing-nav > a:not(.button) { transition: color .2s ease; }
.marketing-nav > a:not(.button):hover { color: white; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--mk-line); border-radius: 12px; background: rgba(255,255,255,.05); padding: 11px; }
.nav-toggle > span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; border-radius: 2px; background: white; }

.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 21px; border: 1px solid transparent; border-radius: 13px; font-weight: 800; letter-spacing: -.01em; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding-inline: 17px; background: var(--mk-blue); color: white; }
.button-primary { background: linear-gradient(135deg, var(--mk-blue), #3475e8); color: white; box-shadow: 0 14px 36px rgba(45, 111, 232, .28); }
.button-primary:hover { box-shadow: 0 18px 46px rgba(45, 111, 232, .38); }
.button-secondary { border-color: rgba(255,255,255,.17); background: rgba(255,255,255,.055); color: white; }
.button-light { background: white; color: #102035; box-shadow: 0 18px 42px rgba(6, 20, 40, .22); }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: #78a7ff; font-weight: 800; }

.hero { min-height: 735px; display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; gap: 68px; padding-block: 92px 110px; position: relative; }
.hero::before { content: ""; position: absolute; width: 600px; height: 600px; left: -360px; top: -120px; border-radius: 50%; background: rgba(48, 111, 234, .17); filter: blur(4px); pointer-events: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #91b6ff; font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow > span { width: 20px; height: 2px; border-radius: 10px; background: var(--mk-cyan); }
.hero h1 { max-width: 650px; margin: 22px 0; font-size: clamp(52px, 6.5vw, 82px); line-height: .98; letter-spacing: -.06em; }
.hero h1 em { display: block; color: #79a8ff; font-style: normal; }
.hero-lead { max-width: 620px; margin: 0; color: #b4c3d4; font-size: 19px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.trust-list { display: flex; flex-wrap: wrap; gap: 18px 24px; list-style: none; padding: 0; margin: 28px 0 0; color: #aebdd0; font-size: 13px; font-weight: 650; }
.trust-list span { color: var(--mk-green); margin-right: 5px; }

.hero-product { position: relative; }
.hero-product::before { content: ""; position: absolute; inset: 3% -8% -7% 10%; border-radius: 50%; background: rgba(79, 140, 255, .2); filter: blur(65px); }
.product-window { position: relative; overflow: hidden; border: 1px solid rgba(155, 190, 230, .18); border-radius: 25px; background: #0a1524; box-shadow: var(--mk-shadow); transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }
.window-bar { min-height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 17px; border-bottom: 1px solid rgba(255,255,255,.08); color: #a7b8ca; font-size: 12px; font-weight: 750; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #34506d; }
.live-pill { justify-self: end; display: inline-flex; align-items: center; gap: 6px; color: #93e7c2; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--mk-green); box-shadow: 0 0 12px var(--mk-green); }
.product-body { padding: 22px; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric-row > div { min-height: 106px; display: flex; flex-direction: column; padding: 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #10233a; }
.metric-row span, .metric-row small { color: #91a5ba; font-size: 10px; }
.metric-row strong { margin-block: 6px auto; font-size: 25px; }
.schedule-heading { display: flex; align-items: center; justify-content: space-between; margin: 25px 2px 10px; font-size: 13px; }
.schedule-heading span { color: #79a8ff; font-size: 11px; }
.appointment-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; margin-top: 8px; padding: 13px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: rgba(255,255,255,.035); }
.appointment-card.is-next { border-color: rgba(79,140,255,.35); background: rgba(79,140,255,.1); }
.appointment-card time { color: #9db7d2; font-size: 12px; font-weight: 800; }
.appointment-card strong, .appointment-card span { display: block; }
.appointment-card strong { font-size: 12px; }
.appointment-card span { margin-top: 3px; color: #8297ac; font-size: 10px; }
.appointment-card b { padding: 5px 7px; border-radius: 999px; background: rgba(72, 199, 148, .13); color: #86dcb8; font-size: 9px; }
.floating-proof { position: absolute; right: -24px; bottom: -35px; display: flex; flex-direction: column; padding: 15px 20px; border: 1px solid rgba(140, 182, 231, .26); border-radius: 15px; background: rgba(15, 33, 55, .96); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.floating-proof::before { content: "✓"; position: absolute; left: -15px; top: 16px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--mk-green); color: #062017; font-weight: 950; }
.floating-proof span { color: #96abc1; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.floating-proof strong { margin-top: 3px; font-size: 13px; }

.outcome-strip { border-block: 1px solid rgba(255,255,255,.075); background: #091522; }
.outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.outcome-grid p { min-height: 130px; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 24px 25px; border-right: 1px solid rgba(255,255,255,.075); }
.outcome-grid p:first-child { border-left: 1px solid rgba(255,255,255,.075); }
.outcome-grid strong, .outcome-grid span { display: block; }
.outcome-grid strong { margin-bottom: 7px; font-size: 14px; }
.outcome-grid span { color: #8fa3b8; font-size: 12px; line-height: 1.55; }

.section { padding-block: 118px; scroll-margin-top: 70px; }
.section-heading { max-width: 780px; margin-bottom: 48px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading.centered .eyebrow { justify-content: center; }
.section-heading h2, .process-copy h2, .final-cta h2 { margin: 17px 0 18px; font-size: clamp(39px, 5vw, 58px); line-height: 1.05; letter-spacing: -.05em; }
.section-heading p, .process-copy > p { margin: 0; color: #9eb0c3; font-size: 17px; line-height: 1.75; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1.1fr .75fr; align-items: end; gap: 70px; }
.split-heading p { padding-bottom: 8px; }

.showcase { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: stretch; }
.showcase-tabs { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.showcase-tabs button { display: grid; grid-template-columns: 35px 1fr; padding: 19px 18px; border: 1px solid transparent; border-radius: 16px; background: transparent; color: #91a4b9; text-align: left; cursor: pointer; transition: .2s ease; }
.showcase-tabs button:hover, .showcase-tabs button.is-active { border-color: rgba(118,165,255,.22); background: rgba(79,140,255,.09); color: white; }
.showcase-tabs span { grid-row: 1 / 3; color: #6097ff; font-size: 11px; font-weight: 900; }
.showcase-tabs strong { font-size: 15px; }
.showcase-tabs small { margin-top: 4px; color: #879bb0; line-height: 1.45; }
.showcase-frame { min-height: 480px; display: grid; place-items: center; overflow: hidden; padding: 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 27px; background: linear-gradient(145deg, #102a46, #091522); box-shadow: var(--mk-shadow); }
.showcase-frame figure { display: none; margin: 0; }
.showcase-frame figure.is-active { display: block; animation: fade-up .35s ease; }
.showcase-frame img { width: 100%; border-radius: 13px; box-shadow: 0 20px 55px rgba(0,0,0,.34); }
@keyframes fade-up { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.feature-section, .pricing-section { background: var(--mk-panel-light); color: var(--mk-ink); }
.feature-section .eyebrow, .pricing-section .eyebrow { color: var(--mk-blue-dark); }
.feature-section .section-heading p, .pricing-section .section-heading p { color: var(--mk-muted-dark); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.feature-card { min-height: 265px; display: flex; flex-direction: column; padding: 29px; border: 1px solid #dce5ef; border-radius: 20px; background: white; box-shadow: 0 12px 35px rgba(35, 66, 105, .07); }
.feature-card-wide { grid-column: span 2; }
.feature-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #eaf1ff; color: var(--mk-blue-dark); font-size: 20px; font-weight: 900; }
.feature-card h3 { margin: 24px 0 10px; font-size: 20px; letter-spacing: -.025em; }
.feature-card p { margin: 0; color: var(--mk-muted-dark); line-height: 1.7; }
.mini-booking { margin-top: auto; padding-top: 25px; }
.mini-booking > span { color: #6a7d91; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.mini-booking > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.mini-booking b { padding: 8px 11px; border: 1px solid #d9e3ee; border-radius: 9px; color: #52677d; font-size: 11px; }
.mini-booking b.selected { border-color: var(--mk-blue); background: var(--mk-blue); color: white; }

.process-section { display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 90px; }
.process-copy h2 { margin-top: 19px; }
.process-copy .text-link { margin-top: 25px; }
.process-list { list-style: none; padding: 0; margin: 0; }
.process-list li { display: grid; grid-template-columns: 55px 1fr; gap: 20px; padding: 25px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.process-list li:first-child { border-top: 1px solid rgba(255,255,255,.1); }
.process-list li > span { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid rgba(106,159,255,.27); border-radius: 14px; background: rgba(79,140,255,.09); color: #81abff; font-weight: 850; }
.process-list strong { font-size: 17px; }
.process-list p { margin: 7px 0 0; color: #91a4b9; font-size: 14px; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 31px; border: 1px solid #d8e2ec; border-radius: 22px; background: white; box-shadow: 0 14px 40px rgba(35,66,105,.07); }
.price-card.featured { border: 2px solid var(--mk-blue); box-shadow: 0 20px 55px rgba(40,103,220,.17); transform: translateY(-10px); }
.popular-badge { position: absolute; top: -14px; right: 20px; padding: 7px 12px; border-radius: 999px; background: var(--mk-blue-dark); color: white; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.plan-label { color: var(--mk-blue-dark); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.price-card h3 { margin: 17px 0 10px; font-size: 48px; letter-spacing: -.05em; }
.price-card h3 sup { position: relative; top: -16px; margin-right: 2px; font-size: 20px; }
.price-card h3 small { margin-left: 5px; color: #74869a; font-size: 13px; letter-spacing: 0; }
.price-card p { min-height: 69px; margin: 0; color: #637589; line-height: 1.6; }
.price-card ul { flex: 1; display: grid; gap: 12px; list-style: none; padding: 25px 0; margin: 24px 0 0; border-top: 1px solid #e3eaf1; }
.price-card li { position: relative; padding-left: 25px; color: #41566d; font-size: 14px; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: #18a873; font-weight: 900; }
.price-card .button-secondary { border-color: #cbd8e5; background: #f8fafc; color: #1e3853; }
.pricing-note { max-width: 760px; margin: 28px auto 0; color: #637589; font-size: 13px; text-align: center; }

.faq-section { max-width: 1000px; }
.faq-grid { display: grid; gap: 10px; }
.faq-grid details { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.035); }
.faq-grid details[open] { background: rgba(79,140,255,.07); border-color: rgba(111,162,255,.25); }
.faq-grid summary { position: relative; padding: 21px 55px 21px 23px; font-weight: 800; cursor: pointer; list-style: none; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: "+"; position: absolute; right: 22px; top: 16px; color: #7da8fb; font-size: 25px; font-weight: 400; }
.faq-grid details[open] summary::after { content: "–"; }
.faq-grid details p { margin: 0; padding: 0 55px 22px 23px; color: #95a9bd; font-size: 14px; line-height: 1.7; }

.final-cta { padding-block: 86px; background: linear-gradient(125deg, #2f70e4, #174da9); }
.final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.final-cta h2 { margin: 10px 0; max-width: 740px; }
.final-cta p { margin: 0; color: #d9e7ff; }
.cta-kicker { color: #cce0ff; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.final-cta .button { flex: 0 0 auto; }

.marketing-footer { background: #050c16; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 55px; padding-block: 68px 48px; }
.footer-brand p { max-width: 280px; margin: 18px 0 0; color: #71869b; font-size: 13px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 12px; }
.footer-grid > div > strong { margin-bottom: 4px; color: #dce7f3; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.footer-grid > div > a { color: #8094a8; font-size: 13px; }
.footer-grid > div > a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 22px 35px; border-top: 1px solid rgba(255,255,255,.07); color: #62778d; font-size: 11px; }

/* Signup */
.signup-body { min-height: 100vh; background: radial-gradient(circle at 12% 22%, rgba(53, 116, 232, .2), transparent 30%), var(--mk-bg); }
.signup-nav { display: flex; align-items: center; gap: 13px; color: #8fa2b7; font-size: 13px; }
.signup-nav a { padding: 9px 14px; border: 1px solid var(--mk-line); border-radius: 10px; color: white; font-weight: 800; }
.signup-shell { width: min(1120px, calc(100% - 40px)); min-height: calc(100vh - 150px); margin-inline: auto; display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: 80px; padding-block: 78px; }
.signup-copy { position: sticky; top: 145px; padding-top: 28px; }
.signup-copy h1 { margin: 21px 0 18px; font-size: clamp(43px, 5vw, 64px); line-height: 1; letter-spacing: -.055em; }
.signup-copy > p { margin: 0; color: #a8b8ca; font-size: 17px; line-height: 1.75; }
.signup-benefits { display: grid; gap: 19px; margin-top: 34px; }
.signup-benefits > div { display: grid; grid-template-columns: 28px 1fr; gap: 13px; }
.signup-benefits > div > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: rgba(93,226,172,.12); color: var(--mk-green); font-size: 12px; font-weight: 900; }
.signup-benefits p { margin: 0; }
.signup-benefits strong, .signup-benefits small { display: block; }
.signup-benefits strong { font-size: 14px; }
.signup-benefits small { margin-top: 3px; color: #8398ad; font-size: 12px; line-height: 1.5; }
.trial-summary { margin-top: 34px; padding: 19px 21px; border: 1px solid rgba(121,168,255,.18); border-radius: 16px; background: rgba(79,140,255,.07); }
.trial-summary span, .trial-summary strong, .trial-summary small { display: block; }
.trial-summary span { color: #7fa8f7; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.trial-summary strong { margin-top: 7px; font-size: 15px; }
.trial-summary small { margin-top: 5px; color: #879cb1; }
.signup-card { padding: 40px; border: 1px solid rgba(255,255,255,.11); border-radius: 25px; background: rgba(15, 33, 55, .88); box-shadow: var(--mk-shadow); }
.signup-card-heading > span { color: #7da8fb; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.signup-card-heading h2 { margin: 9px 0 8px; font-size: 32px; letter-spacing: -.04em; }
.signup-card-heading p { margin: 0; color: #91a4b9; font-size: 14px; }
.signup-form { display: grid; gap: 20px; margin-top: 30px; }
.signup-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.signup-field { min-width: 0; }
.signup-field label { display: block; margin-bottom: 7px; color: #cfdae6; font-size: 12px; font-weight: 800; }
.signup-field input { width: 100%; min-height: 49px; padding: 0 14px; border: 1px solid rgba(165,190,218,.19); border-radius: 11px; outline: 0; background: #091725; color: white; transition: border-color .18s ease, box-shadow .18s ease; }
.signup-field input::placeholder { color: #60758a; }
.signup-field input:focus { border-color: #6598f6; box-shadow: 0 0 0 3px rgba(79,140,255,.14); }
.signup-field > small { display: block; margin-top: 6px; color: #71879c; font-size: 10px; line-height: 1.45; }
.signup-field .field-error { color: #ff9eaa; font-size: 11px; font-weight: 700; }
.workspace-input { display: flex; align-items: stretch; }
.workspace-input input { border-radius: 11px 0 0 11px; }
.workspace-input > span { display: flex; align-items: center; padding: 0 13px; border: 1px solid rgba(165,190,218,.19); border-left: 0; border-radius: 0 11px 11px 0; background: rgba(255,255,255,.04); color: #8095aa; font-size: 11px; white-space: nowrap; }
.password-control { position: relative; }
.password-control input { padding-right: 58px; }
.password-control button { position: absolute; right: 7px; top: 7px; height: 35px; padding: 0 8px; border: 0; border-radius: 7px; background: rgba(255,255,255,.055); color: #8db0e8; font-size: 10px; font-weight: 800; cursor: pointer; }
.signup-submit { width: 100%; min-height: 55px; margin-top: 4px; border: 0; cursor: pointer; }
.signup-policy { margin: -5px 0 0; color: #708499; font-size: 10px; line-height: 1.55; text-align: center; }
.signup-policy a { color: #92b6fa; text-decoration: underline; text-underline-offset: 2px; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.turnstile-wrap { display: flex; min-height: 65px; align-items: center; justify-content: center; }
.form-message { margin-top: 20px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.05); color: #dbe6f2; font-size: 12px; }
.form-message.error, .form-message ul.errorlist { border-color: rgba(255,115,131,.25); background: rgba(190,40,60,.1); color: #ffc3ca; }
.form-message ul, .field-error ul { margin: 0; padding-left: 17px; }
.signup-footer { width: min(1120px, calc(100% - 40px)); display: flex; justify-content: space-between; gap: 25px; margin-inline: auto; padding-block: 25px 35px; border-top: 1px solid rgba(255,255,255,.08); color: #60758a; font-size: 11px; }
.signup-footer nav { display: flex; gap: 20px; }
.signup-footer a:hover { color: white; }

/* Focused public pages */
.simple-page-body { min-height: 100vh; background: radial-gradient(circle at 50% 12%, rgba(58,122,240,.2), transparent 32%), var(--mk-bg); }
.simple-page-shell { width: min(620px, calc(100% - 32px)); min-height: calc(100vh - 78px); display: grid; place-items: center; margin-inline: auto; padding-block: 60px; }
.simple-page-card { width: 100%; padding: 42px; border: 1px solid rgba(255,255,255,.11); border-radius: 25px; background: rgba(15,33,55,.9); box-shadow: var(--mk-shadow); }
.simple-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 27px; border-radius: 14px; background: rgba(79,140,255,.13); color: #8bb1fa; font-size: 22px; font-weight: 900; }
.simple-page-card h1 { margin: 15px 0 13px; font-size: clamp(34px, 7vw, 47px); line-height: 1.05; letter-spacing: -.045em; }
.simple-page-card > p { margin: 0; color: #91a5ba; line-height: 1.7; }
.simple-form { display: grid; gap: 12px; margin-top: 28px; }
.simple-form > label { color: #d4deea; font-size: 12px; font-weight: 800; }
.simple-form input, .simple-form select, .simple-form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(165,190,218,.19); border-radius: 11px; outline: 0; background: #091725; color: white; }
.simple-form input:focus, .simple-form select:focus, .simple-form textarea:focus { border-color: #6598f6; box-shadow: 0 0 0 3px rgba(79,140,255,.14); }
.simple-form > small { color: #72879c; font-size: 11px; line-height: 1.5; }
.simple-form .button { width: 100%; margin-top: 10px; border: 0; cursor: pointer; }
.simple-back-link { display: inline-block; margin-top: 25px; color: #7f9fc8; font-size: 12px; font-weight: 700; }
.status-card .button { width: 100%; margin-top: 25px; }
.status-card .simple-back-link { display: block; text-align: center; }
.status-note { display: grid; gap: 5px; margin-top: 25px; padding: 17px; border: 1px solid rgba(121,168,255,.18); border-radius: 13px; background: rgba(79,140,255,.07); overflow-wrap: anywhere; }
.status-note span { color: #8aa0b7; font-size: 12px; line-height: 1.6; }
.mail-icon { font-size: 19px; }
.warning-icon { background: rgba(255,177,72,.13); color: #ffc56f; }
.success-icon { background: rgba(93,226,172,.12); color: var(--mk-green); }
.support-page-shell { width: min(1050px, calc(100% - 40px)); min-height: calc(100vh - 150px); display: grid; grid-template-columns: .75fr 1.25fr; align-items: start; gap: 70px; margin-inline: auto; padding-block: 75px; }
.support-intro { padding-top: 25px; }
.support-intro h1 { margin: 18px 0 15px; font-size: clamp(43px, 6vw, 64px); line-height: 1; letter-spacing: -.055em; }
.support-intro > p { color: #98aabd; line-height: 1.75; }
.support-contact-card { margin-top: 30px; padding: 20px; border: 1px solid rgba(121,168,255,.18); border-radius: 16px; background: rgba(79,140,255,.07); overflow-wrap: anywhere; }
.support-contact-card span, .support-contact-card strong, .support-contact-card small { display: block; }
.support-contact-card span { color: #7fa8f7; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.support-contact-card strong { margin-top: 7px; }
.support-contact-card small { margin-top: 5px; color: #8297ac; }
.support-form-card select, .support-form-card textarea { width: 100%; padding: 12px 14px; border: 1px solid rgba(165,190,218,.19); border-radius: 11px; outline: 0; background: #091725; color: white; }
.support-form-card textarea { min-height: 150px; resize: vertical; }
.support-form-card select:focus, .support-form-card textarea:focus { border-color: #6598f6; box-shadow: 0 0 0 3px rgba(79,140,255,.14); }

@media (max-width: 980px) {
    .hero { grid-template-columns: 1fr; gap: 58px; padding-block: 80px 105px; }
    .hero-copy { max-width: 760px; }
    .hero-product { max-width: 720px; }
    .outcome-grid { grid-template-columns: repeat(2, 1fr); }
    .outcome-grid p:nth-child(3) { border-left: 1px solid rgba(255,255,255,.075); }
    .showcase { grid-template-columns: 1fr; }
    .showcase-tabs { display: grid; grid-template-columns: repeat(3, 1fr); }
    .showcase-tabs button { grid-template-columns: 26px 1fr; padding: 15px; }
    .showcase-tabs small { display: none; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .process-section { grid-template-columns: 1fr; gap: 50px; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 650px; margin-inline: auto; }
    .price-card.featured { transform: none; }
    .price-card p { min-height: auto; }
    .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
    .footer-grid > div:last-child { grid-column: 2 / 3; }
    .signup-shell { grid-template-columns: 1fr; gap: 45px; }
    .signup-copy { position: static; max-width: 720px; padding-top: 0; }
    .support-page-shell { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 760px) {
    .marketing-shell, .nav-shell { width: min(100% - 28px, 1180px); }
    .nav-shell { min-height: 68px; }
    .marketing-brand { font-size: 17px; }
    .marketing-brand img { width: 38px; height: 38px; }
    .nav-toggle { display: block; }
    .marketing-nav { position: absolute; top: calc(100% + 1px); left: 14px; right: 14px; display: none; align-items: stretch; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 0 0 18px 18px; background: #0a1727; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
    .marketing-nav.is-open { display: flex; flex-direction: column; gap: 2px; }
    .marketing-nav a { padding: 12px 13px; }
    .marketing-nav .button { width: 100%; margin-top: 5px; }
    .hero { min-height: auto; padding-block: 68px 90px; }
    .hero h1 { font-size: clamp(46px, 14vw, 67px); }
    .hero-lead { font-size: 17px; }
    .hero-actions { display: grid; }
    .hero-actions .button { width: 100%; }
    .trust-list { display: grid; gap: 9px; }
    .product-window { transform: none; }
    .metric-row { gap: 6px; }
    .metric-row > div { min-height: 88px; padding: 11px; }
    .metric-row strong { font-size: 19px; }
    .appointment-card { grid-template-columns: 42px 1fr; }
    .appointment-card b { display: none; }
    .floating-proof { right: 5px; bottom: -47px; }
    .outcome-grid { grid-template-columns: 1fr; }
    .outcome-grid p, .outcome-grid p:nth-child(3) { min-height: auto; padding: 22px 5px; border: 0; border-bottom: 1px solid rgba(255,255,255,.075); }
    .section { padding-block: 85px; }
    .section-heading h2, .process-copy h2, .final-cta h2 { font-size: clamp(35px, 10.5vw, 48px); }
    .split-heading { grid-template-columns: 1fr; gap: 8px; }
    .showcase-tabs { display: flex; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .showcase-tabs button { min-width: 145px; display: block; }
    .showcase-tabs span { display: block; margin-bottom: 6px; }
    .showcase-frame { min-height: 260px; padding: 9px; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-card-wide { grid-column: auto; }
    .process-list li { grid-template-columns: 46px 1fr; gap: 13px; }
    .price-card { padding: 25px; }
    .final-cta { padding-block: 72px; }
    .final-cta-inner { align-items: flex-start; flex-direction: column; gap: 28px; }
    .final-cta .button { width: 100%; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 25px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-grid > div:last-child { grid-column: auto; }
    .footer-bottom { flex-direction: column; }
    .signup-nav span { display: none; }
    .signup-shell { width: min(100% - 28px, 1120px); padding-block: 50px; }
    .signup-copy h1 { font-size: clamp(40px, 12vw, 55px); }
    .signup-card { padding: 25px 19px; border-radius: 19px; }
    .signup-field-row { grid-template-columns: 1fr; }
    .workspace-input { display: block; }
    .workspace-input input { border-radius: 11px; }
    .workspace-input > span { display: none; }
    .signup-footer { width: min(100% - 28px, 1120px); flex-direction: column; }
    .simple-page-card { padding: 30px 20px; }
    .support-page-shell { width: min(100% - 28px, 1050px); padding-block: 50px; }
}

/* Verified-account business builder ------------------------------------- */
.verified-account-pill { padding: 8px 12px; border: 1px solid rgba(83,225,197,.25); border-radius: 999px; background: rgba(58,212,183,.09); color: #8ee9d7; font-size: 12px; font-weight: 800; }
.business-setup-shell { width: min(980px,calc(100% - 40px)); margin-inline: auto; padding: 70px 0 100px; }
.business-setup-heading { max-width: 780px; margin: 0 auto 42px; text-align: center; }
.business-setup-heading .eyebrow { justify-content: center; }
.business-setup-heading h1 { margin: 17px 0 15px; font-size: clamp(43px,6vw,66px); line-height: .98; letter-spacing: -.055em; }
.business-setup-heading p { margin: 0; color: #aebed0; font-size: 17px; line-height: 1.7; }
.business-setup-form { display: grid; gap: 18px; }
.business-setup-card { position: relative; padding: 34px; border: 1px solid rgba(151,187,226,.16); border-radius: 24px; background: #0d1d30; box-shadow: 0 22px 55px rgba(0,6,18,.17); }
.business-setup-number { position: absolute; left: -18px; top: 30px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg,#3978ff,#22c9c0); color: white; font-weight: 950; box-shadow: 0 10px 25px rgba(45,117,238,.34); }
.business-setup-card-heading { margin-bottom: 24px; }
.business-setup-card-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.03em; }
.business-setup-card-heading p { margin: 7px 0 0; color: #91a6bc; }
.service-preset-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 21px; }
.service-preset-card { min-height: 115px; display: flex; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid rgba(143,180,220,.17); border-radius: 16px; background: rgba(255,255,255,.025); cursor: pointer; }
.service-preset-card.selected { border-color: #3ca9f0; background: rgba(48,131,235,.11); box-shadow: 0 0 0 3px rgba(41,145,230,.08); }
.service-preset-card input { width: auto; margin-top: 3px; }
.service-preset-card strong,.service-preset-card small { display: block; }
.service-preset-card small { margin-top: 7px; color: #8da2b9; line-height: 1.45; }
.workday-options ul { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.workday-options label { min-height: 65px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 9px; border: 1px solid rgba(145,180,218,.16); border-radius: 13px; color: #b6c5d5; font-size: 11px; font-weight: 800; text-align: center; }
.workday-options input { width: auto; }
.business-setup-submit { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px 32px; border: 1px solid rgba(74,219,194,.24); border-radius: 22px; background: linear-gradient(110deg,rgba(39,101,217,.18),rgba(31,196,168,.11)); }
.business-setup-submit strong { font-size: 18px; }
.business-setup-submit p { max-width: 610px; margin: 6px 0 0; color: #9db0c4; line-height: 1.6; }
.business-setup-submit .button { flex: 0 0 auto; }

@media (max-width: 740px) {
    .verified-account-pill { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .business-setup-shell { width: min(100% - 24px,980px); padding-top: 45px; }
    .business-setup-card { padding: 28px 20px; }
    .business-setup-number { left: 18px; top: -16px; }
    .service-preset-cards { grid-template-columns: 1fr; }
    .workday-options ul { grid-template-columns: repeat(2,1fr); }
    .business-setup-submit { align-items: stretch; flex-direction: column; padding: 24px 20px; }
    .business-setup-submit .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 2026 brand preview ------------------------------------------------------ */
.brand-site {
    --brand-night: #07182d;
    --brand-night-2: #0a213c;
    --brand-night-3: #102b4b;
    --brand-paper: #f4f7fb;
    --brand-white: #ffffff;
    --brand-ink: #10243e;
    --brand-muted: #61738a;
    --brand-line: #dce5ef;
    --brand-blue: #3e68ff;
    --brand-blue-dark: #2854dd;
    --brand-teal: #19bda8;
    --brand-mint: #7ff0c8;
    --brand-radius: 24px;
    --brand-shadow: 0 28px 80px rgba(2, 15, 31, .2);
    background: var(--brand-night);
    color: #f8fbff;
}

.brand-site .brand-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.brand-header { position: sticky; top: 0; z-index: 200; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(7,24,45,.86); backdrop-filter: blur(18px); }
.brand-nav-shell { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand-logo { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand-logo img { width: 46px; height: 46px; filter: drop-shadow(0 10px 22px rgba(36,115,225,.24)); }
.brand-logo span { display: flex; align-items: baseline; gap: 5px; color: #fff; font-size: 18px; line-height: 1; letter-spacing: -.025em; }
.brand-logo strong { font-weight: 850; }
.brand-logo small { color: #88a9d7; font-size: inherit; }
.brand-nav { display: flex; align-items: center; gap: 28px; color: #bdcbe0; font-size: 14px; font-weight: 750; }
.brand-nav > a { position: relative; transition: color .2s ease; }
.brand-nav > a:not(.brand-button):hover, .brand-nav > a[aria-current="page"] { color: #fff; }
.brand-nav > a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; border-radius: 2px; background: linear-gradient(90deg,var(--brand-blue),var(--brand-teal)); }
.brand-nav .brand-login { padding-left: 25px; border-left: 1px solid rgba(255,255,255,.12); }
.brand-nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.05); padding: 11px; }
.brand-nav-toggle i { display: block; width: 100%; height: 2px; margin: 5px 0; border-radius: 2px; background: #fff; }

.brand-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid transparent; border-radius: 14px; font-weight: 850; letter-spacing: -.015em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.brand-button:hover { transform: translateY(-2px); }
.brand-button-small { min-height: 43px; padding-inline: 17px; border-radius: 12px; background: linear-gradient(135deg,var(--brand-blue),#2c89dd); color: #fff; box-shadow: 0 10px 28px rgba(45,101,239,.27); }
.brand-button-primary { background: linear-gradient(135deg,var(--brand-blue),#2a8fd5 68%,var(--brand-teal)); color: #fff; box-shadow: 0 16px 40px rgba(42,98,232,.3); }
.brand-button-primary:hover { box-shadow: 0 20px 50px rgba(42,98,232,.42); }
.brand-button-ghost { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055); color: #fff; }
.brand-button-light { background: #fff; color: var(--brand-ink); box-shadow: 0 18px 45px rgba(0,20,50,.22); }
.brand-button-outline-dark { border-color: #c9d6e4; background: transparent; color: var(--brand-ink); }
.brand-text-link { display: inline-flex; align-items: center; gap: 9px; color: #85a9ff; font-weight: 850; }

.brand-kicker { display: inline-flex; align-items: center; gap: 10px; color: #9ab8ff; font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.brand-kicker > span { width: 24px; height: 2px; border-radius: 2px; background: var(--brand-mint); }
.brand-kicker-dark { color: var(--brand-blue-dark); }
.brand-heading { max-width: 800px; margin-bottom: 52px; }
.brand-heading h2, .brand-workflow-copy h2, .brand-story-copy h2, .brand-pricing-preview h2, .brand-billing-grid h2 { margin: 18px 0 18px; font-size: clamp(39px,5vw,60px); line-height: 1.04; letter-spacing: -.052em; }
.brand-heading p, .brand-workflow-copy > p, .brand-story-copy > p, .brand-pricing-preview p, .brand-billing-grid > div > p { margin: 0; color: var(--brand-muted); font-size: 17px; line-height: 1.75; }
.brand-heading-split { max-width: none; display: grid; grid-template-columns: 1.15fr .75fr; align-items: end; gap: 80px; }
.brand-heading-centered { margin-inline: auto; text-align: center; }
.brand-heading-centered .brand-kicker { justify-content: center; }
.brand-section { padding-block: 118px; scroll-margin-top: 95px; }
.brand-section-light { background: var(--brand-paper); color: var(--brand-ink); }

.brand-hero { position: relative; overflow: hidden; }
.brand-hero::before { content: ""; position: absolute; width: 700px; height: 700px; left: -420px; top: -260px; border-radius: 50%; background: rgba(58,100,255,.19); filter: blur(6px); }
.brand-hero::after { content: ""; position: absolute; width: 500px; height: 500px; right: -280px; bottom: -300px; border-radius: 50%; background: rgba(25,189,168,.12); }
.brand-hero-grid { min-height: 740px; position: relative; z-index: 1; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 72px; padding-block: 90px 110px; }
.brand-hero-copy h1 { max-width: 650px; margin: 21px 0 24px; font-size: clamp(58px,6.5vw,86px); line-height: .94; letter-spacing: -.065em; }
.brand-hero-copy h1 em { color: transparent; font-style: normal; background: linear-gradient(90deg,#7da4ff,#5ecdd1 75%); -webkit-background-clip: text; background-clip: text; }
.brand-hero-copy > p { max-width: 610px; margin: 0; color: #afbed1; font-size: 19px; line-height: 1.72; }
.brand-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.brand-actions-centered { justify-content: center; }
.brand-trust-row { display: flex; flex-wrap: wrap; gap: 13px 25px; list-style: none; padding: 0; margin: 27px 0 0; color: #a8b9cc; font-size: 13px; font-weight: 700; }
.brand-trust-row span { margin-right: 5px; color: var(--brand-mint); }
.brand-trust-row-centered { justify-content: center; }

.brand-hero-visual { position: relative; min-width: 0; }
.brand-orbit { position: absolute; border: 1px solid rgba(106,153,255,.18); border-radius: 50%; pointer-events: none; }
.brand-orbit-one { width: 560px; height: 560px; right: -80px; top: -100px; }
.brand-orbit-two { width: 410px; height: 410px; right: -5px; top: -25px; border-color: rgba(29,194,172,.16); }
.brand-product-frame { position: relative; overflow: hidden; border: 1px solid rgba(169,199,235,.2); border-radius: 24px; background: #09182a; box-shadow: 0 38px 100px rgba(0,5,16,.55); transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.brand-browser-bar { min-height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-browser-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #36516f; }
.brand-browser-bar small { max-width: 330px; overflow: hidden; margin-inline: auto; padding: 5px 16px; border-radius: 999px; background: rgba(255,255,255,.05); color: #7f94ab; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.brand-product-frame > img { width: 100%; min-height: 300px; object-fit: cover; object-position: top left; }
.brand-float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border: 1px solid rgba(164,202,238,.24); border-radius: 15px; background: rgba(10,33,58,.95); box-shadow: 0 18px 45px rgba(0,6,18,.4); }
.brand-float-card span, .brand-float-card small { display: block; }
.brand-float-card span { font-size: 12px; font-weight: 800; }
.brand-float-card small { margin-top: 2px; color: #8da1b8; font-size: 10px; font-weight: 600; }
.brand-float-confirmed { right: -20px; bottom: -35px; }
.brand-float-confirmed i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: rgba(127,240,200,.14); color: var(--brand-mint); font-style: normal; font-weight: 900; }
.brand-float-available { left: -26px; top: 55px; }
.brand-float-available b { font-size: 25px; color: #8cb0ff; }

.brand-proof { border-block: 1px solid rgba(255,255,255,.08); background: #081a30; }
.brand-proof-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.brand-proof-grid > div { min-height: 126px; display: flex; flex-direction: column; justify-content: center; padding: 24px 27px; border-right: 1px solid rgba(255,255,255,.08); }
.brand-proof-grid > div:first-child { border-left: 1px solid rgba(255,255,255,.08); }
.brand-proof-grid strong { margin-bottom: 6px; font-size: 14px; }
.brand-proof-grid span { color: #849ab2; font-size: 12px; line-height: 1.55; }

.brand-benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.brand-benefit-card { min-height: 310px; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); background: #fff; box-shadow: 0 15px 45px rgba(27,57,92,.075); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.brand-benefit-card:hover { transform: translateY(-5px); border-color: #b9cceb; box-shadow: 0 24px 55px rgba(27,57,92,.12); }
.brand-benefit-card-wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 250px; gap: 30px; }
.brand-card-number { align-self: flex-start; color: var(--brand-blue-dark); font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.brand-benefit-card h3 { margin: 28px 0 11px; color: var(--brand-ink); font-size: 22px; line-height: 1.2; letter-spacing: -.03em; }
.brand-benefit-card p { margin: 0; color: var(--brand-muted); line-height: 1.7; }
.brand-benefit-card b { margin-top: auto; padding-top: 25px; color: var(--brand-blue-dark); font-size: 13px; }
.brand-benefit-card-wide .brand-card-number { grid-column: 1 / -1; }
.brand-benefit-card-wide h3 { margin-top: 0; }
.brand-time-demo { align-self: end; padding: 21px; border-radius: 18px; background: #eef3fa; }
.brand-time-demo small { display: block; margin-bottom: 12px; color: #708096; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.brand-time-demo span { display: inline-block; margin: 4px 2px; padding: 8px 10px; border: 1px solid #d1dce9; border-radius: 9px; background: #fff; color: #53667c; font-size: 11px; font-weight: 800; }
.brand-time-demo .is-selected { border-color: var(--brand-blue); background: var(--brand-blue); color: #fff; }

.brand-workflow-section { position: relative; overflow: hidden; }
.brand-workflow-section::after { content: ""; position: absolute; width: 480px; height: 480px; right: -250px; top: 70px; border-radius: 50%; background: rgba(47,104,255,.12); }
.brand-workflow-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 100px; }
.brand-workflow-copy h2 { margin-top: 19px; }
.brand-workflow-copy > p { color: #9caec3; }
.brand-workflow-copy .brand-text-link { margin-top: 26px; }
.brand-step-list { list-style: none; padding: 0; margin: 0; }
.brand-step-list li { display: grid; grid-template-columns: 54px 1fr; gap: 19px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.brand-step-list li:first-child { border-top: 1px solid rgba(255,255,255,.11); }
.brand-step-list li > span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(120,166,255,.28); border-radius: 14px; background: rgba(62,104,255,.1); color: #87aaff; font-weight: 900; }
.brand-step-list strong { font-size: 17px; }
.brand-step-list p { margin: 7px 0 0; color: #8fa3ba; font-size: 14px; }

.brand-product-story { background: #eef3f8; color: var(--brand-ink); }
.brand-story-grid { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 75px; }
.brand-story-visual { overflow: hidden; padding: 12px; border: 1px solid #d4e0ec; border-radius: 26px; background: #fff; box-shadow: 0 30px 75px rgba(31,63,99,.16); transform: rotate(-1.2deg); }
.brand-story-visual img { width: 100%; height: auto; border-radius: 16px; object-fit: contain; }
.brand-story-copy > p { color: var(--brand-muted); }
.brand-story-copy ul { display: grid; gap: 11px; list-style: none; padding: 0; margin: 27px 0 30px; }
.brand-story-copy li { position: relative; padding-left: 28px; color: #415a73; }
.brand-story-copy li::before { content: "✓"; position: absolute; left: 0; color: #13a98f; font-weight: 950; }

.brand-pricing-preview { background: linear-gradient(125deg,#0d2c50,#0a213b); }
.brand-pricing-preview-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 80px; }
.brand-pricing-preview p { max-width: 700px; color: #9eb2c9; }
.brand-starting-price { min-width: 260px; padding: 28px 31px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.05); }
.brand-starting-price > span, .brand-starting-price > strong, .brand-starting-price > a { display: block; }
.brand-starting-price > span { color: #94a9bf; font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.brand-starting-price > strong { margin: 7px 0; font-size: 49px; letter-spacing: -.05em; }
.brand-starting-price small { margin-left: 5px; color: #96a9bd; font-size: 12px; letter-spacing: 0; }
.brand-starting-price > a { color: #8aafff; font-size: 13px; font-weight: 850; }

.brand-final-cta { padding-block: 88px; background: linear-gradient(120deg,#315df1,#297ed8 58%,#12a995); }
.brand-final-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 55px; }
.brand-final-cta span { color: #d6e6ff; font-size: 11px; font-weight: 950; letter-spacing: .13em; }
.brand-final-cta h2 { max-width: 760px; margin: 10px 0 9px; font-size: clamp(39px,5vw,58px); line-height: 1.04; letter-spacing: -.05em; }
.brand-final-cta p { margin: 0; color: #e0edff; }
.brand-final-cta .brand-button { flex: 0 0 auto; }

.brand-footer { background: #050f1d; }
.brand-footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 42px; padding-block: 68px 47px; }
.brand-footer-intro p { max-width: 320px; margin: 18px 0 0; color: #71859d; font-size: 13px; line-height: 1.65; }
.brand-footer-grid > div:not(.brand-footer-intro) { display: flex; flex-direction: column; gap: 12px; }
.brand-footer-grid > div > strong { margin-bottom: 5px; color: #dbe7f5; font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.brand-footer-grid > div > a { color: #7e92a9; font-size: 13px; }
.brand-footer-grid > div > a:hover { color: #fff; }
.brand-footer-intro .brand-social-link { width: fit-content; display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 9px 13px; border: 1px solid rgba(84, 149, 255, .24); border-radius: 10px; background: rgba(52, 112, 205, .08); color: #8eaae0; font-size: 12px; font-weight: 800; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.brand-footer-intro .brand-social-link:hover { border-color: rgba(67, 154, 255, .55); background: rgba(52, 112, 205, .16); color: #fff; transform: translateY(-1px); }
.brand-social-link svg { width: 18px; height: 18px; flex: 0 0 auto; }

.industry-hero { padding-block: 86px 72px; }
.industry-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 70px; align-items: center; }
.industry-service-preview { padding: 30px; border: 1px solid rgba(75, 146, 255, .28); border-radius: 26px; background: linear-gradient(145deg, rgba(18, 42, 70, .94), rgba(6, 22, 40, .96)); box-shadow: 0 28px 80px rgba(0, 0, 0, .28); }
.industry-service-preview h2 { margin: 8px 0 22px; font-size: clamp(25px, 3vw, 36px); }
.industry-service-preview > div { display: grid; grid-template-columns: 28px 1fr; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.08); }
.industry-service-preview > div > span { grid-row: 1 / 3; color: #2bd4c0; font-weight: 900; }
.industry-service-preview small { margin-top: 4px; color: #88a0ba; }
.industry-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.industry-benefit-grid article { padding: 26px; border: 1px solid rgba(75,146,255,.18); border-radius: 22px; background: rgba(8, 27, 48, .72); }
.industry-benefit-grid article > span { color: #2bd4c0; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.industry-benefit-grid h3 { margin: 16px 0 10px; font-size: 20px; line-height: 1.22; }
.industry-benefit-grid p { margin: 0; color: #8ea3ba; font-size: 14px; line-height: 1.7; }

@media (max-width: 980px) {
    .industry-hero-grid { grid-template-columns: 1fr; gap: 38px; }
    .industry-benefit-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .industry-hero { padding-block: 56px 44px; }
    .industry-service-preview { min-width: 0; padding: 22px; }
    .industry-benefit-grid { grid-template-columns: 1fr; }
}
.brand-footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 22px 35px; border-top: 1px solid rgba(255,255,255,.07); color: #5f748c; font-size: 11px; }

/* Dedicated marketing pages */
.brand-page-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 50% 125%,rgba(29,194,172,.16),transparent 42%),radial-gradient(circle at 18% 0,rgba(62,104,255,.2),transparent 32%),var(--brand-night); }
.brand-page-hero-inner { max-width: 940px; min-height: 535px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 90px; text-align: center; }
.brand-page-hero h1 { margin: 20px 0 22px; font-size: clamp(52px,7vw,80px); line-height: .98; letter-spacing: -.062em; }
.brand-page-hero h1 em { color: #82a9ff; font-style: normal; }
.brand-page-hero p { max-width: 760px; margin: 0; color: #adbed1; font-size: 18px; line-height: 1.72; }
.brand-anchor-nav { position: sticky; top: 80px; z-index: 100; border-bottom: 1px solid #d9e2ec; background: rgba(255,255,255,.94); backdrop-filter: blur(15px); }
.brand-anchor-nav .brand-shell { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 38px; overflow-x: auto; }
.brand-anchor-nav a { flex: 0 0 auto; color: #5d6f84; font-size: 13px; font-weight: 800; }
.brand-anchor-nav a:hover { color: var(--brand-blue-dark); }

.brand-feature-detail { color: var(--brand-ink); }
.brand-feature-detail:not(.brand-section-light) { color: #fff; }
.brand-detail-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 80px; }
.brand-detail-grid-reverse { grid-template-columns: 1.18fr .82fr; }
.brand-detail-grid-reverse .brand-detail-copy { order: 2; }
.brand-feature-label { color: var(--brand-blue-dark); font-size: 11px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.brand-feature-detail:not(.brand-section-light) .brand-feature-label { color: #8eb0ff; }
.brand-detail-copy h2 { margin: 15px 0 18px; font-size: clamp(38px,4.5vw,57px); line-height: 1.04; letter-spacing: -.05em; }
.brand-detail-copy > p { margin: 0; color: var(--brand-muted); font-size: 17px; line-height: 1.75; }
.brand-feature-detail:not(.brand-section-light) .brand-detail-copy > p { color: #9dafc3; }
.brand-check-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 27px 0 0; }
.brand-check-list li { position: relative; padding-left: 29px; color: #445c74; }
.brand-feature-detail:not(.brand-section-light) .brand-check-list li { color: #c0ccda; }
.brand-check-list li::before { content: "✓"; position: absolute; left: 0; color: #12af95; font-weight: 950; }
.brand-detail-visual { position: relative; display: block; overflow: hidden; padding: 12px; border: 1px solid #d4e0eb; border-radius: 26px; background: #fff; box-shadow: 0 28px 70px rgba(20,52,90,.17); }
.brand-feature-detail:not(.brand-section-light) .brand-detail-visual { border-color: rgba(255,255,255,.12); background: #102945; box-shadow: 0 32px 80px rgba(0,7,20,.42); }
.brand-detail-visual img { width: 100%; height: auto; border-radius: 15px; object-fit: contain; image-rendering: auto; }
.brand-preview-action { position: absolute; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(5,22,41,.88); color: #eef7ff; font-size: 10px; font-weight: 850; box-shadow: 0 10px 28px rgba(0,8,22,.32); backdrop-filter: blur(10px); opacity: .82; transition: opacity .2s ease, transform .2s ease; }
.brand-detail-visual:hover .brand-preview-action,
.brand-detail-visual:focus-visible .brand-preview-action { opacity: 1; transform: translateY(-2px); }
.brand-client-panel { padding: 34px; border: 1px solid #d9e3ed; border-radius: 26px; background: #fff; box-shadow: 0 28px 70px rgba(20,52,90,.14); }
.brand-client-heading { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 15px; padding-bottom: 25px; border-bottom: 1px solid #e3e9ef; }
.brand-client-heading > span { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg,#496eff,#23bca9); color: #fff; font-weight: 900; }
.brand-client-heading strong, .brand-client-heading small { display: block; }
.brand-client-heading small { margin-top: 4px; color: #718399; }
.brand-client-heading b { padding: 6px 10px; border-radius: 999px; background: #e9fbf5; color: #11856f; font-size: 10px; }
.brand-client-panel dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin: 22px 0; }
.brand-client-panel dl > div { padding: 15px; border-radius: 14px; background: #f2f6fa; }
.brand-client-panel dt { color: #75879c; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.brand-client-panel dd { margin: 6px 0 0; color: #233d58; font-size: 12px; font-weight: 800; }
.brand-client-panel > p { margin: 0; padding: 17px; border: 1px solid #dce5ee; border-radius: 15px; color: #5c6f84; font-size: 13px; }
.brand-client-panel > p span { display: block; margin-bottom: 5px; color: #2a5bc3; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.brand-capability-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 17px; }
.brand-capability-grid article { min-height: 245px; padding: 28px; border: 1px solid var(--brand-line); border-radius: 21px; background: #fff; }
.brand-capability-grid article > span { color: var(--brand-blue-dark); font-size: 11px; font-weight: 950; letter-spacing: .11em; }
.brand-capability-grid h3 { margin: 25px 0 10px; font-size: 20px; letter-spacing: -.025em; }
.brand-capability-grid p { margin: 0; color: var(--brand-muted); line-height: 1.7; }

/* Pricing */
.brand-plans-section { padding-top: 95px; }
.brand-pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: stretch; }
.brand-price-card { position: relative; display: flex; flex-direction: column; padding: 33px; border: 1px solid #d6e1eb; border-radius: 25px; background: #fff; box-shadow: 0 16px 46px rgba(27,57,92,.075); }
.brand-price-card.is-featured { border: 2px solid var(--brand-blue); box-shadow: 0 24px 65px rgba(44,91,219,.18); transform: translateY(-12px); }
.brand-popular { position: absolute; top: -15px; right: 24px; padding: 7px 12px; border-radius: 999px; background: var(--brand-blue-dark); color: #fff; font-size: 10px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.brand-plan-name { color: var(--brand-blue-dark); font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.brand-price-card h2 { margin: 15px 0 10px; color: var(--brand-ink); font-size: 52px; line-height: 1; letter-spacing: -.055em; }
.brand-price-card h2 sup { position: relative; top: -19px; margin-right: 2px; font-size: 20px; }
.brand-price-card h2 small { margin-left: 6px; color: #728398; font-size: 12px; letter-spacing: 0; }
.brand-plan-heading p { min-height: 69px; margin: 0; color: var(--brand-muted); line-height: 1.65; }
.brand-price-card ul { flex: 1; display: grid; align-content: start; gap: 12px; list-style: none; padding: 25px 0; margin: 24px 0 0; border-top: 1px solid #e1e8ef; }
.brand-price-card li { position: relative; padding-left: 25px; color: #405870; font-size: 14px; }
.brand-price-card li::before { content: "✓"; position: absolute; left: 0; color: #12a78e; font-weight: 950; }
.brand-pricing-footnote { max-width: 760px; margin: 31px auto 0; color: #63768b; font-size: 13px; text-align: center; }
.brand-comparison-section { color: #fff; }
.brand-comparison-section .brand-heading p { color: #9bafc5; }
.brand-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; }
.brand-comparison-table { width: 100%; min-width: 760px; border-collapse: collapse; background: rgba(255,255,255,.035); }
.brand-comparison-table th, .brand-comparison-table td { padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: center; }
.brand-comparison-table th:first-child { text-align: left; }
.brand-comparison-table thead th { padding-block: 24px; color: #fff; font-size: 15px; }
.brand-comparison-table thead th:first-child { color: #91a5bb; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.brand-comparison-table thead small { display: block; margin-top: 5px; color: #8ca2b9; font-size: 10px; }
.brand-comparison-table tbody th { color: #a9bacd; font-size: 13px; font-weight: 700; }
.brand-comparison-table tbody td { color: #dce6f2; font-size: 13px; }
.brand-comparison-table tbody tr:last-child th, .brand-comparison-table tbody tr:last-child td { border-bottom: 0; }
.brand-billing-grid { display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 80px; }
.brand-trial-card { padding: 34px; border: 1px solid #d6e1eb; border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(27,57,92,.1); }
.brand-trial-card > span { color: var(--brand-blue-dark); font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.brand-trial-card > strong { display: block; margin: 12px 0 20px; color: var(--brand-ink); font-size: 21px; line-height: 1.35; }
.brand-trial-card ul { display: grid; gap: 10px; list-style: none; padding: 20px 0; margin: 0 0 22px; border-top: 1px solid #e0e8ef; color: #4b6077; }
.brand-trial-card li::before { content: "✓"; margin-right: 10px; color: #12a78e; font-weight: 950; }
.brand-question-strip { padding-block: 37px; background: #e7edf4; color: var(--brand-ink); }
.brand-question-strip .brand-shell { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.brand-question-strip strong, .brand-question-strip span { display: block; }
.brand-question-strip strong { font-size: 18px; }
.brand-question-strip span { margin-top: 3px; color: #65778c; font-size: 13px; }
.brand-question-strip .brand-text-link { color: var(--brand-blue-dark); }

/* FAQ */
.brand-faq-content { padding-top: 88px; }
.brand-faq-layout { display: grid; grid-template-columns: 220px 1fr; align-items: start; gap: 75px; }
.brand-faq-aside { position: sticky; top: 112px; display: grid; gap: 12px; padding: 22px; border: 1px solid var(--brand-line); border-radius: 18px; background: #fff; }
.brand-faq-aside > span { margin-bottom: 4px; color: #8392a4; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.brand-faq-aside a { color: #5e7186; font-size: 13px; font-weight: 750; }
.brand-faq-aside a:hover { color: var(--brand-blue-dark); }
.brand-faq-groups { display: grid; gap: 78px; }
.brand-faq-groups > section { scroll-margin-top: 110px; }
.brand-faq-label { color: var(--brand-blue-dark); font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.brand-faq-groups h2 { margin: 9px 0 25px; color: var(--brand-ink); font-size: clamp(30px,4vw,43px); letter-spacing: -.04em; }
.brand-faq-list { display: grid; gap: 10px; }
.brand-faq-list details { border: 1px solid var(--brand-line); border-radius: 16px; background: #fff; }
.brand-faq-list details[open] { border-color: #becfee; box-shadow: 0 13px 35px rgba(30,62,100,.07); }
.brand-faq-list summary { position: relative; padding: 21px 58px 21px 23px; color: var(--brand-ink); font-weight: 850; cursor: pointer; list-style: none; }
.brand-faq-list summary::-webkit-details-marker { display: none; }
.brand-faq-list summary::after { content: "+"; position: absolute; right: 23px; top: 15px; color: var(--brand-blue-dark); font-size: 26px; font-weight: 400; }
.brand-faq-list details[open] summary::after { content: "–"; }
.brand-faq-list p { margin: 0; padding: 0 58px 22px 23px; color: var(--brand-muted); font-size: 14px; line-height: 1.75; }

@media (max-width: 1050px) {
    .brand-nav { gap: 19px; }
    .brand-hero-grid { grid-template-columns: 1fr; min-height: auto; padding-block: 90px 115px; }
    .brand-hero-copy { max-width: 780px; text-align: center; margin-inline: auto; }
    .brand-hero-copy > p { margin-inline: auto; }
    .brand-actions, .brand-trust-row { justify-content: center; }
    .brand-hero-visual { width: min(820px,94%); margin: 20px auto 0; }
    .brand-heading-split { grid-template-columns: 1fr; gap: 5px; }
    .brand-workflow-grid, .brand-story-grid, .brand-detail-grid, .brand-detail-grid-reverse, .brand-billing-grid { grid-template-columns: 1fr; gap: 60px; }
    .brand-detail-grid-reverse .brand-detail-copy { order: 0; }
    .brand-story-visual { transform: none; }
    .brand-pricing-grid { grid-template-columns: 1fr; max-width: 670px; margin-inline: auto; }
    .brand-price-card.is-featured { transform: none; }
    .brand-plan-heading p { min-height: 0; }
}

@media (max-width: 820px) {
    .brand-site .brand-shell { width: min(100% - 32px,1180px); }
    .brand-nav-toggle { display: block; }
    .brand-nav { position: absolute; left: 16px; right: 16px; top: 70px; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: #0a213b; box-shadow: 0 22px 55px rgba(0,8,22,.45); }
    .brand-nav.is-open { display: flex; }
    .brand-nav > a { padding: 13px 12px; }
    .brand-nav > a[aria-current="page"]::after { display: none; }
    .brand-nav .brand-login { padding-left: 12px; border: 0; border-top: 1px solid rgba(255,255,255,.08); }
    .brand-nav .brand-button { margin-top: 5px; }
    .brand-proof-grid { grid-template-columns: repeat(2,1fr); }
    .brand-proof-grid > div:nth-child(3) { border-left: 1px solid rgba(255,255,255,.08); }
    .brand-benefit-grid { grid-template-columns: 1fr 1fr; }
    .brand-benefit-card-wide { grid-column: 1 / -1; }
    .brand-capability-grid { grid-template-columns: 1fr 1fr; }
    .brand-pricing-preview-grid { grid-template-columns: 1fr; }
    .brand-starting-price { max-width: 360px; }
    .brand-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .brand-footer-intro { grid-column: 1 / -1; }
    .brand-faq-layout { grid-template-columns: 1fr; gap: 45px; }
    .brand-faq-aside { position: static; display: flex; overflow-x: auto; }
    .brand-faq-aside > span { display: none; }
    .brand-faq-aside a { flex: 0 0 auto; }
}

@media (max-width: 580px) {
    .brand-logo span { font-size: 16px; }
    .brand-logo img { width: 42px; height: 42px; }
    .brand-hero-grid { padding-block: 68px 94px; }
    .brand-hero-copy h1, .brand-page-hero h1 { font-size: clamp(45px,14vw,62px); }
    .brand-hero-copy > p, .brand-page-hero p { font-size: 16px; }
    .brand-actions { display: grid; }
    .brand-actions .brand-button { width: 100%; }
    .brand-trust-row { display: grid; gap: 9px; }
    .brand-product-frame { border-radius: 16px; transform: none; }
    .brand-product-frame > img { min-height: 220px; }
    .brand-browser-bar small { max-width: 190px; }
    .brand-float-card { display: none; }
    .brand-proof-grid { grid-template-columns: 1fr; }
    .brand-proof-grid > div, .brand-proof-grid > div:first-child, .brand-proof-grid > div:nth-child(3) { min-height: auto; padding: 22px 5px; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
    .brand-section { padding-block: 82px; }
    .brand-heading h2, .brand-workflow-copy h2, .brand-story-copy h2, .brand-pricing-preview h2, .brand-billing-grid h2, .brand-final-cta h2 { font-size: clamp(34px,10vw,46px); }
    .brand-benefit-grid { grid-template-columns: 1fr; }
    .brand-benefit-card-wide { display: flex; grid-column: auto; }
    .brand-time-demo { align-self: stretch; }
    .brand-step-list li { grid-template-columns: 47px 1fr; gap: 13px; }
    .brand-pricing-preview-grid { gap: 38px; }
    .brand-starting-price { min-width: 0; }
    .brand-final-cta-inner { align-items: flex-start; flex-direction: column; gap: 30px; }
    .brand-final-cta .brand-button { width: 100%; }
    .brand-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 22px; }
    .brand-footer-bottom { flex-direction: column; }
    .brand-page-hero-inner { min-height: 470px; padding-block: 70px; }
    .brand-anchor-nav .brand-shell { justify-content: flex-start; gap: 25px; }
    .brand-client-panel { padding: 22px; }
    .brand-client-panel dl { grid-template-columns: 1fr; }
    .brand-capability-grid { grid-template-columns: 1fr; }
    .brand-price-card { padding: 26px 22px; }
    .brand-question-strip .brand-shell { align-items: flex-start; flex-direction: column; }
    .brand-faq-groups { gap: 58px; }
    .brand-faq-list summary { padding-right: 48px; }
    .brand-faq-list p { padding-right: 23px; }
}

/* Outcome-first homepage -------------------------------------------------- */
.brand-system-hero {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 46%, rgba(34, 110, 194, .24), transparent 34%),
        radial-gradient(circle at 8% 30%, rgba(56, 96, 255, .2), transparent 31%),
        radial-gradient(circle at 96% 55%, rgba(25, 189, 168, .14), transparent 29%),
        #06182d;
}
.brand-system-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}
.brand-system-intro {
    position: relative;
    z-index: 6;
    max-width: 1000px;
    margin-inline: auto;
    padding-top: 62px;
    text-align: center;
}
.brand-system-intro .brand-kicker,
.brand-system-intro .brand-actions,
.brand-system-intro .brand-trust-row { justify-content: center; }
.brand-system-intro h1 {
    margin: 19px 0 16px;
    font-size: clamp(53px, 5.8vw, 77px);
    line-height: .96;
    letter-spacing: -.062em;
}
.brand-system-intro h1 em {
    color: transparent;
    font-style: normal;
    background: linear-gradient(90deg,#82a9ff,#4ed8dc 82%);
    -webkit-background-clip: text;
    background-clip: text;
}
.brand-system-intro > p {
    max-width: 760px;
    margin: 0 auto;
    color: #b2c2d5;
    font-size: 18px;
    line-height: 1.65;
}
.brand-system-intro .brand-actions { margin-top: 25px; }
.brand-system-intro .brand-trust-row { margin-top: 19px; }
.brand-play {
    width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    margin-right: 5px;
    border-radius: 50%;
    background: rgba(127,240,200,.15);
    color: var(--brand-mint);
    font-size: 8px;
}

.brand-system-stage {
    position: relative;
    z-index: 2;
    min-height: 560px;
    display: grid;
    grid-template-columns: 260px minmax(320px,1fr) 430px;
    align-items: end;
    gap: 12px;
    margin-top: 12px;
}
.brand-problem-column {
    position: relative;
    z-index: 5;
    align-self: center;
    display: grid;
    gap: 12px;
    padding-top: 34px;
}
.brand-hand-label {
    position: absolute;
    left: 18px;
    top: -8px;
    color: #82aaff;
    font-family: "Comic Sans MS", "Bradley Hand", cursive;
    font-size: 19px;
    font-style: italic;
    transform: rotate(-4deg);
}
.brand-problem-card {
    position: relative;
    min-height: 104px;
    display: grid;
    grid-template-columns: 45px 1fr;
    align-items: center;
    gap: 13px;
    padding: 17px;
    border: 1px solid rgba(111,169,255,.34);
    border-radius: 18px;
    background: linear-gradient(135deg,rgba(18,48,82,.95),rgba(8,31,57,.88));
    box-shadow: 0 17px 42px rgba(0,7,19,.35);
    backdrop-filter: blur(12px);
}
.brand-problem-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(99,145,255,.13);
    color: #a8c2ff;
    font-size: 22px;
}
.brand-problem-card strong,
.brand-problem-card p { display: block; }
.brand-problem-card strong { font-size: 14px; line-height: 1.2; }
.brand-problem-card p { margin: 6px 0 0; color: #96abc2; font-size: 11px; line-height: 1.45; }
.brand-problem-card > b {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ff5268;
    color: #fff;
    font-size: 10px;
}

.brand-owner-photo {
    position: relative;
    align-self: end;
    height: 520px;
    overflow: hidden;
    border-radius: 34px 34px 0 0;
    box-shadow: 0 40px 100px rgba(0,8,22,.33);
}
.brand-owner-photo::before,
.brand-owner-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.brand-owner-photo::before { background: linear-gradient(90deg,#06182d 0,transparent 13%,transparent 84%,#06182d 100%); }
.brand-owner-photo::after { background: linear-gradient(to top,#06182d 0,transparent 24%); }
.brand-owner-photo picture,
.brand-owner-photo img { width: 100%; height: 100%; display: block; }
.brand-owner-photo img { object-fit: cover; object-position: 46% center; }
.brand-owner-photo > span {
    position: absolute;
    right: 7px;
    bottom: 54px;
    z-index: 2;
    color: var(--brand-mint);
    font-family: "Comic Sans MS", "Bradley Hand", cursive;
    font-size: 16px;
    font-style: italic;
    line-height: 1.2;
    text-align: center;
    transform: rotate(-5deg);
}

.brand-solution-cluster {
    position: relative;
    z-index: 5;
    align-self: center;
    min-width: 0;
    height: 470px;
}
.brand-system-window {
    position: absolute;
    left: 0;
    right: 12px;
    top: 45px;
    overflow: hidden;
    border: 1px solid rgba(72,184,255,.65);
    border-radius: 20px;
    background: #081d35;
    box-shadow: 0 30px 75px rgba(0,8,24,.5),0 0 45px rgba(42,139,255,.13);
    transform: perspective(900px) rotateY(-3deg);
}
.brand-system-top {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #0b2a4a;
}
.brand-system-top > span { display: flex; gap: 5px; }
.brand-system-top > span i { width: 6px; height: 6px; border-radius: 50%; background: #43688d; }
.brand-system-top strong { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.brand-system-top strong img { border-radius: 7px; }
.brand-system-top strong em { color: #78a5ff; font-style: normal; font-weight: 650; }
.brand-system-body { min-height: 286px; display: grid; grid-template-columns: 104px 1fr; }
.brand-preview-nav { display: flex; flex-direction: column; gap: 7px; padding: 18px 9px; border-right: 1px solid rgba(255,255,255,.06); background: #071a30; }
.brand-preview-nav span,
.brand-preview-nav b { padding: 10px 9px; border-radius: 8px; color: #8fa7c0; font-size: 9px; font-weight: 750; }
.brand-preview-nav b { background: linear-gradient(90deg,#1859bc,#167bca); color: #fff; }
.brand-mini-calendar { min-width: 0; padding: 20px 17px; }
.brand-mini-calendar header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.brand-mini-calendar header strong { font-size: 17px; }
.brand-mini-calendar header span { color: #7390ac; font-size: 8px; }
.brand-calendar-grid { display: grid; grid-template-columns: 37px repeat(4,1fr); grid-auto-rows: 43px; gap: 5px; }
.brand-calendar-grid small { display: flex; align-items: flex-start; color: #708aa5; font-size: 7px; }
.brand-calendar-grid i { border-radius: 6px; background: rgba(255,255,255,.035); }
.brand-calendar-grid .has-booking { height: 27px; align-self: center; box-shadow: 0 6px 13px rgba(0,0,0,.18); }
.brand-calendar-grid .blue { background: linear-gradient(135deg,#477eff,#3172d4); }
.brand-calendar-grid .aqua { background: linear-gradient(135deg,#23d2c0,#4a9ff4); }
.brand-solution-card {
    position: absolute;
    min-width: 210px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid rgba(71,199,255,.58);
    border-radius: 14px;
    background: rgba(10,42,72,.96);
    box-shadow: 0 18px 40px rgba(0,9,23,.43),0 0 26px rgba(43,183,255,.09);
    backdrop-filter: blur(12px);
}
.brand-solution-card > span {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(67,139,255,.15);
    color: #77a9ff;
    font-size: 15px;
}
.brand-solution-card strong,
.brand-solution-card small { display: block; }
.brand-solution-card strong { font-size: 11px; }
.brand-solution-card small { margin-top: 3px; color: #89a0b8; font-size: 8px; }
.brand-solution-card > b { color: #78a6d2; font-size: 19px; }
.brand-solution-bookings { right: -3px; top: 0; }
.brand-solution-clients { right: -10px; top: 236px; }
.brand-solution-confirmed { left: 20px; bottom: 4px; min-width: 275px; }
.brand-solution-confirmed > span { background: rgba(60,223,187,.16); color: var(--brand-mint); }

.brand-system-outcomes { position: relative; z-index: 7; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(4,19,36,.88); }
.brand-system-outcomes .brand-shell { display: grid; grid-template-columns: repeat(4,1fr); }
.brand-system-outcomes .brand-shell > div { min-height: 95px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 18px; border-left: 1px solid rgba(255,255,255,.08); }
.brand-system-outcomes .brand-shell > div:last-child { border-right: 1px solid rgba(255,255,255,.08); }
.brand-system-outcomes i { color: #4bd7d4; font-size: 28px; font-style: normal; }
.brand-system-outcomes strong,
.brand-system-outcomes small { display: block; }
.brand-system-outcomes strong { font-size: 14px; }
.brand-system-outcomes small { margin-top: 4px; color: #7f95ac; font-size: 10px; }

@media (max-width: 1120px) {
    .brand-system-stage { grid-template-columns: 230px minmax(270px,1fr) 375px; }
    .brand-problem-card { padding: 14px; }
    .brand-owner-photo { height: 485px; }
    .brand-solution-cluster { transform: scale(.92); transform-origin: right center; }
}

@media (max-width: 960px) {
    .brand-system-stage { min-height: auto; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 42px; }
    .brand-owner-photo { grid-column: 1 / -1; grid-row: 1; width: min(640px,100%); height: 480px; margin-inline: auto; }
    .brand-problem-column { grid-column: 1; grid-row: 2; align-self: start; padding-top: 36px; }
    .brand-solution-cluster { grid-column: 2; grid-row: 2; width: 100%; transform: none; }
    .brand-system-outcomes { margin-top: 35px; }
    .brand-system-outcomes .brand-shell { grid-template-columns: 1fr 1fr; }
    .brand-system-outcomes .brand-shell > div:nth-child(3) { border-top: 1px solid rgba(255,255,255,.08); }
    .brand-system-outcomes .brand-shell > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); }
}

@media (max-width: 700px) {
    .brand-system-intro { padding-top: 55px; }
    .brand-system-intro h1 { font-size: clamp(41px,12vw,57px); }
    .brand-system-intro h1 br { display: none; }
    .brand-system-intro > p { font-size: 16px; }
    .brand-system-intro .brand-actions { display: grid; }
    .brand-system-intro .brand-actions .brand-button { width: 100%; }
    .brand-system-intro .brand-trust-row { display: flex; flex-wrap: wrap; gap: 9px 14px; }
    .brand-system-stage { display: flex; flex-direction: column; gap: 28px; margin-top: 38px; }
    .brand-owner-photo { order: 1; width: 100%; height: 440px; border: 1px solid rgba(116,177,255,.17); border-radius: 26px; }
    .brand-owner-photo::before { background: linear-gradient(90deg,#06182d 0,transparent 8%,transparent 92%,#06182d 100%); }
    .brand-owner-photo img { object-position: center 38%; }
    .brand-owner-photo > span { right: 18px; bottom: 22px; }
    .brand-problem-column { order: 2; width: 100%; padding-top: 37px; }
    .brand-hand-label { left: 5px; }
    .brand-problem-card { min-height: 88px; }
    .brand-solution-cluster { order: 3; width: 100%; height: auto; display: grid; grid-template-columns: 1fr; gap: 10px; }
    .brand-system-window,
    .brand-solution-card { position: static; min-width: 0; transform: none; }
    .brand-system-window { grid-row: 1; margin-bottom: 2px; }
    .brand-solution-card { grid-template-columns: 34px 1fr auto; }
    .brand-solution-confirmed { min-width: 0; }
    .brand-system-outcomes { margin-top: 42px; }
    .brand-system-outcomes .brand-shell { grid-template-columns: 1fr 1fr; }
    .brand-system-outcomes .brand-shell > div { min-height: 105px; align-items: flex-start; justify-content: flex-start; padding: 20px 14px; }
    .brand-system-outcomes .brand-shell > div:nth-child(odd) { border-left: 0; }
    .brand-system-outcomes .brand-shell > div:last-child { border-right: 0; }
}

@media (max-width: 430px) {
    .brand-system-intro h1 { font-size: 42px; }
    .brand-system-intro .brand-kicker { font-size: 9px; }
    .brand-owner-photo { height: 390px; }
    .brand-owner-photo > span { font-size: 14px; }
    .brand-system-body { grid-template-columns: 78px 1fr; }
    .brand-preview-nav { padding-inline: 6px; }
    .brand-preview-nav span,
    .brand-preview-nav b { padding-inline: 6px; font-size: 8px; }
    .brand-mini-calendar { padding-inline: 10px; }
    .brand-calendar-grid { grid-template-columns: 32px repeat(4,1fr); gap: 3px; }
    .brand-system-outcomes strong { font-size: 12px; }
    .brand-system-outcomes small { line-height: 1.35; }
}

/* Approved chaos-to-control homepage hero ------------------------------- */
.brand-chaos-hero {
    position: relative;
    min-height: 780px;
    overflow: hidden;
    isolation: isolate;
    background: #06172b;
}
.brand-chaos-media,
.brand-chaos-media img,
.brand-chaos-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.brand-chaos-media { z-index: -3; }
.brand-chaos-media img { object-fit: cover; object-position: center center; }
.brand-chaos-shade {
    z-index: -2;
    background:
        linear-gradient(to bottom, rgba(3,16,31,.78) 0, rgba(3,16,31,.20) 34%, rgba(3,16,31,.04) 66%, rgba(3,16,31,.83) 91%, #06172b 100%),
        radial-gradient(circle at 50% 17%, rgba(4,19,36,.2), rgba(4,19,36,.06) 35%, transparent 60%);
}
.brand-chaos-shell { position: relative; min-height: 690px; }
.brand-chaos-copy {
    position: relative;
    z-index: 5;
    max-width: 1040px;
    margin-inline: auto;
    padding-top: 28px;
    text-align: center;
}
.brand-chaos-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(48px,6vw,82px);
    line-height: .98;
    letter-spacing: -.06em;
    text-shadow: 0 8px 30px rgba(0,8,20,.45);
}
.brand-chaos-copy > p {
    margin: 12px 0 0;
    color: #70a8ff;
    font-size: clamp(25px,3vw,39px);
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -.04em;
}
.brand-chaos-copy > p strong {
    color: transparent;
    background: linear-gradient(90deg,#6eacff,#4be2d0);
    -webkit-background-clip: text;
    background-clip: text;
}
.brand-chaos-copy .brand-actions { margin-top: 22px; }
.brand-chaos-copy .brand-button { min-width: 230px; }
.brand-chaos-copy .brand-button-ghost { background: rgba(4,25,47,.6); border-color: #2287cf; backdrop-filter: blur(9px); }
.brand-no-card { display: block; margin-top: 9px; color: #9db0c7; font-size: 13px; font-weight: 650; }
.brand-mobile-transformation { display: none; }

.brand-chaos-alerts { position: absolute; z-index: 4; left: -54px; top: 238px; width: 430px; height: 210px; }
.brand-chaos-alerts article {
    position: absolute;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 11px;
    min-width: 215px;
    padding: 13px 15px;
    border: 1px solid rgba(140,183,229,.28);
    border-radius: 15px;
    background: rgba(11,30,53,.89);
    box-shadow: 0 18px 45px rgba(0,8,20,.42);
    backdrop-filter: blur(13px);
}
.brand-chaos-alerts article:first-child { left: 0; top: 0; transform: rotate(-5deg); }
.brand-chaos-alerts article:last-child { right: 0; bottom: 0; transform: rotate(4deg); }
.brand-chaos-alerts article > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.08); color: #dbe9ff; }
.brand-chaos-alerts strong,
.brand-chaos-alerts small { display: block; }
.brand-chaos-alerts strong { font-size: 13px; }
.brand-chaos-alerts small { margin-top: 3px; color: #8fa4bc; font-size: 10px; }
.brand-chaos-alerts b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #ff566c; font-size: 11px; }

.brand-calendar-links {
    position: absolute;
    z-index: 5;
    left: 285px;
    bottom: 112px;
    width: 195px;
    display: grid;
    gap: 11px;
    padding: 17px;
    border: 1px solid rgba(144,183,224,.26);
    border-radius: 16px;
    background: rgba(8,29,52,.9);
    box-shadow: 0 20px 50px rgba(0,7,20,.45);
    backdrop-filter: blur(13px);
}
.brand-calendar-links span { display: flex; align-items: center; gap: 10px; color: #a9bbcf; font-size: 11px; font-weight: 700; }
.brand-calendar-links > small { color: #67e8f9; font-size: 8px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.brand-calendar-links b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(135deg,#316dff,#2bc8d7); color: #fff; font-size: 9px; }

.brand-hero-dashboard {
    position: absolute;
    z-index: 6;
    left: 50%;
    bottom: 62px;
    width: 455px;
    height: 300px;
    display: grid;
    grid-template-columns: 130px 1fr;
    overflow: hidden;
    border: 1px solid rgba(50,178,236,.58);
    border-radius: 19px;
    background: rgba(6,25,47,.95);
    box-shadow: 0 32px 85px rgba(0,5,17,.62),0 0 45px rgba(26,178,217,.12);
    backdrop-filter: blur(12px);
    transform: translateX(-5%);
}
.brand-hero-dashboard-nav { display: flex; flex-direction: column; gap: 6px; padding: 15px 11px; border-right: 1px solid rgba(255,255,255,.07); background: rgba(5,20,38,.93); }
.brand-hero-dashboard-nav strong { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 9px; }
.brand-hero-dashboard-nav strong img { border-radius: 7px; }
.brand-hero-dashboard-nav strong span { color: #76a7ff; }
.brand-hero-dashboard-nav > b,
.brand-hero-dashboard-nav > span { padding: 9px; border-radius: 8px; color: #a3b6ca; font-size: 9px; font-weight: 700; }
.brand-hero-dashboard-nav > b { background: linear-gradient(90deg,#1769d9,#168cc9); color: #fff; }
.brand-hero-schedule { min-width: 0; padding: 13px 12px; }
.brand-hero-schedule header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.brand-hero-schedule header div { display: grid; gap: 2px; }
.brand-hero-schedule header small { color: #7f96ad; font-size: 6px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.brand-hero-schedule header strong { font-size: 14px; }
.brand-hero-schedule header span { padding: 7px 9px; border-radius: 7px; background: #3177f4; font-size: 8px; font-weight: 800; }
.brand-calendar-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.brand-calendar-stats span { padding: 5px 2px; border: 1px solid rgba(135,174,214,.14); border-radius: 7px; background: rgba(255,255,255,.035); color: #8298ad; font-size: 5px; font-weight: 800; text-align: center; }
.brand-calendar-stats b { display: block; margin-bottom: 1px; color: #f4f8fd; font-size: 9px; }
.brand-calendar-controls { display: flex; align-items: center; gap: 4px; margin: 7px 0; }
.brand-calendar-controls span,
.brand-calendar-controls b,
.brand-calendar-controls em { padding: 4px 5px; border: 1px solid rgba(135,174,214,.15); border-radius: 5px; color: #a5b7c9; font-size: 5px; font-style: normal; font-weight: 800; }
.brand-calendar-controls b { background: rgba(48,119,244,.17); color: #bcd5ff; }
.brand-calendar-controls em { margin-left: auto; min-width: 55px; }
.brand-schedule-days { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; color: #7e96ae; font-size: 5px; line-height: 1.1; text-align: center; }
.brand-schedule-days span { position: relative; padding: 5px 2px; border: 1px solid rgba(135,174,214,.14); border-radius: 7px; background: rgba(255,255,255,.025); }
.brand-schedule-days span.today { border-color: transparent; background: linear-gradient(135deg,#246cf2,#26bfc9); color: #eaffff; }
.brand-schedule-days b { display: block; margin-top: 2px; color: #e7f1fc; font-size: 10px; }
.brand-schedule-days i { position: absolute; right: 3px; top: 3px; min-width: 10px; height: 10px; display: grid; place-items: center; border-radius: 50%; background: rgba(44,116,241,.2); color: #bcd5ff; font-size: 5px; font-style: normal; }
.brand-schedule-days .today i { background: rgba(4,27,49,.32); color: #fff; }
.brand-calendar-agenda { margin-top: 7px; padding: 7px; border: 1px solid rgba(135,174,214,.16); border-radius: 9px; background: rgba(255,255,255,.025); }
.brand-calendar-day { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 5px; color: #91a6ba; font-size: 6px; }
.brand-calendar-day strong { color: #e7f1fc; font-size: 7px; }
.brand-calendar-agenda article { display: grid; grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 6px; border: 1px solid rgba(135,174,214,.12); border-left: 3px solid #3b82f6; border-radius: 7px; background: rgba(255,255,255,.04); }
.brand-calendar-agenda article.pending { border-left-color: #f59e0b; }
.brand-calendar-agenda time { color: #bcd5ff; font-size: 6px; font-weight: 900; }
.brand-calendar-agenda time small,
.brand-calendar-agenda article div span { display: block; margin-top: 1px; color: #788fa5; font-size: 5px; }
.brand-calendar-agenda article div strong { display: block; overflow: hidden; color: #eff6ff; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.brand-calendar-agenda article > b { padding: 3px 4px; border-radius: 999px; background: rgba(59,130,246,.13); color: #92c3ff; font-size: 5px; }
.brand-calendar-agenda article.pending > b { background: rgba(245,158,11,.12); color: #ffd386; }

.brand-chaos-arrow { position: absolute; z-index: 5; left: 46%; bottom: 235px; color: #51dce1; font-size: 70px; line-height: 1; text-shadow: 0 0 25px rgba(41,204,218,.55); transform: rotate(-5deg); }
.brand-before-badge,
.brand-after-badge {
    position: absolute;
    z-index: 7;
    bottom: 27px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px 9px 10px;
    border: 1px solid rgba(143,180,221,.4);
    border-radius: 999px;
    background: rgba(5,24,45,.88);
    box-shadow: 0 15px 35px rgba(0,6,18,.36);
    color: #cbd7e5;
    font-size: 12px;
    backdrop-filter: blur(10px);
}
.brand-before-badge { left: 15px; }
.brand-after-badge { right: 9px; border-color: rgba(43,221,202,.65); }
.brand-before-badge span,
.brand-after-badge span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #06172b; font-size: 18px; font-weight: 950; }
.brand-before-badge span { background: #ff5a70; }
.brand-after-badge span { background: #52e5d4; }
.brand-before-badge strong,
.brand-after-badge strong { color: #fff; }

.brand-chaos-outcomes { position: relative; z-index: 8; border-block: 1px solid rgba(255,255,255,.1); background: rgba(4,22,41,.9); backdrop-filter: blur(12px); }
.brand-chaos-outcomes .brand-shell { display: grid; grid-template-columns: repeat(4,1fr); }
.brand-chaos-outcomes .brand-shell > div { min-height: 88px; display: flex; align-items: center; justify-content: center; gap: 15px; padding: 18px; border-right: 1px solid rgba(255,255,255,.09); }
.brand-chaos-outcomes .brand-shell > div:first-child { border-left: 1px solid rgba(255,255,255,.09); }
.brand-chaos-outcomes i { color: #55b7ff; font-size: 25px; font-style: normal; }
.brand-chaos-outcomes strong { font-size: 13px; }

@media (max-width: 1120px) {
    .brand-chaos-alerts { left: 0; transform: scale(.9); transform-origin: left top; }
    .brand-calendar-links { left: 240px; }
    .brand-hero-dashboard { width: 415px; transform: translateX(-7%); }
}

@media (max-width: 900px) {
    .brand-chaos-hero { min-height: 0; padding-top: 0; }
    .brand-chaos-media { position: absolute; top: 310px; bottom: auto; display: block; height: 440px; }
    .brand-chaos-media img { object-fit: cover; }
    .brand-chaos-shade { height: 760px; background: linear-gradient(180deg,#06172b 0,#071a30 37%,transparent 55%,rgba(6,23,43,.16) 82%,#06172b 100%); }
    .brand-chaos-shell { min-height: 0; padding-top: 730px; }
    .brand-chaos-copy { position: absolute; left: 0; right: 0; top: 25px; padding-inline: 20px; }
    .brand-chaos-copy h1 { font-size: clamp(42px,8vw,62px); }
    .brand-chaos-copy > p { font-size: clamp(23px,4vw,32px); }
    .brand-chaos-alerts,
    .brand-calendar-links,
    .brand-chaos-arrow,
    .brand-before-badge,
    .brand-after-badge { display: none; }
    .brand-hero-dashboard { position: relative; left: auto; bottom: auto; width: min(620px,calc(100% - 30px)); height: 330px; margin: -24px auto 28px; transform: none; }
    .brand-chaos-outcomes .brand-shell { grid-template-columns: 1fr 1fr; }
    .brand-chaos-outcomes .brand-shell > div:nth-child(3),
    .brand-chaos-outcomes .brand-shell > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.09); }
}

@media (max-width: 620px) {
    .brand-chaos-hero { padding-top: 0; }
    .brand-chaos-media { display: none; }
    .brand-chaos-shade { height: 100%; background: radial-gradient(circle at 50% 34%,rgba(26,113,192,.24),transparent 30%),linear-gradient(180deg,#06172b 0,#071b31 52%,#06172b 100%); }
    .brand-chaos-shell { width: min(100% - 24px,1180px); padding-top: 0; }
    .brand-chaos-copy { position: relative; inset: auto; padding: 38px 0 24px; }
    .brand-chaos-copy h1 { font-size: clamp(39px,11.5vw,50px); line-height: .98; }
    .brand-chaos-copy > p { max-width: 370px; margin: 14px auto 0; font-size: clamp(21px,6.2vw,26px); line-height: 1.18; }
    .brand-chaos-copy .brand-actions { display: grid; margin-top: 22px; }
    .brand-chaos-copy .brand-button { width: 100%; min-width: 0; }
    .brand-no-card { margin-top: 11px; }
    .brand-mobile-transformation { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 9px; margin: 4px 0 25px; }
    .brand-mobile-state { position: relative; min-width: 0; height: 250px; overflow: hidden; margin: 0; border: 1px solid rgba(126,174,222,.25); border-radius: 19px; background: #081a30; box-shadow: 0 20px 45px rgba(0,7,20,.38); }
    .brand-mobile-state picture,
    .brand-mobile-state img { display: block; width: 100%; height: 100%; }
    .brand-mobile-state img { object-fit: cover; }
    .brand-mobile-state-before img { object-position: 10% center; }
    .brand-mobile-state-after img { object-position: 90% center; }
    .brand-mobile-state::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(180deg,transparent,rgba(2,15,29,.95)); pointer-events: none; }
    .brand-mobile-state figcaption { position: absolute; z-index: 2; left: 11px; right: 9px; bottom: 11px; display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; gap: 8px; }
    .brand-mobile-state figcaption > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #06172b; font-weight: 950; }
    .brand-mobile-state-before figcaption > span { background: #ff6477; }
    .brand-mobile-state-after figcaption > span { background: #55e5d3; }
    .brand-mobile-state figcaption small,
    .brand-mobile-state figcaption strong { display: block; }
    .brand-mobile-state figcaption small { color: #9db0c6; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
    .brand-mobile-state figcaption strong { margin-top: 2px; color: #fff; font-size: 10px; line-height: 1.25; }
    .brand-mobile-story-arrow { position: absolute; z-index: 5; left: 50%; top: 43%; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(83,230,216,.55); border-radius: 50%; background: #09223a; color: #57e5d6; font-size: 18px; box-shadow: 0 8px 22px rgba(0,7,20,.45); transform: translate(-50%,-50%); }
    .brand-hero-dashboard { grid-template-columns: 84px minmax(0,1fr); width: 100%; height: 270px; margin: 0 auto 26px; }
    .brand-hero-dashboard-nav { padding-inline: 7px; }
    .brand-hero-dashboard-nav strong { font-size: 0; justify-content: center; }
    .brand-hero-dashboard-nav strong span { display: none; }
    .brand-hero-dashboard-nav > b,
    .brand-hero-dashboard-nav > span { padding: 8px 5px; font-size: 7px; }
    .brand-hero-schedule { padding: 11px 8px; }
    .brand-hero-schedule header strong { font-size: 12px; }
    .brand-hero-schedule header span { font-size: 7px; }
    .brand-calendar-agenda article { grid-template-columns: 40px minmax(0,1fr); }
    .brand-calendar-agenda article > b { display: none; }
    .brand-chaos-outcomes .brand-shell { width: 100%; }
    .brand-chaos-outcomes .brand-shell > div { min-height: 88px; justify-content: flex-start; gap: 10px; padding: 14px; }
    .brand-chaos-outcomes strong { font-size: 11px; line-height: 1.3; }
}

/* Search guide: substantial editorial content with the same product brand. */
.brand-guide-hero .brand-page-hero-inner { min-height: 610px; }
.brand-guide-section { scroll-margin-top: 130px; }
.brand-guide-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,.75fr); align-items: start; gap: 70px; }
.brand-guide-main h2 { max-width: 780px; margin: 16px 0 22px; font-size: clamp(38px,5vw,58px); line-height: 1.05; letter-spacing: -.05em; }
.brand-guide-main > p { color: #adbed1; font-size: 17px; line-height: 1.85; }
.brand-section-light .brand-guide-main > p { color: var(--brand-muted); }
.brand-guide-callout { margin-top: 30px; padding: 24px 26px; border-left: 4px solid #28cbb7; border-radius: 0 16px 16px 0; background: #e8f4f6; color: var(--brand-ink); }
.brand-guide-callout p { margin: 8px 0 0; color: var(--brand-muted); line-height: 1.7; }
.brand-guide-aside,
.brand-guide-scorecard { padding: 29px; border: 1px solid rgba(104,167,225,.25); border-radius: 22px; background: #0c2037; box-shadow: 0 24px 60px rgba(0,8,20,.2); }
.brand-guide-aside > span,
.brand-guide-scorecard > span { color: #7fded1; font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.brand-guide-aside ul { display: grid; gap: 15px; margin: 25px 0 0; padding: 0; list-style: none; }
.brand-guide-aside li { position: relative; padding-left: 24px; color: #bfcedd; line-height: 1.55; }
.brand-guide-aside li::before { content: "×"; position: absolute; left: 0; color: #ff7384; font-weight: 950; }
.brand-guide-flow { display: grid; grid-template-columns: repeat(5,1fr); gap: 15px; margin: 50px 0 0; padding: 0; list-style: none; }
.brand-guide-flow li { min-height: 290px; padding: 25px; border: 1px solid var(--brand-line); border-radius: 20px; background: rgba(255,255,255,.035); }
.brand-guide-flow li > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg,#326bf2,#27cdbb); font-weight: 950; }
.brand-guide-flow h3 { margin: 35px 0 10px; font-size: 18px; line-height: 1.3; }
.brand-guide-flow p { margin: 0; color: #9fb1c5; font-size: 14px; line-height: 1.7; }
.brand-guide-check-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 48px; }
.brand-guide-check-grid article { min-height: 270px; padding: 27px; border: 1px solid var(--brand-line); border-radius: 20px; background: #fff; }
.brand-guide-check-grid article > span { color: var(--brand-blue-dark); font-size: 11px; font-weight: 950; letter-spacing: .11em; }
.brand-guide-check-grid h3 { margin: 25px 0 10px; font-size: 20px; line-height: 1.25; }
.brand-guide-check-grid p { margin: 0; color: var(--brand-muted); line-height: 1.7; }
.brand-guide-test-list { display: grid; gap: 13px; margin: 28px 0; padding: 0; list-style: none; }
.brand-guide-test-list li { padding: 15px 18px; border: 1px solid rgba(115,169,220,.2); border-radius: 13px; background: rgba(255,255,255,.035); color: #b8c8d8; }
.brand-guide-test-list strong { color: #68decf; }
.brand-guide-scorecard dl { display: grid; gap: 0; margin: 20px 0 0; }
.brand-guide-scorecard dl > div { padding: 16px 0; border-top: 1px solid rgba(255,255,255,.09); }
.brand-guide-scorecard dt { color: #d9e6f2; font-weight: 750; }
.brand-guide-scorecard dd { margin: 5px 0 0; color: #7f95aa; font-size: 13px; }
.brand-guide-faq { max-width: 900px; }
.brand-guide-faq details { border-bottom: 1px solid #d7e1ec; }
.brand-guide-faq summary { padding: 25px 6px; color: var(--brand-ink); font-size: 18px; font-weight: 850; cursor: pointer; }
.brand-guide-faq details p { margin: -6px 6px 26px; color: var(--brand-muted); font-size: 16px; line-height: 1.75; }

@media (max-width: 1050px) {
    .brand-guide-flow { grid-template-columns: repeat(2,1fr); }
    .brand-guide-check-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
    .brand-guide-hero .brand-page-hero-inner { min-height: 540px; }
    .brand-guide-layout { grid-template-columns: 1fr; gap: 35px; }
    .brand-guide-flow,
    .brand-guide-check-grid { grid-template-columns: 1fr; }
    .brand-guide-flow li,
    .brand-guide-check-grid article { min-height: 0; }
}