/* ===========================================================
   Rilo landing page styles
   Single stylesheet, no build step. See README.md for the
   design rules this page follows.
=========================================================== */

:root {
  --ink: #131318;
  --ink-2: #45454f;
  --ink-3: #83838d;
  --indigo: #3B2CE0;
  --indigo-deep: #2A1DA8;
  --indigo-soft: #C9C2F5;
  /* brand kit additions: the Rilo icon shades, the gradient ends and Rilo Fur */
  --violet: #8C6BF2;
  --sky: #39B7F0;
  --mist: #F5F5FA;
  --fur: linear-gradient(135deg, #4A2FE6 0%, #7B5CF3 28%, #A08AF8 52%, #86B6F6 76%, #5CCBF2 100%);
  --lavender: #ECEAFB;
  --cream: #F5F3E9;
  --blush: #F8E7D5;
  --butter: #F6EFD2;
  --paper: #F2F2F2;
  --dark: #101013;
  --hair: rgba(19, 19, 24, 0.14);
  --hair-w: rgba(255, 255, 255, 0.16);
  --maxw: 1200px;
  --gutter: 32px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;

  /* spacing scale */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  overflow-x: hidden;
}

/* film grain, painted per section: it sits above each section's
   background colour but below every piece of content. Contrast is
   pushed inside the SVG filter and the tile is scaled up so the
   speckle reads as real texture on light tints and dark bands alike. */
section, footer.mega { position: relative; }
section::before, footer.mega::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.1' intercept='-0.55'/%3E%3CfeFuncG type='linear' slope='2.1' intercept='-0.55'/%3E%3CfeFuncB type='linear' slope='2.1' intercept='-0.55'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
/* all section content rides above the grain */
section > *, footer.mega > * { position: relative; z-index: 1; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 20px; } }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
b, strong { font-weight: 600; }

.mono-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
/* section eyebrows get a small indigo tile in front, echoing the squares in
   the .shapes decorations. Only the section-level labels (the ones inside a
   .frame head), not the cell labels, which already sit under an icon. */
.frame > .mono-label::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 2px;
  margin-right: 10px;
  vertical-align: 1.5px;
  background: var(--fur);
}
.darkband .frame > .mono-label::before { background: #A9A2E8; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill.solid { background: var(--indigo); color: #fff; }
.pill.solid:hover { background: var(--indigo-deep); }
.pill.soft  { background: var(--indigo-soft); color: var(--ink); }
.pill.peach { background: var(--blush); color: var(--ink); }
.pill.line  { background: transparent; color: inherit; border: 1px solid var(--hair); cursor: default; font-weight: 500; }
.pill.line:hover { transform: none; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--indigo); flex: 0 0 7px; }

/* big light section titles */
.sec-title {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* overlapping shapes */
.shapes { display: flex; height: 83px; }
.shapes .s { width: 83px; height: 83px; border-radius: 50%; flex: 0 0 83px; }
.shapes .s + .s { margin-left: -38px; }
.shapes.arches .s { border-radius: 83px 83px 0 0; }
.c-indigo { background: var(--fur); } /* decorative shapes carry Rilo Fur; buttons stay solid indigo */
.c-ink    { background: var(--ink); }
.c-soft   { background: var(--indigo-soft); }
.c-white  { background: #fff; }

/* stacked circles: start piled on top of each other, slide apart to
   their overlapped resting spots as the section reveals */
.shapes.stack .s { transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
.shapes.stack .s:nth-child(2) { transform: translateX(-45px); }
.shapes.stack .s:nth-child(3) { transform: translateX(-90px); }
.shapes.stack .s:nth-child(4) { transform: translateX(-135px); }
.shapes.stack.in .s { transform: none; }
@media (max-width: 760px) {
  .shapes.stack .s:nth-child(2) { transform: translateX(-34px); }
  .shapes.stack .s:nth-child(3) { transform: translateX(-68px); }
  .shapes.stack .s:nth-child(4) { transform: translateX(-102px); }
  /* restate the resting state: these mobile start positions come later in the
     file than .shapes.stack.in above, so without this line they win the cascade
     and the circles never slide apart on phones */
  .shapes.stack.in .s { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shapes.stack .s { transform: none !important; transition: none; }
}

/* arches rise from the ground like doorways: there is a way in */
.shapes.arches .s {
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.shapes.arches .s:nth-child(2) { transition-delay: 0.8s; }
.shapes.arches.in .s { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .shapes.arches .s { transform: scaleY(1) !important; transition: none; }
}

/* wins circles converge: start apart, slide together into overlap */
.shapes.merge .s { transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
.shapes.merge .s:nth-child(1) { transform: translateX(-58px); }
.shapes.merge .s:nth-child(2) { transform: translateX(58px); }
.shapes.merge.in .s { transform: none; }
@media (max-width: 760px) {
  .shapes.merge .s:nth-child(1) { transform: translateX(-38px); }
  .shapes.merge .s:nth-child(2) { transform: translateX(38px); }
  /* restate the resting state — same cascade-order trap as .shapes.stack */
  .shapes.merge.in .s { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shapes.merge .s { transform: none !important; transition: none; }
}

/* the gap: the idea and the business start together, slide apart as the
   section reveals, and a faint dotted wave surfaces between them */
.shapes.gap { align-items: center; gap: 16px; }
.shapes.gap .s + .s { margin-left: 0; }
.shapes.gap .s { transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
.shapes.gap .s.c-indigo { transform: translateX(90px); }
.shapes.gap .s.c-ink { transform: translateX(-90px); }
.shapes.gap.in .s.c-indigo, .shapes.gap.in .s.c-ink { transform: none; }
.gap-line {
  flex: 0 1 auto; width: clamp(80px, 11vw, 160px); height: 56px;
  color: rgba(19, 19, 24, 0.52);
  opacity: 0;
  transition: opacity 1s ease 1.6s;
}
.shapes.gap.in .gap-line { opacity: 1; }
.gap-line path {
  stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 0.1 8;
}
@media (max-width: 760px) {
  .shapes.gap .s.c-indigo { transform: translateX(59px); }
  .shapes.gap .s.c-ink { transform: translateX(-59px); }
}
@media (prefers-reduced-motion: reduce) {
  .shapes.gap .s.c-indigo, .shapes.gap .s.c-ink { transform: none; transition: none; }
  .gap-line { opacity: 1; transition: none; }
}
@media (max-width: 760px) {
  .shapes { height: 61px; }
  .shapes .s { width: 61px; height: 61px; flex-basis: 61px; }
  .shapes .s + .s { margin-left: -27px; }
}

/* ---------- shared section scaffolding ---------- */
section.block { padding-top: var(--s-6); padding-bottom: var(--s-6); }
@media (max-width: 760px) { section.block { padding-top: var(--s-5); padding-bottom: var(--s-5); } }

.sec-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4);
  align-items: end;
  margin-bottom: var(--s-5);
}
@media (max-width: 760px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; gap: var(--s-3); margin-bottom: var(--s-4); }
}

.split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-4);
}
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: var(--s-3); } }
.split .statement {
  font-size: clamp(21px, 2.3vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
  max-width: 22ch;
}
.split .statement em { font-style: normal; color: var(--indigo); }
.split .body p { color: var(--ink-2); font-size: 16.5px; max-width: 58ch; }
.split .body p + p { margin-top: var(--s-2); }
.split .body .strong { color: var(--ink); font-weight: 600; }

/* space between a split intro and the grid that follows it */
.split + .grid, .split + .chain-grid { margin-top: var(--s-5); }

/* the gap section: circles + statement share the left column, top-aligned
   with the headline on the right (one grid, not sec-head + split rows) */
.split.gap-align { align-items: start; }
/* desktop: the left column is sticky, so it slides down with the scroll
   while the longer copy on the right plays out */
@media (min-width: 761px) {
  .split.gap-align > div:first-child { position: sticky; top: 108px; }
}
.split.gap-align .statement { margin-top: var(--s-3); }
.split.gap-align .body { margin-top: var(--s-4); }
@media (max-width: 760px) {
  /* phones read top-to-bottom in the usual order: shapes, headline,
     statement, body — dissolve the two columns and reorder */
  .split.gap-align > div { display: contents; }
  .split.gap-align .frame { order: 1; }
  .split.gap-align .statement { order: 2; margin-top: 0; }
  .split.gap-align .body { order: 3; margin-top: 0; }
}

/* ---------- hairline grids ---------- */
.grid {
  display: grid;
  border-top: 1px solid var(--hair);
  border-left: 1px solid var(--hair);
}
.grid > .cell {
  border-right: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: var(--s-4) 30px;
  display: flex;
  flex-direction: column;
}
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }

/* plans, filled from the API by js/main.js */
#plans[hidden] { display: none; }
.plan-cell h3 { margin-top: var(--s-2); }
.plan-cell .plan-price { font-size: 15px; color: var(--ink); }
.plan-cell .plan-price b { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-right: 4px; }
.plan-cell .cell-link { margin-top: auto; padding-top: var(--s-3); }
.plan-cell.is-highlighted { box-shadow: inset 0 3px 0 var(--indigo); }
.plans-all { margin-top: var(--s-4); }

.cell .ico {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--lavender); color: var(--indigo);
  display: grid; place-items: center;
  margin-bottom: var(--s-3);
}
.cell .ico svg { width: 24px; height: 24px; }
/* icons draw themselves in when their cell reveals. pathLength=100 on
   every shape so one dash value covers strokes of any length. */
