/* One world, taken from the app rather than invented: the page it draws is #EFEFF3, its cards are
   white at a 20px radius, its blue is #3382F6, its separators #D7D7DA and its muted ink #8A8A8E.
   The signature is the file itself — a real spreadsheet lying across the page, with the phone that
   made it standing on top of it. */

@font-face {
  font-family: 'Sentient';
  src: url('sentient-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --page: #EFEFF3;
  --card: #FFFFFF;
  --ink: #101014;
  --ink-2: #4A4A51;
  /* The app's muted grey is #8A8A8E, which is right on a phone at 17pt and wrong on a web page at
     14: it clears the background by only 3:1. Text uses this darker step (4.6:1) and the app's own
     value stays where it belongs, on the separators. */
  --muted: #6B6B70;
  --sep: #D7D7DA;
  --sep-soft: rgba(215, 215, 218, 0.55);
  --blue: #3382F6;
  --blue-deep: #1C62CF;
  --red: #EB4D3D;
  --green: #34C759;
  --orange: #F7AB2C;
  --purple: #8B6CF6;
  --teal: #30B0C7;
  --warn: #C1462F;
  --measure: 1240px;
  --display: 'Sentient', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Atmosphere rather than a flat fill: one light from the top left across the whole page, and fine
   grain on the substrate so a wash this wide cannot band. Both sit behind everything. */
body::before, body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(120% 82% at 6% -12%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(168deg, #F5F6F9 0%, #EFEFF3 44%, #E6E7ED 100%);
}

body::after {
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}

.page {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark svg { display: block; flex: none; }

.masthead nav a {
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 140ms ease;
}

.masthead nav a:hover { color: var(--blue); }
.masthead nav a + a { margin-left: 24px; }

/* ---------------------------------------------------------------- type */

h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.25rem, 4.4vw, 3.65rem);
  line-height: 1.03;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 19ch;
}

h1 em { font-style: normal; color: var(--blue); }

h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.9vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 16px;
  max-width: 22ch;
}

h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin: 28px 0 6px;
}

.lede {
  margin: 20px 0 0;
  max-width: 48ch;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.5;
}

p { margin: 0 0 14px; }

a { color: var(--blue); }

/* ---------------------------------------------------------------- the call to action */

/* Apple's own badge artwork, downloaded from their marketing tools and served from here. Their
   guidelines say use it as supplied: scaled, never recoloured, never boxed, with clear space around
   it. So the link is a bare wrapper and the only state change is a slight fade. */
.cta {
  display: inline-block;
  margin-top: 30px;
  line-height: 0;
  transition: opacity 140ms ease;
}

.cta img { display: block; width: 340px; height: auto; }
.cta:hover { opacity: 0.86; }
.cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 8px; }

