:root {
  /* Rootly palette - ink does the structural work, violet punctuates */
  --ink:        #100f12;   /* text, borders, filled CTA */
  --snow:       #fbfaff;   /* page canvas */
  --paper:      #ffffff;   /* cards */
  --graphite:   #44434e;
  --slate:      #65646e;   /* body copy */
  --mist:       #787685;   /* muted */
  --wash:       #ebe5ff;   /* soft surfaces, tag fills */
  --edge:       #d9cffa;   /* hairlines, input borders */
  --iris:       #8d6fde;   /* brand accent - strokes, never floods */
  --amethyst:   #4a3e8a;
  --dawn-viol:  #7748f6;   /* hero gradient anchor */
  --rose-drift: #f5bbc3;   /* hero gradient terminus */

  /* product status - only ever inside the product surface */
  --working:    #4ec97f;
  --attention:  #ff9f2e;
  --asking:     #59a6ff;
  --done:       #6ee7c0;
  --ctx-ok:     #5cd18c;
  --ctx-high:   #ffb847;
  --ctx-crit:   #ff6b47;

  /* type - Cluely's serif display over Rootly's quiet UI sans */
  /* One typeface for everything, the way the reference does it - weight and
     tracking carry the hierarchy, not a second family. Ppmori is a licensed
     face, so this is its documented substitute. */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* layout */
  --page-max: 1200px;
  --section-gap: 80px;
  --card-pad: 28px;
  --gut: clamp(20px, 5vw, 40px);

  /* radius - every interactive element is a full pill */
  --r-pill: 1440px;
  --r-card: 17.3px;
  --r-card-lg: 34.6px;
  --r-mockup: 17.3px;
  --r-small: 6.92px;

  /* Ridge silhouettes for the hero, drawn inline so nothing is licensed and
     nothing is downloaded. NB: every '#' must be percent-encoded or the data
     URI is cut at the first one and the whole layer silently vanishes. */
  --massif: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221440%22%20height=%22700%22%20viewBox=%220%200%201440%20700%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22warm%22%20x1=%22.15%22%20y1=%220%22%20x2=%22.8%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23fdf1dd%22/%3E%3Cstop%20offset=%2240%25%22%20stop-color=%22%23f6d8b6%22/%3E%3Cstop%20offset=%2276%25%22%20stop-color=%22%23e6b391%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23cd9480%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22mid%22%20x1=%221%22%20y1=%220%22%20x2=%22.2%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23a89ae1%22/%3E%3Cstop%20offset=%2255%25%22%20stop-color=%22%238e7dd0%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%237466bd%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22far%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23d6cff5%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23afa2e8%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22near%22%20x1=%220%22%20y1=%220%22%20x2=%22.3%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%239384d3%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%236a5cb0%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22fade%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22/%3E%3Cstop%20offset=%2254%25%22%20stop-color=%22%23fff%22/%3E%3Cstop%20offset=%2280%25%22%20stop-color=%22%239a9a9a%22/%3E%3Cstop%20offset=%22100%25%22%20stop-color=%22%23000%22/%3E%3C/linearGradient%3E%3Cmask%20id=%22dissolve%22%3E%3Crect%20x=%220%22%20y=%220%22%20width=%221440%22%20height=%22700%22%20fill=%22url(%23fade)%22/%3E%3C/mask%3E%3Cfilter%20id=%22b1%22%3E%3CfeGaussianBlur%20stdDeviation=%2210%22/%3E%3C/filter%3E%3Cfilter%20id=%22b2%22%3E%3CfeGaussianBlur%20stdDeviation=%224%22/%3E%3C/filter%3E%3C/defs%3E%3Cg%20mask=%22url(%23dissolve)%22%3E%3Cpath%20fill=%22url(%23far)%22%20opacity=%22.85%22%20filter=%22url(%23b1)%22%20d=%22M0%20520%2092%20452%20172%20486%20258%20408%20340%20456%20428%20392%20516%20444%20606%20376%20692%20424%20782%20362%20868%20414%20952%20356%201042%20406%201130%20340%201218%20396%201306%20328%201382%20386%201440%20350V700H0z%22/%3E%3Cpath%20fill=%22url(%23mid)%22%20opacity=%22.95%22%20filter=%22url(%23b2)%22%20d=%22M0%20600%2080%20528%20160%20566%20248%20496%20332%20544%20420%20482%20508%20534%20598%20466%20684%20520%20772%20454%20860%20510%20948%20444%201038%20502%201126%20432%201214%20492%201304%20422%201374%20480%201440%20444V700H0z%22/%3E%3Cpath%20fill=%22url(%23warm)%22%20d=%22M560%20700%20656%20520%20712%20566%20802%20428%20872%20500%20954%20372%201046%20462%201140%20306%201256%20434%201348%20356%201440%20410V700z%22/%3E%3Cpath%20fill=%22url(%23warm)%22%20opacity=%22.5%22%20d=%22M420%20700%20506%20566%20552%20612%20600%20556%20640%20604%20664%20660%20646%20700z%22/%3E%3Cpath%20fill=%22%23fff%22%20opacity=%22.62%22%20filter=%22url(%23b2)%22%20d=%22M1140%20310%201180%20372%201146%20392%201112%20356z%22/%3E%3Cpath%20fill=%22%23fff%22%20opacity=%22.45%22%20filter=%22url(%23b2)%22%20d=%22M954%20378%20990%20438%20958%20456%20930%20424z%22/%3E%3Cpath%20fill=%22%23fff%22%20opacity=%22.36%22%20filter=%22url(%23b2)%22%20d=%22M802%20434%20834%20488%20806%20504%20782%20476z%22/%3E%3Cpath%20fill=%22url(%23near)%22%20opacity=%22.7%22%20filter=%22url(%23b2)%22%20d=%22M0%20700%20100%20596%20194%20630%20296%20580%20390%20622%20470%20664%20508%20700z%22/%3E%3C/g%3E%3C/svg%3E");

  /* elevation - floating product artifacts only, never flat UI */
  --shadow-mockup: 0 24px 64px rgba(16, 15, 18, .12), 0 4px 12px rgba(16, 15, 18, .06);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
::selection { background: var(--wash); color: var(--ink); }

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gut);
}

