/* ===========================================================
   ProdClaw design system
   Dark cinematic product. Deep black ground, one amber accent.
   Shared by every page — page-specific CSS stays inline.
   =========================================================== */

/* ── Fonts (self-hosted, latin subset) ───────────────────── */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/spacegrotesk-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/spacegrotesk-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/firacode-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ──────────────────────────────────────────────── */

:root {
  /* Ground up. Only three surface steps — the old palette had too many. */
  --ink-0: #07070A;
  --ink-1: #0C0C11;
  --ink-2: #101014;
  --line: #1C1C22;
  --line-hi: #2B2B35;

  --fg: #F4F3F1;
  --fg-dim: #9B9BA4;
  /* Third text step. Held at >=4.5:1 on every surface because it carries
     13-14px copy (form hints, placeholders, table headers, legal). The old
     #60606B measured 3.06:1 on --ink-2, which only clears the large-text bar. */
  --fg-mute: #7E7E8A;

  /* One accent. Resist adding a second. */
  --amber: #E8913A;
  --amber-hi: #FFB347;
  --amber-wash: rgba(232, 145, 58, 0.10);
  --amber-line: rgba(232, 145, 58, 0.28);

  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(88px, 13vh, 168px);

  /* ── Radii ──
     The single biggest tell that this was not designed by Apple was
     `border-radius: 2px` on everything. Apple's language is generous and
     concentric: pill-shaped controls, softly rounded surfaces. */
  --r-pill: 980px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  /* ── 8pt spacing grid ──
     Replaces ad-hoc values (15px 28px, 10px 20px, 7px, 26px, 34px...).
     Rhythm only reads as deliberate when it is actually regular. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  --sp-9: 64px; --sp-10: 80px;

  /* ── Type ramp ──
     Six steps replacing sixteen sizes scattered between 11 and 16.5px. */
  --t-body-l: 19px;
  --t-body: 17px;
  --t-sub: 15px;
  --t-caption: 13px;
  --t-micro: 11px;

  /* ── Motion ──
     Control feedback has to feel immediate. Apple's interactive transitions
     land around 0.2-0.3s; buttons here were running 0.7s, which reads as
     sluggish no matter how good the rest looks. --slow is now reserved for
     scroll reveals, where a long ease is correct. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fast: 0.22s;
  --med: 0.35s;
  --slow: 0.7s;

  /* ── Elevation ──
     Depth for contained surfaces, so structure can come from layering and
     space rather than from sixteen 1px hairlines. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 10px 28px rgba(0, 0, 0, 0.22);
  --elev-2: 0 2px 5px rgba(0, 0, 0, 0.36), 0 22px 56px rgba(0, 0, 0, 0.3);
}

/* ── Reset ───────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--ink-0);
  color: var(--fg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--amber); color: #0A0A0A; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  /* No border-radius override here. Outlines already follow the element's own
     border-radius, so the ring hugs a pill button correctly on its own —
     whereas `border-radius: inherit` would pull the PARENT's radius, which is
     usually 0, and box a capsule. */
}

/* ── Layout primitives ───────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: var(--section-y) 0; position: relative; }

/* Hairline divider. Fades out at the edges so it never looks like a box. */
.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}

/* Asymmetric two-column. The whole point is that it is NOT 50/50. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--top { align-items: start; }

/* ── Typography ──────────────────────────────────────────── */

/* Section label.
   Was mono, uppercase, 0.14em tracked, with a leading hairline dash — an
   industrial/technical signature. Apple labels sections in sentence case at
   body weight and lets colour do the work, no rule and no wide tracking.
   This appears 32 times across the site, so it is the change that most shifts
   the overall impression. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-sub);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--amber);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6.2vw, 78px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.015em;
}

.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 58ch;
}

.body-dim { color: var(--fg-dim); }
.mono { font-family: var(--font-mono); font-size: 0.86em; }
.amber { color: var(--amber); }

/* Oversized step numerals — structure without boxes.
   Solid and low-contrast rather than outlined: a hairline text-stroke is an
   editorial/brutalist device, and Apple sets large numerals as quiet solid
   tints. */
.numeral {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 104px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--line-hi);
  -webkit-text-stroke: 0;
}

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

/* Pill controls. Apple's primary CTA is a filled capsule at body size with
   generous horizontal padding, paired with a plain text link rather than a
   second outlined box. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--t-body);
  letter-spacing: -0.015em;
  padding: var(--sp-3) var(--sp-6);
  min-height: 50px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background var(--fast) var(--ease-out),
              color var(--fast) var(--ease-out),
              transform var(--fast) var(--ease-out),
              box-shadow var(--fast) var(--ease-out);
}
.btn svg { width: 17px; height: 17px; flex: none; }

/* Press feedback. A control that does not acknowledge the touch feels broken
   on a phone, and this is the cheapest way to make the whole site feel
   responsive. */
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--amber); color: #0A0A0A; }
/* Hover lightens rather than lifts: Apple's buttons do not float off the page,
   and a translateY would fight the press-scale below. */
.btn--primary:hover { background: var(--amber-hi); }

/* Secondary is a translucent fill, not a 1px outline. Outlined buttons read as
   a form toolbar; a soft fill reads as a product. */
.btn--ghost {
  background: rgba(255, 255, 255, 0.07);
  color: var(--fg);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.13); }

/* Inline text CTA with a chevron that slides on hover. Replaces the underline,
   which belonged to a document rather than an interface. */
.btn--text {
  padding: 0;
  min-height: 0;
  gap: var(--sp-1);
  color: var(--amber);
  background: none;
  border-radius: 0;
}
.btn--text::after {
  content: '\203A';
  font-size: 1.3em;
  line-height: 1;
  transition: transform var(--fast) var(--ease-out);
}
.btn--text:hover::after { transform: translateX(4px); }
.btn--text:active { transform: none; }

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

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(7, 7, 10, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.03em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
.nav__logo .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber);
  flex: none;
}
.nav__links { display: flex; gap: 34px; align-items: center; }
/* min-height, not padding: the hit area reaches the 44px minimum without
   moving the text baseline. Covers .nav__cta too, which measured 43px. */
.nav__links a {
  font-size: var(--t-sub);
  letter-spacing: -0.01em;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color var(--fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav__links a:hover { color: var(--fg); }
/* Scoped under .nav__links so it out-specifies the `.nav__links a` colour
   rule above — otherwise the label renders amber-on-amber. */
.nav__links a.nav__cta {
  background: var(--amber);
  color: #0A0A0A;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--t-sub);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.nav__links a.nav__cta:hover { background: var(--amber-hi); color: #0A0A0A; }
.nav__links a.nav__cta:active { transform: scale(0.97); }

/* 22px icon + 11px padding = a 44x44 hit area. The negative margin keeps the
   glyph optically flush to the gutter despite the larger target. */
.nav__toggle {
  display: none;
  color: var(--fg-dim);
  padding: 11px;
  margin-right: -11px;
}
.nav__toggle svg { width: 22px; height: 22px; }

@media (max-width: 860px) {
  .nav__toggle { display: block; }
  .nav__links {
    display: none;
    position: absolute;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 26px var(--gutter) 32px;
    background: rgba(7, 7, 10, 0.97);
    border-bottom: 1px solid var(--line);
  }
  .nav__links.is-open { display: flex; }
}

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

.footer { border-top: 1px solid var(--line); padding: 64px 0 48px; }
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
}
/* Row-gap drops to 4px because the 44px tap targets below now supply the
   vertical separation themselves. */
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.footer__links a {
  font-size: var(--t-sub);
  color: var(--fg-dim);
  text-decoration: none;
  transition: color var(--fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__links a:hover { color: var(--fg); }
.footer__legal { font-size: var(--t-caption); color: var(--fg-mute); margin-top: 28px; }

/* ── 3D stage ────────────────────────────────────────────── */

.stage {
  position: relative;
  width: 100%;
  /* Matches the Blender hero render (1600x1066) so the live canvas and the
     poster frame the machine identically. */
  aspect-ratio: 3 / 2;
  /* Reserve the box up front so mounting the canvas cannot shift layout. */
  contain: layout paint;
}
.stage__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.9s var(--ease);
}
.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}
.stage.is-live .stage__canvas { opacity: 1; }
.stage.is-live .stage__poster { opacity: 0; }

/* ── Scroll reveal ───────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ===========================================================
   Page components
   Shared by every landing page (fork, startups, front desk).
   Promoted out of index.html so the three pages do not each
   carry their own copy of the same 6.5KB.
   =========================================================== */

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

.hero { padding: 168px 0 var(--section-y); position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute;
  top: -10%; right: -15%;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(232, 145, 58, 0.07) 0%, transparent 65%);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

.hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px clamp(20px, 3vw, 40px);
  margin-top: 72px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
}
.fact__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -0.03em;
  color: var(--amber);
}
.fact__label { font-size: var(--t-caption); color: var(--fg-mute); margin-top: 2px; }

