/* styles.css — jaydenbruck.com
   ---------------------------------------------------------------------------
   Token set, elevation ladder, easing pair, glass frame, reveal primitive and
   letter motion are Ola's own, taken from reference/ola-website-ref/assets/
   ola.css and letters.css so this page and tryola.ai are the same material.
   The button system is Poke's depth-button-v2 (reference/poke.com/index.html).
   Card elevation is Poke's card shadow ladder. The named-token aliasing, the
   split-layer fixed header and the touch-target expander are x.ai's. The
   aurora background gradient and the gradient-clipped heading are Cluely's.
   Sources are cited inline, section by section.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1. TOKENS
   Verbatim from ola.css :root, plus a small set of additions this page needs.
   Every functional token aliases a named one, x.ai's rule, so a re-theme is
   one line per name rather than a search across the file.
   =========================================================================== */

:root {
  /* --- ground and ink, ola.css --- */
  --ground:         #F7F6F4;
  --ground-deep:    #EDECEA;
  --ground-dark:    #0C0D10;
  --ground-dark-2:  #040507;
  --ink:            #141519;
  --ink-body:       #5C606A;
  --ink-quiet:      #62656D;
  --hairline:       rgba(0, 0, 0, 0.08);
  --hairline-firm:  rgba(0, 0, 0, 0.14);
  --glass-edge:     rgba(0, 0, 0, 0.10);
  --glass-edge-lit: rgba(0, 0, 0, 0.22);
  --inner-light:    rgba(255, 255, 255, 0.90);
  --shadow:         rgba(24, 28, 38, 0.14);
  --shadow-soft:    rgba(24, 28, 38, 0.08);
  --ink-on-deep:    #F2F3F5;
  --ink-on-deep-2:  #9EA3AB;

  --sans: "InterVariable", "Inter Fallback", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- type scale, ola.css --- */
  --say:     clamp(34px, 5.4vw, 74px);   /* the hero */
  --say-2:   clamp(28px, 3.4vw, 46px);   /* section headings */
  --say-3:   clamp(20px, 1.9vw, 26px);   /* card and row headings */
  --deck:    clamp(17px, 1.35vw, 20px);  /* the sentence under a heading */
  --field:   17px;
  --micro:   13px;
  --marker:  12px;

  /* --- measure, ola.css --- */
  --column:  560px;
  --measure: 1100px;
  --wide:    1240px;
  --gutter:  24px;

  --field-h: 62px;
  --radius:  999px;      /* the pill, everywhere */
  --radius-card: 20px;
  --header-h: 54px;

  /* elevation: alpha falls as blur and offset rise, tinted cool rather than
     black, closed by an inset white top light so a surface reads as lit and
     not merely raised. ola.css --ladder-low, verbatim. */
  --ladder-low:
      0 0.87px  3.08px  0 rgba(183, 181, 203, 0.31),
      0 4.37px  6.16px  0 rgba(183, 181, 203, 0.27),
      0 9.18px  8.01px  0 rgba(183, 181, 203, 0.16),
      0 16.61px 9.24px  0 rgba(183, 181, 203, 0.05),
      inset 0 3px 14px 0 rgba(255, 255, 255, 0.92);

  /* three-tier ambient card shadow, and a hover state that ADDS a fourth,
     larger, colour-mixed layer rather than darkening the first three — that is
     what makes a hover read as lifting into light. poke.com, card markup. */
  --card-border:       #E2E1DE;
  --card-hover-border: color-mix(in oklch, #C4C4C4 6%, #E6E5E2);
  --card-shadow:
      0 1px 2px rgba(0, 0, 0, 0.035),
      0 3px 8px rgba(0, 0, 0, 0.035),
      0 8px 28px rgba(0, 0, 0, 0.045);
  --card-hover-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 3px 10px rgba(0, 0, 0, 0.04),
      0 8px 28px rgba(0, 0, 0, 0.05),
      0 10px 40px 4px color-mix(in oklch, #C4C4C4 7%, transparent);

  /* --- the two curves, ola.css. One everyday move, one that overshoots. --- */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* anything.com's .ease-out-strong, used for press and filter changes */
  --ease-strong: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 700px) {
  :root {
    --field:   16.5px;   /* never below 16: iOS zooms the page on focus */
    --field-h: 56px;
    --gutter:  26px;
  }
}
@media (max-width: 360px) { :root { --gutter: 20px; } }

/* ===========================================================================
   2. THE FAMILY
   One variable font for the whole page, self-hosted, no network request to
   anyone. Roles are separated by the opsz axis rather than by a second face.
   ola.css @font-face, and the metric-matched local fallback with it, so a slow
   network shows Arial at Inter's metrics and the swap shifts nothing.
   =========================================================================== */

@font-face {
  font-family: "InterVariable";
  src: url("./assets/fonts/inter-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Segoe UI"), local("Roboto");
  size-adjust: 105.3%;
  ascent-override: 92.0%;
  descent-override: 22.9%;
  line-gap-override: 0%;
}

/* ===========================================================================
   3. THE ROOM
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--field)/1.55 var(--sans);
  font-variation-settings: "opsz" 14;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* One focus ring for the whole page, and it is never removed — only moved onto
   the object that actually reads as focused. ola.css. */
:where(a, button, input, summary):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}

/* skip link */
.skip {
  position: absolute; top: 8px; left: 50%; z-index: 40;
  transform: translate(-50%, -200%);
  padding: 10px 18px; border-radius: var(--radius);
  background: var(--ink); color: var(--ground);
  font-size: var(--micro); font-weight: 500; text-decoration: none;
  transition: transform .28s var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); }

