/*
 * The landing page, set in the app's own palette and typeface.
 *
 * **Literals, not tokens.** Nothing here can load `tokens.css`, so the values are written
 * out — the same approach `summary-page.css.ts` and the admin panel take, for the same
 * reason. Every one of them is a token: `#1c1c1e` ink, `#555a6a` muted, `#8e91a0` tertiary,
 * `#4262ff` action with `#2a41b6` pressed, `#eef0f3` hairline, `#fff` canvas.
 */
@font-face {
  font-family: Jakarta;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-500.woff2') format('woff2');
}

@font-face {
  font-family: Jakarta;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: Poppins;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600.woff2') format('woff2');
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

/*
 * The dot field, which is what makes a Clario surface recognisable (DESIGN.md §2.1).
 *
 * **The dawn wash is gone from here.** It ran across the whole top of the page — behind the
 * wordmark, behind the headline — and any colour up there competes with the one thing the
 * page has to say. The only colour left on the page now comes off the product shot
 * (`body::before`), which is light the app is casting rather than a tint laid under it.
 *
 * **The ground carries no colour of its own.** It used to hold four tints in the corners, and
 * a corner tint is a frame: it says the edge of the page is the interesting part, when the
 * interesting part is in the middle. The colour now comes off the product shot instead
 * (`.shot::before`), so it reads as light the app is giving off rather than as decoration
 * laid on behind it.
 *
 * **The grain is the reason it does not look cheap.** Eight overlapping gradients across a
 * wide screen band badly in 8-bit colour; a fractal-noise tile over the top breaks the bands
 * up and reads as texture rather than as a flat print. It is one small inline SVG, so it
 * costs no request.
 *
 * Eight radial gradients and no `filter: blur()`. A blurred element that size costs a full
 * offscreen buffer every paint, and a radial stop is already the shape blur was faking.
 */

/*
 * **One screen, and it does not scroll.** `100svh` rather than `100vh`: on iOS `vh` counts
 * the address bar that is about to disappear, which would push the product shot under it.
 * The shot is cropped to whatever height is left, which reads as a window continuing past
 * the fold rather than a picture that has been cut off.
 */
body {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100svh;
  margin: 0;
  overflow: hidden;
  font:
    500 16px/1.55 Jakarta,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;
  color: #2c2c34;
  background:
    radial-gradient(circle, #e4e6ec 1.1px, transparent 1.1px) 0 0 / 26px 26px,
    url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%223%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22 opacity=%22.085%22/%3E%3C/svg%3E')
      0 0 / 170px 170px,
    #fff;
  -webkit-font-smoothing: antialiased;
}

/*
 * **The colour comes off the shot, and it is drawn here rather than on it.** The bloom sits
 * behind the product windows and reaches a little past them — so the page is lit by the app
 * rather than framed by tints in its corners.
 *
 * **A little past, not all the way.** Spread across the full width it stopped reading as light
 * coming off the window and became a coloured page again, which is the thing it replaced. Each
 * source now sits near an edge of the shot and is finished before the page's own edge.
 *
 * **The box is much taller than the light in it**, and that is the point: a radial gradient
 * that is still opaque where its box ends leaves a straight edge across the page. Every stop
 * here reaches zero well inside the bounds, so there is nothing to see but the falloff.
 *
 * **It cannot live on `.shot`.** It did, and it was clipped to a hard vertical edge a couple
 * of hundred pixels in from each side: `main` is `max-width: 1180px` with `overflow: hidden`,
 * so anything inside it stops at that box no matter how far the gradient is told to reach.
 * On the body it is bounded by the viewport, which has no edge to see.
 *
 * `in oklab` and hue-matched zero-alpha stops, for the reasons in the `body` rule above: sRGB
 * blending and the `transparent` keyword each drag a grey cast through a soft gradient, and
 * this one is nothing but soft gradient.
 */
body::before,
body::after {
  position: fixed;
  inset: 6% -12% -14%;
  z-index: 0;
  content: '';
  pointer-events: none;
}

/*
 * **Two layers, drifting against each other.** One element carrying every colour can only
 * slide as one mass, which reads as the page being dragged. Split in two and moved in
 * opposite directions, the colours pass over each other and the light changes without
 * anything appearing to move — which is the difference between an animation and an
 * atmosphere.
 *
 * `transform` only: it is composited, so a 34-second drift costs no paint and no layout.
 */
body::before {
  background:
    radial-gradient(
      34% 46% at 50% 46% in oklab,
      rgb(132 166 248 / 34%),
      rgb(132 166 248 / 0%) 72%
    ),
    radial-gradient(
      22% 34% at 19% 52% in oklab,
      rgb(36 213 220 / 21%),
      rgb(36 213 220 / 0%) 72%
    );
  animation: drift-a 34s var(--ease-drift, ease-in-out) infinite;
}

body::after {
  background:
    radial-gradient(
      22% 36% at 81% 48% in oklab,
      rgb(189 157 240 / 22%),
      rgb(189 157 240 / 0%) 72%
    ),
    radial-gradient(
      18% 24% at 88% 82% in oklab,
      rgb(255 200 50 / 17%),
      rgb(255 200 50 / 0%) 74%
    );
  animation: drift-b 43s ease-in-out infinite;
}

/*
 * Deliberately not a loop of the same length: 34 and 43 seconds are coprime enough that the
 * pair does not visibly repeat within the time anyone spends on this page.
 *
 * The distances are small — a couple of per cent — because the shapes are enormous. A blob
 * half the width of the screen moved 2% travels further than it looks, and anything more
 * reads as the background sliding.
 */
@keyframes drift-a {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(2.5%, -1.5%, 0) scale(1.06);
  }
}

@keyframes drift-b {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.04);
  }

  50% {
    transform: translate3d(-3%, 1.5%, 0) scale(1);
  }
}

/* Somebody who asked for less motion gets the colour and none of the movement. */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

/* Above the bloom, which is a positioned child and would otherwise paint over them. */
header,
main {
  position: relative;
  z-index: 1;
}

/*
 * The mark was alone in here and needed no `justify-content`; there are two things now, at
 * the two ends. `.mark` is a link on the changelog and a plain span on the home page — it is
 * the current page there, and a link to the page you are on does nothing (`AGENTS.md` §3).
 */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px clamp(20px, 5vw, 56px);
}

/* `text-decoration` because this is a link on the changelog and a span on the home page —
   the wordmark is a wordmark either way, and a browser underlines one of them by default. */
.mark {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #1c1c1e;
  text-decoration: none;
}

.mark svg {
  width: 34px;
  height: 34px;
}

.mark > span {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transform: translateY(0.04em);
}

