/* Proxy over px. px's type, buttons and spacing stay; the colour comes from the painting: anything px made blue
   is now a piece of the landscape, and the solid colours that remain were sampled off it. */
@import url("./fonts/fonts-local.css");

:root {
  --px-chip: url("./brand/chip-glow.webp");        /* the painting, small: buttons, dots, fills */
  --px-ink: #121212;
  --px-maroon: #7a3340;                            /* the cliff */
  --px-sunset: #e97a4a;                            /* the sky at the horizon */
}

/* ── background tone (mock switcher) ── */
html[data-bg="white"] { --base-color-neutral--light: #ffffff; --base-color-neutral--light-50: #ffffff80; --base-color-neutral--light-60: #ffffff99; }
/* px's nav glass is a literal of their off-white; tie it to the page tone so the bar always matches */
.navbar_component { background-color: color-mix(in srgb, var(--base-color-neutral--light) 75%, transparent) !important; }
html[data-bg="sand"] { --base-color-neutral--light: #fbf7f2; --base-color-neutral--light-50: #fbf7f280; --base-color-neutral--light-60: #fbf7f299; }

/* ── the logo: a heavy lowercase wordmark and a small window onto the painting ── */
.px-logo { display: inline-flex; align-items: center; color: var(--px-ink); line-height: 1; white-space: nowrap; flex: none; width: max-content; }
.px-logo .pw, .px-logo .pb { flex: none; }
.px-logo .lv { display: none; align-items: baseline; }
.px-logo .lv-4 { align-items: center; }
html[data-logo="1"] .px-logo .lv-1, html[data-logo="2"] .px-logo .lv-2, html[data-logo="3"] .px-logo .lv-3,
html[data-logo="4"] .px-logo .lv-4, html:not([data-logo]) .px-logo .lv-1 { display: inline-flex; }
/* a heavy grotesk like px's wordmark (Inter 800; the shipped mark will be outlined SVG) */
.pw {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--px-ink);
}
.pb { display: inline-block; background-size: cover; background-position: center; font-size: 1.75rem; }
.n-cliff { background-image: url("./brand/logo-cliff.webp"); }
.n-butte { background-image: url("./brand/logo-butte.webp"); }
.n-sun { background-image: url("./brand/logo-sun.webp"); }
/* px's block, measured off their mark: top above the x-height, bottom on the baseline, 0.7 as wide as tall */
.pb.block { width: 0.56em; height: 0.8em; margin-left: 0.05em; vertical-align: -0.05em; }
.pb.tile { width: 1.75rem; height: 1.75rem; border-radius: 0.45rem; margin-right: 0.45rem; font-size: 1rem; }

/* ── the palette: every fill px made brand blue now shows the painting (rules generated by skin.py) ── */
.background-color-tertiary,
.banner_component,
.brain-2-dot,
.brand-button_text.is-pricing-popular,
.button.is-pricing-popular,
.button_icon-wrapper,
.chip.blue,
.eyebrow_dot-second.is-secondary,
.fs-styleguide_label.is-tag,
.hero-visual-progress,
.linkedin-link.text-color-dark-brand,
.popular-badge,
.step-2_line,
.text-recommended,
.text-size-regular.text-color-dark-brand,
.text-size-submedium.text-color-dark-brand,
.text-size-xsubmedium.text-color-dark-brand,
.timeline_line,
.timeline_progress-line {
  background-image: var(--px-chip);
  background-size: cover;
  background-position: center;
}

.eyebrow_dot-second { background-image: var(--px-chip); background-size: cover; background-position: center; }

/* "Your AI FDE": the painting seen through the letters */
.px-nature-text {
  background-image: url("./brand/text-fill.webp");
  background-size: cover;
  background-position: center 40%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;              /* room for descenders inside the clip */
  font-family: "Inter Tight", Pxsans, sans-serif;
  font-weight: 600;                    /* heavy enough for the painting to read through the letters */
  letter-spacing: -0.045em;
}

/* headline options (mock switcher): 1 mesas, 4 soft painting, 5 whole scene per letter, 8 both lines Inter Tight */
html[data-h="4"] .px-nature-text { background-image: url("./brand/soft.webp"); }
html[data-h="5"] .px-nature-text { background-image: url("./brand/scene.webp"); background-size: 100% 100%; }
html[data-h="8"] .section_hero h1 { font-family: "Inter Tight", Pxsans, sans-serif; font-weight: 600; letter-spacing: -0.045em; }

/* ── buttons: black at rest with the painting in the circle; on hover the whole pill becomes one painting and the
   circle turns to glass over it, so it reads as a single picture rather than two pieces ── */
:root { --px-band: url("./brand/btn-band.webp"); }
html[data-btn="butte"] { --px-band: url("./brand/btn-band2.webp"); --px-chip: url("./brand/chip-mesa.webp"); }
html[data-btn="cliff"] { --px-band: url("./brand/btn-cliff.webp"); --px-chip: url("./brand/chip-cliff.webp"); }
html[data-btn="buttes"] { --px-band: url("./brand/btn-buttes.webp"); --px-chip: url("./brand/chip-buttes.webp"); }
html[data-btn="valley"] { --px-band: url("./brand/btn-valley.webp"); --px-chip: url("./brand/chip-valley.webp"); }
html[data-btn="wide"] { --px-band: url("./brand/btn-wide.webp"); --px-chip: url("./brand/chip-wide.webp"); }
.button-new, .button.new-animation { position: relative; isolation: isolate; overflow: hidden; }
/* overflow clips the painting at the padding edge, so the black must stop there too or it rings the border */
.button.new-animation { background-clip: padding-box; }
.button-new::before, .button.new-animation::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;   /* -1px covers the border ring */
  background: var(--px-band) center / cover no-repeat;
  opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.button-new:hover::before, .button.new-animation:hover::before { opacity: 1; }
/* the black crossfades out as the painting fades in, so no dark edge is left at the rounded rim */
.button-new, .button.new-animation { transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s; }
.button-new:hover { background-color: transparent; color: var(--px-ink); }
.button.new-animation:hover { background-image: none !important; background-color: transparent !important; color: var(--px-ink) !important; border-color: transparent !important; }
.button_icon-wrapper { transition: background-color 0.4s, box-shadow 0.4s; }
/* the circle swaps places with the pill: ink over the painting, the arrow in white */
.button-new:hover .button_icon-wrapper { background-image: none; background-color: var(--px-ink); color: #fff; }
/* "Sign in" stays a quiet text link */
.button.is-tertiary:hover, .button.is-nav-secondary:hover { background-color: transparent; background-image: none; opacity: 0.65; }

/* ── the hero ── */
/* the one line of proof under the button, kept small */
.section_hero .hero-cta_block { flex-direction: column; gap: 0.9rem; }
.px-backed { font-size: 0.8125rem; color: var(--_theme---text-primary-faded); letter-spacing: 0; }
.px-backed span { color: var(--px-ink); font-weight: 500; }
.section_hero p.text-size-submedium.text-color-primary-faded { text-align: center; }
.section_hero .hero-logo_icon { object-fit: contain; padding: 0.1rem; }

/* layout: split. The headline holds the left, the promise and the button answer it on the right, and the product
   frame runs the full width underneath. px's nesting is flattened with display: contents so this is CSS alone. */
html[data-layout="split"] .section_hero .container-large {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto;     /* the right column sinks to the headline's last line */
  column-gap: 5rem;
}
html[data-layout="split"] .section_hero .max-width-medium,
html[data-layout="split"] .section_hero .max-width-medium > .v-flex,
html[data-layout="split"] .section_hero .max-width-medium .v-flex.gap-16 { display: contents; }
html[data-layout="split"] .section_hero .eyebrow_block { grid-column: 1; grid-row: 1; margin-bottom: 1.75rem; }
html[data-layout="split"] .section_hero h1 {
  grid-column: 1; grid-row: 2 / span 3; text-align: left; font-size: 7rem; line-height: 0.98; letter-spacing: -0.035em; margin: 0;
}
html[data-layout="split"] .section_hero p.text-size-submedium.text-color-primary-faded {
  grid-column: 2; grid-row: 2; text-align: left; font-size: 1.375rem; line-height: 1.4; max-width: 26rem; margin: 0 0 1.5rem; align-self: end;
}
html[data-layout="split"] .section_hero p.text-size-submedium.text-color-primary-faded br { display: none; }
html[data-layout="split"] .section_hero .w-layout-hflex.h-center { grid-column: 2; grid-row: 4; justify-content: flex-start; margin: 0; padding-bottom: 0.6rem; }
html[data-layout="split"] .section_hero .hero-cta_block { grid-column: 2; grid-row: 3; justify-content: flex-start; align-items: flex-start; margin: 0 0 1.25rem; }
html[data-layout="split"] .section_hero .hero-visual_container { grid-column: 1 / -1; grid-row: 5; margin-top: 3.5rem; }
html[data-layout="split"] .section_hero .hero-tm_container { grid-column: 1 / -1; grid-row: 6; }

/* below desktop the split folds into one left-aligned column, in reading order */
@media (max-width: 991px) {
  html[data-layout="split"] .section_hero .container-large { display: block; }
  html[data-layout="split"] .section_hero h1 { font-size: clamp(3.25rem, 11vw, 5.5rem); margin: 0 0 1.5rem; }
  html[data-layout="split"] .section_hero p.text-size-submedium.text-color-primary-faded { font-size: 1.2rem; margin: 0 0 1.25rem; }
  html[data-layout="split"] .section_hero .w-layout-hflex.h-center { margin: 0 0 1.75rem; padding: 0; }
  html[data-layout="split"] .section_hero .hero-cta_block { margin: 0; }
  html[data-layout="split"] .section_hero .hero-visual_container { margin-top: 2.5rem; }
}

/* layout: left. One left-aligned column, the button and the connectors on one line */
html[data-layout="left"] .section_hero .container-large { display: grid; grid-template-columns: auto 1fr; column-gap: 1.75rem; }
html[data-layout="left"] .section_hero .max-width-medium,
html[data-layout="left"] .section_hero .max-width-medium > .v-flex,
html[data-layout="left"] .section_hero .max-width-medium .v-flex.gap-16 { display: contents; }
html[data-layout="left"] .section_hero .eyebrow_block { grid-column: 1 / -1; margin-bottom: 1.75rem; }
html[data-layout="left"] .section_hero h1 { grid-column: 1 / -1; text-align: left; font-size: 6.75rem; line-height: 0.98; letter-spacing: -0.035em; margin: 0; }
html[data-layout="left"] .section_hero p.text-size-submedium.text-color-primary-faded { grid-column: 1 / -1; text-align: left; font-size: 1.5rem; line-height: 1.4; max-width: 34rem; margin: 1.75rem 0 2.25rem; }
html[data-layout="left"] .section_hero p.text-size-submedium.text-color-primary-faded br { display: none; }
html[data-layout="left"] .section_hero .hero-cta_block { grid-column: 1; grid-row: 4; margin: 0; align-items: flex-start; }
html[data-layout="left"] .section_hero .w-layout-hflex.h-center { grid-column: 2; grid-row: 4; justify-content: flex-start; align-self: center; margin: 0; }
html[data-layout="left"] .section_hero .hero-visual_container { grid-column: 1 / -1; margin-top: 4rem; }
html[data-layout="left"] .section_hero .hero-tm_container { grid-column: 1 / -1; }

/* ── the painting, wherever px used a grain gradient ── */
.hero-visual_container > .bg-image { object-fit: cover; object-position: center 58%; }
.cta_banner, .phone {
  background-image: url("./painting-cta.webp") !important;
  background-size: cover !important;
  background-position: center 60% !important;
}
/* the tab bar sat on px's dark blue; on a bright sky it needs its own dark glass to stay legible */
.hero-visual_nav {
  background: rgba(28, 20, 14, 0.38) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* ── mock-only switcher ── */
.px-sw {
  position: fixed; left: 14px; bottom: 14px; z-index: 9999; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 12px; background: #111; color: #fff;
  font: 500 12px/1.2 Pxsans, system-ui, sans-serif; box-shadow: 0 10px 30px #0004;
}
.px-sw-r { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 640px; }
.px-sw-r > span { width: 48px; color: #999; }
.px-sw button { border: 0; border-radius: 7px; padding: 5px 8px; background: #2a2a2a; color: #ddd; cursor: pointer; font: inherit; }
.px-sw button.on { background: #f48d16; color: #111; }

/* ══ Proxy's own sections below the hero ══════════════════════════════════════════════════════════════════════ */
.px-sec { padding: 8rem 0 2rem; color: #121212; }
.px-h2 { font: 400 4rem/1.02 Pxsans, sans-serif; letter-spacing: -.035em; margin: 0; max-width: 60rem; }
.px-h2 span { color: var(--_theme---text-primary-faded); }
.px-h2-s { font-size: 3.25rem; }
.px-k { font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--_theme---text-primary-faded); }
.px-card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 12px 32px rgba(60,30,10,.08); }
.px-tile-img { display: block; width: 100%; height: 100%; border-radius: 22%; background: url("./brand/logo-cliff.webp") center / cover; }
.px-caret { display: inline-block; width: 1.5px; height: 1em; background: #F48D16; vertical-align: -.12em; margin-left: 1px; }

/* 2 · the role */
.px-role-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 3.5rem; margin-top: 4rem; align-items: stretch; }
.px-role-list { display: flex; flex-direction: column; }
.px-role-row { all: unset; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; row-gap: .4rem; padding: 1.6rem 0 1.4rem; border-top: 1px solid var(--border-color--light); position: relative; }
.px-role-row:last-child { border-bottom: 1px solid var(--border-color--light); }
.px-role-tag { grid-row: 1 / span 2; align-self: start; width: 8.5rem; text-align: center; font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: var(--_theme---text-primary-faded);
  border: 1px solid var(--border-color--light); border-radius: 999px; padding: .4rem 0; transition: color .3s, border-color .3s, background .3s; }
.px-role-t { font-size: 1.375rem; letter-spacing: -.01em; color: var(--_theme---text-primary-faded); transition: color .3s; }
.px-role-d { grid-column: 2; font-size: .9375rem; line-height: 1.5; color: var(--_theme---text-primary-faded); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s cubic-bezier(.22,1,.36,1), opacity .4s; }
.px-role-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.px-role-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #E9A877, #F48D16); }
.px-role-row.is-on .px-role-t { color: #121212; }
.px-role-row.is-on .px-role-d { max-height: 6rem; opacity: 1; }
.px-role-row.is-on .px-role-tag { color: #fff; border-color: transparent; background: url("./brand/chip-buttes.webp") center / cover; box-shadow: inset 0 0 0 100px rgba(40,18,10,.2); }
.px-role-stage { position: relative; border-radius: 1.75rem; overflow: hidden; min-height: 30rem; background: #c87a4a url("./painting-1200.webp") center 64% / cover; isolation: isolate; }
.px-role-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30,15,8,.1), rgba(30,15,8,.35)); }
.px-live { position: absolute; left: 1.5rem; top: 1.25rem; display: flex; gap: .5rem; align-items: center; color: #fff; font-size: .8125rem; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.px-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #FFD08A; box-shadow: 0 0 0 4px rgba(255,208,138,.25); animation: pxPulse 1.6s ease-in-out infinite; }
@keyframes pxPulse { 50% { box-shadow: 0 0 0 7px rgba(255,208,138,0); } }
.px-view { position: absolute; inset: 4rem 1.5rem 1.5rem; opacity: 0; transform: translateY(.75rem); filter: blur(2px); transition: opacity .45s, transform .55s cubic-bezier(.22,1,.36,1), filter .45s; pointer-events: none; }
.px-view.is-on { opacity: 1; transform: none; filter: none; }
/* the call */
.px-call { display: flex; flex-direction: column; gap: .9rem; height: 100%; }
.px-faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.px-faces > span { position: relative; aspect-ratio: 4 / 3; border-radius: .75rem; display: grid; place-items: center; color: #fff; font: 400 1.5rem Pxsans; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.px-faces > span:first-child { box-shadow: 0 0 0 2.5px #fff, 0 6px 18px rgba(0,0,0,.2); }
.px-face-px { background: #2a1d18 url("./brand/logo-cliff.webp") center 42% / 38% no-repeat; }
.px-faces em { position: absolute; left: .45rem; bottom: .35rem; font: normal .625rem Pxsans; color: rgba(255,255,255,.9); }
.px-wave { position: absolute; right: .4rem; top: .4rem; display: flex; gap: 2px; align-items: center; height: .75rem; }
.px-wave b { width: 2.5px; border-radius: 2px; background: #fff; animation: pxWave .9s ease-in-out infinite; }
.px-wave b:nth-child(2) { animation-delay: -.3s; } .px-wave b:nth-child(3) { animation-delay: -.6s; }
@keyframes pxWave { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.px-capt { background: rgba(20,14,10,.72); backdrop-filter: blur(10px); color: #fff; border-radius: .75rem; padding: .75rem .9rem; font-size: .9375rem; line-height: 1.4; }
.px-capt b { display: block; font-weight: 500; font-size: .75rem; color: rgba(255,255,255,.65); margin-bottom: .15rem; }
.px-whisper { padding: 1rem 1.1rem; margin-top: auto; font-size: 1rem; line-height: 1.45; }
.px-whisper .px-k { color: #B4570B; margin-bottom: .35rem; }
.px-whisper .px-type { min-height: 2.9em; }
.px-srcs { display: flex; gap: .4rem; margin-top: .6rem; }
.px-srcs span { font: .6875rem Pxmono, monospace; color: var(--_theme---text-primary-faded); border: 1px solid var(--border-color--light); border-radius: .4rem; padding: .1rem .4rem; }
/* the code */
.px-builds { padding: 1.25rem 1.3rem; height: 100%; display: flex; flex-direction: column; gap: .85rem; }
.px-b { display: grid; grid-template-columns: 9.5rem 1fr 4.5rem; gap: .9rem; align-items: center; font-size: .9375rem; }
.px-b i { height: .45rem; border-radius: 99px; background: #F1ECE6; overflow: hidden; }
.px-b i b { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #E9A877, #F48D16); transition: width 2.6s cubic-bezier(.16,1,.3,1); }
.px-view.is-on .px-b i b { width: var(--w); }
.px-b em { font: normal .75rem Pxmono, monospace; color: var(--_theme---text-primary-faded); text-align: right; }
.px-total { margin-top: auto; display: flex; align-items: baseline; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--border-color--light); font-size: .9375rem; color: var(--_theme---text-primary-faded); }
.px-total b { font: 400 2.5rem Pxsans; letter-spacing: -.03em; color: #2F6B45; margin-left: auto; }
/* the account */
.px-feed { display: flex; flex-direction: column; gap: .6rem; }
.px-ev { display: flex; gap: .85rem; align-items: center; padding: .85rem 1rem; opacity: 0; transform: translateY(.6rem); transition: opacity .4s, transform .5s cubic-bezier(.22,1,.36,1); }
.px-view.is-on .px-ev { opacity: 1; transform: none; }
.px-view.is-on .px-ev:nth-child(2) { transition-delay: .5s; } .px-view.is-on .px-ev:nth-child(3) { transition-delay: 1s; } .px-view.is-on .px-ev:nth-child(4) { transition-delay: 1.5s; }
.px-ev img, .px-ev-ic { width: 1.5rem; height: 1.5rem; flex: none; }
.px-ev-ic { display: grid; place-items: center; border-radius: .4rem; background: #FFF1DE; color: #B4570B; font-size: .875rem; }
.px-ev div { display: flex; flex-direction: column; gap: .1rem; font-size: .9375rem; } .px-ev b { font-weight: 500; } .px-ev span { font-size: .8125rem; color: var(--_theme---text-primary-faded); }
.px-ev em { margin-left: auto; font: normal .75rem Pxmono, monospace; color: var(--_theme---text-primary-faded); }
/* where it reaches you */
.px-reach { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: 2.5rem; }
.px-reach-g { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .875rem; color: var(--_theme---text-primary-faded); }
.px-reach-g > span:first-child { margin-right: .4rem; }
.px-pill { display: inline-flex; gap: .45rem; align-items: center; color: #121212; border: 1px solid var(--border-color--light); border-radius: 999px; padding: .4rem .75rem; background: #fff; }
.px-pill img, .px-pill-tile { width: 1rem; height: 1rem; flex: none; } .px-pill-tile { border-radius: .25rem; }

/* 3 · the week */
.px-week-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 3.5rem; align-items: start; }
.px-jobs { list-style: none; padding: 0; margin: 2.75rem 0 0; display: flex; flex-direction: column; }
.px-jobs li { display: grid; grid-template-columns: 1.25rem 7rem 1fr; gap: .75rem; align-items: center; padding: .8rem 0; border-top: 1px solid var(--border-color--light); font-size: 1rem; color: var(--_theme---text-primary-faded); transition: color .4s; }
.px-jobs li i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1.5px solid #D8CEC2; transition: all .35s; display: grid; place-items: center; }
.px-jobs li.is-done { color: #121212; }
.px-jobs li.is-done i { border-color: transparent; background: url("./brand/chip-buttes.webp") center / cover; }
.px-jobs li.is-done i::after { content: "✓"; color: #fff; font-size: .625rem; }
.px-j-st { font-size: .75rem; color: #9A5A2E; }
.px-cal-wrap { border-radius: 1.75rem; padding: 1.5rem; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 50px rgba(60,30,10,.09); position: sticky; top: 6rem; }
.px-cal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.1rem; }
.px-cal-big { font-size: 1rem; color: var(--_theme---text-primary-faded); margin-top: .25rem; }
.px-cal-big b { font: 400 2.5rem Pxsans; letter-spacing: -.03em; color: #121212; margin-right: .35rem; font-variant-numeric: tabular-nums; }
.px-cal-key { display: flex; gap: .9rem; font-size: .75rem; color: var(--_theme---text-primary-faded); }
.px-cal-key span { display: flex; gap: .35rem; align-items: center; } .px-cal-key i { width: .7rem; height: .7rem; border-radius: 3px; }
.k-you { background: #EDE7E0; } .k-px { background: url("./brand/chip-buttes.webp") center / cover; } .k-call { background: #fff; box-shadow: inset 0 0 0 1.5px #E2A06A; }
.px-cal-days { display: grid; grid-template-columns: 2.75rem repeat(5, 1fr); gap: .35rem; font-size: .75rem; color: var(--_theme---text-primary-faded); margin-bottom: .4rem; }
.px-cal-body { display: grid; grid-template-columns: 2.75rem 1fr; }
.px-cal-hours { position: relative; height: 26rem; } .px-cal-hours span { position: absolute; top: calc(var(--s) * 26rem / 8.5); font: .625rem Pxmono, monospace; color: var(--_theme---text-primary-faded); transform: translateY(-50%); }
.px-cal-grid { position: relative; height: 26rem; background: repeating-linear-gradient(180deg, #F3EEE8 0 1px, transparent 1px calc(26rem / 8.5)); border-radius: .5rem; }
.px-blk { position: absolute; left: calc(var(--d) * 20% + .2rem); width: calc(20% - .4rem); top: calc(var(--s) * 26rem / 8.5 + 1px); height: calc(var(--l) * 26rem / 8.5 - 3px);
  border-radius: .45rem; background: #EDE7E0; color: #5A5148; font-size: .6875rem; line-height: 1.2; padding: .3rem .4rem; overflow: hidden; transition: background .5s, color .5s, transform .5s cubic-bezier(.22,1,.36,1); }
.px-blk::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(70,25,12,.28), rgba(70,25,12,.38)), url("./painting-1200.webp") calc(var(--d) * 25%) calc(55% + var(--s) * 5%) / 600% auto; opacity: 0; transition: opacity .55s; }
.px-blk span { position: relative; }
.px-blk.is-px { color: #fff; transform: scale(.985); }
.px-blk.is-px::before { opacity: 1; }
.px-blk.is-px span { text-shadow: 0 1px 4px rgba(40,15,5,.6); }
.px-blk.is-call { background: #fff; box-shadow: inset 0 0 0 1.5px #E2A06A; color: #8A4A06; }
.px-blk.is-you { background: #121212; color: #fff; }

/* 4 · the gates */
.px-gates-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: end; }
.px-gates-lede { font-size: 1.125rem; line-height: 1.5; color: var(--_theme---text-primary-faded); margin: 0; }
.px-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4rem; }
.px-track-line { position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 2px; background: linear-gradient(90deg, #E9A877, #F48D16, #A6463A); border-radius: 2px; }
.px-pulse { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #F48D16, 0 0 18px #F48D16; animation: pxTravel 4.5s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes pxTravel { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }
.px-gate { position: relative; }
.px-gate-n { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font: .8125rem Pxmono, monospace; position: relative; z-index: 1;
  background: url("./brand/chip-cliff.webp") center / cover; box-shadow: 0 0 0 6px var(--base-color-neutral--light); }
.px-gate h3 { font: 400 1.5rem/1.2 Pxsans; letter-spacing: -.015em; margin: 1.5rem 0 .5rem; }
.px-gate p { margin-top: .75rem !important; font-size: .9375rem; line-height: 1.5; color: var(--_theme---text-primary-faded); margin: 0 0 1.25rem; max-width: 22rem; }
.px-src, .px-prove, .px-yes { padding: .4rem 1rem; }
.px-src-r { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 0; border-bottom: 1px solid var(--border-color--light); font-size: .9375rem; }
.px-src-r:last-child { border: 0; } .px-src-r b { font-weight: 500; }
.px-src-r span { align-self: flex-start; font: .6875rem Pxmono, monospace; color: #8A4A06; background: #FFF1DE; border-radius: .35rem; padding: .1rem .4rem; }
.px-prove-top { display: flex; justify-content: space-between; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--border-color--light); font-size: .8125rem; color: var(--_theme---text-primary-faded); }
.px-prove-top b { font: 400 1.25rem Pxsans; color: #2F6B45; }
.px-ok { display: flex; gap: .6rem; align-items: center; padding: .6rem 0; font-size: .9375rem; border-bottom: 1px solid var(--border-color--light); }
.px-ok:last-child { border: 0; }
.px-ok::before { content: "✓"; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #4E9F6B; color: #fff; font-size: .625rem; display: grid; place-items: center; flex: none; }
.px-yes-r { display: flex; align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--border-color--light); }
.px-yes-r:last-child { border: 0; }
.px-yes-r div { display: flex; flex-direction: column; gap: .15rem; font-size: .9375rem; } .px-yes-r b { font-weight: 500; } .px-yes-r span { font-size: .8125rem; color: var(--_theme---text-primary-faded); }
.px-yes-r em { margin-left: auto; font-style: normal; font-size: .8125rem; border-radius: 999px; padding: .4rem .9rem; background: #121212; color: #fff; }
.px-approve { animation: pxTap 4.5s ease-in-out infinite; }
@keyframes pxTap { 0%, 70% { transform: none; background: #121212; } 74% { transform: scale(.93); } 80%, 100% { transform: none; background: #4E9F6B; } }

/* 5 · the comparison */
.px-compare { padding-bottom: 8rem; }
.px-cmp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.25rem; margin-top: 3.5rem; }
.px-cmp-card { border-radius: 1.5rem; padding: 1.75rem; color: #fff; position: relative; overflow: hidden; isolation: isolate; background: #2a1d18 url("./painting-cta.webp") center 60% / cover; }
.px-cmp-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(24,14,10,.55), rgba(24,14,10,.78)); }
.px-cmp-head { display: grid; grid-template-columns: 1fr auto auto; gap: 1.25rem; font-size: .75rem; color: rgba(255,255,255,.8); margin-bottom: .5rem; }
.px-cmp-key { display: flex; gap: .4rem; align-items: center; } .px-cmp-key span { width: .625rem; height: .625rem; border-radius: 3px; }
.px-cmp-key .is-wo { background: rgba(255,255,255,.35); } .px-cmp-key .is-px { background: #F7B267; }
.px-cmp-row { padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.16); }
.px-cmp-l { font-size: .875rem; color: rgba(255,255,255,.75); margin-bottom: .6rem; }
.px-cmp-bars { display: flex; flex-direction: column; gap: .4rem; }
.px-cmp-bar { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; }
.px-cmp-bar i { display: block; height: .75rem; border-radius: 99px; width: 0; transition: width 1.2s cubic-bezier(.16,1,.3,1); }
.px-cmp-bar.is-wo i { background: rgba(255,255,255,.3); } .px-cmp-bar.is-wo span { color: rgba(255,255,255,.7); }
.px-cmp-bar.is-px i { background: linear-gradient(90deg, #F7B267, #F48D16); } .px-cmp-bar.is-px span { font-weight: 500; }
.px-in .px-cmp-bar i { width: calc(var(--w) * .7); }
.px-cmp-side { border: 1px solid var(--border-color--light); border-radius: 1.5rem; padding: 1.75rem; background: #fff; display: flex; flex-direction: column; }
.px-cmp-side-h { font-size: 1.125rem; margin-bottom: .5rem; }
.px-cmp-q { padding: 1rem 0; border-top: 1px solid var(--border-color--light); display: grid; gap: .3rem; }
.px-cmp-q .px-cmp-l { color: var(--_theme---text-primary-faded); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.px-cmp-wo { font-size: .9375rem; color: var(--_theme---text-primary-faded); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.px-cmp-px { font-size: 1rem; display: flex; gap: .5rem; align-items: center; } .px-cmp-px i { width: .5rem; height: .5rem; border-radius: 50%; background: #F48D16; flex: none; }
.px-cmp-note { margin-top: auto; padding-top: 1rem; display: flex; gap: .75rem; align-items: center; font-size: .9375rem; } .px-cmp-note .px-tile-img { width: 2rem; height: 2rem; flex: none; }

/* 6 · the closing banner */
.px-cta-backed { font-size: .875rem; color: rgba(255,255,255,.75); align-self: end; } .px-cta-backed b { color: #fff; font-weight: 500; }

/* the shared rise-in */
.px-rv { opacity: 0; transform: translateY(.75rem); filter: blur(2px); transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease; }
.px-rv.is-visible { opacity: 1; transform: none; filter: none; }

@media (max-width: 991px) {
  .px-h2 { font-size: 2.75rem; } .px-h2-s { font-size: 2.4rem; }
  .px-role-grid, .px-week-grid, .px-gates-head, .px-track, .px-cmp { grid-template-columns: 1fr; }
  .px-track-line { display: none; } .px-cal-wrap { position: static; }
}
@media (max-width: 767px) {
  .px-sec { padding-top: 5rem; } .px-h2 { font-size: 2.25rem; } .px-h2-s { font-size: 2rem; }
  .px-role-tag { width: 7rem; } .px-role-stage { min-height: 27rem; } .px-b { grid-template-columns: 7rem 1fr 3.5rem; }
  .px-jobs li { grid-template-columns: 1.25rem 1fr; } .px-j-st { display: none; }
  .px-cal-wrap { padding: 1rem; } .px-blk span { display: none; }
  .px-cal-head { flex-direction: column; align-items: flex-start; } .px-cal-key { flex-wrap: wrap; } .px-faces em { display: none; }
}
.section_cta .cta_banner { position: relative; isolation: isolate; }
.section_cta .cta_banner::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(40,18,8,.18), rgba(40,18,8,.5)); }
.section_cta .cta_banner, .section_cta .cta_banner p, .section_cta .cta_banner h2 { text-shadow: 0 2px 18px rgba(50,20,5,.35); }

/* the footer */
.px-foot { padding: 5rem 0 2.5rem; color: #121212; }
.px-foot-top { display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; padding-bottom: 3rem; border-bottom: 1px solid var(--border-color--light); }
.px-foot-logo { display: inline-flex; align-items: center; gap: .5rem; font: 800 1.75rem Inter, sans-serif; letter-spacing: -.04em; }
.px-foot-logo .px-tile-img { width: 1.75rem; height: 1.75rem; border-radius: .45rem; }
.px-foot-brand p { margin: .9rem 0 0; max-width: 22rem; font-size: .9375rem; line-height: 1.5; color: var(--_theme---text-primary-faded); }
.px-foot-cols { display: flex; gap: 4.5rem; }
.px-foot-cols div { display: flex; flex-direction: column; gap: .7rem; font-size: .9375rem; }
.px-foot-cols b { font-weight: 500; margin-bottom: .2rem; } .px-foot-cols a { color: var(--_theme---text-primary-faded); text-decoration: none; } .px-foot-cols a:hover { color: #121212; }
.px-foot-bot { display: flex; justify-content: space-between; align-items: center; padding-top: 1.75rem; font-size: .8125rem; color: var(--_theme---text-primary-faded); }
.px-e2b img { height: 1.5rem; width: auto; opacity: .7; }
@media (max-width: 767px) { .px-foot-cols { gap: 2rem; flex-wrap: wrap; } .px-foot-bot { flex-direction: column; gap: 1rem; align-items: flex-start; } }

/* in-page links land below the fixed nav */
#product, #role, #week, #quality, #results { scroll-margin-top: 6rem; }
.px-foot-bot a { color: inherit; text-decoration: none; } .px-foot-bot a:hover { color: #121212; }

/* buttons: the arrow reads in white on a bright piece of the painting */
.button_icon-wrapper, .button_icon-wrapper .button-icon-2, .button_icon-wrapper svg { color: #fff !important; }
.button_icon-wrapper svg path, .button_icon-wrapper svg line, .button_icon-wrapper svg polyline { stroke: #fff; }
.button_icon-wrapper svg [fill]:not([fill="none"]) { fill: #fff; }
.button_icon-wrapper { box-shadow: inset 0 0 0 100px rgba(60, 20, 5, .12); }
.button_icon-wrapper svg { filter: drop-shadow(0 1px 2px rgba(40, 12, 0, .45)); }
/* on the dark closing painting, the pill turns white so it stands off the background */
.section_cta .button-new { background-color: #fff !important; color: #121212 !important; box-shadow: 0 12px 34px rgba(30, 10, 0, .35); }
.section_cta .button-new:hover { color: #121212 !important; }
/* the bar holds only the logo, Sign in and Hire Proxy, at every width */
.navbar_component .navbar_link-wrap { display: none !important; }
.navbar_component .menu-button { display: none !important; }
.navbar_component .button.is-tertiary.hide-tablet { display: inline-block !important; }
.section_cta .button-new, .section_cta .button-new * { text-shadow: none !important; }