/* Sections carried over from the prototype, rebuilt on the hero's tokens.
   Every colour here is a var() from hero.css :root; nothing is full-bleed
   opaque, so the halo's side rails keep lighting the page as it scrolls. */

.skip-link {
  position: absolute;
  z-index: 3;
  left: 24px;
  top: 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--cobalt);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: none; }

/* The inline sprite is a definition, not a box. */
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  /* Opaque, no backdrop blur: over the white report page a blurred bar turned
     grey and read as a rendering fault (G3). */
  background: var(--header-ground);
  border-bottom-color: var(--hairline);
}

.site-logo { display: flex; align-items: center; min-height: 44px; color: var(--text); line-height: 0; }

/* On the company page the entry lockup is the brand, so the header does not
   say it twice; the mark returns once the entry has scrolled away. Hidden by
   visibility, not opacity: an invisible link must leave the tab order too. */
.logo-late .site-logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease-out, visibility 0s linear 240ms;
}

.logo-late.is-past-entry .site-logo {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* One pixel under the header: once it leaves, the header takes its ground,
   so nothing scrolls visibly under a transparent bar. */
.header-sentinel { height: 1px; margin-top: -1px; }

/* Phone navigation is a native disclosure: no menu script, no focus trap. */
.menu { position: relative; }

.menu summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--secondary);
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.menu summary::-webkit-details-marker { display: none; }
.menu summary::after {
  width: 8px;
  height: 8px;
  margin: -3px 0 0 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 180ms ease;
  content: "";
}
.menu[open] summary::after { margin-top: 2px; transform: rotate(225deg); }
.menu summary:hover { color: var(--white); }

.menu .site-nav {
  position: absolute;
  z-index: 4;
  left: -8px;
  right: auto;
  top: calc(100% + 10px);
  display: grid;
  min-width: 190px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface);
}

.menu .site-nav a {
  padding: 11px 12px;
  border-radius: 12px;
  color: var(--text);
  font-size: 16px;
  text-decoration: none;
}

.menu .site-nav a:hover { background: var(--panel); }
.header-actions { display: flex; align-items: center; gap: 24px; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  /* The header is transparent over the hero, so the pill carries its own
     ground — otherwise the dome sits behind the label. An opaque ground, not
     a backdrop blur: the blur re-filtered the live canvas behind it on every
     frame, for a difference nobody can see against an almost-solid fill. */
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-cta:hover { border-color: var(--secondary); }

.sec {
  position: relative;
  z-index: 1;
  /* One gap between sections, carried by the next section's top. Two
     paddings meeting made the 250 px voids the critique measured (G4). */
  padding: var(--gap) 28px 0;
}

main > :last-child { padding-bottom: var(--gap-3); }

.wrap { max-width: 1120px; margin-inline: auto; }

/* Mono has two roles: eyebrows and equipment model strings. Only the eyebrow
   is cased by CSS — a model string is typed as the panel prints it. */
.eyebrow,
.meta,
.sec p.eyebrow,
.sec p.meta,
.footer-grid p.eyebrow,
.footer-brand p.meta {
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.04em;
  color: var(--secondary);
}

.eyebrow, .sec p.eyebrow, .footer-grid p.eyebrow { text-transform: uppercase; }

/* A model number is equipment vocabulary: it never breaks across lines. */
.meta, .detail { text-wrap: nowrap; }
.meta { white-space: normal; }

.eyebrow { margin: 0 0 16px; }
.meta { margin: 0; }

.sec h2 {
  max-width: 820px;
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.sec h3,
.sec h4,
.sec .card-title { text-wrap: balance; }

.sec h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.015em;
}

.sec h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 25px;
}

.sec p {
  font-size: 16px;
  line-height: 26px;
  color: var(--secondary);
}

.lede {
  max-width: 560px;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 27px;
  color: var(--secondary);
}

.sec a { color: var(--text); }
.sec a:hover { color: var(--white); }
/* Text on a cobalt fill is white. */
.sec a.demo-button { color: var(--white); }

/* Cards --------------------------------------------------------------- */

.cards {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}



.card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--panel);
}

/* Inside a card the frame bleeds to the card's own edge for the same reason. */
.faq { max-width: 760px; margin-top: 28px; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }

.faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 18px 32px 18px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  cursor: pointer;
  list-style: none;
}

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

/* The chevron belongs to the question, not to the far edge of the page. */
.faq summary::after {
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 1;
  transform: rotate(-45deg);
  transition: transform 200ms ease-out;
  content: "";
}

.faq details[open] summary::after { transform: rotate(45deg); }

/* The panel opens to its own height instead of appearing at once. */
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 280ms ease-out, content-visibility 280ms allow-discrete;
}

.faq details[open]::details-content { block-size: auto; }
.faq summary:hover { color: var(--white); }
.sec .faq p { margin: 0 0 18px; max-width: 720px; }