main {
  display: grid;
  /* Three children, three tracks. The shot takes what the headline and the button leave, and
     it needs that: both of its windows are out of flow now, so an `auto` track would give it
     nothing to be the height of. */
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  width: 100%;
  max-width: 1180px;
  padding: clamp(8px, 2vh, 34px) clamp(20px, 5vw, 56px) 0;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

/*
 * Two lines. At `17ch` it broke into three, which turns one sentence into a stack — the
 * measure is what decides that, not the wording, so the wording is unchanged.
 */
h1 {
  max-width: 25ch;
  margin: 0;
  font-size: clamp(27px, 3.9vw, 48px);
  font-weight: 500;
  line-height: 1.14;
  color: #1c1c1e;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/*
 * A pill in `--color-ink`, not the action blue.
 *
 * The headline already carries the blue and it is the thing moving; a second blue below it
 * competes with the one word on the page that is meant to be looked at. Black is the quieter
 * and the more certain of the two, which is what a download button should be.
 *
 * It carries no `margin-top` any more: the gap under the headline belongs to `.cta`, the block
 * that holds this button and the Windows line together.
 */
.get {
  display: inline-flex;
  gap: 0.55em;
  align-items: center;
  padding: 11px 24px 11px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: #1c1c1e;
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgb(5 0 56 / 10%),
    0 8px 20px -8px rgb(5 0 56 / 22%);
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Apple's own mark, at the optical size a signature is — read, not looked at. */
.get svg {
  width: 15px;
  height: 15px;
  margin-top: -0.14em;
}

.get:hover {
  transform: translateY(-1px);
}

.get:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 3px;
}

/*
 * The product, shown rather than described — and shown on a tilt.
 *
 * **The perspective is what makes it read as a screen rather than a flat picture.** It is
 * laid back from the top edge, so the window recedes and the summary nearest the reader stays
 * square to them. Three shadows rather than one: a tight contact shadow, a mid lift, and a
 * wide soft cast — a single large blur reads as fog, and the stack is what gives it a body.
 *
 * `will-change` is deliberately absent. This never animates, and promoting a 2880px bitmap to
 * its own layer costs memory on every visit to buy nothing.
 */

/*
 * The last word of the headline, changing.
 *
 * **CSS only, so the headline turns before any script has loaded.** The page's policy
 * (`server/nginx/clario`) allows only its own script files, and the headline should not wait
 * for one — so the cycle is three spans in one grid cell on a shared timeline, not a script
 * swapping text.
 *
 * **`transform` and `opacity` only** (`src/renderer/AGENTS.md` §7), and the box is sized by
 * the widest word so the line above never reflows as it turns.
 *
 * The visible words are `aria-hidden` and the group carries one label: a screen reader should
 * hear the sentence once, not three times with two of them invisible.
 */

/*
 * **A colour each, and each one is the lightest that is still readable.** These sit as 56px
 * display text on a near-white ground, where light and legible pull against each other: the
 * palette's own `#0fbcb0`, `#ff9999` and `#fcb900` measure 2.1, 1.8 and 1.6 to 1 against it,
 * so they wash out. Each of these is the lightest step of its hue still clearing 3:1, which
 * is the large-text floor — measured, not guessed.
 */

/*
 * **The chip hugs its word; the space it sits in does not move.**
 *
 * Two widths matter here and they are set separately. The grid cell is held at the longest
 * word, so nothing before or after the chip ever shifts. Each chip then sizes to its own text
 * and centres in that cell.
 *
 * **All three words are eight letters** — meetings, podcasts, webinars — so the chip barely
 * changes size at all between them, and all three are things this app is actually used on.
 * "calls" was three letters shorter than the rest and the pill visibly collapsed around it.
 */
.cycle {
  display: inline-grid;
  justify-items: center;
  vertical-align: baseline;
}

/*
 * **Each word sits in its own chip**, the pairing the app already uses for a tag: a pale
 * ground carrying its own deep text (`DESIGN.md` §3.2, §4.15).
 *
 * The padding is symmetric and the line-height is 1, which is what actually centres the text
 * in the chip — an asymmetric pad centres it by eye at one font size and nowhere else.
 */
.word {
  display: inline-flex;
  grid-area: 1 / 1;
  align-items: center;
  justify-content: center;

  /*
   * **The top and bottom padding differ, and that is what centres the text.**
   *
   * `align-items: center` centres the *line box*, not the letters, and a typeface is not
   * symmetric about it: Jakarta measures 44 up and 9 down at a 42px size, so the baseline sits
   * well below the middle. Measured in the browser, "calls" had 12.2px of chip above its ink
   * and 8.5px below — visibly low, and no flexbox property moves it.
   *
   * The `0.043em` difference below is exactly half that gap, so the ink ends up centred.
   * Descenders — the g in "meetings" — are left to hang past it, which is what they do in
   * every well-set line of type.
   */
  padding: 0.037em 0.24em 0.123em;
  font-size: 0.9em;
  line-height: 1.1;
  white-space: nowrap;
  border-radius: 0.2em;
  opacity: 0;
  animation: turn 11.4s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}

.word:nth-child(1) {
  color: #3550e8;
  background: #e9edff;
}

/* Colour and turn together: one rule per word, so the two cannot drift apart. */
.word:nth-child(2) {
  color: #cf2d63;
  background: #ffe9f1;
  animation-delay: 3.8s;
}

.word:nth-child(3) {
  color: #0a7d75;
  background: #dcf5f2;
  animation-delay: 7.6s;
}

/*
 * A word arrives, holds, and leaves — and the chip behind it moves with it, because they are
 * one element.
 *
 * **It scales as well as slides.** A slide alone reads as a ticker; a small rise out of 0.94
 * reads as the word coming forward, which is the difference between a list turning over and
 * one thing being replaced. The easing is a long-tailed ease-out, so most of the motion is
 * over early and the word settles rather than arriving at speed.
 *
 * `transform` and `opacity` only (`src/renderer/AGENTS.md` §7), so it composites and never
 * touches layout — which is also why the width above had to stop animating.
 */
@keyframes turn {
  0% {
    opacity: 0;
    transform: translateY(0.42em) scale(0.94);
  }

  5%,
  28% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  33%,
  100% {
    opacity: 0;
    transform: translateY(-0.42em) scale(0.94);
  }
}

/*
 * **Under `prefers-reduced-motion` the first word simply stands still.** Collapsing the
 * duration would leave three words stacked on top of each other, which is worse than not
 * animating — so the rule turns the cycle off rather than speeding it up.
 */
@media (prefers-reduced-motion: reduce) {
  .word {
    animation: none;
  }

  .word:first-child {
    opacity: 1;
  }
}

/*
 * **On hover the pair stands up.** The two windows are laid back on the `perspective` at rest;
 * pointing at them takes the tilt out, lifts them and pushes the back one further up — so the
 * stack resolves into two distinct sheets rather than growing, which is what a scale on its
 * own would have done. The shadow deepens with the lift, because a thing that has risen casts
 * further.
 *
 * `cubic-bezier(0.22, 1, 0.36, 1)` is a hard decelerate: nearly all the distance is covered
 * early and it settles without a bounce. At this size that reads as weight; a linear ease
 * reads as a slideshow.
 */

/* A tilt and a stack on a phone cost more legibility than they buy, and there is no hover
   there to discover the swap with — so it is one flat window and nothing to click. */

@media (prefers-reduced-motion: reduce) {

  .get {
    transition: none;
  }

  .get:hover {
    transform: none;
  }
}

/* ============================================================================
 * The header's second half, and the line under the button.
 * ========================================================================= */

header nav a,
.back {
  font-size: 14px;
  font-weight: 600;
  color: #555a6a;
  text-decoration: none;
}

header nav a:hover,
.back:hover {
  color: #1c1c1e;
}

header nav a:focus-visible,
.back:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* On the changelog, getting the app is the page's action, so it wears the pill the home
   page's button wears. Small, because the page is a document and not a pitch. */
.back {
  padding: 8px 16px;
  color: #fff;
  background: #1c1c1e;
  border-radius: 999px;
}

.back:hover {
  color: #fff;
}

.cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: clamp(22px, 3.6vh, 34px);
}

/*
 * Tertiary ink, and the glyph at the weight of the text rather than of the Apple mark above
 * it — this is a footnote to the button, not a second one.
 */
.soon {
  display: flex;
  gap: 0.5em;
  align-items: center;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #8e91a0;
}

.soon svg {
  width: 12px;
  height: 12px;
}

/* ============================================================================
 * The changelog — a spine of releases, and what changed beside it.
 *
 * It is the library's shape (DESIGN.md §4.4b): a rail carrying the version and its date, a
 * hairline running down beside it, and the release hanging off it. The app already draws a
 * column of dated things this way, and a changelog is a column of dated things.
 * ========================================================================= */

/*
 * The one page here that scrolls. `body` is a fixed-height grid because the home page is one
 * screen that must not move (`100svh`, `overflow: hidden`); a list of every release is the
 * opposite shape.
 *
 * `position: relative` so the bloom can be hung off the top of the document rather than the
 * viewport — see below.
 *
 * **`overflow: visible` is required, not incidental.** `body` is `overflow: hidden`, which is
 * what holds the home page to one screen; this page has to undo it or nothing scrolls at all.
 *
 * It is `visible` and not `clip`, which was tried here first to stop a sideways scroll and
 * does not: `body`'s overflow propagates to the viewport while `html` is `visible`, and what
 * arrives there does not clip. Measured — the page still answered `window.scrollTo(400, 0)`
 * with `scrollX === 20`. A guard that does not guard is worse than no guard, so it is gone and
 * the overflow is fixed where it starts, below.
 */
.log {
  position: relative;
  display: block;
  height: auto;
  overflow: visible;
}

/*
 * **The colour belongs to the masthead, not to the prose.**
 *
 * On the home page the bloom is light coming off the product shot: one screen, a source you
 * can see, and every colour in it sits behind a window rather than behind words. There is no
 * shot here, and the page is three thousand pixels of reading — so `position: fixed` carried
 * the same four gradients down past every release and left a blue wash under paragraph after
 * paragraph. It read as a page that had been tinted, which is the thing the home page's own
 * notes say the corner tints were removed for.
 *
 * Anchored to the top of the document instead, and 760px tall — through the masthead and the
 * newest release, gone by the second. So it does the job it does on the home page, says which
 * product this is, and then gets out of the way: the other nine releases are read on white.
 * Half strength, because at full it competed with the text even up there.
 *
 * It keeps the drift: it is the same two layers, and they are only on screen at the top.
 *
 * **And it is narrower than the page, which is what stops the sideways scroll.** On the home
 * page this box hangs 12% past each side so a gradient centred near an edge finishes outside
 * the page rather than against a straight vertical line — safe there, because that page is
 * `overflow: hidden` and cannot scroll in any direction. Inherited here it added 145px of
 * horizontal scroll: a page you could drag sideways onto nothing.
 *
 * **Pulling it back to the page edges was not enough, and the residue said why.** Twenty pixels
 * remained with no element past the edge, because the drift *scales* — `drift-a` reaches
 * `scale(1.06)` and `drift-b` starts at `1.04`. A layer exactly as wide as the page cannot also
 * be grown 6% and stay on it.
 *
 * So the box is inset instead. The worst reach in the keyframes above is `scale(1.06)` with
 * `translate3d(2.5%, …)` — 3% of growth on a side plus 2.5% of travel, 5.5% — and 6% covers it
 * with a little left over. **If those keyframes change, this number has to be checked**: it is
 * the one value here that is derived from another rule rather than from what it looks like.
 * Measured at 0 overflow, and the gradients are soft enough that losing 6% of the width at each
 * side is not visible.
 */
.log::before,
.log::after {
  position: absolute;
  inset: 0 6% auto;
  height: 760px;
  opacity: 0.5;
}

/*
 * **`justify-items` has to be reset, not just outgrown.** The home page's `main` is a grid and
 * centres its children with it; switching to `display: block` here leaves that declaration
 * standing, and Chrome now honours `justify-self` in block layout — so every child shrink-wrapped
 * to its text and sat in the middle of the page while `text-align: left` computed, correctly, as
 * left. Found by looking at the screen; nothing about the cascade said so.
 */
.log main {
  display: block;
  justify-items: normal;
  max-width: 820px;
  padding: clamp(24px, 5vh, 56px) clamp(20px, 5vw, 56px) clamp(64px, 12vh, 120px);
  overflow: visible;
  text-align: left;
}

.log h1 {
  max-width: none;
  font-size: clamp(32px, 5vw, 44px);
}

/*
 * **One line down the whole list, not one per release.** A border on each entry breaks at
 * every margin between them, which reads as a dashed rule rather than a spine. This is a
 * single element spanning the list, and the entries sit over it.
 *
 * **`--spine` is where the line runs, and it is said once.** The line's x, the rail's column
 * and the node's x are the same fact, and they were three numbers that had to be kept in
 * agreement by hand. They stopped agreeing: the node sat 2px right of the line.
 */
.spine {
  --spine: 104px;

  position: relative;
  padding: 0;
  margin: clamp(40px, 7vh, 64px) 0 0;
  list-style: none;
}

/*
 * **`#c7cad5`, not `#eef0f3`.** The hairline token was lighter than the dot field behind it
 * (`#e4e6ec`, `body`), so the line read as a gap in the texture rather than as a line — it was
 * there, and it could not be seen. This is the app's `--color-hairline-strong`, which exists
 * for exactly this: a rule that has to carry across a surface rather than divide a quiet one.
 *
 * The last stretch fades, so the timeline stops rather than being cut off by the page ending.
 */
.spine::before {
  position: absolute;
  top: 8px;
  bottom: 0;
  left: var(--spine);
  width: 1px;
  background: linear-gradient(
    #c7cad5 0,
    #c7cad5 calc(100% - 90px),
    rgb(199 202 213 / 0%)
  );
  content: '';
  transform: translateX(-50%);
}

.release {
  display: grid;
  grid-template-columns: var(--spine) 1fr;
  padding-bottom: clamp(40px, 6vh, 56px);
}

/*
 * The rail is the version and its date, right-aligned against the line — the library's
 * `Sat – Aug 28th` in the margin the spine already needed. It sticks while the release
 * beside it scrolls, so the version is still on screen at the bottom of a long entry.
 */
.rail {
  position: sticky;
  top: 24px;
  align-self: start;
  padding-right: 20px;
  text-align: right;
}

.rail h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: #1c1c1e;
  letter-spacing: -0.02em;
}

