/* ==========================================================================
   mobile.css - the phone layout of the public site (2026-09-25, Shaun:
   "each page needs to display fully vertically").
   Loaded after site.css for screens up to 760px wide only; the desktop never
   sees any of this. Rules:
     - every section is exactly one screen tall, measured on the SMALL viewport
       (svh = the visible area with the phone's browser bars showing), and the
       page snaps one screen at a time
     - sections with more content than a phone screen become swipe rows
       (the next card peeks in; dots under the row show where you are)
   ========================================================================== */

@media (max-width: 760px) {

  /* ---- one screen per section, snapping --------------------------------- */
  html { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
  .hero, .screen {
    min-height: 100svh;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .screen {
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--nav-h) + 14px) 0 22px;
  }
  .screen > .wrap { width: 100%; }
  .footer { scroll-snap-align: end; }

  /* tighter type so each screen's content fits */
  .display { font-size: clamp(34px, 10.5vw, 46px); line-height: 1.02; }
  .h1 { font-size: clamp(28px, 8.2vw, 36px); line-height: 1.06; }
  .h2 { font-size: clamp(26px, 7.6vw, 32px); line-height: 1.08; }
  .lede { font-size: 15px; line-height: 1.45; }
  .section-head { margin-bottom: 18px; }
  .section-head .lede { margin-top: 10px; }
  .eyebrow { margin-bottom: 10px; }

  /* ---- hero: tagline on two clean lines ---------------------------------- */
  .hero-kicker { font-size: 11.5px; letter-spacing: .2em; max-width: 24ch; margin-left: auto; margin-right: auto; text-wrap: balance; }

  /* ---- mission / statement ----------------------------------------------- */
  #statement .statement { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.3; }

  /* ---- market + portfolio: figures in a compact 2 x 2 -------------------- */
  #market .stats, #portfolio .stats { grid-template-columns: 1fr 1fr; gap: 18px 14px; row-gap: 18px; }
  #market .stat, #portfolio .stat { padding: 0; }
  #market .stat .ico, #portfolio .stat .ico { display: none; }   /* the figure speaks for itself on a phone */
  #market .stat-num, #portfolio .stat-num { font-size: clamp(28px, 8.4vw, 36px); }
  #market .stat-label, #portfolio .stat-label { font-size: 12px; line-height: 1.35; }
  #market .glass, #portfolio .glass { padding: 18px 16px; }
  .glass-note { margin-top: 12px; font-size: 11px; }

  /* ---- swipe rows: model steps, value cards, slate ----------------------- */
  #model .steps, #value .bento, #slate .slate {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    grid-auto-rows: auto;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter, 20px));
    padding: 2px var(--gutter, 20px) 6px;
    scroll-padding: 0 var(--gutter, 20px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #model .steps::-webkit-scrollbar, #value .bento::-webkit-scrollbar, #slate .slate::-webkit-scrollbar { display: none; }
  #model .step, #value .bento > .card, #slate .slate-card { scroll-snap-align: start; min-width: 0; }
  #model .step { padding: 20px 18px; border-radius: 18px; background: var(--l-surface, #fff); box-shadow: 0 2px 24px -12px rgba(0,0,0,.18); }
  #value .bento > .card { grid-column: auto !important; grid-row: auto !important; height: min(58svh, 420px); min-height: 0; }
  #value .bento .card-plain { display: flex; flex-direction: column; justify-content: center; }
  #slate .slate-card { height: min(60svh, 440px); min-height: 0; position: relative; isolation: isolate; }
  #value .bento > .card { position: relative; isolation: isolate; }   /* keep the card's art layers inside the card in the swipe row */
  #channels .tile:nth-child(7) { grid-column: 1 / -1; }   /* 7 tiles: the last one spans the row - no empty cell */

  /* the dots under a swipe row (built by site.js) */
  .m-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
  .m-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity .3s, transform .3s; }
  .m-dots i.on { opacity: .9; transform: scale(1.25); }

  /* ---- channels: 8 tiles as a compact 2-column grid ---------------------- */
  #channels .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  #channels .tile { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 9px; align-items: center; text-align: left; padding: 9px 10px; min-height: 0; }
  #channels .tile .ico, #channels .tile .tile-icon { grid-row: 1 / span 2; width: 28px; height: 28px; margin: 0; border-radius: 8px; }
  #channels .tile .ico svg { width: 14px; height: 14px; }
  #channels .tile h4 { font-size: 13.5px; margin: 0; line-height: 1.2; }
  #channels .tile p { font-size: 10.5px; line-height: 1.25; margin: 1px 0 0; }
  #channels .tile-feature { grid-column: 1 / -1; display: block; text-align: center; padding: 12px; }
  #channels .tile-feature h4 { font-size: 14.5px; }

  /* ---- team: compact rows ------------------------------------------------ */
  #team .team-split { gap: 6px; row-gap: 6px; }
  #team .team-hint, #team .member-idx { display: none; }
  #team .member { grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 2px 12px; padding: 6px 4px; }
  #team .member-avatar { grid-row: 1 / span 2; width: 30px; height: 30px; font-size: 11px; }
  #team .member-name { grid-column: 2; grid-row: 1; font-size: 16px; }
  #team .member-title { grid-column: 2; grid-row: 2; margin-top: 0; font-size: 10px; }
  #team .member-go { grid-column: 3; grid-row: 1 / span 2; }

  /* ---- contact: one row of buttons + the form ---------------------------- */
  #contact { padding-top: calc(var(--nav-h) + 8px); padding-bottom: 14px; }
  #contact .contact { gap: 8px; row-gap: 8px; }
  #contact .contact-list { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
  #contact .contact-row { flex-direction: column; justify-content: center; text-align: center; gap: 4px; padding: 7px 6px; }
  #contact .contact-row span { font-size: 0; line-height: 1.2; }
  #contact .contact-row small { font-size: 11px; display: block; }
  #contact .contact-row .ico { width: 30px; height: 30px; margin: 0 auto; }
  #contact .contact-row .ico svg { width: 16px; height: 16px; }
  #contact .contact-follow, #contact .contact-side .lede { display: none; }
  #contact .contact-card { padding: 12px 14px; margin-top: 4px; }
  #contact .contact-card-title { display: none; }   /* the section headline already says it */
  #contact .topics { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 6px 0 8px; }
  #contact .topics::-webkit-scrollbar { display: none; }
  #contact .topics label { flex: none; }
  #contact .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #contact .field { margin-bottom: 8px; }
  #contact .contact-card textarea { min-height: 50px; height: 50px; }
  #contact .topics { margin: 4px 0 6px; }
  #contact .form-note:empty { display: none; }
}

