:root {
  --paper:#f2efe7;
  --ink:#211c17;
  --muted:#6b6157;
  --line:#dcd5c6;
  --wine:#6e1423;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  background:var(--paper)}
body {
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased}
a {
  color:inherit}
button,input {
  font:inherit}
button,a {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
[hidden] {
  display:none!important}
.shell {
  width:min(1160px,calc(100% - 80px));
  margin:auto}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:29px 0;
  border-bottom:1px solid var(--line)}
.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font:700 34px/1 var(--serif);
  letter-spacing:-1.3px;
  color:var(--wine);
  text-decoration:none;
  white-space:nowrap}
.brand img {
  width:29px;
  height:29px}
.nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:14px;
  font-weight:500}
.nav a {
  text-decoration:none}
.nav a:hover {
  text-decoration:underline;
  text-underline-offset:5px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:50px;
  padding:13px 23px;
  border:1px solid var(--wine);
  border-radius:7px;
  background:var(--wine);
  color:white;
  font-weight:500;
  font-size:15px;
  text-decoration:none;
  transition:background .18s,transform .18s}
.button:hover {
  background:#53101a}
.button:active {
  transform:translateY(1px)}
.button.secondary {
  background:transparent;
  color:var(--wine);
  border-color:#bba99e}
.button.secondary:hover {
  background:#eae3d9}
.button.small {
  min-height:41px;
  padding:9px 17px;
  font-size:13px}
.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  font-weight:600;
  text-transform:uppercase;
  color:var(--wine);
  margin:0 0 21px}
.hero {
  display:grid;
  grid-template-columns:1fr 1.04fr;
  gap:64px;
  align-items:center;
  padding:78px 0 70px}
.hero h1 {
  font:500 clamp(44px,4.7vw,66px)/1.08 var(--serif);
  letter-spacing:-2.7px;
  margin:0 0 25px}
.hero h1 em {
  font-weight:500;
  color:var(--wine)}
.intro {
  font-size:17px;
  line-height:1.75;
  color:var(--muted);
  max-width:460px;
  margin:0 0 28px}
.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap}
.quiet {
  font-size:12px;
  color:var(--muted);
  line-height:1.6}
.hero .quiet {
  margin:17px 0 0}
.preview-wrap {
  margin:0;
  min-width:0;
  position:relative;
  padding:27px 0 23px}
.preview-wrap:before {
  content:"";
  position:absolute;
  inset:0 -18px;
  background:#e8e2d6;
  border-radius:50% 50% 12px 12px;
  transform:rotate(3deg)}
.schedule {
  position:relative;
  background:#fffcf7;
  border:1px solid #d4c7b8;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 22px 48px #422b2018;
  transform:rotate(-2deg)}
.schedule-top {
  background:var(--wine);
  color:#fff4e9;
  padding:18px 24px}
.schedule-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-bottom:8px}
.schedule-week {
  flex:none;
  font-size:10px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  opacity:.8}
.schedule-top h2 {
  font:500 28px/1.2 var(--serif);
  margin:0;
  letter-spacing:-.6px}