.terms { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.terms b { color: var(--ink-2); font-weight: 600; }

/* ---------------------------------------------------------------- the phone */

.phone {
  position: relative;
  border-radius: 46px;
  background: #0f1013;
  padding: 9px;
  box-shadow: 0 18px 34px -18px rgba(16, 20, 34, 0.45), 0 2px 6px rgba(16, 20, 34, 0.12);
}

/* height:auto matters: the img carries its intrinsic size as attributes so the layout does not jump
   while it loads, and without this the attribute height wins and the screen renders stretched. */
.phone img { display: block; width: 100%; height: auto; border-radius: 38px; }

/* ---------------------------------------------------------------- hero */

/* The hero runs to the right edge of the window, not to the text column, because the file is
   supposed to carry on past the page. The height is held open by the composition, since the sheet
   and the phone are both out of flow. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 880px;
  margin-right: calc(50% - 50vw);
  padding-bottom: 40px;
}

/* The file, lying across the page at the angle a sheet of paper lands at, running off the right
   edge. It fades back into the page on the left so the headline has clean paper to sit on. */
.hero-sheet {
  position: absolute;
  top: 232px;
  left: 42%;
  width: 1180px;
  transform: rotate(-3.2deg);
  transform-origin: left top;
  background: var(--card);
  border-radius: 14px 0 0 14px;
  box-shadow: 0 26px 60px -34px rgba(16, 20, 34, 0.5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 12%, #000 74%, transparent 99%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 12%, #000 74%, transparent 99%);
}

.hero-sheet table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.hero-sheet th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-2);
  background: #F6F6F9;
  padding: 11px 16px;
  white-space: nowrap;
  border-bottom: 1px solid var(--sep);
}
.hero-sheet td {
  padding: 11px 16px;
  color: var(--ink);
  white-space: nowrap;
  border-bottom: 1px solid var(--sep-soft);
}
.hero-sheet tr:nth-child(even) td { background: #FAFAFC; }
.hero-sheet td.dim { color: var(--muted); }

/* The sheet drifts up a little as the page scrolls, so the file reads as an object lying on the
   page rather than a picture printed on it. Scroll-linked, never an entrance reveal: if the browser
   has no scroll timeline the sheet simply sits still, fully visible. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-sheet {
      animation: sheet-drift linear both;
      animation-timeline: scroll();
      animation-range: 0 760px;
    }
    @keyframes sheet-drift {
      to { transform: rotate(-3.2deg) translate(-14px, -54px); }
    }
  }
}

.hero-stage { position: relative; z-index: 2; padding-top: 62px; }
.hero-copy { max-width: 560px; }

.hero-phone {
  position: absolute;
  z-index: 3;
  right: 13%;
  top: 250px;
  width: 260px;
}

.hero-phone .phone { transform: rotate(1.6deg); }

.num { font-variant-numeric: tabular-nums; }

/* The measured claim sits low on the first screen, under the button, where the eye lands next. */
.proof {
  margin: 96px 0 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
}
.proof b { color: var(--ink-2); font-weight: 600; }

/* ---------------------------------------------------------------- sections */

.band { position: relative; z-index: 1; padding: 96px 0 0; }
.band-head { max-width: 54ch; }
.band-head p { color: var(--ink-2); margin: 0; }

/* One contact card on the left, the columns it becomes on the right, connected. This is the whole
   product argument, so it gets the room. */
.split {
  position: relative;
  margin-top: 46px;
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  gap: 134px;
  align-items: center;
}

.contact-card {
  position: relative;
  z-index: 3;
  background: var(--card);
  border-radius: 20px;
  padding: 20px 18px 8px;
  box-shadow: 0 14px 30px -20px rgba(16, 20, 34, 0.42), 0 1px 2px rgba(16, 20, 34, 0.08);
}

.contact-card .who { display: flex; align-items: center; gap: 13px; padding-bottom: 14px; }
.contact-card .av {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 600;
}
.contact-card .who b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.contact-card .who span { font-size: 13.5px; color: var(--muted); }
.contact-card .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--sep);
  font-size: 14.5px;
}
.contact-card .row .k { color: var(--muted); }

/* The wires land on the first row of the table, so they are sized to the cells block and centred
   with it rather than stretched across the whole section. */
.wires {
  position: absolute;
  left: 336px;
  top: 50%;
  margin-top: -92px;
  width: 134px;
  height: 184px;
  z-index: 1;
}

.cells {
  position: relative;
  z-index: 2;
  margin-right: -140px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 74%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 74%, transparent 100%);
}

.cells .colhead {
  display: grid;
  grid-template-columns: repeat(6, 172px);
  font-size: 12px;
  color: var(--muted);
  padding-bottom: 8px;
}

.cells .band-row {
  display: grid;
  grid-template-columns: repeat(6, 172px);
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 26px -20px rgba(16, 20, 34, 0.4);
}

.cells .band-row div {
  padding: 13px 16px;
  font-size: 14px;
  border-right: 1px solid var(--sep);
  white-space: nowrap;
  min-height: 46px;
}
.cells .band-row div:last-child { border-right: 0; }
.cells .band-row + .band-row { margin-top: 10px; }
.cells .band-row.ghost { opacity: 0.5; }
.cells .band-row.ghost.two { opacity: 0.28; }