.rail h2 a {
  color: inherit;
  text-decoration: none;
}

.rail h2 a:hover {
  color: #4262ff;
}

.rail time {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: #8e91a0;
  font-variant-numeric: tabular-nums;
}

.notes {
  position: relative;
  padding-left: 32px;
}

/*
 * The node on the line — a stop on it, so it is hollow and the line does not run through.
 *
 * **Centred by `translateX(-50%)` from the line's own x, not by subtracting half its width.**
 * It used to be `left: -4px` against a 9px circle, which is only centred if 9px is the whole
 * circle — and it was not. `box-sizing: border-box` is set on `*`, and `*` does not match a
 * pseudo-element, so `::before` kept `content-box` and the 2px borders made the node 13px:
 * 2px right of the line, on every release. Measured, not guessed — the line's centre was
 * 390.5 and the node's was 392.5.
 *
 * Written this way the two share one x and the arithmetic cannot come apart again, whatever
 * size the node is given later.
 */
.notes::before {
  position: absolute;
  top: 5px;
  left: 0;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  background: #fff;
  border: 1.5px solid #c7cad5;
  border-radius: 50%;
  content: '';
  transform: translateX(-50%);
}

/*
 * The newest release is filled, and it is the only one that is.
 *
 * Ten identical stops say the list has an order and nothing about where it starts; somebody
 * arriving is looking for the current version, and this is it. The white ring holds the line
 * off it — the same job the hollow node's own fill does for the others.
 */
