/* Perpetuum — persona copy + accessibility pass (5 Oct 2026). Loaded last. */

/* ---------- global motion control: a reserved header slot, never over content ---------- */
.motion-dock{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-width:44px;height:44px;margin-left:-16px;padding:0 16px 0 14px;border:1.5px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:500 14.5px/1 var(--font);white-space:nowrap;cursor:pointer;transition:background-color var(--t-xs),color var(--t-xs),border-color var(--t-xs)}
.motion-dock[hidden]{display:none}
.motion-dock>[aria-hidden]{font-size:11px;letter-spacing:-.05em}
.motion-dock:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.motion-dock:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
@container site (max-width:1279.98px){
  .motion-dock{width:44px;padding:0;margin-left:-12px}
  .motion-dock [data-motion-dock-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@container site (max-width:719.98px){
  .motion-dock{margin-left:auto}
  .motion-dock:not([hidden])~.menu-toggle{margin-left:-26px}
}

/* ---------- Mr. G intro: compact on phones so the app arrives sooner ---------- */
@container site (max-width:719.98px){
  .mq .mx-title{margin-top:14px}
  .mq-lede{margin-top:14px;font-size:16px;line-height:1.45}
  .mq-avatar{margin-top:2px;gap:12px}
  .mq-avatar .mav__b{width:64px}
  .mq-x{margin-top:22px}
  .mq-world{height:252px}
  .gw__m{height:200px}
  .gw__c{bottom:62px}
  .gw__c h3{font-size:24px}
  .gw__c p:last-child{display:none}
  .mq-dev{margin-top:-46px}
}

/* ---------- phones: the app grows to fit readable type instead of shrinking it ---------- */
@container site (max-width:719.98px){
  .dv__scr{aspect-ratio:auto;min-height:calc((var(--dw) - 16px) * 2.1679)}
  .gq{position:relative;inset:auto;min-height:inherit;display:flex;flex-direction:column}
  .gq-screens{position:relative;inset:auto;flex:1;display:grid;overflow:hidden}
  .gq-s{position:relative;inset:auto;grid-area:1/1;min-height:100%}
  .gq-tab{position:absolute}
  /* meaningful text ≥ 14px; labels 12px */
  .gq-k,.gq-fit__k i,.gq-f i,.gq-dl dt{font-size:12px;letter-spacing:.08em}
  .gq-why,.gq-by,.gq-chips li,.gq-dl dd,.gq-tr,.gq-fit p>span{font-size:14px}
  .gq-h{font-size:16px}
  .gq-h span{font-size:13px}
  .gq-ask,.gq-voice{font-size:19px}
  .gq-ttl{font-size:26px}
  .gq-btn{font-size:15px}
  .gq-tab i{font-size:12px}
  .gq-fmt i{font-size:13px}
  .gq-dl{grid-template-columns:minmax(0,1fr);gap:8px}
  .gq-dl div{grid-template-columns:64px minmax(0,1fr);align-items:baseline;gap:10px}
  .gq-trs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gq-tr__m{aspect-ratio:4/3}
  .gq-body{gap:14px}
  /* What you're building: one clear column — experience, content, community + next, brands */
  .gq-cover{height:auto;aspect-ratio:4/3}
  .gq-folio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:12px 14px 0}
  .gq-f--post{grid-row:auto;grid-column:1/-1;min-height:0;aspect-ratio:16/10}
  .gq-f--post figcaption{left:12px;right:12px;bottom:12px;gap:6px;font-size:15px;line-height:1.3}
  .gq-s{padding-bottom:84px}
  .gq-folio{grid-template-columns:minmax(0,1fr)}
  .gq-f--ppl{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:6px}
  .gq-f--ppl>i{grid-column:1/-1}
  .gq-f--next{display:grid;gap:6px}
  .gq-f--ppl,.gq-f--next{padding:12px 14px;border-radius:14px}
  .gq-faces{width:86px;height:34px}
  .gq-hero{height:auto;aspect-ratio:1/1}
  .gq-feat{height:auto;aspect-ratio:5/4}
  .gq-post{height:auto;aspect-ratio:1/1}
  .gq-faces .ga-av{width:34px;height:34px;margin-left:-9px}
  .gq-f__s,.gq-f--next span{font-size:14px;line-height:1.3}
  .gq-fit{grid-template-columns:minmax(0,1fr);gap:10px;margin:10px 14px 0;padding:12px 14px 14px;border-radius:14px}
  .gq-fit b{font-size:15px}
  .gq-fit__k em{font-size:12px}
  .gq-you>.gq-by{padding:12px 14px 0}
  .gq-seam{display:none}
}