.card h2,
.card h3 { margin-bottom: 10px; }
.sec .card .card-title { margin: 0 0 10px; color: var(--text); font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.015em; }
.sec .card .card-title ~ .card-title { margin-top: 24px; }
/* A heading inside a card is card-scale, whatever its document level. */
.sec .card h2 { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.015em; }
.card h4 + p,
.card h3 + p { margin-top: 0; }
.card p { margin: 10px 0 0; }
.card .meta + p { margin-top: 4px; }
.card .detail { font-size: 15px; line-height: 23px; }

.sec p.statement,
.statement {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  color: var(--text);
  font-size: 16px;
  line-height: 25px;
}

a.card { display: block; text-decoration: none; }
a.card:hover { border-color: var(--secondary); }

/* Keycap field ---------------------------------------------------------
   PROTO's composition, number for number: an 8-column grid of keys tilted
   on one 3D transform, masked at every edge, with four readable cards
   floating over it. Only the colours moved onto tokens. */

.keys-copy { max-width: 560px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.text-link span { display: inline-block; }

.key-crop {
  position: relative;
  height: 350px;
  margin-top: 24px;
  overflow: clip;
  /* The crop is centred on the four labelled keys; the field runs past every
     edge of it, so the mask hands it back to the dark. */
  /* Alpha ramps, not palette colour: --ink is simply an opaque stop. */
  mask-image: linear-gradient(90deg, transparent, var(--ink) 9%, var(--ink) 68%, transparent),
              linear-gradient(transparent, var(--ink) 14%, var(--ink) 86%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 9%, var(--ink) 68%, transparent),
                      linear-gradient(transparent, var(--ink) 14%, var(--ink) 86%, transparent);
  -webkit-mask-composite: source-in;
}

.key-field {
  position: absolute;
  left: 50%;
  top: 50%;
  --key-scale: 0.5;
  --nx: 21px;
  --ny: -23px;
  display: grid;
  grid-template-columns: repeat(8, 90px);
  grid-auto-rows: 90px;
  gap: 12px;
  width: 804px;
  height: 600px;
  transform: translate(-50%, -50%) translate(var(--nx, 0px), var(--ny, 0px)) perspective(1000px) rotateX(23deg) rotateZ(-21deg) scale(var(--key-scale));
  transform-origin: center center;
}

.key {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 var(--hairline), 0 2px 3px 1px var(--ink), 0 10px 18px -6px var(--ink);
}

.key svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--secondary); }
/* 9 px labels rotated in 3D are below any legibility floor: the icon carries
   the tile, the four cards carry the words. */
.key > span { display: none; }
.key-major > span { display: block; }

.key-major {
  position: absolute;
  align-items: flex-start;
  justify-content: flex-end;
  width: 192px;
  height: 192px;
  padding: 22px;
  gap: 9px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--hairline), 0 3px 4px 1px var(--ink), 0 16px 28px -8px var(--ink);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.key-major svg { width: 30px; height: 30px; color: var(--cobalt); }
.key-major strong { color: var(--text); font-size: 22px; line-height: 28px; font-weight: 600; text-wrap: nowrap; }
.key-clarity { box-shadow: inset 0 0 0 1px var(--cobalt), inset 0 1px 0 var(--hairline), 0 3px 4px 1px var(--ink), 0 16px 28px -8px var(--ink); }

.key-context { left: 102px; top: 102px; }
.key-clarity { left: 408px; top: 0; }
.key-control { left: 408px; top: 306px; }
.key-continuity { left: 102px; top: 408px; }
.equipment span:not(.meta) { color: var(--secondary); }

/* D1: the sentence that has to be read is repeated in the page's own type —
   the screenshot supplies the atmosphere, the caption supplies the words. */
.sec p.result {
  margin: 16px 0 0;
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: var(--secondary);
}
.sec .persona-points .meta { margin-top: 20px; }
.sec .persona-points .meta:first-child { margin-top: 0; }
.sec .persona-points p:not(.meta) { margin: 4px 0 0; }

.sec .persona-quote blockquote p {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.persona-quote .text-link { margin-top: 20px; }

/* Steps and timeline --------------------------------------------------- */

.steps {
  display: grid;
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 1px solid var(--hairline);
}

.steps li {
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--hairline);
  counter-increment: step;
}

.steps li::before {
  display: block;
  float: left;
  width: 44px;
  margin-left: -44px;
  color: inherit;
  opacity: 0.6;
  content: counter(step, decimal-leading-zero);
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  line-height: 30px;
}

.steps li strong { color: var(--text); font-weight: 600; }
.steps p { margin: 6px 0 0; }

.fig figcaption .meta { display: inline; margin-right: 10px; }
.boundary-title + .cards { margin-top: 16px; }

