/* HOLYSPOKE homepage, English version (holyspoke-v2.html). Built on styles.css and holyspoke.css: the same mist, blue,
   Figtree and product cards. The page follows the design in the PDF: hero, the early signal, two ways in (Radar and
   Signal), from moment to move (the Radar demo), the people layer (Originals, Prompt the Human, Makers), how we work and
   the brand as the filter, mission, one closing invitation. No prices. Headings state, and their second sentence is blue. */
.v2 { --peach-d: #e0835f; }
.v2 h2 span, .v2 .say span, .v2 .bigger span, .v2 .no-start span { color: var(--blue); }
.v2 .say span, .v2 .no-start span { display: inline; }

/* ---------- 1. hero ---------- */
.who-line { font: 700 clamp(17px, 1.3vw, 19px)/1.4 var(--sans); color: var(--text); }
.ic-top .state { padding: 4px 7px; border-radius: 4px; background: currentColor; letter-spacing: .1em; }
.ic.role .state { background: var(--ink); color: #fff; }
.ic.idea .state { background: #241612; color: var(--peach); }
.ic.sig .state { background: #fff; color: var(--sig); }
.fan-note { grid-column: 1 / -1; justify-self: end; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.route { max-width: 640px; list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 8px 14px;
  font: 600 15px/1.3 var(--sans); color: var(--text-2); }
.route li:not(:last-child)::after { content: "→"; margin-left: 14px; color: var(--blue); }

/* ---------- full-screen images: a section breaks out of main to the full width, the photo covers it, the
   content sits back on the page grid (.bleed-in). :not(#_) lifts these over the section rhythm in holyspoke.css. ---------- */
.bleed { position: relative; isolation: isolate; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); }
.v2 main > .bleed:not(#_) { margin-top: 0; padding-top: 0; border-top: 0; }
.bleed-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bleed::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bleed-in { position: relative; width: min(calc(100% - 2 * var(--gutter)), var(--maxw)); margin: 0 auto; }

/* hero: the portrait on the right, the copy on the free light-blue left */
.hero-full { min-height: min(calc(100svh - 63px), 980px); display: grid; align-items: stretch; }
.hero-full .bleed-img { object-position: 78% 30%; }
.hero-full::after { background: linear-gradient(90deg, rgba(232, 243, 255, .55), transparent 55%); }
.hero-in { display: grid; grid-template-rows: 1fr auto; gap: 40px; padding: clamp(48px, 7vw, 104px) 0 28px; }
.hero-in .hero-copy { grid-area: auto; align-self: center; max-width: 640px; }
.hero-full h1 { font-size: clamp(44px, 5.4vw, 80px); line-height: 1.02; }
.hero-full h1 em { display: block; font-style: normal; color: var(--blue); }
.hero-full .sub { max-width: 44ch; color: var(--text); }
.hero-full .btn.ghost { background: rgba(255, 255, 255, .55); }


/* the people band: the red portrait, the statement in white over the dark coat */
.worlds { display: grid; align-items: end; min-height: min(100svh, max(520px, 56.25vw)); margin-block: clamp(16px, 3vw, 40px); }
.worlds .bleed-img { object-position: 50% 20%; }
.worlds::after { background: linear-gradient(0deg, rgba(10, 0, 0, .7), transparent 55%); }
.worlds .bleed-in { padding-bottom: clamp(36px, 5vw, 72px); }
.worlds .bigger { margin: 0; color: #fff; max-width: 22ch; }
.worlds .bigger small { color: rgba(255, 255, 255, .82); }
.v2 .worlds .bigger span { color: #ffb3a3; }

/* the mission over the balloon letters */
.v2 main > .mission.bleed:not(#_) { margin-top: clamp(64px, 7vw, 104px); }
.mission.bleed { display: grid; align-items: center; min-height: min(100svh, max(560px, 56.25vw)); padding: clamp(56px, 7vw, 104px) 0; border-radius: 0; background: #0a0a3a; }
.mission.bleed::after { background: linear-gradient(90deg, rgba(6, 6, 40, .72), rgba(6, 6, 40, .25)); }
.mission .bleed-in { display: grid; gap: 16px; }
.mission .bleed-in > p:not(.over):not(.mission-end):not(.mission-gap) { max-width: 62ch; color: rgba(255, 255, 255, .82); }
.mission .mission-gap { color: #fff; }

/* ---------- 2. the early signal ---------- */
.early { display: grid; gap: 28px; }
/* four bars that grow: the first three are where HOLYSPOKE looks, the last is where most brands arrive */

/* ---------- 3. two ways in ---------- */
.ways, .move, .people { display: grid; gap: 28px; }
.ways-grid, .layers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.layers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.way, .layer { display: grid; gap: 14px; align-content: start; justify-items: start; padding: 32px 32px 30px; border-radius: 22px;
  background: var(--bg-2); box-shadow: var(--shadow); scroll-margin-top: 96px; }
.way { grid-template-rows: auto auto auto auto auto auto auto 1fr; }
.way > p:not(.way-top):not(.way-for):not(.way-punch), .layer > p:not(.way-top):not(.way-punch) { color: var(--text-2); }
.way-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; }
.avail { padding: 5px 10px; border-radius: 999px; background: #eef0ff; color: var(--blue); font: 600 12px/1 var(--sans); white-space: nowrap; }
.avail.soon { background: var(--bg-3); color: var(--mute); }
.way-for { margin-top: 4px; font: 500 15px/1.3 var(--sans); color: var(--mute); }
.way h3, .layer h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.1; }
.layer h3 { font-size: clamp(21px, 1.8vw, 25px); }
.way-punch { font-weight: 700; color: var(--text); }
.nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: n; }
.nums li { counter-increment: n; display: flex; gap: 12px; color: var(--text-2); font-size: 16px; }
.nums li::before { content: "0" counter(n); font: 600 12px/1.9 var(--mono); color: var(--blue); }
.way.sig .nums li::before { color: var(--sig); }
.way .btn { align-self: end; margin-top: 6px; }
.way.sig .btn { background: var(--sig); }
.way.sig .btn:hover { background: #1b339a; }

/* ---------- 4. from moment to move ---------- */
.move-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.moves { list-style: none; margin: 0; padding: 0; counter-reset: m; border-top: 1px solid var(--line-2); }
.moves li { counter-increment: m; display: grid; grid-template-columns: 34px 130px 1fr; gap: 12px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.moves li::before { content: "0" counter(m); font: 600 12px/1 var(--mono); color: var(--blue); }
.moves b { font-weight: 700; }
.moves span { color: var(--text-2); font-size: 15.5px; line-height: 1.45; }
.move .radar-demo { padding-bottom: 0; }
.move-end { max-width: 40ch; }

/* ---------- 5. the people layer ---------- */
.who-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.who-grid li { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 1px var(--line); }
.who-grid .ic-top { color: var(--blue); }
.who-grid h3 { font: 800 clamp(20px, 1.7vw, 23px)/1.1 var(--sans); letter-spacing: -.025em; }
.who-grid p:not(.ic-top) { color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.bigger { display: grid; gap: 10px; max-width: 26ch; margin: clamp(16px, 3vw, 40px) 0; font: 700 clamp(30px, 3.4vw, 46px)/1.08 var(--sans); letter-spacing: -.028em; text-wrap: balance; }
.bigger small { font: 500 clamp(17px, 1.4vw, 19px)/1.45 var(--sans); letter-spacing: 0; color: var(--text-2); max-width: 46ch; }

/* ---------- 6. how we work + the brand as the filter ---------- */
.how { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.how-col { display: grid; gap: 16px; align-content: start; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--bg-2); box-shadow: var(--shadow); }
.how-col > p:not(.over):not(.reals):not(.no-start) { color: var(--text-2); max-width: 46ch; }
.how-col.brain { background: var(--grad); color: #fff; }
.how-col.brain .over { color: rgba(255, 255, 255, .8); }
.how-col.brain h2 span, .how-col.brain .no-start span { color: #fff; opacity: .72; }
.how-col.brain > p:not(.over):not(.no-start) { color: rgba(255, 255, 255, .86); }
.reals { margin-top: 8px; font: 800 clamp(22px, 2vw, 28px)/1.15 var(--sans); letter-spacing: -.02em; }
.reals span { color: var(--blue); }
.tags { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); font: 600 13px/1 var(--sans); }
.no-start { margin-top: 8px; font: 700 clamp(18px, 1.5vw, 20px)/1.4 var(--sans); max-width: 30ch; }

/* ---------- 8. closing ---------- */
.v2 .cta .cta-over { color: rgba(255, 255, 255, .8); position: relative; z-index: 1; }
.v2 .signup .btn { justify-self: start; }
.v2 .foot { gap: 12px 24px; }

@media (max-width: 980px) {
  .move-head, .how { grid-template-columns: 1fr; }
  .ways-grid, .layers { grid-template-columns: 1fr; }
  .who-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  /* on a phone the portrait sits at the bottom right and the copy gets a lighter veil */
  .hero-full .bleed-img { object-position: 82% 0; }
  .hero-full::after { background: linear-gradient(180deg, rgba(232, 243, 255, .82) 0%, rgba(232, 243, 255, .6) 60%, transparent 100%); }
  .hero-full .row .btn { width: 100%; justify-content: center; }
  .worlds { min-height: 560px; }
  .v2 .route { font-size: 14px; }
  /* on a phone the stairs become a list: card, then its stage; the bars go */
              .way, .layer { padding: 24px 20px; }
  .moves li { grid-template-columns: 30px 1fr; }
  .moves span { grid-column: 2; }
  .who-grid { grid-template-columns: 1fr; }
}

/* ---------- the text on the full-screen images: as big as the photos ---------- */
.worlds .bigger { max-width: 16ch; gap: 18px; font-size: clamp(40px, 6.2vw, 100px); line-height: 1; letter-spacing: -.035em; }
.worlds .bigger small { max-width: 34ch; font-size: clamp(18px, 1.7vw, 26px); letter-spacing: 0; }
.mission.bleed h2 { max-width: 12ch; font-size: clamp(44px, 7vw, 112px); line-height: .98; letter-spacing: -.035em; }
.mission.bleed .over { font-size: clamp(15px, 1.2vw, 18px); }
.mission.bleed .mission-gap { font-size: clamp(22px, 2.2vw, 34px); line-height: 1.25; }
.mission .bleed-in > p:not(.over):not(.mission-end):not(.mission-gap) { max-width: 48ch; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.5; }
.mission.bleed .mission-end { font-size: clamp(26px, 2.8vw, 44px); line-height: 1.15; letter-spacing: -.02em; }
.mission .bleed-in { gap: clamp(16px, 1.8vw, 26px); }

/* ---------- tighter crops: the bands don't show the whole photo, only the part that matters ---------- */
.worlds { min-height: clamp(460px, 44vw, 680px); }
.worlds .bleed-img { object-position: 50% 32%; }
.worlds::after { background: linear-gradient(0deg, rgba(10, 0, 0, .72), transparent 60%), linear-gradient(90deg, rgba(40, 0, 0, .35), transparent 60%); }
.mission.bleed { min-height: 0; padding: clamp(64px, 8vw, 120px) 0; }
.mission.bleed .bleed-img { object-position: 50% 40%; }
/* the red portrait sits right of centre, so the statement gets the plain red on the left; the photo's own red fills the gap */
.worlds { background: #e8150a; }
.worlds .bleed-img { left: 14%; width: 100%; object-position: 50% 30%; }
@media (max-width: 720px) { .worlds .bleed-img { left: 0; } }

/* the hero heading at the size of the statements on the other image bands */
.hero-full h1 { font-size: clamp(48px, 7vw, 112px); line-height: .98; letter-spacing: -.035em; }
.hero-in .hero-copy { max-width: 760px; }
.hero-full .who-line { font-size: clamp(17px, 1.5vw, 22px); }
.hero-full .sub { font-size: clamp(18px, 1.45vw, 22px); max-width: 42ch; }

/* closing: what happens after the form, before the form */
.cta-steps { display: grid; margin: 6px 0 10px; gap: 10px; font-size: clamp(16px, 1.3vw, 18px); color: rgba(255, 255, 255, .86); }
.cta-steps li::before { flex: none; width: 24px; height: 24px; font-size: 13px; }
.cta-steps b { color: #fff; font-weight: 700; }

/* the mission band: generous room above and below the text (the bleed reset above would otherwise zero the top) */
.v2 main > .mission.bleed:not(#_) { padding-top: clamp(96px, 11vw, 176px); padding-bottom: clamp(96px, 11vw, 176px); }

/* the right moment: heading left, the bars right with the conclusion as their caption */

.wave-chart .say { font-size: clamp(18px, 1.5vw, 21px); }
.wave-chart .say span { color: var(--blue); }

/* from moment to move: one lead, then the demo */
.move .lead b { color: var(--text); font-weight: 700; }
.move .lead > p:not(.over) { max-width: 60ch; }

/* the mission band: one statement, as big as the other image bands */
.v2 .mission .mission-line { max-width: 18ch; font-size: clamp(44px, 7vw, 112px); line-height: .98; letter-spacing: -.035em; }
.v2 .mission .mission-line span { display: block; color: #8fa0ff; }

/* cobalt, the blue of the SPOKE logo (#0000ff), in place of the violet-blue gradient: the closing block, the brand
   filter card and the chart bars. The Radar demo keeps the app's own gradient (.app sets its own --grad). */
.v2 { --grad: linear-gradient(140deg, #1f2bff 0%, #0000ff 50%, #0000d4 100%); }
.v2 
/* from moment to move in cobalt too: the step buttons, the heading's blue and the Radar demo itself */
.v2 .move { --blue: #0000ff; --blue-hi: #0000ff; }
.v2 .move .app { --blue-a: #0000ff; --grad: linear-gradient(140deg, #1f2bff 0%, #0000ff 50%, #0000d4 100%); }

/* ---------- the right moment as a sound wave: from voice note to anthem ---------- */
.wave-chart { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; row-gap: 18px; }
.wave-cards { grid-column: 1 / 4; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
/* each card hangs over its quarter of the wave, a little higher as the wave gets louder */
.wave-cards li { position: relative; }
.wave-cards .ic { gap: 8px; padding: 18px 18px 16px; }
.wave-cards .ic h3 { font-size: clamp(16px, 1.4vw, 19px); }
.wave-cards .ic p:not(.ic-top) { font-size: 14px; line-height: 1.45; }
.wave { grid-column: 1 / -1; display: flex; align-items: center; gap: 2px; height: clamp(160px, 18vw, 240px); }
.wave i { flex: 1 1 0; min-width: 1px; height: calc(var(--a) * 100%); min-height: 3px; border-radius: 99px;
  background: linear-gradient(180deg, #1f2bff, #0000ff 50%, #1f2bff); }
.wave i.late { background: #cfcfdc; }
.wave-chart.wait .wave i { transform: scaleY(.04); }
.wave-chart.in .wave i { transform: none; transition: transform .7s var(--ease) var(--d); }
.wave-stages { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wave-stages li { display: grid; gap: 4px; padding-top: 12px; border-top: 2px solid #0000ff; }
.wave-stages li.late { border-top-color: #cfcfdc; }
.wave-stages b { font: 600 11px/1 var(--mono); letter-spacing: .14em; color: #0000ff; }
.wave-stages .late b { color: var(--mute); }
.wave-stages span { font: 700 15px/1.25 var(--sans); }
.wave-stages em { font: normal 500 13.5px/1.3 var(--sans); color: var(--mute); }
.wave-chart figcaption { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-top: 6px; }
/* the cards lie on the wave: same grid row, each centred on its quarter, the loud bars sticking out above and below */
.wave-cards, .wave { grid-row: 1; }
.wave-cards { position: relative; z-index: 1; align-self: center; align-items: center; }
.wave-cards li { justify-self: center; width: 84%; }
.wave-cards .ic { box-shadow: 0 24px 50px -18px rgba(10, 10, 60, .45); }
.wave { height: clamp(220px, 24vw, 320px); }
.wave-stages { grid-row: 2; }
.wave-chart figcaption { grid-row: 3; }
@media (max-width: 720px) {
  .wave-cards, .wave, .wave-stages, .wave-chart figcaption { grid-row: auto; }
  .wave-cards li { width: auto; }
  .wave-cards .ic { transform: none !important; }
  .wave { height: 160px; }
  .wave-cards { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .wave-cards li { margin: 0 !important; padding: 0; }
  .wave-cards li::after { display: none; }
  .wave i:nth-child(even) { display: none; }
  .wave-stages { grid-template-columns: 1fr 1fr; row-gap: 16px; }
}
/* the grey quarter no taller than where the blue ends */
.wave i.late { height: calc(var(--a) * 72%); }
/* the grey stretch after the blue is narrower: 20 bars against 108 blue ones, and its column (04) to match */
.wave-chart, .wave-stages { grid-template-columns: 1fr 1fr 1fr .56fr; }
@media (max-width: 720px) { .wave-stages { grid-template-columns: 1fr 1fr; } }

/* the mission closes the page: below the invitation, the footer right under it */
.v2 main > .mission.bleed:not(#_) { margin-top: clamp(64px, 7vw, 104px); }
.v2 .foot { margin-top: 0; }

/* how we work: two by two, Lit next to how we work, Lame mirrored below next to the brand filter */
.emoji-tile { margin: 0; display: grid; place-items: center; min-height: 100%; padding: clamp(24px, 3vw, 40px); border-radius: 24px; }
.emoji-tile img { width: auto; height: clamp(180px, 20vw, 280px); filter: drop-shadow(0 30px 40px rgba(20, 20, 60, .25)); transition: transform .5s var(--ease); }
.emoji-tile:hover img { transform: rotate(-6deg) scale(1.04); }
.emoji-tile.lit { background: radial-gradient(closest-side, rgba(255, 140, 60, .28), transparent 75%); }
.emoji-tile.lame { background: radial-gradient(closest-side, rgba(0, 0, 255, .14), transparent 75%); }
.emoji-tile.lame:hover img { transform: rotate(6deg) scale(1.04); }
.v2 .how { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) {
  .v2 .how { grid-template-columns: 1fr 1fr; }
  .v2 .how .how-col { grid-column: 1 / -1; }
  .emoji-tile img { height: 150px; }
}

/* the Radar demo a size smaller: narrower and centred, the app scales down with it */
.v2 .move .radar-demo { width: min(100%, 880px); justify-self: center; }
.v2 .move .demo-steps { justify-content: center; }
.v2 .move .demo-cap { margin-inline: auto; text-align: center; }

/* plans without prices: name, who it is for, button, what is included */
.v2 .plan { grid-template-rows: auto auto auto auto 1fr auto; }
.v2 .plan .plan-btn { margin-top: 18px; }
.v2 .plan .who { color: var(--blue); }

/* two ways in as editorial text, not cards: the plans further down are where you choose */
.v2 .way { padding: 26px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 2px solid #0000ff; }
.v2 .way.sig { border-top-color: var(--sig); }
.v2 .ways-grid { gap: clamp(28px, 5vw, 72px); }
.v2 .way-top .chip { background: none; box-shadow: none; padding: 0; font-size: 13px; }

/* Radar and Signal as a logo: an icon (rings for Radar, the star for Signal, as in the design) and the name big in
   the HOLYSPOKE wordmark letter */
.way-logo { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); margin-bottom: 4px;
  font: 400 clamp(44px, 5.4vw, 78px)/.9 var(--dela); letter-spacing: -.01em; text-transform: uppercase; }
.way-logo svg { flex: none; width: .82em; height: .82em; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }
.way-logo .dot { fill: currentColor; stroke: none; }
.way-logo.radar { color: #0000ff; }
.way-logo.signal { color: var(--ink); }
.v2 .way > p.way-logo.radar { color: #0000ff; }
.v2 .way > p.way-logo.signal { color: var(--ink); }
.v2 .way.sig { border-top-color: var(--ink); }
.v2 .way-logo { font-size: clamp(34px, 3.8vw, 54px); }

/* the product logos carry the SPOKE trademark small above the name */
.way-logo span { display: grid; }
.way-logo small { font: 700 clamp(11px, .9vw, 13px)/1 var(--sans); letter-spacing: .24em; margin-bottom: 6px; }
/* the footer says once how the names relate */
.foot-family { color: var(--text-2); }

/* SPOKE on the same line as the product name, the same size, in a softer tone */
.way-logo span { display: inline; white-space: nowrap; }
.way-logo small { font: inherit; letter-spacing: inherit; margin: 0 .28em 0 0; opacity: .32; }
.v2 .way-logo { font-size: clamp(28px, 3.3vw, 48px); }
.v2 .way-logo { font-size: clamp(24px, 2.6vw, 38px); }

/* Makers on its own: one wide card, the heading big, the line under it */
.layer.makers { padding: clamp(28px, 4vw, 48px); }
.makers-head { display: grid; gap: 14px; max-width: 62ch; }
.layer.makers h3 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.08; }
.layer.makers .way-top { justify-content: flex-start; }
.layer.makers .btn { justify-self: start; margin-top: 6px; }

/* Makers and Enterprise as two bars under the plans, close together */
.v2 #makers + .enterprise { margin-top: -18px; }
/* the names in the bars as big as the plan names (Radar, Signal, Curated) */
.v2 .enterprise { padding: 18px 18px 18px 28px; }
.v2 .ent-name b { display: inline-block; margin-right: 12px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; vertical-align: -2px; color: var(--text); }