/* ============================================================
   COINIS TOWN HALL 2026 — slide layouts
   ============================================================ */

/* shared building blocks ------------------------------------ */

.stack   { display: flex; flex-direction: column; }
.grow    { flex: 1; }
.center  { justify-content: center; }
.mt-a    { margin-top: auto; }

.k {
  font-size: 13px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--spark);
}
.t-light .k { color: var(--orange); }
.k.mute { color: var(--on-dark-faint); }

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(249,174,59,.42);
  background: rgba(249,174,59,.10);
  font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--spark);
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.logo svg { display: block; width: auto; }

/* ============================================================
   1 — TITLE
   ============================================================ */
.s-title .pad { justify-content: center; }
.s-title .brandmark svg { height: 62px; }
/* --- headline: masked line reveal -------------------------- */
.s-title h1 { font-size: 126px; margin-top: 56px; max-width: 1400px; }
.s-title .ln { display: block; overflow: hidden; padding-bottom: .085em; margin-bottom: -.085em; }
.s-title .ln > span {
  display: block;
  transform: translateY(112%) rotate(3deg);
  transform-origin: 0 0;
  transition: transform 1180ms var(--ease) var(--d, 0ms);
}
.s-title.is-in .ln > span { transform: none; }

/* the gold line carries a slow sweep of light */
.s-title .ln.l2 > span {
  color: var(--spark);
  background-image: linear-gradient(96deg,
    var(--spark) 0%, var(--gold) 18%, #FFE2A8 40%, #FFFFFF 48%,
    #FFE2A8 56%, var(--spark) 74%, var(--gold) 100%);
  background-size: 260% 100%;
  background-position: 150% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 40px rgba(249,174,59,.28));
}
.s-title.is-in .ln.l2 > span { animation: goldSweep 7.5s var(--ease-soft) 1.6s infinite; }
@keyframes goldSweep {
  0%       { background-position: 150% 0; }
  42%, 100%{ background-position: -55% 0; }
}

/* --- rule, tagline, footer -------------------------------- */
.s-title .draw {
  height: 3px; width: 420px; margin-top: 58px; border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--gold) 52%, var(--spark));
  box-shadow: 0 0 22px rgba(249,174,59,.35);
  transform-origin: left center;
}
.s-title .tagline {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-top: 46px; font-size: 36px; font-weight: 500; letter-spacing: -.012em;
  color: var(--on-dark-soft);
}
.s-title .tagline span:nth-child(2) { color: rgba(255,255,255,.86); }
.s-title .tagline span:nth-child(3) { color: var(--spark); }

.s-title .foot {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  margin-top: 78px; padding-top: 40px; border-top: 1px solid var(--navy-line);
  max-width: 1480px;
}
.s-title .products { display: flex; align-items: center; gap: 44px; }
.s-title .products svg { height: 38px; }
.s-title .products .sep { width: 1px; height: 42px; background: var(--navy-line); }
.s-title .meta {
  display: flex; align-items: center; gap: 18px;
  font-size: 21px; font-weight: 600; letter-spacing: .02em; color: var(--on-dark-soft);
}
.s-title .meta .d { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ============================================================
   1 — TITLE · atmosphere (sits between .sfx and .pad)
   ============================================================ */
.titlefx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }

/* a warm bloom that opens up behind the headline as it lands */
.titlefx .bloom {
  position: absolute; left: -6%; top: 18%; width: 1180px; height: 900px;
  background: radial-gradient(circle at 50% 50%, rgba(249,174,59,.20) 0%, rgba(194,69,45,.10) 42%, rgba(0,0,0,0) 68%);
  filter: blur(20px);
  transform: scale(.55); opacity: 0;
  transition: transform 2200ms var(--ease) 200ms, opacity 1600ms var(--ease-soft) 200ms;
}
.s-title.is-in .titlefx .bloom { transform: scale(1); opacity: 1; }

