@font-face {
  font-family: "Figtree";
  src: url("./Figtree-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("./Figtree-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --petrol: #4e8181;
  --petrol-dark: #355858;
  --lime: #dce169;
  font-family: "Figtree", sans-serif;
  font-weight: 300;
  font-synthesis: none;
}

body { font-family: "Figtree", sans-serif; font-weight: 300; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, strong, b, th, summary { font-weight: 600; }

.brand, .brand-lockup { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.brand-logo { display: block; flex: 0 0 auto; width: 148px; height: 43px; object-fit: contain; }
.brand .brand-context { display: block; margin: 0; padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 300; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.brand-lockup { flex-direction: column; align-items: flex-start; gap: 8px; }
.brand-lockup .brand-logo { width: 252px; height: 72px; max-width: 100%; }
.brand-lockup .brand-context { color: #fff; font-size: 14px; font-weight: 300; }
.brand:focus-visible { outline: 2px solid var(--petrol-dark); outline-offset: 5px; }

.auth-brand { background: var(--petrol-dark); }
.auth-message h1 { font-size: 56px; line-height: 1.06; }
.auth-message > p:last-child { color: #fff; font-weight: 300; }
.button.primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.button.primary:hover { background: #fff; color: var(--petrol-dark); border-color: var(--petrol); }
.account-button span { background: var(--petrol-dark); }
.auth-link, .header-links a, .public-doc-links a, .text-action, .eyebrow { color: var(--petrol-dark); }
.auth-brand .eyebrow { color: var(--lime); }
.brand, .brand-lockup, .brand-context, .auth-message { letter-spacing: 0; }

.netplan-brand { margin-bottom: 24px; text-decoration: none; }
body.netplan-page { font: 300 16px "Figtree", sans-serif; }
.netplan-page button { background: var(--lime); color: #172124; border-color: var(--petrol); font-weight: 600; }
.netplan-page .notice { border-left-color: var(--petrol); }
.netplan-page a { color: var(--petrol-dark); }
.netplan-page .optimized { stroke: var(--petrol); }

@media (max-width: 940px) {
  .auth-message h1 { font-size: 42px; }
  .brand-lockup .brand-logo { width: 200px; height: 58px; }
}

@media (max-width: 680px) {
  .brand { flex-direction: column; align-items: flex-start; gap: 1px; }
  .brand-logo { width: 112px; height: 32px; }
  .brand .brand-context { padding: 0; border: 0; font-size: 10px; }
  .auth-message h1 { font-size: 34px; }
  .auth-brand { padding: 24px; }
  .auth-message { padding: 30px 0 4px; }
  .auth-workspace { padding: 30px 24px; }
  .auth-tabs { margin-bottom: 24px; }
  .auth-message > p:last-child { margin-bottom: 4px; }
  .netplan-page main { margin: 12px auto; padding: 16px; }
}

@media (max-width: 360px) {
  .portal .topbar { padding: 0 10px; }
  .portal .top-actions, .portal .header-links { gap: 8px; }
  .portal .header-links a { font-size: 11px; }
  .portal .brand-logo { width: 100px; height: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}