/*
  The PLAT look, taken from the logo: black type on cream, a lot of space, light weights and
  wide letter spacing, on the cream the logo sits on, with its soft sweep as the one decorative mark. No other colour
  is used for decoration, only for saying something (an error, a success, a warning).
  Built for a phone first. The pages are always the logo's own cream, never following a dark setting.
*/
:root {
  color-scheme: light;

  --ink: #0B0B0B;           /* the black of the wordmark */
  --ink-soft: #3B3934;      /* secondary text that still needs to be read easily */
  --muted: #7A7469;         /* labels and hints */
  --line: #E7E1D6;          /* hairlines and field borders */
  --surface: #FBF8F2;       /* the cream the logo sits on */
  --surface-soft: #F6F2E9;  /* panels that need to lift off the page slightly */
  --field: #FFFDF8;         /* boxes to type in, a shade lighter so they read as empty */
  --attention: #F2EDE1;     /* "look at this" without inventing a second brand colour */

  --error: #A3352C;
  --error-soft: #F7E7E3;
  --success: #1F6F48;
  --success-soft: #E9F2EA;
  --warning-soft: #F5EEDC;
  --warning-ink: #6B5A2E;
  --info-soft: #EAEEF2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 680px; margin: 0 auto; padding: 40px 20px 80px; }

/* The logo. Clear space around it is kept at about the height of a letter, as brand guidance asks. */
.brand { margin: 0 0 36px; }
.brand-mark { display: block; width: 132px; height: auto; }
.brand.centred { text-align: center; }
.brand.centred .brand-mark { margin: 0 auto; }

h1 {
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 12px;
}

/* Section headings borrow the logo's wide spacing and carry its sweep underneath. */
h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 44px 0 4px;
  padding-bottom: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 2 Q100 12 198 2' fill='none' stroke='%23000000' stroke-opacity='0.45' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 128px 8px;
}
.intro { color: var(--ink-soft); margin: 0 0 32px; font-size: 17px; }

label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  margin: 26px 0 8px;
}
.optional { font-weight: 400; color: var(--muted); }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], input[type="password"], textarea, select {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 120px; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: var(--muted); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--attention);
}

.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;              /* these are labels too, so the usual label spacing is cleared */
  font-weight: 400;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.checkbox-option:hover { border-color: var(--muted); }
.checkbox-option input { width: 20px; height: 20px; accent-color: var(--ink); }
.checkbox-option.chosen { border-color: var(--ink); background: var(--attention); }

button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 17px 22px;
  border-radius: 10px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--surface);
  cursor: pointer;
  width: 100%;
  margin-top: 34px;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
button:hover { opacity: 0.86; }
button:disabled { opacity: 0.45; cursor: progress; }
button.secondary { background: transparent; color: var(--ink); border-color: var(--line); margin-top: 12px; }
button.secondary:hover { border-color: var(--ink); opacity: 1; }
button.small { width: auto; padding: 10px 16px; font-size: 14px; margin: 0; }

a { color: var(--ink); text-underline-offset: 3px; }

.field-error { color: var(--error); font-size: 14px; font-weight: 500; margin-top: 8px; }
.message { padding: 15px 17px; border-radius: 10px; margin: 22px 0; font-weight: 500; }
.message.error { background: var(--error-soft); color: var(--error); }
.message.success { background: var(--success-soft); color: var(--success); }
.hidden { display: none; }
.footnote { color: var(--muted); font-size: 14px; margin-top: 30px; }

/* A question on the sign up form, drawn from whatever the team has set up. */
.question-block { margin-bottom: 4px; }
.help-text { color: var(--muted); font-size: 14px; margin: -2px 0 8px; }

/*
  A way back to the site from every page somebody can land on cold. Without it, following a link to the terms
  or the help page from an email leaves you on a page with no way out except the browser's own back button,
  which is not there at all when the link opened a new tab.
*/
.back-to-site {
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.back-to-site a {
  color: var(--muted);
  text-decoration: none;
}

.back-to-site a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.brand-home {
  display: inline-block;
  border: 0;
}

/*
  Where PLAT is on social media. Filled in from the team's portal, so a page with none shows none: the row
  takes no room at all until there is something in it, and centres whatever is there, so one link or three
  both look deliberate.
*/
.social-links:empty { display: none; }

.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
  font-size: 0.9rem;
}

.social-links a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.social-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }