/* doorframeapp.com: the app's "family notebook" tokens (src/components/theme.ts), plus a pencil hand for height marks. */
/* Fonts are served from this site (no third-party requests), both SIL OFL 1.1 (fonts/OFL-*.txt), built by
   scripts/build-site-fonts.sh: Nunito and Caveat 600, each with Latin, Latin Extended-A, punctuation and symbols. The
   files are cached for a year, so after rebuilding them bump the ?v= on these URLs (and on style.css in the pages). */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/caveat-600.woff2?v=2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/nunito-400.woff2?v=2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-700.woff2?v=2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/nunito-800.woff2?v=2') format('woff2');
}

:root {
  --background: #fbf7f0;
  --surface: #fffdf9;
  --surface-muted: #f3ece1;
  --border: #e3d9ca;
  --control: #b9ad9c;
  --text: #2a2521;
  --text-secondary: #6a5f55;
  --primary: #1d6b66;
  --primary-soft: #ddefec;
  --on-primary: #ffffff;
  --accent: #e8735a;
  --accent-text: #8a3622;
  --accent-soft: #fce3d9;
  --pencil: #5b5048;
  --phone: #1c1916;
  --rule: rgba(29, 107, 102, 0.1);
  --margin-line: rgba(232, 115, 90, 0.45);
  --wood: #e9dcc8;
  --wood-edge: #d9c7ab;
  --tape: rgba(242, 174, 107, 0.45);
  --bubble-in: #ece5da;
  --coir: #c9a46b;
  --coir-ink: #5a3d1c;
  --tint-blue: #dceaf8;
  --tint-peach: #fbe3c8;
  --tint-green: #e0efd5;
  --tint-pink: #f9dde7;
  --shadow: 0 1px 2px rgba(60, 45, 30, 0.06), 0 8px 24px rgba(60, 45, 30, 0.08);
  --shadow-phone: 0 2px 4px rgba(60, 45, 30, 0.08), 0 24px 60px rgba(60, 45, 30, 0.18);
  --radius: 18px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #191613;
    --surface: #24201c;
    --surface-muted: #2f2a25;
    --border: #3d362f;
    --control: #6e6459;
    --text: #f4eee6;
    --text-secondary: #c2b7aa;
    --primary: #7fcbc3;
    --primary-soft: #1e3b38;
    --on-primary: #0e2a28;
    --accent: #f08c74;
    --accent-text: #ffc7b5;
    --accent-soft: #4a2a20;
    --pencil: #d8cdbf;
    --phone: #4a423a;
    --rule: rgba(127, 203, 195, 0.1);
    --margin-line: rgba(240, 140, 116, 0.4);
    --wood: #3a322b;
    --wood-edge: #4d4239;
    --tape: rgba(242, 174, 107, 0.3);
    --bubble-in: #2f2a25;
    --coir: #8d6e45;
    --coir-ink: #25180b;
    --tint-blue: #22303d;
    --tint-peach: #3b2e22;
    --tint-green: #26331f;
    --tint-pink: #3b2530;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-phone: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--primary);
  text-underline-offset: 3px;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 16px;
  top: 12px;
  background: var(--surface);
  padding: 8px 12px;
  z-index: 10;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
.wrap.narrow {
  max-width: 760px;
}

/* ---- Header ---------------------------------------------------------------------------------------------------- */

header.site {
  padding: 20px 0;
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.brand svg {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: none;
}
nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
}
nav a:hover {
  color: var(--text);
  background: var(--surface-muted);
}
nav a[aria-current='page'] {
  color: var(--primary);
}

/* ---- Type and buttons -------------------------------------------------------------------------------------------- */

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.05;
}
h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.15;
}
h3 {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.eyebrow {
  display: inline-block;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.lede {
  font-size: clamp(18px, 2vw, 21px);
  color: var(--text-secondary);
  max-width: 34em;
  margin: 18px 0 0;
  text-wrap: pretty;
}
.muted {
  color: var(--text-secondary);
  font-size: 15px;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 30px;
}
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 17px;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
}
.button:hover {
  transform: translateY(-1px);
}
.button.small {
  font-size: 15px;
  padding: 9px 16px;
  box-shadow: none;
}
.button.quiet {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: none;
}

/* ---- Hero ------------------------------------------------------------------------------------------------------ */

.hero {
  padding: 36px 0 72px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
}
.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 10px 0 10px 150px;
}
/* The door jamb: a wooden edge with pencil height marks, like the ones families draw as kids grow. The writing sits to
   the left of the wood and each line crosses it toward the phone, so the labels never run under the phone. */