/* Closing and footer --------------------------------------------------- */

.closing .lede { margin-top: 20px; }

.site-footer {
  position: relative;
  z-index: 1;
  padding: 40px 28px 48px;
  border-top: 1px solid var(--hairline);
}

.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.footer-brand { grid-column: 1 / -1; }

.footer-brand img { display: block; width: 143px; height: auto; }
.footer-brand p { margin: 16px 0 0; color: var(--secondary); font-size: 16px; line-height: 25px; }
.footer-brand a { color: var(--text); }
/* No uppercase transform on a line that carries “Türkiye”: the Turkish
   dotted/dotless i does not survive CSS casing. */
.footer-brand p.meta { text-transform: none; letter-spacing: 0.04em; }
.footer-brand .meta span { display: inline-block; }

.footer-grid nav { display: grid; gap: 0; align-content: start; }

.footer-grid h2 {
  margin: 0 0 4px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
}

.footer-grid a { display: inline-block; padding-block: 10px; color: var(--text); font-size: 16px; line-height: 24px; text-decoration: none; }
.footer-brand a { text-decoration: underline; text-underline-offset: 3px; }
.footer-grid a:hover { text-decoration: underline; }

/* Inner pages ---------------------------------------------------------- */

.page-title h1 { margin-bottom: 0; }
.page-title h1 {
  max-width: 820px;
  font-size: 38px;
  letter-spacing: -0.025em;
}
.page-title .lede { font-size: 18px; line-height: 28px; }

.prose > * { max-width: 720px; }
/* A legal page is read, not sold to: its headings stay at reading scale at
   every width (PR2), which needs the specificity the section rule has. */
.sec .prose h2 { margin-top: 48px; font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
.sec .prose h3 { margin-top: 32px; font-size: 18px; }
.prose p { margin: 14px 0 0; }
.prose a { color: var(--text); }

/* Request-a-demo form -------------------------------------------------- */

.sec .form-card h2 { margin: 0 0 24px; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.015em; }

.form-card {
  max-width: 620px;
  margin-top: 40px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--panel);
}

.field { display: grid; gap: 8px; margin-bottom: 20px; }

.field label { font-size: 15px; font-weight: 600; line-height: 22px; }
.field label span { color: var(--secondary); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 24px;
}

.field textarea { min-height: 112px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline-offset: 2px; }

.sec p.field-error,
.sec p.form-message,
.field-error,
.form-message {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 23px;
}

.field-error[hidden],
.form-message[hidden] { display: none; }

.form-message {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--cobalt);
  border-radius: 12px;
}

.sec p.field-error { color: var(--text); font-weight: 600; }
.field-invalid input,
.field-invalid select { border: 2px solid var(--white); }

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sec p.consent { margin-top: 16px; font-size: 14px; line-height: 22px; color: var(--secondary); }
.consent a { color: var(--text); }

.form-card .demo-button { margin-top: 8px; }
.form-card button[disabled] { opacity: 0.6; }

/* Motion ---------------------------------------------------------------
   PROTO's two moves, kept: a 240 ms scene-in when a panel swaps, and a
   short settle when a block first reaches the viewport. Transform and
   opacity only; the blanket reduced-motion rule in hero.css switches both
   off, and site.js never arms the reveal in that case. */