/* ---------------------------------------------------------------- fact rows (the app's own card) */

.facts {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.fact {
  background: var(--card);
  border-radius: 20px;
  padding: 22px 22px 24px;
  box-shadow: 0 12px 26px -22px rgba(16, 20, 34, 0.4), 0 1px 2px rgba(16, 20, 34, 0.06);
}

.fact h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; }
.fact p { margin: 0; color: var(--ink-2); font-size: 15px; }
.fact .files { margin-top: 14px; display: flex; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* ---------------------------------------------------------------- the converter */

.converter-frame { margin-top: 34px; }

.converter {
  position: relative;
  background: var(--card);
  border-radius: 20px;
  overflow: hidden;
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  box-shadow: 0 22px 44px -32px rgba(16, 20, 34, 0.45), 0 1px 2px rgba(16, 20, 34, 0.06);
  transition: box-shadow 180ms ease;
}

.converter.is-dragging { box-shadow: 0 0 0 2px var(--blue), 0 22px 44px -32px rgba(16, 20, 34, 0.45); }

.pane { padding: 26px 24px 20px; min-width: 0; }

.pane-raw {
  border-right: 1px solid var(--sep);
  background: #F7F7FA;
  overflow: hidden;
}

.pane-label {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}

/* The file is longer than the pane, so it dissolves at the bottom instead of being cut. */
.raw {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.68;
  color: var(--ink-2);
  margin: 0;
  white-space: pre;
  overflow: hidden;
  max-height: 218px;
  mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0.35) 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0.35) 92%, transparent 100%);
}

.raw .key { color: var(--muted); }
.raw .val { color: var(--ink); }

/* A read head travelling down the specimen while the page waits for a file. It stops the moment
   real data arrives: the demo moves, your data sits still. */
.read-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34px;
  background: linear-gradient(180deg, rgba(51, 130, 246, 0) 0%, rgba(51, 130, 246, 0.1) 55%,
    rgba(51, 130, 246, 0) 100%);
  border-bottom: 1px solid rgba(51, 130, 246, 0.45);
  animation: sweep 7.5s cubic-bezier(0.6, 0, 0.4, 1) infinite;
  pointer-events: none;
}

@keyframes sweep {
  0% { transform: translateY(40px); opacity: 0; }
  8% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translateY(320px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .read-head { animation: none; opacity: 0.6; }
}

.converter[data-state='loaded'] .read-head { display: none; }

.table-scroll {
  overflow: auto;
  max-height: 218px;
  border-top: 1px solid var(--sep);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
}

.table-scroll table {
  border-collapse: collapse;
  font-size: 13px;
  width: max-content;
  min-width: 100%;
}

.table-scroll th, .table-scroll td {
  text-align: left;
  padding: 8px 16px 8px 0;
  white-space: nowrap;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--sep-soft);
}

.table-scroll th {
  position: sticky;
  top: 0;
  background: var(--card);
  color: var(--ink);
  font-weight: 600;
  font-size: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.table-scroll td { color: var(--ink-2); }
.table-scroll td:first-child, .table-scroll th:first-child { padding-left: 2px; }
.table-scroll td.filled { color: var(--ink); }

.controls {
  grid-column: 1 / -1;
  border-top: 1px solid var(--sep);
  padding: 16px 24px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  min-width: 0;
}

.status { flex: 1 1 260px; min-width: 0; font-size: 14px; color: var(--ink-2); }
.status strong { color: var(--ink); font-weight: 600; }
.status.is-error { color: var(--warn); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }

button {
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: #F1F1F5;
  border: 1px solid var(--sep);
  border-radius: 11px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

button:hover:not(:disabled) { background: #E8E8EE; border-color: #C9C9CE; }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button:disabled { color: var(--muted); cursor: default; border-color: var(--sep-soft); background: transparent; }

button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--blue-deep); border-color: var(--blue-deep); }
button.primary:disabled { background: transparent; border-color: var(--sep-soft); color: var(--muted); }

button .ext { font-family: var(--mono); font-size: 12.5px; margin-left: 7px; opacity: 0.75; }

.assurance { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); max-width: 70ch; }
.assurance a { color: var(--ink-2); }

