:root{
    --shell:#F1EFE8;
    --band:#F1EFE8;
    --paper:#FAF9F7;
    --ink:#2E2A28;
    --muted:#6B625B;
    --faint:#918981;
    --rule:#E5E1DB;
    --rule-soft:#F0EDE9;
    --sand:#E7E3DD;
    --gold:#C0AE89;
    --gold-deep:#B7A378;
    --bronze:#664C31;
    --espresso:#2B1F19;
    --on-dark:#F1E7DB;
    --on-dark-dim:#BFAE9C;
    --gold-on-dark:#E8DCC4;
    --skill-accent-bg:#D5CABA;
    --skill-accent-ink:#2E2A28;
    --skill-accent-head:#664C31;
    --skill-accent-dim:#665C51;
    --pdetail-bg:#FFFFFF;
    --skill-bg:#EAE6DF;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --shell:#171310;
      --band:#1D1815;
      --paper:#231D18;
      --ink:#F0EAE3;
      --muted:#B0A599;
      --faint:#8D8378;
      --rule:#39302A;
      --rule-soft:#2B241F;
      --sand:#3A302A;
      --gold:#C9B489;
      --gold-deep:#D6BE93;
      --bronze:#D8BE97;
      --espresso:#120D0A;
      --on-dark:#F1E7DB;
      --on-dark-dim:#B3A292;
      --gold-on-dark:#E8DCC4;
    --skill-accent-bg:#332B24;
    --skill-accent-ink:#F0EAE3;
    --skill-accent-head:#D8BE97;
    --skill-accent-dim:#9D9184;
    --pdetail-bg:#1C1713;
    --skill-bg:#2A231D;
    }
  }
  :root[data-theme="dark"]{
    --shell:#171310;
    --band:#1D1815;
    --paper:#231D18;
    --ink:#F0EAE3;
    --muted:#B0A599;
    --faint:#8D8378;
    --rule:#39302A;
    --rule-soft:#2B241F;
    --sand:#3A302A;
    --gold:#C9B489;
    --gold-deep:#D6BE93;
    --bronze:#D8BE97;
    --espresso:#120D0A;
    --on-dark:#F1E7DB;
    --on-dark-dim:#B3A292;
    --gold-on-dark:#E8DCC4;
    --skill-accent-bg:#332B24;
    --skill-accent-ink:#F0EAE3;
    --skill-accent-head:#D8BE97;
    --skill-accent-dim:#9D9184;
    --pdetail-bg:#1C1713;
    --skill-bg:#2A231D;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;background:var(--shell);color:var(--ink);
    font-family:'EB Garamond',Georgia,serif;font-size:18px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  /* ===== preview chrome ===== */
  .switch{
    position:sticky;top:0;z-index:60;background:var(--espresso);color:var(--on-dark);
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.6rem 1.25rem;
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
  }
  .switch .lbl{
    font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--on-dark-dim);margin-right:.3rem;
  }
  .switch button{
    font-family:inherit;font-size:.69rem;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;cursor:pointer;background:transparent;color:var(--on-dark-dim);
    border:1px solid rgba(232,220,196,.28);border-radius:2px;padding:.42em .9em;
  }
  .switch button[aria-selected="true"]{
    background:var(--gold-on-dark);color:var(--espresso);border-color:var(--gold-on-dark);
  }
  .switch button:focus-visible{outline:2px solid var(--gold-on-dark);outline-offset:2px;}
  .view{display:none;}
  .view.on{display:block;}

  /* ===== shared ===== */
  .wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem;}
  .eyebrow{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.72rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
    color:var(--bronze);margin:0;
  }
  h1,h2,h3{font-family:'Sorts Mill Goudy',Georgia,serif;font-weight:400;}
  a{color:inherit;}

  .bar{background:var(--band);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40;}
  .bar__in{
    max-width:64rem;margin:0 auto;padding:1.05rem 1.5rem;
    display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  }
  .mark{font-family:'Sorts Mill Goudy',Georgia,serif;font-size:1.16rem;white-space:nowrap;}
  .mark i{font-style:italic;}
  .mark sup{font-size:.42em;vertical-align:.75em;}
  nav.main{display:flex;gap:1.6rem;align-items:center;}
  nav.main a{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
    color:var(--muted);text-decoration:none;padding:.3rem 0;border-bottom:1px solid transparent;
  }
  nav.main a[aria-current]{color:var(--ink);border-bottom-color:var(--gold-deep);}
  nav.main a:hover{color:var(--ink);}
  nav.main a:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;}
  .who{
    display:flex;align-items:center;gap:.6rem;
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;font-size:.76rem;
    color:var(--muted);white-space:nowrap;
  }
  .avatar{
    width:1.85rem;height:1.85rem;border-radius:50%;background:var(--espresso);
    color:var(--gold-on-dark);display:grid;place-items:center;
    font-size:.68rem;font-weight:700;
  }
  @media (max-width:860px){
    .bar__in{flex-wrap:wrap;row-gap:.9rem;}
    nav.main{order:3;width:100%;gap:1.35rem;overflow-x:auto;padding-bottom:.15rem;scrollbar-width:none;}
    nav.main::-webkit-scrollbar{display:none;}
    nav.main a{white-space:nowrap;}
  }

  .welcome{background:var(--band);padding:3.25rem 0 2.75rem;}
  .welcome h1{font-size:clamp(2.1rem,5vw,3rem);line-height:1.08;margin:.9rem 0 .7rem;letter-spacing:-.008em;}
  .welcome h1 em{font-style:italic;}
  .welcome .sub{color:var(--muted);max-width:36rem;margin:0;font-size:1.06rem;}

  .resume{
    background:var(--paper);border:1px solid var(--rule);
    display:flex;align-items:center;justify-content:space-between;
    gap:1.5rem;padding:1.15rem 1.4rem;margin:2rem 0 0;flex-wrap:wrap;
  }
  .resume .meta{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.63rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
    color:var(--faint);margin:0 0 .3rem;
  }
  .resume .title{font-size:1.14rem;margin:0;}
  .resume .title span{color:var(--muted);font-size:.95rem;}

  .btn{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.71rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    padding:.85em 1.6em;border:1px solid var(--espresso);
    background:var(--espresso);color:var(--on-dark);
    text-decoration:none;display:inline-block;cursor:pointer;white-space:nowrap;
  }
  .btn:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;}
  .btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
  .btn--gold{background:var(--gold-on-dark);border-color:var(--gold-on-dark);color:var(--espresso);}
  .btn--wide{width:100%;text-align:center;}

  .shead{
    display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
    border-bottom:1px solid var(--rule);padding-bottom:.85rem;margin:0 0 .25rem;
  }
  .shead h2{font-size:1.75rem;margin:0;}
  .shead .count{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  }
  .body{background:var(--shell);padding:3rem 0 4.5rem;}

  /* ===== typographic rows ===== */
  .comps{display:flex;flex-direction:column;}
  .comp{
    display:grid;grid-template-columns:3.5rem 1fr auto;gap:1.5rem;align-items:start;
    padding:1.85rem 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  }
  .comp:hover .comp__name{color:var(--bronze);}
  .comp:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;}
  .comp__n{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.68rem;font-weight:700;letter-spacing:.1em;color:var(--gold-deep);padding-top:.5rem;
  }
  .comp__name{font-family:'Sorts Mill Goudy',Georgia,serif;font-size:1.5rem;margin:0 0 .5rem;line-height:1.18;}
  .subs{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:0 0 .9rem;padding:0;list-style:none;}
  .subs li{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.7rem;color:var(--muted);border:1px solid var(--rule);
    padding:.24em .7em;background:var(--paper);
  }
  .subs li.empty{color:var(--faint);border-style:dashed;background:transparent;}
  .prog{display:flex;align-items:center;gap:.75rem;max-width:22rem;}
  .track{flex:1;height:3px;background:var(--sand);position:relative;}
  .track i{position:absolute;inset:0 auto 0 0;background:var(--gold-deep);display:block;}
  .prog .pct{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.66rem;font-weight:700;letter-spacing:.1em;color:var(--muted);
    font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .comp__cta{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.67rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--bronze);padding-top:.6rem;white-space:nowrap;
  }
  .comp__cta.soon{color:var(--faint);}
  @media (max-width:720px){
    .comp{grid-template-columns:2.2rem 1fr;gap:.9rem;}
    .comp__cta{grid-column:2;padding-top:.2rem;}
  }

  /* ===== photo cards ===== */
  .pcards{
    display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin:2rem 0 0;
    /* break out wider than the 64rem text column so five squares stay generous */
    width:min(78rem, 100vw - 3rem);
    margin-left:50%;transform:translateX(-50%);
  }
  @media (max-width:1000px){ .pcards{grid-template-columns:repeat(3,1fr);} }
  @media (max-width:660px){ .pcards{grid-template-columns:repeat(2,1fr);} }
  .pcard{
    position:relative;display:block;padding:0;border:0;cursor:pointer;
    background:var(--espresso);overflow:hidden;
    font-family:inherit;color:var(--on-dark);text-align:center;
  }
  /* the image sits in normal flow so it defines the card height; the source is
     square, so width:100% + height:auto gives a square card with no aspect-ratio */
  .pcard img{display:block;width:100%;height:auto;}
  /* colour-block cards: no photo, so a percentage-padding spacer sets the square.
     aspect-ratio on a <button> is not dependable - this is. */
  .pcard--plain{background:var(--tint);}
  .pcard__ratio{display:block;width:100%;padding-top:100%;}
  .pcard--plain:hover{filter:brightness(1.12);}
  .pcard__scrim{
    position:absolute;inset:0;
    background:linear-gradient(to bottom,
      rgba(18,12,9,0) 30%,
      rgba(18,12,9,.30) 58%,
      rgba(18,12,9,.72) 100%);
  }
  .pcard__txt{
    position:absolute;left:0;right:0;bottom:0;
    padding:0 .8rem 1.5rem;
  }
  .pcard__name{
    display:block;font-family:'Sorts Mill Goudy',Georgia,serif;
    font-size:clamp(1.02rem,1.72vw,1.5rem);line-height:1.14;
    text-wrap:balance;
    color:#F7F2EB;margin-bottom:.55rem;
    text-shadow:0 1px 14px rgba(18,12,9,.55);
  }
  .pcard__meta{
    display:block;font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:#DCCDB8;
  }
  /* Core EQ cards: Macie's own artwork carries the skill name, so the card adds
     nothing over the picture. The progress line - which portal.js rewrites from
     "6 modules" to "3 of 6 complete" as she works - sits on its own bar beneath
     the art instead of on top of it. Scoped to .pcard--art so the bonus cards,
     which have no lettering of their own, keep their overlay. */
  .pcard--art .pcard__meta{padding:.72rem .5rem .8rem;}

  .pcard::after{content:"";position:absolute;inset:0;border:2px solid transparent;}
  .pcard[aria-expanded="true"]::after{border-color:var(--gold-on-dark);}
  .pcard:hover img{filter:brightness(1.1);}
  .pcard:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;}
  @media (max-width:600px){
    .pcards{gap:.7rem;}
    .pcard{flex-basis:calc((100% - .7rem) / 2);}
    .pcard__txt{padding:0 .6rem 1.15rem;}
    .pcard__name{font-size:1.12rem;}
    .pcard__meta{font-size:.58rem;letter-spacing:.12em;}
  }

  .pdetail{
    border:1px solid var(--rule);border-top:3px solid var(--gold-deep);
    background:var(--pdetail-bg);padding:2rem 1.9rem;margin:1.25rem 0 0;
  }
  .pdetail[hidden]{display:none;}
  .pdetail__head{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:1.25rem;flex-wrap:wrap;margin:0 0 1.5rem;
  }
  .pdetail h3{font-size:1.6rem;margin:0;}
  .pdetail__prog{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.67rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  }
  .skills{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
  @media (max-width:760px){.skills{grid-template-columns:1fr;}}
  /* each skill is its own bounded entity - lifted off the panel ground */
  .skill{
    background:var(--skill-bg);border:1px solid var(--skill-bg);
    padding:1.4rem 1.35rem 1.5rem;
  }
  .skill h4{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--bronze);margin:0 0 1rem;padding:0;border:0;
  }
  .skill h4::before{
    content:"";display:block;width:1.5rem;height:2px;
    background:var(--gold-deep);margin-bottom:.85rem;
  }
  .skill ol{list-style:none;margin:0;padding:0;}
  .skill li{
    display:flex;gap:.6rem;align-items:baseline;
    font-size:1rem;line-height:1.42;margin:0 0 .6rem;color:var(--ink);
  }
  .skill li:last-child{margin-bottom:0;}
  .skill li .dot{
    width:.42rem;height:.42rem;border-radius:50%;background:var(--gold-deep);
    flex:none;transform:translateY(-.15rem);
  }
  .skill li.done .dot{background:var(--bronze);}
  .skill li.todo .dot{background:transparent;border:1px solid var(--faint);}
  .skill li.pending{color:var(--faint);font-style:italic;}
  .skill li.pending .dot{background:transparent;border:1px dashed var(--faint);}

  /* the middle skill of each trio is accented dark, for rhythm across the row */
  .skill:nth-child(2){
    background:var(--skill-accent-bg);
    border-color:var(--skill-accent-bg);
  }
  .skill:nth-child(2) h4{color:var(--skill-accent-head);}
  .skill:nth-child(2) h4::before{background:var(--skill-accent-head);}
  .skill:nth-child(2) li{color:var(--skill-accent-ink);}
  .skill:nth-child(2) li .dot{background:var(--skill-accent-head);}
  .skill:nth-child(2) li.done .dot{background:var(--skill-accent-head);}
  .skill:nth-child(2) li.todo .dot{
    background:transparent;border:1px solid var(--skill-accent-dim);
  }
  .skill:nth-child(2) li.pending{color:var(--skill-accent-dim);}
  .skill:nth-child(2) li.pending .dot{
    background:transparent;border:1px dashed var(--skill-accent-dim);
  }

  /* a second and subsequent collection gets air above it */
  .collection{margin-top:3.5rem;}
  .empty-state{
    border:1px dashed var(--rule);background:var(--paper);
    padding:2.5rem 2rem;margin:2rem 0 0;text-align:center;
  }
  .empty-state p{
    margin:0 auto;max-width:34rem;color:var(--muted);font-size:1rem;
  }
  .empty-state .hint{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
    color:var(--faint);margin:0 0 .8rem;
  }

  /* ===== two-up ===== */
  .duo{display:grid;grid-template-columns:1.35fr 1fr;gap:1.5rem;margin:3.25rem 0 0;}
  @media (max-width:800px){.duo{grid-template-columns:1fr;}}

  /* The $125 add-on shown beside a full sample EQ-i report.
     The report is a DOCUMENT, not a photograph - cropping it would cut the
     score bars off - so it is placed whole and its own natural height sets the
     row. The card sits beside it as a grid item and stretches to match, which
     is why no height is hard-coded here: a fixed height would break the moment
     the report is re-exported at a different aspect ratio. */
  .duo--report{grid-template-columns:1fr;}
  .duo--report .pair{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch;}
  .eqishot{margin:0;background:var(--paper);border:1px solid var(--rule);overflow:hidden;}
  .eqishot img{display:block;width:100%;height:auto;}
  @media (max-width:800px){.duo--report .pair{grid-template-columns:1fr;}}
  .call{background:var(--espresso);color:var(--on-dark);padding:2.1rem 1.9rem;}
  /* "Next live coaching" on the espresso card. --gold-on-dark (#E8DCC4) is the
     palest cream in the palette and read as off-white rather than gold, so this
     one label is set warmer. Macie chose it from four options, 2 Sep 2026.
     A literal rather than a token because it is the only place this value is
     wanted, and .call is dark in BOTH themes - so it needs no light/dark pair. */
  .call .eyebrow{color:#D6BE93;}
  .call h3{font-size:1.55rem;margin:.85rem 0 .5rem;color:var(--on-dark);}
  .call .when{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.78rem;color:var(--on-dark-dim);margin:0 0 1.35rem;line-height:1.6;
  }
  .call .when b{color:var(--on-dark);font-weight:600;}
  .aside{background:var(--paper);border:1px solid var(--rule);padding:2.1rem 1.9rem;}
  .aside h3{font-size:1.3rem;margin:.85rem 0 .5rem;}
  .aside p{color:var(--muted);font-size:.98rem;margin:0 0 1.3rem;}
  .aside .price{font-family:'Sorts Mill Goudy',Georgia,serif;font-size:1.6rem;display:block;margin:0 0 .15rem;}
  .aside .terms{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.68rem;color:var(--faint);margin:.9rem 0 0;line-height:1.55;
  }
  .notice{
    border-left:2px solid var(--gold-deep);padding:.15rem 0 .15rem .9rem;
    margin:1.1rem 0 0;font-size:.9rem;line-height:1.5;color:var(--muted);
  }
  .notice b{color:var(--ink);font-weight:600;}

  .foot{background:var(--band);border-top:1px solid var(--rule);padding:2.25rem 0;}
  .foot__in{
    max-width:64rem;margin:0 auto;padding:0 1.5rem;
    display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;font-size:.72rem;color:var(--faint);
  }
  .foot__in a{color:var(--muted);text-decoration:none;margin-right:1.25rem;}
  .foot__in a:hover{color:var(--ink);}

  /* ===== login ===== */
  .login{min-height:calc(100vh - 3rem);display:grid;grid-template-columns:1fr 1fr;background:var(--band);}
  @media (max-width:840px){.login{grid-template-columns:1fr;min-height:0;}}
  .login__brand{
    background:var(--espresso);color:var(--on-dark);padding:4rem 3rem;
    display:flex;flex-direction:column;justify-content:space-between;
  }
  .login__brand .mark{color:var(--on-dark);font-size:1.24rem;}
  .login__brand blockquote{
    margin:3.5rem 0;font-family:'Sorts Mill Goudy',Georgia,serif;
    font-size:clamp(1.5rem,3vw,2rem);line-height:1.3;color:var(--on-dark);max-width:22ch;
  }
  .login__brand blockquote em{font-style:italic;color:var(--gold-on-dark);}
  .login__brand .attrib{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--on-dark-dim);margin:0;
  }
  .login__form{padding:4rem 3rem;display:flex;flex-direction:column;justify-content:center;}
  .login__form .inner{width:100%;max-width:23rem;margin:0 auto;}
  .login__form h2{font-size:2rem;margin:.75rem 0 .5rem;}
  .login__form .intro{color:var(--muted);margin:0 0 2.25rem;font-size:1rem;}
  .field{margin:0 0 1.15rem;}
  .field label{
    display:block;font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
    font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);margin:0 0 .45rem;
  }
  .field input{
    width:100%;font-family:'EB Garamond',Georgia,serif;font-size:1.02rem;
    padding:.72em .85em;background:var(--shell);color:var(--ink);
    border:1px solid var(--rule);border-radius:0;
  }
  .field input:focus{outline:2px solid var(--gold-deep);outline-offset:-1px;border-color:var(--gold-deep);}
  .row-between{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.75rem;flex-wrap:wrap;}
  .remember{
    display:flex;align-items:center;gap:.5rem;
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;font-size:.76rem;color:var(--muted);
  }
  .remember input{accent-color:var(--bronze);width:.95rem;height:.95rem;}
  .link{
    font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;font-size:.76rem;
    color:var(--bronze);text-decoration:underline;text-underline-offset:2px;
  }
  .newhere{border-top:1px solid var(--rule);margin:2.25rem 0 0;padding:1.5rem 0 0;font-size:.98rem;color:var(--muted);}
  .newhere a{color:var(--bronze);text-underline-offset:2px;}

  @media (max-width:640px){
    body{font-size:17px;}
    .wrap,.bar__in,.foot__in{padding-left:1.15rem;padding-right:1.15rem;}
    .login__brand,.login__form{padding:2.75rem 1.5rem;}
    .call,.aside,.pdetail{padding:1.6rem 1.35rem;}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}