/* Apple HIG on phones: every tap target at least 44 x 44, no text under 11px. */
@media (max-width: 760px) {
  .nav-brand { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-left: -7px; }
  .nav .btn, .nav .btn-magic { min-height: 40px; }
  #slate .slate-locked .btn { min-height: 44px; padding-left: 20px; padding-right: 20px; }
  #contact .topics label, #contact .topics label > span { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
  .footer a:not(.nav-brand) { padding-left: 6px; padding-right: 6px; }
  #team .team-intro .lede { display: none; }   /* phones: the heading + the names carry it */
  .footer .social a { width: 44px; height: 44px; }
  .scroll-next { min-width: 44px; }
  .nav-links { max-height: calc(100svh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; }   /* pinned menu: scrolls itself on short screens */
  .footer a:not(.nav-brand) { display: inline-flex; align-items: center; min-height: 44px; }
  #channels .tile p { font-size: 11px; }
  #slate .tag { font-size: 11px; }
  #team .member-title { font-size: 11px; }
}

/* Short phones (small Androids, landscape-ish heights): a little tighter again so
   every section still fits one screen. */
@media (max-width: 760px) and (max-height: 620px) {
  .screen { padding: calc(var(--nav-h) + 6px) 0 12px; }
  .h1 { font-size: 25px; }
  .h2 { font-size: 24px; }
  .display { font-size: 32px; }
  .lede { font-size: 13.5px; line-height: 1.4; }
  .section-head { margin-bottom: 12px; }
  .section-head .lede { margin-top: 6px; }
  .eyebrow { margin-bottom: 6px; }
  #market .stat-num, #portfolio .stat-num { font-size: 26px; }
  #market .stats, #portfolio .stats { row-gap: 12px; }
  #market .glass, #portfolio .glass { padding: 14px; }
  #model .step { padding: 16px 16px; }
  #channels .tile { padding: 7px 9px; }
  #team .member { padding: 4px 4px; }
  #contact .contact-card textarea { min-height: 36px; height: 36px; }
  #contact .contact-card { padding-top: 10px; padding-bottom: 10px; }
  #contact .field { margin-bottom: 6px; }
}

/* Very short screens (iPhone SE with Safari's bars showing, ~548px): a section that can't
   fit one screen just scrolls, so snapping becomes gentle instead of forced. */
@media (max-width: 760px) and (max-height: 580px) {
  html { scroll-snap-type: y proximity; }
  .hero, .screen { scroll-snap-stop: normal; }
}

/* Reduced motion: no snapping jumps either. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}

/* 2026-09-26 (Shaun's phone notes, home page):
   - Investor Room leaves the top bar and becomes the red button at the end of the menu
   - the logo is bigger and the name sits beside it (the bar has room without the button)
   - the tagline above "Discover more" on one line */
@media (max-width: 760px) {
  .nav-cta { display: none; }
  .nav-links .nav-links-room { display: block; padding-top: 18px; }
  .nav-links .nav-links-room a.btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 52px; padding: 0 20px;
    border-bottom: 0; border-radius: 14px;
    font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  }
  .nav-links .nav-links-room .btn-ico { width: 18px; height: 18px; }
  .nav-links-room + .nav-links-social { padding-top: 16px; }

  .nav .nav-brand { gap: 10px; }
  .nav .nav-brand img { width: 38px; height: 38px; flex-basis: 38px; }
  .nav .nav-grid .nav-brand span { display: inline; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }

  .hero-kicker { max-width: none; white-space: nowrap; font-size: clamp(10.5px, 3.2vw, 13px); letter-spacing: .12em; }
}

