/* =============================================================
   thearoh.com, the landing page for Aroh, your UPSC companion; also the public syllabus and PYQ pages (views/public.php).
   Brand kit v1.0: Dusk Indigo and Ink, Snow and Mist, Glacier for done and progress, Amber only for the sun, today and
   the main ask. Outfit for display, Hanken Grotesk for text, JetBrains Mono for numbers. Rounded, not bubbly; hairlines
   over shadows; calm ease-in-out motion that switches off with reduced motion. No red.

   30 Oct 2026 (Vikram: "update the whole landing page and highlight the best features"; "attractive and premium";
   "butter flow"): the features drawn as small app screens, how it works as the app's four places and one loop, real
   days instead of a promise, how Aroh fits. Content is visible at rest: the entrance only runs when the script is there.
   ============================================================= */
:root {
  --snow: #F7F8FA; --raised: #FFFFFF; --mist: #E4E8F0; --mist-2: #EEF1F6; --line-2: #DCE1EA; --ink: #161A35; --slate: #4B5470;
  --indigo: #262D63; --indigo-2: #3A4390; --indigo-tint: #EEF0F8; --amber: #E9962B; --amber-ink: #8F5A0E; --glacier: #2A7C7D; --glacier-tint: #EAF4F4;
  --d-surface: #0F1229; --d-raised: #181C3A; --d-line: #2A2F55; --d-ink: #ECEEF6; --d-muted: #A6ACC6;
  --d-brand: #8E97E3; --d-glacier: #5BB5B2; --d-amber: #F2A93E;
  --display: "Outfit", system-ui, sans-serif; --text: "Hanken Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --r: 6px; --r2: 16px; --ease: cubic-bezier(.45, 0, .55, 1); --out: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* a pill's display would otherwise beat the hidden attribute */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body.l26 { margin: 0; background: var(--snow); color: var(--ink); font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--raised); color: var(--ink); padding: 8px 14px; border-radius: 999px; z-index: 100; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 3px; }
.band.dark :focus-visible, .bar :focus-visible, .band.ink :focus-visible, .plan.best :focus-visible { outline-color: var(--d-glacier); }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 760px; }
.center { text-align: center; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -.015em; margin: 0; }
h1 { font-size: clamp(36px, 6vw, 60px); line-height: 1.06; }
h2 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.12; text-wrap: balance; }
h3 { font-size: 20px; line-height: 1.3; }

/* ---- bands ---- */
.band { padding: clamp(64px, 9vw, 112px) 0; }
.band.dark { background: var(--d-surface); color: var(--d-ink); }
.band.snow { background: var(--snow); }
.band.mist { background: var(--mist-2); border-top: 1px solid var(--line-2); }
.band.white { background: var(--raised); border-top: 1px solid var(--mist); }
.band.ink { background: var(--indigo); color: var(--d-ink); text-align: center; }
.band.ink h2 { color: #FFFFFF; }
.band.ink .kick { color: var(--d-glacier); }
.band.ink .body { color: #C9CEE4; margin-left: auto; margin-right: auto; }
.body { font-size: 18px; color: var(--slate); margin: 18px 0 0; max-width: 60ch; }
.body b { color: var(--ink); font-weight: 600; }
.foot { font-size: 13px; color: var(--slate); margin-top: 28px; }
.foot a { color: var(--indigo); }
.kick { margin: 0 0 12px; font: 600 13px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--glacier); }
.band.dark .kick { color: var(--d-glacier); }
.sechead { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.sechead .body { margin-left: auto; margin-right: auto; }

/* ---- buttons: pills; amber only for the main ask ---- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px;
        font: 600 16px/1 var(--text); text-decoration: none; border: 1px solid transparent; cursor: pointer;
        transition: background .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease); }
.pill.big { min-height: 54px; padding: 0 30px; font-size: 17px; }
.pill.sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.pill.amber { background: var(--amber); color: #161A35; }
.pill.amber:hover { background: #F0A443; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(233, 150, 43, .7); }
.pill.amber:active { transform: none; }
.pill.ghost { background: transparent; color: var(--d-ink); border-color: var(--d-line); }
.pill.ghost:hover { border-color: var(--d-muted); }
.pill.light { background: var(--d-ink); color: var(--d-surface); }
.pill.light:hover { background: #FFFFFF; }
.textlink { background: none; border: 0; padding: 10px 4px; min-height: 44px; font: 600 16px/1 var(--text); color: inherit; text-decoration: none; cursor: pointer;
            border-bottom: 1px solid transparent; transition: border-color .24s var(--ease); }
.textlink:hover { border-bottom-color: currentColor; }
.textlink.sm { font-size: 14px; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 34px; }
.ctas.center { justify-content: center; margin-top: 44px; }
.micro { font-size: 13.5px; margin: 14px 0 0; opacity: .8; }
.micro a { color: inherit; }

/* ---- the bar ---- */
.bar { position: sticky; top: 0; z-index: 50; background: var(--d-surface); border-bottom: 1px solid var(--d-line); color: var(--d-ink); }
.barrow { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { margin-right: auto; display: inline-flex; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { color: var(--d-muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 12px; border-radius: 999px; transition: color .24s var(--ease), background .24s var(--ease); }
.nav a:hover { color: var(--d-ink); }
.nav a.on { color: var(--d-ink); background: rgba(236, 238, 246, .08); }
.nav .signin { color: var(--d-ink); }
.menu { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 12px; }
.menu span { display: block; height: 2px; background: var(--d-ink); border-radius: 2px; margin: 5px 0; transition: transform .24s var(--ease); }
.prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.prog i { display: block; height: 100%; background: var(--d-glacier); transform-origin: left; transform: scaleX(0); }

/* =============================================================
   1. the hero
   ============================================================= */
.hero { position: relative; overflow: hidden; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 88px); }
.hero::before { content: ""; position: absolute; right: -12%; top: -24%; width: 72vw; max-width: 940px; aspect-ratio: 1; border-radius: 50%;
                background: radial-gradient(closest-side, rgba(58, 67, 144, .6), rgba(58, 67, 144, 0)); pointer-events: none; }
.hero::after { content: ""; position: absolute; left: -10%; bottom: -30%; width: 50vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%;
               background: radial-gradient(closest-side, rgba(91, 181, 178, .12), rgba(91, 181, 178, 0)); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.herogrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.h1k { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: 0 0 22px; padding: 6px 14px 6px 10px; border: 1px solid rgba(91, 181, 178, .35);
       border-radius: 999px; background: rgba(91, 181, 178, .08); font: 600 14px/1.4 var(--text); letter-spacing: .02em; color: var(--d-glacier); }
.h1k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--d-glacier); box-shadow: 0 0 0 4px rgba(91, 181, 178, .18); flex: none; }
.hero h1 { font-size: clamp(44px, 6.6vw, 76px); line-height: 1.02; letter-spacing: -.025em; color: #FFFFFF; }
.hdot { color: var(--d-amber); }
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--d-muted); margin: 22px 0 0; max-width: 32em; line-height: 1.55; }
.hero .lede { color: #C3C8DE; }
.offer { color: var(--d-muted); opacity: 1; }
.offdot { display: inline-block; vertical-align: middle; width: 7px; height: 7px; margin: -2px 8px 0 0; border-radius: 50%; background: var(--d-amber); }
.playic { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--d-glacier); }
.pill.ghost.big.trybtn { border-color: rgba(236, 238, 246, .4); }
.pill.ghost.big.trybtn:hover { border-color: var(--d-ink); background: rgba(236, 238, 246, .05); }
.facts { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 36em; }
.facts li { display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--d-line); border-radius: 12px; background: rgba(24, 28, 58, .6); }
.facts b { font-size: 22px; font-weight: 500; color: var(--d-ink); }
.facts span { font-size: 13px; line-height: 1.4; color: var(--d-muted); }
.heroart { position: relative; display: flex; justify-content: center; padding: 64px 0 36px; }
.phone { position: relative; width: 300px; border: 1px solid var(--d-line); border-radius: 30px; background: var(--d-raised); padding: 22px 18px 20px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85); }
.ph-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ph-top b { font-family: var(--display); font-weight: 500; font-size: 20px; margin-right: auto; }
.sun { width: 9px; height: 9px; border-radius: 50%; background: var(--d-amber); flex: none; }
.ph-chip { font-size: 12px; color: var(--d-muted); border: 1px solid var(--d-line); border-radius: 999px; padding: 4px 10px; }
.ph-count { font-size: 13px; color: var(--d-muted); margin-top: 6px; }
.ph-card { margin-top: 16px; border: 1px solid var(--d-line); border-radius: 12px; padding: 16px; display: grid; gap: 4px; transition: border-color .4s var(--ease); }
.ph-kind { font-size: 12px; color: var(--d-glacier); font-weight: 600; letter-spacing: .02em; }
.ph-card b { font-family: var(--display); font-weight: 500; font-size: 19px; }
.ph-meta { font-size: 14px; color: var(--d-muted); }
.ph-why { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #C9CEE4; background: rgba(142, 151, 227, .1); border-radius: 8px; padding: 6px 9px; }
.ph-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; border: 1px solid var(--d-ink); border-radius: 999px; padding: 7px 18px; font-size: 14px; font-weight: 600;
          transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.ph-tick { display: none; width: 18px; height: 18px; }
.ph-tick svg { width: 18px; height: 18px; fill: none; stroke: var(--d-glacier); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-tick path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .4s var(--ease) .1s; }
.phone.studying .ph-btn { border-color: var(--d-glacier); color: var(--d-glacier); }
.phone.done .ph-btn { border-color: var(--d-glacier); color: var(--d-glacier); background: rgba(91, 181, 178, .1); }
.phone.done .ph-tick { display: inline-block; }
.phone.done .ph-tick path { stroke-dashoffset: 0; }
.phone.done .ph-card { border-color: rgba(91, 181, 178, .45); }
.ph-slots { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px 10px; margin-top: 14px; padding: 12px 4px 0; border-top: 1px solid var(--d-line); font-size: 13px; color: var(--d-muted); }
.ph-slots .mono { font-size: 11.5px; }
.ph-slots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--d-muted); }
.ph-slots i.on { background: var(--d-glacier); border-color: var(--d-glacier); }
.seven { display: flex; align-items: flex-end; gap: 6px; height: 30px; margin-top: 16px; }
.seven i { flex: 1; border-radius: 2px; background: var(--d-line); transform-origin: bottom; transition: transform .9s var(--ease); }
.seven i:nth-child(1) { height: 30%; } .seven i:nth-child(2) { height: 42%; } .seven i:nth-child(3) { height: 52%; } .seven i:nth-child(4) { height: 62%; }
.seven i:nth-child(5) { height: 74%; } .seven i:nth-child(6) { height: 86%; } .seven i:nth-child(7) { height: 100%; }
.seven i.on { background: var(--d-glacier); } .seven i.today { background: var(--d-amber); }
#hpN { display: inline-block; }
.bump { animation: bump .5s var(--ease) 1; }
@keyframes bump { 0% { transform: translateY(0); } 40% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
/* small cards that float beside the phone: the other places in the app */
.float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border: 1px solid var(--d-line); border-radius: 14px;
         background: rgba(24, 28, 58, .92); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); font-size: 12.5px; line-height: 1.3; color: var(--d-muted); white-space: nowrap; }
