/* MathematiX support — a quiet, premium help desk. */
.support-main { position: relative; overflow: hidden; }
.support-main::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  right: -260px;
  top: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--green-300) 18%, transparent), transparent 68%);
  pointer-events: none;
}

.support-hero { padding: 76px 0 92px; position: relative; }
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr);
  gap: clamp(46px, 6vw, 88px);
  align-items: start;
}
.support-intro { padding-top: 34px; }
.support-intro h1 {
  max-width: 9.5ch;
  margin-top: 20px;
  font-size: clamp(3rem, 5.2vw, 4.6rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.045em;
}
.support-intro h1 em { color: var(--green-700); font-weight: 400; }
.support-lead { max-width: 48ch; margin-top: 24px; color: var(--ink-soft); font-size: 1.08rem; line-height: 1.72; }

.support-promise { margin-top: 38px; display: grid; gap: 2px; }
.support-promise__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.support-promise__item:first-child { border-top: 1px solid var(--line); }
.support-promise__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mint-line);
  background: color-mix(in srgb, var(--mint) 68%, white);
  color: var(--green-700);
  border-radius: 13px;
}
.support-promise__icon svg { width: 20px; height: 20px; }
.support-promise__item b { display: block; font-size: .98rem; font-weight: 650; color: var(--ink); }
.support-promise__item small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: .88rem; line-height: 1.5; }

.support-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding: 15px 17px; border-radius: 14px; background: rgba(255,255,255,.52); border: 1px solid var(--line); }
.support-note__mark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper-2); font-family: var(--font-serif); font-size: .85rem; font-style: italic; }
.support-note p { color: var(--ink-soft); font-size: .84rem; line-height: 1.55; }
.support-note strong { color: var(--ink); }

.support-card {
  position: relative;
  min-height: 760px;
  padding: clamp(28px, 3.4vw, 42px);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(207, 202, 187, .82);
  border-radius: 28px;
  box-shadow: 0 34px 85px -42px rgba(11, 38, 25, .36), 0 4px 16px -8px rgba(11, 38, 25, .12), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
}
.support-card::before {
  content: "";
  position: absolute;
  inset: 0 24px auto;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, var(--green-300), var(--sky), transparent);
  opacity: .66;
}
.support-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; margin-bottom: 30px; padding-bottom: 25px; border-bottom: 1px solid var(--line-soft); }
.support-card__kicker { display: block; color: var(--green-700); font: 500 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.support-card__head h2, .support-success h2 { margin-top: 10px; font-size: 2rem; font-weight: 450; letter-spacing: -.025em; }
.support-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--mint-line); border-radius: 999px; color: var(--green-700); background: var(--mint); font: 500 10px/1 var(--font-mono); letter-spacing: .02em; white-space: nowrap; }
.support-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent); }

