/*
 * The three "adventurous" pieces (26 Sep): tilted coaching cards that straighten
 * as they pass, a Teams call that plays itself, and a film shown like a case study.
 */

/* ── Tilted cards, scroll-driven ─────────────────────────────────────── */
.tilt { position: relative; height: 260vh; background: var(--ink); border-radius: 56px; margin: 0 12px; }
.tilt .stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.tilt .head { text-align: center; color: #fff; padding: 0 24px; }
.tilt .head .kicker { color: rgb(255 255 255 / .65); }
.tilt .head h2 { color: #fff; }
.tilt .head p { margin: 16px auto 0; max-width: 620px; font-size: 18px; color: rgb(255 255 255 / .75); }
.tilt .track { display: flex; gap: 40px; padding: 56px 0 0; will-change: transform; }
.tcard { flex: 0 0 min(620px, 78vw); height: 360px; border-radius: 34px; padding: 30px 32px; display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; color: var(--ink); transform-origin: center; will-change: transform; }
.tcard.c1 { background: #F28C5B; } .tcard.c2 { background: #3CCB8F; } .tcard.c3 { background: #C9E8FF; } .tcard.c4 { background: var(--mint); }
.tcard .who { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; }
.tcard .who i { font-style: normal; width: 40px; height: 40px; border-radius: 50%; background: rgb(0 0 0 / .12); display: grid; place-items: center; font-size: 14px; }
.tcard .who small { display: block; font-weight: 500; font-size: 14px; opacity: .7; }
.tcard .big { font-family: var(--serif); font-size: 92px; line-height: .9; letter-spacing: -.02em; }
.tcard .big small { display: block; font-family: var(--sans); font-size: 15px; letter-spacing: 0; margin-top: 10px; opacity: .75; }
.tcard .side { align-self: end; text-align: right; }
.tcard .side b { display: block; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; }
.tcard .side span { font-size: 14px; opacity: .75; }
.tcard .coach { grid-column: 1 / -1; align-self: end; font-family: var(--serif); font-size: 27px; line-height: 1.15; }
.tcard .coach small { display: block; font-family: var(--sans); font-size: 14.5px; margin-top: 6px; opacity: .75; }
.tilt .foot { text-align: center; margin-top: 34px; font-size: 14px; color: rgb(255 255 255 / .55); }

/* ── A Teams call that plays itself ─────────────────────────────────── */
.play-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.play-head p { font-size: 19px; line-height: 1.5; }
.play { position: relative; margin-top: 44px; height: 460px; border-radius: 30px; overflow: hidden; background: var(--beige) radial-gradient(rgb(27 27 26 / .13) 1px, transparent 1.3px) 0 0 / 18px 18px; }

.play > * { position: absolute; z-index: 1; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.face { width: 108px; height: 96px; border-radius: 16px; display: grid; place-items: center; font: 600 30px var(--serif); color: #fff; border: 3px solid rgb(255 255 255 / .85); opacity: 0; transform: scale(.85); }
.face span { position: absolute; left: 8px; bottom: 7px; font: 600 12px var(--sans); background: rgb(0 0 0 / .55); padding: 2px 8px; border-radius: 999px; }
.face.f1 { left: 9%; top: 18%; background: #7A5A45; } .face.f2 { left: 30%; top: 8%; background: #4F6B5E; } .face.f3 { left: 20%; top: 58%; background: #5B5476; }
.play.s1 .face, .play.s2 .face, .play.s3 .face, .play.s4 .face { opacity: 1; transform: none; }
.face.f2 { transition-delay: .15s; } .face.f3 { transition-delay: .3s; }
.play .talk { left: 34%; bottom: 36px; height: 50px; padding: 0 18px; border-radius: 999px; background: var(--ink); display: flex; align-items: center; gap: 4px; opacity: 0; }
.play .talk i { width: 3.5px; height: 16px; border-radius: 3px; background: #3CCB8F; animation: talk 1s ease-in-out infinite; }
.play .talk i:nth-child(2n) { height: 26px; animation-delay: .2s; }
.play.s1 .talk, .play.s2 .talk { opacity: 1; }
.notes { right: 3%; top: 6%; width: min(440px, 44%); height: 88%; background: #fff; border-radius: 18px; padding: 18px 20px; color: var(--ink); font-size: 14.5px; line-height: 1.45; opacity: 0; transform: translateX(30px); display: flex; flex-direction: column; }
.play.s1 .notes, .play.s2 .notes, .play.s3 .notes, .play.s4 .notes { opacity: 1; transform: none; }
.notes .dots { display: flex; gap: 6px; } .notes .dots i { width: 10px; height: 10px; border-radius: 50%; background: #E5E2CF; }
.notes h4 { margin: 12px 0 8px; font: 400 24px var(--serif); }
.notes .tabs { display: flex; gap: 18px; font-size: 13.5px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.notes .tabs b { color: var(--ink); font-weight: 600; }
.notes .pane { position: relative; flex: 1; margin-top: 12px; }
.notes .pane > div { position: absolute; inset: 0; transition: opacity .4s ease; }
.lines .l { opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; margin-bottom: 10px; }
.lines .l small { display: block; font-size: 12px; color: var(--muted); }
.lines .l span { display: inline-block; background: var(--cream-2); padding: 5px 10px; border-radius: 8px; }
.play.s1 .l1, .play.s2 .l1, .play.s2 .l2, .play.s2 .l3 { opacity: 1; transform: none; }
.play.s2 .l2 { transition-delay: .5s; } .play.s2 .l3 { transition-delay: 1s; }
.summary { opacity: 0; }
.play.s3 .lines, .play.s4 .lines { opacity: 0; }
.play.s3 .summary, .play.s4 .summary { opacity: 1; }
.summary ul { margin: 6px 0 0; padding-left: 18px; } .summary li { margin-bottom: 6px; }
.summary .k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.saved { left: 50%; bottom: 30px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 18px; font-weight: 600; font-size: 15.5px; opacity: 0; white-space: nowrap; }
.saved b { color: #3CCB8F; }
.play.s4 .saved { opacity: 1; transform: translate(-50%, 0); }
.play-cap { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }

/* ── The film, told like a case study ───────────────────────────────── */
.case { text-align: center; }
.case .grid { display: grid; grid-template-columns: 1fr minmax(0, 440px) 1fr; gap: 40px; align-items: center; margin-top: 56px; }
.case .stat b { display: block; font: 400 clamp(52px, 6vw, 78px)/1 var(--serif); color: #fff; }
.case .stat span { display: block; margin-top: 10px; font-size: 16px; color: rgb(255 255 255 / .72); }
.case .vid { all: unset; box-sizing: border-box; cursor: pointer; display: block; position: relative; aspect-ratio: 1 / 1; border-radius: 30px; overflow: hidden; background: #111; }
.case .vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.case .vid:hover img { transform: scale(1.04); }
.case .vid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231B1B1A'/%3E%3C/svg%3E") 56% 50% / 32px no-repeat; }
.case .vid:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
.case blockquote { margin: 60px auto 0; max-width: 820px; font: 400 clamp(26px, 3vw, 36px)/1.25 var(--serif); color: #fff; }
.case .fine { margin-top: 18px; font-size: 14px; color: rgb(255 255 255 / .55); }
.case .more-films { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.case .more-films button { all: unset; cursor: pointer; font-weight: 600; font-size: 16px; color: #fff; border: 1.5px solid rgb(255 255 255 / .4); border-radius: 12px; padding: 12px 18px; }
.case .more-films button:hover { border-color: #fff; }

@media (max-width: 960px) {
  .tilt { height: auto; border-radius: 36px; margin: 0 8px; padding: 80px 0; }
  .tilt .stick { position: static; height: auto; }
  .tilt .track { overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px 20px 10px; gap: 16px; transform: none !important; }
  .tcard { scroll-snap-align: center; height: 330px; transform: none !important; flex-basis: 84vw; }
  .tcard .big { font-size: 72px; }
  .play-head { grid-template-columns: 1fr; gap: 18px; }
  .play { height: 520px; }
  .notes { left: 5%; right: 5%; width: auto; top: auto; bottom: 5%; height: 62%; }
  .face { width: 78px; height: 70px; font-size: 22px; }
  .face.f1 { left: 6%; top: 6%; } .face.f2 { left: 38%; top: 4%; } .face.f3 { left: 70%; top: 8%; }
  .play .talk { left: 50%; transform: translateX(-50%); bottom: auto; top: 26%; }
  .saved { bottom: 16px; white-space: normal; width: 86%; text-align: center; }
  .case .grid { grid-template-columns: 1fr 1fr; }
  .case .vid { grid-column: 1 / -1; grid-row: 1; max-width: 420px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .tcard { transform: none !important; } .play .talk i { animation: none; } }

#meeting { padding: 130px 0 60px; }
#manager { padding-top: 90px; }
@media (max-width: 560px) {
  .case .grid { gap: 28px 14px; }
  .case .stat b { font-size: 40px; }
  .case .stat span { font-size: 14.5px; }
}
@media (max-width: 960px) {
  .face span { font-size: 10.5px; padding: 1px 6px; left: 5px; right: 5px; bottom: 5px; text-align: center; white-space: nowrap; overflow: hidden; }
  .face { align-content: start; padding-top: 10px; }
}

/* ── Generic auto scene: children with data-at="n" appear at beat n ─── */
.auto { position: relative; border-radius: 30px; overflow: hidden; background: var(--beige) radial-gradient(rgb(27 27 26 / .13) 1px, transparent 1.3px) 0 0 / 18px 18px; padding: 34px; }
.auto > * { position: relative; }
.auto [data-at] { opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.auto [data-at].on { opacity: 1; transform: none; }
.doc { background: #fff; color: var(--ink); border-radius: 18px; padding: 22px 24px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.doc h4 { margin: 0; font: 400 26px var(--serif); }
.doc .k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.doc .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 18px; }
.doc .tiles div { background: var(--cream-2); border-radius: 12px; padding: 12px 14px; }
.doc .tiles b { display: block; font: 400 30px/1.1 var(--serif); margin-top: 4px; }
.doc .tiles .hot b { color: #B4541C; }
.doc .row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.doc .row span:nth-child(2) { font-weight: 650; } .doc .row span:nth-child(3) { color: var(--muted); min-width: 118px; text-align: right; }
.doc .quiet { margin-top: 12px; font-size: 14.5px; background: #FCEBDD; color: #8A3C12; border-radius: 10px; padding: 9px 12px; }
.doc p.line { font-size: 15px; line-height: 1.5; margin: 10px 0 0; }
.doc .cite { font-size: 12.5px; color: var(--green-2); background: var(--cream-2); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.toast { display: inline-flex; margin-top: 14px; background: var(--ink); color: #fff; border-radius: 14px; padding: 11px 16px; font-weight: 600; font-size: 15px; }
.toast b { color: #3CCB8F; margin-right: 6px; }
.sources { display: flex; flex-direction: column; gap: 10px; }
.src { background: #fff; box-shadow: 0 12px 26px -18px rgb(0 0 0 / .45); color: var(--ink); border-radius: 14px; padding: 10px 14px; font-size: 14px; line-height: 1.4; }
.src small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mem { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: center; }
.mem .arrow { display: none; }
.rep-scene { max-width: 560px; margin-left: auto; }
@media (max-width: 960px) {
  .auto { padding: 18px; }
  .mem { grid-template-columns: 1fr; }
  .doc .tiles b { font-size: 22px; }
  .doc .row { grid-template-columns: 1fr auto; } .doc .row span:nth-child(3) { display: none; }
  .rep-scene { margin: 0 auto; }
}

/* Braver: things arrive at an angle and settle; a ghost figure drifts behind. */
.auto .ghost { position: absolute; right: -2%; bottom: -6%; font: italic 400 clamp(120px, 16vw, 230px)/1 var(--serif); color: rgb(10 76 65 / .07); white-space: nowrap; pointer-events: none; animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-6%); } }
.auto [data-at].tossL { transform: translate(-60px, 20px) rotate(-9deg); }
.auto [data-at].tossR { transform: translate(60px, 20px) rotate(8deg); }
.auto [data-at].tossL.on { transform: rotate(-2.5deg); }
.auto [data-at].tossR.on { transform: rotate(2deg); }
.auto .doc[data-at] { transform: translateY(24px) rotate(-3deg) scale(.96); transition-duration: .8s; }
.auto .doc[data-at].on { transform: rotate(-1deg); }
.auto .doc:hover { transform: none; }
@media (prefers-reduced-motion: reduce) { .auto .ghost { animation: none; } }

.two > * { min-width: 0; }
.rep-scene { width: 100%; }
@media (max-width: 560px) { .doc { padding: 16px; } .doc .tiles { gap: 6px; } .doc .tiles div { padding: 10px; } .doc .tiles b { font-size: 19px; } .doc .k { font-size: 10.5px; letter-spacing: .08em; } }

/* ── The day carousel: a sideways timeline driven by scroll ─────────── */
.tilt.day { background: var(--ink); height: 480vh; }
.tilt.day .track { gap: 34px; align-items: stretch; }
.slide { flex: 0 0 min(560px, 80vw); height: 440px; border-radius: 34px; background: var(--cream); color: var(--ink); padding: 30px 32px; display: flex; flex-direction: column; transform-origin: center; will-change: transform; overflow: hidden; }
.slide .time { font: italic 400 64px/1 var(--serif); color: var(--green-2); }
.slide h3 { margin-top: 10px; font: 400 32px/1.1 var(--serif); }
.slide p { margin-top: 10px; font-size: 16.5px; color: var(--muted); }
.slide .pro { display: inline-block; margin-left: 8px; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; background: var(--mint); border-radius: 999px; padding: 3px 9px; color: var(--ink); }
.slide .pic { margin-top: auto; background: var(--ink); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 8px; color: #fff; font-size: 14.5px; line-height: 1.4; }
.slide .pic .b { align-self: flex-start; background: #2F2F2B; border-radius: 14px; padding: 8px 12px; max-width: 92%; }
.slide .pic .b.me { align-self: flex-end; background: #1F5E4F; }
.slide .pic .ok { color: #3CCB8F; font-weight: 600; }
.slide .pic .warn { color: #F2A27A; font-weight: 600; }
.slide .pic .faces { display: flex; gap: 8px; }
.slide .pic .faces i { font-style: normal; width: 44px; height: 40px; border-radius: 10px; display: grid; place-items: center; font: 400 17px var(--serif); background: #4F6B5E; }
.slide .pic .faces i:nth-child(2) { background: #7A5A45; } .slide .pic .faces i:nth-child(3) { background: #5B5476; }
.slide .pic .wave { display: inline-flex; gap: 3px; vertical-align: middle; margin: 0 8px; }
.slide .pic .wave b { width: 3px; height: 14px; background: #fff; border-radius: 2px; } .slide .pic .wave b:nth-child(2n) { height: 22px; }
.slide.end { background: var(--mint); justify-content: center; }
.slide.end .time { color: var(--ink); }
.day-rail { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.day-rail span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .45); padding: 6px 10px; border-radius: 999px; transition: background .3s, color .3s; }
.day-rail span.on { background: rgb(255 255 255 / .14); color: #fff; }
@media (max-width: 960px) {
  .slide { scroll-snap-align: center; flex-basis: 84vw; height: 470px; transform: none !important; }
  .slide .time { font-size: 50px; } .slide h3 { font-size: 27px; }
  .day-rail { display: none; }
}
.slide.end .time { font-size: 190px; line-height: .8; font-style: italic; }
.slide.end h3 { font-size: 40px; }

/* ── The deck: cards start as a messy pile and deal out into a row as you scroll ── */
.deckwrap { height: 230vh; padding: 0 !important; }
.deckwrap > .wrap { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 90px; padding-bottom: 40px; }
.deck { position: relative; height: 400px; margin-top: 40px !important; display: block !important; }
.deck > .card { position: absolute; left: 50%; top: 0; width: var(--cw, 320px); min-height: 330px; margin-left: calc(var(--cw, 320px) / -2); will-change: transform; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .45); display: flex; flex-direction: column; }
.deck > .card:nth-child(4n+1) { background: #FFFFFF; }
.deck > .card:nth-child(4n+2) { background: #C6F1D6; }
.deck > .card:nth-child(4n+3) { background: #F9D9C4; }
.deck > .card:nth-child(4n+4) { background: #D6E9F8; }
.deck > .card h3 { font: 400 30px/1.1 var(--serif); }
.deck > .card .n { font-size: 60px; opacity: .8; }
.deck > .card p { font-size: 16.5px; color: #3F3E38; }
.deck > .card a { margin-top: auto; }
@media (max-width: 960px) {
  .deckwrap { height: auto; padding: 80px 0 !important; }
  .deckwrap > .wrap { position: static; min-height: 0; padding-top: 0; }
  .deck { height: auto; display: grid !important; gap: 18px; }
  .deck > .card { position: static; width: auto; margin: 0; min-height: 0; transform: none !important; }
  .deck > .card:nth-child(odd) { rotate: -1.2deg; } .deck > .card:nth-child(even) { rotate: 1.2deg; }
}

/* ── Question marquee: what people actually ask, drifting past in two rows ── */
.asks { overflow: hidden; margin-top: 44px; display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.asks .row { display: flex; gap: 14px; width: max-content; animation: slide 46s linear infinite; }
.asks .row.rev { animation-direction: reverse; animation-duration: 52s; }
.asks span { white-space: nowrap; font: 400 26px var(--serif); padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 8px 20px -14px rgb(0 0 0 / .4); }
.asks .row.rev span { background: var(--ink); color: #fff; }
.asks span::before { content: "\201C"; color: var(--green-2); } .asks span::after { content: "\201D"; color: var(--green-2); }
.asks .row.rev span::before, .asks .row.rev span::after { color: #3CCB8F; }
@media (prefers-reduced-motion: reduce) { .asks .row { animation: none; } }

#ask .asks { margin-top: 24px; }
#ask .asks span { font-size: 21px; padding: 9px 18px; }
#ask .deck { margin-top: 28px !important; }
#ask .deck > .card { min-height: 280px; }
#ask > .wrap { padding-top: 70px; padding-bottom: 20px; }
#ask h2 { font-size: clamp(34px, 4vw, 52px); }
/* The small chat pictures in the day timeline match the light phone screens. */
.slide .pic { background: #F4F1E6; color: var(--ink); border: 1px solid rgb(27 27 26 / .08); }
.slide .pic .b { background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.slide .pic .b.me { background: #D9FDD3; }
.slide .pic .wave b { background: var(--ink); }
.slide .pic .ok { color: #0E7A55; } .slide .pic .warn { color: #B4541C; }
.slide .pic .faces i { color: #fff; }

/* ── The reel: three films as bold cards; a tilted window previews on hover ── */
.reel { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; margin-top: 48px; text-align: left; }
.rc { all: unset; box-sizing: border-box; position: relative; overflow: hidden; cursor: pointer; border-radius: 34px; padding: 30px 32px; display: flex; flex-direction: column; color: var(--ink); min-height: 290px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.rc:first-child { grid-row: 1 / span 2; min-height: 600px; }
.rc.peach { background: #F28C5B; } .rc.mint2 { background: #C6F1D6; } .rc.sky { background: #C9E8FF; }
.rc:hover { transform: translateY(-4px) rotate(-.4deg); }
.rc:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.rc .big { font: 400 clamp(64px, 7vw, 120px)/.9 var(--serif); letter-spacing: -.02em; position: relative; z-index: 2; }
.rc:not(:first-child) .big { font-size: clamp(52px, 4.6vw, 76px); }
.rc .bigl { margin-top: 10px; font-size: 16px; max-width: 260px; position: relative; z-index: 2; }
.rc .title { margin-top: auto; font: italic 400 clamp(34px, 3.4vw, 50px)/1 var(--serif); position: relative; z-index: 2; }
.rc .sub { margin-top: 6px; font-size: 16px; opacity: .75; position: relative; z-index: 2; }
.rc .go { position: absolute; right: 26px; bottom: 26px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 16px 10px 12px; font: 600 15px var(--sans); }
.rc .go::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231B1B1A'/%3E%3C/svg%3E") 56% 50% / 16px no-repeat; }
.rc .win { position: absolute; right: -40px; top: 34px; width: 62%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; transform: rotate(6deg); box-shadow: 0 30px 50px -24px rgb(0 0 0 / .5); border: 5px solid rgb(255 255 255 / .85); background: #111; transition: transform .5s cubic-bezier(.2,.7,.2,1); z-index: 1; }
.rc:first-child .win { width: 78%; right: -60px; top: auto; bottom: 150px; transform: rotate(-5deg); }
.rc:hover .win { transform: rotate(0) scale(1.06); }
.rc .win img, .rc .win video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc .win video { opacity: 0; transition: opacity .4s; } .rc.playing .win video { opacity: 1; }
@media (max-width: 960px) {
  .reel { grid-template-columns: 1fr; grid-template-rows: none; }
  .rc, .rc:first-child { grid-row: auto; min-height: 340px; }
  .rc .win, .rc:first-child .win { width: 70%; right: -30px; top: 24px; bottom: auto; transform: rotate(6deg); }
  .rc .big, .rc:not(:first-child) .big { font-size: 60px; margin-top: 150px; }
}
.rc:not(:first-child) .win { width: 46%; right: -24px; top: 26px; }
.rc:not(:first-child) .bigl { max-width: 48%; }
@media (max-width: 960px) { .rc:not(:first-child) .win { width: 70%; } .rc:not(:first-child) .bigl { max-width: none; } }
@media (max-width: 960px) { .rc .go { position: static; align-self: flex-start; margin-top: 16px; } }

/* ── About: the fixes that failed, as notes that get crossed out ─────── */
.notes-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 44px 0 10px; }
.sticky { position: relative; background: #FFF3B8; color: var(--ink); border-radius: 6px 6px 18px 6px; padding: 26px 24px 30px; box-shadow: 0 22px 34px -22px rgb(0 0 0 / .45); font: 400 27px/1.15 var(--serif); }
.sticky:nth-child(1) { transform: rotate(-3deg); } .sticky:nth-child(2) { transform: rotate(2deg); background: #FFE2CC; } .sticky:nth-child(3) { transform: rotate(-1.5deg); background: #DDF0FF; }
.sticky small { display: block; margin-top: 14px; font: 500 14.5px var(--sans); color: #6F6D63; opacity: 0; transition: opacity .4s ease .9s; }
.sticky::after { content: ""; position: absolute; left: 14px; right: 14px; top: 44%; height: 4px; border-radius: 3px; background: #C0392B; transform: scaleX(0) rotate(-4deg); transform-origin: left center; transition: transform .7s cubic-bezier(.6,.1,.3,1) .35s; }
.sticky.struck::after { transform: scaleX(1) rotate(-4deg); }
.sticky.struck small { opacity: 1; }
.sticky:nth-child(2)::after, .sticky:nth-child(2) small { transition-delay: .75s, 1.3s; }
.sticky:nth-child(3)::after, .sticky:nth-child(3) small { transition-delay: 1.15s, 1.7s; }
.asked { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.asked .card { border-radius: 30px; padding: 32px 32px 34px; }
.asked .card:first-child { background: #fff; transform: rotate(-1deg); }
.asked .card:last-child { background: #F28C5B; transform: rotate(1deg); }
.asked .card h3 { font: 400 30px/1.1 var(--serif); }
.asked .card:last-child .ticks li { color: var(--ink); }
.asked .card:last-child .ticks li::before { background-color: #fff; }
@media (max-width: 960px) { .notes-row, .asked { grid-template-columns: 1fr; } .sticky { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .sticky::after { transform: scaleX(1) rotate(-4deg); transition: none; } .sticky small { opacity: 1; } }

/* ── About: the room, as a quote card and four small cards ──────────── */
.room { display: grid; grid-template-columns: 1.05fr 1fr; gap: 22px; margin-top: 8px; }
.room .quote { background: var(--ink); color: #fff; border-radius: 30px; padding: 40px 40px 36px; transform: rotate(-1deg); position: relative; }
.room .quote::before { content: "\201C"; position: absolute; top: -18px; left: 26px; font: 400 150px/1 var(--serif); color: #3CCB8F; }
.room .quote p { margin-top: 38px; font: 400 clamp(23px, 2.2vw, 29px)/1.35 var(--serif); }
.room .quote small { display: block; margin-top: 18px; font-size: 14.5px; color: rgb(255 255 255 / .6); }
.room .bits { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.room .bit { border-radius: 22px; padding: 22px 22px 24px; }
.room .bit:nth-child(1) { background: #FFF3B8; transform: rotate(1.2deg); }
.room .bit:nth-child(2) { background: #C6F1D6; transform: rotate(-1deg); }
.room .bit:nth-child(3) { background: #D6E9F8; transform: rotate(-1.4deg); }
.room .bit:nth-child(4) { background: #F9D9C4; transform: rotate(1deg); }
.room .bit b { display: block; font: 400 25px/1.1 var(--serif); }
.room .bit span { display: block; margin-top: 8px; font-size: 15.5px; color: #3F3E38; }
.room-end { margin-top: 22px; background: var(--green); color: #fff; border-radius: 22px; padding: 22px 28px; font: 400 clamp(21px, 2vw, 26px)/1.3 var(--serif); }
@media (max-width: 960px) { .room, .room .bits { grid-template-columns: 1fr; } .room .quote { transform: none; } }

#the-other-way > .wrap { padding-top: 96px; }
#the-other-way h2 { font-size: clamp(34px, 3.4vw, 46px); max-width: 900px !important; }
#the-other-way .lede p { font-size: 17px; }
#the-other-way .deck > .card { min-height: 0; padding: 24px 24px 26px; }
#the-other-way .deck > .card .n { font-size: 44px; margin-bottom: 12px; }
#the-other-way .deck > .card h3 { font-size: 25px; }
#the-other-way .deck > .card p { font-size: 15px; }
#the-other-way > .wrap { padding-top: 84px; padding-bottom: 20px; }
#the-other-way .deck { margin-top: 26px !important; }
#the-other-way .note { margin-top: 6px; }
.big-line { font: 400 clamp(26px, 2.6vw, 36px)/1.25 var(--serif) !important; color: var(--ink) !important; max-width: 980px !important; margin-top: 18px !important; }
.big-line em { color: var(--green-2); }

/* Phone fixes (26 Sep, from Bob's iPhone). */
@media (max-width: 960px) {
  .steps .stick { padding: 80px 20px !important; }
  .tilt.day { height: auto !important; }
  .tilt .track { padding-left: 20px; padding-right: 20px; }
  .play { height: 660px; }
  .notes { height: 66%; }
  .tilt .head::after { content: "Swipe \2192"; display: block; margin-top: 14px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
}

/* ── Home: both halves of the headline, side by side ─────────────────── */
.halves { padding: 30px 0 90px; }
.halves .pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.half { border-radius: 30px; padding: 28px 28px 30px; }
.half.rep { background: var(--mint); }
.half.mgr { background: var(--ink); color: #fff; }
.half .who2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.half h3 { margin-top: 6px; font: 400 34px/1.05 var(--serif); }
.half .chat { margin-top: 18px; background: #F4F1E6; border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); font-size: 15.5px; line-height: 1.45; }
.half .chat .b { background: #fff; border-radius: 14px; padding: 9px 13px; max-width: 92%; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.half .chat .b.me { align-self: flex-end; background: #D9FDD3; }
.half .chat .ok { color: #0E7A55; font-weight: 600; }
.half .chat .warn { color: #B4541C; font-weight: 600; }
.rules { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rules div { background: #fff; border-radius: 20px; padding: 18px 20px; font-size: 15.5px; color: var(--muted); border: 1px solid var(--line); }
.rules b { display: block; font: 400 22px/1.1 var(--serif); color: var(--ink); margin-bottom: 6px; }
.bigfilm { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 30px; margin-top: 26px; width: 100%; background: var(--ink); color: #fff; border-radius: 30px; overflow: hidden; }
.bigfilm .pic { position: relative; aspect-ratio: 16 / 9; }
.bigfilm .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bigfilm .pic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231B1B1A'/%3E%3C/svg%3E") 56% 50% / 36px no-repeat; border: 2px solid var(--ink); transition: transform .25s; }
.bigfilm:hover .pic::after { transform: scale(1.08); }
.bigfilm .txt { padding: 30px 34px 30px 0; }
.bigfilm .txt b { display: block; font: 400 clamp(30px, 3vw, 42px)/1.05 var(--serif); }
.bigfilm .txt span { display: block; margin-top: 10px; font-size: 16.5px; color: rgb(255 255 255 / .72); }
.bigfilm:focus-visible { outline: 3px solid var(--mint); outline-offset: 4px; }
.outcome { text-align: center; padding: 120px 0 10px; }
.outcome .num { font: italic 400 22px var(--serif); color: var(--green-2); }
.outcome h2 { margin-top: 6px; }
.outcome p { margin: 12px auto 0; max-width: 560px; color: var(--muted); font-size: 18px; }
.trial-note { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.ink .trial-note, .panel .trial-note, section.ink.close .trial-note { color: rgb(255 255 255 / .7); }
/* The page tops kept the "ink" name when they went cream: the line stays grey there. */
.hero.ink .trial-note { color: var(--muted); }
@media (max-width: 960px) {
  .halves .pair2, .rules { grid-template-columns: 1fr; }
  .bigfilm { grid-template-columns: 1fr; gap: 0; }
  .bigfilm .txt { padding: 22px 24px 26px; }
  .outcome { padding-top: 80px; }
}

/* The big film card, second version: green, text left, a tilted window right. */
.bigfilm { grid-template-columns: 1fr 1.15fr; gap: 0; background: var(--green); overflow: hidden; position: relative; min-height: 360px; }
.bigfilm .txt { padding: 40px 20px 40px 44px; position: relative; z-index: 2; }
.bigfilm .k2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .65); }
.bigfilm .txt b { margin-top: 12px; font-size: clamp(34px, 3.6vw, 52px); }
.bigfilm .txt b em { color: var(--mint); }
.bigfilm .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bigfilm .chips i { font-style: normal; font-size: 14px; border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; padding: 6px 12px; color: rgb(255 255 255 / .85); }
.bigfilm .go2 { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; background: var(--mint); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; padding: 12px 18px 12px 12px; font: 600 16px var(--sans); }
.bigfilm .go2::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23C6F1D6'/%3E%3C/svg%3E") 56% 50% / 15px no-repeat; }
.bigfilm .win2 { position: relative; display: block; align-self: center; margin: 30px -40px 30px 0; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 6px solid rgb(255 255 255 / .9); transform: rotate(3deg); box-shadow: 0 40px 60px -30px rgb(0 0 0 / .6); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bigfilm:hover .win2 { transform: rotate(0) scale(1.03); }
.bigfilm .win2 img, .bigfilm .win2 video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bigfilm .win2 video { opacity: 0; transition: opacity .4s; } .bigfilm.playing .win2 video { opacity: 1; }
.bigfilm .pic, .bigfilm .pic::after { display: none; }
@media (max-width: 960px) {
  .bigfilm { grid-template-columns: 1fr; }
  .bigfilm .txt { padding: 28px 24px 8px; }
  .bigfilm .win2 { margin: 18px 18px 26px; transform: rotate(-2deg); }
}
.bigfilm .txt .chips { display: flex; margin-top: 18px; font-size: 14px; }
.bigfilm .txt .chips i { display: inline-block; }
.bigfilm .txt .go2 { display: inline-flex; width: auto; margin-top: 24px; color: var(--ink); font: 600 16px var(--sans); }
.bigfilm .txt .k2 { display: block; margin-top: 0; font-size: 13px; }

/* Managers: the team's week as dealt cards, one per rep. */
.week-ask { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: start; margin-top: 18px; max-width: 900px; }
.week-ask .q, .week-ask .a { border-radius: 16px; padding: 12px 16px; font-size: 16px; line-height: 1.45; }
.week-ask .q { grid-column: 1 / -1; justify-self: end; background: #D9FDD3; }
.week-ask .a { grid-column: 1 / -1; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.mtg { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 7px; }
.mtg li { display: grid; grid-template-columns: 74px 1fr; gap: 6px; font-size: 14.5px; line-height: 1.3; }
.mtg li span { color: #6F6D63; }
.mtg li i { font-style: normal; display: inline-block; margin-left: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: rgb(27 27 26 / .08); }
.mtg li i.ip { background: var(--ink); color: #fff; }
.deck > .card .tot { font-size: 14px; color: #3F3E38; margin-top: 4px; }
#week { background: var(--ink); border-radius: 56px; margin: 0 12px; }
#week h2 { color: #fff; }
#week .eyebrow { color: rgb(255 255 255 / .65); }
@media (max-width: 960px) { #week { border-radius: 36px; margin: 0 8px; } }
.mtg li { grid-template-columns: 66px 1fr auto; align-items: center; font-size: 14px; }
.mtg li i { white-space: nowrap; margin-left: 0; font-size: 10.5px; padding: 2px 7px; }
#week > .wrap { padding-top: 84px; padding-bottom: 20px; }
#week h2 { font-size: clamp(34px, 3.6vw, 48px); }
#week .deck { margin-top: 26px !important; }
#week .deck > .card { padding: 24px 22px 24px; }
#week .deck > .card h3 { font-size: 26px; }
#week .deck > .card p { font-size: 15px; }
.mtg li span { white-space: nowrap; font-size: 13px; }
.mtg li { grid-template-columns: 72px 1fr auto; }

/* ── Ask on the page (Coaching, 29 Sep 2026): the portal's Ask panel ── */
#ask-page { padding: 120px 0; }
.askp { max-width: 540px; margin-left: auto; background: #fff; padding: 0; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgb(27 27 26 / .12); font-size: 15.5px; line-height: 1.45; }
.askp-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--line); }
.askp-head b { display: block; font-size: 19px; }
.askp-head span { color: var(--muted); font-size: 14.5px; }
.askp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 26px 6px; }
.askp-chips span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 14px; }
.askp-chips .pick { border-color: var(--green); background: var(--mint); }
.askp-q { align-self: flex-end; margin: 14px 26px 0; background: var(--green); color: #fff; border-radius: 16px 16px 4px 16px; padding: 10px 14px; max-width: 80%; }
.askp-a { margin: 12px 26px 0; background: var(--cream-2); border-radius: 16px 16px 16px 4px; padding: 14px 16px; }
.askp-a ul { margin: 8px 0 0; padding-left: 18px; }
.askp-a li { margin-top: 6px; }
.askp-a p { margin: 10px 0 0; }
.askp-box { display: flex; gap: 10px; align-items: center; margin: 18px 26px 22px; }
.askp-box span { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--muted); font-size: 14.5px; }
.askp-box i { font-style: normal; font-weight: 600; background: var(--green); color: #fff; border-radius: 10px; padding: 12px 18px; }
@media (max-width: 760px) {
  #ask-page { padding: 80px 0; }
  .askp { margin: 32px auto 0; }
  .askp-head, .askp-chips { padding-left: 18px; padding-right: 18px; }
  .askp-q, .askp-a, .askp-box { margin-left: 18px; margin-right: 18px; }
}
.askp-rep { margin-top: 110px; }
.askp.askp-left { margin-left: 0; margin-right: auto; }
@media (max-width: 760px) {
  .askp-rep { margin-top: 70px; }
  .askp-rep > div:last-child { order: -1; }
  .askp.askp-left { margin: 32px auto 0; }
}
.askp-stage { display: grid; }
.askp-c { grid-area: 1 / 1; display: flex; flex-direction: column; }
.askp .askp-c [data-at] { transition-duration: .6s; }

/* Eight cards will not deal into one row (Bob, 12 Oct 2026: "those cards are
   fucked ... so long and narrow"): Integrations' channels sit still, four to
   a row, in the deck's own colours. */
.cards.c4.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 40px; }
.tiles > .card { display: flex; flex-direction: column; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .45); }
.tiles > .card:nth-child(4n+1) { background: #FFFFFF; }
.tiles > .card:nth-child(4n+2) { background: #C6F1D6; }
.tiles > .card:nth-child(4n+3) { background: #F9D9C4; }
.tiles > .card:nth-child(4n+4) { background: #D6E9F8; }
.tiles > .card h3 { font: 400 27px/1.1 var(--serif); }
.tiles > .card p { font-size: 16px; color: #3F3E38; }
@media (max-width: 1100px) { .cards.c4.tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards.c4.tiles { grid-template-columns: 1fr; } }