/* one light shaft sweeps across on entry, then it is gone */
.titlefx .beam {
  position: absolute; top: -30%; left: 0; width: 30%; height: 160%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(249,174,59,.10) 42%,
    rgba(255,255,255,.10) 52%, rgba(255,255,255,0) 100%);
  filter: blur(26px);
  transform: translateX(-120%) rotate(13deg);
  opacity: 0;
}
.s-title.is-in .titlefx .beam { animation: beamSweep 2800ms var(--ease-soft) 420ms 1 both; }
@keyframes beamSweep {
  0%        { transform: translateX(-120%) rotate(13deg); opacity: 0; }
  18%, 62%  { opacity: 1; }
  100%      { transform: translateX(400%) rotate(13deg); opacity: 0; }
}

/* --- the orbit: what comes next, on the empty right side --- */
.titlefx .orbit {
  position: absolute; right: 5%; top: 50%;
  width: 860px; height: 860px; margin: -430px -180px 0 0;
  opacity: 0; transform: scale(.86);
  transition: opacity 1800ms var(--ease-soft) 620ms, transform 2400ms var(--ease) 620ms;
}
.s-title.is-in .titlefx .orbit { opacity: .95; transform: scale(1); }

.titlefx .ring {
  position: absolute; inset: 0; margin: auto; border-radius: 50%;
  border: 1px solid rgba(249,174,59,.16);
}
.titlefx .r1 { width: 860px; height: 860px; border-style: dashed; border-color: rgba(255,255,255,.10); }
.titlefx .r2 { width: 600px; height: 600px; border-color: rgba(212,118,58,.26); }
.titlefx .r3 { width: 356px; height: 356px; border-color: rgba(249,174,59,.34); }
.s-title.is-in .titlefx .r1 { animation: spin 150s linear infinite; }
.s-title.is-in .titlefx .r2 { animation: spin 96s linear infinite reverse; }
.s-title.is-in .titlefx .r3 { animation: spin 44s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the spark riding the inner ring */
.titlefx .node {
  position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 0 6px rgba(249,174,59,.16), 0 0 34px 8px rgba(249,174,59,.55);
}
.titlefx .core {
  position: absolute; inset: 0; margin: auto; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,174,59,.16) 0%, rgba(194,69,45,.06) 46%, rgba(0,0,0,0) 70%);
  filter: blur(12px);
}
.s-title.is-in .titlefx .core { animation: corePulse 8s var(--ease-soft) infinite; }
@keyframes corePulse {
  0%, 100% { transform: scale(1);    opacity: .75; }
  50%      { transform: scale(1.16); opacity: 1; }
}

/* --- slow drifting embers -------------------------------- */
.titlefx .dust i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--spark); opacity: 0;
  box-shadow: 0 0 14px 2px rgba(249,174,59,.45);
}
.s-title.is-in .titlefx .dust i { animation: ember var(--t) ease-in-out var(--dl) infinite; }
@keyframes ember {
  0%       { transform: translateY(14px); opacity: 0; }
  22%      { opacity: .8; }
  60%      { opacity: .35; }
  100%     { transform: translateY(-88px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .s-title .ln > span { transform: none; }
  .s-title.is-in .titlefx .r1,
  .s-title.is-in .titlefx .r2,
  .s-title.is-in .titlefx .r3,
  .s-title.is-in .titlefx .core,
  .s-title.is-in .titlefx .beam,
  .s-title.is-in .titlefx .dust i,
  .s-title.is-in .ln.l2 > span { animation: none; }
  .s-title .titlefx .beam { opacity: 0; }
}

/* ============================================================
   2 — FRAME ("what this is / is not")
   ============================================================ */
.s-frame .pad { justify-content: center; }
.s-frame h2 { max-width: 1100px; margin: 26px 0 62px; }
.s-frame .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.s-frame .col { padding: 36px 40px 40px; border-radius: 20px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.035); }
.s-frame .col.no { border-color: rgba(194,69,45,.34); background: rgba(194,69,45,.07); }
.s-frame .col h4 { font-size: 15px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--spark); margin-bottom: 26px; }
.s-frame .col.no h4 { color: #F08A72; }
.s-frame .col li { list-style: none; font-size: 27px; line-height: 1.42; color: rgba(255,255,255,.9); padding: 13px 0 13px 32px; position: relative; }
.s-frame .col li::before { content: ""; position: absolute; left: 0; top: 24px; width: 14px; height: 2px; background: var(--spark); }
.s-frame .col.no li::before { background: #F08A72; }
.s-frame .kicker { margin-top: 52px; font-size: 30px; font-weight: 500; color: rgba(255,255,255,.68); font-style: italic; max-width: 1240px; }

/* ============================================================
   3 — CHAPTER (light)
   ============================================================ */
.s-chapter .pad { justify-content: center; }
.s-chapter .num {
  font-size: 500px; font-weight: 800; line-height: .74; letter-spacing: -.07em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(33,41,74,.17);
  position: absolute; right: -78px; top: 50%; margin-top: -192px;   /* no transform: the reveal system owns it */
  pointer-events: none; user-select: none;
}
.s-chapter .idx { font-size: 17px; font-weight: 700; letter-spacing: .3em; color: var(--orange); }
.s-chapter h2 { font-size: 132px; margin: 32px 0 38px; max-width: 1240px; letter-spacing: -.045em; }
.s-chapter .bar { width: 220px; height: 5px; background: linear-gradient(90deg, var(--orange), var(--gold)); border-radius: 3px; }
.s-chapter .lead { margin-top: 38px; max-width: 900px; font-size: 32px; }
/* a hairline that anchors the composition across the slide */
.s-chapter .pad::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--cream-line); opacity: .55; z-index: -1;
}

