/* =========================================================================
   CURATE YOUR SESSION  —  r102
   A package row that opens a navy-glass LIGHT BOX (the INTRODUCE pattern).
   The row is the trigger; the tool lives in the overlay.

   Inks sampled from Steven's own exports, not guessed:
     classic-name.png (script) dominant rgb(232,248,248), highlights to #fff
     classic-meta.png (caps)   dominant rgb(200,232,232), highlights rgb(230,255,255)
   ========================================================================= */

/* ---------------------------------------------------------------- THE ROW */
#fhaMobile .s2slot.curSlot, #fhaMobile .s2slot.curSlot * { box-sizing: border-box }

/* section2 makes .s2acc panels full width; this row belongs to the PACKAGE
   family, so it takes their 87% and leaves the »» tab showing. .s2acc must be
   in the selector to outrank "#fhaMobile .s2slot.s2acc .panel { width:100% }". */
#fhaMobile .s2slot.s2acc.curSlot .panel {
    width: 87%;
    /* package glass, a touch deeper — nowhere near the solid CONSULT */
    /* A true MIDPOINT between the two references.  The package plate is
       rgba(235,248,249,.22) over the teal ground; CONSULT is solid #056981.
       Compositing #056981 at 50% over the package plate lands exactly
       halfway between them:  P(1-a) + C*a  with a = .5. */
    background: linear-gradient(0deg, rgba(54, 131, 150, .88), rgba(54, 131, 150, .88)),
                rgba(235, 248, 249, .22);
    /* the package rows are CLOSED boxes — their art is composed inside
       1600x268 and never breaks the panel.  This row does the same. */
    overflow: hidden;
}

/* The row is now ARTWORK, exactly like the other five: two 1600x268 PNGs
   layered in the panel.  session-etch-m.png (Burgues "Curate") and
   session-name.png (Playfair "your SESSION"), generated from the same
   typefaces the site loads and matched to the measured ink boxes of
   classic-etch-m.png / classic-name.png.  No live type, no hand-placed
   gradients — the same pipeline as every other package row. */
#fhaMobile .s2slot.curSlot .curHd {
    position: relative;
    display: block;
    min-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#fhaMobile .s2slot.curSlot .curHd:focus { outline: none }
#fhaMobile .s2slot.curSlot .curHd:focus-visible { outline: 2px solid #A2E7E8; outline-offset: -3px }

/* Reclaim a little rhythm, and ONLY on a page carrying the tool. */
@media (max-width: 991px) {
    #fhaMobile.has-curate .ptitle  { margin-bottom: 2px }
    #fhaMobile.has-curate .psub    { margin-bottom: 6px }
    #fhaMobile.has-curate .s2slot  { margin-bottom: 4px }
}

/* ------------------------------------------------------------ THE LIGHTBOX
   Navy glass, the INTRODUCE (#ngSheet) pattern.

   css/mobile-home.css carries, under (max-width: 991px):
       body > :not(#fhaMobile) { visibility: hidden !important;
                                 content-visibility: hidden }
   Specificity (1,0,1) — the :not() argument is an ID — so NO class selector
   can beat it, and the !important means a winning selector still needs
   !important back. Doubled IDs, exactly as #ngSheet does it.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {
    body > #curScrim#curScrim,
    body > #curSheet#curSheet {
        visibility: visible !important;
        content-visibility: visible;
    }
}

#curScrim, #curSheet, #curSheet * { box-sizing: border-box }

#curScrim {
    position: fixed;
    inset: 0;
    z-index: 5199;
    background: rgba(2, 26, 40, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
}
#curScrim.open { opacity: 1; pointer-events: auto }

#curSheet {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
}
#curSheet.open { opacity: 1; pointer-events: auto }

.curIn {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 360px);
    max-height: calc(100dvh - 32px);
    padding: 20px 20px 0;
    border: 1px solid rgba(161, 231, 232, .38);
    border-radius: 2px;
    background: rgba(3, 47, 72, .93);
    box-shadow: 0 18px 46px rgba(1, 18, 30, .5);
    /* the fade lives HERE, never on the body-level nodes: a transition on
       one of those is frozen by the shell's content-visibility rule, and a
       frozen CSSTransition outranks even inline !important. */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .26s ease, transform .26s ease;
}
#curSheet.open .curIn { opacity: 1; transform: none }
.curIn:focus, .curIn:focus-visible { outline: none }

