/* Halo site, apple.com layout (docs/design/landing/LOCK.md). Loaded after site.css: site.css keeps the live
   island demos (stages, lock screen, keys); this file replaces the page shell around them. */
:root{
  --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b; --bg:#fff; --bg-2:#f5f5f7; --line:#d2d2d7;
  --blue:#0071e3; --link:#0066cc; --link-d:#2997ff; --new:#bf4800;
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ui:var(--sans); --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:980px; --wide:1260px; --r:28px; --accent:var(--blue);
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 17px/1.47 var(--sans);letter-spacing:-.022em}
::selection{background:#b4d5fe;color:var(--ink)}
:focus-visible{outline:2px solid var(--blue)}
sup{font-size:.6em;line-height:0}

/* reveals: a plain fade up, no blur */
[data-reveal]{filter:none;transform:translateY(20px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
[data-reveal].in{transform:none}

/* type */
h1,h2,h3{letter-spacing:-.015em;line-height:1.07;font-weight:600}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding:0 22px}
.center{text-align:center}
.sh{font-size:clamp(32px,5vw,48px);line-height:1.08;margin:0 0 40px}
.sh.big{font-size:clamp(40px,6vw,64px);line-height:1.05}
.body{max-width:700px;margin:0;font-size:clamp(19px,1.7vw,21px);line-height:1.38;letter-spacing:.011em;color:var(--ink-2)}
.center .body{margin:0 auto}
.eyebrow{margin:0 0 12px;font:600 clamp(19px,1.7vw,21px)/1.2 var(--sans);letter-spacing:.011em;text-transform:none;color:var(--ink-2)}
.new{margin:0 0 10px;font-size:17px;font-weight:400;color:var(--new)}
.fine{font-size:14px;color:var(--ink-3)}

/* buttons and links */
.pill{display:inline-block;padding:12px 23px;border-radius:980px;background:var(--blue);color:#fff;font-size:17px;line-height:1.18;font-weight:400;
  letter-spacing:-.022em;transition:background .2s}
.pill:hover{background:#0077ed}
.pill.sm{padding:4px 11px;font-size:12px;letter-spacing:-.01em}
.pill.lg{padding:14px 31px;font-size:19px}
.more,details p a{color:var(--link)}
.more::after{content:" ›"}
.more:hover{text-decoration:underline}

/* global nav: 44px, translucent; the island sits in the middle gap */
.gn{position:relative;z-index:80;height:44px;background:rgba(250,250,252,.8);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px)}
.gn-in{max-width:1024px;height:100%;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;
  font-size:12px;letter-spacing:-.01em;color:rgba(0,0,0,.8)}
.gn-in a{opacity:.88;transition:opacity .2s}
.gn-in a:hover{opacity:1}
.gn-logo img{display:block;border-radius:6px}
.gn-gap{width:240px}
@media (max-width:833px){
  .gn-in>a:not(.gn-logo):not(.gn-buy){display:none}
  .gn-gap{flex:1}
}

.ribbon{margin:0;padding:15px 22px;background:var(--bg-2);text-align:center;font-size:14px;line-height:1.43;color:var(--ink)}

/* local nav: sticks to the top under the page's island */
.ln{position:sticky;top:0;z-index:70;height:52px;background:rgba(255,255,255,.72);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.16)}
.ln-in{max-width:var(--wrap);height:100%;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:24px}
.ln-title{font-size:21px;font-weight:600;letter-spacing:.011em}
.ln-link{font-size:12px;color:var(--ink);opacity:.8}
.ln-link:hover{opacity:1;color:var(--link)}
@media (max-width:833px){.ln-link{display:none}}

/* hero: name, two-line tagline, the product, a Buy pill, the price */
.ah{display:grid;justify-items:center;text-align:center;padding:64px 22px 90px}
.ah-name{margin:0;font-size:clamp(48px,7vw,80px);line-height:1.05;letter-spacing:-.015em;color:var(--ink)}
.ah-tag{margin:14px 0 0;font-size:clamp(24px,3vw,40px);line-height:1.1;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.mac{width:min(1000px,100%);margin:64px auto 0}
.mac-screen{padding:14px 14px 18px;border-radius:30px 30px 0 0;background:#0c0c0e;box-shadow:inset 0 0 0 2px #2a2a2e}
.mac-screen img{display:block;width:100%;height:auto;border-radius:12px 12px 0 0}
.mac-base{position:relative;height:22px;margin:0 -7%;border-radius:2px 2px 16px 16px;background:linear-gradient(#e3e4e8,#b7b9bf 60%,#8f9197)}
.mac-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:8px;transform:translateX(-50%);border-radius:0 0 10px 10px;background:#c9cbd0}
.ah-buy{margin-top:56px;display:grid;justify-items:center;gap:18px}
.ah-buy p{margin:0;font-size:17px;font-weight:600;line-height:1.47}
.badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:6px}
.ph{width:250px;margin:0}
.tma img{display:block;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
.try{margin:34px 0 0;font:400 14px/1 var(--sans);letter-spacing:-.01em;color:var(--ink-3)}

/* highlights */
.hl{padding:100px 0 120px;background:var(--bg)}
.film-frame{max-width:none;border-radius:var(--r);box-shadow:none}
.snd{background:rgba(29,29,31,.72);border:0;color:#fff}

/* the number, on black */
.stat{background:#000;color:#f5f5f7;text-align:center;padding:140px 22px}
.stat-t{margin:0;font-size:clamp(40px,6vw,80px);font-weight:600;line-height:1.05;letter-spacing:-.015em}
.stat-t .num{display:inline-block;min-width:1.2ch;font-size:1.9em;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.stat-s{margin:24px 0 0;font-size:21px;color:var(--ink-3)}

/* feature tiles on gray: text on top, the live demo below */
.tiles{background:var(--bg-2);padding:120px 0}
.tiles .wrap.bento{max-width:var(--wide)}
.bento{gap:20px}
.cell{background:#fff;border:0;border-radius:var(--r);color:var(--ink)}
.cell:hover{border-color:transparent}
.cell .cap{padding:34px 34px 26px}
.cell .cap h3{font-size:28px;line-height:1.14;letter-spacing:.007em}
.cell .cap p:not(.new){margin:10px 0 0;font-size:17px;color:var(--ink-2)}
.cell .fit{margin:auto 18px 18px;border-radius:16px}
.cell.wide{grid-column:span 2}
.cell.dark{background:#000;color:#f5f5f7}
.cell.dark .cap p:not(.new){color:var(--ink-3)}
.lyr{margin:auto 0 0;padding:6px 34px 40px;display:grid;gap:10px}
.lyr p{margin:0;font-size:clamp(22px,2.4vw,32px);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:rgba(245,245,247,.28)}
.lyr p.on{color:#f5f5f7}
@media (max-width:640px){.cell.wide{grid-column:auto}}

/* lock screen, on black */
.lock{background:#000;color:#f5f5f7;padding:140px 0}
.lock .wrap{max-width:var(--wide)}
.lock .body{color:var(--ink-3)}
.lock .eyebrow{color:var(--ink-3)}
.split .note{font:400 17px/1 var(--sans);color:var(--link-d)}

/* monitors: a display on a stand */
.mons{padding:140px 0 120px}
.mons .wrap{margin-bottom:70px}
.mon .fit{box-shadow:0 0 0 14px #0c0c0e,0 0 0 16px #2a2a2e;border-radius:10px;margin:16px}
.stand{width:22%;height:90px;margin:0 auto;background:linear-gradient(90deg,#b7b9bf,#e3e4e8 50%,#b7b9bf);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:0 0 6px 6px}
.keys p{color:var(--ink-3)}
kbd{border-color:var(--line);color:var(--ink-2);font-family:var(--sans)}
.key{background:#fff;border:1px solid var(--line);color:var(--ink);box-shadow:0 6px 0 #d2d2d7,0 14px 26px rgba(0,0,0,.08)}
.key .kl{color:var(--ink-3)}
.key:active,.key.down{box-shadow:0 1px 0 #d2d2d7,0 6px 12px rgba(0,0,0,.08)}

/* privacy */
.priv{background:var(--bg-2);padding:140px 0}
.priv-ic{display:block;width:60px;height:60px;margin:0 auto 26px;padding:0;border-radius:0;background:none;color:var(--ink)}
.priv-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px;text-align:left}
.priv-3 h3{font-size:21px;line-height:1.19;letter-spacing:.011em}
.priv-3 p{margin:8px 0 0;font-size:17px;color:var(--ink-2)}
@media (max-width:760px){.priv-3{grid-template-columns:1fr;gap:28px}}

/* tech specs: label column, value column, hairlines */
.specs{padding:120px 0 40px}
.specs dl{margin:0;border-top:1px solid var(--line)}
.specs dl>div{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:21px;font-weight:600;letter-spacing:.011em}
.specs dd{margin:0;font-size:17px;color:var(--ink)}
@media (max-width:640px){.specs dl>div{grid-template-columns:1fr;gap:6px}}

/* questions */
.faq{padding:100px 0 140px}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{font-size:19px;font-weight:600;letter-spacing:.012em}
.qa summary::after{font-family:var(--sans);color:var(--blue)}
.qa p{color:var(--ink-2);font-size:17px}

/* end card stays black: the island's body becomes the page */
.end{margin-top:0;color:#f5f5f7}
.end-word{font:600 clamp(80px,12vw,160px)/1 var(--sans);letter-spacing:-.02em}
.end-tag{color:var(--ink-3)}
.offer{margin:40px 0 30px}
.offer s{font-size:28px;color:var(--ink-3);text-decoration-color:currentColor;text-decoration-thickness:2px}
.offer b{font-size:48px;font-weight:600}
.end .fine{margin-top:20px}

/* footer: footnotes, breadcrumb, directory, legal */
.ft{background:var(--bg-2);padding:34px 0 26px;font-size:12px;line-height:1.33;color:var(--ink-2);letter-spacing:-.01em}
.ft-notes{margin:0;padding:0 0 18px 16px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.ft-crumb{display:flex;align-items:center;gap:8px;margin:12px 0;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--ink)}
.ft-crumb img{border-radius:5px}
.ft-crumb span{color:var(--ink-3)}
.ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;padding:8px 0 26px;border-bottom:1px solid var(--line)}
.ft-cols h4{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--ink)}
.ft-cols a{display:block;margin:0 0 8px;color:var(--ink-2)}
.ft-cols a:hover,.ft-legal a:hover{color:var(--ink);text-decoration:underline}
.ft-legal{margin:16px 0 0;color:var(--ink-3)}
.ft-legal span{margin:0 6px;color:var(--line)}
@media (max-width:640px){.ft-cols{grid-template-columns:1fr 1fr}}

/* ---------- premium pass: every demo sits on the real macOS desktop, not flat colour ---------- */
.navy,.teal,.ember,.uw{background:#e9a48f url(../media/wallpaper.jpg) 50% 0/cover no-repeat}
.ember{background-position:50% 30%}
.teal{background-position:50% 55%}
.uw{background-size:100% auto}
/* a real menu bar instead of placeholder blobs */
.scr .mbar{height:26px;padding:0 14px;gap:16px;background:rgba(255,255,255,.18);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  font:500 12.5px/1 var(--sans);color:rgba(20,20,25,.86);letter-spacing:-.01em}
.scr .mbar>*{display:none}
.scr .mbar::before{content:"Finder\00a0\00a0\00a0\00a0File\00a0\00a0\00a0\00a0Edit\00a0\00a0\00a0\00a0View\00a0\00a0\00a0\00a0Go\00a0\00a0\00a0\00a0Window";font-weight:500;white-space:pre}
.scr .mbar::after{content:"Sat 3 Oct  9:41";margin-left:auto;white-space:pre}
.cell .fit{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 40px -18px rgba(60,20,60,.35)}
/* lock screen: the wallpaper's darker lower half, as macOS dims it */
.lockscr{background:#2a1f45 url(../media/wallpaper.jpg) 50% 92%/170% auto no-repeat}
.lockscr::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,40,.35),rgba(20,10,40,.15) 45%,rgba(20,10,40,.45))}
.lk-card{background:rgba(255,255,255,.16)}
.mon .fit{box-shadow:0 0 0 14px #0c0c0e,0 0 0 16px #2a2a2e,0 40px 80px -20px rgba(0,0,0,.35)}

/* gradient type on black, the Pro-page signature, in the wallpaper's colours */
.grad{background:linear-gradient(100deg,#ffd6a5 0%,#ff8a7a 38%,#e45a9a 66%,#9b6cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.stat-t .num{background:linear-gradient(100deg,#ffd6a5,#ff8a7a 40%,#e45a9a 70%,#9b6cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.end-word{background:linear-gradient(180deg,#fff 30%,#b9b9c3);-webkit-background-clip:text;background-clip:text;color:transparent}
/* the timer setter floats on the desktop like a macOS widget: dark glass, so white type reads on the light wallpaper */
.tm{left:50%;right:auto;top:110px;transform:translateX(-50%);width:max-content;padding:26px 34px;border-radius:32px;
  background:rgba(22,18,30,.72);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 20px 50px rgba(40,10,40,.35)}
.dfile span{color:#1d1d1f!important;text-shadow:none!important}

/* ================= Apple product-page system (MacBook Pro / iPhone 18 Pro / AirPods Pro 3) ================= */
/* floating glass local nav (iPhone 18 Pro): a rounded bar that sits under the page's island */
.ln{top:40px;height:auto;margin:10px auto 0;max-width:1024px;width:calc(100% - 44px);border:0;border-radius:18px;background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 10px 30px rgba(0,0,0,.08)}
.ln-in{height:52px;padding:0 10px 0 22px;max-width:none}
.ln-title{color:var(--ink);font-size:19px}
.ln-link{color:var(--ink);opacity:.8;border:1px solid rgba(0,0,0,.2);border-radius:999px;padding:5px 12px}
.ln-link:hover{color:var(--ink);opacity:1}
.ln .pill.sm{padding:6px 14px;font-size:12px}

/* intro: grey copy with the point in bold white; brightens as it scrolls in */
.intro{background:#000;padding:40px 0 140px}
.intro-p{margin:0 auto;max-width:860px;font-size:clamp(24px,2.6vw,32px);line-height:1.3;font-weight:600;letter-spacing:.004em;color:#86868b;text-align:center}
.intro-p b{color:#f5f5f7;font-weight:600}

/* highlights on black, title left + "Watch the film" right */
.hl{background:#000;color:#f5f5f7;padding:0 0 140px}
.hl-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.hl-head .more{color:#2997ff;font-size:17px}

/* statement + stats row */
.stat{padding:140px 22px 150px;background:#000}
.stat .eyebrow{color:#86868b;text-align:center;margin-bottom:14px}
.stat-t{font-size:clamp(40px,6vw,80px)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:900px;margin:90px auto 0;text-align:center}
.stats span{display:block;font-size:14px;font-weight:600;color:#86868b}
.stats b{display:block;margin:4px 0;font-size:clamp(34px,4vw,48px);font-weight:600;letter-spacing:-.01em;color:#f5f5f7}
.stats b .num{font-size:inherit;display:inline;min-width:0}
.stats em{display:block;font-style:normal;font-size:14px;color:#86868b}
@media (max-width:640px){.stats{grid-template-columns:1fr;gap:40px}}

/* take a closer look: pills on the left, the real island on the right */
.explore{background:var(--bg-2);padding:120px 0 140px}
.ex{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:34px;align-items:center}
.ex-pills{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:center}
.ex-pills button{display:grid;grid-template-columns:28px 1fr;align-items:center;column-gap:12px;width:fit-content;max-width:100%;padding:12px 20px 12px 14px;border-radius:28px;
  background:#e8e8ed;color:var(--ink);font:600 17px/1.2 var(--sans);text-align:left;transition:background .3s,box-shadow .3s}
.ex-pills button i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--ink);font-size:18px;line-height:1;transition:transform .35s var(--ease)}
.ex-pills button em{grid-column:2;display:none;margin-top:6px;font-style:normal;font-weight:400;font-size:15px;line-height:1.4;color:var(--ink-2)}
.ex-pills button[aria-selected="true"]{background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.07);width:100%}
.ex-pills button[aria-selected="true"] i{transform:rotate(45deg)}
.ex-pills button[aria-selected="true"] em{display:block}
.ex-pills button:hover{background:#fff}
.ex-view{position:relative;aspect-ratio:1512/430;border-radius:28px;overflow:hidden;background:#000;box-shadow:0 30px 80px -30px rgba(80,30,80,.45)}
.ex-view>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.ex-view>.on{opacity:1;transform:none}
.ex-lyrics{display:grid;align-content:center;gap:10px;padding:0 8%;background:#000}
.ex-lyrics p{margin:0;font-size:clamp(20px,2.4vw,34px);font-weight:600;color:rgba(245,245,247,.28)}
.ex-lyrics p.on{color:#f5f5f7}
@media (max-width:880px){.ex{grid-template-columns:1fr}.ex-view{order:-1}}

/* scroll-brightening type (iPhone "Most wanted.", AirPods): grey until it reaches the middle of the screen */
.brighten{transition:color .2s linear}
.tma img{background:#fff}
/* explorer close-up: crop the desktop to the island, like a product close-up */
.ex-view{aspect-ratio:2/1}
.ex-view>img{object-position:50% 0}

/* what's new in 1.4: black, the film, three cards */
.wn{background:#000;color:#f5f5f7;padding:130px 0 40px}
.wn .eyebrow{color:#86868b;text-align:center}
.wn-film{margin-top:20px;border-radius:28px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px -30px rgba(255,110,150,.35)}
.wn-film video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.wn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.wn-cards article{border-radius:24px;overflow:hidden;background:#1d1d1f}
.wn-cards img{display:block;width:100%;height:auto}
.wn-cards h3{margin:22px 24px 6px;font-size:21px;line-height:1.2;color:#f5f5f7}
.wn-cards p{margin:0 24px 26px;font-size:15px;line-height:1.45;color:#86868b}
@media (max-width:880px){.wn-cards{grid-template-columns:1fr}}