/* HOLYSPOKE homepage. Built on the Radar site (styles.css): same mist, blue and Figtree. The page runs: why you are
   here (hero), where you start (the brand as the filter, Radar and Signal), what it looks like (one example), why we
   do this (mission), prices (Curated and Makers live there) and one closing invitation.
   Headings state, and their second sentence is blue. */
.home { --ink: #15162b; --grad: linear-gradient(140deg, #2a4aff 0%, #5b4bff 55%, #8a6bff 100%); --sig: #2340b8; --ins: #232326;
  --peach: #f0b6a1; --role: #dfe3ff; --mono: ui-monospace, "SF Mono", Menlo, monospace; }
.home .logo { font-size: 20px; letter-spacing: .01em; }
.home .over { font: 600 15px/1.3 var(--sans); color: var(--blue); }
.home .lead { gap: 14px; }
.home .lead > p:not(.over) { max-width: 56ch; color: var(--text-2); }
.home section { scroll-margin-top: 80px; }
.home h1 span, .home h2 span { display: block; color: var(--blue); }
.home h2 { max-width: 24ch; }

/* ---------- rhythm: every section after the hero opens with the same line and spacing ---------- */
.home main > section:not(.hero):not(.cta):not(.mission) { margin-top: clamp(64px, 7vw, 104px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line-2); }

/* ---------- 1. hero ---------- */
.home .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "copy fan"; min-height: 0; padding-top: clamp(48px, 6vw, 88px); }
.home .hero-copy { grid-area: copy; gap: 20px; }
.home .hero h1 { font-size: clamp(44px, 5vw, 76px); line-height: 1.02; }
.home .hero h1 em { display: block; font-style: normal; color: var(--blue); }
.no-chase { font: 600 clamp(17px, 1.3vw, 19px)/1.45 var(--sans); color: var(--text); }
.hero-price { font-size: 15px; color: var(--text-2); }

/* small label with a coloured dot: the product */
.chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 700 12px/1 var(--sans); color: var(--text); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--blue)); }

/* three cards, fanned like a hand */
.fan { grid-area: fan; position: relative; min-height: 540px; display: grid; place-items: center; isolation: isolate; }
.fan::before { content: ""; position: absolute; z-index: -1; width: 110%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(42, 74, 255, .26), transparent 72%); }
.fan > * { position: absolute; width: min(236px, 62vw); display: grid; gap: 10px; transition: transform .5s var(--ease); }
.fan .chip { box-shadow: var(--shadow); }
.fan .f1 { transform: translate(-72%, -6%) rotate(-8deg); }
.fan .f2 { transform: translate(0, 12%) rotate(1deg); z-index: 2; }
.fan .f3 { transform: translate(72%, -8%) rotate(8deg); }
.fan:hover .f1 { transform: translate(-78%, -8%) rotate(-10deg); }
.fan:hover .f3 { transform: translate(78%, -10%) rotate(10deg); }
.fan .post { box-shadow: 0 30px 60px -24px rgba(21, 22, 43, .55); }
.fan .ic.idea h3 { font-size: 18px; }

/* cards in the products' own look: Signal (mono labels, Dela heads) and Radar */
.ic { display: grid; gap: 12px; align-content: start; padding: 22px 22px 20px; border-radius: 16px; font-size: 14px; line-height: 1.55;
  box-shadow: 0 30px 60px -24px rgba(21, 22, 43, .45); }
