@charset "utf-8";

/* ============================================================================
   Sentito: Reel
   ----------------------------------------------------------------------------
   Linked on every Sentito page, after microsites.css. The site is drawn
   on the reel layout (data/microsites.mjs): a kiln-orange page, warm-black ink,
   DM Mono labels and Manrope 800 headlines. Sentito has a brand kit, Voiceprint
   S 1.0 (docs/scribe-brand.md), and this sheet carries the parts of it a
   palette cannot.

     1  Manrope, the kit's typeface, for headlines;
     2  the logo where the site would otherwise type the name. On the orange
        header it is the all-ink lockup, because orange bars vanish on orange;
        the colophon is warm black and keeps the kit's own;
     3  the gallery's Assets plates, which show the kit itself;
     4  the pictures of the product: the frames each capture sits in (a
        browser, the app's window, a phone, a tablet), the two screen tours and
        the motion that goes with them. Motion is opt-in: the script adds
        .sc-motion only when the reader hasn't asked for reduced motion, and
        every reveal starts from the finished state without it;
     5  the reel theme: every page's ground, header, buttons, and the shared
        page parts restyled for ink on orange;
     6  the front page: the hook, the four steps and the price, over two tape
        reels that turn as you scroll (src/products/scribe.mjs drives --p).

   Contrast. Warm black #100C0B on Kiln orange #FF7A3C is 6.9:1, and the softer
   ink (#402215, warm black at 80%) is 5.6:1, used only where nothing sits
   behind the words. Over the reels every word is full ink: the reels are faint
   enough that the darkest spot behind a word still leaves 4.8:1. On warm black,
   orange is 6.9:1, cream 15:1 and muted #9C8A7C 5.9:1.

   The palette arrives inline on <html> like every product's, from the kit's
   named colours (src/microsite-brand.mjs). Section 5 redeclares it on <body>,
   which every element inherits from instead.
   ========================================================================== */

/* Manrope variable, from the kit, under the SIL Open Font License
   (shots/Manrope-OFL.txt). Relative to this file, which is the site's
   product.css at its root. */
@font-face {
  font-family: "Manrope";
  src: url("shots/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── 1. Type ─────────────────────────────────────────────────────────────── */

html[data-product='scribe'] {
  --brand: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* The family's one serif is for statements, the sentence a section exists
     to make. The kit has no serif: its statements are Manrope at 400. */
  --serif: var(--brand);
}

/* Zero specificity, so a heading a stylesheet sets in mono (the colophon's
   column labels, a layout's small caps) keeps it. The weight is section 5's. */
:where(html[data-product='scribe']) :where(h1, h2, h3) {
  font-family: var(--brand);
}

/* ── 2. Logo ─────────────────────────────────────────────────────────────── */

/* The horizontal logo, at the wordmark’s minimum size or more. Its SVG
   includes the clear space (28 of 614 units at the left), so the negative
   margin lines the first bar up with the page edge while the space itself
   stays empty. */
html[data-product='scribe'] .wordmark__logo {
  flex: none;
  width: 118px;
  height: auto;
  margin-inline-start: calc(118px * -28 / 614);
}

/* The colophon's lockup sits on warm black, at the kit's comfortable size. */
html[data-product='scribe'] .colophon .wordmark__logo {
  width: 155px;
  margin-inline-start: calc(155px * -28 / 614);
}

/* ── 3. Gallery assets ───────────────────────────────────────────────────── */

/* The stacked lockup, whole. The shared rule fills the plate's width, which
   for the stacked image is taller than the plate and crops the wordmark off the
   bottom; this sizes it to the plate's inner height instead (13rem, less its
   padding and border). */
html[data-product='scribe'] .plate__art img {
  width: auto;
  max-width: 100%;
  height: calc(13rem - 2 * var(--s3) - 2px);
}

/* Six named colours, not the family's four derived steps. Warm black and
   surface sit on a ground nearly their own colour, so every chip carries the
   kit's hairline. */
html[data-product='scribe'] .swatches--kit {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  border-radius: 0;
  overflow: visible;
}

html[data-product='scribe'] .swatches--kit i {
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line);
}

html[data-product='scribe'] .typespec--kit {
  gap: 0.6rem;
  text-align: left;
}

html[data-product='scribe'] .typespec--kit b {
  font-family: var(--brand);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.1;
}

html[data-product='scribe'] .typespec--kit em {
  color: var(--dim);
  font-family: var(--brand);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

@media (max-width: 46rem) {
  html[data-product='scribe'] .swatches--kit i {
    aspect-ratio: 1 / 1.35;
  }
}

/* ── 4. Product pictures ─────────────────────────────────────────────────── */

html[data-product='scribe'] {
  --sc-radius: 14px;
  --sc-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.35);
}

html[data-product='scribe'] .section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

html[data-product='scribe'] .section__head h2 {
  max-width: 24ch;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
}

html[data-product='scribe'] .section__head .lead {
  margin-top: var(--s1) !important;
  font-size: 1.05rem;
}

/* A window: the web app's browser, or the Sentito Server app. The captures
   are square-cornered; the frame adds the bar and rounds all four corners. */
.scw {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-radius: var(--sc-radius);
  background: var(--sink);
  box-shadow: var(--sc-shadow);
}

.scw__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding-inline: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--dim);
  font: 500 0.72rem var(--ui);
}

