/* The public pages of Truestance. White paper, near-black ink, and one accent:
   the teal the product draws the spine in. The pictures are the product's
   own: the 3D skeleton it fits to a scan, and the screens an instructor
   sees. Amber and blue are the person's right and left, as in the product,
   and appear only in those pictures.
   Type is the product's own. Nothing is loaded from anyone else. */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #ffffff;
  --wash: #f2f5f5;
  --line: #e2e8e9;
  --line-strong: #c8d1d3;
  --ink: #0c1719;
  --text: #3a474b;
  --mist: #66747a;
  --teal: #0b7d6e;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
  --measure: 60ch;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); scrollbar-color: var(--line-strong) var(--paper); overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--text);
  font: 400 1.0625rem/1.6 "Archivo", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--teal) 22%, transparent); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.24em; text-decoration-color: var(--teal); }
a:hover { color: var(--teal); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 460; letter-spacing: -0.032em; line-height: 1.04; text-wrap: balance; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- header */
.top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; }
.name { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 620; font-size: 1.0625rem; letter-spacing: -0.02em; text-decoration: none; }
.name img { width: 26px; height: 26px; }
.top nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); font-size: 0.9375rem; font-weight: 500; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.top nav a:not(.button) { color: var(--text); }
.top nav a:not(.button):hover { color: var(--ink); }
.top nav a[aria-current] { color: var(--ink); text-decoration: underline; }

.button {
  display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-weight: 560; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.button:hover { background: var(--teal); color: var(--paper); }
.button:active { transform: translateY(1px); }
.top .button { padding: 9px 18px; font-size: 0.9375rem; }
.more { font-weight: 520; }

/* ------------------------------------------------------------------ hero */
.hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--gutter); align-items: center; min-height: min(100svh - 84px, 840px); }
.pitch { padding-block: clamp(32px, 6vh, 72px); }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); max-width: 13ch; }
.pitch .lead { margin-top: clamp(20px, 2.6vw, 32px); font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; max-width: 43ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(24px, 3vw, 36px); }
.status { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 0.9375rem; color: var(--mist); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--teal); }

/* The 3D skeleton the product fits to a scan, with the lines a scan draws on
   it, photographed on white by render_skeleton.py. One large picture of the
   first view; over it, a layer that steps through thirty-six views of a full
   turn as the page scrolls, where the browser can tie an animation to
   scrolling. The page scrolls as it always does; the figure turns with it. */
.figure { position: relative; margin: 0; justify-self: center; align-self: end; width: fit-content; }
.figure img { height: clamp(440px, 86svh, 800px); width: auto; max-width: none; }
.turn { position: absolute; inset: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero .figure img { animation: arrive 1.2s var(--ease) both; }
  @supports (animation-timeline: scroll()) {
    .turn {
      background: url("img/skeleton-turn.webp") 0 0 / 600% 600% no-repeat;
      animation: turn step-end both; animation-timeline: scroll(root block); animation-range: 0 100vh;
    }
    @media (max-width: 900px) {
      .turn { background-image: url("img/skeleton-turn-small.webp"); animation-timeline: view(block); animation-range: entry 70% exit 70%; }
    }
  }
}
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } }
@keyframes turn {
  0% { opacity: 0; background-position: 0% 0%; }
  2.7778% { opacity: 1; background-position: 20% 0%; }
  5.5556% { opacity: 1; background-position: 40% 0%; }
  8.3333% { opacity: 1; background-position: 60% 0%; }
  11.1111% { opacity: 1; background-position: 80% 0%; }
  13.8889% { opacity: 1; background-position: 100% 0%; }
  16.6667% { opacity: 1; background-position: 0% 20%; }
  19.4444% { opacity: 1; background-position: 20% 20%; }
  22.2222% { opacity: 1; background-position: 40% 20%; }
  25.0000% { opacity: 1; background-position: 60% 20%; }
  27.7778% { opacity: 1; background-position: 80% 20%; }
  30.5556% { opacity: 1; background-position: 100% 20%; }
  33.3333% { opacity: 1; background-position: 0% 40%; }
  36.1111% { opacity: 1; background-position: 20% 40%; }
  38.8889% { opacity: 1; background-position: 40% 40%; }
  41.6667% { opacity: 1; background-position: 60% 40%; }
  44.4444% { opacity: 1; background-position: 80% 40%; }
  47.2222% { opacity: 1; background-position: 100% 40%; }
  50.0000% { opacity: 1; background-position: 0% 60%; }
  52.7778% { opacity: 1; background-position: 20% 60%; }
  55.5556% { opacity: 1; background-position: 40% 60%; }
  58.3333% { opacity: 1; background-position: 60% 60%; }
  61.1111% { opacity: 1; background-position: 80% 60%; }
  63.8889% { opacity: 1; background-position: 100% 60%; }
  66.6667% { opacity: 1; background-position: 0% 80%; }
  69.4444% { opacity: 1; background-position: 20% 80%; }
  72.2222% { opacity: 1; background-position: 40% 80%; }
  75.0000% { opacity: 1; background-position: 60% 80%; }
  77.7778% { opacity: 1; background-position: 80% 80%; }
  80.5556% { opacity: 1; background-position: 100% 80%; }
  83.3333% { opacity: 1; background-position: 0% 100%; }
  86.1111% { opacity: 1; background-position: 20% 100%; }
  88.8889% { opacity: 1; background-position: 40% 100%; }
  91.6667% { opacity: 1; background-position: 60% 100%; }
  94.4444% { opacity: 1; background-position: 80% 100%; }
  97.2222% { opacity: 1; background-position: 100% 100%; }
  100% { opacity: 0; background-position: 0% 0%; }
}

