:root {
  --deep-teal: #0f5d61;
  --soft-teal: #9dcfca;
  --slate-lavender: #8d8aa8;
  --dusty-mauve: #bd8b9e;
  --deep-mauve: #754557;
  --ink: #193538;
  --muted: #547072;
  --line: #dce9e8;
  --paper: #ffffff;
}

* { box-sizing: border-box; }

html { background: #f5f9f8; }

body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(circle at 9% 12%, rgba(157, 207, 202, .25), transparent 25rem), #f5f9f8;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell {
  width: min(100% - 2rem, 880px);
  margin: 2rem auto;
  padding: clamp(1.75rem, 6vw, 4.75rem);
  background: var(--paper);
  border: 1px solid rgba(15, 93, 97, .12);
  border-radius: 1.5rem;
  box-shadow: 0 18px 60px rgba(20, 61, 65, .09);
}

.intro { max-width: 650px; }

.eyebrow {
  margin: 0 0 1rem;
  color: var(--deep-mauve);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
}

h1 {
  margin: 0;
  color: var(--deep-teal);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 7vw, 4.4rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
}

.subtitle {
  margin: 1.25rem 0 0;
  color: var(--deep-mauve);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.55;
}

.prompt {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.explorer { margin-top: 2.4rem; border-top: 1px solid var(--line); }

.feature { border-bottom: 1px solid var(--line); }

.feature-toggle {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 5.5rem;
  padding: 1rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.feature-toggle:hover .feature-name,
.feature-toggle:focus-visible .feature-name { color: var(--deep-mauve); }

.feature-toggle:focus-visible { outline: 3px solid rgba(189, 139, 158, .55); outline-offset: 3px; border-radius: .5rem; }

.feature-number {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--soft-teal);
  color: var(--deep-teal);
  font-size: .76rem;
  font-weight: 800;
}

.feature-name { font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-weight: 750; transition: color .18s ease; }
.feature-action { color: var(--slate-lavender); font-size: .88rem; font-weight: 750; }
.feature-action span { display: inline-block; margin-left: .35rem; font-size: 1.25rem; line-height: .6; transition: transform .18s ease; }
.feature-toggle[aria-expanded="true"] .feature-action { color: var(--deep-mauve); }
.feature-toggle[aria-expanded="true"] .feature-action span { transform: rotate(45deg); }

.feature-panel {
  margin: 0 0 1.6rem 3.2rem;
  padding: 1.25rem 1.35rem 1.35rem;
  border-left: 4px solid var(--dusty-mauve);
  background: linear-gradient(90deg, rgba(157, 207, 202, .16), rgba(157, 207, 202, 0));
  color: var(--ink);
}

.feature-panel p { margin: 0; font-size: 1rem; line-height: 1.58; }
.feature-panel ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.feature-panel li { margin: .57rem 0; padding-left: .2rem; font-size: 1rem; line-height: 1.48; }
.feature-panel li::marker { color: var(--deep-teal); }

footer { margin-top: 2.5rem; color: var(--slate-lavender); font-family: Georgia, "Times New Roman", serif; font-size: 1.06rem; font-style: italic; }

@media (max-width: 560px) {
  .shell { width: 100%; margin: 0; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .feature-toggle { grid-template-columns: 2.8rem 1fr; gap: .85rem; }
  .feature-action { grid-column: 2; margin-top: -.55rem; }
  .feature-panel { margin-left: 0; padding-left: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }