/* Design v4 (owner, 2026-11-07): trade first, less text, one message and one visual per section.
   Loaded after brand.css. Components: the trade picker (home hero), the trade landing (ad pages), benefit
   cards, the three start steps, app cards, engine chips, screen peeks; and the rebalanced feature
   sections (.platform-engine). Colours only from tokens.css; both themes. */

/* ---------- shared ---------- */
.home-v4, .trade-page { --radius-xl: 24px; --radius-lg: 18px; --tile-shadow: var(--elev-md); }
.v4-section { padding-block: 76px; }
.v4-heading { max-width: 760px; margin: 0 0 34px; }
.v4-heading h2 { margin: 12px 0 0; font-size: clamp(28px, 3.1vw, 44px); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
.v4-heading p:not(.eyebrow) { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.icon-tile--lg { width: 56px; height: 56px; border-radius: 16px; }
.trust-line { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.trust-line li { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 550; color: var(--ink-2); }
.trust-line .icon { color: var(--accent-text); }

/* A real screen in its device frame (frontend/platform/screen-peek.blade.php): scaled, never cropped. */
.screen-peek { display: block; position: relative; pointer-events: none; }
.screen-peek__body { display: block; padding: 2.4%; border-radius: 16px; background: linear-gradient(145deg, #2a3a44, #0a1117 40%, #0a1117 70%, #24343d); border: 1px solid rgba(255, 255, 255, .10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(4, 7, 11, .25), 0 26px 50px -20px rgba(4, 7, 11, .65); }
.screen-peek__body img { display: block; width: 100%; height: auto; border-radius: 8px; background: #e8f3f6; }
.screen-peek--desktop .screen-peek__body { padding: 1.5%; border-radius: 12px; }
.screen-peek--desktop .screen-peek__body img { border-radius: 4px; }
.screen-peek--phone .screen-peek__body { padding: 4%; border-radius: 30px; }
.screen-peek--phone .screen-peek__body img { border-radius: 24px; }
:root[data-theme="dark"] .screen-peek__body { background: linear-gradient(145deg, #3a4c57, #1a2730 40%, #121d24 70%, #33454f); border-color: rgba(255, 255, 255, .16); }

/* ---------- home: the trade picker ---------- */
.trade-hero { padding-block: 30px 26px; }
.trade-hero__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 40px; margin-bottom: 22px; }
.trade-hero h1, .trade-landing h1 { margin: 0; font-size: clamp(32px, 3.7vw, 54px); line-height: 1.04; letter-spacing: -.04em; font-weight: 650; text-wrap: balance;
    background: var(--metal-text); background-size: 100% 1lh; background-repeat: repeat-y; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
@supports not (background-clip: text) { .trade-hero h1, .trade-landing h1 { color: var(--ink) !important; } }
.trade-hero__lead { margin: 10px 0 0; font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 78ch; }
.trade-hero__actions { margin: 0 !important; }
.trade-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 4px 4px 4px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--elev-xs); font-size: 14.5px; color: var(--ink); }
.trade-pill .icon { color: var(--accent-text); }
.trade-pill strong { font-weight: 700; }
.trade-pill a { min-height: 32px; padding: 0 12px; font-size: 13.5px; font-weight: 600; box-shadow: none; background: var(--neutral-soft); border-color: transparent; }

.trade-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(190px, calc((100svh - 372px) / 2), 290px); gap: 14px; }
.trade-tiles.has-choice { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trade-tile { min-width: 0; }
.trade-tile > a { position: relative; display: block; height: 100%; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); color: #ffffff; text-decoration: none; background: var(--dark); box-shadow: var(--tile-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.trade-tile > a:hover, .trade-tile > a:focus-visible { transform: translateY(-2px); box-shadow: var(--elev-lg); }
.trade-tile > a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.trade-tile__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.trade-tile__body { display: contents; }
.trade-tile__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transition: transform .5s ease; }
.trade-tile > a:hover .trade-tile__photo { transform: scale(1.04); }
.trade-tile__media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 7, 11, .05) 25%, rgba(4, 7, 11, .30) 55%, rgba(4, 7, 11, .86) 100%); }
.trade-tile .screen-peek { position: absolute; z-index: 2; right: -3%; bottom: -9%; width: 50%; transform: rotate(-2deg); transform-origin: 100% 100%; transition: transform .3s ease; }
.trade-tile > a:hover .screen-peek { transform: rotate(-2deg) translateY(-8px); }
.trade-tile .screen-peek--phone { width: 26%; right: 5%; bottom: -30%; }
.trade-tile__label { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: grid; justify-items: start; gap: 3px; }
/* the name never runs over the screen (white on a light screen would vanish) */
.trade-tile.has-peek .trade-tile__label { right: 51%; }
.trade-tile.has-peek .trade-tile__label strong { font-size: clamp(17px, 1.4vw, 21px); }
/* beside a chosen trade the other tiles are smaller: photo and name only */
.trade-tiles.has-choice .trade-tile:not(.is-featured) .screen-peek, .trade-tiles.has-choice .trade-tile:not(.is-featured) .trade-tile__label small { display: none; }
.trade-tiles.has-choice .trade-tile:not(.is-featured) .trade-tile__label { right: 18px; }
.trade-tile__label strong { font-size: clamp(18px, 1.55vw, 23px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: #ffffff; text-shadow: 0 1px 12px rgba(4, 7, 11, .45); overflow-wrap: break-word; hyphens: auto; }
.trade-tile__label small { font-size: 14px; line-height: 1.35; color: rgba(232, 241, 244, .9); text-shadow: 0 1px 8px rgba(4, 7, 11, .5); }
.trade-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 11px; color: #ffffff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.trade-tile__arrow { position: absolute; z-index: 2; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--se-space); background: #ffffff; box-shadow: var(--elev-sm); transition: background-color .2s ease, color .2s ease; }
.trade-tile > a:hover .trade-tile__arrow { background: var(--accent-solid); color: var(--on-accent-solid); }
/* the chosen trade: double size, its examples, its page */
.trade-tile.is-featured { grid-column: span 2; grid-row: span 2; }
.trade-tile.is-featured .trade-tile__media::after { background: linear-gradient(90deg, rgba(4, 7, 11, .88) 0%, rgba(4, 7, 11, .62) 46%, rgba(4, 7, 11, .10) 80%), linear-gradient(180deg, transparent 60%, rgba(4, 7, 11, .5)); }
.trade-tile.is-featured .trade-tile__label { top: 24px; bottom: auto; left: 26px; right: 46%; }
.trade-tile.is-featured .trade-tile__label strong { font-size: clamp(24px, 2.2vw, 32px); }
.trade-tile.is-featured .screen-peek { width: 50%; right: -3%; bottom: -10%; }
.trade-tile__benefits { position: absolute; z-index: 2; left: 26px; right: 50%; top: 50%; transform: translateY(-38%); list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.trade-tile__benefits li { display: flex; align-items: flex-start; gap: 9px; font-size: 15.5px; line-height: 1.4; color: #ffffff; }
.trade-tile__benefits .icon { flex: none; margin-top: 2px; color: var(--se-cyan); }
.trade-tile__open { position: absolute; z-index: 2; left: 26px; bottom: 24px; }
.trade-tile > a:hover .trade-tile__open { background: var(--primary-hover); box-shadow: var(--elev-sm); }
/* "all business types": a dark tile with the other trades' names */
.trade-tile.is-all > a { background: radial-gradient(520px 260px at 90% 0%, rgba(var(--se-cyan-rgb), .26), transparent 60%), linear-gradient(160deg, #0f1a21, var(--se-space)); }
.trade-tile.is-all .trade-tile__media { display: none; }
.trade-tile.is-all > a { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.trade-tile.is-all .trade-tile__label { position: static; flex: none; padding-right: 52px; }
/* the other trades' names: full rows only (two where the tile is tall enough, else one), never a half-cut row */
.trade-tile__names { flex: none; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; }
/* whole names only: four on a laptop, six where the tile is tall; never a name cut at the edge */
.trade-tile__names span:nth-child(n+5) { display: none; }
@media (min-height: 860px) and (min-width: 1101px) { .trade-tile__names span:nth-child(-n+6) { display: inline-flex; } }
.trade-tile.is-all > a { justify-content: space-between; }
.trade-tile__names span { display: inline-flex; max-width: 100%; padding: 5px 11px; line-height: 18px; white-space: normal; border-radius: 999px; font-size: 13px; font-weight: 550; color: rgba(232, 241, 244, .92); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.trade-tile.is-all .trade-tile__arrow { top: auto; bottom: 16px; }
.trade-tile.is-all .trade-tile__label { right: 70px; }
.trade-hero__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 18px; }

/* ---------- three steps to start ---------- */
.v4-steps { background: var(--surface); border-block: 1px solid var(--line); }
.v4-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: step; }
.v4-steps__list li { position: relative; padding: 28px 26px 26px; border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--line); }
.v4-steps__list li:not(:last-child)::after { content: ''; position: absolute; top: 55px; right: -22px; width: 22px; height: 2px; background: linear-gradient(90deg, var(--line-strong), transparent); }
/* the big outlined number is decoration (a counter, not text) */
.v4-steps__list li { counter-increment: step; }
.v4-steps__n::before { content: counter(step); }
.v4-steps__n { position: absolute; top: 16px; right: 22px; font-size: 54px; line-height: 1; font-weight: 700; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.v4-steps__list h3 { margin: 18px 0 8px; font-size: 20px; line-height: 1.25; font-weight: 650; color: var(--ink); }
.v4-steps__list p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* ---------- one account: app cards and what is inside ---------- */
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.app-card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 44px 14px 14px; border-radius: var(--radius-lg); text-decoration: none; color: var(--ink-2);
    border: 1px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--metal-edge); background-origin: border-box; background-clip: padding-box, border-box; transition: transform .18s ease, box-shadow .18s ease; }
.app-card:hover, .app-card:focus-visible { transform: translateY(-2px); }
.app-card__logo { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: var(--logo-tile); box-shadow: inset 0 0 0 1px rgba(10, 17, 23, .08); overflow: hidden; color: var(--accent-text); }
.app-card__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.app-card__copy { display: grid; gap: 3px; min-width: 0; }
.app-card__copy strong { font-size: 17px; font-weight: 700; color: var(--ink); }
.app-card__copy span { font-size: 14px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app-card__arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--accent-text); }
.app-card.is-all .app-card__logo { background: var(--accent-tint); }
.engine-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.engine-chips__label { flex-basis: 100%; margin: 0 0 2px; font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.engine-chips a { scroll-margin-top: 96px; }

/* ---------- home: prices teaser ---------- */
.v4-pricing { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-block: 70px 10px; padding: 34px 38px; border-radius: var(--radius-xl); border: 1px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--metal-edge); background-origin: border-box; background-clip: padding-box, border-box; }
.v4-pricing h2 { margin: 10px 0 8px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; }
.v4-pricing p:not(.eyebrow) { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 64ch; }
.v4-pricing .button { flex: none; }

/* ---------- the trade landing (ad pages) ---------- */
.trade-page .industry-breadcrumb { padding-top: 14px; }
.trade-landing { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 56px; padding-block: 18px 72px; }
.trade-landing__copy { min-width: 0; }
.trade-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 15px; font-weight: 650; color: var(--ink); }
.trade-eyebrow .icon-tile { width: 38px; height: 38px; border-radius: 11px; }
.trade-landing h1 { font-size: clamp(34px, 4vw, 58px); }
.trade-landing .sector-lead { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 54ch; }
.trade-landing .hero-actions { margin-top: 28px; }
.trade-landing .trust-line { margin-top: 22px; }
.trade-visual { position: relative; min-width: 0; padding: 0 0 13% 0; }
.trade-visual__photo { display: block; width: 86%; margin-right: auto; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--tile-shadow); }
/* the screen in front of the photo's lower right: the people and the car or the plate stay in view */
.trade-visual .screen-peek { position: absolute; right: 0; bottom: 0; width: 60%; }
.trade-visual .screen-peek--phone { width: 26%; right: 4%; }
.trade-visual:not(.has-screen) .trade-visual__photo { width: 100%; }
.trade-visual:not(.has-screen) { padding-bottom: 0; }
/* the day in the trade's words */
.trade-flow { padding: 22px 26px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--elev-xs); }
.trade-flow .eyebrow { margin: 0 0 14px; }
.trade-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.trade-flow li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding-right: 18px; }
.trade-flow li:not(:last-child)::after { content: ''; position: absolute; right: 2px; top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: translateY(-50%) rotate(45deg); }
.trade-flow__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; color: var(--accent-text); background: var(--metal-sheen); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(10, 17, 23, .08), 0 1px 2px rgba(10, 17, 23, .08); }
.trade-flow__n { position: absolute; left: 30px; top: -6px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11.5px; font-weight: 700; color: var(--on-accent-solid); background: var(--accent-solid); border: 1px solid var(--surface); }
.trade-flow strong { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--ink); }
:root[data-theme="dark"] .trade-flow__icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .4); color: var(--se-cyan); }
/* three benefits, one visual each */
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.benefit-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--metal-edge); background-origin: border-box; background-clip: padding-box, border-box; }
.benefit-card__visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark); isolation: isolate; }
.benefit-card__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.benefit-card__visual.has-screen:not(.is-screen-only)::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(200deg, transparent 40%, rgba(4, 7, 11, .45)); }
.benefit-card__visual .screen-peek { position: absolute; z-index: 1; right: -4%; bottom: -12%; width: 74%; }
.benefit-card__visual .screen-peek--phone { width: 38%; right: 8%; bottom: -34%; }
.benefit-card__visual.is-screen-only { background: radial-gradient(420px 260px at 70% 0%, rgba(var(--se-cyan-rgb), .30), transparent 65%), linear-gradient(160deg, #13212a, var(--se-space)); }
.benefit-card__visual.is-screen-only .screen-peek--phone { width: 50%; right: 25%; bottom: -58%; }
.benefit-card__copy { padding: 22px 24px 26px; }
.benefit-card__copy h3 { margin: 14px 0 8px; font-size: 21px; line-height: 1.25; font-weight: 650; color: var(--ink); }
.benefit-card__copy p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
/* what the trade gets: compact cards, icon beside the text */
.trade-included { padding-block: 0 76px; }
.trade-included > h2 { margin: 0 0 22px; font-size: clamp(22px, 2vw, 28px); font-weight: 650; letter-spacing: -.02em; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.capability { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
/* a card whose module is not in the recommended setup (QA C3-01, C3-02) */
.capability__addon { display: inline-flex; margin: 6px 0 0; padding: 2px 8px; border-radius: 999px; background: var(--neutral-soft); color: var(--muted); font-size: 12.5px; font-weight: 650; line-height: 1.5; }
.capability .capability__addon + p { margin-top: 6px; }
.capability h3 { margin: 2px 0 4px; font-size: 16.5px; font-weight: 650; color: var(--ink); }
.capability p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.trade-page .v4-steps { margin-top: 10px; }
.trade-page .industry-packages { padding-top: 76px; }
/* the questions in one centred column under their heading (the accordion itself: ui.css) */
.trade-page .industry-faq.trade-faq { display: block; }
.platform-faq { display: block; }
.platform-faq > h2 { text-align: center; margin: 0 0 28px; }
.platform-faq > .text-link { display: flex; width: max-content; margin: 24px auto 0; }
.trade-faq > div:first-child { text-align: center; margin-bottom: 28px; }
.trade-faq > div:first-child h2 { margin: 10px 0 0; }
/* the priced setup: the offer sits on a tinted price panel that fills its column */
.industry-plan__offer { display: flex; flex-direction: column; padding: 26px 28px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); align-self: stretch; }
.industry-plan__offer .industry-plan__actions { margin-top: auto; padding-top: 24px; }
.industry-plan__offer > .industry-plan__badge { align-self: flex-start; }
.industry-plan > * { min-width: 0; }
@media (max-width: 600px) { .trade-tile__benefits { display: none !important; } }
@media (max-width: 760px) {
    .industry-plan { padding: 14px 12px !important; }
    .industry-plan__offer { padding: 20px 16px; }
    .industry-plan__offer .industry-plan__actions .button { width: 100%; --_px: 16px; }
}
/* the longest labels (Italian, Spanish) take a second line on a phone rather than leave the screen */
@media (max-width: 420px) { .industry-plan__actions .button-outline { white-space: normal; text-align: center; line-height: 1.3; } }
.industry-plan__offer .industry-plan__actions .button { flex: 1 1 auto; }
:root[data-theme="dark"] .industry-plan__offer { background: rgba(255, 255, 255, .03); }
@media (min-width: 1024px) { .industry-plan__contents { padding-left: 0 !important; border-left: 0 !important; } }
/* the closing band: centred, one message and its two actions */
.platform-final { text-align: center; padding-block: 84px !important; }
.platform-final h2, .platform-final p { margin-inline: auto !important; }
.platform-final .hero-actions { justify-content: center; }

/* ---------- feature sections, rebalanced (owner: "an insane amount of empty space on the left") ----------
   The copy and the screen share the first row, centred on each other; the capability list runs across the
   full width underneath, so neither column is half empty at any height. */
.platform-engine { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important; grid-template-areas: "copy visual" "list list"; align-items: center; row-gap: 40px !important; }
.platform-engine.is-reversed { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important; grid-template-areas: "visual copy" "list list"; }
.platform-engine .platform-engine-copy { grid-area: copy; order: 0 !important; }
.platform-engine .platform-engine-detail { grid-area: visual; }
.platform-engine .platform-engine-list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* four capabilities sit in four columns, never three and an orphan */
.platform-engine .platform-engine-list:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.platform-engine .platform-engine-list li { margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.platform-engine .platform-engine-list h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 650; color: var(--ink); }
.platform-engine .platform-engine-list p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.platform-engine .product-capture, .platform-engine .engine-photo { margin: 0; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1100px) {
    .trade-tiles, .trade-tiles.has-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; }
    .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trade-flow ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
    .trade-flow li:nth-child(3)::after { display: none; }
    .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .benefit-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
    .benefit-card:last-child:nth-child(odd) .benefit-card__visual { flex: 0 0 50%; }
    .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-engine .platform-engine-list, .platform-engine .platform-engine-list:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-engine .platform-engine-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
    .trade-landing { grid-template-columns: 1fr; gap: 34px; padding-bottom: 48px; }
    .platform-engine, .platform-engine.is-reversed { grid-template-columns: 1fr !important; grid-template-areas: "copy" "visual" "list"; row-gap: 26px !important; }
    .v4-steps__list { grid-template-columns: 1fr; gap: 12px; }
    .v4-steps__list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; padding: 20px; }
    .v4-steps__list li .icon-tile { grid-row: span 2; }
    .v4-steps__list h3 { margin: 2px 0 4px; }
    .v4-steps__list li::after { display: none; }
    .v4-steps__n { font-size: 40px; top: 12px; right: 16px; }
}
@media (max-width: 760px) {
    .v4-section { padding-block: 52px; }
    .v4-heading { margin-bottom: 24px; }
    .trade-hero { padding-block: 18px 22px; }
    .trade-hero__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
    .trade-hero h1 { font-size: clamp(28px, 8vw, 34px); }
    .trade-hero__lead { font-size: 16.5px; margin-top: 8px; }
    .trade-hero__actions .button { width: 100%; }
    .trade-tiles, .trade-tiles.has-choice { gap: 10px; grid-auto-rows: clamp(138px, calc((100svh - 420px) / 3), 180px); }
    .trade-tile > a { border-radius: 16px; }
    .trade-tile .screen-peek { display: none; }
    .trade-tile.has-peek .trade-tile__label { right: 12px; }
    .trade-tile__label { left: 12px; right: 12px; bottom: 11px; }
    .trade-tile__label strong { font-size: 16.5px; }
    .trade-tile__label small { display: none; }
    .trade-tile__icon { width: 32px; height: 32px; border-radius: 9px; margin-bottom: 6px; }
    .trade-tile__icon .icon { width: 17px; height: 17px; }
    .trade-tile__arrow { width: 30px; height: 30px; top: 10px; right: 10px; }
    .trade-tile__arrow .icon { width: 15px; height: 15px; }
    .trade-tile.is-all > a { padding: 12px; gap: 8px; }
    /* on a phone the all-trades tile names them in its line instead of chips */
    .trade-tile__names { display: none; }
    .trade-tile.is-all .trade-tile__label small { display: block; font-size: 12.5px; }
    .trade-tile.is-all > a { justify-content: flex-end; }
    .trade-tile.is-all .trade-tile__arrow { display: none; }
    .trade-tile.is-all .trade-tile__label { padding-right: 0; }
    /* the chosen trade on a phone (owner, 7 Nov: "too crammed, the button overflows"): the photo with its screen on
       top, the name, one line and a full-width button below on a calm surface; no text on the photo */
    .trade-tiles.has-choice { grid-template-rows: auto; }
    .trade-tile.is-featured { grid-column: 1 / -1; grid-row: auto; }
    .trade-tile.is-featured > a { display: flex; flex-direction: column; height: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
    .trade-tile.is-featured .trade-tile__media { position: relative; inset: auto; flex: none; height: clamp(170px, 48vw, 230px); }
    .trade-tile.is-featured .trade-tile__media::after { background: linear-gradient(180deg, transparent 60%, rgba(4, 7, 11, .28)); }
    .trade-tile.is-featured .screen-peek { display: block; width: 56%; right: -2%; bottom: -12%; }
    .trade-tile.is-featured .screen-peek--phone { width: 26%; bottom: -40%; }
    .trade-tile.is-featured .trade-tile__body { display: grid; gap: 12px; padding: 14px 16px 16px; }
    .trade-tile.is-featured .trade-tile__label { position: static; gap: 2px; }
    .trade-tile.is-featured .trade-tile__label strong { font-size: 20px; color: var(--ink); text-shadow: none; }
    .trade-tile.is-featured .trade-tile__label small { display: block; font-size: 14.5px; color: var(--muted); text-shadow: none; }
    .trade-tile.is-featured .trade-tile__icon { width: 36px; height: 36px; color: var(--accent-text); background: var(--accent-tint); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .trade-tile__benefits { position: static; transform: none; gap: 6px; }
    .trade-tile__benefits li { font-size: 14.5px; color: var(--ink-2); }
    .trade-tile__benefits .icon { color: var(--accent-text); }
    .trade-tile__benefits li:nth-child(3) { display: none; }
    .trade-tile.is-featured .trade-tile__open { position: static; width: 100%; white-space: normal; }
    .trade-hero__foot { margin-top: 14px; }
    .trust-line { gap: 6px 16px; }
    .trust-line li { font-size: 13.5px; }
    .app-grid { grid-template-columns: 1fr; gap: 10px; }
    .app-card { grid-template-columns: 56px minmax(0, 1fr); padding: 12px 40px 12px 12px; }
    .app-card__logo { width: 56px; height: 56px; border-radius: 14px; }
    .engine-chips__label { flex-basis: 100%; }
    .v4-pricing { flex-direction: column; align-items: flex-start; padding: 26px 22px; margin-block: 48px 0; }
    .v4-pricing .button { width: 100%; }
    .trade-landing { padding-block: 6px 40px; gap: 26px; }
    .trade-landing h1 { font-size: clamp(30px, 8.4vw, 38px); }
    .trade-landing .sector-lead { font-size: 17px; margin-top: 14px; }
    .trade-landing .hero-actions .button, .trade-landing .hero-actions .text-link { width: 100%; }
    /* on a phone the picture comes first: the trade is recognised before a word is read */
    .trade-page .industry-breadcrumb { display: none; }
    .trade-landing { padding-top: 14px; }
    .trade-visual { order: -1; padding-bottom: 12%; }
    .trade-visual__photo { width: 90%; border-radius: 18px; aspect-ratio: 16 / 10; }
    .trade-visual .screen-peek { width: 64%; }
    .trade-eyebrow { margin-bottom: 12px; }
    .trade-flow { padding: 18px; }
    .trade-flow ol { grid-template-columns: 1fr; gap: 10px; }
    .trade-flow li { padding-right: 0; }
    .trade-flow li::after { display: none; }
    .benefit-grid { grid-template-columns: 1fr; gap: 16px; }
    .benefit-card:last-child:nth-child(odd) { flex-direction: column; }
    .benefit-card__copy { padding: 18px 20px 22px; }
    /* on a phone the capabilities are a compact list of names; the benefits above carry the explanation */
    .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .capability { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; }
    .capability h3 { margin: 0; font-size: 15px; line-height: 1.3; }
    .capability p { display: none; }
    .trade-included { padding-bottom: 52px; }
    .benefit-card__copy h3 { font-size: 19px; }
    .platform-engine .platform-engine-list, .platform-engine .platform-engine-list:has(> li:nth-child(4):last-child) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .trade-tile > a, .trade-tile__photo, .trade-tile .screen-peek, .app-card { transition: none; }
}

/* ---------- the business-type search (home page and sectors hub; partials/sector-search, js/sector-search.js) ---------- */
.sector-search { position: relative; scroll-margin-top: 88px; }
.sector-search--home { max-width: 880px; margin: 22px 0 0; }
.sector-search--hub { max-width: 760px; margin: 26px 0 18px; }
.sector-search__label { display: block; margin: 0 0 8px; font-size: 15.5px; font-weight: 650; color: var(--ink); }
.sector-search__field { position: relative; }
.sector-search__glass { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.sector-search__input { display: block; width: 100%; min-height: 56px; padding: 14px 52px 14px 48px; border-radius: 14px; font-size: 17px; box-shadow: var(--elev-sm); }
.sector-search__input::-webkit-search-cancel-button, .sector-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.sector-search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.sector-search__clear:hover { background: var(--neutral-soft); color: var(--ink); }
.sector-search__clear[hidden] { display: none; }
.sector-search__status { margin: 8px 4px 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.sector-search__status:empty { display: none; }
.sector-search__list { list-style: none; display: grid; gap: 2px; margin: 8px 0 0; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--elev-lg); }
.sector-search__list[hidden], .sector-search__none[hidden] { display: none; }
.sector-search__option { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; color: var(--ink-2); text-decoration: none; }
.sector-search__option:hover, .sector-search__option[aria-selected="true"] { background: var(--accent-tint); color: var(--ink-2); text-decoration: none; }
.sector-search__option[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--focus-ring); }
.sector-search__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--neutral-soft); color: var(--accent-text); }
.sector-search__icon .icon { width: 20px; height: 20px; }
.sector-search__text { display: grid; gap: 1px; min-width: 0; }
.sector-search__text strong { font-size: 16px; line-height: 1.3; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.sector-search__text mark { padding: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 2px; background: color-mix(in srgb, var(--focus-ring) 22%, transparent); color: inherit; }
.sector-search__text small { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--accent-text); }
.sector-search__text span { font-size: 13.5px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.sector-search__arrow { display: inline-flex; color: var(--muted); }
.sector-search__arrow .icon { width: 18px; height: 18px; }
.sector-search__option[aria-selected="true"] .sector-search__arrow { color: var(--accent-text); }
.sector-search__none { display: grid; gap: 12px; margin: 8px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--elev-lg); }
.sector-search__closest { margin: 0; font-size: 14.5px; font-weight: 650; color: var(--ink); }
.sector-search__families { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.sector-search__families .chip { max-width: 100%; white-space: normal; text-align: left; }
.sector-search__softsi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sector-search__softsi .button { white-space: normal; max-width: 100%; }
.sector-search__softsi p { flex: 1 1 240px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 760px) {
    .sector-search--home { margin-top: 16px; }
    .sector-search__label { font-size: 15px; }
    .sector-search__input { min-height: 52px; font-size: 16px; }
    .sector-search__option { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 10px; padding: 9px 8px; }
    .sector-search__icon { width: 36px; height: 36px; }
    .sector-search__none { padding: 14px; }
    .sector-search__softsi .button { width: 100%; }
}

/* ---------- every sector page on the trade template ---------- */
.trade-visual--screen { padding: 0; }
.trade-visual--screen .screen-peek { position: static; width: 100%; }
.benefit-card.is-text-only .benefit-card__copy { padding-top: 26px; }
.trade-children { padding-block: 0 26px; }
.trade-children h2 { margin: 0 0 12px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.trade-children .sector-jump-links { display: flex; flex-wrap: wrap; gap: 8px; }
.trade-children .chip { white-space: normal; }
.trade-page .industry-also-for { margin-bottom: 24px; }
.trade-page .industry-process-art { min-width: 0; }

/* ---------- product pages: a real screen in the hero, the logo beside the name ---------- */
.product-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.product-eyebrow__logo { flex: none; width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: var(--logo-tile); box-shadow: inset 0 0 0 1px var(--line); }
.product-hero-visual--screen { width: 100%; min-width: 0; place-items: center; }
.product-hero-visual--screen .screen-peek { width: 100%; }
.product-hero-visual--screen.is-phone .screen-peek { width: min(300px, 72%); }
.product-page .trade-pill { margin-bottom: 14px; }
@media (max-width: 760px) { .product-hero-visual--screen { justify-items: stretch; } .product-hero-visual--screen.is-phone { justify-items: center; } }

/* ---------- /pricing without a chosen business: pick first ---------- */
.pricing-choose { padding: 8px 0 24px; }
.pricing-choose__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; }
.pricing-choose__card { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--elev-sm); color: var(--ink-2); text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease; }
.pricing-choose__card:hover { box-shadow: var(--elev-md); border-color: var(--secondary-border-hover); text-decoration: none; }
.pricing-choose__card strong { display: block; font-size: 16px; color: var(--ink); }
.pricing-choose__card small { display: block; font-size: 13.5px; color: var(--muted); }
.pricing-choose__card > .icon { color: var(--accent-text); }
/* each trade's recommended setup, as the API quotes it (QA V-02) */
.pricing-choose__card { align-items: start; }
.pricing-choose__card > .icon { align-self: center; }
/* five trades side by side on a wide screen: icon and arrow on top, the name, the line and the price under them */
@media (min-width: 1100px) {
    .pricing-choose__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .pricing-choose__card { height: 100%; grid-template-columns: minmax(0, 1fr) 18px; grid-template-rows: auto 1fr; row-gap: 12px; }
    .pricing-choose__card > .icon-tile { grid-column: 1; grid-row: 1; }
    .pricing-choose__card > .icon { grid-column: 2; grid-row: 1; }
    .pricing-choose__card > span:not(.icon-tile) { grid-column: 1 / -1; grid-row: 2; align-self: stretch; display: flex; flex-direction: column; }
    .pricing-choose__card > span:not(.icon-tile) > small { margin-bottom: 12px; }
    .pricing-choose__card .pricing-choose__price { margin-top: auto; }
}
.pricing-choose__price { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.pricing-choose__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pricing-choose__amount { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.pricing-choose__amount b { font-size: 19px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.pricing-choose__amount s { margin-left: 6px; font-size: 13px; white-space: nowrap; }
.pricing-choose .pricing-promo { margin-top: 18px; }
.pricing-choose .pricing-vat { margin-top: 12px; padding-top: 0; border-top: 0; }
.pricing-intro .trade-pill { margin-bottom: 14px; }
/* the pill stands on its own line above the eyebrow or the title */
.product-page .trade-pill, .pricing-intro .trade-pill { display: flex; width: fit-content; max-width: 100%; }
.trade-pill > span { min-width: 0; overflow-wrap: anywhere; }
/* store badges never push the page wider on a phone: the long kicker wraps inside the badge */
.store-badge { max-width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) auto !important; white-space: normal !important; }
.store-badge .store-badge-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 420px) { .store-badges { flex-direction: column; align-items: stretch; } .store-badge { width: 100%; } }

/* QA round 2 (F2-09, F2-10): the no-match sentence is read out, not shown; on a phone a result is its name and
   family only, so three or four fit above the keyboard */
.sector-search__status.is-quiet { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sector-search__list { overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) { .sector-search__text > span { display: none; } .sector-search__option { padding-block: 8px; } }

/* the benefits beside the page's photos while a trade's scenes are on their way (QA R2 V-05): never an empty card */
.benefit-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.benefit-split.is-text-only { grid-template-columns: 1fr; }
.benefit-split__visual { position: relative; min-width: 0; padding-bottom: 0; }
.benefit-split__visual.has-two { padding: 0 0 18% 0; }
.benefit-split__photo { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--elev-md); }
.benefit-split__visual.has-two .benefit-split__photo:first-child { width: 82%; }
.benefit-split__visual.has-two .benefit-split__photo + .benefit-split__photo { position: absolute; right: 0; bottom: 0; width: 46%; border: 4px solid var(--bg); }
.benefit-split__visual .screen-peek { position: absolute; right: -2%; bottom: -6%; width: 58%; }
.benefit-split__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.benefit-split.is-text-only .benefit-split__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.benefit-split__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--elev-xs); }
.benefit-split__list h3 { margin: 2px 0 6px; font-size: 19px; line-height: 1.3; font-weight: 650; color: var(--ink); }
.benefit-split__list p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 960px) {
    .benefit-split { grid-template-columns: 1fr; gap: 24px; }
    .benefit-split.is-text-only .benefit-split__list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .benefit-split__list li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
    .benefit-split__list h3 { font-size: 17px; }
    .benefit-split__photo { border-radius: 18px; }
}

