/* SissoDigital brand palette: cream, dark grey, dark red. */
:root {
  --cream: #FCFBF4;
  --grey: #545454;
  --red: #8B0000;
  --bg: var(--cream);
  --panel: var(--cream);
  --white: var(--grey);
  --muted: var(--grey);
  --navy: var(--grey);
  --line: #54545433;
}
html { background: var(--cream); }
body { background: var(--cream); color: var(--grey); }
nav, .band, footer { border-color: #54545433; }
.brand, .links, .hero-promise, .intro, .eyebrow, .small-note,
.section-head > p, .difference p, .about-copy p, .signature,
.band, footer { color: var(--grey); }
.brand span, h1 em, .kicker, .small-note span::before,
.included li::before { color: var(--red); }
.links > a:hover { color: var(--red); }
.dot { background: var(--red); box-shadow: 0 0 0 5px #8B00000D; }
.primary, .sample-button {
  background: var(--red);
  border-color: var(--red);
  color: var(--cream);
  box-shadow: none;
}
.primary:hover, .sample-button:hover {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 4px 15px #8B000026;
}
.secondary, .nav-contact {
  background: var(--grey);
  color: var(--cream);
  border-color: var(--grey);
}
.secondary:hover, .nav-contact:hover {
  background: var(--grey);
  border-color: var(--grey);
  box-shadow: 0 4px 15px #54545426;
}
.browser {
  background: var(--cream);
  border-color: #54545455;
  box-shadow: 0 25px 60px #54545424;
}
.browser-bar { background: var(--grey); border-color: var(--grey); }
.browser-bar small { color: var(--cream); }
.browser-bar i { background: #FCFBF499; }
.sample { background: var(--cream); color: var(--grey); }
.sample-nav { border-color: #54545433; color: var(--grey); }
.sample-nav b, .sample-body h3, .sample-body p { color: var(--grey); }
.sample-label { color: var(--red); }
.sample-footer { color: var(--grey); border-color: #54545433; }
.sample-caption { color: var(--grey); }
.design-art { background: var(--grey); border-color: var(--grey); }
.design-art::before { background: var(--red); }
.design-art::after { background: var(--cream); border-color: var(--cream); }
.design-mark { color: var(--cream); }
.difference {
  background: var(--cream);
  border-color: #54545440;
  color: var(--grey);
}
.icon {
  color: var(--red);
  border-color: #8B000033;
  background: var(--cream);
}
.pricing { background: var(--grey); border-color: var(--grey); }
.pricing .section-head { color: var(--cream); }
.pricing .section-head .kicker, .pricing .section-head > p { color: var(--cream); }
.price-card, .price-card.main, .guarantee {
  background: var(--cream);
  color: var(--grey);
  border-color: #FCFBF466;
}
.price-card.main { border-top-color: var(--red); }
.price-card p, .price span, .guarantee p, .included li { color: var(--grey); }
.included { border-color: #54545433; }
.pill { color: var(--red); background: var(--cream); border-color: #8B000055; }
.guarantee-top .number { color: var(--red); }
.initial { background: var(--grey); border-color: var(--grey); }
.initial::before { color: var(--cream); }
.initial::after { border-color: #FCFBF466; }
.profile-label, .profile-label span { color: var(--cream); }
.signature small { color: var(--grey); }
.signature span { color: var(--red) !important; }
.cta { background: var(--grey); border-color: var(--grey); color: var(--cream); }
.cta .kicker, .cta p { color: var(--cream); }
footer .nav-contact { background: var(--grey); color: var(--cream); }
.skip { color: var(--grey); background: var(--cream); }
:focus-visible { outline-color: var(--red); }
dialog {
  background: var(--cream);
  color: var(--grey);
  border-color: #54545466;
  box-shadow: 0 25px 100px #54545455;
}
dialog::backdrop { background: #545454B3; }
.close, .dialog-copy { color: var(--grey); }
.method {
  background: var(--cream);
  color: var(--grey);
  border-color: #54545466;
}
.method[aria-pressed=true] {
  background: var(--red);
  color: var(--cream);
  border-color: var(--red);
}
.contact-info { background: var(--cream); border-color: #54545440; color: var(--grey); }
.contact-info a { color: var(--red); }
.field { color: var(--grey); }
.field input, .field textarea {
  color: var(--grey);
  background: var(--cream);
  border-color: #54545488;
}
.field input:focus, .field textarea:focus { outline-color: var(--red); }
.field small, .form-note, .form-footer, .required-note { color: var(--grey); }
.form-footer a { color: var(--red); }
.form-status { background: var(--cream); border-color: #54545466; color: var(--grey); }
.form-status[data-kind=error] { background: var(--cream); border-color: var(--red); color: var(--red); }
.email-fallback { color: var(--red); border-color: #8B000055; background: var(--cream); }
.email-fallback:hover { background: var(--cream); border-color: var(--red); }

.builder-portrait { margin: 0; width: 100%; max-width: 420px; justify-self: center; }
.builder-portrait img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid #54545433; }
.builder-portrait figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 0 0; color: #545454; font-size: 0.75rem; }
.builder-portrait figcaption strong { font-size: 0.875rem; font-weight: 600; color: #8B0000; }
@media (max-width:680px) { .builder-portrait { max-width: 350px; } .builder-portrait figcaption { font-size: 0.6875rem; } }

/* Paid mockup pricing terms */
.mockup-terms { margin-top: 25px; padding: 22px; border: 1px solid #8B000044; border-radius: 7px; }
.mockup-terms .kicker { margin-bottom: 10px; }
.mockup-terms h4 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 0 0 14px; color: #545454; font-size: 1.125rem; font-weight: 600; letter-spacing: -.3px; }
.mockup-terms h4 span { color: #8B0000; font-size: 1.0rem; }
.mockup-terms p { margin: 12px 0; }
.policy-list { padding-left: 18px; margin: 12px 0 0; font-size: 0.8125rem; line-height: 1.8; color: #545454; }
.policy-list li + li { margin-top: 9px; }
.policy-detail { padding-top: 17px; margin-top: 17px; border-top: 1px solid #54545433; }
.policy-detail h4, .revision-columns h4 { margin: 0; font-size: 0.8125rem; font-weight: 650; color: #8B0000; }
.policy-detail p { margin-top: 7px; }
.revision-policy { grid-column: 1 / -1; }
.revision-policy > div:first-child { margin-bottom: 25px; }
.revision-policy h3 { margin: 0; font-size: 1.4375rem; font-weight: 550; letter-spacing: -.5px; }
.revision-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.revision-columns > div + div { padding-left: 32px; border-left: 1px solid #54545433; }
.revision-columns p { margin-bottom: 0; max-width: none; }
.price-card strong, .guarantee strong { font-weight: 650; }
@media(max-width:680px) { .mockup-terms { padding: 19px; } .revision-columns { grid-template-columns: 1fr; gap: 22px; } .revision-columns > div + div { border-left: 0; padding-left: 0; border-top: 1px solid #54545433; padding-top: 22px; } .card-top { flex-wrap: wrap; } }

/* Official SissoDigital logo artwork */
.brand-logo { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; line-height: 1; }
.brand-logo img { display: block; object-fit: contain; mix-blend-mode: normal; }
.brand-logo .brand-symbol { width: 48px; height: 48px; }
.brand-logo .brand-wordmark { width: 176px; height: 44px; }
footer .brand-logo .brand-symbol { width: 40px; height: 40px; }
footer .brand-logo .brand-wordmark { width: 160px; height: 40px; }
@media(max-width:680px) { .brand-logo { gap: 5px; } .brand-logo .brand-symbol { width: 36px; height: 36px; } .brand-logo .brand-wordmark { width: 137px; height: 35px; } }
.brand-logo { background: transparent; padding: 0; margin: 0; }

/* Accessible multilingual navigation and layout */
.language-control { display: flex; flex-direction: column; gap: 4px; color: #545454; min-width: 105px; }
.language-label { font-size: 0.5625rem; letter-spacing: .3px; }
.language-control select { font: inherit; font-size: 0.75rem; border: 1px solid #54545466; border-radius: 6px; color: #545454; background: #FCFBF4; padding: 8px 24px 8px 10px; max-width: 145px; min-height: 36px; cursor: pointer; }
.language-control option { color: #545454; background: #FCFBF4; }
[dir=rtl] .brand-logo, [dir=rtl] .showcase { direction: ltr; }
[dir=rtl] .revision-columns > div + div { border-left: 0; border-right: 1px solid #54545433; padding-left: 0; padding-right: 32px; }
[dir=rtl] .small-note span::before, [dir=rtl] .included li::before { margin-right: 0; margin-left: 10px; }
[dir=rtl] .price { direction: ltr; text-align: right; }
[dir=rtl] .close { right: auto; left: 16px; }
html[lang=ar] h1, html[lang=he] h1, html[lang=hi] h1 { letter-spacing: normal; line-height: 1.18; }
h1, h2, h3 { overflow-wrap: anywhere; }
html[lang]:not([lang=en]) .hero-promise { line-height: 1.55; }
input[type=email] { direction: ltr; text-align: start; }
@media(max-width:1050px) { nav .links { gap: 17px; } .language-control select { max-width: 120px; } }
@media(max-width:680px) { nav { height: auto; min-height: 96px; padding: 14px 0; gap: 12px; flex-wrap: wrap; } nav .links { gap: 12px; margin-inline-start: auto; } .language-control { min-width: 100px; } .language-control select { font-size: 0.6875rem; max-width: 125px; } .language-label { font-size: 0.5625rem; } [dir=rtl] .revision-columns > div + div { border-right: 0; padding-right: 0; } }
@media(max-width:420px) { nav .brand-logo { width: 100%; } nav .links { width: 100%; justify-content: space-between; margin: 0; } .language-control { flex-direction: row; align-items: center; gap: 9px; } .language-control select { max-width: 180px; } }

/* High-density PNG logo, exported directly from the original vector artwork. */
.brand-logo { gap: 0; }
.brand-logo .brand-lockup { display: block; width: 270px; height: auto; max-width: 100%; object-fit: contain; image-rendering: auto; }
footer .brand-logo .brand-lockup { width: 248px; height: auto; }
@media(max-width:900px) { nav .brand-logo .brand-lockup { width: 238px; } }
@media(max-width:680px) { .brand-logo .brand-lockup,nav .brand-logo .brand-lockup,footer .brand-logo .brand-lockup { width: 220px; height: auto; } }

/* Direct-to-expert discovery and payment process. */
.pricing .section-head { margin-bottom: 20px; }
.process-lead { color: #FCFBF4; font-size: 1.25rem; line-height: 1.5; font-weight: 600; margin: 0 0 12px; }
.process-intro { color: #FCFBF4; font-size: 1rem; line-height: 1.8; max-width: 780px; margin: 0 0 32px; }
.process-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 0; margin: 0; gap: 20px; list-style: none; }
.process-step { padding: 28px; background: #FCFBF4; color: #545454; border: 1px solid #FCFBF4; border-radius: 10px; min-width: 0; }
.process-number { display: inline-block; color: #8B0000; font-size: 2rem; font-weight: 600; line-height: 1; margin-bottom: 28px; letter-spacing: -.04em; }
.process-step h3 { font-size: 1.25rem; line-height: 1.4; margin: 0 0 16px; letter-spacing: -.02em; }
.process-badge { color: #8B0000; font-size: .9375rem; font-weight: 650; line-height: 1.6; margin: 0 0 14px; }
.process-body { font-size: .9375rem; line-height: 1.8; margin: 0; }
.process-action { margin: 28px 0 48px; }
.process-action .btn { white-space: normal; }
html[data-accessibility-contrast] .process-step { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html[data-large-text] .process-steps { grid-template-columns: minmax(0,1fr); }
@media(max-width:900px) { .process-steps { grid-template-columns: minmax(0,1fr); gap: 16px; } .process-number { margin-bottom: 18px; } }