.ic-top { display: flex; justify-content: space-between; align-items: center; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.ic h3 { font: 400 clamp(17px, 1.5vw, 20px)/1.15 var(--dela); text-transform: uppercase; letter-spacing: .01em; }
.ic.sig { background: var(--sig); color: #fff; }
.ic.ins { background: var(--ins); color: #f2f0e8; }
.ic.role { background: var(--role); color: var(--ink); }
.ic.idea { background: var(--peach); color: #241612; }
.hand { font: 400 15px/1.2 var(--dela); text-transform: uppercase; letter-spacing: .01em; }

.rc { display: grid; gap: 8px; justify-items: start; padding: 22px; border-radius: 24px; background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -24px rgba(30, 36, 110, .4); font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rc.act { background: var(--grad); color: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .25); }
.rc-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.rc-pill { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); font: 700 11px/1.2 var(--sans); color: #fff; }
.rc h3 { font: 800 23px/1.08 var(--sans); letter-spacing: -.03em; color: #fff; }
.rc b { color: #fff; }
.rc .btn-fake { margin-top: 4px; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--blue); font: 700 12.5px/1 var(--sans); }

/* shared text bits in the product cards */
.p-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; }
.p-name b { font-weight: 700; }
.p-q { font: 700 clamp(20px, 1.8vw, 24px)/1.2 var(--sans); letter-spacing: -.02em; }
.p-punch { font-weight: 600; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ticks li { position: relative; padding-left: 24px; color: var(--text-2); font-size: 16px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--blue); }

/* ---------- 2. where you start: Radar and Signal side by side, then the filter ---------- */
.begin { display: grid; gap: 28px; }
/* both cards share one grid (subgrid), so label, question, heading, text, list, box, line and button sit at the same
   height in both. Each card has nine rows. */
.products { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(9, auto); gap: 0 16px; }
.product { grid-row: span 9; display: grid; grid-template-rows: subgrid; row-gap: 16px; align-items: start; justify-items: start;
  padding: 32px 32px 30px; border-radius: 22px; background: var(--bg-2); box-shadow: var(--shadow); scroll-margin-top: 96px; }
/* calm cards: the heading is the one big thing, the blue box the one accent; the rest is plain text */
.product .p-name { font-size: 13.5px; color: var(--mute); }
.product .p-name b { font-weight: 500; }
.product .p-q { margin-top: 4px; font: 500 16px/1.4 var(--sans); letter-spacing: 0; color: var(--mute); }
.product h3 { margin-top: -10px; }
.product .p-punch { font-weight: 400; color: var(--text-2); }
.product .ticks { gap: 4px; }
.product h3 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.1; }
.product > p:not(.p-name):not(.p-q):not(.p-punch):not(.p-for) { color: var(--text-2); }
.p-for { align-self: end; font-size: 14px; color: var(--mute); }
.product .btn { align-self: end; }
.p-for b { color: var(--text-2); }
.choices { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.choices li { display: flex; align-items: center; gap: 10px; font: 500 15px/1.35 var(--sans); color: var(--text-2); }
.choices .chip { padding: 4px 9px; font-size: 11px; box-shadow: none; background: var(--bg-3); }
.trace { font-size: 16px; color: var(--text-2); max-width: 70ch; }

/* how the team starts right away */
.p-next { padding: 14px 16px; border-radius: 14px; background: #eef0ff; color: var(--text-2); font-size: 15.5px; line-height: 1.5; }
.p-next b { color: var(--blue); }
#signal .p-next { background: #e9ecf8; }
#signal .p-next b { color: var(--sig); }

/* ---------- 3. what it looks like: the Radar phone, then the Signal route ---------- */
.example { display: grid; gap: 28px; }
.radar-demo { display: grid; gap: 14px; padding-bottom: clamp(24px, 3vw, 40px); }
.radar-demo .demo { margin-top: 4px; }
/* only the process: no app menu and no tab bar (the step buttons above say where you are), so a lower frame */
#radar-demo .a-top, #radar-demo .a-tabs { display: none; }
#radar-demo .app { padding-top: 28px; }
/* the demo runs twice as fast as on the Radar site (SPEED in the script) */
#radar-demo .a-cursor { transition: transform .42s cubic-bezier(.45, 0, .2, 1), opacity .3s; }
.signal-demo { display: grid; gap: 18px; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.steps-row li { position: relative; gap: 14px; box-shadow: 0 24px 50px -28px rgba(21, 22, 43, .5); }
/* an arrow between the steps */
.steps-row li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -15px; top: 26px; width: 16px; height: 16px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a4aff' stroke-width='2.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-radius: 50%; box-shadow: 0 0 0 3px var(--bg); }
.st-t { font: 600 15.5px/1.45 var(--sans); }
.ex-note { font-size: 14px; color: var(--mute); }
.ex-note b { color: var(--text-2); }
.ex-note a { color: var(--text-2); text-underline-offset: 3px; }

/* ---------- 4. mission: the one dark band ---------- */
.mission { display: grid; gap: 16px; margin-top: clamp(64px, 7vw, 104px); padding: clamp(36px, 5vw, 64px); border-radius: 24px;
  background: var(--ink); color: #fff; }
.mission .over { color: #8fa0ff; }
.mission h2 { color: #fff; }
.mission > p:not(.over):not(.mission-end) { max-width: 62ch; color: rgba(255, 255, 255, .78); }
.mission .mission-gap { font: 600 clamp(18px, 1.5vw, 20px)/1.45 var(--sans); color: #fff; }
.mission-end { font: 700 clamp(20px, 1.8vw, 24px)/1.35 var(--sans); }
.mission-end span { display: block; color: #8fa0ff; }

/* ---------- 5. three plans (card styles from styles.css: .plan-grid, .plan) ---------- */
.plans { display: grid; gap: 28px; }
.home .plan-grid { align-items: stretch; }
.home .plan { grid-template-rows: auto auto auto auto auto auto 1fr auto; }
.home .plan ul { align-content: start; }
.home .plan .plan-btn { justify-self: stretch; white-space: normal; text-align: center; line-height: 1.25; }
.home .plan { position: relative; }
.plan-tag { position: absolute; top: 26px; right: 24px; padding: 5px 10px; border-radius: 999px; background: var(--blue); color: #fff;
  font: 600 12px/1 var(--sans); }
.plan-more a { color: var(--blue); font-weight: 600; text-decoration: none; }
.plan-more { align-self: end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.enterprise { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 14px 16px 14px 24px; border-radius: 16px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.ent-name { flex: 1 1 280px; color: var(--text-2); }
.ent-name b { color: var(--text); margin-right: 8px; }
.ent-price { font-weight: 700; }

/* ---------- closing invitation ---------- */
.home .cta { background: var(--grad); }
.home .signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(100%, 780px); }
.home .signup .wide { grid-column: 1 / -1; }
.home .signup .btn { justify-self: start; }
.home .signup label span em { font-style: normal; font-weight: 500; opacity: .7; margin-left: 4px; }
.entry-pick { margin: 4px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.entry-pick legend { width: 100%; padding: 0; margin-bottom: 8px; font: 600 14px/1 var(--sans); color: rgba(255, 255, 255, .86); }
.entry-pick label { display: block; cursor: pointer; }
.entry-pick input { position: absolute; opacity: 0; pointer-events: none; }
.entry-pick label span { display: block; padding: 11px 16px; border-radius: 999px; background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); font: 600 15px/1 var(--sans); color: #fff; transition: background .2s, color .2s; }
.entry-pick input:checked + span { background: #fff; color: var(--blue); box-shadow: none; }
.entry-pick input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

.home .foot { align-items: center; }
.home .foot .logo { font-size: 15px; color: var(--text); }
.home .foot nav { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 1080px) {
  .steps-row { grid-template-columns: 1fr 1fr; }
  .steps-row li:nth-child(2)::after { display: none; }
}
@media (max-width: 980px) {
  .home .hero { grid-template-columns: 1fr; grid-template-areas: "copy" "fan"; }
  .products, .home .plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* on a phone the fan would only push the copy down; Radar and Signal follow right after */
  .fan { display: none; }
  .home main > section:not(.hero):not(.cta):not(.mission) { margin-top: 48px; padding-top: 32px; }
  .mission { margin-top: 48px; padding: 28px 22px; }
  .home .hero { padding-bottom: 0; }
  .home .top .btn.sm svg { display: none; }
  .home .hero .row .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.25; }
  .product { padding: 22px 20px; }
  .steps-row { grid-template-columns: 1fr; }
  .steps-row li::after { display: none; }
  .home .signup { grid-template-columns: 1fr; }
}