/*
  Alap — public site.

  The palette is the app's own (apps/mobile/src/ui/theme.ts): Bengal indigo,
  alta red from the lac dye and the border of a Pujo saree, brass, a river
  green, over warm neutrals. Dark is the default here for the same reason it
  is the app's primary theme — this is a product people open at night, often
  with someone else in the room. A site that flashes white at midnight is
  the wrong first impression of an app whose whole promise is discretion.

  No webfonts, deliberately. The app sets prompts in the nearest system serif
  on each platform for the same reason: most of this audience is on a
  ₹10–20k Android phone on a mobile connection, and a page that waits on a
  font download is a page they do not see.
*/

:root {
  --ground:   #150F0D;  /* lamp-lit brown-black — the app icon's ground */
  --surface:  #251A16;
  --surface2: #33241E;
  --ink:      #F5EBE4;
  --ink2:     #D8C7BD;
  --muted:    #A28C82;
  --rule:     #3A2A23;
  --alta:     #E8756A;  /* the threshold colour. Used for one thing only. */
  --indigo:   #98A0F0;
  --brass:    #D9A64E;
  --river:    #5CC0A6;

  --serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --measure: 34rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --ground:   #F4E9E1;
    --surface:  #FDF1EC;
    --surface2: #F2DFD6;
    --ink:      #241719;
    --ink2:     #4E3A3B;
    --muted:    #745E5B;
    --rule:     #E0CCC2;
    --alta:     #A93028;
    --indigo:   #333C86;
    --brass:    #825E1E;
    --river:    #1F6B5C;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--ground);
  padding: 10px 16px;
}
.skip:focus { left: 16px; top: 16px; z-index: 10; }

a { color: var(--indigo); text-underline-offset: 3px; }
a:focus-visible,
.skip:focus-visible { outline: 2px solid var(--alta); outline-offset: 3px; }

/* ---------------------------------------------------------------- header - */

.top {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: baseline;
}

.wordmark {
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.top nav {
  font-family: var(--sans);
  font-size: 14.5px;
  display: flex;
  gap: 18px;
  margin-left: auto;
}
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------------ hero - */

main { max-width: var(--measure); margin: 0 auto; }

section { padding: 62px 0; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: 0; }

.hero { padding-top: 54px; }

.kicker {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 14px;
}

/*
  The one bold moment on the page. It is a real prompt from the bank, set
  large, because the thing being judged in this product is what someone
  wrote — so the writing is the hero rather than a photograph of a phone.
*/
.prompt {
  margin: 0 0 40px;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--alta);
  font-size: clamp(1.7rem, 5.4vw, 2.5rem);
  line-height: 1.24;
  font-style: italic;
  color: var(--ink);
}

h1 {
  font-size: clamp(1.45rem, 3.6vw, 1.85rem);
  line-height: 1.3;
  font-weight: 600;
  margin: 0 0 22px;
  max-width: 26ch;
}

.lede { margin: 0 0 18px; color: var(--ink2); }

.where {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--brass);
  margin: 0;
}

/* -------------------------------------------------------------- sections - */

h2 {
  font-size: 1.3rem;
  line-height: 1.34;
  font-weight: 600;
  margin: 0 0 26px;
  max-width: 24ch;
}

h3 {
  font-size: 1.06rem;
  line-height: 1.38;
  font-weight: 600;
  margin: 0 0 8px;
}

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.sub { color: var(--ink2); margin-bottom: 26px; }

.commitment { margin-bottom: 34px; }
.commitment:last-child { margin-bottom: 0; }
.commitment p { color: var(--ink2); }

/* The steps are a real sequence, so they are ordered — drawn as a thread
   down the page rather than three identical cards in a row. */
.thread {
  list-style: none;
  margin: 0;
  padding: 0 0 0 26px;
  border-left: 1px solid var(--rule);
}
.thread li {
  position: relative;
  margin-bottom: 32px;
}
.thread li:last-child { margin-bottom: 0; }
.thread li::before {
  content: '';
  position: absolute;
  /* -33 not -30: the dot is 13px wide including its border, and the rule it
     sits on is 1px at the list's left edge. This centres it on that rule. */
  left: -33px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--indigo);
}
.thread p { color: var(--ink2); }

.situation {
  background: var(--surface);
  border-left: 2px solid var(--rule);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.situation:last-child { margin-bottom: 0; }
.situation p { color: var(--ink2); }

.specifics { margin: 0; padding: 0 0 0 20px; }
.specifics li { margin-bottom: 15px; color: var(--ink2); }
.specifics li:last-child { margin-bottom: 0; }
.specifics strong { color: var(--ink); font-weight: 600; }

.cost p { color: var(--ink2); }
.closing p { color: var(--ink2); }

/* ---------------------------------------------------------------- footer - */

footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 36px 0 64px;
  border-top: 1px solid var(--rule);
}
footer nav {
  font-family: var(--sans);
  font-size: 14.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 20px;
}
.small {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 480px) {
  body { font-size: 18px; padding: 0 20px; }
  section { padding: 46px 0; }
  .top nav { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}