/* Styles for the buybloc.in holding page (index.html) and its privacy note (privacy.html).
   BuyBloc's look from the main site (client/src/styles/globals.css): Lato, background #F8F8F8, text #111111,
   BuyBloc orange #F5A623 for links and the button, 1rem corners. Lato is served from /fonts (SIL Open Font
   License 1.1), so the page makes no calls to Google. The home page adds a two-column hero with a drawn map
   picture, three feature cards and a faint map-grid background, all drawn here or in index.html, and Mappi's
   corner card (his pose pictures are the only images, served from /mappi). Motion is gentle and switched off
   for visitors who ask for less motion.
   No em dashes in this file (house rule). */

/* Lato regular, bold and black, latin set only (the page is English) */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/fonts/lato-900.woff2") format("woff2"); }

/* the brand colours and sizes, named once */
:root {
  --bg: #F8F8F8;
  --card: #FFFFFF;
  --text: #111111;
  --body: #333333;        /* body copy, a little softer than headings */
  --muted: #666666;
  --border: #E5E5E5;
  --orange: #F5A623;
  --orange-deep: #E0901A; /* the button's pressed and hover shade */
  --orange-ink: #8A5300;  /* dark orange for small text on pale orange, passes contrast */
  --orange-pale: #FDEBCB; /* pale orange for icon tiles and highlights */
  --ok: #059669;
  --err: #B42318;
  --radius: 1rem;
  --shadow: 0 18px 40px rgba(17, 17, 17, 0.07); /* the soft lift under cards */
}

/* sizes include padding; no default margins */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }

/* page base: brand background, Lato, readable size, a soft orange glow at the top */
body {
  min-height: 100vh;
  background: radial-gradient(60rem 30rem at 50% -10rem, rgba(245, 166, 35, 0.16), transparent 70%), var(--bg);
  color: var(--text);
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* home page background: two orange glows over a faint 32px map grid that fades out towards the bottom.
   The grid is two 1px line gradients (across and down); the mask fades it so it never fights the text. */
body.home {
  position: relative;
  isolation: isolate; /* makes body the stacking parent, so the grid's z-index -1 stays above this background */
  overflow-x: hidden; /* the glows may reach past the edge on phones; never scroll sideways */
  background:
    radial-gradient(42rem 28rem at 85% -6rem, rgba(245, 166, 35, 0.22), transparent 70%),
    radial-gradient(36rem 24rem at -8% 30%, rgba(245, 166, 35, 0.10), transparent 70%),
    var(--bg);
}
body.home::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 56rem;
  z-index: -1; /* behind everything on the page */
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, #000000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000000 0%, transparent 100%);
}

/* one centred column with a 16px gutter on phones; .wide widens it for the home page */
.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 16px 2.5rem;
}
.wrap.wide { max-width: 72rem; padding-left: 24px; padding-right: 24px; }

/* logo row on the privacy page */
.brand img { display: block; height: 32px; width: auto; }

/* home top bar: logo on the left; "Launching in Hyderabad" tag and the Mappi link on the right */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  padding-bottom: 0;
}
.logo { display: block; height: 32px; width: auto; }
/* the right-hand group in the top bar: the tag and the link side by side */
.top-right { display: flex; align-items: center; gap: 1rem; }
/* "Explore with Mappi": a plain orange text link (house rule), kept on one line */
.top-link { font-size: 0.92rem; white-space: nowrap; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--body);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
/* the small orange dot in the tag, with a slow pulse (see the motion rules at the end) */
.tag .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.6);
  animation: dot-pulse 2.4s ease-out infinite;
}

/* the hero: text and form on the left, map picture on the right; one column under 60rem */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.5rem;
  align-items: center;
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}

/* the message block (the privacy page does not use it) */
.hero { margin: 3.5rem 0 2rem; }

/* the "Coming soon" tag above the heading */
.pill {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.15);
  color: var(--orange-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* the big heading; clamp keeps it large on desktop and fitting on phones */
h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance; /* splits the heading into even lines instead of leaving one word alone on the last */
}
/* the highlighted word: an orange marker stroke under its lower half */
.hl {
  background: linear-gradient(transparent 62%, rgba(245, 166, 35, 0.45) 62%, rgba(245, 166, 35, 0.45) 92%, transparent 92%);
  padding: 0 0.08em;
}

/* the sentence under the heading */
.lead { margin: 0 0 2rem; color: var(--body); font-size: 1.15rem; max-width: 34rem; }

