/* MedicomSkills — the public pages.

   Separate from styles.css on purpose. That file dresses the app, where
   the reader is already a user; this one dresses the front of the
   house. Keeping them apart means a change to the marketing pages can
   never reach into a consultation. Both draw on the same tokens, so
   they stay the same product. */

.wrapx{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---------------- icon boxes ----------------
   A <span> is inline, and width and height do not apply to inline
   boxes. Size one anyway and the SVG inside falls back to its own
   default, which is enormous — that is what filled a whole card with a
   graduation cap.

   Most icon spans here escape it only by accident, because their parent
   happens to be a flex container and flex items get blockified. That is
   not a rule anyone can remember, so it is made explicit instead: any
   element carrying one of these classes is a box. */
.ic, .dot, .tk, .glyph, .rule, .mh-ico, .mc-ico, .fbw-spin{
  display:inline-grid;place-items:center;flex:0 0 auto}
.ic > svg, .dot > svg, .glyph > svg, .rule > svg, .mh-ico > svg, .mc-ico > svg{
  width:100%;height:100%;display:block}

/* ---------------- nav ---------------- */
.snav{position:sticky;top:0;z-index:60;background:rgba(252,251,247,.92);
      backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* On the landing page the bar floats over the photograph, so it is a
   little more transparent and leans on the blur instead. */
body.landing .snav{background:rgba(252,251,247,.80)}
.snav-in{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:26px}
.snav-links{display:flex;gap:24px;flex:1}
.snav-links a{font-size:14px;font-weight:600;color:var(--ink2);text-decoration:none;
              padding:6px 0;border-bottom:2px solid transparent}
.snav-links a:hover{color:var(--ink)}
.snav-links a.on{color:var(--teal-deep);border-bottom-color:var(--teal)}
.snav-cta{display:flex;gap:10px;align-items:center}
.snav-burger{display:none;background:none;border:0;font-size:22px;color:var(--ink);cursor:pointer;
             padding:4px 8px}
.snav-drop{display:none;flex-direction:column;border-top:1px solid var(--line);background:var(--card)}
.snav-drop.open{display:flex}
.snav-drop a{padding:13px 24px;border-bottom:1px solid var(--line);font-size:15px;
             font-weight:600;color:var(--ink);text-decoration:none}

/* ---------------- landing hero ---------------- */
/* The photograph is pinned to the viewport and the page slides over it.
   Two fixed layers on the body rather than absolute ones inside the
   hero: an element inside a section scrolls away with that section, and
   `background-attachment:fixed` is the other route but it is the one
   that has already cost us three rounds of debugging. This is plainly
   two elements, each doing one thing.

   The bands further down have opaque backgrounds, so they cover the
   picture as they arrive. That is the effect: the room stays put, the
   content passes in front of it. */
body.landing::before, body.landing::after{content:"";position:fixed;inset:0;pointer-events:none}
/* url() is relative to THIS file, which lives in assets/ — so this
   resolves to assets/family.png. A stylesheet that names paths from the
   page root breaks the moment it is included from anywhere else. */
body.landing::before{z-index:-2;background-image:url("family.png");
  background-image:image-set(url("family.webp") type("image/webp"), url("family.png") type("image/png"));
  background-size:cover;background-position:center right;background-repeat:no-repeat}
/* The photograph is a room, not a subject: faded to nothing on the left
   so the words sit on paper rather than on a face. */
body.landing::after{z-index:-1;background:
  linear-gradient(90deg, rgba(243,242,236,.98) 0%, rgba(243,242,236,.95) 34%,
                          rgba(243,242,236,.55) 52%, rgba(243,242,236,.10) 72%,
                          rgba(243,242,236,0) 100%)}
body.landing{background:var(--bone)}
.lhero{position:relative;background:transparent}
.lhero-img, .lhero-veil{display:none}   /* now handled on the body */
.lhero-in{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:78px 24px 92px}
.lhero-col{max-width:560px}
.lhero h1{font-size:52px;line-height:1.06;font-weight:900;letter-spacing:-.02em;margin:12px 0 20px}
.lhero h1 em{font-style:normal;color:var(--teal)}
.lhero .lede{font-size:16.5px;line-height:1.62;color:var(--ink2);max-width:50ch;margin:0 0 28px}
.lhero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}

.lpoints{display:flex;gap:30px;flex-wrap:wrap;max-width:600px}
.lpoint{display:flex;gap:11px;align-items:flex-start;max-width:180px}
.lpoint .ic{flex:0 0 auto;width:24px;height:24px;color:var(--teal)}
.lpoint .ic svg{width:100%;height:100%}
.lpoint strong{display:block;font-size:13.5px;font-weight:800;line-height:1.3}
.lpoint span{font-size:12.5px;color:var(--ink2);line-height:1.45}

/* ---------------- section band ---------------- */
/* Opaque on purpose: these are what wipe the photograph away as the
   reader scrolls past the hero. */
.band{padding:74px 0;background:var(--card);border-top:1px solid var(--line);position:relative;z-index:1}
.band.alt{background:var(--bone)}
.band-head{text-align:center;max-width:62ch;margin:0 auto 40px}
.band-head .rule{width:74px;height:22px;margin:0 auto 16px;color:var(--teal);opacity:.65}
.band-head .rule svg{width:100%;height:100%}
.band-head h2{font-size:31px;font-weight:900;letter-spacing:-.01em;margin:0 0 12px}
.band-head p{font-size:15.5px;line-height:1.6;color:var(--ink2);margin:0}

.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.band .fcard{background:var(--bone)}
.band.alt .fcard{background:var(--card)}
.fcard .ic{width:46px;height:46px;border-radius:50%;background:var(--teal-tint);color:var(--teal-deep);
           display:grid;place-items:center;margin-bottom:14px}
.fcard .ic svg{width:23px;height:23px}
.fcard h3{font-size:16.5px;font-weight:800;margin:0 0 7px}
.fcard p{font-size:13.5px;line-height:1.6;color:var(--ink2);margin:0}
.fcard p a{color:var(--teal-deep);font-weight:700;text-decoration:none;white-space:nowrap}
.fcard p a:hover{text-decoration:underline}
/* The SOAP letter is a label, not decoration — it is how the stages are
   named everywhere else in the app, so it is named the same way here. */
.soap{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;
      background:var(--teal-deep);color:#fff;font-size:13px;font-weight:900;margin-right:7px;
      vertical-align:-3px}

/* One thing given its own width, because it is the part people do not
   expect and a sixth card in a grid would lose it. */
.feature-wide{display:flex;gap:22px;align-items:flex-start;margin-top:18px;
              background:var(--teal-tint);border:1px solid var(--teal);border-radius:16px;
              padding:26px 28px}
.feature-wide .ic{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--teal-deep);
                  color:#fff;display:grid;place-items:center}
.feature-wide .ic svg{width:26px;height:26px}
.feature-wide h3{font-size:20px;font-weight:900;margin:0 0 8px;color:var(--teal-deep)}
.feature-wide p{font-size:14.5px;line-height:1.62;color:var(--ink);margin:0;max-width:72ch}

/* ---------------- numbered steps ---------------- */
.steps{display:grid;gap:18px;counter-reset:s}
.step{display:flex;gap:20px;align-items:flex-start;background:var(--card);
      border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.band.alt .step{background:var(--bone)}
.step .n{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--teal-deep);color:#fff;
         display:grid;place-items:center;font-weight:900;font-size:17px}
.step h3{font-size:17.5px;font-weight:800;margin:0 0 7px}
.step p{font-size:14px;line-height:1.62;color:var(--ink2);margin:0;max-width:72ch}

/* ---------------- inner page header ---------------- */
.phead-band{padding:56px 0 40px;background:var(--card);border-bottom:1px solid var(--line)}
.phead-band h1{font-size:40px;font-weight:900;letter-spacing:-.02em;margin:10px 0 14px}
.phead-band .lede{font-size:16px;line-height:1.62;color:var(--ink2);max-width:64ch;margin:0}

/* ---------------- prose ---------------- */
.prose{max-width:70ch}
.prose h2{font-size:23px;font-weight:900;margin:38px 0 12px}
.prose h3{font-size:17px;font-weight:800;margin:26px 0 8px}
.prose p, .prose li{font-size:15px;line-height:1.72;color:var(--ink2)}
.prose li{margin-bottom:7px}
.prose strong{color:var(--ink)}
.prose .note{background:var(--bone);border:1px solid var(--line);border-left:3px solid var(--teal);
             border-radius:0 12px 12px 0;padding:16px 18px;margin:24px 0}
.prose .note p{margin:0}

/* ---------------- closing call ---------------- */
.callout{background:var(--teal-deep);color:#fff;border-radius:20px;padding:44px 40px;text-align:center}
.callout h2{font-size:27px;font-weight:900;margin:0 0 10px}
.callout p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.85);max-width:56ch;margin:0 auto 24px}
.callout .btn{background:#fff;color:var(--teal-deep);border-color:#fff}
.callout .btn:hover{background:var(--teal-tint);border-color:var(--teal-tint)}

/* ---------------- footer ---------------- */
.sfoot{background:var(--card);border-top:1px solid var(--line);padding:44px 0 26px;margin-top:0;
       position:relative;z-index:1}
.sfoot-in{display:flex;gap:44px;flex-wrap:wrap;padding-bottom:28px}
.sfoot-brand{flex:1;min-width:260px;max-width:380px}
.sfoot-brand p{font-size:13px;line-height:1.6;color:var(--ink2);margin:12px 0 0}
.sfoot-cols{display:flex;gap:56px;flex-wrap:wrap}
.sfoot-cols h4{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
               color:var(--ink2);margin:0 0 12px}
.sfoot-cols a{display:block;font-size:13.5px;color:var(--ink);text-decoration:none;margin-bottom:9px}
.sfoot-cols a:hover{color:var(--teal-deep)}
.sfoot-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
             border-top:1px solid var(--line);padding-top:18px;font-size:12px;color:var(--ink2)}