.cell .ico svg { overflow: visible; }
.cell .ico svg * {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.cell.reveal.in .ico svg * { stroke-dashoffset: 0; }
.cell.reveal.in .ico svg *:nth-child(1) { transition-delay: 0.15s; }
.cell.reveal.in .ico svg *:nth-child(2) { transition-delay: 0.45s; }
.cell.reveal.in .ico svg *:nth-child(3) { transition-delay: 0.7s; }
.cell.reveal.in .ico svg *:nth-child(4) { transition-delay: 0.95s; }
.cell.reveal.in .ico svg *:nth-child(5) { transition-delay: 1.15s; }
.cell.reveal.in .ico svg *:nth-child(6) { transition-delay: 1.3s; }
@media (prefers-reduced-motion: reduce) {
  .cell .ico svg * { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}
.cell .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-bottom: var(--s-1); }
.cell .mono-label { margin-bottom: var(--s-2); }
.cell h3 { font-size: 19px; letter-spacing: -0.015em; margin-bottom: 10px; }
.cell p { color: var(--ink-2); font-size: 15px; }

/* ============ NAV ============ */
header.nav {
  position: sticky; top: 0; z-index: 60;
  margin-bottom: -76px; /* the hero rides up underneath, so the bar is see-through over the glow */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
/* fully transparent over the hero; frosted once the page scrolls */
header.nav.scrolled {
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  background: rgba(242, 242, 242, 0.78);
  border-bottom-color: var(--hair);
}
/* three columns, equal outer tracks, so the links sit on the true centre of the bar */
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); height: 76px; }
.nav-inner .brand { justify-self: start; }
.nav-inner .nav-links { justify-self: center; }
.nav-inner .nav-cta-group { justify-self: end; }
@media (max-width: 900px) { .nav-inner { grid-template-columns: auto 1fr; } .nav-inner .nav-cta-group { grid-column: 2; } }
/* the bar spans the full viewport, not the 1200px content column */
.nav .nav-inner.wrap { max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); }
.brand {
  font-weight: 700; font-size: 21px; letter-spacing: 0.01em; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center;
}
.brand span { color: var(--indigo); }
/* the logo lockup. Sized by height, width follows the artwork. The wordmark
   is currentColor so it takes the ink or the white of whatever band it sits
   in; the mark stays indigo on light and goes white on the dark footer. */
/* aspect-ratio and flex-shrink:0 both matter: the svg carries only a viewBox,
   so as a flex item in .brand it has no intrinsic width to fall back on. */
.brand .logo {
  display: block; height: 50px; width: auto;
  aspect-ratio: 292 / 100; flex: 0 0 auto; overflow: visible;
}
.mega .brand .logo { height: 32px; }
/* the footer lockup sits back in grey rather than full white, matching the
   footer links. Wordmark rides on currentColor, mark is set to match. */
