/* ============================================================================
   Landing publication system
   ----------------------------------------------------------------------------
   The files under /public/css are lifted byte-for-byte from design-eng and are
   intentionally replaced by the port generator. This stylesheet is the
   Landing-owned layer for shared reading contracts and publication components;
   it loads after the generated stack so a re-lift cannot erase these rules.
   ============================================================================ */

:root {
  /* Semantic stack contracts. Keep the raw spacing ramp stable for product UI. */
  --stack-kicker-title: var(--sp3);
  --stack-title-deck: var(--sp4);
  --stack-head-content: var(--sp7);
  --m-section-deck: 52ch;
  --m-hero-deck: 48ch;

  /* Marketing artifact surfaces use one real hairline and one soft elevation.
     These are deliberately separate from --line/--shadow-soft: ordinary cards,
     controls, and separators must not inherit mockup-window chrome. */
  --artifact-ui-line: rgb(20 20 23 / 8%);
  --artifact-ui-elevation:
    0 1px 2px rgb(20 20 30 / 5%),
    0 12px 28px -18px rgb(20 20 30 / 18%);
  --artifact-ui-frame:
    0 0 0 1px var(--artifact-ui-line),
    var(--artifact-ui-elevation);
}

[data-theme="dark"] {
  --artifact-ui-line: rgb(255 255 255 / 10%);
  --artifact-ui-elevation:
    0 1px 2px rgb(0 0 0 / 24%),
    0 14px 32px -18px rgb(0 0 0 / 52%);
  --artifact-ui-frame:
    0 0 0 1px var(--artifact-ui-line),
    var(--artifact-ui-elevation);
}

/* The lifted design kit used --mk-lift as a second one-pixel outline even on
   elements that already had a border. Rebind it to blur-only elevation, then
   give truly borderless windows the composite frame explicitly. */
.mk {
  --mk-lift: var(--artifact-ui-elevation);
  --mk-lift-in: var(--artifact-ui-elevation);
}
body :is(.mk-crop, .mk-win, .mk-shell) { box-shadow: var(--artifact-ui-frame) }

/* Already-bordered UI artifacts get exactly one subtle edge. Specificity is
   intentional: products.css is route-local and follows this shared sheet. */
body :is(
  .product-window,
  .router-hero-card,
  .product-detail-card,
  .product-mini-window,
  .mk-mini-window,
  .router-demo-window,
  .developer-command,
  .developer-install-stage .mk-install,
  .developer-studio-stage .studio-projection-module
) {
  border-color: var(--artifact-ui-line);
  box-shadow: var(--artifact-ui-elevation);
}
body #durable .developer-runtime-window {
  border-color: var(--artifact-ui-line);
  box-shadow: var(--artifact-ui-elevation);
}
body .product-frame > .product-code-view { box-shadow: var(--artifact-ui-frame) }

/* Floating windows have no border, except for the metering pair. Keep the
   former on the composite frame and the latter on its single real border. */
[data-theme] body .mk-float,
[data-theme] body .mk-float.top { box-shadow: var(--artifact-ui-frame) }
[data-theme] body .mk-plate.m2 .mk-float {
  border-color: var(--artifact-ui-line);
  box-shadow: var(--artifact-ui-elevation);
}

/* Parent windows own these frames; the embedded application/miniature must
   not draw a second edge inside them. */
body .product-studio-shell-window > .mk-shell,
body .mk-float > .mk-mini-window {
  border: 0;
  box-shadow: none;
}

/* One owner per gap: the stack owns placement, its children do not contribute
   a second margin. This removes the old 16px + 12px double-gap. */
.eyebrow { margin-bottom: var(--stack-kicker-title) }
.display + .lead { margin-top: var(--stack-title-deck) }
.section-head {
  gap: 0;
  margin-bottom: var(--stack-head-content);
}
.section-head > .eyebrow { margin: 0 0 var(--stack-kicker-title) }
.section-head > .sub {
  width: min(100%, var(--m-section-deck));
  max-width: var(--m-section-deck);
  margin: var(--stack-title-deck) 0 0;
  text-wrap: pretty;
}
.section-head.center > .sub { margin-inline: auto }
.section-head.row > .sub { margin: 0; max-width: var(--m-section-deck) }
.section > .wrap > .section-head:last-child { margin-bottom: 0 }

.lead,
.sub,
.card p,
.hairitem p,
.bene-body > span { text-wrap: pretty }

/* Standard texture-card flow. The icon, title, and copy form one intrinsic
   top stack with a single shared gap. Titles do not reserve an empty second
   line: a wrapped title simply makes its own card's copy follow it. When the
   final child is an action, the card's remaining height belongs above that
   action so peer CTAs finish on the same bottom edge. The glyph opts out of
   scroll-depth translation because moving it changes the visible first gap. */
.cardgrid > .card.tex {
  --card-flow-gap: clamp(var(--sp3), 1.5vw, var(--sp4));
  gap: var(--card-flow-gap);
  justify-content: flex-start;
}
.cardgrid > .card.tex > .glyph {
  translate: none;
  will-change: auto;
}
.cardgrid > .card.tex > h3 { min-height: 0 }
.cardgrid > .card.tex > :is(.btn, .link-arrow):last-child {
  margin-block-start: auto;
}

/* Route heroes use one readable deck measure instead of route-specific 54–60ch
   overrides. Specificity keeps this contract intact when a route sheet follows
   the shared publication sheet. */
body .page-hero .lead,
body .product-hero .lead,
body .blog-index-hero .lead {
  width: min(100%, var(--m-hero-deck));
  max-width: var(--m-hero-deck);
}

@media (max-width: 860px) {
  .section-head.row > .sub { margin: 0 }
}

/* Hover and keyboard focus are two views of the same interaction state. The
   generated sheets already cover cards and button variants; this closes the
   remaining chrome gaps without imposing a blanket treatment on every anchor. */
.brand {
  border-radius: var(--ctl-r);
  transition: opacity var(--fast) var(--ease);
}
.brand:is(:hover, :focus-visible) { opacity: .68 }
.link-arrow:is(:hover, :focus-visible) { color: var(--ink); gap: 10px }
.announce a:is(:hover, :focus-visible) { gap: 8px }
.nav-links > a:focus-visible,
.navdrop > button:focus-visible { color: var(--ink) }
.themebtn:focus-visible,
.menubtn:is(:hover, :focus-visible) {
  background: var(--active-shade);
  color: var(--ink);
}
.menubtn { border-radius: var(--ctl-r) }
.mnav a:is(:hover, :focus-visible) {
  background: var(--active-shade);
  color: var(--ink);
}
.foot-col a:focus-visible { color: #fff }
.foot-socials a:focus-visible { color: #fff; transform: translateY(-2px) }

/* -------------------------------- Careers --------------------------------- */

.careers-page { --careers-card-pad: clamp(24px, 3vw, 32px) }

.careers-page .page-hero .wrap {
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(var(--sp6), 5vw, var(--sp7));
}
.careers-page .page-hero .wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(clamp(360px, 52vw, 620px), calc(100% - var(--sp4)));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../art/guilloche-weave.svg") no-repeat center / 100% 100%;
  opacity: var(--tex-ink);
  filter: invert(var(--tex-invert));
  pointer-events: none;
}
.careers-page .careers-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 880px);
  margin: clamp(var(--sp5), 3vw, var(--sp6)) auto 0;
  padding: 0;
  list-style: none;
}
.careers-page .careers-fact {
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  min-width: 0;
  min-height: 88px;
  place-items: center;
  align-content: stretch;
  gap: var(--sp2);
  padding-block: var(--sp2);
  padding-inline: clamp(var(--sp2), 2.5vw, var(--sp5));
  text-align: center;
}
.careers-page .careers-fact + .careers-fact { border-inline-start: 1px solid var(--line-2) }
.careers-page .careers-fact-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
}
.careers-page .careers-fact-icon svg { width: 24px; height: 24px }
.careers-page .careers-fact p {
  max-width: 24ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--t-small);
  line-height: 1.45;
  text-wrap: balance;
}
.careers-page .careers-fact strong { color: var(--ink); font-weight: 500 }
.careers-page .careers-fact strong.careers-fact-value--new-line { display: block }

@media (max-width: 620px) {
  .careers-page .careers-facts { width: 100% }
  .careers-page .careers-fact {
    grid-template-rows: 24px minmax(0, 1fr);
    min-height: 96px;
    gap: var(--sp2);
    padding-inline: var(--sp1);
  }
  .careers-page .careers-fact-icon { width: 24px; height: 24px }
  .careers-page .careers-fact-icon svg { width: 20px; height: 20px }
  .careers-page .careers-fact p { font-size: var(--t-small); line-height: 1.5 }
}

/* The standard callout uses a contained bloom. Problem cards intentionally do
   not appear here: they inherit the exact Resources “where to go” primitive. */
.careers-page .careers-standard.card.tex {
  padding: var(--careers-card-pad);
  --tex-wash: clamp(152px, 14vw, 176px);
  --tex-bleed-x: var(--sp4);
  --tex-bleed-y: var(--sp4);
}
.careers-page .careers-standard h3 { min-height: 0 }

/* The bridge between problem and product is a deliberate statement panel, not
   a heading followed by an accidental empty section. */
.careers-page #what-we-built .section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp4) clamp(var(--sp6), 5vw, var(--sp8));
  padding: clamp(var(--sp5), 4vw, var(--sp7));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
}
.careers-page #what-we-built .section-head > .eyebrow { grid-column: 1 / -1; margin: 0 }
.careers-page #what-we-built .section-head > .sub { margin: 0; align-self: start }

/* Careers consumes the same framed miniature + copy stack as the canonical
   product-related cards, extended to the full three-product stack. The one
   inner anchor owns a full-card overlay, so every visible pixel is a native
   link target without nesting controls. */
.careers-page .careers-product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp4);
  width: 100%;
  max-width: none;
}
.careers-page .platform-card { --related-pad: var(--careers-card-pad) }
.careers-page .platform-card .product-related-visual {
  pointer-events: none;
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--s1) 14%, transparent),
      color-mix(in srgb, var(--s1) 4%, transparent)
    ),
    var(--product-backdrop);
  background-position: center, var(--product-backdrop-position);
  background-size: cover;
}
.careers-page .platform-card .product-related-visual::before { display: none }
[data-theme="dark"] .careers-page .platform-card .product-related-visual {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 38%, transparent),
      color-mix(in srgb, var(--bg) 48%, transparent)
    ),
    var(--product-backdrop);
}
.careers-page .careers-mini-copy { cursor: default; pointer-events: none }

/* How we work pairs a compact editorial rail with the three actual traits.
   “A demo isn’t done” is a product standard, so it gets its own callout. */
.careers-page #how-we-work {
  background:
    linear-gradient(var(--hl), var(--hl)),
    var(--marketing-bg);
  box-shadow: inset 0 1px var(--line), inset 0 -1px var(--line);
}
.careers-values {
  display: grid;
  grid-template-columns: minmax(14rem, 4fr) minmax(0, 7fr);
  grid-template-areas:
    "head values"
    "standard values";
  align-items: start;
  gap: var(--sp5) clamp(var(--sp6), 6vw, var(--sp8));
}
.careers-values-head { grid-area: head; margin-bottom: 0 }
.careers-value-list {
  grid-area: values;
  align-self: center;
}
.careers-value {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp4);
  padding-block: var(--sp5);
}
.careers-value + .careers-value { border-top: 1px solid var(--line-2) }
.careers-value-marker {
  display: grid;
  grid-template-columns: 16px 28px;
  align-items: center;
  gap: var(--sp1);
  min-height: 28px;
}
.careers-value-index {
  font-family: var(--mono);
  font-size: var(--t-meta);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.careers-value-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--ink-muted);
}
.careers-value-icon svg { width: 24px; height: 24px }
.careers-value h3 {
  margin: 0;
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -.014em;
  line-height: 1.25;
}
.careers-value p {
  margin: var(--sp2) 0 0;
  max-width: 66ch;
  color: var(--ink-muted);
  font-size: var(--t-body);
  line-height: 1.65;
  text-wrap: pretty;
}
.careers-standard { grid-area: standard; min-height: 0 }
.careers-standard > .eyebrow { margin: 0 }
.careers-standard-note {
  margin-top: var(--sp4) !important;
  padding-top: var(--sp4);
  border-top: 1px solid var(--line);
}

/* Five benefit categories form a deliberate 3 + 2 composition on desktop,
   2 + 2 + 1 at tablet, and one readable stack on phones. */
.careers-page .bene-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp4);
  align-items: stretch;
}
.careers-page .bene-group {
  grid-column: span 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding-block: clamp(var(--sp6), 4vw, var(--sp7));
  padding-inline: clamp(var(--sp5), 3vw, var(--sp6));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
}
.careers-page .bene-group:nth-child(n + 4) { grid-column: span 3 }
.careers-page .bene-group h3 {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  min-height: 0;
  align-items: start;
  column-gap: var(--sp3);
  margin: 0 0 var(--sp5);
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -.014em;
  line-height: 1.25;
  text-wrap: balance;
}
.careers-page .bene-group .bene-ic {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  place-items: center;
  color: var(--ink-muted);
}
.careers-page .bene-group .bene-ic svg { width: 18px; height: 18px }
.careers-page .bene-group ul { flex: 1 }
.careers-page .bene-group li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  column-gap: var(--sp3);
}
.careers-page .bene-group .bene-check {
  display: grid;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  place-items: center;
  color: var(--ink-faint);
}
.careers-page .bene-group .bene-check svg { width: 18px; height: 18px }
.careers-page .bene-group .bene-body > span {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: var(--t-body);
  line-height: 1.5;
  text-wrap: pretty;
}
.careers-page .bene-group > span,
.careers-page .bene-group .bene-check { font-size: inherit }

