: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;
  /* Where a section comes to rest under the fixed bar when you click its
     link. Two things read this and they have to agree: scroll-margin-top,
     which decides where an anchor jump lands, and main.js, which decides
     which link to light. When they disagree by even a pixel, clicking
     "Questions" lands you in the FAQ with "Pricing" still underlined -
     the jump puts the section's top edge exactly on this line, so the
     line has to count as being inside it. */
  --nav-offset: 92px;
  --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;
}
/* Every anchor target clears the fixed bar. Without this the browser puts the
   target at y=0, which is 66px behind the nav, so #features and #buy each
   landed with their own first line hidden under it. */
#why, #features, #works-with, #buy, #price-card, #faq { scroll-margin-top: var(--nav-offset); }

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;
}
/* The emblem free of its tile, and larger than the outline it replaced.
   The rounded square is how an operating system frames an app icon, in the
   Dock and on a browser tab; carrying that frame onto a web page made the mark
   look like a screenshot of an icon rather than like a logo. Off the tile it
   can also afford to be bigger without crowding the bar - the drawing is 4:3,
   so 44 by 33 reads at a glance where 23 square did not. */
/* 38 x 34 is the mark's own 48 x 43 viewBox, to the pixel: 34 x (48/43) is
   37.95. Keep the two in step - a box at the old 4:3 would letterbox the
   art and centre it inside a gap. 34 also keeps the mark no taller than the
   Download button beside it, so the bar's height is still the button's. */
.nav-mark .mark { width: 38px; height: 34px; 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); }

/* The section you are in. A rule under the word rather than a filled pill:
   the bar is glass over a photograph for the first screen and a filled chip
   would be a second button sitting next to the real one. main.js sets the
   attribute; nothing else in the page uses aria-current, so the selector can
   stay this plain. */
.nav-links a { position: relative; padding-bottom: 3px; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 1.5px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .2s, transform .2s cubic-bezier(.22, 1, .28, 1);
}
.nav-links a[aria-current="true"] { color: var(--paper); }
.nav-links a[aria-current="true"]::after { opacity: 1; transform: none; }
.nav.is-solid .nav-links a[aria-current="true"] { color: var(--ink); }
.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. This used to be four
   `order` values over copy-first markup, which reads correctly and tabs
   wrongly: `order` moves boxes, not the focus ring or the reading order,
   so the first thing the keyboard reached from the nav was the download
   button 900px below the fold, and a screen reader heard the pitch before
   the headline. The markup is authored in the order it is drawn now and
   there is nothing left here to flip.                                    */

.hero--demo-first { padding-top: clamp(84px, 8vw, 104px); }

/* 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); }
/* Was 92px, on top of a 152px tail, on top of the next section's own 80px
   gap: three separate paddings stacking into most of a screen of empty
   colour between the download button and the first line of the argument.
   The tail is the hand-off; this only has to clear the button. */
.hero--demo-first .hero-fine { margin-bottom: clamp(28px, 3vw, 40px); }

/* 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;
}

/* The hand-off from the hero's sky to the page. It only has to be tall
   enough for the gradient to resolve without banding - past that it is a
   band of empty colour, and it was reading as one at 152px. */
.hero-tail {
  height: clamp(64px, 7vw, 96px);
  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; }
/* The pricing card is centred, so its heading is too - a left-aligned
   heading over a centred card reads as two sections that met by accident. */
.block-head-mid { max-width: 46ch; margin-inline: auto; text-align: center; margin-bottom: 40px; }
/* or it breaks after "no" and leaves "subscription." alone on line two */
.block-head-mid .h-md { text-wrap: balance; }

/* 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-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; }

/* Each name links to that agent's own page. As an <a> it must not pick up
   link colour or an underline: the row reads as a list of what is supported,
   and six underlined words would read as six calls to action instead. The
   affordance is the hover, which is also where the row stops looking static. */
a.compat-item {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease;
}
a.compat-item:hover { color: var(--ink); }
a.compat-item:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 4px;
  border-radius: var(--r-small);
}
/* 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); }

/* ── the second compatibility row: terminals ──────────────────────
   Names, not marks. The agent row above carries licensed brand assets the
   app already ships and tints through a mask; there is no such asset for a
   terminal, and seven invented glyphs would be seven drawings pretending to
   be logos. A chip is the honest shape for a name. */

/* Sub-headings, not eyebrows. The section now has a real eyebrow of its own
   above the heading, and three labels in the same uppercase at the same size
   made the page ask which of them was the section. These sit a step down and
   in sentence case, so they read as captions on the two rows. */
.compat-label {
  margin: 0 0 18px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--mist);
}
.compat-label-2 { margin-top: 40px; }
.compat-row-plain { gap: 10px 12px; }
.compat-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--edge);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--graphite);
}
/* tmux is not a terminal, it is what is running inside one - so it takes the
   accent rather than sitting in the row as if it were an eighth app */
.compat-chip-alt {
  background: transparent;
  border-style: dashed;
  color: var(--amethyst);
}

/* Inline paths and filenames. Was scoped to .steps, which no longer exists;
   the FAQ names the same config files and had nothing to style them with. */
code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--wash);
  border-radius: 4px;
  padding: 1px 5px;
}

/* pricing
   Left-aligned, not centred. A centred card makes every line a separate
   announcement; ranged left they read in one movement, name then price then
   what is in it, which is the order somebody deciding actually asks in. */
