/* chairhand.com — direction A, "After hours": near-black ground, white ink, Instrument Sans,
   the app's teal on the main button only. Values from the "Recommended" artboard. */

/* ---------- fonts: Instrument Sans from our own folder (@fontsource/instrument-sans 5.3.0, latin, OFL) ---------- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-400-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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-500-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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-600-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;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;

  --bg: #0A0B0D;
  --film-ground: #1A1A1C; /* the app window's own ground, under a film before it loads */
  --ink: #F2F3F5;
  --ink-soft: #D2D5DA;     /* lead sentences */
  --muted: #9EA3AB;        /* captions, nav links */
  --accent: #14B8A6;       /* the app's teal, on the main button only */
  --accent-light: #5FD3C0; /* the app's mint, for the main button's hover */
  --accent-ink: #04201D;

  --paper: #F5F5F3;        /* the note, as paper */
  --paper-ink: #2B2A29;
  --paper-muted: #6B6763;
  --answered: #C9EBE4;     /* what the dentist tapped, highlighted on the paper */

  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step-small: 15px;                        /* nav, captions */
  --step-body: 18px;                         /* running text, buttons */
  --step-lead: clamp(18px, 1.5vw, 21px);     /* lead sentences, the wordmark */
  --step-head: clamp(28px, 3.4vw, 48px);     /* headings in a column, the list of what's never filled in */
  --step-statement: clamp(40px, 0.75rem + 4.6vw, 76px); /* the section statements, a step under the headline */
  --step-h1: clamp(44px, 1rem + 6vw, 92px);  /* the headline, the largest thing on the page */

  --page-max: 1280px;
  --margin: clamp(20px, 4vw, 40px);
  --gutter: 20px;
  --section: clamp(96px, 12vw, 176px);
  --radius-pill: 999px;
  --radius-frame: 12px;   /* every clip's frame */
  --radius-window: 12px;  /* the two full app windows, the hero and section 4: a Mac window's corner at this scale;
                             the inset card inside is the app's own design */
  --radius-dialog: 16px;  /* the materials dialog, so its own corners stay clean */
  --radius-paper: 6px;
  --hairline: rgb(255 255 255 / 0.08); /* the frame's inner edge */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- frame ---------- */
.wrap {
  max-width: calc(var(--page-max) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}
/* the hero light runs into the side margins; 100vw counts a classic scrollbar, so clip the sliver it adds */
main { overflow-x: clip; }
main > section + section { padding-top: var(--section); }
main > section:last-child { padding-bottom: var(--section); }
/* a section's statement: a step under the headline, two lines at most */
.statement {
  max-width: 15em;
  font-size: var(--step-statement);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* ---------- navigation ---------- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
}
/* the app's icon and the name, one link to the top */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step-lead);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark__icon { flex: none; width: 22px; height: 22px; }
.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
  font-size: var(--step-small);
}
.nav__links { display: flex; gap: clamp(14px, 2.4vw, 32px); }
.nav__links a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-hover) ease;
}

/* ---------- controls ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button[hidden] { display: none; }
.button--small {
  min-height: 44px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--step-small);
}
.button--accent {
  min-height: 52px;
  padding: 15px 26px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-body);
}
.link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.24em;
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--ink); }
  .button--small:hover { background: #FFFFFF; }
  .button--accent:hover { background: color-mix(in srgb, var(--accent) 55%, var(--accent-light)); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- clips: one frame for every clip ---------- */
/* Every clip is shown as recorded: never cropped, never wider in CSS px than half its pixel width (the script
   sets each figure's max-width from the clip's real size), and nothing moves or filters a playing video. One
   frame for all of them: a radius, a 1px inner hairline, no shadow. No control is ever drawn for a mouse or a
   finger: the frame itself is the control (click or tap it, or focus it and press Space or Enter), and a small
   one appears only on keyboard focus. */
.clip__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-frame);
  background: var(--film-ground);
}
.clip__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
  pointer-events: none;
}
.clip__frame--window { border-radius: var(--radius-window); }
.clip__frame--dialog { border-radius: var(--radius-dialog); }
.clip__frame video { display: block; width: 100%; height: auto; }
.clip__frame[role="button"] { cursor: pointer; }

