/* Elevated homepage, loaded last. True black ground; surfaces by hairline and
   gold light, not near-black fills. Three inks, the same on every page
   (beam-masthead.css): headings #e5dfd3 (15.8:1), reading copy #bcb5ac
   (10.3:1, --muted here, the name it always had), notes #aca294 (8.3:1). The
   hero's intro keeps its own approved #c5bdb1 (11.3:1), a step above. */
html { background: #000; }
body.elevated {
  isolation: isolate;
  --ink: #000;
  --text: #e5dfd3;
  --muted: #bcb5ac;
  --gold: #d8b15d;
  --line: #efc8731c;
  --hairline: #efc8732b;
  --lip: inset 0 1px 0 #f6e6c214;
  --page-gutter: clamp(20px, 3.6vw, 54px);
  --section-space: clamp(44px, 4.5vw, 58px);
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.75 var(--sans);
}
/* The top light is gold grain under a radial mask: a plain gradient bands on OLED. */
body.elevated::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: 1100px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .70 0 0 0 0 .38 .1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  -webkit-mask-image: radial-gradient(ellipse 1150px 760px at 74% 0, #000 0%, rgba(0,0,0,.72) 18%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.05) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 1150px 760px at 74% 0, #000 0%, rgba(0,0,0,.72) 18%, rgba(0,0,0,.42) 38%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.05) 82%, transparent 100%);
}

/* One centered content frame, with equal gutters that scale continuously. */
body.elevated .shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
body.elevated :is(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
body.elevated .skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 16px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: #18131e;
  color: var(--gold);
  transform: translateY(-160%);
}
body.elevated .skip-link:focus { transform: none; }

/* A restrained masthead, with the app's original signature. */
body.elevated .nav { height: 84px; gap: 28px; }
body.elevated .nav:after {
  background: linear-gradient(90deg, #efc87347, #e9dfd11c 34%, #e9dfd10b);
}
body.elevated .brand-wordmark { font-size: 31px; }
body.elevated .brand-descriptor { font-size: 10px; letter-spacing: .12em; white-space: nowrap; }
body.elevated .brand-icon { width: 43px; height: 43px; }
body.elevated .nav nav { gap: 28px; font-size: 15px; color: #d0c8bb; }
body.elevated .nav nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
body.elevated .nav nav > a:hover { color: var(--gold); }
body.elevated .nav nav > .nav-cta { color: #241a0c; }
body.elevated .nav-cta { min-height: 44px; padding: 10px 17px; font-size: 15px; }
body.elevated .primary { min-height: 50px; padding: 13px 23px; font-size: 16px; }
/* Warm, brushed gold: a soft highlight above a deeper metallic base. */
body.elevated .primary, body.elevated .nav-cta {
  border-color: #e6c578;
  background: linear-gradient(135deg, #e7c77d 0%, #d3a747 56%, #bd8d32 100%);
  color: #241a0c;
  box-shadow: inset 0 1px 0 #fff0c680, inset 0 -1px 0 #79551540, 0 8px 22px -14px #d8b15d59;
}
body.elevated .primary:hover, body.elevated .nav-cta:hover {
  background: linear-gradient(135deg, #edd28f 0%, #ddb456 56%, #c99a3e 100%);
  box-shadow: inset 0 1px 0 #fff0c699, inset 0 -1px 0 #79551540, 0 10px 26px -12px #d8b15d73;
}
body.elevated .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 7px;
  font-size: 15px;
  line-height: 1.5;
  color: #ded6c9;
}
body.elevated .text-link:hover { color: var(--gold); border-color: #efc87380; }
body.elevated .text-link > span, body.elevated .use-case-link > span { margin-left: 10px; }
body.elevated .eyebrow { font-size: 11px; letter-spacing: .15em; margin-bottom: 18px; }

/* One editorial opening. The starfield's crown (assets/beam-stars.js) spans it,
   from the hero's top to just below the workflow tabs (data-stars-crown and
   data-stars-crown-end in the page). */
body.elevated .hero { position: relative; isolation: isolate; display: block; padding: 32px 0 27px; }
body.elevated .hero-copy { position: relative; isolation: isolate; width: 100%; max-width: none; margin-inline: auto; text-align: center; }
body.elevated .hero-copy > .eyebrow { justify-content: center; margin-bottom: 17px; }
body.elevated .hero h1 {
  max-width: 880px;
  margin: 0 auto 20px;
  font: 400 clamp(60px, 6.2vw, 74px)/1.04 var(--serif);
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* Georgia's L runs its foot out to the e; the first letter keeps its own room. */
body.elevated .hero h1::first-letter { letter-spacing: .01em; }
body.elevated .hero h1 em { color: var(--gold); }
body.elevated .hero .intro {
  max-width: 610px;
  margin: 0 auto 22px;
  color: #c5bdb1;
  font-size: 17px;
  line-height: 1.75;
  text-wrap: balance;
}
body.elevated .hero .actions { justify-content: center; flex-wrap: wrap; gap: 16px 24px; }
body.elevated .trial { font-size: 13px; color: #c5bcaf; margin: 14px 0 0; }
body.elevated .requirements { font-size: 12px; color: #aca294; margin-top: 3px; }
/* Links inside a sentence look like links: underlined, the text's own size. */
body.elevated .trial a,
body.elevated .faq-heading p .text-link {
  color: #ded6c9;
  text-decoration: underline;
  text-decoration-color: #e5dfd366;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.elevated .trial a:hover,
body.elevated .faq-heading p .text-link:hover { color: var(--gold); text-decoration-color: #d8b15d99; }
body.elevated .faq-heading p .text-link {
  display: inline; min-height: 0; padding: 0; border-bottom: 0;
  font-size: inherit; line-height: inherit; text-underline-offset: 4px;
}

/* A three-part product demonstration, not a carousel of marketing claims. */
/* 1172px keeps the Notes and Meetings films (1448x1096) at the scale they were
   cut for; the Dictation demo is live text and is sharp at any width. */
body.elevated .product-demo { width: 100%; max-width: 1172px; min-width: 0; margin: 28px auto 0; scroll-margin-top: 24px; }
body.elevated .demo-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
body.elevated .demo-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-content: center;
  min-height: 74px;
  padding: 13px 25px;
  border: 0;
  background: transparent;
  color: #b3aa9b;
  text-align: left;
  transition: color .2s, background .2s;
}
body.elevated .demo-tabs button + button { border-left: 1px solid var(--line); }
body.elevated .demo-tabs button::after {
  position: absolute;
  content: "";
  height: 2px;
  bottom: -1px;
  left: 0;
  right: 0;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .24s;
}
body.elevated .demo-tabs button > span {
  grid-row: 1 / 3;
  align-self: center;
  font: 11px/1.5 var(--mono);
  letter-spacing: .06em;
  color: #9e988e;
}
body.elevated .demo-tabs button strong {
  display: block;
  font: 500 16px/1.4 var(--sans);
  color: inherit;
}
body.elevated .demo-tabs button small {
  display: block;
  margin-top: 5px;
  font: 400 13px/1.4 var(--sans);
  color: #ada18f;
}
body.elevated .demo-tabs button[aria-selected="true"] {
  color: var(--text);
  background: linear-gradient(180deg, transparent, #efc87305);
}
body.elevated .demo-tabs button[aria-selected="true"] > span { color: var(--gold); }
body.elevated .demo-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
body.elevated .demo-tabs button:hover { color: var(--text); background: #efc87307; }
body.elevated .demo-panel { height: auto; min-width: 0; }
body.elevated #demo-dictation { height: auto; }
body.elevated .dictation-demo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--ink);
  box-shadow: var(--lip), 0 56px 140px -84px #d8b15d3d;
}
/* The films carry their black point in the file (tools/film/bake-black-point.sh):
   no runtime filter. */

/* The Dictation demo is live text, not a film: the browser draws every word at
   the screen's own resolution. It is laid out on the approved 1920x960 film's
   grid, one --f per film pixel, so it keeps the film's proportions at any width.
   Without script (and under reduced motion until Play) it holds the landed
   frame; assets/beam-dictation-live.js plays the 11.8 s sequence. */
.dictation-live {
  --dl-grid: 1920;
  --dl-drop: 276;
  --dl-pill-end: .609;
  --f: calc(100cqi / var(--dl-grid));
  --dl-sans: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --dl-serif: var(--serif, Georgia, "Times New Roman", serif);
  --dl-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  container-type: inline-size;
  contain: layout paint;
  background: #000;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
.dl-scene { position: absolute; inset: 0; }
.dl-scene p { margin: 0; }
.dl-scene > * { position: absolute; }
.dl-glow {
  inset: 0;
  background:
    radial-gradient(ellipse calc(430 * var(--f)) calc(360 * var(--f)) at 34% 67%, #2a3a5c2e 0%, #2a3a5c17 50%, transparent 100%),
    radial-gradient(ellipse calc(560 * var(--f)) calc(500 * var(--f)) at 49% 58%, #1c1517 0%, #130f12 38%, #08070a 70%, transparent 100%);
}
.dl-mark {
  left: 0;
  right: 0;
  top: calc(70 * var(--f));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(51 * var(--f));
  font: 400 calc(29 * var(--f)) / 1 var(--dl-serif);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #c9b38c;
}
.dl-mark span { margin-right: -.19em; }
.dl-mark i { display: block; width: calc(66 * var(--f)); height: calc(1.5 * var(--f)); background: #241f24; }
.dl-intro { inset: 0; text-align: center; opacity: 0; }
.dl-title, .dl-sub { position: absolute; left: 0; right: 0; }
.dl-title { top: calc(219 * var(--f)); font: 400 calc(83.5 * var(--f)) / 1.2 var(--dl-serif); letter-spacing: -.005em; color: #efecf2; }
.dl-sub { top: calc(329 * var(--f)); font: 400 calc(25 * var(--f)) / 1.3 var(--dl-sans); color: #c0bac3; }
.dl-card {
  left: calc(150 * var(--f));
  top: calc(179 * var(--f));
  width: calc(1619 * var(--f));
  height: calc(480 * var(--f));
  border: calc(1.3 * var(--f)) solid #ffffff1c;
  border-radius: calc(30 * var(--f));
  background: linear-gradient(105deg, #1b1721, #15121b 38%, #14111b);
  box-shadow: 0 calc(30 * var(--f)) calc(90 * var(--f)) #00000099;
}
.dl-kicker { position: absolute; left: calc(61 * var(--f)); top: calc(41 * var(--f)); font: 400 calc(17.5 * var(--f)) / 1.2 var(--dl-mono); letter-spacing: 0; text-transform: uppercase; color: #c0b09d; }
.dl-to { position: absolute; left: calc(61 * var(--f)); top: calc(78 * var(--f)); font: 400 calc(21 * var(--f)) / 1.2 var(--dl-sans); color: #aaa6b3; }
.dl-to::after { content: ""; position: absolute; left: 0; top: calc(43 * var(--f)); width: calc(1496 * var(--f)); height: calc(1.2 * var(--f)); background: #ffffff12; }
.dl-body { position: absolute; left: calc(61 * var(--f)); top: calc(133.5 * var(--f)); right: calc(61 * var(--f)); font: 400 calc(64 * var(--f)) / calc(95 * var(--f)) var(--dl-sans); letter-spacing: .0165em; color: #ebe8f0; white-space: nowrap; }
.dl-line { height: calc(95 * var(--f)); }
.dl-w, .dl-pw { display: inline-block; }
.dl-caret { display: inline-block; width: calc(2.6 * var(--f)); height: calc(59 * var(--f)); margin-left: calc(24 * var(--f)); vertical-align: calc(-5 * var(--f)); border-radius: calc(1.3 * var(--f)); background: #cfc08b; opacity: .9; }
.dl-pill {
  left: calc(131 * var(--f));
  top: calc(442 * var(--f));
  width: calc(1658 * var(--f));
  height: calc(132 * var(--f));
  border-radius: calc(52 * var(--f));
  background:
    radial-gradient(ellipse calc(300 * var(--f)) calc(70 * var(--f)) at 14% 55%, #7cc8e612, transparent 100%),
    linear-gradient(180deg, #ffffff0d, transparent 26%),
    linear-gradient(180deg, #222125, #1a191e 34%, #111014 70%, #0b0a0d);
  box-shadow: inset 0 0 0 calc(1.5 * var(--f)) #ffffff17, inset 0 calc(1.6 * var(--f)) 0 #ffffff1f, 0 calc(22 * var(--f)) calc(60 * var(--f)) #000000b3;
  transform-origin: 50% 0;
  transform: translateY(calc(var(--dl-drop) * var(--f))) scale(var(--dl-pill-end));
}
.dl-wave { position: absolute; left: 0; top: 0; width: calc(400 * var(--f)); height: calc(132 * var(--f)); overflow: visible; }
.dl-wave path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dl-wave-line { stroke: #aed6e1; stroke-width: 3.2; }
.dl-wave-glow { stroke: #86d3ee; stroke-width: 10; opacity: .13; }
.dl-dot { fill: #a4dbea; }
.dl-dot-halo { fill: url(#dl-halo); }
.dl-divider { position: absolute; left: calc(396 * var(--f)); top: calc(29 * var(--f)); width: calc(2 * var(--f)); height: calc(74 * var(--f)); background: linear-gradient(180deg, #ffffff1f, #ffffff12 60%, #ffffff00); }
.dl-stream { position: absolute; left: calc(435 * var(--f)); top: 0; width: calc(991 * var(--f)); height: 100%; overflow: hidden; font: 400 calc(41 * var(--f)) / calc(132 * var(--f)) var(--dl-sans); letter-spacing: .02em; white-space: nowrap; }
/* Words leaving the pill's left edge fade out over 56 film pixels instead of
   being cut through a letter: always in the still frame, and in motion once the
   row has scrolled (before that, "Listening" starts at the edge). */
.dictation-live:not(.is-live) .dl-stream, .dictation-live .dl-stream.is-scrolled {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(56 * var(--f)));
  mask-image: linear-gradient(90deg, transparent, #000 calc(56 * var(--f)));
}
.dl-listening { position: absolute; left: 0; top: 0; color: #acacb0; opacity: 0; }
.dl-row { position: absolute; right: 0; top: 0; color: #ebebef; }
.dl-timer { position: absolute; right: calc(66 * var(--f)); top: 0; font: 400 calc(28 * var(--f)) / calc(132 * var(--f)) var(--dl-mono); color: #9c98a5; font-variant-numeric: tabular-nums; }
.dl-steps {
  left: 0;
  right: 0;
  top: calc(865 * var(--f));
  display: flex;
  justify-content: center;
  gap: calc(21 * var(--f));
  font: 400 calc(18.5 * var(--f)) / 1.4 var(--dl-mono);
  color: #a29fa9;
}
.dl-steps b { font-weight: 400; color: #7b7882; }
.dl-end { left: 0; right: 0; top: calc(768 * var(--f)); text-align: center; font: italic 400 calc(43.3 * var(--f)) / 1.2 var(--dl-serif); color: #e9e8ef; opacity: 0; }
.dl-icon { left: calc(924 * var(--f)); top: calc(837 * var(--f)); width: calc(72 * var(--f)); height: calc(72 * var(--f)); opacity: 0; }
/* Labels hold a floor where the film grid would draw them too small to read;
   the lines under them step down to make room when a floor is in force. */
.dl-mark { font-size: max(11px, calc(29 * var(--f))); }
.dl-sub { font-size: max(13px, calc(25 * var(--f))); }
.dl-kicker { font-size: max(11px, calc(19.5 * var(--f))); }
.dl-to { top: max(calc(78 * var(--f)), calc(41 * var(--f) + 16px)); font-size: max(12px, calc(21 * var(--f))); }
.dl-to::after { top: max(calc(43 * var(--f)), 1.35em); }
.dl-body { top: max(calc(133.5 * var(--f)), calc(41 * var(--f) + 40px)); }
.dl-timer { font-size: max(11px, calc(28 * var(--f))); }
.dl-steps { font-size: max(11px, calc(20 * var(--f))); }
/* Phones (600 px and under): the same scene on a square 760-unit grid, so the message reads at
   14 px and up and wraps inside the card, and the pill keeps its full width
   under the card instead of shrinking to 0.609. The script reads --dl-grid,
   --dl-drop and --dl-pill-end, so its motion follows whichever grid is on. */
@media (max-width: 600px) {
  .dictation-live { --dl-grid: 760; --dl-drop: 148; --dl-pill-end: 1; aspect-ratio: 1 / 1; }
  .dl-mark { top: calc(40 * var(--f)); gap: calc(36 * var(--f)); font-size: max(11px, calc(28 * var(--f))); }
  .dl-mark i { width: calc(50 * var(--f)); }
  .dl-title { top: calc(196 * var(--f)); font-size: calc(80 * var(--f)); }
  .dl-sub { top: calc(300 * var(--f)); font-size: max(13px, calc(36 * var(--f))); }
  .dl-card { left: calc(28 * var(--f)); top: calc(108 * var(--f)); width: calc(704 * var(--f)); height: calc(392 * var(--f)); border-radius: calc(26 * var(--f)); }
  .dl-kicker { left: calc(36 * var(--f)); top: calc(30 * var(--f)); font-size: max(11px, calc(28 * var(--f))); }
  .dl-to { left: calc(36 * var(--f)); top: max(calc(68 * var(--f)), calc(30 * var(--f) + 16px)); font-size: max(12px, calc(32 * var(--f))); }
  .dl-to::after { top: max(calc(46 * var(--f)), 1.35em); width: calc(632 * var(--f)); }
  .dl-body { left: calc(36 * var(--f)); top: max(calc(134 * var(--f)), calc(30 * var(--f) + 40px)); right: calc(36 * var(--f)); font-size: max(14px, calc(38 * var(--f))); line-height: calc(56 * var(--f)); white-space: normal; }
  .dl-line { height: auto; text-wrap: balance; }
  .dl-caret { height: calc(35 * var(--f)); vertical-align: calc(-4 * var(--f)); }
  .dl-pill { left: calc(28 * var(--f)); top: calc(380 * var(--f)); width: calc(704 * var(--f)); height: calc(108 * var(--f)); border-radius: calc(40 * var(--f)); }
  .dl-wave { top: calc(14.5 * var(--f)); width: calc(240 * var(--f)); height: calc(79.2 * var(--f)); }
  .dl-divider { left: calc(236 * var(--f)); top: calc(24 * var(--f)); height: calc(60 * var(--f)); }
  .dl-stream { left: calc(262 * var(--f)); width: calc(330 * var(--f)); font-size: max(13px, calc(36 * var(--f))); line-height: calc(108 * var(--f)); }
  .dl-timer { right: calc(34 * var(--f)); font-size: max(11px, calc(28 * var(--f))); line-height: calc(108 * var(--f)); }
  .dl-steps { top: calc(672 * var(--f)); gap: calc(16 * var(--f)); font-size: max(11px, calc(30 * var(--f))); }
  .dl-end { top: calc(560 * var(--f)); font-size: calc(50 * var(--f)); }
  .dl-icon { left: calc(348 * var(--f)); top: calc(640 * var(--f)); width: calc(64 * var(--f)); height: calc(64 * var(--f)); }
}
/* Live: the script owns every moving part; the caret and the pill's words move by transform. */
.dictation-live.is-live .dl-row { right: auto; left: 0; }
.dictation-live.is-live .dl-caret { position: absolute; left: 0; top: 0; margin: 0; }
body.elevated .dictation-demo figcaption {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  color: #afa89d;
  font: 12px/1.6 var(--sans);
}
body.elevated .hero-showcase {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 24px 32px 19px;
  border: 1px solid #e9dfd120;
  border-radius: 14px;
  background: linear-gradient(150deg, #14101b 0%, #0c0a12 48%, #08070d 100%);
  box-shadow: inset 0 1px 0 #e9dfd104, 0 18px 46px #00000020;
}
body.elevated .stage-top {
  flex: none;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .07em;
  color: #b2aba0;
}
body.elevated .stage-top > span:first-child { color: #c7bfb2; }
body.elevated .native-label { gap: 8px; }
body.elevated .native-label i { width: 5px; height: 5px; }
body.elevated .stage-title {
  flex: none;
  margin: 21px 0 0;
  text-align: center;
  font: 400 35px/1.17 var(--serif);
  letter-spacing: -.025em;
}
body.elevated .stage-title em { color: #b3aca1; }
body.elevated .hero-film {
  --frame-height: 176px;
  flex: 1 1 auto;
  height: 176px;
  min-height: 120px;
  width: 100%;
  margin: 0;
  padding: 0;
}
body.elevated .hero-film.pill-stage .pill-layer { max-width: 800px; }
body.elevated .hero-picker { flex: none; gap: 3px; margin: -5px auto 3px; }
body.elevated .hero-picker button { width: 44px; height: 44px; padding: 20px 10px; }
body.elevated .stage-bottom {
  flex: none;
  padding-top: 13px;
  min-height: 39px;
  font-size: 13px;
  line-height: 1.5;
  color: #afa89d;
}
body.elevated .stage-bottom kbd { font-size: 12px; padding: 3px 6px; }
body.elevated .demo-workflow {
  display: grid;
  grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
  align-items: center;
  gap: 42px;
  height: auto;
  padding: 26px 32px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(ellipse 70% 90% at 0 0, #efc87308, transparent 70%), var(--ink);
  box-shadow: var(--lip);
}
body.elevated .demo-workflow-copy { min-width: 0; max-width: 410px; padding-left: 7px; }
body.elevated .demo-workflow-copy .eyebrow { margin-bottom: 15px; }
body.elevated .demo-workflow-copy h3 {
  margin: 0;
  font: 400 clamp(30px, 3vw, 38px)/1.17 var(--serif);
  letter-spacing: -.03em;
  text-wrap: balance;
}
body.elevated .demo-workflow-copy h3 em { color: var(--gold); font-weight: 400; }
body.elevated .demo-workflow-copy > p:not(.eyebrow) {
  max-width: 38ch;
  margin: 18px 0 13px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}
body.elevated .demo-workflow-copy .text-link { color: var(--gold); border-color: #efc87350; }
body.elevated .demo-workflow-film {
  min-width: 0;
  width: 100%;
  max-width: 477px;
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--ink);
  box-shadow: var(--lip), 0 56px 140px -84px #d8b15d3d;
}
body.elevated .demo-workflow-film video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1448 / 1096;
  object-fit: contain;
}
body.elevated .demo-utilities {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding-top: 10px;
}
body.elevated .demo-footnote { margin: 0; color: #9d968d; font-size: 12px; line-height: 1.6; }
body.elevated .motion-toggle {
  position: static;
  flex: none;
  z-index: auto;
  min-height: 44px;
  padding: 10px 14px;
  border-color: var(--line);
  border-radius: 7px;
  background: var(--ink);
  font-size: 12px;
  line-height: 1.4;
  color: #c6beb1;
  backdrop-filter: none;
  box-shadow: none;
}
body.elevated .motion-toggle:hover { border-color: #efc87370; color: var(--gold); }
body.elevated .promise-line {
  gap: 28px;
  padding-block: 22px;
  font: 12px/1.6 var(--sans);
  letter-spacing: .015em;
  color: #c2b5a1;
}
body.elevated .promise-line span:last-child { display: inline; }
body.elevated .promise-line i:last-of-type { display: block; }
/* Where the three promises cannot share one line, each takes its own, centred, and
   the dots go: a wrapped line never ends on a separator. */
@media (max-width: 600px) {
  body.elevated.elevated .promise-line { flex-direction: column; align-items: center; row-gap: 2px; }
  body.elevated.elevated .promise-line i { display: none; }
}

/* Three clear routes into the product. */
body.elevated .section { padding-block: var(--section-space); scroll-margin-top: 28px; }
body.elevated .section-head { align-items: end; gap: 54px; margin-bottom: 35px; }
body.elevated :is(.section-head h2, .closing h2, .local-proof h2, .faq h2) {
  margin: 0;
  font: 400 clamp(40px, 4vw, 48px)/1.16 var(--serif);
  letter-spacing: -.035em;
  text-wrap: balance;
}
body.elevated .section-head .eyebrow { margin-bottom: 16px; }
body.elevated .section-head > p { font-size: 16px; line-height: 1.8; max-width: 380px; }
body.elevated .use-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }
body.elevated .use-case {
  display: flex;
  flex-direction: column;
  align-items: start;
  min-width: 0;
  padding: 23px 0 0;
  border-top: 1px solid #efc87356;
}
body.elevated .use-case-index { color: #c5a96c; font: 11px/1.5 var(--mono); letter-spacing: .1em; }
body.elevated .use-case h3 {
  margin: 17px 0 12px;
  font: 400 30px/1.18 var(--serif);
  letter-spacing: -.025em;
  transition: color .2s;
}
body.elevated .use-case p { max-width: 34ch; margin: 0 0 19px; color: var(--muted); font-size: 16px; line-height: 1.8; }
body.elevated .use-case-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  border-bottom: 1px solid #efc87345;
  font-size: 14px;
  color: var(--gold);
}
body.elevated .use-case:hover h3 { color: var(--gold); }
body.elevated .use-case:hover .use-case-link { border-color: var(--gold); }

/* Retained product sections share the same reading scale and rhythm. */
body.elevated .how-beam { padding-block: 48px; border-top: 1px solid var(--line); }
body.elevated .how-beam .how-beam__heading { margin-bottom: 32px; }
body.elevated .how-beam .how-beam__title {
  font-size: clamp(40px, 4vw, 48px);
  letter-spacing: -.035em;
}
body.elevated .how-beam .how-beam__eyebrow { font-size: 11px; }
body.elevated .how-beam .how-beam__number { font-size: 12px; }
body.elevated .how-beam .how-beam__step-title { font-size: 28px; }
body.elevated .how-beam .how-beam__copy { font-size: 16px; }
body.elevated .workflow { padding-block: var(--section-space); gap: 58px; }
body.elevated .workflow h2 { font-size: clamp(40px, 3.75vw, 46px); letter-spacing: -.035em; }
body.elevated .workflow-intro { font-size: 16px; line-height: 1.8; margin: 21px 0 24px; }
body.elevated .workflow-details { gap: 19px; }
body.elevated .workflow-details dt { font-size: 15px; }
body.elevated .workflow-details dd { font-size: 15px; line-height: 1.8; }
body.elevated .workflow-link { margin-top: 24px; font-size: 15px; }
body.elevated .workflow-figure figcaption { font-size: 12px; color: #a49e94; }
body.elevated .workflow-stage { border-color: var(--hairline); border-radius: 13px; box-shadow: var(--lip), 0 56px 140px -84px #d8b15d3d; }
body.elevated .craft { border-top: 1px solid var(--line); }
body.elevated .style-picker { justify-content: space-between; gap: 24px; }
body.elevated .style-picker button { min-height: 48px; padding: 12px 3px 18px; font-size: 15px; }
body.elevated .product-theatre { padding: 25px 31px 29px; border-radius: 13px; border-color: var(--line); background: var(--ink); box-shadow: var(--lip); }
body.elevated .theatre-meta { font-size: 11px; letter-spacing: .1em; }
body.elevated .theatre-caption { min-height: 114px; padding-top: 23px; gap: 28px; }
body.elevated .theatre-caption h3 { font-size: 31px; }
body.elevated .theatre-caption p { max-width: 550px; font-size: 15px; line-height: 1.8; }
body.elevated .element-picker button { min-height: 44px; padding: 10px 15px; font-size: 13px; }
body.elevated .footage-note { font-size: 12px; line-height: 1.7; color: #a49d93; }
body.elevated .app-film { margin-top: 34px; width: 100%; max-width: none; border-color: var(--hairline); border-radius: 13px; background: var(--ink); box-shadow: var(--lip), 0 56px 140px -84px #d8b15d3d; }
body.elevated .benefits { padding-block: 36px; }
body.elevated .benefits article > span { font-size: 11px; }
body.elevated .benefits h3 { font-size: 27px; }
body.elevated .benefits p { font-size: 15px; line-height: 1.8; }

/* Small, selectable proofs of the cleanup already in Beam. */
body.elevated .cleanup-discover { display: inline-block; margin-left: 14px; color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
body.elevated .cleanup { padding-block: var(--section-space); border-top: 1px solid var(--line); }
body.elevated .cleanup .section-head { margin-bottom: 25px; }
body.elevated .cleanup-picker { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 18px; }
body.elevated .cleanup-picker button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #b0a99e;
  font: 13px/1.5 var(--sans);
}
body.elevated .cleanup-picker button:hover { color: var(--text); background: #efc87307; }
body.elevated .cleanup-picker button[aria-selected="true"] { border-color: #efc87355; background: #efc8730b; color: var(--gold); }
body.elevated .cleanup-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--ink);
  box-shadow: var(--lip);
}
body.elevated .cleanup-sample { min-width: 0; padding: 24px 27px 28px; }
body.elevated .cleanup-sample h3 { margin: 0 0 18px; color: #a6a095; font: 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
body.elevated .cleanup-copy { margin: 0; color: #bdb5a9; font: 17px/1.85 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
body.elevated .cleanup-after { border-left: 1px solid #efc87326; background: linear-gradient(145deg, #efc87307, transparent); }
body.elevated .cleanup-after h3 { color: var(--gold); }
body.elevated .cleanup-after .cleanup-copy { color: var(--text); }
body.elevated .cleanup-explanation { margin: 15px 0 0; color: #c2baae; font-size: 13px; line-height: 1.7; }
body.elevated .cleanup-qualification { margin: 7px 0 0; color: #9c968c; font-size: 11px; line-height: 1.7; }

/* A quiet, explicit diagram of where the work happens. */
body.elevated .local-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 84px;
  border-top: 1px solid var(--line);
}
body.elevated .local-proof-copy { max-width: 460px; min-width: 0; }
body.elevated .local-proof-copy > p:not(.eyebrow) { margin: 23px 0 15px; color: var(--muted); font-size: 16px; line-height: 1.85; }
body.elevated .local-proof-copy .text-link { color: var(--gold); border-color: #efc8734d; }
body.elevated .local-proof-visual {
  min-width: 0;
  width: 100%;
  max-width: 460px;
  justify-self: end;
}
body.elevated .local-device {
  overflow: hidden;
  padding: 28px 30px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ink);
  box-shadow: var(--lip);
}
body.elevated .local-device-top { display: flex; align-items: center; gap: 15px; padding-bottom: 24px; border-bottom: 1px solid #efc87328; }
body.elevated .local-device-top > img { flex: none; width: 48px; height: 48px; object-fit: contain; }
body.elevated .local-device-top strong { display: block; font: 500 19px/1.4 var(--sans); }
body.elevated .local-device-top small { display: block; margin-top: 3px; color: #a49e94; font-size: 13px; line-height: 1.5; }
body.elevated .local-pipeline { display: grid; gap: 0; margin: 0; padding: 16px 0; list-style: none; }
body.elevated .local-pipeline li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  min-height: 84px;
  padding-block: 14px;
  color: #d6cec0;
}
body.elevated .local-pipeline li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 1px;
  background: #efc87330;
}
body.elevated .local-pipeline li:first-child::before { top: 50%; }
body.elevated .local-pipeline li:last-child::before { bottom: 50%; }
body.elevated .local-pipeline li > span {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid #efc87348;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font: 10px/1 var(--mono);
}
body.elevated .local-pipeline li > div { grid-column: 2; grid-row: 1; }
body.elevated .local-pipeline strong { display: block; font-size: 17px; line-height: 1.45; font-weight: 500; }
body.elevated .local-pipeline small { display: block; margin-top: 4px; color: #a49d93; font-size: 13px; line-height: 1.6; }
body.elevated .local-status {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  margin-block: 0;
  margin-inline: -30px;
  padding: 15px 30px;
  border-top: 1px solid #efc87324;
  background: #efc87304;
  color: #c9bcae;
  font: 11px/1.5 var(--mono);
  letter-spacing: 0;
}
body.elevated .local-status i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* Everyday product stories in Beam’s own voice. */
body.elevated .voices.section {
  margin: 12px 0 32px;
  padding: clamp(27px, 3.3vw, 44px);
  border: 1px solid #ead5aa;
  border-radius: 16px;
  background: linear-gradient(125deg, #f5eee0 0%, #eee2cb 100%);
  color: #332b22;
  box-shadow: inset 0 1px 0 #fffaf1, 0 18px 46px #00000018;
}
body.elevated .voices-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 29px; }
body.elevated .voices .eyebrow { color: #765526; margin-bottom: 15px; }
body.elevated .voices h2 { margin: 0; font: 400 clamp(36px, 4vw, 46px)/1.13 var(--serif); letter-spacing: -.035em; }
body.elevated .voices h2 em { color: #805a25; }
body.elevated .voices-intro { max-width: 300px; margin: 0; padding-left: 17px; border-left: 1px solid #b79962; color: #5d5141; font-size: 14px; line-height: 1.65; }
body.elevated .voices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.elevated .voice-use-case { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 25px 24px 0; border-top: 1px solid #b59b7066; }
body.elevated .voice-use-case:first-child { padding-left: 0; }
body.elevated .voice-use-case:last-child { padding-right: 0; }
body.elevated .voice-use-case + .voice-use-case { border-left: 1px solid #b59b7045; }
body.elevated .voice-context { margin: 0 0 19px; color: #765526; font: 11px/1.5 var(--mono); letter-spacing: .09em; }
body.elevated .voice-use-case h3 { margin: 0 0 15px; color: #342c23; font: 400 clamp(23px, 2.3vw, 29px)/1.22 var(--serif); letter-spacing: -.025em; }
body.elevated .voice-description { margin: 0; color: #5d5141; font: 400 14px/1.8 var(--sans); }

/* Practical answers, kept close to the final invitation. */
body.elevated .faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 84px; border-top: 1px solid var(--line); }
body.elevated .faq-heading { min-width: 0; }
body.elevated .faq-heading > p:not(.eyebrow) { max-width: 29ch; margin: 20px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
body.elevated .faq-list { min-width: 0; border-top: 1px solid #efc87342; }
body.elevated .faq-list details { border-bottom: 1px solid var(--line); }
body.elevated .faq-list summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 75px;
  padding: 19px 0;
  color: #e7ddce;
  font: 400 19px/1.5 var(--sans);
  list-style: none;
  cursor: pointer;
}
body.elevated .faq-list summary::-webkit-details-marker { display: none; }
body.elevated .faq-list summary::after { content: "+"; flex: none; width: 16px; color: var(--gold); font: 400 23px/1 var(--sans); text-align: center; }
body.elevated .faq-list details[open] summary::after { content: "−"; }
body.elevated .faq-list summary:hover { color: var(--gold); }
body.elevated .faq-list details > p { max-width: 56ch; margin: -2px 30px 23px 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
body.elevated .faq-list details > p a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
body.elevated .closing { border-top: 1px solid var(--line); padding: 61px 0 30px; }
body.elevated .closing h2 { margin-bottom: 25px; }
body.elevated .closing > p:last-child { margin-top: 16px; font-size: 14px; color: #afa89d; }
body.elevated .beam-maker {
  max-width: 800px;
  margin-bottom: 17px;
  padding: 30px 26px 28px;
  border: 1px solid #d8b15d12;
  border-radius: 15px;
  background: radial-gradient(ellipse at 50% 22%, #d8b15d0c, transparent 76%), linear-gradient(180deg, #d8b15d03, transparent);
}
body.elevated .beam-maker::before { display: block; inset: 0 15% auto; height: 1px; background: linear-gradient(90deg, transparent, #d8b15d65, transparent); }
body.elevated .beam-maker .maker-emblem { gap: 20px; margin-bottom: 16px; }
body.elevated .beam-maker .maker-emblem::before, body.elevated .beam-maker .maker-emblem::after { width: 48px; }
body.elevated .beam-maker .maker-signature { font-size: 36px; color: var(--text); }
body.elevated .beam-maker .maker-note { margin: 12px 0 0; color: #c0b3a0; font-size: 14px; line-height: 1.65; }
body.elevated .beam-maker .maker-origin { margin-top: 19px; font-size: 10px; letter-spacing: .17em; color: #c5b8a5; }
body.elevated .beam-maker .maker-origin span:last-child { color: #ab9d89; }
@media (min-width: 900px) {
  body.elevated .beam-maker { flex-flow: row wrap; justify-content: center; align-items: center; column-gap: 16px; max-width: none; padding: 22px 34px 20px; }
  body.elevated .beam-maker .maker-emblem { margin: 0; gap: 0; }
  body.elevated .beam-maker .maker-emblem::before, body.elevated .beam-maker .maker-emblem::after { display: none; }
  body.elevated .beam-maker .col-mark { width: 30px; }
  body.elevated .beam-maker .maker-signature { font-size: 32px; }
  body.elevated .beam-maker .maker-note { flex-basis: 100%; margin-top: 6px; }
  body.elevated .beam-maker .maker-origin { flex-basis: 100%; margin-top: 10px; font-size: 11px; letter-spacing: .24em; color: var(--gold, #efc873); }
  body.elevated .beam-maker .maker-origin span:last-child { color: var(--gold, #efc873); }
}
body.elevated footer { align-items: start; padding: 25px 0 34px; color: #b0a596; font-size: 12px; }
body.elevated .footer-resources { gap: 8px; }
body.elevated .footer-links { gap: 8px 24px; font: 13px/1.7 var(--sans); }
body.elevated .footer-links a { display: inline-flex; align-items: center; min-height: 44px; margin-top: -10px; }
body.elevated .revision-link { display: inline-flex; align-items: center; min-height: 44px; border-color: transparent; font-size: 12px; color: #b4a897; }
body.elevated .revision-link:hover { color: var(--gold); }

@media (max-width: 1080px) {
  body.elevated .nav nav { gap: 22px; }
  body.elevated .hero { padding-top: 30px; }
  body.elevated .hero h1 { font-size: 68px; }
  body.elevated .demo-tabs button { padding-inline: 20px; }
  body.elevated .demo-workflow { gap: 28px; }
  body.elevated .demo-workflow-copy { padding-left: 0; }
  body.elevated .demo-workflow-copy h3 { font-size: 33px; }
  body.elevated .demo-workflow-copy > p:not(.eyebrow) { font-size: 15px; }
  body.elevated .workflow { gap: 36px; }
  body.elevated .workflow h2 { font-size: 40px; }
  body.elevated .local-proof, body.elevated .faq { gap: 54px; }
}

@media (max-width: 900px) {
  body.elevated .nav { gap: 18px; }
  body.elevated .brand { gap: 12px; }
  body.elevated .brand-seal { padding-left: 12px; }
  body.elevated .nav nav { gap: 20px; font-size: 14px; }
  body.elevated .nav-cta { font-size: 14px; }
  body.elevated .hero h1 { font-size: 66px; }
  body.elevated .hero .intro { font-size: 16px; }
  body.elevated .demo-tabs button { column-gap: 6px; padding-inline: 16px; }
  body.elevated .demo-tabs button small { font-size: 12px; }
  body.elevated .hero-showcase { padding-inline: 25px; }
  body.elevated .demo-workflow { padding: 26px 25px; gap: 25px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  body.elevated .demo-workflow-copy h3 { font-size: 30px; }
  body.elevated .demo-workflow-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.7; margin-block: 15px 10px; }
  body.elevated .section, body.elevated .workflow { padding-block: var(--section-space); }
  body.elevated .how-beam { padding-block: 44px; }
  body.elevated .section-head { gap: 30px; }
  body.elevated .section-head > p { font-size: 15px; max-width: 310px; }
  body.elevated :is(.section-head h2, .closing h2, .local-proof h2, .faq h2) { font-size: 40px; }
  body.elevated .use-case-grid { gap: 27px; }
  body.elevated .use-case h3 { font-size: 27px; }
  body.elevated .use-case p { font-size: 15px; }
  body.elevated .workflow { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.elevated .workflow-copy { max-width: 620px; }
  body.elevated .workflow-meetings .workflow-copy,
  body.elevated .workflow-meetings .workflow-figure { grid-column: auto; grid-row: auto; }
  body.elevated .workflow-intro { max-width: 560px; }
  body.elevated .workflow-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px; }
  /* The films are 1448 px, so they stop at 724 CSS px (1x on a 2x screen) and hang
     on the text column's left edge rather than floating inset from it. */
  body.elevated .workflow-figure { max-width: 724px; margin-inline: 0; }
  body.elevated .theatre-caption { min-height: 148px; gap: 15px; }
  body.elevated .style-picker { gap: 15px; }
  body.elevated .local-proof { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 35px; }
  body.elevated .local-device { padding-inline: 21px; }
  body.elevated .local-status { margin-inline: -21px; padding-inline: 21px; }
  body.elevated .faq { gap: 36px; }
  body.elevated .faq-list summary { font-size: 17px; }
}

@media (max-width: 760px) {
  body.elevated .voices-heading { display: block; margin-bottom: 25px; }
  body.elevated .voices-intro { max-width: 450px; margin-top: 20px; }
  body.elevated .voices-grid { grid-template-columns: minmax(0, 1fr); }
  body.elevated .voice-use-case, body.elevated .voice-use-case:first-child, body.elevated .voice-use-case:last-child { padding: 23px 0; }
  body.elevated .voice-use-case:last-child { padding-bottom: 0; }
  body.elevated .voice-use-case + .voice-use-case { border-left: 0; }
  body.elevated .voice-context { margin-bottom: 13px; }
  body.elevated .voice-use-case h3 { font-size: 27px; }

  body.elevated .brand-wordmark { font-size: 27px; }
  body.elevated .brand-icon { width: 38px; height: 38px; }
  body.elevated .nav nav { gap: 17px; }
  body.elevated .hero h1 { font-size: 64px; }
  body.elevated .demo-tabs button { grid-template-columns: 21px minmax(0, 1fr); padding-inline: 12px; }
  body.elevated .demo-tabs button strong { font-size: 15px; }
  body.elevated .demo-tabs button small { font-size: 11px; }
  body.elevated .demo-workflow { gap: 20px; padding-inline: 24px; }
  body.elevated .demo-workflow-copy h3 { font-size: 28px; }
  body.elevated .demo-workflow-copy .eyebrow { font-size: 10px; }
  body.elevated .demo-workflow-copy > p:not(.eyebrow) { font-size: 14px; }
  body.elevated .promise-line { gap: 16px; font-size: 12px; }
  body.elevated .section-head { display: block; }
  body.elevated .section-head > p { max-width: 540px; margin-top: 20px; font-size: 16px; }
  body.elevated .use-case-grid { gap: 23px; }
  body.elevated .use-case h3 { font-size: 25px; }
  body.elevated .use-case p { font-size: 15px; }
  body.elevated .use-case-link { font-size: 13px; }
  body.elevated .how-beam .how-beam__steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  body.elevated .how-beam .how-beam__visual { min-height: 87px; }
  body.elevated .how-beam .how-beam__copy { max-width: 48ch; }
  body.elevated .local-proof { grid-template-columns: minmax(0, 1fr); gap: 29px; }
  body.elevated .local-proof-copy { max-width: 540px; }
  body.elevated .local-proof-visual { width: 100%; max-width: 510px; margin-inline: auto; }
  body.elevated .faq { grid-template-columns: minmax(0, 1fr); gap: 29px; }
  body.elevated .faq-heading > p:not(.eyebrow) { max-width: 48ch; }
}

@media (max-width: 620px) {
  body.elevated .nav { height: auto; min-height: 114px; padding: 17px 0 10px; flex-wrap: wrap; gap: 13px; }
  body.elevated .brand { gap: 12px; }
  body.elevated .brand-wordmark { font-size: 27px; }
  body.elevated .brand-descriptor { letter-spacing: .11em; }
  body.elevated .nav nav { width: 100%; justify-content: flex-start; gap: 24px; font-size: 14px; }
  body.elevated .nav nav > .nav-cta { margin-left: auto; }
  body.elevated .nav nav > a:first-child { display: inline-flex; }
  body.elevated .nav nav > .nav-trust { display: none; }
  body.elevated .nav-cta { min-height: 44px; padding: 9px 14px; font-size: 14px; gap: 13px; }
  body.elevated .hero { padding: 25px 0 23px; }
  body.elevated .hero-copy > .eyebrow { margin-bottom: 17px; font-size: 10px; letter-spacing: .12em; }
  body.elevated .hero h1 { font-size: clamp(44px, 10.6vw, 58px); letter-spacing: -.035em; line-height: 1.075; margin-bottom: 20px; }
  body.elevated .hero .intro { max-width: 39ch; margin-bottom: 24px; font-size: 16px; line-height: 1.75; }
  body.elevated .hero .actions { gap: 21px; }
  body.elevated .primary { min-height: 50px; padding: 12px 20px; font-size: 16px; gap: 18px; }
  body.elevated .trial { font-size: 13px; margin-top: 14px; }
  body.elevated .requirements { font-size: 11px; margin-top: 4px; }
  body.elevated .text-link { font-size: 14px; }
  body.elevated .product-demo { margin-top: 25px; margin-bottom: 0; }
  body.elevated .demo-tabs { margin-bottom: 15px; }
  body.elevated .demo-tabs button { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; column-gap: 6px; row-gap: 3px; min-height: 70px; padding: 12px 6px; text-align: center; }
  body.elevated .demo-tabs button > span { font-size: 10px; }
  body.elevated .demo-tabs button strong { font-size: 14px; line-height: 1.4; }
  body.elevated .demo-tabs button small { flex-basis: 100%; margin-top: 0; font-size: 11px; line-height: 1.4; }
  /* Mobile selection is deliberate: natural pane heights keep native footage legible. */
  body.elevated .demo-panel { height: auto; min-height: 0; }
  body.elevated .dictation-demo { border-radius: 11px; }
  body.elevated .dictation-demo figcaption { padding: 11px 14px; font-size: 11px; }
  body.elevated .hero-showcase { min-height: 350px; height: auto; padding: 20px 17px 16px; border-radius: 11px; }
  body.elevated .stage-top { font-size: 9px; letter-spacing: .025em; gap: 8px; }
  body.elevated .native-label { gap: 5px; }
  body.elevated .native-label i { width: 4px; height: 4px; }
  body.elevated .stage-title { font-size: 29px; margin-top: 27px; line-height: 1.2; }
  body.elevated .hero-film { --frame-height: 125px; flex: none; width: calc(100% + 14px); height: 128px; min-height: 128px; margin: 0 -7px; }
  body.elevated .hero-picker { gap: 0; margin: -6px auto 5px; }
  body.elevated .hero-picker button { flex: none; width: 44px; height: 44px; padding: 20px 11px; }
  body.elevated .stage-bottom { align-items: center; gap: 12px; padding-top: 14px; font-size: 11px; line-height: 1.6; }
  body.elevated .stage-bottom kbd { font-size: 11px; margin-right: 3px; padding-inline: 4px; }
  body.elevated .stage-bottom > span:last-child { max-width: 12ch; text-align: right; }
  body.elevated .demo-workflow { grid-template-columns: minmax(0, 1fr); height: auto; padding: 25px 20px 20px; gap: 24px; border-radius: 11px; }
  body.elevated .demo-workflow-copy { max-width: none; }
  body.elevated .demo-workflow-copy .eyebrow { font-size: 10px; margin-bottom: 12px; }
  body.elevated .demo-workflow-copy h3 { font-size: 31px; text-wrap: initial; }
  body.elevated .demo-workflow-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.75; max-width: 48ch; margin: 15px 0 8px; }
  body.elevated .demo-workflow-film { width: 100%; max-width: 477px; justify-self: center; border-radius: 8px; }
  body.elevated .demo-utilities { align-items: center; gap: 12px; padding-top: 11px; min-height: 64px; }
  body.elevated .demo-footnote { font-size: 11px; max-width: 31ch; }
  body.elevated .motion-toggle { font-size: 11px; padding: 10px 11px; }
  body.elevated .promise-line { justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding-block: 20px; font-size: 11px; }
  body.elevated .promise-line i { width: 2px; height: 2px; }
  body.elevated .section, body.elevated .workflow, body.elevated .how-beam { padding-block: 43px; }
  body.elevated .section-head { margin-bottom: 29px; }
  body.elevated :is(.section-head h2, .closing h2, .local-proof h2, .faq h2) { font-size: 36px; letter-spacing: -.035em; }
  body.elevated .section-head > p { margin-top: 18px; font-size: 16px; line-height: 1.8; }
  body.elevated .eyebrow { font-size: 10px; margin-bottom: 15px; }
  body.elevated .section-head .eyebrow { margin-bottom: 14px; }
  body.elevated .cleanup { padding-block: 43px; }
  body.elevated .cleanup-discover { display: block; width: fit-content; margin: 7px 0 0; }
  body.elevated .cleanup-picker { gap: 3px 4px; margin-bottom: 15px; }
  body.elevated .cleanup-picker button { padding-inline: 11px; font-size: 12px; }
  body.elevated .cleanup-comparison { grid-template-columns: minmax(0, 1fr); border-radius: 11px; }
  body.elevated .cleanup-sample { padding: 20px; }
  body.elevated .cleanup-sample h3 { margin-bottom: 13px; font-size: 10px; }
  body.elevated .cleanup-copy { font-size: 16px; line-height: 1.8; }
  body.elevated .cleanup-after { border-left: 0; border-top: 1px solid #efc87326; }
  body.elevated .cleanup-explanation { font-size: 12px; margin-top: 13px; }
  body.elevated .use-case-grid { grid-template-columns: minmax(0, 1fr); gap: 27px; }
  body.elevated .use-case { padding-top: 20px; }
  body.elevated .use-case-index { font-size: 11px; }
  body.elevated .use-case h3 { font-size: 29px; margin: 13px 0 10px; }
  body.elevated .use-case p { max-width: 48ch; font-size: 16px; margin-bottom: 10px; }
  body.elevated .use-case-link { font-size: 14px; }
  body.elevated .how-beam .how-beam__heading { margin-bottom: 26px; }
  body.elevated .how-beam .how-beam__title { font-size: 36px; }
  body.elevated .how-beam .how-beam__eyebrow { font-size: 10px; }
  body.elevated .how-beam .how-beam__step-title { font-size: 28px; }
  body.elevated .how-beam .how-beam__copy { font-size: 16px; }
  body.elevated .workflow { gap: 26px; }
  body.elevated .workflow h2 { font-size: 36px; }
  body.elevated .workflow-intro { font-size: 16px; margin-block: 19px 23px; }
  body.elevated .workflow-details { grid-template-columns: minmax(0, 1fr); gap: 17px; }
  body.elevated .workflow-details dt, body.elevated .workflow-details dd { font-size: 15px; }
  body.elevated .workflow-link { margin-top: 21px; }
  body.elevated .workflow-figure figcaption { font-size: 11px; line-height: 1.7; }
  body.elevated .workflow-stage { border-radius: 9px; }
  body.elevated .style-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; margin-bottom: 21px; }
  body.elevated .style-picker button { padding: 12px 3px; min-height: 46px; font-size: 14px; }
  body.elevated .product-theatre { padding: 20px 18px 24px; border-radius: 11px; }
  body.elevated .theatre-meta { font-size: 9px; letter-spacing: .045em; gap: 16px; }
  body.elevated .theatre-caption { min-height: 0; padding-top: 20px; gap: 16px; }
  body.elevated .theatre-caption h3 { font-size: 29px; }
  body.elevated .theatre-caption p { font-size: 15px; line-height: 1.8; }
  body.elevated .element-picker button { font-size: 13px; padding-inline: 14px; }
  body.elevated .footage-note { font-size: 11px; line-height: 1.75; margin-top: 15px; }
  body.elevated .app-film { margin-top: 27px; border-radius: 9px; }
  body.elevated .benefits { padding-block: 30px; }
  body.elevated .benefits h3 { font-size: 27px; }
  body.elevated .benefits p { font-size: 15px; }
  body.elevated .local-proof { gap: 24px; }
  body.elevated .local-proof-copy > p:not(.eyebrow) { margin-top: 19px; font-size: 16px; }
  body.elevated .local-proof-visual { padding: 0; }
  body.elevated .local-device { padding: 23px 21px 0; border-radius: 14px; }
  body.elevated .local-device-top { padding-bottom: 21px; }
  body.elevated .local-pipeline li { min-height: 74px; column-gap: 12px; }
  body.elevated .local-status { margin-inline: -21px; padding-inline: 21px; font-size: 11px; }
  body.elevated .faq { gap: 25px; }
  body.elevated .faq-heading > p:not(.eyebrow) { font-size: 16px; margin-top: 18px; }
  body.elevated .faq-list summary { min-height: 73px; gap: 20px; font-size: 17px; line-height: 1.5; padding-block: 19px; }
  body.elevated .faq-list details > p { margin-right: 10px; font-size: 15px; }
  body.elevated .closing { padding: 43px 0 24px; }
  body.elevated .closing .eyebrow { font-size: 10px; }
  body.elevated .closing h2 { margin-bottom: 24px; }
  body.elevated .closing > p:last-child { font-size: 13px; }
  body.elevated .voices.section { margin: 4px 0 23px; padding: 25px 22px 27px; border-radius: 12px; }
  body.elevated .voices h2 { font-size: 35px; }
  body.elevated .voices-intro { padding-left: 13px; font-size: 13px; }
  body.elevated .voice-use-case h3 { font-size: 25px; }
  body.elevated .beam-maker { padding: 25px 18px; margin-bottom: 12px; border-radius: 12px; }
  body.elevated .beam-maker .maker-note { max-width: 30ch; font-size: 13px; margin-top: 12px; }
  body.elevated .beam-maker .maker-signature { font-size: 31px; }
  body.elevated .beam-maker .maker-origin { font-size: 10px; gap: 15px; letter-spacing: .14em; }
  body.elevated footer { flex-direction: column; gap: 8px; padding: 23px 0 26px; font-size: 12px; }
  body.elevated .footer-resources { justify-items: start; margin-top: 6px; gap: 5px; }
  body.elevated .footer-links { gap: 8px 24px; font-size: 13px; }
  body.elevated .footer-links a { margin-top: 0; }
}
/* Under 386 px the italic line at -.035em (341 px at 44 px) no longer fits
   between the 20 px gutters; it keeps the -.045em it always had, so it breaks
   where it always did. The first line keeps -.035em and its kerned L. */
@media (max-width: 385px) {
  body.elevated .hero h1 em { letter-spacing: -.045em; }
}

@media (max-width: 380px) {
  body.elevated .nav nav { gap: 11px; }
  body.elevated .nav-cta { padding-inline: 12px; }
  body.elevated .hero h1 { font-size: 44px; }
  body.elevated .hero-copy > .eyebrow { font-size: 9px; letter-spacing: .08em; }
  body.elevated .hero .actions { flex-direction: column; gap: 8px; }
  body.elevated .hero .intro { font-size: 15px; }
  body.elevated .demo-tabs button { padding-inline: 3px; column-gap: 4px; }
  body.elevated .demo-tabs button strong { font-size: 13px; }
  body.elevated .demo-tabs button small { font-size: 10px; }
  body.elevated .hero-showcase { padding-inline: 14px; }
  body.elevated .stage-top { font-size: 8px; }
  body.elevated .stage-title { font-size: 27px; }
  body.elevated .stage-bottom { font-size: 10px; gap: 7px; }
  body.elevated .demo-utilities { align-items: start; }
  body.elevated .demo-footnote { padding-top: 5px; }
  body.elevated .motion-toggle { padding-inline: 9px; }
  body.elevated .promise-line { column-gap: 9px; font-size: 10px; }
  body.elevated :is(.section-head h2, .closing h2, .local-proof h2, .faq h2),
  body.elevated .how-beam .how-beam__title, body.elevated .workflow h2 { font-size: 33px; }
  body.elevated .demo-workflow { padding-inline: 16px; }
  body.elevated .demo-workflow-copy h3 { font-size: 29px; }
  body.elevated .local-device { padding-inline: 17px; }
  body.elevated .local-status { margin-inline: -17px; padding-inline: 17px; font-size: 10px; }
}

/* Related product stories share a band and a common reading rhythm. */
body.elevated .workflow-pair, body.elevated .craft-pair { min-width: 0; }
body.elevated .closing-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px 28px; }
body.elevated .closing-actions .text-link { color: #d3c4ab; }
body.elevated .workflow-intro { color: var(--muted); }
body.elevated .how-beam .how-beam__heading { margin-bottom: 27px; }
body.elevated .how-beam .how-beam__visual { min-height: 97px; } /* the two-line result's height, so the three titles share a line */
body.elevated .how-beam .how-beam__step-title { margin-top: 13px; }

@media (min-width: 761px) {
  body.elevated .demo-workflow { min-height: 390px; }
  body.elevated .demo-workflow-film { max-width: 477px; }
  body.elevated .demo-utilities { min-height: 55px; }
  body.elevated .hero .actions .text-link { font-size: 15px; }
}

@media (min-width: 1000px) {
  body.elevated .workflow-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; padding-block: var(--section-space); border-top: 1px solid var(--line); }
  body.elevated .workflow-pair .workflow { display: flex; flex-direction: column; align-items: stretch; gap: 26px; padding: 0; border-top: 0; min-width: 0; }
  body.elevated .workflow-pair .workflow-copy { max-width: none; }
  body.elevated .workflow-pair .workflow .eyebrow { margin-bottom: 15px; }
  body.elevated .workflow-pair .workflow h2 { font-size: clamp(33px, 3vw, 38px); line-height: 1.17; }
  body.elevated .workflow-pair .workflow-intro { max-width: 48ch; margin: 18px 0; font-size: 15px; line-height: 1.75; }
  body.elevated .workflow-pair .workflow-details { gap: 12px; }
  body.elevated .workflow-pair .workflow-details dt, body.elevated .workflow-pair .workflow-details dd { font-size: 14px; line-height: 1.7; }
  body.elevated .workflow-pair .workflow-figure { width: 100%; margin: auto 0 0; }
  body.elevated .workflow-pair .workflow-figure figcaption { font-size: 11px; margin-top: 11px; }
}

@media (min-width: 1100px) {
  body.elevated .craft-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; padding-block: var(--section-space); border-top: 1px solid var(--line); }
  body.elevated .craft-pair > .section { min-width: 0; padding: 0; border: 0; }
  body.elevated .craft-pair .section-head { display: block; margin-bottom: 23px; }
  body.elevated .craft-pair .section-head h2 { font-size: 36px; line-height: 1.17; }
  body.elevated .craft-pair .section-head > p { max-width: 48ch; margin: 17px 0 0; font-size: 15px; line-height: 1.75; }
  body.elevated .craft-pair .style-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; margin-bottom: 21px; }
  body.elevated .craft-pair .style-picker button { min-height: 44px; padding: 9px 2px; font-size: 14px; }
  body.elevated .craft-pair .product-theatre { padding: 19px 22px 23px; }
  body.elevated .craft-pair .theatre-meta { font-size: 9px; letter-spacing: .055em; gap: 12px; }
  body.elevated .craft-pair .feature-film { --frame-height: 162px; height: 186px; padding: 12px 0; margin-inline: 0; }
  body.elevated .craft-pair .theatre-caption { flex-direction: column; align-items: start; min-height: 0; gap: 16px; padding-top: 18px; }
  body.elevated .craft-pair .theatre-caption h3 { font-size: 28px; }
  body.elevated .craft-pair .theatre-caption p { font-size: 14px; line-height: 1.75; }
  body.elevated .craft-pair .element-picker { justify-content: start; }
  body.elevated .craft-pair .element-picker button { padding-inline: 12px; font-size: 12px; }
  body.elevated .craft-pair .app-film { margin-top: 26px; }
  body.elevated .craft-pair .footage-note { text-align: center; font-size: 11px; margin-top: 11px; }
  body.elevated .craft-pair { grid-template-rows: auto auto 1fr auto; row-gap: 0; }
  body.elevated .craft-pair > .section { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  body.elevated .craft-pair > .section > .section-head { grid-row: 1; }
  body.elevated .craft-pair > .section > .style-picker { grid-row: 2; }
  body.elevated .craft-pair > .section > .product-theatre,
  body.elevated .craft-pair > .section > .app-film { grid-row: 3; margin-top: 0; }
  body.elevated .craft-pair > .section > .footage-note { grid-row: 4; }
  body.elevated .craft-pair .product-theatre { display: flex; flex-direction: column; justify-content: space-between; }
  body.elevated .craft-pair .app-film .native-video { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
}

@media (max-width: 760px) {
  body.elevated .closing-actions { gap: 12px 22px; }
}

/* Wide screens: the frame grows to 1600px with 54px to 96px gutters. The same
   frame is used by the pricing and page mastheads (beam-pricing.css, pages.css).
   All three demo panels are 2:1 border boxes, so switching tabs never moves the page. */
@media (min-width: 1200px) {
  body.elevated { --page-gutter: clamp(54px, 4.5vw, 96px); }
  body.elevated .shell { max-width: calc(1600px + 2 * var(--page-gutter)); }

  body.elevated .hero { padding-top: clamp(20px, 2.6svh, 36px); }
  body.elevated .hero-copy > .eyebrow { margin-bottom: 14px; }
  body.elevated .hero h1 { max-width: none; margin-bottom: 18px; font-size: clamp(74px, 4.8vw, 92px); }
  body.elevated .hero .intro { max-width: 36em; margin-bottom: 20px; font-size: clamp(17px, 1.1vw, 20px); }
  body.elevated .trial { font-size: 14px; }

  body.elevated .product-demo { margin-top: 26px; }
  body.elevated .demo-tabs { margin-bottom: 14px; }
  body.elevated .demo-tabs button { padding-inline: 28px; }
  body.elevated .demo-tabs button strong { font-size: 17px; }
  body.elevated .demo-tabs button small { font-size: 14px; }
  body.elevated .demo-panel { container-type: inline-size; }
  body.elevated .dictation-demo { box-sizing: border-box; aspect-ratio: 2 / 1; }
  body.elevated .dictation-live { height: 100%; aspect-ratio: auto; }
  body.elevated .demo-workflow {
    --wf-pad: clamp(24px, 3cqi, 48px);
    aspect-ratio: 2 / 1;
    min-height: auto;
    grid-template-columns: minmax(0, 1fr) min(calc((50cqi - 2 * var(--wf-pad) - 2px) * 1.3212), 56cqi);
    gap: clamp(28px, 4cqi, 64px);
    padding: var(--wf-pad) calc(var(--wf-pad) * 1.25);
  }
  body.elevated .demo-workflow-copy { max-width: 34em; padding-left: 0; }
  body.elevated .demo-workflow-copy h3 { font-size: clamp(28px, 3.1cqi, 46px); }
  body.elevated .demo-workflow-film { max-width: none; }

  /* Below the opening: headings stack over their paragraph, and the privacy
     diagram sits on the same two columns as the paired sections. */
  body.elevated .section-head { display: block; }
  body.elevated .section-head > p { max-width: 48ch; margin-top: 18px; }
  body.elevated .local-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; }
  body.elevated .local-proof-copy { max-width: 560px; }
  body.elevated .local-proof-visual { max-width: none; justify-self: stretch; }
  body.elevated .cleanup-copy { font-size: clamp(17px, 1.2vw, 21px); }
}

/* Playback remains controlled by the shared motion controller. */
:root[data-motion="paused"] body.elevated *,
:root[data-motion="paused"] body.elevated *::before,
:root[data-motion="paused"] body.elevated *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  body.elevated *, body.elevated *::before, body.elevated *::after { animation: none !important; transition: none !important; }
  body.elevated .reveal { opacity: 1; transform: none; }
  body.elevated .primary:hover, body.elevated .nav-cta:hover,
  body.elevated .primary:hover .cta-arrow, body.elevated .nav-cta:hover .cta-arrow { transform: none; }
}

/* Reading sizes (2026-11-09). On true black at 2x, light text under about 14 px
   draws thin, and the wide frame made 14 px running text look smaller still.
   Running text now grows with the frame to 18 px, secondary sentences hold
   14 to 15 px, notes and captions never drop under 13 px, and mono labels
   hold 11 px on phones and 12 px on wide screens. Sizes only, no copy. */
body.elevated { --type-read: 16px; --type-small: 14px; --type-note: 13px; --type-label: 12px; }
@media (min-width: 1200px) {
  body.elevated { --type-read: clamp(16px, calc(.42vw + 10.4px), 18px); --type-small: 15px; --type-note: 14px; }
}
/* The doubled class lifts these rules over the paired sections' own sizes
   (body.elevated .workflow-pair ..., body.elevated .craft-pair ...). */
body.elevated.elevated :is(.section-head > p, .workflow-intro, .workflow-details dt, .workflow-details dd,
  .theatre-caption p, .local-proof-copy > p:not(.eyebrow), .faq-heading > p:not(.eyebrow),
  .faq-list details > p, .how-beam .how-beam__copy, .demo-workflow-copy > p:not(.eyebrow),
  .beam-maker .maker-note) { font-size: var(--type-read); }
body.elevated.elevated :is(.trial, .closing > p:last-child, .cleanup-explanation, .local-pipeline small,
  .local-device-top small, .element-picker button, .cleanup-picker button, .footer-links) { font-size: var(--type-small); }
body.elevated.elevated :is(.requirements, .demo-footnote, .workflow-figure figcaption, .footage-note,
  .cleanup-qualification, .promise-line, .motion-toggle, footer) { font-size: var(--type-note); }
body.elevated.elevated :is(.eyebrow, .how-beam .how-beam__eyebrow, .how-beam .how-beam__number,
  .demo-tabs button > span, .cleanup-sample h3, .local-pipeline li > span, .local-status,
  .theatre-meta, .beam-maker .maker-origin) { font-size: var(--type-label); }
body.elevated .demo-tabs button small { font-size: var(--type-small); }
@media (max-width: 900px) { body.elevated .demo-tabs button small { font-size: 13px; } }
/* Phones: three tabs share 350 px, so a subtitle cannot fit on one line at a
   size worth reading. It stays in each tab's name for assistive technology. */
@media (max-width: 620px) {
  body.elevated .demo-tabs button small { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  body.elevated .demo-tabs button { min-height: 56px; }
}
/* Headings balance their lines, and the gold second line of a two-line
   heading balances on its own, so neither leaves a word alone. */
body.elevated :is(h1, h2, h3) { text-wrap: balance; }
body.elevated :is(h1, h2, h3) br + em { display: block; text-wrap: balance; }
/* Paragraphs and notes set their last lines so no word is left alone. Not in the
   live demo, whose message grows a word at a time and must never reflow. */
body.elevated :where(main, footer) :where(p, li, dd, blockquote, figcaption):not(#dictation-live *) { text-wrap: pretty; }
/* At 320 to 380 px the nav and its button share 280 px. */
@media (max-width: 380px) {
  body.elevated .nav nav, body.elevated .nav-cta { font-size: 13px; }
}
/* With no share sheet and the clipboard refused (some in-app browsers), a door
   asks the reader to open justbeaming.com on their Mac (assets/beam-door.js),
   a label twice the button's width. It may wrap rather than push the page
   sideways: on a phone the masthead button takes a row of its own under the
   links, and a button with no room breaks into balanced lines. A label that
   fits never wraps. Same rules as beam-masthead.css on the other pages. */
.beam-door-phone body.elevated :is(.nav-cta, .primary)[data-door] { white-space: normal; text-wrap: balance; text-align: center; }
@media (max-width: 620px) {
  .beam-door-phone body.elevated .nav nav { flex-wrap: wrap; }
}
/* Films are never drawn past their own pixels on a Retina Mac or iPad: a film
   upscaled even 8% draws its text softer than the live words beside it. Each
   pill film stops at half its width in CSS px (1140 px of elements film, 570
   CSS px), and the Notes and Meetings films (1448 px) at 724. On a 3x phone a
   film stops at its width x 1.25 / 3, where the extra pixels hide any softness. */
body.elevated .pill-stage .pill-layer[data-shape=classic] { max-width: 576px; }
body.elevated .pill-stage .pill-layer[data-shape=elements] { max-width: 570px; }
body.elevated .pill-stage .pill-layer[data-shape=sliver] { max-width: 700px; }
body.elevated .pill-stage .pill-layer[data-shape=island] { max-width: 789px; }
body.elevated .pill-stage .pill-layer[data-shape=pulse] { max-width: 726px; }
body.elevated .pill-stage .pill-layer[data-shape=meter] { max-width: 762px; }
body.elevated .workflow-figure { max-width: 726px; }
body.elevated .demo-workflow-film { max-width: min(100%, 726px); }
@media (min-resolution: 2.5dppx) {
  body.elevated .pill-stage .pill-layer[data-shape=sliver] { max-width: 583px; }
  body.elevated .pill-stage .pill-layer[data-shape=island] { max-width: 657px; }
  body.elevated .pill-stage .pill-layer[data-shape=pulse] { max-width: 605px; }
  body.elevated .pill-stage .pill-layer[data-shape=meter] { max-width: 635px; }
  body.elevated .pill-stage .pill-layer:is([data-shape=classic], [data-shape=elements]) { max-width: 475px; }
  body.elevated .workflow-figure { max-width: 605px; }
  body.elevated .demo-workflow-film { max-width: min(100%, 605px); }
}