/* SoqRasi — the week field. Two inks: indigo and mint. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ink one: indigo, at its densities */
  --indigo: #1e2560;
  --indigo-cell: #2b3474;
  --indigo-raised: #39438a;
  /* ink two: mint */
  --mint: #9fe0c4;
  --mint-over-indigo: #557e95;
  /* knocked-out paper */
  --paper: #eef0f7;
  --paper-2: #b4bcdc;
  --paper-3: #8f99c5;
  --hair: rgb(238 240 247 / 0.16);
  /* on the mint ground */
  --on-mint: #1e2560;
  --on-mint-2: #3a4a7e;
  --hair-on-mint: rgb(30 37 96 / 0.22);

  --font: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --wide: 74.25rem;
  --header-h: 72px;
  --legend-h: 64px;
  --stage-w: min(100vw - 2 * var(--gutter), (100svh - var(--header-h) - var(--legend-h) - 8px) * 80 / 52);

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 6rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --breath: 10s;

  --cell-r: 22%;
}

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

html {
  background: var(--indigo);
  color: var(--paper);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--indigo-raised) var(--indigo);
  caret-color: var(--mint);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--indigo);
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--mint);
  color: var(--indigo);
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: rgb(159 224 196 / 0.5);
  transition: text-decoration-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

a:hover {
  text-decoration-color: var(--mint);
}

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 3px;
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: var(--s2) var(--s3);
  background: var(--mint);
  color: var(--indigo);
  border-radius: 4px;
  text-decoration: none;
}

.skip:focus {
  top: var(--s3);
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
}

.display {
  font-stretch: 125%;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}

/* ---------- The week cell: the whole component language ---------- */

.cell {
  display: inline-block;
  flex: none;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--cell-r);
  vertical-align: -0.04em;
}

.cell--lived {
  background: var(--mint);
}

.cell--open {
  background: var(--indigo-raised);
}

.cell--now {
  background: var(--mint);
  box-shadow: 0 0 0 2px var(--indigo), 0 0 0 3.5px rgb(159 224 196 / 0.6);
}

.cell--ink {
  background: var(--on-mint);
}

.cell--ink-open {
  border: 1.5px solid var(--on-mint);
}

/* ---------- Masthead ---------- */

.masthead {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  height: var(--header-h);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  white-space: nowrap;
}

.brand-cell {
  width: 0.7rem;
  height: 0.7rem;
  align-self: center;
}

.brand-name {
  font-stretch: 125%;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.brand-person {
  font-size: 0.875rem;
  color: var(--paper-2);
  letter-spacing: 0.01em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  font-size: 0.9375rem;
  font-stretch: 110%;
}

.nav a {
  text-decoration-color: transparent;
  color: var(--paper-2);
}

.nav a:hover {
  color: var(--paper);
  text-decoration-color: var(--mint);
}

.nav .nav-action {
  color: var(--mint);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav .nav-action::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--cell-r);
  background: var(--mint);
}

.nav .nav-action:hover {
  color: var(--mint);
}

/* ---------- Hero: the field ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  padding-top: var(--header-h);
  display: flex;
  flex-direction: column;
}

.hero-stage {
  position: relative;
  display: grid;
  grid-template-areas: "field";
  width: var(--stage-w);
  aspect-ratio: 80 / 52;
  margin-inline: auto;
}

.field-box {
  grid-area: field;
  position: relative;
  min-height: 0;
}

.field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.no-js .field {
  display: none;
}

.hero-panel {
  grid-area: field;
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: end;
  width: min(38rem, 48%);
  padding: var(--s4) clamp(0.25rem, 1vw, 1rem) var(--s4) var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.hero-words {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.hero-heading {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  font-weight: 400;
}

.hero-heading > span {
  display: block;
}

.hero-title {
  font-size: clamp(2.125rem, 13.2cqi, 5.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

.hero-lede {
  max-width: 36ch;
  text-wrap: pretty;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.45;
  color: var(--paper-2);
}

.hero-act {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.no-js .hero-act {
  display: none;
}

.weeks-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.weeks-label {
  font-size: 0.9375rem;
  color: var(--paper);
}

.weeks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.weeks-input {
  width: 7.5rem;
  height: 3rem;
  padding: 0 0.875rem;
  border: 1.5px solid rgb(238 240 247 / 0.42);
  border-radius: 4px;
  background: rgb(30 37 96 / 0.85);
  color: var(--paper);
  font: inherit;
  font-size: 1.375rem;
  font-stretch: 112%;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  transition: border-color 0.4s var(--ease-out);
}

.weeks-input::placeholder {
  color: var(--paper-3);
  opacity: 1;
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  letter-spacing: 0.02em;
}

.weeks-input:hover {
  border-color: rgb(238 240 247 / 0.7);
}

.weeks-input:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-color: var(--mint);
}

.weeks-input[aria-invalid="true"] {
  border-color: var(--paper);
  border-style: dashed;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 1rem;
  font-stretch: 112%;
  font-weight: 560;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.2s var(--ease-out);
}

.button:active {
  transform: translateY(1px);
}

.button--mint {
  background: var(--mint);
  color: var(--indigo);
}

.button--mint:hover {
  background: #b8ead4;
}

.button--ink {
  background: var(--on-mint);
  color: var(--mint);
}

.button--ink:hover {
  background: #283075;
}

.weeks-note {
  font-size: 0.875rem;
  color: var(--paper-2);
}

.weeks-note.is-error {
  color: var(--paper);
}

.weeks-note.is-error::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border: 1.5px solid var(--paper);
  border-radius: var(--cell-r);
}

.weeks-result {
  min-height: 8.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
}

.result-open {
  font-stretch: 125%;
  font-weight: 300;
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.result-open strong {
  font-weight: 500;
  color: var(--mint);
}

.result-detail {
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--paper-2);
}

.weeks-result > * {
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.weeks-result.is-waiting > * {
  opacity: 0;
  transform: translateY(6px);
}

.link-button {
  margin-top: 0.25rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--paper-2);
  font: inherit;
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: rgb(159 224 196 / 0.5);
  cursor: pointer;
}

.link-button:hover {
  color: var(--paper);
  text-decoration-color: var(--mint);
}

.legend {
  width: var(--stage-w);
  min-height: var(--legend-h);
  margin: auto auto 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s2) var(--s5);
  font-size: 0.8125rem;
  font-stretch: 110%;
  color: var(--paper-2);
}

.legend-keys {
  display: flex;
  gap: var(--s4);
}

.legend-keys li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-keys .cell {
  width: 0.625rem;
  height: 0.625rem;
}

.legend-probe {
  grid-column: 3;
}

/* the probe's sentence replaces the axis line when this week lies under the words */
@media (min-aspect-ratio: 11/10) and (min-width: 861px) {
  .legend.is-now-hidden .legend-axis {
    display: none;
  }
}

