/* ── Edits · Oct 21 (SocialX call + Ross follow-ups) ───────────────── */

/* 1 · Play buttons: glyph is optically centred via the #i-play viewBox,
       so drop the old right-nudges that pushed every triangle off-centre. */
.playbtn .pb svg,
.vc-img .pb svg,
.poster .pb svg,
.film-play svg,
.ap-uni .u-feat .pl svg,
.xs-uni .xs-ctrl span svg { margin-left: 0 !important; }

/* 2 · Vertical logos beside 01 / 02 / 03 — ~50% larger */
.aac .kicker.kicker--stack img.nc-lockup--stacked { height: 7.5rem !important; width: auto !important; }
.aac .kicker img[src*="university-emblem"] { height: 4.2rem !important; width: auto !important; }
.aac .kicker img[src*="business-app-mark"] { height: 5.25rem !important; width: auto !important; }
@media (max-width: 640px) {
  .aac .kicker.kicker--stack img.nc-lockup--stacked { height: 6.3rem !important; }
  .aac .kicker img[src*="university-emblem"] { height: 3.6rem !important; }
  .aac .kicker img[src*="business-app-mark"] { height: 4.4rem !important; }
}

/* 3 · Mark Victor Hansen trailer button */
.mvh-body .mvh-play { margin-top: 1.5rem; }

/* 4 · Pricing: monthly / annual toggle (defaults to monthly) */
.bill-toggle {
  display: inline-flex; justify-self: start; gap: 4px; padding: 4px; margin-bottom: .75rem;
  border-radius: 999px; background: rgba(13,15,18,.06); border: 1px solid var(--rule);
}
.bill-toggle button {
  font: inherit; font-size: .9rem; font-weight: 500; line-height: 1; padding: .7rem 1.25rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--fg-2); cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.bill-toggle button[aria-checked="true"] { background: var(--night, #0D1B2A); color: #fff; }
.bill-toggle button:focus-visible { outline: 2px solid var(--clay, #D4A592); outline-offset: 2px; }

.ledger .ba { display: none; }
.ledger[data-billing="annual"] .ba { display: inline; }
.ledger[data-billing="annual"] .bm { display: none; }
.ledger[data-billing="annual"] a.buy-btn.ba { display: inline-flex; }
.ledger[data-billing="annual"] p.bill-note.ba { display: block; }
.ledger[data-billing="annual"] .li--mo { opacity: .45 !important; }
.ledger[data-billing="annual"] .total { display: none; }
.ledger .p small { font-size: .75em; color: var(--fg-2); margin-left: 1px; }
.bill-note { font-size: .85rem; color: var(--fg-2); margin: 1rem 0 0; }

/* 5 · Pricing: buy each experience on its own (secondary to All-Access) */
.ledger .li.li--buy { grid-template-columns: auto 1fr auto auto; }
.ledger .buy { display: flex; }
.buy-btn {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: .8rem; font-weight: 500; line-height: 1; padding: .55rem .9rem;
  border-radius: 999px; border: 1px solid var(--c, var(--rule-strong));
  color: var(--night, #0D1B2A); text-decoration: none; background: transparent;
  transform: translateY(-.15rem);
  transition: background .25s ease, color .25s ease;
}
.buy-btn:hover, .buy-btn:focus-visible { background: var(--c, var(--night)); color: #fff; }
@media (max-width: 560px) {
  .ledger .li.li--buy { grid-template-columns: 1fr auto; row-gap: .6rem; }
  .ledger .li.li--buy .dots { display: none; }
  .ledger .li.li--buy .nm { grid-column: 1 / -1; }
  .ledger .li.li--buy .p { grid-column: 1; align-self: center; }
  .ledger .li.li--buy .buy { grid-column: 2; }
  .buy-btn { transform: none; }
}

/* 6 · Business App header — phone + chips left, copy right (from the Business App page hero) */
.aac--apphead .ba-stage { position: relative; display: grid; place-items: center; aspect-ratio: auto; min-height: clamp(30rem, 66vh, 42rem); overflow: visible; }
.aac--apphead .ba-stage .halo { position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, #fff, #fff0 72%); pointer-events: none; }
.aac--apphead .device--shot { position: relative; filter: drop-shadow(0 50px 60px rgba(13,15,18,.3)); }
.aac--apphead .device--shot .phone { --pw: clamp(230px, 21vw, 290px); background: #0b0d10; }
.aac--apphead .device--shot .screen { background: #fff; }
.aac--apphead .device--shot .screen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.aac--apphead .chipf { position: absolute; z-index: 2; display: flex; align-items: center; gap: .6rem; background: var(--white, #fff); color: var(--black, #0D0F12); border-radius: 999px; padding: .55rem .95rem .55rem .55rem; font-size: .88rem; font-weight: 500; line-height: 1; box-shadow: 0 20px 36px -20px rgba(13,15,18,.45); white-space: nowrap; }
.aac--apphead .chipf i { width: 2.15rem; height: 2.15rem; border-radius: 10px; display: grid; place-items: center; background: var(--forest); color: var(--white, #fff); }
.aac--apphead .chipf i svg { width: 1rem; height: 1rem; }
.aac--apphead .chipf.c1 { left: 4%; top: 16%; }
.aac--apphead .chipf.c2 { right: 2%; top: 30%; }
.aac--apphead .chipf.c3 { left: 6%; bottom: 24%; }
.aac--apphead .chipf.c4 { right: 6%; bottom: 10%; }
.aac--apphead h2 { font-size: clamp(3rem, 2rem + 3.6vw, 5.4rem); line-height: .98; letter-spacing: -.035em; max-width: 10ch; }
@media (max-width: 899px) {
  .aac--apphead .ba-stage { min-height: 26rem; }
  .aac--apphead .chipf { font-size: .78rem; }
  .aac--apphead .chipf.c1 { left: 0; } .aac--apphead .chipf.c2 { right: 0; }
  .aac--apphead .chipf.c3 { left: 2%; } .aac--apphead .chipf.c4 { right: 2%; }
}

/* 7 · Business App "in practice" — the photo section, moved to close the Business App chapter */
.ia-steps { list-style: none; margin: 1.6rem 0 0 !important; padding: 0; display: grid; gap: .9rem; counter-reset: none; }
.ia-steps li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; color: var(--fg-2, #3c4a42); font-size: 1.02rem; line-height: 1.45; }
.ia-steps li b { color: var(--forest); font-weight: 600; }
.ia-steps i { width: 2.15rem; height: 2.15rem; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.75); color: var(--forest); box-shadow: 0 10px 22px -16px rgba(13,15,18,.4); }
.ia-steps i svg { width: 1rem; height: 1rem; }

/* 8 · Closing section — billing toggle + purchase individually */
.final-buy { display: grid; justify-items: center; gap: 1.5rem; width: 100%; }
.final-buy .price { margin: 0; }
.bill-toggle--dark { justify-self: center; background: rgba(246,241,235,.08); border-color: rgba(246,241,235,.18); margin: 0; }
.bill-toggle--dark button { color: rgba(246,241,235,.75); }
.bill-toggle--dark button[aria-checked="true"] { background: var(--clay, #D4A592); color: var(--night, #0D1B2A); }
.final-buy .ba { display: none; }
.final-buy[data-billing="annual"] .bm { display: none; }
.final-buy[data-billing="annual"] span.ba { display: inline; }
.final-buy[data-billing="annual"] a.ba { display: inline-flex; }
.final-buy[data-billing="annual"] p.ba { display: block; }
.final-buy[data-billing="annual"] .li--mo { opacity: .5; }
.bill-note--dark { margin: -.75rem 0 0; color: rgba(246,241,235,.65); text-align: center; }
.indiv-label { margin: .75rem 0 -.5rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(246,241,235,.6); }
.indiv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 760px); }
.indiv-card { display: grid; gap: .55rem; justify-items: start; text-align: left; padding: 1.1rem 1.1rem 1.15rem; border-radius: var(--r-m, 18px); background: rgba(246,241,235,.05); box-shadow: inset 0 0 0 1px rgba(246,241,235,.14); border-top: 3px solid var(--ic); }
.indiv-card b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--ivory, #F6F1EB); }
.indiv-card .ip { margin: 0; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--ivory, #F6F1EB); }
.indiv-card .ip small { font-size: .8rem; color: rgba(246,241,235,.6); margin-left: 2px; }
.indiv-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: .2rem; padding: .7rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 500; line-height: 1; text-decoration: none; color: var(--ivory, #F6F1EB); border: 1px solid var(--ic); transition: background .25s ease, color .25s ease; }
.indiv-btn:hover, .indiv-btn:focus-visible { background: var(--ic); color: var(--night, #0D1B2A); }
@media (max-width: 640px) {
  .indiv { grid-template-columns: 1fr; }
  .indiv-card { grid-template-columns: 1fr auto; align-items: center; row-gap: .4rem; }
  .indiv-card b { grid-column: 1; }
  .indiv-card .ip { grid-column: 2; grid-row: 1; justify-self: end; font-size: 1.15rem; }
  .indiv-btn { grid-column: 1 / -1; }
}

/* 9 · Vertical logos sit beside 01 / 02 / 03 at the same height as the numerals */
.aac .num-row { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.aac .num-row .num { margin: 0; }
.aac .num-row .num-logo { display: block; height: calc(clamp(4rem, 3rem + 4vw, 7.5rem) * .74); width: auto; flex: none; transform: translateY(calc(clamp(4rem, 3rem + 4vw, 7.5rem) * -.125)); }

/* 10 · Closing section — one row of tiles: each vertical, its price and a purchase button */
.final .indiv-card { gap: .4rem; border-top: 0; box-shadow: none; padding: 1.15rem 1.15rem 1.2rem; }
.final .indiv-card .ix { width: 26px; height: 22px; margin-bottom: .35rem; fill: currentColor; }
.final .indiv-card .tag { font-size: .8rem; opacity: .8; margin-top: -.15rem; }
.final .indiv-card .ip { margin: .5rem 0 .2rem; }
.final .ic-nc { background: var(--navy, #13294B); box-shadow: inset 0 0 0 1px rgba(52,138,196,.4); --ic: var(--nc, #348AC4); }
.final .ic-nc .ix { color: var(--nc, #348AC4); }
.final .ic-uni { background: var(--black, #0D0F12); --ic: var(--gold, #F4B840); }
.final .ic-uni, .final .ic-uni b, .final .ic-uni .ip { color: #FFDC9A; }
.final .ic-uni .ix { color: var(--gold, #F4B840); }
.final .ic-uni .indiv-btn { color: #FFDC9A; }
.final .ic-app { background: var(--white, #fff); --ic: var(--forest, #2C4A3A); }
.final .ic-app, .final .ic-app b, .final .ic-app .ip { color: var(--black, #0D0F12); }
.final .ic-app .ip small { color: rgba(13,15,18,.55); }
.final .ic-app .ix { color: var(--forest, #2C4A3A); fill: var(--forest, #2C4A3A); }
.final .ic-app .indiv-btn { color: var(--forest, #2C4A3A); }
.final .indiv-btn:hover, .final .indiv-btn:focus-visible { background: var(--ic); color: #fff; }
.final .ic-uni .indiv-btn:hover, .final .ic-uni .indiv-btn:focus-visible { color: var(--black, #0D0F12); }
@media (max-width: 640px) {
  .final .indiv-card { grid-template-columns: auto 1fr auto; column-gap: .75rem; row-gap: .2rem; align-items: center; }
  .final .indiv-card .ix { grid-row: 1 / span 2; grid-column: 1; margin: 0; }
  .final .indiv-card b { grid-column: 2; grid-row: 1; }
  .final .indiv-card .tag { grid-column: 2; grid-row: 2; margin: 0; }
  .final .indiv-card .ip { grid-column: 3; grid-row: 1 / span 2; margin: 0; justify-self: end; }
  .final .indiv-btn { grid-column: 1 / -1; margin-top: .6rem; }
}

/* 11 · All-Access annual price ($1,199.64/year) in the pricing card */
#join .ba { display: none; }
#join[data-billing="annual"] .bm { display: none; }
#join[data-billing="annual"] .ba { display: inline; }

/* 12 · NuCalm: the photo is now the video poster, so the film can't be missed */
.nc-film { position: relative; }
.nc-film-btn { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: block; cursor: pointer; overflow: hidden; border-radius: inherit; }
.nc-film-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.nc-film-btn:hover img { transform: scale(1.035); }
.ncf-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,.15) 0%, rgba(10,22,40,0) 30%, rgba(10,22,40,.15) 55%, rgba(10,22,40,.78) 100%); }
.ncf-tag { position: absolute; top: 1.1rem; left: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 999px; background: rgba(10,22,40,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: .78rem; font-weight: 500; letter-spacing: .04em; }
.ncf-tag i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,.25); }
.ncf-play { position: absolute; left: 50%; top: 50%; width: clamp(76px, 8vw, 104px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: rgba(246,241,235,.95); color: var(--navy, #13294B); box-shadow: 0 24px 50px -18px rgba(0,0,0,.6); transition: transform .35s ease; }
.ncf-play::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(246,241,235,.55); animation: ncfPulse 2.4s ease-out infinite; }
.ncf-play svg { width: 34%; height: 34%; margin-left: 0 !important; }
.nc-film-btn:hover .ncf-play, .nc-film-btn:focus-visible .ncf-play { transform: translate(-50%, -50%) scale(1.07); }
.nc-film-btn:focus-visible { outline: 3px solid var(--nc, #348AC4); outline-offset: 4px; }
.ncf-cap { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; display: grid; gap: .25rem; color: #fff; text-align: left; }
.ncf-cap b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); line-height: 1.1; }
.ncf-cap small { font-size: .85rem; opacity: .85; }
@keyframes ncfPulse { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ncf-play::before { animation: none; } }

/* 13 · 02: full xosialX University lockup, 20% larger than the numeral */
.aac .num-row .num-logo.num-logo--uni { height: calc(clamp(4rem, 3rem + 4vw, 7.5rem) * .888); }
@media (max-width: 640px) {
  .ncf-cap small { display: none; }
  .ncf-cap { bottom: 1rem; left: 1.1rem; }
  .ncf-play { width: 68px; top: 46%; }
}

/* 14 · University lockup another 20% larger */
.aac .num-row .num-logo.num-logo--uni { height: calc(clamp(4rem, 3rem + 4vw, 7.5rem) * 1.066); }

/* 15 · MOBILE ONLY — NuCalm journeys, journey map and Business App "In practice" */
.jr-hint { display: none; }
@media (max-width: 640px) {
  /* Eight journeys → swipeable row */
  .jr-head { gap: .7rem; margin-bottom: 1.5rem; padding-inline: .25rem; }
  .jr-head h3 { font-size: 1.85rem; line-height: 1.12; }
  .jr-head p { font-size: .95rem; line-height: 1.5; }
  .jr-grid { display: flex !important; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
             margin-inline: calc(50% - 50vw) !important; padding: 2px calc(50vw - 50%) 6px !important; scroll-padding-inline: var(--margin, 1.2rem); }
  .jr-grid::-webkit-scrollbar { display: none; }
  .jr-grid li { flex: 0 0 68%; scroll-snap-align: start; min-height: 10.5rem; padding: 1.15rem 1.15rem 1.25rem; opacity: 1 !important; transform: none !important; }
  .jr-grid b { font-size: 1.45rem; }
  .jr-grid span { font-size: .9rem; line-height: 1.45; }
  .jr-hint { display: block; margin: .9rem 0 0; text-align: center; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(214,232,244,.55); }
  .jr-hint span { display: inline-block; margin-left: .3rem; animation: jrNudge 1.8s ease-in-out infinite; }
  @keyframes jrNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

  /* "Use X for Y" map → tidy 2 × 2 */
  .pf-close { margin-top: 3.5rem; gap: 1.5rem; }
  .pf-map { gap: 8px; }
  .pf-map li { padding: 1rem 1rem 1.05rem; border-radius: 14px; }
  .pf-map b { font-size: 1.28rem; }
  .pf-map span { font-size: .88rem; }

  /* Business App "In practice": taller photo, cards tucked to the edges */
  .aac--inaction .media { aspect-ratio: 4 / 4.7 !important; margin-bottom: 1.5rem; }
  .aac--inaction .media img { object-position: 45% 30% !important; }
  .aac--inaction .ui-pop { font-size: .72rem; padding: .5rem .65rem; max-width: 12rem; gap: .5rem; }
  .aac--inaction .ui-pop i { width: 1.7rem; height: 1.7rem; }
  .aac--inaction .ui-pop.p1 { left: -.35rem; top: 1rem; right: auto; bottom: auto; }
  .aac--inaction .ui-pop.p2 { right: -.35rem; left: auto; top: 44%; bottom: auto; }
  .aac--inaction .ui-pop.p3 { left: .75rem; right: auto; bottom: -1.4rem; top: auto; }
  .aac--inaction h2 { font-size: 2.3rem; line-height: 1.05; }
  .aac--inaction .lead { font-size: 1.02rem; }
  .ia-steps { gap: .75rem; margin-top: 1.25rem !important; padding: 1rem; border-radius: 16px; background: rgba(255,255,255,.55); }
  .ia-steps li { font-size: .95rem; }
}

/* 16 · "How it can fit into a day": remove the play/pause tour control */
.day-ctrl { display: none !important; }

/* 17 · Annual prices for every product — show the yearly total row */
.ledger[data-billing="annual"] .total { display: flex !important; }
.ledger .total .ba { display: none; }
.ledger[data-billing="annual"] .total .ba { display: inline; }