/* Platinum Autoworks preview, built on Salam's own site system: the same type, grid, chapters and drawings,
   in Platinum's colours. Graphite opens and closes; platinum silver carries the pages; cobalt is for actions only. */
@font-face { font-family: Archivo; font-weight: 300; font-display: swap; src: url(/fonts/archivo-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: Archivo; font-weight: 600; font-display: swap; src: url(/fonts/archivo-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Archivo; font-weight: 800; font-display: swap; src: url(/fonts/archivo-latin-800-normal.woff2) format('woff2'); }

:root {
  --canvas: #f4f5f7;
  --s1: #e7e9ed;
  --s2: #dadde3;
  --ink: #0d1117;
  --body: #c3c8d0;   /* drawing surface */
  --edge: #a3aab5;   /* drawing edge */
  --screen: #f4f5f7;
  --dark: #1b212b;
  --text: #353c47;
  --muted: #5a626e;
  --accent: #2f6bff;
  --accent-hover: #5487ff;
  --accent-text: #1f4fd1;
  --on-accent: #ffffff;
  --deep: #0d1117;
  --deep-ink: #f2f4f7;
  --deep-body: #c4cad3;
  --deep-muted: #8d96a3;

  --font: Archivo, system-ui, sans-serif;
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --step-display: min(13vw, 15rem);
  --margin: clamp(16px, 3vw, 40px);
  --bar: 64px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--bar); }
body { font-family: var(--font); font-weight: 300; font-size: var(--step-body); line-height: 1.5; color: var(--ink); background: var(--canvas); overflow-x: clip; }
a { color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; }
b, strong { font-weight: 600; }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; white-space: nowrap;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
  transition: transform 140ms var(--ease-out), background-color 180ms ease;
}
.button:active { transform: scale(0.97); }
.link { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-underline-offset 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-hover); }
  .link:hover { text-underline-offset: 3px; }
}

