/*
 * Skeuomorphic "paper desk" layer for the forked site.
 * Loaded after the unchanged rebuild stylesheet (site.css) so the fork can keep
 * taking upstream layout fixes. Materials follow two references:
 *   - the open-notebook concept (leather cover, lined pages, highlighter,
 *     ballpoint margin notes, coloured side tabs);
 *   - the app's filing-desk direction (sage desk, manila folders, coloured paper
 *     tabs, white label-maker tape, Bitter labels, dark-green ink).
 */
@font-face {
  font-family: Bitter;
  src: url("/assets/bitter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Caveat;
  src: url("/assets/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #1f3b2d;
  --body: #46504a;
  --muted: #66706a;
  --ballpoint: #2b3b8f;
  --desk: #b7c7b1;
  --desk-light: #d3dfcf;
  --paper: #fbf8f0;
  --paper-warm: #f6f0e2;
  --rule: #d9e0e3;
  --margin-rule: #e9b9b1;
  --manila: #ecd59f;
  --manila-deep: #d8bd84;
  --kraft: #eadfc8;
  --tape: #f4ecd4b8;
  --highlight: #f5d76e;
  --leather: #262b28;
  --tab-sage: #b9d0b2;
  --tab-blue: #9fb4c4;
  --tab-rose: #9a4c5c;
  --tab-butter: #efd98f;
  --tab-lavender: #c6badb;
  --tab-apricot: #f0c197;
  --serif: "Source Serif 4", Georgia, serif;
  --label: Bitter, "Source Serif 4", Georgia, serif;
  --hand: Caveat, "Segoe Print", cursive;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --leather-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='turbulence' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  --lines: repeating-linear-gradient(
    to bottom,
    transparent 0 31px,
    var(--rule) 31px 32px
  );
  --sheet-shadow: 0 1px 1px #3a33221a, 0 10px 22px -12px #2a2a1a55;
  color: var(--ink);
  font-family: var(--serif);
}

/* ---------- Desk, type and shared materials ---------- */
html {
  background: var(--desk);
}
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    var(--grain),
    radial-gradient(ellipse 60% 40% at 15% 30%, #cbd8c6aa, transparent),
    radial-gradient(ellipse 50% 35% at 85% 70%, #a9bba3aa, transparent),
    linear-gradient(var(--desk-light), var(--desk) 900px);
  color: var(--body);
  overflow-x: clip;
}
main {
  flex: 1;
  padding-bottom: 40px;
}
h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
}
h1 {
  letter-spacing: -2.5px;
  line-height: 1.04;
}
h2 {
  letter-spacing: -1px;
}
p {
  color: var(--body);
}
a:hover {
  color: var(--ink);
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ballpoint);
  outline-offset: 4px;
}
mark {
  color: inherit;
  background: linear-gradient(
    176deg,
    transparent 56%,
    color-mix(in srgb, var(--highlight) 85%, transparent) 56% 88%,
    transparent 88%
  );
  padding: 0 0.08em;
  margin: 0 -0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.desktop-break {
  display: none;
}

/* Paper sheets: lined writing paper with a soft contact shadow. */
.quote-card,
.benefit-inner,
.faq,
.letter,
.demo-intro,
.landing-intro,
.landing-narrative,
.landing-learning,
.tasks,
.guarantee,
.not-found,
.story-heading,
.pricing > h1,
.demo-page > h1 {
  position: relative;
}
.benefit-inner,
.faq,
.letter,
.demo-intro,
.landing-intro,
.landing-narrative,
.landing-learning,
.tasks,
.guarantee,
.not-found,
dialog,
.price-card {
  background: var(--grain), var(--lines), var(--paper);
  background-position: 0 14px;
  border-radius: 3px;
  box-shadow: var(--sheet-shadow);
}

/* Translucent tape strip used on sheets, cards and photos. */
.quote-card::before,
.taped-print::before,
.letter figure::before,
dialog::before,
.cta .container::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 112px;
  height: 26px;
  translate: -50% 0;
  rotate: -2deg;
  background: var(--grain), var(--tape);
  box-shadow: 0 1px 2px #0000001f;
  clip-path: polygon(
    2% 8%,
    0 30%,
    3% 52%,
    0 76%,
    2% 100%,
    98% 94%,
    100% 70%,
    97% 48%,
    100% 24%,
    98% 0
  );
  pointer-events: none;
}

/* ---------- Buttons: kraft labels and green book-cloth labels ---------- */
.button {
  font-family: var(--label);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.1px;
  border-radius: 3px;
  min-height: 46px;
  padding: 11px 22px;
  color: #f7f1e1;
  background: var(--leather-grain), linear-gradient(#335c49, #274a3a);
  box-shadow:
    inset 0 1px 0 #ffffff26,
    inset 0 -2px 0 #0000002e,
    0 2px 2px #1d2a2233,
    0 10px 16px -10px #1d2a2299;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.button:hover {
  color: #fff;
  background: var(--leather-grain), linear-gradient(#3b6852, #2c5241);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 #ffffff26,
    inset 0 -2px 0 #0000002e,
    0 3px 3px #1d2a2233,
    0 16px 20px -12px #1d2a22aa;
}
.button:active {
  transform: translateY(1px);
}
.button-light {
  color: var(--ink);
  background: var(--grain), linear-gradient(#f1e7d3, var(--kraft));
  box-shadow:
    inset 0 1px 0 #ffffffa0,
    0 1px 1px #3a33222e,
    0 9px 14px -10px #3a332299;
}
.button-light:hover {
  color: var(--ink);
  background: var(--grain), linear-gradient(#f5ecdb, #efe4cd);
  box-shadow:
    inset 0 1px 0 #ffffffa0,
    0 2px 2px #3a33222e,
    0 16px 18px -12px #3a3322aa;
}
.button span[aria-hidden] {
  font-family: var(--serif);
}

/* ---------- Header on the desk ---------- */
.site-header {
  height: 84px;
  width: min(1180px, calc(100% - 64px));
  margin-inline: auto;
  padding: 18px 0;
  background: transparent;
  border-bottom: 1px solid #1f3b2d30;
}
.logo {
  width: 124px;
  aspect-ratio: 347 / 102;
  background: var(--ink);
  -webkit-mask: url("/assets/logo.png") left center / contain no-repeat;
  mask: url("/assets/logo.png") left center / contain no-repeat;
}
.logo img {
  opacity: 0;
  width: 100%;
}
.site-header nav a {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.site-header nav a:hover,
.site-header nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--ballpoint);
  text-decoration-thickness: 1.5px;
}
.nav-account a[href*="/educator/sign-up"] {
  font-family: var(--label);
  font-weight: 600;
  padding: 8px 16px 8px 26px;
  position: relative;
  background: var(--grain), var(--kraft);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 #ffffffa0,
    0 1px 1px #3a33222e,
    0 8px 12px -9px #3a332299;
  text-decoration: none !important;
}
.nav-account a[href*="/educator/sign-up"]::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #8a5a23;
}

/* ---------- Notebook heroes ---------- */
.notebook-hero {
  width: min(1180px, calc(100% - 120px));
  margin: 46px auto 0;
  padding: 0 0 20px;
  text-align: left;
  min-height: 0;
  display: block;
}
.notebook {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 14px 16px 16px;
  border-radius: 16px;
  background:
    var(--leather-grain),
    radial-gradient(ellipse at 30% 20%, #3a403b, var(--leather) 70%);
  box-shadow:
    inset 0 0 0 1px #ffffff14,
    inset 0 0 0 5px #1a1e1b,
    0 2px 3px #0000004d,
    0 34px 44px -26px #1b241e;
}
.notebook::before {
  /* stitching around the cover */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px dashed #6c6b5f8c;
  border-radius: 12px;
  pointer-events: none;
}
.page {
  position: relative;
  z-index: 1;
  min-height: 620px;
  padding: 72px 64px 64px;
  background: var(--grain), var(--lines), var(--paper);
  background-position: 0 22px;
}
.page-left {
  border-radius: 8px 2px 2px 8px;
  box-shadow:
    inset -42px 0 40px -38px #3a2f1a55,
    -2px 2px 0 #ece4d2,
    -4px 4px 0 #ded5c0,
    -6px 5px 0 #eee6d4;
}
.page-right {
  border-radius: 2px 8px 8px 2px;
  box-shadow:
    inset 42px 0 40px -38px #3a2f1a55,
    2px 2px 0 #ece4d2,
    4px 4px 0 #ded5c0,
    6px 5px 0 #eee6d4;
}
.page-right::before {
  /* binding thread down the gutter */
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  border-left: 2px dotted #8a7d61;
  opacity: 0.75;
}
.notebook-hero h1 {
  font-size: clamp(46px, 4.4vw, 64px);
  margin: 36px 0 28px;
  max-width: 13ch;
}
.notebook-hero .hero-subtitle {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 32px;
  letter-spacing: -0.2px;
  font-weight: 400;
  color: var(--body);
  max-width: 24em;
  margin-bottom: 40px;
}
.notebook-hero .hero-subtitle strong {
  color: var(--ink);
  font-weight: 600;
}
.notebook-hero .actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

/* Right page: taped product print and ballpoint notes. */
.tape-label {
  position: absolute;
  top: 42px;
  right: 42px;
  padding: 7px 18px 7px 34px;
  font-family: var(--label);
  font-size: 15px;
  font-weight: 600;
  color: #24452f;
  background: var(--grain), #cfe2c8;
  rotate: 1.5deg;
  box-shadow: 0 1px 2px #00000026;
  clip-path: polygon(
    0 4%,
    2% 30%,
    0 60%,
    2% 100%,
    100% 96%,
    98% 64%,
    100% 34%,
    98% 0
  );
}
.tape-label::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #2f6a43;
}
.taped-print {
  position: relative;
  margin: 72px 0 0;
  padding: 10px;
  background: #fff;
  rotate: -1.2deg;
  box-shadow:
    0 1px 2px #0000002e,
    0 14px 20px -14px #00000080;
}
.taped-print img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top left;
}
.margin-notes {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 18px 0 0 6%;
}
.ink-arrow {
  flex: none;
  width: 76px;
  height: 58px;
  margin-top: -14px;
  fill: none;
  stroke: var(--ballpoint);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  scale: -1 -1;
}
.margin-note {
  font-family: var(--hand);
  font-size: 30px;
  line-height: 1.05;
  color: var(--ballpoint);
  rotate: -2.5deg;
  max-width: 14em;
}
.desk-caption {
  margin: 20px 4px 0 auto;
  text-align: right;
  font-size: 13px;
  color: #3f4c43;
}

/* Coloured side tabs on the notebook's fore-edge. */
.notebook-tabs {
  position: absolute;
  top: 120px;
  right: -38px;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notebook-tabs a {
  writing-mode: vertical-rl;
  display: block;
  width: 40px;
  padding: 22px 0 22px 4px;
  font-family: var(--serif);
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  color: #263a2f;
  border-radius: 0 10px 10px 0;
  background: var(--grain), var(--tab-sage);
  box-shadow:
    inset 6px 0 6px -5px #00000040,
    1px 2px 2px #00000030;
  transition: translate 0.15s;
}
.notebook-tabs a:nth-child(2) {
  background: var(--grain), var(--tab-blue);
}
.notebook-tabs a:nth-child(3) {
  background: var(--grain), var(--tab-butter);
}
.notebook-tabs a:nth-child(4) {
  background: var(--grain), #e7b9b3;
}
.notebook-tabs a:hover {
  translate: 4px 0;
  color: var(--ink);
}

/* Home and landing variants. */
.notebook-home .page-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 44px;
  padding-inline: 72px;
}
.choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.choice .button {
  min-height: 54px;
  font-size: 17px;
}
.notebook-single {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin-inline: auto;
}
.notebook-single .page-left {
  border-radius: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow:
    inset 30px 0 30px -28px #3a2f1a44,
    2px 2px 0 #ece4d2,
    4px 4px 0 #ded5c0;
}
.notebook-single .logo {
  width: 220px;
}
.notebook-single h1 {
  max-width: none;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -2px;
}
.landing-hero {
  margin-top: 64px;
}
.landing-hero .hero-subtitle {
  font-size: 26px;
  line-height: 38px;
}

/* ---------- Index-card testimonials ---------- */
.testimonials {
  margin-top: 70px;
  margin-bottom: 70px;
  gap: 32px;
}
.quote-card {
  border-radius: 2px;
  padding: 44px 28px 28px;
  background:
    var(--grain),
    linear-gradient(transparent 38px, #e5a29a 38px 39px, transparent 39px),
    repeating-linear-gradient(transparent 0 25px, #cfdbe6 25px 26px),
    #fffdf7;
  background-position:
    0 0,
    0 0,
    0 14px,
    0 0;
  box-shadow: var(--sheet-shadow);
  rotate: -1deg;
}
.quote-card:nth-child(2) {
  rotate: 0.8deg;
  translate: 0 10px;
}
.quote-card:nth-child(3) {
  rotate: -0.4deg;
}
.quote-person img {
  border-radius: 1px;
  border: 4px solid #fff;
  box-shadow: 0 2px 4px #0003;
  width: 58px;
  height: 58px;
  rotate: -3deg;
}
.quote-person h3 {
  font-family: var(--hand);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ballpoint);
}
.quote-card p {
  font-size: 16px;
  line-height: 26px;
  color: #3b4540;
}

/* ---------- Benefits: sheets with taped photographs ---------- */
.benefit,
.benefit:nth-child(2),
.benefit:nth-child(3) {
  background: transparent;
  padding: 40px 0;
}
.benefit-inner {
  padding: 56px;
  rotate: 0.3deg;
}
.reverse .benefit-inner {
  rotate: -0.4deg;
}
.benefit-inner h2 {
  font-size: 42px;
}
.benefit-inner p {
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0;
}
.benefit-inner > img {
  border-radius: 1px;
  border: 12px solid #fff;
  border-bottom-width: 40px;
  box-shadow:
    0 2px 3px #0003,
    0 18px 26px -16px #0007;
  rotate: 2deg;
  max-height: 520px;
}
.reverse .benefit-inner > img {
  rotate: -2.5deg;
}

/* ---------- CTA: sticky notes ---------- */
.cta {
  background: transparent;
  padding: 60px 24px;
}
.cta .container {
  position: relative;
  max-width: 760px;
  padding: 58px 48px 50px;
  background:
    var(--grain),
    linear-gradient(170deg, #fbec9f, #f6df83);
  box-shadow:
    0 1px 1px #0000001a,
    0 22px 22px -18px #3d331599;
  rotate: -0.8deg;
  border-bottom-right-radius: 28px 6px;
}
.faq + .cta .container {
  background:
    var(--grain),
    linear-gradient(170deg, #f9d4b2, #f2c29b);
  rotate: 0.7deg;
}
.cta h2 {
  font-size: 58px;
  letter-spacing: -2px;
  margin-bottom: 18px;
}
.cta p {
  color: #4c4632;
  font-size: 22px;
  letter-spacing: 0;
}

/* ---------- Features: manila folders with coloured tabs ---------- */
.features > h2,
.section-title,
.faq > h2 {
  font-size: 50px;
}
.feature-grid {
  gap: 64px 34px;
  padding-top: 20px;
}
.feature-card {
  position: relative;
  padding: 18px 20px 22px;
  border-radius: 3px 10px 6px 6px;
  background:
    var(--grain),
    linear-gradient(178deg, #f4e1b1, var(--manila) 50%, #e8cf95);
  box-shadow:
    inset 0 1px 0 #fff6,
    0 1px 1px #5a46182e,
    0 14px 18px -14px #4b3c1a99;
  transition:
    translate 0.15s,
    box-shadow 0.15s;
}
.feature-card::before {
  /* folder tab */
  content: "";
  position: absolute;
  top: -22px;
  left: 0;
  width: 46%;
  height: 24px;
  border-radius: 9px 12px 0 0;
  background: var(--grain), #f2deac;
  box-shadow: inset 0 1px 0 #fff6;
}
.feature-card::after {
  /* coloured paper tag on the tab */
  content: "";
  position: absolute;
  top: -15px;
  left: 16px;
  width: 64px;
  height: 10px;
  border-radius: 2px;
  background: var(--tab-sage);
  box-shadow: 0 1px 1px #0002;
}
.feature-card:nth-child(6n + 2)::after {
  background: var(--tab-blue);
}
.feature-card:nth-child(6n + 3)::after {
  background: var(--tab-rose);
}
.feature-card:nth-child(6n + 4)::after {
  background: var(--tab-lavender);
}
.feature-card:nth-child(6n + 5)::after {
  background: var(--tab-butter);
}
.feature-card:nth-child(6n + 6)::after {
  background: var(--tab-apricot);
}
.feature-card:hover {
  translate: 0 -3px;
  box-shadow:
    inset 0 1px 0 #fff6,
    0 2px 2px #5a46182e,
    0 22px 24px -16px #4b3c1aaa;
}
.feature-card > img {
  border-radius: 1px;
  border: 7px solid #fff;
  box-shadow: 0 2px 4px #0003;
  rotate: -1deg;
}
.feature-card:nth-child(even) > img {
  rotate: 1.2deg;
}
.feature-card h3 {
  font-family: var(--label);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.feature-card p {
  color: #5a5034;
  font-size: 17px;
  line-height: 1.55;
}
.feature-link {
  font-family: var(--hand);
  font-size: 26px;
  font-weight: 600;
  color: var(--ballpoint);
}
.feature-link::after {
  content: " →";
  font-family: var(--serif);
  font-size: 18px;
}
.feature-link:hover {
  color: var(--ballpoint);
}

/* ---------- Feature dialogs: a taped sheet ---------- */
dialog {
  overflow: visible;
  border-radius: 3px;
  padding: 48px;
  color: var(--body);
}
dialog[open] {
  overflow-y: auto;
}
dialog::before {
  top: 6px;
}
dialog::backdrop {
  background: #1b261f66;
  backdrop-filter: blur(2px);
}
.dialog-close {
  background: var(--grain), var(--kraft);
  color: var(--ink);
  box-shadow: 0 1px 2px #0003;
}
.feature-detail p {
  color: #39433e;
}
.feature-detail img,
.feature-detail video {
  border: 8px solid #fff;
  border-radius: 1px;
  box-shadow: 0 2px 5px #0003;
}
figcaption {
  font-family: var(--hand);
  font-size: 22px;
  color: var(--ballpoint);
}
.media-placeholder {
  background: var(--grain), var(--manila);
  border: 2px dashed #b99a5e;
  border-radius: 4px;
  color: #5e4a22;
}

/* ---------- FAQ: a notebook page with a divider tab ---------- */
.faq {
  margin-block: 70px;
  padding: 64px 56px;
  border-left: 0;
  background:
    linear-gradient(90deg, transparent 38px, var(--margin-rule) 38px 39px, transparent 39px),
    var(--grain),
    var(--lines),
    var(--paper);
  background-position:
    0 0,
    0 0,
    0 14px,
    0 0;
}
.faq > h2 {
  align-self: start;
}
.faq > h2::before {
  content: "";
  position: absolute;
  left: 56px;
  top: -26px;
  width: 120px;
  height: 28px;
  border-radius: 8px 8px 0 0;
  background: var(--grain), var(--tab-butter);
  box-shadow: inset 0 1px 0 #fff6;
}
.faq details {
  border-bottom: 1px solid #c9d2d6;
}
.faq summary {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.faq summary:before {
  font-family: var(--hand);
  font-size: 32px;
  color: var(--ballpoint);
  top: 10px;
}
.faq-answer p {
  font-size: 17px;
  line-height: 1.6;
  color: #3e4843;
}

/* ---------- Pricing: index cards with label-maker titles ---------- */
.pricing {
  padding-top: 70px;
}
.pricing h1 {
  font-size: 64px;
  max-width: 980px;
  margin-bottom: 72px;
}
.pricing-grid {
  gap: 44px 28px;
  margin-top: 30px;
}
.price-card {
  padding: 46px 30px 30px;
  color: var(--body);
}
.price-card:nth-child(odd) {
  rotate: -0.6deg;
}
.price-card:nth-child(even) {
  rotate: 0.6deg;
}
.price-card h2 {
  align-self: flex-start;
  margin: -64px 0 0 -6px;
  padding: 7px 14px;
  font-family: var(--label);
  font-size: 16px;
  font-weight: 700;
  color: #1f2b25;
  background: var(--grain), #fbfaf6;
  box-shadow:
    0 1px 1px #0000002e,
    0 3px 5px -2px #0000003d;
  rotate: -2deg;
  border-radius: 1px;
}
.price-card:nth-child(even) h2 {
  rotate: 1.5deg;
}
.price strong {
  font-family: var(--serif);
  color: var(--ink);
  letter-spacing: -2px;
}
.price-card li {
  color: #3e4843;
}
.price-card li:before {
  content: "✓";
  background: none;
  width: auto;
  height: auto;
  top: -6px;
  font-family: var(--hand);
  font-size: 28px;
  font-weight: 700;
  color: #2f6a43;
}
.guarantee {
  margin-block: 80px 20px;
  padding: 70px 60px;
  max-width: 1000px;
}
.guarantee h2 {
  font-size: 52px;
  letter-spacing: -1.5px;
}
.guarantee p {
  color: var(--body);
}

/* ---------- Story letter ---------- */
.story-heading p {
  color: var(--ink);
}
.story-paper {
  background: transparent;
  padding: 40px 32px 80px;
}
.letter {
  padding: 64px 64px 56px 96px;
  background:
    linear-gradient(90deg, transparent 62px, var(--margin-rule) 62px 63px, transparent 63px),
    var(--grain),
    repeating-linear-gradient(transparent 0 42px, var(--rule) 42px 43px),
    var(--paper);
  line-height: 43px;
  font-size: 25px;
}
.letter p {
  color: #3b4540;
  margin-bottom: 43px;
}
.letter figure {
  position: relative;
  padding: 10px 10px 4px;
  background: #fff;
  box-shadow: 0 2px 4px #0003;
  rotate: 2deg;
}
.letter figcaption {
  margin-top: 0;
}

/* Legal copy uses the same paper, without lines competing with longer text. */
.privacy-policy {
  max-width: 900px;
  background: var(--grain), var(--paper);
  font-size: 20px;
  line-height: 1.65;
}
.privacy-policy h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-block: 36px 16px;
}
.privacy-policy p {
  margin-bottom: 20px;
}
.privacy-policy .policy-date {
  font-size: 16px;
  color: var(--muted);
}

/* ---------- Demo page ---------- */
.demo-page > h1 {
  margin-bottom: 60px;
}
.demo-intro {
  padding: 48px;
}
.demo-preview {
  position: relative;
  overflow: visible;
  margin-top: 40px;
  border: 0;
  border-radius: 3px 10px 6px 6px;
  padding: 16px;
  background:
    var(--grain),
    linear-gradient(178deg, #f4e1b1, var(--manila) 50%, #e8cf95);
  box-shadow: 0 16px 22px -16px #4b3c1aaa;
}
.demo-preview::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  width: 34%;
  height: 26px;
  border-radius: 9px 12px 0 0;
  background: var(--grain), #f2deac;
}
.beta-note {
  background: transparent;
  border: 0;
  padding: 2px 4px 14px;
}
.beta-note > span {
  font-family: var(--label);
  font-size: 14px;
  font-weight: 700;
  background: #fbfaf6;
  color: #1f2b25;
  border-radius: 1px;
  padding: 5px 12px;
  rotate: -2deg;
  box-shadow: 0 2px 4px -1px #0004;
}
.beta-note p {
  color: #5e4a22;
}
.demo-launch {
  background: var(--grain), var(--paper);
  box-shadow: 0 1px 2px #0002;
}
.demo-launch .button {
  background: var(--leather-grain), linear-gradient(#335c49, #274a3a);
}
.demo-preview iframe {
  background: var(--paper);
}

/* ---------- Landing sections ---------- */
.landing-intro,
.landing-narrative,
.landing-learning,
.tasks {
  margin-block: 50px;
  padding: 56px;
}
.landing-intro img,
.tasks-grid img {
  border-radius: 1px;
  border: 10px solid #fff;
  box-shadow: 0 2px 5px #0003;
}
.landing-intro figure {
  rotate: 1.5deg;
}
.tasks-grid img {
  background: #fff;
}

.not-found {
  margin-top: 80px;
  max-width: 760px;
}

/* ---------- Footer: stitched leather strip ---------- */
.site-footer {
  position: relative;
  background:
    var(--leather-grain),
    radial-gradient(ellipse at 50% 0%, #2f3a33, #1d2420 80%);
  box-shadow: inset 0 8px 14px -10px #000c;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 10px 14px;
  border: 1.5px dashed #c8a96a59;
  border-radius: 6px;
  pointer-events: none;
}
.site-footer p,
.site-footer a,
.site-footer button {
  color: #e2cd94;
  font-family: var(--label);
}
.site-footer a:hover {
  color: #f6e6b8;
}
.site-footer nav {
  flex-wrap: wrap;
}

/* Support as a wax seal; consent as a slim paper strip. */
.support > summary {
  background: radial-gradient(circle at 35% 30%, #b2566a, var(--tab-rose) 55%, #6e2f3d);
  color: #f7e9d6;
  font-family: var(--serif);
  box-shadow:
    inset 0 -3px 5px #0004,
    inset 0 2px 3px #ffffff40,
    0 4px 10px #0004;
}
.support-panel {
  background: var(--grain), var(--paper);
  border: 0;
  border-radius: 2px;
  box-shadow: var(--sheet-shadow), 0 16px 30px -14px #0006;
}
.analytics-banner {
  background: var(--grain), var(--paper);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 2px 3px #0002, 0 20px 40px -16px #1b261f99;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) and (min-width: 810px) {
  .page {
    padding: 64px 44px 52px;
  }
  .notebook-home .page-right {
    padding-inline: 44px;
  }
}
@media (max-width: 1100px) {
  .notebook-tabs {
    display: none;
  }
  .notebook-hero {
    width: calc(100% - 64px);
  }
}
@media (max-width: 809px) {
  .site-header {
    width: calc(100% - 40px);
    height: 72px;
    padding: 14px 0;
  }
  .site-header nav {
    top: 72px;
    left: -20px;
    right: -20px;
    background: var(--grain), var(--lines), var(--paper);
    border-bottom: 0;
    box-shadow: 0 16px 24px -14px #0006;
  }
  .site-header nav a {
    font-size: 19px;
  }
  .nav-account a[href*="/educator/sign-up"] {
    align-self: flex-start;
  }
  .menu-toggle span {
    background: var(--ink);
  }
  .notebook-hero {
    width: calc(100% - 28px);
    margin-top: 24px;
  }
  .notebook {
    grid-template-columns: 1fr;
    padding: 10px;
    border-radius: 12px;
  }
  .notebook::before {
    inset: 4px;
    border-radius: 9px;
  }
  .page {
    min-height: 0;
    padding: 44px 26px 40px;
  }
  .page-left,
  .page-right,
  .notebook-single .page-left {
    border-radius: 4px;
    box-shadow: 0 2px 0 #ece4d2, 0 4px 0 #ded5c0;
  }
  .page-left + .page-right {
    margin-top: 10px;
  }
  .page-right::before {
    display: none;
  }
  .notebook-hero h1 {
    font-size: clamp(44px, 12vw, 58px);
    margin: 10px 0 22px;
  }
  .notebook-hero .hero-subtitle {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 30px;
  }
  .tape-label {
    position: relative;
    top: auto;
    right: auto;
    display: inline-block;
  }
  .taped-print {
    margin-top: 36px;
  }
  .margin-note {
    font-size: 26px;
  }
  .notebook-home .page-right {
    padding-inline: 26px;
    gap: 30px;
  }
  .choice .button {
    max-width: 100%;
    font-size: 15px;
  }
  .landing-hero .hero-subtitle {
    font-size: 21px;
    line-height: 31px;
  }
  .notebook-single .logo {
    width: 170px;
  }
  .desk-caption {
    font-size: 12px;
  }
  .testimonials {
    margin-top: 50px;
  }
  .quote-card:nth-child(2) {
    translate: 0;
  }
  .benefit {
    padding: 22px 0;
  }
  .benefit-inner {
    padding: 34px 26px;
  }
  .benefit-inner h2 {
    font-size: 34px;
  }
  .benefit-inner p {
    font-size: 20px;
    line-height: 30px;
  }
  .cta {
    padding: 40px 16px;
  }
  .cta .container {
    padding: 46px 24px 36px;
  }
  .cta h2 {
    font-size: 44px;
  }
  .feature-grid {
    gap: 54px 22px;
  }
  dialog {
    padding: 40px 22px 26px;
  }
  .faq {
    padding: 44px 22px 30px 50px;
    margin-block: 50px;
  }
  .faq > h2::before {
    left: 50px;
  }
  .pricing h1 {
    font-size: 46px;
  }
  .pricing-grid {
    gap: 48px;
  }
  .guarantee {
    padding: 46px 24px;
    margin-inline: 16px;
    width: auto;
  }
  .guarantee h2 {
    font-size: 40px;
  }
  .story-paper {
    padding: 20px 12px 50px;
  }
  .letter {
    padding: 34px 20px 30px 44px;
    font-size: 20px;
    line-height: 34px;
    background:
      linear-gradient(90deg, transparent 30px, var(--margin-rule) 30px 31px, transparent 31px),
      var(--grain),
      repeating-linear-gradient(transparent 0 33px, var(--rule) 33px 34px),
      var(--paper);
  }
  .letter p {
    margin-bottom: 34px;
  }
  .privacy-policy {
    padding: 30px 24px;
    background: var(--grain), var(--paper);
    font-size: 18px;
    line-height: 1.65;
  }
  .privacy-policy p {
    margin-bottom: 20px;
  }
  .demo-intro,
  .landing-intro,
  .landing-narrative,
  .landing-learning,
  .tasks {
    padding: 34px 24px;
  }
  .support {
    background: var(--leather);
  }
}
@media print {
  body {
    background: none;
  }
  .notebook {
    background: none;
    box-shadow: none;
  }
}

/* Selected conversion improvements, retaining the notebook materials. */
.educator-hero .page {
  min-height: 500px;
  padding: 44px 46px;
}
.educator-hero h1 {
  font-size: clamp(42px, 4vw, 58px);
  max-width: 15ch;
  margin: 0 0 24px;
}
.educator-hero .hero-subtitle {
  font-size: 21px;
  line-height: 1.45;
  margin: 0 0 28px;
}
.educator-hero .page-right {
  display: flex;
  align-items: center;
}
.educator-hero .taped-print {
  margin: 0;
  padding: 8px;
}
.educator-hero .taped-print img {
  aspect-ratio: auto;
  object-fit: contain;
}
.educator-hero .comparison-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--label);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.workflow {
  padding-block: 48px 20px;
}
.workflow > div {
  max-width: 660px;
}
.workflow .eyebrow {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.workflow h2 {
  font-size: 38px;
  line-height: 1.15;
  margin-top: 12px;
}
.workflow ol {
  list-style: none;
  counter-reset: workflow;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 30px 0 0;
  padding: 0;
}
.workflow li {
  counter-increment: workflow;
  padding: 24px;
  background: var(--grain), var(--paper);
  border-top: 4px solid var(--tab-sage);
  box-shadow: var(--sheet-shadow);
}
.workflow li::before {
  content: "0" counter(workflow);
  font-family: var(--hand);
  font-size: 30px;
  color: var(--ballpoint);
}
.workflow h3,
.next-step h3 {
  font-size: 24px;
  line-height: 1.2;
  margin: 12px 0;
}
.next-step h3 {
  margin-top: 0;
}
.workflow p,
.next-step p {
  line-height: 1.6;
}
/* The classroom/institution choice continues the workflow cards above it. */
.next-step {
  margin-block: 40px 56px;
}
.next-step h2 {
  font-size: 30px;
  line-height: 1.15;
  margin: 0;
}
.next-step-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 28px;
  margin-top: 20px;
}
.next-step-options article {
  /* Shared rows keep both headings, descriptions and buttons level. */
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 24px;
  border-top: 4px solid var(--tab-sage);
  background: var(--grain), var(--paper);
  box-shadow: var(--sheet-shadow);
}
.next-step-options article + article {
  border-top-color: var(--tab-butter);
}
.next-step-options article > p:first-of-type {
  margin: 0 0 20px;
}
.next-step-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 14px 22px;
}
.next-step-options .text-link {
  color: var(--ink);
  font-size: 16px;
  text-underline-offset: 4px;
}
@media (max-width: 809px) {
  .educator-hero .page {
    min-height: 0;
    padding: 30px 24px;
  }
  .educator-hero h1 {
    font-size: clamp(36px, 9.8vw, 52px);
    line-height: 1.08;
    margin: 0 0 18px;
    letter-spacing: -1.5px;
  }
  .educator-hero .hero-subtitle {
    font-size: 19px;
    line-height: 1.45;
    margin-bottom: 24px;
  }
  .workflow {
    padding-top: 24px;
  }
  .workflow h2 {
    font-size: 32px;
  }
  .next-step h2 {
    font-size: 26px;
  }
  .workflow ol,
  .next-step-options {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .workflow li {
    padding: 18px 24px;
  }
  .workflow h3 {
    margin-top: 0;
  }
}