/* 2026-09-26 (Shaun): Market + Portfolio figures are four equal blocks - two columns of
   exactly the same width with the dividers crossing in the true middle of the card.
   (site.css pads .stat with !important, so these need it too.) */
@media (max-width: 760px) {
  #market .stats, #portfolio .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; gap: 0; row-gap: 0; }
  #market .stat, #portfolio .stat { padding: 10px 8px !important; border-left: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
  #market .stat:nth-child(even), #portfolio .stat:nth-child(even) { border-left: 1px solid var(--hair) !important; }
  #market .stat:nth-child(n+3), #portfolio .stat:nth-child(n+3) { border-top: 1px solid var(--hair); }
  #market .stat-label, #portfolio .stat-label { font-size: 11.5px; line-height: 1.3; }
}
@media (max-width: 760px) and (max-height: 700px) {
  #market .stat, #portfolio .stat { padding: 6px 6px !important; }
  #market .stat-num, #portfolio .stat-num { font-size: 26px; }
}
/* 2026-09-26: the still logo (shown when the animated one can't run) sits at the same height */
@media (max-width: 760px) and (orientation: portrait) {
  .cover-logo-static { top: calc(40% + 20px); }
}
/* 2026-09-26 (Shaun): "Discover more" in the Investor Room style - red, orbiting light, sheen */
@media (max-width: 760px) {
  .hero .hero-discover-d { display: none; }
  .hero .hero-discover-m { display: inline-flex; align-items: center; gap: 10px; border-radius: 14px; padding: 0 30px; min-height: 54px; font-weight: 600; }
}
/* 2026-09-26 (Shaun): phone slate cards are tall and narrow, so only the middle strip of each
   wide picture shows - aim each one at its subject (D's face sits at the far left of cards 1 + 4). */
@media (max-width: 760px) {
  #slate .slate-card:nth-child(1) > img { object-position: 20% 30%; }   /* D + the gunslinger */
  #slate .slate-card:nth-child(2) > img { object-position: 38% 50%; }   /* moon + tower */
  #slate .slate-card:nth-child(4) > img { object-position: 12% 30%; }   /* D in the hat */
}
/* 2026-09-26 (Shaun): team profile on phones - no big logo panel (nobody has a photo yet; a
   photo, when added, shows as a short banner), and the whole card scrolls as one clean column
   so the name, role, focus, bio, links and next/previous are all reachable. */
@media (max-width: 760px) {
  dialog.sheet-profile { max-height: calc(100dvh - 32px); overflow: hidden; }
  dialog.sheet-profile[open] { display: flex; flex-direction: column; }
  dialog.sheet-profile .profile { display: flex; flex-direction: column; flex: 1 1 auto; max-height: none; min-height: 0; }
  dialog.sheet-profile .profile-portrait.no-photo { display: none; }
  dialog.sheet-profile .profile-portrait.has-photo { flex: 0 0 180px; min-height: 180px; }
  dialog.sheet-profile .profile-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px)); }
  dialog.sheet-profile .profile-meta { padding-right: 56px; }                 /* clear of the close button */
  dialog.sheet-profile .sheet-close { width: 44px; height: 44px; top: 10px; right: 10px; }
  dialog.sheet-profile #personName { font-size: 30px; line-height: 1.1; }
  dialog.sheet-profile .profile-spec > div { grid-template-columns: 76px minmax(0, 1fr); }
  dialog.sheet-profile .pf-chip { font-size: 12px; }
  dialog.sheet-profile .profile-links { grid-template-columns: 1fr; }
  dialog.sheet-profile .profile-nav button { min-height: 44px; }
}
/* 2026-09-26 (Shaun): contact topic chips - all four visible: one row of four equal segments
   (like an iPhone segmented control) instead of a sideways-scrolling row. */
