/* Hallmark · macrostructure: people-led partner page · tone: calm authority · anchor hue: gold on cream/ink
   Sales Excellence Council (Website V2, Oct 16 night redesign; compacted Oct 18).
   Krish review Oct 19 cut it to four sections: cream hero > mist legends (2 x 2 cards, one-line credential,
   two-line bio, focus chips) > testimonials > close (one CTA block).
   Oct 19 (AK, four fixes): short hero with the four faces, "How the Council works" as three equal step cards (chart
   removed), the repeating dark slider replaced by two real member quotes, a single clean close (no link rows).
   Brand tokens only; Cabinet Grotesk + Manrope, nav/footer/buttons come from hai-brand.css and the shell. */

.sec {
  --gold: #FFC61E; --gold-3: #FFE8A5; --ink: #110A33; --lav: #DDD6FF;
  --mist: #F6F4FF; --cream: #FFF4D2; --slate: #5B6478; --line: #E6E8EF;
  --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 12px 32px -12px rgba(17,10,51,.22);
  --pad: clamp(56px, 6vw, 64px);
  overflow-x: clip;
}
body.sec { margin: 0; }
.sec *, .sec *::before, .sec *::after { box-sizing: border-box; }
:where(.sec) :is(h1, h2, h3, h4) { margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
:where(.sec) p { margin: 0; text-wrap: pretty; }
.sec-shell { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); text-align: center; }
.sec-narrow { max-width: 880px; }
.sec .sec-h2 { font: 700 clamp(27px, 3.4vw, 44px)/1.12 var(--disp); max-width: 860px; margin: 0 auto 16px; color: var(--ink); }
.sec-sub { max-width: 640px; margin: 0 auto; font-size: 17.5px; font-weight: 400; line-height: 1.6; color: var(--slate); }
.sec-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sec a { color: inherit; }
.sec-book__mail a, .sec-textlink { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(17,10,51,.3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.sec-book__mail a:hover, .sec-textlink:hover { text-decoration-color: var(--ink); }
.sec .hx-btn:active { transform: scale(.96); }

/* 1. Hero: cream, short. Headline + CTAs on the start side, the four legends (face, name, one focus word) as a 2 x 2 cluster on the end side. "defined it." gets a gold rule that draws once */
.sec-hero { background: var(--cream); padding: clamp(96px, 8vw, 104px) 0 clamp(40px, 4vw, 56px); }
.sec-hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 64px); align-items: center; text-align: start; }
.sec .sec-hero h1 { font: 700 clamp(34px, 4.4vw, 56px)/1.08 var(--disp); letter-spacing: -.025em; color: var(--ink); max-width: 620px; margin: 0; }
.sec-hero h1 span { display: block; }
.sec-hero mark { position: relative; background: none; color: inherit; white-space: nowrap; }
.sec-hero mark::after { content: ""; position: absolute; left: 0; right: .2em; bottom: .02em; height: .1em; border-radius: 99px; background: var(--gold); transform-origin: left; animation: sec-draw .8s var(--ease) .35s both; }
.sec-lead { max-width: 520px; margin: 20px 0 0; font-size: 18px; line-height: 1.6; color: var(--slate); }
.sec-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.sec .hx-btn-primary .hx-btn-ic svg { transition: transform .25s var(--ease); }
.sec .hx-btn-primary:hover .hx-btn-ic svg { transform: translateX(2px); }
.sec-textlink { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; color: var(--ink); }
@keyframes sec-draw { from { transform: scaleX(0); } }
.sec-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sec-who a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px; border-radius: 24px; background: #fff; box-shadow: var(--sh-sm); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.sec-who a:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.sec-who a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sec-who img { flex: none; display: block; width: 64px; height: 64px; border-radius: 16px; object-fit: cover; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.sec-who__t { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sec-who__t b { font: 700 16px/1.2 var(--disp); color: var(--ink); text-wrap: balance; }
.sec-who__chip { padding: 4px 10px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 12px/1.2 Manrope, Arial, sans-serif; }

/* 1b. How the Council works: three equal step cards */
.sec-how { background: #fff; padding: 56px 0; }
.sec .sec-how .sec-h2 { margin-bottom: 32px; }
.sec-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; text-align: start; }
.sec-steps > li { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 24px; background: var(--mist); }
.sec-steps__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lav); color: var(--ink); }
.sec .sec-steps h3 { margin-top: 16px; font: 700 20px/1.2 var(--disp); color: var(--ink); }
.sec-steps p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--slate); }