/* ---------------------------------------------------------------- prose (support, privacy) */

.prose { padding: 20px 0 90px; max-width: 68ch; }

@media (min-width: 1000px) {
  .prose { max-width: none; }
  .block {
    display: grid;
    grid-template-columns: 260px minmax(0, 62ch);
    column-gap: 56px;
    align-items: start;
  }
  .block h2 { margin: 0 0 14px; }
  .block + .block { margin-top: 44px; }
  .block-body { min-width: 0; }
}

.prose h2 { margin: 52px 0 14px; }
.prose h3 { color: var(--ink); }
.prose p { color: var(--ink-2); }
.prose ul { margin: 0 0 16px; padding-left: 18px; color: var(--ink-2); }
.prose li { margin-bottom: 6px; }
.prose code { font-family: var(--mono); font-size: 0.92em; color: var(--ink); }

.app-note {
  margin-top: 44px;
  border-top: 1px solid var(--sep);
  padding-top: 22px;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- closing + footer */

.closing {
  margin-top: 48px;
  padding: 54px 0 60px;
  border-top: 1px solid var(--sep);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

.closing h2 { margin: 0; }
.closing .cta { margin-top: 0; }
.closing .terms { margin-top: 12px; }

footer {
  border-top: 1px solid var(--sep);
  padding: 22px 0 44px;
  display: flex;
  gap: 10px 26px;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--muted);
}

footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--blue); }
footer a + a { margin-left: 18px; }

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 1180px) {
  .hero-phone { right: 3%; width: 260px; }
  .split { grid-template-columns: 320px minmax(0, 1fr); gap: 100px; }
  .wires { left: 320px; width: 100px; }
}

@media (max-width: 980px) {
  .page { padding: 0 22px; }
  .hero { padding-bottom: 40px; }
  .hero-stage { padding-top: 40px; }
  .hero-copy { max-width: none; }
  h1 { max-width: 15ch; }

  /* On a phone the sheet cannot lie across the page, so the copy comes first and the composition
     follows it: the sheet running off the right edge, the phone standing on it. Both share one
     grid cell, which is what keeps them overlapping without absolute positioning. */
  .hero {
    margin-right: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'copy' 'art';
  }
  .hero-stage { grid-area: copy; }
  .hero-sheet {
    grid-area: art;
    align-self: start;
    position: relative;
    top: 0;
    left: 0;
    width: 148%;
    margin-top: 34px;
    transform: rotate(-2deg);
    border-radius: 14px;
    -webkit-mask-image: linear-gradient(96deg, #000 0%, #000 58%, transparent 94%);
            mask-image: linear-gradient(96deg, #000 0%, #000 58%, transparent 94%);
  }
  .hero-phone {
    grid-area: art;
    justify-self: end;
    align-self: start;
    position: relative;
    right: auto;
    top: 0;
    margin: 128px -8px 0 0;
    width: 186px;
    z-index: 3;
  }
  .proof { margin-top: 34px; }

  .split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .wires { display: none; }
  .cells { margin-right: -22px; }
  .cells .colhead, .cells .band-row { grid-template-columns: repeat(6, 150px); }

  .facts { grid-template-columns: minmax(0, 1fr); }
  .converter { grid-template-columns: minmax(0, 1fr); }
  .pane-raw { border-right: 0; border-bottom: 1px solid var(--sep); }
  .raw { max-height: 168px; }
  .table-scroll { max-height: 200px; }
  .closing { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .band { padding-top: 72px; }
}

@media (max-width: 560px) {
  .masthead nav { display: none; }
  .cta { width: 100%; }
  .cta img { width: 100%; max-width: 380px; }
  .actions { width: 100%; }
  .actions button { flex: 1 1 auto; }
}