/* Pages that are not the walk: signing in, and the client area. They keep the
   site's vocabulary (dark ground, blue rule, the same two typefaces) without
   the scene, because these are places to do something, not to look at. */

.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(25, 110, 218, 0.14), transparent 62%),
    linear-gradient(180deg, #06070A, #080C14 55%, #06070A);
}
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(53, 73, 107, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 73, 107, 0.16) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(80% 60% at 50% 30%, #000 20%, transparent 78%);
}

.page-main {
  display: grid;
  place-items: center;
  padding: 7rem 0 4rem;
  position: relative;
  z-index: 1;
}

.sheet {
  width: min(30rem, 100% - 2.5rem);
  padding-left: 1.7rem;
  position: relative;
}
.sheet::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  background: linear-gradient(180deg,
    transparent, var(--blue) 16%, #8AC0FF 54%, var(--blue) 78%, transparent);
}
.sheet-wide { width: min(44rem, 100% - 2.5rem); }
.sheet h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.sheet .lead { margin-bottom: 2rem; }

.field { display: grid; gap: 0.5rem; margin-bottom: 1.3rem; }
.field label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7C90B0;
  font-family: var(--font-head);
  font-weight: 600;
}
.field input {
  font: inherit;
  color: var(--text);
  background: rgba(10, 14, 22, 0.8);
  border: 1px solid rgba(140, 175, 225, 0.2);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--blue-bright);
  background: rgba(12, 18, 30, 0.95);
}
/* 3.29:1 before, which is under AA for the hint that shows what to type. */
.field input::placeholder { color: #8A9AB5; }

.form-note { font-size: 0.86rem; color: var(--muted); margin: 1.2rem 0 0; }

/* One status line does all the talking: sent, failed, signed out. */
.status {
  display: none;
  margin: 1.4rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-size: 0.94rem;
  border: 1px solid transparent;
}
.status.is-on { display: block; }
.status.is-ok {
  color: #CFE3FF;
  background: rgba(25, 110, 218, 0.12);
  border-color: rgba(59, 139, 240, 0.32);
}
.status.is-bad {
  color: #FFD9CF;
  background: rgba(218, 70, 40, 0.12);
  border-color: rgba(240, 110, 80, 0.32);
}

.account-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.who { font-family: var(--font-head); font-weight: 600; }
.who span { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7C90B0; }

.panel-rows { display: grid; gap: 0.9rem; }
.row {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(140, 175, 225, 0.14);
  border-radius: 14px;
  background: rgba(9, 13, 22, 0.6);
}
.row h2 { font-size: 1.05rem; margin: 0; }
.row p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.row-soon { border-style: dashed; opacity: 0.75; }

.page-foot {
  position: relative;
  z-index: 1;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}
.page-foot .container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.page-foot a { color: var(--muted); font-size: 0.88rem; }
.page-foot a:hover { color: var(--text); text-decoration: none; }

/* ------------------------------------------------------------------ plans */

/* Picking a plan is the one thing this page is for, so it gets the room the
   three dead panels used to take. */
.plan-block { margin: 0.4rem 0 0; }
.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.plan-head h2 { font-size: 1.15rem; margin: 0; }

/* Monthly against yearly. A segmented control, not a dropdown: two options
   are worth showing both at once. */
.plan-switch {
  display: inline-flex;
  padding: 0.22rem;
  gap: 0.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.6);
}
.plan-switch button {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.16s ease, background 0.16s ease;
}
.plan-switch button:hover { color: var(--text); }
.plan-switch button[aria-pressed="true"] {
  color: var(--text);
  background: rgba(25, 110, 218, 0.28);
}
.plan-save {
  font-size: 0.74rem;
  font-weight: 700;
  color: #86e0ab;
  margin-left: 0.4rem;
}

.plan-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.4rem 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
  position: relative;
}
/* The one being steered towards, marked by light rather than by shouting. */
.plan-card.is-featured {
  border-color: rgba(25, 110, 218, 0.42);
  background:
    radial-gradient(120% 80% at 50% -30%, rgba(25, 110, 218, 0.16), transparent 70%),
    var(--bg-card);
}
.plan-name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; margin: 0; }
.plan-tag { color: var(--muted); font-size: 0.88rem; margin: 0; }
.plan-price {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.2rem 0 0;
}
.plan-per { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.plan-features { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.plan-features li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}
.plan-features li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--blue-bright);
}
.plan-card .btn { margin-top: auto; width: 100%; }
.plan-note {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #f0c674;
}
.plan-current {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: #86e0ab;
  text-align: center;
}

@media (max-width: 720px) {
  /* minmax(0, 1fr), not 1fr: a plain 1fr is minmax(auto, 1fr) and lets the
     column grow past the container to fit its content, which pushed the cards
     off the right of the screen. */
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-head { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ legal */

/* Terms and privacy. Long prose, so it gets a measure that is comfortable to
   read and headings that are easy to scan back to. */
.legal { text-align: left; }
.legal h1 { margin-bottom: 0.6rem; }
.legal .lead { margin-bottom: 0.4rem; }
.legal-date { font-size: 0.82rem; color: var(--muted); margin: 0 0 2rem; }
.legal section { margin: 0 0 1.9rem; }
.legal h2 {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
}
.legal p, .legal li { color: var(--muted); font-size: 0.94rem; line-height: 1.65; }
.legal p { margin: 0 0 0.8rem; }
.legal ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.legal li { margin-bottom: 0.45rem; }
.legal strong { color: var(--text); font-weight: 600; }
/* Underlined, because in a wall of body text the blue alone is only 1.52:1
   against the surrounding words, so colour is doing all the work. */
.legal a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 0.18em; }

/* Who we legally are, as a definition list that stays readable on a phone. */
.legal-ident {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.legal-ident dl {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: 0.45rem 1rem;
  margin: 0;
}
.legal-ident dt { color: #7C90B0; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.legal-ident dd { margin: 0; color: var(--text); font-size: 0.94rem; }
/* Anything company.js could not fill stays visibly unfinished, rather than
   quietly reading as if it were a real answer. */
.legal-ident dd[data-missing] { color: #f0c674; font-style: italic; }

.legal-warn {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(214, 158, 46, 0.45);
  border-radius: 10px;
  background: rgba(214, 158, 46, 0.1);
  color: #f0c674;
  font-size: 0.88rem;
  margin: 0 0 1.6rem;
}
.legal-lang {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

@media (max-width: 560px) {
  .legal-ident dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .legal-ident dd { margin-bottom: 0.6rem; }
}

/* Announced, not shown: for text that only exists to tell a screen reader
   what just changed. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Was two inline style attributes; moved here so the Content-Security-Policy
   can say style-src 'self' with no unsafe-inline. */
.panel-rows-gap { margin-top: 1.6rem; }
.row-actions-top { margin-top: 2rem; }

/* The statutory withdrawal form. Boxed and monospaced-ish so it reads as a
   thing to fill in and send, not as more prose. */
.legal-form {
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(8, 12, 20, 0.5);
}
.legal-form h3 {
  font-family: var(--font-head);
  font-size: 0.98rem;
  margin: 0 0 0.3rem;
}
.legal-form-note { font-size: 0.84rem; font-style: italic; }
.legal-form p { margin: 0 0 0.75rem; font-size: 0.9rem; }
.legal-form [data-missing] { color: #f0c674; font-style: italic; }

/* Net price is the headline; the gross figure sits under it so a consumer can
   see what they would actually pay. */
.plan-vat { margin: -0.35rem 0 0; font-size: 0.78rem; color: var(--muted); }