/* Cybernet CRM marketing v2. Theme + chaptered editorial layout. Engine tokens overridden here; engine untouched. */
@font-face { font-family: "Archivo"; src: url("assets/fonts/Archivo.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

:root {
  /* MEASURED from the product's own dark theme at dc56f84 (custom.css, brand.css). One hue: blue. */
  --sc-canvas: #0A0D0E;  --sc-surface: #141A1D;
  --sc-ink: #EDF6F7;     --sc-ink-soft: #B7C6C9;
  --sc-accent: #129CE2;  --sc-accent-ink: #0A0D0E;
  --sc-accent-light: #7ED3F7;           /* rain glyphs, small text on canvas: 11.65:1 */
  --ink-subtle: #8C9B9E;                /* 6.78:1 on canvas */
  --line: #2C363A; --line-soft: #202A2E;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sc-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
html { background: var(--sc-canvas); color: var(--sc-ink); }
body { margin: 0; font-family: var(--sc-font-text); font-weight: 400; line-height: 1.65; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: var(--sc-accent-light); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:focus-visible, .cta:focus-visible { outline: 2px solid var(--sc-accent-light); outline-offset: 3px; }
img { max-width: 100%; display: block; }
.skip { position: absolute; left: -999px; top: 0; background: var(--sc-accent); color: var(--sc-accent-ink); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

/* FOLIO: editorial nav, a margin column, no bar. Chapter number, title, and the running Book a call line (king ruling). */
.folio { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 40; display: grid; gap: .35rem; padding: .6rem .8rem .6rem 0; background: linear-gradient(90deg, rgba(10,13,14,.92) 70%, rgba(10,13,14,0)); border-radius: 6px; font-size: .78rem; letter-spacing: .06em; color: var(--ink-subtle); text-transform: uppercase; pointer-events: none; }
.folio > * { pointer-events: auto; }
.folio__num { font-family: var(--sc-font-display); font-size: 1.6rem; color: var(--sc-ink); letter-spacing: -0.02em; line-height: 1; }
.folio__title { color: var(--sc-ink-soft); }
.folio__cta { color: var(--sc-accent-light); text-decoration: none; margin-top: .35rem; }
.folio__cta:hover { text-decoration: underline; }
@media (max-width: 700px) { .title__lockup img { width: min(320px, 82vw); } } /* 390: wordmark never touches an edge */
/* 390: the folio is a slim OPAQUE bar across the bottom edge, one row, so it reads as chrome and never sits on copy or a product frame as a box would (Logan 2:37 PM ET fit pass). The page reserves the bar height at its end. */
@media (max-width: 700px) {
  .folio { left: 0; right: 0; bottom: 0; padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom)); border-radius: 0; background: #0A0D0E; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: .6rem; font-size: .68rem; }
  .folio__num { font-size: 1rem; }
  .folio__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .folio__cta { margin-top: 0; }
  body { padding-bottom: 3.25rem; }
}

/* TITLE PAGE: the rain is the paper. Type on it; a scrim only under the type, never full-frame. */
.title { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at center, #0A0D1E 0%, #05060E 60%, #000 100%); /* login.html .cyb-stage ground, verbatim; title page only */ }
.title .rain { position: absolute; inset: 0; z-index: 0; }
.title__type { position: relative; z-index: 1; padding: clamp(2rem, 6vw, 6rem) clamp(2rem, 6vw, 6rem) clamp(7.5rem, 14vh, 9.5rem); max-width: 60rem; }
.title__type::before { content: ""; position: absolute; inset: -1rem -3rem -1rem -1rem; z-index: -1; background: radial-gradient(110% 100% at 10% 80%, rgba(10,13,14,.96) 0%, rgba(10,13,14,.88) 40%, rgba(10,13,14,.5) 70%, rgba(10,13,14,0) 100%); }
.title h1 { font-size: clamp(2.6rem, 7.2vw, 6rem); }
.title__sub { margin-top: 1.25rem; font-size: clamp(1rem, 1.35vw, 1.2rem); color: var(--sc-ink-soft); max-width: 44ch; }
.title__lockup { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.title__lockup { position: relative; width: max-content; } /* scrim box removed: the neon wordmark floats over the rain as on the login page */
.title__lockup img { width: min(400px, 82vw); height: auto; display: block; }

/* CHAPTERS: each lands on its own hard-cut ground, asymmetric spread, media in its own column with a caption. */
.chapter { position: relative; padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem); border-top: 1px solid var(--line-soft); min-height: 90vh; display: grid; align-content: center; }
.chapter--peak { min-height: 100vh; }
@media (min-width: 861px) { .chapter--peak .chapter__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; } }
.chapter--surface { background: var(--sc-surface); }
.chapter__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; max-width: 84rem; margin: 0 auto; }
.chapter--flip .chapter__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.chapter--flip .chapter__copy { order: 2; }
.chapter__num { font-family: var(--sc-font-text); font-size: .78rem; letter-spacing: .12em; color: var(--sc-accent-light); text-transform: uppercase; margin-bottom: 1rem; }
.chapter h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); margin-bottom: 1.1rem; }
.claim { font-size: clamp(1.05rem, 1.35vw, 1.25rem); color: var(--sc-ink); max-width: 46ch; }
.claim + .claim { margin-top: .9rem; color: var(--sc-ink-soft); }
.chapter__media { position: relative; }
.shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--sc-canvas); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8), 0 2px 0 rgba(255,255,255,.03) inset; }
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; }
.shot--empty { aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--ink-subtle); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.caption { margin-top: .7rem; font-size: .8rem; color: var(--ink-subtle); }
.media-2 { display: grid; gap: 1rem; }
.media-3 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .media-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* minmax(0) so a composition min-content cannot push past the edge */
.media-3 .shot img { aspect-ratio: 780 / 1688; object-fit: contain; object-position: top; width: 100%; height: auto; }
@media (max-width: 860px) { .chapter__grid, .chapter--flip .chapter__grid { grid-template-columns: 1fr; } .chapter--flip .chapter__copy { order: 0; } .claim { max-width: none; } }

/* LOGO WALL: typographic case by design; marks replace type in the same grid if entitled ones arrive. */
.wall { padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 5vw, 5rem); border-top: 1px solid var(--line-soft); }
.wall__inner { max-width: 84rem; margin: 0 auto; }
.wall p { color: var(--sc-ink-soft); max-width: 52ch; margin-bottom: 2rem; }
.wall__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (min-width: 760px) { .wall__grid { grid-template-columns: repeat(4, 1fr); } }
.wall__cell { background: var(--sc-canvas); padding: 2rem 1.25rem; display: grid; place-items: center; min-height: 6.5rem; font-family: var(--sc-font-display); font-weight: 500; color: var(--sc-ink-soft); letter-spacing: .01em; text-align: center; }
.wall__cell img { max-height: 2.2rem; width: auto; }

/* COLOPHON: the page arrives somewhere and stops. Small type, the CTA as a line of running text. */
.colophon { padding: clamp(4rem, 10vw, 8rem) clamp(1.25rem, 5vw, 5rem) 9rem; border-top: 1px solid var(--line); background: var(--sc-surface); }
.colophon__inner { max-width: 84rem; margin: 0 auto; display: grid; gap: 2.5rem; }
.colophon__line { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.2rem); max-width: 34ch; }
.colophon__line a { color: var(--sc-ink); text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; }
.colophon__line a:hover { color: var(--sc-accent-light); }
.foot { display: flex; padding-left: 8.5rem; flex-wrap: wrap; gap: 1rem 2rem; font-size: .78rem; color: var(--ink-subtle); border-top: 1px solid var(--line-soft); padding-top: 1.5rem; }
.foot a { color: var(--ink-subtle); }
.foot img { height: 1.1rem; width: auto; opacity: .9; }

/* Reduced motion: the engine handles its devices; the rain draws one static frame (rain.js). */
@media (prefers-reduced-motion: reduce) { .title { min-height: 88vh; } }

@media (max-width: 700px) { .colophon { padding-bottom: 8rem; } .foot { padding-left: 0; padding-bottom: 5.5rem; } }

@media (max-width: 700px) { .title__type::before { inset: -1rem -1rem -1rem -1rem; background: radial-gradient(140% 100% at 20% 80%, rgba(10,13,14,.96) 0%, rgba(10,13,14,.9) 55%, rgba(10,13,14,.55) 80%, rgba(10,13,14,0) 100%); } }

figure { margin: 0; }

/* portrait frames on phones: the picture swaps to a 780x1688 capture, so the box follows the image */
@media (max-width: 700px) { .shot img { aspect-ratio: auto; object-fit: contain; object-position: top; } }

/* the folio's margin is reserved on desktop: nothing renders under it (caption and wall-cell collisions seen in frames) */
@media (min-width: 861px) { .chapter, .wall, .colophon { padding-left: 10rem; } .title__type { padding-left: 10rem; } .foot { padding-left: 0; } }

