/* =====================================================================
   Marketing pages (Prompt 29, 2026-10-26, drafts in review): About (Figma 1515:50863 / tablet 2383:581 / phone 2383:2201),
   In Her Element (1517:50865) and Storied Market (1517:51160) coming-soon pages, and the homepage "About Storied" band.
   Desktop ≥1024 (1216 content, 112 sides at 1440), tablet 600–1023 (680 content, 32 sides at 744; text one step down),
   phone <600 (358 content, 16 sides; app view; the Mobile type scale comes from tokens.css under 600).
   The Navbar overlays the page on desktop / tablet (120), so the first section adds it to its top padding.
   ===================================================================== */
.mk{
  --mk-gutter:clamp(48px,7.78vw,112px);      /* = .wrap gutter, 112 at 1440 */
  --mk-nav:var(--nav-h,120px);
  --mk-team-photo-bg:#E7E5D8;                 /* not a Figma token yet: paper colour of the sketch portraits (fills the photo frame corners) */
  --mk-spot-shade:rgba(10,8,6,.8);            /* not a Figma token yet: Studio / Hero (series) photo shade (= --studio-hero-shade) */
  --mk-spot-lead:rgba(255,255,255,.85);       /* not a Figma token yet: Studio / Hero lead, 85% white (= --studio-hero-lead) */
  --mk-closing-pad:120px;                     /* not a Figma token yet: About closing band padding (120, no spacing token) */
  --mk-spot-base:#0a0806;                     /* not a Figma token yet: Studio / Hero base under the photo (as series-app.css) */
  --mk-text-base-fixed:400 16px/24px var(--font-body);   /* not a Figma token yet: Desktop/11 text-base kept at 16/24 on phones (closing subtitles, 2404:2508) */
  background:var(--surface-background);color:var(--text-primary)}
.mk :is(h1,h2,h3,p){margin:0}
.mk-wrap{box-sizing:border-box;width:min(1216px,100% - 2 * var(--mk-gutter));margin-inline:auto}
.mk-eyebrow{font:var(--text-sm);color:var(--text-secondary)}
.mk-actions{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.mk-actions--center{justify-content:center}
.mk-actions .btn{height:48px}

/* ---- Hero (About): surface/default band, oversized H1, intro row (lead | statement + buttons), full-width rounded photo ---- */
.mk-hero{display:flex;flex-direction:column;gap:var(--space-64);padding:calc(var(--mk-nav) + var(--space-96)) 0 var(--space-40);background:var(--surface-default)}
.mk-hero__in{display:flex;flex-direction:column;gap:var(--space-32)}
.mk-hero__title{font:var(--text-8xl)}
.mk-hero__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-96);align-items:start}
.mk-hero__lead{font:var(--text-xl);color:var(--text-secondary)}
.mk-hero__side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-28)}
.mk-hero__statement{font:var(--text-2xl)}
.mk-hero__img{display:block;width:100%;height:auto;aspect-ratio:1216/673;object-fit:cover;border-radius:var(--radius-xl);background:var(--image-placeholder)}

/* ---- Pillars: three open columns, hairline on top, huge numeral ---- */
.mk-pillars{padding:var(--space-112) 0}
.mk-pillars__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24);align-items:start}
.mk-pillar{display:flex;flex-direction:column;gap:var(--space-16);padding-top:var(--space-28);border-top:1px solid var(--border-default)}
.mk-pillar__num{font:var(--text-8xl);color:var(--text-muted)}
.mk-pillar__title{font:var(--text-3xl)}
.mk-pillar__text{font:var(--text-base);color:var(--text-secondary)}

/* ---- Our Vision: Dark color mode band (.theme-dark) ---- */
.mk-vision{padding:var(--space-112) 0;background:var(--surface-background);color:var(--text-primary);scroll-margin-top:0}
.mk-vision__in{display:flex;align-items:flex-start;gap:var(--space-96)}
.mk-vision__head{flex:none;width:440px;display:flex;flex-direction:column;gap:var(--space-24)}
.mk-vision__eyebrow{font:var(--text-sm);color:var(--accent-default)}
.mk-vision__title{font:var(--text-7xl)}
.mk-vision__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-28)}
.mk-vision__lead{font:var(--text-2xl)}
.mk-vision__strong{font:var(--text-4xl)}
.mk-vision__text{font:var(--text-lg);color:var(--text-secondary)}
.mk-vision__rule{width:100%;height:1px;margin:0;border:0;background:var(--border-default)}
.mk-vision__quote{font:var(--text-2xl);color:var(--accent-default)}

/* ---- Storied Originals spotlight (About): header, Studio / Hero (series) card in Dark mode, Story / IP / Opportunity strip ---- */
.mk-spot{padding:var(--space-112) 0}
.mk-spot__in{display:flex;flex-direction:column;gap:var(--space-40)}
.mk-spot__head{display:flex;flex-direction:column;gap:var(--space-12)}
.mk-spot__title{font:var(--text-5xl)}
.mk-spot__card{position:relative;box-sizing:border-box;height:680px;display:flex;align-items:flex-end;padding:0 var(--space-64) var(--space-64);overflow:hidden;
  border:2px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--mk-spot-base);color:var(--text-primary)}
