/* Pearnet app tokens: Brand.purple = (0.42, 0.22, 0.77),
   Brand.ink = (0.12, 0.10, 0.17), light systemGroupedBackground. */
:root {
  color-scheme: light;
  --purple: #6b38c4;
  --ink: #1f1a2b;
  --canvas: #f2f2f7;
  --secondary: #74717b;
  --card: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
.page { width: min(100% - 88px, 1120px); min-height: 100svh; margin-inline: auto; display: flex; flex-direction: column; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 38px; }
.wordmark { display: flex; align-items: center; gap: 9px; color: var(--purple); font-size: 29px; line-height: 1; font-weight: 700; letter-spacing: -1.1px; }
.leaf { width: 29px; height: 29px; }
.header-note { font-size: 13px; color: var(--secondary); }
main { flex: 1; display: flex; align-items: center; padding-block: 56px 80px; }
.announcement { width: 100%; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(40px, 6vw, 96px); }
.message { padding-bottom: 8px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 25px; font-size: 13px; font-weight: 600; color: var(--purple); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
h1 { margin: 0; max-width: 570px; font-size: clamp(42px, 4.8vw, 64px); line-height: 1.065; letter-spacing: -.048em; font-weight: 750; text-wrap: balance; }
h1 span { color: var(--purple); }
.intro { margin: 25px 0 0; font-size: 18px; line-height: 1.6; color: var(--secondary); letter-spacing: -.2px; }
.network-card { width: 100%; max-width: 450px; justify-self: end; padding: 26px; border: 1px solid rgba(0,0,0,.035); border-radius: 28px; background: var(--card); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: 15px; letter-spacing: -.3px; }
.card-title svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.card-status { font-size: 11px; font-weight: 700; color: var(--purple); white-space: nowrap; }
.network-symbol { position: relative; width: 184px; height: 184px; margin: 39px auto 24px; }
.ring { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring-track { stroke: rgba(107,56,196,.09); }
.ring-fill { stroke: var(--purple); stroke-linecap: round; stroke-dasharray: 405 541; }
.signal { position: absolute; width: 60px; height: 51px; inset: 0; margin: auto; fill: var(--purple); }
.card-caption { text-align: center; }
.card-caption p { margin: 0 0 11px; font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 27px; font-weight: 700; line-height: 1.17; letter-spacing: -.8px; }
.card-caption > span { color: var(--secondary); font-size: 13px; }
.card-bottom { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 28px; padding-top: 19px; border-top: 1px solid #f0eef3; color: var(--secondary); font-size: 12px; }
.card-bottom svg { width: 16px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }
footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 24px 30px; font-size: 12px; color: var(--secondary); }
footer > span:first-child { font-weight: 600; }
@media (min-width: 1440px) { main { padding-block: 90px 120px; } }
@media (max-width: 760px) {
  .page { width: min(100% - 44px, 560px); }
  .header { padding-block: 25px; }
  .wordmark { font-size: 25px; }
  .leaf { width: 25px; height: 25px; }
  .header-note { display: none; }
  main { padding-block: 37px 44px; }
  .announcement { grid-template-columns: 1fr; gap: 34px; }
  h1 { max-width: 490px; font-size: clamp(40px, 8.6vw, 54px); }
  .eyebrow { margin-bottom: 19px; }
  .intro { font-size: 16px; margin-top: 21px; }
  .network-card { justify-self: stretch; max-width: none; padding: 22px; }
  .network-symbol { width: 146px; height: 146px; margin-block: 28px 20px; }
  .signal { width: 50px; height: 43px; }
  .card-caption p { font-size: 25px; }
  .card-bottom { margin-top: 23px; }
  footer { padding-block: 10px 26px; font-size: 11px; }
}
@media (max-width: 360px) {
  .page { width: calc(100% - 36px); }
  h1 { font-size: 37px; }
  .card-header { gap: 8px; }
  .card-title { font-size: 14px; }
  footer { flex-direction: column; gap: 7px; }
}
@media print {
  .page { min-height: auto; width: 100%; }
  main { padding-block: 32px; }
  .network-card { break-inside: avoid; }
}