too, so it inherited the lead's `margin-top: 22px`; cleared so first-screen-bottom → first line also measures exactly 160px. */ .auto-section--auto .auto-heading > p.eyebrow { margin-top: 0; } .auto-section--auto + .contact-section { padding-top: 80px; } /* FAQ (80px) + contact top (80px) = 160px. The home variant of the FAQ carries no bottom padding, so it keeps the full 160px contact top instead. */ .faq-section:not(.faq-section--home) + .contact-section { padding-top: 80px; } .auto-heading { max-width: 900px; } .auto-heading h2 { margin: 28px 0 0; font-size: clamp(34px, 3.6vw, 42px); font-weight: 400; letter-spacing: -.055em; line-height: 1.08; text-wrap: balance; } .auto-heading > p { max-width: 720px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; } /* The kicker is a
as well, so the lead rule above would otherwise size it
like the lead. Keep it as a plain label: no bullet, brand orange, regular. */
.auto-heading > p.eyebrow { margin: 0; color: #ff7417; font-size: 13px; font-weight: 400; letter-spacing: .11em; line-height: 1.5; }
.auto-heading > p.eyebrow::before { display: none; }
/* Application examples — ported from the FDE Talent "Selected for a role.
Developed for the work." pathway block: a statement column on the left and a
numbered vertical track on the right, hairline rules between the steps. */
.auto-section--pathway { padding: 154px 0; background: #fff; }
.auto-pathway-layout { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr); align-items: start; gap: clamp(48px, 5vw, 80px); }
.auto-section--pathway .auto-heading { max-width: none; }
.auto-section--pathway .auto-heading .eyebrow { margin-bottom: 25px; color: #7d7d82; }
.auto-section--pathway .auto-heading .eyebrow::before { display: none; }
.auto-section--pathway .auto-heading h2 { max-width: none; margin-top: 0; font-size: clamp(40px, 3.2vw, 48px); font-weight: 400; letter-spacing: -.055em; line-height: 1.08; }
.auto-section--pathway .auto-heading > p { max-width: none; margin-top: 24px; }
.auto-track { margin: 0; padding: 0; list-style: none; }
.auto-step { min-height: 112px; padding: 22px 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; column-gap: 18px; border-bottom: 1px solid var(--line); }
.auto-step:last-child { border-bottom: 0; }
.auto-step-num { grid-row: 1 / span 2; color: #d0d0d2; font-size: 24px; font-weight: 400; line-height: 1.1; letter-spacing: -.05em; }
.auto-step h3 { grid-column: 2; margin: 0; font-size: 19px; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; }
.auto-step p { grid-column: 2; margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
/* Automation application examples — light gray section. */
.auto-section--auto#examples { padding-block: 140px; background: #fafafa; }
/* Measure the inset to the first and last row content, without extra row padding. */
.automation-page #examples .auto-step:first-child { min-height: 0; padding-top: 0; }
.automation-page #examples .auto-step:last-child { min-height: 0; padding-bottom: 0; }
.automation-page #outcomes { padding-bottom: 160px; }
.automation-page #goes-live { padding-top: 160px; }
/* Automation section labels share the same orange and medium weight. */
.automation-page .auto-heading > p.eyebrow,
.automation-page .contact-kicker { color: #ff7417; font-weight: 500; }
.auto-grid { display: grid; gap: 20px; margin-top: clamp(48px, 5vw, 64px); }
.auto-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auto-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auto-card { position: relative; display: flex; flex-direction: column; min-height: 208px; padding: 28px; border-radius: 14px; background: rgba(0,0,0,.04); }
.auto-card-icon { width: 28px; height: 28px; fill: none; stroke: #737373; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auto-card-number { position: absolute; top: 22px; right: 26px; color: #d2d2d2; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.auto-card h3 { margin: 26px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.auto-card p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
/* The note is bottom-aligned (margin-top: auto), so the tallest card in the row
ends up with no gap at all and its hairline touches the copy above. Give the
copy that precedes a note a floor; shorter cards keep their extra slack.
:has() degrades safely — without it the layout is exactly as before. */
.auto-card p:has(+ small) { margin-bottom: 24px; }
.auto-card small { display: block; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(23,23,23,.1); color: #8a8a8a; font-size: 13px; line-height: 1.5; }
/* Both the Automation and Work outcome rows use a two-line footer track.
The body absorbs spare space, keeping every divider on one baseline while
a one-line note remains vertically centred in that same track. */
.auto-grid--four .auto-card:has(> small) p:has(+ small) { flex: 1; }
.auto-grid--four .auto-card:has(> small) small { height: 54px; min-height: 0; margin-top: 0; padding-top: 15px; box-sizing: border-box; display: flex; align-items: center; }
/* HOW IT GOES LIVE — a white card with a hairline frame instead of the filled
tile: the step number sits small and pale in the top-left corner, above the
title. Scoped to --method so the four .auto-card tiles elsewhere keep theirs. */
.auto-grid--method .auto-card { min-height: 0; padding: 32px; border: 1px solid rgba(23,23,25,.06); border-radius: 12px; background: #fff; }
.auto-grid--method .auto-card-number { position: static; color: #d5d5d5; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; }
.auto-grid--method .auto-card h3 { margin: 16px 0 0; }
.auto-grid--method .auto-card p { margin: 9px 0 0; line-height: 1.5; }
/* Office vs automation — a ruled comparison table.
Modelled on the reference: no fills, no card, hairline rules only. Each row
is its own grid so the rule runs the full width without a column gap, and the
frame sits flush with the content column (--cmp-gutter: 0). Set --cmp-gutter
to e.g. 40px to inset the frame, or --cmp-width to e.g. 1200px to narrow and
centre the whole table. Like the reference there are no vertical rules
between the columns. */
.auto-compare { --cmp-width: 100%; --cmp-gutter: 0px; width: min(100%, var(--cmp-width)); margin: clamp(48px, 5vw, 64px) auto 0; padding-inline: var(--cmp-gutter); position: relative; }
/* The frame is one positioned pseudo-element rather than container borders: a
container border spans the whole track while every row rule lives inside the
inline padding, so the ends would not line up. A single box inset by
--cmp-gutter draws all four sides — top, bottom, left and right. */
.auto-compare::before { content: ""; position: absolute; inset: 0 var(--cmp-gutter); border: 1px solid var(--line); border-radius: 8px; pointer-events: none; }
.auto-compare-head, .auto-compare-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(36px, 4.5vw, 72px); align-items: center; }
.auto-compare-row { border-top: 1px solid var(--line); }
.auto-compare-head p { display: flex; align-items: center; min-height: 64px; margin: 0; color: var(--ink); font-size: 14px; font-weight: 400; letter-spacing: .04em; line-height: 1.3; }
.auto-compare-row p { display: flex; align-items: center; min-height: 64px; margin: 0; padding: 21px 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.auto-compare-row .auto-compare-label { align-self: center; color: var(--ink); font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
/* Keep the text off the ends of the rules — the reference row label sits about
26px inside the start of the line and the last column stops the same distance
from the end, so neither end reads as sliced. */
.auto-compare-head > p:first-child, .auto-compare-row > p:first-child { padding-left: clamp(14px, 1.7vw, 24px); }
.auto-compare-head > p:last-child, .auto-compare-row > p:last-child { padding-right: clamp(14px, 1.7vw, 24px); }
/* Button variants used inside the closing banner. */
.button-orange { border-color: var(--orange); background: var(--orange); }
.button-ghost { border-color: rgba(255,255,255,.28); background: transparent; }
.button-ghost:hover { border-color: rgba(255,255,255,.6); }
/* AI Image module — everything below the first screen.
Same spec as the Why Mr. AI page: neutral #04 cards at a 14px radius,
400-weight headings with tight tracking, muted 16px body copy. */
/* Sections have no margin — the gap between two blocks is the sum of their facing paddings.
80px per side = a 160px rhythm between modules. */
.im-section { padding: 80px 0; }
.im-heading { max-width: 900px; }
/* Heading block aligned to the homepage "WHY MR. AI" section: a 13px orange
dotless kicker, a 56px 400-weight heading, and an 18px muted lead.
The :not(.eyebrow) guard keeps the kicker out of the lead styles. */
/* Kickers stay 400 — the user asked for every small label on this page to be unbolded. */
.im-heading .eyebrow { display: block; margin: 0 0 22px; color: #ff7417; font-size: 13px; font-weight: 400; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; text-align: inherit; }
.im-heading .eyebrow::before { display: none; }
.im-heading h2 { max-width: 860px; margin: 0 0 20px; color: #111113; font-size: 42px; font-weight: 400; letter-spacing: -.052em; line-height: 1.08; text-wrap: balance; }
.im-heading > p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
/* Asset libraries: a plain icon list — no surface, no numbering. */
.im-plain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 44px; margin-top: clamp(48px, 5vw, 64px); }
.im-plain-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 13px; align-items: start; }
.im-plain-icon { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: #5f5f63; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.im-plain-copy h3 { margin: 0; font-size: 17px; font-weight: 400; letter-spacing: -.012em; line-height: 1.35; }
.im-plain-copy p { margin: 7px 0 0; color: #8a8a8a; font-size: 14.5px; line-height: 1.6; }
.im-grid { display: grid; gap: 20px; margin-top: clamp(48px, 5vw, 64px); }
.im-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.im-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.im-card { position: relative; min-height: 208px; padding: 28px; border-radius: 14px; background: rgba(0, 0, 0, .04); }
.im-card-icon { width: 28px; height: 28px; fill: none; stroke: #737373; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.im-card-number { position: absolute; top: 22px; right: 26px; color: #d2d2d2; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.im-card h3 { margin: 26px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.im-card p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
/* One image or a full set — a single hairline bar split into three rows,
styled after the reference: plain white surface, inner dividers, a title
over a muted note, and a small arrow pinned to the right edge. */
.im-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(48px, 5vw, 64px); border: 1px solid #e9e9e9; border-radius: 12px; background: #fff; overflow: hidden; }
.im-flow-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 26px 28px; }
.im-flow-item + .im-flow-item { border-left: 1px solid #e9e9e9; }
.im-flow-copy h3 { margin: 0; color: #3b3b3b; font-size: 16px; font-weight: 500; letter-spacing: -.012em; line-height: 1.35; }
.im-flow-copy p { margin: 8px 0 0; color: #8f8f8f; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.im-flow-arrow { width: 17px; height: 17px; fill: none; stroke: #b4b4b4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* unused — the old grey three-node chain was replaced by the bar above;
restore these rules together with the im-node markup if it is wanted back
.im-node { padding: 30px 26px; border-radius: 14px; background: rgba(0, 0, 0, .04); }
.im-node.is-key { background: rgba(0, 0, 0, .07); }
.im-node small { display: block; color: #737373; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.im-node strong { display: block; margin-top: 13px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.35; text-wrap: pretty; }
*/
/* Creation loop — four steps plus the feedback return line. */
.im-loop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 5vw, 64px); }
/* Outlined like the bar above instead of a grey fill (same hairline as .im-flow). */
.im-step { padding: 28px; border: 1px solid #e9e9e9; border-radius: 14px; background: #fff; }
.im-step .im-card-number { position: static; display: block; }
.im-step small { display: block; margin-top: 22px; color: var(--orange); font-size: 12px; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; }
.im-step h3 { margin: 10px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.im-step p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.im-loop-return { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; width: fit-content; margin-top: 20px; padding: 16px 26px; border: 1px solid rgba(23, 23, 23, .14); border-radius: 999px; }
.im-loop-return span { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.im-loop-return svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Next product link */
/* unused — the "You may also want" card was removed by request; restore together with the JS template
.im-next { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 20px; padding: 30px 32px; border-radius: 14px; background: rgba(0, 0, 0, .04); transition: background-color .2s ease; }
.im-next:hover { background: rgba(0, 0, 0, .07); }
.im-next small { display: block; color: #737373; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.im-next strong { display: block; margin-top: 9px; font-size: 22px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.im-next p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.im-next-arrow { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: rgba(23, 23, 23, .07); }
.im-next-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
*/
/* FAQ in the Why Mr. AI reading style */
/* unused — the FAQ now uses the homepage `.faq-section` block instead.
.im-faq-list { width: min(880px, 100%); margin: clamp(48px, 5vw, 64px) auto 0; }
.im-faq-list details { border-bottom: 1px solid rgba(23, 23, 23, .16); }
.im-faq-list summary { position: relative; padding: 30px 44px 30px 0; list-style: none; font-size: 18px; font-weight: 500; letter-spacing: -.015em; line-height: 1.45; cursor: pointer; transition: color .18s ease; }
.im-faq-list summary::-webkit-details-marker { display: none; }
.im-faq-list summary:hover { color: var(--orange); }
.im-faq-list summary::after { position: absolute; top: 28px; right: 2px; color: rgba(23, 23, 23, .28); content: "+"; font-size: 26px; font-weight: 300; line-height: 1; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.im-faq-list details[open] summary::after { transform: rotate(45deg); }
.im-faq-list details p { max-width: 760px; margin: -6px 0 0; padding: 0 40px 28px 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
*/
/* Closing call to action — the Image page now uses the shared `.contact-section`
banner (same markup and styles as the Work module, which is the Why Mr. AI
banner copied verbatim). The module-specific rules are retired rather than
deleted, so a rollback is one uncomment away.
.im-cta { padding: clamp(60px, 6vw, 84px) 0 clamp(96px, 9vw, 132px); }
.im-cta-surface { position: relative; overflow: hidden; padding: clamp(56px, 6vw, 84px) clamp(28px, 5vw, 64px); border-radius: 16px; background: radial-gradient(120% 130% at 50% -10%, rgba(255, 116, 23, .22), rgba(255, 116, 23, 0) 62%), #141414; color: #fff; text-align: center; }
.im-cta-surface .eyebrow { justify-content: center; color: #ff7417; }
.im-cta-surface h2 { max-width: 900px; margin: 26px auto 0; font-size: clamp(38px, 3.4vw, 52px); font-weight: 500; letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; }
.im-cta-surface > p { max-width: 720px; margin: 20px auto 0; color: rgba(255, 255, 255, .78); font-size: 17.5px; line-height: 1.62; }
.im-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.im-prompts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.im-prompts span { padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: rgba(255, 255, 255, .82); font-size: 13px; }
.im-cta-note { max-width: 680px; margin: 22px auto 0; color: rgba(255, 255, 255, .62); font-size: 14.5px; line-height: 1.65; }
*/
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; }
}
/* Interactive hero panels */
.demo-surface { position: relative; min-height: 460px; overflow: hidden; border-radius: 22px; background: #1b1b1a; color: #fff; }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.75); font-size: 12px; }
.demo-toolbar .dots { display: flex; gap: 5px; }
.demo-toolbar .dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #6d6d69; }
.demo-toolbar .state { display: inline-flex; align-items: center; gap: 7px; color: #e5e5e1; }
.demo-toolbar .state::before { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); content: ""; }
.demo-body { padding: 23px; }
.demo-caption { color: rgba(255,255,255,.58); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.demo-title { margin: 8px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }
.soft-card { border: 1px solid rgba(255,255,255,.13); border-radius: 14px; background: rgba(255,255,255,.07); }
.chip { display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: 999px; padding: 6px 9px; color: rgba(255,255,255,.8); font-size: 11px; line-height: 1; }
/* Office */
.office-panel { padding: 21px; }
.office-question { margin: 19px 0 15px; padding: 14px 15px; border-radius: 14px; background: #fff; color: #181818; font-size: 15px; line-height: 1.45; }
.office-answer { padding: 17px; }
.office-answer small { color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.office-answer strong { display: block; margin-top: 6px; font-size: 15px; line-height: 1.35; }
.office-checklist { display: grid; gap: 9px; margin-top: 15px; }
.office-checklist div { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.76); font-size: 12px; }
.office-checklist i { display: block; width: 7px; height: 7px; border: 1px solid var(--orange); border-radius: 50%; }
.office-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.office-tabs button { padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: transparent; color: rgba(255,255,255,.72); font-size: 11px; }
.office-tabs button[aria-selected="true"] { border-color: var(--orange); background: var(--orange); color: #171717; }
/* Automation */
.automation-board { padding: 20px; }
.trigger-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 22px 0; }
.trigger-grid button { min-height: 68px; padding: 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: transparent; color: rgba(255,255,255,.7); text-align: left; font-size: 11px; line-height: 1.35; }
.trigger-grid button[aria-pressed="true"] { border-color: var(--orange); background: rgba(255,104,24,.17); color: #fff; }
.trigger-grid span { display: block; margin-bottom: 5px; color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.automation-chain { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; align-items: center; }
.automation-chain .node { min-height: 86px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.08); }
.automation-chain .node small { display: block; color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.automation-chain .node strong { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; line-height: 1.3; }
.automation-chain .arrow { color: var(--orange); text-align: center; }
.automation-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 19px; color: rgba(255,255,255,.7); font-size: 11px; }
.automation-footer button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 99px; background: #fff; color: #1b1b1b; font-size: 11px; font-weight: 700; }
/* Website */
.website-panel { padding: 20px; background: #e9e8e4; color: #1b1b1a; }
.website-panel .demo-toolbar { margin: -20px -20px 20px; border-color: rgba(0,0,0,.1); color: #767672; }
.website-panel .demo-toolbar .state { color: #4c4c48; }
.website-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #dbd9d4; }
.website-tabs button { flex: 1; min-height: 31px; border: 0; border-radius: 7px; background: transparent; color: #65655f; font-size: 11px; font-weight: 600; }
.website-tabs button[aria-selected="true"] { background: #fff; color: #151515; }
.site-preview { min-height: 323px; margin-top: 17px; padding: 17px; border-radius: 14px; background: #fff; }
.site-preview .preview-nav { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; }
.site-preview .preview-nav span:last-child { color: #787873; font-weight: 500; }
.site-preview .preview-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; align-items: end; margin-top: 40px; }
.site-preview h3 { margin: 0; font-size: 27px; font-weight: 400; letter-spacing: -.06em; line-height: .95; }
.site-preview p { margin: 12px 0 0; color: #72726e; font-size: 11px; line-height: 1.45; }
.preview-art { height: 158px; border-radius: 11px; background: #ff6818; }
.site-preview .preview-button { display: inline-flex; margin-top: 17px; padding: 8px 12px; border-radius: 99px; background: #181818; color: #fff; font-size: 10px; }
/* Image */
.image-panel { padding: 20px; background: #252320; }
.image-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 13px; padding: 11px 13px; border-radius: 11px; background: #fff; color: #1a1a19; font-size: 12px; }
.image-control button { flex: 0 0 auto; border: 0; background: none; color: var(--orange); font-size: 11px; font-weight: 700; }
.image-gallery { display: grid; grid-template-columns: 1.1fr .9fr; gap: 12px; }
.image-canvas { position: relative; min-height: 286px; overflow: hidden; border-radius: 14px; background: #eb8d4a; }
.image-canvas::before, .image-canvas::after { position: absolute; border-radius: 999px; content: ""; filter: blur(1px); }
.image-canvas::before { width: 290px; height: 290px; top: -90px; left: -70px; background: #ffce9a; }
.image-canvas::after { width: 260px; height: 260px; right: -85px; bottom: -100px; background: #452420; }
.image-canvas .frame { position: absolute; inset: 25px; display: grid; place-items: end start; padding: 17px; border: 1px solid rgba(255,255,255,.4); border-radius: 12px; color: #fff; }
.image-canvas .frame span { font-size: 24px; font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.image-choices { display: grid; gap: 12px; }
.image-style { padding: 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.07); color: #fff; text-align: left; }
.image-style[aria-pressed="true"] { border-color: var(--orange); }
.image-style i { display: block; height: 50px; margin-bottom: 10px; border-radius: 7px; background: #d8b391; }
.image-style:nth-child(2) i { background: #cec7bd; }
.image-style:nth-child(3) i { background: #7c4b3a; }
.image-style strong { font-size: 11px; font-weight: 600; }
/* Video */
.video-panel { padding: 20px; background: #111; }
.video-screen { position: relative; min-height: 275px; overflow: hidden; border-radius: 14px; background: #554230; }
.video-screen::before { position: absolute; inset: 0; background: rgba(0,0,0,.22); content: ""; }
.video-screen .shot-a, .video-screen .shot-b { position: absolute; border-radius: 999px; background: #e7b16e; }
.video-screen .shot-a { width: 230px; height: 230px; top: -95px; right: 32px; }
.video-screen .shot-b { width: 190px; height: 190px; bottom: -90px; left: 80px; background: #92603e; }
.play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; width: 54px; height: 54px; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #111; transform: translate(-50%, -50%); }
.play::after { margin-left: 3px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid currentColor; content: ""; }
.play.is-playing::after { width: 11px; height: 15px; margin: 0; border: 0; border-right: 4px solid currentColor; border-left: 4px solid currentColor; }
.video-screen .timecode { position: absolute; z-index: 1; right: 14px; bottom: 12px; color: #fff; font-size: 10px; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.timeline button { height: 41px; border: 0; border-radius: 6px; background: #7e523a; }
.timeline button:nth-child(2n) { background: #b2744e; }
.timeline button[aria-pressed="true"] { outline: 2px solid var(--orange); outline-offset: 2px; }
.video-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.video-tools button { padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: none; color: rgba(255,255,255,.72); font-size: 11px; }
/* Document */
.document-panel { padding: 20px; background: #efefec; color: #171717; }
.document-panel .demo-toolbar { margin: -20px -20px 20px; border-color: rgba(0,0,0,.1); color: #73736f; }
.document-workspace { display: grid; grid-template-columns: 132px 1fr; gap: 13px; }
.source-list { display: grid; align-content: start; gap: 8px; }
.source-list button { padding: 10px; border: 1px solid #d9d9d4; border-radius: 9px; background: #fff; color: #676762; text-align: left; font-size: 10px; }
.source-list button[aria-pressed="true"] { border-color: var(--orange); color: #191919; }
.source-list button strong { display: block; color: #222; font-size: 11px; }
.document-sheet { min-height: 317px; padding: 25px; border-radius: 13px; background: #fff; }
.document-sheet small { color: var(--orange); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.document-sheet h3 { margin: 15px 0 16px; font-size: 27px; font-weight: 400; letter-spacing: -.06em; line-height: .95; }
.document-sheet p { max-width: 340px; margin: 0; color: #777772; font-size: 11px; line-height: 1.55; }
.document-lines { display: grid; gap: 8px; margin-top: 22px; }
.document-lines i { display: block; height: 6px; border-radius: 9px; background: #e6e6e2; }
.document-lines i:nth-child(2) { width: 72%; }
.document-lines i:nth-child(3) { width: 84%; }
/* Shared lower-page composition */
.proof-band { padding: 56px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--soft); }
.proof-band .shell { display: grid; grid-template-columns: 290px 1fr; gap: 48px; align-items: center; }
.proof-band h2 { margin: 0; font-size: 17px; font-weight: 400; letter-spacing: -.035em; line-height: 1.25; }
.proof-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.proof-list span { padding: 10px 13px; border: 1px solid #dfdfda; border-radius: 999px; background: #fff; font-size: 13px; }
.section { padding: 148px 0; }
.section.alt { background: var(--soft); }
.section-heading { max-width: 800px; }
.section-heading h2 { margin: 21px 0 0; font-size: clamp(40px, 4vw, 56px); font-weight: 400; letter-spacing: -.065em; line-height: 1.03; }
.section-heading > p:last-child { max-width: 610px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 72px; }
.capability-card { min-height: 280px; padding: 24px; border-radius: 16px; background: #fff; }
.capability-card .number { color: #c4c4c1; font-size: 29px; font-weight: 400; letter-spacing: -.05em; }
.capability-card h3 { margin: 80px 0 0; font-size: 21px; font-weight: 400; letter-spacing: -.04em; line-height: 1.2; }
.capability-card p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.method-layout { display: grid; grid-template-columns: minmax(310px,.9fr) minmax(0,1.1fr); gap: clamp(50px,9vw,180px); align-items: start; }
.method-layout .section-heading h2 { max-width: 540px; }
.method-list { display: grid; }
.method-item { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.method-item:first-child { border-top: 1px solid var(--line); }
.method-item span { color: #b9b9b5; font-size: 22px; font-weight: 400; letter-spacing: -.04em; }
.method-item h3 { margin: 0; font-size: 19px; font-weight: 400; letter-spacing: -.035em; }
.method-item p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.faq { display: grid; grid-template-columns: minmax(300px,.75fr) minmax(0,1.25fr); gap: clamp(46px, 9vw, 170px); }
.faq .section-heading h2 { font-size: clamp(38px, 3.6vw, 52px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 22px 38px 22px 0; list-style: none; font-size: 17px; font-weight: 400; line-height: 1.35; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 1px; top: 21px; color: var(--orange); content: "+"; font-size: 23px; font-weight: 300; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 630px; margin: -4px 0 0; padding: 0 30px 23px 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.contact-block { padding: 112px 0; }
.contact-surface { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; padding: clamp(35px,5vw,72px); border-radius: 22px; background: var(--ink); color: #fff; }
.contact-surface .eyebrow { color: var(--orange); }
.contact-surface h2 { max-width: 780px; margin: 17px 0 0; font-size: clamp(39px,4.2vw,60px); font-weight: 400; letter-spacing: -.065em; line-height: 1.02; }
.contact-surface p { max-width: 620px; margin: 18px 0 0; color: rgba(255,255,255,.66); font-size: 16px; line-height: 1.55; }
.contact-surface .button { flex: 0 0 auto; background: #fff; color: #191919; border-color: #fff; }
.site-footer { padding: 45px 0 52px; border-top: 1px solid var(--line); }
.site-footer .shell { display: flex; justify-content: space-between; gap: 28px; color: #777772; font-size: 13px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.site-footer a:hover { color: var(--orange); }
@media (max-width: 1180px) {
:root { --gutter: 36px; }
.site-header { grid-template-columns: 160px minmax(0,1fr) auto; }
.desktop-nav { gap: 19px; }
.desktop-nav > a, .products-toggle { font-size: 13px; }
.product-hero-grid { grid-template-columns: minmax(0,.95fr) minmax(410px,1.05fr); gap: 46px; }
.product-hero h1 { font-size: 61px; }
.hero-points { margin-top: 39px; }
.capability-grid { grid-template-columns: repeat(3,1fr); }
.auto-grid--four { grid-template-columns: repeat(2, minmax(0,1fr)); }
.auto-pathway-layout { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: 48px; }
}
@media (max-width: 920px) {
:root { --gutter: 28px; }
.site-header { grid-template-columns: 1fr auto; min-height: 68px; padding-inline: var(--gutter); }
.desktop-nav, .header-actions { display: none; }
.menu-button { display: grid; width: 39px; height: 39px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; }
.menu-button span, .menu-button::before, .menu-button::after { display: block; width: 15px; height: 1.5px; background: #1b1b1b; content: ""; transition: transform .2s ease, opacity .2s ease; }
.menu-button span { margin: 3px 0; }
.site-header.is-open .menu-button::before { transform: translateY(4.5px) rotate(45deg); }
.site-header.is-open .menu-button span { opacity: 0; }
.site-header.is-open .menu-button::after { transform: translateY(-4.5px) rotate(-45deg); }
.mobile-nav { position: absolute; z-index: -1; top: 67px; left: 0; right: 0; display: grid; padding: 22px var(--gutter) 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.99); box-shadow: 0 18px 30px rgba(0,0,0,.07); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease; }
.site-header.is-open .mobile-nav { opacity: 1; pointer-events: auto; transform: none; }
.mobile-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.mobile-nav .mobile-products { display: grid; gap: 0; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.mobile-nav .mobile-products a { padding: 8px 0; border: 0; color: var(--muted); font-size: 14px; }
.mobile-nav .mobile-actions { display: flex; gap: 10px; padding-top: 18px; }
.mobile-nav .mobile-actions a { flex: 1; justify-content: center; border: 1px solid var(--line); border-radius: 999px; text-align: center; }
.product-hero { padding: 77px 0; }
.product-hero-grid { grid-template-columns: 1fr; min-height: auto; }
.product-hero h1 { max-width: 720px; font-size: clamp(51px,8vw,72px); }
.fde-hero { padding: 200px 0 80px; } /* 80 (header ≤900px) + 120 */
.fde-hero-grid { grid-template-columns: 1fr; gap: 54px; }
.convo-card { max-width: 620px; }
.demo-surface { max-width: 680px; }
.proof-band .shell, .method-layout, .faq { grid-template-columns: 1fr; gap: 43px; }
.proof-list { justify-content: flex-start; }
.capability-grid { grid-template-columns: repeat(2,1fr); }
.contact-surface { grid-template-columns: 1fr; align-items: start; }
.auto-grid--three { grid-template-columns: 1fr; }
.auto-compare-head, .auto-compare-row { column-gap: 32px; }
.auto-compare-head p, .auto-compare-row p { min-height: 56px; }
.auto-compare-row p { font-size: 14.5px; }
.auto-compare-row p { padding: 17px 0; }
.auto-compare-row .auto-compare-label { letter-spacing: 0; }
.auto-card { min-height: 0; }
.auto-grid--four .auto-card:has(> small) small { height: auto; }
.auto-section--pathway { padding-block: 80px; }
.auto-pathway-layout { grid-template-columns: 1fr; gap: 46px; }
.auto-section--pathway .auto-heading { max-width: 520px; }
.auto-section--pathway .auto-heading h2 { font-size: 42px; }
.auto-step { min-height: 0; }
}
/* In this 20px-wide band the shell header is still 64px tall, so keep the 64+120 sum. */
@media (min-width: 901px) and (max-width: 920px) {
.fde-hero { padding: 184px 0 80px; }
}
/* Three columns stop fitting — drop the labels onto their own line and keep the
two products side by side underneath. */
@media (max-width: 760px) {
.auto-compare-head, .auto-compare-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auto-compare-head .auto-compare-blank { display: none; }
.auto-compare-row .auto-compare-label { grid-column: 1 / -1; min-height: 0; padding: 17px 0 3px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.auto-compare-row p { min-height: 0; padding: 5px 0 18px; }
/* Stacked: the label spans the row, so the product columns become the two
outer ends — inset them the same way the three-column layout does. */
.auto-compare-head > p:nth-child(2), .auto-compare-row > p:nth-child(2) { padding-left: clamp(14px, 1.7vw, 24px); }
}
@media (max-width: 620px) {
:root { --gutter: 20px; }
.product-hero { padding: 57px 0 68px; }
.product-hero h1 { margin-top: 19px; font-size: 48px; }
.product-hero .intro { font-size: 16px; }
.fde-hero { padding: 200px 0 80px; } /* 80 (header) + 120 */
.fde-hero h1 { font-size: 44px; }
.fde-hero-lead { font-size: 16px; }
.convo-card { max-width: 560px; padding: 22px 18px; }
.convo-panel { padding: 18px 16px; }
.convo-bubble { max-width: 90%; font-size: 14px; }
.auto-grid--four { grid-template-columns: 1fr; }
.auto-card { padding: 24px; }
.auto-grid--method .auto-card { padding: 24px; }
.auto-compare-head, .auto-compare-row { column-gap: 18px; }
.auto-compare-head p { min-height: 46px; font-size: 14px; letter-spacing: .07em; }
.auto-compare-row p { min-height: 0; padding: 18px 0; font-size: 13.5px; line-height: 1.45; }
.hero-points { grid-template-columns: 1fr; gap: 13px; margin-top: 34px; }
.hero-points div { display: grid; grid-template-columns: 130px 1fr; gap: 11px; align-items: center; padding-top: 10px; }
.hero-points strong { margin: 0; }
.hero-actions { margin-top: 29px; }
.button { min-height: 46px; font-size: 13px; }
.demo-surface { min-height: 428px; border-radius: 17px; }
.demo-body, .office-panel, .automation-board, .website-panel, .image-panel, .video-panel, .document-panel { padding: 15px; }
.demo-toolbar { min-height: 51px; padding: 0 15px; }
.office-question { margin-top: 14px; }
.trigger-grid { grid-template-columns: 1fr; margin: 15px 0; }
.trigger-grid button { min-height: 47px; }
.automation-chain { grid-template-columns: 1fr; gap: 7px; }
.automation-chain .arrow { display: none; }
.automation-chain .node { min-height: auto; }
.site-preview { min-height: 295px; margin-top: 12px; padding: 14px; }
.site-preview .preview-hero { grid-template-columns: 1fr; margin-top: 25px; }
.preview-art { display: none; }
.image-gallery { grid-template-columns: 1fr; }
.image-canvas { min-height: 190px; }
.image-choices { grid-template-columns: repeat(3,1fr); }
.image-style { padding: 8px; }
.image-style i { height: 32px; }
.document-workspace { grid-template-columns: 1fr; }
.source-list { grid-template-columns: repeat(3,1fr); }
.document-sheet { min-height: 200px; }
.section { padding: 92px 0; }
.section-heading h2 { font-size: 42px; }
.section-heading > p:last-child { font-size: 16px; }
.proof-band { padding: 39px 0; }
.proof-list span { font-size: 12px; }
.capability-grid { grid-template-columns: 1fr; margin-top: 46px; }
.capability-card { min-height: 230px; }
.capability-card h3 { margin-top: 48px; }
.method-item { grid-template-columns: 39px 1fr; gap: 12px; }
.faq-list summary { font-size: 16px; }
.contact-block { padding: 68px 0; }
.contact-surface { padding: 35px 26px; border-radius: 17px; }
.site-footer .shell { flex-direction: column; }
.site-footer nav { justify-content: flex-start; }
}
/* ==========================================================================
Image product — constellation hero
Centred statement with two clusters of floating visuals either side.
Geometry is derived from the reference artboard (1981 x 1037) and kept in
percentages so the whole composition scales with the viewport.
========================================================================== */
.image-hero {
--ih-accent: var(--orange); /* unused — CTA is now the black house button; set --ih-accent here and restore it on .image-hero__cta .button to go back to orange */
--ih-ink: #14171c;
--ih-copy: #6b7280;
--ih-card-bg: #f0f0f0;
--ih-card-line: #e9e9e9; /* hairline edging every floating visual — photo and cards alike */
--ih-left: 25.24%; /* 500 / 1981 */
--ih-centre: 49.07%; /* 972 / 1981 */
position: relative;
display: flex;
align-items: center;
min-height: clamp(540px, 52.8vw, 1060px); /* 52.8vw lands the hero's bottom edge on the proof-band's at 1996px (~1054px tall, per annotation) */
overflow: hidden;
padding: clamp(104px, 7.6vw, 140px) 0 clamp(58px, 6.2vw, 108px);
background: #fff;
}
.image-hero__stage { display: grid; width: min(1900px, 100%); margin: 0 auto; grid-template-columns: var(--ih-left) var(--ih-centre) calc(100% - var(--ih-left) - var(--ih-centre)); align-items: center; }
/* --- centre column: the statement ------------------------------------- */
.image-hero__centre { position: relative; z-index: 4; padding: 0 clamp(16px, 2vw, 36px); text-align: center; }
.image-hero__centre h1 { max-width: min(15.6em, 100%); margin: 0 auto; color: var(--ih-ink); font-size: clamp(33px, 2.85vw, 57px); font-weight: 400; letter-spacing: -.028em; line-height: .96; text-wrap: balance; }
.image-hero__centre h1 em { color: var(--ih-ink); font-style: normal; }
.image-hero__centre .intro { max-width: 560px; margin: clamp(18px, 1.7vw, 27px) auto 0; color: var(--ih-copy); font-size: clamp(14px, 1.02vw, 17px); line-height: 1.62; text-wrap: pretty; }
.image-hero__cta { display: flex; margin-top: clamp(26px, 2.5vw, 40px); flex-direction: row; align-items: center; gap: 15px; }
/* Inherits the .button house spec (black fill, 999px pill, weight 600, 1px border).
Size deliberately mirrors .why-hero-actions .button below, so both heroes render
a byte-identical button. Change one, change the other. */
.image-hero__cta .button { min-height: 42px; padding-inline: 20px; font-size: 14px; }
.image-hero__cta .button:hover { background: #000; }
/* The link and the three-point strip were removed from the hero by request.
The rules below (and the .image-hero__points overrides in the responsive
blocks) are kept unreferenced so they can be restored by re-adding one line
to imageHero() — see "See how it works" / pointsHTML(product.points). */
.image-hero__link { display: inline-flex; align-items: center; gap: 6px; color: var(--ih-copy); font-size: 13px; transition: color .2s ease; }
.image-hero__link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.image-hero__link:hover { color: var(--ih-ink); }
.image-hero__points { display: grid; max-width: 620px; margin: clamp(34px, 3.4vw, 54px) auto 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); text-align: left; }
.image-hero__points > div { min-width: 0; padding-top: 11px; border-top: 1px solid var(--line); }
.image-hero__points span { display: block; color: var(--ih-ink); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.image-hero__points strong { display: block; margin-top: 5px; color: #3d4045; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
/* --- side columns: the floating evidence ------------------------------ */
.image-hero__left, .image-hero__right { position: relative; z-index: 2; }
.image-hero .ih-photo { position: relative; z-index: 1; display: block; overflow: hidden; margin: 0; border: 1px solid var(--ih-card-line); border-radius: 7px; background: #ececec; }
.image-hero .ih-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-hero__left .ih-photo { width: 67.4%; margin-left: 19%; aspect-ratio: 337 / 494; }
.image-hero__right .ih-photo { width: 60.1%; margin-left: 39.7%; aspect-ratio: 306 / 429; }
.image-hero .ih-card { position: absolute; z-index: 2; display: block; overflow: hidden; border: 1px solid var(--ih-card-line); border-radius: 10px; background-color: var(--ih-card-bg); background-repeat: no-repeat; background-size: 300% auto; aspect-ratio: 1 / 1; }
.image-hero__left .ih-card { width: 28.2%; }
.image-hero__right .ih-card { width: 43.6%; }
.image-hero .ih-card--a { left: 2%; top: 8.1%; }
/* Bag card sits where the reference puts it: its left edge lands on the
photo's right edge (85.8% across), so most of the tile hangs outside the
shot instead of straddling the middle of it. 19% + .858 x 67.4% = 76.8%. */
.image-hero .ih-card--b { left: 76.8%; top: 35.9%; }
.image-hero .ih-card--c { left: 11%; top: 80.2%; }
.image-hero .ih-card--d { left: 0; top: 61.8%; }
.image-hero__arrows { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* --- entrance + draw-in ----------------------------------------------- */
.image-hero .ih-photo, .image-hero .ih-card { animation: ih-rise .85s cubic-bezier(.22,.9,.3,1) backwards; }
.image-hero .ih-photo { animation-delay: .06s; }
.image-hero .ih-card--a { animation-delay: .2s; }
.image-hero .ih-card--b { animation-delay: .3s; }
.image-hero .ih-card--c { animation-delay: .4s; }
.image-hero .ih-card--d { animation-delay: .34s; }
.image-hero__arrows path { stroke-dasharray: 620; stroke-dashoffset: 620; animation: ih-draw .9s cubic-bezier(.33,.9,.3,1) forwards; }
.image-hero__arrows path:nth-of-type(1) { animation-delay: .72s; }
.image-hero__arrows path:nth-of-type(2) { animation-delay: .84s; }
/* Shorter path than its siblings — a 620 dash would finish the draw in ~80ms
and read as a pop. 380 keeps it drawing over the same slice of the .9s. */
.image-hero__arrows path:nth-of-type(3) { animation-delay: .96s; stroke-dasharray: 380; stroke-dashoffset: 380; }
@keyframes ih-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ih-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
.image-hero .ih-card { animation: ih-rise .85s cubic-bezier(.22,.9,.3,1) backwards, ih-float 8.5s ease-in-out infinite; }
.image-hero .ih-card--a { animation-delay: .2s, 1.5s; }
.image-hero .ih-card--b { animation-delay: .3s, 2.4s; }
.image-hero .ih-card--c { animation-delay: .4s, 3.3s; }
.image-hero .ih-card--d { animation-delay: .34s, 2s; }
@keyframes ih-float { 0%, 100% { translate: 0 -4px; } 50% { translate: 0 4px; } }
}
@media (prefers-reduced-motion: reduce) {
.image-hero__arrows path { stroke-dashoffset: 0; animation: none; }
}
/* --- the retained interactive studio, shown straight after the hero ---- */
.image-showcase { padding: 0 0 clamp(60px, 7vw, 118px); background: #fff; }
.image-showcase .shell { max-width: 1120px; }
.image-showcase .demo-surface { min-height: 520px; }
@media (max-width: 1280px) {
.image-hero__centre h1 { letter-spacing: -.03em; }
.image-hero__points { max-width: 540px; }
}
@media (max-width: 1024px) {
.image-hero { min-height: 0; padding: 108px 0 76px; }
.image-hero__stage { display: flex; width: min(760px, 100%); flex-direction: column; align-items: center; gap: clamp(42px, 6vw, 66px); }
.image-hero__centre { order: 1; width: 100%; padding: 0 var(--gutter); }
.image-hero__centre h1 { max-width: 720px; font-size: clamp(36px, 6.4vw, 54px); }
.image-hero__left { order: 2; }
.image-hero__right { order: 3; }
.image-hero__left, .image-hero__right { width: min(430px, 84%); }
.image-showcase .demo-surface { min-height: 470px; }
}
@media (max-width: 620px) {
.image-hero { padding: 96px 0 58px; }
.image-hero__stage { gap: 46px; }
.image-hero__centre h1 { font-size: clamp(32px, 9vw, 42px); }
.image-hero__points { grid-template-columns: 1fr; gap: 12px; max-width: 100%; margin-top: 34px; }
.image-hero__points > div { display: grid; grid-template-columns: 132px 1fr; gap: 11px; align-items: baseline; padding-top: 9px; }
.image-hero__points strong { margin-top: 0; }
.image-hero__left, .image-hero__right { width: min(320px, 88%); }
.image-hero .ih-card { border-radius: 8px; }
.image-showcase .demo-surface { min-height: 430px; }
}
/* Office first screen — copied from the Why Mr. AI page hero.
Centred editorial statement above a full-bleed product visual.
The 64px top offset clears the fixed shared shell header. */
.why-hero { position: relative; overflow: hidden; padding: 64px 0 0; background: #fff; }
.why-hero-grid { width: min(calc(100% - 48px), 1280px); min-height: 980px; margin-inline: auto; padding: 68px 0 96px; display: flex; flex-direction: column; align-items: center; }
.why-hero-copy { width: 100%; max-width: 1160px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.why-hero .eyebrow { margin: 0; color: #737373; font-size: 14px; font-weight: 450; letter-spacing: 0; text-transform: none; }
.why-hero .eyebrow::before { display: none; }
.why-hero h1 { max-width: 1160px; margin: 17px 0 0; color: #1a1a1a; font-size: 56px; font-weight: 400; line-height: 1.06; letter-spacing: -.052em; text-align: center; text-wrap: balance; }
.why-hero h1 span { color: #1a1a1a; }
.why-hero-lead { max-width: 820px; margin: 25px 0 0; color: #4d4d4d; font-size: 16px; line-height: 1.62; text-align: center; text-wrap: balance; }
.why-hero-actions { margin-top: 25px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.why-hero-actions .button { min-height: 42px; padding-inline: 20px; border-radius: 999px; font-size: 14px; }
/* Work page hero only (`:not(.hero)` keeps the Why Mr. AI home hero untouched).
The visual carries a 70px-blur shadow offset 30px down, so it keeps fading
until ~100px below the image. This container clips (overflow: hidden, needed
for the 100vw full-bleed), so it must keep at least that much bottom padding,
otherwise the shadow tail is sliced into a visible hard edge. Matches the
110px used by the Why Mr. AI home hero. */
.why-hero:not(.hero) .why-hero-grid { padding-bottom: 0; }
.why-hero-media { position: relative; flex: 0 0 auto; width: 100vw; max-width: none; height: auto; margin-top: 7px; padding: 40px 0 110px; margin-inline: calc(50% - 50vw); overflow: hidden; display: grid; place-items: center; background: #fff; }
.why-hero:not(.hero) .why-hero-media { padding-bottom: 112px; }
.why-creation-demo { position: relative; z-index: 1; width: min(calc(100% - 120px), 1320px); height: auto; overflow: hidden; display: block; border: 1px solid rgba(23, 23, 23, .08); border-radius: 16px; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .12), 0 10px 24px rgba(0, 0, 0, .06); }
/* Work 页首屏大图对齐内容区（1280），不比上方文案更宽 */
.why-hero:not(.hero) .why-creation-demo { width: min(calc(100vw - 48px), 1280px); }
@media (max-width: 1100px) {
.why-hero-grid { min-height: 900px; padding-top: 60px; }
.why-hero h1 { max-width: 940px; font-size: clamp(46px, 5.4vw, 56px); }
.why-hero-media { height: auto; }
.why-creation-demo { width: calc(100% - 72px); height: auto; }
}
@media (max-width: 820px) {
.why-hero-grid { width: min(100% - 40px, 680px); min-height: 0; padding: 64px 0 80px; }
.why-hero h1 { font-size: clamp(43px, 9vw, 54px); }
.why-hero-lead { font-size: 15px; }
.why-hero-media { height: auto; }
.why-creation-demo { width: calc(100% - 40px); height: auto; }
}
@media (max-width: 520px) {
.why-hero-grid { width: calc(100% - 32px); padding-block: 54px 64px; }
.why-hero h1 { font-size: 42px; }
.why-hero-actions { width: 100%; }
.why-hero-actions .button { width: 100%; }
.why-hero-media { height: auto; }
.why-creation-demo { width: calc(100% - 24px); height: auto; }
}
/* Image use cases: portrait media, plain captions and an edge-to-edge rail. */
.im-tools-section {
--im-tools-inset: max(var(--gutter), calc((100vw - var(--page)) / 2));
--im-tool-width: 320px;
--im-tool-gap: 32px;
--im-tool-radius: 12px;
--im-tool-caption-gap: 20px;
--im-tool-control-size: 48px;
}
.im-tools-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--im-tool-gap); }
.im-tools-header .im-heading { min-width: 0; }
.im-tools-controls { display: flex; flex: 0 0 auto; gap: 12px; padding-bottom: 4px; }
.im-tools-arrow { display: grid; place-items: center; width: var(--im-tool-control-size); height: var(--im-tool-control-size); padding: 0; border: 0; border-radius: 50%; background: var(--line); color: var(--ink); transition: background-color .18s ease, transform .14s ease; }
.im-tools-arrow:hover:not(:disabled) { background: var(--ink); color: #fff; }
.im-tools-arrow:active:not(:disabled) { transform: scale(.97); }
.im-tools-arrow:disabled { cursor: default; background: var(--soft); color: var(--muted); opacity: .55; }
.im-tools-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.im-tools-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.im-tools-viewport { width: 100%; margin-top: 64px; overflow-x: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--im-tools-inset); scrollbar-width: none; cursor: default; touch-action: pan-x pan-y; }
.im-tools-viewport::-webkit-scrollbar { display: none; }
/* Keep native swiping on touch devices; desktop scrolling uses drag and arrows. */
@media (pointer: coarse) { .im-tools-viewport { overflow-x: auto; } }
.im-tools-viewport:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.im-tools-viewport.is-dragging .im-tool-media { cursor: grabbing; }
.im-tools-viewport:is(.is-dragging, .is-animating) { scroll-snap-type: none; }
.im-tools-viewport.is-dragging { user-select: none; }
.im-tools-track { display: flex; gap: var(--im-tool-gap); width: max-content; margin: 0; padding: 0 var(--im-tools-inset) 8px; list-style: none; }
.im-tool-card { flex: 0 0 var(--im-tool-width); width: var(--im-tool-width); scroll-snap-align: start; }
.im-tool-media { width: 100%; aspect-ratio: 320 / 432; margin: 0; overflow: hidden; border-radius: var(--im-tool-radius); background: var(--soft); cursor: grab; }
.im-tool-media img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.im-tool-caption { padding: var(--im-tool-caption-gap) 8px 0; cursor: text; user-select: text; }
.im-tool-caption h3 { margin: 0; color: var(--ink); font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -.025em; }
.im-tool-caption p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
@media (max-width: 640px) {
.im-tools-section { --im-tools-inset: 20px; --im-tool-width: min(280px, calc(100vw - 72px)); --im-tool-gap: 20px; --im-tool-caption-gap: 16px; }
.im-tools-header { align-items: flex-start; flex-direction: column; gap: 24px; }
.im-tools-controls { align-self: flex-end; padding: 0; }
.im-tools-viewport { margin-top: 32px; }
.im-tool-caption h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.im-tools-arrow { transition: none; }
}
/* AI Image module — responsive */
.im-heading--center { margin-inline: auto; text-align: center; }
.im-heading--center .eyebrow { justify-content: center; }
.im-heading--center > p { margin-inline: auto; }
@media (max-width: 1180px) {
.im-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.im-loop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
.im-section { padding: 64px 0; }
.im-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-plain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.im-flow { grid-template-columns: minmax(0, 1fr); }
.im-flow-item + .im-flow-item { border-left: 0; border-top: 1px solid #e9e9e9; }
.im-flow-arrow { justify-self: end; }
}
@media (max-width: 620px) {
.im-section { padding: 56px 0; }
.im-heading h2 { font-size: 32px; }
.im-grid--four, .im-grid--five, .im-loop-grid { grid-template-columns: minmax(0, 1fr); }
.im-plain-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.im-card, .im-step { min-height: 0; padding: 24px; }
.im-flow-item { padding: 22px; }
/* unused — see the .im-next block above
.im-next { grid-template-columns: minmax(0, 1fr) 40px; padding: 26px 24px; }
.im-next-arrow { width: 40px; height: 40px; }
*/
/* unused — see the .im-faq-list block above
.im-faq-list summary { padding: 24px 40px 24px 0; font-size: 17px; }
.im-faq-list summary::after { top: 22px; }
*/
.im-loop-return { width: 100%; }
}
/* --- Video module ------------------------------------------------------
Same system as the Why Mr. AI page and the AI Image module: oversized
light heading, neutral low-contrast surfaces, ghost numerals, one orange
accent, everything inside the shell. Content follows the AI Video module
of the product prototype; no layout is taken from it. */
/* Video hero — full-bleed media with left-aligned copy on top.
The media container uses the same max-width as the rest of the page. */
.vd-hero { padding: 106px 0 0; background: #fff; }
.vd-hero-inner { position: relative; width: min(calc(100% - 48px), 1280px); min-height: clamp(460px, 70vh, 640px); margin-inline: auto; border-radius: 20px; overflow: hidden; }
.vd-hero-media { position: absolute; inset: 0; z-index: 0; background: #6b7d8d; }
.vd-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .05) 100%); }
.vd-hero-video { width: 100%; height: 100%; object-fit: cover; }
.vd-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: clamp(460px, 70vh, 640px); padding: clamp(40px, 6vw, 72px); max-width: 720px; }
.vd-hero h1 { margin: 0; color: #fff; font-size: clamp(34px, 4.2vw, 56px); font-weight: 400; line-height: 1.06; letter-spacing: -.05em; text-wrap: balance; }
.vd-hero h1 em { color: #fff; font-style: normal; }
.vd-hero-lead { max-width: 560px; margin: 20px 0 0; color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.vd-hero-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 14px 24px; border-radius: 999px; background: #fff; color: #1a1a1a; font-size: 15px; font-weight: 500; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.vd-hero-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.vd-hero-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Mode switcher now sits below the hero media. */
.vd-mode-bar { padding: 32px 0 0; background: #fff; }
.vd-mode-bar .shell { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(calc(100% - 48px), 1280px); margin-inline: auto; }
/* The two-way mode switch. Selected tab is the only dark surface here. */
.vd-modes { display: inline-flex; gap: 5px; padding: 5px; border: 1px solid #e9e9e9; border-radius: 999px; background: #fff; }
.vd-mode-bar .vd-modes { margin-top: 0; }
.vd-tab { min-height: 38px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: #6b6b6b; font-size: 14px; font-weight: 400; line-height: 1; transition: background-color .2s ease, color .2s ease; }
.vd-tab:hover { color: #1a1a1a; }
.vd-tab[aria-selected="true"] { background: #1a1a1a; color: #fff; }
.vd-tab:focus-visible { outline: 2px solid #ff7417; outline-offset: 2px; }
.vd-guidance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; }
.vd-mode-bar .vd-guidance { margin-top: 0; }
.vd-guidance-card { padding: 24px 26px; border-radius: 14px; background: rgba(0, 0, 0, .04); }
.vd-guidance-icon { display: flex; align-items: center; height: 24px; margin-bottom: 14px; color: #737373; }
.vd-guidance-icon svg { height: 100%; width: auto; }
.vd-guidance-card small { display: block; color: #737373; font-size: 12px; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; }
.vd-guidance-card strong { display: block; margin-top: 11px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.vd-guidance-card span { display: block; margin-top: 9px; color: var(--muted); font-size: 15px; line-height: 1.6; }
/* Studio preview — one neutral panel, swapped with the selected mode. */
.vd-panel[hidden] { display: none; }
.vd-studio-slot { margin-top: clamp(36px, 4vw, 52px); }
.vd-studio { overflow: hidden; border: 1px solid #e9e9e9; border-radius: 16px; background: #fff; }
.vd-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 28px; border-bottom: 1px solid #efefef; }
.vd-studio-head small { display: block; color: #8a8a8a; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vd-studio-head strong { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.vd-studio-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .04); color: #4d4d4d; font-size: 13px; }
.vd-studio-status i { width: 7px; height: 7px; border-radius: 50%; background: #ff7417; }
.vd-studio-body { padding: 26px 28px 28px; }
.vd-script { display: grid; gap: 10px; }
.vd-script-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 15px 18px; border: 1px solid #efefef; border-radius: 12px; background: #fafafa; }
.vd-script-row.is-active { border-color: rgba(255, 116, 23, .4); background: rgba(255, 116, 23, .05); }
.vd-script-row > b { color: #c9c9c9; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.vd-script-copy h3 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.012em; line-height: 1.35; }
.vd-script-copy p { margin: 5px 0 0; color: #8a8a8a; font-size: 14px; line-height: 1.55; }
.vd-script-row > em { font-style: normal; color: #4d4d4d; font-size: 13px; font-variant-numeric: tabular-nums; }
.vd-tracks { display: grid; gap: 9px; margin-top: 22px; }
.vd-track { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 14px; }
.vd-track > small { color: #8a8a8a; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vd-track-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vd-track-rail i { height: 26px; border-radius: 6px; background: #ececec; }
.vd-track:nth-child(2) .vd-track-rail i { background: #f2e2d5; }
.vd-track:nth-child(3) .vd-track-rail i { background: #dee6ea; }
.vd-source { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 15px 18px; border: 1px solid #efefef; border-radius: 12px; background: #fafafa; }
.vd-source-label { display: inline-flex; align-items: center; gap: 10px; color: #4d4d4d; font-size: 14px; font-weight: 500; }
.vd-source-label b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #1a1a1a; color: #fff; font-size: 8px; }
.vd-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-marks span { padding: 7px 13px; border: 1px solid #e3e3e3; border-radius: 999px; background: #fff; color: #6b6b6b; font-size: 13px; }
.vd-marks span.is-hot { border-color: rgba(255, 116, 23, .35); background: rgba(255, 116, 23, .07); color: #a8500d; }
.vd-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.vd-job { position: relative; padding: 20px 22px; border: 1px solid #efefef; border-radius: 12px; background: #fff; }
.vd-job > b { position: absolute; top: 16px; right: 18px; color: #d2d2d2; font-size: 22px; font-weight: 400; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.vd-job small { display: block; color: #8a8a8a; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vd-job strong { display: block; margin-top: 20px; font-size: 16px; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.vd-studio-link { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; margin-top: 18px; padding: 0 20px; border: 1px solid #1a1a1a; border-radius: 999px; background: #fff; color: #1a1a1a; font-size: 14px; font-weight: 400; transition: background-color .2s ease, color .2s ease; }
.vd-studio-link:hover { background: #1a1a1a; color: #fff; }
.vd-studio-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vd-section { padding: 80px 0; }
#video-smart-edit, #video-canvas-process { padding: 160px 0 80px; }
.vd-heading { max-width: 900px; }
.vd-heading .eyebrow { display: block; margin: 0 0 22px; color: #ff7417; font-size: 13px; font-weight: 400; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; text-align: inherit; }
.vd-heading .eyebrow::before { display: none; }
.vd-heading h2 { max-width: 860px; margin: 0 0 20px; color: #111113; font-size: 42px; font-weight: 400; letter-spacing: -.052em; line-height: 1.08; text-wrap: balance; }
.vd-heading > p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.vd-grid { display: grid; gap: 20px; margin-top: clamp(48px, 5vw, 64px); }
.vd-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vd-card { position: relative; min-height: 208px; padding: 28px; border-radius: 14px; background: rgba(0, 0, 0, .04); }
.vd-card-icon { display: flex; align-items: center; height: 24px; margin-bottom: 14px; color: #737373; }
.vd-card-icon svg { height: 100%; width: auto; }
.vd-card-icon--larger { height: 28px; }
.vd-num { display: block; color: #d2d2d2; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.vd-card h3 { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -.02em; line-height: 1.25; }
.vd-card p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.vd-note { margin-top: 22px; border-top: 1px solid rgba(23, 23, 23, .13); }
.vd-note summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; color: #3b3b3b; font-size: 15px; font-weight: 500; }
.vd-note summary::-webkit-details-marker { display: none; }
.vd-note summary::after { flex: 0 0 auto; color: #8a8a8a; content: "+"; font-size: 20px; font-weight: 300; line-height: 1; transition: transform .25s ease; }
.vd-note[open] summary::after { transform: rotate(45deg); }
.vd-note p { max-width: 760px; margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.vd-steps { display: grid; gap: 20px; margin-top: clamp(48px, 5vw, 64px); }
.vd-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vd-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vd-step { position: relative; padding: 28px; border: 1px solid #e9e9e9; border-radius: 14px; background: #fff; }
.vd-step .vd-num { position: static; display: block; margin-bottom: 16px; }
.vd-step small { display: block; margin-top: 22px; color: #ff7417; font-size: 12px; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; }
.vd-step h3 { margin: 10px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.vd-step p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.vd-loop-return { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; width: fit-content; margin-top: 20px; padding: 16px 26px; border: 1px solid rgba(23, 23, 23, .14); border-radius: 999px; }
.vd-loop-return span { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.vd-loop-return strong { font-size: 14px; font-weight: 400; color: var(--muted); }
.vd-loop-return svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: #ff7417; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#video-edit-process { padding: 100px 0; }
/* The process sections provide the gap above the closing banner. */
#vd-content-canvas + .contact-section { padding-top: 0; }
@media (max-width: 1180px) {
.vd-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vd-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
.vd-section { padding: 64px 0; }
#video-smart-edit, #video-canvas-process { padding: 64px 0; }
.vd-hero { padding-top: 77px; }
.vd-hero-inner { min-height: clamp(420px, 62vh, 560px); border-radius: 16px; }
.vd-hero-copy { min-height: clamp(420px, 62vh, 560px); padding: 36px; }
.vd-hero h1 { font-size: clamp(30px, 5vw, 44px); }
.vd-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vd-steps--three { grid-template-columns: minmax(0, 1fr); }
.vd-jobs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
.vd-section { padding: 56px 0; }
#video-smart-edit, #video-canvas-process { padding: 56px 0; }
.vd-heading h2 { font-size: 32px; }
.vd-hero-inner { width: calc(100% - 40px); min-height: 520px; border-radius: 14px; }
.vd-hero-copy { min-height: 520px; padding: 28px 24px; justify-content: center; }
.vd-hero-lead { font-size: 15px; }
.vd-hero-cta { margin-top: 26px; }
.vd-mode-bar { padding-top: 24px; }
.vd-mode-bar .shell { gap: 18px; }
.vd-modes { flex-wrap: wrap; }
.vd-guidance { grid-template-columns: minmax(0, 1fr); }
.vd-grid--five, .vd-steps--four { grid-template-columns: minmax(0, 1fr); }
.vd-card, .vd-step { min-height: 0; padding: 24px; }
.vd-studio-head { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; }
.vd-studio-body { padding: 20px; }
.vd-source { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.vd-loop-return { width: 100%; }
}
/* AI Documents module — the first screen and everything below it.
Same spec as the Why Mr. AI page and the Image module: neutral #04 cards at
a 14px radius, 400-weight headings with tight tracking, muted body copy, one
orange accent. Sections carry no margin — the 80px facing paddings make the
160px rhythm. */
/* The Documents first screen reuses the Automation statement hero, so only
the accent on the headline is set here — everything else comes from .fde-hero. */
/* First-screen media slot: one hero image instead of a demo panel. The box
keeps a 4:3 ratio so the layout is settled before the image arrives. */
.dm-hero-fde .dm-hero-media { width: 100%; max-width: 520px; margin-left: auto; }
.dm-hero-media img { display: block; width: 100%; height: auto; border-radius: 18px; }
#document-groups { padding-top: 120px; } /* hero 80 + 120 = 200px below the hero buttons */
.dm-section { padding: 80px 0; }
.dm-heading { max-width: 900px; }
/* Kickers are Medium (500) and dotless. */
.dm-heading .eyebrow { display: block; margin: 0 0 22px; color: #ff7417; font-size: 13px; font-weight: 500; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; text-align: inherit; }
.dm-heading .eyebrow::before { display: none; }
.dm-heading h2 { max-width: 860px; margin: 0 0 20px; color: #111113; font-size: 42px; font-weight: 400; letter-spacing: -.052em; line-height: 1.08; text-wrap: balance; }
.dm-heading > p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.dm-grid { display: grid; gap: 20px; margin-top: clamp(48px, 5vw, 64px); }
.dm-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-card { position: relative; display: flex; flex-direction: column; min-height: 240px; padding: 28px; border-radius: 14px; background: rgba(0, 0, 0, .04); }
.dm-card-icon { width: 28px; height: 28px; fill: none; stroke: #737373; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dm-card-number { position: absolute; top: 22px; right: 26px; color: #d2d2d2; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.dm-card h3 { margin: 26px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.dm-card p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
/* Tags sit on the card floor so a row of uneven cards still lines up. */
.dm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 20px; }
.dm-tags span { padding: 6px 10px; border-radius: 999px; background: rgba(23, 23, 23, .06); color: #6c6c70; font-size: 12px; line-height: 1.3; }
.dm-loop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 5vw, 64px); }
.dm-step { padding: 28px; border: 1px solid #e9e9e9; border-radius: 14px; background: #fff; }
.dm-step .dm-card-number { position: static; display: block; }
.dm-step small { display: block; margin-top: 22px; color: var(--orange); font-size: 12px; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; }
.dm-step h3 { margin: 10px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.dm-step p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.dm-loop-return { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; width: fit-content; margin-top: 20px; padding: 16px 26px; border: 1px solid rgba(23, 23, 23, .14); border-radius: 999px; }
.dm-loop-return span { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.dm-loop-return svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Keep 100px of space from the process section to the closing banner. */
.contact-section.contact-section--flush { padding-top: 0; }
#document-process { padding-bottom: 100px; }
/* AI Documents module — responsive */
@media (max-width: 1180px) {
.dm-loop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
.dm-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
.dm-section { padding: 64px 0; }
}
@media (max-width: 620px) {
.dm-section { padding: 56px 0; }
.dm-heading h2 { font-size: 32px; }
.dm-grid--three, .dm-loop-grid { grid-template-columns: minmax(0, 1fr); }
.dm-card, .dm-step { min-height: 0; padding: 24px; }
.dm-tags { margin-top: 20px; }
.dm-loop-return { width: 100%; }
}
/* --- Office module: business scene + conversation ----------------------
Same system as the Why Mr. AI page: oversized light heading, neutral
low-contrast surfaces, one orange accent, everything inside the shell. */
.work-scene-section { background: var(--soft); }
.work-scene { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 62px); align-items: start; margin-top: clamp(48px, 5vw, 64px); }
.work-scene-kicker { margin: 0; color: var(--orange); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.work-scene-heading { margin: 18px 0 0; font-size: clamp(27px, 2.5vw, 37px); font-weight: 400; letter-spacing: -.04em; line-height: 1.14; text-wrap: balance; }
.work-scene-lead { margin: 15px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.65; }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.work-tags span { padding: 7px 13px; border: 1px solid rgba(23, 23, 23, .12); border-radius: 999px; background: #fff; color: #4a4a4a; font-size: 13px; }
.work-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.work-tabs button { min-height: 40px; padding: 0 16px; border: 1px solid rgba(23, 23, 23, .14); border-radius: 999px; background: #fff; color: #3d3d3d; font-size: 13.5px; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.work-tabs button:hover { border-color: rgba(23, 23, 23, .32); }
.work-tabs button.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.work-note { margin: 22px 0 0; color: #8a8a8a; font-size: 13px; line-height: 1.6; }
.work-chat { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 26px 60px rgba(0, 0, 0, .06); }
.work-chat-canvas { display: grid; gap: 16px; padding: 22px 24px 24px; }
.work-chat-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.work-chat-topline span { color: #3d3d3d; font-size: 12.5px; font-weight: 500; }
.work-chat-topline small { color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.work-chat-prompt { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; background: rgba(0, 0, 0, .04); }
.work-spark { color: var(--orange); font-size: 15px; line-height: 1.5; }
.work-chat-ask { flex: 1 1 auto; min-width: 0; }
.work-chat-ask small { display: block; color: #8a8a8a; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.work-chat-ask p { margin: 6px 0 0; font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.45; }
.work-send { color: #b9b9b4; font-size: 14px; }
.work-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.work-steps span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 104, 24, .09); color: #b34a08; font-size: 12.5px; }
.work-sources small { display: block; margin-bottom: 9px; color: #8a8a8a; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.work-sources div { display: flex; flex-wrap: wrap; gap: 7px; }
.work-sources span { padding: 6px 11px; border: 1px dashed rgba(23, 23, 23, .18); border-radius: 9px; color: #5a5a5a; font-size: 12.5px; }
.work-answer { padding: 20px; border-radius: 14px; background: rgba(0, 0, 0, .04); }
.work-answer-head { display: flex; align-items: center; gap: 11px; }
.work-mark { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--orange); color: #fff; font-size: 14px; font-weight: 700; }
.work-answer-head div { flex: 1 1 auto; min-width: 0; }
.work-answer-head strong { display: block; font-size: 14.5px; font-weight: 600; }
.work-answer-head small { display: block; margin-top: 3px; color: #8a8a8a; font-size: 12.5px; }
.work-demo { flex: 0 0 auto; padding: 5px 10px; border: 1px solid rgba(23, 23, 23, .1); border-radius: 999px; background: #fff; color: #77776f; font-size: 11px; white-space: nowrap; }
.work-answer > p { margin: 15px 0 0; font-size: 15.5px; line-height: 1.6; }
.work-answer ol { display: grid; gap: 9px; margin: 12px 0 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.work-confirm { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(23, 23, 23, .1); }
.work-confirm small { display: block; color: #8a8a8a; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.work-confirm strong { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 500; line-height: 1.55; }
.work-composer { display: grid; gap: 6px; padding: 15px 22px 18px; border-top: 1px solid var(--line); background: #fbfbfa; }
.work-composer small { color: #8a8a8a; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.work-composer p { display: flex; align-items: center; gap: 4px; margin: 0; color: #5f5f5f; font-size: 14.5px; }
.work-caret { color: var(--orange); animation: workCaret 1.1s steps(1) infinite; }
@keyframes workCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.work-composer div { display: flex; gap: 8px; margin-top: 4px; }
.work-composer div span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(23, 23, 23, .12); border-radius: 50%; color: #8a8a8a; font-size: 12px; }
/* Office apps use the homepage image gallery layout. */
.work-app-grid { --work-app-title: #171719; --work-app-copy: #68686d; --work-app-image-background: #f5f5f3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; margin-top: 64px; }
.work-app-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.work-app-image { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 18px; background: var(--work-app-image-background); }
.work-app-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-app-card h3 { margin: 20px 0 0; color: var(--work-app-title); font-size: 20px; font-weight: 400; letter-spacing: -.025em; line-height: 1.35; }
.work-app-card p { flex: 1; margin: 8px 0 0; color: var(--work-app-copy); font-size: 15px; font-weight: 400; line-height: 1.6; }
.work-app-link { display: inline-flex; align-items: baseline; gap: 5px; margin: 26px 0 0; padding-bottom: 4px; color: var(--work-app-title); font-size: 14px; font-weight: 500; border-bottom: 1px solid currentColor; transition: color .18s ease; }
.work-app-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.work-app-link:hover { color: #ff7417; }
@media (max-width: 900px) {
.work-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 20px; margin-top: 48px; }
}
@media (max-width: 620px) {
.work-app-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; margin-top: 40px; }
}
@media (max-width: 1100px) {
.work-scene { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.work-chat-canvas { padding: 18px 16px 20px; }
.work-tabs button { min-height: 36px; padding: 0 13px; font-size: 13px; }
.work-composer { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.work-caret { animation: none; }
}
/* Work closing banner — copied verbatim from the Why Mr. AI closing banner.
Same image, same rounded dark card, same centred type scale. Only copy differs. */
.contact-section { padding: 160px 0; color: #1a1a1a; background: #fff; }
.contact-layout {
width: min(1280px, calc(100% - 96px));
min-height: 360px;
margin: 0 auto;
padding: 72px 48px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
text-align: center;
border-radius: 16px;
background:
linear-gradient(rgba(0, 0, 0, .14), rgba(0, 0, 0, .14)),
url("images/shared-cta-background.webp?v=mr-ai-release-20261019-r2") center / cover no-repeat;
}
.contact-copy { width: min(920px, 100%); position: relative; z-index: 1; }
.contact-kicker { margin: 0 0 18px; color: #ff7417; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.contact-section h2 { margin: 0 auto; max-width: 900px; color: #fff; font-size: 42px; font-weight: 400; line-height: 1.12; letter-spacing: -.04em; }
.contact-section .button { font-weight: 400; }
.contact-section .contact-lead { max-width: 760px; margin: 18px auto 0; color: rgba(255, 255, 255, .78); font-size: 16px; font-weight: 400; line-height: 1.6; }
.contact-actions { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.contact-section .button-orange { min-width: 116px; min-height: 44px; padding: 0 22px; color: #1a1a1a; border-color: #fff; background: #fff; box-shadow: none; }
.contact-section .button-orange:hover { color: #1a1a1a; border-color: #f0f0f0; background: #f0f0f0; }
.contact-section .button-ghost { min-width: 116px; min-height: 44px; padding: 0 22px; color: #fff; border-color: rgba(255, 255, 255, .45); }
.contact-section .button-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .12); }
@media (max-width: 980px) {
.contact-layout { width: min(760px, calc(100% - 64px)); }
}
@media (max-width: 640px) {
.contact-section { padding-block: 84px; }
.contact-layout { width: calc(100% - 40px); min-height: 340px; padding: 56px 24px; }
.contact-section h2 { font-size: 36px; }
.contact-section .contact-lead { font-size: 16px; }
}
/* FAQ block — copied verbatim from the Why Mr. AI FAQ block (same type scale,
same +/x accordion, same hover orange). Scoped to .faq-section so the
pre-existing .faq-list rules used by the other product pages are untouched. */
/* Module rhythm: every module carries 80px above and below, so the gap between
two neighbouring modules measures exactly 160px. Same rule as the Automation
page (`.auto-section--auto`). */
.faq-section { width: 100%; min-height: 0; padding: 80px 0; box-sizing: border-box; color: #171717; background: #fff; }
.faq-layout { width: min(1100px, calc(100% - 96px)); margin: 0 auto; display: flex; flex-direction: column; align-items: start; gap: 72px; }
.faq-heading { width: 100%; text-align: center; }
.faq-heading h2 { max-width: 900px; margin: 0 auto; color: #171717; font-size: 42px; font-weight: 400; letter-spacing: -.052em; line-height: 1.08; text-wrap: balance; }
.faq-section .faq-list { width: min(800px, 100%); margin: 0 auto; padding: 0; display: flex; flex-direction: column; border: 0; background: transparent; }
.faq-item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid rgba(23, 23, 23, .16); background: transparent; }
.faq-item h3 { margin: 0; }
.faq-trigger { width: 100%; min-height: 86px; margin: 0; padding: 18px 0; display: flex; align-items: center; gap: 24px; color: #222; border: 0; background: transparent; box-shadow: none; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.45; text-align: left; cursor: pointer; transition: color 180ms ease; }
.faq-trigger:hover { color: #ff7417; }
.faq-trigger:focus-visible { outline: 3px solid rgba(255, 116, 23, .24); outline-offset: 3px; }
.faq-trigger::after { content: "+"; margin-left: auto; flex: 0 0 auto; color: rgba(23, 23, 23, .28); font-size: 26px; font-weight: 300; line-height: 1; transform: rotate(0); transform-origin: center; transition: transform 300ms cubic-bezier(.22, 1, .36, 1), color 180ms ease; }
.faq-trigger[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-content { overflow: hidden; }
.faq-content[hidden] { display: none; }
.faq-content > div { padding: 0 44px 22px 0; color: #525251; font-size: 17px; font-weight: 400; line-height: 1.7; }
@media (max-width: 980px) {
.faq-section { min-height: 0; padding: 80px 0; }
.faq-layout { width: min(760px, calc(100% - 64px)); gap: 62px; }
.faq-heading h2 { max-width: 620px; }
}
@media (max-width: 640px) {
.faq-section { padding: 64px 0; }
.faq-layout { width: calc(100% - 40px); gap: 44px; }
.faq-heading h2 { font-size: 38px; }
.faq-trigger { min-height: 58px; padding: 16px 0; font-size: 15px; }
.faq-content > div { padding-right: 30px; font-size: 14px; }
}
/* Image FAQ — the homepage (1111.html) FAQ block copied over the shared
`.faq-section` base. The shared base is a copy of the Why Mr. AI FAQ, which
differs from the homepage in heading size (60 vs 56), layout gap (72 vs 60),
open mode (multi vs single) and animation. This modifier restores the
homepage values; only the bottom padding is dropped because the closing
banner right below already carries 160px of top padding. The 80px top is
half of the 160px module rhythm, same as one side of .im-section. */
/* min-height:0 drops the shared 620px floor (the Why FAQ reserves that space);
the block would otherwise sit 152px proud of its own content and push the
gap to the banner below past 160px. */
.faq-section--home { min-height: 0; padding: 80px 0 0; }
.faq-section--home .faq-layout { gap: 60px; }
/* Same 42px as the base rule above — kept explicit so the homepage-style FAQ stays one place to tune. */
.faq-section--home .faq-heading h2 { font-size: 42px; }
.faq-section--home .faq-content { interpolate-size: allow-keywords; opacity: 1; transition: height 320ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease-out; will-change: height, opacity; }
.faq-section--home .faq-content[data-closed] { height: 0; opacity: 0; }
.faq-section--home .faq-content > div { margin-top: -3px; }
@media (max-width: 980px) {
.faq-section--home { padding: 64px 0 0; }
.faq-section--home .faq-layout { width: min(760px, calc(100% - 64px)); gap: 62px; }
.faq-section--home .faq-heading h2 { max-width: 620px; }
}
@media (max-width: 640px) {
.faq-section--home { padding: 56px 0 0; }
.faq-section--home .faq-layout { width: calc(100% - 40px); gap: 44px; }
.faq-section--home .faq-heading h2 { font-size: 38px; }
.faq-section--home .faq-trigger { min-height: 58px; padding: 16px 0; font-size: 15px; }
.faq-section--home .faq-content > div { padding-right: 30px; font-size: 14px; }
}
/* Scene block — copied verbatim from the Why Mr. AI second screen (problem
block): same grid rhythm, same index chip, same pill row, same answer block
and image stage. Only copy differs, plus the six function tabs underneath. */
.problem-section { position: relative; min-height: 696px; padding: 80px 0; overflow: hidden; color: var(--ink); background: #fff; }
.problem-section::after { content: ""; position: absolute; width: 720px; height: 720px; right: -160px; top: 50%; border-radius: 50%; display: none; background: none; transform: translateY(-50%); pointer-events: none; }
.problem-section:nth-of-type(even)::after { right: auto; left: -220px; opacity: .7; }
.problem-layout { position: relative; z-index: 1; min-height: 560px; display: grid; grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr); align-items: center; gap: clamp(70px, 8vw, 128px); }
.problem-section.is-flipped .problem-layout { grid-template-columns: minmax(520px, 1.12fr) minmax(0, .88fr); }
.problem-section.is-flipped .problem-copy { order: 2; }
.problem-section.is-flipped .visual-stage { order: 1; }
.problem-copy { max-width: 570px; }
.problem-index { display: flex; align-items: center; gap: 14px; color: #ff7417; font-size: 13px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.problem-index::before { display: none; }
.problem-copy h2 { margin: 30px 0 0; font-size: 42px; font-weight: 400; line-height: 1.08; letter-spacing: -.055em; text-wrap: wrap; }
.problem-lead { margin: 20px 0 0; max-width: 48ch; color: #737373; font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.pain-points { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.pain-points span { padding: 9px 13px; border: 1px solid rgba(23, 23, 23, .18); border-radius: 999px; color: #737373; font-size: 13px; }
.answer-block { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); }
.answer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.answer-label { color: #ff7417; font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.answer-sub { color: #8b8b90; font-size: 13px; }
.answer-block > p { margin: 16px 0 0; color: #4d4d4d; font-size: 16px; line-height: 1.85; text-wrap: pretty; }
.answer-block ol { margin: 12px 0 0; padding-left: 22px; color: #4d4d4d; font-size: 15.5px; line-height: 1.8; }
.answer-block ol li + li { margin-top: 8px; }
.answer-block ol li::marker { color: #ff7417; font-weight: 600; }
.answer-next { margin: 16px 0 0; color: #171717; font-size: 14.5px; font-weight: 500; line-height: 1.6; }
.visual-stage { position: relative; width: min(100%, 703px); height: 548px; justify-self: center; display: grid; place-items: center; }
.visual-panel { position: relative; width: 100%; height: 516px; padding: 0; overflow: hidden; border-radius: 16px; color: var(--ink); background: transparent; box-shadow: none; }
.visual-window { position: relative; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: inherit; background: transparent; box-shadow: none; }
.visual-window > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: opacity .22s ease; }
.visual-window.is-switching > img { opacity: 0; }
.office-float-chat { position: absolute; inset: 7.5% 5.5%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e7e5e1; border-radius: 12px; background: #f9f8f6; box-shadow: 0 14px 34px rgba(29, 20, 17, .12); color: #202024; }
.office-float-chat > header { flex: 0 0 44px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #e7e5e1; font-size: 13px; }
.office-float-chat > header img { width: 17px; height: 13px; object-fit: contain; }
.office-float-chat > header strong { font-weight: 600; }
.office-float-chat-thread { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 15px 18px; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(32, 32, 36, .22) transparent; background: #f9f8f6; }
.office-float-chat-thread::-webkit-scrollbar { width: 5px; }
.office-float-chat-thread::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(32, 32, 36, .2); }
.office-float-chat-message, .office-chat-data-card { opacity: 0; transform: translateY(12px); transition: opacity .38s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }
.office-float-chat [data-office-chat-step][aria-hidden="true"],
.office-float-chat [data-office-chat-insight][aria-hidden="true"] { display: none; }
.office-float-chat-message.is-shown, .office-chat-data-card.is-shown { opacity: 1; transform: translateY(0); }
.office-float-chat-message { width: min(78%, 470px); padding: 8px 11px; box-sizing: border-box; border: 1px solid #e4e3df; border-radius: 14px; background: #fff; }
.office-float-chat-message.is-user { width: fit-content; max-width: min(78%, 470px); align-self: flex-end; color: #202024; border-color: #e8e7e4; border-bottom-right-radius: 5px; background: #f2f1ef; }
.office-float-chat-message.is-ai { width: 100%; max-width: none; padding: 1px 10px; align-self: flex-start; border: 0; border-radius: 0; background: transparent; }
.office-float-chat-message p { margin: 0; font-size: 11px; line-height: 1.42; white-space: pre-line; }
.office-float-chat-message.is-user p { font-size: 12px; }
.office-float-chat-answer { display: none; }
.office-float-chat-message.is-ai.is-answered .office-float-chat-answer { display: block; }
.office-float-chat-answer span { display: none; color: inherit; font-size: 11px; font-weight: 400; line-height: 1.42; }
.office-float-chat-answer span.is-visible { display: block; animation: officeChatAnswerEnter .28s cubic-bezier(.23, 1, .32, 1) both; }
.office-float-chat-answer span.is-visible + span.is-visible { margin-top: 7px; }
.office-float-chat-thinking { min-height: 16px; display: none; align-items: center; gap: 4px; }
.office-float-chat-message.is-ai.is-thinking .office-float-chat-thinking { display: flex; }
.office-float-chat-thinking i { width: 4px; height: 4px; border-radius: 50%; background: #8f8e94; animation: officeChatThinking 840ms ease-in-out infinite; }
.office-float-chat-thinking i:nth-child(2) { animation-delay: .12s; }
.office-float-chat-thinking i:nth-child(3) { animation-delay: .24s; }
@keyframes officeChatThinking { 0%, 72%, 100% { opacity: .34; transform: none; } 36% { opacity: 1; transform: translateY(-2px); } }
@keyframes officeChatAnswerEnter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.office-chat-data-card { width: 100%; padding: 12px; flex: none; box-sizing: border-box; color: #2a292d; border: 1px solid #e3e1dc; border-radius: 10px; background: #fff; font-variant-numeric: tabular-nums; }
.office-chat-dashboard-head { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.office-chat-dashboard-head strong { font-size: 11px; font-weight: 600; }
.office-chat-dashboard-head span { color: #8a888d; font-size: 8px; }
.office-chat-kpis { margin-bottom: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.office-chat-kpis > div { min-width: 0; padding: 7px; border: 1px solid #e9e7e2; border-radius: 7px; }
.office-chat-kpis span, .office-chat-kpis strong, .office-chat-kpis em { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.office-chat-kpis span { color: #77757a; font-size: 7px; }
.office-chat-kpis strong { margin-top: 4px; font-size: 14px; font-weight: 600; line-height: 1; }
.office-chat-kpis em { margin-top: 4px; color: #9a6851; font-size: 7px; font-style: normal; }
.office-chat-bars { display: grid; gap: 8px; }
.office-chat-bars > div { display: grid; grid-template-columns: 74px 1fr 44px auto; align-items: center; gap: 6px; }
.office-chat-bars span { overflow: hidden; color: #5f5d62; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.office-chat-bars i { height: 6px; overflow: hidden; border-radius: 99px; background: #f1efeb; }
.office-chat-bars b { width: var(--office-chat-fill); height: 100%; display: block; border-radius: inherit; background: #f05a0a; transform-origin: left; animation: officeChatBarGrow .72s .12s both; }
.office-chat-bars > div:nth-child(2) b { background: #f28a52; }.office-chat-bars > div:nth-child(3) b { background: #f6b899; }
.office-chat-bars strong { font-size: 8px; text-align: right; }.office-chat-bars em { color: #97644c; font-size: 7px; font-style: normal; white-space: nowrap; }
.office-chat-mini-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 6px; }
.office-chat-chart { min-height: 85px; padding: 8px; border: 1px solid #e9e7e2; border-radius: 7px; }.office-chat-chart > b { font-size: 8px; }.office-chat-columns { height: 50px; margin-top: 6px; display: flex; align-items: end; justify-content: space-around; gap: 4px; border-bottom: 1px solid #eceae6; }.office-chat-columns > i { width: 10px; height: var(--office-chat-column); position: relative; display: block; border-radius: 3px 3px 0 0; background: #f6b899; transform-origin: bottom; animation: officeChatColumnGrow .72s .12s both; }.office-chat-columns > i:last-child { background: #f05a0a; }.office-chat-columns em { position: absolute; top: calc(100% + 3px); left: 50%; color: #858388; font-size: 6px; font-style: normal; transform: translateX(-50%); }
.office-chat-donut { width: 50px; height: 50px; margin: 9px auto 0; display: grid; place-content: center; border-radius: 50%; background: conic-gradient(#f05a0a 0 240deg, #f6b899 240deg 360deg); }.office-chat-donut::after { content: ''; position: absolute; }.office-chat-donut strong, .office-chat-donut span { position: relative; z-index: 1; text-align: center; }.office-chat-donut strong { font-size: 11px; }.office-chat-donut span { color: #858388; font-size: 6px; }
.office-chat-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.office-chat-compare > div { padding: 8px; border: 1px solid #e9e7e2; border-radius: 7px; }.office-chat-compare .is-recommended { border-color: #f2c3ad; background: #fff8f4; }.office-chat-compare strong, .office-chat-compare span, .office-chat-compare em { display: block; }.office-chat-compare strong { font-size: 12px; }.office-chat-compare span, .office-chat-compare em { margin-top: 3px; color: #77757a; font-size: 8px; font-style: normal; }.office-chat-compare em { color: #c25928; }
@keyframes officeChatBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes officeChatColumnGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.office-float-chat-composer { min-height: 82px; margin: 0 12px 12px; padding: 11px 13px 9px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #e5e4e1; border-radius: 12px; color: #a3a2a7; background: #fff; font-size: 10px; }
.office-prompt-typewriter { min-height: 22px; color: #8f8e94; line-height: 1.45; }
.office-prompt-typed { color: #7b7a80; }
.office-prompt-caret { width: 1px; height: 11px; margin-left: 2px; display: inline-block; vertical-align: -2px; background: #ff7417; animation: officePromptCaret .8s steps(1, end) infinite; }
.office-prompt-caret.is-hidden { display: none; }
@keyframes officePromptCaret { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
.office-float-chat-composer > div { display: flex; align-items: center; justify-content: space-between; }
.office-float-chat-controls { display: inline-flex; align-items: center; gap: 10px; }
.office-float-chat-composer svg { width: 15px; height: 15px; fill: none; stroke: #74757a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.office-float-chat-controls b { padding: 4px 7px; border: 1px solid #e7e6e3; border-radius: 6px; color: #77777b; font-size: 9px; font-weight: 400; }
.office-float-chat-composer button { width: 27px; height: 27px; padding: 0; border: 0; border-radius: 9px; color: #fff; background: #d2d3d7; font: inherit; font-size: 16px; line-height: 1; transition: transform .2s ease, background-color .2s ease; }
.office-float-chat-composer button.is-ready { background: #ff7417; }.office-float-chat-composer button.is-sending { transform: translateY(-2px); background: #171717; }
/* Use the same three prompt controls as the homepage Work chat, rather than
treating the option icons as decorative inline SVGs. */
.office-float-chat-actions { display: flex; align-items: center; justify-content: space-between; }
.office-float-chat-controls { gap: 7px; }
.office-float-chat-composer .office-prompt-attach,
.office-float-chat-composer .office-prompt-mic { width: 28px; height: 32px; display: inline-grid; place-items: center; flex: 0 0 28px; border: 0; border-radius: 8px; color: #676a72; background: transparent; }
.office-float-chat-composer .office-prompt-attach svg,
.office-float-chat-composer .office-prompt-mic svg { width: 14px; height: 14px; }
.office-float-chat-composer .office-prompt-model { width: auto; min-width: 46px; height: 24px; padding: 0 5px 0 7px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; flex: 0 0 auto; border: 1px solid #dedfe3; border-radius: 7px; color: #52545b; background: #fff; font-size: 10px; font-weight: 400; letter-spacing: -.01em; }
.office-float-chat-composer .office-prompt-model svg { width: 11px; height: 11px; }
.office-float-chat-composer .office-prompt-send { flex: 0 0 auto; }
/* Function switching sits under the visual as a compact segmented control. */
.work-visual-column { width: min(100%, 703px); justify-self: center; }
.work-visual-column .visual-stage { width: 100%; }
.problem-layout--work { align-items: start; }
/* The visual stage keeps a 16px breathing edge above its image. Match that
true image edge, rather than the stage wrapper, with the copy column. */
.problem-layout--work .problem-copy { margin-top: 16px; }
.work-visual-column .work-tabs { display: flex; width: fit-content; max-width: 100%; margin: 12px 0 0; padding: 4px; gap: 4px; overflow-x: auto; border: 1px solid rgba(23, 23, 23, .14); border-radius: 999px; background: #fff; scrollbar-width: none; }
.work-visual-column .work-tabs::-webkit-scrollbar { display: none; }
.work-visual-column .work-tabs button { display: inline-flex; min-height: 36px; padding: 0 13px; align-items: center; justify-content: center; border: 0; border-radius: 999px; color: #747474; background: transparent; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap; cursor: pointer; transition: color .18s ease, background-color .18s ease; }
.work-visual-column .work-tabs button:hover { color: #171717; background: #f1f1ef; }
.work-visual-column .work-tabs button:focus-visible { color: #fff; background: #171717; outline: 3px solid rgba(255, 116, 23, .24); outline-offset: 2px; }
.work-visual-column .work-tabs button.is-active { color: #fff; background: #171717; }
.problem-copy .work-note { margin-top: 26px; color: #8b8b90; font-size: 13.5px; line-height: 1.7; }
@media (max-width: 1180px) {
.problem-layout { grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); gap: 52px; }
}
@media (max-width: 980px) {
.problem-section,
.problem-section.is-flipped { min-height: 0; padding-block: 96px; }
.problem-layout,
.problem-section.is-flipped .problem-layout { min-height: 0; grid-template-columns: 1fr; gap: 64px; }
.problem-section.is-flipped .problem-copy,
.problem-section.is-flipped .visual-stage { order: initial; }
.problem-copy { max-width: 700px; }
.problem-layout--work .problem-copy { margin-top: 0; }
.visual-stage { width: min(650px, 100%); }
.work-visual-column { width: min(650px, 100%); }
}
@media (max-width: 640px) {
.problem-section { padding-block: 76px; }
.problem-layout { gap: 44px; }
.problem-copy h2 { font-size: 40px; }
.answer-block { margin-top: 36px; }
.answer-block h3 { font-size: 23px; }
.answer-block > p { font-size: 15px; }
.visual-stage { height: auto; min-height: 0; }
.visual-panel { height: auto; min-height: 440px; border-radius: 16px; }
.visual-window { min-height: 440px; border-radius: inherit; }
.work-visual-column .work-tabs { width: 100%; margin-top: 12px; }
}
/* Website module. Same Why Mr. AI rhythm as the Video and Image modules —
oversized light headings, neutral cards, ghost numerals, one orange accent.
Own prefix so nothing shared moves. Appended after everything else. */
/* Website hero. The claim sits in the middle of one full-bleed canvas and the
things Mr. AI builds float around it. Every .wb-shot below is an empty slot:
the geometry is final, only the picture inside is still missing. */
.wb-hero { padding-top: 64px; background: #fff; }
.wb-hero-stage { position: relative; width: 100%; aspect-ratio: 2343 / 1089; }
.wb-hero-center { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 24px 5%; pointer-events: none; }
.wb-hero-copy { width: min(620px, 45%); text-align: center; pointer-events: auto; }
.wb-hero-actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 20px; }
.wb-shots { display: contents; }
.wb-shot { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 12px; overflow: hidden; border: 1px dashed rgba(24, 24, 28, .18); border-radius: 14px; background: #e7e4de; color: #86827a; font-size: clamp(9px, .8vw, 11.5px); line-height: 1.4; text-align: center; }
/* Drop an into a slot and the placeholder chrome gets out of the way. */
.wb-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-shot:has(img) { padding: 0; border-style: solid; border-color: rgba(24, 24, 28, .07); background: #fff; }
.wb-shot:has(img) .wb-shot-index, .wb-shot:has(img) .wb-shot-label { display: none; }
.wb-shot-index { font-size: 1.05em; font-weight: 500; letter-spacing: .14em; }
.wb-shot-label { max-width: 15ch; }
/* Geometry lifted 1:1 from the reference composition (2343 x 1088 canvas,
measured off the mock). left/top/width are percentages of that canvas;
aspect-ratio is the slot's own box so pictures never get cropped. */
.wb-shot--a { left: 16.26%; top: 20.40%; width: 9.82%; aspect-ratio: 230 / 273; }
.wb-shot--b { left: 12.16%; top: 39.34%; width: 10.24%; aspect-ratio: 240 / 158; }
.wb-shot--c { left: 31.24%; top: 6.43%; width: 10.24%; aspect-ratio: 16 / 9; }
.wb-shot--d { left: 65.98%; top: 12.68%; width: 14.08%; aspect-ratio: 330 / 186; }
.wb-shot--e { left: 76.31%; top: 41.64%; width: 10.24%; aspect-ratio: 16 / 9; }
/* Deliberate break from the mock: e and f tuck into each other by a hair, and
the smaller one (e) rides on top so the big shot reads as passing behind it. */
.wb-shot--e { z-index: 2; }
.wb-shot--f { left: 73.03%; top: 52.53%; width: 9.82%; aspect-ratio: 230 / 241; }
.wb-shot--g { left: 57.45%; top: 66.36%; width: 8.54%; aspect-ratio: 200 / 237; }
.wb-shot--h { left: 34.83%; top: 78.03%; width: 10.24%; aspect-ratio: 16 / 9; }
.wb-shot--i { left: 17.29%; top: 64.71%; width: 11.95%; aspect-ratio: 280 / 158; }
.wb-hero h1 { margin: 0; color: #1a1a1a; font-size: clamp(30px, 3.9vw, 56px); font-weight: 400; line-height: 1.08; letter-spacing: -.052em; text-wrap: balance; }
/* Second clause always starts its own line. */
.wb-hero h1 em { display: block; color: #1a1a1a; font-style: normal; }
.wb-hero-lead { max-width: 100%; margin: 18px auto 0; color: var(--muted); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.wb-section { padding: 80px 0; }
/* The website purpose grid uses a pure white background. */
#website-types { background: #ffffff; }
/* Keep a 100px gap from the process section to the closing banner. */
#website-process { padding-bottom: 0; }
#website-process + .contact-section { padding-top: 100px; }
.wb-heading { max-width: 900px; }
.wb-heading .eyebrow { display: block; margin: 0 0 22px; color: #ff7417; font-size: 13px; font-weight: 500; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; text-align: inherit; }
.wb-heading .eyebrow::before { display: none; }
.wb-heading h2 { max-width: 860px; margin: 0 0 20px; color: #111113; font-size: 42px; font-weight: 400; letter-spacing: -.052em; line-height: 1.08; text-wrap: balance; }
.wb-heading > p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.wb-grid { display: grid; gap: 20px; margin-top: clamp(48px, 5vw, 64px); }
.wb-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Purpose cards are pictures now, not text tiles: 16:9 shot on top, title and
copy underneath, same slot language as the hero (dashed = waiting for art). */
.wb-type { display: flex; flex-direction: column; }
.wb-type-media { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; border: 1px dashed rgba(24, 24, 28, .2); border-radius: 10px; background: #e7e4de; color: #86827a; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.wb-type-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-type-media:has(img) { border-style: solid; border-color: rgba(24, 24, 28, .07); background: #fff; }
.wb-type-media:has(img) .wb-type-ph { display: none; }
.wb-num { position: absolute; top: 22px; right: 26px; color: #d2d2d2; font-size: 28px; font-weight: 400; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.wb-type h3 { margin: 16px 0 0; font-size: 17px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.wb-type p { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
/* Deliverables read as an icon checklist — 20px stroked glyph beside a title
and one line of note, same as the asset libraries on the Image page. This
page breaks at 980/640 rather than Image's 920/620, so it fits the grid
switches of the sections around it. */
.wb-plain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px 44px; margin-top: clamp(48px, 5vw, 64px); }
.wb-plain-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0 13px; align-items: start; }
.wb-plain-icon { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: #5f5f63; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wb-plain-copy h3 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.012em; line-height: 1.35; }
.wb-plain-copy p { margin: 7px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.wb-steps { display: grid; gap: 20px; margin-top: clamp(48px, 5vw, 64px); }
.wb-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wb-step { position: relative; padding: 28px; border: 1px solid #e9e9e9; border-radius: 14px; background: #fff; }
.wb-step .wb-num { position: static; display: block; }
.wb-step small { display: block; margin-top: 22px; color: var(--orange); font-size: 12px; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; }
.wb-step h3 { margin: 10px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.wb-step p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.wb-loop-return { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; width: fit-content; margin-top: 20px; padding: 16px 26px; border: 1px solid rgba(23, 23, 23, .14); border-radius: 999px; }
.wb-loop-return span { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.wb-loop-return strong { font-size: 14px; font-weight: 400; color: var(--muted); }
.wb-loop-return svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1180px) {
.wb-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-hero-stage { aspect-ratio: 1440 / 900; }
.wb-hero-copy { width: min(520px, 45%); }
.wb-shot--a { left: 8%; top: 22%; }
.wb-shot--b { left: 7.5%; top: 42%; }
.wb-shot--c { left: 26%; top: 9.5%; }
.wb-shot--d { left: 73%; top: 11%; }
.wb-shot--e { left: 80%; top: 40%; width: 8.6%; }
.wb-shot--f { left: 79%; top: 46.8%; width: 8.6%; }
.wb-shot--g { left: 66%; top: 70.5%; }
.wb-shot--h { left: 21%; top: 80%; }
.wb-shot--i { left: 10%; top: 64%; }
}
@media (max-width: 980px) {
.wb-section { padding: 64px 0; }
.wb-plain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-hero-stage { display: block; aspect-ratio: auto; min-height: 0; padding: 36px 20px 56px; }
.wb-hero-center { position: static; padding: 0 0 28px; }
.wb-hero-copy { width: 100%; }
/* Masonry keeps every slot's own proportions instead of forcing one tile. */
.wb-shots { display: block; column-count: 3; column-gap: 14px; }
.wb-shot { position: static; width: auto; margin: 0 0 14px; box-shadow: none; break-inside: avoid; }
.wb-shot--a, .wb-shot--b, .wb-shot--c, .wb-shot--d, .wb-shot--e, .wb-shot--f, .wb-shot--g, .wb-shot--h, .wb-shot--i { left: auto; top: auto; width: auto; }
}
@media (max-width: 640px) {
.wb-section { padding: 56px 0; }
.wb-heading h2 { font-size: 32px; }
.wb-hero-stage { padding: 28px 16px 44px; }
.wb-shots { column-count: 2; column-gap: 10px; }
.wb-shot { margin-bottom: 10px; }
.wb-grid--four, .wb-steps--four { grid-template-columns: minmax(0, 1fr); }
.wb-plain-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.wb-step { min-height: 0; padding: 24px; }
.wb-loop-return { width: 100%; }
}
/* ERP interface: one full-width visual replaces the four Automation cards. */
.automation-page[data-content-layout="erp"] #outcomes .erp-interface-visual,
.automation-page #interface.automation-interface-section .erp-interface-visual,
#interface.document-interface-section .erp-interface-visual {
width: 100%;
margin: clamp(48px, 5vw, 64px) 0 0;
overflow: hidden;
border-radius: 16px;
background: var(--soft);
}
.automation-page[data-content-layout="erp"] #outcomes .erp-interface-visual img,
.automation-page #interface.automation-interface-section .erp-interface-visual img,
#interface.document-interface-section .erp-interface-visual img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: contain;
}
@media (max-width: 620px) {
.automation-page[data-content-layout="erp"] #outcomes .erp-interface-visual,
.automation-page #interface.automation-interface-section .erp-interface-visual,
#interface.document-interface-section .erp-interface-visual {
margin-top: 32px;
border-radius: 16px;
}
}
/* ERP work changes use the shared heading and numbered card styles. */
.automation-page[data-content-layout="erp"] #examples.erp-work-changes { background: #fff; }
.automation-page[data-content-layout="erp"] #examples .erp-work-comparison {
display: grid;
grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
align-items: stretch;
gap: 20px;
margin-top: clamp(48px, 5vw, 64px);
}
.automation-page[data-content-layout="erp"] #examples .erp-work-panel {
min-height: 0;
padding: 32px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
}
.automation-page[data-content-layout="erp"] #examples .erp-work-panel h3 {
margin: 0;
color: var(--muted);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
}
.automation-page[data-content-layout="erp"] #examples .erp-work-panel p {
margin-top: 12px;
color: var(--ink);
}
.automation-page[data-content-layout="erp"] #examples .erp-work-arrow {
width: 24px;
height: 24px;
align-self: center;
justify-self: center;
fill: none;
stroke: var(--orange);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.automation-page[data-content-layout="erp"] #examples .erp-work-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 20px;
}
.automation-page[data-content-layout="erp"] #examples .erp-work-cards .auto-card-number {
color: var(--muted);
}
@media (max-width: 900px) {
.automation-page[data-content-layout="erp"] #examples .erp-work-comparison {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.automation-page[data-content-layout="erp"] #examples .erp-work-arrow { transform: rotate(90deg); }
.automation-page[data-content-layout="erp"] #examples .erp-work-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
.automation-page[data-content-layout="erp"] #examples.erp-work-changes { padding-block: 64px; }
.automation-page[data-content-layout="erp"] #examples .erp-work-comparison { margin-top: 32px; }
.automation-page[data-content-layout="erp"] #examples .erp-work-panel { padding: 24px; }
}
/* Emphasize the ERP comparison with Mr. AI. */
.automation-page[data-content-layout="erp"] #examples .erp-work-panel:last-child { background: var(--ink); border-color: var(--ink); }
.automation-page[data-content-layout="erp"] #examples .erp-work-panel:last-child h3 { color: rgba(255, 255, 255, .72); }
.automation-page[data-content-layout="erp"] #examples .erp-work-panel:last-child p { color: #fff; }
/* ERP desktop modules share a total gap of 160px: 80px on each side. */
@media (min-width: 621px) {
.automation-page[data-content-layout="erp"] #outcomes { padding-bottom: 80px; }
.automation-page[data-content-layout="erp"] #examples.erp-work-changes { padding-top: 80px; }
}
/* ERP setup steps retain the existing two-column pathway layout. */
.automation-page[data-content-layout="erp"] #goes-live.erp-fde-pathway { background: #fff; }
.erp-fde-pathway-layout {
display: grid;
grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
align-items: start;
gap: clamp(48px, 5vw, 80px);
}
.erp-fde-pathway .erp-fde-pathway-heading { max-width: none; margin: 0; text-align: left; }
.erp-fde-pathway-heading .eyebrow { justify-content: flex-start; margin: 0 0 25px; color: var(--orange); font-size: 13px; font-weight: 650; line-height: 1.5; }
.erp-fde-pathway-heading .eyebrow::before { display: none; }
.erp-fde-pathway .erp-fde-pathway-heading h2 { margin: 0; font-size: 42px; font-weight: 400; line-height: 1.08; letter-spacing: -.055em; text-wrap: balance; }
.erp-fde-pathway .erp-fde-pathway-heading > p:last-child { max-width: 720px; margin: 24px 0 0; color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.72; }
.erp-fde-pathway-track { margin: 0; padding: 0; list-style: none; }
.erp-fde-path-step { min-height: 112px; padding: 22px 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; column-gap: 18px; border-bottom: 1px solid var(--line); }
.erp-fde-path-step:last-child { border-bottom: 0; }
.erp-fde-path-number { grid-row: 1 / span 2; position: static; color: #d0d0d2; font-size: 24px; font-weight: 400; line-height: 1.1; letter-spacing: -.05em; }
.erp-fde-path-step h3 { grid-column: 2; margin: 0; font-size: 19px; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; }
.erp-fde-path-step p { grid-column: 2; margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
@media (max-width: 1040px) {
.erp-fde-pathway-layout { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: 48px; }
}
@media (max-width: 760px) {
.erp-fde-pathway-layout { grid-template-columns: minmax(0, 1fr); gap: 46px; }
.erp-fde-pathway .erp-fde-pathway-heading { max-width: 520px; }
.erp-fde-path-step { min-height: 0; padding: 22px 0; }
}
/* ERP third-to-fourth section spacing totals 160px. */
@media (min-width: 621px) {
.automation-page[data-content-layout="erp"] #examples.erp-work-changes { padding-bottom: 80px; }
.automation-page[data-content-layout="erp"] #goes-live.erp-fde-pathway { padding-top: 80px; }
}
/* Keep ERP setup content within its existing grid column. */
.erp-how-it-works-content { min-width: 0; }
/* Automation's new interface keeps the same spacing as the ERP visual. */
.automation-page #interface.automation-interface-section { padding-bottom: 160px; }
@media (min-width: 621px) {
.automation-page #interface.automation-interface-section { padding-bottom: 80px; }
}
/* Interface headings start at the module edge after removing their label. */
.automation-page .auto-heading--no-label > h2 { margin-top: 0; }
/* Documents adds an ERP-style visual before its existing content. */
#interface.document-interface-section { padding-bottom: 160px; }
.document-interface-section .auto-heading--no-label > h2 { margin-top: 0; }
.document-interface-section + #document-groups { padding-top: 64px; }
@media (min-width: 621px) {
#interface.document-interface-section { padding-bottom: 80px; }
.document-interface-section + #document-groups { padding-top: 80px; }
}
/* Documents interface: copy on the left, one visual on the right. */
#interface.document-interface-section > .shell {
display: grid;
grid-template-columns: minmax(300px, .8fr) minmax(0, 1.7fr);
align-items: start;
gap: clamp(48px, 6vw, 96px);
}
#interface.document-interface-section .auto-heading { min-width: 0; max-width: none; }
#interface.document-interface-section .auto-heading > h2 { text-wrap: wrap; }
#interface.document-interface-section .erp-interface-visual { min-width: 0; max-width: 712px; margin: 0; }
#interface.document-interface-section .erp-interface-visual img { aspect-ratio: 712 / 578; }
@media (max-width: 900px) {
#interface.document-interface-section > .shell { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (min-width: 1200px) {
#interface.document-interface-section > .shell { grid-template-columns: minmax(300px, 1fr) 712px; }
}
/* Document actions and a compact, two-column capability list. */
.document-interface-copy { min-width: 0; }
.document-interface-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.document-interface-capabilities {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 20px;
margin: 28px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--line);
list-style: none;
}
.document-interface-capabilities li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: var(--ink); font-size: 14px; line-height: 1.5; }
.document-interface-capabilities svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Email's second screen: three divider tabs and a matching WebP visual. */
.email-interface-section .auto-heading > h2 { margin-top: 0; text-wrap: wrap; }
.email-interface-carousel {
--email-slide-duration: 7s;
display: grid;
grid-template-columns: minmax(280px, 384px) minmax(0, 1fr);
align-items: start;
gap: clamp(48px, 6vw, 96px);
margin-top: 64px;
}
.email-interface-copy { min-width: 0; }
.email-interface-tabs { min-height: 320px; }
.email-interface-tab {
position: relative;
display: block;
width: 100%;
min-height: 72px;
padding: 24px 0;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--muted);
text-align: start;
}
.email-interface-tab:first-child { padding-top: 0; }
.email-interface-label { display: block; font-size: 22px; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; }
.email-interface-description { display: block; margin-top: 12px; color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.65; letter-spacing: 0; }
.email-interface-description[hidden] { display: none; }
.email-interface-tab.is-active { color: var(--ink); }
.email-interface-tab.is-active .email-interface-label { font-weight: 500; }
.email-interface-tab.is-active::after {
position: absolute;
inset-inline: 0;
bottom: -1px;
height: 2px;
background: var(--ink);
content: '';
transform-origin: left;
}
.email-interface-carousel.is-playing .email-interface-tab.is-active::after { animation: emailSlideProgress var(--email-slide-duration) linear forwards; }
.email-interface-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.email-interface-count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.email-interface-rotation { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); }
.email-interface-rotation svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.email-interface-tab:focus-visible, .email-interface-rotation:focus-visible, .email-interface-panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.email-interface-panels { min-width: 0; }
.email-interface-panel[hidden] { display: none; }
.email-interface-visual { width: 100%; margin: 0; overflow: hidden; border-radius: 16px; background: var(--soft); }
.email-interface-visual img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; }
@media (hover: hover) {
.email-interface-tab:hover { color: var(--ink); }
.email-interface-rotation:hover { border-color: var(--ink); background: var(--soft); }
}
@keyframes emailSlideProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 900px) {
.email-interface-carousel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.email-interface-tabs { min-height: 0; }
}
@media (max-width: 620px) {
.email-interface-carousel { margin-top: 32px; }
.email-interface-tab { min-height: 64px; padding-block: 20px; }
.email-interface-label { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.email-interface-carousel.is-playing .email-interface-tab.is-active::after { animation: none; }
}