/* ============================================================
   4 — TWO BLOCKS (affiliate / search)
   ============================================================ */
.s-two .head { margin-bottom: 62px; }
.s-two h2 { margin-top: 26px; }
.s-two .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.s-two .b { position: relative; padding: 42px 42px 46px; border-radius: 20px; background: rgba(255,255,255,.045); border: 1px solid var(--navy-line); }
.s-two .b .name { font-size: 40px; font-weight: 700; letter-spacing: -.02em; margin: 20px 0 20px; }
.s-two .b .txt { font-size: 27px; line-height: 1.44; color: rgba(255,255,255,.78); }
.s-two .b .meter { display: flex; gap: 7px; margin-bottom: 4px; }
.s-two .b .meter i { display: block; width: 40px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.13); transition: background 500ms var(--ease) calc(var(--d, 0ms) + var(--i, 0ms)); }
.slide.is-in .s-two .b.down .meter i:nth-child(-n+2),
.slide.is-in .b.down .meter i:nth-child(-n+2) { background: var(--bad); }
.slide.is-in .b.steady .meter i:nth-child(-n+5) { background: var(--good); }
.slide.is-in .b.other .meter i:nth-child(-n+3) { background: var(--other); }
.s-two .foot { margin-top: 54px; display: flex; align-items: center; gap: 22px; padding: 30px 38px; border-radius: 18px; border: 1px solid rgba(249,174,59,.3); background: rgba(249,174,59,.08); }
.s-two .foot .txt { font-size: 30px; font-weight: 600; color: #fff; }

/* ============================================================
   5 — THREE BUSINESSES
   ============================================================ */
.s-biz .head { margin-bottom: 54px; }
.s-biz h2 { margin-top: 24px; }
.s-biz .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
.s-biz .b { padding: 38px 34px 40px; border-radius: 20px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.04); display: flex; flex-direction: column; min-height: 386px; }
.s-biz .b .logo { height: 42px; display: flex; align-items: center; margin-bottom: 30px; }
.s-biz .b .logo svg { height: 32px; }
.s-biz .b .logo.tall svg { height: 40px; }
.s-biz .b .role { font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: 16px; }
.s-biz .b .txt { font-size: 25px; line-height: 1.46; color: rgba(255,255,255,.82); }
.s-biz .b.core { border-color: rgba(249,174,59,.32); background: rgba(249,174,59,.07); }
.s-biz .b .tagfoot { margin-top: auto; padding-top: 24px; font-size: 17px; font-weight: 600; letter-spacing: .04em; color: var(--spark); }
.s-biz .flowline { display: flex; align-items: center; gap: 18px; margin: 34px 0 0; }
.s-biz .flowline .l { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(249,174,59,.5), rgba(249,174,59,.05)); }
.s-biz .flowline .t { font-size: 17px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--spark); }
.s-biz .amb { margin-top: 44px; font-size: 30px; font-weight: 600; color: #fff; }
.s-biz .amb span { color: var(--spark); }

/* ============================================================
   DIAGRAM SYSTEM — the product slides (07–14)
   A diagram is a centred row of .node blocks joined by .wire SVGs.
   Each wire draws its trace in on its own beat, drops an arrowhead
   when the trace lands, then keeps a short dash travelling along
   the path so the direction of flow stays readable for as long as
   the slide is up. The beat timing lives in theme.css with the rest
   of the reveal system; only geometry is here.
   ============================================================ */
.dg { display: flex; align-items: center; justify-content: center; }

.dg .node {
  flex: none; border-radius: 20px; padding: 30px 32px; text-align: center;
  border: 1.5px solid var(--wire);
  background: rgba(255,255,255,.05);
}
.dg .node .t { font-size: 34px; font-weight: 700; line-height: 1.14; letter-spacing: -.02em; }
.dg .node .s { font-size: 21px; line-height: 1.36; color: rgba(255,255,255,.72); margin-top: 12px; }

.dg .node.hub {
  background: linear-gradient(150deg, var(--hub-1), var(--hub-2));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.dg .node.hub .t { font-size: 46px; }
.dg .node.hub .s { color: rgba(255,255,255,.88); }

.dg .node.out {
  background: linear-gradient(150deg, var(--spark), #E09523);
  border-color: rgba(255,255,255,.3); color: #1A1408;
}
.dg .node.out .s { color: rgba(26,20,8,.76); }

.wire { flex: none; overflow: visible; }
.wire .trace {
  stroke: var(--wire); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 640ms var(--ease-soft) var(--d, 0ms);
}
.wire .head { fill: var(--wire); opacity: 0; transition: opacity 340ms ease var(--d, 0ms); }
.wire .flow {
  stroke: var(--spark); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: .06 .94; stroke-dashoffset: 1;
  opacity: 0; transition: opacity 420ms ease var(--d, 0ms);
}

/* ============================================================
   6 — PRODUCT PLATE (what the product is)
   ============================================================ */
.s-plate .pad { justify-content: center; }
.s-plate .logo svg { height: 68px; }
.s-plate .logo.key svg { height: 56px; }
.s-plate .status { display: flex; margin-top: 34px; }
.s-plate .eyebrow { margin-top: 54px; }
.s-plate .status + .eyebrow { margin-top: 40px; }
.s-plate h2 { font-size: 88px; margin-top: 26px; letter-spacing: -.035em; }
.s-plate .bar { width: 200px; height: 4px; margin: 46px 0; border-radius: 3px; background: linear-gradient(90deg, var(--wire), rgba(255,255,255,0)); }
.s-plate .stmt { font-size: 60px; font-weight: 700; line-height: 1.16; letter-spacing: -.03em; max-width: 1440px; }
.s-plate .stmt span { color: var(--spark); }
.s-plate .sub { margin-top: 52px; font-size: 31px; color: var(--on-dark-soft); }

/* ============================================================
   7 — MODEL MAP (a diagram under a heading)
   ============================================================ */
.s-map .pad { justify-content: center; }
.s-map h2 { margin: 22px 0 18px; }
.s-map .lead { margin-bottom: 72px; }

/* 08 — two families of models feeding one workspace */
.s-map .dg .col { flex: none; width: 380px; display: flex; flex-direction: column; gap: 56px; }
.s-map .dg .col .node { height: 132px; display: grid; place-items: center; }
.s-map .dg > .node.hub { width: 440px; }
.s-map .dg > .node.out { width: 380px; }

/* 12 — one connection, carrying traffic both ways */
.s-map.two-way .lead { margin-bottom: 64px; }
.s-map.two-way .dg > .node { width: 410px; min-height: 178px; display: flex; flex-direction: column; justify-content: center; }
.s-map.two-way .dg > .node.hub { width: 440px; }
.s-map.two-way .managed { margin-top: 74px; }
.s-map.two-way .managed .k { display: block; margin-bottom: 26px; }
.s-map.two-way .mlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.s-map.two-way .mlist .m { padding-top: 22px; border-top: 2px solid rgba(255,255,255,.15); font-size: 29px; font-weight: 600; }

/* 13 — billing, three equal steps */
.s-map.bill .lead { margin-bottom: 64px; }
.s-map.bill .dg > .node { flex: 1; min-height: 206px; display: flex; flex-direction: column; justify-content: center; }
.s-map.bill .fig { font-size: 66px; line-height: 1; color: var(--spark); }
/* the fee figure and the one-line captions share a row height, so the three
   step titles sit on one baseline even though the first node carries a number */
.s-map.bill .dg > .node .s,
.s-map.bill .dg > .node .fig { min-height: 66px; margin-top: 16px; display: flex; align-items: center; justify-content: center; }
.s-map.bill .foot { margin-top: 70px; padding: 28px 38px; border-radius: 18px; border: 1px solid rgba(249,174,59,.32); background: rgba(249,174,59,.08); font-size: 31px; font-weight: 600; }
.s-map.bill .foot span { color: var(--spark); }

/* ============================================================
   8 — SERVICE FLOW (steps inside our AI service)
   The output group mirrors the service box's internal spacing so
   both rows sit on the same line, and its negative margin lets the
   last wire start at Assemble and cross the boundary.
   ============================================================ */
.s-flow .pad { justify-content: center; }
.s-flow h2 { margin: 22px 0 18px; }
.s-flow .lead { margin-bottom: 72px; }
.s-flow .dg { align-items: flex-start; }
.s-flow .svc { flex: none; padding: 40px 56px 44px; border: 1.5px solid var(--wire); border-radius: 26px; }
.s-flow .outgrp { flex: none; margin-left: -56px; padding: 40px 0 44px; border-top: 1.5px solid transparent; }
.s-flow .svc-k, .s-flow .ghost { display: block; height: 18px; margin-bottom: 26px; }
.s-flow .svc-k { font-size: 15px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--spark); }
.s-flow .row { display: flex; align-items: center; }
.s-flow .dg .node { width: 286px; min-height: 138px; display: flex; flex-direction: column; justify-content: center; }
.s-flow .dg .node .s { font-size: 20px; }
.s-flow .dg .node.out { width: 340px; }
.s-flow .note { margin-top: 72px; font-size: 26px; color: var(--on-dark-soft); }

/* ============================================================
   8 — LAUNCH + GOAL
   ============================================================ */
.s-launch h2 { margin: 24px 0 48px; }
.s-launch .row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; }
.s-launch .big { padding: 40px 44px 44px; border-radius: 22px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.05); }
.s-launch .big.goal { border-color: rgba(194,69,45,.5); background: linear-gradient(150deg, rgba(194,69,45,.22), rgba(194,69,45,.06)); }
.s-launch .big .v { font-size: 106px; line-height: 1; margin: 18px 0 14px; }
.s-launch .big.goal .v { font-size: 140px; color: var(--spark); }
.s-launch .big .lbl { font-size: 25px; line-height: 1.42; color: rgba(255,255,255,.82); }
.s-launch .big .lbl b { color: #fff; font-weight: 700; }
.s-launch .growth { margin-top: 44px; }
.s-launch .growth .k { display: block; margin-bottom: 24px; }
.s-launch .glist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.s-launch .glist .g { padding-top: 22px; border-top: 2px solid rgba(255,255,255,.14); font-size: 24px; line-height: 1.4; color: rgba(255,255,255,.84); }
.s-launch .glist .g b { display: block; color: var(--spark); font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.s-launch .status { display: flex; gap: 14px; margin-bottom: 44px; }
/* five named channels rather than three described ones */
.s-launch.chan .glist { grid-template-columns: repeat(5, 1fr); gap: 22px; }
.s-launch.chan .glist .g { font-size: 29px; font-weight: 600; color: #fff; }
/* a goal stated in words rather than as a figure */
.s-launch.txt h2 { margin-bottom: 34px; }
.s-launch.txt .big { display: flex; flex-direction: column; justify-content: center; }
.s-launch.txt .big .v { font-size: 84px; }
.s-launch.txt .big.goal .v { font-size: 62px; font-weight: 700; line-height: 1.14; letter-spacing: -.03em; }

/* ============================================================
   11 — NUMBERED LIST (standard / responsibility)
   ============================================================ */
.s-list .pad { justify-content: center; }
.s-list h2 { margin: 24px 0 18px; max-width: 1480px; }
.s-list .lead { max-width: 1180px; margin-bottom: 54px; }
.s-list ol { list-style: none; display: grid; gap: 4px; }
.s-list li { display: flex; gap: 30px; align-items: flex-start; padding: 26px 0; border-top: 1px solid var(--navy-line); }
.s-list li:last-child { border-bottom: 1px solid var(--navy-line); }
.s-list li .n { font-size: 17px; font-weight: 700; letter-spacing: .1em; color: var(--spark); padding-top: 12px; width: 46px; flex: none; font-variant-numeric: tabular-nums; }
.s-list li .t { font-size: 36px; font-weight: 600; line-height: 1.32; letter-spacing: -.018em; }
.s-list li .t small { display: block; font-size: 23px; font-weight: 400; color: var(--on-dark-soft); margin-top: 10px; letter-spacing: 0; }
.s-list .quote {
  margin-top: 48px; padding: 34px 42px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(194,69,45,.24), rgba(194,69,45,.06));
  border: 1px solid rgba(194,69,45,.4);
  font-size: 33px; font-weight: 600; line-height: 1.36; letter-spacing: -.02em;
}
.s-list .quote span { color: var(--spark); }

/* ============================================================
   12 — TWO PHASES (improve the direction)
   ============================================================ */
.s-phase .pad { justify-content: center; }
.s-phase h2 { margin: 24px 0 58px; max-width: 1400px; }
.s-phase .flow { display: flex; align-items: stretch; gap: 30px; }
.s-phase .p { flex: 1; padding: 38px 40px 42px; border-radius: 20px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.04); }
.s-phase .p.two { border-color: rgba(249,174,59,.42); background: linear-gradient(150deg, rgba(249,174,59,.15), rgba(249,174,59,.03)); }
.s-phase .p .k { display: block; margin-bottom: 18px; }
.s-phase .p .k.mute { color: var(--on-dark-faint); }
.s-phase .p .t { font-size: 34px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.s-phase .arrow { display: grid; place-items: center; width: 78px; flex: none; }
.s-phase .arrow svg { width: 54px; height: 54px; }
.s-phase .free { margin-top: 54px; font-size: 46px; font-weight: 700; letter-spacing: -.028em; line-height: 1.2; max-width: 1380px; }
.s-phase .free span { color: var(--spark); }
.s-phase .sub { margin-top: 22px; font-size: 26px; color: var(--on-dark-soft); max-width: 1180px; }
/* 18 — the slogan is the line to pause on, so it gets a line of its own */
.s-phase .motto { margin-top: 30px; font-size: 66px; font-weight: 700; line-height: 1.1; letter-spacing: -.035em; color: var(--spark); }
.s-phase:has(.motto) h2 { margin-bottom: 44px; }
.s-phase:has(.motto) .free { margin-top: 44px; font-size: 40px; }
.s-phase:has(.motto) .sub { margin-top: 28px; }

/* ============================================================
   13 — PACE (three figures)
   ============================================================ */
.s-pace h2 { margin: 24px 0 12px; }
.s-pace .lead { margin-bottom: 56px; max-width: 1180px; }
.s-pace .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; position: relative; }
.s-pace .f { position: relative; padding: 40px 36px 42px; border-radius: 20px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.04); display: flex; flex-direction: column; }
.s-pace .f.est { opacity: .82; }
.s-pace .f.now { border-color: rgba(194,69,45,.55); background: linear-gradient(150deg, rgba(194,69,45,.3), rgba(194,69,45,.08)); }
.s-pace .f .k { display: block; margin-bottom: 26px; }
.s-pace .f .k.mute { color: var(--on-dark-faint); }
.s-pace .f .pre { font-size: 27px; font-weight: 600; line-height: 1; height: 36px; color: var(--on-dark-soft); }
.s-pace .f .v { font-size: 90px; line-height: 1; letter-spacing: -.05em; display: flex; align-items: baseline; gap: 16px; }
.s-pace .f .v em { font-style: normal; font-size: 38px; font-weight: 600; letter-spacing: -.02em; color: var(--on-dark-soft); }
.s-pace .f.now .v { color: var(--spark); }
.s-pace .f .d { margin-top: auto; padding-top: 26px; font-size: 22px; line-height: 1.45; color: rgba(255,255,255,.72); }
.s-pace .qual { margin-top: 44px; display: flex; gap: 20px; align-items: flex-start; padding: 28px 34px; border-radius: 16px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.035); }
.s-pace .qual .txt { font-size: 24px; line-height: 1.5; color: rgba(255,255,255,.78); }
.s-pace .qual .txt b { color: #fff; }

/* ============================================================
   14 — SCORE (8/10)
   ============================================================ */
.s-score .pad { justify-content: center; }
.s-score .row { display: grid; grid-template-columns: 520px 1fr; gap: 84px; align-items: center; }
.s-score .ring { position: relative; width: 460px; height: 460px; }
.s-score .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.s-score .ring .track { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 16; }
.s-score .ring .val { fill: none; stroke: url(#scoreGrad); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1319; stroke-dashoffset: 1319; transition: stroke-dashoffset 1800ms var(--ease) 400ms; }
.slide.is-in .s-score .ring .val, .slide.is-in .ring .val { stroke-dashoffset: 264; }
.s-score .ring .mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.s-score .ring .mid .v { font-size: 132px; line-height: 1; letter-spacing: -.05em; }
.s-score .ring .mid .v i { font-style: normal; color: var(--on-dark-faint); font-size: .55em; }
.s-score .ring .mid .c { font-size: 15px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--spark); margin-top: 10px; }
.s-score h2 { max-width: 900px; margin: 22px 0 20px; }
.s-score .lead { margin-bottom: 44px; }
.s-score .pts { display: grid; gap: 2px; }
.s-score .pts .p { padding: 22px 0; border-top: 1px solid var(--navy-line); font-size: 27px; line-height: 1.38; }
.s-score .pts .p:last-child { border-bottom: 1px solid var(--navy-line); }
.s-score .pts .p b { color: var(--spark); font-weight: 700; }

/* ============================================================
   15 — CRITERIA
   ============================================================ */
.s-crit h2 { margin: 24px 0 22px; }
.s-crit .task { font-size: 38px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 48px; }
.s-crit .task span { color: var(--spark); }
.s-crit .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.s-crit .c { padding: 30px 26px 34px; border-radius: 18px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.04); }
.s-crit .c .n { font-size: 15px; font-weight: 700; letter-spacing: .18em; color: var(--spark); margin-bottom: 20px; }
.s-crit .c .t { font-size: 26px; font-weight: 600; line-height: 1.32; letter-spacing: -.015em; }
.s-crit .foots { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 44px; }
.s-crit .foots .f { padding: 26px 32px; border-radius: 16px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.035); font-size: 24px; line-height: 1.45; color: rgba(255,255,255,.82); }
.s-crit .foots .f.date { border-color: rgba(249,174,59,.34); background: rgba(249,174,59,.08); }
.s-crit .foots .f b { color: var(--spark); font-weight: 700; }

