/* MoveConsole — the role pages: owners, office & sales, dispatchers, foremen & crews.
   Owner, Oct 7 2026: "make them a more professional style, and not too much like each other". So no kraft, tape or
   stamps here: white and pale-grey grounds, hairline rules, small uppercase labels, the product's own screens, and one
   accent per page — the colour of the hub that page leans on (owners: Payments gold, office: Sales Desk violet,
   dispatch: Move Day teal, crews: hi-vis coral). Each page has its own composition; only the base below is shared.
   Builds on site.css. */

.rl{ --ink-s: #4a5160; --pale: #f6f7f9; --pale-2: #eef0f4; --hair: #e3e6ec; }
.rl-owner{ --accent: #b06a00; --accent-600: #935800; --accent-ink: #2e1c00; --tint: #fdf8ee; --tint-2: #f6e2bb; }
.rl-office{ --accent: #6b4de6; --accent-600: #5a3bd4; --accent-ink: #1b1240; --tint: #f6f4ff; --tint-2: #e4ddff; }
.rl-dispatch{ --accent: #0e8f74; --accent-600: #0b7a63; --accent-ink: #04291f; --tint: #eff8f4; --tint-2: #cdebe0; }
.rl-crew{ --accent: #e2552e; --accent-600: #c9441f; --accent-ink: #3a1206; --tint: #fff5f0; --tint-2: #ffdccd; }

/* ---------- shared: label, headline, lead, section head ---------- */
.rl-k{ display: inline-flex; align-items: center; gap: 10px; color: var(--accent-ink); font: 600 12px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.rl-k::before{ content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
.rl-h1{ margin: 0; color: var(--navy); font-size: clamp(42px, 5vw, 76px); line-height: 1; font-weight: 550; letter-spacing: -.04em; text-wrap: balance; }
.rl-lead{ max-width: 44ch; margin: 0; color: var(--ink-s); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; text-wrap: pretty; }
.rl-ctas{ display: flex; flex-wrap: wrap; gap: 10px; }
.rl-hero{ padding: calc(var(--hdr) + clamp(28px, 4vw, 64px)) 0 0; }

.rl-sec{ padding: clamp(72px, 8vw, 128px) 0 0; }
.rl-sec:has(+ .end){ padding-bottom: clamp(72px, 8vw, 128px); }
.rl-sec.is-pale{ margin-top: clamp(72px, 8vw, 128px); padding: clamp(64px, 7vw, 112px) 0; background: var(--pale); }
.rl-sec.is-pale + .rl-sec{ padding-top: clamp(64px, 7vw, 112px); }
.rl-head{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 18px clamp(24px, 5vw, 80px);
  margin-bottom: clamp(32px, 3.6vw, 52px); padding-top: 22px; border-top: 1px solid var(--hair);
}
.rl-head > div{ display: grid; justify-items: start; gap: 18px; }
.rl-head h2{ margin: 0; color: var(--navy); font-size: clamp(32px, 3.5vw, 52px); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.rl-head p{ max-width: 48ch; margin: 0; color: var(--ink-s); font-size: 17.5px; line-height: 1.55; }
.rl-head .link{ margin-top: 2px; }
.rl-h2{ margin: 0; color: var(--navy); font-size: clamp(32px, 3.5vw, 52px); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.rl-shot{ border-radius: 16px; }
.rl-note{ margin: 14px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* a plain check list in the page's accent */
.rl-ticks{ list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.rl-ticks li{ position: relative; padding-left: 30px; color: var(--ink-s); font-size: 16px; line-height: 1.5; }
.rl-ticks li b{ color: var(--navy); font-weight: 600; }
.rl-ticks li::before{ content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 5px; background: var(--accent); }
.rl-ticks li::after{
  content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* FAQ (the product pages' look; hub.css isn't loaded here) */
.rl .faq{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: 22px; border-top: 1px solid var(--hair); }
.rl .faq-l{ position: sticky; top: calc(var(--hdr) + 32px); display: grid; gap: 18px; justify-items: start; }
.rl .faq-l h2{ margin: 0; color: var(--navy); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.02; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.rl .faq-l p{ max-width: 36ch; margin: 0; color: var(--ink-s); font-size: 17px; line-height: 1.5; }
.rl .faq-list{ border-bottom: 1px solid var(--hair); }
.rl .faq-list details{ border-top: 1px solid var(--hair); }
.rl .faq-list details:first-child{ border-top: 0; }
.rl .faq-list summary{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; list-style: none; cursor: pointer; color: var(--navy); font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.rl .faq-list summary::-webkit-details-marker{ display: none; }
.rl .faq-list summary::after{
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 8px; transition: transform .35s var(--ease), background-color .25s var(--ease-btn);
  background: var(--pale-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111317' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.rl .faq-list details[open] summary::after{ transform: rotate(45deg); background-color: var(--tint-2); }
.rl .faq-a{ padding: 0 48px 24px 0; color: var(--ink-s); font-size: 16px; line-height: 1.6; }
.rl .faq-a a{ color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ================= OWNERS: the numbers, the money, the questions ================= */
.ow-hero-grid{ display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(28px, 4.5vw, 72px); }
.ow-hero-txt{ display: grid; justify-items: start; gap: 24px; }
.ow-facts{ display: grid; grid-template-columns: repeat(3, auto); gap: 0; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.ow-facts li{ display: grid; gap: 4px; padding: 14px 22px 0 0; color: var(--ink-s); font-size: 13.5px; line-height: 1.35; }
.ow-facts li + li{ padding-left: 22px; border-left: 1px solid var(--hair); }
.ow-facts b{ color: var(--navy); font: 600 15px/1.2 var(--font); }
.ow-shot{ position: relative; }
.ow-shot::before{ /* a thin gold frame line behind the screen */
  content: ""; position: absolute; inset: -14px -14px 14px 14px; border: 1px solid var(--tint-2); border-radius: 22px; pointer-events: none;
}

/* the five numbers: a glossary, the way an annual report defines its terms */
.ow-defs{ display: grid; border-top: 2px solid var(--navy); }
.ow-def{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: baseline; gap: 12px 28px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.ow-def dt{ color: var(--navy); font: 600 19px/1.25 var(--font); letter-spacing: -.01em; }
.ow-def dd{ margin: 0; color: var(--ink-s); font-size: 16px; line-height: 1.55; }
.ow-def dd + dd{ color: var(--muted); font: 500 13px/1.5 var(--font-ui); }
.ow-def dd + dd b{ color: var(--accent-600); font-weight: 600; }
.ow-defs-foot{ display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--ink-s); font-size: 14.5px; }
.ow-defs-foot li{ display: inline-flex; align-items: center; gap: 8px; }
.ow-defs-foot li::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* money: three columns under a gold rule */
.ow-cols{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.ow-col{ display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 3px solid var(--accent); }
.ow-col small{ color: var(--accent-600); font: 600 11.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.ow-col h3{ margin: 0; color: var(--navy); font-size: 24px; line-height: 1.15; font-weight: 550; letter-spacing: -.02em; }
.ow-col p{ margin: 0; color: var(--ink-s); font-size: 16px; line-height: 1.6; }

/* ask MovePilot: a question, and what it reads to answer it */
.ow-ask{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ow-ask-txt{ display: grid; justify-items: start; gap: 18px; }
.ow-ask-txt p{ max-width: 42ch; margin: 0; color: var(--ink-s); font-size: 17px; line-height: 1.55; }
.ow-qs{ list-style: none; display: grid; margin: 0; padding: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -44px rgba(6, 26, 63, .35); }
.ow-qs li{ display: grid; gap: 8px; padding: 18px 22px; }
.ow-qs li + li{ border-top: 1px solid var(--hair); }
.ow-qs q{ color: var(--navy); font: 500 17.5px/1.4 var(--font); quotes: "“" "”"; }
.ow-qs span{ display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 500 12.5px/1.4 var(--font-mono); }
.ow-qs span::before{ content: "↳"; color: var(--accent); font-family: var(--font-ui); }
.ow-q{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ow-q em{ padding: 4px 8px; border-radius: 6px; background: var(--tint); color: var(--accent-600); font: 600 11px/1 var(--font-ui); font-style: normal; letter-spacing: .02em; white-space: nowrap; }

/* control: a two-by-two of plain statements */
.ow-ctrl{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.ow-ctrl div{ display: grid; align-content: start; gap: 10px; padding: 28px 32px 28px 0; border-bottom: 1px solid var(--hair); }
.ow-ctrl div:nth-child(even){ padding: 28px 0 28px 32px; border-left: 1px solid var(--hair); }
.ow-ctrl h3{ margin: 0; color: var(--navy); font-size: 21px; font-weight: 550; letter-spacing: -.015em; }
.ow-ctrl p{ max-width: 46ch; margin: 0; color: var(--ink-s); font-size: 16px; line-height: 1.6; }
.ow-roles{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ow-roles i{ padding: 6px 10px; border-radius: 7px; background: var(--pale-2); color: var(--navy); font: 500 13px/1 var(--font-ui); font-style: normal; }

/* the plan band */
.ow-plan{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; padding: clamp(28px, 3.4vw, 44px); border-radius: 22px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-2); }
.ow-plan h3{ margin: 0 0 8px; color: var(--navy); font-size: clamp(24px, 2.4vw, 32px); font-weight: 550; letter-spacing: -.025em; }
.ow-plan p{ max-width: 60ch; margin: 0; color: var(--ink-s); font-size: 16.5px; line-height: 1.55; }

/* ================= OFFICE: a request's day, one thread, the desk ================= */
.of-hero{ text-align: center; }
.of-hero-txt{ display: grid; justify-items: center; gap: 22px; max-width: 900px; margin: 0 auto; }
.of-hero .rl-lead{ max-width: 52ch; }
.of-stage{ position: relative; margin-top: clamp(40px, 5vw, 72px); padding: clamp(18px, 2.4vw, 32px) clamp(18px, 2.4vw, 32px) 0; border-radius: 28px 28px 0 0; background: linear-gradient(180deg, var(--tint) 0%, var(--pale) 100%); }
.of-stage .ui-win{ border-radius: 16px 16px 0 0; box-shadow: 0 -1px 0 rgba(6, 26, 63, .04), 0 30px 70px -40px rgba(27, 18, 64, .45), 0 0 0 1px rgba(6, 26, 63, .06); }

/* the timeline: times on the left, a rule with stops, the story on the right */
.of-line{ list-style: none; position: relative; display: grid; margin: 0; padding: 0; }
.of-line::before{ content: ""; position: absolute; left: 168px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--accent) 0%, var(--tint-2) 100%); }
.of-line li{ position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, .8fr); align-items: start; gap: 0 60px; padding: 0 0 34px; }
.of-line li:last-child{ padding-bottom: 0; }
.of-line li::before{ content: ""; position: absolute; left: 162px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--accent); }
.of-line time{ padding-top: 2px; color: var(--accent-600); font: 600 13.5px/1.3 var(--font-mono); text-align: right; }
.of-line time small{ display: block; margin-top: 3px; color: var(--muted); font: 500 11.5px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.of-line h3{ margin: 0 0 6px; color: var(--navy); font-size: 20px; line-height: 1.25; font-weight: 550; letter-spacing: -.015em; }
.of-line p{ max-width: 52ch; margin: 0; color: var(--ink-s); font-size: 16px; line-height: 1.55; }
.of-chip{ justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--hair); color: var(--ink); font: 500 13px/1.3 var(--font-ui); }
.of-chip b{ font-weight: 600; }
.of-st{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font: 600 12px/1 var(--font-ui); }
.of-st::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.of-st.s-new{ background: #e8f0fe; color: #1d4ed8; }
.of-st.s-ok{ background: #e3f6ec; color: #0f7a4a; }
.of-chip .ar{ color: var(--muted); }

/* one thread: words left, the follow-up templates right */
.of-thread{ display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 5vw, 80px); }
.of-thread-txt{ display: grid; justify-items: start; gap: 22px; }
.of-thread-txt p{ max-width: 44ch; margin: 0; color: var(--ink-s); font-size: 17px; line-height: 1.55; }

/* the rest of the desk: a ruled index, not cards */
.of-desk{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--navy); }
.of-desk a{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 6px 14px; padding: 24px 24px 26px 0; border-bottom: 1px solid var(--hair); transition: background-color .25s; }
.of-desk a:not(:nth-child(3n+1)){ padding-left: 24px; border-left: 1px solid var(--hair); }
.of-desk a:hover{ background: var(--tint); }
.of-desk .ico{ grid-row: span 2; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.of-desk b{ color: var(--navy); font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; }
.of-desk span{ color: var(--ink-s); font-size: 15px; line-height: 1.55; }

/* ================= DISPATCH: the board, its rules, month → day → job ================= */
.dp-hero-top{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 24px clamp(28px, 5vw, 80px); }
.dp-hero-top > div:first-child{ display: grid; justify-items: start; gap: 22px; }
.dp-hero-top > div:last-child{ display: grid; justify-items: start; gap: 20px; padding-bottom: 6px; }
.dp-board{ margin-top: clamp(36px, 4.5vw, 64px); }
.dp-board .ui-win{ border-radius: 18px; }
.dp-legend{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--ink-s); font-size: 14px; }
.dp-legend li{ display: inline-flex; align-items: center; gap: 8px; }
.dp-legend i{ display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--tint); color: var(--accent-600); font: 600 11px/1 var(--font-mono); font-style: normal; }
/* the board's drive box: dashed, a truck in it (the minutes show once the box is wide enough) */
.dp-legend i.is-trv{ width: 30px; padding: 0; background: #fbfbfc; box-shadow: inset 0 0 0 1.5px #e4e4e9; color: #a3a3b0; }
.dp-legend i.is-trv .ico{ width: 15px; height: 15px; }

/* the rules: four columns, a teal tick rule on top of each */
.dp-rules{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dp-rule{ display: grid; align-content: start; gap: 12px; padding: 24px 22px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.dp-rule .ico{ width: 22px; height: 22px; color: var(--accent); }
.dp-rule h3{ margin: 4px 0 0; color: var(--navy); font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.dp-rule p{ margin: 0; color: var(--ink-s); font-size: 15px; line-height: 1.55; }

/* month → day → job: three screens at three zoom levels */
.dp-zoom{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: z; }
.dp-z{ display: grid; align-content: start; gap: 14px; }
.dp-z figure{ margin: 0; padding: 10px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.dp-z figure .ui-win{ border-radius: 10px; box-shadow: 0 0 0 1px rgba(6, 26, 63, .06), 0 14px 30px -22px rgba(6, 26, 63, .4); }
.dp-z small{ display: inline-flex; align-items: center; gap: 8px; color: var(--accent-600); font: 600 11.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.dp-z small::after{ content: ""; width: 26px; height: 1px; background: var(--tint-2); }
.dp-z:last-child small::after{ display: none; }
.dp-z h3{ margin: 0; color: var(--navy); font-size: 20px; line-height: 1.25; font-weight: 550; letter-spacing: -.015em; }
.dp-z p{ margin: 0; color: var(--ink-s); font-size: 15.5px; line-height: 1.55; }

/* on their phones */
.dp-crew{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: var(--tint); }
.dp-crew-txt{ display: grid; justify-items: start; gap: 18px; }
.dp-crew-txt h3{ margin: 0; color: var(--navy); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; font-weight: 500; letter-spacing: -.03em; }
.dp-crew-txt p{ max-width: 46ch; margin: 0; color: var(--ink-s); font-size: 17px; line-height: 1.55; }

/* a phone frame for the crew app's screens (dispatch + crews) */
.rl-phone{ position: relative; width: min(300px, 100%); margin-inline: auto; padding: 10px; border-radius: 44px; background: #111317; box-shadow: 0 50px 80px -40px rgba(6, 26, 63, .55); }
.rl-phone .ui-win{ border-radius: 34px; box-shadow: none; }

/* ================= CREWS: the job screen, move day in steps, the foreman's tools ================= */
.cr-hero-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 4.5vw, 72px); }
.cr-hero-txt{ display: grid; justify-items: start; gap: 24px; }
/* the job screen with its parts called out: a marker on the phone, the same number in the list beside it */
.cr-spec{ display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 28px; }
.cr-spec .rl-phone{ margin: 0; }
.cr-screen{ position: relative; }
.cr-pin{ left: -22px; position: absolute; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px/1 var(--font-ui); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 6px 14px -4px rgba(58, 18, 6, .5); }
.cr-parts{ list-style: none; counter-reset: p; display: grid; gap: 0; margin: 0; padding: 0; }
.cr-parts li{ counter-increment: p; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.cr-parts li:first-child{ border-top: 1px solid var(--hair); }
.cr-parts li::before{ content: counter(p); grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px/1 var(--font-ui); }
.cr-parts b{ color: var(--navy); font-size: 15.5px; font-weight: 600; }
.cr-parts span{ color: var(--ink-s); font-size: 14px; line-height: 1.45; }

/* move day: five steps across, a coral bar under the current one */
.cr-steps{ list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.cr-steps li{ counter-increment: s; position: relative; display: grid; align-content: start; gap: 10px; padding: 26px 22px 0 0; }
.cr-steps li + li{ padding-left: 22px; border-left: 1px solid var(--hair); }
.cr-steps li::before{ content: counter(s, decimal-leading-zero); color: var(--accent); font: 600 13px/1 var(--font-mono); letter-spacing: .04em; }
.cr-steps li::after{ content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.cr-steps li + li::after{ left: -1px; }
.cr-steps.is-in li::after{ transform: none; }
.cr-steps li:nth-child(2)::after{ transition-delay: .12s; } .cr-steps li:nth-child(3)::after{ transition-delay: .24s; }
.cr-steps li:nth-child(4)::after{ transition-delay: .36s; } .cr-steps li:nth-child(5)::after{ transition-delay: .48s; }
.cr-steps h3{ margin: 0; color: var(--navy); font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.cr-steps p{ margin: 0; color: var(--ink-s); font-size: 15px; line-height: 1.55; }

/* the foreman's tools, drawn the way the app lists them */
.cr-tools{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 5vw, 80px); }
.cr-tools-txt{ display: grid; justify-items: start; gap: 18px; }
.cr-tools-txt p{ max-width: 44ch; margin: 0; color: var(--ink-s); font-size: 17px; line-height: 1.55; }
.cr-app{ display: grid; gap: 10px; padding: 22px; border-radius: 24px; background: var(--pale); box-shadow: inset 0 0 0 1px var(--hair); font-family: var(--font-ui); }
.cr-app-h{ display: flex; align-items: center; gap: 8px; padding: 0 2px 4px; color: #4b3fd4; font: 700 12px/1 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; }
.cr-row{ display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #ececf1; }
.cr-row > i{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-style: normal; }
.cr-row > i svg{ width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cr-row b{ display: block; color: #17171f; font-size: 15px; font-weight: 600; }
.cr-row span{ display: block; margin-top: 2px; color: #8a8a97; font-size: 13px; }
.cr-row em{ padding: 3px 8px; border-radius: 6px; font: 600 11.5px/1 var(--font-ui); font-style: normal; }
.cr-row.is-dark{ background: #17171f; box-shadow: none; }
.cr-row.is-dark b{ color: #fff; }
.cr-row.is-dark span{ color: rgba(255, 255, 255, .55); }
.cr-row > svg{ width: 18px; height: 18px; fill: none; stroke: #c2c2cc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cr-row.is-dark > svg{ stroke: rgba(255, 255, 255, .5); }

/* for the office it's already done: three plain columns on the pale band */
.cr-done{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.cr-done div{ display: grid; align-content: start; gap: 10px; }
.cr-done .ico{ width: 24px; height: 24px; color: var(--accent); }
.cr-done h3{ margin: 6px 0 0; color: var(--navy); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.cr-done p{ margin: 0; color: var(--ink-s); font-size: 15.5px; line-height: 1.6; }

/* ================= INTEGRATIONS: everything built in, a short setup, only your own accounts ================= */
.rl-int{ --accent: #186ff2; --accent-600: #0e5bd6; --accent-ink: #031a3f; --tint: #eef5ff; --tint-2: #dcebff; }
.ig-hero-grid{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.ig-hero-txt{ display: grid; justify-items: start; gap: 24px; }

/* the box: MoveConsole with its modules inside, and the three things of yours plugged in from outside */
.ig-box{ position: relative; width: min(600px, 100%); margin-inline: auto; padding: 22px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 40px 80px -48px rgba(6, 26, 63, .45); }
.ig-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 16px; border-bottom: 1px solid var(--hair); }
.ig-top svg{ width: 150px; height: auto; }
.ig-top span{ display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: #e3f6ec; color: #0f7a4a; font: 600 12px/1 var(--font-ui); }
.ig-top span::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: #16a362; }
.ig-mods{ list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; }
.ig-mods li{ display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 12px; border-radius: 12px; background: var(--pale); color: var(--navy); font: 500 13.5px/1.2 var(--font-ui); }
.ig-mods .ico{ flex: none; width: 17px; height: 17px; color: var(--accent); }
.ig-mods li.is-more{ justify-content: center; background: var(--tint); color: var(--accent-600); font-weight: 600; }
.ig-out{ position: relative; display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--tint-2); }
.ig-out small{ color: var(--muted); font: 600 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.ig-out ul{ list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; }
.ig-out li{ display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-s); font: 500 13px/1.2 var(--font-ui); }
.ig-out .ico{ flex: none; width: 16px; height: 16px; color: var(--navy); }

/* usually a separate tool → built in: a ruled two-column list */
.ig-swap{ border-top: 2px solid var(--navy); }
.ig-swap-h, .ig-row{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; }
.ig-swap-h{ padding: 14px 0; border-bottom: 1px solid var(--hair); color: var(--muted); font: 600 11.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.ig-swap-h span:last-child{ color: var(--accent-600); }
.ig-row{ align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.ig-row s{ color: var(--muted); font-size: 16px; line-height: 1.45; text-decoration: line-through; text-decoration-color: rgba(107, 111, 120, .45); }
.ig-row > span{ display: flex; align-items: baseline; gap: 12px; color: var(--navy); font-size: 17px; line-height: 1.45; font-weight: 500; }
.ig-row > span::before{
  content: ""; flex: none; position: relative; top: 3px; width: 18px; height: 18px; border-radius: 5px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* the setup: five rows, each with who does it */
.ig-steps{ list-style: none; counter-reset: s; display: grid; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.ig-steps li{ counter-increment: s; display: grid; grid-template-columns: 72px minmax(0, 1fr) 190px; align-items: start; gap: 8px 28px; padding: 26px 0; border-bottom: 1px solid var(--hair); }
.ig-steps li::before{ content: counter(s); color: var(--accent); font: 500 44px/1 var(--font); letter-spacing: -.04em; }
.ig-steps h3{ margin: 0 0 6px; color: var(--navy); font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; }
.ig-steps p{ max-width: 62ch; margin: 0; color: var(--ink-s); font-size: 16px; line-height: 1.6; }
.ig-steps p a{ color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.ig-who{ justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 7px 11px; border-radius: 999px; background: var(--pale); color: var(--ink-s); font: 600 12.5px/1 var(--font-ui); white-space: nowrap; }
.ig-who::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ig-who.is-us{ background: var(--tint); color: var(--accent-600); }
.ig-who.is-both{ background: #e3f6ec; color: #0f7a4a; }
.ig-live{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 24px; padding: 20px 24px; border-radius: 18px; background: var(--navy); color: #fff; }
.ig-live b{ font: 600 18px/1.3 var(--font); letter-spacing: -.01em; }
.ig-live span{ color: rgba(255, 255, 255, .72); font-size: 15.5px; line-height: 1.5; }

/* the only things you connect: four cards */
.ig-connect{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ig-c{ display: grid; align-content: start; gap: 10px; padding: 24px 22px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.ig-c .ico{ width: 22px; height: 22px; color: var(--accent); }
.ig-c h3{ margin: 4px 0 0; color: var(--navy); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.ig-c p{ margin: 0; color: var(--ink-s); font-size: 15px; line-height: 1.55; }
.ig-c small{ margin-top: 2px; color: var(--muted); font: 500 12.5px/1.4 var(--font-ui); }

/* ================= BY SIZE: owner-operators, growing movers, multi-crew fleets ================= */
.rl-solo{ --accent: #186ff2; --accent-600: #0e5bd6; --accent-ink: #031a3f; --tint: #eef5ff; --tint-2: #dcebff; }
.rl-grow{ --accent: #15803d; --accent-600: #116932; --accent-ink: #052e16; --tint: #effaf2; --tint-2: #cdeed8; }
.rl-fleet{ --accent: #4f46e5; --accent-600: #4338ca; --accent-ink: #1e1b4b; --tint: #f3f2ff; --tint-2: #dedcfd; }
.sz-hero-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4.5vw, 72px); }
.sz-hero-txt{ display: grid; justify-items: start; gap: 24px; }

/* --- owner-operators: what happened while you were on the truck --- */
.so-feed{ width: min(520px, 100%); margin-inline: auto; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 40px 80px -48px rgba(6, 26, 63, .45); font-family: var(--font-ui); }
.so-feed-h{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--hair); }
.so-feed-h b{ color: var(--navy); font: 600 16px/1.2 var(--font-ui); }
.so-feed-h span{ padding: 5px 9px; border-radius: 999px; background: var(--tint); color: var(--accent-600); font: 600 12px/1 var(--font-ui); }
.so-feed ol{ list-style: none; display: grid; margin: 0; padding: 8px 22px 14px; }
.so-feed li{ display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 13px 0; }
.so-feed li + li{ border-top: 1px solid var(--hair); }
.so-feed li > b, .so-feed li > small{ grid-column: 2; }
.so-feed li > em{ grid-column: 3; grid-row: 1 / span 2; }
.so-feed li > i{ grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--pale); color: var(--navy); }
.so-feed li > i .ico{ width: 17px; height: 17px; }
.so-feed li b{ color: var(--navy); font: 600 14.5px/1.3 var(--font-ui); }
.so-feed li small{ color: var(--muted); font: 500 12.5px/1.3 var(--font-ui); }
.so-feed li em{ align-self: center; padding: 4px 9px; border-radius: 999px; font: 600 11.5px/1 var(--font-ui); font-style: normal; white-space: nowrap; }
.so-feed .e-new{ background: #e8f0fe; color: #1d4ed8; }
.so-feed .e-ok{ background: #e3f6ec; color: #0f7a4a; }
.so-feed .e-sent{ background: var(--pale-2); color: var(--ink-s); }
.so-feed-f{ padding: 14px 22px; border-top: 1px solid var(--hair); color: var(--muted); font: 500 12.5px/1.4 var(--font-ui); }

/* the day in two lanes: you, and MoveConsole at the same hour */
.so-day{ display: grid; border-top: 2px solid var(--navy); }
.so-day-h, .so-row{ display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); }
.so-day-h{ border-bottom: 1px solid var(--hair); color: var(--muted); font: 600 11.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.so-day-h span{ padding: 14px 20px; }
.so-day-h span:last-child{ color: var(--accent-600); background: var(--tint); }
.so-row{ border-bottom: 1px solid var(--hair); }
.so-row time{ padding: 22px 20px 22px 0; color: var(--navy); font: 600 14px/1.4 var(--font-mono); }
.so-row > div{ padding: 20px; color: var(--ink-s); font-size: 16px; line-height: 1.55; }
.so-row > div:last-child{ background: var(--tint); color: var(--navy); }
.so-row b{ display: block; margin-bottom: 4px; color: var(--navy); font-size: 16.5px; font-weight: 600; }

/* the kit: six things, ruled, no cards */
.so-kit{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.so-kit div{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 6px 14px; padding: 26px 28px 26px 0; border-bottom: 1px solid var(--hair); }
.so-kit div:not(:nth-child(3n+1)){ padding-left: 28px; border-left: 1px solid var(--hair); }
.so-kit .ico{ grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; color: var(--accent); }
.so-kit b{ color: var(--navy); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.so-kit span{ color: var(--ink-s); font-size: 15px; line-height: 1.55; }

/* the plan card */
.sz-price{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; padding: clamp(26px, 3vw, 40px); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -44px rgba(6, 26, 63, .35); }
.sz-price-n{ display: grid; gap: 6px; padding-right: 40px; border-right: 1px solid var(--hair); }
.sz-price-n small{ color: var(--accent-600); font: 600 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.sz-price-n b{ color: var(--navy); font: 600 clamp(40px, 4vw, 56px)/1 var(--font); letter-spacing: -.04em; }
.sz-price-n b span{ color: var(--muted); font-size: 18px; font-weight: 500; letter-spacing: 0; }
.sz-price ul{ list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; padding: 0; }
.sz-price li{ position: relative; padding-left: 26px; color: var(--ink-s); font-size: 15.5px; line-height: 1.45; }
.sz-price li::before{
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
}

/* --- growing movers: the team map --- */
.gr-team{ display: grid; gap: 18px; width: min(560px, 100%); margin-inline: auto; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 40px 80px -48px rgba(6, 26, 63, .4); font-family: var(--font-ui); }
.gr-node{ display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--pale); }
.gr-node b{ color: var(--navy); font: 600 15px/1.2 var(--font-ui); }
.gr-node span{ display: flex; flex-wrap: wrap; gap: 5px; }
.gr-node span i{ padding: 4px 7px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-s); font: 500 11.5px/1 var(--font-ui); font-style: normal; }
.gr-node.is-you{ justify-self: center; width: min(260px, 100%); background: var(--accent); }
.gr-node.is-you b{ color: #fff; }
.gr-node.is-you span i{ background: rgba(255, 255, 255, .16); box-shadow: none; color: #fff; }
.gr-row{ position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 18px; }
.gr-row::before{ content: ""; position: absolute; top: 0; left: 16.6%; right: 16.6%; height: 18px; border: 1.5px solid var(--tint-2); border-bottom: 0; border-radius: 10px 10px 0 0; }
.gr-row::after{ content: ""; position: absolute; top: -18px; left: 50%; width: 1.5px; height: 18px; background: var(--tint-2); }
.gr-crew{ position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-left: 66.6%; padding-top: 14px; }
.gr-crew::before{ content: ""; position: absolute; top: 0; left: calc(16.6% - 10px); width: 1.5px; height: 14px; background: var(--tint-2); }
.gr-crew i{ display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--tint); color: var(--accent-600); font: 600 11px/1 var(--font-ui); font-style: normal; }
.gr-foot{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--hair); color: var(--muted); font: 500 12.5px/1.3 var(--font-ui); }
.gr-foot b{ color: var(--accent-600); font-weight: 600; }

/* the handoff: each task passes from you to someone (or something) else */
.gr-hand{ list-style: none; display: grid; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.gr-hand li{ display: grid; grid-template-columns: minmax(0, .75fr) 58px 30px 196px minmax(0, 1.35fr); align-items: center; gap: 10px 16px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.gr-hand .gr-who{ justify-self: start; }
.gr-hand h3{ margin: 0; color: var(--navy); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.gr-who{ display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: var(--pale); color: var(--ink-s); font: 600 12.5px/1 var(--font-ui); white-space: nowrap; }
.gr-who.to{ background: var(--tint); color: var(--accent-600); }
.gr-hand li > i{ position: relative; height: 1.5px; background: var(--tint-2); }
.gr-hand li > i::after{ content: ""; position: absolute; right: -1px; top: -4px; border: 4.75px solid transparent; border-left: 7px solid var(--accent); border-right: 0; }
.gr-hand p{ margin: 0; color: var(--ink-s); font-size: 15px; line-height: 1.5; }

/* control: three bordered blocks with a large icon */
.gr-ctrl{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gr-ctrl div{ display: grid; align-content: start; gap: 10px; padding: 26px 24px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hair); background: #fff; }
.gr-ctrl .ico{ width: 26px; height: 26px; color: var(--accent); }
.gr-ctrl h3{ margin: 6px 0 0; color: var(--navy); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.gr-ctrl p{ margin: 0; color: var(--ink-s); font-size: 15.5px; line-height: 1.6; }

/* the bands: the plan follows the fleet */
.gr-bands{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); background: #fff; }
.gr-band{ display: grid; gap: 8px; padding: 24px 22px; }
.gr-band + .gr-band{ border-left: 1px solid var(--hair); }
.gr-band small{ color: var(--muted); font: 600 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.gr-band b{ color: var(--navy); font: 600 30px/1 var(--font); letter-spacing: -.03em; }
.gr-band b span{ color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.gr-band.is-on{ background: var(--tint); box-shadow: inset 0 3px 0 var(--accent); }
.gr-band.is-on small{ color: var(--accent-600); }
.gr-band em{ color: var(--accent-600); font: 600 12.5px/1.3 var(--font-ui); font-style: normal; }

/* --- multi-crew fleets: the control room --- */
.fl-wall{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fl-wall figure{ display: grid; gap: 8px; margin: 0; }
.fl-wall .ui-win{ border-radius: 12px; box-shadow: 0 0 0 1px rgba(6, 26, 63, .07), 0 20px 40px -30px rgba(6, 26, 63, .45); }
.fl-wall figcaption{ display: flex; align-items: center; gap: 8px; color: var(--ink-s); font: 600 12.5px/1 var(--font-ui); }
.fl-wall figcaption::before{ content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }

/* every kind of move, priced its own way */
.fl-types{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--navy); }
.fl-types a{ display: grid; align-content: start; gap: 8px; padding: 22px 20px 24px 0; border-bottom: 1px solid var(--hair); transition: background-color .2s; }
.fl-types a + a{ padding-left: 20px; border-left: 1px solid var(--hair); }
.fl-types a:hover{ background: var(--tint); }
.fl-types small{ color: var(--accent-600); font: 600 11.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.fl-types b{ color: var(--navy); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.fl-types span{ color: var(--ink-s); font-size: 14.5px; line-height: 1.5; }

/* running many crews: a 2×2 of statements with their icons */
.fl-ops{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fl-op{ display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; gap: 6px 18px; padding: 26px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.fl-op > i{ grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--tint); color: var(--accent-600); }
.fl-op > i .ico{ width: 22px; height: 22px; }
.fl-op h3{ margin: 2px 0 0; color: var(--navy); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.fl-op p{ margin: 0; color: var(--ink-s); font-size: 15.5px; line-height: 1.6; }

/* records: ticks in two columns */
.fl-rec{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(28px, 5vw, 80px); }
.fl-rec .rl-ticks{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }

/* the fleet plan: two prices side by side */
.fl-plan{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: center; gap: 0; padding: 8px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -44px rgba(6, 26, 63, .35); }
.fl-plan > div{ display: grid; gap: 6px; padding: 22px 28px; }
.fl-plan > div + div{ border-left: 1px solid var(--hair); }
.fl-plan small{ color: var(--accent-600); font: 600 12px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.fl-plan b{ color: var(--navy); font: 600 36px/1.05 var(--font); letter-spacing: -.035em; }
.fl-plan b span{ color: var(--muted); font-size: 16px; font-weight: 500; letter-spacing: 0; }
.fl-plan p{ margin: 0; color: var(--ink-s); font-size: 15px; line-height: 1.5; }
.fl-plan .btn{ margin: 0 20px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px){
  .fl-types{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fl-types a:nth-child(n){ padding: 22px 20px 24px 0; border-left: 0; }
  .fl-types a:not(:nth-child(3n+1)){ padding-left: 20px; border-left: 1px solid var(--hair); }
  .so-kit{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-kit div:nth-child(n){ padding: 24px 24px 24px 0; border-left: 0; }
  .so-kit div:nth-child(even){ padding-left: 24px; border-left: 1px solid var(--hair); }
  .sz-price{ grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .sz-price-n{ padding-right: 0; border-right: 0; }
  .fl-plan{ grid-template-columns: minmax(0, 1fr); }
  .fl-plan > div + div{ border-left: 0; border-top: 1px solid var(--hair); }
  .fl-plan .btn{ justify-self: start; margin: 8px 28px 20px; }
  .ig-connect{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-rules{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-steps li:nth-child(n){ padding: 24px 22px 22px 0; border-left: 0; }
  .cr-steps li:nth-child(even){ padding-left: 22px; border-left: 1px solid var(--hair); }
  .cr-steps li:nth-child(n+3){ border-top: 1px solid var(--hair); }
  .cr-hero-grid{ grid-template-columns: minmax(0, 1fr); }
  .of-desk{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-desk a:nth-child(n){ padding: 24px 24px 26px 0; border-left: 0; }
  .of-desk a:nth-child(even){ padding-left: 24px; border-left: 1px solid var(--hair); }
}
@media (max-width: 900px){
  .rl-head, .ow-hero-grid, .ow-ask, .of-thread, .dp-hero-top, .dp-crew, .cr-tools, .rl .faq, .ig-hero-grid, .sz-hero-grid, .fl-rec{ grid-template-columns: minmax(0, 1fr); }
  .so-day-h{ display: none; }
  .so-row{ grid-template-columns: minmax(0, 1fr); }
  .so-row time{ padding: 18px 0 4px; }
  .so-row > div{ padding: 12px 16px; }
  .so-row > div:first-of-type::before{ content: "You"; display: block; margin-bottom: 6px; color: var(--muted); font: 600 11.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
  .so-row > div:last-child{ margin-bottom: 16px; border-radius: 12px; }
  .so-row > div:last-child::before{ content: "MoveConsole"; display: block; margin-bottom: 6px; color: var(--accent-600); font: 600 11.5px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
  .gr-hand li{ grid-template-columns: auto 22px auto minmax(0, 1fr); }
  .gr-hand h3{ grid-column: 1 / -1; }
  .gr-hand p{ grid-column: 1 / -1; }
  .gr-ctrl, .fl-ops{ grid-template-columns: minmax(0, 1fr); }
  .gr-bands{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gr-band:nth-child(3){ border-left: 0; }
  .gr-band:nth-child(n+3){ border-top: 1px solid var(--hair); }
  .ig-steps li{ grid-template-columns: 52px minmax(0, 1fr); }
  .ig-steps li::before{ grid-row: span 2; font-size: 36px; }
  .ig-who{ grid-column: 2; }
  .rl .faq-l{ position: static; }
  .ow-cols, .dp-zoom, .cr-done{ grid-template-columns: minmax(0, 1fr); }
  .ow-def{ grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ow-ctrl{ grid-template-columns: minmax(0, 1fr); }
  .ow-ctrl div:nth-child(n){ padding: 24px 0; border-left: 0; }
  .ow-plan{ grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .of-line::before{ left: 7px; }
  .of-line li{ grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 0 30px 34px; }
  .of-line li::before{ left: 1px; }
  .of-line time{ text-align: left; }
  .of-chip{ margin-top: 4px; }
  .dp-zoom{ gap: 28px; }
}
@media (max-width: 640px){
  .ow-facts{ grid-template-columns: minmax(0, 1fr); }
  .ow-facts li + li{ padding-left: 0; border-left: 0; }
  .ow-shot::before{ display: none; }
  .of-desk{ grid-template-columns: minmax(0, 1fr); }
  .of-desk a:nth-child(n){ padding: 20px 0; border-left: 0; }
  .dp-rules{ grid-template-columns: minmax(0, 1fr); }
  .cr-spec{ grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cr-spec .cr-parts{ width: 100%; }
  .cr-steps{ grid-template-columns: minmax(0, 1fr); }
  .cr-steps li:nth-child(n){ padding: 22px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .rl .faq-a{ padding-right: 0; }
  .ig-box{ padding: 16px; border-radius: 20px; }
  .ig-top svg{ width: 120px; }
  .ig-mods{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-out ul{ grid-template-columns: minmax(0, 1fr); }
  .ig-swap-h{ display: none; }
  .ig-row{ grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ig-connect{ grid-template-columns: minmax(0, 1fr); }
  .so-kit, .fl-types{ grid-template-columns: minmax(0, 1fr); }
  .so-kit div:nth-child(n), .fl-types a:nth-child(n){ padding: 20px 0; border-left: 0; }
  .sz-price ul{ grid-template-columns: minmax(0, 1fr); }
  .fl-wall{ grid-template-columns: minmax(0, 1fr); }
  .fl-rec .rl-ticks{ grid-template-columns: minmax(0, 1fr); }
  .gr-crew{ margin-left: 50%; }
}
@media (prefers-reduced-motion: reduce){
  .cr-steps li::after{ transition: none; }
  .of-desk a{ transition: none; }
}