/* ===========================================================
   Stuart · long marketing pages (for-users, for-organisers)
   Brand system: confident, typographic. Grey ground, one green.
   Loads on top of stuart-app.css. All classes "op-".
   =========================================================== */

body {
  background: var(--ground);
  color: var(--type-1);
  font-family: var(--loud);
}
a { text-decoration: none; color: inherit; }
img { display: block; }

/* ── Nav ──────────────────────────────────────────────────── */
.op-nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.op-nav-inner {
  max-width: 1080px; margin: 0 auto;
  padding: 16px clamp(22px, 5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.op-nav-brand { display: flex; align-items: center; gap: 14px; }
.op-nav-brand img { height: 26px; width: auto; }
.op-nav-by {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--type-3);
}
@media (max-width: 620px) { .op-nav-by { display: none; } }

/* ── Buttons ──────────────────────────────────────────────── */
.op-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--type-1); color: var(--ground);
  padding: 12px 18px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--type-1); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.op-cta:hover { background: transparent; color: var(--type-1); }
.op-cta--ghost { background: transparent; color: var(--type-1); }
.op-cta--ghost:hover { background: var(--type-1); color: var(--ground); }
.op-arrow { transition: transform .15s ease; }
.op-cta:hover .op-arrow { transform: translateX(3px); }

/* ── Layout ───────────────────────────────────────────────── */
.op-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(22px, 5vw, 40px); }
/* Vertical only. The shorthand used to be `padding: <v> 0`, and because this
   rule sits after .op-wrap it silently zeroed the side padding on every
   element carrying both classes. Body content sat 40px left of the nav and
   hero on desktop, and hard against the screen edge on mobile. */
.op-section { padding-top: clamp(26px, 3.4vw, 38px); padding-bottom: clamp(26px, 3.4vw, 38px);
  border-bottom: 1px solid var(--rule); }

/* ── Type roles ───────────────────────────────────────────── */
.op-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--type-3); margin-bottom: 18px;
}
.op-h2 {
  font-family: var(--loud); font-weight: 800; text-transform: uppercase;
  font-size: clamp(27px, 5vw, 54px); line-height: .94;
  letter-spacing: -.035em; color: var(--type-1);
  max-width: 20ch; margin-bottom: 22px;
}
.op-h2 b { font-weight: 800; }
.op-accent { color: var(--green); }
.op-lede {
  font-family: var(--loud); font-weight: 400;
  font-size: clamp(16px, 1.9vw, 18px); line-height: 1.6;
  color: var(--type-2); max-width: 680px; text-wrap: pretty;
}

/* ── Hero ─────────────────────────────────────────────────── */
.op-hero { padding: clamp(34px, 5vw, 54px) clamp(22px, 5vw, 40px) clamp(28px, 3.6vw, 40px); }
.op-hero-tagline {
  font-family: var(--loud); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 7.4vw, 92px); line-height: .9;
  letter-spacing: -.045em; color: var(--type-1);
  max-width: 17ch; margin-bottom: 28px;
}
.op-hero-sub {
  font-family: var(--loud); font-weight: 400;
  font-size: clamp(16px, 2vw, 19px); line-height: 1.55;
  color: var(--type-2); max-width: 620px; text-wrap: pretty;
}
.op-hero-meta {
  margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
}
.op-pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 15px; border-radius: var(--radius-sm);
  background: var(--sage); color: var(--ink);
}

/* ── Quote band ───────────────────────────────────────────── */
.op-band {
  background: var(--plinth);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: clamp(16px, 2vw, 22px);
}
.op-band-quote {
  font-family: var(--word); font-weight: 400;
  font-size: clamp(16px, 1.9vw, 18px); line-height: 1.55;
  color: var(--type-1); max-width: 820px; text-wrap: pretty;
}
.op-band-foot {
  margin-top: 16px; display: flex; align-items: center; gap: 14px;
}
.op-band-foot span:last-child {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--type-3);
}
.op-rule { display: block; width: 34px; height: 1px; background: var(--rule-2); }

/* ── Two column panels ────────────────────────────────────── */
.op-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .op-2col { grid-template-columns: 1fr; } }
.op-panel {
  background: var(--plinth);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 30px 30px 28px;
}
.op-panel--sage { background: var(--sage); border-color: transparent; }
.op-panel h3 {
  font-family: var(--loud); font-weight: 800; text-transform: uppercase;
  font-size: clamp(17px, 2vw, 21px); line-height: 1;
  letter-spacing: -.025em; color: var(--type-1); margin-bottom: 18px;
}
.op-list { list-style: none; }
.op-list li {
  font-family: var(--loud); font-weight: 400;
  font-size: 14.5px; line-height: 1.55; color: var(--type-2);
  padding: 11px 0 11px 20px; position: relative;
  border-top: 1px solid var(--rule);
}
.op-panel--sage .op-list li { color: var(--ink); border-top-color: rgba(45,56,53,.16); }
.op-list li:first-child { border-top: none; }
.op-list li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 7px; height: 1.5px; background: var(--rule-2);
}
.op-panel--sage .op-list li::before { background: rgba(45,56,53,.35); }

/* ── Steps ────────────────────────────────────────────────── */
.op-steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 900px) { .op-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .op-steps { grid-template-columns: 1fr; } }
.op-step {
  background: var(--plinth);
  padding: 26px 22px 28px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.op-step:last-child { border-right: none; }
.op-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--type-3); margin-bottom: 16px;
}
.op-step h4 {
  font-family: var(--loud); font-weight: 800; text-transform: uppercase;
  font-size: 15px; letter-spacing: -.02em; color: var(--type-1); margin-bottom: 8px;
}
.op-step p {
  font-family: var(--loud); font-weight: 400;
  font-size: 13.5px; line-height: 1.5; color: var(--type-2); text-wrap: pretty;
}

