/* page-support.css — page-specific layout for public/support/index.html.
   Uses only tokens from tokens.css; no raw colour values here. */

.pwp-support-aeo { max-width: 62ch; margin: 0 auto var(--pwp-space-6); font-size: var(--pwp-fs-body); color: var(--pwp-fg-muted); }

/* Help-categories head: flush left with the card grid, one line on desktop. */
.pwp-support-head { text-align: left; margin-inline: 0; margin-block-end: clamp(var(--pwp-space-5), 3vw, var(--pwp-space-7)); }
.pwp-support-head::before {
  content: ""; display: block; inline-size: 56px; block-size: 3px;
  background: var(--pwp-accent); border-radius: 2px;
  margin-block-end: var(--pwp-space-4);
}
.pwp-support-head .pwp-sectionhead__title {
  text-align: left; margin-inline: 0;
  max-inline-size: 24ch; text-wrap: balance;
}
@media (min-width: 1100px) {
  .pwp-support-head .pwp-sectionhead__title {
    max-inline-size: none; white-space: nowrap;
    font-size: clamp(2rem, 2.9vw, 3rem);
  }
}

.pwp-support-cards { display: grid; grid-template-columns: 1fr; gap: var(--pwp-space-4); list-style: none; margin: 0; padding: 0; min-inline-size: 0; }
.pwp-support-cards > li { min-inline-size: 0; }
@media (min-width: 560px) { .pwp-support-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pwp-support-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pwp-support-card { display: flex; min-height: 44px; height: 100%; flex-direction: column; gap: var(--pwp-space-2); padding: var(--pwp-space-5); border: 1px solid var(--pwp-line); border-radius: var(--pwp-radius-sm); background: var(--pwp-card); text-decoration: none; color: inherit; transition: border-color var(--pwp-dur-fast, .15s) ease, transform var(--pwp-dur-fast, .15s) ease; }
.pwp-support-card:hover { border-color: var(--pwp-accent); }
.pwp-support-card:focus-visible { outline: 2px solid var(--pwp-focus); outline-offset: 2px; }
.pwp-support-card__icon { color: var(--pwp-accent-text); }
.pwp-support-card__title { font-weight: 700; font-size: var(--pwp-fs-body); letter-spacing: 0.01em; }
.pwp-support-card__body { color: var(--pwp-fg-muted); font-size: var(--pwp-fs-caption); line-height: 1.5; flex: 1 1 auto; }

.pwp-support-split { display: grid; gap: var(--pwp-space-8); }
@media (min-width: 900px) { .pwp-support-split { grid-template-columns: 1fr 1fr; } }

.pwp-support-causes { display: grid; gap: var(--pwp-space-3); list-style: none; margin: 0; padding: 0; }
.pwp-support-causes li { padding-inline-start: var(--pwp-space-5); position: relative; line-height: 1.6; }
.pwp-support-causes li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background: var(--pwp-accent); }

.pwp-support-pillars { display: grid; grid-template-columns: 1fr; gap: var(--pwp-space-4); list-style: none; margin: var(--pwp-space-5) 0 0; padding: 0; }
@media (min-width: 640px) { .pwp-support-pillars { grid-template-columns: 1fr 1fr; } }
.pwp-support-pillar { border: 1px solid var(--pwp-line); border-radius: var(--pwp-radius-sm); padding: var(--pwp-space-4); }
.pwp-support-pillar h4 { margin: 0 0 var(--pwp-space-2); font-size: var(--pwp-fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pwp-accent-text); }
.pwp-support-pillar p { margin: 0; color: var(--pwp-fg-muted); }

.pwp-support-column { display: flex; flex-direction: column; gap: var(--pwp-space-4); padding: var(--pwp-space-6); border: 1px solid var(--pwp-line); border-radius: var(--pwp-radius-sm); background: var(--pwp-card); }

.pwp-support-methods { display: grid; gap: var(--pwp-space-3); list-style: none; margin: 0; padding: 0; }
.pwp-support-method { display: inline-flex; align-items: center; gap: var(--pwp-space-3); min-height: 44px; padding: var(--pwp-space-3) var(--pwp-space-4); border: 1px solid var(--pwp-line); border-radius: var(--pwp-radius-sm); text-decoration: none; color: inherit; font-weight: 600; }
.pwp-support-method:hover { border-color: var(--pwp-accent); }
.pwp-support-method:focus-visible { outline: 2px solid var(--pwp-focus); outline-offset: 2px; }
.pwp-support-method svg { color: var(--pwp-accent-text); flex-shrink: 0; }