@media(max-width:900px){
  .cards4{grid-template-columns:repeat(2,1fr)}
  .lhero h1{font-size:38px}
  body.landing::after{background:linear-gradient(180deg, rgba(243,242,236,.93), rgba(243,242,236,.88))}
  .lhero-in{padding:52px 24px 60px}
}
@media(max-width:760px){
  .feature-wide{flex-direction:column;gap:14px;padding:22px}
  .snav-links, .snav-cta{display:none}
  .snav-burger{display:block;margin-left:auto}
  .cards4, .cards3, .cards2{grid-template-columns:1fr}
  .phead-band h1{font-size:30px}
  .band-head h2{font-size:25px}
  .step{flex-direction:column;gap:14px}
}

/* ---------------- long-form pages ---------------- */
.longform{max-width:66ch;margin:0 auto}
.longform h2{font-size:27px;font-weight:900;line-height:1.25;letter-spacing:-.01em;
             margin:0 0 18px;color:var(--ink)}
.longform p{font-size:16.5px;line-height:1.72;color:var(--ink2);margin:0 0 18px}
.longform p.big{font-size:18px;color:var(--ink);font-weight:600;line-height:1.6}
.longform p.beat{font-size:17px;color:var(--ink);font-weight:700;margin:26px 0}
.longform strong{color:var(--ink)}
/* A short line set alone carries more than the same words in a
   paragraph. Used sparingly, or it stops working. */
.longform .single{font-size:17px;color:var(--ink);margin:0 0 14px;line-height:1.5}
.longform ul{margin:0 0 18px;padding-left:0;list-style:none}
.longform ul li{font-size:16.5px;line-height:1.68;color:var(--ink2);margin-bottom:12px;
                padding-left:20px;position:relative}
.longform ul li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;
                        background:var(--teal);border-radius:2px}

.pullq{margin:38px 0;padding:28px 32px;background:var(--teal-tint);border-radius:18px;
       border-left:4px solid var(--teal-deep)}
.pullq p{font-size:20px;line-height:1.5;font-weight:800;color:var(--teal-deep);margin:0;
         letter-spacing:-.01em}

.endnote{margin-top:44px;padding:30px 32px;background:var(--card);border:1px solid var(--line);
         border-radius:18px;text-align:center}
