/* Landing page layout. Every section is the same object: a panel, a header row, then equal cells. */

/* Hero: no box, the world is the hero */
.hero { display: grid; padding-top: var(--hero-top); padding-bottom: var(--hero-gap); perspective: 1400px; }
/* Set by the motion code until the intro has placed the hero text */
.hold .hero { visibility: hidden; }
.copy { max-width: var(--copy-w); }
.kicker { display: flex; align-items: center; gap: calc(var(--u) * 1.25); margin-bottom: calc(var(--u) * 3); }
.hero h1 { font-size: var(--t-hero); }
.line { display: block; overflow: hidden; padding-bottom: .02em; }
.line > span { display: inline-block; }
.sub { margin-top: calc(var(--u) * 1.25); font-size: var(--t-sub); color: var(--green); }
.lede { max-width: 46ch; margin-top: calc(var(--u) * 2); font-size: var(--t-m); color: var(--ink-2); }

/* Sample report cards float at different depths beside the headline */
.flags { display: flex; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 4); transform-style: preserve-3d; }
.flag {
  width: var(--flag-w);
  padding: calc(var(--u) * 2);
  border-radius: var(--radius-s);
  background: var(--glass-flag);
  border: var(--hair) solid var(--panel-edge);
  box-shadow: var(--lift);
  will-change: transform, opacity;
}
.flag .fh { display: flex; justify-content: space-between; align-items: center; gap: var(--u); }
.flag .mono, .flag .ok { font-size: var(--t-tag); }
.flag .ok { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.flag .fb { display: flex; justify-content: space-between; align-items: baseline; gap: var(--u); margin-top: var(--u); }
.flag strong { font-size: var(--t-b); font-weight: 600; }
.flag b { font-family: var(--display); font-weight: 400; font-size: var(--t-h); line-height: 1; }
.flag p { margin-top: var(--u); font-size: var(--t-s); line-height: 1.35; color: var(--ink-3); }
.ctas { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 4); }
.ctas .btn { padding: calc(var(--u) * 1.625) calc(var(--u) * 3); font-size: var(--t-body); }
.up { color: var(--green); }
.down { color: var(--accent-ink); }
.flat { color: var(--ink-3); }

/* Sections below the hero */
.stage { display: grid; gap: var(--g); padding-bottom: calc(var(--u) * 12); perspective: 1600px; }
.ph { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--u) * 1.5); padding: var(--pad) var(--pad) calc(var(--u) * 2); }
.ph h2 { font-size: var(--t-h); }
.cells { display: grid; border-top: var(--hair) solid var(--line); }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cells > article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--u);
  min-height: calc(var(--u) * 24);
  padding: var(--pad);
  border-left: var(--hair) solid var(--line);
  border-top: var(--hair) solid var(--line);
}
.c3 > article:nth-child(3n+1), .c4 > article:nth-child(4n+1), .c6 > article:nth-child(6n+1) { border-left: 0; }
.c3 > article:nth-child(-n+3), .c4 > article:nth-child(-n+4), .c6 > article:nth-child(-n+6) { border-top: 0; }
.cells h3 { margin-top: calc(var(--u) * 3); font-size: var(--t-m); font-weight: 600; line-height: 1.25; }
.cells p { font-size: var(--t-s); line-height: 1.5; color: var(--ink-2); }
.cells .n { font-family: var(--display); font-size: var(--t-h); line-height: 1; color: transparent; -webkit-text-stroke: var(--hair) var(--ink-stroke); }