@keyframes scene-in {
  from { opacity: 0.45; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* The intro light reaches every heading: colour and opacity only, no move. */
.motion-ok .reveal { opacity: 0.35; color: var(--secondary); }
.motion-ok .reveal.in {
  opacity: 1;
  color: inherit;
  transition: opacity 700ms ease-out, color 700ms ease-out;
}
.motion-ok .reveal-visual { opacity: 0; }
.motion-ok .reveal-visual.in { opacity: 1; transition: opacity 400ms ease-out; }

.demo-button,
.nav-cta,
.site-nav a,
.footer-grid a,
a.card,
.text-link { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }



/* Wide ----------------------------------------------------------------- */

@media (min-width: 768px) {
  .sec, .site-footer { padding-inline: max(40px, calc((100vw - 1120px) / 2)); }
  .site-footer { padding-block: 64px 72px; }
  .menu summary { display: none; }
  .menu::details-content { content-visibility: visible; }
  .menu > .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 32px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .menu > .site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--secondary); font-size: 16px; }
  .menu > .site-nav a:hover { background: none; color: var(--white); }
  .sec h2 { font-size: 40px; }
  .sec p { font-size: 17px; line-height: 27px; }
  .lede { margin-top: 16px; font-size: 18px; line-height: 29px; }
  .cards { gap: 20px; margin-top: 40px; }

  .persona-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin-top: 36px; }
  .sec .persona-quote blockquote p { font-size: 28px; line-height: 38px; }
  .persona { min-height: 116px; padding: 20px; font-size: 16px; }
  .persona svg { width: 30px; height: 30px; }
  .card { padding: 28px; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .page-fan {
    width: 240px;
    aspect-ratio: auto;
    margin-inline: auto;
    overflow: visible;
    border-radius: 0;
    perspective: 1000px;
  }
  .page-fan .fan-page {
    position: relative;
    inset: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 16px 26px -10px var(--ink);
    transform: rotateZ(-4deg) translateX(-4%);
  }
  .scrolly-frame { width: 300px; margin-inline: 0; border-radius: 28px; aspect-ratio: 9 / 19.5; }
  .quote { padding: 32px; }
  .quote blockquote p { font-size: 22px; line-height: 33px; }
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .steps li { padding-left: 56px; }
  .steps li::before { width: 56px; margin-left: -56px; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
  .footer-brand { grid-column: auto; }
  .page-title h1 { font-size: 60px; }
}

@media (min-width: 768px) {
  .key-crop { height: 470px; margin-top: 32px; }
  .key-field { --key-scale: 0.64; --nx: 27px; --ny: -30px; }
  .key-major strong { font-size: 22px; line-height: 29px; }
}

/* Copy left, field right: the field keeps its own width and bleeds out of the
   column, which is the composition it was built for. */
@media (min-width: 1024px) {
  .keys .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: center;
  }
  .keys .key-crop { grid-column: 2; grid-row: 1; height: 440px; margin-top: 0; }
  .keys .guarantees,
  .keys .fineprint { grid-column: 1 / -1; }
  .key-field { --key-scale: 0.6; --nx: 25px; --ny: -28px; }
  .key { border-radius: 18px; }
  .key-major strong { font-size: 24px; line-height: 31px; }
}

@media (min-width: 1200px) {
  .keys .key-crop { height: 480px; }
  .key-field { --key-scale: 0.65; --nx: 27px; --ny: -31px; }
}

@media (min-width: 1024px) {
  .cards.three { grid-template-columns: repeat(3, minmax(280px, 1fr)); }
}

@media (min-width: 1200px) {
  .sec h2 { font-size: 52px; }
  .lede { font-size: 20px; line-height: 31px; }
}

/* Two columns only where a card heading still fits on one line. */
@media (min-width: 1280px) {
  .cards.two,
  .cards.four { grid-template-columns: repeat(2, minmax(360px, 1fr)); }
}

/* Equipment ticker ------------------------------------------------------ */

.ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 18px 0;
  border-block: 1px solid var(--hairline);
  mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 8%, var(--ink) 92%, transparent);
}

.ticker-track { display: flex; width: max-content; animation: ticker 44s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-list {
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0 20px 0 0;
  list-style: none;
}

.ticker-list li {
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.04em;
  color: var(--secondary);
  white-space: nowrap;
}

@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.scrolly-shot.is-active { opacity: 1; }
.sec .plan-object .note { margin-top: 28px; }

.key { transform: translate3d(0, calc(var(--drift, 0px) * var(--depth, 0.3)), 0); }
.key:nth-child(4n) { --depth: 1; }
.key:nth-child(4n+1) { --depth: 0.62; }
.key:nth-child(4n+2) { --depth: 0.34; }
.key-major { transform: none; }

/* ======================================================================
   Deck rebuild (2026-09-16): two objects and one sequence component.
   Object A — the fragment lift: a region of a real capture, no phone frame,
   masked with the app's own radius. Object B — the full phone (ai.html only).
   Nothing here is drawn; every visual is a crop of a recording.
   ====================================================================== */

/* Beat rhythm: eyebrow 12, headline 16, subline, visual 24/32/40. */
.beat .eyebrow { margin-bottom: 12px; }
.beat h2 + .lede { margin-top: 16px; }
.beat-copy { max-width: 560px; }
.beat-visual { margin-top: 24px; }
.sec p.beat-note {
  max-width: 560px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--secondary);
}

.fineprint {
  max-width: 720px;
  margin: 24px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--secondary);
  opacity: 0.75;
}

.sec p.fineprint { font-size: 13px; line-height: 20px; }

/* On the phone the visual takes the full column plus the gutter it can
   afford: 358 px keeps the app's own body text above 12 CSS px. */
@media (max-width: 767px) {
  .beat-visual, .seq-stage { margin-inline: -16px; }
  .band .text-link { margin-inline: 0; }
}

@media (min-width: 768px) { .beat-visual { margin-top: 32px; } }

@media (min-width: 1024px) {
  .beat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
  .beat-grid .beat-visual { margin-top: 0; }
  .beat-grid.visual-first .beat-copy { order: 2; }
}

