/* SayMath website.
   Built the way desktop software vendors build download sites (Zotero, Alfred, Obsidian, VS Code,
   Blender, RStudio): the product named plainly with its icon, one download button with the file's
   facts beside it, real-looking product scenes, plain feature sections, tables, requirements, release
   notes.
   The look comes from where SayMath is used: a desk at night, a laptop next to a notebook of
   problem sets written in blue ballpoint. So the page is white graph paper and the ink is the
   Israel-flag blue of the brand (#0038B8). The pictures are the product at work and real data (the
   keys SayMath types, the waveform of a real recording), not stock photos.
   Type: Source Sans 3 for text, Source Code Pro for file names, keys and code.
   Contrast (WCAG formula), worst case over a graph-paper line (#E0E7F6): ink 13.72:1, muted 5.72:1,
   blue links 7.50:1. On white: ink 17.02:1, muted 7.10:1, blue 9.30:1; on the tinted sections
   (#F3F6FC): muted 6.56:1. White on the blue button 9.30:1 (hover 11.87:1). Form field borders
   3.92:1. */

:root {
  --paper: #FFFFFF;
  --ink: #0B1B3B;
  --muted: #4A5878;
  --blue: #0038B8;
  --blue-deep: #002C91;
  --rule: #D5DDEC;
  --soft: #F3F6FC;
  --field: #74819C;
  --grid-major: rgba(0, 56, 184, 0.12);
  --grid-minor: rgba(0, 56, 184, 0.055);
  --shadow: 0 1px 2px rgba(11, 27, 59, 0.08), 0 18px 48px rgba(0, 32, 110, 0.16);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --wrap: 1080px;
  font-size: 100%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--blue); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.mono { font-family: "Source Code Pro", Menlo, monospace; font-size: 0.92em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip { position: absolute; left: 12px; top: -48px; background: var(--ink); color: #FFFFFF; padding: 8px 14px; z-index: 5; }
.skip:focus { top: 12px; }

/* Graph paper: a 24 px minor grid and a 120 px major grid in faint blue. */
.graph-paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}

/* Header: stays at the top; a hairline shadow appears once the page has moved under it. */
.site-header { border-bottom: 1px solid var(--rule); background: rgba(255, 255, 255, 0.94); position: sticky; top: 0; z-index: 3;
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow 0.25s var(--ease-out); }
.site-header.scrolled { box-shadow: 0 1px 0 rgba(11, 27, 59, 0.04), 0 6px 18px rgba(0, 32, 110, 0.08); }
/* Sections land clear of the sticky header. */
[id] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.header-row { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.logo img { border-radius: 6px; }
.site-header nav { display: flex; gap: 26px; }
/* The underline draws in from the left, like a pen stroke under the word. */
.site-header nav a { color: var(--muted); text-decoration: none; font-size: 1rem; padding: 4px 0;
  background: linear-gradient(var(--blue), var(--blue)) left bottom / 0 2px no-repeat;
  transition: color 0.15s, background-size 0.3s var(--ease-out); }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--ink); background-size: 100% 2px; }

/* Hero: icon, name, what it is, download, then the product at work. */
.hero { padding-top: 60px; overflow: hidden; }
.hero-head { text-align: center; }
.app-icon { display: block; margin: 0 auto 20px; border-radius: 25px; box-shadow: 0 2px 4px rgba(0, 32, 110, 0.12), 0 16px 36px rgba(0, 32, 110, 0.22); }
.hero h1 { margin: 0 0 14px; font-size: 2.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.005em; }
.intro { max-width: 40rem; margin: 0 auto 30px; color: var(--muted); font-size: 1.25rem; }
/* Text over the grid sits on a white halo so no grid line runs through a letter. */
.hero-head h1, .hero-head p { text-shadow: 0 0 6px var(--paper), 0 0 12px var(--paper); }
.download { margin-bottom: 52px; }

.button {
  display: inline-block; border: 0; border-radius: 6px; padding: 13px 28px;
  font: 600 1.125rem/1.2 "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  text-decoration: none; cursor: pointer;
}
.button-blue { background: var(--blue); color: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 56, 184, 0.28);
  transition: background-color 0.15s, box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out); }