.curX {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    color: #A2E7E8;
    font: 400 21px/1 system-ui, sans-serif;
    cursor: pointer;
}

.curTitle {
    margin: 0 40px 2px 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #EAF7F7;
    -webkit-text-stroke: .35px currentColor;
    paint-order: stroke fill;
    text-shadow: var(--ivm-float, 1px 1px 1px rgba(2, 44, 68, .66));
}
/* the triplet from the original button */
.curCue {
    margin: 0 0 10px;
    font-family: Raleway, system-ui, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #A2E7E8;
}

.curLead {
    margin: 0 0 12px;
    font-family: Raleway, system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
    color: #C1D7D7;
}

/* ---------- the scrolling stack of sliders ---------- */
.curBody {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    margin: 0 -4px;
    padding: 0 4px 4px;
}
.curRow { padding: 8px 0 2px; border-top: 1px solid rgba(161, 231, 232, .16) }
.curRow:first-child { border-top: 0 }
.curRow.locked { opacity: .48 }
.curLbl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.curLbl b {
    font-family: Raleway, system-ui, sans-serif;
    font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #A9CFD2;
}
.curLbl i {
    font-style: normal; font-family: Raleway, system-ui, sans-serif;
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: #7FB3B8;
}
.curPick {
    display: block; margin: 1px 0 0;
    font-family: Raleway, system-ui, sans-serif;
    font-size: 13px; font-weight: 700; line-height: 1.3; color: #EAF7F7;
    -webkit-text-stroke: .35px currentColor; paint-order: stroke fill;
}
.curDesc {
    display: block; margin: 2px 0 0;
    font-family: Raleway, system-ui, sans-serif;
    font-size: 11px; font-weight: 500; line-height: 1.35; color: #9FBEC2;
}
.curRow input[type=range] {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%; height: 40px; margin: 0;
    background: none; cursor: pointer;
}
.curRow input[type=range]:disabled { cursor: default }
.curRow input[type=range]::-webkit-slider-runnable-track {
    height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, #A2E7E8 0 var(--fill, 0%), rgba(161, 231, 232, .22) var(--fill, 0%) 100%);
}
.curRow input[type=range]::-moz-range-track {
    height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, #A2E7E8 0 var(--fill, 0%), rgba(161, 231, 232, .22) var(--fill, 0%) 100%);
}
.curRow input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 19px; height: 19px; margin-top: -8px; border-radius: 50%;
    border: 1px solid rgba(2, 44, 68, .55);
    background: linear-gradient(155deg, #FFFFFF 6%, #CFE6E8 34%, #8FB6BC 62%, #E8F5F6 100%);
    box-shadow: 0 1px 3px rgba(1, 18, 30, .55);
}
.curRow input[type=range]::-moz-range-thumb {
    width: 19px; height: 19px; border-radius: 50%;
    border: 1px solid rgba(2, 44, 68, .55);
    background: linear-gradient(155deg, #FFFFFF 6%, #CFE6E8 34%, #8FB6BC 62%, #E8F5F6 100%);
    box-shadow: 0 1px 3px rgba(1, 18, 30, .55);
}
.curRow input[type=range]:focus-visible { outline: 2px solid #A2E7E8; outline-offset: 2px }
.curTicks { display: flex; justify-content: space-between; margin: -12px 8px 0; pointer-events: none }
.curTicks span { width: 2px; height: 2px; border-radius: 50%; background: rgba(161, 231, 232, .38) }

/* ---------- the scorecard ---------- */
.curScore {
    flex: 0 0 auto; margin: 0 -20px;
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(161, 231, 232, .3);
    background: rgba(2, 34, 54, .72);
}
.curFig { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px }
.curFig div { display: flex; flex-direction: column }
.curFig span {
    font-family: Raleway, system-ui, sans-serif;
    font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: #A9CFD2;
}
.curFig b {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 21px; font-weight: 700; line-height: 1.1; color: #EAF7F7;
    -webkit-text-stroke: .35px currentColor; paint-order: stroke fill;
    text-shadow: var(--ivm-float, 1px 1px 1px rgba(2, 44, 68, .66));
}
.curPack {
    margin: 9px 0 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 14px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #A2E7E8;
    -webkit-text-stroke: .35px currentColor; paint-order: stroke fill;
}
.curNote {
    margin: 4px 0 0;
    font-family: Raleway, system-ui, sans-serif;
    font-size: 11px; font-weight: 500; line-height: 1.42; color: #C1D7D7;
}
.curNote.curArtist { color: #A2E7E8; font-weight: 700 }

/* ---------- actions ---------- */
.curActs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px }
.curBtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 12px 20px;
    border: 1px solid rgba(162, 231, 232, .75); border-radius: 2px;
    background: rgba(162, 231, 232, .22); color: #EAF7F7;
    font-family: Raleway, system-ui, sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none;
    -webkit-text-stroke: .35px currentColor; paint-order: stroke fill;
    text-shadow: var(--ivm-float, 1px 1px 1px rgba(2, 44, 68, .66));
    cursor: pointer;
}
.curBtn:active { background: rgba(162, 231, 232, .34) }
.curBtn.ghost {
    background: none; border-color: rgba(162, 231, 232, .4);
    color: #C1D7D7; min-height: 42px; font-size: 11px;
}
.curBtn[aria-disabled=true] { opacity: .4; pointer-events: none }

@media (prefers-reduced-motion: reduce) {
    .curIn { transition: none; transform: none }
}

/* The lifted CONSULT must read exactly as it does on page 11, where the
   CTA-stack copy renders with a TRANSPARENT panel (the art carries the
   colour).  Linking home-faq.css restored its 48px height; this closes
   the last difference so the two pages match. */
#fhaMobile .ctaRow .hqa-buttons .s2slot.invert .panel {
    background: transparent;
}

