/* saafarsaathi.in — the page that says what the app is. Same palette, same typefaces, same three
   hues as the app's home, so what the reader sees here is what opens on the phone. */

:root {
  --ink: #10282c;
  /* The logo's orange, as the warm accent: the flight trail, a highlight. Never a button. */
  --marigold: #e8871e;
  --marigoldSoft: #fdf3e3;
  --marigoldText: #9a5b10;
  --onMarigold: #231403;
  /* The brand: a deep teal, the one colour of a button and of the lit place. White type on it. */
  --teal: #05504a;
  --onTeal: #ffffff;
  /* The one red in the product, and it says one thing: this needs a signal. */
  --needsNet: #b3261e;
  --tealSoft: #e7f5f0;
  --tealText: #04463f;
  --sand: #f1f5f7;
  --card: #ffffff;
  --line: #e1e8eb;
  --muted: #566670;
  /* The four hues, each as the app wears them: a fill, the cream type that stands on it, the
     same hue as ink on a light ground, and its soft tint. */
  --food: #b8501f;
  --onFood: #fff6ee;
  --foodText: #a5441a;
  --foodSoft: #fce9de;
  --go: #2f6db5;
  --onGo: #f2f8ff;
  --goText: #1f5a9e;
  --goSoft: #e1edfb;
  --know: #4b3fa0;
  --onKnow: #f3f1ff;
  --knowText: #41358a;
  --knowSoft: #ece9fa;
  /* बोलना's hue, the same one the app's fourth block wears (decision 020). */
  --speak: #8a2d68;
  --onSpeak: #fdecf5;
  --speakSoft: #f9e6f0;
  --speakText: #7a2459;
  /* The buttons that say WhatsApp wear a deep green: white type on it is 5:1, where on the bright
     green of the corner icon it is 2:1. The icon keeps WhatsApp's own colour. */
  --wa: #1c7f4f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: 'Mukta', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--sand);
  color: var(--ink);
  line-height: 1.5;
}

/* Two languages in the markup, one on the page. */
html[lang='hi'] .en,
html[lang='en'] .hi {
  display: none;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}
a {
  color: inherit;
}