/* ===========================================================================
   4. THE FRAME (fixed header)
   The glass capsule is ola.css .frame, verbatim in structure and shadow.
   The blur sits on the capsule itself here rather than on a separate layer,
   because the capsule IS the background; the split-layer trick from x.ai is
   used instead on the full-width rail behind it, so the rail can fade in on
   scroll without touching the capsule's own contents.
   =========================================================================== */

.frame {
  position: fixed;
  z-index: 30;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--header-h);
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 0 8px 0 22px;
  border-radius: var(--radius);
  background:
    linear-gradient(-75deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.42) 48%,
      rgba(255, 255, 255, 0.10));
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  box-shadow:
    inset 0 1px 1px var(--inner-light),
    inset 0 -1px 1px var(--shadow-soft),
    0 1px 3px var(--shadow-soft),
    0 10px 26px -8px var(--shadow);
  transition: transform .5s var(--ease), opacity .4s var(--ease), padding .58s var(--ease);
}

.frame-rule { width: 1px; height: 20px; background: var(--hairline); flex: 0 0 auto; }

.frame-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.frame-nav a {
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 450;
  letter-spacing: -0.006em;
  color: var(--ink-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.frame-nav a:hover { color: var(--ink); background: rgba(0, 0, 0, 0.045); }

/* Below the ground's transition the page is black, and a black pill on black
   is a hole. Set from the same scroll position the shader would use. ola.css */
.on-deep-frame .frame {
  background:
    linear-gradient(-75deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.16) 48%,
      rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.24),
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 10px 30px -10px rgba(0, 0, 0, 0.55);
}
.on-deep-frame .wordmark { color: var(--ink-on-deep); }
.on-deep-frame .frame-rule { background: rgba(255, 255, 255, 0.20); }
.on-deep-frame .frame-nav a { color: var(--ink-on-deep-2); }
.on-deep-frame .frame-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.10); }

/* --- the wordmark and the way it collapses ---------------------------------
   ola.css, mechanism and geometry both, with our own word in it. Two things
   happen on one duration and one curve, and the second is the one that is easy
   to miss: the letters travel through a window whose LEFT edge is fixed, so
   " bruck" retracts INTO "jayden" rather than sliding off the end of the bar,
   and a negative end margin grows in lockstep to take back exactly the space
   they vacate, so the capsule closes up instead of keeping a hole.
   Nothing here touches opacity, because a fade is not a morph.
   --------------------------------------------------------------------------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin-inline-end: 0;
  flex: 0 0 auto;
  font-size: 19px;
  font-weight: 500;
  font-variation-settings: "opsz" 18;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  transition: margin-inline-end .58s var(--ease), color .3s var(--ease);
}
.wordmark-rest {
  flex: 0 0 auto;
  display: inline-block;
  overflow: hidden;
  width: 62px;
}
.wordmark-rest > span {
  display: inline-block;
  transform-origin: left center;
  transition: transform .58s var(--ease);
}
.wordmark.is-mark { margin-inline-end: -60px; }
.wordmark.is-mark .wordmark-rest > span { transform: translateX(-102%) scaleX(0.52); }

/* until the script has armed it, and whenever motion is refused, it holds the
   resting word and never plays */
.wordmark:not(.is-ready),
.wordmark:not(.is-ready) .wordmark-rest > span,
.wordmark.is-still,
.wordmark.is-still .wordmark-rest > span { transition: none; }
.wordmark.is-still { margin-inline-end: 0; }
.wordmark.is-still .wordmark-rest > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wordmark, .wordmark-rest > span { transition: none; }
  .wordmark.is-mark { margin-inline-end: 0; }
  .wordmark.is-mark .wordmark-rest > span { transform: none; }
}

/* ===========================================================================
   5. BUTTONS
   poke.com's depth-button-v2, transcribed from the shipped markup. One
   component, two token sets. The recipe: a four-stop vertical gradient that
   holds flat for the first ~55-65% then falls away at the bottom, a three-tier
   ambient shadow, a 1.25px inset ring, an inset sheen, and a half-pixel
   text-shadow in the gradient's own direction so the label sits IN the
   surface. Hover moves brightness rather than swapping a colour, so the
   gradient survives it.
   The invisible 2.75rem hit-target expander is x.ai's, rendered only where the
   pointer is coarse.
   =========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  font: 500 15px/1 var(--sans);
  font-variation-settings: "opsz" 16;
  letter-spacing: -0.008em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .15s ease-out, filter .15s ease-out;
}
.btn:active { transform: scale(0.98); }
.btn .tap {
  position: absolute; left: 50%; top: 50%;
  width: max(100%, 2.75rem); height: max(100%, 2.75rem);
  transform: translate(-50%, -50%);
}
@media (pointer: fine) { .btn .tap { display: none; } }

.btn-dark {
  color: #fff;
  text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #3A3A3A 0%, #3A3A3A 52.4%, #2C2C2C 80.29%, #1F1F1F 100%);
  box-shadow:
    0 0.5px 1px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1.25px #353535,
    inset 0 0 12px 0 rgba(255, 255, 255, 0.1);
}
.btn-dark:hover { filter: brightness(1.2); }

.btn-light {
  color: #1C1C1C;
  text-shadow: 0 0.5px 0 #FFF;
  background: linear-gradient(180deg, #EDECEA 0%, #EDECEA 65%, #DCDCDC 85%, #C4C4C4 100%);
  box-shadow:
    0 0.5px 1px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.04),
    inset 0 0 0 1.25px #C9C7C4,
    inset 0 0 12.2px 0 #FFF;
}
.btn-light:hover { filter: brightness(0.985); }

/* on the deep ground the light button would be the brightest thing on the
   page; the pair inverts instead. */
