/* ===========================================================================
   MulliganOS — sub-page components
   ---------------------------------------------------------------------------
   Loaded AFTER css/mos.css, which owns every token and every component the
   homepage uses. Nothing here redefines a token; these are the four or five
   patterns a product page needs that a single-page site never did.

   🔴 The homepage inlines mos.css into its own <style> block and REGENERATES
   that block on deploy. Sub-pages <link> both files instead, so a rule put
   here cannot be silently deleted the way an inline-spliced rule was on
   2026-09-21. Page CSS goes in this file and nowhere else.
   =========================================================================== */

/* ---- breadcrumb ------------------------------------------------------- */
.crumb{
  font-family:Inter,sans-serif;
  font-size:var(--fs-sm);
  color:var(--muted);
  padding-top:var(--s6);
}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.crumb a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumb a:hover{color:var(--brand);border-bottom-color:var(--brand-lite)}
.crumb li+li::before{content:"/";margin-right:var(--s2);color:var(--line)}
.crumb [aria-current]{color:var(--ink-2)}

/* ---- sub-page hero ----------------------------------------------------
   Shorter than the homepage hero: no full-bleed art, no trust strip. The
   screenshot does the work, so the type above it stays out of the way. */
.pagehero{padding:var(--s7) 0 var(--s8)}
.pagehero h1{
  font-size:clamp(2.1rem, 1.5rem + 2.4vw, 3.25rem);
  line-height:var(--lh-tight);
  letter-spacing:-.025em;
  color:var(--ink);
  margin:var(--s4) 0 0;
  max-width:19ch;
}
.pagehero .lede{
  font-size:var(--fs-lede);
  color:var(--body);
  max-width:62ch;
  margin:var(--s5) 0 0;
}
.pagehero .cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* ---- alternating screenshot / copy rows -------------------------------
   The whole argument of these pages is "here is the actual screen", so the
   image is a peer of the prose, not an illustration beside it. */
.split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(var(--s6), 4vw, var(--s8));
  align-items:center;
}
.split+.split{margin-top:var(--s9)}
.split .copy h3{
  font-size:clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:var(--s3) 0 0;
}
.split .copy p{margin:var(--s4) 0 0;color:var(--body)}
.split .copy p:first-of-type{margin-top:var(--s4)}
/* Image first on odd rows, second on even — set explicitly rather than with
   :nth-child(even) direction tricks, which reverse the DOM order for screen
   readers as well as for eyes. */
.split.flip .shot{order:2}
.split.flip .copy{order:1}
@media (max-width:860px){
  .split{grid-template-columns:1fr;gap:var(--s6)}
  .split .shot,.split.flip .shot{order:1}
  .split .copy,.split.flip .copy{order:2}
  .split+.split{margin-top:var(--s8)}
}


/* A panel capture is narrower than the row it sits in. Cap it at its own
   native width and centre it, so it renders 1:1 instead of being upscaled
   into softness or floated in half a frame of dead background. */
.split .shot.narrow .frame{max-width:472px;margin-inline:auto}

/* ---- "what is on that screen" callout ---------------------------------
   Sits under a screenshot and names the things a reader can actually see in
   it. Without this a screenshot is decoration; with it, it is evidence. */
.spec{
  margin:var(--s5) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:var(--s3);
}
.spec li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s3);
  align-items:start;
  font-size:var(--fs-sm);
  color:var(--body);
  line-height:1.55;
}
.spec li svg{color:var(--brand-lite-ink);flex:none;margin-top:2px}
.spec b{color:var(--ink-2);font-weight:600}

/* A monospace inline token for literal on-screen text ("3 left", "full"). */
.lit{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;
  background:var(--bg-tint);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.08em .4em;
  color:var(--ink-2);
  white-space:nowrap;
}

/* ---- honesty block ----------------------------------------------------
   The homepage marks every feature Shipping or Roadmap. A product page that
   quietly dropped that convention would be the one page on the site that
   oversells, so it gets its own component. */
.honest{
  border:1px solid var(--line);
  border-left:3px solid var(--warn);
  background:var(--warn-bg);
  border-radius:var(--r);
  padding:var(--s6);
  max-width:74ch;
}
.honest h3{color:var(--ink);margin:0}
.honest p{margin:var(--s4) 0 0;color:var(--ink-2)}
.honest p:last-child{margin-bottom:0}

/* ---- FAQ --------------------------------------------------------------- */
.faq{max-width:74ch;display:grid;gap:var(--s3)}
.faq details{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:#fff;
  padding:var(--s5) var(--s6);
  box-shadow:var(--shadow-1);
}
.faq summary{
  cursor:pointer;
  font-family:Fraunces,Georgia,serif;
  font-size:1.0625rem;
  font-weight:600;
  color:var(--ink);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--s4);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  flex:none;
  width:10px;height:10px;
  border-right:1.8px solid var(--brand-lite-ink);
  border-bottom:1.8px solid var(--brand-lite-ink);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details p{margin:var(--s4) 0 0;color:var(--body);font-size:var(--fs-body)}
.faq details p:last-child{margin-bottom:0}

/* ---- sibling page links ------------------------------------------------ */
.xlink{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:var(--s5);
}
.xlink a{
  display:block;
  text-decoration:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--s6);
  box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.xlink a:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
  border-color:var(--brand-lite);
}
.xlink .t{
  font-family:Fraunces,Georgia,serif;
  font-size:var(--fs-h3);
  color:var(--ink);
  display:flex;align-items:center;gap:var(--s2);
}
.xlink .t svg{color:var(--brand-lite-ink)}
.xlink p{margin:var(--s3) 0 0;color:var(--body);font-size:var(--fs-sm)}

/* ---- a plain prose block for the definition sections ------------------- */
.prose{max-width:68ch}
.prose p{margin:var(--s4) 0 0;color:var(--body)}
.prose p:first-child{margin-top:0}
.prose ul{margin:var(--s4) 0 0;padding-left:var(--s5);color:var(--body)}
.prose li{margin:var(--s2) 0}
.prose strong{color:var(--ink-2)}