/* curDock: the package column is a flex column whose rows dock to the
   bottom of the scroller; the scroller itself now ends 4px above the CTA
   stack, so nothing can ever slide under CONSULT, and the seven gaps
   between the eight buttons are all exactly 4px on any viewport height.
   Any spare height sits between the subtitle and the first row. */
@media (max-width: 991px){
  #fhaMobile.has-curate{ --gold-gap: 4px }
  /* scroller ends 4px above whatever the CTA stack holds: one gold button
     (pricing) or CONSULT + APPOINTMENT (packages) */
  #fhaMobile.has-curate .colInner{
    bottom: calc(var(--gold-dock) + var(--gold-h) + 4px) !important;
    padding-bottom: 0 !important;
  }
  #fhaMobile.has-curate:has(.ctaRow .hqa-buttons) .colInner{
    bottom: calc(var(--gold-dock) + (var(--gold-h) * 2) + var(--gold-gap) + 4px) !important;
  }
  #fhaMobile.has-curate .cc{
    display: flex !important; flex-direction: column !important;
    flex: 1 0 auto !important; min-height: 100% !important; box-sizing: border-box !important;
  }
  #fhaMobile.has-curate .cc > .s2slot:first-of-type{ margin-top: auto !important }
  #fhaMobile.has-curate .s2slot{ margin-bottom: 4px !important }
  #fhaMobile.has-curate .psub{ margin-bottom: 2px !important }
  #fhaMobile.has-curate .cc > .s2slot:last-of-type,
  #fhaMobile.has-curate .ctaRow .s2slot,
  #fhaMobile.has-curate .s2slot.curSlot.open{ margin-bottom: 0 !important }
  #fhaMobile.has-curate .ctaRow{ gap: 4px !important }
}

/* curLead: the lightbox lead under the title (copy moved back from the drawer) */
.curSheet .curLead{
  margin: 6px 40px 8px 0; font-family: Raleway, system-ui, sans-serif;
  font-size: 12.5px; font-weight: 700; line-height: 1.35; color: rgb(234, 247, 247);
  text-shadow: rgba(2, 44, 68, .66) 1px 1px 1px;
}
.curSheet .curLead .curLeadEx{
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: rgb(193, 215, 215);
}

/* consultGlass: the lifted CONSULTATION button wears page 11's glass
   (home-faq.css .hqa-buttons .s2slot .panel), which pages 23/25 do not load */
@media (max-width: 991px){
  #fhaMobile.has-curate .ctaRow .hqa-buttons .s2slot .panel{
    border: 1px solid rgba(255, 255, 255, .28) !important;
    background: linear-gradient(92deg, rgba(235, 248, 249, .16), rgba(190, 230, 230, .24)) !important;
    backdrop-filter: blur(10px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.18) !important;
    box-shadow: rgba(2, 24, 38, .22) 0 2px 8px !important;
  }
  #fhaMobile.has-curate .ctaRow .hqa-buttons .s2slot .panel::before{
    height: 24px !important;
    background: linear-gradient(rgba(2, 24, 38, .3) 0%, rgba(2, 24, 38, .11) 48%, rgba(2, 24, 38, 0) 100%) !important;
  }
  #fhaMobile.has-curate .ctaRow .hqa-buttons .s2slot .panel::after{
    background: rgba(255, 255, 255, .3) !important;
  }
}

