/* Variant "Memory method": Sunlit Chart, a numbered editorial walk through the learning method. */

body {
  background: var(--screen);
}

.site-header,
main > section,
.site-footer {
  width: min(1120px, 100% - 32px);
  margin-inline: auto;
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 800 22px/1 var(--font-display);
}

.brand img {
  border-radius: 9px;
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 48px 0 88px;
}

.hero .eyebrow {
  margin-bottom: 16px;
}

.hl {
  background: linear-gradient(transparent 58%, var(--brand) 58%, var(--brand) 92%, transparent 92%);
  padding: 0 0.06em;
}

.lead {
  max-width: 32em;
  margin: 24px 0 32px;
  font-size: 19px;
  line-height: 30px;
  color: var(--muted);
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Phone with the app's screens, framed by the viewfinder brackets from the app icon */
.hero-device {
  justify-self: center;
  width: min(300px, 100%);
  margin: 0;
  display: grid;
  justify-items: center;
}

.phone {
  position: relative;
  width: 100%;
  padding: 9px;
  border-radius: 34px;
  background: #172b2f;
  box-shadow: 0 30px 60px -24px rgba(23, 43, 47, 0.55);
}

.phone img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  transition: opacity 0.5s;
}

.phone img:not(:first-child) {
  position: absolute;
  inset: 9px;
  width: calc(100% - 18px);
}

.phone img:not(.active) {
  opacity: 0;
}

.brackets-frame {
  position: absolute;
  inset: -22px;
  pointer-events: none;
}

.shot-caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 34px;
  min-height: 26px;
  font: 700 20px/26px var(--font-display);
}

.shot-step {
  font: 700 12px/16px var(--font-body);
  letter-spacing: 0.08em;
  color: var(--muted);
}

.shot-progress {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}

.shot-progress button {
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  align-items: center;
}

.shot-progress .track {
  height: 4px;
  border-radius: 2px;
  background: #c9d3d1;
  overflow: hidden;
}

.shot-progress .fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--on-surface);
}

.shot-progress .done .fill,
.shot-progress .current .fill {
  width: 100%;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 24px;
  }
  .hero-device {
    width: min(270px, 74%);
  }
}

/* ---------- chapters ---------- */
.chapter {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  padding: 72px 0;
  border-top: 2px solid var(--on-surface);
}

.chapter-num {
  font: 800 64px/0.8 var(--font-display);
  color: var(--brand);
  -webkit-text-stroke: 2px var(--on-surface);
  paint-order: stroke fill;
}

.chapter-body {
  max-width: 820px;
}

.chapter-wide .chapter-body {
  max-width: none;
}

.chapter .eyebrow {
  margin-bottom: 10px;
}

.chapter-lead {
  max-width: 40em;
  margin: 16px 0 32px;
  font-size: 18px;
  line-height: 28px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .chapter {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 56px 0;
  }
  .chapter-num {
    font-size: 48px;
  }
}

/* trio */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--outline);
  border-radius: 8px;
  background: var(--surface);
}

.trio-item {
  padding: 20px;
}

.trio-item + .trio-item {
  border-left: 1px solid var(--outline);
}

.trio-step {
  font: 800 30px/1 var(--font-display);
}

.trio-item p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}

@media (max-width: 760px) {
  .trio {
    grid-template-columns: 1fr;
  }
  .trio-item + .trio-item {
    border-left: 0;
    border-top: 1px solid var(--outline);
  }
}

/* ---------- spaced repetition sim ---------- */
.sim {
  padding: 20px;
}

.sim-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.sim-head p {
  margin: 0;
}

.sim-county {
  font: 800 34px/1.1 var(--font-display);
}

.sim-county span {
  font: 700 18px/1 var(--font-display);
  color: var(--muted);
  margin-left: 4px;
}

.sim-next {
  text-align: right;
}

.sim-next-value {
  font: 800 34px/1.1 var(--font-display);
}

.sim-chart {
  width: 100%;
  height: auto;
  margin: 18px 0 14px;
  overflow: visible;
}

.sim-chart .axis {
  stroke: var(--outline);
  stroke-width: 2;
}

.sim-chart .tick text {
  font: 600 11px var(--font-body);
  fill: var(--muted);
}

.sim-chart .tick line {
  stroke: var(--outline);
}