.endnote h3{font-size:19px;font-weight:900;margin:0 0 12px}
.endnote p{font-size:15px;line-height:1.65;color:var(--ink2);margin:0 auto 0;max-width:56ch}
.endnote .q{margin-top:16px;font-size:16px;font-weight:800;color:var(--teal-deep);line-height:1.5}

@media(max-width:760px){
  .longform h2{font-size:22px}
  .longform p{font-size:15.5px}
  .pullq{padding:22px 20px}
  .pullq p{font-size:17px}
}

/* ================= how it works ================= */
/* Pinned to the viewport, with the page sliding over it — the same
   treatment as the landing page, so the two feel like one site. Two
   fixed layers on the body rather than absolute ones inside the hero:
   an element inside a section scrolls away with that section. */
/* A fixed BAND at the top rather than the whole viewport.

   Sizing the layer to the viewport meant the framing changed with every
   window: on a wide screen the image grew so tall that the hero only
   showed ceiling and wall, and the two people fell below the card. A
   band with its own height keeps the crop identical at every width —
   the whole room edge to edge, the pair framed in the upper right.

   It is still fixed, so the page still slides over it. */
/* Capping the band alone is not enough: past about 2000px the image
   keeps growing with the viewport while the band stops, and the table
   slides out of frame again. Capping the image width too holds the
   crop steady on any monitor. */
body.works{--band:clamp(460px, 46vw, 900px)}
body.works::before, body.works::after{content:"";position:fixed;top:0;left:0;right:0;
  height:var(--band);pointer-events:none}
/* `100% auto`, not `cover`.

   cover scales the picture until it fills the viewport in BOTH
   directions, which means one axis always overflows and gets cropped —
   on a wide screen that eats the left and right of the room and drops
   the two people below the fold, half hidden behind the card.

   100% auto fits the width exactly and lets the height fall where it
   may: the whole room is visible edge to edge, the wall gives the
   headline somewhere to sit, and the people stay framed in the upper
   right where they belong. */
/* cover inside a band this wide crops the height, never the width, so
   the room stays whole left to right. 38% picks the slice: low enough
   to include the people, high enough that they are not cut off. */
body.works::before{z-index:-2;background-image:url("works.png");
  background-image:image-set(url("works.webp") type("image/webp"), url("works.png") type("image/png"));
  background-size:cover;background-position:center 38%;background-repeat:no-repeat;
  max-width:1960px;left:50%;right:auto;transform:translateX(-50%);width:100%}
/* Clears the left half for the headline, then gets out of the way well
   before the two people so they are not washed out. */
body.works::after{z-index:-1;background:linear-gradient(90deg,
  rgba(243,242,236,.94) 0%, rgba(243,242,236,.88) 28%, rgba(243,242,236,.55) 42%,
  rgba(243,242,236,.10) 56%, rgba(243,242,236,0) 68%)}
body.works{background:var(--bone)}
body.works .snav{background:rgba(252,251,247,.80)}

.hiw-hero{position:relative;background:transparent}
.hiw-hero .photo, .hiw-hero .veil{display:none}   /* now handled on the body */
/* Deep enough that the pair on the right are framed rather than
   guillotined by the card below. */
/* The hero is the band, so the card below starts where the photograph
   ends rather than halfway across somebody's face. */
.hiw-hero .in{position:relative;max-width:1120px;margin:0 auto;padding:70px 24px 40px;
              min-height:var(--band);box-sizing:border-box;display:flex;align-items:center}
.hiw-hero .col{max-width:480px}
.hiw-hero h1{font-size:42px;line-height:1.13;font-weight:900;letter-spacing:-.02em;margin:10px 0 18px}
.hiw-hero h1 em{font-style:normal;color:var(--teal)}
.hiw-hero .lede{font-size:16px;line-height:1.65;color:var(--ink2);margin:0 0 26px;max-width:44ch}
.hiw-note{display:flex;gap:13px;align-items:flex-start}
.hiw-note .ic{flex:0 0 auto;width:26px;height:26px;color:var(--clay)}
.hiw-note .ic svg{width:100%;height:100%}
.hiw-note p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2)}
.hiw-note strong{display:block;color:var(--teal-deep);font-weight:800}

/* ---- the five steps ---- */
/* Opaque on purpose: this is what covers the photograph as the reader
   scrolls past the hero. */
.hiw-wrap{background:var(--card);border:1px solid var(--line);border-radius:22px;
          margin:-46px auto 0;position:relative;z-index:2;max-width:1060px;
          box-shadow:0 20px 56px rgba(22,36,46,.10);overflow:hidden}
.hstep{display:grid;grid-template-columns:74px 1fr 300px;gap:26px;padding:34px 36px;
       border-bottom:1px solid var(--line);align-items:start}
.hstep:last-child{border-bottom:0}
.hstep .lane{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}
.hstep .glyph{width:52px;height:52px;border-radius:50%;background:var(--bone);
              border:1px solid var(--line);color:var(--teal-deep);display:grid;place-items:center}
.hstep .glyph svg{width:25px;height:25px}
.hstep .num{width:34px;height:34px;border-radius:50%;background:var(--teal-deep);color:#fff;
            display:grid;place-items:center;font-weight:900;font-size:15px}
.hstep h3{font-size:20px;font-weight:900;margin:0 0 6px;letter-spacing:-.01em}
.hstep .sub{font-size:14px;font-weight:700;color:var(--teal);margin:0 0 12px}
.hstep p{font-size:14.5px;line-height:1.66;color:var(--ink2);margin:0 0 12px;max-width:60ch}
.hstep p:last-child{margin-bottom:0}
.hstep p.beat{color:var(--teal-deep);font-weight:700}
.hstep .tipbox{display:flex;gap:12px;background:var(--bone);border-radius:12px;padding:14px 16px;
               margin-top:14px}
.hstep .tipbox .ic{flex:0 0 auto;width:20px;height:20px;color:var(--teal)}
.hstep .tipbox p{margin:0;font-size:13.5px;line-height:1.6}
.hstep .tipbox strong{display:block;color:var(--ink);margin-bottom:3px}

/* ---- the little illustrations ---- */
.demo{background:var(--bone);border:1px solid var(--line);border-radius:14px;padding:14px}
.demo h4{font-size:12.5px;font-weight:800;color:var(--ink2);margin:0 0 10px}
.demo-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
          border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px;font-weight:600}