.scw__bar i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 16%, var(--sink));
}

.scw__bar span {
  flex: 1;
  margin-right: 37px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The browser's address field, where a window has only a title. */
.scw--browser .scw__bar span {
  flex: 0 1 18rem;
  margin-inline: auto;
  padding: 2px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.scw__screen {
  position: relative;
  display: grid;
  aspect-ratio: 1280 / 800;
  background: #0f0b09;
}

.scw--app .scw__screen {
  aspect-ratio: 1120 / 800;
}

.scw__screen .shot__pic,
.scw__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A phone, cut to the screen's own corners. */
.scp {
  margin: 0;
}

.scp__screen {
  overflow: hidden;
  aspect-ratio: 902 / 1962;
  border: 1px solid var(--line);
  border-radius: 13% / 6%;
  background: #000;
  box-shadow: var(--sc-shadow);
}

.scp__screen .shot__pic,
.scp__screen img {
  display: block;
  width: 100%;
  height: auto;
}

.scp figcaption {
  margin-top: var(--s2);
  color: var(--dim);
  font-size: 0.8rem;
  line-height: 1.45;
}

.scp figcaption strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text);
  font-weight: 600;
}

/* ── In short: the front page's old opening, on How it works ── */

.sc-intro__promise {
  max-width: 34ch;
  margin: var(--s2) 0 var(--s2);
  font-family: var(--brand);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.sc-intro__state {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: var(--s3) 0 0;
  font: 500 0.8125rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Three facts, on one rule. */
.sc-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--s4) 0 0;
  border-block: 2px solid var(--text);
}

.sc-proof__grid > div {
  padding: var(--s3) var(--s3) var(--s3) 0;
}

.sc-proof__grid > div + div {
  padding-left: var(--s3);
  border-left: 1px solid var(--line-soft);
}

.sc-proof__grid dt {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sc-proof__grid dd {
  margin: 0.3rem 0 0;
  color: var(--dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ── Steps ── */

.sc-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-steps__list::before {
  position: absolute;
  top: 1.05rem;
  left: 1.1rem;
  right: 1.1rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
  transform-origin: left;
  content: "";
}

.sc-motion .sc-steps__list::before {
  transform: scaleX(0);
  transition: transform 1.4s var(--ease) 0.15s;
}

.sc-motion .sc-steps__list.is-in::before {
  transform: none;
}

.sc-steps__list li {
  position: relative;
}

.sc-steps__n {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  font: 500 0.85rem var(--mono);
}

.sc-steps__list h3 {
  margin: var(--s2) 0 0.4rem;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.sc-steps__list p {
  margin: 0;
  color: var(--dim);
  font-size: 0.9rem;
  line-height: 1.6;
}

.sc-motion .sc-steps__list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(0.25s + var(--i) * 0.22s);
}

.sc-motion .sc-steps__list.is-in li {
  opacity: 1;
  transform: none;
}

/* ── Tours ── */

.sc-tour {
  max-width: 64rem;
}

.sc-server .sc-tour {
  max-width: 56rem;
}

.sc-tour__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--s2);
}

.sc-tour__tabs input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sc-tour__tabs label {
  position: relative;
  overflow: hidden;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font: 500 0.86rem var(--ui);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.sc-tour__tabs label:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  color: var(--text);
}

.sc-tour__tabs input:checked + label {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--text);
}