/* ---- header ------------------------------------------------------------------------- */
.top {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgb(241 245 247 / 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}
/* The lockup is the one place on this page where the trail is drawn, so it is set at a size
   where a tapered arc and a paper plane are drawings rather than lint (decision 021). At 20px
   they were neither: three orange pixels over the tail of the word. The footer, at 17px, does
   not carry the trail at all — same rule, the other way round. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 31px);
  white-space: nowrap;
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
/* The lockup, the same one the app carries: one word, one capital, in the app's own face, with
   the flight trail over its second half (decision 021). Never translated, so there is no
   Devanagari caption beside it any more. */
.wordmark {
  position: relative;
  display: inline-block;
  font-family: 'Quicksand Wordmark', 'Mukta', sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
/* The full lockup, the same drawing the app carries (decision 021): a tapered crescent and a
   paper plane over the tail of the word. This page and the app's landing screen are the two
   places it appears at a size where it is a drawing rather than a smudge — so when one changes,
   the other does, and they are compared side by side before either ships. */
.wordmark-full {
  padding-inline-end: 0.2em;
}
.wordmark-trail {
  position: absolute;
  right: -0.06em;
  bottom: 0.78em;
  width: 2.62em;
  height: 0.62em;
  overflow: visible;
  pointer-events: none;
}
.wordmark-trail-line {
  fill: var(--marigold);
  opacity: 0.85;
}
.wordmark-plane {
  fill: var(--marigold);
}
.wordmark-plane-fold {
  fill: var(--marigoldText);
  opacity: 0.55;
}
/* The footer carries it too, quieter: whose page this was, at the bottom of it. It wraps rather
   than running off a 320px screen — the mark, the name and the line are three things and a
   narrow phone is allowed to stack them. */
.brand-foot {
  font-size: 17px;
  flex-wrap: wrap;
  max-width: 100%;
}
.brand-foot img {
  width: 26px;
  height: 26px;
}
.top .grow {
  flex: 1;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-go {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--onTeal);
}
.btn-big {
  min-height: 56px;
  padding: 0 26px;
  font-size: 18px;
  border-radius: 18px;
}

/* ---- hero --------------------------------------------------------------------------- */
.hero {
  padding: 56px 0 40px;
  position: relative;
  overflow: hidden;
}
/* A warm bloom behind the phone and a cool one under the words: the logo's orange and the brand
   teal, soft enough to be felt rather than seen. */
.hero::before {
  content: '';
  position: absolute;
  inset: -10% -20% auto auto;
  width: 60vw;
  max-width: 720px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(232 135 30 / 0.22), rgb(232 135 30 / 0));
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  left: -15%;
  bottom: -30%;
  width: 50vw;
  max-width: 560px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(5 80 74 / 0.14), rgb(5 80 74 / 0));
  pointer-events: none;
}
.hero .wrap {
  position: relative;
}
.hero .phone {
  transform: rotate(-3deg);
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-areas:
    'lead phone'
    'rest phone';
  gap: 0 40px;
  align-items: center;
}
.hero-lead {
  grid-area: lead;
}
.hero-rest {
  grid-area: rest;
}
.hero .phone {
  grid-area: phone;
}
h1 {
  font-family: 'Anek Devanagari', 'Mukta', sans-serif;
  font-weight: 600;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05;
  margin: 14px 0 12px;
  letter-spacing: -0.01em;
}
/* The hero says who it is for before what it does (the owner, 2 October): a reader from an ad
   gives the page a second, and the pill that used to say "for Indian travellers" was the line they
   skipped. The question is the headline; the two answers under it are smaller, so the question is
   what lands. Three catchwords carry colour, no more: the four tiles under them already spend four
   hues, and a line where every word is coloured has none that stands out. Each takes its hue's
   text colour, the deep one, which clears 4.5:1 on the page. */
.headline-turn {
  display: block;
  font-size: 0.6em;
  line-height: 1.2;
  margin-top: 0.35em;
  color: var(--ink);
}
.hl-place {
  color: var(--foodText);
}
.hl-use {
  color: var(--goText);
}
/* "Too" is the point of the third line: the app is for the traveller with a signal as well, and
   the offline promise is the reason to keep it — so the promise is underlined, not shouted. */