/* Object A — the fragment lift ----------------------------------------
   --sw/--sh   source pixel size of the capture
   --x/--y     crop origin in source pixels (already inset 2 px)
   --cw/--ch   crop size in source pixels (already inset 4 px)
   --u         CSS px per source px at 1x app scale (390 / source width)
   --lr        the app's own radius for the outermost element in the crop  */
.lift {
  position: relative;
  width: 100%;
  max-width: calc(var(--cw) * var(--u) * var(--scale, 1.25));
  margin: 0;
  aspect-ratio: var(--cw) / var(--ch);
  overflow: clip;
  border-radius: var(--lr, 12px);
  background: var(--ink);
}

.lift > img,
.lift > video,
.orb > img,
.orb > video {
  position: absolute;
  display: block;
  width: calc(var(--sw) / var(--cw) * 100%);
  height: auto;
  left: calc(var(--x) / var(--cw) * -100%);
  top: calc(var(--y) / var(--ch) * -100%);
}

/* A lift taller than its slot is cut by the bottom edge, never the top.
   Alpha ramp, not palette colour: --ink is simply an opaque stop. */
.lift.is-cut {
  mask-image: linear-gradient(to bottom, var(--ink) calc(100% - var(--fade, 32px)), transparent);
  -webkit-mask-image: linear-gradient(to bottom, var(--ink) calc(100% - var(--fade, 32px)), transparent);
}

.lift.is-cut-top {
  mask-image: linear-gradient(to bottom, transparent, var(--ink) var(--fade, 32px), var(--ink) calc(100% - var(--fade, 32px)), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink) var(--fade, 32px), var(--ink) calc(100% - var(--fade, 32px)), transparent);
}

.sec p.lift-caption {
  max-width: 560px;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 24px;
  color: var(--secondary);
}

/* Object B — the full phone (0.47 frame) ------------------------------ */
.phone {
  width: 100%;
  max-width: 358px;
  margin: 0;
  aspect-ratio: 1206 / 2622;
  max-height: 480px;
  overflow: clip;
  border: 1px solid var(--hairline);
  border-radius: 44px;
  background: var(--ink);
}

.phone > img,
.phone > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The app header goes with the status bar: no mixed clocks, no “4” badge.
     Both edges measured into the capture's own ink-free bands: the window
     opens at source y 290 (between the chapter row and the set chip) and
     closes at 1366 (between the training note and the composer). */
  object-position: 50% -145px;
}



@media (min-width: 1024px) {
  /* 538, not 560: the extra 22 px put the window's bottom edge through the
     composer bar instead of the gap above it. */
  .phone { max-width: 360px; max-height: 538px; }
}

/* The title column is centred against its phone: neither a 400 px void under
   the CTA nor a title floating above the frame (C #18). */
.page-title .beat-grid { align-items: center; }

/* A model string is equipment vocabulary: it is never cased by CSS. */
.set-line { text-transform: none; }

/* The step sequence ---------------------------------------------------- */
.seq-body { display: grid; gap: 24px; margin-top: 24px; }

.seq-stage {
  position: relative;
  display: grid;
  order: 1;
  height: var(--stage-h, auto);
  overflow: clip;
}

.seq-stage.is-live { transition: height 320ms ease-out; }

/* One width for all four shots: a framed stage whose device edge jumped
   sideways on every step would read as four objects, not one screen. */
.seq-stage > .frag {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  max-width: 492px;
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.seq-stage > .frag.is-active { opacity: 1; }

.seq-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seq-steps li { position: relative; }

.seq-steps button {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--secondary);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  text-align: left;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 240ms ease-out, color 240ms ease-out;
}

.seq-steps .seq-n {
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.seq-steps li.is-active button { color: var(--text); opacity: 1; }

.seq-line {
  display: none;
  max-width: 420px;
  margin: 2px 0 0 36px;
  font-size: 15px;
  line-height: 24px;
  color: var(--secondary);
  opacity: 0.4;
  transition: opacity 240ms ease-out;
}

.seq-steps li.is-active .seq-line { opacity: 1; }

/* auto mode: a hairline under the active label runs the 2.4 s */
.seq-bar {
  display: block;
  height: 1px;
  background: var(--hairline);
  opacity: 0;
}

.seq-bar i {
  display: block;
  height: 100%;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left center;
}

.seq-steps li.is-active .seq-bar { opacity: 1; }

/* Below the two-column layout the list is not a list: one label is on screen
   at a time and it changes with its fragment, so the whole beat - heading,
   step, hairline, capture - is one phone screen. Under reduced motion the
   flag is absent, all four labels stand as plain text and step 1 is shown. */
@media (max-width: 1023px) {
  .motion-ok .seq-steps li:not(.is-active) { display: none; }
  .motion-ok .sec .seq-steps li.is-active .seq-line { display: block; }
  .seq-body { gap: 16px; margin-top: 16px; }
  .seq-steps button { font-size: 19px; line-height: 27px; }
}
.seq-steps li.is-active.is-running .seq-bar i { animation: seq-run 2400ms linear forwards; }

@keyframes seq-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (min-width: 1024px) {
  .seq-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    margin-top: 32px;
  }
  .seq-stage { position: sticky; top: 96px; order: 0; align-self: start; }
  .seq-steps {
    position: relative;
    gap: 0;
    padding-left: 28px;
    border-left: 1px solid var(--hairline);
  }
  .seq-steps::before {
    position: absolute;
    left: -1px;
    top: 0;
    width: 1px;
    height: var(--fill, 0%);
    background: var(--cobalt);
    transition: height 320ms ease-out;
    content: "";
  }
  .seq-steps li { display: block; min-height: 28vh; }
  .seq-steps button { font-size: 22px; line-height: 32px; }
  .sec .seq-line { display: block; }
  .seq-bar { display: none; }
}