.demo-row:last-child{margin-bottom:0}
.demo-row .ic{width:18px;height:18px;color:var(--teal-deep);flex:0 0 auto}
.demo-row.on{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-deep)}
.demo-bub{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
          font-size:12.5px;line-height:1.5;margin-bottom:8px;color:var(--ink)}
.demo-bub.me{background:var(--teal-tint);border-color:var(--teal);margin-left:34px}
.demo-wave{display:flex;align-items:center;gap:2px;height:26px;margin-top:4px}
.demo-wave i{flex:1;background:var(--teal);border-radius:2px;opacity:.55}
.demo-soap{display:flex;align-items:center;gap:10px;padding:7px 2px;font-size:13px;
           border-bottom:1px solid var(--line)}
.demo-soap:last-of-type{border-bottom:0}
.demo-soap b{width:18px;color:var(--teal-deep);font-weight:900}
.demo-soap span{flex:1;color:var(--ink2)}
.demo-soap .tick{color:var(--sage);font-weight:900}
.demo-score{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.demo-ring{flex:0 0 auto;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
           background:conic-gradient(var(--teal) 0 78%, var(--line) 78% 100%)}
.demo-ring i{width:60px;height:60px;border-radius:50%;background:var(--bone);display:grid;
             place-items:center;font-style:normal;font-weight:900;font-size:21px;color:var(--ink)}
.demo-leg{flex:1;font-size:12px}
.demo-leg div{display:flex;align-items:center;gap:7px;margin-bottom:5px;color:var(--ink2)}
.demo-leg em{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.demo-leg b{margin-left:auto;color:var(--ink);font-weight:800}
.demo-hi{font-size:12px;line-height:1.5;color:var(--ink2)}
.demo-hi div{display:flex;gap:7px;margin-bottom:5px}
.demo-cap{font-size:11px;color:var(--ink2);text-align:center;margin:10px 0 0;font-style:italic}

.hiw-chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.hiw-chip{display:flex;align-items:center;gap:7px;background:var(--bone);border:1px solid var(--line);
          border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--ink)}
.hiw-chip .ic{width:16px;height:16px;color:var(--teal)}

/* ---- closing bar ---- */
.hiw-close{display:flex;gap:24px;align-items:center;background:var(--teal-deep);color:#fff;
           border-radius:20px;padding:30px 34px;margin-top:26px;flex-wrap:wrap}
.hiw-close .ic{flex:0 0 auto;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.14);
               display:grid;place-items:center}
.hiw-close .ic svg{width:27px;height:27px;color:#fff}
.hiw-close .txt{flex:1;min-width:280px}
.hiw-close h3{font-size:21px;font-weight:900;margin:0;line-height:1.35}
.hiw-close h3 em{font-style:normal;color:var(--teal-tint)}
.hiw-close p{margin:8px 0 0;font-size:13.5px;color:rgba(255,255,255,.8)}
.hiw-close .btn{background:#fff;color:var(--teal-deep);border-color:#fff;white-space:nowrap}
.hiw-close .btn:hover{background:var(--teal-tint);border-color:var(--teal-tint)}

@media(max-width:980px){
  .hstep{grid-template-columns:60px 1fr;gap:18px;padding:26px 22px}
  .hstep .demo{grid-column:1/3}
  /* Narrow: the text sits over the picture rather than beside it, so the
     fade runs top to bottom and the band shortens to suit. */
  body.works{--band:clamp(380px, 78vw, 560px)}
  body.works::after{background:linear-gradient(180deg,
    rgba(243,242,236,.90) 0%, rgba(243,242,236,.86) 55%, rgba(243,242,236,.94) 100%)}
  .hiw-hero .in{min-height:var(--band);padding:44px 24px 30px}
  .hiw-hero h1{font-size:31px}
  .hiw-wrap{margin:-16px 16px 0;border-radius:18px}
}

/* ================= features ================= */
/* No veil on this page. The left of the photograph is a plain cream
   wall, so the headline reads against it unaided — and a wash over a
   picture chosen for its own sake is just a way of hiding it.

   The layer is sized to the image's own proportions and the band is
   what is left after the nav, so the picture ends exactly where the
   hero does. That gap was the grey strip. */
body.featured{
  --navh:64px;                      /* measured on load; this is only the fallback */
  --imgw:min(100vw, 1840px);
  --imgh:calc(var(--imgw) * 0.667); /* the photograph's own 3:2 */
  --band:calc(var(--imgh) - var(--navh));
  background:var(--bone)}
body.featured::before{content:"";position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:var(--imgw);height:var(--imgh);z-index:-2;pointer-events:none;
  background-image:url("featured.png");
  background-image:image-set(url("featured.webp") type("image/webp"), url("featured.png") type("image/png"));
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* Opaque enough to read against the picture, since nothing else is
   softening it now. */
body.featured .snav{background:rgba(252,251,247,.93)}

.feat-hero{position:relative;background:transparent}
.feat-hero .in{position:relative;max-width:1120px;margin:0 auto;padding:40px 24px 40px;
               min-height:var(--band);box-sizing:border-box;display:flex;align-items:center}
.feat-hero .col{max-width:520px}
.feat-hero h1{font-size:42px;line-height:1.14;font-weight:900;letter-spacing:-.02em;margin:10px 0 18px}
.feat-hero h1 em{font-style:normal;color:var(--teal)}
.feat-hero p{font-size:16px;line-height:1.65;color:var(--ink2);margin:0;max-width:40ch}

/* ---- the six ---- */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px;
      display:flex;flex-direction:column}
.fbox .ic{width:46px;height:46px;border-radius:12px;background:var(--teal-tint);color:var(--teal-deep);
          display:grid;place-items:center;margin-bottom:18px}
.fbox .ic svg{width:23px;height:23px}
.fbox h3{font-size:19px;font-weight:900;line-height:1.25;margin:0 0 10px;letter-spacing:-.01em}
.fbox > p{font-size:14px;line-height:1.62;color:var(--ink2);margin:0 0 18px}
.fbox ul{list-style:none;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.fbox li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5;
         color:var(--ink);margin-bottom:9px}
.fbox li:last-child{margin-bottom:0}
.fbox li .tk{flex:0 0 auto;color:var(--sage);font-weight:900;font-size:13px;margin-top:1px}

/* ---- who it fits ----
   This was two columns: a short left one beside a tall panel of marking
   levels. Nothing could fill the hole that left under the icons, and
   stretching four small labels across it would only have made the gap
   more obvious. Both halves are full width now, stacked, each carrying
   its own weight — and the two lists read in the right order: who it is
   for, then how it adapts to them. */
.fitsec{background:var(--bone);border:1px solid var(--line);border-radius:18px;
        padding:34px 34px 30px;margin-top:22px}
.fitsec h3{font-size:23px;font-weight:900;margin:0 0 10px;letter-spacing:-.01em}
.fitsec > p{font-size:14.5px;line-height:1.62;color:var(--ink2);margin:0;max-width:64ch}

.who4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0 26px}
.who4 .w{background:var(--card);border:1px solid var(--line);border-radius:14px;
         padding:22px 20px;display:flex;flex-direction:column}
.who4 .ic{width:36px;height:36px;color:var(--teal-deep);margin-bottom:14px}
.who4 .ic svg{width:100%;height:100%}
.who4 b{display:block;font-size:14.5px;font-weight:800;line-height:1.3;margin-bottom:7px}
.who4 span{font-size:13px;line-height:1.55;color:var(--ink2)}

.lvstrip{background:var(--teal-tint);border:1px solid var(--teal);border-radius:14px;padding:24px 26px}
.lvstrip h4{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
            color:var(--teal-deep);margin:0 0 4px}
.lvstrip > p{font-size:13.5px;line-height:1.6;color:var(--ink2);margin:18px 0 0;
             padding-top:16px;border-top:1px solid rgba(31,107,110,.22);max-width:78ch}
.lv4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:16px}
.lv4 > div{padding-left:14px;border-left:2px solid var(--teal)}
.lv4 b{display:block;font-size:14px;font-weight:800;color:var(--teal-deep);margin-bottom:5px;
       line-height:1.3}