/* -------------------------------------------------------------- sections */
.part { padding-top: clamp(96px, 12vw, 168px); }
.part h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); max-width: 18ch; }
/* A heading of short sentences keeps each one whole. */
.part h2.whole { max-width: none; }
.whole span { white-space: nowrap; }
.part .lead { margin-top: 20px; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; max-width: 46ch; }
.caption { margin-top: 20px; font-size: 0.875rem; color: var(--mist); max-width: none; }

/* The product on its two screens: the computer's picture, with the phone's
   standing in front of its corner. */
.show { position: relative; margin-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(40px, 7vw, 96px); }
.window {
  margin: 0; border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; background: var(--wash);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 4%, transparent), 0 18px 40px -12px color-mix(in srgb, var(--ink) 12%, transparent), 0 48px 96px -32px color-mix(in srgb, var(--ink) 18%, transparent);
}
.window img { width: 100%; height: auto; }
.show .window { width: min(100% - 150px, 1000px); }
.show.solo { padding-bottom: 0; }
.show.solo .window { width: 100%; }
.phone {
  position: absolute; right: 0; bottom: 0; margin: 0; width: clamp(170px, 21vw, 256px); padding: 8px;
  border-radius: 40px; background: var(--ink);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent), 0 24px 48px -12px color-mix(in srgb, var(--ink) 26%, transparent);
}
.phone img { width: 100%; height: auto; border-radius: 31px; }

/* Short points as ruled rows: what it is on the left, a sentence on the right. */
.rows { margin: clamp(32px, 4vw, 56px) 0 0; border-bottom: 1px solid var(--line); }
.rows div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--gutter); align-items: baseline; border-top: 1px solid var(--line); padding: 22px 0; }
.rows dt, .steps h3 { color: var(--ink); font-size: 1.25rem; font-weight: 560; letter-spacing: -0.02em; line-height: 1.2; }
.rows dd { margin: 0; max-width: 60ch; text-wrap: pretty; }
.steps h3 { margin-bottom: 8px; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; border-top: 1px solid var(--line); padding-top: 20px; }
.steps li::before { content: counter(step); display: block; font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--teal); margin-bottom: 20px; font-variant-numeric: tabular-nums; }
.steps p { max-width: 34ch; }

/* Words beside a picture. */
.beside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--gutter); align-items: center; }
.beside .lead + p { margin-top: 20px; }

/* Where a scan goes, drawn in line. */
.kept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--gutter); align-items: end; }
.kept h2 + p { margin-top: 24px; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; max-width: 44ch; }
.route { width: 100%; height: auto; overflow: visible; }
.route .floor { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.route .thing { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route .way { stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.route text { fill: var(--mist); font-size: 15px; }

/* The close: how to join. */
.close { margin-top: clamp(96px, 12vw, 168px); background: var(--wash); text-align: center; }
.ask { padding-block: clamp(72px, 10vw, 136px); }
.ask h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.ask p { margin: 20px auto 0; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; max-width: 44ch; }
.ask .actions { margin-top: 32px; justify-content: center; }

/* ------------------------------------------------- the pages under the home */
.page-head { padding-top: clamp(56px, 8vw, 112px); }
.page-head h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); max-width: 17ch; }
.page-head .lead { margin-top: 24px; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; max-width: 48ch; }

/* Questions that open. */
.asked { margin-top: clamp(36px, 5vw, 64px); max-width: 860px; border-bottom: 1px solid var(--line); }
.asked details { border-top: 1px solid var(--line); }
.asked summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 20px 0; cursor: pointer; list-style: none; color: var(--ink); font-size: 1.25rem; font-weight: 520; letter-spacing: -0.02em; line-height: 1.25; }
.asked summary::-webkit-details-marker { display: none; }
.asked summary:hover { color: var(--teal); }
.asked summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal); transform: translateY(-3px) rotate(45deg); transition: transform 0.25s var(--ease); }
.asked details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.asked details p { padding-bottom: 24px; }

/* The privacy policy: one column to read. */
.page { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 8vw, 112px); }
.page h1 { font-size: clamp(2.5rem, 5.4vw, 4.5rem); margin-bottom: 16px; }
.page h2 { font-size: 1.5rem; font-weight: 540; letter-spacing: -0.02em; line-height: 1.2; margin: 2.2em 0 0.5em; }
.page h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin: 1.6em 0 0.4em; }
.page .lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.page .dated { color: var(--mist); font-size: 0.9375rem; }

/* ---------------------------------------------------------------- footer */
.foot { margin-top: clamp(96px, 12vw, 168px); border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 0.875rem; color: var(--mist); }
.close + .foot { margin-top: 0; border-top: 0; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px var(--gutter); }
.foot p { max-width: 58ch; margin-bottom: 0.6em; }
.foot a { color: var(--text); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 24px; justify-content: flex-end; align-content: start; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot nav a:hover, .foot nav a[aria-current] { color: var(--ink); }

/* ---------------------------------------------------------- narrow screens */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pitch { padding-bottom: 8px; }
  .hero h1 { max-width: none; }
  .hero .figure img { height: clamp(400px, 66svh, 600px); }
  .steps, .beside, .kept, .foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .route { max-width: 440px; margin-top: 24px; }
  .foot nav { justify-content: flex-start; }
}
@media (max-width: 700px) {
  /* The computer's picture is cut to its two figures here, and the phone
     stands over its lower corner. */
  .show { padding-bottom: 0; }
  .show .window { width: 100%; }
  .phone { position: relative; width: min(64%, 260px); margin: -72px 8px 0 auto; }
  .show.solo .window { max-width: 440px; }
  .rows div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 520px) {
  .top .button { display: none; }
  .top nav { gap: 18px; }
}