/* ============================================================
   16 — MARKETING FUNNEL
   ============================================================ */
.s-mkt h2 { margin: 24px 0 50px; }
.s-mkt .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: center; }
.s-mkt .st { padding: 38px 34px 42px; border-radius: 20px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.04); min-height: 300px; display: flex; flex-direction: column; }
.s-mkt .st.out { border-color: rgba(194,69,45,.5); background: linear-gradient(150deg, rgba(194,69,45,.26), rgba(194,69,45,.06)); }
.s-mkt .st .k { display: block; margin-bottom: 20px; }
.s-mkt .st .t { font-size: 33px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 16px; }
.s-mkt .st .d { font-size: 22px; line-height: 1.5; color: rgba(255,255,255,.75); }
.s-mkt .st .ico { width: 46px; height: 46px; margin-bottom: 24px; }
.s-mkt .loop { margin-top: 42px; display: flex; align-items: center; gap: 20px; padding: 28px 36px; border-radius: 18px; border: 1px dashed rgba(249,174,59,.4); background: rgba(249,174,59,.05); }
.s-mkt .loop .t { font-size: 27px; font-weight: 600; }
/* 16 — one sentence carries the slide, so it is set at display size and
   the three supporting blocks are stepped down to read after it */
.s-mkt.constant h2 { font-size: 92px; line-height: 1.02; letter-spacing: -.035em; color: var(--spark); margin: 34px 0 66px; max-width: 1660px; }
.s-mkt.constant .row { align-items: stretch; }
.s-mkt.constant .st { min-height: 0; padding: 30px 28px 34px; }
.s-mkt.constant .st .ico { width: 38px; height: 38px; margin-bottom: 18px; }
.s-mkt.constant .st .k { margin-bottom: 14px; }
.s-mkt.constant .st .t { font-size: 28px; margin-bottom: 12px; }
.s-mkt.constant .st .d { font-size: 20px; }
.s-mkt.constant .loop { margin-top: 38px; }