/* The weekly report sample */
.pulse .row {
  display: grid;
  grid-template-columns: var(--avatar) minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr) calc(var(--u) * 15);
  gap: calc(var(--u) * 2);
  align-items: center;
  padding: calc(var(--u) * 2) var(--pad);
  border-top: var(--hair) solid var(--line);
  transition: background .25s;
}
.pulse .row:hover { background: var(--panel); }
.pulse .av {
  display: grid;
  place-items: center;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  border: var(--hair) solid var(--panel-edge);
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: var(--t-s);
  color: var(--ink-2);
}
.pulse .name { font-size: var(--t-s); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pulse .name small { display: block; font-size: var(--t-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.spark { width: 100%; height: var(--spark-h); overflow: visible; }
.spark .base { stroke: var(--ink-faint); stroke-dasharray: 2 4; }
.pulse .chg { font-family: var(--mono); font-size: var(--t-xs); text-align: right; font-variant-numeric: tabular-nums; }
.pulse .chg small { display: block; font-size: var(--t-label); color: var(--ink-3); }
.pulse .val {
  font-family: var(--mono);
  font-size: var(--t-s);
  text-align: right;
  font-variant-numeric: tabular-nums;
  text-decoration: underline dotted var(--ink-dots);
  text-underline-offset: 4px;
}
.pulse .foot { display: flex; justify-content: space-between; gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 1.5) var(--pad) calc(var(--u) * 2.25); border-top: var(--hair) solid var(--line); }

/* How it starts: countdown to the next report on the chosen day */
.count { justify-content: space-between; }
.weekdays { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(var(--u) / 2); }
.weekdays button {
  height: calc(var(--u) * 4);
  border: var(--hair) solid var(--panel-edge);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-tag);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.weekdays button:hover { background: var(--panel-2); color: var(--ink); }
.weekdays button[aria-pressed="true"] { background: var(--selected); border-color: var(--selected); color: var(--bg); }
.count .big { display: flex; align-items: flex-end; gap: calc(var(--u) * 1.5); }
.count .big b { font-family: var(--display); font-weight: 400; font-size: var(--t-count); line-height: .8; color: var(--gold); }
.count .big span { font-family: var(--display); font-size: var(--t-l); line-height: 1; color: var(--gold); }
.count .what { font-size: var(--t-s); font-weight: 600; color: var(--ink); }
.count .what em {
  margin-left: calc(var(--u) * .75);
  padding: calc(var(--u) / 4) calc(var(--u) * .875);
  border-radius: var(--radius-pill);
  background: var(--gold-bg);
  color: var(--gold-ink);
  font-family: var(--mono);
  font-size: var(--t-tag);
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Modules */
.mod { justify-content: space-between; transition: background .25s, transform .5s var(--ease-out); }
.mod:hover { background: var(--panel); transform: translateZ(24px); }
.mod.one { background: linear-gradient(180deg, var(--green-wash), transparent); }
.mod h3 { margin-top: 0; font-size: var(--t-h); font-weight: 400; line-height: .92; }
.mod p { margin-top: var(--u); }

@media (max-width: 1100px) {
  .hero { align-items: end; padding-top: 46vh; }
  .c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c4 > article:nth-child(n), .c6 > article:nth-child(n) { border-left: var(--hair) solid var(--line); border-top: var(--hair) solid var(--line); }
  .c4 > article:nth-child(odd), .c6 > article:nth-child(3n+1) { border-left: 0; }
  .c4 > article:nth-child(-n+2), .c6 > article:nth-child(-n+3) { border-top: 0; }
}

@media (max-width: 700px) {
  .shade { background: linear-gradient(0deg, rgba(var(--shade-rgb), .92) 0%, rgba(var(--shade-rgb), .4) 50%, rgba(var(--shade-rgb), 0) 70%); }
  .flags { display: none; }
  .ph { flex-wrap: wrap; }
  .c3, .c4 { grid-template-columns: 1fr; }
  .c6 { grid-template-columns: 1fr 1fr; }
  .cells > article:nth-child(n) { min-height: 0; border-left: 0; border-top: var(--hair) solid var(--line); }
  .cells > article:first-child { border-top: 0; }
  .c6 > article:nth-child(even) { border-left: var(--hair) solid var(--line); }
  .c6 > article:nth-child(2) { border-top: 0; }
  .pulse .row { grid-template-columns: var(--avatar) 1fr calc(var(--u) * 11); gap: calc(var(--u) * 1.25); }
  .spark, .pulse .val { display: none; }
}