/* LiteracyLab AI: the Notebook look for the home page. Loads after theme.css and the page's own styles, so it only
   restyles; the markup, links and scripts of the page do the work. The logo lockup is not touched. */

/* ---------- type ---------- */
h3, h4, .price-amount, .tier-panel .t-title, .step h4{ font-family: var(--serif-display); font-weight: 500; letter-spacing: 0; line-height: 1.25; }
.eyebrow{ font-family: var(--mono-label); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; color: var(--ink); }
.eyebrow::before{ display: none; }

/* ---------- buttons: round pills ---------- */
.btn{ border-radius: 999px; }
.btn-ghost{ border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- nav ---------- */
.nav{ border-bottom-color: var(--border); }
.nav-links{ font-family: var(--mono-label); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; color: var(--ink); }

/* ---------- hero ---------- */
.hero{ padding-top: 56px; padding-bottom: 56px; }
.hero-inner{ text-align: left; }
.hero-grid{ display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 920px){ .hero-grid{ grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.hero h1{ font-size: clamp(40px, 5.8vw, 76px); line-height: 1.2; font-weight: 400 !important; margin-top: 20px; }
.hero-sub{ margin: 22px 0 0; max-width: 560px; font-family: "Lexend", sans-serif; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.hero-ctas{ justify-content: flex-start; }
.hero-meta{ margin-top: 14px; }

.aud-label{ margin: 30px 0 10px; font-family: var(--mono-label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.aud{ display: flex; gap: 10px; flex-wrap: wrap; }
.aud button, .plate-tabs button{
  font-family: "Lexend", sans-serif; font-size: 15px; font-weight: 500; min-height: 46px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
}
.aud button[aria-pressed="true"], .plate-tabs button[aria-pressed="true"]{ background: var(--ink); color: var(--bg); }
.aud button:focus-visible, .plate-tabs button:focus-visible, .where-tabs button:focus-visible, .plate-next:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-ctas{ margin-top: 26px; }

/* the teaching plate */
.plate-tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.plate-tabs button{ font-family: var(--mono-label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 16px; min-height: 44px; }
.plate{ margin: 0; background: var(--surface-2); padding: 22px; border-radius: 2px; }
.plate svg{ display: block; width: 100%; height: auto; }
.plate svg [hidden]{ display: none; }
.plate .rule{ stroke: var(--border); stroke-width: 1; }
.plate .child{ font-family: var(--serif-display); font-style: italic; font-size: 31px; fill: var(--ink); }
.plate .mark{ fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.plate .mark-fill{ fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: none; }
.plate .mark-dash{ stroke-dasharray: 7 5; }
.plate .tag-bg{ fill: var(--accent); }
.plate .note{ font-family: var(--mono-label); font-size: 16px; fill: var(--ink); }
.plate .note-label{ font-family: var(--mono-label); font-size: 13px; letter-spacing: 1.4px; font-weight: 700; fill: var(--bg); }
.plate-foot{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; }
.plate-cap{ font-family: var(--mono-label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.plate-next{ background: none; border: 0; padding: 10px 0; min-height: 44px; font-family: "Lexend", sans-serif; font-size: 15px; font-weight: 500; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.aud-card{ margin-top: 22px; border: 1px solid var(--border); background: var(--surface); padding: 20px 22px; }
.aud-card[hidden]{ display: none; }
.aud-card .k{ font-family: var(--mono-label); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; display: block; }
.aud-card .row{ font-family: "Lexend", sans-serif; font-size: 14.5px; margin: 0 0 4px; }
.aud-card .row span{ color: var(--ink-soft); }
.aud-card .meter{ height: 10px; border-radius: 6px; background: var(--surface-2); margin-bottom: 14px; overflow: hidden; }
.aud-card .meter i{ display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.aud-card .small{ font-family: "Lexend", sans-serif; font-size: 14.5px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.aud-card .word{ font-family: var(--serif-display); font-size: 34px; line-height: 1.2; margin: 0 0 6px; font-weight: 500; }
.aud-card .ex{ font-family: var(--serif-display); font-size: 19px; font-style: italic; color: var(--ink-soft); margin: 4px 0 0; }

/* ---------- sections ---------- */
section{ padding-block: 88px; }
@media (max-width: 640px){ section{ padding-block: 56px; } }
.section-head{ max-width: 760px; }
.section-head h2{ font-size: clamp(34px, 4.8vw, 58px); line-height: 1.22; font-weight: 400 !important; margin-top: 14px; }
.section-head p{ font-family: "Lexend", sans-serif; font-size: 16.5px; }
.section-alt{ background: var(--surface-2); border-color: var(--border); }
.final-cta{ background: var(--ink); color: var(--bg); border-top: 0; }
.final-cta h2{ font-weight: 400 !important; font-size: clamp(36px, 5.4vw, 66px); line-height: 1.22; }
.final-cta p{ color: color-mix(in srgb, var(--bg) 80%, transparent); font-family: "Lexend", sans-serif; }
.final-cta .btn-primary{ background: var(--bg); color: var(--ink); }
.final-cta .btn-primary:hover{ background: var(--surface); }

/* where it applies */
.where{ margin-top: 40px; }
.where-tabs{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.where-tabs button{
  font-family: "Lexend", sans-serif; font-size: 15px; font-weight: 500; min-height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
}
.where-tabs button[aria-pressed="true"]{ background: var(--ink); color: var(--bg); }
.where-facts{ margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--border); }
@media (max-width: 780px){ .where-facts{ grid-template-columns: minmax(0, 1fr); } }
.where-facts > div{ padding: 26px 28px 26px 0; }
.where-facts > div + div{ padding-left: 28px; border-left: 1px solid var(--border); }
@media (max-width: 780px){ .where-facts > div + div{ padding-left: 0; border-left: 0; border-top: 1px solid var(--border); } }
.where-facts dt{ font-family: var(--mono-label); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.where-facts dd{ margin: 0; font-family: var(--serif-display); font-size: clamp(26px, 2.8vw, 34px); line-height: 1.24; font-weight: 500; }

/* ---------- how it works: ruled columns, not boxes ---------- */
.steps{ gap: 0; border-top: 1px solid var(--ink); }
.step{ border: 0; border-radius: 0; background: transparent; padding: 26px 28px 8px 0; }
.step + .step{ padding-left: 28px; border-left: 1px solid var(--border); }
@media (max-width: 760px){ .step + .step{ padding-left: 0; border-left: 0; border-top: 1px solid var(--border); } }
.step-num{ font-family: var(--mono-label); font-weight: 400; color: var(--ink); letter-spacing: 0.1em; }
.step h4{ font-size: 32px; line-height: 1.2; margin-top: 14px; }
.step p{ font-size: 15px; }

/* ---------- flatter panels ---------- */
.compare, .faq-item, .tier-panel, .price-card, .plan-table-scroll, .pv-card{ border-radius: 4px; }
.price-amount{ font-weight: 500; }
.trust-item{ border-color: var(--border); }
.tier-tabs{ border-color: var(--ink); background: transparent; }

.final-cta .hero-ctas{ justify-content: center; }

/* ---------- the plan comparison ----------
   A decision table: plan names and prices on top, the checks centred under them, only what DIFFERS between plans by
   default (rows that are the same in every plan are tucked away behind one button), ticks instead of the word "Yes",
   hairlines instead of boxes, and one quiet highlight for the most popular plan. */
.plan-compare{ position: relative; }
.plan-note{ margin: 0 0 14px; font-family: var(--mono-label); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-align: center; }
.plan-table tr.is-folded{ display: none; }
.sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.plan-table-scroll{ border: 0; border-radius: 0; background: transparent; border-top: 1px solid var(--ink); }
.plan-table th, .plan-table td{ padding: 18px 16px; font-size: 15px; border-top: 1px solid var(--border-soft); vertical-align: middle; }
.plan-table thead th{
  background: transparent; border-top: 0; border-bottom: 1px solid var(--ink);
  font-family: var(--serif-display); font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-align: center; padding: 26px 16px 18px;
}
.plan-table thead th{ vertical-align: bottom; }
.plan-table thead th:first-child{ text-align: left; font-family: var(--mono-label); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: bottom; }
.plan-table thead th span{ font-family: "Lexend", sans-serif; font-size: 14px; font-weight: 500; color: var(--ink-soft); margin-top: 6px; }
.plan-table th[scope="row"]{ font-weight: 500; font-size: 15.5px; line-height: 1.4; }
.plan-table td{ text-align: center; color: var(--ink); }
.plan-table td svg{ display: inline-block; vertical-align: middle; color: var(--good); }
.plan-table td .dash{ color: var(--ink-faint); }
.plan-table .col-best{ background: color-mix(in srgb, var(--accent) 7%, transparent); }
.plan-table thead .col-best{ background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--ink); }
.plan-table thead .col-best::before{ content: "MOST POPULAR"; display: block; margin-bottom: 8px; font-family: var(--mono-label); font-size: 10.5px; letter-spacing: 0.12em; color: var(--accent-ink); font-weight: 700; }
.plan-table tbody tr.group-head th{
  background: transparent; border-top: 1px solid var(--ink); padding: 18px 16px; text-align: left;
  font-family: var(--mono-label); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
.plan-table tbody tr.group-head + tr th, .plan-table tbody tr.group-head + tr td{ border-top: 0; }
.plan-table .yes, .plan-table .no{ font-weight: 400; }
.plan-sec-btn{ all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.plan-sec-btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-sec-btn svg{ transition: transform .15s ease; }
.plan-sec-btn[aria-expanded="true"] svg{ transform: rotate(180deg); }
.plan-toggle-wrap{ text-align: center; margin-top: 22px; }
.plan-toggle{
  font-family: "Lexend", sans-serif; font-size: 15px; font-weight: 500; min-height: 46px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
}
.plan-toggle:hover{ background: var(--ink); color: var(--bg); }
.plan-toggle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 720px){
  .plan-table-scroll{ border-top: 0; }
  .plan-table tr{ border-radius: 4px; background: var(--surface); }
  .plan-table td{ text-align: left; }
  .plan-table tbody tr.group-head{ margin: 30px 0 10px; }
  .plan-table tbody tr.group-head th{ padding: 0 2px; border-top: 0; }
}

/* Pricing table text: every value in the full ink colour (the Free column and "no" cells used to be dimmer, which was
   hard to read in dark mode), a slightly larger size, and a stronger tick. */
.plan-table td, .plan-table td.yes, .plan-table td.no{ color: var(--ink); font-size: 15.5px; }
.plan-table td .dash{ color: var(--ink-soft); }
.plan-table td svg{ stroke-width: 2.8; }
.plan-table th[scope="row"]{ color: var(--ink); }
.plan-table thead th span{ color: var(--ink); opacity: 0.85; }

/* Desktop: the table shares the pricing cards' three-column grid (same width, same gap), so Free, Core and
   Premium line up directly under their cards. Each feature name sits on a line of its own with the three answers
   beneath it. The Core highlight is painted as one continuous band behind the rows. Phones keep the card layout above. */
@media (min-width: 721px){
  .plan-table{ --c1: calc((100% - 2 * var(--plan-gap)) / 3 + var(--plan-gap)); --c2: calc((100% - 2 * var(--plan-gap)) * 2 / 3 + var(--plan-gap)); --best: color-mix(in srgb, var(--accent) 7%, transparent); }
  .plan-table-scroll{ overflow: visible; }
  .plan-table, .plan-table thead, .plan-table tbody{ display: block; min-width: 0; }
  .plan-table tr{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--plan-gap); background: linear-gradient(to right, transparent var(--c1), var(--best) var(--c1) var(--c2), transparent var(--c2)); }
  .plan-table .col-best, .plan-table thead .col-best{ background: transparent; }
  .plan-table thead th:first-child{ position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .plan-table tbody tr:not(.group-head){ border-top: 1px solid var(--border-soft); }
  .plan-table tbody tr.group-head{ display: block; background: none; border-top: 0; }
  .plan-table tbody tr.group-head + tr{ border-top: 0; }
  .plan-table th[scope="row"]{ grid-column: 1 / -1; width: auto; padding: 16px 16px 2px; border-top: 0; }
  .plan-table td{ width: auto; padding: 6px 16px 16px; border-top: 0; }
  .plan-table thead tr{ border-bottom: 1px solid var(--ink); }
  .plan-table thead th{ border-bottom: 0; }
  .plan-table tbody tr.group-head th{ display: block; padding: 18px 16px; }
}