.sc-tour__tabs input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* While a tour moves on its own, the picked tab fills up to show when. */
.sc-tour__tabs label::after {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  content: "";
}

.sc-tour[data-auto] .sc-tour__tabs input:checked + label::after {
  animation: sc-meter 5.2s linear both;
}

@keyframes sc-meter {
  to { transform: none; }
}

.sc-tour__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}

.sc-tour__caps {
  display: grid;
  margin-top: var(--s2);
}

.sc-tour__caps p {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--dim);
  font-size: 0.92rem;
  opacity: 0;
  visibility: hidden;
}

.sc-tour:has(.sc-tour__tabs input:nth-of-type(1):checked) :is(.sc-tour__panel, .sc-tour__caps p):nth-child(1),
.sc-tour:has(.sc-tour__tabs input:nth-of-type(2):checked) :is(.sc-tour__panel, .sc-tour__caps p):nth-child(2),
.sc-tour:has(.sc-tour__tabs input:nth-of-type(3):checked) :is(.sc-tour__panel, .sc-tour__caps p):nth-child(3),
.sc-tour:has(.sc-tour__tabs input:nth-of-type(4):checked) :is(.sc-tour__panel, .sc-tour__caps p):nth-child(4),
.sc-tour:has(.sc-tour__tabs input:nth-of-type(5):checked) :is(.sc-tour__panel, .sc-tour__caps p):nth-child(5),
.sc-tour:has(.sc-tour__tabs input:nth-of-type(6):checked) :is(.sc-tour__panel, .sc-tour__caps p):nth-child(6),
.sc-tour:has(.sc-tour__tabs input:nth-of-type(7):checked) :is(.sc-tour__panel, .sc-tour__caps p):nth-child(7) {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ── Phones ── */

.sc-mobile__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.sc-mobile__copy h2 {
  margin: var(--s1) 0 0;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
}

.sc-mobile__copy .lead {
  margin-top: var(--s2);
  font-size: 1.05rem;
}

.sc-mobile__facts {
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
}

.sc-mobile__facts li {
  padding-block: 0.6rem;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font: 0.8rem var(--mono);
  letter-spacing: 0.02em;
}

.sc-mobile__phones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: start;
}

/* The middle phone sits higher, so the three read as a group. */
.sc-mobile__phones .scp--1 {
  margin-top: calc(-1 * var(--s4));
}

.sc-mobile__phones .scp--0,
.sc-mobile__phones .scp--2 {
  margin-top: var(--s3);
}

.sc-motion .sc-mobile__phones .scp,
.sc-motion .sc-gallery .scp {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.sc-motion .sc-mobile__phones .scp.is-in,
.sc-motion .sc-gallery .scp.is-in {
  opacity: 1;
  transform: none;
}

.sc-motion .sc-mobile__phones .scp--1 { transition-delay: 0.12s; }
.sc-motion .sc-mobile__phones .scp--2 { transition-delay: 0.24s; }

/* ── The pipeline ── */

.sc-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-flow li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
}

.sc-flow li + li::before {
  position: absolute;
  top: 8px;
  left: -21px;
  color: var(--accent);
  font: 600 1rem var(--mono);
  content: "→";
}

.sc-jobs {
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  background: var(--raise);
}

