/*
  Sagetech FieldLink - the website's style sheet.

  The job-site HUD the app is dressed in: ink, the brand orange and yellow as
  neon, corners cut at the top left and bottom right, mono readouts and
  caution tape. Colours and faces are tokens.css, written from the app's own
  theme at build time; nothing here names a colour the app does not have,
  bar the few tints mixed from them.

  Every word on a page is at least 4.5:1 on what it sits on. A button is
  46 px tall on a desk (44 to 48) and at least 44 px on a phone, with the two
  opposite corners cut. Chips and tags stay square. Motion is for sections
  arriving and things under a pointer, and none of it runs with reduced
  motion on.
*/

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Clearance for a jump lives on the section (scroll-margin-top), so it is
     not added again here. */
  /* The bar keeps a gutter of its own, the same width whether or not the
     page is long enough to scroll, so a short page and a long one share edges. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #6b5344 transparent;
}
html::-webkit-scrollbar { width: 16px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: #6b5344;
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--body);
  font: 400 15px/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Temporary launch page. The public product tour returns after billing and
   the mobile releases are ready; signed-in administrators keep their door.
   --------------------------------------------------------------------------- */
.page-coming-soon main { min-height: 100vh; }
.soon-page {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
}
.soon-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .55;
  background-image:
    linear-gradient(rgb(255 122 19 / .12) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 122 19 / .12) 1px, transparent 1px);
  background-size: 64px 64px;
}
.soon-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  clip-path: polygon(0 0, 58% 0, 38% 100%, 0 100%);
  opacity: .94;
}
.soon-header {
  width: min(1440px, 100% - 48px);
  min-height: 82px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgb(255 122 19 / .45);
}
.soon-header .brand-words { display: flex; }
.soon-header-actions { display: flex; align-items: center; gap: 12px; }
.soon-main {
  width: min(1440px, 100% - 48px);
  margin: auto;
  padding-block: clamp(34px, 7vh, 84px);
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(36px, 6vw, 104px);
}
.soon-copy { position: relative; z-index: 2; min-width: 0; }
.soon-copy h1 {
  margin-top: 18px;
  color: var(--cream);
  font: 700 clamp(44px, 6.2vw, 92px)/.88 var(--f-headline);
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
.soon-copy h1 span,
.soon-copy h1 strong { display: block; }
.soon-copy h1 span { font-size: .42em; line-height: 1; margin-bottom: 18px; color: var(--body); }
.soon-copy h1 strong { color: var(--fg-gold, var(--yellow)); font-weight: 700; }
.soon-lead {
  max-width: 610px;
  margin-top: 28px;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--body);
  text-wrap: pretty;
}
.soon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 34px; }
.soon-support {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--cream);
  font: 700 14px/1 var(--f-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration-color: var(--orange);
  text-underline-offset: 7px;
}
.soon-status {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 34px;
  color: var(--dim);
  font: 400 11px/1.4 var(--f-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.soon-status span { display: inline-flex; align-items: center; gap: 8px; }
.soon-status i { width: 7px; height: 7px; background: var(--orange); box-shadow: 0 0 12px rgb(255 122 19 / .72); }
.soon-status span:first-child i { background: #66D17A; box-shadow: 0 0 12px rgb(102 209 122 / .66); }
.soon-visual { position: relative; width: 100%; min-width: 0; padding: 34px 0 72px 62px; }
.soon-browser {
  overflow: hidden;
  border: 2px solid #151518;
  border-radius: 14px;
  background: #151518;
  box-shadow: 0 34px 70px -30px #000;
}
.soon-browser-bar {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid #302F33;
  background: #222226;
  color: #C9C6C1;
  font: 400 11px/1 var(--f-mono);
  letter-spacing: .04em;
}
.soon-dots { display: flex; gap: 6px; }
.soon-dots i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.soon-dots i:nth-child(2) { background: #FEBC2E; }
.soon-dots i:nth-child(3) { background: #28C840; }
.soon-browser > img { width: 100%; aspect-ratio: 1.72; object-fit: cover; object-position: top left; }
.soon-phone {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: clamp(142px, 24%, 210px);
  padding: 9px 7px;
  border: 2px solid #8F8B84;
  border-radius: 30px;
  background: #111214;
  box-shadow: 0 26px 48px -20px #000;
}
.soon-phone > img { width: 100%; border-radius: 22px; }
.soon-island {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 50%;
  width: 31%;
  height: 14px;
  translate: -50% 0;
  border-radius: 999px;
  background: #050506;
}
.soon-stamp {
  position: absolute;
  right: -16px;
  bottom: 27px;
  padding: 8px 14px;
  border: 2px solid var(--orange);
  color: var(--orange);
  font: 700 12px/1 var(--f-mono);
  letter-spacing: .16em;
  transform: rotate(-4deg);
}
.soon-rail {
  width: min(1440px, 100% - 48px);
  min-height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font: 400 12px/1.3 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.soon-rail a { min-height: 44px; display: inline-flex; align-items: center; color: var(--body); text-decoration: none; }
.soon-rail a:hover,
.soon-rail a:focus-visible { color: var(--fg-gold, var(--yellow)); }
.soon-contact { color: var(--cream); font-weight: 700; }
.soon-separator { width: 1px; height: 22px; background: var(--line); }

@media (max-width: 920px) {
  .soon-main { grid-template-columns: 1fr; gap: 18px; padding-block: 40px 32px; }
  .soon-copy { text-align: center; }
  .soon-copy .hud { display: inline-block; }
  .soon-lead { margin-inline: auto; }
  .soon-actions,
  .soon-status { justify-content: center; }
  .soon-visual { width: min(720px, 100%); margin-inline: auto; padding-left: 52px; }
  .soon-stamp { right: 0; }
  .soon-grid::after { clip-path: polygon(0 0, 100% 0, 100% 42%, 0 68%); }
}
@media (max-width: 560px) {
  .soon-header,
  .soon-main,
  .soon-rail { width: min(100% - 28px, 1440px); }
  .soon-header { min-height: 70px; gap: 10px; }
  .soon-header .brand-mark { width: 34px; height: 34px; }
  .soon-header .wordmark { font-size: 13px; }
  .soon-header .version { font-size: 9px; }
  .soon-header-actions .btn { display: none; }
  .soon-main { padding-block: 34px 24px; }
  .soon-copy h1 { font-size: clamp(39px, 13.5vw, 62px); }
  .soon-copy h1 span { font-size: .38em; margin-bottom: 13px; }
  .soon-lead { margin-top: 22px; font-size: 16px; }
  .soon-actions { margin-top: 26px; }
  .soon-actions .btn { width: 100%; }
  .soon-actions .btn-face { width: 100%; }
  .soon-status { gap: 10px 16px; margin-top: 26px; }
  .soon-visual { padding: 18px 0 68px 28px; }
  .soon-browser { border-radius: 9px; }
  .soon-browser-bar { height: 34px; padding-inline: 10px; gap: 9px; font-size: 8px; }
  .soon-dots { gap: 4px; }
  .soon-dots i { width: 7px; height: 7px; }
  .soon-phone { width: 29%; min-width: 104px; border-radius: 22px; padding: 6px 5px; }
  .soon-phone > img { border-radius: 16px; }
  .soon-island { top: 9px; height: 9px; }
  .soon-stamp { right: -3px; bottom: 28px; font-size: 9px; }
  .soon-rail { justify-content: center; padding-block: 16px; gap: 4px 16px; text-align: center; }
  .soon-contact { width: 100%; }
  .soon-separator { display: none; }
}

html[data-theme="light"] .soon-page { background: #FAF9F6; }
html[data-theme="light"] .soon-grid { opacity: .65; }
html[data-theme="light"] .soon-grid::after { background: #FAF9F6; }
html[data-theme="light"] .soon-browser { border-color: #111214; background: #111214; box-shadow: 0 34px 70px -30px rgb(40 30 20 / .38); }

h1, h2, h3, p, figure, ol, ul { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgb(255 122 19 / .35); color: var(--cream); }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
main:focus { outline: none; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 300;
  padding: 16px 20px; background: var(--yellow); color: var(--ink);
  font: 700 16px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

.i {
  font-family: var(--f-icons);
  font-weight: 400; font-style: normal; line-height: 1;
  display: inline-block; flex: none;
  font-size: 24px; letter-spacing: 0; text-transform: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(1240px, 100% - 80px); } }
/* A narrow class used to center a shorter column, which put headlines to the
   right of the logo. The column is one width on every page. Readable measure
   lives on the paragraphs, left-aligned with that column. */
.wrap.narrow { max-width: none; }
.pad { padding-block: 36px; }
@media (min-width: 760px) { .pad { padding-block: 52px; } }
.band { position: relative; }
.band > .wrap, .stats-band > .wrap { container-type: inline-size; }
.band.alt { background: var(--panel); }
.band + .band, .stats-band + .band { border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------------------
   The cut-corner shape, and an edge that follows the cut.
   Corners are cut at the top left and bottom right by --cut. The edge is a
   border plus two thin diagonal lines where the corners were, all in --edge,
   over --fill: so an edged box can be see-through, and still keep its line.
   --------------------------------------------------------------------------- */
.cut, .edged, .panel, .tile-face, .tiles-close-face, .trade-face, .plan-face, .step-num, .billing, .seg-thumb,
.icon-box, .mod-panel, .mod-icon, .ws, .ph-card, .ph-btn, .laptop,
.plan.skeleton {
  clip-path: polygon(var(--cut, 12px) 0, 100% 0, 100% calc(100% - var(--cut, 12px)), calc(100% - var(--cut, 12px)) 100%, 0 100%, 0 var(--cut, 12px));
}

.edged, .panel, .tile-face, .tiles-close-face, .trade-face, .plan-face, .step-num, .billing,
.icon-box, .mod-panel, .mod-icon, .ws, .ph-card, .ph-btn, .laptop {
  --bw: 2px;
  border: var(--bw) solid var(--edge, var(--line));
  background:
    linear-gradient(135deg, transparent 50%, var(--edge, var(--line)) 50% calc(50% + var(--bw)), transparent calc(50% + var(--bw)))
      left top / var(--cut, 12px) var(--cut, 12px) no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - var(--bw)), var(--edge, var(--line)) calc(50% - var(--bw)) 50%, transparent 50%)
      right bottom / var(--cut, 12px) var(--cut, 12px) no-repeat border-box,
    var(--sheen, linear-gradient(transparent, transparent)) padding-box;
  background-color: var(--fill, transparent);
}

/* ---------------------------------------------------------------------------
   Labels, headings, tape
   --------------------------------------------------------------------------- */
.hud {
  font: 400 12px/1.4 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-accent, var(--orange));
}
.hud .br { color: rgb(255 122 19 / .75); }
.hud.y, .hud.y .br { color: var(--fg-gold, var(--yellow)); }
.hud.sm { font-size: 11px; }

/* The section's number again, big and outlined, at the end of its rule. */
.head-row[data-index]::after {
  content: attr(data-index);
  flex: none; margin: -8px 0;
  font: 700 32px/1 var(--f-display); letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 1.2px rgb(255 122 19 / .45);
  pointer-events: none; user-select: none;
}
@media (max-width: 699px) { .head-row[data-index]::after { display: none; } }
.band > .wrap { position: relative; isolation: isolate; }
.head-row { display: flex; align-items: center; gap: 16px; }
.head-row .hud { flex: none; max-width: calc(100% - 40px); }
.rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgb(255 122 19 / .55), var(--line) 35%, rgb(42 42 48 / 0)); }

.title {
  margin-top: 12px;
  font: 700 28px/1.05 var(--f-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--cream);
  text-wrap: balance;
}
@media (min-width: 760px) { .title { font-size: 40px; } }

.sub {
  margin-top: 12px;
  max-width: none;
  font-size: 15px;
  text-wrap: pretty;
}

.hazard {
  height: 12px;
  background: repeating-linear-gradient(120deg, var(--yellow) 0 12px, var(--ink) 12px 24px);
}
.hazard.h10 { height: 10px; background: repeating-linear-gradient(120deg, var(--yellow) 0 10px, var(--ink) 10px 20px); }
.hazard.h6 { height: 6px; background: repeating-linear-gradient(120deg, var(--yellow) 0 7px, var(--ink) 7px 14px); }

/* A grid of hairlines that fades out towards the edges, and two soft glows. */
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(255 122 19 / .07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 122 19 / .07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 60% 45%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 90% at 60% 45%, #000 25%, transparent 78%);
}
.glow { position: absolute; border-radius: 50%; }
.glow.g1 {
  width: 520px; height: 520px; right: -160px; top: -120px;
  background: radial-gradient(circle, rgb(255 122 19 / .08), transparent 68%);
}
.glow.g2 {
  width: 420px; height: 420px; left: -180px; top: -200px;
  background: radial-gradient(circle, rgb(255 210 28 / .04), transparent 65%);
}

/* ---------------------------------------------------------------------------
   Buttons: one height, the icon and the words centered as a group, with the
   two opposite corners cut. The link is the stroke. Its background is the
   border colour and the clip is the outer chamfer. The face is inset by the
   stroke and clipped to the same chamfer, pulled in far enough that a 45°
   diagonal is the same thickness as the straight edges (a plain inset would
   leave the diagonal thinner by √2). No border, and no diagonal painted on
   afterwards: those two never met.
   --------------------------------------------------------------------------- */
.btn {
  --cut: 10px;
  --bw: 2px;
  /* (2 - √2): how much of the cut the stroke consumes so the diagonal matches. */
  --cut-in: calc(var(--cut) - 0.58578643763 * var(--bw));
  --edge: transparent;
  display: inline-flex;
  box-sizing: border-box;
  height: 46px; min-height: 46px;
  padding: var(--bw);
  border: 0; border-radius: 0;
  background: var(--edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .18s ease, transform .18s ease;
}
.btn-face {
  --track: .08em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box;
  flex: 1 1 auto; align-self: stretch;
  width: 100%; min-width: 0; height: auto; min-height: 0;
  padding: 0 14px;
  border: 0; border-radius: 0;
  background: var(--btn-fill, var(--fill, var(--ink)));
  clip-path: polygon(var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in));
  font: 700 14px/1 var(--f-display);
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
/* Tracking adds space after the last letter, so a centered group sits left
   of the middle. The label gives that space back. Rajdhani's caps sit high
   in the em box; trimming to the cap height lets the row center on the ink. */
.btn-label {
  margin-inline-end: calc(var(--track) * -1);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.btn-face .i { font-size: 17px; letter-spacing: 0; line-height: 1; }
/* The bolt is a narrow glyph in a square icon advance, so its empty left
   side would leave the icon-and-words group sitting right of center. */
.btn[data-trial] .btn-face .i { margin-inline-start: -0.25em; }
.btn.lg .btn-face { padding: 0 16px; font-size: 14px; --track: .08em; }
.btn.lg .btn-face .i { font-size: 16px; }
.btn.block { display: flex; width: 100%; }

.btn.primary {
  background: linear-gradient(180deg, #FFE04D, var(--yellow) 55%, #F5C400);
}
.btn.primary .btn-face { background: transparent; color: var(--ink); }
.btn.secondary { --edge: var(--orange); }
.btn.secondary .btn-face { color: var(--cream); }
.btn.ghost { --edge: var(--control-edge); }
.btn.ghost .btn-face { color: var(--cream); }
/* The bar is not the page colour, so an outlined button there fills with the
   bar, and again once the bar darkens on scroll. */
.topbar .btn { --btn-fill: rgb(54 36 24); }
.scrolled .topbar .btn { --btn-fill: rgb(72 46 28); }

.btn:hover, .btn:focus-visible { transform: translateY(-1px); }
/* A light that crosses the yellow buttons under a pointer. */
.btn.primary .btn-face { position: relative; overflow: hidden; }
.btn.primary .btn-face::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn.primary:hover .btn-face::after, .btn.primary:focus-visible .btn-face::after {
  opacity: 1; left: 120%; transition: left .6s ease, opacity .2s ease;
}
.btn.primary:hover, .btn.primary:focus-visible { filter: drop-shadow(0 0 14px rgb(255 210 28 / .45)) brightness(1.05); }
.btn.secondary:hover, .btn.secondary:focus-visible { filter: drop-shadow(0 0 14px rgb(255 122 19 / .5)); }
.btn.secondary:hover .btn-face, .btn.secondary:focus-visible .btn-face,
.btn.ghost:hover .btn-face, .btn.ghost:focus-visible .btn-face {
  background: color-mix(in srgb, var(--orange) 12%, var(--btn-fill, var(--fill, var(--ink))));
}
.btn.ghost:hover, .btn.ghost:focus-visible { filter: drop-shadow(0 0 12px rgb(255 122 19 / .35)); }
.btn.ghost:hover, .btn.ghost:focus-visible { --edge: rgb(255 122 19 / .7); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.btn:disabled { opacity: .45; cursor: default; transform: none; filter: none; }

/* ---------------------------------------------------------------------------
   The bar across the top
   --------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgb(54 36 24);
  border-bottom: 1px solid rgb(255 122 19 / .35);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, rgb(255 122 19 / .95) 50%, transparent);
  opacity: 1;
}
.scrolled .topbar {
  background: rgb(72 46 28);
  box-shadow: 0 12px 28px -16px rgb(90 40 8 / .55);
}
.scrolled .topbar::after { opacity: 1; }

.bar { display: flex; align-items: center; gap: 12px; min-height: 64px; }

/* A jump from the menu lands the section below the sticky bar. The bar is
   64px plus its 1px edge, and the section keeps about 16px of the page
   under that edge. The same offset at every width. */
#top,
#how,
#modules,
#trades,
#setup,
#pricing,
#start,
#main {
  scroll-margin-top: calc(65px + 16px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; min-height: 52px; }
.brand-mark { width: 36px; height: 36px; }
.brand.big .brand-mark { width: 64px; height: 64px; }
.brand-words { display: none; flex-direction: column; gap: 3px; }
@media (min-width: 680px) { .brand-words { display: flex; } }
.foot-brand .brand-words { display: flex; }
@media (max-width: 359px) {
  .foot-brand .brand-mark { width: 48px; height: 48px; }
  .foot-brand .wordmark { font-size: 18px; }
}
.wordmark { font: 700 16px/1 var(--f-display); letter-spacing: .08em; color: var(--cream); white-space: nowrap; }
.wordmark b { color: var(--fg-accent, var(--orange)); font-weight: 700; }
.version { font: 400 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--fg-accent, var(--orange)); }

.nav { display: none; margin-left: auto; }
@media (min-width: 980px) { .nav { display: flex; } }
.nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 10px;
  font: 400 13px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--dim); text-decoration: none;
  transition: color .16s ease;
}
@media (min-width: 1100px) { .nav a { padding: 0 14px; letter-spacing: .2em; } .nav a::after { left: 14px; right: 14px; } }
.nav a::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 2px;
  background: var(--orange); box-shadow: 0 0 10px var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav a:hover, .nav a:focus-visible, .nav a.active, .nav a[aria-current='page'] { color: var(--fg-gold, var(--yellow)); }
.nav a.active::after, .nav a[aria-current='page']::after { transform: scaleX(1); }

.bar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 980px) { .bar-actions { margin-left: 12px; } }
@media (max-width: 699px) {
  /* The wordmark, Sign in, Free trial and the menu do not fit together.
     Sign in stays on the hero. Free trial and the menu stay in the bar. */
  .bar-actions > [data-signin] { display: none; }
}
@media (max-width: 419px) {
  .bar { gap: 8px; }
  .bar-actions { gap: 8px; }
  .bar-actions > .btn .btn-face { padding: 0 14px; --track: .08em; }
}
@media (max-width: 359px) {
  .bar-actions { gap: 6px; }
  .bar-actions > .btn .btn-face { padding: 0 10px; font-size: 14px; --track: .06em; }
}
/* Below the point the section links appear, the name may shrink and the
   menu may not. A wide wordmark used to push the menu past the window, so
   a phone showed Free trial alone. */
@media (max-width: 979px) {
  .brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .brand-words { min-width: 0; overflow: hidden; }
  .wordmark { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bar-actions { flex: none; }
  .menu { flex: none; }
}
.signed-in .topbar [data-trial] { display: none !important; }

.menu { position: static; }
@media (min-width: 980px) { .menu { display: none; } }
.menu > summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center; width: 52px; height: 52px;
  border: 2px solid var(--control-edge);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu-bars { display: grid; gap: 5px; width: 20px; }
.menu-bars span { height: 2px; background: var(--cream); transition: transform .2s ease, opacity .2s ease; }
.menu[open] .menu-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu[open] .menu-bars span:nth-child(2) { opacity: 0; }
.menu[open] .menu-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-sheet {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 60;
  padding: 12px 20px 24px;
  background: #0E0E11;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -20px #000;
}
/* A closed menu still lays its panel out, squeezed to the button, and the
   links run off the screen. The panel stays out of the page until it opens. */
.menu:not([open]) .menu-sheet { display: none; }
.menu-sheet nav { display: grid; margin-bottom: 14px; }
.menu-sheet nav a {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--line);
  font: 400 14px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
}
.menu-sheet nav a[aria-current='page'] { color: var(--fg-gold, var(--yellow)); }
@media (min-width: 700px) { .menu-sheet { padding-inline: 40px; } }

/* Sun or moon, beside Sign in and Free trial. Same chamfer as those buttons,
   and not a .btn, so the bar's button count stays the two links. */
.theme-toggle {
  --cut: 10px;
  --bw: 2px;
  --cut-in: calc(var(--cut) - 0.58578643763 * var(--bw));
  display: inline-flex;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: var(--bw);
  border: 0;
  border-radius: 0;
  background: var(--control-edge);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgb(54 36 24);
  color: var(--cream);
  border-radius: 0;
  clip-path: polygon(var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in));
}
.scrolled .theme-toggle .theme-face { background: rgb(72 46 28); }
.theme-toggle .i { font-size: 22px; }
.theme-toggle .theme-sun { display: none; }
html[data-theme="light"] .theme-toggle .theme-moon { display: none; }
html[data-theme="light"] .theme-toggle .theme-sun { display: inline-block; }
.theme-toggle:hover .theme-face,
.theme-toggle:focus-visible .theme-face {
  background: color-mix(in srgb, var(--orange) 12%, rgb(54 36 24));
}
.scrolled .theme-toggle:hover .theme-face,
.scrolled .theme-toggle:focus-visible .theme-face {
  background: color-mix(in srgb, var(--orange) 12%, rgb(72 46 28));
}
.theme-toggle:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero, .page-hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-grid {
  display: grid; gap: 24px; padding-block: 32px 32px;
  justify-items: stretch; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1120px) {
  /* Copy on the left, a browser that never grows past 680 px on the right.
     The pair stays inside the 1240 px column, so a 4K screen keeps the margins.
     The copy sits at the top. The phone hangs off the browser's lower left,
     so the two do not cover each other. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 680px;
    gap: 36px;
    /* The copy sits at the top. The points stack under it at their own height. */
    align-items: start;
    justify-items: stretch;
    padding-block: 28px 36px;
  }
  .hero .headline { margin-top: 6px; }
  .hero-sub { margin-top: 8px; }
  .hero .cta { margin-top: 12px; }
  .hero .fine { margin-top: 8px; }
}
.hero-copy { min-width: 0; max-width: none; }

.headline {
  margin-top: 16px;
  font: 700 clamp(26px, 6vw, 44px)/1.05 var(--f-headline);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cream);
}
.hero .headline { font-size: 22px; margin-top: 8px; }
@media (min-width: 360px) { .hero .headline { font-size: 26px; } }
@media (min-width: 390px) { .hero .headline { font-size: 28px; } }
@media (min-width: 700px) { .hero .headline { font-size: 36px; } }
@media (min-width: 1120px) { .hero .headline { font-size: 32px; } }
/* The wide layout gives the words a narrower column so the phone can hang
   off the window. 40 px starts once that column can hold the longest line. */
@media (min-width: 1280px) { .hero .headline { font-size: 36px; } }
@media (min-width: 1366px) { .hero .headline { font-size: 40px; } }
.headline .line { display: block; }
.hero .headline .line { white-space: nowrap; }
.headline em { font-style: normal; }
.acc-o, .acc-y {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.acc-o {
  background-image: linear-gradient(180deg, #FFA656 0%, var(--orange) 55%, #F26A00 100%);
  filter: drop-shadow(0 0 22px rgb(255 122 19 / .38));
}
.acc-y {
  background-image: linear-gradient(180deg, #FFE87A 0%, var(--yellow) 55%, #F5BA00 100%);
  filter: drop-shadow(0 0 22px rgb(255 210 28 / .28));
}

.hero-sub {
  margin-top: 12px;
  max-width: none;
  font-size: 16px;
  line-height: 1.45;
  color: var(--body);
}
.platforms {
  list-style: none; padding: 0; margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.platforms li {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 13px/1 var(--f-body); color: var(--dim);
}
.platforms .i { font-size: 18px; color: var(--dim); }
.fine {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font: 400 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
@media (max-width: 759px) {
  .hero .fine {
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 10px;
    letter-spacing: .04em;
    white-space: nowrap;
  }
}

.cta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 16px; }
.hero .cta { margin-top: 16px; }
@media (max-width: 479px) {
  .cta .btn { display: flex; width: 100%; }
  /* A big button's words wrap, evenly, rather than run out of their box on
     the smallest phones. The hero pair stays one line, side by side, at the
     glove height, so the two do not stack into a tall block. */
  .btn.lg { height: auto; min-height: 44px; }
  .btn.lg .btn-face {
    white-space: normal; text-wrap: balance; text-align: center; line-height: 1.15; padding-block: 6px;
  }
  .hero .cta { flex-wrap: nowrap; gap: 8px; }
  .hero .cta .btn { width: auto; flex: 1 1 0; min-width: 0; }
  .hero .btn.lg { height: 44px; min-height: 44px; }
  .hero .btn.lg .btn-face {
    white-space: nowrap;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1;
    --track: .03em;
  }
  .callout .btn.lg .btn-face { padding-inline: 16px; font-size: 16px; --track: .08em; }
}
@media (max-width: 359px) {
  .hero .cta { flex-wrap: wrap; }
  .hero .cta .btn { width: 100%; flex: none; }
}
@media (max-width: 699px) {
  .hero-grid { padding-block: 16px 8px; gap: 12px; }
  .hero .headline { margin-top: 4px; }
  .hero-sub { margin-top: 8px; }
  .hero .cta { margin-top: 10px; }
  .hero .fine { margin-top: 8px; }
}

.hero-stage { position: relative; width: min(680px, 100%); min-width: 0; justify-self: start; }
@media (min-width: 1120px) { .hero-stage { width: 680px; justify-self: end; } }

.badge-frame, .frame-badge, .bracketed { position: relative; }
.bk {
  position: absolute; width: 28px; height: 28px;
  border: 2px solid var(--orange);
  filter: drop-shadow(0 0 6px rgb(255 122 19 / .55));
}
.bk.tl { left: -14px; top: -14px; border-right: 0; border-bottom: 0; }
.bk.tr { right: -14px; top: -14px; border-left: 0; border-bottom: 0; }
.bk.bl { left: -14px; bottom: -14px; border-right: 0; border-top: 0; }
.bk.brr { right: -14px; bottom: -14px; border-left: 0; border-top: 0; }
.badge-frame { width: 200px; aspect-ratio: 1; }
@media (min-width: 1000px) { .badge-frame { width: 320px; } }
.badge-frame::before {
  content: ''; position: absolute; inset: -18%; z-index: -1;
  background: radial-gradient(circle, rgb(255 122 19 / .22), transparent 62%);
}
.badge-clip { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 17%; }
.badge-clip img { width: 100%; height: 100%; object-fit: contain; }
.scan {
  position: absolute; left: 0; right: 0; top: -30px; height: 30px;
  background: linear-gradient(to bottom, rgb(255 122 19 / 0), rgb(255 122 19 / .22), rgb(255 210 28 / .5));
  animation: scan 4s linear infinite;
}
@keyframes scan { from { top: -30px; } to { top: 100%; } }

.readout {
  --cut: 10px; --edge: var(--line); --fill: var(--panel);
  width: min(680px, 100%);
  margin: 24px 0 0;
  padding: 16px 16px 16px;
  font: 400 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
}
.ro-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--cream); }
.ro-tag { font-size: 10px; color: var(--dim); }
.ro-list { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 6px; }
.ro { display: flex; align-items: center; gap: 10px; }
.ro .dot { width: 6px; height: 6px; flex: none; }
.ro .ro-l { flex: 1; color: var(--dim); }
.ro .ro-v { text-align: right; }
.ro.y .dot { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.ro.y .ro-v { color: var(--fg-gold, var(--yellow)); }
.ro.o .dot { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.ro.o .ro-v { color: var(--fg-accent, var(--orange)); }

/* ---------------------------------------------------------------------------
   The strip of facts
   --------------------------------------------------------------------------- */
.stats-band { background: var(--panel); border-bottom: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; padding-block: 22px; }
@media (min-width: 964px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stat-n {
  font: 700 26px/1 var(--f-display); color: var(--fg-gold, var(--yellow));
  font-variant-numeric: tabular-nums; min-width: 2ch; flex: none;
}
.stat-l {
  font: 400 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  white-space: nowrap;
}
.stat-words .stat-n {
  font: 700 14px/1.2 var(--f-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  min-width: 0;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   The crew phone overlapping a desktop browser. One size for every stage:
   the browser is at most 680 px, and the phone is 65% of that window.
   --------------------------------------------------------------------------- */
.showcase-copy { max-width: none; }

/* Points beside a phone or office window. A short bold title and one line,
   20 px apart. On a wide screen they stay in the heading's column. On a
   narrow screen the picture comes first and the points follow it, so the
   phone still fits a phone's first screen. */
.screen-notes {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
ul.screen-notes,
div.screen-notes .note-set {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Every card's points share one cell, so the row stays as tall as the
   longest card (four points and the chip row) and the page under it
   does not jump when the card changes. */
div.screen-notes { display: grid; }
div.screen-notes .note-set {
  grid-area: 1 / 1;
  visibility: hidden;
}
div.screen-notes .note-set.on { visibility: visible; }
.screen-notes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.screen-notes .i {
  font-size: 22px;
  color: var(--fg-accent, var(--orange));
  margin-top: 1px;
  flex: none;
}
.note-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.note-title {
  font: 700 15px/1.3 var(--f-body);
  color: var(--cream);
}
.note-line {
  font: 400 15px/1.35 var(--f-body);
  color: var(--body);
}
/* The receipt statuses, in the app's chip shape: a tint, a soft edge,
   and the words pulled toward the ink. Waiting is blue. Approved and
   In the books are green, the same pair the office list uses. */
.screen-notes li.proof {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-left: 34px;
}
.screen-notes .st {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 0;
  clip-path: none;
  border: 1px solid transparent;
  font: 600 12px/1 var(--f-body);
  white-space: nowrap;
}
.screen-notes .st.wait {
  color: #9eb6f2;
  background: rgb(66 133 244 / .16);
  border-color: rgb(66 133 244 / .45);
}
.screen-notes .st.ok {
  color: #8dcea0;
  background: rgb(46 125 50 / .16);
  border-color: rgb(46 125 50 / .45);
}
/* Below the two-column layout the copy's children join the section grid,
   the picture takes the next row, and the points sit under the picture. */
@media (max-width: 1119px) {
  .hero-copy,
  .showcase-copy { display: contents; }
  .hero-grid,
  .showcase > .wrap { gap: 0; }
  .hero-stage,
  .showcase > .wrap > .device-stage { order: 2; }
  .screen-notes { order: 3; }
  .hero-copy > .screen-notes,
  .showcase-copy > .screen-notes { margin-top: 20px; }
  .hero-stage,
  .showcase > .wrap > .device-stage { margin-top: 24px; }
}
@media (max-width: 699px) {
  .hero-stage { margin-top: 12px; }
}
@media (min-width: 1120px) {
  .hero-copy,
  .showcase-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }
  .hero-copy > .screen-notes { margin-top: 22px; }
  /* The platform row's own rule zeroes this list's margin. 28 px puts the
     camera icon clear of Apple / Android / Browser. */
  .showcase-copy > .screen-notes { margin-top: 28px; }
}
.showcase > .wrap { display: grid; gap: 24px; }
@media (min-width: 1120px) {
  .showcase > .wrap {
    grid-template-columns: minmax(0, 1fr) 680px;
    column-gap: 36px;
    align-items: start;
  }
  .showcase-copy { grid-column: 1; }
  .showcase .device-stage { grid-column: 2; margin: 0; width: 680px; justify-self: end; }
}
.device-stage {
  container-type: inline-size;
  position: relative;
  width: min(680px, 100%);
  margin: 0;
  justify-self: start;
}
.hero .device-stage { margin-top: 0; }
.browser {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #16161a;
  box-shadow:
    0 24px 50px -28px rgb(0 0 0 / .7),
    0 0 0 1px rgb(255 255 255 / .08);
}
.browser-top, .browser-url {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  flex: none;
  padding: 0 12px;
  background: #1c1c20;
}
.browser-top { border-bottom: 1px solid rgb(255 255 255 / .06); }
.browser-url { border-bottom: 1px solid rgb(255 255 255 / .04); }
.dots { display: flex; gap: 6px; flex: none; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a42; }
.dots i:nth-child(1) { background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.browser-tabs, .win-titles { position: relative; flex: 1; min-width: 0; height: 22px; }
.tab, .win-titles .slide {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 22px;
  padding: 0 10px;
  border-radius: 7px 7px 0 0;
  background: #121214;
  font: 400 12px/1 var(--f-body);
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-titles .slide {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.win-titles .slide.on { opacity: 1; transition: none; }
.url-lock {
  width: 8px;
  height: 10px;
  flex: none;
  border: 1.5px solid var(--dim);
  border-radius: 2px;
  box-shadow: 0 -4px 0 -1.5px var(--dim);
}
.url-text {
  min-width: 0;
  flex: 1;
  font: 400 12px/1 var(--f-body);
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-tag {
  flex: none;
  font: 400 10px/1 var(--f-mono);
  letter-spacing: .14em;
  color: var(--dim);
}
/* A narrow window cannot spare the address bar for a label. The chrome
   scales with the window so the traffic lights do not dwarf the page. */
@container (max-width: 640px) {
  .browser { border-radius: 10px; }
  .browser-top, .browser-url { height: 22px; gap: 6px; padding: 0 8px; }
  .dots { gap: 4px; }
  .dots i { width: 6px; height: 6px; }
  .browser-tabs, .win-titles { height: 16px; }
  .tab, .win-titles .slide {
    height: 16px; padding: 0 6px; font-size: 10px; border-radius: 5px 5px 0 0;
  }
  .url-text { font-size: 10px; }
  .url-lock { width: 6px; height: 8px; box-shadow: 0 -3px 0 -1.5px var(--dim); }
  .win-tag { display: none; }
}
.demo-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.demo-toggle:hover, .demo-toggle:focus-visible { color: var(--cream); background: rgb(255 255 255 / .06); }
.ico-pause, .ico-play { display: block; }
.ico-pause { width: 8px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.ico-play {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.demo.paused .ico-pause, .demo:not(.paused) .ico-play { display: none; }

/* Office captures are a 1280x800 desktop at 2x (2560x1600), the whole portal
   including its side menu, drawn smaller than the file so the edges stay sharp. */
.win-shot {
  position: relative;
  height: auto;
  aspect-ratio: 1280 / 800;
  background: #121214;
  overflow: hidden;
}
.win-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: left top;
}
/* Keep the map attribution readable inside the screenshot. */
.map-credit {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 6px;
  background: #121214;
  font: 400 11px/1.2 var(--f-body);
  color: var(--cream);
  white-space: nowrap;
  pointer-events: none;
}
/* On a phone the crew phone covers the window's lower left, including the
   start of a bottom-right credit. The open corner is the top right of the
   map, and the line may wrap so the whole credit stays in that strip. */
@media (max-width: 559px) {
  .map-credit {
    top: 6px;
    right: 6px;
    bottom: auto;
    max-width: 46%;
    font-size: 10px;
    line-height: 1.15;
    text-align: right;
    white-space: normal;
  }
}

/* iPhone 17 Pro Max proportions (440:956), sized from the browser, not the
   viewport. The phone hangs off the browser's lower-left corner: most of it
   sits outside the window, and only a strip of the window's left edge is
   covered. No side buttons. The corner is a circle, 12.5% of the width, the
   same share as an iPhone 15 or 16. A single percentage would take 12.5% of
   the height on the vertical axis and turn the frame into a capsule. */
.device-stage { padding-bottom: 120px; }
.device-stage .iphone {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  /* A new block, so the screen's bezel margin stays inside the frame. With
     the height left to the ratio, that margin was collapsing out of the top. */
  display: flow-root;
  height: calc(0.65 * (64px + 100cqi * 800 / 1280));
  aspect-ratio: 440 / 956;
  width: auto;
  padding: 0;
  border-radius: 12.5% / 5.753%;
  background: linear-gradient(160deg, #8a8a94 0%, #3a3a42 12%, #1a1a1e 38%, #121214 70%, #2a2a30 100%);
  box-shadow:
    inset 0 0 0 1px #b7b7c0,
    inset 0 0 0 3px #0a0a0c,
    0 22px 36px -12px rgb(0 0 0 / .85),
    0 8px 16px -8px rgb(0 0 0 / .65);
}
@media (min-width: 1200px) {
  /* The rail in the 1440 px capture is about 42 px wide once the picture sits
     in the 680 px window. The phone covers that rail and hangs out to the left
     and below the window. The gap is wider than that hang, so the phone stays
     in the window's column and never crosses into the words. */
  .hero-grid,
  .showcase > .wrap { column-gap: 120px; }
  .device-stage .iphone { left: -108px; }
}
@media (max-width: 1199px) and (min-width: 560px) {
  /* The window is the full column, centred, so a tablet and a wide phone keep
     the same margin on both sides. The phone covers the lower-left corner and
     stays on the page. A narrower phone leads, with the window peeking behind. */
  .hero-stage,
  .showcase .device-stage {
    width: min(680px, 100%);
    margin-inline: auto;
    justify-self: center;
  }
  .device-stage { padding-bottom: 88px; }
  .device-stage .window-clip,
  .device-stage .browser { width: 100%; margin-inline: 0; }
  .device-stage .iphone { left: 0; width: min(168px, 42%); height: auto; }
}
@media (max-width: 559px) {
  /* Both samples must remain inspectable on a real phone. The office window
     uses the full content column. The crew phone is a smaller foreground
     sample, overlapping only the browser's lower-left area instead of
     swallowing most of it. Space under the window belongs to the phone and
     the pager, so neither is clipped when browser chrome changes height. */
  .hero-stage,
  .showcase .device-stage {
    width: min(680px, 100%);
    margin-inline: auto;
    justify-self: center;
  }
  .device-stage { padding-bottom: 184px; }
  .device-stage .window-clip {
    position: relative;
    top: auto;
    left: 0;
    right: auto;
    width: 100%;
    margin: 0;
  }
  .device-stage .window-clip > .browser {
    right: 0;
    width: 100%;
    margin: 0;
  }
  /* An office-only card keeps the same full-width window and stable slot. */
  .demo[data-side="office"] .device-stage .window-clip {
    left: 0;
    right: auto;
    width: 100%;
  }
  .device-stage .iphone {
    position: absolute;
    left: 12px;
    bottom: 60px;
    width: min(144px, 38%);
    height: auto;
    margin: 0;
  }
  .hero .hero-pager {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    margin-top: 0;
  }
}
.iphone-screen {
  position: relative;
  /* The margin is a share of the phone's width, so the metal bezel stays the
     same thickness at every size. The height gives that margin back, because
     a percentage height is a share of the phone's height, not its width. */
  height: calc(100% - 2.454%);
  margin: 2.667%;
  border-radius: 10.387% / 4.64%;
  overflow: hidden;
  background: #141416;
}
.phone-slides { position: absolute; inset: 0; }
.phone-slides .slide.blank { background: #141416; }
.iphone-screen > img,
.iphone-screen .slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  /* The captures have the phone's full screen ratio. The opening inside the
     decorative frame is slightly narrower, so contain left black strips at
     the top and bottom. Fill it and take the tiny crop from the safe sides. */
  object-fit: cover;
  object-position: center center;
}
.island {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 1.15%;
  width: 28.6%;
  height: 3.87%;
  transform: translateX(-50%);
  background: #000;
  border-radius: 999px;
  pointer-events: none;
}
/* A slide that is not showing stays out of the way. The one marked on is
   solid in the style sheet itself, with no fade from zero, so the first
   paint is the opening picture whether or not a script has run. */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.slide.under { opacity: 1; z-index: 1; }
.slide.on { opacity: 1; z-index: 2; transition: none; }
.demo {
  position: relative;
  width: 100%;
  --frame-ms: 700ms;
  --frame-ease: ease-in-out;
}
/* The browser's box. The pager is positioned from this, so a card with one
   picture still keeps the same window, the same phone, and the same controls.
   The clip is one window tall and hides anything that slides past it, so a
   moving window cannot cover the header, the words, or the pager. */
.hero .stage-window { width: 100%; }
.window-clip {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  clip-path: inset(0 round 12px);
}
.window-clip::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  box-sizing: border-box;
  border: 2px solid #111214;
  border-radius: inherit;
  pointer-events: none;
}
@container (max-width: 640px) {
  .window-clip {
    border-radius: 10px;
    clip-path: inset(0 round 10px);
  }
}
.demo[data-side="phone"] .window-clip::after { opacity: 0; }
.window-sizer {
  display: flex;
  flex-direction: column;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
}
/* Every card is a whole window, stacked in the clip. The one marked on sits
   in the slot. The others stay in the same box, hidden, so a card with no
   picture still holds the slot. Opacity stays 1: visibility does the hiding,
   and a fade would show the page through the chrome. */
.window-clip > .browser {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: auto;
  margin: 0;
  opacity: 1;
  visibility: hidden;
  transform: translateY(0);
  transition: none;
}
.window-clip > .browser.on {
  visibility: visible;
  z-index: 2;
}
/* Next moves down: the current window leaves through the bottom and the next
   arrives from the top. Previous reverses. The phone screen cross-fades in
   the same time. The outgoing phone picture stays opaque underneath, and the
   incoming one fades in on top: fading both alphas would open a hole to the
   phone's background. */
.demo.is-animating .window-clip > .browser.from,
.demo.is-animating .window-clip > .browser.to {
  visibility: visible;
  transition: none;
  z-index: 3;
}
.demo.is-animating.dir-down .window-clip > .browser.to { transform: translateY(-100%); }
.demo.is-animating.dir-up .window-clip > .browser.to { transform: translateY(100%); }
.demo.is-animating.run .window-clip > .browser.from,
.demo.is-animating.run .window-clip > .browser.to {
  transition: transform var(--frame-ms) var(--frame-ease), opacity var(--frame-ms) var(--frame-ease);
}
.demo.is-animating.run.dir-down .window-clip > .browser.from { transform: translateY(100%); }
.demo.is-animating.run.dir-down .window-clip > .browser.to { transform: translateY(0); }
.demo.is-animating.run.dir-up .window-clip > .browser.from { transform: translateY(-100%); }
.demo.is-animating.run.dir-up .window-clip > .browser.to { transform: translateY(0); }
.demo.is-animating .phone-slides .slide.from {
  opacity: 1;
  z-index: 2;
  transition: none;
}
.demo.is-animating .phone-slides .slide.to {
  opacity: 0;
  z-index: 3;
  transition: none;
}
.demo.is-animating.run .phone-slides .slide.to {
  opacity: 1;
  transition: opacity var(--frame-ms) var(--frame-ease);
}
/* A card with one side fades the empty device with the same move. The slot
   stays, so the pager and the other device do not jump. */
.demo[data-side="office"] .device-stage .iphone { opacity: 0; }
.demo[data-side="phone"] .window-clip > .browser { opacity: 0; }
/* A phone with no office window takes the window's place: the same top, the
   same height, centered in that frame. The pager stays where the other cards
   put it. Left, bottom, and height move with the 700 ms fade. */
.hero .demo[data-side="phone"] .device-stage .iphone {
  top: auto;
  right: auto;
  width: auto;
  margin: 0;
  transform: none;
  height: calc(64px + 100cqi * 800 / 1280);
  left: calc((100cqi - (64px + 100cqi * 800 / 1280) * 440 / 956) / 2);
}
@media (min-width: 1200px) {
  .hero .demo[data-side="phone"] .device-stage .iphone { bottom: 120px; }
}
@media (min-width: 720px) and (max-width: 1199px) {
  .hero .demo[data-side="phone"] .device-stage .iphone { bottom: 88px; }
}
@media (min-width: 560px) and (max-width: 719px) {
  .hero .demo[data-side="phone"] .device-stage .iphone { bottom: 168px; }
}
@container (max-width: 640px) {
  .hero .demo[data-side="phone"] .device-stage .iphone {
    height: calc(44px + 100cqi * 800 / 1280);
    left: calc((100cqi - (44px + 100cqi * 800 / 1280) * 440 / 956) / 2);
  }
}
/* A phone-only card uses the same small phone slot, centered over the window
   space that is hidden for that card. The pager and section height stay put. */
@media (max-width: 559px) {
  .hero .demo[data-side="phone"] .device-stage .iphone {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 60px;
    width: min(144px, 38%);
    height: auto;
    margin: 0;
    transform: none;
    left: calc((100% - min(144px, 38%)) / 2);
  }
}
.demo.is-animating.run .device-stage .iphone {
  transition: opacity var(--frame-ms) var(--frame-ease),
    left var(--frame-ms) var(--frame-ease),
    bottom var(--frame-ms) var(--frame-ease),
    height var(--frame-ms) var(--frame-ease);
}
@media (min-width: 560px) {
  .hero .stage-window { position: relative; }
}

/* Square browse controls. Wide screens park them just under the browser,
   clear of the phone on the left. A phone stacks them under the crew phone.
   The spot does not change from card to card. */
.hero-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  margin-top: 16px;
  max-width: 100%;
}
.frame-dots {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
@media (max-width: 559px) {
  /* One row down to a 360 px phone. The dots give up space. The buttons stay
     a 44 px target. */
  .hero-pager { flex-wrap: nowrap; justify-content: center; gap: 4px; }
  .hero .frame-dots {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 2px;
    min-width: min-content;
  }
  .hero .frame-dot { position: relative; width: 6px; height: 6px; border-width: 1.5px; }
  /* The mark stays small. The hit area reaches past it without widening the row. */
  .hero .frame-dot::before {
    content: "";
    position: absolute;
    inset: -9px;
  }
}
@media (min-width: 560px) and (max-width: 719px) {
  /* The phone still hangs 88 px under the window. The controls sit just
     below that hang, full width, inside the stage. */
  .hero .device-stage { padding-bottom: 168px; }
  .hero .device-stage .iphone { bottom: 80px; }
  .hero .hero-pager {
    position: absolute;
    top: calc(100% + 108px);
    left: 0;
    right: 0;
    margin-top: 0;
    z-index: 6;
  }
}
@media (min-width: 720px) {
  /* A little under the window: clear of the phone, not down at the phone's foot. */
  .hero .hero-pager {
    position: absolute;
    top: calc(100% + 28px);
    left: calc(min(168px, 42%) + 16px);
    right: 0;
    margin-top: 0;
    gap: 20px;
    z-index: 6;
  }
}
@media (min-width: 1200px) {
  .hero .hero-pager { left: 56px; gap: 28px; }
}
.frame-btn, .frame-dot {
  border-radius: 0;
  clip-path: none;
  padding: 0;
  cursor: pointer;
}
.frame-btn {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 2px solid var(--orange);
  background: #121214;
  color: var(--cream);
}
.hero-pager .demo-toggle { position: relative; }
.hero-pager .ico-pause,
.hero-pager .ico-play,
.hero-pager .toggle-word { grid-area: 1 / 1; }
.hero-pager .ico-pause { width: 10px; height: 12px; border-left-width: 3px; border-right-width: 3px; }
/* A filled triangle inside its own square, so it is not the next chevron. */
.hero-pager .ico-play {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
}
.hero-pager .ico-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}
.hero-pager .toggle-word {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: nowrap;
  border: 0;
}
.frame-btn:hover, .frame-btn:focus-visible,
.frame-dot:hover, .frame-dot:focus-visible {
  background: rgb(255 122 19 / .18);
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}
.frame-dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--orange);
  background: transparent;
}
.frame-dot.on { background: var(--orange); }
.frame-arrow {
  display: block;
  width: 9px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2.5px 2.5px 0;
  box-sizing: border-box;
}
.frame-arrow.back { transform: rotate(135deg); margin-left: 3px; }
.frame-arrow.fore { transform: rotate(-45deg); margin-right: 3px; }

/* ---------------------------------------------------------------------------
   Modules: a tile each
   --------------------------------------------------------------------------- */
.hint { margin-top: 24px; font: 400 12px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
#modules > .wrap { padding-bottom: 28px; }
.tiles-box { margin-top: 16px; container-type: inline-size; }
.tiles { --cols: 2; --gap: 16px; list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.tiles > li { display: flex; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.tiles > li.tiles-close {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
.tiles-close-face {
  --cut: 10px; --fill: var(--panel);
  --sheen: radial-gradient(110% 70% at 50% 0%, rgb(255 210 28 / .08), transparent 62%);
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 84px; padding: 8px 12px; text-decoration: none; text-align: center;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), filter .25s ease;
}
.tiles-close-title { font: 700 17px/1.15 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: var(--cream); }
.tiles-close-line { font: 400 13px/1.3 var(--f-mono); letter-spacing: .04em; color: var(--dim); }
.tiles-close-go { font: 700 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-gold, var(--yellow)); }
.tiles-close:hover .tiles-close-face, .tiles-close:focus-visible .tiles-close-face {
  --edge: var(--orange);
  transform: translateY(-8px);
  filter: drop-shadow(0 16px 28px rgb(255 122 19 / .4));
}
@container (min-width: 460px) { .tiles { --cols: 3; } }
@container (min-width: 720px) { .tiles { --cols: 5; } }
.tile {
  flex: 1; display: flex; padding: 0; border: 0; background: none; cursor: pointer; text-align: center;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), filter .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.tile-face {
  --cut: 10px; --fill: var(--panel);
  --sheen: radial-gradient(110% 70% at 50% 0%, rgb(255 122 19 / .06), transparent 62%);
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 84px; padding: 8px 10px; text-align: center;
  transition: background-color .25s ease;
}
.tile-icon { font-size: 26px; line-height: 1; color: var(--fg-gold, var(--yellow)); transition: transform .25s ease; }
.tile-name {
  font: 700 13px/1.15 var(--f-display); letter-spacing: .04em; text-transform: uppercase;
  color: var(--cream); text-wrap: balance;
}
.tile:hover, .tile:focus-visible { transform: translateY(-8px); filter: drop-shadow(0 18px 32px rgb(255 122 19 / .42)); }
.tile:hover .tile-face, .tile:focus-visible .tile-face {
  --edge: var(--orange);
  --sheen: radial-gradient(110% 80% at 50% 0%, rgb(255 122 19 / .16), transparent 66%);
}
.tile:hover .tile-icon, .tile:focus-visible .tile-icon { transform: scale(1.08); }
.tile:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
@media (max-width: 699px) {
  .tile-face, .tiles-close-face { padding: 8px 10px; min-height: 88px; gap: 6px; }
  .tile-icon { font-size: 28px; }
  .tile-name { font-size: 14px; }
}
/* Five across in a narrow row (a phone on its side): the compact tile, so a
   long name still takes two lines at most. */
@container (min-width: 720px) and (max-width: 860px) {
  .tile-face, .tiles-close-face { padding: 8px 8px; min-height: 88px; gap: 6px; }
  .tile-icon { font-size: 28px; }
  .tile-name { font-size: 14px; }
}

/* A module's dialog */
dialog.mod {
  width: min(620px, 100vw - 80px); max-width: none; max-height: calc(100dvh - 80px);
  padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
  filter: drop-shadow(0 0 34px rgb(255 122 19 / .32));
}
dialog.mod::backdrop { background: rgb(0 0 0 / .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.mod[open] { animation: pop .3s cubic-bezier(.2, .8, .2, 1); }
dialog.mod[open]::backdrop { animation: fade .3s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.mod-panel {
  --cut: 18px; --edge: rgb(255 122 19 / .7); --fill: var(--panel);
  --sheen: radial-gradient(90% 40% at 50% 0%, rgb(255 122 19 / .08), transparent 70%);
  display: flex; flex-direction: column; max-height: calc(100dvh - 80px);
}
.mod-head { display: flex; align-items: center; gap: 16px; padding: 30px 30px 0; }
.mod-icon { --cut: 10px; --edge: var(--yellow); flex: none; display: grid; place-items: center; width: 52px; height: 52px; }
.mod-icon .i { font-size: 28px; color: var(--fg-gold, var(--yellow)); }
.mod-title { margin-top: 6px; font: 700 28px/1.05 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
/* A dialog taller than the window scrolls inside. The scrollbar stays in view
   (the old page showed one), and the last 32 px fade out, so a line going
   under the bottom edge reads as "more below", never as a line cut in half.
   The same 32 px of padding at the end lets the last line clear the fade. */
.mod-body {
  overflow-y: auto; overscroll-behavior: contain; padding: 20px 30px 32px;
  scrollbar-width: thin; scrollbar-color: rgb(255 122 19 / .65) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), transparent);
}
.mod-body::-webkit-scrollbar { width: 6px; }
.mod-body::-webkit-scrollbar-thumb { background: rgb(255 122 19 / .65); border-radius: 3px; }
.mod-pitch { font-size: 18px; line-height: 1.45; color: var(--cream); text-wrap: pretty; }
.mod-detail { margin-top: 16px; }
.mod-detail p { margin-bottom: 8px; font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.glance { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 400 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.glance .rule { background: var(--line); }
.mod-points { list-style: none; padding: 0; margin-top: 12px; }
.mod-points li { position: relative; margin-bottom: 8px; padding-left: 22px; font-size: 15px; line-height: 1.4; color: var(--cream); text-wrap: pretty; }
.mod-points li::before { content: '>'; position: absolute; left: 0; top: 1px; font: 400 13px/1.4 var(--f-mono); color: var(--fg-accent, var(--orange)); }
.mod-foot { display: flex; justify-content: flex-end; padding: 14px 30px 24px; border-top: 1px solid var(--line); }
@media (max-width: 599px) {
  dialog.mod { width: calc(100vw - 32px); max-height: calc(100dvh - 40px); }
  .mod-panel { max-height: calc(100dvh - 40px); }
  .mod-head { padding: 20px 20px 0; }
  .mod-title { font-size: 24px; }
  .mod-body { padding: 20px 20px 8px; }
  .mod-pitch { font-size: 17px; }
  .mod-detail p { font-size: 15px; }
  .mod-foot { padding: 14px 20px 18px; }
  .mod-foot .btn { display: flex; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Trades
   --------------------------------------------------------------------------- */
/* The search sits above the filters and they share a left edge. The six
   filters are always one row. Below 1024 px the row scrolls, with a fade
   on the right edge so the next button shows. From 1024 px the row fits. */
.trade-tools { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; }
.trade-find { display: flex; flex-direction: column; gap: 6px; width: min(420px, 100%); min-width: 0; }
.trade-find-label { font: 400 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.trade-find input {
  min-height: 52px; width: 100%; padding: 0 16px;
  border: 2px solid var(--control-edge); border-radius: 0; background: var(--ink); color: var(--cream);
  font: 400 16px/1 var(--f-body);
}
.trade-find input:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.trade-scroller { min-width: 0; max-width: 100%; overflow: hidden; }
.trade-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.trade-chips::-webkit-scrollbar { display: none; height: 0; }
@media (min-width: 1024px) {
  .trade-scroller { overflow: visible; }
  .trade-chips {
    overflow-x: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
.trade-chip {
  --fill: var(--ink);
  border-radius: 0;
  clip-path: none;
  border: 2px solid var(--edge, var(--line));
  background: var(--fill);
  display: flex; align-items: center; justify-content: center; text-align: center;
  flex: 0 0 auto;
  width: auto; min-width: 0;
  min-height: 52px; padding: 0 16px; cursor: pointer;
  font: 700 13px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--cream);
  white-space: nowrap;
}
.trade-chip[aria-pressed='true'] { --fill: var(--orange); --edge: var(--orange); color: var(--ink); }
.trade-chip:hover, .trade-chip:focus-visible { --edge: var(--orange); }
.trade-chip:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.trade-group { margin-top: 20px; }
.trade-group-title {
  font: 700 22px/1.15 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--cream);
  text-wrap: balance;
}
.trades { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 460px) { .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 720px) { .trades { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1080px) { .trades { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trade { display: flex; transition: transform .22s ease; }
.trade-face {
  --cut: 12px; --fill: var(--ink);
  flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 18px;
}
.trade-icon { font-size: 26px; color: var(--fg-accent, var(--orange)); }
.trade-words { min-width: 0; }
.trade-name { display: block; font: 700 19px/1.1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); }
.trade-sh { display: block; margin-top: 4px; font: 400 11.5px/1.35 var(--f-mono); letter-spacing: .03em; color: var(--dim); }
.trade:hover { transform: translateY(-6px); }
.trade:hover .trade-face { --edge: rgb(255 122 19 / .65); --sheen: linear-gradient(90deg, rgb(255 122 19 / .08), transparent 60%); }

/* ---------------------------------------------------------------------------
   How a record moves: crew, office, payroll. Square cards, no sample screen.
   --------------------------------------------------------------------------- */
.flow-grid {
  list-style: none;
  padding: 0;
  margin-top: 28px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@container (min-width: 760px) {
  .flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.flow-card {
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--ink);
  padding: 20px 18px 22px;
  min-width: 0;
}
.flow-num {
  font: 700 12px/1 var(--f-mono);
  letter-spacing: .16em;
  color: var(--fg-accent, var(--orange));
}
.flow-icon { display: block; margin-top: 14px; font-size: 28px; color: var(--fg-accent, var(--orange)); }
.flow-title {
  margin-top: 12px;
  font: 700 20px/1.15 var(--f-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cream);
}
.flow-card p { margin-top: 8px; font-size: 15px; text-wrap: pretty; }

/* ---------------------------------------------------------------------------
   Setup
   --------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 28px 24px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 560px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 980px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step-top { display: flex; align-items: center; gap: 10px; }
.step-num {
  --cut: 10px; --edge: var(--yellow);
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  font: 700 18px/1 var(--f-display); color: var(--fg-gold, var(--yellow));
}
.step:first-child .step-num { --fill: var(--yellow); color: var(--ink); }
.step-line { position: relative; flex: 1; height: 1px; overflow: hidden; background: linear-gradient(90deg, rgb(255 122 19 / .7), rgb(255 122 19 / .2)); }
.step-line::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  animation: flow 3s linear infinite;
}
@keyframes flow { from { left: -40%; } to { left: 100%; } }
.step-title { margin-top: 18px; font: 700 22px/1.1 var(--f-display); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); }
.step p { margin-top: 8px; font-size: 15px; text-wrap: pretty; }

/* ---------------------------------------------------------------------------
   Pricing
   --------------------------------------------------------------------------- */
.billing {
  --cut: 12px; --fill: #0E0E11;
  position: relative; display: inline-flex; gap: 4px; padding: 4px; margin-top: 24px;
  /* The sliding thumb is absolutely positioned. Clip it so a width from a
     wider window cannot widen the page. */
  overflow: hidden;
}
.no-js .billing { display: none; }
.seg-thumb {
  --cut: 8px;
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: var(--thumb-w, 0); transform: translateX(var(--thumb-x, 0));
  background: linear-gradient(180deg, #FFE04D, var(--yellow) 60%, #F5C400);
}
.billing.ready .seg-thumb { transition: transform .38s cubic-bezier(.3, .8, .2, 1), width .38s cubic-bezier(.3, .8, .2, 1); }
.seg {
  --cut: 8px;
  --track: .08em;
  --tag-size: 11px;
  --tag-pad-x: 8px;
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border: 0; background: none; cursor: pointer;
  font: 700 17px/1 var(--f-display); letter-spacing: 0; text-transform: uppercase; color: var(--cream);
  transition: color .3s ease;
}
/* Tracking adds space after the last letter, so the words sit left of the
   button's middle. The label gives that space back. The yearly tag's right
   padding sits past the last letter, which left the two words about 4 px
   left of the button's middle. The same inset, less the tag's own tracking,
   goes on the label so the letters — not the tag's padding — sit in the middle. */
.seg-label { letter-spacing: var(--track); margin-inline-end: calc(var(--track) * -1); white-space: nowrap; }
.seg:has(.tag) .seg-label { padding-inline-start: calc(var(--tag-pad-x) - .1 * var(--tag-size)); }
/* A phone column is narrower than the two labels. Tighten the toggle so both
   words stay on one line, in the middle of the button. */
@media (max-width: 399px) {
  .billing { gap: 2px; padding: 3px; }
  .seg { padding: 0 8px; gap: 6px; font-size: 14px; --track: .06em; }
}
.seg[aria-pressed='true'] { color: var(--ink); }
.seg:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.tag {
  border-radius: 0;
  clip-path: none;
  padding: 4px var(--tag-pad-x);
  font: 700 var(--tag-size)/1 var(--f-mono); letter-spacing: .1em; margin-inline-end: -.1em; white-space: nowrap; text-transform: uppercase;
  background: var(--orange); color: var(--ink);
  transition: background-color .3s ease, color .3s ease;
}
.seg[aria-pressed='true'] .tag { background: var(--ink); color: var(--yellow); }

.plans { display: grid; gap: 20px; margin-top: 36px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 600px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1040px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plans-note, .noscript { grid-column: 1 / -1; font-size: 16px; color: var(--body); }
.noscript { margin-top: 20px; }
.plan { display: flex; min-width: 0; animation: rise .5s cubic-bezier(.2, .7, .2, 1); transition: transform .25s ease, filter .25s ease; }
.plan:hover { transform: translateY(-8px); filter: drop-shadow(0 18px 32px rgb(255 122 19 / .32)); }
.plan:hover .plan-face { --edge: rgb(255 122 19 / .7); }
.plan:nth-child(2) { animation-delay: .05s; }
.plan:nth-child(3) { animation-delay: .1s; }
.plan:nth-child(4) { animation-delay: .15s; }
.plan:nth-child(5) { animation-delay: .2s; }
.plan:nth-child(6) { animation-delay: .25s; }
.plan:nth-child(7) { animation-delay: .3s; }
.plan:nth-child(8) { animation-delay: .35s; }
@keyframes rise { from { transform: translateY(12px); } to { transform: none; } }
.plan-face {
  --cut: 20px; --fill: var(--ink);
  --sheen: linear-gradient(180deg, rgb(255 255 255 / .025), transparent 45%);
  flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 24px 26px 26px;
}
.plan.featured { filter: drop-shadow(0 0 26px rgb(255 122 19 / .33)); }
.plan.featured .plan-face {
  --edge: var(--orange);
  --sheen: linear-gradient(180deg, rgb(255 122 19 / .13), transparent 42%);
}
.plan-top {
  display: flex; align-items: center; justify-content: space-between; height: 22px;
  font: 400 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.badge {
  border-radius: 0;
  clip-path: none;
  padding: 5px 10px;
  background: var(--orange); color: var(--ink);
  font: 700 10.5px/1 var(--f-mono); letter-spacing: .12em;
}
.plan-name { margin-top: 8px; font: 700 22px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); }
.plan-seats { margin-top: 4px; font: 400 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 22px; white-space: nowrap; }
.plan-price .amt { font: 700 40px/1 var(--f-display); color: var(--fg-gold, var(--yellow)); }
.plan-price .per { font: 400 13px/1 var(--f-mono); letter-spacing: .08em; color: var(--dim); }
.lets { margin-top: 18px; font: 700 32px/1 var(--f-display); text-transform: uppercase; color: var(--fg-gold, var(--yellow)); }
.plan-note { margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--dim); }
.save {
  --edge: var(--line);
  border-radius: 0;
  clip-path: none;
  border: 2px solid var(--edge);
  background: var(--fill, transparent);
  align-self: flex-start; margin-top: 14px; padding: 5px 10px;
  font: 700 11.5px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.save.lit { --edge: var(--orange); --fill: rgb(255 122 19 / .16); color: #FF9A4D; }
.plan-blurb { margin-top: 18px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.talk {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 44px; margin-top: 4px;
  font: 400 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-accent, var(--orange)); text-decoration: none;
}
.talk .i { font-size: 16px; }
.talk:hover, .talk:focus-visible { color: var(--fg-gold, var(--yellow)); }
.plan-cta { margin-top: auto; padding-top: 24px; }
.plan.skeleton {
  --cut: 20px;
  min-height: 420px;
  background: linear-gradient(100deg, #111115 30%, #1b1b21 50%, #111115 70%) 0 0 / 300% 100%;
  animation: shimmer 1.6s linear infinite;
}
.plan.skeleton span { display: none; }
.no-js .plan.skeleton { display: none; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.includes { --cut: 12px; --fill: var(--ink); margin-top: 28px; padding: 22px 26px 24px; }
.includes-h { font: 400 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-accent, var(--orange)); }
.includes-list {
  list-style: none; padding: 0; margin-top: 16px;
  display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.includes-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--cream); }
.tick { font-size: 16px; color: var(--fg-gold, var(--yellow)); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   The last word, and the callouts on What's New and the legal pages
   --------------------------------------------------------------------------- */
.final-wrap { filter: drop-shadow(0 0 30px rgb(255 210 28 / .22)); }
.final {
  --cut: 26px; --edge: var(--yellow); --fill: var(--ink);
  --sheen: radial-gradient(70% 90% at 50% 0%, rgb(255 210 28 / .09), transparent 65%);
  padding-block: 32px;
}
.final-in { display: flex; flex-direction: column; align-items: center; padding: 40px 48px; text-align: center; }
.final-title { margin-top: 12px; font: 700 36px/1.08 var(--f-display); letter-spacing: .03em; color: var(--cream); }
.final-title .line { display: block; }
.half { display: inline-block; white-space: nowrap; }
.final-lines { margin-top: 14px; font-size: 17px; }
.final-in .btn { margin-top: 30px; }
@media (max-width: 759px) {
  .final-in { padding: 40px 24px; }
  .final-title { font-size: 34px; }
}
@media (max-width: 359px) {
  .title { font-size: 31px; }
  .final-in { padding: 36px 16px; }
  .final-title { font-size: 30px; }
}

.bracketed { filter: drop-shadow(0 0 24px rgb(255 122 19 / .22)); }
.bracketed .bk { width: 26px; height: 26px; }
.bracketed .bk.tl { left: -10px; top: -10px; }
.bracketed .bk.tr { right: -10px; top: -10px; }
.bracketed .bk.bl { left: -10px; bottom: -10px; }
.bracketed .bk.brr { right: -10px; bottom: -10px; }
.callout {
  --cut: 16px; --edge: var(--orange); --fill: var(--panel);
  --sheen: radial-gradient(80% 60% at 0% 0%, rgb(255 122 19 / .09), transparent 70%);
  padding: 40px;
}
.callout-title { margin-top: 12px; font: 700 32px/1.08 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
.callout-body { margin-top: 12px; max-width: 640px; font-size: 17px; text-wrap: pretty; }
.callout .cta { margin-top: 26px; }
@media (max-width: 699px) {
  .callout { padding: 24px; }
  .callout .btn.lg .btn-face .i { font-size: 17px; }
  .callout-title { font-size: 34px; }
  .callout-body { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
   The footer
   --------------------------------------------------------------------------- */
.footer { position: relative; background: var(--panel); border-top: 1px solid var(--line); }
.footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 122 19 / .75), transparent);
}
.foot-grid { display: grid; gap: 32px; padding-block: 48px 32px; }
@media (min-width: 960px) { .foot-grid { grid-template-columns: minmax(250px, 1fr) minmax(0, 2.6fr); gap: 48px; } }
.foot-made { margin-top: 18px; max-width: 320px; font-size: 14px; line-height: 1.5; color: var(--dim); }
.foot-cols { display: grid; gap: 28px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-col:last-child { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .foot-cols { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; }
  .foot-col:last-child { grid-column: auto; }
}
.foot-h { margin-bottom: 6px; font: 400 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-accent, var(--orange)); }
.foot-col ul { list-style: none; padding: 0; }
.foot-col a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 15px; color: var(--body); text-decoration: none;
  transition: color .16s ease;
}
@media (pointer: coarse) { .foot-col a { min-height: 52px; } }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--fg-gold, var(--yellow)); }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 18px 30px; border-top: 1px solid var(--line);
}
.copy { font: 400 11px/1.6 var(--f-mono); letter-spacing: .14em; color: var(--dim); }

/* ---------------------------------------------------------------------------
   The top of What's New, the legal pages and What this site counts
   --------------------------------------------------------------------------- */
.page-hero-in { padding-block: 32px; }
@media (min-width: 700px) { .page-hero-in { padding-block: 48px; } }
.headline.page { margin-top: 14px; font-size: clamp(30px, 6vw, 44px); }
@media (max-width: 359px) { .headline.page { font-size: 26px; } }
@media (min-width: 1300px) { .headline.page { font-size: 48px; } }
.lead { margin-top: 20px; max-width: 38em; font-size: 16.5px; text-wrap: pretty; }
@media (min-width: 700px) { .lead { font-size: 18px; } }
.lead.cream { color: var(--cream); }
.mini-h { margin-top: 34px; font: 400 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

.chips { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  --fill: var(--panel);
  border-radius: 0;
  clip-path: none;
  border: 2px solid var(--edge, var(--line));
  background: var(--fill);
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 10px;
  font: 600 15px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cream); text-decoration: none;
  transition: transform .2s ease;
}
.chip .i { font-size: 16px; color: var(--fg-gold, var(--yellow)); }
.chip:hover, .chip:focus-visible { --edge: var(--orange); transform: translateY(-2px); }
/* On a phone the chips are as compact as the old page's, so the first update
   is not pushed a screen down: 32 px tall, still well over a finger's minimum. */
@media (max-width: 699px) {
  .chips { gap: 8px; }
  .chip { gap: 6px; font-size: 12px; min-height: 32px; padding: 4px 9px 4px 7px; }
  .chip .i { font-size: 13px; }
}

/* What's New: a timeline, one stop a day */
.timeline { list-style: none; padding: 0; margin-top: 40px; container-type: inline-size; }
@media (min-width: 700px) { .timeline { margin-top: 56px; } }
.day { display: grid; grid-template-columns: 30px minmax(0, 1fr); }
.day-rail { grid-column: 1; grid-row: 1 / span 2; position: relative; }
.day-date { grid-column: 2; margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.day-cards { grid-column: 2; list-style: none; padding: 0 0 48px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.day-rail::before {
  content: ''; position: absolute; left: 50%; top: 12px; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(to bottom, rgb(255 122 19 / .7), rgb(255 122 19 / .35));
}
.day.last .day-rail::before { background: linear-gradient(to bottom, rgb(255 122 19 / .7), transparent); }
.diamond {
  position: absolute; left: 50%; top: 10px; width: 14px; height: 14px;
  transform: translate(-50%, 0) rotate(45deg);
  background: var(--yellow); box-shadow: 0 0 14px var(--yellow);
}
.day-date time { display: flex; align-items: baseline; gap: 14px; }
.day-d { font: 700 30px/1 var(--f-display); letter-spacing: .03em; color: var(--fg-gold, var(--yellow)); text-shadow: 0 0 20px rgb(255 210 28 / .25); }
.day-y, .day-count { font: 400 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
@container (min-width: 940px) {
  .day { grid-template-columns: 190px 56px minmax(0, 1fr); }
  .day-date { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; margin: 0; position: sticky; top: 112px; align-self: start; }
  .day-date time { flex-direction: column; align-items: flex-start; gap: 6px; }
  .day-d { font-size: 40px; }
  .day-rail { grid-column: 2; grid-row: 1; }
  .day-cards { grid-column: 3; grid-row: 1; padding-bottom: 56px; }
}
@container (min-width: 966px) { .day-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wn-card { --cut: 16px; --fill: var(--panel); padding: 22px; transition: transform .22s ease; }
.wn-card:hover { --edge: rgb(255 122 19 / .55); transform: translateY(-2px); }
.wn-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon-box { --cut: 8px; --edge: rgb(255 122 19 / .6); flex: none; display: grid; place-items: center; width: 42px; height: 42px; }
.icon-box .i { font-size: 22px; color: var(--fg-gold, var(--yellow)); }
.mchip {
  --edge: rgb(255 122 19 / .7); --fill: rgb(255 122 19 / .08);
  border-radius: 0;
  clip-path: none;
  border: 2px solid var(--edge);
  background: var(--fill);
  padding: 6px 9px; font: 400 11.5px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: #FF9A4D; text-decoration: none; text-align: right;
}
a.mchip:hover, a.mchip:focus-visible { --fill: rgb(255 122 19 / .18); color: var(--fg-gold, var(--yellow)); }
.wn-title { margin-top: 16px; font: 700 24px/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
.wn-sum { margin-top: 10px; font-size: 15px; text-wrap: pretty; }
@media (max-width: 519px) { .wn-card { padding: 18px; } .wn-title { font-size: 21px; } .icon-box { width: 38px; height: 38px; } }

.roadmap-band { background: #0B0B0D; }
.roadmap { list-style: none; padding: 0; margin-top: 44px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 620px) { .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .roadmap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.coming { --cut: 16px; --fill: var(--panel); display: flex; flex-direction: column; padding: 0; }
.coming .hazard { opacity: .85; }
.coming-in { padding: 20px 22px 22px; }
.coming .wn-title { font-size: 22px; }
.coming .wn-sum { font-size: 14.5px; }
.eta {
  --edge: rgb(138 141 148 / .7); --fill: rgb(138 141 148 / .08);
  border-radius: 0;
  clip-path: none;
  border: 2px solid var(--edge);
  background: var(--fill);
  padding: 6px 10px; font: 700 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.eta.soon { --edge: var(--yellow); --fill: var(--yellow); color: var(--ink); }

/* ---------------------------------------------------------------------------
   The legal pages
   --------------------------------------------------------------------------- */
.updated { margin-top: 20px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.draft {
  --cut: 16px; --edge: var(--orange); --fill: var(--panel);
  max-width: 820px; margin-top: 28px; padding-top: 14px;
}
.draft-in { padding: 16px 24px 18px; }
@media (max-width: 699px) { .draft-in { padding: 16px 18px 18px; } }
.draft-h { display: flex; align-items: center; gap: 10px; font: 400 12px/1.4 var(--f-mono); letter-spacing: .12em; color: var(--fg-gold, var(--yellow)); }
.draft-h .i { font-size: 18px; }
.draft-in p + p { margin-top: 6px; font-size: 15px; text-wrap: pretty; }

.legal-layout { display: grid; gap: 0 48px; padding-block: 16px 24px; }
@media (min-width: 1100px) { .legal-layout { grid-template-columns: 250px minmax(0, 1fr); } }
.toc-side { display: none; }
@media (min-width: 1100px) {
  .toc-side {
    display: block; position: sticky; top: 100px; align-self: start;
    max-height: calc(100vh - 120px); overflow-y: auto; padding: 48px 4px 24px 0;
    scrollbar-width: thin;
  }
}
.toc-h { font: 400 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-accent, var(--orange)); margin-bottom: 12px; }
.toc { list-style: none; padding: 0; }
.toc a {
  display: flex; gap: 10px; padding: 7px 10px 7px 12px;
  border-left: 2px solid var(--line);
  font-size: 14px; line-height: 1.35; color: var(--dim); text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.toc a:hover, .toc a:focus-visible { color: var(--cream); }
.toc a.active { border-color: var(--fg-accent, var(--orange)); color: var(--cream); background: linear-gradient(90deg, rgb(255 122 19 / .12), transparent); }
.toc-n { font: 400 12px/1.6 var(--f-mono); color: var(--fg-accent, var(--orange)); flex: none; }
.toc-inline { margin-top: 32px; border: 2px solid var(--line); background: var(--panel); }
@media (min-width: 1100px) { .toc-inline { display: none; } }
.toc-inline > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px;
  cursor: pointer; list-style: none;
  font: 400 13px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-accent, var(--orange));
}
.toc-inline > summary::-webkit-details-marker { display: none; }
.toc-inline > summary::after { content: '+'; font-size: 20px; color: var(--cream); }
.toc-inline[open] > summary::after { content: '\2013'; }
.toc-inline .toc { padding: 0 12px 14px; }
.toc-inline .toc a { min-height: 44px; align-items: center; }

.legal-body { min-width: 0; }
/* The root no longer adds its own offset, so this keeps the clearance a
   legal section already had: its own 96px plus that old 96px. */
.legal-sec { padding-block: 48px; border-bottom: 1px solid var(--line); scroll-margin-top: 192px; }
.legal-sec:last-child { border-bottom: 0; }
@media (min-width: 760px) { .legal-sec { padding-block: 64px; } }
.legal-title { margin-top: 16px; font: 700 28px/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
@media (min-width: 760px) { .legal-title { font-size: 38px; } }
.lines { margin-top: 16px; max-width: none; }
.lines p { font-size: 15.5px; line-height: 1.62; text-wrap: pretty; }
@media (min-width: 760px) { .lines p { font-size: 16.5px; } }
.lines p + p { margin-top: 16px; }
.lines .point + .point { margin-top: 12px; }
.point { position: relative; padding-left: 20px; }
.point::before {
  content: ''; position: absolute; left: 0; top: .66em; width: 6px; height: 6px;
  background: var(--orange); box-shadow: 0 0 8px rgb(255 122 19 / .6);
}
.point strong { font-weight: 600; color: var(--cream); }

.crows { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 16px 32px; }
@media (min-width: 760px) { .crows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.crow { display: flex; gap: 12px; }
.crow-icon { font-size: 18px; color: var(--fg-accent, var(--orange)); margin-top: 2px; }
.crow-l { font: 400 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.crow-v {
  display: inline-block; margin-top: 4px; padding: 4px 0;
  font: 400 13px/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-gold, var(--yellow));
  text-decoration: none; overflow-wrap: anywhere;
}
a.crow-v:hover, a.crow-v:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.jump {
  position: fixed; right: 0; left: 0; bottom: 0; z-index: 40;
  display: none; align-items: center; gap: 8px;
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
@media (max-width: 699px) {
  .js .jump { display: flex; }
  /* The opaque navigation strip has its own space below the last footer row. */
  .js .page-legal { padding-bottom: calc(63px + env(safe-area-inset-bottom, 0px)); }
}
.jump.showing { opacity: 1; pointer-events: auto; }
.jump a { display: none; min-width: 80px; }
.jump a[data-jump-end] { margin-left: auto; }
.jump.show-top a[data-jump-top], .jump.show-end a[data-jump-end] { display: flex; }

/* ---------------------------------------------------------------------------
   What this site counts
   --------------------------------------------------------------------------- */
.choices { display: grid; gap: 32px; }
.choices > * { max-width: none; }
.prose-title { font: 700 26px/1.1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
@media (min-width: 700px) { .prose-title { font-size: 30px; } }
.prose p { margin-top: 16px; max-width: none; font-size: 15.5px; line-height: 1.62; text-wrap: pretty; }
@media (min-width: 700px) { .prose p { font-size: 16.5px; } }
.switch-wrap { transition: filter .3s ease; }
.switch-wrap.off { filter: drop-shadow(0 0 22px rgb(255 122 19 / .28)); }
.switch-panel { --cut: 16px; --fill: var(--panel); padding: 28px; }
.switch-wrap.off .switch-panel { --edge: rgb(255 122 19 / .6); }
.switch-state { margin-top: 12px; font-size: 17px; color: var(--cream); text-wrap: pretty; }
.switch-help { margin-top: 10px; font-size: 15.5px; }
.switch-action { margin-top: 20px; }
.saved { margin-top: 14px; font-size: 15px; color: var(--fg-gold, var(--yellow)); }
.saved:empty { display: none; }
.prose-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: -16px; }
.prose-links a {
  display: inline-flex; align-items: center; min-height: 52px;
  font: 400 13px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); text-decoration: none;
}
.prose-links a:hover, .prose-links a:focus-visible { color: var(--fg-gold, var(--yellow)); }

/* ---------------------------------------------------------------------------
   A card in the middle of the page: unsubscribe, and a link that goes nowhere
   --------------------------------------------------------------------------- */
.frame-page { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: calc(100vh - 81px); padding: 56px 18px; }
.frame { display: flex; flex-direction: column; align-items: center; width: min(480px, 100%); text-align: center; }
.frame-badge { width: 96px; height: 96px; }
.frame-badge .bk { width: 16px; height: 16px; }
.frame-badge .bk.tl { left: -12px; top: -12px; }
.frame-badge .bk.tr { right: -12px; top: -12px; }
.frame-badge .bk.bl { left: -12px; bottom: -12px; }
.frame-badge .bk.brr { right: -12px; bottom: -12px; }
.frame-badge img { width: 96px; height: 96px; }
.frame-word { margin-top: 26px; font: 700 16px/1 var(--f-display); letter-spacing: .2em; color: var(--dim); }
.frame .hud { margin-top: 18px; }
.frame-title { margin-top: 10px; font: 700 34px/1.1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); text-wrap: balance; }
.frame-sub { margin-top: 22px; display: grid; gap: 4px; }
.frame-sub p { font: 400 12.5px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-accent, var(--orange)); text-wrap: balance; }
.frame-panel { --cut: 18px; --fill: var(--panel); width: 100%; margin-top: 18px; padding-top: 22px; }
.frame-actions { display: grid; gap: 12px; padding: 24px 24px 20px; }
.frame-error { font-size: 15px; color: #FF8A80; text-align: left; }
.frame-note { font-size: 14px; text-align: left; }
.frame-version { margin-top: 18px; font: 700 16px/1 var(--f-mono); letter-spacing: .1em; color: var(--fg-accent, var(--orange)); }

/* ---------------------------------------------------------------------------
   Arriving. The page is complete with scripts off. A script may mark a
   section .in as it is reached; that never hides what is already there.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .scan { display: none; }
}

/* ---------------------------------------------------------------------------
   Light theme. Dark is the sheet above, unchanged: these rules apply only
   while the page has data-theme="light". Text uses the deeper brand colours
   so it stays readable on paper. Fills, the hazard stripe and the yellow
   buttons keep the bright orange and yellow.
   --------------------------------------------------------------------------- */
html[data-theme="light"] {
  --cream: #141416;
  --body: #1C1C1F;
  --dim: #5A5D64;
  --panel: #FFFFFF;
  --line: #90887E;
  --fg-accent: #A84A00;
  --fg-gold: #6B4E00;
  --control-edge: #5C5F66;
  color-scheme: light;
  background: #FAF9F6;
  scrollbar-color: #8A8278 transparent;
}
html[data-theme="light"]::-webkit-scrollbar-thumb { background: #8A8278; }
html[data-theme="light"] body { background: #FAF9F6; }
html[data-theme="light"] :focus-visible { outline-color: var(--fg-accent); }
html[data-theme="light"] ::selection { background: rgb(168 74 0 / .22); color: #141416; }

html[data-theme="light"] .topbar {
  background: #F6F0E6;
  border-bottom-color: rgb(168 74 0 / .35);
}
html[data-theme="light"] .topbar::after {
  background: linear-gradient(90deg, transparent, rgb(168 74 0 / .85) 50%, transparent);
}
html[data-theme="light"].scrolled .topbar {
  background: #EFE4D4;
  box-shadow: 0 12px 28px -16px rgb(80 50 20 / .28);
}
html[data-theme="light"] .topbar .btn { --btn-fill: #F6F0E6; }
html[data-theme="light"].scrolled .topbar .btn { --btn-fill: #EFE4D4; }
html[data-theme="light"] .btn.ghost,
html[data-theme="light"] .btn.secondary { --btn-fill: #FFFFFF; }
html[data-theme="light"] .topbar .btn.ghost,
html[data-theme="light"] .topbar .btn.secondary { --btn-fill: #F6F0E6; }
html[data-theme="light"].scrolled .topbar .btn.ghost,
html[data-theme="light"].scrolled .topbar .btn.secondary { --btn-fill: #EFE4D4; }
html[data-theme="light"] .theme-toggle .theme-face { background: #F6F0E6; color: #141416; }
html[data-theme="light"].scrolled .theme-toggle .theme-face { background: #EFE4D4; }
html[data-theme="light"] .theme-toggle:hover .theme-face,
html[data-theme="light"] .theme-toggle:focus-visible .theme-face {
  background: color-mix(in srgb, var(--orange) 14%, #F6F0E6);
}
html[data-theme="light"].scrolled .theme-toggle:hover .theme-face,
html[data-theme="light"].scrolled .theme-toggle:focus-visible .theme-face {
  background: color-mix(in srgb, var(--orange) 14%, #EFE4D4);
}
html[data-theme="light"] .menu-sheet {
  background: #FFFCF7;
  box-shadow: 0 24px 40px -20px rgb(40 30 20 / .22);
}
html[data-theme="light"] .hud .br { color: rgb(168 74 0 / .8); }
html[data-theme="light"] .head-row[data-index]::after {
  -webkit-text-stroke-color: rgb(168 74 0 / .5);
}
html[data-theme="light"] .acc-o {
  background-image: linear-gradient(180deg, #C45E12 0%, #A84A00 55%, #7A3400 100%);
  filter: none;
}
html[data-theme="light"] .acc-y {
  background-image: linear-gradient(180deg, #8A6400 0%, #6B4E00 55%, #4E3800 100%);
  filter: none;
}
html[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(rgb(168 74 0 / .09) 1px, transparent 1px),
    linear-gradient(90deg, rgb(168 74 0 / .09) 1px, transparent 1px);
}

html[data-theme="light"] .browser {
  background: #E7E2DA;
  box-shadow:
    0 24px 50px -28px rgb(40 30 20 / .28),
    0 0 0 1px rgb(40 30 20 / .14);
}
html[data-theme="light"] .browser-top,
html[data-theme="light"] .browser-url { background: #F4F0E8; }
html[data-theme="light"] .browser-top { border-bottom-color: rgb(40 30 20 / .12); }
html[data-theme="light"] .browser-url { border-bottom-color: rgb(40 30 20 / .08); }
html[data-theme="light"] .dots i { background: #C8C2B8; }
html[data-theme="light"] .dots i:nth-child(1) { background: #ff5f57; }
html[data-theme="light"] .dots i:nth-child(2) { background: #febc2e; }
html[data-theme="light"] .dots i:nth-child(3) { background: #28c840; }
html[data-theme="light"] .tab,
html[data-theme="light"] .win-titles .slide { background: #FFFFFF; }
html[data-theme="light"] .demo-toggle:hover,
html[data-theme="light"] .demo-toggle:focus-visible { background: rgb(20 16 12 / .06); }
html[data-theme="light"] .map-credit { background: #121214; color: #F5F2EC; }
html[data-theme="light"] .device-stage .iphone {
  background: linear-gradient(160deg, #F7F4EF 0%, #E4DDD4 18%, #C9C1B6 48%, #B0A89E 78%, #D9D2C8 100%);
  box-shadow:
    inset 0 0 0 1px #FFFFFF,
    inset 0 0 0 3px #8A847C,
    0 22px 36px -12px rgb(40 30 20 / .28),
    0 8px 16px -8px rgb(40 30 20 / .18);
}
html[data-theme="light"] .frame-btn {
  background: #FFFFFF;
  border-color: var(--fg-accent);
}
html[data-theme="light"] .frame-dot { border-color: var(--fg-accent); }
html[data-theme="light"] .frame-btn:hover,
html[data-theme="light"] .frame-btn:focus-visible,
html[data-theme="light"] .frame-dot:hover,
html[data-theme="light"] .frame-dot:focus-visible {
  background: rgb(168 74 0 / .1);
  outline-color: #141416;
}

html[data-theme="light"] .screen-notes .st.wait {
  color: #1A3A8A;
  background: rgb(26 58 138 / .1);
  border-color: rgb(26 58 138 / .45);
}
html[data-theme="light"] .screen-notes .st.ok {
  color: #0E5C2F;
  background: rgb(14 92 47 / .1);
  border-color: rgb(14 92 47 / .4);
}
html[data-theme="light"] .trade-find input,
html[data-theme="light"] .flow-card { background: #FFFFFF; }
html[data-theme="light"] .trade-chip,
html[data-theme="light"] .trade-face,
html[data-theme="light"] .plan-face,
html[data-theme="light"] .includes,
html[data-theme="light"] .final { --fill: #FFFFFF; }
html[data-theme="light"] .billing { --fill: #FFFFFF; }
html[data-theme="light"] .save.lit,
html[data-theme="light"] .mchip { color: var(--fg-accent); }
html[data-theme="light"] a.mchip:hover,
html[data-theme="light"] a.mchip:focus-visible { color: var(--fg-gold); }
html[data-theme="light"] .plan.skeleton {
  background: linear-gradient(100deg, #E8E4DC 30%, #F7F4EE 50%, #E8E4DC 70%) 0 0 / 300% 100%;
}
html[data-theme="light"] .roadmap-band { background: #F3EFE8; }
html[data-theme="light"] .day-d { text-shadow: none; }
html[data-theme="light"] .jump { background: #FFFCF7; }
html[data-theme="light"] .jump .btn { --btn-fill: #FFFCF7; }
html[data-theme="light"] .frame-error { color: #9F1D1D; }