.on-deep .btn-dark {
  color: #101216;
  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, #FDFDFD 0%, #F2F3F5 60%, #DFE1E5 100%);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    0 8px 24px -8px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1.25px rgba(255, 255, 255, 0.9),
    inset 0 0 12px 0 rgba(255, 255, 255, 0.6);
}
.on-deep .btn-dark:hover { filter: brightness(1.06); }
.on-deep .btn-light {
  color: var(--ink-on-deep);
  text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.10) 65%, rgba(255,255,255,.05) 100%);
  box-shadow:
    inset 0 0 0 1.25px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.22),
    0 10px 26px -12px rgba(0, 0, 0, 0.7);
}
.on-deep .btn-light:hover { filter: brightness(1.35); }

/* the small pill in the header: ola.css .pill, spring on the lift */
.pill {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(24, 28, 38, 0.28);
  transition: transform .34s var(--spring), box-shadow .3s var(--ease);
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(24, 28, 38, 0.34); }
.pill:active { transform: translateY(0) scale(0.97); }
.on-deep-frame .pill { background: var(--ink-on-deep); color: #101216; }

/* a text link that carries an arrow, anything.com's affordance */
.go-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-decoration: none;
}
.go-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .34s var(--ease); }
.go-link:hover svg { transform: translateX(4px); }
.go-link u { text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--hairline-firm); }
.go-link:hover u { text-decoration-color: currentColor; }

/* ===========================================================================
   6. LAYOUT AND SECTION RHYTHM
   One rule sets the vertical rhythm for the whole page and grows it with the
   viewport, which is Cluely's gap-12 / md:gap-24 / lg:gap-32 on <main>,
   expressed as a clamp instead of three breakpoints.
   =========================================================================== */

main { position: relative; z-index: 1; }

.band {
  position: relative;
  padding: clamp(72px, 11vh, 132px) var(--gutter);
}
.inner { width: 100%; max-width: var(--measure); margin-inline: auto; }
.inner-wide { width: 100%; max-width: var(--wide); margin-inline: auto; }
.inner-column { width: 100%; max-width: var(--column); margin-inline: auto; }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* --- headings -------------------------------------------------------------
   The eyebrow / heading / one-sentence-deck stack is the shape every one of
   the five reference sites uses for a section opener. Tracking tightens as the
   size grows, and it is set per step rather than as one em ratio reused
   everywhere — Cluely's approach, Ola's numbers.
   --------------------------------------------------------------------------- */

.eyebrow {
  margin: 0 0 18px;
  font-size: var(--marker);
  font-weight: 500;
  font-variation-settings: "opsz" 14;
  letter-spacing: 0.10em;
  color: var(--ink-quiet);
  font-feature-settings: "tnum" 1;
}

.say {
  margin: 0;
  font-size: var(--say);
  font-weight: 400;
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.034em;
  line-height: 1.04;
  text-wrap: balance;
  color: var(--ink);
}
.say-2 {
  margin: 0;
  font-size: var(--say-2);
  font-weight: 400;
  font-variation-settings: "opsz" 30;
  letter-spacing: -0.028em;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--ink);
}
.say-3 {
  margin: 0;
  font-size: var(--say-3);
  font-weight: 500;
  font-variation-settings: "opsz" 22;
  letter-spacing: -0.020em;
  line-height: 1.18;
  color: var(--ink);
}

/* Cluely's gradient-clipped heading: a flat near-black H2 fades to a cool grey
   across its own width. Costs nothing and stops a big heading reading as a
   default. Their stops were #19191D -> #626275; these are ours, on the ink. */