/* ── type ─────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; font-weight: 500; }

/* No `.display` step any more. The hero's big title was its only user, and
   the page's largest heading is now .h-lg on the argument section. */
.h-lg {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.13;
  letter-spacing: -.036em;
}
.h-md {
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  letter-spacing: -.031em;
}
.h-sm { font-size: 20px; line-height: 1.38; letter-spacing: -.018em; }

.lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--slate);
  letter-spacing: -.01em;
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mist);
}

.muted { color: var(--slate); }

/* ── buttons ──────────────────────────────────────────────────── */

/* Buttons - Cluely's glossy pill, recoloured to Rootly's dawn violet, next to
   Rootly's frosted secondary. Measured off both sites rather than taken from
   the written guides, which disagree with the live pages on radius and weight. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  padding: 12px 22px;
  border-radius: 16px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: filter .18s, background .18s, border-color .18s, color .18s;
}

/* the glossy one: two radial layers plus a soft coloured glow, the trick the
   reference uses to make a flat fill look lit from inside */
.btn-primary {
  color: #fff;
  background:
    radial-gradient(101.79% 101.79% at 65.61% 81.79%,
      rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 100%),
    radial-gradient(114.65% 114.65% at 9.73% 17.27%, #8f5ff0 0, #6a3ce0 100%);
  box-shadow:
    rgba(139, 108, 222, .38) 16px 18px 26px 0,
    inset rgba(232, 218, 255, .45) -3px -3px 4px 0,
    inset rgba(58, 30, 140, .16) 4px 4px 4px 0;
}
.btn-primary:hover { filter: brightness(1.07); }

/* Rootly's secondary: frosted glass, no border */
.btn-ghost {
  background: rgba(30, 26, 51, .10);
  color: var(--ink);
  border-color: transparent;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}
.btn-ghost:hover { background: rgba(30, 26, 51, .16); }

.hero .btn-ghost {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .3); }

.btn-note { font-size: 13px; opacity: .62; font-weight: 400; }

/* ── top nav ──────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, backdrop-filter .25s;
}
.nav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.028em;
  color: var(--paper);
  text-decoration: none;
  transition: color .25s;
}
.nav-mark .mark { width: 26px; height: 17px; flex: none; }
.nav-links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  letter-spacing: -.005em;
}
.nav-links a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color .25s;
}
.nav-links a:hover { color: var(--paper); }
.nav .btn { font-size: 14px; padding: 7px 14px; }

/* solid once you leave the gradient */
.nav.is-solid {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--edge);
}
.nav.is-solid .nav-mark { color: var(--ink); }
.nav.is-solid .nav-links a { color: var(--slate); }
.nav.is-solid .nav-links a:hover { color: var(--ink); }