.pwp-support-contact-grid { display: grid; gap: var(--pwp-space-8); align-items: start; }
@media (min-width: 900px) { .pwp-support-contact-grid { grid-template-columns: 3fr 2fr; } }

.pwp-support-checklist { display: grid; gap: var(--pwp-space-3); list-style: none; margin: 0 0 var(--pwp-space-5); padding: 0; }
.pwp-support-checklist li { padding-inline-start: var(--pwp-space-5); position: relative; line-height: 1.55; }
.pwp-support-checklist li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.6em; width: 7px; height: 7px; background: var(--pwp-accent-text); }

.pwp-support-aside { padding: var(--pwp-space-6); border: 1px solid var(--pwp-line); border-radius: var(--pwp-radius-sm); background: var(--pwp-surface-0); }
.pwp-support-aside h3 { margin-top: 0; }
.pwp-support-aside p a { color: var(--pwp-accent-text); }

.pwp-support-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pwp-support-bridge { display: grid; gap: var(--pwp-space-8); }
@media (min-width: 900px) { .pwp-support-bridge { grid-template-columns: 3fr 2fr; align-items: center; } }
.pwp-support-diagnostic { border: 1px solid var(--pwp-accent); border-radius: var(--pwp-radius-sm); padding: var(--pwp-space-6); display: grid; gap: var(--pwp-space-4); }
.pwp-support-diagnostic__label { font-weight: 700; letter-spacing: 0.04em; color: var(--pwp-accent-text); }

.pwp-formdone { display: grid; gap: var(--pwp-space-3); padding: var(--pwp-space-6); border: 1px solid var(--pwp-line); border-radius: var(--pwp-radius-sm); background: var(--pwp-card); }
.pwp-formdone__links a { color: var(--pwp-accent-text); }

/* Keep the hero photo inside the viewport on small screens */
#hero.pwp-hero--scene { overflow: hidden; }

