/* The site masthead as the homepage draws it (beam-native-showcase.css with
   beam-elevated.css), for pricing and the standalone pages. Keep the values in step.
   Every page but the homepage loads this sheet, so it also carries the few rules
   the whole site shares; beam-elevated.css carries the same ones for the homepage. */

/* One frame: the masthead spans it, and every reading page starts its column at
   its 1172px column's edge (the homepage demo and the pricing plans use the same). */
:root { --frame-gutter: clamp(20px, 3.6vw, 54px); --page-column: 1172px; }
/* One gold button for the whole site, as the homepage draws its "Try Beam": the
   masthead uses it at 44 px, page buttons at 50 px. Every sheet reads these. */
:root {
  --cta-radius: 8px; --cta-height: 50px; --cta-pad: 13px 23px;
  --cta-font: 500 16px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cta-ink: #241a0c; --cta-border: #e6c578;
  --cta-gold: linear-gradient(135deg, #e7c77d 0%, #d3a747 56%, #bd8d32 100%);
  --cta-gold-hover: linear-gradient(135deg, #edd28f 0%, #ddb456 56%, #c99a3e 100%);
  --cta-shadow: inset 0 1px 0 #fff0c680, inset 0 -1px 0 #79551540, 0 8px 22px -14px #d8b15d59;
  --cta-shadow-hover: inset 0 1px 0 #fff0c699, inset 0 -1px 0 #79551540, 0 10px 26px -12px #d8b15d73;
}
@media (min-width: 1200px) { :root { --frame-gutter: clamp(54px, 4.5vw, 96px); } }
/* One type system for every page (2026-11-09); the homepage's beam-elevated.css
   carries the same values. Three inks on true black: headings and emphasis
   #e5dfd3 (15.8:1), reading copy #bcb5ac (10.3:1, the homepage's reading ink
   as the CEO approved it; softer than the headings, never brighter than the
   softened text he asked for), dates, notes and fine print #aca294 (8.3:1). One serif, Georgia, so Safari draws the same face on every
   page (ui-serif is New York there, and Chrome has no ui-serif at all). Reading
   copy is 16 px, and from 1200 px it grows with the frame to 18 px (17.7 px on
   a 1728 px screen); a page title steps from 42 px to 64 px. */
:root {
  --ink-head: #e5dfd3; --ink-read: #bcb5ac; --ink-meta: #aca294;
  --serif-face: Georgia, 'Times New Roman', serif;
  --type-read: 16px; --type-small: 14px; --type-note: 13px;
  --h1-page: clamp(42px, calc(2.2vw + 26px), 64px);
}
@media (min-width: 1200px) {
  :root { --type-read: clamp(16px, calc(.42vw + 10.4px), 18px); --type-small: 15px; --type-note: 14px; }
}
.site-frame { box-sizing: border-box; width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--frame-gutter); }
@media (min-width: 1200px) {
  .site-frame { max-width: calc(1600px + 2 * var(--frame-gutter)); }
}
.page-column { box-sizing: border-box; width: 100%; max-width: calc(var(--page-column) + 2 * var(--frame-gutter)); margin-inline: auto; padding-inline: var(--frame-gutter); }

/* One rendering on true black: grayscale smoothing on every page, as the homepage
   and pricing always had, so the same words weigh the same everywhere. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Headings balance their lines, and a second line set after a break (the gold
   half of a two-line title) balances on its own, so neither leaves a word alone. */
:is(h1, h2, h3) { text-wrap: balance; }
:is(h1, h2, h3) br + em { display: block; text-wrap: balance; }
/* Paragraphs, list items and notes set their last lines so no word is left alone. */
:where(main, footer) :where(p, li, dd, blockquote, figcaption) { text-wrap: pretty; }
.site-nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 84px; padding: 0; border: 0; font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.site-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, #efc87347, #e9dfd11c 34%, #e9dfd10b); }
.site-nav .brand { display: inline-flex; align-items: center; gap: 15px; flex-shrink: 0; color: #e5dfd3; font: inherit; letter-spacing: normal; text-decoration: none; }
.site-nav .brand-signature { display: grid; gap: 7px; }
.site-nav .brand-wordmark { font: 400 31px/.95 Georgia, 'Times New Roman', serif; letter-spacing: .15em; text-transform: uppercase; color: #e5dfd3; }
.site-nav .brand-descriptor { font: 10px/1.2 'SFMono-Regular', Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #c0a66e; white-space: nowrap; }
.site-nav .brand-seal { display: flex; align-items: center; padding-left: 15px; border-left: 1px solid #efc87338; }
.site-nav .brand-icon { display: block; position: relative; flex-shrink: 0; width: 43px; height: 43px; }
.site-nav .app-icon { display: block; width: 100%; height: 100%; object-fit: contain; }
.site-nav nav { display: flex; align-items: center; gap: 28px; font-size: 15px; color: #d0c8bb; }
.site-nav nav > a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; white-space: nowrap; }
.site-nav nav > a:hover, .site-nav nav > a[aria-current="page"] { color: #d8b15d; }
.site-nav :is(a, button):focus-visible { outline: 2px solid #d8b15d; outline-offset: 5px; }
.site-nav nav > .nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 44px; padding: 10px 17px;
  border: 1px solid var(--cta-border); border-radius: var(--cta-radius);
  background: var(--cta-gold);
  color: var(--cta-ink); font: var(--cta-font); font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  box-shadow: var(--cta-shadow);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.site-nav nav > .nav-cta:hover {
  color: var(--cta-ink);
  background: var(--cta-gold-hover);
  box-shadow: var(--cta-shadow-hover);
  transform: translateY(-1px);
}
.site-nav .cta-arrow { flex: none; width: 14px; height: 14px; transition: transform .25s; }
.site-nav .nav-cta:hover .cta-arrow { transform: translate(1px, -1px); }
@media (max-width: 1080px) { .site-nav nav { gap: 22px; } }
@media (max-width: 900px) {
  .site-nav { gap: 18px; }
  .site-nav .brand { gap: 12px; }
  .site-nav .brand-seal { padding-left: 12px; }
  .site-nav nav { gap: 20px; font-size: 14px; }
  .site-nav nav > .nav-cta { font-size: 14px; }
}
@media (max-width: 760px) {
  .site-nav .brand-wordmark { font-size: 27px; }
  .site-nav .brand-icon { width: 38px; height: 38px; }
  .site-nav nav { gap: 17px; }
}
@media (max-width: 620px) {
  .site-nav { flex-wrap: wrap; gap: 13px; height: auto; min-height: 114px; padding: 17px 0 10px; }
  .site-nav .brand-signature { gap: 6px; }
  .site-nav .brand-wordmark { letter-spacing: .12em; }
  .site-nav .brand-descriptor { letter-spacing: .11em; }
  /* The links pack from the left at a fixed step and the button holds the right edge,
     so nothing floats mid-bar on a wide phone. */
  .site-nav nav { width: 100%; justify-content: flex-start; gap: 24px; }
  .site-nav nav > .nav-cta { margin-left: auto; }
  .site-nav nav > .nav-cta { gap: 13px; padding: 9px 14px; }
  .site-nav .cta-arrow { width: 13px; height: 13px; }
}
@media (max-width: 380px) {
  .site-nav nav { gap: 11px; }
  .site-nav nav > .nav-cta { padding-inline: 12px; }
}
/* On a phone or tablet the button reads "Send to your Mac" (assets/beam-door.js
   marks the page .beam-door-phone), longer than "Try Beam", so on the narrowest
   screens the row tightens to stay inside the frame: a smaller step between
   links, the homepage's 13 px under 380 px (each link still 44 px wide to tap),
   and under 340 px the button lets its arrow go. A Mac or a PC never carries
   the class and keeps the rules above. */
@media (min-width: 381px) and (max-width: 430px) {
  .beam-door-phone .site-nav nav { gap: 18px; }
}
@media (max-width: 380px) {
  .beam-door-phone .site-nav nav, .beam-door-phone .site-nav nav > .nav-cta { font-size: 13px; }
  .beam-door-phone .site-nav nav > a { min-width: 44px; justify-content: center; }
}
@media (max-width: 340px) {
  .beam-door-phone .site-nav nav { gap: 9px; }
  .beam-door-phone .site-nav nav > .nav-cta { padding-inline: 10px; }
  .beam-door-phone .site-nav .cta-arrow { display: none; }
}
/* With no share sheet and the clipboard refused (some in-app browsers), the
   button asks the reader to open justbeaming.com on their Mac, a label twice
   its width. It may wrap rather than push the page sideways: on a phone the
   button takes a row of its own under the links, on a tablet it breaks into
   two balanced lines in place. A label that fits ("Send to your Mac", "Link
   copied") never wraps, so those rows are unchanged. The homepage carries the
   same rules in beam-elevated.css. */
.beam-door-phone .site-nav nav > .nav-cta { white-space: normal; text-wrap: balance; text-align: center; }
@media (max-width: 620px) {
  .beam-door-phone .site-nav nav { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav nav > .nav-cta, .site-nav .cta-arrow { transition: none; }
  .site-nav nav > .nav-cta:hover, .site-nav .nav-cta:hover .cta-arrow { transform: none; }
}

/* One footer (2026-11-09) for the legal pages, the compare pages, best-mac and
   404; the homepage, pricing, start and thanks keep their own. Self-contained,
   so a page without pages.css draws it the same. */
.site-footer { margin-top: 0; border-top: 1px solid #efc8732b; padding: 35px 0 65px; color: #e5dfd3; font: 400 14px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #efc873; }
.site-footer p { margin: 0; }
.site-footer .footer-top { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
.site-footer .footer-motto { margin: 0 0 10px; font: italic 400 25px/1.4 Georgia, 'Times New Roman', serif; }
.site-footer .footer-company { font: 12px/1.6 'SFMono-Regular', ui-monospace, Menlo, monospace; letter-spacing: 2px; text-transform: uppercase; color: #aca294; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 23px; font-size: 14px; }
.site-footer .footer-links a { display: inline-flex; align-items: center; min-height: 24px; }
.site-footer .footer-links a[aria-current="page"] { color: #efc873; }
.site-footer .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 28px; font-size: 13px; color: #aca294; }
.site-footer .footer-bottom > [data-motion-toggle] { margin-left: auto; }
@media (max-width: 760px) {
  .site-footer { padding-top: 28px; }
  .site-footer .footer-top { flex-direction: column; gap: 22px; }
  .site-footer .footer-links { gap: 24px; }
  .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; }
  .site-footer .footer-bottom > [data-motion-toggle] { margin: 8px 0 0; }
}
/* "Pause motion" on every page: it holds the starfield, and the choice is
   remembered from page to page (beam-stars.js). Hidden until the script runs,
   and under reduced motion, where nothing moves. */
[data-motion-toggle] { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 14px; border: 1px solid #efc8734d; border-radius: 7px; background: #000; color: #d0c8bb; font: 400 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer; }
[data-motion-toggle]:hover { border-color: #efc87399; color: #efc873; }
[data-motion-toggle]:focus-visible { outline: 2px solid #d8b15d; outline-offset: 4px; }
[data-motion-toggle][hidden] { display: none; }
[data-motion-toggle] .motion-icon { width: 1em; text-align: center; }
@media print { .site-footer { padding-bottom: 0; color: #111; } .site-footer :is(.footer-company, .footer-bottom) { color: #333; } [data-motion-toggle] { display: none; } }