.support-form { display: grid; gap: 20px; }
.support-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.support-field label, .support-label-row label { display: block; margin-bottom: 8px; color: #26332b; font-size: .83rem; font-weight: 650; letter-spacing: .005em; }
.support-field label > span[aria-hidden="true"] { color: var(--green-700); }
.support-optional { margin-left: 6px; color: var(--ink-faint); font-size: .72rem; font-weight: 500; }
.support-field input, .support-field select, .support-field textarea {
  width: 100%;
  border: 1px solid #ddd9cd;
  border-radius: 12px;
  outline: none;
  background: #fdfcf8;
  color: var(--ink);
  font: 500 .93rem/1.45 var(--font-sans);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.support-field input, .support-field select { min-height: 48px; padding: 0 14px; }
.support-field textarea { display: block; resize: vertical; min-height: 152px; padding: 13px 14px; }
.support-field input::placeholder, .support-field textarea::placeholder { color: #9ba099; font-weight: 400; opacity: 1; }
.support-field input:hover, .support-field select:hover, .support-field textarea:hover { border-color: #c9c5b8; }
.support-field input:focus, .support-field select:focus, .support-field textarea:focus { border-color: var(--green-300); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 10%, transparent); }
.support-field input[aria-invalid="true"], .support-field select[aria-invalid="true"], .support-field textarea[aria-invalid="true"] { border-color: #bb5d51; box-shadow: 0 0 0 3px rgba(187,93,81,.09); }
.support-select { position: relative; }
.support-select select { appearance: none; padding-right: 38px; cursor: pointer; }
.support-select svg { position: absolute; width: 16px; height: 16px; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.support-label-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.support-label-row > span { margin-bottom: 8px; color: var(--ink-faint); font: 400 10px/1 var(--font-mono); }
.support-help { margin-top: 8px; color: var(--ink-faint); font-size: .78rem; line-height: 1.5; }
.support-trap { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

.support-consent { display: grid; grid-template-columns: 21px 1fr; gap: 11px; align-items: start; cursor: pointer; }
.support-consent input { position: absolute; opacity: 0; pointer-events: none; }
.support-consent > span { width: 20px; height: 20px; display: grid; place-items: center; margin-top: 1px; border: 1px solid #c9c5b8; border-radius: 6px; background: #fdfcf8; color: transparent; transition: .2s ease; }
.support-consent > span svg { width: 13px; height: 13px; }
.support-consent input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.support-consent input:focus-visible + span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent); }
.support-consent input[aria-invalid="true"] + span { border-color: #bb5d51; box-shadow: 0 0 0 3px rgba(187,93,81,.09); }
.support-consent small { color: var(--ink-soft); font-size: .78rem; line-height: 1.55; }
.support-consent a { color: var(--green-700); font-weight: 650; text-decoration: underline; text-decoration-color: var(--green-300); text-underline-offset: 3px; }

.support-alert { padding: 12px 14px; border: 1px solid rgba(171,61,51,.24); border-radius: 10px; color: #833c34; background: #fff6f4; font-size: .84rem; line-height: 1.5; }
.support-submit { position: relative; width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; overflow: hidden; border-radius: 13px; color: #fff; background: linear-gradient(110deg, #145c3d, #258563 52%, #276a82); box-shadow: 0 12px 24px -15px rgba(15,74,49,.75), inset 0 1px rgba(255,255,255,.18); font-size: .94rem; font-weight: 650; transition: transform .22s var(--ease), box-shadow .22s var(--ease), opacity .2s ease; }
.support-submit::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.12), transparent 75%); transform: translateX(-100%); transition: transform .5s ease; }
.support-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(15,74,49,.8), inset 0 1px rgba(255,255,255,.22); }
.support-submit:hover:not(:disabled)::before { transform: translateX(100%); }
.support-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 26%, transparent); outline-offset: 3px; }
.support-submit:disabled { cursor: wait; opacity: .82; }
.support-submit svg { width: 17px; height: 17px; }
.support-spinner { display: none; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.34); border-top-color: #fff; border-radius: 50%; animation: support-spin .7s linear infinite; }
.support-submit.is-busy [data-submit-arrow] { display: none; }
.support-submit.is-busy .support-spinner { display: block; }
@keyframes support-spin { to { transform: rotate(360deg); } }
.support-secure { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: -5px; color: var(--ink-faint); font: 400 10px/1.4 var(--font-mono); text-align: center; }
.support-secure svg { width: 13px; height: 13px; flex: none; }
.support-noscript { margin-top: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); font-size: .85rem; }
.support-noscript a { color: var(--green-700); text-decoration: underline; }

.support-success { min-height: 690px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px 20px; }
.support-success[hidden] { display: none; }
.support-success__mark { width: 74px; height: 74px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid var(--mint-line); border-radius: 24px; color: var(--green-700); background: linear-gradient(145deg, #fff, var(--mint)); box-shadow: 0 18px 40px -24px rgba(20,92,61,.6); }
.support-success__mark svg { width: 34px; height: 34px; }
.support-success h2 { margin-top: 14px; font-size: 2.55rem; }
.support-success > p { max-width: 38ch; margin-top: 16px; color: var(--ink-soft); font-size: .98rem; }
.support-reference { width: min(100%, 330px); display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper-2); }
.support-reference span { color: var(--ink-faint); font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.support-reference strong { color: var(--green-700); font: 600 13px/1 var(--font-mono); letter-spacing: .04em; }
.support-success .support-success__hint { max-width: 42ch; color: var(--ink-faint); font-size: .8rem; }
.support-home-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 32px; color: var(--green-700); font-size: .9rem; font-weight: 650; }
.support-home-link svg { width: 15px; height: 15px; transition: transform .2s ease; }
.support-home-link:hover svg { transform: translateX(3px); }

.support-expectations { position: relative; padding: 84px 0 96px; border-top: 1px solid var(--line); background: rgba(251,250,244,.68); }
.support-expectations__head { max-width: 610px; }
.support-expectations__head h2 { margin-top: 18px; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; line-height: 1.07; }
.support-steps { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 52px; border-top: 1px solid var(--line); }
.support-steps li { position: relative; padding: 28px 42px 6px 0; }
.support-steps li:not(:last-child)::after { content: ""; position: absolute; top: 28px; right: 22px; bottom: 6px; width: 1px; background: var(--line); }
.support-steps span { color: var(--green-700); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; }
.support-steps h3 { margin-top: 34px; font-size: 1.45rem; font-weight: 500; }
.support-steps p { max-width: 32ch; margin-top: 10px; color: var(--ink-soft); font-size: .91rem; }

@media (max-width: 1080px) {
  .support-layout { grid-template-columns: minmax(0, .78fr) minmax(500px, 1.22fr); gap: 38px; }
  .support-intro h1 { font-size: clamp(2.7rem, 5vw, 3.8rem); }
}
@media (max-width: 900px) {
  .support-hero { padding-top: 38px; }
  .support-layout { grid-template-columns: 1fr; max-width: 760px; }
  .support-intro { padding-top: 10px; }
  .support-intro h1 { max-width: 12ch; }
  .support-lead { max-width: 56ch; }
  .support-promise { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .support-promise__item { grid-template-columns: 1fr; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.4); }
  .support-promise__item:first-child { border-top: 1px solid var(--line); }
  .support-card { min-height: 0; }
}
@media (max-width: 700px) {
  .support-hero { padding-bottom: 64px; }
  .support-promise { grid-template-columns: 1fr; }
  .support-promise__item { grid-template-columns: 42px 1fr; }
  .support-form__grid { grid-template-columns: 1fr; }
  .support-card { padding: 28px 22px; border-radius: 22px; }
  .support-steps { grid-template-columns: 1fr; }
  .support-steps li { padding: 26px 0; display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; }
  .support-steps li:not(:last-child) { border-bottom: 1px solid var(--line); }
  .support-steps li:not(:last-child)::after { display: none; }
  .support-steps h3 { margin-top: 0; }
  .support-steps p { grid-column: 2; }
}
@media (max-width: 520px) {
  .support-hero { padding-top: 26px; }
  .support-layout { padding-inline: 16px; }
  .support-intro h1 { font-size: clamp(2.55rem, 13vw, 3.25rem); }
  .support-card { margin-inline: -2px; padding: 27px 18px; }
  .support-card__head { align-items: center; }
  .support-card__head h2 { font-size: 1.75rem; }
  .support-status { padding: 6px 8px; font-size: 9px; }
  .support-success { min-height: 600px; padding-inline: 6px; }
  .support-success h2 { font-size: 2.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .support-spinner { animation: none; }
  .support-submit::before { display: none; }
}

/* ============ on-screen keyboard ============
   assets/js/keyboard-inset.js publishes --kb-inset: the part of the
   keyboard the browser did NOT take off the viewport by itself. It is
   0 in Safari and Chrome, which shrink the viewport and scroll the
   focused field into view on their own, and it is the whole keyboard
   inside an in-app WebView (Instagram, Facebook, TikTok), which reports
   nothing at all and lets the keys land on top of the form.

   Reserving that height at the foot of the page gives the focused field
   somewhere to scroll to — which is where the script puts it. */
body.kb-open { padding-bottom: var(--kb-inset, 0px); }