/*
 * AI Commerce Lab landing page (lab.shopped.com).
 *
 * One stylesheet, on the tokens in variables.css — the same locked direction
 * (2026-10-15) the landing page uses. This page is its own property, so the
 * chrome below (nav, buttons, footer, section rhythm) is restated here on
 * those tokens rather than pulled from jobs.css: linking jobs.css would drag
 * in the hero and composer this page does not have, and editing jobs.css
 * would collide with the homepage design pass that is still in flight.
 * Once that pass lands, the shared chrome is worth lifting into one file.
 */

/* Magnet (Frere-Jones Type): licensed webfont, self-hosted; Medium is the
   licensed weight. The licence covers the marketing site. */
@font-face {
  font-family: 'Magnet';
  src: url('/assets/fonts/Magnet-Medium.woff2') format('woff2'),
       url('/assets/fonts/Magnet-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* "Start a class" in the hero and the nav carries no class, so it sends people
   to the cards where the choice is explained rather than to a form that would
   have to ask which one. Scrolled rather than jumped, so it reads as "here are
   your options" instead of a teleport. Turned off under reduced motion below. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  /* Same text rendering as the homepage (jobs.css), so the shared nav and
     type look identical across the two pages. */
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 9px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--clr-brand);
  border: 1px solid var(--clr-brand);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
}

.btn-quiet {
  color: var(--clr-ink);
  background: transparent;
  border-color: var(--clr-panel-line);
}

.btn-lg { padding: 14px 28px; font-size: 16px; }

.btn:focus-visible { outline: 2px solid var(--clr-brand); outline-offset: 2px; }
.btn:disabled { cursor: not-allowed; opacity: 0.6; }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--max-w);
  margin: 32px auto 0;
  padding: 0 20px 12px;
  font-family: var(--font-ui);
}

.site-logo { display: inline-flex; align-items: center; line-height: 0; }
.site-logo img { height: 26px; width: auto; display: block; }

.site-nav-links {
  display: flex;
  gap: 18px;
  margin-right: auto;
  font-size: 14px;
}

.site-nav-links a {
  color: var(--clr-body);
  font-size: 14px;
  text-decoration: none;
}


.site-nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

.nav-link { color: var(--clr-body); font-size: 14px; text-decoration: none; }

/* Hidden until the links collapse. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--clr-ink);
  background: transparent;
  border: 1px solid var(--clr-panel-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-toggle:focus-visible { outline: 2px solid var(--clr-brand); outline-offset: 2px; }
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle-close { display: block; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

/* The landing page's hero carries the illustration stacks; this one is type
   only. It keeps that hero's gradient — white at the top warming to the cream
   at the bottom — so .page-body picks the tone up at exactly the value the
   hero left it at. One continuous surface, no band edge between the two. */
/* A stage, like the landing page's, so the type can scale with the container
   rather than with the viewport: sizes are fixed from 1200px up and shrink
   with the page below that, so nothing grows past its desktop size.
   Left-aligned, unlike that hero — it is centred there because two
   illustration stacks flank it, and this one has nothing on its left. */
.hero {
  position: relative;
  container-type: inline-size;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-warm) 100%);
}

/* Copy left, stack right. The art column stretches to the row, and the row is
   the copy's height — so the stack is sized off the text rather than off a
   number that has to be re-guessed every time the copy changes. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: min(4cqw, 48px);
  /* The nav's content width (its max-width less its 20px sides), so the copy
     starts under the logo rather than 20px left of it. */
  max-width: calc(var(--max-w) - 40px);
  margin: 0 auto;
  padding: min(7cqw, 84px) 0 min(6.5cqw, 78px);
}

.hero-copy { padding-bottom: min(1.5cqw, 18px); }

/* Centred in whatever the copy leaves, not pinned to the right edge: as the
   window narrows the column shrinks faster than the stack does, and a
   right-pinned stack ends up hard against the page edge with a gap beside
   the copy. */
.hero-art { display: flex; justify-content: center; align-items: center; }

/* Height-led, not width-led: it matches the copy block exactly at full width.
   `max-width` is the guard — where the column is too narrow for the stack's
   aspect, width wins and the height comes in under the copy rather than
   overflowing into it. */
.lab-blocks {
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* The AI Commerce Lab wordmark, in the eyebrow's place above the title. */
.lab-wordmark {
  margin: 0 0 min(2cqw, 24px);
  line-height: 0;
}
.lab-wordmark img {
  display: block;
  height: clamp(22px, 2.4cqw, 29px);
  width: auto;
}

.hero-title {
  max-width: min(58cqw, 660px);
  margin: 0 0 min(1.9cqw, 22px);
  font-family: var(--font-display);
  /* 54px from 1200 up, never below 40 — the landing page's scale. */
  font-size: clamp(40px, 4.5cqw, 54px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--clr-ink);
  text-wrap: balance;
}

.hero-sub {
  max-width: min(46cqw, 520px);
  margin: 0 0 min(3.4cqw, 40px);
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.4167cqw, 17px);
  line-height: 1.62;
  color: var(--clr-body);
  text-wrap: pretty;
}

.hero-helper {
  margin: min(1.6cqw, 19px) 0 0;
  font-size: 14px;
  color: var(--clr-quiet);
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px 20px;
}

/* One continuous surface below the hero, same rule as the landing page: the
   hero ends warm, this picks it up at that tone and fades to white, with a
   couple of soft washes further down. */
.page-body {
  background:
    linear-gradient(180deg, var(--clr-bg-warm) 0, var(--clr-bg) 480px),
    radial-gradient(ellipse 70% 18% at 88% 32%, var(--clr-panel) 0%, transparent 70%),
    radial-gradient(ellipse 60% 14% at 8% 72%, var(--clr-bg-warm) 0%, transparent 70%),
    var(--clr-bg);
}

.section h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--clr-ink);
}

.lede {
  margin: 0 0 32px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--clr-body);
}

.lede-wide { max-width: 620px; }

/* ── Path cards ────────────────────────────────────────────────────────── */

.paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* Column, so every card's CTA sits on the same baseline however the body
   copy wraps. */
.path {
  display: flex;
  flex-direction: column;
  /* 18px, the padding the landing page's cards use. */
  padding: 18px;
  background: var(--clr-card);
  border: 1px solid var(--clr-panel-line);
  border-radius: var(--radius-md);
}

/* Tier icons: Lucide (ISC), two-tone, on the landing page's icon treatment —
   brand stroke over a brand-tint fill, in a rounded tile. Larger than the
   drifting rows' icons below, because on these cards the icon is the first
   thing read. */
.tier-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 0 16px;
  border-radius: 14px;
  background: var(--clr-panel);
  color: var(--clr-brand);
}

.tier-ico svg {
  width: 26px;
  height: 26px;
  fill: var(--clr-brand-tint);
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Each path owns a colour from the app's categorical palette, so the mark on
   the card, the campaign assets and anything the app shows for that class all
   read as the same thing. The treatment is unchanged — warm tile, strong
   stroke, pale fill — with only the two colours swapped, so the three cards
   keep the same weight and the colour is carried by the mark rather than by
   the tile. `operator` is the Practitioner path; the card uses the learner's
   name for it. */
.path[data-path='foundations'] .tier-ico { color: var(--cat-sky); }
.path[data-path='foundations'] .tier-ico svg { fill: var(--cat-sky-bg); }

.path[data-path='operator'] .tier-ico { color: var(--cat-orange); }
.path[data-path='operator'] .tier-ico svg { fill: var(--cat-orange-bg); }

.path[data-path='leadership'] .tier-ico { color: var(--cat-green); }
.path[data-path='leadership'] .tier-ico svg { fill: var(--cat-green-bg); }

.path-format {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-quiet);
}

.path h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--clr-ink);
}

.path-descriptor {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--clr-text);
}

.path-detail { margin: 0 0 20px; }

.path-detail dt {
  margin: 0 0 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-quiet);
}

.path-detail dd {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--clr-body);
}

.path-detail dd:last-child { margin-bottom: 0; }

/* Pushed to the foot of the card by the auto margin. */
.path-cta {
  margin-top: auto;
  align-self: flex-start;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

/* Centred, for the landing page's reason: the rows are symmetric, so the
   heading sits on their axis, and it breaks up the run of left-aligned
   sections around it. */
#built h2, #built .lede { text-align: center; }
#built .lede { margin-left: auto; margin-right: auto; }

/* The landing page's "Limitless possibilities" treatment, on this page's
   content: two rows of tiles drifting in opposite directions, faded at both
   ends. Each row holds its set twice, so moving it by half its width loops
   without a seam. Hover pauses it; reduced motion stands it still and shows
   one set wrapped. Mirrors .agent-rows in jobs.css. */
.work-rows {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.work-row { display: flex; width: max-content; animation: work-drift 56s linear infinite; }
.work-row-rev { animation-direction: reverse; animation-duration: 64s; }
.work-rows:hover .work-row { animation-play-state: paused; }
@keyframes work-drift { to { transform: translateX(-50%); } }

.work-set { display: flex; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }

.work-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 10px;
  background: var(--clr-panel);
  border-radius: 16px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--clr-ink);
  white-space: nowrap;
}

.work-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--clr-card);
  color: var(--clr-brand);
}