.release:first-child .notes::before {
  background: #1c1c1e;
  border-color: #1c1c1e;
  box-shadow: 0 0 0 3px #fff;
}

.notes p {
  margin: 0 0 14px;
  color: #2c2c34;
}

.notes p:last-child {
  margin-bottom: 0;
}

.notes strong {
  font-weight: 600;
  color: #1c1c1e;
}

/*
 * **A chip, not a faded caption.**
 *
 * These were tertiary grey small caps, which put the thing naming a section *below* the bullet
 * headlines inside it — the label read as the least important line in its own block. Simply
 * darkening it would have made it ink at 600, which is exactly what those headlines are, and
 * two things at one weight is no hierarchy either.
 *
 * A chip is a different kind of object. It says "category" by its shape rather than by
 * shouting, so it can sit beside ink text without competing and still be the first thing found
 * when scanning a page of ten releases. Both tints are already on this page.
 */
.notes h3 {
  display: inline-block;
  padding: 4px 11px;
  margin: 26px 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #555a6a;
  letter-spacing: 0.01em;
  background: #eef0f3;
  border-radius: 999px;
}

/*
 * The two kinds, in the tint pairs this page already owns — the same construction as the
 * home page's cycling words, which are a soft ground under a deep ink of the same hue.
 *
 * **The teal's ink is the app's `--tag-3-text`, not the word's `#0a7d75`.** Measured: at 48px
 * on the home page that colour is fine, and on a 12px chip it is 4.37:1 — under the 4.5 that
 * text this size needs. `#00615a` is the value the app already uses for text on a teal tag,
 * and it comes to 6.43:1 here. Blue is 5.20:1 and needed nothing.
 */
.notes .whatsnew {
  color: #1c1c1e;
  background: #f3ffc4;
}

.notes .bugfixes {
  color: #1c1c1e;
  background: #e3f9fa;
}

.notes ul {
  padding-left: 20px;
  margin: 0 0 14px;
}

.notes li {
  margin-bottom: 10px;
}

.notes code {
  padding: 1px 5px;
  font-family: ui-monospace, sfmono-regular, menlo, monospace;
  font-size: 0.88em;
  background: #f4f5f7;
  border-radius: 4px;
}

/* Quiet, because the page's own action is in the header and this is the archive. */
.dmg {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #4262ff;
  text-decoration: none;
}

.dmg:hover {
  text-decoration: underline;
}

.dmg:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/*
 * Under 640 the rail cannot hold a version and a date in 104px beside prose. It becomes a
 * line above the entry and the spine goes with it — a timeline needs room to be one, and
 * faking it in a phone's width costs the reading measure that actually matters here.
 */
@media (width <= 640px) {
  .spine::before {
    display: none;
  }

  .release {
    grid-template-columns: 1fr;
    padding-bottom: 36px;
  }

  .rail {
    position: static;
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding-right: 0;
    margin-bottom: 10px;
    text-align: left;
  }

  .notes {
    padding-left: 0;
  }

  .notes::before {
    display: none;
  }
}

/* ============================================================================
 * Folded, until somebody asks.
 *
 * Ten releases printed in full is four screens of prose before the second version — every word
 * true, and nobody reads it, which is its own kind of untrue. What stays is the lead, the
 * section titles and the bold headline of each bullet; the reasoning behind each one folds.
 * ========================================================================= */

/*
 * **Written as `:not(:has(…))`, and that direction is the point.** A browser without `:has()`
 * drops the whole rule as invalid — so the failure is every release shown in full, which is
 * merely the old page. Written the other way round (`:has(.more[open]) .detail { display: … }`)
 * the same browser would hide the text and give nobody a way to reach it.
 *
 * The toggle is a sibling of the bullets, not their parent, because the folded half lives
 * inside each `<li>` next to the headline it belongs to and printing it twice to nest it would
 * be worse than the selector.
 */
.notes:not(:has(.more[open])) .detail {
  display: none;
}

.more {
  margin-top: 16px;
}

/* `list-style` and the WebKit marker both, because the two engines draw the disclosure
   triangle from different properties and this one is drawn in `::after` instead. */
.more summary {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #4262ff;
  cursor: pointer;
  list-style: none;
}

.more summary::-webkit-details-marker {
  display: none;
}

.more summary:hover {
  color: #2a41b6;
}

.more summary:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* A chevron off two borders — no glyph, so it cannot fall back to a font that lacks it. */
.more summary::after {
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  content: '';
  transform: translateY(-2px) rotate(45deg);
}

.more[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
}

/* Both labels are in the HTML and one is hidden — generated content is not reliably
   announced, and a disclosure a screen reader cannot name is worse than a wider rule. */
.more[open] .expand,
.more:not([open]) .collapse {
  display: none;
}

/* A note that opens straight into a section has no lead paragraph to sit under. */
.notes > h3:first-child {
  margin-top: 0;
}

/* Collapsed, a bullet is one line and the list is a scan; the reading gap belongs to the
   prose, which is not there yet. */
.notes:not(:has(.more[open])) li {
  margin-bottom: 6px;
}

