/* Fanlight's website. The look is the app icon's: a lit fanlight (amber glass, cream glazing bars)
   over a navy door, on cream paintwork. The hero is the fanlight itself, and the live demo sits in
   the door below it. Everything is styled from here: the page's policy refuses inline styles. */

:root {
  --cream: #FBF7EC;
  --cream-2: #F1EBDB;
  --cream-3: #E6DEC8;
  --navy: #131C38;
  --navy-2: #2A3A66;
  --ink: #343C5C;
  --muted: #4A5272;
  --muted-on-navy: #BFC4D8;
  --amber: #FFD36B;
  --amber-deep: #F5A11A;
  --brass: #9A5B00;
  --display: 'Bricolage Grotesque', 'Avenir Next Condensed', 'Helvetica Neue', sans-serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--cream); color: var(--navy); font-family: var(--sans); font-size: 18px; line-height: 1.6; }
::selection { background: var(--amber); color: var(--navy); }
img { display: block; }
a { color: var(--navy); }
a:hover { color: var(--brass); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--amber-deep); outline-offset: 3px; }
.door a:focus-visible, .door button:focus-visible { outline-color: var(--amber); }
h1, h2, h3, p { margin: 0; }

.display { font-family: var(--display); font-stretch: 78%; font-weight: 800; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1328px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The glazing bars, over every pane of glass. */
.bars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--cream); stroke-width: 10; }
.bars .hub { fill: var(--cream); stroke: none; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 30px; border-radius: 999px; font-size: 18px; font-weight: 700; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.btn .ic { width: 20px; height: 20px; }
.btn-small { min-height: 44px; padding: 0 20px; font-size: 16px; font-weight: 600; }
.btn-navy { background: var(--navy); color: var(--cream); }
.btn-navy:hover { color: var(--cream); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(19, 28, 56, .7); }
.btn-amber { background: var(--amber); color: var(--navy); }
.btn-amber:hover { color: var(--navy); transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(245, 158, 11, .75); }
.underline { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--amber-deep); }
.underline:hover { color: var(--navy); text-decoration-color: var(--navy); }

/* Header */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { color: var(--navy); }
.brand .display { font-size: 26px; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 28px; font-size: 16px; font-weight: 500; }
.nav-links a { padding: 10px 4px; border-bottom: 2px solid transparent; text-decoration: none; }
.nav-links a:hover { color: var(--navy); border-bottom-color: var(--amber-deep); }
@media (max-width: 820px) { .nav-links { display: none; } }

/* The fanlight: a pane of glass with a half-round top, lit from the hub at the foot. A height
   greater than half the width gives a true half circle with straight sides below it. */
