/* Sage and peach tokens (PLAN 2026-09-24 soft redesign A1). Every stylesheet reads these. */
:root {
  color-scheme: light;
  --bg: #FFFCF8;
  --surface: #FFFFFF;
  --panel: #F1F6F1;
  --panel-deep: #E3EDE4;
  --panel-warm: #FFF3EA;
  --action: #3F7A63;
  --action-deep: #2F5E4C;
  --brand: #22332B;
  --brand-soft: #3F7A63;
  --accent: #FBD9C4;
  --star: #B97800;
  --ink: #1C2B24;
  --text: #34423B;
  --muted: #5B6B63;
  --line: #E4ECE5;
  --shadow-card: 0 12px 32px rgba(34, 51, 43, 0.06);
  --shadow-lift: 0 18px 44px rgba(34, 51, 43, 0.10);
  --shadow-action: 0 8px 20px rgba(63, 122, 99, 0.25);
}

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  text-wrap: balance;
}

h1 { font-size: clamp(36px, 5.2vw, 56px); }
h2 { font-size: clamp(28px, 3.6vw, 38px); }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 18px; font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 16px; }

.lead { font-size: 20px; }

small, .small { font-size: 15px; color: var(--muted); }

a { color: var(--action-deep); }

ul, ol { padding-left: 20px; }

/* Layout utilities */

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap-narrow {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Buttons: round, per A3. `.btn` is the shared shape and reset for both <a> and <button>;
   a colour modifier picks the fill. Always used as two classes: class="btn btn-primary". */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  font-family: "Figtree", sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

.btn-primary {
  background: var(--action);
  color: var(--surface);
  box-shadow: var(--shadow-action);
}
.btn-primary:hover { background: var(--action-deep); }

.btn-outline {
  background: var(--surface);
  color: var(--action);
  border: 2px solid var(--panel-deep);
  padding: 12px 24px;
}
.btn-outline:hover { border-color: var(--action); }

.btn-quiet {
  background: transparent;
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn-quiet:hover { color: var(--action-deep); }

.btn-lg {
  padding: 18px 34px;
  font-size: 18px;
}

/* Form controls: every page's own CSS only adds width/margin on top of this. */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

label {
  font-size: 15px;
  color: var(--text);
}

/* Reusable pieces */

.card {
  background: var(--surface);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.strip {
  display: block;
  border-radius: 20px;
  padding: 16px 22px;
}

/* Skip link, hidden until focused */

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  z-index: 100;
  transition: top 150ms ease-out;
}
.skip-link:focus { top: 12px; }

/* Focus visibility, everywhere (PLAN section 7) */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.brand-name {
  font-family: "Figtree", sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand);
}

.brand-tld {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--action);
  margin-left: 2px;
}

.footer-claim {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  margin: 10px 0 8px;
}

.lang-switch {
  display: inline-flex;
  gap: 8px;
}

.account-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.account-nav form {
  display: inline;
}

/* Footer */

.site-footer {
  background: var(--panel);
  margin-top: 72px;
  border-radius: 32px 32px 0 0;
}

.site-footer-inner {
  display: grid;
  gap: 24px;
  padding-block: 32px;
  text-align: center;
}

.footer-col a {
  display: inline-block;
  margin: 0 8px;
  color: var(--text);
}

.footer-col p a {
  margin: 0;
}

@media (min-width: 768px) {
  .site-footer-inner {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }
}

/* Forms and stars (PLAN 2026-09-24 review trust A7) */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-page { padding-block: 40px 24px; }

.lead-small { color: var(--text); margin: 0 0 20px; }

.form-note { font-size: 15px; color: var(--muted); margin: 0; }

.form-stack {
  display: grid;
  gap: 18px;
}

.form-stack label,
.form-stack legend {
  display: grid;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.form-stack input:not([type="checkbox"]):not([type="radio"]),
.form-stack select,
.form-stack textarea {
  width: 100%;
}

.form-stack .btn { justify-self: start; }

.star-input {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.star-input legend { margin-bottom: 6px; }

.star-input-row {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.star-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.star-input label {
  cursor: pointer;
  font-size: 40px;
  line-height: 1;
  color: var(--panel-deep);
  display: block;
  border-radius: 8px;
}

.star-input label::before { content: "\2605"; }

.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label {
  color: var(--star);
}

.star-input input:focus-visible + label {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

.stars { display: inline-flex; gap: 2px; font-size: 18px; line-height: 1; }
.star { color: var(--panel-deep); }
.star.is-filled { color: var(--star); }

/* motion: D010 appends here */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

a, button, .btn, .pill, .card {
  transition:
    transform 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    border-color 200ms var(--ease-out);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}

.btn:hover,
.card:hover {
  transform: translateY(-2px);
}

@keyframes reveal-fade-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main > *:first-child,
.card {
  animation: reveal-fade-rise 400ms var(--ease-out) both;
}

/* !important below is a deliberate exception to the project's no-!important convention: reduced
   motion is an accessibility guarantee and must win over any transition or animation declared by
   any stylesheet loaded before or after this one, regardless of selector specificity or load
   order. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}