.jamb {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 136px;
}
.jamb .wood {
  position: absolute;
  left: 92px;
  top: 0;
  bottom: 0;
  width: 26px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-muted), var(--surface) 55%, var(--surface-muted));
  border: 1.5px solid var(--border);
}
.mark {
  position: absolute;
  left: 0;
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-family: 'Caveat', 'Segoe Print', cursive;
  font-size: 21px;
  line-height: 1;
  color: var(--pencil);
  white-space: nowrap;
}
.mark::after {
  content: '';
  flex: none;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.8;
}
.mark.next {
  color: var(--accent);
}
.mark.next::after {
  height: 3.5px;
  opacity: 1;
}
.phone {
  position: relative;
  width: min(300px, 100%);
  border-radius: 44px;
  padding: 10px;
  background: var(--phone);
  box-shadow: var(--shadow-phone);
}
.phone img {
  border-radius: 34px;
  width: 100%;
  height: auto;
}

/* A coral pencil underline under a key phrase (drawn as a mask, so it takes the theme's accent color). */
.pencil {
  position: relative;
  white-space: nowrap;
}
.pencil::after {
  content: '';
  position: absolute;
  left: -1%;
  right: 2%;
  bottom: -0.1em;
  height: 0.2em;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 5 S 180 4, 198 6' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 3, 80 10, 120 5 S 180 4, 198 6' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

/* Handwritten notes on the screenshots, with a pencil arrow. */
.note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: 'Caveat', 'Segoe Print', cursive;
  font-size: 25px;
  line-height: 1.1;
  color: var(--accent-text);
}
.arrow {
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.note-hero {
  position: absolute;
  right: 0;
  bottom: -46px;
}
.note-hero .arrow {
  width: 48px;
  height: 36px;
  margin-bottom: 18px;
}
.shot {
  position: relative;
  display: flex;
  justify-content: center;
}
.note-chances {
  position: absolute;
  left: calc(50% + 158px);
  top: 42%;
  width: 150px;
  flex-direction: column;
  align-items: flex-start;
}
.note-chances .arrow {
  width: 56px;
  height: 32px;
  margin-left: -10px;
}

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

section.band {
  padding: 72px 0;
}
section.band.alt {
  background: var(--surface);
  border-block: 1px solid var(--border);
}
.section-head {
  max-width: 36em;
  margin-bottom: 36px;
}
.section-head p {
  color: var(--text-secondary);
  margin: 12px 0 0;
  font-size: 18px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  margin-bottom: 14px;
}
.steps p,
.features p {
  margin: 8px 0 0;
  color: var(--text-secondary);
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--text);
}
.icon svg {
  width: 24px;
  height: 24px;
}
.tint-blue {
  background: var(--tint-blue);
}
.tint-peach {
  background: var(--tint-peach);
}
.tint-green {
  background: var(--tint-green);
}
.tint-pink {
  background: var(--tint-pink);
}

.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 56px;
}
.split .phone {
  margin: 0 auto;
}
.checks {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}
.checks li {
  position: relative;
  padding-left: 32px;
  margin-top: 12px;
}
.checks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
}

.cta {
  text-align: center;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 28px;
  padding: 56px 24px;
}
.cta h2 {
  color: var(--on-primary);
}
.cta p {
  margin: 12px auto 0;
  max-width: 32em;
  opacity: 0.9;
  font-size: 18px;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.cta .button {
  background: var(--on-primary);
  color: var(--primary);
}
.cta .button.ghost {
  background: transparent;
  color: var(--on-primary);
  border: 2px solid var(--on-primary);
  box-shadow: none;
}
.fine {
  margin: 14px 0 0;
}

/* ---- Text pages (support, privacy) ------------------------------------------------------------------------------- */

.page-head {
  padding: 28px 0 8px;
}
.page-head .lede {
  margin-top: 12px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-top: 24px;
}
.card > section + section {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.card h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
}
.card p {
  margin: 8px 0 0;
}
.card ul {
  margin: 10px 0 0;
  padding-left: 20px;
}
.card li + li {
  margin-top: 6px;
}
section[id] {
  scroll-margin-top: 20px;
}
.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--primary-soft);
  border: none;
  box-shadow: none;
}
.contact h2 {
  font-size: 20px;
}
.contact p {
  margin: 4px 0 0;
  color: var(--text-secondary);
}
.card .jump li + li {
  margin-top: 0;
}
.jump {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 32px;
  padding-left: 20px;
  margin: 10px 0 0;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}