.say-2.clipped {
  background: linear-gradient(96deg, #17181C 0%, #4C5060 78%, #6C7180 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* the clip crops descenders on some engines without a little breathing room */
  padding-bottom: 0.08em;
}
@supports not (background-clip: text) { .say-2.clipped { color: var(--ink); } }
/* a per-letter blur inside a background-clip:text box is where engines start
   inventing artefacts. The clipped headings keep the travel and the fade. */
.clipped .ltr { filter: none; }

.deck {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: var(--deck);
  line-height: 1.55;
  letter-spacing: -0.010em;
  color: var(--ink-body);
  text-wrap: pretty;
}
.note {
  margin: 14px 0 0;
  font-size: var(--micro);
  line-height: 1.55;
  color: var(--ink-quiet);
}

/* ===========================================================================
   7. THE HERO
   The aurora is Cluely's: two stacked radial-gradients, a soft blob and a
   vignette that closes it back to the ground, with no image asset at all.
   Theirs is a #4a8fdd blue over a photograph; this page has no accent colour,
   so the blob is white light and a cool grey shadow low in the frame, which is
   the same technique doing a quieter job.
   =========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(116px, 16vh, 178px);
  padding-bottom: clamp(56px, 8vh, 96px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(58% 46% at 50% 6%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(120% 78% at 50% -8%, rgba(214, 219, 232, 0.55) 18%, rgba(214, 219, 232, 0) 72%),
    radial-gradient(90% 60% at 50% 108%, rgba(24, 28, 38, 0.055) 0%, rgba(24, 28, 38, 0) 70%);
}

/* The headline runs the full measure rather than sharing the column with the
   portrait, because line two has to hold "i build agents that browse" on one
   line while the carousel is running. At 1240px that fits at full size; inside
   a 654px column it would have cost twenty points of type. */
.hero > .inner-wide > .eyebrow,
.hero > .inner-wide > .hero-say { max-width: var(--measure); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  align-items: start;
  gap: clamp(32px, 5vw, 76px);
  margin-top: clamp(34px, 5vh, 58px);
}

.hero .deck { max-width: 44ch; margin-top: 0; }

/* --- the two lines -------------------------------------------------------
   Each line is its own block, so the break is fixed and a long verb can widen
   a line but never add one. ola.css says the same thing about its own hero and
   for the same reason: the copy under it must not move under someone's thumb.
   ------------------------------------------------------------------------- */
/* THE HERO TAKES ITS OWN SIZE, solved once against the longest sentence it
   can ever hold — "i build agents that browse." — before anything moves.
   ola.css does the same thing for the same reason: a hero whose line is longer
   than its other lines needs a scale of its own, or it wraps. `--hero-fit` is
   1 wherever the line already fits, so nothing shrinks that does not have to. */
.hero-say { margin: 0; font-size: calc(var(--say) * var(--hero-fit, 1)); }

/* --- the ink moves with the page ----------------------------------------
   The headline is not one flat black for the whole scroll: it carries a very
   small amount of the body ink, and how much depends on how far the hero has
   travelled. At the top it is `--ink` exactly; a viewport later it has drifted
   about a quarter of the way toward `--ink-body`, which is roughly #141519 to
   #242730 — a shift you feel rather than see, and one that stays inside the
   two inks the page already uses. No third hue enters, and nothing sweeps:
   x.ai's restraint, moved from a bar under one word onto the ink itself.
   `--hero-t` is set from the same rAF-throttled scroll pass that drives the
   wordmark, so the page adds no second listener for it.
   ------------------------------------------------------------------------- */
.hero-say { color: var(--ink); }
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .hero-say { color: color-mix(in oklab, var(--ink-body) calc(var(--hero-t, 0) * 26%), var(--ink)); }
}
.hero-vis { display: block; }
.hl { display: block; white-space: nowrap; }
.hl + .hl { margin-top: 0.02em; }

/* THE SWAP SLOT. It holds one phrase at a time in a box of a known width, so
   the full stop after it never moves while the verb underneath is changing,
   and so the collapse to "ola" is a real width closing rather than a reflow.
   Both widths are measured off the real rendered glyphs, never estimated from
   letter counts — letters set as inline-blocks are a few px wider than a plain
   text run. ola.css's `.vow`, one level up. */
.swap {
  /* an atomic inline box swallows the letter-spacing that would otherwise sit
     between the last letter of the word and the full stop after it */
  margin-right: -0.034em;
  display: inline-grid;
  position: relative;
  vertical-align: baseline;
  width: var(--swap-w, auto);
  transition: width .42s var(--ease);
}
.swap { justify-items: start; }
.swap > .phase { grid-area: 1 / 1; text-align: left; white-space: nowrap; }
/* the phrase on its way out must not size the slot: for the length of the
   transition the slot holds two, and the wider of them would push the line off
   the side of the screen. It is only a picture by then. */
.swap > .phase.is-out { position: absolute; top: 0; left: 0; }

/* THE WORD ROLLS THROUGH A WINDOW.
   The crop is Cluely's (`overflow-hidden` with a negative margin matched by an
   equal padding, so the word's own ascender and descender box is taken out of
   the flow and the slot still sits on the line's baseline). Without it a word
   arriving from below at this size landed on top of the paragraph underneath
   the headline.

   ⚠️ AND THE WINDOW NEEDS SOMETHING IN FLOW TO HOLD IT OPEN. The word on its
   way out has to leave the flow — while two words are in it the slot is as
   wide and as tall as the WIDER of them, which pushes the line around on every
   verb — so for the 140ms between one leaving and the next being appended the
   slot had no in-flow content at all and collapsed to its own padding: a
   measured 18px against a 74px headline. A hidden copy of the longest verb
   sits in it permanently and holds the box open and the baseline true; every
   word a reader actually sees is positioned over it.
   ------------------------------------------------------------------------- */
/* ⚠️ THE CROP CANNOT GO ON THE SLOT ITSELF. An inline-block whose overflow is
   not `visible` takes its baseline from its bottom margin edge instead of from
   its last line box, so putting the crop here lifted every verb off the line
   it was supposed to be sitting on. And a block with non-visible overflow has
   no baseline to give its parent either, which is the same failure one level
   down. The hidden copy stays in the flow and is the only thing that decides
   the slot's size and its baseline; the window is lifted out of the flow
   entirely and simply covers it.

   THE SLOT IS HELD AT THE WIDEST VERB and never moves after that. Gliding it
   per word was smoother in isolation and wrong in place: it made the length of
   line two a function of which verb happened to be showing, which is exactly
   the thing a headline sitting above a paragraph must not do. */
.vow {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  width: var(--vow-w, auto);
}
.vow .ghost { display: block; visibility: hidden; white-space: nowrap; }
.vow .win {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  bottom: -0.14em;        /* room for a descender: "buy" has one */
  overflow: hidden;
}
.vow .letters { position: absolute; left: 0; top: 0; white-space: nowrap; }