/* Hover lifts the button a pixel with a deeper shadow; a press settles it back down. */
.button-blue:hover { background: var(--blue-deep); text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 56, 184, 0.34); }
.button-blue:active { transform: translateY(0) scale(0.99); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 56, 184, 0.26);
  transition-duration: 0.08s; }
.button-blue:disabled { opacity: 0.6; cursor: wait; }

.file-facts { margin: 14px 0 0; color: var(--muted); font-size: 0.95rem; }

/* After the download starts: the three steps to install, unfolding under the button. */
.next-steps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); max-width: 34rem; margin: 0 auto; }
.next-steps.open { grid-template-rows: 1fr; }
.next-steps > div { overflow: hidden; }
.next-steps ol { margin: 18px 0 4px; padding: 16px 20px 16px 44px; text-align: left; background: #FFFFFF; border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: var(--shadow); color: var(--ink); font-size: 1rem; }
.next-steps li + li { margin-top: 6px; }
.next-steps .lead { font-weight: 600; }
.referral { margin: 0 auto 16px; max-width: 560px; padding: 10px 14px; border: 1px solid var(--blue); border-radius: 8px; background: #EEF3FC;
  color: var(--ink); font-size: 0.95rem; }
.referral .mono { white-space: nowrap; }
.link-button { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--blue); font: inherit; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; }
.file-links { margin: 8px 0 0; font-size: 0.95rem; }
.file-links a { margin: 0 10px; }