.work-ico svg {
  width: 22px;
  height: 22px;
  fill: var(--clr-brand-tint);
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

/* Verbatim from the landing page, including the overscanned crop: the drawing
   is 230% of the width and nudged left so only its middle shows, and the
   content sits in the V a fixed share of the width up from the bottom so it
   rides the dip as the drawing scales. Both properties are the crop that was
   approved on the sign-up wait screens — worth keeping identical across the
   two properties rather than re-cropping per page. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  min-height: 38cqw;
  margin: 0;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-warm) 100%);
  font-family: var(--font-ui);
}

.footer-inner {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 17cqw;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: max-content;
  max-width: calc(100% - 40px);
  text-align: center;
}

.footer-blocks {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -30cqw;
  width: 230cqw;
  max-width: none;
  height: auto;
  transform: translateX(-52%);
  pointer-events: none;
  user-select: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  max-width: 30cqw;
  font-size: 14px;
}

.footer-links a { color: var(--clr-body); text-decoration: none; }
.footer-links a:hover { color: var(--clr-ink); }

.footer-fine { margin: 0; font-size: 13px; color: var(--clr-quiet); }

/* ── Conversion form ───────────────────────────────────────────────────── */

.form-modal {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  color: var(--clr-text);
  background: var(--clr-card);
  border: 1px solid var(--clr-panel-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.form-modal::backdrop { background: rgba(22, 24, 46, 0.42); }

.form-modal-inner { position: relative; padding: 28px; }

.form-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  font-size: 22px;
  line-height: 1;
  color: var(--clr-quiet);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.form-close:hover { color: var(--clr-ink); }
.form-close:focus-visible { outline: 2px solid var(--clr-brand); outline-offset: 2px; }

.form-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--clr-ink);
}

.form-lead {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--clr-body);
}

.field { margin: 0 0 14px; }

.field label {
  display: block;
  margin: 0 0 5px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-ink);
}

.field input[type='text'],
.field input[type='email'],
.field select {
  width: 100%;
  padding: 9px 11px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--clr-ink);
  background: var(--clr-bg);
  border: 1px solid var(--clr-hairline);
  border-radius: var(--radius);
}

.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--clr-brand);
  outline-offset: 1px;
  border-color: var(--clr-brand);
}

/* A field the browser has flagged on submit. Set by the script, not by
   :invalid, so nothing is marked before they have tried. */
.field input[aria-invalid='true'],
.field select[aria-invalid='true'] { border-color: var(--clr-flag); }

.field-check label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  color: var(--clr-text);
}

.field-check input { margin-top: 2px; }

/* Off-screen rather than hidden: a display:none field is skipped by some
   bots, which is the opposite of what a honeypot wants. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-turnstile:not([hidden]) { margin: 0 0 14px; }

.form-error {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--clr-flag);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.form-actions-end { justify-content: flex-end; }

.form-fine {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--clr-quiet);
}

/* ── Narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /* The bar keeps the logo on the left and both actions on the right; the
     links move behind the toggle rather than disappearing. `order` puts the
     panel last so it wraps onto its own line under the bar. */
  .site-nav { flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
  .site-nav-actions { margin-left: auto; gap: 10px; }
  .nav-toggle { display: flex; }

  /* The bar is four items wide on a 375px screen, so the logo and the button
     give up a little to keep them on one line with the toggle. */
  .site-logo img { height: 22px; }
  .site-nav .btn { padding: 8px 12px; }
  .nav-toggle { width: 34px; height: 34px; }

  .site-nav-links {
    order: 4;
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 2px;
    margin: 6px 0 0;
    padding: 6px;
    background: var(--clr-panel);
    border: 1px solid var(--clr-panel-line);
    border-radius: var(--radius-md);
  }

  .site-nav-links[data-open] { display: flex; }
  .site-nav-links a { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 15px; }
  .site-nav-links a.is-current { text-decoration: none; background: var(--clr-card); }

  .hero { padding: 0 16px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); padding: 44px 0 56px; }
  .hero-copy { padding-bottom: 0; }
  /* Narrow: the stack would halve the copy's width for decoration, so it goes. */
  .hero-art { display: none; }
  .hero-title { max-width: none; font-size: 34px; }
  .hero-sub { max-width: none; font-size: 17px; }

  .section { padding: 48px 16px; }
  .section h2 { font-size: 30px; }

  .paths { grid-template-columns: 1fr; }

  /* Narrow: the V is too tight for a row of links, so the content goes back
     above the band and the blocks start further down — the landing page's
     own narrow rule, kept identical. */
  .site-footer { min-height: 70cqw; padding: 40px 16px 0; }
  .footer-inner { position: static; transform: none; width: auto; max-width: none; margin: 0 auto; }
  .footer-links { max-width: none; }
  .footer-blocks { bottom: -34cqw; }

  .form-modal-inner { padding: 22px 18px; }
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }

  /* The in-page jump to the cards lands instantly instead of travelling. */
  html { scroll-behavior: auto; }

  /* Standing still, the mask and the doubled set are both wrong: fade the
     edges of rows that no longer move, and drop the duplicate. */
  .work-rows { -webkit-mask-image: none; mask-image: none; }
  .work-row { width: auto; }
  .work-set { flex-wrap: wrap; padding: 0; }
  .work-set[aria-hidden='true'] { display: none; }
}