/* =====================================================================
   ABOUT US  (about.html) - desktop layout, dark and light
   1. How it works (the journey, first message to last class)  2. the people it joins, lit in step with it
   3. the cities  4. a call or a message away  5. two ways in
   ===================================================================== */

.ab-page {
  --bg: #050505; --card: #0f0f12; --card-2: #15151a; --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14);
  --text: #f5f5f5; --muted: #9a9aa3; --green: #22c55e; --green-2: #4ade80; --green-soft: rgba(34, 197, 94, 0.12);
  --blue: #60a5fa; --blue-soft: rgba(59, 130, 246, 0.14); --amber: #f59e0b; --violet: #a78bfa; --violet-soft: rgba(167, 139, 250, 0.14);
  --glow: rgba(34, 197, 94, 0.18);
  --f-head: Sora, Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html[data-theme="light"] .ab-page {
  --bg: #f6f7f9; --card: #ffffff; --card-2: #f1f3f6; --line: rgba(0, 0, 0, 0.08); --line-2: rgba(0, 0, 0, 0.13);
  --text: #111418; --muted: #5b6472; --green: #16a34a; --green-2: #22c55e; --green-soft: rgba(22, 163, 74, 0.10);
  --blue: #2563eb; --blue-soft: rgba(37, 99, 235, 0.10); --amber: #d97706; --violet: #7c3aed; --violet-soft: rgba(124, 58, 237, 0.09);
  --glow: rgba(22, 163, 74, 0.12);
}
body[data-page="about"] { background: #050505; margin: 0; }
html[data-theme="light"] body[data-page="about"] { background: #f6f7f9; }

.ab-wrap { width: min(1184px, 93.334%); margin: 0 auto; padding: 44px 0 84px; }
.ab-page em { font-style: normal; font-weight: 700; color: var(--green); }
.ab-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); }
.ab-eyebrow::before, .ab-eyebrow::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.6; }
.ab-page h2 { margin: 12px 0 0; font: 300 36px/1.15 var(--f-head); letter-spacing: -0.035em; }

/* ---------- 1. HOW IT WORKS ---------- */
.abm { display: none; }
.ab-m { display: none; }
.ab-way { --p: 0; position: relative; text-align: center; }
.ab-way::before { content: ""; position: absolute; left: 50%; top: -40px; width: 900px; height: 420px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, var(--glow), transparent); z-index: -1; }
.ab-way h1 { max-width: 860px; margin: 14px auto 0; font: 300 46px/1.1 var(--f-head); letter-spacing: -0.04em; }
.ab-lead { max-width: 720px; margin: 16px auto 0; color: var(--muted); font-size: 17px; line-height: 1.65; }

.ab-journey { margin-top: 46px; padding: 34px 26px 28px; border-radius: 30px; background: linear-gradient(180deg, var(--card), transparent 92%); }

.ab-track { position: relative; margin-top: 92px; }
.ab-stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; }