.hl-net {
  color: var(--foodText);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
/* The three words as three small tiles: the app's home blocks in miniature, each with its own
   icon, set a touch askew as if placed by hand. The brand as a mark, not a line of type. */
/* Four tiles now, not three (18 September). Two and two: four across is wider than the column
   and three-then-one reads as an accident rather than a set. */
h1 .three {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px;
  margin-top: 16px;
  font-size: 0.62em;
  line-height: 1;
}
/* Anchors since 19 September — each tile jumps to the band that explains it, which is what its
   hover lift had been promising all along. The underline that came with becoming a link is not
   wanted: these are blocks, not words in a sentence. */
.tile {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  padding: 0.22em 0.5em 0.3em 0.42em;
  border-radius: 0.42em;
  color: #fff;
  box-shadow: 0 10px 22px rgb(16 40 44 / 0.16);
  transition: transform 0.2s ease;
}
.tile svg {
  width: 0.78em;
  height: 0.78em;
  opacity: 0.92;
  flex-shrink: 0;
}
.tile-food {
  background: var(--food);
  color: var(--onFood);
  transform: rotate(-2.5deg);
}
.tile-go {
  background: var(--go);
  color: var(--onGo);
  transform: rotate(1.5deg) translateY(2px);
}
.tile-know {
  background: var(--know);
  color: var(--onKnow);
  transform: rotate(-1deg);
}
.tile-speak {
  background: var(--speak);
  color: var(--onSpeak);
  transform: rotate(2deg) translateY(1px);
}
.tile:hover {
  transform: rotate(0) scale(1.03);
}

/* A phone, drawn in CSS, with a real screenshot of the app inside it. */
.phone {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 390 / 780;
  border-radius: 36px;
  border: 10px solid var(--ink);
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 30px 60px rgb(16 40 44 / 0.22);
  margin: 0 auto;
}
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.phone-sm {
  width: 240px;
  border-width: 8px;
  border-radius: 30px;
}

/* The film, tapped to play — never on its own, a traveller's data is theirs. */
.watch {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.watch .sub {
  margin-left: auto;
  margin-right: auto;
}
/* ---- the hero's four statements ---------------------------------------------------------- */
/* All four, at once, under the four tiles and in the same order. Each leads in its own pillar's
   colour so the line and the tile above it are visibly the same thing. */
.turns {
  display: grid;
  gap: 18px;
  margin: 22px 0 22px;
  max-width: 30em;
}
/* A dot in the pillar's own colour, so four claims read as four rather than as a paragraph —
   and so the eye can tell them apart from the quiet row of reassurance under them, which is a
   list of the same shape doing an entirely different job. */
.turn {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}
/* A signal, not the pillar's glyph (owner, 19 September). The four tiles directly above carry
   those drawings already, so repeating them here said nothing new and left the one fact that
   matters unsaid: three of these work with the signal off, and बोलना does not. Said in an icon
   rather than in a rider, because the page is text-heavy enough. */
.turn-icon {
  width: 24px;
  height: 24px;
  margin-top: 0.12em;
}
/* Crossed out and in the app's own offline teal: this needs nothing from the network. */
.turn-icon-off {
  color: var(--teal);
}
/* The one claim that does. Red is used nowhere else in the product — it is here because it is
   the only mark on the page saying "this one stops working in a basement in Karama". */
.turn-icon-on {
  color: var(--needsNet);
}
.turn b {
  font-weight: 700;
}
.turn-food {
  color: var(--foodText);
}
.turn-go {
  color: var(--goText);
}
.turn-know {
  color: var(--knowText);
}
.turn-speak {
  color: var(--speakText);
}
/* The claim is in the pillar's colour; the rest of the sentence is ordinary ink. */
.turn > span {
  color: var(--ink);
}
.turn b {
  color: inherit;
}
.turn-food b {
  color: var(--foodText);
}
.turn-go b {
  color: var(--goText);
}
.turn-know b {
  color: var(--knowText);
}
.turn-speak b {
  color: var(--speakText);
}
/* Reassurance, not argument: one small muted row, two lines, no ticks. It answers "what does it
   cost me" and "how do I install it" — the two questions the four claims above never touch. */
.reassure {
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
  max-width: 32em;
}
.reassure p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
/* बोलना is the one that needs a signal. A star and a small line say so where a reader who cares
   will look, without turning a claim into a caveat; the section further down explains it fully. */
.star {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  color: var(--speakText);
}
/* Fine print, and no more than that. It is here because the sentence above it needs a rider,
   not because the rider is worth reading — and the constraint may not be permanent. */
.turn-note {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--muted);
  opacity: 0.6;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

/* ---- the wash: travel glyphs at a whisper behind a band ---------------------------------- */
/* Flat colour on a page this long reads as unfinished. These are the app's own icons, outlined,
   at an opacity where they are texture rather than pictures: if a reader notices one, it is too
   strong. They never take a click and they are never on the reading path. */
.wash-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
/* Above the wash, always: a heading the texture shows through is a heading nobody read. */
/* Every band carries one now, so one rule covers them all: the wrap that follows a wash sits
   above it. Three bands out of ten read as a band nobody finished, not as a choice. */
.wash + .wrap {
  position: relative;
  z-index: 1;
}
/* A phone screen has no room to spare, and a texture that survives being squeezed to 390px is
   a texture in the way. */
@media (max-width: 700px) {
  .wash {
    display: none;
  }
}

/* ---- sections ----------------------------------------------------------------------- */
/* Every band had the same 56px top and bottom, from the shortest to the tallest, so the page had
   no way of saying "new subject" — a reader scrolling fast on a phone got no landmark to stop at,
   which is how four prices two-thirds of the way down go unseen. The long narrative bands breathe;
   the short ones stay tight. */
section {
  padding: 56px 0;
  position: relative;
  /* The bar at the top is sticky, so a jump to an id would otherwise land the heading behind
     it — the partners' buttons jump to the form, and a form whose question is hidden under a
     header is a form nobody answers. */
  scroll-margin-top: 78px;
}
#pillars,
.bolna,
#pass {
  padding: 84px 0;
}
.partners,
#more {
  padding: 44px 0;
}
@media (max-width: 700px) {
  #pillars,
  .bolna,
  #pass {
    padding: 56px 0;
  }
}
h2 {
  font-family: 'Anek Devanagari', 'Mukta', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 8px;
}
.sub {
  font-size: 17px;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 40em;
  text-wrap: pretty;
}