/* The scene: the Google Doc in front, a Canvas discussion and a Word lab report behind it. */
.scene { position: relative; max-width: 1600px; margin: 0 auto; padding: 0 24px; }
.window { background: #FFFFFF; border-radius: 10px; overflow: hidden; text-align: left; box-shadow: 0 0 0 1px rgba(11, 27, 59, 0.16), var(--shadow); }
.window.front { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; border-radius: 10px 10px 0 0; }
/* Each shows up to 300 px beside the Doc (860 px wide) and always tucks exactly 100 px behind it.
   The content is padded on the hidden side, so text is laid out only where it can be seen, and
   the title sits on the side that shows. */
.window.back { position: absolute; z-index: 1; width: calc(min(300px, 50% - 442px) + 100px); will-change: transform; }
.back-left { left: max(12px, calc(50% - 730px)); top: 64px; }
.back-right { right: max(12px, calc(50% - 730px)); top: 170px; }
.window.back .window-bar { justify-content: flex-start; padding: 0 110px 0 74px; }
.window.back-right .window-bar { justify-content: flex-end; padding: 0 16px 0 110px; }
.window.back .window-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-left .canvas-post { padding-right: 120px; }
.back-right .word-page { padding-left: 126px; }
.window-bar { position: relative; height: 32px; background: #ECEEF2; border-bottom: 1px solid #D6DAE1; display: flex; align-items: center; justify-content: center; }
.lights { position: absolute; left: 12px; display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.window-title { font: 500 12.5px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; color: #4A4D55; }

.canvas-post { padding: 18px 20px 26px; font: 14px/1.55 "Lato", "Helvetica Neue", Arial, sans-serif; color: #2D3B45; }
.canvas-post p { margin: 0 0 8px; }
.post-name { font-weight: 700; color: #2D3B45; border-bottom: 1px solid #C7CDD1; padding-bottom: 6px; }
.word-page { padding: 22px 26px 30px; font: 14px/1.55 Calibri, "Helvetica Neue", Arial, sans-serif; color: #1F1F1F; }
.word-page p { margin: 0 0 8px; }
.word-eq { text-align: center; font-size: 16px; }

.docs-toolbar { height: 40px; background: #EDF2FA; border-bottom: 1px solid #DDE3EA; display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.docs-toolbar span { width: 22px; height: 10px; border-radius: 3px; background: #C9D3E0; }
.docs-toolbar span.wide { width: 90px; }
.doc { background: #F8F9FA; padding: 26px 26px 92px; }
.page {
  max-width: 640px; margin: 0 auto; background: #FFFFFF; min-height: 300px; padding: 40px 54px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3); font: 15px/1.55 Arial, Helvetica, sans-serif; color: #202124;
}
.page p { margin: 0 0 12px; }
.page .display { margin: 4px 0 16px; padding-left: 24px; font-size: 17px; }
.just-typed { border-radius: 3px; }
.caret { display: inline-block; width: 1.5px; height: 18px; margin-left: 2px; vertical-align: -3px; background: #202124; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* What the person said, shown above the bar like a caption. */
.heard {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); width: min(560px, calc(100% - 40px));
  background: #FFFFFF; border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 32, 110, 0.14); font-size: 0.95rem; line-height: 1.45; color: var(--ink);
}
.heard-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.heard-words .w { display: inline; }

/* The SayMath bar: white, with the voice in blue. */
.saymath-bar {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); height: 30px; padding: 0 14px;
  display: flex; align-items: center; gap: 3px; background: #FFFFFF; border: 1px solid rgba(0, 56, 184, 0.2);
  border-radius: 15px; box-shadow: 0 4px 14px rgba(0, 32, 110, 0.18);
}
.saymath-bar i { width: 3px; height: 4px; border-radius: 2px; background: var(--blue); transform-origin: center; }
.saymath-bar i:nth-child(2n) { height: 9px; }
.saymath-bar i:nth-child(3n) { height: 14px; }
.saymath-bar i:nth-child(5n) { height: 18px; }
.saymath-bar.listening i { animation: voice 0.9s var(--ease-out) infinite alternate; }
.saymath-bar.listening i:nth-child(odd) { animation-duration: 0.7s; }
.saymath-bar.listening i:nth-child(3n) { animation-duration: 1.1s; animation-delay: -0.3s; }
.saymath-bar.listening i:nth-child(4n) { animation-delay: -0.55s; }
@keyframes voice { from { transform: scaleY(0.45); } to { transform: scaleY(1.35); } }
.scene figcaption { max-width: 860px; margin: 0 auto; padding: 16px 0 28px; color: var(--muted); font-size: 0.95rem; text-align: center; background: var(--paper); box-shadow: 0 0 0 1px rgba(11, 27, 59, 0.06); border-radius: 0 0 10px 10px; position: relative; z-index: 2; }
.replay { margin-left: 8px; border: 0; background: none; color: var(--blue); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* Sections */
.section { padding-top: 76px; padding-bottom: 76px; }
.section-alt { background: var(--soft); }
.section-title { margin: 0 0 12px; font-size: 2rem; line-height: 1.2; font-weight: 700; }
.section-intro { max-width: 46rem; margin: 0 0 28px; color: var(--muted); }
h3 { margin: 0 0 8px; font-size: 1.375rem; line-height: 1.3; font-weight: 600; }
.note { color: var(--muted); font-size: 1rem; margin: 20px 0 0; max-width: 52rem; }

/* Typing it, or saying it */
.versus { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.versus-card { border: 1px solid var(--rule); border-radius: 10px; padding: 22px 24px; background: #FFFFFF; display: flex; flex-direction: column; }
.versus-head { margin: 0 0 16px; font-weight: 600; }
.keys { display: flex; flex-wrap: wrap; gap: 6px; }
.key {
  min-width: 32px; height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #C3CCDD; border-bottom-width: 3px; border-radius: 7px; background: #FFFFFF;
  font: 500 15px/1 "Source Code Pro", Menlo, monospace; color: var(--ink);
  transition: background-color 0.12s, color 0.12s, transform 0.12s var(--ease-out);
}
.key.wide { font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; font-size: 14px; }
.key.space { min-width: 64px; font-size: 12px; color: var(--muted); }
.key.down { background: var(--blue); border-color: var(--blue-deep); color: #FFFFFF; transform: translateY(2px); }
.versus-count { margin: auto 0 0; padding-top: 16px; font-size: 1.35rem; font-weight: 700; }
.count { font-variant-numeric: tabular-nums; }
.voice { display: block; width: 100%; height: 120px; stroke: var(--blue); stroke-width: 4.6; stroke-linecap: round; }
.voice-axis { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 4px; font: 400 12px/1.4 "Source Code Pro", Menlo, monospace; color: var(--muted); }
.voice-words { margin: 14px 0 0; color: var(--muted); font-style: italic; }

/* One sentence, four apps */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mini { margin: 0; background: #FFFFFF; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(11, 27, 59, 0.12), 0 10px 26px rgba(0, 32, 110, 0.10); display: flex; flex-direction: column; }
.mini .window-bar { height: 28px; }
.mini .lights i { width: 9px; height: 9px; }
.mini-body { position: relative; padding: 18px 16px; min-height: 104px; font-size: 15px; }
/* Each app's own toolbar, drawn plainly, so the four are told apart at a glance. */
.chrome { height: 24px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 500 11px/1 -apple-system, "Helvetica Neue", Arial, sans-serif; }
.docs-chrome { background: #EDF2FA; border-bottom: 1px solid #DDE3EA; }
.docs-chrome span { width: 16px; height: 7px; border-radius: 2px; background: #C9D3E0; }
.docs-chrome span.wide { width: 54px; }
.word-chrome { background: #F3F2F1; border-bottom: 1px solid #E1DFDD; color: #3B3A39; gap: 14px; }
.word-chrome .tab { color: #1F4E9A; box-shadow: inset 0 -2px 0 #2B579A; height: 100%; display: inline-flex; align-items: center; }
.code-chrome { background: #F1F3F5; border-bottom: 1px solid #DEE2E6; color: #343A40; font-family: "Source Code Pro", Menlo, monospace; }
.canvas-look { padding-left: 40px; }
.canvas-nav { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; background: #394B58; }
.mini-body p { margin: 0; }
.docs-look { font-family: Arial, Helvetica, sans-serif; color: #202124; background: #FFFFFF; }
.word-look { font-family: Calibri, "Helvetica Neue", Arial, sans-serif; color: #1F1F1F; }
.word-look .katex { font-family: "Cambria Math", KaTeX_Main, serif; }
.canvas-look { font-family: "Lato", "Helvetica Neue", Arial, sans-serif; color: #2D3B45; }
.canvas-look .post-name { margin-bottom: 8px; font-size: 13px; }
.code-look { font: 13.5px/1.6 "Source Code Pro", Menlo, monospace; color: #1F2937; background: #FBFCFE; }
/* A sent message: white text on blue, right aligned like the Messages app. */
.messages-look { display: flex; justify-content: flex-end; align-items: flex-start; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; }
.bubble { max-width: 88%; padding: 8px 12px; border-radius: 18px; background: var(--blue); color: #FFFFFF; font-size: 14.5px; line-height: 1.35; }
.code-look .ln { color: #6B7280; margin-right: 10px; }
.code-look .m { color: var(--blue); }
.mini figcaption { margin-top: auto; padding: 10px 16px 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.92rem; line-height: 1.4; }

/* Feature rows */
.feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 36px 0; border-top: 1px solid var(--rule); }
.feature:first-of-type { border-top: 0; padding-top: 20px; }
.feature-text p { margin: 0 0 12px; color: var(--muted); }

/* Index cards: blue rules every line, the way a ruled card looks. */
.card {
  --line: 28px;
  position: relative; border: 1px solid var(--rule); border-radius: 6px; padding: 14px 22px 18px; background-color: #FFFFFF;
  /* The first layer is a plain band at the top: the rules start under it, as on a real card. Every
     line inside is 28px tall, so text sits on a rule; margins must stay multiples of 28px. */
  background-image: linear-gradient(#FFFFFF, #FFFFFF),
    linear-gradient(transparent calc(var(--line) - 1px), rgba(0, 56, 184, 0.13) calc(var(--line) - 1px), rgba(0, 56, 184, 0.13) var(--line), transparent var(--line));
  background-size: 100% 12px, 100% var(--line); background-position: 0 0, 0 6px; background-repeat: no-repeat, repeat;
  line-height: var(--line);
  box-shadow: 0 1px 2px rgba(11, 27, 59, 0.06), 0 8px 20px rgba(0, 32, 110, 0.07);
}
.card-label { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.card-said { margin: 0; color: var(--muted); font-style: italic; }
/* What SayMath typed sits on a clean strip under the ruled part, like a printed label. */
.card-out { margin: 10px -22px -18px; padding: 12px 22px 14px; background: #FFFFFF; border-top: 1px solid var(--rule); border-radius: 0 0 6px 6px; font-size: 1.15rem; line-height: 1.5; }
.card-out.math { font-size: 1.2rem; padding-top: 6px; padding-bottom: 8px; }
.card-out .katex-display { margin: 0.2em 0; text-align: left; }
.card-out .katex-display > .katex { text-align: left; }
.subject { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--blue); }

/* It learns your words: a typed line with a hand correction, the bar's message, the next result. */
.learn { border: 1px solid var(--rule); border-radius: 10px; background: #FFFFFF; padding: 22px 22px 18px; box-shadow: 0 8px 20px rgba(0, 32, 110, 0.07); }
.learn-line { margin: 0 0 18px; font: 15.5px/1.55 Arial, Helvetica, sans-serif; color: #202124; }
.learn-fix s { color: var(--muted); text-decoration-color: #A3271B; text-decoration-thickness: 2px; }
.learn-fix { white-space: nowrap; }
/* Inline math and the punctuation after it never split across lines. */
.nobr { white-space: nowrap; }
.learn-bar {
  display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 auto 18px; padding: 6px 16px;
  border-radius: 15px; background: #FFFFFF; border: 1px solid rgba(0, 56, 184, 0.2); box-shadow: 0 4px 14px rgba(0, 32, 110, 0.18);
  font: 500 13px/1.3 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--ink);
}
.learn-icon { display: inline-grid; place-items: center; width: 14px; height: 16px; border-radius: 3px; background: var(--blue); color: #FFFFFF; font-size: 9px; font-weight: 700; }
.learn-next { margin: 0; padding-top: 12px; border-top: 1px solid var(--rule); font: 15.5px/1.55 Arial, Helvetica, sans-serif; color: #202124; }
.learn-next .card-label { display: block; margin-bottom: 2px; font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; }

/* Hear what was written: a formula, the words read-back says for it, and a button that says them. */
.hear { border: 1px solid var(--rule); border-radius: 10px; background: #FFFFFF; padding: 6px 22px; box-shadow: 0 8px 20px rgba(0, 32, 110, 0.07); }
.hear-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 0; }
.hear-row + .hear-row { border-top: 1px solid var(--rule); }
.hear-math { font-size: 1.35rem; color: var(--ink); }
.hear-words { margin: 0; color: var(--muted); font-style: italic; }
.hear-play { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--blue); border-radius: 999px; background: #FFFFFF; color: var(--blue); font: 600 0.9rem/1 "Source Sans 3", "Helvetica Neue", Arial, sans-serif; cursor: pointer; }
.hear-play:hover { background: #EEF3FC; }
.hear-play.speaking { background: var(--blue); color: #FFFFFF; }
@media (max-width: 560px) {
  .hear-row { grid-template-columns: auto 1fr; grid-template-areas: "math play" "words words"; row-gap: 8px; }
  .hear-math { grid-area: math; }
  .hear-play { grid-area: play; justify-self: end; }
  .hear-words { grid-area: words; }
}

/* Across your classes */
.classes { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
/* Each card spans three rows of the wall's grid (subject, words, result), so in every row of cards
   the results start at the same height. The wall's cards are ruled every 24px to fit its type. */
.wall .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; --line: 24px; background-position: 0 0, 0 8px; }
.wall .card-said { font-size: 0.98rem; }
.wall .card-out { font-size: 1.05rem; }
.wall .card-out.math { font-size: 1.1rem; }

.spec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.spec-list li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.spec-list li span:first-child { color: var(--muted); }
.spec-list li span:last-child { text-align: right; }

.apps-table { width: 100%; border-collapse: collapse; background: #FFFFFF; border: 1px solid var(--rule); }
.apps-table th { text-align: left; font-size: 0.95rem; font-weight: 600; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--soft); }
.apps-table td { padding: 13px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.apps-table td:first-child { font-weight: 600; width: 38%; }
.apps-table tr:last-child td { border-bottom: 0; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plan { border: 1px solid var(--rule); border-radius: 8px; padding: 22px 24px; background: #FFFFFF;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.plan:hover { border-color: #B9C6E2; box-shadow: 0 10px 28px rgba(0, 32, 110, 0.08); }
.plan .price { margin: 0 0 12px; font-size: 1.25rem; font-weight: 600; }
.plan ul { margin: 0; padding-left: 20px; color: var(--muted); }
/* Pro's prices as a short list, like a receipt: one row per term, the yearly row marked. */
.price-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.price-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "term amount" "term per"; column-gap: 16px;
  padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.price-list .term { grid-area: term; align-self: center; font-weight: 600; color: var(--ink); }
.price-list .amount { grid-area: amount; text-align: right; font-size: 1.15rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-list .per { grid-area: per; text-align: right; font-size: 0.9rem; color: var(--muted); }
.price-list li { transition: background-color 0.18s var(--ease-out); }
.price-list li:hover { background: #F6F8FD; }
.price-list .best, .price-list .best:hover { background: #EEF3FC; box-shadow: inset 3px 0 0 var(--blue); }
.price-list .best .per { color: var(--blue); font-weight: 600; }
.student-price { margin: 14px 0 0; font-size: 0.95rem; color: var(--ink); }
.student-price strong { color: var(--blue); }
.price-list .tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--blue); color: #FFFFFF;
  font-size: 0.75rem; font-weight: 700; vertical-align: 2px; }

.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.release { font-size: 1.15rem; margin-top: 4px; }
.release span { font-weight: 400; color: var(--muted); margin-left: 8px; }
.notes-list { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }

/* Beta access: what it is on the left, the form on a white card on the right. */
.beta-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.beta-layout .section-intro { margin-bottom: 16px; }
.beta-card { background: #FFFFFF; border: 1px solid var(--rule); border-radius: 10px; padding: 8px 26px 26px; box-shadow: 0 10px 26px rgba(0, 32, 110, 0.08); }
.beta-form { display: grid; gap: 6px; }
.beta-form label { font-weight: 600; margin-top: 10px; }
.optional { font-weight: 400; color: var(--muted); }
.beta-form input, .beta-form select {
  height: 46px; padding: 0 12px; border: 1px solid var(--field); border-radius: 6px; background: #FFFFFF;
  font: 400 1.05rem "Source Sans 3", "Helvetica Neue", Arial, sans-serif; color: var(--ink);
}
.beta-form .button { justify-self: start; margin-top: 18px; }
.trap { position: absolute; left: -9999px; }
.form-status { min-height: 1.6em; margin: 6px 0 0; }
.form-status.error { color: #A3271B; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); background: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 200px 260px 1fr; gap: 24px; padding-top: 32px; padding-bottom: 36px; font-size: 0.95rem; color: var(--muted); }
.footer-grid p { margin: 0 0 6px; }
.footer-head { font-weight: 600; color: var(--ink); }
.copyright { align-self: end; text-align: right; }

/* Reading pages (help, privacy) */
.reading { max-width: 760px; margin: 0 auto; padding: 48px 24px 72px; }
.reading h1 { font-size: 2.4rem; line-height: 1.2; margin: 0 0 8px; }
.reading h2 { font-size: 1.5rem; margin: 40px 0 10px; }
.reading p, .reading li { color: var(--muted); }
.reading strong { color: var(--ink); }
.reading .updated { margin-top: 0; }

/* The windows behind the Doc need room on both sides. */
@media (max-width: 1279px) {
  .window.back { display: none; }
}

@media (max-width: 1100px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .site-header nav a:not(:last-child) { display: none; }
  .hero h1 { font-size: 2.2rem; }
  .intro { font-size: 1.1rem; }
  .file-links a { display: inline-block; margin: 4px 8px; }
  .scene { padding: 0 12px; }
  .feature, .two-col, .plans, .versus, .beta-layout { grid-template-columns: 1fr; gap: 24px; }
  .page { padding: 24px 22px; }
  .page .display { padding-left: 0; overflow-x: auto; }
  .doc { padding: 14px 10px 150px; }
  .heard { bottom: 58px; font-size: 0.88rem; }
  .apps-table td:first-child { width: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .copyright { text-align: left; }
}

@media (max-width: 560px) {
  .strip, .wall { grid-template-columns: 1fr; }
  .apps-table thead { display: none; }
  .apps-table td { display: block; border-bottom: 0; padding: 4px 14px; }
  .apps-table td:first-child { padding-top: 14px; }
  .apps-table tr { display: block; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
}

/* Reduced motion: every scene is already complete; nothing moves, the caret holds still. */
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .saymath-bar.listening i { animation: none; }
  .key { transition: none; }
  /* Colors still change; nothing moves or unfolds. */
  .button-blue, .button-blue:hover, .button-blue:active { transform: none; transition: background-color 0.15s; }
  .site-header nav a { transition: color 0.15s; }
  .next-steps { transition: none; }
}