/* ── hero ─────────────────────────────────────────────────────── */

/* A pale dawn sky, not a slab of blue. Light at the top, melting to pure
   white before the content ends - the reference paints a white radial over
   the sky at 50% 9.2% that is transparent to 41% and solid white by 72%,
   which is what makes the edges dissolve. Ridges are drawn, not licensed. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(104px, 12vw, 140px) 0 0;
  /* The reference is NOT a left-to-right gradient: it is one dominant
     periwinkle sky with a painted massif catching dawn. Getting that
     backwards is what made this look nothing like it.
     The massif spans the FULL width - cropping it to the right half left a
     vertical seam mid-page and the landscape stopped reading as one place.
     Cool violet ridges carry the left, the warm dawn-lit peaks rise on the
     right, and it is a single continuous horizon. */
  background:
    var(--massif),
    linear-gradient(178deg, #8f8ae6 0%, #9691ea 34%, #a7a2ef 62%, #bdb8f4 82%, #d6d2f8 100%);
  background-repeat: no-repeat;
  /* 3-value background-position is invalid and drops the whole declaration */
  /* the SVG carries its own alpha mask, so the band has no bottom edge to
     give itself away; the offset is set per layout below */
  background-position: left var(--massif-y, 130px), left top;
  background-size: 100% auto, auto;
  overflow: hidden;
}

/* Flex items with `margin-inline: auto` shrink to their content instead of
   stretching, which collapsed the screen to a fraction of its width the
   moment .hero became a flex container. Both children still want to be
   centred, so give them the full line and let their own max-width bound it. */
.hero > .hero-inner,
.hero > .hero-line,
.hero > .hero-sub,
.hero > .product { width: 100%; }

/* keeps white type off the brightest part of the sky */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 70%;
  background: radial-gradient(58% 74% at 46% 26%, rgba(44, 32, 92, .26), transparent 74%);
  pointer-events: none;
}

/* ── hero, demo-first ─────────────────────────────────────────────
   The screen leads and the pitch sits under it. Flip these two `order`
   values (or drop this block) to go back to copy-first - the markup is
   identical either way, which is the point of doing it here.            */

.hero--demo-first { padding-top: clamp(84px, 8vw, 104px); }
.hero--demo-first > .hero-line { order: 1; }
.hero--demo-first > .hero-sub { order: 2; }
.hero--demo-first > .product { order: 3; }
.hero--demo-first > .hero-inner { order: 4; }

/* The one line that has to carry the whole promise before the screen speaks.
   Sized between the h1 below it and the lede - big enough to read as the
   opening statement, small enough that the real headline still wins. */
.hero-line {
  position: relative;
  z-index: 1;
  /* One line on anything wide enough to hold it. The sentence is 738px at
     the 32px cap and this measure clears that, so it only wraps once the
     viewport genuinely cannot fit it. */
  max-width: 42ch;
  /* and when it does wrap, break it into even lines rather than leaving a
     single word stranded */
  text-wrap: balance;
  margin: 0 auto 14px;
  padding-inline: var(--gut);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.5vw, 32px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.025em;
  color: #fff;
  text-shadow: 0 1px 20px rgba(24, 12, 44, .3);
}

/* The supporting line: what the screen below is actually showing you. It
   sets up the mechanism; the lede under the screen lists what you can do,
   so the two never say the same thing twice. Deliberately quiet - it must
   not compete with the statement above it or with the product below. */
.hero-sub {
  position: relative;
  z-index: 1;
  /* two lines, not three: max-width includes the 40px gutters either side,
     so the measure has to clear the sentence's half-width plus 80px */
  max-width: 70ch;
  text-wrap: balance;
  margin: 0 auto clamp(30px, 3.4vw, 44px);
  padding-inline: var(--gut);
  text-align: center;
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.55;
  letter-spacing: -.006em;
  color: rgba(255, 255, 255, .8);
}

/* Both lines above the scene must clear .product, which is also z-index 1.
   On a tie the later element in the DOM wins, and .product comes second, so
   its glow layers - painted inside its stacking context, whatever their own
   negative z-index - landed on top of this copy and greyed it out. They are
   2 so the tie cannot happen. Do not drop them back to 1. */
.hero-line,
.hero-sub { z-index: 2; }

/* The peaks now flank the screen instead of sitting under the copy, so the
   band rides higher and the lower sky stays plain - white type needs an
   uncomplicated field behind it. */
.hero--demo-first { --massif-y: 20px; }

/* The copy moved to the bottom of the hero, so the legibility wash has to
   move with it; a top-anchored one would be darkening empty sky. */