.float svg { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: rgba(91, 181, 178, .14); color: var(--d-glacier); flex: none; }
.float b { display: block; color: var(--d-ink); font-weight: 600; font-size: 13px; }
.fl1 { left: 0; top: 4px; } .fl2 { right: -18px; top: 56%; } .fl3 { left: -8px; bottom: 0; }
.js .float { animation: floaty 7s var(--ease) infinite; } .js .fl2 { animation-delay: -2.4s; } .js .fl3 { animation-delay: -4.6s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tag { font-family: var(--text); }
/* the hero shows at once (no waiting for the scroll script), with a short entrance of its own */
.js .hero .rise { opacity: 1; transform: none; animation: heroin .7s var(--out) both; }
.js .hero .rise.d2 { animation-delay: .15s; } .js .hero .rise.d3 { animation-delay: .3s; }
@keyframes heroin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* =============================================================
   2. the January timetable, short
   ============================================================= */
.beats { list-style: none; margin: 36px 0 0; padding: 0 0 0 28px; position: relative; }
.beats::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--line-2); }
.beat { position: relative; font-size: 18px; color: var(--slate); margin: 0 0 22px; }
.beat b { color: var(--ink); font-weight: 600; }
.beat .dot { position: absolute; left: -28px; top: 8px; width: 13px; height: 13px; border-radius: 50%; background: var(--snow); border: 1px solid #B7BFD0; transition: background .6s var(--ease); }
.beat.in .dot { background: #B7BFD0; }
.beat .dot.ring, .beat.in .dot.ring { background: var(--snow); }
.pull { margin-top: 30px; padding: 28px 30px; background: var(--raised); border: 1px solid var(--mist); border-radius: 20px; position: relative; overflow: hidden; }
.pull::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--glacier); }
.pullq { margin: 0; font: 500 clamp(23px, 2.8vw, 30px)/1.28 var(--display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.closer { margin: 12px 0 0; font-size: 17px; color: var(--slate); }
.empath { position: relative; padding-bottom: 80px; }
.empath::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 36px; margin-left: -1px; background: var(--glacier); }
.bridge { display: flex; width: max-content; max-width: 100%; margin: 40px auto 0; align-items: center; gap: 12px; min-height: 48px; padding: 12px 22px; border: 1px solid var(--glacier);
          border-radius: 999px; background: var(--raised); color: var(--ink); font: 600 16px/1.3 var(--text); text-decoration: none; transition: background .24s var(--ease); }
.bridge:hover { background: var(--glacier-tint); }
.chev { width: 10px; height: 10px; border-right: 2px solid var(--glacier); border-bottom: 2px solid var(--glacier); transform: rotate(45deg) translate(-2px, -2px); animation: chev 1.6s var(--ease) infinite; flex: none; }
@keyframes chev { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }

/* =============================================================
   3. what's inside: feature rows with small app screens
   ============================================================= */
.feats .sechead { margin-bottom: 24px; }
.frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; padding: 64px 0; }
.frow + .frow { border-top: 1px solid var(--mist-2); }
.frow.flip .ftext { order: 2; }
.fk { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 13px/1.4 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--glacier); }
.fk svg { color: var(--glacier); }
.ftext h3 { font-size: clamp(27px, 3.2vw, 36px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.ftext > p:not(.fk):not(.flink) { color: var(--slate); font-size: 17.5px; margin: 16px 0 0; max-width: 46ch; }
.fl { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; max-width: 48ch; }
.fl li { position: relative; padding-left: 32px; color: var(--slate); font-size: 16px; line-height: 1.5; }
.fl li b { color: var(--ink); font-weight: 600; }
.fl li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--glacier-tint); }
.fl li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 8px; height: 4.5px; border-left: 2px solid var(--glacier); border-bottom: 2px solid var(--glacier); transform: rotate(-45deg); }
.flink { margin: 20px 0 0; font-size: 15px; color: var(--slate); }
.flink a { color: var(--indigo); font-weight: 600; text-underline-offset: 3px; }
.fart { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.fart::before { content: ""; position: absolute; inset: -6% -2%; border-radius: 48px; background: radial-gradient(ellipse at 50% 45%, var(--indigo-tint) 0%, rgba(238, 240, 248, 0) 68%); pointer-events: none; }
.fart.duo { gap: 18px; }
.fart.duo .mk { max-width: 290px; }
.fart.duo .mk.tt { margin-top: 64px; }
.mknote { text-align: center; font-size: 13px; color: var(--slate); margin: 8px 0 0; }

/* the small app screens: the app's own shapes, light, as the app looks by day */
.mk { position: relative; z-index: 1; width: 100%; max-width: 330px; background: var(--raised); border: 1px solid var(--mist); border-radius: 26px; padding: 16px 16px 18px;
      box-shadow: 0 1px 0 rgba(38, 45, 99, .04), 0 28px 60px -38px rgba(38, 45, 99, .45); color: var(--ink); font-size: 13px; line-height: 1.4;
      transition: transform .5s var(--out), box-shadow .5s var(--out); }
.fart:hover .mk { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(38, 45, 99, .04), 0 36px 70px -38px rgba(38, 45, 99, .5); }
.mk-top { display: flex; align-items: center; gap: 8px; padding: 2px 2px 12px; margin-bottom: 12px; border-bottom: 1px solid var(--mist-2); }
.mk-top b { font: 500 17px/1.2 var(--display); margin-right: auto; }
.mk-top svg { color: var(--indigo); }
.mk .sun { background: var(--amber); }
.mk-chip { font-size: 11.5px; color: var(--slate); border: 1px solid var(--mist); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.mk-card { border: 1px solid var(--mist); border-radius: 14px; padding: 14px; display: grid; gap: 3px; background: var(--raised); }
.mk-card b { font: 500 18px/1.25 var(--display); }
.mk-k { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--glacier); }
.mk-m { font-size: 12.5px; color: var(--slate); }
.mk-why { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--indigo); background: var(--indigo-tint); border-radius: 8px; padding: 6px 9px; }
.mk-btn { justify-self: start; margin-top: 8px; background: var(--indigo); color: #FFFFFF; border-radius: 999px; padding: 7px 18px; font-weight: 600; font-size: 12.5px; }
.mk-row, .mk-log { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--mist-2); }
.mk-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mk-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--glacier-tint); color: var(--glacier); display: grid; place-items: center; flex: none; }
.mk-rt { display: grid; flex: 1; min-width: 0; }
.mk-rt b { font-size: 13px; font-weight: 600; }
.mk-rt > span { font-size: 12px; color: var(--slate); }
.mk-pill { font-size: 11px; border: 1px solid var(--mist); border-radius: 999px; padding: 3px 8px; color: var(--slate); white-space: nowrap; }
.mtk { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--glacier); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mtk circle { stroke-opacity: .35; }
.mtk path { stroke-dasharray: 16; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease); }
/* the timetable */
.tt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tt-list li { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--mist-2); background: var(--raised);
              transition: background .5s var(--ease), border-color .5s var(--ease); }