.mk-spot__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.mk-spot__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.1) 26.68%,#000 59.29%),var(--mk-spot-shade)}
.mk-spot__person{position:absolute;z-index:1;right:var(--space-64);bottom:0;width:555px;height:631px;object-fit:cover;object-position:top center;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.mk-spot__copy{position:relative;z-index:2;width:657px;max-width:60%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-16)}
.mk-spot__partner{display:block;width:143px;height:auto}
.mk-spot__logo-h{line-height:0}
.mk-spot__logo{display:block;width:min(673px,100%);height:auto}
.mk-spot__desc{font:var(--text-lg);color:var(--mk-spot-lead)}
.mk-spot__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}
.mk-spot__actions>.btn{height:48px}
.mk-spot__actions .button-group{background:var(--surface-background);border-color:var(--border-subtle)}
.mk-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24)}
.mk-col{display:flex;flex-direction:column;gap:var(--space-8);padding-top:var(--space-24);border-top:1px solid var(--border-default)}
.mk-col__title{font:var(--text-xl)}
.mk-col__text{font:var(--text-base);color:var(--text-secondary)}

/* ---- Our Team: editorial directory, every card the same size; founders and athletes each start a new row ---- */
.mk-team{padding:var(--space-48) 0 var(--space-112);scroll-margin-top:var(--mk-nav)}
.mk-team__in{display:flex;flex-direction:column;gap:var(--space-56)}
.mk-team__head{display:flex;align-items:flex-end;gap:var(--space-96)}
.mk-team__intro{flex:1;min-width:0;max-width:600px;display:flex;flex-direction:column;gap:var(--space-12)}
.mk-team__title{font:var(--text-4xl)}
.mk-team__lead{flex:none;width:520px;max-width:45%;margin-left:auto;font:var(--text-lg);color:var(--text-secondary)}
.mk-team__group{display:flex;flex-direction:column;gap:var(--space-24);padding-top:var(--space-20);border-top:1px solid var(--border-default)}
.mk-team__label{font:var(--text-sm);color:var(--text-secondary)}
.mk-team__grid{display:grid;grid-template-columns:repeat(3,minmax(0,300px));gap:var(--space-24);margin:0;padding:0;list-style:none}
.mk-person{display:flex;flex-direction:column;gap:var(--space-12);min-width:0}
.mk-person__photo{display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-lg);background:var(--mk-team-photo-bg)}
.mk-person__photo img{display:block;width:100%;height:100%;object-fit:cover}
.mk-person__meta{display:flex;flex-direction:column;gap:var(--space-2)}
.mk-person__name{font:var(--text-base);color:var(--text-primary)}
.mk-person__role{font:var(--text-xs);color:var(--text-secondary)}

/* ---- Closing (1515:50966, redesigned 2026-10-26): Dark band, two previews 596 wide, 24 apart, each a centred column 20 apart:
   In Her Element (Athlete card 408, logo 427 × 48, subtitle, Learn more) and Storied Market (Product card 280, Desktop/04 title,
   subtitle, Learn more). Tablet 2404:1659: stacked 72 apart, cards 320. Phone 2404:2503: stacked 64 apart, cards 280, logo 358. ---- */
.mk-closing{padding:var(--mk-closing-pad) 0;background:var(--surface-background);color:var(--text-primary)}
.mk-closing__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24);align-items:start}
.mk-preview-col{display:flex;flex-direction:column;align-items:center;gap:var(--space-20);text-align:center;min-width:0}
.mk-preview-col__card{width:min(280px,100%)}
.mk-preview-col__card--athlete{width:min(408px,100%);aspect-ratio:1}
.mk-preview-col__logo{margin:0;line-height:0;color:var(--text-primary)}
.mk-preview-col__logo .mk-ihe-logo{display:block;width:min(427px,100%);height:auto}
.mk-preview-col__title{font:var(--text-6xl)}
@media (min-width:1280px){.mk-preview-col__title{white-space:nowrap}}   /* one line as drawn (602 wide text in a 596 column) */
.mk-preview-col__sub{font:var(--text-base);color:var(--text-secondary)}
.mk-preview-col .btn{height:48px}

/* =====================================================================
   Coming-soon pages (In Her Element, Storied Market): dark page in both site themes. <main> carries the scoped Dark color mode
   (.theme-dark) and the navbar / App header / Tab bar use the navTheme: dark variant (partials/nav.njk); the footer keeps the site theme.
   ===================================================================== */
.mk-badge{display:inline-flex;align-items:center;min-height:24px;box-sizing:border-box;padding:var(--space-4) var(--space-12);border:1px solid var(--border-default);
  border-radius:var(--radius-sm);background:var(--badge-neutral-bg);font:var(--text-sm);color:var(--text-secondary);white-space:nowrap}
.mk-soon-hero{--mk-glow-color:rgba(255,255,255,.08);   /* not a Figma token yet: hero glows (soft white radial) */
  position:relative;overflow:hidden;box-sizing:border-box;min-height:calc(var(--mk-nav) + 1056px);display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--mk-nav) + var(--space-64)) 0 var(--space-64)}
.mk-glow{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,var(--mk-glow-color),transparent)}
.mk-glow--1{left:calc(50% - 300px);top:calc(var(--mk-nav) + 40px);width:900px;height:900px}
.mk-glow--2{left:-240px;top:calc(var(--mk-nav) + 520px);width:760px;height:760px}
.mk-soon-stack{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-28);width:min(640px,100%);margin-inline:auto;text-align:center}
.mk-soon-logo{margin:0;line-height:0;color:var(--text-primary)}
.mk-ihe-logo{display:block;width:min(640px,100%);height:auto}
.mk-soon-lead{font:var(--text-article-lead);color:var(--text-primary)}
.mk-waitlist{width:min(520px,100%);text-align:left}
.mk-waitlist .email-sub{max-width:none}
.mk-waitlist .email-sub__control{border-color:var(--border-strong)}
.mk-waitlist .email-sub__help{color:var(--text-muted)}
.mk-waitlist.is-error .email-sub__control{border-color:var(--feedback-error)}
.mk-waitlist.is-error .email-sub__help{color:var(--feedback-error)}
.mk-waitlist.is-done .email-sub__help{color:var(--feedback-success)}

/* Floating athlete cards (Size=Small, 190 at 1440). Desktop: absolute, Figma positions relative to the 1440 hero (left side from the
   left edge, right side from the right edge); never behind the stack (the stack sits above them). */
.mk-float{display:contents}
.mk-float__card{position:absolute;width:190px;aspect-ratio:1}
.mk-float__card--1{left:max(16px,calc(50% - 675px));top:calc(var(--mk-nav) + 110px)}
.mk-float__card--2{right:max(16px,calc(50% - 640px));top:calc(var(--mk-nav) + 110px)}
.mk-float__card--3{left:max(16px,calc(50% - 640px));top:calc(var(--mk-nav) + 425px)}
.mk-float__card--4{right:max(16px,calc(50% - 595px));top:calc(var(--mk-nav) + 430px)}
.mk-float__card--5{left:calc(50% - 436px);top:calc(var(--mk-nav) + 805px)}
.mk-float__card--6{left:calc(50% + 203px);top:calc(var(--mk-nav) + 805px)}

/* Floating hero cards (Athlete card Size=Small instances 2392:54042…): padding 14.4, initials 24/1.2, Name Gradient 104 of 190 (55%).
   Tablet (2392:54132…): 152, padding ≈24, initials ≈41 (as rendered), gradient 87. Phone (2392:54934…): 104, padding 17.2, initials 28.7, gradient 125 (full). */
.mk-float__card .athlete-card{padding:var(--athlete-card-pad-sm)}
.mk-float__card .athlete-card__initials{font-size:24px}
.mk-float__card .athlete-card__shade{height:55%}

/* Grid cards (Figma 2391:825): every card uses the type of the small cell (167.6 at 1440: padding 10.6, tag 14.1, initials 35.3 semibold,
   name 14.1, 3.5 gap, Name Gradient as tall as a small cell). The sizes scale with the small cell (u), so tablet / phone match their frames. */
.mk-grid__cell .athlete-card{--u:100cqi;padding:calc(var(--u) * .0632)}
.mk-grid__cell--l .athlete-card{--u:calc((100cqi - var(--mk-grid-gap)) / 2)}
.mk-grid__cell .athlete-card__tag{top:calc(var(--u) * .0632);right:calc(var(--u) * .0632);font-size:calc(var(--u) * .0842);display:block}
.mk-grid__cell .athlete-card__text{gap:calc(var(--u) * .021)}
.mk-grid__cell .athlete-card__initials{font-size:calc(var(--u) * .2105);font-weight:600}
.mk-grid__cell .athlete-card__name{display:block;font:400 calc(var(--u) * .0842)/1.4 var(--font-body)}
.mk-grid__cell .athlete-card__shade{height:var(--u)}

/* In Her Element athlete grid (Figma 2391:824): one full-bleed row, 8 columns, Large cards span 2×2, gap 14 (cells ≈168 at 1440) */
.mk-grid__in{--mk-grid-gap:14px;   /* not a Figma token yet: athlete grid gap (14.12 in Figma) */
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(2,auto);grid-auto-flow:column;gap:var(--mk-grid-gap);margin:0;padding:0;list-style:none}
.mk-grid__cell{aspect-ratio:1;min-width:0}
.mk-grid__cell--l{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

/* What to expect: Desktop/04 title, three open columns with a hairline on top (no cards) */
.mk-expect{padding:var(--space-96) 0}
.mk-expect--left{padding-top:var(--space-64)}
.mk-expect__in{display:flex;flex-direction:column;gap:var(--space-48)}
.mk-expect__title{font:var(--text-6xl);text-align:center}
.mk-expect--left .mk-expect__title{text-align:left}
.mk-expect__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24);margin:0;padding:0;list-style:none}
.mk-expect__col{display:flex;flex-direction:column;gap:var(--space-16);padding-top:var(--space-28);border-top:1px solid var(--border-default)}
.mk-expect__col-title{font:var(--text-3xl)}
.mk-expect__col-text{font:var(--text-base);color:var(--text-secondary)}

/* In the meantime: hairline on top, eyebrow + Desktop/04 title (700) left, the two buttons right */
.mk-meanwhile{border-top:1px solid var(--border-subtle);padding:var(--space-128) 0}
.mk-market-hero~.mk-meanwhile{padding:var(--space-72) 0}
.mk-meanwhile__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-32)}
.mk-meanwhile__copy{display:flex;flex-direction:column;gap:var(--space-16);max-width:700px}
.mk-meanwhile__eyebrow{font:var(--text-xs-semibold);text-transform:uppercase;color:var(--text-secondary)}
.mk-meanwhile__title{font:var(--text-6xl)}

/* Storied Market hero: copy 520 left, Product grid right (two columns of 300, gap 16, the second column 96 lower) */
.mk-market-hero{padding:calc(var(--mk-nav) + var(--space-64)) 0 var(--space-96)}
.mk-market-hero__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-80)}
.mk-market-hero__copy{flex:none;width:520px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-24)}
.mk-market-hero__title{font:var(--text-8xl)}
.mk-market-hero__lead{font:var(--text-article-lead);color:var(--text-primary)}
.mk-products{flex:0 1 616px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:var(--space-16)}
.mk-products__col{display:flex;flex-direction:column;gap:var(--space-16);min-width:0}
.mk-products__col:nth-child(2){padding-top:var(--space-96)}

/* ---- Homepage "About Storied" band (partials/about-storied-band.njk; not on the homepage yet) ---- */
.mk-band{padding:var(--space-112) 0;background:var(--surface-background);color:var(--text-primary)}
.mk-band__in{display:flex;align-items:flex-start;gap:var(--space-96)}
.mk-band__head{flex:none;width:440px;display:flex;flex-direction:column;gap:var(--space-20)}
.mk-band__eyebrow{font:var(--text-sm);color:var(--accent-default)}
.mk-band__title{font:var(--text-7xl)}
.mk-band__body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-24)}
.mk-band__lead{font:var(--text-2xl)}
.mk-band__statement{font:var(--text-2xl);color:var(--accent-default)}

/* ---- Desktop narrow (1024–1279): no frame drawn, keep proportions ---- */
@media (min-width:1024px) and (max-width:1279px){
  .mk-hero__row,.mk-vision__in,.mk-team__head,.mk-band__in{column-gap:var(--space-48);gap:var(--space-48)}
  .mk-vision__head,.mk-band__head{width:360px}
  .mk-spot__person{right:var(--space-24);width:44%}
  .mk-market-hero__in{gap:var(--space-48)}
  .mk-market-hero__copy{width:440px}
}

/* ---- Tablet (600–1023, Figma 744): one column, 32 sides, 64 section padding, text one step down ---- */
@media (max-width:1023px){
  .mk{--mk-gutter:var(--space-32)}
  .mk-hero{padding:calc(var(--mk-nav) + var(--space-64)) 0 var(--space-64)}
  .mk-hero__title{font:var(--text-6xl)}
  .mk-hero__row{grid-template-columns:minmax(0,1fr);row-gap:var(--space-32)}
  .mk-hero__statement{font:var(--text-xl)}
  .mk-hero__img{aspect-ratio:680/420}
  .mk-pillars{padding:var(--space-64) 0}
  .mk-pillars__in{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
  .mk-pillar__num{font:var(--text-6xl)}
  .mk-pillar__title{font:var(--text-2xl)}
  .mk-vision{padding:var(--space-64) 0}
  .mk-vision__in{flex-direction:column;gap:var(--space-32)}
  .mk-vision__head{width:auto}
  .mk-vision__title{font:var(--text-5xl)}
  .mk-vision__lead{font:var(--text-xl)}
  .mk-vision__strong{font:var(--text-3xl)}
  .mk-vision__quote{font:var(--text-xl)}
  .mk-spot{padding:var(--space-64) 0}
  .mk-spot__title{font:var(--text-4xl)}
  .mk-spot__card{height:auto;flex-direction:column;align-items:stretch;padding:0;border-radius:var(--radius-lg)}
  .mk-spot__person{position:relative;right:auto;order:-1;width:100%;height:420px;object-position:center top}
  .mk-spot__copy{width:auto;max-width:none;padding:0 var(--space-24) var(--space-24);margin-top:calc(-1 * var(--space-40))}
  .mk-spot__logo{width:min(420px,100%)}
  .mk-cols{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
  .mk-team{padding:var(--space-48) 0 var(--space-64)}
  .mk-team__head{flex-direction:column;align-items:stretch;gap:var(--space-32)}
  .mk-team__intro{max-width:none}
  .mk-team__title{font:var(--text-3xl)}
  .mk-team__lead{width:auto;max-width:none;margin-left:0}
  .mk-team__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-16)}
  .mk-person{gap:var(--space-10)}
  .mk-person__photo{aspect-ratio:4/5}
  .mk-person__name{font:var(--text-sm)}
  .mk-closing{padding:var(--space-80) 0}
  .mk-closing__in{grid-template-columns:minmax(0,1fr);gap:var(--space-72)}
  .mk-preview-col__card,.mk-preview-col__card--athlete{width:min(320px,100%)}
  .mk-preview-col__title{font:var(--text-5xl)}
  /* coming soon (tablet frames 2392:54121 / 2392:55562): hero 900 with the stack centred and six 152 cards (three above, three below);
     the athlete grid keeps its one-row mosaic at 898 wide, centred and clipped */
  .mk-soon-hero{min-height:calc(var(--mk-nav) + 900px);padding:var(--mk-nav) 0 0}
  .mk-soon-stack{width:min(600px,100%)}
  .mk-ihe-logo{width:min(520px,100%)}
  .mk-glow--1{left:calc(50% - 335px);top:calc(var(--mk-nav) + 135px);width:670px;height:670px}
  .mk-glow--2{left:-149px;top:calc(var(--mk-nav) + 495px);width:521px;height:521px}
  .mk-float__card{width:152px}
  .mk-float__card .athlete-card{padding:var(--space-24)}   /* as rendered in 2392:54132 (the instance is the 190 card scaled ×1.7; its */
  .mk-float__card .athlete-card__initials{font-size:40px}   /* layer values say 12 / 20, the frame draws ≈24 / ≈41) */
  .mk-float__card .athlete-card__shade{height:57%}
  .mk-float__card--2 .athlete-card__img{filter:grayscale(1)}   /* card 2 (Ma) carries the Saturation Filter in the tablet / phone frames */
  .mk-float__card--1{left:var(--space-32);top:calc(var(--mk-nav) + 56px)}
  .mk-float__card--2{left:calc(50% - 76px);right:auto;top:calc(var(--mk-nav) + 24px)}
  .mk-float__card--3{left:auto;right:var(--space-32);top:calc(var(--mk-nav) + 72px)}
  .mk-float__card--4{left:var(--space-32);right:auto;top:calc(var(--mk-nav) + 704px)}
  .mk-float__card--5{left:calc(50% - 76px);top:calc(var(--mk-nav) + 740px)}
  .mk-float__card--6{left:auto;right:var(--space-32);top:calc(var(--mk-nav) + 690px)}
  .mk-grid{overflow:hidden;padding:var(--space-48) 0}
  .mk-grid__in{--mk-grid-gap:9px;width:898px;margin-left:calc((100% - 898px) / 2)}   /* 9: not a Figma token yet (8.8 in 2405:2472) */
  .mk-expect,.mk-expect--left{padding:var(--space-72) 0}
  .mk-expect__in{gap:var(--space-32)}
  .mk-expect__title{font:var(--text-5xl)}
  .mk-expect__cols{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
  .mk-expect__col-title{font:var(--text-2xl)}
  .mk-meanwhile,.mk-market-hero~.mk-meanwhile{padding:var(--space-72) 0}
  .mk-meanwhile__in{flex-direction:column;align-items:flex-start;gap:var(--space-32)}
  .mk-meanwhile__title{font:var(--text-5xl)}
  .mk-market-hero{padding:calc(var(--mk-nav) + var(--space-48)) 0 var(--space-64)}
  .mk-market-hero__in{flex-direction:column;align-items:stretch;gap:var(--space-40)}
  .mk-market-hero__copy{width:auto}
  .mk-market-hero__copy .mk-waitlist{width:min(480px,100%)}
  .mk-market-hero__title{font:var(--text-6xl)}
  .mk-products{flex:none;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-products__col:nth-child(2){padding-top:var(--space-48)}
  .mk-band{padding:var(--space-48) 0}
  .mk-band__in{flex-direction:column;gap:var(--space-32)}
  .mk-band__head{width:auto}
  .mk-band__title{font:var(--text-5xl)}
  .mk-band__lead,.mk-band__statement{font:var(--text-xl)}
}

/* ---- Phone (<600, Figma 390): app view (App / Header in the flow), 16 sides, 40 section padding; the Mobile type scale applies ---- */
@media (max-width:599px){
  .mk{--mk-gutter:var(--space-16);--mk-nav:0px}
  .mk-hero{gap:var(--space-64);padding:var(--space-40) 0}
  .mk-hero__title{font:var(--text-8xl)}
  .mk-hero__lead,.mk-hero__statement{font:var(--text-2xl)}
  .mk-hero__row{row-gap:var(--space-24)}
  .mk-hero__img{aspect-ratio:358/300}
  .mk-pillars{padding:var(--space-40) 0}
  .mk-pillars__in{gap:var(--space-24)}
  .mk-pillar__num{font:var(--text-8xl)}
  .mk-pillar__title{font:var(--text-3xl)}
  .mk-vision{padding:var(--space-40) 0}
  .mk-vision__in{gap:var(--space-24)}
  .mk-vision__title{font:var(--text-7xl)}
  .mk-vision__lead,.mk-vision__quote{font:var(--text-2xl)}
  .mk-vision__strong{font:var(--text-4xl)}
  .mk-spot{padding:var(--space-40) 0}
  .mk-spot__title{font:var(--text-5xl)}
  .mk-spot__person{height:300px}
  .mk-spot__copy{padding:0 var(--space-20) var(--space-20)}
  .mk-spot__logo{width:min(300px,100%)}
  .mk-cols{gap:var(--space-24)}
  .mk-team{padding:var(--space-40) 0}
  .mk-team__title{font:var(--text-4xl)}
  .mk-team__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12)}
  .mk-person__name{font:var(--text-base)}
  .mk-closing{padding:var(--space-56) 0}
  .mk-closing__in{gap:var(--space-64)}
  .mk-preview-col__card,.mk-preview-col__card--athlete{width:min(280px,100%)}
  .mk-preview-col__logo .mk-ihe-logo{width:min(358px,100%)}
  .mk-preview-col__title{font:var(--text-7xl)}
  /* coming soon (phone frames 2392:54923 / 2392:56098): hero 780, six 104 cards, stack 358, logo 330; grid 734 wide, centred, clipped */
  .mk-soon-hero{min-height:780px;padding:0}
  .mk-soon-stack{gap:var(--space-28)}
  /* phone lead (2392:54931 / Market phone): Storica SemiBold 14/18 (Storica sets caps), as drawn */
  .mk-soon-lead,.mk-market-hero__lead{font:var(--text-card-title-sm)}
  /* the dark page runs under the fixed App / Tab Bar (no footer on phone): the room for the bar is inside <main>, not the light body */
  html body:has(.mk--soon){padding-bottom:0}
  .mk--soon{padding-bottom:calc(116px + env(safe-area-inset-bottom,0px))}   /* 116 = App / Tab Bar height (as app-home.css) */
  .mk-ihe-logo{width:min(330px,100%)}
  .mk-glow--1{left:calc(50% - 175px);top:117px;width:351px;height:351px}
  .mk-glow--2{left:-78px;top:429px;width:273px;height:273px}
  .mk-float__card{width:104px}
  .mk-float__card .athlete-card{padding:17px}   /* not a Figma token yet: 17.2 in 2392:54934 */
  .mk-float__card .athlete-card__initials{font-size:28px}   /* 28.7 in 2392:54934 */
  .mk-float__card .athlete-card__shade{height:100%}
  .mk-float__card--1{left:var(--space-16);top:36px}
  .mk-float__card--2{left:calc(50% - 52px);top:16px}
  .mk-float__card--3{right:var(--space-16);top:52px}
  .mk-float__card--4{left:var(--space-16);top:636px}
  .mk-float__card--5{left:calc(50% - 52px);top:664px}
  .mk-float__card--6{right:var(--space-16);top:628px}
  .mk-grid{padding:var(--space-40) 0}
  .mk-grid__in{--mk-grid-gap:7px;width:734px;margin-left:calc((100% - 734px) / 2)}   /* 7: not a Figma token yet (7.2 in 2405:2480) */
  .mk-expect,.mk-expect--left{padding:var(--space-56) 0}
  .mk-expect__in{gap:var(--space-24)}
  .mk-expect__title{font:var(--text-6xl)}
  .mk-expect__col-title{font:var(--text-3xl)}
  .mk-meanwhile,.mk-market-hero~.mk-meanwhile{padding:var(--space-56) 0}
  .mk-meanwhile__title{font:var(--text-6xl)}
  .mk-market-hero{padding:var(--space-32) 0 var(--space-40)}
  .mk-market-hero__title{font:var(--text-8xl)}
  .mk-market-hero__copy .mk-waitlist{width:100%}
  .mk-products__col:nth-child(2){padding-top:var(--space-32)}
  .mk-band{padding:var(--space-40) 0}
  .mk-band__title{font:var(--text-7xl)}
  .mk-band__lead,.mk-band__statement{font:var(--text-2xl)}
}
@media (max-width:374px){.mk-team__grid{grid-template-columns:minmax(0,1fr)}}
.mk-preview{padding-top:var(--nav-h,120px)}@media (max-width:599px){.mk-preview{padding-top:0}}