/* The report as a document -------------------------------------------- */
.report-object { position: relative; padding-bottom: 20px; }

.report-page {
  --lr: 12px;
  /* The phone cuts the page after "What was observed"; the wide side runs on
     to the first check lines. Same capture, two windows. */
  /* The window ends in the app's own gap, and the fade is short enough to
     stay inside that gap at every width: 9 CSS px is 34-38 source px, and the
     band below "...on the return path." is 38 px tall. A longer fade reached
     back over the paragraph and put the visible end mid-line. */
  --ch: 765;
  --fade: 9px;
  width: 100%;
  max-width: 520px;
  background: var(--white);
  /* A white page on ink needs the edge stated, or it reads as a rectangle
     stamped on the section. */
  box-shadow: 0 2px 6px -2px var(--ink), 0 26px 52px -20px var(--ink);
}

/* A mask would take the shadow with it (it clips everything outside the
   border box): the bottom cut is painted over the page instead. */
.report-page.is-cut {
  mask-image: none;
  -webkit-mask-image: none;
}

.report-page.is-cut::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--fade);
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
  content: "";
}

/* The cut lands between two paragraphs, never across a line: the window ends
   at source 909, in the 869-911 gap above "Checks: 3 of 5", and the 16 px
   fade is 39 source px at this scale - the gap itself. */
@media (min-width: 768px) { .report-page { --ch: 907; --fade: 16px; } }

/* The lifted fragment overlaps the page's lower right at every width: its
   left edge inside the page's right half, its top inside the page, so there
   is never a band of ink between the two. On a phone only the count itself
   fits at a size worth reading — the five lines need the wide window. */
.report-lines {
  --lr: 12px;
  --sw: 1271;
  --sh: 1800;
  --u: 0.58px;
  --x: 66;
  --y: 898;
  --cw: 190;
  --ch: 44;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 52%;
  width: auto;
  max-width: none;
  margin: 0;
  background: var(--white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent),
              0 2px 6px -2px var(--ink), 0 16px 32px -12px var(--ink);
}

/* Between the phone and the two-column layout the count must not grow with
   the column: it is one short line, and 280 px is as large as it reads. */
@media (min-width: 640px) { .report-lines { max-width: 280px; } }

/* The page left, the beat's words right, the lifted lines sweeping the bottom
   of both: no empty right half above the fragment (C #13). */
@media (min-width: 1024px) {
  .report-beat .wrap {
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    column-gap: 64px;
  }
  .report-beat .beat-copy { grid-column: 2; grid-row: 1; align-self: start; padding-top: 8px; }
  .report-beat .report-object { grid-column: 1; grid-row: 1; }
  .report-beat .lift-caption { grid-column: 1; grid-row: 2; }
  /* The column is 520 px wide here, so the five lines fit beside the page. */
  .report-object { padding-bottom: 96px; }
  .report-beat .report-lines {
    --x: 62;
    --y: 890;
    --cw: 1136;
    --ch: 313;
    left: 58%;
    right: auto;
    width: 122%;
    max-width: none;
  }
}

/* One-line band (beat 6b) ---------------------------------------------- */
.band { text-align: center; }
.band .eyebrow { margin-bottom: 12px; }
.band h2 { margin-inline: auto; }
.band .lede { max-width: 640px; margin-inline: auto; }
.band .text-link { margin-top: 12px; }