.tt-t { font-size: 10.5px; color: var(--slate); }
.tt-l { font-weight: 600; font-size: 13px; min-width: 0; }
.tt-l small { display: block; font-weight: 500; font-size: 11px; color: var(--glacier); margin-top: 1px; }
.tt-list li.done { background: rgba(42, 124, 125, .06); border-color: rgba(42, 124, 125, .25); }
.tt-list li.soft { background: var(--snow); }
.tt-list li.soft .tt-l { font-weight: 500; color: var(--slate); }
.tt-list li.now { border-color: var(--indigo); box-shadow: inset 3px 0 0 var(--amber); }
.tt-list li.now small { color: var(--amber-ink); }
.js .rise:not(.in) .tt-list li.done { background: var(--raised); border-color: var(--mist-2); }
.js .rise:not(.in) .mtk path { stroke-dashoffset: 16; }
.js .tt-list li.auto, .js .tt-list li.auto .mtk path { transition-delay: .7s; }
/* the Study Hall: a library at night */
.mk.hall { background: var(--d-surface); border-color: var(--d-line); color: var(--d-ink); box-shadow: 0 30px 70px -36px rgba(15, 18, 41, .7); }
.mk.hall .mk-top { border-bottom-color: var(--d-line); }
.mk.hall .mk-top svg { color: var(--d-brand); }
.mk-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--d-glacier); border: 1px solid rgba(91, 181, 178, .4); border-radius: 999px; padding: 3px 10px 3px 8px; }
.livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--d-glacier); flex: none; }
.js .livedot { animation: live 1.8s var(--ease) infinite; }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 181, 178, .6); } 50% { box-shadow: 0 0 0 6px rgba(91, 181, 178, 0); } }
.hall-n { margin: 0 0 10px; font-size: 13px; color: var(--d-muted); }
.hall-n b { font-size: 20px; color: var(--d-ink); font-weight: 500; margin-right: 4px; }
.seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.seat { display: grid; justify-items: center; text-align: center; gap: 1px; padding: 10px 4px 9px; border: 1px solid var(--d-line); border-radius: 12px; background: rgba(24, 28, 58, .7); font-size: 10.5px; color: var(--d-muted); min-width: 0; }
.seat b { font-size: 12.5px; font-weight: 600; color: var(--d-ink); margin-top: 5px; }
.seat > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.av { width: 30px; height: 30px; border-radius: 50%; position: relative; overflow: hidden; background: #262B52; }
.av::before { content: ""; position: absolute; left: 50%; top: 6px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #6E77C4; }
.av::after { content: ""; position: absolute; left: 50%; top: 19px; width: 22px; height: 16px; margin-left: -11px; border-radius: 50%; background: #6E77C4; }
.seat.you { border-color: var(--d-glacier); background: rgba(91, 181, 178, .1); }
.seat.you .av::before, .seat.you .av::after { background: var(--d-glacier); }
.hall-f { margin: 12px 0 0; font-size: 12px; color: var(--d-muted); text-align: center; }
.fart.hallart::before { background: radial-gradient(ellipse at 50% 45%, rgba(58, 67, 144, .16) 0%, rgba(58, 67, 144, 0) 68%); }
/* a past question */
.pq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-src { font-size: 11px; color: var(--indigo); background: var(--indigo-tint); border-radius: 999px; padding: 3px 9px; }
.mk-tag { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; border: 1px solid var(--mist); color: var(--slate); }
.mk-tag.ok { color: var(--glacier); border-color: rgba(42, 124, 125, .35); background: rgba(42, 124, 125, .06); }
.mk-q { margin: 10px 0 10px; font: 500 15px/1.4 var(--display); }
.mk-opts { display: grid; gap: 6px; }
.mk-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--mist); border-radius: 10px; font-size: 13px; }
.mk-opt .mono { color: var(--slate); font-size: 12px; }
.mk-opt.right { border-color: var(--glacier); background: rgba(42, 124, 125, .07); font-weight: 600; }
.mk-opt .mtk { margin-left: auto; }
.mk-sol, .mk-sk { margin-top: 12px; border-left: 2px solid var(--glacier); padding: 2px 0 2px 10px; display: grid; gap: 6px; }
.mk-sk { border-left: 0; padding: 0; }
.mk-sol i, .mk-sk i { display: block; height: 7px; border-radius: 4px; background: var(--mist); }
.mk-sol i.s, .mk-sk i.s { width: 62%; }
.mk-tabs { display: flex; gap: 6px; margin-top: 14px; }
.mk-tabs span { flex: 1; text-align: center; font-size: 11px; font-weight: 600; padding: 7px 6px; border-radius: 999px; border: 1px solid var(--mist); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tabs span.on { background: var(--indigo); color: #FFFFFF; border-color: var(--indigo); flex: 0 0 auto; padding: 7px 14px; }
/* the Big Picture */
.big-line { margin: 0 0 10px; font-size: 12.5px; color: var(--ink); background: var(--glacier-tint); border-radius: 10px; padding: 8px 10px; }
.lenses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lens { display: flex; align-items: center; gap: 8px; padding: 10px 8px; border: 1px solid var(--mist-2); border-radius: 12px; min-width: 0; }
.lens > span:last-child { display: grid; min-width: 0; }
.lens > span:last-child b { font-size: 12.5px; font-weight: 600; }
.lens > span:last-child span { font-size: 10.5px; color: var(--slate); line-height: 1.3; }
.mk-ring { --p: 0; --fill: var(--p); width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
           background: radial-gradient(closest-side, var(--raised) 76%, transparent 78%), conic-gradient(var(--glacier) calc(var(--fill) * 1%), var(--mist) 0); transition: --fill 1.3s var(--out); }
.mk-ring b { font-size: 10.5px; font-weight: 500; }
.mk-num { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--indigo-tint); color: var(--indigo); display: grid; place-items: center; font-size: 14px; font-weight: 500; }
.js .rise:not(.in) .mk-ring { --fill: 0; }
@property --fill { syntax: "<number>"; inherits: true; initial-value: 0; }
.mk-log { margin-top: 10px; padding: 10px; border: 1px dashed rgba(42, 124, 125, .45); border-radius: 12px; }

/* the quieter things */
.fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fcard { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--snow); border: 1px solid var(--mist); border-radius: var(--r2);
         transition: border-color .3s var(--ease), transform .3s var(--out), background .3s var(--ease); }
.fcard:hover { border-color: var(--line-2); background: var(--raised); transform: translateY(-2px); }
.fcic { width: 42px; height: 42px; border-radius: 12px; background: var(--indigo-tint); color: var(--indigo); display: grid; place-items: center; }
.fcard h4 { margin-top: 8px; font-size: 19px; line-height: 1.25; }
.fcard p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.5; }
.fcard > div:last-child { margin-top: auto; padding-top: 10px; }
.anum { display: flex; gap: 6px; }
.anum span { flex: 1; display: grid; gap: 1px; padding: 8px; border: 1px solid var(--mist); border-radius: 10px; background: var(--raised); font-size: 11px; color: var(--slate); min-width: 0; }
.anum b { font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.rvl { display: flex; gap: 5px; }
.rvl i { flex: 1; height: 30px; border-radius: 8px; border: 1px solid var(--mist); background: var(--raised); display: grid; place-items: center; font: 500 11px/1 var(--mono); font-style: normal; color: var(--slate);
            transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); }
.rvl i:nth-child(-n+3) { background: rgba(42, 124, 125, .1); border-color: rgba(42, 124, 125, .35); color: var(--glacier); }
.rvl i:nth-child(2) { transition-delay: .15s; } .rvl i:nth-child(3) { transition-delay: .3s; }
.js .rise:not(.in) .rvl i:nth-child(-n+3) { background: var(--raised); border-color: var(--mist); color: var(--slate); }
.qline { padding-top: 16px !important; }
.qbar { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--raised); border: 1px solid var(--mist); }
.qbar i { display: block; height: 100%; border-radius: 4px; background: var(--glacier); transition: width 1s var(--out); }
.js .rise:not(.in) .qbar i { width: 0 !important; }
.qbar em { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--indigo); border-radius: 1px; }
.qlab { position: relative; display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--slate); }
.qlab span[style] { position: absolute; transform: translateX(-50%); color: var(--indigo); font-weight: 600; }
.langrow { display: flex; flex-wrap: wrap; gap: 6px; }
.langrow span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--mist); background: var(--raised); font-size: 14px; }
.langrow span:first-child { border-color: var(--indigo); color: var(--indigo); font-weight: 600; }

/* =============================================================
   4. how it works: four places, one loop
   ============================================================= */
.loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; position: relative; }
.loop::before { content: ""; position: absolute; top: 22px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, rgba(42, 124, 125, .5), rgba(38, 45, 99, .35)); }
.loop li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 2px; }
.ln { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; background: var(--raised); border: 2px solid var(--glacier); color: var(--glacier); display: grid; place-items: center;
      font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.loop li.last .ln { background: var(--glacier); color: var(--raised); }
.loop li > b { font: 500 16.5px/1.3 var(--display); }
.loop li > span { font-size: 14px; color: var(--slate); line-height: 1.45; }
.loop li > em { margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: .03em; color: var(--indigo); background: var(--raised); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }
.result { display: flex; align-items: center; justify-content: center; gap: 12px; width: max-content; max-width: 100%; margin: 44px auto 0; padding: 14px 24px; background: var(--raised);
          border: 1px solid var(--line-2); border-radius: 999px; font-size: 16.5px; color: var(--slate); }
.result b { color: var(--ink); font-weight: 600; }
#how .foot { text-align: center; }

/* =============================================================
   5. the live demo
   ============================================================= */
#try { position: relative; }
#try::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 56px; margin-left: -1px; background: linear-gradient(var(--d-glacier), rgba(91, 181, 178, 0)); }
.demohead { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.demohead .lede { margin-left: auto; margin-right: auto; }
.demomicro { color: var(--d-muted); }
.demo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; max-width: 960px; margin: 0 auto; }
.story { position: sticky; top: 96px; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.chapters button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border: 1px solid transparent; border-radius: 10px;
                   background: none; color: var(--d-muted); font: 500 16px/1.3 var(--text); text-align: left; cursor: pointer; transition: background .24s var(--ease), color .24s var(--ease); }
.chapters button:hover { color: var(--d-ink); }
.chapters .cn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--d-line); display: grid; place-items: center; font-size: 12px; flex: none; transition: background .24s, border-color .24s; }
.chapters li.on button { background: var(--d-raised); border-color: var(--d-line); color: var(--d-ink); }
.chapters li.on .cn { background: var(--d-ink); color: var(--d-surface); border-color: var(--d-ink); }
.chapters li.seen .cn { background: var(--d-glacier); border-color: var(--d-glacier); color: var(--d-surface); }
.storybox { margin-top: 20px; border-top: 1px solid var(--d-line); padding-top: 18px; }
.sdots { display: flex; gap: 6px; margin: 0 0 12px; }
.sdots i { width: 22px; height: 4px; border-radius: 2px; background: var(--d-line); transition: background .3s var(--ease); }
.sdots i.seen { background: var(--d-glacier); } .sdots i.on { background: var(--d-ink); }
.storystep { display: none; margin: 0 0 6px; font: 600 13px/1.4 var(--text); letter-spacing: .04em; color: var(--d-glacier); }
.storycap { font-size: 18px; color: var(--d-ink); margin: 0 0 14px; min-height: 3.2em; transition: opacity .2s var(--ease); }
.storybox > .pill { margin: 0 0 14px; }
.storynav { display: flex; align-items: center; justify-content: space-between; }
.storynav .textlink { color: var(--d-muted); }
.storynav .textlink:disabled { opacity: .35; cursor: default; }
#storyNext.nudge { animation: nudge 1.4s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 238, 246, .5); } 50% { box-shadow: 0 0 0 7px rgba(236, 238, 246, 0); } }
.device { display: grid; justify-items: center; gap: 12px; }
.devtag { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--d-ink); }
.devnote { font-size: 12px; color: var(--d-muted); margin: 0; text-align: center; }
.tapme { animation: tapme 1.5s var(--ease) infinite; }
@keyframes tapme { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 181, 178, .55); } 50% { box-shadow: 0 0 0 6px rgba(91, 181, 178, 0); } }
/* the phone: the app's own shapes in brand colours */
.app { width: 100%; max-width: 380px; height: 640px; display: grid; grid-template-rows: auto 1fr auto; background: var(--d-raised); border: 1px solid var(--d-line); border-radius: 30px;
       overflow: hidden; color: var(--d-ink); text-align: left; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); }