/* sessionFoil (r111): "your SESSION" caps in the same silver foil as the CTA
   labels — his caps alpha (session-name.png) masks the --foil ramp; the open
   state falls back to the aqua -hi art like every other package row */
@media (max-width: 991px){
  #fhaMobile .s2slot.curSlot .artBtn.curHd img.capNmHi{
    opacity: 1 !important; filter: none !important;
    background: var(--foil); background-size: 235% 235%;
    background-position: calc(50% + var(--shx, 0%)) calc(50% + var(--shy, 0%));
    -webkit-mask: url(../images/s2/session-name.png?v=40) 0 0 / 100% 100% no-repeat;
            mask: url(../images/s2/session-name.png?v=40) 0 0 / 100% 100% no-repeat;
    object-position: 300% 0;
  }
  #fhaMobile .s2slot.curSlot.open .artBtn.curHd img.capNmHi{
    background: none; -webkit-mask: none; mask: none; object-position: 50% 50%;
  }
}

/* ---- r113: CURATE ON DESKTOP ------------------------------------------------
   Same row as mobile, in the desktop column. Geometry follows the package
   rows (.s2slot .panel 90.7% + the »» gutter), plate is the mobile midpoint
   tint, caps are the silver foil through his session-name alpha, hover/open
   fall back to the aqua -hi art like every other row. */
@media (min-width: 992px){
  .banner .s2slot.s2acc.curSlot .panel{
    width: 86.1%;   /* the package rows' panel width; pricing's .s2acc panels are 100% and would hide the tab */
    background: linear-gradient(0deg, rgba(54, 131, 150, .88), rgba(54, 131, 150, .88)),
                rgba(235, 248, 249, .22);
    overflow: hidden; cursor: pointer;
  }
  .banner .s2slot.curSlot .curHd{ position: relative; display: block; min-height: 0; cursor: pointer; }
  .banner .s2slot.curSlot .curHd:focus{ outline: none }
  .banner .s2slot.curSlot .curHd:focus-visible{ outline: 2px solid #A2E7E8; outline-offset: -3px }
  .banner .s2slot.curSlot .curHd img.capNmHi{
    opacity: 1 !important; filter: none !important;
    background: var(--foil); background-size: 235% 235%;
    background-position: calc(50% + var(--shx, 0%)) calc(50% + var(--shy, 0%));
    -webkit-mask: url(../images/s2/session-name.png?v=40) 0 0 / 100% 100% no-repeat;
            mask: url(../images/s2/session-name.png?v=40) 0 0 / 100% 100% no-repeat;
    object-position: 300% 0;
  }
  .banner .s2slot.curSlot:hover .curHd img.capNmHi,
  .banner .s2slot.curSlot.open .curHd img.capNmHi{
    background: none; -webkit-mask: none; mask: none; object-position: 50% 50%;
  }
  .curIn{ width: min(100%, 420px); }
}

/* ---- r114: the tool opens on click / Enter / Space; the drawer carries an
   explicit Build button; actions read honestly (no disabled Book) ---------- */
.curGo{
  display: inline-block; margin-top: 7px; padding: 6px 12px 5px;
  border: 1px solid rgba(161, 231, 232, .55); border-radius: 2px;
  background: rgba(3, 47, 72, .38); color: #EAF7F7; cursor: pointer;
  font: 700 11.5px/1 "Playfair Display", Georgia, serif; letter-spacing: .08em; text-transform: uppercase;
  text-shadow: rgba(2, 44, 68, .66) 1px 1px 1px;
}
.curGo:hover, .curGo:focus-visible{ background: rgba(3, 47, 72, .62); outline: none; border-color: rgba(161, 231, 232, .9); }
.curActs .curHint{ margin: 6px 0 0; font: 500 11px/1.4 Raleway, system-ui, sans-serif; color: rgb(193, 215, 215); }
.curActs .curHint:empty{ display: none }
.curActs [hidden]{ display: none !important }


/* r146 — the builder's internal tier codes (KB-C3, H1, C · G1 · MG1…) are for Steven, not the client */
.curSheet .curLbl i { display: none; }