@font-face{font-family:"Lora";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/lora-latin-wght-normal.ddb8c66035.woff2") format("woff2-variations");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Lora";font-style:italic;font-weight:100 900;font-display:swap;src:url("/assets/lora-latin-wght-italic.d824d807d4.woff2") format("woff2-variations");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Noto Sans Gurmukhi";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/noto-sans-gurmukhi-gurmukhi-wght-normal.fc4c2bf6b7.woff2") format("woff2-variations");unicode-range:U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839;}
/* ./css/tokens.css */
/* Tokens from simran-app utils/theme.ts (lightColors / darkColors). Every page
   is light. Only the Gurbani reading pages (<html class="scripture">) follow
   prefers-color-scheme into dark; there is no manual toggle. */
:root {
  --bg: #F9F9F7;
  --surface: #EFEFEC;
  --surface-strong: #E7E6E2;
  /* Floating chrome (the header capsule): white over the canvas. */
  --float: #FFFFFF;
  --warm: #FFF9F3;
  --ink: #121212;
  --ink-body: #3A3835;
  --ink-2: #7B7975;
  --ink-3: #999999;
  --ink-faint: #BFBFBF;
  --warm-ink: #562810;
  --accent: #C55934;
  --accent-strong: #B23B2E;
  --accent-soft: rgba(197, 89, 52, 0.12);
  --line: #E0DFDC;
  --outline: #DEDEDE;
  --card: #DEDEDE;
  --inverse: #121212;
  --on-inverse: #FFFFFF;
  --gold: #B8863B;
  --navy: #1D2536;
  --on-navy: #F1EAE2;
  --on-navy-2: #AAB1C0;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gur: "Noto Sans Gurmukhi", "Mukta Mahee", "Raavi", sans-serif;
  --gutter: 20px;
  --col: 680px;
  --wrap: 1120px;
  /* Cream text on scrimmed art (simran-app ART_INK), and the flat black scrim under it. */
  --art-ink: #F1EAE2;
  --scrim: rgba(0, 0, 0, 0.5);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root.scripture {
    --bg: #151515;
    --surface: #20201F;
    --surface-strong: #2A2A29;
    --float: #20201F;
    --warm: #221B13;
    --ink: #F1EAE2;
    --ink-body: #D2CDC7;
    --ink-2: #8C8C8C;
    --ink-3: #7D7D7D;
    --ink-faint: #575757;
    --warm-ink: #DDB98E;
    --accent: #DB7A54;
    --accent-strong: #C55934;
    --accent-soft: rgba(219, 122, 84, 0.16);
    --line: #2A2A29;
    --outline: #2A2A29;
    --card: transparent;
    --inverse: #F1EAE2;
    --on-inverse: #1C1611;
    --gold: #D4A843;
    color-scheme: dark;
  }
}
@media (min-width: 900px) {
  :root { --gutter: 72px; }
}

/* ./css/base.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
p, dl, dd, figure { margin: 0; }
button, input, summary { font: inherit; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
main { display: block; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 9; background: var(--inverse); color: var(--on-inverse); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-2); font-size: 13.5px; }

.eyebrow { font: 600 11px/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow.acc { color: var(--accent); }

/* Reading column and marketing section widths. */
.col { max-width: var(--col); margin: 0 auto; padding: 22px var(--gutter) 32px; }
.sec { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--gutter) 0; }
.sec h2 { font-size: 26px; line-height: 1.15; margin: 8px 0 22px; }
@media (min-width: 900px) {
  .col { padding: 40px 0 48px; }
  .sec { padding-top: 48px; }
  .sec h2 { font-size: 32px; }
}

.icon { border-radius: 22%; flex: none; }
.crumb { font-size: 13px; color: var(--ink-2); margin-bottom: 14px; }
.crumb i { font-style: normal; margin: 0 6px; color: var(--ink-3); }

/* Pills and store buttons. */
.getapp { font: 600 13px/1 var(--sans); background: var(--inverse); color: var(--on-inverse); padding: 9px 14px; border-radius: 999px; white-space: nowrap; }
.ctl { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px/1 var(--sans); color: var(--ink); padding: 8px 12px; border: 1px solid var(--outline); border-radius: 999px; background: var(--float); }
.ctl svg { width: 15px; height: 15px; }
.stores { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.store { display: inline-flex; align-items: center; gap: 8px; background: var(--inverse); color: var(--on-inverse); padding: 7px 14px 7px 11px; border-radius: 10px; font: 600 14px/1.1 var(--sans); }
.store svg { width: 20px; height: 20px; }
.store small { display: block; font: 400 10px/1.2 var(--sans); opacity: 0.8; }
.store[hidden] { display: none; }
.ctarow { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; }
.qr { display: none; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); text-align: left; }
.qr img { width: 72px; height: 72px; padding: 6px; background: #fff; border-radius: 10px; border: 1px solid var(--line); }
.qr span { max-width: 90px; line-height: 1.3; }
@media (min-width: 900px) and (hover: hover) { .qr { display: flex; } .ctarow:has(.qr) { margin-bottom: 24px; } }
/* In a CTA row the QR sits between the two store buttons, caption hung below so the buttons centre on the code. */
.ctarow .stores { display: contents; }
.ctarow [data-store="apple"] { order: 1; }
.ctarow .qr { order: 2; position: relative; }
.ctarow [data-store="play"] { order: 3; }
.ctarow .qr span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; max-width: none; white-space: nowrap; text-align: center; }

