/* ==================================================================
   audacIA split site, the template: the bar, the opener, the page tail.
   Loaded after site.css on every page. The option switches were folded
   on 10-02: what ships is the tinted-loop opener, the Sessions set list
   with the half-sheet drawer, and the statement treatment on Home.
================================================================== */

/* ---------- the bar: three destinations, the ideafoster link, the phone menu ---------- */
.wordmark__a{ color:inherit; text-decoration:none }
.wordmark__by{ color:inherit; text-decoration:none; transition:opacity var(--dur-1) var(--ease) }
.wordmark__by:hover{ opacity:1; text-decoration:underline; text-underline-offset:.2em }
.nav__book{ display:none }
.bar__menu{ display:none }
.f-if a{ color:inherit }
@media (max-width:820px){
  .bar__cta{ display:none }
  .bar__menu{ display:inline-flex; align-items:center; height:34px; padding:0 14px; border:1px solid #fff; border-radius:999px; background:none; color:#fff; font-family:var(--font-display); font-size:14px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer }
  .bar--open{ background:var(--navy) !important; transform:none !important }
  .bar--open .nav{ display:block; justify-self:stretch; width:100%; grid-column:1 / -1; grid-row:2; margin-top:16px; padding-top:6px; border-top:1px solid rgb(244 244 244 / .25) }
  .bar--open .nav__list{ flex-direction:column; align-items:stretch; gap:0; margin-left:0 }
  .bar--open .nav__link{ display:block; padding:14px 2px; font-size:19px; border-radius:0; border-bottom:1px solid rgb(244 244 244 / .12) }
  .bar--open .nav__book{ display:block } .bar--open .nav__book .nav__link{ color:var(--orange); font-weight:700; border-bottom:0 }
}

/* ---------- the page tail: credibility strip, three questions ---------- */
.cred{ min-height:auto; display:block; overflow:visible; padding:calc(100 * var(--u)) var(--gutter-x) calc(90 * var(--u)); background:var(--paper); color:var(--navy); border-top:1px solid rgb(4 40 90 / .15) }
.cred__row{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:calc(80 * var(--u)); align-items:start }
.cred__h{ margin:0; font-family:var(--font-display); font-weight:700; font-size:max(28px, calc(48 * var(--u))); line-height:1.05; letter-spacing:var(--ls-tight) }
.cred__h em{ font-style:normal; color:var(--orange) }
.cred__p{ margin:0; font-family:var(--font-display); font-weight:400; font-size:max(15px, calc(20 * var(--u))); line-height:1.45; letter-spacing:var(--ls-body); color:rgb(4 40 90 / .8) }
.cred__p a{ color:var(--navy) }
.cred .logos{ margin-top:calc(56 * var(--u)) }
.sum--q{ border-top:1px solid rgb(4 40 90 / .15) }
@media (max-width:820px){ .cred{ padding:56px 20px } .cred__row{ grid-template-columns:1fr; gap:14px } .cred .logos{ margin-top:32px } }

/* the one-page Sessions lede (the Mixtape paragraph) came with the split; the Sessions page body is its own round, so it is put away here */
.page--sub .sessions__top{ display:grid }

/* the one-screen fit script must leave the template sections alone: they are as tall as their content.
   The footer too (10-02): fit() shrank it by about 3% wherever it ran past one screen */
.open,.flow,.cred,.sum--q,.footer{ --fit:1 !important }

/* ---------- the opener: the hero footage under the page's colour wash ---------- */
.open{ position:relative; min-height:auto; display:block; overflow:visible; padding:calc(180 * var(--u)) var(--gutter-x) calc(90 * var(--u)); background:var(--paper); color:var(--navy); font-family:var(--font-display) }
.open[data-page="sessions"]{ --page:var(--orange); --mark:calc(180 * var(--u)) }
.open[data-page="program"]{ --page:var(--blue); --mark:calc(120 * var(--u)) }
.open[data-page="questions"]{ --page:var(--navy); --mark:calc(160 * var(--u)) }
.open__in{ position:relative; z-index:2 }
.open__crumb,.open__jump,.open__rows,.open__fig,.open__loop,.open__cta,.open__rule,.open__obj{ display:none }
.open__k{ margin:0 0 calc(14 * var(--u)); font-weight:700; font-size:max(14px, calc(14 * var(--u))); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--orange) }
.open__h{ margin:0; font-weight:800; font-size:max(40px, calc(96 * var(--u))); line-height:1; letter-spacing:-.035em; color:inherit }
.open__body{ margin-top:calc(22 * var(--u)) }
.open__p{ margin:0; max-width:calc(820 * var(--u)); font-weight:400; font-size:max(17px, calc(26 * var(--u))); line-height:1.35; letter-spacing:var(--ls-body); opacity:.88 }
.open__crumb{ margin:0 0 calc(30 * var(--u)); font-size:max(12px, calc(15 * var(--u))); letter-spacing:var(--ls-body); opacity:.7 }
.open__crumb a{ color:inherit; text-decoration:none } .open__crumb a:hover{ text-decoration:underline } .open__crumb i{ font-style:normal; margin:0 .6em; opacity:.5 }
.open__jump{ flex-wrap:wrap; gap:calc(10 * var(--u)); margin-top:calc(40 * var(--u)) }
.open__jump a{ display:inline-flex; align-items:center; height:max(38px, calc(46 * var(--u))); padding:0 calc(22 * var(--u)); border:calc(1.4 * var(--u)) solid rgb(4 40 90 / .45); border-radius:999px; font-weight:400; font-size:max(12px, calc(15 * var(--u))); letter-spacing:.08em; text-transform:uppercase; color:inherit; text-decoration:none; white-space:nowrap; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease) }
.open__jump a:hover{ background:rgb(4 40 90 / .08); border-color:currentColor }
.open__rows{ list-style:none; margin:calc(48 * var(--u)) 0 0; padding:0; border-top:1px solid rgb(4 40 90 / .2) }
.open__row{ display:grid; grid-template-columns:calc(60 * var(--u)) 1fr auto; gap:calc(24 * var(--u)); align-items:center; padding:calc(24 * var(--u)) 0; border-bottom:1px solid rgb(4 40 90 / .2); color:inherit; text-decoration:none }
.open__row > b{ font-weight:400; font-size:max(14px, calc(20 * var(--u))); color:var(--blue) }
.open__row > b.open__letter{ font-weight:900; font-size:max(22px, calc(40 * var(--u))); line-height:1; color:var(--c) }
.open__row h3{ margin:0 0 calc(4 * var(--u)); font-weight:700; font-size:max(22px, calc(40 * var(--u))); line-height:1.05; letter-spacing:var(--ls-tight); transition:color var(--dur-1) var(--ease) }
.open__row:hover h3{ color:var(--orange) }
.open__row p{ margin:0; font-size:max(14px, calc(18 * var(--u))); line-height:1.35; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.open__tags{ display:flex; gap:calc(10 * var(--u)) }
.open .tag{ border-color:rgb(4 40 90 / .45); color:var(--navy); opacity:1 }
.open__rule{ border:0; margin:0; height:1px; background:rgb(4 40 90 / .2) }
.open__loop{ position:absolute; inset:0; z-index:0; overflow:hidden }
.open__loop video{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(1.1) contrast(1.05) }
.open__loop::after{ content:""; position:absolute; inset:0; background:var(--page); opacity:.74 }
.open__fig{ margin:0 }
.open__fig video{ display:block; width:100%; height:100%; object-fit:cover }
.open__obj{ min-width:0 }
.open__cassette{ position:relative; width:100%; max-width:calc(420 * var(--u)) }
.open__cassette img{ width:100%; height:auto; display:block }
.open__ring{ position:relative; width:100%; max-width:calc(420 * var(--u)) }
.open__ring .loop__ring{ position:relative; aspect-ratio:1 }
.open__ring svg{ width:100%; height:auto; display:block; overflow:visible }
.open__ring .loop__word{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); padding:calc(6 * var(--u)) calc(10 * var(--u)); background:var(--paper); font-weight:700; font-size:max(14px, calc(26 * var(--u))); letter-spacing:var(--ls-tight); color:var(--c) }
.open__groups{ list-style:none; margin:0; padding:0 }
.open__groups li{ border-top:1px solid rgb(4 40 90 / .2) } .open__groups li:last-child{ border-bottom:1px solid rgb(4 40 90 / .2) }
.open__groups a{ display:block; padding:calc(18 * var(--u)) 0; font-weight:700; font-size:max(20px, calc(30 * var(--u))); letter-spacing:var(--ls-tight); color:inherit; text-decoration:none }
.open__groups a:hover{ color:var(--orange) }
.open .hero__card{ width:calc(320 * var(--u)); border-radius:calc(16 * var(--u)) }
/* on a dark opener the pills, rows and rules turn to paper */
.open--dark .open__jump a{ border-color:rgb(244 244 244 / .45) } .open--dark .open__jump a:hover{ background:rgb(244 244 244 / .12) }
.open--dark .open__rows,.open--dark .open__row,.open--dark .open__rule,.open--dark .open__groups li{ border-color:rgb(244 244 244 / .25); background-color:transparent }
.open--dark .open__rule{ background:rgb(244 244 244 / .25) }
.open--dark .tag{ border-color:rgb(244 244 244 / .6); color:var(--on-navy) }
.open--dark .open__row > b{ color:#3a8de0 }

/* the tinted loop: the hero footage behind, tinted the page's colour (orange for Sessions, blue for the program, navy for Questions) */
html .open{ min-height:64svh; display:grid; align-content:end; background:var(--page); color:var(--paper); padding-top:calc(220 * var(--u)) }
html .open__loop{ display:block }
html .open__k{ color:var(--paper) }
html .open__p{ opacity:1 }
html .page--sub .bar:not(.bar--solid){ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; padding-block:calc(40 * var(--u)) }

/* phones: the opener stacks */
@media (max-width:820px){
  .open{ padding:110px 20px 44px }
  .open__h{ font-size:var(--m-display) }
  .open__p{ font-size:var(--m-3) }
  .open__body{ margin-top:14px }
  .open__k{ margin-bottom:14px }
  .open__jump{ gap:8px; margin-top:24px } .open__jump a{ height:34px; padding:0 14px; font-size:12px; letter-spacing:.06em; border-width:1px }
  .open__rows{ margin-top:28px } .open__row{ grid-template-columns:1fr; gap:8px; padding:16px 0 } .open__row > b{ display:none } .open__row h3{ font-size:var(--m-2) } .open__row p{ font-size:15px; white-space:normal } .open__tags{ flex-wrap:wrap; gap:8px }
  .open__cassette,.open__ring{ max-width:280px; margin-top:28px }
  .open .hero__card{ width:100%; margin-top:28px; flex-direction:row; gap:12px; border-radius:14px; padding:6px }
  .open .hero__card-media{ width:38%; height:auto; aspect-ratio:16/10; flex:none; border-radius:9px }
  .open .hero__card-body{ flex:1; gap:14px; padding:6px 6px 4px }
  .open .hero__card-label{ font-size:14px }
  .open .hero__card-title{ font-size:15px; max-width:100% }
  .open .hero__card svg{ width:13px; height:13px }
  html .open{ min-height:0; padding:130px 20px 44px }
           }

/* ================= Sessions body: the Mixtape section, round three ==========================
   The strip: one h2, tier + stats, theme names, a tape that says only the title, Side A (For, In the
   room), Side B (What you keep) and Customize. Receipts: NN/g progressive disclosure (two levels, obvious progression), Hick's law
   (fewer simultaneous choices, the recommended one obvious), NN/g visual hierarchy (contrast, scale,
   grouping by whitespace). */
.page--sub .sessions__top h2{ display:block }
.sessions__top{ grid-template-columns:minmax(0, 1fr); margin-bottom:calc(56 * var(--u)) }
.sessions__top h2{ font-size:max(30px, calc(64 * var(--u))) }
.ses__panel > *{ margin-top:calc(30 * var(--xu)) }
.ses__after,.mix__close,.ses__scrim{ display:none }
.ses__theme em{ display:none !important }

/* ---------- the strip: the clear shell with the copy taken off ---------- */
.mix[data-variant="tstrip"]{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"cover cover" "notes keep";gap:calc(30 * var(--xu)) calc(54 * var(--xu));align-content:start;
  padding:calc(40 * var(--xu)) calc(48 * var(--xu)) calc(44 * var(--xu));border-radius:calc(30 * var(--xu));border:max(1.5px,calc(2 * var(--xu))) solid rgb(244 244 244 / .6);
  color:var(--on-navy);overflow:hidden;background:linear-gradient(180deg,rgb(244 244 244 / .06),rgb(244 244 244 / .015));min-height:0}
.mix[data-variant="tstrip"]::after{content:"";position:absolute;inset:calc(12 * var(--xu));border:1px solid rgb(244 244 244 / .22);border-radius:calc(20 * var(--xu));pointer-events:none}
[data-variant="tstrip"] > *{position:relative;z-index:1}
[data-variant="tstrip"] .mix__window{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.3}
[data-variant="tstrip"] .mix__reels{position:absolute;left:calc(-110 * var(--xu));right:calc(-110 * var(--xu));bottom:calc(-210 * var(--xu));justify-content:space-between}
[data-variant="tstrip"] .mix__reel{width:calc(460 * var(--xu));height:calc(460 * var(--xu))}
[data-variant="tstrip"] .mix__band,[data-variant="tstrip"] .mix__transport,[data-variant="tstrip"] .mix__foot{display:none}
[data-variant="tstrip"] .mix__cover{grid-area:cover;padding-bottom:calc(22 * var(--xu))}
[data-variant="tstrip"] .mix__cover::after{content:"";display:block;margin-top:calc(18 * var(--xu));height:max(3px,calc(4 * var(--xu)));border-radius:9px;background:var(--orange);width:calc(120 * var(--xu))}
[data-variant="tstrip"] .mix__title{font-size:max(26px,calc(54 * var(--xu)))}
[data-variant="tstrip"] .mix__notes{grid-area:notes;display:grid;gap:calc(14 * var(--xu));align-content:start}
[data-variant="tstrip"] .mix__k,[data-variant="tstrip"] .mix__keep > b{font-size:max(14px,calc(14 * var(--xu)));letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--on-navy);opacity:.85;padding-bottom:calc(8 * var(--xu));border-bottom:1px solid rgb(244 244 244 / .3)}
[data-variant="tstrip"] .mix__note b{font-size:max(14px,calc(12 * var(--xu)));opacity:.7}
[data-variant="tstrip"] .mix__note p{color:rgb(255 255 255 / .92)}
[data-variant="tstrip"] .mix__keep{grid-area:keep;padding-bottom:calc(70 * var(--xu))}
[data-variant="tstrip"] .mix__list{font-family:var(--font-display);font-size:max(17px,calc(21 * var(--xu)));line-height:1.3;display:grid;gap:calc(10 * var(--xu));margin-top:calc(14 * var(--xu))}
[data-variant="tstrip"] .mix__list li::before{color:var(--on-navy);font-weight:700}
[data-variant="tstrip"] .mix__book{position:absolute;right:calc(48 * var(--xu));bottom:calc(44 * var(--xu));z-index:2;text-transform:none;font-size:max(18.67px,calc(17 * var(--xu)));padding-inline:calc(28 * var(--xu))}
[data-variant="tstrip"].is-loading .mix__reel{animation-duration:1.4s}
/* the strip with one side at a time: Side A shows, Side B is on the back, a Flip pill turns it */
.tag--book{ text-transform:none; font-size:max(14px, calc(16 * var(--u))) }

