/* Additive mobile-only styling. The production desktop CSS is unchanged. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/space-grotesk-regular.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/space-grotesk-bold.ttf') format('truetype')}
.nav-toggle{display:none}
@media(max-width:820px){
  .site-header{position:relative;z-index:5}
  .nav{position:relative;display:flex;flex-wrap:wrap;min-height:70px;padding-block:12px;gap:8px}
  .nav .brand{margin-right:auto;min-height:44px;font-size:11px;letter-spacing:.025em;gap:7px}
  .nav .brand img{width:28px;height:28px;flex-shrink:0}
  .header-link{min-height:44px;padding-inline:13px;font-size:11px}
  .nav-toggle{position:relative;display:block;flex:0 0 44px;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
  .nav-toggle span{position:absolute;left:11px;width:22px;height:1px;background:currentColor;top:17px}
  .nav-toggle span+span{top:25px}
  .nav-toggle[aria-expanded='true'] span{top:21px;transform:rotate(45deg)}
  .nav-toggle[aria-expanded='true'] span+span{transform:rotate(-45deg)}
  .nav-links{order:4;display:grid;justify-content:stretch;width:100%;gap:0;padding:8px 0 0;border-top:1px solid var(--line)}
  .nav-links a{min-height:48px;font-size:14px;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:0}
  .nav-links[hidden]{display:none}
  .footer .brand{min-height:44px}
}
@media(max-width:600px){
  body{font-family:'Space Grotesk',sans-serif}
  .shell{width:calc(100% - 32px)}
  .nav .brand{font-size:12px;letter-spacing:-.035em;gap:6px}
  .nav .brand span{max-width:80px;line-height:1.15}
  .hero{padding:48px 0 64px;background-image:none}
  .hero-grid{gap:44px}
  .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:22px}
  h1,h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.06em}
  h1{font-size:clamp(49px,15.4vw,76px);line-height:1.01;margin-bottom:27px}
  h1 em{color:#cc97ff;-webkit-text-stroke:0;font-style:normal}
  .hero .lede{font-size:16px;line-height:1.75;max-width:100%}
  .actions{margin-top:24px}
  .text-link{font-size:13px;font-weight:700}
  .hero-visual{padding:0;width:min(100%,410px)}
  .today{width:185px}
  .caption{font-size:11px;gap:6px 12px}
  .hero-foot{margin-top:34px;padding-top:20px;gap:12px;font-size:10px;line-height:1.6;letter-spacing:.08em}
  .story{padding-block:88px}
  .story-grid,.media-story .story-grid{gap:44px}
  h2,.privacy h2{font-size:clamp(36px,10.6vw,57px);line-height:1.08;margin-bottom:24px}
  h2 em{color:#cc97ff}
  .copy>p:not(.eyebrow),.privacy p{font-size:16px;line-height:1.75}
  .detail-list{margin-top:28px}
  .detail-list li{font-size:14px;padding-block:18px;gap:15px}
  .detail-list span{font-size:11px}
  .copy>p.secondary-note{font-size:14px;line-height:1.75;margin-top:28px}
  .video-device figcaption,.video-device figcaption span{font-size:10px;letter-spacing:.04em}
  .audio-device figcaption{font-size:10px}
  .audio-device{width:148px}
  .excerpt-label{font-size:10px;letter-spacing:.06em;gap:8px;flex-wrap:wrap}
  .history-window{padding:10px}
  .privacy{padding-block:80px}
  .privacy-grid{gap:8px}
  .privacy .eyebrow{font-size:10px}
  summary{font-size:14px;min-height:52px}
  details p{font-size:14px!important}
  .footer{padding-block:32px;gap:4px}
  .footer .brand{min-height:44px;font-size:11px}
  .footer p{font-size:11px;line-height:1.6;letter-spacing:0}
}