/* ============================================================
   IMAT 2027 — the offer: two options, one journey.
   Built on the existing edtrainit tokens. No new colours,
   no new typefaces. Designed to be read in two seconds by
   someone whose first language is not English.
   ============================================================ */

/* ---------- Two options ---------------------------------- */
.opt2{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(16px,2.2vw,26px);
  align-items:start;
}

.opt{
  position:relative;
  display:flex;flex-direction:column;
  background:#FFFFFF;
  border:1px solid #E3E3E3;
  border-radius:var(--r-lg,22px);
  padding:clamp(24px,3vw,38px);
}

/* The option students can actually buy carries the weight */
.opt-main{border-color:#34A1A3;border-width:2px}
.opt-partner{background:#FFFFFF}

.opt-who{
  display:inline-flex;align-items:center;gap:8px;
  align-self:flex-start;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#0B3F46;
  background:#FFFFFF;border:1px solid #34A1A3;
  padding:6px 12px;border-radius:999px;
  margin-bottom:18px;
}
.opt-who::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#34A1A3;
}
/* Locked tier reads as closed, not as a lesser product */
.opt-who-locked{border-color:#E3E3E3;color:rgba(0,0,0,.62)}
.opt-who-locked::before{
  content:"";width:11px;height:11px;border-radius:0;background:none;
  border:1.5px solid rgba(0,0,0,.45);
  border-bottom-width:5px;border-radius:2px;
}

.opt-name{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(22px,2.5vw,30px);line-height:1.12;letter-spacing:-.02em;
  color:#000;
}

.opt-price{
  display:flex;align-items:baseline;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(46px,6vw,66px);line-height:1;letter-spacing:-.035em;
  color:#0B3F46;margin-top:16px;
}
.opt-cur{font-size:.52em;font-weight:700;margin-right:3px;color:rgba(0,0,0,.55)}
.opt-price-note{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(0,0,0,.55);margin-top:8px;
}

.opt-desc{
  font-size:clamp(16px,1.7vw,18px);line-height:1.5;
  color:#000;margin-top:18px;font-weight:600;
}

.opt-gets{
  list-style:none;margin:20px 0 0;padding:0;
  border-top:1px solid #E3E3E3;
}
.opt-gets li{
  display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;
  padding:13px 0;border-bottom:1px solid #E3E3E3;
  font-size:15.5px;line-height:1.45;color:#000;
}
.opt-gets li::before{
  content:"";width:18px;height:18px;margin-top:1px;border-radius:50%;
  background:#34A1A3;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,
       linear-gradient(#000,#000);
  mask-composite:exclude;
}
.opt-partner .opt-gets li::before{background:#0B3F46}

.opt-avail{
  margin-top:18px;font-size:14px;line-height:1.5;
  color:rgba(0,0,0,.68);
}
.opt-partner .opt-avail{
  background:#FFFFFF;border:1px solid #E3E3E3;border-radius:12px;
  padding:12px 14px;color:rgba(0,0,0,.72);
}

.opt-btn{margin-top:auto;justify-content:center;font-size:16.5px;padding:18px 26px}
.opt .opt-btn{margin-top:22px}
.opt-under{
  margin-top:12px;text-align:center;
  font-size:13.5px;line-height:1.5;color:rgba(0,0,0,.62);
}

/* expandable programme */
.opt-more{margin-top:22px;border-top:1px solid #E3E3E3;padding-top:4px}
.opt-more summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;font-size:15.5px;font-weight:700;color:#0B3F46;
}
.opt-more summary::-webkit-details-marker{display:none}
.opt-more summary .chev{
  flex:none;width:11px;height:11px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .3s ease;margin-bottom:3px;
}
.opt-more[open] summary .chev{transform:rotate(-135deg);margin-bottom:-3px}
.opt-more-body{padding-bottom:6px}

.tline{list-style:none;margin:0;padding:0}
.tline li{
  display:grid;grid-template-columns:118px 1fr;gap:14px;
  padding:11px 0;border-top:1px solid #E3E3E3;
  font-size:14.5px;line-height:1.5;color:rgba(0,0,0,.78);
}
.tline li b{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:#0B3F46;padding-top:3px;
}
.tline-fine{
  margin-top:14px;font-size:12.5px;line-height:1.55;color:rgba(0,0,0,.55);
}

/* ---------- How to join ----------------------------------- */
.join{
  margin-top:clamp(26px,3.4vw,40px);
  background:#FFFFFF;border:1px solid #E3E3E3;border-radius:var(--r-lg,22px);
  padding:clamp(24px,3vw,34px);
}
.join-h{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(19px,2vw,24px);line-height:1.15;letter-spacing:-.02em;color:#000;
  margin-bottom:22px;
}
.join-steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,30px);
}
.join-steps li{
  display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:4px;align-items:center;
}
.join-n{
  grid-row:1/3;align-self:start;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:#0B3F46;color:#FFFFFF;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:19px;
}
.join-t{font-size:17px;font-weight:700;color:#000;line-height:1.25}
.join-d{font-size:14.5px;line-height:1.5;color:rgba(0,0,0,.68)}

/* ---------- Form additions -------------------------------- */
.choice{border:0;padding:0;margin-top:16px}
.choice legend{
  display:block;font-size:13.5px;font-weight:600;margin-bottom:9px;color:#000;
}
.pick{
  display:flex;align-items:center;gap:11px;
  border:1px solid #E3E3E3;border-radius:12px;
  padding:13px 15px;margin-bottom:9px;cursor:pointer;
  font-size:15px;transition:border-color .2s ease,background .2s ease;
}
.pick:hover{border-color:#34A1A3}
.pick input{accent-color:#0B3F46;width:18px;height:18px;flex:none;margin:0}
.pick:has(input:checked){border-color:#0B3F46;background:#FFFFFF}
.pick:has(input:focus-visible){outline:2px solid #0B3F46;outline-offset:2px}

.opt-tag{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.5);
  margin-left:6px;
}
.modal-fine{
  margin-top:14px;font-size:12.5px;line-height:1.55;color:rgba(0,0,0,.58);
}

/* success state replaces the form rather than sitting under it */
.form-done{
  text-align:center;padding:12px 0 4px;
}
.form-done-tick{
  width:54px;height:54px;border-radius:50%;margin:0 auto 18px;
  background:#34A1A3;display:grid;place-items:center;
}
.form-done-tick svg{width:26px;height:26px;fill:none;stroke:#FFFFFF;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.form-done-h{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(20px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em;color:#000;
}
.form-done-p{margin-top:10px;font-size:15px;line-height:1.6;color:rgba(0,0,0,.72)}

/* ---------- Responsive ------------------------------------ */
@media(max-width:900px){
  .opt2{grid-template-columns:1fr}
  .opt-main{order:-1}          /* students first on mobile */
  .join-steps{grid-template-columns:1fr;gap:20px}
}
@media(max-width:520px){
  .tline li{grid-template-columns:1fr;gap:3px}
  .opt-btn{padding:17px 20px;font-size:16px}
}

/* The site's .field input rule turns every input into a full-width box;
   radios need resetting back to radios. */
.choice{gap:0}
.pick input[type="radio"]{
  -webkit-appearance:radio;appearance:radio;
  width:18px;height:18px;min-width:18px;
  padding:0;margin:0;border:0;border-radius:50%;
  background:none;box-shadow:none;flex:none;
}
.pick input[type="radio"]:focus{box-shadow:none;background:none}

/* An existing chip rule was turning the label's span into a second pill */
.pick > span{
  border:0;border-radius:0;background:none;padding:0;margin:0;
  font-size:15px;font-weight:500;color:#000;line-height:1.3;
}

/* Padlock for the partner tier, drawn properly */
.opt-who-locked::before{
  content:"";width:12px;height:12px;border:0;border-radius:0;background:rgba(0,0,0,.55);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ============================================================
   THE PATH — three actions on one card without three
   competing buttons. Numbered, connected, one primary.
   ============================================================ */
.path{
  list-style:none;margin:22px 0 0;padding:0;
  border-top:1px solid #E3E3E3;
}
.path-step{
  position:relative;
  display:grid;grid-template-columns:30px 1fr;gap:14px;
  padding:18px 0 18px;
  border-bottom:1px solid #E3E3E3;
}
.path-step:last-child{border-bottom:0;padding-bottom:4px}

/* the thread that joins the steps */
.path-step::before{
  content:"";position:absolute;left:14px;top:40px;bottom:-1px;
  width:1px;background:#E3E3E3;
}
.path-step:last-child::before{display:none}

.path-n{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:#FFFFFF;border:1px solid #E3E3E3;color:rgba(0,0,0,.55);
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;
  position:relative;z-index:1;
}
.path-step.is-now .path-n{background:#0B3F46;border-color:#0B3F46;color:#FFFFFF}

.path-body{display:flex;flex-direction:column;gap:9px;min-width:0}
.path-t{font-size:15.5px;font-weight:700;color:#000;line-height:1.3}
.path-step.is-now .path-t{color:#0B3F46}
.path-d{font-size:13.5px;line-height:1.5;color:rgba(0,0,0,.62)}

.path-btn{width:100%;justify-content:center;text-align:center;padding:15px 20px;font-size:16px}

/* Step 3 reads as a secure door, not a third button competing for the eye */
.path-pay{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;
  border:1px dashed #34A1A3;background:#FFFFFF;
  text-decoration:none;color:#0B3F46;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.path-pay:hover,.path-pay:focus-visible{
  background:#FFFFFF;border-style:solid;border-color:#0B3F46;transform:translateY(-1px);
}
.path-pay-lock{
  flex:none;width:17px;height:17px;background:#0B3F46;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/17px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/17px no-repeat;
}
.path-pay-txt{font-size:15.5px;font-weight:700;flex:1}
.path-pay-go{font-size:16px;transition:transform .25s ease}
.path-pay:hover .path-pay-go{transform:translateX(3px)}

/* ---------- Partner card actions ---------- */
.opt-acts{margin-top:auto;padding-top:22px;display:grid;gap:10px}
.opt-acts .btn{justify-content:center;text-align:center;padding:16px 20px;font-size:16px}

/* ---------- How to join: now three ---------- */
.join-3{grid-template-columns:repeat(3,1fr)}
.join-fine{
  margin-top:20px;padding-top:16px;border-top:1px solid #E3E3E3;
  font-size:12.5px;line-height:1.6;color:rgba(0,0,0,.58);
}
.join-fine + .join-fine{margin-top:8px;padding-top:0;border-top:0}

/* The partner card's inclusions run longer, so the footnote sits tighter */
.opt-partner .opt-gets li .plan-fine{margin-top:4px}

@media(max-width:1040px){ .join-3{grid-template-columns:1fr} }
@media(max-width:520px){
  .path-step{grid-template-columns:26px 1fr;gap:12px}
  .path-n{width:26px;height:26px;font-size:12px}
  .path-step::before{left:12px;top:34px}
}

/* The access footnote sits under its bullet, in the text column, not beside the tick */
.opt-gets li .plan-fine{grid-column:2;display:block;margin:5px 0 0}

/* ============================================================
   REVISION 2 — why £459 ≠ £339, the course invitation,
   the pay step's own weight, and the partner exclusion.
   ============================================================ */

/* ---------- Why the two prices differ -------------------- */
.opt-why{
  margin-top:14px;
  font-size:15px;line-height:1.6;color:rgba(0,0,0,.66);
}
.opt-why b{color:#0B3F46;font-weight:700}

/* ---------- "See the full course" — an invitation, not a row ---- */
.opt-more-invite{border-top:0;margin-top:24px;padding-top:0}
.opt-more-invite > summary{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:16px;
  border:1px solid #43C4B5;
  background:linear-gradient(180deg,#FFFFFF 0%,rgba(67,196,181,.10) 100%);
  cursor:pointer;
  transition:border-color .25s ease,background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.opt-more-invite > summary:hover,
.opt-more-invite > summary:focus-visible{
  border-color:#0B3F46;transform:translateY(-1px);
  box-shadow:0 10px 26px -18px rgba(11,63,70,.55);
}
.om-ico{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:#0B3F46;
}
.om-ico svg{
  width:19px;height:19px;fill:none;stroke:#FFFFFF;
  stroke-width:2.2;stroke-linecap:round;
}
.om-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.om-txt b{font-size:16px;font-weight:800;color:#0B3F46;line-height:1.25}
.om-txt i{font-style:normal;font-size:13.5px;line-height:1.45;color:rgba(0,0,0,.6)}
.opt-more-invite > summary .chev{
  flex:none;width:10px;height:10px;margin:0 4px 3px 0;
  border-right:2px solid #0B3F46;border-bottom:2px solid #0B3F46;
}
.opt-more-invite .opt-more-body{padding:8px 2px 6px}

/* ---------- Step 3 carries its own weight ----------------- */
.path-step.is-pay .path-n{background:#43C4B5;border-color:#43C4B5;color:#0B3F46}
.path-step.is-pay .path-t{color:#0B3F46}
.path-pay{
  border:2px solid #0B3F46;border-radius:14px;padding:13px 15px;
}
.path-pay:hover,.path-pay:focus-visible{
  background:#0B3F46;border-color:#0B3F46;color:#FFFFFF;transform:translateY(-1px);
}
.path-pay-lock{
  width:28px;height:28px;border-radius:50%;background:#43C4B5;
  -webkit-mask:none;mask:none;display:grid;place-items:center;position:relative;
}
.path-pay-lock::after{
  content:"";width:15px;height:15px;background:#0B3F46;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/15px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/15px no-repeat;
}
.path-pay:hover .path-pay-lock{background:#FFFFFF}

/* ---------- What the partner licence does NOT include ----- */
.opt-not{color:rgba(0,0,0,.6)}
.opt-not::before{
  background:#767676 !important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat,
          linear-gradient(#000,#000) !important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat,
       linear-gradient(#000,#000) !important;
  /* the mask shorthand above resets the composite, so restate it */
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
}

@media(max-width:520px){
  .opt-more-invite > summary{padding:14px 15px;gap:12px}
  .om-ico{width:32px;height:32px}
  .om-txt b{font-size:15px}
}

/* ---------- Seven months, stated under the headline ------- */
.hero-span{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:16px;padding:8px 15px;border-radius:999px;
  border:1px solid #43C4B5;background:rgba(67,196,181,.10);
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;letter-spacing:.04em;line-height:1.4;
  color:#0B3F46;
}
.hero-span b{font-weight:700;color:#0B3F46}
.hero-v6 .hero-span{
  border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#FFFFFF;
}
.hero-v6 .hero-span b{color:#43C4B5}
.hero-span b{white-space:nowrap}
.hs-of,.hs-full,.hs-short,.hs-sep{white-space:nowrap}
.hs-short{display:none}
@media(max-width:560px){
  .hero-span{font-size:11.5px;padding:7px 13px;gap:6px}
  .hs-of{display:none}
  .hs-full{display:none}
  .hs-short{display:inline}
}

/* The two things that sell the programme, lifted out of the lede */
.hero-lede em{font-style:normal;font-weight:600;color:#0B3F46}
.hero-v6 .hero-lede em{color:#43C4B5}

/* ============================================================
   REGISTRATION FORM — enquiry-stage data minimisation
   ============================================================ */

/* The notice that has to be read before anything is typed */
.reg-intro{
  margin:0 0 22px;padding:15px 17px;
  border:1px solid #E3E3E3;border-left:3px solid #43C4B5;border-radius:12px;
  background:#FFFFFF;
  font-size:14.5px;line-height:1.6;color:rgba(0,0,0,.72);
}
.reg-intro a{color:#0B3F46;font-weight:600}

/* "All optional" sits beside the section name, so nobody guesses */
.fs-opt{
  margin-left:10px;padding:3px 9px;border-radius:999px;
  border:1px solid #E3E3E3;background:#FFFFFF;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.55);
  vertical-align:middle;
}

/* Consent boxes are checkboxes, never chips: unticked, separate, unbundled */
.optin-lede{margin:0 0 12px;font-size:14px;line-height:1.55;color:rgba(0,0,0,.62)}
.optin{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 15px;margin-top:9px;border-radius:12px;
  border:1px solid #E3E3E3;background:#FFFFFF;cursor:pointer;
  transition:border-color .2s ease;
}
.optin:hover{border-color:#43C4B5}
.optin input[type="checkbox"]{
  -webkit-appearance:checkbox;appearance:checkbox;
  flex:none;width:17px;height:17px;margin:1px 0 0;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;
  accent-color:#0B3F46;
}
.optin > span{
  border:0;border-radius:0;background:none;padding:0;margin:0;
  font-size:14.5px;line-height:1.5;color:#000;
}
.optin:focus-within{outline:2px solid #34A1A3;outline-offset:3px}

/* The terms sit with the button that accepts them */
.form-terms{
  margin:14px 0 0;font-size:13px;line-height:1.6;color:rgba(0,0,0,.6);
}
.form-terms a{color:#0B3F46;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* The pay step's footnote now carries the terms it commits you to */
.path-d a{color:#0B3F46;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* The voluntary £159 withdrawal, shown before payment rather than buried in a policy */
.opt-safety{
  display:flex;align-items:flex-start;gap:12px;
  margin:18px 0 0;padding:15px 17px;border-radius:14px;
  border:1px solid #E3E3E3;background:#FFFFFF;
  font-size:14px;line-height:1.6;color:rgba(0,0,0,.70);
}
.opt-safety b{color:#0B3F46;font-weight:700}
.opt-safety a{color:#0B3F46;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.opt-safety-ico{
  flex:none;width:19px;height:19px;margin-top:1px;background:#34A1A3;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v5.5c0 4.2-2.9 7.6-7 9-4.1-1.4-7-4.8-7-9V6z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9 12.2l2.1 2.1L15.2 10' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/19px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 3v5.5c0 4.2-2.9 7.6-7 9-4.1-1.4-7-4.8-7-9V6z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3Cpath d='M9 12.2l2.1 2.1L15.2 10' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/19px no-repeat;
}

/* The legend is a flex row; at phone width the three parts need to wrap cleanly */
.fs-legend{flex-wrap:wrap;row-gap:8px}
.fs-opt{margin-left:0}
@media(max-width:560px){
  .fs-legend{gap:9px}
  .fs-legend i{order:-1}
  .fs-opt{order:3;flex-basis:100%}
}