.chips li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 15px;
}
.chips li::before {
  content: '✓ ';
  color: var(--primary);
}

/* Chance bars, as on the app's "Show chances by size" (the 404 page's odds). */
.card .odds,
.odds {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.odds li {
  display: grid;
  grid-template-columns: minmax(0, 12em) 1fr 3em;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 16px;
}
.odds li:first-child {
  font-weight: 800;
}
.odds li > span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.odds .bar {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-muted);
  overflow: hidden;
}
.odds .bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0.55;
}
.odds li:first-child .bar span {
  opacity: 1;
}

/* ---- Footer ---------------------------------------------------------------------------------------------------- */

footer.site {
  margin-top: 72px;
  padding: 32px 0 40px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 15px;
}
footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}
footer.site a {
  color: var(--text-secondary);
}
footer.site nav a {
  padding: 0;
  margin-left: 18px;
}
footer.site nav a:first-child {
  margin-left: 0;
}

/* ---- Small screens ------------------------------------------------------------------------------------------------ */

@media (max-width: 860px) {
  .hero .wrap,
  .split {
    grid-template-columns: 1fr;
  }
  .hero-art {
    max-width: 460px;
    margin: 0 auto;
  }
  .steps,
  .features {
    grid-template-columns: 1fr;
  }
  .split .shot {
    order: 2;
    flex-direction: column;
    align-items: center;
  }
  .note-chances {
    position: static;
    width: auto;
    margin-top: 10px;
    flex-direction: row;
  }
  .note-chances .arrow {
    transform: rotate(75deg);
    margin: 0 4px 0 0;
  }
}
@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  header.site .button.small {
    display: none;
  }
  .hero {
    padding-top: 16px;
  }
  .hero-art {
    padding-left: 118px;
  }
  .jamb {
    width: 110px;
  }
  .jamb .wood {
    left: 74px;
    width: 22px;
  }
  .mark {
    width: 108px;
    font-size: 18px;
  }
  .mark::after {
    width: 36px;
  }
  section.band {
    padding: 56px 0;
  }
  .jump {
    grid-template-columns: 1fr;
  }
  .cta {
    border-radius: 22px;
    padding: 44px 20px;
  }
  footer.site nav a {
    margin-left: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

/* ==== Kendra's pass: the page is a door frame ======================================================================= */

/* Handwritten kicker above headings, in pencil-coral. */
.kicker {
  margin: 0 0 6px;
  font-family: 'Caveat', 'Segoe Print', cursive;
  font-size: 27px;
  line-height: 1.1;
  color: var(--accent-text);
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
.hero .kicker {
  font-size: 30px;
  margin-bottom: 10px;
}
.sub {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 18px;
}

/* The jamb running down the page, with a pencil tick at each section. Wide screens only: it lives in the gutter. */
.framed {
  position: relative;
  --spine-x: calc(50% - 600px);
}
.spine,
.tick {
  display: none;
}
@media (min-width: 1260px) {
  .spine {
    display: block;
    position: absolute;
    z-index: 1;
    left: var(--spine-x);
    top: 0;
    bottom: 120px;
    width: 22px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(90deg, var(--wood-edge), var(--wood) 45%, var(--wood-edge));
  }
  .framed > section {
    position: relative;
  }
  .tick {
    display: block;
    position: absolute;
    z-index: 2;
    left: calc(var(--spine-x) - 8px);
    top: 86px;
    width: 38px;
    height: 3.5px;
    border-radius: 2px;
    background: var(--accent);
  }
}

/* Ruled notebook paper with a coral margin line. */
section.band.paper {
  background-color: var(--surface);
  background-image: linear-gradient(90deg, transparent 0, transparent calc(50% - 572px), var(--margin-line) calc(50% - 572px), var(--margin-line) calc(50% - 570px), transparent calc(50% - 570px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--rule) 35px, var(--rule) 36px);
  border-block: 1px solid var(--border);
}

/* Steps as notes on the paper: no boxes, staggered, with a sticker each. */
.steps {
  gap: 40px;
  margin-top: 40px;
}
.steps li {
  position: relative;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 0 0 4px;
}
.steps li:nth-child(2) {
  margin-top: 36px;
}
.steps li:nth-child(3) {
  margin-top: 12px;
}
.steps li::before {
  display: block;
  width: auto;
  height: auto;
  background: none;
  place-items: initial;
  content: counter(step) '.';
  font-family: 'Caveat', 'Segoe Print', cursive;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 6px;
}
.sticker {
  width: 64px;
  height: 64px;
  /* A white die-cut edge, like a real sticker, which also keeps the ink outline visible on dark paper. */
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)
    drop-shadow(0 2px 3px rgba(60, 45, 30, 0.22));
}
.steps .sticker {
  position: absolute;
  top: -4px;
  right: 8px;
  transform: rotate(8deg);
}
.steps li:nth-child(2) .sticker {
  transform: rotate(-10deg);
}

/* Break the grid a little. */
.tilt-left {
  transform: rotate(-2.5deg);
}
.split.flip {
  grid-template-columns: 0.95fr 1.05fr;
}

/* The shared size list, as a text thread. */
.thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
  justify-self: center;
  padding: 26px 22px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 32px;
  box-shadow: var(--shadow);
  transform: rotate(1.5deg);
}
.bubble {
  margin: 0;
  padding: 11px 15px;
  border-radius: 20px;
  font-size: 14.5px;
  line-height: 1.45;
  white-space: pre-line;
  max-width: 92%;
}
.bubble.out {
  align-self: flex-end;
  background: var(--primary);
  color: var(--on-primary);
  border-bottom-right-radius: 6px;
}
.bubble.in {
  align-self: flex-start;
  background: var(--bubble-in);
  color: var(--text);
  border-bottom-left-radius: 6px;
}
.note-grandma {
  margin-top: 26px;
  align-items: flex-start;
}
.note-grandma .arrow {
  width: 54px;
  height: 36px;
  margin-left: 4px;
}