/* Header: a plain bar that takes the colours of the chapter under it. */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 24px;
  height: calc(var(--bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--margin) 0;
  background: var(--deep); color: var(--deep-ink); transition: background-color 300ms ease, color 300ms ease;
}
.bar[data-on='canvas'] { background: var(--canvas); color: var(--ink); }
.bar[data-on='s1'] { background: var(--s1); color: var(--ink); }
.bar[data-on='s2'] { background: var(--s2); color: var(--ink); }
.wordmark { display: inline-flex; align-items: center; gap: 0.36em; margin-right: auto; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.045em; text-decoration: none; }
.tile { display: grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 0.22em; background: var(--tile-bg, var(--deep-ink)); color: var(--tile-ink, var(--deep)); line-height: 1; transition: background-color 300ms ease, color 300ms ease; }
.bar[data-on='canvas'] { --tile-bg: var(--ink); --tile-ink: var(--canvas); }
.bar[data-on='s1'] { --tile-bg: var(--ink); --tile-ink: var(--s1); }
.bar[data-on='s2'] { --tile-bg: var(--ink); --tile-ink: var(--s2); }
.bar-links { display: flex; gap: 24px; }
.bar-links a { font-weight: 600; text-decoration: none; }
.bar .button { min-height: 44px; padding: 0 16px; }
.bar-menu { display: block; min-height: 44px; padding: 0 4px; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) { .bar-links a:hover, .bar-menu:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } }
/* Menu: every section, large, like Salam's; the one you're in is lit. */
#menu { inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; padding: 0 var(--margin) calc(28px + env(safe-area-inset-bottom)); background: var(--deep); color: var(--deep-ink); flex-direction: column; gap: 24px; overflow-y: auto; overscroll-behavior: contain; }
#menu:popover-open { display: flex; }
#menu .tile { --tile-bg: var(--deep-ink); --tile-ink: var(--deep); }
.menu-top { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: var(--bar); padding-top: env(safe-area-inset-top); background: var(--deep); }
.menu-body { display: grid; grid-template-columns: 7fr 5fr; gap: 32px 48px; align-items: end; margin: auto 0; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { width: fit-content; font-weight: 800; font-size: clamp(2.25rem, 1rem + 4.4vw, 5rem); letter-spacing: -0.045em; line-height: 1.08; text-decoration: none; transition: color 180ms ease; }
.menu-links a[aria-current] { color: var(--accent-hover); }
.menu-jobs { display: flex; flex-wrap: wrap; gap: 8px; align-content: end; }
.menu-jobs p { width: 100%; margin-bottom: 4px; color: var(--deep-muted); font-weight: 600; }
.menu-jobs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #1f2631; font-weight: 600; text-decoration: none; transition: background-color 180ms ease, transform 140ms var(--ease-out); }
.menu-jobs a:active { transform: scale(0.96); }
.menu-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-actions .button { flex: 1 1 240px; }
.button.ghost { background: transparent; color: var(--deep-ink); box-shadow: inset 0 0 0 2px currentColor; }
@media (hover: hover) and (pointer: fine) {
  .menu-links a:hover { color: var(--accent-hover); }
  .menu-jobs a:hover { background: #2b3441; }
  .button.ghost:hover { background: #1f2631; }
}
#menu:popover-open .menu-links a, #menu:popover-open .menu-jobs { animation: menu-in 420ms var(--ease-out) both; }
#menu:popover-open .menu-links a:nth-child(2) { animation-delay: 30ms; }
#menu:popover-open .menu-links a:nth-child(3) { animation-delay: 60ms; }
#menu:popover-open .menu-links a:nth-child(4) { animation-delay: 90ms; }
#menu:popover-open .menu-links a:nth-child(5) { animation-delay: 120ms; }
#menu:popover-open .menu-links a:nth-child(6) { animation-delay: 150ms; }
#menu:popover-open .menu-links a:nth-child(7) { animation-delay: 180ms; }
#menu:popover-open .menu-links a:nth-child(8) { animation-delay: 210ms; }
#menu:popover-open .menu-jobs { animation-delay: 240ms; }
@keyframes menu-in { from { opacity: 0; transform: translateY(12px); } }

/* Hero */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 40px;
  padding: calc(var(--bar) + 9svh) var(--margin) clamp(40px, 8svh, 88px); background: var(--deep); color: var(--deep-ink);
}
.trades { margin-bottom: auto; font-size: var(--step-lead); line-height: 1.4; color: var(--deep-body); }
.trades b { color: var(--accent-hover); font-weight: 800; }
.trades .sep { color: var(--deep-muted); }
.trades .word { white-space: nowrap; }
.trades .brk { display: none; }
.hero-title { font-size: min(10.4vw, 12rem); line-height: 0.86; }
.hero-title span { display: block; white-space: nowrap; }
.hero-title .l1 { color: var(--deep-muted); }
.hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; width: min(100%, 36rem); }
.hero-foot p { font-size: var(--step-lead); line-height: 1.4; color: var(--deep-body); }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.hero .open-now { display: flex; align-items: center; gap: 10px; font-size: var(--step-body); font-weight: 600; color: var(--deep-ink); }
.open-now::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--deep-muted); }
.open-now.is-open::before { background: #3ddc84; animation: beat 2s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.4); opacity: 0.5; } }

/* Intro: the staircase statement */
.intro { display: flex; flex-direction: column; gap: 48px; padding: 160px var(--margin) 72px; background: var(--s1); }
.intro h2 { font-size: var(--step-head); }
.stair { font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.04; letter-spacing: -0.035em; }
.stair span { display: block; }
.stair span:nth-child(2) { padding-left: 6vw; }
.stair span:nth-child(3) { padding-left: 12vw; }
.stair span:nth-child(4) { padding-left: 18vw; }
.stair span:nth-child(5) { padding-left: 24vw; }
.intro-note { font-size: var(--step-lead); line-height: 1.35; font-weight: 600; color: var(--text); }

/* Proof: the real Google rating, set like Salam's framed ad. */
.proof { padding: 24px var(--margin) 96px; background: var(--s1); }
.proof-card {
  display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 12px 40px; max-width: 1120px; margin: 0 auto;
  padding: clamp(28px, 5vw, 64px); border-radius: 20px; background: var(--deep); color: var(--deep-ink); text-decoration: none;
  transition: transform 300ms var(--ease-out);
}
.proof-score { grid-row: span 2; font-weight: 800; font-size: clamp(6rem, 3rem + 12vw, 13rem); line-height: 0.8; letter-spacing: -0.05em; }
.stars { display: flex; gap: 8px; }
.stars i { width: 34px; height: 34px; background: var(--accent-hover); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.part { background: linear-gradient(90deg, var(--accent-hover) 80%, #3a4352 80%); } /* taste-skill-ignore: a 4.8 star, not decoration */
.proof-text { font-size: var(--step-lead); color: var(--deep-body); }
.proof-words { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.1; }
.proof-words span { color: #3d4553; transition: color 400ms; }
.proof-words span.lit { color: var(--deep-ink); }
.proof-link { grid-column: 1 / -1; margin-top: 8px; font-weight: 600; color: var(--accent-hover); }
@media (hover: hover) and (pointer: fine) { .proof-card:hover { transform: translateY(-4px); } }

/* What we do: one verb at a time, with its drawing. */
.how-head { padding: 64px var(--margin) 24px; }
.how-head h2 { font-size: var(--step-head); }
.step { position: relative; min-height: 86svh; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 0 var(--margin) 48px; }
.step-body { display: flex; flex-direction: column; flex: 1; }
.g-canvas { background: var(--canvas); }
.g-s1 { background: var(--s1); }
.verb { position: sticky; top: var(--bar); z-index: 1; padding-top: 24px; font-size: var(--step-display); line-height: 0.85; }
.art { margin: auto 0 auto auto; width: min(50vw, 720px); padding: 32px 0; }
.art svg { display: block; width: 100%; height: auto; overflow: visible; }
.step-text { max-width: 34rem; font-size: var(--step-lead); line-height: 1.35; font-weight: 600; color: var(--text); }

/* Drawings: short, calm loops, only while on screen, still for reduced motion. Transform and opacity only. */
.art svg * { transform-box: fill-box; transform-origin: center; }
.art:not(.playing) svg * { animation-play-state: paused !important; }
.spin { animation: spin 6s linear infinite; }
.spin.slow { animation-duration: 9s; }
.spin.back { animation: spin 5.4s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.squeeze { animation: squeeze 2.6s var(--ease-out) infinite; }
@keyframes squeeze { 0%, 55%, 100% { transform: translateX(0); } 25%, 40% { transform: translateX(-14px); } }
.stamp { animation: stamp 3.2s var(--ease-out) infinite; }
@keyframes stamp { 0%, 20% { opacity: 0; transform: scale(1.6); } 32% { opacity: 1; transform: scale(1); } 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.drip { animation: drip 2.4s var(--ease-out) infinite; }
@keyframes drip { 0% { opacity: 0; transform: translateY(-60px) scale(0.6); } 25% { opacity: 1; } 75% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(10px) scale(1); } }
.cell { opacity: 0.15; animation: cell 4s steps(1) infinite; }
.cell.n1 { animation-delay: 0.6s; } .cell.n2 { animation-delay: 1.2s; } .cell.n3 { animation-delay: 1.8s; }
@keyframes cell { 0%, 100% { opacity: 0.15; } 15%, 85% { opacity: 1; } }
.bolt { animation: bolt 4s ease-in-out infinite; }
@keyframes bolt { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.18); } 20% { transform: scale(1); } }
.trace { stroke-dasharray: 100; animation: trace 3.2s var(--ease-out) infinite; }
@keyframes trace { 0% { stroke-dashoffset: 100; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.code { animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.art .scan { transform-origin: left center; animation: scan 3s var(--ease-out) infinite; }
@keyframes scan { 0% { transform: scaleX(0.2); } 70%, 100% { transform: scaleX(3.8); } }
.roll { animation: spin 1.2s linear infinite; }
.bob { animation: bob 0.9s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-4px); } }
.road { animation: road 1.2s linear infinite; }
@keyframes road { to { transform: translateX(-130px); } }

/* What's that noise? The live part, on the graphite field. */
.noise { display: grid; grid-template-columns: 5fr 7fr; gap: 40px 6vw; padding: 160px var(--margin); background: var(--deep); color: var(--deep-ink); }
.noise-head h2 { font-size: var(--step-head); }
.noise-head p { margin-top: 28px; max-width: 30ch; font-size: var(--step-lead); line-height: 1.4; color: var(--deep-body); }
.noise-picks { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.noise-picks button {
  min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: #1f2631; color: var(--deep-ink);
  font: 600 var(--step-body) var(--font); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: background-color 180ms ease, transform 140ms var(--ease-out);
}
.noise-picks button:active { transform: scale(0.96); }
.noise-picks button[aria-checked='true'] { background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .noise-picks button:not([aria-checked='true']):hover { background: #2b3441; } }
.noise-answer { grid-column: 2; display: grid; grid-template-columns: 140px 1fr; gap: 32px; padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: #161c25; }
.noise-answer:empty { display: none; }
.noise-answer .art { width: 140px; margin: 0; padding: 0; }
.noise-answer h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); margin-bottom: 20px; }
.noise-answer dl { display: grid; gap: 4px; }
.noise-answer dt { margin-top: 12px; font-weight: 600; color: var(--deep-muted); font-size: var(--step-small); }
.noise-answer dd { font-size: var(--step-body); color: var(--deep-ink); }
.noise-answer .button { margin-top: 28px; }
.noise-answer.fresh > * { animation: rise 460ms var(--ease-out) both; }
.noise-answer.fresh > *:nth-child(2) { animation-delay: 70ms; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Poster lists: team and library, set like Salam's services. */
.team, .library { padding: 20vh var(--margin); }
.team { background: var(--canvas); }
.library { background: var(--s2); }
.poster-list { display: grid; gap: 56px; }
.poster-list li { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: first baseline; }
.poster-list h2, .poster-list h3 { font-size: var(--step-head); line-height: 1; }
.poster-list h2 { color: var(--accent-text); }
.poster-list h3 a { text-decoration: none; }
.poster-list h3 { transition: color 180ms ease; }
.poster-list p { max-width: 44ch; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .poster-list li:not(.poster-head):hover h3 { color: var(--accent-text); } }
.more { margin-top: 64px; }

/* Visit: contact rows */
.visit { padding: 160px var(--margin) 120px; background: var(--s1); }
.visit h2 { font-size: var(--step-head); margin-bottom: 56px; }
.visit-rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 3fr 9fr; gap: 24px; align-items: baseline; padding: 28px 0; background: var(--s1); text-decoration: none; }
.row + .row { box-shadow: 0 -2px 0 var(--s2); } /* taste-skill-ignore: Salam's contact-row divider */
.row span { color: var(--muted); font-weight: 600; }
.row b { font-weight: 800; font-size: clamp(1.6rem, 1rem + 2.4vw, 3.4rem); letter-spacing: -0.04em; line-height: 1; overflow-wrap: anywhere; transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { a.row:hover b { color: var(--accent-text); } }
.hours table { border-collapse: collapse; font-size: var(--step-lead); }
.hours th { text-align: left; font-weight: 300; padding: 4px 32px 4px 0; color: var(--text); }
.hours td { font-weight: 600; font-variant-numeric: tabular-nums; }
.hours tr.today th, .hours tr.today td { color: var(--accent-text); font-weight: 800; }

/* Footer: graphite, with the name cropped by the bottom edge. */
.foot { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; padding: 120px var(--margin) env(safe-area-inset-bottom); background: var(--deep); color: var(--deep-ink); }
.foot-top { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; }
.foot-top > div { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.foot-call { font-weight: 800; font-size: var(--step-head); line-height: 0.92; letter-spacing: -0.045em; }
.foot-links { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.foot-links a { min-height: 32px; text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { text-decoration: underline; text-underline-offset: 6px; } }
.foot-small { margin-top: auto; padding-bottom: 12px; font-size: var(--step-small); color: var(--deep-muted); }
.foot-name { font-weight: 800; font-size: 26vw; line-height: 0.75; letter-spacing: -0.06em; white-space: nowrap; margin-left: -0.05em; margin-bottom: -0.12em; }

/* Entrances: parts arrive once, in reading order. Visible without script. */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .hero [data-reveal]:nth-child(2) { transition-delay: 90ms; }
.js .hero [data-reveal]:nth-child(3) { transition-delay: 180ms; }

@media (max-width: 900px) {
  .bar-links, .bar .button .wide { display: none; }
  .menu-body { grid-template-columns: 1fr; align-items: start; }
  .bar .button { margin-left: auto; }
  .wordmark { margin-right: 0; }
  .noise { grid-template-columns: 1fr; padding: 112px var(--margin); }
  .noise-answer { grid-column: 1; grid-template-columns: 1fr; gap: 16px; }
  .noise-answer .art { width: 96px; }
  .poster-list { gap: 28px; }
  .poster-list li { grid-template-columns: 1fr; gap: 10px; }
  .art { width: 100%; }
  .row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-links { align-items: flex-start; }
  .proof-card { grid-template-columns: 1fr; }
  .proof-score { grid-row: auto; }
}
@media (max-width: 640px) {
  .trades { text-align: center; font-size: var(--step-body); }
  .trades .brk { display: block; }
  .trades .sep-brk { display: none; }
  .hero-title { font-size: 10.6vw; }
  .hero-foot p { font-size: var(--step-body); }
  .hero-actions { flex-wrap: wrap; gap: 20px; }
  .intro { padding-top: 112px; }
  .intro h2 { font-size: 11vw; }
  .stair { font-size: 1.5rem; }
  .stair span:nth-child(n) { padding-left: 0; }
  .stair span:nth-child(3) { padding-left: 6vw; }
  .stair span:nth-child(4) { padding-left: 12vw; }
  .stair span:nth-child(5) { padding-left: 18vw; }
  .step { min-height: auto; padding-bottom: 72px; }
  .verb { font-size: 17vw; }
  .stars i { width: 26px; height: 26px; }
  .foot-name { font-size: 30vw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .art svg *, .open-now.is-open::before { animation: none !important; }
  .cell { opacity: 1; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .noise-answer.fresh > *, #menu:popover-open .menu-links a, #menu:popover-open .menu-jobs { animation: none; }
}

/* Library page */
.lib-hero { min-height: 88svh; }
.guide-index { display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--deep-ink); }
.guide { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; padding: 120px var(--margin); scroll-margin-top: var(--bar); }
.guide h2 { font-size: var(--step-head); line-height: 1; max-width: 12ch; }
.guide .meta { margin-top: 20px; color: var(--muted); font-weight: 600; }
.guide-text { display: grid; gap: 1em; align-content: start; color: var(--text); max-width: 44ch; }
.guide-text ul { display: grid; gap: 10px; list-style: disc; padding-left: 1.1em; }
.guide-text strong { color: var(--ink); }
.guide-call { padding: 120px var(--margin); background: var(--s2); }
.guide-call p { max-width: 40ch; font-weight: 600; font-size: var(--step-lead); line-height: 1.35; }
@media (max-width: 900px) { .guide { grid-template-columns: 1fr; gap: 24px; padding: 88px var(--margin); } }