/* shown only when the frame has keyboard focus: what Space or Enter will do */
.clip__hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
}
.clip__frame:focus-visible .clip__hint { opacity: 1; }
.clip__icon { width: 12px; height: 12px; fill: currentColor; }
.clip__icon--pause,
.clip__frame[data-state="playing"] .clip__icon--play { display: none; }
.clip__frame[data-state="playing"] .clip__icon--pause { display: block; }

.clip__caption {
  max-width: 62ch;
  margin-top: 12px;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- hero ---------- */
.hero { padding-top: clamp(40px, 2.8vw, 48px); }
.hero__title {
  max-width: 13ch;
  font-size: var(--step-h1);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
/* the sentence and the actions share a row where they fit, so the film starts at half the screen */
.hero__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 48px;
  margin-top: 32px;
}
.hero__lead {
  max-width: 20em;
  font-size: var(--step-lead);
  line-height: 1.4;
  color: var(--ink-soft);
  text-wrap: balance; /* breaks at the comma, not inside "any practice software" */
}
/* the button names the visitor's computer, the film link sits beside it, and the line under both says what
   happens next. On a phone the line comes straight under the button and the film link after it. */
.hero__actions {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  justify-items: start;
  align-items: center;
  gap: 10px 24px;
}
.get__note { grid-column: 1 / -1; font-size: var(--step-small); color: var(--muted); }
.get__note .link { color: var(--ink); font-weight: 500; }
.link[hidden] { display: none; }
.hero__film-link { display: inline-flex; align-items: center; min-height: 52px; }
.visit { margin-top: 132px; }

/* ---------- the hero light ---------- */
/* After the light behind the app window in Raycast's product section, and the page's one exception to the
   no-gradient, no-glow rule (logged in BACKLOG.md; the inspector allows it through data-taste-allow on
   this element only). Separate diagonal stripes of the app's teal and mint with dark between them, blurred,
   with a fine grain, drifting on 23, 29 and 31 s cycles that run back and forth and never line up. The light
   fills the gap above the window and stops about 20px below the line under the buttons, so the headline
   stays on the plain ground; at the sides it runs into the page margins and is gone by the page's edges. */
.visit__stage { position: relative; isolation: isolate; }
.light {
  --side: calc((100vw - min(var(--page-max), 100vw - 2 * var(--margin))) / 2);
  --spread: var(--side);
  --up: 112px;
  --down: 12px; /* gone by the caption row, so the caption reads on the plain ground */
  position: absolute;
  inset: calc(var(--up) * -1) calc(var(--spread) * -1) calc(var(--down) * -1);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* the sides fade over the outer 60% of the spread, the top over 70% of the room above the window */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(var(--spread) * 0.6), #000 calc(100% - var(--spread) * 0.6), transparent), linear-gradient(to bottom, transparent, #000 calc(var(--up) * 0.7), #000 calc(100% - var(--down)), transparent); /* taste-skill-ignore: the hero light */
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 calc(var(--spread) * 0.6), #000 calc(100% - var(--spread) * 0.6), transparent), linear-gradient(to bottom, transparent, #000 calc(var(--up) * 0.7), #000 calc(100% - var(--down)), transparent); /* taste-skill-ignore: the hero light */
  mask-composite: intersect;
}
.light__band {
  position: absolute;
  inset: -45% -25%;
  will-change: transform;
}
.light__band--a { background: repeating-linear-gradient(118deg, transparent 0 70px, rgb(20 184 166 / .85) 120px, rgb(95 211 192 / .8) 150px, transparent 210px, transparent 340px); filter: blur(18px); } /* taste-skill-ignore: the hero light */
.light__band--b { background: repeating-linear-gradient(118deg, transparent 0 150px, rgb(95 211 192 / .45) 190px, transparent 250px, transparent 470px); filter: blur(26px); } /* taste-skill-ignore: the hero light */
.light__band--c { background: linear-gradient(150deg, transparent 18%, rgb(20 184 166 / 0.16) 40%, rgb(20 184 166 / 0.16) 60%, transparent 82%); } /* taste-skill-ignore: the hero light */
.light__grain {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- how it works ---------- */
.how__note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px var(--gutter);
}
.how__pin > * + * { margin-top: 24px; }
.how__title {
  font-size: var(--step-head);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.how__title span { display: block; }
.how__pin .how__lead { max-width: 24em; margin-top: 28px; font-size: var(--step-lead); line-height: 1.4; color: var(--ink-soft); }
.how__pin .answers { margin-top: 32px; }
.answers { min-height: 48px; padding-inline: 20px; font-size: var(--step-body); }
.answers[aria-pressed="false"] { background: var(--film-ground); color: var(--ink); }
.answers__status { max-width: 30em; font-size: var(--step-small); color: var(--muted); }

/* the note, as paper */
.sheet {
  padding: clamp(24px, 3.6vw, 52px);
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: var(--radius-paper);
}
.sheet__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin-bottom: 24px;
}
.sheet__title { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.01em; }
.sheet__meta { font-size: var(--step-small); color: var(--paper-muted); }
.sheet__body { line-height: 1.6; }
.sheet__body p + p { margin-top: 1.6em; }
.sheet mark {
  padding: 0.05em 0.15em;
  margin: 0 -0.15em;
  background: var(--answered);
  color: inherit;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--t-ui) ease;
}
.sheet.is-plain mark { background: transparent; }
.sheet__body:focus { outline: none; }
/* on a phone the note opens at its first 14 lines; this button shows the rest, in place */
.sheet__more { display: none; }
.sheet__more:not([hidden]) {
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 18px;
  background: var(--paper-ink);
  color: var(--paper);
  font-size: var(--step-small);
}