.app-top { display: flex; align-items: center; gap: 8px; padding: 18px 18px 12px; border-bottom: 1px solid var(--d-line); }
.app-title { font-family: var(--display); font-weight: 500; font-size: 20px; margin-right: auto; }
.app-chip { font-size: 12px; border: 1px solid var(--d-line); border-radius: 999px; padding: 4px 9px; display: inline-flex; gap: 4px; white-space: nowrap; }
.langs { display: inline-flex; border: 1px solid var(--d-line); border-radius: 999px; overflow: hidden; }
.langs button { min-width: 30px; min-height: 28px; background: none; border: 0; color: var(--d-muted); font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; padding: 0 6px; }
.langs button[aria-pressed="true"] { background: var(--d-ink); color: var(--d-surface); }
.app-screen { overflow-y: auto; padding: 16px 16px 20px; display: grid; gap: 12px; align-content: start; scrollbar-width: thin; }
.app-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--d-line); }
.app-tabs button { display: grid; justify-items: center; gap: 4px; min-height: 60px; padding: 8px 2px; background: none; border: 0; color: var(--d-muted); font: 500 12px/1.2 var(--text); cursor: pointer; }
.app-tabs button[aria-current] { color: var(--d-ink); }
.app-tabs button[aria-current] svg { color: var(--d-brand); }
.d-k { font-size: 12px; color: var(--d-glacier); font-weight: 600; letter-spacing: .02em; }
.d-m { font-size: 13px; color: var(--d-muted); line-height: 1.45; }
.d-card { border: 1px solid var(--d-line); border-radius: 12px; padding: 14px; display: grid; gap: 3px; position: relative; transition: background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease); }
.d-card > b, .d-subj > b { font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.3; }
.d-card.is-done { background: rgba(91, 181, 178, .08); border-color: rgba(91, 181, 178, .45); }
.d-card.dim { opacity: .45; filter: blur(1.5px); }
.d-card .tk { position: absolute; right: 14px; top: 14px; }
.tk { width: 22px; height: 22px; flex: none; display: inline-block; }
.tk svg { width: 22px; height: 22px; fill: none; stroke: var(--d-glacier); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tk path { stroke-dasharray: 16; stroke-dashoffset: 0; animation: draw .4s var(--ease) 1; }
@keyframes draw { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
.tk.off { border: 1.5px solid var(--d-line); border-radius: 50%; width: 20px; height: 20px; margin: 1px; }
.d-btn { justify-self: start; margin-top: 10px; min-height: 40px; padding: 0 18px; border: 1px solid var(--d-ink); border-radius: 999px; background: none; color: var(--d-ink);
         font: 600 14px/1 var(--text); cursor: pointer; transition: background .24s var(--ease); }
.d-btn:hover { background: rgba(236, 238, 246, .08); }
.d-btn.sm { margin: 0; min-height: 36px; padding: 0 14px; font-size: 13px; }
.d-btn.ghost { border-color: var(--d-line); color: var(--d-muted); }
.d-timer { justify-self: start; margin-top: 10px; font-size: 13px; border: 1px solid var(--d-glacier); color: var(--d-glacier); border-radius: 999px; padding: 8px 14px; }
.d-line { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--d-glacier); animation: fill 2.2s var(--ease) forwards; }
@keyframes fill { to { width: 100%; } }
.d-done { margin-top: 8px; font-size: 13px; color: var(--d-glacier); font-weight: 600; }
.d-then { margin: -2px 2px 0; font-size: 13px; color: var(--d-muted); }
.d-q { margin: 8px 0 6px; font-size: 14px; color: var(--d-ink); }
.d-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.d-seg button { min-height: 44px; border: 1px solid var(--d-line); border-radius: 10px; background: none; color: var(--d-ink); font: 600 13px/1.2 var(--text); cursor: pointer; padding: 4px; }
.d-seg button:hover { border-color: var(--d-muted); }
.d-fold { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--d-muted); padding: 4px 2px; }
.d-fold b { color: var(--d-ink); font-weight: 600; }
.d-backbtn { justify-self: start; background: none; border: 0; color: var(--d-muted); font: 600 14px/1 var(--text); padding: 8px 0; cursor: pointer; }
.d-src { margin: 0; font-size: 12px; color: var(--d-glacier); font-weight: 600; }
.d-ques { margin: 0; font-family: var(--display); font-size: 17px; line-height: 1.4; }
.d-opts { display: grid; gap: 8px; }
.d-opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; min-height: 44px; padding: 10px 12px; border: 1px solid var(--d-line); border-radius: 10px; background: none;
         color: var(--d-ink); font: 400 14px/1.4 var(--text); cursor: pointer; }
.d-opt .mono { color: var(--d-muted); }
.d-opt.right { border-color: var(--d-glacier); background: rgba(91, 181, 178, .1); }
.d-opt.picked { border-color: var(--d-muted); opacity: .7; }
.d-opt:disabled { cursor: default; }
.d-verdict { margin: 4px 0 0; font-size: 14px; color: var(--d-ink); }
.d-sol { border-left: 2px solid var(--d-glacier); padding: 2px 0 2px 12px; display: grid; gap: 6px; }
.d-sol p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--d-muted); white-space: pre-line; }
.d-subj { display: grid; gap: 6px; }
.d-bar { height: 4px; border-radius: 2px; background: var(--d-line); overflow: hidden; }
.d-bar i { display: block; height: 100%; background: var(--d-glacier); transition: width .6s var(--ease); }
.d-units { list-style: none; margin: 0; padding: 0; display: grid; }
.d-unit { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 2px; background: none; border: 0; border-bottom: 1px solid var(--d-line);
          color: var(--d-ink); font: 400 14px/1.35 var(--text); text-align: left; cursor: default; }
.d-unit.fr { cursor: pointer; }
.d-unit.fr span:last-child { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--d-line); }
.d-more { font-size: 12px; color: var(--d-muted); margin: 6px 0 0; }
.d-row2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--d-line); font-size: 14px; }
.d-mq { border: 1px solid var(--d-line); border-radius: 10px; padding: 12px; display: grid; gap: 6px; }
.d-mq p { margin: 0; font-size: 14px; line-height: 1.5; }
.d-write { display: grid; gap: 8px; }
.d-write textarea { width: 100%; border: 1px solid var(--d-line); border-radius: 10px; background: var(--d-surface); color: var(--d-ink); font: 400 14px/1.5 var(--text); padding: 10px; resize: vertical; }
.d-hallhead { margin: 0; font-size: 15px; } .d-hallhead b { font-size: 22px; margin-right: 4px; }
.d-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.d-tile { border: 1px solid var(--d-line); border-radius: 10px; padding: 10px 6px; display: grid; justify-items: center; text-align: center; gap: 2px; font-size: 11.5px; color: var(--d-muted); min-width: 0; }
.d-tile b { font-family: var(--text); font-weight: 600; font-size: 13px; color: var(--d-ink); }
.d-tile .av { width: 26px; height: 26px; margin-bottom: 2px; }
.d-tile .av::before { top: 5px; width: 9px; height: 9px; margin-left: -4.5px; }
.d-tile .av::after { top: 16px; width: 18px; height: 14px; margin-left: -9px; }
.d-tile.you { border-color: var(--d-glacier); background: rgba(91, 181, 178, .08); }
.d-tile.you .av::before, .d-tile.you .av::after { background: var(--d-glacier); }
.d-an { border: 1px solid var(--d-line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
.d-an > b { font-size: 22px; font-weight: 500; }
.d-an.two { grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.d-an.two > span:last-child { display: grid; gap: 2px; font-size: 13px; color: var(--d-muted); }
.d-an.two b { font-size: 20px; color: var(--d-ink); font-weight: 500; }
.d-bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; margin-top: 4px; }
.d-bars i { flex: 1; background: var(--d-glacier); border-radius: 2px; opacity: .8; transition: height .5s var(--ease); }
.d-bars i.today { background: var(--d-amber); opacity: 1; }
.d-ring { --p: 0; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--d-glacier) calc(var(--p) * 1%), var(--d-line) 0); }
.d-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--d-raised); }
.d-ring b { position: relative; font-size: 13px; }
.d-pace { margin: 2px 2px 0; font-size: 14px; color: var(--d-ink); }
.d-week { display: flex; gap: 6px; padding: 6px 0 2px; }
.d-week i { flex: 1; text-align: center; font: 500 12px/1 var(--mono); font-style: normal; color: var(--d-muted); padding-top: 22px; position: relative; }
.d-week i::before { content: ""; position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--d-glacier); transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.d-week i.off::before { background: transparent; box-shadow: inset 0 0 0 1px var(--d-muted); }
.d-quiet { margin: 0; font-size: 14px; color: var(--d-muted); }
.d-welcome { display: grid; gap: 4px; padding: 4px 2px; }
.d-welcome b { font-family: var(--display); font-weight: 500; font-size: 22px; }
.d-welcome span { color: var(--d-muted); font-size: 14px; }
.hl { animation: hl 1.6s var(--ease) 1; }
@keyframes hl { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 181, 178, 0); } 30% { box-shadow: 0 0 0 4px rgba(91, 181, 178, .45); } }

/* =============================================================
   6. on real days
   ============================================================= */
.days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.day { display: grid; gap: 8px; align-content: start; padding: 24px 22px; background: var(--raised); border: 1px solid var(--mist); border-radius: var(--r2); }
.dic { width: 42px; height: 42px; border-radius: 12px; background: var(--glacier-tint); color: var(--glacier); display: grid; place-items: center; margin-bottom: 6px; }
.day h3 { font-size: 18.5px; line-height: 1.3; }
.day p { margin: 0; font-size: 15px; color: var(--slate); line-height: 1.5; }
#days .foot { margin-top: 32px; }

/* =============================================================
   7. how Aroh fits
   ============================================================= */

/* =============================================================
   8–10. who made it, the plans, the questions, the footer
   ============================================================= */
.plansintro { text-align: center; }
.plansintro .body { margin-left: auto; margin-right: auto; max-width: 54ch; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; align-items: stretch; }
.plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plans.four .planbtn { font-size: 15px; }
.plan { display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--mist); border-radius: 18px; padding: 30px 24px 24px; position: relative; min-width: 0;
        transition: border-color .3s var(--ease), transform .3s var(--out); }
.plan:hover { border-color: var(--line-2); transform: translateY(-2px); }
.plan h3 { font-size: 22px; font-weight: 600; }
.plan .for { margin: 4px 0 0; font-size: 15px; color: var(--slate); }
.price { margin: 22px 0 0; color: var(--slate); font-size: 15.5px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.price .amt { font-family: var(--display); font-size: 42px; line-height: 1; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan .sub { margin: 8px 0 0; font-size: 14.5px; color: var(--slate); min-height: 1.5em; }
.plan ul { list-style: none; margin: 22px 0 26px; padding: 22px 0 0; border-top: 1px solid var(--mist); display: grid; gap: 11px; align-content: start; }
.plan li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); line-height: 1.45; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--glacier); border-bottom: 2px solid var(--glacier); transform: rotate(-45deg); }
.planbtn { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 14px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--line-2); background: var(--raised);
           color: var(--indigo); font-weight: 600; font-size: 15.5px; text-align: center; text-decoration: none; transition: border-color .2s var(--ease), background .2s var(--ease); }