.lv4 span{font-size:12.5px;line-height:1.55;color:var(--ink2)}

@media(max-width:980px){
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .who4, .lv4{grid-template-columns:repeat(2,1fr)}
  .fitsec{padding:26px 22px 24px}
  .feat-hero h1{font-size:31px}
  .feat-hero .in{padding:30px 24px 24px}
}
@media(max-width:760px){
  /* Narrow: the text has to sit ON the picture, so it gets a card of
     its own rather than a wash over the whole image. */
  .feat-hero .col{background:rgba(252,251,247,.90);border-radius:16px;padding:22px 20px;
                  backdrop-filter:blur(3px)}
}
@media(max-width:700px){ .fgrid, .who4, .lv4{grid-template-columns:1fr} }

/* ================= for educators =================
   Four things were out of balance on this page and they had one cause:
   two columns of different heights sitting side by side with
   align-items:center, which leaves the shorter one floating in a pool
   of nothing. The fix in each case is to give the shorter side
   something that fills the height rather than to pad it out.

   In the hero that job goes to the photograph: it is absolutely
   positioned top to bottom, so whatever height the copy needs, the
   right-hand side is full. */
body.edu{background:var(--bone)}

.edu-hero{position:relative;background:var(--bone);border-bottom:1px solid var(--line);
          overflow:hidden}
/* Lowercase, matching the file actually in assets/. Linux serves file
   names case-sensitively: this asked for educator.PNG while the file on
   disk was educator.png, so the hero photograph 404'd silently and the
   section just looked flat. Nothing in the page reports a missing
   background image — it is only visible by looking. */
.edu-hero .photo{position:absolute;top:0;right:0;bottom:0;width:56%;
  background-image:url("educator.png");
  background-image:image-set(url("educator.webp") type("image/webp"), url("educator.png") type("image/png"));background-size:cover;background-position:center left;
  background-repeat:no-repeat}
/* Softens the seam where the picture meets the paper, so the copy is
   not sitting on a hard vertical edge. */
.edu-hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,
  var(--bone) 0%, rgba(243,242,236,.92) 12%, rgba(243,242,236,.45) 34%, rgba(243,242,236,0) 62%)}
.edu-hero .in{position:relative;max-width:1200px;margin:0 auto;padding:64px 24px 68px;
              display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:44px;
              align-items:center}
.edu-hero .copy{max-width:540px}
.edu-hero h1{font-size:40px;line-height:1.14;font-weight:900;letter-spacing:-.02em;margin:10px 0 18px}
.edu-hero h1 em{font-style:normal;color:var(--teal)}
.edu-hero .lede{font-size:15.5px;line-height:1.66;color:var(--ink2);margin:0 0 26px;max-width:46ch}
.edu-pts{display:grid;gap:17px;margin-bottom:28px}
.edu-pt{display:flex;gap:13px;align-items:flex-start}
.edu-pt .ic{flex:0 0 auto;width:26px;height:26px;color:var(--teal-deep);margin-top:2px}
.edu-pt .ic svg{width:100%;height:100%}
.edu-pt b{display:block;font-size:14.5px;font-weight:800;margin-bottom:3px}
.edu-pt span{font-size:13.5px;line-height:1.55;color:var(--ink2)}
.edu-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.edu-cta a.plain{font-size:14px;font-weight:700;color:var(--teal-deep);text-decoration:none}
.edu-cta a.plain:hover{text-decoration:underline}

/* ---- the class report, built rather than photographed ---- */
.rep{background:var(--card);border:1px solid var(--line);border-radius:16px;
     box-shadow:0 20px 50px rgba(22,36,46,.16);overflow:hidden}
.rep-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
         padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bone)}
.rep-top b{font-size:13.5px;font-weight:800}
.rep-top span{font-size:11.5px;color:var(--ink2)}
.rep-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.rep-stats div{padding:15px 12px;text-align:center;border-right:1px solid var(--line)}
.rep-stats div:last-child{border-right:0}
.rep-stats b{display:block;font-size:22px;font-weight:900;line-height:1}
.rep-stats span{display:block;font-size:10.5px;color:var(--ink2);margin-top:5px;line-height:1.3}
.rep-body{padding:18px}
.rep-body h5{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
             color:var(--ink2);margin:0 0 14px}