/* 2. The legends: four cards in a 2 x 2 grid. Photo left, name + one-line credential, a two-line bio, three focus chips. */
.sec-council { background: var(--mist); padding: 48px 0; }
.sec-council .sec-h2 { margin-bottom: 0; }
.sec-grid { list-style: none; max-width: 1080px; margin: 24px auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; text-align: start; }
.sec-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 20px; align-content: start; padding: 20px; border-radius: 24px; background: #fff; box-shadow: var(--sh-sm); scroll-margin-top: 96px; }
.sec-card img { grid-row: 1 / 4; width: 132px; height: 132px; object-fit: cover; border-radius: 16px; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.sec .sec-card h3 { display: flex; align-items: center; gap: 4px; font: 700 21px/1.15 var(--disp); color: var(--ink); }
.sec-card__role { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--slate); }
.sec-card__bio { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.sec-chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.sec-chips li { padding: 6px 12px; border-radius: 999px; background: var(--lav); color: var(--ink); font: 700 13px/1.2 Manrope, Arial, sans-serif; }
/* Fifth slot: same card, neutral avatar (no face, no name). Centred on its own row so the grid stays balanced. */
.sec-card--soon { grid-column: 1 / -1; justify-self: center; width: min(100%, 560px); }
.sec-card__avatar { grid-row: 1 / 4; width: 132px; height: 132px; display: grid; place-items: center; border-radius: 16px; background: var(--lav); color: var(--ink); outline: 1px solid rgba(0,0,0,.06); outline-offset: -1px; }
.sec-in { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--slate); transition: color .2s, background-color .2s; }
.sec-in:hover, .sec-in:focus-visible { color: var(--ink); background: var(--mist); }
.sec-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 3. Two member quotes (the only members with words of their own), face first */
.sec-say { background: #fff; padding: 56px 0; }
.sec .sec-say .sec-h2 { margin-bottom: 32px; }
/* Oct 20 (AK): the Council launch video, above the two quotes, with an obvious "Watch" call-out */
.sec-film { margin: 0 auto 32px; max-width: 760px; }
.sec-film__vid { border-radius: 24px; overflow: hidden; box-shadow: 0 12px 32px -18px rgba(17,10,51,.35); }
.sec-film figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; font: 700 16px/1.3 var(--disp); color: var(--ink); }
.sec-film__tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: #FFC61E; color: #110A33; font: 700 12px/1.4 var(--body, inherit); letter-spacing: .04em; text-transform: uppercase; }
.sec-say__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; text-align: start; }
.sec-quote { margin: 0; height: 100%; padding: 24px; border-radius: 24px; background: var(--mist); }
.sec-quote figcaption { display: flex; align-items: center; gap: 16px; }
.sec-quote img { flex: none; display: block; width: 56px; height: 56px; border-radius: 16px; object-fit: cover; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
.sec-quote figcaption > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sec-quote figcaption b { font: 700 18px/1.2 var(--disp); color: var(--ink); }
.sec-quote figcaption span span { font-size: 14px; line-height: 1.4; color: var(--slate); }
.sec-quote blockquote { margin: 20px 0 0; display: grid; gap: 12px; }
.sec-quote blockquote p { font-size: 17px; line-height: 1.55; color: var(--ink); }

/* 4. Close: one booking block, mist so it never reads as a second footer CTA above the ink footer */
.sec-book { background: var(--mist); padding: clamp(64px, 8vw, 96px) 0; }
.sec .sec-book h2 { font: 700 clamp(27px, 3.4vw, 44px)/1.12 var(--disp); color: var(--ink); max-width: 720px; margin: 0 auto 16px; }
.sec-book .sec-shell > p:first-of-type { max-width: 560px; margin: 0 auto 28px; font-size: 18px; line-height: 1.6; color: var(--slate); }
.sec-book__mail { margin-top: 16px; font-size: 14px; color: var(--slate); }
.sec-book__mail a { color: var(--ink); }

/* Responsive */
@media (max-width: 960px) {
  .sec-grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .sec-hero__in { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .sec .sec-hero h1 { margin: 0 auto; }
  .sec-lead { margin-inline: auto; }
  .sec-cta { justify-content: center; }
  .sec-who { max-width: 560px; margin: 0 auto; }
  .sec-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 16px; }
  .sec-steps > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .sec-steps__ic { grid-row: 1 / 3; }
  .sec .sec-steps h3 { margin-top: 0; }
  .sec-say__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 560px) {
  .sec-card { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto; column-gap: 14px; padding: 16px; border-radius: 20px; }
  .sec-card img, .sec-card__avatar { grid-row: 1; width: 72px; height: 72px; border-radius: 14px; }
  .sec-card__avatar svg { width: 36px; height: 36px; }
  .sec-card__head { align-self: center; }
  .sec-card__bio, .sec-chips { grid-column: 1 / -1; }
  .sec-chips li:nth-child(n+3) { display: none; }
  .sec-card__bio { margin-top: 14px; }
  .sec .sec-card h3 { font-size: 19px; }
  .sec-cta .hx-btn { width: 100%; justify-content: center; }
  .sec-who a { flex-direction: column; align-items: center; text-align: center; padding: 16px 8px; }
  .sec-who__t { align-items: center; }
  .sec-quote { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-hero mark::after { animation: none; }
  .sec-who a { transition: none; }
}
@media (max-width: 560px) { .sec-film figcaption { justify-content: flex-start; text-align: start; font-size: 15px; } }
/* Oct 20 (AK): five members and room for more. An odd last card centres on its own row (Krish: "one at the bottom, in the middle"). */
.sec-grid > .sec-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% - 12px)); }
@media (max-width: 960px) { .sec-grid > .sec-card:last-child:nth-child(odd) { width: 100%; } }
/* Quotes removed (AK, Oct 20): the Council video carries the section, so the band is shorter. */
.sec-say { padding: 56px 0 64px; }
.sec-film { margin-bottom: 40px; }
.sec-film__len { font: 600 14px/1 var(--body, inherit); color: var(--slate); }
/* Hero faces: an odd last member centres on its own row, same rule as the legends grid */
.sec-who > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
/* Oct 20 (AK): keep the lavender tags, but never "one on top, two below". Two tags per member, always one row. */
.sec-chips { flex-wrap: nowrap !important; overflow: hidden; }
.sec-chips li { white-space: nowrap; flex: none; }
.sec-chips li:nth-child(n+3) { display: none !important; }
/* the two tags sit on their own full-width row under photo + text, so they always fit on one line */
.sec-chips { grid-column: 1 / -1 !important; overflow: visible !important; align-items: center; margin-top: 16px !important; }
.sec-chips li { align-self: center; height: auto; }
@media (max-width: 560px) { .sec-chips { flex-wrap: wrap !important; gap: 6px !important; } .sec-chips li { font-size: 12px !important; padding: 5px 10px !important; } }

/* MOBILE-B (Oct 21): the hero's two CTAs share one row on phones (stack only below 360px) */
@media (min-width: 360px) and (max-width: 767px) {
  .sec-cta { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 8px; }
  .sec-cta .hx-btn { flex: 1 1 auto; width: auto; min-width: 0; justify-content: center; gap: 8px; white-space: nowrap; }
  .sec-cta .hx-btn-primary { padding-right: 14px; }
  .sec-cta .hx-btn-ghost { padding-left: 14px; padding-right: 14px; }
}

/* MOBILE-B (Oct 21): a little less air on phones */
@media (max-width: 767px) {
  .sec-hero { padding-bottom: 28px; }
  .sec-how, .sec-say { padding: 36px 0; }
  .sec-council { padding: 32px 0; }
  .sec-book { padding: 40px 0; }
  .sec-grid { gap: 12px; margin-top: 16px; }
  .sec-card { padding: 16px; }
}

/* MOBILE-B (Oct 21): 44px touch area on the member LinkedIn links (visual size unchanged) */
@media (max-width: 767px) {
  .sec-in { position: relative; }
  .sec-in::after { content: ""; position: absolute; inset: -6px; }
}

/* Oct 27 final QA (no lone item): 5 hero members sat 2+2+1. They now sit 3+2, the 2 centred under the 3, every card the same size
   (6-column grid, each card spans 2). 4 members would sit 2+2. Cards stack photo over name and tag so 3 fit across. Below 360px
   the five become one compact list (photo left), so nothing squeezes. */
.sec-who { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sec-who > li { grid-column: span 2; min-width: 0; }
.sec-who > li:last-child:nth-child(odd) { grid-column: span 2; justify-self: stretch; width: auto; }
.sec-who > li:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
.sec-who > li:first-child:nth-last-child(4), .sec-who > li:first-child:nth-last-child(4) ~ li { grid-column: span 3; }
.sec-who a { flex-direction: column; align-items: center; text-align: center; padding: 16px 8px; }
.sec-who__t { align-items: center; }
@media (max-width: 560px) {
  .sec-who { gap: 8px; }
  .sec-who a { padding: 12px 4px; gap: 8px; }
  .sec-who img { width: 56px; height: 56px; border-radius: 14px; }
  .sec-who__t b { font-size: 15px; }
  .sec-who__chip { padding: 4px 6px; font-size: 12px; }
}
@media (max-width: 359px) {
  .sec-who { grid-template-columns: minmax(0, 1fr); }
  .sec-who > li, .sec-who > li:last-child:nth-child(odd), .sec-who > li:nth-last-child(2):nth-child(3n+1) { grid-column: 1 / -1; }
  .sec-who a { flex-direction: row; justify-content: flex-start; text-align: start; padding: 8px 12px 8px 8px; gap: 12px; }
  .sec-who img { width: 48px; height: 48px; border-radius: 12px; }
  .sec-who__t { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; flex: 1; gap: 4px 8px; }
}

/* AK Oct 31: the hero visual (views/v2/sec-orbit.ejs). The seller in the middle; the five members around; each lesson flows in turn. */
.sec-hero__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.sco { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; margin: 0 auto; }
.sco__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sco__ln { stroke: var(--lav); stroke-width: .5; }
.sco__dg circle { fill: var(--ink); }
.sco__base { fill: #fff; stroke: var(--lav); stroke-width: 1.4; }
.sco__arc { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; opacity: 0; }
.sco__seller { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 30%; text-align: center; }
.sco__av { position: relative; display: block; width: 46%; aspect-ratio: 1; }
.sco__av svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #C9CCD6; }
.sco__av svg.sco__av--on { fill: var(--ink); opacity: 0; }
.sco__seller b { font: 800 14px/1.2 Manrope, Arial, sans-serif; color: var(--ink); }
.sco__gains { position: relative; display: block; width: 100%; height: 26px; }
.sco__gain { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: var(--gold); font: 800 11px/1.3 Manrope, Arial, sans-serif; font-style: normal; color: var(--ink); white-space: nowrap; opacity: 0; }
.sco__team { list-style: none; margin: 0; padding: 0; }
.sco__m { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 30%; }
.sco__m a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px; border-radius: 18px; text-align: center; text-decoration: none; color: var(--ink); transition: background .3s; }
.sco__m img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lav); transition: box-shadow .3s; }
.sco__m b { margin-top: 4px; font: 700 15px/1.15 var(--disp); }
.sco__m span { font-size: 12px; line-height: 1.35; color: var(--slate); text-wrap: balance; }
.sco__m a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the 10s cycle: member i is lit from i*2s; the seller fills in a little more with each one */
.sco__m, .sco__ln, .sco__dg, .sco__arc, .sco__gain { animation: 10s infinite both; }
.sco__m { animation-name: sco-m; } .sco__ln { animation-name: sco-ln; } .sco__dg { animation-name: sco-dg; } .sco__gain { animation-name: sco-gain; }
.sco__m--0, .sco__ln--0, .sco__dg--0, .sco__gain--0 { animation-delay: 0s; }
.sco__m--1, .sco__ln--1, .sco__dg--1, .sco__gain--1 { animation-delay: 2s; }
.sco__m--2, .sco__ln--2, .sco__dg--2, .sco__gain--2 { animation-delay: 4s; }
.sco__m--3, .sco__ln--3, .sco__dg--3, .sco__gain--3 { animation-delay: 6s; }
.sco__m--4, .sco__ln--4, .sco__dg--4, .sco__gain--4 { animation-delay: 8s; }
@keyframes sco-m { 0%, 20%, 100% { opacity: .55; } 3%, 17% { opacity: 1; } }
.sco__m { opacity: .55; }
@keyframes sco-ln { 0%, 20%, 100% { stroke: #DDD6FF; stroke-width: .5; } 3%, 17% { stroke: #FFC61E; stroke-width: .9; } }
@keyframes sco-dg { 0%, 1%, 19%, 100% { opacity: 0; } 4%, 16% { opacity: 1; } }
.sco__dg { opacity: 0; }
@keyframes sco-gain { 0%, 8%, 20%, 100% { opacity: 0; transform: translate(-50%, 4px); } 11%, 18% { opacity: 1; transform: translate(-50%, 0); } }
/* ring segments: each appears when its member's lesson lands and stays until the loop restarts */
.sco__arc { animation-name: sco-arc0; }
.sco__arc--1 { animation-name: sco-arc1; } .sco__arc--2 { animation-name: sco-arc2; } .sco__arc--3 { animation-name: sco-arc3; } .sco__arc--4 { animation-name: sco-arc4; }
@keyframes sco-arc0 { 0%, 9% { opacity: 0; } 12%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-arc1 { 0%, 29% { opacity: 0; } 32%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-arc2 { 0%, 49% { opacity: 0; } 52%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-arc3 { 0%, 69% { opacity: 0; } 72%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-arc4 { 0%, 89% { opacity: 0; } 92%, 96% { opacity: 1; } 100% { opacity: 0; } }
.sco__av--on { animation: sco-sharpen 10s infinite both; }
@keyframes sco-sharpen { 0%, 9% { opacity: 0; } 12%, 29% { opacity: .2; } 32%, 49% { opacity: .4; } 52%, 69% { opacity: .6; } 72%, 89% { opacity: .8; } 92%, 96% { opacity: 1; } 100% { opacity: 0; } }
.sco__m:hover, .sco__m:focus-within { opacity: 1 !important; }
.sco__m a:hover img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .sco__m, .sco__ln, .sco__dg, .sco__arc, .sco__gain, .sco__av--on { animation: none; }
  .sco__m, .sco__arc, .sco__av--on { opacity: 1; } .sco__dg, .sco__gain { opacity: 0; }
}
/* tablets and phones: the seller, then the members as a list */
@media (max-width: 899px) {
  .sec-hero__in { grid-template-columns: minmax(0, 1fr); }
  .sco { aspect-ratio: auto; max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .sco__lines { position: relative; inset: auto; width: 150px; height: 150px; }
  .sco__ln, .sco__dg { display: none; }
  /* Nov 1 round (B4): on phones the list does not light up, so a ring segment filling in turn read as a stray gold fragment: the ring shows complete and the seller in full colour (every lesson gained) */
  .sco__arc, .sco__av--on { animation: none !important; opacity: 1 !important; }
  .sco__seller { position: absolute; left: 50%; top: 75px; width: 150px; }
  .sco__seller b, .sco__gains { display: none; }
  .sco__team { display: grid; gap: 8px; width: 100%; }
  .sco__m { position: static; transform: none; width: 100%; opacity: 1; animation: none; }
  .sco__m a { flex-direction: row; text-align: left; gap: 12px; padding: 10px 14px; background: #fff; box-shadow: var(--sh-sm); }
  .sco__m img { width: 48px; height: 48px; flex: none; }
  .sco__m b { margin: 0; }
  .sco__m a > b, .sco__m a > span { display: block; }
  .sco__m a { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
  .sco__m img { grid-row: 1 / 3; }
}
/* the member cards: what each one teaches */
.sec-card__teach { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--cream); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ink); }
/* the "Teaches" line sits beside the photo on desktop, and full width under it on phones; the image spans the extra row */
.sec-card img { grid-row: 1 / 5; }
@media (max-width: 560px) { .sec-card__teach { grid-column: 1 / -1; margin-top: 14px; } .sec-card img { grid-row: 1; } }
/* desktop: each member's photo sits on the end of its line (the name and lesson hang below the photo) */
@media (min-width: 900px) { .sco__m { transform: translate(-50%, -36px); } }
@media (min-width: 900px) { .sco { margin-bottom: 64px; } }
@media (min-width: 900px) { .sco__m a { background: rgba(255, 244, 210, .94); } }
/* AK Oct 31: six around the seller (five experts + the Sandler methodology guide): a 12s loop, 2s each */
.sco__m, .sco__ln, .sco__dg, .sco__arc, .sco__gain, .sco__av--on { animation-duration: 12s; }
.sco__m--5, .sco__ln--5, .sco__dg--5, .sco__gain--5 { animation-delay: 10s; }
@keyframes sco-m { 0%, 16.7%, 100% { opacity: .55; } 2.5%, 14% { opacity: 1; } }
@keyframes sco-ln { 0%, 16.7%, 100% { stroke: #DDD6FF; stroke-width: .5; } 2.5%, 14% { stroke: #FFC61E; stroke-width: .9; } }
@keyframes sco-dg { 0%, 1%, 16%, 100% { opacity: 0; } 3%, 13.5% { opacity: 1; } }
@keyframes sco-gain { 0%, 7%, 16.7%, 100% { opacity: 0; transform: translate(-50%, 4px); } 9%, 15% { opacity: 1; transform: translate(-50%, 0); } }
.sco__arc--5 { animation-name: sco-arc5; }
@keyframes sco-arc0 { 0%, 8% { opacity: 0; } 10%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-arc1 { 0%, 24.7% { opacity: 0; } 26.7%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-arc2 { 0%, 41.3% { opacity: 0; } 43.3%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-arc3 { 0%, 58% { opacity: 0; } 60%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-arc4 { 0%, 74.7% { opacity: 0; } 76.7%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-arc5 { 0%, 91.3% { opacity: 0; } 93.3%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sco-sharpen { 0%, 8% { opacity: 0; } 10%, 24.7% { opacity: .17; } 26.7%, 41.3% { opacity: .33; } 43.3%, 58% { opacity: .5; } 60%, 74.7% { opacity: .67; } 76.7%, 91.3% { opacity: .83; } 93.3%, 97% { opacity: 1; } 100% { opacity: 0; } }

/* AK Oct 31: methodology partners */
.sec-meth { padding: clamp(56px, 7vw, 80px) 0; background: var(--mist); }
.sec-meth__sub { max-width: 640px; margin: -24px auto 32px; text-align: center; font-size: 17px; line-height: 1.55; color: var(--slate); text-wrap: balance; }
.sec-meth__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.sec-meth__live { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 24px; background: #fff; border: 2px solid var(--gold); box-shadow: var(--sh-md); }
.sec-meth__brand { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.sec-meth__brand img { height: 26px; width: auto; }
.sec-meth__brand span { padding: 4px 10px; border-radius: 999px; background: var(--gold); font-size: 12px; font-weight: 800; color: var(--ink); }
.sec .sec-meth__live h3 { margin: 0; font: 700 26px/1.15 var(--disp); color: var(--ink); }
.sec-meth__live > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--slate); }
.sec-meth__guide { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 6px; padding: 14px; border-radius: 18px; background: var(--mist); }
.sec-meth__guide img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); }
.sec-meth__guide b { display: block; font: 700 18px/1.2 var(--disp); color: var(--ink); }
.sec-meth__guide small { display: block; font-size: 13px; color: var(--slate); }
.sec-meth__guide .sec-card__teach { margin-top: 8px; background: #fff; }
.sec-meth__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0 !important; }
.sec-meth__soon { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sec-meth__soon li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 18px 20px; border-radius: 20px; background: #fff; border: 1.5px dashed var(--lav); }
.sec-meth__soon b { font: 700 19px/1.2 var(--disp); color: var(--ink); }
.sec-meth__soon em, .sec-play em { padding: 3px 10px; border-radius: 999px; background: var(--lav); font-style: normal; font-size: 12px; font-weight: 800; color: #341D99; white-space: nowrap; }
.sec-meth__soon span { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; color: var(--slate); }
.sec-play { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; padding: 22px 24px; border-radius: 24px; background: var(--ink); color: #fff; }
.sec-play__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--gold); color: var(--ink); }
.sec .sec-play h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 21px/1.2 var(--disp); color: #fff; }
.sec-play p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--lav); }
@media (max-width: 899px) { .sec-meth__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .sec-meth__guide { grid-template-columns: 56px minmax(0, 1fr); } .sec-meth__guide img { width: 56px; height: 56px; } .sec-meth__live, .sec-play { padding: 18px; } .sec-play { grid-template-columns: minmax(0, 1fr); } }
.sec-meth .sec-h2 { text-align: center; } .sec-meth__sub { margin-top: 0; }
.sec-meth__grid, .sec-play { text-align: left; }
.sec .sec-meth__live h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the Sandler logo is the heading's visible form */

/* Nov 1 (A11): the hero H1 breaks at the phrase ("With Humantic AI, / you get more than a tool."), and the hero buttons wrap cleanly on phones */
.sec-hero h1 { text-wrap: balance; }
@media (max-width: 479px) { .sec-hero .sec-cta { flex-wrap: wrap; row-gap: 14px; } }

/* Nov 1 (A12, A13) UI pass, same words.
   A12: the "Teaches how to..." line is no longer a cream box inside each card; it reads as the card's own line, led by a gold tick.
   A13: Sandler card flattened (the Clint Babcock block and his teach line sit on the card, no box in a box in a box); the three
   methodologies that are coming read as one quiet list on mist (no dashed placeholder cards), each with its lavender chip;
   the playbooks line drops the gold icon tile and sits as a plain row under the list, ink text on white. */
.sec-card__teach { position: relative; padding: 0 0 0 24px; border-radius: 0; background: none; font-weight: 700; color: var(--ink); }
.sec-card__teach::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23110A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.sec-meth__guide { padding: 16px 0 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--lav); }
.sec-meth__guide .sec-card__teach { background: none; }
.sec-meth__soon { gap: 0; padding: 6px 20px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav); }
.sec-meth__soon li { padding: 16px 0; border: 0; border-radius: 0; background: none; }
.sec-meth__soon li + li { box-shadow: inset 0 1px 0 var(--lav); }
.sec-play { grid-template-columns: minmax(0, 1fr); background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--lav); }
.sec-play__ic { display: none; }
.sec .sec-play h3 { color: var(--ink); }
.sec-play p { color: var(--slate); }
.sec-meth__soon em, .sec-play em { color: var(--ink); } /* lavender chips carry ink text (brand rule) */

/* Nov 2 (AK, Agent D): spacing, rhythm and the Legends grid.
   1. Meet the Legends: five members sat 2 + 2 + 1, the fifth alone on its row. From 900px they now sit 3 + 2, every card the
      same size, the two centred under the three (6-column grid, each card spans 2). Card: photo beside name and role, then the
      teach line, bio and the two tags full width, tags on one baseline at the bottom. Under 900px: one column (no lone card).
   2. Bands: Legends (mist) and Methodology Partners (mist) ran together as one band; FAQ (mist) and the close (mist) too.
      Methodology Partners is now cream (its white cards lift off it), the close is white. Each section reads as its own.
   3. One section rhythm: 64px top and bottom on desktop, 48px tablet, 40px phones; heading to content 32px (24px phones).
   4. CTA air: 28px above every button or button row (var(--cta-gap) from the shell, 24px on phones). */
.sec-how, .sec-council, .sec-meth, .sec-say { padding: 64px 0; }
.sec-book { padding: 72px 0; background: #fff; }
.sec-meth { background: var(--cream); }
.sec .sec-how .sec-h2, .sec .sec-say .sec-h2 { margin-bottom: 32px; }
.sec-grid { margin-top: 32px; }
.sec-meth__sub { margin: 0 auto 32px; }
.sec-cta { margin-top: var(--cta-gap, 28px); }
.sec-book .sec-shell > p:first-of-type { margin-bottom: var(--cta-gap, 28px); }
.sec-meth__links { gap: 4px 24px; margin-top: 12px !important; }
.sec-meth__links .sec-textlink { min-height: 44px; }

@media (min-width: 900px) {
  .sec-grid { max-width: 1120px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .sec-grid > .sec-card, .sec-grid > .sec-card:last-child:nth-child(odd) { grid-column: span 2; justify-self: stretch; width: auto; }
  .sec-grid > .sec-card:nth-last-child(2):nth-child(3n+1) { grid-column: 2 / span 2; }
  .sec-card { grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 16px; padding: 20px; }
  .sec-card img { grid-row: 1; width: 80px; height: 80px; border-radius: 16px; }
  .sec-card__head { align-self: center; min-width: 0; }
  .sec .sec-card h3 { font-size: 20px; flex-wrap: wrap; }
  .sec-card__role { font-size: 13.5px; }
  .sec-card__teach { grid-column: 1 / -1; margin-top: 16px; }
  .sec-card__bio { grid-column: 1 / -1; margin-top: 8px; font-size: 14.5px; }
  .sec-chips { grid-column: 1 / -1 !important; align-self: end; margin-top: 16px !important; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .sec-card { padding: 16px; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
  .sec-card img { width: 64px; height: 64px; border-radius: 14px; }
  .sec .sec-card h3 { font-size: 18px; }
  .sec-chips { flex-wrap: wrap !important; }
  .sec-chips li { font-size: 12px; padding: 5px 10px; }
}
@media (max-width: 899px) {
  .sec-grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .sec-how, .sec-council, .sec-meth, .sec-say { padding: 48px 0; }
  .sec-book { padding: 56px 0; }
}
@media (max-width: 767px) {
  .sec-how, .sec-council, .sec-meth, .sec-say { padding: 40px 0; }
  .sec-book { padding: 48px 0; }
  .sec .sec-how .sec-h2, .sec .sec-say .sec-h2 { margin-bottom: 24px; }
  .sec-grid { margin-top: 24px; gap: 12px; }
  .sec-meth__sub { margin-bottom: 24px; }

}
.sec-say .sec-film { margin-bottom: 0; }
/* 3-up cards: the two tags stack as one tidy column (they never fit side by side at this card width, and a mix of one-row and
   two-row tags across a row read as uneven); names line up at the top of every card */
@media (min-width: 900px) {
  .sec-card__head { align-self: start; padding-top: 6px; }
  .sec-chips { flex-direction: column; align-items: flex-start !important; flex-wrap: nowrap !important; gap: 6px !important; }
  .sec-chips li { align-self: flex-start; }
}

/* Nov 2 cleanup of Amar's Council ring (AK: "clean it up without changing the UI"; same ring, same six people, same story).
   1. The dots run on the CSS clock (sec-orbit.ejs): the SMIL dots sat at the corner before they began.
   2. Idle members read at 80% (were 55%, washed out); the lit one is still 100%.
   3. Desktop: the ring sizes to the window (it was 600px whatever the height, so on a laptop Mark Hunter's line fell below the
      fold) and keeps 56px above for the upper names.
   4. Desktop: Barry, Heather and Clint (the upper three) carry their name and line above the photo, so no line runs under a
      caption and every line leaves its photo the same way (the lower three keep theirs below). Phones are unchanged. */
.sco__d { transform: translate(var(--fx), var(--fy)); animation: sco-dot 1.6s linear infinite; }
.sco__d--b { animation-delay: -.8s; }
@keyframes sco-dot { from { transform: translate(var(--fx), var(--fy)); } to { transform: translate(50px, 50px); } }
@keyframes sco-m { 0%, 16.7%, 100% { opacity: .8; } 2.5%, 14% { opacity: 1; } }
@media (min-width: 900px) {
  .sco__m { opacity: .8; }
  .sco { max-width: min(560px, max(420px, calc(100vh - 300px))); margin-top: 56px; }
  .sco__m { width: max(30%, 132px); }
  .sco__m.is-up { transform: translate(-50%, calc(-100% + 36px)); }
  .sco__m.is-up img { order: 3; }
  .sco__m.is-up b { order: 1; margin: 0; }
  .sco__m.is-up span { order: 2; margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { .sco__d { animation: none; } .sco__m { opacity: 1; } }

/* AK Nov 7 (Amar): hero at the site's hero size with a two-line lead; the ring shows each person's credentials and a short "Teaches"
   line that appears on their turn and stays; Meet the Legends fits one screen with a book button per card; How the Council Works
   sits under it with a get in touch button; Methodology Partners and the video section fill the screen. */
.sec .sec-hero h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.04; max-width: 640px; }
.sec-lead { font: 600 clamp(18px, 1.6vw, 22px)/1.45 Manrope, Arial, sans-serif; max-width: 560px; color: var(--ink); }
@media (min-width: 900px) {
  .sec-hero, .sec-council, .sec-meth, .sec-say { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .sec-hero > .sec-shell, .sec-council > .sec-shell, .sec-meth > .sec-shell, .sec-say > .sec-shell { width: 100%; }
  .sec-hero { padding: 88px 0 32px; }
  .sec-council { padding: 88px 0 32px; }
  .sec-grid { margin-top: 24px; }
  .sec-card { grid-template-rows: auto auto auto 1fr; padding: 18px; }
  .sec-card__teach { margin-top: 12px; }
}
.sco__gains { display: none; }
.sco__cred { font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--slate); text-wrap: balance; }
.sco__m span.sco__t { display: inline-block; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: var(--gold); font: 800 11.5px/1.3 Manrope, Arial, sans-serif; color: var(--ink); opacity: 0; transform: translateY(4px); animation: sco-keep .5s var(--ease, ease) both; animation-delay: calc(var(--k) * 2s + .5s); }
@keyframes sco-keep { to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .sco__m.is-up .sco__cred { order: 2; }
  .sco__m.is-up span.sco__t { order: 3; margin: 0 0 6px; }
  .sco__m.is-up img { order: 4; }
}
@media (max-width: 899px) {
  .sco__m a { grid-template-rows: auto auto auto; }
  .sco__m img { grid-row: 1 / 4; }
  .sco__m a > small { display: block; }
  .sco__m span.sco__t { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .sco__m span.sco__t { animation: none; opacity: 1; transform: none; } }
.sec-card__cta { grid-column: 1 / -1; align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 14px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 800 14px/1 Manrope, Arial, sans-serif; text-decoration: none; transition: background .2s, transform .16s; }
@media (hover: hover) { .sec-card__cta:hover { background: var(--violet); } }
.sec-card__cta:active { transform: scale(.97); }
.sec-card__cta:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.sec-how__cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: var(--cta-gap, 28px); }
.sec-how__cta p { margin: 0; font-size: 15px; color: var(--slate); }
.sec-how__cta p a { color: var(--violet); font-weight: 700; }
/* hero copy column a little wider so the headline is 3 lines, and short laptop screens get tighter Legends cards so the section fits one screen */
@media (min-width: 900px) {
  .sec-hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .sec .sec-hero h1 { max-width: none; }
}
@media (min-width: 900px) and (max-height: 800px) {
  .sec-hero { padding: 76px 0 16px; }
  .sco { margin-top: 44px; }
  .sec-council { padding: 76px 0 16px; }
  .sec-grid { margin-top: 16px; gap: 14px; }
  .sec-card { padding: 14px 16px; grid-template-columns: 60px minmax(0, 1fr); column-gap: 12px; }
  .sec-card img { width: 60px; height: 60px; border-radius: 14px; }
  .sec-card__head { padding-top: 0; }
  .sec-card__teach { margin-top: 8px; font-size: 13.5px; }
  .sec-card__bio { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
  .sec-card__cta { margin-top: 10px; min-height: 36px; font-size: 13px; }
}