.price-card {
  max-width: 460px;
  margin: 0 auto;
  /* Lavender at the top burning off into white by the list, so the number sits
     in the colour and the reading sits on paper. Flat white on the frost band
     left the card with nothing to stand it apart from its own section. */
  background: linear-gradient(178deg, #eee7ff 0%, #f7f4ff 34%, var(--paper) 62%);
  border: 1px solid var(--edge);
  border-radius: var(--r-card-lg);
  padding: 30px 30px 26px;
  text-align: left;
  box-shadow: 0 28px 54px -26px rgba(103, 66, 200, .3);
}
.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}
.price-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}
/* Quiet on purpose. A countdown badge in accent red would undo the twenty
   screens of plain speaking above it; this only has to name which price the
   number below is. */
.price-tag {
  flex: none;
  padding: 5px 11px 4px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--edge);
  color: var(--amethyst);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.price-blurb {
  font-size: 15px;
  color: var(--slate);
  margin: 0 0 20px;
}
.price {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1;
  margin: 0 0 7px;
}
.price .cur { font-size: 28px; padding-top: 9px; color: var(--slate); }
.price .amt { font-size: 62px; letter-spacing: -.035em; }
/* The price it was, to the right of the price it is, where the reference
   design puts its unit label. Small and muted so the eye reads one price with
   a note beside it rather than two prices competing, and on the same baseline
   as the big number: the padding is the offset between the two cap heights. */
.price .was {
  font-size: 17px;
  color: var(--mist);
  padding-top: 35px;
  margin-left: 12px;
  letter-spacing: -.005em;
}
.price .was s {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--iris);
}
.price-sub {
  font-size: 13.5px;
  color: var(--mist);
  margin: 0 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--edge);
}
.price-incl {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
}
.price-list { list-style: none; margin: 0 0 26px; padding: 0; }
/* No rule between items. The reference has none, and four hairlines under
   four short lines turned a list into a table of contents. */
.price-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
  font-size: 15px;
  color: var(--slate);
}
.price-list .tick { flex: none; width: 19px; height: 19px; color: var(--iris); }
.btn-block { display: flex; width: 100%; justify-content: center; }
/* Full width in the card, and a pill. A 160px button floating in the middle of
   a 400px card is the one element that still looked borrowed from elsewhere. */
.price-card .btn-block .btn {
  width: 100%;
  justify-content: center;
  border-radius: var(--r-pill);
  padding: 14px 22px;
  font-size: 16px;
  /* The site-wide shadow is thrown 16px right, which reads as depth on a button
     sitting in open space and as a smudge on one that spans a card. Same colour,
     straight down. */
  box-shadow:
    rgba(139, 108, 222, .34) 0 14px 24px -6px,
    inset rgba(232, 218, 255, .45) 0 -3px 4px 0,
    inset rgba(58, 30, 140, .16) 0 4px 4px 0;
}
.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. */
.contact-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 .contact-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. The auto
   margin is on the last link only. Putting it on every link would hand each of
   them an equal share of the free space and fan four links across the whole
   footer; on the last one it absorbs the lot, so the group stays packed
   against the mark and the copyright is pushed to the right edge. */
.footer-link {
  color: var(--mist);
  text-decoration: none;
  transition: color .18s ease;
}
.footer-link:last-of-type { margin-right: auto; }
.footer-link:hover { color: var(--ink); }

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

@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

@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; }
}

/* The two additions the older pricing design did not have: a link inside a
   feature row, and the warm sentence under the button that carries the refund.
   Everything else on the card - the figure, the rule-separated list, the
   block button, the fine print - was already here, written for markup that had
   been taken out of the page. */
.price-list a {
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--edge);
}
.price-list a:hover { text-decoration-color: var(--iris); }
.price-note {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  letter-spacing: -.01em;
}
/* The card's second exit, for somebody who wants the file before the
   receipt. Deliberately a sentence with a link in it rather than a second
   button: two buttons of equal weight leave neither of them the answer. */
.price-alt {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--slate);
}
.price-alt a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--edge);
}
.price-alt a:hover { text-decoration-color: var(--iris); }

.price-fine a { color: var(--mist); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--edge); }
.price-fine a:hover { color: var(--ink); }

/* ── the close ────────────────────────────────────────────────────
   The last section before the footer, and the only one after the hero that
   is dark. Five light bands in a row need somewhere to end; a sixth would
   just stop. It borrows the hero's gradient anchors rather than a new
   colour, so the page finishes on the note it opened on. */

.closer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(152deg, #2a1c62 0%, var(--dawn-viol) 52%, #b487d8 100%);
  text-align: center;
}
/* the same soft wash the hero puts under its white type */
.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(64% 82% at 50% 46%, rgba(20, 10, 48, .34), transparent 74%);
  pointer-events: none;
}
.closer-inner { position: relative; z-index: 1; }

.closer-line {
  max-width: 22ch;
  margin: 0 auto 14px;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.03em;
  color: #fff;
}
.closer-sub {
  max-width: 46ch;
  margin: 0 auto clamp(26px, 3vw, 34px);
  text-wrap: balance;
  font-size: clamp(15px, 1.2vw, 16.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}
/* .hero-cta already centres a pair of buttons and stacks them under 760px;
   this only has to stop them inheriting the hero's own top margin. */
.closer-cta { margin-top: 0; }
.closer-fine {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: 13.5px;
  letter-spacing: -.005em;
  color: rgba(255, 255, 255, .6);
}
/* The ghost button is drawn for a light page. On the closer's sky it takes
   exactly the hero's treatment - white glass, no border - so the page's two
   dark sections carry one button pair, not two variants of one. */
.closer .btn-ghost {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
.closer .btn-ghost:hover { background: rgba(255, 255, 255, .3); }

/* The .btn gap already spaces it; this only stops the SVG stretching to the
   line box, which is what an unsized inline svg does. */
.btn-icon { flex: none; width: 16px; height: 16px; margin-left: -2px; }