/* when this week lies under the words, its key breathes in its place */
@media (prefers-reduced-motion: no-preference) {
  .legend.is-now-hidden .cell--now {
    animation: key-breathe var(--breath) cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

@keyframes key-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--indigo), 0 0 0 3px rgb(159 224 196 / 0.25);
  }
  40% {
    box-shadow: 0 0 0 3px var(--indigo), 0 0 0 5px rgb(159 224 196 / 0.75);
  }
}

.legend-probe {
  min-width: 15ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}

.no-js .legend-probe,
.no-js .legend-keys li:nth-child(3) {
  display: none;
}

@media (min-aspect-ratio: 11/10) and (min-width: 861px) and (max-height: 820px) {
  .hero-panel {
    gap: var(--s4);
    padding-block: var(--s2);
  }

  .hero-words {
    gap: var(--s3);
  }

  .hero-lede {
    font-size: 1.0625rem;
  }

  .hero-act {
    gap: var(--s3);
  }

  .weeks-result {
    min-height: 7.25rem;
  }

  .result-open {
    font-size: 1.5rem;
  }
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(5rem, 3.5rem + 6vw, 9rem);
}

.section-title {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
}

.year-rule {
  display: grid;
  grid-template-columns: repeat(52, 1fr);
  gap: clamp(2px, 0.35vw, 5px);
  margin-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.year-rule span {
  aspect-ratio: 1;
  border-radius: var(--cell-r);
  background: var(--indigo-cell);
}

.year-rule .is-past {
  background: var(--mint-over-indigo);
}

.year-rule .is-now {
  background: var(--mint);
}

.no-js .year-rule {
  height: 1px;
  background: var(--hair);
}

/* The idiom */

.idiom {
  padding-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.idiom-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--s5) var(--s6);
  align-items: start;
}

.gloss {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.25rem, 3vw, 2.75rem);
  font-weight: inherit;
}

.gloss-pair {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gloss-word {
  font-size: clamp(3.5rem, 1.6rem + 7vw, 6rem);
  line-height: 0.95;
}

.gloss-meaning {
  padding-left: 0.2rem;
  font-size: 1rem;
  font-stretch: 110%;
  font-weight: 450;
  letter-spacing: 0.01em;
  color: var(--mint);
}

.idiom-text p,
.building-intro p,
.close-words > p,
.terms-lede,
.statement-sub {
  text-wrap: pretty;
}

.idiom-text {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-width: 36rem;
  padding-top: 0.75rem;
  color: var(--paper-2);
}

.idiom-lead {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--paper);
}

/* The statement */

.statement {
  padding-block: clamp(1rem, 0.5rem + 2vw, 3rem) clamp(5rem, 3.5rem + 6vw, 9rem);
}

.statement-line {
  max-width: 17ch;
  font-size: clamp(2.5rem, 1rem + 5.6vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.statement-sub {
  margin-top: var(--s5);
  margin-left: auto;
  max-width: 28ch;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.4;
  color: var(--mint);
}

/* What I build */

.building {
  padding-top: 0;
}

.building-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s4) var(--s6);
  align-items: end;
  margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.building-intro {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  color: var(--paper-2);
}

.follow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
}

.follow a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: var(--paper);
}

.follow-handle {
  color: var(--paper-2);
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.ledger li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s3) var(--s4);
  padding-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  padding-bottom: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-top: 1px solid var(--hair);
}

