:root {
  --space-unit: 0.25rem;
  --font-base: 1rem;
  --font-caption: 0.8125rem;
  --font-small: 0.875rem;
  --text-0: 1rem;
  --text-1: 1.125rem;
  --text-3: 1.4375rem;
  --text-4: 1.625rem;
  --text-8: 2.5625rem;
  --canvas: #111d17;
  --surface: #1c2b22;
  --text: #f4f6ed;
  --muted: #b4c1b5;
  --kiwi: #c3ed8b;
  --line: #405245;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: radial-gradient(ellipse at 4% 60%, #203624 0, transparent 52%), var(--canvas);
  color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: var(--text-0); line-height: 1.5;
}
a { color: inherit; }
p { margin: 0; overflow-wrap: anywhere; }
button { font: inherit; }
.shell {
  width: min(100%, calc(var(--space-unit) * 272)); margin-inline: auto;
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  padding: calc(var(--space-unit) * 12);
}
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space-unit) * 4); }
.wordmark { display: inline-flex; align-items: center; gap: calc(var(--space-unit) * 3); text-decoration: none; font-size: var(--text-3); font-weight: 750; letter-spacing: -0.04em; }
.brandmark { display: block; width: calc(var(--space-unit) * 12); height: calc(var(--space-unit) * 12); color: var(--kiwi); flex: none; }
.wordmark-dot { color: var(--kiwi); }
.header-note { color: var(--muted); font-size: var(--font-small); }
.landing { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: calc(var(--space-unit) * 20); padding-block: calc(var(--space-unit) * 16); }
.intro { min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: calc(var(--space-unit) * 2); color: var(--muted); font-size: var(--font-caption); font-weight: 600; letter-spacing: 0.06em; }
.tiny-leaf { width: calc(var(--space-unit) * 3); height: calc(var(--space-unit) * 2); border-radius: 100% 0 100% 0; background: var(--kiwi); transform: rotate(-20deg); }
h1 { margin: calc(var(--space-unit) * 5) 0; font-size: var(--text-8); font-weight: 750; line-height: 1.12; letter-spacing: -0.045em; overflow-wrap: anywhere; }
h1 span { color: var(--kiwi); }
.intro-copy { color: var(--muted); font-size: var(--text-1); line-height: 1.65; }
.kiwi-scene { position: relative; height: calc(var(--space-unit) * 62); margin-top: calc(var(--space-unit) * 4); }
.orbit { position: absolute; border: 1px solid #3b5140; border-radius: 50%; transform: rotate(-22deg); }
.orbit-outer { width: 90%; height: calc(var(--space-unit) * 44); top: calc(var(--space-unit) * 8); left: 0; }
.orbit-inner { width: 68%; height: calc(var(--space-unit) * 34); top: calc(var(--space-unit) * 12); left: 7%; }
.kiwi { position: absolute; width: calc(var(--space-unit) * 44); height: calc(var(--space-unit) * 44); top: calc(var(--space-unit) * 8); left: 12%; border: calc(var(--space-unit) * 2) solid #739953; border-radius: 50%; background: radial-gradient(circle, #d5eea6 0 18%, #bce47b 19% 51%, #97c35e 52% 100%); box-shadow: 0 20px 60px #0004; transform: rotate(-18deg); }
.kiwi-core { position: absolute; inset: 34%; background: #ecf2cc; border-radius: 50%; }
.kiwi i { position: absolute; width: calc(var(--space-unit) * 1.5); height: calc(var(--space-unit) * 3); background: #294727; border-radius: 50%; }
.kiwi i:nth-of-type(1) { left: 46%; top: 14%; }
.kiwi i:nth-of-type(2) { left: 67%; top: 24%; transform: rotate(45deg); }
.kiwi i:nth-of-type(3) { left: 76%; top: 45%; transform: rotate(90deg); }
.kiwi i:nth-of-type(4) { left: 66%; top: 66%; transform: rotate(-45deg); }
.kiwi i:nth-of-type(5) { left: 46%; top: 75%; }
.kiwi i:nth-of-type(6) { left: 25%; top: 65%; transform: rotate(45deg); }
.kiwi i:nth-of-type(7) { left: 16%; top: 44%; transform: rotate(90deg); }
.kiwi i:nth-of-type(8) { left: 26%; top: 24%; transform: rotate(-45deg); }
.scene-label { position: absolute; left: 54%; top: calc(var(--space-unit) * 40); color: var(--muted); font-size: var(--font-caption); line-height: 1.4; }
.scene-star { position: absolute; left: 80%; top: calc(var(--space-unit) * 7); color: var(--kiwi); font-size: var(--text-4); }
.access-card { padding: calc(var(--space-unit) * 9); border: 1px solid var(--line); border-radius: calc(var(--space-unit) * 7); background: linear-gradient(135deg, #24352a, var(--surface)); box-shadow: 0 24px 80px #0003; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--space-unit) * 4); margin-bottom: calc(var(--space-unit) * 8); }
.card-mark { display: grid; place-items: center; width: calc(var(--space-unit) * 10); height: calc(var(--space-unit) * 10); border: 1px solid var(--line); border-radius: 50%; color: var(--kiwi); font-size: var(--text-3); }
h2 { margin: 0 0 calc(var(--space-unit) * 3); font-size: var(--text-3); line-height: 1.25; letter-spacing: -0.025em; }
.card-intro { color: var(--muted); margin-bottom: calc(var(--space-unit) * 8); }
.google-control { display: flex; align-items: center; justify-content: center; gap: calc(var(--space-unit) * 3); width: 100%; min-height: calc(var(--space-unit) * 14); padding: calc(var(--space-unit) * 4); border: 1px solid transparent; border-radius: calc(var(--space-unit) * 3); background: var(--kiwi); color: var(--canvas); font-size: var(--text-0); font-weight: 650; text-decoration: none; cursor: pointer; }
.google-control:disabled { background: #35493a; border-color: #607663; color: #d2ddd0; cursor: not-allowed; }
.google-letter { font-weight: 750; font-size: var(--text-1); }
.status-panel { margin-top: calc(var(--space-unit) * 6); padding: calc(var(--space-unit) * 4); background: #13221a; border: 1px solid #354c3d; border-radius: calc(var(--space-unit) * 3); }
.status-label { display: flex; align-items: center; gap: calc(var(--space-unit) * 2); font-size: var(--font-caption); font-weight: 650; color: #dfebb9; margin-bottom: calc(var(--space-unit) * 2); }
.status-dot { width: calc(var(--space-unit) * 2); height: calc(var(--space-unit) * 2); background: #d4dba1; border-radius: 50%; flex: none; }
#availability { color: var(--muted); font-size: var(--font-small); line-height: 1.6; }
.portal-status { margin-block: calc(var(--space-unit) * 6); }
.card-foot { display: flex; align-items: center; gap: calc(var(--space-unit) * 3); margin-top: calc(var(--space-unit) * 8); padding-top: calc(var(--space-unit) * 5); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--font-caption); }
.lock-mark { position: relative; width: calc(var(--space-unit) * 3); height: calc(var(--space-unit) * 2.5); border: 1px solid currentColor; border-radius: calc(var(--space-unit) * 0.5); flex: none; }
.lock-mark::before { content: ''; position: absolute; width: 60%; height: 80%; border: 1px solid currentColor; border-bottom: 0; border-radius: 50% 50% 0 0; left: 20%; bottom: 100%; }
.person { font-weight: 650; margin-block: calc(var(--space-unit) * 4); }
#services { display: grid; gap: calc(var(--space-unit) * 3); }
#services button { display: block; width: 100%; min-height: calc(var(--space-unit) * 14); padding: calc(var(--space-unit) * 4); border: 1px solid var(--line); border-radius: calc(var(--space-unit) * 3); background: #2b4030; color: var(--text); text-align: left; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
.logout-control { display: block; min-height: calc(var(--space-unit) * 11); width: 100%; margin-top: calc(var(--space-unit) * 4); padding: calc(var(--space-unit) * 2); border: 1px solid var(--line); border-radius: calc(var(--space-unit) * 3); background: transparent; color: var(--muted); cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--kiwi); outline-offset: calc(var(--space-unit) * 2); }
a.google-control:hover, #services button:hover { background: #d2f6a5; color: var(--canvas); }
.logout-control:hover { color: var(--text); border-color: var(--muted); }
.site-footer { color: var(--muted); font-size: var(--font-caption); padding-top: calc(var(--space-unit) * 6); border-top: 1px solid #35463a; }
.site-footer > :first-child { color: var(--text); font-weight: 650; }
@media (max-width: 52em) {
  .shell { padding: calc(var(--space-unit) * 7); }
  .landing { grid-template-columns: minmax(0, 1fr); gap: calc(var(--space-unit) * 8); padding-block: calc(var(--space-unit) * 12); }
  .intro { position: relative; }
  .kiwi-scene { display: none; }
  .access-card { min-width: 0; width: 100%; max-width: calc(var(--space-unit) * 152); padding: calc(var(--space-unit) * 7); }
}
@media (max-width: 30em) {
  .shell { padding: calc(var(--space-unit) * 6); }
  .header-note { display: none; }
  .wordmark { flex-wrap: wrap; }
  .wordmark > span { overflow-wrap: anywhere; min-width: 0; }
  .card-top { flex-wrap: wrap; }
  .google-control { overflow-wrap: anywhere; }
  .landing { padding-block: calc(var(--space-unit) * 10); }
  h1 { font-size: var(--text-8); }
  .access-card { padding: calc(var(--space-unit) * 6); border-radius: calc(var(--space-unit) * 5); }
  .site-footer { flex-wrap: wrap; gap: calc(var(--space-unit) * 2); }
}