.schedule-top p {
  margin:0;
  font-size:12px;
  color:#e3c8c5}
.schedule-tabs {
  display:flex;
  gap:25px;
  padding:15px 24px 0;
  font-size:11px;
  color:var(--muted);
  border-bottom:1px solid var(--line)}
.schedule-tabs span {
  padding-bottom:11px}
.schedule-tabs .selected {
  color:var(--wine);
  border-bottom:2px solid var(--wine);
  font-weight:600}
.day {
  padding:17px 24px 10px;
  display:flex;
  justify-content:space-between;
  font-size:11px}
.day strong {
  font-weight:600}
.day span {
  color:var(--muted)}
.lesson {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  padding:0 24px 9px;
  align-items:center}
.time {
  font-size:10px;
  color:var(--muted)}
.lesson-card {
  border-left:3px solid #93674f;
  border-radius:4px;
  background:#eee5da;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:12px}
.lesson-card small {
  font-size:10px;
  color:#66584b}
.lesson-card.rose {
  background:#f0e0e1;
  border-color:#9f5f6b}
.lesson-card.sage {
  background:#e4e8dc;
  border-color:#7c8960}
.schedule-bottom {
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 24px 0;
  padding:13px 0 16px;
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted)}
.status-dot {
  width:6px;
  height:6px;
  background:#718052;
  border-radius:50%;
  flex:none}
.preview-caption {
  position:relative;
  text-align:center;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.5px;
  margin:20px 0 0}
.how {
  border-top:1px solid var(--line);
  padding:39px 0 45px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  margin-bottom:29px}
.section-heading h2 {
  font:500 29px/1.2 var(--serif);
  letter-spacing:-.6px;
  margin:0}
.section-heading p {
  margin:0;
  font-size:12px;
  color:var(--muted)}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px}
.step-number {
  color:var(--wine);
  font:500 15px var(--serif);
  display:block;
  margin-bottom:10px}
.steps h3 {
  font:600 19px var(--serif);
  margin:0 0 9px}
.steps p {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  margin:0;
  max-width:290px}
.student-note {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  background:#e8e2d7;
  border-radius:9px;
  padding:25px 30px;
  margin-bottom:42px}
.student-note h2 {
  font:500 23px var(--serif);
  margin:0 0 5px}
.student-note p {
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin:0}
.student-note .button {
  flex-shrink:0}
.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding:22px 0 28px;
  font-size:11px;
  color:var(--muted)}
.site-footer p {
  margin:0}
.site-footer a {
  text-underline-offset:3px}
.footer-name {
  font-family:var(--serif);
  font-size:18px;
  color:var(--wine)}
.enter {
  animation:arrive .65s ease both}
.preview-wrap.enter {
  animation-delay:.1s}
@keyframes arrive {
  from {
  opacity:0;
  transform:translateY(12px)}
to {
  opacity:1;
  transform:translateY(0)}
}
.how-more {
  margin:38px 0 0;
  text-align:center;
  font-size:14px}
.how-more a {
  color:var(--wine);
  font-weight:500;
  text-decoration:none}
.how-more a:hover {
  text-decoration:underline;
  text-underline-offset:4px}

/* ------------------------------------------------------------------ */
/*  /how-it-works.html — detailed workflow walkthrough                 */
/* ------------------------------------------------------------------ */
.workflow-hero {
  padding:60px 0 20px;
  max-width:640px}
.workflow-hero h1 {
  font:500 clamp(38px,4.2vw,52px)/1.1 var(--serif);
  letter-spacing:-1.8px;
  margin:0 0 18px}
.workflow-hero p {
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  margin:0}
.workflow {
  padding:30px 0 20px}
.workflow-stage {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  padding:64px 0;
  border-top:1px solid var(--line)}
.workflow-stage:first-child {
  border-top:none}
.workflow-stage.flip .stage-figure {
  order:2}
.workflow-stage.flip .stage-copy {
  order:1}
.stage-step-number {
  color:var(--wine);
  font:500 15px var(--serif);
  display:block;
  margin-bottom:12px}
.stage-copy h2 {
  font:500 30px/1.2 var(--serif);
  letter-spacing:-.7px;
  margin:0 0 14px}
.stage-copy p {
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
  margin:0 0 14px}
.stage-copy p:last-child {
  margin-bottom:0}
.stage-figure {
  position:relative}
.reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.72,.16,1)}
.reveal.revealed {
  opacity:1;
  transform:translateY(0)}
.reveal.reveal-delay {
  transition-delay:.12s}
.reveal.reveal-delay-2 {
  transition-delay:.24s}

.mini-features {
  padding:30px 0 50px;
  border-top:1px solid var(--line)}