/* the header's call to action: the short label on the narrowest phones (QA R2 V-06) */
.site-cta__short { display: none; }
@media (max-width: 359px) { .site-header .site-cta .site-cta__long { display: none; } .site-header .site-cta .site-cta__short { display: inline; } }

/* on a phone the companion steps aside while a row of buttons is on screen (QA R2 V-07, js/launcher-guard.js) */
@media (max-width: 760px) {
    .softsi-launcher { transition: opacity .2s ease, transform .2s ease; }
    .softsi-launcher-away .softsi-launcher { opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; }
    .softsi-launcher-away .softsi-bubble { display: none; }
}

/* QA R2 V-08: three "What it does" groups sit in one row (SoftSMS: prices beside what is sent); the sectors hub's
   hero shows the trades beside its search */
@media (min-width: 1024px) {
    .product-group-grid:has(> .product-group:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product-group-grid:has(> .product-group:nth-child(3):last-child) > .product-group:last-child { grid-column: auto; }
}
@media (min-width: 760px) and (max-width: 1023px) {
    .product-group-grid:has(> .product-group:nth-child(3):last-child) > .product-group:first-child { grid-column: 1 / -1; }
    .product-group-grid:has(> .product-group:nth-child(3):last-child) > .product-group:last-child { grid-column: auto; }
}
.sector-intro__collage { display: none; }
@media (min-width: 1024px) {
    .sector-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
    .sector-intro__copy { min-width: 0; }
    .sector-intro__collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .sector-intro__collage img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 18px; box-shadow: var(--elev-md); }
    .sector-intro__collage img:nth-child(2n) { transform: translateY(22px); }
}

.sector-search__families[hidden], .sector-search__closest[hidden] { display: none; }
.sector-search__families[hidden] + .sector-search__softsi { padding-top: 0; border-top: 0; }

/* Long words on a phone (QA V3-01: "Lieferantenrechnungen" widened the capability grid at 360 px). Headings and
   card titles break by syllable in the page's language (<html lang>), only words of ten letters or more, and a
   card title breaks anywhere as a last resort, so no word can make its column wider than the screen. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
:where(article, .capability, .benefit-card, .sector-module, .industry-plan, .pricing-card, .product-card) :where(h3, h4) { overflow-wrap: anywhere; }
@media (max-width: 760px) {
    h1, h2, h3, h4, .capability h3, .benefit-card h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}