/* ============================================================
   Venus on phones and tablets. Loaded after venus.css or
   venus-pages.css (and before any page-level <style>), so rules
   are prefixed with `html` to win over equal selectors there.

   1. Menu: below 1060px the header's link row is replaced by a
      menu button and a sheet built by venus-nav.js.
   2. Width: the page rails and gutters shrink on phones so the
      content column uses the screen (it was ~250px of 375px).
   3. Type: small telemetry labels get a 11-12px floor on phones.
   ============================================================ */

/* ---- 1. menu ----------------------------------------------- */

html .ubar .nav-toggle{display:none;position:relative;z-index:2;flex:none;
  width:44px;height:44px;margin-right:-6px;padding:0;
  align-items:center;justify-content:center;
  background:none;border:0;border-radius:99px;color:#FAF9F5;cursor:pointer}
html .ubar .nav-toggle span{position:absolute;left:13px;width:18px;height:1.5px;background:currentColor;
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
html .ubar .nav-toggle span:nth-child(1){transform:translateY(-3.5px)}
html .ubar .nav-toggle span:nth-child(2){transform:translateY(3.5px)}
html .ubar .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
html .ubar .nav-toggle[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}
html .ubar .nav-toggle:focus-visible{outline:2px solid #FF2D8E;outline-offset:2px}

html .ubar .nav-panel{position:fixed;z-index:59;top:76px;left:12px;right:12px;
  max-height:calc(100dvh - 88px);overflow-y:auto;
  display:flex;flex-direction:column;padding:8px 20px 20px;
  background:rgba(28,28,34,.98);border:1px solid rgba(250,249,245,.16);border-radius:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  clip-path:inset(0 0 100% 0 round 22px);opacity:0;visibility:hidden;
  transition:clip-path .34s cubic-bezier(.22,.9,.26,1),opacity .2s ease,visibility 0s .34s}
html .ubar .nav-panel.open{clip-path:inset(0 0 0 0 round 22px);opacity:1;visibility:visible;transition-delay:0s}
html .ubar .nav-panel a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:52px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--mono);font-size:15px;letter-spacing:.05em;text-transform:uppercase;
  color:#FAF9F5;text-decoration:none}
html .ubar .nav-panel a .pm{display:block;flex:none;width:22px;height:22px;color:var(--pc,#FAF9F5)}
html .ubar .nav-panel a .pm svg{width:100%;height:100%;display:block}
html .ubar .nav-panel a .pn{display:flex;flex-direction:column;gap:3px;margin-right:auto;line-height:1.15}
html .ubar .nav-panel a .pn b{font-weight:inherit}
html .ubar .nav-panel a .pn em{font-style:normal;font-family:var(--sans);font-size:13px;letter-spacing:0;
  text-transform:none;color:rgba(255,255,255,.55)}
html .ubar .nav-panel a .tagpill{flex:none;font-size:10px}
html .ubar .nav-panel a[aria-current="page"]:not(.np-cta){color:#FF7AB8}
html .ubar .nav-panel a.np-cta{justify-content:center;margin-top:18px;min-height:52px;border:1px solid #FF2D8E;
  border-radius:99px;background:#FF2D8E;color:#fff;font-size:14px}
html .ubar .nav-panel a.np-cta:active{background:#D4006B;border-color:#D4006B}
html.nav-locked,html.nav-locked body{overflow:hidden}
@media(prefers-reduced-motion:reduce){html .ubar .nav-panel{transition:opacity .01s,visibility 0s}}

@media(max-width:1060px){
  html .ubar .nav .links{display:none}
  html .ubar .nav .nav-toggle{display:inline-flex}
  /* the pill keeps its height; the button sits flush right */
  html .ubar .nav{padding-right:8px}
}
@media(min-width:1061px){html .ubar .nav-panel{display:none}}

/* ---- 2. width ---------------------------------------------- */

@media(max-width:640px){
  html:root{--hatch:10px;--rail:8px;--gut:14px}
  html .ubar .nav-panel{left:10px;right:10px}
}
@media(max-width:400px){
  html:root{--hatch:8px;--rail:6px;--gut:12px}
}

/* ---- pricing cards ----------------------------------------- */
/* The "First 30 days · no base fee" banner is nowrap, and a plain 1fr track
   grows to fit it, so on phones each card ran ~30px past the screen edge and
   its right side was clipped. minmax(0,1fr) holds the track to the screen and
   the banner may wrap. */
@media(max-width:900px){
  html .plans{grid-template-columns:minmax(0,1fr)}
  html .plan .ban{white-space:normal}
}

/* ---- home impact headline ---------------------------------- */
/* "A human in the loop." is nowrap at 40px minimum, which is wider than a
   phone's card, so it was cut off at "A human in the lo". Let it wrap. */
@media(max-width:640px){
  html .impact .iw{white-space:normal;font-size:clamp(36px,11vw,48px);line-height:1}
}

/* ---- 3. type floor ----------------------------------------- */

@media(max-width:640px){
  /* telemetry labels: eyebrows, chips, section numbers, legal */
  html .eyebrow,html .eye,html .chip,html .cue,html .story .num,
  html .fb-legal,html .fm-contact .k,html .plan .tag,html .plan .pl,html .plan .ban,
  html .trust span,html .voices-cap,html .dm-cal .hd,html .dm-cal .hd .r{font-size:12px}
  /* chat, feed and case-study specimens. The source rules are two or three
     classes deep, so they are repeated here under html. */
  html .conv .hd .rl,html .who-strip .rl,html .feed .fh .t,html .feed .fh .n,
  html .feed li .w .mt,html .roster .who .mt,html .mq-item .w,
  html .cs-track .cs-big .s,html .cs-big footer .rl,
  html .orbs .u .pz,html .orbs .u .st,html .orbs .u .here,
  html .hd .rl,html .body .sys,html .voice .m,html .vp-chat .sys{font-size:11px}
  html .cs-track .cs-link,html .tick .mt,html .cs-hero .cue{font-size:12px}
  html .cs-hero .sub{font-size:13px}
  html .vfoot .fb-legal,html .vfoot .fm-contact .k{font-size:11.5px}
  /* footer links get a finger-sized row */
  html .vfoot .fm-links a{display:inline-block;padding:8px 0;font-size:13px}
  html .vfoot .fm-contact a{display:inline-block;padding:8px 0}
}