.lx{cursor:pointer;position:relative;padding-right:5.2em}
.lx:hover,.lx:focus-visible{color:var(--gold-deep);outline:none}
.lx:focus-visible{text-decoration:underline;text-underline-offset:3px}
.lx-dur{position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:'Catamaran',Arial,sans-serif;font-size:.66rem;letter-spacing:.06em;
  color:var(--faint);font-variant-numeric:tabular-nums}
.lx-badge{display:inline-block;margin-left:.55em;font-family:'Catamaran',Arial,sans-serif;
  font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;
  color:#8A6626;background:#F2EADB;border-radius:2px;padding:2px 6px;white-space:nowrap}
.lxm{position:fixed;inset:0;z-index:9999;display:none;place-items:center;
  background:rgba(18,13,10,.86);padding:24px}
.lxm[open]{display:grid}
.lxm__box{width:min(1000px,100%);background:#120D0A;border-radius:4px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lxm__bar{display:flex;align-items:baseline;gap:14px;padding:14px 18px;
  border-bottom:1px solid rgba(241,231,219,.14)}
.lxm__t{font-family:'Sorts Mill Goudy',Georgia,serif;font-size:1.05rem;color:#F1E7DB;
  margin:0;flex:1;line-height:1.3}
.lxm__d{font-family:'Catamaran',Arial,sans-serif;font-size:.68rem;letter-spacing:.08em;
  color:#B3A292;font-variant-numeric:tabular-nums;white-space:nowrap}
.lxm__x{background:none;border:0;color:#B3A292;font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 2px}
.lxm__x:hover{color:#F1E7DB}

/* ------------------------------------------------------------------------
   THE ASTRA BLUE. The theme styles every button on the site:

       button:hover { background-color: var(--ast-global-color-1) }

   and that variable resolves to rgb(4,92,180) - a bright blue. Everything in
   this portal that is a real <button> inherited it. It was invisible on the
   photo cards while their text sat in an absolutely-positioned overlay ON the
   photograph; the moment the caption moved to its own bar under the artwork
   (2 Sep 2026) the transparent bar let the blue paint straight through, and
   "6 MODULES" turned blue on hover.

   `button:hover` is specificity 0,1,1 - it beats any single class - so each of
   these needs its own hover rule to win. The per-card variable keeps each
   variant its own colour instead of hard-coding espresso in three places.
   ------------------------------------------------------------------------ */
.pcard{--pcard-bg:var(--espresso)}
.pcard--plain{--pcard-bg:var(--sand)}
.pcard:hover,.pcard:focus,.pcard:active{background:var(--pcard-bg)}

/* the login submit and the video modal's close button are buttons too */
button.btn:hover,button.btn:focus,button.btn:active{background:var(--espresso)}
button.btn--gold:hover,button.btn--gold:focus,button.btn--gold:active{background:var(--gold-on-dark)}
button.btn--ghost:hover,button.btn--ghost:focus,button.btn--ghost:active{background:transparent}
button.lxm__x:hover,button.lxm__x:focus,button.lxm__x:active{background:none}
.lxm__f{position:relative;padding-top:56.25%;background:#000}
.lxm__f iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:640px){.lxm{padding:12px}.lxm__t{font-size:.92rem}}


.lx-badge--temp{color:#6B625B;background:#EDEAE4}
.listC .rowC.lx--temp .nameC{color:#5C534C}


/* the approved design sets .skills to a 3-column grid - cancel it here only */
.pdetail .skills.listC{display:block;grid-template-columns:none;gap:0}
.listC .rowsetC{display:grid;grid-template-columns:230px 1fr;gap:30px;
  padding:20px 0;border-bottom:1px solid var(--line,#E7E1DA)}
.listC .rowsetC:last-child{border-bottom:0}
.listC .subC{font-family:'Catamaran',Arial,sans-serif;font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--espresso,#2B1F19);padding-top:7px;line-height:1.5}
.listC .olC{list-style:none;margin:0;padding:0}
.listC .rowC{display:grid;grid-template-columns:1.6rem 1fr auto;gap:14px;align-items:baseline;
  padding:8px 6px;border-radius:2px;cursor:pointer}
.listC .rowC:hover,.listC .rowC:focus-visible{background:var(--panel,#FAF9F7);outline:none}
.listC .rowC:focus-visible{box-shadow:inset 0 0 0 1px var(--gold,#B7A378)}
.listC .numC{font-family:'Catamaran',Arial,sans-serif;font-size:.66rem;color:var(--gold,#B7A378);
  font-variant-numeric:tabular-nums}
.listC .nameC{font-size:1.05rem;line-height:1.45}
.listC .durC{font-family:'Catamaran',Arial,sans-serif;font-size:.66rem;color:var(--muted,#6B625B);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.listC .rowC--empty{cursor:default;color:var(--faint,#8D8378);
  font-family:'Catamaran',Arial,sans-serif;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase}
.listC .rowC--empty:hover{background:none}
.listC .rowC--empty .nameC{font-size:.72rem}
.listC .emptyC{font-family:'Catamaran',Arial,sans-serif;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint,#8D8378);margin:9px 0 0;padding-left:6px}
@media(max-width:760px){
  .listC .rowsetC{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .listC .subC{padding-top:0}
  .listC .rowC{grid-template-columns:1.4rem 1fr auto;gap:10px}
}


.listC .rowC{position:relative}
.pbar{grid-column:2/3;height:2px;background:#E7E1DA;border-radius:1px;margin-top:6px;position:relative;overflow:visible}
.pbar__f{display:block;height:100%;width:0;background:#D5CABA;transition:width .3s}
.rowC.is-done .pbar__f{background:#B7A378}
.pmark{font-size:.82rem;line-height:1;color:#B7A378;margin-left:.45em;opacity:0;white-space:nowrap}
.pmark__t{font-family:'Catamaran',Arial,sans-serif;font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8A6626;margin-left:.35em;vertical-align:.08em}
.rowC.is-done .pmark{opacity:1}
.rowC.is-part .nameC{opacity:.95}
.presume{font-family:'Catamaran',Arial,sans-serif;font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint,#8D8378);margin-left:.5em}
.listC .rowC--sub{padding-left:2.6rem}
.listC .rowC--sub .numC{visibility:hidden}
.listC .rowC--sub .nameC::before{content:"";position:absolute;left:1.5rem;top:0;bottom:50%;
  width:1px;background:var(--hair,#DCD5CC)}
.listC .rowC--sub .nameC::after{content:"";position:absolute;left:1.5rem;top:50%;
  width:.7rem;height:1px;background:var(--hair,#DCD5CC)}


.collection .pcards.pcards--three{grid-template-columns:repeat(3,1fr)}
.pcard--wide{background:var(--espresso)}
.pcard--wide img{display:block;width:100%;height:auto}
.pcard__cap{display:block;font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
  font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#DCCDB8;padding:.85rem .8rem .95rem;text-align:center}
.pdetail .skills.listC .rowsetC--solo{display:block;grid-template-columns:none;gap:0}
@media(max-width:820px){.collection .pcards.pcards--three{grid-template-columns:1fr}}


.listC .numC{display:none}
.listC .rowC{grid-template-columns:1fr auto}
.listC .rowC .pbar{grid-column:1/2}

/* preview chrome — hidden, never deleted (see build_wordpress.py) */
.switch{display:none!important}

/* ===== Elementor's global kit overrides the portal =====
   .elementor-kit-8 h3 sets colour with the same specificity as .call h3 and
   loads afterwards, so it wins the tie and paints the date of the next live
   call in ink on the espresso panel, where it cannot be read. Scoping to the
   body class outranks it without resorting to !important. */
.mr-portal .call h3{color:var(--on-dark);}

/* ===== logged-out state =====
   portal.php is a blank canvas by design: the portal draws its own header and
   footer, so there is no theme container. That leaves MemberPress's login form
   running edge to edge with no margins. This gives the screen a member meets
   before logging in the same type, colour and spacing as the portal behind it. */
.mr-portal .mp_wrapper{
  max-width:31rem;margin:0 auto;
  padding:clamp(2.75rem,8vw,5rem) 1.35rem clamp(3rem,8vw,5rem);
}
.mr-portal .mepr-login-form-wrap .mp_wrapper{max-width:none;padding:0;}
.mr-portal .mepr-unauthorized-message{margin:0 0 2.1rem;}
.mr-portal .mepr-unauthorized-message p{
  margin:0 0 .85rem;color:var(--muted);font-size:1rem;line-height:1.6;
}
.mr-portal .mepr-unauthorized-message p:first-child{
  font-family:'Sorts Mill Goudy',Georgia,serif;
  font-size:clamp(1.55rem,4.5vw,2rem);line-height:1.25;
  color:var(--ink);margin:0 0 .9rem;
}
.mr-portal .mp-form-row{margin:0 0 1.2rem;}
.mr-portal .mp-form-label label{
  display:block;font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .45rem;
}
.mr-portal .mepr-form input[type="text"],
.mr-portal .mepr-form input[type="email"],
.mr-portal .mepr-form input[type="password"]{
  width:100%;box-sizing:border-box;padding:.82rem .9rem;
  border:1px solid var(--rule);border-radius:0;background:var(--paper);
  font-family:'EB Garamond',Georgia,serif;font-size:1rem;color:var(--ink);
}
.mr-portal .mepr-form input[type="text"]:focus,
.mr-portal .mepr-form input[type="email"]:focus,
.mr-portal .mepr-form input[type="password"]:focus{
  outline:2px solid var(--gold-deep);outline-offset:1px;border-color:var(--gold-deep);
}
.mr-portal .mepr-form input[type="submit"]{
  font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
  font-size:.71rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.98em 1.6em;width:100%;cursor:pointer;border-radius:0;
  border:1px solid var(--espresso);background:var(--espresso);color:var(--on-dark);
}
.mr-portal .mepr-form input[type="submit"]:hover{background:var(--bronze);border-color:var(--bronze);}
.mr-portal .mepr-form input[type="checkbox"]{margin:0 .5rem 0 0;vertical-align:middle;}
.mr-portal .mepr_remember_me label,
.mr-portal .mepr-form .mepr-checkbox label{
  font-size:.95rem;color:var(--muted);text-transform:none;letter-spacing:0;
}
.mr-portal .mepr-login-actions{margin:1.4rem 0 0;font-size:.95rem;}
.mr-portal .mepr-login-actions a{color:var(--gold-deep);text-underline-offset:3px;}
.mr-portal .mp-hide-pw{position:relative;}
.mr-portal .mp-hide-pw button,
.mr-portal .mp-hide-pw .dashicons{
  position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;color:var(--faint);
}


/* The EQ-i add-on says different things depending on the plan. Monthly members
   buy it outright; Lifetime members already have their first one, so they only
   buy a repeat after 365 days. portal.php puts .mr-lifetime on the body. */
.mr-terms--lifetime{display:none;}
.mr-portal.mr-lifetime .mr-terms--standard{display:none;}
.mr-portal.mr-lifetime .mr-terms--lifetime{display:block;}


/* ------------------------------------------------------------------------
   The little gold horse that rides the bar. Macie chose it over the
   horseshoe, 1 Sep 2026 - "cheeky and fun", a nod to the Derby.
   The bar used to be overflow:hidden, which would clip anything sitting
   proud of a 2px rule - it is overflow:visible now, and the fill carries
   its own radius so nothing looks clipped.
   The white halo is what keeps the horse readable over BOTH the filled and
   the unfilled half of the track.
   ------------------------------------------------------------------------ */
.pbar__f{border-radius:1px}
.rowC .pmk{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  display:block;line-height:0;color:#B7A378;pointer-events:none;opacity:0
}
.rowC .pmk svg{
  display:block;width:22px;height:15.4px;overflow:visible;
  filter:drop-shadow(0 0 1.6px #fff) drop-shadow(0 0 1.6px #fff)
}
/* only while a lesson is genuinely part-watched: never on an untouched row,
   and never on a finished one, where the gold tick takes over */
.rowC.is-riding .pmk{opacity:1}
.rowC.is-done .pmk{opacity:0}

/* ------------------------------------------------------------------------
   COACHING & TEACHING REQUESTS — the ask box beside the live call

   The espresso panel runs the full width of .duo--report (that grid is one
   column, because the sample EQ-i report below sets its own height), which
   left a large dead half beside the Zoom details. The request box fills it.

   The panel now carries NO padding of its own; each half pads itself. That is
   what lets the brown run full-bleed to the panel's edge instead of floating
   as an inset box, so the colour change reads as the divider.

   The brown is #4D3B3B, sampled from the body of Macie's Art of Agency vault.
   Every text colour below was checked against it: eyebrow 6.6:1, body 7.7:1,
   placeholder 5.1:1. The pale gold used elsewhere on espresso drops under 4.5
   on this lighter ground, which is why these are their own values.
   ------------------------------------------------------------------------ */
.call--split{
  padding:0;
  display:grid;grid-template-columns:.72fr 1.28fr;gap:0;align-items:stretch;
}
.call--split .call__when{padding:2.1rem 1.9rem}
.call--split .ask{
  padding:2.1rem 1.9rem;
  background:#4D3B3B;
  --ask-eyebrow:#E0CBA4;
  --ask-body:#E4DCD2;
  --ask-hint:#BEB3A8;
  --ask-line:rgba(241,231,219,.26);
}
@media (max-width:860px){
  .call--split{grid-template-columns:1fr}
  .call--split .call__when,.call--split .ask{padding:1.7rem 1.35rem}
}

.ask h3{font-size:1.35rem;margin:.85rem 0 .5rem;color:var(--on-dark)}
.ask .eyebrow{color:var(--ask-eyebrow)}

/* ---- the urgent / non-urgent switch ---- */
.segc{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0 .85rem}
.segc__o{
  cursor:pointer;padding:.8rem .85rem;border:1px solid var(--ask-line);
  display:flex;gap:.55rem;align-items:center;background:rgba(0,0,0,.14);
}
.segc__o input{position:absolute;opacity:0;width:0;height:0}
.segc__dot{
  width:.95rem;height:.95rem;border:1.5px solid var(--ask-hint);border-radius:50%;
  flex:none;display:grid;place-items:center;box-sizing:border-box;
}
.segc__dot::after{
  content:"";width:.46rem;height:.46rem;border-radius:50%;
  background:var(--gold-on-dark);transform:scale(0);transition:transform .13s ease;
}
.segc__t{
  font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
  font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ask-eyebrow);line-height:1.25;
}
/* Selected. The class is set by portal.js rather than :has(), so the state
   never depends on selector support, and it is applied on load too. */
.segc__o.is-on{background:var(--gold-on-dark);border-color:var(--gold-on-dark)}
.segc__o.is-on .segc__dot{border-color:var(--espresso)}
.segc__o.is-on .segc__dot::after{background:var(--espresso);transform:scale(1)}
.segc__o.is-on .segc__t{color:var(--espresso)}
.segc__o:focus-within{outline:2px solid var(--gold-on-dark);outline-offset:2px}

/* the guidance that belongs to whichever side is chosen */
.well{
  background:rgba(0,0,0,.2);border-left:2px solid var(--gold-on-dark);
  padding:.85rem 1rem;margin:0 0 1.2rem;
  font-size:.93rem;line-height:1.5;color:var(--ask-body);
}

/* ---- fields ---- */
.ask__l{
  display:block;font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
  font-size:.63rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ask-eyebrow);margin:0 0 .45rem;
}
.ask__i,.ask__t{
  width:100%;box-sizing:border-box;display:block;
  font-family:'EB Garamond',Georgia,serif;font-size:1rem;line-height:1.5;
  color:var(--on-dark);background:rgba(0,0,0,.26);
  border:1px solid var(--ask-line);border-radius:0;
  padding:.7em .8em;margin:0 0 1.05rem;-webkit-appearance:none;appearance:none;
}
.ask__t{resize:vertical;min-height:6.2em}
.ask__i::placeholder,.ask__t::placeholder{color:var(--ask-hint);opacity:1}
.ask__i:focus,.ask__t:focus{
  outline:2px solid var(--gold-on-dark);outline-offset:1px;
  border-color:var(--gold-on-dark);background:rgba(0,0,0,.36);
}
.ask__i.is-bad,.ask__t.is-bad{border-color:#E0A48F}

/* ---- the worked example ---- */
.ex{margin:0 0 1.2rem;border:1px dashed var(--ask-line);background:rgba(0,0,0,.14)}
.ex summary{
  list-style:none;cursor:pointer;padding:.7rem .9rem;
  font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ask-eyebrow);
}
.ex summary::-webkit-details-marker{display:none}
.ex summary::before{content:"+ "}
.ex[open] summary::before{content:"\2013 "}
.ex summary:focus-visible{outline:2px solid var(--gold-on-dark);outline-offset:-2px}
.ex__b{padding:0 .9rem .9rem;font-size:.93rem;line-height:1.5;color:var(--ask-body)}
.ex__b b{
  display:block;font-family:'Sorts Mill Goudy',Georgia,serif;font-weight:400;
  font-size:1.1rem;color:var(--on-dark);margin:0 0 .4rem;
}

.ask__go{border:0}
.ask__go[disabled]{opacity:.55;cursor:default}
.ask__msg{margin:.9rem 0 0;font-size:.95rem;line-height:1.45;min-height:1.3em;color:var(--ask-body)}
.ask__msg.is-ok{color:#CFE3CC}
.ask__msg.is-bad{color:#E9B8A6}

/* Sent: the form is replaced by its confirmation rather than clearing and
   sitting there looking untouched, which reads as "did that send?". */
.ask.is-sent .ask__l,
.ask.is-sent .ask__i,
.ask.is-sent .ask__t,
.ask.is-sent .ask__go,
.ask.is-sent .segc,
.ask.is-sent .well,
.ask.is-sent .ex{display:none}

/* ---- a cancelled Monday ---- */
.calloff{
  display:inline-block;font-family:'Catamaran','Helvetica Neue',Arial,sans-serif;
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#2B1F19;background:#E0BFA8;padding:.42em .8em;margin:.9rem 0 .2rem;
}
.call h3.is-off{
  text-decoration:line-through;text-decoration-thickness:1px;
  color:#C9BDB2;margin:.5rem 0 .5rem;
}
.nextup{margin:.2rem 0 0;font-size:1.02rem;color:var(--on-dark)}
.nextup b{font-family:'Sorts Mill Goudy',Georgia,serif;font-weight:400;font-size:1.3rem}

/* ------------------------------------------------------------------------
   THE ASTRA BLUE, again. `button:hover` in the theme is specificity 0,1,1 and
   beats any single class, so every real <button> added here needs its own
   hover, focus AND active rule or it flashes #045CB4 on the way past.
   ------------------------------------------------------------------------ */
button.ask__go:hover,button.ask__go:focus,button.ask__go:active{
  background:var(--gold-on-dark);color:var(--espresso)
}
.ex summary:hover{background:rgba(0,0,0,.22)}
.segc__o:hover{background:rgba(0,0,0,.24)}
.segc__o.is-on:hover{background:var(--gold-on-dark)}

/* On a phone the ask box is only about 330px wide, so two switch columns give
   each option ~160px. "Non-urgent / Teach this sometime" wraps to three lines
   against the other's two, and the pair sits visibly uneven. Full width each
   below 560px, so each option gets the full width and the dot sits square
   beside its own words.

   The line break stays: "Urgent" over "Coach me Monday" is the same two-line
   shape the desktop uses, and collapsing it would run the words together. */
@media (max-width:560px){
  .segc{grid-template-columns:1fr;gap:.5rem}
  .segc__o{padding:.75rem .85rem}
  .segc__t{line-height:1.35}
}