/* Index cards, taped to the page. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.index-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 30px 24px 24px;
  box-shadow: 0 1px 2px rgba(60, 45, 30, 0.08), 0 10px 22px rgba(60, 45, 30, 0.1);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--rule) 27px, var(--rule) 28px);
  background-position: 0 58px;
}
.index-card:nth-child(1) {
  transform: rotate(-1.4deg);
}
.index-card:nth-child(2) {
  transform: rotate(0.8deg) translateY(10px);
}
.index-card:nth-child(3) {
  transform: rotate(-0.6deg);
}
.index-card::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  background: var(--tape);
  transform: rotate(-3deg);
}
.index-card .sticker {
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
}
.index-card p {
  margin: 8px 0 0;
  color: var(--text-secondary);
}

/* The finale is a door, in its frame. */
.finale {
  padding-top: 40px;
}
.doorway {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 18px 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--wood-edge), var(--wood) 8%, var(--wood) 92%, var(--wood-edge));
}
.door {
  position: relative;
  text-align: center;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 6px 6px 0 0;
  padding: 64px 64px 110px;
  min-height: 560px;
  /* Two recessed panels, like a real door: a tall one holding the words, a short one near the floor. */
  background-image: linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)), linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07));
  background-size: calc(100% - 64px) calc(100% - 150px), calc(100% - 64px) 70px;
  background-position: 32px 30px, 32px calc(100% - 30px);
  background-repeat: no-repeat;
}
.door .kicker {
  color: var(--accent-soft);
  transform-origin: center;
}
.door h2 {
  color: var(--on-primary);
  font-size: clamp(34px, 5vw, 48px);
}
.door p {
  margin: 14px auto 0;
  max-width: 26em;
  opacity: 0.92;
}
.knob {
  position: absolute;
  right: 12px;
  top: 58%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.18);
}
.door-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.door p.door-fine {
  margin-top: 18px;
  font-size: 14px;
  opacity: 0.8;
}
.nowrap {
  white-space: nowrap;
}
.fine {
  max-width: 34em;
  font-size: 14px;
  line-height: 1.5;
}
.door .button {
  background: var(--on-primary);
  color: var(--primary);
}
.door .button.ghost {
  background: transparent;
  color: var(--on-primary);
  border: 2px solid var(--on-primary);
  box-shadow: none;
}