/* The carousel runs faster than the page's ordinary letter motion, and its
   words travel further: at 14px the outgoing and incoming words sat on top of
   each other at half opacity each and read as a double exposure. The travel is
   set in em so it stays proportional to the headline at every size. */
.vow .ltr {
  transition:
    transform .11s var(--ease) var(--d, 0ms),
    opacity   .10s var(--ease) var(--d, 0ms),
    filter    .10s var(--ease) var(--d, 0ms);
}
.vow .letters.is-in .ltr  { transform: translateY(0.62em); }
.vow .letters.is-out .ltr { transform: translateY(-0.62em); }

@media (prefers-reduced-motion: reduce) {
  .vow .ltr { transition: opacity .14s var(--ease); transition-delay: 0ms; }
  .vow .letters.is-in .ltr,
  .vow .letters.is-out .ltr { transform: none; }
}
.no-blur .vow .letters.is-in .ltr,
.no-blur .vow .letters.is-out .ltr { filter: none; }

/* measured off-screen, from the real fonts, before anything moves */
.ruler {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  top: 0; left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .swap { transition: none; }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

/* the numbers row. x.ai sets these as small tabular-nums pairs at two
   alpha steps of one ink rather than as a second muted palette. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 40px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}
.facts div { min-width: 78px; }
.facts dt {
  font-size: 21px;
  font-weight: 500;
  font-variation-settings: "opsz" 20;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
}
.facts dd {
  margin: 3px 0 0;
  font-size: var(--micro);
  line-height: 1.35;
  color: var(--ink-quiet);
}

/* --- the portrait ---------------------------------------------------------
   Held in the same glass the field and the capsule are made of, so the one
   photograph on the page belongs to the same material as everything around it.
   --------------------------------------------------------------------------- */

.portrait {
  position: relative;
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 430px;
}
.portrait-frame {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: var(--ground-deep);
  box-shadow: var(--ladder-low), 0 0 0 1px var(--glass-edge);
}
.portrait-frame img {
  width: 100%;
  aspect-ratio: 1000 / 1412;
  object-fit: cover;
  transform: scale(1.02);
}
/* an inner hairline, drawn over the image so the frame reads as an edge rather
   than as the photograph simply stopping */
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34), inset 0 -60px 80px -60px rgba(20, 21, 25, 0.35);
}
.portrait figcaption {
  margin-top: 14px;
  font-size: var(--micro);
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* ===========================================================================
   8. THE SWEEP UNDER ONE WORD
   x.ai paints a 3px bar under the single word its whole message hangs on and
   sweeps a gradient across it once, 400% background-size, background-position
   travelling 150% -> -150%. Theirs is a nine-stop rainbow; this page has no
   accent colour, so the sweep is light travelling along an ink bar. Same
   mechanism, one pass, then it rests.
   =========================================================================== */

.marked { position: relative; display: inline-block; white-space: nowrap; }
.marked .bar {
  position: absolute;
  left: 0; right: 0; bottom: -0.06em;
  height: 3px;
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
  background-image: linear-gradient(90deg,
    rgba(20, 21, 25, 0.30) 0%,
    rgba(20, 21, 25, 0.30) 35%,
    rgba(20, 21, 25, 0.85) 47%,
    rgba(255, 255, 255, 0.95) 52%,
    rgba(20, 21, 25, 0.85) 57%,
    rgba(20, 21, 25, 0.30) 68%,
    rgba(20, 21, 25, 0.30) 100%);
  background-size: 400% 100%;
}
.marked.is-drawn .bar {
  opacity: 1;
  transform: scaleX(1);
  transition: transform .62s var(--ease), opacity .3s var(--ease);
  animation: sweep 2600ms linear 1 340ms;
}
@keyframes sweep {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .marked.is-drawn .bar { transition: none; animation: none; background-position: 50% 0; }
}

/* ===========================================================================
   9. LETTERS
   ola/assets/letters.css, verbatim. A short 14px of travel, a fade, and a blur
   of 4px on a 14ms stagger between neighbours. The blur is the part that
   matters: a clipped edge reads as CUT OFF, a blur reads as GONE. Safari drops
   the blur only (.no-blur), set from script.
   =========================================================================== */

.wd { display: inline-block; white-space: nowrap; }
.ltr {
  display: inline-block;
  transform: translateY(0);
  opacity: 1;
  filter: blur(0px);
  transition:
    transform .26s var(--ease) var(--d, 0ms),
    opacity   .22s var(--ease) var(--d, 0ms),
    filter    .22s var(--ease) var(--d, 0ms);
}
.letters.is-in .ltr {
  transform: translateY(14px);
  opacity: 0;
  filter: blur(4px);
  transition: none;
}
/* And away upward, losing focus rather than sliding behind an edge. This is
   the half of letters.js the first pass of this page had no use for — nothing
   here left, it only ever arrived — so it was never ported, and the carousel
   then had an exit state that changed nothing: measured off a live run, every
   outgoing word sat at opacity 1.00 and its full travel at once, which is what
   put two readable words on the line together. */
.letters.is-out .ltr {
  transform: translateY(-14px);
  opacity: 0;
  filter: blur(4px);
}
.no-blur .ltr,
.no-blur .letters.is-in .ltr,
.no-blur .letters.is-out .ltr { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .ltr { transform: none; filter: none; transition: opacity .18s var(--ease); transition-delay: 0ms; }
  .letters.is-in .ltr { transform: none; opacity: 0; filter: none; transition: none; }
  .letters.is-out .ltr {
    transform: none; opacity: 0; filter: none;
    transition: opacity .12s var(--ease); transition-delay: 0ms;
  }
}

/* --- the reveal, ola.css. Fires once: a page you cannot re-scroll into
       hiding. Per-element stagger is authored in the HTML as data-delay. --- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   .66s var(--ease) var(--reveal-delay, 0ms),
    transform .82s var(--ease) var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; transition: opacity .28s var(--ease) var(--reveal-delay, 0ms); }
}

/* ===========================================================================
   10. THE OLA BAND
   =========================================================================== */

.ola {
  background: #F3F2F0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}

.ola-head { text-align: center; }
.ola-head .deck { margin-inline: auto; max-width: 52ch; }

/* the lockup: the mark IS the o, and "la" follows it. Baseline-aligned by hand
   because the ring's optical centre sits above the x-height. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 4px 0 10px;   /* it is an h2: the UA's own 0.83em margins are ~70px here */
  line-height: 1;
  font-weight: 500;
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.030em;
  font-size: clamp(46px, 7vw, 86px);
  color: var(--ink);
}
.lockup svg {
  width: 1.02em;
  height: 1.02em;
  margin-right: -0.085em;
  flex: 0 0 auto;
}
.lockup .rest { display: inline-block; }

/* --- the stage the glass ring is painted into ------------------------------
   The canvas paints its own ground, so its rectangle is faded back into the
   band with a radial mask rather than colour-matched by hand. The ring is
   drawn well inside the box, so the mask only ever touches empty ground.
   Fallback chain, kept intact from ola/assets/mark.js: WebGL, then a flat 2D
   canvas, then hidden — and when it is hidden the section still says
   everything it says, which is the point of the chain.
   --------------------------------------------------------------------------- */

.stage {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: clamp(24px, 4vh, 48px) auto clamp(28px, 5vh, 56px);
  aspect-ratio: 6 / 5;
}
/* No mask and no radius: the shader paints the band's own colour at the
   frame's edge, so the rectangle has no edge to hide. */
.stage canvas { width: 100%; height: 100%; background: #F3F2F0; }
.no-ring .stage { display: none; }

.stage-note {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  font-size: var(--micro);
  color: var(--ink-quiet);
  white-space: nowrap;
}

/* --- the pull quote -------------------------------------------------------
   His own words, set at heading size, because on this page they are the
   argument and everything around them is evidence for it.
   --------------------------------------------------------------------------- */

.quote {
  margin: 0 auto;
  max-width: 640px;
  text-align: center;
}
.quote blockquote {
  margin: 0;
  font-size: var(--say-2);
  font-weight: 400;
  font-variation-settings: "opsz" 30;
  letter-spacing: -0.028em;
  line-height: 1.14;
  text-wrap: balance;
  color: var(--ink);
}
.quote-wide { max-width: 940px; }
.quote cite {
  display: block;
  margin-top: 18px;
  font-size: var(--micro);
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
}

/* --- what it does --------------------------------------------------------
   Two rails running against each other. The mechanism is Cluely's logo strip
   (cluely.com/_next/static/css/e0f47fde64bf82ef.css):

       @keyframes logos { 0% { transform: translate(0) } to { transform: translate(-50%) } }
       .animate-logos { animation: logos 60s linear infinite }

   — duplicate the track's children exactly once and translate the track by
   half its own width, forever, linearly. The set is cloned by script until one
   half is wider than the viewport, which is the part that decides whether the
   loop shows a seam or not.

   Each pill is Poke's card: the three-tier ambient shadow at rest, a hover
   that ADDS a fourth colour-mixed glow layer rather than darkening the first
   three, and the 6px lift on 200ms ease-out its integration cards use
   (`transition-transform duration-200 ease-out hover:-translate-y-1.5`).
   The rails stop while a pointer is over them, so a pill can actually be read
   and hovered rather than chased.
   ------------------------------------------------------------------------- */

.does {
  margin: clamp(46px, 7vh, 84px) 0 0;
  /* full-bleed out of the measure: a strip that stops at the text column reads
     as a component, and this is meant to read as a current running past */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* the ends fade into the band instead of being cut off by it */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}

.rail { display: flex; overflow: hidden; }
.rail .track { display: flex; flex: 0 0 auto; }
.rail .set {
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  margin: 0;
  padding: 0 7px;
  list-style: none;
}

/* armed only once the script has cloned enough copies to fill the width */
.does.is-running .rail .track { will-change: transform; animation: rail-left var(--dur, 42s) linear infinite; }
.does.is-running [data-rail="b"] .track { animation-name: rail-right; }
.does.is-running:hover .rail .track,
.does.is-running:focus-within .rail .track { animation-play-state: paused; }

@keyframes rail-left  { 0% { transform: translateX(0) }    to { transform: translateX(-50%) } }
@keyframes rail-right { 0% { transform: translateX(-50%) } to { transform: translateX(0) } }

.cap {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 52px;
  padding: 0 22px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
  font-size: 16px;
  letter-spacing: -0.010em;
  color: var(--ink);
  white-space: nowrap;
  user-select: none;
  transition:
    transform 200ms ease-out,
    box-shadow 250ms cubic-bezier(.25, .46, .45, .94),
    border-color 250ms cubic-bezier(.25, .46, .45, .94);
}
.cap:hover {
  transform: translateY(-6px);
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-shadow);
}

/* Nothing moves, and the same ten pills sit in two centred wrapped rows. That
   is a finished layout, not a stripped one — which is the whole point of
   arming the animation from script rather than from the stylesheet. */
.does:not(.is-running):not(.is-lining) { width: auto; margin-left: auto; -webkit-mask-image: none; mask-image: none; }
.does:not(.is-running):not(.is-lining) .rail { overflow: visible; }
.does:not(.is-running):not(.is-lining) .rail .set { flex-wrap: wrap; justify-content: center; width: 100%; }
/* the second rail carries the same ten in another order so the two moving
   lines never read as one repeating list. Standing still there is nothing for
   it to do but say everything twice, so it goes. */
.does:not(.is-running):not(.is-lining) [data-rail="b"] { display: none; }
/* the running layout, minus the animation: the set has to be measured on one
   line, because a wrapped set is as wide as its container however many pills
   are in it, and cloning against that number never terminates */
.does.is-lining .rail { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .does.is-running .rail .track { animation: none; }
}

/* --- the stage photograph -------------------------------------------------- */

.talk {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
  margin-top: clamp(56px, 8vh, 104px);
}
.talk figure { margin: 0; }
.talk .shot {
  border-radius: 20px;
  overflow: hidden;
  background: var(--ground-deep);
  box-shadow: var(--card-shadow), 0 0 0 1px var(--glass-edge);
}
.talk .shot img { width: 100%; aspect-ratio: 1200 / 1300; object-fit: cover; }
.talk figcaption {
  margin-top: 14px;
  font-size: var(--micro);
  line-height: 1.5;
  color: var(--ink-quiet);
}
.talk .quote { text-align: left; margin: 0; max-width: 100%; }
.talk .after { display: flex; align-items: baseline; gap: 18px; margin-top: 30px; }
.talk .after .note { margin: 0; }

/* ===========================================================================
   11. CARDS
   Poke's ladder at rest, and a hover that adds a fourth, larger, colour-mixed
   layer rather than darkening the first three. The border colour is derived
   with color-mix from the resting one, so the relationship survives a retheme.
   =========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--card-shadow);
  transition:
    transform 150ms cubic-bezier(.25, .46, .45, .94),
    box-shadow 250ms cubic-bezier(.25, .46, .45, .94),
    border-color 250ms cubic-bezier(.25, .46, .45, .94);
}
.card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-shadow);
}
/* a faint inner glow, poke's after:shadow-[inset_0_0_3px_2px_#e6e5e230] */
.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 3px 2px rgba(230, 229, 226, 0.19);
}