/* the zoomed loops: the chart and the check share a row */
.how__loops {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px var(--gutter);
  margin-top: 72px;
}
@media (min-width: 600px) {
  .how__loops { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; margin-top: 96px; }
  .loop--teeth { grid-column: 1 / span 8; }
  .loop--check { grid-column: 9 / span 4; }
}
/* desktop: the words beside the paper, held in view while the paper scrolls past */
@media (min-width: 1024px) {
  .how__note { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .how__aside { grid-column: 1 / span 5; }
  .how__pin { position: sticky; top: max(32px, calc(50svh - 180px)); }
  .sheet { grid-column: 6 / span 7; }
}

/* ---------- what it never does ---------- */
.never__claim {
  display: grid;
  gap: 32px var(--gutter);
  margin-top: 56px;
}
.never__list {
  font-size: var(--step-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.never__text > * + * { margin-top: 20px; }
.never__text p { max-width: 30em; }
.never__lead { font-size: var(--step-lead); line-height: 1.4; color: var(--ink-soft); }
.never__film { margin-top: 64px; }

@media (min-width: 768px) {
  .never__claim { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .never__list { grid-column: 1 / span 5; }
  .never__text { grid-column: 7 / span 6; }
}

/* ---------- beyond the note: one feature per screen, sides alternating ---------- */
.beyond__lead {
  max-width: 34em;
  margin-top: 28px;
  font-size: var(--step-lead);
  line-height: 1.4;
  color: var(--ink-soft);
}
.feature {
  display: grid;
  gap: 32px clamp(40px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(96px, 11vw, 176px);
}
.beyond__lead + .feature { margin-top: clamp(80px, 9vw, 140px); }
.feature__title {
  font-size: var(--step-head);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.feature__text > * + * { margin-top: 20px; }
.feature__text p { max-width: 28em; }
.feature__aside { font-size: var(--step-small); color: var(--muted); }
/* the billing panel and the office panel sit centred in their column; the office panel, tall, is held to a width
   that keeps it inside one screen */
.feature__clip--billing { width: 100%; margin-inline: auto; }
.feature__clip--office { width: min(100%, 37.5svh); margin-inline: auto; }
@media (max-width: 599px) {
  .feature__clip--office { width: 100%; } /* on a phone every clip takes the column's full width */
}

@media (min-width: 1024px) {
  .feature--clip-right,
  .feature--clip-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* the review is shown at its full 730px, so its column is wider than the words' */
  .feature--review { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
  .feature--clip-left .feature__clip { grid-column: 1; grid-row: 1; }
  .feature--clip-left .feature__text { grid-column: 2; }
  .feature--wide { gap: 40px; }
  .feature--wide .feature__text p { max-width: 36em; }
}

/* ---------- the hero's entrance, after Raycast's headline ---------- */
/* The headline rises as one block, then the sentence 150 ms later, then the buttons, then the window: each
   16px (the window 24px) over 900 ms, all settled by 1.35 s. The light fades up once the window is in. */
@media (prefers-reduced-motion: no-preference) {
  /* the animations hold their first frame through the delay and leave nothing behind when they end, so the
     window, and the film in it, are at transform: none once they've entered */
  .js .hero [data-enter] { animation: enter 900ms var(--ease-out) calc(var(--i, 0) * 150ms) backwards; }
  .js .hero .visit[data-enter] { animation-name: enter-window; }
  .js .light { animation: light-on 1800ms ease-out 1300ms backwards; }

  .light__band--a { animation: drift-a 23s ease-in-out -4s infinite alternate; }
  .light__band--b { animation: drift-b 29s ease-in-out -13s infinite alternate; }
  .light__band--c { animation: drift-c 31s ease-in-out -21s infinite alternate; }
  .hero.is-away .light__band,
  .is-hidden .light__band { animation-play-state: paused; }
}
@keyframes enter { from { opacity: 0; transform: translateY(16px); } }
@keyframes enter-window { from { opacity: 0; transform: translateY(24px); } }
@keyframes light-on { from { opacity: 0; } }
@keyframes drift-a {
  0% { transform: translate3d(-16%, 3%, 0) rotate(-4deg) scale(1, 1); }
  50% { transform: translate3d(1%, -4%, 0) rotate(1deg) scale(1.08, 0.92); }
  100% { transform: translate3d(17%, 2%, 0) rotate(5deg) scale(0.95, 1.08); }
}
@keyframes drift-b {
  0% { transform: translate3d(14%, -3%, 0) rotate(3deg) scale(1.05, 0.95); }
  50% { transform: translate3d(-3%, 4%, 0) rotate(-2deg) scale(0.94, 1.08); }
  100% { transform: translate3d(-15%, -1%, 0) rotate(-5deg) scale(1.06, 1); }
}
@keyframes drift-c {
  0% { transform: translate3d(-6%, -5%, 0) rotate(-2deg); opacity: 0.7; }
  50% { transform: translate3d(5%, 3%, 0) rotate(2deg); opacity: 1; }
  100% { transform: translate3d(-3%, 6%, 0) rotate(-1deg); opacity: 0.8; }
}

/* ---------- phone ---------- */
@media (max-width: 599px) {
  .bar { padding-block: 16px; }
  .nav__links { display: none; } /* the three links move to the footer */
  .hero__actions { grid-template-columns: minmax(0, 1fr); }
  .get__note { order: 1; }
  .hero__film-link { order: 2; }
  .visit { margin-top: 72px; }
  .light { --up: 56px; }
  /* the stripes at 60% of the desktop period (and blur), so a phone shows two at once, not one */
  .light__band--a { background: repeating-linear-gradient(118deg, transparent 0 42px, rgb(20 184 166 / .85) 72px, rgb(95 211 192 / .8) 90px, transparent 126px, transparent 204px); filter: blur(11px); } /* taste-skill-ignore: the hero light */
  .light__band--b { background: repeating-linear-gradient(118deg, transparent 0 90px, rgb(95 211 192 / .45) 114px, transparent 150px, transparent 282px); filter: blur(16px); } /* taste-skill-ignore: the hero light */
  .statement { font-size: var(--step-head); line-height: 1.04; letter-spacing: -0.035em; }
  /* the note opens at its first 14 lines, fading out; "Read the whole note" shows the rest */
  .js .sheet:not(.is-open) .sheet__body {
    max-height: calc(14 * 1.6em);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4.8em), transparent); /* taste-skill-ignore: a fade, not a fill */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 4.8em), transparent); /* taste-skill-ignore: a fade, not a fill */
  }
  .sheet__more:not([hidden]) { display: inline-flex; }
}