/* Classwell's public pages (features, about, security, FAQ...): plain HTML built by scripts/build-pages.mjs.
   Same fonts, colours and theme as the app and its home page. No JavaScript needed to read them, so search engines and
   AI tools see all of it (one line of script only picks light or dark, the same way the app does). */
@font-face { font-family: 'Jakarta'; src: url('/site/fonts/jakarta.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/site/fonts/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* the app's own colours (src/index.css) */
  --bg: oklch(0.984 0.004 95); --card: oklch(1 0 0); --alt: oklch(0.968 0.006 95); --ink: oklch(0.205 0.013 255); --body: oklch(0.38 0.015 255); --muted: oklch(0.5 0.015 255); --line: oklch(0.915 0.007 95);
  --teal: oklch(0.5 0.105 184); --teal-2: #14b8a6; --teal-soft: oklch(0.95 0.03 184); --violet: #7c3aed;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 24px 48px -28px rgb(16 24 40 / 0.28);
  --lift: 0 1px 2px rgb(16 24 40 / 0.05), 0 34px 64px -30px rgb(16 24 40 / 0.4);
  --night: radial-gradient(70% 90% at 0% 0%, rgb(20 184 166 / 0.24), transparent 60%), radial-gradient(70% 90% at 100% 100%, rgb(124 58 237 / 0.32), transparent 60%), linear-gradient(135deg, #020617, #06201e 50%, #1a0f3a);
  color-scheme: light;
}
/* dark: the same choice as the app (Classwell's theme, set before the page draws) */
:root.dark { --bg: oklch(0.172 0.006 250); --card: oklch(0.207 0.007 250); --alt: oklch(0.19 0.007 250); --ink: oklch(0.95 0.004 95); --body: oklch(0.82 0.01 250); --muted: oklch(0.68 0.012 250); --line: oklch(1 0 0 / 9%); --teal: oklch(0.74 0.115 180); --teal-2: #5eead4; --teal-soft: oklch(0.26 0.04 184); --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 24px 48px -28px rgb(0 0 0 / 0.7); --lift: 0 1px 2px rgb(0 0 0 / 0.3), 0 34px 64px -30px rgb(0 0 0 / 0.8); color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--body); font: 16px/1.65 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; }
h1, h2, h3 { font-family: 'Jakarta', 'Geist', system-ui, sans-serif; color: var(--ink); letter-spacing: -0.025em; line-height: 1.12; margin: 0; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 3px; border-radius: 6px; }
img, svg { display: block; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }

/* Header */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in oklab, var(--bg) 80%, transparent); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 800 19px/1 'Jakarta', sans-serif; letter-spacing: -0.03em; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 6px 16px -6px rgb(13 148 136 / 0.7); }
.brand span span, .well { color: var(--teal); }
.nav { display: flex; gap: 2px; margin-left: 8px; }
.nav a { color: var(--muted); font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 10px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); text-decoration: none; }
.actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.actions .signin { color: var(--muted); font-size: 14px; font-weight: 500; padding: 7px 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--teal); color: #fff; font-weight: 600; font-size: 14.5px; padding: 11px 20px; border-radius: 999px; box-shadow: 0 12px 26px -12px rgb(13 148 136 / 0.9); transition: transform .15s ease, filter .15s ease; }
.btn:hover { text-decoration: none; filter: brightness(1.07); transform: translateY(-1px); }
.dark .btn { color: #042f2c; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.menu { display: none; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] .sheet { display: grid; }
.sheet { display: none; position: absolute; left: 16px; right: 16px; top: 66px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: var(--shadow); gap: 2px; }
.sheet a { padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 500; }
.sheet a:hover { background: var(--teal-soft); text-decoration: none; }
@media (max-width: 900px) { .nav, .actions { display: none; } .menu { display: block; } }

/* Hero: a dark band, the words on the left, a real screen from the app on the right */
.hero, .band { --a1: #14b8a6; --a2: #8b5cf6; --tint: radial-gradient(70% 95% at 0% 0%, color-mix(in oklab, var(--a1) 34%, transparent), transparent 62%), radial-gradient(70% 95% at 100% 100%, color-mix(in oklab, var(--a2) 40%, transparent), transparent 62%), linear-gradient(135deg, #020617, color-mix(in oklab, var(--a1) 14%, #020617) 50%, color-mix(in oklab, var(--a2) 18%, #020617)); }
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--tint); color: #cbd5e1; padding: 22px 0 56px; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%); mask-image: linear-gradient(to bottom, black, transparent 85%); }
.hero-grid { display: grid; gap: 48px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.crumbs { font-size: 13px; color: rgb(203 213 225 / 0.7); margin-bottom: 24px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.crumbs li + li::before { content: '›'; margin-right: 6px; color: rgb(203 213 225 / 0.4); }
.crumbs a { color: rgb(203 213 225 / 0.75); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1 'Geist', sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, var(--a1) 45%, white); background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.14); padding: 8px 13px; border-radius: 999px; }
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in oklab, var(--a1) 70%, white); box-shadow: 0 0 0 4px color-mix(in oklab, var(--a1) 25%, transparent); }
.hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; margin-top: 16px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 55%, white), color-mix(in oklab, var(--a2) 55%, white)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.18rem); max-width: 640px; margin: 20px 0 0; color: rgb(226 232 240 / 0.86); }
.hero .lead a { color: #99f6e4; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero .btn { background: #fff; color: #0f172a; box-shadow: 0 16px 30px -14px rgb(0 0 0 / 0.6); }
.hero .btn.ghost { background: rgb(255 255 255 / 0.06); color: #fff; border-color: rgb(255 255 255 / 0.22); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding: 0; list-style: none; }
.chips li { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #e2e8f0; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); padding: 7px 12px; border-radius: 999px; }
.chips li::before { content: ''; width: 15px; height: 15px; flex: none; border-radius: 50%; background: rgb(94 234 212 / 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%235eead4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
.shot { position: relative; margin: 0; }
.shot::before { content: ''; position: absolute; inset: -12% -8%; z-index: -1; background: radial-gradient(closest-side, color-mix(in oklab, var(--a2) 50%, transparent), transparent), radial-gradient(closest-side at 70% 70%, color-mix(in oklab, var(--a1) 40%, transparent), transparent); filter: blur(30px); }
.shot .frame { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.14); transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); }
.shot .frame .dots { display: flex; gap: 6px; padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.shot .frame .dots i { width: 9px; height: 9px; border-radius: 50%; background: #fb7185; } .shot .frame .dots i + i { background: #fbbf24; } .shot .frame .dots i + i + i { background: #34d399; }
.shot img { width: 100%; height: auto; max-height: 380px; object-fit: cover; object-position: top; }
.shot.phone { justify-self: center; width: min(250px, 64vw); }
.shot.phone .frame { border-radius: 38px; padding: 8px; background: #020617; transform: perspective(1400px) rotateY(-9deg) rotateZ(1deg); }
.shot.phone img { border-radius: 30px; max-height: 460px; }
@media (max-width: 940px) { .shot .frame { transform: none; } }

/* Sections: alternating grounds, a large heading, generous space */
.section { padding: 56px 0; }
.section:nth-of-type(even) { background: var(--alt); }
.section h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; max-width: 760px; }
.section > .wrap > p.intro { max-width: 700px; margin: 10px 0 0; font-size: 1rem; color: var(--muted); }
.grid { --gap: 14px; display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: 24px; }
.grid > * { flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: min(100%, 230px); max-width: 100%; overflow-wrap: anywhere; }
.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--lift); border-color: color-mix(in oklab, var(--teal) 25%, var(--line)); }
.card h3 { display: flex; align-items: center; gap: 11px; font-size: 0.98rem; font-weight: 700; line-height: 1.25; }
.card p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card p a { font-weight: 600; }
.dot { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; box-shadow: 0 12px 24px -12px rgb(16 24 40 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.dot svg { width: 18px; height: 18px; }
.t0 { background: linear-gradient(135deg, #14b8a6, #0f766e); } .t1 { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.t2 { background: linear-gradient(135deg, #f59e0b, #ea580c); } .t3 { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.t4 { background: linear-gradient(135deg, #f43f5e, #db2777); } .t5 { background: linear-gradient(135deg, #10b981, #047857); }

/* Split: words on the left, a dark glass panel on the right */
.split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split p { margin: 12px 0 0; }
.ticks { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.panel { position: relative; overflow: hidden; background: var(--night); color: #e2e8f0; border-radius: 20px; padding: 22px; box-shadow: var(--lift); }
.panel h3 { color: #fff; font-size: 1.15rem; }
.panel .ticks li { color: #e2e8f0; font-size: 14.5px; padding: 10px 12px 10px 42px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 14px; }
.panel .ticks li::before { left: 12px; top: 10px; background-color: rgb(94 234 212 / 0.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%235eead4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.panel a { color: #99f6e4; }

/* Steps: numbered, joined by a line */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); position: relative; }
.steps li { counter-increment: s; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 800 1.6rem/1 'Jakarta', sans-serif; letter-spacing: -0.04em; background: linear-gradient(135deg, #8b5cf6, #14b8a6); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.steps li:not(:last-child)::after { content: ''; position: absolute; top: 30px; right: -14px; width: 14px; height: 2px; background: linear-gradient(90deg, #8b5cf6, #14b8a6); }
@media (max-width: 960px) { .steps li::after { display: none; } }
.steps h3 { font-size: 1rem; }
.steps p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.roles .card ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.roles .card li { position: relative; padding-left: 22px; color: var(--muted); }
.roles .card li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-2); }

/* Questions: the heading on the left, the answers on the right */
.narrow { max-width: 820px; }
.faq { display: grid; gap: 8px; margin-top: 20px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; }
.faq summary { cursor: pointer; font: 700 0.98rem/1.4 'Jakarta', sans-serif; color: var(--ink); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal-soft); color: var(--teal); font-size: 1.15rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }

/* Links to other pages */
a.card { color: inherit; }
a.card:hover { text-decoration: none; }
a.card h3::after { content: '→'; margin-left: auto; padding-left: 8px; color: var(--teal); transition: transform .15s ease; }
a.card:hover h3::after { transform: translateX(3px); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 15px 6px 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); font: 600 14px/1.2 'Jakarta', sans-serif; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pill:hover { text-decoration: none; transform: translateY(-1px); border-color: color-mix(in oklab, var(--teal) 35%, var(--line)); box-shadow: var(--shadow); }
.pill .dot { width: 28px; height: 28px; border-radius: 9px; box-shadow: none; }
.pill .dot svg { width: 15px; height: 15px; }
.note { margin-top: 24px; font-size: 14px; color: var(--muted); }

/* Call to action */
.band { position: relative; overflow: hidden; margin: 48px 0 56px; border-radius: 26px; padding: 40px 28px; text-align: center; color: #fff; background: var(--tint); box-shadow: 0 40px 80px -40px rgb(13 148 136 / 0.7); }
.band::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.band h2 { position: relative; color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.1rem); max-width: 760px; margin: 0 auto; }
.band p { position: relative; color: rgb(226 232 240 / 0.82); max-width: 600px; margin: 10px auto 0; }
.band .cta-row { position: relative; justify-content: center; }
.band .btn { background: #fff; color: #0f172a; }
.band .btn.ghost { background: rgb(255 255 255 / 0.06); color: #fff; border-color: rgb(255 255 255 / 0.25); }

/* "Only in Classwell": the five no other school system in Pakistan had when we looked, on a dark band */
.only { align-self: flex-start; margin-bottom: 8px; font-size: 9.5px !important; padding: 5px 9px !important; display: inline-flex; align-items: center; gap: 4px; font: 800 10.5px/1 'Jakarta', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #451a03; background: linear-gradient(90deg, #fcd34d, #facc15); padding: 6px 10px; border-radius: 999px; box-shadow: 0 6px 16px -8px rgb(245 158 11 / 0.9); }
.section.onlyband { background: var(--night); color: #cbd5e1; }
.onlyband h2 { color: #fff; }
.onlyband .wrap > p.intro { color: rgb(226 232 240 / 0.75); }
.onlyband .card { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.12); box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.8); backdrop-filter: blur(8px); }
.onlyband .card:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.2); }
.onlyband .card h3 { color: #fff; }
.onlyband .card p { color: rgb(203 213 225 / 0.9); }

/* Footer */
.foot { border-top: 1px solid var(--line); background: var(--card); }
.foot .cols { display: grid; gap: 28px; padding: 48px 0; grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 760px) { .foot .cols { grid-template-columns: 1fr 1fr; } .foot .about { grid-column: 1 / -1; } }
.foot .fh { margin: 0 0 12px; font: 700 12px/1 'Geist', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.foot ul a { color: var(--body); }
.foot .about p { font-size: 14px; margin: 12px 0 0; max-width: 320px; }
.foot .legal { border-top: 1px solid var(--line); padding: 16px 0; text-align: center; font-size: 13px; color: var(--muted); }

/* a page with no screen of its own: the headline centred */
.hero.solo .hero-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hero.solo .crumbs ol, .hero.solo .cta-row, .hero.solo .chips { justify-content: center; }
.hero.solo .lead { margin-inline: auto; }
.hero.solo h1 { max-width: 900px; }

/* phones: shorter sections, two lines of card text, a smaller screen in the hero */
@media (max-width: 640px) {
  .section { padding: 40px 0; }
  .hero { padding: 18px 0 40px; }
  .hero-grid { gap: 28px; }
  .shot img { max-height: 230px; }
  .shot.phone { width: min(190px, 52vw); }
  .shot.phone img { max-height: 340px; }
  .card { padding: 15px 16px; }
  .card p { -webkit-line-clamp: 2; line-clamp: 2; font-size: 13.5px; }
  .grid { --gap: 10px; margin-top: 18px; }
  .steps { gap: 10px; }
  .steps li { padding: 15px 16px; }
  .band { margin: 32px 0 40px; padding: 30px 20px; }
  .chips li { font-size: 12px; padding: 6px 10px; }
}