/* Arcates R3 G-08/G-10 — final CTA + empty/error/success visual language. */

/* Final CTA -------------------------------------------------------------- */
.section--cta .cta { position: relative; overflow: hidden; isolation: isolate; }
.section--cta .cta__copy, .section--cta .cta__actions { position: relative; z-index: 2; }
.cta__visual {
  position: absolute;
  inset: 50% clamp(12px, 4vw, 44px) auto auto;
  width: min(42%, 420px);
  aspect-ratio: 1.35;
  transform: translateY(-50%);
  opacity: .72;
  pointer-events: none;
  z-index: 1;
}
.cta__visual svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cta__visual .cta-arc { fill: none; stroke: rgba(127,182,255,.30); stroke-width: 1.6; }
.cta__visual .cta-arc--bright { stroke: rgba(28,123,242,.66); stroke-width: 2.4; }
.cta__visual .cta-node { fill: #F5F8FF; stroke: #1C7BF2; stroke-width: 3; }
.cta__visual .cta-node--soft { fill: #1C7BF2; stroke: rgba(245,248,255,.75); }

/* Shared state mark ------------------------------------------------------ */
.state-mark {
  --state-accent: #1C7BF2;
  --state-soft: #EDF4FF;
  --state-ring: rgba(28,123,242,.28);
  --state-inset: rgba(28,123,242,.18);
  position: relative;
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(11,79,168,.14);
  border-radius: 32px;
  background:
    radial-gradient(circle at 72% 22%, rgba(127,182,255,.30), transparent 34%),
    linear-gradient(145deg, #FFFFFF, #F1F6FD);
  box-shadow: 0 20px 44px rgba(6,34,68,.10);
  overflow: hidden;
}
.state-mark::before {
  content: '';
  position: absolute;
  width: 88px;
  aspect-ratio: 1;
  border: 1px solid var(--state-ring);
  border-radius: 50%;
}
.state-mark::after {
  content: '';
  position: absolute;
  width: 54px;
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--state-soft);
  box-shadow: inset 0 0 0 1px var(--state-inset);
}
.state-mark__glyph { position: relative; z-index: 2; display: block; width: 28px; height: 28px; }
.state-mark--success {
  --state-accent: #12805A;
  --state-soft: #EAF7F2;
  --state-ring: rgba(18,128,90,.28);
  --state-inset: rgba(18,128,90,.18);
}
.state-mark--success .state-mark__glyph::before {
  content: '';
  position: absolute;
  width: 11px;
  height: 20px;
  left: 8px;
  top: 0;
  border: solid var(--state-accent);
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}
.state-mark--error {
  --state-accent: #B93828;
  --state-soft: #FCEFEB;
  --state-ring: rgba(185,56,40,.28);
  --state-inset: rgba(185,56,40,.18);
}
.state-mark--error .state-mark__glyph::before,
.state-mark--error .state-mark__glyph::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 1px;
  width: 4px;
  height: 27px;
  border-radius: 4px;
  background: var(--state-accent);
}
.state-mark--error .state-mark__glyph::before { transform: rotate(45deg); }
.state-mark--error .state-mark__glyph::after { transform: rotate(-45deg); }
.state-mark--empty .state-mark__glyph::before,
.state-mark--empty .state-mark__glyph::after {
  content: '';
  position: absolute;
  left: 3px;
  width: 22px;
  height: 6px;
  border: 2px solid var(--state-accent);
  border-radius: 4px;
}
.state-mark--empty .state-mark__glyph::before { top: 4px; }
.state-mark--empty .state-mark__glyph::after { top: 17px; opacity: .58; }

/* Front-end empty and success states ------------------------------------ */
.empty-state {
  min-height: 250px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(11,79,168,.14);
  border-radius: 24px;
  background: linear-gradient(145deg, #FFFFFF, #F7FAFF);
}
.empty-state__copy { max-width: 42rem; }
.empty-state__copy p { margin: 0; color: #4A6588; }
.section--thanks .thanks {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 5vw, 52px);
  align-items: center;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid rgba(18,128,90,.16);
  border-radius: 26px;
  background: linear-gradient(145deg, #FFFFFF, #F5FBF8);
}
.section--thanks .thanks__mark { display: none; }
.section--thanks .system__actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* Standalone HTTP errors ------------------------------------------------- */
.system-r7--error .system__card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 30px; align-items: center; }
.system-r7--error .system__visual { grid-row: 1 / span 4; align-self: center; }
.system-r7--error .system__code,
.system-r7--error .system__card h1,
.system-r7--error .system__lead,
.system-r7--error .system__actions { grid-column: 2; }
.system-r7--error .system__lead { margin-bottom: 0; }

@media (max-width: 58.75rem) {
  .cta__visual { width: min(48%, 330px); opacity: .44; }
}

@media (max-width: 45rem) {
  .cta__visual { inset: auto -50px -74px auto; width: 260px; transform: none; opacity: .34; }
  .empty-state, .section--thanks .thanks, .system-r7--error .system__card { grid-template-columns: 1fr; }
  .empty-state { min-height: 0; }
  .state-mark { width: 92px; border-radius: 26px; }
  .system-r7--error .system__visual { grid-row: auto; }
  .system-r7--error .system__code,
  .system-r7--error .system__card h1,
  .system-r7--error .system__lead,
  .system-r7--error .system__actions { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cta__visual, .state-mark { animation: none; transition: none; }
}