/* ============================================================
   Crypto MasterMind page · drop-in for templates/mm.html
   Body: mm-cayman-2026.html. Requires colors_and_type.css loaded first.
   Every value is a token, token arithmetic, or a named GAP below.
   Scope: everything under .mm, plus the HubSpot embed inside #mm-form.
   Served at /css/mm.css. Inter and Archivo come from colors_and_type.css,
   which already self-hosts both from /fonts/ (the same files Design supplied).
   HubSpot draws the form in its own same-origin frame, so the #mm-form rules
   below do not reach it directly: templates/mm.html copies them into that
   frame, with every token resolved, once the form is ready.
   ============================================================ */


/* ---- GAPS — no token exists; each is token-derived and listed in Notes.md ---- */
.mm{
  --mm-tap:calc(var(--sp-6) + var(--sp-3));   /* GAP 1 · 44px touch target (desktop) */
  --mm-tap-phone:var(--sp-7);                 /* GAP 1 · 48px touch target (phone) */
  --mm-page:calc(var(--sp-9) * 12);           /* GAP 2 · 1152px content width */
  --mm-side:calc(var(--sp-9) * 5);            /* GAP 2 · 480px form column */
  --mm-measure:64ch;                          /* GAP 2 · reading measure */
  --mm-edge:var(--text-3);                    /* GAP 3 · control border (--border fails 3:1 on a field) */
  --mm-box:var(--sp-5);                       /* 24px tick box */
  --mm-title:calc(var(--fs-h1) * 1.5);        /* GAP 4 · 42px page title — no step between h1 28 and display 48 */
}
/* GAP 5 · Cayman city face — ratified (Archivo Expanded wdth 118 / wght 700) but not upstream. */
.mm-face-cayman{font-family:'Archivo',var(--font);font-weight:var(--fw-bold);font-variation-settings:'wdth' 118,'wght' 700;letter-spacing:normal;color:var(--accent)}

/* ============ page ============ */
.mm{font-family:var(--font);color:var(--text-1);font-size:var(--fs-body);line-height:var(--lh-body);max-width:var(--mm-page);width:100%;margin:0 auto;padding:var(--sp-7) var(--sp-6) var(--sp-9)}
.mm *{box-sizing:border-box}
.mm h1,.mm h2,.mm h3,.mm p,.mm ul,.mm ol,.mm dl,.mm dd{margin:0}
.mm .mm-card-k{margin-top:calc(var(--sp-2) * -1)}
.mm b{font-weight:var(--fw-semibold)}
.mm a{color:var(--text-1);text-underline-offset:.2em}
.mm a:hover{color:var(--accent-lt)}
.mm :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mm h2{font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:-0.01em;color:var(--text-1);text-wrap:balance}
.mm-h3{font-size:var(--fs-h2);font-weight:var(--fw-semibold);line-height:var(--lh-heading);color:var(--text-1)}

/* top grid: copy left, form right */
.mm-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--mm-side);gap:var(--sp-8);align-items:start}
.mm-grid:has(.mm-closed){grid-template-columns:minmax(0,1fr) calc(var(--sp-9) * 4)}
.mm-main{display:grid;gap:var(--sp-7);min-width:0}
/* .mm-flow: the first long section. On wide screens it continues in the left column beside the
   request panel, which is much taller than the opening copy; below 1101px it runs full width under both. */
.mm-flow{grid-column:1 / -1;min-width:0;display:grid;gap:var(--sp-7)}
@media (min-width:1101px){
  .mm-grid{grid-template-rows:auto 1fr}
  .mm-main{grid-column:1;grid-row:1}
  .mm-side{grid-column:2;grid-row:1 / span 2}
  .mm-flow{grid-column:1;grid-row:2}
  .mm-flow .mm-sec{padding:var(--sp-6) 0 0;max-width:var(--mm-measure)}
  .mm-flow .mm-sec-h{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .mm-flow .mm-cols{grid-template-columns:minmax(0,1fr)}
}

/* hero */
.mm-hero{display:grid;gap:var(--sp-3)}
.mm-eyebrow{color:var(--accent-lt)}
.mm-title{font-size:var(--mm-title);font-weight:var(--fw-bold);line-height:var(--lh-heading);letter-spacing:-0.01em;color:var(--text-1);text-wrap:balance}
.mm-sub{font-size:var(--fs-h2);color:var(--text-1);margin-top:var(--sp-1)}
.mm-mod{font-size:var(--fs-secondary);color:var(--text-2)}
.mm-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-5);margin-top:var(--sp-4);border-top:1px solid var(--border)}
.mm-facts > div{padding:var(--sp-4) 0;border-bottom:1px solid var(--border);display:grid;gap:var(--sp-1);align-content:start}
.mm-facts dd{font-size:var(--fs-body);color:var(--text-1)}
.mm-facts dd span{color:var(--text-2)}
.mm-jump{display:none;margin-top:var(--sp-4)}

.mm-intro{display:grid;gap:var(--sp-4);max-width:var(--mm-measure)}
.mm-block{display:grid;gap:var(--sp-4);padding-top:var(--sp-6);border-top:1px solid var(--border);max-width:var(--mm-measure)}
.mm-note{font-size:var(--fs-secondary);color:var(--text-2);line-height:var(--lh-body)}
.mm-note b{color:var(--text-1)}

/* participant mix — bar length = upper bound of each range */
.mm-mix{list-style:none;padding:0;display:grid;gap:var(--sp-3)}
.mm-mix li{display:grid;grid-template-columns:var(--sp-9) minmax(0,1fr);gap:var(--sp-1) var(--sp-4);align-items:baseline}
.mm-mix-v{font-size:var(--fs-h2);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:var(--text-1);white-space:nowrap}
.mm-mix-k{color:var(--text-1)}
.mm-mix-bar{grid-column:2;height:var(--sp-1);background:var(--navy-hi);border-radius:var(--radius-pill);position:relative;overflow:hidden}
.mm-mix-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--accent);border-radius:inherit}

/* steps */
.mm-steps{list-style:none;padding:0;display:grid;gap:var(--sp-4);counter-reset:n}
.mm-steps li{counter-increment:n;display:grid;grid-template-columns:var(--sp-6) minmax(0,1fr);gap:var(--sp-3)}
.mm-steps li::before{content:counter(n);width:var(--sp-6);height:var(--sp-6);border-radius:var(--radius-pill);border:1px solid var(--accent-border);color:var(--accent-lt);display:grid;place-items:center;font-size:var(--fs-secondary);font-weight:var(--fw-semibold);line-height:1}

/* form column */
.mm-side{min-width:0;scroll-margin-top:var(--sp-5)}
.mm-panel{background:var(--navy-mid);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-6);display:grid;gap:var(--sp-4)}
.mm-panel-h{border-bottom:1px solid var(--border);padding-bottom:var(--sp-4)}
/* "After you submit" under the form: restored 26 Oct 2026 at Dan Hubscher's request */
.mm-after{display:grid;gap:var(--sp-3);border-top:1px solid var(--border);padding-top:var(--sp-4)}
.mm-contact{font-size:var(--fs-secondary);color:var(--text-2);border-top:1px solid var(--border);padding-top:var(--sp-4)}
.mm-fallback{border:1px solid var(--mm-edge);border-radius:var(--radius-sm);padding:var(--sp-4)}
.mm-fallback[hidden]{display:none}
.mm-closed{gap:var(--sp-3)}
.mm-closed .u-label{color:var(--accent-lt)}

/* full-width sections below the fold */
.mm-more{display:grid;margin-top:var(--sp-8)}
.mm-sec{padding:var(--sp-8) 0;border-top:1px solid var(--border);display:grid;gap:var(--sp-6)}
.mm-sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--sp-8);align-items:baseline}
.mm-sec-h p{max-width:var(--mm-measure)}
.mm-lead{font-size:var(--fs-secondary);color:var(--text-2)}
.mm-coda{max-width:var(--mm-measure)}
.mm-cols{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.mm-cols li{padding-top:var(--sp-4);border-top:2px solid var(--accent);display:grid;gap:var(--sp-2);align-content:start}
.mm-cols li > span > b:first-child{display:block;margin-bottom:var(--sp-2);font-size:var(--fs-h2);line-height:var(--lh-heading)}
.mm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.mm-card{background:var(--navy-mid);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-5);display:grid;gap:var(--sp-3);align-content:start}
.mm-card-k{font-size:var(--fs-secondary);color:var(--accent-lt);margin-top:calc(var(--sp-2) * -1)}
.mm-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8);align-items:start}
.mm-two > div{display:grid;gap:var(--sp-4);align-content:start}
.mm-list{list-style:none;padding:0;display:grid;gap:var(--sp-3)}
.mm-list li{display:grid;grid-template-columns:var(--sp-4) minmax(0,1fr);gap:var(--sp-2)}
.mm-list li::before{content:"";width:var(--sp-2);height:2px;background:var(--accent);margin-top:calc(var(--lh-body) * .5em)}
.mm-bio{font-size:var(--fs-secondary);color:var(--text-2);border-top:1px solid var(--border);padding-top:var(--sp-4)}
.mm-bio b{color:var(--text-1)}
.mm-ruled{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-8)}
.mm-ruled li{padding:var(--sp-4) 0;border-bottom:1px solid var(--border)}
.mm-member{background:var(--navy-mid);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-7);display:grid;gap:var(--sp-4);justify-items:start}
.mm-member p:last-child{max-width:var(--mm-measure)}
.mm-badge{font-size:var(--fs-label);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--ls-label);line-height:var(--lh-label);color:var(--accent-lt);border:1px solid var(--accent-border);border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-3)}
.mm-close{justify-items:start;gap:var(--sp-4);padding-bottom:0}
.mm-close p{max-width:var(--mm-measure)}
.mm-textlink{font-weight:var(--fw-semibold);min-height:var(--mm-tap);display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}

/* ============ HubSpot embed — styling only; fields, order and wording belong to HubSpot ============ */
#mm-form .hs-form{display:grid;gap:var(--sp-5);font-family:var(--font)}
#mm-form fieldset{border:0;margin:0;padding:0;min-width:0;max-width:none !important;display:grid;gap:var(--sp-5)}
#mm-form fieldset.form-columns-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
#mm-form .hs-form-field{float:none !important;width:auto !important;display:grid;gap:var(--sp-2);min-width:0}
#mm-form .input{margin:0 !important}
#mm-form .hs-form-field > label{font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:var(--lh-label);color:var(--text-1)}
#mm-form .hs-form-required{color:var(--text-2);margin-left:var(--sp-1)}
#mm-form .hs-field-desc{font-size:var(--fs-secondary);color:var(--text-2);line-height:var(--lh-label)}
#mm-form .hs-input:not([type="checkbox"]):not([type="radio"]){width:100% !important;font:inherit;font-size:var(--fs-input);color:var(--text-1);background:var(--navy-hi);border:1px solid var(--mm-edge);border-radius:var(--radius-sm);min-height:var(--mm-tap);padding:0 var(--sp-4)}
#mm-form textarea.hs-input{min-height:calc(var(--sp-9) + var(--sp-7)) !important;padding:var(--sp-3) var(--sp-4) !important;line-height:var(--lh-body);resize:vertical}
#mm-form select.hs-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - var(--sp-5)) 50%,calc(100% - var(--sp-4)) 50%;background-size:var(--sp-2) var(--sp-2);background-repeat:no-repeat;padding-right:var(--sp-7) !important}
#mm-form select.hs-input option{background:var(--navy-mid);color:var(--text-1)}
#mm-form .hs-input::placeholder{color:var(--text-3)}
#mm-form .hs-input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 1px var(--accent)}
#mm-form .inputs-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
#mm-form .inputs-list label{display:grid;grid-template-columns:var(--mm-box) minmax(0,1fr);gap:var(--sp-3);align-items:center;min-height:var(--mm-tap);cursor:pointer;font-size:var(--fs-body);color:var(--text-1)}
#mm-form .inputs-list input{appearance:none;margin:0;width:var(--mm-box);height:var(--mm-box);border:1px solid var(--mm-edge);background:var(--navy-hi);display:grid;place-items:center;cursor:pointer}
#mm-form .inputs-list input[type="checkbox"]{border-radius:var(--sp-1)}
#mm-form .inputs-list input[type="radio"]{border-radius:var(--radius-pill)}
#mm-form .inputs-list input:checked{border-color:var(--accent)}
#mm-form .inputs-list input[type="checkbox"]:checked{background:var(--accent)}
#mm-form .inputs-list input[type="checkbox"]:checked::after{content:"";width:calc(var(--sp-1) * 1.5);height:var(--sp-3);border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
#mm-form .inputs-list input[type="radio"]:checked::after{content:"";width:var(--sp-3);height:var(--sp-3);border-radius:var(--radius-pill);background:var(--accent)}
#mm-form .inputs-list input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* errors — outlined only, always with words */
#mm-form .hs-input.invalid,#mm-form .hs-input.error{border-color:var(--error) !important;box-shadow:0 0 0 1px var(--error)}
#mm-form .hs-error-msgs{list-style:none;margin:0;padding:0}
#mm-form .hs-error-msg,#mm-form .hs-error-msgs label{font-size:var(--fs-secondary);font-weight:var(--fw-regular);color:var(--error);line-height:var(--lh-label)}
#mm-form .hs_error_rollup .hs-error-msgs{border:1px solid var(--error);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4)}
/* submit = primary button */
#mm-form .hs_submit .actions{margin:0;padding:0}
#mm-form .hs-button{width:100%;font-family:var(--font);font-size:var(--fs-body);font-weight:var(--fw-semibold);min-height:var(--mm-tap);padding:0 var(--sp-5);border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:var(--navy);cursor:pointer;transition:background .18s ease,color .18s ease}
#mm-form .hs-button:hover{background:transparent;color:var(--accent)}
#mm-form .legal-consent-container,#mm-form .hs-richtext{font-size:var(--fs-secondary);color:var(--text-2)}
/* the live embed's phone field: a country select and a number box inside one div that also
   carries hs-input. Lay the pair out side by side and keep the wrapper itself unboxed. */
#mm-form .hs-input.hs-fieldtype-intl-phone:not([type="checkbox"]):not([type="radio"]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);background:none;border:0;padding:0;min-height:0;box-shadow:none}
#mm-form .hs-fieldtype-intl-phone > .hs-input{float:none;margin:0}
#mm-form .hs-form-field > label span{font-size:inherit;line-height:inherit}
#mm-form .submitted-message{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-1)}

/* ============ narrow desktop / tablet ============ */
@media (max-width:1100px){
  .mm-cols,.mm-cards{grid-template-columns:minmax(0,1fr)}
  .mm-sec-h{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
}
@media (max-width:960px){
  .mm-grid,.mm-grid:has(.mm-closed){grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
  .mm-jump{display:inline-flex}
  .mm-two,.mm-ruled{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
  .mm-ruled{gap:0}
}
/* ============ phone ============ */
@media (max-width:720px){
  .mm{--mm-tap:var(--mm-tap-phone);padding:var(--sp-5) var(--sp-4) var(--sp-8)}
  .mm .u-btn{min-height:var(--mm-tap)} /* token sheet fixes .u-btn at 44px; phone floor is 48 */
  .mm-jump{width:100%}
  .mm-facts{grid-template-columns:minmax(0,1fr)}
  .mm-panel{padding:var(--sp-5) var(--sp-4);margin:0 calc(var(--sp-2) * -1)}
  #mm-form fieldset.form-columns-2{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .mm-sec{padding:var(--sp-7) 0}
  .mm-member{padding:var(--sp-5)}
  .mm-mix li{grid-template-columns:minmax(0,1fr)}
  .mm-mix-bar{grid-column:1}
}