/* About closing: the In Her Element preview card (2377:143907, 408 at 1440) uses the grid-cell type of the Card set, not the 396 large
   look: padding 10.6, tag 14.1, initials 35.3 semibold, name 14.1, Name Gradient 168. Same px on tablet (320) and phone (280). */
.mk-preview-col__card--athlete .athlete-card{padding:var(--space-10)}
.mk-preview-col__card--athlete .athlete-card__tag{top:var(--space-10);right:var(--space-10);font-size:14px}
.mk-preview-col__card--athlete .athlete-card__text{gap:var(--space-4)}
.mk-preview-col__card--athlete .athlete-card__initials{font-size:35px;font-weight:600}   /* 35.3 in 2377:143907 */
.mk-preview-col__card--athlete .athlete-card__name{font:400 14px/1.4 var(--font-body)}
.mk-preview-col__card--athlete .athlete-card__shade{height:168px}

/* About, tablet + phone (Figma About / Tablet 2383:581, About / App 2383:2201; Prompt 31 follow-up, 2026-10-27):
   "Who we are" eyebrow above the H1 (32 gap, desktop has none); Storied Originals spotlight = the shared Studio / Hero (series)
   Breakpoint=Mobile card (Play Episode 1 + Episode rail), 642 tall on tablet and 620 on phone; phone lead = Mobile/09 text-xl (16/20). */
.mk-hero__eyebrow{display:none}
.mk-spot__hero{display:none}
@media (max-width:1023px){
  .about .mk-hero__eyebrow{display:block;font:var(--text-sm)}
  .about .mk-spot__card{display:none}
  .about .mk-spot__hero{display:block}
  .about .mk-spot__hero .studio-hero--85ers{display:flex}
}
@media (max-width:599px){
  .about .mk-hero__eyebrow{font:var(--text-mobile-sm)}
  .about .mk-hero__lead{font:var(--text-mobile-xl)}
}
/* Spotlight card sizes from the instances: tablet 2404:778 (680×642, 28 sides / bottom, text 503, 32 to the rail, 240 cards),
   phone 2404:1688 (358×620, 16 sides / bottom, text 337, 28 to the rail, 240 cards). Content sits at the bottom of the fixed-height card. */
@media (max-width:1023px){
  .about .mk-spot__hero .studio-hero{height:642px;padding:0 var(--space-28) var(--space-28);align-items:flex-end}
  .about .mk-spot__hero .studio-hero__in{gap:var(--space-32)}
  .about .mk-spot__hero .studio-hero__text{width:503px}
  .about .mk-spot__hero .studio-hero__item{width:240px}
}
@media (max-width:599px){
  .about .mk-spot__hero .studio-hero{height:620px;padding:0 var(--space-16) var(--space-16)}
  .about .mk-spot__hero .studio-hero__in{gap:var(--space-28)}
  .about .mk-spot__hero .studio-hero__text{width:337px}
  .about .mk-spot__hero .studio-hero__rail{margin-right:calc(-1 * var(--space-16))}
}
@media (max-width:1023px){
  .about .mk-spot__hero .studio-hero__partner{width:124px;margin-bottom:0}
  .about .mk-spot__hero .studio-hero__logo{width:326px}
  .about .mk-spot__hero .studio-hero__desc{margin-top:var(--space-8)}   /* title block 8, then 16 to the description */
}
@media (max-width:599px){
  .about .mk-spot__hero .studio-hero__partner{width:117px}
  .about .mk-spot__hero .studio-hero__logo{width:322px}
  .about .mk-team__head{gap:var(--space-24)}   /* phone 2383:2262: 24 between the title block and the lead (tablet 32) */
}
@media (max-width:599px){.about .mk-preview-col__sub{font:var(--mk-text-base-fixed)}}
/* Phone frames use font-size/text-sm in its 14 / 20 mode for Buttons and the Badge (variable defs of 2392:54980, 2383:2213): the site
   scales text-sm to 13 / 18 under 600, so the marketing pages keep 14 / 20 (= Mobile/11 text-base values) for these two components. */
@media (max-width:599px){
  .mk .btn,.mk .btn__label,.mk-badge{font:var(--text-mobile-base)}
  .mk-soon-logo svg{margin-inline:auto}
}
/* Badge: Figma strokes sit inside the 28 box (4 padding + 20 line + the 1 border inside), so the CSS padding is 3 vertical */
.mk-badge{padding-block:calc(var(--space-4) - 1px)}
/* InHerElement logo centred in the stack at every width (tablet 2392:54128 at x 40 in the 600 frame, phone 2392:54930 at x 14) */
.mk-soon-logo svg{margin-inline:auto}
@media (min-width:600px) and (max-width:1023px){.mk-soon-stack .mk-waitlist{width:480px;max-width:100%}}   /* tablet Waitlist 2392:54130: 480 */
/* In Her Element desktop Meanwhile (2387:11856): 412 tall, copy at 130.5 (named: not a Figma spacing token) */
@media (min-width:1024px){.mk-expect--center~.mk-meanwhile{padding:130px 0 129px}}
@media (max-width:599px){.about .mk-spot__hero .studio-hero__desc{max-width:282px}}   /* phone instance 1954:19427: description 282 wide */

/* =====================================================================
   Microinteractions (2026-10-27, Isabel: "add microinteractions, soft transitions"). Soft, short, never in the way:
   motion uses the site easing (--ease-out) and the shared .reveal / .is-in classes (interactions.css); everything below
   switches off under prefers-reduced-motion. Durations are named constants (not Figma tokens yet).
   ===================================================================== */