.careers-page .perk-panel {
  margin-top: var(--sp6);
  padding: clamp(var(--sp6), 5vw, var(--sp8));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
}
.careers-page .perk-panel .eyebrow { margin-bottom: clamp(var(--sp5), 4vw, var(--sp7)) }
.careers-page .perk-grid {
  width: 100%;
  gap: clamp(var(--sp5), 4vw, var(--sp7));
}
.careers-page .perk-logo {
  display: grid;
  min-width: 0;
  min-height: 64px;
  padding: var(--sp3);
  place-items: center;
}
.careers-page .perk-logo img[src*="uber-eats"] { height: 34px }

.careers-page .role-row {
  position: relative;
  column-gap: var(--sp5);
  margin-inline: calc(-1 * var(--sp4));
  padding-inline: var(--sp4);
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  transition:
    background-color var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}
.careers-page .role-row:is(:hover, :focus-visible) {
  background: var(--active-shade);
  border-color: transparent;
  border-radius: var(--ctl-r);
}
.careers-page .role-row:is(:hover, :focus-visible) + .role-row {
  border-top-color: transparent;
}
.careers-page .role-email-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}
.careers-page .role-row-action {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-self: end;
  gap: var(--sp2);
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.careers-page .role-row-action svg {
  width: 14px;
  height: 14px;
  transition: transform var(--fast) var(--ease);
}
.careers-page .role-row:is(:hover, :focus-visible) .role-row-action.btn.line {
  background: var(--hl);
  border-color: var(--ink-faint);
}
.careers-page .role-row:is(:hover, :focus-visible) .role-row-action svg {
  opacity: 1;
  transform: translateX(3px);
}
.careers-page .role-acts { flex-wrap: wrap; justify-content: flex-end }

@media (max-width: 960px) {
  .careers-page .careers-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .careers-page .careers-product-grid > :last-child { grid-column: 1 / -1 }
  .careers-page .bene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .careers-page .bene-group,
  .careers-page .bene-group:nth-child(n + 4) { grid-column: auto }
  .careers-page .bene-group:last-child { grid-column: 1 / -1 }
  .careers-page .bene-group:last-child ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp5);
  }
}

@media (max-width: 860px) {
  .careers-page #what-we-built .section-head { grid-template-columns: minmax(0, 1fr) }
  .careers-page #what-we-built .section-head { gap: var(--sp3) }
  .careers-page #what-we-built .section-head > .eyebrow { margin-bottom: 0 }
  .careers-page #what-we-built .section-head > .sub { margin-top: var(--sp1) }
  .careers-values {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "values"
      "standard";
    gap: var(--sp6);
  }
  .careers-values-head { margin-bottom: 0 }
}

@media (max-width: 700px) {
  .careers-page .careers-product-grid { grid-template-columns: minmax(0, 1fr) }
  .careers-page .careers-product-grid > :last-child { grid-column: auto }
}

@media (max-width: 700px) {
  .careers-page .bene-group:last-child ul { grid-template-columns: minmax(0, 1fr) }
}

@media (max-width: 620px) {
  .careers-page .bene-grid { grid-template-columns: minmax(0, 1fr) }
  .careers-page .bene-group:last-child { grid-column: auto }
  .careers-page .careers-standard.card.tex {
    --tex-wash: 148px;
    --tex-bleed-x: var(--sp4);
    --tex-bleed-y: var(--sp4);
  }
}

@media (max-width: 560px) {
  .careers-page .page-hero .wrap::before {
    width: min(calc(100% - var(--sp2)), 420px);
  }
  .careers-value { grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp3) }
  .careers-page .perk-panel { padding: var(--sp5) }
  .careers-page .perk-grid { gap: var(--sp4) }
  .careers-page .perk-logo { min-height: 56px; padding: var(--sp2) }
  .careers-page .role-row {
    margin-inline: calc(-1 * var(--sp3));
    padding-inline: var(--sp3);
  }
  .careers-page #roles .role-acts {
    width: 100%;
    justify-content: space-between;
  }
  .careers-page #roles .role-row-action { justify-self: start }
}

@media (prefers-reduced-motion: reduce) {
  .careers-page .role-row-action svg,
  .foot-socials a { transition: none }
}