:root {
  --paper: #f7f3ea;
  --paper-2: #eee8dc;
  --paper-3: #e6ded0;
  --ink: #1e211d;
  --muted: #666a63;
  --line: #d9d1c3;
  --white: #fffdf8;
  --sage: #496354;
  --sage-soft: #dce6dd;
  --blue: #55759b;
  --blue-soft: #dbe6f1;
  --orange: #b96a43;
  --orange-soft: #f0dfd4;
  --gold: #9b7a36;
  --gold-soft: #eee3c7;
  --plum: #765f77;
  --plum-soft: #e9dfe8;
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 36px;
  --shadow: 0 14px 36px rgba(30, 33, 29, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
button, input { font: inherit; }
a { color: inherit; }
.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 108px 0; }
.muted { color: var(--muted); }

.site-header {
  width: min(1210px, calc(100% - 28px));
  min-height: 68px;
  margin: 12px auto 0;
  padding: 0 18px;
  position: sticky;
  top: 10px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(30,33,29,.10);
  border-radius: 18px;
  background: rgba(247,243,234,.92);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.05em; font-size: 1.24rem; }
.brand-mark { width: 24px; height: 20px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; align-items: end; }
.brand-mark i { display: block; border-radius: 3px 3px 1px 1px; }
.brand-mark i:nth-child(1) { height: 10px; background: var(--orange); }
.brand-mark i:nth-child(2) { height: 16px; background: var(--gold); }
.brand-mark i:nth-child(3) { height: 20px; background: var(--sage); }
.brand-mark i:nth-child(4) { height: 14px; background: var(--blue); }
.brand-mark i:nth-child(5) { height: 8px; background: var(--plum); }
nav { display: flex; align-items: center; gap: 22px; }
nav a { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 700; }
nav a:hover { color: var(--ink); }
.nav-github { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(255,253,248,.55); }

.eyebrow { margin: 0 0 14px; color: var(--sage); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 850; display: flex; align-items: center; gap: 8px; }
.eyebrow > span { width: 18px; height: 2px; background: currentColor; }
.eyebrow.light { color: #c6d6c9; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 24px; font-size: clamp(3.6rem, 7.6vw, 7rem); line-height: .92; letter-spacing: -.072em; font-weight: 760; }
h1 em { font-style: normal; color: var(--sage); }
h2 { margin-bottom: 16px; font-size: clamp(2.25rem, 4.8vw, 4.8rem); line-height: .98; letter-spacing: -.055em; font-weight: 730; }
h3 { margin-bottom: 8px; font-size: 1.25rem; line-height: 1.16; letter-spacing: -.03em; }

.hero { min-height: 760px; padding: 92px 0 80px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 64px; align-items: center; }
.hero-copy-block { max-width: 720px; }
.hero-copy { max-width: 660px; color: var(--muted); font-size: clamp(1.05rem, 1.8vw, 1.26rem); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.button { min-height: 50px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; justify-content: center; align-items: center; text-decoration: none; cursor: pointer; font-weight: 760; font-size: .92rem; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.button.primary:hover { background: var(--sage); border-color: var(--sage); }
.button.ghost { background: var(--white); color: var(--ink); }
.button.ghost:hover { border-color: #aaa294; }
.hero-facts { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; gap: 38px; }
.hero-facts div { display: grid; gap: 1px; }
.hero-facts strong { font-size: 1.45rem; letter-spacing: -.04em; }
.hero-facts span { color: var(--muted); font-size: .8rem; }

.phone-stage { min-height: 620px; position: relative; display: grid; place-items: center; }
.phone-card { width: min(365px, 88%); height: 600px; position: relative; z-index: 3; border: 1px solid rgba(30,33,29,.15); border-radius: 34px; background: #fdfcf9; box-shadow: 0 28px 70px rgba(30,33,29,.14); overflow: hidden; }
.phone-back { position: absolute; z-index: 1; transform: translate(40px, 18px) rotate(5deg); background: var(--sage-soft); border-color: transparent; box-shadow: none; }
.phone-topbar { height: 54px; padding: 0 17px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #ebe7df; font-size: .78rem; }
.phone-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e342e; }
.phone-more { justify-self: end; letter-spacing: 2px; color: #8a8b86; }
.phone-projects { padding: 14px; border-bottom: 1px solid #ebe7df; background: #f7f6f2; }
.phone-label { display: block; margin: 0 0 8px 8px; color: #9a9892; font-size: .59rem; letter-spacing: .12em; font-weight: 850; }
.phone-project { height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border-radius: 9px; color: #62635e; font-size: .74rem; font-weight: 650; }
.phone-project.active { background: #ebe9e3; color: #242723; }
.course-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.dot-blue { background: var(--blue); }.dot-orange { background: var(--orange); }.dot-green { background: var(--sage); }
.phone-chat { height: calc(100% - 190px); padding: 18px 14px; position: relative; display: flex; flex-direction: column; gap: 13px; background: #fffefa; }
.chat-meta { margin-bottom: 4px; color: #9b9991; font-size: .66rem; text-align: center; }
.bubble { max-width: 88%; padding: 11px 12px; border-radius: 15px; font-size: .76rem; line-height: 1.45; }
.bubble.user { align-self: flex-end; background: #eeeeea; border-bottom-right-radius: 5px; }
.bubble.assistant { display: grid; grid-template-columns: 25px 1fr; gap: 8px; align-self: flex-start; max-width: 95%; padding: 0; background: transparent; }
.bubble.assistant p { margin: 0; }
.assistant-badge { width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 850; font-size: .66rem; }
.chat-input { height: 45px; margin-top: auto; padding: 0 8px 0 13px; border: 1px solid #dfddd6; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; color: #a7a49d; font-size: .72rem; }
.chat-input b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #222521; color: #fff; }
.floating-note { position: absolute; z-index: 5; padding: 9px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .72rem; font-weight: 800; }
.note-one { top: 96px; left: 0; transform: rotate(-4deg); }
.note-two { right: -2px; bottom: 108px; transform: rotate(3deg); }

.section-kicker { color: var(--orange); font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 850; margin-bottom: 26px; }
.intro-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: start; }
.intro-grid h2 { font-size: clamp(2.6rem, 4.8vw, 4.8rem); }
.marker { padding: 0 .12em; background: var(--gold-soft); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.plain-copy { padding-top: 12px; color: var(--muted); font-size: 1.08rem; }
.plain-copy p + p { margin-top: 18px; }
.before-after { margin-top: 62px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.comparison { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); min-height: 300px; }
.comparison.before { background: #efebe3; }
.comparison.after { background: var(--sage-soft); border-color: #c7d5c9; }
.comparison-tag { display: inline-flex; margin-bottom: 42px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.65); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.comparison h3 { font-size: 1.7rem; max-width: 430px; }
.comparison ul { margin: 22px 0 0; padding: 0; list-style: none; color: #555950; }
.comparison li { position: relative; padding: 8px 0 8px 23px; border-top: 1px solid rgba(30,33,29,.09); }
.comparison li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: #96958e; }
.comparison.after li::before { background: var(--sage); }

.use-section { background: var(--ink); color: var(--white); }
.split-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; align-items: end; margin-bottom: 50px; }
.split-heading h2 { max-width: 760px; }
.heading-note { margin: 0 0 8px; color: rgba(255,255,255,.58); max-width: 420px; }
.use-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; }
.use-card { min-height: 430px; padding: 28px; border-radius: 28px; display: grid; grid-template-columns: 56px 1fr; gap: 18px; }
.use-number { color: rgba(255,255,255,.55); font-weight: 850; }
.setup-once { background: #2d322e; border: 1px solid #3f4640; }
.daily-use { color: var(--ink); background: var(--gold-soft); }
.use-label { display: block; margin-bottom: 58px; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 850; opacity: .72; }
.use-card h3 { font-size: clamp(2rem, 3.5vw, 3.35rem); letter-spacing: -.055em; }
.use-card ol { padding-left: 21px; color: rgba(255,255,255,.68); }
.use-card li { margin: 12px 0; }
.inline-link { display: inline-block; margin-top: 20px; color: #d7e4d9; text-decoration: none; font-weight: 800; font-size: .9rem; }
.daily-flow { margin: 26px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.daily-flow span { padding: 9px 11px; border: 1px solid rgba(30,33,29,.18); border-radius: 999px; background: rgba(255,255,255,.38); font-size: .8rem; font-weight: 750; }
.daily-flow i { font-style: normal; color: #77705e; }
.prompt-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prompt-examples span { padding: 12px 13px; border-radius: 13px; background: var(--white); font-size: .82rem; font-weight: 700; }

.foundation-heading { max-width: 820px; margin-bottom: 46px; }
.foundation-heading > p:last-child { color: var(--muted); }
.foundation-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.foundation-card { min-height: 390px; padding: 22px; border-radius: 22px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(30,33,29,.08); }
.foundation-card h3 { margin-bottom: 10px; font-size: 1.15rem; }
.foundation-card p { margin: 0; color: rgba(30,33,29,.67); font-size: .88rem; }
.foundation-letter { font-size: clamp(5.5rem, 10vw, 8rem); line-height: .85; letter-spacing: -.09em; font-weight: 850; }
.f-r { background: var(--orange-soft); }.f-r .foundation-letter { color: var(--orange); }
.f-i { background: var(--gold-soft); }.f-i .foundation-letter { color: var(--gold); }
.f-z { background: var(--sage-soft); }.f-z .foundation-letter { color: var(--sage); }
.f-m { background: var(--blue-soft); }.f-m .foundation-letter { color: var(--blue); }
.f-a { background: var(--plum-soft); }.f-a .foundation-letter { color: var(--plum); }

.pack-section { border-top: 1px solid var(--line); }
.pack-header { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 36px; }
.pack-header h2 { margin-bottom: 8px; }
.pack-header > div > p:last-child { margin: 0; color: var(--muted); }
.verified-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; background: var(--sage-soft); color: var(--sage); font-size: .76rem; font-weight: 850; }
.verified-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.course-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.course-card { min-height: 230px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); display: flex; flex-direction: column; }
.course-card:nth-child(1) { border-top: 5px solid var(--orange); }
.course-card:nth-child(2) { border-top: 5px solid var(--blue); }
.course-card:nth-child(3) { border-top: 5px solid var(--sage); }
.course-card:nth-child(4) { border-top: 5px solid var(--gold); }
.course-card:nth-child(5) { border-top: 5px solid var(--plum); }
.course-top { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .7rem; }
.course-card h3 { margin-top: 32px; font-size: 1.15rem; }
.course-focus { margin-top: auto; padding-top: 20px; border-top: 1px solid #e8e3d9; color: var(--muted); font-size: .78rem; }
.pack-bottom { margin-top: 18px; padding: 24px; border-radius: 18px; background: var(--paper-2); display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.pack-bottom p { margin: 3px 0 0; color: var(--muted); max-width: 650px; }

.compact-heading { max-width: 770px; margin-bottom: 42px; }
.trust-section { border-top: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trust-grid article { padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,253,248,.52); }
.trust-icon { display: inline-flex; margin-bottom: 48px; color: var(--sage); font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.trust-grid h3 { font-size: 1.35rem; }
.trust-grid p { margin: 0; color: var(--muted); }

.faq-section { padding-top: 30px; }
.faq-list { max-width: 900px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 22px 36px 22px 0; cursor: pointer; list-style: none; position: relative; font-size: 1.05rem; font-weight: 780; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 19px; color: var(--muted); font-size: 1.35rem; font-weight: 400; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { max-width: 760px; padding: 0 0 24px; margin: 0; color: var(--muted); }

.closing-section { margin-top: 90px; padding: 84px 0; background: var(--sage); color: #f8f6ef; }
.closing-inner { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; }
.closing-inner h2 { max-width: 780px; }
.closing-inner p { max-width: 650px; margin: 0; color: rgba(255,255,255,.72); }
.closing-label { display: inline-block; margin-bottom: 18px; color: #d9e7dc; font-size: .74rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.light-button { background: var(--white); color: var(--ink); border-color: var(--white); }

.site-footer { padding: 34px 0 46px; display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.footer-brand { font-size: 1rem; }
.footer-links { display: flex; justify-content: center; gap: 18px; }
.footer-links a { color: var(--muted); font-size: .8rem; text-decoration: none; font-weight: 700; }
.site-footer p { margin: 0; color: var(--muted); font-size: .74rem; }

/* setup */
.setup-main { padding-top: 54px; padding-bottom: 100px; }
.back-link { display: inline-block; margin-bottom: 40px; color: var(--muted); text-decoration: none; font-size: .86rem; font-weight: 700; }
.setup-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: end; margin-bottom: 70px; }
.setup-intro h1 { max-width: 780px; font-size: clamp(3.5rem, 7vw, 6.7rem); }
.setup-lead { max-width: 700px; color: var(--muted); font-size: 1.08rem; }
.setup-summary-card { padding: 24px; border-radius: 22px; background: var(--ink); color: var(--white); }
.summary-label { display: block; margin-bottom: 10px; color: #b8bdb7; font-size: .7rem; letter-spacing: .09em; font-weight: 850; text-transform: uppercase; }
.setup-summary-card > strong { font-size: 1.6rem; letter-spacing: -.04em; }
.setup-summary-card ul { margin: 24px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.72); font-size: .85rem; }
.setup-summary-card li { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.12); }

.setup-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.setup-nav { position: sticky; top: 96px; display: grid; gap: 5px; }
.setup-nav-label { margin-bottom: 8px; color: var(--muted); font-size: .68rem; font-weight: 900; letter-spacing: .11em; }
.setup-nav a { min-height: 48px; padding: 0 10px; border-radius: 10px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--muted); font-size: .82rem; font-weight: 700; }
.setup-nav a:hover { background: var(--paper-2); color: var(--ink); }
.setup-nav b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); font-size: .69rem; }
.nav-progress { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,253,248,.55); }
.nav-progress span { display: block; margin-bottom: 9px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.progress-track { width: 100%; height: 5px; border-radius: 99px; overflow: hidden; background: var(--paper-3); }
.progress-track div { height: 100%; width: 0; background: var(--sage); transition: width .2s ease; }
.setup-content { display: grid; gap: 22px; }
.setup-step-card { padding: 34px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,253,248,.60); scroll-margin-top: 100px; }
.accent-card { background: var(--gold-soft); border-color: #ddcfac; }
.finish-card { background: var(--sage-soft); border-color: #c7d5c9; }
.step-heading { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }
.big-step { width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 16px; display: grid; place-items: center; background: var(--white); font-size: 1.25rem; font-weight: 900; }
.step-caption { margin-bottom: 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; font-size: .67rem; font-weight: 850; }
.setup-step-card h2 { margin-bottom: 8px; font-size: clamp(1.9rem, 3.2vw, 3rem); }
.step-explain { max-width: 780px; margin: 18px 0 26px 82px; color: var(--muted); }
.settings-path { margin-left: 82px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.settings-path span { padding: 9px 11px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; font-size: .78rem; font-weight: 750; }
.settings-path i { color: var(--muted); font-style: normal; }
.check-list { margin: 24px 0 0 82px; display: grid; gap: 8px; }
.check-list label { padding: 14px; border-radius: 12px; display: flex; gap: 11px; align-items: start; background: var(--white); border: 1px solid var(--line); cursor: pointer; }
.check-list input { margin-top: 4px; accent-color: var(--sage); }
.info-box { margin: 18px 0 0 82px; padding: 16px; border-left: 4px solid var(--blue); background: var(--blue-soft); border-radius: 0 12px 12px 0; }
.info-box p { margin: 4px 0 0; color: #52606d; font-size: .83rem; }
.copy-panel { margin-left: 82px; padding: 20px; border-radius: 18px; background: var(--white); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.copy-kicker { display: block; margin-bottom: 4px; color: var(--gold); font-size: .64rem; font-weight: 900; letter-spacing: .1em; }
.copy-panel p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
.copy-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.copy-status { margin: 10px 0 0 82px; min-height: 1.2em; color: var(--sage); font-size: .78rem; font-weight: 750; }
.projects-step > .step-explain { margin-bottom: 32px; }
.setup-courses { margin-left: 82px; display: grid; gap: 10px; }
.setup-course { border: 1px solid var(--line); border-radius: 16px; background: var(--white); overflow: hidden; }
.setup-course summary { min-height: 78px; padding: 16px 18px; cursor: pointer; list-style: none; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; }
.setup-course summary::-webkit-details-marker { display: none; }
.setup-course[data-complete="true"] { border-color: #aebfac; background: #fbfdf9; }
.course-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--paper-2); color: var(--muted); font-size: .72rem; font-weight: 900; }
.setup-title strong { display: block; font-size: .98rem; }
.setup-title span { color: var(--muted); font-size: .74rem; }
.done-pill { padding: 6px 8px; border-radius: 999px; background: var(--paper-2); color: var(--muted); font-size: .68rem; font-weight: 850; }
.setup-course[data-complete="true"] .done-pill { background: var(--sage-soft); color: var(--sage); }
.setup-body { padding: 0 18px 20px 68px; border-top: 1px solid #ebe6dc; }
.setup-body ol { padding-left: 20px; color: #4c504a; }
.setup-body li { margin: 12px 0; }
.inline-actions { display: flex; gap: 7px; flex-wrap: wrap; margin: 18px 0; }
.small-button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; font-size: .73rem; font-weight: 800; color: var(--ink); }
.small-button:hover { border-color: #aaa294; }
.complete-check { display: flex; gap: 8px; align-items: center; font-size: .82rem; font-weight: 760; }
.complete-check input { accent-color: var(--sage); }
.phone-mini-flow { margin: 22px 0 26px 82px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.phone-mini-flow div { padding: 12px 14px; border-radius: 13px; background: var(--white); display: flex; align-items: center; gap: 8px; }
.phone-mini-flow div span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sage); color: #fff; font-size: .66rem; font-weight: 850; }
.phone-mini-flow div strong { font-size: .78rem; }
.phone-mini-flow i { font-style: normal; color: var(--muted); }
.prompt-grid { margin-left: 82px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prompt-grid button { padding: 14px 15px; border: 1px solid #c8d4c8; border-radius: 13px; background: rgba(255,255,255,.55); color: var(--ink); text-align: left; cursor: pointer; font-weight: 700; }
.prompt-grid button:hover { background: var(--white); }
.small-note { margin: 18px 0 0 82px; color: #566158; font-size: .78rem; }

.error-page { min-height: 100vh; padding: 36px 0; display: flex; flex-direction: column; justify-content: space-between; }
.error-page > div { padding-bottom: 13vh; }
.error-code { color: var(--orange); font-size: .8rem; font-weight: 900; letter-spacing: .1em; }
.error-page h1 { max-width: 800px; margin-top: 14px; font-size: clamp(3.6rem, 8vw, 7rem); }
.error-page p { color: var(--muted); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 84px; }
  .hero-copy-block { max-width: 820px; }
  .phone-stage { min-height: 640px; }
  .phone-card { width: 360px; max-width: 86vw; }
  .note-one { left: calc(50% - 220px); }
  .note-two { right: calc(50% - 230px); }
  .foundation-grid { grid-template-columns: repeat(2, 1fr); }
  .foundation-card:last-child { grid-column: 1 / -1; min-height: 280px; }
  .course-cards { grid-template-columns: repeat(2, 1fr); }
  .course-card:last-child { grid-column: 1 / -1; }
  .setup-layout { grid-template-columns: 1fr; }
  .setup-nav { position: static; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .setup-nav-label, .nav-progress { grid-column: 1 / -1; }
  .setup-nav a { justify-content: center; padding: 8px; }
  .setup-intro { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 28px, 1160px); }
  .site-header { width: calc(100% - 18px); min-height: 62px; top: 7px; margin-top: 7px; padding: 0 13px; }
  nav a:not(.nav-github) { display: none; }
  .nav-github { padding: 8px 11px; }
  .section { padding: 76px 0; }
  h1 { font-size: clamp(3.15rem, 16vw, 5.4rem); }
  h2 { font-size: clamp(2.1rem, 10vw, 3.5rem); }
  .hero { min-height: auto; gap: 18px; padding-top: 72px; }
  .hero-facts { gap: 24px; }
  .phone-stage { min-height: 570px; margin-top: 22px; }
  .phone-card { height: 540px; }
  .phone-back { transform: translate(18px, 12px) rotate(3deg); }
  .note-one { left: 0; top: 66px; }
  .note-two { right: 0; bottom: 70px; }
  .intro-grid, .before-after, .split-heading, .use-grid, .trust-grid, .closing-inner { grid-template-columns: 1fr; }
  .intro-grid { gap: 20px; }
  .comparison-tag { margin-bottom: 28px; }
  .use-card { grid-template-columns: 42px 1fr; min-height: 390px; padding: 22px; }
  .use-label { margin-bottom: 36px; }
  .prompt-examples { grid-template-columns: 1fr; }
  .foundation-grid { grid-template-columns: 1fr; }
  .foundation-card, .foundation-card:last-child { grid-column: auto; min-height: 300px; }
  .foundation-letter { font-size: 7rem; }
  .pack-header, .pack-bottom { align-items: flex-start; flex-direction: column; }
  .course-cards { grid-template-columns: 1fr; }
  .course-card:last-child { grid-column: auto; }
  .site-footer { grid-template-columns: 1fr; gap: 14px; }
  .footer-links { justify-content: flex-start; }
  .setup-main { padding-top: 34px; }
  .setup-intro { margin-bottom: 42px; gap: 24px; }
  .setup-intro h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .setup-nav { grid-template-columns: 1fr 1fr; }
  .setup-nav a { justify-content: flex-start; }
  .setup-step-card { padding: 22px; border-radius: 20px; }
  .step-heading { grid-template-columns: 48px 1fr; gap: 12px; }
  .big-step { width: 46px; height: 46px; border-radius: 13px; }
  .step-explain, .settings-path, .check-list, .info-box, .copy-panel, .copy-status, .setup-courses, .phone-mini-flow, .prompt-grid, .small-note { margin-left: 0; }
  .copy-panel { grid-template-columns: 1fr; }
  .copy-actions { justify-content: flex-start; }
  .setup-course summary { grid-template-columns: 36px 1fr auto; padding: 14px; }
  .setup-body { padding: 0 14px 18px; }
  .prompt-grid { grid-template-columns: 1fr; }
  .phone-mini-flow i { display: none; }
  .phone-mini-flow { display: grid; grid-template-columns: 1fr; }
  .closing-section { margin-top: 40px; padding: 64px 0; }
}