/* ===========================================================
   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;
  --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.55;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  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: 600; 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.06em;
  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(--indigo);
}
.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.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: 560;
  letter-spacing: -0.025em;
  line-height: 1.04;
}

/* 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(--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-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grid.cols-4, .grid.cols-2 { grid-template-columns: 1fr; } }

.cell .ico { height: 30px; color: var(--ink); margin-bottom: var(--s-3); }
/* 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;
  backdrop-filter: blur(10px) saturate(160%);
  background: rgba(242, 242, 242, 0.78);
  border-bottom: 1px solid transparent;
}
header.nav.scrolled { border-bottom-color: var(--hair); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); height: 68px; }
.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: 32px; width: auto;
  aspect-ratio: 535.2 / 121.7; flex: 0 0 auto;
}
.mega .brand .logo { height: 30px; }
/* 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 .logo-mark { fill: #6E6E7A; }
.nav-links { display: flex; gap: 26px; font-size: 14.5px; 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: 9px 16px; font-size: 13.5px; }
.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;
  padding-top: 84px;
  overflow: hidden;
}
@media (max-width: 760px) { .hero-c { padding-top: 56px; } }

.hero-c > .wrap { position: relative; z-index: 1; }

/* 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 30%;
  margin-top: clamp(-250px, -16vw, -90px);
  -webkit-mask-image: radial-gradient(135% 125% at 50% 112%, #000 50%, rgba(0,0,0,0) 80%);
  mask-image: radial-gradient(135% 125% at 50% 112%, #000 50%, rgba(0,0,0,0) 80%);
}
.hero-c .hero-photo { z-index: 0; }
.hero-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-c h1 {
  margin-top: var(--s-4);
  font-size: clamp(46px, 7.4vw, 96px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.hero-c h1 .accent { color: var(--indigo); }
.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); }

.wl-form {
  margin: var(--s-4) auto 0;
  display: flex; align-items: center; gap: 8px;
  width: min(600px, 100%);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 8px 8px 8px 24px;
  box-shadow: 0 14px 40px rgba(19, 19, 24, 0.08);
}
.wl-form input {
  flex: 1; min-width: 0;
  border: none; outline: none;
  font-family: var(--font); font-size: 16px; color: var(--ink);
  background: transparent;
}
.wl-form input::placeholder { color: var(--ink-3); }
.wl-form .pill.dark { background: var(--ink); color: #fff; }
.wl-form .thanks { flex: 1; text-align: center; font-weight: 600; padding: 12px 0; }
@media (max-width: 520px) {
  .wl-form { flex-direction: column; border-radius: 24px; padding: 12px; gap: 10px; }
  .wl-form input { width: 100%; text-align: center; padding: 8px 0; }
  .wl-form .pill.dark { width: 100%; justify-content: center; }
}
.hero-c .note { margin-top: var(--s-2); font-size: 13.5px; color: var(--ink-3); }
.hero-c .note b { color: var(--ink-2); }

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

/* ---------- tints ---------- */
.tint-white    { background-color: #F2F2F2; }
.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 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; }
.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); }
.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(--indigo);
  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: #fff; padding: var(--s-6) 0 var(--s-4); }
.mega-top {
  display: grid; grid-template-columns: 1.5fr auto; gap: var(--s-4); align-items: start;
  padding-bottom: var(--s-5);
}
@media (max-width: 760px) { .mega-top { grid-template-columns: 1fr; } }
.mega h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 600; letter-spacing: -0.03em; max-width: 15ch; color: var(--blush); }
/* the line under the footer headline: every audience from the who section,
   softer than the headline so the hierarchy still reads */
.mega-sub {
  margin-top: var(--s-3);
  max-width: 48ch;
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.66);
}

/* footer form: light lines on the dark band, not a solid white pill */
.mega .wl-form {
  margin: var(--s-4) 0 0;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}
.mega .wl-form input { color: #fff; }
.mega .wl-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.mega .wl-form .pill.dark { background: #fff; color: var(--ink); }
.mega .wl-form .thanks { color: #fff; }
/* the form is disabled while a signup is in flight, and shows the failure inline */
.wl-form.sending { opacity: 0.7; }
.wl-form .pill.dark[disabled] { cursor: default; opacity: 0.75; }
.wl-error { margin-top: var(--s-2); font-size: 13.5px; color: #B4322A; }
.mega .wl-error { color: #F2A9A2; }

/* 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; flex-direction: column; gap: 12px; align-items: flex-end; }
@media (max-width: 760px) { .mega-cta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } }
.mega-rule {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: var(--s-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4) var(--s-5);
  align-items: start;
}
@media (max-width: 640px) { .mega-rule { grid-template-columns: 1fr; } }
.mega .brand { color: #6E6E7A; font-size: 22px; }
.mega .brand span { color: var(--indigo-soft); }
.foot-cols { display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: flex-end; }
/* the logo, the socials under it, the link columns opposite. Placed
   explicitly so the socials sit with the brand instead of auto-flowing into
   the links cell. */
.foot-cols { grid-column: 2; grid-row: 1; }
.foot-social {
  grid-column: 1; grid-row: 2;
  margin-top: -16px;
  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); }
@media (max-width: 640px) {
  .foot-cols { justify-content: flex-start; }
  .foot-cols, .foot-social { grid-column: 1; grid-row: auto; }
  .foot-social { margin-top: 0; }
}
.foot-cols a { display: block; color: #B9B9C2; font-size: 14px; text-decoration: none; margin-bottom: 10px; }
.foot-cols a:hover { color: #fff; }
.foot-note {
  grid-column: 1 / -1;
  margin-top: var(--s-3);
  color: #77777f; font-size: 13px;
  display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap;
}

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

/* ============ ENTER BETA MODAL ============ */
.beta-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(19, 19, 24, 0.55);
  backdrop-filter: blur(6px);
  padding: 20px;
}
.beta-modal.show { display: flex; }
.beta-card {
  background: var(--paper);
  border-radius: 18px;
  padding: 34px 30px 30px;
  width: min(400px, 100%);
  position: relative;
  text-align: left;
  box-shadow: 0 30px 80px rgba(16, 16, 19, 0.35);
  animation: beta-rise 0.3s ease;
}
@keyframes beta-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.beta-card h3 { font-size: 24px; margin: 10px 0 8px; }
.beta-card > p { color: var(--ink-2); font-size: 15px; margin: 0 0 18px; }
.beta-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-3);
  padding: 4px;
}
.beta-close:hover { color: var(--ink); }
.beta-form { display: flex; gap: 8px; }
.beta-form input {
  flex: 1; min-width: 0;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--font); font-size: 15px; color: var(--ink);
  outline: none; background: #fff;
}
.beta-form input:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(59, 44, 224, 0.12); }
.beta-error { color: #C0392B; font-size: 13.5px; margin: 12px 0 0; }
.beta-card.shake { animation: beta-shake 0.4s ease; }
@keyframes beta-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .beta-card, .beta-card.shake { animation: none; }
}