@media (min-width:821px){
  /* the flat mode: the rows, wraps and panels dissolve into one grid; each part takes a named area; closed rows' parts are put away */
  html .ses,html .ses > div:first-child,html .ses__wrap,html .ses__panel,html .ses__left{ display:contents }
  html .ses__n,html .ses__mark,html .ses__store{ display:none }
  html .ses__panel{ perspective:none }
  html.js .ses[data-open="false"] .ses__tags,html.js .ses[data-open="false"] .ses__themes,html.js .ses[data-open="false"] .mix{ display:none }
  html .sessions{ display:grid; align-content:start }
  html .sessions__top{ grid-area:h }
  html .ses[data-row="ed"] h3{ grid-area:t1 } html .ses[data-row="qw"] h3{ grid-area:t2 } html .ses[data-row="dd"] h3{ grid-area:t3 }
  html .ses__tags{ grid-area:g; justify-content:flex-start; flex-wrap:wrap; row-gap:calc(10 * var(--u)) }
  html .ses__themes{ grid-area:l }
  html .mix{ grid-area:m; align-self:start }
  html .ses__panel > *{ margin-top:0 }
  html .ses h3{ margin:0 }
  html .ses__toggle{ transition:color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease) }
  html.js .ses[data-open="false"] .ses__toggle{ opacity:.4 }
  html .ses__toggle:hover{ opacity:1 }
  /* the stats line: small caps, hairlines, no pills, so the tier name is the only big thing in its zone */
  html .ses__tags .tag:not(.tag--book){ width:auto; height:auto; padding:0; border:0; opacity:.75; font-weight:400; font-size:max(14px, calc(16 * var(--u))); letter-spacing:.02em; text-transform:none }
  html .ses__tags .tag:not(.tag--book):not(:first-child)::before{ content:"\00b7"; margin-right:calc(12 * var(--u)); opacity:.6 }
  html .ses__tags{ gap:calc(12 * var(--u)); align-items:center }
  html .ses__tags .tag--book{ margin-left:calc(16 * var(--u)) }
  /* the theme list, plain: numbers dim, titles one size, the loaded one bright with an orange mark */
  html .ses__theme{ padding:calc(12 * var(--u)) 0; font-size:max(16px, calc(22 * var(--u))); color:rgb(255 255 255 / .62); background:none !important; box-shadow:none !important }
  html .ses__theme:hover{ padding-left:0; color:#fff }
  html .ses__theme[aria-pressed="true"]{ color:#fff; font-weight:700 }
  html .ses__theme b{ font-size:max(14px, calc(13 * var(--u))); color:rgb(255 255 255 / .45); font-weight:400 }
  html .ses__theme[aria-pressed="true"] b{ color:var(--orange); font-weight:700 }
 }
@media (max-width:820px){
  .sessions__top{ margin-bottom:24px } .sessions__top h2{ font-size:var(--m-1) }
  .mix[data-variant="tstrip"]{ grid-template-columns:minmax(0,1fr); grid-template-areas:"cover" "notes" "keep"; padding:26px 22px 26px }
  [data-variant="tstrip"] .mix__book{ position:static; justify-self:start; margin-top:16px }
  [data-variant="tstrip"] .mix__keep{ padding-bottom:0 }
  [data-variant="tstrip"] .mix__title{ font-size:var(--m-1) }
}

@media (min-width:821px){
  /* the set list: three Sessions with their stats, the set list drops under the Session you press,
     a theme slides the tape in from the right as a drawer with a close and Customize */
  html .sessions{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"h" "t1" "g1" "l1" "t2" "g2" "l2" "t3" "g3" "l3"; padding-inline:max(calc(52 * var(--u)), calc((100% - 1000 * var(--u)) / 2)) }
  html .ses[data-row="ed"] .ses__tags{ grid-area:g1 } html .ses[data-row="qw"] .ses__tags{ grid-area:g2 } html .ses[data-row="dd"] .ses__tags{ grid-area:g3 }
  html .ses[data-row="ed"] .ses__themes{ grid-area:l1 } html .ses[data-row="qw"] .ses__themes{ grid-area:l2 } html .ses[data-row="dd"] .ses__themes{ grid-area:l3 }
  html .ses h3{ padding:calc(20 * var(--u)) 0 0; border-top:1px solid rgb(244 244 244 / .25) }
  html .ses[data-row="dd"][data-open="false"] .ses__tags{ border-bottom:1px solid rgb(244 244 244 / .25) }
  html .ses__toggle{ font-size:max(28px, calc(54 * var(--u))); width:100%; justify-content:space-between }
  html.js .ses[data-open="false"] .ses__toggle{ opacity:.85 }
  html .ses__toggle::after{ content:"+"; font-weight:400; opacity:.6 } html .ses[data-open="true"] .ses__toggle::after{ content:"\2212" }
  html.js .ses[data-open="false"] .ses__tags{ display:flex; opacity:.7 }
  html .ses__tags{ padding:calc(8 * var(--u)) 0 calc(22 * var(--u)) }
  html .ses__tags .tag--book{ display:none }
  html .ses__themes{ margin:0 0 calc(40 * var(--u)); border-top:1px solid rgb(244 244 244 / .25) }
  html .ses__theme{ font-size:max(20px, calc(30 * var(--u))); padding:calc(16 * var(--u)) 0; justify-content:space-between }
  html .ses__theme::after{ content:"\2192"; font-weight:400; opacity:.5 }
  html .ses__theme[aria-pressed="true"]{ font-weight:400 } html .ses__theme[aria-pressed="true"] b{ color:rgb(255 255 255 / .45); font-weight:400 }
  html .ses.is-peek .ses__theme[aria-pressed="true"]{ font-weight:700 } html .ses.is-peek .ses__theme[aria-pressed="true"] b{ color:var(--orange); font-weight:700 }
  html .ses__panel{ perspective:none }
  html .ses__scrim{ position:fixed; inset:0; z-index:60; background:rgb(1 13 29 / .6); opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease) }
  html .ses.is-peek .ses__scrim{ display:block; opacity:1; pointer-events:auto }
  html .ses .mix{ position:fixed; z-index:70; margin:0; align-self:stretch; justify-self:stretch; display:grid !important; transform:translateX(110%); transition:transform var(--dur-2) var(--ease) }
  html .ses.is-peek .mix{ transform:none }
  html:root .mix__close{ display:grid; place-items:center; position:absolute; top:calc(24 * var(--u)); right:calc(24 * var(--u)); width:calc(44 * var(--u)); height:calc(44 * var(--u)); border:1px solid rgb(244 244 244 / .5); border-radius:50%; background:none; color:#fff; font-size:calc(24 * var(--u)); cursor:pointer; z-index:3 }
  html [data-variant="tstrip"] .mix__keep{ padding-bottom:calc(70 * var(--u)) }

  /* the drawer, a half sheet: a full-height sheet, half the screen, a smaller landscape cassette centred in it */
  html .ses__scrim{ background:linear-gradient(90deg, rgb(1 13 29 / .55) 0 50vw, var(--navy) 50vw) }
  html .ses.is-peek .ses__scrim::after{ content:""; position:absolute; top:0; bottom:0; left:50vw; width:1px; background:rgb(244 244 244 / .3) }
  html .ses .mix{ top:50%; right:calc((50vw - 640 * var(--u)) / 2); width:calc(640 * var(--u)); height:calc(420 * var(--u)); transform:translate(220%, -50%); --xu:calc(var(--u) * .78) }
  html .ses.is-peek .mix{ transform:translate(0, -50%) }
  html .mix[data-variant="tstrip"]{ background:linear-gradient(180deg, #0a3a7a, #04285a 70%); border-color:rgb(244 244 244 / .7); align-content:start; overflow:hidden; padding:calc(30 * var(--u)) calc(34 * var(--u)) }
  html [data-variant="tstrip"] .mix__book{ right:calc(34 * var(--u)); bottom:calc(30 * var(--u)) }
}

/* LG 10-02: the drawer never shows unless a theme is pressed. The tier toggle used to run the old
   in-flow tape entrance (.mix.is-entering) on the fixed drawer, which flew it on screen for a second */
.ses .mix.is-entering{ animation:none }

/* ---------- the Sessions head copy: the two questions lead, the definition follows ---------- */
.open__p1,.sum__q{ display:block; font-weight:700; margin-bottom:.4em; letter-spacing:-.01em }
.open__p2{ display:block }
html .open__p{ max-width:calc(900 * var(--u)) }
/* the tier-level button goes on every screen size: Customize lives on the theme card only */
html .ses__tags .tag--book{ display:none }

/* 09-30: the Compound phase has no end box; hide the empty one in the dialog */
.phase-end:empty{ display:none }

/* ==================================================================
   r9 · edits from the 09-30 call (LG + Eduardo)
================================================================== */
/* hero: the subline as two balanced lines */
@media (min-width:821px){
  .hero__lede{ max-width:none !important }
  .hero__ll{ display:block; white-space:nowrap }
}
/* statement: the label sits under the video as its caption, aligned to its edge */
html .stmt__fig{ display:flex; flex-direction:column }
html .stmt__label{ order:2; margin:calc(20 * var(--u)) 0 0 }
/* statement: all navy, an orange full stop, a size smaller and lighter; "by doing" turns orange on hover */
html:root .stmt .st__thesis{ --n:80 }
html:root .stmt .st__thesis.w-black{ font-weight:700 !important }
html:root .stmt .st__thesis em{ color:var(--navy) !important; cursor:default; transition:color .45s var(--ease) }
html:root .stmt .st__thesis em:hover{ color:var(--orange) !important }
html:root .stmt .st__dot{ color:var(--orange) }
/* sub-page titles one weight lighter, to match the section titles */
.open__h{ font-weight:700 !important }
/* Sessions: tier labels readable, more air between the three tiers */
html .ses__tags .tag{ color:#fff !important; opacity:1 !important; font-weight:700 !important; font-size:max(14px, calc(15 * var(--u))) !important; letter-spacing:.06em !important }
html.js .ses[data-open="false"] .ses__tags{ opacity:1 }
html.js .ses[data-open="false"] .ses__toggle{ opacity:1 }
html .ses h3{ padding-top:calc(46 * var(--u)) }
html .ses__tags{ padding-bottom:calc(46 * var(--u)) }
html .sessions__top{ margin-bottom:calc(30 * var(--u)) }
/* Sessions: the Mixtape block after the flow */
.mixend{ min-height:auto; display:block; overflow:visible; --fit:1 !important; background:var(--navy); color:var(--on-navy); padding:calc(150 * var(--u)) var(--gutter-x) }
.mixend__in{ display:grid; grid-template-columns:minmax(0, 1fr) calc(460 * var(--u)); gap:calc(90 * var(--u)); align-items:center; max-width:calc(1160 * var(--u)); margin:0 auto }
.mixend__h{ margin:0 0 calc(24 * var(--u)); font-family:var(--font-display); font-weight:700; font-size:max(32px, calc(64 * var(--u))); line-height:1.02; letter-spacing:var(--ls-tight); color:#fff }
.mixend__p{ margin:0; max-width:calc(560 * var(--u)); font-family:var(--font-display); font-size:max(16px, calc(22 * var(--u))); line-height:1.4; color:rgb(255 255 255 / .82) }
.mixend__tape{ position:relative; width:100%; transform:rotate(-3deg); filter:drop-shadow(0 calc(30 * var(--u)) calc(60 * var(--u)) rgb(0 0 0 / .35)) }
.mixend__tape img{ display:block; width:100% }
@media (max-width:820px){ .mixend{ padding:80px 20px } .mixend__in{ grid-template-columns:1fr; gap:40px; max-width:none } .mixend__h{ margin-bottom:24px } .mixend__p{ max-width:none } .mixend__tape{ max-width:320px } }
/* timings removed from the phases: hide any empty chip left in the dialogs */
.chip:empty{ display:none }
/* Program: one audit, then the loop */
.loop#loop{ display:block }
.cycle{ width:100%; margin:0 0 calc(60 * var(--u)) }
.cycle__svg{ display:block; width:100%; height:auto; overflow:visible }
.cycle__t{ font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.02em }
.cycle__n{ font-family:var(--font-display); font-weight:700; font-size:20px; fill:var(--navy) }
.cycle__s{ font-family:var(--font-display); font-weight:400; font-size:16px; fill:rgb(4 40 90 / .7) }
.cycle__lg{ fill:var(--navy) }
.loop#loop .loop__list{ max-width:calc(1000 * var(--u)) }
/* Home: our team · film left, words right, the client names as one moving line (10-05).
   Replaces the stacked version. One markup order (headline, film, text) so the phone
   reads headline, film, text with no reordering; desktop places the film left with
   grid areas. The line runs two identical sets and slides by half its width. */
.proof{ min-height:auto !important; height:auto !important; overflow:visible !important; --fit:1 !important; display:block !important; padding-block:calc(150 * var(--u)) calc(110 * var(--u)) !important }
.proof__split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-areas:"vid head" "vid text"; column-gap:calc(72 * var(--u)); row-gap:calc(32 * var(--u)) }
.proof__split h2{ grid-area:head; align-self:end; margin:0; text-align:left }
.proof__video{ grid-area:vid; align-self:center; width:100%; margin:0; aspect-ratio:16 / 9; border-radius:calc(28 * var(--u)); overflow:clip; background:#cfd6df }
.proof__video video{ display:block; width:100%; height:100%; object-fit:cover }
.proof__text{ grid-area:text; align-self:start; width:100% }
.proof__text .proof__lede{ margin:0 0 1em; max-width:none; font-size:max(17px, calc(20 * var(--u))); line-height:1.45; text-wrap:pretty }
.proof__text .proof__lede:last-child{ margin-bottom:0 }
.proof__logos{ margin-top:calc(96 * var(--u)); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.proof__track{ display:flex; width:max-content; animation:proof-line 36s linear infinite }
.proof__logos:hover .proof__track{ animation-play-state:paused }
.proof__set{ display:flex; align-items:center; gap:calc(88 * var(--u)); padding-right:calc(88 * var(--u)) }
.proof__set .logo{ flex:none; min-height:calc(56 * var(--u)) }
@keyframes proof-line{ to{ transform:translate3d(-50%,0,0) } }
@media (prefers-reduced-motion:reduce){
  .proof__track{ animation:none; width:auto }
  .proof__set[aria-hidden]{ display:none }
  .proof__logos{ -webkit-mask-image:none; mask-image:none }
  .proof__set{ flex-wrap:wrap; justify-content:center; padding-right:0; row-gap:calc(40 * var(--u)) }
}
@media (max-width:820px){
  .proof{ padding:70px 20px !important }
  .proof__split{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "vid" "text"; row-gap:24px }
  .proof__video{ border-radius:16px }
  .proof__logos{ margin:48px -20px 0 }
  .proof__track{ animation-duration:25s }
  .proof__set{ gap:44px; padding-right:44px }
  .proof__set .logo{ min-height:40px }
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .proof__logos{ margin-inline:0 }
  .proof__set{ gap:22px 28px }
}
/* footer: the questions link */
.f-q{ margin-top:6px }
@media (min-width:821px){ html .sessions{ align-content:center } html .ses h3{ padding-top:calc(56 * var(--u)) } html .ses__tags{ padding-bottom:calc(56 * var(--u)) } }
@media (max-width:820px){ .cycle{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-inline:-20px; padding-inline:20px } .cycle__svg{ min-width:760px } }
/* 10-02: px for the --u values that collapse on phones (--u is about 0.27px inside a .section there) */
@media (max-width:820px){
  html .open__p{ max-width:none }
  /* the Sessions lede on the orange wash: large text on phones (700 at 18.67px) */
  .open[data-page="sessions"] .open__p{ font-size:18.67px; font-weight:700 }
  html .sessions__top{ margin-bottom:24px }
  .loop#loop .loop__list{ max-width:none }
}

/* ================= 10-03 · phones (max-width 760px) ================
   Brief 2026-10-03 §1, matched to cowork_previews/mobile_mockups_home_sessions.png
   and mobile_home_hero_statement_v2.png (right-hand columns). html:root lifts these
   over the pages' own <style> blocks, which load after this file. */
@media (max-width:760px){
  /* Home hero: one centred column, the text block centred between the bar and the card */
  html:root .hero__bottom{ top:84px; bottom:20px; left:18px; right:18px; flex-direction:column; align-items:center; justify-content:space-between; gap:20px; flex-wrap:nowrap }
  html:root .hero__copy{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; max-width:none; text-align:center }
  html:root .hero__eyebrow{ max-width:30ch; margin:0 0 26px; font-size:14px }
  html:root .hero__title{ font-size:clamp(52px, 16vw, 72px); line-height:.98 }
  html:root .hero__lede{ width:auto; max-width:30ch; margin:28px 0 0; font-size:17px }
  html:root .hero__cardwrap{ width:100% }
  html:root .hero__card{ width:100%; margin-inline:auto }
  html:root .hero__card-body{ align-items:center; text-align:center }
  html:root .hero__card-row{ justify-content:center }

  /* sub-page openers (Sessions, The full program, Questions): same centred rule and rhythm */
  html:root .open__in{ text-align:center }
  html:root .open__k{ margin:0 auto 26px; max-width:30ch }
  html:root .open__body{ margin-top:28px }
  html:root .open .open__p{ max-width:30ch; margin-inline:auto; font-size:17px; font-weight:400 }
  html:root .open .open__p1{ font-weight:400; margin-bottom:0 }
  html:root .open .open__p2{ margin-top:26px; font-weight:400 }
  /* Sessions: only the two questions and "Neither would we." carry weight */
  html:root .open[data-page="sessions"] .open__p1{ font-weight:700 }

  /* Home statement: lede, 26 / headline / 26, the line, all centred on 30ch; video full width 44 under */
  html:root .stmt__grid{ gap:44px }
  html:root .st{ text-align:center }
  html:root .st p{ max-width:30ch; margin-inline:auto }
  html:root .stmt .st__thesis{ font-size:clamp(40px, 12vw, 56px) }
  html:root .st > * + p{ margin-top:26px }
  html:root .stmt__fig{ width:100% }
  html:root .stmt__cap{ text-align:center }

  /* Our team: both paragraphs as squared, justified blocks */
  html:root .proof__text .proof__lede{ text-align:justify; text-align-last:left; hyphens:auto; -webkit-hyphens:auto }

  /* Sessions tiers, closed rows: small sentence-case pills on one row under a 26px tier name */
  html:root .ses__toggle{ font-size:26px }
  html:root .ses__tags{ flex-wrap:nowrap; gap:6px; padding-top:10px }
  html:root .ses__tags .tag{ width:auto; height:auto; padding:5px 9px !important; border:1px solid rgb(244 244 244 / .6) !important; border-radius:999px; font-size:11px !important; font-weight:700 !important; letter-spacing:.01em !important; text-transform:none !important; line-height:1.2; white-space:nowrap }
  html:root .ses__tags .tag:not(.tag--book)::before{ content:none }
  html:root .ses__tags .tag--book{ display:none }

  /* Flow of a Session: each pane a numeral column and a text column (the slider itself is unchanged) */
  html:root .runs__pane{ grid-template-columns:56px minmax(0, 1fr); align-items:start; column-gap:18px; row-gap:0 }
  html:root .runs__n{ order:-1; width:56px; font-size:56px; line-height:1; text-align:left }
  html:root .runs__pane h3{ margin-bottom:8px; font-size:20px }
  html:root .runs__pane p{ font-size:15px }
  html:root .runs__pane .more{ margin-top:12px; font-size:13px }
}

/* ================= 10-03 addendum · Home "See the full program" =====
   Under the four tiles, centred, inside the pinned stage; it fades in with the
   tiles (it is one of the script's reveal blocks), shown outright where they are. */
.phases__more{ display:flex; justify-content:center; margin-top:calc(40 * var(--u)); opacity:0; transition:opacity var(--dur-2) var(--ease) }
html.no-js .phases__more{ opacity:1 !important }
@media (prefers-reduced-motion:reduce){ .phases__more{ opacity:1 !important } }
@media (max-width:820px){ .phases__more{ margin-top:28px; opacity:1 !important } }

/* ================= 10-03 · Sessions opener, desktop rhythm ==========
   With three bold lines and a four-line paragraph the 22u / .4em gaps ran the
   title, the questions and the paragraph together. Same rhythm as the phones
   (title 28 / questions 26 / paragraph), scaled on --u. */
@media (min-width:761px){
  html:root .open[data-page="sessions"] .open__body{ margin-top:calc(34 * var(--u)) }
  html:root .open[data-page="sessions"] .open__p1{ margin-bottom:calc(30 * var(--u)) }
}

/* ================= 10-03 · Questions opener, title only =============
   With the eyebrow and the line gone the band no longer needs the openers'
   64svh: the title sits with equal space above (from the bar's content) and below. */
html:root .open[data-page="questions"]{ min-height:0; padding-top:calc(220 * var(--u)); padding-bottom:calc(134 * var(--u)) }
@media (max-width:820px){
  html:root .open[data-page="questions"]{ padding-top:130px; padding-bottom:56px }
}

/* ================= 10-03 · footer legal links (ideafoster.com pages) */
.f-legal a.f-law{ color:inherit; text-decoration:none }
.f-legal a.f-law:hover{ text-decoration:underline; text-underline-offset:3px }
.f-legal a.f-law:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:4px }

/* ================= 10-07 · Book a Session, floating (assets/book-cta.js)
   Phones and small tablets only, where the nav's own button folds into MENU.
   White pill over navy and orange, navy pill over [data-bg="light"]; fades and
   rises 12px in 200ms, colours cross over in 150ms. Under the nav (60) and the
   drawers and sheets (79 to 90). Above 820 px the nav button does this job. */
.bookbar{ display:none }
@media (max-width:820px){
  .bookbar{
    position:fixed; z-index:55;
    left:16px; right:16px;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px) + var(--bookbar-lift, 0px));
    display:flex; align-items:center; justify-content:center;
    height:48px; padding:0 20px; border-radius:999px;
    background:#fff; color:var(--navy); border:0; box-shadow:none;
    font-family:var(--font-display); font-weight:400; font-size:15px;
    letter-spacing:var(--ls-body); text-transform:uppercase;
    text-decoration:none; white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translate3d(0,12px,0);
    transition:opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s,
               background-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .bookbar.is-on{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    transition:opacity .2s ease-out, transform .2s ease-out, visibility 0s,
               background-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .bookbar--light{ background:var(--navy); color:#fff; box-shadow:0 4px 14px rgb(4 40 90 / .14) }
  .bookbar:focus-visible{ outline:2px solid var(--orange); outline-offset:3px }
}
/* 768 to 820: a centred pill, not a 736px slab */
@media (min-width:768px) and (max-width:820px){
  .bookbar{ left:50%; right:auto; width:440px; margin-left:-220px }
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .bookbar, .bookbar.is-on{ transform:none }
}