/* TestSprout marketing site (F3b). Design G1: the take-home folder on paper; green is the
   folder, not the room. Brand: brand/ (guidelines at /brand/). Fonts come from
   /brand/fonts.css, served by the site. Light tokens on :root; dark tokens in both the
   prefers-color-scheme block and [data-theme="dark"], so the header switch wins both ways.
   Sheets stay white paper in both themes, so text inside them uses the fixed ink colors. */
:root {
  --brand: #2D5643; --sheet: #FFFFFF; --ink: #1F2A24; --stone: #5E5A52; --mist: #E4EFE8; --leaf: #8CC7A4; --sunny: #F2B544; --sky: #2F6E9E; --clay: #B24A30;
  --display: "Quicksand", "Nunito", system-ui, sans-serif; --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --reader: "Andika", "Nunito", system-ui, sans-serif;
  --page: #F7F5F0; --on-page: #1F2A24; --on-page-soft: #5E5A52; --accent: #2D5643; --rule: #DAD6CC; --link: #2D5643;
  --tab: #E4EFE8; --on-tab: #1F2A24; --tab-on: #2D5643; --on-tab-on: #FFFFFF;
  --home: #2D5643; --on-home: #FFFFFF; --on-home-soft: #DCEBE2; --home-mark: #F2B544; --home-dot: #F2B544;
  --school: #2D5643; --on-school: #FFFFFF; --on-school-soft: #DCEBE2; --school-mark: #F2B544; --school-dot: #8CC7A4;
  --btn: #2D5643; --on-btn: #FFFFFF; --ghost: #2D5643; --ghost-fill: transparent; --ghost-ink: #2D5643; --pocket-btn: #F2B544; --on-pocket-btn: #1F2A24; --pocket-ghost: #8CC7A4; --pocket-ghost-ink: #FFFFFF;
  --switch: #C9CEC7; --switch-knob: #FFFFFF;
  --signin-bg: #E4EFE8; --signin-bg-hover: #D3E6DA; --signin-edge: #5F8A74; --signin-ink: #2D5643;
  --sheet-shadow: 0 0 0 1px #E2DED4, 0 18px 40px -26px rgba(31,42,36,.45);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --page: #14231C; --on-page: #EEF3EF; --on-page-soft: #B9C6BE; --accent: #F2B544; --rule: #2F4639; --link: #8CC7A4;
  --tab: #1F3A2D; --on-tab: #EEF3EF; --tab-on: #F2B544; --on-tab-on: #14231C;
  --btn: #F2B544; --on-btn: #14231C; --ghost: #8CC7A4; --ghost-fill: #8CC7A4; --ghost-ink: #14231C; --pocket-ghost: #8CC7A4; --pocket-ghost-ink: #14231C;
  --switch: #F2B544; --switch-knob: #14231C;
  --signin-bg: #2A4A3A; --signin-bg-hover: #33594A; --signin-edge: #8CC7A4; --signin-ink: #C4E6D2;
  --sheet-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --page: #14231C; --on-page: #EEF3EF; --on-page-soft: #B9C6BE; --accent: #F2B544; --rule: #2F4639; --link: #8CC7A4;
  --tab: #1F3A2D; --on-tab: #EEF3EF; --tab-on: #F2B544; --on-tab-on: #14231C;
  --btn: #F2B544; --on-btn: #14231C; --ghost: #8CC7A4; --ghost-fill: #8CC7A4; --ghost-ink: #14231C; --pocket-ghost: #8CC7A4; --pocket-ghost-ink: #14231C;
  --switch: #F2B544; --switch-knob: #14231C;
  --signin-bg: #2A4A3A; --signin-bg-hover: #33594A; --signin-edge: #8CC7A4; --signin-ink: #C4E6D2;
  --sheet-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
  color-scheme: dark; }

* { box-sizing: border-box; }
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none !important; } :root:not([data-theme="light"]) .logo-dark { display: block !important; } }
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }
[hidden] { display: none !important; }
html { background: var(--page); }
body { margin: 0; background: var(--page); color: var(--on-page); font: 400 1.0625rem/1.6 var(--body); padding-inline: max(16px, 4vw); padding-block: 0 48px; }
::selection { background: var(--sunny); color: var(--ink); }
a { color: var(--link); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--sunny); outline-offset: 3px; border-radius: 4px; }
.sheet :focus-visible, .note :focus-visible { outline-color: var(--sky); }
.wrap { max-width: 1180px; margin-inline: auto; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--sheet); color: var(--ink); padding: .5rem .75rem; border-radius: .5rem; z-index: 10; }
.skip:focus { left: .5rem; }