/* Phone frames around real app screenshots. */
.dev { background: #0E0D0C; border-radius: 30px; padding: 6px; overflow: hidden; }
.dev img { width: 100%; height: auto; border-radius: 24px; }
.dev-lock img { background: radial-gradient(120% 90% at 70% 10%, #D17E39 0%, #9D4B1F 45%, #3A1D10 100%); }

/* FAQ disclosures. */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq summary { font: 500 16px var(--sans); color: var(--ink); }
.faq-a { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.faq-a p { margin: 0 0 8px; }
.faq-a a { color: var(--accent); }

/* ./css/header.css */
/* A floating capsule: logo, the nav and "Get the app" in one white rounded bar that
   hugs its contents, centered 12px below the top and sticking there on scroll. The
   app allows one shadow, on floating things; this is one. The current section wears
   the app's selected chip (surface-strong pill); a phone gets the menu. */
.site-head { position: sticky; top: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); max-width: 860px; margin: 12px auto 0; padding: 8px 8px 8px 14px; background: var(--float); border: 1px solid var(--card); border-radius: 20px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); }
.logo { color: var(--ink); display: flex; align-items: center; gap: 9px; flex: none; }
/* The custom wordmark, tinted by the ink colour so it follows dark mode. */
.wordmark { display: block; width: 71px; height: 18px; background: currentColor; -webkit-mask: url(/img/wordmark-v1.svg) center / contain no-repeat; mask: url(/img/wordmark-v1.svg) center / contain no-repeat; }
.site-nav { display: none; align-items: center; gap: 2px; margin: 0 auto; font: 500 14.5px var(--sans); }
.site-nav a { color: var(--ink-2); padding: 8px 14px; border-radius: 999px; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--ink); background: var(--surface-strong); }
.head-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menu { position: relative; }
.menu summary { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; }
.menu[open] summary { background: var(--surface-strong); }
.burger { display: grid; gap: 5px; width: 18px; }
.burger span { height: 1.5px; background: var(--ink); border-radius: 2px; }
.menu-panel { position: absolute; right: -8px; top: 50px; min-width: 230px; background: var(--float); border: 1px solid var(--card); border-radius: 20px; padding: 8px; display: grid; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); }
.menu-panel a { padding: 11px 14px; border-radius: 12px; font-size: 15px; color: var(--ink); }
.menu-panel a:hover { background: var(--surface); }
.menu-panel a[aria-current] { background: var(--surface-strong); }
@media (min-width: 900px) {
  .site-head { top: 16px; margin-top: 16px; padding-left: 16px; }
  .site-nav { display: flex; }
  .head-r { margin-left: 0; }
  .menu { display: none; }
}
.site-head .getapp { font-size: 14px; padding: 11px 18px; }
html { scroll-padding-top: 90px; }