/* four-step variant — the funnel with automation in it */
.s-mkt.four .row { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.s-mkt.four .st { padding: 32px 26px 36px; min-height: 286px; }
.s-mkt.four .st .t { font-size: 28px; }
.s-mkt.four .st .d { font-size: 20px; }
.s-mkt.four .st .ico { width: 40px; height: 40px; margin-bottom: 20px; }

/* ============================================================
   17 — PRIORITIES
   ============================================================ */
.s-prio h2 { margin: 22px 0 42px; }
.s-prio .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.s-prio .p { padding: 30px 28px 34px; border-radius: 18px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.04); display: flex; flex-direction: column; min-height: 292px; }
.s-prio .p .logo { height: 30px; margin-bottom: 22px; display: flex; align-items: center; }
.s-prio .p .logo svg { height: 24px; }
.s-prio .p .name { font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--spark); margin-bottom: 22px; }
.s-prio .p .t { font-size: 24px; line-height: 1.44; color: rgba(255,255,255,.86); }
.s-prio .ask {
  margin-top: 40px; padding: 34px 42px; border-radius: 20px;
  background: linear-gradient(140deg, var(--orange) 0%, #9E331C 100%);
  border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; gap: 30px;
}
.s-prio .ask .k { color: rgba(255,255,255,.82); white-space: nowrap; }
.s-prio .ask .t { font-size: 30px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.s-prio .ask .vr { width: 1px; align-self: stretch; background: rgba(255,255,255,.28); }

/* ============================================================
   18 — CLOSING
   ============================================================ */
.s-end .pad { justify-content: center; align-items: center; text-align: center; }
.s-end h1 { font-size: 150px; letter-spacing: -.045em; }
.s-end .bar { width: 180px; height: 5px; margin: 44px auto; background: linear-gradient(90deg, var(--orange), var(--spark)); border-radius: 3px; }
.s-end .topics { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.s-end .topics span { padding: 16px 30px; border-radius: 999px; border: 1px solid var(--navy-line); background: rgba(255,255,255,.04); font-size: 25px; font-weight: 500; color: rgba(255,255,255,.86); }
.s-end .marks { display: flex; align-items: center; gap: 40px; justify-content: center; margin-top: 76px; opacity: .75; }
.s-end .marks svg { height: 30px; }
.s-end .marks .sep { width: 1px; height: 30px; background: var(--navy-line); }

/* --- dense variant: 4 items + a pull quote in one screen --- */
.s-list.dense h2 { font-size: 62px; max-width: 1500px; margin: 22px 0 16px; }
.s-list.dense .lead { margin-bottom: 30px; }
.s-list.dense li { padding: 17px 0; }
.s-list.dense li .t { font-size: 33px; }
.s-list.dense li .t small { font-size: 21px; margin-top: 7px; }
.s-list.dense li .n { padding-top: 10px; }
.s-list.dense .quote { margin-top: 32px; padding: 26px 36px; font-size: 29px; }