@media (min-width: 861px) { .folio { max-width: 8.5rem; } /* 20px + 136px = 156px, inside the 160px content gutter: the folio box never touches content */ .folio__title { white-space: normal; line-height: 1.3; } }

/* ---- Compositions (chapter media built from product elements, version-agnostic; Logan 2:40 PM ET) ---- */
.comp { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(7.5rem, auto); gap: .7rem; padding: clamp(.8rem, 1.6vw, 1.25rem); border-radius: 14px; border: 1px solid rgba(0,168,248,.22); background: radial-gradient(120% 90% at 80% 0%, #0B1226 0%, #060812 55%, #04050C 100%); box-shadow: 0 30px 80px -40px rgba(0,168,248,.35), 0 2px 0 rgba(255,255,255,.03) inset; overflow: hidden; }
.comp::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(126,211,247,.10) 1px, transparent 1.2px); background-size: 22px 22px; pointer-events: none; }
.comp__defs { position: absolute; width: 0; height: 0; }
.card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem; border-radius: 10px; background: rgba(10,13,14,.72); border: 1px solid rgba(126,211,247,.14); min-width: 0; }
.card--goal { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 1rem; align-items: center; border-color: rgba(0,168,248,.4); box-shadow: 0 0 0 1px rgba(0,168,248,.08), 0 0 40px -12px rgba(0,168,248,.45); }
.card--goal .card__k { grid-column: 1 / -1; }
.card--goal .card__ring { grid-row: 2 / 4; }
.card--ratio { grid-column: span 2; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .9rem; align-items: center; }
.card--ratio .card__k { grid-column: 1 / -1; }
.card--ratio .card__ring { grid-row: 2; }
.card__k { font-family: var(--sc-font-text); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-accent-light); }
.card__v { font-family: var(--sc-font-display); font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; color: var(--sc-ink); line-height: 1.1; }
.card__v span { font-size: .6em; color: var(--sc-ink-soft); letter-spacing: 0; }
.card__s { font-size: .72rem; color: var(--ink-subtle); }
.card__ring { position: relative; width: clamp(6.5rem, 11vw, 9rem); aspect-ratio: 1; }
.card__ring--sm { width: clamp(4.5rem, 7vw, 6rem); }
.card__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring__track { fill: none; stroke: rgba(126,211,247,.14); stroke-width: 9; }
.ring__arc { fill: none; stroke: url(#comp-grad); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(0,168,248,.65)); }
.ring__arc--pink { stroke: url(#comp-grad-v); filter: drop-shadow(0 0 6px rgba(248,24,144,.6)); }
.ring__v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--sc-font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--sc-ink); letter-spacing: -0.02em; }
.ring__v span { font-size: .55em; color: var(--sc-ink-soft); margin-left: .1em; }
.ring__v--sm { font-size: clamp(1rem, 1.6vw, 1.3rem); }
.card__spark, .card__bars { width: 100%; height: 3rem; margin-top: auto; overflow: visible; }
.card__bars { max-width: 11rem; } /* bars keep their proportion when the card is wide */
.spark__line { fill: none; stroke: #00A8F8; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(0,168,248,.7)); }
.spark__fill { fill: url(#comp-fill); }
.card__bars rect { fill: url(#comp-grad-v); rx: 2; filter: drop-shadow(0 0 5px rgba(248,24,144,.45)); }
.card__dots { display: flex; gap: .45rem; margin-top: auto; }
.card__dots i { width: .8rem; height: .8rem; border-radius: 50%; background: #00A8F8; box-shadow: 0 0 8px rgba(0,168,248,.8); }
.card__dots i.is-off { background: rgba(126,211,247,.14); box-shadow: none; }
@media (min-width: 701px) { .comp > .card:nth-last-child(-n+2) { grid-column: span 2; } } /* row three fills the four columns */
@media (max-width: 700px) { .comp { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; } .card--goal { grid-column: span 2; grid-row: auto; } .card--ratio { grid-column: span 2; } }

/* ---- Compositions, chapters 2 to 5 ---- */
.comp--inbox { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-auto-rows: auto; }
.inbox__list, .inbox__thread { display: flex; flex-direction: column; gap: .5rem; position: relative; z-index: 1; min-width: 0; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 8px; background: rgba(10,13,14,.72); border: 1px solid rgba(126,211,247,.12); }
.row.is-active { border-color: rgba(0,168,248,.55); box-shadow: 0 0 22px -8px rgba(0,168,248,.6); }
.row b, .contact__card b, .timeline b, .node b, .deal b, .stage header b { display: block; font-family: var(--sc-font-display); font-size: .86rem; color: var(--sc-ink); letter-spacing: -0.01em; }
.row small, .contact__card small, .timeline small, .node small, .deal small, .bubble small, .node span { display: block; font-size: .66rem; color: var(--ink-subtle); }
.avatar { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-style: normal; font-family: var(--sc-font-display); font-size: .8rem; color: #04050C; background: linear-gradient(135deg, #00A8F8, #7ED3F7); box-shadow: 0 0 10px rgba(0,168,248,.6); }
.avatar--pink { background: linear-gradient(135deg, #F81890, #FF7AC1); box-shadow: 0 0 10px rgba(248,24,144,.55); }
.avatar--lg { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; margin-bottom: .4rem; }
.tag { font-style: normal; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .45rem; border-radius: 999px; border: 1px solid rgba(248,24,144,.6); color: #FF7AC1; }
.tag--sms { border-color: rgba(0,168,248,.6); color: var(--sc-accent-light); }
.bubble { max-width: 88%; padding: .6rem .75rem; border-radius: 12px; font-size: .8rem; line-height: 1.35; color: var(--sc-ink); background: rgba(10,13,14,.8); border: 1px solid rgba(126,211,247,.14); }
.bubble--in { align-self: flex-start; border-bottom-left-radius: 3px; border-color: rgba(0,168,248,.45); }
.bubble--out { align-self: flex-end; border-bottom-right-radius: 3px; border-color: rgba(248,24,144,.5); box-shadow: 0 0 22px -10px rgba(248,24,144,.7); }
.bubble small { margin-bottom: .2rem; }
.comp--contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-auto-rows: auto; }
.contact__card { position: relative; z-index: 1; padding: .9rem; border-radius: 10px; background: rgba(10,13,14,.72); border: 1px solid rgba(0,168,248,.35); min-width: 0; }
.contact__card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .7rem; margin: .7rem 0 0; font-size: .7rem; }
.contact__card dt { color: var(--ink-subtle); text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; align-self: center; }
.contact__card dd { margin: 0; color: var(--sc-ink); }
.timeline { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 0 0 1.1rem; display: flex; flex-direction: column; gap: .55rem; border-left: 1px solid rgba(126,211,247,.2); }
.timeline li { position: relative; }
.timeline li i { position: absolute; left: -1.1rem; top: .35rem; width: .55rem; height: .55rem; margin-left: -.3rem; border-radius: 50%; background: #00A8F8; box-shadow: 0 0 8px rgba(0,168,248,.8); }
.timeline li:first-child i { background: #F81890; box-shadow: 0 0 8px rgba(248,24,144,.8); }
.comp--pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; align-items: start; }
.stage { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .5rem; padding: .6rem; border-radius: 10px; background: rgba(10,13,14,.55); border: 1px solid rgba(126,211,247,.12); min-width: 0; min-height: 11rem; }
.stage header { display: flex; flex-direction: column; gap: .1rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(126,211,247,.14); }
.stage header span { font-family: var(--sc-font-display); font-size: 1.05rem; color: var(--sc-accent-light); letter-spacing: -0.01em; }
.stage--hot { border-color: rgba(248,24,144,.5); box-shadow: 0 0 30px -12px rgba(248,24,144,.6); }
.deal { padding: .55rem .6rem; border-radius: 8px; background: rgba(10,13,14,.85); border: 1px solid rgba(126,211,247,.14); }
.deal--hot { border-color: rgba(248,24,144,.6); }
.comp--chain { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 1.25rem; }
.node { position: relative; z-index: 1; width: min(100%, 17rem); padding: .6rem .8rem; border-radius: 10px; background: rgba(10,13,14,.85); border: 1px solid rgba(0,168,248,.4); text-align: left; }
.node--trigger { border-color: rgba(248,24,144,.65); box-shadow: 0 0 26px -10px rgba(248,24,144,.8); }
.node--branch { border-color: rgba(126,211,247,.5); }
.node--sm { width: 100%; }
.node span { color: var(--sc-accent-light); }
.link { width: 2px; height: 1.1rem; background: linear-gradient(#00A8F8, #F81890); box-shadow: 0 0 8px rgba(0,168,248,.6); }
.fork { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; width: min(100%, 22rem); margin-top: 1.1rem; }
.fork::before { content: ""; position: absolute; left: 25%; right: 25%; top: -1.1rem; height: 1.1rem; border: 2px solid rgba(0,168,248,.6); border-bottom: 0; border-radius: 10px 10px 0 0; }
.lane { display: flex; flex-direction: column; gap: .3rem; align-items: center; }
.lane em { font-style: normal; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-accent-light); }
.lane:last-child em { color: #FF7AC1; }
.media-3 .comp { display: flex; flex-direction: column; gap: .8rem; min-height: 21rem; min-width: 0; }
.media-3 .comp header, .media-3 .comp footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .68rem; color: var(--ink-subtle); }
.media-3 .comp header b { font-family: var(--sc-font-display); font-size: .95rem; color: var(--sc-ink); }
.week { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; flex: 1; }
.week span { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); text-align: center; }
.week i { display: grid; place-items: center; min-height: 2.2rem; border-radius: 6px; background: rgba(10,13,14,.6); border: 1px solid rgba(126,211,247,.08); }
.week i.is-open { border-color: rgba(0,168,248,.45); background: rgba(0,168,248,.08); }
.week i.is-booked { border-color: rgba(248,24,144,.7); background: rgba(248,24,144,.16); box-shadow: 0 0 16px -4px rgba(248,24,144,.7); }
.week i b { font-family: var(--sc-font-display); font-size: .62rem; color: #FF7AC1; }
.page { position: relative; z-index: 1; flex: 1; padding: .9rem; border-radius: 8px; background: rgba(10,13,14,.85); border: 1px solid rgba(126,211,247,.16); display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .6rem; align-content: start; }
.page > b { grid-column: 1 / -1; font-family: var(--sc-font-display); color: var(--sc-ink); font-size: .9rem; margin-bottom: .2rem; }
.page > i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(126,211,247,.16); }
.page > i.short { width: 62%; }
.field { display: flex; justify-content: space-between; align-items: center; margin-top: .3rem; padding: .45rem .5rem; border-radius: 6px; border: 1px dashed rgba(0,168,248,.6); background: rgba(0,168,248,.06); }
.field--sig { border-color: rgba(248,24,144,.7); background: rgba(248,24,144,.08); }
.field small { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-accent-light); }
.field--sig small { color: #FF7AC1; }
.field em { font-style: normal; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; font-size: .6rem; font-family: var(--sc-font-display); color: #04050C; background: linear-gradient(135deg, #00A8F8, #F81890); }
.bars { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; align-items: end; padding: .4rem 0; }
.bars div { display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; justify-content: flex-end; }
.bars i { width: 70%; border-radius: 4px 4px 2px 2px; background: linear-gradient(#00A8F8, #F81890); box-shadow: 0 0 14px -4px rgba(0,168,248,.8); }
.bars .h60 { height: 60%; } .bars .h80 { height: 80%; } .bars .h45 { height: 45%; } .bars .h95 { height: 95%; }
.bars small { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); text-align: center; }
@media (max-width: 700px) {
  .comp--inbox, .comp--contact { grid-template-columns: 1fr; }
  .comp--pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { min-height: 0; }
  .media-3 .comp { min-height: 17rem; }
}

/* chapter 5: three compositions need the wider media column; narrow parts stack */
@media (min-width: 861px) { .chapter--wide .chapter__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.media-3 .comp header { flex-direction: column; align-items: flex-start; gap: .15rem; }
.media-3 .comp footer { flex-wrap: wrap; }
.page { grid-template-columns: 1fr; }
.page > i.short { width: 62%; }
.bars small { font-size: .5rem; letter-spacing: .02em; white-space: nowrap; }
.week span { font-size: .55rem; letter-spacing: .04em; }

/* ---- Motion: chapter 1 (MOTION-PLAN.md). Armed by motion.js before first paint; is-in on enter; the un-armed markup is the resting state. ---- */
:root { --ease-out: cubic-bezier(0.33, 1, 0.68, 1); }
.spark__line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.comp.is-armed:not(.is-in) .ring__arc { stroke-dasharray: 0 100; }
.comp.is-armed:not(.is-in) .spark__line { stroke-dashoffset: 1; }
.comp.is-armed:not(.is-in) .spark__fill { opacity: 0; }
.comp.is-armed:not(.is-in) .card__bars rect { transform: scaleY(0); }
.comp.is-armed:not(.is-in) .card__dots i, .comp.is-armed:not(.is-in) .card__v, .comp.is-armed:not(.is-in) .card__s { opacity: 0; }
.card__bars rect { transform-origin: 50% 100%; transform-box: fill-box; }
.comp.is-in .ring__arc { animation: ring-draw 900ms var(--ease-out) both; }
.comp.is-in .ring__arc--pink { animation-delay: 150ms; }
.comp.is-in .spark__line { animation: spark-draw 600ms var(--ease-out) 200ms both; }
.comp.is-in .spark__fill { animation: fade-in 500ms ease 500ms both; }
.comp.is-in .card__bars rect { animation: bar-rise 500ms var(--ease-out) both; }
.comp.is-in .card__bars rect:nth-child(2) { animation-delay: 70ms; } .comp.is-in .card__bars rect:nth-child(3) { animation-delay: 140ms; } .comp.is-in .card__bars rect:nth-child(4) { animation-delay: 210ms; } .comp.is-in .card__bars rect:nth-child(5) { animation-delay: 280ms; }
.comp.is-in .card__dots i { animation: pop-in 350ms var(--ease-out) both; }
.comp.is-in .card__dots i:nth-child(2) { animation-delay: 80ms; } .comp.is-in .card__dots i:nth-child(3) { animation-delay: 160ms; } .comp.is-in .card__dots i:nth-child(4) { animation-delay: 240ms; } .comp.is-in .card__dots i:nth-child(5) { animation-delay: 320ms; }
.comp.is-in .card__v, .comp.is-in .card__s { animation: fade-in 450ms var(--ease-out) 250ms both; }
@keyframes ring-draw { from { stroke-dasharray: 0 100; } }
@keyframes spark-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .comp * { animation: none !important; } .comp.is-armed:not(.is-in) * { opacity: 1; transform: none; stroke-dashoffset: 0; } }

/* ---- Conversion (Logan 3:33 PM ET via king hmwum): the one button on the page, the folio link, the closing section ---- */
.cta { display: inline-block; margin-top: 1.6rem; padding: .85rem 1.4rem; border-radius: 8px; font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; color: #04050C; background: #00A8F8; text-decoration: none; box-shadow: 0 0 0 1px rgba(0,168,248,.4), 0 0 32px -6px rgba(0,168,248,.75); transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.cta:hover { background: #7ED3F7; box-shadow: 0 0 0 1px rgba(126,211,247,.6), 0 0 40px -4px rgba(0,168,248,.9); transform: translateY(-1px); }
.cta--lg { padding: 1rem 1.7rem; font-size: 1.1rem; margin-top: 1.2rem; }
.title__type .cta { position: relative; z-index: 2; }
.folio__cta { text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.folio__cta::after { content: " \2192"; }
.convert { padding: clamp(4rem, 10vw, 8rem) clamp(1.25rem, 5vw, 5rem); border-top: 1px solid var(--line-soft); background: radial-gradient(90% 80% at 30% 100%, rgba(0,168,248,.10) 0%, rgba(4,5,12,0) 60%), var(--sc-canvas); }
.convert__inner { max-width: 84rem; margin: 0 auto; }
.convert h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 16ch; }
.convert p { margin-top: 1rem; max-width: 40ch; color: var(--sc-ink-soft); font-size: 1.05rem; }
.convert__slot { margin-top: 2rem; min-height: 0; }
.convert__slot:not([hidden]) { min-height: 32rem; border: 1px solid var(--line-soft); border-radius: 12px; }
@media (min-width: 861px) { .convert { padding-left: 10rem; } }
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }

/* ---- Motion: chapters 2 to 5 (MOTION-PLAN.md). Same rule: armed by motion.js, is-in once, un-armed markup is the rest. ---- */
/* 2 inbox: one inbound text arrives (third bubble), the Lead row lifts into the top slot */
.comp--inbox.is-armed:not(.is-in) .bubble:nth-child(3) { opacity: 0; transform: translateY(14px); }
.comp--inbox.is-armed:not(.is-in) .row.is-active { transform: translateY(12px); box-shadow: none; border-color: rgba(126,211,247,.12); }
.comp--inbox.is-in .bubble:nth-child(3) { animation: rise-in 450ms var(--ease-out) 350ms both; }
.comp--inbox.is-in .row.is-active { animation: row-lift 500ms var(--ease-out) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes row-lift { from { transform: translateY(12px); box-shadow: none; border-color: rgba(126,211,247,.12); } to { transform: none; box-shadow: 0 0 22px -8px rgba(0,168,248,.6); border-color: rgba(0,168,248,.55); } }
/* 2 record: the newest timeline entry lights pink and rises */
.comp--contact.is-armed:not(.is-in) .timeline li:first-child { opacity: 0; transform: translateY(8px); }
.comp--contact.is-armed:not(.is-in) .timeline li:first-child i { transform: scale(.3); }
.comp--contact.is-in .timeline li:first-child { animation: rise-in 400ms var(--ease-out) 200ms both; }
.comp--contact.is-in .timeline li:first-child i { animation: pop-in 300ms var(--ease-out) 350ms both; }
/* 3 pipeline: the hot card travels one stage to the right and settles; values re-count in motion.js */
.stage--hot { overflow: visible; }
.comp--pipeline.is-armed:not(.is-in) .deal--hot { transform: translateX(calc(-100% - 1.4rem)); }
.comp--pipeline.is-in .deal--hot { animation: card-move 950ms var(--ease-out) both; }
@keyframes card-move { 0% { transform: translateX(calc(-100% - 1.4rem)); box-shadow: none; } 20% { transform: translateX(calc(-100% - 1.4rem)) translateY(-6px) rotate(-2deg) scale(1.03); box-shadow: 0 16px 30px -10px rgba(0,0,0,.8), 0 0 24px -8px rgba(248,24,144,.7); } 80% { transform: translateX(0) translateY(-6px) rotate(1deg) scale(1.03); box-shadow: 0 16px 30px -10px rgba(0,0,0,.8), 0 0 24px -8px rgba(248,24,144,.7); } 100% { transform: none; box-shadow: none; } }
/* 4 chain: lights in order, trigger pulse, then link fill and node border per step, branch last */
.comp--chain.is-armed:not(.is-in) .node { border-color: rgba(126,211,247,.14); box-shadow: none; }
.comp--chain.is-armed:not(.is-in) .link { transform: scaleY(0); }
.comp--chain.is-armed:not(.is-in) .fork::before { opacity: 0; }
.comp--chain.is-armed:not(.is-in) .lane em { opacity: 0; }
.link { transform-origin: 50% 0; }
.comp--chain.is-in .node--trigger { animation: node-pink 250ms var(--ease-out) both, pulse 600ms ease-out 1; }
.comp--chain.is-in .link:nth-of-type(2) { animation: link-fill 180ms linear 250ms both; }
.comp--chain.is-in .node:nth-of-type(3) { animation: node-cyan 150ms var(--ease-out) 430ms both; }
.comp--chain.is-in .link:nth-of-type(4) { animation: link-fill 180ms linear 580ms both; }
.comp--chain.is-in .node:nth-of-type(5) { animation: node-cyan 150ms var(--ease-out) 760ms both; }
.comp--chain.is-in .link:nth-of-type(6) { animation: link-fill 180ms linear 910ms both; }
.comp--chain.is-in .node--branch { animation: node-cyan 150ms var(--ease-out) 1090ms both; }
.comp--chain.is-in .fork::before { animation: fade-in 200ms linear 1240ms both; }
.comp--chain.is-in .lane em { animation: fade-in 200ms linear 1300ms both; }
.comp--chain.is-in .node--sm { animation: node-cyan 150ms var(--ease-out) 1440ms both; }
@keyframes node-cyan { from { border-color: rgba(126,211,247,.14); } to { border-color: rgba(0,168,248,.4); } }
@keyframes node-pink { from { border-color: rgba(126,211,247,.14); box-shadow: none; } to { border-color: rgba(248,24,144,.65); box-shadow: 0 0 26px -10px rgba(248,24,144,.8); } }
@keyframes link-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(248,24,144,.55); } 100% { box-shadow: 0 0 0 14px rgba(248,24,144,0); } }
/* 5 calendar: one slot fills */
.comp--calendar.is-armed:not(.is-in) .week i.is-booked { border-color: rgba(0,168,248,.45); background: rgba(0,168,248,.08); box-shadow: none; }
.comp--calendar.is-armed:not(.is-in) .week i.is-booked b { opacity: 0; transform: scale(.5); }
.comp--calendar.is-in .week i.is-booked { animation: slot-fill 400ms var(--ease-out) 200ms both; }
.comp--calendar.is-in .week i.is-booked b { animation: pop-in 300ms var(--ease-out) 400ms both; }
@keyframes slot-fill { from { border-color: rgba(0,168,248,.45); background: rgba(0,168,248,.08); box-shadow: none; } to { border-color: rgba(248,24,144,.7); background: rgba(248,24,144,.16); box-shadow: 0 0 16px -4px rgba(248,24,144,.7); } }
/* 5 document: the two signature fields get signed in order */
.field--sig { position: relative; }
.field__ink { position: absolute; left: .4rem; right: 1.9rem; bottom: -.15rem; height: .9rem; overflow: hidden; z-index: 0; opacity: .9; }
.field--sig small, .field--sig em { position: relative; z-index: 1; }
.field__ink path { fill: none; stroke: #FF7AC1; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(248,24,144,.7)); }
.comp--doc.is-armed:not(.is-in) .field__ink path { stroke-dashoffset: 1; }
.comp--doc.is-in .field__ink path { animation: spark-draw 500ms var(--ease-out) 200ms both; }
.comp--doc.is-in .field--sig2 .field__ink path { animation-delay: 750ms; }
/* 5 report: bars grow from the baseline */
.bars i { transform-origin: 50% 100%; }
.comp--report.is-armed:not(.is-in) .bars i { transform: scaleY(0); }
.comp--report.is-in .bars i { animation: bar-rise 600ms var(--ease-out) both; }
.comp--report.is-in .bars div:nth-child(2) i { animation-delay: 80ms; } .comp--report.is-in .bars div:nth-child(3) i { animation-delay: 160ms; } .comp--report.is-in .bars div:nth-child(4) i { animation-delay: 240ms; }
@media (max-width: 700px) {
  /* two-column board: the card drops in from above its stage instead of travelling from a column that is not beside it */
  .comp--pipeline.is-armed:not(.is-in) .deal--hot { transform: translateY(-120%); opacity: 0; }
  .comp--pipeline.is-in .deal--hot { animation: card-drop 700ms var(--ease-out) both; }
}
@keyframes card-drop { 0% { transform: translateY(-120%); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(-4px) rotate(1deg) scale(1.03); box-shadow: 0 16px 30px -10px rgba(0,0,0,.8), 0 0 24px -8px rgba(248,24,144,.7); } 100% { transform: none; opacity: 1; box-shadow: none; } }

/* ---- Liquid glass panels (Logan 4:30 PM ET 09-18 via king m67fe). Only the composition panels and the ground directly behind
   them; never the copy column, never the title. CSS only: a tinted colour field behind each media column, and the composition
   as a frosted translucent material over it with a specular top edge and a refracted edge in the chapter tint. No image, no
   script, no added motion; reduced motion unaffected; reduced transparency falls back to a solid panel. ---- */
[data-chapter="01"], [data-chapter="03"], [data-chapter="05"] { --tint: 0, 168, 248; --tint2: 248, 24, 144; }
[data-chapter="02"], [data-chapter="04"] { --tint: 248, 24, 144; --tint2: 0, 168, 248; }
.chapter__media { position: relative; isolation: isolate; }
.chapter__media::before { content: ""; position: absolute; inset: 2% 3%; z-index: -1; border-radius: 40%; pointer-events: none;
  background: radial-gradient(60% 55% at 18% 12%, rgba(var(--tint), .55) 0%, rgba(var(--tint), 0) 70%), radial-gradient(55% 50% at 84% 88%, rgba(var(--tint2), .46) 0%, rgba(var(--tint2), 0) 70%), radial-gradient(40% 40% at 60% 45%, rgba(var(--tint), .22) 0%, rgba(var(--tint), 0) 70%);
  filter: blur(44px); }
.comp { background: linear-gradient(160deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.028) 42%, rgba(255,255,255,.012) 100%), linear-gradient(180deg, rgba(6,8,18,.50), rgba(4,5,12,.64));
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(var(--tint), .22), inset 1px 0 0 rgba(255,255,255,.06), 0 30px 80px -40px rgba(var(--tint), .45), 0 2px 0 rgba(255,255,255,.03) inset; }
.comp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 14%, rgba(255,255,255,0) 30%), linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.045) 50%, rgba(255,255,255,0) 62%); }
.comp > * { position: relative; z-index: 1; }
.comp__defs { z-index: 0; }
@media (prefers-reduced-transparency: reduce) { .comp { -webkit-backdrop-filter: none; backdrop-filter: none; background: #070912; } .chapter__media::before { display: none; } }
/* vibrancy on glass: small text that sits directly on the translucent panel (not inside a card) takes the brighter soft ink */
.comp .timeline small, .comp .bars small, .comp .week span, .media-3 .comp header span, .media-3 .comp footer span { color: var(--sc-ink-soft); }