/* ============================================================================
   apple.css - the one shared layer that makes every page read as one site.
   Linked LAST in <head> on every public page, so it settles the things that
   used to drift page by page: the typeface, the global nav, the footer, and
   the light theme of the legal and support pages.

   TYPEFACE. San Francisco is Apple's system font. Apple's licence does not
   allow serving the SF Pro files from a website, so we never self-host them:
   -apple-system / BlinkMacSystemFont ask the visitor's OWN device for it.
   Every iPhone, iPad and Mac renders the real SF Pro (Text below 20px,
   Display above, picked automatically). Everything else falls back to Inter,
   the closest open face, loaded from Google Fonts. A browser only downloads a
   web font it actually renders, so Apple devices never fetch Inter.
   Nunito and Poppins are gone from the site; do not bring them back.

   Type scale follows apple.com: headlines Semibold (600) with gentle negative
   tracking, body 17px, secondary text #6e6e73, links #0066cc.
   ========================================================================= */

:root{
  --apple-font:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Display,Helvetica Neue,Inter,system-ui,sans-serif;
  /* the old per-page font tokens all resolve to SF now */
  --sys:var(--apple-font);
  --round:var(--apple-font);
  --font:var(--apple-font);
  --apple-ink:#1d1d1f;
  --apple-ink2:#6e6e73;
  --apple-grey:#f5f5f7;
  --apple-line:#d2d2d7;
  --apple-blue:#0071e3;
  --apple-link:#0066cc;
}

