/* The "Our apps" page and How Datum decides. Loads after site.css. The page uses the site's Geist and plain
   background; Datum's parts use Datum's own font, Instrument Sans, and Datum's own colours, taken from the design's
   reference file (pictures/datum/UPHILL_SITE_PICTURES_7/reference/our-apps-page.html). These are listed in the
   SITE_05 report as overrides of the style guide. */

@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  --datum-font: "Instrument Sans", var(--font-sans);
  --datum-bg: #F3F4F1;
  --datum-ink: #0E1215;
  --datum-text: #2E343A;
  --datum-text-2: #3E454C;
  --datum-text-3: #5B636B;
  --datum-teal: #0E7C6E;
  --datum-teal-ink: #0E6A5E;
  --datum-orange: #E8962A;
  --datum-orange-ink: #8A5000;
  --datum-red: #C2412F;
  --datum-red-ink: #A33525;
  --datum-card: rgba(255, 255, 255, 0.80);
  --datum-line: rgba(14, 18, 21, 0.08);
  --datum-glow: rgba(69, 200, 180, 0.22);
  --datum-dark: #0E1215;
  --datum-dark-text: #F2F5F7;
  --datum-dark-text-2: #C9D1D8;
  --datum-mint: #7CF0DE;
  --datum-phone: 250px;
}
@media (min-width: 880px) { :root { --datum-phone: 260px; } }

.datum, .datum-font { font-family: var(--datum-font); }
.apps-page .site-head { position: relative; }

/* The first screen: headline, its line, then the Uphill, Datum and partner cards. */
.apps { padding-bottom: var(--gap-section); }
.apps-hero { box-sizing: border-box; max-width: calc(1089px + var(--gutter-left) + var(--gutter-right)); margin: 0 auto; padding: var(--fib-21) var(--gutter-right) 0 var(--gutter-left);
  text-align: center; container-type: inline-size; }
.apps-lead { max-width: var(--col-read); margin: var(--gap-head) auto 0; color: var(--text); }
.proof-row { list-style: none; padding: 0; margin: var(--fib-21) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fib-8); }
.proof-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--fib-13); border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--stroke); }
.app-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fib-13); max-width: var(--col-visual); margin: var(--gap-visual) auto 0; text-align: left; }
@media (min-width: 880px) { .app-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--fib-13); padding: var(--fib-21); border-radius: 28px; text-decoration: none; color: var(--text); }
.app-card--uphill { background: var(--card); }
.app-card--datum { background: var(--datum-bg) radial-gradient(closest-side at 92% 8%, rgba(69, 200, 180, 0.30), rgba(69, 200, 180, 0) 220px) no-repeat; color: var(--datum-ink); box-shadow: inset 0 0 0 1px rgba(14, 18, 21, 0.06); }
.app-card-head { display: flex; align-items: center; gap: var(--fib-13); }
.app-icon { flex: none; width: 56px; height: 56px; border-radius: 14px; }
.app-icon--datum { display: flex; align-items: center; justify-content: center; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(14, 18, 21, 0.08); }
.app-card-names { display: flex; flex-direction: column; }
.app-name { font-size: 24px; line-height: 28px; font-weight: 700; }
.app-card--datum .app-name { font-weight: 600; }
.app-status { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--green); }
.app-card--datum .app-status, .app-card--datum .app-card-link { color: var(--datum-teal-ink); }   /* the darker teal, readable on the card's glow */
.app-card-text { font-size: var(--type-17); line-height: 25px; color: var(--text-secondary); }
.app-card--datum .app-card-text { color: var(--datum-text-2); }
.app-card-link { margin-top: auto; display: inline-flex; align-items: center; min-height: var(--size-touch); font-size: 16px; font-weight: 600; color: var(--accent); }
.app-card--partners { background: var(--card); }
.eyebrow { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.6px; color: var(--text-secondary); }
.partner-title { font-size: 24px; line-height: 29px; font-weight: 700; letter-spacing: -0.01em; }
.partner-text { font-size: 16px; line-height: 22px; }
.talk { box-sizing: border-box; max-width: 100%; text-align: center; padding: var(--fib-8) var(--fib-13); margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); text-decoration: none; font-size: var(--type-17); font-weight: 600; }

/* Datum: its own world of colour, on its own background with a soft glow. */
.datum-world { margin-top: 0; background: var(--datum-bg) radial-gradient(closest-side at 50% 400px, var(--datum-glow), rgba(69, 200, 180, 0) 550px) no-repeat; color: var(--datum-ink); font-variant-numeric: tabular-nums;
  padding: var(--gap-section) var(--gutter-right) 0 var(--gutter-left); }   /* one 144 gap above and below Datum, as a visitor sees it */