@media (max-width: 760px) {
  #contact .topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; overflow: visible; margin: 4px 0 10px; padding: 0; }
  #contact .topics label { display: flex; min-width: 0; }
  #contact .topics label > span { width: 100%; justify-content: center; padding: 0 2px; font-size: clamp(11px, 3.2vw, 13px); letter-spacing: -.015em; white-space: nowrap; }
}
/* 2026-09-26 (Shaun): "How can we help?" box taller - room to write several lines (it still
   grows if they drag the corner); the label sits top-left where the typing starts. */
@media (max-width: 760px) {
  #contact .contact-card textarea { min-height: 112px; height: 112px; resize: vertical; }
}
@media (max-width: 760px) and (max-height: 700px) {
  #contact .contact-card textarea { min-height: 88px; height: 88px; }
}
@media (max-width: 760px) and (max-height: 620px) {
  #contact .contact-card textarea { min-height: 70px; height: 70px; }
}
/* 2026-09-26 (Shaun): footer on phones - no logo; the four section links on one row; email +
   phone as two small buttons; Investor Room on its own line just above the icons; all eight
   social icons on one row. */
@media (max-width: 760px) {
  .footer-top { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .footer-top > .nav-brand { display: none; }
  .footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
  .footer-links li { display: flex; justify-content: center; }
  .footer-links a { justify-content: center; padding: 0 !important; font-size: 14px; }
  .footer-links .fl-mail, .footer-links .fl-phone { grid-column: span 2; }
  .footer-links .fl-phone { display: flex; }
  .footer-links .fl-long { display: none; }
  .footer-links .fl-short { display: inline; }
  .footer-links .fl-mail a, .footer-links .fl-phone a {
    width: 100%; gap: 8px; border-radius: 12px; font-weight: 600; color: var(--text);
    background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line-2);
  }
  .footer-links .fl-room { grid-column: 1 / -1; order: 9; }
  .footer-links .fl-room a {
    width: 100%; gap: 8px; border-radius: 12px; font-weight: 600; font-size: 15px; color: #fff;
    background: linear-gradient(180deg, #ff4148 0%, #d9161f 55%, #b10f17 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px -10px rgba(229,36,44,.7);
  }
  .footer-links .btn-ico { display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; }
  .footer .social { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; justify-items: center; }
  .footer .social a { width: 100%; max-width: 44px; height: auto; min-height: 0 !important; aspect-ratio: 1; justify-content: center; }
}
/* 2026-09-26: contact form rows evenly spaced (they were 24 / 22 / 14 / 34px apart) - one
   10px rhythm gives the taller message box its room without pushing past the screen. */
@media (max-width: 760px) {
  #contact .contact-card { display: flex; flex-direction: column; gap: 10px; }
  #contact .contact-card > .topics, #contact .contact-card > .field, #contact .contact-card > .form-row, #contact .contact-card .form-row > .field { margin: 0; }
  #contact .contact-card .form-row { gap: 8px; }
  #contact .contact-card > .btn-block { margin-top: 2px; }
}
/* 2026-09-26 (Shaun): the same 18px under every section heading (Team was 6, Contact 12, Value 21) */
@media (max-width: 760px) {
  #team .team-split { row-gap: 18px; }
  #contact .contact-list { margin-top: 18px; }
  #value .section-head { margin-bottom: 18px; }
}
/* 2026-09-26 (Shaun): each section fills exactly the screen you can see. It was sized to the
   SMALL screen (browser bars showing), so once the bars shrank on scroll the next section
   peeked in as a strip at the bottom. dvh follows the bars; svh stays as the fallback. */
@supports (height: 100dvh) {
  @media (max-width: 760px) {
    .hero, .screen { min-height: 100dvh; }
    .nav-links { max-height: calc(100dvh - var(--nav-h)); }
  }
}
/* Channel tiles: title and detail sit together in the middle of the tile, even when the
   tile beside it is taller (Games had a gap between its two lines). */
@media (max-width: 760px) {
  #channels .tile { grid-template-rows: auto auto; align-content: center; }
}
/* 2026-09-28: footer - the same tighter top spacing as the Investor Room's on phones */
@media (max-width: 760px) {
  .footer { padding-top: 24px; }
  .footer-top { padding-bottom: 18px; }
}