/* the white sign-up card, with a thin orange line along its top edge */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 1.6rem;
  box-shadow: var(--shadow);
  max-width: 34rem;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), #FFC861);
}
.card h2 { margin: 0 0 1rem; font-size: 1.2rem; font-weight: 900; }

/* field label */
.label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; font-weight: 700; }

/* email box and button in a row; they stack under 30rem (see the media query below) */
.row { display: flex; gap: 0.6rem; }

/* the email box */
input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 3.1rem;
  padding: 0 1rem;
  border: 1px solid #D0D0D0;
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--text);
  font: inherit;
}
input[type="email"]:focus { outline: 3px solid rgba(245, 166, 35, 0.45); outline-offset: 1px; border-color: var(--orange); }

/* the filled orange button (a button, not a link, so it may be filled); lifts a little on hover */
button {
  height: 3.1rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--orange);
  color: #111111;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(245, 166, 35, 0.35);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
button:hover, button:focus-visible { background: var(--orange-deep); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(245, 166, 35, 0.45); }
button:focus-visible { outline: 3px solid rgba(245, 166, 35, 0.45); outline-offset: 2px; }
button[disabled] { opacity: 0.6; cursor: progress; transform: none; }

/* the consent tick and its sentence */
.consent { display: flex; gap: 0.6rem; align-items: flex-start; margin: 1rem 0 0.4rem; font-size: 0.92rem; color: var(--body); cursor: pointer; }
.consent input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--orange); flex: none; }

/* small print */
.small { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* honeypot field: moved off screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* success and error lines inside the card */
.note { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.95rem; }
.note.ok { background: #ECFDF3; color: var(--ok); }
.note.err { background: #FEF3F2; color: var(--err); }

/* the map picture: fills its column, floats gently (see the motion rules at the end) */
.art { margin: 0; }
.art svg { display: block; width: 100%; height: auto; max-width: 34rem; margin: 0 auto; overflow: visible; } /* visible: the card's drop shadow may spill past the drawing's edge instead of being cut square */
/* the one label inside the picture ("10 min walk"), in Lato like the page */
.svg-small { font-family: "Lato", sans-serif; font-size: 12px; font-weight: 700; fill: var(--orange-ink); }
/* SVG parts that move turn and scale around their own centre */
.pin, .ring { transform-box: fill-box; transform-origin: 50% 100%; }
.ring { transform-origin: 50% 50%; }
.pin { animation: pin-bob 3.2s ease-in-out infinite; }
.ring { animation: ring-breathe 4s ease-in-out infinite; }

/* the three "what is coming" cards in a row; one column on phones */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}
.feature {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/* cards lift a little and pick up an orange edge under the pointer */
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(245, 166, 35, 0.5); }
.feature h3 { margin: 0.9rem 0 0.35rem; font-size: 1.08rem; font-weight: 900; }
.feature p { margin: 0; color: var(--body); font-size: 0.97rem; }
/* the rounded pale-orange tile holding each card's line icon */
.icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
  background: var(--orange-pale);
  color: #B86E00; /* icon stroke: deep orange so it reads on the pale tile */
}
.icon svg { width: 1.4rem; height: 1.4rem; }

/* every link is BuyBloc orange (house rule); hover underlines */
a { color: var(--orange); font-weight: 700; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

/* footer lines; on the home page they sit under a thin rule, contact left and company right */
.foot { margin-top: 2.5rem; font-size: 0.92rem; }
.foot p { margin: 0.3rem 0; }
.wrap.wide.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  /* the rule is a 1px line drawn as a background so it spans only the text width (the box minus its 24px
     side padding), not the padded box a border would follow */
  background: linear-gradient(var(--border), var(--border)) center top / calc(100% - 48px) 1px no-repeat;
}
.muted { color: var(--muted); }

/* Mappi's corner: fixed bottom right, above the page; the card opens above his button */
.mappi {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}
/* his button: no fill (the page's filled-button look is reset), just the greeting bubble and his picture */
.mappi-btn {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 1rem; /* rounds the keyboard focus ring around him */
}
.mappi-btn:hover, .mappi-btn:focus-visible { background: none; box-shadow: none; transform: translateY(-2px); }
.mappi-btn img { display: block; width: 72px; height: 80px; filter: drop-shadow(0 8px 12px rgba(17, 17, 17, 0.18)); }
/* the white speech bubble beside him, with a small tail pointing at him; hidden once the card has been opened */
.mappi-bubble {
  position: relative;
  margin-bottom: 2.6rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem 0.9rem 0.2rem 0.9rem;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  animation: bubble-in 0.5s ease-out 1.2s both; /* appears a moment after the page loads */
}
.mappi.seen .mappi-bubble { display: none; }
/* the card: white, rounded, grows out of the button's corner (bottom right) and shrinks back into it */
.mappi-panel {
  width: min(22rem, calc(100vw - 32px));
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--card);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.16);
  transform-origin: 100% 100%;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.mappi-panel[hidden] { display: none; }
