/* neoseva.in
   Layout: the home page is one picture that fills the screen and holds still while the page
   scrolls over it. The words come up as captions on a white card at the top; the app's cards
   rise from the bottom; on a computer both keep to a column on the left and the picture's
   people stand to the right. Every other page is one centred column with a 20px gutter, its
   facts on cards with an icon each, and long rules folded away. */

:root {
  color-scheme: light;
  /* The app's colours */
  --ink: #353535; --ink-quiet: #5C5C5C; --charcoal: #333333;
  --logo: #E06B00; --orange: #AC5000; --tint: #FFEBD9; --on-tint: #7A3A00;
  --page: #FFFFFF; --card: #FFFFFF; --line: #E0E0E0; --edge: #8C8C8C; --grey: #EEEEEE; --soft: #F7F5F2;
  --green: #007752; --green-box: #E1F3E8; --on-green-box: #00522F;
  --blue: #005EA5; --blue-box: #E3EEFB; --on-blue-box: #004A84;
  --red: #A90021; --red-box: #FDE7EA; --on-red-box: #8C001B;
  --night: #0F1730; --night-ink: #E9ECF4; --night-quiet: #AEB6C9; --glow: #FFB066;
  /* The app's fonts, picked by language */
  --title: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --te-title: "Ramabhadra", "Noto Sans Telugu", sans-serif;
  --te-body: "Noto Sans Telugu", "Nirmala UI", sans-serif;
  /* The scene: the sky is set by the story as the day goes on; the rest a touch deeper than pastel */
  --sky1: #93ACD2; --sky2: #F4C49E; --sun: #FFC170; --sun-glow: #FFD9AC;
  --veil: .08; --stars: 0; --lights: .1; --dry: 0; --water: 1;
  --cloud: #FFFFFF; --cloud-shade: #D4DEEA; --cloud-lit: #FFFFFF;
  --hill-far: #87A3B3; --hill-lit: #A5BCC8; --hill-near: #6F9688; --treeline: #3F6E3E; --far-field: #8DB25C; --far-rows: #7AA04D;
  --palm-trunk: #4B3E36; --palm-ring: #352B25; --palm-leaf: #3C7A38; --palm-leaf-2: #4F8F45; --palm-leaf-3: #2C5A2E;
  --palm-fold: #24502A; --palm-stalk: #6A8A3A; --palm-dead: #8E6B3C;
  --coco-trunk: #7A6852; --coco-ring: #5E5044; --frond: #3F8A36; --frond-2: #2F6E2C; --coconut: #6A5124;
  --bark: #594838; --neem: #3E7436; --neem-lit: #5A9A48; --neem-dark: #2C5528;
  --pole: #A9AAA5; --pole-shade: #8A8B86; --arm: #474C50; --insulator: #F1F1EC; --wire: #3B4045;
  --yard: #C9B285; --grass: #93B35B; --grass-2: #6F9A42;
  --plinth: #CDBEA2; --plinth-front: #AE9F84; --wall: #F8F3EA; --wall-shade: #D9C9B3; --dado: #6E9DB8; --dado-shade: #5A86A0; --dado-line: #4E7891;
  --slab: #E6DDCD; --slab-shadow: #8F826E; --tank: #1E2125; --tank-ridge: #3A3F45;
  --frame: #6A4630; --glass: #2E3944; --grill: #1F2428; --door-wood: #7B4728; --door-panel: #91593A;
  --tulasi: #F3EEE5; --tulasi-band: #C0503A; --basil: #3C7A33; --straw: #D8B255; --straw-shade: #B38A38; --buffalo: #2A2A2E; --buffalo-lit: #4A4A52;
  --brick: #A9553A; --mortar: #D3A88C; --sheet: #9BA5AB; --sheet-dark: #78838A; --steel: #56707F; --steel-dark: #3E5664; --starter: #7B868C;
  --motor: #2C6CA6; --motor-dark: #1F527F; --casing: #6E7A82; --casing-dark: #4E5960; --pipe: #8D979D; --pipe-lite: #C5CCD0;
  --cement: #B4AEA3; --cement-shade: #9A948A; --cement-top: #D5CFC4;
  --road: #C6A16E; --road-track: #A9844F;
  --plot: #579B41; --plot-a: #5FA347; --plot-b: #4F9139; --plot-dry: #C7AA63; --plot-dry-b: #BC9D56;
  --paddy: #2F7228; --paddy-dry: #8E7A3A; --sheen: #B7DDF0; --crack: #6F5832;
  --bund: #B08F5F; --bund-lit: #CDB083; --bank: #93764E; --channel: #5FA7CF; --channel-dry: #BFA77B;
  --water-c: #2F8FD1; --water-lite: #BFE8FA; --hum: #4F5A63;
  --skin-c: #7D4E31; --skin-r: #6F432A; --lungi: #2E6B74; --lungi-check: #A3CFD2; --lungi-dark: #214F56;
  --farmer-shirt: #F6F3EC; --farmer-shirt-line: #CBC3B4; --towel: #F1E5CF; --towel-back: #DCCDB2; --towel-band: #B5322A;
  --hair: #1B1411; --hair-grey: #6E6862; --moustache: #3F3A36; --shoe: #3A2A22; --phone: #1E1E1E;
  --shirt: #7BB0DD; --shirt-2: #4F86B8; --trousers: #2C3746; --belt: #3A2A22; --bag: #5A3E2B; --bag-2: #7A5A3E; --tool: #6E7880;
  --bike: #1F4A63; --bike-2: #2C6585; --stripe: #E2A43A; --chrome: #C7CDD1; --tyre: #1C1C1C; --rim: #9AA2A8; --seat: #1A1A1A;
  --engine: #59626A; --engine-2: #3E464D; --plate: #F4F4F0; --helmet: #F2F0EA; --helmet-stripe: #C8102E; --visor: #26323E;
  /* Sizes */
  --bar: 60px; --top: calc(var(--bar) + env(safe-area-inset-top, 0px));
  /* One side margin for the whole site: the logo, every page's words, the home story and the footer
     all start at --page-margin. 20px on a phone; on a computer 40px, growing so nothing is wider than --col. */
  --gutter: 20px; --col: 1240px; --page-margin: max(var(--gutter), calc((100% - var(--col)) / 2));
  --radius: 22px 22px 22px 2px; --radius-s: 16px 16px 16px 2px;
  --lift: 0 14px 34px -18px rgba(20, 24, 40, .5);
  --soft-shadow: 0 2px 16px rgba(51, 51, 51, .1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 1rem/1.5 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html[lang="te"] body { font-family: var(--te-body); font-size: 1.0625rem; line-height: 1.65; }
img, svg { max-width: 100%; }
a { color: var(--orange); }
h1, h2, h3 { color: var(--charcoal); font-family: var(--title); font-weight: 600; text-wrap: balance; margin: 0; }
html[lang="te"] :is(h1, h2, h3) { font-family: var(--te-title); font-weight: 400; line-height: 1.45; letter-spacing: 0; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
@media (min-width: 960px) { :root { --gutter: 40px; } }
.wrap { padding-inline: var(--page-margin); }
.ms { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block; flex: none; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 14px; background: var(--charcoal); color: #fff; border-radius: 999px; }
.skip:focus { left: 12px; }
:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; border-radius: 6px; }
.sel { user-select: all; overflow-wrap: anywhere; }
mark.todo { background: #FFF2A8; color: #5A4600; padding: 0 .3em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; outline: 1px dashed #B39200; font-family: var(--body); font-size: .9em; }

/* ---------------------------------------------------------------- The bar across the top */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.bar-in { height: var(--bar); padding-inline: var(--page-margin); display: flex; align-items: center; gap: 16px; }
.brand { display: block; line-height: 0; margin-right: auto; }
.brand-mark { height: 24px; width: auto; }
.nav { display: none; gap: 4px; }
.nav a { color: var(--ink); text-decoration: none; font: 600 .9375rem/1 var(--body); padding: 10px 12px; border-radius: 999px; }
html[lang="te"] .nav a { font-family: var(--te-body); font-size: 1rem; }
.nav a:hover { background: var(--grey); }
.nav a[aria-current="page"] { background: var(--tint); color: var(--on-tint); }
.bar-end { display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 999px; color: var(--charcoal); text-decoration: none; font: 600 .9375rem/1 var(--body); }
/* On English pages the one Telugu word uses the phone's own Telugu font, so the page does not download a whole font for it */
:is(.lang, .lang-foot):lang(te) { font-family: system-ui, -apple-system, "Nirmala UI", sans-serif; }
html[lang="te"] :is(.lang, .lang-foot):lang(te) { font-family: var(--te-body); }
.lang:hover { background: var(--grey); }
.menu { position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--charcoal); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .ms { font-size: 28px; }
.menu[open] summary { background: var(--grey); }
.menu-sheet { position: absolute; right: 0; top: 50px; width: min(80vw, 290px); display: grid; gap: 2px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35); }
.menu-sheet a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 12px; }
.menu-sheet a .ms { color: var(--orange); font-size: 22px; }
.menu-sheet a:hover { background: var(--grey); }
.menu-sheet a[aria-current="page"] { background: var(--tint); color: var(--on-tint); }
@media (min-width: 960px) { .nav { display: flex; } .menu { display: none; } }

main { padding-top: var(--top); }

/* Buttons: pills, the main one the deeper orange with white words, the second on the tint */
.btn { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 22px; border-radius: 999px; font: 600 1.0625rem/1.2 var(--title); text-align: center; text-decoration: none; }
html[lang="te"] .btn { font-family: var(--te-title); font-weight: 400; font-size: 1.1875rem; }
html[lang="te"] .btn:lang(en) { font-family: var(--title); font-weight: 600; font-size: 1.0625rem; }
.btn.main { background: var(--orange); color: #fff; }
.btn.second { background: var(--tint); color: var(--orange); }
.soon { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--charcoal); color: #fff; font: 700 .9375rem/1.2 var(--body); }
html[lang="te"] .soon { font-family: var(--te-body); font-weight: 600; }
.soon .ms { font-size: 20px; }

/* ================================================================ The home page: one picture */
.story { position: relative; background: var(--night); }
.stage { position: sticky; top: var(--top); height: calc(100vh - var(--top)); height: calc(100lvh - var(--top)); overflow: hidden; z-index: 1; background: var(--sky2); isolation: isolate; }
.steps { position: relative; z-index: 2; margin-top: calc(var(--top) - 100vh); margin-top: calc(var(--top) - 100lvh); }
.stage-scene, .stage-map { position: absolute; inset: 0; will-change: transform, opacity; }
.stage-scene svg, .stage-map svg { display: block; width: 100%; height: 100%; }
.stage-map { opacity: 0; background: #EFEDE6; }
.stage-map::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: var(--map-dim, 0); pointer-events: none; }
.map-credit { position: absolute; right: 8px; bottom: 6px; z-index: 1; margin: 0; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .85); color: #5C5C5C; font: 500 .6875rem/1.3 var(--body); }

/* The scene is four drawings over each other: the sky; the land and, in its own layer, the people
   and the running water, which the camera moves together; the night's veil; the lit windows. The
   script sets the hour's sky, and --dry and --water between 0 and 1. Phones too old to mix colours
   keep the green field, and the water still stops and runs. */
.stage-scene > svg, .stage-scene > .cam, .stage-scene > .veil { position: absolute; inset: 0; }
.stage-scene svg { overflow: visible; }
.stage-scene .cam { transform-origin: 0 0; will-change: transform; }
.stage-scene .cam > svg { position: absolute; inset: 0; }
.stage-scene .life { will-change: transform; }
.stage-scene .veil { background: #0B1530; opacity: var(--veil); pointer-events: none; }
.stage-scene .glow { opacity: var(--lights); }
.sky .stars { opacity: var(--stars); }
.sky .sun-disc { fill: var(--sun); }
.sky .clouds { opacity: calc(1 - var(--stars) * .8); }
.sky .cl-shade { fill: var(--cloud-shade); } .sky .cl-body { fill: var(--cloud); } .sky .cl-lit { fill: var(--cloud-lit); }
.sky .wisps { stroke: #FFFFFF; opacity: calc(.6 - var(--stars) * .55); }
.sky .birds { stroke: #2E3440; opacity: 0; }
.land .hill-far { fill: var(--hill-far); } .land .hill-lit { stroke: var(--hill-lit); } .land .hill-near { fill: var(--hill-near); }
.land .treeline { fill: var(--treeline); } .land .far-trunk { fill: var(--palm-trunk); }
.land .far-field { fill: var(--far-field); } .land .far-rows { stroke: var(--far-rows); stroke-width: 1.3; }
.land .pt { fill: var(--palm-trunk); } .land .pr { fill: none; stroke: var(--palm-ring); stroke-width: 1.2; }
.land .p1 { fill: var(--palm-leaf); } .land .p2 { fill: var(--palm-leaf-2); } .land .p3 { fill: var(--palm-leaf-3); }
.land .pf { fill: none; stroke: var(--palm-fold); stroke-width: .8; } .land .ps { fill: none; stroke: var(--palm-stalk); stroke-width: 1.5; }
.land .pd { fill: var(--palm-dead); } .land .pc { fill: var(--palm-trunk); }
.land .ct { fill: var(--coco-trunk); } .land .cr { fill: none; stroke: var(--coco-ring); stroke-width: 1; }
.land .cf1, .land .cf2 { fill: none; stroke-width: 2.1; stroke-linecap: round; } .land .cf1 { stroke: var(--frond); } .land .cf2 { stroke: var(--frond-2); }
.land .cn { fill: var(--coconut); }
.land .bark { fill: var(--bark); } .land .n1 { fill: var(--neem); } .land .n2 { fill: var(--neem-lit); } .land .n3 { fill: var(--neem-dark); }
.land .pole { fill: var(--pole); } .land .pole-shade { fill: var(--pole-shade); } .land .arm { fill: var(--arm); } .land .insulator { fill: var(--insulator); }
.land .wire { stroke: var(--wire); stroke-width: 1.5; }
.land .yard { fill: var(--yard); } .land .yard-patch { fill: var(--grass); opacity: .55; } .land .grass { stroke: var(--grass-2); stroke-width: 1.5; stroke-linecap: round; }
.land .ground-shadow { fill: #000; opacity: .13; }
.land .plinth, .land .step { fill: var(--plinth); } .land .plinth-front, .land .step-front { fill: var(--plinth-front); }
.land .wall, .land .parapet { fill: var(--wall); } .land .wall-shade, .land .parapet-shade { fill: var(--wall-shade); }
.land .dado { fill: var(--dado); } .land .dado-shade { fill: var(--dado-shade); } .land .dado-line { fill: var(--dado-line); }
.land .coping, .land .slab, .land .sunshade, .land .sill { fill: var(--slab); } .land .slab-shadow, .land .sunshade-shadow { fill: var(--slab-shadow); opacity: .5; }
.land .tank-stand { fill: var(--slab-shadow); } .land .tank { fill: var(--tank); } .land .tank-ridge { fill: none; stroke: var(--tank-ridge); stroke-width: 1.4; } .land .tank-lid { fill: var(--tank-ridge); }
.land .dish { fill: #ECEDED; stroke: #A3A9AD; stroke-width: 1; } .land .dish-pole, .land .dish-arm { fill: none; stroke: #6B7277; stroke-width: 1.6; } .land .dish-lnb { fill: #6B7277; }
.land .frame { fill: var(--frame); } .land .glass { fill: var(--glass); } .land .grill { fill: none; stroke: var(--grill); stroke-width: 1.8; }
.land .door { fill: var(--door-wood); } .land .door-line { stroke: var(--frame); stroke-width: 1.4; } .land .panel { fill: var(--door-panel); } .land .knob { fill: #D9B45B; }
.land .bulb { fill: #E3DCCF; } .land .bulb-cap { fill: #6B7277; } .land .meter { fill: #8A9095; }
.land .tulasi-base, .land .tulasi-top { fill: #D9D0C2; } .land .tulasi-body { fill: var(--tulasi); } .land .tulasi-band { fill: var(--tulasi-band); } .land .basil { fill: var(--basil); }
.land .muggu { stroke: #FFFFFF; stroke-width: 1.4; opacity: .9; } .land .muggu circle { fill: #FFFFFF; }
.land .straw { fill: var(--straw); } .land .straw-top { fill: var(--straw-shade); } .land .straw-lines { stroke: var(--straw-shade); stroke-width: 1.4; }
.land .bf { fill: var(--buffalo); } .land .bf-lit { stroke: var(--buffalo-lit); stroke-width: 3; stroke-linecap: round; } .land .horn { stroke: #CFC6B4; stroke-width: 3.2; stroke-linecap: round; }
.land .tail { stroke: var(--buffalo); stroke-width: 2.4; stroke-linecap: round; } .land .rope { stroke: #B89B6A; stroke-width: 1.4; } .land .peg { fill: #7A5B3A; }
.land .brick-wall { fill: var(--brick); } .land .brick-lines { fill: url(#bricks); } .land .brick-shade { fill: #000; opacity: .2; }
.land .sheet { fill: var(--sheet); } .land .sheet-ribs { stroke: var(--sheet-dark); stroke-width: 1.4; } .land .steel { fill: var(--steel); } .land .steel-line { stroke: var(--steel-dark); stroke-width: 1.2; }
.land .starter { fill: var(--starter); } .land .btn-red { fill: #C8352E; } .land .btn-green { fill: #2E9A4E; } .land .starter-slot { fill: #3E464B; }
.land .motor-base { fill: #3E464B; } .land .motor { fill: var(--motor); } .land .motor-fins { stroke: var(--motor-dark); stroke-width: 1.6; } .land .motor-cap { fill: var(--motor-dark); }
.land .casing { fill: var(--casing); } .land .casing-hub, .land .flange { fill: var(--casing-dark); }
.land .pipe { fill: none; stroke: var(--pipe); stroke-width: 7; stroke-linejoin: round; } .land .pipe-lite { stroke: var(--pipe-lite); stroke-width: 2; }
.land .cistern { fill: var(--cement); } .land .cistern-side { fill: var(--cement-shade); } .land .cistern-top { fill: var(--cement-top); }
.land .cistern-inner, .land .cistern-outlet { fill: #5F5A52; }
.land .road { fill: var(--road); } .land .road-track { stroke: var(--road-track); stroke-width: 3; opacity: .75; }
.land .field { fill: var(--plot); } .land .plot-a { fill: var(--plot-a); } .land .plot-b { fill: var(--plot-b); }
.land .tuft, .land .row-line { fill: none; stroke: var(--paddy); stroke-linecap: round; } .land .row-line { stroke-width: 1.2; }
.land .sheen { stroke: var(--sheen); stroke-width: 2; stroke-linecap: round; opacity: calc((1 - var(--dry)) * .55); }
.land .cracks { stroke: var(--crack); stroke-width: 1.3; stroke-linejoin: round; opacity: calc(var(--dry) * .75); }
.land .bund { fill: var(--bund); } .land .bund-lit { stroke: var(--bund-lit); stroke-width: 1.5; }
.land .bank { fill: var(--bank); } .land .channel { fill: var(--channel); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .land .field { fill: color-mix(in srgb, var(--plot-dry) calc(var(--dry) * 100%), var(--plot)); }
  .land .plot-a { fill: color-mix(in srgb, var(--plot-dry) calc(var(--dry) * 100%), var(--plot-a)); }
  .land .plot-b { fill: color-mix(in srgb, var(--plot-dry-b) calc(var(--dry) * 100%), var(--plot-b)); }
  .land .tuft, .land .row-line { stroke: color-mix(in srgb, var(--paddy-dry) calc(var(--dry) * 100%), var(--paddy)); }
  .land .channel { fill: color-mix(in srgb, var(--channel) calc(var(--water) * 100%), var(--channel-dry)); }
  .sky .cl-shade { fill: color-mix(in srgb, var(--sky1) 36%, #E6EBF2); }
  .sky .cl-body { fill: color-mix(in srgb, var(--sky2) 14%, #FFFFFF); }
}
.life .water-in, .life .cistern-water { fill: var(--water-c); opacity: var(--water); }
.life .flow { stroke: var(--water-lite); opacity: calc(var(--water) * .9); animation: flow 1.3s linear infinite; }
.life .fall { stroke: var(--water-c); opacity: var(--water); }
.life .stream { stroke: var(--water-lite); stroke-dasharray: 4 5; opacity: calc(var(--water) * .9); animation: stream .4s linear infinite; }
.life .splash { fill: var(--water-lite); opacity: calc(var(--water) * .9); }
.life .hum { stroke: var(--hum); opacity: var(--water); }
.life .shadow { fill: #000; opacity: .18; }
@keyframes flow { to { stroke-dashoffset: calc(var(--len, 44) * -1); } }
@keyframes stream { to { stroke-dashoffset: -9; } }
.life .pose { display: none; }
.stage[data-pose="stand"] .pose-stand, .stage[data-pose="call"] .pose-call, .stage[data-pose="phone"] .pose-phone, .stage[data-pose="give"] .pose-give { display: inline; }
.life .customer-at, .life .partner-at, .life .bike-at { opacity: 0; }
.life .wheel { transform-box: fill-box; transform-origin: center; }
.life .glowscreen { fill: #BFE3FF; } .life .headlight { fill: #FFE7A3; }
.glow .litwin { fill: #FFC86B; } .glow .litgrill { fill: none; stroke: #5A3E2A; stroke-width: 1.8; } .glow .bulb-on { fill: #FFE39A; }

/* The real map, with his request's ripple and Srinu's road on it */
.map .route { fill: none; stroke: var(--logo); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.map .ripple { fill: none; stroke: var(--logo); stroke-width: 4; opacity: 0; }
.map .reach { fill: none; stroke: var(--logo); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; opacity: 0; }
.map .v { fill: #6E6E6E; stroke: #fff; stroke-width: 2.5; }
.map .v.lit { transition: fill .3s; }
.map .v.lit.on { fill: var(--logo); }
.map .home-dot { fill: var(--orange); stroke: #fff; stroke-width: 5; }
.map .label { font: 700 25px var(--body); fill: #3F3F3F; paint-order: stroke; stroke: rgba(255, 255, 255, .92); stroke-width: 7px; stroke-linejoin: round; }
html[lang="te"] .map .label { font-family: var(--te-body); font-weight: 600; }
.map .label.strong { font-size: 30px; fill: var(--charcoal); }
.map .bike-dot { opacity: 0; }
.map .bike-dot circle { fill: var(--orange); stroke: #fff; stroke-width: 4; }
.map .bike-dot path { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* The calls: the newest comes in at the bottom, like a chat, and pushes the older one up */
.calls { --slot: 76px; position: absolute; left: var(--page-margin); right: var(--page-margin); bottom: 30px; z-index: 3; height: calc(var(--slot) * 2); max-width: 420px; margin-inline: auto; pointer-events: none; }
.call { position: absolute; left: 0; right: 18px; bottom: 0; display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px 11px 10px; background: #fff; border-radius: var(--radius-s); box-shadow: var(--lift); opacity: 0; will-change: transform, opacity; }
.call:nth-child(even) { left: 18px; right: 0; }
.call-who { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--on-tint); font: 700 .875rem/1 var(--body); flex: none; }
html[lang="te"] .call-who { font-family: var(--te-body); }
.call-ic { width: 32px; text-align: center; font-size: 24px; color: var(--red); }
.call-said { display: grid; gap: 1px; min-width: 0; }
.call-from { color: var(--ink-quiet); font: 600 .8125rem/1.25 var(--body); }
.call-say { color: var(--ink); font: 500 1rem/1.35 var(--body); }
html[lang="te"] :is(.call-from, .call-say) { font-family: var(--te-body); }
html[lang="te"] .call-say { font-size: 1.0625rem; line-height: 1.5; }

/* The app's cards, large, rising from the bottom of the picture */
.float { position: absolute; left: var(--page-margin); right: var(--page-margin); bottom: 30px; z-index: 4; max-width: 420px; margin-inline: auto; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.f-offers { display: grid; gap: 8px; }
.fc { background: #fff; border-radius: var(--radius); box-shadow: var(--lift); padding: 14px 16px; }
.fc-row { display: flex; align-items: center; gap: 12px; }
.tile { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--tint); color: var(--on-tint); font: 700 1.125rem/1 var(--title); }
html[lang="te"] .tile { font-family: var(--te-title); font-weight: 400; }
.fc-title { color: var(--charcoal); font: 700 1.25rem/1.3 var(--title); }
html[lang="te"] .fc-title { font-family: var(--te-title); font-weight: 400; font-size: 1.3rem; line-height: 1.45; }
.fc-req { display: grid; gap: 8px; }
.fc-fact { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1rem; }
.fc-fact .ms { color: var(--ink-quiet); font-size: 22px; }
.fc-btn { display: grid; place-items: center; height: 52px; margin-top: 4px; border-radius: 999px; background: var(--orange); color: #fff; font: 600 1.0625rem/1 var(--title); transition: transform .2s, box-shadow .2s; }
html[lang="te"] .fc-btn { font-family: var(--te-title); font-weight: 400; font-size: 1.15rem; }
.fc-btn.pressed { transform: scale(.96); box-shadow: 0 0 0 8px rgba(172, 80, 0, .2); }
.fc-offer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; transition: box-shadow .3s; }
.avatar { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--tint); color: var(--orange); font: 700 1.125rem/1 var(--title); }
html[lang="te"] .avatar { font-family: var(--te-title); font-weight: 400; }
.off-who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; min-width: 0; }
.off-who b { color: var(--charcoal); font: 700 1.125rem/1.3 var(--title); }
html[lang="te"] .off-who b { font-family: var(--te-title); font-weight: 400; font-size: 1.2rem; }
.off-id { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: .875rem; font-weight: 600; }
.off-id .ms { font-size: 17px; }
.off-price { grid-column: 2 / -1; color: var(--charcoal); font: 700 1.25rem/1.3 var(--title); }
html[lang="te"] .off-price { font-family: var(--te-title); font-weight: 400; font-size: 1.2rem; line-height: 1.45; }
.off-booked { display: none; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--green-box); color: var(--on-green-box); font-size: .875rem; font-weight: 700; white-space: nowrap; }
.off-booked .ms { color: var(--green); font-size: 18px; }
.fc-offer.picked { box-shadow: 0 0 0 3px var(--orange), var(--lift); }
.fc-offer.picked .off-booked { display: inline-flex; animation: pop .4s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.fc-notif { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.notif-icon { width: 40px; height: 40px; flex: none; padding: 5px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.notif-words { display: grid; gap: 1px; min-width: 0; }
.notif-app { color: var(--ink-quiet); font: 600 .8125rem/1.3 var(--body); }
.notif-words b { color: var(--charcoal); font: 700 1.0625rem/1.3 var(--title); }
html[lang="te"] .notif-words b { font-family: var(--te-title); font-weight: 400; font-size: 1.125rem; line-height: 1.45; }
.notif-sub { color: var(--ink-quiet); font-size: .9375rem; }
.fc-code { display: grid; gap: 12px; }
.digits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.digits span { display: grid; place-items: center; height: 64px; border: 1.5px solid var(--edge); border-radius: 14px; background: #FCFBF9; color: var(--charcoal); font: 700 2rem/1 var(--title); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1.3); }
.digits span.on { opacity: 1; transform: none; }
.fc-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-s); background: var(--red-box); color: var(--on-red-box); font-size: .9375rem; line-height: 1.45; }
html[lang="te"] .fc-warn { line-height: 1.6; }
.fc-warn .ms { color: var(--red); font-size: 22px; }
.fc-done { display: flex; align-items: center; gap: 14px; }
.done-tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--green-box); color: var(--green); flex: none; }
.done-tile .ms { font-size: 30px; }

/* The words: the opening, then a caption for each scene, then the night */
.intro { min-height: calc(100vh - var(--top)); min-height: calc(100svh - var(--top)); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px var(--page-margin) 16px; }
.intro-in { display: grid; gap: 14px; justify-items: start; max-width: 600px; }
/* A soft light around the opening's words keeps them sharp over a palm or a cloud */
.intro h1, .intro .lede { text-shadow: 0 0 14px rgba(255, 250, 244, .95), 0 0 3px rgba(255, 250, 244, .9); }
.place { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .78); color: var(--charcoal); font: 700 .875rem/1.3 var(--body); }
html[lang="te"] .place { font-family: var(--te-body); font-weight: 600; font-size: .9375rem; }
.place .ms { color: var(--orange); font-size: 18px; }
.intro h1 { font-size: clamp(2.25rem, 10.5vw, 4.25rem); line-height: 1.06; letter-spacing: -.025em; }
html[lang="te"] .intro h1 { font-size: clamp(2.1rem, 9.6vw, 4rem); line-height: 1.42; letter-spacing: 0; }
.lede { color: var(--charcoal); font: 600 1.125rem/1.45 var(--body); max-width: 30ch; }
html[lang="te"] .lede { font-family: var(--te-body); font-weight: 500; font-size: 1.1875rem; line-height: 1.6; }
.svc { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.svc li { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px 0 10px; border-radius: 999px; background: #fff; color: var(--charcoal); box-shadow: 0 6px 16px -10px rgba(20, 24, 40, .5); font: 700 .9375rem/1 var(--body); }
html[lang="te"] .svc li { font-family: var(--te-body); font-weight: 600; font-size: 1rem; }
.svc .ms { color: var(--orange); font-size: 22px; }
.svc.folded .extra { display: none; }
.svc .more-li { padding: 0; background: none; box-shadow: none; }
.more-btn { display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--tint); color: var(--on-tint); font: 700 .9375rem/1 var(--body); cursor: pointer; }
html[lang="te"] .more-btn { font-family: var(--te-body); font-weight: 600; font-size: 1rem; }
.more-btn .ms { font-size: 20px; color: var(--orange); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.partner-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 16px -10px rgba(20, 24, 40, .5); color: var(--on-tint); font: 700 1rem/1.2 var(--body); text-decoration: none; }
html[lang="te"] .partner-link { font-family: var(--te-body); font-weight: 600; }
.partner-link .ms { font-size: 20px; color: var(--orange); }
.cue { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; margin-inline: auto; border-radius: 999px; background: rgba(255, 255, 255, .78); color: var(--on-tint); font: 700 .9375rem/1.2 var(--body); }
html[lang="te"] .cue { font-family: var(--te-body); font-weight: 600; }
.cue .ms { color: var(--orange); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* Each scene is as long as its beats, about half a screen of scrolling for each change */
.scene-step { --beat: 48svh; position: relative; height: calc(var(--beats, 3) * 48vh); height: calc(var(--beats, 3) * var(--beat)); }
/* The last scene plays out fully before the night's closing words come up over it */
.scene-step.last { height: calc(var(--beats, 3) * 48vh + 100vh - var(--top)); height: calc(var(--beats, 3) * var(--beat) + 100lvh - var(--top)); }
.scene-text { position: sticky; top: calc(var(--top) + 12px); max-width: 520px; margin-inline: var(--page-margin); display: grid; gap: 4px; padding: 12px 18px 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--lift); will-change: opacity, transform; }
/* With the script running, the captions hold still at the top while their scene plays */
.story.live .scene-text { position: fixed; top: calc(var(--top) + 12px); left: var(--page-margin); right: var(--page-margin); margin: 0 auto; z-index: 3; opacity: 0; pointer-events: none; }
.cap-time { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-quiet); font: 700 .875rem/1.4 var(--body); font-variant-numeric: tabular-nums; }
html[lang="te"] .cap-time { font-family: var(--te-body); font-weight: 600; }
.cap-time .ms { color: var(--orange); font-size: 18px; }
.story:not(.live) .cap-time { display: none; }
.scene-text h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.01em; }
html[lang="te"] .scene-text h2 { font-size: 1.5rem; line-height: 1.45; }
.cap-body { font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }
html[lang="te"] .cap-body { line-height: 1.65; }

/* The night: the closing words over the house with its lights on */
.end { position: relative; min-height: calc(100vh - var(--top)); min-height: calc(100lvh - var(--top)); display: grid; align-content: center; padding: 72px var(--page-margin) 80px; color: var(--night-ink); background: linear-gradient(180deg, rgba(11, 17, 36, 0) 0%, rgba(11, 17, 36, .55) 22%, rgba(11, 17, 36, .78) 100%); }
.end-in { display: grid; gap: 22px; justify-items: center; text-align: center; max-width: 720px; margin-inline: auto; }
.end-mark { width: min(64vw, 320px); height: auto; overflow: visible; --wm-neo: #F4F4F4; }
.end h2 { color: #fff; font-size: clamp(2rem, 8.4vw, 3.6rem); line-height: 1.12; letter-spacing: -.02em; }
html[lang="te"] .end h2 { font-size: clamp(1.9rem, 8vw, 3.4rem); line-height: 1.45; }
.promises { display: grid; gap: 10px; width: 100%; }
@media (min-width: 760px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promises li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-weight: 700; text-align: left; }
html[lang="te"] .promises li { font-weight: 600; line-height: 1.5; }
.promises .ms { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 176, 102, .16); color: var(--glow); font-size: 22px; }
.apps { display: grid; gap: 10px; width: 100%; max-width: 620px; }
@media (min-width: 640px) { .apps { grid-template-columns: 1fr 1fr; } }
.app-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: #fff; color: var(--ink); text-align: left; text-decoration: none; }
.app-icon { width: 46px; height: 46px; flex: none; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.app-words { display: grid; gap: 1px; min-width: 0; flex: 1; }
.app-words b { color: var(--charcoal); font: 700 1.125rem/1.25 var(--title); }
.app-words span { color: var(--ink-quiet); font-size: .9375rem; }
.app-go { color: var(--orange); font-size: 24px; }
.soon.on-dark { background: rgba(255, 255, 255, .12); color: #fff; }
.end-note { color: var(--night-quiet); font-size: .9375rem; max-width: 46ch; }
.glint { fill: none; stroke: #FFA552; stroke-width: 3.8; stroke-linecap: round; stroke-dasharray: 18 125; stroke-dashoffset: 18; opacity: 0; }
.end-mark.play .glint { animation: glint 1.6s cubic-bezier(.45, 0, .2, 1) .2s 1 both; }
@keyframes glint { 0% { stroke-dashoffset: 18; opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }

/* On a computer: the words and the cards keep to a column on the left, the people to the right */
@media (min-width: 960px) {
  .intro { position: relative; padding: 0 var(--page-margin); justify-content: center; }
  /* A soft light behind the opening's words, so the trees and the buffalo behind them stay quiet */
  .intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 250, 244, .82) 0%, rgba(255, 250, 244, .62) 34%, rgba(255, 250, 244, 0) 56%); }
  .intro-in { gap: 18px; max-width: 560px; }
  .intro h1 { font-size: clamp(3rem, 5vw, 4.5rem); }
  html[lang="te"] .intro h1 { font-size: clamp(2.8rem, 4.6vw, 4.2rem); }
  .cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); }
  .scene-text { top: calc(var(--top) + 12vh); max-width: 460px; margin-inline: var(--page-margin) 0; padding: 18px 26px 22px; gap: 6px; }
  .story.live .scene-text { top: calc(var(--top) + 12vh); right: auto; width: 460px; margin: 0; }
  .scene-text h2 { font-size: 2.1rem; }
  html[lang="te"] .scene-text h2 { font-size: 2rem; }
  .cap-body { font-size: 1.1875rem; }
  .float, .calls { left: var(--page-margin); right: auto; width: 440px; max-width: none; margin: 0; bottom: 36px; }
  .end-in { gap: 26px; max-width: 940px; }
  .apps { max-width: 700px; }
}

/* ================================================================ Every other page */
.pagehead { padding-block: 40px 20px; background: linear-gradient(180deg, #FFF4EA, #FFFFFF); }
.pagehead .wrap { display: grid; gap: 12px; justify-items: start; }
.pagehead h1 { font-size: clamp(2rem, 8.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.02em; max-width: 20ch; }
html[lang="te"] .pagehead h1 { font-size: clamp(1.9rem, 7.6vw, 3.2rem); line-height: 1.45; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--on-tint); font: 700 .9375rem/1.3 var(--body); }
html[lang="te"] .eyebrow { font-family: var(--te-body); font-weight: 600; }
.eyebrow .ms { color: var(--orange); font-size: 20px; }
.band { padding-block: 24px; }
.band.last { padding-bottom: 72px; }
.section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.2; letter-spacing: -.015em; }
html[lang="te"] .section-title { font-size: clamp(1.55rem, 5.6vw, 2.1rem); line-height: 1.45; }
.section-title.small { font-size: clamp(1.35rem, 5vw, 1.75rem); }
html[lang="te"] .section-title.small { font-size: clamp(1.35rem, 4.8vw, 1.7rem); }
.card { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: var(--radius); background: var(--card); box-shadow: var(--soft-shadow); }
.card h2 { font-size: 1.3rem; line-height: 1.3; }
html[lang="te"] .card h2 { font-size: 1.35rem; line-height: 1.45; }

/* Pricing: one card for customers, one for Seva partners, each led by its number */
.price-cards { display: grid; gap: 14px; }
@media (min-width: 820px) { .price-cards { grid-template-columns: 1fr 1fr; align-items: start; } }
.price-card { display: grid; gap: 16px; padding: 22px 20px; border-radius: var(--radius); background: var(--card); box-shadow: var(--soft-shadow); }
.pc-who { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
html[lang="te"] .pc-who { font-size: 1.3rem; }
.pc-who .ms { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint); color: var(--orange); font-size: 22px; }
.pc-big { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pc-big b { color: var(--charcoal); font: 700 3.25rem/1 var(--title); letter-spacing: -.02em; }
.pc-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--grey); color: var(--charcoal); font-weight: 700; font-size: .9375rem; }
.pc-tag.good { background: var(--green-box); color: var(--on-green-box); }
.pc-lines { display: grid; gap: 10px; }
.pc-lines li, .ways li, .points li, .after li, .needs li { display: flex; align-items: flex-start; gap: 12px; }
.pc-lines .ms { color: var(--green); font-size: 22px; margin-top: 1px; }
html[lang="te"] .pc-lines .ms { margin-top: 3px; }
.ways { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 820px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.ways li { align-items: center; padding: 14px 16px; border-radius: var(--radius-s); background: var(--soft); font-weight: 600; }
.ways .ms { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--orange); font-size: 22px; }
.ways-note { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--on-blue-box); background: var(--blue-box); padding: 12px 16px; border-radius: var(--radius-s); font-weight: 600; }
.ways-note .ms { color: var(--blue); font-size: 22px; }

/* What a Seva partner keeps from a job, and the fee, as one bar */
.money { display: grid; gap: 10px; padding: 16px; border-radius: var(--radius-s); background: var(--soft); }
.money figcaption { color: var(--ink-quiet); font-weight: 600; font-size: .9375rem; }
.money-bar { display: flex; gap: 3px; height: 20px; }
.money-bar i { display: block; border-radius: 6px; }
.money-bar .m-keep { background: var(--green); }
.money-bar .m-fee { background: var(--edge); min-width: 12px; }
.money-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.money-legend span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.money-legend i { width: 12px; height: 12px; border-radius: 4px; }
.money-legend .m-keep i { background: var(--green); }
.money-legend .m-fee i { background: var(--edge); }
.money-legend b { color: var(--charcoal); font: 700 1.25rem/1.2 var(--title); }
.money-note { color: var(--ink-quiet); font-size: .9375rem; line-height: 1.5; }

/* Contact: the taps in the app, then the email, then the address */
.contact-grid { display: grid; gap: 14px; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1.15fr 1fr; align-items: start; } .how-card { grid-row: span 2; } }
.taps { display: grid; gap: 8px; }
.taps li { display: flex; align-items: center; gap: 12px; }
.tap-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--charcoal); color: #fff; font: 700 .9375rem/1 var(--body); flex: none; }
.tap-word { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--tint); color: var(--on-tint); font-weight: 700; }
html[lang="te"] .tap-word { font-weight: 600; }
.taps li:last-child .tap-word { background: var(--orange); color: #fff; }
.after { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.after .ms { color: var(--green); font-size: 22px; }
.tip-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; background: var(--soft); box-shadow: none; }
.tip-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--orange); font-size: 24px; }
.tip-card div { display: grid; gap: 4px; }
.direct { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--soft); color: var(--ink); text-decoration: none; }
a.direct:hover { background: var(--tint); }
.direct > .ms { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 22px; }
.direct-words { display: grid; min-width: 0; }
.direct-words small { color: var(--ink-quiet); font-size: .875rem; }
.direct-words b { color: var(--charcoal); font: 700 1.125rem/1.3 var(--body); }
.officer, .addr-card p { display: flex; align-items: flex-start; gap: 12px; }
.officer .ms, .addr-card .ms { color: var(--ink-quiet); font-size: 22px; margin-top: 1px; }
.officer { color: var(--ink-quiet); font-size: .9375rem; }

/* The Seva partner page */
.partner-head-in { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .partner-head-in { grid-template-columns: minmax(0, 1fr) 400px; } }
.partner-words { display: grid; gap: 14px; justify-items: start; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--green-box); color: var(--on-green-box); font-weight: 700; }
html[lang="te"] .facts li { font-weight: 600; }
.facts .ms { color: var(--green); font-size: 20px; }
.partner-money { padding: 8px; }
.steps3 { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 860px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
.steps3 li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-content: start; padding: 18px; border-radius: var(--radius); background: var(--card); box-shadow: var(--soft-shadow); }
.steps3 .ms { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--tint); color: var(--orange); font-size: 24px; }
.steps3 h3 { font-size: 1.2rem; line-height: 1.3; }
html[lang="te"] .steps3 h3 { font-size: 1.25rem; line-height: 1.45; }
.steps3 p { color: var(--ink-quiet); }
.needs { display: grid; gap: 10px; margin-top: 18px; max-width: 680px; }
.needs li { align-items: center; padding: 14px 16px; border-radius: var(--radius-s); background: var(--soft); font-weight: 600; }
.needs .ms { color: var(--orange); font-size: 24px; }
.more { margin-top: 20px; }
.more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: none; }
.more .ms { font-size: 20px; }

/* About: the founder's letter. One idea to a block, each with its own weight.
   Its own classes all start with letter-, so they never reach another page. */
.letter-page { overflow-x: clip; padding-bottom: 72px; }
.letter-hero { position: relative; isolation: isolate; display: grid; gap: 12px; padding-block: 36px 22px; }
/* The opening's warm band runs from edge to edge of the screen */
.letter-hero::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(180deg, #FFF4EA, #FFFFFF); }
.letter-hero > *, .letter-in > * { max-width: 760px; }
.letter-quote { position: relative; padding-top: 34px; color: var(--charcoal); font: 600 clamp(1.9rem, 8vw, 3.2rem)/1.15 var(--title); letter-spacing: -.02em; text-wrap: balance; }
html[lang="te"] .letter-quote { font-family: var(--te-title); font-weight: 400; font-size: clamp(1.8rem, 7.4vw, 3rem); line-height: 1.45; letter-spacing: 0; }
.letter-quote::before { content: "\201C"; position: absolute; left: -4px; top: -14px; color: var(--logo); font: 700 4.6rem/1 var(--title); }
.letter-in { display: grid; gap: 20px; }
.letter-lead { color: var(--charcoal); font: 600 1.35rem/1.45 var(--title); text-wrap: balance; }
html[lang="te"] .letter-lead { font-family: var(--te-title); font-weight: 400; font-size: 1.4rem; line-height: 1.65; }
/* The two stories are told one after the other, so they stack at every width */
.letter-stories { display: grid; gap: 12px; }
.letter-story { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px; border-radius: var(--radius); background: var(--soft); }
.letter-story .ms, .letter-waits .ms { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--orange); font-size: 24px; }
.letter-p, .letter-story p { font-size: 1.0625rem; line-height: 1.7; }
.letter-uncle { margin: 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--logo); }
.letter-uncle p { color: var(--charcoal); font: 600 1.3rem/1.5 var(--title); }
html[lang="te"] .letter-uncle p { font-family: var(--te-title); font-weight: 400; font-size: 1.3rem; line-height: 1.7; }
.letter-waits { display: grid; gap: 10px; }
@media (min-width: 640px) { .letter-waits { grid-template-columns: 1fr 1fr; } }
.letter-waits p { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: #F0EDE8; color: var(--charcoal); font: 700 1.1rem/1.45 var(--body); }
html[lang="te"] .letter-waits p { font-family: var(--te-body); font-weight: 600; line-height: 1.6; }
.letter-waits .ms { background: #FFFFFF; color: var(--ink-quiet); }
.letter-answer { display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--radius); background: var(--tint); }
.letter-answer p { color: var(--ink); font-size: 1.0625rem; line-height: 1.7; }
.letter-answer .letter-answer-head { color: var(--on-tint); font: 700 1.2rem/1.45 var(--title); }
html[lang="te"] .letter-answer .letter-answer-head { font-family: var(--te-title); font-weight: 400; font-size: 1.25rem; line-height: 1.6; }
.letter-start { margin: 0; display: grid; gap: 10px; }
.letter-map { position: relative; height: 190px; border-radius: 18px 18px 18px 2px; overflow: hidden; background: #EFEDE6; box-shadow: var(--soft-shadow); }
.letter-map img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.letter-pin { position: absolute; left: 50%; top: 60%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 14px rgba(224, 107, 0, .22); }
.letter-start figcaption { display: flex; align-items: flex-start; gap: 8px; color: var(--charcoal); font: 600 1.0625rem/1.55 var(--body); }
html[lang="te"] .letter-start figcaption { font-family: var(--te-body); }
.letter-start figcaption .ms { color: var(--orange); font-size: 22px; margin-top: 1px; }
.letter-credit { color: var(--ink-quiet); font-size: .75rem; }
.letter-closing { margin-top: 6px; color: var(--charcoal); font: 600 1.55rem/1.35 var(--title); text-wrap: balance; }
html[lang="te"] .letter-closing { font-family: var(--te-title); font-weight: 400; font-size: 1.5rem; line-height: 1.65; }
.letter-sign { display: flex; align-items: center; gap: 10px; color: var(--ink-quiet); font-weight: 700; }
.letter-sign-mark { width: 30px; height: 30px; }
.letter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.letter-actions .partner-link { box-shadow: 0 0 0 1px var(--line); }
@media (min-width: 960px) {
  .letter-hero { padding-block: 56px 28px; }
  .letter-quote { padding-top: 44px; }
  .letter-quote::before { font-size: 6rem; top: -20px; }
  .letter-in { gap: 24px; }
}
/* On a computer the opening stays on the left while the letter is read on the right: the page is
   full from edge to edge, and the letter's lines stay short enough to read */
@media (min-width: 1100px) {
  .letter-page { background: linear-gradient(180deg, #FFF4EA, #FFFFFF 520px); }
  .letter-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; }
  .letter-hero { position: sticky; top: var(--top); }
  /* The opening's words grow with the screen, up to their full size from about 1440px */
  .letter-quote { font-size: clamp(2.2rem, 3.56vw, 3.2rem); }
  html[lang="te"] .letter-quote { font-size: clamp(2.1rem, 3.34vw, 3rem); }
  .letter-hero::before { display: none; }
  .letter-in { padding-top: 56px; }
  .letter-in > * { max-width: none; }
  .letter-answer-head { text-wrap: balance; }
}

/* Written pages: their main points first, the rules in full folded below */
.doc-in { display: grid; gap: 22px; }
.doc-in > * { max-width: 820px; }
/* Grid children may shrink below their widest line, so a wide table scrolls in its own box */
:is(.doc-in, .full, .md, .price-cards, .contact-grid, .about, .partner-head-in) > * { min-width: 0; }
.points { display: grid; gap: 10px; }
.points li { align-items: center; padding: 14px 16px; border-radius: var(--radius-s); background: var(--soft); font-weight: 600; color: var(--charcoal); }
html[lang="te"] .points li { font-weight: 500; }
.points .ms { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--orange); font-size: 22px; }
.taps-card .no-app { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.taps-card .no-app .ms { color: var(--orange); font-size: 22px; }
.full { display: grid; gap: 12px; }
.full-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.full-head h2 { font-size: 1.35rem; }
html[lang="te"] .full-head h2 { font-size: 1.4rem; }
.open-all { min-height: 40px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 999px; background: #fff; color: var(--charcoal); font-weight: 700; font-size: .9375rem; cursor: pointer; }
.full-note { display: flex; align-items: center; gap: 8px; color: var(--ink-quiet); font-size: .9375rem; }
.full-note .ms { font-size: 20px; }
.md { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 8px; font-family: var(--body); font-size: 1rem; line-height: 1.6; }
.md > p { line-height: 1.65; }
.sec { border-radius: var(--radius-s); background: #fff; border: 1px solid var(--line); scroll-margin-top: calc(var(--top) + 16px); }
.sec summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; color: var(--charcoal); font: 700 1.0625rem/1.35 var(--title); cursor: pointer; }
.sec summary::-webkit-details-marker { display: none; }
.sec summary .ms { color: var(--orange); font-size: 26px; transition: transform .2s; }
.sec[open] summary .ms { transform: rotate(180deg); }
.sec[open] summary { border-bottom: 1px solid var(--line); }
.sec-body { padding: 4px 16px 18px; }
.sec-body h3 { font-family: var(--title); font-size: 1.05rem; margin: 18px 0 6px; }
.sec-body p, .sec-body li { line-height: 1.65; }
.sec-body p + p { margin-top: 10px; }
.sec-body ul, .sec-body ol { padding-left: 1.3em; margin: 10px 0; }
.sec-body ul { list-style: disc; } .sec-body ol { list-style: decimal; }
.sec-body li + li { margin-top: 6px; }
.md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 14px 0; font-size: .9375rem; }
.md th, .md td { min-width: 9.5em; text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.md :is(th, td):first-child { min-width: 13em; }
.md th { background: var(--grey); }
.doc-updated { color: var(--ink-quiet); font-size: .9375rem; }

/* The footer: the brand, two rows of links, and the business in three short lines */
.foot { background: var(--soft); border-top: 1px solid var(--line); padding-block: 32px 28px; font-size: .9375rem; }
html[lang="te"] .foot { font-size: 1rem; }
.foot-in { display: grid; gap: 18px; }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.foot-mark { height: 24px; width: auto; }
.lang-foot { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 999px; color: var(--charcoal); font-weight: 700; text-decoration: none; }
.lang-foot .ms { font-size: 20px; color: var(--orange); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; background: #fff; color: var(--charcoal); font-weight: 700; text-decoration: none; box-shadow: 0 0 0 1px var(--line); }
.foot-links.small a { min-height: 36px; padding: 0 10px; background: none; box-shadow: none; color: var(--ink-quiet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.foot-links a:hover { color: var(--orange); }
.foot-biz { display: grid; gap: 4px; color: var(--ink-quiet); font-size: .875rem; line-height: 1.6; }
html[lang="te"] .foot-biz { font-size: .9375rem; }

/* The page for a wrong address */
.notfound { padding-block: 72px 96px; }
.notfound .wrap { display: grid; gap: 16px; justify-items: start; }
.notfound .wrap > * { max-width: 640px; }
.nf-mark { width: 64px; height: 64px; }
.notfound h1 { font-size: clamp(2rem, 8vw, 3rem); }
.nf-actions { display: grid; gap: 10px; width: 100%; max-width: 360px; margin-top: 8px; }

/* Movement only where the phone allows it. Without it, every state still shows, at once. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .life .flow, .life .stream { stroke-dasharray: none; }
}