.datum-world > section { max-width: var(--col-visual); margin: 0 auto; text-align: center; container-type: inline-size; }
.datum-world > section + section { margin-top: var(--gap-section); }
.datum-world .type-section { --ls: -0.035em; font-family: var(--datum-font); font-weight: 600; }
.datum-chip { display: inline-flex; align-items: center; gap: var(--fib-8); min-height: 34px; padding: 0 var(--fib-13); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px rgba(14, 18, 21, 0.08); font-size: 14px; font-weight: 600; margin-bottom: var(--fib-21); }
.datum-chip .dot { width: 8px; height: 8px; border-radius: 4px; background: var(--datum-teal); }
.datum-name { --cap: var(--type-72); }
@media (min-width: 880px) { .datum-name { --cap: var(--type-116); } }
.datum-tag { margin-top: var(--gap-head); font-size: var(--type-27); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.datum-para { max-width: var(--col-read); margin: var(--gap-head) auto 0; font-size: 19px; line-height: 29px; color: var(--datum-text-2); }
.datum-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fib-34); margin-top: var(--gap-visual); }
.datum-phones .frame-fig { --w: var(--datum-phone); margin: 0; }
@media (min-width: 880px) { .datum-phones .frame-fig:nth-child(2) { margin-top: var(--fib-34); } }