/* The policy uses the changelog's reading layout and the site's existing type and palette. */
.privacy main {
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.privacy section {
  margin-top: 32px;
}

.privacy h2 {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.privacy p,
.privacy li {
  margin-bottom: 14px;
}

.privacy ul {
  padding-left: 24px;
}

.privacy main a {
  color: #4262ff;
  text-underline-offset: 3px;
}

.privacy .policy-date {
  margin: 16px 0 32px;
  color: #555a6a;
  font-size: 14px;
}

header nav {
  display: flex;
  gap: 20px;
}

.privacy strong {
  font-weight: 600;
}

/* Public homepage. Shared document styles above still serve Privacy and Changelog. */
.home {
  --ink: #1c1c1e;
  --muted: #555a6a;
  --line: #e5e6ed;
  --canvas: #fff;
  --lavender: #f0edff;
  --blue: #edf1ff;
  --mint: #e5f5ef;
  --peach: #fff0e6;
  --pink: #fcecf2;
  --sand: #faf4df;
  --accent: #4c54cb;
  --section-gap: clamp(76px, 9vw, 132px);
  position: relative;
  display: block;
  height: auto;
  overflow: visible;
  background-color: var(--canvas);
}
.home::before,
.home::after {
  position: absolute;
  inset: 280px 6% auto;
  height: 800px;
}
.home main {
  display: block;
  justify-items: normal;
  max-width: none;
  padding: 0;
  overflow: clip;
  text-align: left;
}
.home .hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 38px 40px 0;
  text-align: center;
}
.home h1 {
  max-width: 26ch;
  margin: 0 auto;
  font-size: clamp(32px, 4.3vw, 54px);
}
.home .cta {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.home a:focus-visible,
.home button:focus-visible,
.home summary:focus-visible,
.home input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
.home .skip {
  position: absolute;
  z-index: 9;
  top: 12px;
  left: 20px;
  padding: 10px 16px;
  color: var(--canvas);
  background: var(--ink);
  transform: translateY(-180%);
}
.home .skip:focus {
  transform: none;
}
.home .band {
  position: relative;
  max-width: 1180px;
  padding: var(--section-gap) 40px 0;
  margin: auto;
}
.home .section-heading {
  margin-bottom: 48px;
}
.home h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.home h2 em {
  color: var(--accent);
  font-style: normal;
}
.home .section-heading > p:last-child {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.home h3,
.home h4 {
  font-weight: 600;
  color: var(--ink);
}
.home .ask-band {
  padding-bottom: 0;
}
.home .example-label {
  color: var(--muted);
  font-size: 10px;
}
.home [hidden] {
  display: none !important;
}
.home .answers {
  min-height: 340px;
}
.home .answer {
  padding-top: 34px;
}
.home .answer h3 {
  width: fit-content;
  margin: 0 0 28px auto;
  padding: 12px 18px;
  background: #f7f7fa;
  border-radius: 14px 14px 3px 14px;
  font-size: 14px;
}
.home .answer p,
.home .answer li {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: var(--muted);
}
.home .answer strong {
  color: var(--ink);
  font-weight: 600;
}
.home .answer ul {
  padding-left: 19px;
  margin: 14px 0 18px;
}
.home .answer li + li {
  margin-top: 8px;
}
.home .source {
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.home .source summary {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  color: var(--accent);
  font-size: 10px;
  cursor: pointer;
}
.home .source blockquote {
  margin: 14px 0 0;
  padding: 10px 15px;
  border-left: 2px solid var(--accent);
  background: var(--blue);
  color: var(--muted);
  font-size: 12px;
}
.home .follow-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
}
.home .feature-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.home .task-card {
  background: var(--mint);
}
.home .card-copy {
  padding: 32px 32px 0;
}
.home .feature-number {
  font-size: 10px;
  color: var(--muted);
}
.home .card-copy h3 {
  margin: 13px 0 10px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.home .card-copy p {
  max-width: 40ch;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.home .task-demo {
  margin: 42px 26px 0;
  padding: 26px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.home .task-demo label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
}
.home .task-demo input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 2px 0 0;
  accent-color: #247361;
}
.home .task-demo input:checked + span {
  text-decoration: line-through;
  color: var(--muted);
}
.home .task-demo small {
  display: block;
  margin-top: 12px;
  font-size: 10px;
  color: var(--muted);
}
.home .tag {
  display: inline-block;
  padding: 3px 9px;
  margin-right: 8px;
  color: var(--accent);
  background: var(--lavender);
  border-radius: 999px;
}
.home .task-demo blockquote {
  margin: 20px 0 0 30px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
}
.home .card-note {
  margin: 20px 30px 28px;
  font-size: 10px;
  text-align: center;
  color: var(--muted);
}
.home .device {
  width: 100%;
}
.home .faq-band {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
}
.home .faq-list details {
  border-bottom: 1px solid var(--line);
}
.home .faq-list details:first-child {
  border-top: 1px solid var(--line);
}
.home .faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 0;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.home .faq-list summary::-webkit-details-marker {
  display: none;
}
.home .faq-list summary::after {
  content: '+';
  color: var(--muted);
  font-size: 20px;
}
.home .faq-list details[open] summary::after {
  content: '−';
}
.home .faq-list details p {
  margin: 0 25px 24px 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
}
@media (width <= 900px) {
  .home .follow-grid {
    grid-template-columns: 1fr 1fr;
  }
  .home .card-copy {
    padding: 24px 22px 0;
  }
  .home .task-demo {
    margin: 25px 16px 0;
    padding: 20px;
  }
  .home .faq-band {
    gap: 30px;
  }
}
@media (width <= 640px) {
  .home .hero {
    padding: 34px 20px 0;
  }
  .home .get {
    justify-content: center;
    padding: 12px 17px;
    font-size: 12px;
  }
  .home .cta {
    gap: 8px;
  }
  .home .band {
    padding-left: 22px;
    padding-right: 22px;
  }
  .home .section-heading {
    margin-bottom: 30px;
  }
  .home .section-heading > p:last-child {
    font-size: 13px;
  }
  .home .answer h3 {
    font-size: 12px;
  }
  .home .answers {
    min-height: 400px;
  }
  .home .answer p,
  .home .answer li {
    font-size: 12px;
  }
  .home .source summary {
    flex-direction: column;
    gap: 5px;
  }
  .home .follow-grid,
  .home .capture-grid,
  .home .privacy-band,
  .home .faq-band {
    grid-template-columns: 1fr;
  }
  .home .card-copy {
    padding: 28px 26px 0;
  }
  .home .task-demo {
    margin: 28px 26px 0;
  }
  .home .faq-band {
    gap: 0;
  }
}
.home .feature-card:nth-child(2),
.home .capture-card:nth-child(2) {
  --reveal-delay: 90ms;
}
.home .answer:not([hidden]) {
  animation: answer-in 220ms ease-out both;
}
@keyframes answer-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home .answer:not([hidden]) {
    animation: none;
  }
}
.home .proof-band .section-heading {
  margin-bottom: 36px;
}
.home .story-visual {
  padding: 24px;
  background: #fdfdff;
  box-shadow: none;
}
.home .story-visual .room-composition {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.home .story-visual .table-scene {
  width: min(100%, 340px);
  height: 250px;
  margin: auto;
}
.home .story-visual .meeting-table {
  inset: 65px 12px 35px;
}
.home .story-visual .person-two,
.home .story-visual .person-three {
  top: 106px;
}
.home .visual-caption {
  margin: 20px 0 0;
  text-align: center;
  font-size: 9px;
  line-height: 1.7;
  color: var(--muted);
}
.home .video-visual {
  padding: 38px 24px 24px;
  background: #fdfaf6;
}
.home .video-visual .capture-composition {
  width: 100%;
  margin: 0;
}
.home .video-visual .browser-example {
  width: 96%;
}
.home .video-visual .recording-pill {
  right: -4px;
}
.home .video-visual .import-note {
  width: 92%;
  margin-top: 25px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home .room-visual:hover .laptop-mini {
    transform: translateX(-50%) translateY(-3px);
  }
  .home .story-visual .laptop-mini {
    transition: transform 250ms ease;
  }
  .home .video-visual:hover .browser-example {
    transform: rotate(0);
  }
  .home .story-visual .browser-example {
    transition: transform 300ms ease;
  }
}
@media (width <= 900px) {
  .home .story-visual {
    padding: 18px;
  }
}
@media (width <= 640px) {
  .home .story-visual {
    padding: 18px;
  }
  .home .video-visual .video-poster {
    min-height: 210px;
  }
  .home .video-visual .recording-pill {
    top: 205px;
  }
  .home .video-visual .import-note {
    width: 100%;
    margin-top: 36px;
    padding: 15px 12px;
  }
}
.home .connection-chip { display:flex; align-items:center; gap:12px; padding:8px 22px 8px 8px; border:1px solid var(--line); border-radius:999px; background:var(--canvas); color:var(--ink); font-size:13px; }
.home .connection-logo { display:grid; place-items:center; width:43px; height:43px; flex-shrink:0; border-radius:50%; background:#f5f5f8; }
.home .connection-logo img { width:27px; height:27px; object-fit:contain; }
@media (width <= 640px) {
  .home .connection-chip { font-size:11px; padding:6px 15px 6px 6px; gap:8px; }
  .home .connection-logo { width:34px; height:34px; }
  .home .connection-logo img { width:23px; height:23px; }
}

/* Sound pulses radiate from the laptop in the in-person illustration. */
.home .room-visual .room-rings i {
  inset:0;
  border-color:rgba(130,115,165,.38);
  animation:laptop-listening-pulse 2.4s ease-out infinite;
}
.home .room-visual .room-rings i:nth-child(2) { animation-delay:-.8s; }
.home .room-visual .room-rings i:nth-child(3) { animation-delay:-1.6s; }
@keyframes laptop-listening-pulse {
  0% { transform:scale(.5); opacity:0; }
  15% { opacity:.75; }
  100% { transform:scale(1.4); opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
  .home .room-visual .room-rings i { animation:none; opacity:.35; transform:none; }
}

/* One balanced table illustration; all three people sit within its outline. */
.home .room-visual { padding:26px; background:radial-gradient(ellipse at 50% 50%,#faf8f4,#fdfdff 75%); }
.home .room-visual .table-scene { width:100%; max-width:510px; height:340px; }
.home .room-visual .meeting-table { inset:28px 12px 28px; border-radius:140px; border:1px solid #dfd4c5; background:linear-gradient(145deg,#f4ede2,#e9dfcf); box-shadow:0 9px 0 #dbd0c0,0 18px 24px -20px #71624c45,inset 0 2px 0 #fff9; }
.home .room-visual .person-one { left:50%; top:43px; transform:translateX(-50%); }
.home .room-visual .person-two { left:30px; top:142px; }
.home .room-visual .person-three { right:30px; top:142px; }
.home .room-visual .person > span { width:47px; height:47px; border-width:5px; box-shadow:0 3px 8px #62557310; }
.home .room-visual .person small { font-size:9px; color:#857b70; }
.home .room-visual .laptop-mini { top:96px; width:96px; height:65px; border:3px solid #b4b8c6; border-radius:7px 7px 3px 3px; background:linear-gradient(145deg,#fff,#f8f9ff); box-shadow:0 6px 12px #80756516; }
.home .room-visual .laptop-mini::after { width:116px; height:6px; bottom:-7px; background:linear-gradient(#c4c7d2,#a3a8b8); }
.home .room-visual .laptop-mini img { width:40px; height:40px; }
.home .room-visual .room-rings { top:61px; bottom:auto; left:50%; width:170px; height:155px; transform:translateX(-50%); }
.home .room-visual .table-label { bottom:23px; font-size:10px; color:#928474; }
@media (width <= 640px) {
 .home .room-visual { padding:10px; }
 .home .room-visual .table-scene { height:300px; }
 .home .room-visual .meeting-table { inset:18px 2px 23px; }
 .home .room-visual .person-one { top:31px; }
 .home .room-visual .person-two { left:12px; top:132px; }
 .home .room-visual .person-three { right:12px; top:132px; }
 .home .room-visual .person > span { width:39px; height:39px; font-size:13px; }
 .home .room-visual .laptop-mini { top:93px; width:77px; height:54px; }
 .home .room-visual .laptop-mini::after { width:93px; }
 .home .room-visual .laptop-mini img { width:32px; height:32px; }
 .home .room-visual .room-rings { top:65px; width:140px; height:125px; }
}
.home .shared-page { padding:27px; border:1px solid #e4e3ec; border-radius:12px; background:var(--canvas); box-shadow:0 12px 25px -22px #66568350; }
.home .shared-page-brand { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:27px; }
.home .shared-page-brand > span:first-child { display:flex; align-items:center; gap:7px; font-family:Poppins,sans-serif; font-size:15px; color:var(--ink); }
.home .shared-page-brand > span:last-child { color:var(--muted); font-size:8px; }
.home .shared-page h3 { margin:0 0 7px; font-size:22px; font-weight:500; letter-spacing:-.025em; }
.home .shared-page-meta { margin:0 0 28px; color:var(--muted); font-size:9px; }
.home .shared-page-section { display:flex; align-items:flex-start; gap:11px; margin-top:24px; }
.home .shared-section-number { display:grid; place-items:center; width:23px; height:23px; flex-shrink:0; background:var(--lavender); color:var(--accent); font-size:10px; border-radius:5px; }
.home .shared-page-section h4 { margin:2px 0 9px; font-size:12px; font-weight:600; }
.home .shared-page-section p { margin:0; color:var(--muted); font-size:11px; line-height:1.85; }
.home .shared-page-bottom { display:flex; flex-wrap:wrap; gap:14px; padding-top:22px; margin-top:27px; border-top:1px solid var(--line); font-size:8px; color:#788d80; }
@media (width <= 640px) {
 .home .shared-page { padding:21px; }
 .home .shared-page h3 { font-size:20px; }
 .home .shared-page-brand > span:last-child { font-size:7px; }
}

/* Speech-like variation for the illustrated recording indicator. */
.home .video-visual .mini-wave i {
  height:23px;
  transform-origin:center;
  animation:recording-speech-bars 1.17s ease-in-out infinite;
}
.home .video-visual .mini-wave i:nth-child(2) { animation-duration:.83s; animation-delay:-.38s; }
.home .video-visual .mini-wave i:nth-child(3) { animation-duration:1.31s; animation-delay:-.72s; }
.home .video-visual .mini-wave i:nth-child(4) { animation-duration:.97s; animation-delay:-.21s; }
.home .video-visual .mini-wave i:nth-child(5) { animation-duration:1.43s; animation-delay:-.91s; }
.home .video-visual .mini-wave i:nth-child(6) { animation-duration:1.09s; animation-delay:-.54s; }
.home .video-visual .mini-wave i:nth-child(7) { animation-duration:1.27s; animation-delay:-.16s; }
@keyframes recording-speech-bars {
  0%,100% { transform:scaleY(.26); }
  14% { transform:scaleY(.68); }
  29% { transform:scaleY(.38); }
  43% { transform:scaleY(1); }
  57% { transform:scaleY(.46); }
  73% { transform:scaleY(.82); }
  88% { transform:scaleY(.18); }
}
@media (prefers-reduced-motion:reduce) {
  .home .video-visual .mini-wave i { animation:none; transform:scaleY(.6); }
}
.home .chat-citation { position:relative; display:inline-flex; align-items:center; justify-content:center; padding:3px; margin-left:5px; border:0; border-radius:5px; background:transparent; color:#5263ff; font-size:12px; cursor:pointer; vertical-align:middle; }
.home .chat-citation[aria-expanded='true'] { display:flex; justify-content:flex-start; width:100%; height:20px; margin:12px 0 0; padding:0 9px; background:#f4f1ff; border-radius:999px; }
.home .chat-citation::after { content:attr(data-label); position:absolute; left:50%; bottom:100%; transform:translateX(-50%); padding:4px 7px; border-radius:4px; background:#fff; border:1px solid #eeeef4; color:#858998; font-size:8px; white-space:nowrap; opacity:0; pointer-events:none; }
.home .chat-citation:hover::after,.home .chat-citation:focus-visible::after { opacity:1; }
.home .chat-inline-clip { position:relative; width:100%; max-width:520px; margin:12px 0 20px; overflow:hidden; border:1px solid #e1e2ed; border-radius:13px; background:linear-gradient(130deg,#e8e8f2,#f5f0e8); animation:answer-in 220ms ease-out both; }
@keyframes ask-reading-pulse { from { opacity:.3; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) {
 .home .ask-app.is-scripted[data-phase='answered'] .ask-app-answer,.home .chat-inline-clip,.home .ask-app-thinking > span { animation:none; }
}

/* Chat on the left, the section's message alongside it on the right. */
.home .ask-band { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr); align-items:center; column-gap:55px; row-gap:16px; }
.home .ask-band > .section-heading { grid-column:2; grid-row:1; margin:0; text-align:left; }
.home .ask-band > .section-heading h2 { font-size:clamp(29px,3.2vw,42px); line-height:1.23; }
.home .ask-band > .section-heading > p:last-child { margin-top:22px; font-size:14px; line-height:1.9; }
@media (width <= 800px) {
 .home .ask-band { grid-template-columns:1fr; gap:26px; }
 .home .ask-band > .section-heading { grid-column:1; grid-row:1; }
 .home .ask-band > .section-heading h2 { font-size:30px; }
}

/* Tasks and sharing, together under one message. */
.home .follow-band .follow-grid { grid-template-columns:1fr 1fr; gap:24px; }
.home .follow-band .section-heading { text-align:center; }
.home .follow-band .section-heading > p:last-child { margin-top:20px; }
.home .follow-band .feature-card { display:flex; flex-direction:column; }
.home .follow-band .card-copy { padding:30px 30px 0; }
.home .follow-band .card-copy h3 { font-size:23px; }
.home .follow-band .card-copy p { max-width:none; min-height:72px; }
.home .follow-band .link-card { background:var(--lavender); }
.home .follow-band .link-card .shared-page { margin:30px 25px 0; padding:24px; box-shadow:none; }
.home .follow-band .link-card .shared-page-brand { margin-bottom:20px; }
.home .follow-band .link-card .shared-page h3 { font-size:20px; }
.home .follow-band .link-card .shared-page-meta { margin-bottom:20px; }
.home .follow-band .link-card .shared-page-section { margin-top:19px; }
.home .follow-band .link-card .shared-page-bottom { margin-top:20px; padding-top:17px; }
.home .follow-band .task-demo { margin:30px 25px 0; padding:25px; }
.home .follow-band .card-note { margin:22px 25px 25px; font-size:10px; line-height:1.7; }
@media (width <= 640px) {
 .home .follow-band .follow-grid { grid-template-columns:1fr; }
 .home .follow-band .card-copy { padding:25px 24px 0; }
 .home .follow-band .card-copy h3 { font-size:21px; }
 .home .follow-band .card-copy p { min-height:0; }
 .home .follow-band .task-demo,.home .follow-band .link-card .shared-page { margin:25px 20px 0; padding:20px; }
}
.home .ask-band .chat-inline-clip { max-width:none; }

/* Words resolve in place; the layout is present before the animation begins. */
.home .resolve-word { display:inline-block; }
@keyframes word-resolve {
  from { opacity:0; filter:blur(4px); transform:translateY(3px); }
  to { opacity:1; filter:blur(0); transform:translateY(0); }
}
@keyframes citation-resolve {
  from { opacity:0; visibility:hidden; transform:translateY(2px); }
  to { opacity:1; visibility:visible; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce), print {
  .home .resolve-word,.home .chat-citation,.home .ask-answer-actions {
    animation:none !important; filter:none !important; transform:none !important; opacity:1 !important; visibility:visible !important;
  }
}

/* Hero aligned with the rest of the page: ink, lavender, clear copy and quiet controls. */
.home .hero { padding:52px 40px 0; }
.home .hero h1 { max-width:950px; font-size:clamp(35px,4.4vw,58px); line-height:1.2; letter-spacing:-.045em; font-weight:500; }
.home .hero h1 .resolve-word { animation:word-resolve 520ms cubic-bezier(.23,1,.32,1) var(--word-delay,0ms) both; }
.home .hero .cta { margin-top:29px; gap:12px; }
.home .hero .get { min-height:43px; padding:10px 20px; border:1px solid var(--ink); box-shadow:0 2px 5px #1c1c1e09; font-size:13px; font-weight:500; }
.home .hero .get + .get { color:var(--ink); background:#ffffffd9; border-color:#d9dbe5; box-shadow:none; }
@media (width <= 640px) {
 .home .hero { padding:36px 22px 0; }
 .home .hero h1 { font-size:34px; }
 .home .hero .get { font-size:11px; padding:10px 15px; min-height:41px; }
 .home .hero .cta { gap:9px; margin-top:23px; }
}
@media (prefers-reduced-motion:reduce) { .home .hero h1 .resolve-word { animation:none; } }

/* Reading pages share the landing page's type, ink and quiet violet accents. */
.document-page {
  background: radial-gradient(circle, #e7e8ef 1px, transparent 1px) 0 0 / 28px 28px, #fdfdff;
}
.document-page::before,
.document-page::after {
  display: none;
}
.document-page main {
  width: min(1200px, 100% - 2 * clamp(20px, 5vw, 56px));
  max-width: none;
  padding: clamp(40px, 7vw, 96px) 0 clamp(80px, 10vw, 140px);
  margin: 0 auto;
}
.document-masthead {
  padding-bottom: 56px;
  border-bottom: 1px solid #e5e6ed;
}
.document-page .document-masthead h1 {
  margin: 0;
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.045em;
  color: #1c1c1e;
}
.document-masthead h1 em {
  color: #5b5f6b;
  font-style: normal;
}
.document-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
}
.document-intro p {
  max-width: 34em;
  margin: 0;
  color: #5b5f6b;
  font-size: 17px;
  line-height: 1.6;
}
.document-intro .feed-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: #1c1c1e;
  background: #fff;
  border: 1px solid #e6e7eb;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.document-intro .feed-link:hover { border-color: #c9cbd2; }
.feed-link svg { width: 16px; height: 16px; }
.document-page .spine { --spine: 150px; max-width: 960px; margin-top: 56px; }
.document-page .release { padding-bottom: 32px; scroll-margin-top: 24px; }
.document-page .rail { padding: 26px 28px 0 0; }
.document-page .rail h2 { font-size: 23px; }
.document-page .rail time { margin-top: 9px; color: #5b5f6b; font-size: 13px; }
.document-page .notes {
  padding: 24px 0 36px;
  margin-left: 32px;
  border-bottom: 1px solid #e6e7eb;
  font-size: 16px;
  line-height: 1.65;
}
.document-page .notes::before { top: 34px; left: -32px; }
.document-page .spine::before { top: 40px; }
.document-page .release:last-child .notes { border-bottom: 0; }
.document-page .release:first-child .rail::after {
  display: inline-block;
  padding: 3px 10px;
  margin-top: 13px;
  color: #1c1c1e;
  background: #d4ff26;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  content: 'Latest release';
}
.document-page .release:first-child .notes::before { background: #1c1c1e; border-color: #1c1c1e; }
.document-page .notes h3 { margin: 24px 0 12px; font-size: 13px; }
.document-page .notes h3:first-child { margin-top: 0; }
.document-page .notes li { padding-left: 3px; }
.document-page .notes li::marker { color: #9a9eab; }
.document-page .notes .dmg {
  padding: 8px 16px;
  margin-top: 20px;
  border: 1px solid #e6e7eb;
  border-radius: 999px;
  color: #1c1c1e;
  font-size: 14px;
  text-decoration: none;
}
.document-page .notes .dmg:hover { border-color: #c9cbd2; background: #fff; text-decoration: none; }
.document-page .more summary { font-size: 14px; font-weight: 600; color: #1c1c1e; }
.document-page.privacy main { max-width: 1200px; }
.document-page .policy-date { margin: 28px 0 0; color: #5b5f6b; font-size: 14px; }
.policy-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px;
  padding-top: 48px;
}
.policy-nav { position: sticky; top: 30px; align-self: start; }
.policy-nav p { margin: 0 0 12px; color: #1c1c1e; font-size: 14px; font-weight: 600; }
.document-page .policy-nav a {
  display: block;
  padding: 7px 0;
  color: #5b5f6b;
  font-size: 15px;
  text-decoration: none;
}
.document-page .policy-nav a:hover { color: #1c1c1e; }
.policy-content {
  max-width: 760px;
  color: #5b5f6b;
  font-size: 17px;
  line-height: 1.7;
}
.policy-content > p:first-child { margin-top: 0; color: #1c1c1e; }
.document-page .policy-content section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #e6e7eb;
  scroll-margin-top: 32px;
}
.document-page .policy-content h2 { margin: 0 0 16px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; color: #1c1c1e; }
.document-page .policy-content a { color: #1c1c1e; text-decoration: underline; text-underline-offset: 3px; }
.policy-content section:last-child { padding: 28px; background: #f5f6f8; border: 0; border-radius: 20px; }
.policy-content section p:last-child { margin-bottom: 0; }
.document-page a:focus-visible { outline: 2px solid #4262ff; outline-offset: 5px; border-radius: 4px; }
@media (max-width: 800px) {
  .policy-layout { grid-template-columns: 1fr; gap: 28px; }
  .policy-nav { position: static; display: flex; flex-wrap: wrap; gap: 0 20px; }
  .policy-nav p { width: 100%; margin-bottom: 8px; }
  .document-page .policy-nav a { padding: 5px 0; }
}
@media (max-width: 640px) {
  .document-page main { padding: 40px 0 72px; }
  .document-masthead { padding-bottom: 32px; }
  .document-intro { align-items: flex-start; flex-direction: column; }
  .document-page .spine { margin-top: 28px; }
  .document-page .rail { position: static; padding: 0 0 16px; align-items: center; gap: 12px; }
  .document-page .rail time { margin: 0; }
  .document-page .release:first-child .rail::after { margin: 0 0 0 auto; }
  .document-page .notes { margin: 0; padding: 8px 0 28px; }
  .policy-content section:last-child { padding: 20px; }
}

/*
 * The header and footer every page shares (`header.html`, `footer.html`, inserted by the site
 * builder). Ink on white in the home page's type, and one ink pill for the download.
 */
.site-header {
  width: min(1200px, 100% - 2 * clamp(20px, 5vw, 56px));
  margin: 0 auto;
  padding: 26px 0;
}

.site-header nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.site-header nav a {
  font-size: 14px;
  font-weight: 600;
  color: #5b5f6b;
  text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a[aria-current='page'] {
  color: #1c1c1e;
}

.site-header nav .nav-get {
  padding: 8px 16px;
  color: #fff;
  background: #1c1c1e;
  border-radius: 999px;
}

.site-header nav .nav-get:hover {
  color: #fff;
  background: #000;
}

.page-footer {
  position: relative;
  z-index: 1;
  background: #f5f6f8;
  border-top: 1px solid #e6e7eb;
}

.page-footer-inner {
  width: min(1200px, 100% - 2 * clamp(20px, 5vw, 56px));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) 0 28px;
}

.page-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px clamp(40px, 8vw, 120px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.page-footer-mark {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: #1c1c1e;
  text-decoration: none;
}

.page-footer-mark img {
  width: 28px;
  height: 28px;
}

.page-footer-mark span {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.page-footer-line {
  margin: 24px 0 0;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: #1c1c1e;
}

.page-footer-line span {
  color: #5b5f6b;
}

.page-footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, auto));
  gap: 32px clamp(40px, 6vw, 96px);
}

.page-footer-links p {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1e;
}

.page-footer-links a {
  display: block;
  padding: 5px 0;
  font-size: 15px;
  color: #5b5f6b;
  text-decoration: none;
}

.page-footer a:hover {
  color: #1c1c1e;
}

.page-footer a:focus-visible {
  outline: 2px solid #4262ff;
  outline-offset: 3px;
  border-radius: 4px;
}

.page-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid #e0e2e7;
}

.page-footer-copy {
  margin: 0;
  font-size: 14px;
  color: #5b5f6b;
}


.page-footer-up {
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1e;
  text-decoration: none;
}

.page-footer-up span {
  margin-left: 6px;
}

@media (width <= 900px) {
  .site-header nav a:not(.nav-get) {
    display: none;
  }
}

@media (width <= 720px) {
  .page-footer-main {
    grid-template-columns: 1fr;
  }
}