/* ===========================================================================
   12. HOW IT GETS BUILT
   =========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(38px, 5.5vh, 62px) 0 0;
  padding: 0;
}
.tile {
  padding: 22px 22px 20px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--card-shadow);
}
.tile dt {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500;
  font-variation-settings: "opsz" 26;
  letter-spacing: -0.03em;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  color: var(--ink);
}
.tile dd {
  margin: 10px 0 0;
  font-size: var(--micro);
  line-height: 1.45;
  color: var(--ink-quiet);
}

/* ===========================================================================
   13. WEALTH AI
   =========================================================================== */

.two-up {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}

.brandmark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.brandmark img { width: 52px; height: auto; }
.brandmark span {
  font-size: 19px;
  font-weight: 500;
  font-variation-settings: "opsz" 18;
  letter-spacing: -0.014em;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0 16px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
  letter-spacing: -0.008em;
  color: var(--ink-body);
}
.card .steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: var(--marker);
  font-weight: 500;
  letter-spacing: 0.10em;
  line-height: 1.6;
  color: var(--ink-quiet);
  font-feature-settings: "tnum" 1;
}
.steps b { font-weight: 500; color: var(--ink); }

/* a live indicator. anything.com's pulsing-dot, 1.5s, scale 1 -> 1.15. */
.live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--glass-edge);
  font-size: var(--micro);
  color: var(--ink-body);
}
.live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2E9E63;
  box-shadow: 0 0 10px rgba(46, 158, 99, 0.5);
  animation: pulsing-dot 1.5s ease-in-out infinite;
}
@keyframes pulsing-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } }

/* ===========================================================================
   14. TRACK RECORD
   The numbered rows step inward down the page, so the list reads as a
   staircase rather than a table. ola.css .row, .marker.
   =========================================================================== */

.rows { margin: 0; padding: 0; list-style: none; }
.row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0 18px;
  align-items: start;
  padding: clamp(26px, 3.6vh, 42px) 0;
  border-top: 1px solid var(--hairline);
}
.rows .row:last-child { border-bottom: 1px solid var(--hairline); }
.rows .row:nth-child(2) { padding-left: 5%; }
.rows .row:nth-child(3) { padding-left: 10%; }
.rows .row:nth-child(4) { padding-left: 15%; }
.row .marker {
  font-size: var(--marker);
  font-weight: 500;
  font-variation-settings: "opsz" 14;
  letter-spacing: 0.10em;
  line-height: 1.9;
  color: var(--ink-quiet);
  font-feature-settings: "tnum" 1;
}
.row p { margin: 10px 0 0; max-width: 56ch; color: var(--ink-body); font-size: 16px; }
.row p.say-3 { margin: 0; font-size: clamp(19px, 1.5vw, 22px); color: var(--ink); }

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 46px;
  margin-top: clamp(34px, 5vh, 56px);
}
.logos img {
  height: 22px;
  width: auto;
  opacity: 0.46;
  transition: opacity .3s var(--ease);
}
.logos img:hover { opacity: 0.82; }
.logos .lbl {
  font-size: var(--micro);
  letter-spacing: 0.10em;
  color: var(--ink-quiet);
}