.arch { position: relative; margin: 0 auto; overflow: hidden; border-radius: 9999px 9999px 0 0; text-align: center; background: radial-gradient(circle at 50% 100%, #FFF6CF 0%, #FFE59A 26%, #FFCB55 56%, var(--amber-deep) 100%); }
.arch > :not(svg):not(.dawn) { position: relative; z-index: 2; }

.hero { padding: 4px 24px 0; }
.hero-arch { max-width: 1280px; padding: clamp(118px, 17vw, 236px) 24px clamp(150px, 14vw, 180px); display: flex; flex-direction: column; align-items: center; gap: 26px; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px; border-radius: 999px; background: var(--navy); color: var(--cream); font-size: clamp(13px, 3.4vw, 15px); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.badge .ic { width: 20px; height: 20px; color: var(--amber); }
.badge-dot { color: var(--amber); }
.hero h1 { font-size: clamp(54px, 8.6vw, 128px); line-height: .9; letter-spacing: -.02em; text-wrap: balance; }
.lede { max-width: 660px; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: #222A47; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.actions .underline { font-weight: 600; text-decoration-color: rgba(19, 28, 56, .4); }
.meta { font-size: 13px; letter-spacing: .04em; color: #2A3352; }

/* The lights come on: the glass starts as dark as the door and brightens once. */
.dawn { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--navy); opacity: 0; animation: dawn 1.8s cubic-bezier(.4, 0, .2, 1) .15s both; }
@keyframes dawn { from { opacity: 1; } to { opacity: 0; } }
.glow { animation: hum 6s ease-in-out infinite; }
@keyframes hum { 0%, 100% { opacity: .9; } 50% { opacity: 1; } }

/* The door: navy, with a moulding line just inside its edge, below a cream sill. */
.door { background: var(--navy); color: var(--cream); border-radius: 0 0 10px 10px; box-shadow: inset 0 0 0 16px var(--navy), inset 0 0 0 17px rgba(251, 247, 236, .12); }
.door-wrap { padding: 22px 24px 0; }

/* The demo */
.demo { max-width: 1280px; margin: 0 auto; padding: clamp(44px, 6vw, 84px) clamp(24px, 5vw, 72px); display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: center; }
.demo-side { flex: 1 1 300px; min-width: 0; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }
.demo-side .kicker { color: var(--amber); }
.demo-side h2 { font-size: clamp(36px, 3.6vw, 52px); line-height: .95; letter-spacing: -.015em; }
.demo-intro { color: var(--muted-on-navy); font-size: 17px; }
.options { display: flex; flex-direction: column; gap: 8px; }
.option { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px; border-radius: 10px; border: 1px solid rgba(251, 247, 236, .16); background: transparent; color: var(--cream); font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
.option:hover { background: rgba(251, 247, 236, .06); }
.option > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.option strong { font-size: 17px; }
.option strong + span { font-size: 14px; color: var(--muted-on-navy); }
.option .dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(251, 247, 236, .5); transition: all .2s; }
.option[aria-pressed="true"] { border-color: var(--amber); background: rgba(255, 211, 107, .1); }
.option[aria-pressed="true"] .dot { border-color: var(--amber); background: var(--amber); box-shadow: inset 0 0 0 3px var(--navy); }
.toggle { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0; border: 0; background: none; color: var(--cream); font: inherit; font-weight: 600; cursor: pointer; }
.track { position: relative; flex: none; width: 52px; height: 30px; border-radius: 15px; background: rgba(251, 247, 236, .22); transition: background-color .25s; }
.track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); transition: transform .3s var(--ease), background-color .25s; }
.toggle[aria-pressed="true"] .track { background: var(--amber); }
.toggle[aria-pressed="true"] .track::after { transform: translateX(22px); background: var(--navy); }
.caption { min-height: 3.2em; font-size: 16px; color: #FFE7A3; }

/* The desktop in the demo. Everything inside is sized in container units, so the whole scene
   scales with its width. */
.demo-stage { flex: 999 1 560px; min-width: 0; }
.stage { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: linear-gradient(172deg, #3B4C86 0%, #2A3A66 38%, #5B4766 72%, #A8674A 100%); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(251, 247, 236, .16); }
.menubar { position: absolute; left: 0; right: 0; top: 0; z-index: 5; height: 3cqw; display: flex; align-items: center; gap: 2.4cqw; padding: 0 2cqw; background: rgba(251, 247, 236, .78); color: var(--navy); font-size: 1.25cqw; line-height: 1; }
.lights { display: flex; gap: .6cqw; }
.lights i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #FF5F57; }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.appwin { position: absolute; left: 3.5%; top: 8.5%; width: 67%; height: 86%; z-index: 2; border-radius: 1cqw; overflow: hidden; display: flex; flex-direction: column; background: #262B38; box-shadow: 0 2cqw 5cqw -1cqw rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1); }
.titlebar { flex: none; height: 3.4cqw; display: flex; align-items: center; gap: .7cqw; padding: 0 1.2cqw; background: #1D2233; color: var(--muted-on-navy); font-size: 1.15cqw; }
.titlebar > span:last-child { flex: 1; text-align: center; margin-right: 4cqw; }
.appwin > svg { flex: 1; width: 100%; min-height: 0; }
.svg-kicker { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; fill: var(--brass); }
.svg-display { font-family: var(--display); font-stretch: 80%; font-weight: 800; fill: var(--navy); }
.svg-initials { font-family: var(--sans); font-size: 22px; font-weight: 700; }
.svg-label { font-family: var(--sans); font-size: 11px; }

/* Each scene's parts show only while that scene is chosen. */
.for { display: none !important; }
.stage[data-scene="presenting"] .for-presenting,
.stage[data-scene="coding"] .for-coding,
.stage[data-scene="call"] .for-call,
.stage[data-scene="watching"] .for-watching { display: flex !important; }
.appwin > svg.for { display: none !important; }
.stage[data-scene="presenting"] .appwin > svg.for-presenting,
.stage[data-scene="coding"] .appwin > svg.for-coding,
.stage[data-scene="call"] .appwin > svg.for-call,
.stage[data-scene="watching"] .appwin > svg.for-watching { display: block !important; }

/* The floating window. Its buttons show only while the pointer is near them, and the band at its
   top is the page's own colour. With Float on Top off it slides behind the app. */
.flwin { position: absolute; right: 3.5%; top: 12.5%; width: 30%; height: 72%; z-index: 3; border-radius: 1cqw; overflow: hidden; display: flex; flex-direction: column; background: var(--cream); box-shadow: 0 3cqw 7cqw -1cqw rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .8s var(--ease), filter .8s; }
.stage[data-scene="coding"] .flwin { background: #0E1426; }
.stage[data-scene="watching"] .flwin { background: #05070F; }
.stage.sunk .flwin { z-index: 1; transform: translateX(-74%) scale(.95); filter: brightness(.55) saturate(.6); }
.flwin > .lights { position: absolute; left: 0; top: 0; padding: 1cqw 1.5cqw 1.5cqw 1cqw; z-index: 4; opacity: 0; transition: opacity .25s; }
/* The padding round the buttons is how near the pointer has to come, as in Fanlight. */
.flwin > .lights:hover, .mini > .lights:hover { opacity: 1; }
.band { flex: none; height: .8cqw; }
.flwin > .for { flex: 1; flex-direction: column; min-height: 0; }

.fl-script-box { position: relative; overflow: hidden; color: var(--navy); -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 82%, transparent); }
.fl-script { padding: 1.6cqw 2.2cqw; font-size: 1.95cqw; line-height: 1.5; font-weight: 600; animation: scroll 30s linear infinite; }
.fl-script p { margin: 0 0 1.6cqw; }
@keyframes scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.fl-status { gap: 1.2cqw; padding: 2.4cqw 2cqw 2cqw; color: var(--cream); font-size: 1.3cqw; line-height: 1.3; }
.fl-status-head { display: flex; flex-direction: column; gap: .4cqw; }
.fl-status-head strong { font-size: 2.6cqw; line-height: 1; }
.fl-status-head span { display: flex; align-items: center; gap: .6cqw; color: var(--muted-on-navy); }
.blue-dot { width: .9cqw; height: .9cqw; border-radius: 50%; background: #8FB4FF; }
.blue { color: #8FB4FF; }
.amber { color: var(--amber); }
.fl-row { display: flex; justify-content: space-between; padding: 1cqw 0; border-top: 1px solid rgba(251, 247, 236, .14); }
.fl-row-stack { flex-direction: column; gap: .8cqw; }
.fl-row-pair { display: flex; justify-content: space-between; }
.fl-meter { display: block; flex: 1; height: .8cqw; border-radius: .4cqw; background: rgba(251, 247, 236, .14); overflow: hidden; }
.fl-meter .fill { display: block; height: 100%; width: 60%; border-radius: .4cqw; background: var(--amber); animation: fill 5s ease-in-out infinite alternate; }
@keyframes fill { from { width: 22%; } to { width: 88%; } }
.fl-spark { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .6cqw; padding-top: 1cqw; border-top: 1px solid rgba(251, 247, 236, .14); color: var(--muted-on-navy); }
.fl-spark svg { width: 100%; height: 7cqw; }

.fl-chat { gap: 1.1cqw; padding: 2.4cqw 1.8cqw 1.8cqw; color: var(--navy); font-size: 1.3cqw; line-height: 1.35; }
.fl-chat > strong { font-size: 2.4cqw; line-height: 1; }
.msg { display: flex; flex-direction: column; gap: .3cqw; max-width: 85%; }
.msg span:first-child { font-size: 1.05cqw; font-weight: 700; color: var(--muted); }
.msg span:last-child { padding: .8cqw 1.1cqw; border-radius: 1cqw 1cqw 1cqw .2cqw; background: #ECE6D6; }
.msg-me { align-self: flex-end; align-items: flex-end; }
.msg-me span:last-child { border-radius: 1cqw 1cqw .2cqw 1cqw; background: var(--amber); }
.msg-box { margin-top: auto; padding: .9cqw 1.1cqw; border-radius: .8cqw; border: 1px solid rgba(19, 28, 56, .2); color: var(--muted); }

.fl-video { position: relative; overflow: hidden; }
.fl-video > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.live { position: absolute; right: 1.6cqw; top: 1.6cqw; display: flex; align-items: center; gap: .6cqw; padding: .4cqw 1cqw; border-radius: .5cqw; background: var(--amber); color: var(--navy); font-size: 1.1cqw; font-weight: 700; letter-spacing: .08em; }
.live i { width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--navy); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.fl-video-bar { position: absolute; left: 1.6cqw; right: 1.6cqw; bottom: 1.6cqw; display: flex; flex-direction: column; gap: 1cqw; color: var(--cream); font-size: 1.3cqw; }
.fl-video-bar > span { display: flex; align-items: center; gap: 1cqw; }
.fl-video-bar .fl-meter { height: .5cqw; background: rgba(251, 247, 236, .3); }
.play { width: 0; height: 0; border-left: 1.4cqw solid var(--cream); border-top: .85cqw solid transparent; border-bottom: .85cqw solid transparent; }

/* Features */
.features { padding-top: clamp(84px, 10vw, 140px); }
.section-head { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; justify-content: space-between; padding-bottom: 40px; border-bottom: 3px solid var(--navy); }
.section-head h2 { max-width: 900px; font-size: clamp(46px, 6.6vw, 100px); line-height: .9; letter-spacing: -.02em; text-wrap: balance; }
.section-head p { max-width: 340px; color: var(--muted); }
.feature { display: flex; flex-wrap: wrap; gap: 40px 72px; align-items: center; padding: clamp(48px, 6vw, 80px) 0; border-bottom: 1px solid rgba(19, 28, 56, .2); }
.feature-reverse { flex-direction: row-reverse; }
.feature-last { border-bottom: 0; }
.feature-text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.feature-text h3 { font-size: clamp(34px, 3.6vw, 54px); line-height: .95; letter-spacing: -.01em; }
.feature-text > p:not(.no) { max-width: 540px; color: var(--ink); }
.no { font-size: 14px; color: var(--brass); }
.tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--navy); font-size: 15px; font-weight: 600; }
.feature-art { flex: 1 1 420px; min-width: 0; max-width: 560px; }

.layers { position: relative; aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .layers { aspect-ratio: 1; } }
.layer { position: absolute; width: 64%; height: 52%; border-radius: 12px; padding: clamp(12px, 3vw, 18px); display: flex; flex-direction: column; }
.layer .mono { font-size: 13px; }
.layer-apps { left: 0; top: 42%; justify-content: flex-end; gap: 8px; background: var(--navy-2); color: var(--cream); }
.layer-apps i { height: 8px; width: 60%; border-radius: 4px; background: rgba(251, 247, 236, .3); }
.layer-apps i + i { width: 40%; }
.layer-slides { left: 17%; top: 22%; justify-content: flex-end; gap: 6px; background: #E9E0C8; box-shadow: 0 24px 40px -24px rgba(19, 28, 56, .6); }
.layer-slides .display { font-size: clamp(16px, 2vw, 24px); line-height: 1; }
.layer-fanlight { left: 38%; top: 0; width: 60%; height: 54%; overflow: hidden; justify-content: flex-end; background: radial-gradient(circle at 50% 100%, #FFF6CF 0%, var(--amber) 50%, var(--amber-deep) 100%); box-shadow: 0 30px 60px -20px rgba(245, 161, 26, .7), 0 0 0 2px var(--navy); }
.layer-fanlight .bars { stroke-width: 8; }
.layer-fanlight .mono { position: relative; font-weight: 500; }

.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--navy); background: transparent; color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.seg[aria-pressed="true"] { background: var(--navy); color: var(--cream); }
.band-art { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mini { position: relative; width: min(100%, 420px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--cream); box-shadow: 0 30px 60px -28px rgba(19, 28, 56, .75), 0 0 0 1.5px rgba(19, 28, 56, .25); transition: background-color .45s; }
.mini > .lights { position: absolute; left: 0; top: 0; padding: 12px 18px 18px 14px; z-index: 2; gap: 8px; opacity: 0; transition: opacity .25s; }
.mini > .lights i { width: 13px; height: 13px; }
.mini-band { height: 14px; border-bottom: 1.5px dashed rgba(245, 161, 26, .9); }
.mini-page { padding: 32px 30px; display: flex; flex-direction: column; gap: 14px; }
.mini-page i { display: block; border-radius: 5px; transition: background-color .45s; }
.mini-page .hd { height: 22px; width: 58%; background: var(--navy); }
.mini-page .ln { height: 10px; width: 92%; background: rgba(19, 28, 56, .16); }
.mini-page .ln + .ln { width: 84%; }
.mini-page .ln + .ln + .ln { width: 88%; }
.mini-page .ac { height: 40px; width: 38%; margin-top: 8px; border-radius: 999px; background: var(--amber-deep); }
.mini.dark { background: #161D33; }
.mini.dark .hd { background: var(--cream); }
.mini.dark .ln { background: rgba(251, 247, 236, .2); }
.mini.dark .ac { background: var(--amber); }
.note { font-size: 13px; color: var(--muted); text-align: center; }

.alert-art { display: flex; justify-content: center; }
.alert { width: min(100%, 380px); padding: 28px 24px 22px; border-radius: 16px; background: var(--cream-2); box-shadow: 0 30px 60px -28px rgba(19, 28, 56, .6), 0 0 0 1px rgba(19, 28, 56, .12); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.alert-part { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.alert-part[hidden] { display: none; }
.alert-title { font-size: 16px; font-weight: 700; line-height: 1.35; }
.alert-text { font-size: 14px; line-height: 1.45; color: var(--ink); }
.alert-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.alert-btn { min-height: 44px; padding: 0 16px; border-radius: 8px; border: 0; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.alert-primary { background: var(--navy); color: var(--cream); }
.alert-quiet { background: rgba(19, 28, 56, .1); color: var(--navy); }
.alert-outline { margin-top: 4px; background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }

/* The little things, each on a fanlight-shaped tile */
.smalls { padding-top: clamp(40px, 6vw, 72px); }
.smalls > h2 { margin-bottom: 40px; font-size: clamp(34px, 4vw, 56px); line-height: .95; letter-spacing: -.015em; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 28px; }
.tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 9999px 9999px 14px 14px; border: 2px solid var(--navy); transition: transform .35s var(--ease); }
.tile:hover { transform: translateY(-6px); }
.tile-glass { position: relative; height: 150px; background: radial-gradient(circle at 50% 100%, #FFF6CF 0%, var(--amber) 55%, var(--amber-deep) 100%); }
.tile-glass .bars { stroke-width: 9; }
.tile-ic { position: absolute; left: 50%; bottom: 8px; width: 28px; height: 28px; margin-left: -14px; color: var(--navy); }
.tile-body { padding: 24px 28px 30px; border-top: 6px solid var(--navy); }
.tile-body h3 { margin-bottom: 8px; font-size: 26px; line-height: 1.05; }
.tile-body p { font-size: 16px; color: var(--ink); }

/* Mac exclusive */
.mac { position: relative; overflow: hidden; margin-top: clamp(84px, 10vw, 140px); background: var(--navy); color: var(--cream); }
.mac-fan { position: absolute; right: -14%; bottom: 0; width: min(1100px, 120%); height: auto; fill: none; stroke: rgba(251, 247, 236, .07); stroke-width: 6; }
.mac-inner { position: relative; padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); display: flex; flex-direction: column; gap: 48px; }
.mac .kicker { margin-bottom: 18px; color: var(--amber); }
.mac h2 { font-size: clamp(56px, 9.5vw, 150px); line-height: .86; letter-spacing: -.025em; }
.mac h2 span { color: var(--amber); }
.mac-cols { display: flex; flex-wrap: wrap; gap: 40px 80px; align-items: flex-start; }
.mac-lede { flex: 1 1 380px; min-width: 0; max-width: 520px; font-size: clamp(18px, 1.5vw, 21px); color: #DADDEA; }
.spec { flex: 1 1 440px; min-width: 0; margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 32px; font-size: 17px; }
.spec dt, .spec dd { border-top: 1px solid rgba(251, 247, 236, .2); }
.spec dt:last-of-type, .spec dd:last-of-type { border-bottom: 1px solid rgba(251, 247, 236, .2); }
.spec dt { padding: 16px 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.spec dd { margin: 0; padding: 14px 0; }

/* Uses */
.uses { padding-top: clamp(84px, 10vw, 140px); }
.uses > h2 { margin-bottom: 16px; max-width: 900px; font-size: clamp(44px, 6vw, 88px); line-height: .9; letter-spacing: -.02em; text-wrap: balance; }
.uses-lede { margin-bottom: 48px; max-width: 560px; color: var(--muted); }
.use-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); column-gap: 48px; }
.use { padding: 24px 0 28px; border-top: 2px solid var(--navy); }
.use h3 { margin-bottom: 6px; font-size: 26px; line-height: 1.05; }
.use p { font-size: 16px; color: var(--ink); }
.pair { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 36px 56px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 16px; background: var(--cream-2); border: 2px solid var(--navy); }
.pair-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pair-text h3 { font-size: clamp(36px, 4vw, 56px); line-height: .95; }
.pair-text p:not(.kicker) { max-width: 520px; color: var(--ink); }
.pair-text .underline { align-self: flex-start; }
.pair-art { flex: 1 1 320px; min-width: 0; max-width: 460px; }
.bezel { height: 26px; border-radius: 14px 14px 0 0; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.bezel i { width: 9px; height: 9px; border-radius: 50%; background: #3B4C86; box-shadow: 0 0 0 3px #222C52; }
.screen { padding: 14px 0 28px; background: linear-gradient(var(--navy-2), #3B4C86); display: flex; justify-content: center; }
.prompt { width: 78%; padding: 18px 20px; border-radius: 10px; background: var(--cream); box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .6); font-size: 15px; font-weight: 600; line-height: 1.5; }
.prompt p + p { margin-top: 4px; }
.prompt .dim { opacity: .35; }

/* Getting started, and the menus */
.start { padding-top: clamp(84px, 10vw, 140px); display: flex; flex-wrap: wrap; gap: 56px 80px; align-items: flex-start; }
.start-steps { flex: 1 1 420px; min-width: 0; }
.start-steps h2 { margin-bottom: 32px; font-size: clamp(40px, 4.6vw, 68px); line-height: .92; letter-spacing: -.02em; }
.steps { margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--navy); }
.steps li { display: flex; gap: 24px; padding: 22px 0; border-top: 2px solid var(--navy); }
.step-n { flex: none; width: 56px; font-size: 56px; line-height: .85; color: var(--amber-deep); }
.steps strong { display: block; font-size: 20px; }
.steps strong + span { font-size: 16px; color: var(--ink); }
.start-menus { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.start-menus h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1; }
.start-menus > p { font-size: 16px; color: var(--muted); }
.menus { border-radius: 14px; overflow: hidden; background: var(--cream-2); box-shadow: 0 0 0 2px var(--navy); }
.menu-titles { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--cream-3); border-bottom: 2px solid var(--navy); }
.menu-title { min-height: 44px; padding: 0 clamp(9px, 2.4vw, 14px); border: 0; border-radius: 8px; background: transparent; color: var(--navy); font: inherit; font-weight: 500; cursor: pointer; }
.menu-title:hover { background: rgba(19, 28, 56, .07); }
.menu-title[aria-pressed="true"] { background: var(--navy); color: var(--cream); font-weight: 600; }
.menu-body { min-height: 196px; padding: 10px; font-size: 17px; }
.menu-list { margin: 0; padding: 0; list-style: none; }
.menu-list[hidden] { display: none; }
.menu-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 8px; }
.menu-list li.sep { height: 1px; margin: 4px 14px; padding: 0; border-radius: 0; background: rgba(19, 28, 56, .18); }
.menu-list li.ticked { background: var(--navy); color: var(--cream); }
.menu-list li.ticked > span { display: flex; gap: 10px; }
.tick { color: var(--amber); }
.menu-list kbd, .menu-list .from { font-size: 15px; color: var(--muted); white-space: nowrap; }

/* Questions */
.faq { padding-top: clamp(84px, 10vw, 140px); display: flex; flex-wrap: wrap; gap: 32px 80px; align-items: flex-start; }
.faq > h2 { flex: 1 1 300px; min-width: 0; font-size: clamp(44px, 5.4vw, 80px); line-height: .9; letter-spacing: -.02em; }
.faq-list { flex: 999 1 560px; min-width: 0; border-bottom: 2px solid var(--navy); }
.faq-list details { border-top: 2px solid var(--navy); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 18px 0; font-size: clamp(19px, 1.8vw, 23px); font-weight: 600; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details p { padding: 0 min(56px, 8%) 24px 0; color: var(--ink); }
.plus { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--navy); transition: transform .3s, background-color .2s; }
.plus::before, .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--navy); }
.plus::after { transform: rotate(90deg); }
summary:hover .plus { background: var(--amber); }
details[open] .plus { transform: rotate(45deg); background: var(--amber); }

/* The closing doorway */
.cta { padding: clamp(96px, 11vw, 160px) 24px 0; }
.cta-arch { max-width: 860px; padding: clamp(100px, 13vw, 150px) 24px clamp(90px, 9vw, 110px); }
.cta-arch h2 { font-size: clamp(52px, 8vw, 112px); line-height: .88; letter-spacing: -.02em; }
.cta-door { max-width: 860px; margin: 22px auto 0; padding: clamp(36px, 5vw, 56px) 24px; box-shadow: inset 0 0 0 14px var(--navy), inset 0 0 0 15px rgba(251, 247, 236, .12); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.cta-door > p:first-child { max-width: 460px; color: #DADDEA; }
.cta-door .meta { color: var(--muted-on-navy); }

/* Footer */
.footer { padding-top: 72px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--muted); }
.footer > span:last-child { max-width: 560px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.footer-brand strong { font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}