/* The three pillars, as on the app's home: blocks in their own hue with cream type. The type is
   never faded here: on the खाना fill the cream is 4.7:1 at full strength and 4.2 at the 92% it
   used to carry, and these are the longest passages on the page. */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pillar {
  border-radius: 26px;
  padding: 22px 22px 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.pillar-food {
  background: var(--food);
  color: var(--onFood);
}
.pillar-go {
  background: var(--go);
  color: var(--onGo);
}
.pillar-know {
  background: var(--know);
  color: var(--onKnow);
}
.pillar .roman {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pillar .name {
  font-family: 'Anek Devanagari', 'Mukta', sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
}
.pillar p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
/* The claim first, the description under it. A reader who takes one line off each block should
   take the thing no other app does, not a summary of the screen. */
.pillar-claim {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.32;
  margin-bottom: 10px;
  text-wrap: pretty;
  /* Two lines' worth, so the three phones below start on one line rather than a staircase. */
  min-height: 2.7em;
}
.pillar p + p {
  min-height: 7.4em;
}
.pillar .phone {
  margin: 14px auto -60px;
  width: 220px;
  border-width: 7px;
  border-radius: 28px;
  box-shadow: 0 16px 30px rgb(0 0 0 / 0.25);
}

/* Try it from India: the stand-in location, shown on the app's own screen.

   It sits second on the page, right under the hero (owner, 19 September). A reader who has just
   arrived from an advertisement has one question — can I see this for myself, now, from here —
   and this band is the only answer to it; everything below explains what they will find. */
.try .wrap {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: center;
}
.try {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* The button is the point of this band, so it is under the middle of it rather than tucked at
   the left edge of a column (owner, 19 September) — and with room above it, because a button
   resting on the line above reads as part of that sentence rather than as the thing to press. */
.try .cta {
  justify-content: center;
  margin-top: 28px;
}
.film-frame {
  position: relative;
  max-width: 880px;
  margin: 28px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 40px rgb(16 40 44 / 0.18);
}
.film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Two light bands in a row now that this one leads: one seam between them, not two. */
.try + .watch {
  border-top: 0;
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 17px;
}
/* The last step is the price, not an instruction: it says what the four above cost. It carries
   what a marigold callout used to say under this list, in the owner's own words and in its own
   weight, because saying it twice ten pixels apart was the page arguing with itself. */
.steps li:last-child {
  font-weight: 700;
  color: var(--marigoldText);
}
/* The one thing on this page nobody asks about and everybody should hear: we do not want to
   know who is reading it. Teal rather than marigold — the price is already marigold three lines
   above, and two boxes of one colour read as one more sentence rather than as a second promise. */
.quote {
  margin: 22px 0 0;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--tealSoft);
  border: 1px solid var(--teal);
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tealText);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--marigoldSoft);
  color: var(--marigoldText);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The pass. */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
}
.plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan .phones {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan .price {
  font-family: 'Anek Devanagari', 'Mukta', sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.plan .days {
  font-size: 14px;
  color: var(--muted);
}
.free {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--tealSoft);
  color: var(--tealText);
  font-size: 17px;
  font-weight: 600;
}
.free .big {
  font-family: 'Anek Devanagari', 'Mukta', sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
}
.never {
  margin: 18px 0 0;
  font-size: 16px;
  color: var(--muted);
}

/* Hotel and documents. */
.box-wide {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  align-items: center;
}
.box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
}
.box h3 {
  margin: 0 0 8px;
  font-size: 22px;
}
.box p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
.box .phone {
  margin: 18px auto 0;
}

