/* Bizora — bizoraapp.com
   Direction: the haaziri register. A small factory runs on a ruled attendance
   book, so the whole site is built from that: hairline rules instead of cards,
   mono for anything countable, and a month grid as the hero. Colours are lifted
   from BrandColors.swift so the site and the app are the same product. */

:root {
  --ink:      #080E1F;  /* bizNavy   */
  --ink-2:    #0E1729;  /* raised    */
  --blue:     #1565FF;  /* bizBlue   */
  --teal:     #00D4AA;  /* bizTeal   */
  --paper:    #EEF2F8;
  --muted:    rgba(238, 242, 248, .54);
  --faint:    rgba(238, 242, 248, .34);
  --rule:     rgba(238, 242, 248, .10);
  --rule-lit: rgba(238, 242, 248, .20);

  --display: "Archivo", "Inter Tight", system-ui, sans-serif;
  --body:    "Inter Tight", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --gutter: clamp(20px, 4.5vw, 90px);
  --band:   clamp(56px, 6vw, 84px);   /* the one vertical rhythm */
  --step:   22px;                     /* gap between stacked text blocks */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 62ch; }

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Eyebrow: the register's column heading ─────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 var(--step);
}

/* ── Masthead ───────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--rule);
  background: rgba(8, 14, 31, .72);
  backdrop-filter: saturate(140%) blur(14px);
}
.masthead .wrap { display: flex; align-items: center; height: 88px; }
.logo {
  font-family: var(--display);
  font-weight: 700; font-size: 36px; letter-spacing: -.035em;
  color: var(--paper); text-decoration: none;
}
.logo span { color: var(--teal); }
/* No nav here on purpose: the footer already lists every page, and on a
   six-page site one list is enough. The logo is the way home. */

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  /* NEVER the `padding` shorthand on a .wrap element — it resets left and
     right to 0 and the gutter disappears. Vertical sides only. */
  padding-top: var(--band);
  padding-bottom: var(--band);
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(42px, 6.6vw, 92px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.035em;
  margin: 0 0 var(--step);
  max-width: 17ch;
}
.hero h1 em { font-style: normal; color: var(--teal); }
.hero p.lede {
  font-size: 18px;
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}

.mail {
  margin: var(--step) 0 var(--band);
  font-family: var(--mono);
  font-size: clamp(18px, 2.6vw, 28px);
  letter-spacing: -.01em;
}

/* ── App Store badge ────────────────────────────────────────────
   Empty until site.js fills it, so the margin has to come from the
   link rather than the placeholder — an empty div with margin leaves
   a hole in the hero. */
.appstore:empty { display: none; }
.badge {
  display: inline-block;
  margin-top: var(--step);
  transition: transform .16s ease, opacity .16s ease;
}
.badge:hover { transform: translateY(-2px); opacity: .9; text-decoration: none; }
.badge img { display: block; height: 54px; width: auto; }
footer .badge { margin-top: 16px; }

/* ── Sections ───────────────────────────────────────────────── */
section { padding: var(--band) 0; border-top: 1px solid var(--rule); }
section h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600; letter-spacing: -.025em; line-height: 1.1;
  margin: 0 0 var(--step); max-width: 20ch;
}

.ledger { border-top: 1px solid var(--rule); margin-top: var(--band); }
.ledger-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: clamp(16px, 4vw, 44px);
  padding: var(--step) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
/* The last row's rule sat a hair above the section's own border-top, so the
   page ended on two lines a few pixels apart. The section divider is the
   real one; this one goes. */
.ledger-row:last-child { border-bottom: none; }
.ledger-row .no {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--teal); padding-top: 6px;   /* sits on the h3 cap line */
}
.ledger-row h3 {
  font-family: var(--display);
  font-size: 19px; font-weight: 600; letter-spacing: -.015em;
  margin: 0 0 10px;
}
.ledger-row p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 62ch; }

/* ── Document pages ─────────────────────────────────────────── */
.doc {
  padding-top: clamp(40px, 6vw, 76px);
  padding-bottom: 40px;
}
.doc h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5.4vw, 52px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  margin: 0 0 14px;
}
.doc .sub { color: var(--muted); font-size: 18px; margin: 0 0 10px; max-width: 56ch; }
.doc .stamp {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
  padding-top: 22px; margin-top: 26px; border-top: 1px solid var(--rule);
}

.clause { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.clause:first-of-type { border-top: 1px solid var(--rule); }
/* The last clause's rule sat just above the stamp's own border-top, so every
   policy page ended on two lines a few pixels apart. Same fix as the ledger:
   the divider that belongs to the NEXT thing is the one that survives. */
.clause:last-of-type { border-bottom: none; }
.clause h2 {
  font-family: var(--display);
  font-size: 21px; font-weight: 600; letter-spacing: -.015em;
  margin: 0 0 12px; display: flex; gap: 14px; align-items: baseline;
  max-width: none;
}
.clause h2 .n {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--teal); flex: none;
}
.clause p { margin: 0 0 12px; color: rgba(238,242,248,.78); font-size: 16px; }
.clause p:last-child { margin-bottom: 0; }
.clause ul { margin: 0; padding: 0; list-style: none; }
.clause li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  color: var(--muted); font-size: 15.5px;
}
.clause li::before {
  content: "—"; position: absolute; left: 0;
  font-family: var(--mono); color: var(--faint);
}
.callout {
  margin: 26px 0 0;
  padding: 18px 20px;
  border-left: 2px solid var(--teal);
  background: var(--ink-2);
  font-size: 15.5px; color: rgba(238,242,248,.82);
}

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule);
  padding: var(--band) 0;
  font-size: 14px;
}
footer .cols {
  display: flex; flex-wrap: wrap; gap: 34px 60px; justify-content: space-between;
}
footer nav { display: flex; flex-direction: column; gap: 9px; }
footer nav a, footer p { color: var(--muted); }
footer nav a:hover { color: var(--paper); }
footer .legalese { margin: 34px 0 0; color: var(--faint); font-size: 13px; }

@media (max-width: 760px) {
  .grid { grid-template-columns: minmax(76px, 1fr) repeat(7, minmax(0, 1fr)); }
  .d8, .d9, .d10, .d11, .d12, .d13, .d14 { display: none; }
  .tile { min-height: 34px; font-size: 12px; }
  .ledger-row { grid-template-columns: 44px 1fr; }
}

/* ── Scroll reveal ──────────────────────────────────────────────
   Sections arrive as you reach them rather than all at once. One
   transition, no library. */
/* Scoped to .js — set by a one-line script in <head>. Without it the page
   renders fully visible. Hiding content behind a script that might not load
   is how a whole page comes up blank, which is exactly what happened. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.2, .7, .3, 1),
              transform .6s cubic-bezier(.2, .7, .3, 1);
}
.js .reveal.seen { opacity: 1; transform: none; }

/* ── Gutter guard ───────────────────────────────────────────────
   Last rule in the file on purpose. `.hero` and `.doc` set vertical
   padding and have twice now been written with the shorthand, which
   silently zeroes the horizontal padding and throws the page against
   the screen edge. This puts it back regardless of what came before. */
.wrap {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}