/* Rally Outside's landing page, in Mist on the app's cream: Jost for the few big words, Public Sans to read, Plex Mono for every number and
   label, Fraunces for words that are someone's own. One photo per section, one accent, lots of air. */
:root {
  --paper: #F6F3EC;
  --card: #FBF9F4;
  --ink: #17221D;
  --ink2: #5E6B64;
  --ink3: #8A948E;
  --line: #E2DDD2;
  --moss: #3E5B3A;
  --poppy: #C9502A;
  --display: 'Jost', 'Futura', 'Century Gothic', 'Public Sans', sans-serif;
  --sans: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Fraunces', Georgia, serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink2); }
a:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

.mark { font: 400 13px/1 var(--display); letter-spacing: .5em; text-transform: uppercase; }
.kicker { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin: 0; }

/* the bar */
.bar { display: flex; align-items: center; justify-content: space-between; padding-block: 28px; }
.bar nav { display: flex; gap: 24px; font-size: 15px; }

/* the hero: the words, and a plan as the app draws it */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; padding-block: 48px 96px; }
.hero-text { display: flex; flex-direction: column; gap: 22px; max-width: 520px; }
.hero h1 { font: 300 clamp(44px, 6vw, 76px)/1.02 var(--display); letter-spacing: .06em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.hero p { margin: 0; color: var(--ink2); }
.hero .lead { font-size: 21px; line-height: 1.5; color: var(--ink); }
.hero .kicker { color: var(--moss); }

.hero-card { position: relative; margin: 0; aspect-ratio: 9 / 10; border-radius: 30px; overflow: hidden; background: #2a2f2b; }
.hero-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.route { position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 66%); mask-image: linear-gradient(to bottom, #000 52%, transparent 66%); } /* the line fades out above the glass, as on the app's card */
.route path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-dasharray: 7 7; stroke-linecap: round; opacity: .95; }
.route circle { fill: #fff; }
.route line { stroke: #fff; stroke-width: 1.4; }
.route text { fill: #fff; font: 500 15px var(--mono); letter-spacing: 1.6px; paint-order: stroke; stroke: rgba(10, 18, 14, .3); stroke-width: 3px; }
.chip { position: absolute; top: 22px; left: 22px; font: 500 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff;
  padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.glass { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 2px; color: #fff; padding: 22px 24px;
  border-radius: 22px; background: rgba(20, 26, 22, .34); border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15); text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.glass strong { font: 600 21px/1.3 var(--sans); }
.glass .place { font-size: 16px; opacity: .92; }
.glass .cond { font: 500 17px/1.4 var(--mono); margin-top: 16px; }
.glass .src { font: 400 12.5px/1.4 var(--mono); opacity: .82; letter-spacing: .02em; }

/* a section's head */
section { scroll-margin-top: 24px; }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 620px; margin-bottom: 40px; }
.sec-head h2 { font: 400 15px/1.3 var(--display); letter-spacing: .32em; text-transform: uppercase; margin: 0; }
.sec-head p { margin: 0; color: var(--ink2); }

/* the lines */
.lines { padding-block: 56px 96px; border-top: 1px solid var(--line); }
.linelist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.linelist li { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding-block: 20px; border-bottom: 1px solid var(--line); }
.linelist .what { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.linelist .line { font: 500 clamp(17px, 2vw, 22px)/1.35 var(--mono); }
.linelist .from { font: 400 13px/1.4 var(--mono); color: var(--ink3); text-align: right; }
.linelist .off .line { color: var(--poppy); }
.linelist .better { color: var(--ink); font-weight: 500; }

/* the screens */
.screens { padding-block: 56px 96px; border-top: 1px solid var(--line); }
.phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.phones figure { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.phones img { width: 100%; height: auto; border-radius: 28px; border: 1px solid var(--line); background: var(--card); }
.phones figcaption { font-size: 15px; line-height: 1.55; color: var(--ink2); }
.phones figcaption b { color: var(--ink); font-weight: 600; }

/* what Rally keeps to */
.keeps { padding-block: 56px 112px; border-top: 1px solid var(--line); }
.keep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.keep-grid h3 { font: 600 17px/1.35 var(--sans); margin: 0 0 8px; }
.keep-grid p { margin: 0; font-size: 15.5px; color: var(--ink2); }

/* the close: one photo, her words */
.close { position: relative; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; background: #2a2f2b; }
.close > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.close::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 18, 14, .55), rgba(12, 18, 14, 0) 60%); }
.close-text { position: relative; z-index: 1; padding-block: 0 56px; display: flex; flex-direction: column; gap: 14px; }
.close .words { font: italic 400 clamp(30px, 4vw, 48px)/1.15 var(--serif); color: #fff; margin: 0; text-wrap: balance; }
.kicker.light { color: rgba(255, 255, 255, .85); }
.close .tree { font: 400 17px/1.4 var(--sans); color: rgba(255, 255, 255, .92); margin: 0; }

/* the foot */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-block: 40px 56px; font-size: 15px; color: var(--ink2); }
.foot .mark { color: var(--ink); margin-right: auto; }
.foot nav { display: flex; gap: 24px; }
.foot .contact { width: 100%; margin: 0; font-size: 14px; }
.foot .mail { font-family: var(--mono); font-size: 13.5px; color: var(--ink); user-select: all; }

/* narrower screens */
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 24px 72px; }
  .hero-card { aspect-ratio: 4 / 5; max-width: 560px; }
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .keep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .bar { padding-block: 20px; }
  .hero .lead { font-size: 19px; }
  .hero-card { border-radius: 24px; }
  .glass { left: 14px; right: 14px; bottom: 14px; padding: 18px 18px; border-radius: 18px; }
  .glass .cond { font-size: 15px; }
  .chip { top: 14px; left: 14px; font-size: 11.5px; }
  .route text { font-size: 19px; }
  .linelist li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .linelist .from { text-align: left; }
  .phones { gap: 32px 16px; }
  .phones img { border-radius: 20px; }
  .phones figcaption { font-size: 14px; }
  .keep-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .close { min-height: 420px; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 26, 22, .82); }
}