/* A person can be reached. */
.contact {
  background: var(--card);
  border-top: 1px solid var(--line);
}
.contact .btn-big {
  font-family: 'Mukta', sans-serif;
  letter-spacing: 0.01em;
}

footer {
  padding: 36px 0 48px;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
}

/* ---- बोलना, the fourth block and the one that needs a signal (decision 020) ------------- */
.bolna {
  background: var(--speakSoft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.roman-loud {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--speakText);
  margin-bottom: 4px;
}
/* The reveal. `.curtain` is added by script, so nothing is hidden on a page without it; the
   parts come up in the order a reader meets them, which is what makes it land as an entrance
   rather than a fade. */
.curtain .roman-loud,
.curtain .bolna-lead,
.curtain .bolna-head,
.curtain .bolna-aside,
.curtain .bolna-also,
.curtain .sub,
.curtain .bolna-grid,
.curtain .bolna-note {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.curtain-up .roman-loud,
.curtain-up .bolna-lead,
.curtain-up .bolna-head,
.curtain-up .bolna-aside,
.curtain-up .bolna-also,
.curtain-up .sub,
.curtain-up .bolna-grid,
.curtain-up .bolna-note {
  opacity: 1;
  transform: none;
}
.curtain .bolna-lead {
  transition-delay: 0.08s;
}
.curtain .bolna-head {
  transition-delay: 0.16s;
}
.curtain .bolna-aside {
  transition-delay: 0.26s;
}
.curtain .sub {
  transition-delay: 0.34s;
}
.curtain .bolna-grid {
  transition-delay: 0.42s;
}
.curtain .bolna-note {
  transition-delay: 0.5s;
}

/* बोलना opens like a hero rather than a section (18 September): the owner's line above a
   headline the size of the page's first one. It is the last thing a reader meets before the
   pass, and the one they will remember standing in front of a driver. */
.bolna-lead {
  margin: 2px 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--speakText);
}
.bolna-head {
  font-size: clamp(32px, 4.6vw, 50px);
  margin-bottom: 6px;
}
/* The second half of बोलना, the same tool the other way round: a heading of its own, smaller
   than the board's, because reading Dubai's boards is the bigger pain (the owner, 2 October). */
.bolna-also {
  margin: 40px 0 10px;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
}
.bolna-aside {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--muted);
}
/* Centred, not top-aligned: three short steps beside a 500px phone left a third of this band as
   an empty left column, which reads as a layout that failed rather than as one that is spacious. */
.bolna-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
}
/* Smaller than the pillars' phones: the steps beside it are three lines, and a full-height
   phone next to three lines leaves a hole where the reader expects something. */
.bolna .phone {
  width: 250px;
  margin: 0 auto;
}
/* The board demo: the board, what Saathi made of it, and the button that says it — the app's own
   result card, drawn here so the voice is a real one rather than a picture of a button. */