.hero--demo-first::before {
  inset: auto 0 0 0;
  height: 62%;
  background: radial-gradient(66% 78% at 50% 74%, rgba(44, 32, 92, .30), transparent 72%);
}

/* the canvas takes over before the page continues */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(251, 250, 255, .72) 78%, var(--snow) 94%);
  pointer-events: none;
}

/* Copy-first could fade the sky to white under the screen. Demo-first cannot:
   the white type now sits exactly where that fade was, so the sky has to stay
   dark all the way down and .hero-tail takes over the hand-off to the page. */
.hero--demo-first::after { background: none; }

/* room between the screen and the pitch it is illustrating */
.hero--demo-first > .product { margin-bottom: clamp(56px, 6vw, 84px); }
.hero--demo-first .hero-fine { margin-bottom: clamp(64px, 7vw, 92px); }

/* With the white fade gone, the sky ends on its own last colour - the tail
   has to pick up from there or the seam is a hard step. */
.hero--demo-first + .hero-tail {
  background: linear-gradient(to bottom, #d6d2f8, var(--wash));
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--gut);
  text-align: center;
}

/* The hero's display title and eyebrow are gone: .hero-line above the
   scene is the page's h1 now, and a second headline underneath it only
   repeated the pitch further down the page. */
.hero .lede {
  color: rgba(255, 255, 255, .94);
  max-width: 62ch;
  margin: 0 auto 28px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 14px;
}
.hero-fine {
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  letter-spacing: -.005em;
  margin: 0 0 clamp(40px, 6vw, 64px);
}

/* ── product surface ──────────────────────────────────────────── */

/* the frame the live macOS scene floats in; it bleeds down into the Frost
   band so the gradient never ends on a hard white edge */
.product {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--gut);
}

/* The frame IS the stage element, so hero-demo appends the feature strip to
   .product - outside the frame, on the light page - rather than inside the
   dark surface where it would be invisible. */
/* 13px radius and no drop shadow - the reference gets its halo by painting a
   blurred duplicate of the screen underneath, not by casting a shadow. Ours
   is a live DOM scene rather than an image, so the halo is a blurred colour
   echo of the same wallpaper sitting behind the frame. */
.product { position: relative; }

/* The reference does not put a border or a drop shadow on its screen: it
   paints a heavily blurred copy of the same picture underneath, so the
   wallpaper's own colours bleed outward and the screen appears to glow onto
   the page. Ours is live DOM, so the bleed is drawn from the same palette. */
/* The glow is the screen's own wallpaper, blurred, sitting directly behind
   it. Measured off the reference, which stacks two copies of the same
   picture: an absolutely positioned one at filter: blur(24px) under a sharp
   one at the identical size. That is why its halo matches the artwork
   exactly, and why a hand-authored gradient never quite does.

   Ours is live DOM rather than an image, so it reuses --ct-wallpaper, the
   one declaration the scene also paints on .ct-wall.

   Two layers: a tight one that reads as light coming off the panel, and a
   wide, dim one that carries the colour further out and keeps the screen
   from ending on a hard edge against the sky. */
.product::before,
.product::after {
  content: "";
  position: absolute;
  /* exactly the frame's rect: .product's only in-flow child fills its
     content box, and the gutters are its inline padding */
  inset: 0 var(--gut);
  background: var(--ct-wallpaper);
  /* ::after would otherwise paint over the screen: pseudo-elements sit
     around the real children in DOM order, not behind them. */
  z-index: -1;
  pointer-events: none;
}
/* The reference blurs its copy at the identical size, because its page is
   near-white and the halo has plenty of contrast to read against. Ours sits
   on a periwinkle sky of much the same luminance, so a same-size copy only
   ever showed as a hairline. Both layers are scaled up to clear the frame
   before the blur takes over, and saturated so the colour survives it. */
/* Do not mask or clip these. The halo above the frame is the effect: cut
   it and the screen's top edge ends flat, with a visible seam where the
   bloom stops. If the copy above the scene is hard to read, lift the copy
   (see .hero-sub) rather than taking the glow away. */
.product::before {
  border-radius: clamp(18px, 2.2vw, 34px);
  transform: scale(1.035, 1.06);
  filter: blur(30px) saturate(1.5);
  opacity: .95;
}
.product::after {
  border-radius: 50%;
  transform: scale(1.14, 1.22);
  filter: blur(80px) saturate(1.6);
  opacity: .7;
}