.sc-jobs code {
  display: block;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: var(--sink);
  font-size: 0.82rem;
}

.sc-flow p {
  margin: 0;
  color: var(--dim);
  font-size: 0.88rem;
}

/* ── Gallery ── */

.sc-gallery__title {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.03em;
}

.sc-gallery__title:first-child {
  margin-top: 0;
}

.sc-gallery__desk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s3);
  margin-top: var(--s3);
}

.sc-gallery__desk figure {
  margin: 0;
}

/* The first web screen is the one people came for: full width. */
.sc-gallery__desk figure:first-child {
  grid-column: 1 / -1;
}

.sc-gallery__desk figcaption {
  margin-top: var(--s2);
  color: var(--dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

.sc-gallery__desk figcaption strong {
  margin-right: 0.35rem;
  color: var(--text);
  font-weight: 600;
}

.sc-gallery__mobile {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4) var(--s3);
  align-items: start;
  max-width: 60rem;
  margin-top: var(--s3);
}

/* An iPad in landscape, cut to the screen's own corners. */
.sc-gallery__tablet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s3);
  align-items: start;
  margin-top: var(--s3);
}

.sct {
  margin: 0;
}

.sct__screen {
  overflow: hidden;
  aspect-ratio: 2400 / 1800;
  border: 1px solid var(--line);
  border-radius: 2.4% / 3.2%;
  background: #000;
  box-shadow: var(--sc-shadow);
}

.sct__screen .shot__pic,
.sct__screen img {
  display: block;
  width: 100%;
  height: auto;
}