.ledger li:last-child {
  border-bottom: 1px solid var(--hair);
}

.ledger .cell {
  width: 0.75rem;
  height: 0.75rem;
}

.ledger h3 {
  font-stretch: 125%;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ledger p {
  color: var(--paper-2);
  max-width: 48ch;
  text-wrap: pretty;
}

/* Working together: the mint ground */

.terms {
  background: var(--mint);
  color: var(--on-mint);
}

.terms ::selection {
  background: var(--on-mint);
  color: var(--mint);
}

.terms :focus-visible {
  outline-color: var(--on-mint);
}

.terms-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s4) var(--s6);
  align-items: end;
}

.terms-lede {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
  color: var(--on-mint-2);
}

.terms-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.terms-col h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: var(--s3);
  font-stretch: 125%;
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  letter-spacing: -0.015em;
  border-bottom: 1.5px solid var(--on-mint);
}

.terms-col h3 .cell {
  width: 0.875rem;
  height: 0.875rem;
}

.terms-col li {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hair-on-mint);
  line-height: 1.45;
}

.terms-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.terms-cta p {
  font-stretch: 125%;
  font-weight: 300;
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  letter-spacing: -0.015em;
}

/* Close */

.close-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s6);
  align-items: start;
}

.this-week {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s5);
  padding-top: 0.75rem;
}

.this-week-cell {
  position: relative;
  width: clamp(6.5rem, 4rem + 9vw, 12rem);
  aspect-ratio: 1;
  border-radius: var(--cell-r);
  background: var(--mint);
}

.this-week-cell::after {
  content: "";
  position: absolute;
  inset: -10%;
  border: 1.5px solid var(--mint);
  border-radius: 25%;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .this-week-cell::after {
    animation: breathe var(--breath) cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

@keyframes breathe {
  0% {
    transform: scale(0.86);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.08);
    opacity: 0;
  }
}

.this-week-caption {
  max-width: 22ch;
  font-size: 0.875rem;
  font-stretch: 110%;
  color: var(--paper-2);
  font-variant-numeric: tabular-nums;
}

.close-words {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.close-words > p {
  max-width: 44ch;
  color: var(--paper-2);
}

.emails {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  margin-top: var(--s3);
}

.email {
  font-size: clamp(1.5rem, 0.8rem + 2.6vw, 3.25rem);
  color: var(--mint);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgb(159 224 196 / 0.4);
  overflow-wrap: break-word;
  max-width: 100%;
  width: fit-content;
}

.email--alt {
  font-size: clamp(1.25rem, 0.85rem + 1.4vw, 2.125rem);
  color: var(--paper);
}

.email:hover {
  text-decoration-color: var(--mint);
}

/* Footer */

.footer {
  border-top: 1px solid var(--hair);
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s5);
  padding-block: var(--s5);
  font-size: 0.875rem;
  font-stretch: 110%;
  color: var(--paper-2);
  font-variant-numeric: tabular-nums;
}

.footer-name {
  color: var(--paper);
  font-stretch: 125%;
  font-weight: 500;
}

/* ---------- Portrait and narrow: the field turns, years become rows ---------- */

@media (max-aspect-ratio: 11/10), (max-width: 860px) {
  :root {
    --header-h: 60px;
  }

  .brand-person,
  .nav a:not(.nav-action) {
    display: none;
  }

  .hero {
    min-height: 0;
  }

  :root {
    --stage-w: min(100vw - 2 * var(--gutter), 34rem);
  }

  .hero-stage {
    width: var(--stage-w);
    aspect-ratio: auto;
    grid-template-areas: "field" "act";
    padding-top: var(--s2);
  }

  .field-box {
    aspect-ratio: 52 / 80;
  }

  .hero-panel {
    display: contents;
  }

  .hero-words {
    grid-area: field;
    align-self: end;
    z-index: 1;
    padding: var(--s4) var(--s2) var(--s3);
    gap: var(--s3);
  }

  .hero-title {
    font-size: clamp(2.125rem, 13.2cqi, 3.75rem);
  }

  .hero-heading {
    gap: var(--s3);
  }

  .hero-act {
    grid-area: act;
    padding: var(--s4) var(--s2) 0;
  }

  .weeks-result {
    min-height: 0;
  }

  .weeks-result:empty,
  .weeks-result.is-empty {
    display: none;
  }

  .legend {
    margin-top: var(--s4);
    padding-bottom: var(--s3);
    grid-template-columns: 1fr;
    gap: var(--s2);
  }

  .legend-keys {
    flex-wrap: wrap;
    gap: var(--s2) var(--s4);
  }

  .legend-probe {
    grid-column: auto;
    text-align: left;
    min-height: 1.3em;
  }

  .idiom-grid,
  .building-head,
  .terms-head,
  .terms-cols,
  .close-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .statement-sub {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .ledger li {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.375rem var(--s3);
  }

  .ledger p {
    grid-column: 2;
  }

  .ledger .cell {
    width: 0.625rem;
    height: 0.625rem;
  }

  .terms-cta .button {
    width: 100%;
  }

  .footer-row {
    flex-direction: column;
  }
}

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