/* ── Note under the steps ─────────────────────────────────── */
.op-note {
  margin-top: 20px;
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: var(--plinth);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 22px 26px;
}
.op-note .op-note-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--type-3); white-space: nowrap; padding-top: 3px;
}
.op-note p {
  font-family: var(--loud); font-weight: 400;
  font-size: 15px; line-height: 1.55; color: var(--type-2); text-wrap: pretty;
}
.op-note p b { font-weight: 700; color: var(--type-1); }
@media (max-width: 620px) {
  .op-note { grid-template-columns: 1fr; gap: 10px; }
  .op-note .op-note-label { padding-top: 0; }
}

/* ── Feature grid ─────────────────────────────────────────── */
.op-feats {
  margin-top: 30px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 760px) { .op-feats { grid-template-columns: 1fr; } }
.op-feat {
  background: var(--plinth);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 26px 28px 24px;
}
.op-fic { color: var(--type-1); margin-bottom: 14px; }
.op-fic svg { width: 24px; height: 24px; }
.op-feat h3 {
  font-family: var(--loud); font-weight: 800; text-transform: uppercase;
  font-size: 16px; letter-spacing: -.02em; color: var(--type-1); margin-bottom: 8px;
}
.op-feat p {
  font-family: var(--loud); font-weight: 400;
  font-size: 14px; line-height: 1.55; color: var(--type-2); text-wrap: pretty;
}

/* ── Story ────────────────────────────────────────────────── */
.op-story {
  display: grid; grid-template-columns: 1fr 300px; gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 820px) { .op-story { grid-template-columns: 1fr; } }
.op-story p {
  font-family: var(--loud); font-weight: 400;
  font-size: clamp(15px, 1.8vw, 17px); line-height: 1.6;
  color: var(--type-2); max-width: 620px; text-wrap: pretty;
}
.op-story p + p { margin-top: 14px; }
.op-story-aside {
  padding: 4px 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.op-story-aside img { width: 100%; max-width: 190px; height: auto; }
.op-cap {
  font-family: var(--loud); font-weight: 700; font-size: 15px;
  letter-spacing: -.005em; text-transform: uppercase; color: var(--type-1);
  text-align: center; line-height: 1.2; text-wrap: balance; max-width: 200px;
}

/* ── What Stuart actually does (flyer module) ─────────────── */
.op-does { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 20px); margin-top: 26px; }
@media (max-width: 820px) { .op-does { grid-template-columns: 1fr; } }
.op-does-card {
  background: var(--plinth); border: 1px solid var(--rule); border-radius: var(--radius, 10px);
  padding: clamp(22px, 3vw, 30px);
}
.op-does-num { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--green); display: block; margin-bottom: 16px; }
.op-does-card h3 {
  font-family: var(--loud); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(17px, 2vw, 20px); color: var(--type-1); margin-bottom: 8px;
}
.op-does-card p { font-family: var(--loud); font-weight: 400; font-size: 15px; line-height: 1.55; color: var(--type-2); }
.op-does-card strong { color: var(--type-1); font-weight: 700; }

/* ── Final CTA ────────────────────────────────────────────── */
.op-final {
  padding: clamp(60px, 9vw, 100px) clamp(22px, 5vw, 40px) clamp(60px, 9vw, 100px);
  text-align: center;
}
.op-final .op-eyebrow { text-align: center; }
.op-final .op-h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.op-final .op-lede { margin-left: auto; margin-right: auto; }
.op-big {
  font-family: var(--loud); font-weight: 800; text-transform: uppercase;
  font-size: clamp(38px, 7.4vw, 88px); line-height: .9;
  letter-spacing: -.045em; color: var(--type-1); margin-bottom: 26px;
}
.op-final-ctarow {
  margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}

/* ── Footer ───────────────────────────────────────────────── */
.op-footer { padding: 26px 0 40px; }
.op-footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.op-footer-inner img { height: 20px; width: auto; }
.op-footer-inner div { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.op-footer span, .op-footer a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--type-3);
}
.op-footer a:hover { color: var(--type-1); }

/* ── Tighter section for the quote band, whose gap above was the hero's
      bottom padding and the section's top padding stacked together ── */
.op-band-sec { padding-top: clamp(10px, 1.2vw, 14px); padding-bottom: clamp(18px, 2.2vw, 26px); }

/* ── Lime call to action ─────────────────────────────────────────── */
.op-cta--lime {
  background: var(--green); border-color: var(--green); color: var(--deep);
}
.op-cta--lime:hover { background: transparent; color: var(--type-1); border-color: var(--type-1); }

/* ── Display lockup beside the true-Stuart story ─────────────────── */
.op-story-big {
  font-family: var(--loud); font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 4.6vw, 58px); line-height: .86;
  letter-spacing: -.045em; color: var(--type-1);
}
/* "Be more" is 463 units wide against "Stuart." at 439 when set at the same
   size, both in Archivo 800 at this tracking. .948em is that ratio, so the
   two lines come out the same width: B lines up with S, E with the stop. */
.op-story-big .l1 { display: block; font-size: .948em; }
.op-story-big .l2 { display: block; }

/* ── Final CTA lockup, in place of the display type ──────────────── */
.op-final-lock { width: 100%; max-width: 340px; height: auto; margin: 0 auto 20px; display: block; }
.op-final-cap {
  font-family: var(--loud); font-weight: 800; text-transform: uppercase;
  font-size: clamp(15px, 2vw, 22px); line-height: 1.05;
  letter-spacing: -.03em; color: var(--type-1);
  margin: 0 auto 18px; white-space: nowrap;
}