.chart-card { margin: var(--gap-visual) 0 0; border-radius: 32px; padding: var(--fib-21) var(--fib-21) var(--fib-13); background: var(--datum-card); box-shadow: inset 0 0 0 1px rgba(14, 18, 21, 0.06), 0 14px 40px rgba(14, 18, 21, 0.07); }
.chart { display: block; width: 100%; height: auto; font-family: var(--datum-font); }
.chart--narrow { display: none; }
@media (max-width: 639px) { .chart--wide { display: none; } .chart--narrow { display: block; } }
.chart .c-range { fill: rgba(14, 18, 21, 0.045); stroke: var(--datum-line); }
.chart .c-limit { stroke: var(--datum-red); stroke-width: 1.6; stroke-dasharray: 6 6; }
.chart .c-upper { font-size: 15px; font-weight: 600; fill: var(--datum-red-ink); }
.chart .c-label, .chart .c-tick, .chart .c-note { font-size: 14px; fill: var(--datum-text-3); }
.chart .c-usual { fill: #2BB8A3; fill-opacity: 0.26; }
.chart .c-usual-label { font-size: 14px; font-weight: 600; fill: var(--datum-teal-ink); }
.chart .c-var { stroke: var(--datum-teal); stroke-width: 1.4; stroke-dasharray: 3 5; }
.chart .c-var-label { font-size: 14px; fill: var(--datum-teal-ink); }
.chart .c-act { font-size: 15px; font-weight: 600; fill: var(--datum-orange-ink); }
.chart .c-tell { font-weight: 600; fill: var(--datum-orange-ink); }
.chart .c-line { fill: none; stroke: var(--datum-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart .c-dot { fill: var(--datum-ink); }
.chart .c-flag { fill: var(--datum-orange); stroke: #FFFFFF; stroke-width: 3.5; }
.chart .c-up { fill: var(--datum-orange); }
.chart--narrow .c-upper, .chart--narrow .c-act { font-size: 17px; }
.chart--narrow .c-label, .chart--narrow .c-tick, .chart--narrow .c-note, .chart--narrow .c-usual-label, .chart--narrow .c-var-label { font-size: 16px; }
.chart-card figcaption { margin-top: var(--fib-8); font-size: 13px; line-height: 18px; color: var(--datum-text-3); }

.benefits { list-style: none; padding: 0; margin-top: var(--fib-21); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fib-13); text-align: left; }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.benefit { display: flex; flex-direction: column; gap: var(--fib-8); padding: var(--fib-21); border-radius: 26px; background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(14, 18, 21, 0.06); }
.benefit-title { font-size: 22px; line-height: 27px; font-weight: 600; letter-spacing: -0.01em; }
.benefit-text { font-size: 16px; line-height: 23px; color: var(--datum-text); }
.benefit-curious { margin-top: auto; padding-top: var(--fib-8); border-top: 1px solid var(--datum-line); font-size: 14px; line-height: 20px; color: var(--datum-text-3); }
.benefit-curious strong { color: var(--datum-teal); }
.datum .fn a, .doc .fn a { color: var(--datum-teal-ink); }

.open-card { border-radius: 36px; padding: var(--fib-55) var(--fib-21); background: var(--datum-dark); color: var(--datum-dark-text); display: flex; flex-direction: column; align-items: center; }
.open-card > * + * { margin-top: var(--fib-21); }
.open-card > .eyebrow + * { margin-top: var(--fib-13); }
.open-card > .open-cards { margin-top: var(--gap-visual); }
.eyebrow--datum { font-size: 14px; color: var(--datum-mint); }
.open-card .type-section { --cap: var(--type-44); }
.open-line { max-width: var(--col-read); font-size: 18px; line-height: 27px; color: var(--datum-dark-text-2); }
.open-cards { list-style: none; padding: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fib-13); text-align: left; }
@media (min-width: 640px) { .open-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.open-cards li { display: flex; flex-direction: column; gap: 4px; padding: var(--fib-21); border-radius: 22px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); font-size: 15px; line-height: 21px; color: var(--datum-dark-text-2); }
.open-card-title { font-size: var(--type-17); line-height: 22px; font-weight: 600; color: var(--datum-dark-text); }
.open-rules { font-size: 16px; line-height: 24px; }
.open-button { box-sizing: border-box; max-width: 100%; text-align: center; padding-block: var(--fib-8) !important; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--fib-21); border-radius: var(--radius-pill); background: var(--datum-dark-text); color: var(--datum-ink); text-decoration: none; font-size: var(--type-17); font-weight: 600; }
.datum-refs { box-sizing: border-box; max-width: 760px; margin: var(--fib-34) auto 0; padding-left: var(--fib-21); text-align: left; color: var(--datum-text-3); }
.datum-refs li + li { margin-top: 4px; }
.datum-refs li { scroll-margin-top: var(--fib-89); }
.datum-refs .ref-back { color: var(--datum-teal); }

/* The partner close */
.partners { box-sizing: border-box; max-width: calc(var(--col-read) + var(--gutter-left) + var(--gutter-right)); margin: var(--gap-section) auto 0; padding: 0 var(--gutter-right) 0 var(--gutter-left); text-align: center; container-type: inline-size; }
.partners .web-lead { margin-top: var(--gap-head); }
.partners-mail { margin-top: var(--fib-13); }
.partners-mail a { display: inline-flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; min-height: var(--size-touch); padding-block: 0 !important; }   /* the address may break only when it cannot fit (very large text) */

/* How Datum decides */
.doc-note { max-width: var(--col-read); margin: 0 auto var(--fib-21); text-align: center; color: var(--text-secondary); }
.doc .datum-refs { color: var(--text-secondary); margin-top: var(--fib-13); }
.doc .datum-refs .ref-back { color: var(--accent); }

@media (prefers-contrast: more) {
  .datum-world, .app-card--datum { background: var(--bg); }
  .chart-card, .benefit { box-shadow: inset 0 0 0 1px var(--text); }
}

/* Phones: the three cards stack, Uphill, Datum and the partner card, kept compact so the partner card and its
   "Let's talk" button are reached within one and a half screens (SITE_05 Step 7.3). */
@media (max-width: 879px) {
  .apps-lead { font-size: var(--type-17); line-height: 24px; }
  .app-cards { gap: var(--fib-8); }
  .app-card { gap: var(--fib-8); padding: var(--fib-13) var(--fib-21) var(--fib-21); }
  .app-card-text { font-size: 16px; line-height: 22px; }
  .app-card-link { min-height: 0; }
  .partner-title { font-size: 22px; line-height: 27px; }
  .partner-text { font-size: 15px; line-height: 21px; }
}

/* Our apps (SITE_07): one card per app, the whole card a link. */
.app-grid { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fib-13); max-width: var(--col-visual); margin: var(--gap-visual) auto 0; text-align: left; }
@media (min-width: 640px) { .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app-grid li { display: flex; }
.app-grid .app-card { flex: 1; }

/* Partner with us (SITE_07): a label, the title, a centred reading column, one button and a quiet row of app icons. */
.partner-head .eyebrow { margin-bottom: var(--fib-13); }
.partner-col { max-width: var(--col-read); margin: var(--gap-visual) auto 0; text-align: center; }
.partner-col .web-lead + .web-lead { margin-top: var(--fib-21); }
.partner-button { margin-top: var(--fib-55); }
.app-icons { list-style: none; padding: 0; margin: var(--fib-89) 0 0; display: flex; justify-content: center; gap: var(--fib-55); }
.app-icons a { display: flex; flex-direction: column; align-items: center; gap: var(--fib-8); color: var(--text); text-decoration: none; }
.app-icons .caption { color: var(--text-secondary); margin-top: -4px; }
.app-icons .datum .body-strong { font-family: var(--datum-font); }

/* Datum (SITE_07): the section from the old /apps/, on its own page under the still strip. */
.datum-page { padding-bottom: 0; }
.datum-page .datum-world { padding-top: var(--fib-34); padding-bottom: var(--gap-section); }

/* Datum's page under Datum's own band (SITE_09): the glow starts well below the band, so the band melts into the page. */
.datum-page .datum-world { background: #F3F4F1 radial-gradient(circle 560px at 50% 620px, var(--datum-glow), rgba(69, 200, 180, 0)) no-repeat; }

/* "Coming early 2027" on /datum/ (SITE_10): plain text, as "Coming soon to the App Store." on the home page. */
.datum-soon { text-align: center; color: var(--datum-ink); }

/* SITE_11 alignment rule: marketing pages are centred (Datum's feature blocks and open cards, the /apps/ cards). */
.benefits, .open-cards { text-align: center; }
.benefit, .open-cards li { align-items: center; }
.app-card { align-items: center; text-align: center; }
.app-card-head { flex-direction: column; }
.app-card-names { align-items: center; }