.rep-row{display:grid;grid-template-columns:1fr 72px 40px;gap:12px;align-items:center;
         margin-bottom:13px}
.rep-row:last-child{margin-bottom:0}
.rep-row .nm{font-size:12.5px;color:var(--ink)}
.rep-row .bar{height:7px;border-radius:5px;background:var(--line);overflow:hidden}
.rep-row .bar i{display:block;height:100%;border-radius:5px}
.rep-row .pc{font-size:12px;font-weight:800;text-align:right}
.rep-foot{padding:12px 18px;border-top:1px solid var(--line);background:var(--bone);
          font-size:11px;color:var(--ink2);font-style:italic;line-height:1.5}

/* ---- capabilities ----
   Six in a three-by-two, not five in a row. Five never divides evenly
   into anything, so at every breakpoint it left an orphan; and squeezed
   into one row each card was too narrow to say anything. */
.capgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 24px;
     display:flex;flex-direction:column}
.cap .ic{width:44px;height:44px;border-radius:12px;background:var(--teal-tint);
         color:var(--teal-deep);display:grid;place-items:center;margin-bottom:16px}
.cap .ic svg{width:22px;height:22px}
.cap h3{font-size:16px;font-weight:800;color:var(--teal-deep);margin:0 0 8px;line-height:1.3}
.cap p{font-size:13.5px;line-height:1.6;color:var(--ink2);margin:0}

/* ---- experiential cycle ----
   The wheel is the point of this section, so it gets the wider half.
   It was previously the narrower one and capped besides, which left it
   looking like an afterthought beside a wall of text. */
.cycle-wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:52px;
            align-items:center}
.cycle-wrap h2{font-size:28px;font-weight:900;letter-spacing:-.01em;margin:10px 0 14px;line-height:1.2}
.cycle-wrap > div > p{font-size:15px;line-height:1.68;color:var(--ink2);margin:0 0 20px}
.tick-list{list-style:none;margin:0;padding:0}
.tick-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.55;
              color:var(--ink);margin-bottom:12px}
.tick-list .tk{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--teal);
               color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900;margin-top:1px}

.cycle{position:relative;aspect-ratio:1;width:100%;max-width:480px;margin:0 auto;
       background:var(--card);border:1px solid var(--line);border-radius:20px}
.cycle .node{position:absolute;width:38%;text-align:center}
.cycle .node .dot{width:78px;height:78px;border-radius:50%;margin:0 auto 9px;display:grid;
                  place-items:center;color:var(--teal-deep)}
.cycle .node .dot svg{width:30px;height:30px}
.cycle .node b{display:block;font-size:11.5px;font-weight:900;letter-spacing:.08em;
               text-transform:uppercase;color:var(--teal-deep);margin-bottom:3px}
.cycle .node span{font-size:11px;line-height:1.4;color:var(--ink2);display:block;padding:0 4px}
.cycle .n1{top:5%;left:31%}    .cycle .n1 .dot{background:var(--teal-tint)}
.cycle .n2{top:32%;right:1%}   .cycle .n2 .dot{background:#EDE3D2}
.cycle .n3{bottom:4%;left:31%} .cycle .n3 .dot{background:#E4EAE0}
.cycle .n4{top:32%;left:1%}    .cycle .n4 .dot{background:var(--bone)}
.cycle .hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:82px;height:82px;
            border-radius:50%;background:var(--teal-deep);color:#fff;display:grid;place-items:center;
            box-shadow:0 6px 18px rgba(22,36,46,.18)}
.cycle .hub svg{width:34px;height:34px}
.cycle .ring{position:absolute;inset:17%;border:2px dashed var(--line);border-radius:50%}

/* ---- cohort argument ---- */
.cohort{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
.cohort h2{font-size:28px;font-weight:900;line-height:1.22;letter-spacing:-.01em;margin:0 0 16px}
.cohort h2 em{font-style:normal;color:var(--teal)}
.cohort p{font-size:15px;line-height:1.68;color:var(--ink2);margin:0 0 16px}
.cohort p.beat{color:var(--teal-deep);font-weight:700;font-size:16px}

@media(max-width:1040px){
  .edu-hero .photo{width:100%;opacity:.28}
  .edu-hero .photo::after{background:linear-gradient(180deg,
    rgba(243,242,236,.86), rgba(243,242,236,.94))}
  .edu-hero .in{grid-template-columns:1fr;gap:34px;padding:44px 24px 48px}
  .edu-hero .copy{max-width:none}
  .edu-hero h1{font-size:31px}
  .capgrid{grid-template-columns:repeat(2,1fr)}
  .cycle-wrap, .cohort{grid-template-columns:1fr;gap:32px}
  .cycle{max-width:420px}
}
@media(max-width:700px){
  .capgrid{grid-template-columns:1fr}
  .rep-stats{grid-template-columns:repeat(2,1fr)}
  .rep-stats div:nth-child(2){border-right:0}
  .rep-stats div:nth-child(1),.rep-stats div:nth-child(2){border-bottom:1px solid var(--line)}
  /* The wheel does not survive being squeezed; a list says the same. */
  .cycle{aspect-ratio:auto;padding:20px;max-width:none}
  .cycle .node{position:static;width:auto;text-align:left;display:flex;gap:14px;align-items:center;
               margin-bottom:16px}
  .cycle .node .dot{margin:0;width:54px;height:54px;flex:0 0 auto}
  .cycle .node span{padding:0}
  .cycle .hub, .cycle .ring{display:none}
}

/* ================= pricing ================= */
body.pricing{background:var(--bone)}
.pri-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
          background:linear-gradient(160deg,#F0EDE4 0%,#F5F4EE 45%,#E6EEEC 100%)}
.pri-hero .photo{position:absolute;top:0;right:0;bottom:0;width:58%;
  background-image:url("payment.png");
  background-image:image-set(url("payment.webp") type("image/webp"), url("payment.png") type("image/png"));background-size:cover;background-position:center left;
  background-repeat:no-repeat}
.pri-hero .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,
  var(--bone) 0%, rgba(243,242,236,.92) 14%, rgba(243,242,236,.42) 38%, rgba(243,242,236,0) 66%)}
.pri-hero .in{position:relative;max-width:1200px;margin:0 auto;padding:60px 24px 64px;
              display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:44px;
              align-items:center}
.pri-hero .copy{max-width:500px}
.pri-hero h1{font-size:40px;line-height:1.14;font-weight:900;letter-spacing:-.02em;margin:10px 0 16px}
.pri-hero .lede{font-size:15.5px;line-height:1.66;color:var(--ink2);margin:0 0 26px;max-width:44ch}
.pri-pts{display:grid;gap:16px}
.pri-pt{display:flex;gap:13px;align-items:flex-start}
.pri-pt .ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--teal-tint);
            color:var(--teal-deep);display:grid;place-items:center}