.mini-features .section-heading {
  margin-bottom:34px}
.mini-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px}
.mini-card {
  border:1px solid var(--line);
  border-radius:10px;
  padding:26px 24px;
  background:#fffcf7}
.mini-card .icon {
  width:34px;
  height:34px;
  border-radius:9px;
  background:#f0e0e1;
  color:var(--wine);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px}
.mini-card h3 {
  font:600 17px var(--serif);
  margin:0 0 8px}
.mini-card p {
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
  margin:0}

/* Shared mock-device card frame, reused across every stage figure */
.mock-card {
  position:relative;
  background:#fffcf7;
  border:1px solid #d4c7b8;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 22px 48px #422b2018}
.mock-top {
  background:var(--wine);
  color:#fff4e9;
  padding:16px 22px;
  font:500 17px/1.2 var(--serif)}
.mock-top small {
  display:block;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:4px}
.mock-body {
  padding:20px 22px 24px}

/* Onboarding stage */
.setup-dots {
  display:flex;
  gap:6px;
  margin-bottom:16px}
.setup-dots span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--line)}
.setup-dots span.on {
  background:var(--wine)}
.setup-field {
  margin-bottom:12px}
.setup-field label {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-bottom:5px}
.setup-field .value {
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 12px;
  font-size:13px;
  background:#fbf8f2}
.setup-row {
  display:flex;
  gap:16px;
  margin:16px 0 4px;
  padding-top:14px;
  border-top:1px solid var(--line)}
.setup-row div {
  flex:1;
  text-align:center}
.setup-row strong {
  display:block;
  font:600 18px var(--serif);
  color:var(--wine)}
.setup-row span {
  font-size:10px;
  color:var(--muted)}

/* Offer / student-reply grid mockups */
.mock-grid {
  display:grid;
  grid-template-columns:34px repeat(5,1fr);
  font-size:9px;
  color:var(--muted)}
.mock-grid .head {
  padding:0 0 8px;
  text-align:center;
  font-weight:600;
  color:var(--ink)}
.mock-grid .time {
  padding-right:6px;
  text-align:right;
  align-self:center}
.mock-grid .cell {
  height:20px;
  border:1px solid #efece6;
  background:#fbf8f2}
.mock-grid .cell.on {
  background:var(--wine);
  border-color:var(--wine)}
.mock-grid .cell.soft {
  background:#eddede}
.mock-caption {
  margin-top:14px;
  font-size:11px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center}
.mock-caption .pill {
  background:var(--wine);
  color:#fff;
  border-radius:20px;
  padding:6px 13px;
  font-size:11px;
  font-weight:500}

/* Teacher's Replies-tab mockup */
.reply-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:13px}
.reply-row:last-child {
  border-bottom:none}
.reply-row .who strong {
  display:block;
  font-weight:600}
.reply-row .who span {
  font-size:11px;
  color:var(--muted)}
.reply-status {
  font-size:11px;
  padding:5px 10px;
  border-radius:20px;
  white-space:nowrap}
.reply-status.given {
  background:#e4e8dc;
  color:#4c5a36}
.reply-status.waiting {
  background:#efece6;
  color:var(--muted)}
.reply-status.skip {
  background:#f0e0e1;
  color:#7c3f49}

/* Hours-tab mockup */
.hours-row {
  margin-bottom:14px}
.hours-row:last-child {
  margin-bottom:0}
.hours-row .label {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:6px}
.hours-row .label span:last-child {
  color:var(--muted)}
.hours-bar {
  height:7px;
  border-radius:4px;
  background:#efece6;
  overflow:hidden}
.hours-bar div {
  height:100%;
  background:var(--wine);
  border-radius:4px}

@media(max-width:720px) {
  .workflow-stage {
  grid-template-columns:1fr;
  gap:26px;
  padding:44px 0}
.workflow-stage.flip .stage-figure {
  order:1}
.workflow-stage.flip .stage-copy {
  order:2}
.stage-copy h2 {
  font-size:25px}
.mini-grid {
  grid-template-columns:1fr;
  gap:16px}
}

@media(prefers-reduced-motion:reduce) {
  .reveal {
  opacity:1;
  transform:none;
  transition:none}
}

.auth-main {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
  max-width:960px;
  margin:70px auto 85px;
  min-height:450px}
.auth-story h1 {
  font:500 48px/1.12 var(--serif);
  letter-spacing:-1.7px;
  margin:0 0 22px}
.auth-story>p:not(.eyebrow) {
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  margin:0 0 29px}
.setup-steps {
  padding:0;
  margin:0;
  list-style:none;
  display:grid;
  gap:20px}
.setup-steps li {
  display:flex;
  gap:15px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted)}
.setup-steps .number {
  display:flex;
  align-items:center;
  justify-content:center;
  width:29px;
  height:29px;
  flex:none;
  border:1px solid #cbbcaa;
  border-radius:50%;
  font-family:var(--serif);
  color:var(--wine)}
.setup-steps strong {
  display:block;
  font-size:14px;
  color:var(--ink);
  font-weight:500;
  margin-bottom:3px}
.auth-card {
  background:#fffdf9;
  border:1px solid var(--line);
  border-radius:12px;
  padding:34px;
  box-shadow:0 14px 35px #422b2008}
.auth-card h2 {
  font:500 29px/1.2 var(--serif);
  letter-spacing:-.7px;
  margin:0 0 12px}
.auth-card .explain {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 25px}
.auth-card label {
  display:block;
  font-size:13px;
  font-weight:500;
  margin:0 0 8px}
.auth-card input {
  display:block;
  width:100%;
  border:1px solid #c6bdae;
  border-radius:6px;
  background:white;
  min-height:50px;
  padding:12px;
  font-size:16px;
  color:var(--ink);
  margin:0 0 15px}
.auth-card .button {
  width:100%}
.auth-card .quiet {
  text-align:center;
  margin:15px 0 0}
.auth-card .switch {
  border-top:1px solid var(--line);
  margin:25px 0 0;
  padding-top:21px;
  text-align:center;
  font-size:13px;
  color:var(--muted)}
.switch a {
  color:var(--wine);
  font-weight:500;
  text-underline-offset:3px}
.error {
  color:#922f28;
  font-size:13px;
  line-height:1.5;
  margin:0 0 13px}
.error:empty {
  display:none}
.button:disabled {
  opacity:.55;
  cursor:default;
  transform:none}
.sent-icon {
  display:flex;
  justify-content:center;
  align-items:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#eee4dc;
  color:var(--wine);
  margin-bottom:20px}
.sent-email {
  font-weight:600;
  overflow-wrap:anywhere;
  color:var(--ink)}
.text-button {
  padding:10px 0;
  border:0;
  background:transparent;
  color:var(--wine);
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:3px}
.returning .auth-main {
  display:block;
  max-width:420px;
  margin:65px auto 90px;
  min-height:450px}
.returning .auth-card {
  padding:35px}
.returning .auth-story {
  display:none}
.auth-footer-note {
  max-width:410px;
  text-align:center;
  margin:22px auto 0;
  font-size:12px;
  line-height:1.7;
  color:var(--muted)}

/* Align the two signup labels with the card's 34px inset + 1px border. */
@media(min-width:721px) {
  body:not(.returning) .auth-main {align-items:start}
  body:not(.returning) .auth-story {padding-top:35px}
}

@media(min-width:1400px) {
  .hero {
  padding-top:92px;
  padding-bottom:85px}
}

@media(max-width:1000px) {
  .hero {
  gap:35px}
.shell {
  width:calc(100% - 56px)}
.hero h1 {
  font-size:52px}
.auth-main {
  gap:50px}
.auth-story h1 {
  font-size:42px}
.steps {
  gap:25px}
}

@media(max-width:720px) {
  .shell {
  width:calc(100% - 40px)}
.site-header {
  padding:23px 0}
.brand {
  font-size:29px;
  gap:7px}
.brand img {
  width:25px;
  height:25px}
.nav {
  gap:16px;
  font-size:13px}
.nav .desktop-link {
  display:none}
.nav .button.small {
  min-height:38px;
  font-size:12px;
  padding:8px 12px}
.hero {
  grid-template-columns:1fr;
  padding:43px 0 29px;
  gap:27px}
.hero h1 {
  font-size:51px;
  letter-spacing:-2px;
  margin-bottom:20px}
.hero .intro {
  font-size:15px;
  line-height:1.75;
  margin-bottom:24px}
.eyebrow {
  font-size:10px;
  letter-spacing:1.6px;
  margin-bottom:18px}
.hero .quiet {
  font-size:11px}
.preview-wrap {
  max-width:440px;
  width:100%;
  margin:auto;
  padding:19px 7px 12px}
.preview-wrap:before {
  inset:0 0 12px}
.schedule-top {
  padding:16px 20px}
.schedule-top h2 {
  font-size:25px}
.schedule-tabs {
  padding-left:20px;
  gap:22px}
.day {
  padding:15px 20px 10px}
.lesson {
  padding:0 20px 8px}
.schedule-bottom {
  margin-left:20px;
  margin-right:20px}
.preview-caption {
  margin-top:17px}
.how {
  padding:30px 0}
.section-heading {
  display:block;
  margin-bottom:25px}
.section-heading h2 {
  font-size:26px}
.section-heading p {
  margin-top:9px}
.steps {
  grid-template-columns:1fr;
  gap:23px}
.steps article {
  position:relative;
  padding-left:36px}
.step-number {
  position:absolute;
  left:0;
  top:3px}
.steps h3 {
  font-size:19px;
  margin-bottom:5px}
.steps p {
  max-width:none;
  font-size:13px}
.student-note {
  padding:22px;
  display:block;
  margin-bottom:28px}
.student-note h2 {
  font-size:22px}
.student-note .button {
  margin-top:17px;
  min-height:43px}
.site-footer {
  align-items:flex-start;
  font-size:10px;
  padding-top:20px}
.site-footer p:last-child {
  max-width:205px;
  text-align:right}
.auth-main {
  grid-template-columns:1fr;
  gap:27px;
  margin:38px auto 45px;
  min-height:0}
.auth-story h1 {
  font-size:39px;
  margin-bottom:15px}
.auth-story>p:not(.eyebrow) {
  font-size:14px;
  margin-bottom:21px}
.setup-steps {
  gap:15px}
.setup-steps li {
  font-size:12px}
.setup-steps strong {
  font-size:13px}
.auth-card {
  padding:25px}
.auth-card h2 {
  font-size:27px}
.returning .auth-main {
  margin:42px auto 65px;
  min-height:0}
.returning .auth-card {
  padding:27px}
.auth-footer-note {
  font-size:11px}
}

/* Phone captions sit below the card without a decorative backing behind them. */
@media(max-width:600px) {
  .preview-wrap:before {display:none}
  .preview-wrap .schedule {box-shadow:0 6px 12px #422b2010}
  .preview-caption {margin-top:36px;font-size:11px;line-height:1.6;letter-spacing:.2px}
  .preview-caption > span {display:block}
  .preview-caption > span:last-child {margin-top:2px}
  .preview-caption .caption-divider {display:none}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
.enter {
  animation:none}
.button {
  transition:none}
}


@media(max-width:380px) {
  .site-header {
  gap:12px}
.brand {
  font-size:25px}
.brand img {
  width:23px;
  height:23px}
.nav {
  gap:10px}
.nav .button.small {
  padding:8px 10px}
.hero h1 {
  font-size:43px}
}