.ct-stage-mount { position: relative; aspect-ratio: 16 / 10; height: auto; }

/* The screen itself. Apple rounds a display generously and the reference
   does the same - a hard 0px corner is what made this read as a screenshot
   pasted on the page rather than a device. The radius must live here, on the
   element that clips the scene, not on a wrapper. */
.product-frame {
  border-radius: clamp(18px, 2.2vw, 34px);
  overflow: hidden;
  background: #0a0b0d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    0 0 0 1px rgba(255, 255, 255, .20),
    0 34px 80px -28px rgba(38, 24, 70, .38);
}

/* The feature strip takes the dock's place: same spot on the desktop, same
   job - the row of things you switch between. The dock itself is gone, so
   there is nothing left to stack against.

   Why a percentage rather than pixels: the scene is drawn in design pixels
   and scaled by frameWidth/1700, so a fixed offset would drift as the frame
   resizes. The frame is locked to 16/10, which makes a percentage of its
   height track that scale exactly. 4% sits where the dock sat, a touch
   clear of the bottom edge. */
.product { position: relative; }
.product .ct-chips {
  --chip-fg: var(--slate);
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  z-index: 2;
}

/* breathing room under the feature strip before the page continues */
.hero-tail {
  height: clamp(96px, 12vw, 152px);
  background: linear-gradient(to bottom, transparent, var(--wash));
  margin-top: -1px;
}

/* ── sections ─────────────────────────────────────────────────── */

.band-frost { background: var(--wash); }

section.block {
  padding-block: var(--section-gap);
}
.block-head { max-width: 62ch; margin-bottom: 32px; }
.block-head .h-md { margin-bottom: 12px; }

/* two-column: tinted card + white card */
.duo {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  border-radius: var(--r-card);
  padding: var(--card-pad);
}
.card-frost { background: var(--wash); }
.card-white { background: var(--paper); border: 1px solid var(--edge); }
.card h3 { font-size: 20px; line-height: 1.38; letter-spacing: -.018em; margin-bottom: 8px; }
.card p { margin: 0; color: var(--slate); }

/* three-column feature grid */
.grid-3 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tile {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: var(--card-pad);
}
.tile h3 { font-size: 18px; font-weight: 600; line-height: 1.33; letter-spacing: -.02em; margin-bottom: 8px; }
.tile p { margin: 0; font-size: 15px; color: var(--slate); }

/* compatibility row */
.compat { text-align: center; }
.compat .eyebrow { margin-bottom: 20px; }
.compat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 40px;
  color: var(--mist);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.compat-item { display: inline-flex; align-items: center; gap: 9px; }
/* Same technique the notch uses: the asset's alpha is the shape and the
   tint is painted through it, which is what renderingMode(.template) does
   in SwiftUI. One source of truth for the artwork, two palettes. */
.compat-mark {
  width: 19px;
  height: 19px;
  flex: none;
  background-color: var(--compat-tint, var(--ink));
  -webkit-mask: var(--compat-src) center / contain no-repeat;
          mask: var(--compat-src) center / contain no-repeat;
}
.compat-claude   { --compat-src: url("assets/brand/claude.svg");   --compat-tint: #d97757; }
.compat-gemini   { --compat-src: url("assets/brand/gemini.svg");   --compat-tint: #3186ff; }
.compat-qwen     { --compat-src: url("assets/brand/qwen.svg");     --compat-tint: #6f69f7; }
/* white in the app, so they inherit the page's ink instead */
.compat-codex    { --compat-src: url("assets/brand/codex.svg"); }
.compat-cursor   { --compat-src: url("assets/brand/cursor.svg"); }
.compat-opencode { --compat-src: url("assets/brand/opencode.svg"); }

.compat-note { margin: 20px 0 0; font-size: 14px; color: var(--mist); }

/* steps */
.steps { counter-reset: step; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 20px;
  padding: 24px 0;
  border-top: 1px solid var(--edge);
}
.steps li:last-child { border-bottom: 1px solid var(--edge); }
.steps .n {
  grid-row: 1 / span 2;
  font-size: 14px;
  font-weight: 500;
  color: var(--iris);
  padding-top: 3px;
}
.steps h3 { font-size: 20px; letter-spacing: -.018em; margin-bottom: 6px; }
.steps p { margin: 0; color: var(--slate); max-width: 68ch; }
.steps code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--wash);
  border-radius: 4px;
  padding: 1px 5px;
}

/* pricing */
.price-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 32px var(--card-pad);
  text-align: center;
}
.price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
  margin: 8px 0 6px;
}
.price .cur { font-size: 28px; padding-top: 10px; color: var(--slate); }
.price .amt { font-size: 68px; letter-spacing: -.03em; }
.price-sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 24px;
}
.price-list { list-style: none; margin: 0 0 24px; padding: 0; text-align: left; }
.price-list li {
  position: relative;
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--edge);
  font-size: 15px;
  color: var(--slate);
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 17px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--iris);
}
.btn-block { display: flex; width: 100%; justify-content: center; }
.price-fine { font-size: 13px; color: var(--mist); margin: 14px 0 0; }
/* The note is injected next to the button it belongs to. Its parent is a
   flex row, so without a full-width basis it lands beside the button rather
   than under it. */