@media (max-width: 860px) {
  .steps li:nth-child(2),
  .steps li:nth-child(3) {
    margin-top: 0;
  }
  .cards {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .index-card:nth-child(2) {
    transform: rotate(0.8deg);
  }
  .split.flip {
    grid-template-columns: 1fr;
  }
  .split.flip .thread {
    order: 2;
  }
  .note-grandma {
    margin-top: 18px;
  }
  .note-grandma .arrow {
    transform: rotate(70deg) translate(12px, -4px);
  }
  .thread {
    transform: none;
  }
  .tilt-left {
    transform: rotate(-1.5deg);
  }
}
@media (max-width: 560px) {
  .door {
    padding: 48px 34px 56px;
    min-height: 0;
    background-image: none;
  }
  .doorway {
    padding: 12px 12px 0;
  }
  .knob {
    right: 10px;
  }
  .kicker {
    font-size: 24px;
  }
}

/* Positions and widths that used to be inline styles (the CSP allows no inline styles). */
.mark.m1 { top: 9%; }
.mark.m2 { top: 22%; }
.mark.m3 { top: 34%; }
.mark.m4 { top: 47%; }
.mark.m5 { top: 59%; }
.mark.m6 { top: 74%; }
.odds .bar .w71 { width: 71%; }
.odds .bar .w24 { width: 24%; }
.odds .bar .w4 { width: 4%; }
.odds .bar .w1 { width: 1%; }
.after-door {
  margin-top: 28px;
  text-align: center;
}
.spaced {
  margin-top: 14px;
}

/* ==== Carrying the look through ===================================================================================== */

/* Phones and tablets: a slim jamb down the left edge, with its ticks (wide screens use the gutter version above). */
@media (max-width: 1259px) {
  .spine {
    display: block;
    position: absolute;
    z-index: 1;
    left: 4px;
    top: 0;
    bottom: 120px;
    width: 7px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, var(--wood-edge), var(--wood) 50%, var(--wood-edge));
  }
  .framed > section {
    position: relative;
  }
  .tick {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 62px;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
  }
}
@media (max-width: 1259px) and (min-width: 561px) {
  .tick {
    top: 78px;
  }
}

/* Text pages: a sticker on the page head, and the main card on ruled paper with a coral margin line. */
.page-head {
  position: relative;
}
.page-sticker {
  position: absolute;
  right: 4px;
  top: 30px;
  transform: rotate(9deg);
}
.paper-card {
  background-color: var(--surface);
  background-image: linear-gradient(90deg, transparent 0, transparent 14px, var(--margin-line) 14px, var(--margin-line) 16px, transparent 16px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--rule) 27px, var(--rule) 28px);
}
@media (max-width: 560px) {
  .page-sticker {
    width: 48px;
    height: 48px;
    top: 18px;
  }
  .page-head .kicker {
    padding-right: 56px;
  }
}

/* The doormat: coir, lying on the floor in front of the door. */
.mat-row {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  perspective: 420px;
}
.doormat {
  width: min(380px, 84%);
  margin: 6px auto 0;
  height: 62px;
  line-height: 62px;
  text-align: center;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  color: var(--coir-ink);
  background-color: var(--coir);
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 4px);
  border-radius: 10px;
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.1), 0 10px 14px rgba(60, 45, 30, 0.2);
  transform: rotateX(38deg);
  transform-origin: top center;
}
.mat-row {
  padding-bottom: 8px;
}
.note-mat {
  position: absolute;
  left: calc(50% + 196px);
  top: 2px;
  width: max-content;
  flex-direction: column;
  align-items: flex-start;
  font-size: 23px;
}
.note-mat .arrow {
  width: 52px;
  height: 32px;
  margin-left: -24px;
}
@media (max-width: 860px) {
  .note-mat {
    position: static;
    width: auto;
    margin: 14px auto 0;
    flex-direction: row;
    justify-content: center;
  }
  .note-mat .arrow {
    margin-left: 0;
    transform: rotate(35deg);
  }
}