/* ===========================================================================
   15. THE DEEP END
   The page runs light at the top and deep at the foot, which is the shape of
   Ola's own page. Ink, glass and buttons all take their on-deep variants.
   =========================================================================== */

.deep {
  position: relative;
  background: linear-gradient(180deg, var(--ground-dark) 0%, var(--ground-dark-2) 100%);
  color: var(--ink-on-deep);
  overflow: hidden;
}
.deep::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 46% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 68%);
}
.deep .say, .deep .say-2, .deep .say-3 { color: var(--ink-on-deep); }
.deep .deck, .deep .note, .deep .eyebrow { color: var(--ink-on-deep-2); }
.deep .rule { background: rgba(255, 255, 255, 0.12); }

.contact { text-align: center; }
.mail {
  display: inline-block;
  margin-top: 26px;
  font-size: clamp(21px, 2.6vw, 32px);
  font-weight: 400;
  font-variation-settings: "opsz" 26;
  letter-spacing: -0.024em;
  color: var(--ink-on-deep);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color .3s var(--ease);
}
.mail:hover { text-decoration-color: currentColor; }

/* --- elsewhere -----------------------------------------------------------
   The circular glass of tryola.ai's own submit button (ola.css `.go`), on the
   deep ground, with its spring on the press. Three marks, evenly weighted, so
   the row reads as a considered part of the sign-off rather than a badge strip.
   ------------------------------------------------------------------------- */
.social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: clamp(30px, 4.5vh, 46px) 0 0;
}
.social a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--ink-on-deep);
  text-decoration: none;
  background: linear-gradient(-75deg, rgba(255,255,255,.05), rgba(255,255,255,.14) 48%, rgba(255,255,255,.05));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 10px 24px -12px rgba(0, 0, 0, 0.7);
  transition: transform .34s var(--spring), background-color .26s var(--ease), box-shadow .26s var(--ease);
}
.social a svg { width: 19px; height: 19px; fill: currentColor; }
.social a:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.34),
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 14px 30px -12px rgba(0, 0, 0, 0.8);
}
.social a:active { transform: translateY(0) scale(0.95); }
@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }

/* the two ways to reach him sit on one line where there is room for them, and
   stack where there is not */
.contact .mail { margin-inline: 14px; }
.contact .mail.tel { font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .contact .mail { display: block; margin-inline: 0; }
  .contact .mail.tel { margin-top: 14px; }
}

.sign {
  width: 190px;
  margin: clamp(34px, 5vh, 54px) auto 0;
  opacity: 0.9;
  filter: invert(1);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  max-width: var(--measure);
  margin: clamp(42px, 6vh, 72px) auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--micro);
  color: var(--ink-on-deep-2);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================================
   16. THE PHONE
   =========================================================================== */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { max-width: 16ch; }
  .portrait { justify-self: start; max-width: 380px; }
  .two-up, .talk { grid-template-columns: 1fr; }
  .talk .quote { max-width: 34ch; }
}

@media (max-width: 760px) {
  .frame { top: 12px; height: 50px; padding: 0 7px 0 18px; gap: 10px; }
  .wordmark { font-size: 17px; }
  .wordmark-rest { width: 56px; }
  .wordmark.is-mark { margin-inline-end: -54px; }
  .frame-nav, .frame-rule { display: none; }
  .pill { height: 36px; padding: 0 15px; font-size: 13.5px; }

  .band { padding: clamp(58px, 8vh, 84px) var(--gutter); }
  .hero { padding-top: clamp(104px, 14vh, 140px); }
  .hero h1 { max-width: 100%; }

  .row { grid-template-columns: 1fr; gap: 4px; padding: 26px 0; }
  .rows .row:nth-child(2), .rows .row:nth-child(3), .rows .row:nth-child(4) { padding-left: 0; }
  .row .marker { line-height: 1.5; }

  .does { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: 1fr; }
  .does li { padding: 16px 16px; font-size: 14.5px; gap: 10px; }

  .btn { height: 46px; width: 100%; }
  .cta-row { gap: 10px; }
  .cta-row .btn { width: auto; flex: 1 1 auto; min-width: 150px; }

  .stage { aspect-ratio: 1 / 1; }
  .cap { height: 46px; padding: 0 17px; font-size: 15px; }
  .does { gap: 11px; }
  .does:not(.is-running) .rail .set { gap: 10px; }
  .hero-grid { margin-top: 30px; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; }
  .foot { justify-content: flex-start; }
}

@media (max-width: 400px) {
  .does { grid-template-columns: minmax(0, 1fr); }
}


/* --- hackathon caption: Cursor mark + line ------------------------------ */
.cap-cursor{
  display:flex; align-items:center; gap:.62em;
  flex-wrap:wrap;
}
.cap-cursor .cursor-mark{
  flex:0 0 auto;
  height:.78em; width:auto;
  color:var(--ink);
  opacity:.88;
  position:relative; top:.02em;
}
.cap-cursor span{ flex:0 1 auto; }