.pri-pt .ic svg{width:17px;height:17px}
.pri-pt b{display:block;font-size:14px;font-weight:800;margin-bottom:2px}
.pri-pt span{font-size:13px;line-height:1.55;color:var(--ink2)}

/* ---- the three plans ---- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 26px 26px;
      display:flex;flex-direction:column;text-align:center;position:relative}
.plan.mid{border-color:var(--teal);box-shadow:0 14px 40px rgba(22,36,46,.10);padding-top:44px}
.plan .flag{position:absolute;top:0;left:0;right:0;background:var(--teal-deep);color:#fff;
            font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
            padding:7px;border-radius:17px 17px 0 0}
.plan .ic{width:52px;height:52px;border-radius:50%;background:var(--teal-tint);color:var(--teal-deep);
          display:grid;place-items:center;margin:0 auto 16px}
.plan .ic svg{width:25px;height:25px}
.plan h3{font-size:21px;font-weight:900;margin:0 0 6px}
.plan .who{font-size:13px;line-height:1.5;color:var(--ink2);margin:0 0 20px;min-height:39px}
/* The price is undecided, so the slot says so rather than showing a
   number that would have to be walked back. It keeps the shape of the
   card, which is what a department head is actually reading. */
.plan .price{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
             padding:20px 0;margin-bottom:20px}
.plan .price b{display:block;font-size:19px;font-weight:900;color:var(--teal-deep);line-height:1.25}
.plan .price span{display:block;font-size:12.5px;color:var(--ink2);margin-top:6px;line-height:1.5}
.plan ul{list-style:none;margin:0 0 22px;padding:0;text-align:left;flex:1}
.plan li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5;
         color:var(--ink);margin-bottom:10px}
.plan li:last-child{margin-bottom:0}
.plan li .tk{flex:0 0 auto;color:var(--sage);font-weight:900;margin-top:1px}
.plan .btn{width:100%}
.plan .fine{font-size:11.5px;color:var(--ink2);margin:10px 0 0}

/* ---- why bother strip ---- */
.whystrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--bone);
          border:1px solid var(--line);border-radius:18px;margin-top:26px;overflow:hidden}
.whystrip > div{padding:26px 24px;border-right:1px solid var(--line);
                display:flex;flex-direction:column}
.whystrip > div:last-child{border-right:0}
.whystrip .ic{width:30px;height:30px;color:var(--teal-deep);margin-bottom:12px}
.whystrip .ic svg{width:100%;height:100%}
.whystrip h4{font-size:15px;font-weight:800;color:var(--teal-deep);margin:0 0 7px}
.whystrip p{font-size:13px;line-height:1.6;color:var(--ink2);margin:0}

/* ---- faq ---- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:44px;align-items:start}
.faq-wrap h2{font-size:28px;font-weight:900;letter-spacing:-.01em;margin:0 0 12px;line-height:1.2}
.faq-wrap .aside p{font-size:14px;line-height:1.6;color:var(--ink2);margin:0 0 14px}
.faq{display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px}
.faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-size:14.5px;font-weight:700;
             color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:19px;font-weight:400;color:var(--teal);flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:16px 20px;font-size:14px;line-height:1.68;color:var(--ink2)}
.faq .a p{margin:0 0 12px}
.faq .a p:last-child{margin:0}

@media(max-width:980px){
  .pri-hero .in{grid-template-columns:1fr;gap:32px;padding:42px 24px 46px}
  .pri-hero .copy{max-width:none}
  .pri-hero h1{font-size:31px}
  .plans{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .plan.mid{padding-top:44px}
  .whystrip{grid-template-columns:repeat(2,1fr)}
  .whystrip > div:nth-child(2){border-right:0}
  .whystrip > div:nth-child(1),.whystrip > div:nth-child(2){border-bottom:1px solid var(--line)}
  .faq-wrap{grid-template-columns:1fr;gap:26px}
}
@media(max-width:640px){
  .whystrip{grid-template-columns:1fr}
  .whystrip > div{border-right:0;border-bottom:1px solid var(--line)}
  .whystrip > div:last-child{border-bottom:0}
}
/* SITE_CSS_V19_END */

/* ---- a note on words ----
   Sits between the last teaching section and the closing call to action.
   Quieter than either: it is a courtesy to a reader who has just met
   forty British spellings, not a selling point. */
.hiw-words{display:flex;gap:20px;align-items:flex-start;background:var(--bone);
           border:1px solid var(--line);border-radius:20px;padding:26px 30px;margin-top:26px}
.hiw-words .ic{flex:0 0 auto;width:34px;height:34px;color:var(--teal);opacity:.75}
.hiw-words .ic svg{width:100%;height:100%}
.hiw-words .txt{flex:1;min-width:260px}
.hiw-words h3{font-size:16px;font-weight:900;margin:0 0 10px;color:var(--teal-deep)}
.hiw-words p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink2)}
.hiw-words p:last-child{margin-bottom:0}
.hiw-words em{font-style:normal;font-weight:700;color:var(--ink)}
@media (max-width:640px){ .hiw-words{padding:22px;gap:14px} }

/* A quiet line under a section heading — a fact, not a badge. */
.band-note{max-width:62ch;margin:14px auto 0;font-size:14px;line-height:1.6;color:var(--ink2);
           padding-top:14px;border-top:1px solid var(--line)}
.band-note a{color:var(--teal-deep);font-weight:700}