/* The four guarantees -------------------------------------------------- */
.guarantees {
  display: grid;
  gap: 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.guarantees strong {
  display: block;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.015em;
}

.sec .guarantees p { margin: 6px 0 0; max-width: 460px; }

@media (min-width: 768px) {
  .guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
}


/* ai.html — the outcome first, the boundary list, the report's middle ----- */
.sec p.outcome {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.015em;
}

.stop-list {
  display: grid;
  gap: 0;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.stop-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 17px;
  line-height: 26px;
}

@media (min-width: 768px) {
  .stop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .stop-list li:nth-child(-n+2) { border-top: 0; }
}

/* The middle of the page: both cuts are real, so both fade - but over the
   gaps between paragraphs, and as paint, not as a mask that would take the
   shadow with it. */
.report-mid {
  max-width: 560px;
  background: var(--white);
  box-shadow: 0 2px 6px -2px var(--ink), 0 26px 52px -20px var(--ink);
}

.report-mid.is-cut-top,
.report-mid.is-cut {
  mask-image: none;
  -webkit-mask-image: none;
}

.report-mid::before,
.report-mid::after {
  position: absolute;
  right: 0;
  left: 0;
  height: var(--fade, 16px);
  pointer-events: none;
  content: "";
}

.report-mid::before { bottom: 0; background: linear-gradient(to bottom, transparent, var(--ink)); }
.report-mid::after { top: 0; background: linear-gradient(to top, transparent, var(--ink)); }

/* A phone cut by the section: no bottom rail, the screen runs on under it.
   The clip moves under a fixed cut, so the fade is long enough that whatever
   is under it reads as “continues”, never as half-legible text (C #19). */
.phone {
  border-bottom: 0;
  border-radius: 44px 44px 0 0;
  mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 88px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 88px), transparent);
}

/* company.html — the one decorated block, and the contact row ------------ */
/* The brand stage (company) -------------------------------------------
   The entry is the horizontal lockup — symbol and wordmark, the kit's own
   file, never squashed and never animated. Under the slogan sits the orb:
   the app's own orb, recoloured to copper, with its play control on it. */
.brand-stage { padding-top: 56px; }

.lockup {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  filter: drop-shadow(0 2px 3px var(--ink))
          drop-shadow(0 12px 18px var(--ink))
          drop-shadow(0 28px 38px var(--ink));
}

.sec h1.slogan {
  max-width: 520px;
  margin: 28px 0 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The orb under the words, on the text column's own left edge. Its control
   rides the lower-right quadrant, overlapping by about half its width. */
.voice-orb {
  position: relative;
  width: 80px;
  margin-top: 28px;
}

.voice-orb .orb { width: 100%; }

.pill.pill-round {
  position: absolute;
  left: calc(82% - 22px);
  top: calc(82% - 22px);
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  gap: 0;
  z-index: 2; /* above the live video (z 1) while the orb plays */
}

.pill-round svg { width: 20px; height: 20px; fill: currentColor; }
.pill-round .g-play { transform: translateX(1px); } /* optical centre of a triangle */
.pill-round .g-pause { display: none; }
.pill-round[data-state="playing"] .g-play { display: none; }
.pill-round[data-state="playing"] .g-pause { display: block; }

@media (min-width: 768px) {
  .lockup { max-width: 340px; }
  .sec h1.slogan { font-size: 38px; line-height: 46px; }
}

@media (min-width: 1024px) {
  .brand-stage { padding-top: 72px; }
  .lockup { max-width: 400px; }
  .sec h1.slogan { font-size: 46px; line-height: 54px; }
  .voice-orb { width: 96px; }
}

/* A name for the page that the eye does not need and a reader does. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.link-row { display: flex; flex-wrap: wrap; gap: 32px; margin: 8px 0 0; }
.sec .link-row .text-link { margin-top: 0; }
.closing .statement { max-width: 560px; }

/* request-demo — the form keeps its column, the right one says what follows */
.demo-grid { display: grid; gap: 32px; margin-top: 32px; }
.demo-grid .form-card { margin-top: 0; }
.demo-next h2 { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.015em; }
.demo-next .steps { margin-top: 16px; border-top: 0; }
.demo-next .steps li { padding: 12px 0 12px 32px; border-bottom: 0; }
.demo-next .steps li::before { width: 32px; margin-left: -32px; }
.sec .demo-next .steps li { font-size: 16px; line-height: 25px; color: var(--secondary); }
.field label .optional { font-size: 13px; font-weight: 400; color: var(--secondary); }

/* An error is not the colour of the primary action. */
.sec p.field-error, .field-error { color: var(--white); font-weight: 600; }
.field-invalid label { color: var(--secondary); }
.field-invalid input, .field-invalid select, .field-invalid textarea { border: 2px solid var(--white); }
.form-message { border-color: var(--hairline); background: var(--panel); }

@media (min-width: 1024px) {
  .demo-grid { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 64px; align-items: start; }
}
.clip.is-missing { display: none; }
.mail-link { display: inline-flex; align-items: center; min-height: 44px; }

/* company — the "who" and the "where" share one row with the weave (C #25) */
.beat-copy h3 { margin-top: 40px; font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.015em; }
.sec .beat-copy h3 + .lede { margin-top: 12px; }

/* ======================================================================
   A fragment is a cut from the running app, and must say so (2026-09-16).
   Root cause it answers: the app's screen ground is the page's ink and its
   bubble grey is the page's card grey, so a lifted bubble read as page copy.
   One component: the screen's own label above it, a device edge around it —
   hairline, the app's 28 px radius, a 1 px top highlight, an elevation
   shadow. The keycap field and the service report are not fragments: one is
   decoration, the other is a document and is white on ink already.
   ====================================================================== */
.frag {
  width: 100%;
  /* + 32: the frame is the capture plus its 16 px inner margin, so the
     capture itself still lands at the app scale the crop asks for. */
  max-width: calc(var(--cw) * var(--u) * var(--scale, 1.25) + 32px);
  margin: 0;
}

.frag .scr-label {
  margin: 0 0 10px 2px;
  font-family: "Spline Sans Mono", monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.04em;
  color: var(--secondary);
}

/* The device edge. The capture is not flush against the hairline: 16 px of
   the frame's own ground stands between them, and the capture keeps the
   concentric radius (28 - 16 = 12) inside it. */
.frag > .frame {
  position: relative;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--ink);
  box-shadow: 0 2px 4px -1px var(--ink), 0 22px 44px -18px var(--ink);
}