/* ── Problem statements (hairlines, deliberately not cards) ─ */

.problems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 6vw, 88px); }
.problem { padding: 30px 0; border-top: 1px solid var(--line); }
.problem h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.015em; margin-bottom: 8px; }
.problem p { font-size: var(--t-sub); color: var(--fg-dim); line-height: 1.6; }

/* ── Deliverables / capability columns ───────────────────── */

.deliver { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 6vw, 80px); margin-top: 56px; }
.deliver h3 {
  font-family: var(--font-body);
  font-size: var(--t-sub); font-weight: 600; letter-spacing: -0.01em;
  color: var(--fg); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line);
}
.deliver ul { list-style: none; }
.deliver li {
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sub); color: var(--fg-dim); position: relative;
}
.deliver li::before {
  content: ''; position: absolute; left: 0; top: 24px;
  width: 10px; height: 1px; background: var(--amber);
}
.deliver li strong { color: var(--fg); font-weight: 600; }

/* ── Process steps (alternating rows with artwork) ───────── */

.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; padding: clamp(40px, 6vh, 72px) 0; border-top: 1px solid var(--line); }
.step:nth-child(even) .step__art { order: -1; }
.step__art img { width: 100%; height: auto; }
.step__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 18px; }
.step__meta { font-size: var(--t-sub); font-weight: 600; letter-spacing: -0.01em; color: var(--amber); margin-top: var(--sp-5); }

/* ── Layered stack ───────────────────────────────────────── */

/* Surfaces use radius + elevation instead of a 1px box. */
.stack {
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--sp-8);
  background: var(--ink-1);
  box-shadow: var(--elev-1);
}
.layer { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline; }
.layer:last-child { border-bottom: 0; }
.layer__name { font-family: var(--font-display); font-weight: 500; font-size: 17px; min-width: 190px; }
.layer__detail { font-size: var(--t-sub); color: var(--fg-dim); flex: 1; min-width: 240px; }
.layer--accent { background: var(--amber-wash); border-left: 2px solid var(--amber); }

/* ── Pricing tiers ───────────────────────────────────────── */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--sp-9);
  box-shadow: var(--elev-1);
}
.tier { background: var(--ink-0); padding: var(--sp-7) var(--sp-6); display: flex; flex-direction: column; }
.tier--feature { background: var(--ink-2); }
.tier__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.tier__pitch { font-size: var(--t-sub); color: var(--fg-dim); margin: 8px 0 26px; min-height: 42px; }
.tier__price { font-family: var(--font-display); font-weight: 700; font-size: 42px; letter-spacing: -0.04em; line-height: 1; }
.tier__unit { font-size: var(--t-caption); color: var(--fg-mute); margin-top: 8px; }
.tier__list { list-style: none; margin: 28px 0 32px; flex: 1; }
.tier__list li { font-size: var(--t-sub); color: var(--fg-dim); padding: 9px 0 9px 22px; position: relative; }
.tier__list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 9px; height: 1px; background: var(--amber); }
.tier__list li strong { color: var(--fg); font-weight: 600; }

/* Wide banded row under the tiers (retainers, setup fees). */
.band { background: var(--ink-1); border-radius: var(--r-lg); box-shadow: var(--elev-1); margin-top: var(--sp-5); padding: var(--sp-6) var(--sp-6); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.band__prices { display: flex; gap: 40px; flex-wrap: wrap; }

.note { font-size: var(--t-caption); color: var(--fg-mute); margin-top: 24px; max-width: 72ch; }

/* ── FAQ ─────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--line); margin-top: 48px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; text-align: left; padding: 26px 40px 26px 0; font-family: var(--font-display); font-weight: 500; font-size: 18.5px; letter-spacing: -0.015em; position: relative; }
.faq__q::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--amber); font-size: 22px; font-family: var(--font-mono); }
.faq__item.is-open .faq__q::after { content: '–'; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--med) var(--ease-out); }
.faq__item.is-open .faq__a { max-height: 480px; }
.faq__a p { padding: 0 var(--sp-8) var(--sp-5) 0; color: var(--fg-dim); font-size: var(--t-body); }

/* ── Closing CTA ─────────────────────────────────────────── */

.close { text-align: center; padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.close .hero__ctas { justify-content: center; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 980px) {
  .tiers { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .split, .split--reverse { grid-template-columns: 1fr; gap: 36px; }

  .hero { padding-top: 124px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problems, .deliver { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; }
  .step:nth-child(even) .step__art { order: 0; }
}