/* LuneBook site: the social kit's night look (midnight to plum sky, Poppins, cream and gold). */
:root {
  --plum: #8E2A5E; --plum-hi: #A3356E; --gold: #D4A24C; --gold-lt: #E9C783; --cream: #FBF3EA;
  --midnight: #1B1030; --deep: #2A0F24; --deep2: #34102C; --mauve: #E6CADB;
  --ink: #241A2C; --muted: #6B5F73; --card: #ffffff;
  --shadow: 0 2px 6px rgba(10, 4, 16, 0.25), 0 30px 70px rgba(10, 4, 16, 0.45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--midnight); scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--midnight); color: var(--cream); font: 400 17px/1.6 Poppins, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; }
p { margin: 0; }
img { display: block; max-width: 100%; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; position: relative; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--cream); color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* Night sections: down (midnight to plum) and up (plum to midnight) alternate, so the seams match. */
.night { position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 60% 55%, rgba(142, 42, 94, 0.30), transparent 70%), linear-gradient(180deg, #1B1030 0%, #2A0F24 70%, #34102C 100%); }
.night.up { background: radial-gradient(ellipse 60% 55% at 40% 45%, rgba(142, 42, 94, 0.26), transparent 70%), linear-gradient(180deg, #34102C 0%, #2A0F24 30%, #1B1030 100%); }
.cream { background: var(--cream); color: var(--ink); }

/* Sparse sky: a few slim four-point sparkles and faint dots toward the edges; never one beside the moon. */
.spark { position: absolute; width: var(--s, 12px); height: var(--s, 12px); opacity: var(--o, 0.9); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 2 2'%3E%3Cpath fill='%23E9C783' d='M0-1C.07-.12.12-.07 1 0 .12.07.07.12 0 1-.07.12-.12.07-1 0-.12-.07-.07-.12 0-1Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.dot { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-lt); opacity: var(--o, 0.35); pointer-events: none; }
.moon { position: absolute; width: var(--m, 90px); aspect-ratio: 1; pointer-events: none; filter: drop-shadow(0 0 22px rgba(212, 162, 76, 0.3));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23E2B25C'/%3E%3Cstop offset='1' stop-color='%23C8933F'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Ccircle cx='66' cy='38' r='40' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='46' fill='url(%23g)' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Top bar: lies over the first section's sky */
.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.topbar.open { background: #1B1030; box-shadow: var(--shadow); }
main > section:first-child { padding-top: 76px; }
/* Once you've scrolled past it, the top bar slides back in when you scroll up and tucks away when you scroll down.
   At the very top it is the usual bar over the sky, so the first screen and the fold never change. */
.topbar.pinned { position: fixed; transform: translateY(-100%); background: rgba(27, 16, 48, 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.topbar.pinned:not(.show) { transform: translateY(calc(-100% - 4px)); } /* fully out of sight, shadow and all */
.topbar.pinned.anim { transition: transform .28s ease, box-shadow .28s ease; }
.topbar.pinned.show { transform: none; box-shadow: 0 1px 0 rgba(233, 199, 131, 0.18), 0 10px 30px rgba(10, 4, 16, 0.35); }
.topbar.pinned .top { height: 64px; }
.topbar.pinned .top .logo img { height: 30px; }
/* The phone menu opens from it, so it lets go of the blur (which would trap the menu inside the bar) */
.topbar.pinned.open { transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: #1B1030; }
.top { display: flex; align-items: center; gap: 28px; height: 76px; position: relative; z-index: 10; }
.top .logo img { height: 34px; width: auto; }
.top nav { display: flex; gap: 6px; font-size: 15px; font-weight: 500; color: var(--mauve); }
.top nav > a, .drop > button { padding: 10px 12px; border-radius: 10px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.top nav > a:hover, .drop > button:hover, .drop:focus-within > button { color: var(--cream); }
.drop > button::after { content: ""; display: inline-block; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg); margin: 0 0 3px 9px; transition: transform .2s ease; }
.drop:hover > button::after, .drop:focus-within > button::after { transform: rotate(225deg) translate(-2px, -2px); }

/* Mega menus: a wide cream panel under the top bar that fades and rises in */
.mega { position: absolute; top: calc(100% - 4px); left: 50%; width: min(1144px, calc(100% - 96px)); z-index: 20;
  background: #FFFCF9; color: var(--ink); border-radius: 26px; padding: 28px 28px 22px; display: grid; gap: 8px 28px;
  box-shadow: 0 0 0 1px rgba(212, 162, 76, 0.28), 0 24px 60px rgba(10, 4, 16, 0.35);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; } /* keeps it open while the pointer moves down */
.drop:hover .mega, .drop:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease, transform .2s ease; }
.mega.feat { grid-template-columns: repeat(4, 1fr); }
/* Smart help sits on a blush wash, so the newest tools stand out */
.mega .grp.smart { background: linear-gradient(170deg, #FBEFF4, #F6E2EC); border-radius: 18px; padding: 14px 6px 6px; margin: -14px -6px 0; }
.mega .grp.smart .ic { background: #fff; }
.mega .grp b .new { margin-left: 6px; padding: 1px 7px; font-size: 10px; }
.mega.pros { grid-template-columns: 2fr 1fr 280px; }
.mega.pros .end-row { grid-column: 1 / -2; }
.mega h5 { margin: 0 0 8px 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #B0813A; }
.mega .grp.two > div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; }
.mega .grp a { display: flex; gap: 13px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; transition: background .15s ease; }
.mega .grp a:hover, .mega .grp a:focus-visible { background: #FBEFF4; }
.mega .grp b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.mega .grp small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 2px; }
.mega .ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #F7E4EE; transition: background .15s ease; }
.mega .ic svg { width: 20px; height: 20px; fill: none; stroke: var(--plum); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s ease; }
.mega .grp a:hover .ic { background: var(--plum); }
.mega .grp a:hover .ic svg { stroke: #fff; }

/* The spotlight card on the right: blush, with a peek at the screen */
.mega .spot { grid-column: -2; grid-row: 1 / span 2; position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 20px; padding: 22px 22px 0; color: var(--ink);
  background: radial-gradient(ellipse 80% 45% at 75% 0%, rgba(255, 236, 200, 0.9), transparent 70%), linear-gradient(165deg, #FBEFF4 0%, #F1D2E2 60%, #E7B9D0 100%); }
.mega .spot .new { align-self: flex-start; margin: 0 0 10px; }
.mega .spot b { font-size: 19px; font-weight: 700; }
.mega .spot small { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 4px; }
.mega .spot img { width: 86%; margin: 18px auto 0; flex: 1 1 110px; min-height: 0; object-fit: cover; object-position: top; border-radius: 14px 14px 0 0;
  box-shadow: 0 0 0 1px rgba(142, 42, 94, 0.1), 0 10px 30px rgba(110, 31, 76, 0.28); transition: transform .25s ease; }
.mega .spot:hover img { transform: translateY(-4px); }
.mega .spot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(180deg, transparent, rgba(231, 185, 208, 0.95)); }
.mega .spot em { position: absolute; left: 22px; bottom: 16px; z-index: 1; font-style: normal; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--plum); padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 16px rgba(142, 42, 94, 0.35); }
.mega .spot em::after, .mega .all::after { content: " \2192"; }
.mega .end-row { grid-column: 1 / -1; border-top: 1px solid #F1E4EA; padding: 14px 12px 0; margin-top: 6px; }
.mega .all { font-size: 14px; font-weight: 600; color: var(--plum); }
.top .grow { flex: 1; }
.top .signin { font-size: 15px; font-weight: 500; color: var(--cream); }
.menu { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(251, 243, 234, 0.25); background: none; align-items: center; justify-content: center; cursor: pointer; }
.menu span, .menu span::before, .menu span::after { display: block; width: 18px; height: 2px; background: var(--cream); border-radius: 2px; position: relative; }
.menu span::before, .menu span::after { content: ""; position: absolute; left: 0; }
.menu span::before { top: -6px; } .menu span::after { top: 6px; }
.sheet { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: 999px;
  font: 600 16px Poppins, sans-serif; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.plum { background: var(--plum); color: #fff; box-shadow: 0 0 0 1px rgba(233, 199, 131, 0.28), 0 8px 24px rgba(142, 42, 94, 0.45); }
.btn.line { border: 1.5px solid rgba(251, 243, 234, 0.45); color: var(--cream); }
.cream .btn.line { border-color: rgba(36, 26, 44, 0.3); color: var(--ink); }
.btn.sm { height: 42px; padding: 0 20px; font-size: 15px; }

/* Type */
.kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.rule { width: 72px; height: 2px; background: var(--gold); border-radius: 2px; margin: 22px 0; }
.center .rule { margin-left: auto; margin-right: auto; }
.lead { color: var(--mauve); font-size: 18px; max-width: 540px; }
.cream .lead { color: var(--muted); }
.center { text-align: center; }
.center .lead { margin: 0 auto; }
.buttons { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.center .buttons { justify-content: center; }
.note { color: rgba(230, 202, 219, 0.75); font-size: 14px; margin-top: 18px; }
.prose { max-width: 720px; color: var(--mauve); font-size: 18px; }
.prose p + p { margin-top: 18px; }
.prose a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 3px; }

/* Devices */
.laptop { position: relative; }
.laptop .lid { border-radius: 18px 18px 8px 8px; padding: 9px; border: 2px solid transparent;
  background: linear-gradient(#0E0A12, #0E0A12) padding-box, linear-gradient(170deg, #E9E5EC 0%, #8C8594 40%, #CFC9D4 70%, #7A7383 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), var(--shadow); }
.laptop .bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; background: #f3f1f4; border-radius: 8px 8px 0 0; }
.laptop .bar i { width: 8px; height: 8px; border-radius: 50%; background: #d9d3de; }
.laptop .bar b { margin: 0 auto; font: 500 11px Poppins, sans-serif; color: #8a8392; background: #fff; border-radius: 6px; padding: 1px 40px; }
.laptop .lid img { width: 100%; height: auto; border-radius: 0 0 6px 6px; }
.laptop .base { height: 16px; margin: 0 -7%; background: linear-gradient(180deg, #E4DEE8, #9A93A3); border-radius: 2px 2px 18px 18px; position: relative; }
.laptop .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; transform: translateX(-50%); background: #8d8399; border-radius: 0 0 8px 8px; }
/* Phones: black glass with a thin brushed-metal band around the edge, as real phones are, so they show on the night sky */
.phone { container-type: inline-size; border-radius: 15% / 7%; position: relative; border: 3px solid transparent;
  background: linear-gradient(#0E0A12, #0E0A12) padding-box, linear-gradient(150deg, #F2EFF4 0%, #8C8594 30%, #DCD7E0 55%, #6F6878 80%, #C9C3CF 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), var(--shadow); }
/* Sized from the phone's own width, so a small phone looks like a big one: even bezel, real corners,
   and a status bar with the time and the camera pill, in the color of the screen below it */
.phone.sm { border-width: 2px; }
.phone .scr { container-type: inline-size; margin: 3.4cqw; overflow: hidden; border-radius: 12.5% / 5.6%; background: var(--top); }
.phone .scr img { display: block; width: 100%; height: auto; }
.sbar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 11.5cqw; padding: 1.2cqw 7.5cqw 0 9cqw; color: #1e1a23; }
.sbar.light { color: #fff; }
.sbar b { font: 600 4.1cqw/1 -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -0.01em; }
.sbar i { position: absolute; left: 50%; top: 2.6cqw; width: 27cqw; height: 7.6cqw; transform: translateX(-50%); border-radius: 4cqw; background: #000; }
.sbar svg { width: 16cqw; height: 3cqw; fill: currentColor; }

/* Photos: graded clean and true beforehand; here only a soft vignette and a gold rim */
.photo { position: relative; overflow: hidden; border-radius: 28px; background: var(--deep);
  box-shadow: 0 0 0 1px rgba(233, 199, 131, 0.4), 0 30px 70px rgba(10, 4, 16, 0.5); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 60%, rgba(27, 16, 48, 0.3)), linear-gradient(180deg, transparent 65%, rgba(27, 16, 48, 0.55)); }
.cream .photo { box-shadow: 0 0 0 1px rgba(212, 162, 76, 0.5), 0 18px 40px rgba(60, 20, 50, 0.25); }
.photo .cap { position: absolute; left: 20px; bottom: 18px; z-index: 1; font-weight: 600; font-size: 18px; color: var(--cream); }
a.photo { transition: transform .2s ease; }
a.photo:hover { transform: translateY(-3px); }
/* A soft glow of light behind devices and photos */
.glow { position: relative; }
.glow::before { content: ""; position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 45% at 60% 45%, rgba(230, 202, 219, 0.12), transparent 70%),
              radial-gradient(ellipse 60% 55% at 35% 65%, rgba(163, 53, 110, 0.5), transparent 70%); filter: blur(10px); }
.glow > * { z-index: 1; }

/* Hero */
.hero { display: grid; grid-template-columns: 1fr; gap: 48px; padding: 36px 0 72px; position: relative; z-index: 2; }
.hero h1 { font-size: 42px; }
/* Phones wrap hero titles as usual; a break we added for laptops is dropped */
.hero h1 .two.auto br { display: none; }
.hero.solo { padding-bottom: 56px; }
.stage { position: relative; }
/* Photo with a laptop and a phone (Home): the screens sit together low on the left, so her face and phone stay in view */
.stage.pld { aspect-ratio: 1 / 0.8; }
.stage.pld .photo { position: absolute; right: 0; top: 0; width: 60%; aspect-ratio: 4 / 5; }
.stage.pld .laptop { position: absolute; left: 0; bottom: 3%; width: 58%; }
.stage.pld .phone { position: absolute; left: 51%; bottom: 0; width: 17%; z-index: 2; }
/* Photo with two phones (feature and pro pages) */
.stage.pp { aspect-ratio: 1 / 0.86; }
.stage.pp .photo { position: absolute; left: 0; top: 0; width: 68%; height: 100%; }
.stage.pp .phone { position: absolute; width: 31%; }
.stage.pp .p1 { right: 16%; bottom: -4%; z-index: 2; }
.stage.pp .p2 { right: 0; top: 4%; z-index: 1; }
/* Laptop with a phone (feature pages) */
.stage.lp { padding: 4% 8% 6% 0; }
.stage.lp .phone { position: absolute; right: 0; bottom: 0; width: 25%; z-index: 2; }

/* Sections */
.part { padding: 72px 0; position: relative; z-index: 2; }
.part h2 { font-size: 32px; }
.split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; color: var(--mauve); }
.ticks li { display: flex; gap: 12px; }
.ticks a { color: var(--cream); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(233, 199, 131, 0.6); text-underline-offset: 4px; }
.ticks a:hover { color: var(--gold-lt); }
.ticks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: rgba(212, 162, 76, 0.16)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23E9C783' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.cream .ticks { color: var(--muted); }
.cream .ticks li::before { background-color: rgba(142, 42, 94, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%238E2A5E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pair { display: flex; gap: 22px; justify-content: center; align-items: flex-start; }
.pair .phone { width: 46%; max-width: 270px; }
.pair .phone:nth-child(2) { margin-top: 56px; }
.single { display: flex; justify-content: center; }
.single .phone { width: 62%; max-width: 300px; }

/* Feature cards: white, like the kit's 4-up post */
.cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 44px; }
.card { background: var(--card); color: var(--ink); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .2s ease; }
a.card:hover { transform: translateY(-3px); }
/* The screen floats on a bright blush stage with a warm light, so it stands out */
.card .shot { height: 250px; overflow: hidden; display: flex; justify-content: center; padding-top: 28px; position: relative;
  background: radial-gradient(ellipse 70% 60% at 50% 12%, rgba(255, 236, 200, 0.85), transparent 70%),
              radial-gradient(ellipse 80% 70% at 90% 100%, rgba(194, 84, 142, 0.55), transparent 70%),
              linear-gradient(160deg, #F7E4EE 0%, #EDC6DA 55%, #DFA6C4 100%); }
.card .shot img { width: 76%; height: auto; align-self: flex-start; border-radius: 16px 16px 0 0; position: relative; z-index: 1;
  box-shadow: 0 0 0 1px rgba(142, 42, 94, 0.12), 0 16px 36px rgba(110, 31, 76, 0.32); transition: transform .25s ease; }
a.card:hover .shot img { transform: translateY(-4px) scale(1.02); }
.card .say { padding: 22px 24px 24px; }
.card h3 { font-size: 20px; }
.card p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.card .more { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--plum); }
.card .more::after { content: " \2192"; }
.new { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; background: var(--plum); color: #fff; }
/* Beside a gold kicker on the night sky it is a gold outline */
.night .kicker .new { background: transparent; color: var(--gold-lt); box-shadow: inset 0 0 0 1px var(--gold-lt); }

/* Small cards without screens */
.facts { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
.fact { border: 1px solid rgba(233, 199, 131, 0.22); background: rgba(251, 243, 234, 0.04); border-radius: 20px; padding: 22px 24px; }
.fact strong { display: block; font-size: 18px; }
.fact span { display: block; color: var(--mauve); font-size: 15px; }
.cream .fact { background: #fff; border-color: rgba(142, 42, 94, 0.12); box-shadow: 0 10px 30px rgba(60, 20, 50, 0.08); }
.cream .fact span { color: var(--muted); }
a.fact { position: relative; padding-right: 56px; transition: border-color .2s ease; }
a.fact:hover { border-color: rgba(233, 199, 131, 0.5); }
a.fact::after { content: "\2192"; color: var(--gold); position: absolute; right: 24px; top: 20px; font-size: 20px; }

/* Who it's for */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.tiles .photo { aspect-ratio: 4 / 5; border-radius: 22px; }
.tiles .photo .cap { font-size: 15px; left: 14px; bottom: 12px; right: 12px; line-height: 1.25; }

/* Chips */
.apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.apps span, .apps a { border: 1px solid rgba(233, 199, 131, 0.4); color: var(--gold-lt); border-radius: 999px; padding: 8px 18px; font-size: 15px; font-weight: 500; }
.center .apps { justify-content: center; }

/* Steps */
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 34px; text-align: left; }
.step { display: flex; gap: 14px; align-items: flex-start; background: rgba(251, 243, 234, 0.05); border: 1px solid rgba(233, 199, 131, 0.18); border-radius: 18px; padding: 18px 20px; }
.step b { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--midnight); display: grid; place-items: center; font-size: 14px; }
.step strong { display: block; font-weight: 600; }
.step span { display: block; color: var(--mauve); font-size: 15px; }
/* Three phones in a row */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.three figure { margin: 0; text-align: center; }
.three figcaption { margin-top: 18px; font-weight: 600; font-size: 15px; }
.three figcaption b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--midnight); font-size: 13px; margin-right: 8px; }

/* Footer */
.foot { background: #150c22; color: var(--mauve); padding: 56px 0 40px; font-size: 15px; }
.foot .cols { display: grid; grid-template-columns: 1fr; }
.foot .brand img { height: 32px; width: auto; }
.foot .brand p { margin-top: 14px; max-width: 290px; font-size: 14px; }
.foot summary { color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; list-style: none; }
.foot summary::-webkit-details-marker { display: none; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; }
.foot .two { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.foot a:hover { color: var(--cream); }
.foot .legal { border-top: 1px solid rgba(233, 199, 131, 0.15); margin-top: 44px; padding-top: 22px; font-size: 13px; color: rgba(230, 202, 219, 0.6); }

/* Phone only */
@media (max-width: 899px) {
  .top { gap: 10px; height: 68px; }
  .top nav, .top .signin { display: none; }
  .top .logo img { height: 28px; }
  .menu { display: flex; }
  /* The phone menu: fills the screen under the top bar, scrolls on its own, buttons within thumb reach */
  .topbar.open { position: fixed; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .topbar.open .sheet { display: flex; flex-direction: column; position: fixed; top: 68px; left: 0; right: 0; bottom: 0; z-index: 9;
    background: radial-gradient(ellipse 80% 40% at 80% 0%, rgba(142, 42, 94, 0.28), transparent 70%), #1B1030; border-top: 1px solid rgba(251, 243, 234, 0.08); }
  .sheet-in { flex: 1; overflow-y: auto; overscroll-behavior: contain; width: 100%; padding-top: 4px; padding-bottom: 20px; }
  .acc, .m-row { border-bottom: 1px solid rgba(251, 243, 234, 0.1); }
  .acc summary, .m-row { display: flex; align-items: center; justify-content: space-between; min-height: 58px; color: var(--cream); font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
  .acc summary::-webkit-details-marker { display: none; }
  .acc summary::after, .m-row::after { content: ""; width: 8px; height: 8px; margin-right: 6px; border: solid var(--gold-lt); border-width: 0 1.8px 1.8px 0; transition: transform .2s ease; }
  .acc summary::after { transform: rotate(45deg) translate(-2px, -2px); }
  .acc[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
  .m-row::after { transform: rotate(-45deg); }
  .acc[open] { padding-bottom: 14px; }
  .m-grp h5 { margin: 10px 0 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
  .m-grp a { display: flex; gap: 13px; align-items: center; padding: 9px 0; }
  .m-grp .ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(251, 243, 234, 0.06); border: 1px solid rgba(233, 199, 131, 0.22); }
  .m-grp .ic svg { width: 19px; height: 19px; fill: none; stroke: var(--gold-lt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .m-grp b { display: block; color: var(--cream); font-size: 15px; font-weight: 600; line-height: 1.3; }
  .m-grp b .new { margin-left: 6px; padding: 1px 7px; font-size: 10px; }
  .m-grp small { display: block; color: var(--mauve); font-size: 13px; line-height: 1.4; opacity: .85; }
  .m-grp.smart { margin: 12px -12px 0; padding: 4px 12px 6px; border-radius: 16px; background: rgba(163, 53, 110, 0.2); }
  .m-all { display: inline-block; margin-top: 12px; color: var(--gold-lt); font-size: 15px; font-weight: 600; }
  .m-all::after { content: " \2192"; }
  /* A spotlight on what's new, so the open menu feels full and balanced */
  .sheet-in { display: flex; flex-direction: column; }
  .sheet-in > * { flex-shrink: 0; } /* a long open list scrolls; nothing in it gets squashed */
  .m-row[href="/contact"] { margin-bottom: 24px; }
  .m-spot { margin-top: auto; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 34%; gap: 14px; align-items: start;
    padding: 18px 0 0 18px; border-radius: 20px; border: 1px solid rgba(233, 199, 131, 0.25);
    background: radial-gradient(ellipse 80% 60% at 90% 0%, rgba(233, 199, 131, 0.28), transparent 70%), linear-gradient(160deg, #8E2A5E, #4A1538 75%); }
  .m-spot > span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 18px; }
  .m-spot .new { margin: 0 0 4px; background: transparent; color: var(--gold-lt); box-shadow: inset 0 0 0 1px var(--gold-lt); }
  .m-spot b { color: var(--cream); font-size: 17px; font-weight: 700; }
  .m-spot small { color: var(--mauve); font-size: 13px; line-height: 1.4; }
  .m-spot em { margin-top: 8px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--gold-lt); }
  .m-spot em::after { content: " \2192"; }
  .m-spot img { width: 100%; height: 150px; object-fit: cover; object-position: top; border-radius: 12px 0 0 0; box-shadow: -6px 6px 24px rgba(10, 4, 16, 0.45); }
  /* The page you're on, in gold */
  .m-grp a[aria-current] b, .m-row[aria-current] { color: var(--gold-lt); }
  .m-grp a[aria-current] .ic { background: rgba(233, 199, 131, 0.18); border-color: var(--gold-lt); }
  /* It glides in, and sections fade open */
  .topbar.open .sheet { animation: sheet-in .22s ease-out; }
  .topbar.pinned .top { height: 58px; }
  .topbar.pinned .top .logo img { height: 26px; }
  .topbar.pinned.open .sheet { top: 58px; }
  .acc[open] > :not(summary) { animation: fold-in .25s ease-out; }
  .m-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(251, 243, 234, 0.1); background: #1B1030; }
  .m-cta .btn { width: 100%; height: 50px; padding: 0 12px; }
  /* The menu button turns into an X while the menu is open */
  .menu span, .menu span::before, .menu span::after { transition: transform .2s ease, background .2s ease, top .2s ease; }
  .top.open .btn.plum { visibility: hidden; } /* Sign up waits at the bottom while the menu is open */
  .top.open .menu span { background: transparent; }
  .top.open .menu span::before { top: 0; transform: rotate(45deg); }
  .top.open .menu span::after { top: 0; transform: rotate(-45deg); }
  .hero .buttons .btn, .end .buttons .btn { flex: 1; }
  .spark, .dot { display: none; }
  .spark.ph, .dot.ph { display: block; }
  .moon { --m: 46px !important; top: 26px !important; right: 18px !important; left: auto !important; bottom: auto !important; }
  .card .shot { height: 210px; }
  .laptop .base { margin: 0 -3%; }
  .laptop .bar { height: 16px; } .laptop .bar b { display: none; } .laptop .bar i { width: 5px; height: 5px; }
  .laptop .lid { padding: 6px; border-radius: 12px 12px 6px 6px; }
  .laptop .base { height: 10px; }
  .stage .phone, .three .phone { border-width: 1.5px; }
  .stage .photo { border-radius: 20px; }
  /* Even spacing between sections, and headings that never leave one word alone on the last line */
  .part { padding: 60px 0; }
  .hero { padding-bottom: 60px; }
  .hero.solo { padding-bottom: 44px; }
  .part:has(> .moon) { padding-top: 88px; } /* room for the moon above the heading */
  h1, h2, h3 { text-wrap: balance; }
  .hero h1 { text-wrap: pretty; }
  /* Long rows of cards and phones become a row you swipe through, with the next one peeking in */
  .cards.swipe, .three { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: -16px; margin-right: -16px; padding: 0 16px 44px; margin-bottom: -44px; scroll-padding: 0 16px; }
  .cards.swipe::-webkit-scrollbar, .three::-webkit-scrollbar { display: none; }
  .cards.swipe > .card { flex: 0 0 84%; scroll-snap-align: start; }
  .cards.swipe .card .shot { height: 230px; }
  .three { margin-top: 40px; }
  .three figure { flex: 0 0 58%; scroll-snap-align: start; }
  /* Photo names stay readable on bright photos */
  .tiles .photo::after { background: linear-gradient(180deg, transparent 45%, rgba(27, 16, 48, 0.78)); }
  .tiles .photo .cap { text-shadow: 0 1px 8px rgba(27, 16, 48, 0.5); }
  /* Footer: each link group folds, so the page ends neatly and every link is easy to tap */
  .foot { padding-top: 44px; }
  .foot .brand { margin-bottom: 22px; }
  .foot details { border-top: 1px solid rgba(233, 199, 131, 0.15); }
  .foot summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; }
  .foot summary::after { content: ""; width: 7px; height: 7px; margin-right: 6px; border: solid var(--gold-lt); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
  .foot details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
  .foot ul { grid-template-columns: 1fr 1fr; column-gap: 20px; padding-bottom: 14px; }
  .foot .two { column-gap: 20px; padding-bottom: 14px; } .foot .two ul { grid-template-columns: 1fr; padding-bottom: 0; }
  .foot details[open] > ul, .foot details[open] .two { animation: fold-in .25s ease-out; }
  .foot ul a { display: block; padding: 9px 0; line-height: 1.35; }
  .foot .legal { margin-top: 0; }
}

/* Laptop */
@media (min-width: 900px) {
  .wrap { padding: 0 48px; }
  .hero { grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 56px 0 72px; align-items: center; }
  /* The hero fills the first screen, so the next section (and its moon) starts below the fold */
  .hero:not(.solo) { min-height: calc(100svh - 76px); }
  .hero h1 { font-size: 52px; }
  /* Hero titles are two lines at most; a long one is sized by its longer line (--fit letters) so it fits */
  .hero h1 .two.auto br { display: inline; }
  .hero h1 .two { display: block; white-space: nowrap; font-size: min(52px, calc(min(570px, 52.4vw - 80px) / (0.54 * var(--fit)))); }
  .hero.solo { grid-template-columns: 1fr; padding: 72px 0 64px; }
  .hero.solo h1 { font-size: 60px; max-width: 900px; }
  .hero.solo h1 .two { font-size: min(60px, calc(min(900px, 100vw - 96px) / (0.54 * var(--fit)))); }
  .part { padding: 92px 0; }
  .part h2 { font-size: 44px; }
  .split { grid-template-columns: 1fr 1fr; gap: 80px; }
  .split.flip > .pic { order: -1; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .facts { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .tiles { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .tiles.five { grid-template-columns: repeat(5, 1fr); }
  .tiles .photo .cap { font-size: 19px; left: 22px; bottom: 18px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .three { gap: 48px; max-width: 900px; margin-left: auto; margin-right: auto; }
  .three figcaption { font-size: 17px; }
  .foot .cols { grid-template-columns: 1.3fr 1fr 1fr 1fr 0.8fr; gap: 32px 24px; }
  .foot summary { margin: 0 0 14px; pointer-events: none; }
  .foot ul { gap: 9px; }
  /* Features runs down two columns */
  .foot .feats .two { column-gap: 24px; }
  .foot .feats { grid-column: span 2; }
  .spark.mo { display: none; } /* the moon section's sparkle is for phones only */
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }