/* Applicora's illustrated marketing design. Existing routes and product components share these tokens. */
:root {
  --ink: #102b29;
  --forest: #183f32;
  --forest-2: #285743;
  --moss: #566760;
  --paper: #ffffff;
  --paper-deep: #f5f4ed;
  --white: #ffffff;
  --mint: #eef4eb;
  --lime: #f9e8b8;
  --amber: #efad35;
  --line: #dbe2dc;
  --line-dark: #c5d0c9;
  --shell: 1200px;
  --header-height: 96px;
}
html { scroll-padding-top: calc(var(--header-height) + 24px); }
body { font-size: 17px; }
h1, h2, h3 { font-weight: 600; }
h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.12; }
h3 { line-height: 1.22; }
.shell { width: min(calc(100% - 64px), var(--shell)); }
.section { padding: 88px 0; }
.kicker { font-size: .7rem; letter-spacing: .13em; margin-bottom: 19px; }
.button, .nav-cta { border-radius: 5px; }
.button { gap: 16px; min-height: 52px; font-size: .88rem; padding: 12px 24px; text-align: center; }
.button:hover { transform: none; }
.text-link { font-size: .88rem; }
:focus-visible { outline: 3px solid #bc7a0b; outline-offset: 5px; }
.site-header { background: rgba(255, 255, 255, .97); border-color: #e7ece7; }
.nav-shell { height: var(--header-height); }
.brand { width: 215px; flex-shrink: 0; }
.site-nav { gap: 30px; }
.nav-link, .nav-product-button { font-size: .86rem; }
.nav-cta { padding: 15px 24px; font-size: .86rem; }
.nav-picasify { font-weight: 500; }
.nav-picasify > span[aria-hidden] { margin-left: 5px; color: var(--moss); }
.product-menu { border-color: var(--line); border-radius: 10px; box-shadow: 0 16px 50px #173f3212; top: 66px; }
.product-menu a { border-radius: 6px; }
.product-menu a:hover { border-color: transparent; }
.menu-button { border-color: var(--line); border-radius: 5px; }
.menu-button[aria-expanded="true"] > span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] > span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }

/* Home: native copy and UI over an independent photographic illustration. */
.welcome-hero { overflow: clip; }
.welcome-grid { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; min-height: 620px; }
.welcome-copy { position: relative; z-index: 2; padding: 50px 0 65px; }
.welcome-copy h1 { font-size: clamp(2.6rem, 3.65vw, 3.55rem); line-height: 1.07; letter-spacing: -.055em; }
.welcome-copy .hero-intro { max-width: 460px; font-size: 1.14rem; line-height: 1.6; margin-top: 25px; }
.welcome-copy .button-row { gap: 27px; margin-top: 34px; }
.career-scene { width: calc(100% + 100px); margin: 0 -100px 0 0; aspect-ratio: 1.08; position: relative; container-type: inline-size; }
.career-scene-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 95%, transparent); }
.career-scene-ui { position: absolute; inset: 0; color: var(--ink); font-family: var(--sans); }
.career-screen { width: 64%; height: 65%; position: absolute; top: 10%; left: 0; background: #fff; border: .65cqw solid #3c4541; border-radius: 2cqw; transform: rotate(-3deg); box-shadow: 0 2cqw 4cqw #183f321c; overflow: hidden; }
.career-screen-bar { height: 12%; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; padding: 0 2cqw; border-bottom: 1px solid #edf0ee; }
.career-screen-bar img { width: 16cqw; height: auto; }
.career-screen-bar > span { font-size: 1.2cqw; color: #839089; }
.career-screen-body { display: grid; grid-template-columns: 25% 75%; height: 88%; }
.career-screen-nav { border-right: 1px solid #edf0ee; display: flex; flex-direction: column; gap: 1.6cqw; padding: 2cqw .8cqw; font-size: 1.15cqw; color: #67766f; }
.career-screen-nav b { background: #f8efdc; border-radius: .5cqw; color: var(--forest); padding: .6cqw; }
.career-screen-nav span { padding-left: .6cqw; }
.career-screen-content { padding: 2.5cqw 2cqw; }
.career-screen-content > strong { font-size: 2.3cqw; letter-spacing: -.04em; line-height: 1.2; display: block; }
.career-screen-content > p { font-size: 1.12cqw; color: #64726b; margin-top: 1cqw; }
.career-direction { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; margin: 3.4cqw 0; }
.career-direction::before { content: ''; position: absolute; background: linear-gradient(to right, #b4bcb6, #e4b94e, #2f5b42); height: .2cqw; top: 1cqw; left: 17%; right: 17%; }
.career-direction > span { position: relative; font-size: 1.15cqw; text-align: center; }
.career-direction i { display: block; width: 2.2cqw; height: 2.2cqw; border: .4cqw solid #fff; border-radius: 50%; background: #8c9890; box-shadow: 0 0 0 .12cqw #d5ddd6; margin: 0 auto .9cqw; }
.career-direction > span:nth-child(2) i { background: #dfac38; }
.career-direction > span:nth-child(3) i { background: #366b4d; }
.career-direction small { display: block; font-size: 1cqw; color: #768079; margin-top: .4cqw; }
.career-checklist { display: flex; flex-direction: column; }
.career-checklist > b { font-size: 1.4cqw; margin-bottom: 1cqw; }
.career-checklist > span { display: flex; gap: 1cqw; align-items: center; border-bottom: 1px solid #edf0ee; padding: .85cqw 0; font-size: 1.25cqw; }
.career-checklist i { display: inline-flex; align-items: center; justify-content: center; width: 1.7cqw; height: 1.7cqw; border: .12cqw solid #d6ded8; border-radius: .4cqw; font-size: 1.1cqw; font-style: normal; }
.career-checklist > span:nth-child(2) i, .career-checklist > span:nth-child(3) i { background: #37704a; color: #fff; border-color: #37704a; }
.career-shared { position: absolute; top: 49%; left: -3%; width: 23%; padding: 2cqw; border-radius: 1cqw; background: #fffffffa; box-shadow: 0 1cqw 3cqw #173f3222; }
.career-shared strong { font-size: 1.35cqw; display: block; }
.career-avatars { display: flex; margin: 1.3cqw 0; }
.career-avatars > span { background: #dce5d8; border: .3cqw solid #fff; border-radius: 50%; display: grid; place-items: center; width: 3.7cqw; height: 3.7cqw; font-size: 1.1cqw; }
.career-avatars > span + span { background: #f2e8d8; margin-left: -.7cqw; }
.career-shared p { font-size: 1.35cqw; line-height: 1.55; color: #6b766f; }
.career-card-arrow { position: absolute; right: 1.3cqw; bottom: 1.3cqw; font-size: 2cqw; }
.career-session { position: absolute; left: 20%; top: 73%; display: flex; align-items: center; gap: 1.8cqw; padding: 2cqw 2.6cqw; width: 49%; background: #fff; border-radius: 1cqw; box-shadow: 0 1cqw 3cqw #173f3222; }
.career-session svg { width: 4cqw; flex-shrink: 0; fill: none; stroke: var(--forest); stroke-width: 1.5; }
.career-session strong { display: block; font-size: 1.5cqw; }
.career-session p, .career-session small { color: #6b766f; font-size: 1.25cqw; margin-top: .6cqw; display: block; }
.career-session > span { margin-left: auto; font-size: 2.4cqw; }
.career-scene > figcaption { position: absolute; right: 8%; bottom: 2%; font-size: .65rem; color: #68786d; background: #ffffffbd; border-radius: 3px; padding: 3px 7px; }
.privacy-divider { display: flex; align-items: center; gap: 30px; padding-block: 28px; }
.privacy-divider > span { height: 1px; background: var(--line-dark); flex: 1; }
.privacy-divider p { display: flex; align-items: center; gap: 15px; font-size: .92rem; color: var(--moss); text-align: center; }
.privacy-divider svg { fill: none; stroke: var(--moss); stroke-width: 1.8; flex-shrink: 0; }
.audience-section { padding: 46px 0 70px; }
.audience-section h2 { margin-bottom: 34px; }
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.audience-card { display: flex; flex-direction: column; padding: 18px; border-radius: 9px; background: #f1f5eb; transition: box-shadow 150ms ease; }
.audience-card:hover { box-shadow: 0 8px 28px #173f3212; }
.audience-campus { background: #edf3f5; }
.audience-professional { background: #fbf6e9; }
.audience-card > img { width: 100%; height: auto; aspect-ratio: 1.4; object-fit: cover; border-radius: 7px; }
.audience-card-copy { display: flex; flex-direction: column; flex: 1; padding: 24px 8px 7px; }
.audience-card .kicker { font-size: .61rem; letter-spacing: .09em; margin-bottom: 9px; }
.audience-card h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); margin-bottom: 11px; letter-spacing: -.04em; }
.audience-card p:not(.kicker) { color: var(--moss); font-size: .95rem; line-height: 1.5; margin-bottom: 22px; }
.audience-card .text-link { align-self: flex-start; margin-top: auto; font-size: .85rem; padding-top: 0; }
.progress-section { background: #faf9f3; padding: 65px 0; }
.progress-steps { list-style: none; margin: 45px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px; }
.progress-steps li { position: relative; }
.progress-steps li + li::before { content: '→'; position: absolute; top: 30px; left: -50px; font-size: 1.6rem; font-weight: 300; color: var(--moss); }
.progress-steps svg { width: 60px; height: 60px; fill: none; stroke: var(--forest); stroke-width: 1.6; margin-bottom: 22px; }
.gold-stroke { stroke: #d7a23a; }
.progress-steps h3 { font-size: 1.14rem; margin-bottom: 12px; letter-spacing: -.025em; }
.progress-steps p { color: var(--moss); font-size: .92rem; line-height: 1.55; max-width: 31ch; }
.workspace-examples { margin-top: 40px; border-top: 1px solid var(--line); }
.workspace-examples summary { display: flex; justify-content: space-between; cursor: pointer; font-size: .9rem; font-weight: 600; padding: 20px 0 0; list-style: none; }
.workspace-examples summary::-webkit-details-marker { display: none; }
.workspace-examples summary > span { font-size: 1.3rem; line-height: 1; }
.workspace-examples[open] summary > span { transform: rotate(45deg); }
.workspace-examples-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding-top: 35px; align-items: start; }
.workspace-examples-grid > div:first-child p { color: var(--moss); margin: 20px 0; }
.guidance-section { overflow: hidden; }
.guidance-grid { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; position: relative; min-height: 310px; gap: 10px; }
.guidance-grid > div { position: relative; z-index: 1; padding: 45px 0; }
.guidance-grid h2 { font-size: clamp(2rem, 3.1vw, 2.8rem); }
.guidance-grid p { color: var(--moss); margin: 15px 0 24px; font-size: 1rem; }
.guidance-grid img { height: 310px; width: 130%; max-width: none; object-fit: cover; mask-image: linear-gradient(to right, transparent, #000 30%); }

/* Inner pages use the same scale, illustrations, spacing and component surfaces. */
.page-hero { padding: 72px 0 64px; background: linear-gradient(120deg, #fff 60%, #f8faf5); overflow: clip; }
.page-hero-grid, .product-page .page-hero-grid { align-items: center; gap: 64px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.page-hero h1, .product-page .page-hero h1, .service-intro h1, .contact-copy h1, .article-header h1, .legal-header h1 { font-size: clamp(2.45rem, 4.1vw, 3.55rem); line-height: 1.08; letter-spacing: -.05em; }
.page-intro { font-size: 1.1rem; line-height: 1.7; margin-top: 25px; }
.service-intro { max-width: none; }
.page-illustration { margin: 0; position: relative; min-width: 0; }
.page-illustration > img { width: 100%; aspect-ratio: 1.15; height: auto; object-fit: cover; border-radius: 12px; }
.page-illustration figcaption { display: flex; align-items: center; gap: 14px; background: #ffffffef; border: 1px solid #e6ebe4; border-radius: 7px; margin: -38px 22px 0; position: relative; padding: 20px 23px; box-shadow: 0 10px 28px #173f3210; }
.page-illustration figcaption > span { color: #b88722; font-size: 1.5rem; }
.page-illustration figcaption strong { display: block; font-size: .95rem; }
.page-illustration figcaption small { display: block; color: var(--moss); font-size: .8rem; margin-top: 4px; }
.page-hero-aside { background: #f1f5eb; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.page-hero-aside h2, .page-hero-aside li { border-color: var(--line); }
.page-hero-aside li::before { color: #b98218; }
.page-hero-visual-stack { display: grid; gap: 24px; }
.page-hero-visual-stack .page-illustration > img { aspect-ratio: 1.8; }
.page-workspace { background: #fafbf8; }
.page-workspace .workspace-examples { margin: 0; }
.page-workspace .product-preview { max-width: 640px; }
.page-workspace .workspace-examples-grid { grid-template-columns: .9fr 1.1fr; }
.section-heading { gap: 64px; }
.section-heading > p, .context-grid > p, .story-copy p { font-size: 1.03rem; line-height: 1.75; }
.context-section, .privacy-section { border: 0; }
.process-grid { border-color: var(--line); }
.process-grid article { padding: 26px; min-width: 0; }
.process-grid article > span { color: #996912; margin-bottom: 26px; }
.process-grid p, .roadmap-list p, .principle p, .feature-index p, .team-member p, .service-row > p, .pricing-row p { font-size: .95rem; line-height: 1.65; }
.roadmap-copy h2, .jobsearch-engine h2, .knowledge-graph-heading h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); }
.roadmap-copy p:last-child { font-size: 1rem; }
.product-lines { border-color: var(--line); }
.privacy-banner, .job-search-band, .jobsearch-engine { background: #f0f5ef; color: var(--ink); }
.privacy-banner p:last-child, .job-search-copy > p:not(.kicker), .jobsearch-engine .body-large { color: var(--moss); }
.job-search-copy .kicker, .privacy-banner .kicker, .jobsearch-engine .kicker { color: var(--moss) !important; }
.tool-list, .tool-list > div, .engine-ledger, .engine-ledger div { border-color: var(--line-dark); }
.tool-list span, .engine-ledger span { color: var(--moss); font-family: var(--sans); }
.button-lime { background: var(--forest); color: #fff; border-color: var(--forest); }
.button-lime:hover { background: var(--forest-2); border-color: var(--forest-2); }
.pilot-cta { background: #faf8ef; }
.pilot-cta-grid { align-items: center; }
.product-preview, .screen-frame { border-color: var(--line); border-radius: 9px; overflow: hidden; }
.home-preview-tabs { border-radius: 8px 8px 0 0; overflow: hidden; }
.home-preview-panel .product-preview { border-radius: 0 0 8px 8px; }
.team-member img { border-radius: 9px; filter: none; }
.contact-section { padding: 72px 0 88px; }
.contact-layout { grid-template-columns: 1fr 1.1fr; gap: 72px; }
.contact-copy { position: static; }
.contact-copy .page-illustration { margin-top: 30px; }
.contact-copy .page-illustration > img { aspect-ratio: 1.6; }
.contact-note { font-size: .86rem; }
.contact-note .text-link { display: table; margin-top: 10px; }
.contact-form { background: #fafbf8; border: 1px solid var(--line); border-radius: 10px; padding: 32px; }
.meeting-booking { align-self: start; container: meeting / inline-size; background: #fafbf8; border: 1px solid var(--line); border-radius: 10px; padding: clamp(20px, 3vw, 36px); }
.meeting-booking h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.meeting-booking > p:not(.kicker) { color: var(--moss); margin-top: 20px; }
.meeting-booking .button { width: 100%; }
.meeting-booking .meeting-note { font-size: .8rem; text-align: center; margin-top: 12px; color: var(--moss); }
.meeting-booking form, .meeting-booking [data-meeting-success] { margin-top: 28px; }
.meeting-booking [hidden] { display: none !important; }
.meeting-date-time { display: grid; gap: 24px; padding-block: 24px; margin-bottom: 24px; border-block: 1px solid var(--line); }
.meeting-calendar { min-width: 0; }
.meeting-calendar h3, .meeting-time-options legend { font: 600 .88rem var(--sans); letter-spacing: 0; margin: 0 0 12px; padding: 0; }
.meeting-month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.meeting-month-nav p { font-size: 1.05rem; font-weight: 600; margin: 0; }
.meeting-month-buttons { display: flex; gap: 2px; }
.meeting-month-buttons button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--forest); cursor: pointer; }
.meeting-month-buttons svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.meeting-month-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; margin: 0; }
.meeting-month-grid th { height: 28px; padding: 0; color: var(--moss); font-size: .72rem; font-weight: 500; text-align: center; }
.meeting-month-grid td { height: 44px; padding: 0; border: 0; text-align: center; }
.meeting-month-grid button { width: 100%; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: var(--mint); color: var(--forest); font: 600 .9rem var(--sans); cursor: pointer; }
.meeting-calendar button:not(:disabled):hover { background: #e0eadc; }
.meeting-month-grid button[aria-pressed="true"], .meeting-month-grid button[aria-pressed="true"]:hover { background: var(--forest); color: var(--white); }
.meeting-calendar button:focus-visible { position: relative; z-index: 1; outline: 2px solid #bc7a0b; outline-offset: 2px; }
.meeting-booking .meeting-calendar button:disabled { color: #98a39c; background: transparent; cursor: default; opacity: 1; font-weight: 400; }
.meeting-calendar-help { margin-top: 10px; color: var(--moss); font-size: .72rem; line-height: 1.5; }
.meeting-time-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.meeting-selected-day { font-size: .81rem; color: var(--moss); margin: 0 0 14px; min-height: 36px; display: flex; align-items: center; }
.meeting-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.meeting-slots label { position: relative; cursor: pointer; }
.meeting-slots input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.meeting-slots span { display: block; border: 1px solid var(--line-dark); border-radius: 5px; padding: 12px 5px; font-size: .83rem; text-align: center; }
.meeting-slots input:checked + span { border-color: var(--forest); background: var(--forest); color: white; }
.meeting-slots input:focus-visible + span { outline: 3px solid #bc7a0b; outline-offset: 3px; }
.meeting-slots label:hover span { border-color: var(--forest); }
.meeting-timezone, .meeting-slot-status { color: var(--moss); font-size: .72rem; margin-top: 12px; line-height: 1.5; }
.meeting-slot-status:empty, .meeting-booking .form-status:empty { display: none; }
.meeting-guest-fields { display: grid; gap: 0 18px; }
@container meeting (min-width: 460px) {
  .meeting-date-time { grid-template-columns: minmax(0, 1fr) 144px; gap: 24px; }
  .meeting-time-options { border-left: 1px solid var(--line); padding-left: 20px; }
  .meeting-slots { grid-template-columns: 1fr; gap: 7px; }
  .meeting-slots span { padding-block: 9px; }
  .meeting-guest-fields { grid-template-columns: 1fr 1fr; }
}
.meeting-booking button:disabled { opacity: .55; cursor: not-allowed; }
.meeting-start-over { margin-top: 20px; background: transparent; cursor: pointer; }
.meeting-booking [data-meeting-success] p { margin: 20px 0; color: var(--moss); }
.meeting-booking [data-meeting-confirm] > p { margin-bottom: 20px; }
.field label { font-size: .83rem; letter-spacing: 0; text-transform: none; }
.field input, .field select, .field textarea { border-color: #cbd5cd; border-radius: 5px; background-color: #fff; min-width: 0; }
.field-helper { font-size: .77rem; }
.article-header, .legal-header { background: #f8faf5; border-color: var(--line); }
.article-header h1 { max-width: 900px; }
.article-prose p { font-family: var(--sans); font-size: 1.05rem; line-height: 1.8; }
.article-prose blockquote { font-family: var(--sans); border-color: var(--amber); }
.article-cover { width: 100%; height: 320px; object-fit: cover; border-radius: 8px; margin: 0 0 35px; }
.legal-body p, .legal-body li { font-size: .96rem; }
.site-footer { border-color: var(--line); padding-top: 45px; background: #fff; }
.footer-grid { gap: 45px; }
.footer-brand img { width: 184px; }
.footer-brand p { font-size: .86rem; }
.footer-col a { font-size: .85rem; }
.footer-bottom { font-size: .75rem; margin-top: 35px; padding: 22px 0; }
.footer-bottom > a { margin-left: auto; }
body.home-page .footer-grid, body.company-page .footer-grid { display: none; }
.home-footer { display: flex; align-items: center; gap: 30px; padding: 28px 0; font-size: .76rem; color: var(--moss); }
.home-footer img { width: 155px; height: auto; }
.home-footer-links { display: flex; flex-wrap: wrap; gap: 15px 26px; margin-left: auto; }
.home-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
body.home-page .site-footer, body.company-page .site-footer { padding-top: 0; }
body.home-page .footer-bottom, body.company-page .footer-bottom { display: none; }

/* Company landing: the existing brands and native product illustrations. */
.company-landing-hero { padding-block: 64px 48px; text-align: center; }
.company-landing-hero h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.08; }
.company-landing-hero > p { margin-top: 16px; font-size: clamp(1.3rem, 2.7vw, 2rem); color: var(--moss); }
.company-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 40px; }
.company-product { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 26px; }
.company-product-heading { min-height: 88px; }
.company-product-heading h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.2; }
.company-product-heading h2 img { width: auto; height: 48px; }
.company-product-heading > p { margin-top: 6px; font-size: 1rem; color: var(--moss); }
.company-product-visual { display: flex; align-items: center; width: 100%; aspect-ratio: 1.08; margin-block: 10px 24px; }
.company-product-visual .career-scene { width: 100%; margin: 0; aspect-ratio: 1.08; }
.company-product-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.company-product-copy > h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); margin-bottom: 12px; }
.company-product-copy > p { font-size: 1rem; line-height: 1.6; color: var(--moss); margin-bottom: 18px; }
.company-product-use-cases { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 22px; font-size: .8rem; }
.company-product-use-cases a { padding-block: 4px; }
.company-product-use-cases a:hover { text-decoration: underline; text-underline-offset: 4px; }
.company-product-copy > .button { margin-top: auto; }
.button-picasify { color: #fff; background: #820d2c; border-color: #820d2c; }
.button-picasify:hover { color: #fff; background: #660a24; border-color: #660a24; }

@media (min-width: 1700px) {
  .career-scene { width: calc(100% + 150px); margin-right: -150px; }
}
@media (max-width: 1100px) {
  :root { --header-height: 84px; }
  .shell { width: min(calc(100% - 48px), var(--shell)); }
  .site-header.scrolled { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu-button { display: block; }
  .site-nav { align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 0 0 10px 10px; box-shadow: 0 14px 30px #173f321a; display: none; flex-direction: column; gap: 0; inset: 100% 22px auto; max-height: calc(100vh - var(--header-height) - 24px); max-height: calc(100dvh - var(--header-height) - 24px); overflow: auto; overscroll-behavior: contain; padding: 8px 22px 22px; position: absolute; }
  .site-nav.open { display: flex; }
  .nav-link, .nav-product-button { border-bottom: 1px solid var(--line); font-size: 1.02rem; justify-content: space-between; padding: 17px 0; text-align: left; width: 100%; }
  .nav-link::after { display: none; }
  .nav-cta { margin-top: 20px; text-align: center; }
  .product-menu { border: 0; display: none; grid-template-columns: 1fr; left: auto; opacity: 1; padding: 8px 0; pointer-events: auto; position: static; transform: none; visibility: visible; width: auto; box-shadow: none; }
  .product-menu.open { display: grid; }
  .product-menu a { border-bottom: 1px solid var(--line); min-height: 0; padding: 15px 12px; }
  .welcome-grid { min-height: 540px; }
  .welcome-copy h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
  .welcome-copy .button-row { gap: 16px; }
  .welcome-copy .hero-intro { font-size: 1.03rem; }
  .career-scene { width: calc(100% + 50px); margin-right: -50px; }
  .page-hero-grid, .product-page .page-hero-grid { gap: 40px; }
  .contact-layout { gap: 40px; }
  .audience-grid { gap: 16px; }
  .audience-card { padding: 13px; }
  .audience-card-copy { padding-inline: 3px; }
  .progress-steps { gap: 40px; }
  .progress-steps li + li::before { left: -30px; }
}
@media (max-width: 860px) {
  .company-products { grid-template-columns: 1fr; }
  .company-landing-hero { padding-block: 46px 34px; }
  .company-product-heading { min-height: auto; }
  .company-product-visual { max-width: 620px; margin-inline: auto; }
  .company-product-picasify .company-product-visual { aspect-ratio: auto; margin-block: 28px; }
  .welcome-grid { grid-template-columns: 1fr; }
  .welcome-copy { padding: 54px 0 15px; }
  .welcome-copy h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
  .welcome-copy .hero-intro { max-width: 580px; font-size: 1.1rem; }
  .career-scene { width: 100%; margin: 0 auto; max-width: 700px; aspect-ratio: 1.3; }
  .career-screen { height: 73%; top: 5%; left: 4%; }
  .career-shared { top: 45%; left: 0; }
  .career-session { top: 76%; left: 22%; }
  .career-scene > figcaption { bottom: 0; }
  .audience-grid { grid-template-columns: 1fr; gap: 18px; }
  .audience-card { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; padding: 18px; }
  .audience-card > img { height: 100%; aspect-ratio: 1.25; }
  .audience-card-copy { padding: 12px 5px; }
  .audience-card h3 { font-size: 1.6rem; }
  .page-hero-grid, .product-page .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 54px 0; }
  .page-illustration { max-width: 650px; width: 100%; margin-inline: auto; }
  .page-illustration > img { aspect-ratio: 1.5; }
  .page-hero h1, .product-page .page-hero h1, .service-intro h1, .contact-copy h1, .article-header h1, .legal-header h1 { font-size: clamp(2.4rem, 6vw, 3.4rem); }
  .page-hero-visual-stack { grid-template-columns: 1fr 1fr; align-items: start; }
  .page-hero-visual-stack .page-illustration > img { aspect-ratio: .85; }
  .section { padding: 64px 0; }
  .workspace-examples-grid, .page-workspace .workspace-examples-grid { grid-template-columns: 1fr; gap: 30px; }
  .guidance-grid { grid-template-columns: 1fr; }
  .guidance-grid > div { padding-bottom: 10px; }
  .guidance-grid img { height: 230px; width: 100%; object-position: center; mask-image: linear-gradient(to bottom, transparent, #000 30%); }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-copy .page-illustration { max-width: none; }
  .contact-copy .page-illustration > img { aspect-ratio: 2; }
  .home-footer { flex-wrap: wrap; gap: 20px 25px; }
  .home-footer-links { margin-left: 0; }
}
@media (max-width: 760px) {
  :root { --header-height: 76px; }
  .brand { width: 185px; }
  .privacy-divider { gap: 15px; padding-block: 25px; }
  .privacy-divider p { gap: 9px; font-size: .8rem; }
  .privacy-divider > span { min-width: 10px; }
  .progress-steps { grid-template-columns: 1fr; gap: 35px; }
  .progress-steps li { display: grid; grid-template-columns: 55px 1fr; column-gap: 22px; }
  .progress-steps svg { width: 50px; height: 50px; grid-row: span 2; margin: 0; }
  .progress-steps li + li::before { display: none; }
  .progress-steps h3 { margin-bottom: 8px; }
  .progress-steps p { max-width: 48ch; }
}
@media (max-width: 600px) {
  .company-product { padding: 20px; }
  .company-product-visual { margin-block: 18px 24px; }
  .company-product-heading h2 img { height: 40px; }
  .company-product-copy > .button { width: 100%; }
  h2 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .section { padding: 52px 0; }
  .section-heading { gap: 22px; }
  .page-hero h1, .product-page .page-hero h1, .service-intro h1, .contact-copy h1, .article-header h1, .legal-header h1, .welcome-copy h1 { font-size: clamp(2rem, 7.8vw, 2.8rem); }
  .welcome-copy .hero-intro, .page-intro { font-size: 1.03rem; }
  .welcome-copy { padding-top: 40px; }
  .welcome-copy .button-row { gap: 15px 20px; margin-top: 24px; }
  .welcome-copy .button { padding-inline: 18px; }
  .welcome-copy .kicker { font-size: .6rem; letter-spacing: .1em; }
  .career-scene { margin-top: 20px; }
  .career-scene > figcaption { font-size: .55rem; }
  .privacy-divider { gap: 9px; }
  .privacy-divider p { font-size: .72rem; }
  .privacy-divider svg { width: 16px; }
  .audience-section { padding: 30px 0 44px; }
  .audience-section h2 { margin-bottom: 26px; }
  .audience-card { display: flex; gap: 0; padding: 16px; }
  .audience-card > img { height: auto; aspect-ratio: 1.5; }
  .audience-card-copy { padding: 24px 7px 8px; }
  .audience-card h3 { font-size: 1.65rem; }
  .audience-card p:not(.kicker) { font-size: 1rem; }
  .progress-section { padding: 42px 0; }
  .progress-steps { margin-top: 30px; }
  .page-hero-visual-stack { grid-template-columns: 1fr; }
  .page-hero-visual-stack .page-illustration > img { aspect-ratio: 1.5; }
  .page-illustration figcaption { margin-inline: 14px; padding: 16px; }
  .page-illustration figcaption small { font-size: .75rem; }
  .contact-section { padding: 42px 0 55px; }
  .contact-form { padding: 23px 19px; }
  .process-grid article, .process-grid article:first-child, .process-grid article:last-child { padding: 24px 0; }
  .coaching-preview-steps { flex-wrap: wrap; }
  .coaching-preview-steps::before { display: none; }
  .footer-grid { gap: 28px; }
  .footer-bottom > a { margin-left: 0; }
  .home-footer { font-size: .72rem; }
  .home-footer img { width: 145px; }
  .home-footer-links { width: 100%; gap: 25px; }
  .article-cover { height: 220px; }
}
@media (max-width: 480px) {
  .shell { width: calc(100% - 40px); }
  .privacy-divider > span { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}