/* ============ craft pass ============ */
.pwp-support-split { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pwp-support-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.pwp-support-contact-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pwp-support-contact-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.pwp-support-bridge { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pwp-support-bridge { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* reveals must not push the page sideways */
#hero [data-reveal],
.pwp-support-cards [data-reveal],
.pwp-support-column,
.pwp-support-pillar,
.pwp-support-contact-grid > [data-reveal],
.pwp-support-bridge > [data-reveal] { --pwp-craft-dx: 0px; }

/* category cards: title first, description as the second layer */
.pwp-support-card { position: relative; overflow: hidden; transition: border-color var(--pwp-dur-mid, .3s) var(--pwp-ease, ease), transform var(--pwp-dur-mid, .3s) var(--pwp-ease, ease), box-shadow var(--pwp-dur-mid, .3s) var(--pwp-ease, ease); }
.pwp-support-card:hover, .pwp-support-card:focus-visible { transform: translateY(-3px); border-color: var(--pwp-accent); box-shadow: var(--pwp-shadow-md); }
.pwp-support-card__icon { color: var(--pwp-accent-text); }
.pwp-support-card__title { font-weight: 700; line-height: 1.3; }
.pwp-support-card__body { color: var(--pwp-ink-muted, inherit); line-height: 1.55; }
.pwp-support-card .pwp-live__rule { display: block; height: 1px; margin-block-start: auto; background: var(--pwp-line); transform: scaleX(.18); transform-origin: left; transition: transform var(--pwp-dur-mid, .3s) var(--pwp-ease, ease), background-color var(--pwp-dur-mid, .3s) ease; }
.pwp-support-card:hover .pwp-live__rule, .pwp-support-card:focus-visible .pwp-live__rule { transform: scaleX(1); background: var(--pwp-accent); }
.pwp-support-card__go { display: inline-flex; align-items: center; gap: .5ch; margin-block-start: var(--pwp-space-3); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pwp-accent-text); }
.pwp-support-card .pwp-live__arrow { transition: transform var(--pwp-dur-mid, .3s) var(--pwp-ease, ease); }
.pwp-support-card:hover .pwp-live__arrow, .pwp-support-card:focus-visible .pwp-live__arrow { transform: translateX(5px); }

/* routing columns + contact methods */
.pwp-support-column { padding: var(--pwp-space-6); border: 1px solid var(--pwp-line); border-radius: var(--pwp-radius-sm); background: var(--pwp-card); transition: border-color var(--pwp-dur-mid, .3s) ease, box-shadow var(--pwp-dur-mid, .3s) ease; }
.pwp-support-column:hover, .pwp-support-column:focus-within { border-color: color-mix(in oklab, var(--pwp-accent) 60%, transparent); box-shadow: var(--pwp-shadow-md); }
.pwp-support-column > h3 { margin-top: 0; }
.pwp-support-method { transition: border-color var(--pwp-dur-mid, .3s) ease, transform var(--pwp-dur-mid, .3s) var(--pwp-ease, ease), background-color var(--pwp-dur-mid, .3s) ease; }
.pwp-support-method:hover, .pwp-support-method:focus-visible { transform: translateX(4px); background: color-mix(in oklab, var(--pwp-accent) 8%, transparent); }

/* pillars */
.pwp-support-pillar { transition: border-color var(--pwp-dur-mid, .3s) ease, transform var(--pwp-dur-mid, .3s) var(--pwp-ease, ease); }
.pwp-support-pillar:hover { transform: translateY(-2px); border-color: var(--pwp-accent); }

/* form: focus draws the accent underline */
.pwp-form.pwp-glass, .pwp-support-aside.pwp-glass { padding: var(--pwp-space-6); border-radius: var(--pwp-radius-sm); }
.pwp-field { position: relative; }
.pwp-field__input, .pwp-field__select, .pwp-field__textarea { transition: border-color var(--pwp-dur-mid, .3s) ease, box-shadow var(--pwp-dur-mid, .3s) ease; }
.pwp-field__input:focus, .pwp-field__select:focus, .pwp-field__textarea:focus { border-color: var(--pwp-accent); box-shadow: 0 2px 0 0 var(--pwp-accent); outline-offset: 3px; }
.pwp-field__label { transition: color var(--pwp-dur-fast, .16s) ease; }
.pwp-field:focus-within .pwp-field__label { color: var(--pwp-accent-text); }
.pwp-field__error[hidden] { display: none; }
.pwp-field__error { animation: pwp-support-error-in var(--pwp-dur-mid, .3s) var(--pwp-ease, ease) both; }
@keyframes pwp-support-error-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* bridge panel */
.pwp-support-diagnostic { transition: transform var(--pwp-dur-mid, .3s) var(--pwp-ease, ease), box-shadow var(--pwp-dur-mid, .3s) ease; }
.pwp-support-diagnostic:hover { transform: translateY(-3px); box-shadow: var(--pwp-shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  .pwp-support-card, .pwp-support-method, .pwp-support-pillar, .pwp-support-diagnostic, .pwp-support-column,
  .pwp-support-card .pwp-live__rule, .pwp-support-card .pwp-live__arrow, .pwp-field__error { transition: none !important; animation: none !important; transform: none !important; }
}
.pwp-support-bridge > [data-reveal] > .pwp-sectionhead__title { margin-block-end: var(--pwp-space-4); }

/* ============ premium pass ============ */
/* hero: readable column, no runaway line, less dead space */
.pwp-page--support #hero .pwp-hero__grid { grid-template-columns: minmax(0, 1fr); }
.pwp-page--support #hero .pwp-hero__copy { max-inline-size: min(56ch, 60%); min-inline-size: 0; }
.pwp-page--support #hero .pwp-hero__subhead,
.pwp-page--support #hero .pwp-hero__lead,
.pwp-page--support .pwp-support-aeo {
  white-space: normal; text-wrap: pretty; max-inline-size: 54ch; margin-inline-start: 0; padding-inline-start: 0;
}
.pwp-page--support #hero .pwp-hero__scrim {
  background: linear-gradient(90deg, var(--pwp-surface-950) 0%, color-mix(in oklab, var(--pwp-surface-950) 84%, transparent) 44%, color-mix(in oklab, var(--pwp-surface-950) 38%, transparent) 76%, color-mix(in oklab, var(--pwp-surface-950) 18%, transparent) 100%);
}
.pwp-page--support #hero .pwp-hero__photo { object-position: 84% 50%; }
.pwp-page--support #hero .pwp-btn--lg { font-size: .78rem; padding: 0.85rem 1.4rem; }
@media (max-width: 899px) {
  .pwp-page--support #hero .pwp-hero__copy { max-inline-size: none; }
  .pwp-page--support #hero .pwp-hero__scrim { background: linear-gradient(180deg, color-mix(in oklab, var(--pwp-surface-950) 86%, transparent) 0%, var(--pwp-surface-950) 100%); }
}

/* icons render as line art, not solid blocks */
.pwp-page--support .pwp-support-card svg,
.pwp-page--support .pwp-support-column svg,
.pwp-page--support .pwp-support-pillar svg,
.pwp-page--support .pwp-icon svg,
.pwp-page--support svg.pwp-icon {
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--pwp-accent-text);
}
.pwp-page--support .pwp-support-card svg * ,
.pwp-page--support .pwp-support-column svg *,
.pwp-page--support .pwp-support-pillar svg * { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }

/* section heads read as editorial, not centred marketing */
.pwp-page--support .pwp-sectionhead--center { text-align: left; margin-inline: 0; }
.pwp-page--support .pwp-sectionhead__title { max-inline-size: 22ch; }

/* Customer / prospect pair: matched desktop plates, natural mobile height. */
#customer-or-prospect .pwp-support-split { align-items: stretch; }
#customer-or-prospect .pwp-support-column { height: 100%; }

/* Contact aside: an industrial support module fills the formerly empty rail. */
.pwp-support-contact-grid { align-items: stretch; }
.pwp-support-aside {
  position: relative;
  isolation: isolate;
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  overflow: hidden;
  background: var(--pwp-surface-950);
  color: var(--pwp-fg);
}
.pwp-support-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--pwp-accent) 9%, transparent), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in oklab, var(--pwp-border-dark) 38%, transparent) 40px);
}
.pwp-support-aside::after {
  content: "SUPPORT / 01";
  position: absolute;
  inset-block-start: var(--pwp-space-4);
  inset-inline-end: var(--pwp-space-4);
  color: var(--pwp-ink-inverse-muted);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.pwp-support-aside__copy { position: relative; z-index: 2; }
.pwp-support-aside h3 { max-inline-size: 18ch; color: var(--pwp-ink-inverse); }
.pwp-support-aside .pwp-support-checklist { margin-block-end: 0; }
.pwp-support-aside .pwp-support-checklist li { color: var(--pwp-ink-inverse-soft); }
.pwp-support-aside .pwp-support-checklist li::before { background: var(--pwp-accent); }
.pwp-support-contact-object {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 19rem);
  aspect-ratio: 1;
  margin: auto auto calc(var(--pwp-space-3) * -1);
  perspective: 900px;
}
.pwp-support-contact-object__plate {
  position: absolute;
  inset: 17%;
  border: 1px solid color-mix(in oklab, var(--pwp-ink-inverse) 16%, transparent);
  border-radius: var(--pwp-radius-sm);
  background: linear-gradient(145deg, color-mix(in oklab, var(--pwp-ink-inverse) 8%, transparent), transparent);
}
.pwp-support-contact-object__plate--rear { transform: rotate(13deg) translateZ(-20px); }
.pwp-support-contact-object__plate--front {
  border-color: color-mix(in oklab, var(--pwp-accent) 44%, transparent);
  transform: rotate(-7deg) translateZ(12px);
}
.pwp-support-contact-object img {
  position: relative;
  z-index: 2;
  display: block;
  width: 72%;
  height: auto;
  filter: drop-shadow(0 22px 22px color-mix(in oklab, var(--pwp-surface-950) 72%, transparent));
  animation: pwp-support-object-float 5s var(--pwp-ease, ease) infinite alternate;
}
.pwp-support-contact-object__node {
  position: absolute;
  z-index: 3;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pwp-accent);
  box-shadow: 0 0 0 7px color-mix(in oklab, var(--pwp-accent) 12%, transparent);
}
.pwp-support-contact-object__node--top { inset-block-start: 13%; inset-inline-end: 12%; }
.pwp-support-contact-object__node--bottom { inset-block-end: 15%; inset-inline-start: 12%; }
@keyframes pwp-support-object-float {
  from { transform: translate3d(0, 4px, 0) rotate(-1deg); }
  to { transform: translate3d(0, -7px, 0) rotate(1deg); }
}
@media (max-width: 899px) {
  #customer-or-prospect .pwp-support-column { height: auto; }
  .pwp-support-contact-object { width: min(78vw, 18rem); margin-block-start: var(--pwp-space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .pwp-support-contact-object img { animation: none; }
}