.planbtn:hover { border-color: var(--indigo); }
.plan.best { background: var(--indigo); border-color: var(--indigo); color: var(--d-ink); box-shadow: 0 30px 60px -36px rgba(38, 45, 99, .7); }
.plan.best h3, .plan.best .price .amt { color: #FFFFFF; }
.plan.best .for, .plan.best .sub, .plan.best .price { color: #C3C8DE; }
.plan.best ul { border-top-color: rgba(255, 255, 255, .14); }
.plan.best li { color: var(--d-ink); }
.plan.best li::before { border-color: var(--d-glacier); }
.plan.best .planbtn { background: #FFFFFF; border-color: #FFFFFF; color: var(--indigo); }
.plan.best .planbtn:hover { background: var(--snow); }
.plan .badge { position: absolute; top: -13px; left: 24px; background: var(--d-glacier); color: var(--d-surface); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 4px 12px; }
/* the cards share their rows, so price, the lines under it, the list and the button line up across the cards */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1081px) {
    .plans { grid-template-rows: repeat(6, auto); row-gap: 0; }
    .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
    .plan .planbtn { align-self: end; }
  }
}
.plansfoot { margin-top: 44px; text-align: center; }
.plansfoot .micro { color: var(--slate); opacity: 1; max-width: 62ch; margin-left: auto; margin-right: auto; }
.plansfoot .micro a { color: var(--indigo); }

.faq { margin-top: 32px; border-top: 1px solid var(--mist); }
.qa { border-bottom: 1px solid var(--mist); }
.qa h3 { font-size: inherit; }
.qbtn { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: 0; padding: 14px 0; cursor: pointer; text-align: left;
        font: 500 19px/1.35 var(--display); color: var(--ink); transition: color .2s var(--ease); }
.qbtn:hover { color: var(--indigo); }
.qbtn i { width: 16px; height: 16px; position: relative; flex: none; transition: transform .24s var(--ease); }
.qbtn i::before, .qbtn i::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--slate); border-radius: 2px; }
.qbtn i::after { transform: rotate(90deg); }
.qbtn[aria-expanded="true"] i { transform: rotate(45deg); }
.ans p { margin: 0 0 22px; color: var(--slate); font-size: 17px; max-width: 62ch; }
.js .ans:not([hidden]) p { animation: ansin .3s var(--out) 1; }
@keyframes ansin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.faqmore { margin: 28px 0 0; font-size: 15px; color: var(--slate); }
.faqmore a { color: var(--indigo); font-weight: 600; }

.foot26 { padding: 56px 0 40px; }
.footrow { display: flex; align-items: center; gap: 14px; }
.footrow .tag { color: var(--d-muted); font-size: 14px; }
.footline { color: var(--d-ink); font-size: 16px; margin: 22px 0 0; max-width: 46ch; }
.footlinks { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 18px; }
.footlinks a { color: var(--d-muted); font-size: 14px; text-decoration: none; padding: 12px 0; }
.footlinks a:hover { color: var(--d-ink); }
.copy { color: var(--d-muted); font-size: 13px; margin: 14px 0 0; }

/* ---- the calm entrance ---- */
/* hidden only when the script is there to bring it in; without it, everything simply shows */
.js .rise { opacity: 0; transform: translateY(10px); transition: opacity .55s var(--out), transform .55s var(--out); }
.js .rise.in { opacity: 1; transform: none; }
.js .rise.d2 { transition-delay: .1s; } .js .rise.d3 { transition-delay: .2s; }

/* =============================================================
   narrower screens
   ============================================================= */
@media (max-width: 1080px) {
  .plans.four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frow { gap: 48px; }
  .fl2 { right: -4px; }
}
@media (max-width: 900px) {
  .herogrid { grid-template-columns: 1fr; gap: 36px; }
  .heroart { max-width: 420px; width: 100%; margin: 0 auto; }
  .frow, .frow.flip { grid-template-columns: 1fr; gap: 36px; padding: 48px 0; }
  .frow.flip .ftext { order: 0; }
  .ftext { max-width: 620px; }
  /* the loop goes down the page */
  .loop { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin: 0 auto; }
  .loop::before { display: none; }
  .loop li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px; background: rgba(42, 124, 125, .4); }
  .loop li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; text-align: left; padding: 0 0 22px; }
  .loop li .ln { grid-row: 1 / span 3; margin: 0; }
  .loop li > b { padding-top: 2px; }
  .loop li > em { justify-self: start; margin-top: 4px; }
  .demo { grid-template-columns: 1fr; gap: 24px; }
  .story { position: static; order: 1; background: var(--d-raised); border: 1px solid var(--d-line); border-radius: 16px; padding: 18px 16px; }
  .device { order: 2; }
  .chapters { display: none; }
  .storybox { margin-top: 0; border-top: 0; padding-top: 0; text-align: center; }
  .storystep { display: block; }
  .storycap { min-height: 0; }
  .storybox > .pill { margin: 0 auto 14px; }
  .storynav { justify-content: center; gap: 24px; }
  .sdots { justify-content: center; }
}
@media (max-width: 760px) {
  body.l26 { font-size: 16px; }
  .band { padding: 64px 0; }
  .menu { display: block; }
  .nav { position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; gap: 0; background: var(--d-surface); border-bottom: 1px solid var(--d-line);
         padding: 8px 20px 16px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s; }
  .nav.open { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 14px 4px; border-radius: 0; font-size: 17px; }
  .nav a.on { background: none; }
  .menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .bar .pill.sm { padding: 0 14px; font-size: 14px; }
  .hero { padding-top: 36px; padding-bottom: 48px; }
  .hero::before { width: 130vw; right: -50%; top: 12%; }
  .h1k { font-size: 13px; margin-bottom: 16px; }
  .hero h1 { font-size: clamp(38px, 11vw, 46px); }
  .lede { font-size: 17.5px; margin-top: 14px; }
  .ctas { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 26px; }
  .ctas .pill.big { width: 100%; }
  .offer { text-align: center; }
  .facts { gap: 8px; margin-top: 26px; }
  .facts li { padding: 10px; }
  .facts b { font-size: 19px; }
  .facts span { font-size: 12px; }
  .heroart { padding: 52px 0 22px; }
  .phone { width: 100%; max-width: 290px; }
  .float { font-size: 11.5px; padding: 8px 10px 8px 8px; gap: 8px; }
  .float b { font-size: 12px; }
  .float svg { width: 26px; height: 26px; padding: 6px; }
  .fl1 { left: 0; top: 0; } .fl2 { right: 0; top: 58%; } .fl3 { left: 0; bottom: 0; }
  .body, .beat { font-size: 17px; }
  .pull { padding: 22px 20px 22px 24px; }
  .empath { padding-bottom: 72px; }
  .bridge { font-size: 15px; padding: 12px 18px; }
  .sechead { margin-bottom: 32px; }
  .frow, .frow.flip { padding: 40px 0; gap: 28px; }
  .ftext > p { font-size: 16.5px; }
  .fart.duo { flex-direction: column; align-items: center; gap: 14px; }
  .fart.duo .mk { max-width: 340px; }
  .fart.duo .mk.tt { margin-top: 0; }
  .fgrid, .days { grid-template-columns: 1fr; gap: 12px; }
  .day { grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 18px; }
  .day > .dic { grid-row: 1 / span 2; width: 42px; height: 42px; margin: 0; }
  .fcard { padding: 20px; }
  .result { border-radius: 16px; text-align: left; align-items: flex-start; padding: 16px 18px; }
  .demohead { margin-bottom: 24px; }
  .app { height: 600px; border-radius: 24px; }
  .plans.four { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .qbtn { font-size: 17px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 36px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li:last-child { grid-column: 1 / -1; }
  .float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .rise { opacity: 1; transform: none; }
  .js .rise:not(.in) .mk-ring { --fill: var(--p); }
  .js .rise:not(.in) .mtk path { stroke-dashoffset: 0; }
  .js .rise:not(.in) .qbar i { width: 44% !important; }
}

/* =============================================================
   29 Oct 2026: the public pages (views/public.php): the syllabus hub, a paper, a subject's sample PYQs. Same kit as the landing.
   ============================================================= */
.pub .pubnav { position: static; transform: none; opacity: 1; visibility: visible; flex-direction: row; background: none; border: 0; padding: 0; }
.crumbs { padding-top: 14px; padding-bottom: 14px; font-size: 14px; color: var(--slate); }
.crumbs a { color: var(--indigo); text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.pubhead { padding-top: clamp(28px, 5vw, 56px); }
.pubhead h1 { font-size: clamp(32px, 5vw, 48px); }
.pubgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.pubcard { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--mist); border-radius: 12px; background: var(--raised); text-decoration: none; color: var(--ink); transition: border-color .2s var(--ease); }
.pubcard:hover { border-color: var(--indigo); }
.pc-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--glacier); }
.pubcard b { font-family: var(--display); font-weight: 500; font-size: 20px; }
.pc-m { font-size: 14px; color: var(--slate); }
.pubh2 { font-size: clamp(22px, 3vw, 28px); margin: 36px 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.pubmore { font: 600 15px/1.4 var(--text); color: var(--indigo); text-decoration: none; }
.topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mist); }
.topics li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--mist); }
.topics li b { font-weight: 600; } .topics li span { font-size: 14px; color: var(--slate); }
.pq { padding: 20px 0; border-bottom: 1px solid var(--mist); }
.pq-src { margin: 0 0 6px; font-size: 13px; color: var(--glacier); }
.pq-q { margin: 0 0 10px; font-size: 17px; color: var(--ink); }
.pq-opts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.pq-opts li { padding: 8px 12px; border: 1px solid var(--mist); border-radius: 8px; font-size: 15px; }
.pq details summary { cursor: pointer; font-weight: 600; color: var(--indigo); padding: 6px 0; }
.pq details[open] .pq-opts li.right, .pq details[open] ~ .pq-opts li.right { border-color: var(--glacier); }
.pq-ans { margin: 6px 0; font-weight: 600; }
.pq-sol { font-size: 15.5px; color: var(--slate); } .pq-sol p { margin: 0 0 10px; }
.pq-lab { margin: 6px 0 0; font-size: 13px; color: var(--slate); }
.pubcta { text-align: center; }
@media (max-width: 760px) { .pub .pubnav a:not(.keep) { display: none; } }   /* 30 Oct 2026: on a phone the bar keeps Sign in; the crumbs lead back to the syllabus */
.pub .band.white { padding-block: 28px 56px; }
.pub .band.white > .wrap > .pubh2:first-child { margin-top: 8px; }
.pub .pubhead { padding-bottom: 36px; }
.pub .upscwords li span { font-size: 16px; color: var(--ink); }
/* 30 Oct 2026: the Anthropology optional page shows UPSC's words under each topic */
.pub .topics li span.uw { font-size: 15px; color: var(--ink); line-height: 1.5; }

/* =============================================================
   30 Oct 2026, design refinement (landing, plans, public pages). Understand first, then decide: the loop comes before the
   features, the features follow the loop's five steps, and the repeated sections were folded in. Lines over boxes; the
   page's type carries the order. These rules come last on purpose and override the older ones above.
   ============================================================= */
/* the hero: the facts as one ruled row, not three boxes */
.hero { padding-bottom: clamp(56px, 7vw, 96px); }
.h1k::before { display: none; }
.h1k { padding: 6px 14px; }
.facts { gap: 0; margin-top: 40px; border-top: 1px solid var(--d-line); }
.facts li { padding: 18px 18px 0 0; border: 0; border-radius: 0; background: none; }
.facts li + li { padding-left: 18px; border-left: 1px solid var(--d-line); }
.facts b { font-size: 24px; }

