/* Website support — uses the local design tokens and components in styles.css. */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 29px; color: var(--muted); font-size: 13px; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.support-hero { display: grid; grid-template-columns: 1.04fr 1fr; gap: 56px; align-items: center; padding-top: 46px; }
.support-hero h1 { max-width: 720px; font-size: clamp(39px, 4.05vw, 60px); }
.support-lead { margin-top: 25px; color: var(--muted); font-size: 19px; max-width: 570px; }
.support-promises { display: flex; flex-wrap: wrap; gap: 12px 23px; list-style: none; padding: 0; margin: 28px 0 0; }
.support-promises li { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; }
.support-promises .icon { width: 16px; height: 16px; }
.support-art { position: relative; height: 440px; isolation: isolate; }
.support-art::before { content: ""; position: absolute; z-index: -1; background: var(--sage); border-radius: 44% 42% 30% 47%; width: 88%; height: 92%; top: 5%; left: 6%; transform: rotate(-10deg); }
.support-artwork { width: 100%; height: 100%; }
.art-label { position: absolute; display: flex; align-items: center; gap: 11px; padding: 15px 20px; border-radius: 17px; background: var(--white); box-shadow: 0 12px 35px #183e3510; font-size: 14px; font-weight: 800; }
.art-label .icon { width: 23px; height: 23px; }
.art-label--top { right: 2%; top: 3%; transform: rotate(4deg); }
.art-label--bottom { left: 0; bottom: 10%; transform: rotate(-5deg); }
.support-signature { position: absolute; right: 6%; bottom: 3%; display: flex; align-items: center; gap: 14px; }
.support-signature .brand-mark { width: 39px; height: 47px; }
.support-signature span { font-style: italic; font-size: 15px; line-height: 1.35; }
.support-quick { margin-top: 45px; padding: 30px 35px; border: 1px solid var(--line); border-radius: 23px; display: grid; grid-template-columns: 1.05fr 1fr .8fr auto; gap: 23px; align-items: end; background: var(--white); }
.quick-heading { align-self: center; }
.quick-heading h2 { font-size: 21px; }
.quick-heading p { font-size: 14px; color: var(--muted); margin-top: 7px; }
.support-page select { font: inherit; }
.support-page .field select { width: 100%; min-height: 49px; padding: 12px 32px 12px 13px; border: 1px solid #bacabd; border-radius: 11px; background-color: var(--white); color: var(--ink); font-size: 16px; }
.support-quick .button { min-height: 49px; font-size: 15px; }
.quick-help { grid-column: 1 / -1; margin-top: -5px; font-size: 13px; color: var(--muted); }

.support-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.support-pain { border-top: 1px solid var(--line); padding-top: 27px; }
.support-pain h3 { margin-top: 22px; font-size: 23px; }
.support-pain p { margin-top: 13px; color: var(--muted); font-size: 16px; }
.support-pain .text-link { font-size: 15px; margin-top: 15px; }
.support-pain .icon-disc { width: 54px; height: 54px; }
.support-pain .icon { width: 27px; height: 27px; }
.support-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.support-plan { padding: 31px; border: 1px solid var(--line); border-radius: 26px; display: flex; flex-direction: column; background: var(--white); }
.support-plan--accent { background: var(--green); color: var(--white); border-color: var(--green); }
.plan-kicker { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .07em; margin-bottom: 16px; }
.support-plan--accent .plan-kicker { color: #d2dbc8; }
.support-plan h3 { font-size: 29px; }
.plan-description { color: var(--muted); font-size: 16px; margin-top: 15px; min-height: 78px; }
.support-plan--accent .plan-description { color: #d6e0d7; }
.plan-price { font-size: 19px; font-weight: 850; margin-top: 23px; }
.plan-price span { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; color: var(--muted); }
.support-plan--accent .plan-price span { color: #d6e0d7; }
.plan-list { list-style: none; padding: 25px 0; margin: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 15px; }
.support-plan--accent .plan-list { border-color: #547264; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.plan-list .icon { width: 17px; height: 17px; margin-top: 4px; }
.plan-agreement { margin: auto 0 25px; padding-top: 13px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.plan-agreement strong { color: var(--green); }
.support-plan--accent .plan-agreement, .support-plan--accent .plan-agreement strong { color: #e1e8d9; }
.support-plan .button { width: 100%; }
.support-plan--accent :focus-visible { outline-color: #ffca75; }
.plans-footnote { display: flex; align-items: flex-start; gap: 15px; margin-top: 28px; max-width: 960px; color: var(--muted); font-size: 15px; }
.plans-footnote .icon { margin-top: 3px; width: 22px; height: 22px; }
.support-urgent { display: grid; grid-template-columns: 1.2fr 1fr; gap: 65px; padding: 54px; border-radius: 33px; background: #f4e8d8; position: relative; }
.support-urgent .eyebrow { color: #81531e; }
.support-urgent h2 { max-width: 650px; }
.support-urgent p { margin-top: 22px; color: #655c4b; }
.urgent-details { border-left: 1px solid #d5c6b2; padding-left: 39px; align-self: center; }
.urgent-details h3 { font-size: 21px; }
.urgent-details ul { margin: 18px 0 24px; padding-left: 19px; color: #655c4b; font-size: 16px; }
.urgent-details li + li { margin-top: 9px; }
.urgent-note { font-size: 13px; }
.support-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 31px; list-style: none; padding: 0; margin: 0; }
.support-process .step-number { width: 47px; height: 47px; color: var(--green); background: var(--sage); border: 0; font-size: 14px; margin-bottom: 22px; }
.support-process li:nth-child(even) .step-number { background: #f7e4c5; }
.support-process h3 { font-size: 21px; }
.support-process p { margin-top: 15px; color: var(--muted); font-size: 16px; }

.support-account { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: start; }
.support-account-copy > p { color: var(--muted); margin-top: 23px; font-size: 18px; }
.support-account-list { list-style: none; margin: 31px 0 0; padding: 0; display: grid; gap: 23px; }
.support-account-list li { display: flex; align-items: flex-start; gap: 15px; }
.support-account-list .icon { width: 24px; height: 24px; margin-top: 2px; }
.support-account-list strong { font-size: 17px; }
.support-account-list p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.support-report { border: 1px solid var(--line); padding: 32px; background: var(--white); border-radius: 27px; }
.support-report h3 { font-size: 25px; }
.report-intro { font-size: 15px; color: var(--muted); margin-top: 12px; }
.report-list { margin: 26px 0 0; padding: 0; }
.report-list > div { padding: 18px 0; border-top: 1px solid var(--line); }
.report-list dt { font-size: 16px; font-weight: 850; }
.report-list dd { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.report-caption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.support-portfolio { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.support-work-image { height: 224px; border-radius: 23px; overflow: hidden; margin-bottom: 19px; }
.support-work h3 { font-size: 24px; }
.support-work p { font-size: 15px; color: var(--muted); margin-top: 7px; }
.support-work a { margin-top: 10px; font-size: 14px; }
.support-platforms { margin-top: 33px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.support-platforms strong { color: var(--green); margin-right: 4px; }
.support-platforms span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; }

.support-calculator { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; background: var(--sage); padding: 47px; border-radius: 33px; align-items: start; }
.calculator-fields { display: grid; gap: 25px; }
.calculator-fields fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calculator-fields legend { font-size: 15px; font-weight: 800; margin-bottom: 13px; }
.calculator-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.calculator-checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.calculator-checks input { width: 18px; height: 18px; accent-color: var(--green); margin: 3px 0 0; flex: 0 0 auto; }
.calculator-hours label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 15px; font-weight: 800; }
.calculator-hours input { accent-color: var(--green); width: 100%; margin: 20px 0 10px; min-height: 24px; cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.calculator-hint { font-size: 13px; color: var(--muted); margin-top: 9px; }
.calculator-result { background: var(--white); border-radius: 24px; padding: 32px; position: sticky; top: 30px; }
.calculator-result h3 { font-size: 32px; }
.calculator-result dl { margin-top: 25px; }
.calculator-result dl > div { display: flex; justify-content: space-between; gap: 22px; border-top: 1px solid var(--line); padding-block: 13px; font-size: 14px; }
.calculator-result dd { margin: 0; font-weight: 800; text-align: right; }
.calculator-result dt { color: var(--muted); }
.calculator-result .button { width: 100%; margin-top: 18px; }
.calculator-explanation { color: var(--muted); margin-top: 14px; font-size: 15px; }
.calculator-price { font-size: 14px; color: var(--muted); padding-top: 17px; border-top: 1px solid var(--line); }
.calculator-price strong { display: block; font-size: 22px; color: var(--green); margin-bottom: 6px; }
.support-start { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 38px; display: flex; align-items: center; gap: 30px; margin-top: 68px; }
.support-start > .icon-disc { width: 66px; height: 66px; }
.support-start h3 { font-size: 26px; }
.support-start p { color: var(--muted); margin-top: 10px; max-width: 760px; font-size: 16px; }
.support-start .text-link { flex-shrink: 0; margin-left: auto; }
.support-contact .contact-panel { align-items: start; }
.support-contact .contact-form { gap: 19px; }
.support-contact label { color: var(--white); }
.support-contact .field select { border-color: #bacabd; }
.support-contact .form-help { line-height: 1.6; }
.support-contact-list { margin: 28px 0 0; padding-left: 20px; color: #d6e0d7; font-size: 16px; }
.support-contact-list li + li { margin-top: 10px; }
.support-selection { padding: 15px 17px; background: #ffffff0d; border: 1px solid #678777; border-radius: 12px; color: #e8ebdf; font-size: 14px; }
.support-selection strong { display: block; color: var(--white); margin-bottom: 4px; }
.mobile-support-bar { display: none; }
.support-quick [aria-invalid="true"], .support-contact [aria-invalid="true"] { border-color: #a42f18; }

@media (max-width: 1100px) {
  .support-hero { gap: 32px; }
  .support-hero h1 { font-size: 47px; }
  .support-art { height: 390px; }
  .art-label { padding: 12px 16px; font-size: 12px; }
  .support-signature { right: 0; }
  .support-quick { grid-template-columns: 1fr 1fr auto; gap: 20px; }
  .quick-heading { grid-column: 1 / -1; }
  .support-plan { padding: 25px; }
  .plan-description { min-height: 102px; }
  .support-urgent { padding: 42px; gap: 37px; }
  .urgent-details { padding-left: 30px; }
  .support-account { gap: 38px; }
  .support-process { gap: 24px; }
  .support-calculator { padding: 34px; gap: 30px; }
  .calculator-result { padding: 25px; }
  .support-work-image { height: 190px; }
  .support-start { flex-wrap: wrap; }
  .support-start .text-link { margin-left: 95px; }
}
@media (max-width: 800px) {
  .support-hero { grid-template-columns: 1fr; padding-top: 35px; gap: 30px; }
  .support-hero h1 { font-size: clamp(38px,6.6vw,52px); }
  .support-art { max-width: 510px; width: 100%; height: 390px; justify-self: center; }
  .support-quick { grid-template-columns: 1fr 1fr; padding: 27px; margin-top: 24px; }
  .support-quick .button { align-self: end; }
  .quick-help { margin-top: 0; }
  .support-pains { gap: 30px; grid-template-columns: 1fr; }
  .support-pain { display: grid; grid-template-columns: 54px 1fr; column-gap: 21px; }
  .support-pain h3 { margin: 0; align-self: center; }
  .support-pain p, .support-pain .text-link { grid-column: 2; }
  .support-pain p { margin-top: 6px; }
  .support-plan-grid { grid-template-columns: 1fr; gap: 24px; }
  .support-plan { padding: 31px; }
  .plan-description { min-height: 0; max-width: 500px; }
  .plan-list { grid-template-columns: 1fr 1fr; gap: 17px 25px; }
  .plan-agreement { margin-bottom: 24px; }
  .support-urgent { grid-template-columns: 1fr; gap: 31px; }
  .urgent-details { padding: 28px 0 0; border-left: 0; border-top: 1px solid #d5c6b2; }
  .support-process { grid-template-columns: 1fr 1fr; gap: 36px; }
  .support-account { grid-template-columns: 1fr; gap: 36px; }
  .support-portfolio { grid-template-columns: 1fr 1fr; gap: 33px 25px; }
  .support-work-image { height: 200px; }
  .support-calculator { grid-template-columns: 1fr; gap: 32px; }
  .calculator-result { position: static; }
  .support-start { align-items: flex-start; gap: 21px; }
  .support-start div { flex: 1; }
  .support-start .text-link { margin-left: 0; }
  .support-page { padding-bottom: 85px; }
  .mobile-support-bar { position: fixed; inset: auto 0 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 17px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: #f8f7f2f5; border-top: 1px solid var(--line); }
  .mobile-support-bar span { font-size: 13px; line-height: 1.4; font-weight: 750; }
  .mobile-support-bar .button { min-height: 45px; padding: 10px 18px; font-size: 14px; }
  .support-page :target { scroll-margin-bottom: 100px; }
}
@media (max-width: 480px) {
  .breadcrumbs { margin-top: 13px; font-size: 12px; }
  .support-hero { padding-top: 29px; }
  .support-hero h1 { font-size: 38px; }
  .support-lead { font-size: 18px; }
  .support-promises { gap: 12px 17px; }
  .support-promises li { font-size: 12px; }
  .support-art { height: 310px; }
  .art-label { gap: 8px; padding: 11px 13px; font-size: 11px; }
  .art-label--top { right: 0; top: 3%; }
  .art-label--bottom { bottom: 8%; }
  .art-label .icon { width: 19px; height: 19px; }
  .support-signature { bottom: 0; right: 0; gap: 9px; }
  .support-signature span { font-size: 12px; }
  .support-signature .brand-mark { width: 30px; height: 36px; }
  .support-quick { grid-template-columns: 1fr; padding: 24px; gap: 18px; }
  .quick-heading h2 { font-size: 22px; }
  .quick-help { font-size: 12px; }
  .support-pain { gap: 0 16px; }
  .support-pain p { grid-column: 1 / -1; margin-top: 16px; }
  .support-pain .text-link { grid-column: 1 / -1; }
  .support-plan { padding: 28px 25px; }
  .plan-list { grid-template-columns: 1fr; gap: 15px; }
  .support-urgent { padding: 30px 25px; border-radius: 26px; }
  .support-process { grid-template-columns: 1fr; gap: 29px; }
  .support-process li { position: relative; padding-left: 60px; }
  .support-process .step-number { position: absolute; left: 0; top: 0; width: 39px; height: 39px; }
  .support-process p { margin-top: 11px; }
  .support-report { padding: 28px 24px; }
  .support-portfolio { grid-template-columns: 1fr; }
  .support-work-image { height: 225px; }
  .support-calculator { padding: 25px 21px; border-radius: 25px; }
  .calculator-checks { grid-template-columns: 1fr; gap: 13px; }
  .calculator-result { padding: 26px 22px; }
  .calculator-result h3 { font-size: 28px; }
  .calculator-result dl > div { flex-wrap: wrap; gap: 5px 15px; }
  .calculator-result dd { text-align: left; }
  .support-start { display: block; margin-top: 48px; padding-block: 30px; }
  .support-start > .icon-disc { margin-bottom: 22px; }
  .support-start .text-link { margin-top: 17px; }
  .support-start h3 { font-size: 24px; }
  .mobile-support-bar { padding-inline: 16px; gap: 12px; }
  .mobile-support-bar span { font-size: 12px; }
}
@media print {
  .support-quick, .mobile-support-bar, .support-calculator { display: none; }
  .support-page { padding-bottom: 0; }
  .support-plan { break-inside: avoid; }
}