.mk{--mk-dur-in:.9s;--mk-dur-hover:.45s;--mk-drift:7s}   /* not Figma tokens yet: entrance, hover and idle-drift durations */
/* 1 · Hero entrance: copy rises in, then the floating athlete cards pop in one after another */
.js .mk [data-mk-in]{opacity:0;translate:0 16px;transition:opacity var(--mk-dur-in) var(--ease-out),translate var(--mk-dur-in) var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js .mk.is-ready [data-mk-in]{opacity:1;translate:0 0}
.js .mk .mk-float__card{opacity:0;scale:.92;transition:opacity .8s var(--ease-out),scale .8s var(--ease-out);transition-delay:calc(200ms + var(--d,0) * 110ms)}
.js .mk.is-ready .mk-float__card{opacity:1;scale:1}
/* 2 · Idle drift: each floating card bobs a few pixels on its own rhythm; the pointer adds a light parallax (desktop) */
@keyframes mk-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
.mk-float__card>*{animation:mk-drift var(--mk-drift) ease-in-out infinite;animation-delay:calc(var(--d,0) * -1.3s)}
.mk-float__card{translate:calc(var(--px,0) * var(--depth,8px)) calc(var(--py,0) * var(--depth,8px));transition-property:opacity,scale,translate}
.mk-float__card:nth-child(even){--depth:14px}
/* 3 · Glows breathe slowly */
@keyframes mk-breathe{0%,100%{opacity:.85}50%{opacity:1}}
.mk-glow{animation:mk-breathe 9s ease-in-out infinite}
.mk-glow--2{animation-delay:-4.5s}
/* 4 · About hero photo settles from a slight zoom; team portraits and grid photos zoom softly on hover */
.mk-hero__img{transition:scale 1.4s var(--ease-out),opacity 1s var(--ease-out)}
.js .about:not(.is-ready) .mk-hero__img{scale:1.03;opacity:0}
.mk-person__photo img,.mk-grid__cell .athlete-card__img,.mk-preview-col__card .athlete-card__img{transition:scale var(--mk-dur-hover) var(--ease-out),filter .3s var(--ease-out)}
.mk-person:hover .mk-person__photo img,.mk-grid__cell:hover .athlete-card__img,.mk-preview-col__card:hover .athlete-card__img{scale:1.04}
.mk-person__name{transition:color .2s}
.mk-person:hover .mk-person__name{color:var(--text-secondary)}
/* 5 · Product cards lift a little and the photo eases in (on top of the Story Card hover) */
.mk .product-card{transition:filter .2s var(--ease-out),border-color .2s var(--ease-out),translate var(--mk-dur-hover) var(--ease-out)}
.mk .product-card__image{transition:scale var(--mk-dur-hover) var(--ease-out)}
.mk .product-card:hover{translate:0 -4px}
.mk .product-card:hover .product-card__image{scale:1.03}
.mk .product-card:active{translate:0 -1px}
/* 6 · Pillars, expect columns, spotlight columns: the top rule draws in when the item reveals */
.mk :is(.mk-pillar,.mk-expect__col,.mk-col){position:relative}
.js .mk :is(.mk-pillar,.mk-expect__col,.mk-col).reveal{border-top-color:transparent;background:linear-gradient(var(--border-default),var(--border-default)) 0 0/0% 1px no-repeat border-box;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),background-size 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js .mk :is(.mk-pillar,.mk-expect__col,.mk-col).reveal.is-in{background-size:100% 1px}
/* 7 · Waitlist: the field glows softly on focus, shakes once on an error, the helper fades when it changes */
.mk-waitlist .email-sub__control{transition:border-color .2s,box-shadow .25s var(--ease-out)}
.mk-waitlist .email-sub__control:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-default) 22%,transparent)}
@keyframes mk-shake{0%,100%{translate:0}20%{translate:-4px}40%{translate:4px}60%{translate:-2px}80%{translate:2px}}
.mk-waitlist.is-error .email-sub__control{animation:mk-shake .4s var(--ease-out)}
.mk-waitlist .email-sub__help{transition:color .25s}
.mk-waitlist.is-done .email-sub__help{animation:mk-fade-up .4s var(--ease-out)}
@keyframes mk-fade-up{from{opacity:0;translate:0 4px}to{opacity:1;translate:0}}
/* 8 · Buttons: a soft press (all marketing buttons) */
.mk .btn:active{scale:.98}
.mk .btn{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s,border-color .2s,color .2s,scale .15s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js .mk [data-mk-in],.js .mk .mk-float__card,.js .about .mk-hero__img{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}
  .mk-float__card>*,.mk-glow,.mk-waitlist.is-error .email-sub__control,.mk-waitlist.is-done .email-sub__help{animation:none!important}
  .mk-float__card{translate:none!important}
  .mk .product-card,.mk .product-card__image,.mk-person__photo img,.mk .btn{transition:none!important;translate:none!important;scale:none!important}
  .mk-person:hover .mk-person__photo img,.mk-grid__cell:hover .athlete-card__img,.mk-preview-col__card:hover .athlete-card__img{scale:none}
  .js .mk :is(.mk-pillar,.mk-expect__col,.mk-col).reveal{background-size:100% 1px;transition:none}
}