/* the closed state the card animates from and back to: small and clear, at the button's corner */
.mappi-panel.shut { transform: scale(0.2); opacity: 0; }
/* card head: his picture, name and role, and the close button on the right */
.mappi-head { display: flex; align-items: center; gap: 0.75rem; }
.mappi-pose { display: block; width: 60px; height: 67px; flex: none; }
.mappi-who { flex: 1; min-width: 0; }
.mappi-name { margin: 0; font-size: 1.05rem; font-weight: 900; }
.mappi-role { margin: 0; color: var(--muted); font-size: 0.85rem; }
/* the close cross: a plain round icon button, not a filled one */
.mappi-close {
  align-self: flex-start;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: none;
  color: var(--body);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}
.mappi-close:hover, .mappi-close:focus-visible { background: var(--border); box-shadow: none; transform: none; }
/* what Mappi says: a pale orange speech box */
.mappi-say {
  margin: 0.85rem 0;
  padding: 0.75rem 0.9rem;
  border-radius: 0.2rem 1rem 1rem 1rem;
  background: var(--orange-pale);
  color: var(--text);
  font-size: 0.95rem;
}
/* the questions, as small outlined chips that wrap onto more lines */
.mappi-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  height: auto;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(245, 166, 35, 0.6);
  border-radius: 999px;
  background: var(--card);
  box-shadow: none;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
}
.chip:hover, .chip:focus-visible { background: rgba(245, 166, 35, 0.12); box-shadow: none; transform: none; }
/* the question last asked stays marked */
.chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }
/* the mappi.in link at the foot of the card (orange text, house rule) */
.mappi-go { display: block; margin-top: 0.9rem; font-size: 0.92rem; }

/* the privacy note page: plain reading layout */
.doc h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin-top: 2.5rem; }
.doc h2 { font-size: 1.1rem; margin: 1.8rem 0 0.4rem; }
.doc p, .doc li { color: var(--body); }
.doc ul { padding-left: 1.2rem; }

/* motion: the tag dot sends out a fading ring */
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.6); }
  70% { box-shadow: 0 0 0 0.6rem rgba(245, 166, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); }
}
/* motion: the map pin rises 6px and settles */
@keyframes pin-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
/* motion: the walking ring grows 4% and back */
@keyframes ring-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
/* motion: Mappi's greeting bubble rises 8px into place as it fades in */
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* tablets and narrow laptops: stack the hero, picture under the form, two feature cards a row */
@media (max-width: 60rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 2.5rem; }
  .art svg { max-width: 30rem; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phones: 16px gutter, email box above a full-width button, one feature card a row, tag hidden (the Mappi
   link stays), footer rule matched to the 16px gutter, and room at the bottom so Mappi never covers the footer */
@media (max-width: 36rem) {
  .wrap.wide { padding-left: 16px; padding-right: 16px; }
  .tag { display: none; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .wrap.wide.foot { flex-direction: column; background-size: calc(100% - 32px) 1px; }
  body.home { padding-bottom: 6.5rem; }
  .mappi-btn img { width: 63px; height: 70px; }
}
@media (max-width: 30rem) {
  .row { flex-direction: column; }
  /* in a column, flex: 1 would size the box's height and squash it; keep its own 3.1rem height, full width */
  input[type="email"] { flex: none; width: 100%; }
  .row button { width: 100%; } /* only the sign-up button goes full width; Mappi's buttons keep their own size */
  .hero { margin-top: 2.5rem; }
  .card { padding: 1.25rem; }
  .feature { padding: 1.25rem; }
}

/* visitors who ask for less motion: no pulses, bobs, lifts or transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .feature:hover, button:hover, button:focus-visible, .mappi-btn:hover, .mappi-btn:focus-visible { transform: none; }
}