/* the January story: a quieter end that leads into the loop */
.empath { padding-bottom: clamp(72px, 8vw, 96px); }

/* how it works: one loop of five steps */
#how { border-top: 0; }
#how .sechead { margin-bottom: 52px; }
#how .body .mono { font-weight: 600; }
.loop { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; max-width: 1060px; margin: 0 auto; }
.loop::before { left: 10%; right: 10%; background: rgba(42, 124, 125, .4); }
.loop li { gap: 4px; }
.loop li > .lt { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; margin: -4px 0 -6px; border-radius: 999px; font: 500 20px/1.2 var(--display);
                 color: var(--ink); text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease); }
.loop li > .lt::after { content: ""; width: 7px; height: 7px; margin-left: 9px; border-right: 2px solid var(--glacier); border-bottom: 2px solid var(--glacier); transform: rotate(45deg) translateY(-3px); }
.loop li > .lt:hover { color: var(--indigo); background: var(--indigo-tint); }
.loop li > span { font-size: 14.5px; }
.loop li > em { margin-top: 8px; color: var(--glacier); border-color: rgba(42, 124, 125, .3); background: var(--glacier-tint); }
.result { margin-top: 48px; background: var(--snow); border-color: var(--mist); }
.loopic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--glacier); color: var(--raised); }
#how .foot { margin-top: 22px; }