/* ---- what the AI decides ----
   Boxed rather than run into the prose, because it answers the question
   an institutional reader arrives with and should be findable by someone
   skimming. Teal rather than clay: this is reassurance, not a warning. */
.govbox{display:flex;gap:18px;align-items:flex-start;background:var(--teal-tint);
        border:1px solid var(--teal);border-radius:18px;padding:24px 26px;margin:0 0 26px}
.govbox .ic{flex:0 0 auto;width:32px;height:32px;color:var(--teal-deep)}
.govbox .ic svg{width:100%;height:100%}
.govbox h3{font-size:17px;font-weight:900;margin:0 0 10px;color:var(--teal-deep)}
.govbox p{margin:0 0 10px;font-size:14.5px;line-height:1.65}
.govbox p:last-child{margin-bottom:0}
@media (max-width:640px){ .govbox{padding:20px;gap:14px} }

/* ── the language picker ──────────────────────────────────────────
   A plain select, dressed to match the ghost button next to it. It
   sits in the header, in the mobile drawer and in the footer, and the
   same class has to look right on the bone background and on the
   card. */
.langpick{display:inline-flex;align-items:center;gap:6px;margin:0}
.langpick select{
  font-family:inherit;font-size:13px;font-weight:600;color:var(--teal-deep);
  background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:9px 30px 9px 12px;cursor:pointer;appearance:none;line-height:1.2;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23134B4D' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;
}
.langpick select:hover{border-color:var(--teal)}
.langpick select:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.langpick.wide select{width:100%}
.langpick.foot select{margin-top:14px}
/* The arrow is drawn on the right. In an Arabic page the control
   flips, so the arrow has to move with it or it sits on top of the
   text. */
[dir="rtl"] .langpick select{
  padding:9px 12px 9px 30px;background-position:left 9px center;
}
/* Visually hidden, still read aloud. A select with no label is a
   control a screen reader announces as nothing at all. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.snav-drop-lang{padding:10px 0 4px}
.btn-sm{padding:6px 12px;font-size:13px}

/* ── direction, for text that is not in the interface language ────
   The interface direction is set once, on <html>, from the language
   the user chose. For Arabic, Persian, Urdu and Hebrew that is rtl —
   and an English sentence dropped into an rtl block has its closing
   full stop dragged to the front: ".Take a history from Mr Alvarez"
   instead of "Take a history from Mr Alvarez."

   On this site that is not a cosmetic problem. What the patient says,
   what the learner said back, the criterion names and the feedback on
   a consultation are all English by design — see the note at the top
   of includes/lang.php — so in four of the twenty languages it would
   be every clinical word on the screen.

   Two rules, and membership of each is decided by what the text IS,
   never by who is reading it. */

/* 1. English by definition: the medicine, and the learner's own words
      back to them. unicode-bidi:isolate matters as much as
      direction:ltr — without it the block still joins the surrounding
      rtl run and can reorder the Arabic beside it. */
.enmat, .transcript, .turn-text, .patient-line, .learner-line,
.criterion, .crit-name, .cid, .case-body, .stem, .blueprint-body,
.report-evidence, .mono {
  direction:ltr;
  unicode-bidi:isolate;
  text-align:start;
}

/* 2. Text somebody typed, in a language nobody declared — a note to
      themselves, a message to their teacher. Forcing ltr here would
      break an Arabic learner's own notes, which is the same bug
      pointed the other way. plaintext is the CSS form of dir="auto":
      each paragraph takes its direction from its first strong
      character. */
.usertext, .msg-body, .note-body, textarea {
  unicode-bidi:plaintext;
}

/* ── legal pages ─────────────────────────────────────────────
   A policy is read by somebody looking for one specific answer, so
   the headings do more work here than they do in an essay: they are
   large enough to scan against and spaced far enough apart that the
   eye stops at each one. */
.longform.legal h2{
  margin:2.6rem 0 .85rem; font-size:1.35rem; line-height:1.3;
  padding-top:1.6rem; border-top:1px solid var(--line);
}
.longform.legal h2:first-of-type{border-top:0; padding-top:0; margin-top:1.2rem}
.longform.legal p{margin:0 0 1rem}
.legal-date{
  font-size:.85rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink2); margin-bottom:2rem !important;
}
.longform.legal .tick-list{margin:0 0 1.4rem}

/* The inline notice lives in styles.css, which every page loads —
   it was already there and already used by four signed-in screens.
   Defining a second .notice here would have been two rules for one
   class name in two files, with the winner decided by load order. */

.legal-more{
  display:flex; flex-wrap:wrap; gap:1.4rem;
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.95rem;
}

/* An English run standing in for a missing translation. isolate is
   what stops its full stop being dragged to the far end of an Arabic
   line; see langHas()/tb() in includes/lang.php. */
.enfall{unicode-bidi:isolate; text-align:start}

/* ── who pays ────────────────────────────────────────────────
   Three routes in and three answers. A table rather than prose,
   because the question is a lookup — a reader arrives knowing which
   row is theirs and wants only that one. */
.whopays{margin:44px auto 0;max-width:760px;background:var(--card);
  border:1px solid var(--line);border-radius:18px;padding:28px 30px}
.whopays h3{font-size:19px;font-weight:900;margin:0 0 6px}
.whopays > p{font-size:14px;color:var(--ink2);margin:0 0 18px}
.whopays table{width:100%;border-collapse:collapse;font-size:14px}
.whopays th{text-align:start;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);padding:0 0 8px;border-bottom:1px solid var(--line);font-weight:800}
.whopays td{padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.whopays td:first-child{font-weight:700;padding-inline-end:26px;width:38%}
.whopays tr:last-child td{border-bottom:0}
.whopays-note{font-size:13px;color:var(--ink2);margin:16px 0 0;line-height:1.6}
@media (max-width:620px){
  .whopays td:first-child{width:auto;display:block;padding-bottom:2px;border-bottom:0}
  .whopays td:last-child{display:block;padding-top:0}
}

/* The price slot now carries a real figure, so the unit sits beside it
   rather than the whole line being one weight. */
.plan .price b i{font-style:normal;font-size:13px;font-weight:600;color:var(--ink2)}
.plan .btn + .btn{margin-top:8px}