.sct figcaption {
  margin-top: var(--s2);
  color: var(--dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

.sct figcaption strong {
  margin-right: 0.35rem;
  color: var(--text);
  font-weight: 600;
}

.sc-gallery__note {
  max-width: 44rem;
  margin: var(--s4) 0 0;
  color: var(--dim);
  font-size: 0.9rem;
}

.sc-motion .sc-gallery__desk figure,
.sc-motion .sc-gallery .sct {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.sc-motion .sc-gallery__desk figure.is-in,
.sc-motion .sc-gallery .sct.is-in {
  opacity: 1;
  transform: none;
}

/* ── Narrower screens ── */

@media (max-width: 64rem) {
  .sc-mobile__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-steps__list,
  .sc-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sc-steps__list::before {
    display: none;
  }

  .sc-flow li:nth-child(3)::before {
    display: none;
  }

  .sc-gallery__mobile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 46rem) {
  .sc-tour__tabs label {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
  }

  .sc-proof__grid,
  .sc-gallery__desk,
  .sc-gallery__tablet,
  .sc-steps__list,
  .sc-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .sc-proof__grid > div,
  .sc-proof__grid > div + div {
    padding: var(--s2) 0;
    border-left: 0;
  }

  .sc-proof__grid > div + div {
    border-top: 1px solid var(--line-soft);
  }

  .sc-flow {
    gap: 30px;
  }

  .sc-flow li + li::before,
  .sc-flow li:nth-child(3)::before {
    display: block;
    top: -25px;
    left: 12px;
    content: "↓";
  }

  .sc-mobile__phones {
    gap: 0.6rem;
  }

  .sc-mobile__phones .scp--1 {
    margin-top: 0;
  }

  .sc-mobile__phones figcaption {
    display: none;
  }

  .sc-gallery__mobile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scw__bar {
    height: 24px;
  }

  .scw__bar i {
    width: 8px;
    height: 8px;
  }
}

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

/* ── 5. The reel theme ───────────────────────────────────────────────────── */

/* The ground is on <html>, and <body> is clear, so the reels (z-index -1)
   paint between the two. */
html[data-layout='reel'] {
  background: #FF7A3C;
  scroll-padding-top: 5.5rem;
}

html[data-layout='reel'] body {
  --orange: #FF7A3C;
  --ember: #E8512E;
  --ink: #100C0B;
  --surface: #1A1513;
  --cream: #F0E5D8;
  --muted: #9C8A7C;
  /* Warm black at 80% on orange: 5.6:1. */
  --soft: #402215;

  --bg: var(--orange);
  --text: var(--ink);
  --dim: var(--soft);
  /* Warm black at 22% and 12% on orange, for rules that carry no meaning alone. */
  --line: #CA6231;
  --line-soft: #E26D36;
  --accent: var(--ink);
  --accent-deep: var(--ink);
  --accent-soft: var(--ink);
  --accent-ink: var(--ink);
  --accent-wash: #EE7138;
  --on-accent: var(--orange);
  --counter: var(--ink);
  --counter-deep: var(--ink);
  --raise: #FF8A52;
  --sink: #F07436;
  --paper: var(--ink);
  --paper-deep: var(--surface);
  --paper-ink: var(--cream);
  --paper-dim: var(--muted);
  --paper-line: #3D3531;
  --radius: 0;
  --sc-radius: 14px;
  --sc-shadow: 10px 12px 0 rgba(16, 12, 11, 0.9);

  background: transparent;
  color: var(--ink);
  font-size: 1.0625rem;
}

/* The warm-black parts of the page take the dark side of the same names. */
html[data-layout='reel'] :is(.paper, .cta, .colophon, .rl-end, .plate__art) {
  --bg: var(--ink);
  --text: var(--cream);
  --dim: var(--muted);
  --line: #4A403B;
  --line-soft: #2E2725;
  --accent: var(--orange);
  --accent-deep: var(--orange);
  --accent-soft: var(--orange);
  --accent-wash: #2A1A12;
  --on-accent: var(--ink);
  --counter: var(--orange);
  --raise: var(--surface);
  --sink: #15110F;
  background: var(--ink);
  color: var(--cream);
}

html[data-layout='reel'] :where(h1, h2, h3) {
  font-family: var(--brand);
  font-weight: 800;
  letter-spacing: -0.045em;
}

html[data-layout='reel'] :where(h3) {
  font-weight: 700;
  letter-spacing: -0.025em;
}

html[data-layout='reel'] :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

html[data-layout='reel'] .kicker,
.rl-mono {
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

html[data-layout='reel'] code {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

/* Buttons: ink with orange words; on warm black, the other way round. */
html[data-layout='reel'] .btn {
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

html[data-layout='reel'] .btn:hover {
  background: var(--surface);
  color: var(--cream);
  box-shadow: none;
  transform: none;
}

html[data-layout='reel'] .btn:active {
  transform: translateY(1px);
}

html[data-layout='reel'] .btn--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--text);
  color: var(--text);
}

html[data-layout='reel'] .btn--ghost:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: inset 0 0 0 2px var(--text);
  color: var(--text);
}

html[data-layout='reel'] :is(.paper, .cta, .rl-end) .btn:not(.btn--ghost):not(.btn--on-paper):hover {
  background: #FF8A52;
  color: var(--ink);
}

html[data-layout='reel'] .btn--on-paper {
  background: var(--orange);
  color: var(--ink);
}

html[data-layout='reel'] .tlink {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

html[data-layout='reel'] .tlink:hover {
  color: inherit;
  text-decoration-thickness: 3px;
}

/* ── Header ── */

html[data-layout='reel'] .masthead {
  background: rgba(255, 122, 60, 0.94);
  border-bottom: 2px solid var(--ink);
}

html[data-layout='reel'] .masthead__inner {
  gap: var(--s2);
  min-height: 72px;
}

html[data-layout='reel'] .sitenav {
  gap: 2px;
}

html[data-layout='reel'] .sitenav a,
.reelmenu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}

html[data-layout='reel'] .sitenav a:hover {
  background: rgba(16, 12, 11, 0.1);
  color: var(--ink);
}

html[data-layout='reel'] .sitenav a[aria-current],
.reelmenu nav a[aria-current] {
  background: var(--ink);
  color: var(--orange);
}

html[data-layout='reel'] .masthead__action {
  min-height: 44px;
  padding-inline: 1rem;
  font-size: 0.8125rem;
}

.reelmenu {
  display: none;
}

.reelmenu summary {
  box-shadow: inset 0 0 0 2px var(--ink);
  cursor: pointer;
  list-style: none;
}

.reelmenu summary::-webkit-details-marker {
  display: none;
}

.reelmenu[open] summary {
  background: var(--ink);
  color: var(--orange);
}

.reelmenu nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  padding: 8px var(--gutter) 16px;
  background: var(--orange);
  border-bottom: 2px solid var(--ink);
}

.reelmenu nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 8px;
  margin-inline: -8px;
  color: var(--ink);
  font-family: var(--brand);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.reelmenu nav a:hover {
  background: rgba(16, 12, 11, 0.1);
}

@media (max-width: 860px) {
  html[data-layout='reel'] .sitenav,
  html[data-layout='reel'] .masthead__action {
    display: none;
  }

  .reelmenu {
    display: block;
  }

  html[data-layout='reel'] .masthead__inner {
    min-height: 64px;
  }

  html[data-product='scribe'] .wordmark__logo {
    width: 104px;
    margin-inline-start: calc(104px * -28 / 614);
  }
}

/* ── Footer ── */

html[data-layout='reel'] .colophon {
  border-top: 0;
}

html[data-layout='reel'] .colophon h2 {
  color: var(--orange);
}

html[data-layout='reel'] .colophon__base {
  border-top-color: var(--line);
}

html[data-layout='reel'] .colophon__base a {
  text-decoration-color: currentColor;
}

/* ── Every other page ── */

html[data-layout='reel'] .pagehead {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  border-bottom: 2px solid var(--ink);
}

html[data-layout='reel'] .pagehead::before {
  display: none;
}

html[data-layout='reel'] .pagehead h1 {
  max-width: 14ch;
  margin-top: var(--s3);
  font-size: clamp(3.25rem, 8vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.92;
  overflow-wrap: break-word;
}

html[data-layout='reel'] .pagehead .lead {
  max-width: 40ch;
  margin-top: var(--s3);
  color: var(--soft);
  font-size: clamp(1.15rem, 1.7vw, 1.375rem);
  line-height: 1.5;
}

html[data-layout='reel'] .crumb,
html[data-layout='reel'] .crumb a {
  color: var(--ink);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[data-layout='reel'] .crumb a {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

html[data-layout='reel'] .crumb a:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

html[data-layout='reel'] .section__head h2 {
  max-width: 20ch;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: 0.98;
}

html[data-layout='reel'] .section__head .lead {
  margin-top: var(--s1) !important;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

html[data-layout='reel'] .section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

html[data-layout='reel'] .statement {
  font-weight: 700;
  letter-spacing: -0.035em;
}

/* The closing band, as the front page ends: warm black, orange label, cream type. */
html[data-layout='reel'] .cta h2 {
  max-width: 18ch;
  color: var(--cream);
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

html[data-layout='reel'] .cta p,
html[data-layout='reel'] .cta .install__ask {
  color: var(--muted);
}

html[data-layout='reel'] .cta .kicker {
  color: var(--orange);
}

html[data-layout='reel'] .cta .btn {
  background: var(--orange);
  color: var(--ink);
}

html[data-layout='reel'] .cta .tlink {
  color: var(--cream);
}

html[data-layout='reel'] .pricetag dt {
  color: var(--orange);
}

html[data-layout='reel'] .pricetag dd {
  color: var(--cream);
}

/* Forms: cream fields with an ink edge, readable at a glance on orange. */
html[data-layout='reel'] .keyform input {
  min-height: 48px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
}

html[data-layout='reel'] .keyform input::placeholder {
  color: #5C5048;
}

html[data-layout='reel'] .formnote--error {
  border-left-color: var(--ink);
}

/* Rules that carry structure are ink, at full strength. */
html[data-layout='reel'] :is(.faq, .pricehead, .dlcard, .keycard) {
  border-top: 2px solid var(--text);
}

html[data-layout='reel'] .faq summary {
  font-family: var(--brand);
  font-weight: 800;
  letter-spacing: -0.02em;
}

html[data-layout='reel'] .pricehead dt {
  font-family: var(--brand);
  font-weight: 800;
  letter-spacing: -0.04em;
}

html[data-layout='reel'] .docindex {
  border-block: 2px solid var(--ink);
  background: var(--line);
}

html[data-layout='reel'] .docindex a {
  background: var(--orange);
}

html[data-layout='reel'] .docindex a:hover {
  background: var(--raise);
}

html[data-layout='reel'] .doc__note {
  border-left-color: var(--ink);
}

html[data-layout='reel'] .doc__body h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

/* The gallery's plates hold the kit's dark lockup, so they are warm black. */
html[data-layout='reel'] .plates {
  border: 2px solid var(--ink);
  background: var(--ink);
}

html[data-layout='reel'] .plate__art {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

html[data-layout='reel'] .typespec--kit em {
  color: var(--muted);
}

html[data-layout='reel'] .swatches--kit i {
  box-shadow: inset 0 0 0 1px #4A403B;
}

/* Product pictures on orange: ink edges and a hard shadow, like the front page. */
html[data-layout='reel'] .scw {
  border: 2px solid var(--ink);
  background: var(--ink);
}

html[data-layout='reel'] .scw__bar {
  color: var(--muted);
  border-bottom-color: #2E2725;
}

html[data-layout='reel'] .scw__bar i {
  background: #3D3531;
}

html[data-layout='reel'] .scw--browser .scw__bar span {
  background: #1F1A18;
}

html[data-layout='reel'] :is(.scp__screen, .sct__screen) {
  border: 3px solid var(--ink);
}

html[data-layout='reel'] .sc-tour__tabs label {
  border: 2px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-layout='reel'] .sc-tour__tabs label:hover {
  background: rgba(16, 12, 11, 0.1);
}

html[data-layout='reel'] .sc-tour__tabs input:checked + label {
  background: var(--ink);
  color: var(--orange);
}

html[data-layout='reel'] .sc-tour__tabs label::after {
  background: var(--orange);
}

html[data-layout='reel'] .sc-tour__tabs input:focus-visible + label {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

html[data-layout='reel'] .sc-steps__list::before {
  height: 2px;
  background: var(--ink);
}

html[data-layout='reel'] .sc-steps__n {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--orange);
  color: var(--ink);
}

html[data-layout='reel'] .sc-jobs {
  border-radius: 0;
  background: var(--ink);
}

html[data-layout='reel'] .sc-jobs code {
  border-radius: 0;
  background: var(--surface);
  color: var(--orange);
}

html[data-layout='reel'] .sc-flow li + li::before {
  color: var(--ink);
}

.sc-how__note {
  padding-block: 0 var(--s5);
  color: var(--soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 46rem) {
  html[data-layout='reel'] .pagehead h1 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }
}

/* ── 6. The front page ───────────────────────────────────────────────────── */

/* The reels. Fixed behind the page, faint, and turned by --p (0 at the top of
   the page, 1 at the foot). Without the script, and with reduced motion, they
   hold this still frame. */
.rl-bg {
  --p: 0.35;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.rl-reel {
  position: absolute;
  top: 50%;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  opacity: 0.16;
  transform: translateY(-50%);
}

.rl-reel--l { left: max(-26vw, -360px); }
.rl-reel--r { right: max(-26vw, -360px); }

.rl-reel svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rl-pack {
  fill: #100C0B;
  transform-box: fill-box;
  transform-origin: center;
}

.rl-spin {
  fill: none;
  stroke: #100C0B;
  stroke-width: 6;
  transform-box: fill-box;
  transform-origin: center;
}

.rl-hub {
  stroke-width: 10;
}

/* Tape winds off the left reel and onto the right one. */
.rl-reel--l .rl-pack { transform: scale(calc(1 - var(--p) * 0.58)); }
.rl-reel--r .rl-pack { transform: scale(calc(0.42 + var(--p) * 0.58)); }
.rl-reel--l .rl-spin { transform: rotate(calc(var(--p) * -1800deg)); }
.rl-reel--r .rl-spin { transform: rotate(calc(var(--p) * -1080deg)); }

.rl-tape {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 34px;
  overflow: hidden;
  border-block: 1px solid rgba(16, 12, 11, 0.14);
  background: rgba(16, 12, 11, 0.08);
  transform: translateY(-50%);
}

.rl-tape span {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 34px;
  color: rgba(16, 12, 11, 0.3);
  font: 400 0.875rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(calc(var(--p) * -50%));
}

/* Over the reels every word is full ink. */
.rl-hero__in {
  display: grid;
  justify-items: center;
  align-content: center;
  /* The whole first screen, so the tape, which sits halfway down the window, runs behind the
     headline on a tall or 21:9 window too. Capped at 800px it ran through the buttons at 1440p. */
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  padding-block: 80px;
  text-align: center;
}

.rl-hero h1 {
  margin: 20px 0 0;
  font-size: clamp(3.4rem, 8.6vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.rl-hero__sub {
  max-width: 34ch;
  margin: 28px 0 0;
  color: var(--ink);
  font-size: clamp(1.2rem, 1.7vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
}

.rl-hero__note {
  max-width: 44ch;
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 0.95rem;
  opacity: 0.75;
}

.rl-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.rl-beat__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  min-height: 760px;
  padding-block: 64px;
}

.rl-count {
  justify-self: end;
  text-align: right;
}

.rl-count b {
  display: block;
  font: 500 clamp(3.5rem, 6vw, 6rem)/1 var(--mono);
  letter-spacing: -0.02em;
}

.rl-beat h2 {
  margin: 0;
  font-size: clamp(2.5rem, 4.4vw, 4.125rem);
  line-height: 0.95;
}

.rl-beat p:not(.rl-mono) {
  max-width: 24ch;
  margin: 16px 0 0;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
}

.rl-phone {
  margin: 0;
  overflow: hidden;
  border-radius: 40px;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 10px var(--orange), 0 0 0 12px var(--ink), 14px 18px 0 12px rgba(16, 12, 11, 0.9);
}

.rl-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.rl-end {
  position: relative;
}

.rl-end__in {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 560px;
  padding-block: 96px;
  text-align: center;
}

.rl-end h2 {
  margin: 16px 0 0;
  color: var(--cream);
  font-size: clamp(3.25rem, 7.6vw, 7.25rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.rl-end h2 span {
  color: var(--orange);
}

.rl-end p:not(.rl-mono) {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 1.25rem;
}

.rl-end .rl-mono {
  color: var(--orange);
}

@media (max-width: 860px) {
  .rl-reel {
    width: 90vw;
    opacity: 0.12;
  }

  .rl-reel--l { left: -60vw; }
  .rl-reel--r { right: -60vw; }

  /* On a phone the words cross the tape more often, so its lettering steps back. */
  .rl-tape span {
    color: rgba(16, 12, 11, 0.2);
  }

  .rl-hero__in {
    min-height: 0;
    padding-block: 72px 56px;
  }

  .rl-hero h1 {
    font-size: clamp(3rem, 14.5vw, 4.5rem);
  }

  .rl-beat__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
    padding-block: 56px;
    justify-items: center;
    text-align: center;
  }

  .rl-count {
    justify-self: center;
    text-align: center;
  }

  .rl-count b {
    font-size: 3rem;
  }

  .rl-phone {
    width: min(72%, 290px);
    border-radius: 32px;
  }

  .rl-beat h2 {
    font-size: 2.5rem;
  }

  .rl-beat p:not(.rl-mono) {
    margin-inline: auto;
  }

  .rl-end h2 {
    font-size: clamp(2.9rem, 13.5vw, 4.5rem);
  }

  .rl-end__in {
    min-height: 0;
    padding-block: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-layout='reel'] *,
  html[data-layout='reel'] *::before,
  html[data-layout='reel'] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}