.board-demo {
  display: grid;
  gap: 10px;
  max-width: 380px;
  margin: 0 auto;
}
.board-photo {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgb(16 40 44 / 0.18);
}
.board-arrow {
  margin: 2px 0 0;
  text-align: center;
  font-weight: 700;
  color: var(--speakText);
}
.board-result {
  display: grid;
  gap: 10px;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgb(16 40 44 / 0.1);
}
.board-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.board-hindi {
  margin: 0;
  font-family: 'Anek Devanagari', 'Mukta', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
}
/* One line per thing the board says: a platform board is two directions, not one sentence. */
.board-hindi span {
  display: block;
}
.board-hindi span + span {
  margin-top: 6px;
}
.board-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--teal);
  color: var(--onTeal);
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
}
.board-play[aria-busy='true'] {
  opacity: 0.75;
}
.board-said {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
}
.board-said:empty {
  display: none;
}
.board-arabic {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 19px;
  text-align: right;
}
.board-ar {
  display: block;
}
.board-arabic .board-label {
  text-align: left;
  margin-bottom: 4px;
}
.bolna-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.bolna-steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.45;
}
/* The step's number, in बोलना's own plum: filled, because a ring at this size reads as a typo. */
.bolna-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--speak);
  color: var(--onSpeak);
  font-weight: 700;
  font-size: 15px;
}
.bolna-note {
  margin: 28px 0 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 15.5px;
  max-width: 58em;
  text-wrap: pretty;
}

/* ---- tour operators and food outlets ---------------------------------------------------- */
.partners {
  background: var(--sand);
  border-top: 1px solid var(--line);
}
.partner-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.partner {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.partner h3 {
  font-family: 'Anek Devanagari', 'Mukta', sans-serif;
  font-weight: 600;
  font-size: 22px;
  margin: 0;
}
.partner p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  flex: 1;
}
.btn-partner {
  align-self: flex-start;
  background: var(--tealSoft);
  border-color: var(--teal);
  color: var(--tealText);
}

/* ---- the contact form (decision 023) ----------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 32px;
  align-items: start;
}
.form {
  display: grid;
  gap: 18px;
}
.who {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.who legend {
  padding: 0;
  font-weight: 700;
  margin-bottom: 8px;
}
/* A radio drawn as a chip: the dot is hidden, the chip itself shows which one is picked. */
.who-pick {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.who-pick input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.who-pick:has(input:checked) {
  background: var(--tealSoft);
  border-color: var(--teal);
  color: var(--tealText);
}
.who-pick:has(input:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.field {
  display: grid;
  gap: 6px;
}
.field-name {
  font-weight: 700;
}
.field input,
.field textarea,
.country {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 14px;
  min-height: 46px;
  width: 100%;
}
.field textarea {
  resize: vertical;
  line-height: 1.5;
}
.field input:focus-visible,
.field textarea:focus-visible,
.country:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}
/* The dialling code and the number are one field to a reader, so they sit on one line. */
.phone-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
}
.country {
  font-weight: 700;
}
/* The honeypot. Off-screen rather than display:none, which some fillers skip. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form .btn-big {
  justify-self: start;
}
.form-said {
  margin: 0;
  min-height: 1.5em;
  font-weight: 700;
  color: var(--marigoldText);
}
.form-said-good {
  color: var(--tealText);
}
.reach {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  display: grid;
  gap: 14px;
  justify-items: start;
}
/* The contact aside's small print. It used to inherit from the hero's CTA row, which is gone —
   so it says for itself what it is, which is what it should have done all along. */
.note {
  font-size: 14px;
  color: var(--muted);
}
.reach h3 {
  font-family: 'Anek Devanagari', 'Mukta', sans-serif;
  font-weight: 600;
  font-size: 20px;
  margin: 0;
}
.btn-wa {
  background: var(--wa);
  border-color: var(--wa);
  color: #fff;
}
/* The QR is for a reader on a laptop: they point their own phone's camera at it and their own
   WhatsApp opens with the invitation written (18 September — it carries no number of ours).
   A phone shows only the button below it, because nobody scans their own screen. */