.checkout-note {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--iris);
  margin: 10px 0 0;
  min-height: 1.2em;
}
/* violet on the hero's periwinkle sky is unreadable */
.hero .checkout-note { color: rgba(255, 255, 255, .94); }

/* faq */
.faq { border-top: 1px solid var(--edge); }
.faq details { border-bottom: 1px solid var(--edge); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 32px 18px 0;
  position: relative;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 17px;
  color: var(--mist);
  font-weight: 400;
  transition: transform .22s, color .22s;
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--iris); }
.faq p { margin: 0 0 18px; color: var(--slate); max-width: 72ch; }

/* footer */
.footer {
  border-top: 1px solid var(--edge);
  background: var(--paper);
}
.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px var(--gut) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  color: var(--mist);
}
.footer-mark { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
/* Sits with the mark rather than centred: the footer is space-between, and a
   lone link in the middle reads as a third column that is not one. */
.footer-link {
  margin-right: auto;
  color: var(--mist);
  text-decoration: none;
  transition: color .18s ease;
}
.footer-link:hover { color: var(--ink); }

/* ── narrow ───────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .steps li { grid-template-columns: minmax(0, 1fr); }
  .steps .n { grid-row: auto; margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── feature strip ────────────────────────────────────────────────
   Rootly's control language: a frosted pill rail sitting on the dawn, the
   current one filled with ink. hero-demo.css styles these for a dark page and
   loads after this file, so every rule here is scoped tighter than its.   */

.product .ct-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 6px;
  width: max-content;
  max-width: calc(100% - var(--gut) * 2);
  border-radius: var(--r-pill);
  /* Clear white glass, the way macOS does light vibrancy: barely any fill,
     a heavy blur, saturation and brightness pushed past 100% so the
     wallpaper's colour comes through lit rather than tinted. The edge does
     the work of making it visible - a bright top highlight and a white
     hairline - not the fill. */
  background: rgba(255, 255, 255, .26);
  /* Saturation stays close to 100%: pushed to 180% the rail came out more
     vivid than the wallpaper behind it, which reads as a coloured bar, not
     glass. Glass lightens and slightly mutes what is behind it. */
  backdrop-filter: blur(28px) saturate(118%) brightness(1.06);
  -webkit-backdrop-filter: blur(28px) saturate(118%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 0 0 1px rgba(255, 255, 255, .34),
    0 14px 36px -12px rgba(12, 6, 30, .42);
}

.product .ct-chip-btn {
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  border: none;
  background: transparent;
  /* The glass is clear and bright now, so white labels vanish into it -
     especially over the warm right-hand side of the wallpaper. Dark ink is
     what actually holds, with a whisper of white lift underneath. */
  color: rgba(24, 18, 44, .76);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.product .ct-chip-btn:hover { background: rgba(255, 255, 255, .34); color: #14102a; }
.product .ct-chip-btn:focus-visible { outline: 2px solid #14102a; outline-offset: 2px; }

/* The current feature is the one lit pane of glass, not a solid slug of ink -
   frosted white so it still belongs to the rail it sits in. */
.product .ct-chip-btn[aria-current="true"] {
  background: rgba(255, 255, 255, .94);
  color: #17132a;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 10px -2px rgba(10, 6, 26, .35);
}

@media (max-width: 700px) {
  /* A rail cannot straddle an edge on a phone - it needs the full width and
     nothing behind it to fight, so it drops back into the flow.

     It wraps rather than scrolls. Scrolling put two of the five scenes past
     the right edge with nothing to say they were there, and a rail that
     hides half its own contents is worse than one that takes two lines. */
  .product .ct-chips {
    position: static;
    transform: none;
    margin: 18px auto 0;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 20px;
  }
  .ct-stage-mount { aspect-ratio: 1 / 1; }
}