/* The home page's two middle sections, Features and Run the business (once AI; from the Instagram
   posts, 2026-10-04).
   Made calmer on 2026-10-05 (the user: "the website features look over crowded, they need
   minimising and a new cleaner design"): no cards; each section is one picture with its names
   beside it, and the name picked (or the next one, every 5 seconds while it is on screen, until
   someone picks) says what the picture shows. The script is in welcome.js. Tokens from site.css.
   Phones are sized from their own width (container units), so they scale with the column. */

/* ─── A phone holding a real screenshot ─────────────────────────────────────── */
.sp-wrap { container-type: inline-size; }
.sp { width: 100cqw; border-radius: 13.4cqw; background: #16181d; padding: 2.1cqw; box-shadow: inset 0 0 0 0.4cqw #2b2f37, 0 24px 60px rgba(0, 0, 0, 0.55); }
.sp-scr { position: relative; aspect-ratio: 556 / 1180; border-radius: 11.4cqw; overflow: hidden; background: #000; }
.sp-scr img { position: absolute; left: 0; width: 100%; height: auto; max-width: none; top: calc(var(--top, 13) * 1cqw); }
.sp-sb { position: absolute; left: 0; right: 0; top: 0; height: 13cqw; display: flex; align-items: center; justify-content: space-between; padding: 2.6cqw 9cqw 0 12.5cqw; background: var(--sb, #000); color: #fff; font: 600 4.7cqw/1 -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; }
.sp-sb .ics { display: flex; align-items: center; gap: 1.6cqw; }
.sp-sb .sig { display: flex; align-items: flex-end; gap: 0.6cqw; height: 3.4cqw; }
.sp-sb .sig i { display: block; width: 0.9cqw; border-radius: 0.3cqw; background: #fff; }
.sp-sb .sig i:nth-child(1) { height: 35%; } .sp-sb .sig i:nth-child(2) { height: 55%; } .sp-sb .sig i:nth-child(3) { height: 78%; } .sp-sb .sig i:nth-child(4) { height: 100%; }
.sp-sb .bat { width: 6.8cqw; height: 3.3cqw; border-radius: 1cqw; box-shadow: inset 0 0 0 0.3cqw #8a8a8a; position: relative; }
.sp-sb .bat::after { content: ''; position: absolute; left: 0.6cqw; top: 0.6cqw; bottom: 0.6cqw; width: 4.6cqw; border-radius: 0.5cqw; background: #fff; }
.sp-island { position: absolute; top: 3.1cqw; left: 50%; width: 27cqw; height: 7.9cqw; margin-left: -13.5cqw; border-radius: 4cqw; background: #000; }

/* ─── The section: words on one side, the picture on the other ──────────────── */
.w-pick { padding: clamp(72px, 9vw, 132px) 0; }
.pick-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 110px); align-items: center; }
.w-pick.flip .pick-copy { order: 2; }
.pick-copy .h2 { font-size: clamp(3.2rem, 6.6vw, 6.2rem); }
.struck { display: flex; flex-wrap: wrap; gap: 0 0.45em; font: 800 clamp(1.15rem, 1.8vw, 1.6rem)/1 var(--display); text-transform: uppercase; color: #3a404a; margin-bottom: 14px; }
.struck s { text-decoration-thickness: 0.08em; text-decoration-color: #8b95a3; }

/* The three names. The one showing is white with its full stop and its line opened under it. */
.pick-tabs { display: grid; margin-top: clamp(28px, 4vw, 52px); border-top: 1px solid var(--hair); }
.pick-tab { all: unset; position: relative; cursor: pointer; display: grid; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.pick-tab b { font: 800 clamp(1.7rem, 2.5vw, 2.3rem)/1 var(--display); text-transform: uppercase; color: #474e59; transition: color 0.3s; }
.pick-tab b i { font-style: normal; color: var(--blaze); opacity: 0; transition: opacity 0.3s; }
.pick-tab:hover b { color: #8b95a3; }
.pick-tab[aria-selected="true"] b { color: var(--ink); }
.pick-tab[aria-selected="true"] b i { opacity: 1; }
.pick-tab > span { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); color: var(--soft); font-size: 1.05rem; }
.pick-tab > span > span { overflow: hidden; }
.pick-tab[aria-selected="true"] > span { grid-template-rows: 1fr; }
.pick-tab[aria-selected="true"] > span > span { padding-top: 8px; }
.pick-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 6px; }
/* While it turns by itself, a thin line fills under the one showing; its end turns to the next. */
.pick-tab::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--soft); }
.pick-turning .pick-tab[aria-selected="true"]::after { animation: pick-fill 5s linear forwards; }
.pick-paused .pick-tab::after { animation-play-state: paused !important; }
@keyframes pick-fill { to { width: 100%; } }
.pick-note { margin-top: 22px; color: var(--muted); font-size: 1rem; max-width: 34ch; }

/* The picture: every pane in one cell, so the section never changes height as they turn. */
.pick-view { display: grid; }
.pick-pane { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; opacity: 0; visibility: hidden; transition: opacity 0.45s, visibility 0.45s; }
.pick-pane.on { opacity: 1; visibility: visible; }
.pick-frame { width: 100%; height: clamp(440px, 44vw, 600px); overflow: hidden; display: grid; justify-items: center; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.pick-frame .sp-wrap { width: min(310px, 76%); }

/* ─── Run the business: the coach's computer, with a client's phone over its corner ─── */
/* Real screens from the app with made-up clients (2026-10-06, the user: "maybe combination between
   computer and phone?"): the picture takes the wide column and the four names the narrow one. */
.w-run .pick-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); }
.w-run .pick-copy .h2 { font-size: clamp(3rem, 5.4vw, 5.4rem); }
.w-run .pick-view { padding-right: 3%; }
.duo { position: relative; width: 100%; padding-bottom: 9%; }
.duo-pc { border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 80px rgba(0, 0, 0, 0.6); }
.duo-bar { height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 11px; background: #16181d; }
.duo-bar i { width: 7px; height: 7px; border-radius: 50%; background: #3a3f49; }
.duo-pc img { display: block; width: 100%; height: auto; }
.duo-ph { position: absolute; right: -3%; bottom: 0; width: 27%; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6)); }
/* The programme builder keeps its numbers down the right: there the phone sits on the left. */
.duo.left .duo-ph { right: auto; left: -3%; }

/* ─── Narrower screens: the words, then the picture ─────────────────────────── */
@media (max-width: 900px) {
  .pick-grid { grid-template-columns: minmax(0, 1fr); }
  .w-pick.flip .pick-copy { order: 0; }
  .pick-tab { padding: 15px 0; }
  .pick-frame { height: clamp(420px, 110vw, 520px); }
  .pick-frame .sp-wrap { width: min(280px, 72%); }
  .w-run .pick-grid { grid-template-columns: minmax(0, 1fr); }
  .w-run .pick-view { padding-right: 0; }
  .duo-ph { right: 0; width: 30%; }
  .duo.left .duo-ph { left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pick-pane, .pick-tab > span { transition: none; } }

/* ─── The two themes (2026-10-14): AI that thinks ahead, and no more scattered apps ─── */
.theme-lead { margin-top: 18px; color: var(--soft); font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.w-theme .pick-tabs { margin-top: clamp(22px, 3vw, 36px); }
/* Who might leave: a message from Oracle as its chat draws it (components/OracleChat.tsx and
   OracleText): its face and name at the top, the answer first, then a bullet for each client with
   their name in bold, the question last, and the Ask Oracle box under it. The bullets come in one
   after another when the name is picked. */
.omsg { width: 100%; max-width: 620px; justify-self: center; border-radius: 24px; background: var(--row); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 30px 80px rgba(0, 0, 0, 0.6); overflow: hidden; }
.omsg-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--hair); }
.omsg-head b { display: block; font: 800 22px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.omsg-head em { display: block; margin-top: 4px; font: 500 13px/1 var(--body); font-style: normal; color: var(--muted); }
.omsg-o, .omsg-face { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #0f1115; box-shadow: 0 0 0 2px var(--control2); font-family: var(--display); font-weight: 800; color: var(--ink); line-height: 1; }
.omsg-o { width: 44px; height: 44px; font-size: 21px; }
.omsg-face { width: 30px; height: 30px; font-size: 15px; margin-top: 1px; }
.omsg-o i, .omsg-face i { font-style: normal; color: var(--blaze); }
.omsg-chat { padding: 22px 20px 8px; }
.omsg-said { display: flex; align-items: flex-start; gap: 12px; }
.omsg-text { min-width: 0; font: 500 16px/1.5 var(--body); color: var(--ink); }
.omsg-text ul { display: grid; gap: 7px; margin: 14px 0; }
.omsg-text li { position: relative; padding-left: 18px; color: var(--soft); }
.omsg-text li::before { content: ''; position: absolute; left: 3px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.omsg-text li b { font-weight: 700; color: var(--ink); }
.omsg-box { display: flex; align-items: center; justify-content: space-between; margin: 14px 16px 16px; padding: 14px 16px; border-radius: 16px; background: var(--control); font: 500 15px/1 var(--body); color: var(--muted); }
.omsg-box b { font: 800 14px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.js .pick-pane.on .omsg-text li, .js .pick-pane.on .omsg-text p[style] { animation: omsg-in 0.5s var(--ease) both; animation-delay: calc(0.25s + var(--k) * 0.18s); }
@keyframes omsg-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 520px) { .omsg-chat { padding: 18px 14px 6px; } .omsg-text { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .js .pick-pane.on .omsg-text li, .js .pick-pane.on .omsg-text p[style] { animation: none; } }