| Server IP : 103.243.232.44 / Your IP : 216.73.216.250 Web Server : LiteSpeed System : Linux server17213-10344.hostycare.online 5.14.0-687.38.1.el9_8.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Aug 12 17:19:12 EDT 2026 x86_64 User : iamakash ( 1400) PHP Version : 8.1.34 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/iamakash/kautuki.co.in/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex">
<title>Kautuki — Verified live tutoring for Bharat</title>
<meta name="description" content="Verified live tutoring for Class 6–12 across Tier 2–4 India — pay per class, first class free — plus a free study library: video lessons, notes, practice and teacher-marked assignments.">
<link rel="icon" href="logo/favicon-k.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="logo/app-icon-k.svg">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Caveat:wght@500;700&display=swap" rel="stylesheet">
<style>
/* =====================================================================
Kautuki v2.1 — "exam paper" edition.
One continuous red margin rule runs the length of the page; sections
are numbered like questions, verification reads as a marking scheme,
and the low-bandwidth story is chalk on a blackboard. Mobile-first:
no fixed widths, fluid type via clamp(), tiny JS (slider, scroll-spy,
gallery lightbox, form post).
===================================================================== */
:root {
--paper: #FDF8F0;
--paper-deep: #F6EFE2;
--ink: #0F2557;
--ink-soft: #41557F;
--ink-faint: #5A6B8C;
--amber: #F5A623;
--amber-deep: #B87508;
--red: #C93B2E;
--rule: rgba(15, 37, 87, .10);
--margin-rule: rgba(201, 59, 46, .38);
--m: clamp(38px, 7vw, 84px); /* width of the left margin */
--gutter: clamp(18px, 4vw, 56px); /* breathing room after the rule */
--hdr-h: 128px; /* measured by JS, used for anchors */
--desk: #EAE0CC; /* the desk the sheet lies on */
--bleed-r: clamp(0px, calc(4vw - 16px), 32px); /* wide blocks push into the right padding */
--bleed-l: clamp(0px, calc(var(--gutter) - 16px), 40px); /* ...and toward the margin rule */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: radial-gradient(120% 60% at 50% 0%, #F1E8D7 0%, var(--desk) 70%, #E3D8C2 100%) fixed;
color: var(--ink);
font-family: 'Hanken Grotesk', system-ui, sans-serif;
font-size: 16.5px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { color: var(--ink); text-decoration-color: rgba(15,37,87,.3); text-underline-offset: 3px; }
a:hover { color: var(--amber-deep); }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; line-height: 1.08; letter-spacing: -.015em; margin: 0; }
::selection { background: var(--amber); color: var(--ink); }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.script { font-family: 'Caveat', cursive; }
.redpen { font-family: 'Caveat', cursive; color: var(--red); }
/* ---- the paper: continuous margin rule -------------------------- */
.paper {
position: relative; max-width: 1160px; margin: 0 auto; min-height: 100vh;
background: var(--paper);
box-shadow: 0 0 0 1px rgba(15,37,87,.07), 0 30px 70px -34px rgba(15,37,87,.45), 0 2px 0 rgba(255,255,255,.6) inset;
}
.paper::before {
content: '';
position: absolute; top: 0; bottom: 0; left: var(--m);
width: 2px; background: var(--margin-rule);
}
section, footer { position: relative; }
section[id] { scroll-margin-top: calc(var(--hdr-h) + 10px); }
.body-cell { padding-left: calc(var(--m) + var(--gutter)); padding-right: clamp(16px, 4vw, 48px); }
/* margin annotations sit in the red-ruled margin */
.marginal {
position: absolute; left: 0; width: var(--m);
text-align: center; color: var(--red);
font-family: 'Caveat', cursive; font-weight: 700;
font-size: clamp(17px, 2.4vw, 26px); line-height: 1.1;
white-space: nowrap; overflow: hidden;
}
/* ---- stamp buttons (rectangular, hard shadow — not pills) -------- */
.stamp {
display: inline-block; background: var(--amber); color: var(--ink);
border: 2px solid var(--ink); border-radius: 3px;
font-weight: 800; font-size: 16px; letter-spacing: .01em;
padding: 13px 22px; text-decoration: none;
box-shadow: 4px 4px 0 var(--ink);
transition: transform .12s ease, box-shadow .12s ease;
}
.stamp:hover { color: var(--ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.stamp.ghost { background: #fff; }
.stamp.chalk { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: 4px 4px 0 rgba(253,248,240,.4); }
.stamp.chalk:hover { color: var(--paper); box-shadow: 2px 2px 0 rgba(253,248,240,.4); }
.hl { background: linear-gradient(transparent 55%, rgba(245,166,35,.55) 55% 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* ---- exam header (locked to the top of the viewport) ------------- */
.hdr {
position: sticky; top: 0; z-index: 40;
background: var(--paper);
padding-top: clamp(8px, 1.2vw, 12px);
}
.hdr::before {
content: ''; position: absolute; top: 0; bottom: 0; left: var(--m);
width: 2px; background: var(--margin-rule);
}
.hdr::after, .trust::before, .trust::after, footer::before {
content: ''; position: absolute; left: var(--m); right: 0; height: 2px; background: var(--ink);
}
.hdr::after, .trust::after { bottom: 0; }
.trust::before, footer::before { top: 0; }
.hdr-top { display: flex; flex-wrap: nowrap; gap: 8px 22px; align-items: center; padding-bottom: 6px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.logo img { display: block; height: clamp(46px, 4.8vw, 64px); width: auto; }
.hdr-sub {
font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-faint); line-height: 1.5; white-space: nowrap;
padding-left: 18px; border-left: 2px solid var(--margin-rule);
}
.hdr-cta { margin-left: auto; padding: 10px 16px; font-size: 14.5px; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
/* the question index doubles as the nav: each entry is a small stamp */
.idx-wrap { position: relative; border-top: 1px solid var(--rule); }
.idx {
display: flex; flex-wrap: nowrap; gap: 6px; align-items: center;
padding: 9px 0 12px;
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.idx::-webkit-scrollbar { display: none; }
/* soft edges hint that the row scrolls when it cannot fit */
.idx-wrap::before, .idx-wrap::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none;
opacity: 0; transition: opacity .15s ease; z-index: 1;
}
.idx-wrap::before { left: 0; background: linear-gradient(90deg, var(--paper), rgba(253,248,240,0)); }
.idx-wrap::after { right: 0; background: linear-gradient(270deg, var(--paper), rgba(253,248,240,0)); }
.idx-wrap.more-r::after, .idx-wrap.more-l::before { opacity: 1; }
.idx a {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
padding: 7px 11px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff;
font-size: 13.5px; font-weight: 700; color: var(--ink-soft); text-decoration: none; line-height: 1.2;
white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.idx a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--ink-faint); flex: 0 0 auto; }
.idx a:hover { color: var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: translate(-1px, -1px); }
.idx a.on { background: var(--amber); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.idx a.on::before { background: var(--red); border-color: var(--red); }
/* ---- hero: 3-banner slider ---------------------------------------- */
.hero { padding-top: clamp(28px, 4vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.slider { position: relative; margin-left: calc(-1 * var(--bleed-l)); margin-right: calc(-1 * var(--bleed-r)); }
.slides {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none;
border: 2px solid var(--ink); border-radius: 3px; background: #fff;
box-shadow: 6px 6px 0 rgba(245,166,35,.5);
}
.slides::-webkit-scrollbar { display: none; }
.slide {
flex: 0 0 100%; min-width: 100%; scroll-snap-align: start;
display: grid; grid-template-columns: 1.2fr .8fr;
gap: clamp(18px, 3vw, 44px); align-items: center;
padding: clamp(24px, 4vw, 48px);
}
.slide h1, .slide h2 { font-size: clamp(27px, 3.8vw, 48px); font-weight: 900; margin: 0 0 12px; }
.slide .dim { color: var(--amber-deep); }
.slide .sub { color: var(--ink-soft); margin: 0 0 22px; max-width: 48ch; font-size: clamp(15px, 1.3vw, 17.5px); }
.slide .go { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.slide .go .plain { font-weight: 700; }
.slide .art { display: flex; justify-content: center; }
.slide .art svg { width: 100%; max-width: 340px; height: auto; }
.dots { display: flex; gap: 10px; justify-content: center; padding: 16px 0 0; }
.dots button {
width: 13px; height: 13px; padding: 0; cursor: pointer;
border: 2px solid var(--ink); border-radius: 3px; background: transparent;
}
.dots button.on { background: var(--amber); }
.ticks { display: flex; flex-wrap: wrap; gap: 7px 26px; padding: 0; margin: 0; list-style: none; font-weight: 600; color: var(--ink-soft); font-size: 15px; }
.ticks .redpen { font-size: 21px; line-height: 1; margin-right: 7px; }
/* ---- trust banner (replaces the old "general instructions") ------- */
.trust { padding-top: clamp(22px, 3vw, 32px); padding-bottom: clamp(22px, 3vw, 32px); }
.trust .kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
.trust-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 28px; }
.trust-row li { display: flex; gap: 12px; align-items: flex-start; }
.trust-row .ti {
flex: 0 0 40px; height: 40px; display: grid; place-items: center;
border: 2px solid var(--ink); border-radius: 3px; background: #fff;
box-shadow: 3px 3px 0 rgba(245,166,35,.55);
}
.trust-row .ti svg { width: 21px; height: 21px; }
.trust-row b { display: block; font-weight: 800; font-size: 15.5px; line-height: 1.25; margin-bottom: 3px; }
.trust-row .d { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
/* ---- question sections ------------------------------------------- */
.q { padding-top: clamp(52px, 7vw, 96px); padding-bottom: clamp(24px, 3vw, 40px); }
.q-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 8px; }
.q-head h2 { font-size: clamp(27px, 3.6vw, 44px); font-weight: 900; }
.marks { font-size: 13.5px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
.q-kicker { font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-soft); max-width: 62ch; margin: 0 0 28px; }
.q-cta { margin: 26px 0 8px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.q-cta .plain { font-weight: 700; }
/* answer sheet steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 720px; }
.steps li {
position: relative; padding: 16px 44px 16px 66px;
border-bottom: 1px solid var(--rule);
}
.steps li:first-child { border-top: 1px solid var(--rule); }
.steps .n {
position: absolute; left: 0; top: 14px;
font-family: 'Fraunces', serif; font-weight: 900; font-size: 32px; color: var(--amber-deep);
}
.steps h3 { font-size: 20px; font-weight: 700; margin-bottom: 3px; }
.steps p { margin: 0; color: var(--ink-soft); }
.steps .redpen { position: absolute; right: 2px; top: 16px; font-size: 24px; }
/* class formats — laid out like the options of an MCQ */
.formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; margin: 0 0 30px; }
.fmt {
position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 3px;
padding: 18px 18px 16px; box-shadow: 4px 4px 0 rgba(245,166,35,.45);
}
.fmt .opt { font-family: 'Fraunces', serif; font-weight: 900; font-size: 22px; color: var(--red); line-height: 1; }
.fmt .meta { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); margin: 10px 0 2px; }
.fmt h3 { font-size: 19.5px; font-weight: 700; }
.fmt p { margin: 6px 0 0; color: var(--ink-soft); font-size: 14.5px; }
.fmt .best { margin-top: 10px; font-size: 13.5px; color: var(--ink); }
.fmt .best b { color: var(--red); font-family: 'Caveat', cursive; font-size: 17px; font-weight: 700; margin-right: 4px; }
.fees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px 44px; align-items: start; max-width: 960px; }
.fees h3 { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.fees .ticks { flex-direction: column; gap: 8px; }
.fees .ticks li { display: flex; align-items: flex-start; }
.fees .ticks .redpen { margin-top: -2px; }
.rough {
border: 2px dashed var(--ink-faint); border-radius: 3px; background: rgba(255,255,255,.6);
padding: 16px 20px 14px;
}
.rough .rk { font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px; color: var(--red); margin: 0 0 6px; }
.rough table { width: 100%; border-collapse: collapse; font-family: 'Caveat', cursive; font-size: 21px; font-weight: 600; }
.rough td { padding: 5px 0; border-bottom: 1px dotted rgba(15,37,87,.3); vertical-align: baseline; }
.rough td:last-child { text-align: right; white-space: nowrap; }
.rough tr.sub td { font-size: 16px; color: var(--ink-soft); font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; border-bottom: 0; padding-top: 14px; text-align: left; }
.rough tr.tot td { border-top: 2px solid var(--ink); border-bottom: 0; color: var(--amber-deep); font-size: 25px; font-weight: 700; }
.rough .fine { font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; color: var(--ink-faint); margin: 10px 0 0; }
/* ---- study kit (learning on your own) ----------------------------- */
.kit {
list-style: none; margin: 0; padding: 0; max-width: 980px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 26px;
}
.kit li {
position: relative; background: #fff; border: 1px solid rgba(15,37,87,.14); border-radius: 3px;
padding: 18px 18px 16px; box-shadow: 0 16px 34px -22px rgba(15,37,87,.5);
}
.kit li.star { border: 2px solid var(--ink); box-shadow: 5px 5px 0 rgba(245,166,35,.5); }
.kit .ki {
width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px;
border: 2px solid var(--ink); border-radius: 3px; background: var(--paper);
box-shadow: 3px 3px 0 rgba(245,166,35,.55);
}
.kit .ki svg { width: 21px; height: 21px; }
.kit .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); display: inline-block; }
.kit h3 { font-size: 18.5px; font-weight: 700; margin: 2px 0 4px; }
.kit p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.kit-note { margin: 24px 0 0; font-size: 15px; color: var(--ink-soft); max-width: 66ch; }
/* ---- why Kautuki: the problem struck out, the fix ticked in -------- */
.whys { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.whys li { position: relative; padding: 20px 0 22px 62px; border-bottom: 1px solid var(--rule); }
.whys li:first-child { border-top: 2px solid var(--ink); }
.whys .pn {
position: absolute; left: 0; top: 18px;
font-family: 'Fraunces', serif; font-weight: 900; font-size: 30px; color: var(--ink-faint);
}
.whys h3 { font-size: 21px; font-weight: 700; margin-bottom: 6px; color: var(--ink-faint); }
.whys h3 .strike {
background-image: linear-gradient(transparent 47%, var(--red) 47% 53%, transparent 53%);
background-repeat: no-repeat; background-size: 100% 100%;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.whys .prob { margin: 0 0 12px; color: var(--ink-faint); font-size: 15px; max-width: 64ch; }
.whys .fix { display: flex; gap: 10px; margin: 0; align-items: flex-start; max-width: 64ch; font-size: 16px; }
.whys .fix .redpen { font-size: 22px; line-height: 1.1; flex: 0 0 auto; }
.whys .fix b { color: var(--red); font-family: 'Caveat', cursive; font-size: 20px; font-weight: 700; margin-right: 5px; }
/* ---- included with every class (Q2) -------------------------------- */
.incl {
max-width: 960px; margin: 0 0 28px; padding: 14px 18px 16px;
border: 1.5px solid var(--ink); border-radius: 3px; background: rgba(245, 166, 35, .10);
}
.incl .rk { font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px; color: var(--red); margin: 0 0 8px; }
.incl .ticks { gap: 8px 24px; font-size: 14.5px; }
.incl .ticks li { display: flex; align-items: flex-start; }
.incl .ticks .redpen { margin-top: -2px; }
/* ---- comparison table ---------------------------------------------- */
.cmp-wrap { max-width: 900px; }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 12px 14px; font-size: 15px; }
.cmp thead th {
font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--ink-faint); border-bottom: 2px solid var(--ink); padding-bottom: 8px;
}
.cmp thead .us {
background: var(--amber); color: var(--ink); border: 2px solid var(--ink); border-bottom: 0;
font-family: 'Fraunces', serif; font-size: 17px; font-weight: 900; letter-spacing: .01em; text-transform: none;
}
.cmp .rl { width: 24%; font-weight: 800; color: var(--ink); }
.cmp .us {
width: 40%; font-weight: 600;
background: rgba(245, 166, 35, .12); border-left: 2px solid var(--ink); border-right: 2px solid var(--ink);
}
.cmp .them { width: 36%; color: var(--ink-faint); }
.cmp tbody tr { border-bottom: 1px solid var(--rule); }
.cmp tbody tr:last-child .us { border-bottom: 2px solid var(--ink); }
.cmp .us .redpen { font-size: 19px; margin-right: 7px; }
.cmp-note { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-faint); max-width: 68ch; }
/* ---- outcome arc (what changes, and by when) ----------------------- */
.arc {
list-style: none; margin: 0; padding: 0; max-width: 980px; position: relative;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 26px;
}
.arc::before { content: ''; position: absolute; left: 8px; right: 8px; top: 10px; border-top: 2px dashed var(--margin-rule); }
.arc li { position: relative; padding-top: 36px; }
.arc li::before {
content: ''; position: absolute; top: 2px; left: 0; width: 17px; height: 17px; border-radius: 50%;
background: var(--paper); border: 2.5px solid var(--red); box-sizing: border-box;
}
.arc li:last-child::before { background: var(--amber); }
.arc .when { display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: 3px; }
.arc h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.arc p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.arc li:nth-child(1) { --d: .25s; } .arc li:nth-child(2) { --d: .45s; }
.arc li:nth-child(3) { --d: .65s; } .arc li:nth-child(4) { --d: .85s; }
.arc-note { margin: 26px 0 0; font-size: 15px; color: var(--ink-soft); max-width: 66ch; }
/* syllabus (subjects & boards) */
.syllabus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 22px 40px; max-width: 960px; }
.syllabus h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.syllabus p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.chips li { border: 1.5px solid var(--ink); border-radius: 3px; padding: 5px 11px; font-size: 14px; font-weight: 700; background: #fff; }
.chips li.soon { border-style: dashed; color: var(--ink-faint); background: transparent; }
.syl-note { margin: 22px 0 0; font-size: 15px; color: var(--ink-soft); max-width: 62ch; }
/* marking scheme (verification) */
.scheme { max-width: 780px; }
.gate { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.gate:first-child { border-top: 2px solid var(--ink); }
.gate .gn { font-family: 'Fraunces', serif; font-weight: 900; font-size: 26px; color: var(--red); flex: 0 0 44px; }
.gate .gbody { flex: 1 1 300px; min-width: 0; }
.gate h3 { font-size: 20px; font-weight: 700; margin-bottom: 3px; }
.gate p { margin: 0; color: var(--ink-soft); }
.gate .tag {
flex: 0 0 auto; align-self: center;
font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--red); border: 1.5px solid currentColor; border-radius: 3px;
padding: 5px 10px; transform: rotate(-2deg); opacity: .85; white-space: nowrap;
}
.scheme-note { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; padding: 18px 0 4px; color: var(--ink-soft); font-weight: 600; font-size: 15px; }
.scheme-note .redpen { font-size: 22px; }
/* ---- blackboard --------------------------------------------------- */
.board-wrap { padding: clamp(20px, 3vw, 36px) 0 clamp(10px, 2vw, 20px); margin-left: calc(-1 * var(--bleed-l)); margin-right: calc(-1 * var(--bleed-r)); }
.board {
background: #10264F;
border: 10px solid #A9713B; border-radius: 6px;
box-shadow: inset 0 0 60px rgba(0,0,0,.35), 0 22px 44px -26px rgba(15,37,87,.7);
color: rgba(253,248,240,.92);
padding: clamp(24px, 4vw, 48px);
}
.board .chalk-title { font-family: 'Caveat', cursive; font-weight: 700; font-size: clamp(30px, 4vw, 46px); color: #FDF8F0; line-height: 1.1; }
.board .chalk-sub { color: rgba(253,248,240,.75); max-width: 60ch; margin: 10px 0 26px; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px 34px; }
.board-item { border-top: 1.5px dashed rgba(253,248,240,.35); padding-top: 14px; }
.board-item h3 { font-size: 17.5px; font-weight: 700; color: #FDF8F0; font-family: 'Hanken Grotesk', sans-serif; margin-bottom: 4px; }
.board-item p { margin: 0; font-size: 15px; color: rgba(253,248,240,.72); }
.board-eq {
margin: 30px 0 6px; font-family: 'Caveat', cursive; font-weight: 700;
font-size: clamp(24px, 3.4vw, 38px); color: #FDF8F0;
display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline;
}
.board-eq .who { font-size: 17px; color: rgba(253,248,240,.6); }
/* ---- notebook pages (who it's for) -------------------------------- */
.pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(20px, 3vw, 36px); align-items: start; }
.page {
background: #fff; border: 1px solid rgba(15,37,87,.13); border-radius: 2px;
box-shadow: 0 16px 34px -22px rgba(15,37,87,.5);
padding: 26px clamp(18px, 3vw, 30px) 22px clamp(40px, 5vw, 52px);
position: relative;
}
.page::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(24px, 3.4vw, 32px); width: 1.5px; background: var(--margin-rule); }
.page:nth-child(1) { transform: rotate(-.5deg); }
.page:nth-child(2) { transform: rotate(.4deg); }
.page:nth-child(3) { transform: rotate(-.3deg); }
.page h3 { font-size: 23px; font-weight: 900; margin-bottom: 14px; }
.page ul { list-style: none; margin: 0; padding: 0; }
.page li { padding: 9px 0; }
.page .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); }
.page h4 { margin: 1px 0 2px; font-size: 17.5px; font-weight: 700; }
.page p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.page.star { border-color: var(--ink); border-width: 2px; box-shadow: 5px 5px 0 rgba(245,166,35,.5); }
.page .stk, .kit .stk {
position: absolute; top: -12px; right: 14px; transform: rotate(3deg);
font-family: 'Caveat', cursive; font-weight: 700; font-size: 18px; color: var(--red);
border: 1.5px solid var(--red); border-radius: 3px; background: var(--paper); padding: 1px 10px;
}
/* ---- staff-room notice -------------------------------------------- */
.notice-wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 720px); justify-content: center; align-items: center; gap: clamp(18px, 3vw, 40px); padding: clamp(16px, 2vw, 28px) 0; }
.pin-photo { margin: 0; background: #fff; border: 1px solid rgba(15,37,87,.15); padding: 10px 10px 12px; transform: rotate(2.5deg); box-shadow: 0 18px 40px -24px rgba(15,37,87,.55); position: relative; }
.pin-photo::before { content: ''; position: absolute; top: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F9C86A, var(--amber-deep) 70%); box-shadow: 0 3px 5px rgba(15,37,87,.35); z-index: 1; }
.pin-photo img { display: block; width: 100%; height: auto; aspect-ratio: 10 / 8; object-fit: cover; object-position: 60% 30%; }
.pin-photo figcaption { font-family: 'Caveat', cursive; font-size: 18px; color: var(--ink-soft); padding: 8px 2px 0; }
.notice {
position: relative; max-width: 720px; width: 100%;
background: var(--paper-deep); border: 1px solid rgba(15,37,87,.15); border-radius: 2px;
box-shadow: 0 18px 40px -24px rgba(15,37,87,.55);
transform: rotate(-.7deg);
padding: clamp(26px, 4vw, 44px);
}
.notice::before {
content: ''; position: absolute; top: -9px; left: 50%; margin-left: -9px;
width: 18px; height: 18px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #7FA3E8, var(--ink) 70%);
box-shadow: 0 3px 5px rgba(15,37,87,.35);
}
.notice .kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.notice h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 900; margin-bottom: 12px; }
.notice > p { color: var(--ink-soft); margin: 0 0 20px; max-width: 58ch; }
.leaders { list-style: none; margin: 0 0 24px; padding: 0; max-width: 540px; }
.leaders li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-weight: 600; color: var(--ink-soft); font-size: 15px; }
.leaders b { color: var(--ink); font-weight: 800; white-space: nowrap; }
.leaders .dots { flex: 1; border-bottom: 1.5px dotted var(--ink-faint); transform: translateY(-4px); min-width: 30px; }
.earn { max-width: 720px; margin: clamp(18px, 3vw, 30px) auto 0; }
.earn .rough { background: #fff; }
/* ---- schools circular --------------------------------------------- */
.photo-wide { margin: 0 0 clamp(22px, 3vw, 34px); border: 2px solid var(--ink); border-radius: 3px; background: #fff; padding: 8px; box-shadow: 6px 6px 0 rgba(245,166,35,.5); max-width: 900px; position: relative; }
.photo-wide img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5.6; object-fit: cover; object-position: 50% 35%; }
.photo-wide figcaption { position: absolute; right: 18px; bottom: 18px; font-family: 'Caveat', cursive; font-weight: 700; font-size: 20px; color: var(--red); background: var(--paper); border: 1.5px solid var(--red); border-radius: 3px; padding: 2px 12px; transform: rotate(-2deg); }
.circular { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 44px; max-width: 900px; margin: 0 0 8px; }
.circular .sc { border-top: 2px solid var(--ink); padding-top: 12px; }
.circular .sc .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep); }
.circular .sc h3 { font-size: 19px; font-weight: 700; margin: 2px 0 4px; }
.circular .sc p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.sc-note { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; padding: 18px 0 4px; color: var(--ink-soft); font-weight: 600; font-size: 15px; max-width: 960px; }
.sc-note .redpen { font-size: 22px; }
/* ---- gallery (pinned photos) -------------------------------------- */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; padding: 8px 0 6px; }
.gal figure.wide { grid-column: span 2; }
.gal figure.wide img { aspect-ratio: 8 / 3.15; object-position: 50% 30%; }
.gal figure {
position: relative; margin: 0; background: #fff; border: 2px solid var(--ink); border-radius: 3px;
overflow: hidden; cursor: pointer; box-shadow: 4px 4px 0 rgba(245,166,35,.45);
transition: transform .15s ease;
}
.gal figure:nth-child(odd) { transform: rotate(-.7deg); }
.gal figure:nth-child(even) { transform: rotate(.6deg); }
.gal figure:hover { transform: rotate(0) translate(-2px, -2px); }
.gal img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-deep); }
.gal figcaption { padding: 8px 12px 10px; font-family: 'Caveat', cursive; font-size: 19px; font-weight: 600; border-top: 1.5px solid var(--rule); }
.gal .kind {
position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
background: #fff; border: 1.5px solid var(--ink); border-radius: 3px; padding: 3px 8px;
}
.gal .play {
position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
width: 56px; height: 56px; border-radius: 50%; background: var(--amber);
border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center;
}
.gal .play svg { width: 22px; height: 22px; margin-left: 3px; }
.gal-note { margin: 16px 0 0; font-size: 14px; color: var(--ink-faint); }
dialog.lb {
border: 2px solid var(--ink); border-radius: 3px; padding: 0; background: #fff;
width: min(960px, 94vw); box-shadow: 8px 8px 0 rgba(245,166,35,.5);
}
dialog.lb::backdrop { background: rgba(15,37,87,.72); }
.lb-body { background: var(--ink); }
.lb-body img, .lb-body video, .lb-body iframe { display: block; width: 100%; max-height: 78vh; object-fit: contain; border: 0; }
.lb-body iframe, .lb-body video { aspect-ratio: 16 / 9; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-family: 'Caveat', cursive; font-size: 21px; font-weight: 600; }
.lb-x { cursor: pointer; font-family: 'Hanken Grotesk', sans-serif; padding: 6px 12px; font-size: 13.5px; box-shadow: 2px 2px 0 var(--ink); }
/* ---- testimonials (hidden until we have real ones) ---------------- */
.stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.story { background: #fff; border: 1px solid rgba(15,37,87,.13); border-radius: 2px; padding: 22px 22px 18px; box-shadow: 0 16px 34px -22px rgba(15,37,87,.5); }
.story:nth-child(odd) { transform: rotate(-.5deg); } .story:nth-child(even) { transform: rotate(.5deg); }
.story blockquote { margin: 0 0 12px; font-family: 'Caveat', cursive; font-size: 22px; line-height: 1.3; }
.story .who { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.story .who b { color: var(--ink); font-weight: 800; }
/* ---- free textbooks ------------------------------------------------ */
.books { list-style: none; margin: 0; padding: 0; max-width: 760px; border-top: 2px solid var(--ink); }
.books li { border-bottom: 1px solid var(--rule); }
.books a { display: flex; gap: 16px; align-items: center; padding: 15px 4px 15px 0; text-decoration: none; }
.books a:hover h3 { color: var(--amber-deep); }
.books .bi {
flex: 0 0 44px; height: 56px; border: 2px solid var(--ink); border-radius: 2px; background: #fff;
display: grid; place-items: center; font-family: 'Fraunces', serif; font-weight: 900; font-size: 13px; color: var(--ink);
box-shadow: inset 6px 0 0 var(--amber);
}
.books h3 { font-size: 18px; font-weight: 700; }
.books p { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.books .ext { margin-left: auto; color: var(--amber-deep); font-weight: 800; white-space: nowrap; }
.books-note { margin: 18px 0 0; font-size: 14px; color: var(--ink-faint); max-width: 62ch; }
/* ---- doubts (FAQ) -------------------------------------------------- */
.doubts { max-width: 760px; }
.doubts details { border-bottom: 1px solid var(--rule); }
.doubts details:first-of-type { border-top: 2px solid var(--ink); }
.doubts summary {
list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: baseline;
padding: 18px 4px 18px 0; font-size: 18px; font-weight: 700;
}
.doubts summary::-webkit-details-marker { display: none; }
.doubts summary .qm { color: var(--red); font-family: 'Fraunces', serif; font-weight: 900; flex: 0 0 auto; }
.doubts summary .plus { margin-left: auto; color: var(--amber-deep); font-weight: 800; font-size: 22px; transition: transform .2s; flex: 0 0 auto; }
.doubts details[open] .plus { transform: rotate(45deg); }
.doubts .ans { display: flex; gap: 16px; padding: 0 30px 20px 0; color: var(--ink-soft); }
.doubts .ans .am { color: var(--amber-deep); font-family: 'Fraunces', serif; font-weight: 900; flex: 0 0 auto; }
.doubts .ans p { margin: 0; }
/* ---- admission form (the only early-access form on the page) ------- */
.adm { border: 2px solid var(--ink); border-radius: 3px; background: #fff; max-width: 760px; padding: clamp(24px, 4vw, 40px); box-shadow: 6px 6px 0 rgba(245,166,35,.5); }
.adm .kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.adm h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 900; margin-bottom: 8px; }
.adm > p { color: var(--ink-soft); margin: 0 0 22px; max-width: 56ch; }
.adm-fields { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 20px; }
.field { flex: 1 1 220px; min-width: 0; }
.field label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.field .wrap { display: flex; align-items: baseline; gap: 8px; border-bottom: 1.5px dotted var(--ink-faint); }
.field .cc { font-weight: 700; white-space: nowrap; }
.field input {
width: 100%; border: 0; outline: 0; background: transparent;
font-family: 'Caveat', cursive; font-size: 24px; font-weight: 600; color: var(--ink);
padding: 2px 0 4px;
}
.field.bad .wrap { border-bottom-color: var(--red); }
.adm-role { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.adm-role .rl { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); flex: 0 0 100%; }
.adm-role label {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
border: 1.5px solid var(--ink); border-radius: 3px; padding: 7px 14px; font-weight: 700; background: #fff;
transition: box-shadow .12s ease, background .12s ease;
}
.adm-role input { accent-color: var(--amber-deep); margin: 0; }
.adm-role label:has(input:checked) { background: var(--amber); box-shadow: 2px 2px 0 var(--ink); }
.adm .ticks { margin-bottom: 24px; }
.adm-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.adm button.stamp { cursor: pointer; font-family: inherit; }
.adm button.stamp[disabled] { opacity: .6; cursor: progress; transform: none; }
.adm .fine { font-size: 13px; color: var(--ink-faint); margin: 14px 0 0; max-width: 56ch; }
.adm .err { display: none; margin: 12px 0 0; font-size: 15px; font-weight: 600; color: var(--red); }
.adm.bad .err { display: block; }
.adm .done { display: none; margin-top: 16px; font-size: 23px; line-height: 1.25; }
.adm.sent .done { display: block; }
.adm.sent .adm-fields, .adm.sent .adm-role, .adm.sent .adm-actions, .adm.sent .fine, .adm.sent .ticks { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* ---- closing + footer ---------------------------------------------- */
.closing { padding-top: clamp(40px, 6vw, 70px); padding-bottom: clamp(30px, 4vw, 50px); }
.closing h2 { font-size: clamp(28px, 4vw, 52px); font-weight: 900; max-width: 22ch; margin-bottom: 14px; }
.closing p { color: var(--ink-soft); max-width: 54ch; margin: 0; }
footer { margin-top: clamp(30px, 4vw, 50px); }
.eop { text-align: center; font-size: 26px; padding: 26px 0 4px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; padding: 18px 0 30px; }
.foot-grid h3 { font-size: 12.5px; font-family: 'Hanken Grotesk', sans-serif; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin: 7px 0; font-size: 15px; font-weight: 600; }
.foot-grid a { text-decoration: none; color: var(--ink-soft); }
.foot-grid a:hover { color: var(--amber-deep); }
.foot-brand .logo img { height: 52px; }
.foot-brand .tag { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 6px 0 12px; }
.foot-brand p { font-size: 14.5px; color: var(--ink-soft); margin: 8px 0 0; max-width: 34ch; }
.foot-brand address { font-style: normal; font-size: 14.5px; color: var(--ink-soft); margin: 14px 0 0; line-height: 1.5; }
.foot-brand address b { color: var(--ink); font-weight: 800; }
.foot-brand address a { color: var(--ink); text-decoration: none; font-weight: 700; }
.todo { color: var(--red); font-family: 'Caveat', cursive; font-size: 18px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid var(--rule); padding: 16px 0 30px; font-size: 13.5px; color: var(--ink-faint); font-weight: 500; }
.foot-legal .links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* ---- narrow screens ------------------------------------------------- */
@media (max-width: 960px) {
.kit { grid-template-columns: 1fr 1fr; }
.arc { grid-template-columns: 1fr 1fr; }
.arc::before { display: none; }
.notice-wrap { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
.trust-row { grid-template-columns: 1fr 1fr; }
.gal { grid-template-columns: 1fr 1fr; }
.gal figure.wide img { aspect-ratio: 8 / 3.3; }
.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
:root { --bleed-l: 0px; --bleed-r: 0px; }
.notice-wrap { grid-template-columns: 1fr; }
.pin-photo { max-width: 320px; margin: 0 auto 10px; }
.paper { box-shadow: none; min-height: 0; }
.circular { grid-template-columns: 1fr; }
.rough { padding: 14px 14px 12px; }
.rough table { font-size: 18px; }
.rough td:first-child { padding-right: 10px; }
.rough td:last-child { white-space: normal; }
.rough tr.tot td { font-size: 21px; }
.rough tr.sub td { font-size: 14.5px; }
.slide { grid-template-columns: 1fr; gap: 12px; padding: 22px 18px 26px; }
.slide .art { order: -1; }
.slide .art svg { max-width: 190px; }
.slide h1, .slide h2 { font-size: clamp(23px, 6.4vw, 31px); }
/* The margin column is a desktop luxury: on a phone it eats ~15% of the
width and strands the Q-numbers. Drop the rule, reclaim the width, and
let each Q-number flow inline as a red-pen stamp above its title. */
.paper::before, .hdr::before { display: none; }
.hdr::after, .trust::before, .trust::after, footer::before { left: 0; }
.body-cell { padding-left: 18px; padding-right: 18px; }
/* Header: one slim row (logo + compact CTA), no tagline, and the Q-index
becomes a single swipeable row of buttons. */
.hdr-sub { display: none; }
.hdr { padding-top: 10px; }
.hdr-top { justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.logo img { height: 42px; }
.hdr-cta { padding: 9px 14px; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); }
.idx-wrap { margin: 0 -18px; }
.idx { padding: 10px 18px 12px; }
.marginal {
position: static; width: auto; display: inline-block;
font-size: 20px; line-height: 1;
border: 1.5px solid rgba(201, 59, 46, .5); border-radius: 3px;
padding: 3px 12px 5px; transform: rotate(-2deg);
margin-bottom: 12px;
}
.foot-grid { grid-template-columns: 1fr; }
}
/* the comparison table restacks: one card per row, labels inlined */
@media (max-width: 620px) {
.cmp thead { position: absolute; left: -9999px; }
.cmp, .cmp tbody, .cmp tbody tr, .cmp td { display: block; width: auto; }
/* the column widths above are more specific than `.cmp td` — undo them by name */
.cmp .rl, .cmp .us, .cmp .them { width: auto; display: block; }
.cmp tbody tr { border: 1.5px solid var(--ink); border-radius: 3px; margin-bottom: 12px; padding: 10px 12px; }
.cmp td { padding: 3px 0; border: 0; }
.cmp tbody tr:last-child .us { border-bottom: 0; }
.cmp .rl { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.cmp .us { background: rgba(245,166,35,.14); border: 0; border-radius: 3px; padding: 6px 8px; margin: 4px 0; }
.cmp .them { background: transparent; }
.cmp .us::before { content: "Kautuki: "; font-weight: 800; color: var(--red); }
.cmp .them::before { content: "The usual model: "; font-weight: 800; color: var(--ink-faint); }
.arc { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 520px) {
.kit { grid-template-columns: 1fr; }
.trust-row { grid-template-columns: 1fr; }
.gal { grid-template-columns: 1fr; }
.gal figure.wide { grid-column: auto; }
.gal figure.wide img { aspect-ratio: 4 / 3; }
}
/* ---- motion: scroll reveals, stamps, ticks, chalk, hero life ------ */
/* Three reveal flavours:
.rv - moves with `transform` (widest browser support), for plain blocks.
.rv-t - moves with the independent `translate` property, so it never
overwrites an element's own paper tilt or its :hover lift.
.rv-m - the same, sideways, for the annotations in the red margin.
Browsers without `translate` just fade those in - nothing is ever hidden. */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.rv-x { transform: translateX(-16px); }
.js .rv.rv-x.in { transform: none; }
.js .rv-t { opacity: 0; translate: 0 20px; transition: opacity .6s ease, translate .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv-t.in { opacity: 1; translate: 0 0; }
.js .rv-m { opacity: 0; translate: -14px 0; transition: opacity .5s ease .1s, translate .5s cubic-bezier(.2,.7,.2,1) .1s; }
.js .rv-m.in { opacity: 1; translate: 0 0; }
/* header: the red pen tracks how far down the paper you have read */
.hdr .prog {
position: absolute; left: var(--m); right: 0; bottom: 0; height: 2px; z-index: 1;
background: var(--red); transform: scaleX(var(--prog, 0)); transform-origin: left center;
}
/* hero: copy lands line by line on the slide that is showing */
.js .slide > div:first-child { opacity: 0; transform: translateY(14px); transition: opacity .5s ease .1s, transform .5s ease .1s; }
.js .slide.on > div:first-child { opacity: 1; transform: none; }
.js .slide h1, .js .slide h2, .js .slide .sub, .js .slide .go {
opacity: 0; translate: 0 12px;
transition: opacity .5s ease, translate .55s cubic-bezier(.2,.7,.2,1);
}
.js .slide .sub { transition-delay: .12s; }
.js .slide .go { transition-delay: .24s; }
.js .slide.on h1, .js .slide.on h2, .js .slide.on .sub, .js .slide.on .go { opacity: 1; translate: 0 0; }
/* underline highlighter sweeps in on the hero */
.js .slide .hl { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .7s ease .5s; }
.js .slide.on .hl { background-size: 100% 100%; }
/* hero art only animates on the visible slide (SMIL runs regardless; this fades it) */
.js .slide .art { opacity: 0; transform: scale(.96); transition: opacity .6s ease .2s, transform .6s ease .2s; }
.js .slide.on .art { opacity: 1; transform: none; }
.dots button { transition: background .2s ease, scale .2s cubic-bezier(.2,1.4,.4,1); }
.dots button.on { scale: 1.15; }
/* trust banner: each shield stamps itself onto the paper */
.js .trust-row .ti, .js .kit .ki {
opacity: 0; scale: .55; rotate: -14deg;
transition: opacity .3s ease, scale .4s cubic-bezier(.3,1.6,.4,1), rotate .4s cubic-bezier(.3,1.6,.4,1), transform .18s ease;
transition-delay: calc(var(--i, 0) * 70ms + .18s), calc(var(--i, 0) * 70ms + .18s), calc(var(--i, 0) * 70ms + .18s), 0s;
}
.js .trust-row li.in .ti, .js .kit li.in .ki { opacity: 1; scale: 1; rotate: 0deg; }
/* Q1: red-pen ticks draw in after their row lands, numbers count in */
.js .steps .redpen { opacity: 0; scale: .4; rotate: -18deg; transition: opacity .3s ease, scale .35s cubic-bezier(.3,1.6,.4,1), rotate .35s cubic-bezier(.3,1.6,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .35s); }
.js .steps li.in .redpen { opacity: 1; scale: 1; rotate: 0deg; }
.js .steps .n { opacity: 0; translate: -10px 0; transition: opacity .35s ease, translate .4s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms + .12s); }
.js .steps li.in .n { opacity: 1; translate: 0 0; }
/* Q2: option letters stamp on, and the rough work is totted up row by row */
/* (inline-block: an inline box cannot be scaled or translated) */
.fmt .opt, .page li .tag, .circular .sc .tag { display: inline-block; }
.js .fmt .opt { opacity: 0; scale: 1.6; transition: opacity .25s ease, scale .35s cubic-bezier(.2,1.5,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .25s); }
.js .fmt.in .opt { opacity: 1; scale: 1; }
.js .rough tr.tot td {
background-image: linear-gradient(rgba(245,166,35,.4), rgba(245,166,35,.4));
background-repeat: no-repeat; background-size: 0 100%;
transition: background-size .55s cubic-bezier(.4,0,.2,1) .3s;
}
.js .rough tr.tot.in td { background-size: 100% 100%; }
/* Why: the problem is struck through, then the fix is ticked in */
.js .whys h3 .strike { background-size: 0% 100%; transition: background-size .5s cubic-bezier(.4,0,.2,1) .2s; }
.js .whys li.in h3 .strike { background-size: 100% 100%; }
.js .whys li .pn { opacity: 0; translate: -8px 0; transition: opacity .35s ease, translate .4s cubic-bezier(.2,.7,.2,1); }
.js .whys li.in .pn { opacity: 1; translate: 0 0; }
.js .whys li .fix { opacity: 0; translate: 0 6px; transition: opacity .4s ease .5s, translate .4s ease .5s; }
.js .whys li.in .fix { opacity: 1; translate: 0 0; }
/* the comparison ticks land a beat after their row */
.js .cmp .us .redpen { opacity: 0; scale: .4; transition: opacity .25s ease, scale .3s cubic-bezier(.3,1.6,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .2s); }
.js .cmp tr.in .us .redpen { opacity: 1; scale: 1; }
/* the outcome arc: the dashed line is ruled in, then each milestone lands */
.js .arc::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.4,0,.2,1) .15s; }
.js .arc.in::before { transform: scaleX(1); }
.js .arc li::before { opacity: 0; scale: .3; transition: opacity .3s ease var(--d, 0s), scale .4s cubic-bezier(.3,1.6,.4,1) var(--d, 0s); }
.js .arc.in li::before { opacity: 1; scale: 1; }
.js .arc li .when, .js .arc li h3, .js .arc li p {
opacity: 0; translate: 0 8px;
transition: opacity .45s ease calc(var(--d, 0s) + .1s), translate .45s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + .1s);
}
.js .arc.in li .when, .js .arc.in li h3, .js .arc.in li p { opacity: 1; translate: 0 0; }
/* Q3: subject chips pop on in sequence */
.js .chips li { transition: transform .15s ease, background .15s ease, opacity .35s ease, scale .35s cubic-bezier(.3,1.5,.4,1); }
/* delays are per-property so the stagger never slows the :hover lift */
.js .chips li.rv-t { opacity: 0; scale: .8; translate: 0 0; transition-delay: 0s, 0s, calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms); }
.js .chips li.rv-t.in { opacity: 1; scale: 1; }
/* Q4: verification tags thump down like a rubber stamp */
.js .gate .tag { opacity: 0; scale: 1.5; transition: opacity .25s ease, scale .3s cubic-bezier(.2,1.4,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .4s); }
.js .gate.in .tag { opacity: .85; scale: 1; }
.js .gate .gn { opacity: 0; translate: -10px 0; transition: opacity .35s ease, translate .4s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms + .1s); }
.js .gate.in .gn { opacity: 1; translate: 0 0; }
/* Q5: the chalk title writes itself, then the board fills in */
.js .board .chalk-title { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.4,0,.2,1) .25s; }
.js .board.in .chalk-title { clip-path: inset(0 -2% 0 0); }
.js .board-item.rv { transition-delay: calc(var(--i, 0) * 90ms + .45s); }
.js .board .board-eq { opacity: 0; translate: 0 10px; transition: opacity .6s ease .95s, translate .6s ease .95s; }
.js .board.in .board-eq { opacity: 1; translate: 0 0; }
/* Q6: notebook pages - the sticker thumps on, entries fill in one by one */
.js .page .stk, .js .kit .stk { opacity: 0; scale: 1.7; transition: opacity .25s ease .5s, scale .35s cubic-bezier(.2,1.5,.4,1) .5s; }
.js .page.in .stk, .js .kit li.in .stk { opacity: 1; scale: 1; }
.js .page li .tag { opacity: 0; translate: -6px 0; transition: opacity .35s ease, translate .35s ease; transition-delay: calc(var(--i, 0) * 70ms + .2s); }
.js .page li.in .tag { opacity: 1; translate: 0 0; }
/* Q7: the notice's dotted leader lines rule themselves in */
.js .leaders li { opacity: 0; translate: 0 8px; transition: opacity .45s ease, translate .45s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
.js .leaders li.in { opacity: 1; translate: 0 0; }
.js .leaders li .dots { transform: translateY(-4px) scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.4,0,.2,1); transition-delay: calc(var(--i, 0) * 80ms + .15s); }
.js .leaders li.in .dots { transform: translateY(-4px) scaleX(1); }
/* Q8: the circular's tags fade up, the photo's caption stamps on */
.js .circular .sc .tag, .js .kit li .tag { opacity: 0; translate: -6px 0; transition: opacity .35s ease, translate .35s ease; transition-delay: calc(var(--i, 0) * 70ms + .2s); }
.js .circular .sc.in .tag, .js .kit li.in .tag { opacity: 1; translate: 0 0; }
.js .photo-wide figcaption { opacity: 0; scale: 1.4; transition: opacity .3s ease .35s, scale .4s cubic-bezier(.2,1.5,.4,1) .35s; }
.js .photo-wide.in figcaption { opacity: 1; scale: 1; }
/* Q9: the pinned photos get their labels after they land */
.js .gal figure .kind, .js .gal figure .play { opacity: 0; scale: .65; transition: opacity .3s ease, scale .4s cubic-bezier(.3,1.5,.4,1); transition-delay: calc(var(--i, 0) * 70ms + .3s); }
.js .gal figure.in .kind, .js .gal figure.in .play { opacity: 1; scale: 1; }
.gal figure img { transition: scale .45s cubic-bezier(.2,.7,.2,1); }
.gal figure:hover img { scale: 1.035; }
.gal .play { transition: transform .18s ease; }
.gal figure:hover .play { transform: translate(-50%, -50%) scale(1.08); }
/* Q10: each book's spine slides off the shelf */
.js .books li .bi {
opacity: 0; translate: -10px 0;
transition: opacity .35s ease, translate .4s cubic-bezier(.2,.7,.2,1), transform .18s ease;
transition-delay: calc(var(--i, 0) * 70ms + .15s), calc(var(--i, 0) * 70ms + .15s), 0s;
}
.js .books li.in .bi { opacity: 1; translate: 0 0; }
/* Q11: doubts open and shut */
.doubts summary { transition: background .18s ease; }
.doubts summary:hover { background: rgba(245,166,35,.1); }
.doubts summary .qm { transition: translate .18s ease; }
.doubts summary:hover .qm { translate: 2px 0; }
.doubts .ans { animation: none; }
.doubts details[open] .ans { animation: ansIn .3s ease both; }
@keyframes ansIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* admission slip: the form fills itself in, field by field */
.js .adm .kicker, .js .adm > h2, .js .adm > p, .js .adm-fields .field, .js .adm-role, .js .adm .ticks li, .js .adm-actions {
opacity: 0; translate: 0 10px; transition: opacity .45s ease, translate .45s cubic-bezier(.2,.7,.2,1);
transition-delay: calc(var(--j, 0) * 70ms + .15s);
}
.js .adm.in .kicker, .js .adm.in > h2, .js .adm.in > p, .js .adm.in .adm-fields .field,
.js .adm.in .adm-role, .js .adm.in .ticks li, .js .adm.in .adm-actions { opacity: 1; translate: 0 0; }
.field .wrap { position: relative; }
.field .wrap::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 1.5px;
background: var(--amber-deep); transform: scaleX(0); transform-origin: left center;
transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.field .wrap:focus-within::after { transform: scaleX(1); }
.adm.sent .done { animation: ansIn .45s ease both; }
/* hover life on the paper scraps and the stamps */
.stamp:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.fmt, .page, .story, .books a, .sc, .kit li { transition: transform .18s ease, box-shadow .18s ease; }
.fmt:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(245,166,35,.55); }
.page:hover, .kit li:hover { transform: translateY(-3px) rotate(0); }
.kit li:hover .ki { transform: rotate(-6deg) scale(1.06); }
.kit .ki { transition: transform .18s ease; }
.books a:hover .bi { transform: rotate(-4deg); }
.books .bi { transition: transform .18s ease; }
.trust-row .ti { transition: transform .18s ease; }
.trust-row li:hover .ti { transform: rotate(-6deg) scale(1.06); }
.notice { transition: transform .25s ease; }
.notice:hover { transform: rotate(0); }
.chips li:hover { transform: translateY(-2px); background: var(--amber); }
.idx a, .stamp, .foot-grid a { transition-property: transform, box-shadow, background, color; transition-duration: .12s; transition-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; animation: none !important; }
/* every reveal lands in its finished state at once - but the paper tilts
are decoration, not motion, so `transform` is left alone where one holds a tilt */
.js .rv, .js .slide > div:first-child, .js .slide .art { opacity: 1; transform: none; }
.js .rv, .js .rv-t, .js .rv-m { opacity: 1; translate: none; }
.js .trust-row .ti, .js .steps .redpen, .js .steps .n, .js .fmt .opt, .js .gate .gn,
.js .board .board-eq, .js .page .stk, .js .page li .tag, .js .leaders li,
.js .circular .sc .tag, .js .kit .ki, .js .kit .stk, .js .kit li .tag, .js .photo-wide figcaption, .js .gal figure .kind, .js .gal figure .play,
.js .books li .bi, .js .chips li.rv-t, .js .slide h1, .js .slide h2, .js .slide .sub, .js .slide .go,
.js .adm .kicker, .js .adm > h2, .js .adm > p, .js .adm-fields .field, .js .adm-role,
.js .adm .ticks li, .js .adm-actions {
opacity: 1; translate: none; scale: none; rotate: none;
}
.js .whys li .pn, .js .whys li .fix, .js .cmp .us .redpen,
.js .arc li::before, .js .arc li .when, .js .arc li h3, .js .arc li p {
opacity: 1; translate: none; scale: none;
}
.js .whys h3 .strike { background-size: 100% 100%; }
.js .arc::before { transform: none; }
.js .gate .tag { opacity: .85; scale: none; }
.js .leaders li .dots { transform: translateY(-4px); }
.js .board .chalk-title { clip-path: none; }
.js .slide .hl { background-size: 100% 100%; }
.js .rough tr.tot td { background-size: 100% 100%; }
.field .wrap::after { transform: scaleX(0); }
.hdr .prog { display: none; }
}
</style>
</head>
<body>
<div class="paper">
<!-- ================= exam header (sticky) ================= -->
<header class="hdr body-cell" id="top">
<div class="hdr-top">
<a class="logo" href="#top" aria-label="Kautuki — home">
<img src="logo/logo-wordmark-navy.svg" alt="Kautuki" width="250" height="126">
</a>
<span class="hdr-sub">Powered by curiosity<br>Enhanced by intelligence</span>
<a class="stamp hdr-cta" href="#early">Get early access</a>
</div>
<div class="idx-wrap" id="idxWrap">
<nav class="idx" id="idx" aria-label="Sections">
<a href="#why">Why Kautuki</a>
<a href="#how">How it works</a>
<a href="#classes">Classes & fees</a>
<a href="#learn">Self-study</a>
<a href="#compare">Compare</a>
<a href="#subjects">Subjects</a>
<a href="#verify">Verification</a>
<a href="#teach">Teach</a>
<a href="#schools">Schools</a>
<a href="#gallery">Gallery</a>
<a href="#books">Free books</a>
<a href="#faq">Doubts</a>
<a href="#outcomes">Outcomes</a>
</nav>
</div>
<span class="prog" id="prog" aria-hidden="true"></span>
</header>
<!-- ================= hero ================= -->
<section class="hero body-cell" aria-label="Highlights">
<div class="slider">
<div class="slides" id="heroSlides" aria-roledescription="carousel" aria-label="Kautuki highlights">
<!-- Slide 1 . the distance: a child and a teacher, joined by a paper plane -->
<div class="slide on">
<div>
<h1>Your child is not behind. <span class="dim">They were only</span> <span class="hl">further from a teacher.</span></h1>
<p class="sub">Kautuki is a live tutoring marketplace for Class 6–12 across Tier 2–4 India — hand-verified teachers, live 1:1 and small-batch classes, paid per class.</p>
<div class="go">
<a class="stamp" href="#early">Get early access</a>
<a class="plain" href="#how">See how it works ↓</a>
</div>
</div>
<div class="art" aria-hidden="true">
<svg viewBox="0 0 340 240" fill="none">
<path d="M30 40q6-10 16-8 4-8 14-6" stroke="#0F2557" stroke-width="2" opacity=".25" stroke-linecap="round"/>
<path d="M266 34q6-10 16-8" stroke="#0F2557" stroke-width="2" opacity=".25" stroke-linecap="round"/>
<path d="M0 196Q65 152 138 196L138 240L0 240Z" fill="#F6EFE2"/>
<path d="M198 200Q265 158 340 200L340 240L198 240Z" fill="#F6EFE2"/>
<rect x="30" y="140" width="46" height="36" fill="#fff" stroke="#0F2557" stroke-width="2"/>
<path d="M24 140L53 116L82 140Z" fill="#F5A623" stroke="#0F2557" stroke-width="2" stroke-linejoin="round"/>
<rect x="46" y="156" width="13" height="20" fill="#F5A623" stroke="#0F2557" stroke-width="2"/>
<circle cx="108" cy="150" r="9" fill="#fff" stroke="#0F2557" stroke-width="2"/>
<rect x="99" y="160" width="18" height="24" rx="8" fill="#F5A623" stroke="#0F2557" stroke-width="2"/>
<rect x="116" y="164" width="9" height="14" rx="2" fill="#0F2557"/>
<path d="M128 160q5-3 5-8M133 163q8-4 8-13" stroke="#C93B2E" stroke-width="2" stroke-linecap="round"/>
<circle cx="252" cy="130" r="9" fill="#fff" stroke="#0F2557" stroke-width="2"/>
<rect x="243" y="140" width="18" height="27" rx="8" fill="#0F2557" stroke="#0F2557" stroke-width="2"/>
<rect x="270" y="106" width="54" height="40" fill="#fff" stroke="#0F2557" stroke-width="2"/>
<path d="M276 152l-4 22M318 152l4 22" stroke="#0F2557" stroke-width="2" stroke-linecap="round"/>
<text x="280" y="130" font-family="Caveat, cursive" font-size="17" fill="#C93B2E" font-weight="700">a + b</text>
<path d="M279 136h30" stroke="#C93B2E" stroke-width="1.5" opacity=".6"/>
<path id="planePath" d="M128 156C165 74 216 70 258 112" stroke="#C93B2E" stroke-width="2" stroke-dasharray="5 6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" from="66" to="0" dur="2.2s" repeatCount="indefinite"/>
</path>
<path d="M-11 -1l24-8-16 20-2-9Z" fill="#fff" stroke="#0F2557" stroke-width="1.8" stroke-linejoin="round">
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto" keyPoints="0;1;1" keyTimes="0;0.7;1" calcMode="linear"><mpath href="#planePath"/></animateMotion>
</path>
</svg>
</div>
</div>
<!-- Slide 2 . one bar is enough: a live class running on a basic phone over 3G -->
<div class="slide">
<div>
<h2>A classroom that survives <span class="hl">one bar of signal.</span></h2>
<p class="sub">The class keeps going when the network doesn’t — built for the phone your family already owns.</p>
<div class="go">
<a class="stamp ghost" href="#phone">See how it holds up</a>
</div>
</div>
<div class="art" aria-hidden="true">
<svg viewBox="0 0 340 240" fill="none">
<rect x="118" y="24" width="106" height="192" rx="15" fill="#fff" stroke="#0F2557" stroke-width="2.5"/>
<path d="M158 34h26" stroke="#0F2557" stroke-width="2" stroke-linecap="round" opacity=".4"/>
<rect x="128" y="44" width="86" height="140" rx="5" fill="#FDF8F0" stroke="#0F2557" stroke-width="1" opacity=".9"/>
<text x="134" y="62" font-family="Caveat, cursive" font-size="14" fill="#41557F" font-weight="700">3G</text>
<rect x="184" y="56" width="4" height="6" fill="#F5A623"><animate attributeName="opacity" values="1;.25;1" dur="1.6s" repeatCount="indefinite"/></rect>
<rect x="190" y="52" width="4" height="10" stroke="#0F2557" stroke-width="1" opacity=".45"/>
<rect x="196" y="48" width="4" height="14" stroke="#0F2557" stroke-width="1" opacity=".45"/>
<rect x="202" y="44" width="4" height="18" stroke="#0F2557" stroke-width="1" opacity=".45"/>
<circle cx="152" cy="86" r="12" fill="#F5A623" stroke="#0F2557" stroke-width="2"/>
<path d="M170 80q4 5 0 12M178 76q7 9 0 20" stroke="#0F2557" stroke-width="2" stroke-linecap="round" opacity=".6"/>
<rect x="134" y="104" width="74" height="46" fill="#fff" stroke="#0F2557" stroke-width="1.5"/>
<text x="140" y="122" font-family="Caveat, cursive" font-size="14" fill="#0F2557" font-weight="700">x² + 5x + 6</text>
<text x="140" y="140" font-family="Caveat, cursive" font-size="14" fill="#0F2557" font-weight="700">= (x+2)(x+3)</text>
<path d="M140 144h44" stroke="#C93B2E" stroke-width="1.5" opacity=".7" stroke-dasharray="44" stroke-dashoffset="44"><animate attributeName="stroke-dashoffset" values="44;0;0;44" keyTimes="0;.3;.8;1" dur="4s" repeatCount="indefinite"/></path>
<circle cx="150" cy="168" r="8" fill="#F6EFE2" stroke="#0F2557" stroke-width="1.5"/>
<circle cx="171" cy="168" r="8" fill="#F5A623" stroke="#0F2557" stroke-width="1.5"/>
<circle cx="192" cy="168" r="8" fill="#F6EFE2" stroke="#0F2557" stroke-width="1.5"/>
<rect x="34" y="58" width="66" height="24" rx="12" fill="#fff" stroke="#0F2557" stroke-width="1.8"/>
<text x="46" y="74" font-family="Caveat, cursive" font-size="15" fill="#C93B2E" font-weight="700">1 bar ✓</text>
<path d="M100 82q14 10 20 24" stroke="#0F2557" stroke-width="1.5" stroke-dasharray="4 5" opacity=".5"/>
<circle cx="252" cy="70" r="5" fill="#C93B2E"><animate attributeName="opacity" values="1;1;0;0" dur="1.4s" repeatCount="indefinite"/></circle>
<text x="262" y="75" font-family="Hanken Grotesk, sans-serif" font-size="11" font-weight="800" fill="#0F2557" letter-spacing="1">REC</text>
<path d="M244 106q26 16 8 40" stroke="#0F2557" stroke-width="1.5" stroke-dasharray="4 5" opacity=".5"/>
<path d="M250 142l2 8-8-2" stroke="#0F2557" stroke-width="1.5" opacity=".5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<!-- Slide 3 . hand-verified: a teacher ID under the magnifier, stamped, first class free -->
<div class="slide">
<div>
<h2>Hand-verified teachers. <span class="hl">First class ₹0.</span></h2>
<p class="sub">Checked by a person, not a script, before they ever meet your child.</p>
<div class="go">
<a class="stamp ghost" href="#verify">See how we verify</a>
</div>
</div>
<div class="art" aria-hidden="true">
<svg viewBox="0 0 340 240" fill="none">
<g transform="rotate(-4 140 112)">
<rect x="58" y="60" width="164" height="104" rx="9" fill="#fff" stroke="#0F2557" stroke-width="2.5"/>
<circle cx="96" cy="100" r="17" fill="#F6EFE2" stroke="#0F2557" stroke-width="2"/>
<path d="M84 112q12 10 24 0" stroke="#0F2557" stroke-width="1.5" opacity=".55"/>
<rect x="124" y="86" width="72" height="8" rx="4" fill="#0F2557"/>
<rect x="124" y="101" width="52" height="6" rx="3" fill="#0F2557" opacity=".3"/>
<rect x="124" y="113" width="62" height="6" rx="3" fill="#0F2557" opacity=".3"/>
<text x="74" y="150" font-family="Caveat, cursive" font-size="16" fill="#C93B2E" font-weight="700">✓ ID   ✓ degree   ✓ record</text>
</g>
<g transform="rotate(-12 252 88)">
<rect x="206" y="70" width="96" height="34" rx="5" stroke="#C93B2E" stroke-width="2.5"/>
<text x="217" y="93" font-family="Hanken Grotesk, sans-serif" font-size="15" font-weight="800" fill="#C93B2E" letter-spacing="2">VERIFIED</text>
</g>
<g><animateTransform attributeName="transform" type="translate" values="0 0;-6 -5;0 0" dur="3.2s" repeatCount="indefinite" calcMode="spline" keySplines=".45 0 .55 1;.45 0 .55 1"/>
<circle cx="212" cy="160" r="23" fill="rgba(245,166,35,.14)" stroke="#0F2557" stroke-width="2.5"/>
<path d="M229 177l20 20" stroke="#0F2557" stroke-width="5" stroke-linecap="round"/>
</g>
<path d="M92 178h40l12 14-12 14H92Z" fill="#F5A623" stroke="#0F2557" stroke-width="2" stroke-linejoin="round"/>
<circle cx="100" cy="192" r="3" fill="#fff" stroke="#0F2557" stroke-width="1.5"/>
<text x="108" y="199" font-family="Fraunces, serif" font-size="17" font-weight="900" fill="#0F2557">₹0</text>
<path d="M97 189q-14-10-14-26" stroke="#0F2557" stroke-width="1.5" stroke-dasharray="3 4" opacity=".5"/>
</svg>
</div>
</div>
<!-- Slide 4 . more than a class: a library to work through on your own -->
<div class="slide">
<div>
<h2>On the days you don’t book a teacher, <span class="hl">keep learning.</span></h2>
<p class="sub">Video lessons, chapter notes, practice that marks itself and your own notebook — plus assignments a verified teacher checks by hand.</p>
<div class="go">
<a class="stamp ghost" href="#learn">See what’s inside</a>
</div>
</div>
<div class="art" aria-hidden="true">
<svg viewBox="0 0 340 240" fill="none">
<path d="M22 44q6-10 16-8 4-8 14-6" stroke="#0F2557" stroke-width="2" opacity=".25" stroke-linecap="round"/>
<path d="M300 40q6-10 16-8" stroke="#0F2557" stroke-width="2" opacity=".25" stroke-linecap="round"/>
<!-- the video lesson -->
<rect x="150" y="46" width="156" height="98" rx="6" fill="#F6EFE2" stroke="#0F2557" stroke-width="2.5"/>
<path d="M150 130h156" stroke="#0F2557" stroke-width="1.5" opacity=".3"/>
<circle cx="228" cy="88" r="22" fill="#F5A623" stroke="#0F2557" stroke-width="2.5"/>
<path d="M222 79l14 9-14 9z" fill="#0F2557"/>
<rect x="158" y="134" width="140" height="6" rx="3" fill="#fff" stroke="#0F2557" stroke-width="1.4"/>
<rect x="159.4" y="135.4" height="3.2" rx="1.6" fill="#C93B2E" width="0">
<animate attributeName="width" values="0;137;137;0" keyTimes="0;.72;.94;1" dur="6s" repeatCount="indefinite"/>
</rect>
<text x="150" y="164" font-family="Caveat, cursive" font-size="18" fill="#41557F" font-weight="700">Ch. 4 · Quadratics</text>
<!-- the notebook, with an assignment being ticked -->
<g transform="rotate(-6 84 148)">
<rect x="30" y="82" width="104" height="132" rx="4" fill="#fff" stroke="#0F2557" stroke-width="2.5"/>
<path d="M44 82v132" stroke="#C93B2E" stroke-width="1.5" opacity=".45"/>
<path d="M54 106h64M54 122h64M54 138h44" stroke="#0F2557" stroke-width="2" opacity=".28" stroke-linecap="round"/>
<path d="M56 174l13 13 26-30" stroke="#C93B2E" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="62" stroke-dashoffset="62">
<animate attributeName="stroke-dashoffset" values="62;62;0;0;62" keyTimes="0;.28;.55;.92;1" dur="6s" repeatCount="indefinite"/>
</path>
<text x="54" y="207" font-family="Caveat, cursive" font-size="17" fill="#C93B2E" font-weight="700">my notes</text>
</g>
<!-- the pencil, resting on the page -->
<g><animateTransform attributeName="transform" type="translate" values="0 0;3 -4;0 0" dur="4.5s" repeatCount="indefinite" calcMode="spline" keySplines=".45 0 .55 1;.45 0 .55 1"/>
<path d="M126 196l30-30 12 12-30 30-16 4z" fill="#F5A623" stroke="#0F2557" stroke-width="2" stroke-linejoin="round"/>
<path d="M150 172l12 12" stroke="#0F2557" stroke-width="2"/>
<path d="M122 212l4-16 12 12z" fill="#fff" stroke="#0F2557" stroke-width="2" stroke-linejoin="round"/>
</g>
</svg>
</div>
</div>
</div>
<div class="dots" id="heroDots">
<button type="button" class="on" aria-label="Slide 1"></button>
<button type="button" aria-label="Slide 2"></button>
<button type="button" aria-label="Slide 3"></button>
<button type="button" aria-label="Slide 4"></button>
</div>
</div>
</section>
<!-- ================= trust banner ================= -->
<section class="trust body-cell" aria-label="Why parents can trust Kautuki">
<p class="kicker">Read before attempting — our promise to parents</p>
<ul class="trust-row">
<li>
<span class="ti" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6z"/><path d="M9 12l2 2 4-4" stroke="#C93B2E"/></svg></span>
<div><b>100% verified teachers</b><span class="d">Every profile is checked by a person on our team before it goes live.</span></div>
</li>
<li>
<span class="ti" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/><circle cx="12" cy="15.5" r="1.3" fill="#C93B2E" stroke="none"/></svg></span>
<div><b>Secure payments</b><span class="d">Pay per class by UPI, card or net banking. Refunds follow the published policy.</span></div>
</li>
<li>
<span class="ti" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10l5-3v10l-5-3z"/><circle cx="7" cy="10" r="1.2" fill="#C93B2E" stroke="none"/></svg></span>
<div><b>Live classes only</b><span class="d">A real teacher in real time, every class. Recorded lectures are never sold as classes.</span></div>
</li>
<li>
<span class="ti" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.5"/><path d="M5 20a7 7 0 0114 0"/><path d="M17 4l2 2M19 4l-2 2" stroke="#C93B2E"/></svg></span>
<div><b>Child-safe learning environment</b><span class="d">Verified adults only, every session recorded, and parents can watch any class back.</span></div>
</li>
</ul>
</section>
<!-- ================= why Kautuki · problem and value ================= -->
<section class="q body-cell" id="why">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Why?</span>
<div class="q-head">
<h2>Why Kautuki exists.</h2>
<span class="marks">[the problem, in four parts]</span>
</div>
<p class="q-kicker">
Between a child who wants to learn and a teacher who can teach them, four things usually get in
the way. Kautuki was built to take out one at a time.
</p>
<ol class="whys">
<li>
<span class="pn">1</span>
<h3><span class="strike">The teacher you need may not be nearby</span></h3>
<p class="prob">Every town has good teachers. But the one your child needs — right subject, right board, right way of explaining — may be booked out, across town, or two districts away. Until now, your pincode decided your options.</p>
<p class="fix"><span class="redpen">✓</span><span><b>Kautuki:</b> a hand-verified teacher takes the class live, on the phone your family already owns, from anywhere in the country. Where you live stops deciding who can teach your child.</span></p>
</li>
<li>
<span class="pn">2</span>
<h3><span class="strike">You pay for the year before you know</span></h3>
<p class="prob">Coaching classes and app packages ask for the year’s fee in advance, before anyone has taught your child a single chapter — and then there is the auto fare, twice a day, six days a week.</p>
<p class="fix"><span class="redpen">✓</span><span><b>Kautuki:</b> the first class with any teacher is free. After that you pay for one class at a time — a 1:1 hour is typically ₹100–500, a batch seat a fraction of that — with no package, no deposit and no travel. A worked month is under “Classes & fees” ↓</span></p>
</li>
<li>
<span class="pn">3</span>
<h3><span class="strike">You never really know who is teaching</span></h3>
<p class="prob">A tutor arrives through a WhatsApp forward or an agency, you take their word for the degree, and then your child is alone with them for an hour.</p>
<p class="fix"><span class="redpen">✓</span><span><b>Kautuki:</b> identity, qualification papers and background are read by a person on our team before a profile can go live. Only verified adults teach, every session is recorded, and you can watch any class back. The full scheme is under “Verification” ↓</span></p>
</li>
<li>
<span class="pn">4</span>
<h3><span class="strike">In a hall of two hundred, nobody notices</span></h3>
<p class="prob">One doubt goes unasked. The chapter turns into a backlog, the backlog turns into a subject your child has decided they are bad at — and the report card says so a year later.</p>
<p class="fix"><span class="redpen">✓</span><span><b>Kautuki:</b> 1:1, or a batch of no more than twelve. Doubts don’t have to wait for the next class. Parents get a weekly view of progress, gaps and what to work on next. And a learning library keeps students going between classes.</span></p>
</li>
</ol>
</section>
<!-- ================= Q1 · how it works ================= -->
<section class="q body-cell" id="how">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q1.</span>
<div class="q-head">
<h2>Four steps to your first class.</h2>
<span class="marks">[4 marks]</span>
</div>
<p class="q-kicker">Attempt all parts. No annual package, no coaching-class commute.</p>
<ol class="steps">
<li>
<span class="n">01</span>
<h3>Sign up with a secure OTP</h3>
<p>Your mobile number and a one-time code sent to your phone. Nothing to remember, and no card to start.</p>
<span class="redpen" aria-hidden="true">✓</span>
</li>
<li>
<span class="n">02</span>
<h3>Find the right teacher</h3>
<p>Filter by subject, board, language, budget and rating. Read the profile, then book a free first class to be sure.</p>
<span class="redpen" aria-hidden="true">✓</span>
</li>
<li>
<span class="n">03</span>
<h3>Book and pay per class</h3>
<p>Pick a real slot from the teacher’s calendar and pay for that class only — UPI, card or net banking. No package, no lock-in.</p>
<span class="redpen" aria-hidden="true">✓</span>
</li>
<li>
<span class="n">04</span>
<h3>Join the class</h3>
<p>One tap into live video on any phone. The recording stays saved for revision.</p>
<span class="redpen" aria-hidden="true">✓✓</span>
</li>
</ol>
</section>
<!-- ================= Q2 · classes & fees ================= -->
<section class="q body-cell" id="classes">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q2.</span>
<div class="q-head">
<h2>Pick the class that fits.</h2>
<span class="marks">[choose any — mix as needed]</span>
</div>
<p class="q-kicker">
Four formats, one pool of verified teachers. Every teacher sets their own rate; you pay per class,
and only after the free first session.
</p>
<div class="formats">
<div class="fmt">
<span class="opt">(A)</span>
<span class="meta">60 min · per hour</span>
<h3>1:1 live class</h3>
<p>Your child alone with the teacher. The pace, the syllabus and the doubts are all theirs.</p>
<div class="best"><b>Best for</b> catching up, board-exam prep, a subject that has become a fight at home.</div>
</div>
<div class="fmt">
<span class="opt">(B)</span>
<span class="meta">≤ 12 students · per seat</span>
<h3>Small batch</h3>
<p>A group from the same class and board, taught live every week. The most affordable way to have a regular teacher.</p>
<div class="best"><b>Best for</b> weekly tuition through the year.</div>
</div>
<div class="fmt">
<span class="opt">(C)</span>
<span class="meta">30 min · flat fee</span>
<h3>Doubt clearing</h3>
<p>A short session when homework gets stuck. Book it the same day, clear it the same day.</p>
<div class="best"><b>Best for</b> the night before a test.</div>
</div>
<div class="fmt">
<span class="opt">(D)</span>
<span class="meta">2 hours · flat fee</span>
<h3>Exam special</h3>
<p>A long, focused session before a unit test or a board paper — past papers, marking tips, weak chapters.</p>
<div class="best"><b>Best for</b> the two weeks before boards.</div>
</div>
</div>
<div class="incl">
<p class="rk">Included with every class you book — at no extra fee</p>
<ul class="ticks">
<li><span class="redpen">✓</span><span><b>The recording</b>, to rewatch before the test</span></li>
<li><span class="redpen">✓</span><span><b>The whiteboard</b> from that class, saved</span></li>
<li><span class="redpen">✓</span><span><b>Session notes</b> to read later</span></li>
<li><span class="redpen">✓</span><span><b>A weekly report</b> to the parent</span></li>
<li><span class="redpen">✓</span><span><b>The study library</b>, to keep learning at any time ↓</span></li>
<li><span class="redpen">✓</span><span><b>No commute</b> — and no travel fare</span></li>
</ul>
</div>
<div class="fees">
<div>
<h3>What it costs</h3>
<ul class="ticks">
<li><span class="redpen">✓</span><span><b>Pay per class.</b> No annual fee, no package, no deposit.</span></li>
<li><span class="redpen">✓</span><span><b>Teachers set their own rates</b> and we onboard teachers who price for Tier 2–4 families: a 1:1 hour typically ₹100–500, a batch seat a fraction of that.</span></li>
<li><span class="redpen">✓</span><span><b>Nothing to lose by trying.</b> The first class with any teacher is free, and there is no commute.</span></li>
<li><span class="redpen">✓</span><span><b>The teacher is paid after the class</b>, not before — so a class that never happens is never charged.</span></li>
</ul>
</div>
<div class="rough">
<p class="rk">Rough work — a month of Maths tuition</p>
<table>
<tr><td>Weekly batch seat × 4 classes</td><td>4 × ₹60 = ₹240</td></tr>
<tr><td>One 1:1 hour before the unit test</td><td>₹300</td></tr>
<tr><td>Two doubt sessions</td><td>2 × ₹50 = ₹100</td></tr>
<tr class="tot"><td>For the month</td><td>₹640</td></tr>
</table>
<p class="fine">Illustrative — actual rates are set by each teacher and shown on their profile before you book.</p>
</div>
</div>
</section>
<!-- ================= Q3 · learning on your own ================= -->
<section class="q body-cell" id="learn">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q3.</span>
<div class="q-head">
<h2>Your learning doesn’t stop when the class ends.</h2>
<span class="marks">[one platform · every part of learning]</span>
</div>
<p class="q-kicker">
A teacher is the fastest way through a hard chapter. But learning doesn’t stop on the days
you don’t have a class. Kautuki stays open — lessons to watch, notes to read, practice
to attempt and get checked, and your own notes to create. Everything you need to keep learning,
in the same app, on the same phone.
</p>
<ul class="kit">
<li>
<span class="ki" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5" width="14" height="14" rx="2"/><path d="M16.5 11l5-3v8l-5-3z"/><path d="M7 9.5l4.5 2.5L7 14.5z" fill="#C93B2E" stroke="#C93B2E"/></svg></span>
<span class="tag">Watch</span>
<h3>A video library that follows your chapters</h3>
<p>Short lessons mapped to your board and textbook, so you watch the one topic that is giving trouble — not a whole term. Most are free; a teacher may price a longer series of their own.</p>
</li>
<li>
<span class="ki" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h9l4 4v14H6z"/><path d="M15 3v4h4"/><path d="M9 12h7M9 15.5h7M9 19h4" stroke="#C93B2E"/></svg></span>
<span class="tag">Read</span>
<h3>Chapter notes and revision sheets</h3>
<p>Written by our verified teachers and free to read on the phone — the one page you want the night before a test.</p>
</li>
<li>
<span class="ki" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1" fill="#C93B2E" stroke="#C93B2E"/></svg></span>
<span class="tag">Practise</span>
<h3>Quizzes that show what you actually know</h3>
<p>Chapter-wise practice, marked the moment you finish, with a streak that turns revision into a habit instead of a panic.</p>
</li>
<li class="star">
<span class="stk">by a person</span>
<span class="ki" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h11l3 3v15H5z"/><path d="M8.5 12.5l2.5 2.5 5-5.5" stroke="#C93B2E" stroke-width="2.4"/><path d="M8.5 18h7" opacity=".4"/></svg></span>
<span class="tag">Get it checked</span>
<h3>Assignments marked by a verified teacher</h3>
<p>Attempt the assignment, send in your answer sheet, and a verified teacher marks it with comments — so your work is checked by a person, not only scored by a machine.</p>
</li>
<li>
<span class="ki" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 4h10a2 2 0 012 2v14h-12a2 2 0 01-2-2V6a2 2 0 012-2z"/><path d="M7.5 4v16" opacity=".45"/><path d="M11 9.5l6.5-6.5 2.5 2.5L13.5 12l-3 .5z" fill="#fff" stroke="#C93B2E"/></svg></span>
<span class="tag">Write</span>
<h3>Your own notebook, saved online</h3>
<p>Make your own notes as you learn, keep the whiteboard from any class beside them, and find both again in the week of the exam.</p>
</li>
<li>
<span class="ki" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="#0F2557" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5.5h17v11h-9l-5 4v-4h-3z"/><path d="M9.5 9.2a2.6 2.6 0 114 2.2c-.8.5-1.1 1-1.1 1.8" stroke="#C93B2E"/><circle cx="12.4" cy="14.6" r=".9" fill="#C93B2E" stroke="none"/></svg></span>
<span class="tag">Ask</span>
<h3>Ask a doubt without booking a class</h3>
<p>Type the question the moment it appears. You get a worked answer straight away, and a verified teacher follows up on it.</p>
</li>
</ul>
<p class="kit-note">
<span class="redpen" style="font-size:22px">✎</span>
The library opens with the first batches and grows every week as our verified teachers add chapters.
Every NCERT textbook is already free to download — see “Free textbooks” ↓.
</p>
</section>
<!-- ================= comparison · Kautuki vs the usual model ================= -->
<section class="q body-cell" id="compare">
<span class="marginal" style="top:clamp(56px,7vw,100px)">vs.</span>
<div class="q-head">
<h2>Kautuki, next to the usual model.</h2>
<span class="marks">[side by side]</span>
</div>
<p class="q-kicker">
The same nine questions, answered by us and by the model most families have been offered so far.
</p>
<div class="cmp-wrap">
<table class="cmp">
<thead>
<tr>
<th class="rl"><span class="hp">Question</span></th>
<th class="us">Kautuki</th>
<th class="them">The usual model</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rl">What you pay for</td>
<td class="us"><span class="redpen">✓</span>One class at a time</td>
<td class="them">A package for the year, in advance</td>
</tr>
<tr>
<td class="rl">The first class</td>
<td class="us"><span class="redpen">✓</span>Free, with any teacher you like — more than one if you want</td>
<td class="them">A demo class, then the package</td>
</tr>
<tr>
<td class="rl">Who teaches</td>
<td class="us"><span class="redpen">✓</span>A teacher you choose, checked by a person on our team</td>
<td class="them">A tutor allotted to you</td>
</tr>
<tr>
<td class="rl">The class itself</td>
<td class="us"><span class="redpen">✓</span>Live, always — the recording is a bonus, never the product</td>
<td class="them">Often a recorded lecture</td>
</tr>
<tr>
<td class="rl">Class size</td>
<td class="us"><span class="redpen">✓</span>1:1, or a batch of no more than twelve</td>
<td class="them">Large batches and streams</td>
</tr>
<tr>
<td class="rl">The rate</td>
<td class="us"><span class="redpen">✓</span>Set by each teacher and shown on their profile before you book</td>
<td class="them">One price for the whole country</td>
</tr>
<tr>
<td class="rl">Stopping</td>
<td class="us"><span class="redpen">✓</span>After any class — nothing to cancel</td>
<td class="them">At the end of the package</td>
</tr>
<tr>
<td class="rl">Between classes</td>
<td class="us"><span class="redpen">✓</span>Videos, notes, practice and teacher-marked assignments, included</td>
<td class="them">A separate purchase</td>
</tr>
<tr>
<td class="rl">For the parent</td>
<td class="us"><span class="redpen">✓</span>A report every week, and every class recorded for you to watch</td>
<td class="them">On request</td>
</tr>
</tbody>
</table>
</div>
<p class="cmp-note">
<span class="redpen" style="font-size:22px">✎</span>
“The usual model” is how large tuition apps and local coaching classes commonly work today —
not any one company, and not all of them. Compare us against whoever you are actually considering:
every figure on this page is ours, and each teacher’s rate is on their profile before you book.
</p>
</section>
<!-- ================= Q4 · subjects & boards ================= -->
<section class="q body-cell" id="subjects">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q4.</span>
<div class="q-head">
<h2>Subjects and boards.</h2>
<span class="marks">[Class 6–12 · English or हिंदी]</span>
</div>
<p class="q-kicker">Teachers are matched to your child’s board and textbook, not a generic syllabus.</p>
<div class="syllabus">
<div>
<h3>Boards</h3>
<p>Search by board so the teacher follows the same chapters, in the same order, as school.</p>
<ul class="chips">
<li>CBSE</li>
<li>ICSE</li>
<li>State boards</li>
<li>NCERT-based</li>
</ul>
</div>
<div>
<h3>Class 6–10</h3>
<p>The core school subjects, taught in English or Hindi as your child prefers.</p>
<ul class="chips">
<li>Mathematics</li>
<li>Science</li>
<li>English</li>
<li>Hindi</li>
<li>Social Science</li>
</ul>
</div>
<div>
<h3>Class 11–12</h3>
<p>Science stream first; commerce follows as those teachers come on board.</p>
<ul class="chips">
<li>Physics</li>
<li>Chemistry</li>
<li>Mathematics</li>
<li>Biology</li>
<li>English</li>
<li class="soon">Accountancy · Economics (next)</li>
</ul>
</div>
</div>
<p class="syl-note">
<span class="redpen" style="font-size:22px">✎</span>
Don’t see your subject or board? Tell us in the early-access form — we onboard teachers by demand, and your request decides who we verify next.
</p>
</section>
<!-- ================= Q5 · verification ================= -->
<section class="q body-cell" id="verify">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q5.</span>
<div class="q-head">
<h2>The verification story.</h2>
<span class="marks">[3 marks — no partial credit]</span>
</div>
<p class="q-kicker">
No random tutors. Every teacher clears three checks before your child sees them —
each one reviewed by a person on our team, and any single failure ends the application.
</p>
<div class="scheme">
<div class="gate">
<span class="gn">(a)</span>
<div class="gbody">
<h3>Aadhaar identity</h3>
<p>We match the person applying to a government ID. No aliases, no borrowed profiles, no agency middlemen.</p>
</div>
<span class="tag">Identity matched</span>
</div>
<div class="gate">
<span class="gn">(b)</span>
<div class="gbody">
<h3>Qualification papers</h3>
<p>Degrees and teaching credentials are read by a human on our team, not scanned by a script.</p>
</div>
<span class="tag">Documents reviewed</span>
</div>
<div class="gate">
<span class="gn">(c)</span>
<div class="gbody">
<h3>Background check</h3>
<p>A check on record and prior institutions before the profile is allowed to go live.</p>
</div>
<span class="tag">Cleared or rejected</span>
</div>
<div class="scheme-note">
<span><span class="redpen">✎</span> Verification is repeated if a teacher changes their documents, and a profile can be pulled at any time on a parent complaint.</span>
</div>
</div>
</section>
<!-- ================= Q6 · blackboard / 3G ================= -->
<section class="q body-cell" id="phone">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q6.</span>
<div class="q-head">
<h2>Built for the phone you already own.</h2>
<span class="marks">[works on one bar]</span>
</div>
<div class="board-wrap">
<div class="board">
<div class="chalk-title">A classroom that survives one bar of signal.</div>
<p class="chalk-sub">
Adaptive bitrate video, an audio-first fallback when the signal drops, and a whiteboard
that syncs on a trickle. Built to keep the class going on an entry-level Android phone.
</p>
<div class="board-grid">
<div class="board-item">
<h3>Secure OTP sign-in</h3>
<p>A one-time code to your phone each time. Nothing to remember and nothing to leak.</p>
</div>
<div class="board-item">
<h3>Adaptive video, audio-first fallback</h3>
<p>When bandwidth drops the bitrate drops with it, and the lesson keeps going on audio.</p>
</div>
<div class="board-item">
<h3>Whiteboard that syncs slowly</h3>
<p>Strokes and notes arrive even on 3G, and stay saved for revision.</p>
</div>
<div class="board-item">
<h3>Recordings for later</h3>
<p>Every session is replayable, so a power cut is not a lost class.</p>
</div>
</div>
<div class="board-eq">
<span>x² + 5x + 6 = (x + 2)(x + 3)</span>
<span class="who">— today's class, CBSE Class 10 · Quadratics</span>
</div>
</div>
</div>
</section>
<!-- ================= Q7 · who it's for ================= -->
<section class="q body-cell" id="audience">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q7.</span>
<div class="q-head">
<h2>Who Kautuki is for.</h2>
<span class="marks">[students · parents · teachers]</span>
</div>
<p class="q-kicker">One platform, three roles. What each of you actually gets out of it.</p>
<div class="pages">
<div class="page">
<h3>Students</h3>
<ul>
<li>
<span class="tag">Attention</span>
<h4>Your own teacher, not a hall of 200</h4>
<p>In a 1:1 or a batch of twelve, the teacher knows your name and where you got stuck last week.</p>
</li>
<li>
<span class="tag">Ask</span>
<h4>Raise a hand, or type it</h4>
<p>Interrupt with a doubt on live video, or ask in chat if that is easier. Nothing waits for next month.</p>
</li>
<li>
<span class="tag">Revise</span>
<h4>Replay the class before the test</h4>
<p>Every class and every whiteboard stays saved. Rewatch the chapter, not the whole term.</p>
</li>
<li>
<span class="tag">On your own</span>
<h4>Study on the days you don’t book</h4>
<p>Video lessons, notes and practice are open without booking, and a verified teacher will mark an assignment when you want it checked. See the self-study library ↑</p>
</li>
</ul>
</div>
<div class="page star">
<span class="stk">for parents</span>
<h3>Parents</h3>
<ul>
<li>
<span class="tag">In a month</span>
<h4>Homework stops being a fight</h4>
<p>A doubt gets asked the moment it appears — in class, or in the app — so the chapter never turns into a backlog.</p>
</li>
<li>
<span class="tag">Every week</span>
<h4>A report you can read in a minute</h4>
<p>Attendance, topics covered and where your child is slipping — on your phone, every week.</p>
</li>
<li>
<span class="tag">Every class</span>
<h4>See what you paid for</h4>
<p>Watch any recording, and track exactly what was paid, to whom, for which class.</p>
</li>
</ul>
</div>
<div class="page">
<h3>Teachers</h3>
<ul>
<li>
<span class="tag">Reach</span>
<h4>Teach beyond your pincode</h4>
<p>Students from across Bharat, from wherever you have a signal.</p>
</li>
<li>
<span class="tag">Schedule</span>
<h4>Your hours, your way</h4>
<p>Weekly availability plus one-off custom slots. Days off in one tap.</p>
</li>
<li>
<span class="tag">Grow</span>
<h4>Get discovered</h4>
<p>A verified badge and a fair new-teacher boost help students find you. Earnings under “Teach with Kautuki” ↓</p>
</li>
</ul>
</div>
</div>
</section>
<!-- ================= Q8 · teach ================= -->
<section class="q body-cell" id="teach">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q8.</span>
<div class="q-head">
<h2>Teach with Kautuki.</h2>
<span class="marks">[staff room]</span>
</div>
<div class="notice-wrap">
<figure class="pin-photo">
<img src="gallery/teach-notice.jpg" alt="A teacher on a video call from home, smiling at his phone" width="1000" height="667" loading="lazy">
<figcaption>from home, on your own schedule</figcaption>
</figure>
<div class="notice">
<div class="kicker">Notice — to all teachers</div>
<h2>If you can teach, your pincode should not decide your income.</h2>
<p>
Set your own rates and hours, and take classes from wherever you have
a signal.
</p>
<ul class="leaders">
<li><b>80% → 90%</b><span class="dots"></span><span>of what you charge stays with you, rising with your rating</span></li>
<li><b>~24h</b><span class="dots"></span><span>bank withdrawals, no fee</span></li>
<li><b>You set</b><span class="dots"></span><span>your rates, hours and session types</span></li>
<li><b>₹0</b><span class="dots"></span><span>to join — no listing fee, no deposit</span></li>
</ul>
<a class="stamp" href="#early" data-role="teacher">Apply to teach</a>
</div>
</div>
<div class="earn">
<div class="rough">
<p class="rk">Rough work — how much can a teacher earn?</p>
<table>
<tr class="sub"><td colspan="2">Two 1:1 hours a day, priced at ₹300</td></tr>
<tr><td>2 classes × ₹300 × 24 days</td><td>₹14,400</td></tr>
<tr class="sub"><td colspan="2">Plus one batch a day, 10 students at ₹60 a seat</td></tr>
<tr><td>₹600 per class × 24 days</td><td>₹14,400</td></tr>
<tr><td>Kautuki’s share at the starting tier (20%)</td><td>− ₹5,760</td></tr>
<tr class="tot"><td>You keep, per month</td><td>₹23,040</td></tr>
</table>
<p class="fine">
Illustrative, at the Standard tier. Pro (after 50 sessions) keeps 85%, Expert keeps 90%.
About three hours of teaching a day, from home, with no travel and no rent.
</p>
</div>
</div>
</section>
<!-- ================= Q9 · for schools ================= -->
<section class="q body-cell" id="schools">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q9.</span>
<div class="q-head">
<h2>For schools.</h2>
<span class="marks">[partner channel]</span>
</div>
<p class="q-kicker">
Bring verified live teachers to your whole school — without building a tech team or a payroll.
</p>
<figure class="photo-wide">
<img src="gallery/school-hall.jpg" alt="Schoolgirls in uniform listening in a classroom" width="1400" height="934" loading="lazy">
<figcaption>any classroom, any pincode</figcaption>
</figure>
<div class="circular">
<div class="sc">
<span class="tag">Cover the gap</span>
<h3>No Physics teacher this term?</h3>
<p>Run live batches for an entire class with a verified subject teacher, on the timetable you set.</p>
</div>
<div class="sc">
<span class="tag">Your teachers</span>
<h3>School-only, or open to the marketplace</h3>
<p>List your own teachers for your students only — or, if the school chooses, open them to outside students and the school earns a share of every class they take.</p>
</div>
<div class="sc">
<span class="tag">One console</span>
<h3>Roster, attendance, one invoice</h3>
<p>Bulk-onboard students by CSV, see attendance and at-risk students at a glance, and get one GST invoice a month.</p>
</div>
<div class="sc">
<span class="tag">Parents in the loop</span>
<h3>Reports go out automatically</h3>
<p>Weekly progress reports and at-risk alerts reach parents without your staff chasing anyone.</p>
</div>
</div>
<div class="sc-note">
<span><span class="redpen">✎</span> The school channel opens after the student launch. Registering now puts you in the first cohort.</span>
</div>
<div class="q-cta">
<a class="stamp ghost" href="#early" data-role="school">Register your school</a>
<a class="plain" href="mailto:partners@kautuki.co.in">or write to partners@kautuki.co.in</a>
</div>
</section>
<!-- ================= Q10 · gallery ================= -->
<section class="q body-cell" id="gallery">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q10.</span>
<div class="q-head">
<h2>Gallery.</h2>
<span class="marks">[pinned to the board]</span>
</div>
<p class="q-kicker">A look at the classroom, the whiteboard and the people behind the checks.</p>
<div class="gal" id="gal">
<!-- To add real media: drop the file in gallery/ and add a <figure>.
Photos: data-full="gallery/photo.jpg". Videos: data-video="gallery/clip.mp4"
or data-yt="YOUTUBE_ID". The <img> is the thumbnail. -->
<figure class="wide" data-video="" data-yt="" tabindex="0">
<img src="gallery/poster-video.jpg" alt="A maths teacher taking a class at the whiteboard while a student raises a hand" width="1600" height="1109" loading="lazy">
<span class="kind">Video</span>
<span class="play" aria-hidden="true"><svg viewBox="0 0 24 24" fill="#0F2557"><path d="M6 4l14 8-14 8z"/></svg></span>
<figcaption>Two minutes inside a live class</figcaption>
</figure>
<figure data-full="gallery/photo-class.jpg" tabindex="0">
<img src="gallery/photo-class.jpg" alt="A girl laughing during an online class at home" width="1200" height="800" loading="lazy">
<span class="kind">Photo</span>
<figcaption>A live class, from the living room</figcaption>
</figure>
<figure data-full="gallery/photo-whiteboard.jpg" tabindex="0">
<img src="gallery/photo-whiteboard.jpg" alt="A teacher solving equations on a whiteboard" width="1200" height="832" loading="lazy">
<span class="kind">Photo</span>
<figcaption>Solving equations, step by step</figcaption>
</figure>
<figure data-full="gallery/photo-verify.jpg" tabindex="0">
<img src="gallery/photo-verify.jpg" alt="A rubber stamp resting on a checked document" width="1200" height="800" loading="lazy">
<span class="kind">Photo</span>
<figcaption>Verification desk · papers, not scripts</figcaption>
</figure>
<figure data-full="gallery/photo-doubt.jpg" tabindex="0">
<img src="gallery/photo-doubt.jpg" alt="Two schoolboys in uniform listening attentively in class" width="1200" height="675" loading="lazy">
<span class="kind">Photo</span>
<figcaption>Listening for the bit that finally clicks</figcaption>
</figure>
</div>
<p class="gal-note">Photographs via <a href="https://www.pexels.com/license/" target="_blank" rel="noopener">Pexels</a> — Anil Sharma, World Sikh Organization of Canada, Markus Spiske, Swastik Arora. Our own classroom photos and the walkthrough video replace these as the first batches run.</p>
</section>
<!-- ================= testimonials (hidden until we have real ones) ================= -->
<section class="q body-cell" id="stories" hidden>
<span class="marginal" style="top:clamp(56px,7vw,100px)">★</span>
<div class="q-head">
<h2>What families say.</h2>
<span class="marks">[in their words]</span>
</div>
<div class="stories">
<div class="story">
<blockquote>“[Quote from a parent — add after the first batches run.]”</blockquote>
<div class="who"><b>[Parent name]</b> · parent of a Class 9 student · [City]</div>
</div>
<div class="story">
<blockquote>“[Quote from a student.]”</blockquote>
<div class="who"><b>[Student name]</b> · Class 10, CBSE · [City]</div>
</div>
<div class="story">
<blockquote>“[Quote from a teacher.]”</blockquote>
<div class="who"><b>[Teacher name]</b> · Maths, 8 years · [City]</div>
</div>
</div>
</section>
<!-- ================= Q11 · free books ================= -->
<section class="q body-cell" id="books">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q11.</span>
<div class="q-head">
<h2>Free textbooks (PDF).</h2>
<span class="marks">[₹0 · Class 6–12]</span>
</div>
<p class="q-kicker">
Every NCERT textbook is free to download from NCERT itself, in English, Hindi and Urdu.
Our teachers teach from these, so keep them on the phone.
</p>
<ul class="books">
<li>
<a href="https://ncert.nic.in/textbook.php" target="_blank" rel="noopener">
<span class="bi" aria-hidden="true">NCERT</span>
<span><h3>NCERT textbooks, Class 1–12</h3><p>Every subject, every class, chapter-wise PDFs. Choose class → subject → book.</p></span>
<span class="ext">ncert.nic.in ↗</span>
</a>
</li>
<li>
<a href="https://ncert.nic.in/exemplar-problems.php" target="_blank" rel="noopener">
<span class="bi" aria-hidden="true">Ex</span>
<span><h3>NCERT Exemplar problems</h3><p>Harder practice questions for Maths and Science, Class 6–12 — the ones that show up in board papers.</p></span>
<span class="ext">ncert.nic.in ↗</span>
</a>
</li>
<li>
<a href="https://www.cbse.gov.in/cbsenew/question-paper.html" target="_blank" rel="noopener">
<span class="bi" aria-hidden="true">CBSE</span>
<span><h3>Previous years’ CBSE question papers</h3><p>Official Class 10 and 12 board papers with marking schemes, straight from CBSE.</p></span>
<span class="ext">cbse.gov.in ↗</span>
</a>
</li>
<li>
<a href="https://diksha.gov.in/" target="_blank" rel="noopener">
<span class="bi" aria-hidden="true">DIKSHA</span>
<span><h3>DIKSHA — state-board textbooks</h3><p>The Government of India’s library of state-board textbooks and QR-coded chapter content.</p></span>
<span class="ext">diksha.gov.in ↗</span>
</a>
</li>
</ul>
<p class="books-note">
<span class="redpen" style="font-size:22px">✎</span>
Kautuki’s own chapter notes and revision sheets, written by our verified teachers, will be added here free as the first batches run.
</p>
</section>
<!-- ================= Q12 · doubts ================= -->
<section class="q body-cell" id="faq">
<span class="marginal" style="top:clamp(56px,7vw,100px)">Q12.</span>
<div class="q-head">
<h2>Doubts.</h2>
<span class="marks">[questions parents ask us first]</span>
</div>
<div class="doubts">
<details open>
<summary><span class="qm">Q.</span>Is the first session really free?<span class="plus">+</span></summary>
<div class="ans"><span class="am">A.</span><p>Yes. Your first session with any teacher on Kautuki is free, and you can do a free first session with more than one teacher before choosing.</p></div>
</details>
<details>
<summary><span class="qm">Q.</span>Can my child use Kautuki without booking a class?<span class="plus">+</span></summary>
<div class="ans"><span class="am">A.</span><p>Yes. The video library, chapter notes, practice quizzes and their own notebook are open without booking anything, and an assignment can be sent to a verified teacher to be marked by hand. The self-study library section has the full list.</p></div>
</details>
<details>
<summary><span class="qm">Q.</span>What does a class cost after that?<span class="plus">+</span></summary>
<div class="ans"><span class="am">A.</span><p>Whatever the teacher has set for that format, shown on their profile before you book. You pay per class — there is no package, subscription or deposit. See “Classes & fees” above for typical ranges and a worked month.</p></div>
</details>
<details>
<summary><span class="qm">Q.</span>What does hand-verified actually mean?<span class="plus">+</span></summary>
<div class="ans"><span class="am">A.</span><p>Identity, qualifications and background — each reviewed by a person on our team, not a script, before a profile goes live. The full marking scheme is in the verification section above.</p></div>
</details>
<details>
<summary><span class="qm">Q.</span>Is my child safe in a class?<span class="plus">+</span></summary>
<div class="ans"><span class="am">A.</span><p>Only verified adults can teach. Every session is recorded and parents can watch any recording back, and a teacher’s profile can be pulled immediately on a complaint.</p></div>
</details>
<details>
<summary><span class="qm">Q.</span>Will it work on my phone and network?<span class="plus">+</span></summary>
<div class="ans"><span class="am">A.</span><p>Video uses adaptive bitrate so it keeps running on entry-level Android phones over 3G. On weak signal the class falls back to audio with a synced whiteboard instead of dropping.</p></div>
</details>
<details>
<summary><span class="qm">Q.</span>How do payments and refunds work?<span class="plus">+</span></summary>
<div class="ans"><span class="am">A.</span><p>Payments are taken through Razorpay (UPI, cards, net banking) when you book a slot, and the teacher is paid only after the class happens. Refunds follow our published refund policy.</p></div>
</details>
<details>
<summary><span class="qm">Q.</span>Which boards and subjects are covered?<span class="plus">+</span></summary>
<div class="ans"><span class="am">A.</span><p>CBSE, ICSE and state boards, Class 6–12, in English or Hindi. The full subject list is above, and it grows with demand — tell us what you need in the form.</p></div>
</details>
<details>
<summary><span class="qm">Q.</span>Where is our data stored?<span class="plus">+</span></summary>
<div class="ans"><span class="am">A.</span><p>In Mumbai, on AWS ap-south-1. We handle personal data under the DPDP Act 2023, and you can read exactly what we keep in the privacy policy.</p></div>
</details>
</div>
</section>
<!-- ================= outcomes · what changes, and by when ================= -->
<section class="q body-cell" id="outcomes">
<span class="marginal" style="top:clamp(56px,7vw,100px)">∴</span>
<div class="q-head">
<h2>What changes, and by when.</h2>
<span class="marks">[expected outcome]</span>
</div>
<p class="q-kicker">
Not a promise about marks — those belong to your child and the work they put in. This is what
the service is built to change, and roughly when you should be able to see it for yourself.
</p>
<ol class="arc">
<li>
<span class="when">Week one</span>
<h3>A teacher your child picked</h3>
<p>A free first class with a verified teacher you chose together — and the question they were stuck on finally asked out loud.</p>
</li>
<li>
<span class="when">First month</span>
<h3>The backlog stops growing</h3>
<p>Doubts get cleared the week they appear instead of piling into the next chapter, and a weekly report tells you what was actually covered.</p>
</li>
<li>
<span class="when">One term</span>
<h3>Homework stops being a fight</h3>
<p>A regular teacher on a fixed slot, assignments coming back marked with comments, and a set of notes and recordings your child can revise from alone.</p>
</li>
<li>
<span class="when">By the boards</span>
<h3>Prepared, with the year on record</h3>
<p>Past-paper sessions with a teacher who knows exactly where your child slips — and every class from the year still there to rewatch.</p>
</li>
</ol>
<p class="arc-note">
<span class="redpen" style="font-size:22px">✎</span>
We will not claim a grade. What we do commit to: a verified teacher, a class that actually runs,
a recording and notes for every session, and no charge for a class that does not happen.
</p>
</section>
<!-- ================= closing line ================= -->
<section class="closing body-cell" aria-label="Closing">
<h2>The first class costs nothing. The decision after it is yours.</h2>
<p>Fill in the admission slip below and we’ll message you the moment classes open in your area.</p>
</section>
<!-- ================= admission form (early access) ================= -->
<section class="q body-cell" id="early" style="padding-top:clamp(20px,3vw,36px)">
<span class="marginal" style="top:clamp(24px,3vw,40px)">B.</span>
<div class="q-head">
<h2>Early access.</h2>
<span class="marks">[compulsory, if you ask us]</span>
</div>
<form class="adm" id="admForm" action="api/lead.php" method="post" novalidate>
<div class="kicker">Admission form — early access batch</div>
<h2>Be among the first families on Kautuki.</h2>
<p>
We’re onboarding the first learners and teachers now. Leave your number and we’ll
message you the moment classes open in your area.
</p>
<div class="adm-fields">
<div class="field" id="f-name">
<label for="adm-name">Full name</label>
<span class="wrap"><input id="adm-name" name="name" type="text" autocomplete="name" required></span>
</div>
<div class="field" id="f-phone">
<label for="adm-phone">Mobile number</label>
<span class="wrap"><span class="cc">+91</span><input id="adm-phone" name="phone" type="tel" inputmode="numeric" autocomplete="tel-national" maxlength="10" required></span>
</div>
</div>
<div class="adm-role" role="radiogroup" aria-labelledby="adm-role-l">
<span class="rl" id="adm-role-l">I am a</span>
<label><input type="radio" name="role" value="parent" checked> Parent</label>
<label><input type="radio" name="role" value="student"> Student</label>
<label><input type="radio" name="role" value="teacher"> Teacher</label>
<label><input type="radio" name="role" value="school"> School</label>
</div>
<ul class="ticks">
<li><span class="redpen">✓</span>First live session free</li>
<li><span class="redpen">✓</span>Priority teacher booking at launch</li>
<li><span class="redpen">✓</span>Founder pricing, locked in</li>
</ul>
<input type="hidden" name="consent" value="1">
<label class="hp" aria-hidden="true">Company <input type="text" name="company" tabindex="-1" autocomplete="off"></label>
<div class="adm-actions">
<button class="stamp" type="submit">Notify me at launch</button>
</div>
<p class="err" id="admErr" role="alert"></p>
<p class="fine">
No spam. We’ll only message you about your early access. By continuing you accept the
<a href="privacy.html">Privacy Policy</a> (DPDP Act 2023).
</p>
<p class="done redpen" id="admDone" role="status"></p>
</form>
</section>
<!-- ================= footer ================= -->
<footer class="body-cell">
<div class="eop redpen">— end of paper —</div>
<div class="foot-grid">
<div class="foot-brand">
<a class="logo" href="#top" aria-label="Kautuki — back to top"><img src="logo/logo-wordmark-navy.svg" alt="Kautuki" width="250" height="126"></a>
<div class="tag">Powered by curiosity · Enhanced by intelligence</div>
<p>Verified live tutoring for Bharat. Data stored in Mumbai (AWS ap-south-1).</p>
<address>
<b>Kautuki</b><br>
<span class="todo">[Registered office address — add before launch]</span><br>
<a href="mailto:hello@kautuki.co.in">hello@kautuki.co.in</a><br>
Support hours: Mon–Sat, 9 am–7 pm IST
</address>
</div>
<div>
<h3>Product</h3>
<ul>
<li><a href="#why">Why Kautuki</a></li>
<li><a href="#how">How it works</a></li>
<li><a href="#classes">Classes & fees</a></li>
<li><a href="#learn">Self-study library</a></li>
<li><a href="#compare">Compare with others</a></li>
<li><a href="#subjects">Subjects & boards</a></li>
<li><a href="#verify">Verification</a></li>
<li><a href="#schools">For schools</a></li>
<li><a href="#books">Free textbooks</a></li>
</ul>
</div>
<div>
<h3>Company</h3>
<ul>
<li><a href="contact.html#about">About Kautuki</a></li>
<li><a href="contact.html#contact">Contact us</a></li>
<li><a href="#teach">Teach on Kautuki</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#faq">Doubts (FAQ)</a></li>
</ul>
</div>
<div>
<h3>Legal</h3>
<ul>
<li><a href="privacy.html">Privacy (DPDP 2023)</a></li>
<li><a href="terms.html">Terms</a></li>
<li><a href="refund.html">Refund policy</a></li>
<li><a href="contact.html#grievance">Grievance officer</a></li>
</ul>
</div>
</div>
<div class="foot-legal">
<span>© 2026 Kautuki · Data residency: Mumbai · Payments secured by Razorpay (PCI-DSS).</span>
<span class="links">
<a href="https://kautuki.co.in/">kautuki.co.in</a>
</span>
</div>
</footer>
</div>
<!-- gallery lightbox -->
<dialog class="lb" id="lb" aria-label="Gallery item">
<div class="lb-body" id="lbBody"></div>
<div class="lb-bar"><span id="lbCap"></span><button type="button" class="stamp ghost lb-x" id="lbX">Close ×</button></div>
</dialog>
<script>
document.documentElement.classList.add('js');
// ---- scroll reveals: tag blocks, stagger siblings, observe once ---------
(function () {
// [selector, flavour] — 'rv-t' for anything that carries its own paper
// tilt or a :hover lift (a transform-based reveal would flatten both),
// 'rv-m' for the annotations in the red margin.
var groups = [
['.marginal', 'rv-m'],
['.trust-row li', 'rv'], ['.q-head', 'rv'], ['.q-kicker', 'rv'], ['.steps li', 'rv'],
['.fmt', 'rv-t'], ['.fees > *', 'rv'], ['.fees .ticks li', 'rv'], ['.rough tr', 'rv'],
['.whys li', 'rv'], ['.incl .ticks li', 'rv'],
['.kit li', 'rv-t'], ['.kit-note', 'rv'],
['.cmp tbody tr', 'rv'], ['.cmp-note', 'rv'], ['.arc', 'rv'], ['.arc-note', 'rv'],
['.syllabus > div', 'rv'], ['.chips li', 'rv-t'], ['.syl-note', 'rv'],
['.gate', 'rv'], ['.scheme-note', 'rv'],
['.board', 'rv'], ['.board-item', 'rv'],
['.page', 'rv-t'], ['.page li', 'rv'],
['.notice', 'rv-t'], ['.pin-photo', 'rv-t'], ['.leaders li', 'rv'], ['.earn', 'rv'],
['.photo-wide', 'rv-t'], ['.sc', 'rv'], ['.sc-note', 'rv'], ['.q-cta', 'rv'],
['.gal figure', 'rv-t'], ['.gal-note', 'rv'],
['.story', 'rv-t'], ['.books li', 'rv'], ['.books-note', 'rv'], ['.doubts details', 'rv'],
['.closing h2', 'rv'], ['.closing p', 'rv'], ['.adm', 'rv'],
['.eop', 'rv'], ['.foot-grid > *', 'rv'], ['.foot-legal > *', 'rv']
];
groups.forEach(function (g) {
var last = null, i = 0;
[].slice.call(document.querySelectorAll(g[0])).forEach(function (el) {
i = (el.parentNode === last) ? i + 1 : 0; last = el.parentNode;
el.classList.add(g[1]); el.style.setProperty('--i', Math.min(i, 6));
});
});
document.querySelectorAll('.steps li').forEach(function (el) { el.classList.add('rv-x'); });
// the admission slip reveals as one card, then fills itself in line by line
[].slice.call(document.querySelectorAll('.adm .kicker, .adm > h2, .adm > p, .adm-fields .field, .adm-role, .adm .ticks li, .adm-actions'))
.forEach(function (el, n) { el.style.setProperty('--j', Math.min(n, 9)); });
var els = [].slice.call(document.querySelectorAll('.rv, .rv-t, .rv-m'));
// belt and braces: whatever is already on screen is revealed on the next
// scroll frame even if the observer is slow (cheap: skips revealed nodes)
var pending = false;
function sweep() {
pending = false;
var h = innerHeight;
els = els.filter(function (e) {
var r = e.getBoundingClientRect();
// anything on screen or already scrolled past: a fast flick can jump
// clean over a block between frames, and the observer never sees it
if (r.top < h * .96) { e.classList.add('in'); return false; }
return true;
});
}
addEventListener('scroll', function () { if (!pending) { pending = true; requestAnimationFrame(sweep); } }, { passive: true });
addEventListener('load', sweep);
setTimeout(sweep, 400);
if (!('IntersectionObserver' in window)) { sweep(); return; }
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); }
});
}, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
els.forEach(function (e) { io.observe(e); });
})();
// ---- sticky header: expose its height so anchors land below it ----------
(function () {
var hdr = document.querySelector('.hdr');
function measure() { document.documentElement.style.setProperty('--hdr-h', hdr.offsetHeight + 'px'); }
measure();
addEventListener('resize', measure);
addEventListener('load', measure);
})();
// ---- scroll-spy: highlight the Q-index button for the section in view ----
(function () {
var idx = document.getElementById('idx'), wrap = document.getElementById('idxWrap');
var links = [].slice.call(idx.querySelectorAll('a[href^="#"]'));
var byId = {};
links.forEach(function (a) { byId[a.getAttribute('href').slice(1)] = a; });
// every section with an id counts, so a section without a button lights nothing
var secs = [].slice.call(document.querySelectorAll('section[id]')).filter(function (s) { return !s.hidden; });
var cur = null, ticking = false;
var root = document.documentElement;
// the red rule under the header fills as the paper is read
function progress() {
var span = root.scrollHeight - innerHeight;
root.style.setProperty('--prog', span > 0 ? Math.min(1, Math.max(0, scrollY / span)).toFixed(4) : 1);
}
function edges() {
wrap.classList.toggle('more-r', idx.scrollLeft + idx.clientWidth < idx.scrollWidth - 2);
wrap.classList.toggle('more-l', idx.scrollLeft > 2);
}
function spy() {
ticking = false;
progress();
var line = scrollY + parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--hdr-h')) + 40;
var sec = null;
secs.forEach(function (s) { if (s.getBoundingClientRect().top + scrollY <= line) sec = s; });
var hit = sec ? byId[sec.id] || null : null;
if (hit === cur) return;
cur = hit;
links.forEach(function (a) { a.classList.toggle('on', a === hit); });
if (hit) {
var r = hit.getBoundingClientRect(), box = idx.getBoundingClientRect();
if (r.left < box.left || r.right > box.right) {
idx.scrollTo({ left: hit.offsetLeft - idx.offsetLeft - 18, behavior: 'smooth' });
}
}
}
addEventListener('scroll', function () {
if (!ticking) { ticking = true; requestAnimationFrame(spy); }
}, { passive: true });
idx.addEventListener('scroll', edges, { passive: true });
addEventListener('resize', function () { edges(); progress(); });
addEventListener('load', function () { spy(); edges(); });
spy(); edges();
})();
// ---- role pre-select: "Apply to teach" / "Register your school" ---------
document.addEventListener('click', function (e) {
var a = e.target.closest('a[data-role]');
if (!a) return;
var r = document.querySelector('#admForm input[name="role"][value="' + a.getAttribute('data-role') + '"]');
if (r) r.checked = true;
});
// ---- early-access form: posts to api/lead.php ---------------------------
(function () {
var form = document.getElementById('admForm');
var err = document.getElementById('admErr');
var done = document.getElementById('admDone');
var btn = form.querySelector('button[type="submit"]');
function mark(id, bad) { document.getElementById(id).classList.toggle('bad', !!bad); }
form.addEventListener('submit', function (e) {
e.preventDefault();
var name = form.name.value.trim();
var phone = form.phone.value.replace(/\D/g, '');
var badName = name.length < 2, badPhone = !/^[6-9]\d{9}$/.test(phone);
mark('f-name', badName); mark('f-phone', badPhone);
form.classList.toggle('bad', badName || badPhone);
if (badName || badPhone) {
err.textContent = badPhone ? 'Please enter a 10-digit Indian mobile number.' : 'Please enter your name.';
return;
}
form.phone.value = phone;
btn.disabled = true; btn.textContent = 'Sending…';
var data = new FormData(form);
fetch(form.getAttribute('action'), { method: 'POST', body: data })
.then(function (r) { return r.json(); })
.then(function (j) {
if (!j || !j.ok) throw new Error('server');
done.innerHTML = 'Noted ✓ — you are on the early-access list. We’ll message +91 ' + phone + ' the moment classes open.';
form.classList.remove('bad'); form.classList.add('sent');
})
.catch(function () {
btn.disabled = false; btn.textContent = 'Notify me at launch';
form.classList.add('bad');
err.innerHTML = 'Couldn’t send just now. Please try again, or email <a href="mailto:hello@kautuki.co.in">hello@kautuki.co.in</a> with your name and number.';
});
});
})();
// ---- gallery lightbox: photos, local video, or a YouTube embed ----------
(function () {
var lb = document.getElementById('lb'), body = document.getElementById('lbBody'), cap = document.getElementById('lbCap');
if (!lb || !lb.showModal) return;
function open(fig) {
var t = fig.querySelector('figcaption'), img = fig.querySelector('img');
cap.textContent = t ? t.textContent : '';
body.innerHTML = '';
if (fig.dataset.yt) {
var f = document.createElement('iframe');
f.src = 'https://www.youtube-nocookie.com/embed/' + fig.dataset.yt + '?autoplay=1&rel=0';
f.allow = 'autoplay; encrypted-media; picture-in-picture'; f.allowFullscreen = true; f.title = cap.textContent;
body.appendChild(f);
} else if (fig.dataset.video) {
var v = document.createElement('video');
v.src = fig.dataset.video; v.controls = true; v.autoplay = true; v.playsInline = true;
if (img) v.poster = img.src;
body.appendChild(v);
} else if (fig.dataset.full) {
var i = document.createElement('img');
i.src = fig.dataset.full; i.alt = img ? img.alt : '';
body.appendChild(i);
} else {
// a video slot with no source yet
var p = document.createElement('p');
p.style.cssText = 'margin:0;padding:48px 24px;text-align:center;color:#FDF8F0;font-family:Caveat,cursive;font-size:26px';
p.textContent = 'Walkthrough video coming soon — the first batches are being filmed.';
body.appendChild(p);
}
lb.showModal();
}
document.getElementById('gal').addEventListener('click', function (e) {
var fig = e.target.closest('figure'); if (fig) open(fig);
});
document.getElementById('gal').addEventListener('keydown', function (e) {
var fig = e.target.closest('figure');
if (fig && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); open(fig); }
});
function close() { lb.close(); }
document.getElementById('lbX').addEventListener('click', close);
lb.addEventListener('click', function (e) { if (e.target === lb) close(); });
lb.addEventListener('close', function () { body.innerHTML = ''; });
})();
// ---- hero banner slider: scroll-snap track, auto-advance every 5s until
// the visitor touches it, dots double as controls. Honours reduced motion.
(function () {
var track = document.getElementById('heroSlides');
var dots = [].slice.call(document.getElementById('heroDots').children);
var idx = 0, hold = false;
var slides = [].slice.call(track.children);
function paint() {
dots.forEach(function (d, i) { d.className = i === idx ? 'on' : ''; });
slides.forEach(function (s, i) { s.classList.toggle('on', i === idx); });
}
function go(i) {
idx = (i + dots.length) % dots.length;
track.scrollTo({ left: idx * track.clientWidth, behavior: 'smooth' });
paint();
}
track.addEventListener('scroll', function () {
var i = Math.round(track.scrollLeft / track.clientWidth);
if (i !== idx) { idx = i; paint(); }
}, { passive: true });
['pointerdown', 'touchstart', 'wheel'].forEach(function (e) {
track.addEventListener(e, function () { hold = true; }, { passive: true });
});
dots.forEach(function (d, i) {
d.addEventListener('click', function () { hold = true; go(i); });
});
paint();
if (!matchMedia('(prefers-reduced-motion: reduce)').matches) {
setInterval(function () {
if (!hold && document.visibilityState === 'visible') go(idx + 1);
}, 5000);
}
})();
</script>
</body>
</html>