.qr-card {
  margin: 0;
  display: none;
  gap: 12px;
  align-items: center;
  grid-template-columns: 210px 1fr;
}
.qr-card img {
  display: block;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px;
}
.qr-card figcaption {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.4;
}
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .qr-card {
    display: grid;
  }
}
/* The referral half of the aside: a rule above it, because it is a different errand from the
   two lines about reaching us that sit over it. */
.pass-it {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pass-it .note {
  margin: -4px 0 2px;
}
/* On a phone the QR is hidden and this is the only way through; on a laptop it is the second,
   under a QR that is the first. Either way it is the same errand, so it looks the same. */
.btn-share {
  margin-top: 2px;
}

@media (max-width: 860px) {
  .bolna-grid,
  .contact-grid,
  .partner-cards {
    grid-template-columns: 1fr;
  }
  .try .wrap,
  .box-wide {
    grid-template-columns: 1fr;
  }
  /* On a phone the app comes second, straight after the headline and the four tiles, and the
     claims follow it. The picture is the proof; it should not be below the fold. */
  .hero .wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      'lead'
      'phone'
      'rest';
    gap: 18px 0;
  }
  .hero {
    padding-top: 30px;
  }
  .hero .phone {
    margin-top: 0;
  }
  .pillars {
    grid-template-columns: 1fr;
  }
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .try .wrap > .phone {
    order: 2;
  }
}
@media (max-width: 600px) {
  /* The header used to run 7px past the right edge in English — the page slid sideways and the
     one button that matters was sliced down its side. Hindi fitted, so it went unseen. The row
     is allowed to shrink now, the gutter is narrower, and the brand gives way before the button
     does: whatever else goes, the way in stays whole. */
  .top .wrap {
    gap: 8px;
    padding: 0 14px;
  }
  .top .btn {
    min-height: 42px;
    padding: 0 12px;
    font-size: 15px;
    flex: 0 0 auto;
  }
  .top .brand {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
  }
  .top .wordmark-full {
    font-size: 21px;
  }
  .hero .phone {
    transform: none;
  }
}
/* Below this the lockup drops its trail rather than the button losing its words: the drawing is
   the first thing that can go without costing a reader anything. */
@media (max-width: 400px) {
  .top .wordmark-trail {
    display: none;
  }
  .top .wordmark-full {
    font-size: 19px;
  }
}
/* Four prices are four alternatives, so they stay side by side as long as they can and then go
   two by two. Stacked one under another they read as four steps to follow, and comparing the
   first with the last costs a screen and a half of scrolling. */
@media (max-width: 760px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- WhatsApp, from anywhere on the page ------------------------------------------------ */
/* Fixed at the corner rather than waiting at the foot of the contact form, because the question
   a reader has arrives while they are reading. WhatsApp's own green, because a message app that
   arrives in our marigold is one nobody recognises in the half-second they give it. */
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 24px rgb(16 40 44 / 0.28);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.wa-float:hover,
.wa-float:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgb(16 40 44 / 0.34);
}
/* A thumb reaches the corner on a phone; the button is 58px so it is a target and not a dot. */
@media (max-width: 560px) {
  .wa-float {
    right: 14px;
    bottom: 14px;
  }
}

/* ---- the terms, privacy and refund pages (decision 048) --------------------------------- */
.legal .wrap {
  max-width: 760px;
  padding-top: 28px;
  padding-bottom: 56px;
}
.legal h1 {
  margin: 20px 0 4px;
  font-family: 'Anek Devanagari', 'Mukta', sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.2;
}
.legal h2 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.35;
}
.legal-updated {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
}
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.legal-nav a,
.legal-nav-on {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.legal-nav-on {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--onTeal);
}
.legal .terms-section {
  margin: 0 0 22px;
  padding: 0;
}
.terms-p {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.6;
}
/* जाना's line, set apart (the owner, 30 September): it is not a map of every address. */
.legal .terms-callout {
  padding: 16px 18px 10px;
  border-radius: 16px;
  background: var(--goSoft);
  color: var(--goText);
}
.legal .terms-contact {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: underline;
}