/* The top highlight rides above the capture: an inset shadow on the frame
   itself would be painted under its own child. */
.frag > .frame::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--hairline);
  pointer-events: none;
  content: "";
}

.frag .lift {
  width: 100%;
  max-width: none;
  border-radius: 12px;
}

/* Inside a frame the bottom cut is the screen continuing, not the fragment
   dissolving into the page: a gradient over the capture, so the device edge
   stays whole. */
.frag .lift.is-cut {
  mask-image: none;
  -webkit-mask-image: none;
}

.frag .lift.is-cut::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--fade, 32px);
  background: linear-gradient(to bottom, transparent, var(--ink));
  pointer-events: none;
  content: "";
}

/* The label belongs to the copy column, not to the 12 px bleed the visual
   takes on a phone. */
@media (max-width: 767px) {
  .beat-visual .scr-label,
  .seq-stage .scr-label { margin-left: 14px; }
}

/* Beat 1 is the first fragment the reader meets: 1.5x app scale, and the
   column cut to it instead of the other way round. */
@media (min-width: 1200px) {
  #fault .beat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 552px); }
}

/* The assistant's own voice ---------------------------------------------
   The orb is the app's orb, cut round out of the voice capture; the pill is
   the only way the sound ever starts. Wired by file name: a fresh capture
   under the same name needs the four crop numbers checked, nothing else. */
.voice-play {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 20px;
  margin-top: 24px;
}

.orb {
  position: relative;
  display: block;
  width: 104px;
  aspect-ratio: 1;
  overflow: clip;
  border-radius: 50%;
  background: var(--ink);
  /* --amp is the loudness of the moment, written once a frame by site.js while
     the voice plays and dropped the moment it stops. The disc never changes
     size: the voice changes the picture's intensity and nothing else — no
     glow of ours (the orb carries the app's own light in the recording), no
     shadow, no outline, no layout. While it plays the value arrives every
     frame, so the transition stands aside; when it is dropped the transition
     comes back and the light settles in 400 ms. */
  filter: brightness(calc(1 + 0.18 * var(--amp, 0)));
  transition: filter 400ms ease-out;
}

.orb.is-speaking { transition: none; }

/* Beat 3 on the AI page is the orb itself: the voice capture has the dock
   buttons and the follow-up rows behind the arc, and the orb only covers what
   is under its own disc — so the honest crop is the disc. */
.orb.orb-lg { width: 200px; margin-inline: auto; }

@media (min-width: 768px) { .orb.orb-lg { width: 240px; } }

.pill {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--cobalt);
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

/* The orb is the real orb: the same disc, cut out of the call recording and
   looping for as long as it is on screen. Measured clean across the whole
   clip, so the still underneath is only the poster — what stands before the
   first frame arrives, and what a reader who asked for less motion keeps. */
.orb > video.orb-live {
  z-index: 1;
  opacity: 0;
  transition: opacity 240ms ease-out;
}

/* One fade, when the loop starts: fast enough that the still is not seen
   handing over, slow enough that it is not a cut. */
.orb.is-live > video.orb-live { opacity: 1; transition-duration: 120ms; }

.pill:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.pill[disabled] { opacity: 0.6; cursor: default; }

.pill-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0.6;
}

/* Transform and opacity only; the blanket reduced-motion rule stops it. */
/* One slow breath, the same clock as the orb beside it: nothing in this
   group beats faster than once per 2.4 s. */
.pill[data-state="playing"] .pill-dot { animation: pill-pulse 2400ms ease-in-out infinite; }

@keyframes pill-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.5); opacity: 1; }
}

@media (min-width: 768px) {
  .orb { width: 120px; }
}