/* officehoursonline.com (docs/launch/design W1 to W5). Light only. */
:root {
  --bg: #f6f5f1; --card: #fff; --ink: #1b1b1a; --muted: #5d5d58; --faint: #8a8a84; --line: #e4e2dc;
  --teal: #2e8b80; --teal-soft: #e3efec; --deep: #12302d; --red: #b3322b;
  --serif: "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
}
/* The Loughborough purple edition (Lucas, 31 Oct 15:40; board L-home-purple): on loughborough.officehoursonline.com
   only, every page, switched by host (html.lough, set in each page's head). The app icon stays teal. */
html.lough { --teal: #5B2A93; --teal-soft: #E9DDF8; --deep: #4A2079; --bg: #F7F5FA; --primary: #3B1667; --tint: #C9B3EA; }
.lough .btn.dark, .lough .btn.teal { background: var(--primary); border-color: var(--primary); }
.lough .pill { color: var(--deep); }
.lough .window { background: #ECE8F2; }
.lough .screen { background: #FAF8FC; }
.lough .ep { background: radial-gradient(circle at 75% 30%, #5d4396, #2A1050 60%, #1F1A26); }
.lough .ep small, .lough .app small { color: var(--tint); }
/* Deep purple at the left, the glow up and to the right, near black at the bottom right (as the board). */
.lough .band, .lough .app { background: radial-gradient(ellipse 40% 75% at 74% 12%, rgba(150, 110, 220, 0.38), transparent 70%),
  linear-gradient(120deg, #2A1050 0%, #23103F 45%, #160F22 80%, #1F1A26 100%); }
.lough .band p { color: #D4C8E6; }
.lough .ticks li::before { color: var(--tint); }
.lough .get { background: #2A1050; }
.lough .get p { color: #CFC3E2; }
.lough .get .faint { color: #A99BC0; }
.lough .app p { color: #D4C8E6; }
.lough .ok { background: #EFE8F8; }
.lough .wave i { background: #E9DDF8; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 64px; }
h1, h2, h3.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.05; }
h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.15; }
p { margin: 0; }
.muted { color: var(--muted); } .faint { color: var(--faint); font-size: 13px; }

/* Header */
header.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font: 24px var(--serif); }
/* The real app icon (design/icon/AppIcon-*.png), never redrawn. Its PNG keeps Apple's transparent margin (the tile is
   824 of 1024), so it is shown 1024/824 larger with that margin pulled in: the tile itself is 30 px. */
.mark { width: 37.3px; height: 37.3px; margin: -3.65px; flex: none; display: block; }
/* The Loughborough lockup: "Office Hours | Loughborough University", the university's name in grey (no crest, no
   university colours). */
.brand .uni { color: var(--faint); padding-left: 10px; margin-left: 0; border-left: 1px solid var(--line); line-height: 1; }
nav.links { display: flex; align-items: center; gap: 28px; font-size: 15px; color: var(--muted); }
nav.links a:hover { color: var(--ink); } nav.links .strong { color: var(--ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 10px;
  font: 600 15px var(--sans); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.teal { background: var(--teal); border-color: var(--teal); color: #fff; width: 100%; height: 52px; }
.btn.big { height: 52px; padding: 0 22px; }
.btn.small { height: 38px; padding: 0 18px; }
.apple { width: 13px; height: 15px; fill: currentColor; }

/* Home */
.hero { display: grid; grid-template-columns: 1fr 540px; gap: 48px; align-items: center; padding: 40px 0 72px; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--teal-soft); color: var(--deep); font: 600 13px var(--sans); padding: 6px 12px; border-radius: 99px; margin-bottom: 20px; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.lede { font-size: 18px; color: var(--muted); max-width: 500px; margin: 26px 0 26px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.window { background: #ecebe6; border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.08); }
.dots { display: flex; gap: 6px; margin: 2px 4px 10px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: #ef5f57; }
.dots i:nth-child(2) { background: #f6bd3b; } .dots i:nth-child(3) { background: #2fc84a; }
.screen { background: #f7f6f2; border-radius: 10px; padding: 20px; }
.ep { margin-top: 12px; border-radius: 12px; padding: 18px; color: #fff; background: radial-gradient(circle at 75% 30%, #3d6d67, var(--deep) 60%, #1d2422); }
.ep small { font: 700 11px var(--sans); letter-spacing: .08em; color: #8fd3c6; }
.ep h3 { font: 19px/1.25 var(--serif); margin: 6px 0 12px; max-width: 280px; }
.chip { display: inline-flex; gap: 6px; align-items: center; background: #fff; color: var(--ink); font: 600 13px var(--sans); padding: 5px 12px; border-radius: 7px; }
.bubble { margin-top: 12px; font-size: 13px; padding: 10px 14px; border-radius: 10px; max-width: 320px; }
.bubble.me { background: var(--ink); color: #fff; margin-left: auto; }
.bubble.it { background: #fff; border: 1px solid var(--line); max-width: 390px; }
.bubble.it em { display: block; font-style: normal; color: var(--teal); font-weight: 600; font-size: 12px; margin-top: 6px; }
/* The Loughborough home page (board L-home): the mock's top line, module chips and deadline; the three-column strip. */
.screen-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.synced { font-size: 11px; color: var(--faint); white-space: nowrap; }
.mods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mods span { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px 10px; font-size: 12px; }
.mods i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.mods b { color: var(--teal); }
.due { margin-top: 14px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.due i { width: 6px; height: 6px; border-radius: 50%; background: #b3322b; display: inline-block; }
.due b { color: var(--ink); }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid var(--line); padding-top: 22px; margin: 0 0 88px; }
.strip h3 { font: 26px var(--serif); margin: 0 0 6px; }
.strip p { font-size: 14px; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--teal-soft); color: var(--teal); font-weight: 600; }
.card h3 { font: 24px var(--serif); margin: 12px 0 8px; } .card p { color: var(--muted); font-size: 15px; }
.band { margin: 88px 0; border-radius: 20px; padding: 48px; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
  background: radial-gradient(circle at 78% 20%, #3c6964, #163330 45%, #1b2120); }
.band p { color: #c7d3d1; max-width: 560px; margin-top: 14px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ticks li::before { content: "✓"; color: #7fcfc1; margin-right: 10px; }
.qa { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; margin: 40px 0 88px; }
.qa dl { margin: 0; } .qa dt { font-weight: 600; padding-top: 22px; border-top: 1px solid var(--line); }
.qa dd { margin: 4px 0 22px; color: var(--muted); }
.get { background: var(--ink); color: #fff; border-radius: 20px; padding: 40px 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.get p { color: #bdbdb8; margin-top: 6px; } .get .btn { background: #fff; color: var(--ink); }
.get .faint { color: #9d9d98; margin-top: 10px; text-align: right; }
.wait { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 40px; display: flex; justify-content: space-between; gap: 24px; align-items: center; flex-wrap: wrap; margin: 28px 0 88px; }
.wait h2 { font-size: 34px; } .wait p { color: var(--muted); max-width: 640px; }
.wait form { display: flex; gap: 10px; flex-wrap: wrap; }
input[type=email], input[type=text] { height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font: 15px var(--sans); background: #fff; min-width: 260px; }
.note { font-size: 14px; color: var(--teal); margin-top: 8px; min-height: 20px; }

/* Pricing */
.center { text-align: center; } .center p { margin-top: 12px; color: var(--muted); font-size: 18px; }
.plan { display: grid; grid-template-columns: 592px 360px; gap: 28px; justify-content: center; margin: 64px 0 72px; align-items: start; }
.price { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 36px; box-shadow: 0 20px 50px rgba(0,0,0,.06); }
.tag { display: inline-block; background: var(--teal-soft); color: var(--deep); font: 700 13px var(--sans); padding: 5px 12px; border-radius: 99px; }
.amount { font: 64px var(--serif); margin-top: 14px; } .amount span { font: 16px var(--sans); color: var(--muted); }
.price ul { list-style: none; padding: 20px 0; margin: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.price li { display: grid; grid-template-columns: 24px 1fr; }
.price li::before { content: "✓"; color: var(--teal); }
.side { display: grid; gap: 16px; } .side h4 { margin: 0 0 14px; font: 600 13px var(--sans); letter-spacing: .08em; color: var(--muted); }
.step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; margin-bottom: 12px; font-size: 14px; line-height: 1.35; }
.center h1 { font-size: clamp(36px, 4.2vw, 56px); }
.band h2 { max-width: 560px; }
.get > div:first-child { flex: 1 1 0; min-width: 0; }
.get > div:last-child { text-align: right; }
#soon { padding-bottom: 88px; }
#soon p { max-width: 620px; margin: 12px auto 0; color: var(--muted); }
.ep { display: flex; align-items: center; gap: 12px; }
.ep .wave { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 70px; opacity: .45; }
.ep .wave i { width: 3px; border-radius: 2px; background: #fff; }
.step b { display: block; font-size: 15px; } .step span.d { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f1f0eb; font-size: 11px; }
.step span.d.on { background: var(--teal); color: #fff; }
.link { color: var(--teal); text-decoration: underline; }

/* Download */
.icon { display: block; width: 89.5px; height: 89.5px; margin: 47px auto 11px; filter: drop-shadow(0 16px 15px rgba(0,0,0,.15)); }
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 44px 0; }
.steps4 .card b { display: block; margin: 12px 0 10px; } .steps4 .num { border-radius: 50%; background: var(--teal); color: #fff; width: 28px; height: 28px; font-size: 13px; }
.ok { margin: 0 auto 72px; max-width: 660px; background: #e5ecea; border-radius: 14px; padding: 14px 20px; text-align: center; font-size: 15px; }

/* Account */
.acct { display: grid; grid-template-columns: 548px 430px; gap: 20px; margin: 24px 0; }
.app { border-radius: 20px; padding: 28px; color: #fff; background: radial-gradient(circle at 60% 10%, #3c6964, #163330 40%, #1f2221); min-height: 356px; }
.app small { font: 700 11px var(--sans); letter-spacing: .1em; color: #8fd3c6; } .app h2 { margin: 10px 0; font-size: 34px; } .app p { color: #c7d3d1; font-size: 15px; margin-bottom: 20px; }
.app .btn.ghost { background: transparent; color: #fff; border-color: #5b6e6b; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.panel h4 { margin: 0 0 10px; font: 600 13px var(--sans); letter-spacing: .08em; color: var(--muted); }
.kv { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); gap: 12px; }
.kv small { display: block; color: var(--muted); font-size: 13px; } .kv b { font-weight: 600; }
.kv a, .kv button.textlink { color: var(--teal); font-weight: 600; background: none; border: 0; cursor: pointer; font: 600 15px var(--sans); }
.danger { color: var(--red) !important; }
.profile { max-width: 1000px; }
.signin { max-width: 440px; margin: 40px 0 88px; }
.signin form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.signin .oauth { display: grid; gap: 12px; margin-bottom: 18px; }
.signin .oauth .btn { width: 100%; }
.signin .g { font-weight: 700; background: linear-gradient(135deg, #4285f4, #ea4335 40%, #fbbc05 65%, #34a853); -webkit-background-clip: text; background-clip: text; color: transparent; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 4px 0 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Legal */
.legal { display: grid; grid-template-columns: 220px 1fr; gap: 56px; padding-top: 40px; padding-bottom: 72px; }
.legal aside a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.legal aside a.on { background: #e9e8e3; color: var(--ink); font-weight: 500; }
.legal article { max-width: 720px; } .legal article h1 { font-size: 46px; margin: 6px 0 14px; }
.legal h3 { font: 600 19px var(--sans); margin: 30px 0 8px; } .legal p, .legal li { color: #3a3a37; margin-bottom: 10px; }
.draft { background: #fff4d6; border: 1px solid #ecd58f; border-radius: 10px; padding: 10px 14px; font-weight: 600; margin-bottom: 20px; }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 40px 0 56px; }
footer .wrap { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
footer .about { max-width: 330px; font-size: 13px; color: var(--muted); margin-top: 10px; }
footer .cols { display: flex; gap: 56px; font-size: 14px; } footer .cols div { display: grid; gap: 6px; align-content: start; }
footer h5 { margin: 0 0 4px; font: 600 12px var(--sans); letter-spacing: .1em; color: var(--muted); }

/* Phone width */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  nav.links a:not(.btn):not(.strong) { display: none; }
  .hero, .qa, .plan, .acct, .legal, .band { grid-template-columns: 1fr; }
  .cards, .steps4, .strip { grid-template-columns: 1fr; }
  .strip { gap: 18px; }
  .synced { display: none; }
  .band, .get, .wait { padding: 28px; }
  .get .faint { text-align: left; }
  .legal aside { display: flex; gap: 6px; flex-wrap: wrap; }
  footer .cols { gap: 28px; flex-wrap: wrap; }
  input[type=email] { min-width: 0; width: 100%; }
  .price { padding: 24px; }
  .btn.teal { padding: 0 12px; font-size: 14px; }
  .get { flex-direction: column; align-items: flex-start; }
  .get > div:first-child { flex: none; }
  .get > div:last-child { text-align: left; }
}
@media (max-width: 600px) {
  nav.links .btn.small { display: none; }
  .brand { font-size: 18px; gap: 7px; white-space: nowrap; min-width: 0; }
  .brand .uni { font-size: 12px; padding-left: 7px; overflow: hidden; text-overflow: ellipsis; }
  header.top { gap: 10px; }
  nav.links { gap: 12px; flex: none; }
  .ep .wave { display: none; }
  .due { display: block; }
  .due i { margin-right: 6px; vertical-align: middle; }
  nav.links a { white-space: nowrap; }
}


/* Mac, iPhone and iPad (Lucas, 1 Nov): an addition to both home pages. */
.dev{margin:40px 0 0}
/* Round 2 (Lucas, 1 Nov 17:50, option 2 "compact"): the whole stage fits one laptop screen (1440x900, 1280x800). The
   scene is one fixed composition (1120x600 on a computer, 640x700 on a phone) scaled to fit by --fit (site.js), so
   every part keeps its proportions; the text sits in the normal flow above it and never touches the devices. */
.dev-stage{position:relative;border-radius:32px;overflow:hidden;padding:52px 40px 0;color:#fff;
  background:radial-gradient(ellipse 55% 60% at 50% 100%,rgba(111,194,185,.30),transparent 70%),
             radial-gradient(ellipse 45% 55% at 85% 0%,rgba(111,194,185,.22),transparent 70%),
             linear-gradient(160deg,#10302D 0%,#0E1B1A 55%,#0B0F0F 100%)}
.lough .dev-stage{background:radial-gradient(ellipse 55% 60% at 50% 100%,rgba(150,110,220,.42),transparent 70%),
             radial-gradient(ellipse 45% 55% at 85% 0%,rgba(150,110,220,.30),transparent 70%),
             linear-gradient(160deg,#2A1050 0%,#1A0E30 55%,#120C1A 100%)}
.dev-head{text-align:center;max-width:1120px;margin:0 auto}
.dev-head .eyebrow{display:inline-flex;gap:18px;font:600 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9FD8D0}
.lough .dev-head .eyebrow{color:#C9B3EA}
/* The heading on one line on a computer. */
.dev-head h2{margin-top:12px;font-size:clamp(34px,3.5vw,50px);line-height:1.08;color:#fff;text-wrap:balance}
@media (min-width:1000px){.dev-head h2{white-space:nowrap}}
/* The text: at most two lines, about 760 wide. */
.dev-head p{margin:14px auto 0;color:rgba(255,255,255,.72);font-size:17.5px;line-height:1.55;max-width:760px}
.scene-wrap{margin:44px auto 0;display:flex;justify-content:center}
.scene{position:relative;flex:none;width:1120px;height:545px;zoom:var(--fit,.8)}
.scene .floor{position:absolute;left:8%;right:8%;bottom:-40px;height:120px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);filter:blur(10px)}

/* MacBook Pro */
/* (A little left of centre, so the iPhone in front never covers the menu bar's clock.) */
.mbp{position:absolute;left:47%;transform:translateX(-50%);bottom:0;width:780px;z-index:2}
.mbp .lid{position:relative;background:#0a0a0b;border-radius:20px 20px 0 0;padding:12px 12px 14px;
  box-shadow:0 0 0 2px #2c2c2e, 0 0 0 3px #6e6e73}
.mbp .notch{position:absolute;left:50%;top:12px;width:64px;height:12px;transform:translateX(-50%);background:#0a0a0b;
  border-radius:0 0 7px 7px;z-index:3}
.mbp .scr{position:relative;border-radius:6px 6px 0 0;overflow:hidden;aspect-ratio:1.55;
  /* The wallpaper in the edition's colours, like the stage: teal-green on www (it was blue), purple on Loughborough. */
  background:radial-gradient(ellipse 70% 60% at 20% 15%,#8FD3C6 0%,transparent 60%),radial-gradient(ellipse 60% 70% at 85% 80%,#1F6A63 0%,transparent 65%),
  radial-gradient(ellipse 80% 60% at 60% 30%,#C9EDE6 0%,transparent 60%),linear-gradient(160deg,#4FA69C,#2E8F86 60%,#10302D)}
.lough .mbp .scr{background:radial-gradient(ellipse 70% 60% at 20% 15%,#B89BEA 0%,transparent 60%),radial-gradient(ellipse 60% 70% at 85% 80%,#3D2A86 0%,transparent 65%),
  radial-gradient(ellipse 80% 60% at 60% 30%,#E3C9F2 0%,transparent 60%),linear-gradient(160deg,#8E6BD6,#5B2A93 60%,#2A1050)}
/* macOS 26: the menu bar is transparent over the wallpaper */
.mbp .menubar{position:absolute;left:0;right:0;top:0;height:18px;display:flex;align-items:center;gap:12px;padding:0 12px;
  font:600 8.5px var(--sans);color:#fff;text-shadow:0 0 6px rgba(0,0,0,.25);z-index:2}
.mbp .menubar span{font-weight:500}.mbp .menubar .r{margin-left:auto;display:flex;gap:9px;align-items:center;font-weight:500}
.mbp .menubar .clock{font-weight:500}.mbp .menubar .clock .day{font-weight:500}
/* The clock stays clear of the iPhone's edge (the iPhone covers the menu bar's last ~70 px). */
.mbp .menubar{padding-right:84px}
.mbp .win{position:absolute;left:5.5%;right:5.5%;top:24px;border-radius:9px;overflow:hidden;
  box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 14px 34px rgba(0,0,0,.35)}
.mbp .win img{display:block;width:100%}
.mbp .base{position:relative;height:16px;margin:0 -9%;border-radius:2px 2px 16px 16px;
  background:linear-gradient(#e8e8ea 0%,#c9c9cd 35%,#98989d 100%);box-shadow:0 1px 0 #f5f5f7 inset}
.mbp .base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:7px;transform:translateX(-50%);
  background:linear-gradient(#a7a7ac,#c3c3c7);border-radius:0 0 9px 9px}
.mbp .base::after{content:"";position:absolute;left:3%;right:3%;bottom:-5px;height:5px;border-radius:0 0 50% 50%;background:#6e6e73;opacity:.6}

/* iPad Pro, landscape */
.ipp{position:absolute;left:0;bottom:30px;width:500px;z-index:1;border-radius:30px;padding:13px;background:#0a0a0b;
  box-shadow:0 0 0 2px #3a3a3c,0 0 0 3.5px #8e8e93,0 40px 60px -20px rgba(0,0,0,.6)}
.ipp .scr{border-radius:18px;overflow:hidden;aspect-ratio:1.43}
.ipp img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.ipp .cam{position:absolute;left:5px;top:50%;width:5px;height:5px;border-radius:3px;background:#1c1c1e;transform:translateY(-50%)}

/* iPhone 17 Pro */
.i17{position:absolute;right:30px;bottom:-10px;width:246px;z-index:3;border-radius:50px;padding:9px;background:#050505;
  box-shadow:0 0 0 2px #2c2c2e,0 0 0 4.5px #8a8a8f,0 0 0 5.5px #c7c7cc,0 50px 70px -20px rgba(0,0,0,.7)}
.i17 .scr{position:relative;border-radius:42px;overflow:hidden}
.i17 img{display:block;width:100%}
.i17 .island{position:absolute;left:50%;top:9px;width:30%;height:20px;border-radius:12px;background:#000;transform:translateX(-50%);z-index:2}
.i17 .btn-r{position:absolute;right:-8px;top:150px;width:3px;height:64px;border-radius:2px;background:#8a8a8f}
.i17 .btn-l1{position:absolute;left:-8px;top:110px;width:3px;height:30px;border-radius:2px;background:#8a8a8f}
.i17 .btn-l2{position:absolute;left:-8px;top:152px;width:3px;height:46px;border-radius:2px;background:#8a8a8f}
.i17 .btn-l3{position:absolute;left:-8px;top:206px;width:3px;height:46px;border-radius:2px;background:#8a8a8f}

/* captions on the stage */
.tags{display:flex;justify-content:space-between;max-width:920px;margin:34px auto 0;padding-bottom:30px}
.tags span{font-size:14px;color:rgba(255,255,255,.7);display:inline-flex;align-items:center;gap:8px}
.tags b{color:#fff;font-weight:600}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.trio .t{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:10px}
.trio .t .k{display:flex;align-items:center;gap:10px;font:600 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.trio .t h3{font:400 28px var(--serif);margin:2px 0 0}
.trio .t p{color:var(--muted);font-size:15.5px}
.trio .t .btn{margin-top:auto;align-self:flex-start}
.trio .t .note{font-size:13px;color:var(--faint)}
.sync{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;color:var(--muted);font-size:15px}
.sync i{width:8px;height:8px;border-radius:4px;background:var(--teal);display:inline-block}
.platforms{display:flex;gap:18px;align-items:center;margin-top:14px;color:var(--muted);font-size:14px}
.platforms span{display:inline-flex;align-items:center;gap:6px}
.get .row2{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.get .btn.ghost2{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
@media (max-width: 900px){
  .dev-stage{padding:44px 24px 0;border-radius:24px}
  .tags{max-width:640px}
  .trio{grid-template-columns:1fr}}

/* Phones (Lucas, 1 Nov 17:50: "design it properly, don't just stack"): one composition, the MacBook the full width with
   the iPhone in front of its lower right at about 40% of the width, the iPad hidden. Drawn at 640 wide and scaled to the
   content width (site.js; the default fits a 390 wide phone), so the notch, the bottom case, the Dynamic Island and the
   side buttons all stay in proportion. */
@media (max-width: 699px){
  .dev-stage{padding:36px 22px 0;border-radius:22px}
  .dev-head .eyebrow{gap:14px;font-size:12px}
  .dev-head h2{font-size:31px;line-height:1.12;white-space:normal}
  .dev-head p{font-size:16px;line-height:1.5;margin-top:16px}
  .scene-wrap{margin-top:36px}
  .scene{width:640px;height:578px;zoom:var(--fit,.54)}
  .scene .floor{left:2%;right:2%;bottom:-24px}
  .ipp,.tags .t-ipad{display:none}
  /* Round 3 (Lucas, 1 Nov 18:05: "macOS 26, not a scaled-up toy"): the MacBook exactly as on a computer, the bar, the
     notch, the traffic lights, the window and the case all in the desktop's own sizes, scaled as one group. Nothing
     is resized on its own, so nothing can drift: the bar's words are as small and thin as on the desktop, with the
     wallpaper through the bar. Its case spans 920 (the lid 780 and 70 each side); at .674 it is the 620 of content
     width, the lid 526. */
  .mbp{left:57px;top:96px;bottom:auto;transform:scale(.674);transform-origin:top left}
  /* The bar simplified: the Apple, the app name and the time (moved left of the iPhone, which covers the bar's end). */
  .mbp .menubar span,.mbp .menubar .r svg,.mbp .menubar .clock .day{display:none}
  .mbp .menubar{padding-right:290px}
  /* The iPhone as on a computer too, scaled as one: 236 of the 640, about 37% of the width. */
  .i17{right:6px;top:24px;bottom:auto;transform:scale(.96);transform-origin:top right}
  /* Captions in two aligned columns (device, what it's for), centred as a block. */
  .tags{display:grid;justify-content:center;row-gap:6px;margin-top:28px;padding-bottom:26px}
  .tags span{display:grid;grid-template-columns:3.9em auto;column-gap:2px;white-space:nowrap;font-size:14px}}
/* "Get Office Hours" on phones (Lucas, 1 Nov 18:05): the two buttons stacked full width, the same height, font and
   padding. */
@media (max-width: 699px){
  .get > div:last-child,.get .row2{width:100%}
  .get .row2{flex-direction:column;align-items:stretch;gap:10px}
  .get .row2 .btn{width:100%;height:52px;padding:0 22px;font-size:16px;border:1px solid transparent;box-sizing:border-box}
  .get .row2 .btn.ghost2{border-color:rgba(255,255,255,.35)}}
.dev-head p{text-wrap:pretty}
.dev-head h2 .nb{white-space:nowrap}

.avail{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:8px 14px 8px 12px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.avail b{color:var(--ink);font-weight:600}
.avail .ic{display:inline-flex;gap:8px;color:var(--teal)}
.avail a{color:var(--teal);font-weight:600}
/* The device screens as WebP with a JPEG fallback (Lucas, 1 Nov 15:35): the <picture> takes no box of its own. */
.dev picture{display:contents}
.mbp .win img,.i17 img{height:auto}   /* (width and height attributes reserve the space; the width sets the size) */
/* Office Hours for iPhone and iPad (/iphone). */
#soon h2,#open h2{font:500 30px var(--serif)}