/* css/operators-hero.css: airmango.com/operators/, the hero only.
 *
 * Robert's Airmango Desktop prototype, v3, Operators page (28 Oct 2026): idea 1 on
 * his Operators page canvas, on the Airmango design system. The values are the
 * design system's (his ds.css, from components/bundle.css) and the page's own
 * layout (his opshero.css), with his `@container ds` turned back into `@media`
 * as his handover says. Only what this page uses is here, scoped to .ops.
 *
 * The top bar is the front page's (css/site-header.css + css/ready-trips.css
 * under body.rt), so the palette tokens --p-* come from ready-trips.css :root.
 */

.ops {
  --shadow-phone: 30px 40px 60px rgba(0, 0, 0, 0.15);
  --space-gutter: 56px;
  --space-gutter-phone: 16px;
  --radius-sm: 8px;
  --font-display: Poppins, sans-serif;
  --font-text: Inter, sans-serif;
  background: var(--p-page);
  color: var(--p-ink);
  font: 400 16px/normal var(--font-text);
  -webkit-font-smoothing: antialiased;
}
.ops :where(h1, p, ol, figure) { margin: 0; }
.ops :where(ol) { padding: 0; list-style: none; }
.ops :where(img) { display: block; }

/* the type scale (zero specificity, as in the design system, so the page rules below win) */
:where(.ops) :where(.t-hero) { font: 700 60px/1.05 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
:where(.ops) :where(.t-title) { font: 600 18px/1.2 var(--font-display); text-wrap: balance; }
:where(.ops) :where(.t-lead) { font: 400 20px/1.45 var(--font-text); color: var(--p-text2); }
:where(.ops) :where(.t-note) { font: 400 14px/1.45 var(--font-text); color: var(--p-text2); }

/* Button */
:where(.ops) .am-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; padding: 16px 32px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--p-accent); color: #fff; font: 600 16px/1.2 var(--font-text); white-space: nowrap; text-decoration: none; cursor: pointer; }
:where(.ops) .am-btn:hover { background: var(--p-accent-hover); }
:where(.ops) .am-btn:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }

/* Search: a field and its button */
:where(.ops) .am-search { display: flex; gap: 10px; }
:where(.ops) .am-field { position: relative; flex: 1 1 0%; min-width: 0; display: block; }
:where(.ops) .am-field svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--p-text2); }
:where(.ops) .am-input { width: 100%; box-sizing: border-box; height: 56px; padding: 0 14px 0 48px; border: 1px solid var(--p-line); border-radius: var(--radius-sm); background: var(--p-card); color: var(--p-ink); font: 500 17px var(--font-text); }
:where(.ops) .am-input::placeholder { color: var(--p-text2); font-weight: 400; }
:where(.ops) .am-input:focus { border-color: var(--p-ink); outline: none; }

/* Step number */
:where(.ops) .am-dot { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; background: var(--p-dot-fill); color: var(--p-dot-num); border: 2px solid var(--p-dot-line); font: 700 16px var(--font-display); }

/* the page */
.ops-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-gutter); box-sizing: border-box; }
.ops-h1 span { display: block; }
.ops-act { width: 100%; max-width: 620px; }
.ops-fine { margin-top: 14px; }
.ops-sub { margin-top: 18px; }

/* the headline and the business name, centred */
.ops-top { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 56px; }
.ops-top .ops-act { margin-top: 36px; }

/* A creator sent this page (/operators/?invite=<creator>): who, above the headline. */
.ops-via { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font: 400 15px/1.4 var(--font-text); color: var(--p-text2); text-align: left; }
.ops-via[hidden] { display: none; }
.ops-via-av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--p-surface2) center / cover no-repeat; }
.ops-via b { font-weight: 600; color: var(--p-ink); }

/* the model as three screens of the Airmango app */
.ops-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 244px)); justify-content: center; gap: 88px; margin-top: 72px; padding-bottom: 88px; }
.ops-phones > li { display: flex; flex-direction: column; }
.ops-phone { width: 100%; margin: 0; box-sizing: border-box; border: 7px solid var(--p-ink); border-radius: 38px; overflow: hidden; background: var(--p-ink); box-shadow: var(--shadow-phone); }
.ops-phone img { display: block; width: 100%; height: auto; aspect-ratio: 540 / 1170; }
.ops-cap { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; text-align: left; }
.ops-cap .am-dot { flex: 0 0 auto; }

@media (max-width: 1100px) {
  .ops-phones { gap: 40px; }
}

/* a phone: left-aligned, the button under the field, the three screens a row you swipe */
@media (max-width: 720px) {
  .ops-wrap { padding: 0 var(--space-gutter-phone); }
  .ops-h1 { font-size: 36px; line-height: 1.04; letter-spacing: -1.3px; }
  .ops-act { max-width: none; }
  .ops-fine { font-size: 13px; }
  .ops-sub { margin-top: 12px; font-size: 17px; }
  .ops-top { align-items: stretch; text-align: left; padding-top: 14px; }
  .ops-top .ops-act { margin-top: 24px; }
  .ops .am-search { flex-direction: column; }
  .ops .am-search .am-btn { width: 100%; }
  .ops-via { margin-bottom: 20px; }
  .ops-phones { display: flex; justify-content: flex-start; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-gutter-phone); scrollbar-width: none; margin: 36px calc(-1 * var(--space-gutter-phone)) 0; padding: 0 var(--space-gutter-phone) 44px; }
  .ops-phones::-webkit-scrollbar { display: none; }
  .ops-phones > li { flex: 0 0 216px; scroll-snap-align: start; }
  .ops-phone { border-width: 6px; border-radius: 32px; }
  .ops-cap { justify-content: flex-start; gap: 10px; margin-top: 16px; }
  .ops-cap .am-dot { width: 32px; height: 32px; font-size: 14px; }
  .ops-cap .t-title { font-size: 16px; }
}