/* ./css/footer.css */
.sitefoot { margin-top: 64px; padding: 40px var(--gutter) 32px; border-top: 1px solid var(--line); }
.fcols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; max-width: var(--wrap); margin: 0 auto; }
.fcol { display: grid; gap: 8px; align-content: start; }
.fcol-title { font: 600 12px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.fcol a { font-size: 14px; color: var(--ink-2); }
.fcol a:hover { color: var(--ink); }
.fbase { max-width: var(--wrap); margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 12.5px; color: var(--ink-3); }
.socials { display: flex; gap: 14px; color: var(--ink-2); }
@media (min-width: 900px) {
  .fcols { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .fbase { flex-direction: row; justify-content: space-between; align-items: center; }
}
.sitefoot-landing { padding-top: 20px; padding-bottom: 20px; }
.sitefoot-landing .fbase { margin-top: 0; padding-top: 0; border-top: 0; }

/* ./css/hub.css */
/* The Nitnem grid (home, /nitnem, /banis, "Continue your Nitnem"). */
/* Hairlines come from each card's outline over a 1px gap, so a short row leaves plain background, not a hole. */
.ngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--float); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ncard { background: var(--float); outline: 1px solid var(--line); padding: 14px; display: grid; gap: 4px; min-height: 112px; align-content: start; }
.ncard:hover { background: var(--surface); }
.ncard b { font: 500 18px var(--serif); color: var(--ink); }
.ncard .ng { font: 500 15px var(--gur); color: var(--warm-ink); }
.ncard .ntime { font: 600 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ncard .nmin { font-size: 13px; color: var(--ink-2); margin-top: auto; }
.ncard.app { background: var(--float); }
.ncard.app b { font-size: 16px; }
.ncard.app .icon { margin-bottom: 4px; }
@media (min-width: 900px) {
  .ngrid { grid-template-columns: repeat(4, 1fr); }
  .ncard { padding: 18px; min-height: 132px; }
}

.hub-head { padding-bottom: 0; }
.hub-head h1 { font-size: 30px; line-height: 1.12; margin: 6px 0 10px; }
.hub-head .lead { font-size: 17px; color: var(--ink-2); }
@media (min-width: 900px) {
  .hub-head h1 { font-size: 44px; }
  .hub-head { max-width: var(--wrap); padding-left: var(--gutter); padding-right: var(--gutter); }
}

.lib-feature { display: grid; gap: 16px; padding: 16px; background: var(--float); border: 1px solid var(--card); border-radius: 16px; }
.lib-feature:hover { background: var(--surface); }
.lib-feature img { width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: cover; border-radius: 12px; background: var(--surface); }
.lf-text { display: grid; gap: 4px; align-content: center; }
.lib-feature b { font: 500 22px/1.25 var(--serif); color: var(--ink); text-wrap: balance; }
.lib-feature .ng { font: 500 17px/1.5 var(--gur); color: var(--warm-ink); }
.lf-note { font-size: 14px; color: var(--ink-2); }

/* The app's carousels: a snap row bleeding to the screen edges on a phone, a wrapped grid on desktop. */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: min(43vw, 220px); gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.tiles::-webkit-scrollbar { display: none; }
.tile { scroll-snap-align: start; display: block; }
.tile img { width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: cover; border-radius: 12px; background: var(--surface); display: block; margin-bottom: 10px; }
.tile b { font: 500 16px/1.3 var(--serif); color: var(--ink); display: block; }
.tile .ng { font: 500 14px/1.4 var(--gur); color: var(--warm-ink); display: block; }
.tile .tby { font: 400 13px/1.4 var(--sans); color: var(--ink-2); display: block; min-height: 18px; }
.lib-feature + .tiles { margin-top: 24px; }
@media (min-width: 900px) {
  .lib-feature { grid-template-columns: 260px 1fr; gap: 28px; padding: 20px; }
  .lib-feature b { font-size: 26px; }
  .tiles { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; gap: 24px 16px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
}

/* ./css/prose.css */
/* Editorial and legal prose: Markdown bodies and the ported legal pages. */
.prose { font-size: 16px; line-height: 1.7; color: var(--ink); }
.prose h2 { font-size: 22px; line-height: 1.25; margin: 32px 0 10px; }
.prose > h2:first-child, .prose > section:first-child h2 { margin-top: 0; }
.prose h3 { font: 600 17px/1.4 var(--sans); margin: 24px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 600; }
.prose section + section { margin-top: 32px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.5; min-width: 560px; }
.prose th, .prose td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; }
.table-scroll { overflow-x: auto; margin: 0 0 14px; }
.prose blockquote { margin: 0 0 14px; padding-left: 16px; border-left: 2px solid var(--accent); color: var(--ink-2); }

.article-head { margin-bottom: 28px; }
.article h1 { font-size: 30px; line-height: 1.12; margin: 6px 0 10px; }
.article .lead { font-size: 17px; color: var(--ink-2); }
.article .byline { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; }
.article-faq, .article-continue { margin-top: 40px; }
.article-faq h2, .article-continue h2 { font-size: 22px; margin-bottom: 12px; }
.not-found .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
@media (min-width: 900px) {
  .article h1 { font-size: 40px; }
}

/* ./css/reader.css */
/* Fact grid, controls, and the reader. Layers are toggled by the checkboxes in
   .display-panel through :has() on the .bani ancestor, so no JS is needed. */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 4px 0 18px; }
.facts div { background: var(--float); padding: 10px 12px; }
/* Three cells (a library bani with no minutes) must not leave a blank cell: the odd last one spans the row. */
.facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.facts dt { font: 600 10px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.facts dd { font: 500 13.5px/1.35 var(--serif); color: var(--ink); }
.facts dd a { text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 3px; }
.facts dd a:hover { color: var(--accent); text-decoration-color: currentColor; }

.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.listen { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font: 600 13.5px var(--sans); padding: 8px 14px 8px 10px; border-radius: 999px; cursor: pointer; }
.listen svg { width: 18px; height: 18px; }
.player { display: none; padding: 14px 0 0; }
.player audio { width: 100%; }
.bani:has(#r-listen:checked) .player { display: block; }

.display { position: relative; }
.display-panel { position: absolute; left: 0; top: 40px; z-index: 3; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; gap: 2px; min-width: 190px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
.display-panel label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 14.5px; white-space: nowrap; }
.display-panel label:hover { background: var(--surface); }
.display-panel input { accent-color: var(--accent); margin: 0; }

.reader { padding-top: 6px; }
.stanza { padding: 18px 0 6px; border-bottom: 1px solid var(--line); content-visibility: auto; contain-intrinsic-size: auto 1200px; }
.stanza-label { font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.line { margin-bottom: 20px; }
.g { font: 600 20px/1.65 var(--gur); color: var(--ink); margin: 0 0 2px; }
.t { font: 400 14.5px/1.5 var(--serif); color: var(--ink-2); margin: 0 0 4px; }
.e { font: 500 14.5px/1.55 var(--serif); color: var(--ink); opacity: 0.92; }
.reader-end { font-size: 12.5px; color: var(--ink-3); text-align: center; margin: 18px 0 8px; letter-spacing: 0.02em; }
@media (min-width: 900px) {
  .g { font-size: 24px; }
  .t, .e { font-size: 16px; }
}

.bani:has(#r-translit:not(:checked)) .t { display: none; }
.bani:has(#r-english:not(:checked)) .e { display: none; }
.bani:has(#r-larivaar:checked) .g { word-spacing: -0.28em; }
.bani:has(#r-visraam:checked) .vs { color: var(--accent); }
.bani:has(#r-visraam:checked) .vl { color: var(--accent-strong); font-weight: 700; }

/* ./css/bani.css */
.bani h1 { font-size: 30px; line-height: 1.12; }
.gtitle { font: 500 21px/1.5 var(--gur); color: var(--warm-ink); margin: 6px 0 10px; }
.bani .more { padding-top: 30px; }
.bani .more h2 { font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
.bani .more section + section { margin-top: 40px; }
.pdfs { display: grid; gap: 10px; margin-bottom: 12px; }
.pdf-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--float); border: 1px solid var(--outline); border-radius: 14px; padding: 14px 16px; }
.pdf-card:hover { background: var(--surface); }
.pdf-card b { display: block; font: 500 16px var(--serif); color: var(--ink); }
.pdf-card small { display: block; font-size: 12.5px; color: var(--ink-2); }
.pdf-card svg { width: 22px; height: 22px; color: var(--ink-2); flex: none; }
@media (min-width: 900px) {
  .bani h1 { font-size: 44px; }
  .gtitle { font-size: 26px; }
}

/* ./css/hukamnama.css */
/* /hukamnama and /hukamnama/<day>: the bani reading column with a Mukhvak
   eyebrow, an origin line under the H1, and the past seven days as hairline rows. */
.hukamnama .eyebrow { margin-bottom: 8px; }
.hukamnama .origin { font: 400 15px/1.4 var(--serif); color: var(--ink-2); margin: 4px 0 14px; }
.days { display: grid; border-top: 1px solid var(--line); margin-bottom: 4px; }
.days a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 500 15.5px var(--serif); color: var(--ink); }
.days a:hover { color: var(--accent); }
.days small { font: 400 12.5px var(--sans); color: var(--ink-3); white-space: nowrap; }
@media (min-width: 900px) {
  .hukamnama .origin { font-size: 17px; }
}

/* ./css/ang.css */
/* The ang reader (/ang/<n>, /dasam-granth/ang/<n>) and the granth hubs:
   the Go to ang form, previous and next, the hub's start row and index. */
.goto { display: inline-flex; align-items: center; gap: 8px; }
.goto label { font: 500 13.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.goto input { width: 7.5em; font: 500 14px/1 var(--sans); color: var(--ink); background: var(--bg); padding: 7px 12px; border: 1px solid var(--outline); border-radius: 999px; -moz-appearance: textfield; }
.goto input::-webkit-inner-spin-button, .goto input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.goto input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.goto button { cursor: pointer; }
.controls .goto { margin-left: auto; }

.angnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.angnav a { display: grid; gap: 2px; padding: 10px 0; }
.angnav a:hover span { color: var(--accent); }
.angnav small { font: 600 10px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.angnav span { font: 500 15.5px/1.3 var(--serif); color: var(--ink); }
.angnav-next { text-align: right; justify-self: end; }
.angnav-top { border-bottom: 1px solid var(--line); }
.angnav-bottom { border-top: 1px solid var(--line); margin-top: 8px; }
.angnav-bottom a { padding: 14px 0 4px; }
.angnav-bottom span { font-size: 18px; }

.ang .more .links, .granth .links { display: flex; flex-wrap: wrap; gap: 8px; }
.ctl.strong { background: var(--inverse); color: var(--on-inverse); border-color: var(--inverse); }

.granth .gtitle { margin: 0 0 12px; }
.granth-start { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.granth #index h2 { font-size: 22px; line-height: 1.25; margin: 0 0 4px; }
.granth #index .muted { margin-bottom: 12px; }
.hub-index span i { font: 500 15px var(--gur); font-style: normal; color: var(--warm-ink); margin-left: 6px; }
/* A granth hub reads as one column: the header stays on the reading width, not the marketing wrap. */
@media (min-width: 900px) { .granth .hub-head { max-width: var(--col); padding-left: 0; padding-right: 0; } }

/* ./css/band.css */
/* The brand band: a white card inset on the page (like every other card), with the
   app icon, one line, the store buttons, and three real phones fanned off its
   bottom edge. The one download block. */
.band { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 72px auto 0; background: var(--float); color: var(--ink); border: 1px solid var(--card); border-radius: 24px; text-align: center; padding: 36px var(--gutter) 0; overflow: hidden; }
/* The fan is not clipped itself: the tilted phones keep their corners and the card's own edge cuts them off at the bottom. */
/* The 72px above the band is the band's own margin, so a column right before it drops its bottom padding. */
.col:has(+ .band) { padding-bottom: 0; }
.band-in { display: grid; justify-items: center; gap: 10px; max-width: var(--col); margin: 0 auto; }
.band-title { color: var(--ink); font-size: 26px; line-height: 1.15; margin-top: 4px; }
.band p { color: var(--ink-2); max-width: 280px; font-size: 14.5px; }
.band .ctarow { margin-top: 6px; }
.fan { display: grid; grid-template-columns: repeat(3, 1fr); height: clamp(150px, 38vw, 230px); overflow: visible; margin: 26px auto 0; padding: 0 10px; align-items: start; max-width: 760px; }
.fan .dev { border-radius: 22px 22px 0 0; padding: 4px 4px 0; height: 340px; }
.fan .dev img { border-radius: 18px 18px 0 0; }
.fan .dev:nth-child(1) { transform: rotate(-8deg) translate(14px, 28px); }
.fan .dev:nth-child(2) { position: relative; z-index: 1; }
.fan .dev:nth-child(3) { transform: rotate(8deg) translate(-14px, 28px); }

.band-wide { margin-top: 48px; padding-top: 48px; }
.band-wide .band-title { font-size: 32px; }
.band-wide p { max-width: none; font-size: 17px; }
@media (min-width: 900px) {
  .band { padding-top: 48px; }
  .band-wide { margin-top: 72px; padding-top: 64px; }
  .band-wide .band-title { font-size: 48px; max-width: 640px; }
  .band-wide .fan { height: 300px; margin-top: 40px; }
  .band-wide .fan .dev { height: auto; }
}

/* ./css/home.css */
/* Home hero (H3 in the mock): centered copy, stores, proof line, real phones
   with a third of each running off the bottom edge. */
.hero { display: grid; justify-items: center; text-align: center; padding: 32px var(--gutter) 0; gap: 24px; border-bottom: 1px solid var(--line); }
.hero-copy { display: grid; justify-items: center; padding-bottom: 12px; }
.hero .icon { margin-bottom: 18px; }
.hero h1 { font-size: 32px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 720px; }
.lede { font-size: 15.5px; color: var(--ink-2); max-width: 480px; margin: 0 0 22px; }
.proof { font-size: 13.5px; color: var(--ink-2); margin-top: 18px; }
.proof b { color: var(--ink); }
.proof i { font-style: normal; margin: 0 6px; }
.proof span { white-space: nowrap; }
.stars { color: var(--gold); letter-spacing: 1px; }
.hero-row { display: flex; gap: 32px; justify-content: center; align-items: flex-start; height: 390px; overflow: hidden; width: 100%; }
.hero-row figure { width: 250px; display: none; gap: 10px; }
.hero-row figure.hero-main { display: grid; }
.hero-row figcaption { order: -1; font: 600 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.hero-row .dev { border-radius: 38px; padding: 7px; }
.hero-row .dev img { border-radius: 31px; }
@media (min-width: 900px) {
  .hero { padding-top: 64px; max-width: var(--wrap); margin: 0 auto; }
  .hero h1 { font-size: 54px; }
  .lede { font-size: 18px; }
  .hero-row { height: 360px; }
  .hero-row figure { width: 230px; display: grid; }
}

/* Today's Hukamnama (T2): facts left, the opening lines right, then Listen and
   Read in full as two cells. Same bordered grid as "In the app". */
.t2 { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.t2 > * { background: var(--float); }
.t2-meta { margin: 0; padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.t2-meta dt { font: 600 10.5px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.t2-meta dd { margin: 0; font: 500 16px var(--serif); color: var(--ink); }
.t2-text { padding: 20px; }
.t2-text .tl + .tl { margin-top: 14px; }
.t2 .g { font-size: 20px; }
.t2 .e { margin: 0; }
.t2-act { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: var(--ink); }
.t2-act:hover { background: var(--surface); }
.t2-act b { display: block; font: 500 16px var(--serif); color: var(--ink); }
.t2-act small { display: block; font-size: 12.5px; color: var(--ink-2); }
.t2-act .arrow { margin-left: auto; font-size: 22px; color: var(--accent); }
.playc { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.playc svg { width: 18px; height: 18px; }
.t2-act.playing .playc svg { display: none; }
.t2-act.playing .playc::before { content: ""; width: 12px; height: 14px; border: solid #fff; border-width: 0 4px; box-sizing: border-box; }

/* "In the app": 3x2 on desktop, each real screen cut off by the cell bottom. */
.feats { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.feat { background: var(--float); padding: 24px 24px 0; display: flex; flex-direction: column; gap: 6px; }
.feat h3 { font: 500 19px var(--serif); color: var(--ink); margin: 0; }
.feat p { font-size: 14px; color: var(--ink-2); margin: 0 0 12px; min-height: 42px; }
/* margin-top: auto keeps the phone on the cell's bottom edge when a neighbour's longer text makes the row taller. */
.feat-shot { height: 190px; overflow: hidden; display: flex; justify-content: center; margin-top: auto; }
.feat-shot .dev { width: 210px; flex: none; align-self: flex-start; border-radius: 26px 26px 0 0; padding: 5px 5px 0; }
.feat-shot .dev img { border-radius: 21px 21px 0 0; }

/* Reviews */
.stats { display: flex; gap: 22px; margin: 0 0 24px; }
.stats b { display: block; font: 500 26px/1 var(--serif); color: var(--ink); }
.stats span { font-size: 13px; color: var(--ink-2); }
.revs { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rev { margin: 0; padding: 22px; background: var(--float); border: 1px solid var(--card); border-radius: 16px; display: grid; gap: 10px; align-content: start; }
.rev blockquote { margin: 0; font: 400 16px/1.5 var(--serif); color: var(--ink); }
.rev figcaption { font-size: 13px; color: var(--ink-2); }

/* Explore banis */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 14px var(--sans); padding: 9px 14px; background: var(--float); border: 1px solid var(--outline); border-radius: 999px; color: var(--ink); }
.chip:hover { background: var(--surface); }
.chip.strong { background: var(--inverse); color: var(--on-inverse); border-color: var(--inverse); }

@media (min-width: 900px) {
  .t2 { grid-template-columns: 260px 1fr 1fr; }
  .t2-meta { grid-row: span 2; grid-template-columns: 1fr; gap: 16px; padding: 22px 24px; }
  .t2-text { grid-column: span 2; padding: 24px 28px; }
  .t2 .g { font-size: 23px; }
  .t2-act { padding: 18px 24px; }
  .feats { grid-template-columns: repeat(3, 1fr); }
  .feat-shot { height: 230px; }
  .stats { gap: 48px; }
  .stats b { font-size: 34px; }
  .revs { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ./css/app.css */
/* /app, the get-the-app page and ad landing page: the download.simranapp.com
   escape page's layout on every device, always light. Icon, one black button
   for the visitor's store (both on computers; site.js hides the other on a
   phone the server could not identify), the App Store rating, then the store
   screenshots: a snapping swipe row on phones, three across on wide screens.
   The QR shows only where the app cannot be installed directly. */
.app-ask { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 0 64px; background: #fff; color: #111; overflow: hidden; }
.app-ask h1 { font: 700 26px/1.2 var(--sans); letter-spacing: -0.3px; color: #111; margin: 0; padding: 0 24px; }
.app-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); margin: 30px 0; }
.app-ctas { display: grid; gap: 10px; width: 100%; max-width: 408px; padding: 0 24px; }
.app-ask .app-cta { display: flex; justify-content: center; gap: 10px; padding: 15px 20px; border-radius: 14px; background: #111; color: #fff; font: 600 17px/1.2 var(--sans); text-decoration: none; }
.app-ask .app-cta[hidden] { display: none; }
.app-proof { margin: 16px 0 0; padding: 0 24px; font: 400 14px/1.4 var(--sans); color: #5d6470; }
.app-proof span { color: #F5A623; letter-spacing: 1px; }
.app-qr { display: none; margin: 28px 0 0; font: 400 14px var(--sans); color: #5d6470; }
.app-qr-code { width: 150px; height: auto; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e6e6e6; }

/* App Store-style row: the first shot at the left edge, the next one peeking. */
.app-shots { list-style: none; margin: 40px 0 0; padding: 0 24px; width: 100%; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app-shots::-webkit-scrollbar { display: none; }
.app-shots li { flex: 0 0 72%; max-width: 300px; scroll-snap-align: start; }
.app-shots img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.12); }

main:has(> .app-ask:last-child) + .sitefoot { margin-top: 0; }

@media (min-width: 900px) {
  .app-ask { padding: 72px 0 88px; }
  .app-ask h1 { font-size: 32px; }
  .app-shots { justify-content: center; overflow: visible; margin-top: 56px; gap: 24px; }
  .app-shots li { flex: 0 0 280px; }
}
@media (min-width: 900px) and (hover: hover) {
  .app-qr { display: grid; justify-items: center; gap: 10px; }
}

/* ./css/requests.css */
/* /requests, the feature request board. Opens inside the app's in-app browser
   sheet, so it is a phone column first. Chip hues beyond the app tokens
   (Planned blue, Shipped green) are local to this page. */
.board { --blue: #2F63A8; --blue-soft: rgba(47, 99, 168, 0.12); --green: #2E7D4F; --green-soft: rgba(46, 125, 79, 0.12); max-width: var(--col); margin: 0 auto; padding: 18px var(--gutter) 120px; }
@media (min-width: 900px) { .board { padding-top: 40px; } }
.board [hidden], .sheet [hidden] { display: none; }

.board-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; margin-bottom: 10px; }
.who { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--sans); color: var(--ink-2); }
.who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.linkish { background: none; border: 0; padding: 0; font: 600 13.5px/1.2 var(--sans); color: var(--accent); cursor: pointer; }
.board h1 { font-size: 30px; line-height: 1.12; }
.board .lead { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 900px) { .board h1 { font-size: 44px; } .board .lead { font-size: 17px; } }

.tabs { display: flex; gap: 4px; margin: 22px 0 6px; padding: 4px; background: var(--surface); border-radius: 999px; }
.tabs button { flex: 1; border: 0; background: none; padding: 8px 10px; border-radius: 999px; font: 600 14px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

.sent { margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--green-soft); color: var(--green); font-size: 14.5px; line-height: 1.5; }
.sent strong { font-weight: 600; }
.board-err { margin: 12px 0 0; font-size: 14px; color: var(--accent-strong); }

.reqs { list-style: none; margin: 0; padding: 0; }
.req { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.req-b { flex: 1; min-width: 0; }
.req-t { font: 600 16px/1.35 var(--sans); letter-spacing: 0; overflow-wrap: anywhere; }
.req-d { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.req-m { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); font-style: italic; }
.req.own .req-t { color: var(--ink-2); }
.req.skel { height: 84px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, transparent, var(--surface), transparent) 0 0 / 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .req.skel { animation: none; } }

.vote { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 50px; min-height: 56px; padding: 8px 0; border: 1px solid var(--outline); border-radius: 14px; background: var(--bg); color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vote svg { color: var(--ink-2); }
.vote.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.vote.on svg { color: #fff; }
.vote:disabled { cursor: default; opacity: 0.55; }
.vote:focus-visible, .tabs button:focus-visible, .suggest:focus-visible, .primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font: 600 11.5px/1 var(--sans); padding: 5px 9px; border-radius: 999px; background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.chip.blue { background: var(--blue-soft); color: var(--blue); }
.chip.acc { background: var(--accent-soft); color: var(--accent); }
.chip.green { background: var(--green-soft); color: var(--green); }
.chip.mine { background: none; box-shadow: inset 0 0 0 1px var(--outline); color: var(--ink-2); }

.board-empty { padding: 40px 0; text-align: center; color: var(--ink-2); font-size: 15px; }
.board-empty .linkish { margin-top: 10px; }

.suggest { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 14px 20px; border: 0; border-radius: 999px; background: var(--inverse); color: var(--on-inverse); font: 600 15px/1 var(--sans); cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.suggest span { font-size: 18px; font-weight: 500; }

/* Sheets: a <dialog> pinned to the bottom on a phone, centred on desktop. */
.sheet { width: 100%; max-width: 560px; max-height: 92vh; margin: auto auto 0; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--bg); color: var(--ink); }
.sheet::backdrop { background: rgba(0, 0, 0, 0.45); }
@media (min-width: 600px) { .sheet { margin: auto; border-radius: 22px; } }
.sheet-in { padding: 18px 20px max(22px, env(safe-area-inset-bottom)); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-head h2 { font-size: 22px; line-height: 1.2; }
.x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; }
.fld { display: block; margin-bottom: 14px; }
.fld span { display: block; margin-bottom: 6px; font: 600 13px/1.2 var(--sans); color: var(--ink); }
.fld i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.fld input, .fld textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--outline); border-radius: 12px; background: var(--bg); color: var(--ink); font: 16px/1.4 var(--sans); resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.note { margin-bottom: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.sheet-err { margin-bottom: 12px; font-size: 14px; color: var(--accent-strong); }
.primary { width: 100%; padding: 15px; border: 0; border-radius: 999px; background: var(--inverse); color: var(--on-inverse); font: 600 16px/1 var(--sans); cursor: pointer; }
.primary:disabled { opacity: 0.6; }
#code-form .linkish { display: block; margin: 14px auto 0; }

.similar { margin: -4px 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--warm); border: 1px solid var(--line); }
.similar-h { margin-bottom: 8px; font: 600 12px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm-ink); }
.similar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sim { display: flex; align-items: center; gap: 12px; }
.sim .vote { width: 44px; min-height: 44px; padding: 5px 0; border-radius: 12px; font-size: 13px; }
.sim-t { font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }

/* ./css/scholarship.css */
/* /scholarship: one column on phones (arch, message, price panel); from 960px
   the message and panel take a wide left column and the painted arch the right. */
.sch { max-width: var(--wrap); margin: 0 auto; padding: 22px var(--gutter) 64px; }
.sch [hidden] { display: none; }
.sch::before { content: ""; display: block; width: 150px; aspect-ratio: 170 / 200; margin: 4px 0 22px; border-radius: 999px 999px 24px 24px; background: url(/img/scholarship-arch.webp) center / cover; }
.sch-hero, .sch-card { max-width: 560px; }

.sch-hero h1 { margin: 10px 0 16px; font-size: 34px; line-height: 1.1; }
.sch-hero p { margin-top: 12px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.sch-hero .sch-lead, .sch-hero .sch-plain { color: var(--ink); font-weight: 600; }
.sch-hero .sch-lead { font-size: 18px; }
@media (min-width: 600px) { .sch-hero h1 { font-size: 44px; } .sch-hero p { font-size: 17.5px; } }

.sch-card { margin-top: 28px; padding: 24px 20px 20px; border-radius: 20px; background: var(--surface); }
@media (min-width: 600px) { .sch-card { padding: 30px 30px 24px; } }
.sch-card h2 { font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; }
.sch-card h2:focus { outline: none; }

@media (min-width: 960px) {
  .sch { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; padding: clamp(56px, 7vw, 104px) var(--gutter) 112px; }
  .sch::before { grid-column: 2; grid-row: 1 / span 3; width: 100%; max-width: 420px; justify-self: end; margin: 0; position: sticky; top: 96px; border-radius: 999px 999px 36px 36px; }
  .sch-hero, .sch-card { grid-column: 1; }
  .sch-hero { grid-row: 1; max-width: none; padding-top: 6px; }
  .sch-hero h1 { font-size: clamp(48px, 4.6vw, 64px); line-height: 1.05; margin-bottom: 24px; }
  .sch-hero p { font-size: 18px; max-width: 60ch; }
  .sch-hero .sch-lead { font-size: 20px; }
  .sch-card { grid-row: 2; margin-top: 36px; max-width: 600px; }
  .offer-amt { font-size: 68px; }
}

.offer-price { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.offer-amt { font: 500 58px/1.05 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.offer-per { font-size: 16px; color: var(--ink-2); }
.sch-ref { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.offer-drop { margin-top: 16px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.offer-drop b { display: block; font-weight: 600; color: var(--ink); }
.offer-drop.in { animation: sch-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sch-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .offer-drop.in { animation: none; } }
.sch-renew { margin: 14px 0 18px; font-size: 13.5px; color: var(--ink-2); }

.free .sch-sub { margin: 8px 0 20px; font-size: 15px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.free .sch-sub b { color: var(--ink); font-weight: 600; }
.sch-card .fld input, .sch-card .fld textarea { background: var(--bg); }
.sch-hint { margin: -6px 0 16px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.sch-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sch-err { margin: 6px 0 0; font-size: 14px; color: var(--accent-strong); }
.sch-btn { display: block; width: 100%; margin-top: 20px; padding: 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 16.5px/1 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sch-btn:disabled { cursor: default; background: var(--bg); color: var(--ink-3); }
.sch-btn:focus-visible, .sch-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sch-steps { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; }
.sch-link { padding: 2px 0; border: 0; background: none; color: var(--ink); font: 600 15px/1.35 var(--sans); text-align: center; text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 4px; cursor: pointer; }
.sch-link.sch-up { font-weight: 500; font-size: 14px; color: var(--ink-2); }

.sch-done p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.sch-done b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.sch-done .stores { justify-content: flex-start; margin-top: 20px; }
.sch-done:focus { outline: none; }

.sch-support { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.sch-auth .sch-sub { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.sch-auth h2 + .sch-sub { margin: 8px 0 22px; }
.sch-auth b { color: var(--ink); font-weight: 600; }
.sch-sso { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 20px; border: 1px solid var(--outline); border-radius: 999px; background: var(--bg); color: var(--ink); font: 700 17px/1 var(--sans); letter-spacing: -0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sch-sso + .sch-sso { margin-top: 12px; }
.sch-sso svg { flex: none; }
.sch-apple, .sch-go { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sch-sso:disabled { opacity: 0.55; cursor: default; }
.sch-sso:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sch-back { display: block; margin: 18px auto 0; }
.sch-who { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.sch-who b { color: var(--ink); font-weight: 600; }
.sch-auth-err { margin: 0 0 14px; }

.sch-checking { margin: 4px 0 8px; font-size: 15px; color: var(--ink-2); }
.sch-member .sch-sub { margin: 8px 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.sch-member b { color: var(--ink); font-weight: 600; }
.sch-manage { display: inline-block; }
.sch-grant { margin: 0 0 14px; font-size: 14px; color: var(--ink-2); }
.sch-nudge { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sch-nudge .sch-btn { margin-top: 14px; }

/* ./css/delete-account.css */
/* /delete-account: one column; the sign-in and confirm card reuse the
   scholarship card's components (sch-card, sch-auth, sch-sso, sch-btn). */
.del { max-width: 640px; margin: 0 auto; padding: 28px var(--gutter) 72px; }
.del [hidden] { display: none; }
.del-head h1 { margin: 10px 0 14px; font-size: 34px; line-height: 1.1; }
.del-head .lead { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.del-alt { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.del-alt b { color: var(--ink); font-weight: 600; }
@media (min-width: 600px) { .del { padding-top: 56px; } .del-head h1 { font-size: 44px; } }

.del-card { max-width: none; }
.del-sub { margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--bg); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.del-sub p + p { margin-top: 8px; }
.del-sub b { color: var(--ink); font-weight: 600; }
.del-sub a, .sch-done a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.del-grant { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.del-what { margin: 14px 0 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.del-ack { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.del-ack input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent-strong); }
.del-btn:not(:disabled) { background: var(--accent-strong); }

.del-legal { margin-top: 40px; }

/* ./css/help.css */
/* The help center (/help, /help/<category>, /help/<slug>), in the app's own patterns
   (simran-app docs/design-rules.md): painterly art in a scrimmed card with cream text,
   grouped rows in one filled card with a 1px outline, everything else flat on the
   canvas, Lora headings, an ink pill, radius 16 (24 for the hero). */
.hc { max-width: var(--wrap); margin: 0 auto; padding: 16px var(--gutter) 64px; }
.hc h1, .hc h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); }

/* Art card: the art fills the card under a flat black scrim; text sits inside in cream. */
.hc-hero { position: relative; overflow: hidden; border-radius: 24px; background: var(--surface-strong); isolation: isolate; }
.hc-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hc-hero::before { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: -1; }
.hc-hero { min-height: 340px; display: grid; align-items: center; }
.hc-hero-in { width: 100%; max-width: 600px; margin: 0 auto; padding: 44px 22px; text-align: center; }
.hc-badge { font: 600 11px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--art-ink); opacity: 0.85; margin: 0 0 12px; }
.hc .hc-hero h1 { font-size: 34px; line-height: 1.12; color: var(--art-ink); margin: 0 0 24px; }

/* Search: a pill with a monoline glass. White on the hero, outlined on the bar. */
.hc-search { position: relative; }
.hc-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.hc-search input { width: 100%; font: 400 16px var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--outline); border-radius: 999px; padding: 14px 20px 14px 48px; }
.hc-search input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.hc-hero .hc-search input { background: #FFFFFF; border-color: transparent; padding-top: 16px; padding-bottom: 16px; }

/* Sections flat on the canvas. */
.hc-sec { margin-top: 40px; }
.hc-sec h2, .hc-side h2, .hc-contact h2 { font-size: 22px; line-height: 1.25; margin: 0 0 14px; }

/* Topics on the hub: rows like the rest, the name over its line. */
.hc-topics b { display: block; font-weight: 500; }
.hc-topics i { display: block; font: 400 14px/1.5 var(--sans); font-style: normal; color: var(--ink-2); margin-top: 3px; }

/* Questions: white cards with a 1px outline, the question in Lora over its one-line answer. */
.hc-qs { display: grid; gap: 12px; }
.hc-qs a { display: grid; gap: 6px; padding: 18px 20px; background: var(--float); border: 1px solid var(--card); border-radius: 16px; }
.hc-qs a:hover { border-color: var(--ink-faint); }
.hc-qs b { font: 500 18px/1.3 var(--serif); color: var(--ink); }
.hc-qs span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* Grouped rows: one white card with a 1px outline, a divider between rows, a chevron (ListRow). */
.hc-rows { display: grid; background: var(--float); border: 1px solid var(--card); border-radius: 16px; overflow: hidden; }
.hc-rows > a, .hc-rows > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font: 500 16.5px/1.4 var(--serif); color: var(--ink); }
.hc-rows > * + * { border-top: 1px solid var(--line); }
.hc-rows > a:hover { background: var(--surface); }
.hc-rows > span[aria-current] { background: var(--surface-strong); font-weight: 600; }
.hc-chev { flex: none; color: var(--ink-3); }

/* Search results replace the topics while searching. */
.hc-results { margin-top: 32px; }
.hc-results[hidden], .hc-browse[hidden], .hc-found a[hidden] { display: none; }
.hc-count { color: var(--ink-2); margin: 0 0 14px; }
.hc-found { display: grid; background: var(--float); border: 1px solid var(--card); border-radius: 16px; overflow: hidden; }
.hc-found a { display: grid; gap: 4px; padding: 16px 18px; }
.hc-found a + a { border-top: 1px solid var(--line); }
.hc-found a:hover { background: var(--surface); }
.hc-found b { font: 500 17px/1.3 var(--serif); color: var(--ink); }
.hc-found span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.hc-found i { font: 600 10.5px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-style: normal; }

/* Category and article: breadcrumb and search on one line on desktop. */
.hc-top { display: grid; gap: 14px; margin-bottom: 22px; }
.hc-trail { display: flex; flex-wrap: wrap; font: 500 13.5px/1.5 var(--sans); }
.hc-trail a { color: var(--ink-2); }
.hc-trail a:hover { color: var(--ink); }
.hc-trail a + a::before { content: "\203A"; color: var(--ink-faint); padding: 0 8px; }
.hc-sections { display: grid; }

/* Article: Lora title, the lead in the app's voice role, then the text. */
.hc-article { display: grid; gap: 44px; margin-top: 8px; }
.hc-main { min-width: 0; max-width: 680px; }
.hc .hc-head h1 { font-size: 30px; line-height: 1.15; margin: 0 0 14px; }
.hc-cat { margin: 12px 0 8px; max-width: 680px; }
.hc-cat .hc-voice { margin-bottom: 0; }
.hc-voice { font: 500 19px/1.45 var(--serif); color: var(--ink-body); margin: 0 0 26px; }
.hc-side h2 { font-size: 18px; }

/* Contact: flat, then the ink pill (the app's primary button). */
.hc-contact { margin-top: 56px; }
.hc-contact p { color: var(--ink-2); margin: 0 0 18px; max-width: 560px; }
.hc-btn { display: inline-block; font: 500 16px var(--sans); color: var(--on-inverse); background: var(--inverse); border-radius: 999px; padding: 13px 26px; }
.hc-btn:hover { opacity: 0.88; }

/* A real screenshot in the dark phone frame (DESIGN.md rule 7), centered between steps. */
.shot { margin: 22px auto 26px; max-width: 260px; text-align: center; }
.shot img { width: 100%; height: auto; display: block; background: #0E0D0C; padding: 6px; border-radius: 30px; }
.shot.strip { max-width: 360px; }
.shot.strip img { border-radius: 14px; padding: 4px; }
.shot figcaption { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-top: 10px; }

@media (min-width: 900px) {
  .hc { padding-top: 24px; }
  .hc-hero { min-height: 440px; }
  .hc .hc-hero h1 { font-size: 52px; }
  .hc-sec { margin-top: 56px; }
  .hc-sec h2 { font-size: 26px; }
  .hc-qs { grid-template-columns: 1fr 1fr; gap: 14px; }
  .hc-top { grid-template-columns: 1fr 340px; align-items: center; }
  .hc-sections { grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .hc-article { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; }
  .hc .hc-head h1 { font-size: 42px; }
  .hc-side { padding-top: 6px; }
  .shot { max-width: 280px; }
}

/* The app's lock screen walkthrough, recorded from the simulator: a looping clip, no frame of its own (the phone is in the clip). */
.shot.clip video { width: 100%; height: auto; display: block; border-radius: 18px; background: var(--bg); }