/* Header: logo, the theme switch and sign in, then the folder tabs */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-top: 22px; }
.top .brand { display: block; line-height: 0; max-width: 100%; }
.top .brand img { height: 72px; width: auto; max-width: 100%; display: block; }
@media (max-width: 460px) { .top .brand { width: 100%; } .top .brand img { height: auto; width: 100%; } }
.top-actions { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
/* Sign in (Open the app when signed in) is a tinted button, apart from the green page actions;
   Log out, shown only when signed in, is outline only. */
.signin, .signout { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid; font: 800 .95rem/1 var(--body); text-decoration: none; cursor: pointer; transition: background .2s, transform .2s cubic-bezier(.2,.8,.2,1); }
.signin { background: var(--signin-bg); border-color: var(--signin-edge); color: var(--signin-ink); }
.signin:hover { background: var(--signin-bg-hover); transform: translateY(-2px); }
.signout { background: transparent; border-color: var(--on-page-soft); color: var(--on-page); }
.signout:hover { border-color: var(--on-page); transform: translateY(-2px); }
.signout:disabled { opacity: .6; cursor: default; transform: none; }
.theme-toggle { display: inline-flex; align-items: center; gap: 10px; font: 700 .9rem/1 var(--body); color: var(--on-page); background: transparent; border: 0; padding: 8px 4px; cursor: pointer; }
.theme-toggle .switch { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--switch); transition: background .2s; flex: none; }
.theme-toggle .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--switch-knob); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.theme-toggle[aria-pressed="true"] .switch::after { transform: translateX(18px); }
.theme-toggle .switch svg { position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; fill: var(--brand); z-index: 1; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.theme-toggle[aria-pressed="true"] .switch svg { transform: translateX(18px); fill: var(--sunny); }
nav.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
nav.tabs a { display: inline-flex; align-items: center; text-decoration: none; padding: 10px 14px 9px; background: var(--tab); border-radius: 10px 10px 0 0; font: 800 .85rem/1 var(--body); letter-spacing: .02em; color: var(--on-tab); transition: background .2s, transform .2s; }
nav.tabs a:hover, nav.tabs a[aria-current="page"] { background: var(--tab-on); color: var(--on-tab-on); }
nav.tabs a:hover { transform: translateY(-3px); }
.tabs-rule { height: 6px; background: var(--tab); border-radius: 0 0 4px 4px; }

/* Hero: one line outranks everything */
.hero { padding-block: 84px 28px; padding-block: clamp(36px, 7vw, 84px) 28px; }
.hero h1 { font: 700 5.6rem/1 var(--display); font-size: clamp(2.6rem, 7vw, 5.6rem); letter-spacing: -.025em; margin: 0; max-width: 15ch; text-wrap: balance; }
.hero.page { padding-block: 56px 4px; padding-block: clamp(30px, 5vw, 56px) 4px; }
.hero.page h1 { font-size: 3.6rem; font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 22ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .sub { max-width: 56ch; margin: 22px 0 0; font-size: 1.2rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--on-page-soft); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 800 1.05rem/1 var(--body); padding: 17px 24px; border-radius: 999px; text-decoration: none; border: 2px solid transparent; transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s; }
.btn.primary { background: var(--btn); color: var(--on-btn); }
.btn.primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn.ghost { background: var(--ghost-fill); border-color: var(--ghost); color: var(--ghost-ink); }
.btn.ghost:hover { transform: translateY(-2px); }
/* Buttons on a white sheet keep the light look in both themes. */
.sheet .btn.primary { background: var(--brand); color: #FFFFFF; }
.sheet .btn.ghost { background: transparent; border-color: var(--brand); color: var(--brand); }
.pocket .btn.primary { background: var(--pocket-btn); color: var(--on-pocket-btn); }
.pocket .btn.ghost { border-color: var(--pocket-ghost); color: var(--pocket-ghost-ink); }

/* The open folder: two pockets with sheets tucked in */
.folder { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; gap: clamp(14px, 2.4vw, 30px); margin-top: 56px; margin-top: clamp(30px, 5vw, 56px); }
.folder:has(> .pocket-col:only-child) { grid-template-columns: minmax(0, 620px); }
.pocket-col { position: relative; padding-top: 120px; min-width: 0; }
.pocket { position: relative; z-index: 2; background: var(--pk); color: var(--on-pk); border-radius: 0 0 18px 18px; padding: 70px 34px 30px; padding: 70px clamp(18px, 3vw, 34px) 30px; box-shadow: 0 -10px 24px -14px rgba(0,0,0,.45); }
.pocket::before { content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px; background: var(--pk); clip-path: path("M0 40 C 140 40 180 6 300 6 C 420 6 460 40 1200 40 L 1200 41 L 0 41 Z"); }
.pocket h2 { font: 700 2.1rem/1.1 var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.02em; margin: 0 0 6px; }
.pocket .where { font: 800 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--pk-mark); margin: 0 0 14px; }
.pocket p { margin: 0 0 18px; color: var(--on-pk-soft); max-width: 46ch; }
.pocket .dots { margin: 0 0 22px; }
.pocket .dots svg { fill: var(--pk-dot); }
.pocket-col.home { --pk: var(--home); --on-pk: var(--on-home); --on-pk-soft: var(--on-home-soft); --pk-mark: var(--home-mark); --pk-dot: var(--home-dot); }
.pocket-col.school { --pk: var(--school); --on-pk: var(--on-school); --on-pk-soft: var(--on-school-soft); --pk-mark: var(--school-mark); --pk-dot: var(--school-dot); }
.pocket .btn { font-size: .95rem; padding: 13px 18px; }
.tucked { position: absolute; top: 0; left: 6%; right: 10%; z-index: 1; background: var(--sheet); color: var(--ink); border-radius: 6px; padding: 14px 16px 120px; transform: rotate(-2.2deg); box-shadow: 0 10px 26px -12px rgba(0,0,0,.5); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.pocket-col.school .tucked { left: 12%; right: 4%; transform: rotate(1.8deg); }
.pocket-col:hover .tucked { transform: translateY(-14px) rotate(-1deg); }
.pocket-col.school:hover .tucked { transform: translateY(-14px) rotate(.8deg); }
/* A tucked sheet shown on its own (the teacher page) sits flat inside the sheet. */
.duo > .tucked { position: static; transform: rotate(1.2deg); padding-bottom: 16px; align-self: center; }

/* Lists with a dot */
.dots { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; }
.dots li { display: flex; gap: 10px; align-items: baseline; }
.dots svg { flex: none; width: 14px; height: 14px; translate: 0 2px; fill: var(--brand); }
.sheet .dots li span { color: var(--ink); }

.mini { margin-top: 12px; display: grid; gap: 7px; }
.mini .row { display: grid; grid-template-columns: 9.5em 1fr 2.4em; gap: 8px; align-items: center; font: 600 .78rem/1 var(--body); }
.mini .bar { height: 9px; background: var(--mist); border-radius: 9px; overflow: hidden; }
.mini .bar i { display: block; height: 100%; background: var(--brand); border-radius: 9px; }
.mini .row.low .bar i { background: var(--sunny); }
.mini .n { font-variant-numeric: tabular-nums; text-align: right; color: var(--stone); }
.roster { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.roster div { display: flex; gap: 8px; align-items: center; font: 600 .8rem/1.1 var(--body); background: var(--mist); border-radius: 8px; padding: 7px; }
.roster svg { width: 24px; height: 24px; flex: none; }
.synthetic { font: 700 .72rem/1 var(--body); color: var(--stone); margin: 10px 0 0; letter-spacing: .04em; }
.ann { font: 700 1.05rem/1.2 var(--display); color: var(--brand); margin: 10px 0 0; transform: rotate(-1.5deg); }

/* Sheets: white paper pulled out of the folder */
.sheet { background: var(--sheet); color: var(--ink); border-radius: 8px; padding: 46px; padding: clamp(22px, 4vw, 46px); margin-top: 64px; margin-top: clamp(32px, 6vw, 64px); box-shadow: var(--sheet-shadow); scroll-margin-top: 20px; }
.hero.page + .sheet, .hero.page + .plans, .hero.page + .story { margin-top: 32px; }
.sheet a { color: var(--sky); }
.sheet h2 { font: 700 3rem/1.06 var(--display); font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.02em; margin: 0 0 14px; max-width: 22ch; text-wrap: balance; color: var(--ink); }
.sheet h3 { font: 800 1.2rem/1.2 var(--body); margin: 22px 0 10px; color: var(--ink); }
.sheet p { color: var(--stone); max-width: 64ch; }
.sheet .lede { margin: 0 0 24px; font-size: 1.1rem; }
.sheet .more { margin: 22px 0 0; font-weight: 700; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; gap: clamp(18px, 3vw, 40px); }
.trio h3 { font: 700 1.35rem/1.15 var(--display); margin: 0 0 8px; }
.trio p { margin: 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); padding: 0; margin: 0; counter-reset: s; }
.steps li { list-style: none; padding: 18px 18px 6px 0; min-width: 0; }
.steps li::before { counter-increment: s; content: counter(s); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); font: 700 1rem/1 var(--display); margin-bottom: 12px; }
.steps li:nth-child(1)::before { background: var(--sunny); border-color: var(--sunny); }
.steps h3 { font: 800 1.15rem/1.2 var(--body); margin: 0 0 6px; }
.steps p { margin: 0; font-size: .98rem; }

/* Test mirror: a Star-style item */
.mirror, .duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; gap: clamp(20px, 4vw, 48px); align-items: center; }
.duo { align-items: start; }
.item { border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; color: var(--ink); }
.item-bar { display: flex; justify-content: space-between; align-items: center; background: var(--mist); padding: 10px 14px; font: 800 .8rem/1 var(--body); }
.item-bar .clock { display: inline-flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.item-q { padding: 20px 18px 6px; font: 700 1.25rem/1.35 var(--reader); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px 18px; }
.choice { display: flex; align-items: center; gap: 10px; border: 2px solid #C9CEC7; border-radius: 10px; padding: 12px; font: 700 1.2rem/1 var(--reader); background: #FFFFFF; cursor: pointer; text-align: left; color: var(--ink); }
.choice .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--stone); flex: none; display: grid; place-items: center; font: 800 .72rem/1 var(--body); color: var(--stone); }
.choice[aria-checked="true"] { border-color: var(--brand); background: var(--mist); }
.choice[aria-checked="true"] .dot { background: var(--brand); border-color: var(--brand); color: #FFFFFF; }
.item-foot { display: flex; justify-content: flex-end; padding: 0 18px 18px; }
.next { font: 800 1rem/1 var(--body); background: var(--sky); color: #FFFFFF; border-radius: 8px; padding: 12px 22px; }
.facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #DDE2DB; }
.facts b { font: 800 .78rem/1.5 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }

/* A sample weekly summary */
.summary-card { border: 2px solid var(--ink); border-radius: 12px; padding: 16px 18px; color: var(--ink); }
.summary-card dl { margin: 14px 0 0; display: grid; gap: 10px; }
.summary-card dl > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #DDE2DB; }
.summary-card dt { font: 800 .78rem/1.5 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.summary-card dd { margin: 0; }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; gap: clamp(16px, 3vw, 30px); }
.plans .sheet { margin-top: 0; display: flex; flex-direction: column; }
.hero.page + .plans { margin-top: 32px; }
.plans .sheet .actions { margin-top: auto; padding-top: 12px; }
.plan.featured { box-shadow: 0 0 0 3px var(--brand), var(--sheet-shadow); }
.price { margin: 0 0 4px; color: var(--ink) !important; font: 700 1.1rem/1.2 var(--body); }
.price .amount { font: 700 3rem/1 var(--display); letter-spacing: -.02em; }
.price-alt { margin: 0 0 22px; }

/* FAQ */
.faq details { border-bottom: 1px solid #DDE2DB; padding: 4px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font: 700 1.2rem/1.3 var(--display); padding: 14px 0; color: var(--ink); list-style-position: outside; margin-left: 1.1em; }
.faq details p { margin: 0 0 16px; }
.hero .sub a { color: var(--link); }

/* Founder note */
.story { margin-top: 64px; margin-top: clamp(32px, 6vw, 64px); scroll-margin-top: 20px; }
.note { background: #FBFCFA; font: 400 1.25rem/1.6 var(--reader); padding: 44px; padding: clamp(24px, 4vw, 44px); border-radius: 8px; color: var(--ink); box-shadow: var(--sheet-shadow); }
.note p { margin: 0 0 18px; max-width: 58ch; }
.note .sig { font-weight: 700; margin: 0; }

.close { padding-block: 110px 20px; padding-block: clamp(56px, 9vw, 110px) 20px; }
.close h2 { font: 700 4.4rem/1.02 var(--display); font-size: clamp(2.2rem, 6vw, 4.4rem); letter-spacing: -.025em; margin: 0; max-width: 16ch; text-wrap: balance; }

/* Footer */
footer { border-top: 1px solid var(--rule); margin-top: 64px; padding-top: 28px; font-size: .9rem; color: var(--on-page-soft); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; }
footer h2 { font: 800 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--on-page); margin: 0 0 12px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer a { color: var(--on-page-soft); }
footer a:hover { color: var(--on-page); }
.ad-choices { font: inherit; color: var(--on-page-soft); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.ad-choices:hover:not(:disabled) { color: var(--on-page); }
.ad-choices:disabled { cursor: default; text-decoration: none; }
.disclaimer { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }

@media (max-width: 820px) {
  .folder, .mirror, .duo, .plans { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .pocket-col { padding-top: 104px; }
}
@media (max-width: 460px) {
  .steps { grid-template-columns: 1fr; }
  .roster { grid-template-columns: 1fr 1fr; }
  .mini .row { grid-template-columns: 7.5em 1fr 2.2em; }
  .facts li, .summary-card dl > div { grid-template-columns: 1fr; gap: 2px; }
  .choices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }