/* Purkana — local, mobile-first foundations. No external fonts or scripts. */
:root {
  --paper:#faf8f3;
  --surface:#fffefa;
  --ink:#243b34;
  --muted:#55665e;
  --green:#245a49;
  --green-dark:#173f32;
  --sage:#e5ede3;
  --sand:#f0e5d2;
  --line:#d5ded3;
  --error:#8e2b2b;
  --radius:1.35rem;
  --shadow:0 12px 36px #243b3407;
  --space:clamp(1rem,3vw,2.5rem)}

* {
  box-sizing:border-box}
html {
  color-scheme:light;
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:1rem/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
h1,h2,h3,p {
  margin-top:0}
h1,h2,h3 {
  line-height:1.18;
  letter-spacing:-.035em}
h1 {
  font-size:clamp(2.35rem,6vw,4.9rem);
  font-weight:550}
h2 {
  font-size:clamp(1.6rem,3vw,2.45rem);
  font-weight:550}
h3 {
  font-size:1.2rem;
  font-weight:650}
p {
  color:var(--muted)}
a {
  color:var(--green);
  text-underline-offset:.22em}
a:hover {
  color:var(--green-dark)}
:focus-visible {
  outline:3px solid #996029;
  outline-offset:4px}
button,input,select,textarea {
  font:inherit}
button,.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  min-height:48px;
  padding:.8rem 1.3rem;
  border:1px solid var(--green);
  border-radius:.8rem;
  background:var(--green);
  color:white;
  font-weight:650;
  text-decoration:none;
  cursor:pointer;
  line-height:1.3}
button:hover,.button:hover {
  background:var(--green-dark);
  color:white}
.button-secondary {
  background:transparent;
  color:var(--green)}
.button-secondary:hover {
  background:var(--sage);
  color:var(--green-dark)}
.button-small {
  padding:.65rem 1rem;
  font-size:.9rem;
  min-height:44px}
button:disabled {
  opacity:.6;
  cursor:not-allowed}
.wrap {
  width:min(1180px,100% - 2*var(--space));
  margin-inline:auto}
.brand {
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:-.05em;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap}
.brand-mark {
  width:35px;
  height:35px;
  background:var(--green);
  color:var(--paper);
  border-radius:50% 50% 50% 12%;
  display:grid;
  place-items:center;
  font-size:1.8rem;
  font-family:Georgia,serif;
  font-style:italic}
.brand-dot {
  margin-left:-.5rem;
  color:#996029}
.public-header {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding-block:1.2rem}
.public-header nav {
  display:flex;
  gap:.8rem;
  align-items:center;
  flex-wrap:wrap}
.nav-link {
  font-size:.9rem;
  font-weight:600;
  padding:.5rem;
  text-decoration:none}
.skip-link {
  position:absolute;
  left:1rem;
  top:-100px;
  padding:.8rem;
  background:var(--ink);
  color:white;
  z-index:10}
.skip-link:focus {
  top:1rem}
.hero {
  display:grid;
  gap:2.5rem;
  padding-block:3rem}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.72rem;
  font-weight:750;
  color:var(--green);
  margin-bottom:1rem}
.lead {
  font-size:clamp(1.05rem,2vw,1.2rem);
  max-width:58ch}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-block:1.7rem}
.quiet,small {
  font-size:.875rem;
  color:var(--muted)}
.journey {
  position:relative;
  min-height:360px;
  background:var(--sage);
  border-radius:10rem 10rem var(--radius) var(--radius);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:2rem}
.journey-sun {
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50%;
  background:#d8b886;
  top:2.5rem;
  right:2.5rem}
.journey-arch {
  position:absolute;
  inset:6rem 5rem -8rem -4rem;
  border:42px solid #bccdb8;
  border-radius:50% 50% 0 0;
  transform:rotate(24deg)}
.journey-note {
  position:relative;
  background:#fffefaed;
  border:1px solid #ffffff9e;
  border-radius:1rem;
  padding:1.5rem;
  width:100%;
  margin-bottom:1.7rem}
.journey-note p {
  color:var(--ink);
  font-size:1.3rem;
  line-height:1.5;
  margin:0}
.journey-label {
  position:absolute;
  bottom:1.2rem;
  font-size:.75rem;
  letter-spacing:.07em}
.section {
  padding-block:2.5rem}
.section-heading {
  margin-bottom:2rem}
.card-grid {
  display:grid;
  gap:1rem}
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem;
  box-shadow:var(--shadow);
  min-width:0}
.card p:last-child {
  margin-bottom:0}
.step {
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:.8rem;
  color:var(--green);
  margin-bottom:1.5rem}
.welcome-banner {
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:clamp(1.5rem,3vw,2.5rem);
  border-radius:var(--radius);
  background:var(--sage);
  border:1px solid var(--line)}
.welcome-banner h2 {
  max-width:25ch}
.welcome-banner p {
  margin-bottom:0}
.welcome-banner .button {
  align-self:start}
.safety-note {
  margin-top:1.2rem}