/* the rail through the middle of the round icons, filling as the steps light (first stop to last) */
.ab-rail { position: absolute; left: 8.333%; right: 8.333%; top: 31px; height: 4px; border-radius: 4px; background: var(--line-2); }
.ab-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 4px; background: linear-gradient(90deg, #16a34a, #4ade80); box-shadow: 0 0 14px rgba(34, 197, 94, 0.6); transition: width 1.2s cubic-bezier(0.45, 0, 0.2, 1); }
.ab-runner { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.35), 0 0 18px #22c55e; transition: left 1.2s cubic-bezier(0.45, 0, 0.2, 1); }

.ab-stop { display: flex; flex-direction: column; align-items: center; padding: 0 4px; }
.ab-dot { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--line-2); color: var(--muted);
  transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
.ab-dot svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ab-stop b { margin-top: 16px; font-size: 15.5px; color: var(--muted); transition: color 0.5s ease; }
.ab-stop small { margin-top: 5px; white-space: nowrap; color: var(--muted); font-size: 13.5px; font-weight: 500; line-height: 1.45; opacity: 0.55; transition: opacity 0.5s ease, color 0.5s ease; }
.ab-stop.is-now small { color: var(--green); }
.ab-stop.is-on .ab-dot { background: #16a34a; color: #fff; box-shadow: 0 10px 26px -8px rgba(34, 197, 94, 0.8); }
.ab-stop.is-on b { color: var(--text); }
.ab-stop.is-on small { opacity: 1; }
.ab-stop.is-now .ab-dot { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.14), 0 12px 30px -8px rgba(34, 197, 94, 0.9); }
/* a stop lights when the runner reaches it, not before */
.ab-stop.is-now .ab-dot, .ab-stop.is-now b, .ab-stop.is-now small { transition-delay: 0.9s; }

.ab-free { margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.ab-stop.is-now .ab-free { animation: abTag 0.9s ease 0.9s; }
@keyframes abTag { 30% { transform: scale(1.18); } 60% { transform: scale(0.96); } }

/* "not the right fit?": a dotted arc from "You choose" back to the demo */
.ab-again { position: absolute; left: 41.667%; width: 16.667%; top: -58px; height: 76px; overflow: visible; pointer-events: none; }
.ab-again path { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; opacity: 0.3; transition: opacity 0.4s ease; }
.ab-again-tag { position: absolute; left: 50%; top: -86px; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(245, 158, 11, 0.14); color: var(--amber);
  font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0.5; transition: opacity 0.4s ease, transform 0.4s ease; }
.ab-page[data-step="4"] .ab-again path { opacity: 1; animation: abDash 1s linear infinite; }
.ab-page[data-step="4"] .ab-again-tag { opacity: 1; transform: translateX(-50%) translateY(-3px); }
@keyframes abDash { to { stroke-dashoffset: -24; } }

/* what is happening now */
.ab-now { display: flex; align-items: center; justify-content: center; min-height: 0; margin: 28px auto 0; max-width: 820px; padding: 7px 20px; border-radius: 999px;
  background: var(--green-soft); font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--text); opacity: 0; }
.ab-now.is-in { animation: abSay 0.6s ease 0.9s forwards; }
@keyframes abSay { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 2. THE CIRCLE: parent & student -> us -> tutor -> us -> back; it turns slowly, a light runs round ---------- */
.ab-bond { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: center; margin-top: 96px; }
.ab-bond h2 { margin-top: 0; }
.ab-bond-text p { margin: 16px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.7; text-align: justify; }
.ab-loop { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: loop; }
.ab-loop li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; }
.ab-loop li::before { counter-increment: loop; content: counter(loop); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--card-2); color: var(--text); font-size: 12px; font-weight: 700; }
.ab-loop i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.ab-loop i.is-tutor { background: #3b82f6; }
.ab-loop i.is-family { background: #8b5cf6; }
.ab-loop b { color: var(--text); }

.ab-orbit { position: relative; width: 440px; height: 440px; margin: 0 auto; }
.ab-orbit::before { content: ""; position: absolute; inset: 40px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.ab-spin { position: absolute; inset: 0; animation: abSpin 60s linear infinite; }
.ab-orbit:hover .ab-spin, .ab-orbit:hover .ab-up { animation-play-state: paused; }
.ab-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-ring-track { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.ab-ring-glow { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-dasharray: 90 1041; stroke-linecap: round; opacity: 0.8; filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.7));
  transform-origin: 220px 220px; transform: rotate(151.4deg); animation: abTrail 8s linear infinite; }
.ab-arrow { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.ab-comet { fill: #fff; filter: drop-shadow(0 0 8px #22c55e) drop-shadow(0 0 3px #22c55e); }
.ab-o { position: absolute; width: 0; height: 0; }
.ab-o.is-family { left: 40px; top: 220px; }
.ab-o.is-top { left: 220px; top: 40px; }
.ab-o.is-tutor { left: 400px; top: 220px; }
.ab-o.is-bottom { left: 220px; top: 400px; }
/* each icon sits exactly on its point of the circle and stays upright while the circle turns; the names round it */
.ab-up { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: abUpright 60s linear infinite; }
.ab-ic { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.ab-tag { position: absolute; left: 0; transform: translateX(-50%); font: 600 14.5px var(--f-head); letter-spacing: -0.02em; white-space: nowrap; }
.ab-tag.is-under { top: 40px; }
.ab-tag.is-over { bottom: 46px; }
.ab-fam ~ .ab-tag.is-under { top: 58px; left: 12px; }
.ab-o.is-family .ab-tag.is-over { left: -10px; }
.ab-av { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6), 0 0 0 4px var(--bg); }
.ab-av svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-av.is-tutor { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.ab-av.is-tutor svg { width: 31px; height: 31px; }
/* parent in front (up, left), the student just behind (down, right) - the names over and under them */
.ab-fam { width: 62px; height: 62px; }
.ab-fam .ab-av { position: absolute; }
.ab-fam .ab-av.is-parent { left: -12px; top: -10px; z-index: 1; background: linear-gradient(135deg, #22c55e, #15803d); }
.ab-fam .ab-av.is-student { left: 26px; top: 22px; width: 50px; height: 50px; background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.ab-fam .ab-av.is-student svg { width: 24px; height: 24px; }
.ab-logo { display: block; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; background: #000; box-shadow: 0 14px 30px -12px rgba(34, 197, 94, 0.7), 0 0 0 4px var(--bg); }
.ab-logo img { display: block; width: 62px; height: 62px; }
/* a node glows as the light reaches it (the light goes round in 8s: family, top, tutor, bottom) */
.ab-o .ab-ic { animation: abReach 8s ease-in-out infinite; }
.ab-o.is-top .ab-ic { animation-delay: 2s; }
.ab-o.is-tutor .ab-ic { animation-delay: 4s; }
.ab-o.is-bottom .ab-ic { animation-delay: 6s; }
.ab-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; text-align: center; }
.ab-mid b { font: 600 26px var(--f-head); letter-spacing: -0.03em; color: var(--green); }
.ab-mid span { color: var(--muted); font-size: 13.5px; }
@keyframes abSpin { to { transform: rotate(360deg); } }
@keyframes abUpright { to { transform: rotate(-360deg); } }
@keyframes abTrail { from { transform: rotate(151.4deg); } to { transform: rotate(511.4deg); } }
@keyframes abReach { 0%, 12%, 100% { transform: translate(-50%, -50%); filter: none; } 4% { transform: translate(-50%, -50%) scale(1.12); filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.8)); } }

/* ---------- 3. WHERE WE TEACH: India in dots ---------- */
.ab-where { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 96px; padding: 30px 44px 30px 30px; border-radius: 30px;
  background: linear-gradient(135deg, var(--card), var(--card-2)); }
.ab-map { position: relative; }
.ab-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.mm-land { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.8; stroke-linejoin: round; }
.mm-dot { fill: rgba(255, 255, 255, 0.12); }
.mm-dot.is-hot { fill: #4ade80; }
.mm-dot.is-tw { fill: #a78bfa; opacity: 0; animation: abTw 3.6s ease-in-out infinite; }
.mm-arc { fill: none; stroke: #4ade80; stroke-width: 1.6; stroke-opacity: 0.55; stroke-dasharray: 2 6; stroke-linecap: round; animation: abDash 1.6s linear infinite; }
.mm-comet { fill: #bbf7d0; filter: drop-shadow(0 0 5px #22c55e); }
.mm-town { fill: #86efac; stroke: rgba(34, 197, 94, 0.35); stroke-width: 5; animation: abTown 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mm-hub { fill: #22c55e; stroke: rgba(255, 255, 255, 0.9); stroke-width: 2.5; }
.mm-ping { fill: none; stroke: #22c55e; stroke-width: 1.5; animation: abPing 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.mm-label { fill: var(--text); font: 700 21px var(--f-head); }
.mm-label .s { fill: var(--muted); font: 500 14.5px Inter, sans-serif; }
html[data-theme="light"] .mm-land { fill: rgba(22, 163, 74, 0.04); stroke: rgba(0, 0, 0, 0.16); }
html[data-theme="light"] .mm-dot { fill: rgba(0, 0, 0, 0.13); }
html[data-theme="light"] .mm-dot.is-hot, html[data-theme="light"] .mm-town { fill: #16a34a; }
.ab-where h2 { font-size: 34px; }
.ab-city-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ab-city-list li { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--green-soft); color: var(--text);
  font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1);
  transition-delay: calc(var(--i) * 90ms); }
.ab-city-list li svg { width: 16px; height: 16px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ab-city-list.is-in li { opacity: 1; transform: none; }
.ab-city-list li.is-online { grid-column: 1 / -1; background: var(--violet-soft); }
.ab-city-list li.is-online svg { stroke: var(--violet); }
.ab-figs { display: flex; gap: 34px; margin-top: 22px; }
.ab-figs[hidden] { display: none; }
.ab-figs b { display: block; font: 600 30px var(--f-head); letter-spacing: -0.04em; color: var(--green); }
.ab-figs span { color: var(--muted); font-size: 13px; }
.ab-more { display: inline-block; margin-top: 22px; color: var(--green); font-weight: 800; font-size: 16.5px; text-decoration: none; }
.ab-more:hover { text-decoration: underline; }
@keyframes abTw { 50% { opacity: 0.9; } }
@keyframes abTown { 50% { stroke-width: 9; } }
@keyframes abPing { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3); opacity: 0; } }

/* ---------- 4. A CALL OR A MESSAGE AWAY (css/contact-card.css) ---------- */
.ab-contact { margin-top: 44px; }

/* ---------- 5. TWO WAYS IN ---------- */
.ab-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
.ab-card { position: relative; display: block; padding: 26px 28px; border-radius: 22px; text-decoration: none; color: inherit; background: var(--green-soft); border: 0; transition: transform 0.2s ease; }
.ab-card.is-tutor { background: var(--blue-soft); }
.ab-card:hover { transform: translateY(-2px); }
.ab-card span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.ab-card.is-tutor span, .ab-card.is-tutor i { color: var(--blue); }
.ab-card h3 { margin: 8px 0 6px; font: 600 24px var(--f-head); letter-spacing: -0.02em; }
.ab-card p { margin: 0; color: var(--muted); font-size: 14px; }
.ab-card i { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 26px; color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .ab-fill, .ab-runner, .ab-dot { transition: none; }
  .ab-again path, .ab-spin, .ab-up, .ab-ring-glow, .ab-o .ab-ic, .mm-dot, .mm-arc, .mm-town, .mm-ping { animation: none !important; }
  .mm-dot.is-tw { opacity: 0.5; }
  .ab-now { animation: none; opacity: 1; }
  .ab-city-list li { transition: none; opacity: 1; transform: none; }
}

/* the city the pin points at: its dot grows, its pill lights up */
.mm-town { transition: r 0.3s ease, fill 0.3s ease; }
.mm-town.is-on { r: 6; fill: #ea580c; }
.mm-pin { transition: transform 0.6s cubic-bezier(0.3, 1.2, 0.4, 1), opacity 0.3s ease; }
.mm-pin path { fill: #ea580c; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45)); }
.mm-pin circle { fill: #fff; }
.mm-pin-bg { fill: #16a34a; }
.mm-pin-t { fill: #fff; font: 700 14px Inter, -apple-system, "Segoe UI", sans-serif; }
.ab-city-list li { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.3s ease, color 0.3s ease; }
.ab-city-list li.is-on { background: #ea580c; color: #fff; }
.ab-city-list li.is-on svg { stroke: #fff; }
.ab-city-list.is-ready li { transition-delay: 0s; }
/* the pin marks the city only (its name is in the lit pill) */
.mm-pin-bg, .mm-pin-t { display: none; }
/* the figures and Check your PIN code on one line: the link on the right, level with the figures */
.ab-figs-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.ab-figs-row .ab-figs, .ab-figs-row .ab-more { margin-top: 0; }

/* the small map: its comets without the glow filter (redrawn on every frame), and still while off the screen */
.mm-comet { filter: none; }
svg.is-paused * { animation-play-state: paused !important; }

/* =====================================================================
   PHONES (about.html gives a phone its own width): one column, part by part -
   1 the journey as a path down the page (the light runs down it), 2 the circle smaller under its words,
   3 the map then the cities two by two, 4 the call card, 5 the two ways in one under the other
   ===================================================================== */
@media (max-width: 760px) {
  .ab-page { overflow-x: clip; }
  .ab-wrap { width: auto; padding: 22px 16px 56px; }
  .ab-page h2 { font-size: 27px; line-height: 1.18; }
  .ab-page em { font-weight: 700; }

  /* 1. the journey: the heading in the middle (a green stroke under "last class"), then the six stops as cards
     down the page - each with its number on a dashed green line; "not the right fit?" between the demo and the
     choice, in amber. The stops light up in turn (the script at the foot). */
  .ab-way { text-align: center; }
  .ab-way::before { left: 0; top: -30px; width: 100%; height: 300px; transform: none; }
  .ab-way h1 { margin: 8px auto 0; max-width: 340px; font-size: 32px; line-height: 1.14; letter-spacing: -0.035em; }
  .ab-way h1 em { position: relative; display: inline-block; padding-bottom: 6px; }
  .ab-way h1 em::after { content: ""; position: absolute; left: 6%; right: -2%; bottom: -2px; height: 9px;
    background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 9' preserveAspectRatio='none'%3E%3Cpath d='M2 7C40 1.5 100 1 138 3.5' fill='none' stroke='%2322c55e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .ab-lead { max-width: 330px; margin: 14px auto 0; font-size: 14.5px; line-height: 1.6; }
  .ab-journey { display: none; }
  .ab-d { display: none; }
  .ab-m { display: inline; }

  .abm { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; text-align: left; }
  /* the dashed line through the numbers (from the first to the last) */
  .abm::before { content: ""; position: absolute; left: 21px; top: 38px; bottom: 38px; width: 0; border-left: 2px dashed rgba(34, 197, 94, 0.55); }
  .abm-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; }
  .abm-num { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; box-sizing: border-box; border-radius: 50%;
    border: 2px solid var(--green); background: var(--bg); color: var(--text); font: 700 16px/1 var(--f-head);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.08), 0 0 16px rgba(34, 197, 94, 0.35); transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }
  .abm-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 14px; border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-2) 80%, transparent), var(--card)); box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow 0.4s ease, transform 0.4s ease; }
  .abm-ic { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(34, 197, 94, 0.16), rgba(34, 197, 94, 0.05));
    box-shadow: inset 0 0 0 1.5px rgba(34, 197, 94, 0.35); color: var(--text); }
  .abm-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .abm-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .abm-txt b { font: 600 17px/1.25 var(--f-head); letter-spacing: -0.01em; color: var(--text); }
  .abm-txt small { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
  .abm:not(.abm-bond) .abm-txt small { display: none; }
  /* the journey: smaller, each card a pill (round at both ends), the number and the icon smaller with it */
  .abm:not(.abm-bond) { gap: 10px; }
  .abm:not(.abm-bond)::before { left: 17px; top: 30px; bottom: 30px; }
  .abm:not(.abm-bond) .abm-step { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
  .abm:not(.abm-bond) .abm-num { width: 36px; height: 36px; font-size: 14px; }
  .abm:not(.abm-bond) .abm-card { gap: 12px; padding: 7px 18px 7px 7px; border-radius: 999px; }
  .abm:not(.abm-bond) .abm-ic { width: 44px; height: 44px; }
  .abm:not(.abm-bond) .abm-ic svg { width: 20px; height: 20px; }
  .abm:not(.abm-bond) .abm-txt b { font-size: 15.5px; }
  .abm:not(.abm-bond) .abm-note { margin-left: 46px; padding: 10px 16px 10px 12px; border-radius: 999px; font-size: 12.5px; }
  .abm:not(.abm-bond) .abm-note::before { left: -29px; width: 28px; }
  .abm:not(.abm-bond) .abm-note-ic svg { width: 20px; height: 20px; }
  /* the circle's cards: round ends too (two lines each) */
  .abm-bond .abm-card { padding: 9px 20px 9px 9px; border-radius: 999px; }
  /* the stop the journey is at: its number filled, its card lit */
  .abm-step.is-now .abm-num { background: var(--green); color: #04130a; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.18), 0 0 22px rgba(34, 197, 94, 0.7); }
  .abm-step.is-now .abm-card { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.45), 0 14px 30px -18px rgba(34, 197, 94, 0.55); transform: translateX(2px); }
  .abm-step.is-now .abm-ic { color: var(--green-2); box-shadow: inset 0 0 0 1.5px rgba(34, 197, 94, 0.7); }
  /* "not the right fit?": an amber note joined to the line */
  .abm-note { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 0 54px; padding: 11px 14px; border-radius: 16px;
    background: rgba(245, 158, 11, 0.08); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35); color: var(--amber); font-size: 13px; font-weight: 600; line-height: 1.35; }
  .abm-note::before { content: ""; position: absolute; left: -33px; top: 50%; width: 32px; border-top: 2px dashed rgba(245, 158, 11, 0.7); }
  .abm-note-ic { flex: none; display: grid; place-items: center; }
  .abm-note-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  html[data-theme="light"] .abm-num { color: #111418; }
  html[data-theme="light"] .abm-step.is-now .abm-num { color: #ffffff; }
  html[data-theme="light"] .abm-card { background: #ffffff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px -20px rgba(15, 23, 42, 0.3); }
  html[data-theme="light"] .abm-note { background: #fffbeb; }

  /* 2. the circle, under its words */
  .ab-bond { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 52px; }
  .ab-bond-text p { margin-top: 12px; font-size: 14.5px; line-height: 1.65; text-align: justify; }
  .ab-loop { margin-top: 18px; gap: 10px; }
  .ab-loop li { font-size: 14px; align-items: flex-start; line-height: 1.4; }
  .ab-loop li::before { flex: none; }
  .ab-loop i { flex: none; margin-top: 7px; }
  .ab-loop, .ab-orbit { display: none; }
  .abm.abm-bond { display: flex; margin-top: 20px; }
  .abm-bond .abm-ic img { width: 46px; height: 46px; border-radius: 50%; }
  .abm-bond .abm-step.is-family .abm-ic { color: #a78bfa; background: radial-gradient(circle at 50% 40%, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05)); box-shadow: inset 0 0 0 1.5px rgba(167, 139, 250, 0.4); }
  .abm-bond .abm-step.is-tutor .abm-ic { color: #60a5fa; background: radial-gradient(circle at 50% 40%, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.05)); box-shadow: inset 0 0 0 1.5px rgba(96, 165, 250, 0.4); }
  .abm-always { margin: 4px 0 0 54px; padding: 14px 18px; border-radius: 999px; text-align: center;
    background: radial-gradient(120% 140% at 50% 0%, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.05)); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.4); }
  .abm-always b { display: block; font: 700 24px/1.1 var(--f-head); color: var(--green); letter-spacing: -0.02em; }
  .abm-always span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
  .abm-always::before { content: ""; position: absolute; left: -33px; top: 50%; width: 32px; border-top: 2px dashed rgba(34, 197, 94, 0.55); }
  .abm-always { position: relative; }
  .ab-orbit:hover .ab-spin, .ab-orbit:hover .ab-up { animation-play-state: running; }

  /* 3. where we teach */
  .ab-where { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 36px; padding: 18px 16px 20px; border-radius: 24px; }
  .ab-map { max-width: 320px; margin: 0 auto; }
  .ab-where h2 { font-size: 25px; }
  .ab-eyebrow { font-size: 11px; }
  .ab-city-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .ab-city-list li { padding: 9px 12px; font-size: 13px; }
  .ab-figs-row { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
  .ab-figs { gap: 26px; }
  .ab-figs b { font-size: 26px; }
  .ab-more { font-size: 14px; white-space: nowrap; text-align: right; }

  /* 4. the call card (its words justified, as the long paragraphs above) */
  .ab-contact { margin-top: 30px; }
  .ab-contact .cc-text p { text-align: justify; }

  /* 5. two ways in */
  .ab-cta { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 30px; }
  .ab-card { padding: 20px 56px 20px 20px; border-radius: 20px; }
  .ab-card h3 { font-size: 21px; }
  .ab-card p { font-size: 13.5px; }
  .ab-card i { right: 20px; font-size: 26px; font-weight: 900; -webkit-text-stroke: 1.2px currentColor; }
  .ab-card:hover { transform: none; }
}

/* the round Urban Tutor Site logo (a circle, not the app's square tile): white in light mode */
html[data-theme="light"] img.ut-round-logo { content: url("/brand/tutor-avatar-light.png?v=3"); }

/* ---- WHERE WE TEACH: the India map (it was the Where We Are page - css/pages/where-we-are.css styles the map) ---- */
.ab-where2 { margin-top: 90px; scroll-margin-top: 90px; }
.ab-where2 .wt-head { display: block; text-align: center; margin-bottom: 8px; }
.ab-where2 .wt-head h2 { margin: 10px 0 0; font: 300 38px/1.12 var(--f-head, Sora, Inter, sans-serif); letter-spacing: -0.035em; }
.ab-where2 .wt-head h2 em { font-style: normal; font-weight: 700; color: var(--c-green-2, #22c55e); }
.ab-where-hint { margin: 0 0 22px; text-align: center; color: var(--c-muted, #9a9aa3); font-size: 14.5px; }
/* a third way in: coaching institutes */
.ab-cta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .ab-where2 { margin-top: 56px; }
  .ab-where2 .wt-head h2 { font-size: 27px; }
  .ab-cta { grid-template-columns: minmax(0, 1fr); }
}
.ab-card.is-institute { background: var(--violet-soft); }
.ab-card.is-institute span, .ab-card.is-institute i { color: var(--violet); }

/* the turning ring: its square box, turned, reaches past the screen's right edge on a narrower screen (the page could
   then be moved sideways) - the ring itself stays well inside, only the empty corners are cut */
.ab-bond, .ab-way { overflow-x: clip; }   /* (and the opening's 900px-wide glow) */
/* the three cards at the foot: room for the arrow on the right, so the words never run under it */
.ab-card { padding-right: 60px; }