/* the features: in the loop's order, each with its step number */
.feats { border-top: 1px solid var(--mist); }
.feats .sechead { margin-bottom: 8px; }
.feats .frow { padding: 56px 0; }
.feats .frow + .frow { border-top-color: var(--mist); }
.fkn { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--glacier); color: var(--raised); font-size: 12px; letter-spacing: 0; flex: none; }
.fart::before { background: radial-gradient(ellipse at 50% 45%, rgba(228, 232, 240, .9) 0%, rgba(247, 248, 250, 0) 68%); }
.mknote { margin: 4px 0 0; }
/* the Study Hall: seats with lamps, the empty ones dark */
.seat { padding: 10px 4px 9px; gap: 1px; }
.lamp { position: relative; display: block; width: 26px; height: 22px; margin-bottom: 2px; }
.lamp::before { content: ""; position: absolute; left: 3px; top: 2px; width: 20px; height: 10px; border-radius: 12px 12px 3px 3px; background: var(--d-amber); }
.lamp::after { content: ""; position: absolute; left: 1px; top: 12px; width: 24px; height: 9px; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 169, 62, .45), rgba(242, 169, 62, 0)); }
.seat.empty { background: transparent; border-style: dashed; color: #8C93B5; }
.seat.empty b { color: #A6ACC6; font-weight: 500; }
.seat.empty .lamp::before { background: #3A4070; }
.seat.empty .lamp::after { display: none; }
.seat.you .lamp::before { background: #F6C46E; }
.seat b { margin-top: 2px; }
/* revision: the card, the choice, the gaps */
.rv-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.rv-seg span { text-align: center; font-size: 12px; font-weight: 600; padding: 7px 4px; border: 1px solid var(--mist); border-radius: 10px; color: var(--slate); }
.rv-seg span.on { border-color: var(--glacier); color: var(--glacier); background: rgba(42, 124, 125, .07); }
.rv-l { margin: 14px 2px 6px; font-size: 11.5px; font-weight: 600; color: var(--slate); }
.mk.rev .mk-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mist-2); border-bottom: 0; }
/* the three smaller things */
.fgrid { margin-top: 56px; }
.fcard { background: var(--raised); }
.fcard.wide { grid-column: span 2; }
.fcard.wide .anum { max-width: 360px; }

/* on real days: four short lines, not four boxes */
#days { padding: clamp(64px, 8vw, 96px) 0; }
#days .sechead { margin-bottom: 36px; }
.days { gap: 28px; }
.day { padding: 22px 0 0; background: none; border: 0; border-top: 2px solid var(--line-2); border-radius: 0; }
.dic { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 4px; }
.day h3 { font-size: 18px; }

/* who made it: the credibility facts sit with it */
#who { text-align: left; }
.whohead { text-align: center; margin: 0 auto; max-width: 760px; }
.whohead .body { margin-left: auto; margin-right: auto; }
.whofacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 52px; }
.wf { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 22px; }
.wfic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(91, 181, 178, .14); color: var(--d-glacier); margin-bottom: 14px; }
.wf h3 { color: #FFFFFF; font-size: 18.5px; }
.wf p { margin: 6px 0 0; color: #C9CEE4; font-size: 15.5px; line-height: 1.55; }

/* the plans: what each includes; no buttons in the cards while the launch month runs (one ask below them) */
.plan .price { flex-direction: column; align-items: flex-start; gap: 6px; }
.plan li.plus { padding-left: 0; color: var(--slate); font-weight: 600; }
.plan li.plus::before { display: none; }
.plans.nobtn .plan ul { margin-bottom: 0; }
.plan.best .badge { color: #0F1229; }
.plansfoot .micro + .micro { margin-top: 8px; }
.plansfoot .micro a { font-weight: 600; text-underline-offset: 3px; }

/* the phone menu */
.menu:focus-visible { outline-offset: 0; border-radius: 10px; }

@media (max-width: 1080px) {
  .loop { gap: 14px; }
  .whofacts { gap: 24px; }
}
@media (max-width: 900px) {
  .loop { grid-template-columns: 1fr; max-width: 560px; }
  .loop li { padding-bottom: 26px; }
  .loop li > .lt { justify-self: start; margin: 0 0 0 -10px; min-height: 40px; }
  .loop li .ln { grid-row: 1 / span 3; }
  .whofacts { grid-template-columns: 1fr; gap: 0; max-width: 620px; margin-left: auto; margin-right: auto; }
  .wf { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; }
  .wfic { grid-row: 1 / span 2; margin: 0; }
}
@media (max-width: 760px) {
  .nav.open { box-shadow: 0 28px 40px -12px rgba(0, 0, 0, .55); transition: opacity .24s var(--ease), transform .24s var(--ease), visibility 0s; }
  .nav a { min-height: 48px; display: flex; align-items: center; }
  .facts { margin-top: 30px; }
  .facts li { padding: 14px 10px 0 0; }
  .facts li + li { padding-left: 10px; }
  .facts b { font-size: 20px; }
  .facts span { font-size: 12.5px; }
  .heroart { padding-top: 56px; }
  #how .sechead { margin-bottom: 36px; }
  .result { margin-top: 20px; }
  .feats .frow, .feats .frow.flip { padding: 40px 0; }
  .fcard.wide { grid-column: auto; }
  .fgrid { margin-top: 40px; }
  .days { gap: 0; }
  .day { padding: 18px 0; border-top-width: 1px; }
  .whofacts { margin-top: 32px; }
}
/* on a phone the three facts read as three ruled lines: the number, then what it counts */
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; border-top: 0; margin-top: 28px; }
  .facts li, .facts li + li { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-left: 0; border-top: 1px solid var(--d-line); }
  .facts li:last-child { border-bottom: 1px solid var(--d-line); }
  .facts span { font-size: 13.5px; }
}

/* 30 Oct 2026, design refinement: the public pages */
.pub .nav a[aria-current] { color: var(--d-ink); }
.pub .band.mist { padding: clamp(40px, 6vw, 64px) 0; }
.pub .band.mist > .wrap > .pubh2:first-child { margin-top: 0; }
.pub .pubhead .foot { max-width: 62ch; }
.pubcard { min-height: 44px; }
.pubcard:focus-visible { outline-offset: 2px; }
.pubcard b { line-height: 1.25; }
.pq-opts li.right { transition: border-color .2s var(--ease), background .2s var(--ease); }
.pq:has(details[open]) .pq-opts li.right { border-color: var(--glacier); background: var(--glacier-tint); font-weight: 600; }
.pq details summary { min-height: 44px; display: flex; align-items: center; }
.pq-ans { color: var(--ink); }
.pubcta .lede { margin-left: auto; margin-right: auto; }
.app-title { white-space: nowrap; }   /* "Study Hall" stays on one line in the demo phone */
/* 30 Oct 2026: the plan button never touches the last line above it; on wide screens it still sits at the foot of the card */
.plan ul{margin-bottom:16px}

/* 30 Oct 2026 (Vikram's final pricing): Free as one calm card above the four Pro durations; the year raised; savings in chips */
.freeplan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px 40px; margin-top: 44px; padding: 28px 30px; border: 1px solid var(--mist); border-radius: 18px; background: var(--raised); }
.freeplan h3 { font-size: 22px; font-weight: 600; }
.freeplan .price { margin-top: 12px; }
.freeplan .for { margin: 10px 0 0; font-size: 15px; color: var(--slate); max-width: 34ch; }
.freeplan ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; align-content: center; }
.freeplan li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); line-height: 1.45; }
.freeplan li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--glacier); border-bottom: 2px solid var(--glacier); transform: rotate(-45deg); }
.ladder26 { margin-top: 36px; }
.ladder26 .price .per { font-size: 16px; font-weight: 600; }
.ladder26 .sub b { color: var(--ink); font-weight: 700; }
.ladder26 .plan.best .sub b { color: #FFFFFF; }
.ladder26 .save { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: #F2A93E; color: #161A35; }   /* 31 Oct 2026: every saving in the same orange */
.ladder26 .save.distinct { background: #F2A93E; color: #161A35; }
.ladder26 .plan.best .save { background: #F2A93E; color: #161A35; }
.ladder26 .plan.best { box-shadow: 0 0 0 1px var(--d-glacier), 0 30px 60px -30px rgba(38, 45, 99, .75), 0 0 44px -12px rgba(91, 181, 178, .45); }
.ladder26 .plan .badge.alt { background: #F2A93E; color: #161A35; }
/* the best value, highlighted in the same orange (Vikram, 31 Oct 2026) */
.ladder26 .plan.pass { border-color: #F2A93E; box-shadow: 0 0 0 1px #F2A93E, 0 30px 60px -32px rgba(242, 169, 62, .5), 0 0 44px -14px rgba(242, 169, 62, .4); }
.ladder26 .plan ul:empty { border-top: 1px solid var(--mist); padding-top: 0; margin-bottom: 26px; }
@media (max-width: 760px) { .freeplan { grid-template-columns: 1fr; padding: 22px 20px; } .freeplan ul { grid-template-columns: 1fr; } }
.ladder26 .price { flex-wrap: nowrap; gap: 0 2px; }
.ladder26 .sub .perday { display: inline-block; padding: 3px 10px; border-radius: 10px; background: rgba(242, 169, 62, .18); color: var(--ink); font: 700 20px/1.3 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ladder26 .plan.best .sub .perday { background: rgba(242, 169, 62, .3); color: #FFFFFF; }
.ladder26 .sub .perday small { font: 600 14px var(--text); letter-spacing: 0; }

/* =============================================================
   31 Oct 2026, the landing refresh (Vikram: "make landing page design better & beautiful & attractive so that students want to
   buy it and add new updated final features"; "add revision notes and spaced revision system in landing pages"). The hero says
   the value in a line of chips; Today shows Now and Up next; the timetable shows the week; the Study Hall is drawn as it is now
   (a table of eight, your seat first, tables that slide, Hall view); revision is the notes and the schedule side by side; the
   smaller things became six tiles; the plans lead with the price a day; a last ask closes the page. Light and dark: the page
   follows the student's chosen look, otherwise the device's (views/landing.php sets data-pmode / data-look). No red anywhere.
   ============================================================= */
/* the hero's value chips */
.hchips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; max-width: 36em; }
.hchips li { display: inline-block; padding: 6px 12px; border: 1px solid var(--d-line); border-radius: 999px; background: rgba(24, 28, 58, .7); font-size: 13px; line-height: 1.3; color: var(--d-muted); }
.hchips li b { color: var(--d-ink); font-weight: 600; }
.hchips li.pr { border-color: rgba(242, 169, 62, .55); background: rgba(242, 169, 62, .1); }
.hchips li.pr b { color: #F6C46E; }
/* 31 Oct 2026 (Vikram: the PYQ years "highlighted wherever possible"): the years chip leads the row, in Glacier */
.hchips li.yr { border-color: rgba(91, 181, 178, .6); background: rgba(91, 181, 178, .14); color: #CFEDEC; }
.hchips li.yr b { color: #8FDCD8; }
/* Today: Now and Up next */
.mk-nu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.mk-nu > span { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--mist-2); border-radius: 12px; min-width: 0; }
.mk-nu > span:first-child { border-color: var(--indigo); box-shadow: inset 3px 0 0 var(--amber); }
.mk-nu em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; color: var(--glacier); }
.mk-nu > span:first-child em { color: var(--amber-ink); }
.mk-nu b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-nu .mono { font-size: 10.5px; color: var(--slate); }
/* the timetable's week */
.tt-week { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mist-2); }
.tt-wl { display: grid; } .tt-wl b { font-size: 12.5px; font-weight: 600; } .tt-wl .mono { font-size: 10.5px; color: var(--slate); }
.tt-bar { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: 3px; background: var(--mist-2); overflow: hidden; }
.tt-bar i { display: block; height: 100%; border-radius: 3px; background: var(--glacier); transition: width 1s var(--out); }
.js .rise:not(.in) .tt-bar i { width: 0 !important; }
.tt-light { font-size: 11px; font-weight: 600; color: var(--indigo); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
/* the Study Hall as it is now: a table of eight, your seat first; Hall view beside it */
.fart.hallart { display: grid; justify-items: center; }
.fart.hallart .mk.hall { max-width: 372px; }
.mk.hall .seats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.mk.hall .seat { font-size: 10px; padding: 9px 3px 8px; }
.mk.hall .seat b { font-size: 11.5px; }
.hall-n { display: flex; align-items: baseline; gap: 4px; }
.hall-tb { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--d-muted); }
.hall-tb i { width: 6px; height: 6px; border-radius: 50%; background: var(--d-line); }
.hall-tb i.on { background: var(--d-ink); }
.hall-tog { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--d-line); font-size: 12px; color: var(--d-muted); }
.hall-tog b { color: var(--d-ink); font-size: 14px; font-weight: 500; margin-right: 4px; }
.hall-vb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--d-line); border-radius: 999px; color: var(--d-ink); font-weight: 600; }
.hall-vb svg { color: var(--d-glacier); }
.mk.hv { max-width: 400px; margin: -34px 0 0 22%; padding: 14px; color: #ECEEF6; border-color: #2A2F55; z-index: 2;
  background: radial-gradient(120% 80% at 50% 0%, #232853 0%, #14172F 60%, #0F1229 100%); box-shadow: 0 30px 60px -30px rgba(15, 18, 41, .85); }
/* 31 Oct 2026: the Hall view as the app draws it: a library at night, every desk lamp lit */
.hv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hv-top > span:first-child { display: grid; gap: 2px; min-width: 0; }
.hv-top b { font: 700 15px/1.2 var(--display); color: #FFFFFF; }
.hv-top small { font-size: 10.5px; color: #B9BEDA; }
.hv-x { flex: none; font: 600 10.5px/1 var(--text); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); border-radius: 999px; padding: 6px 10px; }
.hv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hv-t { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 9px 4px 11px; border-radius: 10px;
  background: linear-gradient(180deg, #252A55 0%, #1D2147 100%); border: 1px solid rgba(255, 255, 255, .07); overflow: hidden; text-align: center; isolation: isolate; }
.hv-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(180deg, #5A4636, #3E3027); opacity: .9; }
.hv-t.on::before, .hv-t.me::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 30%, rgba(242, 169, 62, .26), transparent 70%); }
.hv-t.me { border-color: rgba(242, 180, 94, .65); background: linear-gradient(180deg, #2A2F5C 0%, #20244B 100%); }
.hv-av { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 4px; border-radius: 50%; background: #3A4390; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }
.hv-av > i { font: 600 10px/1 var(--text); font-style: normal; color: #ECEEF6; }
.hv-av svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.hv-t.on .hv-av, .hv-t.me .hv-av { box-shadow: 0 0 0 2px rgba(242, 169, 62, .8), 0 0 14px 1px rgba(242, 169, 62, .3); }
.hv-t.brk .hv-av { filter: saturate(.4); opacity: .85; }
.hv-t b { font: 700 10.5px/1.25 var(--text); color: #FFFFFF; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-t.me b { color: #F2B45E; }
.hv-t em { font: 600 9px/1.3 var(--text); font-style: normal; color: #A9B0F0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-t small { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; color: #B9BEDA; white-space: nowrap; }
.hv-dot { width: 5px; height: 5px; border-radius: 50%; background: #5BB5B2; flex: none; }
.hv-t.brk .hv-dot { background: #F2A93E; }
.hv-desk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.hv-me { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hv-me .hv-av { width: 28px; height: 28px; margin: 0; box-shadow: 0 0 0 2px #F2B45E; }
.hv-me > span:last-child { display: grid; min-width: 0; }
.hv-me b { font: 700 11.5px/1.2 var(--text); color: #FFFFFF; }
.hv-me small { font-size: 9.5px; color: #B9BEDA; }
.hv-clock { font: 700 28px/1 var(--display); letter-spacing: -.02em; color: #7FD3CF; font-variant-numeric: tabular-nums; }
.hv-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.hv-bar i { display: block; width: 62%; height: 100%; background: #5BB5B2; }
.hv-btns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hv-btns span { display: grid; place-items: center; min-height: 28px; border-radius: 8px; font: 600 11px/1 var(--text); }
.hv-btns .g { border: 1px solid rgba(255, 255, 255, .3); color: #FFFFFF; }
.hv-btns .p { background: #F2A93E; color: #161A35; }
/* revision: the notes beside the schedule */
.mk.notes .nt-t { display: block; font: 500 18px/1.25 var(--display); }
.nt-y { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0 0; font-size: 11px; color: var(--slate); }
.nt-y span { margin-right: 2px; }
.nt-y em { font-style: normal; font-size: 10.5px; color: var(--indigo); background: var(--indigo-tint); border-radius: 999px; padding: 2px 8px; }
.nt-l { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.nt-l li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.nt-l li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--glacier); }
.nt-b { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.nt-b span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 6px; border: 1px solid var(--mist); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--slate); white-space: nowrap; }
.nt-b span.on { background: var(--indigo); border-color: var(--indigo); color: #FFFFFF; }
.mk.rev .rvl { margin-bottom: 2px; }
/* the six tiles */
.fgridh { text-align: center; margin: 64px auto 22px; max-width: 640px; }
.fgridh h3 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -.015em; }
.fgridh p { margin: 6px 0 0; color: var(--slate); font-size: 16px; }
.fgridh + .fgrid { margin-top: 0; }
.langrow.plat span { font-size: 12.5px; padding: 5px 10px; }
.langrow.plat span:first-child { border-color: var(--mist); color: inherit; font-weight: 400; }
/* the plans: the price a day leads */
#h2plans .hl { white-space: nowrap; background: linear-gradient(transparent 62%, rgba(242, 169, 62, .38) 62%); padding: 0 2px; }
.ladder26 .price { gap: 4px; }
.ladder26 .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.ladder26 .meta .sub { margin: 0; min-height: 0; }
.ladder26 .save { margin-top: 0; }
.pftrust { display: flex; align-items: flex-start; gap: 12px; margin: 0 auto; max-width: 640px; padding: 16px 20px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--raised); text-align: left; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.pfic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--glacier-tint); color: var(--glacier); }
.plansfoot .pftrust + .micro { margin-top: 16px; }
/* the last ask */
.endcta { position: relative; overflow: hidden; border-bottom: 1px solid var(--d-line); }
.endcta::before { content: ""; position: absolute; left: 50%; top: -40%; width: 900px; max-width: 140vw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
                  background: radial-gradient(closest-side, rgba(58, 67, 144, .55), rgba(58, 67, 144, 0)); pointer-events: none; }
.endcta .wrap { position: relative; }
.endsun { display: block; width: 18px; height: 18px; margin: 0 auto 22px; border-radius: 50%; background: var(--d-amber); box-shadow: 0 0 0 8px rgba(242, 169, 62, .14), 0 0 40px 10px rgba(242, 169, 62, .25); }
.endcta h2 { color: #FFFFFF; }
.endcta .lede { margin-left: auto; margin-right: auto; color: #C3C8DE; }
.endcta .ctas.center { margin-top: 32px; }
.endcta .micro { color: var(--d-muted); opacity: 1; }
.endcta .pill.ghost { border-color: rgba(236, 238, 246, .4); }
.endcta .pill.ghost:hover { border-color: var(--d-ink); }

@media (max-width: 1080px) {
  .mk.hv { margin-left: 18%; }
}
@media (max-width: 900px) {
  .mk.hv { margin: -26px 0 0 12%; }
}
@media (max-width: 760px) {
  .hchips { gap: 6px; margin-top: 16px; justify-content: center; }
  .hchips li { font-size: 12.5px; padding: 5px 10px; }
  .fart.hallart .mk.hall { max-width: 360px; }
  .mk.hv { margin: 14px 0 0; max-width: 360px; }
  .fart.duo .mk.notes, .fart.duo .mk.rev { max-width: 360px; }
  .fgridh { margin-top: 48px; }
  .ladder26 .plan { padding: 26px 20px 20px; }
  .ladder26 .price { margin-top: 14px; flex-direction: row; align-items: baseline; gap: 0 2px; }
  .ladder26 .plan ul:empty { display: none; }
  .ladder26 .price .amt { font-size: 38px; }
  .ladder26 .plan ul { margin: 16px 0 12px; padding-top: 16px; }
  .plans.four { gap: 26px; }
  .pftrust { font-size: 15px; padding: 14px 16px; }
  .endcta h2 { font-size: clamp(28px, 8vw, 34px); }
}
@media (max-width: 380px) {
  .mk.hall .seat { padding: 8px 2px 7px; }
  .mk.hall .seat b { font-size: 10.5px; }
}

/* ---- the dark look (the hero, the demo, "who made it" and the footer are dark already; this turns the reading bands) ---- */
html[data-pmode="dark"] body.land, html[data-look="dark"] body.land {
  --snow: #0F1229; --raised: #181C3A; --mist: #2A2F55; --mist-2: #151937; --line-2: #343A66; --ink: #ECEEF6; --slate: #A9AFC9;
  --indigo: #A3ABEE; --indigo-tint: rgba(142, 151, 227, .14); --glacier: #5BB5B2; --glacier-tint: rgba(91, 181, 178, .14); --amber-ink: #F2A93E;
}
html[data-pmode="dark"] .land .band.snow, html[data-look="dark"] .land .band.snow { background: #11142F; }
html[data-pmode="dark"] .land .band.white, html[data-look="dark"] .land .band.white { background: #141836; border-top-color: #22274A; }
html[data-pmode="dark"] .land .band.mist, html[data-look="dark"] .land .band.mist { background: #121531; border-top-color: #22274A; }
html[data-pmode="dark"] .land .band.ink, html[data-look="dark"] .land .band.ink { background: #1D2252; }
html[data-pmode="dark"] .land .mk, html[data-look="dark"] .land .mk { box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9); }
html[data-pmode="dark"] .land .fart::before, html[data-look="dark"] .land .fart::before { background: radial-gradient(ellipse at 50% 45%, rgba(142, 151, 227, .1) 0%, rgba(142, 151, 227, 0) 68%); }
html[data-pmode="dark"] .land .mk-btn, html[data-look="dark"] .land .mk-btn,
html[data-pmode="dark"] .land .mk-tabs span.on, html[data-look="dark"] .land .mk-tabs span.on,
html[data-pmode="dark"] .land .nt-b span.on, html[data-look="dark"] .land .nt-b span.on { color: #0F1229; }
html[data-pmode="dark"] .land .tt-list li.now, html[data-look="dark"] .land .tt-list li.now { border-color: #6E77C4; }
html[data-pmode="dark"] .land .beat .dot, html[data-look="dark"] .land .beat .dot { background: var(--snow); border-color: #5A6190; }
html[data-pmode="dark"] .land .beat.in .dot, html[data-look="dark"] .land .beat.in .dot { background: #5A6190; }
html[data-pmode="dark"] .land .plan.best, html[data-look="dark"] .land .plan.best { background: #262D63; border-color: #5BB5B2; }
html[data-pmode="dark"] .land .plan.best .planbtn, html[data-look="dark"] .land .plan.best .planbtn { color: #262D63; }
html[data-pmode="dark"] .land .seat.empty, html[data-look="dark"] .land .seat.empty { color: #8C93B5; }
html[data-pmode="dark"] .land .ladder26 .sub .perday, html[data-look="dark"] .land .ladder26 .sub .perday { background: rgba(242, 169, 62, .14); color: #F6C46E; }
html[data-pmode="dark"] .land #h2plans .hl, html[data-look="dark"] .land #h2plans .hl { background: linear-gradient(transparent 64%, rgba(242, 169, 62, .3) 64%); }

/* 31 Oct 2026: the demo's Study Hall (a table of eight, tables that slide, Hall view) and Quick revision */
.d-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.d-tile { padding: 8px 3px; font-size: 10.5px; }
.d-tile b { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.d-tile > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.d-tile .lamp { transform: scale(.85); margin-bottom: 0; }
.d-tile.empty { border-style: dashed; color: #8C93B5; }
.d-tile.empty b { color: #A6ACC6; font-weight: 500; }
.d-tile.empty .lamp::before { background: #3A4070; }
.d-tile.empty .lamp::after { display: none; }
.d-tile.you .lamp::before { background: #F6C46E; }
.d-tbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--d-muted); }
.d-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--d-line); background: none; color: var(--d-ink); font: 600 18px/1 var(--text); cursor: pointer; }
.d-arrow:disabled { opacity: .35; cursor: default; }
.d-row3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.d-row3 .d-btn { margin-top: 0; }
.d-btn:disabled { opacity: .4; cursor: default; }
.d-hv { display: grid; gap: 8px; }
.d-hvside { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(91, 181, 178, .45); border-radius: 12px; background: rgba(91, 181, 178, .08); }
.d-hvside b { font-size: 22px; font-weight: 500; }
.d-hvgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.d-hvt { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 10px 4px; border-radius: 10px; background: linear-gradient(160deg, #20255A, #141838); min-width: 0; text-align: center; }
.d-hvt i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #3A4390; color: #ECEEF6; font: 600 11px/1 var(--text); font-style: normal; margin-bottom: 2px; }
.d-hvt:nth-child(3n+1) i { background: #2A7C7D; }
.d-hvt b { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.d-hvt span { font-size: 10.5px; color: var(--d-muted); }
.d-yrs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--d-muted); }
.d-yrs em { font-style: normal; font-size: 11.5px; color: var(--d-ink); border: 1px solid var(--d-line); border-radius: 999px; padding: 2px 9px; }
.d-notes { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; border: 1px solid var(--d-line); border-radius: 12px; }
.d-notes li { position: relative; padding-left: 14px; font-size: 13.5px; line-height: 1.5; }
.d-notes li::before { content: ""; position: absolute; left: 1px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--d-glacier); }
.d-inrev { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.d-rvl { display: flex; gap: 5px; margin: 4px 0 2px; }
.d-rvl i { flex: 1; text-align: center; font: 500 11.5px/1 var(--mono); font-style: normal; padding: 8px 0; border-radius: 8px; border: 1px solid var(--d-line); color: var(--d-muted); }
.d-rvl i.on { border-color: var(--d-glacier); color: var(--d-glacier); background: rgba(91, 181, 178, .1); }

/* 31 Oct 2026: the years the PYQs span, drawn under Practise: two numbers and a timeline (Prelims from the first year, Mains from its own) */
.yband { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; max-width: 30em; }
.yb { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--raised); }
.yb b { font-size: 30px; line-height: 1; font-weight: 600; color: var(--glacier); }
.yb span { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; color: var(--ink); font-weight: 600; }
.yb small { font-size: 12.5px; font-weight: 500; color: var(--slate); margin-top: 2px; }
.ytl { grid-column: 1 / -1; position: relative; display: grid; gap: 6px; padding: 12px 14px 8px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--raised); }
.ytr { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 10px; }
.ytr em { font: 600 12px/1 var(--text); font-style: normal; letter-spacing: .04em; color: var(--slate); }
.trk { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--mist-2); }
.trk i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--glacier); }
.ytr.m .trk i { background: var(--indigo); }
.yts { position: relative; display: flex; justify-content: space-between; font-size: 12px; color: var(--slate); height: 16px; }
.yts span[style] { position: absolute; transform: translateX(-50%); }
@media (max-width: 420px) { .yband { grid-template-columns: 1fr; } .yb b { font-size: 26px; } }

/* 31 Oct 2026: the demo's Hall view, drawn like the app's */
.d-hv { padding: 12px; border-radius: 14px; background: radial-gradient(120% 80% at 50% 0%, #232853 0%, #14172F 60%, #0F1229 100%); border: 1px solid #2A2F55; }
.d-hvside { border-color: rgba(242, 180, 94, .55); background: rgba(255, 255, 255, .05); }
.d-hvside b { color: #7FD3CF; font-weight: 700; font-family: var(--display); }
.d-hvt { position: relative; isolation: isolate; overflow: hidden; padding: 10px 4px 13px; background: linear-gradient(180deg, #252A55 0%, #1D2147 100%); border: 1px solid rgba(255, 255, 255, .07); }
.d-hvt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 30%, rgba(242, 169, 62, .24), transparent 70%); }
.d-hvt::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(180deg, #5A4636, #3E3027); }
.d-hvt i { position: relative; overflow: hidden; box-shadow: 0 0 0 2px rgba(242, 169, 62, .8), 0 0 14px 1px rgba(242, 169, 62, .3); }
.d-hvt i svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-hvt b { color: #FFFFFF; }
.d-hvt span { color: #A9B0F0; }
.d-hvt small { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #B9BEDA; }
.d-hvt small::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #5BB5B2; }

/* 31 Oct 2026: the public PYQ pages as subject chips */
.flink.subj p { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.flink.subj ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 34em; }
.flink.subj a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--raised); color: var(--indigo); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.flink.subj a:hover { border-color: var(--glacier); color: var(--glacier); }
.flink.subj a:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; }

/* ---------- audit 31 Oct 2026 (public pages): finger-sized targets and a still page under the open menu ----------
   The footer links, the logo link and the demo's language switch were 18 to 28 px tall on a phone; the subject chips 34 px.
   While the phone menu is open the page behind it no longer scrolls (landing26.js adds .menu-open). */
.footlinks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.brand { min-height: 44px; align-items: center; }
.langs button { min-width: 40px; min-height: 36px; }
@media (max-width: 760px) {
  html.menu-open, html.menu-open body { overflow: hidden; }
  .nav.open { max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; }
  .langs button { min-width: 44px; min-height: 40px; }
  .flink.subj a { min-height: 44px; }
  .crumbs { padding-top: 4px; padding-bottom: 4px; }
  .crumbs a, .pubmore { display: inline-flex; align-items: center; min-height: 44px; }
}
/* audit 31 Oct 2026: the demo phone was cut off on the right on phones (its column sized to its widest row, 367 px, inside a 280 to
   350 px frame: the language switch, "Knew it" and the Big Picture tab were clipped at 320 and 390 px). Its rows now shrink to the frame,
   and on a narrow phone the language switch moves under the title. */
.app { grid-template-columns: minmax(0, 1fr); }
.app-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 420px) {
  .app-top { flex-wrap: wrap; row-gap: 10px; padding: 14px 14px 10px; }
  .app-screen { padding: 14px 12px 18px; }
}
/* audit 31 Oct 2026: Glacier text on its own tint and on Mist measured 4.3 to 4.4:1; a deeper Glacier passes 4.5:1 in the light look
   (the dark look keeps its own lighter Glacier) */
html:not([data-pmode="dark"]):not([data-look="dark"]) .loop li > em, html:not([data-pmode="dark"]):not([data-look="dark"]) .band.mist .kick { color: #236A6B; }