.sim-chart .arc {
  fill: none;
  stroke: var(--outline);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.sim-chart .arc.next {
  stroke: var(--on-surface);
  stroke-dasharray: none;
}

.sim-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.sim-btn {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  font: 600 15px/20px var(--font-body);
  cursor: pointer;
}

.sim-btn.correct {
  background: var(--correct);
  color: var(--on-correct);
}

.sim-btn.wrong {
  background: var(--wrong);
  color: var(--on-wrong);
}

.sim-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.sim-note {
  margin: 14px 0 0;
  min-height: 40px;
}

.footnote {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
}

/* ---------- pace ---------- */
.pace {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.pace-controls {
  display: grid;
  gap: 16px;
}

.stepper-card p {
  margin: 0;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0;
}

.stepper-btn {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid var(--variant-outline);
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  font: 400 32px/1 var(--font-body);
  cursor: pointer;
}

.stepper-value {
  font: 800 48px/1 var(--font-display);
}

.progress-card {
  padding: 18px;
}

.progress-title {
  margin: 0 0 6px;
  text-align: center;
  color: var(--muted);
}

.progress-overall {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.progress-overall p {
  margin: 0;
}

.progress-pct {
  font: 800 48px/1 var(--font-display);
}

.bar {
  height: 8px;
  border-radius: 4px;
  background: #e5ecea;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--c, var(--brand));
}

.bar.overall {
  height: 14px;
  border-radius: 7px;
  margin: 10px 0 16px;
  background: #e3d9b0;
}

.status-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.status-rows .row-head {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 4px;
}

.status-rows .row-head b {
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pace-map {
  min-width: 0;
}

.day-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.play-btn {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.play-btn .i-pause,
.play-btn.playing .i-play {
  display: none;
}

.play-btn.playing .i-pause {
  display: inline;
}

.day-label {
  flex: none;
  min-width: 92px;
}

.day-value {
  font: 800 28px/1 var(--font-display);
}

input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: #172b2f;
  height: 32px;
}

.map-frame {
  background: var(--sea);
  border: 1px solid var(--outline);
  border-radius: 8px;
  padding: 12px;
}

.map-frame svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 796;
}

.map-frame .counties path {
  stroke: #fffdf7;
  stroke-width: 0.2;
}

.map-frame .states path {
  fill: none;
  stroke: #fffdf7;
  stroke-width: 0.9;
}

.map-frame .separators path {
  fill: none;
  stroke: var(--outline);
  stroke-width: 1;
}

@media (max-width: 960px) {
  .pace {
    grid-template-columns: 1fr;
  }
  .pace-controls {
    display: contents;
  }
  .stepper-card {
    order: 1;
  }
  .pace-map {
    order: 2;
  }
  .progress-card {
    order: 3;
  }
}

@media (max-width: 640px) {
  .map-frame {
    padding: 4px;
  }
}

/* ---------- deal ---------- */
.deal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  margin-top: 28px;
  align-items: start;
}

.deal-main {
  padding: 22px;
}

.deal-main p {
  margin: 0;
}

.deal-main p:last-child {
  margin-top: 10px;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted-variant);
}

.deal-big {
  font: 800 88px/0.9 var(--font-display);
}

.deal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.deal-list li {
  padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--outline);
  position: relative;
  color: var(--muted);
}

.deal-list li strong {
  color: var(--on-surface);
}

.deal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--p-sticking);
  box-shadow: inset 0 0 0 5px var(--surface);
  border: 1px solid var(--p-sticking);
}

@media (max-width: 700px) {
  .deal {
    grid-template-columns: 1fr;
  }
}

/* ---------- faq ---------- */
.faq {
  margin-top: 24px;
  border-top: 1px solid var(--outline);
}

.faq details {
  border-bottom: 1px solid var(--outline);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  position: relative;
  font: 700 20px/26px var(--font-display);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 14px;
  font: 400 26px/1 var(--font-body);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  margin: 0 0 20px;
  color: var(--muted);
  max-width: 44em;
}

/* ---------- finale ---------- */
.finale {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 80px 0;
  text-align: center;
  border-top: 2px solid var(--on-surface);
}

/* Only the app icon; the Play badge must keep its own corners. */
.finale > img {
  border-radius: 22px;
}

/* ---------- footer ---------- */
.site-footer {
  padding: 28px 0 44px;
  border-top: 1px solid var(--outline);
}

.site-footer nav {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.site-footer nav a {
  font-weight: 600;
}

.site-footer .trademark {
  margin: 0;
}