.mega .brand { color: #F2F1EC; }
.nav-links { display: flex; gap: 30px; font-size: 16px; font-weight: 500; }
.nav-links a { text-decoration: none; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 900px) { .nav-links { display: none; } }
.nav .pill { padding: 11px 19px; font-size: 15px; }
.nav-cta-group { display: flex; align-items: center; gap: 10px; }
@media (max-width: 620px) { .nav-cta-group .pill.line { display: none; } }

/* ============ HERO ============ */
.hero-c {
  position: relative;
  text-align: center;
  overflow: hidden;
  /* fill the first screen and keep the content block centred in the band
     above the photo, whatever the viewport height */
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  /* equal insets, so the block centres on the hero's true midpoint; the top
     inset also keeps it clear of the transparent nav on short screens */
  padding-top: 96px;
  padding-bottom: 96px;
  box-sizing: border-box;
}
@media (max-width: 760px) { .hero-c { padding-top: 110px; padding-bottom: 72px; } }

.hero-c > .wrap { position: relative; z-index: 1; width: 100%; } /* flex column + auto margins would otherwise shrink it to the headline */
.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; z-index: 1;
  width: 44px; height: 44px; margin-left: -22px;
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: color 0.2s ease;
  animation: cuebob 2.4s ease-in-out infinite 2s;
}
.scroll-cue svg { width: 26px; height: 26px; }
.scroll-cue:hover { color: var(--indigo); }
@keyframes cuebob { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@media (max-width: 760px) { .scroll-cue { bottom: 18px; width: 40px; height: 40px; margin-left: -20px; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* full width photo at the base of the hero. The radial mask fades it
   out in an arc toward the top, so it sits faintly behind the hero
   content, and the negative margin pulls it up under the form. */
.hero-photo {
  display: block;
  width: 100%;
  height: clamp(300px, 44vw, 620px);
  object-fit: cover;
  object-position: center 18%;
  /* widened and centred, so the two groups sit outside the copy column and the
     middle stays clear. Phones keep the original framing (see below). */
  position: absolute; bottom: 0; left: -20%; width: 140%;
  /* top-to-bottom fade: the upper band, where heads sit behind centred copy, is
     ghosted; the desks and floor at the bottom stay solid */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.45) 52%, rgba(0,0,0,0.9) 72%, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.45) 52%, rgba(0,0,0,0.9) 72%, #000 100%);
}
.hero-c .hero-photo { z-index: 0; }
@media (max-width: 760px) { .hero-photo { left: 0; width: 100%; object-position: center 30%; } }
.hero-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo);
}
.hero-c h1 {
  margin-top: 0;
  font-size: clamp(42px, 6.5vw, 84px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
/* Rilo Fur on one headline line per screen, at headline sizes only (kit) */
.hero-c h1 .accent, .sec-title .accent {
  color: var(--indigo);
  background: var(--fur);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.04em;
}
.hero-c .sub {
  margin: var(--s-3) auto 0;
  max-width: 56ch;
  font-size: clamp(16.5px, 1.7vw, 19px);
  color: var(--ink-2);
}
.hero-c .sub b { color: var(--ink); }
/* the offer line: plain bold text, a soft Rilo Fur underline draws in under the promise */
.offer-line { margin: var(--s-4) auto 0; max-width: 60ch; font-size: clamp(16.5px, 1.7vw, 19px); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.offer-under { position: relative; white-space: nowrap; }
/* a hand-drawn stroke that draws itself in once the hero reveals */
.offer-ink { position: absolute; left: -2px; right: -2px; bottom: -7px; width: calc(100% + 4px); height: 10px; overflow: visible; }
.offer-ink path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s; }
.offer-line.in .offer-ink path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .offer-ink path { stroke-dashoffset: 0; transition: none; } }
.hero-c .sub.sub-after { margin-top: var(--s-3); max-width: 72ch; font-size: 16.5px; font-weight: 500; color: var(--ink-2); }
.hero-c .prompt-box { margin-top: var(--s-4); }
/* Rilo and its services, icons only, between the services intro and the cards */
.svc-family { margin: var(--s-4) 0 var(--s-5); display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.svc-family .fam-ico { width: 52px; height: 52px; flex: 0 0 auto; }
@media (max-width: 420px) { .svc-family { gap: 8px; } .svc-family .fam-ico { width: 38px; height: 38px; } }
.hero-one { position: absolute; left: 0; right: 0; bottom: 84px; z-index: 1; text-align: center; padding: 0 var(--gutter); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--indigo); }
/* on phones the hero is tall, so the line flows under the copy instead of floating */
@media (max-width: 760px) { .hero-one { position: static; margin-top: var(--s-4); padding: 0; font-size: 11.5px; } }
.hero-c .sub-fine { margin-top: 2px; max-width: 72ch; margin-left: auto; margin-right: auto; font-size: 16.5px; font-weight: 500; color: var(--ink-2); }

.hero-c .note { margin-top: var(--s-2); font-size: 13.5px; color: var(--ink-3); }
.hero-c .note b { color: var(--ink-2); }

/* hero prompt box: the studio's own composer, in this page's clothes. */
.prompt-box {
  margin: var(--s-4) auto 0;
  width: min(860px, 100%);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 22px;
  text-align: left;
  box-shadow: 0 14px 40px rgba(19, 19, 24, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.prompt-box:focus-within {
  border-color: var(--indigo);
  box-shadow: 0 14px 40px rgba(19, 19, 24, 0.08), 0 0 0 4px rgba(59, 44, 224, 0.12);
}
.prompt-box textarea {
  display: block;
  width: 100%;
  min-height: 102px;
  max-height: 260px;
  resize: none;
  border: none; outline: none;
  background: transparent;
  font-family: var(--font); font-size: 17px; line-height: 1.5; color: var(--ink);
  padding: 18px 22px 6px;
}
.prompt-box textarea::placeholder { color: var(--ink-3); }
.prompt-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px 10px 14px;
}
.prompt-plus { position: relative; }
.prompt-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5;
  min-width: 300px; padding: 6px;
  background: #fff; border: 1px solid var(--hair); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(19, 19, 24, 0.14);
}
.prompt-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: none; border-radius: 9px; background: none; cursor: pointer;
  font-family: var(--font); font-size: 14.5px; font-weight: 500; color: var(--ink); text-align: left; white-space: nowrap;
}
.prompt-menu button svg { color: var(--ink-2); flex: 0 0 auto; }
.prompt-menu button:hover { background: var(--lavender); }
.prompt-menu button:hover svg { color: var(--indigo); }
.prompt-attach[aria-expanded="true"] { color: var(--indigo); border-color: var(--indigo); background: var(--lavender); }
.prompt-attach {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-2); border: 1px solid var(--hair); background: #fff;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.prompt-attach:hover { color: var(--indigo); border-color: var(--indigo); background: var(--lavender); }
/* attached files: their own row under the text, so a few long names never squeeze the button */
.prompt-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 10px; }
.prompt-files:empty { display: none; }
.file-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: var(--lavender); border-radius: 999px; padding: 3px 4px 3px 10px; }
.file-name { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-x { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border: none; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.file-x:hover { background: rgba(59, 44, 224, 0.14); color: var(--indigo); }
.file-x:focus-visible, .prompt-attach:focus-visible, .prompt-menu button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.prompt-error { margin: 0; padding: 0 22px 10px; font-size: 13px; line-height: 1.4; color: #b42318; }
.prompt-box.dragging { border-color: var(--indigo); box-shadow: 0 14px 40px rgba(19, 19, 24, 0.08), 0 0 0 4px rgba(59, 44, 224, 0.18); }
.prompt-hint { margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.prompt-hint { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-3); }
.prompt-box .pill.solid { padding: 11px 18px; font-size: 14.5px; }
.prompt-box .pill.solid[disabled] { opacity: 0.4; cursor: default; }
.prompt-box .pill.solid[disabled]:hover { transform: none; }
.prompt-examples { margin-top: var(--s-2); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 22px; font-size: 13.5px; }
.prompt-examples .try { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
/* plain text links, a hairline that only appears on hover */
.chip {
  font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  background: none; border: none; padding: 4px 0; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.chip:hover { color: var(--indigo); border-bottom-color: var(--indigo); }
/* template links: same look, plus a "Coming soon" bubble until they ship */
.prompt-templates { margin-top: 2px; }
.chip.tpl { position: relative; }
.chip.tpl[data-soon] { cursor: default; }
.chip.tpl[data-soon]:hover, .chip.tpl[data-soon]:focus-visible { color: var(--ink-2); border-bottom-color: transparent; }
.chip.tpl[data-soon]::after {
  content: attr(data-soon);
  position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translate(-50%, 4px);
  white-space: nowrap; pointer-events: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: var(--ink); padding: 4px 8px; border-radius: 6px;
  opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease;
}
.chip.tpl[data-soon]:hover::after, .chip.tpl[data-soon]:focus::after { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 520px) {
  .prompt-hint { display: none; }
  .prompt-foot .pill.solid { margin-left: auto; }
  .prompt-box textarea { font-size: 16px; padding: 16px 18px 4px; }
}

/* floating strip of software built in Rilo, sits under the pull quote */
.mock-strip {
  margin-top: 0;
  padding-bottom: var(--s-6);
  position: relative;
}
/* each mockup sits in a .mock wrapper: <img> cannot carry pseudo-elements,
   and the wrapper is what the corner marks and the hover lift hang off. */
.mock {
  position: relative; display: block; flex: 0 0 auto;
  transition: transform 0.35s ease;
}
.mock img {
  border-radius: 0;
  box-shadow: 0 18px 44px rgba(19, 19, 24, 0.16);
  display: block;
  height: 100%; width: auto;
  transition: box-shadow 0.35s ease;
}
.mock:hover { transform: translateY(-10px) scale(1.04); z-index: 2; }
.mock:hover img { box-shadow: 0 28px 60px rgba(19, 19, 24, 0.22); }
.mock-row {
  display: flex; gap: clamp(18px, 2.4vw, 48px);
  justify-content: center;
  align-items: flex-start;
  width: max-content;
  margin-left: 50%;
  transform: translateX(-50%);
}
/* fluid sizing: the row runs wider than the viewport on purpose,
   bleeding roughly 5% off each side */
.mock-row > :nth-child(1) { height: clamp(102px, 13.5vw, 295px); margin-top: clamp(22px, 2.7vw, 59px); }
.mock-row > :nth-child(2) { height: clamp(144px, 18.9vw, 412px); margin-top: 0; }
.mock-row > :nth-child(3) { height: clamp(102px, 13.5vw, 295px); margin-top: clamp(29px, 3.6vw, 78px); }
.mock-row > :nth-child(4) { height: clamp(144px, 18.9vw, 412px); margin-top: clamp(7px, 0.9vw, 20px); }
.mock-row > :nth-child(5) { height: clamp(102px, 13.5vw, 295px); margin-top: clamp(18px, 2.2vw, 49px); }
.mock-row > :nth-child(6) { height: clamp(109px, 14.4vw, 313px); margin-top: clamp(11px, 1.4vw, 29px); }
@media (max-width: 760px) {
  .mock-strip { padding-bottom: var(--s-5); }
  .mock-row {
    flex-wrap: wrap;
    width: auto;
    margin-left: 0;
    transform: none;
    padding: 0 var(--gutter);
    gap: 14px;
    row-gap: 20px;
  }
  .mock-row > * { margin-top: 0 !important; }
  .mock-row > :nth-child(odd) { margin-top: 14px !important; }
}

/* Corner marks, desktop only: too fine to read at phone sizes. One overlay per
   mockup, inset by the mark size so each plus sits just outside its corner
   with the arms touching the edges. Because the overlay rides on .mock, the
   hover lift carries the marks with it and they stay pinned to the corners.
   They spring out from the middle when the strip reveals, one image after the
   next. */
@media (min-width: 761px) {
  .mock::after {
    content: "";
    position: absolute;
    inset: -9px;
    pointer-events: none;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='rgba(19,19,24,0.28)' stroke-width='1.1'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='rgba(19,19,24,0.28)' stroke-width='1.1'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='rgba(19,19,24,0.28)' stroke-width='1.1'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='rgba(19,19,24,0.28)' stroke-width='1.1'/%3E%3C/svg%3E");
    background-position: left top, right top, left bottom, right bottom;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  }
  .mock-strip.in .mock::after { opacity: 1; transform: none; }
  .mock-strip.in .mock:nth-child(1)::after { transition-delay: 0.25s; }
  .mock-strip.in .mock:nth-child(2)::after { transition-delay: 0.33s; }
  .mock-strip.in .mock:nth-child(3)::after { transition-delay: 0.41s; }
  .mock-strip.in .mock:nth-child(4)::after { transition-delay: 0.49s; }
  .mock-strip.in .mock:nth-child(5)::after { transition-delay: 0.57s; }
  .mock-strip.in .mock:nth-child(6)::after { transition-delay: 0.65s; }
  @media (prefers-reduced-motion: reduce) {
    .mock::after { opacity: 1; transform: none; transition: none; }
  }
}

/* ---------- live services (brand kit lockups) ---------- */
.svc-live { margin-top: var(--s-5); }
.svc-live .frame { margin-bottom: var(--s-3); }
.svc-lock { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 24px; letter-spacing: -0.02em; line-height: 1; }
.svc-lock .svc-ico { flex: 0 0 auto; }
.svc-lock b { font-weight: 700; color: var(--ink); }
.svc-lock em { font-style: normal; font-weight: 600; color: #8A8D99; }

/* ---------- pricing ---------- */
.billing-row { display: flex; justify-content: center; margin: var(--s-5) 0 var(--s-4); }
.billing-toggle { display: inline-flex; max-width: 100%; gap: 2px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--hair); }
.billing-toggle .seg { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--ink-2); background: transparent; border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.billing-toggle .seg.on { background: var(--indigo); color: #fff; }
.billing-toggle .save { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--indigo); background: var(--lavender); border-radius: 999px; padding: 3px 8px; }
.billing-toggle .seg.on .save { color: #fff; background: rgba(255, 255, 255, 0.2); }

/* every row (name, price, each feature, button) is a shared grid row across the
   three cards, so like sits beside like. Subgrid does the aligning. */
.price-grid { grid-template-rows: repeat(13, auto); }
.price-grid .plan { display: grid; grid-template-rows: subgrid; grid-row: span 13; align-content: start; background: rgba(255, 255, 255, 0.5); }
.price-grid .plan-hi { background: #fff; box-shadow: inset 0 0 0 2px var(--indigo); }
.price-grid .plan-feats { display: contents; }
.cell h3.plan-name { font-size: 34px; margin-bottom: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-badge { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--indigo); background: var(--lavender); border-radius: 999px; padding: 5px 10px; }
.trial-pill { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: var(--s-5) auto 0; max-width: 100%; }
.trial-pill + .billing-row { margin-top: var(--s-3); }
.trial-pill span { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #0E7A50; background: #DDF5E9; border-radius: 999px; padding: 6px 12px; }
.plan .price { display: flex; align-items: baseline; gap: 10px; margin-top: var(--s-3); }
.plan .price b { font-size: 52px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.plan .price span { font-size: 14px; color: var(--ink-3); }
.plan .price .cur { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-3); margin-left: -6px; }
.plan-annual { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 10px; margin-bottom: var(--s-3); }
/* green saving pill under Pro and Max, Yearly tab only */
.plan-annual:has(.save-pill) { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.save-pill { font-family: var(--mono); font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0E7A50; background: #DDF5E9; border-radius: 999px; padding: 4px 10px; }
.price-grid[data-billing="monthly"] .save-pill { display: none; }
.plan-line { color: var(--ink-2); font-size: 15px; margin-top: var(--s-2); margin-bottom: var(--s-2); }
/* model ladder dots inside the Models feature row */
.plan-models-dots { display: inline-flex; gap: 4px; }
.plan-feats dt .plan-models-dots { display: inline-flex; margin-left: 14px; vertical-align: 1px; }
.plan-feats dt:has(.plan-models-dots) { color: var(--indigo); font-weight: 600; }
.plan-models-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(59, 44, 224, 0.18); }
.plan-models-dots i.on { background: var(--indigo); }
.plan-feats { margin: 0; }
.plan-feats > div { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--hair); font-size: 13.5px; align-content: start; }
.plan-feats > div:last-child { border-bottom: 0; }
.plan-feats dt { color: var(--ink-3); }
.plan-feats dd { margin: 0; color: var(--ink); font-weight: 500; }
.plan .pill { margin-top: var(--s-3); align-self: end; justify-self: start; }
@media (max-width: 700px) {
  .price-grid { grid-template-rows: none; }
  .price-grid .plan { display: flex; flex-direction: column; grid-row: auto; }
  .price-grid .plan-feats { display: block; }
  .plan .pill { align-self: flex-start; }
}
/* one membership, every model: the subscription argument */
.plan-models-band {
  margin-top: var(--s-4);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-4) var(--s-5); align-items: center;
  padding: var(--s-4) 30px;
  background: var(--dark); color: #F2F1EC; border-radius: 20px; position: relative; overflow: hidden;
}
.plan-models-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 60% at 95% 0%, rgba(140, 107, 242, 0.35), transparent 70%), radial-gradient(35% 50% at 0% 100%, rgba(57, 183, 240, 0.18), transparent 70%); }
.plan-models-band > * { position: relative; z-index: 1; }
.pmb-copy .mono-label { color: #A9A2E8; display: block; margin-bottom: 12px; }
.pmb-copy h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: #F2F1EC; margin-bottom: 12px; }
.pmb-copy p { color: #BDBCC6; font-size: 15px; max-width: 56ch; }
.pmb-ladder { display: grid; gap: 8px; }
.pmb-step { display: grid; grid-template-columns: auto 64px 1fr; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 14px; color: #BDBCC6; }
.pmb-step b { color: #F2F1EC; font-weight: 700; }
.pmb-step.hi { background: rgba(255, 255, 255, 0.06); border-color: rgba(167, 155, 255, 0.5); }
.pmb-step .plan-models-dots i { background: rgba(255, 255, 255, 0.16); }
.pmb-step .plan-models-dots i.on { background: var(--fur); }
.pmb-note { font-family: var(--mono); font-size: 11.5px; color: #8E8D98; margin-top: 6px; }
@media (max-width: 860px) { .plan-models-band { grid-template-columns: 1fr; padding: var(--s-3) 20px; } }

/* Teams: a band under the three cards, no price, an enquiry */
.plan-teams {
  margin-top: var(--s-3);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: center;
  padding: var(--s-4) 30px;
  background: #fff; border: 1px solid var(--hair);
}
.plan-teams-lock { width: 64px; height: 64px; border-radius: 50%; background: var(--lavender); color: var(--indigo); display: grid; place-items: center; }
.plan-teams-copy .plan-name { margin-bottom: 8px; }
.plan-teams-copy p { color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.plan-teams-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.plan-teams-sub { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 860px) {
  .plan-teams { grid-template-columns: auto minmax(0, 1fr); }
  .plan-teams-cta { grid-column: 1 / -1; align-items: flex-start; }
}
@media (max-width: 520px) {
  .plan-teams { grid-template-columns: 1fr; padding: var(--s-3) 20px; }
  .plan-teams-lock { width: 52px; height: 52px; }
  .plan-teams-sub { white-space: normal; }
}
.price-note { margin-top: var(--s-3); font-size: 13.5px; color: var(--ink-3); max-width: 72ch; }
.price-note a { color: var(--indigo); }

/* ---------- tints ---------- */
.tint-white    { background-color: #F2F2F2; }
.tint-white-pure { background-color: #fff; }
.tint-offwhite { background-color: #F9F9F9; }
.tint-butter   { background-color: var(--butter); }
.tint-cream    { background-color: var(--cream); }
.tint-lavender { background-color: var(--lavender); }
.tint-blush    { background-color: var(--blush); }
.tint-paper    { background-color: var(--paper); }
/* Soft Glow (kit): two blurred light pools, violet and sky, on near-white */
.tint-glow { background: #FBFAFE; isolation: isolate; }
.hero-glow {
  position: absolute; inset: -12%; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(70% 90% at 12% 18%, rgba(123, 92, 243, 0.55), transparent 68%),
    radial-gradient(60% 80% at 92% 88%, rgba(57, 183, 240, 0.5), transparent 68%),
    radial-gradient(50% 60% at 60% 110%, rgba(160, 138, 248, 0.35), transparent 70%);
  /* each pool is drawn larger than the box, so moving its position actually moves it */
  background-size: 130% 130%, 130% 130%, 140% 140%;
  background-position: 0% 0%, 100% 100%, 50% 100%;
  background-repeat: no-repeat;
  opacity: 0; transform: scale(1.12);
  animation: glowin 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards, glowdrift 28s ease-in-out 1.9s infinite;
}
@keyframes glowin { to { opacity: 1; transform: scale(1); } }
/* constant slow wander: the three pools move on different paths and never quite
   return to the same spot at the same time */
@keyframes glowdrift {
  0%   { background-position: 0% 0%,     100% 100%, 50% 100%; }
  25%  { background-position: 40% 20%,   70% 100%,  20% 90%; }
  50%  { background-position: 30% 60%,   60% 50%,   80% 100%; }
  75%  { background-position: 0% 40%,    100% 30%,  60% 70%; }
  100% { background-position: 0% 0%,     100% 100%, 50% 100%; }
}
/* the grain settles in just after the pools */
/* finer grain in the hero: the same tile drawn at a smaller size */
.hero-c::before { opacity: 0; background-size: 140px 140px; animation: grainin 1.4s ease-out 0.5s forwards; }
@keyframes grainin { to { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .hero-glow { opacity: 1; transform: none; animation: none; }
  .hero-c::before { opacity: 0.6; animation: none; }
}
/* soft gradient artwork, shared by the two sections that use it */
.tint-gradient {
  background-color: #F4F3F8;
  background-image: url("../assets/images/soft-gradient.jpg");
  background-size: cover;
  background-position: center;
}

/* ============ PULL QUOTE ============ */
.quote { padding-top: 120px; padding-bottom: 88px; text-align: center; }
@media (max-width: 760px) { .quote { padding-top: 80px; padding-bottom: 56px; } }
.quote blockquote {
  font-size: clamp(25px, 3.4vw, 42px);
  font-weight: 560;
  letter-spacing: -0.025em;
  line-height: 1.2;
  max-width: 24ch;
  margin: 0 auto;
}
.quote b { font-weight: 600; }
.quote .who {
  margin-top: var(--s-4);
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
}
.quote .who .dotmark {
  width: 53px; height: 53px; border-radius: 50%; background: var(--indigo);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 53px;
  overflow: hidden;
}
.quote .who .dotmark img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1);
}

/* ============ DARK VALUE CHAIN ============ */
.darkband { background: var(--dark); color: #fff; }
/* night grounds carry the same violet and sky pools as the kit cover */
.darkband::after, footer.mega::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 55% at 88% 0%, rgba(140, 107, 242, 0.32), transparent 70%),
    radial-gradient(36% 48% at 0% 100%, rgba(57, 183, 240, 0.16), transparent 70%);
}
.darkband .sec-title { color: #fff; }
.darkband .mono-label { color: #A9A2E8; }
.darkband .intro { color: #B9B9C2; max-width: 52ch; font-size: 16.5px; margin-top: var(--s-2); }

/* stacked, centered header for the dark band: label, title, intro */
.darkhead { margin-bottom: var(--s-5); text-align: center; }
.darkhead .mono-label { display: block; margin-bottom: var(--s-3); }
.darkhead .sec-title { max-width: 22ch; margin-left: auto; margin-right: auto; }
.darkhead .intro { margin-top: var(--s-3); margin-left: auto; margin-right: auto; }
.darkhead .mono-label, .darkhead .intro {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.darkhead.in .mono-label { opacity: 1; transform: none; }
.darkhead.in .intro { opacity: 1; transform: none; transition-delay: 0.55s; }
@media (prefers-reduced-motion: reduce) {
  .darkhead .mono-label, .darkhead .intro { opacity: 1; transform: none; transition: none; }
}
.chain-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hair-w);
  border-left: 1px solid var(--hair-w);
}
@media (max-width: 760px) { .chain-grid { grid-template-columns: 1fr; } }
.chain-grid .cell {
  border-right: 1px solid var(--hair-w);
  border-bottom: 1px solid var(--hair-w);
  padding: var(--s-4) 30px;
  text-align: center;
}
.chain-grid .cell p { margin-left: auto; margin-right: auto; max-width: 40ch; }
.chain-grid h3 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: var(--s-4) 0 10px; }
.chain-grid p { color: #B9B9C2; font-size: 15px; }
.stage-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 999px; padding: 6px 13px; white-space: nowrap;
}
.stage-chip.live { background: var(--indigo); color: #fff; }
.stage-chip.next { border: 1px solid rgba(255,255,255,0.35); color: #DDDCF3; }
.stage-chip.future { border: 1px solid var(--hair-w); color: #8B8B96; }
.stage-chip .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }

/* ============ SERVICES ROW ============ */
.svc-row {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
}
@media (max-width: 760px) { .svc-row { grid-template-columns: 1fr; gap: var(--s-3); } }
.svc-row .statement {
  font-size: clamp(24px, 2.8vw, 34px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; max-width: 22ch;
}
.svc-row .statement em { font-style: normal; color: var(--indigo); }
@media (max-width: 760px) { .svc-br { display: none; } }
/* forced break that only holds on desktop; on narrow screens the copy is
   already wrapping and an extra break just leaves a short orphan line */
@media (max-width: 760px) { .wide-br { display: none; } }
.svc-row p { color: var(--ink-2); font-size: 15.5px; max-width: 56ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-3); }
.chips .tag {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  border: 1px solid var(--hair); border-radius: 999px; padding: 7px 13px;
  background: rgba(255,255,255,0.55);
}
.chips .tag.hi { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============ RILO SERVICES ============ */
/* assembly: three triangles arrive from different directions and lock into
   one larger triangle — separate services forming one structure. The centre
   gap is the page background: an inverted triangle in negative space. */
.shapes.tri { position: relative; width: 144px; height: 125px; }
.shapes.tri .s {
  position: absolute; border-radius: 0;
  width: 72px; height: 63px; flex-basis: 72px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.shapes.tri .s + .s { margin-left: 0; }
.shapes.tri .s:nth-child(1) { left: 36px; top: 0; transform: translate(-117px, -39px); transition-delay: 0.3s; }
.shapes.tri .s:nth-child(2) { left: 0; top: 62px; transform: translate(-138px, 42px); transition-delay: 0.5s; }
.shapes.tri .s:nth-child(3) { left: 72px; top: 62px; transform: translate(144px, 36px); transition-delay: 0.7s; }
.shapes.tri.in .s { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .shapes.tri .s { transform: none !important; transition: none; }
}
#services .statement em { font-style: normal; color: var(--indigo); }
/* centered chips + closing line under the services grid */
.svc-close {
  margin-top: var(--s-5);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3); text-align: center;
}
.svc-close .chips { justify-content: center; margin-top: 0; }
.svc-close p { color: var(--ink); font-size: 17.5px; font-weight: 500; max-width: 52ch; }

/* pills pop in one after another when the row reveals */
.chips .tag {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i, 0) * 0.07s + 0.2s);
}
.reveal.in .chips .tag { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .chips .tag { opacity: 1; transform: none; transition: none; }
}

/* ============ RILO FOR TEAMS ============ */
/* centered header for Rilo for Teams, same shape as the dark band */
.teamhead { text-align: center; margin-bottom: var(--s-5); }
.teamhead .sec-title { max-width: 26ch; margin: 0 auto; }
.teamhead .sec-title .accent { color: var(--indigo); } /* gradient comes from .sec-title .accent above */
.teamhead-statement {
  margin: var(--s-4) auto 0; max-width: 30ch;
  font-size: clamp(19px, 2.1vw, 24px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.3; color: var(--ink);
}
.teamhead .intro {
  margin: var(--s-3) auto 0; max-width: 62ch;
  color: var(--ink-2); font-size: 16.5px;
}
.teamhead-statement, .teamhead .intro {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.teamhead.in .teamhead-statement { opacity: 1; transform: none; transition-delay: 0.5s; }
.teamhead.in .intro { opacity: 1; transform: none; transition-delay: 0.7s; }
@media (prefers-reduced-motion: reduce) {
  .teamhead-statement, .teamhead .intro { opacity: 1; transform: none; transition: none; }
}

.reveal.frame > .mono-label {
  display: block; margin-bottom: var(--s-3);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.frame.in > .mono-label { opacity: 1; transform: none; }
.cell-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--s-3);
  color: var(--indigo); text-decoration: none;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
}
.cell-link svg { transition: transform 0.25s ease; }
.cell-link:hover svg { transform: translateX(4px); }
/* teams cells and closing line sit centered too */
#teams .grid .cell { text-align: center; align-items: center; }
#teams .grid .cell p { margin-left: auto; margin-right: auto; max-width: 44ch; }
.teams-close {
  margin-top: var(--s-5);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3); text-align: center;
}
.teams-close p { color: var(--ink); font-size: 17.5px; font-weight: 500; max-width: 52ch; }

/* ============ MINIONS ============ */
.minions {
  overflow: hidden;
}
/* character left, the words right */
.minions-inner {
  display: grid;
  grid-template-columns: minmax(200px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}
/* NOTE: the phone layout for this section lives BELOW the base rules — see the
   media block after .minions-copy. It must stay after them: at equal specificity
   the later rule wins, and the base .minion-stage / .minions-copy rules would
   silently cancel the phone overrides (off-centre minion, clipped copy). */

.minion-stage {
  position: relative;
  width: 100%; max-width: 360px;
  justify-self: center;
  /* nudged off centre by hand. Uses left rather than transform because the
     .reveal animation owns this element's transform. */
  left: 55px;
}
/* the aura that was baked into the source render, rebuilt in CSS so it can
   scale with the character instead of clipping at the image edge */
.minion-glow {
  position: absolute; left: 50%; top: 46%;
  width: 150%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle, rgba(123, 96, 255, 0.34) 0%, rgba(123, 96, 255, 0.14) 42%, rgba(123, 96, 255, 0) 68%);
  opacity: 0.8;
  transition: opacity 0.5s ease, scale 0.5s ease;
  pointer-events: none;
}
.minion-bob { animation: minion-bob 6.5s ease-in-out infinite; will-change: transform; }
.minion {
  display: block; width: 100%; height: auto;
  transition: transform 0.45s cubic-bezier(0.34, 1.45, 0.64, 1);
}
@keyframes minion-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-11px) rotate(-1.2deg); }
}
.minion-stage:hover .minion { transform: translateY(-18px) scale(1.07) rotate(3deg); }
.minion-stage:hover .minion-glow { opacity: 1; scale: 1.12; }

.minions-head { margin-bottom: var(--s-2); }
.minions .sec-title { max-width: 15ch; }
.minions-copy {
  max-width: 54ch; margin: var(--s-3) 0 0;
  color: var(--ink-2); font-size: 17px;
}
/* character above, the words below. Kept after the base rules above so these
   overrides actually win the cascade (see the note above .minion-stage). */
@media (max-width: 780px) {
  .minions-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s-3); }
  .minions .sec-title, .minions-copy { margin-left: auto; margin-right: auto; }
  .minions-copy { max-width: min(54ch, 100%); }
  .minion-stage { left: 0; }
}
.minions-soon {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: var(--s-4);
  font-family: var(--mono); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--indigo);
}
/* deployment beacon: a steady blip with a radar ring going out from it */
.beacon {
  position: relative; flex: 0 0 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--fur);
  animation: beacon-blip 1.7s ease-in-out infinite;
}
.beacon::after {
  content: ""; position: absolute; inset: -3px;
  border: 1.5px solid var(--indigo); border-radius: 50%;
  animation: beacon-ping 1.7s ease-out infinite;
}
@keyframes beacon-blip { 0%, 100% { opacity: 1; } 55% { opacity: 0.35; } }
@keyframes beacon-ping {
  0%   { transform: scale(0.55); opacity: 0.85; }
  100% { transform: scale(2);    opacity: 0; }
}
.minions-soon .dots { letter-spacing: 0.02em; }
.minions-soon .dots i { font-style: normal; animation: soon-dot 1.4s steps(1) infinite; }
.minions-soon .dots i:nth-child(2) { animation-delay: 0.25s; }
.minions-soon .dots i:nth-child(3) { animation-delay: 0.5s; }
@keyframes soon-dot { 0%, 45% { opacity: 0.25; } 55%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .minion-bob, .minions-soon .dots i, .beacon, .beacon::after { animation: none; }
  .minion, .minion-glow { transition: none; }
  .beacon::after { opacity: 0.35; }
}

/* ============ FOOTER ============ */
footer.mega { background: var(--dark); color: #F2F1EC; padding: var(--s-6) 0 var(--s-4); }
.mega .mono-label { color: #A9A2E8; display: block; margin-bottom: var(--s-3); }
.mega-top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--s-4) var(--s-5); align-items: end;
  padding-bottom: var(--s-5);
}
@media (max-width: 760px) { .mega-top { grid-template-columns: 1fr; align-items: start; } }
.mega h2 { font-size: clamp(34px, 4.8vw, 60px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; max-width: 14ch; color: #F2F1EC; }
.mega-sub { margin-top: var(--s-3); max-width: 50ch; font-size: 16.5px; color: rgba(242, 241, 236, 0.66); }

/* the footer headline writes itself when it scrolls into view */
.typewrite.typing::after {
  content: "_";
  color: var(--indigo-soft);
  animation: caretblink 0.8s steps(1) infinite;
}
@keyframes caretblink { 50% { opacity: 0; } }
.mega-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .mega-cta { justify-content: flex-start; } }
.pill.ghost { background: transparent; color: #F2F1EC; border: 1px solid rgba(255, 255, 255, 0.28); }
.pill.ghost:hover { border-color: rgba(255, 255, 255, 0.6); }

.mega-rule {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: var(--s-5);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, auto));
  gap: var(--s-4) var(--s-5);
  align-items: start;
}
.foot-brand { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.foot-brand p { max-width: 30ch; font-size: 14.5px; color: #B9B9C2; }
.mega .brand .logo { height: 36px; }
.foot-social { display: flex; align-items: center; gap: 14px; }
.foot-social a { display: block; color: #B9B9C2; transition: color 0.2s ease, transform 0.2s ease; }
.foot-social a:hover { color: #fff; transform: translateY(-2px); }
.foot-cols { display: contents; }
.foot-cols h4 { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #8E8D98; margin-bottom: 14px; }
.foot-cols a { display: block; color: #B9B9C2; font-size: 14.5px; text-decoration: none; margin-bottom: 10px; white-space: nowrap; }
.foot-cols a:hover { color: #fff; }
@media (max-width: 860px) {
  .mega-rule { grid-template-columns: 1fr; }
  .foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
}
@media (max-width: 520px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot-note {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: #77777f;
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* frame: still observed for reveal timing, but the box itself does not
   fade. Its children (words, dash, avatar) carry the animation instead. */
.reveal.frame { opacity: 1; transform: none; }

/* line by line text reveal: js wraps words and assigns each a --line
   index, so every visual line fades up together, top line first */
.lr-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--line, 0) * 0.13s);
}
.reveal.in .lr-word { opacity: 1; transform: none; }

/* quote attribution follows the lines, avatar pops in last */
.quote .who { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease 0.85s, transform 0.6s ease 0.85s; }
.quote.reveal.in .who { opacity: 1; transform: none; }
.quote .dotmark { transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s; }
.quote.reveal.in .dotmark { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lr-word, .quote .who, .quote .dotmark { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ===== phone menu (below 900px): a menu button in the nav opens a sheet with the same links ===== */
.nav-menu-btn {
  display: none;
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
  align-items: center; justify-content: center; cursor: pointer;
  color: var(--ink); background: none; border: 1px solid var(--hair);
}
.nav-menu-btn:hover { color: var(--indigo); border-color: var(--indigo); background: var(--lavender); }
.m-sheet {
  position: fixed; inset: 76px 0 auto 0; z-index: 59;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-3) var(--gutter) var(--s-4);
  background: rgba(242, 242, 242, 0.98);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 24px 40px rgba(19, 19, 24, 0.12);
  max-height: calc(100dvh - 76px); overflow-y: auto;
}
.m-sheet[hidden] { display: none; }
.m-links { display: flex; flex-direction: column; }
.m-links a {
  display: flex; align-items: center; min-height: 48px;
  font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hair);
}
.m-links a:hover { color: var(--indigo); }
.m-sheet .pill { justify-content: center; }
@media (max-width: 900px) { .nav-menu-btn { display: inline-flex; } }
@media (min-width: 901px) { .m-sheet { display: none !important; } }