.site-footer {
  border-top:1px solid var(--line);
  padding-block:1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 2rem;
  justify-content:space-between;
  font-size:.8rem;
  color:var(--muted)}
.auth-shell {
  display:grid;
  gap:2rem;
  padding-block:3rem 4rem}
.auth-intro h1 {
  font-size:clamp(2.3rem,4.5vw,3.7rem);
  max-width:15ch}
.auth-card h2 {
  font-size:1.7rem}
.form-stack {
  display:grid;
  gap:1.1rem}
.form-stack label {
  display:block;
  font-size:.9rem;
  font-weight:650;
  margin-bottom:.4rem}
input:not([type=checkbox]):not([type=radio]),select,textarea {
  display:block;
  width:100%;
  min-height:48px;
  border:1px solid #85988b;
  border-radius:.65rem;
  background:white;
  padding:.75rem;
  color:var(--ink)}
textarea {
  min-height:130px;
  resize:vertical}
.form-stack small {
  display:block;
  margin-top:.35rem}
.check {
  display:flex!important;
  gap:.6rem;
  align-items:center;
  font-weight:400!important}
.check input {
  width:20px;
  height:20px;
  accent-color:var(--green);
  flex:none}
.auth-switch {
  font-size:.9rem;
  margin-top:1.5rem;
  margin-bottom:0}
.alert {
  padding:1rem;
  margin-block:1rem;
  border:1px solid;
  border-radius:.8rem;
  overflow-wrap:anywhere}
.alert p {
  color:inherit;
  margin:.5rem 0 0}
.alert ul {
  padding-left:1.2rem;
  margin:.5rem 0 0}
.alert-error {
  color:var(--error);
  background:#fff1ee;
  border-color:#d9aaa4}
.alert-success {
  color:var(--green-dark);
  background:var(--sage);
  border-color:#9ab79f}
.badge {
  display:inline-block;
  border:1px solid var(--line);
  border-radius:2rem;
  padding:.25rem .7rem;
  font-size:.75rem;
  font-weight:650}
.portal-header {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  align-items:center;
  padding:1rem var(--space);
  border-bottom:1px solid var(--line);
  background:var(--surface)}
.portal-header form {
  margin-left:auto}
.portal-shell {
  display:grid;
  max-width:1500px;
  margin:auto}
.sidebar {
  padding:1rem var(--space);
  border-bottom:1px solid var(--line)}
.portal-menu summary {
  cursor:pointer;
  font-weight:650;
  min-height:44px;
  padding:.5rem 0}
.nav-group {
  margin-top:1.3rem}
.nav-group .eyebrow {
  margin-bottom:.4rem}
.sidebar nav a {
  display:block;
  min-height:44px;
  padding:.5rem .65rem;
  text-decoration:none;
  font-size:.875rem;
  border-radius:.6rem}
.sidebar nav a:hover,.sidebar-home {
  background:var(--sage)}
.portal-main {
  padding:2rem var(--space) 3rem;
  min-width:0}
.dashboard-heading h1 {
  font-size:clamp(2rem,4vw,3.2rem);
  max-width:22ch}
.dashboard-section {
  margin-top:2.5rem}
.dashboard-section>h2 {
  font-size:1.35rem;
  margin-bottom:1rem}
.dashboard-next h2 {
  font-size:1.7rem}
.dashboard-next .actions {
  margin:0}
.action-card {
  display:flex;
  flex-direction:column;
  position:relative;
  text-decoration:none;
  transition:border-color .15s,background .15s}
.action-card:hover {
  border-color:var(--green);
  background:#f3f6ee}
.action-card h3 {
  color:var(--ink);
  padding-right:1.5rem}
.action-card p {
  font-size:.9rem;
  flex:1}
.card-arrow {
  position:absolute;
  right:1.3rem;
  top:1.3rem}
.card-link {
  font-size:.82rem;
  font-weight:650;
  margin-top:.5rem}
.table-wrap {
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:.8rem}
table {
  width:100%;
  border-collapse:collapse;
  font-size:.9rem}
th,td {
  text-align:left;
  padding:.8rem;
  border-bottom:1px solid var(--line)}
th {
  background:var(--sage);
  font-weight:650}

@media(min-width:640px) {
  .card-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.auth-card {
  padding:2rem}
.journey {
  min-height:420px}
}

@media(min-width:960px) {
  .hero {
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:4rem;
  padding-block:4rem}
.card-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.auth-shell {
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:start;
  max-width:1060px;
  padding-block:4rem 6rem}
.auth-intro {
  padding-top:1.5rem}
.welcome-banner {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:2rem}
.portal-shell {
  grid-template-columns:250px minmax(0,1fr)}
.sidebar {
  border-bottom:0;
  border-right:1px solid var(--line);
  padding:1.5rem 1rem}
.portal-menu summary {
  font-size:.85rem}
.dashboard-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-next {
  align-items:flex-start}
.dashboard-next .actions {
  flex-direction:column;
  flex-shrink:0}
}

@media(min-width:1300px) {
  .dashboard-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
.action-card {
  transition:none}
}