html body{font-family:var(--apple-font);-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
html body button,html body input,html body select,html body textarea{font-family:inherit}

/* The drifting green/pink wash is retired: apple.com sits on plain white and
   #f5f5f7. The element stays in the markup; it just never paints. */
.bgwash{display:none !important}

/* ---------- global nav (every page) ---------- */
html body > nav{z-index:100;height:48px;display:flex;align-items:center;
  justify-content:space-between;padding:0 max(22px,env(safe-area-inset-left));
  background:rgba(250,250,252,.8);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
html body > nav .nav-logo img{height:26px;width:auto;filter:none}
html body > nav .nav-links{display:flex;gap:0;list-style:none;margin:0;padding:0;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);align-items:center}
html body > nav .nav-links li{height:auto}
html body > nav .nav-links a{display:block;height:auto;padding:0 12px;font-family:var(--apple-font);
  font-size:12px;font-weight:400;letter-spacing:-.01em;line-height:48px;
  color:rgba(0,0,0,.8);text-decoration:none;transition:color .2s}
html body > nav .nav-links a:hover{color:#000}
html body > nav .nav-links a[aria-current]{color:#000;font-weight:400}
html body > nav .nav-mini{font-family:var(--apple-font);font-size:12px;font-weight:400;
  letter-spacing:-.01em;line-height:1.33;padding:4px 12px;border-radius:980px;
  background:var(--apple-blue);color:#fff}
html body > nav .hamburger svg{fill:var(--apple-ink)}
html body .mobile-menu{background:rgba(250,250,252,.97);border-bottom:1px solid rgba(0,0,0,.08);padding:8px 24px 18px}
html body .mobile-menu a{font-family:var(--apple-font);font-size:17px;font-weight:600;letter-spacing:-.022em;
  color:var(--apple-ink);padding:12px 2px;border-bottom:1px solid rgba(0,0,0,.06);background:none}
html body .mobile-menu a:hover{background:none;color:#000}
html body .mobile-menu .menu-divider{background:rgba(0,0,0,.1);margin:8px 0}
html body .mobile-menu .menu-divider ~ a{font-size:14px;font-weight:400;color:var(--apple-ink2)}
@media(max-width:920px){html body > nav .nav-links{display:none !important}html body > nav .hamburger{display:block}}

/* ---------- footer (every page) ---------- */
html body footer.apple-footer{background:var(--apple-grey);color:var(--apple-ink2);padding:0;margin:0;
  max-width:none;border:0;text-align:left;font-family:var(--apple-font);font-size:12px;
  line-height:1.33;letter-spacing:-.01em}
html body footer.apple-footer a{color:var(--apple-ink2);text-decoration:none}
html body footer.apple-footer a:hover{color:var(--apple-ink);text-decoration:underline}
.apple-footer__container{max-width:980px;margin:0 auto;padding:0 22px}
.apple-footer__disclaimer{padding:20px 0 17px;border-bottom:1px solid var(--apple-line)}
.apple-footer__disclaimer p{font-size:12px;line-height:1.33;color:var(--apple-ink2);margin:0 0 8px}
.apple-footer__disclaimer p:last-child{margin-bottom:0}
.apple-footer__nav{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding:28px 0 24px;border-bottom:1px solid var(--apple-line)}
html body .apple-footer__col h4{font-family:var(--apple-font);font-size:12px;font-weight:600;
  letter-spacing:-.01em;color:var(--apple-ink);margin:0 0 10px}
.apple-footer__col ul{list-style:none;padding:0;margin:0}
.apple-footer__col li{margin:0 0 8px;line-height:1.33}
.apple-footer__col a{font-size:12px}
.apple-footer__social{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:18px 0;border-bottom:1px solid var(--apple-line)}
.apple-footer__social span{font-size:12px;font-weight:600;color:var(--apple-ink);margin-right:2px}
html body footer.apple-footer .apple-footer__social a{display:inline-flex;transition:color .15s}
html body footer.apple-footer .apple-footer__social a:hover{text-decoration:none}
.apple-footer__social svg{width:17px;height:17px;fill:currentColor}
.apple-footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:17px 0 22px}
.apple-footer__copy{font-size:12px;color:var(--apple-ink2);margin:0}
.apple-footer__legal{list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap}
.apple-footer__legal li{padding:0 10px;border-left:1px solid var(--apple-line);line-height:1}
.apple-footer__legal li:first-child{border-left:0;padding-left:0}
.apple-footer__legal li:last-child{padding-right:0}
.apple-footer__legal a{font-size:12px}
@media(max-width:860px){
  .apple-footer__nav{grid-template-columns:1fr 1fr;gap:28px 16px}
  .apple-footer__bottom{flex-direction:column;align-items:flex-start}
  .apple-footer__legal{gap:6px 0}
}
@media(max-width:480px){.apple-footer__social span{flex-basis:100%}}

/* ---------- light legal + support pages ----------
   Privacy, Terms, Age, Child Safety, Apple TV privacy, Security, Delete
   Account and Advertise used to be a dark theme of their own. apple.com
   legal pages are white with #1d1d1f text; these now are too. The pages'
   own CSS reads these variables, so flipping them flips most of the page;
   the rest are the few colours those pages hard-coded. */
html.apple-light{
  --bg:#fff; --text-primary:#1d1d1f; --text-secondary:#424245; --text-tertiary:#6e6e73;
  --divider:#d2d2d7; color-scheme:light}
html.apple-light body{background:#fff;color:#1d1d1f}
html.apple-light .hero h1{font-size:clamp(40px,5vw,56px);font-weight:600;letter-spacing:-.015em;line-height:1.07;color:#1d1d1f}
html.apple-light .hero .updated{font-size:14px;color:#6e6e73}
html.apple-light .legal-body h2{font-size:28px;font-weight:600;letter-spacing:-.012em;line-height:1.14;color:#1d1d1f}
html.apple-light .legal-body h3{font-size:19px;font-weight:600;letter-spacing:-.012em;color:#1d1d1f}
html.apple-light .legal-body p,
html.apple-light .legal-body ul,
html.apple-light .legal-body ol{font-size:17px;line-height:1.53;letter-spacing:-.022em;color:#424245}
html.apple-light .legal-body strong,html.apple-light .legal-body b{color:#1d1d1f}
html.apple-light .legal-body a{color:var(--apple-link)}
html.apple-light .legal-body .legal-note{background:var(--apple-grey);border:0;border-radius:18px;padding:18px 22px}
html.apple-light .toc a{font-size:14px;font-weight:400;color:#6e6e73}
html.apple-light .toc a:hover,html.apple-light .toc a.active{color:#1d1d1f}
html.apple-light .hero-lock img{filter:invert(1)}
/* legal search (/privacy, /terms) */
html.apple-light .legal-search input{background-color:#fff;border:1px solid #d2d2d7;border-radius:12px;font:400 17px/1.3 var(--apple-font);letter-spacing:-.022em;color:#1d1d1f}
html.apple-light .legal-search input:focus{background-color:#fff;border-color:var(--apple-blue);box-shadow:0 0 0 4px rgba(0,113,227,.15)}
html.apple-light .legal-search input::-webkit-search-cancel-button{filter:none}
html.apple-light .legal-search-results{background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 18px 50px rgba(0,0,0,.14)}
html.apple-light .legal-search-results .ls-row:hover,html.apple-light .legal-search-results .ls-row.active{background:var(--apple-grey)}
html.apple-light .legal-search-results mark,html.apple-light .legal-body mark.ls-hit{background:rgba(0,113,227,.16)}
html.apple-light .commitment-callout{background:var(--apple-grey);border:0;border-radius:18px;font-size:17px;line-height:1.53;letter-spacing:-.022em;color:#424245}
html.apple-light .rating-badge{background:var(--apple-grey);border:0;border-radius:18px;color:#1d1d1f;font-weight:600}
/* /submit-ads */
html.apple-light .hero .eyebrow{letter-spacing:0;text-transform:none;font-size:17px;color:#bf4800;font-weight:600}
html.apple-light .hero p.lede{font-size:19px;line-height:1.42;letter-spacing:.012em;color:#424245}
html.apple-light .fact{background:var(--apple-grey);border:0;border-radius:18px}
html.apple-light .fact p,html.apple-light .content > p,html.apple-light .content ul{font-size:17px;line-height:1.47;letter-spacing:-.022em;color:#424245}
html.apple-light .content a{color:var(--apple-link)}
html.apple-light form input,html.apple-light form textarea,html.apple-light form select{background:#fff;border:1px solid #d2d2d7;border-radius:12px;color:#1d1d1f;font-size:17px;letter-spacing:-.022em}
html.apple-light form input:focus,html.apple-light form textarea:focus,html.apple-light form select:focus{border-color:var(--apple-blue);box-shadow:0 0 0 4px rgba(0,113,227,.15)}
html.apple-light form button{background:var(--apple-blue);color:#fff;font-size:17px;font-weight:400;padding:12px 24px}
html.apple-light form button:hover{background:#0077ed}
html.apple-light .status.ok{color:#008009}
html.apple-light .status.err{color:#e30000}

/* ---------- dark pages (/security): apple.com's dark global nav ---------- */
html.apple-dark body > nav{background:rgba(22,22,23,.8);border-bottom-color:rgba(255,255,255,.08)}
html.apple-dark body > nav .nav-logo img{filter:invert(1)}
html.apple-dark body > nav .nav-links a{color:rgba(255,255,255,.8)}
html.apple-dark body > nav .nav-links a:hover,html.apple-dark body > nav .nav-links a[aria-current]{color:#fff}
html.apple-dark body > nav .hamburger svg{fill:#f5f5f7}
html.apple-dark body .mobile-menu{background:rgba(22,22,23,.97);border-bottom-color:rgba(255,255,255,.08)}
html.apple-dark body .mobile-menu a{color:#f5f5f7;border-bottom-color:rgba(255,255,255,.08)}
html.apple-dark body .mobile-menu .menu-divider{background:rgba(255,255,255,.12)}
html.apple-dark body .mobile-menu .menu-divider ~ a{color:#a1a1a6}

/* ===== Page fold, Apple style (Nov 2026; /explore and the home page). White, one typeface, the headline carries the colour.
   The phones are Apple's official iPhone 18 Pro Max frame, upright, no tilt, no overlap. The
   movement is a real screen recording inside the middle phone. */
.hx.xh{background:#f5f5f7;padding:clamp(36px,4.6vh,64px) 22px 0;text-align:left;overflow:visible}
.xh-copy{max-width:980px;margin:0 auto}
.xh-eyebrow{margin:0 0 6px;font-size:clamp(19px,1.6vw,24px);font-weight:600;color:#1d1d1f;letter-spacing:-.01em}
.xh-title{margin:0;font-weight:700;font-size:clamp(48px,6.6vw,96px);line-height:.96;letter-spacing:-.03em;
  background:linear-gradient(92deg in oklab,var(--xh-0,#1d1d1f) 0%,var(--xh-0,#1d1d1f) var(--xh-hold,30%),var(--xh-a,#ff6a50) 74%,var(--xh-b,#ff9a7a) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-right:.08em;width:fit-content;max-width:100%}
.xh-tag{margin:14px 0 0;font-size:clamp(19px,1.7vw,24px);font-weight:600;color:var(--xh-tag,#d9482c);letter-spacing:-.012em}
.xh-pill{display:inline-flex;align-items:center;gap:26px;margin-top:22px;padding:10px 10px 10px 28px;border-radius:980px;background:#f5f5f7}
.xh-pill span{font-size:17px;line-height:1.3;font-weight:600;color:#1d1d1f;letter-spacing:-.022em}
.xh-pill small{display:block;font-size:14px;font-weight:400;color:#6e6e73;letter-spacing:-.01em}
.xh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:980px;
  background:#0071e3;color:#fff;font-size:17px;font-weight:400;letter-spacing:-.022em;text-decoration:none;transition:background .2s}
.xh-btn:hover{background:#0077ed}
.xh-stage{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(22px,3.2vw,48px);
  margin:clamp(30px,4.2vh,64px) auto 0;max-width:1320px;padding:0 0 clamp(72px,8vw,130px)}
.xh .dev.xh-main{width:clamp(270px,27vw,440px);z-index:2}
.xh-side{position:relative;z-index:1;width:clamp(210px,21.5vw,350px);height:auto;display:block;opacity:0;transition:opacity 1s ease}
.loaded .xh-side{opacity:1}
.loaded .xh-side.l{transition-delay:.2s}.loaded .xh-side.r{transition-delay:.35s}
/* desktop: copy on the left, the three phones on the right (apple.com two-up) */
@media(min-width:1000px){
  .hx.xh{display:grid;grid-template-columns:minmax(440px,1fr) minmax(0,1fr);align-items:center;column-gap:clamp(24px,4vw,64px);
    max-width:none;margin:0;padding:clamp(56px,8vh,120px) max(22px,calc((100% - 1600px)/2)) clamp(72px,10vh,140px);min-height:calc(100svh - 48px)}
  .xh-stage{container-type:inline-size}
  .xh .dev.xh-main{width:clamp(200px,38cqw,460px)}
  .xh-side{width:clamp(150px,27cqw,350px)}
  .xh-copy{max-width:none;margin:0}
  .xh-title{font-size:clamp(48px,6vw,110px)}
  .xh-tag{font-size:clamp(19px,1.7vw,26px);max-width:30ch}
  .xh-stage{margin:0;padding:0;max-width:none;gap:clamp(14px,1.8vw,26px);justify-content:center}
  .xh-stage > *{flex:0 0 auto}
}
@media(max-width:760px){
  .hx.xh{text-align:center;padding-top:40px}
  .xh-title{margin-inline:auto}
  .xh-pill{gap:16px;padding:8px 8px 8px 20px;text-align:left}
  .xh-pill span{font-size:15px}.xh-pill small{font-size:12.5px}
  .xh-btn{min-height:44px;padding:0 20px;font-size:15px}
  .xh-side{display:none}
  .xh .dev.xh-main{width:min(72vw,330px)}
}
/* Apple's official iPhone 18 Pro Max frame with a screen inside (same rules as pages.css). */
.xh .dev{position:relative;margin:0;z-index:1;width:clamp(210px,19vw,280px)}
.xh .dev .frm{position:relative;z-index:2;display:block;width:100%;height:auto;pointer-events:none}
.xh .dev .scr{position:absolute;z-index:1;left:4.49%;top:1.867%;width:91.02%;height:96.3%;border-radius:15.4%/7.13%;overflow:hidden;background:#000}
.xh .dev .scr img,.xh .dev .scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xh .dev{opacity:0;transition:opacity 1s ease}.loaded .xh .dev{opacity:1}
.xh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:22px}
.xh-actions .xh-pill{margin-top:0}
.xh-film{display:inline-flex;align-items:center;gap:8px;color:#0066cc;font-size:17px;letter-spacing:-.022em;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.xh-film:hover{text-decoration:underline}
.xh-film svg{width:18px;height:18px;fill:currentColor}
@media(max-width:760px){.xh-actions{justify-content:center}}

/* ---------- headline gradients (apple.com-style, per page) ----------
   Every page sets --g1/--g2 on <body>. The fold title and every section h2 paint
   the brand colours through the type; the hero/dark pages keep their own colour
   for h2s that sit on dark (the gradient reads badly on black). */
body{--g1:#1b3a5a;--g2:#78a9d4}
.grad,.xh-title,.hx-title,h2.gt,.pv-head h2,.ft-head h2,.tile h2,.final h2,.vx h2{
  background:linear-gradient(92deg in oklab,var(--g0,#1d1d1f) 0%,var(--g1) 45%,var(--g2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:fit-content;max-width:100%;padding-right:.06em}
.xh-title,.hx-title{background:linear-gradient(92deg in oklab,var(--g0,#1d1d1f) 0%,var(--g0,#1d1d1f) var(--xh-hold,10%),var(--g1) 60%,var(--g2) 100%);-webkit-background-clip:text;background-clip:text}
.hx-title span{color:transparent}
.tile.dark h2,.vx h2{--g0:#f5f5f7}
.tile.dark h2{background:linear-gradient(92deg in oklab,#f5f5f7 0%,var(--g1) 50%,var(--g2) 100%);-webkit-background-clip:text;background-clip:text}
.vx h2{background:linear-gradient(92deg in oklab,#f5f5f7 0%,#f5f5f7 36%,var(--g1) 68%,var(--g2) 100%);-webkit-background-clip:text;background-clip:text}
.vx h2 em{color:transparent}
.ft-head h2,.pv-head h2,.final h2{margin-inline:auto}
/* product pages: section headings */
.featurepage main h2,.featurepage section > .wide > .copy > h2,.featurepage .head h2,.featurepage .split .copy h2,.featurepage .final h2,.featurepage .stage .head h2{
  background:linear-gradient(92deg in oklab,#f5f5f7 0%,var(--g1) 50%,var(--g2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:fit-content;max-width:100%;padding-right:.06em}
.featurepage .head h2{margin-inline:auto}
/* light pages with their own h1 */
.frames-page h1,.wn-page h1,.wn-page h2{
  background:linear-gradient(92deg in oklab,#1d1d1f 0%,var(--g1) 50%,var(--g2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:fit-content;max-width:100%;padding-right:.06em}
.wn-page h1 span,.wn-page h2 span{color:transparent}
/* the What's New hero sits on black: start from white, not ink */
.wn-page .hero h1,.wn-page h1#hero-h{background:linear-gradient(92deg in oklab,#f5f5f7 0%,#f5f5f7 30%,var(--g2) 100%);-webkit-background-clip:text;background-clip:text}

/* ---- Live map: the home fold's first section (#live-map, livemap.js) ----------------------------
   Founder rules: no gradient backgrounds, no glows, no tints; white / black / #f5f5f7 only. The
   headline is gradient TEXT (the page's --g1/--g2). Land is grey, the dots are Apple blue. */
.livemap{background:#fff;padding:clamp(40px,6vh,72px) 22px clamp(36px,5vh,64px);text-align:center;overflow:hidden}
.lm-copy{max-width:880px;margin:0 auto}
.lm-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-size:clamp(17px,1.4vw,21px);font-weight:600;color:#1d1d1f;letter-spacing:-.01em}
.lm-live{position:relative;width:9px;height:9px;border-radius:50%;background:#30d158}
.lm-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid #30d158;opacity:0;animation:lmPing 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.lm-title{margin:0;font-weight:700;font-size:clamp(44px,6.4vw,92px);line-height:.98;letter-spacing:-.03em;
  background:linear-gradient(92deg in oklab,#1d1d1f 0%,#1d1d1f 12%,var(--g1,#2f5f8a) 62%,var(--g2,#78a9d4) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.lm-tag{max-width:34ch;margin:16px auto 0;font-size:clamp(19px,1.6vw,24px);line-height:1.3;font-weight:600;color:#6e6e73;letter-spacing:-.012em}
.lm-stats{display:flex;justify-content:center;gap:clamp(28px,6vw,88px);margin:clamp(26px,4vh,40px) auto 0}
.lm-stats[hidden]{display:none}
.lm-stats div{display:flex;flex-direction:column;align-items:center;min-width:80px}
.lm-stats b{font-size:clamp(40px,4.6vw,64px);font-weight:700;line-height:1;letter-spacing:-.03em;color:#1d1d1f;font-variant-numeric:tabular-nums}
.lm-stats span{margin-top:6px;font-size:clamp(14px,1.1vw,17px);font-weight:600;color:#6e6e73;letter-spacing:-.01em}
.lm-bar{display:flex;justify-content:center;margin:clamp(24px,3.4vh,36px) 0 clamp(10px,1.6vh,18px)}
.lm-seg{display:inline-flex;padding:3px;border-radius:980px;background:#f0f0f2}
.lm-seg button{appearance:none;border:0;background:none;padding:7px 18px;border-radius:980px;font:inherit;font-size:14px;font-weight:600;
  color:#1d1d1f;letter-spacing:-.01em;cursor:pointer;transition:background .25s,color .25s}
.lm-seg button[aria-selected="true"]{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.lm-seg button[aria-selected="false"]{color:#6e6e73}
.lm-map{position:relative;max-width:1180px;margin:0 auto;aspect-ratio:1000/438;opacity:0;transition:opacity .8s ease}
.livemap.lm-drawn .lm-map{opacity:1}
.lm-map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.lm-layer{position:absolute;inset:0;transform-origin:50% 55%}
.lm-layer.hide,.lm-layer.hide *{pointer-events:none!important}
.lm-usstates path{fill:#ebebf0;stroke:#fff;stroke-width:.8;vector-effect:non-scaling-stroke;transition:fill .3s}
.lm-usstates path.on{fill:#d8d8de}
@media (hover:hover){.lm-usstates path:hover{fill:#cfcfd5}}
.lm-land path{fill:#ebebf0;stroke:#fff;stroke-width:.7;vector-effect:non-scaling-stroke;transition:fill .3s}
.lm-states path{fill:#ebebf0;stroke:#fff;stroke-width:.7;vector-effect:non-scaling-stroke;transition:fill .3s}
.lm-land path.on,.lm-states path.on{fill:#d8d8de}
.livemap:not(.lm-us) .lm-states path{stroke:#ebebf0}
.livemap:not(.lm-us) .lm-states path.on{fill:#d8d8de;stroke:#d8d8de}
.livemap.lm-has-us:not(.lm-us) .lm-states path{fill:#d8d8de;stroke:#d8d8de}
@media (hover:hover){.lm-land path:hover,.lm-states path:hover{fill:#cfcfd5}.livemap:not(.lm-us) .lm-states path:hover{fill:#d8d8de}}
.lm-dots{position:absolute;inset:0;pointer-events:none}
.lm-dot{position:absolute;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);padding:0;border:2px solid #fff;
  border-radius:50%;background:#0071e3;cursor:pointer;pointer-events:auto;transform:scale(0);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 45ms + 250ms),opacity .3s}
.livemap.lm-ready .lm-dot{transform:scale(1)}
.lm-dot.live::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #0071e3;opacity:0;
  animation:lmPing 2.6s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(var(--i) * 170ms + 900ms)}
.lm-dot:focus-visible{outline:3px solid #0071e3;outline-offset:3px}
@keyframes lmPing{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.1);opacity:0}}
.lm-tip{position:absolute;left:0;top:0;z-index:5;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:14px;
  background:#fff;border:1px solid #d2d2d7;text-align:left;pointer-events:none;white-space:nowrap}
.lm-tip[hidden]{display:none}
.lm-tip b{font-size:15px;font-weight:600;color:#1d1d1f;letter-spacing:-.01em}
.lm-tip span{font-size:13px;color:#6e6e73}
.lm-foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:clamp(18px,3vh,30px)}
.lm-wait,.lm-new{margin:0;font-size:clamp(17px,1.3vw,19px);font-weight:600;color:#1d1d1f;letter-spacing:-.012em}
.lm-wait b{font-variant-numeric:tabular-nums}
.lm-new{font-size:15px;font-weight:500;color:#6e6e73}
.lm-new span{color:#0071e3;font-weight:600}
.lm-wait[hidden],.lm-new[hidden]{display:none}
.lm-foot .xh-pill{margin-top:14px;background:#f5f5f7}
/* Wide screens: copy on the left, the map on the right, all of it above the fold. */
@media (min-width:1069px){
  .livemap{display:grid;grid-template-columns:minmax(380px,.78fr) minmax(0,1.62fr);grid-template-rows:1fr auto auto auto auto 1fr;
    column-gap:clamp(28px,3.4vw,64px);align-items:start;text-align:left;max-width:1680px;margin:0 auto;
    padding:clamp(28px,4.5vh,56px) clamp(22px,3.6vw,64px)}
  .lm-copy{grid-column:1;grid-row:2;margin:0;max-width:none}
  .lm-title{font-size:clamp(48px,4.7vw,80px)}
  .lm-tag{margin:14px 0 0;max-width:24ch}
  .lm-stats{grid-column:1;grid-row:3;justify-content:flex-start;gap:clamp(24px,2.6vw,44px);margin:clamp(22px,3vh,34px) 0 0}
  .lm-stats div{align-items:flex-start;min-width:0}
  .lm-bar{grid-column:1;grid-row:4;justify-content:flex-start;margin:clamp(20px,2.6vh,30px) 0 0}
  .lm-foot{grid-column:1;grid-row:5;align-items:flex-start;text-align:left;margin-top:clamp(18px,2.4vh,28px)}
  .lm-map{grid-column:2;grid-row:1 / 7;align-self:center;max-width:none;width:100%;margin:0}
}
@media (max-width:734px){
  /* Phones: the map comes straight after the headline so it is on the first screen; numbers follow. */
  .livemap{display:flex;flex-direction:column;padding:28px 16px 32px}
  .lm-copy{order:1}.lm-bar{order:2;margin:18px 0 10px}.lm-map{order:3}.lm-stats{order:4;margin-top:22px}.lm-foot{order:5}
  .lm-eyebrow{font-size:16px;margin-bottom:8px}
  .lm-title{font-size:clamp(38px,11vw,48px)}
  .lm-tag{font-size:17px;margin-top:10px;max-width:30ch}
  .lm-stats b{font-size:36px}
  .lm-stats span{font-size:14px}
  .lm-wait{font-size:16px}
  .lm-stats{gap:26px}
  .lm-stats div{min-width:0}
  .lm-map{margin:0 -16px}
  .lm-foot .xh-pill{gap:16px;padding:8px 8px 8px 20px;text-align:left}
  .lm-foot .xh-pill span{font-size:15px}.lm-foot .xh-pill small{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .lm-live::after,.lm-dot.live::after{animation:none}
  .lm-dot{transition:none;transform:none}
  .lm-map{transition:none}
}